@monster-orange/den 0.4.4 → 0.4.6

package/src/ui/server/public/settings-registry.js

@@ -28,6 +28,7 @@
  * config.
  */
 import { themeNotice, themeOptions } from "./appearance.js";
+import { qrSvg } from "./qr.js";
 
 export const DEN_SETTING_CATEGORIES = [
   {
@@ -71,6 +72,14 @@ export const DEN_SETTING_CATEGORIES = [
     description:
       "The runtimes agents run on, installed first. Paths you set are this machine's only: everywhere (config/local/user.yml) or for one workspace (config/local/workspaces.yml), which wins.",
   },
+  {
+    // SEC-2a: who may come in from other devices.
+    id: "access",
+    label: "Access",
+    order: 57,
+    description:
+      "Reach this Den from your other devices: sign in with GitHub as its owner, or pair a device with a one-time link. On localhost nothing asks.",
+  },
   {
     id: "cli",
     label: "Command line",
@@ -113,6 +122,386 @@ const distRow = (id, label, description, keywords, value) => ({
 const effective = (list, chosen) =>
   chosen ?? (list || []).find((e) => e.available)?.key ?? null;
 
+// ── Access (SEC-2a) ──────────────────────────────────────────────────────
+// What these rows draw, and the routes they use (github-routes.ts). Pure
+// helpers are exported for tests.
+
+function escHtml(v) {
+  return String(v ?? "").replace(
+    /[&<>"']/g,
+    (c) =>
+      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[
+        c
+      ],
+  );
+}
+
+/** "3 min ago", "2 h ago", "5 d ago", or "just now"; `now` for tests. */
+export function seenAgo(iso, now = Date.now()) {
+  const t = Date.parse(iso);
+  if (!Number.isFinite(t)) return "";
+  const s = Math.max(0, Math.round((now - t) / 1000));
+  if (s < 90) return "just now";
+  if (s < 5400) return `${Math.round(s / 60)} min ago`;
+  if (s < 129600) return `${Math.round(s / 3600)} h ago`;
+  return `${Math.round(s / 86400)} d ago`;
+}
+
+/**
+ * One linked device's line (SEC-2a: every sign-in, whatever the method):
+ * its browser and OS, "This device" for this browser, then how it signed
+ * in, when, from where (the client address and the browser), and when it
+ * was last seen.
+ */
+export function deviceLine(d, now = Date.now()) {
+  const how =
+    d.via === "github"
+      ? `signed in with GitHub${d.login ? ` (@${d.login})` : ""}`
+      : d.via === "code"
+        ? "approved with a code"
+        : "signed in with a one-time link";
+  const name = d.name || "Unknown browser";
+  const from = d.client || d.host;
+  return {
+    title: name,
+    current: !!d.current,
+    detail: [
+      how,
+      `created ${seenAgo(d.createdAt, now)}`,
+      from ? `from ${from} (${name})` : "",
+      `last seen ${seenAgo(d.lastSeenAt, now)}`,
+    ]
+      .filter(Boolean)
+      .join(" · "),
+  };
+}
+
+const ROW_STYLE =
+  "display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;padding:6px 0;border-top:1px solid var(--border)";
+const CODE_STYLE =
+  "font:22px/1.4 var(--mono);letter-spacing:0.12em;padding:6px 12px;border:1px solid var(--border);border-radius:var(--radius-button);background:var(--sunken)";
+
+/** Linking the owner in the page: start, show the code, poll the server. */
+function drawOwner(host, ctx) {
+  const api = (m, p, b) => ctx.shell.api(m, p, b);
+  let timer = null;
+  const draw = (o) => {
+    clearTimeout(timer);
+    if (o.owner) {
+      host.innerHTML =
+        `<output class="set-ro" id="set-owner">Owner: <b>@${escHtml(o.owner.login)}</b> <span class="set-note">(${escHtml(o.owner.id)})</span></output> ` +
+        '<button type="button" class="btn" id="set-owner-unlink">Unlink</button>';
+      host.querySelector("#set-owner-unlink").addEventListener("click", () =>
+        api("POST", "/api/web/owner/unlink", {})
+          .then(load)
+          .catch((e) => fail(e.message)),
+      );
+      return;
+    }
+    host.innerHTML =
+      '<output class="set-ro" id="set-owner">This Den has no owner identity yet.</output> ' +
+      (o.clientId
+        ? '<button type="button" class="btn primary" id="set-owner-link">Link your GitHub account</button>'
+        : '<span class="set-note" id="set-owner-noclient" style="flex-basis:100%">Linking needs a GitHub App client id, and none is configured: set <code>web.github_client_id</code> in config/local/user.yml, then restart the server.</span>') +
+      '<div id="set-owner-flow" style="flex-basis:100%" aria-live="polite"></div>';
+    host.querySelector("#set-owner-link")?.addEventListener("click", startLink);
+  };
+  const fail = (text) => {
+    const box = host.querySelector("#set-owner-flow");
+    if (box)
+      box.innerHTML = `<span class="set-note set-warn" role="alert">${escHtml(text)}</span>`;
+    const b = host.querySelector("#set-owner-link");
+    if (b) b.disabled = false;
+  };
+  const poll = (id) =>
+    fetch(`/api/web/owner/link/${encodeURIComponent(id)}`, {
+      cache: "no-store",
+    })
+      .then((r) => r.json())
+      .then((b) => {
+        if (b.state === "pending") {
+          timer = setTimeout(() => poll(id), 1500);
+          return;
+        }
+        if (b.state === "ok") return load();
+        fail(b.error || "Linking failed. Try again.");
+      })
+      .catch(() => fail("The server didn't answer. Try again."));
+  function startLink() {
+    const b = host.querySelector("#set-owner-link");
+    if (b) b.disabled = true;
+    api("POST", "/api/web/owner/link", {})
+      .then((f) => {
+        const box = host.querySelector("#set-owner-flow");
+        const url = f.verificationUri || "https://github.com/login/device";
+        box.innerHTML =
+          `<p class="set-note" style="margin:8px 0">Enter this code at <a href="${escHtml(url)}" target="_blank" rel="noopener noreferrer">${escHtml(url.replace(/^https:\/\//, ""))}</a> and approve the app. It asks for no permissions.</p>` +
+          `<span id="set-owner-code" style="${CODE_STYLE}">${escHtml(f.userCode)}</span> ` +
+          `<a class="btn" href="${escHtml(url)}" target="_blank" rel="noopener noreferrer">Open GitHub</a>` +
+          '<p class="set-note" style="margin:8px 0 0">Waiting for GitHub…</p>';
+        timer = setTimeout(() => poll(f.id), 1500);
+      })
+      .catch((e) => fail(e.message));
+  }
+  function load() {
+    fetch("/api/web/owner", { cache: "no-store" })
+      .then((r) => r.json())
+      .then(draw)
+      .catch(() => {
+        host.innerHTML =
+          '<output class="set-ro">The owner can only be shown signed in.</output>';
+      });
+  }
+  load();
+}
+
+function drawDevices(host, ctx) {
+  const load = () =>
+    fetch("/api/web/sessions", { cache: "no-store" })
+      .then((r) =>
+        r.ok ? r.json() : Promise.reject(new Error(String(r.status))),
+      )
+      .then((b) => {
+        const list = b.sessions || [];
+        if (!list.length) {
+          host.innerHTML =
+            '<output class="set-ro" id="set-devices">No linked devices. A browser that signs in with GitHub, is approved with a code, or opens a one-time link appears here.</output>';
+          return;
+        }
+        const now = Date.now();
+        host.innerHTML =
+          '<div id="set-devices" style="width:100%">' +
+          list
+            .map((d) => {
+              const l = deviceLine(d, now);
+              return (
+                `<div class="set-device" data-id="${escHtml(d.id)}" style="${ROW_STYLE}">` +
+                `<div style="flex:1 1 220px;min-width:0"><div>${escHtml(l.title)}` +
+                (l.current
+                  ? ' <b class="set-this-device" style="font-weight:600">· This device</b>'
+                  : "") +
+                `</div>` +
+                `<div class="set-note" style="overflow-wrap:anywhere">${escHtml(l.detail)}</div></div>` +
+                `<button type="button" class="btn" data-revoke="${escHtml(d.id)}">Revoke</button></div>`
+              );
+            })
+            .join("") +
+          "</div>";
+        host.querySelectorAll("[data-revoke]").forEach((btn) =>
+          btn.addEventListener("click", () => {
+            btn.disabled = true;
+            ctx.shell
+              .api("POST", "/api/web/logout", { id: btn.dataset.revoke })
+              .then(load)
+              .catch(() => {
+                btn.disabled = false;
+              });
+          }),
+        );
+      })
+      .catch(() => {
+        host.innerHTML =
+          '<output class="set-ro">The devices can only be listed signed in.</output>';
+      });
+  load();
+}
+
+/** One waiting device's line: its code, browser and OS, address, age. */
+export function waitingLine(w, now = Date.now()) {
+  return {
+    title: `${w.code} · ${w.device || "Unknown browser"}`,
+    detail: [w.client, `asked ${seenAgo(w.createdAt, now)}`]
+      .filter(Boolean)
+      .join(" · "),
+  };
+}
+
+/**
+ * Waiting devices (SEC-2a): the computers whose signed-out page shows a
+ * code, with Approve and Deny. Approving signs that page in by itself.
+ */
+function drawWaiting(host, ctx) {
+  let timer = null;
+  const load = () => {
+    clearTimeout(timer);
+    if (!host.isConnected && timer !== null) return;
+    fetch("/api/web/waiting", { cache: "no-store" })
+      .then((r) =>
+        r.ok ? r.json() : Promise.reject(new Error(String(r.status))),
+      )
+      .then((b) => {
+        const list = b.waiting || [];
+        const now = Date.now();
+        host.innerHTML = list.length
+          ? '<div id="set-waiting" style="width:100%">' +
+            list
+              .map((w) => {
+                const l = waitingLine(w, now);
+                return (
+                  `<div class="set-waiting" data-code="${escHtml(w.code)}" style="${ROW_STYLE}">` +
+                  `<div style="flex:1 1 220px;min-width:0"><div class="mono">${escHtml(l.title)}</div>` +
+                  `<div class="set-note" style="overflow-wrap:anywhere">${escHtml(l.detail)}</div></div>` +
+                  `<button type="button" class="btn primary" data-approve="${escHtml(w.code)}">Approve</button>` +
+                  `<button type="button" class="btn" data-deny="${escHtml(w.code)}">Deny</button></div>`
+                );
+              })
+              .join("") +
+            '</div><div id="set-waiting-out" style="flex-basis:100%" aria-live="polite"></div>'
+          : '<output class="set-ro" id="set-waiting">No computers are waiting. A signed-out page on another computer shows a code; it appears here to approve.</output>';
+        const act = (btn, path, code) => {
+          btn.disabled = true;
+          ctx.shell
+            .api("POST", path, { code })
+            .then(load)
+            .catch((e) => {
+              btn.disabled = false;
+              const out = host.querySelector("#set-waiting-out");
+              if (out)
+                out.innerHTML = `<span class="set-note set-warn" role="alert">${escHtml(e.message)}</span>`;
+            });
+        };
+        host
+          .querySelectorAll("[data-approve]")
+          .forEach((b) =>
+            b.addEventListener("click", () =>
+              act(b, "/api/web/approve", b.dataset.approve),
+            ),
+          );
+        host
+          .querySelectorAll("[data-deny]")
+          .forEach((b) =>
+            b.addEventListener("click", () =>
+              act(b, "/api/web/deny", b.dataset.deny),
+            ),
+          );
+        // A new request shows up without a reload.
+        timer = setTimeout(load, 5000);
+      })
+      .catch(() => {
+        host.innerHTML =
+          '<output class="set-ro">Waiting devices can only be listed signed in, or on this machine.</output>';
+      });
+  };
+  load();
+}
+
+function drawPair(host, ctx) {
+  let timer = null;
+  fetch("/api/web/pair", { cache: "no-store" })
+    .then((r) => r.json())
+    .then((b) => {
+      const hosts = b.hosts || [];
+      if (!hosts.length) {
+        host.innerHTML =
+          '<output class="set-ro" id="set-pair">No edge hostname routes to this server, so there is no address another device could open. Add one to the config\'s edge block (edge.aliases for a VPN name), then <code>__DEN_CLI__ edge up</code>.</output>';
+        return;
+      }
+      host.innerHTML =
+        '<select id="set-pair-host" aria-label="Edge hostname">' +
+        hosts
+          .map((h) => `<option value="${escHtml(h)}">${escHtml(h)}</option>`)
+          .join("") +
+        "</select> " +
+        '<button type="button" class="btn primary" id="set-pair-go">Pair a device</button>' +
+        '<div id="set-pair-out" style="flex-basis:100%" aria-live="polite"></div>';
+      const out = host.querySelector("#set-pair-out");
+      const go = () => {
+        clearTimeout(timer);
+        ctx.shell
+          .api("POST", "/api/web/pair", {
+            host: host.querySelector("#set-pair-host").value,
+          })
+          .then((p) => {
+            out.innerHTML =
+              `<div style="display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;margin-top:8px">` +
+              `<div id="set-pair-qr" style="line-height:0">${qrSvg(p.url, { scale: 4, margin: 4 })}</div>` +
+              `<div style="flex:1 1 220px;min-width:0"><p class="set-note" style="margin:0 0 8px">Scan it with the other device, or open the link there. It works once, within 60 seconds, and signs that browser in for good.</p>` +
+              `<a id="set-pair-link" href="${escHtml(p.url)}" style="font:12px var(--mono);overflow-wrap:anywhere">${escHtml(p.url)}</a>` +
+              `<p class="set-note" id="set-pair-left" style="margin:8px 0 0"></p></div></div>`;
+            const until = Date.parse(p.expiresAt);
+            const left = out.querySelector("#set-pair-left");
+            const tick = () => {
+              const s = Math.max(0, Math.round((until - Date.now()) / 1000));
+              left.textContent = s
+                ? `Expires in ${s} s.`
+                : "This link expired. Pair again for a new one.";
+              if (s) timer = setTimeout(tick, 1000);
+            };
+            tick();
+          })
+          .catch((e) => {
+            out.innerHTML = `<span class="set-note set-warn" role="alert">${escHtml(e.message)}</span>`;
+          });
+      };
+      host.querySelector("#set-pair-go").addEventListener("click", go);
+    })
+    .catch(() => {
+      host.innerHTML =
+        '<output class="set-ro">Pairing works only signed in.</output>';
+    });
+}
+
+const ACCESS_ROWS = [
+  {
+    id: "access.owner",
+    category: "access",
+    label: "Owner",
+    description:
+      "The GitHub account this Den belongs to. Linking stores only its id (the token is thrown away), and from then on that account can sign in from any device. __DEN_CLI__ web owner link does the same from the command line.",
+    keywords: ["owner", "github", "identity", "link", "account"],
+    scope: "user",
+    control: { type: "custom", render: drawOwner },
+    read: () => null,
+  },
+  {
+    id: "access.devices",
+    category: "access",
+    label: "Linked devices",
+    description:
+      "The browsers signed in to this Den. Revoke ends one at once. __DEN_CLI__ web logout --all ends them all.",
+    keywords: ["devices", "sessions", "revoke", "browsers", "signed in"],
+    scope: "user",
+    control: { type: "custom", render: drawDevices },
+    read: () => null,
+  },
+  {
+    id: "access.waiting",
+    category: "access",
+    label: "Waiting devices",
+    description:
+      "Computers whose signed-out page shows a code. Approve one and its page signs in by itself; the code lasts 10 minutes. __DEN_CLI__ web approve <code> does the same from the command line.",
+    keywords: ["waiting", "approve", "code", "pair", "device", "deny"],
+    scope: "user",
+    control: { type: "custom", render: drawWaiting },
+    read: () => null,
+  },
+  {
+    id: "access.machine_name",
+    category: "access",
+    label: "Machine name",
+    description:
+      'What the signed-out page calls this machine ("runs on <name>"), so people on other computers know where to run a command. Empty: its short hostname.',
+    keywords: ["machine", "name", "hostname", "host", "signed out"],
+    scope: "user",
+    control: { type: "text" },
+    keys: ["machine_name"],
+    read: (ctx) => ctx.data.machine_name ?? "",
+    write: (v, ctx) =>
+      ctx.post({ machine_name: String(v ?? "").trim() || null }),
+  },
+  {
+    id: "access.pair",
+    category: "access",
+    label: "Pair a device",
+    description:
+      "Without GitHub, or offline: a one-time link and QR code for one edge hostname (__DEN_CLI__ web login --host <name>).",
+    keywords: ["pair", "qr", "device", "link", "phone", "edge"],
+    scope: "user",
+    control: { type: "custom", render: drawPair },
+    read: () => null,
+  },
+];
+
 export const DEN_SETTINGS = [
   // ── Appearance ─────────────────────────────────────────────────────────
   {
@@ -502,7 +891,7 @@ export const DEN_SETTINGS = [
     category: "cli",
     label: "Browser sign-in",
     description:
-      "Signing in is needed only when this server is reached from another machine (through the edge, or a LAN address); on localhost, and through the edge from this machine, nothing asks for it. __DEN_CLI__ web login prints a sign-in link; __DEN_CLI__ web sessions lists signed-in browsers.",
+      "On localhost nothing asks for a sign-in. Through the edge, a browser signs in unless the edge shows it is this machine (web.edge_unattested: local counts one it can't place as local), and from another machine it always does: Sign in with GitHub, or a one-time link (__DEN_CLI__ web login). Settings › Access lists the signed-in browsers.",
     keywords: ["sign in", "sign out", "login", "logout", "session", "browser"],
     scope: "user",
     control: {
@@ -576,6 +965,8 @@ export const DEN_SETTINGS = [
     read: () => null,
   },
 
+  ...ACCESS_ROWS,
+
   // ── Distribution (read-only) ───────────────────────────────────────────
   distRow(
     "brand",

package/src/ui/server/public/shell.js

@@ -132,7 +132,9 @@
     "org.title": "Org: {title}",
     "org.titleId": "Org: {title} ({id})",
     "ws.all": "All active",
-    "ws.focus": "focus",
+    "ws.focus": "CLI default",
+    "ws.focusTip":
+      "CLI commands run here when you don't name a workspace. Picking a workspace in the top bar only changes what pages show.",
     "ws.none": "No active workspaces",
     "ws.manage": "Manage workspaces…",
     "ws.allN": "All active ({n})",
@@ -142,12 +144,12 @@
     "ws.viewTitle":
       "View: what every page shows ({ws}). A view filter only: it starts, stops and routes nothing.",
     "ws.viewTitleFocus":
-      "View: what every page shows ({ws}). A view filter only: it starts, stops and routes nothing, and focus ({focus}) stays the target for commands.",
-    "ws.setFocus": "Set {ws} as focus",
+      "View: what every page shows ({ws}). A view filter only: it starts, stops and routes nothing, and the CLI default ({focus}) stays the target for commands.",
+    "ws.setFocus": "Make {ws} the CLI default",
     "ws.setFocusTip":
-      "Make it the default target for commands (writes workspaces.yml)",
+      "CLI commands run in it when you don't name a workspace (writes workspaces.yml)",
     "ws.viewFailed": "Could not change the view: {msg}",
-    "ws.focusFailed": "Could not set the focus: {msg}",
+    "ws.focusFailed": "Could not change the CLI default: {msg}",
     // A count's singular is its .one (0.3.0-dev.40: en had none, so the org
     // menu said "1 workspaces").
     "org.n": "{n} workspaces",
@@ -354,19 +356,71 @@
       "This server answers only on its own addresses, so a page on another name can't reach it.",
     "err.421.open": "Open on localhost",
     "err.refused.title": "Request refused",
-    "err.signin.title": "Sign in to use {name}",
     "err.signin.terminal": "Sign in to use the terminal",
     "err.signin.agents": "Sign in to start agents",
     "err.signin.sub": "This browser isn't signed in",
     "err.signin.lead": "Run {cmd} and open the link.",
     "err.signin.expiredTitle": "Sign-in link expired",
-    "err.signin.expired":
-      "That sign-in link expired or was used. Run {cmd} for a new one.",
     "err.signin.local":
       "A sign-in belongs to one address. This page is on {host}: open the same page on localhost, where this browser is signed in.",
-    "err.signin.why":
-      "There is no password: the link comes from a file only your user account can read.",
     "err.signin.copy": "Copy command",
+    "err.signin.title": "Sign in to {name}",
+    "err.signin.where":
+      "You're opening {name} from another computer. {name} runs on {host}, so it needs to know this is you.",
+    "err.signin.githubNote":
+      "Uses your GitHub account. The owner of this {name} has to have linked theirs.",
+    "err.signin.githubNoOwner":
+      "Sign in with GitHub needs an owner, and this {name} has none yet. On {host} (not this computer), run:",
+    "err.signin.githubRefused":
+      "@{login} isn't the owner of this {name}. Ask the owner to add you, or use 'Approve this computer'.",
+    "err.signin.approveOr": "Or approve this computer",
+    "err.signin.approve": "Approve this computer",
+    "err.signin.step1": "On {host} (not this computer), run:",
+    "err.signin.step1Or":
+      "Or open {name} on {host} itself and go to Settings › Access › Waiting devices.",
+    "err.signin.step2":
+      "This page signs you in by itself once approved. The code expires in 10 minutes.",
+    "err.signin.waiting": "Waiting for approval…",
+    "err.signin.noTerminal":
+      "Don't have a terminal on {host}? From this computer, run:",
+    "err.signin.openTerminal": "Open Terminal",
+    "err.signin.sshNote":
+      "Open Terminal opens ssh://{target} in your terminal app. It needs SSH access to {target}.",
+    "err.signin.whyTitle": "Why?",
+    "err.signin.whyText":
+      "{name} can start terminals and agents on {host}, so it only lets in people who prove they're the owner. You only do this once per computer: you stay signed in.",
+    "err.signin.other": "Other ways (the one-time link with {cmd})",
+    "err.signin.otherStep":
+      "On {host} (not this computer), run this, then open the link it prints in this browser:",
+    "err.signin.codeExpired": "This code expired.",
+    "err.signin.codeDenied": "This computer was denied on {host}.",
+    "err.signin.codeFailed": "{name} didn't give this page a code. Try again.",
+    "err.signin.newCode": "Get a new code",
+    "err.signin.youreIn": "You're in.",
+    "err.signin.expiredLead":
+      "That sign-in link expired or was used. Sign in again below.",
+    "err.signin.confirmLead":
+      "Enter the code that web login printed on {host}:",
+    "err.signin.confirmGo": "Sign in",
+    "err.signin.confirmWrong":
+      "That code isn't right. Check what web login printed and try again.",
+    "err.signin.confirmBusy": "Too many tries. Wait a minute and try again.",
+    "err.signin.confirmGone":
+      "This link no longer works. On {host}, run web login again for a new one.",
+    "err.signin.confirmWhy":
+      "The link alone isn't enough: it needs the code shown on {host} too, so a link someone else sees can't sign them in.",
+    "err.signin.github": "Sign in with GitHub",
+    "err.signin.githubEnter": "Enter this code at {url}:",
+    "err.signin.githubOpen": "Open GitHub",
+    "err.signin.githubCopy": "Copy code",
+    "err.signin.githubWaiting": "Waiting for you to approve it on GitHub…",
+    "err.signin.githubDone": "Signed in. Loading…",
+    "err.signin.githubExpired": "The code expired before it was approved.",
+    "err.signin.githubDenied": "The request was cancelled on GitHub.",
+    "err.signin.githubBusy":
+      "Too many sign-ins are in progress. Try again in a few minutes.",
+    "err.signin.githubFailed": "GitHub couldn't be reached. Try again.",
+    "err.signin.githubAgain": "Start again",
     "err.422.title": "Config is invalid",
     "err.422.sub": "The distribution config fails validation",
     "err.422.lead":
@@ -405,6 +459,14 @@
     "set.cli.web_port": "Your web port",
     "set.cli.signin": "Browser sign-in",
     "set.cli.sudo": "Admin password",
+    "set.access.owner": "Owner",
+    "set.access.devices": "Linked devices",
+    "ident.local": "Local",
+    "ident.device": "Signed in · this device",
+    "ident.toast": "This device is signed in to {name} on {host}",
+    "set.access.waiting": "Waiting devices",
+    "set.access.machine_name": "Machine name",
+    "set.access.pair": "Pair a device",
     "set.distribution.brand": "Product name",
     "set.distribution.github_org": "GitHub org",
     "set.distribution.orgs": "Org labels",
@@ -584,6 +646,9 @@
     agents:
       '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M7 10l3 2-3 2M12 15h5"/>',
     edge: '<path d="M12 3l8 4v5c0 4.5-3.4 8.3-8 9-4.6-.7-8-4.5-8-9V7z"/><path d="M8 12h8M12 8v8"/>',
+    // SEC-2a: who this browser is (the rail footer's identity chip).
+    person:
+      '<circle cx="12" cy="8" r="3.5"/><path d="M5 20c.8-3.6 3.6-5.5 7-5.5s6.2 1.9 7 5.5"/>',
   };
   function icon(name) {
     var d = ICONS[name] || (/^</.test(name || "") ? name : ICONS.page);
@@ -874,6 +939,9 @@
     // Whether the edge is configured (the Edge page's when): null until
     // known, the last answer cached so the rail doesn't jump.
     edge: null,
+    // SEC-2a: who this browser is (GET /api/session `identity`): local,
+    // a signed-in device, or a GitHub login. Null until known.
+    identity: null,
   };
   try {
     var cached = JSON.parse(localStorage.getItem(LS) || "{}");
@@ -1780,6 +1848,7 @@
       },
       page === SETTINGS.id,
     );
+    html += identityChip();
     html +=
       '<button class="den-ni den-collapse-btn" type="button" data-act="collapse" aria-expanded="' +
       (state.collapsed ? "false" : "true") +
@@ -1793,6 +1862,49 @@
     return html;
   }
 
+  /**
+   * SEC-2a: the rail footer's identity chip: "Local" (this machine, no
+   * sign-in), "Signed in · this device" (a one-time link or a code) or
+   * "@login" (GitHub). A rail item like Settings (the same .den-ni
+   * metrics), opening Settings › Access.
+   */
+  function identityLabel(id) {
+    if (!id) return "";
+    if (id.kind === "local") return t("ident.local");
+    if (id.kind === "github" && id.login) return "@" + id.login;
+    if (id.kind === "github" || id.kind === "device") return t("ident.device");
+    return "";
+  }
+  function identityChip() {
+    var label = identityLabel(state.identity);
+    if (!label) return "";
+    return item(
+      {
+        id: "identity",
+        href: "/settings#access",
+        title: label,
+        icon: "person",
+      },
+      false,
+      "",
+      ' id="den-ident" data-ident="' + esc(state.identity.kind) + '"',
+    );
+  }
+  /** What GET /api/session said about this browser: the chip, and a toast once after a sign-in. */
+  function applyIdentity(b) {
+    if (!b || !b.identity) return;
+    var was = state.identity;
+    if (!was || was.kind !== b.identity.kind || was.login !== b.identity.login)
+      setState({ identity: b.identity });
+    if (b.justSignedIn)
+      toast(
+        t("ident.toast", {
+          name: b.product || "__DEN_TITLE__",
+          host: b.machine || "",
+        }),
+      );
+  }
+
   // One tab stop for the rail: the current page, else the first item.
   function rove() {
     var links = Array.prototype.slice.call(nav.querySelectorAll(".den-ni"));
@@ -3525,6 +3637,7 @@
           function (b) {
             csrf.pending = null;
             csrf.token = b && typeof b.csrf === "string" ? b.csrf : null;
+            applyIdentity(b);
             return csrf.token;
           },
           function () {

package/src/ui/server/public/topbar.js

@@ -1156,7 +1156,9 @@ export async function unlockWith(password, { saveToVault = false } = {}) {
     });
     const data = await r.json().catch(() => ({}));
     if (r.ok) {
-      if (data.savedToVault) sudo.vault.hasStored = true;
+      // LK-4: a first save also wrote the ref, so it is configured now.
+      if (data.savedToVault)
+        sudo.vault = { ...sudo.vault, hasStored: true, configured: true };
       return {
         ok: true,
         savedToVault: !!data.savedToVault,
@@ -1311,11 +1313,13 @@ function checkVault() {
 function notConfiguredNote() {
   const v = sudo.vault;
   if (!v || v.configured !== false || !v.configFile) return null;
+  // LK-4: saving writes the ref itself; nothing to edit.
+  if (v.canSave === true) return null;
   return t("lock.cfg", { file: v.configFile });
 }
 
 function saveLabel() {
-  if (!sudo.vault.backendAvailable) return null;
+  if (!sudo.vault.backendAvailable || sudo.vault.canSave === false) return null;
   return sudo.vault.hasStored
     ? t("lock.update")
     : t("lock.saveTo", { s: sudo.vault.label || sudo.vault.backend });
@@ -1381,7 +1385,7 @@ function openLock() {
     btn.textContent = t("lock.checking");
     btn.disabled = true;
     err.hidden = true;
-    const saveToVault = !!(sudo.vault.backendAvailable && saveCb?.checked);
+    const saveToVault = !!(saveLabel() && saveCb?.checked);
     try {
       const res = await unlockWith(pw, { saveToVault });
       if (res.ok) {