@chalky/chalky 0.1.4 → 0.1.5

package/{app/extensions/login → agent/extensions/model}/browser.js

@@ -1,7 +1,7 @@
-// Browser half of the login extension: /login and /logout open a dialog in the middle of the page, as /mcp does
+// 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 "login"): a link to open, a code to type, a choice, a box to paste
+//   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
@@ -16,77 +16,77 @@ export default function (page) {
 
   const style = document.createElement("style");
   style.textContent = `
-    #login { width: min(560px, calc(100vw - 32px)); max-height: 75vh; padding: 0; box-sizing: border-box; color: var(--text);
+    #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; }
-    #login[open] { display: flex; flex-direction: column; }
-    #login::backdrop { background: rgba(0, 0, 0, .08); }
-    #login:focus { outline: none; }
-    #login .body > .btns:last-child { position: sticky; bottom: -16px; margin: 0 -14px -16px; padding: 10px 14px;
+    #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 */
-    #login .head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 600; }
-    #login .head button { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-weight: 400; cursor: pointer; }
-    #login .head .x { margin-left: auto; color: var(--muted); font-size: 15px; }
-    #login .body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 16px; display: grid; gap: 12px; align-content: start;
+    #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 */
-    #login .group { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 4px 0 -6px; }
-    #login .rows { display: grid; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
-    #login .row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; }
-    #login .row + .row { border-top: 1px solid var(--line); }
-    #login .row:hover { background: var(--hover); }
-    #login .row .how { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
-    #login .dot { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: none;
+    #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; }
-    #login .chip { font-size: 10.5px; padding: 1px 7px; border-radius: 99px; white-space: nowrap; margin-left: auto; }
-    #login .chip.ok { background: rgba(52, 199, 89, 0.14); color: #1f8a3e; }
-    #login .chip.expired { background: rgba(255, 159, 10, 0.16); color: #b25e00; }
-    #login label { display: grid; gap: 5px; font-size: 12px; color: var(--soft); }
-    #login input, #login select { font: inherit; color: var(--text); background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line);
+    #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; }
-    #login input:focus, #login select:focus, #login .tags:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12); }
-    #login .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }
-    #login .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
-    #login .btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
-    #login .btn { border: 0; border-radius: 9px; padding: 7px 14px; font: 500 13px inherit; font-family: inherit; cursor: pointer;
+    #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; }
-    #login .btn.primary { background: var(--accent); color: #fff; }
-    #login .btn.small { padding: 3px 10px; font-size: 12px; }
-    #login .btn:disabled { opacity: 0.5; cursor: default; }
-    #login .hint { font-size: 11.5px; color: var(--muted); }
-    #login .row .hint { white-space: nowrap; }
-    #login .error { color: var(--danger); font-size: 12.5px; }
-    #login .wait { display: flex; gap: 10px; align-items: center; color: var(--soft); }
-    #login .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(0, 113, 227, 0.15); border-top-color: var(--accent);
+    #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) } }
-    #login .code { font: 600 26px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.12em; text-align: center; padding: 14px;
+    #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; }
-    #login details summary { cursor: pointer; color: var(--accent); font-size: 12.5px; }
-    #login details[open] summary { margin-bottom: 8px; }
-    #login .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; }
-    #login .tags input { border: 0; box-shadow: none; padding: 3px 4px; flex: 1; min-width: 120px; background: none; }
-    #login .tag { font: 12px ui-monospace, "SF Mono", Menlo, monospace; background: rgba(0, 113, 227, 0.1); border-radius: 6px;
+    #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; }
-    #login .tag button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 4px; font-size: 11px; }
-    #login .found { max-height: 150px; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 4px; }
-    #login .found button { border: 1px solid var(--line); background: none; border-radius: 6px; padding: 2px 7px; cursor: pointer;
+    #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); }
-    #login .found button:hover { background: var(--hover); color: var(--text); }
-    #login .for { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--soft); }
-    #login .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
-    #login .seg button { border: 0; background: none; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; color: var(--text); }
-    #login .seg button.on { background: var(--accent); color: #fff; }
-    #login .radio { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; box-sizing: border-box; }
-    #login .row.on .radio { border: 4.5px solid var(--accent); }
-    #login .model-id { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; overflow-wrap: anywhere; }`;
+    #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 = "login";
+  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: "login_cancel" });
+    if (view === "signin") page.send({ type: "model_cancel" });
     view = signing = form = null;
   };
 
