### Execute Commands with MobileWorld and Qwen3.5

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/blog_posts/MobileWorld Update Can Frontier Models Really Control Your Phone.md

Execute a command using MobileWorld with the Qwen3.5 model hosted on Dashscope. This example demonstrates setting an alarm on the device.

```bash
uv run mw test "set an alarm at 8:00 am" \
  --agent-type general_e2e \
  --model_name qwen3.5-plus \
  --llm_base_url https://dashscope.aliyuncs.com/compatible-mode/v1 \
  --aw-host http://127.0.0.1:6800 \
  --api_key xxx
```

--------------------------------

### Get Arena Screenshot Blocks

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/arena.html

Selects all screenshot blocks within the arena comparison columns.

```javascript
function arenaScreenshotBlocks() {
  return document.querySelectorAll(
    '#arena-col-a-body .traj-screenshot-block, #arena-col-b-body .traj-screenshot-block'
  );
}
```

--------------------------------

### Bundle Trajectories with Screenshots

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/index.html

This command bundles trajectory logs, including screenshots, into a compressed JSON file. Replace `<run-name>` with your specific run name.

```bash
python site/bundle_trajs.py traj_logs/<run-name>/ --with-screenshots
```

--------------------------------

### Initialize Syntax Highlighting

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/index.html

Initializes the highlight.js library to apply syntax highlighting to code blocks on the page. This should be called after the DOM is fully loaded.

```javascript
hljs.highlightAll();
```

--------------------------------

### Render Task Steps

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/index.html

Iterates through task steps to generate HTML for display. Includes logic for action types, coordinates, text, direction, frame index, user responses, and tool calls.

```javascript
const html = steps.map((step, i) => {
    const pred = step.pred || '';
    const think = step.think || '';
    const response = step.response || '';
    const meta = task.meta;
    const videoPromise = task.video_promise;
    const trajSteps = document.getElementById('traj-steps');
    const trajTaskSelect = document.getElementById('traj-task-select');
    const trajModal = document.getElementById('traj-modal');
    const trajModalClose = document.getElementById('traj-modal-close');
    const trajModalBg = document.getElementById('traj-modal-bg');
    const taskNames = Object.keys(tasks);
    let renderGeneration = 0;

    function renderTask(taskName) {
        const task = tasks[taskName];
        const steps = task.steps;
        const meta = task.meta;
        const videoPromise = task.video_promise;
        let html = '';

        const action = step.action || {};
        let actionStr = action.action_type || 'unknown';
        if (action.x !== undefined && action.y !== undefined) {
            actionStr += ` (${action.x}, ${action.y})`;
        }
        if (action.text) {
            actionStr += `: "${action.text}"`;
        }
        if (action.direction) {
            actionStr += ` ${action.direction}`;
        }

        const hasFrame = step.frame_index !== undefined && meta && meta.video_file;
        const screenshotHtml = hasFrame ? `<details class="traj-screenshot-block"><summary>Screenshot</summary><div class="traj-screenshot is-loading"><canvas class="traj-canvas" data-frame="${step.frame_index}" data-step="${i}"></canvas><div class="traj-screenshot-spinner"><i class="fas fa-spinner fa-spin"></i> Loading screenshot…</div></div></details>` : '';
        const askUser = step.ask_user_response ? `<div class="traj-ask-user"><span class="traj-ask-label">User Response</span><span>${escHtml(step.ask_user_response)}</span></div>` : '';
        const toolCall = step.tool_call ? `<div class="traj-tool-call"><span class="traj-tool-label">Tool Call</span><pre>${escHtml(JSON.stringify(step.tool_call, null, 2))}</pre></div>` : '';

        return ` <div class="traj-step"> <div class="traj-step-header"> <span class="traj-step-num">Step ${step.step || i + 1}</span> <span class="traj-action-badge">${escHtml(actionStr)}</span> </div> ${screenshotHtml} ${think ? `<details class="traj-think"><summary>Thinking</summary><div class="traj-think-body">${escHtml(think)}</div></details>` : ''} ${response ? `<div class="traj-response">${escHtml(response)}</div>` : ''} ${askUser} ${toolCall} </div> `;
    }).join('');

    if (task.token_usage) {
        const tu = task.token_usage;
        html += ` <div class="traj-token-summary"> Token usage: ${(tu.prompt_tokens || 0).toLocaleString()} prompt · ${(tu.completion_tokens || 0).toLocaleString()} completion · ${(tu.total_tokens || 0).toLocaleString()} total </div> `;
    }
    trajSteps.innerHTML = html;
    updateExpandAllLabel();

    if (videoPromise && meta) {
        const myGen = ++renderGeneration;
        (async () => {
            const videoEl = await videoPromise;
            if (myGen !== renderGeneration) return;
            if (!videoEl) {
                trajSteps.querySelectorAll('.traj-screenshot.is-loading .traj-screenshot-spinner').forEach(el => {
                    el.innerHTML = '<i class="fas fa-image"></i> Screenshot unavailable';
                });
                return;
            }
            const canvases = trajSteps.querySelectorAll('.traj-canvas');
            for (const canvas of canvases) {
                if (myGen !== renderGeneration) return;
                const fi = parseInt(canvas.dataset.frame);
                const si = parseInt(canvas.dataset.step);
                const stepAction = steps[si]?.action || null;
                await renderScreenshotCanvas(canvas, videoEl, fi, meta.fps, meta, stepAction);
                canvas.parentElement?.classList.remove('is-loading');
            }
        })();
    }
}

trajTaskSelect.onchange = () => renderTask(trajTaskSelect.value);
if (taskNames.length > 0) renderTask(taskNames[0]);

```

