botmux 3.16.0 → 3.17.0

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

@@ -19,6 +19,8 @@ import { filterMentionBots, findMentionTrigger, insertBotMention, insertImageMar
 import { store } from './store.js';
 import { attentionWaitSince, botAvatarHtml, botDisplayName, chatAvatarHtml, chatDisplayTitle, loadNameMaps, relTime, stripMentionPrefix, t, ui, } from './ui.js';
 import { SessionsKanbanView, } from './sessions-kanban.js';
+import { toast } from './toast.js';
+import { confirm, promptText } from './confirm-modal.js';
 const CREATE_IMAGE_TYPES = new Set(['image/png', 'image/jpeg', 'image/gif', 'image/webp']);
 const CREATE_IMAGE_MAX_COUNT = 8;
 const CREATE_IMAGE_MAX_BYTES = 10 * 1024 * 1024;
@@ -343,7 +345,25 @@ export function CliFilterGroup(props) {
                                             if (props.selected.has(cli))
                                                 props.onToggle(cli, false); }, children: t('sessions.cliClear') })] })] }), _jsx("div", { className: "filter-cli-options", children: visible.length === 0 ? (_jsx("span", { className: "filter-cli-empty", children: t('sessions.cliNoMatch') })) : visible.map(cli => (_jsxs("label", { className: "filter-check", children: [_jsx("input", { type: "checkbox", name: "cli", value: cli, checked: props.selected.has(cli), onChange: event => props.onToggle(cli, event.currentTarget.checked) }), _jsx("span", { children: cli })] }, cli))) })] })] }));
 }
