{% if sample_mode %}
<!-- Sample-data banner. Deliberately NOT dismissable and NOT JS-driven: every
     number on screen in this mode is synthetic, so the label must be present
     in the first painted frame and must stay there. -->
<div id="cm-sample-banner" role="status" style="display:flex; align-items:center; gap:10px; padding:9px 16px; background:#3b2f0b; border-bottom:2px solid #eab308; color:#fde68a; font-size:13px; font-weight:600;">
  <span style="font-size:15px;" aria-hidden="true">⚠</span>
  <span style="flex:1;">{{ sample_banner }}</span>
  <code style="background:rgba(0,0,0,0.28); padding:2px 7px; border-radius:4px; font-size:12px; font-weight:500;">clawmetry</code>
</div>
{% endif %}

<!-- Agent Builder cross-sell pill (dismissable, centered). ONE announcement
     pill at a time: this replaced the desk-device pill, it does not stack. -->
<div id="cm-device-pill" style="display:none; justify-content:center; align-items:center; padding:8px 16px; background:#0b0d12; border-bottom:1px solid rgba(124,140,255,0.18);">
  <a href="https://build.clawmetry.com/?utm_source=oss-dashboard&utm_medium=pill" target="_blank" rel="noopener" style="display:inline-flex; align-items:center; gap:8px; padding:6px 15px; border-radius:999px; background:rgba(124,140,255,0.12); border:1px solid rgba(124,140,255,0.4); color:#a5b4ff; font-size:13px; font-weight:600; text-decoration:none;">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="flex-shrink:0;"><path d="M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8L12 2z"/></svg>
    <span data-i18n="banners.agent_builder_pill">New: Agent Builder · describe your agent, we build it, host it, you watch every move</span> →
  </a>
  <button onclick="dismissDevicePill()" title="Dismiss" aria-label="Dismiss" style="background:transparent; border:none; color:#6b7280; cursor:pointer; margin-left:10px; font-size:18px; line-height:1; padding:0 4px;">×</button>
</div>
<script>
function dismissDevicePill(){ try{ localStorage.setItem('cm_ab_pill_dismissed','1'); }catch(e){} var p=document.getElementById('cm-device-pill'); if(p) p.style.display='none'; }
(function(){ try{ if(!localStorage.getItem('cm_ab_pill_dismissed')){ var p=document.getElementById('cm-device-pill'); if(p) p.style.display='flex'; } }catch(e){} })();
</script>

<!-- Update Available Banner -->
<div id="update-banner" style="display:none; padding:10px 16px; background:linear-gradient(90deg,#0f3d0f 0%,#1a1a2e 100%); border-bottom:2px solid #22c55e; color:#86efac; font-size:13px; font-weight:600; align-items:center; gap:10px;">
  <span style="font-size:18px;">🚀</span>
  <span id="update-banner-msg" style="flex:1;"></span>
  <label id="update-banner-auto" title="When enabled, new releases install automatically after publication." style="display:none; align-items:center; gap:6px; font-size:12px; color:#86efac; cursor:pointer; user-select:none; white-space:nowrap;">
    <input type="checkbox" id="update-banner-auto-toggle" onchange="toggleAutoUpdate(this.checked)" style="cursor:pointer; accent-color:#16a34a; width:14px; height:14px;">
    <span id="update-banner-auto-label">Auto-update</span>
  </label>
  <button id="update-banner-update-btn" onclick="updateFromBanner()" style="
    background:#16a34a;
    color:#fff;
    border:none;
    border-radius:6px;
    padding:4px 12px;
    font-size:12px;
    cursor:pointer;
    font-weight:600;
    ">Update now</button>
  <a id="update-banner-changelog" href="https://github.com/vivekchand/clawmetry/blob/main/CHANGELOG.md" target="_blank" style="
    background:transparent;
    color:#86efac;
    border:1px solid #22c55e80;
    border-radius:6px;
    padding:4px 12px;
    font-size:12px;
    cursor:pointer;
    font-weight:600;
    text-decoration:none;
    " data-i18n="banners.changelog">Changelog</a>
  <button onclick="dismissUpdateBanner()" style="
    background:transparent;
    color:#86efac;
    border:1px solid #22c55e80;
    border-radius:6px;
    padding:4px 10px;
    font-size:11px;
    cursor:pointer;
    " data-i18n="common.dismiss">Dismiss</button>
