@triflux/remote 10.0.1 → 10.25.1

package/hub/public/dashboard.html

@@ -42,11 +42,22 @@ body{background:#0d1117;color:#c9d1d9;font-family:system-ui,-apple-system,sans-s
 .token-item .calls{font-size:.78rem;color:#8b949e;margin-top:2px}
 
 .chart-wrap{position:relative;width:100%;height:160px}
-.chart-wrap canvas{width:100%!important;height:100%!important}
+.chart-wrap canvas{width:100%;height:100%}
 .chart-legend{display:flex;gap:14px;margin-top:8px;font-size:.78rem;color:#8b949e}
 .legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:middle}
 
 .placeholder{text-align:center;padding:24px;color:#8b949e;font-size:.85rem}
+.btn{background:#21262d;border:1px solid #30363d;color:#c9d1d9;padding:4px 12px;border-radius:6px;font-size:.78rem;cursor:pointer;transition:background .2s}
+.btn:hover{background:#30363d}
+.btn:active{background:#3b414a}
+.btn.ok{border-color:#3fb950;color:#3fb950}
+.guide{display:none;max-width:1200px;margin:0 auto 16px;background:#161b22;border:1px solid #30363d;border-radius:8px;padding:16px;font-size:.82rem;line-height:1.7;color:#8b949e}
+.guide.open{display:block}
+.guide h3{color:#c9d1d9;font-size:.9rem;margin:12px 0 6px}
+.guide h3:first-child{margin-top:0}
+.guide code{background:#0d1117;padding:1px 5px;border-radius:3px;font-size:.78rem;color:#d19a66}
+.guide ul{padding-left:18px;margin:4px 0}
+.actions{display:flex;gap:8px;align-items:center}
 </style>
 </head>
 <body>
@@ -57,9 +68,35 @@ body{background:#0d1117;color:#c9d1d9;font-family:system-ui,-apple-system,sans-s
     <span class="status-dot" id="statusDot"></span>
     <span id="statusText">연결 중...</span>
     <span id="lastUpdate" class="sub"></span>
+    <div class="actions">
+      <button class="btn" id="guideBtn" title="도움말">?</button>
+      <button class="btn" id="reloadBtn" title="계정 브로커 리로드">Reload</button>
+      <a href="/broker/dashboard" target="_blank" class="btn" style="text-decoration:none">Broker</a>
+    </div>
   </div>
 </div>
 
+<div class="guide" id="guidePanel">
+  <h3>AIMD 동시 워커</h3>
+  <p>AIMD(Additive Increase / Multiplicative Decrease) 알고리즘으로 최적 동시 워커 수를 자동 조절합니다. 게이지가 <code>10/10</code>에 가까우면 시스템이 포화 상태입니다.</p>
+  <h3>CLI 쿼터 사용률</h3>
+  <ul>
+    <li><strong>Claude</strong> — 5시간/주간 사용량. 80% 이상이면 빨간색 경고.</li>
+    <li><strong>Codex</strong> — Primary/Secondary 버킷별 사용률. 리셋 시간이 표시됩니다.</li>
+    <li><strong>Gemini</strong> — 남은 비율 기반 사용률. RPM/RPD 제한 포함.</li>
+  </ul>
+  <h3>호출 이력 타임라인</h3>
+  <p>최근 CLI 호출의 성공/실패/타임아웃을 시간순으로 표시합니다. <span style="color:#3fb950">녹색</span>=성공, <span style="color:#f85149">빨강</span>=실패, <span style="color:#d29922">노랑</span>=타임아웃.</p>
+  <h3>토큰 누적 현황</h3>
+  <p>CLI별 누적 토큰 사용량과 호출 횟수입니다. 세션 시작 이후의 합계입니다.</p>
+  <h3>조작</h3>
+  <ul>
+    <li><strong>Reload</strong> — <code>POST /broker/reload</code> 호출. accounts.json을 핫리로드합니다.</li>
+    <li><strong>Broker</strong> — 계정 브로커 대시보드(별도 페이지)를 엽니다.</li>
+    <li>데이터는 <strong>5초</strong>마다 자동 갱신됩니다.</li>
+  </ul>
+</div>
+
 <div class="grid">
   <!-- AIMD 게이지 -->
   <div class="card">
@@ -152,7 +189,7 @@ body{background:#0d1117;color:#c9d1d9;font-family:system-ui,-apple-system,sans-s
   function remain(rt) {
     if (!rt) return '';
     var ts = typeof rt === 'number' && rt < 1e10 ? rt * 1000 : new Date(rt).getTime();
-    if (!isFinite(ts)) return '';
+    if (!Number.isFinite(ts)) return '';
     var ms = ts - Date.now();
     if (ms <= 0) return '만료됨';
     var h = Math.floor(ms / 3600000);
@@ -199,7 +236,7 @@ body{background:#0d1117;color:#c9d1d9;font-family:system-ui,-apple-system,sans-s
     var s = '';
 
     // Claude
-    var cl = d.claude && d.claude.data;
+    var cl = d.claude?.data;
     if (cl) {
       s += quotaBlock('Claude (c)', '#d19a66', [
         ['5시간', cl.fiveHourPercent || 0],
@@ -208,16 +245,16 @@ body{background:#0d1117;color:#c9d1d9;font-family:system-ui,-apple-system,sans-s
     }
 
     // Codex
-    var cx2 = d.codex && d.codex.buckets && d.codex.buckets.codex;
+    var cx2 = d.codex?.buckets?.codex;
     if (cx2) {
       s += quotaBlock('Codex (x)', '#ffffff', [
         ['Primary', cx2.primary ? cx2.primary.used_percent || 0 : 0],
         ['Secondary', cx2.secondary ? cx2.secondary.used_percent || 0 : 0]
-      ], cx2.primary && cx2.primary.resets_at);
+      ], cx2.primary?.resets_at);
     }
 
     // Gemini
-    var gm = d.gemini && d.gemini.buckets;
+    var gm = d.gemini?.buckets;
     if (gm && gm.length > 0) {
       var frac = gm[0].remainingFraction;
       s += quotaBlock('Gemini (g)', '#61afef', [
@@ -330,7 +367,7 @@ body{background:#0d1117;color:#c9d1d9;font-family:system-ui,-apple-system,sans-s
         gauge(data.aimd ? data.aimd.batchSize : 0);
         renderQuota(data);
 
-        cachedEvents = (data.aimd && data.aimd.events) || [];
+        cachedEvents = (data.aimd?.events) || [];
         drawEvents(cachedEvents);
 
         renderTokens(data.accumulator);
@@ -347,6 +384,30 @@ body{background:#0d1117;color:#c9d1d9;font-family:system-ui,-apple-system,sans-s
     rTimer = setTimeout(function() { drawEvents(cachedEvents); }, 150);
   });
 
+  /* ── 가이드 토글 ── */
+  document.getElementById('guideBtn').onclick = function() {
+    var p = document.getElementById('guidePanel');
+    p.classList.toggle('open');
+    this.classList.toggle('ok');
+  };
+
+  /* ── 브로커 리로드 ── */
+  document.getElementById('reloadBtn').onclick = function() {
+    var btn = this;
+    btn.textContent = '...';
+    fetch('/broker/reload', { method: 'POST' })
+      .then(function(r) { return r.json(); })
+      .then(function(d) {
+        btn.textContent = d.ok ? 'OK (' + (d.accounts || 0) + ')' : 'Fail';
+        btn.classList.toggle('ok', d.ok);
+        setTimeout(function() { btn.textContent = 'Reload'; btn.classList.remove('ok'); }, 3000);
+      })
+      .catch(function() {
+        btn.textContent = 'Error';
+        setTimeout(function() { btn.textContent = 'Reload'; }, 3000);
+      });
+  };
+
   poll();
   setInterval(poll, POLL);
 })();