-function SessionsFilters(props) {
+/** 排序下拉：表格列排序之外的统一入口（看板/状态板/话题视图没有表头可点）。
+ *  只写既有 sortKey/sortDir，不引入新数据流。 */
+function SortMenu(props) {
+    const options = [
+        { key: 'lastMessageAt', label: t('sessions.sort.lastMessageAt') },
+        { key: 'spawnedAt', label: t('sessions.sort.spawnedAt') },
+        { key: 'title', label: t('sessions.sort.title') },
+        { key: 'status', label: t('sessions.sort.status') },
+    ];
+    const current = options.find(option => option.key === props.sortKey) ?? options[0];
+    return (_jsxs("details", { className: "sessions-sort-menu sect-sort-menu", children: [_jsx("summary", { "aria-label": t('sessions.sort'), children: _jsxs("span", { className: "sect-sort-value", children: [t('sessions.sort'), ": ", current.label, " ", props.sortDir === 'asc' ? '↑' : '↓'] }) }), _jsx("div", { className: "sect-sort-pop", role: "menu", children: options.map(option => (_jsxs("button", { type: "button", role: "menuitem", "aria-current": option.key === props.sortKey ? 'true' : undefined, onClick: () => props.onSort(option.key), children: [option.label, option.key === props.sortKey ? (props.sortDir === 'asc' ? ' ↑' : ' ↓') : null] }, option.key))) })] }));
+}
+/** 高级筛选抽屉：来源 / CLI / 群 / 话题类型等低频筛选收进右侧抽屉，
+ *  筛选 state 仍是同一个 FiltersState，只是换了渲染位置。抽屉内一律用原生
+ *  <select> + 内联复选列表（不用浮层），避免被抽屉滚动容器裁剪。 */
+function SessionsFilterDrawer(props) {
+    const dialogRef = useRef(null);
+    useDialogVisibility(dialogRef, props.open);
+    const [cliQuery, setCliQuery] = useState('');
     const statusOptions = [
         { value: '', label: t('sessions.anyStatus') },
         ...SESSION_STATUS_OPTIONS.map(status => ({ value: status, label: sessionStatusText(status) })),
@@ -353,39 +373,77 @@ function SessionsFilters(props) {
         { value: 'yes', label: t('sessions.adoptYes') },
         { value: 'no', label: t('sessions.adoptNo') },
     ];
-    const statusLabel = statusOptions.find(option => option.value === props.filters.status)?.label ?? t('sessions.anyStatus');
-    const adoptLabel = adoptOptions.find(option => option.value === props.filters.adopt)?.label ?? t('sessions.adoptAny');
     const chatOptions = [
         { value: '', label: t('sessions.chatAny') },
         ...props.chatOptions,
     ];
-    const chatLabel = chatOptions.find(option => option.value === props.filters.chat)?.label ?? t('sessions.chatAny');
-    return (_jsxs("form", { id: "filters", className: "filters dashboard-toolbar sessions-filters", onSubmit: event => event.preventDefault(), children: [_jsx("input", { type: "search", name: "q", placeholder: t('sessions.search'), value: props.filters.q, onChange: event => {
+    const cliQueryNorm = cliQuery.trim().toLowerCase();
+    const visibleClis = cliQueryNorm
+        ? CLI_FILTER_OPTIONS.filter(cli => cli.toLowerCase().includes(cliQueryNorm))
+        : CLI_FILTER_OPTIONS;
+    const reset = () => {
+        writeStoredSessionsShowUnknownChats(windowStorage(), false);
+        props.setFilters(() => ({
+            q: props.filters.q,
+            status: '',
+            adopt: '',
+            chat: '',
+            multiBotTopics: false,
+            botTriggeredTopics: false,
+            showUnknownChats: false,
+            active: true,
+            cli: new Set(CLI_FILTER_OPTIONS),
+        }));
+    };
+    return (_jsxs("dialog", { ref: dialogRef, className: "sessions-filter-drawer", onClose: props.onClose, onClick: event => { if (event.target === event.currentTarget)
+            props.onClose(); }, children: [_jsxs("header", { children: [_jsx("h3", { children: t('sessions.filters.title') }), _jsx(IconActionButton, { className: "card-act drawer-close-btn", icon: ICON.close, label: t('sessions.dismiss'), onClick: props.onClose })] }), _jsxs("div", { className: "sessions-filter-drawer-body", children: [_jsxs("div", { className: "sessions-filter-field", children: [_jsx("span", { className: "sessions-filter-label", children: t('sessions.status') }), _jsx("select", { value: props.filters.status, onChange: event => props.setFilters(prev => ({ ...prev, status: event.currentTarget.value })), children: statusOptions.map(option => _jsx("option", { value: option.value, children: option.label }, option.value || 'any')) })] }), _jsxs("div", { className: "sessions-filter-field", children: [_jsx("span", { className: "sessions-filter-label", children: t('sessions.adopt') }), _jsx("select", { value: props.filters.adopt, onChange: event => props.setFilters(prev => ({ ...prev, adopt: event.currentTarget.value })), children: adoptOptions.map(option => _jsx("option", { value: option.value, children: option.label }, option.value || 'any')) })] }), _jsxs("div", { className: "sessions-filter-field", children: [_jsx("span", { className: "sessions-filter-label", children: t('sessions.location') }), _jsx("select", { value: props.filters.chat, onChange: event => props.setFilters(prev => ({ ...prev, chat: event.currentTarget.value })), children: chatOptions.map(option => _jsx("option", { value: option.value, children: option.label }, option.value || 'any')) })] }), _jsxs("div", { className: "sessions-filter-field", children: [_jsx("span", { className: "sessions-filter-label", children: t('sessions.cli') }), _jsxs("div", { className: "sessions-filter-cli", children: [_jsx("input", { type: "search", className: "sessions-filter-cli-search", placeholder: t('sessions.cliSearch'), value: cliQuery, onChange: event => setCliQuery(event.currentTarget.value) }), _jsxs("div", { className: "sessions-filter-cli-bulk", children: [_jsx("button", { type: "button", onClick: () => props.setFilters(prev => ({ ...prev, cli: new Set(CLI_FILTER_OPTIONS) })), children: t('sessions.cliSelectAll') }), _jsx("button", { type: "button", onClick: () => props.setFilters(prev => ({ ...prev, cli: new Set() })), children: t('sessions.cliClear') })] }), _jsx("div", { className: "sessions-filter-cli-list", children: visibleClis.length === 0 ? (_jsx("span", { className: "filter-cli-empty", children: t('sessions.cliNoMatch') })) : visibleClis.map(cli => (_jsxs("label", { className: "filter-check", children: [_jsx("input", { type: "checkbox", name: "cli", value: cli, checked: props.filters.cli.has(cli), onChange: event => {
+                                                        const checked = event.currentTarget.checked;
+                                                        props.setFilters(prev => {
+                                                            const next = new Set(prev.cli);
+                                                            if (checked)
+                                                                next.add(cli);
+                                                            else
+                                                                next.delete(cli);
+                                                            return { ...prev, cli: next };
+                                                        });
+                                                    } }), _jsx("span", { children: cli })] }, cli))) })] })] }), _jsxs("div", { className: "sessions-filter-toggles", children: [_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 }));
+                                        } }), _jsx("span", { className: "filter-toggle-label", children: t('sessions.showUnknownChats') }), _jsx("span", { className: "filter-toggle-switch", "aria-hidden": "true" })] }), _jsxs("label", { className: "filter-toggle", children: [_jsx("input", { type: "checkbox", name: "active", checked: props.filters.active, onChange: event => {
+                                            const active = event.currentTarget.checked;
+                                            props.setFilters(prev => ({ ...prev, active }));
+                                        } }), _jsx("span", { className: "filter-toggle-label", children: t('sessions.activeOnly') }), _jsx("span", { className: "filter-toggle-switch", "aria-hidden": "true" })] })] })] }), _jsxs("footer", { children: [_jsx("button", { type: "button", className: "sessions-filter-clear", onClick: reset, children: t('sessions.filters.clear') }), _jsx("button", { type: "button", className: "primary sessions-filter-done", onClick: props.onClose, children: t('sessions.filters.done') })] })] }));
+}
+function SessionsFilters(props) {
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    // 快捷分段视图映射到既有 status 筛选：待处理=stalled（长时间无进展，最需要人看），
+    // 进行中=working，全部=任意。抽屉里的完整状态下拉可覆盖为其它状态，此时分段无激活项。
+    const quickViews = [
+        { value: 'stalled', label: t('sessions.view.need') },
+        { value: 'working', label: t('sessions.view.work') },
+        { value: '', label: t('sessions.view.all') },
+    ];
+    const activeFilterCount = [
+        props.filters.status !== '',
+        props.filters.adopt !== '',
+        props.filters.chat !== '',
+        props.filters.cli.size < CLI_FILTER_OPTIONS.length,
+        props.filters.multiBotTopics,
+        props.filters.botTriggeredTopics,
+        props.filters.showUnknownChats,
+        !props.filters.active,
+    ].filter(Boolean).length;
+    return (_jsxs("form", { id: "filters", className: "filters dashboard-toolbar sessions-filters sessions-toolbar", onSubmit: event => event.preventDefault(), children: [_jsx("input", { type: "search", name: "q", placeholder: t('sessions.search'), value: props.filters.q, onChange: event => {
                     const q = event.currentTarget.value;
                     props.setFilters(prev => ({ ...prev, q }));
-                } }), _jsx(DropdownMenu, { label: statusLabel, value: props.filters.status, options: statusOptions, onChange: value => props.setFilters(prev => ({ ...prev, status: value })) }), _jsx(DropdownMenu, { label: adoptLabel, value: props.filters.adopt, options: adoptOptions, onChange: value => props.setFilters(prev => ({ ...prev, adopt: value })) }), _jsx(DropdownMenu, { ariaLabel: t('sessions.location'), className: "filter-chat-menu", label: chatLabel, value: props.filters.chat, options: chatOptions, searchable: true, searchPlaceholder: t('sessions.chatSearch'), searchEmptyLabel: t('sessions.chatNoMatch'), onChange: value => props.setFilters(prev => ({ ...prev, chat: value })) }), _jsx(CliFilterGroup, { selected: props.filters.cli, onToggle: (cli, checked) => {
-                    props.setFilters(prev => {
-                        const next = new Set(prev.cli);
-                        if (checked)
-                            next.add(cli);
-                        else
-                            next.delete(cli);
-                        return { ...prev, cli: next };
-                    });
-                } }), _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 }));
-                        } }), _jsx("span", { className: "filter-toggle-label", children: t('sessions.showUnknownChats') }), _jsx("span", { className: "filter-toggle-switch", "aria-hidden": "true" })] }), _jsxs("label", { className: "filter-toggle", children: [_jsx("input", { type: "checkbox", name: "active", checked: props.filters.active, onChange: event => {
-                            const active = event.currentTarget.checked;
-                            props.setFilters(prev => ({ ...prev, active }));
-                        } }), _jsx("span", { className: "filter-toggle-label", children: t('sessions.activeOnly') }), _jsx("span", { className: "filter-toggle-switch", "aria-hidden": "true" })] }), _jsx(IdleCleanupBar, { ...props.idleCleanup })] }));
+                } }), _jsx("div", { className: "segmented sessions-quick-view", role: "group", "aria-label": t('sessions.status'), children: quickViews.map(view => (_jsx("button", { type: "button", "data-quick": view.value, className: props.filters.status === view.value ? 'active' : undefined, "aria-pressed": props.filters.status === view.value, onClick: () => props.setFilters(prev => ({ ...prev, status: view.value })), children: view.label }, view.label))) }), _jsxs("button", { type: "button", className: `sessions-filter-btn${activeFilterCount > 0 ? ' has-active' : ''}`, "aria-haspopup": "dialog", "aria-expanded": drawerOpen, onClick: () => setDrawerOpen(true), children: [t('sessions.filters.title'), activeFilterCount > 0 ? _jsx("span", { className: "sessions-filter-count", children: activeFilterCount }) : null] }), _jsx(SortMenu, { sortKey: props.sortKey, sortDir: props.sortDir, onSort: props.onSort }), _jsx(IdleCleanupBar, { ...props.idleCleanup }), _jsx(SessionsFilterDrawer, { open: drawerOpen, chatOptions: props.chatOptions, filters: props.filters, setFilters: props.setFilters, onClose: () => setDrawerOpen(false) })] }));
 }
 function BulkBar(props) {
     const busy = !!props.closeProgress || !!props.lockProgress;
@@ -692,13 +750,15 @@ function BoardCard(props) {
     const signal = boardSignalLabel(row);
     const repo = repoBasename(row.workingDir);
     const exchange = sessionExchangePreview(row);
+    // 状态色条语义与看板卡片一致：需要你 / 进行中 / 待办 / 空闲；已关闭单独一色。
+    const signalKind = deriveSessionBoardColumn(row) ?? (row.status === 'closed' ? 'closed' : 'idle');
     const onCardClick = (event) => {
         const target = event.target;
         if (target.closest('a, button, input, label'))
             return;
         props.onToggleSelect(row);
     };
-    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 ?? sessionCliDisplayName(row)] })] }), _jsxs("span", { className: "session-card-status-group", children: [_jsx(StatusBadge, { status: row.status }), _jsx(TodoBadge, { row: row }), _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(SessionExchangePreview, { exchange: exchange }), _jsx("div", { className: "session-card-time", children: _jsx("span", { children: row.agentAttention?.at
+    return (_jsxs("article", { className: `session-card${props.selected ? ' selected' : ''}${row.locked ? ' locked' : ''}`, "data-id": row.sessionId, "data-signal": signalKind, "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 ?? sessionCliDisplayName(row)] })] }), _jsxs("span", { className: "session-card-status-group", children: [_jsx(StatusBadge, { status: row.status }), _jsx(TodoBadge, { row: row }), _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(SessionExchangePreview, { exchange: exchange }), _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 }), 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] })] }));
 }
@@ -920,12 +980,14 @@ function Drawer(props) {
     useDialogVisibility(dialogRef, !!props.row);
     const row = props.row;
     const terminal = row ? terminalHref(row) : null;
+    const closed = !!row && row.status === 'closed';
+    const canTakeover = !!row && !closed && !!terminal;
     return (_jsx("dialog", { id: "drawer", ref: dialogRef, onClose: props.onClose, onClick: event => { if (event.target === event.currentTarget)
-            props.onClose(); }, children: row ? (_jsxs("article", { children: [_jsxs("header", { children: [_jsxs("div", { className: "drawer-title-row", children: [_jsx("h3", { children: stripMentionPrefix(row.title) || row.sessionId }), _jsx(IconActionButton, { id: "drawer-close", className: "card-act drawer-close-btn", icon: ICON.close, label: t('sessions.dismiss'), onClick: props.onClose })] }), _jsxs("span", { className: "drawer-status-line", children: [_jsx(StatusBadge, { status: row.status }), _jsx(TodoBadge, { row: row }), _jsx(LockChip, { row: row })] }), _jsxs("p", { children: [_jsx("code", { children: row.sessionId }), " ", _jsx(CopyButton, { value: row.sessionId })] })] }), _jsxs("p", { children: [_jsxs("b", { children: [t('sessions.bot'), ":"] }), " ", botDisplayName(row), " \u00B7 ", _jsxs("b", { children: [t('sessions.cli'), ":"] }), " ", sessionCliDisplayName(row)] }), _jsxs("p", { children: [_jsxs("b", { children: [t('sessions.location'), ":"] }), " ", sessionLocationText(row)] }), _jsxs("p", { children: [_jsx("b", { children: "chatId:" }), " ", _jsx("code", { children: row.chatId ?? '' }), " ", _jsx(CopyButton, { value: row.chatId ?? '' })] }), _jsxs("p", { children: [_jsx("b", { children: "rootMessageId:" }), " ", _jsx("code", { children: row.rootMessageId ?? '' }), " ", _jsx(CopyButton, { value: row.rootMessageId ?? '' })] }), row.threadId ? _jsxs("p", { children: [_jsx("b", { children: "threadId:" }), " ", _jsx("code", { children: row.threadId })] }) : null, _jsxs("p", { children: [_jsxs("b", { children: [t('sessions.workingDir'), ":"] }), " ", row.workingDir ?? '-'] }), _jsxs("div", { className: "actions", children: [_jsx(ChatScopeLink, { row: row }), !row.feishuChatLink || row.scope !== 'chat' ? _jsx(LocateButton, { row: row, locateSession: props.locateSession }) : null, _jsx("button", { id: "history-drawer-btn", type: "button", onClick: () => props.openHistory(row), children: t('sessions.history.title') }), _jsx(TerminalControls, { row: row, url: terminal }), shouldOpenWritableTerminal() && row.status !== 'closed' ? (_jsx("button", { id: "copy-cmd-btn", type: "button", "data-tip": t('sessions.copyCommandHint'), onClick: event => void copySpawnCommand(row, event.currentTarget), children: t('sessions.copyCommand') })) : null, canRestartSession(row) ? (_jsx("button", { id: "restart-btn", type: "button", onClick: async (event) => { if (await props.restartSession(row, event.currentTarget))
-                                props.onClose(); }, children: t('sessions.restart') })) : null, _jsx("button", { id: "lock-btn", type: "button", onClick: event => void props.setSessionLocked(row, !row.locked, event.currentTarget), children: lockActionLabel(row) }), row.queued && row.status !== 'closed' ? (_jsx("button", { id: "start-btn", type: "button", className: "primary", onClick: async (event) => { if (await props.startSession(row, event.currentTarget))
-                                props.onClose(); }, children: t('sessions.create.start') })) : null, row.status === 'closed' ? (_jsx("button", { id: "resume-btn", type: "button", className: "primary", onClick: async (event) => { if (await props.resumeSession(row, event.currentTarget))
-                                props.onClose(); }, children: t('sessions.resume') })) : null, row.status !== 'closed' ? (_jsx("button", { id: "close-btn", type: "button", className: "contrast", onClick: async (event) => { if (await props.closeSession(row, event.currentTarget))
-                                props.onClose(); }, children: t('sessions.close') })) : null, _jsx(InsightPanel, { row: row })] })] })) : null }));
+            props.onClose(); }, children: row ? (_jsxs("article", { children: [_jsxs("header", { children: [_jsxs("div", { className: "drawer-title-row", children: [_jsx("h3", { children: stripMentionPrefix(row.title) || row.sessionId }), _jsx(IconActionButton, { id: "drawer-close", className: "card-act drawer-close-btn", icon: ICON.close, label: t('sessions.dismiss'), onClick: props.onClose })] }), _jsxs("span", { className: "drawer-status-line", children: [_jsx(StatusBadge, { status: row.status }), _jsx(TodoBadge, { row: row }), _jsx(LockChip, { row: row })] }), _jsxs("p", { children: [_jsx("code", { children: row.sessionId }), " ", _jsx(CopyButton, { value: row.sessionId })] })] }), _jsxs("div", { className: "drawer-body", children: [_jsxs("p", { children: [_jsxs("b", { children: [t('sessions.bot'), ":"] }), " ", botDisplayName(row), " \u00B7 ", _jsxs("b", { children: [t('sessions.cli'), ":"] }), " ", sessionCliDisplayName(row)] }), _jsxs("p", { children: [_jsxs("b", { children: [t('sessions.location'), ":"] }), " ", sessionLocationText(row)] }), _jsxs("p", { children: [_jsx("b", { children: "chatId:" }), " ", _jsx("code", { children: row.chatId ?? '' }), " ", _jsx(CopyButton, { value: row.chatId ?? '' })] }), _jsxs("p", { children: [_jsx("b", { children: "rootMessageId:" }), " ", _jsx("code", { children: row.rootMessageId ?? '' }), " ", _jsx(CopyButton, { value: row.rootMessageId ?? '' })] }), row.threadId ? _jsxs("p", { children: [_jsx("b", { children: "threadId:" }), " ", _jsx("code", { children: row.threadId })] }) : null, _jsxs("p", { children: [_jsxs("b", { children: [t('sessions.workingDir'), ":"] }), " ", row.workingDir ?? '-'] }), _jsx(InsightPanel, { row: row })] }), _jsxs("footer", { className: "drawer-foot", children: [_jsx("div", { className: "drawer-foot-actions", children: closed ? (_jsx("button", { id: "resume-btn", type: "button", className: "primary drawer-btn-primary", onClick: async (event) => { if (await props.resumeSession(row, event.currentTarget))
+                                    props.onClose(); }, children: t('sessions.resume') })) : (_jsxs(_Fragment, { children: [_jsx("button", { id: "takeover-btn", type: "button", className: "primary drawer-btn-primary", disabled: !canTakeover, title: canTakeover ? undefined : t('sessions.openReadonlyTerminal'), onClick: event => props.onTakeover(row, event.currentTarget), children: t('sessions.takeoverTerminal') }), canRestartSession(row) ? (_jsx("button", { id: "restart-btn", type: "button", className: "drawer-btn-secondary", onClick: async (event) => { if (await props.restartSession(row, event.currentTarget))
+                                            props.onClose(); }, children: t('sessions.restart') })) : null, _jsx("button", { id: "close-btn", type: "button", className: "drawer-btn-danger", onClick: async (event) => { if (await props.closeSession(row, event.currentTarget))
+                                            props.onClose(); }, children: t('sessions.close') })] })) }), _jsxs("details", { className: "drawer-more", children: [_jsx("summary", { "aria-label": t('sessions.more'), children: t('sessions.more') }), _jsxs("div", { className: "drawer-more-pop", role: "menu", children: [_jsx("button", { id: "history-drawer-btn", type: "button", role: "menuitem", onClick: () => props.openHistory(row), children: t('sessions.history.title') }), shouldOpenWritableTerminal() && !closed ? (_jsx("button", { id: "copy-cmd-btn", type: "button", role: "menuitem", "data-tip": t('sessions.copyCommandHint'), onClick: event => void copySpawnCommand(row, event.currentTarget), children: t('sessions.copyCommand') })) : null, _jsx("button", { id: "lock-btn", type: "button", role: "menuitem", onClick: event => void props.setSessionLocked(row, !row.locked, event.currentTarget), children: lockActionLabel(row) }), !row.feishuChatLink || row.scope !== 'chat' ? (_jsx("span", { className: "drawer-more-item", children: _jsx(LocateButton, { row: row, locateSession: props.locateSession }) })) : (_jsx("a", { className: "drawer-more-item drawer-more-link", href: row.feishuChatLink, target: "_blank", rel: "noopener", role: "menuitem", children: t('sessions.openChat') })), row.queued && !closed ? (_jsx("button", { id: "start-btn", type: "button", role: "menuitem", onClick: async (event) => { if (await props.startSession(row, event.currentTarget))
+                                                props.onClose(); }, children: t('sessions.create.start') })) : null] })] })] })] })) : null }));
 }
 function CreateSessionDialog(props) {
     const state = props.state;
@@ -1059,7 +1121,7 @@ function CreateSessionDialog(props) {
         const response = await fetch(`/api/feed-groups/auth-url${query}`);
         const body = await response.json().catch(() => ({}));
         if (!response.ok || !body.authUrl) {
-            alert(body.error ?? `HTTP ${response.status}`);
+            toast(body.error ?? `HTTP ${response.status}`, { kind: 'error' });
             return;
         }
         setFeedGroupAuthUrl(String(body.authUrl));
@@ -1087,7 +1149,7 @@ function CreateSessionDialog(props) {
             setFeedGroupCallbackUrl('');
         }
         catch (error) {
-            alert(error instanceof Error ? error.message : String(error));
+            toast(error instanceof Error ? error.message : String(error), { kind: 'error' });
         }
         finally {
             setFeedGroupAuthSubmitting(false);
@@ -1158,21 +1220,21 @@ function CreateSessionDialog(props) {
         const pasteEnd = event.currentTarget.selectionEnd ?? pasteStart;
         const supported = pasted.filter(file => CREATE_IMAGE_TYPES.has(file.type.toLowerCase()));
         if (supported.length !== pasted.length) {
-            alert(t('sessions.create.imageUnsupported'));
+            toast(t('sessions.create.imageUnsupported'), { kind: 'warning' });
             return;
         }
         if (images.length + supported.length > CREATE_IMAGE_MAX_COUNT) {
-            alert(t('sessions.create.imageCountLimit', { n: String(CREATE_IMAGE_MAX_COUNT) }));
+            toast(t('sessions.create.imageCountLimit', { n: String(CREATE_IMAGE_MAX_COUNT) }), { kind: 'warning' });
             return;
         }
         if (supported.some(file => file.size > CREATE_IMAGE_MAX_BYTES)) {
-            alert(t('sessions.create.imageSizeLimit'));
+            toast(t('sessions.create.imageSizeLimit'), { kind: 'warning' });
             return;
         }
         const nextTotal = images.reduce((sum, image) => sum + image.size, 0)
             + supported.reduce((sum, file) => sum + file.size, 0);
         if (nextTotal > CREATE_IMAGE_MAX_TOTAL_BYTES) {
-            alert(t('sessions.create.imageTotalLimit'));
+            toast(t('sessions.create.imageTotalLimit'), { kind: 'warning' });
             return;
         }
         try {
@@ -1208,23 +1270,23 @@ function CreateSessionDialog(props) {
             });
         }
         catch {
-            alert(t('sessions.create.imageReadFailed'));
+            toast(t('sessions.create.imageReadFailed'), { kind: 'error' });
         }
     };
     const submit = async (event) => {
         event.preventDefault();
         const text = content.trim();
         if (!text) {
-            alert(t('sessions.create.errContent'));
+            toast(t('sessions.create.errContent'), { kind: 'warning' });
             return;
         }
         if (checkedIds.length === 0) {
-            alert(t('sessions.create.errNoBot'));
+            toast(t('sessions.create.errNoBot'), { kind: 'warning' });
             return;
         }
         const leadLarkAppId = lead || checkedIds[0] || '';
         if (mode === 'lead' && (!leadLarkAppId || !checkedIds.includes(leadLarkAppId))) {
-            alert(t('sessions.create.errLead'));
+            toast(t('sessions.create.errLead'), { kind: 'warning' });
             return;
         }
         setSubmitting(true);
@@ -1266,10 +1328,10 @@ function CreateSessionDialog(props) {
                 }
             }
             else if (r.status !== 401)
-                alert(`${t('sessions.create.failed')}: ${body?.error ?? r.status}`);
+                toast(`${t('sessions.create.failed')}: ${body?.error ?? r.status}`, { kind: 'error' });
         }
         catch (e) {
-            alert(`${t('sessions.create.failed')}: ${e}`);
+            toast(`${t('sessions.create.failed')}: ${e}`, { kind: 'error' });
         }
         finally {
             setSubmitting(false);
@@ -1312,9 +1374,15 @@ function CreateSessionDialog(props) {
                                             writeStoredCreateKeepOpen(windowStorage(), next);
                                         } }), _jsx("span", { children: t('sessions.create.keepOpen') })] }), _jsx("button", { type: "button", id: "cs-cancel", onClick: props.onClose, children: t('sessions.create.cancel') }), _jsx("button", { type: "submit", className: "cs-submit", disabled: submitting || bots.length === 0, children: submitting ? t('sessions.create.submitting') : t('sessions.create.submit') })] })] })] }));
 }
