@cjhyy/code-shell-web 0.9.43 → 0.9.46

package/dist/components/ModelTraceExplorer.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { RemoteModelTraceApi } from "../model-trace-api.js";
+/** Browser-only, read-only explorer shared by the Web workbench and paired mobile client. */
+export declare function ModelTraceExplorer({ api, lang, initialSessionId, sessionTitles, onOpenSession, }: {
+    api: RemoteModelTraceApi;
+    lang?: "zh" | "en";
+    initialSessionId?: string;
+    sessionTitles?: Readonly<Record<string, string>>;
+    onOpenSession?: (id: string) => void;
+}): React.JSX.Element;

package/dist/components/ModelTraceExplorer.js

@@ -0,0 +1,490 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { modelTraceCallTypes, modelTraceInputBoundary, presentModelTraceCallType, } from "./model-trace-presentation.js";
+const labels = {
+    zh: {
+        title: "执行观测",
+        description: "按类型筛选同一份活动记录，再按会话查看执行、Prompt、响应、重试和工具事件。",
+        refresh: "刷新",
+        search: "搜索模型、用途、来源或编号",
+        session: "会话 ID",
+        model: "模型",
+        purpose: "技术用途标识",
+        filters: "更多筛选",
+        callType: "按类型查看",
+        allTypes: "全部调用",
+        source: "来源入口",
+        technical: "技术信息",
+        all: "全部状态",
+        running: "运行中",
+        completed: "已完成",
+        failed: "失败",
+        cancelled: "已取消",
+        empty: "没有符合条件的会话或独立调用",
+        sessions: "会话与独立调用",
+        sessionRecord: "会话",
+        standalone: "独立调用",
+        standaloneExecutions: "独立调用的执行",
+        execution: "执行",
+        loaded: "已加载调用",
+        select: "选择会话或独立调用，查看其中的执行和模型调用",
+        calls: "会话内的执行",
+        back: "返回",
+        next: "下一页",
+        previous: "上一页",
+        more: "加载更多调用",
+        loading: "读取中…",
+        input: "运行时输入快照",
+        inputHint: "执行时组装的逻辑快照，包含指令、消息历史、工具及参数；实际请求请查看具体尝试。",
+        mediaInput: "模型输入与资源信息",
+        mediaHint: "展示提交给模型的文本、参数及资源元数据；音频等二进制内容不在此展开。",
+        toolInput: "工具输入",
+        eventInput: "事件输入",
+        eventHint: "这是工具或其他事件的输入，不是模型 Prompt。",
+        fullInput: "完整输入 JSON",
+        systemPrompt: "系统指令",
+        messages: "消息历史与本轮输入",
+        tools: "可用工具定义",
+        parameters: "调用参数",
+        message: "消息",
+        userRole: "用户角色消息",
+        assistantRole: "助手历史消息",
+        systemRole: "系统消息",
+        developerRole: "开发者消息",
+        toolRole: "工具结果消息",
+        roleHint: "角色表示消息在模型输入中的位置；用户角色消息也可能由辅助流程生成。",
+        output: "输出",
+        attempts: "重试与请求",
+        events: "工具与生命周期",
+        attempt: "尝试",
+        wire: "实际发出的 Provider 请求",
+        wireHint: "此尝试提交给 Provider 的请求正文，敏感信息已脱敏，超长内容可能截断。",
+        logical: "逻辑输入",
+        externalInput: "外部 CLI 入口输入",
+        external: "外部 CLI 入口输入，未覆盖 CLI 内部的模型请求",
+        missing: "这条调用已过期或不再可用",
+        unrecorded: "正文未采集",
+        truncated: "正文已截断",
+        redacted: "正文已脱敏",
+        contentHint: "仅记录元数据。请在 Host 的执行观测设置中开启 Prompt 正文采集；历史内容不会补回。",
+        disabled: "Host 已关闭调用记录",
+        copy: "复制 JSON",
+        copied: "已复制",
+        copyFailed: "复制失败，请重试",
+        open: "打开原会话",
+        cost: "费用未记录",
+        costEstimate: "估算费用",
+        costPartial: "部分尝试费用未知",
+        tokens: "Token",
+        duration: "耗时",
+        ttft: "首 Token",
+        request: "模型调用",
+    },
+    en: {
+        title: "Execution traces",
+        description: "Filter the same activity history by type, then browse sessions, executions, prompts, responses, retries and tools.",
+        refresh: "Refresh",
+        search: "Search model, purpose, source or ID",
+        session: "Session ID",
+        model: "Model",
+        purpose: "Technical purpose",
+        filters: "More filters",
+        callType: "Browse by type",
+        allTypes: "All calls",
+        source: "Source entry",
+        technical: "Technical information",
+        all: "All statuses",
+        running: "Running",
+        completed: "Completed",
+        failed: "Failed",
+        cancelled: "Cancelled",
+        empty: "No matching sessions or standalone calls",
+        sessions: "Sessions and standalone calls",
+        sessionRecord: "Session",
+        standalone: "Standalone calls",
+        standaloneExecutions: "Standalone executions",
+        execution: "Execution",
+        loaded: "Loaded calls",
+        select: "Choose a session or standalone calls to inspect executions and model calls",
+        calls: "Executions in session",
+        back: "Back",
+        next: "Next page",
+        previous: "Previous page",
+        more: "Load more calls",
+        loading: "Loading…",
+        input: "Runtime input snapshot",
+        inputHint: "A logical snapshot of instructions, message history, tools and parameters. Select an attempt to inspect its outgoing request.",
+        mediaInput: "Model input and resource metadata",
+        mediaHint: "Text, parameters and resource metadata submitted to the model. Binary audio and other media are not expanded here.",
+        toolInput: "Tool input",
+        eventInput: "Event input",
+        eventHint: "This is input for a tool or another event, not a model Prompt.",
+        fullInput: "Full input JSON",
+        systemPrompt: "System instructions",
+        messages: "Message history and current input",
+        tools: "Available tool definitions",
+        parameters: "Call parameters",
+        message: "Message",
+        userRole: "User-role message",
+        assistantRole: "Assistant history message",
+        systemRole: "System message",
+        developerRole: "Developer message",
+        toolRole: "Tool result message",
+        roleHint: "Roles describe a message’s position in model input. User-role messages may also be generated by helper workflows.",
+        output: "Output",
+        attempts: "Attempts and requests",
+        events: "Tools and lifecycle",
+        attempt: "Attempt",
+        wire: "Actual outgoing Provider request",
+        wireHint: "The request body submitted to the Provider for this attempt, with sensitive information redacted and long content possibly truncated.",
+        logical: "Logical input",
+        externalInput: "External CLI entry input",
+        external: "External CLI entry input; internal model requests are not covered",
+        missing: "This call has expired or is unavailable",
+        unrecorded: "Content was not recorded",
+        truncated: "Content was truncated",
+        redacted: "Content was redacted",
+        contentHint: "Only metadata is recorded. Enable Prompt content recording in the Host’s execution trace settings. Earlier content cannot be recovered.",
+        disabled: "The Host disabled call recording",
+        copy: "Copy JSON",
+        copied: "Copied",
+        copyFailed: "Copy failed. Please retry",
+        open: "Open conversation",
+        cost: "Cost not recorded",
+        costEstimate: "Estimated cost",
+        costPartial: "Some attempt costs are unknown",
+        tokens: "Tokens",
+        duration: "Duration",
+        ttft: "First token",
+        request: "Model call",
+    },
+};
+const css = `
+.cs-trace-explorer{display:flex;flex-direction:column;min-height:0;min-width:0;flex:1;height:auto;color:inherit;font:inherit;background:inherit;overflow:hidden}
+.cs-trace-explorer *{box-sizing:border-box}.cs-trace-explorer header{padding:16px 20px 12px;border-bottom:1px solid #8884;flex-shrink:0}
+.cs-trace-explorer h1{font-size:20px;margin:0}.cs-trace-explorer h2{font-size:14px;margin:0 0 12px}.cs-trace-explorer h3{font-size:13px;margin:12px 0 6px}
+.cs-trace-explorer p{font-size:13px;line-height:1.6;margin:8px 0;overflow-wrap:anywhere}.cs-trace-explorer button,.cs-trace-explorer input,.cs-trace-explorer select{font:inherit;color:inherit;border:1px solid #8885;border-radius:7px;background:transparent;padding:7px 9px;min-width:0}
+.cs-trace-explorer button{cursor:pointer}.cs-trace-explorer button:hover{background:#8882}.cs-trace-explorer button:disabled{opacity:.5;cursor:default}.cs-trace-explorer button:focus-visible{outline:2px solid #4c91ee;outline-offset:2px}
+.cs-trace-explorer button[aria-pressed=true]{background:#4c91ee22;border-color:#4c91ee}.cs-trace-explorer .cs-t-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
+.cs-trace-explorer .cs-t-filters{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;margin-top:12px}.cs-trace-explorer .cs-t-filters label{font-size:12px;display:flex;flex-direction:column;gap:4px;min-width:0}
+.cs-trace-explorer .cs-t-search{display:flex;gap:6px;flex-direction:column;margin-top:10px;font-size:12px}.cs-trace-explorer .cs-t-filter-fold{margin:8px 0 0}.cs-trace-explorer .cs-t-grid{min-height:0;flex:1;display:grid;grid-template-columns:minmax(180px,1fr) minmax(190px,1fr) minmax(300px,2fr)}
+.cs-trace-explorer .cs-t-pane{overflow:auto;min-width:0;padding:16px;border-right:1px solid #8884}.cs-trace-explorer .cs-t-item{display:block;width:100%;text-align:left;margin-bottom:8px;overflow-wrap:anywhere;word-break:break-word;font-size:12px}
+.cs-trace-explorer .cs-t-item strong{display:block;font-size:13px;margin-bottom:5px}.cs-trace-explorer .cs-t-muted{opacity:.7;font-size:12px}.cs-trace-explorer .cs-t-error{color:#c95252;white-space:pre-wrap}
+.cs-trace-explorer .cs-t-type{display:inline-block;border:1px solid #8884;border-radius:5px;padding:2px 6px;font-size:12px;line-height:1.5;background:#8881}.cs-trace-explorer .cs-t-type-filter-field{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:12px;margin-top:10px}.cs-trace-explorer .cs-t-type-filters{display:flex;gap:6px;overflow-x:auto;padding:3px;scroll-padding:3px;max-width:100%;overscroll-behavior-x:contain}.cs-trace-explorer .cs-t-type-filters button{flex:0 0 auto;white-space:nowrap;font-size:12px;padding:6px 9px;border-radius:16px}.cs-trace-explorer .cs-t-type-filters button[aria-pressed=true]{font-weight:600;background:#4c91ee33;border-color:#4c91ee}.cs-trace-explorer .cs-t-primary-filters{display:flex;flex-direction:column;min-width:0}.cs-trace-explorer .cs-t-message{margin:12px 0}
+.cs-trace-explorer pre{font:12px/1.6 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;max-height:65vh;overflow:auto;padding:12px;border:1px solid #8884;border-radius:8px;background:#8881}
+.cs-trace-explorer details{margin:12px 0}.cs-trace-explorer summary{cursor:pointer;font-size:13px}.cs-trace-explorer .cs-t-back{display:none}.cs-trace-explorer dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:12px;margin:12px 0}.cs-trace-explorer dd{margin:0;overflow-wrap:anywhere}.cs-trace-explorer footer{display:flex;gap:8px;align-items:center;justify-content:space-between;padding-top:12px}
+@media(max-width:1000px){.cs-trace-explorer .cs-t-filters{grid-template-columns:1fr 1fr}.cs-trace-explorer .cs-t-grid{display:flex}.cs-trace-explorer .cs-t-pane{width:100%;border:0;display:none}.cs-trace-explorer .cs-t-pane[data-active=true]{display:block}.cs-trace-explorer .cs-t-back{display:inline-block;margin-bottom:12px}.cs-trace-explorer header{padding:10px;max-height:50%;overflow:auto}.cs-trace-explorer header>p{display:none}.cs-trace-explorer pre{max-height:none}}
+`;
+const errorText = (error) => (error instanceof Error ? error.message : String(error));
+const ms = (start, end) => start !== undefined && end !== undefined
+    ? `${Math.max(0, end - start).toLocaleString()} ms`
+    : "—";
+/** Browser-only, read-only explorer shared by the Web workbench and paired mobile client. */
+export function ModelTraceExplorer({ api, lang = "zh", initialSessionId, sessionTitles, onOpenSession, }) {
+    const l = labels[lang];
+    const [search, setSearch] = useState("");
+    const [model, setModel] = useState("");
+    const [purpose, setPurpose] = useState("");
+    const [callType, setCallType] = useState("");
+    const [sessionId, setSessionId] = useState(initialSessionId ?? "");
+    const [status, setStatus] = useState("");
+    const [cursors, setCursors] = useState([undefined]);
+    const [pageIndex, setPageIndex] = useState(0);
+    const [page, setPage] = useState();
+    const [selectedSession, setSelectedSession] = useState();
+    const [traceId, setTraceId] = useState();
+    const [tracePage, setTracePage] = useState();
+    const [traceError, setTraceError] = useState("");
+    const [requestId, setRequestId] = useState();
+    const [detail, setDetail] = useState();
+    const [node, setNode] = useState({
+        kind: "request",
+    });
+    const [stage, setStage] = useState("list");
+    const [revision, setRevision] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [detailLoading, setDetailLoading] = useState(false);
+    const [error, setError] = useState("");
+    const [detailError, setDetailError] = useState("");
+    const [configHint, setConfigHint] = useState("");
+    const [copied, setCopied] = useState("");
+    const traceGeneration = useRef(0);
+    const sessionsHeading = useRef(null);
+    const executionsHeading = useRef(null);
+    const [moreLoading, setMoreLoading] = useState(false);
+    const filterKey = `${search}\u0000${model}\u0000${purpose}\u0000${callType}\u0000${sessionId}\u0000${status}`;
+    useEffect(() => {
+        setCursors([undefined]);
+        setPageIndex(0);
+        setPage(undefined);
+        setSelectedSession(undefined);
+        setTraceId(undefined);
+        setTracePage(undefined);
+        setRequestId(undefined);
+        setDetail(undefined);
+        setDetailError("");
+        setTraceError("");
+        setStage("list");
+    }, [api, filterKey]);
+    useEffect(() => {
+        let alive = true;
+        setLoading(true);
+        setError("");
+        const timer = setTimeout(() => {
+            void api
+                .sessions({
+                limit: 50,
+                cursor: cursors[pageIndex],
+                search: search || undefined,
+                model: model || undefined,
+                purpose: purpose || undefined,
+                callType: callType || undefined,
+                sessionId: sessionId || undefined,
+                status: status ? status : undefined,
+            })
+                .then((result) => {
+                if (alive)
+                    setPage(result);
+            })
+                .catch((cause) => {
+                if (alive)
+                    setError(errorText(cause));
+            })
+                .finally(() => {
+                if (alive)
+                    setLoading(false);
+            });
+        }, 180);
+        return () => {
+            alive = false;
+            clearTimeout(timer);
+        };
+    }, [api, filterKey, cursors, pageIndex, revision]);
+    useEffect(() => {
+        let alive = true;
+        void api
+            .getConfig()
+            .then((config) => {
+            if (alive)
+                setConfigHint(!config.enabled ? l.disabled : !config.captureContent ? l.contentHint : "");
+        })
+            .catch((cause) => {
+            if (alive)
+                setConfigHint(errorText(cause));
+        });
+        return () => {
+            alive = false;
+        };
+    }, [api, revision, l]);
+    const callQuery = () => ({
+        search: search || undefined,
+        model: model || undefined,
+        purpose: purpose || undefined,
+        callType: callType || undefined,
+        status: status ? status : undefined,
+        ...(selectedSession?.sessionId
+            ? { sessionId: selectedSession.sessionId }
+            : { traceId: selectedSession?.traceId, withoutSession: true }),
+    });
+    useEffect(() => {
+        const generation = ++traceGeneration.current;
+        if (!selectedSession)
+            return;
+        const scopeKey = selectedSession.key;
+        setMoreLoading(false);
+        setTraceError("");
+        setTracePage(undefined);
+        void api
+            .list({ ...callQuery(), limit: 200 })
+            .then((result) => {
+            if (generation === traceGeneration.current)
+                setTracePage({ ...result, scopeKey });
+        })
+            .catch((cause) => {
+            if (generation === traceGeneration.current)
+                setTraceError(errorText(cause));
+        });
+        return () => {
+            traceGeneration.current++;
+        };
+    }, [api, selectedSession?.key, filterKey, revision]);
+    useEffect(() => {
+        let alive = true;
+        if (!requestId)
+            return;
+        setDetailLoading(true);
+        setDetailError("");
+        setDetail((current) => (current?.record.id === requestId ? current : undefined));
+        void api
+            .get(requestId)
+            .then((result) => {
+            if (alive)
+                setDetail(result);
+        })
+            .catch((cause) => {
+            if (alive)
+                setDetailError(errorText(cause));
+        })
+            .finally(() => {
+            if (alive)
+                setDetailLoading(false);
+        });
+        return () => {
+            alive = false;
+        };
+    }, [api, requestId, revision]);
+    const groups = useMemo(() => {
+        const result = new Map();
+        for (const item of tracePage?.items ?? [])
+            result.set(item.traceId, [...(result.get(item.traceId) ?? []), item]);
+        return [...result];
+    }, [tracePage]);
+    const visibleDetail = detail &&
+        detail.record.id === requestId &&
+        detail.record.traceId === traceId &&
+        selectedSession &&
+        (selectedSession.sessionId
+            ? detail.record.sessionId === selectedSession.sessionId
+            : detail.record.traceId === selectedSession.traceId && !detail.record.sessionId)
+        ? detail
+        : undefined;
+    const record = visibleDetail?.record;
+    const executionsLabel = selectedSession && !selectedSession.sessionId ? l.standaloneExecutions : l.calls;
+    const selected = node.kind === "attempt"
+        ? record?.attempts.find((attempt) => attempt.id === node.id)
+        : node.kind === "event"
+            ? visibleDetail?.events.find((event) => event.id === node.id)
+            : record;
+    const copy = async () => {
+        try {
+            await navigator.clipboard.writeText(JSON.stringify(selected, null, 2));
+            setCopied(l.copied);
+        }
+        catch {
+            setCopied(l.copyFailed);
+        }
+    };
+    const selectRequest = (call) => {
+        setRequestId(call.id);
+        setTraceId(call.traceId);
+        setNode({ kind: "request" });
+        setStage("detail");
+        setCopied("");
+    };
+    const more = async () => {
+        if (!tracePage?.nextCursor || moreLoading || !selectedSession)
+            return;
+        const scopeKey = selectedSession.key;
+        const generation = traceGeneration.current;
+        setMoreLoading(true);
+        try {
+            const result = await api.list({ ...callQuery(), cursor: tracePage.nextCursor, limit: 200 });
+            if (generation === traceGeneration.current)
+                setTracePage((current) => ({
+                    ...result,
+                    scopeKey,
+                    items: [...(current?.scopeKey === scopeKey ? current.items : []), ...result.items],
+                }));
+        }
+        catch (cause) {
+            if (generation === traceGeneration.current)
+                setTraceError(errorText(cause));
+        }
+        finally {
+            if (generation === traceGeneration.current)
+                setMoreLoading(false);
+        }
+    };
+    const content = (value, state) => (_jsxs(_Fragment, { children: [state !== "recorded" && (_jsx("p", { className: "cs-t-muted", children: state === "not-recorded"
+                    ? l.unrecorded
+                    : state === "truncated"
+                        ? l.truncated
+                        : l.redacted })), value !== undefined && (_jsx("pre", { tabIndex: 0, children: typeof value === "string" ? value : JSON.stringify(value, null, 2) }))] }));
+    const callTypeBadge = (value) => {
+        const type = presentModelTraceCallType(value, lang);
+        return (_jsx("span", { className: "cs-t-type", "data-trace-call-type": type.type, title: type.description, children: type.label }));
+    };
+    const inputBoundary = selected && record ? modelTraceInputBoundary(node.kind, selected, record) : undefined;
+    const inputLabel = inputBoundary === "wire"
+        ? l.wire
+        : inputBoundary === "external"
+            ? l.externalInput
+            : inputBoundary === "media"
+                ? l.mediaInput
+                : inputBoundary === "event"
+                    ? selected?.kind === "tool"
+                        ? l.toolInput
+                        : l.eventInput
+                    : l.input;
+    const inputHint = inputBoundary === "wire"
+        ? l.wireHint
+        : inputBoundary === "external"
+            ? l.external
+            : inputBoundary === "media"
+                ? l.mediaHint
+                : inputBoundary === "event"
+                    ? l.eventHint
+                    : l.inputHint;
+    const logicalInput = inputBoundary === "logical" && selected?.input && typeof selected.input === "object"
+        ? selected.input
+        : undefined;
+    const roleLabel = (message) => {
+        const role = message && typeof message === "object" && "role" in message ? message.role : undefined;
+        return role === "user"
+            ? l.userRole
+            : role === "assistant"
+                ? l.assistantRole
+                : role === "system"
+                    ? l.systemRole
+                    : role === "developer"
+                        ? l.developerRole
+                        : role === "tool"
+                            ? l.toolRole
+                            : typeof role === "string"
+                                ? `${l.message} · ${role}`
+                                : l.message;
+    };
+    return (_jsxs("section", { className: "cs-trace-explorer", "aria-label": l.title, children: [_jsx("style", { children: css }), _jsxs("header", { children: [_jsxs("div", { className: "cs-t-row", children: [_jsx("h1", { children: l.title }), _jsx("button", { type: "button", disabled: loading, onClick: () => setRevision((value) => value + 1), children: l.refresh })] }), _jsx("p", { className: "cs-t-muted", children: l.description }), _jsxs("div", { className: "cs-t-primary-filters", children: [_jsxs("div", { className: "cs-t-type-filter-field", children: [_jsx("span", { className: "cs-t-muted", children: l.callType }), _jsxs("div", { className: "cs-t-type-filters", role: "group", "aria-label": l.callType, children: [_jsx("button", { type: "button", "data-trace-type-filter": "", "aria-pressed": callType === "", onClick: () => setCallType(""), children: l.allTypes }), modelTraceCallTypes.map((value) => {
+                                                const type = presentModelTraceCallType(value, lang);
+                                                return (_jsx("button", { type: "button", "data-trace-type-filter": value, "aria-pressed": callType === value, title: type.description, onClick: () => setCallType(value), children: type.label }, value));
+                                            })] })] }), _jsxs("label", { className: "cs-t-search", children: [_jsx("span", { className: "cs-t-muted", children: l.search }), _jsx("input", { "aria-label": l.search, type: "search", value: search, onChange: (event) => setSearch(event.target.value) })] })] }), _jsxs("details", { className: "cs-t-filter-fold", children: [_jsx("summary", { children: l.filters }), _jsxs("div", { className: "cs-t-filters", children: [_jsxs("label", { children: [l.session, _jsx("input", { value: sessionId, onChange: (event) => setSessionId(event.target.value) })] }), _jsxs("label", { children: [l.model, _jsx("input", { value: model, onChange: (event) => setModel(event.target.value) })] }), _jsxs("label", { children: [l.purpose, _jsx("input", { value: purpose, onChange: (event) => setPurpose(event.target.value) })] }), _jsxs("label", { children: [l.all, _jsxs("select", { value: status, onChange: (event) => setStatus(event.target.value), children: [_jsx("option", { value: "", children: l.all }), ["running", "completed", "failed", "cancelled"].map((value) => (_jsx("option", { value: value, children: l[value] }, value)))] })] })] })] }), configHint && (_jsx("p", { role: "status", className: "cs-t-muted", children: configHint })), error && (_jsx("p", { role: "alert", className: "cs-t-error", children: error }))] }), _jsxs("div", { className: "cs-t-grid", children: [_jsxs("div", { className: "cs-t-pane", "data-active": stage === "list", "aria-label": l.sessions, children: [_jsxs("h2", { ref: sessionsHeading, tabIndex: -1, children: [l.sessions, " \u00B7 ", page?.total ?? "—"] }), loading && _jsx("p", { role: "status", children: l.loading }), !loading && !page?.items.length && _jsx("p", { children: l.empty }), page?.items.map((item) => (_jsxs("button", { type: "button", className: "cs-t-item", "data-trace-session": item.key, "aria-pressed": selectedSession?.key === item.key, onClick: () => {
+                                    if (selectedSession?.key === item.key) {
+                                        setStage("tree");
+                                        return;
+                                    }
+                                    traceGeneration.current++;
+                                    setMoreLoading(false);
+                                    setTracePage(undefined);
+                                    setTraceError("");
+                                    setDetail(undefined);
+                                    setDetailError("");
+                                    setCopied("");
+                                    setSelectedSession(item);
+                                    setTraceId(item.latestTraceId);
+                                    setRequestId(item.latestRequestId);
+                                    setNode({ kind: "request" });
+                                    setStage("tree");
+                                }, children: [_jsxs("strong", { children: [item.sessionId ? sessionTitles?.[item.sessionId] || l.sessionRecord : l.standalone, " · ", item.callCount, " ", l.request] }), _jsx("span", { className: "cs-t-muted", children: item.sessionId ?? item.traceId }), _jsx("div", { className: "cs-t-row", "data-trace-session-call-types": item.key, children: (item.callTypes?.length ? item.callTypes : ["other"]).map((type) => (_jsx(React.Fragment, { children: callTypeBadge(type) }, type))) }), _jsxs("p", { className: "cs-t-muted", children: [new Date(item.updatedAt).toLocaleString(lang), " \u00B7 ", item.traceCount, " ", l.execution] }), _jsxs("span", { children: [item.sources.join(" · "), " \u00B7 ", item.models.join(" · ")] })] }, item.key))), _jsxs("footer", { children: [_jsx("button", { type: "button", disabled: pageIndex === 0 || loading, onClick: () => setPageIndex((value) => value - 1), children: l.previous }), _jsx("span", { children: pageIndex + 1 }), _jsx("button", { type: "button", disabled: !page?.nextCursor || loading, onClick: () => {
+                                            setCursors((current) => [...current.slice(0, pageIndex + 1), page?.nextCursor]);
+                                            setPageIndex((value) => value + 1);
+                                        }, children: l.next })] })] }), _jsxs("div", { className: "cs-t-pane", "data-active": stage === "tree", "aria-label": executionsLabel, children: [_jsx("button", { type: "button", className: "cs-t-back", onClick: () => {
+                                    setStage("list");
+                                    requestAnimationFrame(() => sessionsHeading.current?.focus());
+                                }, children: l.back }), _jsx("h2", { ref: executionsHeading, tabIndex: -1, children: executionsLabel }), !selectedSession ? (_jsx("p", { children: l.select })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "cs-t-muted", children: selectedSession.sessionId ?? selectedSession.traceId }), traceError && (_jsxs("div", { role: "alert", children: [_jsx("p", { className: "cs-t-error", children: traceError }), _jsx("button", { type: "button", onClick: () => setRevision((value) => value + 1), children: l.refresh })] })), !tracePage && !traceError && _jsx("p", { role: "status", children: l.loading }), tracePage && (_jsxs("p", { className: "cs-t-muted", children: [l.loaded, ": ", tracePage.items.length, " / ", tracePage.total] })), groups.map(([executionId, calls]) => (_jsxs("details", { open: true, "data-trace-group": executionId, children: [_jsxs("summary", { children: [l.execution, " \u00B7 ", new Date(calls[0].startedAt).toLocaleString(lang)] }), _jsx("p", { className: "cs-t-muted", children: executionId }), calls.map((call) => (_jsxs("div", { children: [_jsxs("button", { type: "button", className: "cs-t-item", "data-trace-request": call.id, "aria-pressed": requestId === call.id && node.kind === "request", onClick: () => selectRequest(call), children: [_jsx("strong", { children: call.model }), callTypeBadge(call.callType), _jsx("p", { className: "cs-t-muted", children: presentModelTraceCallType(call.callType, lang).description }), l.source, ": ", call.source, " \u00B7 ", l[call.status], " \u00B7", " ", ms(call.startedAt, call.endedAt)] }), record?.id === call.id &&
+                                                        record.attempts.map((attempt) => (_jsxs("button", { type: "button", className: "cs-t-item", "aria-pressed": node.kind === "attempt" && node.id === attempt.id, onClick: () => {
+                                                                setNode({ kind: "attempt", id: attempt.id });
+                                                                setStage("detail");
+                                                            }, children: [l.attempt, " ", attempt.number, " \u00B7 ", attempt.httpStatus ?? "—", " \u00B7", " ", l[attempt.status]] }, attempt.id)))] }, call.id)))] }, executionId))), tracePage?.nextCursor && (_jsx("button", { type: "button", disabled: moreLoading, onClick: () => void more(), children: l.more })), _jsx("h3", { children: l.events }), visibleDetail?.events
+                                        .filter((event) => event.traceId === traceId)
+                                        .map((event) => (_jsxs("button", { type: "button", className: "cs-t-item", "aria-pressed": node.kind === "event" && node.id === event.id, onClick: () => {
+                                            setNode({ kind: "event", id: event.id });
+                                            setStage("detail");
+                                        }, children: [event.kind, " \u00B7 ", event.name, " \u00B7 ", event.status] }, event.id)))] }))] }), _jsxs("div", { className: "cs-t-pane", "data-active": stage === "detail", "aria-label": l.request, children: [_jsx("button", { type: "button", className: "cs-t-back", onClick: () => {
+                                    setStage("tree");
+                                    requestAnimationFrame(() => executionsHeading.current?.focus());
+                                }, children: l.back }), detailError && (_jsx("p", { role: "alert", className: "cs-t-error", children: detailError })), detailLoading && _jsx("p", { role: "status", children: l.loading }), detail === null && _jsx("p", { children: l.missing }), selected ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "cs-t-row", children: [_jsx("h2", { children: node.kind === "event" ? selected.name : record?.model }), _jsx("button", { type: "button", onClick: () => void copy(), children: l.copy }), record?.sessionId && onOpenSession && (_jsx("button", { type: "button", onClick: () => onOpenSession(record.sessionId), children: l.open }))] }), copied && _jsx("p", { role: "status", children: copied }), record && node.kind !== "event" && (_jsxs(_Fragment, { children: [callTypeBadge(record.callType), _jsx("p", { className: "cs-t-muted", children: presentModelTraceCallType(record.callType, lang).description }), _jsxs("p", { className: "cs-t-muted", children: [l.source, ": ", record.source] }), _jsxs("details", { children: [_jsx("summary", { children: l.technical }), _jsxs("dl", { children: [_jsx("dt", { children: l.purpose }), _jsx("dd", { children: record.purpose }), _jsx("dt", { children: l.session }), _jsx("dd", { children: record.sessionId ?? "—" }), _jsx("dt", { children: l.execution }), _jsx("dd", { children: record.runId ?? record.traceId })] })] })] })), _jsxs("dl", { children: [_jsx("dt", { children: "ID" }), _jsx("dd", { children: selected.id }), _jsx("dt", { children: l.duration }), _jsx("dd", { children: ms(selected.startedAt, selected.endedAt) }), _jsx("dt", { children: l.ttft }), _jsx("dd", { children: "firstTokenAt" in selected ? ms(selected.startedAt, selected.firstTokenAt) : "—" }), _jsx("dt", { children: l.tokens }), _jsx("dd", { children: "usage" in selected && selected.usage
+                                                    ? `${selected.usage.promptTokens} / ${selected.usage.completionTokens}`
+                                                    : "—" })] }), _jsx("p", { className: "cs-t-muted", children: "estimatedCostUsd" in selected && typeof selected.estimatedCostUsd === "number"
+                                            ? `${l.costEstimate}: $${selected.estimatedCostUsd.toFixed(6)}${"unknownCostAttempts" in selected && selected.unknownCostAttempts ? ` · ${l.costPartial}` : ""}`
+                                            : l.cost }), selected.error && _jsx("p", { className: "cs-t-error", children: selected.error }), _jsxs("details", { open: true, children: [_jsx("summary", { children: inputLabel }), _jsx("p", { className: "cs-t-muted", children: inputHint }), logicalInput ? (_jsxs(_Fragment, { children: [content(undefined, selected.inputState), logicalInput.systemPrompt !== undefined && (_jsxs(_Fragment, { children: [_jsx("h3", { children: l.systemPrompt }), content(logicalInput.systemPrompt, "recorded")] })), Array.isArray(logicalInput.messages) && (_jsxs(_Fragment, { children: [_jsx("h3", { children: l.messages }), _jsx("p", { className: "cs-t-muted", children: l.roleHint }), logicalInput.messages.map((message, index) => (_jsxs("div", { className: "cs-t-message", children: [_jsxs("h3", { children: [index + 1, ". ", roleLabel(message)] }), content(message, "recorded")] }, index)))] })), logicalInput.tools !== undefined && (_jsxs("details", { children: [_jsx("summary", { children: l.tools }), content(logicalInput.tools, "recorded")] })), logicalInput.parameters !== undefined && (_jsxs("details", { children: [_jsx("summary", { children: l.parameters }), content(logicalInput.parameters, "recorded")] })), _jsxs("details", { children: [_jsx("summary", { children: l.fullInput }), content(selected.input, "recorded")] })] })) : (content(selected.input, selected.inputState))] }, `${selected.id}:input`), _jsxs("details", { open: true, children: [_jsx("summary", { children: l.output }), content(selected.output, selected.outputState)] }, `${selected.id}:output`), node.kind === "request" && record && (_jsxs("details", { children: [_jsxs("summary", { children: [l.attempts, " (", record.attempts.length, ")"] }), record.attempts.map((attempt) => (_jsxs("button", { type: "button", className: "cs-t-item", onClick: () => setNode({ kind: "attempt", id: attempt.id }), children: [l.attempt, " ", attempt.number, " \u00B7 ", attempt.status, " \u00B7", " ", ms(attempt.startedAt, attempt.endedAt)] }, attempt.id)))] }))] })) : (!detailLoading && _jsx("p", { children: l.select }))] })] })] }));
+}

