feat(webui): add dashboard stat details

webui/app.js

@@ -361,6 +361,8 @@ function renderChannels(accountId, channels) {
 
   // Update channel count stat
   panel.querySelector('.channel-count').textContent = String(channels.length);
+  panel.querySelector('.channel-active-count').textContent = String(channels.length);
+  panel.querySelector('.channel-inactive-count').textContent = '0';
 }
 
 function renderJobs(accountId, jobs) {
@@ -616,6 +618,7 @@ function renderSummary(accountId, data) {
   const d = data.dashboard || data.state || {};
   const health = data.health || {};
   panel.querySelector('.forwarding-count').textContent = String((d.forwarding_rules || []).length);
+  panel.querySelector('.forwarding-active-count').textContent = String((d.forwarding_rules || []).length);
   const toggle = panel.querySelector('.scrape-media-label');
   toggle.textContent = d.scrape_media ? 'ON' : 'OFF';
   const healthOk = health.api_credentials && health.session_ready && health.data_dir_exists;
@@ -626,6 +629,11 @@ function renderSummary(accountId, data) {
     `${health.media_count || 0} media`,
     health.active_job ? `active: ${health.active_job.status}` : 'idle',
   ].join(' | ');
+  const mediaCount = Number(health.media_count || 0);
+  panel.querySelector('.media-session-count').textContent = String(mediaCount);
+  panel.querySelector('.media-total-count').textContent = String(mediaCount);
+  panel.querySelector('.health-session-value').textContent = health.session_ready ? 'Valid' : 'Check';
+  panel.querySelector('.health-rate-value').textContent = health.active_job ? 'Busy' : 'OK';
 }
 
 /* ── Account data loading ───────────────────────────── */

webui/index.html

@@ -196,18 +196,38 @@
             <div class="panel stat-panel">
               <div class="section-title">Channels</div>
               <div class="stat-value channel-count">0</div>
+              <div class="stat-caption">Tracked channels</div>
+              <div class="stat-meta">
+                <span><strong class="channel-active-count">0</strong> Active</span
+                ><span><strong class="channel-inactive-count">0</strong> Inactive</span>
+              </div>
             </div>
             <div class="panel stat-panel">
               <div class="section-title">Media scraping</div>
               <div class="stat-value stat-compact scrape-media-label">OFF</div>
+              <div class="stat-caption">Items downloaded</div>
+              <div class="stat-meta">
+                <span><strong class="media-session-count">0</strong> This session</span
+                ><span><strong class="media-total-count">0</strong> Total</span>
+              </div>
             </div>
             <div class="panel stat-panel">
               <div class="section-title">Forwarding rules</div>
               <div class="stat-value forwarding-count">0</div>
+              <div class="stat-caption">Active rules</div>
+              <div class="stat-meta">
+                <span><strong class="forwarding-active-count">0</strong> Active</span
+                ><span><strong>0</strong> Paused</span>
+              </div>
             </div>
             <div class="panel stat-panel">
               <div class="section-title">Account health</div>
               <div class="stat-value stat-compact account-health-label">-</div>
+              <div class="stat-caption">Session status</div>
+              <div class="stat-meta">
+                <span><strong class="health-session-value">-</strong> Session</span
+                ><span><strong class="health-rate-value">-</strong> Rate limit</span>
+              </div>
               <div class="muted small account-health-detail"></div>
             </div>
           </section>

webui/style.css

@@ -2100,11 +2100,41 @@ a.nav-link {
   font-weight: 500;
 }
 
-.stat-panel .account-health-detail {
-  color: #c7c7c7;
+.stat-caption {
+  margin-top: 3px;
+  color: #bdbdbd;
   font-size: 12px;
 }
 
+.stat-meta {
+  position: absolute;
+  right: 18px;
+  bottom: 15px;
+  left: 18px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  color: #bdbdbd;
+  font-size: 12px;
+}
+
+.stat-meta span + span {
+  padding-left: 12px;
+  border-left: 1px solid #363636;
+}
+
+.stat-meta strong {
+  display: block;
+  margin-bottom: 1px;
+  color: #ededed;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.stat-panel .account-health-detail {
+  display: none;
+}
+
 .panel {
   padding: 0;
   overflow: hidden;