dsh-mega-chat-nav 0.1.1

package/lib/client/components/NavOverlay.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// shell.overlay 浮层：解析当前会话 → 订阅投影 face → 几何钉到对话列 → 渲染圆点轨
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useScope } from "../hooks.js";
+import { useJump } from "../engines/useJump.js";
+import { useScrollSpy } from "../engines/useScrollSpy.js";
+import { useAtBottom } from "../engines/useAtBottom.js";
+import { isChatViewVisible, hasTrajectoryView } from "../pure.js";
+import { DotRail } from "./DotRail.js";
+const EDGE = 12;
+function currentSessionId(value) {
+    if (typeof value === 'string' && value.length > 0)
+        return value;
+    if (value && typeof value === 'object') {
+        const id = value.id;
+        if (typeof id === 'string' && id.length > 0)
+            return id;
+    }
+    return undefined;
+}
+/** 会话滚动容器（钉位基准） */
+function hostElement() {
+    return (document.querySelector('[data-conversation-scroll]') ??
+        document.querySelector('[data-slot="conversation"]'));
+}
+export function NavOverlay(props) {
+    const cfg = useScope(props.scope);
+    const tr = props.t ?? ((k) => k);
+    const sessionId = currentSessionId(props.useSessions?.((s) => s.current));
+    // 投影订阅（binding.session.projections.faceOf）
+    const [wire, setWire] = useState(undefined);
+    useEffect(() => {
+        const face = props.sessions?.binding?.(sessionId ?? '')?.session?.projections?.faceOf?.('msgNavMessages');
+        if (!face) {
+            setWire(undefined);
+            return;
+        }
+        const sync = () => { setWire(face.getSnapshot()); };
+        sync();
+        return face.subscribe(sync);
+    }, [sessionId, props.sessions]);
+    const items = wire?.items ?? [];
+    // 几何定位：钉到对话列（含边缘偏移）
+    const alignRef = useRef(cfg?.align ?? 'right');
+    alignRef.current = cfg?.align ?? 'right';
+    const [pos, setPos] = useState(null);
+    useEffect(() => {
+        let raf = 0;
+        let stopped = false;
+        const measure = () => {
+            if (stopped)
+                return;
+            const host = hostElement();
+            if (!host) {
+                setPos(null);
+                return;
+            }
+            const r = host.getBoundingClientRect();
+            const next = { top: r.top, height: r.height };
+            if (alignRef.current === 'right') {
+                next.right = Math.max(EDGE, window.innerWidth - r.right + EDGE);
+            }
+            else {
+                next.left = Math.max(EDGE, r.left + EDGE);
+            }
+            setPos((prev) => prev &&
+                Math.abs(prev.top - next.top) < 1 &&
+                Math.abs(prev.height - next.height) < 1 &&
+                prev.left === next.left &&
+                prev.right === next.right
+                ? prev
+                : next);
+            raf = requestAnimationFrame(measure);
+        };
+        raf = requestAnimationFrame(measure);
+        const watch = hostElement();
+        let ro = null;
+        if (watch) {
+            ro = new ResizeObserver(() => { raf = requestAnimationFrame(measure); });
+            ro.observe(watch);
+        }
+        window.addEventListener('resize', measure);
+        const iv = setInterval(measure, 2000);
+        return () => {
+            stopped = true;
+            cancelAnimationFrame(raf);
+            ro?.disconnect();
+            window.removeEventListener('resize', measure);
+            clearInterval(iv);
+        };
+    }, []);
+    // TabGate
+    const [active, setActive] = useState(true);
+    useEffect(() => {
+        let stopped = false;
+        let raf = 0;
+        const check = () => {
+            if (stopped)
+                return;
+            const next = isChatViewVisible(document) && !hasTrajectoryView(document);
+            setActive((prev) => (prev === next ? prev : next));
+            raf = requestAnimationFrame(check);
+        };
+        raf = requestAnimationFrame(check);
+        return () => { stopped = true; cancelAnimationFrame(raf); };
+    }, []);
+    const keys = useMemo(() => items.filter((it) => it.role === 'user' || it.role === 'steering').map((it) => it.key), [items]);
+    const atBottom = useAtBottom();
+    const activeKey = useScrollSpy({
+        rule: cfg?.anchorRule ?? 'line40',
+        keys,
+        enabled: active && keys.length > 0,
+        atBottom: () => atBottom,
+    });
+    const { failed, jump } = useJump(cfg?.scrollBehavior ?? 'smooth', cfg?.pulseMs ?? 1200, {
+        getSession: () => props.sessions?.binding?.(sessionId ?? '')?.session,
+    });
+    if (!cfg?.enabled || !active)
+        return null;
+    return (_jsx(DotRail, { items: items, align: cfg.align ?? 'right', cfg: cfg, t: tr, activeKey: activeKey, failed: failed, onJump: (k) => { void jump(k); }, pos: pos }));
+}

