export function renderStatusHtml() {
    return `<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>VisionClaw Status</title>
  <script src="https://telegram.org/js/telegram-web-app.js"></script>
  <style>
    :root {
      --tg-theme-bg-color: #ffffff;
      --tg-theme-text-color: #000000;
      --tg-theme-hint-color: #999999;
      --tg-theme-secondary-bg-color: #f0f0f0;
      --tg-theme-section-bg-color: #ffffff;
      --tg-theme-accent-text-color: #3390ec;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: var(--tg-theme-bg-color);
      color: var(--tg-theme-text-color);
      padding: 0 16px 24px;
      -webkit-font-smoothing: antialiased;
    }
    .header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 20px 0 16px;
    }
    .header-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      flex-shrink: 0;
    }
    .header-icon.online { background: #e8f5e9; }
    .header-icon.offline { background: #fce4ec; }
    .header h1 {
      font-size: 20px;
      font-weight: 700;
      line-height: 1.2;
    }
    .header .subtitle {
      font-size: 13px;
      color: var(--tg-theme-hint-color);
      margin-top: 2px;
    }
    .card {
      background: var(--tg-theme-section-bg-color);
      border-radius: 12px;
      margin-bottom: 12px;
      overflow: hidden;
      border: 0.5px solid rgba(0,0,0,0.06);
    }
    .card-title {
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      color: var(--tg-theme-hint-color);
      padding: 16px 16px 8px;
      letter-spacing: 0.5px;
    }
    .card-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 16px;
      font-size: 15px;
      min-height: 44px;
    }
    .card-row + .card-row {
      border-top: 0.5px solid rgba(0,0,0,0.06);
    }
    .card-row .label {
      color: var(--tg-theme-text-color);
    }
    .card-row .value {
      color: var(--tg-theme-hint-color);
      text-align: right;
      max-width: 60%;
      word-break: break-word;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
    }
    .badge.busy { background: #fff3e0; color: #e65100; }
    .badge.idle { background: #e8f5e9; color: #2e7d32; }
    .service-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      font-size: 15px;
    }
    .service-row + .service-row {
      border-top: 0.5px solid rgba(0,0,0,0.06);
    }
    .service-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .service-dot.ok { background: #4caf50; }
    .service-dot.err { background: #f44336; }
    .service-name { flex: 1; }
    .service-detail {
      font-size: 13px;
      color: var(--tg-theme-hint-color);
    }
    .task-section {
      padding: 12px 16px;
    }
    .task-desc {
      font-size: 14px;
      line-height: 1.5;
      color: var(--tg-theme-text-color);
    }
    .todo-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 16px;
      font-size: 15px;
      line-height: 1.4;
    }
    .todo-item + .todo-item {
      border-top: 0.5px solid rgba(0,0,0,0.06);
    }
    .todo-icon {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      margin-top: 1px;
    }
    .todo-icon.in_progress {
      background: #e3f2fd;
      color: #1565c0;
      animation: pulse 2s infinite;
    }
    .todo-icon.completed {
      background: #e8f5e9;
      color: #2e7d32;
    }
    .todo-icon.pending {
      background: var(--tg-theme-secondary-bg-color);
      color: var(--tg-theme-hint-color);
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    .todo-content { flex: 1; }
    .todo-status {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      margin-bottom: 2px;
    }
    .todo-status.in_progress { color: #1565c0; }
    .todo-status.completed { color: #2e7d32; }
    .todo-status.pending { color: var(--tg-theme-hint-color); }
    .step-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 16px;
      font-size: 14px;
      line-height: 1.4;
    }
    .step-item + .step-item {
      border-top: 0.5px solid rgba(0,0,0,0.06);
    }
    .step-icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      margin-top: 1px;
    }
    .step-icon.action { background: #e3f2fd; }
    .step-icon.result { background: #f3e5f5; }
    .step-content { flex: 1; }
    .step-label {
      font-size: 14px;
      font-weight: 500;
      color: var(--tg-theme-text-color);
    }
    .step-detail {
      font-size: 12px;
      color: var(--tg-theme-hint-color);
      margin-top: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 240px;
    }
    .task-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 16px 0;
    }
    .task-elapsed {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 600;
      color: #e65100;
      background: #fff3e0;
      padding: 3px 8px;
      border-radius: 12px;
    }
    .task-card-body {
      padding: 10px 16px 14px;
    }
    .task-card-body .task-desc {
      font-size: 15px;
      line-height: 1.5;
      color: var(--tg-theme-text-color);
    }
    .progress-shimmer {
      height: 3px;
      background: linear-gradient(90deg, #e3f2fd 25%, #90caf9 50%, #e3f2fd 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
      border-radius: 0 0 12px 12px;
    }
    @keyframes shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .subagent-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 16px;
      font-size: 14px;
      line-height: 1.4;
    }
    .subagent-item + .subagent-item {
      border-top: 0.5px solid rgba(0,0,0,0.06);
    }
    .subagent-icon {
      flex-shrink: 0;
      font-size: 16px;
      margin-top: 1px;
    }
    .subagent-desc { flex: 1; }
    .subagent-status {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
    }
    .subagent-status.running { color: #1565c0; }
    .subagent-status.completed { color: #2e7d32; }
    .subagent-status.failed { color: #f44336; }
    .loading {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 200px;
      color: var(--tg-theme-hint-color);
      font-size: 15px;
    }
    .error-msg {
      color: #f44336;
      text-align: center;
      padding: 32px 16px;
      font-size: 15px;
    }
    .context-bar {
      height: 6px;
      background: var(--tg-theme-secondary-bg-color);
      border-radius: 3px;
      overflow: hidden;
      margin: 4px 16px 12px;
    }
    .context-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 0.3s ease;
    }
    .context-fill.low { background: #4caf50; }
    .context-fill.mid { background: #ff9800; }
    .context-fill.high { background: #f44336; }
    @media (prefers-color-scheme: dark) {
      .card { border-color: rgba(255,255,255,0.08); }
      .card-row + .card-row,
      .service-row + .service-row,
      .todo-item + .todo-item,
      .step-item + .step-item,
      .subagent-item + .subagent-item { border-color: rgba(255,255,255,0.08); }
      .header-icon.online { background: #1b5e20; }
      .header-icon.offline { background: #b71c1c; }
      .todo-icon.in_progress { background: #0d47a1; color: #bbdefb; }
      .todo-icon.completed { background: #1b5e20; color: #c8e6c9; }
      .step-icon.action { background: #0d47a1; }
      .step-icon.result { background: #4a148c; }
      .task-elapsed { background: #e65100; color: #ffe0b2; }
      .progress-shimmer { background: linear-gradient(90deg, #0d47a1 25%, #42a5f5 50%, #0d47a1 75%); background-size: 200% 100%; }
    }
  </style>
</head>
<body>
  <div id="app"><div class="loading">Loading status…</div></div>
  <script>
    const tg = window.Telegram?.WebApp;
    if (tg) {
      tg.ready();
      tg.expand();
    }

    const baseUrl = window.location.origin;

    async function load() {
      try {
        const res = await fetch(baseUrl + '/mini/status.json');
        if (!res.ok) throw new Error('Failed to load');
        const d = await res.json();
        render(d);
      } catch (e) {
        document.getElementById('app').innerHTML =
          '<div class="error-msg">Failed to load status. Please try again.</div>';
      }
    }

    function render(d) {
      const busy = d.busy;
      const statusClass = busy ? 'busy' : 'idle';
      const statusLabel = busy ? 'Busy' : 'Idle';
      const statusIcon = busy ? '⚡' : '✅';
      const iconClass = busy ? 'offline' : 'online';

      let contextPct = 0;
      let contextLabel = '';
      if (d.context) {
        contextPct = d.context.usedPct * 100;
        contextLabel = contextPct.toFixed(1) + '% (' +
          d.context.usedInputTokens.toLocaleString() + ' / ' +
          d.context.contextWindow.toLocaleString() + ')';
      }
      const ctxClass = contextPct < 50 ? 'low' : contextPct < 80 ? 'mid' : 'high';

      let taskHtml = '';
      if (busy && d.taskDescription) {
        let elapsedTag = '';
        if (d.elapsedMs != null) {
          const sec = Math.floor(d.elapsedMs / 1000);
          const m = Math.floor(sec / 60);
          const s = sec % 60;
          elapsedTag = '<span class="task-elapsed">⏱ ' + m + 'm ' + s + 's</span>';
        }
        taskHtml = '<div class="card">' +
          '<div class="task-card-header">' +
          '<span class="card-title" style="padding:0">Current Task</span>' +
          elapsedTag + '</div>' +
          '<div class="task-card-body"><div class="task-desc">' +
          esc(d.taskDescription) + '</div></div>' +
          '<div class="progress-shimmer"></div></div>';
      }

      // Todo list
      let todosHtml = '';
      if (d.todos && d.todos.length > 0) {
        todosHtml = '<div class="card"><div class="card-title">Todo List</div>';
        for (const t of d.todos) {
          const st = t.status || 'pending';
          const icons = { in_progress: '●', completed: '✓', pending: '○' };
          todosHtml += '<div class="todo-item">' +
            '<div class="todo-icon ' + st + '">' + (icons[st] || '○') + '</div>' +
            '<div class="todo-content">' +
            '<div class="todo-status ' + st + '">' + st.replace('_', ' ') + '</div>' +
            esc(t.content) + '</div></div>';
        }
        todosHtml += '</div>';
      }

      // Recent steps
      let stepsHtml = '';
      if (d.recentActions && d.recentActions.length > 0) {
        stepsHtml = '<div class="card"><div class="card-title">Recent Activity</div>';
        for (const step of d.recentActions) {
          const f = friendlyStep(step);
          if (!f) continue;
          stepsHtml += '<div class="step-item">' +
            '<div class="step-icon ' + f.type + '">' + f.icon + '</div>' +
            '<div class="step-content"><div class="step-label">' + esc(f.label) + '</div>' +
            (f.detail ? '<div class="step-detail">' + esc(f.detail) + '</div>' : '') +
            '</div></div>';
        }
        stepsHtml += '</div>';
      }

      // Subagents
      let subagentsHtml = '';
      if (d.subagents && d.subagents.length > 0) {
        const active = d.subagents.filter(function(s) { return s.status === 'running'; });
        const done = d.subagents.filter(function(s) { return s.status !== 'running'; }).slice(-3);
        if (active.length > 0 || done.length > 0) {
          subagentsHtml = '<div class="card"><div class="card-title">Subagents</div>';
          for (const s of active.concat(done)) {
            const sIcon = s.status === 'running' ? '🔄' : s.status === 'completed' ? '✅' : '❌';
            subagentsHtml += '<div class="subagent-item">' +
              '<span class="subagent-icon">' + sIcon + '</span>' +
              '<div class="subagent-desc">' +
              '<div class="subagent-status ' + s.status + '">' + s.status + '</div>' +
              esc(s.description || s.subagentType || 'Subagent') +
              (s.lastActivity ? '<div style="font-size:12px;color:var(--tg-theme-hint-color);margin-top:2px">' + esc(s.lastActivity) + '</div>' : '') +
              '</div></div>';
          }
          subagentsHtml += '</div>';
        }
      }

      let servicesHtml = '';
      if (d.services && d.services.length > 0) {
        servicesHtml = '<div class="card"><div class="card-title">Services</div>';
        for (const s of d.services) {
          const dotClass = s.ok ? 'ok' : 'err';
          servicesHtml += '<div class="service-row">' +
            '<div class="service-dot ' + dotClass + '"></div>' +
            '<span class="service-name">' + esc(s.name) + '</span>' +
            '<span class="service-detail">' + esc(s.detail) + '</span></div>';
        }
        servicesHtml += '</div>';
      }

      document.getElementById('app').innerHTML =
        '<div class="header">' +
          '<div class="header-icon ' + iconClass + '">' + statusIcon + '</div>' +
          '<div><h1>' + esc(d.agentName || 'VisionClaw') + '</h1>' +
          '<div class="subtitle">v' + esc(d.version || '?') + ' · ' + statusLabel + '</div></div></div>' +

        '<div class="card">' +
          '<div class="card-title">System</div>' +
          row('Status', '<span class="badge ' + statusClass + '">' + statusIcon + ' ' + statusLabel + '</span>') +
          row('Uptime', esc(d.uptime || '—')) +
          row('Heartbeat', esc(d.heartbeat || '—')) +
          row('Model', esc(d.model || '—')) +
          row('Provider', esc(d.provider || '—')) +
          row('Runtime', esc(d.runtime || '—')) +
          row('Queued', String(d.queuedMessages ?? 0) + ' message' + ((d.queuedMessages ?? 0) === 1 ? '' : 's')) +
        '</div>' +

        (d.context ? (
          '<div class="card">' +
            '<div class="card-title">Context Window</div>' +
            row('Usage', contextLabel) +
            '<div class="context-bar"><div class="context-fill ' + ctxClass + '" style="width:' + contextPct + '%"></div></div>' +
          '</div>'
        ) : '') +

        taskHtml +
        todosHtml +
        stepsHtml +
        subagentsHtml +
        servicesHtml;
    }

    function row(label, value) {
      return '<div class="card-row"><span class="label">' + esc(label) +
        '</span><span class="value">' + value + '</span></div>';
    }

    function esc(s) {
      if (!s) return '';
      return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    }

    // Map raw tool-call strings to consumer-friendly labels
    var toolLabels = {
      'computer_use_click': ['🖱️', 'Clicked on screen'],
      'computer_use_screenshot': ['📸', 'Took a screenshot'],
      'computer_use_type': ['⌨️', 'Typed text'],
      'computer_use_key': ['⌨️', 'Pressed keys'],
      'computer_use_scroll': ['🔄', 'Scrolled'],
      'computer_use_move': ['🖱️', 'Moved cursor'],
      'computer_use_drag': ['🖱️', 'Dragged item'],
      'notify_user': ['💬', 'Sent you a message'],
      'memory': ['🧠', 'Checked memory'],
      'manage_email': ['📧', 'Managed email'],
      'manage_calendar': ['📅', 'Managed calendar'],
      'manage_drive': ['📁', 'Managed files'],
      'manage_skills': ['🛠️', 'Managed skills'],
      'manage_mcp_servers': ['🔌', 'Managed connections'],
      'manage_totp': ['🔐', 'Handled 2FA code'],
      'wait': ['⏳', 'Waiting'],
      'finish': ['✅', 'Completed task'],
      'upgrade': ['⬆️', 'Checking for updates'],
      'switch_session': ['🔀', 'Switched session'],
      'gemini': ['✨', 'Generated content'],
      'stock_data': ['📈', 'Checked stock data'],
      'remote_desktop': ['🖥️', 'Shared desktop'],
      'memory_transcript_search': ['🔍', 'Searched history'],
      'memory_transcript_detail': ['📖', 'Reviewed history'],
      'transcribe_audio': ['🎤', 'Transcribed audio'],
      'WebFetch': ['🌐', 'Fetched webpage'],
    };

    function friendlyStep(raw) {
      if (!raw) return null;
      var isAction = raw.startsWith('→ ');
      var isResult = raw.startsWith('← ');
      if (!isAction && !isResult) {
        return { icon: '📋', label: raw, detail: '', type: 'action' };
      }
      var rest = raw.substring(2);
      var toolName, detail;
      if (isAction) {
        var paren = rest.indexOf('(');
        toolName = paren > 0 ? rest.substring(0, paren) : rest;
        detail = paren > 0 ? rest.substring(paren + 1).replace(/\\)$/, '') : '';
      } else {
        var colon = rest.indexOf(': ');
        toolName = colon > 0 ? rest.substring(0, colon) : rest;
        detail = colon > 0 ? rest.substring(colon + 2) : '';
      }
      // Also handle Playwright browser tools (prefixed with browser__)
      var displayName = toolName;
      if (toolName.startsWith('browser__')) {
        var browserAction = toolName.replace('browser__', '');
        var browserLabels = {
          'navigate': ['🌐', 'Opened webpage'],
          'click': ['🖱️', 'Clicked in browser'],
          'type': ['⌨️', 'Typed in browser'],
          'screenshot': ['📸', 'Captured browser'],
          'scroll': ['🔄', 'Scrolled browser'],
          'go_back': ['⬅️', 'Went back'],
          'go_forward': ['➡️', 'Went forward'],
          'wait': ['⏳', 'Waited for page'],
          'evaluate': ['⚙️', 'Ran browser script'],
        };
        var bl = browserLabels[browserAction];
        if (bl) return { icon: bl[0], label: isResult ? bl[1] + ' — done' : bl[1], detail: detail, type: isResult ? 'result' : 'action' };
        return { icon: '🌐', label: isResult ? 'Browser action done' : 'Browser action', detail: detail, type: isResult ? 'result' : 'action' };
      }
      // Handle android tools
      if (toolName.startsWith('android_use_')) {
        var androidAction = toolName.replace('android_use_', '');
        var androidLabels = {
          'click': ['👆', 'Tapped on phone'],
          'type': ['⌨️', 'Typed on phone'],
          'scroll': ['🔄', 'Scrolled on phone'],
          'screenshot': ['📱', 'Captured phone screen'],
          'long_press': ['👆', 'Long pressed on phone'],
          'drag': ['👆', 'Dragged on phone'],
          'press': ['📱', 'Pressed phone button'],
          'open': ['📱', 'Opened phone app'],
        };
        var al = androidLabels[androidAction];
        if (al) return { icon: al[0], label: isResult ? al[1] + ' — done' : al[1], detail: detail, type: isResult ? 'result' : 'action' };
        return { icon: '📱', label: isResult ? 'Phone action done' : 'Phone action', detail: detail, type: isResult ? 'result' : 'action' };
      }
      var known = toolLabels[toolName];
      if (known) {
        return { icon: known[0], label: isResult ? known[1] + ' — done' : known[1], detail: detail, type: isResult ? 'result' : 'action' };
      }
      // Unknown tool — just humanize the name
      var humanName = toolName.replace(/_/g, ' ').replace(/\\b\\w/g, function(c) { return c.toUpperCase(); });
      return { icon: isAction ? '⚙️' : '📋', label: isResult ? humanName + ' — done' : humanName, detail: detail, type: isResult ? 'result' : 'action' };
    }

    load();
    setInterval(load, 5000);
  </script>
</body>
</html>`;
}
//# sourceMappingURL=status.js.map