botmux 3.0.0 → 3.1.0

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

@@ -6,11 +6,11 @@ import { mountReactPage } from './react-mount.js';
 import { useStoreSelector, useT } from './react-hooks.js';
 import { KANBAN_TEAM_STORAGE_KEY, normalizeSessionsViewMode, readStoredBoardOrder, readStoredCreateKeepOpen, readStoredKanbanGroupBy, readStoredSessionsShowUnknownChats, readStoredSessionsViewMode, writeStoredBoardOrder, writeStoredCreateKeepOpen, writeStoredKanbanGroupBy, writeStoredSessionsShowUnknownChats, writeStoredSessionsViewMode, } from './preferences.js';
 import { OPEN_CREATE_SESSION_EVENT, consumePendingCreateSession } from './create-session-entry.js';
-import { BOARD_COLUMNS, CLI_FILTER_OPTIONS, ICON, SESSION_STATUS_OPTIONS, canRestartSession, cssToken, deriveSessionBoardColumn, fetchPickerBots, formatTokenCount, historySenderKey, isUnknownChatSession, lockActionLabel, openWriteLink, repoBasename, restartConfirmMessage, sessionLocationText, sessionLocationTitle, sessionRuntimeCounts, sessionSearchText, sessionStatusText, shouldOpenWritableTerminal, terminalHref, tokenCount, } from './sessions.js';
+import { BOARD_COLUMNS, CLI_FILTER_OPTIONS, ICON, SESSION_STATUS_OPTIONS, canRestartSession, cssToken, deriveSessionBoardColumn, fetchPickerBots, formatTokenCount, groupSessionsByTopic, historySenderKey, isUnknownChatSession, lockActionLabel, openWriteLink, repoBasename, restartConfirmMessage, sessionLocationText, sessionLocationTitle, sessionRuntimeCounts, sessionSearchText, sessionTopicKey, sessionStatusText, shouldOpenWritableTerminal, terminalHref, tokenCount, } from './sessions.js';
 import { addMonitorRoomSessionIds, monitorRoomUrl } from './monitor-room-store.js';
 import { CreateActionButton, DropdownMenu, LoadingState } from './dashboard-components.js';
 import { store } from './store.js';
-import { attentionWaitSince, botAvatarHtml, botDisplayName, chatDisplayTitle, loadNameMaps, relTime, stripMentionPrefix, t, ui, } from './ui.js';
+import { attentionWaitSince, botAvatarHtml, botDisplayName, chatAvatarHtml, chatDisplayTitle, loadNameMaps, relTime, stripMentionPrefix, t, ui, } from './ui.js';
 import { SessionsKanbanView, } from './sessions-kanban.js';
 function idleCleanupHoursLabel(hours) {
     return hours === 168 ? '7d' : `${hours}H`;
@@ -240,7 +240,13 @@ function SessionsFilters(props) {
                             next.delete(cli);
                         return { ...prev, cli: next };
                     });
