@monster-orange/den 0.4.16 → 0.4.18

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

@@ -62,8 +62,9 @@
  *   setOrgs([{ id, title, workspaces? }], currentId, onSelect?)
  *                                    two or more: the Org ▾ menu; a pick
  *                                    calls onSelect(id), fires `den:org`
- *   setWorkspaces({ label, title, items, focus, onSelect })
+ *   setWorkspaces({ label, title, items, focus, names, onSelect })
  *                                    the Workspace ▾ menu (header.js)
+ *   workspaceNames()                 every workspace's name, from it
  *   syncEnv()                        repaint Env ▾ from #env-sel
  *   registerCommand({ id, label, keywords?, kind?, run })
  *                                    a ⌘K palette row (R17, dev.20). label
@@ -77,6 +78,8 @@
  *   unregisterCommand(id), commands()
  *   openMenu(anchor, menu)           a .pop menu below anchor (the scope
  *                                    parts' and the user menu's)
+ *   topLayer.show(el, anchor, opts)  a page's own menu in the top layer
+ *                                    (0.4.17), placed by anchor; hide(el)
  *
  * Loading before shell.js: push functions onto window.denShellQueue (an
  * array); each runs with denShell once it exists, and a later push runs at
@@ -160,10 +163,47 @@
     "b.down.one": "{n} down",
     "act.pin": "Pin",
     "act.unpin": "Unpin",
+    "act.visit": "Visit",
+    "act.visitX": "Visit {s} (opens a new tab)",
     "act.pinX": "Pin {s}",
     "act.unpinX": "Unpin {s}",
     "toast.pinned": "Pinned {s}",
     "toast.unpinned": "Unpinned {s}",
+    // 0.4.18: the service panel (svc-panel.js) and Start's Folder.
+    "svp.label": "{s}: quick panel",
+    "svp.more": "Quick panel for {s}",
+    "svp.notRunning": "Not running",
+    "svp.up": "up {d}",
+    "svp.upNow": "up",
+    "svp.down": "down: {c}",
+    "svp.downNone": "down",
+    "svp.starting": "starting…",
+    "svp.stopped": "stopped",
+    "svp.noUrl": "No URL",
+    "svp.start": "Start",
+    "svp.stop": "Stop",
+    "svp.restart": "Restart",
+    "svp.logs": "Logs",
+    "svp.stopping": "Stopping {s}",
+    "svp.tests": "Last test run",
+    "svp.testsOk": "✓ {t}",
+    "svp.testsBad": "✗ failed {t}",
+    "svp.testsRun": "running…",
+    "svp.testsNone": "—",
+    "svp.runTests": "Run tests",
+    "svp.testsDone": "Tests passed: {s}",
+    "svp.testsFailed": "Tests failed: {s}",
+    "svp.agents": "Agents",
+    "svp.noAgents": "No agents in this repo.",
+    "svp.open": "Open",
+    "svp.openAg": "Open {s}",
+    "svp.startHere": "Start agent here",
+    "svp.openSvc": "Open in Services",
+    "svp.openGraph": "Open in Graph",
+    "svp.close": "Close",
+    "ag.new.folder": "Folder (optional)",
+    "ag.new.folderHelp":
+      "Inside the workspace's folder. Empty: the workspace's own.",
     collapse: "Collapse",
     expand: "Expand",
     menu: "Menu",
@@ -220,6 +260,8 @@
     "kind.app": "App",
     "kind.action": "Action",
     "kind.setting": "Setting",
+    "kind.workspace": "Workspace",
+    "pal.goWs": "Go to workspace {ws}",
     "pal.repos": "{n} repos",
     "pal.repos.one": "{n} repo",
     "pal.restart": "Restart {s}",
@@ -625,6 +667,10 @@
     "ag.pc.busy": "It's working. Change after this turn, or stop it now?",
     "ag.pc.after": "After this turn",
     "ag.pc.now": "Stop it now",
+    "ag.pc.fresh":
+      "{id} is now {p}: nothing to resume yet; started fresh (same conversation id, folder and scope)",
+    "ag.freshLine":
+      "Nothing to resume yet; started fresh (same conversation id, folder and scope)",
     "ag.pc.done": "{id} is now {p}",
     "ag.pc.pending": "{id} becomes {p} when this turn ends",
     "ag.more": "More for {id}",