</div>

<!-- Alert Banner -->
<div id="alert-banner" style="
  display:none;
  padding:10px 16px;
  background:var(--bg-error);
  border-bottom:2px solid var(--text-error);
  color:var(--text-error);
  font-size:13px;
  font-weight:600;
  display:none;
  align-items:center;
  gap:10px;
  ">
  <span style="font-size:18px;">⚠️</span>
  <span id="alert-banner-msg" style="flex:1;"></span>
  <button onclick="ackAllAlerts()" style="
    background:var(--text-error);
    color:#fff;
    border:none;
    border-radius:6px;
    padding:4px 12px;
    font-size:12px;
    cursor:pointer;
    font-weight:600;
    " data-i18n="common.dismiss">Dismiss</button>
  <button id="alert-resume-btn" onclick="resumeGateway()" style="
    display:none;
    background:#16a34a;
    color:#fff;
    border:none;
    border-radius:6px;
    padding:4px 12px;
    font-size:12px;
    cursor:pointer;
    font-weight:600;
    " data-i18n="banners.resume_gateway">Resume Gateway</button>
</div>

<!-- Auto-Pause Banner -->
<!-- Store-unreachable banner (#5534). Shown when a read in this dashboard
     could not reach the collector that holds your data. Without it the tabs
     render "no sessions" / "0 models" over a full store, which reads as data
     loss. -->
<div id="store-unreachable-banner" style="
  display:none;
  padding:10px 16px;
  background:#78350f;
  border-bottom:2px solid #f59e0b;
  color:#fde68a;
  font-size:13px;
  font-weight:600;
  align-items:center;
  gap:10px;
  ">
  <span style="font-size:16px;">⚠</span>
  <span id="store-unreachable-banner-msg" style="flex:1;" data-i18n="banners.store_unreachable">ClawMetry cannot reach the collector on this machine. Some screens may be incomplete. ClawMetry will try the connection again.</span>
  <button type="button" onclick="cmRetryStoreRead()" style="
    background:#b45309;
    color:#fff;
    border:none;
    border-radius:6px;
    padding:4px 12px;
    font-size:12px;
    cursor:pointer;
    font-weight:600;
    " data-i18n="common.retry">Retry</button>
</div>

<div id="paused-banner" style="
  display:none;
  padding:10px 16px;
  background:#7f1d1d;
  border-bottom:2px solid #ef4444;
  color:#fecaca;
  font-size:13px;
  font-weight:700;
  align-items:center;
  gap:10px;
  ">
  <span style="font-size:18px;">⏸</span>
  <span id="paused-banner-msg" style="flex:1;"></span>
  <button onclick="dismissPausedBanner()" style="
    background:#991b1b;
    color:#fff;
    border:none;
    border-radius:6px;
    padding:4px 12px;
    font-size:12px;
    cursor:pointer;
    font-weight:600;
    " data-i18n="common.dismiss">Dismiss</button>
</div>

<!-- Upgrade Impact Banner -->
<div id="upgrade-banner" style="
  display:none;
  padding:10px 16px;
  background:linear-gradient(90deg,#1e3a5f 0%,#1a1a2e 100%);
  border-bottom:2px solid #3b82f6;
  color:#93c5fd;
  font-size:13px;
  font-weight:500;
  align-items:center;
  gap:10px;
  ">
  <span style="font-size:16px;">🚀</span>
  <span id="upgrade-banner-msg" style="flex:1;"></span>
  <button onclick="switchTab('version-impact')" style="
    background:#3b82f6;
    color:#fff;
    border:none;
    border-radius:6px;
    padding:4px 12px;
    font-size:12px;
    cursor:pointer;
    font-weight:600;
    " data-i18n="banners.view_details">View Details</button>
  <button onclick="dismissUpgradeBanner()" style="
    background:transparent;
    color:#93c5fd;
    border:1px solid #3b82f680;
    border-radius:6px;
    padding:4px 10px;
    font-size:11px;
    cursor:pointer;
    " data-i18n="common.dismiss">Dismiss</button>
</div>

<!-- Expired-License / Expired-Trial Banner -->
<!-- Shown when /api/entitlement reports an EXPIRED trial or paid license. -->
<!-- The paywall modal's CTA is "Start 7-day free trial", which is a dead -->
<!-- end for someone whose trial already ended; this banner is the honest -->
<!-- next step: buy a license (or paste one they already bought). -->
<!-- Trigger: checkLicenseExpiry() in app.js. Dismiss lasts 24h. -->
<div id="license-expired-banner" style="
  display:none;
  padding:14px 18px;
  border-bottom:2px solid #E5443A;
  font-size:13px;
  font-weight:600;
  align-items:center;
  gap:14px;
  background:linear-gradient(90deg,#3a0d0b 0%,#1a1a2e 100%);
  color:#fca5a5;
  flex-wrap:wrap;
  ">
  <span style="font-size:18px;">⏳</span>
  <span id="license-expired-msg" style="flex:1;min-width:240px;" data-i18n="banners.trial_expired_msg">
    Your 7-day trial has ended. Keep every runtime with a Pro license.
  </span>
  <a id="license-expired-cta" href="https://clawmetry.com/pricing?deploy=self&source=expired-banner" target="_blank" rel="noopener" style="
    background:#E5443A;
    color:#fff;
    border:none;
    border-radius:6px;
    padding:6px 14px;
    font-size:12px;
    cursor:pointer;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    " data-i18n="banners.get_license">Get a license</a>
  <a id="license-expired-have-key" href="#" onclick="if(window.shmShowLicense){shmShowLicense();}return false;" style="
    color:#94a3b8;
    font-size:12px;
    text-decoration:underline;
    white-space:nowrap;
    " data-i18n="banners.have_license_key">I have a license key</a>
  <button onclick="dismissLicenseExpiredBanner()" style="
    background:transparent;
    color:#94a3b8;
    border:1px solid #334155;
    border-radius:6px;
    padding:5px 12px;
    font-size:12px;
    cursor:pointer;
    " data-i18n="common.dismiss">Dismiss</button>
</div>

<!-- Onboarding / First-Heartbeat Banner (closes #1604) -->
<!-- Shown on fresh signup until the first heartbeat lands. Auto-refreshes -->
<!-- every 5s. After 90s with no heartbeat we switch to an actionable error -->
<!-- so a stuck daemon doesn't masquerade as "loading forever". -->
<div id="onboarding-banner" style="
  display:none;
  padding:12px 16px;
  border-bottom:2px solid #3b82f6;
  font-size:13px;
  font-weight:600;
  align-items:center;
  gap:12px;
  background:linear-gradient(90deg,#0c1d3a 0%,#1a1a2e 100%);
  color:#93c5fd;
  ">
  <span id="onboarding-banner-spinner" style="
    display:inline-block;
    width:14px;
    height:14px;
    border:2px solid #3b82f680;
    border-top-color:#60a5fa;
    border-radius:50%;
    animation:onboarding-spin 0.9s linear infinite;
    flex-shrink:0;
    "></span>
  <span id="onboarding-banner-msg" style="flex:1;">Setting up your node. First check-in usually arrives in about 30 seconds.</span>
  <span id="onboarding-banner-eta" style="font-size:11px;font-weight:400;color:#60a5fa;opacity:0.85;"></span>
</div>
<style>
@keyframes onboarding-spin {
  to { transform: rotate(360deg); }
}
</style>

<!-- Heartbeat Gap Banner -->
<div id="heartbeat-banner" style="
  display:none;
  padding:10px 16px;
  border-bottom:2px solid #f59e0b;
  font-size:13px;
  font-weight:600;
  align-items:center;
  gap:10px;
  background:#451a03;
  color:#fbbf24;
  ">
  <span style="font-size:18px;">💔</span>
  <span id="heartbeat-banner-msg" style="flex:1;"></span>
  <!-- This banner literally says "check if agent is running" and, until now,
       gave you no way to check — the same dead end the generic alert banner
       had (founder, 2026-08-15: "I just see dismiss button -- so what??").
       Overview is where liveness is answered. -->
  <a href="#" onclick="switchTab('overview');return false;" style="
    color:#fde68a;
    text-decoration:underline;
    font-size:12px;
    margin-right:8px;
    font-weight:600;
    " data-i18n="app.check_agent">Check agent →</a>
  <button onclick="dismissHeartbeatBanner()" style="
    background:#92400e;
    color:#fef3c7;
    border:none;
    border-radius:6px;
    padding:4px 12px;
    font-size:12px;
    cursor:pointer;
    font-weight:600;
    " data-i18n="common.dismiss">Dismiss</button>
</div>

<!-- Stuck Session Banner -->
<div id="stuck-session-banner" style="
  display:none;
  padding:10px 16px;
  border-bottom:2px solid #ef4444;
  font-size:13px;
  font-weight:600;
  align-items:center;
  gap:10px;
  background:#450a0a;
  color:#fca5a5;
  ">
  <span style="font-size:18px;">⏳</span>
  <span id="stuck-session-banner-msg" style="flex:1;"></span>
  <a id="stuck-session-banner-link" href="#" onclick="switchTab('overview');document.getElementById('stuck-session-banner').style.display='none';_stuckCount=0;_updateStuckBadge();" style="
    background:#991b1b;
    color:#fff;
    border:none;
    border-radius:6px;
    padding:4px 12px;
    font-size:12px;
    cursor:pointer;
    font-weight:600;
    text-decoration:none;
    " data-i18n="banners.view_session">View Session</a>
  <button onclick="(typeof dismissStuckBanner==='function')?dismissStuckBanner():(function(){document.getElementById('stuck-session-banner').style.display='none';_stuckCount=0;_updateStuckBadge();})();" style="
    background:#7f1d1d;
    color:#fecaca;
    border:none;
    border-radius:6px;
    padding:4px 10px;
    font-size:11px;
    cursor:pointer;
    " data-i18n="common.dismiss">Dismiss</button>
</div>

<!-- Budget Cap Banner -->
<div id="budget-cap-banner" style="
  display:none;
  padding:10px 16px;
  border-bottom:2px solid #f59e0b;
  font-size:13px;
  font-weight:600;
  align-items:center;
  gap:10px;
  background:#3f2a06;
  color:#fbbf24;
  ">
  <span style="font-size:18px;">⚠️</span>
  <span id="budget-cap-banner-msg" style="flex:1;"></span>
  <!-- A spend alarm with no route to the spend. Same dead end as above. -->
  <a href="#" onclick="switchTab('usage');return false;" style="
    color:#fde68a;
    text-decoration:underline;
    font-size:12px;
    margin-right:8px;
    font-weight:600;
    " data-i18n="app.see_spending">See spending →</a>
  <button onclick="document.getElementById('budget-cap-banner').style.display='none'" style="
    background:#92400e;
    color:#fef3c7;
    border:none;
    border-radius:6px;
    padding:4px 12px;
    font-size:12px;
    cursor:pointer;
    font-weight:600;
    " data-i18n="common.dismiss">Dismiss</button>
</div>

<!-- Sync Status Banner (PRD-sync-status.md) — first-install transparency.
     Hidden by default; cm_sync_init() decides whether to show based on
     /api/local/health.event_count (cold install) or /api/sync-progress.status. -->
<div id="sync-status-banner" style="display:none;padding:12px 18px;background:linear-gradient(90deg,#1a2342 0%,#0f1422 100%);border-bottom:1px solid #334074;color:#cbd5e1;font-size:13px;font-family:Inter,system-ui,sans-serif;">
  <div style="display:flex;align-items:center;gap:14px;flex-wrap:wrap;">
    <span aria-hidden="true" style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(99,102,241,0.18);">
      <span id="sync-status-icon" style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#6366f1;animation:cm-sync-pulse 1.4s ease-in-out infinite;"></span>
    </span>
    <div style="flex:1;min-width:220px;">
      <div id="sync-status-title" style="font-weight:600;color:#e2e8f0;">Syncing your AI agents</div>
      <div id="sync-status-subtitle" style="font-size:11px;color:#94a3b8;margin-top:2px;">Discovering sessions and indexing events. Your data will appear shortly.</div>
    </div>
    <div id="sync-status-stepper" style="display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;"></div>
    <button id="sync-status-toggle" type="button" onclick="cmSyncToggleDetails()" aria-expanded="false" style="background:transparent;border:1px solid #334074;color:#94a3b8;border-radius:6px;padding:4px 12px;font-size:11px;cursor:pointer;">Show details</button>
    <button id="sync-status-hide" type="button" onclick="_cmSyncDismiss()" data-i18n-title="banners.hide_banner" title="Hide this banner" data-i18n-aria-label="banners.hide_sync_banner" aria-label="Hide sync banner" style="background:transparent;border:1px solid #334074;color:#94a3b8;border-radius:6px;padding:4px 10px;font-size:11px;cursor:pointer;" data-i18n="banners.hide">Hide</button>
  </div>
  <div id="sync-status-details" style="display:none;margin-top:10px;padding:8px 12px;background:rgba(15,23,42,0.6);border:1px solid #1e293b;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#94a3b8;max-height:180px;overflow:auto;"></div>
  <div id="sync-status-error" style="display:none;margin-top:10px;padding:10px 12px;background:rgba(127,29,29,0.25);border:1px solid #7f1d1d;border-radius:6px;font-size:12px;color:#fecaca;"></div>
</div>
<style>
  @keyframes cm-sync-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.4 } }
  .cm-sync-step { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:14px; font-size:11px; font-weight:500; background:rgba(30,41,59,0.5); color:#64748b; border:1px solid rgba(51,64,116,0.5); white-space:nowrap; }
  .cm-sync-step[data-state="done"]   { color:#86efac; border-color:#16a34a55; background:rgba(20,83,45,0.25); }
  .cm-sync-step[data-state="active"] { color:#a5b4fc; border-color:#6366f1aa; background:rgba(67,56,202,0.25); }
  .cm-sync-step[data-state="error"]  { color:#fecaca; border-color:#7f1d1d; background:rgba(127,29,29,0.35); }
</style>

<!-- Cursor account link. Shown ONLY on the Cursor or Grok Bot runtime views,
     because that is where the question it answers occurs to a user: a Grok Bot
     delegates work to Cursor cloud agents that are billed to YOU, and this is
     the opt-in that lets ClawMetry price it.

     The key is write-only: it is POSTed once and never rendered back. There is
     deliberately no "show key" control, the field is a password input, and the
     status endpoint returns only a masked form. -->
<div id="cm-cursor-link" style="display:none; padding:10px 16px; background:#0b0d12; border-bottom:1px solid rgba(124,140,255,0.18); color:#c7d2fe; font-size:13px; align-items:center; gap:10px; flex-wrap:wrap;">
  <span id="cm-cursor-link-msg" style="flex:1; min-width:260px;"></span>
  <input id="cm-cursor-key" type="password" autocomplete="off" spellcheck="false"
         placeholder="Cursor API key"
         style="display:none; padding:6px 10px; border-radius:6px; border:1px solid rgba(124,140,255,0.35); background:#11131b; color:#e5e7eb; font-size:13px; min-width:220px;">
  <button id="cm-cursor-connect" style="display:none; padding:6px 14px; border-radius:6px; border:1px solid rgba(124,140,255,0.5); background:rgba(124,140,255,0.15); color:#a5b4ff; font-size:13px; font-weight:600; cursor:pointer;">Connect</button>
  <button id="cm-cursor-refresh" style="display:none; padding:6px 14px; border-radius:6px; border:1px solid rgba(124,140,255,0.35); background:transparent; color:#a5b4ff; font-size:13px; cursor:pointer;">Refresh usage</button>
  <button id="cm-cursor-dismiss" title="Dismiss" aria-label="Dismiss" style="background:transparent; border:none; color:#6b7280; cursor:pointer; font-size:18px; line-height:1; padding:0 4px;">×</button>
</div>
<script>
(function () {
  var RUNTIMES = { cursor: 1, grok_bot: 1 };
  function scope() {
    try {
      var u = new URL(window.location.href);
      return (u.searchParams.get('runtime') || u.searchParams.get('scope') || '').trim();
    } catch (e) { return ''; }
  }
  var box = document.getElementById('cm-cursor-link');
  if (!box || !RUNTIMES[scope()]) return;
  try { if (localStorage.getItem('cm_cursor_link_dismissed')) return; } catch (e) {}

  var msg = document.getElementById('cm-cursor-link-msg');
  var field = document.getElementById('cm-cursor-key');
  var connect = document.getElementById('cm-cursor-connect');
  var refresh = document.getElementById('cm-cursor-refresh');

  function show(html, wantKey, wantRefresh) {
    msg.innerHTML = html;
    field.style.display = wantKey ? '' : 'none';
    connect.style.display = wantKey ? '' : 'none';
    refresh.style.display = wantRefresh ? '' : 'none';
    box.style.display = 'flex';
  }

  function render(s) {
    if (!s || s.supported === false) return;               // hosted: no local key store
    if (s.connected) {
      show('Cursor connected (<b>' + (s.maskedKey || '') + '</b>) · '
           + (s.delegatedAgents || 0) + ' delegated agent(s) seen locally.', false, true);
    } else {
      show('<b>Price the work delegated to Cursor.</b> A bot hands tasks to Cursor '
           + 'cloud agents billed to your account. Connect it and that spend is '
           + 'attributed back here. <span style="opacity:.75">Needs a paid Cursor '
           + 'plan; the key is stored locally, never synced.</span>', true, false);
    }
  }

  function load() {
    fetch('/api/cursor/status')
      .then(function (r) { return r.json(); })
      .then(render)
      .catch(function () { /* absent endpoint: stay hidden */ });
  }

  connect.onclick = function () {
    var v = (field.value || '').trim();
    if (!v) { field.focus(); return; }
    connect.disabled = true;
    // POSTed in the body, never a query string, and never rendered back.
    fetch('/api/cursor/connect', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ apiKey: v })
    }).then(function (r) { return r.json(); })
      .then(function (out) {
        field.value = '';                                   // clear immediately
        connect.disabled = false;
        if (out && out.connected) { load(); } else { show('Could not store the key.', true, false); }
      }).catch(function () { connect.disabled = false; });
  };

  refresh.onclick = function () {
    refresh.disabled = true;
    refresh.textContent = 'Refreshing…';
    fetch('/api/cursor/sync', { method: 'POST' })
      .then(function (r) { return r.json(); })
      .then(function () { refresh.disabled = false; refresh.textContent = 'Refresh usage'; load(); })
      .catch(function () { refresh.disabled = false; refresh.textContent = 'Refresh usage'; });
  };

  document.getElementById('cm-cursor-dismiss').onclick = function () {
    try { localStorage.setItem('cm_cursor_link_dismissed', '1'); } catch (e) {}
    box.style.display = 'none';
  };

  load();
})();
</script>