botmux 2.107.0 → 2.108.0

package/dist/dashboard/web/app.js

@@ -1,64 +1,252 @@
-// Dashboard SPA entry: hash router + bootstrap + online indicator.
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// Dashboard SPA entry: React chrome + lazy route host + SSE bootstrap.
+import { createRoot } from 'react-dom/client';
+import { useEffect, useRef, useState } from 'react';
 import { bootstrap, store } from './store.js';
-import { wireBotOnboardingButton } from './bot-onboarding.js';
-import { attentionReason, attentionWaitSince, botDisplayName, escapeHtml, loadNameMaps, relTime, t, ui } from './ui.js';
-import { initThemeMenu, paintThemeMenu } from './theme-menu.js';
+import { attentionReason, attentionWaitSince, botDisplayName, escapeHtml, loadNameMaps, relTime, t, ui, } from './ui.js';
+import { CLOSE_THEME_MENU_EVENT, initThemeMenu, paintThemeMenu } from './theme-menu.js';
 import { normalizeDashboardLocale } from './i18n.js';
-import { readStoredSidebarMode, writeStoredSidebarMode } from './preferences.js';
 import { findDashboardRoute, loadOverviewPage } from './dashboard-routes.js';
 import { beginDashboardRoute, createDashboardRouteState, loadAndRenderDashboardRoute, } from './route-lifecycle.js';
-const root = document.getElementById('root');
-// Resolved once at bootstrap from GET /api/settings:
-//   - `isAuthed`        → gates the management nav + route guards
-//   - `publicReadOnly`  → decides whether a read 401 is a hard lockout (token
-//                          rotated → blocking overlay) or just a read-only
-//                          visitor touching a token-gated page (soft toast).
-// Defaults keep the authed / legacy UX if the probe fails.
+import { buildBotCards, loadGroupsSnapshot } from './overview.js';
+import { BotOnboardingDialog, OPEN_BOT_ONBOARDING_EVENT } from './bot-onboarding.js';
+import { InfoTip } from './dashboard-components.js';
+import { initFloatingScrollbars } from './floating-scrollbars.js';
+const MANAGE_ROUTES = [
+    'roles',
+    'role-profiles',
+    'bot-defaults',
+    'skills',
+    'team',
+    'connectors',
+    'insights',
+    'whiteboards',
+];
+const NAV_ITEMS = [
+    {
+        id: 'overview',
+        href: '#/',
+        labelKey: 'nav.overview',
+        icon: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "1.5", y: "1.5", width: "5.4", height: "5.4", rx: "1.5" }), _jsx("rect", { x: "9.1", y: "1.5", width: "5.4", height: "5.4", rx: "1.5" }), _jsx("rect", { x: "1.5", y: "9.1", width: "5.4", height: "5.4", rx: "1.5" }), _jsx("rect", { x: "9.1", y: "9.1", width: "5.4", height: "5.4", rx: "1.5" })] })),
+    },
+    { id: 'sessions', href: '#/sessions', labelKey: 'nav.sessions', icon: _jsx("path", { d: "M2 3.5h12v7H6l-3 3v-3H2z" }) },
+    {
+        id: 'groups',
+        href: '#/groups',
+        labelKey: 'nav.groups',
+        icon: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "5.6", cy: "5.8", r: "2.4" }), _jsx("circle", { cx: "11", cy: "6.8", r: "1.9" }), _jsx("path", { d: "M1.8 13.2c.5-2.4 2-3.6 3.8-3.6s3.3 1.2 3.8 3.6M9.8 12.6c.4-1.7 1.5-2.6 2.8-2.6 1 0 1.9.5 2.4 1.6" })] })),
+    },
+    { id: 'roles', href: '#/roles', labelKey: 'nav.roles', manage: true, icon: _jsxs(_Fragment, { children: [_jsx("path", { d: "M8 1.8l5.2 2v3.4c0 3.4-2.2 5.9-5.2 7-3-1.1-5.2-3.6-5.2-7V3.8z" }), _jsx("path", { d: "M5.8 8l1.6 1.6 2.8-3" })] }) },
+    {
+        id: 'monitoring',
+        href: '#/monitoring',
+        labelKey: 'nav.monitoring',
+        icon: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M2 9.2h2.3l1.3-4.8 2.5 8.4 1.8-5.1h4.1" }), _jsx("path", { d: "M2 2.5h12v11H2z" })] })),
+    },
+    { id: 'insights', href: '#/insights', labelKey: 'nav.insights', manage: true, icon: _jsx(_Fragment, { children: _jsx("path", { d: "M2 2v12h12M5 11V7M8.5 11V4.5M12 11V8.5" }) }) },
+    {
+        id: 'workflows',
+        href: '#/workflows',
+        labelKey: 'nav.workflows',
+        icon: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "3.4", cy: "3.6", r: "1.9" }), _jsx("circle", { cx: "3.4", cy: "12.4", r: "1.9" }), _jsx("circle", { cx: "12.6", cy: "8", r: "1.9" }), _jsx("path", { d: "M5.2 4.4l5.6 2.8M5.2 11.6l5.6-2.8" })] })),
+    },
+    { id: 'schedules', href: '#/schedules', labelKey: 'nav.schedules', icon: _jsxs(_Fragment, { children: [_jsx("circle", { cx: "8", cy: "8", r: "6.2" }), _jsx("path", { d: "M8 4.5V8l2.4 1.6" })] }) },
+    { id: 'whiteboards', href: '#/whiteboards', labelKey: 'nav.whiteboards', manage: true, icon: _jsxs(_Fragment, { children: [_jsx("rect", { x: "2.2", y: "2.2", width: "11.6", height: "11.6", rx: "2" }), _jsx("path", { d: "M4.8 5.2h6.4M4.8 8h6.4M4.8 10.8h4" })] }) },
+    { id: 'office', href: '#/office', labelKey: 'nav.office', icon: _jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "4", width: "10", height: "7", rx: "2" }), _jsx("circle", { cx: "6", cy: "7.5", r: "1" }), _jsx("circle", { cx: "10", cy: "7.5", r: "1" }), _jsx("path", { d: "M8 4V2M4.5 11v2M11.5 11v2" })] }) },
+    { id: 'bot-defaults', href: '#/bot-defaults', labelKey: 'nav.botDefaults', manage: true, icon: _jsxs(_Fragment, { children: [_jsx("rect", { x: "2.5", y: "5", width: "11", height: "8", rx: "2" }), _jsx("circle", { cx: "5.8", cy: "9", r: "1" }), _jsx("circle", { cx: "10.2", cy: "9", r: "1" }), _jsx("path", { d: "M8 5V2.5M5.5 13v1.2M10.5 13v1.2" })] }) },
+    { id: 'skills', href: '#/skills', labelKey: 'nav.skills', manage: true, icon: _jsxs(_Fragment, { children: [_jsx("path", { d: "M3 2.5h10v3H3zM3 7h10v6.5H3z" }), _jsx("path", { d: "M5.4 9.2h5.2M5.4 11.2h3.8" })] }) },
+    { id: 'team', href: '#/team', labelKey: 'nav.team', manage: true, icon: _jsxs(_Fragment, { children: [_jsx("circle", { cx: "8", cy: "8", r: "6.2" }), _jsx("path", { d: "M1.8 8h12.4M8 1.8c-2 1.8-2 10.6 0 12.4 2-1.8 2-10.6 0-12.4z" })] }) },
+    { id: 'connectors', href: '#/connectors', labelKey: 'nav.connectors', manage: true, icon: _jsxs(_Fragment, { children: [_jsx("path", { d: "M5.5 6.5v-3a2.5 2.5 0 0 1 5 0v3" }), _jsx("rect", { x: "3.5", y: "6.5", width: "9", height: "7", rx: "2" })] }) },
+    { id: 'settings', href: '#/settings', labelKey: 'nav.settings', icon: _jsxs(_Fragment, { children: [_jsx("path", { d: "M8 1.75 9.35 2.05 10 3.28l1.38.3 1.04-.96.96.96-.96 1.04.3 1.38 1.23.65L14.25 8l-.3 1.35-1.23.65-.3 1.38.96 1.04-.96.96-1.04-.96-1.38.3-.65 1.23L8 14.25l-1.35-.3L6 12.72l-1.38-.3-1.04.96-.96-.96.96-1.04-.3-1.38-1.23-.65L1.75 8l.3-1.35 1.23-.65.3-1.38-.96-1.04.96-.96 1.04.96 1.38-.3.65-1.23z" }), _jsx("circle", { cx: "8", cy: "8", r: "2" })] }) },
+];
 let isAuthed = true;
 let publicReadOnly = false;
