1<!doctype html>2<html lang="en">3<meta charset="utf-8">4<meta name="viewport" content="width=device-width, initial-scale=1">5<title>openrouter-secrets · an m64 capsule</title>6<style>7  :root { color-scheme: light dark; --fg: #1d1d1f; --bg: #f6f5f2; --card: #fff; --muted: #6b6b70; --line: #d8d6d0; --accent: #0f766e; --code: #efede8; }8  @media (prefers-color-scheme: dark) { :root { --fg: #ecebe8; --bg: #161616; --card: #1f1f1f; --muted: #9a9a9f; --line: #333; --accent: #2dd4bf; --code: #262626; } }9  body { margin: 0; padding: 24px 16px; font: 15px/1.5 system-ui, sans-serif; color: var(--fg); background: var(--bg); }10  main { max-width: 760px; margin: 0 auto; }11  h1 { font-size: 22px; margin: 0 0 4px; } h2 { font-size: 16px; margin: 24px 0 6px; }12  .sub { color: var(--muted); font-size: 14px; }13  a { color: var(--accent); } code { background: var(--code); border-radius: 4px; padding: 0 4px; font-size: 13px; }14  form { display: flex; gap: 8px; }15  input, button { font: inherit; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; }16  input { flex: 1; min-width: 0; }17  button { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }18  #out { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-height: 2.6em; margin-top: 8px; white-space: pre-wrap; }19</style>20<main>21  <h1>openrouter-secrets</h1>22  <p class="sub">DeepSeek V4.1 Flash on OpenRouter. Status: <span id="phase">checking…</span> · For agents: <a href="../agent">/agent</a></p>2324  <h2>Try it</h2>25  <form id="f"><input id="msg" value="Say hi in five words" aria-label="message"><button>Send</button></form>26  <div id="out"></div>2728  <h2>Where the key is</h2>29  <ul>30    <li>Your OpenRouter key lives in <code>~/.config/m64/secrets.env</code> on the machine serving this capsule.</li>31    <li>m64 hands it to its gate, not to the container. Inside, <code>$OPENROUTER_API_KEY</code> is only a placeholder.</li>32    <li>The capsule calls <code>openrouter.ai</code> through the gate. The gate adds <code>Authorization: Bearer &lt;key&gt;</code> for that host only.</li>33    <li>The container can't reach any other host. <code>m64 net &lt;id&gt;</code> lists every connection it made.</li>34  </ul>35</main>36<script>37const $ = (id) => document.getElementById(id);38fetch("../status").then((r) => r.json()).then((s) => { $("phase").textContent = s.phase || "?"; })39  .catch(() => { $("phase").textContent = "status unavailable"; });40$("f").addEventListener("submit", async (e) => {41  e.preventDefault();42  $("out").textContent = "…";43  try {44    const r = await fetch("../v1/chat/completions", { method: "POST", headers: { "Content-Type": "application/json" },45      body: JSON.stringify({ messages: [{ role: "user", content: $("msg").value }], max_tokens: 200 }) });46    const d = await r.json();47    $("out").textContent = r.ok ? d.choices[0].message.content : `HTTP ${r.status}: ${JSON.stringify(d)}`;48  } catch (err) { $("out").textContent = String(err); }49});50</script>