@pheem49/mint 1.5.1 → 1.5.2

package/src/UI/settings.js

@@ -184,6 +184,10 @@ function applyConfig(config) {
     // Update color picker
     document.getElementById('custom-color').value = config.accentColor;
 
+    const defaultTextColor = config.theme === 'light' ? '#0f172a' : DEFAULT_CONFIG.systemTextColor;
+    const textColor = (!config.systemTextColor || (config.theme === 'light' && config.systemTextColor === DEFAULT_CONFIG.systemTextColor))
+        ? defaultTextColor
+        : config.systemTextColor;
     document.getElementById('system-text-color').value = textColor;
     document.documentElement.style.setProperty('--text-main', textColor);
 
@@ -586,22 +590,20 @@ function renderMcpServers() {
     console.log(`[Settings] Found ${entries.length} servers in currentConfig.`);
 
     if (entries.length === 0) {
-        list.innerHTML = '<p class="hint" style="text-align: center; padding: 10px;">No MCP servers connected.</p>';
+        list.innerHTML = '<p class="mcp-empty">No MCP servers connected.</p>';
         return;
     }
 
     for (const [name, cfg] of entries) {
         const item = document.createElement('div');
-        item.style.cssText = 'display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(0,0,0,0.2); border-radius: 10px; border: 1px solid var(--border);';
+        item.className = 'mcp-item';
         
         item.innerHTML = `
-            <div style="display: flex; flex-direction: column; gap: 4px;">
-                <div style="font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 6px;">
-                    <span>🌐 ${name}</span>
-                </div>
-                <div style="font-size: 0.75rem; opacity: 0.7; font-family: monospace;">${cfg.command} ${cfg.args.join(' ')}</div>
+            <div class="mcp-info">
+                <div class="mcp-name">🌐 ${name}</div>
+                <div class="mcp-command">${cfg.command} ${(cfg.args || []).join(' ')}</div>
             </div>
-            <button class="btn-danger" style="padding: 6px 12px; font-size: 0.8rem;" onclick="removeMcpServer('${name}')">Remove</button>
+            <button class="btn-danger btn-small" onclick="removeMcpServer('${name}')">Remove</button>
         `;
         list.appendChild(item);
     }

package/src/UI/styles.css

@@ -159,6 +159,8 @@ h1 {
 
 .toggle-model-btn,
 .change-expression-btn,
+.accessory-cycle-btn,
+.toggle-interaction-btn,
 .interaction-guide-btn,
 .clear-btn,
 .settings-btn {
@@ -184,6 +186,8 @@ h1 {
 
 .toggle-model-btn svg,
 .change-expression-btn svg,
+.accessory-cycle-btn svg,
+.toggle-interaction-btn svg,
 .interaction-guide-btn svg,
 .clear-btn svg,
 .settings-btn svg {
@@ -236,6 +240,38 @@ h1 {
   color: #fbbf24;
 }
 
+.accessory-cycle-btn:hover,
+.accessory-cycle-btn.active {
+  background: rgba(168, 85, 247, 0.14);
+  border-color: rgba(168, 85, 247, 0.24);
+  color: #c4b5fd;
+}
+
+.toggle-interaction-btn:hover,
+.toggle-interaction-btn.active {
+  background: rgba(34, 197, 94, 0.14);
+  border-color: rgba(34, 197, 94, 0.24);
+  color: #86efac;
+}
+
+.toggle-interaction-btn:not(.active) {
+  color: #f87171;
+}
+
+.toggle-interaction-btn:not(.active):hover {
+  background: rgba(248, 113, 113, 0.14);
+  border-color: rgba(248, 113, 113, 0.22);
+  color: #f87171;
+}
+
+.toggle-interaction-btn .interaction-off-mark {
+  opacity: 0;
+}
+
+.toggle-interaction-btn:not(.active) .interaction-off-mark {
+  opacity: 1;
+}
+
 .interaction-guide-btn:hover {
   background: rgba(34, 211, 238, 0.14);
   border-color: rgba(34, 211, 238, 0.2);
@@ -304,8 +340,8 @@ h1 {
 .model-shell {
   width: 100%;
   height: 100%;
-  max-width: 620px;
-  max-height: 720px;
+  max-width: none;
+  max-height: none;
   min-height: 480px;
   display: grid;
   place-items: center;
@@ -406,52 +442,52 @@ h1 {
 }
 
 .zone-head {
-  left: 35%;
-  top: 30%;
-  width: 29%;
-  height: 9%;
+  left: 34%;
+  top: 25.5%;
+  width: 32%;
+  height: 15%;
   border-radius: 48% 48% 42% 42%;
 }
 
 .zone-face {
-  left: 37%;
-  top: 39.5%;
-  width: 25%;
-  height: 13%;
+  left: 38%;
+  top: 40%;
+  width: 24%;
+  height: 11.5%;
   border-radius: 50%;
   background: rgba(244, 114, 182, 0.1);
   border-color: rgba(244, 114, 182, 0.5);
 }
 
 .zone-left-hand {
-  left: 17%;
-  top: 65%;
-  width: 19%;
-  height: 17%;
+  left: 22%;
+  top: 68%;
+  width: 20%;
+  height: 16%;
   border-radius: 48% 42% 56% 44%;
 }
 
 .zone-right-hand {
-  left: 70%;
-  top: 67%;
-  width: 17%;
-  height: 17%;
+  left: 61%;
+  top: 68%;
+  width: 19%;
+  height: 16%;
   border-radius: 42% 54% 44% 56%;
 }
 
 .zone-body {
-  left: 36%;
-  top: 55%;
+  left: 37%;
+  top: 55.5%;
   width: 29%;
-  height: 15%;
+  height: 14%;
   border-radius: 38% 38% 48% 48%;
 }
 
 .zone-lower {
-  left: 31%;
-  top: 76%;
-  width: 38%;
-  height: 24%;
+  left: 38%;
+  top: 77%;
+  width: 30%;
+  height: 23%;
   border-radius: 46% 46% 24% 24%;
   background: rgba(251, 191, 36, 0.08);
   border-color: rgba(251, 191, 36, 0.45);
@@ -664,6 +700,30 @@ h1 {
   position: relative;
 }
 
+.formatted-ai-text {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  white-space: normal;
+}
+
+.ai-paragraph {
+  margin: 0;
+}
+
+.ai-list-item {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  gap: 8px;
+  align-items: start;
+}
+
+.ai-list-bullet {
+  color: var(--accent-hover);
+  font-weight: 700;
+  line-height: 1.5;
+}
+
 .user-message {
   transform-origin: bottom right;
 }
@@ -1058,6 +1118,8 @@ input:checked + .slider:before {
 
   .toggle-model-btn,
   .change-expression-btn,
+.accessory-cycle-btn,
+  .toggle-interaction-btn,
   .interaction-guide-btn {
     width: 34px;
     padding: 0;
@@ -1065,6 +1127,8 @@ input:checked + .slider:before {
 
   .toggle-model-btn span,
   .change-expression-btn span,
+.accessory-cycle-btn span,
+  .toggle-interaction-btn span,
   .interaction-guide-btn span {
     display: none;
   }