@chalky/chalky 0.1.3 → 0.1.5

package/agent/extensions/model/browser.js

@@ -0,0 +1,363 @@
+// The page side of the model extension (sign-ins and the picker): /login and /logout open a dialog in the middle of the page, as /mcp does
+// (a click on the backdrop, Esc or ✕ closes it; closing it during a sign-in cancels the sign-in).
+//   list      Sign in (pi's providers) and custom endpoints, each "connected" / "sign in again" (GET /login)
+//   sign-in   what pi asks for, as it asks (event "model"): a link to open, a code to type, a choice, a box to paste
+//             into; ✕ cancels
+//   custom    name, API type, base URL, key (optional), model names as chips (Enter or "," after each; a paste is
+//             split); "Ask the endpoint" lists its models to pick from
+//   logout    the saved logins, each with Log out / Remove
+//   model     (/model, and after connecting) the usable models, grouped by provider; "Use for" all agents or one agent
+//             (an agent's own choice wins; "Same as all agents" drops it). A tick shows which agents use a model now
+// The server does the work (index.ts); keys typed here go to it once and never come back. CHALKY_LOGIN=off: no commands.
+export default function (page) {
+  const APIS = { "openai-completions": "OpenAI", "openai-responses": "OpenAI Responses", "anthropic-messages": "Anthropic",
+                 "google-generative-ai": "Google" };  // the API the endpoint speaks
+  const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+
+  const style = document.createElement("style");
+  style.textContent = `
+    #model-sheet { width: min(560px, calc(100vw - 32px)); max-height: 75vh; padding: 0; box-sizing: border-box; color: var(--text);
+             background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
+             border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; font-size: 13px; }
+    #model-sheet[open] { display: flex; flex-direction: column; }
+    #model-sheet::backdrop { background: rgba(0, 0, 0, .08); }
+    #model-sheet:focus { outline: none; }
+    #model-sheet .body > .btns:last-child { position: sticky; bottom: -16px; margin: 0 -14px -16px; padding: 10px 14px;
+                                      background: var(--glass-strong); border-top: 1px solid var(--line); }  /* Use / Save stay in view */
+    #model-sheet .head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 600; }
+    #model-sheet .head button { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-weight: 400; cursor: pointer; }
+    #model-sheet .head .x { margin-left: auto; color: var(--muted); font-size: 15px; }
+    #model-sheet .body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 16px; display: grid; gap: 12px; align-content: start;
+                   grid-auto-rows: max-content; }  /* rows keep their height: the body scrolls, not each list */
+    #model-sheet .group { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 4px 0 -6px; }
+    #model-sheet .rows { display: grid; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
+    #model-sheet .row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; }
+    #model-sheet .row + .row { border-top: 1px solid var(--line); }
+    #model-sheet .row:hover { background: var(--hover); }
+    #model-sheet .row .how { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
+    #model-sheet .dot { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: none;
+                  background: var(--hover); color: var(--soft); font-weight: 600; font-size: 11px; }
+    #model-sheet .chip { font-size: 10.5px; padding: 1px 7px; border-radius: 99px; white-space: nowrap; margin-left: auto; }
+    #model-sheet .chip.ok { background: rgba(52, 199, 89, 0.14); color: #1f8a3e; }
+    #model-sheet .chip.expired { background: rgba(255, 159, 10, 0.16); color: #b25e00; }
+    #model-sheet label { display: grid; gap: 5px; font-size: 12px; color: var(--soft); }
+    #model-sheet input, #model-sheet select { font: inherit; color: var(--text); background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line);
+                                  border-radius: 9px; padding: 7px 10px; outline: none; min-width: 0; }
+    #model-sheet input:focus, #model-sheet select:focus, #model-sheet .tags:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12); }
+    #model-sheet .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }
+    #model-sheet .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+    #model-sheet .btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
+    #model-sheet .btn { border: 0; border-radius: 9px; padding: 7px 14px; font: 500 13px inherit; font-family: inherit; cursor: pointer;
+                  background: var(--hover); color: var(--text); text-decoration: none; }
+    #model-sheet .btn.primary { background: var(--accent); color: #fff; }
+    #model-sheet .btn.small { padding: 3px 10px; font-size: 12px; }
+    #model-sheet .btn:disabled { opacity: 0.5; cursor: default; }
+    #model-sheet .hint { font-size: 11.5px; color: var(--muted); }
+    #model-sheet .row .hint { white-space: nowrap; }
+    #model-sheet .error { color: var(--danger); font-size: 12.5px; }
+    #model-sheet .wait { display: flex; gap: 10px; align-items: center; color: var(--soft); }
+    #model-sheet .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(0, 113, 227, 0.15); border-top-color: var(--accent);
+                   animation: login-spin 1s linear infinite; flex: none; }
+    @keyframes login-spin { to { transform: rotate(360deg) } }
+    #model-sheet .code { font: 600 26px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.12em; text-align: center; padding: 14px;
+                   border-radius: 10px; background: rgba(255, 255, 255, 0.9); border: 1px dashed var(--line); user-select: all; }
+    #model-sheet details summary { cursor: pointer; color: var(--accent); font-size: 12.5px; }
+    #model-sheet details[open] summary { margin-bottom: 8px; }
+    #model-sheet .tags { display: flex; flex-wrap: wrap; gap: 6px; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line); border-radius: 9px; padding: 5px; }
+    #model-sheet .tags input { border: 0; box-shadow: none; padding: 3px 4px; flex: 1; min-width: 120px; background: none; }
+    #model-sheet .tag { font: 12px ui-monospace, "SF Mono", Menlo, monospace; background: rgba(0, 113, 227, 0.1); border-radius: 6px;
+                  padding: 3px 4px 3px 8px; display: inline-flex; gap: 2px; align-items: center; }
+    #model-sheet .tag button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 4px; font-size: 11px; }
+    #model-sheet .found { max-height: 150px; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 4px; }
+    #model-sheet .found button { border: 1px solid var(--line); background: none; border-radius: 6px; padding: 2px 7px; cursor: pointer;
+                           font: 11.5px ui-monospace, "SF Mono", Menlo, monospace; color: var(--soft); }
+    #model-sheet .found button:hover { background: var(--hover); color: var(--text); }
+    #model-sheet .for { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--soft); }
+    #model-sheet .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
+    #model-sheet .seg button { border: 0; background: none; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; color: var(--text); }
+    #model-sheet .seg button.on { background: var(--accent); color: #fff; }
+    #model-sheet .radio { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; box-sizing: border-box; }
+    #model-sheet .row.on .radio { border: 4.5px solid var(--accent); }
+    #model-sheet .model-id { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; overflow-wrap: anywhere; }`;
+  document.head.append(style);
+
+  const sheet = document.createElement("dialog");
+  sheet.id = "model-sheet";
+  document.body.append(sheet);
+  sheet.onclick = (e) => { if (e.target === sheet) sheet.close(); };  // a click on the backdrop closes it
+  sheet.onclose = () => {  // ✕, Esc, the backdrop, Done
+    if (view === "signin") page.send({ type: "model_cancel" });
+    view = signing = form = null;
+  };
+
+  let view = null;      // "list" | "signin" | "custom" | "logout" | "done"
+  let signing = null;   // the provider being signed in to
+  let form = null;      // the custom form's state: {id, editing, api, baseUrl, models: [], found: []}
+
+  function open(next) {
+    if (!sheet.open) sheet.showModal();
+    next();
+  }
+  const close = () => sheet.close();
+
+  function draw(title, body, back) {
+    sheet.innerHTML = `<div class="head">${back ? `<button class="back">‹ Back</button>` : ""}${esc(title)}<button class="x" title="Close">✕</button></div>
+      <div class="body">${body}</div>`;
+    sheet.querySelector(".x").onclick = close;
+    if (back) sheet.querySelector(".back").onclick = back;
+    return sheet.querySelector(".body");
+  }
+  const chip = (status) => status === "connected" ? `<span class="chip ok">connected</span>`
+    : status === "expired" ? `<span class="chip expired">sign in again</span>` : "";
+  const fetchList = () => fetch("/model/logins").then((r) => r.ok ? r.json() : Promise.reject(new Error(`/model/logins: ${r.status}`)));
+
+  // ---- the list
+  async function showList() {
+    view = "list";
+    const body = draw("Connect a model", `<div class="wait"><span class="spin"></span>Checking your logins…</div>`);
+    let data;
+    try { data = await fetchList(); } catch (e) { body.innerHTML = `<div class="error">${esc(e.message)}</div>`; return; }
+    if (view !== "list") return;
+    body.innerHTML = `<input class="search" placeholder="Search…" aria-label="Search">
+      <div class="group">Sign in</div>
+      <div class="rows signin">${data.providers.map((p) => `<div class="row" data-id="${esc(p.id)}" data-name="${esc(p.name)}">
+        <span class="dot">${esc(p.name[0])}</span>${esc(p.name)}${p.subscription ? "" : `<span class="hint">not a subscription</span>`}
+        ${chip(p.status) || `<span class="how">sign in</span>`}</div>`).join("")}</div>
+      <div class="group">Custom endpoints</div>
+      <div class="rows custom">${data.custom.map((c) => `<div class="row" data-id="${esc(c.id)}">
+        <span class="dot">${esc(c.id[0].toUpperCase())}</span>${esc(c.id)} <span class="hint">${esc(c.models.length)} model${c.models.length === 1 ? "" : "s"}</span>
+        ${chip(c.status) || `<span class="how">edit</span>`}</div>`).join("")}
+        <div class="row new"><span class="dot">+</span>Custom endpoint<span class="how">URL · key · models</span></div></div>`;
+    const search = body.querySelector(".search");
+    search.oninput = () => {
+      const q = search.value.toLowerCase();
+      for (const r of body.querySelectorAll(".row:not(.new)")) r.style.display = `${r.dataset.id} ${r.dataset.name ?? ""}`.toLowerCase().includes(q) ? "" : "none";
+    };
+    search.focus();
+    for (const r of body.querySelectorAll(".signin .row")) r.onclick = () => startSignIn(r.dataset.id, r.dataset.name);
+    for (const r of body.querySelectorAll(".custom .row:not(.new)"))
+      r.onclick = () => showCustom(data.custom.find((c) => c.id === r.dataset.id));
+    body.querySelector(".row.new").onclick = () => showCustom();
+  }
+
+  // ---- sign in: the sheet shows what pi asks for, as it asks
+  function startSignIn(id, name) {
+    view = "signin";
+    signing = { id, name };
+    const body = draw(name, `<div class="link"></div><div class="wait"><span class="spin"></span><span class="msg">Starting…</span></div>
+      <div class="ask"></div><div class="error"></div>`, () => { page.send({ type: "model_cancel" }); showList(); });
+    body.dataset.provider = id;
+    page.send({ type: "model_login", provider: id });
+  }
+  function onSignIn(ev) {
+    const body = sheet.querySelector(".body");
+    if (view !== "signin" || !body) return;
+    const msg = body.querySelector(".msg"), link = body.querySelector(".link"), ask = body.querySelector(".ask");
+    if (ev.step === "notify") {
+      const e = ev.event;
+      if (e.type === "auth_url") {
+        link.innerHTML = `<div class="btns" style="justify-content:flex-start"><a class="btn primary" target="_blank" rel="noopener"
+          href="${esc(e.url)}">Open the ${esc(signing.name)} sign-in page ↗</a></div>`;
+        msg.textContent = "Waiting for you to finish in the other tab…";
+      } else if (e.type === "device_code") {
+        link.innerHTML = `<div class="hint" style="text-align:center">Go to <a target="_blank" rel="noopener" href="${esc(e.verificationUri)}">${esc(e.verificationUri)}</a> and enter</div>
+          <div class="code">${esc(e.userCode)}</div>
+          <div class="btns" style="justify-content:center"><button class="btn copy">Copy code</button>
+          <a class="btn primary" target="_blank" rel="noopener" href="${esc(e.verificationUri)}">Open ↗</a></div>`;
+        link.querySelector(".copy").onclick = () => navigator.clipboard?.writeText(e.userCode);
+        msg.textContent = "Waiting…";
+      } else msg.textContent = e.message;  // progress, info
+    }
+    if (ev.step === "prompt") {
+      const p = ev.prompt;
+      if (p.type === "select") {
+        ask.innerHTML = `<div class="hint">${esc(p.message)}</div><div class="rows">${p.options.map((o) =>
+          `<div class="row" data-id="${esc(o.id)}">${esc(o.label)}</div>`).join("")}</div>`;
+        for (const r of ask.querySelectorAll(".row")) r.onclick = () => { ask.innerHTML = ""; page.send({ type: "model_answer", text: r.dataset.id }); };
+        msg.textContent = "Choose one:";
+        return;
+      }
+      // text, secret, manual_code: a box to type or paste into. manual_code goes with a link already open: tucked away
+      const field = `<label>${esc(p.message)}<input class="mono" type="${p.type === "secret" ? "password" : "text"}"
+        placeholder="${esc(p.placeholder ?? "")}"></label><div class="btns"><button class="btn primary">Continue</button></div>`;
+      ask.innerHTML = p.type === "manual_code" ? `<details><summary>The page after signing in didn't load?</summary>${field}</details>` : field;
+      const input = ask.querySelector("input"), go = () => { page.send({ type: "model_answer", text: input.value }); ask.innerHTML = ""; msg.textContent = "Checking…"; };
+      ask.querySelector(".btn").onclick = go;
+      input.onkeydown = (e) => { if (e.key === "Enter") go(); };
+      if (p.type !== "manual_code") input.focus();
+    }
+    if (ev.step === "prompt_done") ask.innerHTML = "";
+  }
+
+  // ---- custom endpoint
+  function showCustom(c) {
+    view = "custom";
+    form = { editing: !!c, found: [], models: [...(c?.models ?? [])] };
+    const body = draw(c ? c.id : "Custom endpoint", `
+      <div class="two"><label>Name<input class="id" value="${esc(c?.id ?? "")}" placeholder="openrouter" ${c ? "disabled" : ""}></label>
+        <label>Speaks<select class="api">${Object.entries(APIS).map(([v, l]) => `<option value="${v}" ${v === (c?.api ?? "openai-completions") ? "selected" : ""}>${l}</option>`).join("")}</select></label></div>
+      <label>Base URL<input class="url mono" value="${esc(c?.baseUrl ?? "")}" placeholder="https://openrouter.ai/api/v1"></label>
+      <label><span>API key <span class="hint">(optional${c ? "; leave empty to keep the saved one" : ""})</span></span><input class="key mono" type="password" autocomplete="off"></label>
+      <label><span>Models <span class="hint">(Enter or "," after each; paste several at once)</span></span><div class="tags"><input class="add mono" placeholder="model name"></div></label>
+      <div class="found"></div>
+      <div class="error"></div>
+      <div class="btns" style="justify-content:space-between"><button class="btn ask">Ask the endpoint</button><button class="btn primary save">Save</button></div>`,
+      showList);
+    const tags = body.querySelector(".tags"), add = body.querySelector(".add"), found = body.querySelector(".found");
+    const drawTags = () => {
+      for (const t of tags.querySelectorAll(".tag")) t.remove();
+      for (const m of form.models) {
+        const t = document.createElement("span");
+        t.className = "tag";
+        t.innerHTML = `${esc(m)}<button title="Remove">✕</button>`;
+        t.querySelector("button").onclick = (e) => { e.preventDefault(); form.models = form.models.filter((x) => x !== m); drawTags(); drawFound(); };
+        tags.insertBefore(t, add);
+      }
+    };
+    const drawFound = () => {  // the endpoint's own names, narrowed by what is being typed; click one to add it
+      const q = add.value.trim().toLowerCase();
+      const left = form.found.filter((m) => !form.models.includes(m) && m.toLowerCase().includes(q));
+      found.innerHTML = left.slice(0, 200).map((m) => `<button data-m="${esc(m)}">${esc(m)}</button>`).join("")
+        + (left.length > 200 ? `<span class="hint">${left.length - 200} more: type to narrow</span>` : "");
+      for (const b of found.querySelectorAll("button")) b.onclick = () => addNames([b.dataset.m]);
+    };
+    const addNames = (names) => {
+      for (const n of names.map((s) => s.trim()).filter(Boolean)) if (!form.models.includes(n)) form.models.push(n);
+      add.value = "";
+      drawTags(); drawFound();
+    };
+    add.onkeydown = (e) => {
+      if (e.key === "Enter" || e.key === ",") { e.preventDefault(); addNames(add.value.split(",")); }
+      else if (e.key === "Backspace" && !add.value && form.models.length) { form.models.pop(); drawTags(); drawFound(); }
+    };
+    add.oninput = drawFound;
+    add.onpaste = (e) => { e.preventDefault(); addNames((e.clipboardData.getData("text") || "").split(/[\s,]+/)); };
+    tags.onclick = () => add.focus();
+    drawTags();
+    const value = (sel) => body.querySelector(sel).value.trim();
+    body.querySelector(".ask").onclick = () => {
+      body.querySelector(".error").textContent = "";
+      found.innerHTML = `<span class="hint">Asking…</span>`;
+      page.send({ type: "model_probe", id: c?.id, api: value(".api"), baseUrl: value(".url"), key: value(".key") });
+    };
+    body.querySelector(".save").onclick = () => {
+      if (add.value.trim()) addNames(add.value.split(","));  // names typed but not yet added
+      body.querySelector(".error").textContent = "";
+      body.querySelector(".save").disabled = true;
+      page.send({ type: "model_custom", id: value(".id"), api: value(".api"), baseUrl: value(".url"), key: value(".key"), models: form.models });
+    };
+    (c ? add : body.querySelector(".id")).focus();
+  }
+
+  // ---- logout
+  async function showLogout() {
+    view = "logout";
+    const body = draw("Saved logins", `<div class="wait"><span class="spin"></span>Loading…</div>`);
+    let data;
+    try { data = await fetchList(); } catch (e) { body.innerHTML = `<div class="error">${esc(e.message)}</div>`; return; }
+    if (view !== "logout") return;
+    const rows = [...data.providers.filter((p) => p.status).map((p) => ({ id: p.id, name: p.name, how: p.status === "expired" ? "expired" : "signed in", act: "Log out" })),
+                  ...data.custom.map((c) => ({ id: c.id, name: `${c.id} (custom)`, how: c.status ? "key" : "no key", act: "Remove" }))];
+    body.innerHTML = rows.length ? `<div class="rows">${rows.map((r) => `<div class="row" data-id="${esc(r.id)}"><span class="dot">${esc(r.name[0].toUpperCase())}</span>
+      ${esc(r.name)}<span class="how">${r.how}</span><button class="btn small">${r.act}</button></div>`).join("")}</div>
+      <div class="hint">Log out removes the login from this machine (agent/auth.json). Remove also deletes the endpoint.</div>`
+      : `<div class="hint">No saved logins. Type /login to add one.</div>`;
+    for (const b of body.querySelectorAll(".row .btn")) b.onclick = () => {
+      b.disabled = true;
+      page.send({ type: "model_logout", provider: b.closest(".row").dataset.id });
+    };
+  }
+
+  // ---- choose the model
+  async function showModels(title = "Choose the model") {
+    view = "model";
+    const body = draw(title, `<div class="wait"><span class="spin"></span>Loading models…</div>`);
+    let data;
+    try { data = await fetch("/model/choices").then((r) => r.ok ? r.json() : Promise.reject(new Error(`/model/choices: ${r.status}`))); }
+    catch (e) { body.innerHTML = `<div class="error">${esc(e.message)}</div>`; return; }
+    if (view !== "model") return;
+    const key = (m) => m ? `${m.provider}/${m.id}` : "same";
+    const firstAgentModel = data.agents[0]?.model;
+    form = { scope: "all", pick: key(data.default ?? firstAgentModel) };
+    const label = (k) => k === "same" ? "the all-agents model" : k.slice(k.indexOf("/") + 1);
+    function render() {
+      const agent = data.agents.find((a) => a.name === form.scope);
+      const users = (k) => data.agents.filter((a) => key(a.model) === k).map((a) => a.name);
+      body.innerHTML = `<div class="for">Use for <span class="seg"><button data-for="all" class="${form.scope === "all" ? "on" : ""}">All agents</button>${data.agents.map((a) =>
+          `<button data-for="${esc(a.name)}" class="${form.scope === a.name ? "on" : ""}">${esc(a.name)}</button>`).join("")}</span></div>
+        <div class="hint">${agent ? `Only ${esc(agent.name)}; the others keep theirs.` : "Every agent that hasn't picked its own."}</div>
+        <input class="search" placeholder="Search models…" aria-label="Search models">
+        ${agent ? `<div class="rows"><div class="row ${form.pick === "same" ? "on" : ""}" data-k="same"><span class="radio"></span>Same as all agents
+          <span class="how">${esc(data.default ? data.default.id : "MODEL_BASE_URL")}</span></div></div>` : ""}
+        ${data.groups.map((g) => `<div class="group">${esc(g.name)}</div><div class="rows">${g.models.map((m) => {
+          const k = `${g.provider}/${m.id}`, who = users(k);
+          return `<div class="row ${form.pick === k ? "on" : ""}" data-k="${esc(k)}" data-q="${esc(`${g.name} ${m.id} ${m.name}`.toLowerCase())}"><span class="radio"></span>
+            <span class="model-id">${esc(m.id)}</span><span class="how">${who.map((n) => `${esc(n)} ✓`).join(" ")}${who.length && m.context ? " · " : ""}${m.context ? `${Math.round(m.context / 1000)}k` : ""}</span></div>`;
+        }).join("")}</div>`).join("") || `<div class="hint">No models yet: type /login to connect one.</div>`}
+        <div class="error"></div>
+        <div class="btns"><button class="btn primary use">Use ${esc(label(form.pick))}</button></div>`;
+      for (const b of body.querySelectorAll(".seg button")) b.onclick = () => {
+        form.scope = b.dataset.for;
+        const a = data.agents.find((x) => x.name === form.scope);
+        form.pick = a ? (a.own ? key(a.model) : "same") : key(data.default ?? firstAgentModel);
+        render();
+      };
+      for (const r of body.querySelectorAll(".row[data-k]")) r.onclick = () => {
+        form.pick = r.dataset.k;
+        for (const x of body.querySelectorAll(".row.on")) x.classList.remove("on");
+        r.classList.add("on");
+        body.querySelector(".use").textContent = `Use ${label(form.pick)}`;
+      };
+      const search = body.querySelector(".search");
+      search.oninput = () => {
+        const q = search.value.toLowerCase();
+        for (const r of body.querySelectorAll(".row[data-q]")) r.style.display = r.dataset.q.includes(q) ? "" : "none";
+      };
+      body.querySelector(".use").onclick = () => {
+        const [provider, ...rest] = form.pick === "same" ? [] : form.pick.split("/");
+        if (form.scope === "all" && !provider) return;
+        form.said = form.scope === "all" ? `all agents now use ${rest.join("/")}`
+          : provider ? `${form.scope} now uses ${rest.join("/")}` : `${form.scope} is back on the all-agents model`;
+        body.querySelector(".use").disabled = true;
+        page.send({ type: "model_set", for: form.scope, provider, id: rest.join("/") || undefined });
+      };
+    }
+    render();
+  }
+
+  // ---- what the server says
+  page.on("model", (ev) => {
+    if (!sheet.open) return;
+    const err = sheet.querySelector(".error");
+    if (ev.step === "error") {
+      if (err) err.textContent = ev.text;
+      sheet.querySelector(".save")?.removeAttribute("disabled");
+      const msg = sheet.querySelector(".msg");
+      if (view === "signin" && msg) { msg.textContent = "Didn't work:"; sheet.querySelector(".spin")?.remove(); }
+      if (view === "custom") sheet.querySelector(".found").innerHTML = "";
+      if (view === "model") { sheet.querySelector(".use")?.removeAttribute("disabled"); form.said = null; }
+      return;
+    }
+    if (ev.step === "done") {
+      page.note(`connected to ${ev.provider}`);
+      return showModels(`Connected to ${ev.provider} ✓`);
+    }
+    if (ev.step === "cancelled" && view === "signin") return showList();
+    if (ev.step === "models" && view === "custom") {
+      form.found = ev.models;
+      sheet.querySelector(".add").dispatchEvent(new Event("input"));
+      if (!ev.models.length) sheet.querySelector(".found").innerHTML = `<span class="hint">The endpoint listed no models: type their names.</span>`;
+      return;
+    }
+    if (ev.step === "changed" && view === "logout") return showLogout();
+    if (ev.step === "changed" && view === "model" && form?.said) { page.note(form.said); return close(); }
+    onSignIn(ev);
+  });
+
+  fetch("/model/on").then((r) => {  // CHALKY_LOGIN=off: the server has no sign-ins, and the page no commands
+    if (!r.ok) return;
+    page.command("login", () => open(showList), "Connect a model: sign in with a subscription, or a custom endpoint");
+    page.command("logout", () => open(showLogout), "Remove a saved login");
+    page.command("model", () => open(() => showModels()), "Choose the model, for all agents or one");
+  });
+}

