@khorsheed/dsh-context-lens 0.0.0-stage → 0.1.0

package/lib/types/client/TokenView.d.ts

@@ -0,0 +1,21 @@
+/** Request navigation and the selected capture's structured / JSON detail. */
+import { type ReactNode } from 'react';
+import type { AgentScopeOverview, CapturedRequest, RequestLink } from '../types.ts';
+import { type CompositionFilter } from './aggregate.ts';
+import type { InspectorTabProps } from './contract.ts';
+type T = InspectorTabProps['t'];
+export interface TokenViewProps {
+    readonly scope: AgentScopeOverview;
+    readonly onOpenRequest?: ((link: RequestLink) => void) | undefined;
+    readonly onReturn?: (() => void) | undefined;
+    readonly selectedSeq: number | null;
+    readonly request: CapturedRequest | null;
+    readonly filterCat: CompositionFilter;
+    readonly previousResponseNumber: number | null;
+    readonly onSelect: (seq: number) => void;
+    readonly onToggleFilter: (category: Exclude<CompositionFilter, null>) => void;
+    readonly t: T;
+}
+export declare function TokenView({ scope, selectedSeq, request, filterCat, previousResponseNumber, onSelect, onOpenRequest, onReturn, onToggleFilter, t }: TokenViewProps): ReactNode;
+export {};
+//# sourceMappingURL=TokenView.d.ts.map

package/lib/types/client/TokenView.js

