From 7a06f954fba9196b71745ae18a54d84e2a2648a2 Mon Sep 17 00:00:00 2001 From: "Rodrigo Rodriguez (Pragmatismo)" Date: Sat, 28 Feb 2026 11:20:40 -0300 Subject: [PATCH] fix: final pass of hardcoded CSS colors for seamless window manager theme support --- ui/suite/css/chat-agent-mode.css | 126 +++++++++++++++---------------- ui/suite/js/window-manager.js | 10 +-- ui/suite/partials/vibe.html | 94 +++++++++++------------ ui/suite/tasks/task-window.css | 108 +++++++++++++------------- 4 files changed, 169 insertions(+), 169 deletions(-) diff --git a/ui/suite/css/chat-agent-mode.css b/ui/suite/css/chat-agent-mode.css index 808205a..7faba1b 100644 --- a/ui/suite/css/chat-agent-mode.css +++ b/ui/suite/css/chat-agent-mode.css @@ -25,18 +25,18 @@ cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); background: transparent; - color: var(--text-secondary, #888); + color: var(--text-secondary, var(--text-muted)); letter-spacing: 0.3px; } .chat-mode-btn.active { - background: #84d669; - color: #fff; + background: var(--accent); + color: var(--bg); box-shadow: 0 2px 8px rgba(132, 214, 105, 0.3); } .chat-mode-btn:not(.active):hover { - color: var(--text, #fff); + color: var(--text, var(--bg)); background: var(--hover, rgba(255, 255, 255, 0.05)); } @@ -66,7 +66,7 @@ border: 1px solid var(--border, #2a2a2a); border-radius: 24px; background: var(--surface, #1a1a24); - color: var(--text, #fff); + color: var(--text, var(--bg)); font-family: 'Fira Code', monospace; font-size: 12px; font-weight: 500; @@ -76,7 +76,7 @@ } .quick-action-chip:hover { - border-color: #84d669; + border-color: var(--accent); background: rgba(132, 214, 105, 0.08); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(132, 214, 105, 0.15); @@ -109,7 +109,7 @@ grid-row: 1 / -1; grid-column: 1; background: #f8f8f8; - border-right: 1px solid #f0f1f2; + border-right: 1px solid var(--border); flex-direction: column; z-index: 50; } @@ -127,23 +127,23 @@ cursor: pointer; transition: all 0.15s ease; position: relative; - border-bottom: 1px solid #f0f1f2; + border-bottom: 1px solid var(--border); background: transparent; border-left: none; border-right: none; border-top: none; - color: #666; + color: var(--text-muted); } .agent-sidebar-item:hover { - background: #fff; - color: #3b3b3b; + background: var(--bg); + color: var(--text); } .agent-sidebar-item.active { - background: #fff; - border-left: 3px solid #84d669; - color: #3b3b3b; + background: var(--bg); + border-left: 3px solid var(--accent); + color: var(--text); } .agent-sidebar-badge { @@ -154,8 +154,8 @@ height: 16px; padding: 0 4px; border-radius: 8px; - background: #84d669; - color: #fff; + background: var(--accent); + color: var(--bg); font-size: 9px; font-weight: 700; display: flex; @@ -172,7 +172,7 @@ .agent-mode footer { grid-column: 2 / -1; padding: 8px 16px; - border-top: 1px solid #f0f1f2; + border-top: 1px solid var(--border); } /* ============================================ @@ -181,7 +181,7 @@ .thought-process { margin: 12px 0; - border: 1px solid var(--border, #e0e0e0); + border: 1px solid var(--border, var(--border)); border-radius: 8px; overflow: hidden; background: var(--surface, #f8f9fa); @@ -196,8 +196,8 @@ font-family: 'Fira Code', monospace; font-size: 12px; font-weight: 600; - color: var(--text, #3b3b3b); - background: var(--surface, #f0f1f2); + color: var(--text, var(--text)); + background: var(--surface, var(--border)); transition: background 0.15s; border: none; width: 100%; @@ -222,8 +222,8 @@ padding: 12px 14px; font-size: 13px; line-height: 1.6; - color: var(--text-secondary, #666); - border-top: 1px solid var(--border, #e0e0e0); + color: var(--text-secondary, var(--text-muted)); + border-top: 1px solid var(--border, var(--border)); } .thought-process.expanded .thought-process-body { @@ -238,9 +238,9 @@ display: none; grid-column: 3; grid-row: 1; - border-left: 1px solid #f0f1f2; + border-left: 1px solid var(--border); flex-direction: column; - background: #fff; + background: var(--bg); } .agent-mode .agent-browser-panel { @@ -253,27 +253,27 @@ gap: 8px; padding: 8px 12px; background: #f8f8f8; - border-bottom: 1px solid #f0f1f2; + border-bottom: 1px solid var(--border); font-family: 'Fira Code', monospace; font-size: 12px; font-weight: 600; - color: #3b3b3b; + color: var(--text); } .browser-url-bar { flex: 1; padding: 4px 10px; - background: #fff; - border: 1px solid #e0e0e0; + background: var(--bg); + border: 1px solid var(--border); border-radius: 4px; font-family: 'Fira Code', monospace; font-size: 11px; - color: #666; + color: var(--text-muted); } .browser-panel-content { flex: 1; - background: #fff; + background: var(--bg); } .browser-panel-content iframe { @@ -300,7 +300,7 @@ display: none; grid-column: 2; grid-row: 2; - border-top: 1px solid #f0f1f2; + border-top: 1px solid var(--border); flex-direction: column; max-height: 200px; min-height: 120px; @@ -320,7 +320,7 @@ font-family: 'Fira Code', monospace; font-size: 11px; font-weight: 600; - color: #84d669; + color: var(--accent); } .terminal-panel-content { @@ -355,8 +355,8 @@ display: none; grid-column: 3; grid-row: 2; - border-top: 1px solid #f0f1f2; - border-left: 1px solid #f0f1f2; + border-top: 1px solid var(--border); + border-left: 1px solid var(--border); padding: 12px 16px; background: #f8f8f8; flex-direction: column; @@ -374,14 +374,14 @@ font-family: 'Fira Code', monospace; font-size: 13px; font-weight: 600; - color: #3b3b3b; + color: var(--text); } .agent-info-dot { width: 8px; height: 8px; border-radius: 50%; - background: #84d669; + background: var(--accent); } .agent-level-badge { @@ -396,24 +396,24 @@ } .badge-evolved { - background: #84d669; - color: #fff; + background: var(--accent); + color: var(--bg); } .badge-bred { background: #f59e0b; - color: #fff; + color: var(--bg); } .badge-wild { background: #ef4444; - color: #fff; + color: var(--bg); } .agent-info-model { font-family: 'Fira Code', monospace; font-size: 11px; - color: #888; + color: var(--text-muted); } .agent-info-toggles { @@ -428,7 +428,7 @@ gap: 4px; font-family: 'Fira Code', monospace; font-size: 11px; - color: #666; + color: var(--text-muted); } .agent-toggle-switch { @@ -444,7 +444,7 @@ } .agent-toggle-switch.on { - background: #84d669; + background: var(--accent); } .agent-toggle-switch::after { @@ -455,7 +455,7 @@ width: 12px; height: 12px; border-radius: 50%; - background: #fff; + background: var(--bg); transition: transform 0.2s; } @@ -475,7 +475,7 @@ justify-content: space-between; padding: 8px 16px; background: #f8f8f8; - border-top: 1px solid #f0f1f2; + border-top: 1px solid var(--border); } .agent-mode .agent-step-bar { @@ -488,16 +488,16 @@ gap: 12px; font-family: 'Fira Code', monospace; font-size: 13px; - color: #3b3b3b; + color: var(--text); } .step-nav-btn { width: 28px; height: 28px; border-radius: 50%; - border: 1px solid #e0e0e0; - background: #fff; - color: #666; + border: 1px solid var(--border); + background: var(--bg); + color: var(--text-muted); cursor: pointer; display: flex; align-items: center; @@ -508,8 +508,8 @@ } .step-nav-btn:hover { - border-color: #84d669; - color: #84d669; + border-color: var(--accent); + color: var(--accent); } .step-action-btns { @@ -522,8 +522,8 @@ height: 36px; border-radius: 50%; border: none; - background: #84d669; - color: #fff; + background: var(--accent); + color: var(--bg); cursor: pointer; display: flex; align-items: center; @@ -544,7 +544,7 @@ .agent-todo-list { margin: 12px 0; - border: 1px solid var(--border, #e0e0e0); + border: 1px solid var(--border, var(--border)); border-radius: 8px; overflow: hidden; } @@ -554,16 +554,16 @@ align-items: center; gap: 8px; padding: 8px 14px; - background: var(--surface, #f0f1f2); + background: var(--surface, var(--border)); font-family: 'Fira Code', monospace; font-size: 12px; font-weight: 600; - color: var(--text, #3b3b3b); + color: var(--text, var(--text)); } .agent-todo-count { - background: #84d669; - color: #fff; + background: var(--accent); + color: var(--bg); padding: 1px 6px; border-radius: 10px; font-size: 10px; @@ -574,9 +574,9 @@ align-items: center; gap: 10px; padding: 8px 14px; - border-top: 1px solid var(--border, #e0e0e0); + border-top: 1px solid var(--border, var(--border)); font-size: 13px; - color: var(--text, #3b3b3b); + color: var(--text, var(--text)); transition: opacity 0.2s; } @@ -597,8 +597,8 @@ } .agent-todo-item.done .agent-todo-check { - background: #84d669; - border-color: #84d669; - color: #fff; + background: var(--accent); + border-color: var(--accent); + color: var(--bg); font-size: 10px; } diff --git a/ui/suite/js/window-manager.js b/ui/suite/js/window-manager.js index 99b5dff..8f6c39e 100644 --- a/ui/suite/js/window-manager.js +++ b/ui/suite/js/window-manager.js @@ -39,14 +39,14 @@ if (typeof window.WindowManager === 'undefined') { const top = 100 + offset; const left = 150 + offset; - windowEl.className = 'absolute w-[700px] h-[500px] rounded-lg shadow-2xl flex flex-col border border-gray-200 overflow-hidden window-element'; + windowEl.className = 'absolute w-[700px] h-[500px] rounded-lg shadow-2xl flex flex-col border overflow-hidden window-element'; windowEl.style.top = `${top}px`; windowEl.style.left = `${left}px`; windowEl.style.zIndex = this.zIndexCounter++; windowEl.innerHTML = ` -
+
${title}
@@ -70,7 +70,7 @@ if (typeof window.WindowManager === 'undefined') { if (this.taskbarApps) { const taskbarIcon = document.createElement('div'); taskbarIcon.id = `taskbar-item-${id}`; - taskbarIcon.className = 'h-10 w-12 flex items-center justify-center cursor-pointer bg-brand-50 rounded border-b-2 border-brand-500 transition-all taskbar-icon'; + taskbarIcon.className = 'h-10 w-12 flex items-center justify-center cursor-pointer rounded border-b-2 transition-all taskbar-icon'; taskbarIcon.onclick = () => this.toggleMinimize(id); let iconHtml = ''; @@ -113,13 +113,13 @@ if (typeof window.WindowManager === 'undefined') { if (this.taskbarApps) { const icons = this.taskbarApps.querySelectorAll('.taskbar-icon'); icons.forEach(icon => { - icon.classList.remove('border-brand-500'); + icon.classList.remove(''); icon.classList.add('border-transparent'); }); const activeIcon = document.getElementById(`taskbar-item-${id}`); if (activeIcon) { activeIcon.classList.remove('border-transparent'); - activeIcon.classList.add('border-brand-500'); + activeIcon.classList.add(''); } } } diff --git a/ui/suite/partials/vibe.html b/ui/suite/partials/vibe.html index 8061d1f..8ee6d7e 100644 --- a/ui/suite/partials/vibe.html +++ b/ui/suite/partials/vibe.html @@ -19,10 +19,10 @@

- 🌱 mantis farm + style="margin:0; font-size: 15px; color: var(--text); font-weight: 800; display: flex; align-items: center; gap: 8px;"> + 🌱 mantis farm

-
+
⌂ ◱
@@ -36,7 +36,7 @@
-
+
Mantis #1 @@ -100,7 +100,7 @@
@@ -139,14 +139,14 @@ style="background: var(--bg, #fdfdfd); background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 20px 20px; position:relative;">
- // DASHBOARD > // E-COMMERCE APP DEVELOPMENT + style="padding: 16px 24px; font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.8); backdrop-filter: blur(4px);"> + // DASHBOARD > // E-COMMERCE APP DEVELOPMENT
- 100% + style="border: 1px solid var(--border); background: var(--bg); border-radius: 4px; padding: 2px 8px; cursor:pointer;">- + 100% + style="border: 1px solid var(--border); background: var(--bg); border-radius: 4px; padding: 2px 8px; cursor:pointer;">+
@@ -160,26 +160,26 @@ style="flex:1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 60px; text-align: center;">
🌱

+ style="margin: 0; font-size: 22px; font-weight: 800; color: var(--text); font-family: 'Fira Code', monospace;"> Vibe — App Builder

-

+

Describe what you want to build in the chat. Mantis #1 will analyze your request, generate task nodes on this canvas, and build the entire application for you.

@@ -187,23 +187,23 @@
+ style="position: absolute; bottom: 24px; right: 24px; width: 380px; background: var(--surface); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); color: var(--bg); z-index: 100;">
+ style="box-shadow: 0 0 8px var(--accent);"> Mantis #1
CONNECTING… + style="font-size: 10px; color: var(--text-muted); background: #333; padding: 2px 6px; border-radius: 4px;">CONNECTING…
+ style="align-self: center; background: rgba(132,214,105,0.12); color: var(--accent); padding: 8px 14px; border-radius: 8px; font-size: 11px; text-align: center;"> đź’ˇ TIP: Describe your project. The more detail, the better the plan.
@@ -211,11 +211,11 @@
- 📎 + 📎 + style="flex: 1; background: transparent; border: none; color: var(--bg); font-size: 13px; outline: none; font-family: 'Segoe UI', system-ui, sans-serif;" /> + style="background: var(--accent); color: var(--surface); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; font-weight: bold; border: none;">↑
@@ -262,10 +262,10 @@ if (!box) return; var div = document.createElement("div"); if (role === "user") { - div.style.cssText = "align-self:flex-end;background:var(--accent, #84d669);color:var(--surface);font-weight:500;padding:10px 14px;border-radius:12px 12px 0 12px;max-width:85%;word-wrap:break-word;"; + div.style.cssText = "align-self:flex-end;background:var(--accent);color:var(--surface);font-weight:500;padding:10px 14px;border-radius:12px 12px 0 12px;max-width:85%;word-wrap:break-word;"; div.textContent = text; } else if (role === "system") { - div.style.cssText = "align-self:center;background:rgba(132,214,105,0.12);color: var(--accent, #84d669);padding:6px 12px;border-radius:8px;font-size:11px;text-align:center;"; + div.style.cssText = "align-self:center;background:rgba(132,214,105,0.12);color: var(--accent);padding:6px 12px;border-radius:8px;font-size:11px;text-align:center;"; div.innerHTML = text; } else { div.style.cssText = "align-self:flex-start;background: var(--border);color:#ececec;padding:10px 14px;border-radius:12px 12px 12px 0;max-width:85%;word-wrap:break-word;"; @@ -322,14 +322,14 @@ var dot = document.getElementById("vibeChatStatusDot"); var badge = document.getElementById("vibeChatStatusBadge"); if (status === "connected") { - if (dot) { dot.className = "as-status-dot green"; dot.style.boxShadow = "0 0 8px var(--accent, #84d669)"; } - if (badge) { badge.textContent = "EVOLVED"; badge.style.background = "var(--accent, #84d669)"; badge.style.color = "var(--bg, #fff)"; } + if (dot) { dot.className = "as-status-dot green"; dot.style.boxShadow = "0 0 8px var(--accent)"; } + if (badge) { badge.textContent = "EVOLVED"; badge.style.background = "var(--accent)"; badge.style.color = "var(--bg)"; } } else if (status === "connecting") { if (dot) { dot.className = "as-status-dot yellow"; dot.style.boxShadow = "0 0 8px #f59e0b"; } - if (badge) { badge.textContent = "CONNECTING…"; badge.style.background = "#333"; badge.style.color = "var(--text-muted, #888)"; } + if (badge) { badge.textContent = "CONNECTING…"; badge.style.background = "#333"; badge.style.color = "var(--text-muted)"; } } else { if (dot) { dot.className = "as-status-dot red"; dot.style.boxShadow = "0 0 8px #ef4444"; } - if (badge) { badge.textContent = "OFFLINE"; badge.style.background = "#333"; badge.style.color = "var(--text-muted, #888)"; } + if (badge) { badge.textContent = "OFFLINE"; badge.style.background = "#333"; badge.style.color = "var(--text-muted)"; } } } @@ -347,7 +347,7 @@ card.appendChild(barWrapper); } } else if (status === "done") { - card.style.borderLeftColor = "var(--accent, #84d669)"; + card.style.borderLeftColor = "var(--accent)"; bar = card.querySelector(".as-bar-fill"); if (bar) bar.style.width = "100%"; setTimeout(function () { @@ -375,41 +375,41 @@ var isFirst = stepsContainer.children.length === 0; var nodeId = "vibe-node-" + nodeIdCounter; - var statusBg = status === "Done" ? "var(--accent, #84d669)" : (status === "Planning" ? "var(--success-light, #eef8eb)" : "var(--warning-light, var(--bg, #fff)3cd)"); - var statusColor = status === "Done" ? "var(--bg, #fff)" : (status === "Planning" ? "var(--accent, #84d669)" : "var(--warning, #856404)"); + var statusBg = status === "Done" ? "var(--accent)" : (status === "Planning" ? "var(--success-light, #eef8eb)" : "var(--warning-light, var(--bg)3cd)"); + var statusColor = status === "Done" ? "var(--bg)" : (status === "Planning" ? "var(--accent)" : "var(--warning, #856404)"); var subTasksHtml = ""; if (fileList.length > 0) { subTasksHtml = ''; } var node = document.createElement("div"); node.className = "vibe-task-node"; - node.style.cssText = "background: var(--bg, #fff);border:" + (isFirst ? "2px solid var(--accent, #84d669)" : "1px solid var(--border)") + ";border-radius:8px;width:280px;box-shadow:0 " + (isFirst ? "4" : "2") + "px 12px rgba(" + (isFirst ? "132,214,105,0.15" : "0,0,0,0.05") + ");position:relative;flex-shrink:0;animation:nodeIn 0.4s ease;"; + node.style.cssText = "background: var(--bg);border:" + (isFirst ? "2px solid var(--accent)" : "1px solid var(--border)") + ";border-radius:8px;width:280px;box-shadow:0 " + (isFirst ? "4" : "2") + "px 12px rgba(" + (isFirst ? "132,214,105,0.15" : "0,0,0,0.05") + ");position:relative;flex-shrink:0;animation:nodeIn 0.4s ease;"; node.innerHTML = '
' + - '
' + + '
' + '' + fileCount + ' files' + time + '' + tokens + '' + '
' + - '

' + esc(title) + '

' + - '

' + esc(description) + '

' + + '

' + esc(title) + '

' + + '

' + esc(description) + '

' + '
' + '
' + '
' + - 'Status' + + 'Status' + '' + esc(status) + '' + '
' + '
' + - 'Mantis Manager' + + 'Mantis Manager' + ' Mantis #1' + '
' + '
' + - '
' + + '
' + '
// SUB-TASKS â–¶
' + '
// LOGS â–¶
' + '
' + @@ -417,11 +417,11 @@ if (isFirst || stepsContainer.children.length > 0) { var line = document.createElement("div"); - line.style.cssText = "position:absolute;right:-60px;top:50%;width:60px;height:2px;background:var(--accent, #84d669);z-index:10;"; + line.style.cssText = "position:absolute;right:-60px;top:50%;width:60px;height:2px;background:var(--accent);z-index:10;"; node.appendChild(line); if (!isFirst) { var dot = document.createElement("div"); - dot.style.cssText = "position:absolute;left:-5px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:var(--accent, #84d669);z-index:20;"; + dot.style.cssText = "position:absolute;left:-5px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:var(--accent);z-index:20;"; node.appendChild(dot); } } @@ -444,7 +444,7 @@ var breadcrumb = document.querySelector(".vibe-canvas div:first-child"); if (breadcrumb) { currentProject = intent.substring(0, 40).replace(/[^a-zA-Z0-9 ]/g, ""); - breadcrumb.innerHTML = '// DASHBOARD > // ' + esc(currentProject.toUpperCase()) + '
100%
'; + breadcrumb.innerHTML = '// DASHBOARD > // ' + esc(currentProject.toUpperCase()) + '
100%
'; } fetch("/api/autotask/classify", { @@ -482,7 +482,7 @@ vibeAddMsg("bot", r.message || "Done! Your project is ready."); if (r.app_url) { - vibeAddMsg("system", 'âś… App available at ' + esc(r.app_url) + ''); + vibeAddMsg("system", 'âś… App available at ' + esc(r.app_url) + ''); var preview = document.getElementById("vibePreview"); var urlBar = document.getElementById("vibePreviewUrl"); @@ -725,7 +725,7 @@ card.appendChild(barWrapper); } } else if (status === "EVOLVED" || status === "DONE") { - card.style.borderLeft = "3px solid var(--accent, #84d669)"; + card.style.borderLeft = "3px solid var(--accent)"; if (dot) { dot.className = "as-status-dot green"; } if (badge) { badge.textContent = "EVOLVED"; badge.className = "as-badge badge-evolved"; } var agBar = card.querySelector(".as-bar-fill"); @@ -749,7 +749,7 @@ if (!detailEl) { detailEl = document.createElement("span"); detailEl.className = "as-agent-detail"; - detailEl.style.cssText = "font-size:10px;color: var(--text-muted, #666);display:block;padding:0 12px 4px;"; + detailEl.style.cssText = "font-size:10px;color: var(--text-muted);display:block;padding:0 12px 4px;"; var body = card.querySelector(".as-agent-body"); if (body) body.after(detailEl); } @@ -866,8 +866,8 @@ } .vibe-quick-btn:hover { - border-color: var(--accent, #84d669) !important; - color: var(--accent, #84d669) !important; + border-color: var(--accent) !important; + color: var(--accent) !important; background: rgba(132, 214, 105, 0.06) !important; transform: translateY(-2px); } diff --git a/ui/suite/tasks/task-window.css b/ui/suite/tasks/task-window.css index 56f4cf7..2043684 100644 --- a/ui/suite/tasks/task-window.css +++ b/ui/suite/tasks/task-window.css @@ -4,7 +4,7 @@ display: flex; flex-direction: column; height: 100%; - background: var(--bg, #fff); + background: var(--bg); font-family: 'Fira Code', monospace; } @@ -14,8 +14,8 @@ .tw-tabs-header { display: flex; - background: var(--surface, #f8f8f8); - border-bottom: 1px solid var(--border, #f0f1f2); + background: var(--surface); + border-bottom: 1px solid var(--border); min-height: 34px; overflow-x: auto; } @@ -25,12 +25,12 @@ min-width: 140px; padding: 0 18px; border: none; - border-right: 1px solid var(--border, #f0f1f2); + border-right: 1px solid var(--border); background: transparent; font-family: 'Fira Code', monospace; font-size: 12px; font-weight: 600; - color: var(--text, #3b3b3b); + color: var(--text); cursor: pointer; display: flex; align-items: center; @@ -40,12 +40,12 @@ } .tw-tab:hover { - background: var(--bg, #fff); + background: var(--bg); } .tw-tab.active { - background: var(--accent, #84d669); - color: var(--bg, #fff); + background: var(--accent); + color: var(--bg); } .tw-tab-prefix { @@ -69,20 +69,20 @@ .tw-pipeline-tabs { display: flex; - background: var(--surface, #f8f8f8); - border-bottom: 1px solid var(--border, #f0f1f2); + background: var(--surface); + border-bottom: 1px solid var(--border); } .tw-pipeline-tab { flex: 1; height: 32px; border: none; - border-right: 1px solid var(--border, #f0f1f2); + border-right: 1px solid var(--border); background: transparent; font-family: 'Fira Code', monospace; font-size: 11px; font-weight: 500; - color: var(--text-muted, #888); + color: var(--text-muted); cursor: pointer; transition: all 0.15s; } @@ -92,13 +92,13 @@ } .tw-pipeline-tab:hover { - background: var(--bg, #fff); - color: var(--text, #3b3b3b); + background: var(--bg); + color: var(--text); } .tw-pipeline-tab.active { - background: var(--accent, #84d669); - color: var(--bg, #fff); + background: var(--accent); + color: var(--bg); } /* ============================================ @@ -109,7 +109,7 @@ display: flex; gap: 8px; padding: 12px 16px; - border-bottom: 1px solid var(--border, #f0f1f2); + border-bottom: 1px solid var(--border); } .tw-filter-chip { @@ -117,26 +117,26 @@ align-items: center; gap: 4px; padding: 5px 12px; - border: 1px solid var(--border, #e0e0e0); + border: 1px solid var(--border); border-radius: 16px; - background: var(--bg, #fff); + background: var(--bg); font-family: 'Fira Code', monospace; font-size: 11px; font-weight: 500; - color: var(--text-muted, #666); + color: var(--text-muted); cursor: pointer; transition: all 0.15s; } .tw-filter-chip:hover { - border-color: var(--accent, #84d669); - color: var(--text, #3b3b3b); + border-color: var(--accent); + color: var(--text); } .tw-filter-chip.active { - background: var(--accent, #84d669); - color: var(--bg, #fff); - border-color: var(--accent, #84d669); + background: var(--accent); + color: var(--bg); + border-color: var(--accent); } .tw-filter-icon { @@ -151,37 +151,37 @@ display: flex; gap: 8px; padding: 12px 16px; - border-bottom: 1px solid var(--border, #f0f1f2); + border-bottom: 1px solid var(--border); } .tw-intent-input { flex: 1; padding: 8px 14px; - border: 1px solid var(--border, #e0e0e0); + border: 1px solid var(--border); border-radius: 6px; font-family: 'Fira Code', monospace; font-size: 13px; - color: var(--text, #3b3b3b); + color: var(--text); outline: none; transition: border-color 0.15s; - background: var(--bg, #fff); + background: var(--bg); } .tw-intent-input:focus { - border-color: var(--accent, #84d669); + border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light, rgba(132, 214, 105, 0.15)); } .tw-intent-input::placeholder { - color: var(--text-muted, #bbb); + color: var(--text-muted); } .tw-intent-run { padding: 8px 20px; border: none; border-radius: 6px; - background: var(--accent, #84d669); - color: var(--bg, #fff); + background: var(--accent); + color: var(--bg); font-family: 'Fira Code', monospace; font-size: 12px; font-weight: 700; @@ -215,14 +215,14 @@ .tw-task-list { width: 280px; min-width: 200px; - border-right: 1px solid var(--border, #f0f1f2); + border-right: 1px solid var(--border); overflow-y: auto; } .tw-task-list-empty { padding: 24px 16px; text-align: center; - color: var(--text-muted, #bbb); + color: var(--text-muted); font-size: 13px; } @@ -239,7 +239,7 @@ justify-content: center; height: 100%; text-align: center; - color: var(--text-muted, #888); + color: var(--text-muted); gap: 8px; } @@ -250,7 +250,7 @@ .tw-hint { font-size: 12px; - color: var(--text-muted, #bbb); + color: var(--text-muted); } /* ============================================ @@ -262,18 +262,18 @@ align-items: center; gap: 10px; padding: 10px 16px; - border-bottom: 1px solid var(--border, #f0f1f2); + border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; } .tw-task-item:hover { - background: var(--surface, #f8f8f8); + background: var(--surface); } .tw-task-item.active { background: var(--accent-light, rgba(132, 214, 105, 0.08)); - border-left: 3px solid var(--accent, #84d669); + border-left: 3px solid var(--accent); } .tw-task-status-dot { @@ -284,7 +284,7 @@ } .tw-task-status-dot.running { - background: var(--accent, #84d669); + background: var(--accent); } .tw-task-status-dot.pending { @@ -300,7 +300,7 @@ } .tw-task-status-dot.paused { - background: var(--text-muted, #888); + background: var(--text-muted); } .tw-task-item-info { @@ -311,7 +311,7 @@ .tw-task-item-name { font-size: 12px; font-weight: 600; - color: var(--text, #3b3b3b); + color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -319,7 +319,7 @@ .tw-task-item-type { font-size: 10px; - color: var(--text-muted, #888); + color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } @@ -338,18 +338,18 @@ gap: 16px; margin-bottom: 24px; padding-bottom: 16px; - border-bottom: 1px solid var(--border, #f0f1f2); + border-bottom: 1px solid var(--border); } .tw-agent-avatar { width: 48px; height: 48px; border-radius: 50%; - background: var(--accent, #84d669); + background: var(--accent); display: flex; align-items: center; justify-content: center; - color: var(--bg, #fff); + color: var(--bg); font-size: 20px; font-weight: 700; } @@ -361,13 +361,13 @@ .tw-agent-title { font-size: 16px; font-weight: 700; - color: var(--text, #3b3b3b); + color: var(--text); margin: 0 0 4px 0; } .tw-agent-subtitle { font-size: 12px; - color: var(--text-muted, #888); + color: var(--text-muted); } .tw-section { @@ -377,7 +377,7 @@ .tw-section-title { font-size: 11px; font-weight: 700; - color: var(--text-muted, #888); + color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; @@ -391,20 +391,20 @@ .tw-stat-card { padding: 12px; - background: var(--surface, #f8f8f8); + background: var(--surface); border-radius: 8px; - border: 1px solid #f0f1f2; + border: 1px solid var(--border); } .tw-stat-value { font-size: 18px; font-weight: 700; - color: var(--text, #3b3b3b); + color: var(--text); } .tw-stat-label { font-size: 10px; - color: var(--text-muted, #888); + color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px;