botmux 2.107.0 → 2.108.0

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

@@ -1,27 +1,1642 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-import { IDLE_CLEANUP_HOUR_OPTIONS } from '../session-cleanup.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import { IDLE_CLEANUP_HOUR_OPTIONS, parseIdleCleanupHours, selectIdleCleanupCandidates, } from '../session-cleanup.js';
 import { mountReactPage } from './react-mount.js';
-import { renderCliFilterGroup, SESSION_STATUS_OPTIONS, sessionStatusText, wireSessionsPage } from './sessions.js';
-import { useT } from './react-hooks.js';
-import { readStoredSessionsShowUnknownChats } from './preferences.js';
+import { useStoreSelector, useT } from './react-hooks.js';
+import { KANBAN_TEAM_STORAGE_KEY, normalizeSessionsViewMode, readStoredBoardOrder, readStoredKanbanGroupBy, readStoredSessionsShowUnknownChats, readStoredSessionsViewMode, writeStoredBoardOrder, writeStoredKanbanGroupBy, writeStoredSessionsShowUnknownChats, writeStoredSessionsViewMode, } from './preferences.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 { 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 { SessionsKanbanView, } from './sessions-kanban.js';
+function idleCleanupHoursLabel(hours) {
+    return hours === 168 ? '7d' : `${hours}H`;
+}
+const idleCleanupThresholdOptions = IDLE_CLEANUP_HOUR_OPTIONS.map(hours => ({
+    value: String(hours),
+    label: idleCleanupHoursLabel(hours),
+}));
+function rawHtml(html) {
+    return { __html: html };
+}
+function windowStorage() {
+    return typeof window === 'undefined' ? undefined : window.localStorage;
+}
+function StatusBadge(props) {
+    const raw = String(props.status ?? 'unknown');
+    return _jsx("span", { className: `status status-${cssToken(raw)}`, children: sessionStatusText(raw) });
+}
+function LockChip(props) {
+    if (!props.row.locked)
+        return null;
+    return _jsx("span", { className: "session-lock-badge", title: t('sessions.locked'), children: t('sessions.locked') });
+}
+function IconActionButton(props) {
+    const className = props.className ?? `card-act${props.kind ? ` ${props.kind}` : ''}`;
+    return (_jsx("button", { type: "button", id: props.id, className: className, "data-action": props.action, title: props.label, "aria-label": props.label, disabled: props.disabled, onClick: (event) => {
+            event.stopPropagation();
+            props.onClick(event.currentTarget);
+        }, dangerouslySetInnerHTML: rawHtml(props.icon) }));
+}
+function TerminalControls(props) {
+    if (!props.url)
+        return null;
+    const readOnly = !shouldOpenWritableTerminal();
+    return (_jsx("span", { className: `term-pill${readOnly ? ' readonly' : ' writable'}`, children: readOnly ? (_jsx("a", { className: "term-btn term-open", href: props.url, target: "_blank", rel: "noopener", title: t('sessions.openTerminal'), "aria-label": t('sessions.openTerminal'), onClick: event => event.stopPropagation(), dangerouslySetInnerHTML: rawHtml(ICON.terminal) })) : (_jsx("button", { type: "button", className: "term-btn term-write", "data-action": "write-link", title: t('sessions.openTerminal'), "aria-label": t('sessions.openTerminal'), onClick: (event) => {
+                event.stopPropagation();
+                void openWriteLink(props.row, event.currentTarget);
+            }, dangerouslySetInnerHTML: rawHtml(ICON.terminal) })) }));
+}
+function ChatScopeLink(props) {
+    const row = props.row;
+    if (row.scope !== 'chat' || !row.feishuChatLink)
+        return null;
+    return (_jsx("a", { className: props.className ?? 'card-act', href: row.feishuChatLink, target: "_blank", rel: "noopener", title: t('sessions.openChat'), "aria-label": t('sessions.openChat'), onClick: event => event.stopPropagation(), dangerouslySetInnerHTML: rawHtml(ICON.feishu) }));
+}
 function SortHeader(props) {
-    return _jsx("th", { "data-sort": props.sort, "data-label": props.label, children: props.label });
+    const active = props.sortKey === props.sort;
+    return (_jsx("th", { "data-sort": props.sort, "data-label": props.label, className: active ? 'sorted' : undefined, "aria-sort": active ? (props.sortDir === 'asc' ? 'ascending' : 'descending') : 'none', onClick: () => props.onSort(props.sort), children: active ? `${props.label} ${props.sortDir === 'asc' ? '▲' : '▼'}` : props.label }));
 }