--------------------------------

### Model-Specific Prompt Adaptation for Seed-2.0-Pro

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/blog_posts/MobileWorld Update Can Frontier Models Really Control Your Phone.md

This snippet shows an adaptation of a prompt from the OSWorld repository for the Seed-2.0-Pro model. It is designed to better match the expected input format for this specific model.

```python
from mm_agents.seed_agent import SeedAgent

# ... other imports and setup ...

agent = SeedAgent(model_name="seed-2.0-pro", ...)

```

--------------------------------

### Trajectory Viewer Initialization

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/index.html

Initializes elements for the trajectory viewer modal and sets up event listeners for closing it.

```javascript
const trajModal = document.getElementById('traj-modal');
const trajModalClose = document.getElementById('traj-modal-close');
const trajModalBg = trajModal.querySelector('.modal-background');
const trajModelName = document.getElementById('traj-model-name');
const trajTaskSelect = document.getElementById('traj-task-select');
const trajResultBadge = document.getElementById('traj-result-badge');
const trajLoading = document.getElementById('traj-loading');
const trajSteps = document.getElementById('traj-steps');
const trajCache = {};
```

--------------------------------

### Render Step Details

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/arena.html

Generates HTML for a single step in the Arena trajectory, including action details, screenshots, predictions, user responses, and tool calls. Use this to display individual steps within a comparison.

```javascript
function renderStep(i, step, side, pred, meta) {
  const action = step.action;
  let actionStr = '';
  if (action.x !== undefined && action.y !== undefined) actionStr += ` (${action.x}, ${action.y})
`;
  if (action.text) actionStr += `: "${action.text}"
`;
  if (action.direction) actionStr += ` ${action.direction}
`;
  const hasFrame = step.frame_index !== undefined && meta && meta.video_file;
  const screenshotHtml = hasFrame ? `<details class="traj-screenshot-block"><summary>Screenshot</summary><div class="traj-screenshot is-loading"><canvas class="traj-canvas" data-frame="${step.frame_index}" data-step="${i}" data-side="${side}"></canvas><div class="traj-screenshot-spinner"><i class="fas fa-spinner fa-spin"></i> Loading screenshot…</div></div></details>` : '';
  const askUser = step.ask_user_response ? `<div class="traj-ask-user"><span class="traj-ask-label">User Response</span><span>${escHtml(step.ask_user_response)}</span></div>` : '';
  const toolCall = step.tool_call ? `<div class="traj-tool-call"><span class="traj-tool-label">Tool Call</span><pre>${escHtml(JSON.stringify(step.tool_call, null, 2))}</pre></div>` : '';
  return ` <div class="traj-step" data-step="${i}" data-side="${side}"> <div class="traj-step-header"> <span class="traj-step-num">Step ${step.step || i + 1}</span> <span class="traj-action-badge">${escHtml(actionStr)}</span> </div> ${screenshotHtml} ${pred ? `<div class="traj-response">${escHtml(pred)}</div>` : ''} ${askUser} ${toolCall} </div> `;
}).join('')
}
```

--------------------------------

### Run Evaluation Command

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/index.html

Use this command to run the evaluation for your agent. Ensure you replace `<your_agent_module>` with the actual module name of your agent.

```bash
uv run mw eval --agent <your_agent_module> --tasks all
```

--------------------------------

### Apply URL Parameters for Step Navigation

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/arena.html

Parses URL parameters to find and highlight a specific task step. Scrolls the step into view with a smooth animation and a temporary highlight. Handles invalid or out-of-range step numbers.

```javascript
const applyUrlParams = async () => {
  const params = new URLSearchParams(window.location.search);
  const task = params.get('task');
  const stepRaw = params.get('step');

  if (task == null) {
    // No task specified, nothing to do.
    return;
  }

  // If step is specified, scroll it into view + flash highlight. if (stepRaw != null) { const stepIdx = parseInt(stepRaw, 10) - 1; // URL is 1-indexed if (!Number.isFinite(stepIdx) || stepIdx < 0) { console.warn(`[arena] Invalid step in URL: ${stepRaw}`); return; } // Prefer the left (Model A) pane; fall back to right. let stepEl = document.querySelector( `#arena-col-a-body .traj-step[data-step="${stepIdx}"]` ); if (!stepEl) { stepEl = document.querySelector( `#arena-col-b-body .traj-step[data-step="${stepIdx}"]` ); } if (!stepEl) { console.warn(`[arena] Step ${stepRaw} out of range for task ${task}`); return; } // Defer slightly so layout settles after renderComparison. setTimeout(() => { stepEl.scrollIntoView({ block: 'center', behavior: 'smooth' }); stepEl.classList.add('url-target-step'); setTimeout(() => stepEl.classList.remove('url-target-step'), 2000); }, 100); } }
}

