@dennisrongo/dsh-weather 0.3.0 → 0.3.2

package/README.md

@@ -1,9 +1,15 @@
 # dsh-weather
 
-Weather bar for the [DeepSeek Harness](https://github.com/deepseek-ai/dsh) web UI — current conditions, a short hourly outlook, humidity and wind, pinned to the bottom-center of the page.
+[![npm](https://img.shields.io/npm/v/@dennisrongo/dsh-weather)](https://www.npmjs.com/package/@dennisrongo/dsh-weather)
+
+**npm:** [`@dennisrongo/dsh-weather`](https://www.npmjs.com/package/@dennisrongo/dsh-weather) ·
+**source:** [dennisrongo/dsh-plugins](https://github.com/dennisrongo/dsh-plugins/tree/main/plugins/dsh-weather)
+
+Weather bar for the [DeepSeek Harness](https://github.com/deepseek-ai/dsh) web UI — current conditions, a short hourly outlook, humidity and wind, pinned across the top of the page.
 
 - **Data:** [Open-Meteo](https://open-meteo.com) (free, no API key) via the browser.
-- **Location:** `localStorage["dsh-weather:location"] = "Your City"` if set, else coarse IP geolocation (ipapi.co), else New York.
+- **Location:** `localStorage["dsh-weather:location"] = "Your City"` if set, else a coarse IP-geolocation provider chain, else New York.
+- **Placement:** centred on the space the shell has actually left it, not on the viewport. The bar measures the shell frame's content box — which already excludes `dsh-mission-control`'s docked rail — and subtracts any overlay flying a `data-dsh-overlay-claim="right"` marker, today `dsh-plan-board`'s plan panel. So it slides aside and sheds detail as the free span narrows instead of sitting underneath them.
 - **Mount point:** additive `shell.overlay` slot — pure-consumer client plugin, empty host half.
 - **Units:** Fahrenheit by default — click the temperature to toggle °F/°C. The choice is remembered in `localStorage["dsh-weather:unit"]`.
 - **Refresh:** every 15 min, plus a manual ⟳ button.
@@ -29,4 +35,4 @@ pnpm test
       name: '@dennisrongo/dsh-weather'
 ```
 
-Restart the profile; the bar appears at the bottom of the web UI.
+Restart the profile; the bar appears across the top of the web UI.

package/lib/client.js

@@ -191,6 +191,9 @@ async function fetchWeather() {
 var BAR_STYLES = `
 .dshwx {
   position: fixed;
+  /* Centred on the viewport only until the bar has measured the shell (see
+     useBandFit): the real centre is the middle of the span no docked overlay
+     has claimed, written inline. */
   left: 50%;
   transform: translateX(-50%);
   top: 8px;
@@ -205,19 +208,36 @@ var BAR_STYLES = `
   border: 1px solid var(--dsw-alias-border-l2, rgba(255,255,255,0.12));
   background: var(--dsw-specific-sidebar-fill, #1b1b1c);
   color: var(--dsw-alias-label-secondary, #cfd3d6);
-  font: 400 12px/1.4 var(--dsw-font-family, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif);
+  font: 400 13px/1.4 var(--dsw-font-family, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif);
   font-variant-numeric: tabular-nums;
   box-shadow: var(--dsw-shadow-lv3, 0 0 1px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.12));
   cursor: default;
   user-select: none;
   white-space: nowrap;
+  /* DSH Desktop on Windows overlays a 36px window-drag strip at the top of the
+     viewport (#dsh-desktop-windows-drag-region: -webkit-app-region: drag,
+     z-index 2147483644, pointer-events: none) that the compositor resolves
+     BEFORE hit-testing. no-drag here is belt-and-braces only \u2014 the desktop
+     preload already grants every button no-drag !important and the bar was
+     still unclickable, so a covered element's no-drag does not punch a hole
+     in an overlapping drag element (the same failure dsh-mission-control
+     documented for its stage bar). The real fix is the layout rule below,
+     which drops the bar clear of the strip. In a plain browser all of this
+     is inert. */
+  -webkit-app-region: no-drag;
+}
+body.dsh-desktop-windows-titlebar-layout .dshwx {
+  /* Clear the desktop drag strip: 36px strip + the usual 8px gap. The body
+     class is added by DSH Desktop's preload on Windows only, so the browser
+     and non-Windows builds keep top: 8px. */
+  top: 44px;
 }
 body[data-ds-dark-theme] .dshwx { box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.5); }
 .dshwx[hidden] { display: none; }
-.dshwx-icon { font-size: 15px; }
+.dshwx-icon { font-size: 16px; }
 .dshwx-temp {
   color: var(--dsw-alias-label-primary, #f9fafb);
-  font-weight: 600; font-size: 13px;
+  font-weight: 600; font-size: 14px;
   font-family: inherit; font-variant-numeric: tabular-nums;
   border: 0; background: transparent; padding: 1px 4px; margin: 0 -2px;
   border-radius: 6px; cursor: pointer; line-height: inherit;
@@ -225,57 +245,89 @@ body[data-ds-dark-theme] .dshwx { box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 8px 2
 .dshwx-temp:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(255,255,255,0.08)); }
 .dshwx-temp:focus-visible { outline: 2px solid var(--dsw-alias-label-caption, #81858c); outline-offset: 1px; }
 .dshwx-label { color: var(--dsw-alias-label-secondary, #cfd3d6); }
+/* The bar is a ~200px pill in the shell's top band \u2014 a small surface, so the
+   loading state stays TEXT rather than becoming a skeleton, which would be
+   heavier than the string it replaced. It takes the dim caption tone the other
+   plugins use for the same rung; a MODIFIER rather than a change to
+   .dshwx-label, which is shared with the loaded condition text and must keep
+   its secondary weight. */
+.dshwx-label.loading { color: var(--dsw-alias-label-tertiary, #adb2b8); }
 .dshwx-where {
   color: var(--dsw-alias-label-tertiary, #adb2b8);
   max-width: 160px; overflow: hidden; text-overflow: ellipsis;
 }
 .dshwx-sep { width: 1px; height: 14px; background: var(--dsw-alias-border-l2, rgba(255,255,255,0.12)); flex: none; }
-.dshwx-meta { color: var(--dsw-alias-label-caption, #81858c); font-size: 11px; }
+.dshwx-meta { color: var(--dsw-alias-label-caption, #81858c); font-size: 12px; }
 .dshwx-hours { display: flex; gap: 8px; align-items: center; }
-.dshwx-hour { display: flex; align-items: center; gap: 3px; color: var(--dsw-alias-label-caption, #81858c); font-size: 11px; }
+.dshwx-hour { display: flex; align-items: center; gap: 3px; color: var(--dsw-alias-label-caption, #81858c); font-size: 12px; }
 .dshwx-hour b { color: var(--dsw-alias-label-secondary, #cfd3d6); font-weight: 500; }
 .dshwx-refresh {
   border: 0; background: transparent; cursor: pointer;
   color: var(--dsw-alias-label-caption, #81858c);
-  font-size: 12px; padding: 2px; border-radius: 50%;
+  font-size: 14px; padding: 2px; border-radius: 50%;
   display: grid; place-items: center;
 }
 .dshwx-refresh:hover { color: var(--dsw-alias-label-primary, #f9fafb); background: var(--dsw-alias-interactive-bg-hover, rgba(255,255,255,0.08)); }
 .dshwx-refresh.busy { animation: dshwx-spin 0.9s linear infinite; }
 @keyframes dshwx-spin { to { transform: rotate(360deg); } }
-.dshwx-error { color: var(--dsw-alias-state-error-primary, #ef4444); font-size: 11.5px; }
+.dshwx-error { color: var(--dsw-alias-state-error-primary, #ef4444); font-size: 12px; }
 /* --- Responsive tiers ---------------------------------------------------
-   The bar is a single nowrap pill, so narrow screens shed detail rather than
-   wrap. Each tier also drops the separator that preceded the hidden group,
-   otherwise stray dividers float with nothing between them. */
+   The bar is a single nowrap pill, so it sheds detail rather than wrap. Each
+   tier also drops the separator that preceded the hidden group, otherwise
+   stray dividers float with nothing between them.
+
+   Keyed on the MEASURED band (data-fit), not on a viewport media query. The
+   space this bar actually gets is the shell's content box minus whatever a
+   docked overlay has claimed, so a 2400px window with a plan panel open can
+   leave the bar less room than a phone \u2014 a media query would call that "full"
+   and let the pill run under the panel. The measurement falls back to the
+   viewport when there is no shell frame, so the tiers still work standalone. */
 
 /* Tablet: drop the hourly outlook and the humidity/wind readout. */
-@media (max-width: 720px) {
-  .dshwx-hours, .dshwx-meta { display: none; }
-  .dshwx-sep-hours, .dshwx-sep-meta { display: none; }
-}
+.dshwx[data-fit="tablet"] .dshwx-hours,
+.dshwx[data-fit="tablet"] .dshwx-meta,
+.dshwx[data-fit="tablet"] .dshwx-sep-hours,
+.dshwx[data-fit="tablet"] .dshwx-sep-meta,
+.dshwx[data-fit="phone"] .dshwx-hours,
+.dshwx[data-fit="phone"] .dshwx-meta,
+.dshwx[data-fit="phone"] .dshwx-sep-hours,
+.dshwx[data-fit="phone"] .dshwx-sep-meta,
+.dshwx[data-fit="tiny"] .dshwx-hours,
+.dshwx[data-fit="tiny"] .dshwx-meta,
+.dshwx[data-fit="tiny"] .dshwx-sep-hours,
+.dshwx[data-fit="tiny"] .dshwx-sep-meta { display: none; }
 
 /* Phone: tighten spacing, shrink the place name, and give the controls
    touch-sized hit areas without changing the pill's visual weight. */
-@media (max-width: 520px) {
-  .dshwx {
-    gap: 7px;
-    padding: 4px 10px;
-    max-width: calc(100vw - 16px);
-    font-size: 11.5px;
-  }
-  .dshwx-where { max-width: 92px; }
-  .dshwx-icon { font-size: 14px; }
-  .dshwx-temp { font-size: 12.5px; padding: 5px 7px; margin: -4px -3px; }
-  .dshwx-refresh { padding: 7px; margin: -5px; }
+.dshwx[data-fit="phone"],
+.dshwx[data-fit="tiny"] {
+  gap: 7px;
+  padding: 4px 10px;
+  font-size: 12px;
 }
+.dshwx[data-fit="phone"] .dshwx-where,
+.dshwx[data-fit="tiny"] .dshwx-where { max-width: 92px; }
+.dshwx[data-fit="phone"] .dshwx-icon,
+.dshwx[data-fit="tiny"] .dshwx-icon { font-size: 14px; }
+.dshwx[data-fit="phone"] .dshwx-temp,
+.dshwx[data-fit="tiny"] .dshwx-temp { font-size: 13px; padding: 5px 7px; margin: -4px -3px; }
+.dshwx[data-fit="phone"] .dshwx-refresh,
+.dshwx[data-fit="tiny"] .dshwx-refresh { padding: 7px; margin: -5px; }
 
 /* Very narrow: the place name is the least load-bearing text \u2014 the icon,
    temperature and condition carry the meaning. */
-@media (max-width: 380px) {
-  .dshwx-where, .dshwx-sep-where { display: none; }
-  .dshwx { gap: 6px; }
-}
+.dshwx[data-fit="tiny"] .dshwx-where,
+.dshwx[data-fit="tiny"] .dshwx-sep-where { display: none; }
+.dshwx[data-fit="tiny"] { gap: 6px; }
+
+/* Nowhere left to stand. Better absent for the moment a full-width overlay is
+   up than a clipped stub sliding under it.
+
+   visibility, NOT display. A display:none bar has no box, so
+   getBoundingClientRect reports zero height, the band measurement has no rows
+   to test claimants against and bails \u2014 and the bar would stay hidden forever
+   after the overlay that squeezed it went away. A hidden box is still a box. */
+.dshwx[data-fit="none"] { visibility: hidden; pointer-events: none; }
 
 /* Coarse pointers (touch) get the larger hit areas at any width. */
 @media (pointer: coarse) {
@@ -296,10 +348,114 @@ function injectStyles() {
   tag.textContent = BAR_STYLES;
   document.head.appendChild(tag);
 }
+var CLAIM_SELECTOR = '[data-dsh-overlay-claim="right"]';
+var BAND_GUTTER = 16;
+function zoomOf(el) {
+  const own = el.currentCSSZoom;
+  if (typeof own === "number" && own > 0) return own;
+  const width = el.getBoundingClientRect().width;
+  return el.offsetWidth > 0 && width > 0 ? width / el.offsetWidth : 1;
+}
+function tierOf(width) {
+  if (width === void 0) return "full";
+  if (width < 200) return "none";
+  if (width <= 380) return "tiny";
+  if (width <= 520) return "phone";
+  if (width <= 720) return "tablet";
+  return "full";
+}
+function measureBand(band) {
+  const layer = document.querySelector("[data-shell-overlay]");
+  const frame = layer?.parentElement ?? null;
+  let left = 0;
+  let right = window.innerWidth;
+  if (frame !== null) {
+    const rect = frame.getBoundingClientRect();
+    const style = getComputedStyle(frame);
+    const zoom = zoomOf(frame);
+    left = rect.left + (parseFloat(style.paddingLeft) || 0) * zoom;
+    right = rect.right - (parseFloat(style.paddingRight) || 0) * zoom;
+  }
+  for (const claim of Array.from(document.querySelectorAll(CLAIM_SELECTOR))) {
+    const rect = claim.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) continue;
+    if (rect.bottom <= band.top || rect.top >= band.bottom) continue;
+    if (rect.right < right - 1) continue;
+    right = Math.min(right, rect.left);
+  }
+  return {
+    centre: left + (right - left) / 2,
+    width: right - left - BAND_GUTTER * 2,
+    zoom: frame === null ? 1 : zoomOf(frame)
+  };
+}
+function useBandFit(ref) {
+  const [fit, setFit] = import_react.default.useState(null);
+  import_react.default.useLayoutEffect(() => {
+    const el = ref.current;
+    if (el === null) return;
+    const measure = () => {
+      const self = el.getBoundingClientRect();
+      if (self.height === 0) return;
+      const next = measureBand({ top: self.top, bottom: self.bottom });
+      setFit(
+        (prev) => prev !== null && Math.abs(prev.centre - next.centre) < 0.5 && Math.abs(prev.width - next.width) < 0.5 && prev.zoom === next.zoom ? prev : next
+      );
+    };
+    measure();
+    const layer = document.querySelector("[data-shell-overlay]");
+    const frame = layer?.parentElement ?? null;
+    const resize = new ResizeObserver(measure);
+    if (frame !== null) resize.observe(frame);
+    if (layer !== null) resize.observe(layer);
+    const scaleWatch = new MutationObserver(measure);
+    scaleWatch.observe(document.body, { attributes: true, attributeFilter: ["style", "class"] });
+    const mutation = new MutationObserver((records) => {
+      if (records.every((record) => el.contains(record.target))) return;
+      measure();
+    });
+    if (layer !== null) {
+      mutation.observe(layer, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ["style", "data-dsh-overlay-claim", "hidden"]
+      });
+    }
+    if (frame !== null) mutation.observe(frame, { attributes: true, attributeFilter: ["style"] });
+    window.addEventListener("resize", measure);
+    return () => {
+      resize.disconnect();
+      scaleWatch.disconnect();
+      mutation.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [ref]);
+  return fit;
+}
 function WeatherBar() {
   const [state, setState] = import_react.default.useState({ status: "loading" });
   const [busy, setBusy] = import_react.default.useState(false);
   const [unit, setUnit] = import_react.default.useState(loadUnit);
+  const ref = import_react.default.useRef(null);
+  const fit = useBandFit(ref);
+  const shell = {
+    ref,
+    className: "dshwx",
+    "data-fit": tierOf(fit?.width),
+    // A non-positive width is the squeezed-out case: the `none` tier hides the
+    // bar, and writing a negative max-width would be an ignored declaration
+    // that left it at full size behind the overlay.
+    //
+    // Both lengths are divided by the zoom: `fit` is measured in viewport px
+    // and these are author px the zoom scales again (see zoomOf).
+    ...fit === null || fit.width <= 0 ? {} : {
+      style: {
+        left: `${fit.centre / fit.zoom}px`,
+        maxWidth: `${fit.width / fit.zoom}px`
+      }
+    }
+  };
   const toggleUnit = () => {
     setUnit((prev) => {
       const next = prev === "C" ? "F" : "C";
@@ -333,28 +489,29 @@ function WeatherBar() {
     fetchWeather().then(setState).catch((e) => setState({ status: "error", error: String(e?.message ?? e) })).finally(() => setBusy(false));
   };
   if (state.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dshwx", "aria-live": "polite", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dshwx-icon", children: "\u{1F321}\uFE0F" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dshwx-label", children: "Loading weather\u2026" })
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...shell, role: "status", "aria-live": "polite", "aria-busy": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dshwx-icon", "aria-hidden": "true", children: "\u{1F321}\uFE0F" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dshwx-label loading", children: "Loading weather\u2026" })
     ] });
   }
   if (state.status === "error" || !state.now) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dshwx", "aria-live": "polite", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...shell, "aria-live": "polite", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dshwx-icon", children: "\u26A0\uFE0F" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dshwx-error", title: state.error, children: "Weather unavailable" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: `dshwx-refresh${busy ? " busy" : ""}`, title: "Retry", onClick: reload, children: "\u27F3" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: `dshwx-refresh${busy ? " busy" : ""}`, "data-dsh-no-drag": "", title: "Retry", onClick: reload, children: "\u27F3" })
     ] });
   }
   const { icon, label } = describeCode(state.now.weatherCode, state.now.isDay);
   const other = unit === "C" ? "F" : "C";
   const title = `${label} in ${state.where ?? ""} \u2014 feels like ${fmtTemp(state.now.apparentC, unit)}, humidity ${state.now.humidity}%, wind ${Math.round(state.now.windKph)} km/h \xB7 click the temperature for \xB0${other}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dshwx", title, "aria-live": "polite", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...shell, title, "aria-live": "polite", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dshwx-icon", children: icon }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       {
         type: "button",
         className: "dshwx-temp",
+        "data-dsh-no-drag": "",
         onClick: toggleUnit,
         title: `Switch to \xB0${other}`,
         "aria-label": `Temperature ${fmtTemp(state.now.temperatureC, unit)}. Switch to degrees ${other === "F" ? "Fahrenheit" : "Celsius"}.`,
@@ -384,7 +541,7 @@ function WeatherBar() {
       Math.round(state.now.windKph),
       "km/h"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: `dshwx-refresh${busy ? " busy" : ""}`, title: "Refresh weather", onClick: reload, children: "\u27F3" })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: `dshwx-refresh${busy ? " busy" : ""}`, "data-dsh-no-drag": "", title: "Refresh weather", onClick: reload, children: "\u27F3" })
   ] });
 }
 function apply(ctx) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dennisrongo/dsh-weather",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Weather bar for DeepSeek Harness (dsh) — current conditions at the bottom of the web UI via Open-Meteo, rendered into shell.overlay",
   "type": "module",
   "license": "MIT",
@@ -29,7 +29,7 @@
     "postbuild": "node build/postbuild.mjs",
     "deploy": "node build/postbuild.mjs",
     "typecheck": "tsc --noEmit",
-    "test": "node test/smoke.mjs"
+    "test": "node build/build.mjs && node test/smoke.mjs"
   },
   "dsh": {
     "bundle": {