@qwen-code/arena-agent 0.0.8-dev.5 → 0.0.9-dev.0

package/dist/web/app.js

@@ -14,6 +14,8 @@ const elements = {
     artifactPreviewPath: document.querySelector("#artifact-preview-path"),
     artifactTitle: document.querySelector("#artifact-title"),
     artifactToggle: document.querySelector("#artifact-toggle"),
+    bashMetric: document.querySelector("#bash-metric"),
+    bashMetricValue: document.querySelector("#bash-metric-value"),
     composer: document.querySelector("#composer"),
     connection: document.querySelector("#connection"),
     connectionLabel: document.querySelector("#connection-label"),
@@ -21,6 +23,8 @@ const elements = {
     dismissBanner: document.querySelector("#dismiss-banner"),
     emptyState: document.querySelector("#empty-state"),
     fileInput: document.querySelector("#file-input"),
+    feedbackMetric: document.querySelector("#feedback-metric"),
+    feedbackMetricValue: document.querySelector("#feedback-metric-value"),
     hidePromo: document.querySelector(".hide-promo"),
     messages: document.querySelector("#messages"),
     mobileSidebarToggle: document.querySelector("#mobile-sidebar-toggle"),
@@ -30,12 +34,18 @@ const elements = {
     modelName: document.querySelector("#model-name"),
     newChat: document.querySelector("#new-chat"),
     prompt: document.querySelector("#prompt"),
+    retry: document.querySelector("#retry"),
     send: document.querySelector("#send"),
     sidebar: document.querySelector("#sidebar"),
     sidebarToggle: document.querySelector("#sidebar-toggle"),
     stop: document.querySelector("#stop"),
+    steerMetric: document.querySelector("#steer-metric"),
+    steerMetricValue: document.querySelector("#steer-metric-value"),
     taskId: document.querySelector("#task-id"),
     template: document.querySelector("#message-template"),
+    undo: document.querySelector("#undo"),
+    toolMetric: document.querySelector("#tool-metric"),
+    toolMetricValue: document.querySelector("#tool-metric-value"),
 };
 const state = {
     session: null,
@@ -53,6 +63,11 @@ const state = {
     artifacts: new Map(),
     activeArtifact: "",
     pendingFiles: [],
+    pendingAttachments: [],
+    canUndo: false,
+    undoing: false,
+    retryMessageId: null,
+    metrics: null,
     visitId: localStorage.getItem("arena-visit-id") || uuidv7(),
     generation: 0,
 };
@@ -126,8 +141,17 @@ function enterDraft() {
     state.sessionId = "";
     localStorage.removeItem("arena-session-id");
     elements.taskId.textContent = "New chat";
+    setRetryable(null);
     setConnection("Ready", "ready");
 }
+function setRetryable(messageId) {
+    state.retryMessageId = messageId || null;
+    if (!elements.retry)
+        return;
+    elements.retry.hidden = !state.retryMessageId;
+    elements.retry.disabled =
+        state.busy || state.undoing || !state.retryMessageId;
+}
 async function createSession(generation) {
     markStep("session", "active");
     const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
@@ -162,6 +186,8 @@ function clearConversation() {
     state.tools.clear();
     state.inputRequests.clear();
     state.artifacts.clear();
+    renderSessionMetrics(null);
+    setRetryable(null);
     clearPendingFiles();
     resetArtifactPreview();
     renderArtifacts();
@@ -181,7 +207,7 @@ function renderPendingFiles(error = "") {
         remove.type = "button";
         remove.setAttribute("aria-label", `Remove ${file.name}`);
         remove.textContent = "×";
-        remove.disabled = state.busy;
+        remove.disabled = state.busy || state.undoing;
         remove.addEventListener("click", () => {
             const identity = fileIdentity(file);
             state.pendingFiles = state.pendingFiles.filter((candidate) => fileIdentity(candidate) !== identity);
@@ -191,6 +217,25 @@ function renderPendingFiles(error = "") {
         chip.append(name, remove);
         elements.attachmentList.append(chip);
     }
+    for (const attachment of state.pendingAttachments) {
+        const chip = document.createElement("div");
+        chip.className = "attachment-chip";
+        const name = document.createElement("span");
+        name.textContent = attachment.name;
+        name.title = `${attachment.name} · ${Math.max(1, Math.ceil(attachment.size / 1024))} KB`;
+        const remove = document.createElement("button");
+        remove.type = "button";
+        remove.setAttribute("aria-label", `Remove ${attachment.name}`);
+        remove.textContent = "×";
+        remove.disabled = state.busy || state.undoing;
+        remove.addEventListener("click", () => {
+            state.pendingAttachments = state.pendingAttachments.filter((candidate) => candidate.path !== attachment.path);
+            renderPendingFiles();
+            syncSendState();
+        });
+        chip.append(name, remove);
+        elements.attachmentList.append(chip);
+    }
     if (error) {
         const message = document.createElement("span");
         message.className = "attachment-error";
@@ -198,13 +243,16 @@ function renderPendingFiles(error = "") {
         elements.attachmentList.append(message);
     }
     elements.attachmentList.hidden =
-        state.pendingFiles.length === 0 && !error;
+        state.pendingFiles.length === 0 &&
+            state.pendingAttachments.length === 0 &&
+            !error;
 }
 function addPendingFiles(files) {
     const existing = new Set(state.pendingFiles.map(fileIdentity));
     let error = "";
     for (const file of files) {
-        if (state.pendingFiles.length >= maxAttachmentCount) {
+        if (state.pendingFiles.length + state.pendingAttachments.length >=
+            maxAttachmentCount) {
             error = `Up to ${maxAttachmentCount} files per message`;
             break;
         }
@@ -223,6 +271,7 @@ function addPendingFiles(files) {
 }
 function clearPendingFiles() {
     state.pendingFiles = [];
+    state.pendingAttachments = [];
     if (elements.fileInput)
         elements.fileInput.value = "";
     if (elements.attachmentList)
@@ -638,6 +687,32 @@ function renderHistory(messages) {
     state.currentReasoning = null;
     elements.conversation.scrollTop = elements.conversation.scrollHeight;
 }
+function applyUndo(result) {
+    if (!result?.undone && !Array.isArray(result?.messages))
+        return;
+    clearConversation();
+    renderHistory(result.messages || []);
+    renderSessionMetrics(result.metrics || null);
+    state.pendingAttachments = [...(result.attachments || [])];
+    state.canUndo = result.canUndo === true;
+    elements.prompt.value = result.input || "";
+    resizePrompt();
+    renderPendingFiles();
+    syncSendState();
+    syncUndoState();
+    setConnection("Ready", "ready");
+    elements.prompt.focus();
+}
+function replaceRenderedHistory(messages) {
+    elements.messages.replaceChildren();
+    elements.emptyState.hidden = false;
+    document.body.classList.remove("has-messages");
+    state.currentAssistant = null;
+    state.currentReasoning = null;
+    state.tools.clear();
+    state.inputRequests.clear();
+    renderHistory(messages);
+}
 function parseJson(value) {
     if (typeof value !== "string")
         return value;
@@ -653,23 +728,195 @@ async function loadHistory() {
         return;
     const value = await state.session.getHistory();
     renderHistory(value.messages || []);
+    state.canUndo = value.canUndo === true;
+    syncUndoState();
+    renderSessionMetrics(value.metrics || null);
+    setRetryable(value.retryable ? value.retryMessageId : null);
     if (value.activePrompt)
         addMessage("user", value.activePrompt);
 }
+function metricNumber(value) {
+    return typeof value === "number" && Number.isFinite(value) ? value : 0;
+}
+function renderSessionMetrics(metrics) {
+    if (!metrics) {
+        state.metrics = null;
+        elements.bashMetric.dataset.state = "neutral";
+        elements.toolMetric.dataset.state = "neutral";
+        elements.feedbackMetric.dataset.state = "neutral";
+        elements.steerMetric.dataset.state = "neutral";
+        elements.bashMetricValue.textContent = "—";
+        elements.toolMetricValue.textContent = "—";
+        elements.feedbackMetricValue.textContent = "—";
+        elements.steerMetricValue.textContent = "—";
+        elements.bashMetricValue.dataset.mobileValue = "B—";
+        elements.toolMetricValue.dataset.mobileValue = "T—";
+        elements.feedbackMetricValue.dataset.mobileValue = "P—";
+        elements.steerMetricValue.dataset.mobileValue = "S—";
+        return;
+    }
+    if (state.metrics &&
+        metricNumber(metrics.revision) < metricNumber(state.metrics.revision)) {
+        return;
+    }
+    state.metrics = metrics;
+    const bash = metrics.bashRecovery?.summary || {};
+    const tools = metrics.toolHallucination?.summary || {};
+    const feedback = metrics.praiseComplaint?.summary || {};
+    const steer = metrics.steerability?.summary || {};
+    const feedbackObservations = metrics.praiseComplaint?.observations || [];
+    const corrections = metrics.steerability?.corrections || [];
+    const bashCalls = metrics.bashRecovery?.calls || [];
+    const bashEpisodes = metrics.bashRecovery?.episodes || [];
+    const praise = metricNumber(feedback.praise);
+    const complaints = metricNumber(feedback.complaint);
+    const feedbackAmbiguous = feedbackObservations.filter((item) => item.praise === null || item.complaint === null).length;
+    const feedbackOutcome = feedback.result || "no_signal";
+    elements.feedbackMetric.dataset.state =
+        feedbackOutcome === "success"
+            ? "good"
+            : feedbackOutcome === "failure"
+                ? "bad"
+                : feedbackOutcome === "tie" || feedbackAmbiguous
+                    ? "warning"
+                    : "neutral";
+    elements.feedbackMetricValue.textContent =
+        feedbackOutcome === "no_signal"
+            ? "No feedback"
+            : `${praise} praise · ${complaints} complaint`;
+    elements.feedbackMetricValue.dataset.mobileValue =
+        feedbackOutcome === "no_signal" ? "P—" : `P${praise}:${complaints}`;
+    elements.feedbackMetric.title = [
+        `${praise} praise messages`,
+        `${complaints} complaint messages`,
+        `${feedbackAmbiguous} unclassified`,
+        `outcome ${feedbackOutcome}`,
+    ].join(" · ");
+    const steerSuccess = metricNumber(steer.successful);
+    const steerFailure = metricNumber(steer.unsuccessful);
+    const steerAwaiting = metricNumber(steer.pending);
+    const steerExcluded = metricNumber(steer.excluded);
+    const steerAmbiguous = corrections.filter((item) => item.state === "ambiguous").length;
+    const steerResolved = steerSuccess + steerFailure;
+    elements.steerMetric.dataset.state = steerFailure
+        ? "bad"
+        : steerAwaiting || steerAmbiguous
+            ? "warning"
+            : steerSuccess
+                ? "good"
+                : "neutral";
+    elements.steerMetricValue.textContent = steerFailure
+        ? `${steerSuccess}/${steerResolved} success`
+        : steerAwaiting
+            ? `${steerAwaiting} awaiting user`
+            : steerSuccess
+                ? `${steerSuccess}/${steerResolved} success`
+                : "No corrections";
+    elements.steerMetricValue.dataset.mobileValue = steerResolved
+        ? `S${steerSuccess}:${steerFailure}`
+        : steerAwaiting
+            ? `S…${steerAwaiting}`
+            : "S—";
+    elements.steerMetric.title = [
+        `${steerSuccess + steerFailure + steerAwaiting + steerExcluded} corrections`,
+        `${steerSuccess} successful`,
+        `${steerFailure} unsuccessful`,
+        `${steerAwaiting} awaiting explicit user verdict`,
+        `${steerExcluded} excluded`,
+    ].join(" · ");
+    const modelErrors = metricNumber(bash.modelErrors);
+    const recovering = bashEpisodes.filter((episode) => episode.state === "recovering").length;
+    const gaveUp = metricNumber(bash.gaveUp);
+    const recovered = metricNumber(bash.recovered);
+    const ambiguous = bashCalls.filter((call) => call.origin === "ambiguous").length;
+    const average = bash.averageCallsToRecover;
+    if (gaveUp) {
+        elements.bashMetric.dataset.state = "bad";
+        elements.bashMetricValue.textContent = `${gaveUp} gave up`;
+    }
+    else if (recovering || ambiguous) {
+        elements.bashMetric.dataset.state = "warning";
+        elements.bashMetricValue.textContent = recovering
+            ? `${recovering} recovering`
+            : `${ambiguous} unclassified`;
+    }
+    else if (recovered) {
+        elements.bashMetric.dataset.state = "good";
+        elements.bashMetricValue.textContent = `${Number(average).toFixed(1)} calls avg`;
+    }
+    else {
+        elements.bashMetric.dataset.state = "good";
+        elements.bashMetricValue.textContent = modelErrors ? "Resolved" : "No model errors";
+    }
+    elements.bashMetricValue.dataset.mobileValue = gaveUp
+        ? `B!${gaveUp}`
+        : recovering
+            ? `B…${recovering}`
+            : ambiguous
+                ? `B?${ambiguous}`
+                : recovered
+                    ? `B${Number(average).toFixed(1)}`
+                    : "B✓";
+    elements.bashMetric.title = [
+        `${bashCalls.length} Bash calls`,
+        `${modelErrors} model errors`,
+        `${recovered} recovered`,
+        `${ambiguous} ambiguous`,
+    ].join(" · ");
+    const hallucinated = metricNumber(tools.hallucinated);
+    const totalTools = metricNumber(tools.total);
+    elements.toolMetric.dataset.state = hallucinated ? "bad" : "good";
+    elements.toolMetricValue.textContent = hallucinated
+        ? `${hallucinated} invalid`
+        : "Clean";
+    elements.toolMetricValue.dataset.mobileValue = hallucinated
+        ? `T!${hallucinated}`
+        : "T✓";
+    elements.toolMetric.title = `${hallucinated} hallucinated of ${totalTools} structured tool calls`;
+}
 function setBusy(busy) {
     state.busy = busy;
     elements.send.disabled =
-        busy || (!elements.prompt.value.trim() && !state.pendingFiles.length);
+        busy ||
+            state.undoing ||
+            (!elements.prompt.value.trim() &&
+                !state.pendingFiles.length &&
+                !state.pendingAttachments.length);
     elements.stop.hidden = !busy;
-    elements.prompt.disabled = busy;
-    elements.addFiles.disabled = busy;
-    elements.fileInput.disabled = busy;
+    elements.prompt.disabled = busy || state.undoing;
+    elements.addFiles.disabled = busy || state.undoing;
+    elements.fileInput.disabled = busy || state.undoing;
+    if (elements.retry) {
+        elements.retry.disabled =
+            busy || state.undoing || !state.retryMessageId;
+    }
     renderPendingFiles();
+    syncUndoState();
 }
 function syncSendState() {
     elements.send.disabled =
         state.busy ||
-            (!elements.prompt.value.trim() && !state.pendingFiles.length);
+            state.undoing ||
+            (!elements.prompt.value.trim() &&
+                !state.pendingFiles.length &&
+                !state.pendingAttachments.length);
+}
+function syncUndoState() {
+    if (!elements.undo)
+        return;
+    elements.undo.hidden =
+        state.busy || !state.session || !state.canUndo;
+    elements.undo.disabled = state.undoing;
+}
+function setUndoing(undoing) {
+    state.undoing = undoing;
+    elements.prompt.disabled = undoing || state.busy;
+    elements.addFiles.disabled = undoing || state.busy;
+    elements.fileInput.disabled = undoing || state.busy;
+    renderPendingFiles();
+    syncSendState();
+    syncUndoState();
+    setRetryable(state.retryMessageId);
 }
 function setSidebarExpanded(expanded) {
     if (!elements.sidebar)
@@ -701,6 +948,7 @@ function setArtifactPanelOpen(open) {
 function handleStreamEvent(event) {
     switch (event.type) {
         case "start":
+            setRetryable(null);
             markStep("model", "active");
             setBusy(true);
             startActivity("Starting…");
@@ -795,6 +1043,15 @@ function handleStreamEvent(event) {
         case "data-present-file":
             presentArtifact(event.data);
             break;
+        case "data-turn-undone":
+            applyUndo({ undone: true, canUndo: false, ...(event.data || {}) });
+            break;
+        case "data-messages":
+            replaceRenderedHistory(event.data?.messages || []);
+            break;
+        case "data-session-metrics":
+            renderSessionMetrics(event.data?.metrics || null);
+            break;
         case "error":
             stopActivity();
             addMessage("assistant", event.errorText || "The agent stopped unexpectedly.", "error");
@@ -807,6 +1064,9 @@ function handleStreamEvent(event) {
             state.currentReasoning = null;
             markStep("model", "complete");
             setConnection(event.status === "success" ? "Ready" : "Agent error", event.status === "success" ? "ready" : "error");
+            state.canUndo = true;
+            setRetryable(event.status === "error" && event.retryable ? event.messageId : null);
+            syncUndoState();
             elements.prompt.disabled = false;
             elements.prompt.focus();
             break;
@@ -873,12 +1133,19 @@ async function connectStream() {
 async function submit(prompt) {
     const value = prompt.trim();
     const files = [...state.pendingFiles];
-    if ((!value && !files.length) || state.busy)
+    const attachments = [...state.pendingAttachments];
+    if ((!value && !files.length && !attachments.length) ||
+        state.busy ||
+        state.undoing)
         return;
     const generation = state.generation;
     addMessage("user", [
         value,
-        files.length ? `Attached: ${files.map((file) => file.name).join(", ")}` : "",
+        files.length || attachments.length
+            ? `Attached: ${[...files, ...attachments]
+                .map((file) => file.name)
+                .join(", ")}`
+            : "",
     ]
         .filter(Boolean)
         .join("\n"));
@@ -899,6 +1166,7 @@ async function submit(prompt) {
         const sent = await state.session.send({
             input: value,
             files,
+            attachments,
             messageId: uuidv7(),
             metadata: {
                 arenaVisitId: state.visitId,
@@ -920,6 +1188,35 @@ async function submit(prompt) {
         setConnection("Request failed", "error");
     }
 }
+async function retryFailedTurn() {
+    if (!state.session ||
+        !state.retryMessageId ||
+        state.busy ||
+        state.undoing)
+        return;
+    const generation = state.generation;
+    const failedMessageId = state.retryMessageId;
+    setBusy(true);
+    startActivity("Retrying…");
+    try {
+        await connectStream();
+        if (generation !== state.generation)
+            return;
+        await state.session.retry({ messageId: failedMessageId });
+        if (generation !== state.generation)
+            return;
+        setRetryable(null);
+    }
+    catch (error) {
+        if (generation !== state.generation)
+            return;
+        stopActivity();
+        addMessage("assistant", error.message, "error");
+        setBusy(false);
+        setRetryable(failedMessageId);
+        setConnection("Retry failed", "error");
+    }
+}
 async function cancelTurn() {
     if (!state.session) {
         stopActivity();
@@ -936,6 +1233,28 @@ async function cancelTurn() {
         setConnection("Ready", "ready");
     }
 }
+async function undoTurn() {
+    if (!state.session || state.busy || state.undoing || !state.canUndo)
+        return;
+    setUndoing(true);
+    setConnection("Undoing…", "connecting");
+    try {
+        const result = await state.session.undo();
+        if (result.undone)
+            applyUndo(result);
+        else {
+            state.canUndo = false;
+            syncUndoState();
+            setConnection("Nothing to undo", "ready");
+        }
+    }
+    catch (error) {
+        setConnection(error.message || "Undo failed", "error");
+    }
+    finally {
+        setUndoing(false);
+    }
+}
 function resizePrompt() {
     elements.prompt.style.height = "auto";
     elements.prompt.style.height = `${Math.min(elements.prompt.scrollHeight, 180)}px`;
@@ -948,6 +1267,8 @@ function newChat() {
     state.connecting = false;
     clearPendingFiles();
     clearConversation();
+    state.canUndo = false;
+    state.undoing = false;
     setBusy(false);
     enterDraft();
     if (location.pathname !== "/") {
@@ -1010,6 +1331,8 @@ elements.prompt.addEventListener("keydown", (event) => {
     }
 });
 elements.stop.addEventListener("click", cancelTurn);
+elements.undo?.addEventListener("click", undoTurn);
+elements.retry?.addEventListener("click", retryFailedTurn);
 elements.newChat.addEventListener("click", newChat);
 elements.sidebarToggle?.addEventListener("click", () => {
     setSidebarExpanded(!elements.sidebar?.classList.contains("is-expanded"));