mirror of
https://github.com/fawney19/Aether.git
synced 2026-09-09 20:50:20 +08:00
8200 lines
376 KiB
JavaScript
8200 lines
376 KiB
JavaScript
(function () {
|
||
"use strict";
|
||
|
||
const $ = (id) => document.getElementById(id);
|
||
const embedBridge = window.AetherVscodexEmbed;
|
||
const embeddedInAether = Boolean(embedBridge?.active);
|
||
const i18n = window.VscodexI18n;
|
||
const t = (value) => i18n?.t ? i18n.t(value) : String(value ?? "");
|
||
const uiLocale = () => i18n?.locale?.() || "zh-CN";
|
||
// Translate renderer-owned labels while leaving values supplied by the host
|
||
// (conversation titles, file paths, commands, and message text) untouched.
|
||
const uiText = (zh, en) => uiLocale() === "en-US" ? en : zh;
|
||
const uiWithRaw = (zhPrefix, enPrefix, raw, zhSuffix = "", enSuffix = "") =>
|
||
`${uiText(zhPrefix, enPrefix)}${String(raw ?? "")}${uiText(zhSuffix, enSuffix)}`;
|
||
const appStatusLabel = (value) => {
|
||
const normalized = String(value || "").trim().toLowerCase();
|
||
const labels = {
|
||
ready: "已连接",
|
||
online: "已连接",
|
||
offline: "VS Code 主机未连接",
|
||
waiting_for_host: "等待 VS Code 主机连接",
|
||
app_not_ready: "等待 VS Code 主机连接",
|
||
starting: "正在连接",
|
||
connecting: "正在连接",
|
||
stopped: "已停止",
|
||
};
|
||
return t(labels[normalized] || value || "未知");
|
||
};
|
||
const state = {
|
||
ws: null,
|
||
token: "",
|
||
role: null,
|
||
appReady: false,
|
||
lastSeq: 0,
|
||
// A control snapshot is authoritative for every event up to this
|
||
// sequence. Replayed notifications from the subscribe handshake must not
|
||
// resurrect an already-finished turn or duplicate its transcript.
|
||
lastSnapshotSeq: 0,
|
||
awaitingSnapshot: false,
|
||
threadId: "",
|
||
turnId: "",
|
||
attachMode: false,
|
||
authRequired: null,
|
||
outputSynced: false,
|
||
structuredMessages: [],
|
||
requests: new Map(),
|
||
responding: new Set(),
|
||
commandResults: new Set(),
|
||
reconnectTimer: null,
|
||
embedTicket: "",
|
||
embedWsUrl: "",
|
||
embedDeviceId: "",
|
||
embedTicketRequested: false,
|
||
embedStopped: false,
|
||
activeAssistantBody: null,
|
||
activeAssistantStream: null,
|
||
activeAssistantText: "",
|
||
pendingUserText: "",
|
||
retiredTurnIds: new Set(),
|
||
syncedThreadId: null,
|
||
snapshotNoticeShown: false,
|
||
// Live work items are rendered as updateable transcript entries. The
|
||
// adapter may emit item lifecycle notifications or only output chunks;
|
||
// keeping a small client-side index lets both forms converge on one row.
|
||
activities: new Map(),
|
||
commandDisclosure: new Map(),
|
||
activitySequence: 0,
|
||
activityTimer: null,
|
||
activeAssistantActivityKey: null,
|
||
turnStartedAt: null,
|
||
// The official worked-for row measures from the first work item until
|
||
// the final assistant response starts. Keep this separate from the
|
||
// overall turn clock because the latter also includes queue/approval time.
|
||
turnWorkStartedAt: null,
|
||
finalAssistantStartedAt: null,
|
||
turnStatus: "idle",
|
||
lastTurnDurationMs: null,
|
||
lastWorkedDurationMs: null,
|
||
workedDurationMs: null,
|
||
currentActivity: "idle",
|
||
currentActivityStartedAt: null,
|
||
currentActivityDurationMs: null,
|
||
currentActivityTurnId: "",
|
||
currentModel: "",
|
||
// Empty means the host has not reported an effort yet; null is an
|
||
// authoritative "use the model default" value and must not be serialized
|
||
// as medium on the next turn.
|
||
currentEffort: "",
|
||
sandboxPolicy: "workspace-write",
|
||
approvalPolicy: "on-request",
|
||
tokenUsage: null,
|
||
availableModels: [],
|
||
subagents: [],
|
||
controlMode: "sync",
|
||
modeEpoch: -1,
|
||
capabilities: {
|
||
followsVscodeRoute: true,
|
||
sessionList: false,
|
||
sessionSelect: false,
|
||
sessionCreate: false,
|
||
threadSettings: false,
|
||
},
|
||
modeSnapshotReady: false,
|
||
modeSwitching: false,
|
||
modeCommandId: "",
|
||
requestedControlMode: "",
|
||
modeRequestEpoch: -1,
|
||
sessions: [],
|
||
sessionPickerOpen: false,
|
||
sessionSearch: "",
|
||
sessionFocusedId: "",
|
||
sessionListLoading: false,
|
||
sessionListError: "",
|
||
sessionListCommandId: "",
|
||
sessionSelectCommandId: "",
|
||
newSessionCommandId: "",
|
||
sessionSelectedThreadId: "",
|
||
sessionSwitching: false,
|
||
// Keep the previous view/title visible until the host confirms the target
|
||
// with an authoritative session snapshot. A target can be listed as
|
||
// attachable and still time out during owner hand-off; dropping the old
|
||
// DOM at `session.switching` would leave the browser blank in that case.
|
||
sessionSwitchContext: null,
|
||
modelUpdatePending: false,
|
||
modelAdvancedOpen: false,
|
||
// The official composer keeps the background-agent disclosure closed on
|
||
// first render; the @ hint appears only after the reader expands it.
|
||
subagentsCollapsed: true,
|
||
subagentsExpanded: { active: false, done: false },
|
||
lastRenderedDateKey: "",
|
||
lastRenderedTimestamp: null,
|
||
lastRenderedRole: "",
|
||
hasRenderedUser: false,
|
||
lastDateSeparatorTimestamp: null,
|
||
turnDividers: new Map(),
|
||
// Preserve an explicit worked-for toggle across authoritative snapshot
|
||
// rebuilds. Unset entries follow the official default: the latest turn is
|
||
// open while older completed turns remain compact.
|
||
turnExpansion: new Map(),
|
||
// Legacy attach snapshots may omit turnId on individual projected items.
|
||
// Keep the derived association by object identity for the duration of a
|
||
// snapshot so all grouping/timing paths use the same anonymous turn key.
|
||
structuredTurnKeys: new WeakMap(),
|
||
liveActivityKey: null,
|
||
pendingUserArticle: null,
|
||
outputDistanceFromBottom: 0,
|
||
timelineAnchorLockUntil: 0,
|
||
timelineAnchorCancel: null,
|
||
timelineRevealCancel: null,
|
||
};
|
||
const RESPONDABLE_METHODS = new Set([
|
||
"item/commandExecution/requestApproval",
|
||
"item/fileChange/requestApproval",
|
||
"item/permissions/requestApproval",
|
||
"item/tool/requestUserInput",
|
||
"mcpServer/elicitation/request",
|
||
"applyPatchApproval",
|
||
"execCommandApproval",
|
||
]);
|
||
|
||
const requestKey = (requestId) => `${typeof requestId}:${String(requestId)}`;
|
||
|
||
function normalizeControlMode(value) {
|
||
const normalized = String(value || "").trim().toLowerCase();
|
||
return normalized === "sync" || normalized === "async" ? normalized : "";
|
||
}
|
||
|
||
function normalizedControlCapabilities(value) {
|
||
const source = isRecord(value) ? value : {};
|
||
return {
|
||
followsVscodeRoute: source.followsVscodeRoute === true,
|
||
sessionList: source.sessionList === true,
|
||
sessionSelect: source.sessionSelect === true,
|
||
sessionCreate: source.sessionCreate === true,
|
||
threadSettings: source.threadSettings === true,
|
||
};
|
||
}
|
||
|
||
function sessionControlAllowed(capability) {
|
||
return state.modeSnapshotReady
|
||
&& state.controlMode === "async"
|
||
&& state.capabilities[capability] === true;
|
||
}
|
||
|
||
function threadSettingsAllowed() {
|
||
return state.modeSnapshotReady && state.capabilities.threadSettings === true;
|
||
}
|
||
|
||
function controlModeChangeBlocked() {
|
||
return !state.modeSnapshotReady
|
||
|| state.modeSwitching
|
||
|| state.sessionSwitching
|
||
|| !state.appReady
|
||
|| !state.ws
|
||
|| state.ws.readyState !== WebSocket.OPEN
|
||
|| !["operator", "owner", "host"].includes(String(state.role || ""))
|
||
|| Boolean(state.turnId)
|
||
|| state.turnStartedAt !== null
|
||
|| state.turnStatus === "active"
|
||
|| state.turnStatus === "waiting"
|
||
|| Boolean(state.pendingUserText)
|
||
|| state.requests.size > 0
|
||
|| state.responding.size > 0
|
||
|| Boolean(state.newSessionCommandId)
|
||
|| Boolean(state.sessionListCommandId)
|
||
|| Boolean(state.sessionSelectCommandId)
|
||
|| state.modelUpdatePending;
|
||
}
|
||
|
||
function clearControlModeRequest() {
|
||
state.modeSwitching = false;
|
||
state.modeCommandId = "";
|
||
state.requestedControlMode = "";
|
||
state.modeRequestEpoch = -1;
|
||
}
|
||
|
||
function renderControlMode() {
|
||
const control = $("controlModeSwitch");
|
||
if (!control) return;
|
||
const listAllowed = sessionControlAllowed("sessionList");
|
||
const createAllowed = sessionControlAllowed("sessionCreate");
|
||
const settingsAllowed = threadSettingsAllowed();
|
||
const blocked = controlModeChangeBlocked();
|
||
control.dataset.mode = state.controlMode;
|
||
control.dataset.epoch = String(state.modeEpoch);
|
||
control.dataset.switching = String(state.modeSwitching);
|
||
control.setAttribute("aria-label", t("控制模式"));
|
||
control.setAttribute("aria-busy", String(state.modeSwitching));
|
||
for (const button of control.querySelectorAll("[data-control-mode]")) {
|
||
const mode = normalizeControlMode(button.dataset.controlMode);
|
||
const current = mode === state.controlMode;
|
||
const pending = state.modeSwitching && mode === state.requestedControlMode;
|
||
button.textContent = t(mode === "async" ? "异步" : "同步");
|
||
button.title = t(mode === "async" ? "异步模式可独立管理会话" : "同步模式跟随 VS Code 当前会话");
|
||
button.setAttribute("aria-pressed", String(current));
|
||
button.dataset.pending = String(pending);
|
||
button.disabled = blocked || current;
|
||
}
|
||
|
||
const sessionPickerButton = $("sessionPickerButton");
|
||
if (sessionPickerButton) {
|
||
sessionPickerButton.disabled = !listAllowed || state.modeSwitching || state.sessionSwitching;
|
||
sessionPickerButton.setAttribute("aria-disabled", String(sessionPickerButton.disabled));
|
||
}
|
||
for (const id of ["backButton", "historyButton"]) {
|
||
const button = $(id);
|
||
if (button) button.hidden = !listAllowed;
|
||
}
|
||
const newSessionButton = $("newSessionButton");
|
||
if (newSessionButton) newSessionButton.hidden = !createAllowed;
|
||
const sessionsMenuItem = document.querySelector('[data-menu-action="sessions"]');
|
||
if (sessionsMenuItem) sessionsMenuItem.hidden = !listAllowed;
|
||
const refresh = $("sessionPickerRefresh");
|
||
if (refresh) refresh.disabled = !listAllowed || state.modeSwitching;
|
||
if (!listAllowed && state.sessionPickerOpen) setSessionPicker(false);
|
||
|
||
for (const action of document.querySelectorAll('[data-settings-action="model"], [data-settings-action="permission"]')) {
|
||
action.disabled = !settingsAllowed || state.modeSwitching || state.sessionSwitching;
|
||
}
|
||
for (const id of ["modelPickerButton", "permissionChip"]) {
|
||
const button = $(id);
|
||
if (button) button.disabled = !settingsAllowed || state.modeSwitching || state.sessionSwitching;
|
||
}
|
||
if (!settingsAllowed) {
|
||
setModelMenu(false);
|
||
setPermissionMenu(false);
|
||
}
|
||
}
|
||
|
||
function applyControlModeSnapshot(metadata) {
|
||
if (!isRecord(metadata)) return false;
|
||
const mode = normalizeControlMode(metadata.controlMode);
|
||
const epoch = finiteNumber(metadata.modeEpoch);
|
||
if (!mode || epoch === null || (state.modeSnapshotReady && epoch < state.modeEpoch)) return false;
|
||
const wasSwitching = state.modeSwitching;
|
||
const requestedMode = state.requestedControlMode;
|
||
const requestEpoch = state.modeRequestEpoch;
|
||
state.controlMode = mode;
|
||
state.modeEpoch = epoch;
|
||
state.capabilities = normalizedControlCapabilities(metadata.capabilities);
|
||
state.modeSnapshotReady = true;
|
||
const requestResolved = wasSwitching && (epoch > requestEpoch || mode === requestedMode);
|
||
if (requestResolved) {
|
||
clearControlModeRequest();
|
||
setConversationStatus(mode === requestedMode ? "控制模式已切换" : "控制模式切换失败", mode === requestedMode ? "ready" : "warning");
|
||
}
|
||
updateIds();
|
||
return true;
|
||
}
|
||
|
||
function resolveRequestKey(requestId) {
|
||
const exact = requestKey(requestId);
|
||
if (state.requests.has(exact)) return exact;
|
||
const text = String(requestId);
|
||
const candidates = [...state.requests]
|
||
.filter(([, request]) => String(request.requestId) === text)
|
||
.map(([key]) => key);
|
||
return candidates.length === 1 ? candidates[0] : exact;
|
||
}
|
||
|
||
function shouldFollowOutput(output) {
|
||
return output.scrollHeight - output.scrollTop - output.clientHeight <= 24;
|
||
}
|
||
|
||
const disclosureAnimations = new WeakMap();
|
||
const activityAnimations = new WeakMap();
|
||
const commandAnimations = new WeakMap();
|
||
|
||
function motionDuration(value = 220) {
|
||
try {
|
||
if (window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches) return 0;
|
||
} catch {
|
||
// Older embedded webviews may not expose matchMedia.
|
||
}
|
||
return Math.max(0, Number(value) || 0);
|
||
}
|
||
|
||
function motionClock() {
|
||
return typeof performance === "object" && typeof performance.now === "function"
|
||
? performance.now()
|
||
: Date.now();
|
||
}
|
||
|
||
function scheduleFrame(callback) {
|
||
if (typeof requestAnimationFrame === "function") return requestAnimationFrame(callback);
|
||
return setTimeout(callback, 0);
|
||
}
|
||
|
||
function cancelFrame(frame) {
|
||
if (frame === null || frame === undefined) return;
|
||
if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame);
|
||
clearTimeout(frame);
|
||
}
|
||
|
||
function runMeasuredCssTransition(element, from, to, duration, onFinish) {
|
||
if (!element) return null;
|
||
const priorTransition = element.style.transition;
|
||
let frame = null;
|
||
let timer = null;
|
||
let cancelled = false;
|
||
const setStyles = (values) => {
|
||
for (const [property, value] of Object.entries(values)) element.style[property] = String(value);
|
||
};
|
||
const finish = () => {
|
||
if (cancelled) return;
|
||
cancelled = true;
|
||
cancelFrame(frame);
|
||
frame = null;
|
||
if (timer !== null) clearTimeout(timer);
|
||
timer = null;
|
||
element.style.transition = priorTransition;
|
||
onFinish?.();
|
||
};
|
||
const controller = {
|
||
cancel() {
|
||
if (cancelled) return;
|
||
cancelled = true;
|
||
cancelFrame(frame);
|
||
frame = null;
|
||
if (timer !== null) clearTimeout(timer);
|
||
timer = null;
|
||
element.style.transition = priorTransition;
|
||
},
|
||
};
|
||
const properties = Object.keys(to).map((property) => property.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`));
|
||
element.style.transition = properties
|
||
.map((property) => `${property} ${duration}ms cubic-bezier(.33,1,.68,1)`)
|
||
.join(", ");
|
||
setStyles(from);
|
||
// Force a layout boundary before moving to the measured target. This is
|
||
// the fallback for embedded Chromium builds without Element.animate().
|
||
void element.offsetHeight;
|
||
frame = scheduleFrame(() => {
|
||
frame = null;
|
||
if (cancelled) return;
|
||
setStyles(to);
|
||
});
|
||
timer = setTimeout(finish, duration + 55);
|
||
return controller;
|
||
}
|
||
|
||
// Keep the element nearest the reader at the same viewport coordinate while
|
||
// a disclosure or streamed row changes height. This mirrors the official
|
||
// preserve-timeline-anchor-position helper and avoids bottom-relative jumps
|
||
// when the reader is inspecting an earlier turn.
|
||
function preserveTimelineAnchor(anchor, duration = 250) {
|
||
const target = anchor?.nodeType === 1 ? anchor : null;
|
||
const output = target?.closest?.(".chat-scroll") || $("output");
|
||
if (!target || !output || !target.isConnected || !output.isConnected) return;
|
||
if (typeof state.timelineAnchorCancel === "function") state.timelineAnchorCancel();
|
||
const initialTop = target.getBoundingClientRect().top;
|
||
if (!Number.isFinite(initialTop)) return;
|
||
const deadline = motionClock() + duration + 120;
|
||
state.timelineAnchorLockUntil = Math.max(state.timelineAnchorLockUntil || 0, deadline);
|
||
let frame = null;
|
||
let timer = null;
|
||
let disposed = false;
|
||
const adjust = () => {
|
||
if (disposed || !target.isConnected || !output.isConnected) return;
|
||
const delta = target.getBoundingClientRect().top - initialTop;
|
||
if (Number.isFinite(delta) && Math.abs(delta) >= 0.1) {
|
||
const maxScroll = Math.max(0, output.scrollHeight - output.clientHeight);
|
||
output.scrollTop = Math.max(0, Math.min(maxScroll, output.scrollTop + delta));
|
||
updateScrollToBottom(output);
|
||
}
|
||
// A disclosure can change height without producing a ResizeObserver
|
||
// callback on older Chromium builds. Keep one frame queued for the full
|
||
// measured transition so the scrollbar and reader anchor move together.
|
||
if (motionClock() < deadline) schedule();
|
||
};
|
||
const schedule = () => {
|
||
if (disposed || frame !== null) return;
|
||
frame = scheduleFrame(() => {
|
||
frame = null;
|
||
adjust();
|
||
});
|
||
};
|
||
const immediate = () => {
|
||
if (frame !== null) {
|
||
cancelFrame(frame);
|
||
frame = null;
|
||
}
|
||
adjust();
|
||
schedule();
|
||
};
|
||
const observed = target.closest("[data-turn-key]") || target.closest(".message") || target;
|
||
let observer = null;
|
||
if (typeof ResizeObserver === "function") {
|
||
observer = new ResizeObserver(immediate);
|
||
observer.observe(observed);
|
||
if (observed !== target) observer.observe(target);
|
||
}
|
||
schedule();
|
||
const finish = () => {
|
||
if (disposed) return;
|
||
disposed = true;
|
||
cancelFrame(frame);
|
||
frame = null;
|
||
if (timer !== null) clearTimeout(timer);
|
||
timer = null;
|
||
observer?.disconnect();
|
||
if (state.timelineAnchorCancel === finish) state.timelineAnchorCancel = null;
|
||
};
|
||
state.timelineAnchorCancel = finish;
|
||
timer = setTimeout(finish, Math.max(250, duration + 150));
|
||
}
|
||
|
||
function setDisclosureBodyState(details, expanded) {
|
||
const body = details?.querySelector?.(":scope > .details-body");
|
||
if (!body) return;
|
||
body.style.display = "block";
|
||
body.style.height = expanded ? "auto" : "0px";
|
||
body.style.opacity = expanded ? "1" : "0";
|
||
body.style.overflow = expanded ? "" : "hidden";
|
||
body.style.pointerEvents = expanded ? "auto" : "none";
|
||
body.dataset.disclosureState = expanded ? "expanded" : "collapsed";
|
||
details.dataset.expanded = String(Boolean(expanded));
|
||
details.querySelector("summary")?.setAttribute("aria-expanded", String(Boolean(expanded)));
|
||
}
|
||
|
||
function animateDisclosureBody(details, expanded, options = {}) {
|
||
const body = details?.querySelector?.(":scope > .details-body");
|
||
if (!body) return;
|
||
const previous = disclosureAnimations.get(body);
|
||
if (previous) {
|
||
try { previous.commitStyles?.(); } catch { /* animation may already be finished */ }
|
||
previous.cancel();
|
||
}
|
||
disclosureAnimations.delete(body);
|
||
const next = Boolean(expanded);
|
||
details.dataset.expanded = String(next);
|
||
details.dataset.animating = "true";
|
||
body.style.display = "block";
|
||
const duration = motionDuration(options.duration ?? 220);
|
||
const computed = getComputedStyle(body);
|
||
const currentHeight = Math.max(0, body.getBoundingClientRect().height || 0);
|
||
const currentOpacity = Number.parseFloat(computed.opacity);
|
||
const fromOpacity = Number.isFinite(currentOpacity) ? currentOpacity : (next ? 0 : 1);
|
||
if (options.immediate || duration === 0) {
|
||
setDisclosureBodyState(details, next);
|
||
details.dataset.animating = "false";
|
||
return;
|
||
}
|
||
let targetHeight = 0;
|
||
if (next) {
|
||
body.style.height = "auto";
|
||
body.style.opacity = "1";
|
||
body.style.overflow = "hidden";
|
||
targetHeight = Math.max(0, body.getBoundingClientRect().height || body.scrollHeight || 0);
|
||
body.style.height = `${currentHeight}px`;
|
||
} else {
|
||
body.style.height = `${currentHeight}px`;
|
||
body.style.opacity = String(fromOpacity);
|
||
body.style.overflow = "hidden";
|
||
}
|
||
if (Math.abs(targetHeight - currentHeight) < 0.5 && (next ? fromOpacity >= 0.99 : fromOpacity <= 0.01)) {
|
||
setDisclosureBodyState(details, next);
|
||
details.dataset.animating = "false";
|
||
return;
|
||
}
|
||
if (typeof body.animate !== "function") {
|
||
let transition;
|
||
transition = runMeasuredCssTransition(
|
||
body,
|
||
{ height: `${currentHeight}px`, opacity: fromOpacity },
|
||
{ height: `${targetHeight}px`, opacity: next ? 1 : 0 },
|
||
duration,
|
||
() => {
|
||
if (disclosureAnimations.get(body) !== transition) return;
|
||
disclosureAnimations.delete(body);
|
||
setDisclosureBodyState(details, next);
|
||
details.dataset.animating = "false";
|
||
},
|
||
);
|
||
if (transition) disclosureAnimations.set(body, transition);
|
||
return;
|
||
}
|
||
const animation = body.animate([
|
||
{ height: `${currentHeight}px`, opacity: fromOpacity },
|
||
{ height: `${targetHeight}px`, opacity: next ? 1 : 0 },
|
||
], { duration, easing: "cubic-bezier(.33,1,.68,1)", fill: "forwards" });
|
||
disclosureAnimations.set(body, animation);
|
||
animation.addEventListener("finish", () => {
|
||
if (disclosureAnimations.get(body) !== animation) return;
|
||
disclosureAnimations.delete(body);
|
||
setDisclosureBodyState(details, next);
|
||
details.dataset.animating = "false";
|
||
// `fill: forwards` keeps the animation in the cascade after finish.
|
||
// Release it only after the stable inline state is written, otherwise a
|
||
// later open can still measure the previous collapsed height (zero).
|
||
animation.cancel();
|
||
}, { once: true });
|
||
animation.addEventListener("cancel", () => {
|
||
if (disclosureAnimations.get(body) === animation) disclosureAnimations.delete(body);
|
||
}, { once: true });
|
||
}
|
||
|
||
function installDisclosure(details, initiallyOpen) {
|
||
if (!details || details.dataset.disclosureInstalled === "true") return;
|
||
const summary = details.querySelector(":scope > summary");
|
||
const body = details.querySelector(":scope > .details-body");
|
||
if (!summary || !body) return;
|
||
details.dataset.disclosureInstalled = "true";
|
||
// Keep the native details element mounted. The summary still supplies the
|
||
// familiar keyboard/focus semantics, while the body itself is animated
|
||
// with measured height so a close does not jump the transcript.
|
||
details.open = true;
|
||
setDisclosureBodyState(details, Boolean(initiallyOpen));
|
||
summary.addEventListener("click", (event) => {
|
||
event.preventDefault();
|
||
setDetailsExpanded(details, !isDetailsExpanded(details));
|
||
}, true);
|
||
details.addEventListener("toggle", () => {
|
||
// A browser/plugin script may still assign `.open = false`; restore the
|
||
// mounted shell and leave the visual state under our measured body.
|
||
if (!details.open && !details.__codexRestoring) {
|
||
details.__codexRestoring = true;
|
||
details.open = true;
|
||
details.__codexRestoring = false;
|
||
}
|
||
});
|
||
}
|
||
|
||
function isDetailsExpanded(details) {
|
||
if (!details) return false;
|
||
if (details.dataset.expanded !== undefined) return details.dataset.expanded === "true";
|
||
return details.open === true;
|
||
}
|
||
|
||
function setDetailsExpanded(details, expanded, options = {}) {
|
||
if (!details) return;
|
||
const next = Boolean(expanded);
|
||
const previous = isDetailsExpanded(details);
|
||
const installed = details.dataset.disclosureInstalled === "true";
|
||
if (!installed) {
|
||
details.open = next;
|
||
return;
|
||
}
|
||
if (previous === next && !options.force) {
|
||
if (options.immediate) animateDisclosureBody(details, next, { immediate: true });
|
||
return;
|
||
}
|
||
details.dataset.expanded = String(next);
|
||
if (options.preserve !== false && !options.immediate) preserveTimelineAnchor(details, options.duration ?? 230);
|
||
animateDisclosureBody(details, next, { immediate: Boolean(options.immediate), duration: options.duration });
|
||
if (next && !options.immediate && options.reveal !== false) {
|
||
scheduleTimelineReveal(details.querySelector(":scope > .details-body") || details, options.duration ?? 220);
|
||
}
|
||
}
|
||
|
||
function animateActivityArticle(article, expanded, options = {}) {
|
||
if (!article) return;
|
||
const previous = activityAnimations.get(article);
|
||
if (previous) {
|
||
try { previous.commitStyles?.(); } catch { /* animation may already be finished */ }
|
||
previous.cancel();
|
||
}
|
||
activityAnimations.delete(article);
|
||
const next = Boolean(expanded);
|
||
const duration = motionDuration(options.duration ?? 230);
|
||
const wasCollapsed = article.classList.contains("turn-collapsed");
|
||
article.dataset.turnExpanded = String(next);
|
||
|
||
// `worked-for` is an outer disclosure. The official renderer removes the
|
||
// whole activity group from layout while it is collapsed, rather than
|
||
// leaving one summary row per command. Animate the article shell itself;
|
||
// nested command/read disclosures keep their own expanded state.
|
||
if (next) article.classList.remove("turn-collapsed");
|
||
article.style.display = "";
|
||
article.style.height = "";
|
||
article.style.opacity = "";
|
||
article.style.visibility = "";
|
||
article.style.pointerEvents = "";
|
||
article.style.overflow = "";
|
||
const currentHeight = Math.max(0, article.getBoundingClientRect().height || 0);
|
||
const naturalHeight = Math.max(0, article.scrollHeight || currentHeight);
|
||
const fromHeight = next && wasCollapsed ? 0 : currentHeight;
|
||
const targetHeight = next ? naturalHeight : 0;
|
||
const fromOpacity = next ? (wasCollapsed ? 0 : 1) : 1;
|
||
const targetOpacity = next ? 1 : 0;
|
||
const finish = () => {
|
||
if (next) {
|
||
article.classList.remove("turn-collapsed");
|
||
article.style.height = "";
|
||
article.style.opacity = "";
|
||
article.style.visibility = "";
|
||
article.style.pointerEvents = "";
|
||
article.style.overflow = "";
|
||
} else {
|
||
article.classList.add("turn-collapsed");
|
||
article.style.height = "0px";
|
||
article.style.opacity = "0";
|
||
article.style.visibility = "hidden";
|
||
article.style.pointerEvents = "none";
|
||
article.style.overflow = "hidden";
|
||
}
|
||
};
|
||
if (options.immediate || duration === 0 || Math.abs(targetHeight - fromHeight) < 0.5) {
|
||
finish();
|
||
return;
|
||
}
|
||
article.style.height = `${fromHeight}px`;
|
||
article.style.opacity = String(fromOpacity);
|
||
article.style.overflow = "hidden";
|
||
if (typeof article.animate !== "function") {
|
||
let transition;
|
||
transition = runMeasuredCssTransition(
|
||
article,
|
||
{ height: `${fromHeight}px`, opacity: fromOpacity },
|
||
{ height: `${targetHeight}px`, opacity: targetOpacity },
|
||
duration,
|
||
() => {
|
||
if (activityAnimations.get(article) !== transition) return;
|
||
activityAnimations.delete(article);
|
||
finish();
|
||
},
|
||
);
|
||
if (transition) activityAnimations.set(article, transition);
|
||
return;
|
||
}
|
||
const animation = article.animate([
|
||
{ height: `${fromHeight}px`, opacity: fromOpacity },
|
||
{ height: `${targetHeight}px`, opacity: targetOpacity },
|
||
], { duration, easing: "cubic-bezier(.33,1,.68,1)", fill: "forwards" });
|
||
activityAnimations.set(article, animation);
|
||
animation.addEventListener("finish", () => {
|
||
if (activityAnimations.get(article) !== animation) return;
|
||
activityAnimations.delete(article);
|
||
finish();
|
||
animation.cancel();
|
||
}, { once: true });
|
||
animation.addEventListener("cancel", () => {
|
||
if (activityAnimations.get(article) === animation) activityAnimations.delete(article);
|
||
}, { once: true });
|
||
}
|
||
|
||
function animateCommandRow(commandRow, expanded, options = {}) {
|
||
if (!commandRow) return;
|
||
const previous = commandAnimations.get(commandRow);
|
||
if (previous) {
|
||
try { previous.commitStyles?.(); } catch { /* animation may already be finished */ }
|
||
previous.cancel();
|
||
}
|
||
commandAnimations.delete(commandRow);
|
||
const next = Boolean(expanded);
|
||
const duration = motionDuration(options.duration ?? 190);
|
||
const fromHeight = Math.max(0, commandRow.getBoundingClientRect().height || 0);
|
||
commandRow.dataset.expanded = String(next);
|
||
commandRow.setAttribute("aria-expanded", String(next));
|
||
commandRow.style.overflow = "hidden";
|
||
commandRow.style.height = "auto";
|
||
const targetHeight = Math.max(0, commandRow.getBoundingClientRect().height || 0);
|
||
if (options.immediate || duration === 0 || Math.abs(targetHeight - fromHeight) < 0.5) {
|
||
commandRow.style.height = "";
|
||
commandRow.style.overflow = "";
|
||
return;
|
||
}
|
||
if (typeof commandRow.animate !== "function") {
|
||
let transition;
|
||
transition = runMeasuredCssTransition(
|
||
commandRow,
|
||
{ height: `${fromHeight}px` },
|
||
{ height: `${targetHeight}px` },
|
||
duration,
|
||
() => {
|
||
if (commandAnimations.get(commandRow) !== transition) return;
|
||
commandAnimations.delete(commandRow);
|
||
commandRow.style.height = "";
|
||
commandRow.style.overflow = "";
|
||
},
|
||
);
|
||
if (transition) commandAnimations.set(commandRow, transition);
|
||
return;
|
||
}
|
||
commandRow.style.height = `${fromHeight}px`;
|
||
const animation = commandRow.animate([
|
||
{ height: `${fromHeight}px` },
|
||
{ height: `${targetHeight}px` },
|
||
], { duration, easing: "cubic-bezier(.33,1,.68,1)", fill: "forwards" });
|
||
commandAnimations.set(commandRow, animation);
|
||
animation.addEventListener("finish", () => {
|
||
if (commandAnimations.get(commandRow) !== animation) return;
|
||
commandAnimations.delete(commandRow);
|
||
commandRow.style.height = "";
|
||
commandRow.style.overflow = "";
|
||
animation.cancel();
|
||
}, { once: true });
|
||
animation.addEventListener("cancel", () => {
|
||
if (commandAnimations.get(commandRow) === animation) commandAnimations.delete(commandRow);
|
||
}, { once: true });
|
||
}
|
||
|
||
function updateScrollToBottom(output = $("output")) {
|
||
const button = $("scrollToBottom");
|
||
if (!button || !output) return;
|
||
const distance = Math.max(0, output.scrollHeight - output.scrollTop - output.clientHeight);
|
||
state.outputDistanceFromBottom = distance;
|
||
const visible = distance > 24;
|
||
const working = state.turnStartedAt !== null || state.turnStatus === "active" || state.turnStatus === "waiting";
|
||
button.dataset.visible = String(visible);
|
||
button.dataset.working = String(working);
|
||
button.setAttribute("aria-label", t(working ? "正在工作，回到最新消息" : "回到最新消息"));
|
||
button.setAttribute("aria-hidden", String(!visible));
|
||
button.tabIndex = visible ? 0 : -1;
|
||
}
|
||
|
||
function scrollOutput(output, force = false) {
|
||
if (!output) return;
|
||
if (force || shouldFollowOutput(output)) {
|
||
if (typeof output.scrollTo === "function") output.scrollTo({ top: output.scrollHeight, behavior: "auto" });
|
||
else output.scrollTop = output.scrollHeight;
|
||
}
|
||
updateScrollToBottom(output);
|
||
}
|
||
|
||
function updateScrollPadding() {
|
||
const output = $("output");
|
||
const panel = document.querySelector(".chat-panel");
|
||
const composer = $("messageForm");
|
||
if (!output || !panel || !composer) return;
|
||
const outputRect = output.getBoundingClientRect();
|
||
const composerRect = composer.getBoundingClientRect();
|
||
// The composer is an overlay in the official panel. Reserve only the
|
||
// portion that actually covers the scroll viewport, plus a small gap.
|
||
const overlap = Math.max(0, Math.ceil(outputRect.bottom - composerRect.top));
|
||
const reserve = Math.max(72, overlap + 16);
|
||
output.style.setProperty("--thread-scroll-padding-bottom", `${reserve}px`);
|
||
panel.style.setProperty("--thread-scroll-padding-bottom", `${reserve}px`);
|
||
updateScrollToBottom(output);
|
||
}
|
||
|
||
function timelineVisibleBounds(output) {
|
||
if (!output) return null;
|
||
const outputRect = output.getBoundingClientRect();
|
||
const composer = $("messageForm");
|
||
const composerRect = composer?.getBoundingClientRect?.();
|
||
const top = outputRect.top + 8;
|
||
const composerTop = composerRect && Number.isFinite(composerRect.top) ? composerRect.top - 10 : outputRect.bottom - 8;
|
||
const bottom = Math.min(outputRect.bottom - 8, composerTop);
|
||
return { top, bottom: Math.max(top, bottom) };
|
||
}
|
||
|
||
// Keep an expanding activity row inside the portion of the transcript that
|
||
// is actually readable above the composer. This runs across the measured
|
||
// height animation because one layout pass is not enough when streamed
|
||
// command output arrives at the same time.
|
||
function ensureTimelineVisible(target) {
|
||
const element = target?.nodeType === 1 ? target : null;
|
||
const output = element?.closest?.(".chat-scroll") || $("output");
|
||
if (!element || !output || !element.isConnected || !output.isConnected) return;
|
||
const bounds = timelineVisibleBounds(output);
|
||
if (!bounds) return;
|
||
const rect = element.getBoundingClientRect();
|
||
let delta = 0;
|
||
if (rect.top < bounds.top) delta = rect.top - bounds.top;
|
||
else if (rect.bottom > bounds.bottom) delta = rect.bottom - bounds.bottom;
|
||
if (!Number.isFinite(delta) || Math.abs(delta) < 0.25) return;
|
||
const maxScroll = Math.max(0, output.scrollHeight - output.clientHeight);
|
||
output.scrollTop = Math.max(0, Math.min(maxScroll, output.scrollTop + delta));
|
||
updateScrollToBottom(output);
|
||
}
|
||
|
||
function scheduleTimelineReveal(target, duration = 220) {
|
||
const element = target?.nodeType === 1 ? target : null;
|
||
if (!element) return;
|
||
if (typeof state.timelineRevealCancel === "function") state.timelineRevealCancel();
|
||
const deadline = motionClock() + motionDuration(duration) + 90;
|
||
let frame = null;
|
||
let timer = null;
|
||
let disposed = false;
|
||
const tick = () => {
|
||
if (disposed) return;
|
||
frame = null;
|
||
ensureTimelineVisible(element);
|
||
if (motionClock() < deadline) frame = scheduleFrame(tick);
|
||
};
|
||
const cancel = () => {
|
||
if (disposed) return;
|
||
disposed = true;
|
||
cancelFrame(frame);
|
||
frame = null;
|
||
if (timer !== null) clearTimeout(timer);
|
||
timer = null;
|
||
if (state.timelineRevealCancel === cancel) state.timelineRevealCancel = null;
|
||
};
|
||
state.timelineRevealCancel = cancel;
|
||
tick();
|
||
timer = setTimeout(cancel, Math.max(180, motionDuration(duration) + 130));
|
||
}
|
||
|
||
function comparableText(value) {
|
||
return String(value ?? "").replace(/\s+/g, " ").trim();
|
||
}
|
||
|
||
function hasRenderedMessage(text, turnId, role) {
|
||
const target = comparableText(text);
|
||
if (!target) return false;
|
||
const output = $("output");
|
||
if (!output) return false;
|
||
return [...output.querySelectorAll(`.message.${role}`)].some((article) => {
|
||
if (turnId && article.dataset.turnId && article.dataset.turnId !== String(turnId)) return false;
|
||
return comparableText(article.dataset.rawText) === target;
|
||
});
|
||
}
|
||
|
||
function hasRenderedCompletedMessage(text, turnId, role) {
|
||
const target = comparableText(text);
|
||
if (!target) return false;
|
||
const output = $("output");
|
||
if (!output) return false;
|
||
return [...output.querySelectorAll(`.message.${role}`)].some((article) => {
|
||
if (article.classList.contains("streaming")) return false;
|
||
if (turnId && article.dataset.turnId && article.dataset.turnId !== String(turnId)) return false;
|
||
const raw = comparableText(article.dataset.rawText);
|
||
return raw === target || raw.includes(target) || target.includes(raw);
|
||
});
|
||
}
|
||
|
||
function appendInlineMarkdown(parent, source) {
|
||
const pattern = /(\[[^\]]+\]\(https?:\/\/[^)\s]+\)|`[^`\n]+`|\*\*[^*\n]+\*\*|__[^_\n]+__|~~[^~\n]+~~|\*[^*\n]+\*|_[^_\n]+_)/g;
|
||
let cursor = 0;
|
||
const appendText = (value) => {
|
||
const parts = String(value).split("\n");
|
||
parts.forEach((part, index) => {
|
||
if (part) parent.append(document.createTextNode(part));
|
||
if (index < parts.length - 1) parent.append(document.createElement("br"));
|
||
});
|
||
};
|
||
for (const match of String(source).matchAll(pattern)) {
|
||
if (match.index > cursor) appendText(String(source).slice(cursor, match.index));
|
||
const token = match[0];
|
||
if (token.startsWith("[") && token.endsWith(")")) {
|
||
const split = token.match(/^\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)$/);
|
||
if (split) {
|
||
const link = document.createElement("a");
|
||
link.href = split[2];
|
||
link.target = "_blank";
|
||
link.rel = "noopener noreferrer";
|
||
link.textContent = split[1];
|
||
parent.append(link);
|
||
} else appendText(token);
|
||
} else if (token.startsWith("`") && token.endsWith("`")) {
|
||
const code = document.createElement("code");
|
||
code.textContent = token.slice(1, -1);
|
||
parent.append(code);
|
||
} else if (token.startsWith("**") || token.startsWith("__")) {
|
||
const strong = document.createElement("strong");
|
||
strong.textContent = token.slice(2, -2);
|
||
parent.append(strong);
|
||
} else if (token.startsWith("~~")) {
|
||
const deleted = document.createElement("del");
|
||
deleted.textContent = token.slice(2, -2);
|
||
parent.append(deleted);
|
||
} else if (token.startsWith("*") || token.startsWith("_")) {
|
||
const emphasis = document.createElement("em");
|
||
emphasis.textContent = token.slice(1, -1);
|
||
parent.append(emphasis);
|
||
} else appendText(token);
|
||
cursor = match.index + token.length;
|
||
}
|
||
if (cursor < String(source).length) appendText(String(source).slice(cursor));
|
||
}
|
||
|
||
function tableCells(line) {
|
||
let value = String(line || "").trim();
|
||
if (value.startsWith("|")) value = value.slice(1);
|
||
if (value.endsWith("|")) value = value.slice(0, -1);
|
||
return value.split("|").map((cell) => cell.trim());
|
||
}
|
||
|
||
function isTableDivider(line) {
|
||
const cells = tableCells(line);
|
||
return cells.length > 0 && cells.every((cell) => /^:?-{3,}:?$/.test(cell));
|
||
}
|
||
|
||
function appendTable(container, headerLine, bodyLines) {
|
||
const table = document.createElement("table");
|
||
const thead = document.createElement("thead");
|
||
const header = document.createElement("tr");
|
||
for (const cell of tableCells(headerLine)) {
|
||
const th = document.createElement("th");
|
||
appendInlineMarkdown(th, cell);
|
||
header.append(th);
|
||
}
|
||
thead.append(header);
|
||
table.append(thead);
|
||
const tbody = document.createElement("tbody");
|
||
for (const line of bodyLines) {
|
||
const row = document.createElement("tr");
|
||
for (const cell of tableCells(line)) {
|
||
const td = document.createElement("td");
|
||
appendInlineMarkdown(td, cell);
|
||
row.append(td);
|
||
}
|
||
tbody.append(row);
|
||
}
|
||
table.append(tbody);
|
||
container.append(table);
|
||
}
|
||
|
||
/**
|
||
* Render the small, safe Markdown subset used by Codex messages. The
|
||
* official webview uses a full Markdown/ProseMirror pipeline; the relay
|
||
* intentionally keeps this browser-side renderer dependency-free and never
|
||
* assigns untrusted text to innerHTML.
|
||
*/
|
||
function renderMarkdown(container, source) {
|
||
container.replaceChildren();
|
||
const lines = String(source ?? "").replace(/\r\n?/g, "\n").split("\n");
|
||
let index = 0;
|
||
const addParagraph = (paragraph) => {
|
||
if (!paragraph.length) return;
|
||
const element = document.createElement("p");
|
||
appendInlineMarkdown(element, paragraph.join("\n"));
|
||
container.append(element);
|
||
};
|
||
while (index < lines.length) {
|
||
const line = lines[index];
|
||
if (!line.trim()) { index += 1; continue; }
|
||
const fence = line.match(/^\s*```\s*([\w.+-]*)\s*$/);
|
||
if (fence) {
|
||
index += 1;
|
||
const codeLines = [];
|
||
while (index < lines.length && !/^\s*```\s*$/.test(lines[index])) codeLines.push(lines[index++]);
|
||
if (index < lines.length) index += 1;
|
||
const pre = document.createElement("pre");
|
||
const code = document.createElement("code");
|
||
if (fence[1]) code.dataset.language = fence[1];
|
||
code.textContent = codeLines.join("\n");
|
||
pre.append(code);
|
||
container.append(pre);
|
||
continue;
|
||
}
|
||
if (index + 1 < lines.length && line.includes("|") && isTableDivider(lines[index + 1])) {
|
||
const body = [];
|
||
index += 2;
|
||
while (index < lines.length && lines[index].trim() && lines[index].includes("|")) body.push(lines[index++]);
|
||
appendTable(container, line, body);
|
||
continue;
|
||
}
|
||
if (/^\s*(?:---+|___+|\*\*\*+)\s*$/.test(line)) {
|
||
container.append(document.createElement("hr"));
|
||
index += 1;
|
||
continue;
|
||
}
|
||
const heading = line.match(/^\s*(#{1,3})\s+(.+?)\s*#*$/);
|
||
if (heading) {
|
||
const element = document.createElement(`h${heading[1].length}`);
|
||
appendInlineMarkdown(element, heading[2]);
|
||
container.append(element);
|
||
index += 1;
|
||
continue;
|
||
}
|
||
if (/^\s*>\s?/.test(line)) {
|
||
const quote = document.createElement("blockquote");
|
||
while (index < lines.length && /^\s*>\s?/.test(lines[index])) {
|
||
const paragraph = document.createElement("p");
|
||
appendInlineMarkdown(paragraph, lines[index].replace(/^\s*>\s?/, ""));
|
||
quote.append(paragraph);
|
||
index += 1;
|
||
}
|
||
container.append(quote);
|
||
continue;
|
||
}
|
||
const list = line.match(/^\s*([-*+]|\d+[.)])\s+(.+)$/);
|
||
if (list) {
|
||
const ordered = /^\d/.test(list[1]);
|
||
const listElement = document.createElement(ordered ? "ol" : "ul");
|
||
while (index < lines.length) {
|
||
const item = lines[index].match(/^\s*([-*+]|\d+[.)])\s+(.+)$/);
|
||
if (!item || /^\d/.test(item[1]) !== ordered) break;
|
||
const li = document.createElement("li");
|
||
const task = item[2].match(/^\[([ xX])\]\s+(.+)$/);
|
||
if (task) {
|
||
li.className = "task-list-item";
|
||
const checkbox = document.createElement("input");
|
||
checkbox.type = "checkbox";
|
||
checkbox.checked = task[1].toLowerCase() === "x";
|
||
checkbox.disabled = true;
|
||
checkbox.setAttribute("aria-label", t(checkbox.checked ? "已完成" : "未完成"));
|
||
li.append(checkbox);
|
||
appendInlineMarkdown(li, task[2]);
|
||
} else appendInlineMarkdown(li, item[2]);
|
||
listElement.append(li);
|
||
index += 1;
|
||
}
|
||
container.append(listElement);
|
||
continue;
|
||
}
|
||
const paragraph = [line];
|
||
index += 1;
|
||
while (index < lines.length
|
||
&& lines[index].trim()
|
||
&& !/^\s*```/.test(lines[index])
|
||
&& !/^\s*(#{1,3})\s+/.test(lines[index])
|
||
&& !/^\s*>\s?/.test(lines[index])
|
||
&& !/^\s*([-*+]|\d+[.)])\s+/.test(lines[index])) {
|
||
paragraph.push(lines[index++]);
|
||
}
|
||
addParagraph(paragraph);
|
||
}
|
||
}
|
||
|
||
function renderMessageBody(body, text, role, tone, kind) {
|
||
const value = String(text ?? "");
|
||
body.dataset.rawText = value;
|
||
// User-authored prompts use the same safe Markdown subset as assistant
|
||
// messages. Tool/status rows stay literal so command output cannot be
|
||
// mistaken for formatted content.
|
||
const markdownRole = role === "assistant" || role === "user"
|
||
|| kind === "reasoning" || kind === "plan" || kind === "subagent" || kind === "commentary";
|
||
body.classList.toggle("markdown-body", markdownRole && tone !== "meta" && tone !== "error" && kind !== "tool");
|
||
body.classList.toggle("diff-body", kind === "edit");
|
||
if (kind === "edit") {
|
||
body.replaceChildren();
|
||
const output = document.createElement("pre");
|
||
output.className = "diff-output";
|
||
for (const line of value.replace(/\r\n?/g, "\n").split("\n")) {
|
||
const row = document.createElement("span");
|
||
row.className = line.startsWith("+") && !line.startsWith("+++")
|
||
? "diff-line added"
|
||
: line.startsWith("-") && !line.startsWith("---")
|
||
? "diff-line removed"
|
||
: line.startsWith("@@") || line.startsWith("diff ") || line.startsWith("[")
|
||
? "diff-line context"
|
||
: "diff-line";
|
||
row.textContent = line || " ";
|
||
output.append(row);
|
||
}
|
||
body.append(output);
|
||
} else if (kind === "tool" || kind === "read") body.textContent = value;
|
||
else if (markdownRole && tone !== "meta" && tone !== "error") renderMarkdown(body, value);
|
||
else body.textContent = value;
|
||
}
|
||
|
||
function createTerminalIcon() {
|
||
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||
svg.className.baseVal = "activity-summary-icon terminal-icon";
|
||
svg.setAttribute("viewBox", "0 0 16 16");
|
||
svg.setAttribute("aria-hidden", "true");
|
||
const frame = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
||
frame.setAttribute("x", "2.25");
|
||
frame.setAttribute("y", "2.75");
|
||
frame.setAttribute("width", "11.5");
|
||
frame.setAttribute("height", "10.5");
|
||
frame.setAttribute("rx", "1.4");
|
||
const prompt = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||
prompt.setAttribute("d", "m4.5 6 2 2-2 2");
|
||
const cursor = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||
cursor.setAttribute("d", "M8.5 10h2.5");
|
||
svg.append(frame, prompt, cursor);
|
||
return svg;
|
||
}
|
||
|
||
function createSubagentIcon() {
|
||
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||
svg.className.baseVal = "activity-summary-icon subagent-summary-icon";
|
||
svg.setAttribute("viewBox", "0 0 24 24");
|
||
svg.setAttribute("aria-hidden", "true");
|
||
// The installed Codex webview uses the filled blossom mark for both
|
||
// sub-agent activity rows and the composer agent rail. Keep the path
|
||
// inline so the standalone relay page does not depend on VS Code's URI
|
||
// resolver or on an extension-owned asset path.
|
||
const mark = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||
mark.setAttribute("fill", "currentColor");
|
||
mark.setAttribute("d", "M13.795 23.856q-1.188 0-2.256-.448a6.1 6.1 0 0 1-1.9-1.247 5.8 5.8 0 0 1-1.875.306 5.8 5.8 0 0 1-2.944-.777 6.1 6.1 0 0 1-2.184-2.12q-.807-1.34-.808-2.99 0-.682.19-1.482a6.3 6.3 0 0 1-1.472-2.002 5.76 5.76 0 0 1 .024-4.85q.546-1.177 1.52-2.024a5.5 5.5 0 0 1 2.303-1.2A5.55 5.55 0 0 1 5.485 2.62 6.06 6.06 0 0 1 7.575.925 5.85 5.85 0 0 1 10.21.313q1.187 0 2.255.447a6.1 6.1 0 0 1 1.9 1.248 5.8 5.8 0 0 1 1.875-.306q1.59 0 2.944.776a5.9 5.9 0 0 1 2.16 2.12q.832 1.34.832 2.99 0 .682-.19 1.483a6.2 6.2 0 0 1 1.472 2.024q.522 1.13.522 2.378 0 1.272-.546 2.449a6.1 6.1 0 0 1-1.543 2.048 5.45 5.45 0 0 1-2.28 1.177 5.4 5.4 0 0 1-1.115 2.402 5.8 5.8 0 0 1-2.066 1.695 5.85 5.85 0 0 1-2.635.612M7.93 20.913q1.188 0 2.066-.495l4.463-2.542a.52.52 0 0 0 .238-.448v-2.024L8.95 18.676a.97.97 0 0 1-1.044 0L3.419 16.11a.7.7 0 0 1-.024.165v.282q0 1.201.57 2.213.594.99 1.639 1.554 1.044.59 2.326.589m.238-3.838q.143.07.26.07a.46.46 0 0 0 .238-.07l1.781-1.012-5.722-3.296q-.522-.306-.522-.918v-5.11a4.27 4.27 0 0 0-1.9 1.602 4.13 4.13 0 0 0-.712 2.354q0 1.155.594 2.213.593 1.06 1.543 1.601zm5.627 5.227q1.258 0 2.279-.565a4.25 4.25 0 0 0 1.614-1.554q.594-.99.594-2.213v-5.085q0-.283-.237-.424l-1.805-1.036v6.568q0 .613-.522.919l-4.487 2.566q1.163.825 2.564.824m.902-8.617v-3.202l-2.683-1.507-2.707 1.507v3.202l2.707 1.507zm-6.933-7.51q0-.612.522-.918l4.488-2.567a4.34 4.34 0 0 0-2.564-.824q-1.26 0-2.28.565a4.25 4.25 0 0 0-1.614 1.554q-.57.99-.57 2.213v5.062q0 .283.237.447l1.781 1.036zm12.061 11.253a4.13 4.13 0 0 0 1.876-1.6 4.2 4.2 0 0 0 .712-2.355q0-1.154-.593-2.213-.594-1.06-1.544-1.6l-4.44-2.543q-.142-.095-.26-.071a.46.46 0 0 0-.238.07l-1.78.99 5.745 3.319q.26.141.38.377a.9.9 0 0 1 .142.518zm-4.772-11.96q.522-.33 1.045 0l4.51 2.614v-.424q0-1.13-.57-2.142a4.1 4.1 0 0 0-1.59-1.648q-1.02-.613-2.374-.613-1.187 0-2.066.495L9.545 6.292a.52.52 0 0 0-.238.448v2.025z");
|
||
svg.append(mark);
|
||
return svg;
|
||
}
|
||
|
||
function createReadIcon() {
|
||
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||
svg.className.baseVal = "activity-summary-icon read-summary-icon";
|
||
svg.setAttribute("viewBox", "0 0 16 16");
|
||
svg.setAttribute("aria-hidden", "true");
|
||
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||
path.setAttribute("d", "M2.5 4.5h4l1.2 1.4h5.8v6.2c0 .8-.5 1.4-1.3 1.4H3.8c-.8 0-1.3-.6-1.3-1.4V4.5Z");
|
||
const top = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||
top.setAttribute("d", "M2.5 6h11");
|
||
svg.append(path, top);
|
||
return svg;
|
||
}
|
||
|
||
// The official sub-agent activity renderer keeps the agent name in a
|
||
// bordered chip and places the lifecycle text beside it. Keeping those two
|
||
// nodes separate also lets a running row update only its status without
|
||
// replacing the blossom icon or the accessible label.
|
||
function setSubagentSummary(summary, name, statusText = "") {
|
||
if (!summary) return;
|
||
let chip = summary.querySelector(".subagent-summary-chip");
|
||
let label = chip?.querySelector(".subagent-summary-label");
|
||
let status = summary.querySelector(".subagent-summary-status");
|
||
if (!chip || !label || !status) {
|
||
chip = document.createElement("span");
|
||
chip.className = "subagent-summary-chip";
|
||
const icon = createSubagentIcon();
|
||
label = document.createElement("span");
|
||
label.className = "subagent-summary-label";
|
||
chip.append(icon, label);
|
||
status = document.createElement("span");
|
||
status.className = "subagent-summary-status";
|
||
summary.replaceChildren(chip, status);
|
||
}
|
||
label.textContent = String(name || t("子代理"));
|
||
status.textContent = statusText ? t(statusText) : "";
|
||
summary.setAttribute("aria-label", [label.textContent, status.textContent].filter(Boolean).join(" "));
|
||
}
|
||
|
||
function setActivitySummary(summary, text, kind = "") {
|
||
if (!summary) return;
|
||
if (kind === "subagent") {
|
||
const value = String(text || "");
|
||
const match = value.match(/^(.*?)(?:\s+(已开始工作|已完成|失败|已中断|等待中|处理中|Started working|Completed|Failed|Interrupted|Waiting|Working))$/);
|
||
setSubagentSummary(summary, match ? match[1] : value || t("子代理"), match ? t(match[2]) : "");
|
||
return;
|
||
}
|
||
if (kind !== "tool" && kind !== "read" && kind !== "subagent") {
|
||
summary.textContent = String(text || "");
|
||
return;
|
||
}
|
||
let icon = summary.querySelector(".activity-summary-icon");
|
||
let label = summary.querySelector(".activity-summary-label");
|
||
if (!icon || !label) {
|
||
icon = kind === "subagent" ? createSubagentIcon() : kind === "read" ? createReadIcon() : createTerminalIcon();
|
||
label = document.createElement("span");
|
||
label.className = "activity-summary-label";
|
||
summary.replaceChildren(icon, label);
|
||
}
|
||
label.textContent = String(text || "");
|
||
}
|
||
|
||
function stripShellQuotes(value) {
|
||
let text = String(value || "").trim();
|
||
let changed = true;
|
||
while (changed) {
|
||
changed = false;
|
||
if (text.startsWith("$'") && text.endsWith("'")) {
|
||
text = text.slice(2, -1).replace(/\\'/g, "'");
|
||
changed = true;
|
||
} else if ((text.startsWith("'") && text.endsWith("'"))
|
||
|| (text.startsWith('"') && text.endsWith('"'))) {
|
||
const quoted = text.startsWith('"');
|
||
text = text.slice(1, -1);
|
||
if (quoted) text = text.replace(/\\"/g, '"');
|
||
changed = true;
|
||
}
|
||
}
|
||
return text.trim();
|
||
}
|
||
|
||
// The official command renderer hides the shell bootstrap used by the IPC
|
||
// runner (`/bin/zsh -lc '…'`) and shows the actual user command instead.
|
||
function terminalCommandText(value) {
|
||
const command = stripShellQuotes(value);
|
||
const match = command.match(/^(?:.*[/\\])?(?:bash|cmd(?:\.exe)?|fish|powershell(?:\.exe)?|pwsh(?:\.exe)?|sh|zsh)\s+-lc\s+([\s\S]+)$/i);
|
||
return match ? stripShellQuotes(match[1]) : command;
|
||
}
|
||
|
||
function addMessageActions(article, enabled = true) {
|
||
// Tool/reasoning rows have their own disclosure controls and should not
|
||
// grow a second action rail. Editing an earlier turn is intentionally not
|
||
// exposed until the relay can perform the official branch/edit operation.
|
||
if (!enabled || (!article.classList.contains("user") && !article.classList.contains("assistant"))) return null;
|
||
if (article.classList.contains("assistant") && article.classList.contains("streaming")) return null;
|
||
const actions = document.createElement("div");
|
||
actions.className = "message-actions";
|
||
const copy = document.createElement("button");
|
||
copy.type = "button";
|
||
copy.className = "message-action";
|
||
copy.title = t("复制消息");
|
||
copy.setAttribute("aria-label", t("复制消息"));
|
||
const setCopyIcon = (copied = false) => {
|
||
copy.replaceChildren();
|
||
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||
svg.setAttribute("viewBox", "0 0 16 16");
|
||
svg.setAttribute("aria-hidden", "true");
|
||
if (copied) {
|
||
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||
path.setAttribute("d", "m3.5 8.2 2.7 2.7 6.3-6.3");
|
||
svg.append(path);
|
||
} else {
|
||
const back = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||
back.setAttribute("d", "M5.5 5.5V4c0-.8.7-1.5 1.5-1.5h5c.8 0 1.5.7 1.5 1.5v5c0 .8-.7 1.5-1.5 1.5h-1.5");
|
||
const front = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
||
front.setAttribute("x", "2.5");
|
||
front.setAttribute("y", "5.5");
|
||
front.setAttribute("width", "7.5");
|
||
front.setAttribute("height", "7.5");
|
||
front.setAttribute("rx", "1.2");
|
||
svg.append(back, front);
|
||
}
|
||
copy.append(svg);
|
||
};
|
||
setCopyIcon();
|
||
copy.addEventListener("click", async () => {
|
||
const value = article.dataset.rawText || "";
|
||
try {
|
||
await navigator.clipboard?.writeText(value);
|
||
setCopyIcon(true);
|
||
setTimeout(() => { setCopyIcon(false); }, 1_200);
|
||
} catch {
|
||
copy.textContent = "!";
|
||
}
|
||
});
|
||
actions.append(copy);
|
||
article.append(actions);
|
||
return actions;
|
||
}
|
||
|
||
function appendMessage(text, role = "assistant", tone = "text", meta = "", options = {}) {
|
||
if (text === undefined || text === null) return null;
|
||
const output = $("output");
|
||
const follow = shouldFollowOutput(output);
|
||
const article = document.createElement("article");
|
||
article.className = `message ${role}${tone && tone !== "text" ? ` ${tone}` : ""}`;
|
||
if (options.kind) article.dataset.kind = options.kind;
|
||
if (options.status) article.dataset.status = String(options.status);
|
||
if (options.turnId) article.dataset.turnId = String(options.turnId);
|
||
if (options.structuredKey) article.dataset.structuredKey = String(options.structuredKey);
|
||
if (options.activityKey) article.dataset.activityKey = String(options.activityKey);
|
||
if (options.itemId !== undefined && options.itemId !== null) article.dataset.itemId = String(options.itemId);
|
||
if (options.itemType) article.dataset.itemType = String(options.itemType);
|
||
if (options.agentThreadId) article.dataset.agentThreadId = String(options.agentThreadId);
|
||
if (options.timestamp) {
|
||
const parsedTimestamp = timestampMs(options.timestamp);
|
||
if (parsedTimestamp !== null) article.dataset.timestamp = String(parsedTimestamp);
|
||
}
|
||
article.dataset.rawText = String(text);
|
||
const content = document.createElement("div");
|
||
content.className = "message-content";
|
||
let body = document.createElement("div");
|
||
body.className = "message-body";
|
||
let details = null;
|
||
const initiallyOpen = options.open !== false;
|
||
if (options.collapsible) {
|
||
details = document.createElement("details");
|
||
details.className = `message-details ${options.kind || ""}`;
|
||
const summary = document.createElement("summary");
|
||
const summaryText = options.summary || options.label || t("详情");
|
||
if (options.kind === "tool" || options.kind === "read" || options.kind === "subagent") {
|
||
setActivitySummary(summary, summaryText, options.kind);
|
||
if (options.command) summary.title = terminalCommandText(options.command);
|
||
} else {
|
||
summary.textContent = summaryText;
|
||
if (options.command && !options.summary) {
|
||
// Translate only the renderer-owned label. The command is host data
|
||
// and must remain byte-for-byte unchanged in every locale.
|
||
summary.textContent = `${t(options.label || "命令")} · ${String(options.command)}`;
|
||
summary.title = String(options.command);
|
||
}
|
||
}
|
||
body.classList.add("details-body");
|
||
details.append(summary, body);
|
||
content.append(details);
|
||
} else content.append(body);
|
||
renderMessageBody(body, text, role, tone, options.kind);
|
||
article.append(content);
|
||
const actions = addMessageActions(article, options.showActions !== false);
|
||
const metaParts = [];
|
||
if (meta) metaParts.push(String(meta));
|
||
if (options.showTimestamp === true && options.timestamp) {
|
||
const timestamp = formatMessageTime(options.timestamp);
|
||
if (timestamp) metaParts.push(timestamp);
|
||
}
|
||
if (options.showDuration === true && options.durationMs !== undefined && options.durationMs !== null) {
|
||
const duration = formatDuration(options.durationMs);
|
||
if (duration) metaParts.push(uiWithRaw("用时 ", "Worked for ", duration));
|
||
}
|
||
if (metaParts.length) {
|
||
const stamp = document.createElement("div");
|
||
stamp.className = "message-meta";
|
||
stamp.textContent = metaParts.join(" · ");
|
||
if (actions) actions.prepend(stamp);
|
||
else content.append(stamp);
|
||
}
|
||
output.append(article);
|
||
if (details) installDisclosure(details, initiallyOpen);
|
||
if (follow) scrollOutput(output, true);
|
||
return { article, content: body, wrapper: content };
|
||
}
|
||
|
||
function appendDateSeparator(timestamp, options = {}) {
|
||
const parsedTimestamp = timestampMs(timestamp);
|
||
const role = String(options.role || "user");
|
||
// The official timestamp projection treats an item without a usable time
|
||
// as an adjacency break. Do not carry the previous role/time across an
|
||
// untimestamped item, otherwise a later assistant message can inherit an
|
||
// unrelated 10-minute/1-hour gap.
|
||
if (parsedTimestamp === null) {
|
||
state.lastRenderedDateKey = "";
|
||
state.lastRenderedTimestamp = null;
|
||
state.lastRenderedRole = "";
|
||
if (role === "user") state.hasRenderedUser = true;
|
||
return;
|
||
}
|
||
const previousTimestamp = state.lastRenderedTimestamp;
|
||
const previousRole = state.lastRenderedRole;
|
||
const hour = 60 * 60 * 1000;
|
||
const tenMinutes = 10 * 60 * 1000;
|
||
const gap = previousTimestamp === null ? null : parsedTimestamp - previousTimestamp;
|
||
// This mirrors the official timestamps projection: a first/next user turn
|
||
// is separated only after a substantial pause, while consecutive assistant
|
||
// entries can be separated after a shorter gap.
|
||
const threshold = previousRole === "assistant"
|
||
? role === "user" ? hour : tenMinutes
|
||
: Infinity;
|
||
const firstUserIsOld = !state.hasRenderedUser && role === "user"
|
||
&& Date.now() - parsedTimestamp > hour;
|
||
// The official local composer always gives the first user message a
|
||
// centered date/time anchor, even when that message was sent today. It is
|
||
// also the visual boundary that separates a freshly attached history from
|
||
// the input composer, so do not hide it merely because the turn is recent.
|
||
const firstUserTurn = !state.hasRenderedUser && role === "user";
|
||
const show = options.force === true || options.breaksPreviousAdjacency === true || firstUserIsOld
|
||
|| firstUserTurn
|
||
|| (gap !== null && gap > 0 && previousRole === "assistant" && gap > threshold);
|
||
if (show && state.lastDateSeparatorTimestamp !== parsedTimestamp) {
|
||
const label = formatMessageDate(parsedTimestamp);
|
||
if (label) {
|
||
const separator = document.createElement("div");
|
||
separator.className = "date-separator";
|
||
separator.setAttribute("role", "separator");
|
||
separator.setAttribute("aria-label", label);
|
||
const time = document.createElement("time");
|
||
time.dateTime = new Date(parsedTimestamp).toISOString();
|
||
const splitAt = label.lastIndexOf(" ");
|
||
if (splitAt > 0 && splitAt < label.length - 1) {
|
||
const dateLabel = document.createElement("span");
|
||
dateLabel.className = "date-label";
|
||
dateLabel.textContent = label.slice(0, splitAt);
|
||
const timeLabel = document.createElement("span");
|
||
timeLabel.className = "date-time";
|
||
timeLabel.textContent = label.slice(splitAt + 1);
|
||
time.append(dateLabel, " ", timeLabel);
|
||
} else time.textContent = label;
|
||
separator.append(time);
|
||
$("output").append(separator);
|
||
state.lastDateSeparatorTimestamp = parsedTimestamp;
|
||
}
|
||
}
|
||
state.lastRenderedDateKey = messageDateKey(parsedTimestamp);
|
||
state.lastRenderedTimestamp = parsedTimestamp;
|
||
state.lastRenderedRole = role;
|
||
if (role === "user") state.hasRenderedUser = true;
|
||
}
|
||
|
||
function turnDividerLabel(status, durationMs) {
|
||
const duration = elapsedDuration(durationMs);
|
||
const normalized = normalizeActivityStatus(status, "completed");
|
||
if (normalized === "interrupted") return duration
|
||
? uiWithRaw("你在 ", "You stopped after ", duration, " 后停止了", "")
|
||
: uiText("你停止了工作", "You stopped working");
|
||
if (normalized === "failed") return duration
|
||
? uiWithRaw("执行失败 · ", "Action failed · ", duration)
|
||
: uiText("执行失败", "Action failed");
|
||
if (normalized === "inProgress") {
|
||
const visible = elapsedDuration(durationMs);
|
||
return visible ? uiWithRaw("用时 ", "Worked for ", visible) : uiText("正在处理", "Working");
|
||
}
|
||
return duration ? uiWithRaw("用时 ", "Worked for ", duration) : uiText("已完成", "Completed");
|
||
}
|
||
|
||
// A worked-for disclosure only has meaning when the turn owns at least one
|
||
// concrete activity row. Keep this cleanup centralized so a transient
|
||
// status-only row cannot leave an empty divider behind after it is retired.
|
||
function removeEmptyTurnDivider(turnId) {
|
||
const key = String(turnId || "");
|
||
if (!key) return;
|
||
const output = $("output");
|
||
if (!output) return;
|
||
const hasActivity = [...output.querySelectorAll(".message.activity")]
|
||
.some((entry) => entry.dataset.turnId === key);
|
||
if (hasActivity) return;
|
||
const divider = state.turnDividers.get(key)
|
||
|| [...output.querySelectorAll(".turn-divider")]
|
||
.find((entry) => entry.dataset.turnId === key)
|
||
|| null;
|
||
if (divider?.parentNode) divider.remove();
|
||
state.turnDividers.delete(key);
|
||
}
|
||
|
||
function retireActivity(activity) {
|
||
if (!activity) return;
|
||
const key = String(activity.key || "");
|
||
const turnId = String(activity.turnId || "");
|
||
if (key && state.activities.get(key) === activity) state.activities.delete(key);
|
||
if (key) state.commandDisclosure.delete(key);
|
||
if (state.liveActivityKey === key) state.liveActivityKey = null;
|
||
if (state.activeAssistantActivityKey === key) {
|
||
state.activeAssistantBody = null;
|
||
state.activeAssistantStream = null;
|
||
state.activeAssistantText = "";
|
||
state.activeAssistantActivityKey = null;
|
||
}
|
||
if (activity.article?.parentNode) activity.article.remove();
|
||
removeEmptyTurnDivider(turnId);
|
||
stopActivityTimerIfIdle();
|
||
updateScrollToBottom($("output"));
|
||
}
|
||
|
||
function retireStatusOnlyActivities(turnId = "") {
|
||
const key = String(turnId || "");
|
||
for (const activity of [...state.activities.values()]) {
|
||
if (activity.statusOnly !== true || activity.concrete === true) continue;
|
||
if (key && activity.turnId && activity.turnId !== key) continue;
|
||
retireActivity(activity);
|
||
}
|
||
}
|
||
|
||
function appendTurnDivider(turnId, status = "completed", durationMs, beforeArticle = null, options = {}) {
|
||
const key = String(turnId || `anonymous-${state.activitySequence}`);
|
||
const output = $("output");
|
||
const autoPosition = beforeArticle === null;
|
||
const turnEntries = [...output.querySelectorAll(".message")]
|
||
.filter((entry) => entry.dataset.turnId === key);
|
||
// The official worked-for disclosure owns the activity portion of a turn.
|
||
// A final assistant answer remains visible below the disclosure; commentary
|
||
// and concrete work rows are the entries that collapse underneath it.
|
||
const firstTurnActivity = turnEntries.find((entry) => entry.classList.contains("activity")) || null;
|
||
// Do not manufacture an empty worked-for row for a final-only turn. This
|
||
// can happen when completion metadata arrives before any item lifecycle
|
||
// event, or when a transient status row has just been retired.
|
||
if (!firstTurnActivity) {
|
||
removeEmptyTurnDivider(key);
|
||
return null;
|
||
}
|
||
const firstTurnContent = firstTurnActivity
|
||
|| turnEntries.find((entry) => !entry.classList.contains("user"))
|
||
|| null;
|
||
if (firstTurnContent) beforeArticle = firstTurnContent;
|
||
else if (autoPosition) beforeArticle = turnEntries.at(-1) || null;
|
||
let divider = state.turnDividers.get(key);
|
||
if (!divider) {
|
||
divider = [...output.querySelectorAll(".turn-divider")].find((entry) => entry.dataset.turnId === key) || null;
|
||
}
|
||
if (!divider) {
|
||
divider = document.createElement("div");
|
||
divider.className = "turn-divider";
|
||
divider.dataset.turnId = key;
|
||
const button = document.createElement("button");
|
||
button.type = "button";
|
||
button.className = "turn-divider-toggle";
|
||
const initialStatus = normalizeActivityStatus(status, "completed");
|
||
const rememberedExpansion = state.turnExpansion.get(key);
|
||
const initialExpanded = rememberedExpansion !== undefined
|
||
? rememberedExpansion
|
||
: options.defaultExpanded === true || initialStatus === "inProgress";
|
||
if (rememberedExpansion !== undefined || options.defaultExpanded === true) {
|
||
button.dataset.userToggled = rememberedExpansion !== undefined ? "true" : "false";
|
||
}
|
||
button.setAttribute("aria-expanded", String(initialExpanded));
|
||
const label = document.createElement("span");
|
||
label.className = "turn-divider-label";
|
||
const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||
icon.setAttribute("viewBox", "0 0 16 16");
|
||
icon.setAttribute("aria-hidden", "true");
|
||
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||
path.setAttribute("d", "m6 3 5 5-5 5");
|
||
icon.append(path);
|
||
button.append(label, icon);
|
||
const rule = document.createElement("div");
|
||
rule.className = "turn-divider-rule";
|
||
divider.append(button, rule);
|
||
button.addEventListener("click", () => {
|
||
const expanded = button.getAttribute("aria-expanded") === "true";
|
||
const next = !expanded;
|
||
// Hydration may choose an expanded latest turn for parity with the
|
||
// official panel. Once the reader explicitly toggles it, preserve
|
||
// that choice across subsequent structured snapshots.
|
||
button.dataset.userToggled = "true";
|
||
state.turnExpansion.set(key, next);
|
||
button.setAttribute("aria-expanded", String(next));
|
||
setTurnActivityVisibility(key, next);
|
||
if (next) {
|
||
const firstVisibleEntry = [...output.querySelectorAll(".message.activity")]
|
||
.filter((entry) => entry.dataset.turnId === key)
|
||
.find((entry) => !entry.classList.contains("turn-collapsed"));
|
||
if (firstVisibleEntry) scheduleTimelineReveal(firstVisibleEntry, 280);
|
||
}
|
||
});
|
||
if (beforeArticle && beforeArticle.parentNode === output) output.insertBefore(divider, beforeArticle);
|
||
else output.append(divider);
|
||
state.turnDividers.set(key, divider);
|
||
} else if (beforeArticle === false && divider.parentNode === output && output.lastElementChild !== divider) {
|
||
// An additional activity can arrive after an already-created live
|
||
// divider. Explicit `false` means place the divider at the current tail.
|
||
output.append(divider);
|
||
} else if (beforeArticle && beforeArticle.parentNode === output && divider !== beforeArticle) {
|
||
// Completion can arrive after the final assistant article. Move the
|
||
// existing disclosure instead of creating a second one at the tail.
|
||
output.insertBefore(divider, beforeArticle);
|
||
}
|
||
const label = divider.querySelector(".turn-divider-label");
|
||
if (durationMs !== null && durationMs !== undefined && finiteNumber(durationMs) !== null) {
|
||
divider.dataset.durationMs = String(Math.max(0, Number(durationMs)));
|
||
}
|
||
const storedDuration = finiteNumber(durationMs, divider.dataset.durationMs);
|
||
const liveDuration = durationMs === null || durationMs === undefined
|
||
? key === state.turnId && state.turnWorkStartedAt !== null
|
||
? Math.max(0, Date.now() - state.turnWorkStartedAt)
|
||
: storedDuration
|
||
: storedDuration;
|
||
if (label) label.textContent = turnDividerLabel(status, liveDuration);
|
||
const normalizedStatus = normalizeActivityStatus(status, "completed");
|
||
divider.dataset.status = normalizedStatus;
|
||
const toggle = divider.querySelector(".turn-divider-toggle");
|
||
if (options.defaultExpanded === true && toggle?.dataset.userToggled !== "true") {
|
||
toggle.dataset.defaultExpanded = "true";
|
||
}
|
||
if (normalizedStatus === "inProgress" && toggle?.dataset.userToggled !== "true") {
|
||
toggle.setAttribute("aria-expanded", "true");
|
||
}
|
||
const rememberedExpansion = state.turnExpansion.get(key);
|
||
// The latest completed turn is expanded on first render in the official
|
||
// panel. A remembered click always wins, including an explicit collapse.
|
||
const expanded = rememberedExpansion !== undefined
|
||
? rememberedExpansion
|
||
: toggle?.dataset.userToggled === "true"
|
||
? toggle.getAttribute("aria-expanded") === "true"
|
||
: normalizedStatus === "inProgress" || toggle?.dataset.defaultExpanded === "true";
|
||
setTurnActivityVisibility(key, expanded);
|
||
return divider;
|
||
}
|
||
|
||
function appendCompletedTurnDivider(turnId, status = "completed", durationMs) {
|
||
const key = String(turnId || "");
|
||
if (!key) return null;
|
||
const output = $("output");
|
||
if (!output) return null;
|
||
const hasTurnMessage = [...output.querySelectorAll(".message")]
|
||
.some((article) => article.dataset.turnId === key);
|
||
if (!hasTurnMessage) return null;
|
||
const hasTurnActivity = [...output.querySelectorAll(".message.activity")]
|
||
.some((article) => article.dataset.turnId === key);
|
||
// A final assistant article by itself is not a worked-for group. The
|
||
// official UI shows its duration in the assistant block without an empty
|
||
// disclosure row above it.
|
||
if (!hasTurnActivity) return null;
|
||
const firstContent = [...output.querySelectorAll(".message")]
|
||
.find((entry) => entry.dataset.turnId === key && entry.classList.contains("activity"))
|
||
|| [...output.querySelectorAll(".message")]
|
||
.find((entry) => entry.dataset.turnId === key && !entry.classList.contains("user"))
|
||
|| null;
|
||
return appendTurnDivider(key, status, durationMs, firstContent);
|
||
}
|
||
|
||
// Structured snapshots can append bookkeeping or collaboration items after
|
||
// the final assistant item. Reconcile the outer worked-for boundary after
|
||
// hydration so every activity row remains in the same disclosure group.
|
||
function reconcileTurnDividers() {
|
||
const output = $("output");
|
||
if (!output) return;
|
||
const turnIds = new Set(
|
||
[...output.querySelectorAll(".message.activity")]
|
||
.map((article) => article.dataset.turnId)
|
||
.filter(Boolean),
|
||
);
|
||
for (const key of turnIds) {
|
||
const activities = [...output.querySelectorAll(".message.activity")]
|
||
.filter((article) => article.dataset.turnId === key);
|
||
if (!activities.length) continue;
|
||
let divider = state.turnDividers.get(key)
|
||
|| [...output.querySelectorAll(".turn-divider")].find((entry) => entry.dataset.turnId === key)
|
||
|| null;
|
||
const finalAssistant = [...output.querySelectorAll(".message")]
|
||
.filter((article) => article.dataset.turnId === key
|
||
&& !article.classList.contains("activity")
|
||
&& article.dataset.kind === "assistant")
|
||
.at(-1)
|
||
|| null;
|
||
const activeTurn = key === state.turnId
|
||
&& state.turnStartedAt !== null
|
||
&& ["active", "waiting"].includes(state.turnStatus);
|
||
if (!divider) {
|
||
divider = appendTurnDivider(key, activeTurn ? "inProgress" : "completed", state.workedDurationMs, activities[0]);
|
||
} else {
|
||
if (activities[0].parentNode === output && divider.parentNode === output && divider !== activities[0]) {
|
||
output.insertBefore(divider, activities[0]);
|
||
}
|
||
const toggle = divider.querySelector(".turn-divider-toggle");
|
||
if (toggle && toggle.dataset.userToggled !== "true") {
|
||
const rememberedExpansion = state.turnExpansion.get(key);
|
||
toggle.setAttribute("aria-expanded", String(rememberedExpansion !== undefined
|
||
? rememberedExpansion
|
||
: activeTurn));
|
||
}
|
||
const status = activeTurn ? "inProgress" : normalizeActivityStatus(divider.dataset.status, "completed");
|
||
divider.dataset.status = status;
|
||
setTurnActivityVisibility(key, toggle?.getAttribute("aria-expanded") === "true");
|
||
}
|
||
// Keep a divider before the activity group even when a final answer was
|
||
// rendered first. The answer itself intentionally stays outside it.
|
||
if (divider && activities[0].parentNode === output && divider.nextSibling !== activities[0]) {
|
||
output.insertBefore(divider, activities[0]);
|
||
}
|
||
if (finalAssistant && divider) divider.dataset.hasFinalAssistant = "true";
|
||
if (finalAssistant) {
|
||
// Keep trailing bookkeeping/collaboration rows inside the same outer
|
||
// group. Moving only rows that currently follow the final response
|
||
// preserves the chronological order of the already-correct prefix.
|
||
const trailing = activities.filter((activity) => (
|
||
activity.compareDocumentPosition(finalAssistant) & Node.DOCUMENT_POSITION_PRECEDING
|
||
));
|
||
for (const activity of trailing) output.insertBefore(activity, finalAssistant);
|
||
// The moves above can carry the first activity past the existing
|
||
// disclosure. Re-anchor it after every move so the worked-for button
|
||
// always remains the first node in the activity group.
|
||
if (activities[0].parentNode === output && divider.parentNode === output) {
|
||
output.insertBefore(divider, activities[0]);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function expandLatestTurnActivity() {
|
||
const output = $("output");
|
||
if (!output) return;
|
||
const dividers = [...output.querySelectorAll(".turn-divider")];
|
||
const divider = dividers.at(-1);
|
||
// The latest worked-for group is expanded after a completed snapshot so
|
||
// the reader can see the activity stream immediately. Older groups stay
|
||
// compact, and an explicit user toggle always wins.
|
||
if (!divider) return;
|
||
const toggle = divider.querySelector(".turn-divider-toggle");
|
||
if (!toggle || toggle.dataset.userToggled === "true") return;
|
||
const key = divider.dataset.turnId || "";
|
||
if (!key || ![...output.querySelectorAll(".message.activity")].some((entry) => entry.dataset.turnId === key)) return;
|
||
const rememberedExpansion = state.turnExpansion.get(key);
|
||
const shouldExpand = rememberedExpansion !== undefined
|
||
? rememberedExpansion
|
||
: divider.dataset.status === "inProgress" || divider === dividers.at(-1);
|
||
if (!shouldExpand) return;
|
||
if (toggle.getAttribute("aria-expanded") === "true") return;
|
||
toggle.setAttribute("aria-expanded", "true");
|
||
setTurnActivityVisibility(key, true);
|
||
}
|
||
|
||
function setTurnActivityVisibility(turnId, expanded) {
|
||
const key = String(turnId || "");
|
||
if (!key) return;
|
||
const output = $("output");
|
||
if (!output) return;
|
||
const divider = state.turnDividers.get(key)
|
||
|| [...output.querySelectorAll(".turn-divider")].find((entry) => entry.dataset.turnId === key)
|
||
|| null;
|
||
// Keep the final assistant response and its timestamp/actions mounted.
|
||
// Only rows explicitly marked as activity participate in the outer turn
|
||
// disclosure, matching the official conversation-blocks split.
|
||
const activities = [...output.querySelectorAll(".message.activity")]
|
||
.filter((entry) => entry.dataset.turnId === key);
|
||
if (!activities.length) return;
|
||
const knownState = activities.some((activity) => activity.dataset.turnExpanded !== undefined);
|
||
if (!knownState && !expanded) {
|
||
for (const activity of activities) {
|
||
activity.dataset.turnExpanded = "false";
|
||
animateActivityArticle(activity, false, { immediate: true });
|
||
}
|
||
return;
|
||
}
|
||
if (divider || activities[0]) preserveTimelineAnchor(divider || activities[0], 280);
|
||
for (const activity of activities) {
|
||
const previous = activity.dataset.turnExpanded === "true";
|
||
activity.dataset.turnExpanded = String(Boolean(expanded));
|
||
// The outer worked-for disclosure controls every non-user entry. Each
|
||
// nested command/reasoning disclosure keeps its own state, matching the
|
||
// official panel where opening a completed turn does not open every
|
||
// terminal body at once.
|
||
animateActivityArticle(activity, expanded, {
|
||
immediate: !knownState && !previous,
|
||
fromHeight: expanded && !previous ? 0 : undefined,
|
||
preserve: false,
|
||
});
|
||
}
|
||
if (expanded) revealTerminalOutputs(key);
|
||
}
|
||
|
||
function revealTerminalOutputs(turnId) {
|
||
const key = String(turnId || "");
|
||
if (!key) return;
|
||
requestAnimationFrame(() => {
|
||
const output = $("output");
|
||
if (!output) return;
|
||
for (const activity of output.querySelectorAll(".message.activity")) {
|
||
if (activity.dataset.turnId !== key) continue;
|
||
const terminal = activity.querySelector(".terminal-output");
|
||
if (!terminal || terminal.scrollHeight <= terminal.clientHeight) continue;
|
||
// Hidden turn sections have no layout while hydrated. Once revealed,
|
||
// show the newest terminal lines just like the official reverse list.
|
||
terminal.scrollTop = terminal.scrollHeight;
|
||
updateTerminalOutputFade(terminal);
|
||
}
|
||
});
|
||
}
|
||
|
||
function ensureLiveTurnDivider(turnId) {
|
||
const key = String(turnId || "");
|
||
if (!key) return null;
|
||
const output = $("output");
|
||
const entries = [...output.querySelectorAll(".message")]
|
||
.filter((entry) => entry.dataset.turnId === key);
|
||
const firstContent = entries.find((entry) => entry.classList.contains("activity"))
|
||
|| entries.find((entry) => !entry.classList.contains("user"))
|
||
|| null;
|
||
if (firstContent) return appendTurnDivider(key, "inProgress", null, firstContent);
|
||
return appendTurnDivider(key, "inProgress", null, false);
|
||
}
|
||
|
||
const isRecord = (value) => Boolean(value && typeof value === "object" && !Array.isArray(value));
|
||
|
||
function finiteNumber(...values) {
|
||
for (const value of values) {
|
||
if (value === null || value === undefined || value === "" || typeof value === "boolean") continue;
|
||
const number = Number(value);
|
||
if (Number.isFinite(number)) return number;
|
||
}
|
||
return null;
|
||
}
|
||
|
||
function timestampMs(...values) {
|
||
let value = null;
|
||
for (const candidate of values) {
|
||
if (candidate === null || candidate === undefined || candidate === "" || typeof candidate === "boolean") continue;
|
||
if (typeof candidate === "string" && candidate.trim() && !/^\d+(?:\.\d+)?$/.test(candidate.trim())) {
|
||
const parsed = Date.parse(candidate);
|
||
if (Number.isFinite(parsed)) { value = parsed; break; }
|
||
}
|
||
const numeric = Number(candidate);
|
||
if (Number.isFinite(numeric)) { value = numeric; break; }
|
||
}
|
||
if (value === null || value <= 0) return null;
|
||
// Accept ISO epoch seconds from older followers as well as the current
|
||
// app-server's millisecond fields.
|
||
return value < 100_000_000_000 ? value * 1_000 : value;
|
||
}
|
||
|
||
function workedDurationFor(value, fallback = null) {
|
||
const source = isRecord(value) ? value : {};
|
||
const nestedTurn = isRecord(source.turn) ? source.turn : {};
|
||
const nestedStatus = isRecord(source.status) ? source.status : {};
|
||
const explicit = finiteNumber(
|
||
source.workedDurationMs,
|
||
source.workDurationMs,
|
||
source.workedForMs,
|
||
source.turnWorkedDurationMs,
|
||
source.worked_for_ms,
|
||
nestedTurn.workedDurationMs,
|
||
nestedTurn.workDurationMs,
|
||
nestedTurn.workedForMs,
|
||
nestedStatus.workedDurationMs,
|
||
nestedStatus.workDurationMs,
|
||
);
|
||
if (explicit !== null) return Math.max(0, explicit);
|
||
const started = timestampMs(
|
||
source.firstTurnWorkItemStartedAtMs,
|
||
source.workStartedAtMs,
|
||
source.turnWorkStartedAtMs,
|
||
nestedTurn.firstTurnWorkItemStartedAtMs,
|
||
nestedTurn.workStartedAtMs,
|
||
nestedTurn.turnStartedAtMs,
|
||
);
|
||
const completed = timestampMs(
|
||
source.finalAssistantStartedAtMs,
|
||
source.workCompletedAtMs,
|
||
nestedTurn.finalAssistantStartedAtMs,
|
||
nestedTurn.workCompletedAtMs,
|
||
source.completedAtMs,
|
||
);
|
||
if (started !== null && completed !== null) return Math.max(0, completed - started);
|
||
return finiteNumber(fallback);
|
||
}
|
||
|
||
function formatDuration(value) {
|
||
const duration = finiteNumber(value);
|
||
if (duration === null || duration < 0) return "";
|
||
if (uiLocale() === "en-US") {
|
||
if (duration < 1_000) return `${Math.round(duration)}ms`;
|
||
const totalSeconds = Math.floor(duration / 1_000);
|
||
const minutes = Math.floor(totalSeconds / 60);
|
||
const seconds = totalSeconds % 60;
|
||
if (!minutes) return `${seconds}s`;
|
||
return seconds ? `${minutes}m ${seconds}s` : `${minutes}m`;
|
||
}
|
||
if (duration < 1_000) return `${Math.round(duration)}毫秒`;
|
||
const totalSeconds = Math.floor(duration / 1_000);
|
||
const minutes = Math.floor(totalSeconds / 60);
|
||
const seconds = totalSeconds % 60;
|
||
if (!minutes) return `${seconds}秒`;
|
||
// The Chinese locale in the official panel uses the long form for one
|
||
// minute and the compact form for longer durations.
|
||
const minuteLabel = minutes === 1 ? "1分钟" : `${minutes}分`;
|
||
return seconds ? `${minuteLabel}${seconds}秒` : minuteLabel;
|
||
}
|
||
|
||
// Working indicators in the official panel stay textual until a full
|
||
// second has elapsed. This avoids the visually noisy "0ms"/"1ms" state on
|
||
// every newly-created activity row while preserving precise durations once
|
||
// an operation is complete.
|
||
function elapsedDuration(value) {
|
||
const duration = finiteNumber(value);
|
||
return duration !== null && duration >= 1_000 ? formatDuration(duration) : "";
|
||
}
|
||
|
||
function formatMessageTime(value) {
|
||
const timestamp = timestampMs(value);
|
||
if (timestamp === null) return "";
|
||
try {
|
||
return new Intl.DateTimeFormat(uiLocale(), { hour: "2-digit", minute: "2-digit" }).format(new Date(timestamp));
|
||
} catch {
|
||
return "";
|
||
}
|
||
}
|
||
|
||
function formatMessageDate(value, nowValue = Date.now()) {
|
||
const timestamp = timestampMs(value);
|
||
if (timestamp === null) return "";
|
||
try {
|
||
const date = new Date(timestamp);
|
||
const now = new Date(nowValue);
|
||
// Match the official timestamp separator: compare calendar dates while
|
||
// avoiding DST changes in the local timezone.
|
||
const dateDay = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
|
||
const nowDay = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate());
|
||
const dayDifference = Math.max(0, Math.round((nowDay - dateDay) / 86_400_000));
|
||
const locale = uiLocale();
|
||
const time = new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit" }).format(date);
|
||
if (dayDifference <= 1) {
|
||
try {
|
||
const relative = new Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format(-Math.max(dayDifference, 0), "day");
|
||
return `${relative} ${time}`;
|
||
} catch {
|
||
return `${t(dayDifference === 1 ? "昨天" : "今天")} ${time}`;
|
||
}
|
||
}
|
||
if (dayDifference <= 7 && dayDifference > 0) {
|
||
const weekday = new Intl.DateTimeFormat(locale, { weekday: "long" }).format(date);
|
||
return `${weekday} ${time}`;
|
||
}
|
||
const datePart = dayDifference <= 365
|
||
? new Intl.DateTimeFormat(locale, { month: "short", day: "numeric", weekday: "short" }).format(date)
|
||
: new Intl.DateTimeFormat(locale, { year: "numeric", month: "short", day: "numeric" }).format(date);
|
||
return `${datePart} ${time}`;
|
||
} catch {
|
||
return "";
|
||
}
|
||
}
|
||
|
||
function messageDateKey(value) {
|
||
const timestamp = timestampMs(value);
|
||
if (timestamp === null) return "";
|
||
const date = new Date(timestamp);
|
||
return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
|
||
}
|
||
|
||
function normalizeActivityStatus(value, fallback = "inProgress") {
|
||
const normalized = String(value ?? fallback).replace(/[\s_-]+/g, "").toLowerCase();
|
||
if (["inprogress", "running", "started", "active", "pending"].includes(normalized)) return "inProgress";
|
||
if (["completed", "complete", "success", "succeeded", "done"].includes(normalized)) return "completed";
|
||
if (["failed", "failure", "error"].includes(normalized)) return "failed";
|
||
if (["declined", "denied", "rejected"].includes(normalized)) return "declined";
|
||
if (["interrupted", "cancelled", "canceled", "aborted"].includes(normalized)) return "interrupted";
|
||
return fallback;
|
||
}
|
||
|
||
function activityStatusLabel(status) {
|
||
if (status === "inProgress") return "进行中";
|
||
if (status === "completed") return "已完成";
|
||
if (status === "failed") return "失败";
|
||
if (status === "declined") return "已拒绝";
|
||
if (status === "interrupted") return "已中断";
|
||
return String(status || "");
|
||
}
|
||
|
||
const isRunningActivity = (activity) => activity && activity.status === "inProgress";
|
||
|
||
function eventParams(payload) {
|
||
if (!isRecord(payload)) return {};
|
||
return isRecord(payload.params) ? payload.params : payload;
|
||
}
|
||
|
||
function eventThreadId(payload) {
|
||
const params = eventParams(payload);
|
||
return payload?.threadId || params.threadId || params.thread?.id || params.turn?.threadId || "";
|
||
}
|
||
|
||
function eventTurnId(payload) {
|
||
const params = eventParams(payload);
|
||
return payload?.turnId || params.turnId || params.turn?.id || params.item?.turnId || "";
|
||
}
|
||
|
||
function itemFromPayload(payload) {
|
||
const params = eventParams(payload);
|
||
if (isRecord(params.item)) return params.item;
|
||
if (isRecord(payload?.item)) return payload.item;
|
||
return isRecord(params) && (params.type || params.kind) ? params : {};
|
||
}
|
||
|
||
function normalizedItemType(item) {
|
||
return String(item?.type || item?.kind || "").replace(/[\s/_.-]+/g, "").toLowerCase();
|
||
}
|
||
|
||
function activityKindForItem(item) {
|
||
const type = normalizedItemType(item);
|
||
if (isReadActivity(item)) return "read";
|
||
if (!type) return "";
|
||
if (type.includes("subagent") || type.includes("collabagent")) return "subagent";
|
||
if (type.includes("filechange") || type.includes("patch") || type.includes("edit")) return "edit";
|
||
if (type.includes("reasoning") || type.includes("contextcompaction")) return "reasoning";
|
||
if (type.includes("plan") || type.includes("reviewmode")) return "plan";
|
||
if (type.includes("command") || type.includes("exec") || type.includes("process")) return "tool";
|
||
if (type.includes("tool") || type.includes("mcp") || type.includes("websearch") || type.includes("imageview")) return "tool";
|
||
if (type.includes("usermessage")) return "user";
|
||
if (type.includes("agentmessage") || type.includes("assistantmessage")) return "assistant";
|
||
return "";
|
||
}
|
||
|
||
function activityLabelForItem(item, kind) {
|
||
const type = normalizedItemType(item);
|
||
if (kind === "subagent" || type.includes("subagent") || type.includes("collabagent")) {
|
||
return firstString(item.displayName, item.agentPath, item.action) || "子代理";
|
||
}
|
||
if (type.includes("contextcompaction")) return "整理上下文";
|
||
if (type.includes("websearch")) return "搜索";
|
||
if (type.includes("imageview")) return "查看图像";
|
||
if (type.includes("mcp")) return "MCP 工具";
|
||
if (type.includes("dynamictool")) return "工具";
|
||
if (kind === "edit") return "编辑文件";
|
||
if (kind === "read") return "读取文件";
|
||
if (kind === "plan") return "计划";
|
||
if (kind === "reasoning") return "思考";
|
||
if (kind === "commentary") return "工作说明";
|
||
if (kind === "tool") return "运行命令";
|
||
return "执行步骤";
|
||
}
|
||
|
||
function historyActivitySummary(item, kind, status, duration) {
|
||
const elapsed = duration ? ` · ${duration}` : "";
|
||
if (kind === "subagent") {
|
||
const name = firstString(item.displayName, item.agentPath, item.agentThreadId ? `thread ${item.agentThreadId}` : "") || t("子代理");
|
||
const uiStatus = firstString(item.displayStatus, item.activityKind);
|
||
if (status === "inProgress" || uiStatus === "active" || uiStatus === "updated") return `${name} ${t("已开始工作")}`;
|
||
if (status === "failed") return `${name} ${t("失败")}`;
|
||
if (status === "interrupted") return `${name} ${t("已中断")}`;
|
||
return `${name} ${t("已完成")}`;
|
||
}
|
||
if (kind === "tool" || kind === "read") {
|
||
const command = terminalCommandText(commandText(item));
|
||
const actionSource = String(item.label || "工具");
|
||
const action = t(actionSource);
|
||
const path = firstString(...readPathList(item));
|
||
if (kind === "read" && status === "inProgress") return readSummaryLabel(item, status);
|
||
if (kind === "read" && !command) {
|
||
return readSummaryLabel(item, status);
|
||
}
|
||
if (kind === "read" && status !== "inProgress") {
|
||
// Parsed read/search actions are coalesced by the official renderer
|
||
// into one compact exploration row rather than a path plus a second
|
||
// timed command row.
|
||
if (command) return status === "failed" ? t("读取文件运行命令失败") : status === "interrupted" ? t("已停止读取文件运行命令") : t("已读取文件运行了命令");
|
||
return readSummaryLabel(item, status);
|
||
}
|
||
if (status === "inProgress") return command
|
||
? uiWithRaw("正在运行 ", "Running ", command)
|
||
: uiLocale() === "en-US" ? `Running ${action}` : `正在${action}`;
|
||
if (status === "failed") return command
|
||
? `${uiWithRaw("命令运行失败 · ", "Command failed · ", command)}${elapsed}`
|
||
: `${action}${uiText("失败", " failed")}${elapsed}`;
|
||
if (status === "interrupted") return command
|
||
? `${uiWithRaw("已停止 ", "Stopped ", command)}${elapsed}`
|
||
: `${uiText("已停止", "Stopped ")}${action}${elapsed}`;
|
||
if (command) return duration
|
||
? `${uiWithRaw("已在 ", "Ran ", command, " 内运行 ", " in ")}${duration}`
|
||
: uiWithRaw("已运行 ", "Ran ", command);
|
||
return uiLocale() === "en-US"
|
||
? `Ran ${action}${elapsed}`
|
||
: `已${action}${elapsed}`;
|
||
}
|
||
if (kind === "edit") return status === "inProgress" ? t("正在编辑文件") : `${t("编辑了文件")}${elapsed}`;
|
||
if (kind === "reasoning") return status === "inProgress" ? t("正在思考") : duration ? uiWithRaw("已思考 ", "Thought for ", duration) : t("已完成思考");
|
||
if (kind === "plan") return status === "inProgress" ? t("正在制定计划") : `${t("已完成计划")}${elapsed}`;
|
||
if (kind === "commentary") {
|
||
if (status === "inProgress") return t("正在处理");
|
||
return t("工作说明");
|
||
}
|
||
return "";
|
||
}
|
||
|
||
function textFromValue(value, depth = 0) {
|
||
if (typeof value === "string") return value;
|
||
if (typeof value === "number" || typeof value === "boolean") return String(value);
|
||
if (Array.isArray(value)) {
|
||
const parts = value.map((entry) => textFromValue(entry, depth + 1)).filter(Boolean);
|
||
return parts.length ? parts.join("\n") : "";
|
||
}
|
||
if (!isRecord(value) || depth > 3) return "";
|
||
for (const key of ["text", "value", "output", "stdout", "stderr", "delta", "summary", "message"]) {
|
||
const text = textFromValue(value[key], depth + 1);
|
||
if (text) return text;
|
||
}
|
||
return "";
|
||
}
|
||
|
||
function displayValue(value) {
|
||
const text = textFromValue(value);
|
||
if (text) return text;
|
||
if (value === undefined || value === null) return "";
|
||
try { return JSON.stringify(value, null, 2); } catch { return String(value); }
|
||
}
|
||
|
||
function commandText(item) {
|
||
if (Array.isArray(item.command)) return item.command.map(String).join(" ");
|
||
if (typeof item.command === "string") return item.command;
|
||
if (typeof item.commandLine === "string") return item.commandLine;
|
||
if (Array.isArray(item.commandActions)) {
|
||
return item.commandActions
|
||
.map((action) => isRecord(action) ? action.command || action.description || "" : "")
|
||
.filter(Boolean)
|
||
.join("\n");
|
||
}
|
||
return "";
|
||
}
|
||
|
||
function fileChangesText(changes) {
|
||
if (!Array.isArray(changes)) return displayValue(changes);
|
||
return changes.map((change) => {
|
||
if (!isRecord(change)) return displayValue(change);
|
||
const path = change.path || change.file || change.filePath || change.name || "文件";
|
||
const kind = change.kind || change.type || change.status || "";
|
||
const diff = displayValue(change.diff || change.patch || change.output || change.text);
|
||
const heading = `${kind ? `[${kind}] ` : ""}${path}`;
|
||
return diff ? `${heading}\n${diff}` : heading;
|
||
}).filter(Boolean).join("\n\n");
|
||
}
|
||
|
||
function planText(value) {
|
||
const plan = Array.isArray(value) ? value : value?.plan || value?.steps;
|
||
if (!Array.isArray(plan)) return displayValue(value?.text || value);
|
||
return plan.map((entry) => {
|
||
if (!isRecord(entry)) return `- ${displayValue(entry)}`;
|
||
const status = normalizeActivityStatus(entry.status, "pending");
|
||
const marker = status === "completed" ? "[x]" : status === "inProgress" ? "[~]" : "[ ]";
|
||
const step = entry.step || entry.text || entry.title || entry.description || "步骤";
|
||
return `${marker} ${step}`;
|
||
}).join("\n");
|
||
}
|
||
|
||
function activityHeader(item, kind) {
|
||
// Terminal activities render command/cwd as separate fields below. Keep
|
||
// this helper for non-terminal activity kinds and future item types.
|
||
return "";
|
||
}
|
||
|
||
function activityOutput(item, kind) {
|
||
if (kind === "reasoning") return displayValue(item.summary || item.content || item.text);
|
||
if (kind === "plan") return planText(item.plan || item.steps || item.content || item.text);
|
||
if (kind === "edit") return fileChangesText(item.changes || item.files || item.diff || item.patch || item.output || item.text);
|
||
if (kind === "tool" || kind === "read") {
|
||
if (kind === "read") {
|
||
// Paths are rendered as their own compact exploration rows. Keep only
|
||
// the actual file content here; adapter summaries such as
|
||
// "已读取 ..." must not be repeated inside a Shell block.
|
||
let value = displayValue(item.aggregatedOutput ?? item.output ?? item.stdout ?? item.stderr ?? item.result);
|
||
const summary = firstString(item.text, item.summary);
|
||
if (summary && value === summary) return "";
|
||
if (summary && value.startsWith(`${summary}\n`)) value = value.slice(summary.length + 1);
|
||
return value;
|
||
}
|
||
return displayValue(item.aggregatedOutput ?? item.output ?? item.stdout ?? item.stderr ?? item.result ?? item.error ?? item.text);
|
||
}
|
||
return displayValue(item.text || item.content || item.output);
|
||
}
|
||
|
||
function activityKey(payload, item, kind, explicitKey) {
|
||
if (explicitKey) return explicitKey;
|
||
const params = eventParams(payload);
|
||
const id = item.id ?? params.itemId ?? payload?.itemId;
|
||
const threadId = eventThreadId(payload) || state.threadId || "thread";
|
||
const turnId = eventTurnId(payload) || state.turnId || "turn";
|
||
if (id !== undefined && id !== null) return `${threadId}:${turnId}:${kind}:${typeof id}:${String(id)}`;
|
||
state.activitySequence += 1;
|
||
return `${threadId}:${turnId}:${kind}:anonymous:${state.activitySequence}`;
|
||
}
|
||
|
||
function ensureActivity(key, config = {}) {
|
||
const kind = config.kind || "reasoning";
|
||
let existing = state.activities.get(key);
|
||
if (!existing) {
|
||
const requestedItemId = config.itemId === undefined || config.itemId === null ? "" : String(config.itemId);
|
||
const sameTurn = (entry) => entry.kind === kind
|
||
&& (!config.turnId || !entry.turnId || entry.turnId === String(config.turnId));
|
||
const entries = [...state.activities.entries()].reverse();
|
||
const exact = requestedItemId
|
||
? entries.find(([, entry]) => sameTurn(entry) && entry.itemId === requestedItemId)
|
||
: null;
|
||
// Status snapshots may arrive before the item lifecycle notification.
|
||
// When the concrete item appears, adopt the still-running anonymous row
|
||
// instead of appending a second "正在思考/读取/编辑" entry.
|
||
const anonymous = entries.find(([, entry]) => sameTurn(entry)
|
||
&& entry.anonymous
|
||
&& isRunningActivity(entry));
|
||
const unkeyed = !requestedItemId
|
||
? entries.find(([, entry]) => sameTurn(entry) && !entry.itemId && isRunningActivity(entry))
|
||
: null;
|
||
const match = exact || anonymous || unkeyed;
|
||
if (match) {
|
||
const [oldKey, candidate] = match;
|
||
existing = candidate;
|
||
if (oldKey !== key) {
|
||
state.activities.delete(oldKey);
|
||
existing.key = key;
|
||
existing.article.dataset.activityKey = key;
|
||
if (state.liveActivityKey === oldKey) state.liveActivityKey = key;
|
||
if (state.activeAssistantActivityKey === oldKey) state.activeAssistantActivityKey = key;
|
||
}
|
||
if (requestedItemId && existing.anonymous) {
|
||
existing.itemId = requestedItemId;
|
||
existing.anonymous = false;
|
||
}
|
||
state.activities.set(key, existing);
|
||
}
|
||
}
|
||
if (existing) {
|
||
// A lifecycle event or real output upgrades a transient status row into
|
||
// a concrete activity. Once upgraded, it must survive turn completion;
|
||
// status-only rows are retired when the host reports a terminal state.
|
||
if (config.concrete === true) {
|
||
existing.concrete = true;
|
||
existing.statusOnly = false;
|
||
// Keep the anonymous marker for id-less lifecycle streams so the
|
||
// terminal status path can still close them when the host omits an
|
||
// explicit item/completed event. An identified item is authoritative.
|
||
if (config.itemId !== undefined && config.itemId !== null && String(config.itemId)) {
|
||
existing.anonymous = false;
|
||
}
|
||
} else if (config.statusOnly === true && existing.concrete !== true) {
|
||
existing.statusOnly = true;
|
||
}
|
||
if (config.label) existing.label = config.label;
|
||
if (config.itemId !== undefined) existing.itemId = String(config.itemId);
|
||
if (config.command) existing.command = kind === "tool" || kind === "read" ? terminalCommandText(config.command) : String(config.command);
|
||
if (config.filePath !== undefined) existing.filePath = String(config.filePath || "");
|
||
if (config.cwd !== undefined) existing.cwd = String(config.cwd || "");
|
||
if (config.shellName) existing.shellName = String(config.shellName);
|
||
if (config.agentThreadId !== undefined) existing.agentThreadId = String(config.agentThreadId || "");
|
||
if (config.displayName !== undefined) existing.displayName = String(config.displayName || "");
|
||
if (config.objective !== undefined) existing.objective = String(config.objective || "");
|
||
if (config.activityKind !== undefined) existing.activityKind = String(config.activityKind || "");
|
||
if (config.displayStatus !== undefined) existing.displayStatus = String(config.displayStatus || "");
|
||
if (config.model !== undefined) existing.model = String(config.model || "");
|
||
if (config.action !== undefined) existing.action = String(config.action || "");
|
||
if (config.prompt !== undefined) existing.prompt = String(config.prompt || "");
|
||
if (config.senderThreadId !== undefined) existing.senderThreadId = String(config.senderThreadId || "");
|
||
if (config.receiverThreadIds !== undefined) existing.receiverThreadIds = Array.isArray(config.receiverThreadIds) ? config.receiverThreadIds.map(String) : [];
|
||
if (config.agentsStates !== undefined) existing.agentsStates = isRecord(config.agentsStates) ? config.agentsStates : {};
|
||
if (config.canInteract !== undefined) existing.canInteract = config.canInteract !== false;
|
||
if (config.exitCode !== undefined) existing.exitCode = finiteNumber(config.exitCode);
|
||
if (config.turnId) existing.turnId = String(config.turnId);
|
||
if (config.startedAt) existing.startedAt = timestampMs(config.startedAt) || existing.startedAt;
|
||
if (existing.agentThreadId) existing.article.dataset.agentThreadId = existing.agentThreadId;
|
||
else delete existing.article.dataset.agentThreadId;
|
||
if (kind === "tool" || kind === "read" || kind === "subagent" || kind === "commentary") renderActivityText(existing);
|
||
refreshActivity(existing);
|
||
if (existing.turnId && state.turnStartedAt !== null && ["active", "waiting"].includes(state.turnStatus)) {
|
||
ensureLiveTurnDivider(existing.turnId);
|
||
}
|
||
return existing;
|
||
}
|
||
const role = kind === "commentary"
|
||
? "assistant"
|
||
: kind === "tool" || kind === "read" || kind === "edit" || kind === "subagent" ? "tool" : "system";
|
||
const messageKind = kind === "tool" || kind === "read" ? "tool" : kind === "reasoning" ? "reasoning" : kind === "plan" ? "plan" : kind;
|
||
const message = appendMessage("", role, "activity", "", {
|
||
kind: messageKind,
|
||
label: config.label || "执行步骤",
|
||
command: config.command ? (kind === "tool" || kind === "read" ? terminalCommandText(config.command) : String(config.command)) : "",
|
||
turnId: config.turnId || "",
|
||
agentThreadId: config.agentThreadId || "",
|
||
// Commentary is an assistant paragraph in the official transcript, not
|
||
// a nested disclosure. The outer worked-for group still owns its layout.
|
||
collapsible: kind !== "commentary",
|
||
showActions: false,
|
||
// Keep commentary visible while a turn is open; command/read/reasoning
|
||
// bodies remain independently collapsible.
|
||
open: config.open === true || kind === "commentary",
|
||
});
|
||
if (!message) return null;
|
||
const activity = {
|
||
key,
|
||
kind,
|
||
role,
|
||
messageKind,
|
||
label: config.label || "执行步骤",
|
||
command: config.command ? (kind === "tool" || kind === "read" ? terminalCommandText(config.command) : String(config.command)) : "",
|
||
cwd: config.cwd ? String(config.cwd) : "",
|
||
shellName: config.shellName ? String(config.shellName) : "Shell",
|
||
agentThreadId: config.agentThreadId ? String(config.agentThreadId) : "",
|
||
displayName: config.displayName ? String(config.displayName) : "",
|
||
objective: config.objective ? String(config.objective) : "",
|
||
activityKind: config.activityKind ? String(config.activityKind) : "",
|
||
displayStatus: config.displayStatus ? String(config.displayStatus) : "",
|
||
model: config.model ? String(config.model) : "",
|
||
action: config.action ? String(config.action) : "",
|
||
filePath: config.filePath ? String(config.filePath) : "",
|
||
prompt: config.prompt ? String(config.prompt) : "",
|
||
senderThreadId: config.senderThreadId ? String(config.senderThreadId) : "",
|
||
receiverThreadIds: Array.isArray(config.receiverThreadIds) ? config.receiverThreadIds.map(String) : [],
|
||
agentsStates: isRecord(config.agentsStates) ? config.agentsStates : {},
|
||
canInteract: config.canInteract !== false,
|
||
exitCode: config.exitCode === undefined ? null : finiteNumber(config.exitCode),
|
||
itemId: config.itemId === undefined ? "" : String(config.itemId),
|
||
threadId: config.threadId || state.threadId || "",
|
||
turnId: config.turnId || state.turnId || "",
|
||
startedAt: timestampMs(config.startedAt) || Date.now(),
|
||
finishedAt: null,
|
||
durationMs: null,
|
||
durationExplicit: false,
|
||
status: normalizeActivityStatus(config.status, "inProgress"),
|
||
headerText: "",
|
||
outputText: "",
|
||
anonymous: Boolean(config.anonymous),
|
||
concrete: config.concrete === true,
|
||
statusOnly: config.statusOnly === true,
|
||
article: message.article,
|
||
body: message.content,
|
||
wrapper: message.wrapper,
|
||
details: message.article.querySelector("details"),
|
||
summary: message.article.querySelector("summary"),
|
||
};
|
||
activity.article.dataset.activityKey = key;
|
||
activity.article.dataset.activityKind = kind;
|
||
if (activity.agentThreadId) activity.article.dataset.agentThreadId = activity.agentThreadId;
|
||
state.activities.set(key, activity);
|
||
while (state.activities.size > 500) {
|
||
const removable = [...state.activities].find(([, entry]) => !isRunningActivity(entry));
|
||
if (!removable) break;
|
||
state.activities.delete(removable[0]);
|
||
}
|
||
renderActivityText(activity);
|
||
refreshActivity(activity);
|
||
if (activity.turnId && state.turnStartedAt !== null && ["active", "waiting"].includes(state.turnStatus)) {
|
||
ensureLiveTurnDivider(activity.turnId);
|
||
}
|
||
ensureActivityTimer();
|
||
return activity;
|
||
}
|
||
|
||
function activityText(activity) {
|
||
if (activity.kind === "tool" || activity.kind === "read") {
|
||
const command = terminalCommandText(activity.command);
|
||
const commandLine = command ? `$ ${command}` : "";
|
||
return [commandLine, activity.outputText].filter(Boolean).join("\n");
|
||
}
|
||
if (activity.kind === "subagent") {
|
||
const name = activity.displayName || activity.label || t("子代理");
|
||
const objective = activity.objective || activity.outputText;
|
||
return [name, objective].filter(Boolean).join("\n");
|
||
}
|
||
if (activity.headerText && activity.outputText) return `${activity.headerText}\n\n${activity.outputText}`;
|
||
return activity.headerText || activity.outputText || "";
|
||
}
|
||
|
||
function normalizeSubagentActionStatus(value) {
|
||
const normalized = String(value || "").replace(/[\s_-]+/g, "").toLowerCase();
|
||
if (["pendinginit", "pending", "waiting"].includes(normalized)) return "waiting";
|
||
if (["running", "working", "active", "started", "interacted", "updated", "inprogress"].includes(normalized)) return "working";
|
||
if (["completed", "complete", "done", "interrupted", "shutdown"].includes(normalized)) return "done";
|
||
if (["errored", "error", "failed", "notfound"].includes(normalized)) return "failed";
|
||
return "waiting";
|
||
}
|
||
|
||
function renderSubagentBody(activity) {
|
||
const body = activity?.body;
|
||
if (!body) return;
|
||
body.replaceChildren();
|
||
body.classList.remove("terminal-body", "diff-body");
|
||
body.classList.add("subagent-body");
|
||
|
||
const prompt = firstString(activity.prompt, activity.objective, activity.outputText);
|
||
if (prompt) {
|
||
const promptNode = document.createElement("div");
|
||
promptNode.className = "subagent-prompt markdown-body";
|
||
renderMarkdown(promptNode, prompt);
|
||
body.append(promptNode);
|
||
}
|
||
if (activity.model || activity.action) {
|
||
const meta = document.createElement("div");
|
||
meta.className = "subagent-action-meta";
|
||
if (activity.action) {
|
||
const action = document.createElement("span");
|
||
action.textContent = activity.action === "spawnAgent" ? t("启动子代理")
|
||
: activity.action === "sendInput" ? t("发送输入")
|
||
: activity.action === "resumeAgent" ? t("恢复子代理")
|
||
: activity.action === "closeAgent" ? t("关闭子代理") : activity.action;
|
||
meta.append(action);
|
||
}
|
||
if (activity.model) {
|
||
const model = document.createElement("span");
|
||
model.className = "subagent-model";
|
||
model.textContent = activity.model;
|
||
meta.append(model);
|
||
}
|
||
body.append(meta);
|
||
}
|
||
|
||
const states = isRecord(activity.agentsStates) ? activity.agentsStates : {};
|
||
const receiverIds = Array.isArray(activity.receiverThreadIds) ? activity.receiverThreadIds : [];
|
||
const ids = [...new Set([...receiverIds, ...Object.keys(states)])].filter(Boolean);
|
||
if (!ids.length) return;
|
||
const rows = document.createElement("div");
|
||
rows.className = "subagent-action-rows";
|
||
for (const threadId of ids) {
|
||
const raw = isRecord(states[threadId]) ? states[threadId] : {};
|
||
const status = normalizeSubagentActionStatus(raw.status);
|
||
const row = document.createElement("div");
|
||
row.className = "subagent-action-row";
|
||
row.dataset.status = status;
|
||
const icon = document.createElement("span");
|
||
icon.className = "subagent-action-icon";
|
||
icon.setAttribute("aria-hidden", "true");
|
||
const label = document.createElement("span");
|
||
label.className = "subagent-action-label";
|
||
label.textContent = threadId === activity.agentThreadId
|
||
? firstString(activity.displayName, threadId)
|
||
: `thread ${threadId}`;
|
||
const statusNode = document.createElement("span");
|
||
statusNode.className = "subagent-action-status";
|
||
statusNode.textContent = subagentStatusLabel(status);
|
||
row.append(icon, label, statusNode);
|
||
const message = firstString(raw.message, raw.statusMessage);
|
||
if (message) {
|
||
const note = document.createElement("div");
|
||
note.className = "subagent-action-note";
|
||
note.textContent = message;
|
||
row.append(note);
|
||
}
|
||
rows.append(row);
|
||
}
|
||
body.append(rows);
|
||
}
|
||
|
||
function terminalOutputText(activity) {
|
||
const value = String(activity?.outputText || "");
|
||
// A few older bridge payloads included an exit-code suffix in the output
|
||
// string. Strip only that exact synthetic line; real command output stays
|
||
// untouched.
|
||
return normalizeTerminalOutput(value.replace(/\n?exit code:\s*-?\d+\s*$/i, ""));
|
||
}
|
||
|
||
function normalizeTerminalOutput(value) {
|
||
// Commands often use carriage returns/backspaces for progress updates and
|
||
// ANSI SGR sequences for color. Resolve the control characters before the
|
||
// lightweight renderer turns the result into safe DOM nodes.
|
||
const stripped = String(value || "")
|
||
.replace(/\x1b\][^\x07]*(?:\x07|\x1b\\)/g, "")
|
||
.replace(/\x1b\[(?![0-9;]*m)[0-?]*[ -/]*[@-~]/g, "");
|
||
return stripped.replace(/\r\n/g, "\n").split("\n").map((line) => {
|
||
const cells = [];
|
||
let cursor = 0;
|
||
for (const character of line) {
|
||
if (character === "\r") { cursor = 0; continue; }
|
||
if (character === "\b") { cursor = Math.max(0, cursor - 1); continue; }
|
||
cells[cursor] = character;
|
||
cursor += 1;
|
||
}
|
||
return cells.join("");
|
||
}).join("\n");
|
||
}
|
||
|
||
function renderTerminalOutput(parent, value) {
|
||
parent.replaceChildren();
|
||
const text = String(value || "");
|
||
const sgr = /\x1b\[([0-9;]*)m/g;
|
||
let cursor = 0;
|
||
const style = { fg: "", bg: "", bold: false, dim: false, italic: false, underline: false, strike: false };
|
||
const appendSegment = (segment) => {
|
||
if (!segment) return;
|
||
const classes = [];
|
||
if (style.fg) classes.push(`ansi-${style.fg}-fg`);
|
||
if (style.bg) classes.push(`ansi-${style.bg}-bg`);
|
||
if (style.bold) classes.push("ansi-bold");
|
||
if (style.dim) classes.push("ansi-dim");
|
||
if (style.italic) classes.push("ansi-italic");
|
||
if (style.underline) classes.push("ansi-underline");
|
||
if (style.strike) classes.push("ansi-strikethrough");
|
||
if (!classes.length) parent.append(document.createTextNode(segment));
|
||
else {
|
||
const span = document.createElement("span");
|
||
span.className = classes.join(" ");
|
||
span.textContent = segment;
|
||
parent.append(span);
|
||
}
|
||
};
|
||
const applySgr = (codes) => {
|
||
const values = codes.length ? codes : [0];
|
||
for (const code of values) {
|
||
if (code === 0) Object.assign(style, { fg: "", bg: "", bold: false, dim: false, italic: false, underline: false, strike: false });
|
||
else if (code === 1) style.bold = true;
|
||
else if (code === 2) style.dim = true;
|
||
else if (code === 3) style.italic = true;
|
||
else if (code === 4) style.underline = true;
|
||
else if (code === 9) style.strike = true;
|
||
else if (code === 22) { style.bold = false; style.dim = false; }
|
||
else if (code === 23) style.italic = false;
|
||
else if (code === 24) style.underline = false;
|
||
else if (code === 29) style.strike = false;
|
||
else if (code === 39) style.fg = "";
|
||
else if (code === 49) style.bg = "";
|
||
else if (code >= 30 && code <= 37) style.fg = ["black", "red", "green", "yellow", "blue", "magenta", "cyan", "white"][code - 30];
|
||
else if (code >= 90 && code <= 97) style.fg = ["bright-black", "bright-red", "bright-green", "bright-yellow", "bright-blue", "bright-magenta", "bright-cyan", "bright-white"][code - 90];
|
||
else if (code >= 40 && code <= 47) style.bg = ["black", "red", "green", "yellow", "blue", "magenta", "cyan", "white"][code - 40];
|
||
else if (code >= 100 && code <= 107) style.bg = ["bright-black", "bright-red", "bright-green", "bright-yellow", "bright-blue", "bright-magenta", "bright-cyan", "bright-white"][code - 100];
|
||
}
|
||
};
|
||
for (const match of text.matchAll(sgr)) {
|
||
appendSegment(text.slice(cursor, match.index));
|
||
applySgr(match[1] ? match[1].split(";").map((part) => Number(part) || 0) : [0]);
|
||
cursor = match.index + match[0].length;
|
||
}
|
||
appendSegment(text.slice(cursor));
|
||
}
|
||
|
||
function updateTerminalOutputFade(output) {
|
||
if (!output) return;
|
||
const overflow = output.scrollHeight - output.clientHeight;
|
||
output.dataset.fadeTop = String(output.scrollTop > 1);
|
||
output.dataset.fadeBottom = String(overflow - output.scrollTop > 1);
|
||
}
|
||
|
||
function terminalStatusText(activity) {
|
||
if (!activity) return "";
|
||
// File-read rows do not have a process exit code. The official renderer
|
||
// closes them with the read summary, not a misleading "unknown" status.
|
||
if (activity.kind === "read" && (activity.exitCode === null || activity.exitCode === undefined)) return "";
|
||
if (activity.status === "inProgress") return "";
|
||
if (activity.status === "interrupted") return t("已停止");
|
||
if (activity.status === "failed" || activity.status === "declined") {
|
||
return activity.exitCode === null || activity.exitCode === undefined
|
||
? t("退出码 未知")
|
||
: t(`退出码 ${activity.exitCode}`);
|
||
}
|
||
if (activity.status === "completed") {
|
||
if (activity.exitCode === 0) return t("成功");
|
||
if (activity.exitCode !== null && activity.exitCode !== undefined) return t(`退出码 ${activity.exitCode}`);
|
||
return t("退出码 未知");
|
||
}
|
||
return "";
|
||
}
|
||
|
||
function appendTerminalCheckIcon(parent) {
|
||
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||
svg.className.baseVal = "terminal-status-icon";
|
||
svg.setAttribute("viewBox", "0 0 16 16");
|
||
svg.setAttribute("aria-hidden", "true");
|
||
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||
path.setAttribute("d", "m3.5 8.2 2.7 2.7 6.3-6.3");
|
||
svg.append(path);
|
||
parent.append(svg);
|
||
}
|
||
|
||
function setTerminalActionIcon(button, kind = "copy") {
|
||
if (!button) return;
|
||
button.replaceChildren();
|
||
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||
svg.setAttribute("viewBox", "0 0 16 16");
|
||
svg.setAttribute("aria-hidden", "true");
|
||
if (kind === "check") {
|
||
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||
path.setAttribute("d", "m3.5 8.2 2.7 2.7 6.3-6.3");
|
||
svg.append(path);
|
||
} else if (kind === "collapse" || kind === "expand") {
|
||
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||
path.setAttribute("d", kind === "collapse" ? "m5 6 3 3 3-3" : "m5 10 3-3 3 3");
|
||
svg.append(path);
|
||
} else {
|
||
const back = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||
back.setAttribute("d", "M5.5 5.5V4c0-.8.7-1.5 1.5-1.5h5c.8 0 1.5.7 1.5 1.5v5c0 .8-.7 1.5-1.5 1.5h-1.5");
|
||
const front = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
||
front.setAttribute("x", "2.5");
|
||
front.setAttribute("y", "5.5");
|
||
front.setAttribute("width", "7.5");
|
||
front.setAttribute("height", "7.5");
|
||
front.setAttribute("rx", "1.2");
|
||
svg.append(back, front);
|
||
}
|
||
button.append(svg);
|
||
}
|
||
|
||
function createTerminalAction(kind, title) {
|
||
const button = document.createElement("button");
|
||
button.type = "button";
|
||
button.className = "terminal-action";
|
||
button.title = t(title);
|
||
button.setAttribute("aria-label", t(title));
|
||
setTerminalActionIcon(button, kind);
|
||
return button;
|
||
}
|
||
|
||
async function copyTerminalValue(value, button) {
|
||
try {
|
||
await navigator.clipboard?.writeText(String(value || ""));
|
||
setTerminalActionIcon(button, "check");
|
||
button.dataset.copied = "true";
|
||
setTimeout(() => {
|
||
if (!button.isConnected) return;
|
||
setTerminalActionIcon(button, "copy");
|
||
button.dataset.copied = "false";
|
||
}, 1_500);
|
||
} catch {
|
||
button.dataset.copied = "false";
|
||
}
|
||
}
|
||
|
||
function createReadPathIcon() {
|
||
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||
svg.className.baseVal = "read-path-icon";
|
||
svg.setAttribute("viewBox", "0 0 16 16");
|
||
svg.setAttribute("aria-hidden", "true");
|
||
const folder = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||
folder.setAttribute("d", "M2.5 4.5h3l1.2 1.4h6.8v6.2a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1z");
|
||
const top = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||
top.setAttribute("d", "M2.5 4.5v-1h3l1.1 1h5.9");
|
||
svg.append(folder, top);
|
||
return svg;
|
||
}
|
||
|
||
function renderReadBody(activity) {
|
||
const body = activity?.body;
|
||
if (!body) return;
|
||
body.replaceChildren();
|
||
body.classList.remove("terminal-body", "diff-body", "markdown-body");
|
||
body.classList.add("read-body");
|
||
const paths = String(activity.filePath || "").split("\n").map((value) => value.trim()).filter(Boolean);
|
||
if (paths.length) {
|
||
const list = document.createElement("div");
|
||
list.className = "read-path-list";
|
||
for (const path of paths) {
|
||
const row = document.createElement("div");
|
||
row.className = "read-path-row";
|
||
row.append(createReadPathIcon());
|
||
const value = document.createElement("span");
|
||
value.textContent = path;
|
||
value.title = path;
|
||
row.append(value);
|
||
list.append(row);
|
||
}
|
||
body.append(list);
|
||
}
|
||
const output = terminalOutputText(activity);
|
||
if (output) {
|
||
const outputBlock = document.createElement("pre");
|
||
outputBlock.className = "read-output";
|
||
outputBlock.textContent = output;
|
||
body.append(outputBlock);
|
||
}
|
||
if (!paths.length && !output) {
|
||
const empty = document.createElement("span");
|
||
empty.className = "read-empty";
|
||
empty.textContent = t(activity.status === "inProgress" ? "正在读取文件" : "读取完成");
|
||
body.append(empty);
|
||
}
|
||
}
|
||
|
||
function renderTerminalBody(activity) {
|
||
const body = activity?.body;
|
||
if (!body) return;
|
||
if (activity.kind === "read" && !terminalCommandText(activity.command)) {
|
||
renderReadBody(activity);
|
||
return;
|
||
}
|
||
const previousOutput = body.querySelector(".terminal-output");
|
||
const previousScrollTop = previousOutput?.scrollTop || 0;
|
||
const previousScrollLeft = previousOutput?.scrollLeft || 0;
|
||
const previousAtBottom = previousOutput
|
||
? previousOutput.scrollHeight - previousOutput.scrollTop - previousOutput.clientHeight <= 2
|
||
: true;
|
||
body.replaceChildren();
|
||
body.classList.add("terminal-body");
|
||
body.classList.remove("markdown-body", "diff-body");
|
||
|
||
const shell = document.createElement("div");
|
||
shell.className = "terminal-shell";
|
||
const command = terminalCommandText(activity.command);
|
||
const output = terminalOutputText(activity);
|
||
|
||
const shellHeader = document.createElement("div");
|
||
shellHeader.className = "terminal-shell-header";
|
||
const shellLabel = document.createElement("div");
|
||
shellLabel.className = "terminal-shell-label";
|
||
shellLabel.textContent = activity.shellName || "Shell";
|
||
if (activity.cwd) shellLabel.title = `cwd\\n${activity.cwd}`;
|
||
// The official embedded shell uses a lightweight label row. The parent
|
||
// activity disclosure owns collapse; command and output each expose their
|
||
// own copy action on hover.
|
||
shellHeader.append(shellLabel);
|
||
shell.append(shellHeader);
|
||
|
||
if (activity.kind === "read" && activity.filePath && !command) {
|
||
const pathRow = document.createElement("div");
|
||
pathRow.className = "terminal-file-path";
|
||
const paths = activity.filePath.split("\n").filter(Boolean);
|
||
pathRow.textContent = paths.length > 1 ? `${paths[0]} (+${paths.length - 1})` : paths[0];
|
||
pathRow.title = activity.filePath;
|
||
shell.append(pathRow);
|
||
}
|
||
|
||
if (command) {
|
||
const commandRow = document.createElement("div");
|
||
commandRow.className = "terminal-command-line";
|
||
const prompt = document.createElement("span");
|
||
prompt.className = "terminal-prompt";
|
||
prompt.textContent = "$";
|
||
const commandCode = document.createElement("code");
|
||
commandCode.textContent = command;
|
||
const commandChevron = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||
commandChevron.classList.add("terminal-command-chevron");
|
||
commandChevron.setAttribute("viewBox", "0 0 16 16");
|
||
commandChevron.setAttribute("aria-hidden", "true");
|
||
const commandChevronPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||
commandChevronPath.setAttribute("d", "m4.5 6 3.5 3.5L11.5 6");
|
||
commandChevron.append(commandChevronPath);
|
||
const commandExpanded = activity.commandExpanded === true
|
||
|| state.commandDisclosure.get(activity.key) === true;
|
||
commandRow.dataset.expanded = String(commandExpanded);
|
||
commandRow.setAttribute("role", "button");
|
||
commandRow.setAttribute("tabindex", "0");
|
||
commandRow.setAttribute("aria-expanded", String(commandExpanded));
|
||
commandRow.setAttribute("aria-label", `$ ${command}`);
|
||
const toggleCommand = (event) => {
|
||
if (event.target.closest(".terminal-action")) return;
|
||
event.preventDefault();
|
||
const expanded = commandRow.dataset.expanded === "true";
|
||
const next = !expanded;
|
||
activity.commandExpanded = next;
|
||
if (activity.key) state.commandDisclosure.set(activity.key, next);
|
||
preserveTimelineAnchor(commandRow, 210);
|
||
animateCommandRow(commandRow, next);
|
||
if (next) scheduleTimelineReveal(commandRow, 190);
|
||
};
|
||
commandRow.addEventListener("click", toggleCommand);
|
||
commandRow.addEventListener("keydown", (event) => {
|
||
if (event.key === "Enter" || event.key === " ") toggleCommand(event);
|
||
});
|
||
const copyCommand = createTerminalAction("copy", "复制命令");
|
||
copyCommand.classList.add("terminal-command-action");
|
||
copyCommand.addEventListener("click", (event) => {
|
||
event.stopPropagation();
|
||
copyTerminalValue(command, copyCommand);
|
||
});
|
||
commandRow.append(prompt, commandCode, commandChevron, copyCommand);
|
||
shell.append(commandRow);
|
||
}
|
||
|
||
const outputWrap = document.createElement("div");
|
||
outputWrap.className = "terminal-output-wrap";
|
||
if (output) {
|
||
const outputBlock = document.createElement("pre");
|
||
outputBlock.className = "terminal-output";
|
||
const outputContent = document.createElement("div");
|
||
outputContent.className = "terminal-output-content";
|
||
renderTerminalOutput(outputContent, output);
|
||
outputBlock.append(outputContent);
|
||
// Activity deltas rebuild the lightweight DOM. Preserve the reader's
|
||
// position, while still following the tail when they were already at
|
||
// the bottom of the terminal stream.
|
||
outputBlock.scrollLeft = previousScrollLeft;
|
||
requestAnimationFrame(() => {
|
||
if (previousAtBottom) outputBlock.scrollTop = outputBlock.scrollHeight;
|
||
else outputBlock.scrollTop = previousScrollTop;
|
||
outputBlock.scrollLeft = previousScrollLeft;
|
||
updateTerminalOutputFade(outputBlock);
|
||
});
|
||
outputBlock.addEventListener("scroll", () => updateTerminalOutputFade(outputBlock), { passive: true });
|
||
const copyOutput = createTerminalAction("copy", "复制输出");
|
||
copyOutput.classList.add("terminal-output-action");
|
||
copyOutput.addEventListener("click", (event) => {
|
||
event.stopPropagation();
|
||
copyTerminalValue(output, copyOutput);
|
||
});
|
||
outputWrap.append(outputBlock, copyOutput);
|
||
} else if (activity.status !== "inProgress") {
|
||
const outputBlock = document.createElement("pre");
|
||
outputBlock.className = "terminal-output terminal-output-empty";
|
||
const outputContent = document.createElement("div");
|
||
outputContent.className = "terminal-output-content terminal-no-output";
|
||
outputContent.textContent = t("无输出");
|
||
outputBlock.append(outputContent);
|
||
outputWrap.append(outputBlock);
|
||
}
|
||
shell.append(outputWrap);
|
||
|
||
const statusText = terminalStatusText(activity);
|
||
const footer = document.createElement("div");
|
||
footer.className = "terminal-footer";
|
||
footer.dataset.status = activity.status;
|
||
if (statusText) {
|
||
const status = document.createElement("span");
|
||
status.className = "terminal-status";
|
||
if (activity.status === "completed" && activity.exitCode === 0) appendTerminalCheckIcon(status);
|
||
status.append(document.createTextNode(statusText));
|
||
footer.append(status);
|
||
}
|
||
shell.append(footer);
|
||
body.append(shell);
|
||
}
|
||
|
||
function renderActivityText(activity) {
|
||
const text = activityText(activity);
|
||
const visibleText = text || t(isRunningActivity(activity) ? "等待输出…" : activityStatusLabel(activity.status));
|
||
if (activity.kind === "tool" || activity.kind === "read") renderTerminalBody(activity);
|
||
else if (activity.kind === "subagent") renderSubagentBody(activity);
|
||
else renderMessageBody(activity.body, visibleText, activity.role, "activity", activity.messageKind);
|
||
activity.article.dataset.rawText = text;
|
||
}
|
||
|
||
function setActivityContent(activity, header, output, append = false) {
|
||
if (!activity) return;
|
||
if (header !== undefined && header !== null && String(header)) activity.headerText = String(header);
|
||
if (output !== undefined && output !== null) {
|
||
activity.outputText = append ? `${activity.outputText}${String(output)}` : String(output);
|
||
}
|
||
renderActivityText(activity);
|
||
}
|
||
|
||
function activityElapsed(activity) {
|
||
if (activity.durationMs !== null) return Math.max(0, activity.durationMs);
|
||
if (!activity.startedAt) return null;
|
||
// A completed legacy row without an end marker has an unknown duration;
|
||
// showing the current wall clock makes old work appear to keep running.
|
||
if (!isRunningActivity(activity) && !activity.finishedAt) return null;
|
||
const end = activity.finishedAt || Date.now();
|
||
return Math.max(0, end - activity.startedAt);
|
||
}
|
||
|
||
function refreshActivity(activity) {
|
||
if (!activity?.summary) return;
|
||
const elapsed = activityElapsed(activity);
|
||
// The official activity rows only show an item duration when the owner
|
||
// supplied one. A timestamp interval inferred while hydrating history is
|
||
// useful for the turn clock, but should not become a misleading per-row
|
||
// wall-clock label.
|
||
const duration = activity.durationExplicit === true ? elapsedDuration(elapsed) : "";
|
||
const label = t(activity.label || "执行步骤");
|
||
const setSummary = (value) => setActivitySummary(activity.summary, value, activity.kind);
|
||
// Recompute the summary in the active locale. Dynamic command/path/name
|
||
// values are appended as raw strings by historyActivitySummary().
|
||
if (activity.kind === "subagent") {
|
||
const name = activity.displayName || activity.label || t("子代理");
|
||
const statusText = activity.status === "inProgress" ? t("已开始工作")
|
||
: activity.status === "completed" ? t("已完成")
|
||
: activity.status === "failed" ? t("失败")
|
||
: activity.status === "interrupted" ? t("已中断") : "";
|
||
setSubagentSummary(activity.summary, name, statusText);
|
||
} else {
|
||
const localizedSummary = historyActivitySummary(activity, activity.kind, activity.status, duration);
|
||
if (localizedSummary) setSummary(localizedSummary);
|
||
else if (activity.status === "inProgress") setSummary(label);
|
||
else if (activity.status === "failed") setSummary(`${label} · ${t("失败")}`);
|
||
else if (activity.status === "interrupted") setSummary(`${label} · ${t("已中断")}`);
|
||
else setSummary(label);
|
||
}
|
||
activity.article.dataset.status = activity.status;
|
||
}
|
||
|
||
function finishActivity(activity, status = "completed", durationMs, finishedAt) {
|
||
if (!activity) return;
|
||
// `updateLiveActivity` may create a short-lived row before the host emits
|
||
// an item lifecycle event. It is useful while the turn is live, but the
|
||
// official transcript does not retain a blank "思考/编辑/读取" item once
|
||
// the turn ends. A concrete lifecycle row (or a row that received real
|
||
// output) has already cleared `statusOnly` and follows the normal path.
|
||
if (activity.statusOnly === true && activity.concrete !== true) {
|
||
retireActivity(activity);
|
||
return;
|
||
}
|
||
activity.status = normalizeActivityStatus(status, "completed");
|
||
activity.finishedAt = timestampMs(finishedAt) || Date.now();
|
||
const explicitDuration = finiteNumber(durationMs);
|
||
activity.durationExplicit = explicitDuration !== null;
|
||
const inferredDuration = activity.startedAt === null
|
||
? null
|
||
: Math.max(0, activity.finishedAt - activity.startedAt);
|
||
activity.durationMs = explicitDuration === null
|
||
? inferredDuration
|
||
: Math.max(0, explicitDuration);
|
||
activity.article.classList.remove("streaming");
|
||
renderActivityText(activity);
|
||
refreshActivity(activity);
|
||
if (activity.details && (activity.kind === "reasoning" || activity.kind === "plan" || activity.kind === "subagent")) {
|
||
setDetailsExpanded(activity.details, false);
|
||
}
|
||
if (state.activeAssistantActivityKey === activity.key) {
|
||
state.activeAssistantBody = null;
|
||
state.activeAssistantStream = null;
|
||
state.activeAssistantText = "";
|
||
state.activeAssistantActivityKey = null;
|
||
}
|
||
stopActivityTimerIfIdle();
|
||
}
|
||
|
||
function latestRunningActivity(kind, context = {}) {
|
||
const itemId = context.itemId === undefined || context.itemId === null ? "" : String(context.itemId);
|
||
const turnId = context.turnId || state.turnId || "";
|
||
const activities = [...state.activities.values()].reverse();
|
||
if (itemId) {
|
||
const exact = activities.find((activity) => activity.itemId === itemId && isRunningActivity(activity));
|
||
if (exact) return exact;
|
||
}
|
||
const acceptedKinds = kind === "reasoning" ? new Set(["reasoning", "plan"]) : new Set([kind]);
|
||
return activities.find((activity) => isRunningActivity(activity)
|
||
&& acceptedKinds.has(activity.kind)
|
||
&& (!turnId || !activity.turnId || activity.turnId === turnId)) || null;
|
||
}
|
||
|
||
function appendActivityChunk(activity, text) {
|
||
if (!activity || !text) return;
|
||
// A stream chunk is evidence of a real work item, even when the host
|
||
// omitted its item id. It should not be mistaken for a status-only row at
|
||
// turn completion.
|
||
activity.concrete = true;
|
||
activity.statusOnly = false;
|
||
activity.status = "inProgress";
|
||
setActivityContent(activity, undefined, text, true);
|
||
activity.article.classList.add("streaming");
|
||
if ((activity.kind === "reasoning" || activity.kind === "plan" || activity.kind === "commentary") && activity.details) {
|
||
// Reasoning is the one activity the official transcript expands while
|
||
// it is streaming; completed reasoning collapses again in finishActivity.
|
||
setDetailsExpanded(activity.details, true);
|
||
}
|
||
refreshActivity(activity);
|
||
ensureActivityTimer();
|
||
}
|
||
|
||
function handleItemLifecycle(phase, payload) {
|
||
const params = eventParams(payload);
|
||
const item = itemFromPayload(payload);
|
||
const kind = activityKindForItem(item);
|
||
if (!kind || kind === "user" || kind === "assistant") return false;
|
||
const itemId = item.id ?? params.itemId ?? payload?.itemId;
|
||
const duration = finiteNumber(item.durationMs, params.durationMs);
|
||
const finishedAt = timestampMs(item.completedAtMs, item.finishedAtMs, params.completedAtMs, params.emittedAtMs);
|
||
const startedAt = timestampMs(item.startedAtMs, item.startedAt, params.startedAtMs)
|
||
|| (duration !== null && finishedAt ? finishedAt - duration : null);
|
||
const fallbackStatus = phase === "completed" ? "completed" : "inProgress";
|
||
const activity = ensureActivity(activityKey(payload, item, kind), {
|
||
kind,
|
||
label: activityLabelForItem(item, kind),
|
||
command: kind === "tool" || kind === "read" ? terminalCommandText(commandText(item)) : "",
|
||
filePath: kind === "read" ? readPathList(item).join("\n") : "",
|
||
cwd: (kind === "tool" || kind === "read") && typeof item.cwd === "string" ? item.cwd : "",
|
||
shellName: (kind === "tool" || kind === "read") && typeof item.shellName === "string" ? item.shellName : "Shell",
|
||
agentThreadId: firstString(item.agentThreadId, item.childThreadId, item.threadId),
|
||
displayName: firstString(item.displayName, item.agentNickname, item.agentName, item.agentPath),
|
||
objective: firstString(item.objective, item.prompt, item.statusMessage, item.message),
|
||
activityKind: firstString(item.activityKind, item.kind),
|
||
displayStatus: firstString(item.displayStatus, item.status),
|
||
model: firstString(item.model, item.modelId),
|
||
action: firstString(item.action, item.tool),
|
||
prompt: item.prompt === null ? "" : firstString(item.prompt),
|
||
senderThreadId: firstString(item.senderThreadId),
|
||
receiverThreadIds: Array.isArray(item.receiverThreadIds)
|
||
? item.receiverThreadIds.map(String)
|
||
: Array.isArray(item.receiverThreads) ? item.receiverThreads.map(String) : [],
|
||
agentsStates: isRecord(item.agentsStates) ? item.agentsStates : {},
|
||
canInteract: item.canInteract !== false,
|
||
exitCode: kind === "tool" || kind === "read" ? finiteNumber(item.exitCode, item.exit_code) : undefined,
|
||
itemId,
|
||
threadId: eventThreadId(payload),
|
||
turnId: eventTurnId(payload),
|
||
startedAt,
|
||
status: normalizeActivityStatus(item.status, fallbackStatus),
|
||
concrete: true,
|
||
anonymous: itemId === undefined || itemId === null,
|
||
});
|
||
if (!activity) return true;
|
||
if (kind === "tool" || kind === "read") {
|
||
const command = terminalCommandText(commandText(item));
|
||
if (command) activity.command = command;
|
||
if (kind === "read") activity.filePath = readPathList(item).join("\n") || activity.filePath;
|
||
if (typeof item.cwd === "string") activity.cwd = item.cwd;
|
||
if (typeof item.shellName === "string" && item.shellName) activity.shellName = item.shellName;
|
||
const exitCode = finiteNumber(item.exitCode, item.exit_code);
|
||
if (exitCode !== null) activity.exitCode = exitCode;
|
||
}
|
||
if (kind === "subagent") {
|
||
activity.agentThreadId = firstString(item.agentThreadId, item.childThreadId, item.threadId, activity.agentThreadId);
|
||
activity.displayName = firstString(item.displayName, item.agentNickname, item.agentName, item.agentPath, activity.displayName);
|
||
activity.objective = firstString(item.objective, item.prompt, item.statusMessage, item.message, activity.objective);
|
||
activity.activityKind = firstString(item.activityKind, item.kind, activity.activityKind);
|
||
activity.displayStatus = firstString(item.displayStatus, item.status, activity.displayStatus);
|
||
activity.model = firstString(item.model, item.modelId, activity.model);
|
||
activity.action = firstString(item.action, item.tool, activity.action);
|
||
activity.prompt = item.prompt === null ? "" : firstString(item.prompt, activity.prompt);
|
||
activity.senderThreadId = firstString(item.senderThreadId, activity.senderThreadId);
|
||
if (Array.isArray(item.receiverThreadIds)) activity.receiverThreadIds = item.receiverThreadIds.map(String);
|
||
else if (Array.isArray(item.receiverThreads)) activity.receiverThreadIds = item.receiverThreads.map(String);
|
||
if (isRecord(item.agentsStates)) activity.agentsStates = item.agentsStates;
|
||
if (item.canInteract !== undefined) activity.canInteract = item.canInteract !== false;
|
||
if (activity.agentThreadId) activity.article.dataset.agentThreadId = activity.agentThreadId;
|
||
else delete activity.article.dataset.agentThreadId;
|
||
}
|
||
const header = activityHeader(item, kind);
|
||
const output = activityOutput(item, kind);
|
||
if (header || output) setActivityContent(activity, header, output);
|
||
if (phase === "completed") {
|
||
const status = normalizeActivityStatus(item.status, item.error ? "failed" : "completed");
|
||
finishActivity(activity, status, duration, finishedAt);
|
||
} else {
|
||
activity.status = normalizeActivityStatus(item.status, "inProgress");
|
||
refreshActivity(activity);
|
||
}
|
||
return true;
|
||
}
|
||
|
||
function handlePlanUpdate(payload) {
|
||
const params = eventParams(payload);
|
||
const steps = Array.isArray(params.plan) ? params.plan : Array.isArray(params.steps) ? params.steps : null;
|
||
const text = planText(steps || params.text || params);
|
||
if (!text) return false;
|
||
const threadId = eventThreadId(payload) || state.threadId || "thread";
|
||
const turnId = eventTurnId(payload) || state.turnId || "turn";
|
||
const activity = ensureActivity(`plan:${threadId}:${turnId}`, {
|
||
kind: "plan",
|
||
label: "计划",
|
||
threadId,
|
||
turnId,
|
||
status: "inProgress",
|
||
concrete: true,
|
||
});
|
||
setActivityContent(activity, "", text);
|
||
const statuses = (steps || []).map((step) => normalizeActivityStatus(step?.status, "pending"));
|
||
if (statuses.length && statuses.every((status) => status === "completed")) finishActivity(activity, "completed");
|
||
else refreshActivity(activity);
|
||
return true;
|
||
}
|
||
|
||
function handleDiffUpdate(payload) {
|
||
const params = eventParams(payload);
|
||
const diff = fileChangesText(params.changes || params.diff || params.patch || params.delta || params.text || params.output);
|
||
if (!diff) return false;
|
||
const threadId = eventThreadId(payload) || state.threadId || "thread";
|
||
const turnId = eventTurnId(payload) || state.turnId || "turn";
|
||
const activity = ensureActivity(`diff:${threadId}:${turnId}`, {
|
||
kind: "edit",
|
||
label: "文件变更",
|
||
threadId,
|
||
turnId,
|
||
status: "inProgress",
|
||
concrete: true,
|
||
});
|
||
setActivityContent(activity, "", diff);
|
||
refreshActivity(activity);
|
||
return true;
|
||
}
|
||
|
||
function finishActivitiesForTurn(turnId, status) {
|
||
for (const activity of state.activities.values()) {
|
||
if (!isRunningActivity(activity)) continue;
|
||
if (turnId && activity.turnId && activity.turnId !== turnId) continue;
|
||
finishActivity(activity, status);
|
||
}
|
||
}
|
||
|
||
function turnStatusLabel(status) {
|
||
if (status === "waiting") return t("等待授权");
|
||
if (status === "generating") return t("正在生成");
|
||
if (status === "interrupted") return t("已中断");
|
||
if (status === "failed") return t("失败");
|
||
if (status === "completed") return t("已完成");
|
||
return t("正在工作");
|
||
}
|
||
|
||
function statusActivityLabel(activity, flags = []) {
|
||
const normalized = String(activity || "").replace(/[\s-]+/g, "_").toLowerCase();
|
||
if (normalized === "waiting_approval" || normalized === "waiting_for_approval" || flags.some((flag) => /approval|permission/.test(String(flag)))) return t("等待授权");
|
||
if (normalized === "waiting_input" || normalized === "waiting_for_user_input" || flags.some((flag) => /user.?input/.test(String(flag)))) return t("正在等待你的回答");
|
||
if (normalized === "thinking" || normalized === "reasoning") return t("正在思考");
|
||
if (normalized === "editing" || normalized === "edit") return t("正在编辑文件");
|
||
if (normalized === "reading" || normalized === "reading_file" || normalized === "file_read") return t("正在读取文件");
|
||
if (normalized === "running" || normalized === "running_command" || normalized === "tool") return t("正在运行命令");
|
||
if (normalized === "searching" || normalized === "searching_web") return t("正在搜索网页");
|
||
if (normalized === "responding" || normalized === "generating") return t("正在生成");
|
||
if (normalized === "failed") return t("执行失败");
|
||
if (normalized === "interrupted") return t("已中断");
|
||
if (normalized === "completed") return t("已完成");
|
||
return normalized && normalized !== "idle" ? t("处理中") : "";
|
||
}
|
||
|
||
function updateLiveActivity(activity, startedAt, durationMs, flags = [], turnId = "") {
|
||
const element = $("liveActivity");
|
||
if (!element) return;
|
||
const normalized = String(activity || "idle").replace(/[\s-]+/g, "_").toLowerCase();
|
||
const terminal = ["idle", "ready", "completed", "failed", "interrupted", "cancelled", "canceled"].includes(normalized);
|
||
state.currentActivity = normalized;
|
||
state.currentActivityStartedAt = timestampMs(startedAt) || state.currentActivityStartedAt;
|
||
state.currentActivityDurationMs = finiteNumber(durationMs);
|
||
state.currentActivityTurnId = turnId || state.currentActivityTurnId || "";
|
||
if (terminal) {
|
||
const live = state.liveActivityKey ? state.activities.get(state.liveActivityKey) : null;
|
||
// Concrete lifecycle rows are finalized by item/turn completion events.
|
||
// A status transition may only close an anonymous streaming fallback;
|
||
// closing a concrete row here can race the owner snapshot and erase its
|
||
// command/edit label before the real completion payload arrives.
|
||
if (live?.anonymous && isRunningActivity(live)) {
|
||
finishActivity(live, normalized === "failed" ? "failed" : normalized === "interrupted" ? "interrupted" : "completed", durationMs);
|
||
}
|
||
state.liveActivityKey = null;
|
||
element.hidden = true;
|
||
element.dataset.activity = normalized;
|
||
element.dataset.active = "false";
|
||
return;
|
||
}
|
||
const label = statusActivityLabel(normalized, flags);
|
||
if (!label) {
|
||
element.hidden = true;
|
||
return;
|
||
}
|
||
// The live status node remains available to assistive technology, while
|
||
// the visible transcript is the source of truth for work-in-progress rows.
|
||
element.hidden = false;
|
||
element.dataset.activity = normalized;
|
||
element.dataset.active = "true";
|
||
const labelElement = element.querySelector(".activity-label");
|
||
const elapsedElement = element.querySelector(".activity-elapsed");
|
||
const activeTranscript = latestRunningActivity(
|
||
normalized === "thinking" || normalized === "reasoning" ? "reasoning"
|
||
: normalized === "editing" || normalized === "edit" ? "edit"
|
||
: normalized === "reading" || normalized === "reading_file" || normalized === "file_read" ? "read"
|
||
: normalized === "searching" || normalized === "searching_web" ? "tool"
|
||
: normalized === "running" || normalized === "running_command" || normalized === "tool" ? "tool" : "",
|
||
{ turnId: turnId || state.turnId || "" },
|
||
);
|
||
let visibleLabel = label;
|
||
if (activeTranscript) {
|
||
if (activeTranscript.kind === "tool" && activeTranscript.command) {
|
||
visibleLabel = uiWithRaw("正在运行 ", "Running ", terminalCommandText(activeTranscript.command));
|
||
} else if (activeTranscript.kind === "edit") visibleLabel = t("正在编辑文件");
|
||
else if (activeTranscript.kind === "read") visibleLabel = t("正在读取文件");
|
||
else if (activeTranscript.kind === "reasoning") visibleLabel = t("正在思考");
|
||
else if (activeTranscript.label) visibleLabel = activeTranscript.label;
|
||
}
|
||
if (labelElement) labelElement.textContent = visibleLabel;
|
||
const elapsed = state.currentActivityStartedAt === null
|
||
? state.currentActivityDurationMs
|
||
: Math.max(0, Date.now() - state.currentActivityStartedAt);
|
||
if (elapsedElement) elapsedElement.textContent = elapsedDuration(elapsed);
|
||
|
||
// Status snapshots are projections of the current turn, not work items.
|
||
// Bind to an existing concrete lifecycle row when possible. For the few
|
||
// builds that publish a status before its item, the fallback below creates
|
||
// a transient, explicitly `statusOnly` row that is removed at completion;
|
||
// waiting approvals and ordinary status ticks never become history items.
|
||
const effectiveTurnId = turnId || state.turnId || "";
|
||
const transcriptKind = normalized === "thinking" || normalized === "reasoning"
|
||
? "reasoning"
|
||
: normalized === "editing" || normalized === "edit"
|
||
? "edit"
|
||
: normalized === "reading" || normalized === "reading_file" || normalized === "file_read"
|
||
? "read"
|
||
: normalized === "running" || normalized === "running_command" || normalized === "tool"
|
||
? "tool"
|
||
: normalized === "searching" || normalized === "searching_web"
|
||
? "tool"
|
||
: "";
|
||
let transcript = transcriptKind
|
||
? latestRunningActivity(transcriptKind, { turnId: effectiveTurnId })
|
||
: null;
|
||
if (!transcript && effectiveTurnId && (transcriptKind === "reasoning" || transcriptKind === "edit" || transcriptKind === "read")) {
|
||
// A few official builds publish the turn activity before the first
|
||
// reasoning/diff item. Materialize one stable anonymous row so the
|
||
// reader sees "正在思考"/"正在编辑文件" immediately; a later concrete
|
||
// lifecycle item is merged into the same visual stream by kind/turn.
|
||
const key = `status:${state.threadId || "thread"}:${effectiveTurnId}:${transcriptKind}`;
|
||
transcript = ensureActivity(key, {
|
||
kind: transcriptKind,
|
||
label: transcriptKind === "reasoning" ? "思考" : transcriptKind === "edit" ? "编辑文件" : "读取文件",
|
||
threadId: state.threadId,
|
||
turnId: effectiveTurnId,
|
||
startedAt: state.currentActivityStartedAt || state.turnStartedAt,
|
||
status: "inProgress",
|
||
anonymous: true,
|
||
statusOnly: true,
|
||
open: false,
|
||
});
|
||
}
|
||
if (transcript) {
|
||
state.liveActivityKey = transcript.key;
|
||
// Keep the concrete item label (command, tool name, or edit summary)
|
||
// supplied by its lifecycle event. The global status must not overwrite
|
||
// it with a generic "正在运行命令"/"正在思考" label.
|
||
transcript.status = "inProgress";
|
||
if (state.currentActivityStartedAt && !transcript.startedAt) transcript.startedAt = state.currentActivityStartedAt;
|
||
refreshActivity(transcript);
|
||
if (effectiveTurnId) ensureLiveTurnDivider(effectiveTurnId);
|
||
} else {
|
||
state.liveActivityKey = null;
|
||
}
|
||
}
|
||
|
||
function refreshTurnClock() {
|
||
if (state.turnStartedAt === null) return;
|
||
const elapsed = Math.max(0, Date.now() - state.turnStartedAt);
|
||
const workElapsed = state.turnWorkStartedAt === null
|
||
? elapsed
|
||
: Math.max(0, Date.now() - state.turnWorkStartedAt);
|
||
const activity = state.currentActivity && state.currentActivity !== "idle"
|
||
? statusActivityLabel(state.currentActivity)
|
||
: turnStatusLabel(state.turnStatus);
|
||
const visibleElapsed = elapsedDuration(workElapsed);
|
||
setConversationStatus(visibleElapsed ? `${activity} · ${visibleElapsed}` : activity, state.turnStatus === "waiting" ? "warning" : "active");
|
||
const divider = state.turnDividers.get(state.turnId)
|
||
|| [...$("output").querySelectorAll(".turn-divider")]
|
||
.find((entry) => entry.dataset.turnId === state.turnId);
|
||
if (divider?.dataset.status === "inProgress") {
|
||
const label = divider.querySelector(".turn-divider-label");
|
||
if (label) label.textContent = turnDividerLabel("inProgress", workElapsed);
|
||
}
|
||
updateLiveActivity(state.currentActivity || "running", state.currentActivityStartedAt || state.turnStartedAt, null, [], state.currentActivityTurnId || state.turnId);
|
||
}
|
||
|
||
function startTurnClock(turnId, startedAt, elapsedMs) {
|
||
const nextTurnId = turnId || state.turnId || "";
|
||
const explicitStartedAt = timestampMs(startedAt);
|
||
const explicitElapsed = finiteNumber(elapsedMs);
|
||
if (nextTurnId && state.turnId && nextTurnId !== state.turnId) {
|
||
state.turnStartedAt = null;
|
||
state.turnWorkStartedAt = null;
|
||
state.finalAssistantStartedAt = null;
|
||
state.workedDurationMs = null;
|
||
state.currentActivityStartedAt = null;
|
||
state.currentActivityDurationMs = null;
|
||
state.currentActivity = "running";
|
||
}
|
||
if (nextTurnId) state.turnId = nextTurnId;
|
||
if (state.turnStartedAt === null) {
|
||
state.turnStartedAt = explicitStartedAt
|
||
|| (explicitElapsed !== null ? Date.now() - Math.max(0, explicitElapsed) : Date.now());
|
||
}
|
||
state.turnStatus = "active";
|
||
state.lastTurnDurationMs = null;
|
||
state.lastWorkedDurationMs = null;
|
||
if (state.turnWorkStartedAt === null) state.turnWorkStartedAt = state.turnStartedAt;
|
||
const output = $("output");
|
||
if (output && [...output.querySelectorAll(".message.activity")]
|
||
.some((article) => article.dataset.turnId === nextTurnId)) ensureLiveTurnDivider(nextTurnId);
|
||
refreshTurnClock();
|
||
ensureActivityTimer();
|
||
}
|
||
|
||
function stopTurnClock(status = "completed", durationMs, finishedAt, workedDurationMs) {
|
||
// Some completion envelopes do not carry an item lifecycle event and do
|
||
// not leave `liveActivityKey` pointing at the transient status row. Sweep
|
||
// those rows here as a final safety net before clearing the turn clock.
|
||
retireStatusOnlyActivities(state.turnId);
|
||
const end = timestampMs(finishedAt) || Date.now();
|
||
const explicitDuration = finiteNumber(durationMs);
|
||
const elapsed = explicitDuration !== null
|
||
? Math.max(0, explicitDuration)
|
||
: state.turnStartedAt === null ? null : Math.max(0, end - state.turnStartedAt);
|
||
// A hydrated terminal snapshot can arrive immediately after metadata. In
|
||
// that case the metadata duration is authoritative even though the
|
||
// terminal status envelope does not repeat it.
|
||
const authoritativeWorkedDuration = finiteNumber(
|
||
workedDurationMs,
|
||
state.workedDurationMs,
|
||
state.lastWorkedDurationMs,
|
||
);
|
||
const worked = workedDurationFor({
|
||
workedDurationMs: authoritativeWorkedDuration,
|
||
firstTurnWorkItemStartedAtMs: state.turnWorkStartedAt,
|
||
finalAssistantStartedAtMs: state.finalAssistantStartedAt,
|
||
completedAtMs: end,
|
||
}, state.turnWorkStartedAt === null ? elapsed : Math.max(0, end - state.turnWorkStartedAt));
|
||
state.turnStartedAt = null;
|
||
state.turnWorkStartedAt = null;
|
||
state.turnStatus = status;
|
||
state.lastTurnDurationMs = elapsed;
|
||
state.lastWorkedDurationMs = worked;
|
||
state.workedDurationMs = worked;
|
||
const duration = elapsedDuration(worked ?? elapsed);
|
||
setConversationStatus(`${turnStatusLabel(status)}${duration ? ` · ${duration}` : ""}`, status === "completed" ? "ready" : "warning");
|
||
state.currentActivity = status;
|
||
state.currentActivityStartedAt = null;
|
||
state.currentActivityDurationMs = worked ?? elapsed;
|
||
updateLiveActivity(status, null, worked ?? elapsed, [], state.turnId);
|
||
stopActivityTimerIfIdle();
|
||
}
|
||
|
||
function turnStatusFromValue(value, fallback = "active") {
|
||
const normalized = normalizeActivityStatus(value, fallback);
|
||
if (normalized === "inProgress") return "active";
|
||
if (normalized === "declined" || normalized === "interrupted") return "interrupted";
|
||
return normalized;
|
||
}
|
||
|
||
function applyStatusSnapshot(payload, options = {}) {
|
||
const status = isRecord(payload?.status) ? payload.status : {};
|
||
const metadata = isRecord(payload?.metadata) ? payload.metadata : {};
|
||
const rawTurnStatus = payload?.turnStatus ?? status.turnStatus ?? metadata.turnStatus ?? payload?.state;
|
||
const activity = String(payload?.activity ?? status.activity ?? metadata.activity ?? "").toLowerCase();
|
||
const flags = [
|
||
...(Array.isArray(payload?.activeFlags) ? payload.activeFlags : []),
|
||
...(Array.isArray(status.activeFlags) ? status.activeFlags : []),
|
||
...(Array.isArray(metadata.activeFlags) ? metadata.activeFlags : []),
|
||
].map((flag) => String(flag).toLowerCase());
|
||
const turnId = payload?.turnId || state.turnId || "";
|
||
const projectedWorkedDuration = workedDurationFor(payload,
|
||
workedDurationFor(status, workedDurationFor(metadata, null)));
|
||
const projectedWorkStart = timestampMs(
|
||
payload?.firstTurnWorkItemStartedAtMs,
|
||
payload?.workStartedAtMs,
|
||
status.firstTurnWorkItemStartedAtMs,
|
||
status.workStartedAtMs,
|
||
metadata.firstTurnWorkItemStartedAtMs,
|
||
metadata.workStartedAtMs,
|
||
);
|
||
const projectedFinalAssistantStart = timestampMs(
|
||
payload?.finalAssistantStartedAtMs,
|
||
status.finalAssistantStartedAtMs,
|
||
metadata.finalAssistantStartedAtMs,
|
||
);
|
||
if (projectedWorkStart !== null) state.turnWorkStartedAt = projectedWorkStart;
|
||
if (projectedFinalAssistantStart !== null) state.finalAssistantStartedAt = projectedFinalAssistantStart;
|
||
if (projectedWorkedDuration !== null) state.workedDurationMs = projectedWorkedDuration;
|
||
const rawNormalized = String(rawTurnStatus || "").replace(/[\s-]+/g, "_").toLowerCase();
|
||
const normalized = turnStatusFromValue(rawTurnStatus || (turnId ? "active" : "idle"), turnId ? "active" : "idle");
|
||
const terminal = ["completed", "complete", "done", "failed", "error", "interrupted", "cancelled", "canceled"].includes(rawNormalized)
|
||
|| ["completed", "failed", "interrupted"].includes(normalized);
|
||
const effectiveActivity = activity || (flags.some((flag) => /approval|permission/.test(flag)) ? "waiting_approval" : turnId ? "running" : normalized);
|
||
const explicitlyActive = !terminal && (Boolean(turnId)
|
||
|| ["active", "running", "working", "inprogress", "thinking", "reasoning", "editing", "edit", "reading", "readingfile", "fileread", "searching", "responding", "generating"].includes(activity.replace(/[\s_-]+/g, ""))
|
||
|| normalized === "active");
|
||
if (explicitlyActive) {
|
||
startTurnClock(
|
||
turnId,
|
||
payload?.startedAtMs ?? status.startedAtMs ?? metadata.startedAtMs,
|
||
payload?.elapsedMs ?? status.elapsedMs ?? metadata.elapsedMs,
|
||
);
|
||
state.turnStatus = flags.some((flag) => /approval|permission|input|waiting/.test(flag)) ? "waiting" : "active";
|
||
state.currentActivity = effectiveActivity;
|
||
updateLiveActivity(effectiveActivity, payload?.startedAtMs ?? status.startedAtMs ?? metadata.startedAtMs ?? state.turnStartedAt, payload?.durationMs ?? status.durationMs ?? metadata.durationMs, flags, turnId);
|
||
refreshTurnClock();
|
||
return;
|
||
}
|
||
if (options.allowTerminal === false) return;
|
||
const duration = payload?.durationMs ?? status.durationMs ?? metadata.durationMs;
|
||
if (["completed", "interrupted", "failed"].includes(normalized) || terminal) {
|
||
stopTurnClock(normalized, duration, payload?.completedAtMs ?? status.completedAtMs ?? metadata.completedAtMs, projectedWorkedDuration);
|
||
}
|
||
else if (state.turnStartedAt === null && options.showIdle !== false) setConversationStatus("ready");
|
||
}
|
||
|
||
function snapshotStatusProjection(snapshot = {}, appState = {}) {
|
||
const snapshotRecord = isRecord(snapshot) ? snapshot : {};
|
||
const stateRecord = isRecord(appState) ? appState : {};
|
||
const statusRecord = [
|
||
snapshotRecord.executionStatus,
|
||
snapshotRecord.status,
|
||
stateRecord.executionStatus,
|
||
stateRecord.status,
|
||
].find(isRecord) || {};
|
||
const rawTurnStatus = firstDefined(
|
||
snapshotRecord.turnStatus,
|
||
statusRecord.turnStatus,
|
||
statusRecord.status,
|
||
stateRecord.turnStatus,
|
||
typeof stateRecord.status === "string" ? stateRecord.status : undefined,
|
||
);
|
||
const rawActivity = firstString(
|
||
snapshotRecord.activity,
|
||
statusRecord.activity,
|
||
stateRecord.activity,
|
||
).toLowerCase();
|
||
const rawNormalized = String(rawTurnStatus || "").replace(/[\s-]+/g, "_").toLowerCase();
|
||
const fallbackStatus = rawActivity === "completed" || rawActivity === "complete" || rawActivity === "done"
|
||
? "completed"
|
||
: rawActivity === "failed" || rawActivity === "error"
|
||
? "failed"
|
||
: rawActivity === "interrupted" || rawActivity === "cancelled" || rawActivity === "canceled"
|
||
? "interrupted"
|
||
: snapshotRecord.turnId || stateRecord.activeTurnId ? "active" : "idle";
|
||
const normalized = turnStatusFromValue(rawTurnStatus ?? fallbackStatus, fallbackStatus);
|
||
const terminal = ["completed", "complete", "done", "failed", "error", "interrupted", "cancelled", "canceled"].includes(rawNormalized)
|
||
|| ["completed", "failed", "interrupted"].includes(normalized)
|
||
|| ["completed", "failed", "interrupted"].includes(rawActivity);
|
||
const activeActivity = ["active", "running", "working", "inprogress", "thinking", "reasoning", "editing", "edit", "reading", "reading_file", "file_read", "searching", "searching_web", "responding", "generating"].includes(rawActivity.replace(/[\s-]+/g, "_"));
|
||
const explicitTurnId = snapshotRecord.turnId !== undefined
|
||
? snapshotRecord.turnId
|
||
: stateRecord.activeTurnId;
|
||
return {
|
||
normalized,
|
||
terminal,
|
||
hasActiveTurn: Boolean(explicitTurnId) || activeActivity || normalized === "active" || normalized === "waiting",
|
||
durationMs: finiteNumber(
|
||
snapshotRecord.durationMs,
|
||
snapshotRecord.elapsedMs,
|
||
statusRecord.durationMs,
|
||
statusRecord.elapsedMs,
|
||
stateRecord.durationMs,
|
||
stateRecord.elapsedMs,
|
||
),
|
||
workedDurationMs: workedDurationFor(snapshotRecord,
|
||
workedDurationFor(statusRecord, workedDurationFor(stateRecord, null))),
|
||
firstTurnWorkItemStartedAtMs: timestampMs(
|
||
snapshotRecord.firstTurnWorkItemStartedAtMs,
|
||
snapshotRecord.workStartedAtMs,
|
||
statusRecord.firstTurnWorkItemStartedAtMs,
|
||
statusRecord.workStartedAtMs,
|
||
stateRecord.firstTurnWorkItemStartedAtMs,
|
||
stateRecord.workStartedAtMs,
|
||
),
|
||
finalAssistantStartedAtMs: timestampMs(
|
||
snapshotRecord.finalAssistantStartedAtMs,
|
||
statusRecord.finalAssistantStartedAtMs,
|
||
stateRecord.finalAssistantStartedAtMs,
|
||
),
|
||
completedAtMs: timestampMs(snapshotRecord.completedAtMs, statusRecord.completedAtMs, stateRecord.completedAtMs),
|
||
};
|
||
}
|
||
|
||
// A late authoritative snapshot can arrive after replayed lifecycle events.
|
||
// Once it says there is no active turn, clear only the transient projection;
|
||
// hydrated history remains intact and a locally queued user message is kept.
|
||
function reconcileSnapshotTerminalState(snapshot = {}, appState = {}) {
|
||
const projection = snapshotStatusProjection(snapshot, appState);
|
||
if (!projection.terminal || projection.hasActiveTurn || state.pendingUserText) return;
|
||
const hadTransientTurn = Boolean(
|
||
state.turnId
|
||
|| state.turnStartedAt !== null
|
||
|| state.currentActivity === "active"
|
||
|| state.currentActivity === "running"
|
||
|| state.currentActivity === "working"
|
||
|| state.currentActivity === "thinking"
|
||
|| state.currentActivity === "editing"
|
||
|| state.currentActivity === "generating"
|
||
|| [...state.activities.values()].some(isRunningActivity),
|
||
);
|
||
if (!hadTransientTurn) return;
|
||
const finishedTurnId = state.turnId;
|
||
finishAssistantStream();
|
||
finishActivitiesForTurn(finishedTurnId, projection.normalized);
|
||
stopTurnClock(projection.normalized, projection.durationMs, projection.completedAtMs, projection.workedDurationMs);
|
||
state.turnId = "";
|
||
state.currentActivityTurnId = "";
|
||
state.currentActivityStartedAt = null;
|
||
state.currentActivityDurationMs = projection.durationMs;
|
||
updateIds();
|
||
}
|
||
|
||
function appendFileChangeChunk(payload, text) {
|
||
if (!text) return false;
|
||
const params = eventParams(payload);
|
||
const threadId = eventThreadId(payload) || state.threadId || "thread";
|
||
const turnId = eventTurnId(payload) || state.turnId || "turn";
|
||
const itemId = params.itemId ?? payload?.itemId;
|
||
let activity = latestRunningActivity("edit", { itemId, turnId });
|
||
if (!activity) {
|
||
const key = itemId === undefined
|
||
? `diff:${threadId}:${turnId}`
|
||
: `${threadId}:${turnId}:edit:${typeof itemId}:${String(itemId)}`;
|
||
activity = ensureActivity(key, {
|
||
kind: "edit",
|
||
label: "编辑文件",
|
||
itemId,
|
||
threadId,
|
||
turnId,
|
||
status: "inProgress",
|
||
concrete: true,
|
||
});
|
||
}
|
||
appendActivityChunk(activity, text);
|
||
return true;
|
||
}
|
||
|
||
function refreshElapsedDisplays() {
|
||
refreshTurnClock();
|
||
for (const activity of state.activities.values()) if (isRunningActivity(activity)) refreshActivity(activity);
|
||
refreshSubagentElapsed();
|
||
if (state.currentActivity && state.currentActivity !== "idle") {
|
||
updateLiveActivity(
|
||
state.currentActivity,
|
||
state.currentActivityStartedAt || state.turnStartedAt,
|
||
state.currentActivityDurationMs,
|
||
[],
|
||
state.currentActivityTurnId || state.turnId,
|
||
);
|
||
}
|
||
stopActivityTimerIfIdle();
|
||
}
|
||
|
||
function ensureActivityTimer() {
|
||
if (state.activityTimer !== null) return;
|
||
state.activityTimer = setInterval(refreshElapsedDisplays, 250);
|
||
}
|
||
|
||
function stopActivityTimerIfIdle() {
|
||
if (state.turnStartedAt !== null || [...state.activities.values()].some(isRunningActivity)) return;
|
||
if (state.activityTimer !== null) clearInterval(state.activityTimer);
|
||
state.activityTimer = null;
|
||
}
|
||
|
||
function renderEmptyOutput() {
|
||
const output = $("output");
|
||
output.replaceChildren();
|
||
output.dataset.outputTail = "";
|
||
state.activeAssistantBody = null;
|
||
state.activeAssistantStream = null;
|
||
state.activeAssistantText = "";
|
||
state.activeAssistantActivityKey = null;
|
||
state.activities.clear();
|
||
state.turnDividers.clear();
|
||
state.liveActivityKey = null;
|
||
state.pendingUserArticle = null;
|
||
state.lastRenderedDateKey = "";
|
||
state.lastRenderedTimestamp = null;
|
||
state.lastRenderedRole = "";
|
||
state.hasRenderedUser = false;
|
||
state.lastDateSeparatorTimestamp = null;
|
||
state.outputDistanceFromBottom = 0;
|
||
state.structuredMessages = [];
|
||
stopActivityTimerIfIdle();
|
||
}
|
||
|
||
function appendOutput(text, tone) {
|
||
if (!text) return;
|
||
const visibleText = tone === "error" || tone === "meta" ? t(text) : text;
|
||
if (tone === "meta") {
|
||
setConversationStatus(String(visibleText));
|
||
return;
|
||
}
|
||
finishAssistantStream();
|
||
const role = tone === "error" ? "error" : tone === "meta" ? "system" : "assistant";
|
||
appendMessage(visibleText, role, tone || "text", tone === "meta" ? t("状态") : "");
|
||
}
|
||
|
||
function setConversationStatus(text, tone = "ready") {
|
||
const value = t(text || "");
|
||
const status = $("appState");
|
||
if (status) {
|
||
status.textContent = value;
|
||
status.dataset.tone = tone;
|
||
}
|
||
const hint = $("outputHint");
|
||
if (hint && value) hint.textContent = value;
|
||
}
|
||
|
||
function sessionCommandMethod(value) {
|
||
return String(value || "").trim().replace(/\./g, "/").toLowerCase();
|
||
}
|
||
|
||
function sessionErrorMessage(value, fallback = "会话操作失败") {
|
||
const source = isRecord(value) ? value : {};
|
||
const error = isRecord(source.error) ? source.error : {};
|
||
const code = firstString(source.code, error.code).toLowerCase();
|
||
const message = value instanceof Error
|
||
? value.message
|
||
: firstString(source.message, error.message, typeof value === "string" ? value : "");
|
||
const normalized = `${code} ${message}`.toLowerCase();
|
||
if (/app_not_ready|app-server is not ready|waiting_for_host/.test(normalized)) return "等待 VS Code 主机连接";
|
||
if (/host_unavailable|host_disconnected|vscode host is disconnected/.test(normalized)) return "VS Code 主机未连接";
|
||
if (/mode_switch_pending/.test(normalized)) return "正在切换控制模式";
|
||
if (/mode_busy|cannot switch control mode/.test(normalized)) return "当前任务或请求完成后才能切换控制模式";
|
||
if (/session_busy|turn_active|running turn|pending request/.test(normalized)) return "当前任务结束或请求处理后才能切换";
|
||
if (/timed out waiting for a snapshot|snapshot from vscode|找不到会话.*owner|no live vscode owner/.test(normalized)) {
|
||
return "目标会话没有返回 VS Code 快照，请先在官方 Codex 面板打开它";
|
||
}
|
||
if (/method_not_allowed/.test(normalized)) return "当前 relay 版本不支持此会话操作，请重启 relay";
|
||
return message || fallback;
|
||
}
|
||
|
||
function setSessionSwitchingVisual(switching) {
|
||
const active = Boolean(switching);
|
||
const panel = document.querySelector(".chat-panel");
|
||
if (panel) panel.dataset.sessionSwitching = String(active);
|
||
const output = $("output");
|
||
if (output) output.setAttribute("aria-busy", String(active));
|
||
updateIds();
|
||
renderRequests();
|
||
}
|
||
|
||
function sessionSwitchTargetTitle(threadId) {
|
||
const id = String(threadId || "");
|
||
if (!id || !Array.isArray(state.sessions)) return "";
|
||
const entry = state.sessions.find((candidate) => sessionEntryId(candidate) === id);
|
||
return entry ? sessionEntryTitle(entry) : "";
|
||
}
|
||
|
||
function beginSessionSwitchContext(threadId, title = "") {
|
||
const targetThreadId = String(threadId || "");
|
||
if (state.sessionSwitchContext) {
|
||
if (!targetThreadId || state.sessionSwitchContext.targetThreadId === targetThreadId) {
|
||
return state.sessionSwitchContext;
|
||
}
|
||
// A newer VS Code navigation can supersede an in-flight target. Retain
|
||
// the original fallback, but reset both completion gates for the new
|
||
// target so an acknowledgement/snapshot from the older route cannot
|
||
// unlock the composer.
|
||
state.sessionSwitchContext.targetThreadId = targetThreadId;
|
||
state.sessionSwitchContext.targetTitle = String(title || sessionSwitchTargetTitle(targetThreadId) || "");
|
||
state.sessionSwitchContext.targetSnapshotReady = false;
|
||
state.sessionSwitchContext.selectedAckReady = false;
|
||
return state.sessionSwitchContext;
|
||
}
|
||
const titleNode = $("threadTitle");
|
||
const previousThreadId = String(state.threadId || state.syncedThreadId || "");
|
||
state.sessionSwitchContext = {
|
||
previousThreadId,
|
||
previousTitle: titleNode?.textContent || "Codex",
|
||
targetThreadId,
|
||
targetTitle: String(title || sessionSwitchTargetTitle(targetThreadId) || ""),
|
||
targetSnapshotReady: false,
|
||
selectedAckReady: false,
|
||
};
|
||
return state.sessionSwitchContext;
|
||
}
|
||
|
||
function finishSessionSwitchContext() {
|
||
state.sessionSwitchContext = null;
|
||
setSessionSwitchingVisual(false);
|
||
}
|
||
|
||
function restoreSessionSwitchContext() {
|
||
const context = state.sessionSwitchContext;
|
||
if (!context) {
|
||
state.sessionSwitching = false;
|
||
state.sessionSelectCommandId = "";
|
||
setSessionSwitchingVisual(false);
|
||
return;
|
||
}
|
||
const titleNode = $("threadTitle");
|
||
if (titleNode && context.previousTitle) titleNode.textContent = context.previousTitle;
|
||
if (context.previousThreadId) {
|
||
state.threadId = context.previousThreadId;
|
||
state.sessionSelectedThreadId = context.previousThreadId;
|
||
} else {
|
||
state.sessionSelectedThreadId = "";
|
||
}
|
||
state.sessionSwitching = false;
|
||
state.sessionSelectCommandId = "";
|
||
finishSessionSwitchContext();
|
||
}
|
||
|
||
function failSessionSwitch(value, fallback = "会话切换失败") {
|
||
// A target projection may arrive before the adapter's final owner check.
|
||
// A later failure must still restore the old routing context; treating the
|
||
// early snapshot as success strands the browser on an unconfirmed target.
|
||
restoreSessionSwitchContext();
|
||
return sessionErrorMessage(value, fallback);
|
||
}
|
||
|
||
function finishSessionSwitchIfReady() {
|
||
const context = state.sessionSwitchContext;
|
||
if (!context || !context.targetSnapshotReady || !context.selectedAckReady) return false;
|
||
const targetThreadId = String(context.targetThreadId || "");
|
||
if (!targetThreadId || state.syncedThreadId !== targetThreadId) return false;
|
||
const titleNode = $("threadTitle");
|
||
if (context.targetTitle && titleNode) titleNode.textContent = context.targetTitle;
|
||
state.sessionSelectedThreadId = "";
|
||
state.sessionSwitching = false;
|
||
state.sessionSelectCommandId = "";
|
||
finishSessionSwitchContext();
|
||
syncSessionActive(targetThreadId);
|
||
return true;
|
||
}
|
||
|
||
function sessionEntryId(entry) {
|
||
if (!isRecord(entry)) return "";
|
||
const thread = isRecord(entry.thread) ? entry.thread : {};
|
||
return firstString(entry.threadId, entry.conversationId, entry.conversation_id, entry.id,
|
||
thread.threadId, thread.conversationId, thread.conversation_id, thread.id);
|
||
}
|
||
|
||
function sessionEntryTitle(entry) {
|
||
if (!isRecord(entry)) return "";
|
||
const thread = isRecord(entry.thread) ? entry.thread : {};
|
||
return firstString(entry.title, entry.name, entry.preview, entry.firstUserMessage, entry.first_user_message,
|
||
entry.threadTitle, entry.thread_name, thread.title, thread.name, thread.preview, thread.thread_name);
|
||
}
|
||
|
||
function sessionEntryCwd(entry) {
|
||
if (!isRecord(entry)) return "";
|
||
const thread = isRecord(entry.thread) ? entry.thread : {};
|
||
return firstString(entry.cwd, entry.workspace, entry.workspacePath, entry.workspace_path,
|
||
thread.cwd, thread.workspace, thread.workspacePath, thread.workspace_path);
|
||
}
|
||
|
||
function sessionEntryUpdatedAt(entry) {
|
||
if (!isRecord(entry)) return null;
|
||
const thread = isRecord(entry.thread) ? entry.thread : {};
|
||
// App-server history is ordered by recency_at. Older relay versions only
|
||
// expose updatedAt, so keep those fields as a compatibility fallback.
|
||
return timestampMs(
|
||
entry.recencyAtMs, entry.recencyAt, entry.recency_at_ms, entry.recency_at,
|
||
thread.recencyAtMs, thread.recencyAt, thread.recency_at_ms, thread.recency_at,
|
||
entry.updatedAtMs, entry.updatedAt, entry.lastUpdatedAtMs, entry.lastUpdatedAt,
|
||
entry.updated_at_ms, entry.updated_at, entry.last_updated_at,
|
||
entry.mtime, entry.modifiedAt, thread.updatedAtMs, thread.updatedAt,
|
||
thread.updated_at_ms, thread.updated_at,
|
||
);
|
||
}
|
||
|
||
function sessionEntryStatus(entry) {
|
||
if (!isRecord(entry)) return { kind: "idle", label: "", active: false, attention: false, unread: false };
|
||
const thread = isRecord(entry.thread) ? entry.thread : {};
|
||
const nestedStatus = isRecord(entry.status) ? entry.status : {};
|
||
const nestedExecutionStatus = isRecord(entry.executionStatus) ? entry.executionStatus : {};
|
||
const nestedThreadStatus = isRecord(thread.status) ? thread.status : {};
|
||
let rawStatus = firstString(
|
||
entry.activity, entry.activityStatus, entry.status, entry.executionStatus, entry.turnStatus,
|
||
entry.threadRuntimeStatus, entry.thread_runtime_status, entry.runtimeStatus, entry.lastTurnStatus,
|
||
entry.last_turn_status, entry.phase, entry.state,
|
||
nestedStatus.activity, nestedStatus.type, nestedStatus.status, nestedStatus.kind,
|
||
nestedExecutionStatus.activity, nestedExecutionStatus.type, nestedExecutionStatus.status, nestedExecutionStatus.kind,
|
||
nestedThreadStatus.activity, nestedThreadStatus.type, nestedThreadStatus.status, nestedThreadStatus.kind,
|
||
thread.threadRuntimeStatus, thread.thread_runtime_status, thread.turnStatus, thread.lastTurnStatus, thread.state,
|
||
).replace(/([a-z])([A-Z])/g, "$1_$2").toLowerCase().replace(/[\s-]+/g, "_");
|
||
if ((!rawStatus || rawStatus === "idle") && entry.active) {
|
||
rawStatus = firstString(
|
||
state.currentActivity !== "idle" ? state.currentActivity : "",
|
||
state.turnStatus,
|
||
state.turnId ? "working" : "",
|
||
).replace(/([a-z])([A-Z])/g, "$1_$2").toLowerCase().replace(/[\s-]+/g, "_");
|
||
}
|
||
const unread = [
|
||
entry.hasUnreadTurn, entry.has_unread_turn, entry.unread, entry.isUnread,
|
||
entry.needsAttention, entry.needs_attention, thread.hasUnreadTurn, thread.has_unread_turn,
|
||
].some((value) => value === true || value === 1 || ["true", "1", "yes"].includes(String(value || "").toLowerCase()));
|
||
let kind = "idle";
|
||
if (entry.isApproval === true || /approval|permission|request_approval|awaiting_authorization|needs_authorization|requires_action/.test(rawStatus)) kind = "approval";
|
||
else if (entry.isWaiting === true || /needs?_?input|waiting_for_input|pending_input|pending|queued/.test(rawStatus)) kind = "waiting";
|
||
else if (entry.isEditing === true || /edit|apply_patch|file_change|writing/.test(rawStatus)) kind = "editing";
|
||
else if (entry.isThinking === true || /think|reason/.test(rawStatus)) kind = "thinking";
|
||
else if (entry.isWorking === true || entry.isRunning === true || /run|stream|working|in_progress|active|busy|generat/.test(rawStatus)) kind = "working";
|
||
else if (/error|fail|cancel|interrupt/.test(rawStatus)) kind = "error";
|
||
else if (unread) kind = "unread";
|
||
const labels = {
|
||
approval: "等待授权",
|
||
waiting: "等待输入",
|
||
editing: "编辑中",
|
||
thinking: "思考中",
|
||
working: "进行中",
|
||
error: "异常",
|
||
unread: "未读",
|
||
idle: "",
|
||
};
|
||
return {
|
||
kind,
|
||
label: labels[kind] || "",
|
||
active: ["approval", "waiting", "editing", "thinking", "working"].includes(kind),
|
||
attention: ["approval", "waiting", "error", "unread"].includes(kind) || unread,
|
||
unread,
|
||
};
|
||
}
|
||
|
||
function sessionEntrySearchText(entry) {
|
||
if (!isRecord(entry)) return "";
|
||
const thread = isRecord(entry.thread) ? entry.thread : {};
|
||
const status = sessionEntryStatus(entry);
|
||
return [
|
||
sessionEntryTitle(entry), sessionEntryCwd(entry), sessionEntryId(entry),
|
||
status.label, entry.mode, entry.source, entry.threadSource, thread.mode,
|
||
].filter((value) => typeof value === "string" && value.trim()).join(" ").toLowerCase();
|
||
}
|
||
|
||
function sessionOptionDomId(threadId) {
|
||
try {
|
||
return `session-option-${encodeURIComponent(String(threadId)).replace(/%/g, "_")}`;
|
||
} catch {
|
||
return `session-option-${String(threadId).replace(/[^a-z0-9_-]/gi, "_")}`;
|
||
}
|
||
}
|
||
|
||
function sessionEntryIsActive(entry, activeId = "") {
|
||
if (!isRecord(entry)) return false;
|
||
const id = sessionEntryId(entry);
|
||
return id === activeId || entry.active === true || entry.active === 1
|
||
|| ["true", "1", "yes"].includes(String(entry.active || "").toLowerCase());
|
||
}
|
||
|
||
function sessionEntryIsAvailable(entry) {
|
||
return isRecord(entry)
|
||
&& entry.available !== false
|
||
&& entry.canAttach !== false
|
||
&& entry.attachable !== false;
|
||
}
|
||
|
||
function sessionIsSelectable(entry, activeId, canSwitch) {
|
||
if (!isRecord(entry)) return false;
|
||
const id = sessionEntryId(entry);
|
||
const available = sessionEntryIsAvailable(entry);
|
||
const current = sessionEntryIsActive(entry, activeId);
|
||
return Boolean(id && available && !current && canSwitch && !state.sessionSwitching);
|
||
}
|
||
|
||
function filteredSessionEntries() {
|
||
const source = Array.isArray(state.sessions)
|
||
? state.sessions
|
||
.filter(isRecord)
|
||
.filter((entry) => !state.attachMode || sessionEntryIsAvailable(entry))
|
||
.map((entry, index) => ({ entry, index }))
|
||
: [];
|
||
source.sort((left, right) => {
|
||
const rightTime = sessionEntryUpdatedAt(right.entry) ?? 0;
|
||
const leftTime = sessionEntryUpdatedAt(left.entry) ?? 0;
|
||
return rightTime - leftTime || left.index - right.index;
|
||
});
|
||
const ordered = source.map(({ entry }) => entry);
|
||
const query = String(state.sessionSearch || "").trim().toLowerCase();
|
||
return query ? ordered.filter((entry) => sessionEntrySearchText(entry).includes(query)) : ordered;
|
||
}
|
||
|
||
function sessionPathLabel(value) {
|
||
const text = String(value || "").trim();
|
||
if (!text) return t("本地会话");
|
||
const parts = text.split(/[\\/]+/).filter(Boolean);
|
||
return parts.length > 1 ? `${t("工作区")} · ${parts[parts.length - 1]}` : text;
|
||
}
|
||
|
||
function sessionTimeLabel(value) {
|
||
const timestamp = timestampMs(value);
|
||
if (timestamp === null) return "";
|
||
try {
|
||
const date = new Date(timestamp);
|
||
const now = new Date();
|
||
const day = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
|
||
const today = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate());
|
||
const difference = Math.round((today - day) / 86_400_000);
|
||
const locale = uiLocale();
|
||
const time = new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit" }).format(date);
|
||
if (difference === 0) return time;
|
||
if (difference === 1) return `${t("昨天")} ${time}`;
|
||
if (difference > 1 && difference < 7) return `${new Intl.DateTimeFormat(locale, { weekday: "short" }).format(date)} ${time}`;
|
||
return `${new Intl.DateTimeFormat(locale, { month: "numeric", day: "numeric" }).format(date)} ${time}`;
|
||
} catch {
|
||
return "";
|
||
}
|
||
}
|
||
|
||
function renderSessionPicker() {
|
||
const list = $("sessionList");
|
||
const status = $("sessionPickerStatus");
|
||
const picker = $("sessionPicker");
|
||
if (!list || !status || !picker) return;
|
||
renderControlMode();
|
||
const activeId = String(state.threadId || state.syncedThreadId || "");
|
||
const canSwitch = sessionControlAllowed("sessionSelect")
|
||
&& state.appReady
|
||
&& state.ws?.readyState === WebSocket.OPEN
|
||
&& !state.turnId
|
||
&& state.requests.size === 0;
|
||
const allSessions = Array.isArray(state.sessions)
|
||
? state.sessions.filter(isRecord).filter((entry) => !state.attachMode || sessionEntryIsAvailable(entry))
|
||
: [];
|
||
const sessions = filteredSessionEntries();
|
||
const query = String(state.sessionSearch || "").trim();
|
||
const selectableIds = sessions
|
||
.filter((entry) => sessionIsSelectable(entry, activeId, canSwitch))
|
||
.map((entry) => sessionEntryId(entry));
|
||
if (!selectableIds.includes(state.sessionFocusedId)) {
|
||
state.sessionFocusedId = selectableIds[0] || "";
|
||
}
|
||
const searchInput = $("sessionSearchInput");
|
||
const searchClear = $("sessionSearchClear");
|
||
if (searchInput) {
|
||
if (searchInput.value !== state.sessionSearch) searchInput.value = state.sessionSearch;
|
||
searchInput.setAttribute("aria-expanded", String(state.sessionPickerOpen));
|
||
searchInput.setAttribute("aria-activedescendant", state.sessionFocusedId ? sessionOptionDomId(state.sessionFocusedId) : "");
|
||
}
|
||
if (searchClear) searchClear.hidden = !query;
|
||
list.replaceChildren();
|
||
picker.dataset.switching = String(state.sessionSwitching);
|
||
list.setAttribute("aria-activedescendant", state.sessionFocusedId ? sessionOptionDomId(state.sessionFocusedId) : "");
|
||
status.dataset.tone = state.sessionListError ? "warning" : "";
|
||
if (state.sessionListLoading && !sessions.length) status.textContent = t("正在读取会话…");
|
||
else if (state.sessionSwitching) {
|
||
const targetTitle = state.sessionSwitchContext?.targetTitle;
|
||
status.textContent = targetTitle
|
||
? uiLocale() === "en-US" ? `Switching to “${targetTitle}”...` : `正在切换到「${targetTitle}」…`
|
||
: t("正在切换会话…");
|
||
}
|
||
else if (state.sessionListError) status.textContent = t(state.sessionListError);
|
||
else if (!canSwitch && sessions.length > 1) status.textContent = t("当前任务结束或请求处理后才能切换");
|
||
else if (query) status.textContent = uiLocale() === "en-US"
|
||
? `${sessions.length}/${allSessions.length} conversations`
|
||
: `${sessions.length}/${allSessions.length} 个会话`;
|
||
else status.textContent = sessions.length
|
||
? (uiLocale() === "en-US" ? `${sessions.length} conversations` : `${sessions.length} 个会话`)
|
||
: "";
|
||
|
||
if (!sessions.length && !state.sessionListLoading) {
|
||
const empty = document.createElement("div");
|
||
empty.className = "session-list-empty";
|
||
const listError = String(state.sessionListError || "");
|
||
empty.textContent = listError === "等待 VS Code 主机连接"
|
||
? t("等待 VS Code 伴随扩展连接")
|
||
: listError === "VS Code 主机未连接"
|
||
? t("VS Code 伴随扩展未连接")
|
||
: listError === "等待 relay 连接"
|
||
? t("等待 relay 连接")
|
||
: listError
|
||
? t("无法读取会话")
|
||
: query
|
||
? t("没有匹配的会话")
|
||
: t(state.attachMode ? "没有可附加的会话" : "没有可控制的会话");
|
||
list.append(empty);
|
||
return;
|
||
}
|
||
for (const raw of sessions) {
|
||
if (!isRecord(raw)) continue;
|
||
const id = sessionEntryId(raw);
|
||
if (!id) continue;
|
||
const title = sessionEntryTitle(raw) || `${t("会话")} ${id.slice(0, 8)}`;
|
||
const cwd = sessionEntryCwd(raw);
|
||
const updated = sessionEntryUpdatedAt(raw);
|
||
const current = sessionEntryIsActive(raw, activeId);
|
||
const available = sessionEntryIsAvailable(raw);
|
||
const statusInfo = sessionEntryStatus(raw);
|
||
const switchingTarget = state.sessionSwitching && id === state.sessionSelectedThreadId;
|
||
const selectable = sessionIsSelectable(raw, activeId, canSwitch);
|
||
const option = document.createElement("button");
|
||
option.type = "button";
|
||
option.className = "session-option";
|
||
option.id = sessionOptionDomId(id);
|
||
option.dataset.available = String(available);
|
||
option.dataset.threadId = id;
|
||
option.dataset.status = statusInfo.kind;
|
||
option.dataset.unread = String(statusInfo.unread);
|
||
option.dataset.switching = String(switchingTarget);
|
||
option.dataset.focused = String(id === state.sessionFocusedId);
|
||
option.setAttribute("role", "option");
|
||
option.setAttribute("aria-selected", String(current));
|
||
option.setAttribute("aria-disabled", String(!selectable));
|
||
option.disabled = !selectable;
|
||
const titleNode = document.createElement("span");
|
||
titleNode.className = "session-option-title";
|
||
titleNode.textContent = title;
|
||
titleNode.title = title;
|
||
const timeNode = document.createElement("span");
|
||
timeNode.className = "session-option-time";
|
||
timeNode.textContent = sessionTimeLabel(updated);
|
||
const metaNode = document.createElement("span");
|
||
metaNode.className = "session-option-meta";
|
||
metaNode.textContent = sessionPathLabel(cwd);
|
||
metaNode.title = cwd || title;
|
||
const stateNode = document.createElement("span");
|
||
stateNode.className = "session-option-state";
|
||
const stateLabels = [];
|
||
if (switchingTarget) stateLabels.push(t("正在切换"));
|
||
else if (!available) stateLabels.push(t("未打开"));
|
||
else if (current) stateLabels.push(t("当前"));
|
||
else if (!statusInfo.label) stateLabels.push(t("可切换"));
|
||
if (available && statusInfo.label && (!current || statusInfo.active || statusInfo.attention)) stateLabels.push(t(statusInfo.label));
|
||
const stateDot = document.createElement("span");
|
||
stateDot.className = "session-status-dot";
|
||
stateDot.setAttribute("aria-hidden", "true");
|
||
stateNode.append(stateDot, document.createTextNode(stateLabels.join(" · ")));
|
||
option.append(titleNode, timeNode, metaNode, stateNode);
|
||
option.setAttribute("aria-label", `${title}, ${stateLabels.join(", ") || t("会话")}`);
|
||
option.addEventListener("mouseenter", () => {
|
||
if (option.disabled) return;
|
||
state.sessionFocusedId = id;
|
||
for (const peer of list.querySelectorAll(".session-option")) peer.dataset.focused = String(peer.dataset.threadId === id);
|
||
list.setAttribute("aria-activedescendant", sessionOptionDomId(id));
|
||
});
|
||
if (!option.disabled) option.addEventListener("click", () => {
|
||
state.sessionFocusedId = id;
|
||
selectSession(id, title);
|
||
});
|
||
list.append(option);
|
||
}
|
||
}
|
||
|
||
function sessionPickerOptions() {
|
||
return [...document.querySelectorAll("#sessionList .session-option")]
|
||
.filter((option) => !option.disabled && option.dataset.threadId);
|
||
}
|
||
|
||
function setSessionFocus(threadId, { scroll = true } = {}) {
|
||
const id = String(threadId || "");
|
||
state.sessionFocusedId = id;
|
||
const list = $("sessionList");
|
||
if (!list) return;
|
||
const options = list.querySelectorAll(".session-option");
|
||
for (const option of options) option.dataset.focused = String(option.dataset.threadId === id);
|
||
list.setAttribute("aria-activedescendant", id ? sessionOptionDomId(id) : "");
|
||
$("sessionSearchInput")?.setAttribute("aria-activedescendant", id ? sessionOptionDomId(id) : "");
|
||
if (scroll) {
|
||
const target = [...list.querySelectorAll(".session-option")]
|
||
.find((option) => option.dataset.threadId === id);
|
||
target?.scrollIntoView?.({ block: "nearest" });
|
||
}
|
||
}
|
||
|
||
function moveSessionFocus(delta) {
|
||
const options = sessionPickerOptions();
|
||
if (!options.length) return false;
|
||
let index = options.findIndex((option) => option.dataset.threadId === state.sessionFocusedId);
|
||
if (index < 0) index = delta >= 0 ? -1 : 0;
|
||
index = (index + delta + options.length) % options.length;
|
||
setSessionFocus(options[index].dataset.threadId);
|
||
return true;
|
||
}
|
||
|
||
function activateFocusedSession() {
|
||
const id = state.sessionFocusedId;
|
||
if (!id) return false;
|
||
const entry = (Array.isArray(state.sessions) ? state.sessions : [])
|
||
.find((candidate) => sessionEntryId(candidate) === id);
|
||
if (!entry) return false;
|
||
const activeId = String(state.threadId || state.syncedThreadId || "");
|
||
const canSwitch = !state.turnId && state.requests.size === 0;
|
||
if (!sessionIsSelectable(entry, activeId, canSwitch)) return false;
|
||
selectSession(id, sessionEntryTitle(entry));
|
||
return true;
|
||
}
|
||
|
||
function handleSessionPickerKeydown(event) {
|
||
if (!state.sessionPickerOpen) return;
|
||
if (event.key === "ArrowDown") {
|
||
if (moveSessionFocus(1)) event.preventDefault();
|
||
return;
|
||
}
|
||
if (event.key === "ArrowUp") {
|
||
if (moveSessionFocus(-1)) event.preventDefault();
|
||
return;
|
||
}
|
||
if (event.key === "Home") {
|
||
const options = sessionPickerOptions();
|
||
if (options.length) {
|
||
setSessionFocus(options[0].dataset.threadId);
|
||
event.preventDefault();
|
||
}
|
||
return;
|
||
}
|
||
if (event.key === "End") {
|
||
const options = sessionPickerOptions();
|
||
if (options.length) {
|
||
setSessionFocus(options[options.length - 1].dataset.threadId);
|
||
event.preventDefault();
|
||
}
|
||
return;
|
||
}
|
||
if (event.key === "Enter") {
|
||
if (activateFocusedSession()) event.preventDefault();
|
||
return;
|
||
}
|
||
if (event.key === "Escape") {
|
||
event.preventDefault();
|
||
setSessionPicker(false);
|
||
}
|
||
}
|
||
|
||
function setSessionPicker(open) {
|
||
const picker = $("sessionPicker");
|
||
const button = $("sessionPickerButton");
|
||
if (!picker || !button) return;
|
||
const next = Boolean(open) && sessionControlAllowed("sessionList") && !state.modeSwitching;
|
||
picker.hidden = !next;
|
||
state.sessionPickerOpen = next;
|
||
button.setAttribute("aria-expanded", String(next));
|
||
if (next) {
|
||
state.sessionSearch = "";
|
||
state.sessionFocusedId = "";
|
||
$("panelMenu").hidden = true;
|
||
$("detailsPopover").hidden = true;
|
||
renderSessionPicker();
|
||
requestSessionList();
|
||
scheduleFrame(() => {
|
||
if (state.sessionPickerOpen) $("sessionSearchInput")?.focus();
|
||
});
|
||
} else {
|
||
state.sessionSearch = "";
|
||
state.sessionFocusedId = "";
|
||
const input = $("sessionSearchInput");
|
||
if (input) {
|
||
input.value = "";
|
||
input.setAttribute("aria-expanded", "false");
|
||
input.setAttribute("aria-activedescendant", "");
|
||
}
|
||
const clear = $("sessionSearchClear");
|
||
if (clear) clear.hidden = true;
|
||
if (picker.contains(document.activeElement)) button.focus();
|
||
}
|
||
}
|
||
|
||
function openSessionHistory() {
|
||
if (!sessionControlAllowed("sessionList")) return;
|
||
setSessionPicker(true);
|
||
}
|
||
|
||
function requestControlMode(value) {
|
||
const mode = normalizeControlMode(value);
|
||
if (!mode || mode === state.controlMode || controlModeChangeBlocked()) return;
|
||
closePopovers();
|
||
state.modeSwitching = true;
|
||
state.requestedControlMode = mode;
|
||
state.modeRequestEpoch = state.modeEpoch;
|
||
setConversationStatus("正在切换控制模式", "active");
|
||
updateIds();
|
||
try {
|
||
state.modeCommandId = command("control/mode/set", { mode });
|
||
} catch (error) {
|
||
clearControlModeRequest();
|
||
setConversationStatus(error?.message || "控制模式切换失败", "warning");
|
||
updateIds();
|
||
}
|
||
}
|
||
|
||
function requestNewSession() {
|
||
closePopovers();
|
||
if (!sessionControlAllowed("sessionCreate")) {
|
||
setConversationStatus("同步模式下会话管理由 VS Code 控制", "warning");
|
||
return;
|
||
}
|
||
if (!state.ws || state.ws.readyState !== WebSocket.OPEN) {
|
||
setConversationStatus("等待 relay 连接", "warning");
|
||
return;
|
||
}
|
||
if (!state.appReady) {
|
||
setConversationStatus("等待 VS Code 主机连接", "warning");
|
||
return;
|
||
}
|
||
if (state.role !== "operator" && state.role !== "owner" && state.role !== "host") {
|
||
setConversationStatus("当前角色不能创建会话", "warning");
|
||
return;
|
||
}
|
||
if (state.newSessionCommandId) return;
|
||
try {
|
||
state.newSessionCommandId = command("session/new", {});
|
||
setConversationStatus("正在创建新会话", "active");
|
||
updateIds();
|
||
} catch (error) {
|
||
state.newSessionCommandId = "";
|
||
setConversationStatus(sessionErrorMessage(error, "无法创建新会话"), "warning");
|
||
updateIds();
|
||
}
|
||
}
|
||
|
||
function requestSessionList() {
|
||
if (!sessionControlAllowed("sessionList")) return;
|
||
if (state.sessionListLoading) {
|
||
renderSessionPicker();
|
||
return;
|
||
}
|
||
if (!state.ws || state.ws.readyState !== WebSocket.OPEN) {
|
||
state.sessionListError = "等待 relay 连接";
|
||
renderSessionPicker();
|
||
return;
|
||
}
|
||
if (!state.appReady) {
|
||
state.sessionListError = "等待 VS Code 主机连接";
|
||
renderSessionPicker();
|
||
return;
|
||
}
|
||
state.sessionListLoading = true;
|
||
state.sessionListError = "";
|
||
renderSessionPicker();
|
||
try {
|
||
state.sessionListCommandId = command("session/list", {});
|
||
} catch (error) {
|
||
state.sessionListLoading = false;
|
||
state.sessionListError = sessionErrorMessage(error, "无法读取会话");
|
||
renderSessionPicker();
|
||
}
|
||
}
|
||
|
||
function selectSession(threadId, title = "") {
|
||
const id = String(threadId || "").trim();
|
||
if (!sessionControlAllowed("sessionSelect")) return;
|
||
if (!id || state.sessionSwitching || id === state.threadId) return;
|
||
if (state.turnId || state.requests.size) {
|
||
state.sessionListError = "当前任务仍在运行或等待授权，暂不能切换";
|
||
renderSessionPicker();
|
||
return;
|
||
}
|
||
const context = beginSessionSwitchContext(id, title);
|
||
state.sessionSwitching = true;
|
||
state.sessionListError = "";
|
||
setSessionSwitchingVisual(true);
|
||
renderSessionPicker();
|
||
try {
|
||
state.sessionSelectCommandId = command("session/select", { threadId: id });
|
||
setConversationStatus(
|
||
context.targetTitle
|
||
? uiLocale() === "en-US" ? `Switching to “${context.targetTitle}”` : `正在切换到「${context.targetTitle}」`
|
||
: t("正在切换会话"),
|
||
"active",
|
||
);
|
||
} catch (error) {
|
||
restoreSessionSwitchContext();
|
||
state.sessionListError = sessionErrorMessage(error, "会话切换失败");
|
||
renderSessionPicker();
|
||
}
|
||
}
|
||
|
||
function applySessionListResult(result) {
|
||
const body = isRecord(result) ? result : {};
|
||
const source = Array.isArray(result) ? result : Array.isArray(body.sessions) ? body.sessions : Array.isArray(body.threads) ? body.threads : [];
|
||
const activeId = firstString(body.activeThreadId, body.threadId);
|
||
state.sessions = source
|
||
.filter((entry) => isRecord(entry))
|
||
.filter((entry) => !state.attachMode || sessionEntryIsAvailable(entry))
|
||
.map((entry) => ({ ...entry }));
|
||
if (activeId) state.sessions = state.sessions.map((entry) => ({ ...entry, active: sessionEntryId(entry) === activeId || entry.active === true }));
|
||
state.sessionListLoading = false;
|
||
state.sessionListCommandId = "";
|
||
state.sessionListError = "";
|
||
renderSessionPicker();
|
||
}
|
||
|
||
function applySessionSelectResult(result) {
|
||
const body = isRecord(result) ? result : {};
|
||
const selected = firstString(body.threadId, body.activeThreadId);
|
||
state.sessionSelectedThreadId = selected;
|
||
if (selected && state.sessions.length) {
|
||
state.sessions = state.sessions.map((entry) => ({ ...entry, active: sessionEntryId(entry) === selected }));
|
||
}
|
||
// A command result confirms only that the command completed. The switch
|
||
// itself stays fenced until both the sequenced `session.selected` event
|
||
// and the target's authoritative projection have independently arrived.
|
||
// This also keeps automatic VS Code navigation and picker navigation on
|
||
// the same completion path.
|
||
if (state.sessionSwitchContext) {
|
||
state.sessionSwitching = true;
|
||
setSessionSwitchingVisual(true);
|
||
const context = state.sessionSwitchContext;
|
||
setConversationStatus(
|
||
context.targetSnapshotReady ? "正在确认会话" : "正在加载会话",
|
||
"active",
|
||
);
|
||
} else {
|
||
state.sessionSwitching = false;
|
||
state.sessionSelectCommandId = "";
|
||
finishSessionSwitchContext();
|
||
}
|
||
renderSessionPicker();
|
||
if (!state.sessionSwitching) {
|
||
setSessionPicker(false);
|
||
setConversationStatus("会话已切换", "ready");
|
||
}
|
||
requestRefresh();
|
||
}
|
||
|
||
function syncSessionActive(threadId) {
|
||
const activeId = String(threadId || "");
|
||
if (!activeId || !Array.isArray(state.sessions) || !state.sessions.length) return;
|
||
state.sessions = state.sessions.map((entry) => ({
|
||
...entry,
|
||
active: sessionEntryId(entry) === activeId,
|
||
}));
|
||
renderSessionPicker();
|
||
}
|
||
|
||
function messageText(item) {
|
||
if (!isRecord(item)) return "";
|
||
const direct = [item.text, item.content, item.message, item.summary, item.output]
|
||
.find((value) => typeof value === "string" && value.length);
|
||
if (direct) return direct;
|
||
if (Array.isArray(item.content)) {
|
||
return item.content.map((part) => {
|
||
if (typeof part === "string") return part;
|
||
if (!isRecord(part)) return "";
|
||
return part.text || part.content || part.value || "";
|
||
}).filter(Boolean).join("\n");
|
||
}
|
||
// Official collaboration records are often state-only projections: they
|
||
// carry an agent id/name and lifecycle kind, but no user-facing `text`.
|
||
// Keep those rows in the transcript so the sub-agent disclosure and panel
|
||
// can be hydrated from the same snapshot.
|
||
if (historyKind(item) === "subagent") {
|
||
const agent = isRecord(item.agent) ? item.agent : {};
|
||
const name = firstString(
|
||
item.displayName,
|
||
item.agentNickname,
|
||
item.agentName,
|
||
item.agentPath,
|
||
agent.displayName,
|
||
agent.name,
|
||
item.agentThreadId ? `thread ${item.agentThreadId}` : "子代理",
|
||
);
|
||
const objective = firstString(
|
||
item.objective,
|
||
item.prompt,
|
||
item.statusMessage,
|
||
item.description,
|
||
agent.objective,
|
||
agent.prompt,
|
||
);
|
||
const action = firstString(item.action, item.tool, item.activityKind, agent.action);
|
||
const rawStatus = firstString(item.displayStatus, item.status, item.state, agent.status);
|
||
const normalizedStatus = normalizeSubagentStatus(rawStatus);
|
||
const statusText = subagentStatusLabel(normalizedStatus);
|
||
if (objective && name) return `${name}：${objective}`;
|
||
if (action && name) return `${name} · ${action}`;
|
||
if (name) return `${name} · ${statusText}`;
|
||
return `子代理 · ${statusText}`;
|
||
}
|
||
if (isReadActivity(item)) {
|
||
return firstString(...readPathList(item), commandText(item), "读取文件");
|
||
}
|
||
if (/(?:command|exec|process|tool)/i.test(String(item.type || item.kind || ""))) {
|
||
return firstString(commandText(item), "工具输出");
|
||
}
|
||
const fallback = [item.reasoning, item.plan, item.steps, item.diff, item.patch, item.description]
|
||
.map((value) => displayValue(value))
|
||
.find((value) => value);
|
||
if (fallback) return fallback;
|
||
return "";
|
||
}
|
||
|
||
function historyKind(item) {
|
||
const sourceKind = String(item?.kind || item?.type || "assistant").toLowerCase();
|
||
if (item?.uiType === "subagent-activity" || item?.uiType === "multi-agent-action"
|
||
|| sourceKind.includes("subagent") || sourceKind.includes("collabagent")) return "subagent";
|
||
if (item?.role === "user" || sourceKind.includes("user")) return "user";
|
||
if (isReadActivity(item)) return "read";
|
||
if (sourceKind.includes("edit") || sourceKind.includes("filechange") || sourceKind.includes("patch")) return "edit";
|
||
if (sourceKind.includes("tool") || sourceKind.includes("command") || sourceKind.includes("exec") || sourceKind.includes("process")
|
||
|| sourceKind.includes("websearch") || sourceKind.includes("mcp") || sourceKind.includes("imageview")
|
||
|| sourceKind.includes("generatedimage") || sourceKind.includes("dynamictool")
|
||
|| sourceKind.includes("permissionrequest") || sourceKind.includes("userinput")) return "tool";
|
||
if (sourceKind.includes("reasoning") || sourceKind.includes("contextcompaction") || sourceKind.includes("approvalreview")) return "reasoning";
|
||
if (sourceKind.includes("plan") || sourceKind.includes("todo")) return "plan";
|
||
return "assistant";
|
||
}
|
||
|
||
function normalizedAssistantPhase(item) {
|
||
return String(item?.phase || item?.messagePhase || "")
|
||
.replace(/[\s-]+/g, "_")
|
||
.toLowerCase();
|
||
}
|
||
|
||
// Agent commentary is a work item in the official transcript. It belongs
|
||
// inside the worked-for disclosure, while the final answer stays outside it.
|
||
// Older snapshots omit `phase`, so use the last item in the turn as the
|
||
// fallback final answer boundary.
|
||
function isAssistantCommentary(item, index, turnKey, turnLastIndex) {
|
||
if (historyKind(item) !== "assistant") return false;
|
||
const phase = normalizedAssistantPhase(item);
|
||
if (phase === "final_answer" || phase === "finalanswer") return false;
|
||
if (phase === "commentary" || phase === "analysis" || phase === "reasoning" || phase === "thinking") return true;
|
||
return turnLastIndex instanceof Map && turnLastIndex.get(turnKey) !== index;
|
||
}
|
||
|
||
function structuredTurnFinalAssistantIndexes(messages) {
|
||
const result = new Map();
|
||
const explicit = new Set();
|
||
if (!Array.isArray(messages)) return result;
|
||
messages.forEach((item, index) => {
|
||
if (!isRecord(item) || historyKind(item) !== "assistant") return;
|
||
const key = structuredMessageTurn(item, index);
|
||
const phase = normalizedAssistantPhase(item);
|
||
if (phase === "final_answer" || phase === "finalanswer") {
|
||
result.set(key, index);
|
||
explicit.add(key);
|
||
} else if (!explicit.has(key)) {
|
||
// A bookkeeping/sub-agent item can follow the answer in newer
|
||
// snapshots. Choose the last assistant message, not the last item.
|
||
result.set(key, index);
|
||
}
|
||
});
|
||
return result;
|
||
}
|
||
|
||
function structuredDisplayKind(item, index, turnKey, turnLastIndex) {
|
||
const kind = historyKind(item);
|
||
return kind === "assistant" && isAssistantCommentary(item, index, turnKey, turnLastIndex)
|
||
? "commentary"
|
||
: kind;
|
||
}
|
||
|
||
function isCollapsibleKind(kind) {
|
||
return kind === "tool" || kind === "read" || kind === "edit" || kind === "reasoning"
|
||
|| kind === "plan" || kind === "subagent" || kind === "commentary";
|
||
}
|
||
|
||
function isReadActivity(item) {
|
||
if (!isRecord(item)) return false;
|
||
const type = normalizedItemType(item);
|
||
const semantic = String(item.activityKind || item.uiType || item.operation || item.commandType || "")
|
||
.replace(/[\s_./-]+/g, "")
|
||
.toLowerCase();
|
||
const parsed = item.parsedCmd || item.parsedCommand || item.parsedCommandType;
|
||
const parsedType = typeof parsed === "string"
|
||
? parsed
|
||
: isRecord(parsed) ? firstString(parsed.type, parsed.kind, parsed.operation) : "";
|
||
const parsedNormalized = String(parsedType).replace(/[\s_./-]+/g, "").toLowerCase();
|
||
return semantic.includes("fileread") || semantic.includes("readfile") || semantic === "read"
|
||
|| type.includes("fileread") || type.includes("readfile") || type === "read"
|
||
|| parsedNormalized === "read" || parsedNormalized === "fileread";
|
||
}
|
||
|
||
function readPathList(item) {
|
||
if (!isRecord(item)) return [];
|
||
const paths = [];
|
||
const visit = (value) => {
|
||
if (typeof value === "string" && value.trim()) paths.push(value.trim());
|
||
else if (Array.isArray(value)) value.forEach(visit);
|
||
else if (isRecord(value)) visit(value.path ?? value.file ?? value.filePath ?? value.name);
|
||
};
|
||
[item.path, item.file, item.filePath, item.filename, item.name, item.readPath, item.readPaths, item.files, item.paths].forEach(visit);
|
||
return [...new Set(paths)];
|
||
}
|
||
|
||
function readSummaryLabel(item, status, duration = "") {
|
||
const paths = [...new Set(readPathList(item).flatMap((value) => String(value).split(/\r?\n/).map((part) => part.trim()).filter(Boolean)))];
|
||
const suffix = duration ? ` · ${duration}` : "";
|
||
if (status === "inProgress") return paths.length === 1
|
||
? uiWithRaw("正在读取 ", "Reading ", paths[0])
|
||
: t("正在读取文件");
|
||
if (status === "failed") return paths.length === 1
|
||
? `${uiWithRaw("读取失败 · ", "Failed to read ", paths[0])}${suffix}`
|
||
: `${t("读取文件失败")}${suffix}`;
|
||
if (status === "interrupted") return paths.length === 1
|
||
? `${uiWithRaw("已停止读取 ", "Stopped reading ", paths[0])}${suffix}`
|
||
: `${t("已停止读取文件")}${suffix}`;
|
||
if (paths.length === 1) return `${uiWithRaw("已读取 ", "Read ", paths[0])}${suffix}`;
|
||
if (paths.length > 1) {
|
||
const count = String(paths.length);
|
||
return `${uiText("已读取这些内容 · ", "Read these items · ")}${count}${uiText(" 个文件", " files")}${suffix}`;
|
||
}
|
||
return `${t("已读取文件")}${suffix}`;
|
||
}
|
||
|
||
function structuredMessageKey(item, index) {
|
||
const id = item?.id ?? item?.itemId;
|
||
if (id !== undefined && id !== null && String(id)) return `id:${String(id)}`;
|
||
const turn = item?.turnId ? String(item.turnId) : "item";
|
||
return `turn:${turn}:${historyKind(item)}:${index}`;
|
||
}
|
||
|
||
function structuredMessageRole(item, kind) {
|
||
return item.role === "user" || kind === "user"
|
||
? "user"
|
||
: item.role === "tool" || kind === "tool" || kind === "read" || kind === "edit" || kind === "subagent"
|
||
? "tool"
|
||
: item.role === "reasoning" || kind === "reasoning" || kind === "plan"
|
||
? "system"
|
||
: item.role === "error"
|
||
? "error"
|
||
: "assistant";
|
||
}
|
||
|
||
function structuredMessageStatus(item) {
|
||
if (item.status !== undefined && item.status !== null && item.status !== "") {
|
||
return normalizeActivityStatus(item.status, String(item.status));
|
||
}
|
||
if (item.completed === true) return "completed";
|
||
if (item.completed === false) return "inProgress";
|
||
if (item.turnStatus !== undefined && item.turnStatus !== null && item.turnStatus !== "") {
|
||
return normalizeActivityStatus(item.turnStatus, String(item.turnStatus));
|
||
}
|
||
return "";
|
||
}
|
||
|
||
function explicitStructuredTurnId(item) {
|
||
if (!isRecord(item)) return "";
|
||
const nestedTurn = isRecord(item.turn) ? item.turn : {};
|
||
const value = [
|
||
item.turnId,
|
||
item.conversationTurnId,
|
||
item.conversation_turn_id,
|
||
item.turn_id,
|
||
nestedTurn.id,
|
||
nestedTurn.turnId,
|
||
].find((candidate) => candidate !== undefined && candidate !== null && String(candidate).trim());
|
||
return value === undefined ? "" : String(value);
|
||
}
|
||
|
||
function deriveStructuredTurnKeys(messages) {
|
||
if (!Array.isArray(messages)) return new Map();
|
||
const keys = new Map();
|
||
let anonymousNumber = 0;
|
||
let currentKey = "";
|
||
let currentHasUser = false;
|
||
let currentEnded = false;
|
||
const makeAnonymousKey = () => `anonymous:${anonymousNumber++}`;
|
||
messages.forEach((item, index) => {
|
||
if (!isRecord(item)) return;
|
||
const explicit = explicitStructuredTurnId(item);
|
||
const kind = historyKind(item);
|
||
if (explicit) {
|
||
currentKey = explicit;
|
||
currentHasUser = kind === "user";
|
||
currentEnded = false;
|
||
keys.set(item, currentKey);
|
||
return;
|
||
}
|
||
if (!currentKey || kind === "user" && (currentHasUser || currentEnded)) {
|
||
currentKey = makeAnonymousKey();
|
||
currentHasUser = false;
|
||
currentEnded = false;
|
||
}
|
||
if (kind === "user") currentHasUser = true;
|
||
keys.set(item, currentKey);
|
||
// A final-answer marker is the only reliable boundary in a legacy
|
||
// projection. Do not use turnStatus here: adapters attach the terminal
|
||
// turn status to every item in the turn.
|
||
const phase = normalizedAssistantPhase(item);
|
||
if (kind === "assistant" && (phase === "final_answer" || phase === "finalanswer")) currentEnded = true;
|
||
// Keep the index in the map as a debugging fallback for primitive array
|
||
// entries, while object identity remains the canonical lookup.
|
||
if (index < 0) keys.set(item, currentKey);
|
||
});
|
||
state.structuredTurnKeys = new WeakMap();
|
||
for (const [item, key] of keys) state.structuredTurnKeys.set(item, key);
|
||
return keys;
|
||
}
|
||
|
||
function structuredMessageTurn(item, index) {
|
||
const explicit = explicitStructuredTurnId(item);
|
||
if (explicit) return explicit;
|
||
if (isRecord(item)) {
|
||
const derived = state.structuredTurnKeys?.get(item);
|
||
if (derived) return derived;
|
||
}
|
||
return `item:${index}`;
|
||
}
|
||
|
||
function structuredActivityKey(item, kind, turnKey, index) {
|
||
const itemId = item?.itemId ?? item?.id;
|
||
const threadKey = item?.threadId || state.threadId || "thread";
|
||
if (itemId !== undefined && itemId !== null && String(itemId)) {
|
||
return `${threadKey}:${turnKey || "turn"}:${kind}:${typeof itemId}:${String(itemId)}`;
|
||
}
|
||
return `structured:${structuredMessageKey(item, index)}`;
|
||
}
|
||
|
||
function structuredTurnWorkedDurations(messages) {
|
||
const result = new Map();
|
||
const explicitKeys = new Set();
|
||
const starts = new Map();
|
||
const ends = new Map();
|
||
if (!Array.isArray(messages)) return result;
|
||
deriveStructuredTurnKeys(messages);
|
||
const finalAssistantIndexes = structuredTurnFinalAssistantIndexes(messages);
|
||
messages.forEach((item, index) => {
|
||
const key = structuredMessageTurn(item, index);
|
||
const explicit = finiteNumber(
|
||
item?.workedDurationMs,
|
||
item?.workDurationMs,
|
||
item?.workedForMs,
|
||
item?.turnWorkedDurationMs,
|
||
item?.workedFor?.durationMs,
|
||
);
|
||
if (explicit !== null) {
|
||
result.set(key, Math.max(0, explicit));
|
||
explicitKeys.add(key);
|
||
}
|
||
const workStart = timestampMs(
|
||
item?.firstTurnWorkItemStartedAtMs,
|
||
item?.workStartedAtMs,
|
||
item?.turnWorkStartedAtMs,
|
||
item?.turnStartedAtMs,
|
||
item?.workedFor?.startedAtMs,
|
||
);
|
||
if (workStart !== null && !starts.has(key)) starts.set(key, workStart);
|
||
const kind = historyKind(item);
|
||
if (kind !== "user") {
|
||
const itemStart = timestampMs(item?.startedAtMs, item?.startedAt, item?.createdAtMs);
|
||
if (itemStart !== null && kind !== "assistant") {
|
||
// Activity timestamps are the closest equivalent to the official
|
||
// first-turn-work-item marker in older follower snapshots.
|
||
if (!starts.has(key)) starts.set(key, itemStart);
|
||
}
|
||
}
|
||
const explicitAssistantStart = timestampMs(
|
||
item?.finalAssistantStartedAtMs,
|
||
item?.workedFor?.completedAtMs,
|
||
);
|
||
// The official worked-for clock ends when the final assistant response
|
||
// starts. Earlier assistant commentary is part of the work group and
|
||
// must not extend the duration; this was the source of the recurring
|
||
// three-to-five-second discrepancy in legacy snapshots.
|
||
const isFinalAssistant = kind === "assistant" && finalAssistantIndexes.get(key) === index;
|
||
const assistantStart = explicitAssistantStart !== null
|
||
? explicitAssistantStart
|
||
: isFinalAssistant ? timestampMs(item?.startedAtMs, item?.startedAt, item?.createdAtMs) : null;
|
||
if (assistantStart !== null) ends.set(key, Math.max(ends.get(key) || 0, assistantStart));
|
||
});
|
||
for (const [key, start] of starts) {
|
||
if (result.has(key)) continue;
|
||
const end = ends.get(key);
|
||
if (end !== undefined && end >= start) result.set(key, end - start);
|
||
}
|
||
// Some older host snapshots keep the authoritative worked-for duration in
|
||
// session metadata rather than repeating it on each projected item. Apply
|
||
// it to the most recent turn only; explicit per-item values always win.
|
||
const metadataDuration = finiteNumber(state.workedDurationMs, state.lastWorkedDurationMs);
|
||
if (metadataDuration !== null && messages.length) {
|
||
const keysInOrder = messages
|
||
.filter(isRecord)
|
||
.map((item, index) => structuredMessageTurn(item, index));
|
||
const target = state.turnId && keysInOrder.includes(state.turnId)
|
||
? state.turnId
|
||
: keysInOrder.at(-1);
|
||
// Session metadata is authoritative over timestamp inference, but an
|
||
// explicit per-turn/item value from the host remains the strongest
|
||
// signal.
|
||
if (target && !explicitKeys.has(target)) result.set(target, Math.max(0, metadataDuration));
|
||
}
|
||
// Older attach snapshots may expose the final-answer start separately
|
||
// from the duration. Use it only for the corresponding most recent turn.
|
||
const metadataFinal = timestampMs(state.finalAssistantStartedAt);
|
||
if (metadataFinal !== null && messages.length) {
|
||
const keyed = messages.filter(isRecord).map((item, index) => structuredMessageTurn(item, index));
|
||
const target = state.turnId && keyed.includes(state.turnId) ? state.turnId : keyed.at(-1);
|
||
const start = target ? starts.get(target) : null;
|
||
if (target && start !== undefined && !explicitKeys.has(target) && !result.has(target) && metadataFinal >= start) {
|
||
result.set(target, metadataFinal - start);
|
||
}
|
||
}
|
||
return result;
|
||
}
|
||
|
||
function structuredActivityTiming(messages, index, turnKey, status) {
|
||
const item = Array.isArray(messages) ? messages[index] : null;
|
||
if (!isRecord(item)) return { durationMs: null, finishedAt: null };
|
||
const explicitDuration = finiteNumber(item.durationMs, item.elapsedMs);
|
||
const startedAt = timestampMs(item.startedAtMs, item.startedAt, item.createdAtMs);
|
||
const explicitFinishedAt = timestampMs(item.completedAtMs, item.completedAt, item.finishedAtMs, item.finishedAt);
|
||
if (explicitDuration !== null) {
|
||
return {
|
||
durationMs: explicitDuration,
|
||
finishedAt: explicitFinishedAt ?? (startedAt === null ? null : startedAt + explicitDuration),
|
||
};
|
||
}
|
||
if (explicitFinishedAt !== null && startedAt !== null) {
|
||
return { durationMs: Math.max(0, explicitFinishedAt - startedAt), finishedAt: explicitFinishedAt };
|
||
}
|
||
// Hydrated legacy rows sometimes expose only start times. The next item in
|
||
// the same turn is the closest end marker (and matches the official
|
||
// projection's item interval). Never infer an end for an explicitly live
|
||
// row, and never let a later turn's timestamp inflate this activity.
|
||
if (status !== "inProgress" && startedAt !== null && Array.isArray(messages)) {
|
||
for (let cursor = index + 1; cursor < messages.length; cursor += 1) {
|
||
const next = messages[cursor];
|
||
if (!isRecord(next)) continue;
|
||
if (structuredMessageTurn(next, cursor) !== turnKey) break;
|
||
const nextStartedAt = timestampMs(next.startedAtMs, next.startedAt, next.createdAtMs);
|
||
if (nextStartedAt === null) continue;
|
||
if (nextStartedAt >= startedAt) return {
|
||
durationMs: nextStartedAt - startedAt,
|
||
finishedAt: nextStartedAt,
|
||
};
|
||
break;
|
||
}
|
||
}
|
||
return { durationMs: null, finishedAt: explicitFinishedAt };
|
||
}
|
||
|
||
function indexStructuredActivity(article, item, kind, turnKey, index, messages = null) {
|
||
if (!article || !isCollapsibleKind(kind)) return null;
|
||
const key = article.dataset.activityKey || structuredActivityKey(item, kind, turnKey, index);
|
||
article.dataset.activityKey = key;
|
||
article.dataset.activityKind = kind;
|
||
const existing = state.activities.get(key);
|
||
const turnStatus = normalizeActivityStatus(item.turnStatus, "");
|
||
const status = structuredMessageStatus(item) || (turnStatus === "inProgress" ? "inProgress" : "completed");
|
||
const timing = structuredActivityTiming(messages, index, turnKey, status);
|
||
const durationMs = timing.durationMs;
|
||
const startedAt = timestampMs(item.startedAtMs, item.startedAt, item.createdAtMs);
|
||
const activity = existing || {
|
||
key,
|
||
kind,
|
||
role: kind === "commentary"
|
||
? "assistant"
|
||
: kind === "tool" || kind === "read" || kind === "edit" || kind === "subagent" ? "tool" : "system",
|
||
messageKind: kind === "tool" || kind === "read" ? "tool" : kind,
|
||
label: item.label || activityLabelForItem(item, kind),
|
||
command: kind === "tool" || kind === "read" ? terminalCommandText(commandText(item)) : commandText(item),
|
||
filePath: kind === "read" ? readPathList(item).join("\n") : "",
|
||
cwd: (kind === "tool" || kind === "read") && typeof item.cwd === "string" ? item.cwd : "",
|
||
shellName: (kind === "tool" || kind === "read") && typeof item.shellName === "string" && item.shellName ? item.shellName : "Shell",
|
||
agentThreadId: kind === "subagent" ? firstString(item.agentThreadId, item.childThreadId, item.threadId) : "",
|
||
displayName: kind === "subagent" ? firstString(item.displayName, item.agentNickname, item.agentName, item.agentPath) : "",
|
||
objective: kind === "subagent" ? firstString(item.objective, item.prompt, item.statusMessage, item.message) : "",
|
||
activityKind: kind === "subagent" ? firstString(item.activityKind, item.kind) : "",
|
||
displayStatus: kind === "subagent" ? firstString(item.displayStatus, item.status) : "",
|
||
model: kind === "subagent" ? firstString(item.model, item.modelId) : "",
|
||
action: kind === "subagent" ? firstString(item.action, item.tool) : "",
|
||
prompt: kind === "subagent" && item.prompt !== null ? firstString(item.prompt) : "",
|
||
senderThreadId: kind === "subagent" ? firstString(item.senderThreadId) : "",
|
||
receiverThreadIds: kind === "subagent"
|
||
? Array.isArray(item.receiverThreadIds)
|
||
? item.receiverThreadIds.map(String)
|
||
: Array.isArray(item.receiverThreads) ? item.receiverThreads.map(String) : []
|
||
: [],
|
||
agentsStates: kind === "subagent" && isRecord(item.agentsStates) ? item.agentsStates : {},
|
||
canInteract: item.canInteract !== false,
|
||
exitCode: kind === "tool" || kind === "read" ? finiteNumber(item.exitCode, item.exit_code) : null,
|
||
itemId: item.itemId === undefined || item.itemId === null ? "" : String(item.itemId),
|
||
threadId: item.threadId || state.threadId || "",
|
||
turnId: turnKey || "",
|
||
startedAt: startedAt || null,
|
||
finishedAt: null,
|
||
durationMs: null,
|
||
durationExplicit: finiteNumber(item.durationMs, item.elapsedMs) !== null,
|
||
status,
|
||
headerText: "",
|
||
outputText: "",
|
||
anonymous: false,
|
||
concrete: true,
|
||
statusOnly: false,
|
||
article,
|
||
body: article.querySelector(".details-body") || article.querySelector(".message-body"),
|
||
wrapper: article.querySelector(".message-content"),
|
||
details: article.querySelector("details"),
|
||
summary: article.querySelector("summary"),
|
||
};
|
||
activity.key = key;
|
||
activity.kind = kind;
|
||
activity.messageKind = kind === "tool" || kind === "read" ? "tool" : kind;
|
||
activity.itemId = item.itemId === undefined || item.itemId === null ? activity.itemId || "" : String(item.itemId);
|
||
// Structured history is an authoritative concrete projection. If a live
|
||
// status row occupied the same slot during reconnect, promote it here so
|
||
// the next terminal update does not discard the hydrated item.
|
||
activity.concrete = true;
|
||
activity.statusOnly = false;
|
||
activity.anonymous = false;
|
||
activity.turnId = turnKey || activity.turnId || "";
|
||
activity.threadId = item.threadId || activity.threadId || state.threadId || "";
|
||
activity.label = item.label || activity.label || activityLabelForItem(item, kind);
|
||
activity.command = kind === "tool" || kind === "read"
|
||
? terminalCommandText(commandText(item)) || activity.command || ""
|
||
: commandText(item) || activity.command || "";
|
||
if (kind === "tool" || kind === "read") {
|
||
if (kind === "read") activity.filePath = readPathList(item).join("\n") || activity.filePath;
|
||
activity.cwd = typeof item.cwd === "string" ? item.cwd : activity.cwd || "";
|
||
activity.shellName = typeof item.shellName === "string" && item.shellName
|
||
? item.shellName
|
||
: activity.shellName || "Shell";
|
||
activity.exitCode = item.exitCode === undefined || item.exitCode === null
|
||
? activity.exitCode ?? null
|
||
: finiteNumber(item.exitCode, item.exit_code);
|
||
}
|
||
if (kind === "subagent") {
|
||
activity.agentThreadId = firstString(item.agentThreadId, item.childThreadId, item.threadId, activity.agentThreadId);
|
||
activity.displayName = firstString(item.displayName, item.agentNickname, item.agentName, item.agentPath, activity.displayName);
|
||
activity.objective = firstString(item.objective, item.prompt, item.statusMessage, item.message, activity.objective);
|
||
activity.activityKind = firstString(item.activityKind, item.kind, activity.activityKind);
|
||
activity.displayStatus = firstString(item.displayStatus, item.status, activity.displayStatus);
|
||
activity.model = firstString(item.model, item.modelId, activity.model);
|
||
activity.action = firstString(item.action, item.tool, activity.action);
|
||
if (item.prompt !== null && item.prompt !== undefined) activity.prompt = firstString(item.prompt, activity.prompt);
|
||
activity.senderThreadId = firstString(item.senderThreadId, activity.senderThreadId);
|
||
if (Array.isArray(item.receiverThreadIds)) activity.receiverThreadIds = item.receiverThreadIds.map(String);
|
||
else if (Array.isArray(item.receiverThreads)) activity.receiverThreadIds = item.receiverThreads.map(String);
|
||
if (isRecord(item.agentsStates)) activity.agentsStates = item.agentsStates;
|
||
if (item.canInteract !== undefined) activity.canInteract = item.canInteract !== false;
|
||
if (activity.agentThreadId) article.dataset.agentThreadId = activity.agentThreadId;
|
||
else delete article.dataset.agentThreadId;
|
||
}
|
||
activity.startedAt = startedAt || activity.startedAt || null;
|
||
if (durationMs !== null || !existing) activity.durationMs = durationMs;
|
||
activity.durationExplicit = finiteNumber(item.durationMs, item.elapsedMs) !== null;
|
||
activity.status = status;
|
||
activity.finishedAt = timing.finishedAt || activity.finishedAt || null;
|
||
activity.article = article;
|
||
activity.body = article.querySelector(".details-body") || article.querySelector(".message-body");
|
||
activity.wrapper = article.querySelector(".message-content");
|
||
activity.details = article.querySelector("details");
|
||
activity.summary = article.querySelector("summary");
|
||
activity.outputText = kind === "tool" || kind === "read" ? activityOutput(item, kind) : messageText(item);
|
||
state.activities.set(key, activity);
|
||
// Hydrated rows may have been created before lifecycle metadata arrived.
|
||
// Recompute the disclosure label from the normalized status/timestamps so
|
||
// history and live updates cannot leave stale `0ms` or generic text behind.
|
||
renderActivityText(activity);
|
||
refreshActivity(activity);
|
||
return activity;
|
||
}
|
||
|
||
function updateStructuredMessageArticle(article, item, index, turnLastIndex, turnHasActivity = new Set(), turnWorkedDurations = new Map()) {
|
||
const itemText = messageText(item);
|
||
if (!itemText) return false;
|
||
const sourceKind = historyKind(item);
|
||
const turnKey = structuredMessageTurn(item, index);
|
||
const kind = structuredDisplayKind(item, index, turnKey, turnLastIndex);
|
||
const role = structuredMessageRole(item, kind);
|
||
const status = structuredMessageStatus(item) || "completed";
|
||
const durationMs = item.durationMs ?? item.elapsedMs;
|
||
const duration = elapsedDuration(durationMs);
|
||
const body = article.querySelector(".message-body");
|
||
if (!body) return false;
|
||
const details = article.querySelector("details");
|
||
const wasOpen = details ? isDetailsExpanded(details) : undefined;
|
||
article.dataset.rawText = String(itemText);
|
||
article.dataset.turnId = turnKey;
|
||
article.dataset.kind = kind;
|
||
if (item.itemId !== undefined && item.itemId !== null) article.dataset.itemId = String(item.itemId);
|
||
if (item.itemType) article.dataset.itemType = String(item.itemType);
|
||
const agentThreadId = kind === "subagent" ? firstString(item.agentThreadId, item.childThreadId, item.threadId) : "";
|
||
if (agentThreadId) article.dataset.agentThreadId = agentThreadId;
|
||
else delete article.dataset.agentThreadId;
|
||
if (item.startedAtMs || item.completedAtMs) {
|
||
const parsed = timestampMs(item.startedAtMs ?? item.completedAtMs);
|
||
if (parsed !== null) article.dataset.timestamp = String(parsed);
|
||
}
|
||
if (status) article.dataset.status = status;
|
||
const isActivity = isCollapsibleKind(kind);
|
||
article.classList.toggle("streaming", status === "inProgress" && !isActivity);
|
||
renderMessageBody(body, itemText, role, isActivity ? "activity" : "history", kind);
|
||
if (details) {
|
||
const summary = details.querySelector("summary");
|
||
const activitySummary = historyActivitySummary(item, kind, status, duration);
|
||
if (summary && activitySummary) setActivitySummary(summary, activitySummary, kind);
|
||
if (wasOpen !== undefined) setDetailsExpanded(details, wasOpen, { immediate: true, preserve: false });
|
||
}
|
||
const finalAssistant = sourceKind === "assistant" && role === "assistant" && kind === "assistant"
|
||
&& (item.phase === "final_answer" || item.phase === "final-answer" || !isAssistantCommentary(item, index, turnKey, turnLastIndex));
|
||
if (finalAssistant && status !== "inProgress" && !article.classList.contains("streaming") && !article.querySelector(".message-actions")) {
|
||
addMessageActions(article, true);
|
||
}
|
||
const terminalTurn = ["completed", "complete", "done", "failed", "error", "interrupted", "cancelled", "canceled"]
|
||
.includes(String(item.turnStatus || "").replace(/[\s-]+/g, "_").toLowerCase());
|
||
const workedDuration = turnWorkedDurations.get(turnKey)
|
||
?? workedDurationFor(item, null);
|
||
if (finalAssistant && (terminalTurn || workedDuration !== null || (durationMs !== undefined && status !== "inProgress"))) {
|
||
appendTurnDivider(turnKey, item.turnStatus || status || "completed", workedDuration ?? durationMs, article);
|
||
}
|
||
return true;
|
||
}
|
||
|
||
function reconcileStructuredOutput(text, structuredMessages) {
|
||
const output = $("output");
|
||
if (!output || !Array.isArray(structuredMessages) || !structuredMessages.length) return false;
|
||
const articles = [...output.querySelectorAll(".message[data-structured-key]")];
|
||
if (articles.length !== structuredMessages.length) return false;
|
||
const keys = structuredMessages.map((item, index) => structuredMessageKey(item, index));
|
||
if (articles.some((article, index) => article.dataset.structuredKey !== keys[index])) return false;
|
||
const follow = shouldFollowOutput(output);
|
||
const turnLastIndex = structuredTurnFinalAssistantIndexes(structuredMessages);
|
||
const turnHasActivity = new Set();
|
||
const turnWorkedDurations = structuredTurnWorkedDurations(structuredMessages);
|
||
structuredMessages.forEach((item, index) => {
|
||
const turnKey = structuredMessageTurn(item, index);
|
||
if (isCollapsibleKind(structuredDisplayKind(item, index, turnKey, turnLastIndex))) turnHasActivity.add(turnKey);
|
||
});
|
||
for (const [index, item] of structuredMessages.entries()) {
|
||
if (!updateStructuredMessageArticle(articles[index], item, index, turnLastIndex, turnHasActivity, turnWorkedDurations)) return false;
|
||
const turnKey = structuredMessageTurn(item, index);
|
||
const kind = structuredDisplayKind(item, index, turnKey, turnLastIndex);
|
||
if (isCollapsibleKind(kind)) {
|
||
indexStructuredActivity(articles[index], item, kind, turnKey, index, structuredMessages);
|
||
}
|
||
}
|
||
reconcileTurnDividers();
|
||
expandLatestTurnActivity();
|
||
if (typeof text === "string") output.dataset.outputTail = text;
|
||
state.structuredMessages = structuredMessages.slice();
|
||
state.outputSynced = true;
|
||
if (state.turnId && state.turnStartedAt !== null && ["active", "waiting"].includes(state.turnStatus)
|
||
&& [...output.querySelectorAll(".message.activity")].some((article) => article.dataset.turnId === state.turnId)) {
|
||
ensureLiveTurnDivider(state.turnId);
|
||
}
|
||
if (follow) scrollOutput(output, true);
|
||
updateScrollToBottom(output);
|
||
return true;
|
||
}
|
||
|
||
function replaceOutput(text, structuredMessages) {
|
||
const output = $("output");
|
||
const preserveBottom = !state.outputSynced || !output || shouldFollowOutput(output);
|
||
const preservedDistanceFromBottom = output
|
||
? Math.max(0, output.scrollHeight - output.scrollTop - output.clientHeight)
|
||
: 0;
|
||
const pendingUserText = state.pendingUserText;
|
||
const snapshotHasPendingUser = Boolean(pendingUserText && (
|
||
text.includes(`> ${pendingUserText}`)
|
||
|| (Array.isArray(structuredMessages) && structuredMessages.some((item) => {
|
||
const kind = historyKind(item);
|
||
return kind === "user" && comparableText(messageText(item)) === comparableText(pendingUserText);
|
||
}))
|
||
));
|
||
renderEmptyOutput();
|
||
if (typeof text === "string") output.dataset.outputTail = text;
|
||
state.structuredMessages = Array.isArray(structuredMessages) ? structuredMessages.slice() : [];
|
||
if (Array.isArray(structuredMessages) && structuredMessages.length) {
|
||
// Older follower snapshots may omit the top-level subagents projection.
|
||
// Derive the small panel model from the same collaboration items used by
|
||
// the transcript so those agents remain discoverable after reconnect.
|
||
const suppliedSubagents = state.subagents;
|
||
const derivedSubagents = deriveSubagentsFromMessages(structuredMessages);
|
||
if (derivedSubagents.length) {
|
||
state.subagents = mergeSubagentProjections(derivedSubagents, suppliedSubagents);
|
||
renderSubagents();
|
||
} else if (state.subagents.length) {
|
||
// A complete snapshot with no collaboration items is authoritative for
|
||
// the transcript. Do not carry a finished agent from the previous
|
||
// thread into the new composer.
|
||
state.subagents = [];
|
||
renderSubagents();
|
||
}
|
||
const turnLastIndex = structuredTurnFinalAssistantIndexes(structuredMessages);
|
||
const turnHasActivity = new Set();
|
||
const turnWorkedDurations = structuredTurnWorkedDurations(structuredMessages);
|
||
let previousTurnKey = "";
|
||
structuredMessages.forEach((item, index) => {
|
||
const key = structuredMessageTurn(item, index);
|
||
if (isCollapsibleKind(structuredDisplayKind(item, index, key, turnLastIndex))) turnHasActivity.add(key);
|
||
});
|
||
structuredMessages.forEach((item, index) => {
|
||
const itemText = messageText(item);
|
||
if (!itemText) return;
|
||
const sourceKind = historyKind(item);
|
||
const turnKey = structuredMessageTurn(item, index);
|
||
const kind = structuredDisplayKind(item, index, turnKey, turnLastIndex);
|
||
const role = structuredMessageRole(item, kind);
|
||
const status = structuredMessageStatus(item) || "completed";
|
||
const durationMs = item.durationMs ?? item.elapsedMs;
|
||
const duration = elapsedDuration(durationMs);
|
||
const timestamp = item.startedAtMs ?? item.completedAtMs;
|
||
if (role === "user" || role === "assistant") {
|
||
appendDateSeparator(timestamp, {
|
||
role,
|
||
turnId: turnKey,
|
||
turnStart: turnKey !== previousTurnKey,
|
||
breaksPreviousAdjacency: item.breaksPreviousAdjacency === true,
|
||
});
|
||
}
|
||
const finalAssistant = sourceKind === "assistant" && role === "assistant" && kind === "assistant"
|
||
&& (item.phase === "final_answer" || item.phase === "final-answer" || !isAssistantCommentary(item, index, turnKey, turnLastIndex));
|
||
const terminalTurn = ["completed", "complete", "done", "failed", "error", "interrupted", "cancelled", "canceled"]
|
||
.includes(String(item.turnStatus || "").replace(/[\s-]+/g, "_").toLowerCase());
|
||
const workedDuration = turnWorkedDurations.get(turnKey) ?? workedDurationFor(item, null);
|
||
const activitySummary = historyActivitySummary(item, kind, status, duration) || undefined;
|
||
const collapsible = isCollapsibleKind(kind);
|
||
const activityKey = collapsible ? structuredActivityKey(item, kind, turnKey, index) : "";
|
||
const message = appendMessage(itemText, role, collapsible ? "activity" : "history", "", {
|
||
kind,
|
||
status,
|
||
label: item.label || (kind === "reasoning" ? "思考" : kind === "plan" ? "计划" : kind === "edit" ? "文件变更" : kind === "read" ? "读取文件" : kind === "tool" ? "工具输出" : kind === "subagent" ? "子代理" : kind === "commentary" ? "工作说明" : ""),
|
||
summary: activitySummary,
|
||
command: item.command || item.commandLine,
|
||
turnId: turnKey,
|
||
structuredKey: structuredMessageKey(item, index),
|
||
activityKey,
|
||
itemId: item.itemId,
|
||
itemType: item.itemType,
|
||
agentThreadId: kind === "subagent" ? firstString(item.agentThreadId, item.childThreadId, item.threadId) : "",
|
||
timestamp,
|
||
showTimestamp: role === "user" || role === "assistant",
|
||
showActions: role === "user" || (role === "assistant" && finalAssistant && kind !== "commentary"),
|
||
collapsible,
|
||
open: kind === "commentary" || (status === "inProgress" && (kind === "reasoning" || kind === "plan")),
|
||
});
|
||
if (message && collapsible) indexStructuredActivity(message.article, item, kind, turnKey, index, structuredMessages);
|
||
if (finalAssistant && (terminalTurn || workedDuration !== null || (durationMs !== undefined && status !== "inProgress"))) {
|
||
appendTurnDivider(turnKey, item.turnStatus || status || "completed", workedDuration ?? durationMs, message?.article || null);
|
||
}
|
||
previousTurnKey = turnKey;
|
||
});
|
||
reconcileTurnDividers();
|
||
expandLatestTurnActivity();
|
||
} else if (text) {
|
||
// The attach adapter prefixes user items with `> ` and separates items
|
||
// with blank lines. Use that stable marker to recreate the two sides of
|
||
// the conversation without interpreting arbitrary Markdown as HTML.
|
||
const chunks = text.split(/\n{2,}/).map((chunk) => chunk.trim()).filter(Boolean);
|
||
let expectUser = true;
|
||
for (const chunk of chunks) {
|
||
const markedUser = chunk.startsWith("> ");
|
||
if (markedUser && expectUser) {
|
||
appendMessage(chunk.slice(2), "user", "history", "", { kind: "user" });
|
||
expectUser = false;
|
||
} else {
|
||
appendMessage(chunk, "assistant", "history", "", { kind: "assistant" });
|
||
expectUser = true;
|
||
}
|
||
}
|
||
}
|
||
if (pendingUserText && !snapshotHasPendingUser) {
|
||
appendDateSeparator(Date.now(), { role: "user", force: true });
|
||
appendMessage(pendingUserText, "user", "streaming", "", { kind: "user", timestamp: Date.now(), showTimestamp: true });
|
||
}
|
||
state.pendingUserText = snapshotHasPendingUser ? "" : pendingUserText;
|
||
state.outputSynced = true;
|
||
if (state.turnId && state.turnStartedAt !== null && ["active", "waiting"].includes(state.turnStatus)
|
||
&& [...output.querySelectorAll(".message.activity")].some((article) => article.dataset.turnId === state.turnId)) {
|
||
ensureLiveTurnDivider(state.turnId);
|
||
}
|
||
if (preserveBottom) scrollOutput(output, true);
|
||
else if (output) {
|
||
// Rebuilding a long history changes scrollHeight. Preserve the user's
|
||
// distance from the bottom just like the official thread scroll layout,
|
||
// so a background sync does not yank them away from the message they are
|
||
// reading.
|
||
output.scrollTop = Math.max(0, output.scrollHeight - output.clientHeight - preservedDistanceFromBottom);
|
||
updateScrollToBottom(output);
|
||
}
|
||
}
|
||
|
||
function applyStructuredMessagesPatch(patch) {
|
||
if (!isRecord(patch) || !Array.isArray(state.structuredMessages) || !Array.isArray(patch.messages)) return null;
|
||
const start = Number(patch.start);
|
||
const deleteCount = Number(patch.deleteCount);
|
||
if (!Number.isInteger(start) || start < 0 || start > state.structuredMessages.length
|
||
|| !Number.isInteger(deleteCount) || deleteCount < 0
|
||
|| start + deleteCount > state.structuredMessages.length) return null;
|
||
return [
|
||
...state.structuredMessages.slice(0, start),
|
||
...patch.messages,
|
||
...state.structuredMessages.slice(start + deleteCount),
|
||
];
|
||
}
|
||
|
||
function appendOutputChunk(text, stream = "codex", context = {}) {
|
||
if (!text) return;
|
||
const output = $("output");
|
||
const follow = shouldFollowOutput(output);
|
||
const normalizedStream = String(stream || "codex").toLowerCase();
|
||
if (normalizedStream === "codex") {
|
||
const userItem = text.match(/^(?:\n{2,})?> ([^\n]+)\n?$/);
|
||
if (userItem) {
|
||
const userText = userItem[1].trim();
|
||
const eventTurn = context.turnId || state.turnId || "";
|
||
finishAssistantStream();
|
||
appendDateSeparator(context.timestamp || Date.now(), { role: "user", turnId: eventTurn, turnStart: true });
|
||
if (!hasRenderedMessage(userText, eventTurn, "user")) {
|
||
appendMessage(userText, "user", "history", "", {
|
||
kind: "user",
|
||
turnId: eventTurn,
|
||
timestamp: context.timestamp || Date.now(),
|
||
showTimestamp: true,
|
||
});
|
||
}
|
||
state.pendingUserText = "";
|
||
state.outputSynced = true;
|
||
return;
|
||
}
|
||
}
|
||
if (normalizedStream === "codex" && state.pendingUserText) {
|
||
const marker = `> ${state.pendingUserText}`;
|
||
if (text.includes(marker)) {
|
||
text = text.replace(marker, "").replace(/^\n{1,2}/, "");
|
||
state.pendingUserText = "";
|
||
if (!text) return;
|
||
}
|
||
}
|
||
|
||
const eventTurnId = context.turnId || state.turnId || "";
|
||
if (state.outputSynced && eventTurnId && normalizedStream === "codex"
|
||
&& hasRenderedCompletedMessage(text, eventTurnId, "assistant")) {
|
||
// A host replay often sends the same output delta immediately after an
|
||
// authoritative snapshot. Do not append a second assistant bubble.
|
||
state.pendingUserText = "";
|
||
return;
|
||
}
|
||
|
||
const inferredActivity = normalizedStream === "reasoning"
|
||
? "thinking"
|
||
: normalizedStream === "read" || normalizedStream === "reading"
|
||
? "reading"
|
||
: normalizedStream === "stdout" || normalizedStream === "stderr"
|
||
? "running"
|
||
: "generating";
|
||
if (!state.currentActivity || ["idle", "completed", "failed", "interrupted"].includes(state.currentActivity)) {
|
||
state.currentActivity = inferredActivity;
|
||
}
|
||
if (state.turnStartedAt === null) startTurnClock(context.turnId || state.turnId, null, null);
|
||
updateLiveActivity(
|
||
state.currentActivity,
|
||
state.currentActivityStartedAt || state.turnStartedAt,
|
||
null,
|
||
[],
|
||
context.turnId || state.turnId,
|
||
);
|
||
const activityText = statusActivityLabel(state.currentActivity) || t("正在生成");
|
||
const outputElapsed = elapsedDuration(Math.max(0, Date.now() - (state.turnStartedAt || Date.now())));
|
||
setConversationStatus(outputElapsed ? `${activityText} · ${outputElapsed}` : activityText, "active");
|
||
|
||
// Lifecycle notifications create the canonical row first. Output deltas
|
||
// from app-server versions that omit itemId are attached to the newest
|
||
// running row of the corresponding kind.
|
||
const streamKind = normalizedStream === "reasoning"
|
||
? "reasoning"
|
||
: normalizedStream === "read" || normalizedStream === "reading"
|
||
? "read"
|
||
: normalizedStream === "stdout" || normalizedStream === "stderr"
|
||
? "tool"
|
||
: context.kind || "";
|
||
const activity = streamKind
|
||
? latestRunningActivity(streamKind, context)
|
||
: null;
|
||
if (activity) {
|
||
appendActivityChunk(activity, text);
|
||
state.activeAssistantBody = activity.body;
|
||
state.activeAssistantStream = normalizedStream;
|
||
state.activeAssistantText = activity.outputText;
|
||
state.activeAssistantActivityKey = activity.key;
|
||
if (follow) scrollOutput(output, true);
|
||
state.outputSynced = true;
|
||
return;
|
||
}
|
||
if (state.activeAssistantStream !== normalizedStream) finishAssistantStream();
|
||
if (!state.activeAssistantBody && normalizedStream === "codex") text = text.replace(/^\n{2,}/, "");
|
||
if (!state.activeAssistantBody || !output.contains(state.activeAssistantBody)) {
|
||
const role = normalizedStream === "stderr"
|
||
? "error"
|
||
: normalizedStream === "stdout" || normalizedStream === "read" || normalizedStream === "reading"
|
||
? "tool"
|
||
: normalizedStream === "reasoning"
|
||
? "system"
|
||
: "assistant";
|
||
const label = normalizedStream === "reasoning" ? "思考"
|
||
: normalizedStream === "stdout" ? "命令输出"
|
||
: normalizedStream === "read" || normalizedStream === "reading" ? "读取文件" : "";
|
||
const kind = normalizedStream === "reasoning" ? "reasoning"
|
||
: normalizedStream === "stdout" ? "tool"
|
||
: normalizedStream === "read" || normalizedStream === "reading" || context.kind === "read" ? "read" : "assistant";
|
||
let message;
|
||
if (kind === "reasoning" || kind === "tool" || kind === "read") {
|
||
state.activitySequence += 1;
|
||
const key = `stream:${state.threadId || "thread"}:${state.turnId || "turn"}:${normalizedStream}:${state.activitySequence}`;
|
||
const streamActivity = ensureActivity(key, {
|
||
kind,
|
||
label: label || (kind === "tool" ? "工具输出" : kind === "read" ? "读取文件" : "思考"),
|
||
threadId: state.threadId,
|
||
turnId: eventTurnId || state.turnId,
|
||
status: "inProgress",
|
||
anonymous: true,
|
||
concrete: true,
|
||
});
|
||
message = streamActivity && { article: streamActivity.article, content: streamActivity.body };
|
||
state.activeAssistantActivityKey = streamActivity?.key || null;
|
||
} else {
|
||
appendDateSeparator(context.timestamp || Date.now(), { role: "assistant", turnId: eventTurnId, turnStart: false });
|
||
message = appendMessage("", role, "streaming", "", {
|
||
kind,
|
||
label,
|
||
turnId: eventTurnId,
|
||
timestamp: context.timestamp || Date.now(),
|
||
showTimestamp: true,
|
||
showActions: false,
|
||
collapsible: false,
|
||
});
|
||
}
|
||
state.activeAssistantBody = message?.content || null;
|
||
state.activeAssistantStream = normalizedStream;
|
||
state.activeAssistantText = "";
|
||
}
|
||
if (state.activeAssistantActivityKey) {
|
||
const streamActivity = state.activities.get(state.activeAssistantActivityKey);
|
||
if (streamActivity) {
|
||
appendActivityChunk(streamActivity, text);
|
||
state.activeAssistantText = streamActivity.outputText;
|
||
if (follow) scrollOutput(output, true);
|
||
state.outputSynced = true;
|
||
return;
|
||
}
|
||
}
|
||
if (state.activeAssistantBody) {
|
||
state.activeAssistantText += text;
|
||
const article = state.activeAssistantBody.closest(".message");
|
||
const role = article?.classList.contains("system") ? "system" : article?.classList.contains("error") ? "error" : "assistant";
|
||
const kind = article?.dataset.kind || "assistant";
|
||
renderMessageBody(state.activeAssistantBody, state.activeAssistantText, role, "streaming", kind);
|
||
if (article) article.dataset.rawText = state.activeAssistantText;
|
||
article?.classList.add("streaming");
|
||
}
|
||
if (follow) scrollOutput(output, true);
|
||
state.outputSynced = true;
|
||
}
|
||
|
||
function finishAssistantStream() {
|
||
const article = state.activeAssistantBody?.closest(".message");
|
||
article?.classList.remove("streaming");
|
||
if (article?.classList.contains("assistant") && !article.querySelector(".message-actions")) addMessageActions(article, true);
|
||
if (article?.dataset.kind === "reasoning") {
|
||
const details = article.querySelector("details");
|
||
if (details) setDetailsExpanded(details, false);
|
||
}
|
||
const activity = state.activeAssistantActivityKey
|
||
? state.activities.get(state.activeAssistantActivityKey)
|
||
: null;
|
||
if (activity?.anonymous && isRunningActivity(activity)) finishActivity(activity, "completed");
|
||
state.activeAssistantBody = null;
|
||
state.activeAssistantStream = null;
|
||
state.activeAssistantText = "";
|
||
state.activeAssistantActivityKey = null;
|
||
}
|
||
|
||
function eventBelongsToCurrentTurn(payload) {
|
||
if (!payload || typeof payload !== "object") return true;
|
||
const threadId = eventThreadId(payload);
|
||
const turnId = eventTurnId(payload);
|
||
if (threadId && state.threadId && threadId !== state.threadId) return false;
|
||
if (turnId && state.turnId && turnId !== state.turnId) return false;
|
||
if (turnId && state.retiredTurnIds.has(turnId)) return false;
|
||
return true;
|
||
}
|
||
|
||
function eventMessage(payload) {
|
||
if (!payload || typeof payload !== "object") return "未知错误";
|
||
const candidates = [
|
||
payload.message,
|
||
payload.error?.message,
|
||
payload.error,
|
||
payload.params?.message,
|
||
payload.params?.error,
|
||
payload.text,
|
||
];
|
||
const value = candidates.find((entry) => typeof entry === "string" && entry.trim());
|
||
if (value) return value;
|
||
try { return JSON.stringify(payload); } catch { return "未知错误"; }
|
||
}
|
||
|
||
function setAttachMode(value) {
|
||
state.attachMode = Boolean(value);
|
||
document.body.classList.toggle("attach-mode", state.attachMode);
|
||
$("sessionMode").textContent = t(state.attachMode
|
||
? "已附着 VS Code 当前 Codex 会话；输入、输出和授权都回到同一个会话。"
|
||
: "当前为独立 app-server 模式。");
|
||
$("startThreadButton").textContent = t(state.attachMode ? "已附着现有会话" : "启动新 thread");
|
||
const modeLabel = $("modeLabel");
|
||
if (modeLabel) modeLabel.textContent = t(state.attachMode ? "本地模式" : "独立模式");
|
||
const popoverMode = $("popoverMode");
|
||
if (popoverMode) popoverMode.textContent = t(state.attachMode ? "本地模式" : "独立模式");
|
||
}
|
||
|
||
function firstString(...values) {
|
||
return values.find((value) => typeof value === "string" && value.trim())?.trim() || "";
|
||
}
|
||
|
||
// Unlike firstString, settings projections need to preserve an explicit
|
||
// null. Codex uses null for a model with no reasoning selector; treating it
|
||
// as "missing" leaves the browser showing the previous turn's effort.
|
||
function firstDefined(...values) {
|
||
return values.find((value) => value !== undefined);
|
||
}
|
||
|
||
function modelDisplayName(model, effort) {
|
||
const value = String(model || "").trim();
|
||
if (!value) return "";
|
||
const words = value
|
||
.replace(/^gpt[-_]/i, "")
|
||
.replace(/[-_]+/g, " ")
|
||
.split(/\s+/)
|
||
.filter(Boolean)
|
||
.map((word) => /^\d+(?:\.\d+)*$/.test(word) ? word : `${word[0].toUpperCase()}${word.slice(1)}`);
|
||
const effortValue = String(effort || "").trim();
|
||
if (effortValue && !words.some((word) => word.toLowerCase() === effortValue.toLowerCase())) {
|
||
words.push(`${effortValue[0].toUpperCase()}${effortValue.slice(1)}`);
|
||
}
|
||
return words.join(" ");
|
||
}
|
||
|
||
// Keep this tiny fallback aligned with the model power choices shipped in
|
||
// the installed official webview. A host that exposes `availableModels`
|
||
// always wins; these entries only make the picker useful while an older
|
||
// private IPC build has no model/list projection.
|
||
const FALLBACK_MODELS = [
|
||
{ model: "gpt-5.6-sol", displayName: "5.6 Sol", description: "通用 Codex 模型", efforts: ["low", "medium", "high", "xhigh"] },
|
||
{ model: "gpt-5.6-terra", displayName: "5.6 Terra", description: "平衡速度与推理", efforts: ["low", "medium", "high", "xhigh"] },
|
||
];
|
||
// Labels used by the shipped Work composer. The compact trigger shows the
|
||
// model plus its selected reasoning preset (for example `5.6 Sol 标准`).
|
||
const EFFORT_LABELS = { none: "默认", minimal: "极低", low: "轻度", medium: "标准", high: "深度", xhigh: "极高", max: "最大", ultra: "Ultra" };
|
||
|
||
// The compact Work picker is a power control. Keep the mapping deterministic
|
||
// so keyboard/range input still goes through the same effort protocol used by
|
||
// the advanced picker.
|
||
function modelPowerOptions(model) {
|
||
const efforts = Array.isArray(model?.efforts) ? model.efforts.filter(Boolean) : [];
|
||
return efforts.map((effort) => ({ effort, label: t(EFFORT_LABELS[effort] || effort) }));
|
||
}
|
||
|
||
function normalizeModelOption(value) {
|
||
if (typeof value === "string") {
|
||
const fallback = FALLBACK_MODELS.find((entry) => entry.model === value);
|
||
return fallback ? { ...fallback } : { model: value, displayName: modelDisplayName(value), description: "可用模型", efforts: [] };
|
||
}
|
||
if (!isRecord(value)) return null;
|
||
const model = firstString(value.model, value.id, value.slug, value.name);
|
||
if (!model) return null;
|
||
const hasSupported = Array.isArray(value.supportedReasoningEfforts) || Array.isArray(value.efforts);
|
||
const supported = Array.isArray(value.supportedReasoningEfforts)
|
||
? value.supportedReasoningEfforts.map((entry) => typeof entry === "string" ? entry : firstString(entry?.reasoningEffort, entry?.effort)).filter(Boolean)
|
||
: Array.isArray(value.efforts) ? value.efforts.filter((entry) => typeof entry === "string") : [];
|
||
const fallback = FALLBACK_MODELS.find((entry) => entry.model === model);
|
||
return {
|
||
model,
|
||
displayName: firstString(value.displayName, value.label, fallback?.displayName, modelDisplayName(model)),
|
||
description: firstString(value.description, fallback?.description),
|
||
// Unknown catalog entries must not inherit a fabricated effort list. The
|
||
// official advanced picker disables the power controls until the host
|
||
// reports capabilities for that model.
|
||
efforts: hasSupported ? supported : fallback?.efforts || [],
|
||
defaultReasoningEffort: firstString(value.defaultReasoningEffort, value.defaultEffort, fallback?.efforts?.[1]),
|
||
hidden: value.hidden === true,
|
||
};
|
||
}
|
||
|
||
function normalizedModelOptions() {
|
||
let source;
|
||
if (state.availableModels.length) source = state.availableModels;
|
||
else if (state.currentModel && FALLBACK_MODELS.some((entry) => entry.model === state.currentModel)) source = FALLBACK_MODELS;
|
||
else if (state.currentModel) source = [state.currentModel];
|
||
else return [];
|
||
const seen = new Set();
|
||
const result = [];
|
||
for (const entry of source) {
|
||
const option = normalizeModelOption(entry);
|
||
if (!option || option.hidden || seen.has(option.model)) continue;
|
||
seen.add(option.model);
|
||
result.push(option);
|
||
}
|
||
if (state.currentModel && !seen.has(state.currentModel)) {
|
||
result.unshift(normalizeModelOption(state.currentModel));
|
||
}
|
||
return result;
|
||
}
|
||
|
||
function currentModelOption() {
|
||
return normalizedModelOptions().find((entry) => entry.model === state.currentModel) || normalizedModelOptions()[0];
|
||
}
|
||
|
||
function renderModelPicker() {
|
||
const button = $("modelPickerButton");
|
||
const label = $("modelLabel");
|
||
const effortLabelNode = $("modelEffortLabel");
|
||
const menu = $("modelMenu");
|
||
const modelOptions = $("modelOptions");
|
||
const effortOptions = $("effortOptions");
|
||
const powerView = $("modelPowerView");
|
||
const advancedView = $("modelAdvancedView");
|
||
const advancedToggle = $("modelAdvancedToggle");
|
||
const powerSlider = $("modelPowerSlider");
|
||
const powerValue = $("modelPowerValue");
|
||
if (!button || !label || !effortLabelNode || !menu || !modelOptions || !effortOptions) return;
|
||
const current = currentModelOption();
|
||
if (!current) {
|
||
button.hidden = true;
|
||
return;
|
||
}
|
||
button.hidden = false;
|
||
const selectedEffort = state.currentEffort === null
|
||
? ""
|
||
: state.currentEffort || current.defaultReasoningEffort || current.efforts?.[1] || current.efforts?.[0] || "";
|
||
const effortLabel = selectedEffort ? t(EFFORT_LABELS[selectedEffort] || selectedEffort) : "";
|
||
label.textContent = current.displayName || modelDisplayName(current.model);
|
||
effortLabelNode.textContent = effortLabel;
|
||
effortLabelNode.hidden = !effortLabel;
|
||
const settingsModelValue = $("settingsModelValue");
|
||
if (settingsModelValue) settingsModelValue.textContent = [label.textContent, effortLabel].filter(Boolean).join(" ") || t("默认");
|
||
const triggerLabel = [label.textContent, effortLabel].filter(Boolean).join(" ");
|
||
button.setAttribute("aria-label", uiLocale() === "en-US"
|
||
? `Current model: ${triggerLabel}; change model`
|
||
: `当前模型 ${triggerLabel}，切换模型`);
|
||
button.setAttribute("title", uiLocale() === "en-US"
|
||
? `Change model (current: ${triggerLabel})`
|
||
: `切换模型（当前 ${triggerLabel}）`);
|
||
modelOptions.replaceChildren();
|
||
for (const option of normalizedModelOptions()) {
|
||
const item = document.createElement("button");
|
||
item.type = "button";
|
||
item.className = "model-option";
|
||
item.setAttribute("role", "option");
|
||
item.setAttribute("aria-selected", String(option.model === state.currentModel));
|
||
item.dataset.model = option.model;
|
||
const name = document.createElement("span");
|
||
name.className = "model-option-name";
|
||
name.textContent = option.displayName || option.model;
|
||
const check = document.createElement("span");
|
||
check.className = "model-option-check";
|
||
check.textContent = "✓";
|
||
const description = document.createElement("span");
|
||
description.className = "model-option-description";
|
||
description.textContent = option.description ? t(option.description) : option.model;
|
||
item.append(name, check, description);
|
||
item.addEventListener("click", () => selectModel(option.model));
|
||
modelOptions.append(item);
|
||
}
|
||
effortOptions.replaceChildren();
|
||
const efforts = current.efforts?.length ? [...current.efforts] : [];
|
||
// Ultra is capability-gated in the official picker. Preserve it when the
|
||
// host explicitly reports the current setting, but do not advertise it to
|
||
// every fallback session.
|
||
if (state.currentEffort === "ultra" && current.model === "gpt-5.6-sol" && !efforts.includes("ultra")) efforts.push("ultra");
|
||
const selectedMenuEffort = state.currentEffort === null
|
||
? ""
|
||
: state.currentEffort || current.defaultReasoningEffort || efforts[1] || efforts[0] || "";
|
||
if (!efforts.length) {
|
||
const empty = document.createElement("div");
|
||
empty.className = "effort-empty";
|
||
empty.textContent = t("此模型使用默认推理强度");
|
||
effortOptions.append(empty);
|
||
}
|
||
for (const effort of efforts) {
|
||
const item = document.createElement("button");
|
||
item.type = "button";
|
||
item.className = "effort-option";
|
||
item.setAttribute("role", "option");
|
||
item.setAttribute("aria-selected", String(effort === selectedMenuEffort));
|
||
item.dataset.effort = effort;
|
||
const name = document.createElement("span");
|
||
name.textContent = t(EFFORT_LABELS[effort] || effort);
|
||
const check = document.createElement("span");
|
||
check.className = "effort-option-check";
|
||
check.textContent = "✓";
|
||
item.append(name, check);
|
||
item.title = effort;
|
||
item.addEventListener("click", () => selectEffort(effort));
|
||
effortOptions.append(item);
|
||
}
|
||
const powerOptions = modelPowerOptions(current);
|
||
if (powerView && advancedView) {
|
||
powerView.hidden = state.modelAdvancedOpen;
|
||
advancedView.hidden = !state.modelAdvancedOpen;
|
||
}
|
||
if (advancedToggle) {
|
||
advancedToggle.textContent = t(state.modelAdvancedOpen ? "简洁" : "高级");
|
||
advancedToggle.setAttribute("aria-label", t(state.modelAdvancedOpen ? "返回简洁模型选择" : "显示高级模型选项"));
|
||
}
|
||
if (powerSlider) {
|
||
const hasPower = powerOptions.length > 0;
|
||
powerSlider.disabled = !hasPower;
|
||
powerSlider.min = "0";
|
||
powerSlider.max = String(Math.max(0, powerOptions.length - 1));
|
||
const selectedPower = powerOptions.findIndex((entry) => entry.effort === selectedMenuEffort);
|
||
powerSlider.value = String(selectedPower >= 0 ? selectedPower : Math.min(1, Math.max(0, powerOptions.length - 1)));
|
||
powerSlider.setAttribute("aria-valuetext", powerOptions[Number(powerSlider.value)]?.label || t("默认"));
|
||
powerSlider.style.setProperty("--power-position", powerOptions.length > 1
|
||
? `${Number(powerSlider.value) / (powerOptions.length - 1) * 100}%`
|
||
: "0%");
|
||
if (powerValue) powerValue.textContent = powerOptions[Number(powerSlider.value)]?.label || t("默认");
|
||
} else if (powerValue) powerValue.textContent = "";
|
||
$("modelPicker")?.toggleAttribute("data-pending", state.modelUpdatePending);
|
||
renderControlMode();
|
||
}
|
||
|
||
function setModelMenu(open) {
|
||
const button = $("modelPickerButton");
|
||
const menu = $("modelMenu");
|
||
if (!button || !menu) return;
|
||
const next = Boolean(open) && threadSettingsAllowed() && !state.modeSwitching && !state.sessionSwitching;
|
||
menu.hidden = !next;
|
||
button.setAttribute("aria-expanded", String(next));
|
||
if (next) {
|
||
state.modelAdvancedOpen = false;
|
||
renderModelPicker();
|
||
}
|
||
}
|
||
|
||
function setPermissionMenu(open) {
|
||
const button = $("permissionChip");
|
||
const menu = $("permissionMenu");
|
||
if (!button || !menu) return;
|
||
const next = Boolean(open) && threadSettingsAllowed() && !state.modeSwitching && !state.sessionSwitching;
|
||
menu.hidden = !next;
|
||
button.setAttribute("aria-expanded", String(next));
|
||
if (next) renderPermissionMenu();
|
||
}
|
||
|
||
function permissionSandboxLabel(value) {
|
||
const label = {
|
||
"read-only": "只读",
|
||
"workspace-write": "工作区写入",
|
||
"danger-full-access": "完全访问",
|
||
}[normalizeSandboxName(value)] || String(value || "工作区写入");
|
||
return t(label);
|
||
}
|
||
|
||
function renderPermissionMenu() {
|
||
const menu = $("permissionMenu");
|
||
const chip = $("permissionChip");
|
||
const label = $("permissionLabel");
|
||
if (!menu || !chip || !label) return;
|
||
const mode = state.sandboxPolicy === "danger-full-access" && state.approvalPolicy === "never"
|
||
? "full"
|
||
: state.sandboxPolicy === "read-only"
|
||
? "readonly"
|
||
: state.approvalPolicy === "untrusted" || state.approvalPolicy === "never" ? "auto" : "ask";
|
||
label.textContent = t({
|
||
ask: "需要时询问",
|
||
auto: "由 Codex 审批",
|
||
full: "完全访问",
|
||
readonly: "只读",
|
||
}[mode]);
|
||
const settingsPermissionValue = $("settingsPermissionValue");
|
||
if (settingsPermissionValue) settingsPermissionValue.textContent = label.textContent;
|
||
chip.setAttribute("aria-label", uiLocale() === "en-US"
|
||
? `Change permissions; current: ${label.textContent}`
|
||
: `修改权限，当前为${label.textContent}`);
|
||
chip.setAttribute("title", uiLocale() === "en-US"
|
||
? `Change permissions (current: ${label.textContent})`
|
||
: `修改权限（当前：${label.textContent}）`);
|
||
menu.querySelectorAll("[data-permission-mode]").forEach((item) => {
|
||
item.setAttribute("aria-checked", String(item.dataset.permissionMode === mode));
|
||
});
|
||
}
|
||
|
||
function selectPermissionMode(mode) {
|
||
if (!threadSettingsAllowed()) {
|
||
setConversationStatus("当前模式不支持修改会话设置", "warning");
|
||
return;
|
||
}
|
||
if (mode === "custom") {
|
||
setPermissionMenu(false);
|
||
setConversationStatus("自定义权限由 config.toml 管理", "ready");
|
||
return;
|
||
}
|
||
if (mode === "full" && !(state.sandboxPolicy === "danger-full-access" && state.approvalPolicy === "never")) {
|
||
const confirm = $("permissionConfirm");
|
||
if (confirm) {
|
||
confirm.hidden = false;
|
||
confirm.dataset.pendingMode = mode;
|
||
setPermissionMenu(false);
|
||
$("permissionConfirmAccept")?.focus();
|
||
}
|
||
return;
|
||
}
|
||
applyPermissionMode(mode);
|
||
}
|
||
|
||
function applyPermissionMode(mode) {
|
||
if (!threadSettingsAllowed()) return;
|
||
const presets = {
|
||
ask: { sandboxPolicy: "workspace-write", approvalPolicy: "on-request" },
|
||
auto: { sandboxPolicy: "workspace-write", approvalPolicy: "untrusted" },
|
||
full: { sandboxPolicy: "danger-full-access", approvalPolicy: "never" },
|
||
readonly: { sandboxPolicy: "read-only", approvalPolicy: "on-request" },
|
||
};
|
||
const preset = presets[mode];
|
||
if (!preset) return;
|
||
state.sandboxPolicy = preset.sandboxPolicy;
|
||
state.approvalPolicy = preset.approvalPolicy;
|
||
const sandboxInput = $("sandboxInput");
|
||
const approvalInput = $("approvalInput");
|
||
if (sandboxInput && [...sandboxInput.options].some((option) => option.value === state.sandboxPolicy)) sandboxInput.value = state.sandboxPolicy;
|
||
if (approvalInput && [...approvalInput.options].some((option) => option.value === state.approvalPolicy)) approvalInput.value = state.approvalPolicy;
|
||
renderPermissionMenu();
|
||
updateThreadSettings(undefined, undefined, {
|
||
sandboxPolicy: state.sandboxPolicy,
|
||
approvalPolicy: state.approvalPolicy,
|
||
permissions: state.sandboxPolicy === "read-only"
|
||
? ":read-only"
|
||
: state.sandboxPolicy === "danger-full-access" ? ":danger-full-access" : ":workspace",
|
||
approvalsReviewer: "user",
|
||
});
|
||
setPermissionMenu(false);
|
||
}
|
||
|
||
function selectPermissionSetting(kind, value) {
|
||
if (!threadSettingsAllowed()) return;
|
||
if (!value) return;
|
||
if (kind === "sandbox") {
|
||
state.sandboxPolicy = normalizeSandboxName(value);
|
||
const input = $("sandboxInput");
|
||
if (input && [...input.options].some((option) => option.value === state.sandboxPolicy)) input.value = state.sandboxPolicy;
|
||
} else {
|
||
state.approvalPolicy = String(value);
|
||
const input = $("approvalInput");
|
||
if (input && [...input.options].some((option) => option.value === state.approvalPolicy)) input.value = state.approvalPolicy;
|
||
}
|
||
renderPermissionMenu();
|
||
updateThreadSettings(undefined, undefined, {
|
||
sandboxPolicy: state.sandboxPolicy,
|
||
approvalPolicy: state.approvalPolicy,
|
||
permissions: state.sandboxPolicy === "read-only"
|
||
? ":read-only"
|
||
: state.sandboxPolicy === "danger-full-access" ? ":danger-full-access" : ":workspace",
|
||
approvalsReviewer: "user",
|
||
});
|
||
setPermissionMenu(false);
|
||
}
|
||
|
||
function normalizeUsage(value) {
|
||
if (!isRecord(value)) return null;
|
||
const source = isRecord(value.contextWindow) ? value.contextWindow : isRecord(value.context) ? value.context : value;
|
||
const total = isRecord(value.total) ? value.total : isRecord(source.total) ? source.total : {};
|
||
const last = isRecord(value.last) ? value.last : isRecord(source.last) ? source.last : {};
|
||
const breakdownTotal = (entry) => {
|
||
if (!isRecord(entry)) return null;
|
||
const explicit = finiteNumber(entry.totalTokens, entry.total_tokens, entry.tokens, entry.used, entry.inputTokens);
|
||
if (explicit !== null) return explicit;
|
||
const parts = [
|
||
finiteNumber(entry.inputTokens, entry.input_tokens),
|
||
finiteNumber(entry.cachedInputTokens, entry.cached_input_tokens),
|
||
finiteNumber(entry.cacheWriteInputTokens, entry.cache_write_input_tokens),
|
||
finiteNumber(entry.outputTokens, entry.output_tokens),
|
||
finiteNumber(entry.reasoningOutputTokens, entry.reasoning_output_tokens),
|
||
].filter((entry) => entry !== null);
|
||
return parts.length ? parts.reduce((sum, entry) => sum + entry, 0) : null;
|
||
};
|
||
const used = finiteNumber(
|
||
source.used,
|
||
source.usedTokens,
|
||
source.inputTokens,
|
||
source.input_tokens,
|
||
source.tokensUsed,
|
||
source.totalTokens,
|
||
value.usedTokens,
|
||
value.inputTokens,
|
||
breakdownTotal(last),
|
||
breakdownTotal(total),
|
||
);
|
||
const limit = finiteNumber(
|
||
value.modelContextWindow,
|
||
value.model_context_window,
|
||
source.limit,
|
||
source.max,
|
||
source.maxTokens,
|
||
typeof source.contextWindow === "number" ? source.contextWindow : null,
|
||
value.limit,
|
||
value.maxTokens,
|
||
);
|
||
const remaining = finiteNumber(source.remaining, source.remainingTokens, value.remainingTokens);
|
||
const percent = finiteNumber(source.percent, source.percentage, value.percent, value.percentage);
|
||
if (used === null && limit === null && remaining === null && percent === null) return null;
|
||
const computedPercent = percent !== null
|
||
? Math.max(0, Math.min(100, percent))
|
||
: used !== null && limit !== null && limit > 0 ? Math.max(0, Math.min(100, used / limit * 100))
|
||
: used !== null && remaining !== null && used + remaining > 0 ? used / (used + remaining) * 100 : 0;
|
||
const clampedUsed = used !== null && limit !== null && limit > 0 ? Math.min(used, limit) : used;
|
||
const computedRemaining = remaining !== null
|
||
? remaining
|
||
: clampedUsed !== null && limit !== null ? Math.max(limit - clampedUsed, 0) : null;
|
||
return {
|
||
used: clampedUsed,
|
||
limit,
|
||
remaining: computedRemaining,
|
||
percent: computedPercent,
|
||
totalTokens: breakdownTotal(total),
|
||
lastTokens: breakdownTotal(last),
|
||
};
|
||
}
|
||
|
||
function renderUsage() {
|
||
const picker = $("usagePicker");
|
||
const button = $("usageButton");
|
||
const label = $("usageLabel");
|
||
const ring = $("usageRing");
|
||
const summary = $("usageSummary");
|
||
const details = $("usageDetails");
|
||
const bar = $("usageMeterBar");
|
||
if (!picker || !button || !label || !ring || !summary || !details || !bar) return;
|
||
const usage = normalizeUsage(state.tokenUsage);
|
||
picker.hidden = !usage;
|
||
if (!usage) return;
|
||
const percent = Math.round(usage.percent);
|
||
label.textContent = `${percent}%`;
|
||
ring.style.setProperty("--usage-percent", `${percent}%`);
|
||
ring.dataset.level = percent >= 90 ? "critical" : percent >= 70 ? "warning" : "normal";
|
||
const remainingPercent = Math.max(0, 100 - percent);
|
||
button.title = uiLocale() === "en-US"
|
||
? `Context used ${percent}% (${remainingPercent}% remaining)`
|
||
: `上下文已使用 ${percent}%（剩余 ${remainingPercent}%）`;
|
||
button.setAttribute("aria-label", button.title);
|
||
summary.textContent = usage.limit !== null
|
||
? `${usage.used ?? 0} / ${usage.limit} tokens (${percent}%)`
|
||
: uiLocale() === "en-US" ? `${percent}% used` : `${percent}% 已使用`;
|
||
bar.style.width = `${percent}%`;
|
||
details.textContent = [
|
||
usage.remaining !== null ? (uiLocale() === "en-US" ? `${usage.remaining} tokens remaining` : `剩余 ${usage.remaining} tokens`) : "",
|
||
usage.used !== null ? (uiLocale() === "en-US" ? `Current context: ${usage.used} tokens` : `当前上下文 ${usage.used} tokens`) : "",
|
||
usage.lastTokens !== null && usage.lastTokens !== usage.used ? (uiLocale() === "en-US" ? `Latest request: ${usage.lastTokens} tokens` : `最近请求 ${usage.lastTokens} tokens`) : "",
|
||
usage.totalTokens !== null && usage.totalTokens !== usage.used ? (uiLocale() === "en-US" ? `Total: ${usage.totalTokens} tokens` : `累计 ${usage.totalTokens} tokens`) : "",
|
||
].filter(Boolean).join("\n");
|
||
}
|
||
|
||
function setUsageMenu(open) {
|
||
const button = $("usageButton");
|
||
const menu = $("usageMenu");
|
||
if (!button || !menu) return;
|
||
const next = Boolean(open);
|
||
menu.hidden = !next;
|
||
button.setAttribute("aria-expanded", String(next));
|
||
}
|
||
|
||
function updateThreadSettings(model, effort, extra = {}) {
|
||
if (!threadSettingsAllowed() || !state.threadId || state.role !== "operator") return;
|
||
const threadSettings = {};
|
||
if (model) threadSettings.model = model;
|
||
if (effort !== undefined) threadSettings.effort = effort;
|
||
if (isRecord(extra)) {
|
||
for (const [key, value] of Object.entries(extra)) {
|
||
if (value !== undefined) threadSettings[key] = value;
|
||
}
|
||
}
|
||
if (!Object.keys(threadSettings).length) return;
|
||
state.modelUpdatePending = true;
|
||
if (model) state.currentModel = model;
|
||
if (effort !== undefined) state.currentEffort = effort === null ? null : effort || "";
|
||
renderModelPicker();
|
||
try {
|
||
command("thread/settings/update", { threadId: state.threadId, threadSettings });
|
||
} catch (error) {
|
||
state.modelUpdatePending = false;
|
||
appendOutput(error.message || "无法更新模型设置", "error");
|
||
renderModelPicker();
|
||
}
|
||
}
|
||
|
||
function currentEffortParams() {
|
||
if (state.currentEffort === null) return { effort: null };
|
||
return state.currentEffort ? { effort: state.currentEffort } : {};
|
||
}
|
||
|
||
function selectModel(model) {
|
||
const option = normalizedModelOptions().find((entry) => entry.model === model);
|
||
const effort = option?.efforts?.length
|
||
? option.efforts.includes(state.currentEffort)
|
||
? state.currentEffort
|
||
: option.defaultReasoningEffort || option.efforts[1] || option.efforts[0]
|
||
: null;
|
||
updateThreadSettings(model, effort);
|
||
setModelMenu(false);
|
||
}
|
||
|
||
function selectEffort(effort) {
|
||
updateThreadSettings(undefined, effort);
|
||
setModelMenu(false);
|
||
}
|
||
|
||
function selectPowerIndex(value) {
|
||
const current = currentModelOption();
|
||
const options = modelPowerOptions(current);
|
||
if (!options.length) return;
|
||
const index = Math.max(0, Math.min(options.length - 1, Number(value) || 0));
|
||
const option = options[index];
|
||
if (!option) return;
|
||
updateThreadSettings(undefined, option.effort);
|
||
// The official power control remains open while keyboard arrows adjust it.
|
||
state.modelAdvancedOpen = false;
|
||
renderModelPicker();
|
||
}
|
||
|
||
function normalizeSubagentStatus(value) {
|
||
const raw = isRecord(value) ? firstString(value.status, value.type, value.state) : value;
|
||
const normalized = String(raw || "").replace(/[\s_-]+/g, "").toLowerCase();
|
||
if (["running", "working", "interacted", "updated", "inprogress", "active", "started"].includes(normalized)) return "working";
|
||
if (["pending", "pendinginit", "waiting", "queued", "waitingforinput", "awaitinginstruction", "waitingforinstruction", "needsinput"].includes(normalized)) return "waiting";
|
||
if (["failed", "errored", "error", "notfound"].includes(normalized)) return "failed";
|
||
if (["completed", "complete", "done", "interrupted", "shutdown", "cancelled", "canceled"].includes(normalized)) return "done";
|
||
return normalized || "waiting";
|
||
}
|
||
|
||
function subagentStatusLabel(status) {
|
||
// These are the localized equivalents of the official background-agent
|
||
// rows ("is working", "is awaiting instruction", "is done").
|
||
return t({ waiting: "正在等待指示", working: "正在工作", done: "已完成", failed: "失败" }[status] || status);
|
||
}
|
||
|
||
function subagentThreadId(entry) {
|
||
return firstString(entry.threadId, entry.agentThreadId, entry.childThreadId);
|
||
}
|
||
|
||
function subagentElapsed(entry) {
|
||
const startedAt = timestampMs(entry.startedAtMs, entry.startedAt, entry.createdAtMs, entry.createdAt);
|
||
if (startedAt === null) return "";
|
||
const status = normalizeSubagentStatus(entry.status);
|
||
const completedAt = timestampMs(entry.completedAtMs, entry.completedAt, entry.finishedAtMs, entry.finishedAt, entry.lastAssistantMessageAtMs);
|
||
const end = status === "working" || status === "waiting" ? Date.now() : completedAt;
|
||
if (end === null || end === undefined) return "";
|
||
return elapsedDuration(Math.max(0, end - startedAt));
|
||
}
|
||
|
||
function focusSubagentActivity(threadId) {
|
||
if (!threadId) return;
|
||
const output = $("output");
|
||
const target = output
|
||
? [...output.querySelectorAll(".message[data-agent-thread-id]")]
|
||
.reverse()
|
||
.find((article) => article.dataset.agentThreadId === threadId)
|
||
: null;
|
||
if (!target) return;
|
||
const turnId = target.dataset.turnId;
|
||
const turnActivity = turnId ? state.turnDividers.get(turnId) : null;
|
||
const turnToggle = turnActivity?.querySelector(".turn-divider-toggle");
|
||
if (turnToggle?.getAttribute("aria-expanded") === "false") {
|
||
turnToggle.setAttribute("aria-expanded", "true");
|
||
setTurnActivityVisibility(turnId, true);
|
||
}
|
||
target.scrollIntoView({ block: "center", behavior: "smooth" });
|
||
target.classList.remove("subagent-focus");
|
||
void target.offsetWidth;
|
||
target.classList.add("subagent-focus");
|
||
setTimeout(() => target.classList.remove("subagent-focus"), 1_200);
|
||
}
|
||
|
||
function createSubagentPanelRow(entry) {
|
||
const status = normalizeSubagentStatus(entry.status);
|
||
const threadId = subagentThreadId(entry);
|
||
const row = document.createElement(threadId ? "button" : "div");
|
||
if (threadId) row.type = "button";
|
||
row.className = "subagent-row";
|
||
row.dataset.status = status;
|
||
if (threadId) row.dataset.agentThreadId = threadId;
|
||
const startedAt = timestampMs(entry.startedAtMs, entry.startedAt, entry.createdAtMs, entry.createdAt);
|
||
const completedAt = timestampMs(
|
||
entry.completedAtMs,
|
||
entry.completedAt,
|
||
entry.finishedAtMs,
|
||
entry.finishedAt,
|
||
entry.lastAssistantMessageAtMs,
|
||
entry.recencyAtMs,
|
||
entry.recencyAt,
|
||
);
|
||
if (startedAt !== null) row.dataset.startedAt = String(startedAt);
|
||
if (completedAt !== null) row.dataset.completedAt = String(completedAt);
|
||
|
||
const icon = document.createElement("span");
|
||
icon.className = "subagent-icon";
|
||
icon.setAttribute("aria-hidden", "true");
|
||
icon.append(createSubagentIcon());
|
||
const copy = document.createElement("span");
|
||
copy.className = "subagent-copy";
|
||
const name = document.createElement("span");
|
||
name.className = "subagent-name";
|
||
name.textContent = firstString(entry.displayName, entry.agentNickname, entry.name, entry.agentPath) || t("子代理");
|
||
copy.append(name);
|
||
const stateLabel = document.createElement("span");
|
||
stateLabel.className = "subagent-status";
|
||
const statusText = document.createElement("span");
|
||
statusText.className = "subagent-status-text";
|
||
statusText.textContent = subagentStatusLabel(status);
|
||
stateLabel.append(statusText);
|
||
const diff = isRecord(entry.diffStats) ? entry.diffStats : isRecord(entry.diff_stats) ? entry.diff_stats : null;
|
||
const added = finiteNumber(diff?.linesAdded, diff?.added);
|
||
const removed = finiteNumber(diff?.linesRemoved, diff?.removed);
|
||
if (added !== null || removed !== null) {
|
||
const diffLabel = document.createElement("span");
|
||
diffLabel.className = "subagent-diff-stats";
|
||
diffLabel.textContent = `+${Math.max(0, added || 0)} -${Math.max(0, removed || 0)}`;
|
||
stateLabel.append(diffLabel);
|
||
}
|
||
const elapsed = document.createElement("span");
|
||
elapsed.className = "subagent-elapsed";
|
||
elapsed.textContent = subagentElapsed(entry);
|
||
// The composer keeps the row compact, but exposes timing in the tooltip
|
||
// and makes the elapsed node available for live updates.
|
||
if (elapsed.textContent) stateLabel.append(elapsed);
|
||
row.append(icon, copy, stateLabel);
|
||
const objective = firstString(entry.statusMessage, entry.objective, entry.prompt, entry.role, entry.agentRole);
|
||
const model = firstString(entry.spawnModel, entry.model, entry.modelId);
|
||
const tooltipParts = [objective, model ? (uiLocale() === "en-US" ? `Using ${model}` : `使用 ${model}`) : "", elapsed.textContent ? (uiLocale() === "en-US" ? `Elapsed: ${elapsed.textContent}` : `已用时 ${elapsed.textContent}`) : ""].filter(Boolean);
|
||
if (tooltipParts.length) row.title = `${name.textContent}: ${tooltipParts.join(" · ")}`;
|
||
if (threadId) {
|
||
row.title = tooltipParts.length
|
||
? `${name.textContent}: ${tooltipParts.join(" · ")}`
|
||
: uiLocale() === "en-US" ? `View ${name.textContent}'s activity` : `查看 ${name.textContent} 的活动`;
|
||
row.setAttribute("aria-label", `${name.textContent}, ${subagentStatusLabel(status)}`);
|
||
row.addEventListener("click", () => focusSubagentActivity(threadId));
|
||
}
|
||
return row;
|
||
}
|
||
|
||
function deriveSubagentsFromMessages(messages) {
|
||
if (!Array.isArray(messages)) return [];
|
||
deriveStructuredTurnKeys(messages);
|
||
const entries = new Map();
|
||
let anonymousIndex = 0;
|
||
const upsert = (item, threadId = "", itemIndex = -1) => {
|
||
const agent = isRecord(item.agent) ? item.agent : {};
|
||
const displayName = firstString(item.displayName, item.agentNickname, item.agentName, item.agentPath, agent.displayName, agent.name);
|
||
const key = threadId || displayName || firstString(item.agentPath, item.action, item.activityKind) || `anonymous-${anonymousIndex++}`;
|
||
const existing = entries.get(key) || { threadId: threadId || "", displayName: null, prompt: null, objective: null, status: "working", statusMessage: null, canInteract: false };
|
||
const activityKind = firstString(item.activityKind, item.kind, agent.activityKind);
|
||
const rawStatus = firstString(item.displayStatus, item.status, item.state, agent.status)
|
||
|| (activityKind === "completed" ? "completed" : activityKind === "interrupted" ? "interrupted" : "working");
|
||
const normalizedStatus = normalizeSubagentStatus(rawStatus);
|
||
existing.threadId = existing.threadId || threadId;
|
||
existing.displayName = displayName || existing.displayName;
|
||
existing.agentPath = firstString(item.agentPath, agent.agentPath, existing.agentPath);
|
||
existing.prompt = firstString(item.prompt, agent.prompt, existing.prompt) || null;
|
||
existing.objective = firstString(item.objective, item.statusMessage, item.prompt, agent.objective, existing.objective) || null;
|
||
existing.statusMessage = firstString(item.statusMessage, agent.statusMessage, existing.statusMessage) || null;
|
||
existing.status = normalizedStatus;
|
||
existing.canInteract = item.canInteract !== undefined ? item.canInteract !== false : existing.canInteract;
|
||
const startedAt = timestampMs(item.startedAtMs, item.startedAt, item.createdAtMs, agent.startedAtMs);
|
||
const completedAt = timestampMs(
|
||
item.completedAtMs,
|
||
item.completedAt,
|
||
item.finishedAtMs,
|
||
item.finishedAt,
|
||
item.lastAssistantMessageAtMs,
|
||
item.recencyAtMs,
|
||
item.recencyAt,
|
||
agent.completedAtMs,
|
||
agent.lastAssistantMessageAtMs,
|
||
agent.recencyAtMs,
|
||
);
|
||
if (startedAt !== null) existing.startedAtMs = existing.startedAtMs ?? startedAt;
|
||
if (completedAt !== null) existing.completedAtMs = completedAt;
|
||
if (existing.completedAtMs === undefined && normalizedStatus === "done" && itemIndex >= 0) {
|
||
const turnKey = structuredMessageTurn(item, itemIndex);
|
||
for (let cursor = itemIndex + 1; cursor < messages.length; cursor += 1) {
|
||
const next = messages[cursor];
|
||
if (!isRecord(next)) continue;
|
||
if (structuredMessageTurn(next, cursor) !== turnKey) break;
|
||
const nextStartedAt = timestampMs(next.startedAtMs, next.startedAt, next.createdAtMs);
|
||
if (nextStartedAt !== null) {
|
||
existing.completedAtMs = nextStartedAt;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
if (item.model !== undefined || agent.model !== undefined) existing.model = firstString(item.model, agent.model, existing.model) || null;
|
||
entries.set(key, existing);
|
||
};
|
||
messages.forEach((item, index) => {
|
||
if (!isRecord(item) || historyKind(item) !== "subagent") return;
|
||
const receivers = Array.isArray(item.receiverThreadIds)
|
||
? item.receiverThreadIds.map(String)
|
||
: Array.isArray(item.receiverThreads) ? item.receiverThreads.map(String) : [];
|
||
const states = isRecord(item.agentsStates) ? Object.keys(item.agentsStates) : [];
|
||
const ids = [...new Set([
|
||
firstString(item.agentThreadId, item.childThreadId),
|
||
...receivers,
|
||
...states,
|
||
].filter(Boolean))];
|
||
if (!ids.length) upsert(item, "", index);
|
||
else ids.forEach((id) => upsert(item, id, index));
|
||
});
|
||
return [...entries.values()];
|
||
}
|
||
|
||
function subagentIdentity(entry) {
|
||
if (!isRecord(entry)) return "";
|
||
return firstString(
|
||
entry.threadId,
|
||
entry.agentThreadId,
|
||
entry.childThreadId,
|
||
entry.displayName,
|
||
entry.agentNickname,
|
||
entry.name,
|
||
entry.agentPath,
|
||
);
|
||
}
|
||
|
||
// A snapshot can carry a rich top-level subagent projection while the
|
||
// message list only contains the compact activity item. Merge matching
|
||
// identities so timestamps, model names, and interaction flags survive the
|
||
// transcript re-render without carrying stale agents across threads.
|
||
function mergeSubagentProjections(derived, supplied) {
|
||
const rich = Array.isArray(supplied) ? supplied.filter(isRecord) : [];
|
||
if (!rich.length) return derived;
|
||
const byIdentity = new Map(rich
|
||
.map((entry) => [subagentIdentity(entry), entry])
|
||
.filter(([identity]) => Boolean(identity)));
|
||
const matched = new Set();
|
||
const merged = derived.map((entry) => {
|
||
const identity = subagentIdentity(entry);
|
||
const source = identity ? byIdentity.get(identity) : undefined;
|
||
if (!source) return entry;
|
||
matched.add(source);
|
||
return { ...entry, ...source };
|
||
});
|
||
// Keep a rich top-level entry when the transcript projection is absent
|
||
// (for example while a newly spawned agent has not emitted its first
|
||
// activity item yet), but discard unrelated entries from an older thread.
|
||
if (!merged.length) return rich;
|
||
for (const source of rich) {
|
||
if (matched.has(source)) continue;
|
||
const identity = subagentIdentity(source);
|
||
if (identity && !merged.some((entry) => subagentIdentity(entry) === identity)
|
||
&& normalizeSubagentStatus(source.status) !== "done") merged.push(source);
|
||
}
|
||
return merged;
|
||
}
|
||
|
||
function refreshSubagentElapsed() {
|
||
for (const row of document.querySelectorAll(".subagent-row[data-started-at]")) {
|
||
const startedAt = timestampMs(row.dataset.startedAt);
|
||
if (startedAt === null) continue;
|
||
const completedAt = timestampMs(row.dataset.completedAt);
|
||
const status = normalizeSubagentStatus(row.dataset.status);
|
||
const end = status === "working" || status === "waiting" ? Date.now() : completedAt;
|
||
const label = row.querySelector(".subagent-elapsed");
|
||
if (label) label.textContent = end === null || end === undefined ? "" : elapsedDuration(Math.max(0, end - startedAt));
|
||
}
|
||
}
|
||
|
||
function renderSubagents() {
|
||
const panel = $("subagentsPanel");
|
||
const list = $("subagentsList");
|
||
const count = $("subagentsCount");
|
||
if (!panel || !list || !count) return;
|
||
const entries = Array.isArray(state.subagents) ? state.subagents.filter(isRecord) : [];
|
||
const visibleEntries = entries.filter((entry) => firstString(
|
||
entry.displayName,
|
||
entry.agentNickname,
|
||
entry.name,
|
||
entry.agentPath,
|
||
entry.threadId,
|
||
entry.agentThreadId,
|
||
entry.childThreadId,
|
||
entry.objective,
|
||
));
|
||
panel.hidden = visibleEntries.length === 0;
|
||
if (!visibleEntries.length) {
|
||
count.textContent = "";
|
||
if (isRecord(state.subagentsExpanded)) {
|
||
state.subagentsExpanded.active = false;
|
||
state.subagentsExpanded.done = false;
|
||
}
|
||
list.replaceChildren();
|
||
return;
|
||
}
|
||
const normalizedEntries = visibleEntries.map((entry) => ({ entry, status: normalizeSubagentStatus(entry.status) }));
|
||
// The official composer uses one compact disclosure row. It does not
|
||
// split the list into active/done sections or show per-agent wall-clock
|
||
// durations; status is rendered inline beside each display name.
|
||
const title = $("subagentsToggle")?.querySelector(".subagents-title");
|
||
if (title) title.textContent = uiLocale() === "en-US"
|
||
? `${normalizedEntries.length} background agents${state.subagentsCollapsed ? "" : " · @ to mention agents"}`
|
||
: `${normalizedEntries.length} 个后台代理${state.subagentsCollapsed ? "" : " · @ 可标记代理"}`;
|
||
count.textContent = "";
|
||
panel.dataset.collapsed = String(state.subagentsCollapsed);
|
||
const toggle = $("subagentsToggle");
|
||
if (toggle) toggle.setAttribute("aria-expanded", String(!state.subagentsCollapsed));
|
||
list.setAttribute("aria-hidden", String(state.subagentsCollapsed));
|
||
list.inert = state.subagentsCollapsed;
|
||
list.replaceChildren();
|
||
const rows = document.createElement("div");
|
||
rows.className = "subagent-section-rows";
|
||
for (const { entry } of normalizedEntries) rows.append(createSubagentPanelRow(entry));
|
||
list.append(rows);
|
||
}
|
||
|
||
function normalizeSandboxName(value) {
|
||
const normalized = String(value || "")
|
||
.replace(/^:+/, "")
|
||
.replace(/([a-z0-9])([A-Z])/g, "$1-$2")
|
||
.replace(/[\s_]+/g, "-")
|
||
.toLowerCase();
|
||
if (normalized === "dangerfullaccess" || normalized === "full-access" || normalized === "fullaccess") return "danger-full-access";
|
||
if (normalized === "workspacewrite") return "workspace-write";
|
||
if (normalized === "workspace" || normalized === "write") return "workspace-write";
|
||
if (normalized === "readonly" || normalized === "read") return "read-only";
|
||
return normalized;
|
||
}
|
||
|
||
function sandboxFromPermissions(value) {
|
||
if (typeof value === "string") {
|
||
const normalized = normalizeSandboxName(value);
|
||
if (["read-only", "workspace-write", "danger-full-access"].includes(normalized)) return normalized;
|
||
return "";
|
||
}
|
||
if (!isRecord(value)) return "";
|
||
const explicit = firstString(value.sandboxPolicy, value.sandbox, value.mode, value.profile, value.type);
|
||
if (explicit) {
|
||
const normalized = normalizeSandboxName(explicit);
|
||
if (["read-only", "workspace-write", "danger-full-access"].includes(normalized)) return normalized;
|
||
}
|
||
if (value.dangerFullAccess === true || value.fullAccess === true || value.full_access === true) return "danger-full-access";
|
||
const fileSystem = isRecord(value.fileSystem) ? value.fileSystem : isRecord(value.file_system) ? value.file_system : value;
|
||
if (fileSystem.write === true || fileSystem.workspaceWrite === true || fileSystem.workspace_write === true) return "workspace-write";
|
||
if (fileSystem.readOnly === true || fileSystem.read_only === true || fileSystem.read === true) return "read-only";
|
||
return "";
|
||
}
|
||
|
||
function normalizeApprovalPolicy(value) {
|
||
const candidate = isRecord(value)
|
||
? firstString(value.policy, value.mode, value.type, value.approvalPolicy, value.approval_policy)
|
||
: firstString(value);
|
||
const normalized = String(candidate || "").replace(/[\s_]+/g, "-").toLowerCase();
|
||
return ["on-request", "never", "untrusted"].includes(normalized) ? normalized : "";
|
||
}
|
||
|
||
// Model metadata belongs to the attached thread. Clear it before applying
|
||
// a snapshot for a different thread so an older catalog cannot leak into a
|
||
// newly selected conversation that does not expose model data.
|
||
function resetSessionModelMetadata() {
|
||
state.currentModel = "";
|
||
state.currentEffort = "";
|
||
state.availableModels = [];
|
||
state.modelUpdatePending = false;
|
||
state.tokenUsage = null;
|
||
state.workedDurationMs = null;
|
||
state.lastWorkedDurationMs = null;
|
||
state.turnWorkStartedAt = null;
|
||
state.finalAssistantStartedAt = null;
|
||
state.sandboxPolicy = "workspace-write";
|
||
state.approvalPolicy = "on-request";
|
||
const modelInput = $("modelInput");
|
||
if (modelInput) modelInput.value = "";
|
||
const label = $("modelLabel");
|
||
if (label) {
|
||
label.textContent = "";
|
||
label.hidden = true;
|
||
}
|
||
setModelMenu(false);
|
||
renderModelPicker();
|
||
renderPermissionMenu();
|
||
renderUsage();
|
||
}
|
||
|
||
function prepareForSessionSnapshot(threadId) {
|
||
const incoming = typeof threadId === "string" ? threadId : "";
|
||
const previous = state.syncedThreadId !== null ? state.syncedThreadId : state.threadId || "";
|
||
if (previous !== incoming && (previous || incoming)) {
|
||
resetSessionModelMetadata();
|
||
state.turnExpansion.clear();
|
||
}
|
||
if (incoming) syncSessionActive(incoming);
|
||
return previous !== incoming;
|
||
}
|
||
|
||
function snapshotHistoryComplete(...sources) {
|
||
const seen = new Set();
|
||
const visit = (value, depth = 0) => {
|
||
if (!isRecord(value) || seen.has(value) || depth > 3) return undefined;
|
||
seen.add(value);
|
||
if (typeof value.historyComplete === "boolean") return value.historyComplete;
|
||
for (const key of ["metadata", "sessionMetadata", "state", "snapshot"]) {
|
||
const nested = visit(value[key], depth + 1);
|
||
if (typeof nested === "boolean") return nested;
|
||
}
|
||
return undefined;
|
||
};
|
||
for (const source of sources) {
|
||
const result = visit(source);
|
||
if (typeof result === "boolean") return result;
|
||
}
|
||
return undefined;
|
||
}
|
||
|
||
function projectionTargetThreadId() {
|
||
const switchingTarget = firstString(state.sessionSwitchContext?.targetThreadId);
|
||
if (switchingTarget) return switchingTarget;
|
||
if (state.sessionSelectedThreadId && state.sessionSelectedThreadId !== state.syncedThreadId) {
|
||
return state.sessionSelectedThreadId;
|
||
}
|
||
return firstString(state.threadId, state.syncedThreadId);
|
||
}
|
||
|
||
function outputProjectionAllowed(threadId) {
|
||
const incoming = String(threadId || "");
|
||
const expected = projectionTargetThreadId();
|
||
return !expected || !incoming || incoming === expected;
|
||
}
|
||
|
||
function hasVisibleOutputProjection() {
|
||
const output = $("output");
|
||
return Boolean(
|
||
state.structuredMessages.length
|
||
|| output?.dataset.outputTail
|
||
|| output?.querySelector(".message")
|
||
);
|
||
}
|
||
|
||
function finishSessionSnapshotCommit(threadId, authoritativeSnapshot = false) {
|
||
const incoming = String(threadId || "");
|
||
if (!incoming) return;
|
||
const context = state.sessionSwitchContext;
|
||
if (authoritativeSnapshot && context?.targetThreadId === incoming) {
|
||
context.targetSnapshotReady = true;
|
||
finishSessionSwitchIfReady();
|
||
}
|
||
syncSessionActive(incoming);
|
||
}
|
||
|
||
// Transcript, active-thread identity, and switch completion are one commit.
|
||
// This prevents a metadata-only/placeholder reconnect snapshot from clearing
|
||
// a fully rendered thread or completing a switch before its history arrives.
|
||
function commitOutputProjection(threadId, text, structuredMessages, options = {}) {
|
||
const incoming = String(threadId || "");
|
||
if (!outputProjectionAllowed(incoming)) return false;
|
||
const hasContent = Boolean(
|
||
(typeof text === "string" && text.length)
|
||
|| (Array.isArray(structuredMessages) && structuredMessages.length)
|
||
);
|
||
const historyComplete = options.historyComplete;
|
||
if (!hasContent && historyComplete !== true) {
|
||
// All relay control snapshots have projection-shaped placeholder fields.
|
||
// Until the host explicitly says history loading is complete, an empty
|
||
// projection is not authoritative—even when the current DOM is empty.
|
||
return false;
|
||
}
|
||
const changedThread = state.syncedThreadId !== null && state.syncedThreadId !== incoming;
|
||
prepareForSessionSnapshot(incoming);
|
||
if (changedThread) {
|
||
state.outputSynced = false;
|
||
state.snapshotNoticeShown = false;
|
||
}
|
||
replaceOutput(typeof text === "string" ? text : "", structuredMessages);
|
||
state.syncedThreadId = incoming;
|
||
if (incoming) state.threadId = incoming;
|
||
finishSessionSnapshotCommit(incoming, options.authoritativeSnapshot === true);
|
||
return true;
|
||
}
|
||
|
||
function applySessionMetadata(metadata, snapshotState = {}) {
|
||
const meta = isRecord(metadata) ? metadata : {};
|
||
const stateSnapshot = isRecord(snapshotState) ? snapshotState : {};
|
||
const thread = isRecord(meta.thread) ? meta.thread : isRecord(stateSnapshot.thread) ? stateSnapshot.thread : {};
|
||
const settings = isRecord(meta.threadSettings)
|
||
? meta.threadSettings
|
||
: isRecord(meta.latestThreadSettings)
|
||
? meta.latestThreadSettings
|
||
: isRecord(meta.settings)
|
||
? meta.settings
|
||
: isRecord(stateSnapshot.threadSettings) ? stateSnapshot.threadSettings : {};
|
||
const title = firstString(meta.title, meta.threadTitle, meta.name, thread.title, thread.name, thread.preview, stateSnapshot.title, stateSnapshot.threadTitle);
|
||
if (title) $("threadTitle").textContent = title;
|
||
|
||
const cwd = firstString(meta.cwd, settings.cwd, stateSnapshot.cwd);
|
||
if (cwd) $("cwdInput").value = cwd;
|
||
const modelValue = meta.latestModel ?? meta.model ?? meta.modelName ?? meta.modelId
|
||
?? settings.model ?? settings.modelName ?? stateSnapshot.latestModel ?? stateSnapshot.model ?? stateSnapshot.modelName;
|
||
const model = typeof modelValue === "object" && modelValue !== null
|
||
? firstString(modelValue.name, modelValue.id, modelValue.slug)
|
||
: firstString(modelValue);
|
||
if (model) {
|
||
$("modelInput").value = model;
|
||
const modelLabel = $("modelLabel");
|
||
const effortValue = firstDefined(
|
||
meta.latestReasoningEffort,
|
||
meta.effort,
|
||
settings.effort,
|
||
stateSnapshot.latestReasoningEffort,
|
||
stateSnapshot.effort,
|
||
);
|
||
state.currentModel = model;
|
||
if (effortValue !== undefined) {
|
||
state.currentEffort = effortValue === null ? null : firstString(effortValue);
|
||
}
|
||
if (modelLabel) { modelLabel.textContent = modelDisplayName(model); modelLabel.hidden = false; }
|
||
} else if (modelValue !== undefined) {
|
||
const modelLabel = $("modelLabel");
|
||
if (modelLabel) modelLabel.hidden = true;
|
||
}
|
||
const modelsValue = meta.availableModels ?? meta.models ?? stateSnapshot.availableModels ?? stateSnapshot.models;
|
||
if (Array.isArray(modelsValue)) state.availableModels = modelsValue.filter((entry) => typeof entry === "string" || isRecord(entry));
|
||
const subagentsValue = meta.subagents ?? stateSnapshot.subagents;
|
||
if (Array.isArray(subagentsValue)) state.subagents = subagentsValue;
|
||
const usageValue = meta.tokenUsage ?? meta.latestTokenUsageInfo ?? meta.contextUsage ?? meta.usage
|
||
?? stateSnapshot.tokenUsage ?? stateSnapshot.latestTokenUsageInfo ?? stateSnapshot.contextUsage ?? stateSnapshot.usage;
|
||
if (usageValue !== undefined) state.tokenUsage = usageValue;
|
||
const metadataWorkedDuration = finiteNumber(
|
||
meta.workedDurationMs,
|
||
meta.workDurationMs,
|
||
meta.workedForMs,
|
||
meta.workedFor?.durationMs,
|
||
settings.workedDurationMs,
|
||
stateSnapshot.workedDurationMs,
|
||
stateSnapshot.workDurationMs,
|
||
);
|
||
if (metadataWorkedDuration !== null) {
|
||
state.workedDurationMs = Math.max(0, metadataWorkedDuration);
|
||
state.lastWorkedDurationMs = Math.max(0, metadataWorkedDuration);
|
||
}
|
||
const metadataWorkStart = timestampMs(
|
||
meta.firstTurnWorkItemStartedAtMs,
|
||
meta.firstWorkItemStartedAtMs,
|
||
meta.workStartedAtMs,
|
||
meta.workedFor?.startedAtMs,
|
||
settings.firstTurnWorkItemStartedAtMs,
|
||
stateSnapshot.firstTurnWorkItemStartedAtMs,
|
||
stateSnapshot.workStartedAtMs,
|
||
);
|
||
if (metadataWorkStart !== null) state.turnWorkStartedAt = metadataWorkStart;
|
||
const metadataFinalStart = timestampMs(
|
||
meta.finalAssistantStartedAtMs,
|
||
meta.workedFor?.completedAtMs,
|
||
settings.finalAssistantStartedAtMs,
|
||
stateSnapshot.finalAssistantStartedAtMs,
|
||
);
|
||
if (metadataFinalStart !== null) state.finalAssistantStartedAt = metadataFinalStart;
|
||
renderModelPicker();
|
||
renderSubagents();
|
||
renderUsage();
|
||
|
||
const permissionsValue = meta.permissions ?? meta.currentPermissions ?? settings.permissions
|
||
?? stateSnapshot.permissions ?? stateSnapshot.currentPermissions;
|
||
const sandboxValue = meta.sandboxPolicy ?? meta.sandbox ?? settings.sandboxPolicy ?? settings.sandbox
|
||
?? stateSnapshot.sandboxPolicy ?? stateSnapshot.sandbox ?? sandboxFromPermissions(permissionsValue);
|
||
const sandbox = typeof sandboxValue === "object" && sandboxValue !== null
|
||
? firstString(sandboxValue.type, sandboxValue.mode, sandboxValue.policy)
|
||
: firstString(sandboxValue);
|
||
if (sandbox) {
|
||
const normalizedSandbox = normalizeSandboxName(sandbox);
|
||
state.sandboxPolicy = normalizedSandbox;
|
||
const sandboxInput = $("sandboxInput");
|
||
if (sandboxInput && [...sandboxInput.options].some((option) => option.value === normalizedSandbox)) sandboxInput.value = normalizedSandbox;
|
||
const permission = $("permissionChip");
|
||
const permissionLabel = $("permissionLabel");
|
||
if (permission && permissionLabel) {
|
||
permissionLabel.textContent = permissionSandboxLabel(normalizedSandbox);
|
||
permission.hidden = false;
|
||
}
|
||
} else {
|
||
const permission = $("permissionChip");
|
||
if (permission) permission.hidden = false;
|
||
}
|
||
const approval = normalizeApprovalPolicy(
|
||
meta.approvalPolicy !== undefined ? meta.approvalPolicy
|
||
: settings.approvalPolicy !== undefined ? settings.approvalPolicy
|
||
: stateSnapshot.approvalPolicy,
|
||
);
|
||
if (approval) {
|
||
state.approvalPolicy = approval;
|
||
const approvalInput = $("approvalInput");
|
||
if (approvalInput && [...approvalInput.options].some((option) => option.value === approval)) approvalInput.value = approval;
|
||
}
|
||
renderPermissionMenu();
|
||
const mode = firstString(meta.mode, stateSnapshot.mode);
|
||
const modeLabel = $("modeLabel");
|
||
if (modeLabel && mode) modeLabel.textContent = t(/cloud|remote/i.test(mode) ? "云端模式" : "本地模式");
|
||
const popoverCwd = $("popoverCwd");
|
||
const popoverMode = $("popoverMode");
|
||
if (popoverCwd && cwd) popoverCwd.textContent = cwd;
|
||
if (popoverMode && mode) popoverMode.textContent = t(/cloud|remote/i.test(mode) ? "云端模式" : "本地模式");
|
||
}
|
||
|
||
const setConnection = (kind, text) => {
|
||
$("connectionDot").className = `dot ${kind}`;
|
||
$("connectionText").textContent = t(text);
|
||
if (embeddedInAether) embedBridge.reportState(kind, { message: String(text || "") });
|
||
};
|
||
|
||
function setAuthRequired(value) {
|
||
if (typeof value !== "boolean") return;
|
||
state.authRequired = value;
|
||
document.body.classList.toggle("local-no-auth", !value);
|
||
const label = $("tokenLabel");
|
||
const input = $("tokenInput");
|
||
if (!label || !input) return;
|
||
label.textContent = t(value ? "访问 token（认证模式）" : "本机连接（无需 token）");
|
||
input.placeholder = t(value ? "粘贴 relay 启动时打印的 token" : "本机模式无需填写；认证模式再填写");
|
||
input.setAttribute("aria-label", t(value ? "relay access token" : "本地连接无需 token"));
|
||
}
|
||
|
||
const authHeaders = () => ({ Authorization: `Bearer ${state.token}`, "Content-Type": "application/json" });
|
||
|
||
function attachPendingUserToTurn(turnId) {
|
||
const key = String(turnId || "");
|
||
if (!key) return;
|
||
const article = state.pendingUserArticle;
|
||
if (article && article.isConnected) article.dataset.turnId = key;
|
||
state.pendingUserArticle = null;
|
||
}
|
||
|
||
function sendFrame(frame) {
|
||
if (!state.ws || state.ws.readyState !== WebSocket.OPEN) throw new Error(t("WebSocket 未连接"));
|
||
state.ws.send(JSON.stringify(frame));
|
||
}
|
||
|
||
function command(method, params) {
|
||
const commandId = `web-${crypto.randomUUID()}`;
|
||
sendFrame({ type: "command", commandId, method, params });
|
||
if (method === "turn/start" || method === "turn/steer") {
|
||
const text = (params?.input || [])
|
||
.map((item) => typeof item === "string" ? item : item?.text)
|
||
.filter(Boolean)
|
||
.join("\n");
|
||
finishAssistantStream();
|
||
state.pendingUserText = text;
|
||
appendDateSeparator(Date.now(), { role: "user", turnId: state.turnId || params?.expectedTurnId || "", turnStart: true });
|
||
const userMessage = appendMessage(text || "(空消息)", "user", "text", "", {
|
||
kind: "user",
|
||
turnId: state.turnId || params?.expectedTurnId || "",
|
||
timestamp: Date.now(),
|
||
showTimestamp: true,
|
||
});
|
||
if (method === "turn/start") state.pendingUserArticle = userMessage?.article || null;
|
||
} else if (method === "thread/settings/update") {
|
||
// Keep settings changes quiet in the transcript. The model picker has
|
||
// its own pending state and the authoritative snapshot will update the
|
||
// label once the official follower accepts the request.
|
||
setConversationStatus("正在更新模型设置", "active");
|
||
} else if (["session/list", "session/select", "control/mode/set"].includes(sessionCommandMethod(method))) {
|
||
// Session navigation is shell UI state. It must not appear as a Codex
|
||
// message or alter the current turn's activity timeline.
|
||
} else {
|
||
appendOutput(`${method} (${commandId})`, "meta");
|
||
}
|
||
return commandId;
|
||
}
|
||
|
||
function composerText() {
|
||
const editor = $("messageInput");
|
||
if (!editor) return "";
|
||
return String(editor.innerText || editor.textContent || "")
|
||
.replace(/\u00a0/g, " ")
|
||
.replace(/\n{3,}/g, "\n\n")
|
||
.trim();
|
||
}
|
||
|
||
function clearComposer() {
|
||
const editor = $("messageInput");
|
||
if (!editor) return;
|
||
editor.replaceChildren();
|
||
editor.style.height = "";
|
||
resizeComposer();
|
||
updateIds();
|
||
}
|
||
|
||
function resizeComposer() {
|
||
const editor = $("messageInput");
|
||
if (!editor) return;
|
||
editor.style.height = "auto";
|
||
const maxHeight = Math.max(40, Math.round(window.innerHeight * 0.25));
|
||
const nextHeight = Math.min(Math.max(editor.scrollHeight, 40), maxHeight);
|
||
editor.style.height = `${nextHeight}px`;
|
||
updateScrollPadding();
|
||
}
|
||
|
||
function defaultResponse(request) {
|
||
const method = request.method;
|
||
// Rendering a request must never imply consent. The operator still has
|
||
// to press an explicit action button.
|
||
if (method === "item/commandExecution/requestApproval") return { decision: "decline" };
|
||
if (method === "item/fileChange/requestApproval") return { decision: "decline" };
|
||
if (method === "item/permissions/requestApproval") {
|
||
return normalizePermissionResponse({});
|
||
}
|
||
if (method === "applyPatchApproval" || method === "execCommandApproval") return { decision: { denied: { rejection: "默认拒绝，请明确允许" } } };
|
||
if (method === "item/tool/requestUserInput") {
|
||
const answers = {};
|
||
for (const question of request.params?.questions || []) answers[question.id] = { answers: [""] };
|
||
return { answers };
|
||
}
|
||
if (method === "mcpServer/elicitation/request") return { action: "decline", content: null, _meta: null };
|
||
return {};
|
||
}
|
||
|
||
function normalizePermissionResponse(rawPermissions, scope, strictAutoReview) {
|
||
const permissions = {};
|
||
if (rawPermissions && typeof rawPermissions === "object" && !Array.isArray(rawPermissions)) {
|
||
for (const [key, value] of Object.entries(rawPermissions)) {
|
||
if (value && typeof value === "object" && !Array.isArray(value)) permissions[key] = value;
|
||
}
|
||
}
|
||
const response = { permissions, scope: scope === "session" ? "session" : "turn" };
|
||
if (typeof strictAutoReview === "boolean") response.strictAutoReview = strictAutoReview;
|
||
return response;
|
||
}
|
||
|
||
function requestSummary(request) {
|
||
const params = request.params || {};
|
||
if (Array.isArray(params.commandActions)) {
|
||
const commands = params.commandActions
|
||
.map((action) => action && typeof action === "object" ? action.command || action.description : "")
|
||
.filter(Boolean);
|
||
if (commands.length) return commands.join("\n");
|
||
}
|
||
if (request.summary) return request.summary;
|
||
if (Array.isArray(params.command)) return params.command.join(" ");
|
||
if (params.command) return params.command;
|
||
if (params.reason) return params.reason;
|
||
if (Array.isArray(params.questions)) return params.questions.map((q) => q.question).join(" / ");
|
||
if (params.message) return params.message;
|
||
return t("需要远程确认或输入");
|
||
}
|
||
|
||
function requestTitle(request) {
|
||
const method = String(request.method || "");
|
||
if (method === "item/commandExecution/requestApproval" || method === "execCommandApproval") return t("允许运行命令？");
|
||
if (method === "item/fileChange/requestApproval" || method === "applyPatchApproval") return t("允许修改文件？");
|
||
if (method === "item/permissions/requestApproval") return t("需要扩大权限");
|
||
if (method === "item/tool/requestUserInput") return t("Codex 需要你的回答");
|
||
if (method === "mcpServer/elicitation/request") return t("需要外部服务确认");
|
||
return t("Codex 请求确认");
|
||
}
|
||
|
||
function requestRisk(request) {
|
||
const risk = String(request.risk || "medium").toLowerCase();
|
||
return t(risk === "high" ? "高风险" : risk === "low" ? "低风险" : "需确认");
|
||
}
|
||
|
||
function requestCommand(request) {
|
||
const params = request.params || {};
|
||
if (Array.isArray(params.commandActions)) {
|
||
return params.commandActions
|
||
.map((action) => action && typeof action === "object" ? action.command || action.description : "")
|
||
.filter(Boolean)
|
||
.join("\n");
|
||
}
|
||
if (Array.isArray(params.command)) return params.command.join(" ");
|
||
return typeof params.command === "string" ? params.command : "";
|
||
}
|
||
|
||
function questionOptions(question) {
|
||
const options = question?.options || question?.choices || question?.enum;
|
||
if (!Array.isArray(options)) return [];
|
||
return options.map((option) => {
|
||
if (typeof option === "string") return { label: option, value: option };
|
||
if (option && typeof option === "object") {
|
||
const value = option.value ?? option.id ?? option.label ?? option.name;
|
||
const label = option.label ?? option.name ?? value;
|
||
return { label: String(label ?? ""), value: String(value ?? "") };
|
||
}
|
||
return null;
|
||
}).filter((option) => option && option.value);
|
||
}
|
||
|
||
function renderQuestionFields(container, request) {
|
||
const questions = Array.isArray(request.params?.questions) ? request.params.questions : [];
|
||
container.replaceChildren();
|
||
if (!questions.length) {
|
||
container.hidden = true;
|
||
return;
|
||
}
|
||
container.hidden = false;
|
||
questions.forEach((question, index) => {
|
||
if (!question || typeof question !== "object") return;
|
||
const field = document.createElement("label");
|
||
field.className = "request-question";
|
||
field.dataset.questionId = String(question.id ?? question.key ?? index);
|
||
const prompt = document.createElement("span");
|
||
const questionPrompt = question.question ?? question.prompt ?? question.label;
|
||
prompt.textContent = questionPrompt === undefined || questionPrompt === null ? t("请输入") : String(questionPrompt);
|
||
field.append(prompt);
|
||
const options = questionOptions(question);
|
||
let control;
|
||
if (options.length) {
|
||
control = document.createElement("select");
|
||
options.forEach((option) => {
|
||
const item = document.createElement("option");
|
||
item.value = option.value;
|
||
item.textContent = option.label;
|
||
control.append(item);
|
||
});
|
||
} else {
|
||
control = document.createElement("input");
|
||
control.type = question.secret ? "password" : "text";
|
||
control.placeholder = String(question.placeholder ?? "");
|
||
}
|
||
control.className = "request-answer";
|
||
control.dataset.answerId = field.dataset.questionId;
|
||
field.append(control);
|
||
container.append(field);
|
||
});
|
||
}
|
||
|
||
function inputResponseFromCard(article) {
|
||
const answers = {};
|
||
for (const field of article.querySelectorAll(".request-question")) {
|
||
const id = field.dataset.questionId;
|
||
const value = field.querySelector(".request-answer")?.value ?? "";
|
||
answers[id] = { answers: [value] };
|
||
}
|
||
return { answers };
|
||
}
|
||
|
||
function requestResponseFromCard(request, article, responseBox, action) {
|
||
if (request.method === "item/tool/requestUserInput" && action === "allow") {
|
||
// Prefer explicit edits in the JSON editor; otherwise collect the
|
||
// first-class answer controls rendered for each question.
|
||
if (responseBox.value !== article.dataset.defaultResponse) {
|
||
try {
|
||
const parsed = JSON.parse(responseBox.value);
|
||
if (parsed && typeof parsed === "object") return parsed;
|
||
} catch {
|
||
return null;
|
||
}
|
||
}
|
||
return inputResponseFromCard(article);
|
||
}
|
||
if (action === "allow") {
|
||
const response = allowResponse(request, responseBox.value);
|
||
const scope = article.querySelector(".request-scope")?.value;
|
||
if (request.method === "item/permissions/requestApproval" && response && typeof response === "object" && scope) response.scope = scope;
|
||
return response;
|
||
}
|
||
if (action === "deny") return denyResponse(request);
|
||
try {
|
||
const parsed = JSON.parse(responseBox.value);
|
||
return parsed && typeof parsed === "object" ? parsed : {};
|
||
} catch {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
function buildRequestCard(request) {
|
||
const fragment = $("requestTemplate").content.cloneNode(true);
|
||
const article = fragment.querySelector(".request");
|
||
const method = String(request.method || "unknown");
|
||
const risk = requestRisk(request);
|
||
article.dataset.requestKey = requestKey(request.requestId);
|
||
article.dataset.risk = String(request.risk || "medium").toLowerCase();
|
||
fragment.querySelector(".request-method").textContent = requestTitle(request);
|
||
fragment.querySelector(".request-id").textContent = `#${request.requestId}`;
|
||
const riskNode = fragment.querySelector(".request-risk");
|
||
riskNode.textContent = risk;
|
||
riskNode.dataset.risk = article.dataset.risk;
|
||
fragment.querySelector(".request-summary").textContent = requestSummary(request);
|
||
const commandNode = fragment.querySelector(".request-command");
|
||
const commandText = requestCommand(request);
|
||
commandNode.textContent = commandText;
|
||
commandNode.hidden = !commandText;
|
||
fragment.querySelector(".request-json").textContent = JSON.stringify(request.params || {}, null, 2);
|
||
const responseBox = fragment.querySelector(".request-response");
|
||
responseBox.value = JSON.stringify(defaultResponse(request), null, 2);
|
||
article.dataset.defaultResponse = responseBox.value;
|
||
const scopeWrap = fragment.querySelector(".request-scope-wrap");
|
||
if (request.method === "item/permissions/requestApproval") scopeWrap.hidden = false;
|
||
renderQuestionFields(fragment.querySelector(".request-questions"), request);
|
||
const allow = fragment.querySelector(".request-allow");
|
||
const deny = fragment.querySelector(".request-deny");
|
||
const send = fragment.querySelector(".request-send");
|
||
allow.textContent = t(method === "item/tool/requestUserInput" ? "提交回答" : method === "item/permissions/requestApproval" ? "允许" : "允许一次");
|
||
send.textContent = t("发送自定义响应");
|
||
allow.addEventListener("click", () => {
|
||
const result = requestResponseFromCard(request, article, responseBox, "allow");
|
||
if (result) respond(request.requestId, JSON.stringify(result));
|
||
else appendOutput("自定义响应不是有效 JSON", "error");
|
||
});
|
||
deny.addEventListener("click", () => respond(request.requestId, JSON.stringify(requestResponseFromCard(request, article, responseBox, "deny"))));
|
||
send.addEventListener("click", () => {
|
||
const result = requestResponseFromCard(request, article, responseBox, "custom");
|
||
if (result) respond(request.requestId, JSON.stringify(result));
|
||
else appendOutput("响应不是有效 JSON", "error");
|
||
});
|
||
if (state.sessionSwitching || state.modeSwitching || state.role !== "operator" || !RESPONDABLE_METHODS.has(method) || state.responding.has(requestKey(request.requestId))) {
|
||
for (const button of fragment.querySelectorAll("button")) button.disabled = true;
|
||
responseBox.disabled = true;
|
||
for (const control of fragment.querySelectorAll("input, select")) control.disabled = true;
|
||
}
|
||
return fragment;
|
||
}
|
||
|
||
function renderRequests() {
|
||
const container = $("inlineRequests");
|
||
const legacyContainer = $("requests");
|
||
container.replaceChildren();
|
||
if (legacyContainer) legacyContainer.replaceChildren();
|
||
const requests = [...state.requests.values()];
|
||
$("requestCount").textContent = String(requests.length);
|
||
$("factRequests").textContent = String(requests.length);
|
||
renderControlMode();
|
||
const panel = $("requestsPanel");
|
||
if (!requests.length) {
|
||
container.className = "inline-requests empty";
|
||
if (legacyContainer) {
|
||
legacyContainer.className = "requests empty";
|
||
legacyContainer.textContent = t("暂无待处理请求");
|
||
}
|
||
if (panel) panel.open = false;
|
||
return;
|
||
}
|
||
container.className = "inline-requests";
|
||
for (const request of requests) {
|
||
const fragment = buildRequestCard(request);
|
||
container.append(fragment);
|
||
}
|
||
if (panel) panel.open = false;
|
||
}
|
||
|
||
function denyResponse(request) {
|
||
if (request.method === "item/commandExecution/requestApproval" || request.method === "item/fileChange/requestApproval") return { decision: "decline" };
|
||
if (request.method === "item/permissions/requestApproval") return normalizePermissionResponse({});
|
||
if (request.method === "applyPatchApproval" || request.method === "execCommandApproval") return { decision: { denied: { rejection: "远程参与者拒绝" } } };
|
||
if (request.method === "mcpServer/elicitation/request") return { action: "decline", content: null, _meta: null };
|
||
if (request.method === "item/tool/requestUserInput") return { answers: {} };
|
||
return { decision: "decline" };
|
||
}
|
||
|
||
function allowResponse(request, raw) {
|
||
const method = request.method;
|
||
if (method === "item/commandExecution/requestApproval" || method === "item/fileChange/requestApproval") return { decision: "accept" };
|
||
if (method === "item/permissions/requestApproval") {
|
||
if (raw === undefined) return normalizePermissionResponse(request.params?.permissions);
|
||
try {
|
||
const parsed = JSON.parse(raw);
|
||
return parsed && typeof parsed === "object"
|
||
? normalizePermissionResponse(parsed.permissions, parsed.scope, parsed.strictAutoReview)
|
||
: normalizePermissionResponse({});
|
||
} catch {
|
||
return normalizePermissionResponse(request.params?.permissions);
|
||
}
|
||
}
|
||
if (method === "applyPatchApproval" || method === "execCommandApproval") return { decision: "approved" };
|
||
if (method === "mcpServer/elicitation/request") return { action: "accept", content: null, _meta: null };
|
||
// User-input requests need the operator's edited answers. Keep the JSON
|
||
// editor as the source of truth and fail closed if it is malformed.
|
||
try {
|
||
const parsed = JSON.parse(raw);
|
||
return parsed && typeof parsed === "object" ? parsed : { answers: {} };
|
||
} catch {
|
||
return { answers: {} };
|
||
}
|
||
}
|
||
|
||
function respond(requestId, raw) {
|
||
if (state.sessionSwitching) return;
|
||
const key = requestKey(requestId);
|
||
if (state.responding.has(key)) return;
|
||
let result;
|
||
try { result = JSON.parse(raw); } catch { appendOutput("响应不是有效 JSON", "error"); return; }
|
||
try { sendFrame({ type: "respond", requestId, result }); } catch (error) { appendOutput(error.message, "error"); return; }
|
||
state.responding.add(key);
|
||
renderRequests();
|
||
}
|
||
|
||
function updateIds() {
|
||
$("threadId").textContent = state.threadId || "-";
|
||
$("turnId").textContent = state.turnId || "-";
|
||
const popoverThread = $("popoverThread");
|
||
if (popoverThread) popoverThread.textContent = state.threadId || "-";
|
||
const hasThread = Boolean(state.threadId);
|
||
const hasTurn = Boolean(state.turnId);
|
||
const hasComposerText = Boolean(composerText());
|
||
const switching = Boolean(state.sessionSwitching || state.modeSwitching);
|
||
document.body.classList.toggle("turn-active", hasTurn);
|
||
$("startThreadButton").disabled = state.attachMode || !state.appReady || state.role !== "operator";
|
||
const newSessionButton = $("newSessionButton");
|
||
if (newSessionButton) {
|
||
newSessionButton.disabled = !sessionControlAllowed("sessionCreate") || switching || !state.appReady
|
||
|| Boolean(state.newSessionCommandId)
|
||
|| !["operator", "owner", "host"].includes(String(state.role || ""));
|
||
newSessionButton.setAttribute("aria-busy", String(Boolean(state.newSessionCommandId)));
|
||
}
|
||
$("startTurnButton").disabled = switching || !state.appReady || !hasThread || hasTurn || !hasComposerText || state.role !== "operator";
|
||
$("steerButton").disabled = switching || !state.appReady || !hasTurn || !hasComposerText || state.role !== "operator";
|
||
$("interruptButton").disabled = switching || !state.appReady || !hasTurn || state.role !== "operator";
|
||
const messageInput = $("messageInput");
|
||
if (messageInput) {
|
||
messageInput.contentEditable = switching ? "false" : "true";
|
||
messageInput.setAttribute("aria-disabled", String(switching));
|
||
}
|
||
for (const id of ["modelPickerButton", "permissionChip", "composerPlusButton"]) {
|
||
const control = $(id);
|
||
if (control) control.disabled = switching;
|
||
}
|
||
const send = $("startTurnButton");
|
||
if (send) {
|
||
send.title = t(hasTurn ? "发送 Steer" : "发送消息");
|
||
send.setAttribute("aria-label", t(hasTurn ? "发送 Steer" : "发送消息"));
|
||
}
|
||
const settingsModelValue = $("settingsModelValue");
|
||
if (settingsModelValue) settingsModelValue.textContent = state.currentModel ? modelDisplayName(state.currentModel, state.currentEffort) : t("默认");
|
||
const settingsPermissionValue = $("settingsPermissionValue");
|
||
if (settingsPermissionValue) settingsPermissionValue.textContent = permissionSandboxLabel(state.sandboxPolicy);
|
||
renderControlMode();
|
||
}
|
||
|
||
function protocolMethodForEvent(event, payload) {
|
||
if (typeof payload?.method === "string") return payload.method;
|
||
if (typeof payload?.params?.method === "string") return payload.params.method;
|
||
const type = String(event?.type || "");
|
||
if (type === "item.started") return "item/started";
|
||
if (type === "item.completed") return "item/completed";
|
||
if (type === "thread.started") return "thread/started";
|
||
if (type === "turn.started") return "turn/started";
|
||
if (type === "turn.completed") return "turn/completed";
|
||
if (type === "turn.plan.updated") return "turn/plan/updated";
|
||
if (type === "turn.diff.updated") return "turn/diff/updated";
|
||
return "";
|
||
}
|
||
|
||
function handleProtocolNotification(method, payload, eventType = "") {
|
||
const params = eventParams(payload);
|
||
if (method === "item/started" || eventType === "item.started") {
|
||
if (!eventBelongsToCurrentTurn(payload)) return true;
|
||
handleItemLifecycle("started", params);
|
||
return true;
|
||
}
|
||
if (method === "item/completed" || eventType === "item.completed") {
|
||
if (!eventBelongsToCurrentTurn(payload)) return true;
|
||
handleItemLifecycle("completed", params);
|
||
return true;
|
||
}
|
||
if (method === "turn/plan/updated" || method === "turn/plan/update" || eventType === "turn.plan.updated") {
|
||
if (!eventBelongsToCurrentTurn(payload)) return true;
|
||
handlePlanUpdate(params);
|
||
return true;
|
||
}
|
||
if (method === "turn/diff/updated" || method === "turn/diff/update" || eventType === "turn.diff.updated") {
|
||
if (!eventBelongsToCurrentTurn(payload)) return true;
|
||
handleDiffUpdate(params);
|
||
return true;
|
||
}
|
||
if (/^(?:item\/)?fileChange\/outputDelta$/.test(method)
|
||
|| method === "item/fileChange/delta") {
|
||
if (!eventBelongsToCurrentTurn(payload)) return true;
|
||
appendFileChangeChunk(payload, textFromValue(params.delta ?? params.text ?? params.output ?? params.chunk));
|
||
return true;
|
||
}
|
||
if (/^(?:item\/)?(?:fileRead|readFile|fileReadOutput)\/(?:outputDelta|delta|textDelta)$/.test(method)
|
||
|| method === "item/fileRead/outputDelta"
|
||
|| method === "item/fileRead/delta") {
|
||
if (!eventBelongsToCurrentTurn(payload)) return true;
|
||
appendOutputChunk(textFromValue(params.delta ?? params.text ?? params.output ?? params.chunk ?? params.content), "read", {
|
||
kind: "read",
|
||
itemId: params.itemId,
|
||
turnId: eventTurnId(payload),
|
||
});
|
||
return true;
|
||
}
|
||
if (method === "item/commandExecution/outputDelta"
|
||
|| method === "command/exec/outputDelta"
|
||
|| method === "process/outputDelta") {
|
||
if (!eventBelongsToCurrentTurn(payload)) return true;
|
||
const stream = params.stream || params.channel || (params.stderr ? "stderr" : "stdout");
|
||
appendOutputChunk(textFromValue(params.delta ?? params.text ?? params.output ?? params.chunk), stream, {
|
||
kind: "tool",
|
||
itemId: params.itemId,
|
||
turnId: eventTurnId(payload),
|
||
});
|
||
return true;
|
||
}
|
||
if (method === "item/reasoning/summaryTextDelta"
|
||
|| method === "item/reasoning/textDelta"
|
||
|| method === "item/plan/delta") {
|
||
if (!eventBelongsToCurrentTurn(payload)) return true;
|
||
appendOutputChunk(textFromValue(params.delta ?? params.text), "reasoning", {
|
||
kind: method === "item/plan/delta" ? "plan" : "reasoning",
|
||
itemId: params.itemId,
|
||
turnId: eventTurnId(payload),
|
||
});
|
||
return true;
|
||
}
|
||
if (method === "turn/started") {
|
||
const turn = isRecord(params.turn) ? params.turn : params;
|
||
const startedTurnId = turn.id || params.turnId;
|
||
const workStart = timestampMs(
|
||
turn.firstTurnWorkItemStartedAtMs,
|
||
turn.workStartedAtMs,
|
||
params.firstTurnWorkItemStartedAtMs,
|
||
params.workStartedAtMs,
|
||
);
|
||
if (workStart !== null) state.turnWorkStartedAt = workStart;
|
||
startTurnClock(startedTurnId, turn.startedAtMs || params.startedAtMs, turn.elapsedMs || params.elapsedMs);
|
||
attachPendingUserToTurn(startedTurnId);
|
||
return true;
|
||
}
|
||
if (method === "turn/completed") {
|
||
const turn = isRecord(params.turn) ? params.turn : params;
|
||
const turnId = turn.id || params.turnId || "";
|
||
if (!eventBelongsToCurrentTurn(payload)) return true;
|
||
const status = normalizeActivityStatus(turn.status || params.status, "completed");
|
||
const duration = turn.durationMs || params.durationMs;
|
||
const worked = workedDurationFor(turn, workedDurationFor(params, null));
|
||
const finalAssistantStart = timestampMs(turn.finalAssistantStartedAtMs, params.finalAssistantStartedAtMs);
|
||
if (finalAssistantStart !== null) state.finalAssistantStartedAt = finalAssistantStart;
|
||
finishActivitiesForTurn(turnId, status);
|
||
finishAssistantStream();
|
||
const completedTurnId = turnId || state.turnId || "";
|
||
stopTurnClock(status, duration, turn.completedAtMs || params.completedAtMs, worked);
|
||
appendCompletedTurnDivider(completedTurnId, status, worked ?? state.lastWorkedDurationMs ?? duration ?? state.lastTurnDurationMs);
|
||
reconcileTurnDividers();
|
||
if (completedTurnId) {
|
||
state.retiredTurnIds.add(completedTurnId);
|
||
if (state.retiredTurnIds.size > 100) state.retiredTurnIds.delete(state.retiredTurnIds.values().next().value);
|
||
}
|
||
state.pendingUserText = "";
|
||
state.turnId = "";
|
||
updateIds();
|
||
return true;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
function handleEvent(event) {
|
||
const eventSeq = finiteNumber(event.seq);
|
||
// The relay sends a buffered event stream followed by one control
|
||
// `session.snapshot`. Treat that control frame as the only baseline during
|
||
// the handshake; an older host `session.snapshot` event in the buffer is
|
||
// just historical data and may describe a turn that already ended.
|
||
if (state.awaitingSnapshot) return;
|
||
// `subscribe` may replay events that are already represented by the
|
||
// following authoritative snapshot. Ignore those frames entirely so a
|
||
// stale task.started/task.status cannot reopen the composer state.
|
||
if (eventSeq !== null && state.lastSnapshotSeq > 0 && eventSeq <= state.lastSnapshotSeq) return;
|
||
if (eventSeq !== null && eventSeq > state.lastSeq) state.lastSeq = eventSeq;
|
||
$("latestSeq").textContent = `seq ${state.lastSeq}`;
|
||
$("lastEvent").textContent = `${event.seq || "-"} / ${event.type || "event"}`;
|
||
const payload = isRecord(event.payload) ? { ...event.payload } : {};
|
||
// Older bridge versions put identity/status fields on the event envelope
|
||
// instead of inside payload. Normalize both shapes before routing so a
|
||
// terminal event cannot be attributed to the wrong turn.
|
||
for (const key of [
|
||
"threadId", "turnId", "requestId", "method", "params", "status", "executionStatus", "activity", "turnStatus", "activeFlags",
|
||
"controlMode", "mode", "targetMode", "modeEpoch", "capabilities",
|
||
"startedAtMs", "durationMs", "completedAtMs", "workedDurationMs", "workDurationMs", "workedForMs",
|
||
"firstTurnWorkItemStartedAtMs", "firstWorkItemStartedAtMs", "workStartedAtMs", "finalAssistantStartedAtMs",
|
||
]) {
|
||
if (payload[key] === undefined && event[key] !== undefined) payload[key] = event[key];
|
||
}
|
||
const usagePayload = payload.tokenUsage ?? payload.latestTokenUsageInfo ?? payload.contextUsage ?? payload.usage
|
||
?? payload.params?.tokenUsage ?? payload.params?.latestTokenUsageInfo ?? payload.params?.contextUsage;
|
||
if (usagePayload !== undefined) {
|
||
state.tokenUsage = usagePayload;
|
||
renderUsage();
|
||
}
|
||
const protocolMethod = protocolMethodForEvent(event, payload);
|
||
// Do not let a replayed terminal event from an older turn overwrite the
|
||
// timer/status of a newer turn. The protocol handler performs the same
|
||
// check, but status is normally applied before routing the event.
|
||
const staleTerminalEvent = (event.type === "task.finished"
|
||
|| event.type === "task.cancelled"
|
||
|| protocolMethod === "turn/completed")
|
||
&& !eventBelongsToCurrentTurn(payload);
|
||
// Status is carried both as a typed relay field and inside the payload for
|
||
// older clients. Apply it before routing the event so a normal output
|
||
// delta cannot hide an active thinking/editing/approval state.
|
||
const hasExecutionStatus = isRecord(payload.executionStatus)
|
||
|| isRecord(event.status)
|
||
|| isRecord(payload.status)
|
||
|| typeof payload.activity === "string"
|
||
|| typeof payload.turnStatus === "string"
|
||
|| Array.isArray(payload.activeFlags)
|
||
|| payload.startedAtMs !== undefined
|
||
|| payload.durationMs !== undefined;
|
||
if (hasExecutionStatus && !staleTerminalEvent) {
|
||
applyStatusSnapshot({
|
||
...payload,
|
||
status: payload.executionStatus || event.status || payload.status,
|
||
}, { allowTerminal: true, showIdle: false });
|
||
}
|
||
if (protocolMethod && handleProtocolNotification(protocolMethod, payload, event.type)) {
|
||
if (event.type === "item.started"
|
||
|| event.type === "item.completed"
|
||
|| event.type === "task.status"
|
||
|| protocolMethod === "turn/completed") updateIds();
|
||
return;
|
||
}
|
||
if (event.type === "control.mode.switching" || event.type === "control.mode.changed") {
|
||
const requestedMode = normalizeControlMode(firstString(payload.controlMode, payload.mode, payload.targetMode));
|
||
if (requestedMode && (requestedMode !== state.controlMode || state.modeSwitching)) {
|
||
state.modeSwitching = true;
|
||
state.requestedControlMode = requestedMode;
|
||
if (state.modeRequestEpoch < 0) state.modeRequestEpoch = state.modeEpoch;
|
||
setConversationStatus("正在切换控制模式", "active");
|
||
updateIds();
|
||
}
|
||
return;
|
||
}
|
||
if (event.type === "session.switching") {
|
||
state.sessionSwitching = true;
|
||
const targetThreadId = firstString(payload.targetThreadId, payload.threadId);
|
||
let switchContext = state.sessionSwitchContext;
|
||
if (targetThreadId) {
|
||
state.sessionSelectedThreadId = targetThreadId;
|
||
switchContext = beginSessionSwitchContext(targetThreadId);
|
||
// Route subsequent target events against the requested owner while
|
||
// the previous transcript remains mounted as the visual fallback.
|
||
state.threadId = targetThreadId;
|
||
if (switchContext?.targetTitle) {
|
||
setConversationStatus(
|
||
uiLocale() === "en-US"
|
||
? `Switching to “${switchContext.targetTitle}”`
|
||
: `正在切换到「${switchContext.targetTitle}」`,
|
||
"active",
|
||
);
|
||
}
|
||
}
|
||
finishAssistantStream();
|
||
// Keep the previous transcript mounted until the target's authoritative
|
||
// snapshot arrives. The bridge may emit `session.switching` before
|
||
// owner discovery/follow completes; clearing here made a failed switch
|
||
// look like an empty conversation and left the user with no way to tell
|
||
// whether the target had actually loaded.
|
||
setSessionSwitchingVisual(true);
|
||
if (!switchContext?.targetTitle) setConversationStatus("正在切换会话", "active");
|
||
renderSessionPicker();
|
||
return;
|
||
}
|
||
if (event.type === "session.selected") {
|
||
const selectedThreadId = firstString(payload.threadId, payload.activeThreadId);
|
||
const switchContext = state.sessionSwitchContext;
|
||
if (payload.failed === true) {
|
||
// VS Code-driven attachment changes have no browser command result.
|
||
// The adapter therefore publishes an explicit failed selection for
|
||
// the previous thread. Roll routing/title back even if a target
|
||
// snapshot was already rendered while the adapter validated its owner.
|
||
const previousThreadId = firstString(switchContext?.previousThreadId, selectedThreadId);
|
||
restoreSessionSwitchContext();
|
||
if (previousThreadId) {
|
||
state.threadId = previousThreadId;
|
||
state.sessionSelectedThreadId = previousThreadId;
|
||
syncSessionActive(previousThreadId);
|
||
}
|
||
state.sessionListError = sessionErrorMessage(payload, "会话切换失败，已恢复原会话");
|
||
setConversationStatus(state.sessionListError, "warning");
|
||
renderSessionPicker();
|
||
return;
|
||
}
|
||
|
||
const matchesTarget = Boolean(switchContext
|
||
&& selectedThreadId
|
||
&& switchContext.targetThreadId === selectedThreadId);
|
||
if (selectedThreadId && (!switchContext || matchesTarget)) {
|
||
state.sessionSelectedThreadId = selectedThreadId;
|
||
syncSessionActive(selectedThreadId);
|
||
}
|
||
// This is only one half of the switch commit. An acknowledgement for a
|
||
// superseded target is ignored, and a matching acknowledgement keeps all
|
||
// input disabled until the target's authoritative snapshot is committed.
|
||
if (matchesTarget) {
|
||
switchContext.selectedAckReady = true;
|
||
if (finishSessionSwitchIfReady()) {
|
||
setConversationStatus("会话已切换", "ready");
|
||
} else {
|
||
state.sessionSwitching = true;
|
||
setSessionSwitchingVisual(true);
|
||
setConversationStatus("正在加载会话", "active");
|
||
}
|
||
} else if (!switchContext) {
|
||
state.sessionSwitching = false;
|
||
finishSessionSwitchContext();
|
||
}
|
||
renderSessionPicker();
|
||
return;
|
||
}
|
||
if (/error|warning/i.test(String(event.type || ""))
|
||
|| ["error", "warning"].includes(String(payload.method || "").toLowerCase())) {
|
||
finishAssistantStream();
|
||
appendOutput(eventMessage(payload), /warning/i.test(String(event.type || "")) ? "meta" : "error");
|
||
return;
|
||
}
|
||
if (event.type === "connection.opened" || event.type === "app.ready") {
|
||
state.appReady = true;
|
||
$("appState").textContent = appStatusLabel("ready");
|
||
$("factApp").textContent = appStatusLabel("ready");
|
||
}
|
||
if (event.type === "connection.closed" || event.type === "host.disconnected" || event.type === "app.exited") {
|
||
finishAssistantStream();
|
||
const disconnectedTurnId = state.turnId;
|
||
if (disconnectedTurnId) finishActivitiesForTurn(disconnectedTurnId, "interrupted");
|
||
state.pendingUserText = "";
|
||
state.appReady = false;
|
||
state.snapshotNoticeShown = false;
|
||
state.turnId = "";
|
||
state.turnStartedAt = null;
|
||
state.turnWorkStartedAt = null;
|
||
state.finalAssistantStartedAt = null;
|
||
state.workedDurationMs = null;
|
||
state.lastWorkedDurationMs = null;
|
||
state.currentActivity = "idle";
|
||
state.currentActivityStartedAt = null;
|
||
state.currentActivityDurationMs = null;
|
||
state.currentActivityTurnId = "";
|
||
state.subagents = [];
|
||
renderSubagents();
|
||
updateLiveActivity("idle");
|
||
state.sessionListLoading = false;
|
||
state.sessionListCommandId = "";
|
||
state.newSessionCommandId = "";
|
||
state.sessions = [];
|
||
state.sessionFocusedId = "";
|
||
if (state.sessionSwitching) {
|
||
// An explicit host disconnect aborts an in-flight hand-off. Restore
|
||
// the previous thread identity while keeping its transcript mounted.
|
||
restoreSessionSwitchContext();
|
||
}
|
||
state.sessionSelectedThreadId = "";
|
||
state.sessionListError = "VS Code 主机未连接";
|
||
renderSessionPicker();
|
||
$("appState").textContent = appStatusLabel("offline");
|
||
$("factApp").textContent = appStatusLabel("offline");
|
||
updateIds();
|
||
updateScrollToBottom($("output"));
|
||
}
|
||
if (event.type === "output.snapshot") {
|
||
const snapshotThreadId = firstString(payload.threadId, state.threadId, state.syncedThreadId);
|
||
if (!outputProjectionAllowed(snapshotThreadId)) return;
|
||
const committed = commitOutputProjection(snapshotThreadId, typeof payload.text === "string" ? payload.text : "", payload.messages, {
|
||
historyComplete: snapshotHistoryComplete(payload),
|
||
authoritativeSnapshot: true,
|
||
});
|
||
if (!committed) return;
|
||
if (Array.isArray(payload.subagents)) {
|
||
state.subagents = payload.subagents;
|
||
renderSubagents();
|
||
}
|
||
return;
|
||
}
|
||
if ((event.type === "output.delta" || event.type === "output.chunk")
|
||
&& (payload.text || Array.isArray(payload.messages) || isRecord(payload.messagesPatch))) {
|
||
const projectionThreadId = firstString(payload.threadId, state.threadId, state.syncedThreadId);
|
||
if (!outputProjectionAllowed(projectionThreadId)) return;
|
||
if (!eventBelongsToCurrentTurn(payload)) return;
|
||
const projectionMatches = !projectionThreadId || projectionThreadId === state.syncedThreadId;
|
||
// Attach-mode adapters include the complete role-aware projection on a
|
||
// delta. Re-rendering that projection keeps reasoning, tools, edits and
|
||
// assistant text in their canonical item boundaries while retaining the
|
||
// legacy append-only text field for older bridges.
|
||
if (Array.isArray(payload.messages)) {
|
||
if (!projectionMatches) {
|
||
const committed = commitOutputProjection(
|
||
projectionThreadId,
|
||
typeof payload.outputTail === "string" ? payload.outputTail : typeof payload.text === "string" ? payload.text : "",
|
||
payload.messages,
|
||
{ historyComplete: snapshotHistoryComplete(payload) },
|
||
);
|
||
if (committed && Array.isArray(payload.subagents)) {
|
||
state.subagents = payload.subagents;
|
||
renderSubagents();
|
||
}
|
||
return;
|
||
}
|
||
if (Array.isArray(payload.subagents)) {
|
||
state.subagents = payload.subagents;
|
||
renderSubagents();
|
||
}
|
||
if (payload.structureChanged === false && reconcileStructuredOutput(
|
||
typeof payload.outputTail === "string" ? payload.outputTail : payload.text,
|
||
payload.messages,
|
||
)) return;
|
||
replaceOutput(
|
||
typeof payload.outputTail === "string" ? payload.outputTail : typeof payload.text === "string" ? payload.text : "",
|
||
payload.messages,
|
||
);
|
||
return;
|
||
}
|
||
if (isRecord(payload.messagesPatch)) {
|
||
// A suffix patch has meaning only relative to the same thread's
|
||
// authoritative baseline. Never apply it to the transcript retained
|
||
// while another session is still loading.
|
||
if (!projectionMatches) return;
|
||
if (Array.isArray(payload.subagents)) {
|
||
state.subagents = payload.subagents;
|
||
renderSubagents();
|
||
}
|
||
const patchedMessages = applyStructuredMessagesPatch(payload.messagesPatch);
|
||
if (patchedMessages) {
|
||
const outputTail = typeof payload.outputTail === "string"
|
||
? payload.outputTail
|
||
: typeof payload.text === "string"
|
||
? `${$("output")?.dataset.outputTail || ""}${payload.text}`.slice(-32_000)
|
||
: $("output")?.dataset.outputTail || "";
|
||
if (reconcileStructuredOutput(outputTail, patchedMessages)) return;
|
||
replaceOutput(outputTail, patchedMessages);
|
||
return;
|
||
}
|
||
}
|
||
if (!projectionMatches) return;
|
||
if (Array.isArray(payload.subagents)) {
|
||
state.subagents = payload.subagents;
|
||
renderSubagents();
|
||
}
|
||
appendOutputChunk(payload.text, payload.stream, {
|
||
kind: payload.kind,
|
||
itemId: payload.itemId,
|
||
turnId: eventTurnId(payload),
|
||
timestamp: payload.timestamp || payload.startedAtMs,
|
||
});
|
||
return;
|
||
}
|
||
if (event.type === "app.stderr") {
|
||
finishAssistantStream();
|
||
appendOutput(payload.text, "meta");
|
||
return;
|
||
}
|
||
if (event.type === "approval.requested" || event.type === "input.requested" || event.type === "server.requested" || event.type === "server.request") {
|
||
state.requests.set(requestKey(payload.requestId), {
|
||
requestId: payload.requestId,
|
||
method: payload.method,
|
||
params: payload.params || payload,
|
||
...(payload.risk ? { risk: payload.risk } : {}),
|
||
...(payload.summary ? { summary: payload.summary } : {}),
|
||
...(payload.commandHash ? { commandHash: payload.commandHash } : {}),
|
||
...(payload.createdAt ? { createdAt: payload.createdAt } : {}),
|
||
...(payload.expiresAt ? { expiresAt: payload.expiresAt } : {}),
|
||
});
|
||
renderRequests();
|
||
const inlineRequests = $("inlineRequests");
|
||
if (inlineRequests) inlineRequests.scrollTop = inlineRequests.scrollHeight;
|
||
finishAssistantStream();
|
||
// The inline request card is the canonical representation. A separate
|
||
// plain-text transcript line would duplicate the approval/input prompt
|
||
// and could be mistaken for Codex output.
|
||
const waitingActivity = payload.method === "item/tool/requestUserInput"
|
||
|| payload.method === "mcpServer/elicitation/request"
|
||
? "waiting_input"
|
||
: "waiting_approval";
|
||
state.currentActivity = waitingActivity;
|
||
setConversationStatus(statusActivityLabel(waitingActivity), "warning");
|
||
return;
|
||
}
|
||
if (event.type === "server.responded" || event.type === "approval.resolved" || event.type === "input.resolved" || event.type === "approval.expired" || event.type === "input.expired") {
|
||
const key = resolveRequestKey(payload.requestId);
|
||
state.responding.delete(key);
|
||
state.requests.delete(key);
|
||
renderRequests();
|
||
return;
|
||
}
|
||
if (event.type === "task.status") {
|
||
applyStatusSnapshot(payload, { allowTerminal: true, showIdle: false });
|
||
updateIds();
|
||
return;
|
||
}
|
||
if (event.type === "task.started") {
|
||
finishAssistantStream();
|
||
if (payload.turnId) state.turnId = payload.turnId;
|
||
if (payload.threadId) state.threadId = payload.threadId;
|
||
attachPendingUserToTurn(payload.turnId || state.turnId);
|
||
applyStatusSnapshot(payload, { allowTerminal: false });
|
||
if (!state.currentActivity || state.currentActivity === "idle") state.currentActivity = "running";
|
||
updateLiveActivity(state.currentActivity, state.turnStartedAt, null, payload.activeFlags || [], payload.turnId || state.turnId);
|
||
updateIds();
|
||
return;
|
||
}
|
||
if (event.type === "task.finished" || event.type === "task.cancelled") {
|
||
if (!eventBelongsToCurrentTurn(payload)) return;
|
||
finishAssistantStream();
|
||
const reportedStatus = payload.turnStatus
|
||
?? payload.status?.turnStatus
|
||
?? payload.status?.status
|
||
?? payload.status
|
||
?? payload.executionStatus?.turnStatus
|
||
?? payload.executionStatus?.status
|
||
?? payload.executionStatus;
|
||
const finalStatus = event.type === "task.cancelled"
|
||
? "interrupted"
|
||
: normalizeActivityStatus(reportedStatus, "completed");
|
||
const finishedTurnId = eventTurnId(payload) || state.turnId || "";
|
||
applyStatusSnapshot({ ...payload, turnStatus: finalStatus }, { allowTerminal: false });
|
||
state.pendingUserText = "";
|
||
const worked = workedDurationFor(payload, null);
|
||
stopTurnClock(finalStatus, payload.durationMs, payload.completedAtMs, worked);
|
||
appendCompletedTurnDivider(finishedTurnId, finalStatus, worked ?? state.lastWorkedDurationMs ?? payload.durationMs ?? state.lastTurnDurationMs);
|
||
reconcileTurnDividers();
|
||
if (finishedTurnId) state.retiredTurnIds.add(finishedTurnId);
|
||
if (state.retiredTurnIds.size > 100) state.retiredTurnIds.delete(state.retiredTurnIds.values().next().value);
|
||
if (payload.threadId) state.threadId = payload.threadId;
|
||
state.pendingUserText = "";
|
||
state.turnId = "";
|
||
updateIds();
|
||
return;
|
||
}
|
||
if (event.type === "session.created" && payload.thread?.id) {
|
||
state.threadId = payload.thread.id;
|
||
if (state.syncedThreadId === null || state.syncedThreadId === payload.thread.id) {
|
||
prepareForSessionSnapshot(payload.thread.id);
|
||
applySessionMetadata({ ...(isRecord(payload.metadata) ? payload.metadata : {}), ...payload }, payload);
|
||
} else {
|
||
setConversationStatus("正在加载会话", "active");
|
||
}
|
||
updateIds();
|
||
return;
|
||
}
|
||
if (event.type === "session.snapshot") {
|
||
state.awaitingSnapshot = false;
|
||
state.appReady = true;
|
||
const snapshotThreadId = payload.threadId || "";
|
||
applyControlModeSnapshot(payload.metadata);
|
||
const waitingForSession = payload.state === "waiting_for_host"
|
||
|| (isRecord(payload.metadata) && payload.metadata.waitingForSession === true);
|
||
const eventSnapshotSeq = finiteNumber(payload.latestSeq, event.seq);
|
||
if (eventSnapshotSeq !== null) state.lastSnapshotSeq = eventSnapshotSeq;
|
||
const adapterName = payload.metadata && payload.metadata.adapter;
|
||
if (adapterName === "codex-ipc-follower") setAttachMode(true);
|
||
else if (adapterName) setAttachMode(false);
|
||
const hasProjection = typeof payload.outputTail === "string" || Array.isArray(payload.messages);
|
||
const projectionCommitted = hasProjection && commitOutputProjection(
|
||
snapshotThreadId,
|
||
typeof payload.outputTail === "string" ? payload.outputTail : "",
|
||
payload.messages,
|
||
{
|
||
historyComplete: snapshotHistoryComplete(payload, payload.state),
|
||
authoritativeSnapshot: true,
|
||
},
|
||
);
|
||
const appliesToView = projectionCommitted || snapshotThreadId === state.syncedThreadId;
|
||
if (!appliesToView) {
|
||
// Keep the retained transcript and loading state until a matching,
|
||
// non-placeholder snapshot is available for the selected thread.
|
||
updateIds();
|
||
return;
|
||
}
|
||
prepareForSessionSnapshot(snapshotThreadId);
|
||
applySessionMetadata({ ...(isRecord(payload.metadata) ? payload.metadata : {}), ...payload }, payload.state);
|
||
if (Array.isArray(payload.subagents)) {
|
||
state.subagents = payload.subagents;
|
||
renderSubagents();
|
||
} else if (isRecord(payload.state) && Array.isArray(payload.state.subagents)) {
|
||
state.subagents = payload.state.subagents;
|
||
renderSubagents();
|
||
}
|
||
if (payload.threadId !== undefined) state.threadId = payload.threadId || "";
|
||
if (payload.turnId !== undefined) state.turnId = payload.turnId || "";
|
||
applyStatusSnapshot({
|
||
...payload,
|
||
...(payload.executionStatus ? { status: payload.executionStatus } : {}),
|
||
turnId: payload.turnId !== undefined ? payload.turnId : state.turnId,
|
||
}, { allowTerminal: true, showIdle: false });
|
||
if (payload.metadata && typeof payload.metadata.cwd === "string") $("cwdInput").value = payload.metadata.cwd;
|
||
reconcileSnapshotTerminalState(payload, payload.state);
|
||
if (Array.isArray(payload.pendingRequests)) {
|
||
state.requests = new Map(payload.pendingRequests
|
||
.filter((request) => request && request.requestId !== undefined)
|
||
.map((request) => [requestKey(request.requestId), request]));
|
||
state.responding.clear();
|
||
renderRequests();
|
||
}
|
||
if (waitingForSession) {
|
||
setConversationStatus("等待在 VS Code 中打开 Codex 会话", "active");
|
||
state.snapshotNoticeShown = false;
|
||
} else if (!state.snapshotNoticeShown && state.turnStartedAt === null && (!state.currentActivity || state.currentActivity === "idle")) {
|
||
setConversationStatus("ready");
|
||
state.snapshotNoticeShown = true;
|
||
}
|
||
updateIds();
|
||
return;
|
||
}
|
||
if (event.type === "session.closed") {
|
||
finishAssistantStream();
|
||
state.pendingUserText = "";
|
||
state.appReady = false;
|
||
state.sessions = [];
|
||
state.sessionFocusedId = "";
|
||
state.sessionSelectedThreadId = "";
|
||
state.threadId = "";
|
||
state.turnId = "";
|
||
const closedTitle = $("threadTitle");
|
||
if (closedTitle) closedTitle.textContent = "Codex";
|
||
state.turnStartedAt = null;
|
||
state.turnWorkStartedAt = null;
|
||
state.finalAssistantStartedAt = null;
|
||
state.workedDurationMs = null;
|
||
state.lastWorkedDurationMs = null;
|
||
state.currentActivity = "idle";
|
||
state.currentActivityStartedAt = null;
|
||
state.subagents = [];
|
||
resetSessionModelMetadata();
|
||
renderSubagents();
|
||
updateLiveActivity("idle");
|
||
state.sessionSwitching = false;
|
||
state.sessionSelectCommandId = "";
|
||
finishSessionSwitchContext();
|
||
setConversationStatus("会话已关闭", "warning");
|
||
state.sessionListError = "VS Code 会话已关闭";
|
||
renderSessionPicker();
|
||
updateIds();
|
||
return;
|
||
}
|
||
if (event.type === "app.notification") {
|
||
if (payload.method === "thread/started" && payload.params?.thread?.id) state.threadId = payload.params.thread.id;
|
||
if (payload.method === "turn/started" && payload.params?.turn?.id) {
|
||
state.turnId = payload.params.turn.id;
|
||
attachPendingUserToTurn(state.turnId);
|
||
}
|
||
if (payload.method === "turn/completed") {
|
||
state.turnId = "";
|
||
finishAssistantStream();
|
||
}
|
||
if (payload.text) {
|
||
finishAssistantStream();
|
||
appendOutput(payload.text);
|
||
}
|
||
else if (["thread/started", "turn/started", "turn/completed", "thread/status/changed"].includes(payload.method)) appendOutput(`${payload.method}`, "meta");
|
||
updateIds();
|
||
return;
|
||
}
|
||
if (event.type === "thread.started" && payload.params?.thread?.id) {
|
||
state.threadId = payload.params.thread.id;
|
||
updateIds();
|
||
return;
|
||
}
|
||
if (event.type === "turn.started" && payload.params?.turn?.id) {
|
||
state.turnId = payload.params.turn.id;
|
||
attachPendingUserToTurn(state.turnId);
|
||
updateIds();
|
||
return;
|
||
}
|
||
if (event.type === "turn.completed") {
|
||
finishAssistantStream();
|
||
const completedTurnId = eventTurnId(payload) || state.turnId || "";
|
||
const status = normalizeActivityStatus(payload.status, "completed");
|
||
const worked = workedDurationFor(payload, null);
|
||
stopTurnClock(status, payload.durationMs, payload.completedAtMs, worked);
|
||
appendCompletedTurnDivider(completedTurnId, status, worked ?? state.lastWorkedDurationMs ?? payload.durationMs ?? state.lastTurnDurationMs);
|
||
reconcileTurnDividers();
|
||
state.turnId = "";
|
||
updateIds();
|
||
return;
|
||
}
|
||
if (event.type === "command.result") {
|
||
const commandId = payload.commandId;
|
||
// The relay sends a sequenced event to every subscriber and a direct
|
||
// acknowledgement to the originating browser. Render a result once.
|
||
if (commandId) {
|
||
const key = String(commandId);
|
||
if (state.commandResults.has(key)) return;
|
||
state.commandResults.add(key);
|
||
if (state.commandResults.size > 2_000) state.commandResults.delete(state.commandResults.values().next().value);
|
||
}
|
||
const commandMethodName = sessionCommandMethod(payload.method);
|
||
if (commandMethodName === "control/mode/set") {
|
||
state.modeCommandId = "";
|
||
if (!payload.ok) {
|
||
clearControlModeRequest();
|
||
setConversationStatus(sessionErrorMessage(payload, "控制模式切换失败"), "warning");
|
||
} else if (state.modeSwitching) {
|
||
// The command result is only an acknowledgement. Keep the requested
|
||
// segment pending until a newer authoritative snapshot supplies the
|
||
// resulting modeEpoch and capabilities.
|
||
setConversationStatus("正在切换控制模式", "active");
|
||
}
|
||
updateIds();
|
||
return;
|
||
}
|
||
if (commandMethodName === "session/list" || commandMethodName === "thread/list") {
|
||
if (!payload.ok) {
|
||
state.sessionListLoading = false;
|
||
state.sessionListError = eventMessage(payload);
|
||
state.sessionListError = sessionErrorMessage(payload, state.sessionListError);
|
||
renderSessionPicker();
|
||
} else {
|
||
applySessionListResult(payload.result ?? payload);
|
||
}
|
||
return;
|
||
}
|
||
if (commandMethodName === "session/select" || commandMethodName === "thread/select") {
|
||
if (!payload.ok) {
|
||
state.sessionListError = failSessionSwitch(payload, eventMessage(payload));
|
||
renderSessionPicker();
|
||
setConversationStatus(state.sessionListError, "warning");
|
||
requestRefresh();
|
||
} else {
|
||
applySessionSelectResult(payload.result ?? payload);
|
||
}
|
||
return;
|
||
}
|
||
if (commandMethodName === "session/new" || commandMethodName === "thread/new") {
|
||
state.newSessionCommandId = "";
|
||
if (!payload.ok) {
|
||
const detail = eventMessage(payload);
|
||
setConversationStatus(
|
||
uiLocale() === "en-US"
|
||
? `Unable to create a new conversation: ${detail}`
|
||
: `新会话创建失败：${detail}`,
|
||
"warning",
|
||
);
|
||
} else {
|
||
setConversationStatus("新会话已在 VS Code 中打开", "ready");
|
||
// The official command opens the new panel asynchronously. Give the
|
||
// host a short window to publish its rollout/owner, then refresh the
|
||
// same history menu so it can be selected without leaving the web UI.
|
||
openSessionHistory();
|
||
let refreshAttempts = 0;
|
||
const refreshNewSession = () => {
|
||
if (!state.sessionPickerOpen || refreshAttempts >= 4) return;
|
||
refreshAttempts += 1;
|
||
if (!state.sessionListLoading) requestSessionList();
|
||
setTimeout(refreshNewSession, 700);
|
||
};
|
||
setTimeout(refreshNewSession, 500);
|
||
}
|
||
updateIds();
|
||
return;
|
||
}
|
||
if (payload.method === "thread/settings/update") {
|
||
state.modelUpdatePending = false;
|
||
if (!payload.ok) {
|
||
const detail = eventMessage(payload);
|
||
appendOutput(
|
||
uiLocale() === "en-US"
|
||
? `Unable to update model settings: ${detail}`
|
||
: `模型设置更新失败：${detail}`,
|
||
"error",
|
||
);
|
||
} else setConversationStatus(t("模型设置已更新"), "ready");
|
||
renderModelPicker();
|
||
return;
|
||
}
|
||
if (!payload.ok) {
|
||
const methodLabel = payload.method || t("命令");
|
||
const uncertainty = payload.uncertain
|
||
? uiText("（执行状态未知，请等待主机恢复）", " (execution status unknown; wait for the host to recover)")
|
||
: "";
|
||
appendOutput(`${methodLabel}: ${JSON.stringify(payload.error)}${uncertainty}`, "error");
|
||
}
|
||
else {
|
||
const result = payload.result || {};
|
||
if (payload.method === "thread/start" && result.thread?.id) state.threadId = result.thread.id;
|
||
if (payload.method === "turn/start" && result.turn?.id) state.turnId = result.turn.id;
|
||
if (payload.method === "turn/start" && result.turn?.id) attachPendingUserToTurn(result.turn.id);
|
||
if (payload.method === "thread/start") {
|
||
applySessionMetadata({ ...result, ...(isRecord(result.thread) ? result.thread : {}) }, result);
|
||
}
|
||
finishAssistantStream();
|
||
appendOutput(`${payload.method || "命令"} 完成`, "meta");
|
||
updateIds();
|
||
}
|
||
}
|
||
}
|
||
|
||
function handleMessage(message) {
|
||
if (message.type === "auth.ok") {
|
||
state.role = message.role;
|
||
setAuthRequired(message.authRequired);
|
||
$("roleBadge").textContent = message.role;
|
||
$("roleBadge").className = `badge ${message.role === "operator" ? "" : "warning"}`;
|
||
setConnection("pending", "同步中");
|
||
state.awaitingSnapshot = true;
|
||
sendFrame({ type: "subscribe", fromSeq: state.lastSeq });
|
||
return;
|
||
}
|
||
// A host event can legitimately have the same type as a relay control
|
||
// frame (notably `session.snapshot`). Route the envelope by `kind` first
|
||
// so its payload is not mistaken for the compact control shape below.
|
||
if (message.kind === "event") {
|
||
handleEvent(message);
|
||
return;
|
||
}
|
||
if (message.type === "session.snapshot") {
|
||
state.awaitingSnapshot = false;
|
||
const snapshot = message.snapshot || {};
|
||
const appState = snapshot.state || {};
|
||
const snapshotThreadId = appState.activeThreadId || "";
|
||
const controlMetadata = {
|
||
...(isRecord(snapshot.metadata) ? snapshot.metadata : {}),
|
||
...(isRecord(appState.sessionMetadata) ? appState.sessionMetadata : {}),
|
||
};
|
||
applyControlModeSnapshot(controlMetadata);
|
||
const waitingForSession = controlMetadata.waitingForSession === true
|
||
|| (!snapshotThreadId && controlMetadata.attachReady === false);
|
||
$("appState").textContent = appStatusLabel(appState.app);
|
||
$("factApp").textContent = appState.app ? appStatusLabel(appState.app) : "-";
|
||
$("factClients").textContent = String((snapshot.clients || []).length);
|
||
state.appReady = appState.app === "ready" || appState.initialized === true;
|
||
if (appState.mode === "host") setAttachMode(true);
|
||
if (appState.mode === "embedded") setAttachMode(false);
|
||
const snapshotSeq = finiteNumber(snapshot.latestSeq);
|
||
if (snapshotSeq !== null) {
|
||
state.lastSeq = snapshotSeq;
|
||
state.lastSnapshotSeq = snapshotSeq;
|
||
}
|
||
// The control snapshot is authoritative for routing, but its transcript
|
||
// fields can still be placeholders while VS Code is loading history.
|
||
// Route target events immediately without replacing the retained view.
|
||
if (snapshotThreadId || state.syncedThreadId === null) state.threadId = snapshotThreadId;
|
||
state.turnId = appState.activeTurnId || "";
|
||
state.requests = new Map((snapshot.pendingRequests || []).map((request) => [requestKey(request.requestId), request]));
|
||
state.responding.clear();
|
||
// `subscribe` replays buffered events before sending this control
|
||
// snapshot. The snapshot is authoritative, so reconcile once at the
|
||
// end of the replay instead of leaving transient duplicate bubbles.
|
||
const hasProjection = typeof snapshot.outputTail === "string" || Array.isArray(snapshot.messages);
|
||
const projectionCommitted = hasProjection && commitOutputProjection(
|
||
snapshotThreadId,
|
||
typeof snapshot.outputTail === "string" ? snapshot.outputTail : "",
|
||
snapshot.messages,
|
||
{
|
||
historyComplete: snapshotHistoryComplete(snapshot, snapshot.metadata, appState),
|
||
authoritativeSnapshot: true,
|
||
},
|
||
);
|
||
const appliesToView = projectionCommitted || snapshotThreadId === state.syncedThreadId;
|
||
if (appliesToView) {
|
||
prepareForSessionSnapshot(snapshotThreadId);
|
||
applySessionMetadata({
|
||
...controlMetadata,
|
||
...appState,
|
||
}, appState);
|
||
if (Array.isArray(snapshot.subagents)) {
|
||
state.subagents = snapshot.subagents;
|
||
renderSubagents();
|
||
} else if (Array.isArray(appState.subagents)) {
|
||
state.subagents = appState.subagents;
|
||
renderSubagents();
|
||
}
|
||
applyStatusSnapshot({
|
||
...(snapshot.status ? { status: snapshot.status } : {}),
|
||
...(snapshot.executionStatus ? { status: snapshot.executionStatus } : {}),
|
||
...(snapshot.state && typeof snapshot.state === "object" ? snapshot.state : {}),
|
||
turnId: state.turnId,
|
||
}, { allowTerminal: true, showIdle: false });
|
||
reconcileSnapshotTerminalState(snapshot, appState);
|
||
} else if (state.sessionSwitching || hasVisibleOutputProjection()) {
|
||
setConversationStatus("正在加载会话", "active");
|
||
}
|
||
renderRequests();
|
||
updateIds();
|
||
setConnection("online", "已连接");
|
||
if (waitingForSession) {
|
||
setConversationStatus("等待在 VS Code 中打开 Codex 会话", "active");
|
||
state.snapshotNoticeShown = false;
|
||
} else {
|
||
$("outputHint").textContent = `${appStatusLabel(appState.app || "app-server")} / ${state.role}`;
|
||
}
|
||
if (state.sessionPickerOpen && state.appReady) requestSessionList();
|
||
return;
|
||
}
|
||
if (message.type === "resync.required") {
|
||
appendOutput("事件窗口已过期，请以当前快照为准", "error");
|
||
return;
|
||
}
|
||
if (message.type === "response.accepted") {
|
||
const key = resolveRequestKey(message.requestId);
|
||
state.responding.delete(key);
|
||
state.requests.delete(key);
|
||
renderRequests();
|
||
appendOutput(`请求 #${message.requestId} 已提交`, "meta");
|
||
return;
|
||
}
|
||
if (message.type === "response.pending") {
|
||
appendOutput(`请求 #${message.requestId} 已发送，等待 VS Code 主机确认`, "meta");
|
||
return;
|
||
}
|
||
if (message.type === "command.accepted") return;
|
||
if (message.type === "command.rejected" || message.type === "response.rejected") {
|
||
if (message.requestId !== undefined) state.responding.delete(resolveRequestKey(message.requestId));
|
||
const rejectedId = String(message.commandId || "");
|
||
if (rejectedId && rejectedId === String(state.modeCommandId || "")) {
|
||
clearControlModeRequest();
|
||
setConversationStatus(sessionErrorMessage(message, "控制模式切换失败"), "warning");
|
||
updateIds();
|
||
return;
|
||
}
|
||
if (rejectedId && rejectedId === String(state.newSessionCommandId || "")) {
|
||
state.newSessionCommandId = "";
|
||
const detail = message.message || message.code || t("未知错误");
|
||
setConversationStatus(
|
||
uiLocale() === "en-US"
|
||
? `Unable to create a new conversation: ${detail}`
|
||
: `新会话创建失败：${detail}`,
|
||
"warning",
|
||
);
|
||
updateIds();
|
||
return;
|
||
}
|
||
if (rejectedId && rejectedId === String(state.sessionListCommandId || "")) {
|
||
state.sessionListLoading = false;
|
||
state.sessionListCommandId = "";
|
||
state.sessionListError = sessionErrorMessage(message, "无法读取会话");
|
||
renderSessionPicker();
|
||
return;
|
||
}
|
||
if (rejectedId && rejectedId === String(state.sessionSelectCommandId || "")) {
|
||
state.sessionListError = failSessionSwitch(message, "会话切换失败");
|
||
renderSessionPicker();
|
||
setConversationStatus(state.sessionListError, "warning");
|
||
requestRefresh();
|
||
return;
|
||
}
|
||
appendOutput(`${message.code}: ${message.message}`, "error");
|
||
renderRequests();
|
||
return;
|
||
}
|
||
if (message.type === "command.result") {
|
||
handleEvent({ type: "command.result", seq: message.seq, payload: message });
|
||
return;
|
||
}
|
||
if (message.type === "error") appendOutput(message.message || "relay error", "error");
|
||
}
|
||
|
||
function embeddedSocketUrl(value) {
|
||
if (!embeddedInAether) return "";
|
||
const raw = String(value || "").trim();
|
||
if (!raw) return "";
|
||
try {
|
||
const url = new URL(raw, location.href);
|
||
const expectedProtocol = location.protocol === "https:" ? "wss:" : "ws:";
|
||
if (url.origin !== `${location.protocol}//${location.host}` && url.origin !== `${expectedProtocol}//${location.host}`) {
|
||
throw new Error(t("云端连接地址必须与当前页面同源"));
|
||
}
|
||
if (url.protocol === "http:") url.protocol = "ws:";
|
||
if (url.protocol === "https:") url.protocol = "wss:";
|
||
if (url.protocol !== "ws:" && url.protocol !== "wss:") throw new Error(t("云端连接配置无效"));
|
||
return url.href;
|
||
} catch (error) {
|
||
appendOutput(error?.message || t("云端连接配置无效"), "error");
|
||
embedBridge.reportState("error", { code: "invalid_ws_url", message: error?.message || "invalid ws url" });
|
||
return "";
|
||
}
|
||
}
|
||
|
||
function requestEmbedTicket(reason = "missing") {
|
||
if (!embeddedInAether || state.embedStopped || state.embedTicketRequested) return;
|
||
state.embedTicketRequested = true;
|
||
setConversationStatus(t("正在获取新的连接凭证"), "active");
|
||
embedBridge.requestTicket({ reason, deviceId: state.embedDeviceId || undefined });
|
||
}
|
||
|
||
function disconnectEmbedded(reason = "parent") {
|
||
if (!embeddedInAether) return;
|
||
state.embedStopped = true;
|
||
state.embedTicket = "";
|
||
state.embedTicketRequested = false;
|
||
clearTimeout(state.reconnectTimer);
|
||
state.reconnectTimer = null;
|
||
const socket = state.ws;
|
||
state.ws = null;
|
||
if (socket && socket.readyState <= WebSocket.OPEN) socket.close(1000, reason);
|
||
setConnection("offline", "云端连接已断开");
|
||
setConversationStatus(t("父页面已断开连接"), "warning");
|
||
}
|
||
|
||
function applyEmbedConnection(message) {
|
||
if (!embeddedInAether) return;
|
||
if (message.locale) i18n?.setLocale?.(message.locale, { persist: false });
|
||
const ticket = typeof message.ticket === "string" ? message.ticket.trim() : "";
|
||
const wsUrl = embeddedSocketUrl(message.wsUrl || "/api/vscodex/ws");
|
||
if (!ticket || !wsUrl) {
|
||
appendOutput(t("云端连接配置无效"), "error");
|
||
embedBridge.reportState("error", { code: "invalid_connection_config", message: "ticket and wsUrl are required" });
|
||
requestEmbedTicket("invalid");
|
||
return;
|
||
}
|
||
state.embedStopped = false;
|
||
state.embedTicketRequested = false;
|
||
state.embedTicket = ticket;
|
||
state.embedWsUrl = wsUrl;
|
||
state.embedDeviceId = typeof message.deviceId === "string" ? message.deviceId : state.embedDeviceId;
|
||
setAuthRequired(true);
|
||
document.body.classList.add("embed-aether");
|
||
setConversationStatus(t("正在连接云端会话"), "active");
|
||
if (state.ws && state.ws.readyState <= WebSocket.OPEN) {
|
||
const socket = state.ws;
|
||
state.ws = null;
|
||
socket.close(1000, "connection replaced");
|
||
}
|
||
connect();
|
||
}
|
||
|
||
function connect() {
|
||
if (state.ws && state.ws.readyState <= WebSocket.OPEN) return;
|
||
if (embeddedInAether) {
|
||
if (state.embedStopped) return;
|
||
if (!state.embedTicket || !state.embedWsUrl) { requestEmbedTicket("missing"); return; }
|
||
state.token = state.embedTicket;
|
||
} else state.token = $("tokenInput").value.trim();
|
||
if (!state.token && state.authRequired === true) { appendOutput("当前 relay 需要 token", "error"); return; }
|
||
setConnection("pending", "连接中");
|
||
const protocol = location.protocol === "https:" ? "wss:" : "ws:";
|
||
let socket;
|
||
try {
|
||
socket = new WebSocket(embeddedInAether ? state.embedWsUrl : `${protocol}//${location.host}/ws`);
|
||
} catch (error) {
|
||
if (embeddedInAether) {
|
||
state.embedTicket = "";
|
||
requestEmbedTicket("socket-error");
|
||
}
|
||
appendOutput(error?.message || "WebSocket 未连接", "error");
|
||
return;
|
||
}
|
||
const connectionTicket = embeddedInAether ? state.embedTicket : "";
|
||
if (embeddedInAether) {
|
||
state.embedTicket = "";
|
||
state.token = "";
|
||
}
|
||
state.ws = socket;
|
||
socket.addEventListener("open", () => {
|
||
if (state.ws !== socket) return;
|
||
// Send a hello even when local auth is disabled so the relay can assign
|
||
// the browser role without requiring a dummy password.
|
||
socket.send(JSON.stringify({ v: 1, kind: "hello", clientType: "web", protocol: 1 }));
|
||
// A loopback relay authenticates on hello. Do not send a stale token as
|
||
// a second frame after that handshake, because it is already complete.
|
||
const token = embeddedInAether ? connectionTicket : state.token;
|
||
if (token && state.authRequired !== false) socket.send(JSON.stringify({ type: "auth", token }));
|
||
});
|
||
socket.addEventListener("message", (event) => {
|
||
if (state.ws !== socket) return;
|
||
try { handleMessage(JSON.parse(event.data)); } catch { appendOutput("收到无法解析的 relay 消息", "error"); }
|
||
});
|
||
socket.addEventListener("close", (event) => {
|
||
if (state.ws !== socket) return;
|
||
setConnection("offline", event.code === 1008 ? "认证失败，准备重连" : "准备重连");
|
||
state.appReady = false;
|
||
state.turnId = "";
|
||
state.sessionListLoading = false;
|
||
state.sessionListCommandId = "";
|
||
state.newSessionCommandId = "";
|
||
clearControlModeRequest();
|
||
state.sessions = [];
|
||
state.sessionFocusedId = "";
|
||
// A transport reconnect may resume the same owner hand-off. Preserve
|
||
// its previous/target identities so the next control placeholder cannot
|
||
// be mistaken for an authoritative empty target transcript.
|
||
if (!state.sessionSwitching) state.sessionSelectedThreadId = "";
|
||
state.sessionListError = "等待 relay 连接";
|
||
updateIds();
|
||
state.ws = null;
|
||
renderSessionPicker();
|
||
clearTimeout(state.reconnectTimer);
|
||
state.reconnectTimer = null;
|
||
if (embeddedInAether) {
|
||
if (!state.embedStopped) requestEmbedTicket(event.code === 1008 ? "ticket-rejected" : "disconnected");
|
||
} else state.reconnectTimer = setTimeout(connect, 3000);
|
||
});
|
||
socket.addEventListener("error", () => {
|
||
// The close handler owns retrying. Keep transient socket errors in the
|
||
// connection indicator instead of adding noisy messages to the turn.
|
||
if (state.ws === socket) setConnection("offline", "重连中");
|
||
});
|
||
}
|
||
|
||
function closePopovers() {
|
||
for (const id of ["panelMenu", "detailsPopover", "sessionPicker", "composerPlusMenu"]) {
|
||
const element = $(id);
|
||
if (element) element.hidden = true;
|
||
}
|
||
state.sessionPickerOpen = false;
|
||
state.sessionSearch = "";
|
||
state.sessionFocusedId = "";
|
||
$("sessionPickerButton")?.setAttribute("aria-expanded", "false");
|
||
const sessionSearchInput = $("sessionSearchInput");
|
||
if (sessionSearchInput) {
|
||
sessionSearchInput.value = "";
|
||
sessionSearchInput.setAttribute("aria-expanded", "false");
|
||
sessionSearchInput.setAttribute("aria-activedescendant", "");
|
||
}
|
||
$("sessionSearchClear")?.setAttribute("hidden", "");
|
||
setModelMenu(false);
|
||
setPermissionMenu(false);
|
||
setUsageMenu(false);
|
||
$("composerPlusButton")?.setAttribute("aria-expanded", "false");
|
||
const confirm = $("permissionConfirm");
|
||
if (confirm) { confirm.hidden = true; delete confirm.dataset.pendingMode; }
|
||
}
|
||
|
||
function requestRefresh() {
|
||
if (state.ws && state.ws.readyState === WebSocket.OPEN) {
|
||
try { sendFrame({ type: "subscribe", fromSeq: state.lastSeq }); } catch { connect(); }
|
||
} else connect();
|
||
}
|
||
|
||
document.querySelectorAll("[data-panel-action]").forEach((button) => {
|
||
button.addEventListener("click", () => {
|
||
const action = button.dataset.panelAction;
|
||
if (action === "back" || action === "history") {
|
||
setSessionPicker(!state.sessionPickerOpen);
|
||
return;
|
||
}
|
||
if (action === "new-session") {
|
||
requestNewSession();
|
||
return;
|
||
}
|
||
if (action === "expand") {
|
||
document.body.classList.toggle("panel-expanded");
|
||
return;
|
||
}
|
||
if (action === "close") {
|
||
document.body.classList.add("panel-hidden");
|
||
const restore = $("restorePanel");
|
||
if (restore) restore.hidden = false;
|
||
closePopovers();
|
||
return;
|
||
}
|
||
if (action === "refresh") { closePopovers(); requestRefresh(); return; }
|
||
if (action === "menu") {
|
||
const menu = $("panelMenu");
|
||
const details = $("detailsPopover");
|
||
if (details) details.hidden = true;
|
||
if (menu) menu.hidden = !menu.hidden;
|
||
return;
|
||
}
|
||
if (action === "settings") {
|
||
const details = $("detailsPopover");
|
||
const menu = $("panelMenu");
|
||
if (menu) menu.hidden = true;
|
||
if (details) details.hidden = !details.hidden;
|
||
updateIds();
|
||
}
|
||
});
|
||
});
|
||
$("sessionPickerButton")?.addEventListener("click", () => {
|
||
setSessionPicker(!state.sessionPickerOpen);
|
||
});
|
||
$("controlModeSwitch")?.querySelectorAll("[data-control-mode]").forEach((button) => {
|
||
button.addEventListener("click", () => requestControlMode(button.dataset.controlMode));
|
||
});
|
||
$("sessionPickerRefresh")?.addEventListener("click", (event) => {
|
||
event.stopPropagation();
|
||
requestSessionList();
|
||
});
|
||
$("sessionSearchInput")?.addEventListener("input", (event) => {
|
||
const input = event.currentTarget;
|
||
if (!(input instanceof HTMLInputElement)) return;
|
||
state.sessionSearch = input.value;
|
||
state.sessionFocusedId = "";
|
||
renderSessionPicker();
|
||
});
|
||
$("sessionSearchInput")?.addEventListener("keydown", handleSessionPickerKeydown);
|
||
$("sessionList")?.addEventListener("keydown", handleSessionPickerKeydown);
|
||
$("sessionSearchClear")?.addEventListener("click", (event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
state.sessionSearch = "";
|
||
state.sessionFocusedId = "";
|
||
renderSessionPicker();
|
||
$("sessionSearchInput")?.focus();
|
||
});
|
||
$("restorePanel")?.addEventListener("click", () => {
|
||
document.body.classList.remove("panel-hidden");
|
||
$("restorePanel").hidden = true;
|
||
});
|
||
$("panelMenu")?.querySelectorAll("[data-menu-action]").forEach((button) => {
|
||
button.addEventListener("click", (event) => {
|
||
if (button.dataset.menuAction === "sessions") {
|
||
// The document-level outside-click handler runs in the same bubble
|
||
// phase. Keep the picker open when it is launched from this menu.
|
||
event.stopPropagation();
|
||
closePopovers();
|
||
setSessionPicker(true);
|
||
return;
|
||
} else if (button.dataset.menuAction === "clear") {
|
||
renderEmptyOutput();
|
||
state.outputSynced = false;
|
||
} else if (button.dataset.menuAction === "refresh") requestRefresh();
|
||
else if (button.dataset.menuAction === "expand") document.body.classList.toggle("panel-expanded");
|
||
else if (button.dataset.menuAction === "close") {
|
||
document.body.classList.add("panel-hidden");
|
||
const restore = $("restorePanel");
|
||
if (restore) restore.hidden = false;
|
||
}
|
||
closePopovers();
|
||
});
|
||
});
|
||
$("detailsPopover")?.querySelectorAll("[data-settings-action]").forEach((button) => {
|
||
button.addEventListener("click", (event) => {
|
||
event.stopPropagation();
|
||
const action = button.dataset.settingsAction;
|
||
closePopovers();
|
||
if (action === "model") {
|
||
setModelMenu(true);
|
||
$("modelPickerButton")?.focus();
|
||
} else if (action === "permission") {
|
||
setPermissionMenu(true);
|
||
$("permissionChip")?.focus();
|
||
}
|
||
});
|
||
});
|
||
document.addEventListener("click", (event) => {
|
||
const target = event.target;
|
||
if (!(target instanceof Element)) return;
|
||
if (!target.closest(".model-picker")) setModelMenu(false);
|
||
if (!target.closest(".permission-menu, #permissionChip")) setPermissionMenu(false);
|
||
if (!target.closest(".usage-menu, #usageButton")) setUsageMenu(false);
|
||
if (!target.closest(".composer-plus-menu, #composerPlusButton")) {
|
||
const menu = $("composerPlusMenu");
|
||
if (menu) menu.hidden = true;
|
||
$("composerPlusButton")?.setAttribute("aria-expanded", "false");
|
||
}
|
||
if (!target.closest("[data-panel-action], .panel-popover, .composer-popover, .composer-icon-button, .permission-chip, .usage-button, #sessionPickerButton")) closePopovers();
|
||
});
|
||
document.addEventListener("keydown", (event) => {
|
||
if (event.key === "Escape" && state.sessionPickerOpen) {
|
||
event.preventDefault();
|
||
closePopovers();
|
||
$("sessionPickerButton")?.focus();
|
||
}
|
||
});
|
||
|
||
$("tokenInput").addEventListener("keydown", (event) => {
|
||
if (event.key === "Enter") {
|
||
event.preventDefault();
|
||
connect();
|
||
}
|
||
});
|
||
$("tokenInput").addEventListener("change", connect);
|
||
$("localeSelect")?.addEventListener("change", (event) => {
|
||
if (!embeddedInAether) i18n?.setLocale?.(event.target.value, { persist: true });
|
||
});
|
||
window.addEventListener("aether-vscodex:locale", () => {
|
||
for (const activity of state.activities.values()) {
|
||
renderActivityText(activity);
|
||
refreshActivity(activity);
|
||
}
|
||
for (const [turnId, divider] of state.turnDividers) {
|
||
const label = divider.querySelector(".turn-divider-label");
|
||
if (!label) continue;
|
||
const duration = finiteNumber(divider.dataset.durationMs);
|
||
label.textContent = turnDividerLabel(divider.dataset.status || "completed", duration);
|
||
}
|
||
setAttachMode(state.attachMode);
|
||
setAuthRequired(state.authRequired);
|
||
renderSessionPicker();
|
||
renderModelPicker();
|
||
renderPermissionMenu();
|
||
renderUsage();
|
||
renderSubagents();
|
||
updateIds();
|
||
renderRequests();
|
||
for (const checkbox of document.querySelectorAll(".task-list-item input[type=checkbox]")) {
|
||
checkbox.setAttribute("aria-label", t(checkbox.checked ? "已完成" : "未完成"));
|
||
}
|
||
});
|
||
$("clearOutputButton").addEventListener("click", () => {
|
||
renderEmptyOutput();
|
||
state.outputSynced = false;
|
||
});
|
||
$("startThreadButton").addEventListener("click", () => {
|
||
if (state.attachMode) return;
|
||
const params = { cwd: $("cwdInput").value.trim() || undefined, sandbox: $("sandboxInput").value, approvalPolicy: $("approvalInput").value };
|
||
if ($("modelInput").value.trim()) params.model = $("modelInput").value.trim();
|
||
command("thread/start", params);
|
||
});
|
||
$("startTurnButton").addEventListener("click", () => {
|
||
const text = composerText();
|
||
if (!text || !state.threadId) return;
|
||
command("turn/start", {
|
||
threadId: state.threadId,
|
||
input: [{ type: "text", text, text_elements: [] }],
|
||
...(state.currentModel ? { model: state.currentModel } : {}),
|
||
...currentEffortParams(),
|
||
});
|
||
clearComposer();
|
||
});
|
||
$("steerButton").addEventListener("click", () => {
|
||
const text = composerText();
|
||
if (!text || !state.threadId || !state.turnId) return;
|
||
command("turn/steer", {
|
||
threadId: state.threadId,
|
||
expectedTurnId: state.turnId,
|
||
input: [{ type: "text", text, text_elements: [] }],
|
||
...(state.currentModel ? { model: state.currentModel } : {}),
|
||
...currentEffortParams(),
|
||
});
|
||
clearComposer();
|
||
});
|
||
$("interruptButton").addEventListener("click", () => {
|
||
if (state.threadId && state.turnId) command("turn/interrupt", { threadId: state.threadId, turnId: state.turnId });
|
||
});
|
||
$("messageInput").addEventListener("keydown", (event) => {
|
||
if (event.key !== "Enter" || event.shiftKey || event.isComposing) return;
|
||
event.preventDefault();
|
||
const button = state.turnId ? $("steerButton") : $("startTurnButton");
|
||
if (button && !button.disabled) button.click();
|
||
});
|
||
$("messageInput").addEventListener("input", () => {
|
||
resizeComposer();
|
||
updateIds();
|
||
});
|
||
$("messageInput").addEventListener("paste", (event) => {
|
||
event.preventDefault();
|
||
const text = event.clipboardData?.getData("text/plain") || "";
|
||
if (!text) return;
|
||
const editor = $("messageInput");
|
||
const selection = window.getSelection();
|
||
if (editor && selection && selection.rangeCount) {
|
||
const range = selection.getRangeAt(0);
|
||
if (editor.contains(range.commonAncestorContainer)) {
|
||
range.deleteContents();
|
||
const node = document.createTextNode(text);
|
||
range.insertNode(node);
|
||
range.setStartAfter(node);
|
||
range.collapse(true);
|
||
selection.removeAllRanges();
|
||
selection.addRange(range);
|
||
} else editor.append(document.createTextNode(text));
|
||
} else editor?.append(document.createTextNode(text));
|
||
resizeComposer();
|
||
updateIds();
|
||
});
|
||
$("modelPickerButton")?.addEventListener("click", (event) => {
|
||
event.stopPropagation();
|
||
const menu = $("modelMenu");
|
||
setPermissionMenu(false);
|
||
setUsageMenu(false);
|
||
const plus = $("composerPlusMenu");
|
||
if (plus) plus.hidden = true;
|
||
$("composerPlusButton")?.setAttribute("aria-expanded", "false");
|
||
setModelMenu(Boolean(menu?.hidden));
|
||
});
|
||
$("modelAdvancedToggle")?.addEventListener("click", (event) => {
|
||
event.stopPropagation();
|
||
state.modelAdvancedOpen = !state.modelAdvancedOpen;
|
||
renderModelPicker();
|
||
if (state.modelAdvancedOpen) $("modelAdvancedBack")?.focus();
|
||
else $("modelPowerSlider")?.focus();
|
||
});
|
||
$("modelAdvancedBack")?.addEventListener("click", (event) => {
|
||
event.stopPropagation();
|
||
state.modelAdvancedOpen = false;
|
||
renderModelPicker();
|
||
$("modelPowerSlider")?.focus();
|
||
});
|
||
$("modelPowerSlider")?.addEventListener("input", (event) => {
|
||
selectPowerIndex(event.currentTarget.value);
|
||
});
|
||
$("composerPlusButton")?.addEventListener("click", (event) => {
|
||
event.stopPropagation();
|
||
const menu = $("composerPlusMenu");
|
||
if (!menu) return;
|
||
const next = menu.hidden;
|
||
menu.hidden = !next;
|
||
$("composerPlusButton").setAttribute("aria-expanded", String(next));
|
||
if (next) {
|
||
setPermissionMenu(false);
|
||
setUsageMenu(false);
|
||
setModelMenu(false);
|
||
}
|
||
});
|
||
$("permissionChip")?.addEventListener("click", (event) => {
|
||
event.stopPropagation();
|
||
const menu = $("permissionMenu");
|
||
setPermissionMenu(Boolean(menu?.hidden));
|
||
if (!menu?.hidden) {
|
||
const plus = $("composerPlusMenu");
|
||
if (plus) plus.hidden = true;
|
||
$("composerPlusButton")?.setAttribute("aria-expanded", "false");
|
||
setUsageMenu(false);
|
||
setModelMenu(false);
|
||
}
|
||
});
|
||
$("usageButton")?.addEventListener("click", (event) => {
|
||
event.stopPropagation();
|
||
const menu = $("usageMenu");
|
||
setPermissionMenu(false);
|
||
setModelMenu(false);
|
||
const plus = $("composerPlusMenu");
|
||
if (plus) plus.hidden = true;
|
||
$("composerPlusButton")?.setAttribute("aria-expanded", "false");
|
||
setUsageMenu(Boolean(menu?.hidden));
|
||
if (!menu?.hidden) {
|
||
setPermissionMenu(false);
|
||
setModelMenu(false);
|
||
}
|
||
});
|
||
const insertComposerText = (text) => {
|
||
const editor = $("messageInput");
|
||
if (!editor || !text) return;
|
||
editor.focus();
|
||
const selection = window.getSelection();
|
||
if (selection && selection.rangeCount) {
|
||
const range = selection.getRangeAt(0);
|
||
if (editor.contains(range.commonAncestorContainer)) {
|
||
range.deleteContents();
|
||
const node = document.createTextNode(text);
|
||
range.insertNode(node);
|
||
range.setStartAfter(node);
|
||
range.collapse(true);
|
||
selection.removeAllRanges();
|
||
selection.addRange(range);
|
||
} else editor.append(document.createTextNode(text));
|
||
} else editor.append(document.createTextNode(text));
|
||
resizeComposer();
|
||
updateIds();
|
||
};
|
||
$("composerPlusMenu")?.querySelectorAll("[data-composer-action]").forEach((button) => {
|
||
button.addEventListener("click", () => {
|
||
const action = button.dataset.composerAction;
|
||
if (action === "attach") {
|
||
const input = $("attachmentInput");
|
||
if (input) { input.accept = ".txt,.md,.json,.js,.ts,.tsx,.jsx,.css,.html,.yml,.yaml,.xml,.py,.go,.rs,.java,.c,.cpp,.h"; input.click(); }
|
||
} else if (action === "photo") {
|
||
const input = $("attachmentInput");
|
||
if (input) { input.accept = "image/*"; input.click(); }
|
||
} else if (action === "workspace") {
|
||
insertComposerText("\n\n@workspace ");
|
||
setConversationStatus("已添加工作区上下文", "ready");
|
||
} else if (action === "web-search") {
|
||
insertComposerText("\n\n/web-search ");
|
||
setConversationStatus("已添加网页搜索", "ready");
|
||
}
|
||
const menu = $("composerPlusMenu");
|
||
if (menu) menu.hidden = true;
|
||
$("composerPlusButton")?.setAttribute("aria-expanded", "false");
|
||
});
|
||
});
|
||
$("attachmentInput")?.addEventListener("change", async (event) => {
|
||
const files = [...(event.target?.files || [])];
|
||
for (const file of files) {
|
||
try {
|
||
if (file.type.startsWith("image/")) {
|
||
insertComposerText(`\n\n[图片附件：${file.name}]\n`);
|
||
continue;
|
||
}
|
||
const text = await file.text();
|
||
const clipped = text.length > 80_000 ? `${text.slice(0, 80_000)}\n${t("…（文件已截断）")}` : text;
|
||
const fence = "```";
|
||
insertComposerText(`\n\n### ${file.name}\n\n${fence}\n${clipped}\n${fence}\n`);
|
||
} catch {
|
||
setConversationStatus(`无法读取 ${file.name}`, "warning");
|
||
}
|
||
}
|
||
event.target.value = "";
|
||
});
|
||
$("permissionMenu")?.querySelectorAll("[data-permission-mode], [data-sandbox], [data-approval]").forEach((button) => {
|
||
button.addEventListener("click", () => {
|
||
if (button.dataset.permissionMode) selectPermissionMode(button.dataset.permissionMode);
|
||
else if (button.dataset.sandbox) selectPermissionSetting("sandbox", button.dataset.sandbox);
|
||
else if (button.dataset.approval) selectPermissionSetting("approval", button.dataset.approval);
|
||
});
|
||
});
|
||
$("permissionConfirmCancel")?.addEventListener("click", () => {
|
||
const confirm = $("permissionConfirm");
|
||
if (confirm) { confirm.hidden = true; delete confirm.dataset.pendingMode; }
|
||
});
|
||
$("permissionConfirmAccept")?.addEventListener("click", () => {
|
||
const confirm = $("permissionConfirm");
|
||
const mode = confirm?.dataset.pendingMode || "full";
|
||
if (confirm) { confirm.hidden = true; delete confirm.dataset.pendingMode; }
|
||
applyPermissionMode(mode);
|
||
});
|
||
$("subagentsToggle")?.addEventListener("click", () => {
|
||
state.subagentsCollapsed = !state.subagentsCollapsed;
|
||
renderSubagents();
|
||
});
|
||
$("output").addEventListener("scroll", () => updateScrollToBottom($("output")), { passive: true });
|
||
$("scrollToBottom")?.addEventListener("click", () => {
|
||
const output = $("output");
|
||
if (output) output.scrollTo({ top: output.scrollHeight, behavior: "smooth" });
|
||
});
|
||
if (typeof ResizeObserver === "function") {
|
||
const output = $("output");
|
||
const observedContent = new Set();
|
||
const observeTranscriptContent = () => {
|
||
const children = new Set(output ? [...output.children] : []);
|
||
for (const child of observedContent) {
|
||
if (children.has(child)) continue;
|
||
layoutObserver.unobserve(child);
|
||
observedContent.delete(child);
|
||
}
|
||
for (const child of children) {
|
||
if (observedContent.has(child)) continue;
|
||
observedContent.add(child);
|
||
layoutObserver.observe(child);
|
||
}
|
||
};
|
||
const layoutObserver = new ResizeObserver(() => {
|
||
const distance = state.outputDistanceFromBottom;
|
||
const following = distance <= 24;
|
||
const anchorLocked = motionClock() < (state.timelineAnchorLockUntil || 0);
|
||
updateScrollPadding();
|
||
// Preserve the reader's distance from the bottom when a streamed item or
|
||
// the composer changes height. The official thread layout uses the same
|
||
// bottom-relative anchor instead of allowing content to jump.
|
||
if (output && !anchorLocked) {
|
||
if (following) scrollOutput(output, true);
|
||
else output.scrollTop = Math.max(0, output.scrollHeight - output.clientHeight - distance);
|
||
updateScrollToBottom(output);
|
||
} else if (output) updateScrollToBottom(output);
|
||
observeTranscriptContent();
|
||
});
|
||
layoutObserver.observe($("messageForm"));
|
||
layoutObserver.observe($("inlineRequests"));
|
||
if (output) layoutObserver.observe(output);
|
||
observeTranscriptContent();
|
||
if (typeof MutationObserver === "function" && output) {
|
||
const childObserver = new MutationObserver(observeTranscriptContent);
|
||
childObserver.observe(output, { childList: true });
|
||
}
|
||
}
|
||
window.addEventListener("resize", updateScrollPadding, { passive: true });
|
||
$("cwdInput").value = location.pathname === "/" ? "" : "";
|
||
renderPermissionMenu();
|
||
renderUsage();
|
||
renderSessionPicker();
|
||
resizeComposer();
|
||
updateScrollPadding();
|
||
updateScrollToBottom($("output"));
|
||
updateIds();
|
||
|
||
if (embeddedInAether) {
|
||
document.body.classList.add("embed-aether");
|
||
setAuthRequired(true);
|
||
setConversationStatus(t("正在等待云端连接"), "active");
|
||
embedBridge.on("connect", applyEmbedConnection);
|
||
embedBridge.on("context", (message) => {
|
||
if (message.locale) i18n?.setLocale?.(message.locale, { persist: false });
|
||
});
|
||
embedBridge.on("disconnect", () => disconnectEmbedded("parent disconnect"));
|
||
embedBridge.on("error", (message) => {
|
||
const detail = typeof message.message === "string" && message.message ? message.message : t("云端连接已断开");
|
||
appendOutput(detail, "error");
|
||
setConversationStatus(detail, "warning");
|
||
});
|
||
} else {
|
||
// /api/health is intentionally public and only reports capability metadata.
|
||
// Probe it first so a local relay can connect automatically without a token;
|
||
// Authenticated deployments wait until a token is entered in the field.
|
||
fetch("./api/health", { cache: "no-store" }).then(async (response) => {
|
||
let health;
|
||
try { health = await response.json(); } catch { return; }
|
||
setAuthRequired(health.authRequired);
|
||
if (health.authRequired === false || (health.authRequired === true && $("tokenInput").value.trim())) connect();
|
||
}).catch(() => undefined);
|
||
}
|
||
})();
|