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

package/lib/types/client/RoomDecisionsView.js

@@ -0,0 +1,52 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * 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 { useState } from 'react';
+import { fmt } from "./aggregate.js";
+import css from './TokenView.module.css';
+import raw from './RawView.module.css';
+import own from './RoomDecisionsView.module.css';
+/** The scenario's display name. */
+function scenarioName(scenario, t) {
+    return scenario === 'task-filing' ? t('room.scenario.filing') : scenario === 'report-timing' ? t('room.scenario.timing') : scenario;
+}
+/** A JSON value as compact display text. */
+function show(value) {
+    return typeof value === 'string' ? value : JSON.stringify(value, null, 2);
+}
+/** The candidates and their probabilities, from the recorded response. */
+function candidates(row, t) {
+    const answers = Array.isArray(row.response) ? row.response : [];
+    const answer = answers[0];
+    if (answer === undefined)
+        return [];
+    if (answer.probabilities !== undefined)
+        return Object.entries(answer.probabilities);
+    // A yes / no question reports the yes probability as its answer.
+    return typeof answer.answer === 'number' ? [[t('room.yes'), answer.answer], [t('room.no'), 1 - answer.answer]] : [];
+}
+/** The outcome sentence. */
+function verdict(row, t) {
+    if (row.failure !== undefined)
+        return t('room.verdict.failed', { reason: row.failure.reason });
+    if (row.scenario === 'task-filing') {
+        return row.about.task === undefined ? t('room.verdict.new') : t('room.verdict.task', { number: String(row.about.task.number), title: row.about.task.title });
+    }
+    return t(row.outcome === 'later' ? 'room.verdict.later' : 'room.verdict.now', { from: row.about.from ?? '', to: row.about.to ?? '' });
+}
+/** The 房间 tab body. */
+export function RoomDecisionsView({ decisions, selectedId, onSelect, t }) {
+    const [json, setJson] = useState(false);
+    const index = Math.max(0, decisions.findIndex(row => row.id === selectedId));
+    const row = decisions[index];
+    return _jsxs("div", { className: css.md, children: [_jsx("nav", { className: css.reqList, "aria-label": t('room.tab'), children: decisions.map((entry, i) => (_jsxs("button", { type: "button", className: entry === row ? css.reqItemSel : css.reqItem, "aria-pressed": entry === row, onClick: () => onSelect(entry.id), children: [_jsxs("span", { className: css.reqName, children: ["#", i + 1, " \u00B7 ", scenarioName(entry.scenario, t)] }), _jsx("span", { className: entry.failure === undefined ? own.prob : own.failed, children: entry.failure !== undefined ? t('room.failed') : entry.probability === undefined ? '—' : entry.probability.toFixed(2) }), _jsx("span", { className: css.reqIo, children: entry.inputTokens === undefined ? '—' : `${fmt(entry.inputTokens)} → ${fmt(entry.outputTokens ?? 0)}` }), _jsx("span", { className: css.reqTime, children: entry.latencyMs === undefined ? '—' : `${(entry.latencyMs / 1000).toFixed(1)}s` })] }, entry.id))) }), row !== undefined && _jsxs("div", { className: css.reqDetail, children: [_jsxs("div", { className: css.detailHead, children: [_jsxs("b", { children: ["#", index + 1, " \u00B7 ", scenarioName(row.scenario, t)] }), _jsx("button", { type: "button", className: css.jsonToggle, "aria-label": t('view.raw'), title: t('view.raw'), "aria-pressed": json, onClick: () => setJson(value => !value), children: '{ }' })] }), _jsxs("div", { className: css.metrics, children: [_jsxs("div", { children: [_jsx("span", { children: t('room.model') }), _jsx("b", { className: own.small, children: row.model }), _jsx("span", { children: "typesafe" })] }), _jsxs("div", { children: [_jsx("span", { children: t('req.input') }), _jsxs("b", { children: [row.inputTokens === undefined ? '—' : fmt(row.inputTokens), _jsx("small", { children: "tok" })] }), _jsxs("span", { children: [t('req.output'), " ", row.outputTokens === undefined ? '—' : fmt(row.outputTokens), " tok"] })] }), _jsxs("div", { children: [_jsx("span", { children: t('lens.duration') }), _jsx("b", { children: row.latencyMs === undefined ? '—' : `${(row.latencyMs / 1000).toFixed(1)}s` }), _jsx("span", {})] }), _jsxs("div", { children: [_jsx("span", { children: t('room.cache') }), _jsx("b", { className: own.small, children: row.cached === undefined ? '—' : row.cached ? t('room.cacheHit') : t('room.cacheMiss') }), _jsx("span", {})] })] }), json ? _jsxs(_Fragment, { children: [_jsxs("section", { children: [_jsx("h3", { className: css.sectionTitle, children: t('room.request') }), _jsx("pre", { className: raw.pre, children: JSON.stringify({ model: row.model, ...row.request }, null, 2) })] }), _jsxs("section", { children: [_jsx("h3", { className: css.sectionTitle, children: t('room.response') }), _jsx("pre", { className: raw.pre, children: JSON.stringify(row.failure === undefined ? row.response ?? null : { failure: row.failure }, null, 2) })] })] }) : _jsxs(_Fragment, { children: [_jsxs("section", { children: [_jsxs("h3", { className: css.sectionTitle, children: [t('room.state'), _jsx("span", { children: t('room.stateNote') })] }), _jsx("dl", { className: own.kv, children: Object.entries((row.request.state ?? {})).map(([key, value]) => _jsxs("div", { children: [_jsx("dt", { children: key }), _jsx("dd", { children: show(value) })] }, key)) })] }), _jsxs("section", { children: [_jsxs("h3", { className: css.sectionTitle, children: [t('room.question'), _jsx("span", { children: t('room.questionNote') })] }), _jsx("p", { className: own.box, children: show((Array.isArray(row.request.questions) ? row.request.questions[0]?.instructions : undefined) ?? '') })] }), candidates(row, t).length > 0 && _jsxs("section", { children: [_jsx("h3", { className: css.sectionTitle, children: t('room.candidates') }), _jsx("div", { className: own.opts, children: candidates(row, t).map(([label, p]) => (_jsxs("div", { className: own.opt, children: [_jsx("span", { children: label }), _jsx("span", { className: own.bar, children: _jsx("i", { style: { width: `${Math.round(p * 100)}%` } }) }), _jsx("span", { className: own.pc, children: p.toFixed(2) })] }, label))) })] }), _jsxs("p", { className: row.failure === undefined ? own.verdict : own.verdictFailed, children: [_jsx("b", { children: t('room.verdict') }), verdict(row, t)] })] })] })] });
+}

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

