popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BrowserClaw</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body { width: 340px; padding: 12px; }
    #settingsPanel { display: none; }
  </style>
</head>
<body>
  <div class="container-fluid">
    <div class="d-flex align-items-center justify-content-between mb-2">
      <h6 class="mb-0">BrowserClaw</h6>
      <div class="d-flex align-items-center gap-1">
        <span id="bridgeBadge" class="badge bg-secondary">—</span>
        <button type="button" id="settingsToggle" class="btn btn-link btn-sm p-0" title="Settings" aria-label="Settings">⚙</button>
      </div>
    </div>

    <div id="settingsPanel" class="small border rounded p-2 mb-2 bg-light">
      <div class="mb-1"><label class="form-label small mb-0">GitHub PAT</label><input type="password" class="form-control form-control-sm" id="ghPat" placeholder="ghp_xxx"></div>
      <div class="mb-1"><label class="form-label small mb-0">Repo</label><input type="text" class="form-control form-control-sm" id="repo" placeholder="owner/repo"></div>
      <div class="mb-1"><label class="form-label small mb-0">Labels</label><input type="text" class="form-control form-control-sm" id="labels" value="agent-ready" placeholder="agent-ready"></div>
      <div class="mb-1"><label class="form-label small mb-0">Poll (min)</label><input type="number" class="form-control form-control-sm" id="pollInterval" value="5" min="1" max="60" style="width:5em"></div>
      <div class="form-check form-check-sm mb-1">
        <input type="checkbox" class="form-check-input" id="ghAgentUseApi">
        <label class="form-check-label small" for="ghAgentUseApi">Send token to agent (use GitHub API). If off, agent works by link only (browser session).</label>
      </div>
      <button type="button" id="saveSettingsBtn" class="btn btn-primary btn-sm">Save</button>
      <span id="settingsStatus" class="ms-2 small text-muted"></span>
    </div>

    <div id="bridgeWrongContextBlock" class="small border rounded p-2 mb-2 bg-warning bg-opacity-25 border-warning" style="display: none;">
      <div class="fw-bold mb-1">Wrong context</div>
      <p class="mb-0 small">Bridge was run in the main page context. Right-click the <strong>assistant panel</strong> → Inspect → Console, then paste the bridge script there.</p>
    </div>
    <div id="bridgeSetupBlock" class="small border rounded p-2 mb-2 bg-light">
      <div class="fw-bold mb-1">Bridge not connected</div>
      <p class="mb-1 text-muted">To link the extension with Comet agent:</p>
      <ol class="mb-2 ps-3 small">
        <li>Right-click the <strong>assistant panel</strong> (not the main page) → Inspect → Console.</li>
        <li>Click <strong>Copy bridge</strong> below, then paste the code in that console and press Enter.</li>
        <li>When the badge turns <span class="badge bg-success">on</span>, the connection is active.</li>
      </ol>
      <button type="button" id="copyBridgeBtn" class="btn btn-outline-secondary btn-sm">Copy bridge</button>
    </div>
    <div id="bridgeConnectedBlock" class="small mb-2" style="display: none;">
      <span class="text-muted">Bridge on.</span>
      <button type="button" id="copyBridgeAgainBtn" class="btn btn-link btn-sm p-0 ms-1">Copy bridge again</button>
    </div>

    <div class="mb-2">
      <textarea class="form-control form-control-sm" id="testCommand" rows="2" placeholder="Command for the agent...">Open Google and search for weather in Istanbul.</textarea>
    </div>
    <div class="d-flex gap-2 mb-2 flex-wrap">
      <button type="button" id="sendBtn" class="btn btn-primary btn-sm">Send</button>
      <button type="button" id="fetchTaskBtn" class="btn btn-outline-primary btn-sm" title="Check GitHub for a task with the configured label now">Fetch task</button>
    </div>
    <div id="status" class="small text-muted mb-2"></div>

    <div id="queueBlock" class="small mb-2">
      <div class="d-flex align-items-center justify-content-between mb-1">
        <span class="text-muted">Sent/completed</span>
        <button type="button" id="clearQueueBtn" class="btn btn-outline-secondary btn-sm py-0">Clear queue</button>
      </div>
      <div id="queueList" class="text-muted small">—</div>
    </div>

    <div class="small">
      <div class="text-muted mb-1">Log</div>
      <pre id="logBox" class="small bg-dark text-light rounded p-2 mb-0" style="max-height:120px;overflow:auto;font-size:10px;"></pre>
    </div>
  </div>
  <script src="popup.js"></script>
</body>
</html>