dsh-xray 0.7.0 → 0.7.2

package/lib/client.js

@@ -17,19 +17,31 @@ window.__ModuleLoader__.load({
 
     //#region styles (host design tokens; auto-claimed by client-modules)
     const css = [
-      '.xray-panel{max-width:920px;margin:0 auto;padding:16px 20px;font-size:13px;color:var(--dsw-alias-label-primary)}',
+      // The panel owns its scrolling: the tab fills the host view area
+      // (flex column, overflow on .xray-body) instead of growing inside the
+      // host scrollport. View switches then change only the inner scroll
+      // height — the page-level scroll position never jumps, however tall
+      // deps/cost render. .xray-stale dims outgoing content while the next
+      // payload is in flight.
+      '.xray-panel{flex:1;min-height:0;display:flex;flex-direction:column;max-width:920px;width:100%;margin:0 auto;padding:16px 20px;font-size:13px;color:var(--dsw-alias-label-primary)}',
+      '.xray-body{flex:1;min-height:0;overflow-y:auto}',
+      '.xray-stale{opacity:.45;transition:opacity .15s;pointer-events:none}',
       '.xray-sub{color:var(--dsw-alias-label-tertiary);margin:0 0 14px;font-size:12px}',
       '.xray-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}',
       '.xray-nav button{font:inherit;font-size:12px;color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-bg-layer-3);border:1px solid var(--dsw-alias-border-l2);border-radius:6px;padding:4px 10px;cursor:pointer}',
-      '.xray-nav button.active{color:#fff;background:var(--dsw-alias-brand-primary);border-color:var(--dsw-alias-brand-primary)}',
+      '.xray-nav button:hover{background:var(--dsw-alias-interactive-bg-hover)}',
+      // active view: the host's own tab-active family (state-business-*) —
+      // visible in both themes, unlike brand-primary which resolves to
+      // near-white in dark mode (white-on-white active buttons).
+      '.xray-nav button.active{color:var(--dsw-alias-state-business-primary);background:var(--dsw-alias-state-business-tertiary);border-color:var(--dsw-alias-state-business-primary);font-weight:600}',
       '.xray-table{border-collapse:collapse;width:100%;margin-top:6px}',
       '.xray-table th,.xray-table td{text-align:left;padding:4px 10px;border-bottom:1px solid var(--dsw-alias-border-l2);vertical-align:top}',
       '.xray-table th{color:var(--dsw-alias-label-tertiary);font-weight:normal}',
       '.xray-num{text-align:right}',
-      '.xray-warn{color:var(--dsw-alias-label-error)}',
-      '.xray-ok{color:var(--dsw-alias-label-success,#7ee787)}',
+      '.xray-warn{color:var(--dsw-alias-state-error-primary,#f85149)}',
+      '.xray-ok{color:var(--dsw-alias-state-success-primary,#3fb950)}',
       '.xray-muted{color:var(--dsw-alias-label-tertiary)}',
-      '.xray-bar{background:var(--dsw-alias-brand-primary);height:10px;border-radius:2px;display:inline-block}',
+      '.xray-bar{background:var(--dsw-alias-state-business-primary);height:10px;border-radius:2px;display:inline-block}',
       '.xray-h3{font-size:13px;font-weight:600;margin:14px 0 4px}',
     ].join('\n');
     if (
@@ -260,11 +272,13 @@ window.__ModuleLoader__.load({
       // `for` stamps which view the payload belongs to: a click flips `view`
       // synchronously while `state` still carries the previous view's data —
       // rendering that mismatch with the new renderer throws and unmounts
-      // the whole tab. Mismatch renders as loading instead.
+      // the whole tab. During the switch the previous view's content stays
+      // up (dimmed) and is replaced in one paint when the payload lands, so
+      // the layout changes once per click instead of collapsing to a
+      // one-line loading row and re-expanding.
       const [state, setState] = react.useState({ phase: 'loading', for: 'summary' });
       react.useEffect(() => {
         let alive = true;
-        setState({ phase: 'loading', for: view });
         fetch(`/xray/api/${view}`)
           .then(async (res) => {
             if (!res.ok) throw new Error(await res.text());
@@ -285,15 +299,18 @@ window.__ModuleLoader__.load({
           alive = false;
         };
       }, [view]);
+      // Render whatever payload we HAVE (state.for), not the view the user
+      // just requested — the stale content keeps the scaffold stable while
+      // the fresh payload is in flight.
+      const settled = state.phase !== 'loading';
       let body;
-      if (state.for !== view || state.phase === 'loading')
-        body = h('p', { className: 'xray-muted' }, `loading ${view}…`);
+      if (!settled) body = h('p', { className: 'xray-muted' }, `loading ${view}…`);
       else if (state.phase === 'error') body = h('p', { className: 'xray-warn' }, state.message);
       else {
         // A diagnostic surface must never take itself down on one bad
         // payload: render the failure, keep the tab and its nav alive.
         try {
-          body = renderers[view](state.data);
+          body = renderers[state.for](state.data);
         } catch (err) {
           body = h(
             'p',
@@ -302,6 +319,7 @@ window.__ModuleLoader__.load({
           );
         }
       }
+      const stale = settled && state.for !== view;
       return h(
         'div',
         { className: 'xray-panel' },
@@ -317,7 +335,7 @@ window.__ModuleLoader__.load({
             ),
           ),
         ),
-        body,
+        h('div', { className: stale ? 'xray-body xray-stale' : 'xray-body' }, body),
       );
     }
     //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-xray",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "X-ray for your DeepSeek Harness — see what's actually loaded, why, and what it costs you.",
   "repository": {
     "type": "git",