@@ -776,6 +822,9 @@
       "This session has ended. Its record stays until it is resumed or removed.",
     "ag.switched": "Switched to {p}",
     "ag.exitedLine": "[the session exited{code}]",
+    "ag.refusedUnknown": "the server refused the terminal",
+    "ag.refusedStatus": "the server refused the terminal ({status})",
+    "ag.goWs": "Open {ws} on Workspaces",
     "ag.lost": "[disconnected: {why}]",
     "ag.reconnect": "Reconnect",
     "ag.noBackend":
@@ -1200,6 +1249,12 @@
     // SEC-2a: who this browser is (GET /api/session `identity`): local,
     // a signed-in device, or a GitHub login. Null until known.
     identity: null,
+    // 0.4.18: each pin's URL (svc-panel.js, from the health feed) for its
+    // Visit ↗, whether that Visit is off (down or starting: the panel's own
+    // live state), and the pin whose service panel is open.
+    pinUrls: {},
+    pinOff: {},
+    svpOpen: null,
   };
   try {
     var cached = JSON.parse(localStorage.getItem(LS) || "{}");
@@ -1411,6 +1466,141 @@
     return el;
   }
 
+  // ── the top layer (0.4.17): one placement for every menu ─────────────
+  // A menu shown with topShow is in the browser's top layer (a manual
+  // popover), placed by its anchor: below it, above when there's more room
+  // there, kept inside the window. No overflow or stacking ancestor can
+  // clip or cover it, and it stays where it is in the page, so the page's
+  // own click handlers still reach it. It closes when the page hides it
+  // (display: none), its anchor goes, or topHide.
+  var topOpen = [];
+  var TOP_MARGIN = 8;
+  function topSupported(el) {
+    return typeof el.showPopover === "function";
+  }
+  function topPlace(el, anchor, opts) {
+    var r = anchor.getBoundingClientRect();
+    var gap = opts.gap != null ? opts.gap : 4;
+    el.style.maxHeight = "";
+    // 0.4.18: a bottom sheet is placed by its CSS (bottom: 0), not here.
+    if (opts.sheet) {
+      el.style.removeProperty("top");
+      el.style.removeProperty("left");
+      return;
+    }
+    // 0.4.18: beside the anchor (the rail), level with a row in it.
+    if (opts.side === "right") {
+      var row = typeof opts.row === "function" ? opts.row() : null;
+      var rr = row ? row.getBoundingClientRect() : r;
+      var bw = el.offsetWidth;
+      var bh = el.offsetHeight;
+      var bl = Math.min(r.right + gap, window.innerWidth - bw - TOP_MARGIN);
+      var bt = Math.min(
+        rr.top + (opts.dy || 0),
+        window.innerHeight - bh - TOP_MARGIN,
+      );
+      el.style.setProperty("top", Math.max(TOP_MARGIN, bt) + "px", "important");
+      el.style.setProperty(
+        "left",
+        Math.max(TOP_MARGIN, bl) + "px",
+        "important",
+      );
+      return;
+    }
+    var w = el.offsetWidth;
+    var h = el.offsetHeight;
+    var vw = window.innerWidth;
+    var vh = window.innerHeight;
+    var below = vh - r.bottom - gap - TOP_MARGIN;
+    var above = r.top - gap - TOP_MARGIN;
+    var up = h > below && above > below;
+    var room = Math.max(80, up ? above : below);
+    if (h > room) {
+      el.style.maxHeight = room + "px";
+      h = room;
+    }
+    var top = up ? r.top - gap - h : r.bottom + gap;
+    var left = opts.align === "right" ? r.right - w : r.left;
+    left = Math.max(TOP_MARGIN, Math.min(left, vw - w - TOP_MARGIN));
+    // Important, so no page or UA rule (a popover's inset) moves it.
+    el.style.setProperty("top", Math.max(TOP_MARGIN, top) + "px", "important");
+    el.style.setProperty("left", left + "px", "important");
+  }
+  function topIndex(el) {
+    for (var i = 0; i < topOpen.length; i++) if (topOpen[i].el === el) return i;
+    return -1;
+  }
+  function topShow(el, anchor, opts) {
+    if (!el || !anchor) return;
+    opts = opts || {};
+    var i = topIndex(el);
+    if (i >= 0) {
+      topOpen[i].anchor = anchor;
+      topOpen[i].opts = opts;
+    } else {
+      if (topSupported(el)) {
+        if (!el.hasAttribute("popover")) {
+          el.setAttribute("popover", "manual");
+          el.setAttribute("data-den-top-added", "");
+        }
+        try {
+          if (!el.matches(":popover-open")) el.showPopover();
+        } catch (e) {
+          /* not in the document yet: placed as fixed */
+        }
+      }
+      var o = { el: el, anchor: anchor, opts: opts, mo: null };
+      if (typeof MutationObserver === "function") {
+        o.mo = new MutationObserver(function () {
+          topCheck(o);
+        });
+        o.mo.observe(el, {
+          attributes: true,
+          attributeFilter: ["style", "class", "hidden"],
+        });
+      }
+      topOpen.push(o);
+    }
+    el.classList.add("den-toplayer");
+    topPlace(el, anchor, opts);
+  }
+  function topHide(el) {
+    var i = topIndex(el);
+    if (i < 0) return;
+    var o = topOpen.splice(i, 1)[0];
+    if (o.mo) o.mo.disconnect();
+    try {
+      if (el.matches && el.matches(":popover-open")) el.hidePopover();
+    } catch (e) {
+      /* already gone */
+    }
+    if (el.hasAttribute("data-den-top-added")) {
+      el.removeAttribute("popover");
+      el.removeAttribute("data-den-top-added");
+    }
+    el.classList.remove("den-toplayer");
+    el.style.removeProperty("top");
+    el.style.removeProperty("left");
+  }
+  /** The page hid it, or its anchor went: it's closed. */
+  function topCheck(o) {
+    if (
+      !o.el.isConnected ||
+      !o.anchor.isConnected ||
+      o.el.hidden ||
+      getComputedStyle(o.el).display === "none"
+    )
+      topHide(o.el);
+  }
+  function topReplace() {
+    topOpen.slice().forEach(function (o) {
+      topCheck(o);
+      if (topIndex(o.el) >= 0) topPlace(o.el, o.anchor, o.opts);
+    });
+  }
+  window.addEventListener("resize", topReplace);
+  document.addEventListener("scroll", topReplace, true);
+
   // ── menus (.pop, R18): the scope parts' popovers ─────────────────────
   // A menu is { label, items: [{ heading } | { hr: true } | { label, tag?,
   // checked?, href?, onSelect? }] }. Rows with `checked` are radios (✓ when