-// Render-once scaffold: after mount, wireSessionsPage owns this subtree with
-// delegated events and innerHTML updates. Do not add useState/useStoreSelector
-// here until the corresponding controller sections are migrated to React; the
-// route intentionally full-remounts on ui changes so first-frame translations
-// refresh without a partial React render fighting the imperative controller.
-function SessionsPage() {
-    const tr = useT();
-    const hostRef = useRef(null);
+function sortValue(s, key) {
+    if (key === 'spawnedAt' || key === 'lastMessageAt')
+        return Number(s[key] ?? 0);
+    if (key === 'tokenIn')
+        return tokenCount(s.tokenUsage?.in) ?? -1;
+    if (key === 'tokenOut')
+        return tokenCount(s.tokenUsage?.out) ?? -1;
+    if (key === 'adopt')
+        return !!s.adopt;
+    if (key === 'chat')
+        return sessionLocationText(s).toLowerCase();
+    return String(s[key] ?? '').toLowerCase();
+}
+function compareRows(a, b, sortKey, sortDir) {
+    const av = sortValue(a, sortKey);
+    const bv = sortValue(b, sortKey);
+    let cmp = 0;
+    if (typeof av === 'number' && typeof bv === 'number')
+        cmp = av - bv;
+    else if (typeof av === 'boolean' && typeof bv === 'boolean')
+        cmp = Number(av) - Number(bv);
+    else
+        cmp = String(av).localeCompare(String(bv));
+    if (cmp === 0)
+        cmp = Number(a.lastMessageAt ?? 0) - Number(b.lastMessageAt ?? 0);
+    return sortDir === 'asc' ? cmp : -cmp;
+}
+function boardSignalLabel(s) {
+    if (s.agentAttention?.reason)
+        return s.agentAttention.reason;
+    if (s.agentAttention)
+        return t('sessions.board.signalAgent');
+    if (s.pendingRepo)
+        return t('sessions.board.signalRepo');
+    if (s.tuiPromptActive)
+        return t('sessions.board.signalPrompt');
+    if (s.status === 'limited')
+        return t('sessions.board.signalLimited');
+    return '';
+}
+function compareBoardRows(a, b, column) {
+    const av = column === 'needs-you' ? attentionWaitSince(a) : Number(a.lastMessageAt ?? 0);
+    const bv = column === 'needs-you' ? attentionWaitSince(b) : Number(b.lastMessageAt ?? 0);
+    if (av !== bv)
+        return column === 'needs-you' ? av - bv : bv - av;
+    return String(a.title ?? a.sessionId).localeCompare(String(b.title ?? b.sessionId));
+}
+function historyTime(v) {
+    if (v === undefined || v === null || v === '')
+        return '';
+    const n = Number(v);
+    const d = Number.isFinite(n) && n > 0 ? new Date(n) : new Date(String(v));
+    return Number.isNaN(d.getTime()) ? '' : d.toLocaleString();
+}
+function insightDur(ms) {
+    if (ms === undefined)
+        return '-';
+    if (ms < 1000)
+        return `${ms}ms`;
+    if (ms < 60000)
+        return `${(ms / 1000).toFixed(1)}s`;
+    return `${Math.floor(ms / 60000)}m${Math.round((ms % 60000) / 1000)}s`;
+}
+function useDialogVisibility(ref, open) {
     useEffect(() => {
-        if (!hostRef.current)
+        const dialog = ref.current;
+        if (!dialog)
+            return;
+        if (open) {
+            if (!dialog.open) {
+                try {
+                    dialog.showModal();
+                }
+                catch { /* already opening/unsupported */ }
+            }
+        }
+        else if (dialog.open) {
+            dialog.close();
+        }
+    }, [open, ref]);
+}
+function CopyButton(props) {
+    const [copied, setCopied] = useState(false);
+    return (_jsx("button", { type: "button", "data-copy": props.value, onClick: () => {
+            void navigator.clipboard.writeText(props.value);
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 800);
+        }, children: copied ? t('sessions.copied') : t('sessions.copy') }));
+}
+function LocateButton(props) {
+    const [cooldown, setCooldown] = useState(0);
+    const [busy, setBusy] = useState(false);
+    useEffect(() => {
+        if (cooldown <= 0)
+            return undefined;
+        const timer = window.setTimeout(() => setCooldown(cooldown - 1), 1000);
+        return () => window.clearTimeout(timer);
+    }, [cooldown]);
+    return (_jsx("button", { id: "locate-btn", type: "button", disabled: busy || cooldown > 0, onClick: async () => {
+            setBusy(true);
+            const ok = await props.locateSession(props.row);
+            setBusy(false);
+            if (ok)
+                setCooldown(30);
+        }, children: cooldown > 0 ? t('sessions.cooldown', { seconds: cooldown }) : busy ? t('sessions.locating') : t('sessions.locate') }));
+}
+// Icon variant of LocateButton for board/list cards: same React-owned busy+30s
+// cooldown, but renders the pin icon via IconActionButton (no imperative DOM writes).
+function LocateIconButton(props) {
+    const [cooldown, setCooldown] = useState(0);
+    const [busy, setBusy] = useState(false);
+    useEffect(() => {
+        if (cooldown <= 0)
+            return undefined;
+        const timer = window.setTimeout(() => setCooldown(cooldown - 1), 1000);
+        return () => window.clearTimeout(timer);
+    }, [cooldown]);
+    return (_jsx(IconActionButton, { action: "locate", icon: ICON.pin, label: cooldown > 0 ? t('sessions.cooldown', { seconds: cooldown }) : t('sessions.locate'), disabled: busy || cooldown > 0, onClick: async () => {
+            setBusy(true);
+            const ok = await props.onLocate(props.row);
+            setBusy(false);
+            if (ok)
+                setCooldown(30);
+        } }));
+}
+export function CliFilterGroup(props) {
+    const checked = CLI_FILTER_OPTIONS.filter(cli => props.selected.has(cli)).length;
+    const detailsRef = useRef(null);
+    useEffect(() => {
+        const close = () => {
+            if (detailsRef.current?.open)
+                detailsRef.current.open = false;
+        };
+        const onPointerDown = (event) => {
+            const details = detailsRef.current;
+            if (details?.open && !details.contains(event.target))
+                close();
+        };
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape')
+                close();
+        };
+        document.addEventListener('pointerdown', onPointerDown, true);
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('pointerdown', onPointerDown, true);
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, []);
+    return (_jsxs("details", { className: "filter-cli", ref: detailsRef, children: [_jsxs("summary", { children: [t('sessions.cli'), " \u00B7 ", _jsx("b", { id: "cli-filter-count", className: checked === CLI_FILTER_OPTIONS.length ? undefined : 'cli-filter-active', children: checked === CLI_FILTER_OPTIONS.length ? t('common.all') : `${checked}/${CLI_FILTER_OPTIONS.length}` })] }), _jsx("div", { className: "filter-cli-pop", role: "group", "aria-label": t('sessions.cli'), children: CLI_FILTER_OPTIONS.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) {
+    const statusOptions = [
+        { value: '', label: t('sessions.anyStatus') },
+        ...SESSION_STATUS_OPTIONS.map(status => ({ value: status, label: sessionStatusText(status) })),
+    ];
+    const adoptOptions = [
+        { value: '', label: t('sessions.adoptAny') },
+        { 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 => props.setFilters(prev => ({ ...prev, q: event.currentTarget.value })) }), _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'), label: chatLabel, value: props.filters.chat, options: chatOptions, 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: "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 => props.setFilters(prev => ({ ...prev, active: event.currentTarget.checked })) }), _jsx("span", { className: "filter-toggle-label", children: t('sessions.activeOnly') }), _jsx("span", { className: "filter-toggle-switch", "aria-hidden": "true" })] }), _jsx(IdleCleanupBar, { ...props.idleCleanup })] }));
+}
+function BulkBar(props) {
+    const busy = !!props.closeProgress || !!props.lockProgress;
+    const lockText = props.lockProgress?.locked ? `${props.lockProgress.done}/${props.lockProgress.total}` : t('sessions.lockSelected');
+    const unlockText = props.lockProgress && !props.lockProgress.locked ? `${props.lockProgress.done}/${props.lockProgress.total}` : t('sessions.unlockSelected');
+    return (_jsxs("div", { id: "bulk-bar", className: "bulk-bar", hidden: props.selectedCount === 0, children: [_jsx("span", { id: "bulk-count", children: t('sessions.selectedCount', { count: props.selectedCount }) }), _jsx("button", { type: "button", id: "bulk-monitor-room", disabled: busy || props.selectedCount === 0, onClick: props.onAddToMonitorRoom, children: props.monitorRoomText ?? t('sessions.addToMonitorRoom') }), _jsx("button", { type: "button", id: "bulk-lock", disabled: busy || props.lockDisabled, onClick: () => props.onLock(true), children: lockText }), _jsx("button", { type: "button", id: "bulk-unlock", disabled: busy || props.unlockDisabled, onClick: () => props.onLock(false), children: unlockText }), _jsx("button", { type: "button", id: "bulk-close", className: "contrast", disabled: busy, onClick: props.onClose, children: props.closeProgress ? `${props.closeProgress.done}/${props.closeProgress.total}` : t('sessions.closeSelected') }), _jsx("button", { type: "button", id: "bulk-clear", disabled: busy, onClick: props.onClear, children: t('sessions.clearSelection') })] }));
+}
+function IdleCleanupBar(props) {
+    const [open, setOpen] = useState(false);
+    const [draftHours, setDraftHours] = useState(props.hours);
+    const [popStyle, setPopStyle] = useState();
+    const rootRef = useRef(null);
+    const buttonRef = useRef(null);
+    const popRef = useRef(null);
+    const count = props.countForHours(draftHours);
+    useEffect(() => {
+        if (open)
+            setDraftHours(props.hours);
+        else
+            setPopStyle(undefined);
+    }, [open, props.hours]);
+    useLayoutEffect(() => {
+        if (!open)
             return undefined;
-        return wireSessionsPage(hostRef.current);
+        const place = () => {
+            const button = buttonRef.current;
+            const pop = popRef.current;
+            if (!button || !pop)
+                return;
+            const margin = 12;
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const width = Math.max(0, Math.min(292, viewportWidth - margin * 2));
+            const buttonRect = button.getBoundingClientRect();
+            const height = pop.offsetHeight;
+            const maxLeft = Math.max(margin, viewportWidth - width - margin);
+            const centeredLeft = buttonRect.left + buttonRect.width / 2 - width / 2;
+            const left = Math.min(Math.max(centeredLeft, margin), maxLeft);
+            const belowTop = buttonRect.bottom + 8;
+            const aboveTop = buttonRect.top - height - 8;
+            const top = belowTop + height <= viewportHeight - margin || aboveTop < margin
+                ? Math.min(Math.max(belowTop, margin), Math.max(margin, viewportHeight - height - margin))
+                : Math.max(margin, aboveTop);
+            setPopStyle({ left, top, width });
+        };
+        const frame = window.requestAnimationFrame(place);
+        window.addEventListener('resize', place);
+        window.addEventListener('scroll', place, true);
+        return () => {
+            window.cancelAnimationFrame(frame);
+            window.removeEventListener('resize', place);
+            window.removeEventListener('scroll', place, true);
+        };
+    }, [open, props.busy, props.status]);
+    useEffect(() => {
+        if (!open)
+            return undefined;
+        const onPointerDown = (event) => {
+            const target = event.target;
+            if (target instanceof Node && rootRef.current?.contains(target))
+                return;
+            if (target instanceof Node && popRef.current?.contains(target))
+                return;
+            setOpen(false);
+        };
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape')
+                setOpen(false);
+        };
+        document.addEventListener('pointerdown', onPointerDown, true);
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('pointerdown', onPointerDown, true);
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [open]);
+    return (_jsxs("div", { id: "idle-cleanup-bar", className: `idle-cleanup-bar${count === 0 ? ' is-empty' : ''}${open ? ' is-open' : ''}`, ref: rootRef, children: [_jsxs("button", { ref: buttonRef, type: "button", id: "idle-cleanup-run", className: "contrast idle-cleanup-run", "aria-haspopup": "dialog", "aria-expanded": open, disabled: props.busy, onClick: () => setOpen(value => !value), children: [_jsxs("svg", { className: "idle-cleanup-icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("path", { d: "M3.5 6.5h17" }), _jsx("path", { d: "M9 3.5h6" }), _jsx("path", { d: "m6.5 6.5.9 13h9.2l.9-13" }), _jsx("path", { d: "M10 10.5v5M14 10.5v5" })] }), _jsx("span", { children: t('sessions.idleCleanupRun') })] }), open && typeof document !== 'undefined' ? createPortal((_jsxs("div", { ref: popRef, className: "idle-cleanup-pop", role: "dialog", "aria-label": t('sessions.idleCleanupRun'), style: popStyle ?? { visibility: 'hidden' }, children: [_jsxs("div", { className: "idle-cleanup-pop-head", children: [_jsx("span", { className: "idle-cleanup-pop-title", children: t('sessions.idleCleanupRun') }), _jsxs("span", { id: "idle-cleanup-count", className: "idle-cleanup-count", children: [_jsx("span", { className: "idle-cleanup-dot", "aria-hidden": "true" }), t('sessions.idleCleanupCount', { count })] })] }), _jsxs("div", { className: "idle-cleanup-pop-field", children: [_jsx("span", { className: "idle-cleanup-label", children: t('sessions.idleCleanupOlderThan') }), _jsx("div", { id: "idle-cleanup-threshold", className: "idle-cleanup-threshold-options", role: "radiogroup", "aria-label": t('sessions.idleCleanupThreshold'), children: idleCleanupThresholdOptions.map(option => {
+                                    const hours = parseIdleCleanupHours(option.value);
+                                    const active = hours === draftHours;
+                                    return (_jsx("button", { type: "button", className: active ? 'active' : undefined, "aria-pressed": active ? 'true' : 'false', disabled: props.busy, onClick: () => setDraftHours(hours), children: option.label }, option.value));
+                                }) })] }), props.busy && props.status ? (_jsx("span", { id: "idle-cleanup-status", className: "idle-cleanup-status", "aria-live": "polite", children: props.status })) : null, _jsxs("div", { className: "idle-cleanup-pop-actions", children: [_jsx("button", { type: "button", className: "idle-cleanup-cancel", disabled: props.busy, onClick: () => setOpen(false), children: t('sessions.idleCleanupCancel') }), _jsx("button", { type: "button", className: "idle-cleanup-confirm", disabled: props.busy || count === 0, onClick: () => {
+                                    void props.onRun(draftHours).then(() => setOpen(false));
+                                }, children: t('sessions.idleCleanupApply') })] })] })), document.body) : null] }));
+}
+function SessionsTable(props) {
+    const selectAllRef = useRef(null);
+    useLayoutEffect(() => {
+        if (selectAllRef.current)
+            selectAllRef.current.indeterminate = props.selectAllIndeterminate;
+    }, [props.selectAllIndeterminate]);
+    const headers = [
+        ['botName', t('sessions.bot')],
+        ['cliId', t('sessions.cli')],
+        ['status', t('sessions.status')],
+        ['chat', t('sessions.location')],
+        ['tokenIn', t('sessions.tokenIn')],
+        ['tokenOut', t('sessions.tokenOut')],
+        ['title', t('sessions.titleCol')],
+        ['workingDir', t('sessions.workingDir')],
+        ['spawnedAt', t('sessions.created')],
+        ['lastMessageAt', t('sessions.last')],
+        ['adopt', t('sessions.adopt')],
+    ];
+    const labels = {
+        select: t('sessions.selectSession'),
+        botName: t('sessions.bot'),
+        cliId: t('sessions.cli'),
+        status: t('sessions.status'),
+        chat: t('sessions.location'),
+        tokenIn: t('sessions.tokenIn'),
+        tokenOut: t('sessions.tokenOut'),
+        title: t('sessions.titleCol'),
+        workingDir: t('sessions.workingDir'),
+        spawnedAt: t('sessions.created'),
+        lastMessageAt: t('sessions.last'),
+        adopt: t('sessions.adopt'),
+        actions: t('sessions.actions'),
+    };
+    return (_jsxs("table", { id: "sessions-table", hidden: props.hidden, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: _jsx("input", { ref: selectAllRef, type: "checkbox", id: "select-all", title: t('sessions.activeOnly'), checked: props.selectAllChecked, disabled: props.selectAllDisabled, onChange: event => props.onSelectAll(event.currentTarget.checked) }) }), headers.map(([sort, label]) => (_jsx(SortHeader, { sort: sort, label: label, sortKey: props.sortKey, sortDir: props.sortDir, onSort: props.onSort }, sort))), _jsx("th", { children: t('sessions.actions') })] }) }), _jsx("tbody", { children: props.rows.length ? props.rows.map(row => {
+                    const closed = row.status === 'closed';
+                    const id = String(row.sessionId);
+                    return (_jsxs("tr", { "data-id": id, onClick: () => props.onOpen(row), children: [_jsx("td", { className: "sessions-table-select-cell", "data-label": labels.select, onClick: event => event.stopPropagation(), children: _jsx("input", { type: "checkbox", className: "row-select", checked: props.selected.has(id), disabled: closed, onChange: event => props.onSelect(id, event.currentTarget.checked) }) }), _jsx("td", { "data-label": labels.botName, children: botDisplayName(row) }), _jsx("td", { "data-label": labels.cliId, children: _jsx("span", { className: `badge cli-${cssToken(row.cliId)}`, children: row.cliId ?? 'unknown' }) }), _jsxs("td", { "data-label": labels.status, children: [_jsx(StatusBadge, { status: row.status }), _jsx(LockChip, { row: row })] }), _jsx("td", { className: "session-location-cell", "data-label": labels.chat, title: sessionLocationTitle(row), children: sessionLocationText(row) }), _jsx("td", { className: "token-cell", "data-label": labels.tokenIn, children: formatTokenCount(row.tokenUsage?.in) }), _jsx("td", { className: "token-cell", "data-label": labels.tokenOut, children: formatTokenCount(row.tokenUsage?.out) }), _jsx("td", { className: "sessions-table-text-cell", "data-label": labels.title, title: String(row.title ?? ''), children: stripMentionPrefix(row.title ?? '').slice(0, 48) }), _jsx("td", { className: "sessions-table-path-cell", "data-label": labels.workingDir, title: row.workingDir ?? '', children: String(row.workingDir ?? '').slice(-34) }), _jsx("td", { "data-label": labels.spawnedAt, children: relTime(row.spawnedAt) }), _jsx("td", { "data-label": labels.lastMessageAt, children: relTime(row.lastMessageAt) }), _jsx("td", { "data-label": labels.adopt, children: row.adopt ? _jsx("span", { className: "badge", children: "adopt" }) : null }), _jsx("td", { className: "sessions-table-action-cell", "data-label": labels.actions, children: _jsx("button", { className: "open", type: "button", children: t('sessions.details') }) })] }, id));
+                }) : (_jsx("tr", { children: _jsx("td", { colSpan: 13, className: "empty", children: t('sessions.empty') }) })) })] }));
+}
+function BoardCard(props) {
+    const row = props.row;
+    const title = stripMentionPrefix(row.title) || row.sessionId;
+    const botName = botDisplayName(row);
+    const chatTitle = chatDisplayTitle(row);
+    const term = terminalHref(row);
+    const signal = boardSignalLabel(row);
+    const repo = repoBasename(row.workingDir);
+    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 ?? 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) })] })] }));
+}
+function BoardView(props) {
+    useEffect(() => {
+        if (!props.hidden && !props.animated)
+            props.onAnimated();
+    }, [props.animated, props.hidden, props.onAnimated]);
+    const groups = new Map(BOARD_COLUMNS.map(column => [column.id, []]));
+    for (const row of props.rows) {
+        const column = deriveSessionBoardColumn(row);
+        if (column)
+            groups.get(column).push(row);
+    }
+    const columns = props.order
+        .map(id => BOARD_COLUMNS.find(column => column.id === id))
+        .filter((column) => !!column);
+    return (_jsx("div", { id: "sessions-board", className: `sessions-board${props.animated || props.hidden ? '' : ' board-enter'}`, hidden: props.hidden, children: columns.map((column, idx) => {
+            const columnRows = (groups.get(column.id) ?? []).sort((a, b) => compareBoardRows(a, b, column.id));
+            return (_jsxs("section", { className: `session-board-column session-board-${column.id}${props.dragColId === column.id ? ' dragging' : ''}${props.dragOverCol === column.id ? ' drag-over' : ''}`, "data-col": column.id, onDragOver: (event) => {
+                    if (!props.dragColId)
+                        return;
+                    event.preventDefault();
+                    if (event.dataTransfer)
+                        event.dataTransfer.dropEffect = 'move';
+                    if (props.dragColId !== column.id)
+                        props.onDragOverCol(column.id);
+                }, onDrop: (event) => {
+                    if (!props.dragColId)
+                        return;
+                    event.preventDefault();
+                    props.onMoveColumnTo(props.dragColId, column.id);
+                    props.onDragCol(null);
+                    props.onDragOverCol(null);
+                }, children: [_jsxs("header", { draggable: true, title: t('sessions.board.dragHint'), onDragStart: (event) => {
+                            props.onDragCol(column.id);
+                            if (event.dataTransfer) {
+                                event.dataTransfer.effectAllowed = 'move';
+                                event.dataTransfer.setData('text/plain', column.id);
+                            }
+                        }, onDragEnd: () => {
+                            props.onDragCol(null);
+                            props.onDragOverCol(null);
+                        }, 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 HistoryBubble(props) {
+    const m = props.message;
+    const human = m.senderType === 'user';
+    const botSender = m.senderType === 'app' || m.senderType === 'bot';
+    const name = human
+        ? (m.senderName || (props.ownerOpenId && m.senderId === props.ownerOpenId ? t('sessions.history.owner') : t('sessions.history.user')))
+        : (m.senderName || String(m.senderId ?? '').slice(0, 16) || t(botSender ? 'sessions.history.bot' : 'sessions.history.system'));
+    const content = String(m.content ?? '').trim() || `[${m.msgType ?? 'message'}]`;
+    return (_jsxs("div", { className: `history-msg${props.groupStart ? ' group-start' : ' continuation'}`, children: [props.groupStart ? (human ? (m.senderAvatar ? (_jsx("img", { className: "history-avatar-img", src: String(m.senderAvatar), alt: "", decoding: "async", referrerPolicy: "no-referrer" })) : _jsx("span", { className: "history-avatar-user", "aria-hidden": "true", children: String(name).slice(0, 1) })) : _jsx("span", { className: "history-avatar-bot", dangerouslySetInnerHTML: rawHtml(botAvatarHtml({ name, larkAppId: m.senderBotAppId, avatarUrl: m.senderAvatar, size: 'sm' })) })) : _jsx("span", { className: "history-avatar-spacer", "aria-hidden": "true" }), _jsxs("div", { className: "history-msg-main", children: [props.groupStart ? _jsxs("div", { className: "history-msg-meta", children: [_jsx("span", { children: name }), _jsx("time", { children: historyTime(m.createTime) })] }) : null, _jsx("div", { className: "history-bubble", children: content })] })] }));
+}
+function HistoryModal(props) {
+    const dialogRef = useRef(null);
+    useDialogVisibility(dialogRef, !!props.state);
+    const row = props.state ? store.sessions.get(props.state.sessionId) : null;
+    const bodyRef = useRef(null);
+    const loaded = !!props.state && !props.state.loading && !props.state.error && props.state.messages.length > 0;
+    // Open pinned to the newest message (old imperative code did scrollTop = scrollHeight).
+    useEffect(() => {
+        if (!loaded)
+            return;
+        const el = bodyRef.current;
+        if (el)
+            el.scrollTop = el.scrollHeight;
+    }, [loaded, props.state?.sessionId, props.state?.messages.length]);
+    return (_jsx("dialog", { id: "history-modal", className: "history-modal", ref: dialogRef, onClose: props.onClose, onClick: event => { if (event.target === event.currentTarget)
+            props.onClose(); }, children: props.state && row ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "term-modal-head", children: [_jsxs("span", { className: "term-modal-title", children: [_jsx("span", { dangerouslySetInnerHTML: rawHtml(botAvatarHtml({ name: botDisplayName(row), larkAppId: row.larkAppId, size: 'sm' })) }), _jsx("strong", { title: String(row.title ?? ''), children: (stripMentionPrefix(row.title) || row.sessionId).slice(0, 60) }), _jsx("span", { className: "history-scope-tag", children: t('sessions.history.title') })] }), _jsx("span", { className: "term-modal-actions", children: _jsx(IconActionButton, { id: "history-close", icon: ICON.close, label: t('sessions.dismiss'), onClick: props.onClose }) })] }), _jsxs("div", { className: "history-body", ref: bodyRef, children: [props.state.loading ? _jsx(LoadingState, { label: t('sessions.history.loading'), className: "term-modal-loading", compact: true }) : null, !props.state.loading && props.state.error ? (_jsxs("div", { className: "history-error", children: [t('sessions.history.fail'), ": ", props.state.error, props.state.stale ? _jsxs(_Fragment, { children: [_jsx("br", {}), _jsx("span", { children: t('sessions.history.staleHint') })] }) : null] })) : null, !props.state.loading && !props.state.error && props.state.messages.length === 0 ? (_jsx("div", { className: "history-error", children: t('sessions.history.empty') })) : null, !props.state.loading && !props.state.error && props.state.messages.length > 0 ? (_jsx("div", { className: "history-list", children: props.state.messages.map((message, index, messages) => (_jsx(HistoryBubble, { message: message, ownerOpenId: props.state?.ownerOpenId, groupStart: index === 0 || historySenderKey(messages[index - 1]) !== historySenderKey(message) }, message.messageId ?? index))) })) : null] })] })) : null }));
+}
+function TerminalNameEditor(props) {
+    const [editing, setEditing] = useState(false);
+    const [value, setValue] = useState('');
+    const inputRef = useRef(null);
+    const title = stripMentionPrefix(props.row.title) || props.row.sessionId;
+    useLayoutEffect(() => {
+        if (!editing || !inputRef.current)
+            return;
+        const input = inputRef.current;
+        input.focus();
+        input.select();
+        const fit = () => {
+            const cs = getComputedStyle(input);
+            const span = document.createElement('span');
+            span.style.cssText = 'position:absolute;visibility:hidden;white-space:pre';
+            span.style.fontSize = cs.fontSize;
+            span.style.fontFamily = cs.fontFamily;
+            span.style.fontWeight = cs.fontWeight;
+            span.style.letterSpacing = cs.letterSpacing;
+            span.textContent = input.value || ' ';
+            document.body.appendChild(span);
+            const max = Math.round(window.innerWidth * 0.6);
+            input.style.width = `${Math.min(Math.max(span.offsetWidth + 22, 80), max)}px`;
+            span.remove();
+        };
+        fit();
+    }, [editing, value]);
+    const finish = (commit) => {
+        const next = value.trim();
+        setEditing(false);
+        if (commit && next && next !== title)
+            props.onRename(props.row, next);
+    };
+    if (editing) {
+        return (_jsx("input", { ref: inputRef, type: "text", className: "term-modal-name-input", maxLength: 200, value: value, onChange: event => setValue(event.currentTarget.value), onBlur: () => finish(true), onKeyDown: event => {
+                event.stopPropagation();
+                if (event.key === 'Enter') {
+                    event.preventDefault();
+                    finish(true);
+                }
+                else if (event.key === 'Escape') {
+                    event.preventDefault();
+                    finish(false);
+                }
+            } }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("strong", { className: "term-modal-name", title: String(props.row.title ?? title), children: String(title).slice(0, 60) }), _jsx(IconActionButton, { id: "term-modal-edit", icon: ICON.edit, label: t('sessions.kanban.rename'), onClick: () => {
+                    setValue(stripMentionPrefix(props.row.title) || '');
+                    setEditing(true);
+                } })] }));
+}
+function TerminalModal(props) {
+    const dialogRef = useRef(null);
+    useDialogVisibility(dialogRef, !!props.state);
+    const row = props.state ? store.sessions.get(props.state.sessionId) : null;
+    const readonlyUrl = row ? terminalHref(row) : null;
+    const url = props.state?.url ?? readonlyUrl ?? '';
+    const rowCli = row ? String(row.cliId ?? 'unknown') : '';
+    const rowRepo = row ? repoBasename(row.workingDir) : '';
+    return (_jsx("dialog", { id: "term-modal", className: "term-modal", ref: dialogRef, onClose: props.onClose, onClick: event => { if (event.target === event.currentTarget)
+            props.onClose(); }, children: props.state && row ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "term-modal-head", children: [_jsxs("span", { className: "term-modal-title", children: [_jsx("span", { dangerouslySetInnerHTML: rawHtml(botAvatarHtml({ name: botDisplayName(row), larkAppId: row.larkAppId, size: 'sm' })) }), _jsxs("span", { className: "term-modal-title-copy", children: [_jsxs("span", { className: "term-modal-title-main", children: [_jsx(TerminalNameEditor, { row: row, onRename: props.onRename }), _jsx(StatusBadge, { status: row.status })] }), _jsxs("span", { className: "term-modal-subtitle", children: [_jsx("span", { children: botDisplayName(row) }), _jsx("span", { children: rowCli }), rowRepo !== '-' ? _jsx("span", { title: row.workingDir ?? '', children: rowRepo }) : null] })] })] }), _jsxs("span", { className: "term-modal-actions", children: [row.feishuChatLink ? (_jsx("a", { className: "card-act", href: row.feishuChatLink, target: "_blank", rel: "noopener", title: t('sessions.kanban.openFeishu'), "aria-label": t('sessions.kanban.openFeishu'), dangerouslySetInnerHTML: rawHtml(ICON.feishu) })) : null, _jsx("a", { id: "term-modal-tab", className: "card-act", href: url, target: "_blank", rel: "noopener", title: t('sessions.kanban.openTab'), "aria-label": t('sessions.kanban.openTab'), dangerouslySetInnerHTML: rawHtml(ICON.terminal) }), _jsx(IconActionButton, { id: "term-modal-close", icon: ICON.close, label: t('sessions.dismiss'), onClick: props.onClose })] })] }), _jsx("div", { className: "term-modal-body", children: _jsx("div", { className: "term-modal-frame-shell", children: props.state.loading ? _jsx(LoadingState, { label: t('sessions.kanban.terminalLoading'), className: "term-modal-loading", compact: true }) : (_jsx("iframe", { className: "term-modal-frame", src: url, allow: "clipboard-read; clipboard-write" })) }) })] })) : null }));
+}
+function LandPanel(props) {
+    const [state, setState] = useState(null);
+    useEffect(() => setState(null), [props.row.sessionId]);
+    const load = async () => {
+        setState({ loading: true });
+        try {
+            const r = await fetch(`/api/sessions/${encodeURIComponent(props.row.sessionId)}/sandbox-diff`);
+            const d = await r.json().catch(() => ({}));
+            if (!d.ok) {
+                setState({ loading: false, message: _jsxs("p", { children: [t('sessions.landUnavailable'), ": ", String(d.error ?? r.status)] }) });
+                return;
+            }
+            if (d.empty) {
+                setState({ loading: false, message: _jsx("p", { children: t('sessions.landEmpty') }) });
+                return;
+            }
+            const full = String(d.patch ?? '');
+            setState({
+                loading: false,
+                diff: d,
+                patch: full.slice(0, 20000) + (full.length > 20000 ? '\n...(truncated)' : ''),
+            });
+        }
+        catch (e) {
+            setState({ loading: false, message: _jsxs("p", { children: [t('sessions.landUnavailable'), ": ", String(e)] }) });
+        }
+    };
+    const apply = async () => {
+        const rr = await fetch(`/api/sessions/${encodeURIComponent(props.row.sessionId)}/sandbox-land/apply`, { method: 'POST' });
+        const res = await rr.json().catch(() => ({}));
+        setState({
+            loading: false,
+            message: res.ok
+                ? _jsxs("p", { children: [t('sessions.landApplied'), ": ", res.files, " files (+", res.insertions, "/-", res.deletions, ") \u2192 ", _jsx("code", { children: String(res.workingDir ?? '') })] })
+                : _jsxs("p", { children: [t('sessions.landFailed'), ": ", String(res.error ?? rr.status)] }),
+        });
+    };
+    const discard = async () => {
+        await fetch(`/api/sessions/${encodeURIComponent(props.row.sessionId)}/sandbox-land/discard`, { method: 'POST' });
+        setState({ loading: false, message: _jsx("p", { children: t('sessions.landDiscarded') }) });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("button", { id: "land-btn", type: "button", disabled: state?.loading, onClick: () => void load(), children: t('sessions.land') }), _jsxs("div", { id: "land-area", children: [state?.loading ? _jsx(LoadingState, { label: t('sessions.landLoading'), compact: true }) : null, state?.message, state?.diff && state.patch !== undefined ? (_jsxs(_Fragment, { children: [_jsxs("p", { children: [_jsx("b", { children: state.diff.files }), " files (+", state.diff.insertions, "/-", state.diff.deletions, ") \u2192 ", _jsx("code", { children: String(state.diff.workingDir ?? '') })] }), _jsx("pre", { style: { maxHeight: 320, overflow: 'auto', whiteSpace: 'pre-wrap' }, children: state.patch }), _jsxs("div", { className: "actions", children: [_jsx("button", { id: "land-apply", type: "button", className: "primary", onClick: () => void apply(), children: t('sessions.landApply') }), _jsx("button", { id: "land-discard", type: "button", className: "contrast", onClick: () => void discard(), children: t('sessions.landDiscard') })] })] })) : null] })] }));
+}
+function InsightReport(props) {
+    const rep = props.report;
+    if (!rep || rep.status !== 'ok') {
+        const msg = rep?.error?.message ? String(rep.error.message) : String(rep?.status ?? 'error');
+        return _jsxs("p", { children: [t('sessions.insightUnavailable'), ": ", msg] });
+    }
+    const a = rep.agg ?? {};
+    if (!a.totalSpans)
+        return _jsx("p", { children: t('sessions.insightEmpty') });
+    const metaBits = [
+        rep.meta?.asOf ? t('sessions.insightAsOf', { asOf: String(rep.meta.asOf) }) : null,
+        rep.meta?.partial ? t('sessions.insightPartial') : null,
+    ].filter(Boolean);
+    const suggestions = Array.isArray(rep.suggestions) ? rep.suggestions : [];
+    const spans = Array.isArray(rep.spans) ? rep.spans : [];
+    const suggestionIcon = (sev) => (sev === 'bad' ? '!' : sev === 'warn' ? '!' : 'i');
+    const spanIcon = (status) => (status === 'error' ? '!' : status === 'running' ? '...' : 'ok');
+    return (_jsxs(_Fragment, { children: [metaBits.length ? _jsx("p", { style: { fontSize: 12, color: 'var(--muted,#8f959e)' }, children: metaBits.join(' · ') }) : null, _jsx("p", { children: t('sessions.insightMetrics', {
+                    total: String(a.totalSpans ?? 0),
+                    failed: String(a.failedSpans ?? 0),
+                    slow: String(a.slowSpans ?? 0),
+                    rw: (a.readWriteRatio === null || a.readWriteRatio === undefined) ? '-' : String(a.readWriteRatio),
+                    compactions: String(a.compactions ?? 0),
+                }) }), suggestions.length ? (_jsxs("details", { open: true, children: [_jsx("summary", { children: t('sessions.insightSuggestions') }), _jsx("ul", { style: { paddingLeft: 18, margin: '6px 0' }, children: suggestions.map((sg, index) => (_jsxs("li", { children: [suggestionIcon(String(sg.severity ?? '')), " ", _jsx("b", { children: String(sg.title ?? '') }), " - ", String(sg.action ?? ''), Array.isArray(sg.evidence) && sg.evidence.length ? (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx("small", { style: { color: 'var(--muted,#8f959e)' }, children: sg.evidence.join('; ') })] })) : null] }, index))) })] })) : null, spans.length ? (_jsxs("details", { children: [_jsxs("summary", { children: [t('sessions.insightSpans'), " (", spans.length, ")"] }), rep.meta?.capped ? (_jsx("p", { style: { fontSize: 12, color: 'var(--muted,#8f959e)' }, children: t('sessions.insightCapped', { shown: String(rep.meta.spansReturned ?? spans.length), total: String(rep.meta.spansTotal ?? spans.length) }) })) : null, _jsx("div", { style: { maxHeight: 320, overflow: 'auto' }, children: _jsx("table", { style: { width: '100%', fontSize: 12 }, children: _jsx("tbody", { children: [...spans].sort((x, y) => (x.relStartMs ?? 0) - (y.relStartMs ?? 0)).map((sp, index) => {
+                                    const io = [sp.inputSummary, sp.outputSummary].filter(Boolean).map(String).join(' -> ');
+                                    return (_jsxs("tr", { style: sp.status === 'error' ? { color: 'var(--danger,#d33)' } : undefined, children: [_jsx("td", { children: spanIcon(String(sp.status ?? '')) }), _jsx("td", { children: _jsx("code", { children: String(sp.tool ?? '') }) }), _jsx("td", { children: String(sp.phase ?? '') }), _jsx("td", { children: insightDur(sp.durationMs) }), _jsxs("td", { children: ["#", String(sp.turnIndex ?? 0)] }), _jsx("td", { children: io })] }, index));
+                                }) }) }) })] })) : null] }));
+}
+function InsightPanel(props) {
+    const [state, setState] = useState(null);
+    useEffect(() => setState(null), [props.row.sessionId]);
+    if (!ui.authed)
+        return null;
+    const load = async () => {
+        setState({ loading: true });
+        try {
+            const r = await fetch(`/api/sessions/${encodeURIComponent(props.row.sessionId)}/insight?detail=spans`);
+            const d = await r.json().catch(() => ({}));
+            if (!d.ok || !d.report)
+                setState({ loading: false, error: String(d.error ?? r.status) });
+            else
+                setState({ loading: false, report: d.report });
+        }
+        catch (e) {
+            setState({ loading: false, error: String(e) });
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("button", { id: "insight-btn", type: "button", disabled: state?.loading, onClick: () => void load(), children: t('sessions.insight') }), _jsxs("div", { id: "insight-area", children: [state?.loading ? _jsx(LoadingState, { label: t('sessions.insightLoading'), compact: true }) : null, state?.error ? _jsxs("p", { children: [t('sessions.insightUnavailable'), ": ", state.error] }) : null, state?.report ? _jsx(InsightReport, { report: state.report }) : null] })] }));
+}
+function Drawer(props) {
+    const dialogRef = useRef(null);
+    useDialogVisibility(dialogRef, !!props.row);
+    const row = props.row;
+    const terminal = row ? terminalHref(row) : null;
+    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(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'), ":"] }), " ", row.cliId ?? '?'] }), _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 }), 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, row.status !== 'closed' ? (_jsx("button", { id: "lock-btn", type: "button", onClick: event => void props.setSessionLocked(row, !row.locked, event.currentTarget), children: lockActionLabel(row) })) : null, 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(LandPanel, { row: row }), _jsx(InsightPanel, { row: row })] })] })) : null }));
+}
+function CreateSessionDialog(props) {
+    const state = props.state;
+    useEffect(() => {
+        const dialog = props.dialog;
+        return () => {
+            if (dialog.open)
+                dialog.close();
+        };
+    }, [props.dialog]);
+    useEffect(() => {
+        const dialog = props.dialog;
+        if (state) {
+            if (!dialog.open) {
+                try {
+                    dialog.showModal();
+                }
+                catch { /* already open */ }
+            }
+        }
+        else if (dialog.open) {
+            dialog.close();
+        }
+    }, [props.dialog, state]);
+    useEffect(() => {
+        const dialog = props.dialog;
+        const handleClose = () => props.onClose();
+        const handleClick = (event) => {
+            if (event.target === dialog)
+                props.onClose();
+        };
+        dialog.addEventListener('close', handleClose);
+        dialog.addEventListener('click', handleClick);
+        return () => {
+            dialog.removeEventListener('close', handleClose);
+            dialog.removeEventListener('click', handleClick);
+        };
+    }, [props]);
+    const [content, setContent] = useState('');
+    const [selectedBots, setSelectedBots] = useState(new Set());
+    const [mode, setMode] = useState('lead');
+    const [lead, setLead] = useState('');
+    const [column, setColumn] = useState('in_progress');
+    const [name, setName] = useState('');
+    const [bindWorkingDir, setBindWorkingDir] = useState('');
+    const [advancedOpen, setAdvancedOpen] = useState(false);
+    const [submitting, setSubmitting] = useState(false);
+    useEffect(() => {
+        if (!state)
+            return;
+        setContent('');
+        setSelectedBots(new Set());
+        setMode('lead');
+        setLead('');
+        setColumn('in_progress');
+        setName('');
+        setBindWorkingDir('');
+        setAdvancedOpen(false);
+        setSubmitting(false);
+    }, [state]);
+    if (!state)
+        return null;
+    if (state.success) {
+        const body = state.success;
+        const link = typeof body.shareLink === 'string' && body.shareLink ? body.shareLink : '';
+        const failedN = Array.isArray(body.failed) ? body.failed.length : 0;
+        const spawnedN = Array.isArray(body.spawned) ? body.spawned.length : 0;
+        const colNote = body.column === 'backlog' ? t('sessions.create.doneBacklog') : t('sessions.create.doneInProgress');
+        return (_jsxs("article", { className: "cs-card", children: [_jsx("header", { className: "cs-header", children: _jsx("h3", { children: t('sessions.create.doneTitle') }) }), _jsxs("p", { children: [colNote, "\uFF08", spawnedN, "\uFF09"] }), failedN > 0 ? _jsx("p", { className: "cs-warn", children: t('sessions.create.partialFail', { n: String(failedN) }) }) : null, link ? _jsx("p", { children: _jsx("a", { href: link, target: "_blank", rel: "noopener", children: t('sessions.create.openChat') }) }) : null, _jsx("div", { className: "actions", children: _jsx("button", { type: "button", id: "cs-done", className: "primary", onClick: props.onClose, children: t('sessions.create.close') }) })] }));
+    }
+    if (state.loading) {
+        return (_jsxs("article", { className: "cs-card", children: [_jsx("header", { className: "cs-header", children: _jsx("h3", { children: t('sessions.create.title') }) }), _jsx(LoadingState, { label: t('common.loading'), className: "cs-loading", compact: true }), _jsx("div", { className: "actions cs-actions", children: _jsx("button", { type: "button", id: "cs-cancel", onClick: props.onClose, children: t('sessions.create.cancel') }) })] }));
+    }
+    const bots = state.bots;
+    const checkedIds = [...selectedBots];
+    const leadOptions = checkedIds;
+    const nameOf = (id) => bots.find(bot => bot.larkAppId === id)?.botName ?? id;
+    const submit = async (event) => {
+        event.preventDefault();
+        const text = content.trim();
+        if (!text) {
+            alert(t('sessions.create.errContent'));
+            return;
+        }
+        if (checkedIds.length === 0) {
+            alert(t('sessions.create.errNoBot'));
+            return;
+        }
+        const leadLarkAppId = lead || checkedIds[0] || '';
+        if (mode === 'lead' && (!leadLarkAppId || !checkedIds.includes(leadLarkAppId))) {
+            alert(t('sessions.create.errLead'));
+            return;
+        }
+        setSubmitting(true);
+        try {
+            const r = await fetch('/api/sessions/create', {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({
+                    content: text,
+                    larkAppIds: checkedIds,
+                    mode,
+                    column,
+                    leadLarkAppId: mode === 'lead' ? leadLarkAppId : undefined,
+                    name: name.trim() || undefined,
+                    bindWorkingDir: bindWorkingDir.trim() || undefined,
+                }),
+            });
+            const body = await r.json().catch(() => null);
+            if (r.ok && body?.ok)
+                props.onSuccess(body);
+            else if (r.status !== 401)
+                alert(`${t('sessions.create.failed')}: ${body?.error ?? r.status}`);
+        }
+        catch (e) {
+            alert(`${t('sessions.create.failed')}: ${e}`);
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    return (_jsxs("article", { className: "cs-card", children: [_jsx("header", { className: "cs-header", children: _jsx("h3", { children: t('sessions.create.title') }) }), _jsxs("form", { id: "cs-form", onSubmit: submit, children: [_jsxs("fieldset", { className: "cs-content", children: [_jsx("legend", { children: t('sessions.create.content') }), _jsx("textarea", { name: "content", rows: 5, placeholder: t('sessions.create.contentPlaceholder'), required: true, value: content, onChange: event => setContent(event.currentTarget.value) })] }), _jsxs("fieldset", { className: "cs-bots", children: [_jsx("legend", { children: t('sessions.create.bots') }), bots.length ? (_jsx("div", { className: "cs-bot-list", children: bots.map(bot => (_jsxs("label", { className: "cs-bot", children: [_jsx("input", { type: "checkbox", name: "bot", value: bot.larkAppId, checked: selectedBots.has(bot.larkAppId), onChange: event => {
+                                                const checked = event.currentTarget.checked;
+                                                setSelectedBots(prev => {
+                                                    const next = new Set(prev);
+                                                    if (checked)
+                                                        next.add(bot.larkAppId);
+                                                    else
+                                                        next.delete(bot.larkAppId);
+                                                    if (!next.has(lead))
+                                                        setLead(next.values().next().value ?? '');
+                                                    return next;
+                                                });
+                                            } }), " ", _jsx("span", { children: bot.botName })] }, bot.larkAppId))) })) : _jsx("p", { className: "cs-empty", children: t('sessions.create.noBots') })] }), _jsxs("fieldset", { className: "cs-mode", children: [_jsx("legend", { children: t('sessions.create.mode') }), _jsxs("label", { children: [_jsx("input", { type: "radio", name: "mode", value: "lead", checked: mode === 'lead', onChange: () => setMode('lead') }), " ", t('sessions.create.modeLead')] }), _jsxs("label", { children: [_jsx("input", { type: "radio", name: "mode", value: "all", checked: mode === 'all', onChange: () => setMode('all') }), " ", t('sessions.create.modeAll')] }), _jsx("small", { children: t('sessions.create.modeHelp') })] }), _jsxs("fieldset", { className: "cs-lead-row", hidden: mode !== 'lead', children: [_jsx("legend", { children: t('sessions.create.lead') }), _jsx("select", { name: "lead", disabled: leadOptions.length === 0, value: leadOptions.includes(lead) ? lead : '', onChange: event => setLead(event.currentTarget.value), children: leadOptions.length ? leadOptions.map(id => _jsx("option", { value: id, children: nameOf(id) }, id)) : (_jsx("option", { value: "", disabled: true, children: t('sessions.create.leadPickFirst') })) }), _jsx("small", { children: t('sessions.create.leadHelp') })] }), _jsxs("fieldset", { className: "cs-column", children: [_jsx("legend", { children: t('sessions.create.column') }), _jsxs("label", { children: [_jsx("input", { type: "radio", name: "column", value: "in_progress", checked: column === 'in_progress', onChange: () => setColumn('in_progress') }), " ", t('sessions.create.columnInProgress')] }), _jsxs("label", { children: [_jsx("input", { type: "radio", name: "column", value: "backlog", checked: column === 'backlog', onChange: () => setColumn('backlog') }), " ", t('sessions.create.columnBacklog')] }), _jsx("small", { children: t('sessions.create.columnHelp') })] }), _jsxs("fieldset", { className: `cs-advanced${advancedOpen ? ' open' : ''}`, children: [_jsx("legend", { children: _jsx("button", { type: "button", id: "cs-advanced-title", className: "cs-advanced-title", "aria-expanded": advancedOpen, "aria-controls": "cs-advanced-fields", onClick: () => setAdvancedOpen(open => !open), children: t('sessions.create.optionalConfig') }) }), advancedOpen ? (_jsxs("div", { id: "cs-advanced-fields", className: "cs-advanced-fields", children: [_jsxs("label", { className: "cs-advanced-field", children: [_jsx("span", { children: t('sessions.create.groupName') }), _jsx("input", { className: "cs-pill-input", type: "text", name: "name", maxLength: 60, placeholder: t('sessions.create.groupNamePlaceholder'), value: name, onChange: event => setName(event.currentTarget.value) })] }), _jsxs("label", { className: "cs-advanced-field", children: [_jsx("span", { children: t('sessions.create.workingDir') }), _jsx("input", { className: "cs-pill-input", type: "text", name: "bindWorkingDir", placeholder: "e.g. ~/projects/foo", value: bindWorkingDir, onChange: event => setBindWorkingDir(event.currentTarget.value) }), _jsx("small", { children: t('sessions.create.workingDirHelp') })] })] })) : null] }), _jsxs("div", { className: "actions cs-actions", children: [_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') })] })] })] }));
+}
+function SessionsPage() {
+    useT();
+    const storeRows = useStoreSelector(snapshot => [...snapshot.sessions.values()]);
+    const [revision, setRevision] = useState(0);
+    const refresh = useCallback(() => setRevision(v => v + 1), []);
+    const [filters, setFilters] = useState({
+        q: '',
+        status: '',
+        adopt: '',
+        chat: '',
+        showUnknownChats: readStoredSessionsShowUnknownChats(windowStorage()),
+        active: true,
+        cli: new Set(CLI_FILTER_OPTIONS),
+    });
+    const [selected, setSelected] = useState(new Set());
+    const [sortKey, setSortKey] = useState('lastMessageAt');
+    const [sortDir, setSortDir] = useState('desc');
+    const [viewMode, setViewMode] = useState(() => readStoredSessionsViewMode(windowStorage()));
+    const [boardOrder, setBoardOrder] = useState(() => readStoredBoardOrder(windowStorage()));
+    const [boardAnimated, setBoardAnimated] = useState(false);
+    const [dragColId, setDragColId] = useState(null);
+    const [dragOverCol, setDragOverCol] = useState(null);
+    const [kanbanGroupBy, setKanbanGroupBy] = useState(() => readStoredKanbanGroupBy(windowStorage()));
+    const viewStageSignature = `${viewMode}:${viewMode === 'kanban' ? kanbanGroupBy : '-'}`;
+    const viewStageInitialRef = useRef(true);
+    const [viewStageAnimKey, setViewStageAnimKey] = useState(0);
+    const [kanbanTeams, setKanbanTeams] = useState([]);
+    const [kanbanChatBots, setKanbanChatBots] = useState(null);
+    const [kanbanTeamsLoaded, setKanbanTeamsLoaded] = useState(false);
+    const kanbanTeamsLoadingRef = useRef(false);
+    const [kanbanTeamKey, setKanbanTeamKey] = useState(() => {
+        try {
+            return window.localStorage.getItem(KANBAN_TEAM_STORAGE_KEY) ?? '';
+        }
+        catch {
+            return '';
+        }
+    });
+    const [teamBoard, setTeamBoard] = useState({ data: null, key: '', fetchedAt: 0 });
+    const teamBoardLoadingRef = useRef(false);
+    const restartCooldownIds = useRef(new Set());
+    const [teamScopeText, setTeamScopeText] = useState('');
+    const [bulkCloseProgress, setBulkCloseProgress] = useState(null);
+    const [bulkLockProgress, setBulkLockProgress] = useState(null);
+    const [monitorRoomFeedback, setMonitorRoomFeedback] = useState(null);
+    const [idleCleanupBusy, setIdleCleanupBusy] = useState(false);
+    const [idleCleanupHours, setIdleCleanupHours] = useState(24);
+    const [idleCleanupStatus, setIdleCleanupStatus] = useState('');
+    const [drawerSessionId, setDrawerSessionId] = useState(null);
+    const [historyState, setHistoryState] = useState(null);
+    const [termState, setTermState] = useState(null);
+    const [kanbanHost, setKanbanHost] = useState(null);
+    const [createDialogEl, setCreateDialogEl] = useState(null);
+    const [createState, setCreateState] = useState(null);
+    const [createLoading, setCreateLoading] = useState(false);
+    const createRequestRef = useRef(0);
+    useLayoutEffect(() => {
+        if (viewStageInitialRef.current) {
+            viewStageInitialRef.current = false;
+            return;
+        }
+        setViewStageAnimKey(value => value + 1);
+    }, [viewStageSignature]);
+    useEffect(() => {
+        setCreateDialogEl(document.getElementById('create-session-modal'));
+    }, []);
+    useEffect(() => {
+        void loadNameMaps().then(refresh);
+    }, [refresh]);
+    const chatOptions = useMemo(() => {
+        const options = new Map();
+        for (const row of storeRows) {
+            const chatId = String(row.chatId ?? '').trim();
+            if (!chatId)
+                continue;
+            if (!filters.showUnknownChats && isUnknownChatSession(row))
+                continue;
+            const label = sessionLocationText(row);
+            const existing = options.get(chatId);
+            if (!existing || label < existing)
+                options.set(chatId, label);
+        }
+        return [...options.entries()]
+            .sort((a, b) => a[1].localeCompare(b[1]))
+            .map(([value, label]) => ({ value, label }));
+    }, [filters.showUnknownChats, revision, storeRows]);
+    useEffect(() => {
+        if (!filters.chat)
+            return;
+        if (chatOptions.some(option => option.value === filters.chat))
+            return;
+        setFilters(prev => ({ ...prev, chat: '' }));
+    }, [chatOptions, filters.chat]);
+    const rows = useMemo(() => {
+        const q = filters.q.toLowerCase();
+        const cli = [...filters.cli];
+        const cliFilterActive = cli.length > 0 && cli.length < CLI_FILTER_OPTIONS.length;
+        const keepClosed = viewMode === 'kanban';
+        return 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))
+            .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 selectableRows = visibleRows.filter(row => row.status !== 'closed');
+    const selectedRows = [...selected]
+        .map(id => rowsById.get(id))
+        .filter((row) => !!row && row.status !== 'closed');
+    const selectAllChecked = selectableRows.length > 0 && selectableRows.every(row => selected.has(row.sessionId));
+    const selectAllIndeterminate = selectableRows.some(row => selected.has(row.sessionId)) && !selectAllChecked;
+    useEffect(() => {
+        setSelected(prev => {
+            let changed = false;
+            const next = new Set();
+            for (const id of prev) {
+                const row = rowsById.get(id);
+                if (row && row.status !== 'closed')
+                    next.add(id);
+                else
+                    changed = true;
+            }
+            return changed ? next : prev;
+        });
+    }, [rowsById]);
+    const teamChatIdsFor = useCallback((team) => {
+        const teamChats = new Set();
+        if (!team)
+            return teamChats;
+        for (const chatId of team.groupChats)
+            teamChats.add(chatId);
+        if (kanbanChatBots) {
+            for (const [chatId, c] of kanbanChatBots) {
+                if (teamChats.has(chatId))
+                    continue;
+                let hasTeamBot = false;
+                for (const id of team.botIds) {
+                    if (c.botIds.has(id)) {
+                        hasTeamBot = true;
+                        break;
+                    }
+                }
+                if (!hasTeamBot)
+                    continue;
+                for (const n of c.observedNames) {
+                    if (team.botNames.has(n)) {
+                        teamChats.add(chatId);
+                        break;
+                    }
+                }
+            }
+        }
+        return teamChats;
+    }, [kanbanChatBots]);
+    const currentCleanupVisibleRows = useMemo(() => {
+        if (viewMode === 'kanban' && kanbanGroupBy === 'team') {
+            const team = kanbanTeams.find(tm => tm.key === kanbanTeamKey) ?? kanbanTeams[0];
+            const teamChats = teamChatIdsFor(team);
+            return rows.filter(row => teamChats.has(String(row.chatId)));
+        }
+        return rows;
+    }, [kanbanGroupBy, kanbanTeamKey, kanbanTeams, rows, teamChatIdsFor, viewMode]);
+    const idleCleanupCandidatesFor = useCallback((hours) => selectIdleCleanupCandidates(currentCleanupVisibleRows, hours), [currentCleanupVisibleRows]);
+    const loadKanbanTeams = useCallback(async () => {
+        if (kanbanTeamsLoadingRef.current || kanbanTeamsLoaded)
+            return;
+        kanbanTeamsLoadingRef.current = true;
+        try {
+            const [hosted, remote, groups] = await Promise.all([
+                fetch('/api/team/hosted').then(r => r.json()).catch(() => null),
+                fetch('/api/team/remote-roster').then(r => r.json()).catch(() => null),
+                fetch('/api/groups').then(r => r.json()).catch(() => null),
+            ]);
+            if (Array.isArray(groups?.chats)) {
+                setKanbanChatBots(new Map(groups.chats.map((c) => [
+                    String(c.chatId),
+                    {
+                        botIds: new Set((c.memberBots ?? []).filter((mb) => mb.inChat).map((mb) => String(mb.larkAppId))),
+                        observedNames: new Set((c.observedBotNames ?? []).map((n) => String(n))),
+                    },
+                ])));
+            }
+            const rosterBots = (bots) => ({
+                ids: new Set(bots.map((b) => String(b.larkAppId))),
+                names: new Set(bots.map((b) => String(b.name ?? '')).filter(Boolean)),
+            });
+            const teams = [];
+            for (const tm of hosted?.teams ?? []) {
+                const { ids, names } = rosterBots(tm.bots ?? []);
+                teams.push({
+                    key: `local:${tm.teamId}`,
+                    label: tm.isDefault ? t('team.myHostedTeam') : String(tm.name ?? tm.teamId),
+                    botIds: ids,
+                    botNames: names,
+                    groupChats: new Set((tm.groupChatIds ?? []).map((c) => String(c))),
+                });
+            }
+            for (const m of remote?.memberships ?? []) {
+                const { ids, names } = rosterBots(m.roster?.bots ?? []);
+                teams.push({
+                    key: `${m.hubUrl}::${m.teamId}`,
+                    label: String(m.teamName ?? m.teamId ?? m.hubUrl),
+                    botIds: ids,
+                    botNames: names,
+                    groupChats: new Set(),
+                });
+            }
+            setKanbanTeams(teams);
+            setKanbanTeamKey(prev => (teams.length && !teams.some(tm => tm.key === prev)) ? teams[0].key : prev);
+        }
+        finally {
+            setKanbanTeamsLoaded(true);
+            kanbanTeamsLoadingRef.current = false;
+        }
+    }, [kanbanTeamsLoaded]);
+    const persistTeamBoardMove = useCallback(async (teamKey, sessionId, column, position, prevEntry) => {
+        try {
+            const isLocal = teamKey.startsWith('local:');
+            const r = isLocal
+                ? await fetch(`/api/team/board/local/${encodeURIComponent(teamKey.slice('local:'.length))}/move`, {
+                    method: 'POST',
+                    headers: { 'content-type': 'application/json' },
+                    body: JSON.stringify({ sessionId, column, position }),
+                })
+                : await fetch('/api/team/remote-board-move', {
+                    method: 'POST',
+                    headers: { 'content-type': 'application/json' },
+                    body: JSON.stringify({ key: teamKey, sessionId, column, position }),
+                });
+            const body = await r.json().catch(() => ({}));
+            if (!r.ok || body?.ok === false) {
+                setTeamBoard(prev => {
+                    if (!prev.data || prev.key !== teamKey)
+                        return prev;
+                    const board = { ...prev.data.board };
+                    if (prevEntry)
+                        board[sessionId] = prevEntry;
+                    else
+                        delete board[sessionId];
+                    return { ...prev, data: { ...prev.data, board } };
+                });
+                if (r.status !== 401)
+                    alert(`${t('sessions.kanban.moveFail')}: ${body?.error ?? r.status}`);
+            }
+        }
+        catch (e) {
+            setTeamBoard(prev => {
+                if (!prev.data || prev.key !== teamKey)
+                    return prev;
+                const board = { ...prev.data.board };
+                if (prevEntry)
+                    board[sessionId] = prevEntry;
+                else
+                    delete board[sessionId];
+                return { ...prev, data: { ...prev.data, board } };
+            });
+            alert(`${t('sessions.kanban.moveFail')}: ${e}`);
+        }
+    }, []);
+    const ensureTeamBoard = useCallback(async (team) => {
+        const fresh = teamBoard.key === team.key && Date.now() - teamBoard.fetchedAt < 30_000;
+        if (teamBoardLoadingRef.current || fresh)
+            return;
+        teamBoardLoadingRef.current = true;
+        try {
+            const isLocal = team.key.startsWith('local:');
+            const u = isLocal
+                ? `/api/team/board/local/${encodeURIComponent(team.key.slice('local:'.length))}`
+                : `/api/team/remote-board?key=${encodeURIComponent(team.key)}`;
+            const r = await fetch(u);
+            const body = await r.json().catch(() => ({}));
+            if (!r.ok || body?.ok === false)
+                return;
+            const myDeploymentId = typeof body.deploymentId === 'string' ? body.deploymentId : null;
+            const remoteRows = [];
+            for (const rep of Array.isArray(body.reports) ? body.reports : []) {
+                if (myDeploymentId && rep.deploymentId === myDeploymentId)
+                    continue;
+                for (const s of Array.isArray(rep.sessions) ? rep.sessions : []) {
+                    remoteRows.push({ ...s, remoteDeployment: rep.deploymentName || rep.deploymentId });
+                }
+            }
+            setTeamBoard({
+                key: team.key,
+                fetchedAt: Date.now(),
+                data: {
+                    board: body.board && typeof body.board === 'object' ? body.board : {},
+                    remoteRows,
+                },
+            });
+        }
+        finally {
+            teamBoardLoadingRef.current = false;
+        }
+    }, [teamBoard.fetchedAt, teamBoard.key]);
+    useEffect(() => {
+        if (viewMode === 'kanban' && kanbanGroupBy === 'team' && !kanbanTeamsLoaded)
+            void loadKanbanTeams();
+    }, [kanbanGroupBy, kanbanTeamsLoaded, loadKanbanTeams, viewMode]);
+    useEffect(() => {
+        const timer = window.setInterval(() => {
+            if (viewMode === 'kanban' && kanbanGroupBy === 'team') {
+                setTeamBoard(prev => ({ ...prev, fetchedAt: 0 }));
+                refresh();
+            }
+        }, 30_000);
+        return () => window.clearInterval(timer);
+    }, [kanbanGroupBy, refresh, viewMode]);
+    const persistBoardMove = useCallback(async (row, column, position, prev) => {
+        try {
+            const r = await fetch(`/api/sessions/${encodeURIComponent(row.sessionId)}/board`, {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ column, position }),
+            });
+            const body = await r.json().catch(() => ({}));
+            if (!r.ok || body?.ok === false) {
+                row.kanbanColumn = prev.column;
+                row.kanbanPosition = prev.position;
+                refresh();
+                if (r.status !== 401)
+                    alert(`${t('sessions.kanban.moveFail')}: ${body?.error ?? r.status}`);
+            }
+        }
+        catch (e) {
+            row.kanbanColumn = prev.column;
+            row.kanbanPosition = prev.position;
+            refresh();
+            alert(`${t('sessions.kanban.moveFail')}: ${e}`);
+        }
+    }, [refresh]);
+    const handleKanbanMoves = useCallback((moves) => {
+        let changed = false;
+        for (const move of moves) {
+            const sessionId = String(move.row.sessionId);
+            if (!sessionId)
+                continue;
+            if (move.row.status === 'closed' && move.column !== 'done')
+                continue;
+            if (kanbanGroupBy === 'team') {
+                const team = kanbanTeams.find(tm => tm.key === kanbanTeamKey) ?? kanbanTeams[0];
+                if (!team)
+                    continue;
+                // Compute the prior slot from committed state and persist OUTSIDE the updater —
+                // updaters must be pure (a POST inside would double-fire under StrictMode).
+                const priorBoard = (teamBoard.key === team.key && teamBoard.data) ? teamBoard.data.board : {};
+                const previous = priorBoard[sessionId];
+                setTeamBoard(prev => {
+                    const base = (prev.key === team.key && prev.data) ? prev.data : { board: {}, remoteRows: prev.data?.remoteRows ?? [] };
+                    const board = { ...base.board, [sessionId]: { column: move.column, position: move.position } };
+                    return { ...prev, key: team.key, data: { ...base, board } };
+                });
+                void persistTeamBoardMove(team.key, sessionId, move.column, move.position, previous);
+                changed = true;
+                continue;
+            }
+            const row = store.sessions.get(sessionId);
+            if (!row)
+                continue;
+            const prev = { column: row.kanbanColumn, position: row.kanbanPosition };
+            row.kanbanColumn = move.column;
+            row.kanbanPosition = move.position;
+            void persistBoardMove(row, move.column, move.position, prev);
+            changed = true;
+        }
+        if (changed)
+            refresh();
+    }, [kanbanGroupBy, kanbanTeamKey, kanbanTeams, teamBoard, persistBoardMove, persistTeamBoardMove, refresh]);
+    const persistRename = useCallback(async (row, title) => {
+        const prevTitle = row.title;
+        row.title = title;
+        refresh();
+        try {
+            const r = await fetch(`/api/sessions/${encodeURIComponent(row.sessionId)}/rename`, {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ title }),
+            });
+            const body = await r.json().catch(() => ({}));
+            if (!r.ok || body?.ok === false) {
+                row.title = prevTitle;
+                refresh();
+                if (r.status !== 401)
+                    alert(`${t('sessions.kanban.renameFail')}: ${body?.error ?? r.status}`);
+            }
+        }
+        catch (e) {
+            row.title = prevTitle;
+            refresh();
+            alert(`${t('sessions.kanban.renameFail')}: ${e}`);
+        }
+    }, [refresh]);
+    const locateSession = useCallback(async (row) => {
+        // Busy/cooldown UI is owned by the React-state LocateButton / LocateIconButton;
+        // do NOT imperatively mutate the button here — the board's locate button renders
+        // its icon via dangerouslySetInnerHTML and a textContent write permanently wipes it.
+        try {
+            const r = await fetch(`/api/sessions/${encodeURIComponent(row.sessionId)}/locate`, { method: 'POST' });
+            const body = await r.json();
+            if (body.ok)
+                return true;
+            alert(`Locate failed: ${body.error ?? r.status}`);
+            return false;
+        }
+        catch (e) {
+            alert(`Locate error: ${e}`);
+            return false;
+        }
+    }, []);
+    const closeSession = useCallback(async (row, closeBtn) => {
+        if (!confirm(t('sessions.closeConfirm')))
+            return false;
+        if (closeBtn)
+            closeBtn.disabled = true;
+        try {
+            const r = await fetch(`/api/sessions/${encodeURIComponent(row.sessionId)}/close`, { method: 'POST' });
+            const body = await r.json().catch(() => ({}));
+            if (!r.ok || body?.ok === false) {
+                if (r.status !== 401)
+                    alert(`Close failed: ${body?.error ?? r.status}`);
+                return false;
+            }
+            setSelected(prev => {
+                const next = new Set(prev);
+                next.delete(row.sessionId);
+                return next;
+            });
+            refresh();
+            return true;
+        }
+        catch (e) {
+            alert(`Close error: ${e}`);
+            return false;
+        }
+        finally {
+            if (closeBtn)
+                closeBtn.disabled = false;
+        }
+    }, [refresh]);
+    const setSessionLocked = useCallback(async (row, locked, btn) => {
+        const prev = !!row.locked;
+        if (prev === locked)
+            return true;
+        row.locked = locked;
+        refresh();
+        if (btn)
+            btn.disabled = true;
+        try {
+            const r = await fetch(`/api/sessions/${encodeURIComponent(row.sessionId)}/lock`, {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ locked }),
+            });
+            const body = await r.json().catch(() => ({}));
+            if (!r.ok || body?.ok === false) {
+                row.locked = prev;
+                refresh();
+                if (r.status !== 401)
+                    alert(`${t('sessions.lockFailed')}: ${body?.error ?? r.status}`);
+                return false;
+            }
+            row.locked = !!body.locked;
+            refresh();
+            return true;
+        }
+        catch (e) {
+            row.locked = prev;
+            refresh();
+            alert(`${t('sessions.lockFailed')}: ${e}`);
+            return false;
+        }
+        finally {
+            if (btn)
+                btn.disabled = false;
+        }
+    }, [refresh]);
+    const restartSession = useCallback(async (row, restartBtn) => {
+        if (restartCooldownIds.current.has(row.sessionId))
+            return false;
+        if (!confirm(restartConfirmMessage(row)))
+            return false;
+        if (restartBtn)
+            restartBtn.disabled = true;
+        try {
+            const r = await fetch(`/api/sessions/${encodeURIComponent(row.sessionId)}/restart`, { method: 'POST' });
+            const body = await r.json().catch(() => ({}));
+            if (!r.ok || body?.ok === false) {
+                if (r.status !== 401)
+                    alert(`${t('sessions.restartFailed')}: ${body?.error ?? r.status}`);
+                return false;
+            }
+            restartCooldownIds.current.add(row.sessionId);
+            window.setTimeout(() => restartCooldownIds.current.delete(row.sessionId), 5000);
+            return true;
+        }
+        catch (e) {
+            alert(`${t('sessions.restartFailed')}: ${e}`);
+            return false;
+        }
+        finally {
+            if (restartBtn)
+                restartBtn.disabled = false;
+        }
+    }, []);
+    const resumeSession = useCallback(async (row, button) => {
+        if (button)
+            button.disabled = true;
+        try {
+            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}`);
+                return false;
+            }
+            return true;
+        }
+        catch (e) {
+            alert(`${t('sessions.resumeFailed')}: ${e}`);
+            return false;
+        }
+        finally {
+            if (button)
+                button.disabled = false;
+        }
+    }, []);
+    const startSession = useCallback(async (row, button) => {
+        if (button)
+            button.disabled = true;
+        try {
+            const r = await fetch(`/api/sessions/${encodeURIComponent(row.sessionId)}/start`, { method: 'POST' });
+            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}`);
+                return false;
+            }
+            return true;
+        }
+        catch (e) {
+            alert(`${t('sessions.create.startFailed')}: ${e}`);
+            return false;
+        }
+        finally {
+            if (button)
+                button.disabled = false;
+        }
+    }, []);
+    const openHistoryModal = useCallback((row) => {
+        setHistoryState({ sessionId: row.sessionId, loading: true, messages: [] });
+        void (async () => {
+            try {
+                const r = await fetch(`/api/sessions/${encodeURIComponent(row.sessionId)}/history?limit=80`);
+                const body = await r.json().catch(() => ({}));
+                if (!r.ok || body?.ok === false) {
+                    const errCode = String(body?.error ?? r.status);
+                    const stale = errCode === 'not_found_yet' || errCode === 'not_found';
+                    setHistoryState(prev => prev?.sessionId === row.sessionId ? { sessionId: row.sessionId, loading: false, messages: [], error: errCode, stale } : prev);
+                    return;
+                }
+                const messages = Array.isArray(body.messages) ? body.messages : [];
+                setHistoryState(prev => prev?.sessionId === row.sessionId ? { sessionId: row.sessionId, loading: false, messages, ownerOpenId: body.ownerOpenId } : prev);
+            }
+            catch (e) {
+                setHistoryState(prev => prev?.sessionId === row.sessionId ? { sessionId: row.sessionId, loading: false, messages: [], error: String(e) } : prev);
+            }
+        })();
+    }, []);
+    const openTerminalModal = useCallback((row) => {
+        const readonlyUrl = terminalHref(row);
+        if (!readonlyUrl) {
+            setDrawerSessionId(row.sessionId);
+            return;
+        }
+        setTermState({ sessionId: row.sessionId, url: readonlyUrl, loading: true });
+        void (async () => {
+            let url = readonlyUrl;
+            if (shouldOpenWritableTerminal()) {
+                try {
+                    const r = await fetch(`/api/sessions/${encodeURIComponent(row.sessionId)}/write-link`);
+                    const body = await r.json().catch(() => ({}));
+                    if (r.ok && body?.ok !== false && body?.url)
+                        url = body.url;
+                }
+                catch {
+                    // fallback to read-only URL
+                }
+            }
+            setTermState(prev => prev?.sessionId === row.sessionId ? { sessionId: row.sessionId, url, loading: false } : prev);
+        })();
+    }, []);
+    const runBulkClose = useCallback(async () => {
+        const ids = [...selected];
+        if (ids.length === 0)
+            return;
+        if (!confirm(t('sessions.closeBulkConfirm', { count: ids.length })))
+            return;
+        setBulkCloseProgress({ done: 0, total: ids.length });
+        let done = 0;
+        let failed = 0;
+        const queue = [...ids];
+        async function worker() {
+            while (queue.length) {
+                const sid = queue.shift();
+                try {
+                    const r = await fetch(`/api/sessions/${encodeURIComponent(sid)}/close`, { method: 'POST' });
+                    const body = await r.json().catch(() => ({}));
+                    if (!r.ok || body?.ok === false)
+                        failed += 1;
+                }
+                catch {
+                    failed += 1;
+                }
+                finally {
+                    done += 1;
+                    setBulkCloseProgress({ done, total: ids.length });
+                }
+            }
+        }
+        await Promise.all(Array.from({ length: Math.min(6, ids.length) }, () => worker()));
+        setBulkCloseProgress(null);
+        setSelected(new Set());
+        refresh();
+        if (failed > 0)
+            alert(`Failed: ${failed}/${ids.length}`);
+    }, [refresh, selected]);
+    const runBulkLock = useCallback(async (locked) => {
+        const targetRows = [...selected]
+            .map(id => rowsById.get(id))
+            .filter((row) => !!row && row.status !== 'closed' && !!row.locked !== locked);
+        if (targetRows.length === 0)
+            return;
+        setBulkLockProgress({ locked, done: 0, total: targetRows.length });
+        let done = 0;
+        let failed = 0;
+        const queue = [...targetRows];
+        async function worker() {
+            while (queue.length) {
+                const row = queue.shift();
+                const prev = !!row.locked;
+                try {
+                    const r = await fetch(`/api/sessions/${encodeURIComponent(row.sessionId)}/lock`, {
+                        method: 'POST',
+                        headers: { 'content-type': 'application/json' },
+                        body: JSON.stringify({ locked }),
+                    });
+                    const body = await r.json().catch(() => ({}));
+                    if (!r.ok || body?.ok === false) {
+                        failed += 1;
+                        row.locked = prev;
+                    }
+                    else {
+                        row.locked = !!body.locked;
+                    }
+                }
+                catch {
+                    failed += 1;
+                    row.locked = prev;
+                }
+                finally {
+                    done += 1;
+                    setBulkLockProgress({ locked, done, total: targetRows.length });
+                }
+            }
+        }
+        await Promise.all(Array.from({ length: Math.min(6, targetRows.length) }, () => worker()));
+        setBulkLockProgress(null);
+        refresh();
+        if (failed > 0)
+            alert(`${t('sessions.lockFailed')}: ${failed}/${targetRows.length}`);
+    }, [refresh, rowsById, selected]);
+    const addSelectedToMonitorRoom = useCallback(() => {
+        const ids = [...selected].filter(id => !!rowsById.get(id));
+        if (ids.length === 0)
+            return;
+        const result = addMonitorRoomSessionIds(ids);
+        setMonitorRoomFeedback(t('sessions.monitorRoomAdded', { added: result.added, total: result.total }));
+        window.setTimeout(() => setMonitorRoomFeedback(null), 1800);
+    }, [rowsById, selected]);
+    const runIdleCleanup = useCallback(async (hours) => {
+        const nextHours = parseIdleCleanupHours(hours);
+        if (!nextHours)
+            return;
+        const candidates = idleCleanupCandidatesFor(nextHours);
+        if (candidates.length === 0)
+            return;
+        setIdleCleanupHours(nextHours);
+        setIdleCleanupBusy(true);
+        setIdleCleanupStatus(t('sessions.idleCleanupRunning'));
+        try {
+            const r = await fetch('/api/sessions/cleanup-idle', {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ olderThanHours: nextHours, sessionIds: candidates.map(c => c.sessionId) }),
+            });
+            const body = await r.json().catch(() => ({}));
+            if (!r.ok) {
+                if (r.status !== 401)
+                    alert(`${t('sessions.idleCleanupFailed')}: ${body?.error ?? r.status}`);
+                setIdleCleanupStatus('');
+                return;
+            }
+            setSelected(prev => {
+                const next = new Set(prev);
+                for (const item of body?.results ?? []) {
+                    if (item?.ok && item?.sessionId)
+                        next.delete(String(item.sessionId));
+                }
+                return next;
+            });
+            setIdleCleanupStatus(t('sessions.idleCleanupDone', {
+                closed: Number(body?.closed ?? 0),
+                failed: Number(body?.failed ?? 0),
+            }));
+            refresh();
+        }
+        catch (e) {
+            alert(`${t('sessions.idleCleanupFailed')}: ${e}`);
+            setIdleCleanupStatus('');
+        }
+        finally {
+            setIdleCleanupBusy(false);
+        }
+    }, [idleCleanupCandidatesFor, refresh]);
+    const setView = (nextRaw) => {
+        const next = normalizeSessionsViewMode(nextRaw) ?? 'board';
+        if (next === viewMode)
+            return;
+        setViewMode(next);
+        writeStoredSessionsViewMode(windowStorage(), next);
+    };
+    const moveColumn = (id, delta) => {
+        setBoardOrder(prev => {
+            const from = prev.indexOf(id);
+            const to = from + delta;
+            if (from < 0 || to < 0 || to >= prev.length)
+                return prev;
+            const next = [...prev];
+            next.splice(from, 1);
+            next.splice(to, 0, id);
+            writeStoredBoardOrder(windowStorage(), next);
+            return next;
+        });
+    };
+    const moveColumnTo = (id, targetId) => {
+        if (id === targetId)
+            return;
+        setBoardOrder(prev => {
+            const from = prev.indexOf(id);
+            const to = prev.indexOf(targetId);
+            if (from < 0 || to < 0)
+                return prev;
+            const next = [...prev];
+            next.splice(from, 1);
+            next.splice(to, 0, id);
+            writeStoredBoardOrder(windowStorage(), next);
+            return next;
+        });
+    };
+    const kanbanState = useMemo(() => ({
+        rows,
+        groupBy: kanbanGroupBy,
+        teams: kanbanTeams,
+        teamsLoaded: kanbanTeamsLoaded,
+        teamKey: kanbanTeamKey,
+        teamBoardData: teamBoard.data,
+        teamBoardKey: teamBoard.key,
+    }), [kanbanGroupBy, kanbanTeamKey, kanbanTeams, kanbanTeamsLoaded, rows, teamBoard.data, teamBoard.key]);
+    const drawerRow = drawerSessionId ? rowsById.get(drawerSessionId) ?? null : null;
+    const kanbanTeamOptions = useMemo(() => {
+        if (!kanbanTeamsLoaded)
+            return [{ value: '__loading', label: t('sessions.kanban.teamLoading') }];
+        if (!kanbanTeams.length)
+            return [{ value: '', label: t('sessions.kanban.noTeam') }];
+        return kanbanTeams.map(team => ({ value: team.key, label: team.label }));
+    }, [kanbanTeams, kanbanTeamsLoaded]);
+    const kanbanTeamDisabled = !kanbanTeamsLoaded || kanbanTeams.length === 0;
+    const kanbanTeamValue = kanbanTeams.some(team => team.key === kanbanTeamKey)
+        ? kanbanTeamKey
+        : (kanbanTeamOptions[0]?.value ?? '');
+    const kanbanTeamLabel = kanbanTeamOptions.find(option => option.value === kanbanTeamValue)?.label
+        ?? t('sessions.kanban.groupTeam');
+    const closeCreateSession = useCallback(() => {
+        createRequestRef.current += 1;
+        setCreateLoading(false);
+        setCreateState(null);
     }, []);
-    return (_jsxs("section", { className: "page", ref: hostRef, children: [_jsxs("div", { className: "page-heading", children: [_jsxs("div", { children: [_jsx("p", { className: "eyebrow", children: tr('nav.sessions') }), _jsx("h1", { children: tr('sessions.title') }), _jsx("p", { children: tr('sessions.subtitle') })] }), _jsxs("div", { className: "sessions-view-controls", children: [_jsx("span", { id: "kanban-team-stats", className: "kanban-team-stats", hidden: true }), _jsx("select", { id: "kanban-team", className: "kanban-team-select", "aria-label": tr('sessions.kanban.groupTeam'), hidden: true }), _jsxs("div", { className: "segmented kanban-groupby", id: "kanban-groupby", role: "group", "aria-label": tr('sessions.kanban.groupBy'), hidden: true, children: [_jsx("button", { type: "button", "data-groupby": "flow", children: tr('sessions.kanban.groupFlow') }), _jsx("button", { type: "button", "data-groupby": "team", children: tr('sessions.kanban.groupTeam') }), _jsx("button", { type: "button", "data-groupby": "bot", children: tr('sessions.kanban.groupBot') })] }), _jsxs("div", { className: "segmented sessions-view-toggle", role: "group", "aria-label": tr('sessions.viewMode'), children: [_jsx("button", { type: "button", "data-view": "kanban", children: tr('sessions.viewKanban') }), _jsx("button", { type: "button", "data-view": "board", children: tr('sessions.viewBoard') }), _jsx("button", { type: "button", "data-view": "table", children: tr('sessions.viewTable') })] }), _jsx("button", { type: "button", id: "monitor-room-open", className: "monitor-room-open", children: tr('sessions.monitorRoom') })] })] }), _jsxs("form", { id: "filters", className: "filters sessions-filters", children: [_jsx("input", { type: "search", name: "q", placeholder: tr('sessions.search') }), _jsxs("select", { name: "status", children: [_jsx("option", { value: "", children: tr('sessions.anyStatus') }), SESSION_STATUS_OPTIONS.map(status => (_jsx("option", { value: status, children: sessionStatusText(status) }, status)))] }), _jsxs("select", { name: "adopt", children: [_jsx("option", { value: "", children: tr('sessions.adoptAny') }), _jsx("option", { value: "yes", children: tr('sessions.adoptYes') }), _jsx("option", { value: "no", children: tr('sessions.adoptNo') })] }), _jsx("select", { name: "chat", "aria-label": tr('sessions.location'), children: _jsx("option", { value: "", children: tr('sessions.chatAny') }) }), _jsx("span", { style: { display: 'contents' }, dangerouslySetInnerHTML: { __html: renderCliFilterGroup() } }), _jsxs("label", { className: "filter-toggle", children: [_jsx("input", { type: "checkbox", name: "showUnknownChats", defaultChecked: readStoredSessionsShowUnknownChats(typeof window === 'undefined' ? undefined : window.localStorage) }), " ", _jsx("span", { children: tr('sessions.showUnknownChats') })] }), _jsxs("label", { className: "filter-toggle", children: [_jsx("input", { type: "checkbox", name: "active", defaultChecked: true }), " ", _jsx("span", { children: tr('sessions.activeOnly') })] })] }), _jsxs("div", { id: "idle-cleanup-bar", className: "idle-cleanup-bar", children: [_jsxs("div", { className: "idle-cleanup-summary", children: [_jsx("span", { className: "idle-cleanup-dot", "aria-hidden": "true" }), _jsx("span", { id: "idle-cleanup-count", className: "idle-cleanup-count" })] }), _jsxs("div", { className: "idle-cleanup-controls", children: [_jsx("span", { className: "idle-cleanup-label", children: tr('sessions.idleCleanupOlderThan') }), _jsx("div", { id: "idle-cleanup-threshold", className: "idle-cleanup-thresholds", role: "group", "aria-label": tr('sessions.idleCleanupThreshold'), children: IDLE_CLEANUP_HOUR_OPTIONS.map(hours => (_jsx("button", { type: "button", "data-hours": hours, "aria-pressed": hours === 24 ? 'true' : 'false', children: hours === 168 ? '7d' : `${hours}H` }, hours))) }), _jsx("button", { type: "button", id: "idle-cleanup-run", className: "contrast idle-cleanup-run", children: tr('sessions.idleCleanupRun') })] }), _jsx("span", { id: "idle-cleanup-status", className: "idle-cleanup-status", "aria-live": "polite" })] }), _jsxs("div", { id: "bulk-bar", className: "bulk-bar", hidden: true, children: [_jsx("span", { id: "bulk-count" }), _jsx("button", { type: "button", id: "bulk-monitor-room", children: tr('sessions.addToMonitorRoom') }), _jsx("button", { type: "button", id: "bulk-lock", children: tr('sessions.lockSelected') }), _jsx("button", { type: "button", id: "bulk-unlock", children: tr('sessions.unlockSelected') }), _jsx("button", { type: "button", id: "bulk-close", className: "contrast", children: tr('sessions.closeSelected') }), _jsx("button", { type: "button", id: "bulk-clear", children: tr('sessions.clearSelection') })] }), _jsxs("table", { id: "sessions-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: _jsx("input", { type: "checkbox", id: "select-all", title: tr('sessions.activeOnly') }) }), _jsx(SortHeader, { sort: "botName", label: tr('sessions.bot') }), _jsx(SortHeader, { sort: "cliId", label: tr('sessions.cli') }), _jsx(SortHeader, { sort: "status", label: tr('sessions.status') }), _jsx(SortHeader, { sort: "chat", label: tr('sessions.location') }), _jsx(SortHeader, { sort: "tokenIn", label: tr('sessions.tokenIn') }), _jsx(SortHeader, { sort: "tokenOut", label: tr('sessions.tokenOut') }), _jsx(SortHeader, { sort: "title", label: tr('sessions.titleCol') }), _jsx(SortHeader, { sort: "workingDir", label: tr('sessions.workingDir') }), _jsx(SortHeader, { sort: "spawnedAt", label: tr('sessions.created') }), _jsx(SortHeader, { sort: "lastMessageAt", label: tr('sessions.last') }), _jsx(SortHeader, { sort: "adopt", label: tr('sessions.adopt') }), _jsx("th", { children: tr('sessions.actions') })] }) }), _jsx("tbody", {})] }), _jsx("div", { id: "sessions-board", className: "sessions-board", hidden: true }), _jsx("div", { id: "sessions-kanban", className: "sessions-kanban", hidden: true }), _jsx("dialog", { id: "drawer" }), _jsx("dialog", { id: "term-modal", className: "term-modal" }), _jsx("dialog", { id: "history-modal", className: "history-modal" })] }));
+    const openCreateSession = async () => {
+        const requestId = createRequestRef.current + 1;
+        createRequestRef.current = requestId;
+        setCreateState({ bots: [], loading: true });
+        setCreateLoading(true);
+        try {
+            const bots = await fetchPickerBots();
+            if (createRequestRef.current !== requestId)
+                return;
+            setCreateState({ bots });
+        }
+        finally {
+            if (createRequestRef.current === requestId)
+                setCreateLoading(false);
+        }
+    };
+    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')],
+                                            ['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')],
+                                            ['team', t('sessions.kanban.groupTeam')],
+                                            ['bot', t('sessions.kanban.groupBot')],
+                                        ].map(([value, label]) => (_jsx("button", { type: "button", "data-groupby": value, className: kanbanGroupBy === value ? 'active' : undefined, "aria-pressed": kanbanGroupBy === value, onClick: () => {
+                                                setKanbanGroupBy(value);
+                                                writeStoredKanbanGroupBy(windowStorage(), value);
+                                            }, children: label }, value))) }), _jsx("span", { id: "kanban-team-stats", className: "kanban-team-stats", hidden: !(viewMode === 'kanban' && kanbanGroupBy === 'team' && kanbanTeamsLoaded), children: teamScopeText }), _jsx(DropdownMenu, { id: "kanban-team", className: "kanban-team-menu", ariaLabel: t('sessions.kanban.groupTeam'), hidden: !(viewMode === 'kanban' && kanbanGroupBy === 'team'), disabled: kanbanTeamDisabled, label: kanbanTeamLabel, value: kanbanTeamValue, options: kanbanTeamOptions, onChange: next => {
+                                            if (!kanbanTeams.some(team => team.key === next))
+                                                return;
+                                            setKanbanTeamKey(next);
+                                            try {
+                                                window.localStorage.setItem(KANBAN_TEAM_STORAGE_KEY, next);
+                                            }
+                                            catch { /* current page only */ }
+                                        } })] })] }), _jsxs("div", { className: "page-heading-actions sessions-page-actions", children: [_jsx("button", { type: "button", id: "monitor-room-open", className: "monitor-room-open", onClick: () => { window.location.href = monitorRoomUrl(); }, children: t('sessions.monitorRoom') }), 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: {
+                    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, onOpen: row => setDrawerSessionId(row.sessionId), onSelect: (id, checked) => setSelected(prev => {
+                            const next = new Set(prev);
+                            if (checked)
+                                next.add(id);
+                            else
+                                next.delete(id);
+                            return next;
+                        }), onSelectAll: checked => setSelected(prev => {
+                            const next = new Set(prev);
+                            for (const row of selectableRows) {
+                                if (checked)
+                                    next.add(row.sessionId);
+                                else
+                                    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 => {
+                            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,
+                                history: ICON.history,
+                                lock: ICON.lock,
+                                restart: ICON.restart,
+                                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: openTerminalModal, 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 => {
+                                const id = String(row.sessionId);
+                                const next = new Set(prev);
+                                if (next.has(id))
+                                    next.delete(id);
+                                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] }));
 }
 export function renderSessionsPage(root) {
     return mountReactPage(root, _jsx(SessionsPage, {}));