@@ -109,7 +109,7 @@ export default function (page) {
   }
   const chip = (status) => status === "connected" ? `<span class="chip ok">connected</span>`
     : status === "expired" ? `<span class="chip expired">sign in again</span>` : "";
-  const fetchList = () => fetch("/login").then((r) => r.ok ? r.json() : Promise.reject(new Error(`/login: ${r.status}`)));
+  const fetchList = () => fetch("/model/logins").then((r) => r.ok ? r.json() : Promise.reject(new Error(`/model/logins: ${r.status}`)));
 
   // ---- the list
   async function showList() {
@@ -145,9 +145,9 @@ export default function (page) {
     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: "login_cancel" }); showList(); });
+      <div class="ask"></div><div class="error"></div>`, () => { page.send({ type: "model_cancel" }); showList(); });
     body.dataset.provider = id;
-    page.send({ type: "login_start", provider: id });
+    page.send({ type: "model_login", provider: id });
   }
   function onSignIn(ev) {
     const body = sheet.querySelector(".body");
@@ -173,7 +173,7 @@ export default function (page) {
       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: "login_answer", text: r.dataset.id }); };
+        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;
       }
@@ -181,7 +181,7 @@ export default function (page) {
       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: "login_answer", text: input.value }); ask.innerHTML = ""; msg.textContent = "Checking…"; };
+      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();
@@ -238,13 +238,13 @@ export default function (page) {
     body.querySelector(".ask").onclick = () => {
       body.querySelector(".error").textContent = "";
       found.innerHTML = `<span class="hint">Asking…</span>`;
-      page.send({ type: "login_list_models", id: c?.id, api: value(".api"), baseUrl: value(".url"), key: value(".key") });
+      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: "login_custom", id: value(".id"), api: value(".api"), baseUrl: value(".url"), key: value(".key"), models: form.models });
+      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();
   }
@@ -260,11 +260,11 @@ export default function (page) {
                   ...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 (app/auth.json). Remove also deletes the endpoint.</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: "logout", provider: b.closest(".row").dataset.id });
+      page.send({ type: "model_logout", provider: b.closest(".row").dataset.id });
     };
   }
 
@@ -273,7 +273,7 @@ export default function (page) {
     view = "model";
     const body = draw(title, `<div class="wait"><span class="spin"></span>Loading models…</div>`);
     let data;
-    try { data = await fetch("/login/models").then((r) => r.ok ? r.json() : Promise.reject(new Error(`/login/models: ${r.status}`))); }
+    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";
@@ -326,7 +326,7 @@ export default function (page) {
   }
 
   // ---- what the server says
-  page.on("login", (ev) => {
+  page.on("model", (ev) => {
     if (!sheet.open) return;
     const err = sheet.querySelector(".error");
     if (ev.step === "error") {
@@ -354,7 +354,7 @@ export default function (page) {
     onSignIn(ev);
   });
 
-  fetch("/login/on").then((r) => {  // CHALKY_LOGIN=off: the server has no /login, and the page no commands
+  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");

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/{app/extensions/login/index.ts → agent/extensions/model/login.ts}

@@ -1,38 +1,39 @@
-// Login: connect models from the page and pick one (browser.js: /login, /logout, /model). pi's own login does the work, the call its
+// 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 app/auth.json (pi's; never versioned), custom endpoints in app/models.json
-// (pi's; no secrets), this install's device id (OpenAI's sign-in asks for one) and the model choices in state/login.json:
+// 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.login.modelFor(name, session) when it starts an agent: its own choice, else the all-agents
-// one, else nothing (then the MODEL_BASE_URL endpoint, extensions/model); a choice whose login is gone is skipped.
+// 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 /login/on       204 (so the page knows login is on)
-//   GET /login/models   {groups: [{provider, name, models: [{id, name, context}]}] (usable now), default, agents: [{name, model, own}]}
-//   GET /login          {providers: [{id, name, subscription, status}], custom: [{id, baseUrl, api, models, status}]}
+//   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       login_start {provider}, login_answer {text}, login_cancel,
-//                       login_custom {id, api, baseUrl, key?, models: [names]}, login_list_models {baseUrl, api, key?, id?},
-//                       logout {provider}, model_set {for: "all" | <agent>, provider?, id?} (for an agent, no provider: back to all agents')
-//   event "login"       {step: "notify", event} (pi: open this link / enter this code / waiting) | {step: "prompt", prompt}
-//                       (pi asks: the page answers with login_answer) | {step: "prompt_done"} (pi stopped asking: the
+//   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}
-//                       (login_list_models' answer) | {step: "changed"} (a login, endpoint or model changed: agents are synced)
+//                       (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.app, "models.json");
-const STATE = path.join(host.state, "login.json");
+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("login-runtime"))
-  host.shared.set("login-runtime", ModelRuntime.create({ authPath: path.join(host.app, "auth.json"), modelsPath: MODELS }));
-const runtime = (): Promise<ModelRuntime> => host.shared.get("login-runtime");
+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")) : {});
@@ -50,13 +51,13 @@ function modelFor(name: string, session: any) {
     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");  // extensions/model
+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.login = { modelFor };
+host.api.model = { modelFor };
 
 async function status(rt: ModelRuntime, id: string) {
   if (!rt.getProviderAuthStatus(id).configured) return undefined;
@@ -66,25 +67,25 @@ async function status(rt: ModelRuntime, id: string) {
 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("login", { step: "changed" });
+  host.broadcast("model", { step: "changed" });
 }
 
-const fail = (e: any) => host.broadcast("login", { step: "error", text: e?.message ?? String(e) });
+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("login-checked")) return;
-    host.shared.set("login-checked", true);
+    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("/login/on", (_req: any, res: any) => res.writeHead(204).end());  // browser.js: add the commands only when this answers
-  host.routes.set("/login/models", (_req: any, res: any) => models(res).catch((e) =>
+  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();
@@ -101,7 +102,7 @@ export default function (pi: ExtensionAPI) {
         own: !!s.agents?.[a.name] })) }));
   }
 
-  host.routes.set("/login", (_req: any, res: any) => list(res).catch((e) =>
+  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();
@@ -115,35 +116,35 @@ export default function (pi: ExtensionAPI) {
       .end(JSON.stringify({ providers: providers.sort((a, b) => a.name.localeCompare(b.name)), custom: list }));
   }
 
-  host.pageHandlers.set("login", async (msg: any) => {
-    const flow = host.shared.get("login-flow");  // the sign-in under way: {abort, answer?}
-    if (msg.type === "login_answer") return flow?.answer?.(String(msg.text ?? ""));
-    if (msg.type === "login_cancel") return flow?.abort.abort();
+  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 === "login_start") {
+    if (msg.type === "model_login") {
       flow?.abort.abort();  // one at a time
       const abort = new AbortController(), me: any = { abort };
-      host.shared.set("login-flow", me);
+      host.shared.set("model-flow", me);
       try {
         await (await runtime()).login(String(msg.provider), "oauth", {
           signal: abort.signal,
-          notify: (event) => host.broadcast("login", { step: "notify", event }),
+          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("login", { step: "prompt_done" }); reject(new Error("Login cancelled")); };
+            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("login", { step: "prompt", prompt });
+            host.broadcast("model", { step: "prompt", prompt });
           }),
         }, { getDeviceId: deviceId });
         await synced();
-        host.broadcast("login", { step: "done", provider: msg.provider });
-      } catch (e) { if (abort.signal.aborted) host.broadcast("login", { step: "cancelled" }); else fail(e); }  // ✕: not an error
-      finally { if (host.shared.get("login-flow") === me) host.shared.delete("login-flow"); }
+        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 === "login_custom") {
+    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();
@@ -161,11 +162,11 @@ export default function (pi: ExtensionAPI) {
         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("login", { step: "done", provider: id });
+        host.broadcast("model", { step: "done", provider: id });
       } catch (e) { fail(e); }
     }
 
-    if (msg.type === "login_list_models") {  // the endpoint's own list (GET <baseUrl>/models); the key never goes to the page
+    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 : "");
@@ -175,7 +176,7 @@ export default function (pi: ExtensionAPI) {
         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("login", { step: "models", models });
+        host.broadcast("model", { step: "models", models });
       } catch (e) { fail(e); }
     }
 
@@ -195,11 +196,11 @@ export default function (pi: ExtensionAPI) {
       writeState(s);
       try {
         for (const a of host.agents.values()) await apply(a);
-        host.broadcast("login", { step: "changed" });
+        host.broadcast("model", { step: "changed" });
       } catch (e) { fail(e); }
     }
 
-    if (msg.type === "logout") {
+    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);

package/agent/extensions/note/README.md

@@ -0,0 +1,35 @@
+# Notes on the page (the note extension)
+A note is a thread pinned on a thing on the page: a numbered pin, and a bubble with who wrote what, a reply box and
+✓ Done. You and the user can both start one, and both write in it.
+
+## The user's notes: "[note on the page] <their words>"
+They clicked something (or drew around it, or dropped files there) and wrote. You get the target: the card and the
+block (the chain of block ids, outermost first), the element they clicked (inside app frames too), the part (if the
+thing has partAt), its text, and the file it comes from. Act on that exact thing.
+- If the text is data (a table row, a score), change the card's data, not the block or the app's code.
+- "here" means the spot: to add something there, card_show(..., place={"x", "y"}) with its position, and keep
+  it small (as wide as its content). On empty space the spot is all there is to the target.
+- A note with an "area" came with a drawing: the user circled that box. On empty space, build what they ask for
+  inside it: card_show(..., place={"x", "y", "width", "height"}) from the area. On a card, the drawing marks the
+  part of it the note is about: change that part, and leave the card's place and size alone.
+  If the thing drawn on can say what is inside the drawing (partIn), the part lists exactly what was circled
+  (cells and values, paragraphs, lines, a picture of the area): the note is about that.
+- A note with "files": the user dropped those files there, from their computer or their file panel (all in
+  {workspace}/drops/). Look at them (read shows you pictures) and do what the note says with them, at that spot
+  or on that card.
+- "[combine on the page]": the user dragged card A onto card B and said how to combine them. Change B so it takes
+  A in, as they said: card_show(card=B, ..., made_from=<B's made_from plus A>, instruction=<their words>,
+  about=<updated>). Read A's data with {"ref": "A", "path": "/..."} props, so it stays live; copy only what has to
+  change shape. Never change or remove A: the user closes it when they want (B then gets a copy of what it read,
+  automatically). Keep what B already showed unless they said otherwise.
+- Pointing is only as precise as your names: give the cards, blocks and elements you build a clear id or data-name.
+
+## Threads
+- Answer a note in its thread: note_reply(id, text), any length. Don't repeat it in chat; your chat can be empty.
+- Their reply in a thread comes as "[note reply on the page] <words>", with the note's id and the thread so far.
+- Start a thread yourself with note_add(on, text) when there is something to explain or ask about one thing
+  ("this total leaves out tax: add it?"). on is as doodle_mark's: {card, block, element, text, mark}. For a short
+  pointer ("this one") use the pen (doodle_mark) instead.
+- When you did what a note asked, note_done(id): its pin turns into a faded ✓, which the user can reopen or delete. If your
+  answer leaves anything to them (you suggest something, ask, or offer a choice), leave the note open: their reply
+  comes in the same thread, and you close it once that is settled. The user can close one too (✓ Done); you get an fyi.