package/lib/client/components/NavRail.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 简约导航条（参考 question-nav 形态）：竖排圆点迷你图 + 悬停预览卡 + 滚动高亮 + 跳转
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useScope } from "../hooks.js";
+import { useJump } from "../engines/useJump.js";
+import { isChatViewVisible, hasTrajectoryView } from "../pure.js";
+import { VirtualList } from "../virtual/VirtualList.js";
+import { useScrollSpy } from "../engines/useScrollSpy.js";
+import { useAtBottom } from "../engines/useAtBottom.js";
+import { formatTime, truncate } from "../pure.js";
+/** 圆点行高：8px 点 + 6px 间距 */
+const DOT_STEP = 14;
+/** 悬停波纹缩放（选中点与上下邻居逐级）：FOCUS_RADIUS=2 */
+const RIPPLE = [2.0, 1.55, 1.25];
+function rippleScale(dist) {
+    if (dist < RIPPLE.length)
+        return RIPPLE[dist];
+    return 1;
+}
+/** 圆点轨条目：用户/steering 主消息（assistant 不进圆点轨） */
+function userItems(items) {
+    return items.filter((it) => it.role === 'user' || it.role === 'steering');
+}
+export function NavRail(props) {
+    const cfg = useScope(props.scope);
+    const wire = props.useProjection?.('msgNavMessages');
+    const all = wire?.items ?? [];
+    const items = useMemo(() => userItems(all), [all]);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [viewportH, setViewportH] = useState(360);
+    const [hoverKey, setHoverKey] = useState(null);
+    const bodyRef = useRef(null);
+    const atBottom = useAtBottom();
+    const tr = props.t ?? ((k) => k);
+    const enabled = cfg?.enabled ?? true;
+    const align = cfg?.align ?? 'right';
+    // TabGate：chat 视图可见（防御 trajectory）
+    const [active, setActive] = useState(true);
+    useEffect(() => {
+        let stopped = false;
+        let raf = 0;
+        const check = () => {
+            if (stopped)
+                return;
+            const next = isChatViewVisible(document) && !hasTrajectoryView(document);
+            setActive((prev) => (prev === next ? prev : next));
+            raf = requestAnimationFrame(check);
+        };
+        raf = requestAnimationFrame(check);
+        return () => { stopped = true; cancelAnimationFrame(raf); };
+    }, []);
+    // 视口高度跟随容器
+    useEffect(() => {
+        const el = bodyRef.current;
+        if (!el)
+            return;
+        const ro = new ResizeObserver(() => {
+            const h = el.clientHeight;
+            setViewportH((prev) => (Math.abs(prev - h) > 1 ? h : prev));
+        });
+        ro.observe(el);
+        setViewportH(el.clientHeight || 360);
+        return () => ro.disconnect();
+    }, []);
+    const keys = items.map((it) => it.key);
+    const activeKey = useScrollSpy({
+        rule: cfg?.anchorRule ?? 'line40',
+        keys,
+        enabled: items.length > 0 && active,
+        atBottom: () => atBottom,
+    });
+    const { failed, jump } = useJump(cfg?.scrollBehavior ?? 'smooth', cfg?.pulseMs ?? 1200, {
+        getSession: () => {
+            const b = props.sessions?.binding?.(props.sessionId ?? '');
+            return b?.session;
+        },
+    });
+    const hoverIdx = hoverKey ? keys.indexOf(hoverKey) : -1;
+    const hovered = hoverIdx >= 0 ? items[hoverIdx] : undefined;
+    const pinned = useMemo(() => {
+        const s = new Set();
+        if (activeKey)
+            s.add(activeKey);
+        if (hoverKey)
+            s.add(hoverKey);
+        return s.size > 0 ? s : undefined;
+    }, [activeKey, hoverKey]);
+    if (!enabled || !active)
+        return null;
+    return (_jsxs("div", { className: 'mgs-dots mgs-dots--' + align, role: "navigation", "aria-label": tr('a11y.list'), children: [_jsx("div", { className: "mgs-dots__track", ref: bodyRef, children: items.length === 0 ? (_jsx("div", { className: "mgs-dots__empty", children: tr('empty') })) : (_jsx(VirtualList, { items: items, itemHeight: DOT_STEP, viewportHeight: viewportH, scrollTop: scrollTop, onScrollTopChange: setScrollTop, keyOf: (it) => it.key, pinned: pinned, renderItem: (it, i) => {
+                        const dist = hoverIdx >= 0 ? Math.abs(i - hoverIdx) : 99;
+                        const scale = rippleScale(dist);
+                        return (_jsx("button", { type: "button", className: 'mgs-dot' +
+                                (it.key === activeKey ? ' mgs-dot--active' : '') +
+                                (it.key === hoverKey ? ' mgs-dot--hover' : ''), style: { transform: 'scale(' + scale + ')' }, "aria-label": truncate(it.text, 40), "aria-current": it.key === activeKey ? 'step' : undefined, onClick: () => { void jump(it.key); }, onMouseEnter: () => setHoverKey(it.key), onMouseLeave: () => setHoverKey((k) => (k === it.key ? null : k)) }));
+                    } })) }), hovered && (_jsxs("div", { className: 'mgs-dots__tip mgs-dots__tip--' + align, children: [_jsx("div", { className: "mgs-dots__tip-text", children: truncate(hovered.text, 80) || tr('empty') }), _jsx("div", { className: "mgs-dots__tip-time", children: formatTime(hovered.time) })] })), failed && _jsx("div", { className: "mgs-dots__hint", children: tr('jump.failed') })] }));
+}

package/lib/client/components/RailDispatch.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// 风格分发：按当前配置的 style 挂载对应风格轨组件（minimal 圆点轨 / codex 刻度轨）。
+// 风格配置各自独立（styles.<style> 段），此处仅做选择——切换风格即卸载/重挂风格轨。
+import { useEffect, useState } from 'react';
+import { DEFAULT_STYLE } from "../settings.js";
+import { MinimalRail } from "./minimal/MinimalRail.js";
+import { CodexRail } from "./codex/CodexRail.js";
+import { DeepseekRail } from "./deepseek/DeepseekRail.js";
+export function RailDispatch(props) {
+    const [style, setStyle] = useState(() => props.injected?.style() ?? DEFAULT_STYLE);
+    useEffect(() => {
+        if (props.injected === undefined)
+            return;
+        return props.injected.subscribeSettings(() => setStyle(props.injected?.style() ?? DEFAULT_STYLE));
+    }, [props.injected]);
+    const railProps = { injected: props.injected, useSessions: props.useSessions, t: props.t };
+    if (style === 'codex')
+        return _jsx(CodexRail, { ...railProps });
+    if (style === 'deepseek')
+        return _jsx(DeepseekRail, { ...railProps });
+    return _jsx(MinimalRail, { ...railProps });
+}

