@iasiv5/dsh-quota-watch 0.1.2 → 0.1.4

package/lib/client.js

@@ -234,6 +234,13 @@ var STYLE_TEXT = `
 .dqw-chev { font-size: 9px; line-height: 14px; opacity: .6; flex: none; width: 10px; text-align: center; }
 .dqw-stale-mark { flex: none; font-size: 9px; line-height: 14px; color: var(--dsw-alias-label-warning, #b46900); cursor: help; }
 .dqw-errtext { font-size: 10px; line-height: 14px; opacity: .7; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dqw-rail-trigger { display: none; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dsw-alias-label-primary, inherit); cursor: pointer; transition: background-color .12s, color .12s; }
+.dqw-rail-trigger svg { display: block; width: 16px; height: 16px; }
+.dqw-rail-trigger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
+.dqw-rail-trigger:active:not(:disabled), .dqw-rail-trigger[aria-expanded="true"] { background: var(--dsw-alias-interactive-bg-active, rgba(128,128,128,.18)); color: var(--dsw-alias-label-primary, inherit); }
+.dqw-rail-trigger:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #5b8def); outline-offset: 2px; }
+:host([data-dsh-quota-watch-sidebar-collapsed]) .dqw-card { display: none; }
+:host([data-dsh-quota-watch-sidebar-collapsed]) .dqw-rail-trigger { display: inline-flex; }
 @media print { :host { display: none !important; } }
 `;
 var FLOAT_STYLE_TEXT = `
@@ -266,7 +273,8 @@ var FLOAT_STYLE_TEXT = `
 .dqw-panel-back:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
 .dqw-panel-close { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--dsw-alias-label-secondary, inherit); cursor: pointer; font: inherit; font-size: 12px; line-height: 1; }
 .dqw-panel-close:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
-.dqw-overview-list { display: flex; flex-direction: column; gap: 2px; max-width: 240px; }
+.dqw-overview-list { display: flex; flex-direction: column; gap: 2px; }
+.dqw-bar { background: var(--dsw-alias-bg-tertiary, rgba(128,128,128,.38)); }
 .dqw-row-summary { display: flex; align-items: center; gap: 6px; padding: 3px 6px; margin: 0 -2px; border-radius: 8px; }
 .dqw-row-summary[data-expandable] { cursor: pointer; }
 .dqw-row-summary[data-expandable]:hover { background: var(--dsw-alias-bg-hover, rgba(128,128,128,.12)); }
@@ -345,6 +353,36 @@ function text(doc, tag, className, value) {
   node.textContent = String(value ?? "");
   return node;
 }