-                } }), _jsxs("label", { className: "filter-toggle", children: [_jsx("input", { type: "checkbox", name: "showUnknownChats", checked: props.filters.showUnknownChats, onChange: event => {
+                } }), _jsxs("label", { className: "filter-toggle", children: [_jsx("input", { type: "checkbox", name: "multiBotTopics", checked: props.filters.multiBotTopics, onChange: event => {
+                            const multiBotTopics = event.currentTarget.checked;
+                            props.setFilters(prev => ({ ...prev, multiBotTopics }));
+                        } }), _jsx("span", { className: "filter-toggle-label", children: t('sessions.multiBotTopics') }), _jsx("span", { className: "filter-toggle-switch", "aria-hidden": "true" })] }), _jsxs("label", { className: "filter-toggle", children: [_jsx("input", { type: "checkbox", name: "botTriggeredTopics", checked: props.filters.botTriggeredTopics, onChange: event => {
+                            const botTriggeredTopics = event.currentTarget.checked;
+                            props.setFilters(prev => ({ ...prev, botTriggeredTopics }));
+                        } }), _jsx("span", { className: "filter-toggle-label", children: t('sessions.botTriggeredTopics') }), _jsx("span", { className: "filter-toggle-switch", "aria-hidden": "true" })] }), _jsxs("label", { className: "filter-toggle", children: [_jsx("input", { type: "checkbox", name: "showUnknownChats", checked: props.filters.showUnknownChats, onChange: event => {
                             const checked = event.currentTarget.checked;
                             writeStoredSessionsShowUnknownChats(windowStorage(), checked);
                             props.setFilters(prev => ({ ...prev, showUnknownChats: checked }));
@@ -388,7 +394,7 @@ function BoardCard(props) {
     };
     return (_jsxs("article", { className: `session-card${props.selected ? ' selected' : ''}${row.locked ? ' locked' : ''}`, "data-id": row.sessionId, "aria-pressed": props.selected, onClick: onCardClick, children: [_jsxs("div", { className: "session-card-top", children: [_jsx("span", { dangerouslySetInnerHTML: rawHtml(botAvatarHtml({ name: botName, larkAppId: row.larkAppId, size: 'sm' })) }), _jsxs("div", { className: "session-card-title", children: [_jsx("strong", { title: String(row.title ?? title), children: String(title).slice(0, 72) }), _jsxs("span", { children: [botName, " \u00B7 ", chatTitle ?? row.cliId ?? 'unknown'] })] }), _jsxs("span", { className: "session-card-status-group", children: [_jsx(StatusBadge, { status: row.status }), _jsx(LockChip, { row: row })] })] }), repo !== '-' || row.adopt || signal ? (_jsxs("div", { className: "session-card-meta", children: [repo !== '-' ? _jsx("span", { title: row.workingDir ?? '', children: repo }) : null, row.adopt ? _jsx("span", { className: "badge", children: "adopt" }) : null, signal ? _jsx("span", { className: "session-signal", title: signal, children: signal }) : null] })) : null, _jsx("div", { className: "session-card-time", children: _jsx("span", { children: row.agentAttention?.at
                         ? `${t('sessions.board.waiting')} ${relTime(attentionWaitSince(row))}`
-                        : `${t('sessions.last')}: ${relTime(row.lastMessageAt)}` }) }), _jsxs("div", { className: "session-card-actions", children: [_jsx(ChatScopeLink, { row: row }), !row.feishuChatLink || row.scope !== 'chat' ? (_jsx(LocateIconButton, { row: row, onLocate: props.onLocate })) : null, _jsx(IconActionButton, { action: "details", icon: ICON.details, label: t('sessions.details'), onClick: () => props.onOpen(row) }), canRestartSession(row) ? (_jsx(IconActionButton, { action: "restart", icon: ICON.restart, label: t('sessions.restart'), onClick: button => props.onRestart(row, button) })) : null, _jsx(TerminalControls, { row: row, url: term }), _jsx(IconActionButton, { action: "lock", icon: row.locked ? ICON.unlock : ICON.lock, label: lockActionLabel(row), kind: row.locked ? 'locked' : '', onClick: button => props.onLock(row, !row.locked, button) }), _jsx(IconActionButton, { action: "close", icon: ICON.close, label: t('sessions.close'), kind: "danger", onClick: button => props.onClose(row, button) })] })] }));
+                        : `${t('sessions.last')}: ${relTime(row.lastMessageAt)}` }) }), _jsxs("div", { className: "session-card-actions", children: [_jsx(ChatScopeLink, { row: row }), !row.feishuChatLink || row.scope !== 'chat' ? (_jsx(LocateIconButton, { row: row, onLocate: props.onLocate })) : null, _jsx(IconActionButton, { action: "details", icon: ICON.details, label: t('sessions.details'), onClick: () => props.onOpen(row) }), canRestartSession(row) ? (_jsx(IconActionButton, { action: "restart", icon: ICON.restart, label: t('sessions.restart'), onClick: button => props.onRestart(row, button) })) : null, _jsx(TerminalControls, { row: row, url: term }), row.status !== 'closed' ? (_jsxs(_Fragment, { children: [_jsx(IconActionButton, { action: "lock", icon: row.locked ? ICON.unlock : ICON.lock, label: lockActionLabel(row), kind: row.locked ? 'locked' : '', onClick: button => props.onLock(row, !row.locked, button) }), _jsx(IconActionButton, { action: "close", icon: ICON.close, label: t('sessions.close'), kind: "danger", onClick: button => props.onClose(row, button) })] })) : null] })] }));
 }
 function BoardView(props) {
     useEffect(() => {
@@ -433,6 +439,38 @@ function BoardView(props) {
                         }, children: [_jsxs("div", { children: [_jsx("h2", { children: t(column.labelKey) }), _jsx("p", { children: t(column.hintKey) })] }), _jsxs("span", { className: "session-board-head-right", children: [_jsxs("span", { className: "session-board-move", children: [_jsx("button", { type: "button", "data-move-col": column.id, "data-dir": "-1", "aria-label": t('sessions.board.moveLeft'), disabled: idx === 0, onClick: () => props.onMoveColumn(column.id, -1), children: "\u2039" }), _jsx("button", { type: "button", "data-move-col": column.id, "data-dir": "1", "aria-label": t('sessions.board.moveRight'), disabled: idx === columns.length - 1, onClick: () => props.onMoveColumn(column.id, 1), children: "\u203A" })] }), _jsx("span", { className: "session-board-count", children: columnRows.length })] })] }), _jsx("div", { className: "session-board-list", children: columnRows.length ? columnRows.map(row => (_jsx(BoardCard, { row: row, selected: props.selected.has(row.sessionId), onToggleSelect: props.onToggleSelect, onOpen: props.onOpen, onHistory: props.onHistory, onLocate: props.onLocate, onRestart: props.onRestart, onLock: props.onLock, onClose: props.onClose }, row.sessionId))) : _jsx("div", { className: "session-board-empty", children: t('sessions.board.emptyColumn') }) })] }, column.id));
         }) }));
 }
