@monster-orange/den 0.4.15 → 0.4.16

package/src/ui/server/index.ts

@@ -244,6 +244,7 @@ import {
   githubClientId,
   githubEndpoints,
   noClientIdMessage,
+  GITHUB_SIGNIN_DOCS,
 } from "../../shared/github-app.js";
 import { githubDeviceClient } from "../../shared/github-device.js";
 import { readWebOwner } from "../../shared/web-owner.js";
@@ -1331,10 +1332,19 @@ function denEdgeRoutes(): { host: string; url: string }[] {
   }
 }
 
-/** What the signed-out page says about Sign in with GitHub. */
-function githubSigninState(): "ready" | "no_client_id" | "no_owner" {
-  if (!GITHUB_CLIENT_ID) return "no_client_id";
-  return readWebOwner(getStateDir()) ? "ready" : "no_owner";
+/**
+ * What the signed-out page says about Sign in with GitHub: its state, and
+ * (SEC-2a-UX) the owner's login once one is linked, for step 1's "Owner:
+ * @login".
+ */
+function githubSignin():
+  | { state: "no_client_id" | "no_owner" }
+  | { state: "ready"; ownerLogin: string } {
+  if (!GITHUB_CLIENT_ID) return { state: "no_client_id" };
+  const owner = readWebOwner(getStateDir());
+  return owner
+    ? { state: "ready", ownerLogin: owner.login }
+    : { state: "no_owner" };
 }
 
 /**
@@ -1426,6 +1436,7 @@ function sendSignedOut(
   const cmd = cliCommand(bin, "web", "login", ...loginArgs);
   const ssh = sshTargetOf(req);
   const user = sshUserNow();
+  const gh = githubSignin();
   res.setHeader("Cache-Control", "no-store");
   sendErrorPage(req, res, {
     status: 401,
@@ -1449,8 +1460,10 @@ function sendSignedOut(
       },
       // SEC-2a: Sign in with GitHub, and why it can't be offered yet.
       github: {
-        state: githubSigninState(),
+        state: gh.state,
         owner: cliCommand(bin, "web", "owner", "link"),
+        ...(gh.state === "ready" ? { ownerLogin: gh.ownerLogin } : {}),
+        learnMore: GITHUB_SIGNIN_DOCS,
         ...(GITHUB_CLIENT_ID
           ? {}
           : { message: noClientIdMessage(product().cli) }),
@@ -4073,6 +4086,10 @@ async function handleRequest(
       actor: null,
       signedIn: false,
       ...(g && !g.beyond ? { identity: { kind: "local" } } : {}),
+      // SEC-2a-UX: the signed-out page watches this, so Sign in with
+      // GitHub appears once an owner is linked, with no reload. The
+      // owner's login is what that page shows anyway.
+      ...(g?.beyond || !g ? { github: githubSignin() } : {}),
     });
   }
   // Sign out: this browser's session ends and its cookie is cleared.

package/src/ui/server/public/agents-page.js

@@ -565,6 +565,7 @@ async function refresh() {
   } catch {
     /* the last list stays; the next ask may answer */
   }
+  followAgents();
   st.scopeLabel = scopeLabelFor(viewWorkspaces());
   paintList();
   paintSub();
@@ -572,14 +573,78 @@ async function refresh() {
   const strip = st.root.querySelector("#agr > .agtabs");
   if (strip) paintTabs(strip);
   if (!st.root.isConnected) return;
-  st.timer = setTimeout(() => {
-    if (!document.hidden) void refresh();
-    else st.timer = setTimeout(refresh, REFRESH_MS);
-  }, REFRESH_MS);
+  // A pane whose session just ended may have a new one soon (a persona
+  // change, a resume): look again every second for a while.
+  const soon = Date.now() < (st.followUntil ?? 0);
+  st.timer = setTimeout(
+    () => {
+      if (!document.hidden) void refresh();
+      else st.timer = setTimeout(refresh, REFRESH_MS);
+    },
+    soon ? FOLLOW_MS : REFRESH_MS,
+  );
 }
 
 const rowOf = (id) => st.data?.sessions?.find((s) => s.id === id) ?? null;
 
