botmux 3.7.1 → 3.8.0

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

@@ -1,11 +1,94 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { DropdownMenu, Html, LoadingState, RefreshIconButton } from './dashboard-components.js';
+import { applyListenerFilterState, filterListenerTargets, listenerTargetStateFor, } from './listener-filters.js';
 import { useT } from './react-hooks.js';
 import { mountReactPage } from './react-mount.js';
 import { hasExplicitChatRole, summarizeGroupProfileMatches, } from './role-profile-match.js';
-import { applyRoleProfile, botInChatCount, botRoleCount, byteLength, deleteProfileEntry, deleteRole, entryForBot, filterRoleGroups, filterRoleProfiles, hashChatId, isValidProfileId, loadGroups, loadProfileEntries, loadProfileEntry, loadProfiles, loadRole, loadRoleProfileContext, MAX_ROLE_BYTES, roleKey, ROLE_WARN_BYTES, saveInjectMode, saveProfileEntry, saveRole, } from './roles.js';
+import { applyRoleProfile, botInChatCount, botRoleCount, byteLength, deleteProfileEntry, deleteMessageListener, deleteRole, entryForBot, filterRoleGroups, filterRoleProfiles, formatListenerPreviewTime, hashChatId, isValidProfileId, loadGroupMemberDisplays, loadGroups, loadMessageListenerRunPreviewStatus, loadMessageListener, loadProfileEntries, loadProfileEntry, loadProfiles, loadRole, loadRoleProfileContext, MAX_MESSAGE_LISTENER_PROMPT_BYTES, MAX_ROLE_BYTES, MESSAGE_LISTENER_WARN_BYTES, DEFAULT_MESSAGE_LISTENER_PREVIEW_LIMIT, MAX_MESSAGE_LISTENER_PREVIEW_LIMIT, roleKey, ROLE_WARN_BYTES, saveInjectMode, saveMessageListener, saveProfileEntry, saveRole, previewMessageListener, runMessageListenerPreview, } from './roles.js';
 import { botAvatarHtml, loadNameMaps } from './ui.js';
