@jheavenknows/bluerouter 5.3.2 → 5.3.3

package/app/.next-cli-build/static/chunks/app/(dashboard)/dashboard/resource-monitor/template-eecb5d00bb376ac8.js

@@ -0,0 +1,478 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[770],{6202:(e,r,t)=>{"use strict";t.r(r),t.d(r,{default:()=>v});var a=t(95155),i=t(12115);let o="button[data-resource-server-id]",n="resource-vllm-metric-guide",s="resource-monitor-live-metrics";function l(e){let r=Number(e)||0;return .001>Math.abs(r-Math.round(r))?String(Math.round(r)):r.toFixed(1)}function c(e){let r=Number(e);return Number.isFinite(r)?Math.max(0,Math.min(100,r)):0}function u(e){let r=Number(e);return Number.isFinite(r)?r:null}function d(e){return String(e??"").replaceAll("&","&amp;").replaceAll("<","&lt;").replaceAll(">","&gt;").replaceAll('"',"&quot;").replaceAll("'","&#039;")}function p(e,r,t,a="primary"){let i=c(r);return`
+    <div class="resource-live-bar resource-live-bar-${a}">
+      <div class="resource-live-bar-head">
+        <span>${d(e)}</span>
+        <strong>${d(t)}</strong>
+      </div>
+      <div class="resource-live-bar-track" aria-hidden="true">
+        <span class="resource-live-bar-fill" style="width:${i.toFixed(1)}%"></span>
+      </div>
+    </div>
+  `}function m(e){let r=e.containerName?`${e.containerName}${e.containerId?` (${e.containerId})`:""}`:`:${e.port??"?"}`,t=e.endpoint||"",a=Array.isArray(e.models)?e.models.filter(Boolean):[];if(!1===e.metricsAvailable)return`
+      <div class="resource-vllm-instance resource-vllm-instance-muted">
+        <div class="resource-vllm-instance-title">${d(r)}</div>
+        <div class="resource-vllm-instance-sub">${t?`${d(t)} \xb7 `:""}chưa đọc được /metrics</div>
+      </div>
+    `;let i=u(e.kvCacheUsagePercent),o=Object.prototype.hasOwnProperty.call(e||{},"waitingCapacity")||Object.prototype.hasOwnProperty.call(e||{},"waitingDeferred");return`
+    <div class="resource-vllm-instance">
+      <div class="resource-vllm-instance-head">
+        <span class="resource-vllm-instance-title">${d(r)}</span>
+        ${a.length?`<span class="resource-vllm-model">${d(a.join(", "))}</span>`:""}
+      </div>
+      ${t?`<div class="resource-vllm-instance-sub">${d(t)}</div>`:""}
+      <div class="resource-vllm-instance-stats">
+        <span>R <b>${d(l(e.running))}</b></span>
+        <span>W <b>${d(l(e.waiting))}</b></span>
+        ${o?`<span>Cap <b>${d(l(e.waitingCapacity))}</b></span><span>Def <b>${d(l(e.waitingDeferred))}</b></span>`:""}
+        <span>KV <b>${null===i?"—":`${i.toFixed(1)}%`}</b></span>
+        <span>Pre <b>${d(l(e.preemptions))}</b></span>
+      </div>
+    </div>
+  `}function g(){document.getElementById(n)?.remove()}function v({children:e}){let r=(0,i.useRef)([]),t=(0,i.useRef)(new Map);return(0,i.useEffect)(()=>{let e=!1,a=null,i=null,v=()=>{let e=r.current;if(!e.length)return void g();let a=new Map(e.map(e=>[String(e.id),e])),i=Date.now();for(let e of document.querySelectorAll(o)){let r=String(e.dataset.resourceServerId||""),o=a.get(r),n=t.current.get(r),g=function(e,r=0){let t=e?.lastStatus;if(!t)return null;let a=t.vllm;if(!a)return{state:"upgrade",summary:"vLLM metrics \xb7 cần cập nhật agent",detail:"Agent hiện tại chưa c\xf3 vLLM monitor. Mở Sửa server v\xe0 c\xe0i lại agent một lần.",showReasons:!1,instances:[],count:0,metricsCount:0,discoveryLabel:"",pressureDetail:""};let i=Array.isArray(a.instances)?a.instances:[],o=a.summary||{},n=Number(o.instanceCount??i.length)||0,s=Number(o.metricsInstanceCount??n)||0,c=Number(o.running)||0,u=Number(o.waiting)||0,d=Number(o.waitingCapacity)||0,p=Number(o.waitingDeferred)||0,m=Object.prototype.hasOwnProperty.call(o||{},"waitingCapacity")||Object.prototype.hasOwnProperty.call(o||{},"waitingDeferred")||i.some(e=>Object.prototype.hasOwnProperty.call(e||{},"waitingCapacity")||Object.prototype.hasOwnProperty.call(e||{},"waitingDeferred")),g=Number(o.preemptions)||0,v=Number.isFinite(Number(o.kvCacheUsagePercent))?Number(o.kvCacheUsagePercent):null,b="docker"===a.discovery?"Docker-aware discovery":"Socket fallback discovery";if(!n)return{state:"none",summary:"vLLM \xb7 0 instance đang chạy",detail:"docker"===a.discovery?"Agent đ\xe3 kiểm tra Docker nhưng chưa ph\xe1t hiện container vLLM đang chạy.":"Agent chưa ph\xe1t hiện endpoint /metrics của vLLM tr\xean host.",showReasons:!1,instances:i,count:n,metricsCount:s,running:c,waiting:u,waitingCapacity:d,waitingDeferred:p,preemptions:g,kv:v,discoveryLabel:b,pressureDetail:"Kh\xf4ng c\xf3 queue pressure"};let x=i.map(e=>{let r=e.containerName?`${e.containerName}${e.containerId?` (${e.containerId})`:""}`:`:${e.port}`;if(!1===e.metricsAvailable)return`${r} \xb7 đang chạy nhưng chưa đọc được /metrics`;let t=Number.isFinite(Number(e.kvCacheUsagePercent))?`${Number(e.kvCacheUsagePercent).toFixed(1)}%`:"—",a=Array.isArray(e.models)&&e.models.length?` \xb7 ${e.models.join(", ")}`:"",i=e.endpoint?` \xb7 ${e.endpoint}`:"",o=Object.prototype.hasOwnProperty.call(e,"waitingCapacity")||Object.prototype.hasOwnProperty.call(e,"waitingDeferred")?` \xb7 Capacity ${l(e.waitingCapacity)} \xb7 Deferred ${l(e.waitingDeferred)}`:"";return`${r}${i} \xb7 Running ${l(e.running)} \xb7 Waiting ${l(e.waiting)}${o} \xb7 KV ${t} \xb7 Preempt ${l(e.preemptions)}${a}`}),h=s<n,f=d>0&&r>=8e3,w=d>0&&!f,y=h?"partial":f?"pressure":w?"transient":null!==v&&v>=90?"hot":"active",$=h?`${n} vLLM (${s} metrics)`:`${n} vLLM`,k=m&&u>0,M=k?`
+Capacity ${l(d)} \xb7 Deferred ${l(p)}`:"",C=f?`Capacity pressure li\xean tục ${Math.max(1,Math.round(r/1e3))}s`:w?"Capacity waiting mới xuất hiện; chưa coi l\xe0 overload":u>0?"Waiting hiện tại chưa tạo capacity pressure":"Kh\xf4ng c\xf3 queue pressure";return{state:y,summary:`${$} \xb7 Running ${l(c)} \xb7 Waiting ${l(u)}${M}
+KV ${null===v?"—":`${v.toFixed(1)}%`} \xb7 Preempt ${l(g)}`,detail:[`${b} \xb7 ${n} instance`,C,...x].join("\n"),showReasons:k,instances:i,count:n,metricsCount:s,running:c,waiting:u,waitingCapacity:d,waitingDeferred:p,preemptions:g,kv:v,discoveryLabel:b,pressureDetail:C}}(o,n?Math.max(0,i-n):0);if(!o){e.querySelector(`.${s}`)?.remove(),delete e.dataset.vllmState,delete e.dataset.vllmReasons,delete e.dataset.resourceLiveSignature;continue}g?(e.dataset.vllmState=g.state,e.dataset.vllmReasons=g.showReasons?"1":"0"):(delete e.dataset.vllmState,delete e.dataset.vllmReasons),e.dataset.vllmBaseTitle||(e.dataset.vllmBaseTitle=e.title||"Linux host"),e.title=e.dataset.vllmBaseTitle,function(e,r,t){let a,i;if(!r?.lastStatus){e.querySelector(`.${s}`)?.remove(),delete e.dataset.resourceLiveSignature;return}let o=`${function(e){if(!e)return"";if("upgrade"===e.state||"none"===e.state)return`
+      <section class="resource-live-section resource-vllm-block" data-state="${d(e.state)}">
+        <div class="resource-live-section-head">
+          <span class="resource-live-section-title"><span class="resource-live-state-dot"></span>vLLM</span>
+          <span class="resource-live-muted">${d(e.summary)}</span>
+        </div>
+        <div class="resource-live-caption">${d(e.detail)}</div>
+      </section>
+    `;let r=e.showReasons?`<span>Capacity <b>${d(l(e.waitingCapacity))}</b></span><span>Deferred <b>${d(l(e.waitingDeferred))}</b></span>`:"";return`
+    <section class="resource-live-section resource-vllm-block" data-state="${d(e.state)}">
+      <div class="resource-live-section-head">
+        <span class="resource-live-section-title"><span class="resource-live-state-dot"></span>vLLM</span>
+        <span class="resource-live-badge">${e.metricsCount<e.count?`${e.metricsCount}/${e.count} metrics`:`${e.count} instance`}</span>
+      </div>
+      <div class="resource-vllm-summary-grid">
+        <span>Running <b>${d(l(e.running))}</b></span>
+        <span>Waiting <b>${d(l(e.waiting))}</b></span>
+        ${r}
+        <span>Preempt <b>${d(l(e.preemptions))}</b></span>
+      </div>
+      ${null===e.kv?"":p("KV cache",e.kv,`${e.kv.toFixed(1)}%`,e.kv>=90?"warning":"emerald")}
+      <div class="resource-live-caption">${d(e.discoveryLabel)} \xb7 ${d(e.pressureDetail)}</div>
+      ${e.instances.length?`<div class="resource-vllm-instances">${e.instances.map(m).join("")}</div>`:""}
+    </section>
+  `}(t)}${function(e){let r=Array.isArray(e?.lastStatus?.gpus)?e.lastStatus.gpus:[];if(!r.length)return"";let t=r.map(e=>{let r=c(e.usagePercent),t=c(e.memoryUsagePercent),a=u(e.powerDrawW),i=u(e.powerLimitW),o=null!==a&&i&&i>0?c(a/i*100):0,n=u(e.temperatureC),s=null===a?"—":i&&i>0?`${a.toFixed(+(a<10))} / ${i.toFixed(0)} W`:`${a.toFixed(+(a<10))} W`;return`
+      <div class="resource-gpu-row">
+        <div class="resource-gpu-head">
+          <span class="resource-gpu-name">GPU ${d(e.index??"?")}</span>
+          <span class="resource-gpu-temp"><span class="material-symbols-outlined" aria-hidden="true">device_thermostat</span>${null===n?"—":`${n.toFixed(0)}\xb0C`}</span>
+        </div>
+        ${p("GPU load",r,`${r.toFixed(+(r<10))}%`,r>=90?"warning":"emerald")}
+        ${p("VRAM",t,`${t.toFixed(1)}%`,t>=95?"warning":"cyan")}
+        ${i&&i>0?p("Power",o,s,o>=95?"warning":"violet"):`<div class="resource-live-value-row"><span>Power</span><strong>${d(s)}</strong></div>`}
+      </div>
+    `}).join("");return`
+    <section class="resource-live-section resource-gpu-block">
+      <div class="resource-live-section-head">
+        <span class="resource-live-section-title"><span class="material-symbols-outlined resource-live-section-icon" aria-hidden="true">memory</span>GPU</span>
+        <span class="resource-live-badge">${r.length} card</span>
+      </div>
+      <div class="resource-gpu-list">${t}</div>
+    </section>
+  `}(r)}`;if(!o){e.querySelector(`.${s}`)?.remove(),delete e.dataset.resourceLiveSignature;return}let n=(a=((r?.lastStatus||{}).gpus||[]).map(e=>[e.index,e.usagePercent,e.memoryUsagePercent,e.temperatureC,e.powerDrawW,e.powerLimitW]),i=(t?.instances||[]).map(e=>[e.containerName,e.containerId,e.endpoint,e.running,e.waiting,e.waitingCapacity,e.waitingDeferred,e.kvCacheUsagePercent,e.preemptions,e.metricsAvailable,e.models]),JSON.stringify([r?.lastStatusAt,t?.state,t?.running,t?.waiting,t?.waitingCapacity,t?.waitingDeferred,t?.preemptions,t?.kv,t?.pressureDetail,i,a]));if(e.dataset.resourceLiveSignature===n)return;let g=e.querySelector(`.${s}`);g||((g=document.createElement("div")).className=s,g.setAttribute("aria-label","Realtime vLLM v\xe0 GPU metrics"),e.appendChild(g)),g.innerHTML=o,e.dataset.resourceLiveSignature=n}(e,o,g)}!function(){let e=document.querySelector(o),r=e?.closest(".scroll-thin-x");if(!r)return g();let t=document.getElementById(n);if(t){t.previousElementSibling!==r&&r.insertAdjacentElement("afterend",t);return}let a=document.createElement("section");a.id=n,a.className="resource-vllm-metric-guide",a.setAttribute("aria-label","Giải th\xedch chỉ số vLLM"),a.innerHTML=`
+    <div class="resource-vllm-guide-heading">
+      <span class="material-symbols-outlined resource-vllm-guide-icon" aria-hidden="true">info</span>
+      <div>
+        <div class="resource-vllm-guide-title">C\xe1ch đọc chỉ số vLLM</div>
+        <div class="resource-vllm-guide-subtitle">C\xe1c số tr\xean card l\xe0 snapshot realtime của to\xe0n bộ vLLM instance tr\xean Linux host.</div>
+      </div>
+    </div>
+    <div class="resource-vllm-guide-grid">
+      <div class="resource-vllm-guide-item">
+        <strong>Running</strong>
+        <span>Số request đang được scheduler xử l\xfd.</span>
+      </div>
+      <div class="resource-vllm-guide-item">
+        <strong>Waiting</strong>
+        <span>Số request đang chờ. Một nhịp Waiting ngắn chưa c\xf3 nghĩa l\xe0 qu\xe1 tải.</span>
+      </div>
+      <div class="resource-vllm-guide-item">
+        <strong>Capacity</strong>
+        <span>Request chờ v\xec scheduler/KV admission chưa đủ capacity. K\xe9o d\xe0i mới l\xe0 pressure.</span>
+      </div>
+      <div class="resource-vllm-guide-item">
+        <strong>Deferred</strong>
+        <span>Request bị ho\xe3n bởi constraint nội bộ kh\xe1c; kh\xf4ng mặc định đồng nghĩa thiếu GPU.</span>
+      </div>
+      <div class="resource-vllm-guide-item">
+        <strong>KV Cache</strong>
+        <span>% KV cache pool đang d\xf9ng, kh\xf4ng phải % tổng VRAM của GPU.</span>
+      </div>
+      <div class="resource-vllm-guide-item">
+        <strong>Preempt</strong>
+        <span>Counter t\xedch lũy số lần request phải nhường t\xe0i nguy\xean; tốc độ tăng quan trọng hơn tổng số.</span>
+      </div>
+    </div>
+    <div class="resource-vllm-guide-note">
+      <span class="material-symbols-outlined" aria-hidden="true">monitoring</span>
+      <span><strong>Đọc cảnh b\xe1o:</strong> Waiting tho\xe1ng qua vẫn b\xecnh thường. Dashboard chỉ coi <strong>Capacity &gt; 0 li\xean tục từ 8 gi\xe2y</strong> l\xe0 pressure; KV cao hoặc Preempt tăng li\xean tục cũng cần theo d\xf5i.</span>
+    </div>
+  `,r.insertAdjacentElement("afterend",a)}()},b=async()=>{try{let a=await fetch("/api/resource-monitor?snapshot=1",{cache:"no-store"}),i=await a.json().catch(()=>({}));if(!a.ok||e)return;let o=Array.isArray(i.servers)?i.servers:[];r.current=o;let n=Date.now(),s=new Set;for(let e of o){let r=String(e?.id||"");r&&(s.add(r),(Number(e?.lastStatus?.vllm?.summary?.waitingCapacity)||0)>0?t.current.has(r)||t.current.set(r,n):t.current.delete(r))}for(let e of t.current.keys())s.has(e)||t.current.delete(e);v()}catch{}},x=new MutationObserver(()=>{i&&window.clearTimeout(i),i=window.setTimeout(v,80)});x.observe(document.body,{childList:!0,subtree:!0}),a=window.setInterval(b,4e3);let h=window.setTimeout(b,500);return()=>{e=!0,x.disconnect(),window.clearInterval(a),window.clearTimeout(h),i&&window.clearTimeout(i),g(),document.querySelectorAll(`.${s}`).forEach(e=>e.remove())}},[]),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("style",{children:`
+        .resource-monitor-sortable-host {
+          min-width: 332px !important;
+          overflow: hidden;
+        }
+        .resource-monitor-live-metrics {
+          display: grid;
+          gap: 10px;
+          margin-top: 12px;
+          border-top: 1px solid var(--color-border-subtle);
+          padding-top: 10px;
+          padding-right: 2px;
+          pointer-events: none;
+          text-align: left;
+        }
+        .resource-live-section {
+          min-width: 0;
+          border: 1px solid var(--color-border-subtle);
+          border-radius: 12px;
+          background: color-mix(in srgb, var(--color-surface-2) 62%, var(--color-surface));
+          padding: 9px 10px;
+        }
+        .resource-live-section-head {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          justify-content: space-between;
+          gap: 8px;
+          margin-bottom: 7px;
+        }
+        .resource-live-section-title {
+          display: inline-flex;
+          min-width: 0;
+          align-items: center;
+          gap: 6px;
+          color: var(--color-text-main);
+          font-size: 11px;
+          font-weight: 750;
+          letter-spacing: .01em;
+        }
+        .resource-live-section-icon {
+          color: #10b981;
+          font-size: 15px;
+        }
+        .resource-live-state-dot {
+          width: 7px;
+          height: 7px;
+          flex: 0 0 auto;
+          border-radius: 999px;
+          background: #10b981;
+          box-shadow: 0 0 0 3px rgba(16,185,129,.10);
+        }
+        .resource-vllm-block[data-state="pressure"] .resource-live-state-dot {
+          background: #ef4444;
+          box-shadow: 0 0 0 3px rgba(239,68,68,.10);
+        }
+        .resource-vllm-block[data-state="transient"] .resource-live-state-dot,
+        .resource-vllm-block[data-state="hot"] .resource-live-state-dot,
+        .resource-vllm-block[data-state="partial"] .resource-live-state-dot,
+        .resource-vllm-block[data-state="upgrade"] .resource-live-state-dot {
+          background: #f59e0b;
+          box-shadow: 0 0 0 3px rgba(245,158,11,.10);
+        }
+        .resource-vllm-block[data-state="none"] .resource-live-state-dot {
+          background: var(--color-text-subtle);
+          box-shadow: none;
+        }
+        .resource-live-badge {
+          flex: 0 0 auto;
+          border-radius: 999px;
+          background: var(--color-surface);
+          padding: 2px 7px;
+          color: var(--color-text-muted);
+          font-size: 9.5px;
+          font-weight: 700;
+        }
+        .resource-live-muted {
+          min-width: 0;
+          overflow: hidden;
+          color: var(--color-text-subtle);
+          font-size: 9.5px;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .resource-vllm-summary-grid {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 4px 7px;
+          margin-bottom: 7px;
+          color: var(--color-text-muted);
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+          font-size: 9.5px;
+          line-height: 1.35;
+        }
+        .resource-vllm-summary-grid span {
+          white-space: nowrap;
+        }
+        .resource-vllm-summary-grid b {
+          color: var(--color-text-main);
+          font-weight: 750;
+        }
+        .resource-live-caption {
+          margin-top: 6px;
+          color: var(--color-text-subtle);
+          font-size: 9px;
+          line-height: 1.35;
+        }
+        .resource-vllm-instances {
+          display: grid;
+          gap: 5px;
+          margin-top: 7px;
+        }
+        .resource-vllm-instance {
+          min-width: 0;
+          border-top: 1px dashed var(--color-border-subtle);
+          padding-top: 6px;
+        }
+        .resource-vllm-instance:first-child {
+          border-top: 0;
+          padding-top: 0;
+        }
+        .resource-vllm-instance-head {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          justify-content: space-between;
+          gap: 7px;
+        }
+        .resource-vllm-instance-title {
+          min-width: 0;
+          overflow: hidden;
+          color: var(--color-text-main);
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+          font-size: 9.5px;
+          font-weight: 700;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .resource-vllm-model {
+          max-width: 48%;
+          overflow: hidden;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--color-brand-500) 8%, transparent);
+          padding: 2px 6px;
+          color: var(--color-primary);
+          font-size: 8.5px;
+          font-weight: 650;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .resource-vllm-instance-sub {
+          margin-top: 2px;
+          overflow: hidden;
+          color: var(--color-text-subtle);
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+          font-size: 8.5px;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .resource-vllm-instance-stats {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 3px 7px;
+          margin-top: 4px;
+          color: var(--color-text-muted);
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+          font-size: 8.8px;
+        }
+        .resource-vllm-instance-stats b {
+          color: var(--color-text-main);
+          font-weight: 750;
+        }
+        .resource-vllm-instance-muted {
+          color: var(--color-text-subtle);
+        }
+        .resource-live-bar + .resource-live-bar {
+          margin-top: 6px;
+        }
+        .resource-live-bar-head,
+        .resource-live-value-row {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 8px;
+          margin-bottom: 3px;
+          color: var(--color-text-muted);
+          font-size: 9px;
+          line-height: 1.2;
+        }
+        .resource-live-bar-head strong,
+        .resource-live-value-row strong {
+          color: var(--color-text-main);
+          font-weight: 750;
+          white-space: nowrap;
+        }
+        .resource-live-bar-track {
+          height: 4px;
+          overflow: hidden;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--color-border) 58%, transparent);
+        }
+        .resource-live-bar-fill {
+          display: block;
+          height: 100%;
+          min-width: 0;
+          border-radius: inherit;
+          background: var(--resource-bar-color, var(--color-primary));
+          transition: width 500ms ease;
+        }
+        .resource-live-bar-emerald { --resource-bar-color: #10b981; }
+        .resource-live-bar-cyan { --resource-bar-color: #06b6d4; }
+        .resource-live-bar-violet { --resource-bar-color: #8b5cf6; }
+        .resource-live-bar-primary { --resource-bar-color: var(--color-primary); }
+        .resource-live-bar-warning { --resource-bar-color: #f59e0b; }
+        .resource-gpu-list {
+          display: grid;
+          gap: 8px;
+        }
+        .resource-gpu-row {
+          min-width: 0;
+        }
+        .resource-gpu-row + .resource-gpu-row {
+          border-top: 1px dashed var(--color-border-subtle);
+          padding-top: 8px;
+        }
+        .resource-gpu-head {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 8px;
+          margin-bottom: 6px;
+        }
+        .resource-gpu-name {
+          color: var(--color-text-main);
+          font-size: 9.5px;
+          font-weight: 750;
+        }
+        .resource-gpu-temp {
+          display: inline-flex;
+          align-items: center;
+          gap: 2px;
+          border-radius: 999px;
+          background: color-mix(in srgb, #f59e0b 8%, transparent);
+          padding: 2px 6px;
+          color: #b45309;
+          font-size: 9px;
+          font-weight: 700;
+        }
+        .resource-gpu-temp .material-symbols-outlined {
+          font-size: 12px;
+        }
+        .resource-vllm-metric-guide {
+          margin-top: 10px;
+          border: 1px solid var(--color-border);
+          border-radius: 18px;
+          background: var(--color-surface);
+          padding: 15px 16px;
+          box-shadow: var(--shadow-soft);
+        }
+        .resource-vllm-guide-heading {
+          display: flex;
+          align-items: flex-start;
+          gap: 10px;
+        }
+        .resource-vllm-guide-icon {
+          display: inline-flex;
+          height: 30px;
+          width: 30px;
+          flex: 0 0 auto;
+          align-items: center;
+          justify-content: center;
+          border-radius: 10px;
+          background: color-mix(in srgb, var(--color-brand-500) 12%, transparent);
+          color: var(--color-brand-500);
+          font-size: 19px;
+        }
+        .resource-vllm-guide-title {
+          color: var(--color-text-main);
+          font-size: 14px;
+          font-weight: 700;
+          line-height: 1.3;
+        }
+        .resource-vllm-guide-subtitle {
+          margin-top: 3px;
+          color: var(--color-text-muted);
+          font-size: 12px;
+          line-height: 1.45;
+        }
+        .resource-vllm-guide-grid {
+          display: grid;
+          grid-template-columns: repeat(6, minmax(0, 1fr));
+          gap: 8px;
+          margin-top: 12px;
+        }
+        .resource-vllm-guide-item {
+          min-width: 0;
+          border: 1px solid var(--color-border-subtle);
+          border-radius: 12px;
+          background: var(--color-surface-2);
+          padding: 10px 11px;
+        }
+        .resource-vllm-guide-item strong {
+          display: block;
+          margin-bottom: 4px;
+          color: var(--color-text-main);
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+        }
+        .resource-vllm-guide-item span {
+          display: block;
+          color: var(--color-text-muted);
+          font-size: 10.5px;
+          line-height: 1.45;
+        }
+        .resource-vllm-guide-note {
+          display: flex;
+          align-items: flex-start;
+          gap: 8px;
+          margin-top: 10px;
+          border-radius: 11px;
+          background: color-mix(in srgb, #f59e0b 9%, transparent);
+          padding: 8px 10px;
+          color: var(--color-text-muted);
+          font-size: 11px;
+          line-height: 1.5;
+        }
+        .resource-vllm-guide-note .material-symbols-outlined {
+          flex: 0 0 auto;
+          color: #d97706;
+          font-size: 17px;
+        }
+        .resource-vllm-guide-note strong {
+          color: var(--color-text-main);
+          font-weight: 700;
+        }
+        .dark .resource-live-section {
+          background: color-mix(in srgb, var(--color-surface-2) 72%, var(--color-surface));
+        }
+        .dark .resource-gpu-temp {
+          color: #fbbf24;
+        }
+        @media (max-width: 1400px) {
+          .resource-vllm-guide-grid {
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+          }
+        }
+        @media (max-width: 760px) {
+          .resource-monitor-sortable-host {
+            min-width: min(332px, calc(100vw - 48px)) !important;
+          }
+          .resource-vllm-guide-grid {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+          }
+        }
+        @media (max-width: 520px) {
+          .resource-vllm-guide-grid {
+            grid-template-columns: 1fr;
+          }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .resource-live-bar-fill {
+            transition: none;
+          }
+        }
+      `}),e]})}},90490:(e,r,t)=>{Promise.resolve().then(t.bind(t,6202))}},e=>{e.O(0,[8441,3794,7358],()=>e(e.s=90490)),_N_E=e.O()}]);

package/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bluerouter-app",
-  "version": "5.3.2",
+  "version": "5.3.3",
   "description": "Router web dashboard",
   "private": false,
   "scripts": {

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@jheavenknows/bluerouter",
- "version": "5.3.2",
+ "version": "5.3.3",
  "description": "Bluerouter CLI - Start and manage Bluerouter server",
  "bin": {
   "bluerouter": "./cli.js"