+function topicGroupTitle(group) {
+    const title = stripMentionPrefix(group.title).trim();
+    if (title)
+        return title;
+    if (group.kind === 'thread')
+        return t('sessions.topic.untitled');
+    return group.kind === 'chat' ? t('sessions.topic.wholeChat') : t('sessions.topic.singleSession');
+}
+export function TopicGroupsView(props) {
+    const groups = useMemo(() => groupSessionsByTopic(props.rows), [props.rows]);
+    const relationGroups = useMemo(() => new Map(groupSessionsByTopic(props.relationRows ?? props.rows).map(group => [group.key, group])), [props.relationRows, props.rows]);
+    return (_jsx("div", { id: "sessions-topics", className: "sessions-topic-view", hidden: props.hidden, children: groups.length ? groups.map(group => {
+            // Member cards respect the current session filters. Header metadata is
+            // derived from the complete store so a hidden closed sibling does not
+            // erase the topic's multi-Bot relationship.
+            const relation = relationGroups.get(group.key) ?? group;
+            const representative = group.rows[0];
+            const location = sessionLocationText(representative);
+            const title = topicGroupTitle(relation);
+            const anchor = relation.rootMessageId || relation.chatId;
+            return (_jsxs("section", { className: `session-topic-group${relation.multiBot ? ' multi-bot' : ''}${relation.inferredBotTriggered ? ' inferred-bot-trigger' : ''}`, "data-topic-key": group.key, children: [_jsxs("header", { children: [_jsx("span", { className: "session-topic-avatar", dangerouslySetInnerHTML: rawHtml(chatAvatarHtml({ chatId: group.chatId, name: location, size: 'sm' })) }), _jsxs("div", { className: "session-topic-heading", children: [_jsx("span", { className: "session-topic-location", children: location }), _jsx("h2", { title: relation.title, children: title }), _jsx("code", { title: anchor, children: relation.kind === 'thread'
+                                            ? anchor
+                                            : relation.kind === 'chat'
+                                                ? t('sessions.topic.wholeChat')
+                                                : t('sessions.topic.singleSession') })] }), _jsxs("div", { className: "session-topic-summary", "aria-label": t('sessions.topic.summary'), children: [relation.multiBot ? _jsx("span", { className: "topic-chip collaboration", children: t('sessions.topic.collaboration') }) : null, _jsx("span", { className: "topic-chip", children: t('sessions.topic.sessions', { count: relation.rows.length }) }), _jsx("span", { className: "topic-chip", children: t('sessions.topic.bots', { count: relation.botCount }) }), _jsx("span", { className: "topic-chip active", children: t('sessions.topic.active', { count: relation.activeCount }) }), relation.closedCount ? _jsx("span", { className: "topic-chip", children: t('sessions.topic.closed', { count: relation.closedCount }) }) : null, relation.inferredBotInputCount ? (_jsx("span", { className: "topic-chip inferred", title: t('sessions.topic.inferredHint'), children: t('sessions.topic.botInputs', { count: relation.inferredBotInputCount }) })) : null, _jsxs("span", { className: "session-topic-updated", children: [t('sessions.last'), ": ", relTime(relation.latestActivityAt)] })] })] }), _jsx("div", { className: "session-topic-members", children: group.rows.map(row => (_jsx(BoardCard, { row: row, selected: props.selected.has(row.sessionId), onToggleSelect: candidate => {
+                                if (candidate.status !== 'closed')
+                                    props.onToggleSelect(candidate);
+                                else
+                                    props.onOpen(candidate);
+                            }, onOpen: props.onOpen, onHistory: props.onHistory, onLocate: props.onLocate, onRestart: props.onRestart, onLock: props.onLock, onClose: props.onClose }, row.sessionId))) })] }, group.key));
+        }) : _jsx("div", { className: "sessions-topic-empty", children: t('sessions.topic.empty') }) }));
+}
 function HistoryBubble(props) {
     const m = props.message;
     const human = m.senderType === 'user';
@@ -797,6 +835,8 @@ function SessionsPage() {
         status: '',
         adopt: '',
         chat: '',
+        multiBotTopics: false,
+        botTriggeredTopics: false,
         showUnknownChats: readStoredSessionsShowUnknownChats(windowStorage()),
         active: true,
         cli: new Set(CLI_FILTER_OPTIONS),
@@ -885,20 +925,31 @@ function SessionsPage() {
         const cli = [...filters.cli];
         const cliFilterActive = cli.length > 0 && cli.length < CLI_FILTER_OPTIONS.length;
         const keepClosed = viewMode === 'kanban';
-        return storeRows
+        const acceptedTopicKeys = filters.multiBotTopics || filters.botTriggeredTopics
+            ? new Set(groupSessionsByTopic(storeRows)
+                .filter(group => !filters.multiBotTopics || group.multiBot)
+                .filter(group => !filters.botTriggeredTopics || group.inferredBotTriggered)
+                .map(group => group.key))
+            : null;
+        const base = storeRows
             .filter(s => !cliFilterActive || cli.includes(s.cliId ?? 'unknown'))
             .filter(s => filters.showUnknownChats || !isUnknownChatSession(s))
             .filter(s => !filters.status || s.status === filters.status)
             .filter(s => !filters.adopt || (filters.adopt === 'yes') === !!s.adopt)
             .filter(s => !filters.chat || String(s.chatId ?? '') === filters.chat)
             .filter(s => !filters.active || keepClosed || s.status !== 'closed')
-            .filter(s => !q || sessionSearchText(s).includes(q))
+            .filter(s => !q || sessionSearchText(s).includes(q));
+        if (!acceptedTopicKeys) {
+            return base.sort((a, b) => compareRows(a, b, sortKey, sortDir));
+        }
+        return base
+            .filter(row => acceptedTopicKeys.has(sessionTopicKey(row)))
             .sort((a, b) => compareRows(a, b, sortKey, sortDir));
     }, [filters, revision, sortDir, sortKey, storeRows, viewMode]);
     const runtimeCounts = useMemo(() => sessionRuntimeCounts(storeRows), [storeRows]);
     const rowsById = useMemo(() => new Map(storeRows.map(row => [row.sessionId, row])), [storeRows, revision]);
     const boardRows = useMemo(() => rows.filter(row => row.status !== 'closed'), [rows]);
-    const visibleRows = viewMode === 'table' ? rows : boardRows;
+    const visibleRows = viewMode === 'table' || viewMode === 'topics' ? rows : boardRows;
     const selectableRows = visibleRows.filter(row => row.status !== 'closed');
     const selectedRows = [...selected]
         .map(id => rowsById.get(id))
@@ -1611,6 +1662,7 @@ function SessionsPage() {
     return (_jsxs("section", { className: "page sessions-page", children: [_jsxs("div", { className: "page-heading", children: [_jsxs("div", { className: "sessions-heading-main", children: [_jsx("p", { className: "eyebrow", children: t('nav.sessions') }), _jsx("h1", { children: t('sessions.title') }), _jsxs("div", { className: "sessions-view-controls", children: [_jsx("div", { className: "segmented sessions-view-toggle", role: "group", "aria-label": t('sessions.viewMode'), children: [
                                             ['kanban', t('sessions.viewKanban')],
                                             ['board', t('sessions.viewBoard')],
+                                            ['topics', t('sessions.viewTopics')],
                                             ['table', t('sessions.viewTable')],
                                         ].map(([value, label]) => (_jsx("button", { type: "button", "data-view": value, className: viewMode === value ? 'active' : undefined, "aria-pressed": viewMode === value, onClick: () => setView(value), children: label }, value))) }), _jsx("div", { className: `segmented kanban-groupby${viewMode === 'kanban' ? ' is-visible' : ' is-collapsed'}`, id: "kanban-groupby", role: "group", "aria-label": t('sessions.kanban.groupBy'), "aria-hidden": viewMode !== 'kanban', children: [
                                             ['flow', t('sessions.kanban.groupFlow')],
@@ -1663,6 +1715,13 @@ function SessionsPage() {
                             else
                                 next.add(row.sessionId);
                             return next;
+                        }), onOpen: row => setDrawerSessionId(row.sessionId), onHistory: openHistoryModal, onLocate: row => locateSession(row), onRestart: (row, button) => void restartSession(row, button), onLock: (row, locked, button) => void setSessionLocked(row, locked, button), onClose: (row, button) => void closeSession(row, button) }), _jsx(TopicGroupsView, { rows: rows, relationRows: storeRows, selected: selected, hidden: viewMode !== 'topics', onToggleSelect: row => setSelected(prev => {
+                            const next = new Set(prev);
+                            if (next.has(row.sessionId))
+                                next.delete(row.sessionId);
+                            else
+                                next.add(row.sessionId);
+                            return next;
                         }), onOpen: row => setDrawerSessionId(row.sessionId), onHistory: openHistoryModal, onLocate: row => locateSession(row), onRestart: (row, button) => void restartSession(row, button), onLock: (row, locked, button) => void setSessionLocked(row, locked, button), onClose: (row, button) => void closeSession(row, button) }), _jsx("div", { id: "sessions-kanban", ref: setKanbanHost, className: `sessions-kanban${kanbanGroupBy === 'bot' ? ' kanban-mode-bot' : ''}`, hidden: viewMode !== 'kanban', children: viewMode === 'kanban' ? (_jsx(SessionsKanbanView, { host: kanbanHost, ...kanbanState, canRestartSession: canRestartSession, getTeamChatIds: teamChatIdsFor, icons: {
                                 details: ICON.details,
                                 feishu: ICON.feishu,