-// Management pages are token-gated end-to-end (no public GET) — a read-only
-// visitor must not reach them. `data-route` values from index.html's nav.
-const MANAGE_ROUTES = ['roles', 'role-profiles', 'bot-defaults', 'skills', 'team', 'connectors', 'insights', 'whiteboards'];
+let activeHash = location.hash || '#/';
+let ownerAvatar = null;
+let updateBehind = false;
+let latestVersion = null;
+let routeRoot = null;
+let appRoot = null;
+const routeState = createDashboardRouteState();
+const OWNER_AVATAR_KEY = 'botmux.ownerAvatar.v1';
+const BUSY_STATUSES = new Set(['working', 'analyzing', 'active', 'starting']);
+const AUTH_EXPIRED_EVENT = 'botmux:auth-expired';
+function icon(children) {
+    return _jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", children: children });
+}
+function labelOf(item) {
+    return item.labelKey ? t(item.labelKey) : (item.label ?? '');
+}
+function isActiveNav(item, hash) {
+    const current = hash || '#/';
+    if (item.id === 'workflows' &&
+        (current === '#/legacy-workflow' || current.startsWith('#/legacy-workflow?') || current.startsWith('#/legacy-workflow/'))) {
+        return true;
+    }
+    if (item.id === 'sessions' &&
+        (current === '#/monitor-room' || current.startsWith('#/monitor-room?') || current.startsWith('#/monitor-room/'))) {
+        return true;
+    }
+    if (item.id === 'connectors' && (current === '#/webhook-logs' || current.startsWith('#/webhook-logs?') || current.startsWith('#/webhook-logs/'))) {
+        return true;
+    }
+    return item.href === current || (item.href !== '#/' && (current.startsWith(`${item.href}?`) || current.startsWith(`${item.href}/`)));
+}
+function navClassName(item) {
+    const classes = [];
+    if (isActiveNav(item, activeHash))
+        classes.push('active');
+    if (item.id === 'settings' && updateBehind)
+        classes.push('nav-has-update');
+    return classes.length ? classes.join(' ') : undefined;
+}
+function setRouteRoot(node) {
+    routeRoot = node;
+}
+function getRouteRoot() {
+    if (routeRoot)
+        return routeRoot;
+    const el = document.getElementById('root');
+    if (!el)
+        throw new Error('dashboard root is not mounted');
+    routeRoot = el;
+    return el;
+}
+function ThemeMenuSlot() {
+    useEffect(() => {
+        initThemeMenu();
+    }, []);
+    useEffect(() => {
+        paintThemeMenu();
+    });
+    return (_jsxs("div", { className: "theme-menu", id: "theme-menu", children: [_jsx("button", { type: "button", className: "theme-menu-btn", id: "theme-menu-btn", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-label": "Theme", children: _jsx("span", { className: "tm-ic", children: _jsxs("svg", { className: "tm-svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "13.5", cy: "6.5", r: ".5", fill: "currentColor" }), _jsx("circle", { cx: "17.5", cy: "10.5", r: ".5", fill: "currentColor" }), _jsx("circle", { cx: "8.5", cy: "7.5", r: ".5", fill: "currentColor" }), _jsx("circle", { cx: "6.5", cy: "12.5", r: ".5", fill: "currentColor" }), _jsx("path", { d: "M12 2a10 10 0 0 0 0 20h1.7a2.3 2.3 0 0 0 1.6-4c-.5-.5-.2-1.3.5-1.3H17a5 5 0 0 0 5-5 9.7 9.7 0 0 0-10-9.7z" })] }) }) }), _jsx("div", { className: "theme-menu-pop", id: "theme-menu-pop", role: "listbox", hidden: true })] }));
+}
+function dashboardStatusSummary() {
+    const sessions = [...store.sessions.values()];
+    const active = sessions.filter(s => s.status !== 'closed');
+    const attention = active
+        .map(s => ({ s, reason: attentionReason(s) }))
+        .filter((x) => !!x.reason)
+        .sort((a, b) => attentionWaitSince(a.s) - attentionWaitSince(b.s));
+    const attentionIds = new Set(attention.map(item => String(item.s.sessionId ?? '')));
+    const working = active.filter(s => BUSY_STATUSES.has(String(s.status)) && !attentionIds.has(String(s.sessionId ?? ''))).length;
+    const longest = attention[0] ?? null;
+    const onlineBots = buildBotCards(sessions).filter(c => c.online || c.active.length > 0).length;
+    const idle = Math.max(0, active.length - attention.length - working);
+    return {
+        working,
+        attention: attention.length,
+        idle,
+        onlineBots,
+        attentionNotice: longest ? {
+            count: attention.length,
+            time: relTime(attentionWaitSince(longest.s)),
+            bot: botDisplayName(longest.s),
+            reason: longest.reason,
+        } : null,
+    };
+}
+function TopbarStatusRow(props) {
+    return (_jsxs("div", { className: `topbar-status-row${props.hot ? ' topbar-status-row-hot' : ''}`, children: [_jsx("span", { children: props.label }), _jsx("b", { className: props.value > 0 ? 'status-count-on' : undefined, children: props.value })] }));
+}
+function TopbarStatusDonut(props) {
+    const { attention, idle, working } = props.summary;
+    const total = working + attention + idle;
+    const background = total === 0
+        ? 'conic-gradient(var(--border) 0 360deg)'
+        : (() => {
+            const workingDeg = (working / total) * 360;
+            const attentionDeg = workingDeg + (attention / total) * 360;
+            return `conic-gradient(var(--accent) 0 ${workingDeg}deg, var(--warning) ${workingDeg}deg ${attentionDeg}deg, var(--success) ${attentionDeg}deg 360deg)`;
+        })();
+    return (_jsxs("div", { className: "topbar-status-donut-wrap", "aria-hidden": "true", children: [_jsx("div", { className: "topbar-status-donut", style: { background } }), _jsxs("div", { className: "topbar-status-donut-center", children: [_jsx("b", { children: total }), _jsx("span", { children: t('overview.openSessions') })] })] }));
+}
+function closeThemeMenuFromStatus() {
+    window.dispatchEvent(new Event(CLOSE_THEME_MENU_EVENT));
+}
+function TopbarStatusMenu(props) {
+    const { autoOpen = false, summary } = props;
+    return (_jsxs("div", { className: `topbar-status-menu${autoOpen ? ' topbar-status-auto-open' : ''}`, onPointerEnter: closeThemeMenuFromStatus, onFocusCapture: closeThemeMenuFromStatus, children: [_jsx("span", { id: "status", className: "connection-status", "aria-haspopup": "true", "aria-expanded": autoOpen, children: t('overview.sessionOverview') }), _jsxs("div", { className: "topbar-status-pop", children: [summary.attentionNotice ? (_jsxs("a", { className: "topbar-attention-notice", href: "#/sessions", children: [_jsx("span", { className: "topbar-attention-dot", "aria-hidden": "true" }), _jsxs("span", { className: "topbar-attention-copy", children: [_jsx("b", { children: t('strip.pending', { count: summary.attentionNotice.count }) }), _jsx("small", { children: t('strip.longestCompact', {
+                                            time: summary.attentionNotice.time,
+                                            bot: summary.attentionNotice.bot,
+                                            reason: summary.attentionNotice.reason,
+                                        }) })] }), _jsx("span", { className: "topbar-attention-action", children: t('strip.handle') })] })) : null, _jsxs("div", { className: "topbar-status-list", children: [_jsx(TopbarStatusRow, { label: t('overview.workingSessions'), value: summary.working }), _jsx(TopbarStatusRow, { label: t('overview.idleSessions'), value: summary.idle }), _jsx(TopbarStatusRow, { label: t('overview.attention'), value: summary.attention, hot: summary.attention > 0 }), _jsx(TopbarStatusRow, { label: t('overview.onlineBots'), value: summary.onlineBots })] }), _jsx(TopbarStatusDonut, { summary: summary })] })] }));
+}
+function AuthExpiredOverlay(props) {
+    if (!props.open)
+        return null;
+    return (_jsx("div", { id: "auth-expired-overlay", className: "auth-expired-overlay", role: "presentation", onClick: event => { if (event.target === event.currentTarget)
+            props.onClose(); }, children: _jsxs("div", { className: "auth-expired-dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": "auth-expired-title", children: [_jsx("h2", { id: "auth-expired-title", children: "\u8BBF\u95EE\u94FE\u63A5\u5DF2\u5931\u6548" }), _jsx("p", { children: "\u5F53\u524D\u94FE\u63A5/\u8BBF\u95EE\u5DF2\u5931\u6548\uFF0C\u8BF7\u4F7F\u7528\u6700\u65B0\u6388\u6743\u94FE\u63A5\u91CD\u65B0\u8FDB\u5165\uFF08\u8FD0\u884C botmux dashboard \u83B7\u53D6\uFF09\u3002" }), _jsx("button", { id: "auth-expired-dismiss", type: "button", className: "primary", onClick: props.onClose, children: "\u77E5\u9053\u4E86" })] }) }));
+}
+function DashboardShell() {
+    const statusSummary = dashboardStatusSummary();
+    const [botOnboardingOpen, setBotOnboardingOpen] = useState(false);
+    const [authExpiredOpen, setAuthExpiredOpen] = useState(false);
+    const [statusAutoOpen, setStatusAutoOpen] = useState(false);
+    const previousAttentionRef = useRef(statusSummary.attention);
+    const statusAutoOpenTimerRef = useRef(null);
+    const clearStatusAutoOpenTimer = () => {
+        if (statusAutoOpenTimerRef.current === null)
+            return;
+        window.clearTimeout(statusAutoOpenTimerRef.current);
+        statusAutoOpenTimerRef.current = null;
+    };
+    useEffect(() => {
+        const open = () => setBotOnboardingOpen(true);
+        window.addEventListener(OPEN_BOT_ONBOARDING_EVENT, open);
+        return () => window.removeEventListener(OPEN_BOT_ONBOARDING_EVENT, open);
+    }, []);
+    useEffect(() => {
+        const open = () => setAuthExpiredOpen(true);
+        window.addEventListener(AUTH_EXPIRED_EVENT, open);
+        // Catch a 401 that latched expiredShown before this listener mounted (else the overlay
+        // would be permanently suppressed by the module-level guard).
+        if (expiredShown)
+            setAuthExpiredOpen(true);
+        return () => window.removeEventListener(AUTH_EXPIRED_EVENT, open);
+    }, []);
+    useEffect(() => {
+        return () => clearStatusAutoOpenTimer();
+    }, []);
+    useEffect(() => {
+        const previousAttention = previousAttentionRef.current;
+        previousAttentionRef.current = statusSummary.attention;
+        if (statusSummary.attention === 0) {
+            clearStatusAutoOpenTimer();
+            setStatusAutoOpen(false);
+            return;
+        }
+        if (previousAttention !== 0 || document.body.classList.contains('theme-menu-open'))
+            return;
+        setStatusAutoOpen(true);
+        clearStatusAutoOpenTimer();
+        statusAutoOpenTimerRef.current = window.setTimeout(() => {
+            statusAutoOpenTimerRef.current = null;
+            setStatusAutoOpen(false);
+        }, 4000);
+    }, [statusSummary.attention]);
+    const closeAuthExpired = () => {
+        expiredShown = false;
+        setAuthExpiredOpen(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "aurora", "aria-hidden": "true", children: [_jsx("i", { className: "a1" }), _jsx("i", { className: "a2" }), _jsx("i", { className: "a3" })] }), _jsxs("div", { className: "app-shell", children: [_jsxs("header", { className: "topbar", children: [_jsx("div", { className: "topbar-left", children: _jsxs("a", { className: "brand", href: "#/", children: [_jsx("span", { className: "brand-mark", "aria-hidden": "true", children: _jsx("img", { className: "brand-logo-img", src: "/assets/brand-logo.png", alt: "", decoding: "sync", loading: "eager", fetchPriority: "high" }) }), _jsx("strong", { className: "brand-wordmark", children: "Botmux" }), _jsx("span", { className: "brand-product", children: "Dashboard" })] }) }), _jsxs("div", { className: "topbar-actions", children: [_jsx(TopbarStatusMenu, { summary: statusSummary, autoOpen: statusAutoOpen }), _jsxs("div", { className: "topbar-tool-group", children: [_jsx("button", { type: "button", className: "topbar-locale-toggle", "aria-label": ui.locale === 'zh' ? 'Switch to English' : '切换到中文', title: ui.locale === 'zh' ? 'Switch to English' : '切换到中文', onClick: () => setLocale(ui.locale === 'zh' ? 'en' : 'zh'), children: ui.locale === 'zh' ? 'CN' : 'EN' }), _jsx(ThemeMenuSlot, {}), _jsxs("a", { className: "topbar-docs-link", href: "https://bytedance.aiforce.cloud/app/app_4k9smq6rdxher/", target: "_blank", rel: "noopener noreferrer", title: t('nav.docs'), "aria-label": t('nav.docs'), children: [icon(_jsxs(_Fragment, { children: [_jsx("rect", { x: "2.2", y: "2.2", width: "11.6", height: "11.6", rx: "2" }), _jsx("path", { d: "M4.8 5.2h6.4M4.8 8h6.4M4.8 10.8h4" })] })), _jsx("span", { children: t('nav.docs') })] })] }), _jsxs("span", { className: "topbar-owner", title: ownerAvatar?.name, "aria-label": ownerAvatar?.name ?? 'Owner', children: [_jsx("span", { className: "topbar-owner-placeholder", "aria-hidden": "true", children: icon(_jsxs(_Fragment, { children: [_jsx("circle", { cx: "8", cy: "6", r: "2.4" }), _jsx("path", { d: "M3.7 13c.7-2.5 2.2-3.7 4.3-3.7s3.6 1.2 4.3 3.7" })] })) }), ownerAvatar?.avatarUrl ? (_jsx("img", { className: "topbar-owner-img", src: ownerAvatar.avatarUrl, alt: "", decoding: "async", referrerPolicy: "no-referrer", onError: (e) => { e.currentTarget.remove(); } })) : null] })] })] }), _jsxs("div", { className: "chrome-body", children: [_jsx("aside", { className: "sidebar", children: _jsx("nav", { className: "sidebar-nav", "aria-label": "Dashboard", children: NAV_ITEMS.filter(item => isAuthed || !item.manage).map(item => (_jsxs("a", { href: item.href, "data-route": item.id, className: navClassName(item), children: [icon(item.icon), _jsx("span", { className: "sidebar-nav-label", children: labelOf(item) }), item.id === 'settings' && updateBehind ? (_jsx(InfoTip, { className: "nav-update-tip", label: t('update.navBadgeTitle', { version: latestVersion ? `v${latestVersion}` : '' }), trigger: _jsx("span", { className: "nav-update-dot", "aria-hidden": "true" }), preventClick: false, focusable: false, children: t('update.navBadgeTitle', { version: latestVersion ? `v${latestVersion}` : '' }) })) : null] }, item.id))) }) }), _jsxs("div", { className: "workspace", children: [_jsx("dialog", { id: "create-session-modal", className: "create-session-modal" }), _jsx(BotOnboardingDialog, { open: botOnboardingOpen, onClose: () => setBotOnboardingOpen(false) }), _jsx("main", { id: "root", ref: setRouteRoot })] })] })] }), _jsx(AuthExpiredOverlay, { open: authExpiredOpen, onClose: closeAuthExpired })] }));
+}
+function renderShell() {
+    appRoot?.render(_jsx(DashboardShell, {}));
+}
+function setLocale(locale) {
+    ui.setLocale(locale);
+    void persistLocale(locale);
+}
 // ── Auth-expiry overlay ──────────────────────────────────────────────────────
