feat(webui): optimize CSS build system and enhance UI quality

public/js/components/claude-config.js

@@ -6,6 +6,7 @@ window.Components = window.Components || {};
 
 window.Components.claudeConfig = () => ({
     config: { env: {} },
+    configPath: '', // Dynamic path from backend
     models: [],
     loading: false,
     gemini1mSuffix: false,
@@ -76,7 +77,7 @@ window.Components.claudeConfig = () => ({
      */
     selectModel(field, modelId) {
         if (!this.config.env) this.config.env = {};
-        
+
         let finalModelId = modelId;
         // If 1M mode is enabled and it's a Gemini model, append the suffix
         if (this.gemini1mSuffix && modelId.toLowerCase().includes('gemini')) {
@@ -84,7 +85,7 @@ window.Components.claudeConfig = () => ({
                 finalModelId = finalModelId.trim() + ' [1m]';
             }
         }
-        
+
         this.config.env[field] = finalModelId;
     },
 
@@ -97,6 +98,7 @@ window.Components.claudeConfig = () => ({
             if (!response.ok) throw new Error(`HTTP ${response.status}`);
             const data = await response.json();
             this.config = data.config || {};
+            this.configPath = data.path || '~/.claude/settings.json'; // Save dynamic path
             if (!this.config.env) this.config.env = {};
 
             // Default MCP CLI to true if not set
@@ -106,10 +108,10 @@ window.Components.claudeConfig = () => ({
 
             // Detect existing [1m] suffix state, default to true
             const hasExistingSuffix = this.detectGemini1mSuffix();
-            const hasGeminiModels = this.geminiModelFields.some(f => 
+            const hasGeminiModels = this.geminiModelFields.some(f =>
                 this.config.env[f]?.toLowerCase().includes('gemini')
             );
-            
+
             // Default to enabled: if no suffix found but Gemini models exist, apply suffix
             if (!hasExistingSuffix && hasGeminiModels) {
                 this.toggleGemini1mSuffix(true);

public/js/components/dashboard/charts.js

@@ -149,7 +149,7 @@ window.DashboardCharts.updateCharts = function (component) {
 
   // Safety checks
   if (!canvas) {
-    console.warn("quotaChart canvas not found");
+    console.debug("quotaChart canvas not found");
     return;
   }
   if (typeof Chart === "undefined") {
@@ -157,7 +157,7 @@ window.DashboardCharts.updateCharts = function (component) {
     return;
   }
   if (!isCanvasReady(canvas)) {
-    console.warn("quotaChart canvas not ready, skipping update");
+    console.debug("quotaChart canvas not ready, skipping update");
     return;
   }
 

public/js/data-store.js

@@ -69,6 +69,11 @@ document.addEventListener('alpine:init', () => {
 
                 this.connectionStatus = 'connected';
                 this.lastUpdated = new Date().toLocaleTimeString();
+
+                // Fetch version from config endpoint if not already loaded
+                if (this.initialLoad) {
+                    this.fetchVersion(password);
+                }
             } catch (error) {
                 console.error('Fetch error:', error);
                 this.connectionStatus = 'disconnected';
@@ -80,6 +85,20 @@ document.addEventListener('alpine:init', () => {
             }
         },
 
+        async fetchVersion(password) {
+            try {
+                const { response } = await window.utils.request('/api/config', {}, password);
+                if (response.ok) {
+                    const data = await response.json();
+                    if (data.version) {
+                        Alpine.store('global').version = data.version;
+                    }
+                }
+            } catch (error) {
+                console.warn('Failed to fetch version:', error);
+            }
+        },
+
         computeQuotaRows() {
             const models = this.models || [];
             const rows = [];

public/js/store.js

@@ -98,7 +98,8 @@ document.addEventListener('alpine:init', () => {
                 opusAlias: "Opus Alias",
                 sonnetAlias: "Sonnet Alias",
                 haikuAlias: "Haiku Alias",
-                claudeSettingsAlert: "Settings below directly modify ~/.claude/settings.json. Restart Claude CLI to apply.",
+                claudeSettingsAlertPrefix: "Settings below directly modify",
+        claudeSettingsAlertSuffix: "Restart Claude CLI to apply.",
                 applyToClaude: "Apply to Claude CLI",
                 // Settings - Server
                 port: "Port",
@@ -118,7 +119,7 @@ document.addEventListener('alpine:init', () => {
                 sonnetModel: "Sonnet Model",
                 haikuModel: "Haiku Model",
                 authToken: "Auth Token",
-                saveConfig: "Save to ~/.claude/settings.json",
+                saveConfig: "Save to Claude CLI settings",
                 envVar: "Env",
                 // New Keys
                 systemName: "ANTIGRAVITY",
@@ -346,7 +347,8 @@ document.addEventListener('alpine:init', () => {
                 opusAlias: "Opus 别名",
                 sonnetAlias: "Sonnet 别名",
                 haikuAlias: "Haiku 别名",
-                claudeSettingsAlert: "以下设置直接修改 ~/.claude/settings.json。重启 Claude CLI 生效。",
+                claudeSettingsAlertPrefix: "以下设置直接修改",
+        claudeSettingsAlertSuffix: "重启 Claude CLI 生效。",
                 applyToClaude: "应用到 Claude CLI",
                 // Settings - Server
                 port: "端口",
@@ -366,7 +368,7 @@ document.addEventListener('alpine:init', () => {
                 sonnetModel: "Sonnet 模型",
                 haikuModel: "Haiku 模型",
                 authToken: "认证令牌",
-                saveConfig: "保存到 ~/.claude/settings.json",
+                saveConfig: "保存到 Claude CLI 设置",
                 envVar: "环境变量",
                 // New Keys
                 systemName: "ANTIGRAVITY",