package/lib/client/components/RailHost.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 导航条宿主：TabGate 守卫 + 折叠/对齐/风格分发 + 搜索/配置入口 + 共用跳转
+import { useEffect, useState } from 'react';
+import { useScope } from "../hooks.js";
+import { useJump } from "../engines/useJump.js";
+import { isChatViewVisible, hasTrajectoryView } from "../pure.js";
+import { SearchBox } from "./SearchBox.js";
+import { ConfigPanel } from "./ConfigPanel.js";
+import { MinimalRail } from "./minimal/MinimalRail.js";
+import { DeepseekRail } from "./deepseek/DeepseekRail.js";
+import { CodexRail } from "./codex/CodexRail.js";
+export function RailHost(props) {
+    const cfg = useScope(props.scope);
+    const wire = props.useProjection?.('msgNavMessages');
+    const items = wire?.items ?? [];
+    const [collapsed, setCollapsed] = useState(false);
+    const [searchOpen, setSearchOpen] = useState(false);
+    const [configOpen, setConfigOpen] = useState(false);
+    const [active, setActive] = useState(true);
+    const tr = props.t ?? ((k) => k);
+    // TabGate：chat 视图可见（conversation.input.dock 已限 chat 域，此处防御 trajectory）
+    useEffect(() => {
+        let stopped = false;
+        let raf = 0;
+        const check = () => {
+            if (stopped)
+                return;
+            const next = isChatViewVisible(document) && !hasTrajectoryView(document);
+            setActive((prev) => (prev === next ? prev : next));
+            raf = requestAnimationFrame(check);
+        };
+        raf = requestAnimationFrame(check);
+        return () => { stopped = true; cancelAnimationFrame(raf); };
+    }, []);
+    // Esc 收起（a11yShortcuts 开启时）
+    useEffect(() => {
+        if (!cfg?.general.a11yShortcuts)
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape') {
+                setSearchOpen(false);
+                setConfigOpen(false);
+                setCollapsed(true);
+            }
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [cfg?.general.a11yShortcuts]);
+    const { failed, jump } = useJump(cfg?.general.scrollBehavior ?? 'smooth', cfg?.general.pulseMs ?? 1200, {
+        getSession: () => {
+            const b = props.sessions?.binding?.(props.sessionId ?? '');
+            return b?.session;
+        },
+    });
+    if (!cfg || !active || !cfg.general.enabled)
+        return null;
+    const g = cfg.general;
+    const style = g.style;
+    const common = {
+        items,
+        align: g.align,
+        collapsed,
+        setCollapsed,
+        t: tr,
+        general: g,
+        jump,
+    };
+    let body;
+    switch (style) {
+        case 'deepseek':
+            body = _jsx(DeepseekRail, { ...common, cfg: cfg.styles.deepseek });
+            break;
+        case 'codex':
+            body = _jsx(CodexRail, { ...common, cfg: cfg.styles.codex });
+            break;
+        default: body = _jsx(MinimalRail, { ...common, cfg: cfg.styles.minimal });
+    }
+    return (_jsxs("div", { className: 'mgs-rail mgs-rail--' + g.align, role: "navigation", "aria-label": tr('a11y.list'), children: [_jsxs("div", { className: "mgs-rail__bar", children: [_jsx("button", { type: "button", className: "mgs-rail__toggle", onClick: () => setCollapsed((v) => !v), "aria-label": tr(collapsed ? 'collapse.expand' : 'collapse.collapse'), children: collapsed ? '›' : '‹' }), !collapsed && g.showSearch && (_jsx("button", { type: "button", className: "mgs-rail__toggle", "aria-label": tr('a11y.search'), onClick: () => setSearchOpen((v) => !v), children: "\uD83D\uDD0D" })), _jsx("button", { type: "button", className: "mgs-rail__toggle", "aria-label": tr('settings.entry'), onClick: () => setConfigOpen((v) => !v), children: "\u2699" })] }), !collapsed && body, !collapsed && failed && _jsx("div", { className: "mgs-rail__hint", children: tr('jump.failed') }), !collapsed && configOpen && (_jsx("div", { className: "mgs-rail__search", children: _jsx(ConfigPanel, { scope: props.scope, t: tr, onClose: () => setConfigOpen(false) }) })), !collapsed && searchOpen && (_jsx("div", { className: "mgs-rail__search", children: _jsx(SearchBox, { sessionId: props.sessionId, debounceMs: g.searchDebounceMs, t: tr, onJump: (key) => { void jump(key); setSearchOpen(false); }, onClose: () => setSearchOpen(false) }) }))] }));
+}

package/lib/client/components/SearchBox.js

