options.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Margin settings</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="form">
    <h1>Margin settings</h1>
    <p class="hint">Margin runs on your own LLM subscription, through Claude Code or Codex on this computer. Nothing is stored anywhere but this browser.</p>

    <label>Helper</label>
    <div class="hint">
      <div class="status-line">Status: <b id="bridge-status">checking…</b></div>
      <div id="setup" hidden>
        <p>One-time setup. In Terminal, from the folder you loaded Margin from, run:</p>
        <div class="cmd"><code id="setup-cmd">python3 bridge/install.py</code><button class="ghost small" id="copy-cmd">Copy</button></div>
        <p>It needs Claude Code or Codex installed and signed in. Afterwards your browser starts the helper by itself. If it can't find Margin, it also accepts this extension's ID: <code id="ext-id"></code></p>
      </div>
      <details class="advanced"><summary>Advanced: HTTP bridge</summary>
        Instead of the setup above, you can run <code>python3 bridge/margin_bridge.py</code> and keep it open.
        <input id="bridgeUrl" placeholder="http://127.0.0.1:8788" style="margin-top:8px">
      </details>
    </div>

    <label for="provider">Model provider</label>
    <select id="provider">
      <option value="claude">Claude Code (Claude subscription)</option>
      <option value="codex">Codex (ChatGPT subscription)</option>
    </select>

    <label for="model">Model</label>
    <select id="model"></select>
    <div class="hint" id="model-hint"></div>

    <label style="display:flex;gap:8px;align-items:center;font-weight:600"><input id="webResearch" type="checkbox" checked style="width:auto"> Web research on authors and commentary</label>
    <div class="hint">A second call with web search looks up the key authors and finds blog posts and threads about the work. Adds about 30–60s per page and counts against your plan's usage.</div>

    <label for="s2Key">Semantic Scholar API key (optional)</label>
    <input id="s2Key" type="password" autocomplete="off">
    <div class="hint">Without one, Margin uses the shared public pool, which rate-limits at busy times. Keys are free from Semantic Scholar.</div>

    <div class="footer-actions">
      <button class="primary" id="save">Save</button>
      <button class="ghost" id="clear">Clear cached results</button>
      <span id="msg" class="hint" style="align-self:center"></span>
    </div>
  </div>
  <script type="module" src="options.js"></script>
</body>
</html>