fix: final pass of hardcoded CSS colors for seamless window manager theme support
This commit is contained in:
parent
8075f9701c
commit
7a06f954fb
4 changed files with 169 additions and 169 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = `
|
||||
<!-- Header (Draggable) -->
|
||||
<div class="window-header h-10 bg-white/95 backdrop-blur flex items-center justify-between px-4 border-b border-gray-200 select-none cursor-move">
|
||||
<div class="window-header h-10 backdrop-blur flex items-center justify-between px-4 border-b select-none cursor-move">
|
||||
<div class="font-mono text-xs font-bold text-brand-600 tracking-wide">${title}</div>
|
||||
<div class="flex space-x-3 text-gray-400">
|
||||
<button class="btn-minimize hover:text-gray-600" onclick="window.WindowManager.toggleMinimize('${id}')"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line></svg></button>
|
||||
|
|
@ -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 = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>';
|
||||
|
|
@ -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('');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,10 +19,10 @@
|
|||
<div class="as-logo-section"
|
||||
style="padding: 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between;">
|
||||
<h2
|
||||
style="margin:0; font-size: 15px; color: var(--text, #3b3b3b); font-weight: 800; display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 18px; color: var(--accent, #84d669);">🌱</span> mantis farm
|
||||
style="margin:0; font-size: 15px; color: var(--text); font-weight: 800; display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 18px; color: var(--accent);">🌱</span> mantis farm
|
||||
</h2>
|
||||
<div style="display:flex; gap: 12px; color: var(--text-muted, #888); font-size: 14px;">
|
||||
<div style="display:flex; gap: 12px; color: var(--text-muted); font-size: 14px;">
|
||||
<span style="cursor:pointer;" title="Home">⌂</span>
|
||||
<span style="cursor:pointer;" title="Overview">◱</span>
|
||||
</div>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
|
||||
<div class="as-agent-list" id="asAgentList">
|
||||
<!-- Mantis #1 EVOLVED -->
|
||||
<div class="as-agent-card" data-agent-id="1" style="border-left: 3px solid var(--accent, #84d669);">
|
||||
<div class="as-agent-card" data-agent-id="1" style="border-left: 3px solid var(--accent);">
|
||||
<div class="as-agent-header">
|
||||
<span class="as-status-dot green"></span>
|
||||
<span class="as-agent-name">Mantis #1</span>
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
<div class="as-workspace-list" id="asWorkspaceList">
|
||||
<div class="as-workspace-item">
|
||||
<button class="as-workspace-toggle" type="button"
|
||||
style="background: var(--bg, #fff); border-left: 3px solid var(--accent, #84d669);">
|
||||
style="background: var(--bg); border-left: 3px solid var(--accent);">
|
||||
<span class="as-workspace-arrow">▼</span>
|
||||
<span>E-Commerce App Development</span>
|
||||
</button>
|
||||
|
|
@ -139,14 +139,14 @@
|
|||
style="background: var(--bg, #fdfdfd); background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 20px 20px; position:relative;">
|
||||
|
||||
<div
|
||||
style="padding: 16px 24px; font-size: 11px; color: var(--text-muted, #888); 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 <span style="color: var(--text-secondary, #ccc); margin:0 6px;">></span> // 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 <span style="color: var(--text-secondary); margin:0 6px;">></span> // E-COMMERCE APP DEVELOPMENT
|
||||
<div style="float: right;">
|
||||
<button
|
||||
style="border: 1px solid var(--border, #e0e0e0); background: var(--bg, #fff); border-radius: 4px; padding: 2px 8px; cursor:pointer;">-</button>
|
||||
<span style="font-size: 11px; margin: 0 8px; color: var(--text, #333);">100%</span>
|
||||
style="border: 1px solid var(--border); background: var(--bg); border-radius: 4px; padding: 2px 8px; cursor:pointer;">-</button>
|
||||
<span style="font-size: 11px; margin: 0 8px; color: var(--text);">100%</span>
|
||||
<button
|
||||
style="border: 1px solid var(--border, #e0e0e0); background: var(--bg, #fff); border-radius: 4px; padding: 2px 8px; cursor:pointer;">+</button>
|
||||
style="border: 1px solid var(--border); background: var(--bg); border-radius: 4px; padding: 2px 8px; cursor:pointer;">+</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -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;">
|
||||
<div style="font-size: 56px; animation: float 3s ease-in-out infinite;">🌱</div>
|
||||
<h3
|
||||
style="margin: 0; font-size: 22px; font-weight: 800; color: var(--text, #3b3b3b); font-family: 'Fira Code', monospace;">
|
||||
style="margin: 0; font-size: 22px; font-weight: 800; color: var(--text); font-family: 'Fira Code', monospace;">
|
||||
Vibe — App Builder</h3>
|
||||
<p style="margin: 0; font-size: 14px; color: var(--text-muted, #888); max-width: 440px; line-height: 1.6;">
|
||||
<p style="margin: 0; font-size: 14px; color: var(--text-muted); max-width: 440px; line-height: 1.6;">
|
||||
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.
|
||||
</p>
|
||||
<div style="display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px;">
|
||||
<button class="vibe-quick-btn" type="button"
|
||||
onclick="document.getElementById('vibeChatInput').value='Create an e-commerce app for selling handmade crafts with shopping cart and payments'; document.getElementById('vibeChatInput').focus();"
|
||||
style="padding: 8px 16px; border: 1px solid var(--border, #e0e0e0); border-radius: 20px; background: var(--bg, #fff); font-size: 12px; cursor: pointer; color: var(--text-muted, #666); transition: all 0.15s; font-family: 'Fira Code', monospace;">
|
||||
style="padding: 8px 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg); font-size: 12px; cursor: pointer; color: var(--text-muted); transition: all 0.15s; font-family: 'Fira Code', monospace;">
|
||||
🛍️ E-Commerce App
|
||||
</button>
|
||||
<button class="vibe-quick-btn" type="button"
|
||||
onclick="document.getElementById('vibeChatInput').value='Build a CRM system with contacts, leads, and deal pipeline tracking'; document.getElementById('vibeChatInput').focus();"
|
||||
style="padding: 8px 16px; border: 1px solid var(--border, #e0e0e0); border-radius: 20px; background: var(--bg, #fff); font-size: 12px; cursor: pointer; color: var(--text-muted, #666); transition: all 0.15s; font-family: 'Fira Code', monospace;">
|
||||
style="padding: 8px 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg); font-size: 12px; cursor: pointer; color: var(--text-muted); transition: all 0.15s; font-family: 'Fira Code', monospace;">
|
||||
📇 CRM System
|
||||
</button>
|
||||
<button class="vibe-quick-btn" type="button"
|
||||
onclick="document.getElementById('vibeChatInput').value='Create a project management dashboard with tasks, Kanban board, and team assignments'; document.getElementById('vibeChatInput').focus();"
|
||||
style="padding: 8px 16px; border: 1px solid var(--border, #e0e0e0); border-radius: 20px; background: var(--bg, #fff); font-size: 12px; cursor: pointer; color: var(--text-muted, #666); transition: all 0.15s; font-family: 'Fira Code', monospace;">
|
||||
style="padding: 8px 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg); font-size: 12px; cursor: pointer; color: var(--text-muted); transition: all 0.15s; font-family: 'Fira Code', monospace;">
|
||||
📊 Project Manager
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -187,23 +187,23 @@
|
|||
|
||||
<!-- Vibe Chat Overlay (LIVE) -->
|
||||
<div id="vibeChatOverlay"
|
||||
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, #fff); z-index: 100;">
|
||||
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;">
|
||||
<div
|
||||
style="padding: 12px 16px; background: var(--surface-hover); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span class="as-status-dot green" id="vibeChatStatusDot"
|
||||
style="box-shadow: 0 0 8px var(--accent, #84d669);"></span>
|
||||
style="box-shadow: 0 0 8px var(--accent);"></span>
|
||||
<span style="font-size: 12px; font-weight: 600;">Mantis #1</span>
|
||||
</div>
|
||||
<span id="vibeChatStatusBadge"
|
||||
style="font-size: 10px; color: var(--text-muted, #888); background: #333; padding: 2px 6px; border-radius: 4px;">CONNECTING…</span>
|
||||
style="font-size: 10px; color: var(--text-muted); background: #333; padding: 2px 6px; border-radius: 4px;">CONNECTING…</span>
|
||||
</div>
|
||||
|
||||
<div id="vibeChatMessages"
|
||||
style="padding: 16px; display: flex; flex-direction: column; gap: 12px; font-size: 12px; line-height: 1.5; min-height: 220px; max-height: 350px; overflow-y: auto; font-family: 'Segoe UI', system-ui, sans-serif;">
|
||||
<!-- Welcome hint -->
|
||||
<div
|
||||
style="align-self: center; background: rgba(132,214,105,0.12); color: var(--accent, #84d669); padding: 8px 14px; border-radius: 8px; font-size: 11px; text-align: center;">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -211,11 +211,11 @@
|
|||
<div style="padding: 12px; border-top: 1px solid var(--border); background: var(--surface);">
|
||||
<form id="vibeChatForm" autocomplete="off"
|
||||
style="display: flex; align-items: center; gap: 8px; background: var(--surface-hover); padding: 8px 12px; border-radius: 20px; border: 1px solid #333;">
|
||||
<span style="color: var(--text-muted, #888); cursor: pointer; transform: rotate(-45deg);">📎</span>
|
||||
<span style="color: var(--text-muted); cursor: pointer; transform: rotate(-45deg);">📎</span>
|
||||
<input type="text" id="vibeChatInput" placeholder="Describe your project…"
|
||||
style="flex: 1; background: transparent; border: none; color: var(--bg, #fff); font-size: 13px; outline: none; font-family: 'Segoe UI', system-ui, sans-serif;" />
|
||||
style="flex: 1; background: transparent; border: none; color: var(--bg); font-size: 13px; outline: none; font-family: 'Segoe UI', system-ui, sans-serif;" />
|
||||
<button type="submit" id="vibeChatSend"
|
||||
style="background: var(--accent, #84d669); 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;">↑</button>
|
||||
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;">↑</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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 = '<div id="' + nodeId + '-files" style="display:none;padding:8px 16px;border-top:1px solid var(--border);font-size:10px;color:var(--text-muted, #555);">';
|
||||
for (var fi = 0; fi < fileList.length; fi++) {
|
||||
subTasksHtml += '<div style="padding:2px 0;display:flex;align-items:center;gap:4px;"><span style="color: var(--accent, #84d669);">📄</span> ' + esc(fileList[fi]) + '</div>';
|
||||
subTasksHtml += '<div style="padding:2px 0;display:flex;align-items:center;gap:4px;"><span style="color: var(--accent);">📄</span> ' + esc(fileList[fi]) + '</div>';
|
||||
}
|
||||
subTasksHtml += '</div>';
|
||||
}
|
||||
|
||||
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 =
|
||||
'<div style="padding:12px 16px;border-bottom: 1px solid var(--border);">' +
|
||||
'<div style="display:flex;justify-content:space-between;margin-bottom:8px;font-size:10px;color: var(--text-muted, #888);">' +
|
||||
'<div style="display:flex;justify-content:space-between;margin-bottom:8px;font-size:10px;color: var(--text-muted);">' +
|
||||
'<span>' + fileCount + ' files</span><span>' + time + '</span><span>' + tokens + '</span>' +
|
||||
'</div>' +
|
||||
'<h4 style="margin:0 0 8px 0;font-size:14px;color: var(--text, #3b3b3b);font-weight:700;">' + esc(title) + '</h4>' +
|
||||
'<p style="margin:0;font-size:11px;color: var(--text-muted, #666);line-height:1.4;">' + esc(description) + '</p>' +
|
||||
'<h4 style="margin:0 0 8px 0;font-size:14px;color: var(--text);font-weight:700;">' + esc(title) + '</h4>' +
|
||||
'<p style="margin:0;font-size:11px;color: var(--text-muted);line-height:1.4;">' + esc(description) + '</p>' +
|
||||
'</div>' +
|
||||
'<div style="padding:10px 16px;background: var(--surface);border-bottom: 1px solid var(--border);font-size:11px;">' +
|
||||
'<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">' +
|
||||
'<span style="color: var(--text-muted, #888);">Status</span>' +
|
||||
'<span style="color: var(--text-muted);">Status</span>' +
|
||||
'<span style="background:' + statusBg + ';color:' + statusColor + ';padding:2px 8px;border-radius:12px;font-weight:600;">' + esc(status) + '</span>' +
|
||||
'</div>' +
|
||||
'<div style="display:flex;justify-content:space-between;align-items:center;">' +
|
||||
'<span style="color: var(--text-muted, #888);">Mantis Manager</span>' +
|
||||
'<span style="color: var(--text-muted);">Mantis Manager</span>' +
|
||||
'<span style="display:flex;align-items:center;gap:4px;"><span class="as-status-dot green"></span> Mantis #1</span>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div style="padding:8px 16px;font-size:10px;font-weight:700;color: var(--text-muted, #888);">' +
|
||||
'<div style="padding:8px 16px;font-size:10px;font-weight:700;color: var(--text-muted);">' +
|
||||
'<div data-toggle="' + nodeId + '-files" style="padding:4px 0;cursor:pointer;user-select:none;" onclick="(function(el){var t=document.getElementById(el.getAttribute(\'data-toggle\'));if(t){t.style.display=t.style.display===\'none\'?\'\':\'none\';var a=el.querySelector(\'span\');if(a)a.textContent=t.style.display===\'none\'?\'▶\':\'▼\';}})(this)">// SUB-TASKS <span style="float:right;">▶</span></div>' +
|
||||
'<div style="padding:4px 0;cursor:pointer;">// LOGS <span style="float:right;">▶</span></div>' +
|
||||
'</div>' +
|
||||
|
|
@ -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 <span style="color: var(--text-secondary, #ccc);margin:0 6px;">></span> // ' + esc(currentProject.toUpperCase()) + ' <div style="float:right;"><button style="border: 1px solid var(--border, #e0e0e0);background: var(--bg, #fff);border-radius:4px;padding:2px 8px;cursor:pointer;">-</button><span style="font-size:11px;margin:0 8px;color: var(--text, #333);">100%</span><button style="border: 1px solid var(--border, #e0e0e0);background: var(--bg, #fff);border-radius:4px;padding:2px 8px;cursor:pointer;">+</button></div>';
|
||||
breadcrumb.innerHTML = '// DASHBOARD <span style="color: var(--text-secondary);margin:0 6px;">></span> // ' + esc(currentProject.toUpperCase()) + ' <div style="float:right;"><button style="border: 1px solid var(--border);background: var(--bg);border-radius:4px;padding:2px 8px;cursor:pointer;">-</button><span style="font-size:11px;margin:0 8px;color: var(--text);">100%</span><button style="border: 1px solid var(--border);background: var(--bg);border-radius:4px;padding:2px 8px;cursor:pointer;">+</button></div>';
|
||||
}
|
||||
|
||||
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 <a href="' + r.app_url + '" target="_blank" style="color: var(--accent, #84d669);text-decoration:underline;">' + esc(r.app_url) + '</a>');
|
||||
vibeAddMsg("system", '✅ App available at <a href="' + r.app_url + '" target="_blank" style="color: var(--accent);text-decoration:underline;">' + esc(r.app_url) + '</a>');
|
||||
|
||||
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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue