@deepseek-harness-tui/dsh-tui 0.12.0 → 0.14.0

package/lib/types/screens/StatusMetrics.js

@@ -1,6 +1,31 @@
 import { stringWidth } from '../ink/stringWidth.js';
-/** Context bar segments — DeepSeek blue family (dark-theme friendly: deep
- *  navy → brand blue, neutral grey free segment).
+import { resolveContextOccupancy } from '../dsh-adapter/context-occupancy.js';
+import { getActiveBrand } from '../branding.js';
+import { getActiveThemeName, isLightThemeActive } from '../theme.js';
+import { t } from '../i18n.js';
+/**
+ * The occupancy reading a screen renders.
+ *
+ * The channel publishes `contextOccupancy` (see
+ * `dsh-adapter/context-occupancy.ts`); this resolves the same reading for ports
+ * that do not carry the member — the partial channel literals the verify/repro
+ * harnesses hand the real screens, and third-party scenes built against an
+ * older port. The channel itself always publishes it, so a production render
+ * has exactly one source, and a member that IS present is never second-guessed.
+ * @param channel - The channel surface (or a partial one).
+ * @returns Occupancy for the footer/bar/warning, or `undefined` when unknown.
+ */
+export function channelContextOccupancy(channel) {
+    if (channel.contextOccupancy !== undefined)
+        return channel.contextOccupancy;
+    // Same formula the channel's own accessor uses; no projection value can be
+    // shadowed here because this branch only runs when the port has none.
+    return resolveContextOccupancy(undefined, channel.lastUsage, channel.contextWindow);
+}
+/** Context bar segments, in bar order — the theme key that fills each one,
+ *  its label pair, and the fill a palette without that key falls back to (the
+ *  pre-theme DeepSeek blue family, dark-theme friendly: deep navy → brand
+ *  blue, neutral grey free segment).
  *
  *  The bar draws NO text inside a used segment: the fill color is the whole
  *  signal (community feedback — the old `s`/`p`/`t` letters read as noise on
@@ -10,12 +35,77 @@ import { stringWidth } from '../ink/stringWidth.js';
  *  hoverable JSX bar (ContextBarView), which re-derives the same column split
  *  this module's ANSI path renders. */
 export const USED_SEGMENTS = [
-    { key: 'system', color: '#22305F', labels: ['system', 'sys'] }, // deep navy
-    { key: 'prompt', color: '#2B3D78', labels: ['prompt', 'pr'] }, // navy
-    { key: 'assistant', color: '#344A92', labels: ['assistant', 'ast'] }, // indigo
-    { key: 'thinking', color: '#4D6BFE', labels: ['thinking', 'th'] }, // DeepSeek brand blue
-    { key: 'tools', color: '#5A7CFF', labels: ['tools', 'tl'] }, // lighter blue
+    { key: 'system', themeKey: 'contextBarSystem', fallback: '#22305F', labels: ['system', 'sys'] }, // deep navy
+    { key: 'prompt', themeKey: 'contextBarPrompt', fallback: '#2B3D78', labels: ['prompt', 'pr'] }, // navy
+    { key: 'assistant', themeKey: 'contextBarAssistant', fallback: '#344A92', labels: ['assistant', 'ast'] }, // indigo
+    { key: 'thinking', themeKey: 'contextBarThinking', fallback: '#4D6BFE', labels: ['thinking', 'th'] }, // DeepSeek brand blue
+    { key: 'tools', themeKey: 'contextBarTools', fallback: '#5A7CFF', labels: ['tools', 'tl'] }, // lighter blue
 ];