-// Shown only when the dashboard token was rotated WHILE public read-only is off
-// (a real hard lockout). Under public read-only a 401 is a soft toast instead
-// (see patchedFetch) — so this no longer fires for read-only visitors.
-let _expiredShown = false;
+let expiredShown = false;
 export function showAuthExpiredOverlay() {
-    if (_expiredShown)
+    if (expiredShown)
         return;
-    _expiredShown = true;
-    const el = document.createElement('div');
-    el.id = 'auth-expired-overlay';
-    el.style.cssText =
-        'position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;' +
-            'align-items:center;justify-content:center;z-index:9999';
-    el.innerHTML =
-        '<div style="background:var(--surface);color:var(--fg);border:1px solid var(--border);border-radius:12px;' +
-            'padding:36px 40px;max-width:460px;width:90vw;text-align:center;' +
-            'box-shadow:0 12px 40px rgba(0,0,0,.35)">' +
-            '<h2 style="margin:0 0 14px;font-size:19px;color:var(--fg)">访问链接已失效</h2>' +
-            '<p style="margin:0 0 24px;line-height:1.7;color:var(--muted,#8f959e);font-size:14px">' +
-            '当前链接/访问已失效，请使用最新授权链接重新进入（运行 botmux dashboard 获取）。</p>' +
-            '<button id="auth-expired-dismiss" type="button" ' +
-            'style="padding:8px 22px;background:var(--accent);color:var(--on-accent);border:none;' +
-            'border-radius:8px;cursor:pointer;font-size:14px">知道了</button>' +
-            '</div>';
-    document.body.appendChild(el);
-    // `window.close()` can't close a tab the user opened, so the old inline
-    // onclick was a dead button (overlay got stuck). Dismiss the overlay instead,
-    // and let it reappear on the next genuine 401.
-    const dismiss = () => { el.remove(); _expiredShown = false; };
-    el.querySelector('#auth-expired-dismiss')?.addEventListener('click', dismiss);
-    el.addEventListener('click', (e) => { if (e.target === el)
-        dismiss(); });
+    expiredShown = true;
+    window.dispatchEvent(new Event(AUTH_EXPIRED_EVENT));
 }
