Upload 2 files

index.html

@@ -1615,7 +1615,252 @@
         tbody tr:last-child td:last-child {
             border-bottom-right-radius: 12px;
         }
+
+        /* SVG Icon Styles */
+        .icon {
+            width: 20px;
+            height: 20px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+        }
+
+        .icon-sm {
+            width: 16px;
+            height: 16px;
+        }
+
+        .icon-md {
+            width: 24px;
+            height: 24px;
+        }
+
+        .icon-lg {
+            width: 32px;
+            height: 32px;
+        }
+
+        .icon-xl {
+            width: 48px;
+            height: 48px;
+        }
+
+        .icon svg {
+            width: 100%;
+            height: 100%;
+            stroke: currentColor;
+            fill: none;
+            stroke-width: 2;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+        }
+
+        .icon-filled svg {
+            fill: currentColor;
+            stroke: none;
+        }
+
+        .icon-gradient {
+            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        /* Tab Icons */
+        .tab-icon {
+            width: 18px;
+            height: 18px;
+            margin-right: 8px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .tab-icon svg {
+            width: 100%;
+            height: 100%;
+        }
+
+        /* Status Icons */
+        .status-icon {
+            width: 20px;
+            height: 20px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .status-icon-success svg {
+            color: var(--accent-green);
+        }
+
+        .status-icon-error svg {
+            color: var(--accent-red);
+        }
+
+        .status-icon-warning svg {
+            color: var(--accent-yellow);
+        }
+
+        .status-icon-info svg {
+            color: var(--accent-blue);
+        }
     </style>
+
+    <!-- SVG Icon Definitions -->
+    <svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
+        <!-- Success Icon -->
+        <symbol id="icon-success" viewBox="0 0 24 24">
+            <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
+            <path d="M8 12l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </symbol>
+
+        <!-- Error Icon -->
+        <symbol id="icon-error" viewBox="0 0 24 24">
+            <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
+            <path d="M12 8v4M12 16h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </symbol>
+
+        <!-- Warning Icon -->
+        <symbol id="icon-warning" viewBox="0 0 24 24">
+            <path d="M12 2L2 22h20L12 2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M12 9v4M12 17h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </symbol>
+
+        <!-- Info Icon -->
+        <symbol id="icon-info" viewBox="0 0 24 24">
+            <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
+            <path d="M12 16v-4M12 8h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </symbol>
+
+        <!-- Market/Chart Icon -->
+        <symbol id="icon-market" viewBox="0 0 24 24">
+            <path d="M3 3v18h18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M7 12l4-4 4 4 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </symbol>
+
+        <!-- Monitor/API Icon -->
+        <symbol id="icon-monitor" viewBox="0 0 24 24">
+            <rect x="2" y="3" width="20" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
+            <path d="M8 21h8M12 17v4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </symbol>
+
+        <!-- Advanced/Flash Icon -->
+        <symbol id="icon-advanced" viewBox="0 0 24 24">
+            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </symbol>
+
+        <!-- Settings/Gear Icon -->
+        <symbol id="icon-settings" viewBox="0 0 24 24">
+            <circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="2"/>
+            <path d="M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </symbol>
+
+        <!-- HuggingFace Icon -->
+        <symbol id="icon-hf" viewBox="0 0 24 24">
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" fill="none" stroke="currentColor" stroke-width="2"/>
+            <path d="M8 12h8M12 8v8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </symbol>
+
+        <!-- Pools/Refresh Icon -->
+        <symbol id="icon-pools" viewBox="0 0 24 24">
+            <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </symbol>
+
+        <!-- Logs/File Icon -->
+        <symbol id="icon-logs" viewBox="0 0 24 24">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </symbol>
+
+        <!-- Resources/Box Icon -->
+        <symbol id="icon-resources" viewBox="0 0 24 24">
+            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </symbol>
+
+        <!-- Reports/Chart Icon -->
+        <symbol id="icon-reports" viewBox="0 0 24 24">
+            <path d="M3 3v18h18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M18 17V9M12 17V5M6 17v-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </symbol>
+
+        <!-- Search Icon -->
+        <symbol id="icon-search" viewBox="0 0 24 24">
+            <circle cx="11" cy="11" r="8" fill="none" stroke="currentColor" stroke-width="2"/>
+            <path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </symbol>
+
+        <!-- Refresh Icon -->
+        <symbol id="icon-refresh" viewBox="0 0 24 24">
+            <path d="M23 4v6h-6M1 20v-6h6M3.51 9a10 10 0 0 1 17.8-4.3M20.49 15a10 10 0 0 1-17.8 4.3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </symbol>
+
+        <!-- Trending Up Icon -->
+        <symbol id="icon-trending-up" viewBox="0 0 24 24">
+            <path d="M23 6l-9.5 9.5-5-5L1 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M17 6h6v6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </symbol>
+
+        <!-- Trending Down Icon -->
+        <symbol id="icon-trending-down" viewBox="0 0 24 24">
+            <path d="M23 18l-9.5-9.5-5 5L1 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M17 18h6v-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </symbol>
+
+        <!-- Volume Icon -->
+        <symbol id="icon-volume" viewBox="0 0 24 24">
+            <path d="M11 5L6 9H2v6h4l5 4V5z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </symbol>
+
+        <!-- Diamond/Gem Icon -->
+        <symbol id="icon-diamond" viewBox="0 0 24 24">
+            <path d="M6 3h12l4 6-10 12L2 9l4-6z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M11 3l1 18M13 3l-1 18M6 3l5 18M18 3l-5 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </symbol>
+
+        <!-- Fire/Trending Icon -->
+        <symbol id="icon-fire" viewBox="0 0 24 24">
+            <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </symbol>
+
+        <!-- Link/Chain Icon -->
+        <symbol id="icon-link" viewBox="0 0 24 24">
+            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </symbol>
+
+        <!-- Export/Download Icon -->
+        <symbol id="icon-export" viewBox="0 0 24 24">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </symbol>
+
+        <!-- Delete/Trash Icon -->
+        <symbol id="icon-delete" viewBox="0 0 24 24">
+            <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M10 11v6M14 11v6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </symbol>
+
+        <!-- Brain/AI Icon -->
+        <symbol id="icon-brain" viewBox="0 0 24 24">
+            <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44L2 22v-4a2.5 2.5 0 0 1 2.5-2.5h5z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44L22 22v-4a2.5 2.5 0 0 0-2.5-2.5h-5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </symbol>
+
+        <!-- Arrow Up Icon -->
+        <symbol id="icon-arrow-up" viewBox="0 0 24 24">
+            <path d="M12 19V5M5 12l7-7 7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </symbol>
+
+        <!-- Live/Dot Icon -->
+        <symbol id="icon-live" viewBox="0 0 24 24">
+            <circle cx="12" cy="12" r="10" fill="currentColor"/>
+        </symbol>
+    </svg>
 </head>
 
 <body>
@@ -1667,7 +1912,10 @@
                     </div>
                 </div>
                 <div class="header-actions">
-                    <div class="live-indicator">● LIVE</div>
+                    <div class="live-indicator">
+                        <span class="status-icon"><svg><use href="#icon-live"></use></svg></span>
+                        LIVE
+                    </div>
                     <div class="status-badge">
                         <div class="status-dot"></div>
                         <span id="statusText">All Systems Operational</span>
@@ -1677,15 +1925,42 @@
 
             <!-- Tabs -->
             <div class="tabs">
-                <button class="tab active" onclick="switchTab('market')">📊 Market</button>
-                <button class="tab" onclick="switchTab('monitor')">📡 API Monitor</button>
-                <button class="tab" onclick="switchTab('advanced')">⚡ Advanced</button>
-                <button class="tab" onclick="switchTab('admin')">⚙️ Admin</button>
-                <button class="tab" onclick="switchTab('hf')">🤗 HuggingFace</button>
-                <button class="tab" onclick="switchTab('pools')">🔄 Pools</button>
-                <button class="tab" onclick="switchTab('logs')">📋 Logs</button>
-                <button class="tab" onclick="switchTab('resources')">📦 Resources</button>
-                <button class="tab" onclick="switchTab('reports')">📊 Reports</button>
+                <button class="tab active" onclick="switchTab('market')">
+                    <span class="tab-icon"><svg><use href="#icon-market"></use></svg></span>
+                    Market
+                </button>
+                <button class="tab" onclick="switchTab('monitor')">
+                    <span class="tab-icon"><svg><use href="#icon-monitor"></use></svg></span>
+                    API Monitor
+                </button>
+                <button class="tab" onclick="switchTab('advanced')">
+                    <span class="tab-icon"><svg><use href="#icon-advanced"></use></svg></span>
+                    Advanced
+                </button>
+                <button class="tab" onclick="switchTab('admin')">
+                    <span class="tab-icon"><svg><use href="#icon-settings"></use></svg></span>
+                    Admin
+                </button>
+                <button class="tab" onclick="switchTab('hf')">
+                    <span class="tab-icon"><svg><use href="#icon-hf"></use></svg></span>
+                    HuggingFace
+                </button>
+                <button class="tab" onclick="switchTab('pools')">
+                    <span class="tab-icon"><svg><use href="#icon-pools"></use></svg></span>
+                    Pools
+                </button>
+                <button class="tab" onclick="switchTab('logs')">
+                    <span class="tab-icon"><svg><use href="#icon-logs"></use></svg></span>
+                    Logs
+                </button>
+                <button class="tab" onclick="switchTab('resources')">
+                    <span class="tab-icon"><svg><use href="#icon-resources"></use></svg></span>
+                    Resources
+                </button>
+                <button class="tab" onclick="switchTab('reports')">
+                    <span class="tab-icon"><svg><use href="#icon-reports"></use></svg></span>
+                    Reports
+                </button>
             </div>
         </div>
 
@@ -1789,13 +2064,19 @@
             <!-- Market Table -->
             <div class="market-section">
                 <div class="section-header">
-                    <div class="section-title gradient-text">💎 Live Market Data</div>
-                    <button class="refresh-btn ripple" onclick="loadMarketData()" data-tooltip="به‌روزرسانی داده‌های بازار">↻ Refresh</button>
+                    <div class="section-title gradient-text">
+                        <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-diamond"></use></svg></span>
+                        Live Market Data
+                    </div>
+                    <button class="refresh-btn ripple" onclick="loadMarketData()" data-tooltip="به‌روزرسانی داده‌های بازار">
+                        <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
+                        Refresh
+                    </button>
                 </div>
                 
                 <!-- Search Bar -->
                 <div class="search-container">
-                    <span class="search-icon">🔍</span>
+                    <span class="search-icon icon"><svg><use href="#icon-search"></use></svg></span>
                     <input type="text" class="search-input" id="marketSearch" placeholder="جستجوی ارز دیجیتال (مثال: Bitcoin, BTC, Ethereum)..." oninput="filterMarketTable()">
                 </div>
                 
@@ -1803,9 +2084,18 @@
                 <div class="filter-chips">
                     <button class="filter-chip active" onclick="filterByCategory('all')">همه</button>
                     <button class="filter-chip" onclick="filterByCategory('top10')">Top 10</button>
-                    <button class="filter-chip" onclick="filterByCategory('gainers')">📈 در حال رشد</button>
-                    <button class="filter-chip" onclick="filterByCategory('losers')">📉 در حال سقوط</button>
-                    <button class="filter-chip" onclick="filterByCategory('volume')">💹 حجم بالا</button>
+                    <button class="filter-chip" onclick="filterByCategory('gainers')">
+                        <span class="icon icon-sm status-icon-success"><svg><use href="#icon-trending-up"></use></svg></span>
+                        در حال رشد
+                    </button>
+                    <button class="filter-chip" onclick="filterByCategory('losers')">
+                        <span class="icon icon-sm status-icon-error"><svg><use href="#icon-trending-down"></use></svg></span>
+                        در حال سقوط
+                    </button>
+                    <button class="filter-chip" onclick="filterByCategory('volume')">
+                        <span class="icon icon-sm"><svg><use href="#icon-volume"></use></svg></span>
+                        حجم بالا
+                    </button>
                 </div>
                 <div style="overflow-x: auto;">
                     <table id="marketTable">
@@ -1854,7 +2144,10 @@
 
             <!-- Trending Section -->
             <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">🔥 Trending Now</div>
+                <div class="section-title" style="margin-bottom: 20px;">
+                    <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-fire"></use></svg></span>
+                    Trending Now
+                </div>
                 <div id="trendingGrid"
                     style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
                     <div class="loading">
@@ -1933,8 +2226,14 @@
 
             <div class="market-section">
                 <div class="section-header">
-                    <div class="section-title">📊 API Providers Status</div>
-                    <button class="refresh-btn ripple" onclick="loadMonitorData()">↻ Refresh</button>
+                    <div class="section-title">
+                        <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-monitor"></use></svg></span>
+                        API Providers Status
+                    </div>
+                    <button class="refresh-btn ripple" onclick="loadMonitorData()">
+                        <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
+                        Refresh
+                    </button>
                 </div>
                 <div style="overflow-x: auto;">
                     <table>
@@ -1957,7 +2256,10 @@
             </div>
 
             <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">🤗 HuggingFace Sentiment Analysis</div>
+                <div class="section-title" style="margin-bottom: 20px;">
+                    <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-brain"></use></svg></span>
+                    HuggingFace Sentiment Analysis
+                </div>
                 <div class="form-group">
                     <label class="form-label">Enter crypto-related text (one per line):</label>
                     <textarea class="form-textarea" id="sentimentText" rows="5"
@@ -1965,7 +2267,10 @@
 ETH looks weak
 Market is bullish today</textarea>
                 </div>
-                <button class="refresh-btn ripple" onclick="runSentiment()">🧠 Analyze Sentiment</button>
+                <button class="refresh-btn ripple" onclick="runSentiment()">
+                    <span class="icon icon-sm"><svg><use href="#icon-brain"></use></svg></span>
+                    Analyze Sentiment
+                </button>
                 <div id="sentimentResult"
                     style="margin-top: 20px; padding: 20px; background: rgba(17, 24, 39, 0.6); border-radius: 12px; text-align: center; font-size: 36px; font-weight: 900;">
                     —</div>
@@ -2099,12 +2404,18 @@ Market is bullish today</textarea>
             </div>
 
             <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">📋 Current API Sources</div>
+                <div class="section-title" style="margin-bottom: 20px;">
+                    <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-logs"></use></svg></span>
+                    Current API Sources
+                </div>
                 <div id="apisList">Loading...</div>
             </div>
 
             <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">⚙️ Settings</div>
+                <div class="section-title" style="margin-bottom: 20px;">
+                    <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-settings"></use></svg></span>
+                    Settings
+                </div>
                 <div class="form-group">
                     <label class="form-label">API Check Interval (seconds)</label>
                     <input type="number" class="form-input" id="checkInterval" value="30" min="10" max="300">
@@ -2117,7 +2428,10 @@ Market is bullish today</textarea>
             </div>
 
             <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">📊 Statistics</div>
+                <div class="section-title" style="margin-bottom: 20px;">
+                    <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-reports"></use></svg></span>
+                    Statistics
+                </div>
                 <div class="stats-grid">
                     <div class="stat-card">
                         <div class="stat-value" id="statTotal">0</div>
@@ -2139,8 +2453,14 @@ Market is bullish today</textarea>
         <div id="tab-hf" class="tab-content">
             <div class="market-section">
                 <div class="section-header">
-                    <div class="section-title">📊 Health Status</div>
-                    <button class="refresh-btn" onclick="loadHFHealth()">🔄 Refresh</button>
+                    <div class="section-title">
+                        <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-reports"></use></svg></span>
+                        Health Status
+                    </div>
+                    <button class="refresh-btn ripple" onclick="loadHFHealth()">
+                        <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
+                        Refresh
+                    </button>
                 </div>
                 <pre id="healthOutput"
                     style="background: #1e293b; color: #e2e8f0; padding: 15px; border-radius: 8px; overflow-x: auto; font-size: 12px; max-height: 200px; overflow-y: auto;">Loading...</pre>
@@ -2185,7 +2505,10 @@ Market is bullish today</textarea>
             </div>
 
             <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">💭 Sentiment Analysis</div>
+                <div class="section-title" style="margin-bottom: 20px;">
+                    <span class="icon icon-md"><svg><use href="#icon-brain"></use></svg></span>
+                    Sentiment Analysis
+                </div>
                 <div class="form-group">
                     <label class="form-label">Enter text samples (one per line):</label>
                     <textarea class="form-textarea" id="sentimentTexts" rows="5"
@@ -2193,7 +2516,10 @@ Market is bullish today</textarea>
 ETH looks weak
 Crypto market is bullish today</textarea>
                 </div>
-                <button class="refresh-btn" onclick="doSentiment()">🧠 Run Sentiment Analysis</button>
+                <button class="refresh-btn ripple" onclick="doSentiment()">
+                    <span class="icon icon-sm"><svg><use href="#icon-brain"></use></svg></span>
+                    Run Sentiment Analysis
+                </button>
                 <div id="voteDisplay"
                     style="margin-top: 20px; padding: 20px; background: rgba(17, 24, 39, 0.6); border-radius: 12px; text-align: center; font-size: 36px; font-weight: 900;">
                     —</div>
@@ -2206,17 +2532,30 @@ Crypto market is bullish today</textarea>
         <div id="tab-logs" class="tab-content">
             <div class="market-section">
                 <div class="section-header">
-                    <div class="section-title">📋 Log Management</div>
+                    <div class="section-title">
+                        <span class="icon icon-md"><svg><use href="#icon-logs"></use></svg></span>
+                        Log Management
+                    </div>
                     <div style="display: flex; gap: 10px;">
-                        <button class="refresh-btn" onclick="loadLogs()">🔄 Refresh</button>
-                        <button class="refresh-btn" onclick="exportLogsJSON()"
-                            style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">💾 Export
-                            JSON</button>
-                        <button class="refresh-btn" onclick="exportLogsCSV()"
-                            style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">📊 Export
-                            CSV</button>
-                        <button class="refresh-btn" onclick="clearAllLogs()"
-                            style="background: rgba(239, 68, 68, 0.2); color: var(--accent-red);">🗑️ Clear</button>
+                        <button class="refresh-btn ripple" onclick="loadLogs()">
+                            <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
+                            Refresh
+                        </button>
+                        <button class="refresh-btn ripple" onclick="exportLogsJSON()"
+                            style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">
+                            <span class="icon icon-sm"><svg><use href="#icon-export"></use></svg></span>
+                            Export JSON
+                        </button>
+                        <button class="refresh-btn ripple" onclick="exportLogsCSV()"
+                            style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">
+                            <span class="icon icon-sm"><svg><use href="#icon-reports"></use></svg></span>
+                            Export CSV
+                        </button>
+                        <button class="refresh-btn ripple" onclick="clearAllLogs()"
+                            style="background: rgba(239, 68, 68, 0.2); color: var(--accent-red);">
+                            <span class="icon icon-sm"><svg><use href="#icon-delete"></use></svg></span>
+                            Clear
+                        </button>
                     </div>
                 </div>
 
@@ -2399,16 +2738,42 @@ Crypto market is bullish today</textarea>
 
         <!-- Reports Tab -->
         <div id="tab-reports" class="tab-content">
+            <!-- System Status Alerts -->
+            <div class="market-section" id="systemAlertsSection" style="display: none;">
+                <div class="section-header">
+                    <div class="section-title">
+                        <span class="icon icon-md status-icon-warning"><svg><use href="#icon-warning"></use></svg></span>
+                        System Status & Alerts
+                    </div>
+                    <button class="refresh-btn ripple" onclick="loadSystemAlerts()">
+                        <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
+                        Refresh
+                    </button>
+                </div>
+                <div id="systemAlertsContainer"></div>
+            </div>
+
             <div class="market-section">
                 <div class="section-header">
-                    <div class="section-title">🔍 اشکال‌یابی خودکار</div>
+                    <div class="section-title">
+                        <span class="icon icon-md"><svg><use href="#icon-search"></use></svg></span>
+                        System Diagnostics
+                    </div>
                     <div style="display: flex; gap: 10px;">
-                        <button class="refresh-btn" onclick="runDiagnostics(false)"
-                            style="background: rgba(59, 130, 246, 0.2); color: var(--accent-blue);">🔍 بررسی</button>
-                        <button class="refresh-btn" onclick="runDiagnostics(true)"
-                            style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">🔧 بررسی و
-                            تعمیر</button>
-                        <button class="refresh-btn" onclick="loadReports()">🔄 به‌روزرسانی</button>
+                        <button class="refresh-btn ripple" onclick="runDiagnostics(false)"
+                            style="background: rgba(59, 130, 246, 0.2); color: var(--accent-blue);">
+                            <span class="icon icon-sm"><svg><use href="#icon-search"></use></svg></span>
+                            بررسی
+                        </button>
+                        <button class="refresh-btn ripple" onclick="runDiagnostics(true)"
+                            style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">
+                            <span class="icon icon-sm"><svg><use href="#icon-settings"></use></svg></span>
+                            بررسی و تعمیر
+                        </button>
+                        <button class="refresh-btn ripple" onclick="loadReports()">
+                            <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
+                            به‌روزرسانی
+                        </button>
                     </div>
                 </div>
 
@@ -2422,8 +2787,14 @@ Crypto market is bullish today</textarea>
 
             <div class="market-section">
                 <div class="section-header">
-                    <div class="section-title">🤖 گزارش Auto-Discovery Service</div>
-                    <button class="refresh-btn" onclick="loadDiscoveryReport()">🔄 به‌روزرسانی</button>
+                    <div class="section-title">
+                        <span class="icon icon-md"><svg><use href="#icon-pools"></use></svg></span>
+                        Auto-Discovery Service Report
+                    </div>
+                    <button class="refresh-btn ripple" onclick="loadDiscoveryReport()">
+                        <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
+                        به‌روزرسانی
+                    </button>
                 </div>
                 <div id="discoveryReport">
                     <div class="loading">
@@ -2434,8 +2805,14 @@ Crypto market is bullish today</textarea>
 
             <div class="market-section">
                 <div class="section-header">
-                    <div class="section-title">🧠 گزارش وضعیت مدل‌های HuggingFace</div>
-                    <button class="refresh-btn" onclick="loadModelsReport()">🔄 به‌روزرسانی</button>
+                    <div class="section-title">
+                        <span class="icon icon-md"><svg><use href="#icon-brain"></use></svg></span>
+                        HuggingFace Models Status Report
+                    </div>
+                    <button class="refresh-btn ripple" onclick="loadModelsReport()">
+                        <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
+                        به‌روزرسانی
+                    </button>
                 </div>
                 <div id="modelsReport">
                     <div class="loading">
@@ -2668,7 +3045,7 @@ Crypto market is bullish today</textarea>
 
                 // Call updateStats with validated data - double check before calling
                 if (stats && stats.market && typeof stats.market === 'object' && !Array.isArray(stats.market)) {
-                    updateStats(stats, sentiment);
+                updateStats(stats, sentiment);
                 } else {
                     console.error('Failed final validation before updateStats:', { stats, sentiment });
                     throw new Error('داده‌های stats.market نامعتبر است');
@@ -2761,15 +3138,15 @@ Crypto market is bullish today</textarea>
                 if (sentimentLabelEl) {
                     sentimentLabelEl.innerHTML = `<span>${classification}</span>`;
                     
-                    if (fg < 25) {
+            if (fg < 25) {
                         sentimentLabelEl.style.color = 'var(--accent-red)';
-                    } else if (fg < 45) {
+            } else if (fg < 45) {
                         sentimentLabelEl.style.color = 'var(--accent-yellow)';
-                    } else if (fg < 55) {
+            } else if (fg < 55) {
                         sentimentLabelEl.style.color = 'var(--text-secondary)';
-                    } else if (fg < 75) {
+            } else if (fg < 75) {
                         sentimentLabelEl.style.color = 'var(--accent-blue)';
-                    } else {
+            } else {
                         sentimentLabelEl.style.color = 'var(--accent-green)';
                     }
                 }
@@ -2783,7 +3160,7 @@ Crypto market is bullish today</textarea>
         function updateMarketTable(cryptos) {
             try {
                 if (!cryptos || !Array.isArray(cryptos) || cryptos.length === 0) {
-                    const tbody = document.getElementById('marketTableBody');
+            const tbody = document.getElementById('marketTableBody');
                     if (tbody) {
                         tbody.innerHTML = '<tr><td colspan="6" style="text-align: center; padding: 40px; color: var(--text-secondary);">هیچ داده‌ای یافت نشد</td></tr>';
                     }
@@ -2808,22 +3185,22 @@ Crypto market is bullish today</textarea>
 
                     return `
                         <tr data-name="${name.toLowerCase()}" data-symbol="${symbol.toLowerCase()}" data-change="${change24h}" data-rank="${crypto.rank || index + 1}">
-                            <td style="font-weight: 700; color: var(--text-secondary);">${crypto.rank || index + 1}</td>
-                            <td>
-                                <div class="crypto-name">
+                    <td style="font-weight: 700; color: var(--text-secondary);">${crypto.rank || index + 1}</td>
+                    <td>
+                        <div class="crypto-name">
                                     ${crypto.image ? `<img src="${crypto.image}" class="crypto-img" alt="${symbol}" onerror="this.style.display='none'">` :
                                 `<div class="crypto-img" style="background: linear-gradient(135deg, #3b82f6, #8b5cf6); display: flex; align-items: center; justify-content: center; font-weight: 700; color: white;">${symbol[0] || '?'}</div>`}
-                                    <div>
+                            <div>
                                         <div style="font-weight: 600;">${name}</div>
                                         <div class="crypto-symbol">${symbol}</div>
-                                    </div>
-                                </div>
-                            </td>
+                            </div>
+                        </div>
+                    </td>
                             <td class="price number-counter">$${price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 })}</td>
                             <td><span class="change ${changeClass} pulse-data">${changeIcon} ${change24h >= 0 ? '+' : ''}${change24h.toFixed(2)}%</span></td>
                             <td style="font-weight: 600;">$${(marketCap / 1e9).toFixed(2)}B</td>
                             <td style="color: var(--text-secondary);">$${(volume24h / 1e9).toFixed(2)}B</td>
-                        </tr>
+                </tr>
                     `;
                 }).join('');
             } catch (error) {
@@ -2837,7 +3214,7 @@ Crypto market is bullish today</textarea>
 
         function updateTrending(trending) {
             try {
-                const grid = document.getElementById('trendingGrid');
+            const grid = document.getElementById('trendingGrid');
                 if (!grid) return;
 
                 if (!trending || !Array.isArray(trending) || trending.length === 0) {
@@ -2849,14 +3226,14 @@ Crypto market is bullish today</textarea>
                     const name = coin.name || 'نامشخص';
                     const symbol = coin.symbol || 'N/A';
                     return `
-                        <div style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 12px; padding: 15px; display: flex; align-items: center; gap: 12px;">
-                            <div style="font-size: 20px; font-weight: 900; color: var(--accent-yellow);">#${index + 1}</div>
+                <div style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 12px; padding: 15px; display: flex; align-items: center; gap: 12px;">
+                    <div style="font-size: 20px; font-weight: 900; color: var(--accent-yellow);">#${index + 1}</div>
                             ${coin.thumb ? `<img src="${coin.thumb}" style="width: 32px; height: 32px; border-radius: 8px;" onerror="this.style.display='none'">` : ''}
-                            <div>
+                    <div>
                                 <div style="font-weight: 600;">${name}</div>
                                 <div style="font-size: 12px; color: var(--text-secondary);">${symbol}</div>
-                            </div>
-                        </div>
+                    </div>
+                </div>
                     `;
                 }).join('');
             } catch (error) {
@@ -2870,18 +3247,18 @@ Crypto market is bullish today</textarea>
 
         function updateDeFi(defi) {
             try {
-                const list = document.getElementById('defiList');
+            const list = document.getElementById('defiList');
                 if (!list) return;
 
                 const protocols = defi && defi.protocols ? defi.protocols : [];
                 const totalTvl = defi && defi.total_tvl ? defi.total_tvl : 0;
 
-                list.innerHTML = `
+            list.innerHTML = `
                     <div class="stat-card" style="margin-bottom: 20px; text-align: center; background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));">
                         <div class="stat-value gradient-text" style="font-size: 42px; margin-bottom: 8px;">$${(totalTvl / 1e9).toFixed(2)}B</div>
                         <div class="stat-label" style="font-size: 16px;">Total Value Locked</div>
-                    </div>
-                    <div style="display: grid; gap: 12px;">
+                </div>
+                <div style="display: grid; gap: 12px;">
                         ${protocols.length > 0 ? protocols.map((p, i) => {
                             const name = p.name || 'نامشخص';
                             const chain = p.chain || 'N/A';
@@ -2891,21 +3268,21 @@ Crypto market is bullish today</textarea>
                             return `
                                 <div class="stat-card" style="animation-delay: ${i * 0.05}s; cursor: pointer;" onclick="showToast('${name}: $${(tvl / 1e9).toFixed(2)}B TVL', 'info', 'DeFi Protocol')">
                                     <div style="display: flex; justify-content: space-between; align-items: center;">
-                                        <div>
+                            <div>
                                             <div style="font-weight: 700; font-size: 16px; margin-bottom: 4px;">${i + 1}. ${name}</div>
                                             <div style="font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px;">
                                                 <span>🔗</span> <span>${chain}</span>
                                             </div>
-                                        </div>
-                                        <div style="text-align: right;">
+                            </div>
+                            <div style="text-align: right;">
                                             <div class="stat-value" style="font-size: 18px; margin-bottom: 4px;">$${(tvl / 1e9).toFixed(2)}B</div>
                                             <div class="stat-change ${changeClass}" style="font-size: 13px;">
                                                 ${change24h >= 0 ? '📈' : '📉'} ${change24h >= 0 ? '+' : ''}${change24h.toFixed(2)}%
-                                            </div>
-                                        </div>
-                                    </div>
                                 </div>
-                            `;
+                            </div>
+                        </div>
+                </div>
+            `;
                         }).join('') : '<div class="empty-state"><div class="empty-state-icon">📦</div><div>هیچ پروتکلی یافت نشد</div></div>'}
                     </div>
                 `;
@@ -3002,7 +3379,7 @@ Crypto market is bullish today</textarea>
                 window.wsClient.on('stats_update', (message) => {
                     console.log('📊 Stats update:', message.data);
                     if (typeof updateOnlineStats === 'function') {
-                        updateOnlineStats(message.data);
+                    updateOnlineStats(message.data);
                     }
                 });
 
@@ -3030,10 +3407,10 @@ Crypto market is bullish today</textarea>
                 // درخواست آمار هر 10 ثانیه (فقط یک بار تنظیم شود)
                 if (!wsStatsInterval) {
                     wsStatsInterval = setInterval(() => {
-                        if (window.wsClient && window.wsClient.isConnected) {
-                            window.wsClient.requestStats();
-                        }
-                    }, 10000);
+                    if (window.wsClient && window.wsClient.isConnected) {
+                        window.wsClient.requestStats();
+                    }
+                }, 10000);
                 }
             } else {
                 wsConnectAttempts++;
@@ -3042,7 +3419,7 @@ Crypto market is bullish today</textarea>
                     if (wsConnectAttempts % 5 === 0 || wsConnectAttempts === 1) {
                         console.log(`⏳ در انتظار WebSocket Client... (${wsConnectAttempts}/${MAX_WS_CONNECT_ATTEMPTS})`);
                     }
-                    setTimeout(connectWebSocket, 1000);
+                setTimeout(connectWebSocket, 1000);
                 } else {
                     console.warn('⚠️ WebSocket Client پس از ' + MAX_WS_CONNECT_ATTEMPTS + ' تلاش آماده نشد. ممکن است فایل websocket-client.js لود نشده باشد یا WebSocket پشتیبانی نشود.');
                     console.warn('⚠️ بررسی کنید که فایل /static/js/websocket-client.js به درستی لود شده باشد.');
@@ -3136,21 +3513,21 @@ Crypto market is bullish today</textarea>
                     if (providers.length === 0) {
                         tbody.innerHTML = '<tr><td colspan="5" style="text-align: center; padding: 40px; color: var(--text-secondary);">هیچ APIای یافت نشد</td></tr>';
                     } else {
-                        tbody.innerHTML = providers.map(p => {
-                            let statusClass = 'badge-success';
-                            if (p.status === 'offline') statusClass = 'badge-danger';
-                            else if (p.status === 'degraded') statusClass = 'badge-warning';
+                tbody.innerHTML = providers.map(p => {
+                    let statusClass = 'badge-success';
+                    if (p.status === 'offline') statusClass = 'badge-danger';
+                    else if (p.status === 'degraded') statusClass = 'badge-warning';
 
-                            return `
-                                <tr>
+                    return `
+                        <tr>
                                     <td><strong>${p.name || 'نامشخص'}</strong></td>
                                     <td><span class="badge badge-info">${p.category || 'نامشخص'}</span></td>
                                     <td><span class="badge ${statusClass}">${(p.status || 'unknown').toUpperCase()}</span></td>
                                     <td>${p.response_time_ms || p.avg_response_time_ms || 0}ms</td>
                                     <td style="color: var(--text-secondary); font-size: 13px;">${p.last_fetch ? new Date(p.last_fetch).toLocaleTimeString() : 'نامشخص'}</td>
-                                </tr>
-                            `;
-                        }).join('');
+                        </tr>
+                    `;
+                }).join('');
                     }
                 }
             } catch (error) {
@@ -3847,7 +4224,7 @@ Crypto market is bullish today</textarea>
                 // Auto hide after 3 seconds
                 setTimeout(() => {
                     hideFeedback();
-                }, 3000);
+            }, 3000);
             }
         }
 
@@ -4278,6 +4655,158 @@ Crypto market is bullish today</textarea>
             ]);
         }
 
+        // Load System Alerts
+        async function loadSystemAlerts() {
+            try {
+                const response = await fetch('/api/diagnostics/last');
+                const report = await response.json();
+                
+                if (report.message || !report.issues || report.issues.length === 0) {
+                    document.getElementById('systemAlertsSection').style.display = 'none';
+                    return;
+                }
+                
+                displaySystemAlerts(report.issues);
+                document.getElementById('systemAlertsSection').style.display = 'block';
+            } catch (error) {
+                console.error('Error loading system alerts:', error);
+            }
+        }
+
+        function displaySystemAlerts(issues) {
+            const container = document.getElementById('systemAlertsContainer');
+            if (!container) return;
+
+            const severityConfig = {
+                'critical': {
+                    icon: 'icon-error',
+                    color: 'var(--accent-red)',
+                    bg: 'rgba(239, 68, 68, 0.1)',
+                    border: 'rgba(239, 68, 68, 0.3)'
+                },
+                'warning': {
+                    icon: 'icon-warning',
+                    color: 'var(--accent-yellow)',
+                    bg: 'rgba(245, 158, 11, 0.1)',
+                    border: 'rgba(245, 158, 11, 0.3)'
+                },
+                'info': {
+                    icon: 'icon-info',
+                    color: 'var(--accent-blue)',
+                    bg: 'rgba(59, 130, 246, 0.1)',
+                    border: 'rgba(59, 130, 246, 0.3)'
+                }
+            };
+
+            const solutions = {
+                'HF_API_TOKEN': {
+                    title: 'تنظیم متغیر محیطی HF_API_TOKEN',
+                    steps: [
+                        '1. یک توکن از HuggingFace دریافت کنید:',
+                        '   - به https://huggingface.co/settings/tokens بروید',
+                        '   - یک توکن جدید ایجاد کنید',
+                        '2. توکن را به متغیر محیطی اضافه کنید:',
+                        '   Windows: set HF_API_TOKEN=your_token_here',
+                        '   Linux/Mac: export HF_API_TOKEN=your_token_here',
+                        '   یا در فایل .env: HF_API_TOKEN=your_token_here'
+                    ]
+                },
+                'resources.json': {
+                    title: 'ایجاد فایل resources.json',
+                    steps: [
+                        'این فایل به صورت خودکار ساخته می‌شود.',
+                        'اگر نیاز به تنظیمات دستی دارید، می‌توانید آن را ایجاد کنید:',
+                        '{',
+                        '  "resources": []',
+                        '}'
+                    ]
+                },
+                'config.json': {
+                    title: 'ایجاد فایل config.json',
+                    steps: [
+                        'این فایل به صورت خودکار ساخته می‌شود.',
+                        'اگر نیاز به تنظیمات دستی دارید، می‌توانید آن را ایجاد کنید.'
+                    ]
+                },
+                'HuggingFace API': {
+                    title: 'رفع مشکل اتصال به HuggingFace',
+                    steps: [
+                        '1. بررسی اتصال اینترنت',
+                        '2. بررسی فایروال و پروکسی',
+                        '3. بررسی DNS settings',
+                        '4. اگر از VPN استفاده می‌کنید، آن را غیرفعال کنید',
+                        '5. بررسی کنید که https://api.huggingface.co قابل دسترسی باشد'
+                    ]
+                },
+                'Auto-Discovery': {
+                    title: 'فعال‌سازی Auto-Discovery Service',
+                    steps: [
+                        'برای فعال‌سازی سرویس Auto-Discovery:',
+                        '1. متغیر محیطی را تنظیم کنید:',
+                        '   export ENABLE_AUTO_DISCOVERY=true',
+                        '2. یا در فایل .env اضافه کنید:',
+                        '   ENABLE_AUTO_DISCOVERY=true',
+                        '3. سرور را restart کنید'
+                    ]
+                }
+            };
+
+            let html = '';
+            issues.forEach((issue, index) => {
+                const config = severityConfig[issue.severity] || severityConfig['info'];
+                const solutionKey = issue.title.includes('HF_API_TOKEN') ? 'HF_API_TOKEN' :
+                                   issue.title.includes('resources.json') ? 'resources.json' :
+                                   issue.title.includes('config.json') ? 'config.json' :
+                                   issue.title.includes('HuggingFace') ? 'HuggingFace API' :
+                                   issue.title.includes('Auto-Discovery') ? 'Auto-Discovery' : null;
+                
+                const solution = solutionKey ? solutions[solutionKey] : null;
+
+                html += `
+                    <div class="stat-card" style="margin-bottom: 15px; border-left: 4px solid ${config.border}; background: ${config.bg}; animation-delay: ${index * 0.1}s;">
+                        <div style="display: flex; align-items: start; gap: 12px;">
+                            <div class="icon icon-md status-icon-${issue.severity}" style="flex-shrink: 0; margin-top: 2px;">
+                                <svg><use href="#${config.icon}"></use></svg>
+                            </div>
+                            <div style="flex: 1;">
+                                <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px;">
+                                    <div>
+                                        <h3 style="font-size: 16px; font-weight: 700; margin-bottom: 4px; color: ${config.color};">
+                                            ${issue.title}
+                                        </h3>
+                                        <div style="font-size: 13px; color: var(--text-secondary); margin-bottom: 8px;">
+                                            ${issue.description}
+                                        </div>
+                                    </div>
+                                    <span class="badge badge-${issue.severity === 'critical' ? 'danger' : issue.severity === 'warning' ? 'warning' : 'info'}" style="flex-shrink: 0;">
+                                        ${issue.category}
+                                    </span>
+                                </div>
+                                
+                                ${solution ? `
+                                    <div style="margin-top: 12px; padding: 12px; background: rgba(17, 24, 39, 0.6); border-radius: 8px; border: 1px solid var(--border);">
+                                        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+                                            <span class="icon icon-sm status-icon-info"><svg><use href="#icon-info"></use></svg></span>
+                                            <strong style="font-size: 14px;">راه‌حل:</strong>
+                                        </div>
+                                        <div style="font-size: 12px; color: var(--text-secondary); font-family: 'Courier New', monospace; line-height: 1.8;">
+                                            ${solution.steps.map(step => `<div style="margin-bottom: 4px;">${step}</div>`).join('')}
+                                        </div>
+                                    </div>
+                                ` : ''}
+                                
+                                <div style="margin-top: 8px; font-size: 11px; color: var(--text-secondary);">
+                                    ${new Date(issue.timestamp).toLocaleString('fa-IR')}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+            });
+
+            container.innerHTML = html || '<div style="text-align: center; padding: 40px; color: var(--text-secondary);">هیچ هشداری یافت نشد</div>';
+        }
+
         async function runDiagnostics(autoFix = false) {
             const resultsDiv = document.getElementById('diagnosticsResults');
             resultsDiv.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
@@ -4289,10 +4818,19 @@ Crypto market is bullish today</textarea>
                 const report = await response.json();
 
                 displayDiagnosticsReport(report);
-                showToast(`✅ اشکال‌یابی انجام شد (${report.total_issues} مشکل یافت شد)`, 'success');
+                showToast(`اشکال‌یابی انجام شد (${report.total_issues} مشکل یافت شد)`, 'success', 'Diagnostics');
+                
+                // Update system alerts
+                if (report.issues && report.issues.length > 0) {
+                    displaySystemAlerts(report.issues);
+                    document.getElementById('systemAlertsSection').style.display = 'block';
+                }
             } catch (error) {
-                resultsDiv.innerHTML = `<div class="alert alert-error">❌ خطا: ${error.message}</div>`;
-                showToast('❌ خطا در اجرای اشکال‌یابی', 'error');
+                resultsDiv.innerHTML = `<div class="alert alert-error">
+                    <span class="icon icon-md status-icon-error"><svg><use href="#icon-error"></use></svg></span>
+                    خطا: ${error.message}
+                </div>`;
+                showToast('خطا در اجرای اشکال‌یابی', 'error', 'Error');
             }
         }
 
@@ -4406,6 +4944,12 @@ Crypto market is bullish today</textarea>
                 }
 
                 displayDiagnosticsReport(report);
+                
+                // Load system alerts
+                if (report.issues && report.issues.length > 0) {
+                    displaySystemAlerts(report.issues);
+                    document.getElementById('systemAlertsSection').style.display = 'block';
+                }
             } catch (error) {
                 console.error('Error loading last diagnostics:', error);
             }