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

package/lib/types/client/InspectorPanel.js

@@ -0,0 +1,486 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Trend } from "./Trend.js";
+import { AgentTabs, ParentLine, ROOM_TAB } from "./AgentTabs.js";
+import { RoomDecisionsView } from "./RoomDecisionsView.js";
+/** Session/turn/scope navigation; request detail owns its JSON toggle. */
+import { useEffect, useRef, useState } from 'react';
+import { PanelRoot } from '@khorsheed/dsh-client-ui-panel-kit/src/client/index.ts';
+import { WINDOW_TURNS, fmtSpan, gapShown, latestTurnSeq, resolveTurnSeq, turnGaps, turnNumber } from "./aggregate.js";
+import { hasTurnAnchor, scrollConversationToBottom, scrollConversationToTurn } from "./scroll-sync.js";
+import { SegCtl } from "./SegCtl.js";
+import { TimingView } from "./TimingView.js";
+import { TokenView } from "./TokenView.js";
+import { TurnMenu } from "./TurnMenu.js";
+import css from './InspectorPanel.module.css';
+/** The failure state page — a failed run with 0 requests IS the diagnostic. */
+function FailureCard({ scope, t }) {
+    const duration = scope.endedAt === undefined ? '—' : fmtSpan(Math.max(0, scope.endedAt - scope.startedAt));
+    return (_jsxs("div", { className: css.failCard, role: "alert", children: [_jsxs("div", { className: css.failRow, children: [_jsx("span", { className: css.failDot }), _jsx("b", { children: t('run.failed') }), scope.error !== undefined && _jsx("span", { className: css.failMono, children: scope.error }), _jsx("span", { className: css.failMeta, children: t('run.failedMeta', { duration, count: String(scope.requests.length) }) })] }), scope.requests.length === 0 && (_jsx("div", { className: css.failHint, children: t('run.failedHint', { id: `${scope.scopeId.slice(0, 8)}…` }) }))] }));
+}
+/** The tab body. */
+/** The list's window facts the panel keeps beside its turns. */
+const listMetaOf = ({ range, unloaded, total }) => ({ ...range === undefined ? {} : { range }, ...unloaded === undefined ? {} : { unloaded }, ...total === undefined ? {} : { total } });
+export function InspectorPanel({ sessionId: ownSessionId, useTabInfo, t, listTurns, loadTurns, loadThrough, getTurn, getRequest, getTurnTiming, getSessionTrend, }) {
+    const { tab } = useTabInfo();
+    // A navigation may point the panel at another session (a room member's
+    // child session); the next navigation without one returns to the own session.
+    const [viewed, setViewed] = useState(null);
+    const sessionId = (viewed ?? ownSessionId);
+    /** The message whose turn the next turn list should select (from a navigation). */
+    const pendingMessage = useRef(undefined);
+    /** The room decision whose turn the next turn list should select (from a navigation). */
+    const pendingDecision = useRef(undefined);
+    /** The selected room decision on the 房间 tab. */
+    const [decisionId, setDecisionId] = useState(null);
+    const [trend, setTrend] = useState(null);
+    /** The latest conversation jump; an older one still waiting for history gives up. */
+    const jumpToken = useRef(0);
+    /** Bumped when the loaded window moves, so the session map refetches. */
+    const [trendKey, setTrendKey] = useState(0);
+    useEffect(() => {
+        let cancelled = false;
+        setTrend(null);
+        if (getSessionTrend)
+            void getSessionTrend(sessionId).then(r => { if (!cancelled && r.ok)
+                setTrend(r.value); }).catch(() => { });
+        return () => { cancelled = true; };
+    }, [sessionId, getSessionTrend, tab.navigation.revision, trendKey]);
+    const [turns, setTurns] = useState(null);
+    const [backfill, setBackfill] = useState(null);
+    const [parent, setParent] = useState(null);
+    const [listMeta, setListMeta] = useState({});
+    const range = listMeta.range;
+    const [turnSeq, setTurnSeq] = useState(null);
+    const [overview, setOverview] = useState(null);
+    const [timing, setTiming] = useState(null);
+    const [request, setRequest] = useState(null);
+    const [mainTab, setMainTab] = useState('token');
+    const [filterCat, setFilterCat] = useState(null);
+    const [requestTrail, setRequestTrail] = useState([]);
+    const [scopeId, setScopeId] = useState('main');
+    const [selectedSeq, setSelectedSeq] = useState(null);
+    const [error, setError] = useState(null);
+    const [turnMissing, setTurnMissing] = useState(false);
+    /** Bump to re-run the pull (the error state's retry). */
+    const [reloadKey, setReloadKey] = useState(0);
+    /** The selected turn's fetched request details (seq → capture). */
+    const detailCache = useRef(new Map());
+    /** Retry a failed load: back to the loading state, re-run the pull. */
+    const onRetry = () => {
+        setError(null);
+        setRequestTrail([]);
+        setTurns(null);
+        setOverview(null);
+        setReloadKey(key => key + 1);
+    };
+    // Navigation params apply once per revision (a repeat open re-navigates the
+    // one tab): the turn action's { turnSeq } selects that turn and scroll-syncs
+    // the conversation to it.
+    const revision = tab.navigation.revision;
+    const navParams = tab.navigation.params;
+    const navTurnSeq = navParams?.turnSeq;
+    const lastNavRevision = useRef(0);
+    useEffect(() => {
+        if (revision === 0 || revision === lastNavRevision.current)
+            return;
+        lastNavRevision.current = revision;
+        const target = navParams?.sessionId;
+        setViewed(target === undefined || target === ownSessionId ? null : target);
+        pendingMessage.current = navParams?.messageId;
+        pendingDecision.current = navParams?.roomDecision;
+        if (navParams?.roomDecision !== undefined) {
+            setTurnSeq(null);
+            setScopeId(ROOM_TAB);
+            setDecisionId(navParams.roomDecision);
+        }
+        if (navParams?.messageId !== undefined) {
+            setTurnSeq(null);
+            setScopeId('main');
+            setSelectedSeq(null);
+            setFilterCat(null);
+            setMainTab('token');
+        }
+        if (navTurnSeq === undefined)
+            return;
+        setTurnSeq(navTurnSeq);
+        setScopeId('main');
+        setSelectedSeq(null);
+        setFilterCat(null);
+        setMainTab('token');
+        // Real turns key on the host's turn number, so a positive seq scrolls even
+        // before the turn list resolves; pseudo-turns (negative) never scroll.
+        if (navTurnSeq > 0 && navParams?.sessionId === undefined)
+            scrollConversationToTurn(navTurnSeq);
+    }, [revision, navTurnSeq, navParams, ownSessionId]);
+    // The session's turn list, on mount (pull-based: refetch = reopen or retry).
+    useEffect(() => {
+        let cancelled = false;
+        setError(null);
+        void listTurns(sessionId).then(result => {
+            if (cancelled || tab.signal.aborted)
+                return;
+            if (!result.ok) {
+                setError(result.error.message);
+                setTurns([]);
+                return;
+            }
+            setTurns(result.value.turns);
+            setBackfill(result.value.backfill);
+            setParent(result.value.parent ?? null);
+            setListMeta(listMetaOf(result.value));
+            const decided = pendingDecision.current === undefined ? undefined
+                : result.value.turns.find(turn => turn.roomDecisionIds?.includes(pendingDecision.current) === true)?.turnSeq;
+            pendingDecision.current = undefined;
+            const asked = decided ?? (pendingMessage.current === undefined ? undefined : resolveTurnSeq(result.value.turns, pendingMessage.current));
+            pendingMessage.current = undefined;
+            setTurnSeq(previous => asked !== undefined
+                ? asked
+                : previous !== null && result.value.turns.some(turn => turn.turnSeq === previous)
+                    ? previous
+                    : latestTurnSeq(result.value.turns) ?? null);
+        }).catch((cause) => {
+            // A call that rejects (e.g. the gateway's arity gate, a disconnected
+            // carrier) is the same load failure as a refusal: the error state, not
+            // a spinner that never resolves.
+            if (!cancelled)
+                setError(cause instanceof Error ? cause.message : String(cause));
+        });
+        return () => { cancelled = true; };
+    }, [sessionId, listTurns, tab.signal, reloadKey, revision]);
+    // The selected turn's scope/request overview.
+    useEffect(() => {
+        if (turnSeq === null) {
+            setOverview(null);
+            return;
+        }
+        let cancelled = false;
+        const seq = turnSeq;
+        detailCache.current.clear();
+        setTurnMissing(false);
+        void getTurn(sessionId, seq).then(result => {
+            if (cancelled || tab.signal.aborted)
+                return;
+            if (!result.ok) {
+                setError(result.error.message);
+                return;
+            }
+            if (result.value === undefined) {
+                // The turn left the capture's ring buffer (eviction) between the list
+                // and this read — an honest empty state, not a spinner forever.
+                setTurnMissing(true);
+                setOverview(null);
+                return;
+            }
+            setOverview(result.value);
+            setTiming(null);
+            setRequest(null);
+        }).catch((cause) => {
+            if (!cancelled)
+                setError(cause instanceof Error ? cause.message : String(cause));
+        });
+        return () => { cancelled = true; };
+    }, [sessionId, turnSeq, getTurn, tab.signal]);
+    const scopes = overview?.scopes ?? [];
+    const scope = scopes.find(candidate => candidate.scopeId === scopeId)
+        ?? scopes.find(candidate => candidate.kind === 'main')
+        ?? scopes[0];
+    const effectiveScope = scope;
+    const scopeRequests = effectiveScope?.requests ?? [];
+    const selectedItem = scopeRequests.find(candidate => candidate.seq === selectedSeq) ?? scopeRequests[0];
+    const selectedRequestSeq = selectedItem?.seq ?? null;
+    const selectedIndex = selectedRequestSeq === null
+        ? -1
+        : scopeRequests.findIndex(candidate => candidate.seq === selectedRequestSeq);
+    // The 新增 provenance label's N: the previous request in the SAME scope.
+    // Scopes are continuous across turns, so the scope's first request of a turn
+    // looks back to the previous REAL turn's last request in that scope — a lazy
+    // fetch, only while the selection needs it.
+    const previousRealTurnSeq = (() => {
+        if (turns === null || turnSeq === null)
+            return undefined;
+        const index = turns.findIndex(candidate => candidate.turnSeq === turnSeq);
+        for (let i = index - 1; i >= 0; i -= 1) {
+            const candidate = turns[i];
+            if (candidate !== undefined && candidate.hostTurn !== undefined)
+                return candidate.turnSeq;
+        }
+        return undefined;
+    })();
+    const needsPreviousTurn = selectedIndex === 0 && previousRealTurnSeq !== undefined;
+    const [previousTurn, setPreviousTurn] = useState(null);
+    useEffect(() => {
+        if (!needsPreviousTurn || previousRealTurnSeq === undefined) {
+            if (previousTurn !== null)
+                setPreviousTurn(null);
+            return;
+        }
+        let cancelled = false;
+        const seq = previousRealTurnSeq;
+        void getTurn(sessionId, seq).then(result => {
+            if (cancelled || tab.signal.aborted)
+                return;
+            if (result.ok)
+                setPreviousTurn(result.value ?? null);
+        }).catch(() => { });
+        return () => { cancelled = true; };
+        // previousTurn is the effect's own sink — depending on it would refetch in a loop.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sessionId, needsPreviousTurn, previousRealTurnSeq, getTurn, tab.signal]);
+    const previousResponseNumber = (() => {
+        if (selectedItem?.responseSummary.kind === 'compaction')
+            return null;
+        if (selectedIndex > 0)
+            return scopeRequests.slice(0, selectedIndex).filter(r => r.responseSummary.kind !== 'compaction').at(-1)?.requestNumber ?? null;
+        if (selectedIndex === 0 && effectiveScope !== undefined && previousTurn !== null) {
+            const previousScope = previousTurn.scopes.find(candidate => candidate.scopeId === effectiveScope.scopeId);
+            return previousScope?.requests.filter(r => r.responseSummary.kind !== 'compaction').at(-1)?.requestNumber ?? null;
+        }
+        return null;
+    })();
+    // The selected request's full capture (cached per turn).
+    useEffect(() => {
+        if (selectedRequestSeq === null) {
+            setRequest(null);
+            return;
+        }
+        const cached = detailCache.current.get(selectedRequestSeq);
+        if (cached !== undefined) {
+            setRequest(cached);
+            return;
+        }
+        setRequest(null);
+        let cancelled = false;
+        const seq = selectedRequestSeq;
+        void getRequest(sessionId, seq).then(result => {
+            if (cancelled || tab.signal.aborted)
+                return;
+            // The panel never sends a scope filter, so a refusal cannot arrive;
+            // the narrow is for the wire type only.
+            if (result.ok && result.value !== undefined && !('refused' in result.value)) {
+                detailCache.current.set(seq, result.value);
+                setRequest(result.value);
+            }
+            else if (!result.ok) {
+                setError(result.error.message);
+            }
+        }).catch((cause) => {
+            if (!cancelled)
+                setError(cause instanceof Error ? cause.message : String(cause));
+        });
+        return () => { cancelled = true; };
+    }, [sessionId, selectedRequestSeq, getRequest, tab.signal]);
+    // The timing tab's whole-turn aggregation.
+    useEffect(() => {
+        if (mainTab !== 'time' || turnSeq === null)
+            return;
+        let cancelled = false;
+        const seq = turnSeq;
+        void getTurnTiming(sessionId, seq).then(result => {
+            if (cancelled || tab.signal.aborted)
+                return;
+            if (result.ok)
+                setTiming(result.value ?? null);
+            else
+                setError(result.error.message);
+        }).catch((cause) => {
+            if (!cancelled)
+                setError(cause instanceof Error ? cause.message : String(cause));
+        });
+        return () => { cancelled = true; };
+    }, [sessionId, turnSeq, mainTab, getTurnTiming, tab.signal]);
+    const turn = turns?.find(candidate => candidate.turnSeq === turnSeq);
+    /** The shared per-turn selection reset (no scrolling — the caller picks the anchor). */
+    const selectTurnState = (next) => {
+        setTurnSeq(next);
+        setScopeId('main');
+        setSelectedSeq(null);
+        setFilterCat(null);
+        setOverview(null);
+        setRequest(null);
+        setTiming(null);
+    };
+    /** Scroll the conversation to one selected turn (real turns only; pseudo-turns never scroll). */
+    const syncScrollToTurn = (seq, list = turns) => {
+        const target = list?.find(candidate => candidate.turnSeq === seq);
+        // Real turns key on the host's turn number (M5), so a positive seq is the
+        // anchor even before the list resolves (the navigation-params path).
+        const hostTurn = target?.hostTurn ?? (seq > 0 ? seq : undefined);
+        if (hostTurn === undefined)
+            return;
+        const jump = ++jumpToken.current;
+        if (hasTurnAnchor(hostTurn) || !loadThrough || target?.startSeq === undefined) {
+            scrollConversationToTurn(hostTurn);
+            return;
+        }
+        // The chat has not rendered that turn yet: page its history back to the
+        // turn's start (the session's own loader), then land once the row mounts.
+        // A newer jump supersedes this one; no progress falls back to the nearest row.
+        void loadThrough(sessionId, target.startSeq).catch(() => undefined).then(() => {
+            let frames = 0;
+            const land = () => {
+                if (jump !== jumpToken.current)
+                    return;
+                if (hasTurnAnchor(hostTurn) || frames >= 60) {
+                    scrollConversationToTurn(hostTurn);
+                    return;
+                }
+                frames += 1;
+                requestAnimationFrame(land);
+            };
+            land();
+        });
+    };
+    const onSelectTurn = (next) => {
+        if (next === turnSeq)
+            return;
+        selectTurnState(next);
+        syncScrollToTurn(next);
+    };
+    /** The latest REAL turn or room round — the 最新 button's target (pseudo-turns have no conversation anchor). */
+    const latestRealTurn = (turns ?? []).filter(candidate => candidate.hostTurn !== undefined || candidate.room !== undefined).at(-1);
+    const latestMainTurn = (turns ?? []).filter(candidate => candidate.hostTurn !== undefined).at(-1);
+    const gaps = turnGaps(listMeta, turns ?? []);
+    const latestUnloaded = range !== undefined && latestMainTurn?.hostTurn !== undefined && range.last > latestMainTurn.hostTurn;
+    /** Move the loaded window (latest when `end` is null), then select `select` or the newest loaded turn. */
+    const loadWindow = (end, select) => {
+        if (!loadTurns)
+            return;
+        void loadTurns(sessionId, end).then(result => {
+            if (!result.ok) {
+                setError(result.error.message);
+                return;
+            }
+            setTurns(result.value.turns);
+            setBackfill(result.value.backfill);
+            setListMeta(listMetaOf(result.value));
+            setTrendKey(key => key + 1);
+            const target = select !== undefined && result.value.turns.some(turn => turn.turnSeq === select) ? select : latestTurnSeq(result.value.turns);
+            if (target !== undefined) {
+                selectTurnState(target);
+                syncScrollToTurn(target, result.value.turns);
+            }
+        }).catch((cause) => setError(cause instanceof Error ? cause.message : String(cause)));
+    };
+    /** A run of unloaded turns: older runs load the 30 ending at its end, newer runs the 30 starting at its start. */
+    const onLoadGap = (gap) => {
+        const firstLoaded = Math.min(...(turns ?? []).map(turn => turn.hostTurn ?? Number.POSITIVE_INFINITY));
+        if (gap.to < firstLoaded)
+            loadWindow(gap.to, gap.to);
+        else
+            loadWindow(Math.min(gap.from + WINDOW_TURNS - 1, range?.last ?? gap.to), gap.from);
+    };
+    const onLatest = () => {
+        if (latestUnloaded) {
+            loadWindow(null);
+            scrollConversationToBottom();
+            return;
+        }
+        if (latestRealTurn === undefined)
+            return;
+        if (turnSeq !== latestRealTurn.turnSeq)
+            selectTurnState(latestRealTurn.turnSeq);
+        scrollConversationToBottom();
+    };
+    /** The unloaded run right next to a turn, in the session's turn numbering. */
+    const adjacentGap = (turn, delta) => {
+        const n = turn === undefined ? undefined : turnNumber(turn);
+        return n === undefined ? undefined : gaps.find(g => delta < 0 ? gapShown(g).to === n - 1 : gapShown(g).from === n + 1);
+    };
+    /** Step one turn; at the loaded window's edge, load the adjacent window and keep going. */
+    const onStep = (delta) => {
+        const list = turns ?? [];
+        const i = list.findIndex(v => v.turnSeq === turnSeq);
+        const next = list[i + delta];
+        const gap = adjacentGap(list[i], delta);
+        if (gap !== undefined)
+            onLoadGap(gap);
+        else if (next)
+            onSelectTurn(next.turnSeq);
+    };
+    const stepIndex = (turns ?? []).findIndex(v => v.turnSeq === turnSeq);
+    const canStep = (delta) => {
+        if (adjacentGap((turns ?? [])[stepIndex], delta) !== undefined)
+            return true;
+        return stepIndex >= 0 && stepIndex + delta >= 0 && stepIndex + delta < (turns ?? []).length;
+    };
+    const onSelectScope = (next) => {
+        // On the room tab the effective scope falls back to the main agent, so
+        // compare with the tab actually shown, or the main tab could never be re-picked.
+        if (next === (scopeId === ROOM_TAB ? ROOM_TAB : effectiveScope?.scopeId))
+            return;
+        setScopeId(next);
+        setSelectedSeq(null);
+        setFilterCat(null);
+    };
+    const onMainTab = (next) => {
+        setMainTab(next);
+    };
+    /** A timing tab call row's click-through: the token tab, that scope, that request. */
+    const onOpenRequest = (seq, targetScopeId) => {
+        setMainTab('token');
+        setScopeId(targetScopeId);
+        setSelectedSeq(seq);
+        setFilterCat(null);
+    };
+    // A load failure (refusal, disconnect, a call rejected before any network
+    // traffic) is an explicit state with a retry — loading shows only while no
+    // error exists.
+    const errorBody = error === null ? undefined : (_jsxs("div", { className: css.stateNote, role: "alert", children: [t('state.error', { message: error }), _jsx("button", { type: "button", className: css.retry, onClick: onRetry, children: t('state.retry') })] }));
+    let body;
+    if (turns === null) {
+        body = errorBody ?? _jsx("div", { className: css.stateNote, role: "status", children: t('state.loading') });
+    }
+    else if (errorBody !== undefined && (turns.length === 0 || overview === null)) {
+        // A failed verb (listTurns or getTurn) outranks the empty states.
+        body = errorBody;
+    }
+    else if (turns.length === 0) {
+        body = backfill?.state === 'broken'
+            // The log exists but refused to decode: a note, not an error page.
+            ? _jsx("div", { className: css.stateNote, role: "status", children: t('state.logBroken', { reason: backfill.reason ?? '' }) })
+            : _jsx("div", { className: css.stateNote, role: "status", children: t('state.noTurns') });
+    }
+    else if (turnMissing) {
+        body = _jsx("div", { className: css.stateNote, role: "status", children: t('state.turnMissing') });
+    }
+    else if (overview === null) {
+        body = _jsx("div", { className: css.stateNote, role: "status", children: t('state.loading') });
+    }
+    else if (scopeId === ROOM_TAB && (overview.roomDecisions?.length ?? 0) > 0) {
+        body = (_jsx("div", { className: css.bodyFill, children: _jsx(RoomDecisionsView, { decisions: overview.roomDecisions, selectedId: decisionId, onSelect: setDecisionId, t: t }) }));
+    }
+    else if (effectiveScope === undefined) {
+        body = _jsx("div", { className: css.stateNote, role: "status", children: t('state.emptyScope') });
+    }
+    else if (effectiveScope.requests.length === 0 && effectiveScope.status !== 'failed') {
+        body = _jsx("div", { className: css.stateNote, role: "status", children: t('state.noRequests') });
+    }
+    else if (effectiveScope.status === 'failed' && effectiveScope.requests.length === 0) {
+        body = (_jsx("div", { className: css.scrollBody, children: _jsx(FailureCard, { scope: effectiveScope, t: t }) }));
+    }
+    else if (mainTab === 'token') {
+        body = (_jsxs("div", { className: css.bodyFill, children: [effectiveScope.status === 'failed' && _jsx(FailureCard, { scope: effectiveScope, t: t }), _jsx(TokenView, { onOpenRequest: link => {
+                        if (turnSeq !== null && selectedRequestSeq !== null)
+                            setRequestTrail(previous => [...previous, { turnSeq, scopeId: effectiveScope.scopeId, seq: selectedRequestSeq }]);
+                        setTurnSeq(link.turnSeq);
+                        onOpenRequest(link.seq, link.scopeId);
+                    }, onReturn: requestTrail.length === 0 ? undefined : () => {
+                        const target = requestTrail.at(-1);
+                        setRequestTrail(previous => previous.slice(0, -1));
+                        setTurnSeq(target.turnSeq);
+                        onOpenRequest(target.seq, target.scopeId);
+                    }, scope: effectiveScope, selectedSeq: selectedRequestSeq, request: request, filterCat: filterCat, previousResponseNumber: previousResponseNumber, onSelect: seq => { setSelectedSeq(seq); setFilterCat(null); }, onToggleFilter: category => { setFilterCat(previous => previous === category ? null : category); }, t: t })] }));
+    }
+    else {
+        body = (_jsxs("div", { className: css.bodyFill, children: [effectiveScope.status === 'failed' && _jsx(FailureCard, { scope: effectiveScope, t: t }), _jsx(TimingView, { timing: timing, scopes: scopes, filterScopeId: effectiveScope.scopeId, filterIsSubagent: effectiveScope.kind === 'subagent', config: effectiveScope.config, onSelectScope: onSelectScope, onOpenRequest: onOpenRequest, t: t })] }));
+    }
+    return (_jsxs(PanelRoot, { className: css.root, role: "region", "aria-label": t('tab.title'), children: [_jsxs("div", { className: css.head, children: [_jsxs("div", { className: css.r1, children: [_jsx("span", { className: css.title, children: t('tab.title') }), _jsxs("div", { className: css.stepper, children: [_jsx("button", { type: "button", "aria-label": t('lens.previous'), disabled: !canStep(-1), onClick: () => onStep(-1), children: "\u2039" }), _jsx(TurnMenu, { turns: turns ?? [], turnSeq: turnSeq, onSelect: onSelectTurn, gaps: loadTurns ? gaps : [], lastTurn: listMeta.total ?? range?.last, onLoad: onLoadGap, t: t }), _jsx("button", { type: "button", "aria-label": t('lens.next'), disabled: !canStep(1), onClick: () => onStep(1), children: "\u203A" })] }), latestRealTurn && (turnSeq !== latestRealTurn.turnSeq || (latestUnloaded && loadTurns)) && _jsx("button", { type: "button", className: css.latestText, "aria-label": t('turn.latest'), onClick: onLatest, children: t('lens.latest') }), _jsx("div", { className: css.headTabs, children: _jsx(SegCtl, { mini: true, label: t('tab.title'), options: [
+                                        { id: 'token', label: t('view.token') },
+                                        { id: 'time', label: t('view.time') },
+                                    ], value: mainTab, onChange: onMainTab }) })] }), parent && _jsx(ParentLine, { parent: parent, t: t }), trend && _jsx(Trend, { data: trend, turnSeq: turnSeq, selectedSeq: effectiveScope?.kind === 'main' ? selectedRequestSeq : null, scopeId: "main", scopeLabel: t('scope.mainName'), gaps: loadTurns ? gaps : [], onLoadGap: onLoadGap, t: t, onSelect: (next, seq, targetScope) => {
+                            // On the timing view the map picks the turn and stays there; on the request view it opens the request.
+                            onSelectTurn(next);
+                            if (mainTab !== 'time')
+                                onOpenRequest(seq, targetScope);
+                        } }), turn !== undefined && (turn.query !== '' || turn.trigger !== undefined) && _jsxs("div", { className: css.query, children: [turnNumber(turn) !== undefined && _jsx("span", { className: css.queryTurn, children: t('query.turn', { turn: String(turnNumber(turn)) }) }), turn.room !== undefined && _jsxs("code", { className: css.querySource, children: [t('query.room'), turn.room.targets.length > 0 ? ` → ${turn.room.targets.join('、')}` : ''] }), turn.query === '' && turn.trigger !== undefined && _jsx("code", { className: css.querySource, children: turn.trigger.source }), _jsx("b", { title: turn.query !== '' ? turn.query : turn.trigger?.text, children: turn.hostTurn === undefined && turn.query === 'compaction' ? t('compaction.title') : turn.query !== '' ? turn.query : turn.trigger.text })] }), (scopes.length > 0 || (overview?.roomDecisions?.length ?? 0) > 0) && (_jsx(AgentTabs, { scopes: scopes, roomCount: overview?.roomDecisions?.length, value: scopeId === ROOM_TAB && (overview?.roomDecisions?.length ?? 0) > 0 ? ROOM_TAB : effectiveScope?.scopeId ?? 'main', onSelect: onSelectScope, onOpenRequest: link => { setTurnSeq(link.turnSeq); onOpenRequest(link.seq, link.scopeId); }, t: t }))] }), _jsx("div", { className: css.body, children: body })] }));
+}

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

@@ -0,0 +1,18 @@
+/**
+ * The 原始 JSON view: the selected request's CapturedRequest serialized
+ * verbatim — the structured panel's escape hatch for exact field values.
+ *
+ * @module @khorsheed/dsh-context-lens/client
+ */
+import type { ReactNode } from 'react';
+import type { CapturedRequest } from '../types.ts';
+import type { InspectorTabProps } from './contract.ts';
+/** The panel's translate face. */
+type T = InspectorTabProps['t'];
+/** The raw view body. */
+export declare function RawView({ request, t }: {
+    readonly request: CapturedRequest;
+    readonly t: T;
+}): ReactNode;
+export {};
+//# sourceMappingURL=RawView.d.ts.map

package/lib/types/client/RawView.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { requestNumberText, fmt } from "./aggregate.js";
+import css from './RawView.module.css';
+/** The raw view body. */
+export function RawView({ request, t }) {
+    const serialized = JSON.stringify(request, null, 1);
+    return (_jsxs("div", { className: css.scroll, children: [_jsx("div", { className: css.hint, children: t('raw.hint', { seq: requestNumberText(request), chars: fmt(serialized.length) }) }), _jsx("pre", { className: css.pre, children: serialized })] }));
+}

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

@@ -0,0 +1,19 @@
+import type { CapturedRequest, RequestLink, SegmentCategory } from '../types.ts';
+import type { InspectorTabProps } from './contract.ts';
+type T = InspectorTabProps['t'];
+/** The request identity and measurements remain visible in JSON mode. */
+export declare function RequestFacts({ request: r, t, raw, onToggleRaw }: {
+    readonly request: CapturedRequest;
+    readonly t: T;
+    readonly raw?: boolean;
+    readonly onToggleRaw?: () => void;
+}): import("react").JSX.Element;
+/** Provider usage and exact prefix comparison are distinct facts. */
+export declare function CacheFacts({ request: r, onOpenRequest, onShowCategory, t }: {
+    readonly request: CapturedRequest;
+    readonly onOpenRequest?: ((link: RequestLink) => void) | undefined;
+    readonly onShowCategory?: ((category: SegmentCategory) => void) | undefined;
+    readonly t: T;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=RequestFacts.d.ts.map

package/lib/types/client/RequestFacts.js

@@ -0,0 +1,39 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { ChangeList } from "./ChangeList.js";
+import { requestNumberText, aggregateCategories, cachePct, fmt, fmtK, fmtSpan, inputMiss, inputTotal, summaryText } from "./aggregate.js";
+import css from './TokenView.module.css';
+import { ConfigFacts } from "./ConfigFacts.js";
+/** The request identity and measurements remain visible in JSON mode. */
+export function RequestFacts({ request: r, t, raw = false, onToggleRaw }) {
+    const u = r.usage;
+    const chars = aggregateCategories(r).reduce((n, c) => n + c.chars, 0);
+    const duration = (ms) => ms === undefined ? '—' : fmtSpan(ms);
+    const metrics = [
+        { label: t('req.input'), value: u ? fmt(inputTotal(u)) : '—', unit: 'tok', sub: t(r.compaction?.inputPartial ? 'compaction.recoveredChars' : 'chain.chars', { count: fmt(chars) }) },
+        { label: t('lens.hit'), value: u ? (cachePct(u)?.toFixed(1) ?? '—') : '—', unit: '%', sub: u?.cacheReadTokens !== undefined ? `${fmt(u.cacheReadTokens)} tok` : '—' },
+        { label: t('lens.miss'), value: u ? fmt(inputMiss(u)) : '—', unit: 'tok', sub: r.config.maxTokens === undefined ? '' : t('lens.outputLimit', { count: fmtK(r.config.maxTokens) }) },
+        { label: t(r.compaction?.inputPartial ? 'compaction.interval' : 'lens.duration'), value: duration(r.timing.totalMs), unit: '', sub: `${t('req.output')} ${u ? fmt(u.outputTokens) : '—'} tok · ${t('lens.firstToken', { duration: duration(r.timing.waitMs) })}` },
+    ];
+    return _jsxs(_Fragment, { children: [_jsxs("div", { className: css.detailHead, children: [_jsxs("b", { title: r.requestNumber === undefined && r.purpose !== 'compaction' ? t('req.numberUnknown') : undefined, children: [r.purpose !== 'compaction' && _jsxs(_Fragment, { children: ["#", requestNumberText(r), " \u00B7 "] }), summaryText(r.responseSummary, t('resp.directAnswer'), t('compaction.title'), t('resp.thinking'))] }), onToggleRaw && _jsx("button", { type: "button", className: css.jsonToggle, "aria-label": t('view.raw'), title: t('view.raw'), "aria-pressed": raw, onClick: onToggleRaw, children: '{ }' })] }), _jsx(ConfigFacts, { config: r.config, t: t }), _jsx("div", { className: css.metrics, children: metrics.map(m => _jsxs("div", { children: [_jsx("span", { children: m.label }), _jsxs("b", { children: [m.value, _jsx("small", { children: m.unit })] }), _jsx("span", { title: m.sub, children: m.sub })] }, m.label)) })] });
+}
+/** Provider usage and exact prefix comparison are distinct facts. */
+export function CacheFacts({ request: r, onOpenRequest, onShowCategory, t }) {
+    const u = r.usage, prefix = r.prefix;
+    return _jsxs("section", { children: [_jsx("h3", { className: css.sectionTitle, children: t('lens.cache') }), _jsxs("div", { className: css.prefix, children: [u && _jsxs(_Fragment, { children: [_jsx("div", { className: css.cacheStrip, children: _jsx("i", { style: { width: `${cachePct(u) ?? 0}%` } }) }), _jsxs("div", { className: css.cacheLegend, children: [_jsxs("span", { children: [_jsx("i", {}), t('lens.hit'), " ", fmt(u.cacheReadTokens ?? 0)] }), _jsxs("span", { children: [_jsx("i", {}), t('lens.miss'), " ", fmt(inputMiss(u))] })] })] }), prefix === undefined
+                        ? _jsx("span", { title: t('lens.prefixBaselineHint'), children: t(r.compaction?.inputPartial ? 'compaction.noPrefix' : 'lens.prefixUnknown') })
+                        : prefix.changes === undefined ? _jsx(LegacyPrefix, { prefix: prefix, t: t })
+                            : _jsx(ChangeList, { request: r, prefix: prefix, onOpenRequest: onOpenRequest, onShowCategory: onShowCategory, t: t })] })] });
+}
+/** A capture from before the change list existed keeps its first-difference view. */
+function LegacyPrefix({ prefix, t }) {
+    return _jsxs(_Fragment, { children: [prefix.changed ? _jsxs(_Fragment, { children: [_jsx("span", { children: t('lens.prefixChanged', { index: String(prefix.changed.index).padStart(3, '0'), seq: requestNumberText({ requestNumber: prefix.previousRequestNumber }) }) }), _jsx(PrefixDifference, { changed: prefix.changed, t: t })] }) : _jsx("span", { children: t('lens.prefixSame', { seq: requestNumberText({ requestNumber: prefix.previousRequestNumber }), gap: fmtSpan(prefix.gapMs) }) }), prefix.toolsChanged && _jsx("div", { children: t('lens.toolsChanged') })] });
+}
+function PrefixDifference({ changed, t }) {
+    const d = changed.text;
+    if (!d)
+        return _jsxs(_Fragment, { children: [_jsxs("pre", { className: css.before, children: ["\u2212 ", changed.before] }), _jsxs("pre", { className: css.after, children: ["+ ", changed.after] })] });
+    const leading = `${d.leadingOmitted ? '…' : ''}${d.leading}`;
+    const trailing = `${d.trailing}${d.trailingOmitted ? '…' : ''}`;
+    const truncated = d.removedChars > 160 || d.addedChars > 160;
+    return _jsxs(_Fragment, { children: [changed.beforeCategory !== changed.afterCategory && _jsx("span", { children: t('lens.diffCategory', { before: changed.beforeCategory ? t(`cat.${changed.beforeCategory}`) : '—', after: changed.afterCategory ? t(`cat.${changed.afterCategory}`) : '—' }) }), (d.removedChars > 0 || d.addedChars > 0) && _jsxs(_Fragment, { children: [_jsx("span", { className: css.diffMeta, children: t('lens.diffPosition', { offset: fmt(d.offset + 1), before: fmt(d.removedChars), after: fmt(d.addedChars) }) }), _jsxs("pre", { className: css.diffLine, children: [_jsx("span", { className: css.before, children: "\u2212 " }), leading, d.removedChars > 0 && _jsxs("del", { children: [d.removed, d.removedChars > 160 ? '…' : ''] }), trailing, !leading && !d.removed && !trailing && t('lens.diffEmpty')] }), _jsxs("pre", { className: css.diffLine, children: [_jsx("span", { className: css.after, children: "+ " }), leading, d.addedChars > 0 && _jsxs("ins", { children: [d.added, d.addedChars > 160 ? '…' : ''] }), trailing, !leading && !d.added && !trailing && t('lens.diffEmpty')] }), truncated && _jsx("span", { className: css.diffMeta, children: t('lens.diffTruncated') })] })] });
+}

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

@@ -0,0 +1,24 @@
+/**
+ * The 房间 tab: the decision-model calls the room made during this turn (its
+ * own scenarios — automatic task filing, automatic report timing), listed
+ * like requests (#n · scenario, the probability the outcome was taken with,
+ * input → output tokens, latency) and opened like one: the model facts, the
+ * state the room sent, the fixed question, the candidates with their
+ * probabilities and the outcome — or, through `{ }`, the request and response
+ * as JSON.
+ *
+ * @module @khorsheed/dsh-context-lens/client
+ */
+import { type ReactNode } from 'react';
+import type { RoomDecisionRow } from '../types.ts';
+import type { InspectorTabProps } from './contract.ts';
+type T = InspectorTabProps['t'];
+/** The 房间 tab body. */
+export declare function RoomDecisionsView({ decisions, selectedId, onSelect, t }: {
+    readonly decisions: readonly RoomDecisionRow[];
+    readonly selectedId: string | null;
+    readonly onSelect: (id: string) => void;
+    readonly t: T;
+}): ReactNode;
+export {};
+//# sourceMappingURL=RoomDecisionsView.d.ts.map