{% extends "base.html" %} {% block title %}Session {{ session.id[:8] }} ·
OpenBrowse{% endblock %} {% block head %}
<style>
  .detail-layout {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 16px;
    height: calc(100vh - 140px);
  }
  .panel {
    background: #111;
    border: 1px solid #222;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .panel-head {
    color: #666;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 12px;
    border-bottom: 1px solid #1a1a1a;
    flex: 0 0 auto;
  }
  .panel-body {
    overflow-y: auto;
    padding: 12px;
    flex: 1 1 auto;
  }
  .browser-panel {
    background: #111;
    border: 1px solid #222;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
  }
  .browser-panel iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
  .no-live {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
  }
  .session-header {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .session-header .mono {
    font-size: 14px;
  }
  .msg-row {
    /* @nonobvious(mirrors): the gutter centres against this band, not against the
       whole entry, which grows when the step is expanded. Both read the same
       value so the timestamp cannot drift off the row it belongs to. */
    --msg-band: 26px;
    --msg-pad-y: 4px;
    font-size: 13px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .msg-body {
    flex: 1;
    min-width: 0;
    padding: var(--msg-pad-y) 8px;
    border-radius: 6px;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .msg-row:hover .msg-body {
    background: #0f0f12;
  }
  .msg-headline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--msg-band);
  }
  .msg-row,
  .msg-time,
  .msg-dur,
  .msg-cat,
  .msg-step {
    cursor: default;
  }
  .msg-summary,
  .msg-cards .card-text {
    cursor: text;
  }
  .msg-time {
    color: #555;
    font-family: monospace;
    font-size: 11px;
    white-space: nowrap;
  }
  .msg-type {
    color: #888;
    font-family: monospace;
    font-size: 11px;
    min-width: 110px;
  }
  .msg-type.browser_action {
    color: #60a5fa;
  }
  .msg-type.browser_action_error {
    color: #ef4444;
  }
  .msg-type.completion {
    color: #22c55e;
  }
  .msg-type.planning {
    color: #eab308;
  }
  .msg-type.result {
    color: #a78bfa;
  }
  .result-box {
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 6px;
    padding: 10px;
    font-family: "SF Mono", "Menlo", monospace;
    font-size: 12px;
    color: #cbd5e1;
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 12px;
  }
  .stat-row {
    display: flex;
    gap: 24px;
    font-size: 13px;
    margin-bottom: 16px;
  }
  .stat-row dt {
    color: #666;
  }
  .stat-row dd {
    color: #e5e5e5;
    font-family: monospace;
  }
  .spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.14);
    border-top-color: #60a5fa;
    animation: spin 0.7s linear infinite;
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  .no-live {
    flex-direction: column;
    gap: 12px;
  }
  .feed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .feed-btn {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #cbd5e1;
    border-radius: 5px;
    font-family: "SF Mono", "Menlo", monospace;
    font-size: 11px;
    padding: 3px 8px;
    cursor: pointer;
  }
  .feed-btn:hover {
    border-color: #444;
    color: #fff;
  }
  .export-wrap {
    position: relative;
  }
  .export-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 5px;
    min-width: 190px;
    z-index: 30;
    overflow: hidden;
  }
  .export-menu .feed-btn {
    border: none;
    border-radius: 0;
    text-align: left;
    padding: 6px 10px;
  }
  .export-menu .feed-btn:hover {
    background: #242424;
  }
  .step-row {
    display: flex;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid #1a1a1a;
    font-size: 13px;
  }
  .step-num {
    color: #555;
    font-family: monospace;
    font-size: 12px;
    min-width: 26px;
    text-align: right;
  }
  .step-text {
    flex: 1;
    color: #d4d4d4;
  }
  .step-row.browser_action_error .step-text {
    color: #f87171;
  }
  .completion-card {
    --cc-accent: 139, 139, 147;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
  }
  .completion-card.hidden {
    display: none;
  }
  .completion-card.success {
    --cc-accent: 34, 197, 94;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.35);
  }
  .completion-card.success .cc-head {
    color: #22c55e;
  }
  .completion-card.failed {
    --cc-accent: 248, 113, 113;
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.35);
  }
  .completion-card.failed .cc-head {
    color: #f87171;
  }
  .completion-card.schema {
    --cc-accent: 245, 158, 11;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.35);
  }
  .completion-card.schema .cc-head {
    color: #f59e0b;
  }
  .completion-card.warning {
    --cc-accent: 245, 158, 11;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.35);
  }
  .completion-card.warning .cc-head {
    color: #f59e0b;
  }
  .cc-sub {
    color: #c6c6cc;
    opacity: 0.9;
    font-size: 12px;
    line-height: 1.5;
    /* Sits directly under the headline text: the 23px matches the fixed
       15px glyph plus the head's 8px gap, so both lines share a left edge.
       The negative top margin swallows the dead space the caret button's
       height adds below the headline's own text line; the right margin keeps
       wrapped lines clear of the caret button's column. */
    margin: -2px 32px 0 23px;
  }
  .completion-card.collapsed .cc-sub {
    display: none;
  }
  .cc-head {
    font-weight: 600;
    font-size: 13px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
  }
  .cc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .cc-glyph {
    flex: 0 0 auto;
    width: 15px;
  }
  .completion-card.collapsed .cc-out {
    display: none;
  }
  .cc-caret {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: rgba(var(--cc-accent), 0.8);
    line-height: 1;
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
    border: 1px solid rgba(var(--cc-accent), 0.28);
    background: rgba(var(--cc-accent), 0.1);
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
  }
  .cc-caret::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-1.5px) rotate(45deg);
    transition: transform 0.18s ease;
  }
  .completion-card:not(.collapsed) .cc-caret::before {
    transform: translateY(1.5px) rotate(225deg);
  }
  .cc-caret:hover {
    color: rgb(var(--cc-accent));
    border-color: rgba(var(--cc-accent), 0.5);
    background: rgba(var(--cc-accent), 0.18);
  }
  .cc-head {
    cursor: pointer;
  }
  .cc-out {
    position: relative;
    margin-top: 14px;
  }
  .cc-out pre {
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: 6px;
    padding: 10px 10px 10px 10px;
    font-family: "SF Mono", "Menlo", monospace;
    font-size: 12px;
    color: #cbd5e1;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    max-height: 40vh;
    overflow: auto;
  }
  .cc-copy {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: #17171a;
    border: 1px solid #26262b;
    border-radius: 6px;
    color: #8b8b93;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
  }
  .cc-copy svg {
    display: block;
    width: 13px;
    height: 13px;
  }
  .cc-copy:hover {
    color: #e5e5e5;
    border-color: #3f3f46;
    background: #1e1e22;
  }
  .msg-left {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    flex: 0 0 auto;
    min-height: calc(var(--msg-band) + var(--msg-pad-y) * 2);
  }
  .msg-time,
  .msg-dur {
    line-height: 1.2;
  }
  .msg-dur {
    color: #64748b;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .msg-step {
    margin-left: auto;
    color: #64748b;
    font-family: monospace;
    font-size: 11px;
    white-space: nowrap;
    flex: 0 0 auto;
    align-self: center;
  }
  .msg-cat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-family: monospace;
    max-width: 150px;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto;
    align-self: center;
  }
  .cat-ico {
    font-size: 10px;
    flex: none;
  }
  .cat-navigation { color: #60a5fa; background: rgba(96, 165, 250, 0.1); }
  .cat-interaction { color: #22d3ee; background: rgba(34, 211, 238, 0.1); }
  .cat-code { color: #a78bfa; background: rgba(167, 139, 250, 0.12); }
  .cat-network { color: #818cf8; background: rgba(129, 140, 248, 0.1); }
  .cat-read { color: #c084fc; background: rgba(192, 132, 252, 0.1); }
  .cat-wait { color: #f59e0b; background: rgba(245, 158, 11, 0.1); }
  .cat-done { color: #34d399; background: rgba(52, 211, 153, 0.12); }
  .cat-error { color: #f87171; background: rgba(248, 113, 113, 0.12); }
  .cat-planning { color: #94a3b8; background: rgba(148, 163, 184, 0.1); }
  .cat-completion { color: #34d399; background: rgba(52, 211, 153, 0.12); }
  .cat-action { color: #94a3b8; background: rgba(148, 163, 184, 0.08); }
  .cat-memory { color: #f472b6; background: rgba(244, 114, 182, 0.1); }
  .cat-schema { color: #fbbf24; background: rgba(251, 191, 36, 0.12); }
  .cat-goal { color: #fca5a5; background: rgba(248, 113, 113, 0.14); }
  .cat-judge { color: #a5b4fc; background: rgba(165, 180, 252, 0.12); }
  .cat-system { color: #cbd5e1; background: rgba(203, 213, 225, 0.1); }
  .cat-reasoning { color: #a1a1aa; background: rgba(161, 161, 170, 0.09); }
  .msg-summary {
    flex: 0 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: text;
    user-select: text;
    min-width: 0;
  }
  .msg-row.expanded .msg-summary {
    -webkit-line-clamp: unset;
    overflow: visible;
    word-break: break-word;
  }
  .msg-caret {
    display: none;
    flex: 0 0 auto;
    margin-left: auto;
    align-self: center;
    color: #8b8b93;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    padding: 6px 9px;
    border-radius: 6px;
    border: 1px solid #26262b;
    background: #17171a;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
  }
  .msg-caret::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform 0.18s ease;
  }
  .msg-row.expanded .msg-caret::before {
    transform: rotate(225deg) translate(-2px, -1px);
  }
  .msg-row.has-overflow .msg-caret {
    display: inline-block;
  }
  .msg-caret:hover {
    color: #e5e5e5;
    border-color: #3f3f46;
    background: #1e1e22;
  }
  .msg-row.expanded .msg-caret {
    color: #cbd5e1;
    border-color: #34343a;
  }
  .cc-outhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0 4px;
    color: #888;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .j-pre {
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
  }
  .j-key { color: #60a5fa; }
  .j-str { color: #a3e635; }
  .j-num { color: #f59e0b; }
  .j-bool { color: #f472b6; }
  .j-null { color: #94a3b8; }
  @keyframes statpulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
  .status-d-running .status-dot { background: #60a5fa; box-shadow: 0 0 6px rgba(96, 165, 250, 0.7); animation: statpulse 1.6s ease-in-out infinite; }
  .status-d-queued .status-dot { background: #9ca3af; }
  .no-live.queued { flex-direction: column; gap: 12px; }
  .queued-dot { width: 12px; height: 12px; border-radius: 50%; background: #9ca3af; animation: qpulse 2s ease-in-out infinite; }
  @keyframes qpulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
  .queued-title { color: #d4d4d8; font-weight: 600; letter-spacing: 0.02em; font-size: 15px; }
  .queued-sub { color: #666; font-size: 13px; max-width: 340px; text-align: center; line-height: 1.5; }
  .status-d-completed .status-dot { background: #34d399; }
  .status-d-attention .status-dot { background: #facc15; }
  .status-d-failed .status-dot { background: #f87171; }
  .status-d-stopped .status-dot { background: #f87171; }
  .msg-code {
    font-family: "SF Mono", "Menlo", monospace;
    font-size: 12px;
    color: #93c5fd;
    background: rgba(148, 163, 184, 0.09);
    padding: 0 5px;
    border-radius: 4px;
  }
  .msg-row.has-cards .msg-caret { display: inline-block; }
  .msg-cards {
    display: none;
    margin: 0 0 2px 0;
    padding: 9px 44px 2px 10px;
  }
  .msg-cards .card {
    width: fit-content;
    max-width: 100%;
  }
  .msg-row.expanded .msg-cards .w {
    animation: msg-word 0.26s ease-out both;
  }
  @keyframes msg-word {
    from {
      opacity: 0;
      filter: blur(1.5px);
    }
    to {
      opacity: 1;
      filter: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .msg-row.expanded .msg-cards .w {
      animation: none;
    }
  }
  .msg-row.expanded .msg-cards { display: block; }
  .msg-cards .card { display: block; padding: 5px 0; }
  .msg-cards .card:first-child { padding-top: 0; }
  .msg-cards .card:last-child { padding-bottom: 0; }
  .msg-cards .card-head {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #e8e8ea;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    margin-bottom: 3px;
  }
  .msg-cards .card-text {
    white-space: pre-wrap;
    word-break: break-word;
    color: #a1a1aa;
    font-style: italic;
    font-size: 12.5px;
    line-height: 1.55;
    user-select: text;
  }
  .msg-cards .card-error .card-text {
    color: #b91c1c;
    font-style: normal;
    font-family: ui-monospace, monospace;
    font-size: 12px;
  }
  .feed-btn.stop { color: #f87171; border-color: #402020; }
  .feed-btn.stop:hover { border-color: #f87171; }
  .followup { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #222; background: #0d0d0d; }
  .followup input { flex: 1; background: #0a0a0a; border: 1px solid #2a2a2a; border-radius: 8px; color: #e5e5e5; font-family: inherit; font-size: 13px; padding: 9px 12px; }
  .followup input:focus { outline: none; border-color: #60a5fa; }
  .followup-send { background: #60a5fa; color: #0a0a0a; border: none; border-radius: 8px; font-weight: 600; font-size: 13px; padding: 8px 16px; cursor: pointer; }
  .followup-send:hover { background: #7db8fb; }
  .followup-send:disabled { opacity: 0.4; cursor: not-allowed; }
  .msg-cat.cat-user { color: #60a5fa; }
</style>
{% endblock %} {% block content %}
<div class="session-header">
  <a href="/sessions">&larr; Sessions</a>
  {% set ds = display_state(session.status, session.is_task_successful, session.failure_kind) %}
  <span class="status status-d-{{ ds.key }}">
    <span class="status-dot"></span>
    <span id="session-status">{{ ds.label }}</span>
  </span>
  <span class="mono">{{ session.id }}</span>
  <span class="badge">{{ session.model or '\u2014' }}</span>
</div>

<dl class="stat-row" id="session-stats">
  <dt>Steps</dt>
  <dd id="stat-steps">{{ session.step_count or 0 }}</dd>
  <dt>Tokens</dt>
  <dd id="stat-tokens">
    {{ '{:,}'.format((session.total_input_tokens or 0) +
    (session.total_output_tokens or 0)) }}
  </dd>
  <dt>Cost</dt>
  <dd class="cost-cell{% if (session.capsolver_cost_usd or 0) > 0 %} has-breakdown{% endif %}" id="cost-cell">
    <span id="cost-total">${{ session.total_cost_usd | usd }}</span>
    <span class="cost-tip">
      <span id="cost-provider">{{ model_provider(session.model) }}</span>:
      <span id="cost-llm">${{ session.llm_cost_usd | usd4 }}</span
      ><br />CapSolver:
      <span id="cost-capsolver">${{ session.capsolver_cost_usd | usd4 }}</span>
    </span>
  </dd>
  <dt>Started</dt>
  <dd>{{ format_relative(session.created_at) }}</dd>
</dl>

<div class="detail-layout">
  <div
    class="browser-panel"
    id="browser-panel"
    data-status="{{ session.status }}"
    data-live-url="{{ session.live_url or '' }}"
    data-browser-live="{{ 1 if browser_live else 0 }}"
    data-max-concurrent="{{ max_concurrent }}"
    data-success="{{ session.is_task_successful if session.is_task_successful is not none else '' }}"
    data-failure-kind="{{ session.failure_kind or '' }}"
  >
    {% if session.status == 'created' %}
    <div class="no-live queued">
      <span class="queued-dot"></span>
      <div class="queued-title">Queued</div>
      <div class="queued-sub">Waiting for a free browser slot. Up to {{ max_concurrent }} sessions run at once; this one starts automatically when a slot frees up.</div>
    </div>
    {% else %}
    <div class="no-live"><div class="spinner"></div><div>Starting browser…</div></div>
    {% endif %}
  </div>

  <div class="panel">
    <div class="panel-head feed-head">
      <span>Live Feed</span>
      <span class="feed-btns" style="display: flex; gap: 6px">
        <button id="stop-btn" class="feed-btn stop" title="Stop the agent (saves partial output)" style="display: none">⏹ Stop</button>
        <span class="export-wrap">
          <button id="copy-json" class="feed-btn" title="Download this session as JSON">
            {} Export JSON ▾
          </button>
          <div id="export-menu" class="export-menu" style="display: none">
            <button class="feed-btn export-opt" data-scope="output" title="Just the schema-validated result — what the platform receives">
              Output only
            </button>
            <button class="feed-btn export-opt" data-scope="steps" title="Session details and the full step log, without the model's raw thinking">
              Steps &amp; session data
            </button>
            <button class="feed-btn export-opt" data-scope="full" title="Everything the feed shows, including the model's thinking">
              Full JSON incl. thinking
            </button>
          </div>
        </span>
      </span>
    </div>
    <div class="panel-body" id="output-panel">
      <div id="completion-cards">
        <div id="completion-card" class="completion-card hidden"></div>
      </div>
      <div id="stream-bar" class="hidden"></div>
      <div id="feed-rows"></div>
    </div>
    {% if session.keep_alive %}
    <form id="followup-form" class="followup" {% if session.status in ('running', 'created') %}style="display: none"{% endif %}>
      <input
        id="followup-input"
        placeholder="{% if browser_live %}Browser parked and waiting — send a follow-up…{% else %}Send a follow-up (starts a fresh browser)…{% endif %}"
        autocomplete="off"
      />
      <button class="followup-send" type="submit">Send</button>
    </form>
    {% endif %}
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const TERMINAL = ["stopped", "error", "idle", "expired"];
  const BUSY = ["running", "created"];
  const SESSION_ID = "{{ session.id }}";
  const feedRows = document.getElementById("feed-rows");
  const outputPanel = document.getElementById("output-panel");
  const completionCard = document.getElementById("completion-card");
  const completionCards = document.getElementById("completion-cards");
  const browserPanel = document.getElementById("browser-panel");

  const seenRowIds = new Set();
  let completionSummary = "";
  let currentOutput = "";
  let activityState = null;
  let lastStatus = browserPanel.dataset.status;
  let lastIsSuccessful =
    browserPanel.dataset.success === "" ? null : browserPanel.dataset.success === "1";
  let lastFailureKind = browserPanel.dataset.failureKind || "";
  let browserLive = browserPanel.dataset.browserLive === "1";
  let firstMessagesBatchDone = false;
  const agentActivity = new OpenBrowseAgents.AgentActivity(
    document.getElementById("stream-bar")
  );


  function esc(s) {
    const d = document.createElement("div");
    d.textContent = s == null ? "" : String(s);
    return d.innerHTML;
  }

  function formatTimes(root) {
    (root || document).querySelectorAll(".msg-time[data-ts]").forEach(function (el) {
      const d = new Date(el.dataset.ts);
      if (isNaN(d.getTime())) return;
      const hh = String(d.getHours()).padStart(2, "0");
      const mm = String(d.getMinutes()).padStart(2, "0");
      el.textContent = hh + ":" + mm;
    });
  }

  const WORD_STEP = 0.024;
  const WORD_SWEEP_MAX = 0.2;
  const WORD_STEP_MIN = 0.005;

  // @nonobvious(forced-by): the whole passage has to land inside one budget, so a
  // long thought shortens its own step rather than crawling word by word at the
  // pace that suits a one-line field.
  function prepareWords(row) {
    if (!row || row.dataset.worded === "1") return;
    row.dataset.worded = "1";
    row.querySelectorAll(".msg-cards .card-text").forEach(function (el) {
      const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
      const nodes = [];
      while (walker.nextNode()) nodes.push(walker.currentNode);
      nodes.forEach(function (node) {
        const frag = document.createDocumentFragment();
        node.nodeValue.split(/(\s+)/).forEach(function (token) {
          if (!token) return;
          if (/^\s+$/.test(token)) {
            frag.appendChild(document.createTextNode(token));
            return;
          }
          const span = document.createElement("span");
          span.className = "w";
          span.textContent = token;
          frag.appendChild(span);
        });
        node.parentNode.replaceChild(frag, node);
      });
      const words = el.querySelectorAll(".w");
      const step = Math.max(
        WORD_STEP_MIN,
        Math.min(WORD_STEP, WORD_SWEEP_MAX / Math.max(1, words.length - 1))
      );
      words.forEach(function (w, i) {
        w.style.animationDelay = (i * step).toFixed(4) + "s";
      });
    });
  }

  function detectOverflow(root) {
    (root || document).querySelectorAll(".msg-row").forEach(function (row) {
      if (row.classList.contains("expanded")) return;
      const sum = row.querySelector(".msg-summary");
      if (!sum) return;
      row.classList.toggle("has-overflow", sum.scrollHeight > sum.clientHeight + 1);
    });
  }

  // Mirrors openbrowse/dashboard/states.py display_state — keep them in step.
  function displayStatus(status, success, failureKind) {
    const okTrue = success === true || success === 1;
    const okFalse = success === false || success === 0;
    if (status === "created") return { key: "queued", label: "queued" };
    if (status === "running") return { key: "running", label: "running" };
    if (status === "error") return { key: "failed", label: "error" };
    if (okTrue && failureKind)
      return { key: "attention", label: "completed with errors" };
    if (okTrue) return { key: "completed", label: "success" };
    if (okFalse && failureKind === "budget_exceeded")
      return { key: "stopped", label: "stopped" };
    if (okFalse) return { key: "failed", label: "error" };
    return { key: "stopped", label: "stopped" };
  }

  async function copyText(text) {
    try {
      await navigator.clipboard.writeText(text || "");
    } catch (e) {
      const ta = document.createElement("textarea");
      ta.value = text || "";
      ta.style.position = "fixed";
      ta.style.opacity = "0";
      document.body.appendChild(ta);
      ta.select();
      try { document.execCommand("copy"); } catch (e2) {}
      document.body.removeChild(ta);
    }
  }

  function flash(btn, label) {
    const prev = btn.textContent;
    btn.textContent = label;
    setTimeout(function () { btn.textContent = prev; }, 1200);
  }

  function liveViewUrl(u) {
    const m = String(u || "").match(/\/vnc\/([^/]+)\//);
    if (!m) return "";
    const id = m[1];
    return `/vnc/${id}/view?path=vnc/${id}/websockify`;
  }

  const QUEUED_HTML =
    '<div class="no-live queued"><span class="queued-dot"></span><div class="queued-title">Queued</div>' +
    '<div class="queued-sub">Waiting for a free browser slot. Up to ' +
    (document.getElementById("browser-panel").dataset.maxConcurrent || "1") +
    " sessions run at once; this one starts automatically when a slot frees up.</div></div>";

  const followupForm = document.getElementById("followup-form");
  function syncFollowup(status) {
    if (!followupForm) return;
    followupForm.style.display = BUSY.includes(status) ? "none" : "flex";
    const input = document.getElementById("followup-input");
    if (input) {
      input.placeholder = browserLive
        ? "Browser parked and waiting — send a follow-up…"
        : "Send a follow-up (starts a fresh browser)…";
    }
  }
  if (followupForm) {
    followupForm.addEventListener("submit", async function (e) {
      e.preventDefault();
      const input = document.getElementById("followup-input");
      const btn = followupForm.querySelector(".followup-send");
      const text = input.value.trim();
      if (!text) return;
      btn.disabled = true;
      try {
        const resp = await fetch("/session/" + SESSION_ID + "/message", {
          method: "POST",
          headers: { "Content-Type": "application/x-www-form-urlencoded" },
          body: "task=" + encodeURIComponent(text),
        });
        if (resp.ok) {
          input.value = "";
        }
      } finally {
        btn.disabled = false;
      }
    });
  }

  const ENDED_SVG =
    '<svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="1.5" stroke-linecap="round">' +
    '<rect x="3" y="5" width="18" height="12" rx="2"/><line x1="9" y1="11" x2="15" y2="11"/>' +
    '<line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="17" x2="12" y2="20"/></svg>';

  function setBrowser(status, liveUrl) {
    // a keep-alive session parks with its tabs open: the stream only ends once
    // the browser itself is gone
    if (!browserLive && TERMINAL.includes(status)) {
      browserPanel.innerHTML = '<div class="no-live">' + ENDED_SVG + "<div>Stream ended</div></div>";
      return;
    }
    const url = liveViewUrl(liveUrl);
    if (url) {
      if (browserPanel.querySelector("iframe")) return;
      const iframe = document.createElement("iframe");
      iframe.src = url;
      browserPanel.innerHTML = "";
      browserPanel.appendChild(iframe);
    } else if (!browserPanel.querySelector("iframe")) {
      browserPanel.innerHTML =
        status === "created" ? QUEUED_HTML : '<div class="no-live"><div class="spinner"></div><div>Starting browser…</div></div>';
    }
  }

  function highlightJson(obj) {
    let json = JSON.stringify(obj, null, 2);
    json = json.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    return json.replace(
      /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
      function (match) {
        let cls = "j-num";
        if (/^"/.test(match)) {
          cls = /:$/.test(match) ? "j-key" : "j-str";
        } else if (/^(true|false)$/.test(match)) {
          cls = "j-bool";
        } else if (/^null$/.test(match)) {
          cls = "j-null";
        }
        return '<span class="' + cls + '">' + match + "</span>";
      }
    );
  }

  function prettyOutput(text) {
    try {
      const p = JSON.parse(text);
      if (p && typeof p === "object") return JSON.stringify(p, null, 2);
    } catch (e) {}
    return text;
  }

  // The card states mirror the session states: green success, amber
  // completed-with-errors (an early stop with a standing answer), red failed
  // (a stop before any answer, or a real error — the subtitle carries the
  // distinction). The transient recovery note is demoted from the headline to
  // a small subtitle, hidden when there were none.
  function completionParts() {
    const s = typeof completionSummary === "string" ? completionSummary : "";
    const recovered = s.match(/\(recovered from (\d+) transient errors?\)/);
    if (lastIsSuccessful === true && lastFailureKind) {
      return { verdict: "warning", head: "Completed with errors", sub: s };
    }
    if (lastIsSuccessful === true) {
      return {
        verdict: "success",
        head: "Task completed",
        sub: recovered
          ? "Recovered from " + recovered[1] + " transient error" +
            (recovered[1] === "1" ? "" : "s") + " along the way."
          : "",
      };
    }
    if (s.indexOf("did not match the requested schema") !== -1) {
      return {
        verdict: "schema",
        head: "Finished, but the result did not match the requested schema",
        sub: s,
      };
    }
    return {
      verdict: "failed",
      head: "Task failed",
      sub: s.replace(/^Task failed:\s*/, ""),
    };
  }

  const COPY_ICON =
    '<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">' +
    '<rect x="5.6" y="5.6" width="8.2" height="8.8" rx="1.6" fill="none"' +
    ' stroke="currentColor" stroke-width="1.3"/>' +
    '<path d="M10.6 5.6V3.2A1.6 1.6 0 0 0 9 1.6H3.8A1.6 1.6 0 0 0 2.2 3.2v5.2' +
    'A1.6 1.6 0 0 0 3.8 10h1.8" fill="none" stroke="currentColor"' +
    ' stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>';
  const COPIED_ICON =
    '<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">' +
    '<path d="M3.4 8.6l3 3 6.2-7" fill="none" stroke="currentColor"' +
    ' stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>';

  function paintCard(card, verdict, head, sub, output) {
    const glyph =
      verdict === "success" ? "✓" :
      verdict === "warning" || verdict === "schema" ? "⚠" : "✕";
    card.className = "completion-card " + verdict;
    card.dataset.output = output || "";
    let html =
      '<div class="cc-head"><span class="cc-title">' +
      '<span class="cc-glyph">' + glyph + "</span>" +
      esc(head || "Run ended") + "</span>" +
      '<button class="cc-caret" type="button" aria-label="Expand result"></button>' +
      "</div>";
    if (sub) html += '<div class="cc-sub">' + esc(sub) + "</div>";
    if (output) {
      let parsed = null;
      try { parsed = JSON.parse(output); } catch (e) {}
      const body =
        parsed !== null && typeof parsed === "object"
          ? '<pre class="j-pre">' + highlightJson(parsed) + "</pre>"
          : "<pre>" + esc(output) + "</pre>";
      html +=
        '<div class="cc-out"><button class="cc-copy" type="button" title="Copy output"' +
        ' aria-label="Copy output">' + COPY_ICON + "</button>" + body + "</div>";
    }
    card.innerHTML = html;
  }

  function renderCompletion() {
    if (!completionSummary && !currentOutput) {
      completionCard.classList.add("hidden");
      return;
    }
    const parts = completionParts();
    paintCard(completionCard, parts.verdict, parts.head, parts.sub, currentOutput);
  }

  // @nonobvious(means): each turn of a keep-alive session finishes, so the card
  // is a stack rather than one slot. The turn that just ended is frozen exactly
  // as it was last painted and folded away, and the live card starts again above
  // it — the answer you are waiting on is always the one at the top, open.
  function archiveCompletion() {
    if (completionCard.classList.contains("hidden")) return;
    if (!completionSummary && !currentOutput) return;
    const kept = completionCard.cloneNode(true);
    kept.removeAttribute("id");
    kept.classList.add("collapsed");
    completionCards.insertBefore(kept, completionCard.nextSibling);
    currentOutput = "";
  }

  function handleRows(html) {
    const tpl = document.createElement("template");
    tpl.innerHTML = (html || "").trim();
    formatTimes(tpl.content);
    const isLiveBatch = firstMessagesBatchDone;
    tpl.content.querySelectorAll(".msg-row").forEach(function (row) {
      const mid = row.dataset.mid;
      if (mid) {
        if (seenRowIds.has(mid)) return;
        seenRowIds.add(mid);
      }
      const type = row.dataset.type || "info";
      const sumEl = row.querySelector(".msg-summary");
      const summary = (sumEl ? sumEl.textContent : "").trim();
      if (type === "completion") {
        const next = summary || "Run ended";
        // a reload replays every turn's completion line, which rebuilds the
        // stack; live, the archive above has usually already run
        if (completionSummary && next !== completionSummary) archiveCompletion();
        completionSummary = next;
        renderCompletion();
        return;
      }
      const isReasoning = isLiveBatch && !!row.querySelector(".cat-reasoning");
      const wasStreaming = isReasoning && agentActivity.hasLiveContent();
      const node = row.cloneNode(true);
      feedRows.insertBefore(node, feedRows.firstChild);
      if (isReasoning) {
        if (wasStreaming) agentActivity.hide();
        OpenBrowseAgents.handoff.fadeRowIn(node);
      }
    });
    firstMessagesBatchDone = true;
    detectOverflow(feedRows);
    outputPanel.scrollTop = 0;
  }

  completionCards.addEventListener("click", function (e) {
    const card = e.target.closest(".completion-card");
    if (!card) return;
    const copy = e.target.closest(".cc-copy");
    if (copy) {
      copyText(prettyOutput(card.dataset.output || "")).then(function () {
        copy.innerHTML = COPIED_ICON;
        setTimeout(function () {
          copy.innerHTML = COPY_ICON;
        }, 1200);
      });
      return;
    }
    if (e.target.closest(".cc-head")) card.classList.toggle("collapsed");
  });

  feedRows.addEventListener("click", function (e) {
    const target = e.target.closest(".msg-caret");
    if (!target) return;
    const row = target.closest(".msg-row");
    if (!row) return;
    prepareWords(row);
    row.classList.toggle("expanded");
  });

  setBrowser(browserPanel.dataset.status, browserPanel.dataset.liveUrl);
  syncFollowup(browserPanel.dataset.status);
  formatTimes();
  detectOverflow(feedRows);

  const exportMenu = document.getElementById("export-menu");
  const exportBtn = document.getElementById("copy-json");
  exportBtn.onclick = function () {
    exportMenu.style.display = exportMenu.style.display === "none" ? "flex" : "none";
  };
  exportMenu.querySelectorAll(".export-opt").forEach(function (opt) {
    opt.onclick = function () {
      exportMenu.style.display = "none";
      window.location =
        "/session/" + SESSION_ID + "/log?scope=" + opt.dataset.scope + "&download=1";
      flash(exportBtn, "Downloading…");
    };
  });
  document.addEventListener("click", function (e) {
    if (!e.target.closest(".export-wrap")) exportMenu.style.display = "none";
  });

  const stopBtn = document.getElementById("stop-btn");

  function syncControls() {
    const stoppable = BUSY.includes(lastStatus) || browserLive;
    stopBtn.style.display = stoppable ? "inline-block" : "none";
  }

  stopBtn.onclick = async function () {
    const btn = this;
    btn.disabled = true;
    try {
      await fetch("/session/" + SESSION_ID + "/stop", { method: "POST" });
      flash(btn, "Stopping…");
    } catch (e) {} finally {
      btn.disabled = false;
    }
  };

  syncControls();

  const es = new EventSource("/sse/session/" + SESSION_ID + "/messages");
  es.addEventListener("messages", function (e) {
    try { handleRows(e.data); } catch (err) {}
  });
  es.addEventListener("status", function (e) {
    try {
      const data = JSON.parse(e.data);
      document.getElementById("stat-steps").textContent = data.stepCount || 0;
      const tokens = (data.totalInputTokens || 0) + (data.totalOutputTokens || 0);
      document.getElementById("stat-tokens").textContent = tokens.toLocaleString();
      const usdUp = (v) => (Math.ceil((parseFloat(v || 0) * 100) - 1e-9) / 100).toFixed(2);
      const usd4 = (v) => parseFloat(v || 0).toFixed(4);
      document.getElementById("cost-total").textContent =
        "$" + usdUp(data.totalCostUsd || data.llmCostUsd);
      document.getElementById("cost-llm").textContent =
        "$" + usd4(data.llmCostUsd);
      document.getElementById("cost-capsolver").textContent =
        "$" + usd4(data.capsolverCostUsd);
      document
        .getElementById("cost-cell")
        .classList.toggle("has-breakdown", parseFloat(data.capsolverCostUsd || 0) > 0);
      if (data.provider) document.getElementById("cost-provider").textContent = data.provider;
      lastFailureKind = data.failureKind || "";
      const dstat = displayStatus(data.status, data.isTaskSuccessful, lastFailureKind);
      browserLive = !!data.browserLive;
      syncFollowup(data.status);
      document.getElementById("session-status").textContent = dstat.label;
      const wrap = document.querySelector(".session-header .status");
      if (wrap) wrap.className = "status status-d-" + dstat.key;
      // @nonobvious(forced-by): fold the finished turn away as the next one
      // starts, not when its completion line arrives. The session carries one
      // output field, so a poll landing between the new turn's output and its
      // completion row would otherwise freeze the old card around the new
      // answer.
      if (data.status === "running" && lastStatus !== "running") {
        archiveCompletion();
        completionSummary = "";
        completionCard.classList.add("hidden");
      }
      lastStatus = data.status;
      const nextIsSuccessful =
        data.isTaskSuccessful === true || data.isTaskSuccessful === 1
          ? true
          : data.isTaskSuccessful === false || data.isTaskSuccessful === 0
          ? false
          : null;
      const successChanged = nextIsSuccessful !== lastIsSuccessful;
      lastIsSuccessful = nextIsSuccessful;
      activityState = data.activity || null;
      if (activityState && !TERMINAL.includes(lastStatus)) {
        agentActivity.update(activityState);
      } else {
        agentActivity.hide();
      }
      syncControls();
      if (data.output && data.output !== currentOutput) {
        currentOutput = data.output;
        renderCompletion();
      } else if (successChanged) {
        renderCompletion();
      }
      setBrowser(data.status, data.liveUrl);
    } catch (e) {}
  });
});
</script>
{% endblock %}