+/** How often, and how long, the list is read after a pane's session ends. */
+const FOLLOW_MS = 1_000;
+const FOLLOW_FOR_MS = 15_000;
+
+/**
+ * A pane follows its agent, not a session (AG-18): when the agent's
+ * session changes (Change persona, Resume, a rotation), the pane moves to
+ * the new one in the same slot, its scrollback kept.
+ */
+function followAgents() {
+  for (const p of [...st.panes.values()]) {
+    const r = rowOf(p.id);
+    if (r?.kind === "agent" && r.agent) {
+      p.agent = r.agent;
+      p.agentWs = r.workspace;
+    }
+    if (!p.agent || p.closed || r?.state === "running") continue;
+    const next = st.data?.sessions?.find(
+      (x) =>
+        x.kind === "agent" &&
+        x.agent === p.agent &&
+        x.workspace === p.agentWs &&
+        x.id !== p.id &&
+        x.state === "running",
+    );
+    if (next && !st.panes.has(next.id)) retarget(p, next);
+  }
+}
+
+/** Move pane `p` to session row `row`, where it was. */
+function retarget(p, row) {
+  const old = p.id;
+  const sock = p.sock;
+  p.sock = null;
+  try {
+    sock?.close(1000, "switched");
+  } catch {
+    /* already closed */
+  }
+  st.panes.delete(old);
+  p.id = row.id;
+  st.panes.set(row.id, p);
+  st.open = st.open.map((x) => (x === old ? row.id : x));
+  if (st.side.delete(old)) st.side.add(row.id);
+  if (st.cur === old) st.cur = row.id;
+  p.el.dataset.id = row.id;
+  p.el.setAttribute("aria-label", row.label ?? row.id);
+  p.exited = false;
+  p.lost = false;
+  p.term?.write(
+    `\r\n\x1b[2m${t("ag.switched", { p: row.persona ?? row.agent })}\x1b[0m\r\n`,
+  );
+  paintBar(p);
+  paintLayout();
+  writeUrl();
+  void connect(p);
+}
+
 // ── the panes ───────────────────────────────────────────────────────────
 
 async function loadXterm() {
@@ -871,13 +936,18 @@ function paintBar(p) {
   const reconnect = p.lost
     ? `<button type="button" class="den-btn sm" data-act="reconnect">${esc(t("ag.reconnect"))}</button>`
     : "";
+  // AG-18: ⋯, its menu: Change persona… (a runtime that can resume).
+  const more =
+    r?.kind === "agent" && r.personaChange
+      ? `<button type="button" class="den-btn sm" data-act="more" aria-haspopup="menu" aria-expanded="false" aria-label="${esc(t("ag.more", { id: r.agent }))}" title="${esc(t("ag.more", { id: r.agent }))}">⋯</button>`
+      : "";
   bar.innerHTML =
     `<span class="den-dot ${tone}" aria-hidden="true"></span>` +
     `<b>${esc(name)}</b><span class="where mono">${esc(where)}</span>` +
     (r?.tokenRevoked
       ? `<span class="tagx warn" title="${esc(t("ag.revokedTip"))}">${esc(t("ag.revoked"))}</span>`
       : "") +
-    `<span class="x">${reconnect}${stop}${resume}<button type="button" class="den-btn sm" data-act="close" aria-label="${esc(t("ag.detachName", { id: name }))}" title="${esc(t("ag.detach"))}">×</button></span>`;
+    `<span class="x">${reconnect}${stop}${resume}${more}<button type="button" class="den-btn sm" data-act="close" aria-label="${esc(t("ag.detachName", { id: name }))}" title="${esc(t("ag.detach"))}">×</button></span>`;
   // Tabs: the tab's × closes it; the pane's bar has none.
   const x = bar.querySelector('[data-act="close"]');
   if (x) x.hidden = shownLayout() === "tabs";
@@ -1043,6 +1113,8 @@ async function connect(p) {
         paintBar(p);
       } else if (msg?.type === "exit") {
         p.exited = true;
+        // Its agent may continue in a new session (followAgents).
+        st.followUntil = Date.now() + FOLLOW_FOR_MS;
         const code =
           typeof msg.exitCode === "number" ? ` (${msg.exitCode})` : "";
         p.term?.write(`\r\n${t("ag.exitedLine", { code })}\r\n`);
@@ -1255,7 +1327,7 @@ async function openPane(id, { front = true } = {}) {
     ) {
       if (e.isComposing) return true;
       e.preventDefault();
-      if (softNewlineKey(e)) typeIn(softNewlineOf(id));
+      if (softNewlineKey(e)) typeIn(softNewlineOf(p.id));
       return false;
     }
     return true;
@@ -1349,9 +1421,13 @@ async function restartRow(r, verb, button) {
         { id: r.agent },
       ),
     );
-    if (st.panes.has(r.id)) closePane(r.id, { quiet: true });
+    // Its open pane follows it to the new session (followAgents, in
+    // refresh); one that couldn't (not running yet) is closed for it.
     await refresh();
-    if (out?.agent?.sessionId) await openPane(out.agent.sessionId);
+    const next = out?.agent?.sessionId;
+    if (next && next !== r.id && st.panes.has(r.id))
+      closePane(r.id, { quiet: true });
+    if (next) await openPane(next);
   } catch (err) {
     window.denShell?.errorToast?.(err);
     await refresh();
@@ -1538,6 +1614,9 @@ const sd = {
   // AG-17.1, Bring in: null for Start; else the workspace's conversations,
   // the runtimes that can't bring one in, and the one picked.
   bring: null,
+  // AG-18, Change persona: null; else the agent's row (id, workspace,
+  // persona, model) whose persona changes.
+  change: null,
 };
 
 /** The conversation picked in Bring in, when it can be brought in. */
@@ -1625,7 +1704,38 @@ function pickConversation(id) {
   sd.bring.pick = id;
   for (const b of st.root.querySelectorAll("#ag-conv [data-cid]"))
     b.setAttribute("aria-checked", String(b.dataset.cid === id));
-  paintRuntime(false);
+  // AG-17.1c: its suggested persona, preselected (never submitted).
+  if (c.suggest && (sd.data?.personas ?? []).some((p) => p.id === c.suggest))
+    pickPersona(c.suggest);
+  else paintRuntime(false);
+}
+
+/**
+ * AG-17.1c, AG-18: what the persona changes, in one short list under it:
+ * the model kept (or the one picked), what it works as from now on, and
+ * for Bring in the MCP servers it won't have.
+ */
+function paintKeep() {
+  const el = $d("#ag-keep");
+  if (!el) return;
+  const p = curPersona();
+  const from = sd.bring ? bringPick() : sd.change;
+  el.hidden = !p || !from;
+  if (el.hidden) return void (el.innerHTML = "");
+  const items = [];
+  if (sd.model) items.push(t("ag.keep.modelNew", { m: sd.model }));
+  else if (from.model) items.push(t("ag.keep.model", { m: from.model }));
+  items.push(
+    t("ag.keep.from", {
+      p: personaName(p),
+      mode: t(`pm.${p.permission || "ask"}`),
+    }),
+  );
+  if (sd.bring && from.lost?.length)
+    items.push(t("ag.keep.lost", { s: from.lost.join(", ") }));
+  el.innerHTML = items
+    .map((x, i) => `<li data-keep="${i}">${esc(x)}</li>`)
+    .join("");
 }
 
 const $d = (sel) => st.root.querySelector(sel);
@@ -1636,6 +1746,10 @@ const curPersona = () =>
 
 /** The runtime the dialog will start: the one picked, else the persona's. */
 function chosenRuntime() {
+  // Change persona and Bring in: the agent's, or the conversation's.
+  if (sd.change?.runtime) return sd.change.runtime;
+  const conv = sd.bring ? bringPick() : null;
+  if (conv?.runtime) return conv.runtime;
   const p = curPersona();
   return $d("#ag-runtime").value || personaRuntime(sd.data, p);
 }
@@ -1657,8 +1771,9 @@ function plistHtml() {
   const rows = personaListHtml(sd.f, ps, cats, (p) =>
     personaRowHtml(p, p.id === sd.pid, sd.data),
   );
-  // Bring in continues a conversation: it needs a persona.
-  if (sd.bring) return rows;
+  // Bring in continues a conversation, and a change keeps one: each needs
+  // a persona.
+  if (sd.bring || sd.change) return rows;
   return (
     rows +
     `<div class="pgh"><span>${esc(t("ag.session"))}</span><span></span></div>` +
@@ -1670,6 +1785,18 @@ function paintPlist(keepScroll = true) {
   const l = $d("#ag-persona");
   const top = l.scrollTop;
   l.innerHTML = plistHtml();
+  // AG-18: the agent's persona now, marked.
+  const cur =
+    sd.change &&
+    [...l.querySelectorAll("[data-pid]")].find(
+      (b) => b.dataset.pid === sd.change.persona,
+    );
+  cur
+    ?.querySelector(".pn")
+    ?.insertAdjacentHTML(
+      "beforeend",
+      ` <span class="tagx" data-current>${esc(t("ag.pc.current"))}</span>`,
+    );
   l.scrollTop = keepScroll ? top : 0;
 }
 
@@ -1703,6 +1830,7 @@ function paintDetails() {
  */
 function paintRuntime(reset) {
   paintRuntimeFields(reset);
+  paintKeep();
   // Last: a Name that names a running agent disables Start (AG-10.10b).
   paintStartsAs();
 }
@@ -1714,10 +1842,22 @@ function paintRuntimeFields(reset) {
   const plain = sd.pid === PLAIN;
   // Bring in: the conversation's runtime, its own history; no first
   // instruction, no Advanced (it keeps what the persona gives).
-  $d("#ag-r-l").hidden = plain || !!sd.bring;
-  $d("#ag-task-l").hidden = plain || !!sd.bring;
-  $d("#ag-adv").hidden = plain || !!sd.bring;
-  $d("#ag-name-l").hidden = plain || !!sd.bring;
+  // Change persona: the agent's runtime and name stay. Advanced (the
+  // model) shows for both (AG-17.1c, AG-18).
+  const keeps = !!sd.bring || !!sd.change;
+  $d("#ag-r-l").hidden = plain || keeps;
+  $d("#ag-task-l").hidden = plain || keeps;
+  $d("#ag-adv").hidden = plain;
+  $d("#ag-name-l").hidden = plain || keeps;
+  if (sd.change) {
+    $d("#ag-r-miss").hidden = true;
+    ready.hidden = true;
+    const p = curPersona();
+    const ok = !!p && (p.id !== sd.change.persona || !!sd.model);
+    go.disabled = !ok;
+    go.dataset.blocked = ok ? "" : "persona";
+    return;
+  }
   if (sd.bring) {
     $d("#ag-r-miss").hidden = true;
     ready.hidden = true;
@@ -1784,6 +1924,18 @@ function paintAdvanced() {
   const name = runtimeName(sd.data?.runtimes ?? [], rt);
   const def = personaModel();
   const models = rtv?.models ?? [];
+  // AG-17.1c, AG-18: the conversation's model stays unless one is picked.
+  const from = sd.bring ? bringPick() : sd.change;
+  if (sd.bring || sd.change) {
+    const keep = from?.model
+      ? t("ag.keep.opt", { m: from.model })
+      : t("ag.keep.optNone");
+    body.innerHTML =
+      `<p>${esc(t("ag.keep.advNote"))}</p>` +
+      `<div class="two"><label class="fld"><span>${esc(t("ag.new.model"))}</span><select id="ag-model"${models.length ? "" : " disabled"}>${models.length ? modelOptionsHtml(sd.data, rt, sd.model, keep) : `<option value="">${esc(keep)}</option>`}</select></label>` +
+      `<label class="fld"><span>${esc(t("ag.new.ver"))}</span><select id="ag-ver"${models.length && sd.model ? "" : " disabled"}>${versionOptionsHtml(sd.data, rt, sd.model, sd.ver, t("ag.new.verDef", { v: versionLabel("latest") }))}</select></label></div>`;
+    return;
+  }
   const model = sd.model || def.model;
   const first = t("ag.new.modelDef", {
     // No model of its own: just the version, so the label fits the select.
@@ -1864,8 +2016,14 @@ async function fillForWorkspace(ws) {
     return false;
   }
   if (!(await fillConversations(ws))) return false;
-  if (sd.bring && sd.pid === PLAIN) sd.pid = "";
+  if ((sd.bring || sd.change) && sd.pid === PLAIN) sd.pid = "";
   const ps = sd.data?.personas ?? [];
+  // AG-17.1c: the picked conversation's suggested persona, preselected.
+  const sug = sd.bring ? bringPick()?.suggest : null;
+  if (sug && ps.some((p) => p.id === sug)) sd.pid = sug;
+  // AG-18: its persona now (marked; Change stays off until another).
+  if (sd.change && ps.some((p) => p.id === sd.change.persona))
+    sd.pid = sd.change.persona;
   if (sd.pid !== PLAIN && !ps.some((p) => p.id === sd.pid)) {
     // The first persona the list shows (grouped by category).
     const cats = (sd.data?.categories ?? []).map((c) => c.id);
@@ -1882,19 +2040,41 @@ async function fillForWorkspace(ws) {
 }
 
 /** The dialog's words for Start, or for Bring in (AG-17.1). */
-function dialogMode(bring) {
+function dialogMode(bring, change = null) {
   sd.bring = bring ? { list: [], runtimes: [], root: "", pick: "" } : null;
-  $d("#ag-dlg-h").textContent = t(bring ? "ag.bring.title" : "ag.new.title");
-  $d("#ag-note").textContent = t(bring ? "ag.bring.note" : "ag.new.note");
-  $d("#ag-go").textContent = t(bring ? "ag.bring.go" : "ag.go");
+  sd.change = change;
+  $d("#ag-dlg-h").textContent = change
+    ? t("ag.pc.title", { id: change.name })
+    : t(bring ? "ag.bring.title" : "ag.new.title");
+  $d("#ag-note").textContent = t(
+    change ? "ag.pc.note" : bring ? "ag.bring.note" : "ag.new.note",
+  );
+  $d("#ag-go").textContent = goLabel();
   $d("#ag-conv-f").hidden = !bring;
 }
 
-async function openStart(bring = false) {
+/** The submit button's words for the dialog's mode. */
+function goLabel() {
+  return t(sd.change ? "ag.pc.go" : sd.bring ? "ag.bring.go" : "ag.go");
+}
+
+/** AG-18: Change persona… for agent row `r` (its persona, model, name). */
+function openPersonaChange(r) {
+  return openStart(false, {
+    id: r.agent,
+    workspace: r.workspace,
+    persona: r.persona,
+    runtime: r.runtime,
+    model: r.model || "",
+    name: paneName(r),
+  });
+}
+
+async function openStart(bring = false, change = null) {
   const dlg = $d("#ag-dlg");
   if (!dlg || dlg.open) return;
-  dialogMode(bring);
-  const shown = viewWorkspaces();
+  dialogMode(bring, change);
+  const shown = change ? [change.workspace] : viewWorkspaces();
   const wsSel = $d("#ag-ws");
   wsSel.innerHTML = shown
     .map((w) => `<option value="${esc(w)}">${esc(w)}</option>`)
@@ -1989,7 +2169,8 @@ export function nameSlug(name) {
 function paintStartsAs() {
   const el = $d("#ag-as");
   if (!el) return;
-  const p = sd.pid && sd.pid !== PLAIN && !sd.bring ? curPersona() : null;
+  const p =
+    sd.pid && sd.pid !== PLAIN && !sd.bring && !sd.change ? curPersona() : null;
   el.hidden = !p;
   el.textContent = "";
   if (!p) return;
@@ -2059,6 +2240,7 @@ async function submitStart(form) {
   const ws = form.querySelector("#ag-ws").value || viewWorkspaces()[0];
   if (!ws || !sd.pid) return;
   if (sd.bring) return submitBringIn(ws);
+  if (sd.change) return submitPersonaChange();
   const bad = sd.extras.find((c) => commandProblem(c));
   if (sd.pid !== PLAIN && bad)
     return showStartError(new Error(t("pe.badCmd", { c: bad })));
@@ -2095,11 +2277,73 @@ async function submitStart(form) {
     showStartError(err);
   } finally {
     go.disabled = false;
-    go.textContent = t("ag.go");
+    go.textContent = goLabel();
+    if (dlg.open) paintRuntime(false);
+  }
+}
+
+/**
+ * AG-18: change the agent's persona (the same conversation resumes as the
+ * new one). Mid-turn the server asks: After this turn, or Stop it now.
+ */
+async function submitPersonaChange(when) {
+  const dlg = $d("#ag-dlg");
+  const go = $d("#ag-go");
+  const ch = sd.change;
+  const p = curPersona();
+  if (!ch || !p) return;
+  const body = { persona: p.id };
+  if (sd.model) body.model = sd.model;
+  if (sd.model && sd.ver) body.version = sd.ver;
+  if (when) body.when = when;
+  go.disabled = true;
+  go.textContent = t("ag.pc.going");
+  $d("#ag-err").hidden = true;
+  try {
+    const r = await api(
+      "POST",
+      `/api/workspaces/${encodeURIComponent(ch.workspace)}/agents/${encodeURIComponent(ch.id)}/persona`,
+      body,
+    );
+    window.denShell?.toast?.(
+      t(r?.pending ? "ag.pc.pending" : "ag.pc.done", {
+        id: ch.name,
+        p: personaName(p),
+      }),
+    );
+    for (const w of r?.warnings ?? []) window.denShell?.toast?.(w);
+    dlg.close?.();
+    await refresh();
+  } catch (err) {
+    if (err?.code === "busy") showBusy();
+    else showStartError(err);
+  } finally {
+    go.textContent = goLabel();
     if (dlg.open) paintRuntime(false);
   }
 }
 
+/** It's mid-turn: never cut silently; the person picks (AG-18). */
+function showBusy() {
+  const el = $d("#ag-err");
+  el.textContent = t("ag.pc.busy") + " ";
+  const b = (id, label, when) => {
+    const x = document.createElement("button");
+    x.type = "button";
+    x.className = "den-btn sm";
+    x.id = id;
+    x.textContent = label;
+    x.addEventListener("click", () => void submitPersonaChange(when));
+    return x;
+  };
+  el.append(
+    b("ag-pc-after", t("ag.pc.after"), "after-turn"),
+    " ",
+    b("ag-pc-now", t("ag.pc.now"), "now"),
+  );
+  el.hidden = false;
+}
+
 /** Bring in (AG-17.1): the runtime's resume of the conversation picked. */
 async function submitBringIn(ws) {
   const dlg = $d("#ag-dlg");
@@ -2113,7 +2357,13 @@ async function submitBringIn(ws) {
     const r = await api(
       "POST",
       `/api/workspaces/${encodeURIComponent(ws)}/conversations/${encodeURIComponent(c.id)}/import`,
-      { persona: p.id, runtime: c.runtime },
+      {
+        persona: p.id,
+        runtime: c.runtime,
+        // AG-17.1c: the conversation's own model unless one is picked.
+        ...(sd.model ? { model: sd.model } : {}),
+        ...(sd.model && sd.ver ? { version: sd.ver } : {}),
+      },
     );
     window.denShell?.toast?.(t("ag.bring.done", { id: r?.agent?.id ?? p.id }));
     for (const w of r?.warnings ?? []) window.denShell?.toast?.(w);
@@ -2248,6 +2498,7 @@ function wireStartDialog(root) {
       sd.model = e.target.value;
       sd.ver = "";
       paintAdvanced();
+      paintRuntime(false);
     } else if (id === "ag-ver") sd.ver = e.target.value;
   });
   // ↑ ↓ move through the persona list (a radio group).
@@ -2402,6 +2653,16 @@ export async function mountAgentsPage(root) {
       const r = rowOf(id);
       if (r) void restartRow(r, "resume", b);
     } else if (b.dataset.act === "reconnect") void connect(p);
+    else if (b.dataset.act === "more") {
+      const r = rowOf(id);
+      if (!r) return;
+      window.denShell?.openMenu?.(b, {
+        label: t("ag.more", { id: r.agent }),
+        items: [
+          { label: t("ag.pc.item"), onSelect: () => void openPersonaChange(r) },
+        ],
+      });
+    }
   });
   root.querySelector("#ag-start").addEventListener("click", () => {
     void openStart();

package/src/ui/server/public/agents.html

@@ -701,6 +701,7 @@
               aria-label="Persona"
             ></div>
             <div id="ag-detrow"></div>
+            <ul class="den-keep" id="ag-keep" role="status" hidden></ul>
           </div>
           <div class="two">
             <label class="fld" id="ag-r-l"

package/src/ui/server/public/error-page.js

@@ -226,30 +226,84 @@ export function landingAfterSignIn(loc) {
 }
 
 /**
- * Sign in with GitHub (SEC-2a): the main button, shown only when a client
- * id is configured. The server runs GitHub's device flow; the page shows
- * the code and github.com/login/device, polls the server, and goes on once
- * the owner approved it (the server sets the cookie). Another account is
- * refused by name. With no owner linked, it says what to run on the server.
+ * Sign in with GitHub (SEC-2a): shown only when a client id is configured.
+ * The server runs GitHub's device flow; the page shows the code and
+ * github.com/login/device, polls the server, and goes on once the owner
+ * approved it (the server sets the cookie). Another account is refused by
+ * name.
+ *
+ * SEC-2a-UX: the same three steps in every state (link the owner on the
+ * machine, enter the code on GitHub, come back and press the button).
+ * Once an owner is linked, step 1 is done and names it, and the button
+ * follows the steps. Below them: only the owner's account signs in this
+ * way, and Learn more.
  */
 function githubBlock(s, t) {
   const g = s.github;
   if (!g || s.localhost || g.state === "no_client_id") return "";
   const host = s.machine || "";
-  if (g.state === "no_owner")
-    return (
-      `<div id="den-gh"><p>${withHost(t, "err.signin.githubNoOwner", { name: s.name, host })}</p>` +
-      cmdLine("den-gh-owner-cmd", g.owner, t) +
-      `</div>`
-    );
+  const ready = g.state === "ready";
+  const step1 = withHost(t, "err.signin.ghStep1", {
+    host,
+    cmd: "\u0000",
+  }).replace("\u0000", `<code class="mono">${esc(g.owner)}</code>`);
   return (
-    `<div id="den-gh"><div class="acts" style="margin-top:0">` +
-    `<button type="button" class="btn primary" id="den-gh-start">${esc(t("err.signin.github"))}</button>` +
-    `</div><p class="den-gh-note" style="margin-top:8px">${esc(t("err.signin.githubNote", { name: s.name }))}</p>` +
-    `<div id="den-gh-flow" aria-live="polite"></div></div>`
+    `<div id="den-gh">` +
+    `<ol class="den-steps" id="den-gh-steps">` +
+    `<li id="den-gh-step1"${ready ? ' class="done"' : ""}><p>${step1}</p>` +
+    (ready && g.ownerLogin
+      ? `<p class="den-gh-owner" id="den-gh-owner">${esc(t("err.signin.ghOwner", { login: g.ownerLogin }))}</p>`
+      : "") +
+    `</li>` +
+    `<li id="den-gh-step2"><p>${esc(t("err.signin.ghStep2"))}</p></li>` +
+    `<li id="den-gh-step3"><p>${esc(t("err.signin.ghStep3"))}</p></li>` +
+    `</ol>` +
+    (ready
+      ? `<div class="acts" style="margin-top:0">` +
+        `<button type="button" class="btn primary" id="den-gh-start">${esc(t("err.signin.github"))}</button>` +
+        `</div><div id="den-gh-flow" aria-live="polite"></div>`
+      : "") +
+    `<p class="den-gh-note" id="den-gh-only">${esc(t("err.signin.ghOnly"))}` +
+    (g.learnMore
+      ? ` <a id="den-gh-learn" href="${esc(g.learnMore)}" target="_blank" rel="noopener noreferrer">${esc(t("err.signin.ghLearn"))}</a>`
+      : "") +
+    `</p></div>`
   );
 }
 
+/** How often, and how long, the page watches for an owner (SEC-2a-UX). */
+export const OWNER_POLL_MS = 5000;
+const OWNER_WATCH_MS = 30 * 60 * 1000;
+
+/**
+ * SEC-2a-UX: with no owner linked yet, watch the session probe; once the
+ * owner is linked on the machine, step 1 shows done and Sign in with
+ * GitHub appears, with no reload.
+ */
+function watchOwner(root, t, s, pollMs = OWNER_POLL_MS) {
+  if (s.github?.state !== "no_owner" || !root.querySelector("#den-gh")) return;
+  const until = Date.now() + OWNER_WATCH_MS;
+  const tick = () => {
+    if (Date.now() > until || !root.querySelector("#den-gh")) return;
+    fetch("/api/session", { cache: "no-store", credentials: "same-origin" })
+      .then((r) => r.json().catch(() => ({})))
+      .then((b) => {
+        const g = b?.github;
+        if (g?.state === "ready" && g.ownerLogin) {
+          s.github = { ...s.github, state: "ready", ownerLogin: g.ownerLogin };
+          const old = root.querySelector("#den-gh");
+          if (!old) return;
+          old.outerHTML = githubBlock(s, t);
+          wireGithub(root, t, s);
+          return;
+        }
+        setTimeout(tick, pollMs);
+      })
+      .catch(() => setTimeout(tick, pollMs));
+  };
+  setTimeout(tick, pollMs);
+}
+
 /** The device flow on the page: start, show the code, poll, go on. */
 function wireGithub(root, t, s) {
   const start = root.querySelector("#den-gh-start");
@@ -604,6 +658,7 @@ function mountSignedOut(root, sh, d) {
     `</div>`;
   wireCopy(root, t);
   wireGithub(root, t, s);
+  watchOwner(root, t, s, window.__denOwnerPollMs || OWNER_POLL_MS);
   wirePair(root, t, s);
   if (s.expired) return;
   let tried = false;