+const LISTENER_MESSAGE_TYPES = ['text', 'post', 'image', 'interactive'];
+const DEFAULT_LISTENER = {
+    enabled: false,
+    prompt: '',
+    senderPolicy: {
+        mode: 'include_only',
+        includeSenderTypes: ['user'],
+        excludeSelf: true,
+    },
+    messagePolicy: {
+        includeMsgTypes: [...LISTENER_MESSAGE_TYPES],
+        scope: 'top_level',
+    },
+};
+function cloneListener(listener) {
+    return {
+        enabled: listener?.enabled === true,
+        name: listener?.name ?? '',
+        replyCardTitle: listener?.replyCardTitle ?? '',
+        workingDir: listener?.workingDir ?? '',
+        prompt: listener?.prompt ?? '',
+        senderPolicy: {
+            mode: 'include_only',
+            includeSenderOpenIds: [...(listener?.senderPolicy?.includeSenderOpenIds ?? [])],
+            excludeSenderOpenIds: [],
+            includeSenderTypes: [...(listener?.senderPolicy?.includeSenderTypes ?? DEFAULT_LISTENER.senderPolicy?.includeSenderTypes ?? [])],
+            excludeSenderTypes: [...(listener?.senderPolicy?.excludeSenderTypes ?? [])],
+            excludeSelf: listener?.senderPolicy?.excludeSelf !== false,
+        },
+        messagePolicy: {
+            includeMsgTypes: [...(listener?.messagePolicy?.includeMsgTypes ?? DEFAULT_LISTENER.messagePolicy?.includeMsgTypes ?? [])],
+            scope: 'top_level',
+        },
+    };
+}
+function listenerHasConfig(listener) {
+    return listener?.enabled === true && listener.prompt.trim().length > 0;
+}
+function groupHasAnyRoleOrListener(group) {
+    return group.memberBots.some(bot => bot.inChat && (bot.hasRole || bot.hasMessageListener));
+}
+function memberDisplayName(member, openId) {
+    return member?.name || openId;
+}
+function listenerSenderTypeMatches(member, listener) {
+    const includeTypes = new Set(listener.senderPolicy?.includeSenderTypes ?? DEFAULT_LISTENER.senderPolicy?.includeSenderTypes ?? []);
+    if (includeTypes.size === 0)
+        return true;
+    return (member.memberType === 'user' || member.memberType === 'bot') && includeTypes.has(member.memberType);
+}
+function mergeListenerRunPreviewResults(current, next) {
+    const merged = new Map();
+    for (const result of current ?? [])
+        merged.set(result.messageId, result);
+    for (const result of next)
+        merged.set(result.messageId, { ...merged.get(result.messageId), ...result });
+    return [...merged.values()];
+}
+function listenerRunPreviewStateClass(state, ok) {
+    if (!ok || state === 'failed')
+        return 'error';
+    if (state === 'replied')
+        return 'ok';
+    if (state === 'running')
+        return 'running';
+    return 'triggered';
+}
+function listenerForEditor(listener, members = []) {
+    const next = cloneListener(listener ?? DEFAULT_LISTENER);
+    if (listener?.senderPolicy?.mode !== 'all_except_excluded')
+        return next;
+    const excluded = new Set(listener.senderPolicy.excludeSenderOpenIds ?? []);
+    next.senderPolicy = {
+        ...(next.senderPolicy ?? {}),
+        mode: 'include_only',
+        includeSenderOpenIds: members
+            .filter(member => listenerSenderTypeMatches(member, next) && !excluded.has(member.openId))
+            .map(member => member.openId),
+        excludeSenderOpenIds: [],
+    };
+    return next;
+}
 function useAliveRef() {
     const alive = useRef(true);
     useEffect(() => {
@@ -65,6 +148,19 @@ function RolesPage(props) {
     const [injectSaving, setInjectSaving] = useState(false);
     const [roleFlash, setRoleFlash] = useState(null);
     const [injectFlash, setInjectFlash] = useState(null);
+    const [groupEditorSection, setGroupEditorSection] = useState('role');
+    const [selectedListener, setSelectedListener] = useState(null);
+    const [editingListener, setEditingListener] = useState(() => cloneListener(DEFAULT_LISTENER));
+    const [listenerMembers, setListenerMembers] = useState([]);
+    const [listenerLoading, setListenerLoading] = useState(false);
+    const [listenerMembersLoading, setListenerMembersLoading] = useState(false);
+    const [listenerSaving, setListenerSaving] = useState(false);
+    const [listenerDeleting, setListenerDeleting] = useState(false);
+    const [listenerFlash, setListenerFlash] = useState(null);
+    const [listenerPreviewLimit, setListenerPreviewLimit] = useState(DEFAULT_MESSAGE_LISTENER_PREVIEW_LIMIT);
+    const [listenerPreviewStatus, setListenerPreviewStatus] = useState({ kind: 'idle' });
+    const listenerRunPollRef = useRef(null);
+    const listenerRunPollToken = useRef(0);
     const [selectedProfileId, setSelectedProfileId] = useState(null);
     const [selectedProfileBotId, setSelectedProfileBotId] = useState(null);
     const [profileEntries, setProfileEntries] = useState([]);
@@ -97,6 +193,13 @@ function RolesPage(props) {
     const filteredProfiles = useMemo(() => filterRoleProfiles(profiles, profileFilter), [profiles, profileFilter]);
     const roleByteLen = byteLength(editingContent);
     const profileByteLen = byteLength(profileEditingContent);
+    const listenerPromptByteLen = byteLength(editingListener.prompt);
+    const listenerMemberById = useMemo(() => {
+        const map = new Map();
+        for (const member of listenerMembers)
+            map.set(member.openId, member);
+        return map;
+    }, [listenerMembers]);
     const flash = useCallback((setter, text, isError = false) => {
         const id = Date.now() + Math.random();
         setter({ text, isError, id });
@@ -134,6 +237,33 @@ function RolesPage(props) {
         setProfiles(nextProfiles);
         return nextProfiles;
     }, [alive]);
+    const applyLoadedListener = useCallback((listener, members = []) => {
+        const next = listenerForEditor(listener ?? DEFAULT_LISTENER, members);
+        setSelectedListener(listener);
+        setEditingListener(next);
+    }, []);
+    const loadListenerForSelection = useCallback(async (botId, groupId, serial) => {
+        setListenerLoading(true);
+        setListenerMembersLoading(true);
+        setListenerMembers([]);
+        try {
+            const [listener, members] = await Promise.all([
+                loadMessageListener(botId, groupId).catch(() => cloneListener(DEFAULT_LISTENER)),
+                loadGroupMemberDisplays(botId, groupId).catch(() => []),
+            ]);
+            if (!alive.current || serial !== selectSerial.current)
+                return;
+            applyLoadedListener(listenerHasConfig(listener) ? listener : null, members);
+            setListenerMembers(members);
+            setListenerFlash(null);
+        }
+        finally {
+            if (alive.current && serial === selectSerial.current) {
+                setListenerLoading(false);
+                setListenerMembersLoading(false);
+            }
+        }
+    }, [alive, applyLoadedListener]);
     const loadInitial = useCallback(async () => {
         setLoadingTree(true);
         setProfileListLoading(true);
@@ -148,7 +278,7 @@ function RolesPage(props) {
             await loadNameMaps();
             if (!alive.current)
                 return;
-            setExpandedGroups(new Set(snapshot.groups.filter(group => botRoleCount(group) > 0).map(group => group.chatId)));
+            setExpandedGroups(new Set(snapshot.groups.filter(groupHasAnyRoleOrListener).map(group => group.chatId)));
             if (props.tab === 'profiles') {
                 const requestedChatId = hashChatId();
                 setSelectedApplyGroupId(current => {
@@ -177,6 +307,10 @@ function RolesPage(props) {
     useEffect(() => {
         void loadInitial();
     }, [loadInitial]);
+    useEffect(() => () => {
+        listenerRunPollToken.current += 1;
+        listenerRunPollRef.current = null;
+    }, []);
     useEffect(() => {
         if (selectedApplyGroupId || groups.length === 0)
             return;
@@ -193,14 +327,17 @@ function RolesPage(props) {
         const serial = ++selectSerial.current;
         setSelectedGroupId(groupId);
         setSelectedBotId(botId);
+        setRoleFlash(null);
+        setInjectFlash(null);
+        setListenerFlash(null);
+        applyLoadedListener(null);
         const role = await loadRole(botId, groupId);
         if (!alive.current || serial !== selectSerial.current)
             return;
         setSelectedRole(role);
         setEditingContent(role.content ?? '');
         setEditingInjectMode(role.injectMode === 'once' ? 'once' : 'every');
-        setRoleFlash(null);
-        setInjectFlash(null);
+        await loadListenerForSelection(botId, groupId, serial);
     }
     async function handleGroupRefresh() {
         const snapshot = await refreshGroups();
@@ -208,12 +345,14 @@ function RolesPage(props) {
             return;
         void refreshRoleContext(snapshot.groups, profiles);
         if (selectedGroupId && selectedBotId) {
+            const serial = ++selectSerial.current;
             const role = await loadRole(selectedBotId, selectedGroupId);
-            if (!alive.current)
+            if (!alive.current || serial !== selectSerial.current)
                 return;
             setSelectedRole(role);
             setEditingContent(role.content ?? '');
             setEditingInjectMode(role.injectMode === 'once' ? 'once' : 'every');
+            await loadListenerForSelection(selectedBotId, selectedGroupId, serial);
         }
     }
     async function handleSaveRole() {
@@ -287,6 +426,273 @@ function RolesPage(props) {
                 setInjectSaving(false);
         }
     }
+    function updateEditingListener(patch) {
+        setEditingListener(prev => ({ ...prev, ...patch }));
+    }
+    function updateListenerSenderPolicy(patch) {
+        setEditingListener(prev => ({
+            ...prev,
+            senderPolicy: {
+                ...(prev.senderPolicy ?? {}),
+                ...patch,
+            },
+        }));
+    }
+    function updateListenerMessagePolicy(patch) {
+        setEditingListener(prev => ({
+            ...prev,
+            messagePolicy: {
+                ...(prev.messagePolicy ?? { scope: 'top_level' }),
+                ...patch,
+                scope: 'top_level',
+            },
+        }));
+    }
+    function toggleListenerSenderType(type, checked) {
+        setEditingListener(prev => {
+            const current = new Set(prev.senderPolicy?.includeSenderTypes ?? []);
+            if (checked)
+                current.add(type);
+            else {
+                if (current.size <= 1 && current.has(type))
+                    return prev;
+                current.delete(type);
+            }
+            return {
+                ...prev,
+                senderPolicy: {
+                    ...(prev.senderPolicy ?? {}),
+                    includeSenderTypes: [...current],
+                },
+            };
+        });
+    }
+    function toggleListenerMsgType(msgType, checked) {
+        setEditingListener(prev => {
+            const current = new Set(prev.messagePolicy?.includeMsgTypes ?? []);
+            if (checked)
+                current.add(msgType);
+            else {
+                if (current.size <= 1 && current.has(msgType))
+                    return prev;
+                current.delete(msgType);
+            }
+            return {
+                ...prev,
+                messagePolicy: {
+                    ...(prev.messagePolicy ?? { scope: 'top_level' }),
+                    includeMsgTypes: [...current],
+                    scope: 'top_level',
+                },
+            };
+        });
+    }
+    function setListenerTargetPolicy(openId, listening) {
+        setEditingListener(prev => {
+            const next = applyListenerFilterState({
+                include: prev.senderPolicy?.includeSenderOpenIds ?? [],
+                exclude: prev.senderPolicy?.excludeSenderOpenIds ?? [],
+                targetIds: [openId],
+                listening,
+            });
+            return {
+                ...prev,
+                senderPolicy: {
+                    ...(prev.senderPolicy ?? {}),
+                    mode: 'include_only',
+                    includeSenderOpenIds: next.include,
+                    excludeSenderOpenIds: next.exclude,
+                },
+            };
+        });
+    }
+    function setListenerTargetsPolicy(openIds, listening) {
+        setEditingListener(prev => {
+            const current = applyListenerFilterState({
+                include: prev.senderPolicy?.includeSenderOpenIds ?? [],
+                exclude: prev.senderPolicy?.excludeSenderOpenIds ?? [],
+                targetIds: openIds,
+                listening,
+            });
+            return {
+                ...prev,
+                senderPolicy: {
+                    ...(prev.senderPolicy ?? {}),
+                    mode: 'include_only',
+                    includeSenderOpenIds: current.include,
+                    excludeSenderOpenIds: current.exclude,
+                },
+            };
+        });
+    }
+    function listenerSavePayload() {
+        const senderPolicy = editingListener.senderPolicy ?? {};
+        const messagePolicy = editingListener.messagePolicy ?? {};
+        const includeSenderOpenIds = [...new Set(senderPolicy.includeSenderOpenIds ?? [])].filter(Boolean);
+        const includeSenderTypes = [...new Set(senderPolicy.includeSenderTypes ?? [])].filter((type) => type === 'user' || type === 'bot');
+        const includeMsgTypes = [...new Set(messagePolicy.includeMsgTypes ?? [])].filter(Boolean);
+        return {
+            enabled: editingListener.enabled,
+            ...(editingListener.name?.trim() ? { name: editingListener.name.trim() } : {}),
+            ...(editingListener.replyCardTitle?.trim() ? { replyCardTitle: editingListener.replyCardTitle.trim() } : {}),
+            ...(editingListener.workingDir?.trim() ? { workingDir: editingListener.workingDir.trim() } : {}),
+            prompt: editingListener.prompt.trim(),
+            senderPolicy: {
+                ...(includeSenderOpenIds.length > 0 ? { includeSenderOpenIds } : {}),
+                mode: 'include_only',
+                ...(includeSenderTypes.length > 0 ? { includeSenderTypes } : {}),
+                excludeSelf: senderPolicy.excludeSelf !== false,
+            },
+            messagePolicy: {
+                ...(includeMsgTypes.length > 0 ? { includeMsgTypes } : {}),
+                scope: 'top_level',
+            },
+        };
+    }
+    function validateListenerForPreview() {
+        if (!editingListener.prompt.trim()) {
+            flash(setListenerFlash, tr('roles.listenerPromptRequired'), true);
+            return null;
+        }
+        if ((editingListener.senderPolicy?.includeSenderOpenIds?.length ?? 0) === 0) {
+            flash(setListenerFlash, tr('roles.listenerSenderRequired'), true);
+            return null;
+        }
+        return {
+            ...listenerSavePayload(),
+            enabled: true,
+        };
+    }
+    async function handleListenerPreview(run) {
+        if (!selectedGroupId || !selectedBotId)
+            return;
+        const payload = validateListenerForPreview();
+        if (!payload)
+            return;
+        const mode = run ? 'run' : 'preview';
+        setListenerPreviewStatus({ kind: 'loading', mode });
+        try {
+            const response = run
+                ? await runMessageListenerPreview(selectedBotId, selectedGroupId, payload, listenerPreviewLimit)
+                : await previewMessageListener(selectedBotId, selectedGroupId, payload, listenerPreviewLimit);
+            if (!alive.current)
+                return;
+            setListenerPreviewStatus(response.ok
+                ? { kind: 'result', response, mode }
+                : { kind: 'error', text: response.error || tr('roles.listenerPreviewFailed') });
+            if (response.ok && run && response.runId) {
+                startListenerRunPreviewPolling(response.runId);
+            }
+        }
+        catch (err) {
+            if (!alive.current)
+                return;
+            setListenerPreviewStatus({ kind: 'error', text: err instanceof Error ? err.message : tr('roles.listenerPreviewFailed') });
+        }
+    }
+    function startListenerRunPreviewPolling(runId) {
+        if (!selectedGroupId || !selectedBotId)
+            return;
+        const token = ++listenerRunPollToken.current;
+        listenerRunPollRef.current = { runId, token };
+        const poll = async () => {
+            if (!alive.current)
+                return;
+            const current = listenerRunPollRef.current;
+            if (!current || current.runId !== runId || current.token !== token || !selectedGroupId || !selectedBotId)
+                return;
+            try {
+                const status = await loadMessageListenerRunPreviewStatus(selectedBotId, selectedGroupId, runId);
+                if (!alive.current)
+                    return;
+                if (status.ok && status.results) {
+                    const nextResults = status.results;
+                    setListenerPreviewStatus(previous => {
+                        if (previous.kind !== 'result' || previous.mode !== 'run' || previous.response.runId !== runId)
+                            return previous;
+                        return {
+                            ...previous,
+                            response: {
+                                ...previous.response,
+                                results: mergeListenerRunPreviewResults(previous.response.results, nextResults),
+                            },
+                        };
+                    });
+                    if (nextResults.some(result => result.state === 'triggered' || result.state === 'running')) {
+                        scheduleTimer(poll, 1500);
+                    }
+                    else if (listenerRunPollRef.current?.runId === runId) {
+                        listenerRunPollRef.current = null;
+                    }
+                }
+            }
+            catch {
+                scheduleTimer(poll, 2500);
+            }
+        };
+        scheduleTimer(poll, 1500);
+    }
+    async function handleSaveListener() {
+        if (!selectedGroupId || !selectedBotId)
+            return;
+        if (!editingListener.enabled) {
+            await handleDeleteListener(false);
+            return;
+        }
+        if (!editingListener.prompt.trim()) {
+            flash(setListenerFlash, tr('roles.listenerPromptRequired'), true);
+            return;
+        }
+        if ((editingListener.senderPolicy?.includeSenderOpenIds?.length ?? 0) === 0) {
+            flash(setListenerFlash, tr('roles.listenerSenderRequired'), true);
+            return;
+        }
+        setListenerSaving(true);
+        try {
+            const ok = await saveMessageListener(selectedBotId, selectedGroupId, listenerSavePayload());
+            if (!alive.current)
+                return;
+            if (ok) {
+                const snapshot = await refreshGroups();
+                if (!alive.current)
+                    return;
+                const listener = await loadMessageListener(selectedBotId, selectedGroupId);
+                if (!alive.current)
+                    return;
+                applyLoadedListener(listenerHasConfig(listener) ? listener : null);
+                void refreshRoleContext(snapshot.groups, profiles);
+            }
+            flash(setListenerFlash, ok ? tr('roles.saved') : tr('roles.saveFailed'), !ok);
+        }
+        finally {
+            if (alive.current)
+                setListenerSaving(false);
+        }
+    }
+    async function handleDeleteListener(confirmFirst = true) {
+        if (!selectedGroupId || !selectedBotId)
+            return;
+        if (confirmFirst && !confirm(tr('roles.listenerConfirmDelete')))
+            return;
+        setListenerDeleting(true);
+        try {
+            const ok = await deleteMessageListener(selectedBotId, selectedGroupId);
+            if (!alive.current)
+                return;
+            if (ok) {
+                const snapshot = await refreshGroups();
+                if (!alive.current)
+                    return;
+                applyLoadedListener(null);
+                void refreshRoleContext(snapshot.groups, profiles);
+            }
+            flash(setListenerFlash, ok ? tr('roles.saved') : tr('roles.saveFailed'), !ok);
+        }
+        finally {
+            if (alive.current)
+                setListenerDeleting(false);
+        }
+    }
     async function handleSelectProfile(profileId) {
         const clean = profileId.trim();
         if (!isValidProfileId(clean))
@@ -439,13 +845,17 @@ function RolesPage(props) {
         }
     }
     const roleSaveDisabled = roleSaving || roleByteLen > MAX_ROLE_BYTES || editingContent.trim().length === 0;
+    const listenerSaveDisabled = listenerSaving
+        || listenerDeleting
+        || listenerPromptByteLen > MAX_MESSAGE_LISTENER_PROMPT_BYTES
+        || (editingListener.enabled && editingListener.prompt.trim().length === 0);
     const profileSaveDisabled = profileSaving || profileByteLen > MAX_ROLE_BYTES || profileEditingContent.trim().length === 0;
     const isProfiles = props.tab === 'profiles';
     const tabs = (_jsxs("nav", { className: "roles-subnav insight-tabs", role: "tablist", "aria-label": tr('roles.title'), children: [_jsx("a", { href: "#/roles", className: `itab${isProfiles ? '' : ' on'}`, role: "tab", "aria-selected": !isProfiles, children: tr('roles.tabGroups') }), _jsx("a", { href: "#/roles/profile", className: `itab${isProfiles ? ' on' : ''}`, role: "tab", "aria-selected": isProfiles, children: tr('roles.tabProfiles') })] }));
-    return (_jsxs("section", { className: "page roles-page", children: [_jsxs("div", { className: "page-heading roles-heading", children: [_jsxs("div", { children: [_jsx("p", { className: "eyebrow", children: tr('nav.roles') }), _jsx("h1", { children: tr('roles.title') })] }), _jsx("div", { className: "page-heading-actions", children: tabs })] }), _jsxs("div", { id: "roles-by-group-view", className: "roles-layout", hidden: isProfiles, children: [_jsxs("div", { className: "roles-tree-panel", children: [_jsxs("div", { className: "roles-tree-header dashboard-toolbar", children: [_jsx("input", { type: "search", id: "roles-search", placeholder: tr('roles.search'), value: groupsFilter, onChange: ev => setGroupsFilter(ev.target.value) }), _jsx(RefreshIconButton, { id: "roles-refresh", label: tr('roles.refresh'), onClick: () => void handleGroupRefresh() })] }), _jsx("div", { id: "roles-tree", className: "roles-tree", children: loadingTree ? _jsx(LoadingState, { label: tr('common.loading') }) : (_jsx(GroupsTree, { groups: filteredGroups, profiles: profiles, context: roleContext, contextLoaded: roleContextLoaded, expandedGroups: expandedGroups, selectedGroupId: selectedGroupId, selectedBotId: selectedBotId, tr: tr, onToggleGroup: groupId => setExpandedGroups(prev => toggleSet(prev, groupId)), onSelectBot: (groupId, botId) => void handleSelectBot(groupId, botId) })) })] }), _jsx("div", { className: "roles-editor-panel", children: !selectedGroupId || !selectedBotId ? (_jsx("div", { id: "roles-editor-empty", className: "roles-editor-empty", children: tr('roles.selectHint') })) : (_jsxs("div", { id: "roles-editor-form", className: "roles-editor-form", children: [_jsxs("div", { className: "roles-editor-head", children: [_jsxs("div", { children: [_jsxs("div", { className: "roles-editor-breadcrumb", children: [_jsx("span", { id: "roles-editor-group-name", children: selectedGroup?.name ?? selectedGroupId }), _jsx("span", { className: "roles-breadcrumb-sep", children: "\u203A" }), _jsx("span", { id: "roles-editor-bot-name", children: selectedBot?.botName ?? selectedBotId })] }), _jsx("div", { className: "roles-editor-meta", children: _jsxs("span", { id: "roles-editor-chat-id", className: "roles-editor-meta-line", children: [selectedGroupId, "  \u00B7  ", selectedBotId] }) })] }), _jsxs("div", { className: "roles-editor-actions roles-editor-head-actions", children: [_jsx("button", { type: "button", id: "roles-delete", className: "danger", style: { display: selectedRole?.hasRole ? '' : 'none' }, disabled: roleDeleting, onClick: () => void handleDeleteRole(), children: roleDeleting ? '...' : tr('roles.delete') }), _jsx("button", { type: "button", id: "roles-save", className: "primary", disabled: roleSaveDisabled, onClick: () => void handleSaveRole(), children: roleSaving ? '...' : tr('roles.save') })] })] }), _jsxs("div", { className: "roles-editor-inject", children: [_jsx("span", { className: "roles-field-label", children: tr('roles.injectModeLabel') }), _jsx(DropdownMenu, { id: "roles-editor-inject-mode", className: "roles-inline-menu", ariaLabel: tr('roles.injectModeLabel'), disabled: injectSaving, label: editingInjectMode === 'once' ? tr('roles.injectModeOnce') : tr('roles.injectModeEvery'), value: editingInjectMode, options: [
-                                                { value: 'every', label: tr('roles.injectModeEvery') },
-                                                { value: 'once', label: tr('roles.injectModeOnce') },
-                                            ], onChange: mode => void handleInjectModeChange(mode === 'once' ? 'once' : 'every') }), _jsx("span", { className: "roles-editor-inject-hint", children: tr('roles.injectModeHint') }), _jsx(Flash, { flash: injectFlash })] }), _jsx("textarea", { id: "roles-editor-textarea", placeholder: tr('roles.editorPlaceholder'), rows: 14, value: editingContent, onChange: ev => setEditingContent(ev.target.value) }), _jsxs("div", { className: "roles-editor-footer", children: [_jsxs("span", { id: "roles-editor-bytecount", className: byteCountClass(roleByteLen), children: [roleByteLen, " / ", MAX_ROLE_BYTES, " bytes"] }), _jsx(Flash, { flash: roleFlash })] }), _jsx(RolePreview, { content: editingContent, tr: tr, id: "roles-preview" })] })) })] }), _jsxs("div", { id: "roles-profiles-view", className: "roles-layout roles-profiles-layout", hidden: !isProfiles, children: [_jsxs("div", { className: "roles-tree-panel", children: [_jsxs("div", { className: "roles-tree-header roles-profile-create dashboard-toolbar", children: [_jsx("input", { type: "text", id: "roles-profile-id", placeholder: tr('roles.profileIdPlaceholder'), maxLength: 64, ref: profileIdInputRef, onChange: ev => ev.currentTarget.setCustomValidity('') }), _jsx("button", { type: "button", id: "roles-profile-select", onClick: () => void handleOpenProfile(), children: tr('roles.openProfile') })] }), _jsxs("div", { className: "roles-tree-header dashboard-toolbar", children: [_jsx("input", { type: "search", id: "roles-profile-search", placeholder: tr('roles.profileSearch'), value: profileFilter, onChange: ev => setProfileFilter(ev.target.value) }), _jsx(RefreshIconButton, { id: "roles-profile-refresh", label: tr('roles.refresh'), onClick: () => void handleProfileRefresh() })] }), _jsx("div", { id: "roles-profile-list", className: "roles-tree", children: profileListLoading ? _jsx(LoadingState, { label: tr('common.loading') }) : (_jsx(ProfileList, { profiles: filteredProfiles, selectedProfileId: selectedProfileId, tr: tr, onSelect: profileId => void handleSelectProfile(profileId) })) })] }), _jsx("div", { className: "roles-editor-panel", children: !selectedProfileId ? (_jsx("div", { id: "roles-profile-empty", className: "roles-editor-empty", children: tr('roles.profileSelectHint') })) : (_jsxs("div", { id: "roles-profile-detail", className: "roles-editor-form roles-profile-detail", children: [_jsx("div", { className: "roles-profile-title", children: _jsxs("div", { children: [_jsxs("div", { className: "roles-editor-breadcrumb", children: [_jsx("span", { children: selectedProfileId }), selectedProfileBot ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "roles-breadcrumb-sep", children: "\u203A" }), _jsx("span", { children: selectedProfileBot.botName ?? selectedProfileBot.larkAppId })] })) : null] }), _jsx("div", { className: "roles-editor-meta-line", children: tr('roles.profileRuntimeHint') })] }) }), _jsxs("div", { className: "roles-profile-grid", children: [_jsxs("div", { className: "roles-profile-bots", children: [_jsx("div", { className: "roles-profile-section-title", children: tr('roles.profileBots') }), _jsx("div", { className: "roles-profile-bot-list", children: allBots.map(bot => {
+    return (_jsxs("section", { className: "page roles-page", children: [_jsxs("div", { className: "page-heading roles-heading", children: [_jsxs("div", { children: [_jsx("p", { className: "eyebrow", children: tr('nav.roles') }), _jsx("h1", { children: tr('roles.title') })] }), _jsx("div", { className: "page-heading-actions", children: tabs })] }), _jsxs("div", { id: "roles-by-group-view", className: "roles-layout", hidden: isProfiles, children: [_jsxs("div", { className: "roles-tree-panel", children: [_jsxs("div", { className: "roles-tree-header dashboard-toolbar", children: [_jsx("input", { type: "search", id: "roles-search", placeholder: tr('roles.search'), value: groupsFilter, onChange: ev => setGroupsFilter(ev.target.value) }), _jsx(RefreshIconButton, { id: "roles-refresh", label: tr('roles.refresh'), onClick: () => void handleGroupRefresh() })] }), _jsx("div", { id: "roles-tree", className: "roles-tree", children: loadingTree ? _jsx(LoadingState, { label: tr('common.loading') }) : (_jsx(GroupsTree, { groups: filteredGroups, profiles: profiles, context: roleContext, contextLoaded: roleContextLoaded, expandedGroups: expandedGroups, selectedGroupId: selectedGroupId, selectedBotId: selectedBotId, tr: tr, onToggleGroup: groupId => setExpandedGroups(prev => toggleSet(prev, groupId)), onSelectBot: (groupId, botId) => void handleSelectBot(groupId, botId) })) })] }), _jsx("div", { className: "roles-editor-panel", children: !selectedGroupId || !selectedBotId ? (_jsx("div", { id: "roles-editor-empty", className: "roles-editor-empty", children: tr('roles.selectHint') })) : (_jsxs("div", { id: "roles-editor-form", className: "roles-editor-form", children: [_jsxs("div", { className: "roles-editor-head", children: [_jsxs("div", { children: [_jsxs("div", { className: "roles-editor-breadcrumb", children: [_jsx("span", { id: "roles-editor-group-name", children: selectedGroup?.name ?? selectedGroupId }), _jsx("span", { className: "roles-breadcrumb-sep", children: "\u203A" }), _jsx("span", { id: "roles-editor-bot-name", children: selectedBot?.botName ?? selectedBotId })] }), _jsx("div", { className: "roles-editor-meta", children: _jsxs("span", { id: "roles-editor-chat-id", className: "roles-editor-meta-line", children: [selectedGroupId, "  \u00B7  ", selectedBotId] }) })] }), _jsx("div", { className: "roles-editor-actions roles-editor-head-actions", children: groupEditorSection === 'role' ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", id: "roles-delete", className: "danger", style: { display: selectedRole?.hasRole ? '' : 'none' }, disabled: roleDeleting, onClick: () => void handleDeleteRole(), children: roleDeleting ? '...' : tr('roles.delete') }), _jsx("button", { type: "button", id: "roles-save", className: "primary", disabled: roleSaveDisabled, onClick: () => void handleSaveRole(), children: roleSaving ? '...' : tr('roles.save') })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", id: "roles-listener-delete", className: "danger", style: { display: selectedListener?.enabled ? '' : 'none' }, disabled: listenerDeleting, onClick: () => void handleDeleteListener(), children: listenerDeleting ? '...' : tr('roles.delete') }), _jsx("button", { type: "button", id: "roles-listener-save", className: "primary", disabled: listenerSaveDisabled, onClick: () => void handleSaveListener(), children: listenerSaving ? '...' : tr('roles.save') })] })) })] }), _jsxs("div", { className: "roles-editor-switch segmented", role: "tablist", "aria-label": tr('roles.editorTabs'), children: [_jsx("button", { type: "button", className: groupEditorSection === 'role' ? 'active' : '', "aria-pressed": groupEditorSection === 'role', onClick: () => setGroupEditorSection('role'), children: tr('roles.roleTab') }), _jsx("button", { type: "button", className: groupEditorSection === 'listener' ? 'active' : '', "aria-pressed": groupEditorSection === 'listener', onClick: () => setGroupEditorSection('listener'), children: tr('roles.listenerTab') })] }), groupEditorSection === 'role' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "roles-editor-inject", children: [_jsx("span", { className: "roles-field-label", children: tr('roles.injectModeLabel') }), _jsx(DropdownMenu, { id: "roles-editor-inject-mode", className: "roles-inline-menu", ariaLabel: tr('roles.injectModeLabel'), disabled: injectSaving, label: editingInjectMode === 'once' ? tr('roles.injectModeOnce') : tr('roles.injectModeEvery'), value: editingInjectMode, options: [
+                                                        { value: 'every', label: tr('roles.injectModeEvery') },
+                                                        { value: 'once', label: tr('roles.injectModeOnce') },
+                                                    ], onChange: mode => void handleInjectModeChange(mode === 'once' ? 'once' : 'every') }), _jsx("span", { className: "roles-editor-inject-hint", children: tr('roles.injectModeHint') }), _jsx(Flash, { flash: injectFlash })] }), _jsx("textarea", { id: "roles-editor-textarea", placeholder: tr('roles.editorPlaceholder'), rows: 14, value: editingContent, onChange: ev => setEditingContent(ev.target.value) }), _jsxs("div", { className: "roles-editor-footer", children: [_jsxs("span", { id: "roles-editor-bytecount", className: byteCountClass(roleByteLen), children: [roleByteLen, " / ", MAX_ROLE_BYTES, " bytes"] }), _jsx(Flash, { flash: roleFlash })] }), _jsx(RolePreview, { content: editingContent, tr: tr, id: "roles-preview" })] })) : (_jsx(MessageListenerEditor, { listener: editingListener, members: listenerMembers, memberById: listenerMemberById, promptByteLen: listenerPromptByteLen, loading: listenerLoading, membersLoading: listenerMembersLoading, flash: listenerFlash, tr: tr, onPatch: updateEditingListener, onSenderPolicyPatch: updateListenerSenderPolicy, onMessagePolicyPatch: updateListenerMessagePolicy, onToggleSenderType: toggleListenerSenderType, onToggleMsgType: toggleListenerMsgType, onSetTargetPolicy: setListenerTargetPolicy, onSetTargetsPolicy: setListenerTargetsPolicy, previewLimit: listenerPreviewLimit, previewStatus: listenerPreviewStatus, onPreviewLimitChange: setListenerPreviewLimit, onPreview: () => void handleListenerPreview(false), onRunPreview: () => void handleListenerPreview(true) }))] })) })] }), _jsxs("div", { id: "roles-profiles-view", className: "roles-layout roles-profiles-layout", hidden: !isProfiles, children: [_jsxs("div", { className: "roles-tree-panel", children: [_jsxs("div", { className: "roles-tree-header roles-profile-create dashboard-toolbar", children: [_jsx("input", { type: "text", id: "roles-profile-id", placeholder: tr('roles.profileIdPlaceholder'), maxLength: 64, ref: profileIdInputRef, onChange: ev => ev.currentTarget.setCustomValidity('') }), _jsx("button", { type: "button", id: "roles-profile-select", onClick: () => void handleOpenProfile(), children: tr('roles.openProfile') })] }), _jsxs("div", { className: "roles-tree-header dashboard-toolbar", children: [_jsx("input", { type: "search", id: "roles-profile-search", placeholder: tr('roles.profileSearch'), value: profileFilter, onChange: ev => setProfileFilter(ev.target.value) }), _jsx(RefreshIconButton, { id: "roles-profile-refresh", label: tr('roles.refresh'), onClick: () => void handleProfileRefresh() })] }), _jsx("div", { id: "roles-profile-list", className: "roles-tree", children: profileListLoading ? _jsx(LoadingState, { label: tr('common.loading') }) : (_jsx(ProfileList, { profiles: filteredProfiles, selectedProfileId: selectedProfileId, tr: tr, onSelect: profileId => void handleSelectProfile(profileId) })) })] }), _jsx("div", { className: "roles-editor-panel", children: !selectedProfileId ? (_jsx("div", { id: "roles-profile-empty", className: "roles-editor-empty", children: tr('roles.profileSelectHint') })) : (_jsxs("div", { id: "roles-profile-detail", className: "roles-editor-form roles-profile-detail", children: [_jsx("div", { className: "roles-profile-title", children: _jsxs("div", { children: [_jsxs("div", { className: "roles-editor-breadcrumb", children: [_jsx("span", { children: selectedProfileId }), selectedProfileBot ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "roles-breadcrumb-sep", children: "\u203A" }), _jsx("span", { children: selectedProfileBot.botName ?? selectedProfileBot.larkAppId })] })) : null] }), _jsx("div", { className: "roles-editor-meta-line", children: tr('roles.profileRuntimeHint') })] }) }), _jsxs("div", { className: "roles-profile-grid", children: [_jsxs("div", { className: "roles-profile-bots", children: [_jsx("div", { className: "roles-profile-section-title", children: tr('roles.profileBots') }), _jsx("div", { className: "roles-profile-bot-list", children: allBots.map(bot => {
                                                         const hasEntry = !!entryForBot(profileEntries, bot.larkAppId);
                                                         const selected = selectedProfileBotId === bot.larkAppId;
                                                         return (_jsxs("div", { className: `roles-bot-row roles-profile-bot-row ${selected ? 'selected' : ''}`, "data-profile-bot-id": bot.larkAppId, onClick: () => void handleSelectProfileBot(bot.larkAppId), children: [_jsx(BotAvatar, { bot: bot }), _jsxs("div", { className: "roles-bot-info", children: [_jsx("div", { className: "roles-bot-name", children: bot.botName ?? bot.larkAppId }), _jsx("div", { className: "roles-bot-id", children: bot.larkAppId })] }), _jsx("span", { className: `roles-badge ${hasEntry ? 'has-role' : 'no-role'}`, children: hasEntry ? tr('roles.configured') : tr('roles.unconfigured') })] }, bot.larkAppId));
@@ -468,6 +878,9 @@ function toggleSet(prev, value) {
 function byteCountClass(len) {
     return `roles-bytecount ${len > ROLE_WARN_BYTES ? 'warn' : ''} ${len > MAX_ROLE_BYTES ? 'over' : ''}`;
 }
+function listenerByteCountClass(len) {
+    return `roles-bytecount ${len > MESSAGE_LISTENER_WARN_BYTES ? 'warn' : ''} ${len > MAX_MESSAGE_LISTENER_PROMPT_BYTES ? 'over' : ''}`;
+}
 function Flash(props) {
     if (!props.flash)
         return null;
@@ -487,7 +900,7 @@ function GroupsTree(props) {
                             return (_jsxs("div", { className: `roles-bot-row ${selected ? 'selected' : ''}`, "data-group-id": group.chatId, "data-bot-id": bot.larkAppId, onClick: ev => {
                                     ev.stopPropagation();
                                     props.onSelectBot(group.chatId, bot.larkAppId);
-                                }, children: [_jsx("span", { className: "roles-bot-indent" }), _jsx(BotAvatar, { bot: bot }), _jsxs("div", { className: "roles-bot-info", children: [_jsx("div", { className: "roles-bot-name", children: bot.botName }), _jsx("div", { className: "roles-bot-id", children: bot.larkAppId })] }), _jsx("span", { className: `roles-badge ${bot.hasRole ? 'has-role' : 'no-role'}`, children: bot.hasRole ? tr('roles.configured') : tr('roles.unconfigured') })] }, bot.larkAppId));
+                                }, children: [_jsx("span", { className: "roles-bot-indent" }), _jsx(BotAvatar, { bot: bot }), _jsxs("div", { className: "roles-bot-info", children: [_jsx("div", { className: "roles-bot-name", children: bot.botName }), _jsx("div", { className: "roles-bot-id", children: bot.larkAppId })] }), _jsxs("div", { className: "roles-bot-badges", children: [_jsx("span", { className: `roles-badge ${bot.hasRole ? 'has-role' : 'no-role'}`, children: bot.hasRole ? tr('roles.configured') : tr('roles.unconfigured') }), bot.hasMessageListener ? (_jsx("span", { className: "roles-badge has-listener", children: tr('roles.listenerBadge') })) : null] })] }, bot.larkAppId));
                         }) : null })] }, group.chatId));
         }) }));
 }
@@ -514,9 +927,121 @@ function GroupProfileStatus(props) {
             chat: best.chatMatched,
         }) }));
 }
+function MessageListenerEditor(props) {
+    const { listener, tr } = props;
+    const [targetTab, setTargetTab] = useState('members');
+    const [targetQuery, setTargetQuery] = useState('');
+    const [selectedTargetIds, setSelectedTargetIds] = useState(() => new Set());
+    const senderTypes = new Set(listener.senderPolicy?.includeSenderTypes ?? []);
+    const msgTypes = new Set(listener.messagePolicy?.includeMsgTypes ?? []);
+    const includeIds = new Set(listener.senderPolicy?.includeSenderOpenIds ?? []);
+    const configuredUnknownMembers = [
+        ...[...includeIds].filter(openId => !props.memberById.has(openId)),
+    ];
+    const members = [
+        ...props.members.filter(member => member.memberType !== 'bot'),
+        ...configuredUnknownMembers.map(openId => ({ openId, name: openId, memberType: 'unknown' })),
+    ];
+    const bots = props.members.filter(member => member.memberType === 'bot');
+    const activeTargets = targetTab === 'bots' ? bots : members;
+    const filteredTargets = filterListenerTargets(activeTargets, targetQuery);
+    const filteredTargetIds = filteredTargets.map(target => target.openId);
+    const selectedVisibleIds = filteredTargetIds.filter(id => selectedTargetIds.has(id));
+    const allVisibleSelected = filteredTargetIds.length > 0 && selectedVisibleIds.length === filteredTargetIds.length;
+    const selectedIds = [...selectedTargetIds].filter(id => activeTargets.some(target => target.openId === id));
+    const bulkTargetIds = selectedIds.length > 0 ? selectedIds : filteredTargetIds;
+    const bulkState = listenerTargetStateFor({
+        include: [...includeIds],
+        exclude: [],
+        targetIds: bulkTargetIds,
+    });
+    useEffect(() => {
+        setTargetQuery('');
+        setSelectedTargetIds(new Set());
+    }, [targetTab]);
+    useEffect(() => {
+        const activeIds = new Set(activeTargets.map(target => target.openId));
+        setSelectedTargetIds(prev => {
+            const next = new Set([...prev].filter(id => activeIds.has(id)));
+            return next.size === prev.size ? prev : next;
+        });
+    }, [activeTargets]);
+    const toggleTargetSelection = (openId, checked) => {
+        setSelectedTargetIds(prev => {
+            const next = new Set(prev);
+            if (checked)
+                next.add(openId);
+            else
+                next.delete(openId);
+            return next;
+        });
+    };
+    const toggleAllVisible = () => {
+        setSelectedTargetIds(prev => {
+            const next = new Set(prev);
+            if (allVisibleSelected) {
+                for (const id of filteredTargetIds)
+                    next.delete(id);
+            }
+            else {
+                for (const id of filteredTargetIds)
+                    next.add(id);
+            }
+            return next;
+        });
+    };
+    const applyBulkState = (listening) => {
+        if (bulkTargetIds.length === 0)
+            return;
+        props.onSetTargetsPolicy(bulkTargetIds, listening);
+    };
+    return (_jsxs("div", { className: "roles-listener-editor", children: [props.loading ? _jsx(LoadingState, { label: tr('common.loading') }) : null, _jsxs("label", { className: "filter-toggle roles-listener-enabled", children: [_jsx("input", { type: "checkbox", checked: listener.enabled, onChange: ev => props.onPatch({ enabled: ev.currentTarget.checked }) }), _jsx("span", { className: "filter-toggle-switch", "aria-hidden": "true" }), _jsx("span", { className: "filter-toggle-label", children: tr('roles.listenerEnabled') })] }), _jsx("p", { className: "roles-listener-scope-help", children: tr('roles.listenerScopeHelp') }), _jsxs("div", { className: "roles-listener-grid", children: [_jsxs("label", { className: "roles-listener-field", children: [_jsx("span", { className: "roles-field-label", children: tr('roles.listenerName') }), _jsx("input", { type: "text", value: listener.name ?? '', placeholder: tr('roles.listenerNamePlaceholder'), onChange: ev => props.onPatch({ name: ev.currentTarget.value }) })] }), _jsxs("label", { className: "roles-listener-field", children: [_jsx("span", { className: "roles-field-label", children: tr('roles.listenerReplyCardTitle') }), _jsx("input", { type: "text", value: listener.replyCardTitle ?? '', placeholder: tr('roles.listenerReplyCardTitlePlaceholder'), onChange: ev => props.onPatch({ replyCardTitle: ev.currentTarget.value }) })] }), _jsxs("label", { className: "roles-listener-field", children: [_jsx("span", { className: "roles-field-label", children: tr('roles.listenerWorkingDir') }), _jsx("input", { type: "text", value: listener.workingDir ?? '', placeholder: tr('roles.listenerWorkingDirPlaceholder'), onChange: ev => props.onPatch({ workingDir: ev.currentTarget.value }) })] })] }), _jsxs("div", { className: "roles-listener-policy-row", children: [_jsxs("div", { className: "roles-listener-policy", children: [_jsx("div", { className: "roles-field-label", children: tr('roles.listenerSenderTypes') }), _jsxs("label", { className: "roles-listener-chip", children: [_jsx("input", { type: "checkbox", checked: senderTypes.has('user'), onChange: ev => props.onToggleSenderType('user', ev.currentTarget.checked) }), _jsx("span", { children: tr('roles.listenerSenderUser') })] }), _jsxs("label", { className: "roles-listener-chip", children: [_jsx("input", { type: "checkbox", checked: senderTypes.has('bot'), onChange: ev => props.onToggleSenderType('bot', ev.currentTarget.checked) }), _jsx("span", { children: tr('roles.listenerSenderBot') })] })] }), _jsxs("div", { className: "roles-listener-policy", children: [_jsx("div", { className: "roles-field-label", children: tr('roles.listenerMessageTypes') }), LISTENER_MESSAGE_TYPES.map(msgType => (_jsxs("label", { className: "roles-listener-chip", children: [_jsx("input", { type: "checkbox", checked: msgTypes.has(msgType), onChange: ev => props.onToggleMsgType(msgType, ev.currentTarget.checked) }), _jsx("span", { children: msgType })] }, msgType)))] }), _jsxs("label", { className: "roles-listener-checkbox", children: [_jsx("input", { type: "checkbox", checked: listener.senderPolicy?.excludeSelf !== false, onChange: ev => props.onSenderPolicyPatch({ excludeSelf: ev.currentTarget.checked }) }), _jsx("span", { children: tr('roles.listenerExcludeSelf') })] })] }), _jsxs("label", { className: "roles-listener-field", children: [_jsx("span", { className: "roles-field-label", children: tr('roles.listenerPrompt') }), _jsx("textarea", { id: "roles-listener-prompt", placeholder: tr('roles.listenerPromptPlaceholder'), rows: 9, value: listener.prompt, onChange: ev => props.onPatch({ prompt: ev.currentTarget.value }) })] }), _jsxs("div", { className: "roles-editor-footer", children: [_jsxs("span", { id: "roles-listener-bytecount", className: listenerByteCountClass(props.promptByteLen), children: [props.promptByteLen, " / ", MAX_MESSAGE_LISTENER_PROMPT_BYTES, " bytes"] }), _jsx(Flash, { flash: props.flash })] }), _jsxs("div", { className: "roles-listener-preview-panel", children: [_jsxs("div", { className: "roles-listener-preview-head", children: [_jsxs("div", { children: [_jsx("div", { className: "roles-profile-section-title", children: tr('roles.listenerPreviewTitle') }), _jsx("small", { children: tr('roles.listenerPreviewHint') })] }), _jsxs("div", { className: "roles-listener-preview-actions", children: [_jsxs("label", { children: [_jsx("span", { children: tr('roles.listenerPreviewCount') }), _jsx("select", { value: props.previewLimit, onChange: ev => props.onPreviewLimitChange(Number(ev.currentTarget.value)), children: Array.from({ length: MAX_MESSAGE_LISTENER_PREVIEW_LIMIT }, (_, index) => index + 1).map(count => (_jsx("option", { value: count, children: count }, count))) })] }), _jsx("button", { type: "button", onClick: props.onPreview, disabled: props.previewStatus.kind === 'loading', children: props.previewStatus.kind === 'loading' && props.previewStatus.mode === 'preview' ? '...' : tr('roles.listenerPreviewButton') }), _jsx("button", { type: "button", className: "primary", onClick: props.onRunPreview, disabled: props.previewStatus.kind === 'loading', children: props.previewStatus.kind === 'loading' && props.previewStatus.mode === 'run' ? '...' : tr('roles.listenerRunPreviewButton') })] })] }), _jsx(ListenerPreviewResult, { status: props.previewStatus, tr: tr })] }), _jsxs("div", { className: "roles-listener-members", children: [_jsxs("div", { className: "roles-listener-members-head", children: [_jsx("div", { className: "roles-profile-section-title", children: tr('roles.listenerFilters') }), _jsx("small", { children: props.membersLoading ? tr('common.loading') : tr('roles.listenerMembersHint') })] }), _jsxs("div", { className: "roles-listener-target-tabs segmented", role: "tablist", "aria-label": tr('roles.listenerFilters'), children: [_jsx("button", { type: "button", className: targetTab === 'members' ? 'active' : '', "aria-pressed": targetTab === 'members', onClick: () => setTargetTab('members'), children: tr('roles.listenerMembers') }), _jsx("button", { type: "button", className: targetTab === 'bots' ? 'active' : '', "aria-pressed": targetTab === 'bots', onClick: () => setTargetTab('bots'), children: tr('roles.listenerBots') })] }), _jsxs("div", { className: "roles-listener-filter-toolbar", children: [_jsx("input", { type: "search", value: targetQuery, placeholder: tr('roles.listenerSearchPlaceholder'), onChange: ev => setTargetQuery(ev.currentTarget.value) }), targetQuery ? (_jsx("button", { type: "button", className: "roles-listener-clear-search", onClick: () => setTargetQuery(''), "aria-label": tr('roles.listenerClearSearch'), children: "\u00D7" })) : null, _jsx("button", { type: "button", className: "roles-listener-select-all", disabled: filteredTargetIds.length === 0, onClick: toggleAllVisible, children: tr(allVisibleSelected ? 'roles.listenerClearVisible' : 'roles.listenerSelectVisible', { count: filteredTargetIds.length }) })] }), _jsxs("div", { className: "roles-listener-bulkbar", children: [_jsxs("span", { children: [selectedIds.length > 0
+                                        ? tr('roles.listenerSelectedCount', { count: selectedIds.length })
+                                        : tr('roles.listenerFilteredCount', { count: filteredTargetIds.length }), bulkState === 'mixed' ? ` · ${tr('roles.listenerMixedMode')}` : ''] }), _jsxs("div", { className: "roles-listener-member-actions", role: "group", "aria-label": tr('roles.listenerBulkActions'), children: [_jsx("button", { type: "button", className: bulkState === 'listen' ? 'active' : '', "aria-pressed": bulkState === 'listen', disabled: bulkTargetIds.length === 0, onClick: () => applyBulkState(true), children: tr('roles.listenerTargetListen') }), _jsx("button", { type: "button", className: bulkState === 'ignore' ? 'active' : '', "aria-pressed": bulkState === 'ignore', disabled: bulkTargetIds.length === 0, onClick: () => applyBulkState(false), children: tr('roles.listenerTargetIgnore') })] })] }), _jsx("div", { className: "roles-listener-member-list", children: filteredTargets.length === 0 ? (_jsx("div", { className: "roles-empty", children: tr(targetTab === 'bots' ? 'roles.listenerBotsEmpty' : 'roles.listenerMembersEmpty') })) : filteredTargets.map(member => {
+                            const targetState = listenerTargetStateFor({
+                                include: [...includeIds],
+                                exclude: [],
+                                targetIds: [member.openId],
+                            });
+                            return (_jsxs("div", { className: "roles-listener-member", children: [_jsx("label", { className: "roles-listener-member-select", "aria-label": memberDisplayName(member, member.openId), children: _jsx("input", { type: "checkbox", checked: selectedTargetIds.has(member.openId), onChange: ev => toggleTargetSelection(member.openId, ev.currentTarget.checked) }) }), _jsxs("div", { className: "roles-listener-member-main", children: [_jsx("strong", { children: memberDisplayName(member, member.openId) }), _jsx("span", { children: member.openId })] }), _jsxs("div", { className: "roles-listener-member-actions", role: "group", "aria-label": memberDisplayName(member, member.openId), children: [_jsx("button", { type: "button", className: targetState === 'listen' ? 'active' : '', "aria-pressed": targetState === 'listen', onClick: () => props.onSetTargetPolicy(member.openId, true), children: tr('roles.listenerTargetListen') }), _jsx("button", { type: "button", className: targetState === 'ignore' ? 'active' : '', "aria-pressed": targetState === 'ignore', onClick: () => props.onSetTargetPolicy(member.openId, false), children: tr('roles.listenerTargetIgnore') })] })] }, member.openId));
+                        }) })] })] }));
+}
 function RolePreview(props) {
     return (_jsx("div", { id: props.id, className: "roles-preview", children: props.content.trim() ? (_jsxs(_Fragment, { children: [_jsx("strong", { children: props.tr('roles.preview') }), _jsx("pre", { children: props.content })] })) : (_jsx("small", { children: props.tr('roles.previewEmpty') })) }));
 }
+function ListenerPreviewResult(props) {
+    const { status, tr } = props;
+    if (status.kind === 'idle')
+        return _jsx("div", { className: "roles-listener-preview-empty", children: tr('roles.listenerPreviewEmpty') });
+    if (status.kind === 'loading')
+        return _jsx(LoadingState, { label: tr('common.loading') });
+    if (status.kind === 'error')
+        return _jsx("div", { className: "roles-listener-preview-error", children: status.text });
+    const matches = status.response.matches ?? [];
+    const results = status.response.results ?? [];
+    const stateCounts = results.reduce((acc, result) => {
+        const state = !result.ok ? 'failed' : result.state ?? 'triggered';
+        acc[state] = (acc[state] ?? 0) + 1;
+        return acc;
+    }, {});
+    return (_jsxs("div", { className: "roles-listener-preview-results", children: [_jsx("div", { className: "roles-listener-preview-summary", children: status.mode === 'run'
+                    ? tr('roles.listenerRunPreviewSummary', {
+                        count: matches.length,
+                        triggered: stateCounts.triggered ?? 0,
+                        running: stateCounts.running ?? 0,
+                        replied: stateCounts.replied ?? 0,
+                        failed: stateCounts.failed ?? 0,
+                    })
+                    : tr('roles.listenerPreviewSummary', { count: matches.length }) }), matches.length === 0 ? (_jsx("div", { className: "roles-listener-preview-empty", children: tr('roles.listenerPreviewNoMatches') })) : (_jsx("div", { className: "roles-listener-preview-list", children: matches.map(item => (_jsx(ListenerPreviewItem, { item: item, result: status.response.results?.find(result => result.messageId === item.messageId), tr: tr }, item.messageId))) }))] }));
+}
+function ListenerPreviewItem(props) {
+    const text = props.item.messageText.length > 300
+        ? `${props.item.messageText.slice(0, 300)}...`
+        : props.item.messageText;
+    const senderLabel = props.item.senderName || props.item.senderOpenId || props.item.senderType;
+    const sentAt = formatListenerPreviewTime(props.item.createTime);
+    return (_jsxs("div", { className: "roles-listener-preview-item", children: [_jsxs("div", { className: "roles-listener-preview-meta", children: [_jsx("span", { children: props.item.msgType }), _jsx("span", { children: props.item.senderType }), props.item.senderOpenId ? _jsx("span", { children: props.item.senderOpenId }) : null, _jsx("span", { children: props.item.messageId }), props.result ? (_jsx("span", { className: listenerRunPreviewStateClass(props.result.state, props.result.ok), children: props.tr(`roles.listenerRunPreviewState.${!props.result.ok ? 'failed' : props.result.state ?? 'triggered'}`) })) : null] }), props.result?.sessionId || props.result?.replyMessageId || props.result?.error ? (_jsxs("div", { className: "roles-listener-preview-run-detail", children: [props.result.sessionId ? _jsx("span", { children: props.result.sessionId }) : null, props.result.replyMessageId ? _jsx("span", { children: props.result.replyMessageId }) : null, props.result.error ? _jsx("strong", { children: props.result.error }) : null] })) : null, _jsxs("div", { className: "roles-listener-preview-sender", children: [_jsx("span", { children: props.tr('roles.listenerPreviewSender') }), _jsx("strong", { children: senderLabel })] }), sentAt ? (_jsxs("div", { className: "roles-listener-preview-time", children: [_jsx("span", { children: props.tr('roles.listenerPreviewTime') }), _jsx("strong", { children: sentAt })] })) : null, props.item.messageTitle ? (_jsxs("div", { className: "roles-listener-preview-title", children: [_jsx("span", { children: props.tr('roles.listenerPreviewMessageTitle') }), _jsx("strong", { children: props.item.messageTitle })] })) : null, _jsx("div", { className: "roles-listener-preview-content-label", children: props.tr('roles.listenerPreviewContent') }), _jsx("pre", { children: text })] }));
+}
 function ProfileList(props) {
     const { tr } = props;
     if (props.profiles.length === 0)