@@ -0,0 +1,22 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/** Request navigation and the selected capture's structured / JSON detail. */
+import { useState } from 'react';
+import { requestNumberText, aggregateCategories, cachePct, duplicateStats, fmt, fmtSpan, fmtK, inputTotal, summaryText } from "./aggregate.js";
+import { CacheFacts, RequestFacts } from "./RequestFacts.js";
+import { RawView } from "./RawView.js";
+import { Exchange, SegmentBlocks, categoryLabelKey } from "./SegmentBlocks.js";
+import css from './TokenView.module.css';
+function RequestCard({ request: r, selected, onSelect, t }) {
+    const pct = r.usage === undefined ? null : cachePct(r.usage);
+    return _jsxs("button", { type: "button", className: selected ? css.reqItemSel : css.reqItem, title: r.requestNumber === undefined && r.responseSummary.kind !== 'compaction' ? t('req.numberUnknown') : undefined, "aria-label": `${r.responseSummary.kind === 'compaction' ? '' : `#${requestNumberText(r)} · `}${summaryText(r.responseSummary, t('resp.directAnswer'), t('compaction.title'), t('resp.thinking'))}`, "aria-pressed": selected, onClick: () => onSelect(r.seq), children: [_jsxs("span", { className: css.reqName, children: [r.responseSummary.kind !== 'compaction' && _jsxs("span", { children: ["#", requestNumberText(r), " \u00B7 "] }), summaryText(r.responseSummary, t('resp.directAnswer'), t('compaction.title'), t('resp.thinking'))] }), _jsx("span", { className: css.reqHit, "data-low": pct === 0, children: pct === null ? '—' : `${pct.toFixed(1)}%` }), _jsx("span", { className: css.reqIo, children: r.usage ? `${fmtK(inputTotal(r.usage))} → ${fmtK(r.usage.outputTokens)}` : r.status === 'streaming' ? t('req.streaming') : r.status === 'failed' ? t('req.failed') : '—' }), _jsx("span", { className: css.reqTime, children: r.totalMs === undefined ? '—' : fmtSpan(r.totalMs) }), (r.toolErrors ?? 0) > 0 && _jsxs("span", { className: css.reqFlag, children: [t('tool.failures'), " ", r.toolErrors] }), r.status === 'failed' && _jsx("span", { className: css.reqFlag, children: t('req.failed') })] });
+}
+export function TokenView({ scope, selectedSeq, request, filterCat, previousResponseNumber, onSelect, onOpenRequest, onReturn, onToggleFilter, t }) {
+    const [raw, setRaw] = useState(false);
+    const selectedItem = scope.requests.find(r => r.seq === selectedSeq) ?? scope.requests[0];
+    const cats = request === null ? [] : aggregateCategories(request).filter(c => c.chars > 0);
+    const totalChars = cats.reduce((n, c) => n + c.chars, 0);
+    const duplicates = duplicateStats(request ? [...request.segments.system, ...request.segments.history, ...request.segments.added] : []);
+    return _jsxs("div", { className: css.md, children: [_jsx("nav", { className: css.reqList, "aria-label": t('view.token'), children: scope.requests.map(r => _jsx(RequestCard, { request: r, selected: selectedItem?.seq === r.seq, onSelect: onSelect, t: t }, r.seq)) }), _jsx("div", { className: css.reqDetail, children: request === null || selectedItem === undefined ? _jsx("div", { className: css.stateNote, role: "status", children: t('state.loading') }) : _jsxs(_Fragment, { children: [onReturn && _jsxs("button", { type: "button", className: css.jsonToggle, onClick: onReturn, children: ["\u2190 ", t('compaction.return')] }), _jsx(RequestFacts, { request: request, t: t, raw: raw, onToggleRaw: () => setRaw(v => !v) }), raw ? _jsx(RawView, { request: request, t: t }) : _jsxs(_Fragment, { children: [request.compaction && _jsxs("div", { className: css.prefix, children: [_jsxs("b", { children: [t('compaction.title'), request.compaction.hostTurn === undefined ? '' : ` · ${t('lens.sourceTurn', { turn: String(request.compaction.hostTurn) })}`] }), request.compaction.replacedCount !== undefined && _jsx("span", { children: t(request.compaction.applied ? 'compaction.replaced' : 'compaction.selected', { count: String(request.compaction.replacedCount) }) }), request.compaction.inputPartial && _jsxs("span", { title: t('compaction.partial'), children: [t('compaction.partialShort'), " \u24D8"] }), request.compaction.before && onOpenRequest && _jsxs("button", { type: "button", className: css.jsonToggle, onClick: () => onOpenRequest(request.compaction.before), children: [t('compaction.before'), " \u2197"] })] }), _jsx(CacheFacts, { request: request, onOpenRequest: onOpenRequest, onShowCategory: category => { if (filterCat !== category)
+                                        onToggleFilter(category); }, t: t }), _jsx(Exchange, { request: request, previousResponseNumber: previousResponseNumber, onOpenRequest: onOpenRequest, t: t }, `${request.scopeId}-${request.seq}`), _jsxs("section", { "aria-label": t('lens.composition'), children: [_jsxs("div", { className: css.sectionTitle, children: [_jsx("h3", { children: t(request.compaction?.inputPartial ? 'compaction.region' : 'lens.composition') }), _jsx("span", { children: t('chain.chars', { count: fmt(totalChars) }) }), _jsx("abbr", { className: css.info, title: t('lens.compositionHint'), children: "i" })] }), _jsxs("div", { className: css.stack, children: [_jsx("div", { className: css.catbar, "aria-hidden": "true", children: cats.map(c => _jsx("i", { "data-cat": c.category, "data-off": filterCat !== null && filterCat !== '__dup' && filterCat !== c.category, style: { flex: `${c.chars} 1 0` } }, c.category)) }), _jsxs("div", { className: css.legend, children: [cats.map(c => _jsxs("button", { type: "button", className: css.legendItem, "data-off": filterCat !== null && filterCat !== c.category, "aria-pressed": filterCat === c.category, onClick: () => onToggleFilter(c.category), children: [_jsx("i", { className: css.dot, "data-cat": c.category }), t(categoryLabelKey(c.category)), _jsxs("span", { children: [(c.chars / totalChars * 100).toFixed(1), "%"] })] }, c.category)), duplicates.extraChars > 0 && _jsxs("button", { type: "button", className: css.legendItem, "data-off": filterCat !== null && filterCat !== '__dup', "aria-pressed": filterCat === '__dup', onClick: () => onToggleFilter('__dup'), children: [_jsx("span", { className: css.badge, children: "\u00D7N" }), t('lens.duplicates'), _jsx("span", { children: fmtK(duplicates.extraChars) })] })] }), _jsx(SegmentBlocks, { request: request, filterCat: filterCat, onClearFilter: () => { if (filterCat !== null)
+                                                        onToggleFilter(filterCat); }, previousResponseNumber: previousResponseNumber, onOpenRequest: onOpenRequest, t: t }, `${request.scopeId}-${request.seq}`)] })] })] })] }) })] });
+}

package/lib/types/client/ToolCatalog.d.ts

@@ -0,0 +1,9 @@
+import type { ToolDefItem } from '../types.ts';
+import type { InspectorTabProps } from './contract.ts';
+type T = InspectorTabProps['t'];
+export declare function ToolCatalog({ tools, t }: {
+    readonly tools: ToolDefItem[];
+    readonly t: T;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ToolCatalog.d.ts.map

package/lib/types/client/ToolCatalog.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** A scan-friendly inventory with lossless inline schema inspection. */
+import { useLayoutEffect, useRef, useState } from 'react';
+import { fmt } from "./aggregate.js";
+import { IconChevronDownOutlineMedium } from "./icons.js";
+import css from './SegmentBlocks.module.css';
+import { SchemaFields, schemaRecord } from "./SchemaFields.js";
+function schema(raw) {
+    try {
+        const value = JSON.parse(raw);
+        if (!schemaRecord(value) && typeof value !== 'boolean')
+            return null;
+        return { value, count: schemaRecord(value) && schemaRecord(value.properties) ? Object.keys(value.properties).length : null };
+    }
+    catch {
+        return null;
+    }
+}
+function RawSchema({ text, t }) {
+    const [copyState, setCopyState] = useState('idle');
+    const copy = async () => {
+        setCopyState('copying');
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopyState('copied');
+        }
+        catch {
+            setCopyState('failed');
+        }
+    };
+    return _jsx("div", { className: css.rawSection, children: _jsxs("section", { className: css.rawCode, "aria-label": t('view.raw'), children: [_jsxs("div", { className: css.rawHead, children: [_jsx("span", { className: css.rawLanguage, children: "JSON" }), _jsx("span", { className: css.copyStatus, role: "status", "data-error": copyState === 'failed', children: copyState === 'copied' ? t('lens.copied') : copyState === 'failed' ? t('lens.copyFailed') : '' }), _jsx("button", { type: "button", className: css.copyButton, disabled: copyState === 'copying', onClick: () => void copy(), children: t('lens.copyJson') })] }), _jsx("pre", { className: css.pre, children: _jsx("code", { children: text }) })] }) });
+}
+function ToolRow({ tool, t }) {
+    const [open, setOpen] = useState(false);
+    const [raw, setRaw] = useState(false);
+    const [restore, setRestore] = useState(false);
+    const row = useRef(null);
+    const parsed = schema(tool.parameters);
+    useLayoutEffect(() => {
+        if (!restore)
+            return;
+        row.current?.scrollIntoView?.({ block: 'nearest', behavior: 'instant' });
+        row.current?.querySelector('summary')?.focus({ preventScroll: true });
+        setRestore(false);
+    }, [restore]);
+    return _jsxs("details", { ref: row, className: css.toolCell, open: open, children: [_jsxs("summary", { className: css.toolRow, title: tool.description, onClick: e => { e.preventDefault(); setOpen(!open); if (open)
+                    setRestore(true); }, children: [_jsxs("span", { className: css.toolName, children: [tool.name, tool.added && _jsx("span", { className: css.badge, children: t('lens.layerAdded') })] }), _jsx("span", { className: css.preview, children: tool.description }), _jsx("span", { className: css.parameterCount, children: parsed && parsed.count !== null ? t('lens.parameterCount', { count: String(parsed.count) }) : '—' }), _jsx("span", { className: css.number, title: t('chain.chars', { count: fmt(tool.chars) }), children: fmt(tool.chars) }), _jsx(IconChevronDownOutlineMedium, { size: 16, className: css.chevron })] }), open && _jsxs("div", { className: css.toolBody, children: [_jsxs("div", { className: css.toolToolbar, children: [_jsx("span", { children: t('lens.toolDefinition') }), _jsx("button", { type: "button", className: css.more, "aria-pressed": raw, onClick: () => setRaw(!raw), children: t(raw ? 'view.structured' : 'view.raw') })] }), _jsx("div", { className: css.prose, children: tool.description }), raw ? _jsx(RawSchema, { text: tool.parameters, t: t }, tool.parameters) : parsed ? _jsx(SchemaFields, { value: parsed.value, t: t }) : _jsx("div", { className: css.schemaCaption, children: t('schema.unreadable') })] })] });
+}
+export function ToolCatalog({ tools, t }) {
+    return _jsx("div", { className: css.toolCatalog, children: tools.map(tool => _jsx(ToolRow, { tool: tool, t: t }, tool.name)) });
+}

package/lib/types/client/Trend.d.ts

@@ -0,0 +1,25 @@
+import type { SessionTrend } from '../types.ts';
+import type { InspectorTabProps } from './contract.ts';
+import { type TurnGap } from './aggregate.ts';
+/**
+ * The session map: the main conversation's requests across turns, filling
+ * the panel width on one baseline. Each turn is a cell (wider when it holds
+ * more requests); the current turn is a tinted band with its number in
+ * bold. A run of turns not loaded shows as a narrow cell with its range;
+ * clicking it loads 30 turns in that direction. A dashed line marks where a
+ * compaction happened and opens it; the
+ * turn's other participants show as tabs below the map, not on it.
+ */
+export declare function Trend({ data, turnSeq, selectedSeq, scopeId, scopeLabel, onSelect, gaps, onLoadGap, t, }: {
+    readonly data: SessionTrend;
+    readonly turnSeq: number | null;
+    readonly selectedSeq: number | null;
+    readonly scopeId: string;
+    readonly scopeLabel: string;
+    readonly onSelect: (turnSeq: number, seq: number, scopeId: string) => void;
+    /** Runs of turns the log holds but the panel has not loaded. */
+    readonly gaps?: readonly TurnGap[];
+    readonly onLoadGap?: ((gap: TurnGap) => void) | undefined;
+    readonly t: InspectorTabProps['t'];
+}): import("react").JSX.Element;
+//# sourceMappingURL=Trend.d.ts.map

package/lib/types/client/Trend.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { requestNumberText, cachePct, gapShown, inputTotal, turnNumber } from "./aggregate.js";
+import css from './InspectorPanel.module.css';
+const isCompaction = (scopeId) => scopeId.startsWith('compaction:');
+/** Smallest cell a turn may shrink to (one label); below it the map scrolls. */
+const MIN_CELL = 22;
+/** A turn's cell grows with its request count past this many. */
+const CELL_SHARE = 3;
+/** Bar width that fits every request across the map (2–6px). */
+function fitWidth(box, requests, turns) {
+    if (requests === 0 || box === 0)
+        return 6;
+    return Math.max(2, Math.min(6, Math.floor((box - turns * 8) / requests) - 2));
+}
+/**
+ * The session map: the main conversation's requests across turns, filling
+ * the panel width on one baseline. Each turn is a cell (wider when it holds
+ * more requests); the current turn is a tinted band with its number in
+ * bold. A run of turns not loaded shows as a narrow cell with its range;
+ * clicking it loads 30 turns in that direction. A dashed line marks where a
+ * compaction happened and opens it; the
+ * turn's other participants show as tabs below the map, not on it.
+ */
+export function Trend({ data, turnSeq, selectedSeq, scopeId, scopeLabel, onSelect, gaps = [], onLoadGap, t, }) {
+    const ref = useRef(null);
+    const [width, setWidth] = useState(0);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        setWidth(el.clientWidth);
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(entries => setWidth(entries[0]?.contentRect.width ?? el.clientWidth));
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+    useEffect(() => {
+        const el = ref.current, current = el?.querySelector('[data-current="true"]');
+        if (el && current && el.scrollWidth > el.clientWidth)
+            el.scrollLeft = current.offsetLeft - el.clientWidth / 2 + current.offsetWidth / 2;
+    }, [turnSeq, scopeId, data, width]);
+    const main = scopeId === 'main';
+    // On the session map a room round's member runs stand where the main turn would.
+    const rounds = new Set(main ? data.turns.filter(turn => turn.room !== undefined).map(turn => turn.turnSeq) : []);
+    const requests = data.requests.filter(r => r.scopeId === scopeId || rounds.has(r.turnSeq));
+    const compactions = main ? data.requests.filter(r => isCompaction(r.scopeId)) : [];
+    const turns = data.turns.filter(turn => requests.some(r => r.turnSeq === turn.turnSeq));
+    const max = Math.max(1, ...requests.map(r => (r.usage ? inputTotal(r.usage) : 0)));
+    const barWidth = fitWidth(width, requests.length, turns.length);
+    /** Compactions of this turn that happened right before `next` (or at the turn's end). */
+    const dividersBefore = (turn, next, previous) => compactions.filter(c => c.turnSeq === turn
+        && (previous === undefined || c.startedAt >= previous.startedAt)
+        && (next === undefined || c.startedAt < next.startedAt));
+    const firstLoaded = Math.min(...turns.map(turn => turn.hostTurn ?? Number.POSITIVE_INFINITY));
+    const gapCell = (gap) => {
+        const shown = gapShown(gap);
+        const label = t(gap.to < firstLoaded ? 'trend.loadOlder' : 'trend.loadNewer', { from: String(shown.from), to: String(shown.to) });
+        return _jsxs("button", { type: "button", className: css.trendGap, title: label, "aria-label": label, onClick: () => onLoadGap?.(gap), children: [_jsx("span", { className: css.trendGapBars, "aria-hidden": "true", children: "\u22EF" }), _jsx("span", { className: css.trendTurn, children: shown.from === shown.to ? shown.from : `${shown.from}–${shown.to}` })] }, `gap-${gap.from}`);
+    };
+    /**
+     * Coordinator handoffs, drawn before the first turn after them. Several in
+     * one gap share ONE marker (side-by-side markers stack their labels):
+     * it names who holds the room by that turn; the tooltip keeps the chain.
+     */
+    const handoffs = main ? [...data.handoffs ?? []].sort((a, b) => a.at - b.at) : [];
+    const handoffsBefore = (turn) => {
+        const batch = [];
+        while (handoffs.length > 0 && handoffs[0].at <= turn.startedAt)
+            batch.push(handoffs.shift());
+        const last = batch.at(-1);
+        if (last === undefined)
+            return [];
+        const label = batch.length === 1
+            ? t('trend.handoff', { name: last.name })
+            : t('trend.handoffMany', { name: last.name, count: String(batch.length - 1) });
+        const title = batch.map(h => t('trend.handoff', { name: h.name })).join(' → ');
+        return [_jsx("span", { className: css.trendHandoff, title: title, "aria-label": title, children: _jsx("span", { children: label }) }, `handoff-${last.at}`)];
+    };
+    /** Gap cells that sit before a turn (all gaps ending before its number). */
+    const placed = new Set();
+    const gapsBefore = (n) => n === undefined ? [] : gaps.filter(gap => !placed.has(gap.from) && gapShown(gap).to < n).map(gap => { placed.add(gap.from); return gapCell(gap); });
+    const divider = (turn, c) => _jsx("button", { type: "button", className: css.trendCompaction, title: t('trend.compaction'), "aria-label": t('trend.compaction'), onClick: () => onSelect(turn, c.seq, c.scopeId) }, c.seq);
+    return (_jsxs("section", { "aria-label": t('lens.trendScope', { scope: scopeLabel }), children: [_jsxs("div", { ref: ref, className: css.trend, style: { ['--trend-bar']: `${barWidth}px` }, children: [turns.map((turn) => {
+                        const rows = requests.filter(r => r.turnSeq === turn.turnSeq);
+                        const minWidth = Math.max(MIN_CELL, rows.length * (barWidth + 3) + 8);
+                        return [
+                            ...gapsBefore(turnNumber(turn)),
+                            ...handoffsBefore(turn),
+                            _jsxs("div", { className: css.trendGroup, "data-current": turnSeq === turn.turnSeq, style: { flex: `${Math.max(1, rows.length / CELL_SHARE)} 1 ${minWidth}px`, minWidth }, children: [_jsxs("div", { className: css.trendBars, children: [rows.map((r, i) => {
+                                                const total = r.usage ? inputTotal(r.usage) : 0, hit = r.usage ? cachePct(r.usage) : null;
+                                                return [
+                                                    ...dividersBefore(turn.turnSeq, r, rows[i - 1]).map(c => divider(turn.turnSeq, c)),
+                                                    _jsx("button", { type: "button", className: css.trendTarget, "data-selected": r.seq === selectedSeq, "aria-pressed": r.seq === selectedSeq, "aria-label": `${t('turn.label', { seq: String(turnNumber(turn) ?? turn.turnSeq) })} #${requestNumberText(r)} · ${hit ?? '—'}%`, title: `#${requestNumberText(r)} · ${total} tok · ${hit ?? '—'}%`, onClick: () => onSelect(turn.turnSeq, r.seq, r.scopeId), children: _jsx("span", { className: css.trendBar, "data-unknown": hit === null, "aria-hidden": "true", style: { height: `${Math.max(3, (total / max) * 40)}px` }, children: _jsx("i", { style: { height: `${hit ?? 0}%` } }) }) }, r.seq),
+                                                ];
+                                            }), dividersBefore(turn.turnSeq, undefined, rows.at(-1)).map(c => divider(turn.turnSeq, c))] }), _jsx("span", { className: css.trendTurn, children: turnNumber(turn) ?? '·' })] }, turn.turnSeq),
+                        ];
+                    }), gaps.filter(gap => !placed.has(gap.from)).map(gapCell)] }), requests.length === 0 && _jsx("span", { className: css.trendLabel, children: t('lens.trendEmpty') })] }));
+}

package/lib/types/client/TurnAction.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 「请求明细」: the per-turn icon in the finalized assistant message's
+ * IconActions row (`conversation.chat.assistant-actions`, the
+ * ui-message-feedback seat). One click resolves the message's turn
+ * (`TurnListItem.closingMessageId`, latest-turn fallback — the resolution
+ * lives in the injected `open`) and opens the inspector tab on it.
+ *
+ * @module @khorsheed/dsh-context-lens/client
+ */
+import { type ReactNode } from 'react';
+import type { InspectorActionProps } from './contract.ts';
+/** One message's context-lens control. */
+export declare function TurnInspectAction({ messageId, sessionId, open, t }: InspectorActionProps): ReactNode;
+//# sourceMappingURL=TurnAction.d.ts.map

package/lib/types/client/TurnAction.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 「请求明细」: the per-turn icon in the finalized assistant message's
+ * IconActions row (`conversation.chat.assistant-actions`, the
+ * ui-message-feedback seat). One click resolves the message's turn
+ * (`TurnListItem.closingMessageId`, latest-turn fallback — the resolution
+ * lives in the injected `open`) and opens the inspector tab on it.
+ *
+ * @module @khorsheed/dsh-context-lens/client
+ */
+import { useEffect, useRef, useState } from 'react';
+import { Tooltip } from '@deepseek-ai/dsh-client-ui-primitives';
+import { IconRequestInspectorOutlineMedium } from "./icons-local.js";
+import css from './EntryIcon.module.css';
+/** One message's context-lens control. */
+export function TurnInspectAction({ messageId, sessionId, open, t }) {
+    const [busy, setBusy] = useState(false);
+    const alive = useRef(true);
+    useEffect(() => () => { alive.current = false; }, []);
+    return (_jsx(Tooltip, { label: t('action.inspect'), side: "bottom", children: _jsx("button", { type: "button", className: css.action, "aria-label": t('action.inspect'), disabled: busy, onClick: () => {
+                if (busy)
+                    return;
+                setBusy(true);
+                // open never throws: resolution failure falls back to the latest
+                // turn, a missing tab type logs and no-ops.
+                void open(sessionId, String(messageId)).finally(() => {
+                    if (alive.current)
+                        setBusy(false);
+                });
+            }, children: _jsx(IconRequestInspectorOutlineMedium, {}) }) }));
+}

package/lib/types/client/TurnMenu.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The turn switcher: a trigger button (`turn N · query 预览`) opening the
+ * host's own `Menu` (ui-primitives — keyboard walk, Escape / outside-click,
+ * and focus return are the host's), one row per turn: turn number + query
+ * preview on the first line, request count and token totals on the second.
+ * Purpose pseudo-turns (no `hostTurn`) show their purpose label without a
+ * turn number, same as the query line.
+ *
+ * @module @khorsheed/dsh-context-lens/client
+ */
+import { type ReactNode } from 'react';
+import type { TurnListItem } from '../types.ts';
+import { type TurnGap } from './aggregate.ts';
+import type { InspectorTabProps } from './contract.ts';
+/** The panel's translate face. */
+type T = InspectorTabProps['t'];
+/** One turn's one-line title: `turn N · query` for real turns, the purpose label otherwise. */
+export declare function turnTitle(turn: TurnListItem, t: T): string;
+export interface TurnMenuProps {
+    /** The session's turns, newest last. */
+    readonly turns: readonly TurnListItem[];
+    /** The selected turn's seq (null while the list loads). */
+    readonly turnSeq: number | null;
+    /** Row activation: select that turn. */
+    readonly onSelect: (turnSeq: number) => void;
+    /** Runs of turns not loaded; each becomes a row that loads it. */
+    readonly gaps?: readonly TurnGap[];
+    /** The log's last host turn, for the `N / total` label. */
+    readonly lastTurn?: number | undefined;
+    readonly onLoad?: (gap: TurnGap) => void;
+    readonly t: T;
+}
+/** The turn switcher menu. */
+export declare function TurnMenu({ turns, turnSeq, onSelect, gaps, lastTurn, onLoad, t }: TurnMenuProps): ReactNode;
+export {};
+//# sourceMappingURL=TurnMenu.d.ts.map

package/lib/types/client/TurnMenu.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The turn switcher: a trigger button (`turn N · query 预览`) opening the
+ * host's own `Menu` (ui-primitives — keyboard walk, Escape / outside-click,
+ * and focus return are the host's), one row per turn: turn number + query
+ * preview on the first line, request count and token totals on the second.
+ * Purpose pseudo-turns (no `hostTurn`) show their purpose label without a
+ * turn number, same as the query line.
+ *
+ * @module @khorsheed/dsh-context-lens/client
+ */
+import { useState } from 'react';
+import { Menu } from '@deepseek-ai/dsh-client-ui-primitives';
+import { fmtK, gapShown, turnNumber } from "./aggregate.js";
+import { IconChevronDownOutlineMedium } from "./icons.js";
+import css from './TurnMenu.module.css';
+/** One turn's one-line title: `turn N · query` for real turns, the purpose label otherwise. */
+export function turnTitle(turn, t) {
+    const n = turnNumber(turn);
+    return turn.hostTurn === undefined && turn.room === undefined
+        ? turn.query === 'compaction' ? t('compaction.title') : turn.query
+        : `${t('turn.label', { seq: String(n ?? '·') })} · ${turn.room !== undefined ? `[${t('query.room')}] ` : ''}${turn.query !== '' ? turn.query : turn.trigger !== undefined ? `[${turn.trigger.source}] ${turn.trigger.text}` : ''}`;
+}
+/** One menu row: the title line, then request count + token totals. */
+function TurnRow({ turn, t }) {
+    return (_jsxs("span", { className: css.row, children: [_jsx("span", { className: css.rowTitle, children: turnTitle(turn, t) }), _jsx("span", { className: css.rowMeta, children: t('turn.rowMeta', {
+                    count: String(turn.requestCount),
+                    input: fmtK(turn.totalInputTokens),
+                    output: fmtK(turn.totalOutputTokens),
+                }) })] }));
+}
+/** The turn switcher menu. */
+export function TurnMenu({ turns, turnSeq, onSelect, gaps = [], lastTurn, onLoad, t }) {
+    const [open, setOpen] = useState(false);
+    const current = turns.find(candidate => candidate.turnSeq === turnSeq);
+    return (_jsx(Menu, { open: open, portal: true, compact: true, selectedId: turnSeq === null ? undefined : String(turnSeq), 
+        // Newest first: the overwhelmingly common destination is a recent turn.
+        items: [
+            ...[...turns].reverse().map(candidate => ({ key: turnNumber(candidate) ?? Number.NEGATIVE_INFINITY, id: String(candidate.turnSeq), label: _jsx(TurnRow, { turn: candidate, t: t }) })),
+            ...gaps.map(gap => ({ key: gapShown(gap).to, id: `gap:${gap.from}:${gap.to}`, label: _jsx("span", { className: css.gapRow, children: t('turn.loadRange', { from: String(gapShown(gap).from), to: String(gapShown(gap).to) }) }) })),
+        ].sort((x, y) => y.key - x.key).map(({ id, label }) => ({ id, label })), onSelect: id => {
+            setOpen(false);
+            if (id.startsWith('gap:')) {
+                const [, from, to] = id.split(':');
+                onLoad?.({ from: Number(from), to: Number(to) });
+                return;
+            }
+            onSelect(Number(id));
+        }, onClose: () => { setOpen(false); }, anchor: (_jsxs("button", { type: "button", className: css.trigger, "aria-haspopup": "menu", "aria-expanded": open, "aria-label": t('turn.switch'), onClick: () => { setOpen(value => !value); }, children: [_jsx("span", { className: css.triggerLabel, children: current === undefined ? t('turn.switch') : `${turnNumber(current) ?? (current.query === 'compaction' ? t('compaction.title') : current.query)} / ${lastTurn ?? turns.at(-1)?.hostTurn ?? turns.length}` }), _jsx(IconChevronDownOutlineMedium, {})] })) }));
+}

package/lib/types/client/aggregate.d.ts

@@ -0,0 +1,141 @@
+/**
+ * The client panel's pure aggregation and formatting helpers — everything the
+ * views compute from the Remote payloads, in one testable module. No React,
+ * no I/O, no clock.
+ *
+ * @module @khorsheed/dsh-context-lens/client/aggregate
+ */
+import type { CapturedRequest, RequestUsage, ResponseSummary, SegmentCategory, SegmentItem, TimingLane, TurnListItem } from '../types.ts';
+/**
+ * Render one {@link ResponseSummary} for the card title / anchor header:
+ * the tool case groups repeated names as `name ×N` (single calls keep hints), the text case is the
+ * caller's localized assistant reply, the reasoning case is a pure thinking response, an empty
+ * response is the plain dash.
+ */
+export declare function summaryText(summary: ResponseSummary, assistantReply: string, compaction?: string, thinking?: string): string;
+/**
+ * Resolve an assistant message id to its turn: the turn whose
+ * `closingMessageId` matches, else the latest turn (the list arrives newest
+ * last), else undefined when the session has no captured turns.
+ */
+export declare function resolveTurnSeq(turns: readonly TurnListItem[], messageId: string | undefined): number | undefined;
+/** The latest turn's seq (the panel's default), undefined on an empty list. */
+export declare function latestTurnSeq(turns: readonly TurnListItem[]): number | undefined;
+/** Turns per backfill window (the store's default `maxTurnsPerSession`). */
+export declare const WINDOW_TURNS = 30;
+/** A run of host turns the log holds but the panel has not loaded; `shown` is its span in the session's turn numbering. */
+export interface TurnGap {
+    from: number;
+    to: number;
+    shown?: {
+        from: number;
+        to: number;
+    };
+}
+/** The unloaded runs: the store's (numbered with room rounds), else derived from the log's host-turn range. */
+export declare function turnGaps(list: {
+    range?: {
+        first: number;
+        last: number;
+    };
+    unloaded?: {
+        from: number;
+        to: number;
+        firstHost: number;
+        lastHost: number;
+    }[];
+} | undefined, turns: readonly TurnListItem[]): TurnGap[];
+/** A gap's displayed span. */
+export declare const gapShown: (gap: TurnGap) => {
+    from: number;
+    to: number;
+};
+/** A turn's displayed number: its place in the session's numbering, else its host turn. */
+export declare const turnNumber: (turn: TurnListItem) => number | undefined;
+/** The runs of turns in the log's range that the loaded list lacks, oldest first. */
+export declare function unloadedGaps(range: {
+    first: number;
+    last: number;
+} | undefined, turns: readonly TurnListItem[]): TurnGap[];
+/** Total input = uncached + cache-read + cache-write (the host's usage fields are disjoint). */
+export declare function inputTotal(usage: RequestUsage): number;
+/** Input NOT served from cache = uncached + cache-write (a cache write was processed in full too). */
+export declare function inputMiss(usage: RequestUsage): number;
+/** Cache-hit percentage of the total input, one decimal; null when nothing was read. */
+export declare function cachePct(usage: RequestUsage): number | null;
+/** One row of the category stacked bar / legend. */
+export interface CategoryAggregate {
+    readonly category: SegmentCategory;
+    /** Rows (messages/sections) in the category; tool definitions count once per tool. */
+    readonly count: number;
+    readonly chars: number;
+}
+/**
+ * One request's composition by category: the system/history/added message
+ * items plus the tools segment as `tool-definition`, sorted by chars desc.
+ */
+export declare function aggregateCategories(request: CapturedRequest): CategoryAggregate[];
+/** The timing vocabulary, in timeline order (the design's six-way split). */
+export declare const TIMING_KINDS: readonly ["wait", "reasoning", "tool-args", "text", "tool-exec", "other"];
+/** One timing bucket kind. */
+export type TimingKind = (typeof TIMING_KINDS)[number];
+/** Per-tool timing aggregate, derived from the lanes (tool-exec = calls/duration, tool-args = argument generation). */
+export interface ToolAggregate {
+    readonly tool: string;
+    readonly calls: number;
+    readonly argsMs: number;
+    readonly execMs: number;
+}
+/** One request's lane sums (per kind) and wall span. */
+export interface RequestLaneSummary {
+    readonly requestSeq: number;
+    readonly scopeId: string;
+    readonly startedAt: number;
+    readonly endedAt: number;
+    readonly byKind: Readonly<Record<TimingKind, number>>;
+}
+/** The timing tab's lane-derived view of (a scope of) a turn. */
+export interface LaneSummary {
+    /** Summed milliseconds per bucket, inter-lane gaps folded into `other`. */
+    readonly buckets: Readonly<Record<TimingKind, number>>;
+    /** Lane count per kind (the legend's · N 次). */
+    readonly counts: Readonly<Record<TimingKind, number>>;
+    /** First lane start; 0 when empty. */
+    readonly t0: number;
+    /** Last lane end; 0 when empty. */
+    readonly t1: number;
+    /** Per-tool rows, exec time desc. */
+    readonly tools: readonly ToolAggregate[];
+    /** Per-request rows, in time order. */
+    readonly requests: readonly RequestLaneSummary[];
+}
+/**
+ * Reduce the turn's lanes to the timing tab's data. Lanes are strictly
+ * ordered and carry their scope, so a scope filter is exact; gaps between
+ * lanes (inter-request overhead) fold into `other`, the reference design's
+ * 调用间隙并入其他开销. Whole-turn, the bucket sums equal the host's
+ * `TurnTiming.buckets` by construction (the host sums the same lanes).
+ */
+export declare function summarizeLanes(lanes: readonly TimingLane[], scopeId?: string): LaneSummary;
+/** Thousands-separated integer (the design's fmt). */
+export declare function fmt(n: number): string;
+/** Compact count: 12.3k over a thousand (the design's fmtK). */
+export declare function fmtK(n: number): string;
+/** Wall-clock HH:MM of a timestamp (the timeline scale). */
+export declare function fmtClock(timestamp: number): string;
+/** Row-level duration: milliseconds under a second, whole seconds above (the design's fmtDur). */
+export declare function fmtDur(ms: number): string;
+/** Span duration: one decimal in seconds, minutes above 60s (the design's ms()). */
+export declare function fmtSpan(ms: number): string;
+/** A composition filter never changes the request totals or exchange. */
+export type CompositionFilter = SegmentCategory | '__dup' | null;
+/** Exact full-text matches, excluding the first occurrence from excess size. */
+export declare function duplicateStats(items: readonly SegmentItem[]): {
+    counts: Map<string, number>;
+    extraChars: number;
+};
+/** Public ordinal only. The internal seq must never be a display fallback. */
+export declare function requestNumberText(request: {
+    requestNumber?: number | undefined;
+} | null | undefined): string;
+//# sourceMappingURL=aggregate.d.ts.map