@@ -0,0 +1,66 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 搜索浮层：防抖 + AbortController + 结果渲染（命中词高亮）+ 点击直达
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { formatTime } from "../pure.js";
+function HighlightedSnippet({ hit }) {
+    if (hit.hitStart < 0 || hit.hitLen <= 0)
+        return _jsx(_Fragment, { children: hit.snippet });
+    const before = hit.snippet.slice(0, hit.hitStart);
+    const mid = hit.snippet.slice(hit.hitStart, hit.hitStart + hit.hitLen);
+    const after = hit.snippet.slice(hit.hitStart + hit.hitLen);
+    return (_jsxs(_Fragment, { children: [before, _jsx("mark", { className: "mgs-search__mark", children: mid }), after] }));
+}
+export function SearchBox(props) {
+    const [q, setQ] = useState('');
+    const [results, setResults] = useState([]);
+    const [busy, setBusy] = useState(false);
+    const [empty, setEmpty] = useState(false);
+    const abortRef = useRef(null);
+    const timerRef = useRef(0);
+    const inputRef = useRef(null);
+    const run = useCallback((query) => {
+        abortRef.current?.abort();
+        const ac = new AbortController();
+        abortRef.current = ac;
+        const trimmed = query.trim();
+        if (trimmed.length < 1) {
+            setResults([]);
+            setEmpty(false);
+            setBusy(false);
+            return;
+        }
+        setBusy(true);
+        const url = '/mega-chat-nav/search?session=' + encodeURIComponent(props.sessionId ?? '') +
+            '&q=' + encodeURIComponent(trimmed) + '&limit=50';
+        fetch(url, { signal: ac.signal })
+            .then((r) => r.json())
+            .then((data) => {
+            if (!data.ok) {
+                setResults([]);
+                setEmpty(false);
+                return;
+            }
+            const hits = data.hits ?? [];
+            setResults(hits);
+            setEmpty(hits.length === 0);
+        })
+            .catch((e) => {
+            if (e.name !== 'AbortError') {
+                setResults([]);
+                setEmpty(false);
+            }
+        })
+            .finally(() => setBusy(false));
+    }, [props.sessionId]);
+    const onChange = (v) => {
+        setQ(v);
+        clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => run(v), props.debounceMs);
+    };
+    useEffect(() => {
+        inputRef.current?.focus();
+        return () => { clearTimeout(timerRef.current); abortRef.current?.abort(); };
+    }, []);
+    return (_jsxs("div", { className: "mgs-search", role: "dialog", "aria-label": props.t('search.placeholder'), children: [_jsx("input", { ref: inputRef, className: "mgs-search__input", value: q, placeholder: props.t('search.placeholder'), onChange: (e) => onChange(e.target.value), onKeyDown: (e) => { if (e.key === 'Escape')
+                    props.onClose(); } }), busy && _jsx("div", { className: "mgs-search__busy", children: "\u2026" }), _jsxs("div", { className: "mgs-search__results", children: [empty && _jsx("div", { className: "mgs-search__empty", children: props.t('search.empty') }), results.map((hit) => (_jsxs("button", { type: "button", className: "mgs-search__hit", onClick: () => props.onJump(hit.key), children: [_jsx("span", { className: 'mgs-search__role mgs-search__role--' + hit.role, "aria-hidden": "true" }), _jsx("span", { className: "mgs-search__text", children: _jsx(HighlightedSnippet, { hit: hit }) }), _jsx("span", { className: "mgs-search__time", children: formatTime(hit.time) })] }, hit.key + ':' + hit.seq)))] })] }));
+}