@@ -1422,6 +1612,7 @@
     if (!openPop) return;
     var o = openPop;
     openPop = null;
+    topHide(o.el);
     if (o.el.remove) o.el.remove();
     o.anchor.setAttribute("aria-expanded", "false");
     // aria-controls names the menu only while it exists.
@@ -1497,15 +1688,14 @@
       }
     });
     pop.innerHTML = html;
-    document.body.appendChild(pop);
+    // Inside a modal, in it: anything outside a modal is inert.
+    var host =
+      (anchor.closest && anchor.closest("dialog[open]")) || document.body;
+    host.appendChild(pop);
     openPop = { el: pop, anchor: anchor };
     anchor.setAttribute("aria-expanded", "true");
     anchor.setAttribute("aria-controls", pop.id);
-    var r = anchor.getBoundingClientRect();
-    var w = pop.offsetWidth;
-    pop.style.top = r.bottom + 6 + "px";
-    pop.style.left =
-      Math.max(8, Math.min(r.left, window.innerWidth - w - 8)) + "px";
+    topShow(pop, anchor, { gap: 6 });
     pop.addEventListener("click", function (e) {
       var row = e.target.closest ? e.target.closest(".den-mi") : null;
       if (!row) return;
@@ -1943,7 +2133,14 @@
    * a link to manage them. onSelect(value, focus): choosing a workspace
    * also makes it the CLI default (header.js).
    */
+  // Every workspace's name, from the Workspace menu's model (header.js).
+  var workspaceNameList = [];
+  function workspaceNames() {
+    return workspaceNameList.slice();
+  }
   function setWorkspaces(model) {
+    workspaceNameList =
+      model && Array.isArray(model.names) ? model.names.slice() : [];
     var btn = document.getElementById("ws-pill");
     if (!btn) return;
     var sep = btn.nextElementSibling;
@@ -1992,6 +2189,47 @@
             : " off";
     return '<span class="den-dot' + cls + '" aria-hidden="true"></span>';
   }
+  /**
+   * 0.4.18: a pin's Visit ↗: none without a URL, greyed out while it is
+   * down. Down is the service panel's live state (pinOff), the same as its
+   * dot, so it holds for a pin outside the View too; the rail's rollup
+   * only without it.
+   */
+  function pinVisit(id) {
+    var url = state.pinUrls && state.pinUrls[id];
+    if (!url) return "";
+    var off = state.pinOff || {};
+    var down = Object.prototype.hasOwnProperty.call(off, id)
+      ? !!off[id]
+      : state.health[id] === "down";
+    return (
+      '<button type="button" class="den-pvisit" tabindex="-1" data-visit="' +
+      esc(id) +
+      '" data-url="' +
+      esc(url) +
+      '" 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>'
+    );
+  }
+  function visitPin(b) {
+    if (b.getAttribute("aria-disabled") === "true") {
+      toast(t("svp.notRunning"));
+      return;
+    }
+    var url = b.getAttribute("data-url");
+    if (url && /^https?:\/\//i.test(url))
+      window.open(url, "_blank", "noopener");
+  }
+  // 0.4.18: the service panel (svc-panel.js registers it).
+  var servicePanel = null;
+  function setServicePanel(p) {
+    servicePanel = p && typeof p.open === "function" ? p : null;
+  }
   function pinHref(id) {
     var repo = id.split("/")[0];
     return "/services#repo-" + encodeURIComponent(repo);
@@ -2060,9 +2298,12 @@
         null,
         state.pins
           .map(function (p) {
-            // The row is the link (named by the id alone, Delete unpins
-            // it); the × beside it is its own control, out of the tab
-            // order, named "Unpin <id>", its glyph hidden from readers.
+            // 0.4.18: the row (named by the id alone) opens the service's
+            // panel in place (svc-panel.js); it is still the link to
+            // Services, so ⌘-click and middle-click open that in a new
+            // tab. Delete unpins it. Visit ↗ beside it opens the service's
+            // URL, out of the tab order: the panel's first button is the
+            // keyboard's Visit. Unpin is in the panel's footer.
             return (
               '<div class="den-pin-row">' +
               item(
@@ -2074,17 +2315,17 @@
                   mono: true,
                 },
                 false,
-                // Holds the ×'s place in the row, as in the prototype.
-                '<span class="den-pin-sp" aria-hidden="true">×</span>',
-                ' data-pin="' + esc(p) + '" aria-keyshortcuts="Delete"',
+                "",
+                ' data-pin="' +
+                  esc(p) +
+                  '" data-svpanel="' +
+                  esc(p) +
+                  '" aria-haspopup="dialog" aria-expanded="' +
+                  (state.svpOpen === p ? "true" : "false") +
+                  '" aria-keyshortcuts="Delete"',
               ) +
-              '<button type="button" class="den-pin-x" tabindex="-1" data-unpin="' +
-              esc(p) +
-              '" aria-label="' +
-              esc(t("act.unpinX", { s: p })) +
-              '" title="' +
-              esc(t("act.unpin")) +
-              '"><span aria-hidden="true">×</span></button></div>'
+              pinVisit(p) +
+              "</div>"
             );
           })
           .join(""),
@@ -2292,10 +2533,28 @@
   });
   nav.addEventListener("click", function (e) {
     var tgt = e.target;
-    var x = tgt && tgt.closest ? tgt.closest("[data-unpin]") : null;
-    if (x) {
+    var v = tgt && tgt.closest ? tgt.closest("[data-visit]") : null;
+    if (v) {
       e.preventDefault();
-      unpinFromRail(x.getAttribute("data-unpin"));
+      visitPin(v);
+      return;
+    }
+    // 0.4.18: a plain click (or Enter) on a pinned row opens its panel;
+    // ⌘/Ctrl-, Shift- and middle-click keep the link (Services).
+    var sp = tgt && tgt.closest ? tgt.closest("[data-svpanel]") : null;
+    if (
+      sp &&
+      servicePanel &&
+      e.button === 0 &&
+      !e.metaKey &&
+      !e.ctrlKey &&
+      !e.shiftKey &&
+      !e.altKey
+    ) {
+      e.preventDefault();
+      servicePanel.open(sp.getAttribute("data-svpanel"), sp, {
+        fromRail: true,
+      });
       return;
     }
     var c = tgt && tgt.closest ? tgt.closest('[data-act="collapse"]') : null;
@@ -4377,6 +4636,7 @@
     setOrg: setOrg,
     setOrgs: setOrgs,
     setWorkspaces: setWorkspaces,
+    workspaceNames: workspaceNames,
     /** Repaint the Env part from #env-sel (after setting its value). */
     syncEnv: syncEnv,
     syncPinToggles: syncPinToggles,
@@ -4385,6 +4645,20 @@
     commands: commands,
     /** A .pop menu below `anchor` (the model as the scope menus'). */
     openMenu: openMenu,
+    /**
+     * The top layer (0.4.17): show(el, anchor, { align: "left"|"right",
+     * gap }) puts a page's own menu above everything, placed by its
+     * anchor; hide(el). The page hiding it (display: none) closes it too.
+     */
+    topLayer: { show: topShow, hide: topHide },
+    /**
+     * 0.4.18: the service panel. svc-panel.js registers { open, close,
+     * visit }; openServicePanel(id, opener) opens it beside opener.
+     */
+    setServicePanel: setServicePanel,
+    openServicePanel: function (id, opener) {
+      if (servicePanel) servicePanel.open(id, opener);
+    },
     closeMenu: function () {
       closeMenu(false);
     },
@@ -4544,6 +4818,13 @@
     "  max-height: calc(100vh - 72px); overflow-y: auto; box-sizing: border-box;",
     "  font: 14px/1.45 var(--sans); color: var(--text); }",
     ".den-pop:focus { outline: none; }",
+    // The top layer (0.4.17): a page's menu placed by its anchor (topShow), not
+    // where the UA puts a popover.
+    // No inset here: top and left are topPlace's (an !important inset beat them,
+    // and every menu sat at the window's corner, 0.4.17-dev.0).
+    ".den-toplayer { position: fixed !important; margin: 0 !important;",
+    "  right: auto !important; bottom: auto !important; z-index: 1000; overflow-y: auto;",
+    "  color: var(--text); }",
     // LK-1: the admin-password prompt is a <dialog> in the top layer (a popover, or
     // a modal over another modal): placed by its top/left, no UA box.
     "dialog.den-pop { margin: 0; inset: auto; max-width: none; }",
@@ -4720,18 +5001,65 @@
     "  display: inline-block; margin: 0 5px; }",
     ".den-dot.bad { background: var(--bad); } .den-dot.warn { background: var(--warn); }",
     ".den-dot.off { background: var(--faint); }",
-    ".den-pin-row { position: relative; }",
-    ".den-pin-sp { visibility: hidden; font-size: 12px; }",
-    ".den-pin-x { position: absolute; top: 0; bottom: 0; right: 10px; display: flex; align-items: center;",
-    "  padding: 0; border: 0; background: none; cursor: pointer; font: 12px var(--sans);",
-    "  opacity: 0; color: var(--faint); }",
-    ".den-pin-x:hover { color: var(--text); }",
-    ".den-pin-row:hover .den-pin-x, .den-pin-row:focus-within .den-pin-x { opacity: 1; }",
+    // 0.4.18: a pinned row is its name (opens the service panel) and Visit ↗.
+    ".den-pin-row { display: flex; align-items: center; gap: 2px; min-width: 0; }",
+    ".den-pin-row .den-ni { flex: 1; min-width: 0; }",
+    ".den-pin-row .den-ni[aria-expanded='true'] { background: var(--sunken); color: var(--text); }",
+    ".den-pvisit { flex: none; width: 26px; height: 26px; padding: 0; display: grid; place-items: center;",
+    "  background: none; border: 1px solid transparent; border-radius: var(--radius-button);",
+    "  color: var(--muted); cursor: pointer; font: 13px/1 var(--sans); }",
+    ".den-pvisit:hover { background: var(--sunken); color: var(--accent-text); border-color: var(--border); }",
+    ".den-pvisit[aria-disabled='true'], .den-svp .den-btn[aria-disabled='true'] { opacity: .45; cursor: not-allowed; }",
+    ".den-pvisit[aria-disabled='true']:hover { background: none; color: var(--muted); border-color: transparent; }",
+    "body.den-rail-collapsed .den-rail .den-pvisit { display: none; }",
+    "@media (max-width: 720px) { .den-pvisit { width: 32px; height: 32px; }",
+    "  body.den-rail-collapsed .den-rail .den-pvisit { display: grid; } }",
+    // The service panel (svc-panel.js): beside its row, a bottom sheet at phone width.
+    ".den-pop.den-svp { width: 340px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 0;",
+    "  max-height: calc(100dvh - 16px); overflow-y: auto; min-width: 0; }",
+    ".den-svp-h { display: grid; gap: 4px; padding: 12px 12px 10px; border-bottom: 1px solid var(--border); }",
+    ".den-svp-t { display: flex; align-items: center; gap: 8px; min-width: 0; }",
+    ".den-svp-t .den-dot, .den-svp-ag .den-dot, .den-svp-line .den-dot { margin: 0; }",
+    // Line heights pinned to the mock's (its mono font's normal), whatever the theme's font.
+    ".den-svp-t b { flex: 1; min-width: 0; font: 600 14px/21px var(--mono); overflow: hidden;",
+    "  text-overflow: ellipsis; white-space: nowrap; }",
+    ".den-svp-x { padding: 2px 6px; margin: -4px -6px -4px 0; }",
+    ".den-svp-meta { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }",
+    ".den-wsp { font: 11px/16px var(--mono); border-radius: 999px; padding: 0 7px; white-space: nowrap;",
+    "  border: 1px solid var(--border); color: var(--muted); }",
+    ".den-svp-st { color: var(--ok); } .den-svp-st.bad { color: var(--bad); }",
+    ".den-svp-st.off { color: var(--faint); } .den-svp-st.run { color: var(--accent-text); }",
+    ".den-svp-ms { font: 11.5px var(--mono); color: var(--faint); }",
+    ".den-svp-url { font: 12px/17px var(--mono); color: var(--faint); overflow-wrap: anywhere; }",
+    ".den-svp-acts { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px; }",
+    ".den-svp-sec { display: grid; gap: 6px; padding: 8px 12px 10px; border-top: 1px solid var(--border); }",
+    ".den-svp-k { font: 11px/16px var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .07em; }",
+    ".den-svp-line { display: flex; align-items: center; gap: 8px; font-size: 13px; }",
+    ".den-svp-line .den-svp-sp { margin-left: auto; }",
+    ".den-svp-ok { color: var(--ok); } .den-svp-bad { color: var(--bad); } .den-svp-none { color: var(--faint); }",
+    ".den-svp-ag { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0 8px;",
+    "  align-items: center; font-size: 13px; }",
+    ".den-svp-nm { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }",
+    ".den-svp-as { font: 11px var(--mono); color: var(--faint); white-space: nowrap; }",
+    ".den-wbdg { font: 10.5px var(--mono); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);",
+    "  border-radius: 999px; padding: 0 6px; }",
+    ".den-svp-help { font-size: 12px; color: var(--faint); line-height: 1.4; }",
+    ".den-svp-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 12px 10px;",
+    "  border-top: 1px solid var(--border); }",
+    ".den-svp-grow { margin-left: auto; }",
+    ".den-lnk { color: var(--accent-text); cursor: pointer; font: inherit; font-size: 12.5px; text-decoration: underline;",
+    "  background: none; border: 0; padding: 0; }",
+    ".den-scrim.den-svp-scrim { z-index: 43; }",
+    ".den-pop.den-svp.den-sheet.den-toplayer { top: auto !important; left: 0 !important; right: 0 !important;",
+    "  bottom: 0 !important; width: auto; max-width: none; border-bottom: 0; border-radius: 14px 14px 0 0;",
+    "  max-height: 85dvh; padding-bottom: env(safe-area-inset-bottom, 0px); }",
+    ".den-pop.den-svp.den-sheet::before { content: ''; display: block; width: 36px; height: 4px; border-radius: 2px;",
+    "  background: var(--border-strong); margin: 8px auto 0; }",
+    ".den-pop.den-svp.den-sheet .den-svp-acts .den-btn { flex: 1 1 auto; padding: 9px 12px; }",
     // Collapsed: icons only. The prototype hides headings and labels; they
     // stay here for screen readers (visually hidden, no space taken).
     "body.den-rail-collapsed .den-rail .den-lbl, body.den-rail-collapsed .den-rail .den-gh,",
-    "body.den-rail-collapsed .den-rail .den-bdg, body.den-rail-collapsed .den-rail .den-pin-x,",
-    "body.den-rail-collapsed .den-rail .den-pin-sp {",
+    "body.den-rail-collapsed .den-rail .den-bdg {",
     "  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;",
     "  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }",
     // Toast (.toast)