@qwen-code/arena-agent 0.0.1

package/dist/web/app.js

@@ -0,0 +1,1082 @@
+import { ArenaClient } from "../sdk.js";
+const elements = {
+    addFiles: document.querySelector("#add-files"),
+    announcement: document.querySelector("#announcement"),
+    attachmentList: document.querySelector("#attachment-list"),
+    artifactCount: document.querySelector("#artifact-count"),
+    artifactClose: document.querySelector("#artifact-close"),
+    artifactEmpty: document.querySelector("#artifact-empty"),
+    artifactList: document.querySelector("#artifact-list"),
+    artifactOpen: document.querySelector("#artifact-open"),
+    artifactPanel: document.querySelector("#artifact-panel"),
+    artifactPreview: document.querySelector("#artifact-preview"),
+    artifactPreviewBody: document.querySelector("#artifact-preview-body"),
+    artifactPreviewPath: document.querySelector("#artifact-preview-path"),
+    artifactTitle: document.querySelector("#artifact-title"),
+    artifactToggle: document.querySelector("#artifact-toggle"),
+    composer: document.querySelector("#composer"),
+    connection: document.querySelector("#connection"),
+    connectionLabel: document.querySelector("#connection-label"),
+    conversation: document.querySelector("#conversation"),
+    dismissBanner: document.querySelector("#dismiss-banner"),
+    emptyState: document.querySelector("#empty-state"),
+    fileInput: document.querySelector("#file-input"),
+    hidePromo: document.querySelector(".hide-promo"),
+    messages: document.querySelector("#messages"),
+    mobileSidebarToggle: document.querySelector("#mobile-sidebar-toggle"),
+    modeLabel: document.querySelector("#mode-label"),
+    modeMenu: document.querySelector("#mode-menu"),
+    modeToggle: document.querySelector("#mode-toggle"),
+    modelName: document.querySelector("#model-name"),
+    newChat: document.querySelector("#new-chat"),
+    prompt: document.querySelector("#prompt"),
+    send: document.querySelector("#send"),
+    sidebar: document.querySelector("#sidebar"),
+    sidebarToggle: document.querySelector("#sidebar-toggle"),
+    stop: document.querySelector("#stop"),
+    taskId: document.querySelector("#task-id"),
+    template: document.querySelector("#message-template"),
+};
+const state = {
+    session: null,
+    sessionId: "",
+    stream: null,
+    activityTimer: null,
+    activityLabel: "",
+    activityStartedAt: 0,
+    connecting: false,
+    busy: false,
+    currentAssistant: null,
+    currentReasoning: null,
+    tools: new Map(),
+    inputRequests: new Map(),
+    artifacts: new Map(),
+    activeArtifact: "",
+    pendingFiles: [],
+    visitId: localStorage.getItem("arena-visit-id") || uuidv7(),
+    generation: 0,
+};
+const maxAttachmentBytes = 20 * 1024 * 1024;
+const maxAttachmentCount = 10;
+const arena = new ArenaClient({
+    onCredentials(credentials) {
+        localStorage.setItem(sessionTokenKey(credentials.sessionId), credentials.token);
+    },
+});
+localStorage.setItem("arena-visit-id", state.visitId);
+function uuidv7() {
+    const bytes = crypto.getRandomValues(new Uint8Array(16));
+    let timestamp = BigInt(Date.now());
+    for (let index = 5; index >= 0; index -= 1) {
+        bytes[index] = Number(timestamp & 0xffn);
+        timestamp >>= 8n;
+    }
+    bytes[6] = 0x70 | (bytes[6] & 0x0f);
+    bytes[8] = 0x80 | (bytes[8] & 0x3f);
+    const hex = [...bytes].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+    return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+}
+function sessionFromLocation() {
+    const match = location.pathname.match(/^\/agent\/([A-Za-z0-9-]{1,128})$/);
+    return match?.[1] || "";
+}
+function sessionTokenKey(sessionId) {
+    return `arena-session-token:${sessionId}`;
+}
+function rememberSession() {
+    if (!state.session)
+        return;
+    const credentials = state.session.credentials;
+    localStorage.setItem("arena-session-id", state.sessionId);
+    localStorage.setItem(sessionTokenKey(credentials.sessionId), credentials.token);
+}
+function forgetSession(sessionId) {
+    if (!sessionId)
+        return;
+    localStorage.removeItem(sessionTokenKey(sessionId));
+}
+function setConnection(label, status = "connecting") {
+    elements.connection.dataset.state = status;
+    elements.connectionLabel.textContent = label;
+}
+function startActivity(label) {
+    clearInterval(state.activityTimer);
+    state.activityLabel = label;
+    state.activityStartedAt = Date.now();
+    const render = () => {
+        const seconds = Math.floor((Date.now() - state.activityStartedAt) / 1000);
+        setConnection(seconds > 0 ? `${state.activityLabel} ${seconds}s` : state.activityLabel, "connecting");
+    };
+    render();
+    state.activityTimer = setInterval(render, 1000);
+}
+function stopActivity() {
+    clearInterval(state.activityTimer);
+    state.activityTimer = null;
+}
+function markStep(name, status) {
+    const step = document.querySelector(`[data-step="${name}"]`);
+    if (!step)
+        return;
+    step.classList.toggle("is-active", status === "active");
+    step.classList.toggle("is-complete", status === "complete");
+}
+function enterDraft() {
+    state.session = null;
+    state.sessionId = "";
+    localStorage.removeItem("arena-session-id");
+    elements.taskId.textContent = "New chat";
+    setConnection("Ready", "ready");
+}
+async function createSession(generation) {
+    markStep("session", "active");
+    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+    const providedLocation = globalThis.ARENA_CLIENT_CONTEXT?.location;
+    const session = await arena.sessions.create({
+        timezone,
+        ...(providedLocation ? { location: providedLocation } : {}),
+    });
+    if (generation !== state.generation)
+        return false;
+    state.session = session;
+    state.sessionId = session.id;
+    markStep("session", "complete");
+    elements.taskId.textContent = state.sessionId.slice(0, 18);
+    rememberSession();
+    history.replaceState(null, "", `/agent/${state.sessionId}`);
+    return true;
+}
+async function ensureSession(generation) {
+    if (generation !== state.generation)
+        return false;
+    if (state.session)
+        return true;
+    return createSession(generation);
+}
+function clearConversation() {
+    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();
+    state.artifacts.clear();
+    clearPendingFiles();
+    resetArtifactPreview();
+    renderArtifacts();
+}
+function fileIdentity(file) {
+    return `${file.name}:${file.size}:${file.lastModified}`;
+}
+function renderPendingFiles(error = "") {
+    elements.attachmentList.replaceChildren();
+    for (const file of state.pendingFiles) {
+        const chip = document.createElement("div");
+        chip.className = "attachment-chip";
+        const name = document.createElement("span");
+        name.textContent = file.name;
+        name.title = `${file.name} · ${Math.max(1, Math.ceil(file.size / 1024))} KB`;
+        const remove = document.createElement("button");
+        remove.type = "button";
+        remove.setAttribute("aria-label", `Remove ${file.name}`);
+        remove.textContent = "×";
+        remove.disabled = state.busy;
+        remove.addEventListener("click", () => {
+            const identity = fileIdentity(file);
+            state.pendingFiles = state.pendingFiles.filter((candidate) => fileIdentity(candidate) !== identity);
+            renderPendingFiles();
+            syncSendState();
+        });
+        chip.append(name, remove);
+        elements.attachmentList.append(chip);
+    }
+    if (error) {
+        const message = document.createElement("span");
+        message.className = "attachment-error";
+        message.textContent = error;
+        elements.attachmentList.append(message);
+    }
+    elements.attachmentList.hidden =
+        state.pendingFiles.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) {
+            error = `Up to ${maxAttachmentCount} files per message`;
+            break;
+        }
+        if (file.size > maxAttachmentBytes) {
+            error = `${file.name} exceeds 20 MB`;
+            continue;
+        }
+        const identity = fileIdentity(file);
+        if (!existing.has(identity)) {
+            state.pendingFiles.push(file);
+            existing.add(identity);
+        }
+    }
+    renderPendingFiles(error);
+    syncSendState();
+}
+function clearPendingFiles() {
+    state.pendingFiles = [];
+    if (elements.fileInput)
+        elements.fileInput.value = "";
+    if (elements.attachmentList)
+        renderPendingFiles();
+    syncSendState();
+}
+function addMessage(role, text = "", extraClass = "") {
+    elements.emptyState.hidden = true;
+    document.body.classList.add("has-messages");
+    const fragment = elements.template.content.cloneNode(true);
+    const article = fragment.querySelector(".message");
+    const avatar = fragment.querySelector(".avatar");
+    const label = fragment.querySelector(".message-label");
+    const content = fragment.querySelector(".message-content");
+    article.className = `message ${role} ${extraClass}`.trim();
+    avatar.textContent = role === "assistant" ? "A" : "U";
+    label.textContent = role === "assistant" ? "Arena" : "You";
+    content.textContent = text;
+    elements.messages.append(fragment);
+    elements.conversation.scrollTop = elements.conversation.scrollHeight;
+    return elements.messages.lastElementChild;
+}
+function pretty(value) {
+    if (typeof value === "string")
+        return value;
+    try {
+        return JSON.stringify(value, null, 2);
+    }
+    catch {
+        return String(value);
+    }
+}
+function addReasoning(text = "") {
+    if (!state.currentAssistant)
+        state.currentAssistant = addMessage("assistant");
+    const details = document.createElement("details");
+    details.className = "reasoning";
+    details.open = true;
+    const summary = document.createElement("summary");
+    summary.textContent = "Reasoning";
+    const content = document.createElement("pre");
+    content.textContent = text;
+    details.append(summary, content);
+    const body = state.currentAssistant.querySelector(".message-body");
+    body.insertBefore(details, body.querySelector(".message-content"));
+    return details;
+}
+function addTool(toolCallId, toolName) {
+    if (!state.currentAssistant)
+        state.currentAssistant = addMessage("assistant");
+    const card = document.createElement("div");
+    card.className = "tool-card";
+    card.dataset.toolCallId = toolCallId;
+    card.dataset.toolName = toolName;
+    const head = document.createElement("div");
+    head.className = "tool-head";
+    const symbol = document.createElement("span");
+    symbol.className = "tool-symbol";
+    symbol.textContent = "⌘";
+    const name = document.createElement("span");
+    name.className = "tool-name";
+    name.textContent = toolName;
+    const status = document.createElement("span");
+    status.className = "tool-status";
+    status.textContent = "Running";
+    head.append(symbol, name, status);
+    const content = document.createElement("pre");
+    card.append(head, content);
+    state.currentAssistant.querySelector(".message-body").append(card);
+    state.tools.set(toolCallId, card);
+    return card;
+}
+function markInputSubmitted(requestId) {
+    const card = state.inputRequests.get(requestId);
+    if (!card)
+        return;
+    card.classList.add("is-submitted");
+    card.querySelectorAll("input, button").forEach((control) => {
+        control.disabled = true;
+    });
+    card.querySelector(".user-input-status").textContent = "Submitted";
+}
+async function submitInputResponse(requestId, answers) {
+    if (!state.session)
+        throw new Error("The session is no longer active");
+    await state.session.respondToInput(requestId, answers);
+}
+function addInputRequest(request) {
+    if (state.inputRequests.has(request.requestId)) {
+        return state.inputRequests.get(request.requestId);
+    }
+    const toolCard = state.tools.get(request.toolCallId);
+    const assistant = toolCard?.closest(".message") ||
+        state.currentAssistant ||
+        addMessage("assistant");
+    const card = document.createElement("form");
+    card.className = "user-input-card";
+    card.dataset.requestId = request.requestId;
+    const heading = document.createElement("div");
+    heading.className = "user-input-heading";
+    const title = document.createElement("strong");
+    title.textContent = "Input needed";
+    const status = document.createElement("span");
+    status.className = "user-input-status";
+    status.textContent = "Waiting";
+    heading.append(title, status);
+    card.append(heading);
+    for (const [index, question] of (request.questions || []).entries()) {
+        const fieldset = document.createElement("fieldset");
+        fieldset.dataset.questionId = question.id;
+        const legend = document.createElement("legend");
+        legend.textContent = question.question;
+        fieldset.append(legend);
+        const groupName = `answer-${request.requestId}-${index}`;
+        for (const option of question.options || []) {
+            const label = document.createElement("label");
+            label.className = "user-input-option";
+            const input = document.createElement("input");
+            input.type = "radio";
+            input.name = groupName;
+            input.value = option.id;
+            input.required = true;
+            const copy = document.createElement("span");
+            const optionTitle = document.createElement("strong");
+            optionTitle.textContent = option.label;
+            copy.append(optionTitle);
+            if (option.description) {
+                const description = document.createElement("small");
+                description.textContent = option.description;
+                copy.append(description);
+            }
+            label.append(input, copy);
+            fieldset.append(label);
+        }
+        if (question.allowCustomResponse !== false) {
+            const custom = document.createElement("label");
+            custom.className = "user-input-option user-input-custom";
+            const input = document.createElement("input");
+            input.type = "radio";
+            input.name = groupName;
+            input.value = "__custom__";
+            input.required = true;
+            const text = document.createElement("input");
+            text.type = "text";
+            text.placeholder = "Other…";
+            text.addEventListener("focus", () => {
+                input.checked = true;
+            });
+            custom.append(input, text);
+            fieldset.append(custom);
+        }
+        card.append(fieldset);
+    }
+    const submit = document.createElement("button");
+    submit.className = "user-input-submit";
+    submit.type = "submit";
+    submit.textContent = "Continue";
+    card.append(submit);
+    card.addEventListener("submit", async (event) => {
+        event.preventDefault();
+        const answers = [];
+        for (const fieldset of card.querySelectorAll("fieldset")) {
+            const selected = fieldset.querySelector('input[type="radio"]:checked');
+            if (!selected) {
+                card.reportValidity();
+                return;
+            }
+            const answer = { questionId: fieldset.dataset.questionId };
+            if (selected.value === "__custom__") {
+                const customResponse = fieldset.querySelector('.user-input-custom input[type="text"]').value.trim();
+                if (!customResponse) {
+                    status.textContent = "Enter a custom answer";
+                    return;
+                }
+                answer.customResponse = customResponse;
+            }
+            else {
+                answer.optionId = selected.value;
+            }
+            answers.push(answer);
+        }
+        submit.disabled = true;
+        status.textContent = "Submitting…";
+        try {
+            await submitInputResponse(request.requestId, answers);
+            markInputSubmitted(request.requestId);
+            startActivity("Continuing…");
+        }
+        catch (error) {
+            submit.disabled = false;
+            status.textContent = error.message;
+        }
+    });
+    assistant.querySelector(".message-body").append(card);
+    state.inputRequests.set(request.requestId, card);
+    return card;
+}
+function fileExtension(filePath) {
+    const name = filePath.split("/").pop() || "";
+    return (name.includes(".") ? name.split(".").pop() : "FILE").slice(0, 4).toUpperCase();
+}
+function normalizeArtifact(artifact) {
+    if (!artifact || typeof artifact.path !== "string")
+        return null;
+    const normalized = artifact.path
+        .replace(/^\/home\/user\/?/, "")
+        .replace(/\\/g, "/")
+        .replace(/^\.\/+/, "");
+    if (!normalized ||
+        normalized.startsWith("/") ||
+        normalized.split("/").some((part) => !part || part === "." || part === ".." || part.startsWith("."))) {
+        return null;
+    }
+    return {
+        ...artifact,
+        path: normalized,
+        url: artifact.url ||
+            `/api/chat/sessions/${state.sessionId}/workspace/${normalized
+                .split("/")
+                .map(encodeURIComponent)
+                .join("/")}`,
+    };
+}
+function artifactPreviewKind(filePath) {
+    const extension = fileExtension(filePath).toLowerCase();
+    if (["bmp", "gif", "ico", "jpeg", "jpg", "png", "svg", "webp"].includes(extension)) {
+        return "image";
+    }
+    if (["aac", "m4a", "mp3", "ogg", "wav"].includes(extension))
+        return "audio";
+    if (["avi", "mov", "mp4", "ogv", "webm"].includes(extension))
+        return "video";
+    if (["docx", "pptx", "xlsx"].includes(extension))
+        return "download";
+    return "frame";
+}
+function resetArtifactPreview() {
+    state.activeArtifact = "";
+    elements.artifactPanel?.classList.remove("has-preview");
+    if (elements.artifactPreview)
+        elements.artifactPreview.hidden = true;
+    elements.artifactPreviewBody?.replaceChildren();
+    if (elements.artifactPreviewPath)
+        elements.artifactPreviewPath.textContent = "";
+    if (elements.artifactTitle)
+        elements.artifactTitle.textContent = "Artifacts";
+    elements.artifactOpen?.removeAttribute("href");
+}
+function renderArtifactPreview(artifact) {
+    const kind = artifactPreviewKind(artifact.path);
+    const name = artifact.path.split("/").pop();
+    const preview = elements.artifactPreviewBody;
+    preview.replaceChildren();
+    let content;
+    if (kind === "image") {
+        content = document.createElement("img");
+        content.alt = name;
+        content.src = artifact.url;
+    }
+    else if (kind === "audio") {
+        content = document.createElement("audio");
+        content.controls = true;
+        content.src = artifact.url;
+    }
+    else if (kind === "video") {
+        content = document.createElement("video");
+        content.controls = true;
+        content.src = artifact.url;
+    }
+    else if (kind === "frame") {
+        content = document.createElement("iframe");
+        content.title = `Preview of ${name}`;
+        content.src = artifact.url;
+        content.setAttribute("sandbox", "allow-scripts");
+        content.referrerPolicy = "no-referrer";
+    }
+    else {
+        content = document.createElement("div");
+        content.className = "artifact-preview-fallback";
+        const icon = document.createElement("span");
+        icon.textContent = fileExtension(artifact.path);
+        const title = document.createElement("strong");
+        title.textContent = "Preview unavailable";
+        const description = document.createElement("p");
+        description.textContent = "Open or download this file to view it in a compatible app.";
+        content.append(icon, title, description);
+    }
+    content.classList.add("artifact-preview-content");
+    preview.append(content);
+    elements.artifactPreviewPath.textContent = artifact.path;
+    elements.artifactOpen.href = artifact.url;
+    elements.artifactTitle.textContent = name;
+    elements.artifactPreview.hidden = false;
+    elements.artifactPanel.classList.add("has-preview");
+}
+function renderArtifacts() {
+    elements.artifactList.replaceChildren();
+    elements.artifactCount.textContent = String(state.artifacts.size);
+    elements.artifactEmpty.hidden = state.artifacts.size > 0;
+    for (const artifact of state.artifacts.values()) {
+        const item = document.createElement("button");
+        item.className = "artifact-item";
+        item.type = "button";
+        item.classList.toggle("is-active", artifact.path === state.activeArtifact);
+        item.setAttribute("aria-label", `Preview ${artifact.path}`);
+        const icon = document.createElement("span");
+        icon.className = "file-icon";
+        icon.textContent = fileExtension(artifact.path);
+        const details = document.createElement("span");
+        const name = document.createElement("strong");
+        name.textContent = artifact.path.split("/").pop();
+        const fullPath = document.createElement("small");
+        fullPath.textContent = artifact.path;
+        details.append(name, fullPath);
+        const arrow = document.createElement("span");
+        arrow.className = "artifact-arrow";
+        arrow.textContent = "›";
+        item.append(icon, details, arrow);
+        item.addEventListener("click", () => presentArtifact(artifact));
+        elements.artifactList.append(item);
+    }
+}
+function addArtifact(artifact) {
+    const normalized = normalizeArtifact(artifact);
+    if (!normalized)
+        return null;
+    state.artifacts.set(normalized.path, {
+        ...state.artifacts.get(normalized.path),
+        ...normalized,
+    });
+    renderArtifacts();
+    return state.artifacts.get(normalized.path);
+}
+function presentArtifact(artifact) {
+    const normalized = addArtifact(artifact);
+    if (!normalized)
+        return;
+    state.activeArtifact = normalized.path;
+    renderArtifactPreview(normalized);
+    renderArtifacts();
+    setArtifactPanelOpen(true);
+}
+function renderHistory(messages) {
+    if (!messages.length)
+        return;
+    elements.emptyState.hidden = true;
+    document.body.classList.add("has-messages");
+    for (const message of messages) {
+        if (message.role === "user") {
+            if (typeof message.content === "string") {
+                addMessage("user", message.content);
+            }
+            else if (Array.isArray(message.content)) {
+                const text = message.content
+                    .filter((part) => typeof part?.text === "string" &&
+                    !part.text.includes("<arena-system-message>"))
+                    .map((part) => part.text.trim())
+                    .filter(Boolean)
+                    .join("\n");
+                const notice = message.content
+                    .filter((part) => typeof part?.text === "string")
+                    .map((part) => part.text.match(/The user attached the following files \(saved to \/home\/user\/uploads\/\):\n([\s\S]*?)\n<\/arena-system-message>/)?.[1])
+                    .find(Boolean);
+                const display = [
+                    text,
+                    notice ? `Attached: ${notice.replace(/,\n/g, ", ")}` : "",
+                ]
+                    .filter(Boolean)
+                    .join("\n");
+                if (display)
+                    addMessage("user", display);
+            }
+        }
+        else if (message.role === "assistant") {
+            if (message.reasoning_content) {
+                state.currentAssistant = addMessage("assistant", message.content || "");
+                state.currentReasoning = addReasoning(message.reasoning_content);
+                state.currentReasoning.open = false;
+            }
+            else if (message.content) {
+                state.currentAssistant = addMessage("assistant", message.content);
+            }
+            for (const call of message.tool_calls || []) {
+                const card = addTool(call.id, call.function?.name || "tool");
+                card.dataset.toolName = call.function?.name || "tool";
+                card.querySelector("pre").textContent = pretty(parseJson(call.function?.arguments || "{}"));
+            }
+        }
+        else if (message.role === "tool") {
+            const card = state.tools.get(message.tool_call_id);
+            if (card) {
+                const output = parseJson(message.content);
+                card.classList.add("is-complete");
+                card.querySelector(".tool-status").textContent = "Complete";
+                card.querySelector("pre").textContent += `\n\nOutput\n${pretty(output)}`;
+                const path = output?.path || output?.file_path;
+                if (path && output?.status !== "error") {
+                    const artifact = {
+                        path,
+                        sourceTool: card.dataset.toolName,
+                    };
+                    if (card.dataset.toolName === "present_file") {
+                        presentArtifact(artifact);
+                    }
+                    else {
+                        addArtifact(artifact);
+                    }
+                }
+            }
+        }
+    }
+    state.currentAssistant = null;
+    state.currentReasoning = null;
+    elements.conversation.scrollTop = elements.conversation.scrollHeight;
+}
+function parseJson(value) {
+    if (typeof value !== "string")
+        return value;
+    try {
+        return JSON.parse(value);
+    }
+    catch {
+        return value;
+    }
+}
+async function loadHistory() {
+    if (!state.session)
+        return;
+    const value = await state.session.getHistory();
+    renderHistory(value.messages || []);
+    if (value.activePrompt)
+        addMessage("user", value.activePrompt);
+}
+function setBusy(busy) {
+    state.busy = busy;
+    elements.send.disabled =
+        busy || (!elements.prompt.value.trim() && !state.pendingFiles.length);
+    elements.stop.hidden = !busy;
+    elements.prompt.disabled = busy;
+    elements.addFiles.disabled = busy;
+    elements.fileInput.disabled = busy;
+    renderPendingFiles();
+}
+function syncSendState() {
+    elements.send.disabled =
+        state.busy ||
+            (!elements.prompt.value.trim() && !state.pendingFiles.length);
+}
+function setSidebarExpanded(expanded) {
+    if (!elements.sidebar)
+        return;
+    elements.sidebar.classList.toggle("is-expanded", expanded);
+    elements.sidebarToggle?.setAttribute("aria-expanded", String(expanded));
+    elements.mobileSidebarToggle?.setAttribute("aria-expanded", String(expanded));
+    localStorage.setItem("arena-sidebar-expanded", String(expanded));
+}
+function closeModeMenu() {
+    if (!elements.modeMenu)
+        return;
+    elements.modeMenu.hidden = true;
+    elements.modeToggle?.setAttribute("aria-expanded", "false");
+}
+function toggleModeMenu() {
+    if (!elements.modeMenu)
+        return;
+    const willOpen = elements.modeMenu.hidden;
+    elements.modeMenu.hidden = !willOpen;
+    elements.modeToggle?.setAttribute("aria-expanded", String(willOpen));
+}
+function setArtifactPanelOpen(open) {
+    if (!elements.artifactPanel)
+        return;
+    elements.artifactPanel.hidden = !open;
+    elements.artifactToggle?.setAttribute("aria-expanded", String(open));
+}
+function handleStreamEvent(event) {
+    switch (event.type) {
+        case "start":
+            markStep("model", "active");
+            setBusy(true);
+            startActivity("Starting…");
+            state.currentAssistant = null;
+            state.currentReasoning = null;
+            break;
+        case "reasoning-start":
+            state.currentReasoning = addReasoning();
+            break;
+        case "reasoning-delta":
+            if (!state.currentReasoning)
+                state.currentReasoning = addReasoning();
+            state.currentReasoning.querySelector("pre").textContent += event.delta || "";
+            break;
+        case "reasoning-end":
+            if (state.currentReasoning)
+                state.currentReasoning.open = false;
+            state.currentReasoning = null;
+            break;
+        case "text-start":
+            if (!state.currentAssistant) {
+                state.currentAssistant = addMessage("assistant");
+            }
+            break;
+        case "text-delta":
+            if (!state.currentAssistant)
+                state.currentAssistant = addMessage("assistant");
+            state.currentAssistant.querySelector(".message-content").textContent += event.delta || "";
+            break;
+        case "tool-input-start":
+            addTool(event.toolCallId, event.toolName)
+                .querySelector(".tool-status").textContent = "Preparing";
+            break;
+        case "tool-input-delta": {
+            const card = state.tools.get(event.toolCallId) ||
+                addTool(event.toolCallId, event.toolName || "tool");
+            card.querySelector(".tool-name").textContent = event.toolName || "tool";
+            card.dataset.toolName = event.toolName || "tool";
+            card.querySelector("pre").textContent += event.inputTextDelta || "";
+            break;
+        }
+        case "tool-input-available": {
+            const card = state.tools.get(event.toolCallId) ||
+                addTool(event.toolCallId, event.toolName || "tool");
+            card.querySelector(".tool-name").textContent = event.toolName || "tool";
+            card.dataset.toolName = event.toolName || "tool";
+            card.querySelector("pre").textContent = pretty(event.input);
+            break;
+        }
+        case "tool-output-available": {
+            const card = state.tools.get(event.toolCallId) || addTool(event.toolCallId, "tool");
+            card.classList.add("is-complete");
+            card.querySelector(".tool-status").textContent = "Complete";
+            card.querySelector("pre").textContent += `\n\nOutput\n${pretty(event.output)}`;
+            break;
+        }
+        case "data-user-input-request": {
+            const request = event.data || {};
+            addInputRequest(request);
+            const tool = state.tools.get(request.toolCallId);
+            if (tool)
+                tool.querySelector(".tool-status").textContent = "Waiting";
+            startActivity("Waiting for your answer…");
+            break;
+        }
+        case "data-user-input-submitted":
+            markInputSubmitted(event.data?.requestId);
+            startActivity("Continuing…");
+            break;
+        case "data-agent-status": {
+            const activity = event.data || {};
+            if (activity.phase === "model") {
+                state.currentAssistant = null;
+                state.currentReasoning = null;
+            }
+            startActivity(activity.label || "Running…");
+            if (activity.toolCallId) {
+                const card = state.tools.get(activity.toolCallId);
+                if (card && activity.phase === "tool-running") {
+                    card.querySelector(".tool-status").textContent = "Running";
+                }
+                if (card && activity.phase === "tool-complete") {
+                    card.classList.add("is-complete");
+                    card.querySelector(".tool-status").textContent = "Complete";
+                }
+            }
+            break;
+        }
+        case "data-workspace":
+            addArtifact(event.data);
+            break;
+        case "data-present-file":
+            presentArtifact(event.data);
+            break;
+        case "error":
+            stopActivity();
+            addMessage("assistant", event.errorText || "The agent stopped unexpectedly.", "error");
+            setConnection("Agent error", "error");
+            break;
+        case "trigger:turn-complete":
+            stopActivity();
+            setBusy(false);
+            state.currentAssistant = null;
+            state.currentReasoning = null;
+            markStep("model", "complete");
+            setConnection(event.status === "success" ? "Ready" : "Agent error", event.status === "success" ? "ready" : "error");
+            elements.prompt.disabled = false;
+            elements.prompt.focus();
+            break;
+        default:
+            break;
+    }
+    elements.conversation.scrollTop = elements.conversation.scrollHeight;
+}
+async function connectStream() {
+    if (!state.session || state.connecting || state.stream)
+        return;
+    const generation = state.generation;
+    state.connecting = true;
+    markStep("stream", "active");
+    setConnection("Connecting", "connecting");
+    const stream = state.session.connect({
+        reconnect: true,
+        onEvent: handleStreamEvent,
+        onStateChange(connectionState) {
+            if (generation !== state.generation || state.stream !== stream)
+                return;
+            if (connectionState === "connecting") {
+                setConnection("Connecting", "connecting");
+            }
+            else if (connectionState === "reconnecting") {
+                setConnection("Reconnecting", "connecting");
+            }
+            else if (connectionState === "connected") {
+                markStep("stream", "complete");
+                if (!state.busy)
+                    setConnection("Ready", "ready");
+            }
+        },
+        onError(error) {
+            if (generation !== state.generation || state.stream !== stream)
+                return;
+            setConnection(error.message || "Reconnecting", "connecting");
+        },
+    });
+    state.stream = stream;
+    stream.closed.finally(() => {
+        if (state.stream === stream)
+            state.stream = null;
+    });
+    try {
+        await stream.ready;
+        if (generation !== state.generation || state.stream !== stream) {
+            stream.close();
+            return;
+        }
+        markStep("stream", "complete");
+        setConnection("Ready", "ready");
+    }
+    catch (error) {
+        if (generation === state.generation) {
+            setConnection(error.message || "Connection failed", "error");
+        }
+        throw error;
+    }
+    finally {
+        state.connecting = false;
+    }
+}
+async function submit(prompt) {
+    const value = prompt.trim();
+    const files = [...state.pendingFiles];
+    if ((!value && !files.length) || state.busy)
+        return;
+    const generation = state.generation;
+    addMessage("user", [
+        value,
+        files.length ? `Attached: ${files.map((file) => file.name).join(", ")}` : "",
+    ]
+        .filter(Boolean)
+        .join("\n"));
+    elements.prompt.value = "";
+    resizePrompt();
+    syncSendState();
+    setBusy(true);
+    startActivity("Starting…");
+    try {
+        if (!(await ensureSession(generation)))
+            return;
+        await connectStream();
+        if (generation !== state.generation)
+            return;
+        if (files.length)
+            startActivity("Uploading…");
+        markStep("append", "active");
+        const sent = await state.session.send({
+            input: value,
+            files,
+            messageId: uuidv7(),
+            metadata: {
+                arenaVisitId: state.visitId,
+                submissionSource: "chat_input",
+            },
+        });
+        if (generation !== state.generation)
+            return;
+        sent.attachments.forEach(addArtifact);
+        markStep("append", "complete");
+        clearPendingFiles();
+    }
+    catch (error) {
+        if (generation !== state.generation)
+            return;
+        stopActivity();
+        addMessage("assistant", error.message, "error");
+        setBusy(false);
+        setConnection("Request failed", "error");
+    }
+}
+async function cancelTurn() {
+    if (!state.session) {
+        stopActivity();
+        setBusy(false);
+        setConnection("Ready", "ready");
+        return;
+    }
+    try {
+        await state.session.cancel();
+    }
+    finally {
+        stopActivity();
+        setBusy(false);
+        setConnection("Ready", "ready");
+    }
+}
+function resizePrompt() {
+    elements.prompt.style.height = "auto";
+    elements.prompt.style.height = `${Math.min(elements.prompt.scrollHeight, 180)}px`;
+}
+function newChat() {
+    state.generation += 1;
+    stopActivity();
+    state.stream?.close();
+    state.stream = null;
+    state.connecting = false;
+    clearPendingFiles();
+    clearConversation();
+    setBusy(false);
+    enterDraft();
+    if (location.pathname !== "/") {
+        history.pushState(null, "", "/");
+    }
+    elements.prompt.focus();
+}
+async function initialize() {
+    state.sessionId = sessionFromLocation();
+    const token = state.sessionId
+        ? localStorage.getItem(sessionTokenKey(state.sessionId)) || ""
+        : "";
+    try {
+        const config = await arena.getConfig();
+        elements.modelName.textContent = config.model;
+        if (!state.sessionId) {
+            enterDraft();
+            return;
+        }
+        if (!token) {
+            forgetSession(state.sessionId);
+            history.replaceState(null, "", "/");
+            enterDraft();
+            return;
+        }
+        state.session = arena.sessions.resume({
+            sessionId: state.sessionId,
+            token,
+        });
+        elements.taskId.textContent = state.sessionId.slice(0, 18);
+        rememberSession();
+        await loadHistory();
+        connectStream();
+    }
+    catch (error) {
+        setConnection("Connection failed", "error");
+        addMessage("assistant", error.message, "error");
+    }
+}
+elements.composer.addEventListener("submit", (event) => {
+    event.preventDefault();
+    submit(elements.prompt.value);
+});
+elements.addFiles.addEventListener("click", () => {
+    if (!state.busy)
+        elements.fileInput.click();
+});
+elements.fileInput.addEventListener("change", () => {
+    addPendingFiles(Array.from(elements.fileInput.files || []));
+    elements.fileInput.value = "";
+});
+elements.prompt.addEventListener("input", () => {
+    resizePrompt();
+    syncSendState();
+});
+elements.prompt.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        elements.composer.requestSubmit();
+    }
+});
+elements.stop.addEventListener("click", cancelTurn);
+elements.newChat.addEventListener("click", newChat);
+elements.sidebarToggle?.addEventListener("click", () => {
+    setSidebarExpanded(!elements.sidebar?.classList.contains("is-expanded"));
+});
+elements.mobileSidebarToggle?.addEventListener("click", () => {
+    setSidebarExpanded(!elements.sidebar?.classList.contains("is-expanded"));
+});
+elements.modeToggle?.addEventListener("click", (event) => {
+    event.stopPropagation();
+    toggleModeMenu();
+});
+elements.modeMenu?.addEventListener("click", (event) => {
+    const option = event.target instanceof Element ? event.target.closest("[data-mode]") : null;
+    if (!option)
+        return;
+    if (elements.modeLabel)
+        elements.modeLabel.textContent = option.dataset.mode;
+    elements.modeMenu.querySelectorAll("[data-mode]").forEach((candidate) => {
+        candidate.classList.toggle("is-selected", candidate === option);
+    });
+    closeModeMenu();
+});
+elements.dismissBanner?.addEventListener("click", () => {
+    if (elements.announcement)
+        elements.announcement.hidden = true;
+});
+elements.hidePromo?.addEventListener("click", () => {
+    const promo = elements.hidePromo.closest(".agent-promo");
+    if (promo)
+        promo.hidden = true;
+});
+elements.artifactToggle?.addEventListener("click", () => {
+    setArtifactPanelOpen(elements.artifactPanel?.hidden ?? false);
+});
+elements.artifactClose?.addEventListener("click", () => {
+    setArtifactPanelOpen(false);
+});
+document.querySelectorAll("[data-prompt]").forEach((button) => {
+    button.addEventListener("click", () => submit(button.dataset.prompt));
+});
+document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+        closeModeMenu();
+        setArtifactPanelOpen(false);
+        if (matchMedia("(max-width: 767px)").matches) {
+            setSidebarExpanded(false);
+        }
+    }
+    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        newChat();
+    }
+});
+document.addEventListener("click", (event) => {
+    if (elements.modeMenu &&
+        !elements.modeMenu.hidden &&
+        !elements.modeMenu.contains(event.target) &&
+        !elements.modeToggle?.contains(event.target)) {
+        closeModeMenu();
+    }
+});
+window.addEventListener("beforeunload", () => {
+    state.stream?.close();
+});
+setSidebarExpanded(localStorage.getItem("arena-sidebar-expanded") === "true");
+closeModeMenu();
+setArtifactPanelOpen(false);
+syncSendState();
+initialize();
+//# sourceMappingURL=app.js.map