+/**
+ * claude 品牌（Claude 后端）的分段色——陶土橙明度阶梯，随品牌双主题分深浅
+ * 两表（与 `claude-dark`/`claude-paper` 的面板/强调色对应）。结构（key/labels）
+ * 不换，只换填充色：取色统一走 `usedSegmentColor`。
+ */
+const CLAUDE_SEGMENT_COLORS_DARK = Object.freeze({
+    system: '#3A2720',
+    prompt: '#7A4A33',
+    assistant: '#B0623F',
+    thinking: '#D77757',
+    tools: '#E8A183',
+});
+const CLAUDE_SEGMENT_COLORS_PAPER = Object.freeze({
+    system: '#F5DDD2',
+    prompt: '#E8C4B0',
+    assistant: '#D69877',
+    thinking: '#C96442',
+    tools: '#B85738',
+});
+/**
+ * codex 品牌（Codex 后端）的分段色——薰衣草紫明度阶梯，随品牌双主题分深浅
+ * 两表（与 `codex-lavender`/`codex-paper` 的面板/强调色对应）。结构（key/
+ * labels）不换，只换填充色：取色统一走 `usedSegmentColor`。
+ */
+const CODEX_SEGMENT_COLORS_DARK = Object.freeze({
+    system: '#17171B',
+    prompt: '#282543',
+    assistant: '#5A5090',
+    thinking: '#A69BE8',
+    tools: '#C5BFEE',
+});
+const CODEX_SEGMENT_COLORS_PAPER = Object.freeze({
+    system: '#ECE9FB',
+    prompt: '#D8D2F5',
+    assistant: '#B4A9E8',
+    thinking: '#8A7ED9',
+    tools: '#6B5CC8',
+});
+/** 渲染期取一个已用分段的填充色（品牌档渲染时读取，见 `branding.ts`）：品牌在
+ *  档时品牌表优先——那是「切后端整屏换色」的语义，与当前主题声明了什么无关；
+ *  其余情形原样返回入参（主题声明的键或固定 ramp）。 */
+export function usedSegmentColor(segment) {
+    const brand = getActiveBrand();
+    if (brand !== 'claude' && brand !== 'codex')
+        return segment.color;
+    const light = isLightThemeActive(getActiveThemeName());
+    const table = brand === 'claude'
+        ? (light ? CLAUDE_SEGMENT_COLORS_PAPER : CLAUDE_SEGMENT_COLORS_DARK)
+        : (light ? CODEX_SEGMENT_COLORS_PAPER : CODEX_SEGMENT_COLORS_DARK);
+    return table[segment.key] ?? segment.color;
+}
+/** The five used-segment fills a palette declares, in bar order. A palette
+ *  predating the keys (community themes) keeps the fixed ramp above, so both
+ *  the JSX bar and its hover legend stay renderable without the theme.
+ *
+ *  纯粹的调色板投影：只回答「这个调色板声明了什么」。品牌覆盖在渲染点叠加
+ *  （`usedSegmentColor`），两套机制因此不会互相顶掉。 */
+export function contextBarSegmentColors(theme) {
+    return USED_SEGMENTS.map(segment => (theme?.[segment.themeKey] ?? segment.fallback));
+}
+/** A single used block when the backend reports occupancy without composition. */
+export function contextBarUsedColor(colors) {
+    const segment = USED_SEGMENTS[2];
+    return usedSegmentColor({ key: segment.key, color: colors?.[2] ?? segment.fallback });
+}
 /** Free-segment colors: light grey fill, dark grey readout. Exported so the
  *  JSX bar (ContextBarView) and the hover chip paint the same free color the
  *  ANSI path does instead of re-declaring the hex. */