applyUrlParams().catch(err => { console.warn('[arena] applyUrlParams failed:', err); });
```

--------------------------------

### General End-to-End Prompt Structure

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/blog_posts/MobileWorld Update Can Frontier Models Really Control Your Phone.md

This prompt structure is designed for direct coordinate output and compatibility across various LLMs. It uses a structured action space with JSON schemas and a Thought-Action format for parsing and debugging.

```python
{
    "action_type": "click",
    "coordinate": [x, y]
}
```

--------------------------------

### Configure ADB PATH on macOS

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/blog_posts/MobileWorld Update Can Frontier Models Really Control Your Phone.md

Add the ADB platform-tools directory to your system's PATH environment variable on macOS. This allows you to run ADB commands from any terminal location.

```bash
# macOS — assuming the extracted directory is ~/Downloads/platform-tools
export PATH=${PATH}:~/Downloads/platform-tools
```

--------------------------------

### Render Comparison View

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/arena.html

Renders the detailed comparison view for a given task, including goals, model names, step counts, and trajectory steps. It also initiates the rendering of side canvases and token usage.

```javascript
function renderComparison(taskName) {
  const comp = document.getElementById('arena-comparison');
  comp.style.display = '';
  document.getElementById('arena-comparison-title').textContent = taskName;
  const taskA = dataA[taskName];
  const taskB = dataB[taskName];

  // Task goal
  const goalEl = document.getElementById('arena-task-goal');
  const goalA = taskA?.traj?.[0]?.task_goal;
  const goalB = taskB?.traj?.[0]?.task_goal;
  const goal = goalA || goalB;
  goalEl.style.display = goal ? '' : 'none';
  if (goal) goalEl.innerHTML = `<span class="traj-goal-label">Task Goal</span>${escHtml(goal)}`;

  // Column headers
  document.getElementById('arena-col-a-name').textContent = modelInfoA.model;
  document.getElementById('arena-col-b-name').textContent = modelInfoB.model;

  const oA = taskOutcomes[taskName].a;
  const oB = taskOutcomes[taskName].b;
  setBadge('arena-col-a-badge', oA);
  setBadge('arena-col-b-badge', oB);

  document.getElementById('arena-col-a-steps').textContent = `${(taskA?.traj || []).length} steps`;
  document.getElementById('arena-col-b-steps').textContent = `${(taskB?.traj || []).length} steps`;

  // Render steps
  document.getElementById('arena-col-a-body').innerHTML = renderSteps(taskA, 'a');
  document.getElementById('arena-col-b-body').innerHTML = renderSteps(taskB, 'b');

  updateArenaExpandAllLabel();

  // Render screenshot frames. Each side awaits its own video promise
  // so screenshots can appear independently as videos arrive.
  // The generation counter prevents stale frames from being painted
  // into a different task's canvases if the user switches tasks
  // before the video finishes downloading.
  const myGen = ++arenaRenderGeneration;
  async function renderSideCanvases(containerId, videoPromise, meta, task) {
    if (!videoPromise || !meta || !task) return;
    const container = document.getElementById(containerId);
    const vid = await videoPromise;
    if (myGen !== arenaRenderGeneration) return;
    if (!vid) {
      container.querySelectorAll('.traj-screenshot.is-loading .traj-screenshot-spinner').forEach(el => {
        el.innerHTML = '<i class="fas fa-image"></i> Screenshot unavailable';
      });
      return;
    }
    const canvases = container.querySelectorAll('.traj-canvas');
    for (const canvas of canvases) {
      if (myGen !== arenaRenderGeneration) return;
      const fi = parseInt(canvas.dataset.frame);
      const si = parseInt(canvas.dataset.step);
      const action = task.traj[si]?.action || null;
      await renderScreenshotCanvas(canvas, vid, fi, meta.fps, meta, action);
      canvas.parentElement?.classList.remove('is-loading');
    }
  }
  renderSideCanvases('arena-col-a-body', videoPromiseA, trajMetaA, taskA);
  renderSideCanvases('arena-col-b-body', videoPromiseB, trajMetaB, taskB);

  // Token usage
  renderTokens('arena-col-a-tokens', taskA?.token_usage);
  renderTokens('arena-col-b-tokens', taskB?.token_usage);

  comp.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
```

--------------------------------

### Open Detail Modal

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/index.html

Opens a modal window to display detailed information about a selected leaderboard row. It populates the modal header and body with model-specific data.

```javascript
function openDetailModal(row) {
  const overallScore = getFilteredScore(row);
  const na = '<span class="dm-empty">—</span>';
  const categoryLabel = row.category;
  modalHeader.innerHTML = 
 ` <span class="dm-pill">${categoryLabel}</span> <h2 class="dm-title">${row.model}</h2> <p class="dm-subtitle">${row.organization} · ${formatDate(row.date)}</p> `;
  function scoreRow(label, value) {
    const display = value !== null && value !== undefined ? value.toFixed(1) : null;
    const pct = display !== null ? Math.min(value / 100 * 100, 100) : 0;
    return `<div class="dm-row"> <span class="dm-row-label">${label}</span> <span class="dm-bar-wrap"><span class="dm-bar" style="width:${pct}%"></span></span> <span class="dm-row-val">${display !== null ? display : na}</span> </div>`;
  }
  const linkDisplay = row.link ? (() => {
    try {
      return new URL(row.link).hostname;
    } catch {
      return row.link;
    }
  })() : null;
  modalBody.innerHTML = 
 ` <div class="dm-metric"> <span class="dm-metric-num">${overallScore !== null ? overallScore.toF`
        } // Note: This snippet appears truncated in the source. Only the provided code is included.
      ] // Note: This snippet appears truncated in the source. Only the provided code is included.
    } // Note: This snippet appears truncated in the source. Only the provided code is included.
  ] // Note: This snippet appears truncated in the source. Only the provided code is included.
} // Note: This snippet appears truncated in the source. Only the provided code is included.