package/lib/client/components/SettingsPage.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 完整配置页：全部配置项 + 导出/导入（mega-settings 收纳页 / 自足入口共用）
+import { useState } from 'react';
+import { readConfig, setGeneral, setStyleConfig, exportConfig, importConfig } from "../config.js";
+import { Switch } from "./ConfigPanel.js";
+const STYLES = ['minimal', 'deepseek', 'codex'];
+const ANCHORS = ['line40', 'top', 'center', 'lastInteraction'];
+export function SettingsPage(props) {
+    const scope = props.scope;
+    const cfg = readConfig(scope);
+    const [ioText, setIoText] = useState('');
+    const [ioError, setIoError] = useState(null);
+    const [ioOk, setIoOk] = useState(false);
+    const tr = props.t ?? ((k) => k);
+    if (props.hosted) {
+        return _jsx("div", { className: "mgs-panel mgs-config", children: tr('settings.hosted') });
+    }
+    if (!scope) {
+        return _jsx("div", { className: "mgs-panel mgs-config", children: tr('preview.fallback') });
+    }
+    if (!cfg) {
+        return _jsx("div", { className: "mgs-panel mgs-config", children: tr('settings.unavailable') });
+    }
+    const g = cfg.general;
+    const setG = (patch) => void setGeneral(scope, patch);
+    const setS = (style, patch) => void setStyleConfig(scope, style, patch);
+    const doExport = () => { setIoText(exportConfig(cfg)); setIoError(null); setIoOk(false); };
+    const doImport = async () => {
+        const err = await importConfig(scope, ioText);
+        if (err) {
+            setIoError(err);
+            setIoOk(false);
+        }
+        else {
+            setIoError(null);
+            setIoOk(true);
+        }
+    };
+    return (_jsxs("div", { className: "mgs-panel mgs-settings", children: [_jsx("div", { className: "mgs-panel__head", children: _jsx("span", { className: "mgs-panel__title", children: tr('settings.entry') }) }), _jsx(Field, { label: tr('config.enabled'), children: _jsx(Switch, { checked: g.enabled, onChange: (v) => setG({ enabled: v }) }) }), _jsx(Field, { label: tr('config.style'), children: _jsx(Seg, { options: STYLES.map((s) => ({ value: s, label: tr('config.style.' + s) })), value: g.style, onChange: (v) => setG({ style: v }) }) }), _jsx(Field, { label: tr('config.align'), children: _jsx(Seg, { options: ['left', 'right'].map((a) => ({ value: a, label: tr('config.align.' + a) })), value: g.align, onChange: (v) => setG({ align: v }) }) }), _jsx(Field, { label: tr('config.panelWidth'), children: _jsx("input", { className: "mgs-input mgs-input--num", type: "number", min: 200, max: 400, value: g.panelWidth, onChange: (e) => setG({ panelWidth: Math.min(400, Math.max(200, Number(e.target.value) || 280)) }) }) }), _jsx(Field, { label: tr('config.collapsed'), children: _jsx(Switch, { checked: g.collapsed, onChange: (v) => setG({ collapsed: v }) }) }), _jsx(Field, { label: tr('config.themeMode'), children: _jsx(Seg, { options: ['follow', 'custom'].map((m) => ({ value: m, label: tr('config.themeMode.' + m) })), value: g.themeMode, onChange: (v) => setG({ themeMode: v }) }) }), _jsx(Field, { label: tr('config.showSearch'), children: _jsx(Switch, { checked: g.showSearch, onChange: (v) => setG({ showSearch: v }) }) }), _jsx(Field, { label: tr('config.searchDebounceMs'), children: _jsx("input", { className: "mgs-input mgs-input--num", type: "number", min: 50, max: 2000, value: g.searchDebounceMs, onChange: (e) => setG({ searchDebounceMs: Math.min(2000, Math.max(50, Number(e.target.value) || 200)) }) }) }), _jsx(Field, { label: tr('config.anchorRule'), children: _jsx(Seg, { options: ANCHORS.map((a) => ({ value: a, label: tr('config.anchorRule.' + a) })), value: g.anchorRule, onChange: (v) => setG({ anchorRule: v }) }) }), _jsx(Field, { label: tr('config.followNewMessage'), children: _jsx(Switch, { checked: g.followNewMessage, onChange: (v) => setG({ followNewMessage: v }) }) }), _jsx(Field, { label: tr('config.scrollBehavior'), children: _jsx(Seg, { options: ['smooth', 'instant'].map((s) => ({ value: s, label: tr('config.scrollBehavior.' + s) })), value: g.scrollBehavior, onChange: (v) => setG({ scrollBehavior: v }) }) }), _jsx(Field, { label: tr('config.pulseMs'), children: _jsx("input", { className: "mgs-input mgs-input--num", type: "number", min: 200, max: 5000, value: g.pulseMs, onChange: (e) => setG({ pulseMs: Math.min(5000, Math.max(200, Number(e.target.value) || 1200)) }) }) }), _jsx(Field, { label: tr('config.summaryLength'), children: _jsx("input", { className: "mgs-input mgs-input--num", type: "number", min: 20, max: 80, value: g.summaryLength, onChange: (e) => setG({ summaryLength: Math.min(80, Math.max(20, Number(e.target.value) || 60)) }) }) }), _jsx(Field, { label: tr('config.hoverPreview'), children: _jsx(Switch, { checked: g.hoverPreview, onChange: (v) => setG({ hoverPreview: v }) }) }), _jsx("div", { className: "mgs-panel__sub", children: tr('settings.style.minimal') }), _jsx(Field, { label: tr('config.density'), children: _jsx(Seg, { options: ['compact', 'normal', 'loose'].map((d) => ({ value: d, label: tr('config.density.' + d) })), value: cfg.styles.minimal.density, onChange: (v) => setS('minimal', { density: v }) }) }), _jsx(Field, { label: tr('config.showTime'), children: _jsx(Switch, { checked: cfg.styles.minimal.showTime, onChange: (v) => setS('minimal', { showTime: v }) }) }), _jsx(Field, { label: tr('config.showSeq'), children: _jsx(Switch, { checked: cfg.styles.minimal.showSeq, onChange: (v) => setS('minimal', { showSeq: v }) }) }), _jsx("div", { className: "mgs-panel__sub", children: tr('settings.style.deepseek') }), _jsx(Field, { label: tr('config.ds.pillWidth'), children: _jsx("input", { className: "mgs-input mgs-input--num", type: "number", value: cfg.styles.deepseek.pillWidth, onChange: (e) => setS('deepseek', { pillWidth: Number(e.target.value) || 34 }) }) }), _jsx(Field, { label: tr('config.ds.panelWidth'), children: _jsx("input", { className: "mgs-input mgs-input--num", type: "number", value: cfg.styles.deepseek.panelWidth, onChange: (e) => setS('deepseek', { panelWidth: Number(e.target.value) || 272 }) }) }), _jsx(Field, { label: tr('config.ds.barGap'), children: _jsx("input", { className: "mgs-input mgs-input--num", type: "number", value: cfg.styles.deepseek.barGap, onChange: (e) => setS('deepseek', { barGap: Number(e.target.value) || 30 }) }) }), _jsx(Field, { label: tr('config.ds.hoverExpand'), children: _jsx(Switch, { checked: cfg.styles.deepseek.hoverExpand, onChange: (v) => setS('deepseek', { hoverExpand: v }) }) }), _jsx("div", { className: "mgs-panel__sub", children: tr('settings.style.codex') }), _jsx(Field, { label: tr('config.cx.tickStep'), children: _jsx("input", { className: "mgs-input mgs-input--num", type: "number", value: cfg.styles.codex.tickStep, onChange: (e) => setS('codex', { tickStep: Number(e.target.value) || 10 }) }) }), _jsx(Field, { label: tr('config.cx.fadeHeight'), children: _jsx("input", { className: "mgs-input mgs-input--num", type: "number", value: cfg.styles.codex.fadeHeight, onChange: (e) => setS('codex', { fadeHeight: Number(e.target.value) || 40 }) }) }), _jsx(Field, { label: tr('config.cx.hoverPreview'), children: _jsx(Switch, { checked: cfg.styles.codex.hoverPreview, onChange: (v) => setS('codex', { hoverPreview: v }) }) }), _jsx("div", { className: "mgs-panel__sub", children: tr('settings.io') }), _jsxs("div", { className: "mgs-row mgs-row--io", children: [_jsx("button", { type: "button", className: "mgs-btn", onClick: doExport, children: tr('settings.export') }), _jsx("button", { type: "button", className: "mgs-btn", onClick: doImport, children: tr('settings.import') })] }), _jsx("textarea", { className: "mgs-input mgs-input--io", rows: 5, placeholder: tr('settings.io.hint'), value: ioText, onChange: (e) => setIoText(e.target.value) }), ioError && _jsxs("div", { className: "mgs-rail__hint", children: [tr('settings.io.error'), ": ", ioError] }), ioOk && _jsx("div", { className: "mgs-settings__ok", children: tr('settings.io.ok') })] }));
+}
+function Field({ label, children }) {
+    return (_jsxs("div", { className: "mgs-row", children: [_jsx("span", { className: "mgs-row__label", children: label }), children] }));
+}
+function Seg(props) {
+    return (_jsx("div", { className: "mgs-seg", children: props.options.map((o) => (_jsx("button", { type: "button", className: 'mgs-seg__item' + (props.value === o.value ? ' mgs-seg__item--active' : ''), onClick: () => props.onChange(o.value), children: o.label }, o.value))) }));
+}