@@ -102,7 +192,9 @@ export function rightAlignBarText(options, width) {
 }
 /** A used segment's fill: background color only, no text. Letters inside the
  *  bar read as noise (community feedback) and never fit the narrow segments
- *  anyway — the pointer names a color now (contextBarBreakdown). */
+ *  anyway — the pointer names a color now (contextBarBreakdown). This string
+ *  path predates the `contextBar*` keys: the themed bar is the JSX
+ *  ContextBarView, so the fills here stay on the fixed hex ramp. */
 function renderUsedSegment(color, width) {
     if (width <= 0)
         return '';
@@ -115,34 +207,58 @@ function renderFreeSegment(options, width, fill, style) {
 }
 /**
  * The context bar's hover breakdown — the legend the bar no longer carries
- * itself. One entry per segment the bar actually paints (a zero-token content
- * type gets no columns, so it gets no entry either), in bar order, free last.
+ * itself. Local content estimates come first, measured free space last. When
+ * composition is unavailable, one measured used entry replaces the estimates.
  *
  * `columns` picks the label form: readable names with a ` · ` separator while
  * the line fits, then the short forms, then a bare space separator (the color
  * chip already separates the entries). The caller renders each entry as
  * `chip + space + label`, which is what the fit test measures.
  *
- * @param segments - Used tokens per content type.
+ * @param segments - Local token estimates per content type.
  * @param usedTokens - Total used tokens; the remainder is the free entry.
  * @param contextWindow - The context window size in tokens.
  * @param columns - Terminal width; the footer's own padding is subtracted here.
- * @param freeFill - The free segment's fill color (callers pass a theme override).
+ * @param colors - The bar's fills: `used` (bar order, from the palette) and the
+ *   free segment's fill. Absent fields fall back to the fixed ramp / grey.
  * @returns The breakdown entries and the separator to join them with.
  */
-export function contextBarBreakdown(segments, usedTokens, contextWindow, columns, freeFill = FREE_SEGMENT_FILL) {
+export function contextBarBreakdown(segments, usedTokens, contextWindow, columns, colors) {
     if (contextWindow <= 0)
         return { entries: [], separator: ' · ' };
     const freeTokens = Math.max(0, contextWindow - usedTokens);
     const raw = [];
-    for (const segment of USED_SEGMENTS) {
+    for (const [index, segment] of USED_SEGMENTS.entries()) {
         const tokens = segments[segment.key];
-        if (tokens > 0) {
-            raw.push({ key: segment.key, tokens, color: segment.color, labels: segment.labels });
+        if (tokens > 0 && usedTokens > 0) {
+            raw.push({
+                key: segment.key,
+                tokens,
+                // 调用点解析出的调色板声明值优先；没有声明才回落到品牌表 / 固定 ramp。
+                color: usedSegmentColor({
+                    key: segment.key,
+                    color: (colors?.used?.[index] ?? segment.fallback),
+                }),
+                labels: segment.labels,
+            });
         }
     }
-    if (freeTokens > 0)
-        raw.push({ key: 'free', tokens: freeTokens, color: freeFill, labels: ['free'] });
+    if (raw.length === 0 && usedTokens > 0) {
+        raw.push({
+            key: 'used',
+            tokens: usedTokens,
+            color: contextBarUsedColor(colors?.used),
+            labels: [t('context-bar-used')],
+        });
+    }
+    if (freeTokens > 0) {
+        raw.push({
+            key: 'free',
+            tokens: freeTokens,
+            color: colors?.freeFill ?? FREE_SEGMENT_FILL,
+            labels: ['free'],
+        });
+    }
     if (raw.length === 0)
         return { entries: [], separator: ' · ' };
     // Footer padding (1 cell each side) plus slack for the trajectory wake that
@@ -203,8 +319,7 @@ function allocateProportionally(values, columns) {
     }
     return allocatedColumns;
 }
-/** Give every visible used segment at least one column before sharing the
- *  rest. Exported for ContextBarView (hoverable JSX twin of the bar). */
+/** Share a fixed used-column budget, keeping small segments visible when it fits. */
 export function allocateBarColumns(values, width) {
     const visibleUsedSegments = USED_SEGMENTS
         .map((_, index) => index)
@@ -219,34 +334,50 @@ export function allocateBarColumns(values, width) {
     const remainingColumns = allocateProportionally(values, width - visibleUsedSegments.length);
     return minimumColumns.map((minimum, index) => minimum + (remainingColumns[index] ?? 0));
 }
+/** Occupancy fixes the used/free boundary; estimates only divide the used part. */
+export function contextBarColumns(segments, usedTokens, contextWindow, width) {
+    const columns = Math.max(0, Math.floor(width));
+    const ratio = contextWindow > 0
+        ? Math.min(1, Math.max(0, usedTokens / contextWindow))
+        : 0;
+    const usedWidth = Math.round(columns * ratio);
+    const used = allocateBarColumns(USED_SEGMENTS.map(segment => segments[segment.key]), usedWidth);
+    return {
+        used,
+        unclassified: usedWidth - used.reduce((sum, value) => sum + value, 0),
+        free: columns - usedWidth,
+    };
+}
 /**
  * The segmented context bar: used segments by content type, then the
  * remainder as a light free segment whose right edge carries the usage
  * readout (`13k/64k 19.5%`). No other text — the bar is read by color, and
  * the pointer supplies the names and numbers (contextBarBreakdown). The
  * readout tints amber / red as the context fills (contextPressureStep).
- * @param segments - Used tokens per content type.
- * @param usedTokens - Total used tokens, driving the usage readout.
+ * @param segments - Local token estimates per content type.
+ * @param usedTokens - Measured occupancy, driving both fill length and readout.
  * @param contextWindow - The context window size in tokens.
  * @param width - Total bar width in terminal columns.
+ * @param colors - The free segment's fill/text override; absent fields keep
+ *   the fixed defaults. The used fills stay on the fixed ramp unless a brand
+ *   overrides them (see usedSegmentColor).
  * @returns The ANSI-styled segmented bar, or '' when `width` or `contextWindow` is non-positive.
  */
 export function renderContextBar(segments, usedTokens, contextWindow, width, colors) {
     if (width <= 0 || contextWindow <= 0)
         return '';
-    const freeTokens = Math.max(0, contextWindow - usedTokens);
-    const values = [...USED_SEGMENTS.map(segment => segments[segment.key]), freeTokens];
-    const columns = allocateBarColumns(values, width);
-    const used = USED_SEGMENTS.map((segment, index) => renderUsedSegment(segment.color, columns[index] ?? 0)).join('');
-    const freeWidth = columns[USED_SEGMENTS.length] ?? 0;
+    const columns = contextBarColumns(segments, usedTokens, contextWindow, width);
+    const used = USED_SEGMENTS.map((segment, index) => renderUsedSegment(usedSegmentColor({ key: segment.key, color: segment.fallback }), columns.used[index] ?? 0)).join('');
+    const unclassified = renderUsedSegment(contextBarUsedColor(), columns.unclassified);
+    const freeWidth = columns.free;
     const pct = (usedTokens / contextWindow) * 100;
     const step = contextPressureStep(pct);
-    // Same two-path convention as the free-segment colors: the JSX bar tints
-    // through the theme key, this string path through the raw ANSI twin.
+    // Same two-path convention as the free-segment colors: callers pass the
+    // override they resolved, the defaults below stay the raw ANSI twin.
     const style = step === undefined
         ? (text) => foreground(colors?.freeText ?? FREE_SEGMENT_TEXT, text)
         : (text) => pressureColor(pct, text);
-    return `${used}${renderFreeSegment(contextBarReadout(usedTokens, contextWindow), freeWidth, colors?.freeFill ?? FREE_SEGMENT_FILL, style)}`;
+    return `${used}${unclassified}${renderFreeSegment(contextBarReadout(usedTokens, contextWindow), freeWidth, colors?.freeFill ?? FREE_SEGMENT_FILL, style)}`;
 }
 // --- Mini context bar (footer ctx-field hover) ---
 /** Pressure-colored text: green below 80%, amber ≥ 80, red ≥ 95.

package/lib/types/screens/TrajectoryScene.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TrajectoryScene.d.ts","sourceRoot":"","sources":["../../../src/screens/TrajectoryScene.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,OAAO,EAML,KAAK,SAAS,EACf,MAAM,oCAAoC,CAAA;AAE3C,OAAO,KAAK,EAAE,SAAS,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAA;AA+B3E,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,SAAS,CAAA;AAEnD,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,KAAK,EACL,OAAO,GACR,EAAE;IACD,OAAO,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB,sDAAsD;IACtD,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,GAAG,KAAK,CAAC,SAAS,CA2hBlB"}
+{"version":3,"file":"TrajectoryScene.d.ts","sourceRoot":"","sources":["../../../src/screens/TrajectoryScene.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAgBzB,OAAO,EAML,KAAK,SAAS,EACf,MAAM,oCAAoC,CAAA;AAI3C,OAAO,KAAK,EAAE,SAAS,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAA;AA+B3E,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,SAAS,CAAA;AAEnD,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,KAAK,EACL,OAAO,GACR,EAAE;IACD,OAAO,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB,sDAAsD;IACtD,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,GAAG,KAAK,CAAC,SAAS,CA6nBlB"}

package/lib/types/screens/TrajectoryScene.js

@@ -9,12 +9,15 @@ import { Ledger } from '../components/trajectory/Ledger.js';
 import { Inspector } from '../components/trajectory/Inspector.js';
 import { HotspotView, hotspotRows } from '../components/trajectory/HotspotView.js';
 import { applyQuery, parseQuery } from '../trajectory/query.js';
+import { ledgerWindow } from '../trajectory/window.js';
 import { MOTION_TICK_MS } from '../trajectory/motion.js';
 import { formatDuration, formatTokens, truncateWidth } from '../trajectory/format.js';
 import { stringWidth } from '../ink/stringWidth.js';
 import { t } from '../i18n.js';
 import { aggregate, burstErrors, columnOfIndex, inspectNode, projectWave, } from '../dsh-adapter/trajectory/index.js';
 import { HOTSPOT_SORTS, WAVE_PROJECTIONS } from '../dsh-adapter/trajectory/index.js';
+import { useTrajectoryScope } from '../components/trajectory/useTrajectoryScope.js';
+import { scopeChipParts } from '../components/trajectory/scope.js';
 /**
  * The trajectory scene — the session's own screen.
  *
@@ -69,8 +72,13 @@ export function TrajectoryScene({ channel, build, onClose, }) {
     const [hoverAxis, setHoverAxis] = React.useState(false);
     /** Hover state for the header ✕ exit button. */
     const [closeHovered, setCloseHovered] = React.useState(false);
-    // ── projection ───────────────────────────────────────────────────────────
-    const nodes = build.nodes;
+    // ── projection + scope ────────────────────────────────────────────────────
+    // Every region below renders from one scoped data plane: the session's
+    // rows by default, or one agent's lane / the delegating turn / the whole
+    // subtree once the user drills in. The header, the wave, the hotspot and
+    // the inspector all follow the scope.
+    const { scope, lanes, scoped, drill, popScope } = useTrajectoryScope(channel, build);
+    const nodes = scoped.build.nodes;
     const query = React.useMemo(() => parseQuery(queryText), [queryText]);
     const { rows: filtered, indexes } = React.useMemo(() => applyQuery(nodes, query), 
     // `nodes` is mutated in place by the incremental fold, so its length is
@@ -79,7 +87,21 @@ export function TrajectoryScene({ channel, build, onClose, }) {
     [nodes, nodes.length, query]);
     const agg = React.useMemo(
     // oxlint-disable-next-line react-hooks/exhaustive-deps
-    () => aggregate(build, sort), [build, nodes.length, sort]);
+    () => aggregate(scoped.build, sort), [scoped.build, nodes.length, sort]);
+    // A scope switch swaps the row list under the cursor: re-arm arrival and
+    // re-anchor at the scoped list's head (declared BEFORE the arrival effect
+    // below, so the first scoped frame does not read the previous list's refs).
+    const scopeKey = scope.kind === 'session' ? 's'
+        : scope.kind === 'parent-turn' ? 'p:' + scope.agentId + ':' + scope.turn
+            : (scope.kind === 'agent' ? 'a:' : 'd:') + scope.agentId;
+    React.useEffect(() => {
+        seenRef.current = 0;
+        errorsRef.current = agg.totals.errors;
+        setCursor(0);
+        setFollow(true);
+        setInspectScroll(0);
+        // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [scopeKey]);
     // ── arrival + alert detection ────────────────────────────────────────────
     const seenRef = React.useRef(0);
     const errorsRef = React.useRef(0);
@@ -101,7 +123,9 @@ export function TrajectoryScene({ channel, build, onClose, }) {
     const ledgerRows = Math.max(1, rows - CHROME_ROWS - inspectorRows - 1);
     const bandWidth = Math.max(1, columns - 4);
     const clampedCursor = filtered.length === 0 ? 0 : Math.min(cursor, filtered.length - 1);
-    const windowStart = Math.max(0, Math.min(clampedCursor - Math.floor(ledgerRows / 2), filtered.length - ledgerRows));
+    // The ledger paints exactly one viewport's worth of rows at any session
+    // length.
+    const windowStart = ledgerWindow(filtered.length, clampedCursor, ledgerRows).start;
     const band = React.useMemo(
     // oxlint-disable-next-line react-hooks/exhaustive-deps
     () => projectWave(nodes, bandWidth, projection), [nodes, nodes.length, bandWidth, projection]);
@@ -114,7 +138,7 @@ export function TrajectoryScene({ channel, build, onClose, }) {
         return set;
     }, [band, indexes, query.empty]);
     const focused = filtered[clampedCursor];
-    const detail = React.useMemo(() => (focused === undefined ? undefined : inspectNode(focused, channel.traceEvents())), [focused, channel]);
+    const detail = React.useMemo(() => (focused === undefined ? undefined : inspectNode(focused, scoped.events)), [focused, scoped.events]);
     // ── navigation helpers ───────────────────────────────────────────────────
     const move = React.useCallback((delta) => {
         setExpanded(false);
@@ -221,6 +245,9 @@ export function TrajectoryScene({ channel, build, onClose, }) {
                 setQueryText('');
                 return;
             }
+            // Esc 先退出下钻范围回到会话，再退出场景；q 任何时候都直接离开。
+            if (key.escape && popScope())
+                return;
             onClose();
             return;
         }
@@ -284,6 +311,13 @@ export function TrajectoryScene({ channel, build, onClose, }) {
             setSwitchTick(tick);
             return;
         }
+        // 会话范围内 `a` 下钻到焦点行所指的 lane（子代理描述行或委托工具
+        // 调用）；已在范围内则循环 当前 Agent → 父回合 → 全部后代 → 会话。
+        // 数据源没有 lane 就没有这个键。
+        if (input === 'a' && !key.ctrl && !key.meta && lanes.length > 0) {
+            drill(filtered[clampedCursor]);
+            return;
+        }
         if (key.return) {
             setExpanded(previous => !previous);
             setInspectScroll(0);
@@ -293,6 +327,17 @@ export function TrajectoryScene({ channel, build, onClose, }) {
             setInspectScroll(previous => Math.max(0, previous + (input === 'j' ? inspectorRows - 2 : -(inspectorRows - 2))));
         }
     });
+    // ── unsupported state ──────────────────────────────────────────────────────
+    // Same rule as the side panel: a session with no trajectory source says
+    // so instead of showing the empty-session chrome that promises a wake
+    // band after the first turn. Every in-tree composition mounts a source
+    // (DSH: raw history, others: the AgentEvent fold), so only fixtures reach
+    // this branch today. Esc/q and ✕ still leave. A channel without the
+    // report (partial fixtures) keeps the old behavior.
+    if (channel.trajectorySource?.() === 'unsupported') {
+        const unsupportedLine = t('trajectory-unsupported');
+        return (_jsxs(Box, { ref: ref, flexDirection: "column", width: "100%", paddingX: 1, children: [_jsxs(Box, { width: "100%", height: 1, flexShrink: 0, children: [_jsx(Box, { flexShrink: 0, flexGrow: 1, overflow: "hidden", children: _jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: "accent", bold: true, children: `\u2726 ${t('traj-title')}` }), _jsx(Text, { color: "subtle", children: `  ${channel.sessionTitle ?? channel.cwd}` })] }) }), _jsx(Box, { flexShrink: 0, width: 2, onClick: () => onClose(), onMouseEnter: () => setCloseHovered(true), onMouseLeave: () => setCloseHovered(false), children: _jsx(Text, { color: closeHovered ? 'text' : 'subtle', children: ' ✕' }) })] }), _jsx(Box, { marginTop: 2, children: _jsx(Text, { color: "subtle", wrap: "truncate", children: truncateWidth(unsupportedLine, bandWidth) }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, italic: true, wrap: "truncate", children: truncateWidth(t('trajectory-unsupported-exit'), bandWidth) }) })] }));
+    }
     // ── header ───────────────────────────────────────────────────────────────
     //
     // Both chrome rows are composed as ONE pre-measured line each rather than as
@@ -303,6 +348,8 @@ export function TrajectoryScene({ channel, build, onClose, }) {
     // whole scene depends on. Padding to an exact column count is deterministic,
     // CJK-aware, and cheap (two strings per frame).
     const { totals } = agg;
+    // The mounted source's label; partial fixtures render without one.
+    const backendLabel = channel.trajectoryBackendLabel?.() ?? '';
     /** Left text, a computed gap, right text — clipped to `width` columns. */
     const spread = (left, right, width) => {
         const rightText = truncateWidth(right, Math.max(0, width - 4));
@@ -317,7 +364,9 @@ export function TrajectoryScene({ channel, build, onClose, }) {
     const totalsText = t('traj-totals', { turns: totals.turns, steps: totals.rows }) +
         (totals.errors > 0 ? ` \u00b7 ${t('traj-errors', { n: totals.errors })}` : '') +
         (totals.retries > 0 ? ` \u00b7 ${t('traj-retries', { n: totals.retries })}` : '') +
-        ` \u00b7 ${formatDuration(totals.spanMs)}`;
+        ` \u00b7 ${formatDuration(totals.spanMs)}` +
+        // Name the source being read next to the numbers.
+        (backendLabel === '' ? '' : ` \u00b7 ${t('trajectory-backend-label', { name: backendLabel })}`);
     // ✕ 退出按钮占 2 格（` ✕`）：预量测行给右端留出预算，按钮钉在末列
     const CLOSE_WIDTH = 2;
     const headerLine = spread(`\u2726 ${t('traj-title')}  ${channel.sessionTitle ?? channel.cwd}`, totalsText, bandWidth - CLOSE_WIDTH);
@@ -327,19 +376,29 @@ export function TrajectoryScene({ channel, build, onClose, }) {
     const axisLabel = view === 'hotspot' ? t(`traj-sort-${sort}`) : t(`traj-proj-${projection}`);
     const tabTimelineText = `${view === 'timeline' ? '\u25cf' : '\u25cb'} ${t('traj-tab-timeline')}  `;
     const tabHotspotText = `${view === 'hotspot' ? '\u25cf' : '\u25cb'} ${t('traj-tab-hotspot')}`;
+    // The scope chip: shown exactly while a non-session
+    // scope is active; clicking cycles it (the a key's mouse equivalent).
+    const scopeChip = scopeChipParts(scope);
+    const scopeChipText = scopeChip === undefined ? '' : '◆ ' + t(scopeChip.key, scopeChip.params) + '  ';
     const queryText_ = queryOpen || !query.empty
         ? `   / ${queryText}${queryOpen ? '\u258c' : ''}  ${t('traj-matches', { n: filtered.length, total: nodes.length })}`
         : '';
-    const tabsLeft = tabTimelineText + tabHotspotText;
-    const tabsLine = spread(tabsLeft + queryText_, axisLabel, bandWidth);
+    const tabsLeft = tabTimelineText + tabHotspotText + scopeChipText + queryText_;
+    const tabsLine = spread(tabsLeft, axisLabel, bandWidth);
     // Segment truncation mirrors spread's left-clip: the query tail yields
     // first, then the far tab label — the line stays exactly one row.
     const leftRoom = stringWidth(tabsLine.left);
     const hotspotShown = truncateWidth(tabHotspotText, Math.max(0, leftRoom - stringWidth(tabTimelineText)));
+    const scopeShown = scopeChipText === ''
+        ? ''
+        : truncateWidth(scopeChipText, Math.max(0, leftRoom - stringWidth(tabTimelineText) - stringWidth(hotspotShown)));
     const queryShown = queryText_ === ''
         ? ''
-        : truncateWidth(queryText_, Math.max(0, leftRoom - stringWidth(tabTimelineText) - stringWidth(hotspotShown)));
-    const tabs = (_jsxs(Box, { width: "100%", height: 1, flexShrink: 0, children: [_jsx(Box, { flexShrink: 0, width: stringWidth(tabTimelineText), onClick: () => switchView('timeline'), onMouseEnter: () => setHoverTab('timeline'), onMouseLeave: () => setHoverTab(previous => (previous === 'timeline' ? null : previous)), children: _jsx(Text, { color: view === 'timeline' ? 'permission' : hoverTab === 'timeline' ? 'text' : 'subtle', bold: view === 'timeline', children: tabTimelineText }) }), _jsx(Box, { flexShrink: 0, width: stringWidth(hotspotShown), onClick: () => switchView('hotspot'), onMouseEnter: () => setHoverTab('hotspot'), onMouseLeave: () => setHoverTab(previous => (previous === 'hotspot' ? null : previous)), children: _jsx(Text, { color: view === 'hotspot' ? 'permission' : hoverTab === 'hotspot' ? 'text' : 'subtle', bold: view === 'hotspot', children: hotspotShown }) }), queryShown !== '' && (_jsx(Box, { flexShrink: 0, width: stringWidth(queryShown), onClick: () => setQueryOpen(true), children: _jsx(Text, { color: "suggestion", children: queryShown }) })), _jsx(Box, { flexGrow: 1, flexShrink: 1, onClick: () => { if (!queryOpen)
+        : truncateWidth(queryText_, Math.max(0, leftRoom - stringWidth(tabTimelineText) - stringWidth(hotspotShown) - stringWidth(scopeShown)));
+    const tabs = (_jsxs(Box, { width: "100%", height: 1, flexShrink: 0, children: [_jsx(Box, { flexShrink: 0, width: stringWidth(tabTimelineText), onClick: () => switchView('timeline'), onMouseEnter: () => setHoverTab('timeline'), onMouseLeave: () => setHoverTab(previous => (previous === 'timeline' ? null : previous)), children: _jsx(Text, { color: view === 'timeline' ? 'permission' : hoverTab === 'timeline' ? 'text' : 'subtle', bold: view === 'timeline', children: tabTimelineText }) }), _jsx(Box, { flexShrink: 0, width: stringWidth(hotspotShown), onClick: () => switchView('hotspot'), onMouseEnter: () => setHoverTab('hotspot'), onMouseLeave: () => setHoverTab(previous => (previous === 'hotspot' ? null : previous)), children: _jsx(Text, { color: view === 'hotspot' ? 'permission' : hoverTab === 'hotspot' ? 'text' : 'subtle', bold: view === 'hotspot', children: hotspotShown }) }), scopeShown !== '' && (_jsx(Box, { flexShrink: 0, width: stringWidth(scopeShown), 
+                // 点击 scope chip = a 键的鼠标等价（循环 当前 Agent → 父回合 →
+                // 全部后代 → 会话）。
+                onClick: () => { drill(undefined); }, children: _jsx(Text, { color: "accent", bold: true, children: scopeShown }) })), queryShown !== '' && (_jsx(Box, { flexShrink: 0, width: stringWidth(queryShown), onClick: () => setQueryOpen(true), children: _jsx(Text, { color: "suggestion", children: queryShown }) })), _jsx(Box, { flexGrow: 1, flexShrink: 1, onClick: () => { if (!queryOpen)
                     setQueryOpen(true); }, children: _jsx(Text, { children: tabsLine.gap }) }), _jsx(Box, { flexShrink: 0, 
                 // +1 slack: ink breaks a wrap line exactly AT the box width, so a
                 // wide-char-ending label (按耗时) at an exact fit loses its last
@@ -354,13 +413,16 @@ export function TrajectoryScene({ channel, build, onClose, }) {
                     }
                     setSwitchTick(tick);
                 }, onMouseEnter: () => setHoverAxis(true), onMouseLeave: () => setHoverAxis(false), children: _jsx(Text, { color: hoverAxis ? 'text' : 'subtle', children: tabsLine.right }) })] }));
-    const hints = view === 'hotspot'
+    const hints = (view === 'hotspot'
         ? t('traj-hint-hotspot')
         : queryOpen
             ? t('traj-hint-query')
             : expanded
                 ? t('traj-hint-expanded')
-                : t('traj-hint-timeline');
+                : t('traj-hint-timeline'))
+        // Drilldown affordance: teach the a key exactly while lanes exist, and
+        // how to leave a scope once inside one (the chip names the scope).
+        + (lanes.length === 0 ? '' : scope.kind === 'session' ? `  ·  ${t('trajectory-drill-hint')}` : `  ·  ${t('trajectory-scope-hint')}`);
     return (_jsxs(Box, { ref: ref, flexDirection: "column", width: "100%", paddingX: 1, children: [header, tabs, _jsx(WaveBand, { band: band, width: bandWidth, cursorColumn: columnOfIndex(band, indexes[clampedCursor] ?? 0), viewportStart: columnOfIndex(band, indexes[windowStart] ?? 0), viewportEnd: columnOfIndex(band, indexes[Math.min(filtered.length - 1, windowStart + ledgerRows - 1)] ?? 0), matches: matchColumns, tick: tick, alertTick: alertTick, onColumnClick: column => {
                     // 点击波形列（或标尺行）= 跳到该列最近事件；空列继承前驱的
                     // firstIndex，空档区点击落在空档开始处。查询过滤掉的行不跳。

package/lib/types/screens/chat/backendCommands.d.ts

@@ -0,0 +1,37 @@
+import type { BackendChannelsHost, BackendModesHost } from '../../adapter/ports/channel-ui.js';
+import type { BackendModeOption } from '../../adapter/ports/channel-view.js';
+import type { ChatOverlay } from '../chatOverlay.js';
+export declare function channelMapLines(snapshot: ReturnType<BackendChannelsHost['snapshot']>): string[];
+export declare function parseMcpCommand(rawInput: string): {
+    kind: 'status';
+} | {
+    kind: 'usage';
+} | {
+    kind: 'reconnect';
+    name: string;
+} | {
+    kind: 'toggle';
+    name: string;
+    enabled: boolean;
+};
+export declare function backendPermissionCommand(snapshot: ReturnType<BackendModesHost['snapshot']> | undefined, rawInput: string, fallbackName: string): {
+    kind: 'status';
+    lines: readonly string[];
+} | {
+    kind: 'picker';
+    overlay: Extract<ChatOverlay, {
+        kind: 'mode';
+    }>;
+} | {
+    kind: 'set';
+    mode: BackendModeOption;
+} | {
+    kind: 'unknown';
+    id: string;
+} | undefined;
+export declare function backendModeStatus(snapshot: ReturnType<BackendModesHost['snapshot']> | undefined, onOpen: () => void): {
+    id: string;
+    name: string;
+    onOpen: () => void;
+} | undefined;
+//# sourceMappingURL=backendCommands.d.ts.map

package/lib/types/screens/chat/backendCommands.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"backendCommands.d.ts","sourceRoot":"","sources":["../../../../src/screens/chat/backendCommands.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAA;AAC9F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAA;AAE5E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,wBAAgB,eAAe,CAAC,QAAQ,EAAE,UAAU,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAC,GAAG,MAAM,EAAE,CAU/F;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAC5C;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAClB;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GACjB;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GACnC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CASrD;AAED,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,UAAU,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAC3I;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;CAAE,GAC5C;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC,WAAW,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAAE,GACnE;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,iBAAiB,CAAA;CAAE,GACxC;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC/B,SAAS,CAgBZ;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,UAAU,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,GAAG,SAAS,EAAE,MAAM,EAAE,MAAM,IAAI;;;kBAAJ,IAAI;cAGnH"}

package/lib/types/screens/chat/backendCommands.js

@@ -0,0 +1,51 @@
+import { t } from '../../i18n.js';
+export function channelMapLines(snapshot) {
+    const active = snapshot.channels.find(option => option.id === snapshot.activeId);
+    if (active === undefined)
+        return [t('channel-map-none')];
+    const lines = [t('channel-map-heading', { name: active.name })];
+    lines.push(active.models.length > 0 ? t('channel-map-models-heading') : t('channel-map-models-none'));
+    for (const entry of active.models)
+        lines.push(t('channel-map-row', { from: entry.from, to: entry.to }));
+    lines.push(active.tiers.length > 0 ? t('channel-map-tiers-heading') : t('channel-map-tiers-none'));
+    for (const rule of active.tiers)
+        lines.push(t('channel-map-row', { from: rule.tier, to: rule.to }));
+    lines.push(t('channel-map-file-hint'));
+    return lines;
+}
+export function parseMcpCommand(rawInput) {
+    const sub = /^(reconnect|toggle)(?:\s+([\s\S]*))?$/u.exec(rawInput.trim());
+    if (sub === null)
+        return { kind: 'status' };
+    const rest = (sub[2] ?? '').trim();
+    if (sub[1] === 'reconnect')
+        return rest === '' ? { kind: 'usage' } : { kind: 'reconnect', name: rest };
+    const toggle = /^([\s\S]+?)\s+(on|off)$/u.exec(rest);
+    return toggle === null
+        ? { kind: 'usage' }
+        : { kind: 'toggle', name: toggle[1].trim(), enabled: toggle[2] === 'on' };
+}
+export function backendPermissionCommand(snapshot, rawInput, fallbackName) {
+    if (snapshot === undefined || snapshot.modes.length === 0)
+        return undefined;
+    const parts = rawInput.trim().split(/\s+/).filter(Boolean);
+    const current = snapshot.modes[snapshot.currentIndex];
+    if (parts[0] === 'status')
+        return { kind: 'status', lines: [
+                t('permission-mode-current', { name: current?.name ?? fallbackName }),
+                t('permission-mode-switch-hint'),
+            ] };
+    if (parts.length === 0)
+        return { kind: 'picker', overlay: {
+                kind: 'mode',
+                index: Math.max(0, snapshot.currentIndex),
+                modes: snapshot.modes,
+                currentId: current?.id,
+            } };
+    const target = snapshot.modes.find(mode => mode.id === parts[0]);
+    return target === undefined ? { kind: 'unknown', id: parts[0] } : { kind: 'set', mode: target };
+}
+export function backendModeStatus(snapshot, onOpen) {
+    const current = snapshot?.modes[snapshot.currentIndex];
+    return current === undefined ? undefined : { id: current.id, name: current.name, onOpen };
+}

package/lib/types/screens/chat/useBackendChannels.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { BackendChannelsHost, ChannelUi } from '../../adapter/ports/channel-ui.js';
+import type { QuestionStore } from '../../channel/questions.js';
+import type { ChannelPickerRow } from '../../components/ChannelPicker.js';
+import type { ChatOverlayAction } from '../chatOverlay.js';
+export declare function useBackendChannels({ channel, host, questionStore, dispatchOverlay, onRestartFreshSession, runOAuthLogin }: {
+    channel: ChannelUi;
+    host: BackendChannelsHost | undefined;
+    questionStore: QuestionStore;
+    dispatchOverlay: React.Dispatch<ChatOverlayAction>;
+    onRestartFreshSession: ((notice: string) => void) | undefined;
+    runOAuthLogin: typeof import('../../dsh-adapter/providerWizard.js').runOAuthLogin;
+}): {
+    rows: readonly ChannelPickerRow[];
+    open: () => void;
+    pick: (index: number) => void;
+    setMode: (id: string, name: string) => Promise<boolean>;
+    login: () => boolean;
+};
+//# sourceMappingURL=useBackendChannels.d.ts.map

package/lib/types/screens/chat/useBackendChannels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBackendChannels.d.ts","sourceRoot":"","sources":["../../../../src/screens/chat/useBackendChannels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAA;AAEvF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAA;AAGzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAG1D,wBAAgB,kBAAkB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,eAAe,EAAE,qBAAqB,EAAE,aAAa,EAAE,EAAE;IAC1H,OAAO,EAAE,SAAS,CAAA;IAClB,IAAI,EAAE,mBAAmB,GAAG,SAAS,CAAA;IACrC,aAAa,EAAE,aAAa,CAAA;IAC5B,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAA;IAClD,qBAAqB,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAC7D,aAAa,EAAE,cAAc,qCAAqC,EAAE,aAAa,CAAA;CAClF;;gBAUkB,IAAI;kBAcA,MAAM,KAAG,IAAI;kBAiDb,MAAM,QAAQ,MAAM,KAAG,OAAO,CAAC,OAAO,CAAC;iBAU1C,OAAO;EAW1B"}