@monster-orange/den 0.4.22 → 0.4.24

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

@@ -30,6 +30,7 @@
 import { themeNotice, themeOptions } from "./appearance.js";
 import { qrSvg } from "./qr.js";
 import { renderPersonasSettings } from "./persona-ui.js";
+import { comboHtml, wireCombo } from "./combobox.js";
 
 export const DEN_SETTING_CATEGORIES = [
   {
@@ -889,6 +890,28 @@ export const DEN_SETTINGS = [
     read: () => null,
   },
 
+  {
+    id: "agents.rotation",
+    category: "agents",
+    label: "Rotation",
+    description:
+      "When an agent's conversation has compacted this many times (or its pull request merged), Den starts it again from its handoff: a fresh conversation, the same name, persona, workspace and folder. Auto asks the agent for its handoff when it is idle, then relaunches it by itself; Ask shows buttons on the agent; Off does nothing. Overrides win over this install's value: agent, persona in a workspace, persona, workspace, service. __DEN_CLI__ agents rotate",
+    keywords: [
+      "rotation",
+      "rotate",
+      "relaunch",
+      "handoff",
+      "compaction",
+      "compactions",
+      "context",
+      "restart",
+      "agent",
+    ],
+    scope: "user",
+    control: { type: "custom", render: renderRotation },
+    read: () => null,
+  },
+
   {
     id: "agents.personas",
     category: "agents",
@@ -1253,6 +1276,301 @@ function renderRuntimes(host, ctx) {
   void load();
 }
 
+const ROT_SCOPES = [
+  ["agent", "Agent", "agent id"],
+  ["persona-workspace", "Persona in a workspace", "persona@workspace"],
+  ["persona", "Persona", "persona id"],
+  ["workspace", "Workspace", "workspace"],
+  ["service", "Service", "service, as the workspace names it"],
+];
+const ROT_KEYS = [
+  ["after_compactions", "After compactions", "a number, or never"],
+  ["on_due", "When due", "auto, ask or off"],
+  ["on_pr_merged", "When its PR merges", "true or false"],
+];
+const rotVal = (v) => (v === undefined ? "" : String(v));
+/** A value as a person reads it (D30): "never", "Auto", "Relaunch". */
+function rotValText(k, v) {
+  if (k === "on_due")
+    return { auto: "Auto", ask: "Ask", off: "Off" }[v] ?? rotVal(v);
+  if (k === "on_pr_merged")
+    return v === true ? "Relaunch" : v === false ? "Keep going" : rotVal(v);
+  return rotVal(v);
+}
+
+/**
+ * D30: an override's target as a name, from the pickers' choices. One that
+ * no longer exists: its id, and gone.
+ */
+export function rotTargetName(scope, target, c = {}) {
+  const find = (list, id) => (list || []).find((x) => x.id === id);
+  if (scope === "agent") {
+    const a = find(c.agents, target);
+    return a
+      ? { name: a.workspace ? `${a.name} (${a.workspace})` : a.name }
+      : { name: target, gone: true };
+  }
+  if (scope === "persona-workspace") {
+    const [pid, ws] = String(target).split("@");
+    const p = find(c.personas, pid);
+    const w = find(c.workspaces, ws);
+    return p && w
+      ? { name: `${p.name} in ${w.name}` }
+      : { name: target, gone: true };
+  }
+  const list =
+    scope === "persona"
+      ? c.personas
+      : scope === "workspace"
+        ? c.workspaces
+        : c.services;
+  const x = find(list, target);
+  return x ? { name: x.name } : { name: target, gone: true };
+}
+
+/** D30: each picker's rows, from GET /api/agents/rotation?choices=1. */
+export function rotPickItems(kind, c = {}) {
+  if (kind === "agent")
+    return (c.agents || []).map((a) => ({
+      id: a.id,
+      label: a.name,
+      sub: [a.workspace, a.state].filter(Boolean).join(" · "),
+    }));
+  if (kind === "persona")
+    return (c.personas || []).map((p) => ({
+      id: p.id,
+      label: p.name,
+      sub: p.category,
+    }));
+  if (kind === "workspace")
+    return (c.workspaces || []).map((w) => ({ id: w.id, label: w.name }));
+  return (c.services || []).map((x) => ({
+    id: x.id,
+    label: x.name,
+    sub: x.workspace,
+  }));
+}
+
+/** A value typed in the overrides form, as the key takes it. */
+export function rotationValue(key, raw) {
+  const v = String(raw ?? "").trim();
+  if (key === "after_compactions")
+    return v === "never" || v === "0"
+      ? "never"
+      : /^\d+$/.test(v)
+        ? Number(v)
+        : v;
+  if (key === "on_pr_merged")
+    return v === "true" ? true : v === "false" ? false : v;
+  return v;
+}
+
+/** The Rotation row's HTML (b: GET /api/agents/rotation). */
+export function rotationHtml(b) {
+  const inherited = (k) =>
+    b.org?.[k] !== undefined
+      ? `org config: ${rotVal(b.org[k])}`
+      : `default: ${rotVal(b.defaults?.[k])}`;
+  const inst = b.install || {};
+  const after = inst.after_compactions;
+  const field = (k, control) =>
+    `<div class="rot-f" data-rot-key="${k}"><label for="rot-${k}">${escR(ROT_KEYS.find((x) => x[0] === k)[1])}</label>${control}<span class="set-tag" data-rot-src>${escR(inst[k] !== undefined ? "this install" : inherited(k))}</span></div>`;
+  const sel = (k, opts) =>
+    `<select id="rot-${k}" data-focus-key="rot-${k}"><option value=""${inst[k] === undefined ? " selected" : ""}>inherit (${escR(inherited(k))})</option>` +
+    opts
+      .map(
+        ([v, l]) =>
+          `<option value="${escR(v)}"${rotVal(inst[k]) === v ? " selected" : ""}>${escR(l)}</option>`,
+      )
+      .join("") +
+    `</select>`;
+  const rows = [];
+  for (const [scope, byTarget] of Object.entries(b.overrides || {}))
+    for (const [target, vals] of Object.entries(byTarget || {}))
+      for (const [k, v] of Object.entries(vals || {})) {
+        const who = rotTargetName(scope, target, b.choices);
+        const setting = (ROT_KEYS.find((x) => x[0] === k) || [k, k])[1];
+        rows.push(
+          `<tr data-rot-row${who.gone ? " data-rot-gone" : ""}><td data-l="Scope">${escR((ROT_SCOPES.find((x) => x[0] === scope) || [scope, scope])[1])}</td>` +
+            `<td data-l="For"${who.gone ? ' class="rot-gone"' : ""}>${who.gone ? `<span class="den-mono">${escR(who.name)}</span> (gone)` : escR(who.name)}</td>` +
+            `<td data-l="Setting">${escR(setting)}</td><td data-l="Value">${escR(rotValText(k, v))}</td>` +
+            `<td class="rot-act"><button type="button" class="btn sm" data-rot-clear data-scope="${escR(scope)}" data-target="${escR(target)}" data-key="${escR(k)}" aria-label="${who.gone ? "Remove" : "Clear"} ${escR(setting)} for ${escR(who.name)}">${who.gone ? "Remove" : "Clear"}</button></td></tr>`,
+        );
+      }
+  return (
+    `<div class="rot" data-rotation-settings>` +
+    `<div class="rot-inst">` +
+    field(
+      "after_compactions",
+      `<input type="text" id="rot-after_compactions" data-focus-key="rot-after_compactions" inputmode="numeric" spellcheck="false" autocomplete="off" placeholder="${escR(inherited("after_compactions"))}" value="${escR(after === undefined ? "" : rotVal(after))}"> <button type="button" class="btn sm" data-rot-save-after>Save</button>`,
+    ) +
+    field(
+      "on_due",
+      sel("on_due", [
+        ["auto", "Auto"],
+        ["ask", "Ask"],
+        ["off", "Off"],
+      ]),
+    ) +
+    field(
+      "on_pr_merged",
+      sel("on_pr_merged", [
+        ["true", "Relaunch"],
+        ["false", "Keep going"],
+      ]),
+    ) +
+    `</div>` +
+    `<div class="tablewrap"><table class="svc rot-ov"><caption>Overrides (the most specific wins)</caption><thead><tr><th scope="col">Scope</th><th scope="col">For</th><th scope="col">Setting</th><th scope="col">Value</th><th scope="col" aria-label="Actions"></th></tr></thead><tbody>` +
+    (rows.length
+      ? rows.join("")
+      : `<tr><td colspan="5" class="set-note">No overrides: every agent uses this install's values.</td></tr>`) +
+    `</tbody></table></div>` +
+    `<form class="rot-add" data-rot-add>` +
+    `<span class="rot-pick"><label for="rot-a-scope">Scope</label> <select id="rot-a-scope">${ROT_SCOPES.map(([v, l]) => `<option value="${v}">${escR(l)}</option>`).join("")}</select></span>` +
+    // The target: picked by name, never typed as an id (D30).
+    `<span class="rot-pick" data-for="agent">${comboHtml({ id: "rot-a-agent", label: "Agent", placeholder: "Type to find an agent" })}</span>` +
+    `<span class="rot-pick" data-for="persona persona-workspace" hidden>${comboHtml({ id: "rot-a-persona", label: "Persona", placeholder: "Type to find a persona" })}</span>` +
+    `<span class="rot-pick" data-for="workspace persona-workspace" hidden>${comboHtml({ id: "rot-a-ws", label: "Workspace", placeholder: "Type to find a workspace" })}</span>` +
+    `<span class="rot-pick" data-for="service" hidden>${comboHtml({ id: "rot-a-service", label: "Service", placeholder: "Type to find a service" })}</span>` +
+    `<span class="rot-pick"><label for="rot-a-key">Setting</label> <select id="rot-a-key">${ROT_KEYS.map(([v, l]) => `<option value="${v}">${escR(l)}</option>`).join("")}</select></span>` +
+    `<span class="rot-pick" data-val="after_compactions"><label for="rot-a-n">Value</label> <input type="number" id="rot-a-n" min="1" max="100" step="1" value="3"> <label class="rot-never"><input type="checkbox" id="rot-a-never"> never</label></span>` +
+    `<span class="rot-pick" data-val="on_due" hidden><label for="rot-a-due">Value</label> <select id="rot-a-due"><option value="auto">Auto</option><option value="ask">Ask</option><option value="off">Off</option></select></span>` +
+    `<span class="rot-pick" data-val="on_pr_merged" hidden><label for="rot-a-pr">Value</label> <select id="rot-a-pr"><option value="true">Relaunch</option><option value="false">Keep going</option></select></span>` +
+    `<button type="submit" class="btn sm primary">Add override</button></form>` +
+    `<div class="rt-err" role="alert" hidden></div>` +
+    `</div>`
+  );
+}
+
+/** The Rotation row: this install's values, the overrides, + Add override. */
+function renderRotation(host, ctx) {
+  const err = () => host.querySelector(".rt-err");
+  const fail = (x) => {
+    const e = err();
+    if (e) {
+      e.textContent = x?.message || "Not saved";
+      e.hidden = false;
+    }
+  };
+  const load = () => {
+    if (ctx.shell?.configInvalid?.() === true) {
+      host.innerHTML = `<div class="set-note">Fix the config first: the org's rotation is read from it.</div>`;
+      return Promise.resolve();
+    }
+    return ctx.shell
+      .api("GET", "/api/agents/rotation?choices=1")
+      .then((b) => {
+        host.innerHTML = rotationHtml(b || {});
+        wireAdd(b?.choices || {});
+      })
+      .catch((x) => {
+        host.innerHTML = `<div class="set-note">${escR(x?.message || "The rotation settings did not load.")}</div>`;
+      });
+  };
+  // D30: the add form's pickers, filled from live data.
+  let picks = {};
+  const wireAdd = (c) => {
+    picks = {};
+    for (const [kind, id] of [
+      ["agent", "rot-a-agent"],
+      ["persona", "rot-a-persona"],
+      ["workspace", "rot-a-ws"],
+      ["service", "rot-a-service"],
+    ])
+      picks[kind] = wireCombo(host, id, { items: () => rotPickItems(kind, c) });
+    showFor();
+  };
+  const showFor = () => {
+    const scope = host.querySelector("#rot-a-scope")?.value;
+    const key = host.querySelector("#rot-a-key")?.value;
+    for (const el of host.querySelectorAll(".rot-add [data-for]"))
+      el.hidden = !el.dataset.for.split(" ").includes(scope);
+    for (const el of host.querySelectorAll(".rot-add [data-val]"))
+      el.hidden = el.dataset.val !== key;
+    const n = host.querySelector("#rot-a-n");
+    const never = host.querySelector("#rot-a-never");
+    if (n && never) n.disabled = never.checked;
+  };
+  const targetOf = (scope) => {
+    const v = (k) => picks[k]?.value() || "";
+    if (scope === "persona-workspace")
+      return v("persona") && v("workspace")
+        ? `${v("persona")}@${v("workspace")}`
+        : "";
+    return v(scope);
+  };
+  const valueOf = (key) => {
+    if (key === "on_due") return host.querySelector("#rot-a-due").value;
+    if (key === "on_pr_merged")
+      return host.querySelector("#rot-a-pr").value === "true";
+    if (host.querySelector("#rot-a-never").checked) return "never";
+    return Number(host.querySelector("#rot-a-n").value);
+  };
+  const put = async (body) => {
+    try {
+      await ctx.shell.api("PUT", "/api/agents/rotation", body);
+      await load();
+    } catch (x) {
+      fail(x);
+    }
+  };
+  host.addEventListener("change", (e) => {
+    const k = e.target.closest("[data-rot-key]")?.dataset.rotKey;
+    if (
+      ["rot-a-scope", "rot-a-key", "rot-a-never"].includes(e.target.id) ||
+      e.target.closest?.(".rot-add")
+    ) {
+      showFor();
+      return;
+    }
+    if (!k || k === "after_compactions" || e.target.tagName !== "SELECT")
+      return;
+    const v = e.target.value;
+    void put({
+      scope: "install",
+      key: k,
+      value: v === "" ? null : rotationValue(k, v),
+    });
+  });
+  host.addEventListener("click", (e) => {
+    const b = e.target.closest("button");
+    if (!b) return;
+    if (b.hasAttribute("data-rot-save-after")) {
+      const v = host.querySelector("#rot-after_compactions")?.value.trim();
+      void put({
+        scope: "install",
+        key: "after_compactions",
+        value: v ? rotationValue("after_compactions", v) : null,
+      });
+    } else if (b.hasAttribute("data-rot-clear"))
+      void put({
+        scope: b.dataset.scope,
+        target: b.dataset.target,
+        key: b.dataset.key,
+        value: null,
+      });
+  });
+  host.addEventListener("submit", (e) => {
+    const f = e.target.closest("[data-rot-add]");
+    if (!f) return;
+    e.preventDefault();
+    const key = f.querySelector("#rot-a-key").value;
+    const scope = f.querySelector("#rot-a-scope").value;
+    const target = targetOf(scope);
+    if (!target) {
+      fail({
+        message:
+          scope === "persona-workspace"
+            ? "Pick a persona and a workspace."
+            : `Pick a ${(ROT_SCOPES.find((x) => x[0] === scope) || [scope, scope])[1].toLowerCase()}.`,
+      });
+      return;
+    }
+    void put({ scope, target, key, value: valueOf(key) });
+  });
+  void load();
+}
+
 /** Register Den's categories and rows with the shell's SETTINGS registry. */
 export function registerDenSettings(shell) {
   for (const c of DEN_SETTING_CATEGORIES) shell.registerSettingsCategory(c);

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

@@ -384,10 +384,9 @@
       }
       .rt {
         display: grid;
-        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(
-            0,
-            2fr
-          ) auto;
+        grid-template-columns:
+          minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 2fr)
+          auto;
         align-items: center;
         gap: 4px 12px;
         padding: 8px 10px;
@@ -427,6 +426,169 @@
       .rt-err[hidden] {
         display: none;
       }
+      /* D28: Settings › Agents › Rotation. */
+      .rot-inst {
+        display: grid;
+        gap: 8px;
+        margin-bottom: 12px;
+      }
+      .rot-f,
+      .rot-add {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 6px;
+        min-width: 0;
+      }
+      .rot-f label {
+        flex: 0 0 150px;
+      }
+      .rot-f input,
+      .rot-f select,
+      .rot-add input,
+      .rot-add select {
+        flex: 1 1 140px;
+        min-width: 0;
+        max-width: 100%;
+      }
+      .rot-add {
+        margin-top: 10px;
+      }
+      /* D30: the add form: each control with its label, wrapping. */
+      .rot-pick {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        min-width: 0;
+        flex: 1 1 200px;
+        flex-wrap: wrap;
+      }
+      .rot-pick[hidden] {
+        display: none;
+      }
+      .rot-pick input[type="number"] {
+        width: 6em;
+        flex: 0 0 auto;
+      }
+      .rot-never {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+      }
+      .rot-gone {
+        color: var(--muted);
+      }
+      /* The shared picker (combobox.js). */
+      .den-combo {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        min-width: 0;
+        flex: 1 1 200px;
+        flex-wrap: wrap;
+      }
+      .den-combo-box {
+        position: relative;
+        flex: 1 1 160px;
+        min-width: 0;
+      }
+      .den-combo-box input {
+        width: 100%;
+        box-sizing: border-box;
+      }
+      .den-combo-list {
+        position: absolute;
+        z-index: 20;
+        left: 0;
+        right: 0;
+        top: calc(100% + 2px);
+        max-height: 240px;
+        overflow-y: auto;
+        margin: 0;
+        padding: 4px;
+        list-style: none;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
+      }
+      .den-combo-list[hidden] {
+        display: none;
+      }
+      .den-combo-list li {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        gap: 2px 8px;
+        padding: 5px 8px;
+        border-radius: 6px;
+        cursor: pointer;
+      }
+      .den-combo-list li[aria-selected="true"] {
+        background: var(--sunken);
+      }
+      .den-combo-list li[aria-disabled="true"] {
+        color: var(--muted);
+        cursor: default;
+      }
+      .den-combo-s {
+        color: var(--muted);
+        font-size: 12px;
+      }
+      .rot-ov caption {
+        text-align: left;
+        color: var(--muted);
+        font-size: 12.5px;
+        padding-bottom: 4px;
+      }
+      .rot-ov th,
+      .rot-ov td {
+        padding: 4px 10px 4px 0;
+        text-align: left;
+        /* Break a key at its "_", never mid-word. */
+        overflow-wrap: normal;
+        word-break: normal;
+      }
+      /* Narrow: each override is a card of label/value lines, so no
+         column is squeezed into breaking words mid-letter. */
+      @media (max-width: 560px) {
+        .rot-ov thead {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          overflow: hidden;
+          clip: rect(0 0 0 0);
+        }
+        .rot-ov,
+        .rot-ov tbody,
+        .rot-ov tr,
+        .rot-ov td {
+          display: block;
+          width: 100%;
+        }
+        .rot-ov caption {
+          display: block;
+        }
+        .rot-ov tr[data-rot-row] {
+          padding: 6px 0;
+          border-top: 1px solid var(--border);
+        }
+        .rot-ov td {
+          display: flex;
+          gap: 8px;
+          padding: 2px 0;
+          overflow-wrap: anywhere;
+        }
+        .rot-ov td[data-l]::before {
+          content: attr(data-l);
+          flex: 0 0 64px;
+          color: var(--muted);
+          font-family: inherit;
+        }
+        .rot-ov td.rot-act {
+          padding-top: 4px;
+        }
+      }
       .rt-fl {
         flex-basis: 100%;
         color: var(--muted);

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

@@ -426,9 +426,10 @@
     "err.signin.claimOrg":
       "Members of the {org} GitHub org can claim it, in a browser on {host}.",
     "err.signin.claimHere": "This is my computer: connect GitHub",
+    "err.signin.claimHereOn": "On {host} itself: connect GitHub",
+    "err.signin.claimOrgOnly":
+      "Members of the {org} GitHub org can claim it, from a browser on {host}. Open this page on {host}, or set web.owner_github to sign in from anywhere.",
     "err.signin.claimAs": "Sign in as @{login}",
-    "err.signin.claimHereNote":
-      "This is my computer works only in a browser on {host}. Anywhere else it opens nothing.",
     "err.signin.claimChecking": "Checking this is {host}…",
     "err.signin.githubRefused":
       "@{login} isn't the owner of this {name}. Only the owner's account can use Sign in with GitHub. Use Approve this computer instead.",
@@ -611,9 +612,48 @@
       "Its session rotated ({why}), but it wrote no handoff.md. Resume it to write one, or start fresh.",
     "ag.rot.badHandoff":
       "Its session rotated ({why}), but its handoff.md is not complete. Resume it to fix it, or start fresh.",
-    "ag.relaunch": "Relaunch from handoff",
-    "ag.relaunchName": "Relaunch {id} from handoff",
+    "ag.relaunch": "Relaunch now",
+    "ag.relaunchName": "Relaunch {id} now",
     "ag.relaunched": "Relaunched {id} from its handoff",
+    "ag.rc.autoAsk":
+      "Due ({why}). Den asks it for its handoff when it is idle, then relaunches it.",
+    "ag.rc.autoReady":
+      "Due ({why}). Its handoff is ready: Den relaunches it when it is idle.",
+    "ag.rc.ready": "Due ({why}). Its handoff is ready.",
+    "ag.rc.missing": "Due ({why}). It has no handoff yet.",
+    "ag.rc.bad": "Due ({why}). Its handoff is not complete.",
+    "ag.rc.fellBack": "Due ({why}). It wrote no handoff after 2 asks.",
+    "ag.rc.wanted":
+      "Due ({why}). Den relaunches it once its handoff is written.",
+    "ag.rc.write": "Write handoff",
+    "ag.rc.writeName": "Ask {id} to write its handoff",
+    "ag.rc.keep": "Keep this conversation",
+    "ag.rc.keepName": "Keep {id}'s conversation",
+    "ag.rc.never": "Don't ask again for this agent",
+    "ag.rc.settings": "Settings",
+    "ag.rc.from":
+      "Rotates after {n} compactions ({src}); when due: {mode} ({src2})",
+    "ag.rc.fellBackBad":
+      "Due ({why}). Its handoff still fails the check after 2 asks.",
+    "ag.rc.from.one":
+      "Rotates after {n} compaction ({src}); when due: {mode} ({src2})",
+    "ag.rc.fromNever": "Never rotates ({src}); when due: {mode} ({src2})",
+    "ag.rc.midTurn": "{id} is mid-turn: ask again when its turn ends",
+    "ag.rc.neverN": "never",
+    "ag.rc.mode.auto": "relaunch by itself",
+    "ag.rc.mode.ask": "ask",
+    "ag.rc.mode.off": "nothing",
+    "ag.rc.menu": "Rotation settings",
+    "ag.rc.noState": "No rotation yet: it counts from its next start.",
+    "ag.rc.asked": "Asked {id} for its handoff",
+    "ag.rc.askedRelaunch":
+      "Asked {id} for its handoff. Den relaunches it once it passes.",
+    "ag.rc.askedResumed":
+      "Resumed {id} to write its handoff. Den relaunches it once it passes.",
+    "ag.rc.kept": "Kept {id}'s conversation: its count starts again",
+    "ag.rc.keptNever": "Kept {id}'s conversation: it won't rotate again",
+    "ag.rc.autoRelaunched":
+      "Relaunched {id} from its handoff after {why}. The old conversation {old} is kept.",
     "ag.interrupted": "{n} agents were interrupted when {name} restarted",
     "ag.interrupted.one": "{n} agent was interrupted when {name} restarted",
     "ag.resumeAll": "Resume all",
@@ -815,6 +855,7 @@
     "ver.pinned": "pinned {v}",
     "ver.usedLatest": "{n} now tracks the latest version",
     "set.agents.personas": "Personas",
+    "set.agents.rotation": "Rotation",
     // The Agents tab (AG-4a-term, agents-page.js).
     "n.agents": "Agents",
     "kind.agent": "Agent",
@@ -2280,28 +2321,31 @@
     var down = Object.prototype.hasOwnProperty.call(off, id)
       ? !!off[id]
       : state.health[id] === "down";
+    // D27: a real link (never popup-blocked, as window.open was in Safari).
+    var live = !down && /^https?:\/\//i.test(url);
     return (
-      '<button type="button" class="den-pvisit" tabindex="-1" data-visit="' +
+      '<a class="den-pvisit" tabindex="-1" data-visit="' +
       esc(id) +
       '" data-url="' +
       esc(url) +
-      '" aria-label="' +
+      '"' +
+      (live
+        ? ' href="' + esc(url) + '" target="_blank" rel="noopener noreferrer"'
+        : ' role="link" aria-disabled="true"') +
+      ' aria-label="' +
       esc(t("act.visitX", { s: id })) +
       '" title="' +
       esc(down ? t("svp.notRunning") : url) +
-      '"' +
-      (down ? ' aria-disabled="true"' : "") +
-      '><span aria-hidden="true">↗</span></button>'
+      '"><span aria-hidden="true">↗</span></a>'
     );
   }
+  /** A pin's Visit ↗ clicked: true when the link opens by itself. */
   function visitPin(b) {
-    if (b.getAttribute("aria-disabled") === "true") {
+    if (b.getAttribute("aria-disabled") === "true" || !b.hasAttribute("href")) {
       toast(t("svp.notRunning"));
-      return;
+      return false;
     }
-    var url = b.getAttribute("data-url");
-    if (url && /^https?:\/\//i.test(url))
-      window.open(url, "_blank", "noopener");
+    return true;
   }
   // 0.4.18: the service panel (svc-panel.js registers it).
   var servicePanel = null;
@@ -2613,8 +2657,7 @@
     var tgt = e.target;
     var v = tgt && tgt.closest ? tgt.closest("[data-visit]") : null;
     if (v) {
-      e.preventDefault();
-      visitPin(v);
+      if (!visitPin(v)) e.preventDefault();
       return;
     }
     // 0.4.18: a plain click (or Enter) on a pinned row opens its panel;
@@ -4978,6 +5021,9 @@
     ".den-btn.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }",
     ".den-btn.sm { padding: 2px 9px; font-size: 12.5px; }",
     ".den-btn:disabled { opacity: .6; cursor: default; }",
+    // D27: Visit is a link styled as a button.
+    "a.den-btn, a.den-pvisit { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }",
+    "a.den-pvisit { display: grid; }",
     // Status drawer (.scrim, .drawer, .prob-card, .grp, .svl: R15)
     ".den-scrim { position: fixed; inset: 0; background: rgb(0 0 0 / 0.35); z-index: 40; }",
     ".den-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); z-index: 41;",