package/lib/client/components/StandaloneSettings.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// 自足完整配置入口：宿主（mega-settings）已收纳时让位提示
+import { useEffect, useState } from 'react';
+import { SettingsPage } from "./SettingsPage.js";
+export function StandaloneSettings(props) {
+    const [hosted, setHosted] = useState(false);
+    useEffect(() => {
+        const check = () => {
+            const n = props.slots?.entries?.('mega.settings.member')?.length ?? 0;
+            setHosted(n > 0);
+        };
+        check();
+        return props.slots?.subscribe?.('mega.settings.member', check);
+    }, [props.slots]);
+    return _jsx(SettingsPage, { scope: props.scope, t: props.t ?? ((k) => k), hosted: hosted });
+}

package/lib/client/components/codex/CodexRail.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useEffect, useRef, useState } from 'react';
+import { useMarkerData, usePinning, useReadingSpy, useBandPaging, useCardPreview, useFailureNotice, useLoadingNotice, useFavorites, useMobileMode, useMobileSearchButton, useNavSettings, clockText, ROW_HEIGHT, usePeekState, useClosePopoversOnOutside } from "../rail/useRail.js";
+import { Cards } from "../rail/cards.js";
+import { PagingButton } from "../rail/paging.js";
+import { Hint } from "../rail/hint.js";
+import { SearchBox } from "../rail/search.js";
+import { QuickSettings } from "../rail/quick-settings.js";
+import { STYLE_CAPABILITIES, BAND_HEIGHT_PX } from "../../settings.js";
+/** 刻度槽组件：纯展示（hover 波纹由 CSS 级联完成，React 不参与逐槽状态）——
+ *  memo 化后只有 current/jumping/focused/reveal 变化才重渲，长会话 hover 不再整列刷新 */
+const CodexSlot = memo(function CodexSlot(props) {
+    const { marker, current, focused, jumping, label, reveal } = props;
+    const cls = ['mgcn-cxSlot'];
+    if (focused)
+        cls.push('mgcn-cxFocused');
+    if (current)
+        cls.push('mgcn-cxCurrent');
+    if (jumping)
+        cls.push('mgcn-cxJump');
+    if (reveal !== undefined)
+        cls.push(reveal.dir === 1 ? 'mgcn-cxEnterFromBottom' : 'mgcn-cxEnterFromTop');
+    return (_jsx("button", { type: "button", className: cls.join(' '), style: reveal !== undefined ? { animationDelay: reveal.order * 35 + 'ms' } : undefined, "data-mega-chat-nav-key": marker.key, "aria-label": label, children: _jsx("i", { className: "mgcn-cxMark", "aria-hidden": "true" }) }));
+});
+/** 阅读位置跟随：正文滚动时带内刻度平滑居中（点击跳转后不冻结） */
+function useFollowCurrent(listRef, currentKey, markers, resetKey) {
+    useEffect(() => {
+        const list = listRef.current;
+        if (list === null || currentKey === null)
+            return;
+        const index = markers.findIndex((d) => d.key === currentKey);
+        if (index < 0)
+            return;
+        const slotTop = 8 + index * ROW_HEIGHT;
+        const contentHeight = 16 + markers.length * ROW_HEIGHT;
+        const maxScroll = Math.max(0, contentHeight - list.clientHeight);
+        const target = Math.max(0, Math.min(slotTop - list.clientHeight / 2 + ROW_HEIGHT / 2, maxScroll));
+        if (Math.abs(target - list.scrollTop) < 2)
+            return;
+        list.scrollTo({ top: target, behavior: 'smooth' });
+        // resetKey：鼠标离开导航区域时 bump → effect 重跑一次跟随
+    }, [currentKey, markers, resetKey]);
+}
+export function CodexRail(props) {
+    const { injected, useSessions, t } = props;
+    const panelRef = useRef(null);
+    const listRef = useRef(null);
+    const [jumpingKey, setJumpingKey] = useState(null);
+    const [configOpen, setConfigOpen] = useState(false);
+    const [searchOpen, setSearchOpen] = useState(false);
+    const [favFilter, setFavFilter] = useState(false);
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    // 鼠标离开导航区域触发一次跟随：仅作 effect 重跑计数
+    const [followTick, setFollowTick] = useState(0);
+    const { showPeek, hidePeek, peekCls } = usePeekState();
+    // 上次 hover 命中的槽 key（同一槽内 mouseover 高频触发不重复开卡）
+    const lastHoverKey = useRef(null);
+    const mobile = useMobileMode();
+    const { sessionId, visible, markers } = useMarkerData(injected, useSessions);
+    const { favorites, toggle: toggleFavorite } = useFavorites(sessionId);
+    const settings = useNavSettings(injected);
+    const { style, align, bandHeight, cardCount, cardItems, markTone, showPaging } = settings;
+    useMobileSearchButton(() => setDrawerOpen(true), mobile && markers.length > 0, align, t('search.placeholder'));
+    const effectiveFilter = favFilter && favorites.size > 0;
+    const displayMarkers = effectiveFilter
+        ? markers.filter((m) => m.members.some((k) => favorites.has(k)))
+        : markers;
+    usePinning(panelRef, visible, align, settings.railOffset, sessionId);
+    const [currentKey, forceKey] = useReadingSpy(visible, displayMarkers);
+    const { scrollable, revealed, syncScroll, pageBy, canPageUp, canPageDown } = useBandPaging(listRef, displayMarkers);
+    const caps = STYLE_CAPABILITIES[style];
+    const focusRadius = Math.floor((cardCount - 1) / 2);
+    const { focus, openCards, cancelClear, scheduleClear } = useCardPreview(displayMarkers, align, focusRadius, caps.hoverCards);
+    const hint = useFailureNotice(t);
+    const loading = useLoadingNotice(t);
+    useClosePopoversOnOutside(configOpen, searchOpen, () => {
+        setConfigOpen(false);
+        setSearchOpen(false);
+    });
+    useFollowCurrent(listRef, currentKey, displayMarkers, followTick);
+    if (!visible || injected === undefined || markers.length === 0)
+        return null;
+    const onJump = (slot) => {
+        if (sessionId === undefined)
+            return;
+        setJumpingKey(slot.key);
+        forceKey(slot.key);
+        const currentMarker = currentKey === null ? undefined : displayMarkers.find((m) => m.key === currentKey);
+        injected.jump(sessionId, slot.key, slot.seq, currentMarker?.seq);
+        window.setTimeout(() => setJumpingKey((k) => (k === slot.key ? null : k)), 600);
+    };
+    if (mobile) {
+        return (_jsx(_Fragment, { children: drawerOpen ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "mgcn-drawerMask", onClick: () => setDrawerOpen(false) }), _jsx("div", { className: "mgcn-searchDrawer", role: "dialog", "aria-label": t('search.placeholder'), children: _jsx(SearchBox, { sessionId: sessionId, scopes: settings.searchScopes, t: t, onJump: (key, seq) => {
+                                setDrawerOpen(false);
+                                onJump({ key, seq: seq ?? 0, turn: null, time: Date.now(), texts: [], members: [key] });
+                            }, onClose: () => setDrawerOpen(false), emptyContent: _jsx("div", { className: "mgcn-drawerList", children: [...markers].reverse().slice(0, 20).map((m) => (_jsxs("button", { type: "button", className: "mgcn-drawerItem", onClick: () => { setDrawerOpen(false); onJump(m); }, children: [_jsxs("span", { className: "mgcn-drawerItemTitle", children: [_jsx("span", { className: "mgcn-drawerItemTurn", children: m.turn !== null ? 'Turn ' + m.turn : '' }), _jsx("span", { className: "mgcn-drawerItemTime", children: clockText(m.time, Date.now()) })] }), _jsx("span", { className: "mgcn-drawerItemText", children: m.texts[0] ?? '' })] }, m.key))) }) }) })] })) : null }));
+    }
+    const hoverOff = () => {
+        lastHoverKey.current = null;
+        scheduleClear();
+    };
+    // 事件委托（槽是 memo 纯展示，事件挂在列表容器上）：
+    //  - 用 onMouseOver（真实冒泡，槽间移动每次触发）而非 onMouseEnter
+    //    （容器级 mouseenter 只在从外部进入时触发一次，槽间移动不会重开卡）
+    //  - hover 命中槽 → 打开/切换到该槽的悬浮卡（波纹由 CSS :hover 完成）
+    //  - click 命中槽 → 跳转
+    const onListOver = (e) => {
+        const el = e.target;
+        const slot = el.closest('[data-mega-chat-nav-key]');
+        if (slot === null)
+            return;
+        const key = slot.dataset.megaChatNavKey;
+        if (key === undefined || key === lastHoverKey.current)
+            return;
+        const marker = displayMarkers.find((m) => m.key === key);
+        if (marker === undefined)
+            return;
+        lastHoverKey.current = key;
+        cancelClear();
+        openCards(marker, slot);
+    };
+    const onListClick = (e) => {
+        const el = e.target;
+        const slot = el.closest('[data-mega-chat-nav-key]');
+        if (slot === null)
+            return;
+        const key = slot.dataset.megaChatNavKey;
+        const marker = displayMarkers.find((m) => m.key === key);
+        if (marker !== undefined)
+            onJump(marker);
+    };
+    return (_jsxs("div", { ref: panelRef, className: align === 'right' ? 'mgcn-rail mgcn-cxRail mgcn-railRight' : 'mgcn-rail mgcn-cxRail', "data-mega-chat-nav": "rail", "data-tone": markTone, onMouseEnter: showPeek, onMouseLeave: () => { hidePeek(); setFollowTick((n) => n + 1); }, children: [_jsx("div", { className: "mgcn-queue", children: displayMarkers.length === 0 ? (_jsx("div", { className: "mgcn-empty", children: t('strip.empty') })) : (_jsxs("div", { className: 'mgcn-list' + (scrollable && showPaging !== 'hide' ? '' : ' mgcn-listNoPage'), style: { '--mgcn-band-height': BAND_HEIGHT_PX.codex[bandHeight] + 'px' }, children: [_jsxs("div", { className: "mgcn-actions", children: [settings.showQuickSettings !== 'hide' ? (_jsxs("span", { className: 'mgcn-gear-wrap mgcn-gear-wrap--' + align + peekCls(settings.showQuickSettings, configOpen), children: [_jsx("button", { type: "button", className: "mgcn-config-gear", "aria-label": t('config.title'), onClick: () => { setConfigOpen((v) => !v); setSearchOpen(false); }, children: _jsxs("svg", { className: "mgcn-btn-icon", viewBox: "0 0 24 24", width: "12", height: "12", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "3", fill: "none", stroke: "currentColor", strokeWidth: "1.7" }), _jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" })] }) }), configOpen ? (_jsx(QuickSettings, { injected: injected, t: t, onClose: () => setConfigOpen(false) })) : null] })) : null, settings.showFavorites !== 'hide' ? (_jsx("span", { className: 'mgcn-gear-wrap mgcn-gear-wrap--' + align + peekCls(settings.showFavorites, false), children: _jsx("button", { type: "button", className: effectiveFilter ? 'mgcn-config-gear mgcn-favFilterOn' : 'mgcn-config-gear', "aria-label": t('fav.filter'), onClick: () => { if (favorites.size > 0)
+                                            setFavFilter((v) => !v); }, children: _jsx("svg", { className: "mgcn-btn-icon", viewBox: "0 0 16 16", width: "12", height: "12", "aria-hidden": "true", children: _jsx("path", { d: "M8 2.2l1.76 3.56 3.93.57-2.84 2.77.67 3.91L8 11.4l-3.52 1.85.67-3.91-2.84-2.77 3.93-.57z", fill: favFilter ? 'currentColor' : 'none', stroke: "currentColor", strokeWidth: "1.3", strokeLinejoin: "round" }) }) }) })) : null, settings.showSearch !== 'hide' ? (_jsxs("span", { className: 'mgcn-gear-wrap mgcn-gear-wrap--' + align + peekCls(settings.showSearch, searchOpen), children: [_jsx("button", { type: "button", className: "mgcn-config-gear", "aria-label": t('search.placeholder'), onClick: () => { setSearchOpen((v) => !v); setConfigOpen(false); }, children: _jsxs("svg", { className: "mgcn-btn-icon", viewBox: "0 0 16 16", width: "12", height: "12", "aria-hidden": "true", children: [_jsx("circle", { cx: "7", cy: "7", r: "4.5", fill: "none", stroke: "currentColor", strokeWidth: "1.6" }), _jsx("line", { x1: "10.4", y1: "10.4", x2: "14", y2: "14", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" })] }) }), searchOpen ? (_jsx(SearchBox, { sessionId: sessionId, scopes: settings.searchScopes, t: t, onJump: (key, seq) => onJump({ key, seq: seq ?? 0, turn: null, time: Date.now(), texts: [], members: [key] }), onClose: () => setSearchOpen(false) })) : null] })) : null, settings.showCount !== 'hide' ? (_jsx("span", { className: 'mgcn-count' + peekCls(settings.showCount, false), children: displayMarkers.length })) : null] }), scrollable && showPaging !== 'hide' ? (_jsx("div", { className: 'mgcn-pageUp' + peekCls(showPaging, false), children: _jsx(PagingButton, { dir: -1, visible: canPageUp, label: t('strip.up'), onEnter: cancelClear, onLeave: hoverOff, onClick: () => pageBy(-1) }) })) : null, _jsx("div", { ref: listRef, className: "mgcn-cxList", onScroll: syncScroll, onMouseLeave: hoverOff, onMouseOver: onListOver, onClick: onListClick, children: displayMarkers.map((slot) => {
+                                const current = currentKey === slot.key;
+                                const focused = focus !== null && focus.key === slot.key;
+                                const reveal = revealed?.get(slot.key);
+                                return (_jsx(CodexSlot, { marker: slot, current: current, focused: focused, jumping: jumpingKey === slot.key, label: slot.texts[0] ?? '', reveal: reveal }, slot.key));
+                            }) }), scrollable && showPaging !== 'hide' ? (_jsx("div", { className: 'mgcn-pageDown' + peekCls(showPaging, false), children: _jsx(PagingButton, { dir: 1, visible: canPageDown, label: t('strip.down'), onEnter: cancelClear, onLeave: hoverOff, onClick: () => pageBy(1) }) })) : null] })) }), loading !== null ? _jsx(Hint, { text: loading, align: align, position: "bottom", loading: true }) : hint !== null ? _jsx(Hint, { text: hint, align: align }) : null, focus !== null ? (_jsx(Cards, { focus: focus, align: align, cardItems: cardItems, favorites: favorites, onToggleFavorite: toggleFavorite, onJump: onJump, onEnter: cancelClear, onLeave: hoverOff })) : null] }));
+}