{% extends "base.html" %} {% block title %}Run · OpenBrowse{% endblock %} {%
block head %}
<style>
  .run-wrap {
    max-width: 760px;
    margin: 0 auto;
  }
  .run-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
  }
  .run-head h1 {
    margin-bottom: 0;
  }
  .capacity {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #9ca3af;
    font-size: 12px;
    border: 1px solid #222;
    border-radius: 999px;
    padding: 5px 12px;
    background: #101010;
  }
  .capacity .cap-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
  }
  .capacity.cap-full .cap-dot {
    background: #f59e0b;
  }
  .capacity.cap-idle {
    color: #555;
    border-color: #1a1a1a;
    background: transparent;
  }
  .capacity.cap-idle .cap-dot {
    background: #444;
  }
  .capacity.cap-idle strong {
    color: #777;
    font-weight: 500;
  }
  .capacity strong {
    color: #e5e5e5;
    font-weight: 600;
  }
  .run-card {
    background: #111;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 20px;
  }
  .run-card textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 8px;
    color: #e5e5e5;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    padding: 14px;
  }
  .run-card textarea:focus {
    outline: none;
    border-color: #60a5fa;
  }
  .run-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 16px;
  }
  .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .field label {
    color: #888;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .field select,
  .field input[type="number"] {
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 6px;
    color: #e5e5e5;
    font-family: inherit;
    font-size: 13px;
    padding: 8px 10px;
  }
  .field select:focus,
  .field input:focus {
    outline: none;
    border-color: #60a5fa;
  }
  .options-group {
    margin-top: 16px;
  }
  .options-label {
    display: block;
    color: #888;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
  }
  .opt-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
  }
  .opt-tile {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #222;
    border-radius: 8px;
    padding: 11px 13px;
    cursor: pointer;
    background: #0d0d0d;
    transition: border-color 0.12s ease, background 0.12s ease;
  }
  .opt-tile:hover {
    border-color: #3a3a3a;
  }
  .opt-tile:has(input:checked) {
    border-color: #60a5fa;
    background: #0d1524;
  }
  .opt-tile input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin-top: 2px;
    accent-color: #60a5fa;
    flex: none;
  }
  .opt-tile .opt-name {
    color: #e5e5e5;
    font-size: 13px;
    font-weight: 500;
  }
  .opt-tile .opt-sub {
    color: #737373;
    font-size: 12px;
    margin-top: 2px;
    line-height: 1.4;
  }
  .run-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
  }
  .run-btn {
    background: #60a5fa;
    color: #0a0a0a;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 22px;
    cursor: pointer;
  }
  .run-btn:hover {
    background: #7db8fb;
  }
  .run-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .run-btn:disabled:hover {
    background: #60a5fa;
  }
  .icon {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    vertical-align: middle;
  }
</style>
{% endblock %} {% block content %}
<div class="run-wrap">
  <div class="run-head">
    <h1>Run a task</h1>
    <span class="capacity{% if active_count >= max_concurrent %} cap-full{% elif active_count == 0 %} cap-idle{% endif %}">
      <span class="cap-dot"></span>
      <strong>{{ active_count }}</strong>&nbsp;of {{ max_concurrent }} browser{{ 's' if max_concurrent != 1 else '' }} in use
    </span>
  </div>
  <form class="run-card" method="post" action="/run">
    <textarea
      name="task"
      placeholder="Describe what the browser agent should do…"
      required
      autofocus
    ></textarea>
    <div class="run-controls">
      <div class="field">
        <label for="model">Model</label>
        <select id="model" name="model">
          {% for value, label in models %}
          <option value="{{ value }}" {% if value == default_model %}selected{% endif %}>
            {{ label }}
          </option>
          {% endfor %}
        </select>
      </div>
      <div class="field">
        <label for="reasoning_effort">Reasoning</label>
        <select id="reasoning_effort" name="reasoning_effort">
          {% for value, label in reasoning_options %}
          <option value="{{ value }}" {% if value == reasoning_default %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="field">
        <label for="profile_id">
          <svg class="icon" viewBox="0 0 24 24">
            <circle cx="12" cy="8" r="4" />
            <path d="M4 20c0-4 4-6 8-6s8 2 8 6" />
          </svg>
          Profile
        </label>
        <select id="profile_id" name="profile_id">
          <option value="">None</option>
          {% for p in profiles %}
          <option value="{{ p.id }}">{{ p.name or p.id[:8] }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="field">
        <label for="max_cost_usd">Budget cap (USD)</label>
        <input
          id="max_cost_usd"
          name="max_cost_usd"
          type="number"
          min="0"
          step="0.01"
          value="1.50"
        />
      </div>
    </div>
    <div class="options-group">
      <span class="options-label">Options</span>
      <div class="opt-tiles">
        <label class="opt-tile">
          <input id="keep_alive" name="keep_alive" type="checkbox" />
          <span>
            <span class="opt-name">Keep browser alive</span>
            <div class="opt-sub">The browser stays open after the task, so a follow-up continues the same session with the same tabs and the same history. Stopping the session closes it.</div>
          </span>
        </label>
        <label class="opt-tile">
          <input id="use_schema" type="checkbox" />
          <span>
            <span class="opt-name">Force output schema</span>
            <div class="opt-sub">Validate the result against a JSON Schema you provide.</div>
          </span>
        </label>
      </div>
      <textarea
        id="output_schema"
        name="output_schema"
        placeholder='{"type": "object", "properties": { ... }}'
        style="display: none; min-height: 110px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; margin-top: 10px; width: 100%"
      ></textarea>
      <div id="schema_error" style="display: none; color: #f87171; font-size: 12px; margin-top: 6px"></div>
    </div>
    <div class="run-actions">
      <button class="run-btn" type="submit" disabled>Run</button>
    </div>
  </form>
</div>
<script>
  var REASONING_OPTIONS = {{ reasoning_options_json | safe }};
  (function () {
    var modelSel = document.getElementById("model");
    var thinkSel = document.getElementById("reasoning_effort");
    modelSel.addEventListener("change", function () {
      var spec = REASONING_OPTIONS[modelSel.value];
      if (!spec) return;
      thinkSel.innerHTML = "";
      spec.options.forEach(function (pair) {
        var opt = document.createElement("option");
        opt.value = pair[0];
        opt.textContent = pair[1];
        if (pair[0] === spec.default) opt.selected = true;
        thinkSel.appendChild(opt);
      });
    });
  })();
  (function () {
    var task = document.querySelector("textarea[name=task]");
    var btn = document.querySelector(".run-btn");
    function sync() {
      btn.disabled = !task.value.trim();
    }
    task.addEventListener("input", sync);
    sync();
  })();
  (function () {
    var toggle = document.getElementById("use_schema");
    var ta = document.getElementById("output_schema");
    var err = document.getElementById("schema_error");
    var form = ta.closest("form");
    toggle.addEventListener("change", function () {
      ta.style.display = toggle.checked ? "block" : "none";
      if (!toggle.checked) {
        err.style.display = "none";
      }
    });
    form.addEventListener("submit", function (e) {
      if (!toggle.checked) {
        ta.value = "";
        return;
      }
      var v = ta.value.trim();
      if (!v) {
        return;
      }
      try {
        var parsed = JSON.parse(v);
        if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
          throw new Error("schema must be a JSON object");
        }
        err.style.display = "none";
      } catch (ex) {
        e.preventDefault();
        err.textContent = "Invalid JSON schema: " + ex.message;
        err.style.display = "block";
      }
    });
  })();
</script>
{% endblock %}