@monster-orange/den 0.4.23 → 0.4.25

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

@@ -451,9 +451,115 @@
         min-width: 0;
         max-width: 100%;
       }
+      /* A select never cuts its own words: it wraps to its own line. */
+      .rot-f select {
+        min-width: min(100%, max-content);
+      }
       .rot-add {
         margin-top: 10px;
       }
+      /* HUB-1.5: Settings › Agents › Hub. */
+      .hub-st {
+        display: grid;
+        grid-template-columns: max-content 1fr;
+        gap: 4px 12px;
+        margin: 0;
+      }
+      .hub-st dt {
+        color: var(--muted);
+      }
+      .hub-st dd {
+        margin: 0;
+        min-width: 0;
+        overflow-wrap: anywhere;
+      }
+      .hub-tools {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        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);
@@ -464,7 +570,49 @@
       .rot-ov td {
         padding: 4px 10px 4px 0;
         text-align: left;
-        overflow-wrap: anywhere;
+        /* 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%;

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.",
@@ -855,6 +856,7 @@
     "ver.usedLatest": "{n} now tracks the latest version",
     "set.agents.personas": "Personas",
     "set.agents.rotation": "Rotation",
+    "set.agents.hub": "Hub",
     // The Agents tab (AG-4a-term, agents-page.js).
     "n.agents": "Agents",
     "kind.agent": "Agent",
@@ -2320,28 +2322,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;
@@ -2653,8 +2658,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;
@@ -5018,6 +5022,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;",

package/src/ui/server/public/svc-panel.js

@@ -67,6 +67,9 @@ const S = {
   testing: new Set(),
   /** The open panel: { id, el, opener, scrim, timer }. */
   open: null,
+  /** D27: a pointer is down inside the panel: repaint after it is up. */
+  pressed: false,
+  syncLater: false,
 };
 
 /** Start or Restart from here: "starting…" until health says, or the timeout. */
@@ -228,14 +231,21 @@ function testsHtml(s) {
   return `<span class="den-svp-${ok ? "ok" : "bad"}">${esc(t(ok ? "svp.testsOk" : "svp.testsBad", { t: at }))}</span>`;
 }
 
-/** A Visit button (the rail row's ↗, or the panel's primary). */
+/**
+ * Visit: a real link, styled as a button (D27). A native target=_blank link
+ * is never popup-blocked (Safari blocked window.open from the delegated
+ * click) and works with no script. Off (down, starting): no href,
+ * aria-disabled, and a click says why (visit()).
+ */
 export function visitHtml(s, cls, label) {
   if (!s.url) return "";
-  const on = visitable(s);
+  const on = visitable(s) && /^https?:\/\//i.test(s.url);
   return (
-    `<button type="button" class="${cls}" data-visit="${esc(s.id)}" data-url="${esc(s.url)}"` +
-    ` aria-label="${esc(t("act.visitX", { s: s.id }))}" title="${esc(on ? s.url : t("svp.notRunning"))}"` +
-    `${on ? "" : ' aria-disabled="true"'}>${label}</button>`
+    `<a class="${cls}" data-visit="${esc(s.id)}" data-url="${esc(s.url)}"` +
+    (on
+      ? ` href="${esc(s.url)}" target="_blank" rel="noopener noreferrer"`
+      : ` role="link" tabindex="0" aria-disabled="true"`) +
+    ` aria-label="${esc(t("act.visitX", { s: s.id }))}" title="${esc(on ? s.url : t("svp.notRunning"))}">${label}</a>`
   );
 }
 
@@ -335,6 +345,12 @@ function sync() {
   publishUrls();
   const o = S.open;
   if (!o) return;
+  // D27: never repaint under a press: the button pressed would be replaced
+  // between pointerdown and click, and the click would land on the panel.
+  if (S.pressed) {
+    S.syncLater = true;
+    return;
+  }
   const a = document.activeElement;
   const mine = a && o.el.contains(a) && a !== o.el;
   const key = mine
@@ -451,15 +467,20 @@ export function panelOpen() {
 const env = () => S.deps.currentEnv?.() ?? "local";
 const runs = () => window.denShell?.runs;
 
-/** Visit: the service's URL in a new tab, or why not. */
+/**
+ * Visit, clicked: a live link opens by itself (the browser follows it, so
+ * true: leave the click alone); an off one says why (false: the caller
+ * prevents the click).
+ */
 export function visit(btn) {
-  if (btn.getAttribute("aria-disabled") === "true") {
+  if (
+    btn.getAttribute("aria-disabled") === "true" ||
+    !btn.hasAttribute("href")
+  ) {
     window.denShell?.toast?.(t("svp.notRunning"));
-    return;
+    return false;
   }
-  const url = btn.dataset.url;
-  if (!url || !/^https?:\/\//i.test(url)) return;
-  window.open(url, "_blank", "noopener");
+  return true;
 }
 
 /** A stream into a runs-dock tab: Start, Stop, Restart (exec), Logs, tests. */
@@ -635,6 +656,27 @@ export function initServicePanel(deps = {}) {
     sync();
   });
   window.addEventListener("den:pins", () => sync());
+  // D27: a press inside the open panel holds its repaint until it ends.
+  document.addEventListener(
+    "pointerdown",
+    (e) => {
+      if (S.open?.el.contains(e.target)) S.pressed = true;
+    },
+    true,
+  );
+  const released = () => {
+    if (!S.pressed) return;
+    S.pressed = false;
+    // After the click this press makes, then the repaint it held.
+    setTimeout(() => {
+      if (S.syncLater) {
+        S.syncLater = false;
+        sync();
+      }
+    }, 0);
+  };
+  document.addEventListener("pointerup", released, true);
+  document.addEventListener("pointercancel", released, true);
   document.addEventListener(
     "click",
     (e) => {
@@ -643,10 +685,7 @@ export function initServicePanel(deps = {}) {
       // The panel's Visit here; the rail's ↗ is shell.js's (the same visit()).
       const v = tgt.closest?.("[data-visit]");
       if (v) {
-        if (o?.el.contains(v)) {
-          e.preventDefault();
-          visit(v);
-        }
+        if (o?.el.contains(v) && !visit(v)) e.preventDefault();
         return;
       }
       const opener = tgt.closest?.("[data-svpanel-open]");

package/src/ui/server/route-classes.ts

@@ -388,6 +388,10 @@ export const ROUTES: readonly RouteEntry[] = [
     "/api/agents/rotation",
     "D28: rotation settings, the overrides and an agent's effective values",
   ),
+  R(
+    "/api/hub",
+    "HUB-1.5: Den Hub: its URL, connected or not, the team and the install's label (never the token)",
+  ),
   M(
     ["PUT"],
     "/api/agents/rotation",

package/src/ui/server/ui-assets.ts

@@ -52,6 +52,8 @@ export const UI_MODULES: readonly string[] = [
   "/server-agent-page.js",
   // 0.4.18: the service panel (rail pins, Graph ⋯, Services names).
   "/svc-panel.js",
+  // D30: the shared searchable picker (Settings › Agents › Rotation).
+  "/combobox.js",
   // 0.4.18: where a service's live log comes from (Logs page and panel).
   "/log-source.js",
 ];