```

--------------------------------

### Apply URL Parameters for Deep Linking

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/arena.html

Parses URL parameters to configure the Arena interface, including model selection, task filtering, and step navigation. This function is crucial for sharing specific Arena states.

```javascript
async function applyUrlParams() {
  const params = new URLSearchParams(window.location.search);
  const modelA = params.get('modelA') || params.get('model');
  const modelB = params.get('modelB');
  const task = params.get('task');
  const filter = params.get('filter');
  const category = params.get('category');
  const stepRaw = params.get('step');
  const knownModel = (n) => n && modelsWithTraj.some(m => m.model === n);
  if (modelA) {
    if (knownModel(modelA)) selA.value = modelA;
    else console.warn(`[arena] Unknown modelA in URL: ${modelA}`);
  }
  if (modelB) {
    if (knownModel(modelB)) selB.value = modelB;
    else console.warn(`[arena] Unknown modelB in URL: ${modelB}`);
  }
  if (!selA.value || !selB.value || selA.value === selB.value) return;
  try {
    await onModelChange();
  } catch (err) {
    console.warn(' [arena] onModelChange failed during URL-param expansion:', err);
    return;
  }
  if (document.getElementById('arena-content').style.display === 'none') return;
  if (filter) {
    if (['pp', 'pf', 'fp', 'ff'].includes(filter)) {
      currentFilter = filter;
      highlightMatrixCell(currentFilter);
    } else {
      console.warn(`[arena] Invalid filter in URL: ${filter}`);
    }
  }
  if (category) {
    const catSelect = document.getElementById('arena-category-filter');
    const hasCat = Array.from(catSelect.options).some(o => o.value === category);
    if (hasCat) catSelect.value = category;
    else console.warn(`[arena] Unknown category in URL: ${category}`);
  }
  renderTaskList();
  if (task) {
    const safeTask = task.replace(/
```

--------------------------------

### Toggle All Trajectory Steps

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/index.html

Manages the expand/collapse state of all trajectory screenshot blocks and updates the 'Expand all' button label accordingly.

```javascript
const trajExpandAllBtn = document.getElementById('traj-expand-all');
function updateExpandAllLabel() {
  const blocks = trajSteps.querySelectorAll('.traj-screenshot-block');
  if (blocks.length === 0) {
    trajExpandAllBtn.style.display = 'none';
    return;
  }
  trajExpandAllBtn.style.display = '';
  const allOpen = [...blocks].every(b => b.open);
  trajExpandAllBtn.textContent = allOpen ? 'Collapse all' : 'Expand all';
}
trajExpandAllBtn.addEventListener('click', () => {
  const blocks = trajSteps.querySelectorAll('.traj-screenshot-block');
  if (blocks.length === 0) return;
  const allOpen = [...blocks].every(b => b.open);
  blocks.forEach(b => {
    b.open = !allOpen;
  });
  updateExpandAllLabel();
});
trajSteps.addEventListener('toggle', (e) => {
  if (e.target.classList?.contains('traj-screenshot-block'))
    updateExpandAllLabel();
}, true);
```

--------------------------------

### Render Trajectory Steps

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/arena.html

Generates HTML for rendering the steps of a trajectory for a given side (model). Handles cases with no trajectory data.

```javascript
function renderSteps(task, side) {
  if (!task || !task.traj || task.traj.length === 0) {
    return '<div class="arena-empty">No trajectory data.</div>';
  }
  const meta = side === 'a' ? trajMetaA : trajMetaB;
  return task.traj.map((step, i) => {
    const pred = step.prediction || '';
    const action = step.action || {};
    let actionStr = action.action_type || 'unknown';
    if (action.x
```

--------------------------------

### Clone MobileWorld Repository

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/blog_posts/MobileWorld Update Can Frontier Models Really Control Your Phone.md

Clone the latest version of the MobileWorld code from its GitHub repository.

```bash
git clone https://github.com/Tongyi-MAI/MobileWorld.git
```

--------------------------------

### Check Connected Android Devices with ADB

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/blog_posts/MobileWorld Update Can Frontier Models Really Control Your Phone.md

Verify that your Android phone is successfully connected to your computer via USB and recognized by ADB. This command lists all attached devices.

```bash
# Check connected devices

```

```bash
adb devices
```

--------------------------------

### Loading and Caching Video Elements

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/index.html

Loads video elements from a URL, caches them for reuse, and ensures they are ready for playback. It handles metadata loading and potential errors.

```javascript
// Point the <video> at the URL directly so frame seeks issue
// range requests for just that frame's bytes (mp4 is +faststart),
// letting screenshots render as soon as their bytes arrive instead
// of waiting for the whole file to download.
const videoCache = {};
function loadVideo(url) {
  if (videoCache[url]) return videoCache[url];
  const promise = (async () => {
    const video = document.createElement('video');
    video.preload = 'auto';
    video.muted = true;
    video.playsInline = true;
    video.src = url;
    await new Promise((res, rej) => {
      video.addEventListener('loadedmetadata', res, { once: true });
      video.addEventListener('error', rej, { once: true });
    });
    return video;
  })();
  videoCache[url] = promise;
  return promise;
}
```

--------------------------------

### Initialize Arena Task Row Click Listener

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/arena.html

Adds click event listeners to arena task rows to manage active row highlighting and render the comparison view.

```javascript
document.querySelectorAll('.arena-task-row').forEach(row => {
  row.addEventListener('click', () => {
    container.querySelectorAll('.arena-task-row').forEach(r => r.classList.remove('arena-task-row--active'));
    row.classList.add('arena-task-row--active');
    renderComparison(row.dataset.task);
  });
});
```

--------------------------------

### Toggle All Screenshot Blocks

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/arena.html

Handles the click event for the 'Expand all'/'Collapse all' button, toggling the open state of all screenshot blocks and updating the button label.

```javascript
arenaExpandAllBtn.addEventListener('click', () => {
  const blocks = arenaScreenshotBlocks();
  if (blocks.length === 0) return;
  const allOpen = [...blocks].every(b => b.open);
  blocks.forEach(b => {
    b.open = !allOpen;
  });
  updateArenaExpandAllLabel();
});
```

--------------------------------

### Open Trajectory Modal and Load Data

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/index.html

Opens a modal to display trajectory data, loads data from cache or via fetch, and populates task selection dropdowns. Handles loading states and errors.

```javascript
async function openTrajModal(trajFile, modelName) {
  trajModelName.textContent = modelName + ' — Trajectories';
  trajTaskSelect.innerHTML = '';
  trajSteps.innerHTML = '';
  trajResultBadge.textContent = '';
  trajExpandAllBtn.style.display = 'none';
  trajLoading.style.display = 'flex';
  trajModal.classList.add('is-active');
  const loadingText = document.getElementById('traj-loading-text');
  const progressWrap = document.getElementById('traj-progress-wrap');
  const progressBar = document.getElementById('traj-progress-bar');
  loadingText.textContent = 'Loading trajectories…';
  progressWrap.style.display = 'none';
  progressBar.style.width = '0%';
  let data;
  if (trajCache[trajFile]) {
    data = trajCache[trajFile];
  } else {
    try {
      progressWrap.style.display = '';
      loadingText.textContent = 'Downloading trajectory data…';
      data = await fetchGzipJson(trajFile, (pct) => {
        progressBar.style.width = (pct * 100).toFixed(1) + '%';
      });
      trajCache[trajFile] = data;
    } catch (err) {
      trajLoading.innerHTML = `<i class="fas fa-exclamation-triangle"></i> Failed to load: ${err.message}`;
      return;
    }
  }
  trajLoading.style.display = 'none';
  const meta = data._meta || null;
  let videoPromise = null;
  if (meta && meta.video_file) {
    const videoUrl = meta.video_file.startsWith('http') ? meta.video_file : trajFile.replace(/[^/]+$/, '') + meta.video_file;
    videoPromise = loadVideo(videoUrl).catch(e => {
      console.warn('Video load failed:', e);
      return null;
    });
  }
  let renderGeneration = 0;
  const taskNames = Object.keys(data).filter(k => k !== '_meta').sort();
  taskNames.forEach(name => {
    const opt = document.createElement('option');
    opt.value = name;
    opt.textContent = name;
    trajTaskSelect.appendChild(opt);
  });
  function renderTask(taskName) {
    const task = data[taskName];
    if (!task) return;
    if (task.result) {
      const scoreMatch = task.result.match(/score:\s*([\d.]+)/);
      const score = scoreMatch ? parseFloat(scoreMatch[1]) : null;
      trajResultBadge.textContent = score === 1 ? 'Pass' : score === 0 ? 'Fail' : task.result.split('\n')[0];
      trajResultBadge.className = 'traj-result ' + (score === 1 ? 'traj-result--pass' : 'traj-result--fail');
    } else {
      trajResultBadge.textContent = '';
      trajResultBadge.className = 'traj-result';
    }
    const steps = task.traj || [];
    const taskGoal = steps.length > 0 && steps[0].task_goal ? `<div class="traj-goal"><span class="traj-goal-label">Task Goal</span>${escHtml(steps[0].task_goal)}</div>` : '';
    let html = taskGoal + steps.map((step, i) => {
      const pred = step.prediction || '';
      let think = '', response = '';
      const thinkMatch = pred.match(/<think>([\s\S]*)<\/think>/);
      if (thinkMatch) {
        think = thinkMatch[1].trim();
        response = pred.slice(thinkMatch.index + thinkMatch[0].length).trim();
      } else {
        response
```

--------------------------------

### Render Task List with Filtering

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/arena.html

Renders a list of tasks based on current filters (matrix outcome and category). Displays task names, outcomes (pass/fail badges), and step counts for each model. Updates the task count display.

```javascript
function getFilteredTasks() {
  const catFilter = document.getElementById('arena-category-filter').value;
  return allTaskNames.filter(name => {
    const o = taskOutcomes[name];
    if (currentFilter) {
      const [ea, eb] = currentFilter.split('');
      if ((ea === 'p') !== o.a || (eb === 'p') !== o.b) return false;
    }
    if (catFilter !== 'all' && getTaskCategory(name) !== catFilter) return false;
    return true;
  });
}
function renderTaskList() {
  const tasks = getFilteredTasks();
  const container = document.getElementById('arena-tasklist');
  document.getElementById('arena-task-count').textContent = `(${tasks.length})`;
  if (tasks.length === 0) {
    container.innerHTML = '<div class="arena-empty">No tasks match this filter.</div>';
    return;
  }
  container.innerHTML = tasks.map(name => {
    const o = taskOutcomes[name];
    const badgeA = o.a ? '<span class="arena-mini-badge arena-mini-badge--pass">Pass</span>' : '<span class="arena-mini-badge arena-mini-badge--fail">Fail</span>';
    const badgeB = o.b ? '<span class="arena-mini-badge arena-mini-badge--pass">Pass</span>' : '<span class="arena-mini-badge arena-mini-badge--fail">Fail</span>';
    const stepsA = (dataA[name]?.traj || []).length;
    const stepsB = (dataB[name]?.traj || []).length;
    return ` <button class="arena-task-row" data-task="${escHtml(name)}"> <span class="arena-task-name">${escHtml(name)}</span> <span class="arena-task-outcomes"> <span class="arena-task-model-result"> <span class="arena-task-model-label">A</span>${badgeA}<span class="arena-task-steps">${stepsA} steps</span> </span> <span class="arena-task-model-result"> <span class="arena-task-model-label">B</span>${badgeB}<span class="arena-task-steps">${stepsB} steps</span> </span> </span> </button> `;
  }).join('');
  container.querySelectorAll('.arena-task-r
```

--------------------------------

### Fetching and Decompressing Gzip JSON

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/index.html

Asynchronously fetches a gzipped JSON file from a URL, providing progress updates. It decompresses the content and parses it into a JavaScript object.

```javascript
async function fetchGzipJson(url, onProgress) {
  const resp = await fetch(url);
  if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
  const total = parseInt(resp.headers.get('content-length') || '0', 10);
  let loaded = 0;
  const rawChunks = [];
  const rawReader = resp.body.getReader();
  while (true) {
    const { done, value } = await rawReader.read();
    if (done) break;
    rawChunks.push(value);
    loaded += value.byteLength;
    if (onProgress && total) onProgress(loaded / total);
  }
  const rawBlob = new Blob(rawChunks);
  const ds = new DecompressionStream('gzip');
  const decompressed = rawBlob.stream().pipeThrough(ds);
  const reader = decompressed.getReader();
  const chunks = [];
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    chunks.push(value);
  }
  const blob = new Blob(chunks);
  const text = await blob.text();
  return JSON.parse(text);
}
```

--------------------------------

### Render Leaderboard Rows

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/index.html

Renders the table body rows based on the sorted data. It constructs HTML for each row, including rank, category, model details, and conditional cells for various metrics and actions.

```javascript
tbody.innerHTML = sorted.map((row, index) => {
  const rank = index + 1;
  const isFirst = rank === 1;
  const rowClass = isFirst ? 'first-rank-row' : '';
  const starIcon = isFirst ? ' ⭐' : '';
  const modelName = row.model;
  // Category badge class — driven by leaderboard.json `category`
  const categoryClass = CATEGORY_BADGE_CLASS[row.category] || 'tag is-light';
  const categoryLabel = row.category;
  // Calculate display score for Overall column (always computed dynamically)
  const overallScore = getFilteredScore(row);
  const overallDisplay = overallScore !== null ? overallScore.toFixed(1) : '-';
  // Build cells based on which columns are visible
  const overallCell = showOverall ? `<td class="has-text-centered"><strong class="overall-score">${overallDisplay}</strong></td>` : '';
  const guiCell = guiOn ? `<td class="has-text-centered">${row.gui_only !== null ? row.gui_only : '-'}</td>` : '';
  const userCell = userOn ? `<td class="has-text-centered">${row.user_int !== null ? row.user_int : '-'}</td>` : '';
  const mcpCell = mcpOn ? `<td class="has-text-centered">${row.mcp !== null ? row.mcp : '-'}</td>` : '';
  const trajCell = row.traj_file ? `<td class="has-text-centered"><button class="traj-btn" data-traj-file="${row.traj_file}" data-model="${row.model}" title="View trajectories"><i class="fas fa-route"></i></button></td>` : `<td></td>`;
  const arenaCell = row.traj_file ? `<td class="has-text-centered"><a class="arena-link-btn" href="arena?model=${encodeURIComponent(row.model)}" title="Compare in Arena"><i class="fas fa-scale-balanced"></i></a></td>` : `<td></td>`;
  return `
 <tr class="${rowClass}"> <td class="has-text-centered"><strong>${rank}</strong></td> <td><span class="category-badge ${categoryClass}">${categoryLabel}</span></td> <td class="model-cell"> <div class="model-name"><strong><a href="#" class="model-name-link" data-index="${sorted.indexOf(row)}">${modelName}</a></strong></div> <div class="model-org">${row.organization}</div> <div class="model-date"><i class="far fa-calendar"></i> ${formatDate(row.date)}</div> </td> ${overallCell} ${guiCell} ${userCell} ${mcpCell} ${trajCell} ${arenaCell} </tr> 
`;
 }).join('');
```

--------------------------------

### Opening and Closing Detail Modal

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/index.html

Handles the logic for displaying and hiding a detailed modal view. It populates the modal with data and manages event listeners for closing.

```javascript
function openDetailModal(row, linkDisplay, na) {
  modalBody.innerHTML = ` <div class="dm-metric-row"> <span class="dm-metric-value">${row.overall.toFixed(1)}</span> <span class="dm-metric-unit">% overall</span> </div> <div class="dm-scores"> ${scoreRow('GUI-Only', row.gui_only)} ${scoreRow('User-Int.', row.user_int)} ${scoreRow('MCP', row.mcp)} </div> <hr class="dm-hr"> <dl class="dm-dl"> <div class="dm-dl-row"> <dt>Max steps</dt><dd>${row.max_steps}</dd> </div> <div class="dm-dl-row"> <dt>Runs</dt><dd>${row.runs}</dd> </div> <div class="dm-dl-row"> <dt>Reference</dt><dd>${row.link ? 
egardless<a href="${row.link}" target="_blank" rel="noopener">${linkDisplay}</a>
 : na}</dd> </div> </dl> <hr class="dm-hr"> <dl class="dm-dl"> <div class="dm-dl-row"> <dt>Agent type</dt><dd>${agentTypeHtml(row.agent_type) ?? na}</dd> </div> <div class="dm-dl-row"> <dt>Images in history</dt><dd>${row.num_images_in_history ?? na}</dd> </div> <div class="dm-dl-row dm-dl-row--block"> <dt>Notes</dt><dd>${row.notes ?? na}</dd> </div> </dl> ${row.traj_file ? 
egardless <hr class="dm-hr"> <div class="dm-actions"> <button class="traj-open-btn" data-traj-file="${row.traj_file}" data-model="${row.model}"> <i class="fas fa-route"></i> View Trajectories </button> <a class="traj-open-btn" href="arena?model=${encodeURIComponent(row.model)}"> <i class="fas fa-scale-balanced"></i> Compare in Arena </a> </div>
` : ''} `; modal.classList.add('is-active'); const trajBtn = modalBody.querySelector('.traj-open-btn'); if (trajBtn) { trajBtn.addEventListener('click', () => { closeDetailModal(); openTrajModal(trajBtn.dataset.trajFile, trajBtn.dataset.model); }); } }
function closeDetailModal() {
  modal.classList.remove('is-active');
}
```

--------------------------------

### Screenshot Block Toggle Event Listener

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/arena.html

Listens for 'toggle' events on screenshot blocks within the arena columns to update the expand/collapse all button label.

```javascript
['arena-col-a-body', 'arena-col-b-body'].forEach(id => {
  document.getElementById(id).addEventListener('toggle', (e) => {
    if (e.target.classList?.contains('traj-screenshot-block')) updateArenaExpandAllLabel();
  }, true);
});
```

--------------------------------

### Screenshot Click-to-Zoom

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/arena.html

Adds an event listener to enable click-to-zoom functionality for screenshot canvases. This creates an overlay with a larger canvas when a screenshot is clicked.

```javascript
document.addEventListener('click', (e) => {
  const canvas = e.target.closest('.traj-canvas');
  if (!canvas) return;
  const overlay = document.createElement('div');
  overlay.className = 'traj-screenshot-overlay';
  const big = document.createElement('canvas');
  big.width = canvas.width * 2;
  big.height = canvas.height * 2;
  const ctx = big.getContext('2d');
  ctx.drawImage(canvas, 0, 0, big.width, big.height);
  overlay.appendChild(big);
  overlay.addEventListener('click', () => overlay.remove());
  document.body.appendChild(overlay);
});
```

--------------------------------

### Update Arena Expand All Button Label

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/arena.html

Updates the text of the 'Expand all' button based on the current open state of screenshot blocks. Hides the button if no blocks are present.

```javascript
function updateArenaExpandAllLabel() {
  const blocks = arenaScreenshotBlocks();
  if (blocks.length === 0) {
    arenaExpandAllBtn.style.display = 'none';
    return;
  }
  arenaExpandAllBtn.style.display = '';
  const allOpen = [...blocks].every(b => b.open);
  arenaExpandAllBtn.textContent = allOpen ? 'Collapse all' : 'Expand all';
}
```

--------------------------------

### Render Token Counts

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/arena.html

Updates the text content of an element to display prompt, completion, and total token counts. Call this function when token data is available.

```javascript
function renderTokens(id, tu) {
  const el = document.getElementById(id);
  if (!tu) {
    el.textContent = '';
    return;
  }
  el.textContent = `${(tu.prompt_tokens || 0).toLocaleString()} prompt · ${(tu.completion_tokens || 0).toLocaleString()} completion · ${(tu.total_tokens || 0).toLocaleString()} total`;
}
```

--------------------------------

### Draw Action Overlay on Canvas

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/index.html

Draws visual indicators on a canvas based on user actions like clicks or drags. Handles scaling for different display resolutions.

```javascript
function drawActionOverlay(ctx, action, scaleX, scaleY) {
  const actionType = action.action_type;
  if (['click', 'double_tap', 'long_press'].includes(actionType)) {
    const x = action.x * scaleX;
    const y = action.y * scaleY;
    const r = 16 * scaleX;
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2);
    ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
    ctx.fill();
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 2;
    ctx.stroke();
  } else if (actionType === 'drag') {
    const sx = action.start_x * scaleX, sy = action.start_y * scaleY;
    const ex = action.end_x * scaleX, ey = action.end_y * scaleY;
    if (sx != null && sy != null && ex != null && ey != null) {
      ctx.beginPath();
      ctx.moveTo(sx, sy);
      ctx.lineTo(ex, ey);
      ctx.strokeStyle = 'rgba(0, 100, 255, 0.7)';
      ctx.lineWidth = 3 * scaleX;
      ctx.stroke();
      const r = 12 * scaleX;
      ctx.beginPath();
      ctx.arc(sx, sy, r, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(0, 180, 0, 0.6)';
      ctx.fill();
      ctx.beginPath();
      ctx.arc(ex, ey, r, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(255, 0, 0, 0.6)';
      ctx.fill();
    }
  }
}
```

--------------------------------

### Modal Close Event Listeners

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/index.html

Sets up event listeners to close the detail modal when the close button, background, or Escape key is pressed.

```javascript
modalClose.addEventListener('click', closeDetailModal);
modalBg.addEventListener('click', closeDetailModal);
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    if (trajModal.classList.contains('is-active')) closeTrajModal();
    else if (submitModal.classList.contains('is-active')) submitModal.classList.remove('is-active');
    else closeDetailModal();
  }
});
```

--------------------------------

### Leaderboard Filtering and Sorting Logic

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/index.html

JavaScript code for managing the leaderboard's interactive features, including filtering by type and tasks, and sorting columns. It also handles loading and rendering leaderboard data.

```javascript
document.addEventListener('DOMContentLoaded', async function () {
  const tbody = document.getElementById('leaderboard-body');

  // Toggle-group filter state
  const filterState = {
    type: new Set(['general', 'specialized']),
    tasks: new Set(['gui-only']),
  };

  function isTypeActive(t) {
    return filterState.type.has(t);
  }

  function isTaskActive(t) {
    return filterState.tasks.has(t);
  }

  document.querySelectorAll('.lb-toggle-group').forEach(group => {
    const groupName = group.dataset.group;
    group.querySelectorAll('.lb-toggle').forEach(btn => {
      btn.addEventListener('click', () => {
        const val = btn.dataset.value;
        const state = filterState[groupName];
        if (state.has(val)) {
          state.delete(val);
        } else {
          state.add(val);
        }
        syncToggleUI(group, groupName);
        handleFilterChange(groupName);
      });
    });
  });

  function syncToggleUI(group, groupName) {
    const state = filterState[groupName];
    group.querySelectorAll('.lb-toggle').forEach(btn => {
      btn.classList.toggle('is-active', state.has(btn.dataset.value));
    });
  }

  // Visual styling per category (sourced from leaderboard.json `category`).
  const CATEGORY_BADGE_CLASS = {
    'Agentic': 'tag is-info is-light',
    'General': 'tag is-link is-light',
    'Specialized': 'tag is-warning is-light',
  };

  let leaderboardData = [];
  let filteredData = [];
  let currentSort = { key: 'overall', dir: 'desc' };
  let taskCounts = { 'GUI-Only': 0, 'User-Int.': 0, 'MCP': 0, 'Total': 0 };

  // Load data from JSON
  try {
    const response = await fetch('leaderboard.json');
    const data = await response.json();
    leaderboardData = data.results;
    taskCounts = data.task_counts || taskCounts;
    filteredData = [...leaderboardData];
    updateTableHeader();
    renderTable();
  } catch (error) {
    tbody.innerHTML = '<tr><td colspan="9" class="has-text-centered">Failed to load leaderboard data.</td></tr>';
    console.error('Error loading leaderboard:', error);
  }

  // Sortable header click handler
  document.querySelectorAll('.sortable-header').forEach(header => {
    header.addEventListener('click', () => {
      const sortKey = header.dataset.sort;
      if (currentSort.key === sortKey) {
        currentSort.dir = currentSort.dir === 'desc' ? 'asc' : 'desc';
      } else {
        currentSort.key = sortKey;
        currentSort.dir = 'desc';
      }
      // ... rest of the sorting and rendering logic
    });
  });

  // Placeholder for remaining leaderboard logic
  function updateTableHeader() {}
  function renderTable() {}
  function handleFilterChange(groupName) {}
});
```

--------------------------------

### Copy Citation Functionality

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/index.html

Handles copying BibTeX citation data to the clipboard when a specific button is clicked. It provides visual confirmation after a successful copy operation.

```javascript
document.addEventListener('DOMContentLoaded', () => {
  const copyCiteBtn = document.getElementById('copy-cite-btn');
  if (copyCiteBtn) {
    copyCiteBtn.addEventListener('click', (e) => {
      e.stopPropagation();
      const bibtex = copyCiteBtn.closest('.dropdown-item').querySelector('code').textContent;
      navigator.clipboard.writeText(bibtex).then(() => {
        const originalHTML = copyCiteBtn.innerHTML;
        copyCiteBtn.innerHTML = '<span class="icon"><i class="fas fa-check"></i></span><span>Copied!</span>';
        copyCiteBtn.classList.add('is-success');
        setTimeout(() => {
          copyCiteBtn.innerHTML = originalHTML;
          copyCiteBtn.classList.remove('is-success');
        }, 2000);
      });
    });
  }
});
```

--------------------------------

### Drawing Action Overlay on Canvas

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/index.html

Draws an overlay representing an action onto a canvas context. This function is intended for visualizing actions within a trajectory or simulation.

```javascript
function drawActionOverlay(ctx, action, scaleX, scaleY) {
  const actionT
```

--------------------------------

### Set Badge for Model Outcome

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/arena.html

Sets the text and class of a badge element to indicate whether a model passed or failed.

```javascript
function setBadge(id, pass) {
  const el = document.getElementById(id);
  el.textContent = pass ? 'Pass' : 'Fail';
  el.className = 'arena-col-badge ' + (pass ? 'arena-col-badge--pass' : 'arena-col-badge--fail');
}
```

--------------------------------

### Hide Comparison View

Source: https://github.com/tongyi-mai/mobileworld/blob/main/site/arena.html

Hides the comparison view and the expand/collapse all button.

```javascript
function hideComparison() {
  document.getElementById('arena-comparison').style.display = 'none';
  document.getElementById('arena-expand-all').style.display = 'none';
}
```