dsh-mega-chat-nav 0.1.1

package/lib/client/components/rail/cards.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+import { cardMetrics, metricsLine, clockText } from "./useRail.js";
+function favoriteButton(favorited, onClick) {
+    return (_jsx("button", { type: "button", className: favorited ? 'mgcn-cardFav mgcn-cardFavOn' : 'mgcn-cardFav', "aria-label": favorited ? 'unfavorite' : 'favorite', onClick: (e) => { e.stopPropagation(); onClick(); }, children: _jsx("svg", { viewBox: "0 0 16 16", width: "11", height: "11", "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: favorited ? 'currentColor' : 'none', stroke: "currentColor", strokeWidth: "1.3", strokeLinejoin: "round" }) }) }));
+}
+export function Cards(props) {
+    const { focus, align, cardItems, favorites, onToggleFavorite, onJump, onEnter, onLeave } = props;
+    const showTurn = cardItems.includes('turn');
+    const showDuration = cardItems.includes('duration');
+    const showFavorite = cardItems.includes('favorite');
+    return createPortal(_jsx("div", { className: align === 'right' ? 'mgcn-cascade mgcn-cascadeRight' : 'mgcn-cascade', style: {
+            ...(focus.left !== undefined ? { left: focus.left } : {}),
+            ...(focus.right !== undefined ? { right: focus.right } : {}),
+            top: focus.centerY,
+            transform: 'translateY(-50%)',
+        }, onMouseEnter: onEnter, onMouseLeave: onLeave, children: focus.items.map((item) => {
+            const metrics = cardMetrics(item.distance);
+            if (metrics === null)
+                return null;
+            const isSelected = item.distance === 0;
+            const dot = item.dot;
+            const text = dot.texts.join(' · ');
+            const cls = isSelected
+                ? 'mgcn-card mgcn-cardSelected' + (align === 'right' ? ' mgcn-cardSelectedRight' : '')
+                : 'mgcn-card';
+            const favorited = favorites.has(dot.key);
+            return (_jsxs("div", { className: cls, role: "button", tabIndex: -1, style: { width: metrics.widthPx }, onClick: () => onJump(dot), children: [_jsxs("div", { className: "mgcn-cardHead", children: [showFavorite ? favoriteButton(favorited, () => onToggleFavorite(dot.key)) : null, showTurn && isSelected && dot.turn !== null ? (_jsxs("div", { className: "mgcn-cardTitle", children: ["Turn ", dot.turn] })) : null, _jsx("div", { className: "mgcn-cardTime", children: clockText(dot.time, Date.now()) })] }), showDuration && dot.metrics !== undefined && isSelected ? (_jsx("div", { className: "mgcn-cardMetrics", children: metricsLine(dot.metrics) })) : null, _jsx("div", { className: isSelected ? 'mgcn-cardBody' : 'mgcn-cardClamp', style: isSelected
+                            ? undefined
+                            : { WebkitLineClamp: metrics.maxLines, fontSize: metrics.fontSize }, children: text })] }, dot.key));
+        }) }), document.body);
+}

package/lib/client/components/rail/hint.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 跳转失败 / 加载提示（portal 到 body）：
+//  - 失败提示：贴 rail 侧顶部（rail 左右对齐）
+//  - 加载提示：对话输入框上方细条，水平对齐相对**对话区域**左右边缘（跟随 rail 侧）
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+/** 对话区域左/右边缘到视口的距离（fixed 定位用） */
+function conversationEdge(align) {
+    const root = document.querySelector('[data-slot="conversation"] > div[data-phase]');
+    if (root === null)
+        return null;
+    const r = root.getBoundingClientRect();
+    return align === 'right' ? window.innerWidth - r.right : r.left;
+}
+export function Hint({ text, align, position = 'rail', loading = false }) {
+    const [edge, setEdge] = useState(() => conversationEdge(align));
+    useEffect(() => {
+        const measure = () => setEdge(conversationEdge(align));
+        measure();
+        window.addEventListener('resize', measure);
+        return () => window.removeEventListener('resize', measure);
+    }, [align]);
+    const cls = position === 'bottom' ? 'mgcn-hint mgcn-hint--bottom' : 'mgcn-hint';
+    const style = position === 'bottom'
+        ? align === 'right'
+            ? { right: (edge ?? 0) + 20, bottom: 150 }
+            : { left: (edge ?? 0) + 20, bottom: 150 }
+        : align === 'right' ? { right: 52, top: 12 } : { left: 52, top: 12 };
+    return createPortal(_jsxs("div", { className: cls, style: style, children: [loading ? (_jsxs("span", { className: "mgcn-hint-dots", "aria-hidden": "true", children: [_jsx("i", {}), _jsx("i", {}), _jsx("i", {})] })) : null, _jsx("span", { children: text })] }), document.body);
+}

package/lib/client/components/rail/paging.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function PagingButton(props) {
+    const cls = props.dir === -1 ? 'mgcn-navBtn mgcn-navUp' : 'mgcn-navBtn mgcn-navDown';
+    return (_jsx("button", { type: "button", className: cls, "aria-label": props.label, style: { visibility: props.visible ? 'visible' : 'hidden' }, onMouseEnter: props.onEnter, onMouseLeave: props.onLeave, onClick: props.onClick }));
+}

package/lib/client/components/rail/quick-settings.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 快捷设置面板：对齐/条带高度/卡片数（能力感知）+ 显示模式
+import { useEffect, useState } from 'react';
+import { ALIGN_OPTIONS, BAND_OPTIONS, CARD_OPTIONS, MARK_TONE_OPTIONS, SHOW_OPTIONS, STYLE_CAPABILITIES } from "../../settings.js";
+function Seg(props) {
+    return (_jsx("div", { className: "mgcn-segmented", role: "radiogroup", children: props.options.map((o) => (_jsx("button", { type: "button", role: "radio", "aria-checked": props.value === o, className: props.value === o ? 'mgcn-segment mgcn-segmentActive' : 'mgcn-segment', onClick: () => props.onPick(o), children: props.labels[String(o)] ?? String(o) }, o))) }));
+}
+function ModeSeg({ value, onChange, t }) {
+    return (_jsx(Seg, { options: SHOW_OPTIONS, value: value, labels: {
+            show: t('config.showMode.show'),
+            peek: t('config.showMode.peek'),
+            hide: t('config.showMode.hide'),
+        }, onPick: (v) => onChange(v) }));
+}
+function useSettingsTick(subscribe) {
+    const [, bump] = useState(0);
+    useEffect(() => subscribe(() => bump((n) => n + 1)), [subscribe]);
+}
+export function QuickSettings(props) {
+    const { injected, t, onClose } = props;
+    useSettingsTick(injected.subscribeSettings);
+    const caps = STYLE_CAPABILITIES[injected.style()];
+    return (_jsxs("div", { className: "mgcn-config-panel", role: "dialog", "aria-label": t('config.title'), children: [_jsxs("div", { className: "mgcn-config-head", children: [_jsxs("span", { className: "mgcn-config-title", children: [t('config.style.' + injected.style()), " \u00B7 ", t('config.settings')] }), _jsx("button", { type: "button", className: "mgcn-config-close", "aria-label": t('config.close'), onClick: onClose, children: "\u2715" })] }), _jsxs("div", { className: "mgcn-config-row", children: [_jsx("span", { className: "mgcn-config-label", children: t('config.align') }), _jsx(Seg, { options: ALIGN_OPTIONS, value: injected.align(), labels: { left: t('settings.align.left'), right: t('settings.align.right') }, onPick: (v) => injected.setAlign(v) })] }), _jsxs("div", { className: "mgcn-config-row", children: [_jsx("span", { className: "mgcn-config-label", children: t('config.bandHeight') }), _jsx(Seg, { options: BAND_OPTIONS, value: injected.bandHeight(), labels: {
+                            compact: t('config.bandHeight.compact'),
+                            standard: t('config.bandHeight.standard'),
+                            tall: t('config.bandHeight.tall'),
+                        }, onPick: (v) => injected.setBandHeight(v) })] }), caps.hoverCards ? (_jsxs("div", { className: "mgcn-config-row", children: [_jsx("span", { className: "mgcn-config-label", children: t('config.cardCount') }), _jsx(Seg, { options: CARD_OPTIONS, value: injected.cardCount(), labels: { 1: '1', 3: '3', 5: '5' }, onPick: (v) => injected.setCardCount(v) })] })) : null, injected.style() === 'codex' ? (_jsxs("div", { className: "mgcn-config-row", children: [_jsx("span", { className: "mgcn-config-label", children: t('config.markTone') }), _jsx(Seg, { options: MARK_TONE_OPTIONS, value: injected.markTone(), labels: { soft: t('config.markTone.soft'), deep: t('config.markTone.deep') }, onPick: (v) => injected.setMarkTone(v) })] })) : null, _jsx("div", { className: "mgcn-config-sep" }), _jsxs("div", { className: "mgcn-config-row", children: [_jsx("span", { className: "mgcn-config-label", children: t('config.showQuickSettings') }), _jsx(ModeSeg, { value: injected.showQuickSettings(), onChange: (v) => injected.setShowQuickSettings(v), t: t })] }), _jsxs("div", { className: "mgcn-config-row", children: [_jsx("span", { className: "mgcn-config-label", children: t('config.showSearch') }), _jsx(ModeSeg, { value: injected.showSearch(), onChange: (v) => injected.setShowSearch(v), t: t })] }), _jsxs("div", { className: "mgcn-config-row", children: [_jsx("span", { className: "mgcn-config-label", children: t('config.showFavorites') }), _jsx(ModeSeg, { value: injected.showFavorites(), onChange: (v) => injected.setShowFavorites(v), t: t })] }), _jsxs("div", { className: "mgcn-config-row", children: [_jsx("span", { className: "mgcn-config-label", children: t('config.showCount') }), _jsx(ModeSeg, { value: injected.showCount(), onChange: (v) => injected.setShowCount(v), t: t })] }), STYLE_CAPABILITIES[injected.style()].paging ? (_jsxs("div", { className: "mgcn-config-row", children: [_jsx("span", { className: "mgcn-config-label", children: t('config.showPaging') }), _jsx(ModeSeg, { value: injected.showPaging(), onChange: (v) => injected.setShowPaging(v), t: t })] })) : null] }));
+}

package/lib/client/components/rail/search.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// 搜索浮层：输入防抖 → host 检索 → 结果（tag 用户/AI + 轮次标题 + 两行预览 + 历史提示）
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { clockText } from "./useRail.js";
+/** 检索：携带 AbortController 的 host 请求（scopes 过滤由 host 执行） */
+/**
+ * 检索 + 统一排序：host 按日志顺序返回，此处统一按轮次倒序（最新轮在上；
+ * 同轮按 seq 倒序——最新消息在前）。minimal/codex 浮层、deepseek 面板与移动抽屉共用，
+ * 保证三种风格与搜索抽屉的命中顺序一致。
+ */
+export function fetchHits(sessionId, query, scopes, signal) {
+    const url = '/mega-chat-nav/search?session=' + encodeURIComponent(sessionId ?? '')
+        + '&q=' + encodeURIComponent(query)
+        + '&scopes=' + encodeURIComponent(scopes.join(',')); // 不传 limit → host 返回全部命中
+    return fetch(url, { signal })
+        .then((resp) => resp.json())
+        .then((data) => {
+        const hits = data.ok === true ? (data.hits ?? []) : [];
+        return hits.sort((x, y) => (y.turn - x.turn) || (y.seq - x.seq));
+    });
+}
+/** 角色 → 标签文本（用户/助手/工具；steering 归用户侧） */
+function roleTag(role, t) {
+    if (role === 'assistant')
+        return t('search.tag.assistant');
+    if (role === 'tool')
+        return t('search.tag.tool');
+    return t('search.tag.user');
+}
+export function SearchBox(props) {
+    const [query, setQuery] = useState('');
+    const [results, setResults] = useState([]);
+    const [busy, setBusy] = useState(false);
+    const abortRef = useRef(null);
+    const debounceRef = useRef(null);
+    const inputRef = useRef(null);
+    const run = useCallback((raw) => {
+        abortRef.current?.abort();
+        const ac = new AbortController();
+        abortRef.current = ac;
+        const q = raw.trim();
+        if (q.length < 1) {
+            setResults([]);
+            setBusy(false);
+            return;
+        }
+        setBusy(true);
+        fetchHits(props.sessionId, q, props.scopes, ac.signal)
+            .then((hits) => {
+            setResults(hits); // fetchHits 已按轮次倒序返回
+        })
+            .catch((e) => {
+            if (e.name !== 'AbortError')
+                setResults([]);
+        })
+            .finally(() => setBusy(false));
+    }, [props.sessionId, props.scopes]);
+    const onType = (value) => {
+        setQuery(value);
+        if (debounceRef.current !== null)
+            window.clearTimeout(debounceRef.current);
+        // 250ms 防抖：连续输入只触发一次检索
+        debounceRef.current = window.setTimeout(() => run(value), 250);
+    };
+    useEffect(() => {
+        inputRef.current?.focus();
+        return () => {
+            if (debounceRef.current !== null)
+                window.clearTimeout(debounceRef.current);
+            abortRef.current?.abort();
+        };
+    }, []);
+    const historicCount = results.filter((hit) => hit.historic).length;
+    return (_jsxs("div", { className: "mgcn-search", role: "dialog", "aria-label": props.t('search.placeholder'), children: [_jsx("input", { ref: inputRef, className: "mgcn-search-input", value: query, placeholder: props.t('search.placeholder'), onChange: (e) => onType(e.target.value), onKeyDown: (e) => { if (e.key === 'Escape')
+                    props.onClose(); } }), busy ? _jsx("div", { className: "mgcn-search-busy", children: "\u2026" }) : null, !busy && query.trim() === '' && props.emptyContent !== undefined ? props.emptyContent : null, !busy && results.length > 0 && historicCount > 0 ? (_jsx("div", { className: "mgcn-search-historic", children: props.t('search.historic', { n: historicCount }) })) : null, results.length > 0 ? (_jsx("div", { className: "mgcn-search-results", children: results.map((hit) => (_jsxs("button", { type: "button", className: "mgcn-search-hit", onClick: () => props.onJump(hit.key, hit.seq), children: [_jsxs("span", { className: "mgcn-search-title", children: [_jsxs("span", { className: "mgcn-search-titleLeft", children: [hit.turn > 0 ? _jsx("span", { className: "mgcn-search-turn", children: props.t('search.turnTitle', { turn: hit.turn }) }) : null, _jsx("span", { className: 'mgcn-search-tag mgcn-search-tag--' + hit.role, children: roleTag(hit.role, props.t) })] }), _jsx("span", { className: "mgcn-search-titleTime", children: clockText(hit.time, Date.now()) })] }), _jsx("span", { className: "mgcn-search-body", children: _jsx("span", { className: "mgcn-search-text", children: hit.hitStart >= 0 && hit.hitLen > 0 ? (_jsxs(_Fragment, { children: [hit.snippet.slice(0, hit.hitStart), _jsx("mark", { className: "mgcn-search-mark", children: hit.snippet.slice(hit.hitStart, hit.hitStart + hit.hitLen) }), hit.snippet.slice(hit.hitStart + hit.hitLen)] })) : hit.snippet }) })] }, hit.key + ':' + hit.seq))) })) : null] }));
+}