package/{app → agent}/extensions/model/index.ts

@@ -1,10 +1,14 @@
-// The model: one OpenAI-compatible endpoint (in Chalky: keyproxy -> LiteLLM), as the Python agent's llm plugin.
-// MODEL_BASE_URL (up to /v1), MODEL_API_KEY, MODEL_NAME (a LiteLLM route, "default"). pi does the calls,
-// streaming, retries, thinking and compaction; this only tells it where. The host selects provider "chalky".
-// MODEL_CONTEXT_WINDOW: the model's context size; pi compacts when a request would leave less than 16384 tokens of it.
+// The model the agents use: the one picked on the page (login.ts: sign-ins, custom endpoints, the picker; browser.js:
+// /login, /logout, /model), else the endpoint set in the environment (here): one OpenAI-compatible endpoint (in
+// Chalky: keyproxy -> LiteLLM). MODEL_BASE_URL (up to /v1), MODEL_API_KEY, MODEL_NAME (a LiteLLM route, "default").
+// pi does the calls, streaming, retries, thinking and compaction; this only tells it where. The host selects provider
+// "chalky" when nothing was picked (server.ts). MODEL_CONTEXT_WINDOW: the model's context size; pi compacts when a
+// request would leave less than 16384 tokens of it.
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import login from "./login.ts";
 
 export default function (pi: ExtensionAPI) {
+  login(pi);  // CHALKY_LOGIN=off (a cloud deployment): no sign-ins or picker, only this endpoint
   if (!process.env.MODEL_BASE_URL) return;  // pi then says no model is configured on each message
   pi.registerProvider("chalky", {
     baseUrl: process.env.MODEL_BASE_URL,

package/agent/extensions/model/login.ts

@@ -0,0 +1,215 @@
+// The model extension's sign-ins and model picker (index.ts loads this; browser.js: the page's /login, /logout, /model):
+// connect models from the page and pick one. pi's own login does the work, the call its
+// terminal /login makes (modelRuntime.login): a sign-in (OAuth: pi opens the provider's page and waits on a callback
+// server, or asks for the address to be pasted), or a custom endpoint (any OpenAI-, Anthropic- or Google-compatible
+// URL, its model names, an optional key). pi renews sign-ins itself; an expired one shows as pi's own error.
+// Where things go: tokens and keys in agent/auth.json (pi's; never versioned), custom endpoints in agent/models.json
+// (pi's; no secrets), this install's device id (OpenAI's sign-in asks for one) and the model choices in data/model.json:
+// {deviceId, default: {provider, id} (all agents), agents: {name: {provider, id}} (one agent's own; it wins)}.
+// server.ts asks host.api.model.modelFor(name, session) when it starts an agent: its own choice, else the all-agents
+// one, else nothing (then the MODEL_BASE_URL endpoint, index.ts); a choice whose login is gone is skipped.
+// CHALKY_LOGIN=off (a cloud deployment, where the backend fixes the endpoint): none of this loads, and server.ts doesn't ask.
+//   GET /model/on       204 (so the page knows sign-ins are on)
+//   GET /model/choices  {groups: [{provider, name, models: [{id, name, context}]}] (usable now), default, agents: [{name, model, own}]}
+//   GET /model/logins   {providers: [{id, name, subscription, status}], custom: [{id, baseUrl, api, models, status}]}
+//                       status: "connected" | "expired" | undefined; each call checks the stored sign-ins (pi renews one that is due)
+//   page messages       model_login {provider}, model_answer {text}, model_cancel,
+//                       model_custom {id, api, baseUrl, key?, models: [names]}, model_probe {baseUrl, api, key?, id?},
+//                       model_logout {provider}, model_set {for: "all" | <agent>, provider?, id?} (for an agent, no provider: back to all agents')
+//   event "model"       {step: "notify", event} (pi: open this link / enter this code / waiting) | {step: "prompt", prompt}
+//                       (pi asks: the page answers with model_answer) | {step: "prompt_done"} (pi stopped asking: the
+//                       callback came first) | {step: "done", provider} | {step: "cancelled"} | {step: "error", text} | {step: "models", models}
+//                       (model_probe's answer) | {step: "changed"} (a login, endpoint or model changed: agents are synced)
+import fs from "node:fs";
+import path from "node:path";
+import { randomUUID } from "node:crypto";
+import { ModelRuntime, type ExtensionAPI } from "@earendil-works/pi-coding-agent";
+
+const host = (globalThis as any).chalky;
+const MODELS = path.join(host.agent, "models.json");
+const STATE = path.join(host.data, "model.json");
+const APIS = ["openai-completions", "openai-responses", "anthropic-messages", "google-generative-ai"];
+
+// one runtime for logins, on the same files as the agents' (each agent's session has its own: synced after a change)
+if (!host.shared.has("model-runtime"))
+  host.shared.set("model-runtime", ModelRuntime.create({ authPath: path.join(host.agent, "auth.json"), modelsPath: MODELS }));
+const runtime = (): Promise<ModelRuntime> => host.shared.get("model-runtime");
+
+const readModels = () => (fs.existsSync(MODELS) ? JSON.parse(fs.readFileSync(MODELS, "utf8")) : { providers: {} });
+const readState = () => (fs.existsSync(STATE) ? JSON.parse(fs.readFileSync(STATE, "utf8")) : {});
+const writeState = (s: any) => fs.writeFileSync(STATE, JSON.stringify(s, null, 2) + "\n");
+function deviceId() {
+  const s = readState();
+  if (!s.deviceId) writeState({ ...s, deviceId: (s.deviceId = randomUUID()) });
+  return s.deviceId;
+}
+
+// the model an agent should use: its own choice, else the all-agents one; skipped when its login is gone
+function modelFor(name: string, session: any) {
+  const s = readState(), rt = session.modelRuntime;
+  for (const c of [s.agents?.[name], s.default])
+    if (c && rt.hasConfiguredAuth(c.provider)) { const m = rt.getModel(c.provider, c.id); if (m) return m; }
+  return undefined;
+}
+const fallback = (session: any) => session.modelRuntime.getModel("chalky", process.env.MODEL_NAME || "default");  // index.ts
+async function apply(a: any) {  // put an agent on the model it should use now (after a choice, a login or a logout)
+  const m = modelFor(a.name, a.session) ?? fallback(a.session);
+  const cur = a.session.model;
+  if (m && !(cur && cur.provider === m.provider && cur.id === m.id)) await a.session.setModel(m);
+}
+host.api.model = { modelFor };
+
+async function status(rt: ModelRuntime, id: string) {
+  if (!rt.getProviderAuthStatus(id).configured) return undefined;
+  try { return (await rt.getAuth(id)) ? "connected" : undefined; } catch { return "expired"; }  // getAuth renews a sign-in that is due
+}
+
+async function synced() {  // a login or endpoint changed: every runtime reads the files again (offline)
+  await (await runtime()).refresh();
+  for (const a of host.agents.values()) { await a.session.modelRuntime.refresh(); await apply(a); }
+  host.broadcast("model", { step: "changed" });
+}
+
+const fail = (e: any) => host.broadcast("model", { step: "error", text: e?.message ?? String(e) });
+
+export default function (pi: ExtensionAPI) {
+  if (process.env.CHALKY_LOGIN === "off") return;
+
+  // at start, once: renew the sign-ins that are due, and say which failed (server log)
+  pi.on("session_start", async () => {
+    if (host.shared.has("model-checked")) return;
+    host.shared.set("model-checked", true);
+    const rt = await runtime();
+    for (const c of await rt.listCredentials())
+      if (c.type === "oauth" && (await status(rt, c.providerId)) === "expired") console.error(`login: the ${c.providerId} sign-in has expired (/login)`);
+  });
+
+  host.routes.set("/model/on", (_req: any, res: any) => res.writeHead(204).end());  // browser.js: add the commands only when this answers
+  host.routes.set("/model/choices", (_req: any, res: any) => models(res).catch((e) =>
+    res.writeHead(500, { "content-type": "text/plain" }).end(String(e?.message ?? e))));
+  async function models(res: any) {  // read through an agent's runtime: it also has the MODEL_BASE_URL endpoint ("chalky")
+    const agents = [...host.agents.values()], s = readState();
+    const rt = agents[0]?.session.modelRuntime;
+    const groups = new Map<string, any>();
+    for (const m of rt ? await rt.getAvailable() : []) {
+      if (!groups.has(m.provider)) groups.set(m.provider, { provider: m.provider, name: m.provider === "chalky" ? "Chalky LiteLLM (MODEL_BASE_URL)"
+        : (readModels().providers[m.provider] ? `${m.provider} (custom)` : rt.getProvider(m.provider)?.name ?? m.provider), models: [] });
+      groups.get(m.provider).models.push({ id: m.id, name: m.name, context: m.contextWindow });
+    }
+    res.writeHead(200, { "content-type": "application/json" }).end(JSON.stringify({
+      groups: [...groups.values()], default: s.default ?? null,
+      agents: agents.filter((a) => !a.app).map((a) => ({ name: a.name, model: a.session.model ? { provider: a.session.model.provider, id: a.session.model.id } : null,
+        own: !!s.agents?.[a.name] })) }));
+  }
+
+  host.routes.set("/model/logins", (_req: any, res: any) => list(res).catch((e) =>
+    res.writeHead(500, { "content-type": "text/plain" }).end(String(e?.message ?? e))));
+  async function list(res: any) {
+    const rt = await runtime();
+    await rt.refresh();
+    const custom = readModels().providers;
+    const providers = await Promise.all(rt.getProviders().filter((p) => p.auth.oauth && !(p.id in custom)).map(async (p) =>
+      ({ id: p.id, name: p.name, subscription: p.auth.oauth!.isSubscription === true, status: await status(rt, p.id) })));
+    const list = await Promise.all(Object.entries(custom).map(async ([id, p]: any) =>
+      ({ id, baseUrl: p.baseUrl, api: p.api, models: (p.models ?? []).map((m: any) => m.id), status: await status(rt, id) })));
+    res.writeHead(200, { "content-type": "application/json" })
+      .end(JSON.stringify({ providers: providers.sort((a, b) => a.name.localeCompare(b.name)), custom: list }));
+  }
+
+  host.pageHandlers.set("model", async (msg: any) => {
+    const flow = host.shared.get("model-flow");  // the sign-in under way: {abort, answer?}
+    if (msg.type === "model_answer") return flow?.answer?.(String(msg.text ?? ""));
+    if (msg.type === "model_cancel") return flow?.abort.abort();
+
+    if (msg.type === "model_login") {
+      flow?.abort.abort();  // one at a time
+      const abort = new AbortController(), me: any = { abort };
+      host.shared.set("model-flow", me);
+      try {
+        await (await runtime()).login(String(msg.provider), "oauth", {
+          signal: abort.signal,
+          notify: (event) => host.broadcast("model", { step: "notify", event }),
+          prompt: ({ signal, ...prompt }) => new Promise((resolve, reject) => {
+            const signals = [signal, abort.signal].filter((s) => s) as AbortSignal[];
+            const end = () => { me.answer = undefined; for (const s of signals) s.removeEventListener("abort", stop); };
+            me.answer = (text: string) => { end(); resolve(text); };
+            const stop = () => { end(); host.broadcast("model", { step: "prompt_done" }); reject(new Error("Login cancelled")); };
+            for (const s of signals) s.addEventListener("abort", stop, { once: true });
+            host.broadcast("model", { step: "prompt", prompt });
+          }),
+        }, { getDeviceId: deviceId });
+        await synced();
+        host.broadcast("model", { step: "done", provider: msg.provider });
+      } catch (e) { if (abort.signal.aborted) host.broadcast("model", { step: "cancelled" }); else fail(e); }  // ✕: not an error
+      finally { if (host.shared.get("model-flow") === me) host.shared.delete("model-flow"); }
+    }
+
+    if (msg.type === "model_custom") {
+      const id = String(msg.id ?? "").trim(), baseUrl = String(msg.baseUrl ?? "").trim().replace(/\/+$/, "");
+      const models = [...new Set<string>((msg.models ?? []).map((m: any) => String(m).trim()).filter(Boolean))];
+      const rt = await runtime(), saved = readModels();
+      if (!/^[a-z0-9][a-z0-9._-]*$/i.test(id)) return fail("The name can have letters, digits, '.', '_' and '-' only");
+      if (rt.getProvider(id) && !(id in saved.providers)) return fail(`'${id}' is one of pi's own providers: pick another name`);
+      if (!/^https?:\/\//.test(baseUrl)) return fail("The base URL starts with http:// or https://");
+      if (!APIS.includes(msg.api)) return fail(`Speaks: one of ${APIS.join(", ")}`);
+      if (!models.length) return fail("Add at least one model name");
+      const key = String(msg.key ?? "").trim();
+      const stored = (await rt.listCredentials()).some((c) => c.providerId === id);
+      // no key and none stored: a placeholder, so pi counts the endpoint usable (pi's docs: Ollama ignores it)
+      saved.providers[id] = { baseUrl, api: msg.api, ...(key || stored ? {} : { apiKey: "none" }), models: models.map((m) => ({ id: m })) };
+      fs.writeFileSync(MODELS, JSON.stringify(saved, null, 2) + "\n");
+      try {
+        await rt.refresh();
+        if (key) await rt.login(id, "api_key", { prompt: async () => key, notify() {} });  // pi saves it in auth.json
+        await synced();
+        host.broadcast("model", { step: "done", provider: id });
+      } catch (e) { fail(e); }
+    }
+
+    if (msg.type === "model_probe") {  // the endpoint's own list (GET <baseUrl>/models); the key never goes to the page
+      try {
+        const rt = await runtime(), baseUrl = String(msg.baseUrl ?? "").trim().replace(/\/+$/, "");
+        const key = String(msg.key ?? "").trim() || (msg.id && rt.getProviderAuthStatus(msg.id).configured ? (await rt.getAuth(msg.id))?.auth.apiKey : "");
+        const headers: Record<string, string> = msg.api === "anthropic-messages" ? { "x-api-key": key ?? "", "anthropic-version": "2023-06-01" }
+          : msg.api === "google-generative-ai" ? { "x-goog-api-key": key ?? "" } : key ? { authorization: `Bearer ${key}` } : {};
+        const r = await fetch(`${baseUrl}/models`, { headers, signal: AbortSignal.timeout(10_000) });
+        if (!r.ok) return fail(`${baseUrl}/models answered ${r.status} ${r.statusText}`);
+        const body = await r.json();
+        const models = (body.data ?? body.models ?? []).map((m: any) => m.id ?? m.name?.replace(/^models\//, "")).filter(Boolean);
+        host.broadcast("model", { step: "models", models });
+      } catch (e) { fail(e); }
+    }
+
+    if (msg.type === "model_set") {
+      const s = readState(), who = String(msg.for ?? "all"), rt = host.agents.values().next().value?.session.modelRuntime;
+      const choice = msg.provider ? { provider: String(msg.provider), id: String(msg.id) } : undefined;
+      if (choice && !(rt?.hasConfiguredAuth(choice.provider) && rt.getModel(choice.provider, choice.id)))
+        return fail(`${choice.provider}/${choice.id} isn't usable now: connect it with /login`);
+      if (who === "all") {
+        if (!choice) return fail("Pick a model");
+        s.default = choice;
+      } else {
+        if (!host.agents.has(who)) return fail(`No agent '${who}'`);
+        s.agents = { ...s.agents };
+        if (choice) s.agents[who] = choice; else delete s.agents[who];  // no model: back to the all-agents one
+      }
+      writeState(s);
+      try {
+        for (const a of host.agents.values()) await apply(a);
+        host.broadcast("model", { step: "changed" });
+      } catch (e) { fail(e); }
+    }
+
+    if (msg.type === "model_logout") {
+      const id = String(msg.provider ?? ""), rt = await runtime(), saved = readModels();
+      try {
+        if ((await rt.listCredentials()).some((c) => c.providerId === id)) await rt.logout(id);
+        if (id in saved.providers) {
+          delete saved.providers[id];
+          fs.writeFileSync(MODELS, JSON.stringify(saved, null, 2) + "\n");
+        }
+        await synced();
+      } catch (e) { fail(e); }
+    }
+  });
+}