+/** 首屏骨架屏：首个 /api/sessions 快照到达前不闪「空」。布局模仿状态板四列，
+ *  纯展示，无交互。 */
+function SessionsSkeleton() {
+    return (_jsx("div", { className: "sessions-skeleton", "aria-busy": "true", "aria-label": t('sessions.loadingSessions'), children: [0, 1, 2, 3].map(column => (_jsxs("div", { className: "sessions-skeleton-col", children: [_jsx("div", { className: "skel skel-head" }), _jsx("div", { className: "skel skel-card" }), _jsx("div", { className: "skel skel-card skel-card-short" }), _jsx("div", { className: "skel skel-card" })] }, column))) }));
+}
 function SessionsPage() {
     useT();
     const storeRows = useStoreSelector(snapshot => [...snapshot.sessions.values()]);
+    const bootstrapped = useStoreSelector(snapshot => snapshot.bootstrapped);
     const [revision, setRevision] = useState(0);
     const refresh = useCallback(() => setRevision(v => v + 1), []);
     const [filters, setFilters] = useState({
@@ -1573,7 +1641,7 @@ function SessionsPage() {
                     return { ...prev, data: { ...prev.data, board } };
                 });
                 if (r.status !== 401)
-                    alert(`${t('sessions.kanban.moveFail')}: ${body?.error ?? r.status}`);
+                    toast(`${t('sessions.kanban.moveFail')}: ${body?.error ?? r.status}`, { kind: 'error' });
             }
         }
         catch (e) {
@@ -1587,7 +1655,7 @@ function SessionsPage() {
                     delete board[sessionId];
                 return { ...prev, data: { ...prev.data, board } };
             });