+function quotaIcon(doc) {
+  const namespace = "http://www.w3.org/2000/svg";
+  const svg = doc.createElementNS(namespace, "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("width", "16");
+  svg.setAttribute("height", "16");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "2");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  const dial = doc.createElementNS(namespace, "circle");
+  dial.setAttribute("cx", "12");
+  dial.setAttribute("cy", "12");
+  dial.setAttribute("r", "10");
+  const ticks = doc.createElementNS(namespace, "path");
+  ticks.setAttribute("d", "M12 2.4v1.6M12 20v1.6M2.4 12h1.6M20 12h1.6M5.2 5.2l1.1 1.1M18.8 18.8l-1.1-1.1M18.8 5.2l-1.1 1.1M5.2 18.8l1.1-1.1");
+  const needle = doc.createElementNS(namespace, "path");
+  needle.setAttribute("d", "M12 12l4.5-4");
+  const hub = doc.createElementNS(namespace, "circle");
+  hub.setAttribute("cx", "12");
+  hub.setAttribute("cy", "12");
+  hub.setAttribute("r", "1.4");
+  hub.setAttribute("fill", "currentColor");
+  hub.setAttribute("stroke", "none");
+  svg.append(dial, ticks, needle, hub);
+  return svg;
+}
 function menuItem(doc, action, label) {
   const item = doc.createElement("button");
   item.type = "button";
@@ -451,7 +489,16 @@ function mountQuotaCard({
   const lastUpdated = text(doc, "p", "dqw-meta", copy.loading);
   lastUpdated.dataset.role = "updated";
   body.append(lastUpdated);
-  card.append(body);
+  const railTrigger = doc.createElement("button");
+  railTrigger.type = "button";
+  railTrigger.className = "dqw-rail-trigger";
+  railTrigger.dataset.dshQuotaWatchRail = "";
+  railTrigger.title = copy.title;
+  railTrigger.setAttribute("aria-label", copy.title);
+  railTrigger.setAttribute("aria-haspopup", "dialog");
+  railTrigger.setAttribute("aria-expanded", "false");
+  railTrigger.append(quotaIcon(doc));
+  card.append(body, railTrigger);
   cardRoot.append(style, card);
   const panel = doc.createElement("div");
   panel.className = "dqw-panel";
@@ -784,6 +831,7 @@ function mountQuotaCard({
       lastAnchor = null;
       panelNav = false;
       surface.setAttribute("aria-expanded", "false");
+      railTrigger.setAttribute("aria-expanded", "false");
       return;
     }
     if (openKey === "overview") {
@@ -794,6 +842,7 @@ function mountQuotaCard({
       panel.hidden = false;
       placePanel();
       surface.setAttribute("aria-expanded", "true");
+      railTrigger.setAttribute("aria-expanded", "true");
       return;
     }
     const provider = (snapshot?.providers ?? []).find((item) => item?.key === openKey);
@@ -810,6 +859,7 @@ function mountQuotaCard({
     panel.hidden = false;
     placePanel();
     surface.setAttribute("aria-expanded", "true");
+    railTrigger.setAttribute("aria-expanded", "true");
   };
   const renderFloatFace = () => {
     const providers = snapshot?.providers ?? [];
@@ -881,6 +931,14 @@ function mountQuotaCard({
     event.preventDefault();
     openMenu();
   };
+  const onRailClick = () => {
+    if (openKey !== void 0 && !panel.hidden) {
+      openKey = void 0;
+      syncPop();
+      return;
+    }
+    openOverview(railTrigger);
+  };
   const onMenuClick = (event) => {
     const item = event.target?.closest?.("[data-menu]");
     if (!item) return;
@@ -901,7 +959,13 @@ function mountQuotaCard({
   };
   const syncCardVisibility = () => {
     syncFootNarrowness();
-    container.hidden = surfaceFlags.cardHidden || sidebarCollapsed || footTooNarrow || noDataHidden;
+    const cardOn = !surfaceFlags.cardHidden;
+    const narrowOrCollapsed = footTooNarrow || sidebarCollapsed;
+    const showCard = cardOn && !narrowOrCollapsed && !noDataHidden;
+    const showRail = cardOn && narrowOrCollapsed && !noDataHidden;
+    container.hidden = !showCard && !showRail;
+    if (showRail) container.dataset.dshQuotaWatchSidebarCollapsed = "";
+    else delete container.dataset.dshQuotaWatchSidebarCollapsed;
   };
   const footResizeObserver = typeof win.ResizeObserver === "function" ? new win.ResizeObserver(() => {
     syncCardVisibility();
@@ -1099,6 +1163,7 @@ function mountQuotaCard({
   surface.addEventListener("click", onSurfaceClick);
   surface.addEventListener("keydown", onSurfaceKeydown);
   surface.addEventListener("contextmenu", onSurfaceContext);
+  railTrigger.addEventListener("click", onRailClick);
   let disposeDrag = attachDrag(surface);
   doc.addEventListener("visibilitychange", onVisibilityChange);
   doc.addEventListener("pointerdown", onDocPointerDown, true);
@@ -1121,6 +1186,7 @@ function mountQuotaCard({
     surface.removeEventListener("click", onSurfaceClick);
     surface.removeEventListener("keydown", onSurfaceKeydown);
     surface.removeEventListener("contextmenu", onSurfaceContext);
+    railTrigger.removeEventListener("click", onRailClick);
     menu.removeEventListener("click", onMenuClick);
     disposeDrag();
     container.remove();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iasiv5/dsh-quota-watch",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "DSH Web sidebar monitor for GLM Coding Plan quotas and GitHub Copilot credits",
   "type": "module",
   "main": "./src/host.mjs",

package/src/client.mjs

@@ -107,6 +107,13 @@ const STYLE_TEXT = `
 .dqw-chev { font-size: 9px; line-height: 14px; opacity: .6; flex: none; width: 10px; text-align: center; }
 .dqw-stale-mark { flex: none; font-size: 9px; line-height: 14px; color: var(--dsw-alias-label-warning, #b46900); cursor: help; }
 .dqw-errtext { font-size: 10px; line-height: 14px; opacity: .7; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dqw-rail-trigger { display: none; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dsw-alias-label-primary, inherit); cursor: pointer; transition: background-color .12s, color .12s; }
+.dqw-rail-trigger svg { display: block; width: 16px; height: 16px; }
+.dqw-rail-trigger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
+.dqw-rail-trigger:active:not(:disabled), .dqw-rail-trigger[aria-expanded="true"] { background: var(--dsw-alias-interactive-bg-active, rgba(128,128,128,.18)); color: var(--dsw-alias-label-primary, inherit); }
+.dqw-rail-trigger:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #5b8def); outline-offset: 2px; }
+:host([data-dsh-quota-watch-sidebar-collapsed]) .dqw-card { display: none; }
+:host([data-dsh-quota-watch-sidebar-collapsed]) .dqw-rail-trigger { display: inline-flex; }
 @media print { :host { display: none !important; } }
 `
 
@@ -145,7 +152,8 @@ const FLOAT_STYLE_TEXT = `
 .dqw-panel-back:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
 .dqw-panel-close { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--dsw-alias-label-secondary, inherit); cursor: pointer; font: inherit; font-size: 12px; line-height: 1; }
 .dqw-panel-close:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
-.dqw-overview-list { display: flex; flex-direction: column; gap: 2px; max-width: 240px; }
+.dqw-overview-list { display: flex; flex-direction: column; gap: 2px; }
+.dqw-bar { background: var(--dsw-alias-bg-tertiary, rgba(128,128,128,.38)); }
 .dqw-row-summary { display: flex; align-items: center; gap: 6px; padding: 3px 6px; margin: 0 -2px; border-radius: 8px; }
 .dqw-row-summary[data-expandable] { cursor: pointer; }
 .dqw-row-summary[data-expandable]:hover { background: var(--dsw-alias-bg-hover, rgba(128,128,128,.12)); }
@@ -384,7 +392,18 @@ export function mountQuotaCard({
   const lastUpdated = text(doc, 'p', 'dqw-meta', copy.loading)
   lastUpdated.dataset.role = 'updated'
   body.append(lastUpdated)
-  card.append(body)
+  // Collapsed web rail (0.0.18 behaviour, card opt-in only): a 36px gauge icon
+  // replaces the card body; the shadow CSS swaps them on the host's collapsed flag.
+  const railTrigger = doc.createElement('button')
+  railTrigger.type = 'button'
+  railTrigger.className = 'dqw-rail-trigger'
+  railTrigger.dataset.dshQuotaWatchRail = ''
+  railTrigger.title = copy.title
+  railTrigger.setAttribute('aria-label', copy.title)
+  railTrigger.setAttribute('aria-haspopup', 'dialog')
+  railTrigger.setAttribute('aria-expanded', 'false')
+  railTrigger.append(quotaIcon(doc))
+  card.append(body, railTrigger)
   cardRoot.append(style, card)
   // Details open in a viewport-level floating panel — the only detail surface.
   const panel = doc.createElement('div')
@@ -752,6 +771,7 @@ export function mountQuotaCard({
       lastAnchor = null
       panelNav = false
       surface.setAttribute('aria-expanded', 'false')
+      railTrigger.setAttribute('aria-expanded', 'false')
       return
     }
     if (openKey === 'overview') {
@@ -762,6 +782,7 @@ export function mountQuotaCard({
       panel.hidden = false
       placePanel()
       surface.setAttribute('aria-expanded', 'true')
+      railTrigger.setAttribute('aria-expanded', 'true')
       return
     }
     const provider = (snapshot?.providers ?? []).find((item) => item?.key === openKey)
@@ -778,6 +799,7 @@ export function mountQuotaCard({
     panel.hidden = false
     placePanel()
     surface.setAttribute('aria-expanded', 'true')
+    railTrigger.setAttribute('aria-expanded', 'true')
   }
 
   const renderFloatFace = () => {
@@ -855,6 +877,15 @@ export function mountQuotaCard({
     event.preventDefault()
     openMenu()
   }
+  /** Collapsed-rail gauge icon: toggles the panel, exactly like the capsule. */
+  const onRailClick = () => {
+    if (openKey !== undefined && !panel.hidden) {
+      openKey = undefined
+      syncPop()
+      return
+    }
+    openOverview(railTrigger)
+  }
   const onMenuClick = (event) => {
     const item = event.target?.closest?.('[data-menu]')
     if (!item) return
@@ -880,7 +911,17 @@ export function mountQuotaCard({
   }
   const syncCardVisibility = () => {
     syncFootNarrowness()
-    container.hidden = surfaceFlags.cardHidden || sidebarCollapsed || footTooNarrow || noDataHidden
+    // Rail entry follows the WIDTH signal, not the host attribute: this DSH
+    // build (0.2.0-rc.2 web) never writes data-sidebar-collapsed on collapse
+    // (verified via CDP + bundle grep), but the foot container measurably
+    // narrows — and the 36px gauge icon fits any rail.
+    const cardOn = !surfaceFlags.cardHidden
+    const narrowOrCollapsed = footTooNarrow || sidebarCollapsed
+    const showCard = cardOn && !narrowOrCollapsed && !noDataHidden
+    const showRail = cardOn && narrowOrCollapsed && !noDataHidden
+    container.hidden = !showCard && !showRail
+    if (showRail) container.dataset.dshQuotaWatchSidebarCollapsed = ''
+    else delete container.dataset.dshQuotaWatchSidebarCollapsed
   }
   const footResizeObserver = typeof win.ResizeObserver === 'function'
     ? new win.ResizeObserver(() => { syncCardVisibility() })
@@ -1090,6 +1131,7 @@ export function mountQuotaCard({
   surface.addEventListener('click', onSurfaceClick)
   surface.addEventListener('keydown', onSurfaceKeydown)
   surface.addEventListener('contextmenu', onSurfaceContext)
+  railTrigger.addEventListener('click', onRailClick)
   let disposeDrag = attachDrag(surface)
   doc.addEventListener('visibilitychange', onVisibilityChange)
   doc.addEventListener('pointerdown', onDocPointerDown, true)
@@ -1113,6 +1155,7 @@ export function mountQuotaCard({
     surface.removeEventListener('click', onSurfaceClick)
     surface.removeEventListener('keydown', onSurfaceKeydown)
     surface.removeEventListener('contextmenu', onSurfaceContext)
+    railTrigger.removeEventListener('click', onRailClick)
     menu.removeEventListener('click', onMenuClick)
     disposeDrag()
     container.remove()