-// ── Read-only toast (write attempt without a valid token) ───────────────────
-// In public read-only mode browsing GETs never 401, but a write action
-// (close session, cancel run, …) without the active token does. That's not
-// "your link died" — it's "you're a read-only visitor", so show a transient
-// toast instead of the blocking overlay.
-let _roToastTimer;
+let roToastTimer;
 export function showReadOnlyToast() {
     let el = document.getElementById('readonly-toast');
     if (!el) {
@@ -67,29 +255,21 @@ export function showReadOnlyToast() {
         el.style.cssText =
             'position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:9999;' +
                 'background:var(--fg,#1f2329);color:var(--bg,#fff);padding:10px 18px;' +
-                'border-radius:8px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.25)';
+                'border-radius:var(--radius-lg);font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.25)';
         document.body.appendChild(el);
     }
     el.textContent = '当前是只读访问，此操作需要授权链接（运行 botmux dashboard 获取）';
     el.style.display = 'block';
-    if (_roToastTimer)
-        window.clearTimeout(_roToastTimer);
-    _roToastTimer = window.setTimeout(() => { el.style.display = 'none'; }, 4000);
+    if (roToastTimer)
+        window.clearTimeout(roToastTimer);
+    roToastTimer = window.setTimeout(() => { el.style.display = 'none'; }, 4000);
 }
-// Patch the global fetch to route 401s: a read (GET/HEAD) 401 means the token
-// was rotated while this tab was open (only possible when public read-only
-// mode is off) → blocking overlay; a write 401 means "read-only visitor" →
-// transient toast.
-const _origFetch = window.fetch.bind(window);
+const origFetch = window.fetch.bind(window);
 window.fetch = async function patchedFetch(...args) {
-    const res = await _origFetch(...args);
+    const res = await origFetch(...args);
     if (res.status === 401) {
         const method = (args[1]?.method ?? 'GET').toUpperCase();
         const isRead = method === 'GET' || method === 'HEAD';
-        // A read 401 is a hard lockout (token rotated → blocking overlay) ONLY when
-        // public read-only is off. Under public read-only a read 401 just means a
-        // tokenless visitor touched a token-gated page → soft toast, never the
-        // stuck overlay. Writes are always a soft "needs the active token".
         if (isRead && !publicReadOnly)
             showAuthExpiredOverlay();
         else
@@ -97,61 +277,15 @@ window.fetch = async function patchedFetch(...args) {
     }
     return res;
 };
-// ── 全局 attention strip ─────────────────────────────────────────────────────
-// 「需要你」是全局最高优先级：不管在哪个页面，待处理数和最久等待项都常驻
-// 顶部一条琥珀色 strip，点「立即处理」跳到会话页（needs-you 列置顶）。
-let lastStripHtml = '';
-function paintAttentionStrip() {
-    const el = document.getElementById('attention-strip');
-    if (!el)
-        return;
-    const pending = [...store.sessions.values()]
-        .map(s => ({ s, reason: attentionReason(s) }))
-        .filter((x) => !!x.reason)
-        .sort((a, b) => attentionWaitSince(a.s) - attentionWaitSince(b.s));
-    if (pending.length === 0) {
-        el.hidden = true;
-        el.innerHTML = '';
-        lastStripHtml = '';
-        return;
-    }
-    const longest = pending[0];
-    const html = `
-    <span class="attention-strip-ic" aria-hidden="true">!</span>
-    <b>${escapeHtml(t('strip.pending', { count: pending.length }))}</b>
-    <span class="attention-strip-longest">${escapeHtml(t('strip.longest', {
-        time: relTime(attentionWaitSince(longest.s)),
-        bot: botDisplayName(longest.s),
-        reason: longest.reason,
-    }))}</span>
-    <a class="attention-strip-go" href="#/sessions">${escapeHtml(t('strip.handle'))}</a>`;
-    el.hidden = false;
-    // 内容没变就不重写 — innerHTML 重建会把 strip-pulse 动画打回起点（视觉跳变）
-    if (html === lastStripHtml)
-        return;
-    lastStripHtml = html;
-    el.innerHTML = html;
-}
-store.on(paintAttentionStrip);
-// bot 友好名异步解析回来后刷一次 strip（页面级重绘由各 mount 自己处理）
-void loadNameMaps().then(paintAttentionStrip);
-// Resolve the read-only/authed state from /api/settings (authed reflects the
-// cookie; publicReadOnly is the global toggle). Errors keep the authed default
-// so a transient probe failure never hides nav from a real token holder.
 async function loadAuthState() {
     try {
         const r = await fetch('/api/settings');
         if (r.ok) {
             const j = await r.json();
             isAuthed = !!j.authed;
-            // Share the cookie-auth verdict with per-row renderers (the sessions
-            // board's writable-terminal segment reads ui.authed at render time).
             ui.authed = isAuthed;
             publicReadOnly = !!(j.settings && j.settings.publicReadOnly);
-            // The global UI locale (`botmux lang`) is the single source of truth: when
-            // set, it wins over the browser-detected / locally-stored locale so the
-            // dashboard always reflects the same language as the Feishu cards. When
-            // unset (null), keep the browser/local default ui.init() already picked.
+            ui.publicReadOnly = publicReadOnly;
             const serverLocale = normalizeDashboardLocale(j.lang);
             if (serverLocale)
                 ui.setLocale(serverLocale);
@@ -159,10 +293,6 @@ async function loadAuthState() {
     }
     catch { /* keep defaults */ }
 }
-// Persist a language choice back to the global config so it drives `botmux lang`
-// and the Feishu cards too (the server fans the change out to every daemon
-// live). Authed-only — read-only visitors just change their local view, which
-// the server-authoritative locale overrides on their next load.
 async function persistLocale(locale) {
     if (!isAuthed)
         return;
@@ -175,26 +305,6 @@ async function persistLocale(locale) {
     }
     catch { /* best-effort; UI already switched locally */ }
 }
-// Read-only visitors can't use the management pages (all token-gated), so hide
-// their nav entries + the add-bot action instead of luring them into a 401.
-function applyAuthVisibility() {
-    for (const r of MANAGE_ROUTES) {
-        const a = document.querySelector(`.sidebar-nav a[data-route="${r}"]`);
-        if (a)
-            a.style.display = isAuthed ? '' : 'none';
-    }
-    const addBot = document.getElementById('add-bot-btn');
-    if (addBot)
-        addBot.style.display = isAuthed ? '' : 'none';
-    // 创建会话同为管理动作（/api/sessions/create token-gated），只读访客隐藏。
-    const createSession = document.getElementById('create-session-btn');
-    if (createSession)
-        createSession.style.display = isAuthed ? '' : 'none';
-}
-// Show a small dot on the Settings nav when a newer botmux version is published,
-// so an available update is visible without opening the page. Authed-only (the
-// status endpoint is token-gated; the result is server-cached so this is cheap).
-// Best-effort and silent on failure.
 async function checkUpdateBadge() {
     if (!isAuthed)
         return;
@@ -203,68 +313,40 @@ async function checkUpdateBadge() {
         if (!r.ok)
             return;
         const j = await r.json();
-        const a = document.querySelector('.sidebar-nav a[data-route="settings"]');
-        if (!a)
-            return;
-        const behind = j.behind === true;
-        a.classList.toggle('nav-has-update', behind);
-        if (behind)
-            a.title = t('update.navBadgeTitle', { version: `v${j.latest}` });
-        else
-            a.removeAttribute('title');
+        updateBehind = j.behind === true;
+        latestVersion = updateBehind && j.latest ? String(j.latest) : null;
+        renderShell();
     }
     catch { /* best-effort */ }
 }
 function renderAuthRequiredPage(host) {
     host.innerHTML =
         '<section class="auth-required" style="max-width:520px;margin:64px auto;text-align:center;' +
-            'background:var(--surface);color:var(--fg);border:1px solid var(--border);border-radius:14px;' +
+            'background:var(--surface);color:var(--fg);border:1px solid var(--border);border-radius:var(--radius-lg);' +
             'padding:40px 36px;box-shadow:0 8px 28px rgba(0,0,0,.12)">' +
             '<h2 style="margin:0 0 12px;font-size:20px;color:var(--fg)">此页需要授权链接</h2>' +
             '<p style="margin:0 0 24px;line-height:1.7;color:var(--muted);font-size:14px">' +
             '你当前是只读访问，管理页（群角色 / Profiles / Bot 配置 / 团队 / Webhook）需要授权链接。' +
             '运行 <code>botmux dashboard</code> 获取最新链接后即可管理。</p>' +
             '<a href="#/" style="display:inline-block;padding:8px 22px;background:var(--accent);' +
-            'color:var(--on-accent);border-radius:8px;text-decoration:none;font-size:14px">返回总览</a>' +
+            'color:var(--on-accent);border-radius:var(--radius-lg);text-decoration:none;font-size:14px">返回总览</a>' +
             '</section>';
 }
-// Pages that own a polling loop / cleanup return a disposer; we run it
-// on the next route switch so timers don't leak across navigations.
-const routeState = createDashboardRouteState();
-function highlightNav(hash) {
-    for (const a of document.querySelectorAll('.sidebar-nav a')) {
-        const href = a.getAttribute('href') ?? '#/';
-        const current = hash || '#/';
-        const isActive = href === current || (href !== '#/' && (current.startsWith(`${href}?`) || current.startsWith(`${href}/`)));
-        a.classList.toggle('active', isActive);
-    }
-}
 async function route() {
     const seq = beginDashboardRoute(routeState);
     const hash = location.hash || '#/';
-    // Read-only hard-guard: a tokenless visitor hitting a management route gets a
-    // friendly notice instead of a page that fires a 401 (which used to pop a
-    // stuck "link expired" overlay).
+    activeHash = hash;
+    renderShell();
     if (!isAuthed && MANAGE_ROUTES.some(r => hash.startsWith('#/' + r))) {
-        renderAuthRequiredPage(root);
+        renderAuthRequiredPage(getRouteRoot());
         routeState.rerenderOnUiChange = true;
-        highlightNav(hash);
         return;
     }
-    // The "工作流" nav now points at the v3 runs page (#/workflows). The v2 (v0.2)
-    // engine is kept (backend + Feishu cards), so its run-detail page survives at
-    // the dedicated #/legacy-workflow route (where v2 cards now link). Legacy URL
-    // upkeep so old bookmarks/pasted links don't 404:
-    //   - `#/v3[/<id>]`                                 → `#/workflows[/<id>]` (v3 promoted)
-    //   - `#/workflows/catalog`, `#/workflows-catalog`  → `#/workflows` (v2 catalog gone)
     if (hash.startsWith('#/v3')) {
         window.location.replace(`#/workflows${hash.slice('#/v3'.length)}`);
         return;
     }
     else if (/^#\/workflows(?:\/|-)catalog(?:[/?].*)?$/.test(hash)) {
-        // Bounded match (NOT startsWith): a v3 runId can begin with "catalog"
-        // (goal slug → `catalog-all-open-prs-…`), and `#/workflows/catalog-…`
-        // must open that run's detail, not bounce to the list.
         window.location.replace('#/workflows');
         return;
     }
@@ -274,133 +356,64 @@ async function route() {
     }
     try {
         const matched = findDashboardRoute(hash);
-        await loadAndRenderDashboardRoute(routeState, seq, root, matched ? matched.load : loadOverviewPage, { rerenderOnUiChange: matched ? matched.rerenderOnUiChange : false });
+        await loadAndRenderDashboardRoute(routeState, seq, getRouteRoot(), matched ? matched.load : loadOverviewPage, { rerenderOnUiChange: matched ? matched.rerenderOnUiChange : false });
     }
     catch (err) {
         if (seq !== routeState.seq)
             return;
-        root.innerHTML = `<section class="page"><div class="empty">Dashboard route failed: ${escapeHtml(String(err))}</div></section>`;
+        getRouteRoot().innerHTML = `<section class="page"><div class="empty">Dashboard route failed: ${escapeHtml(String(err))}</div></section>`;
         routeState.pageDispose = null;
         routeState.rerenderOnUiChange = true;
     }
-    finally {
-        if (seq === routeState.seq)
-            highlightNav(hash);
-    }
-}
-const statusEl = document.getElementById('status');
-function paintStatus() {
-    if (!statusEl)
-        return;
-    statusEl.textContent = store.online ? t('status.live') : t('status.disconnected');
-    statusEl.className = 'connection-status ' + (store.online ? 'online' : 'offline');
-}
-store.on(paintStatus);
-function paintChrome() {
-    document.querySelectorAll('[data-i18n]').forEach(el => {
-        el.textContent = t(el.dataset.i18n ?? '');
-    });
-    document.querySelectorAll('[data-locale]').forEach(btn => {
-        btn.classList.toggle('active', btn.dataset.locale === ui.locale);
-    });
-    paintThemeMenu();
-    paintStatus();
-}
-function wireChromeControls() {
-    document.querySelectorAll('[data-locale]').forEach(btn => {
-        btn.onclick = () => {
-            const locale = btn.dataset.locale;
-            ui.setLocale(locale);
-            void persistLocale(locale);
-        };
-    });
-    initThemeMenu();
-    wireSidebarToggle();
 }
-// 左上角 brand 显示部署 owner（「我」）的飞书头像：localStorage 缓存先出图
-// 防闪烁，再后台刷新；拿不到（未绑定 owner / 只读访客 401）保持渐变球。
-const OWNER_AVATAR_KEY = 'botmux.ownerAvatar.v1';
-function paintOwnerAvatar(avatarUrl, name) {
-    const mark = document.querySelector('.brand-mark');
-    if (!mark || !avatarUrl)
-        return;
-    mark.innerHTML = `<img class="brand-owner-img" src="${escapeHtml(avatarUrl)}" alt="" decoding="async" referrerpolicy="no-referrer" onerror="this.remove()">`;
-    if (name)
-        mark.title = name;
-}
-function initOwnerAvatar() {
+function readCachedOwnerAvatar() {
     try {
         const cached = JSON.parse(window.localStorage.getItem(OWNER_AVATAR_KEY) ?? 'null');
-        if (cached?.avatarUrl)
-            paintOwnerAvatar(String(cached.avatarUrl), cached.name ? String(cached.name) : undefined);
+        if (cached?.avatarUrl) {
+            return {
+                avatarUrl: String(cached.avatarUrl),
+                name: cached.name ? String(cached.name) : undefined,
+            };
+        }
     }
-    catch { /* 缓存损坏忽略 */ }
+    catch { /* ignore corrupt cache */ }
+    return null;
+}
+function initOwnerAvatar() {
+    ownerAvatar = readCachedOwnerAvatar();
+    renderShell();
     void fetch('/api/owner-profile')
         .then(r => (r.ok ? r.json() : null))
         .then(body => {
         if (!body?.ok || !body.avatarUrl)
             return;
-        paintOwnerAvatar(String(body.avatarUrl), body.name ? String(body.name) : undefined);
+        ownerAvatar = { avatarUrl: String(body.avatarUrl), name: body.name ? String(body.name) : undefined };
         try {
             window.localStorage.setItem(OWNER_AVATAR_KEY, JSON.stringify({ avatarUrl: body.avatarUrl, name: body.name ?? '' }));
         }
-        catch { /* 忽略 */ }
+        catch { /* ignore */ }
+        renderShell();
     })
         .catch(() => { });
 }
-// 左侧菜单栏收起/展开：状态挂在 <html data-sidebar>，CSS 收窄成图标栏；
-// 偏好进 localStorage，刷新/换页保持。
-function wireSidebarToggle() {
-    const btn = document.getElementById('sidebar-toggle');
-    if (!btn)
-        return;
-    let mode = readStoredSidebarMode(window.localStorage);
-    const apply = () => {
-        document.documentElement.dataset.sidebar = mode;
-        btn.title = t(mode === 'collapsed' ? 'nav.sidebarExpand' : 'nav.sidebarCollapse');
-    };
-    apply();
-    btn.addEventListener('click', () => {
-        mode = mode === 'collapsed' ? 'expanded' : 'collapsed';
-        writeStoredSidebarMode(window.localStorage, mode);
-        apply();
-    });
-}
-// 全局顶栏「创建会话」按钮：点击时按需动态 import 较重的 sessions 模块并拉起弹窗，
-// 让创建逻辑留在懒加载 chunk 里、不撑大主包（对应 wireBotOnboardingButton，但走懒加载）。
-function wireCreateSessionButton() {
-    const btn = document.getElementById('create-session-btn');
-    if (!btn)
-        return;
-    btn.onclick = async () => {
-        btn.disabled = true;
-        try {
-            const mod = await import('./sessions.js');
-            await mod.openCreateSessionModal();
-        }
-        finally {
-            btn.disabled = false;
-        }
-    };
-}
-// Keep bootstrap sequencing explicit even though the dashboard bundle is ESM.
 void (async () => {
     ui.init();
-    wireChromeControls();
-    wireBotOnboardingButton();
-    wireCreateSessionButton();
+    const host = document.getElementById('app-root');
+    if (!host)
+        throw new Error('missing dashboard app root');
+    initFloatingScrollbars(host);
+    appRoot = createRoot(host);
+    renderShell();
     ui.on(() => {
-        paintChrome();
-        paintAttentionStrip();
+        renderShell();
         if (routeState.rerenderOnUiChange)
             void route();
     });
-    paintChrome();
-    paintAttentionStrip();
-    // Resolve authed/publicReadOnly BEFORE first render so the management nav is
-    // hidden and route guards are active for read-only visitors from frame one.
+    store.on(() => {
+        renderShell();
+    });
     await loadAuthState();
-    applyAuthVisibility();
+    renderShell();
     void checkUpdateBadge();
     initOwnerAvatar();
     try {
@@ -410,7 +423,9 @@ void (async () => {
         console.error('botmux dashboard bootstrap failed', err);
         store.setOnline(false);
     }
-    window.addEventListener('hashchange', () => void route());
+    void loadNameMaps().then(renderShell);
+    void loadGroupsSnapshot().then(renderShell);
+    window.addEventListener('hashchange', () => { void route(); });
     void route();
 })();
 //# sourceMappingURL=app.js.map