package/dist/components/model-trace-presentation.d.ts

@@ -0,0 +1,11 @@
+import type { ModelTraceAttempt, ModelTraceCallType, ModelTraceEvent, ModelTraceRecord } from "../model-trace-api.js";
+export type { ModelTraceCallType } from "../model-trace-api.js";
+export declare const modelTraceCallTypes: readonly ["execution", "task", "panel", "summary", "context", "title", "goal", "memory", "suggestion", "speech", "transcription", "audio", "external", "other"];
+/** Classification belongs to the Host; clients never guess intent from Prompt text. */
+export declare function presentModelTraceCallType(value: unknown, lang: "zh" | "en"): {
+    type: ModelTraceCallType;
+    label: "运行 Prompt" | "子任务 Prompt" | "Panel 调用" | "摘要 / 压缩 Prompt" | "上下文整理 Prompt" | "标题生成 Prompt" | "目标检查 Prompt" | "记忆整理 Prompt" | "后续建议 Prompt" | "语音合成" | "语音转写" | "音频处理" | "外部 CLI 入口" | "其他调用" | "Execution Prompt" | "Subtask Prompt" | "Panel call" | "Summary and compaction Prompt" | "Context preparation Prompt" | "Title generation Prompt" | "Goal check Prompt" | "Memory maintenance Prompt" | "Follow-up suggestion Prompt" | "Speech synthesis" | "Speech transcription" | "Audio processing" | "External CLI entry" | "Other call";
+    description: "会话执行时组装的模型输入" | "委派给子任务的模型输入" | "由 Panel 发起的模型调用" | "生成摘要或压缩会话历史" | "整理本次执行所需的上下文" | "生成会话或任务标题" | "检查目标的进展与完成情况" | "提取、整理或更新记忆" | "生成会话的后续操作建议" | "将文本转换为语音" | "将语音转换为文字" | "对音频执行模型推理" | "提交给外部 CLI 的入口输入" | "调用未提供可识别的类型" | "Model input assembled for a session execution" | "Model input for a delegated task" | "A model call initiated by a Panel" | "Summarize or compact session history" | "Prepare context for an execution" | "Generate a session or task title" | "Check progress toward a goal" | "Extract, organize or update memory" | "Suggest next steps for a session" | "Convert text to speech" | "Convert speech to text" | "Run model inference on audio" | "Input submitted to an external CLI" | "The call has no recognized type";
+};
+/** The record keeps a logical snapshot even when a transport attempt contains provider wire. */
+export declare function modelTraceInputBoundary(kind: "request" | "attempt" | "event", selected: ModelTraceRecord | ModelTraceAttempt | ModelTraceEvent, record: ModelTraceRecord): "logical" | "wire" | "external" | "media" | "event";