-            alert(`${t('sessions.kanban.moveFail')}: ${e}`);
+            toast(`${t('sessions.kanban.moveFail')}: ${e}`, { kind: 'error' });
         }
     }, []);
     const ensureTeamBoard = useCallback(async (team) => {
@@ -1652,14 +1720,14 @@ function SessionsPage() {
                 row.kanbanPosition = prev.position;
                 refresh();
                 if (r.status !== 401)
-                    alert(`${t('sessions.kanban.moveFail')}: ${body?.error ?? r.status}`);
+                    toast(`${t('sessions.kanban.moveFail')}: ${body?.error ?? r.status}`, { kind: 'error' });
             }
         }
         catch (e) {
             row.kanbanColumn = prev.column;
             row.kanbanPosition = prev.position;
             refresh();
-            alert(`${t('sessions.kanban.moveFail')}: ${e}`);
+            toast(`${t('sessions.kanban.moveFail')}: ${e}`, { kind: 'error' });
         }
     }, [refresh]);
     const handleKanbanMoves = useCallback((moves) => {
@@ -1714,13 +1782,13 @@ function SessionsPage() {
                 row.title = prevTitle;
                 refresh();
                 if (r.status !== 401)
-                    alert(`${t('sessions.kanban.renameFail')}: ${body?.error ?? r.status}`);
+                    toast(`${t('sessions.kanban.renameFail')}: ${body?.error ?? r.status}`, { kind: 'error' });
             }
         }
         catch (e) {
             row.title = prevTitle;
             refresh();
-            alert(`${t('sessions.kanban.renameFail')}: ${e}`);
+            toast(`${t('sessions.kanban.renameFail')}: ${e}`, { kind: 'error' });
         }
     }, [refresh]);
     const locateSession = useCallback(async (row) => {
@@ -1732,16 +1800,16 @@ function SessionsPage() {
             const body = await r.json();
             if (body.ok)
                 return true;
-            alert(`Locate failed: ${body.error ?? r.status}`);
+            toast(`Locate failed: ${body.error ?? r.status}`, { kind: 'error' });
             return false;
         }
         catch (e) {
-            alert(`Locate error: ${e}`);
+            toast(`Locate error: ${e}`, { kind: 'error' });
             return false;
         }
     }, []);
     const closeSession = useCallback(async (row, closeBtn) => {
-        if (!confirm(t('sessions.closeConfirm')))
+        if (!await confirm({ title: '关闭会话', message: t('sessions.closeConfirm'), danger: true }))
             return false;
         if (closeBtn)
             closeBtn.disabled = true;
@@ -1750,7 +1818,7 @@ function SessionsPage() {
             const body = await r.json().catch(() => ({}));
             if (!r.ok || body?.ok === false) {
                 if (r.status !== 401)
-                    alert(`Close failed: ${body?.error ?? r.status}`);
+                    toast(`Close failed: ${body?.error ?? r.status}`, { kind: 'error' });
                 return false;
             }
             // Closed locally, but a remote session was left running (its control plane
@@ -1758,11 +1826,11 @@ function SessionsPage() {
             // moment the operator can be told.
             const residual = parseCloseResidual(body);
             if (residual) {
-                alert(closeResidualIsLocal(residual)
+                toast(closeResidualIsLocal(residual)
                     ? `⚠️ Closed locally, but a credentialed host subtree could NOT be proven terminated: `
                         + `${describeCloseResidual(residual)}. The remote session WAS cancelled — inspect the local host process.`
                     : `⚠️ Closed locally, but the remote session was NOT cancelled: `
-                        + `${describeCloseResidual(residual)} — manual cleanup required.`);
+                        + `${describeCloseResidual(residual)} — manual cleanup required.`, { kind: 'warning' });
             }
             setSelected(prev => {
                 const next = new Set(prev);
@@ -1773,7 +1841,7 @@ function SessionsPage() {
             return true;
         }
         catch (e) {
-            alert(`Close error: ${e}`);
+            toast(`Close error: ${e}`, { kind: 'error' });
             return false;
         }
         finally {
@@ -1800,7 +1868,7 @@ function SessionsPage() {
                 row.locked = prev;
                 refresh();
                 if (r.status !== 401)
-                    alert(`${t('sessions.lockFailed')}: ${body?.error ?? r.status}`);
+                    toast(`${t('sessions.lockFailed')}: ${body?.error ?? r.status}`, { kind: 'error' });
                 return false;
             }
             row.locked = !!body.locked;
@@ -1810,7 +1878,7 @@ function SessionsPage() {
         catch (e) {
             row.locked = prev;
             refresh();
-            alert(`${t('sessions.lockFailed')}: ${e}`);
+            toast(`${t('sessions.lockFailed')}: ${e}`, { kind: 'error' });
             return false;
         }
         finally {
@@ -1821,7 +1889,7 @@ function SessionsPage() {
     const restartSession = useCallback(async (row, restartBtn) => {
         if (restartCooldownIds.current.has(row.sessionId))
             return false;
-        if (!confirm(restartConfirmMessage(row)))
+        if (!await confirm({ title: '重启会话', message: restartConfirmMessage(row), danger: true }))
             return false;
         if (restartBtn)
             restartBtn.disabled = true;
@@ -1830,7 +1898,7 @@ function SessionsPage() {
             const body = await r.json().catch(() => ({}));
             if (!r.ok || body?.ok === false) {
                 if (r.status !== 401)
-                    alert(`${t('sessions.restartFailed')}: ${body?.message ?? body?.error ?? r.status}`);
+                    toast(`${t('sessions.restartFailed')}: ${body?.message ?? body?.error ?? r.status}`, { kind: 'error' });
                 return false;
             }
             restartCooldownIds.current.add(row.sessionId);
@@ -1838,7 +1906,7 @@ function SessionsPage() {
             return true;
         }
         catch (e) {
-            alert(`${t('sessions.restartFailed')}: ${e}`);
+            toast(`${t('sessions.restartFailed')}: ${e}`, { kind: 'error' });
             return false;
         }
         finally {
@@ -1853,13 +1921,13 @@ function SessionsPage() {
             const r = await fetch(`/api/sessions/${encodeURIComponent(row.sessionId)}/resume`, { method: 'POST' });
             const body = await r.json().catch(() => ({}));
             if (!r.ok || body.ok === false) {
-                alert(`${t('sessions.resumeFailed')}: ${body?.error ?? r.status}`);
+                toast(`${t('sessions.resumeFailed')}: ${body?.error ?? r.status}`, { kind: 'error' });
                 return false;
             }
             return true;
         }
         catch (e) {
-            alert(`${t('sessions.resumeFailed')}: ${e}`);
+            toast(`${t('sessions.resumeFailed')}: ${e}`, { kind: 'error' });
             return false;
         }
         finally {
@@ -1875,13 +1943,13 @@ function SessionsPage() {
             const body = await r.json().catch(() => ({}));
             if (!r.ok || body.ok === false) {
                 if (r.status !== 401)
-                    alert(`${t('sessions.create.startFailed')}: ${body?.error ?? r.status}`);
+                    toast(`${t('sessions.create.startFailed')}: ${body?.error ?? r.status}`, { kind: 'error' });
                 return false;
             }
             return true;
         }
         catch (e) {
-            alert(`${t('sessions.create.startFailed')}: ${e}`);
+            toast(`${t('sessions.create.startFailed')}: ${e}`, { kind: 'error' });
             return false;
         }
         finally {
@@ -1922,11 +1990,19 @@ function SessionsPage() {
     const openWritableTerminal = useCallback((row, button) => {
         void openWriteLink(row, button);
     }, []);
+    // 抽屉主操作「接管终端」：有权限直接开可写终端，否则退到只读终端弹窗。
+    const takeoverSession = useCallback((row, button) => {
+        if (shouldOpenWritableTerminal() && row.status !== 'closed') {
+            void openWriteLink(row, button);
+            return;
+        }
+        openTerminalModal(row);
+    }, [openTerminalModal]);
     const runBulkClose = useCallback(async () => {
         const ids = [...selected];
         if (ids.length === 0)
             return;
-        if (!confirm(t('sessions.closeBulkConfirm', { count: ids.length })))
+        if (!await confirm({ title: '关闭会话', message: t('sessions.closeBulkConfirm', { count: ids.length }), danger: true }))
             return;
         setBulkCloseProgress({ done: 0, total: ids.length });
         let done = 0;
@@ -1964,14 +2040,14 @@ function SessionsPage() {
         setSelected(new Set());
         refresh();
         if (failed > 0)
-            alert(`Failed: ${failed}/${ids.length}`);
+            toast(`Failed: ${failed}/${ids.length}`, { kind: 'error' });
         if (residualIds.length > 0) {
             // Fires even when nothing failed — otherwise an all-residual batch is
             // entirely silent and the operator believes everything is gone. Kind-neutral
             // (a batch can mix a surviving remote session and a local host subtree); each
             // label already states which.
-            alert(`⚠️ ${residualIds.length}/${ids.length} closed locally but left a residual `
-                + `requiring manual cleanup: ${residualIds.join(', ')}`);
+            toast(`⚠️ ${residualIds.length}/${ids.length} closed locally but left a residual `
+                + `requiring manual cleanup: ${residualIds.join(', ')}`, { kind: 'warning' });
         }
     }, [refresh, selected]);
     const runBulkLock = useCallback(async (locked) => {
@@ -2017,7 +2093,7 @@ function SessionsPage() {
         setBulkLockProgress(null);
         refresh();
         if (failed > 0)
-            alert(`${t('sessions.lockFailed')}: ${failed}/${targetRows.length}`);
+            toast(`${t('sessions.lockFailed')}: ${failed}/${targetRows.length}`, { kind: 'error' });
     }, [refresh, rowsById, selected]);
     const addSelectedToMonitorRoom = useCallback(() => {
         const ids = [...selected].filter(id => !!rowsById.get(id));
@@ -2046,7 +2122,7 @@ function SessionsPage() {
             const body = await r.json().catch(() => ({}));
             if (!r.ok) {
                 if (r.status !== 401)
-                    alert(`${t('sessions.idleCleanupFailed')}: ${body?.error ?? r.status}`);
+                    toast(`${t('sessions.idleCleanupFailed')}: ${body?.error ?? r.status}`, { kind: 'error' });
                 setIdleCleanupStatus('');
                 return;
             }
@@ -2070,13 +2146,13 @@ function SessionsPage() {
                 // while some rows left a residual (a remote session still running, or a
                 // local host subtree not proven terminated) needing manual cleanup.
                 // Kind-neutral: a batch can mix both, and each label already says which.
-                alert(`⚠️ ${idleResiduals.length} session(s) closed locally but left a residual `
-                    + `requiring manual cleanup: ${idleResiduals.join(', ')}`);
+                toast(`⚠️ ${idleResiduals.length} session(s) closed locally but left a residual `
+                    + `requiring manual cleanup: ${idleResiduals.join(', ')}`, { kind: 'warning' });
             }
             refresh();
         }
         catch (e) {
-            alert(`${t('sessions.idleCleanupFailed')}: ${e}`);
+            toast(`${t('sessions.idleCleanupFailed')}: ${e}`, { kind: 'error' });
             setIdleCleanupStatus('');
         }
         finally {
@@ -2090,6 +2166,15 @@ function SessionsPage() {
         setViewMode(next);
         writeStoredSessionsViewMode(windowStorage(), next);
     };
+    // 表格表头排序与筛选条排序下拉共用同一套 state 切换逻辑。
+    const handleSort = useCallback((key) => {
+        if (sortKey === key)
+            setSortDir(dir => (dir === 'asc' ? 'desc' : 'asc'));
+        else {
+            setSortKey(key);
+            setSortDir(key === 'spawnedAt' || key === 'lastMessageAt' ? 'desc' : 'asc');
+        }
+    }, [sortKey]);
     const moveColumn = (id, delta) => {
         setBoardOrder(prev => {
             const from = prev.indexOf(id);
@@ -2165,7 +2250,7 @@ function SessionsPage() {
     // 调试终端：起一个 owner-only 裸 bash（不绑飞书话题），在新标签打开 xterm 页面。
     // 让用户把「复制复现命令」拿到的命令粘进去改参数复现问题，用完关闭即回收。
     const openDebugTerminal = useCallback(async () => {
-        const input = window.prompt(t('sessions.debugTerminalPrompt'), '');
+        const input = await promptText({ title: t('sessions.debugTerminal'), message: t('sessions.debugTerminalPrompt') });
         if (input === null)
             return; // 用户取消
         const workingDir = input.trim();
@@ -2182,7 +2267,7 @@ function SessionsPage() {
             if (!r.ok || body?.ok === false || !body?.url) {
                 tab?.close();
                 if (r.status !== 401)
-                    alert(`${t('sessions.debugTerminalFail')}: ${body?.error ?? r.status}`);
+                    toast(`${t('sessions.debugTerminalFail')}: ${body?.error ?? r.status}`, { kind: 'error' });
                 return;
             }
             if (tab)
@@ -2192,7 +2277,7 @@ function SessionsPage() {
         }
         catch (e) {
             tab?.close();
-            alert(`${t('sessions.debugTerminalFail')}: ${e}`);
+            toast(`${t('sessions.debugTerminalFail')}: ${e}`, { kind: 'error' });
         }
     }, []);
     useEffect(() => {
@@ -2226,13 +2311,13 @@ function SessionsPage() {
                                                 window.localStorage.setItem(KANBAN_TEAM_STORAGE_KEY, next);
                                             }
                                             catch { /* current page only */ }
-                                        } })] })] }), _jsxs("div", { className: "page-heading-actions sessions-page-actions", children: [dashboardShellAllowsWebTerminal() ? (_jsx("button", { type: "button", id: "monitor-room-open", className: "monitor-room-open", onClick: () => { window.location.href = monitorRoomUrl(); }, children: t('sessions.monitorRoom') })) : null, ui.authed ? (_jsx("button", { type: "button", className: "debug-terminal-btn", title: t('sessions.debugTerminalHint'), onClick: () => void openDebugTerminal(), children: t('sessions.debugTerminal') })) : null, ui.authed ? (_jsx(CreateActionButton, { className: "page-primary-action create-session-btn", disabled: createLoading, onClick: () => void openCreateSession(), children: t('sessions.create.button') })) : null] })] }), _jsxs("div", { className: "session-runtime-stats", "aria-live": "polite", children: [_jsxs("span", { children: [_jsx("b", { children: runtimeCounts.logical }), t('sessions.runtime.logical')] }), _jsxs("span", { children: [_jsx("b", { children: runtimeCounts.resident }), t('sessions.runtime.resident')] }), _jsxs("span", { children: [_jsx("b", { children: runtimeCounts.dormant }), t('sessions.runtime.dormant')] })] }), _jsx(SessionsFilters, { chatOptions: chatOptions, filters: filters, setFilters: setFilters, idleCleanup: {
+                                        } })] })] }), _jsxs("div", { className: "page-heading-actions sessions-page-actions", children: [dashboardShellAllowsWebTerminal() ? (_jsx("button", { type: "button", id: "monitor-room-open", className: "monitor-room-open", onClick: () => { window.location.href = monitorRoomUrl(); }, children: t('sessions.monitorRoom') })) : null, ui.authed ? (_jsx("button", { type: "button", className: "debug-terminal-btn", title: t('sessions.debugTerminalHint'), onClick: () => void openDebugTerminal(), children: t('sessions.debugTerminal') })) : null, ui.authed ? (_jsx(CreateActionButton, { className: "page-primary-action create-session-btn", disabled: createLoading, onClick: () => void openCreateSession(), children: t('sessions.create.button') })) : null] })] }), _jsxs("div", { className: "session-runtime-stats", "aria-live": "polite", children: [_jsxs("span", { children: [_jsx("b", { children: runtimeCounts.logical }), t('sessions.runtime.logical')] }), _jsxs("span", { children: [_jsx("b", { children: runtimeCounts.resident }), t('sessions.runtime.resident')] }), _jsxs("span", { children: [_jsx("b", { children: runtimeCounts.dormant }), t('sessions.runtime.dormant')] })] }), _jsx(SessionsFilters, { chatOptions: chatOptions, filters: filters, setFilters: setFilters, sortKey: sortKey, sortDir: sortDir, onSort: handleSort, idleCleanup: {
                     busy: idleCleanupBusy,
                     hours: idleCleanupHours,
                     status: idleCleanupStatus,
                     countForHours: hours => idleCleanupCandidatesFor(hours).length,
                     onRun: runIdleCleanup,
-                } }), _jsx(BulkBar, { selectedCount: selected.size, lockDisabled: !selectedRows.some(row => !row.locked), unlockDisabled: !selectedRows.some(row => !!row.locked), closeProgress: bulkCloseProgress, lockProgress: bulkLockProgress, monitorRoomText: monitorRoomFeedback, onClear: () => setSelected(new Set()), onClose: () => void runBulkClose(), onAddToMonitorRoom: addSelectedToMonitorRoom, onLock: locked => void runBulkLock(locked) }), _jsxs("div", { className: `sessions-view-stage${viewStageAnimKey > 0 ? ' sessions-view-stage-enter' : ''}`, "data-view": viewMode, "data-kanban-group": kanbanGroupBy, children: [_jsx(SessionsTable, { rows: rows, selected: selected, hidden: viewMode !== 'table', sortKey: sortKey, sortDir: sortDir, selectAllChecked: selectAllChecked, selectAllIndeterminate: selectAllIndeterminate, selectAllDisabled: selectableRows.length === 0, hiddenColumns: hiddenColumns, onToggleColumn: (colId) => {
+                } }), _jsx(BulkBar, { selectedCount: selected.size, lockDisabled: !selectedRows.some(row => !row.locked), unlockDisabled: !selectedRows.some(row => !!row.locked), closeProgress: bulkCloseProgress, lockProgress: bulkLockProgress, monitorRoomText: monitorRoomFeedback, onClear: () => setSelected(new Set()), onClose: () => void runBulkClose(), onAddToMonitorRoom: addSelectedToMonitorRoom, onLock: locked => void runBulkLock(locked) }), _jsxs("div", { className: `sessions-view-stage${viewStageAnimKey > 0 ? ' sessions-view-stage-enter' : ''}`, "data-view": viewMode, "data-kanban-group": kanbanGroupBy, children: [!bootstrapped ? _jsx(SessionsSkeleton, {}) : null, _jsx(SessionsTable, { rows: rows, selected: selected, hidden: viewMode !== 'table' || !bootstrapped, sortKey: sortKey, sortDir: sortDir, selectAllChecked: selectAllChecked, selectAllIndeterminate: selectAllIndeterminate, selectAllDisabled: selectableRows.length === 0, hiddenColumns: hiddenColumns, onToggleColumn: (colId) => {
                             const willHide = !hiddenColumns.has(colId);
                             const next = new Set(hiddenColumns);
                             if (willHide)
@@ -2265,37 +2350,35 @@ function SessionsPage() {
                                     next.delete(row.sessionId);
                             }
                             return next;
-                        }), onSort: (key) => {
-                            if (sortKey === key)
-                                setSortDir(sortDir === 'asc' ? 'desc' : 'asc');
-                            else {
-                                setSortKey(key);
-                                setSortDir(key === 'spawnedAt' || key === 'lastMessageAt' ? 'desc' : 'asc');
-                            }
-                        } }), _jsx(BoardView, { rows: boardRows, selected: selected, hidden: viewMode !== 'board', order: boardOrder, animated: boardAnimated, dragColId: dragColId, dragOverCol: dragOverCol, onAnimated: () => setBoardAnimated(true), onMoveColumn: moveColumn, onMoveColumnTo: moveColumnTo, onDragCol: setDragColId, onDragOverCol: setDragOverCol, onToggleSelect: row => setSelected(prev => {
+                        }), onSort: handleSort }), _jsx(BoardView, { rows: boardRows, selected: selected, hidden: viewMode !== 'board' || !bootstrapped, order: boardOrder, animated: boardAnimated, dragColId: dragColId, dragOverCol: dragOverCol, onAnimated: () => setBoardAnimated(true), onMoveColumn: moveColumn, onMoveColumnTo: moveColumnTo, onDragCol: setDragColId, onDragOverCol: setDragOverCol, 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(TopicGroupsView, { rows: rows, relationRows: storeRows, selected: selected, hidden: viewMode !== 'topics', onToggleSelect: row => setSelected(prev => {
+                        }), 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' || !bootstrapped, 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: {
+                        }), 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' || !bootstrapped, children: viewMode === 'kanban' ? (_jsx(SessionsKanbanView, { host: kanbanHost, ...kanbanState, canRestartSession: canRestartSession, getTeamChatIds: teamChatIdsFor, icons: {
                                 details: ICON.details,
                                 feishu: ICON.feishu,
                                 history: ICON.history,
                                 key: ICON.key,
                                 lock: ICON.lock,
                                 restart: ICON.restart,
+                                close: ICON.close,
                                 terminal: ICON.terminal,
                                 unlock: ICON.unlock,
-                            }, lockActionLabel: lockActionLabel, sessionStatusText: sessionStatusText, onDetails: row => setDrawerSessionId(String(row.sessionId)), onHistory: openHistoryModal, onMoveRows: handleKanbanMoves, onNeedTeamBoard: team => { void ensureTeamBoard(team); }, onNeedTeams: () => { void loadKanbanTeams(); }, onOpenTerminal: dashboardShellAllowsWebTerminal() ? openTerminalModal : undefined, onOpenWritableTerminal: dashboardShellAllowsWebTerminal() && shouldOpenWritableTerminal() ? openWritableTerminal : undefined, onRename: (row, title) => { const s = store.sessions.get(String(row.sessionId)); if (s)
+                            }, lockActionLabel: lockActionLabel, sessionStatusText: sessionStatusText, onClose: (row, button) => {
+                                const s = store.sessions.get(String(row.sessionId));
+                                if (s)
+                                    void closeSession(s, button);
+                            }, onDetails: row => setDrawerSessionId(String(row.sessionId)), onHistory: openHistoryModal, onMoveRows: handleKanbanMoves, onNeedTeamBoard: team => { void ensureTeamBoard(team); }, onNeedTeams: () => { void loadKanbanTeams(); }, onOpenTerminal: dashboardShellAllowsWebTerminal() ? openTerminalModal : undefined, onOpenWritableTerminal: dashboardShellAllowsWebTerminal() && shouldOpenWritableTerminal() ? openWritableTerminal : undefined, onRename: (row, title) => { const s = store.sessions.get(String(row.sessionId)); if (s)
                                 void persistRename(s, title); }, onRestart: (row, button) => { const s = store.sessions.get(String(row.sessionId)); if (s)
                                 void restartSession(s, button); }, onTeamScope: scope => setTeamScopeText(scope ? t('sessions.kanban.teamScope', { chats: scope.chats, sessions: scope.sessions }) : ''), onToggleLock: (row, button) => { const s = store.sessions.get(String(row.sessionId)); if (s)
                                 void setSessionLocked(s, !s.locked, button); }, onToggleSelect: row => setSelected(prev => {
@@ -2306,7 +2389,7 @@ function SessionsPage() {
                                 else
                                     next.add(id);
                                 return next;
-                            }), selectedSessionIds: selected })) : null })] }, viewStageAnimKey), _jsx(Drawer, { row: drawerRow, onClose: () => setDrawerSessionId(null), locateSession: locateSession, openHistory: openHistoryModal, resumeSession: resumeSession, restartSession: restartSession, closeSession: closeSession, setSessionLocked: setSessionLocked, startSession: startSession }), _jsx(TerminalModal, { state: termState, onClose: () => setTermState(null), onRename: persistRename }), _jsx(HistoryModal, { state: historyState, onClose: () => setHistoryState(null) }), createDialogEl ? createPortal(_jsx(CreateSessionDialog, { dialog: createDialogEl, state: createState, onClose: closeCreateSession, onSuccess: body => setCreateState(prev => prev ? { ...prev, success: body } : prev) }), createDialogEl) : null] }));
+                            }), selectedSessionIds: selected })) : null })] }, viewStageAnimKey), _jsx(Drawer, { row: drawerRow, onClose: () => setDrawerSessionId(null), locateSession: locateSession, openHistory: openHistoryModal, resumeSession: resumeSession, restartSession: restartSession, closeSession: closeSession, setSessionLocked: setSessionLocked, startSession: startSession, onTakeover: takeoverSession }), _jsx(TerminalModal, { state: termState, onClose: () => setTermState(null), onRename: persistRename }), _jsx(HistoryModal, { state: historyState, onClose: () => setHistoryState(null) }), createDialogEl ? createPortal(_jsx(CreateSessionDialog, { dialog: createDialogEl, state: createState, onClose: closeCreateSession, onSuccess: body => setCreateState(prev => prev ? { ...prev, success: body } : prev) }), createDialogEl) : null] }));
 }
 export function renderSessionsPage(root) {
     return mountReactPage(root, _jsx(SessionsPage, {}));