@@ -0,0 +1,13 @@
+/** Read-only JSON Schema presentation. Raw capture remains the lossless fallback. */
+import type { InspectorTabProps } from './contract.ts';
+type T = InspectorTabProps['t'];
+export declare function schemaRecord(value: unknown): value is Record<string, unknown>;
+export declare function SchemaFields({ name, value, required, depth, t }: {
+    readonly name?: string;
+    readonly value: unknown;
+    readonly required?: boolean;
+    readonly depth?: number;
+    readonly t: T;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SchemaFields.d.ts.map

package/lib/types/client/SchemaFields.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import css from './SegmentBlocks.module.css';
+export function schemaRecord(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+const MAX_DEPTH = 12;
+const labels = {
+    oneOf: 'schema.oneOf', anyOf: 'schema.anyOf', allOf: 'schema.allOf',
+    items: 'schema.items', prefixItems: 'schema.prefixItems', additionalItems: 'schema.additionalItems',
+    additionalProperties: 'schema.additionalProperties', unevaluatedProperties: 'schema.unevaluatedProperties', unevaluatedItems: 'schema.unevaluatedItems',
+    contains: 'schema.contains', not: 'schema.not', if: 'schema.if', then: 'schema.then', else: 'schema.else', propertyNames: 'schema.propertyNames',
+    patternProperties: 'schema.patternProperties', dependentSchemas: 'schema.dependentSchemas', $defs: 'schema.definitions', definitions: 'schema.definitions',
+    enum: 'schema.enum', const: 'schema.const', default: 'schema.default', examples: 'schema.examples',
+    minimum: 'schema.minimum', maximum: 'schema.maximum', exclusiveMinimum: 'schema.exclusiveMinimum', exclusiveMaximum: 'schema.exclusiveMaximum', multipleOf: 'schema.multipleOf',
+    minLength: 'schema.minLength', maxLength: 'schema.maxLength', pattern: 'schema.pattern', format: 'schema.format',
+    minItems: 'schema.minItems', maxItems: 'schema.maxItems', uniqueItems: 'schema.uniqueItems', minContains: 'schema.minContains', maxContains: 'schema.maxContains',
+    minProperties: 'schema.minProperties', maxProperties: 'schema.maxProperties', dependentRequired: 'schema.dependentRequired',
+    $ref: 'schema.ref', title: 'schema.title', deprecated: 'schema.deprecated', readOnly: 'schema.readOnly', writeOnly: 'schema.writeOnly',
+};
+const label = (key, t) => Object.hasOwn(labels, key) ? t(labels[key]) : key;
+const alternatives = new Set(['oneOf', 'anyOf', 'allOf', 'prefixItems']);
+const maps = new Set(['patternProperties', '$defs', 'definitions', 'dependentSchemas']);
+const singleSchemas = new Set(['items', 'additionalItems', 'additionalProperties', 'unevaluatedProperties', 'unevaluatedItems', 'contains', 'not', 'if', 'then', 'else', 'propertyNames']);
+function explicitTypes(value, depth = 0) {
+    if (!schemaRecord(value) || depth >= MAX_DEPTH)
+        return null;
+    if (typeof value.type === 'string')
+        return [value.type];
+    if (Array.isArray(value.type) && value.type.length > 0 && value.type.every(x => typeof x === 'string'))
+        return value.type;
+    const union = value.oneOf ?? value.anyOf;
+    if (!Array.isArray(union) || union.length === 0)
+        return null;
+    const types = union.map(x => explicitTypes(x, depth + 1));
+    return types.every(x => x !== null) ? [...new Set(types.flat())] : null;
+}
+function typeLabel(value, t) {
+    if (value === false)
+        return t('schema.never');
+    if (value === true)
+        return t('schema.any');
+    const types = explicitTypes(value);
+    if (types)
+        return types.join(' | ');
+    if (schemaRecord(value) && '$ref' in value)
+        return t('schema.reference');
+    if (schemaRecord(value) && ['allOf', 'oneOf', 'anyOf'].some(k => k in value))
+        return t('schema.composite');
+    return t('schema.unspecified');
+}
+/** Unknown keywords and extension values retain their full shape without dumping JSON blocks. */
+function ValueTree({ value, depth, t }) {
+    if (depth >= MAX_DEPTH)
+        return _jsx("span", { children: t('schema.deep') });
+    if (Array.isArray(value))
+        return value.length ? _jsx("div", { className: css.schemaValues, children: value.map((v, i) => _jsx("div", { children: _jsx(ValueTree, { value: v, depth: depth + 1, t: t }) }, i)) }) : _jsx("code", { children: "[]" });
+    if (schemaRecord(value))
+        return Object.keys(value).length ? _jsx("dl", { className: css.schemaFacts, children: Object.entries(value).map(([key, v]) => _jsxs("div", { children: [_jsx("dt", { children: key }), _jsx("dd", { children: _jsx(ValueTree, { value: v, depth: depth + 1, t: t }) })] }, key)) }) : _jsx("span", { children: t('schema.emptyObject') });
+    return _jsx("code", { children: JSON.stringify(value) });
+}
+function Constraint({ name, value, depth, t }) {
+    if (alternatives.has(name) && Array.isArray(value))
+        return _jsxs("div", { className: css.schemaGroup, children: [_jsx("div", { className: css.schemaCaption, children: label(name, t) }), _jsx("div", { className: css.schemaChildren, children: value.map((v, i) => _jsx(SchemaFields, { name: t(name === 'prefixItems' ? 'schema.position' : 'schema.branch', { count: String(i + 1) }), value: v, depth: depth + 1, t: t }, i)) })] });
+    if (maps.has(name) && schemaRecord(value))
+        return _jsxs("div", { className: css.schemaGroup, children: [_jsx("div", { className: css.schemaCaption, children: label(name, t) }), _jsx("div", { className: css.schemaChildren, children: Object.entries(value).map(([key, v]) => _jsx(SchemaFields, { name: key, value: v, depth: depth + 1, t: t }, key)) })] });
+    if (['additionalProperties', 'additionalItems', 'unevaluatedProperties', 'unevaluatedItems'].includes(name) && typeof value === 'boolean')
+        return _jsx("dl", { className: css.schemaFacts, children: _jsxs("div", { children: [_jsx("dt", { children: label(name, t) }), _jsx("dd", { children: t(value ? 'schema.allowed' : 'schema.forbidden') })] }) });
+    if (singleSchemas.has(name) && (schemaRecord(value) || typeof value === 'boolean'))
+        return _jsx("div", { className: css.schemaChildren, children: _jsx(SchemaFields, { name: label(name, t), value: value, depth: depth + 1, t: t }) });
+    // Older drafts use items arrays for tuples; retain their position, not a union.
+    if (name === 'items' && Array.isArray(value))
+        return _jsx(Constraint, { name: "prefixItems", value: value, depth: depth, t: t });
+    return _jsx("dl", { className: css.schemaFacts, children: _jsxs("div", { children: [_jsx("dt", { children: label(name, t) }), _jsx("dd", { children: _jsx(ValueTree, { value: value, depth: depth + 1, t: t }) })] }) });
+}
+export function SchemaFields({ name, value, required = false, depth = 0, t }) {
+    if (depth >= MAX_DEPTH)
+        return _jsxs("div", { className: css.schemaCaption, children: [name, " \u00B7 ", t('schema.deep')] });
+    if (!schemaRecord(value) && typeof value !== 'boolean')
+        return _jsxs("div", { className: css.schemaCaption, children: [name, " \u00B7 ", t('schema.unreadable')] });
+    const fields = schemaRecord(value) ? value : {};
+    const properties = schemaRecord(fields.properties) ? fields.properties : null;
+    const requiredNames = Array.isArray(fields.required) && fields.required.every(x => typeof x === 'string') ? fields.required : null;
+    const remainingRequired = requiredNames?.filter(key => !properties || !Object.hasOwn(properties, key)) ?? [];
+    return _jsxs("div", { className: name ? css.parameter : css.schemaRoot, children: [name ? _jsxs("div", { className: css.parameterHead, children: [_jsx("code", { children: name }), _jsx("span", { children: typeLabel(value, t) }), required && _jsx("b", { children: t('lens.required') })] })
+                : (!properties || fields.type !== undefined && fields.type !== 'object') && _jsx("div", { className: css.schemaCaption, children: typeLabel(value, t) }), typeof fields.description === 'string' && _jsx("div", { className: css.prose, children: fields.description }), remainingRequired.length > 0 && _jsx(Constraint, { name: t('schema.otherRequired'), value: remainingRequired, depth: depth, t: t }), Object.entries(fields).filter(([key, v]) => {
+                if (key === 'type')
+                    return !(typeof v === 'string' || Array.isArray(v) && v.length > 0 && v.every(x => typeof x === 'string'));
+                if (key === 'properties')
+                    return !properties;
+                if (key === 'required')
+                    return !requiredNames;
+                if (key === 'description')
+                    return typeof v !== 'string';
+                return true;
+            }).map(([key, v]) => _jsx(Constraint, { name: key, value: v, depth: depth, t: t }, key)), properties && _jsx("div", { className: name ? css.schemaChildren : css.parameters, children: Object.entries(properties).map(([key, v]) => _jsx(SchemaFields, { name: key, value: v, required: requiredNames?.includes(key) ?? false, depth: depth + 1, t: t }, key)) })] });
+}

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

@@ -0,0 +1,32 @@
+/**
+ * The segmented switch of the reference design (`segCtl`): the header's
+ * Token/耗时 mini switch and the footer's 结构化/原始 JSON/wire body view
+ * switch. A disabled option renders dim with its hint as the tooltip (the
+ * wire-body enhancement seat).
+ *
+ * @module @khorsheed/dsh-context-lens/client
+ */
+import type { ReactNode } from 'react';
+/** One segment of the switch. */
+export interface SegCtlOption<Id extends string = string> {
+    readonly id: Id;
+    readonly label: ReactNode;
+    /** Disabled options render dim and never fire (the wire-body seat). */
+    readonly disabled?: boolean | undefined;
+    /** Tooltip on a disabled option. */
+    readonly hint?: string | undefined;
+    /** A small trailing tag (the `≥0.1.2` marker). */
+    readonly tag?: string | undefined;
+}
+export interface SegCtlProps<Id extends string = string> {
+    readonly options: readonly SegCtlOption<Id>[];
+    readonly value: Id;
+    readonly onChange: (id: Id) => void;
+    /** The group's accessible name. */
+    readonly label: string;
+    /** The header's compact variant. */
+    readonly mini?: boolean | undefined;
+}
+/** The pill segmented control. */
+export declare function SegCtl<Id extends string>({ options, value, onChange, label, mini }: SegCtlProps<Id>): import("react").JSX.Element;
+//# sourceMappingURL=SegCtl.d.ts.map

package/lib/types/client/SegCtl.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import css from './SegCtl.module.css';
+/** The pill segmented control. */
+export function SegCtl({ options, value, onChange, label, mini = false }) {
+    return (_jsx("div", { className: mini ? css.mini : css.root, role: "group", "aria-label": label, children: options.map(option => {
+            const selected = option.id === value;
+            if (option.disabled === true) {
+                return (_jsxs("button", { type: "button", className: css.dim, disabled: true, title: option.hint, children: [option.label, option.tag !== undefined && _jsx("span", { className: css.tag, children: option.tag })] }, option.id));
+            }
+            return (_jsxs("button", { type: "button", className: selected ? css.on : css.off, "aria-pressed": selected, onClick: () => { onChange(option.id); }, children: [option.label, option.tag !== undefined && _jsx("span", { className: css.tag, children: option.tag })] }, option.id));
+        }) }));
+}

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

@@ -0,0 +1,28 @@
+import type { CapturedRequest, RequestLink, SegmentCategory } from '../types.ts';
+import { type CompositionFilter } from './aggregate.ts';
+import type { InspectorTabProps } from './contract.ts';
+type T = InspectorTabProps['t'];
+export declare function categoryLabelKey(category: SegmentCategory): `cat.${SegmentCategory}`;
+export interface SegmentBlocksProps {
+    readonly request: CapturedRequest;
+    readonly filterCat: CompositionFilter;
+    readonly onOpenRequest?: ((link: RequestLink) => void) | undefined;
+    readonly onClearFilter?: () => void;
+    readonly previousResponseNumber: number | null;
+    readonly t: T;
+}
+/** Filtering changes rows only: group counts, bars and sizes keep their full-request meaning. */
+export declare function SegmentBlocks({ request, filterCat, onClearFilter, onOpenRequest, t }: SegmentBlocksProps): import("react").JSX.Element;
+/** The output body is visible, including reasoning and arguments, without opening a wrapper. */
+export declare function OutputBlock({ request, t }: {
+    readonly request: CapturedRequest;
+    readonly t: T;
+}): import("react").JSX.Element;
+export declare function Exchange({ request, previousResponseNumber, onOpenRequest, t }: {
+    readonly request: CapturedRequest;
+    readonly previousResponseNumber: number | null;
+    readonly onOpenRequest?: ((link: RequestLink) => void) | undefined;
+    readonly t: T;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SegmentBlocks.d.ts.map

package/lib/types/client/SegmentBlocks.js

@@ -0,0 +1,225 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Compact composition rows and immediately readable exchange cards. */
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { duplicateStats, fmt, fmtK, fmtSpan } from "./aggregate.js";
+import css from './SegmentBlocks.module.css';
+import { IconChevronDownOutlineMedium } from "./icons.js";
+import { ToolCatalog } from "./ToolCatalog.js";
+export function categoryLabelKey(category) { return `cat.${category}`; }
+function parseAssistant(full) {
+    try {
+        const value = JSON.parse(full);
+        if (value && typeof value === 'object' && !Array.isArray(value))
+            return value;
+    }
+    catch { /* Plain assistant text is also valid. */ }
+    return null;
+}
+function BodyText({ text }) {
+    let code = false;
+    try {
+        const value = JSON.parse(text);
+        code = value !== null && typeof value === 'object';
+    }
+    catch { /* Prose stays verbatim. */ }
+    return _jsx("pre", { className: code ? css.pre : css.prose, children: text });
+}
+function ItemFull({ item }) {
+    const a = item.category === 'assistant' ? parseAssistant(item.full) : null;
+    if (!a || (!a.reasoning && !a.text && !a.calls?.length))
+        return _jsx(BodyText, { text: item.full });
+    return _jsxs(_Fragment, { children: [a.reasoning && _jsxs(_Fragment, { children: [_jsx("div", { className: css.fullLabel, children: "reasoning" }), _jsx(BodyText, { text: a.reasoning })] }), a.text && _jsxs(_Fragment, { children: [_jsx("div", { className: css.fullLabel, children: "text" }), _jsx(BodyText, { text: a.text })] }), a.calls?.map((c, i) => _jsxs("div", { children: [_jsxs("div", { className: css.fullLabel, children: ["tool_call \u00B7 ", c.name] }), _jsx("pre", { className: css.pre, children: c.arguments })] }, i))] });
+}
+/** Compression is provenance, not another copy of the active context. */
+function RewriteMeta({ item, onOpenRequest, t }) {
+    if (!item.compactionId && !item.pruning)
+        return null;
+    return _jsxs("div", { className: css.rewriteMeta, children: [item.compactionId && _jsxs(_Fragment, { children: [_jsx("span", { children: t('compaction.checkpoint') }), item.compactionRequest && onOpenRequest
+                        ? _jsxs("button", { type: "button", onClick: () => onOpenRequest(item.compactionRequest), children: [t('compaction.inspect'), " \u2197"] })
+                        : _jsx("span", { children: t('compaction.unavailable') })] }), item.pruning && _jsxs(_Fragment, { children: [_jsx("span", { children: t('pruning.changed', { before: fmt(item.pruning.beforeChars), after: fmt(item.pruning.afterChars) }) }), item.pruning.before && onOpenRequest && _jsxs("button", { type: "button", onClick: () => onOpenRequest(item.pruning.before), children: [t('pruning.before'), " \u2197"] })] })] });
+}
+const itemNumber = (item) => item.index < 0 ? '—' : String(item.index).padStart(3, '0');
+/** The list stays dense; navigation is shared across system/history/added layers. */
+function MessageRows({ items, groups, highlight, reading, onOpenRequest, t }) {
+    return _jsx(_Fragment, { children: items.map((item, i) => {
+            const open = reading.expanded.has(item);
+            const group = groups.get(item.full) ?? [];
+            const peers = group.filter(other => other !== item);
+            const next = items[i + 1];
+            return _jsxs("details", { ref: el => reading.register(item, el), className: css.item, open: open, "data-highlight": highlight, "data-jump": reading.flash === item, children: [_jsxs("summary", { className: css.row, title: item.preview, onClick: e => { e.preventDefault(); reading.toggle(item); }, children: [_jsx("span", { className: css.idx, children: itemNumber(item) }), _jsx("i", { className: css.dot, "data-cat": item.category }), _jsx("span", { className: css.type, children: t(categoryLabelKey(item.category)) }), _jsx("span", { className: css.preview, children: item.preview }), _jsxs("span", { className: css.rowBadges, children: [item.pruning && _jsx("span", { className: css.badge, children: t('pruning.badge') }), group.length > 1 && _jsxs("span", { className: css.badge, children: ["\u00D7", group.length] }), item.isError && _jsx("span", { className: css.errorNote, children: t('lens.errors') })] }), _jsx("span", { className: css.number, children: fmt(item.chars) }), _jsx(IconChevronDownOutlineMedium, { size: 16, className: css.chevron }), open && _jsxs("span", { className: css.readActions, children: [_jsx("span", { children: t('lens.collapse') }), _jsxs("button", { type: "button", disabled: !next, onClick: e => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            if (next)
+                                                reading.next(item, next);
+                                        }, children: [t('lens.nextItem'), " \u2193"] })] })] }), open && _jsxs("div", { className: css.full, children: [item.isError && _jsx("div", { className: css.errorNote, children: t('lens.errors') }), _jsxs("div", { className: `${css.fullLabel} ${css.messageMeta}`, children: [_jsxs("span", { children: [item.source, item.sourceTurn === undefined ? '' : ` · ${t('lens.sourceTurn', { turn: String(item.sourceTurn) })}`, item.durationMs === undefined ? '' : ` · ${fmtSpan(item.durationMs)}`] }), peers.length > 0 && _jsxs("span", { className: css.duplicateLinks, children: [_jsx("span", { children: t('lens.sameWith') }), peers.map(other => _jsxs("button", { type: "button", onClick: () => reading.jump(item, other), children: [itemNumber(other), " \u00B7 ", t(categoryLabelKey(other.category)), " \u2197"] }, other.index)), _jsx("span", { children: t('lens.sameFullText') })] }), reading.destination === item && reading.returnTo && _jsxs("button", { type: "button", className: css.returnLink, onClick: () => reading.back(item), children: [t('lens.returnItem', { index: itemNumber(reading.returnTo) }), " \u21A9"] })] }), _jsx(RewriteMeta, { item: item, onOpenRequest: onOpenRequest, t: t }), _jsx(ItemFull, { item: item })] })] }, item.index);
+        }) });
+}
+/** Filtering changes rows only: group counts, bars and sizes keep their full-request meaning. */
+export function SegmentBlocks({ request, filterCat, onClearFilter, onOpenRequest, t }) {
+    const { system, tools, history, added } = request.segments;
+    const [openLayers, setOpenLayers] = useState(new Set(['added']));
+    const duplicates = duplicateStats([...system, ...history, ...added]);
+    const groups = new Map();
+    for (const item of [...system, ...history, ...added]) {
+        if ((duplicates.counts.get(item.full) ?? 0) > 1) {
+            const group = groups.get(item.full) ?? [];
+            group.push(item);
+            groups.set(item.full, group);
+        }
+    }
+    const [expanded, setExpanded] = useState(new Set());
+    const [target, setTarget] = useState(null);
+    const [flash, setFlash] = useState(null);
+    const [trail, setTrail] = useState([]);
+    const [destination, setDestination] = useState();
+    const refs = useRef(new Map());
+    useLayoutEffect(() => {
+        if (!target)
+            return;
+        const row = refs.current.get(target);
+        if (!row)
+            return;
+        row.scrollIntoView?.({ block: 'start', behavior: 'instant' });
+        row.querySelector('summary')?.focus({ preventScroll: true });
+        setFlash(target);
+        setTarget(null);
+    }, [target, filterCat]);
+    useEffect(() => {
+        if (!flash)
+            return;
+        const timer = setTimeout(() => setFlash(null), 1600);
+        return () => clearTimeout(timer);
+    }, [flash]);
+    const matches = (x) => filterCat === null || (filterCat === '__dup' ? (duplicates.counts.get(x.full) ?? 0) > 1 : x.category === filterCat);
+    useEffect(() => {
+        if (filterCat === null)
+            return;
+        setOpenLayers(previous => {
+            const next = new Set(previous);
+            next.add('history');
+            for (const id of ['system', 'added'])
+                if (request.segments[id].some(x => filterCat === '__dup' ? (duplicates.counts.get(x.full) ?? 0) > 1 : x.category === filterCat))
+                    next.add(id);
+            if (filterCat === 'tool-definition')
+                next.add('tools');
+            return next;
+        });
+    }, [filterCat, request]);
+    const navigate = (from, to) => {
+        if (!matches(to))
+            onClearFilter?.();
+        setOpenLayers(previous => {
+            const next = new Set(previous);
+            for (const id of ['system', 'history', 'added'])
+                if (request.segments[id].includes(to))
+                    next.add(id);
+            return next;
+        });
+        setExpanded(previous => { const next = new Set(previous); next.delete(from); next.add(to); return next; });
+        setTarget(to);
+    };
+    const reading = {
+        expanded, flash, returnTo: trail.at(-1), destination,
+        register: (item, element) => { if (element)
+            refs.current.set(item, element);
+        else
+            refs.current.delete(item); },
+        toggle: item => {
+            if (expanded.has(item))
+                setTarget(item);
+            setExpanded(previous => { const next = new Set(previous); next.has(item) ? next.delete(item) : next.add(item); return next; });
+            setTrail([]);
+            setDestination(undefined);
+        },
+        next: (from, to) => { setTrail([]); setDestination(undefined); navigate(from, to); },
+        jump: (from, to) => { setTrail(previous => [...previous, from]); setDestination(to); navigate(from, to); },
+        back: from => {
+            const to = trail.at(-1);
+            if (!to)
+                return;
+            setTrail(previous => previous.slice(0, -1));
+            setDestination(to);
+            navigate(from, to);
+        },
+    };
+    const layers = [
+        { id: 'system', items: system, count: system.length, chars: system.reduce((n, x) => n + x.chars, 0), unit: 'cat.rows' },
+        { id: 'tools', items: [], count: tools.length, chars: tools.reduce((n, x) => n + x.chars, 0), unit: 'seg.toolsFrom' },
+        { id: 'history', items: history, count: history.length, chars: history.reduce((n, x) => n + x.chars, 0), unit: 'lens.messages' },
+        { id: 'added', items: added, count: added.length, chars: added.reduce((n, x) => n + x.chars, 0), unit: 'lens.messages' },
+    ];
+    const total = layers.reduce((n, l) => n + l.chars, 0);
+    const seen = new Set();
+    return _jsx(_Fragment, { children: layers.map(layer => {
+            const open = openLayers.has(layer.id);
+            const mix = new Map();
+            if (layer.id === 'tools')
+                mix.set('tool-definition', layer.chars);
+            else
+                for (const x of layer.items)
+                    mix.set(x.category, (mix.get(x.category) ?? 0) + x.chars);
+            const rows = layer.items.filter(matches);
+            let extra = 0;
+            for (const item of layer.items) {
+                if (item.full.length < 40)
+                    continue;
+                if (seen.has(item.full))
+                    extra += item.chars;
+                seen.add(item.full);
+            }
+            const names = { system: 'lens.layerSystem', tools: 'lens.layerTools', history: 'lens.layerHistory', added: 'lens.layerAdded' };
+            return _jsxs("details", { className: css.layer, open: open, children: [_jsxs("summary", { className: css.layerHead, onClick: e => { e.preventDefault(); setOpenLayers(previous => { const next = new Set(previous); next.has(layer.id) ? next.delete(layer.id) : next.add(layer.id); return next; }); }, children: [_jsx(IconChevronDownOutlineMedium, { size: 16, className: css.chevron }), _jsxs("span", { className: css.layerName, children: [t(names[layer.id]), _jsx("small", { children: t(layer.unit, { count: String(layer.count) }) })] }), _jsxs("span", { className: css.mix, children: [_jsx("span", { className: css.mini, style: { width: `${total ? Math.max(3, layer.chars / total * 100) : 0}%` }, children: [...mix].sort((a, b) => b[1] - a[1]).map(([category, n]) => _jsx("i", { "data-cat": category, style: { flex: `${n} 1 0` } }, category)) }), extra > 0 && _jsx("span", { className: css.badge, children: t('lens.repeatedChars', { count: fmtK(extra) }) }), layer.id === 'tools' && tools.some(x => x.added) && _jsx("span", { className: css.badge, children: t('lens.newTools', { count: String(tools.filter(x => x.added).length) }) })] }), _jsx("span", { className: css.number, children: fmt(layer.chars) })] }), open && _jsx("div", { className: css.rows, children: layer.id === 'tools' ? ((filterCat === null || filterCat === 'tool-definition') && tools.length > 0 ? _jsx(ToolCatalog, { tools: tools, t: t }) : _jsx("div", { className: css.emptyNote, children: t(filterCat ? 'lens.noMatch' : 'seg.toolsEmpty') }))
+                            : rows.length ? _jsx(MessageRows, { items: rows, groups: groups, highlight: filterCat === '__dup', reading: reading, onOpenRequest: onOpenRequest, t: t })
+                                : _jsx("div", { className: css.emptyNote, children: t(filterCat ? 'lens.noMatch' : layer.id === 'system' ? 'seg.systemEmpty' : 'seg.empty') }) })] }, layer.id);
+        }) });
+}
+function Clamped({ text, t }) {
+    const [open, setOpen] = useState(false);
+    const long = text.length > 300;
+    return _jsxs(_Fragment, { children: [_jsx("pre", { className: css.clamp, "data-open": open, "data-long": long, children: text }), long && _jsx("button", { className: css.more, type: "button", onClick: () => setOpen(v => !v), children: open ? t('lens.collapse') : t('lens.expand', { count: fmt(text.length) }) })] });
+}
+function ArgumentValue({ name, value }) {
+    const [open, setOpen] = useState(false);
+    return _jsxs(_Fragment, { children: [_jsx("span", { className: css.argKey, children: name }), _jsx("button", { type: "button", className: css.argValue, "aria-label": name, "aria-expanded": open, title: value, onClick: () => setOpen(v => !v), children: value })] });
+}
+function Arguments({ raw, t }) {
+    let obj;
+    try {
+        obj = JSON.parse(raw);
+    }
+    catch {
+        return _jsx(Clamped, { text: raw, t: t });
+    }
+    if (!obj || typeof obj !== 'object')
+        return _jsx(Clamped, { text: raw, t: t });
+    return _jsx("div", { className: css.args, children: Object.entries(obj).map(([k, v]) => _jsx(ArgumentValue, { name: k, value: typeof v === 'string' ? v : JSON.stringify(v) }, k)) });
+}
+function Reasoning({ text, ms, t }) {
+    const [open, setOpen] = useState(false);
+    return _jsxs("div", { className: css.think, children: [_jsxs("button", { type: "button", "aria-expanded": open, onClick: () => setOpen(v => !v), children: [_jsx("b", { children: t('lens.reasoning') }), " \u00B7 ", ms === undefined ? '—' : fmtSpan(ms), " \u00B7 ", t('chain.chars', { count: fmt(text.length) })] }), _jsx("div", { className: css.thinkText, "data-open": open, children: text })] });
+}
+/** Result text is attached by call ID, including same-name and parallel calls. */
+function ToolCallCard({ call, t }) {
+    const [open, setOpen] = useState(false);
+    const execution = call.execution;
+    const failed = execution?.status === 'failed';
+    const result = execution?.result;
+    const status = execution?.status ?? 'unknown';
+    return _jsxs("div", { className: css.call, "data-status": status, children: [_jsxs("div", { className: css.callHead, children: [_jsx("span", { children: t('lens.calls') }), _jsx("b", { children: call.name }), _jsx("span", { className: css.callStatus, "data-status": status, children: t(`tool.status.${status}`) }), _jsx("span", { className: css.number, children: fmt(call.arguments.length) })] }), _jsx(Arguments, { raw: call.arguments, t: t }), execution && execution.status !== 'running' && _jsxs("div", { className: css.result, "data-error": failed, children: [_jsxs("div", { className: css.resultHead, children: [_jsx("b", { children: t('tool.result') }), result !== undefined && _jsx("button", { type: "button", className: css.more, "aria-expanded": open, onClick: () => setOpen(v => !v), children: open ? t('lens.collapse') : t(failed ? 'tool.expand' : 'tool.show', { count: fmt(result.length) }) })] }), result === undefined ? _jsx("div", { className: css.emptyNote, children: t('tool.noResult') })
+                        : (failed || open) && _jsx("pre", { className: css.resultText, "data-open": open, children: result || t('tool.emptyResult') })] })] });
+}
+/** The output body is visible, including reasoning and arguments, without opening a wrapper. */
+export function OutputBlock({ request, t }) {
+    const response = request.response;
+    return _jsxs("div", { className: css.output, children: [request.status === 'failed' && request.error && _jsx("div", { className: css.errorNote, children: request.error }), response === undefined ? _jsx("div", { className: css.emptyNote, children: t(request.status === 'streaming' ? 'out.streaming' : 'lens.noResponse') }) : _jsxs(_Fragment, { children: [response.reasoning && _jsx(Reasoning, { text: response.reasoning, ms: request.timing.reasoningMs, t: t }), response.text && _jsx(Clamped, { text: response.text, t: t }), response.toolCalls.map((call, i) => _jsx(ToolCallCard, { call: call, t: t }, call.callId ?? i))] })] });
+}
+function InputCard({ item, from, repeats, onOpenRequest, t }) {
+    const [open, setOpen] = useState(false);
+    const a = item.category === 'assistant' ? parseAssistant(item.full) : null;
+    const body = a ? [a.text, ...(a.calls ?? []).map(c => `→ ${c.name}`)].filter(Boolean).join('\n') || item.preview : item.full || item.preview;
+    return _jsxs("div", { className: css.message, "data-error": item.isError, children: [_jsxs("button", { type: "button", className: css.messageHead, "aria-expanded": open, onClick: () => setOpen(v => !v), children: [_jsx("i", { className: css.dot, "data-cat": item.category }), _jsx("b", { children: t(categoryLabelKey(item.category)) }), _jsx("span", { className: css.source, title: from, children: from }), repeats > 1 && _jsxs("span", { className: css.badge, children: ["\u00D7", repeats] }), _jsx("span", { className: css.number, children: fmt(item.chars) })] }), item.isError && _jsx("div", { className: css.errorNote, children: t('lens.errors') }), _jsx(RewriteMeta, { item: item, onOpenRequest: onOpenRequest, t: t }), open ? _jsxs("div", { className: css.messageFull, children: [_jsx("div", { className: css.fullLabel, children: item.sourceTurn === undefined ? '' : t('lens.sourceTurn', { turn: String(item.sourceTurn) }) }), _jsx(ItemFull, { item: item })] }) : _jsx("div", { className: css.messageBody, onClick: () => setOpen(true), children: body })] });
+}
+export function Exchange({ request, previousResponseNumber, onOpenRequest, t }) {
+    const duplicates = duplicateStats([...request.segments.system, ...request.segments.history, ...request.segments.added]);
+    return _jsxs("section", { "aria-label": t('lens.exchange'), children: [_jsx("h3", { className: css.exchangeTitle, children: t('lens.exchange') }), _jsxs("div", { className: css.exchange, children: [_jsxs("div", { className: css.column, children: [_jsxs("div", { className: css.columnLabel, children: [t(request.compaction?.inputPartial ? 'compaction.region' : 'lens.newInput'), " \u00B7 ", request.segments.added.length] }), request.segments.added.map((item, i) => _jsx(InputCard, { item: item, onOpenRequest: onOpenRequest, repeats: duplicates.counts.get(item.full) ?? 0, t: t, from: item.category === 'assistant' && previousResponseNumber !== null ? t('row.prevResponse', { seq: String(previousResponseNumber) }) : item.category === 'tool-result' && item.sourceRequestNumber !== undefined ? `${item.source} · ${t('row.callResult', { seq: String(item.sourceRequestNumber) })}` : item.source }, i))] }), _jsx("div", { className: css.arrow, "aria-hidden": "true", children: "\u2192" }), _jsxs("div", { className: css.column, role: "region", "aria-label": t('out.title'), children: [_jsxs("div", { className: css.columnLabel, children: [_jsx("span", { children: t('out.title') }), _jsxs("span", { children: [request.usage ? fmt(request.usage.outputTokens) : '—', " tok"] })] }), _jsx(OutputBlock, { request: request, t: t })] })] })] });
+}

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

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+import type { AgentScopeOverview, RequestConfig, TurnTiming } from '../types.ts';
+import type { InspectorTabProps } from './contract.ts';
+type T = InspectorTabProps['t'];
+export interface TimingViewProps {
+    readonly timing: TurnTiming | null;
+    readonly scopes: readonly AgentScopeOverview[];
+    readonly filterScopeId: string | undefined;
+    readonly filterIsSubagent: boolean;
+    readonly config: RequestConfig | undefined;
+    readonly onOpenRequest: (seq: number, scopeId: string) => void;
+    readonly onSelectScope?: (scopeId: string) => void;
+    readonly t: T;
+}
+export declare function TimingView({ timing, scopes, filterScopeId, onOpenRequest, onSelectScope, t, }: TimingViewProps): ReactNode;
+export {};
+//# sourceMappingURL=TimingView.d.ts.map

package/lib/types/client/TimingView.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useState } from 'react';
+import { requestNumberText, cachePct, fmtK, fmtSpan, inputTotal, summaryText, TIMING_KINDS, } from "./aggregate.js";
+import { scopeTiming } from "./timing.js";
+import css from './TimingView.module.css';
+import { ScopeConfigs } from "./ConfigFacts.js";
+/** All agents have separate lanes; cards and tables always describe the selected agent. */
+/** Stretches of one lane's window with no activity, tagged by where they sit. */
+function idleSpans(lanes, from, to) {
+    const out = [];
+    let cursor = from;
+    for (const lane of [...lanes].sort((a, b) => a.startedAt - b.startedAt)) {
+        if (lane.startedAt > cursor)
+            out.push({ from: cursor, to: Math.min(lane.startedAt, to), head: cursor === from, tail: false });
+        cursor = Math.max(cursor, lane.startedAt + lane.durationMs);
+    }
+    if (cursor < to)
+        out.push({ from: cursor, to, head: lanes.length === 0, tail: lanes.length > 0 });
+    return out.filter((g) => g.to > g.from);
+}
+/** Each non-tool row's timeline color, so the table and the timeline legend read alike. */
+const NON_BUCKET = { wait: 'wait', text: 'text', direct: 'reasoning', slack: 'other' };
+export function TimingView({ timing, scopes, filterScopeId, onOpenRequest, onSelectScope, t, }) {
+    const [sort, setSort] = useState('total');
+    const [open, setOpen] = useState(new Set(['wait']));
+    const scope = scopes.find((s) => s.scopeId === (filterScopeId ?? 'main')) ?? scopes[0];
+    if (!timing || !scope)
+        return _jsx("div", { role: "status", children: t('state.loading') });
+    const requestBySeq = new Map(scopes.flatMap(s => s.requests).map(r => [r.seq, r]));
+    const numberOf = (seq) => requestNumberText(requestBySeq.get(seq));
+    const data = scopeTiming(timing, scope);
+    const rows = [...data.tools].sort((a, b) => b[sort] - a[sort]);
+    const keys = ['calls', 'errors', 'think', 'args', 'exec', 'total'];
+    const nonKeys = ['wait', 'text', 'direct', 'slack'];
+    const totalTools = rows.reduce((n, r) => n + r.total, 0);
+    const start = timing.startedAt ?? Math.min(...scopes.map((s) => s.startedAt));
+    const end = Math.max(start + timing.totalMs, ...timing.lanes.map((l) => l.startedAt + l.durationMs));
+    const span = Math.max(1, end - start);
+    /** Idle time, split by where it sits (rows only when present). */
+    const idleRows = [['lens.gapsHead', data.gapsHead], ['lens.gaps', data.gapsBetween], ['lens.gapsTail', data.gapsTail]]
+        .filter(([, ms]) => ms >= 50);
+    /** The non-tool table's share cue scales to its largest row. */
+    const nonMax = Math.max(1, ...nonKeys.map((k) => [...data.non[k].values()].reduce((n, ms) => n + ms, 0)), ...idleRows.map(([, ms]) => ms));
+    return (_jsxs("div", { className: css.scroll, children: [_jsx(ScopeConfigs, { scope: scope, onOpenRequest: onOpenRequest, t: t }), _jsx("div", { className: css.timeSummary, children: [
+                    [
+                        scope.kind === 'main' ? t('time.total') : t('time.totalScope'),
+                        data.total,
+                        t('lens.equation'),
+                    ],
+                    [
+                        t('lens.model'),
+                        data.model,
+                        `${scope.requests.length} · ${t('time.bucket.reasoning')} ${fmtSpan(data.think)}`,
+                    ],
+                    [
+                        t('lens.tools'),
+                        data.exec,
+                        `${t('lens.calls')} ${rows.reduce((n, r) => n + r.calls, 0)} · ${t('lens.errors')} ${rows.reduce((n, r) => n + r.errors, 0)}`,
+                    ],
+                    [t('lens.other'), data.gaps, [
+                            ...data.gapsHead >= 50 ? [`${t('lens.gapsHead')} ${fmtSpan(data.gapsHead)}`] : [],
+                            ...data.gapsBetween >= 50 ? [`${t('lens.gaps')} ${fmtSpan(data.gapsBetween)}`] : [],
+                            ...data.gapsTail >= 50 ? [`${t('lens.gapsTail')} ${fmtSpan(data.gapsTail)}`] : [],
+                        ].join(' · ') || t('lens.gaps')],
+                ].map(([label, value, sub]) => (_jsxs("div", { className: css.cell, children: [_jsx("div", { className: css.k, children: label }), _jsx("div", { className: css.v, children: fmtSpan(Number(value)) }), _jsx("div", { className: css.k, children: sub })] }, String(label)))) }), scopes.some(s => s.requests.some(r => r.timingApproximate)) && _jsx("div", { className: css.stateNote, children: t('compaction.timingHint') }), data.overlap > 0 && (_jsx("div", { className: css.stateNote, children: t('lens.overlap') })), scopes.length > 1 && (_jsx("div", { className: css.stateNote, children: t('lens.nested') })), _jsxs("section", { children: [_jsx("h3", { children: t('lens.timeline') }), _jsxs("div", { className: css.legend, children: [TIMING_KINDS.map((k) => (_jsxs("span", { children: [_jsx("i", { className: css.dot, "data-bucket": k }), " ", t(`time.bucket.${k}`)] }, k))), _jsxs("span", { children: [_jsx("i", { className: css.dotIdle }), " ", t('time.idle')] })] }), scopes.map((s) => (_jsxs("div", { className: css.lane, "data-dim": scopes.length > 1 ? String(s.scopeId !== scope.scopeId) : undefined, children: [_jsx("button", { type: "button", className: css.laneName, onClick: () => onSelectScope?.(s.scopeId), children: s.kind === 'main' ? t('lens.main') : (s.label ?? s.scopeId) }), _jsxs("div", { className: css.timeline, children: [idleSpans(timing.lanes.filter((l) => l.scopeId === s.scopeId), s.kind === 'main' ? start : s.startedAt, s.kind === 'main' ? end : (s.endedAt ?? end))
+                                        .filter((g) => g.to - g.from >= Math.max(200, span * 0.01))
+                                        .map((g) => {
+                                        const where = g.head ? t('lens.gapsHead') : g.tail ? t('lens.gapsTail') : t('lens.gaps');
+                                        const label = `${t('time.idle')} · ${where} ${fmtSpan(g.to - g.from)}`;
+                                        return _jsx("span", { className: css.idle, title: label, "aria-label": label, style: { left: `${((g.from - start) / span) * 100}%`, width: `${((g.to - g.from) / span) * 100}%` } }, `idle-${g.from}`);
+                                    }), timing.lanes
+                                        .filter((l) => l.scopeId === s.scopeId)
+                                        .map((l, i) => (_jsx("button", { type: "button", className: css.blk, "data-bucket": l.kind, title: `#${numberOf(l.requestSeq)} ${l.tool ?? t(`time.bucket.${l.kind}`)} · ${fmtSpan(l.durationMs)}`, "aria-label": `#${numberOf(l.requestSeq)} ${t(`time.bucket.${l.kind}`)}`, style: {
+                                            left: `${((l.startedAt - start) / span) * 100}%`,
+                                            width: `${Math.max(0.3, (l.durationMs / span) * 100)}%`,
+                                        }, onClick: () => onOpenRequest(l.requestSeq, l.scopeId) }, i)))] })] }, s.scopeId))), _jsxs("div", { className: css.tlScale, children: [_jsx("span", { children: "0" }), _jsx("span", { children: fmtSpan(span / 2) }), _jsx("span", { children: fmtSpan(span) })] })] }), _jsxs("section", { children: [_jsxs("h3", { className: css.titleRow, children: [t('lens.toolTime'), _jsx("abbr", { className: css.info, title: t('lens.attribution'), children: "i" })] }), _jsx("div", { className: css.tableScroll, children: _jsxs("table", { className: css.tt, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: t('lens.tool') }), keys.map((k) => (_jsx("th", { "aria-sort": sort === k ? 'descending' : 'none', "data-sorted": sort === k, children: _jsxs("button", { type: "button", onClick: () => setSort(k), children: [t(`lens.${k}`), sort === k ? ' ↓' : ''] }) }, k)))] }) }), _jsx("tbody", { children: rows.map((r) => (_jsxs("tr", { children: [_jsx("td", { children: r.tool }), keys.map((k) => (_jsx("td", { "data-zero": r[k] === 0 || (k !== 'calls' && k !== 'errors' && r[k] < 50), "data-error": k === 'errors' && r[k] > 0, "data-total": k === 'total', style: k === 'total' ? { ['--share']: String(r.total / Math.max(1, ...rows.map((v) => v.total))) } : undefined, children: _jsx("span", { children: k === 'calls' || k === 'errors' ? r[k] : fmtSpan(r[k]) }) }, k)))] }, r.tool))) }), _jsx("tfoot", { children: _jsxs("tr", { children: [_jsx("td", { children: t('lens.total') }), keys.map((k) => {
+                                                const sum = rows.reduce((n, r) => n + r[k], 0);
+                                                return _jsx("td", { "data-zero": sum === 0, children: k === 'calls' || k === 'errors' ? sum : fmtSpan(sum) }, k);
+                                            })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { children: t('lens.nonTool') }), _jsx("div", { className: css.tableScroll, children: _jsxs("table", { className: css.tt, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: t('lens.type') }), _jsx("th", { children: t('lens.calls') }), _jsx("th", { children: t('lens.longest') }), _jsx("th", { "data-sorted": "true", children: t('lens.total') })] }) }), _jsxs("tbody", { children: [_jsx("tr", { className: css.ttGroup, children: _jsx("td", { colSpan: 4, children: t('time.groupModel') }) }), nonKeys.map((k) => {
+                                            const items = [...data.non[k]]
+                                                .filter(([, ms]) => ms > 0)
+                                                .sort((a, b) => b[1] - a[1]);
+                                            if (!items.length)
+                                                return null;
+                                            const sum = items.reduce((n, [, ms]) => n + ms, 0);
+                                            return (_jsxs(Fragment, { children: [_jsxs("tr", { "data-open": open.has(k), children: [_jsx("td", { children: _jsxs("button", { type: "button", className: css.ttToggle, "aria-expanded": open.has(k), onClick: () => setOpen((p) => {
+                                                                        const n = new Set(p);
+                                                                        if (n.has(k))
+                                                                            n.delete(k);
+                                                                        else
+                                                                            n.add(k);
+                                                                        return n;
+                                                                    }), children: [_jsx("span", { className: css.ttChev, "aria-hidden": "true", children: "\u203A" }), _jsx("i", { className: css.ttSwatch, "data-bucket": NON_BUCKET[k] }), t(`lens.${k}`)] }) }), _jsx("td", { children: items.length }), _jsxs("td", { children: ["#", numberOf(items[0][0]), " ", fmtSpan(items[0][1])] }), _jsx("td", { "data-total": "true", "data-zero": sum < 50, style: { ['--share']: String(sum / nonMax) }, children: _jsx("span", { children: fmtSpan(sum) }) })] }), open.has(k) && items.map(([seq, ms], i) => {
+                                                        const r = scope.requests.find((r) => r.seq === seq);
+                                                        return (_jsxs("tr", { className: css.ttDetail, "data-last": i === items.length - 1, children: [_jsx("td", { children: _jsxs("button", { type: "button", onClick: () => onOpenRequest(seq, scope.scopeId), children: [_jsxs("span", { className: css.ttReq, children: ["#", numberOf(seq)] }), summaryText(r.responseSummary, t('resp.directAnswer'), t('compaction.title'), t('resp.thinking'))] }) }), _jsx("td", {}), _jsx("td", { className: css.ttMeta, children: k === 'wait' && r.usage ? `${t('lens.hit')} ${cachePct(r.usage) ?? '—'}% · ${fmtK(inputTotal(r.usage))}` : '' }), _jsx("td", { children: fmtSpan(ms) })] }, seq));
+                                                    })] }, k));
+                                        }), idleRows.length > 0 && _jsx("tr", { className: css.ttGroup, children: _jsx("td", { colSpan: 4, children: t('time.idle') }) }), idleRows.map(([key, ms]) => (_jsxs("tr", { children: [_jsx("td", { children: _jsxs("span", { className: css.ttToggle, children: [_jsx("span", { className: css.ttChev, "aria-hidden": "true" }), _jsx("i", { className: css.ttSwatch, "data-bucket": "idle" }), t(key)] }) }), _jsx("td", { "data-zero": "true", children: "\u2014" }), _jsx("td", { "data-zero": "true", children: "\u2014" }), _jsx("td", { "data-total": "true", style: { ['--share']: String(ms / nonMax) }, children: _jsx("span", { children: fmtSpan(ms) }) })] }, key)))] }), _jsx("tfoot", { children: _jsxs("tr", { children: [_jsx("td", { children: t('lens.total') }), _jsx("td", {}), _jsx("td", {}), _jsx("td", { children: fmtSpan(data.total - totalTools) })] }) })] }) })] })] }));
+}