package/dist/components/model-trace-presentation.js

@@ -0,0 +1,73 @@
+export const modelTraceCallTypes = [
+    "execution",
+    "task",
+    "panel",
+    "summary",
+    "context",
+    "title",
+    "goal",
+    "memory",
+    "suggestion",
+    "speech",
+    "transcription",
+    "audio",
+    "external",
+    "other",
+];
+const callTypes = {
+    zh: {
+        execution: ["运行 Prompt", "会话执行时组装的模型输入"],
+        task: ["子任务 Prompt", "委派给子任务的模型输入"],
+        panel: ["Panel 调用", "由 Panel 发起的模型调用"],
+        summary: ["摘要 / 压缩 Prompt", "生成摘要或压缩会话历史"],
+        context: ["上下文整理 Prompt", "整理本次执行所需的上下文"],
+        title: ["标题生成 Prompt", "生成会话或任务标题"],
+        goal: ["目标检查 Prompt", "检查目标的进展与完成情况"],
+        memory: ["记忆整理 Prompt", "提取、整理或更新记忆"],
+        suggestion: ["后续建议 Prompt", "生成会话的后续操作建议"],
+        speech: ["语音合成", "将文本转换为语音"],
+        transcription: ["语音转写", "将语音转换为文字"],
+        audio: ["音频处理", "对音频执行模型推理"],
+        external: ["外部 CLI 入口", "提交给外部 CLI 的入口输入"],
+        other: ["其他调用", "调用未提供可识别的类型"],
+    },
+    en: {
+        execution: ["Execution Prompt", "Model input assembled for a session execution"],
+        task: ["Subtask Prompt", "Model input for a delegated task"],
+        panel: ["Panel call", "A model call initiated by a Panel"],
+        summary: ["Summary and compaction Prompt", "Summarize or compact session history"],
+        context: ["Context preparation Prompt", "Prepare context for an execution"],
+        title: ["Title generation Prompt", "Generate a session or task title"],
+        goal: ["Goal check Prompt", "Check progress toward a goal"],
+        memory: ["Memory maintenance Prompt", "Extract, organize or update memory"],
+        suggestion: ["Follow-up suggestion Prompt", "Suggest next steps for a session"],
+        speech: ["Speech synthesis", "Convert text to speech"],
+        transcription: ["Speech transcription", "Convert speech to text"],
+        audio: ["Audio processing", "Run model inference on audio"],
+        external: ["External CLI entry", "Input submitted to an external CLI"],
+        other: ["Other call", "The call has no recognized type"],
+    },
+};
+/** Classification belongs to the Host; clients never guess intent from Prompt text. */
+export function presentModelTraceCallType(value, lang) {
+    const type = modelTraceCallTypes.includes(value)
+        ? value
+        : "other";
+    const [label, description] = callTypes[lang][type];
+    return { type, label, description };
+}
+/** The record keeps a logical snapshot even when a transport attempt contains provider wire. */
+export function modelTraceInputBoundary(kind, selected, record) {
+    if (kind === "event")
+        return "event";
+    const attempt = kind === "attempt" ? selected : undefined;
+    if (attempt?.coverage === "provider-wire")
+        return "wire";
+    if (attempt?.coverage === "external-cli-input" ||
+        (kind === "request" && record.attempts.some((item) => item.coverage === "external-cli-input")))
+        return "external";
+    const type = presentModelTraceCallType(record.callType, "en").type;
+    if (type === "speech" || type === "transcription" || type === "audio")
+        return "media";
+    return "logical";
+}