@jheavenknows/bluerouter 5.3.1 → 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/.next-cli-build/static/chunks/app/(dashboard)/dashboard/usage/page-4dbf414f535f4d56.js

@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2825],{21007:(e,t,s)=>{Promise.resolve().then(s.bind(s,81772))},62146:()=>{},81772:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>w});var a=s(95155),l=s(12115),n=s(73321),r=s(35497),i=s(94027),o=s(84588),d=s(92542),c=s(31474);function x({isOpen:e,onClose:t,title:s,children:n,width:r="md",className:i}){let o={sm:"w-[400px]",md:"w-[500px]",lg:"w-[600px]",xl:"w-[800px]",full:"w-full"};return((0,l.useEffect)(()=>(e?document.body.style.overflow="hidden":document.body.style.overflow="",()=>{document.body.style.overflow=""}),[e]),(0,l.useEffect)(()=>{let s=s=>{"Escape"===s.key&&e&&t()};return document.addEventListener("keydown",s),()=>document.removeEventListener("keydown",s)},[e,t]),e)?(0,a.jsxs)("div",{className:"fixed inset-0 z-50",children:[(0,a.jsx)("div",{className:"absolute inset-0 bg-black/50 backdrop-blur-[2px] fade-in cursor-pointer",onClick:t,"aria-hidden":"true"}),(0,a.jsxs)("div",{className:(0,c.cn)("absolute right-0 top-0 h-full bg-surface flex flex-col","shadow-[var(--shadow-elev)]","slide-in-right","border-l border-border-subtle",o[r]||o.md,i),children:[(0,a.jsxs)("div",{className:"flex items-center justify-between p-6 border-b border-border-subtle flex-shrink-0",children:[(0,a.jsx)("div",{className:"flex items-center gap-3",children:s&&(0,a.jsx)("h2",{className:"text-lg font-semibold text-text-main",children:s})}),(0,a.jsx)("button",{type:"button",onClick:t,className:"p-1.5 rounded-[10px] text-text-muted hover:bg-surface-2 hover:text-text-main transition-colors",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[20px]",children:"close"})})]}),(0,a.jsx)("div",{className:"flex-1 overflow-y-auto p-6 custom-scrollbar",children:n})]})]}):null}function m({currentPage:e,pageSize:t,totalItems:s,onPageChange:l,onPageSizeChange:n,className:r}){let i=Math.ceil(s/t),o=s>0?(e-1)*t+1:0,x=Math.min(e*t,s),u=(()=>{let t=[],s=Math.max(1,e-2),a=Math.min(i,s+5-1);a-s+1<5&&(s=Math.max(1,a-5+1));for(let e=s;e<=a;e++)t.push(e);return t})();return(0,a.jsxs)("div",{className:(0,c.cn)("flex flex-col sm:flex-row items-center justify-between gap-4 py-4 px-2",r),children:[s>0&&(0,a.jsxs)("div",{className:"text-sm text-text-muted",children:["Showing ",(0,a.jsx)("span",{className:"font-medium text-text-main",children:o})," to"," ",(0,a.jsx)("span",{className:"font-medium text-text-main",children:x})," of"," ",(0,a.jsx)("span",{className:"font-medium text-text-main",children:s})," results"]}),(0,a.jsxs)("div",{className:"flex flex-wrap items-center justify-center gap-2 sm:gap-4",children:[n&&(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)("span",{className:"text-sm text-text-muted",children:"Rows:"}),(0,a.jsx)("select",{value:t,onChange:e=>n(Number(e.target.value)),className:(0,c.cn)("h-9 rounded-lg border border-black/10 dark:border-white/10 bg-surface","text-sm text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20","cursor-pointer"),style:{colorScheme:"auto"},children:[10,20,50].map(e=>(0,a.jsx)("option",{value:e,children:e},e))})]}),i>1&&(0,a.jsxs)("div",{className:"flex items-center gap-1",children:[(0,a.jsx)(d.default,{variant:"outline",size:"sm",onClick:()=>l(e-1),disabled:1===e,className:"w-9 px-0",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[18px]",children:"chevron_left"})}),u[0]>1&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(d.default,{variant:"ghost",size:"sm",onClick:()=>l(1),className:"w-9 px-0 hidden sm:inline-flex",children:"1"}),u[0]>2&&(0,a.jsx)("span",{className:"text-text-muted px-1 hidden sm:inline",children:"..."})]}),u.map(t=>(0,a.jsx)(d.default,{variant:e===t?"primary":"ghost",size:"sm",onClick:()=>l(t),className:(0,c.cn)("w-9 px-0",e===t?"inline-flex":"hidden sm:inline-flex"),children:t},t)),u[u.length-1]<i&&(0,a.jsxs)(a.Fragment,{children:[u[u.length-1]<i-1&&(0,a.jsx)("span",{className:"text-text-muted px-1 hidden sm:inline",children:"..."}),(0,a.jsx)(d.default,{variant:"ghost",size:"sm",onClick:()=>l(i),className:"w-9 px-0 hidden sm:inline-flex",children:i})]}),(0,a.jsx)(d.default,{variant:"outline",size:"sm",onClick:()=>l(e+1),disabled:e===i,className:"w-9 px-0",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[18px]",children:"chevron_right"})})]})]})]})}var u=s(52679);let p=null,h=null;async function f({force:e=!1}={}){if(!e&&p&&h)return{providerNameCache:p,providerNodesCache:h};let t=await fetch("/api/provider-nodes",{cache:"no-store"}),s=(await t.json()).nodes||[];for(let e of(h={},s))h[e.id]=e.name;return{providerNameCache:p={...u.Q2,...h},providerNodesCache:h}}function b(e,t){if(!e||!t)return e;let s=t[e];if("string"==typeof s)return s;if(s?.name)return s.name;let a=(0,u.zt)(e)||u.Q2[e];return a?.name||e}function g({title:e,children:t,defaultOpen:s=!1,icon:n=null}){let[r,i]=(0,l.useState)(s);return(0,a.jsxs)("div",{className:"border border-black/5 dark:border-white/5 rounded-lg overflow-hidden",children:[(0,a.jsxs)("button",{type:"button",onClick:()=>i(!r),className:"w-full flex items-center justify-between p-3 bg-black/[0.02] dark:bg-white/[0.02] hover:bg-black/[0.04] dark:hover:bg-white/[0.04] transition-colors",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[n&&(0,a.jsx)("span",{className:"material-symbols-outlined text-[18px] text-text-muted",children:n}),(0,a.jsx)("span",{className:"font-semibold text-sm text-text-main",children:e})]}),(0,a.jsx)("span",{className:(0,c.cn)("material-symbols-outlined text-[20px] text-text-muted transition-transform duration-200",r?"rotate-90":""),children:"chevron_right"})]}),r&&(0,a.jsx)("div",{className:"p-4 border-t border-black/5 dark:border-white/5",children:t})]})}function j(e){let t=e?.display_total_input_tokens,s=Number(t);if(null!=t&&""!==t&&Number.isFinite(s)&&s>=0)return s;let a=Number(e?.prompt_tokens??e?.input_tokens??0)||0,l=Number(e?.display_cached_input_tokens??e?.cached_tokens??e?.cache_read_input_tokens??e?.input_tokens_details?.cached_tokens??e?.prompt_tokens_details?.cached_tokens??0)||0,n=Number(e?.display_cache_creation_input_tokens??e?.cache_creation_input_tokens??e?.input_tokens_details?.cache_creation_tokens??e?.prompt_tokens_details?.cache_creation_tokens??0)||0,r=e?.cache_read_input_tokens!=null||e?.cache_creation_input_tokens!=null,i=!!(e?.input_tokens_details||e?.prompt_tokens_details),o=e?.prompt_tokens!=null&&e?.input_tokens!=null&&Number(e.prompt_tokens)!==Number(e.input_tokens);return!r||i||o?a:a+l+n}function v(){let[e,t]=(0,l.useState)([]),[s,n]=(0,l.useState)({page:1,pageSize:20,totalItems:0,totalPages:0}),[r,i]=(0,l.useState)(!1),[u,p]=(0,l.useState)(null),[h,v]=(0,l.useState)(!1),[N,w]=(0,l.useState)([]),[k,y]=(0,l.useState)(null),[_,S]=(0,l.useState)({provider:"",startDate:"",endDate:""}),C=(0,l.useCallback)(async({force:e=!1}={})=>{try{let t=await fetch("/api/usage/providers",{cache:"no-store"}),s=await t.json();w(s.providers||[]);let a=await f({force:e});y(a.providerNameCache)}catch(e){console.error("Failed to fetch providers:",e)}},[]),D=(0,l.useCallback)(async({force:e=!1}={})=>{i(!0);try{let a=new URLSearchParams({page:s.page.toString(),pageSize:s.pageSize.toString()});_.provider&&a.append("provider",_.provider),_.startDate&&a.append("startDate",_.startDate),_.endDate&&a.append("endDate",_.endDate),e&&a.set("_refresh",Date.now().toString());let l=await fetch(`/api/usage/request-details?${a}`,{cache:"no-store"}),r=await l.json();t(r.details||[]),n(e=>({...e,...r.pagination}))}catch(e){console.error("Failed to fetch request details:",e)}finally{i(!1)}},[s.page,s.pageSize,_]);(0,l.useEffect)(()=>{C()},[C]),(0,l.useEffect)(()=>{D()},[D]);let z=(0,l.useCallback)(async()=>{await Promise.all([C({force:!0}),D({force:!0})])},[C,D]);return(0,a.jsxs)("div",{className:"flex min-w-0 flex-col gap-6",children:[(0,a.jsx)(o.default,{padding:"md",children:(0,a.jsxs)("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",children:[(0,a.jsxs)("div",{className:"flex min-w-0 flex-col gap-2",children:[(0,a.jsx)("label",{htmlFor:"provider-filter",className:"text-sm font-medium text-text-main",children:"Provider"}),(0,a.jsxs)("select",{id:"provider-filter",value:_.provider,onChange:e=>S({..._,provider:e.target.value}),className:(0,c.cn)("h-9 px-3 rounded-lg border border-black/10 dark:border-white/10 bg-surface","text-sm text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20","w-full min-w-0 cursor-pointer"),style:{colorScheme:"auto"},children:[(0,a.jsx)("option",{value:"",children:"All Providers"}),N.map(e=>(0,a.jsx)("option",{value:e.id,children:e.name},e.id))]})]}),(0,a.jsxs)("div",{className:"flex min-w-0 flex-col gap-2",children:[(0,a.jsx)("label",{htmlFor:"start-date-filter",className:"text-sm font-medium text-text-main",children:"Start Date"}),(0,a.jsx)("input",{id:"start-date-filter",type:"datetime-local",value:_.startDate,onChange:e=>S({..._,startDate:e.target.value}),className:(0,c.cn)("h-9 px-3 rounded-lg border border-black/10 dark:border-white/10 bg-surface","w-full min-w-0 text-sm text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20")})]}),(0,a.jsxs)("div",{className:"flex min-w-0 flex-col gap-2",children:[(0,a.jsx)("label",{htmlFor:"end-date-filter",className:"text-sm font-medium text-text-main",children:"End Date"}),(0,a.jsx)("input",{id:"end-date-filter",type:"datetime-local",value:_.endDate,onChange:e=>S({..._,endDate:e.target.value}),className:(0,c.cn)("h-9 px-3 rounded-lg border border-black/10 dark:border-white/10 bg-surface","w-full min-w-0 text-sm text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20")})]}),(0,a.jsxs)("div",{className:"flex min-w-0 flex-col gap-2 sm:col-span-2 lg:col-span-1",children:[(0,a.jsx)("span",{className:"hidden text-sm font-medium text-text-main opacity-0 lg:block","aria-hidden":"true",children:"Actions"}),(0,a.jsxs)("div",{className:"grid grid-cols-2 gap-2",children:[(0,a.jsx)(d.default,{variant:"outline",onClick:z,loading:r,className:"w-full",icon:"refresh",children:"Refresh"}),(0,a.jsx)(d.default,{variant:"ghost",onClick:()=>{S({provider:"",startDate:"",endDate:""})},disabled:!_.provider&&!_.startDate&&!_.endDate,className:"w-full",children:"Clear"})]})]})]})}),(0,a.jsxs)(o.default,{padding:"none",children:[(0,a.jsx)("div",{className:"overflow-x-auto",children:(0,a.jsxs)("table",{className:"w-full min-w-[880px]",children:[(0,a.jsx)("thead",{children:(0,a.jsxs)("tr",{className:"border-b border-black/5 dark:border-white/5",children:[(0,a.jsx)("th",{className:"text-left p-4 text-sm font-semibold text-text-main",children:"Timestamp"}),(0,a.jsx)("th",{className:"text-left p-4 text-sm font-semibold text-text-main",children:"Model"}),(0,a.jsx)("th",{className:"text-left p-4 text-sm font-semibold text-text-main",children:"Provider"}),(0,a.jsx)("th",{className:"text-right p-4 text-sm font-semibold text-text-main",children:"Input Tokens"}),(0,a.jsx)("th",{className:"text-right p-4 text-sm font-semibold text-text-main",children:"Output Tokens"}),(0,a.jsx)("th",{className:"text-left p-4 text-sm font-semibold text-text-main",children:"Latency"}),(0,a.jsx)("th",{className:"text-center p-4 text-sm font-semibold text-text-main",children:"Action"})]})}),(0,a.jsx)("tbody",{children:r?(0,a.jsx)("tr",{children:(0,a.jsx)("td",{colSpan:"7",className:"p-8 text-center text-text-muted",children:(0,a.jsxs)("div",{className:"flex items-center justify-center gap-2",children:[(0,a.jsx)("span",{className:"material-symbols-outlined animate-spin text-[20px]",children:"progress_activity"}),"Loading..."]})})}):0===e.length?(0,a.jsx)("tr",{children:(0,a.jsx)("td",{colSpan:"7",className:"p-8 text-center text-text-muted",children:"No request details found"})}):e.map((e,t)=>(0,a.jsxs)("tr",{className:"border-b border-black/5 dark:border-white/5 last:border-b-0 hover:bg-black/[0.02] dark:hover:bg-white/[0.02] transition-colors",children:[(0,a.jsx)("td",{className:"whitespace-nowrap p-4 text-sm text-text-main",children:new Date(e.timestamp).toLocaleString()}),(0,a.jsx)("td",{className:"max-w-[260px] truncate p-4 font-mono text-sm text-text-main",children:e.model}),(0,a.jsx)("td",{className:"max-w-[180px] truncate p-4 text-sm text-text-main",children:(0,a.jsx)("span",{className:"font-medium",children:b(e.provider,k)})}),(0,a.jsx)("td",{className:"p-4 text-sm text-text-main text-right font-mono",children:j(e.tokens).toLocaleString()}),(0,a.jsx)("td",{className:"p-4 text-sm text-text-main text-right font-mono",children:e.tokens?.completion_tokens?.toLocaleString()||0}),(0,a.jsx)("td",{className:"p-4 text-sm text-text-muted",children:(0,a.jsxs)("div",{className:"flex flex-col gap-0.5",children:[(0,a.jsxs)("div",{children:["TTFT: ",(0,a.jsxs)("span",{className:"font-mono",children:[e.latency?.ttft||0,"ms"]})]}),(0,a.jsxs)("div",{children:["Total: ",(0,a.jsxs)("span",{className:"font-mono",children:[e.latency?.total||0,"ms"]})]})]})}),(0,a.jsx)("td",{className:"p-4 text-center",children:(0,a.jsx)(d.default,{variant:"outline",size:"sm",onClick:()=>{p(e),v(!0)},children:"Detail"})})]},`${e.id}-${t}`))})]})}),!r&&e.length>0&&(0,a.jsx)("div",{className:"border-t border-black/5 dark:border-white/5",children:(0,a.jsx)(m,{currentPage:s.page,pageSize:s.pageSize,totalItems:s.totalItems,onPageChange:e=>{n(t=>({...t,page:e}))},onPageSizeChange:e=>{n(t=>({...t,pageSize:e,page:1}))}})})]}),(0,a.jsx)(x,{isOpen:h,onClose:()=>v(!1),title:"Request Details",width:"lg",children:u&&(0,a.jsxs)("div",{className:"space-y-6",children:[(0,a.jsxs)("div",{className:"grid min-w-0 grid-cols-1 gap-4 text-sm sm:grid-cols-2",children:[(0,a.jsxs)("div",{children:[(0,a.jsx)("span",{className:"text-text-muted",children:"ID:"})," ",(0,a.jsx)("span",{className:"break-all font-mono text-text-main",children:u.id})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("span",{className:"text-text-muted",children:"Timestamp:"})," ",(0,a.jsx)("span",{className:"text-text-main",children:new Date(u.timestamp).toLocaleString()})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("span",{className:"text-text-muted",children:"Provider:"})," ",(0,a.jsx)("span",{className:"text-text-main font-medium",children:b(u.provider,k)})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("span",{className:"text-text-muted",children:"Model:"})," ",(0,a.jsx)("span",{className:"text-text-main font-mono",children:u.model})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("span",{className:"text-text-muted",children:"Status:"})," ",(0,a.jsx)("span",{className:(0,c.cn)("font-medium","success"===u.status?"text-green-600":"text-red-600"),children:u.status})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("span",{className:"text-text-muted",children:"Latency:"})," ",(0,a.jsxs)("span",{className:"text-text-main font-mono",children:["TTFT ",u.latency?.ttft||0,"ms / Total ",u.latency?.total||0,"ms"]})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("span",{className:"text-text-muted",children:"Input Tokens:"})," ",(0,a.jsx)("span",{className:"text-text-main font-mono",children:j(u.tokens).toLocaleString()})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("span",{className:"text-text-muted",children:"Output Tokens:"})," ",(0,a.jsx)("span",{className:"text-text-main font-mono",children:u.tokens?.completion_tokens?.toLocaleString()||0})]})]}),(0,a.jsxs)("div",{className:"space-y-4",children:[(0,a.jsx)(g,{title:"1. Client Request (Input)",defaultOpen:!0,icon:"input",children:(0,a.jsx)("pre",{className:"max-h-[300px] max-w-full overflow-auto rounded-lg border border-black/5 bg-black/5 p-3 font-mono text-xs text-text-main dark:border-white/5 dark:bg-white/5 sm:p-4",children:JSON.stringify(u.request,null,2)})}),u.providerRequest&&(0,a.jsx)(g,{title:"2. Provider Request (Translated)",icon:"translate",children:(0,a.jsx)("pre",{className:"max-h-[300px] max-w-full overflow-auto rounded-lg border border-black/5 bg-black/5 p-3 font-mono text-xs text-text-main dark:border-white/5 dark:bg-white/5 sm:p-4",children:JSON.stringify(u.providerRequest,null,2)})}),u.providerResponse&&(0,a.jsx)(g,{title:"3. Provider Response (Raw)",icon:"data_object",children:(0,a.jsx)("pre",{className:"max-h-[300px] max-w-full overflow-auto rounded-lg border border-black/5 bg-black/5 p-3 font-mono text-xs text-text-main dark:border-white/5 dark:bg-white/5 sm:p-4",children:"object"==typeof u.providerResponse?JSON.stringify(u.providerResponse,null,2):u.providerResponse})}),(0,a.jsxs)(g,{title:"4. Client Response (Final)",defaultOpen:!0,icon:"output",children:[u.response?.thinking&&(0,a.jsxs)("div",{className:"mb-4",children:[(0,a.jsxs)("h4",{className:"font-semibold text-text-main mb-2 flex items-center gap-2 text-xs uppercase tracking-wide opacity-70",children:[(0,a.jsx)("span",{className:"material-symbols-outlined text-[16px]",children:"psychology"}),"Thinking Process"]}),(0,a.jsx)("pre",{className:"max-h-[200px] max-w-full overflow-auto rounded-lg border border-amber-200 bg-amber-50 p-3 font-mono text-xs text-amber-900 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-100 sm:p-4",children:u.response.thinking})]}),(0,a.jsx)("h4",{className:"font-semibold text-text-main mb-2 text-xs uppercase tracking-wide opacity-70",children:"Content"}),(0,a.jsx)("pre",{className:"max-h-[300px] max-w-full overflow-auto rounded-lg border border-black/5 bg-black/5 p-3 font-mono text-xs text-text-main dark:border-white/5 dark:bg-white/5 sm:p-4",children:u.response?.content||"[No content]"})]})]})]})})]})}s(62146);let N=[{value:"today",label:"Today"},{value:"24h",label:"24h"},{value:"7d",label:"7D"},{value:"30d",label:"30D"},{value:"60d",label:"60D"}];function w(){return(0,a.jsx)(l.Suspense,{fallback:(0,a.jsx)(r.Qv,{}),children:(0,a.jsx)(k,{})})}function k(){let e=(0,n.useSearchParams)(),t=(0,n.useRouter)(),{isAdmin:s}=(0,i.s)(),[o,d]=(0,l.useState)("today"),c=e.get("tab"),x=c&&["overview","logs","details"].includes(c)&&("details"!==c||s)?c:"overview";(0,l.useEffect)(()=>{if("details"===c&&!s){let s=new URLSearchParams(e);s.set("tab","overview"),t.replace(`/dashboard/usage?${s.toString()}`,{scroll:!1})}},[c,s,t,e]);let m=[{value:"overview",label:"Overview"},...s?[{value:"details",label:"Details"}]:[]];return(0,a.jsxs)("div",{className:"usage-page flex min-w-0 flex-col gap-6 px-1 sm:px-0",children:[(0,a.jsxs)("div",{className:"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between",children:[(0,a.jsx)(r.Iz,{options:m,value:x,onChange:s=>{if(s===x)return;let a=new URLSearchParams(e);a.set("tab",s),t.push(`/dashboard/usage?${a.toString()}`,{scroll:!1})},className:"w-full sm:w-auto"}),"overview"===x&&(0,a.jsx)(r.Iz,{options:N,value:o,onChange:d,size:"sm",className:"w-full sm:w-auto"})]}),"overview"===x&&(0,a.jsx)(l.Suspense,{fallback:(0,a.jsx)(r.Qv,{}),children:(0,a.jsx)(r.jK,{period:o,setPeriod:d,hidePeriodSelector:!0})}),"logs"===x&&(0,a.jsx)(r.gM,{}),"details"===x&&(0,a.jsx)(v,{})]})}}},e=>{e.O(0,[9906,8243,3862,9893,9959,1997,5564,5263,7033,5497,8441,3794,7358],()=>e(e.s=21007)),_N_E=e.O()}]);

package/app/.next-cli-build/static/chunks/{webpack-c4a3128f7e9eda51.js → webpack-83c647b2ac8f2bf9.js}

@@ -1 +1 @@
-(()=>{"use strict";var e,t,r,o,n,a,i,u,l={},c={};function s(e){var t=c[e];if(void 0!==t)return t.exports;var r=c[e]={exports:{}},o=!0;try{l[e].call(r.exports,r,r.exports,s),o=!1}finally{o&&delete c[e]}return r.exports}s.m=l,e=[],s.O=(t,r,o,n)=>{if(r){n=n||0;for(var a=e.length;a>0&&e[a-1][2]>n;a--)e[a]=e[a-1];e[a]=[r,o,n];return}for(var i=1/0,a=0;a<e.length;a++){for(var[r,o,n]=e[a],u=!0,l=0;l<r.length;l++)(!1&n||i>=n)&&Object.keys(s.O).every(e=>s.O[e](r[l]))?r.splice(l--,1):(u=!1,n<i&&(i=n));if(u){e.splice(a--,1);var c=o();void 0!==c&&(t=c)}}return t},s.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return s.d(t,{a:t}),t},r=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,s.t=function(e,o){if(1&o&&(e=this(e)),8&o||"object"==typeof e&&e&&(4&o&&e.__esModule||16&o&&"function"==typeof e.then))return e;var n=Object.create(null);s.r(n);var a={};t=t||[null,r({}),r([]),r(r)];for(var i=2&o&&e;"object"==typeof i&&!~t.indexOf(i);i=r(i))Object.getOwnPropertyNames(i).forEach(t=>a[t]=()=>e[t]);return a.default=()=>e,s.d(n,a),n},s.d=(e,t)=>{for(var r in t)s.o(t,r)&&!s.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},s.f={},s.e=e=>Promise.all(Object.keys(s.f).reduce((t,r)=>(s.f[r](e,t),t),[])),s.u=e=>"static/chunks/"+e+"."+({1966:"b8f83f7ba376c962",3899:"d4d0ae202f418161",8202:"1ffc6ce531e066ce"})[e]+".js",s.miniCssF=e=>{},s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o={},s.l=(e,t,r,n)=>{if(o[e])return void o[e].push(t);if(void 0!==r)for(var a,i,u=document.getElementsByTagName("script"),l=0;l<u.length;l++){var c=u[l];if(c.getAttribute("src")==e||c.getAttribute("data-webpack")=="_N_E:"+r){a=c;break}}a||(i=!0,(a=document.createElement("script")).charset="utf-8",a.timeout=120,s.nc&&a.setAttribute("nonce",s.nc),a.setAttribute("data-webpack","_N_E:"+r),a.src=s.tu(e)),o[e]=[t];var f=(t,r)=>{a.onerror=a.onload=null,clearTimeout(d);var n=o[e];if(delete o[e],a.parentNode&&a.parentNode.removeChild(a),n&&n.forEach(e=>e(r)),t)return t(r)},d=setTimeout(f.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=f.bind(null,a.onerror),a.onload=f.bind(null,a.onload),i&&document.head.appendChild(a)},s.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.tt=()=>(void 0===n&&(n={createScriptURL:e=>e},"u">typeof trustedTypes&&trustedTypes.createPolicy&&(n=trustedTypes.createPolicy("nextjs#bundler",n))),n),s.tu=e=>s.tt().createScriptURL(e),s.p="/_next/",a={8068:0,4652:0,3334:0,9906:0,646:0},s.f.j=(e,t)=>{var r=s.o(a,e)?a[e]:void 0;if(0!==r)if(r)t.push(r[2]);else if(/^(3334|4652|646|8068|9906)$/.test(e))a[e]=0;else{var o=new Promise((t,o)=>r=a[e]=[t,o]);t.push(r[2]=o);var n=s.p+s.u(e),i=Error();s.l(n,t=>{if(s.o(a,e)&&(0!==(r=a[e])&&(a[e]=void 0),r)){var o=t&&("load"===t.type?"missing":t.type),n=t&&t.target&&t.target.src;i.message="Loading chunk "+e+" failed.\n("+o+": "+n+")",i.name="ChunkLoadError",i.type=o,i.request=n,r[1](i)}},"chunk-"+e,e)}},s.O.j=e=>0===a[e],i=(e,t)=>{var r,o,[n,i,u]=t,l=0;if(n.some(e=>0!==a[e])){for(r in i)s.o(i,r)&&(s.m[r]=i[r]);if(u)var c=u(s)}for(e&&e(t);l<n.length;l++)o=n[l],s.o(a,o)&&a[o]&&a[o][0](),a[o]=0;return s.O(c)},(u=self.webpackChunk_N_E=self.webpackChunk_N_E||[]).forEach(i.bind(null,0)),u.push=i.bind(null,u.push.bind(u))})();
+(()=>{"use strict";var e,t,r,o,n,a,i,u,l={},c={};function s(e){var t=c[e];if(void 0!==t)return t.exports;var r=c[e]={exports:{}},o=!0;try{l[e].call(r.exports,r,r.exports,s),o=!1}finally{o&&delete c[e]}return r.exports}s.m=l,e=[],s.O=(t,r,o,n)=>{if(r){n=n||0;for(var a=e.length;a>0&&e[a-1][2]>n;a--)e[a]=e[a-1];e[a]=[r,o,n];return}for(var i=1/0,a=0;a<e.length;a++){for(var[r,o,n]=e[a],u=!0,l=0;l<r.length;l++)(!1&n||i>=n)&&Object.keys(s.O).every(e=>s.O[e](r[l]))?r.splice(l--,1):(u=!1,n<i&&(i=n));if(u){e.splice(a--,1);var c=o();void 0!==c&&(t=c)}}return t},s.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return s.d(t,{a:t}),t},r=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,s.t=function(e,o){if(1&o&&(e=this(e)),8&o||"object"==typeof e&&e&&(4&o&&e.__esModule||16&o&&"function"==typeof e.then))return e;var n=Object.create(null);s.r(n);var a={};t=t||[null,r({}),r([]),r(r)];for(var i=2&o&&e;"object"==typeof i&&!~t.indexOf(i);i=r(i))Object.getOwnPropertyNames(i).forEach(t=>a[t]=()=>e[t]);return a.default=()=>e,s.d(n,a),n},s.d=(e,t)=>{for(var r in t)s.o(t,r)&&!s.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},s.f={},s.e=e=>Promise.all(Object.keys(s.f).reduce((t,r)=>(s.f[r](e,t),t),[])),s.u=e=>"static/chunks/"+e+"."+({1966:"b8f83f7ba376c962",3899:"d4d0ae202f418161",8202:"1ffc6ce531e066ce"})[e]+".js",s.miniCssF=e=>{},s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o={},s.l=(e,t,r,n)=>{if(o[e])return void o[e].push(t);if(void 0!==r)for(var a,i,u=document.getElementsByTagName("script"),l=0;l<u.length;l++){var c=u[l];if(c.getAttribute("src")==e||c.getAttribute("data-webpack")=="_N_E:"+r){a=c;break}}a||(i=!0,(a=document.createElement("script")).charset="utf-8",a.timeout=120,s.nc&&a.setAttribute("nonce",s.nc),a.setAttribute("data-webpack","_N_E:"+r),a.src=s.tu(e)),o[e]=[t];var f=(t,r)=>{a.onerror=a.onload=null,clearTimeout(d);var n=o[e];if(delete o[e],a.parentNode&&a.parentNode.removeChild(a),n&&n.forEach(e=>e(r)),t)return t(r)},d=setTimeout(f.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=f.bind(null,a.onerror),a.onload=f.bind(null,a.onload),i&&document.head.appendChild(a)},s.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.tt=()=>(void 0===n&&(n={createScriptURL:e=>e},"u">typeof trustedTypes&&trustedTypes.createPolicy&&(n=trustedTypes.createPolicy("nextjs#bundler",n))),n),s.tu=e=>s.tt().createScriptURL(e),s.p="/_next/",a={8068:0,4652:0,3334:0,9906:0,646:0,8243:0},s.f.j=(e,t)=>{var r=s.o(a,e)?a[e]:void 0;if(0!==r)if(r)t.push(r[2]);else if(/^(3334|4652|646|8068|8243|9906)$/.test(e))a[e]=0;else{var o=new Promise((t,o)=>r=a[e]=[t,o]);t.push(r[2]=o);var n=s.p+s.u(e),i=Error();s.l(n,t=>{if(s.o(a,e)&&(0!==(r=a[e])&&(a[e]=void 0),r)){var o=t&&("load"===t.type?"missing":t.type),n=t&&t.target&&t.target.src;i.message="Loading chunk "+e+" failed.\n("+o+": "+n+")",i.name="ChunkLoadError",i.type=o,i.request=n,r[1](i)}},"chunk-"+e,e)}},s.O.j=e=>0===a[e],i=(e,t)=>{var r,o,[n,i,u]=t,l=0;if(n.some(e=>0!==a[e])){for(r in i)s.o(i,r)&&(s.m[r]=i[r]);if(u)var c=u(s)}for(e&&e(t);l<n.length;l++)o=n[l],s.o(a,o)&&a[o]&&a[o][0](),a[o]=0;return s.O(c)},(u=self.webpackChunk_N_E=self.webpackChunk_N_E||[]).forEach(i.bind(null,0)),u.push=i.bind(null,u.push.bind(u))})();

package/app/.next-cli-build/static/css/ecece8453e592e06.css

@@ -0,0 +1 @@
+.usage-page .react-flow{background:var(--color-surface);border-radius:13px}.usage-page .react-flow__pane,.usage-page .react-flow__renderer,.usage-page .react-flow__viewport{background:transparent}

package/app/package.json

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

package/package.json

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