fix: make suite UI elements fully themable and resolve black frame on desktop-inner
This commit is contained in:
parent
afb13cb397
commit
9444d3892c
11 changed files with 1316 additions and 687 deletions
|
|
@ -140,7 +140,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -168,7 +168,7 @@
|
|||
max-width: 1400px;
|
||||
height: 90%;
|
||||
max-height: 900px;
|
||||
background: #1a1a1a;
|
||||
background: var(--bg, #1a1a1a);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -190,8 +190,8 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
background: #252525;
|
||||
border-bottom: 1px solid #333;
|
||||
background: var(--surface, #252525);
|
||||
border-bottom: 1px solid var(--border, #333);
|
||||
}
|
||||
|
||||
.projector-title-section {
|
||||
|
|
@ -205,7 +205,7 @@
|
|||
}
|
||||
|
||||
.projector-title {
|
||||
color: #fff;
|
||||
color: var(--text, #fff);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
max-width: 400px;
|
||||
|
|
@ -222,7 +222,7 @@
|
|||
.projector-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #aaa;
|
||||
color: var(--text-muted, #aaa);
|
||||
font-size: 18px;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
|
|
@ -231,13 +231,13 @@
|
|||
}
|
||||
|
||||
.projector-btn:hover {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
background: var(--surface-hover, #333);
|
||||
color: var(--text, #fff);
|
||||
}
|
||||
|
||||
.projector-btn.close-btn:hover {
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
background: var(--error, #e74c3c);
|
||||
color: var(--text, #fff);
|
||||
}
|
||||
|
||||
/* Content Area */
|
||||
|
|
@ -248,7 +248,7 @@
|
|||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #000;
|
||||
background: var(--bg, #000);
|
||||
}
|
||||
|
||||
/* Loading */
|
||||
|
|
@ -257,7 +257,7 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: #888;
|
||||
color: var(--text-muted, #888);
|
||||
}
|
||||
|
||||
.projector-loading.hidden {
|
||||
|
|
@ -267,8 +267,8 @@
|
|||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid #333;
|
||||
border-top-color: #667eea;
|
||||
border: 3px solid var(--surface-hover, #333);
|
||||
border-top-color: var(--accent, #667eea);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
|
@ -321,7 +321,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background: #1e1e1e;
|
||||
background: var(--bg, #1e1e1e);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -330,7 +330,7 @@
|
|||
font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #d4d4d4;
|
||||
color: var(--text, #d4d4d4);
|
||||
}
|
||||
|
||||
.projector-code.line-numbers pre {
|
||||
|
|
@ -343,7 +343,7 @@
|
|||
display: inline-block;
|
||||
width: 40px;
|
||||
padding-right: 20px;
|
||||
color: #666;
|
||||
color: var(--text-muted, #666);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
|
@ -357,7 +357,7 @@
|
|||
}
|
||||
|
||||
.slide-container {
|
||||
background: #fff;
|
||||
background: var(--bg, #fff);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
aspect-ratio: 16/9;
|
||||
max-width: 90%;
|
||||
|
|
@ -379,7 +379,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
background: #fff;
|
||||
background: var(--bg, #fff);
|
||||
}
|
||||
|
||||
/* Markdown Viewer */
|
||||
|
|
@ -388,20 +388,20 @@
|
|||
height: 100%;
|
||||
overflow: auto;
|
||||
padding: 40px;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
background: var(--bg, #fff);
|
||||
color: var(--text, #333);
|
||||
}
|
||||
|
||||
.projector-markdown h1,
|
||||
.projector-markdown h2,
|
||||
.projector-markdown h3 {
|
||||
color: #1a1a1a;
|
||||
color: var(--text, #1a1a1a);
|
||||
margin-top: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.projector-markdown code {
|
||||
background: #f0f0f0;
|
||||
background: var(--surface, #f0f0f0);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
|
|
@ -416,8 +416,8 @@
|
|||
/* Controls */
|
||||
.projector-controls {
|
||||
padding: 12px 20px;
|
||||
background: #252525;
|
||||
border-top: 1px solid #333;
|
||||
background: var(--surface, #252525);
|
||||
border-top: 1px solid var(--border, #333);
|
||||
}
|
||||
|
||||
.media-controls,
|
||||
|
|
@ -438,9 +438,9 @@
|
|||
}
|
||||
|
||||
.control-btn {
|
||||
background: #333;
|
||||
background: var(--surface-hover, #333);
|
||||
border: none;
|
||||
color: #fff;
|
||||
color: var(--text, #fff);
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
|
|
@ -449,11 +449,11 @@
|
|||
}
|
||||
|
||||
.control-btn:hover {
|
||||
background: #444;
|
||||
background: var(--surface-active, #444);
|
||||
}
|
||||
|
||||
.control-btn.active {
|
||||
background: #667eea;
|
||||
background: var(--accent, #667eea);
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
|
|
@ -475,7 +475,7 @@
|
|||
height: 6px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: #444;
|
||||
background: var(--surface-active, #444);
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -484,7 +484,7 @@
|
|||
-webkit-appearance: none;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: #667eea;
|
||||
background: var(--accent, #667eea);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -492,14 +492,14 @@
|
|||
.progress-bar::-moz-range-thumb {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: #667eea;
|
||||
background: var(--accent, #667eea);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
color: #888;
|
||||
color: var(--text-muted, #888);
|
||||
font-size: 12px;
|
||||
min-width: 100px;
|
||||
text-align: right;
|
||||
|
|
@ -511,7 +511,7 @@
|
|||
height: 4px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: #444;
|
||||
background: var(--surface-active, #444);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -520,7 +520,7 @@
|
|||
-webkit-appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #fff;
|
||||
background: var(--bg, #fff);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -528,8 +528,8 @@
|
|||
/* Speed/Theme Select */
|
||||
.speed-select,
|
||||
.theme-select {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
background: var(--surface-hover, #333);
|
||||
color: var(--text, #fff);
|
||||
border: none;
|
||||
padding: 6px 10px;
|
||||
border-radius: 6px;
|
||||
|
|
@ -541,15 +541,15 @@
|
|||
.image-info,
|
||||
.code-info,
|
||||
.zoom-level {
|
||||
color: #888;
|
||||
color: var(--text-muted, #888);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.slide-nav input {
|
||||
width: 50px;
|
||||
background: #333;
|
||||
background: var(--surface-hover, #333);
|
||||
border: none;
|
||||
color: #fff;
|
||||
color: var(--text, #fff);
|
||||
padding: 6px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
|
|
@ -561,7 +561,7 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: #e74c3c;
|
||||
color: var(--error, #e74c3c);
|
||||
}
|
||||
|
||||
.projector-error-icon {
|
||||
|
|
@ -570,7 +570,7 @@
|
|||
|
||||
.projector-error-message {
|
||||
font-size: 16px;
|
||||
color: #888;
|
||||
color: var(--text-muted, #888);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
|
|
@ -958,12 +958,12 @@
|
|||
const wrapper = document.createElement('div');
|
||||
wrapper.style.textAlign = 'center';
|
||||
wrapper.style.padding = '40px';
|
||||
wrapper.style.color = '#888';
|
||||
wrapper.style.color = 'var(--text-muted, #888)';
|
||||
|
||||
wrapper.innerHTML = `
|
||||
<div style="font-size: 64px; margin-bottom: 20px;">📁</div>
|
||||
<div style="font-size: 18px; margin-bottom: 10px;">Cannot preview this file type</div>
|
||||
<a href="${data.source_url}" download style="color: #667eea; text-decoration: none;">
|
||||
<a href="${data.source_url}" download style="color: var(--accent, #667eea); text-decoration: none;">
|
||||
⬇️ Download File
|
||||
</a>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -7,31 +7,33 @@
|
|||
}
|
||||
|
||||
body {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
font-family: 'Fira Code', 'Fira Sans', Arial, sans-serif !important;
|
||||
background: white !important;
|
||||
background: var(--bg, white) !important;
|
||||
overflow: hidden !important;
|
||||
height: 100vh !important;
|
||||
width: 100vw !important;
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
/* Core Layout replicating BUILD V3 screenshot styling */
|
||||
.build-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
background: white;
|
||||
background: var(--bg, white);
|
||||
}
|
||||
|
||||
/* Left Sidebar */
|
||||
.sidebar {
|
||||
width: 51px;
|
||||
height: 100vh;
|
||||
background: #f8f8f8;
|
||||
border-right: 1px solid #f0f1f2;
|
||||
height: 100%;
|
||||
background: var(--surface, #f8f8f8);
|
||||
border-right: 1px solid var(--border, #f0f1f2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 100;
|
||||
|
|
@ -40,7 +42,7 @@
|
|||
.sidebar-item {
|
||||
width: 51px;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid #f0f1f2;
|
||||
border-bottom: 1px solid var(--border, #f0f1f2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -50,12 +52,12 @@
|
|||
}
|
||||
|
||||
.sidebar-item:hover {
|
||||
background: #ffffff;
|
||||
background: var(--surface-hover, #ffffff);
|
||||
}
|
||||
|
||||
.sidebar-item.active {
|
||||
background: #ffffff;
|
||||
border-left: 3px solid #84d669;
|
||||
background: var(--surface-hover, #ffffff);
|
||||
border-left: 3px solid var(--accent, #84d669);
|
||||
}
|
||||
|
||||
.sidebar-icon {
|
||||
|
|
@ -81,8 +83,8 @@
|
|||
.tabs-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f8f8f8;
|
||||
border-bottom: 1px solid #f0f1f2;
|
||||
background: var(--surface, #f8f8f8);
|
||||
border-bottom: 1px solid var(--border, #f0f1f2);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
|
@ -95,7 +97,7 @@
|
|||
height: 34px;
|
||||
min-width: 169px;
|
||||
flex: 1;
|
||||
border-right: 1px solid #f0f1f2;
|
||||
border-right: 1px solid var(--border, #f0f1f2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 18px;
|
||||
|
|
@ -104,16 +106,16 @@
|
|||
}
|
||||
|
||||
.main-tab:hover {
|
||||
background: #ffffff;
|
||||
background: var(--surface-hover, #ffffff);
|
||||
}
|
||||
|
||||
.main-tab.active {
|
||||
background: #84d669;
|
||||
border-color: #84d669;
|
||||
background: var(--accent, #84d669);
|
||||
border-color: var(--accent, #84d669);
|
||||
}
|
||||
|
||||
.main-tab.active .main-tab-content {
|
||||
color: white;
|
||||
color: var(--bg, white);
|
||||
}
|
||||
|
||||
.main-tab-content {
|
||||
|
|
@ -123,7 +125,7 @@
|
|||
font-family: 'Fira Code', monospace;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #3b3b3b;
|
||||
color: var(--text, #3b3b3b);
|
||||
}
|
||||
|
||||
/* Workspace (Where windows float) */
|
||||
|
|
@ -132,7 +134,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
background: var(--bg, white);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
|
@ -158,8 +160,8 @@
|
|||
|
||||
/* Interactive Desktop Icons triggering HTMX */
|
||||
.desktop-icon {
|
||||
background: white;
|
||||
border: 1px solid #f0f1f2;
|
||||
background: var(--bg, white);
|
||||
border: 1px solid var(--border, #f0f1f2);
|
||||
border-radius: 8px;
|
||||
height: 67px;
|
||||
padding: 10px;
|
||||
|
|
@ -176,7 +178,7 @@
|
|||
.desktop-icon:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
border-color: #84d669;
|
||||
border-color: var(--accent, #84d669);
|
||||
}
|
||||
|
||||
.panel-card-icon {
|
||||
|
|
@ -191,7 +193,7 @@
|
|||
font-family: 'Fira Code', monospace;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #3b3b3b;
|
||||
color: var(--text, #3b3b3b);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
|
|
@ -199,7 +201,7 @@
|
|||
.bg-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: linear-gradient(to right, #f0fdf4 1px, transparent 1px), linear-gradient(to bottom, #f0fdf4 1px, transparent 1px);
|
||||
background-image: linear-gradient(to right, var(--border, #f0fdf4) 1px, transparent 1px), linear-gradient(to bottom, var(--border, #f0fdf4) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
|
|
@ -219,22 +221,22 @@
|
|||
|
||||
.bg-svg path {
|
||||
fill: none;
|
||||
stroke: #e6f2eb;
|
||||
stroke: var(--border, #e6f2eb);
|
||||
stroke-width: 45;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.bg-svg path.inner {
|
||||
stroke: #f7faf9;
|
||||
stroke: var(--surface, #f7faf9);
|
||||
stroke-width: 41;
|
||||
}
|
||||
|
||||
/* Bottom Taskbar */
|
||||
.toolbar {
|
||||
height: 50px;
|
||||
background: white;
|
||||
border-top: 1px solid #f0f1f2;
|
||||
background: var(--bg, white);
|
||||
border-top: 1px solid var(--border, #f0f1f2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
|
|
@ -253,7 +255,7 @@
|
|||
.toolbar-time {
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 14px;
|
||||
color: #3b3b3b;
|
||||
color: var(--text, #3b3b3b);
|
||||
text-align: right;
|
||||
line-height: 1.4;
|
||||
padding: 0 10px;
|
||||
|
|
@ -273,12 +275,12 @@
|
|||
}
|
||||
|
||||
.taskbar-item:hover {
|
||||
background: #f8f8f8;
|
||||
background: var(--surface, #f8f8f8);
|
||||
}
|
||||
|
||||
.taskbar-item.active {
|
||||
border-bottom-color: #84d669;
|
||||
background: linear-gradient(to bottom, rgba(132, 214, 105, 0) 50%, rgba(132, 214, 105, 0.1) 100%);
|
||||
border-bottom-color: var(--accent, #84d669);
|
||||
background: linear-gradient(to bottom, transparent 50%, var(--accent-light, rgba(132, 214, 105, 0.1)) 100%);
|
||||
}
|
||||
|
||||
/* Utility */
|
||||
|
|
@ -291,13 +293,13 @@
|
|||
<!-- Left Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-item active" title="Home">
|
||||
<svg class="sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="#3b3b3b" stroke-width="2">
|
||||
<svg class="sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="var(--text, #3b3b3b)" stroke-width="2">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
||||
<polyline points="9 22 9 12 15 12 15 22"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="sidebar-item" title="Terminal">
|
||||
<svg class="sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="#3b3b3b" stroke-width="2">
|
||||
<svg class="sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="var(--text, #3b3b3b)" stroke-width="2">
|
||||
<polyline points="4 17 10 11 4 5"></polyline>
|
||||
<line x1="12" y1="19" x2="20" y2="19"></line>
|
||||
</svg>
|
||||
|
|
@ -345,8 +347,8 @@
|
|||
<div class="desktop-icon" data-app-id="chat" data-app-title="Chat"
|
||||
hx-get="/suite/partials/chat.html" hx-swap="none">
|
||||
<svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
|
||||
<circle cx="21" cy="21" r="20" stroke="#84d669" stroke-width="2" />
|
||||
<path d="M14 21h14M21 14v14" stroke="#84d669" stroke-width="2" />
|
||||
<circle cx="21" cy="21" r="20" stroke="var(--accent, #84d669)" stroke-width="2" />
|
||||
<path d="M14 21h14M21 14v14" stroke="var(--accent, #84d669)" stroke-width="2" />
|
||||
</svg>
|
||||
<div class="panel-card-label">Chat</div>
|
||||
</div>
|
||||
|
|
@ -354,10 +356,10 @@
|
|||
<div class="desktop-icon" data-app-id="vibe" data-app-title="Vibe"
|
||||
hx-get="/suite/partials/vibe.html" hx-swap="none">
|
||||
<svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
|
||||
<circle cx="21" cy="21" r="20" stroke="#84d669" stroke-width="2" />
|
||||
<path d="M12 14l8 7-8 7" stroke="#84d669" stroke-width="2" stroke-linecap="round"
|
||||
<circle cx="21" cy="21" r="20" stroke="var(--accent, #84d669)" stroke-width="2" />
|
||||
<path d="M12 14l8 7-8 7" stroke="var(--accent, #84d669)" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
<line x1="22" y1="28" x2="32" y2="28" stroke="#84d669" stroke-width="2"
|
||||
<line x1="22" y1="28" x2="32" y2="28" stroke="var(--accent, #84d669)" stroke-width="2"
|
||||
stroke-linecap="round" />
|
||||
</svg>
|
||||
<div class="panel-card-label">Vibe</div>
|
||||
|
|
@ -366,10 +368,10 @@
|
|||
<div class="desktop-icon" data-app-id="tasks" data-app-title="Tasks"
|
||||
hx-get="/suite/tasks/task-window.html" hx-swap="none">
|
||||
<svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
|
||||
<rect x="2" y="2" width="38" height="38" rx="4" stroke="#3b3b3b" stroke-width="2" />
|
||||
<line x1="12" y1="12" x2="30" y2="12" stroke="#3b3b3b" stroke-width="2" />
|
||||
<line x1="12" y1="21" x2="30" y2="21" stroke="#3b3b3b" stroke-width="2" />
|
||||
<line x1="12" y1="30" x2="24" y2="30" stroke="#3b3b3b" stroke-width="2" />
|
||||
<rect x="2" y="2" width="38" height="38" rx="4" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="12" y1="12" x2="30" y2="12" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="12" y1="21" x2="30" y2="21" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="12" y1="30" x2="24" y2="30" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
</svg>
|
||||
<div class="panel-card-label">Tasks</div>
|
||||
</div>
|
||||
|
|
@ -377,10 +379,10 @@
|
|||
<div class="desktop-icon" data-app-id="terminal" data-app-title="Terminal"
|
||||
hx-get="/suite/partials/terminal.html" hx-swap="none">
|
||||
<svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
|
||||
<rect x="2" y="4" width="38" height="34" rx="4" stroke="#3b3b3b" stroke-width="2" />
|
||||
<line x1="10" y1="14" x2="32" y2="14" stroke="#3b3b3b" stroke-width="2" />
|
||||
<line x1="10" y1="22" x2="28" y2="22" stroke="#3b3b3b" stroke-width="2" />
|
||||
<line x1="10" y1="30" x2="24" y2="30" stroke="#3b3b3b" stroke-width="2" />
|
||||
<rect x="2" y="4" width="38" height="34" rx="4" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="10" y1="14" x2="32" y2="14" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="10" y1="22" x2="28" y2="22" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="10" y1="30" x2="24" y2="30" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
</svg>
|
||||
<div class="panel-card-label">Terminal</div>
|
||||
</div>
|
||||
|
|
@ -388,11 +390,11 @@
|
|||
<div class="desktop-icon" data-app-id="explorer" data-app-title="Explorer"
|
||||
hx-get="/suite/partials/explorer.html" hx-swap="none">
|
||||
<svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
|
||||
<rect x="2" y="2" width="38" height="38" rx="4" stroke="#3b3b3b" stroke-width="2" />
|
||||
<line x1="10" y1="10" x2="32" y2="10" stroke="#3b3b3b" stroke-width="2" />
|
||||
<line x1="10" y1="18" x2="28" y2="18" stroke="#3b3b3b" stroke-width="2" />
|
||||
<line x1="10" y1="26" x2="32" y2="26" stroke="#3b3b3b" stroke-width="2" />
|
||||
<line x1="10" y1="34" x2="24" y2="34" stroke="#3b3b3b" stroke-width="2" />
|
||||
<rect x="2" y="2" width="38" height="38" rx="4" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="10" y1="10" x2="32" y2="10" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="10" y1="18" x2="28" y2="18" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="10" y1="26" x2="32" y2="26" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="10" y1="34" x2="24" y2="34" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
</svg>
|
||||
<div class="panel-card-label">Explorer</div>
|
||||
</div>
|
||||
|
|
@ -400,10 +402,10 @@
|
|||
<div class="desktop-icon" data-app-id="editor" data-app-title="Editor"
|
||||
hx-get="/suite/partials/editor.html" hx-swap="none">
|
||||
<svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
|
||||
<polyline points="4 8 12 2 20 8" stroke="#3b3b3b" stroke-width="2" />
|
||||
<line x1="12" y1="2" x2="12" y2="24" stroke="#3b3b3b" stroke-width="2" />
|
||||
<polyline points="22 16 30 10 38 16" stroke="#3b3b3b" stroke-width="2" />
|
||||
<line x1="30" y1="10" x2="30" y2="32" stroke="#3b3b3b" stroke-width="2" />
|
||||
<polyline points="4 8 12 2 20 8" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="12" y1="2" x2="12" y2="24" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<polyline points="22 16 30 10 38 16" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="30" y1="10" x2="30" y2="32" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
</svg>
|
||||
<div class="panel-card-label">Editor</div>
|
||||
</div>
|
||||
|
|
@ -411,9 +413,9 @@
|
|||
<div class="desktop-icon" data-app-id="browser" data-app-title="Browser"
|
||||
hx-get="/suite/partials/browser.html" hx-swap="none">
|
||||
<svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
|
||||
<rect x="2" y="4" width="38" height="34" rx="4" stroke="#3b3b3b" stroke-width="2" />
|
||||
<circle cx="14" cy="16" r="4" stroke="#3b3b3b" stroke-width="2" />
|
||||
<path d="M6 34a6 6 0 0 1 6-6h10a6 6 0 0 1 6 6v2H6v-2z" stroke="#3b3b3b" stroke-width="2" />
|
||||
<rect x="2" y="4" width="38" height="34" rx="4" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<circle cx="14" cy="16" r="4" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<path d="M6 34a6 6 0 0 1 6-6h10a6 6 0 0 1 6 6v2H6v-2z" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
</svg>
|
||||
<div class="panel-card-label">Browser</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,34 +13,21 @@
|
|||
|
||||
<!-- Main Content: Canvas + Sidebar -->
|
||||
<div class="vibe-body">
|
||||
<!-- Canvas Area -->
|
||||
<div class="vibe-canvas" id="vibeCanvas">
|
||||
<div class="vibe-canvas-empty" id="vibeCanvasEmpty">
|
||||
<div class="vibe-canvas-icon">🎨</div>
|
||||
<h3>Vibe — App Builder</h3>
|
||||
<p>Describe what you want to build. An agent will generate the entire application.</p>
|
||||
<div class="vibe-canvas-prompt">
|
||||
<input type="text" class="vibe-prompt-input" id="vibePromptInput"
|
||||
placeholder="e.g. 'Create a CRM for my clinic'" />
|
||||
<button class="vibe-prompt-btn" id="vibePromptBtn" type="button">Build</button>
|
||||
|
||||
<!-- Agents & Workspaces Sidebar (Fixed to left as in image) -->
|
||||
<aside class="agents-sidebar" id="agentsSidebar" style="background: var(--surface, #fcfcfc);">
|
||||
<div class="as-logo-section"
|
||||
style="padding: 16px; border-bottom: 1px solid var(--border, #f0f1f2); 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
|
||||
</h2>
|
||||
<div style="display:flex; gap: 12px; color: var(--text-muted, #888); font-size: 14px;">
|
||||
<span style="cursor:pointer;" title="Home">⌂</span>
|
||||
<span style="cursor:pointer;" title="Overview">◱</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generated Steps (populated dynamically) -->
|
||||
<div class="vibe-steps" id="vibeSteps" style="display:none;"></div>
|
||||
|
||||
<!-- Preview Panel -->
|
||||
<div class="vibe-preview" id="vibePreview" style="display:none;">
|
||||
<div class="vibe-preview-header">
|
||||
<span>// PREVIEW</span>
|
||||
<input type="text" class="vibe-preview-url" id="vibePreviewUrl" value="" readonly />
|
||||
</div>
|
||||
<div class="vibe-preview-content" id="vibePreviewContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Agents & Workspaces Sidebar (collapsible) -->
|
||||
<aside class="agents-sidebar" id="agentsSidebar">
|
||||
<div class="as-section">
|
||||
<div class="as-section-header">
|
||||
<h3>Agents</h3>
|
||||
|
|
@ -48,16 +35,61 @@
|
|||
</div>
|
||||
|
||||
<div class="as-agent-list" id="asAgentList">
|
||||
<div class="as-agent-empty">
|
||||
<p style="padding: 1rem; text-align: center; color: var(--text-tertiary); font-size: 0.8rem;">
|
||||
No active agents attached.<br><br>
|
||||
Click "Build" and BotServer will automatically attach necessary agents (Architect,
|
||||
Fullstack, DBA) to your workspace.
|
||||
</p>
|
||||
<!-- Mantis #1 EVOLVED -->
|
||||
<div class="as-agent-card" data-agent-id="1" style="border-left: 3px solid var(--accent, #84d669);">
|
||||
<div class="as-agent-header">
|
||||
<span class="as-status-dot green"></span>
|
||||
<span class="as-agent-name">Mantis #1</span>
|
||||
<span class="as-drag-handle" style="margin-left:auto;">⋮</span>
|
||||
</div>
|
||||
<div class="as-agent-body">
|
||||
<span class="as-agent-icons">👀 ⚙️ ⚡</span>
|
||||
<span class="as-badge badge-evolved">EVOLVED</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="as-create-btn" id="createAgentBtn" type="button">+ Create a New Agent</button>
|
||||
<!-- Mantis #2 BRED -->
|
||||
<div class="as-agent-card" data-agent-id="2">
|
||||
<div class="as-agent-header">
|
||||
<span class="as-status-dot yellow"></span>
|
||||
<span class="as-agent-name">Mantis #2</span>
|
||||
<span class="as-drag-handle" style="margin-left:auto;">⋮</span>
|
||||
</div>
|
||||
<div class="as-agent-body">
|
||||
<span class="as-agent-icons">🥚</span>
|
||||
<span class="as-badge badge-bred">BRED</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mantis #3 & #4 WILD -->
|
||||
<div class="as-agent-card" style="opacity: 0.6;" data-agent-id="3">
|
||||
<div class="as-agent-header">
|
||||
<span class="as-status-dot gray"></span>
|
||||
<span class="as-agent-name">Mantis #3</span>
|
||||
<span class="as-drag-handle" style="margin-left:auto;">⋮</span>
|
||||
</div>
|
||||
<div class="as-agent-body">
|
||||
<span class="as-agent-icons" style="filter: grayscale(1);">🥚</span>
|
||||
<span class="as-badge badge-wild" style="background: var(--surface-active, #ccc)">WILD</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="as-agent-card" style="opacity: 0.6;" data-agent-id="4">
|
||||
<div class="as-agent-header">
|
||||
<span class="as-status-dot gray"></span>
|
||||
<span class="as-agent-name">Mantis #4</span>
|
||||
<span class="as-drag-handle" style="margin-left:auto;">⋮</span>
|
||||
</div>
|
||||
<div class="as-agent-body">
|
||||
<span class="as-agent-icons" style="filter: grayscale(1);">🥚</span>
|
||||
<span class="as-badge badge-wild" style="background: var(--surface-active, #ccc)">WILD</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="padding: 0 8px;">
|
||||
<button class="as-create-btn" id="createAgentBtn" type="button"
|
||||
style="width: calc(100% - 16px); margin: 8px;">+ Create a New Mantis</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="as-section">
|
||||
|
|
@ -67,16 +99,16 @@
|
|||
|
||||
<div class="as-workspace-list" id="asWorkspaceList">
|
||||
<div class="as-workspace-item">
|
||||
<button class="as-workspace-toggle" type="button">
|
||||
<span class="as-workspace-arrow">▶</span>
|
||||
<span>Production</span>
|
||||
<span class="as-workspace-count">2</span>
|
||||
<button class="as-workspace-toggle" type="button"
|
||||
style="background: var(--bg, #fff); border-left: 3px solid var(--accent, #84d669);">
|
||||
<span class="as-workspace-arrow">▼</span>
|
||||
<span>E-Commerce App Development</span>
|
||||
</button>
|
||||
<div class="as-workspace-body" style="display:none;">
|
||||
<div class="as-workspace-agent">Agent #1</div>
|
||||
<div class="as-workspace-agent">Agent #2</div>
|
||||
<div class="as-workspace-dropzone" data-workspace="production">
|
||||
Drag an Agent to Include
|
||||
<div class="as-workspace-body" style="display:block;">
|
||||
<div class="as-workspace-agent">Mantis #1</div>
|
||||
<div class="as-workspace-agent">Mantis #4</div>
|
||||
<div class="as-workspace-dropzone" data-workspace="ecommerce">
|
||||
Drag a Mantis to Include
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -84,18 +116,120 @@
|
|||
<div class="as-workspace-item">
|
||||
<button class="as-workspace-toggle" type="button">
|
||||
<span class="as-workspace-arrow">▶</span>
|
||||
<span>Staging</span>
|
||||
<span class="as-workspace-count">0</span>
|
||||
<span>Accountability App Development</span>
|
||||
</button>
|
||||
<div class="as-workspace-body" style="display:none;">
|
||||
<div class="as-workspace-dropzone" data-workspace="staging">
|
||||
Drag an Agent to Include
|
||||
<div class="as-workspace-agent">Mantis #4</div>
|
||||
<div class="as-workspace-dropzone" data-workspace="accountability">
|
||||
Drag a Mantis to Include
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="padding: 0 8px;">
|
||||
<button class="as-create-btn" id="createWorkspaceBtn" type="button"
|
||||
style="width: calc(100% - 16px); margin: 8px;">+ Create a New Project</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Canvas Area -->
|
||||
<div class="vibe-canvas" id="vibeCanvas"
|
||||
style="background: var(--bg, #fdfdfd); background-image: radial-gradient(var(--border, #e0e0e0) 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, #f0f1f2); 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
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Steps Nodes (populated dynamically from chat/API) -->
|
||||
<div class="vibe-steps" id="vibeSteps"
|
||||
style="padding: 40px; display: none; gap: 60px; align-items: flex-start; overflow-x: auto;">
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div id="vibeCanvasEmpty"
|
||||
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;">
|
||||
Vibe — App Builder</h3>
|
||||
<p style="margin: 0; font-size: 14px; color: var(--text-muted, #888); 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;">
|
||||
🛍️ 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;">
|
||||
📇 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;">
|
||||
📊 Project Manager
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vibe Chat Overlay (LIVE) -->
|
||||
<div id="vibeChatOverlay"
|
||||
style="position: absolute; bottom: 24px; right: 24px; width: 380px; background: var(--surface, #1a1a24); 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, #2a2a35); color: var(--bg, #fff); z-index: 100;">
|
||||
<div
|
||||
style="padding: 12px 16px; background: var(--surface-hover, #23232f); border-bottom: 1px solid var(--border, #2a2a35); 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 #84d669;"></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>
|
||||
</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;">
|
||||
💡 TIP: Describe your project. The more detail, the better the plan.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="padding: 12px; border-top: 1px solid #2a2a35; background: var(--surface, #1a1a24);">
|
||||
<form id="vibeChatForm" autocomplete="off"
|
||||
style="display: flex; align-items: center; gap: 8px; background: var(--surface-hover, #23232f); padding: 8px 12px; border-radius: 20px; border: 1px solid #333;">
|
||||
<span style="color: var(--text-muted, #888); 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;" />
|
||||
<button type="submit" id="vibeChatSend"
|
||||
style="background: #84d669; color: #1a1a24; 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>
|
||||
|
||||
<!-- Preview Panel (hidden by default) -->
|
||||
<div class="vibe-preview" id="vibePreview" style="display:none;">
|
||||
<div class="vibe-preview-header">
|
||||
<span>// PREVIEW</span>
|
||||
<input type="text" class="vibe-preview-url" id="vibePreviewUrl" value="" readonly />
|
||||
</div>
|
||||
<div class="vibe-preview-content" id="vibePreviewContent"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -103,18 +237,567 @@
|
|||
(function () {
|
||||
"use strict";
|
||||
|
||||
/* ── state ── */
|
||||
var vibeWs = null;
|
||||
var vibeSessionId = null;
|
||||
var vibeUserId = null;
|
||||
var vibeBotId = "default";
|
||||
var vibeBotName = "default";
|
||||
var vibeStreaming = false;
|
||||
var vibeStreamId = null;
|
||||
var vibeStreamContent = "";
|
||||
var taskNodes = [];
|
||||
var currentProject = "My App";
|
||||
var nodeIdCounter = 0;
|
||||
|
||||
/* ── helpers ── */
|
||||
function esc(text) {
|
||||
var d = document.createElement("div");
|
||||
d.textContent = text || "";
|
||||
return d.innerHTML;
|
||||
}
|
||||
|
||||
function vibeAddMsg(role, text) {
|
||||
var box = document.getElementById("vibeChatMessages");
|
||||
if (!box) return;
|
||||
var div = document.createElement("div");
|
||||
if (role === "user") {
|
||||
div.style.cssText = "align-self:flex-end;background:#84d669;color:#1a1a24;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.innerHTML = text;
|
||||
} else {
|
||||
div.style.cssText = "align-self:flex-start;background: var(--border, #2a2a35);color:#ececec;padding:10px 14px;border-radius:12px 12px 12px 0;max-width:85%;word-wrap:break-word;";
|
||||
div.className = "vibe-bot-msg";
|
||||
if (typeof marked !== "undefined" && marked.parse) {
|
||||
div.innerHTML = marked.parse(text);
|
||||
} else {
|
||||
div.textContent = text;
|
||||
}
|
||||
}
|
||||
box.appendChild(div);
|
||||
box.scrollTop = box.scrollHeight;
|
||||
return div;
|
||||
}
|
||||
|
||||
function vibeAddStreamStart() {
|
||||
vibeStreamId = "vibe-stream-" + Date.now();
|
||||
vibeStreamContent = "";
|
||||
var el = vibeAddMsg("bot", "▍");
|
||||
if (el) el.id = vibeStreamId;
|
||||
return el;
|
||||
}
|
||||
|
||||
function vibeUpdateStream(content) {
|
||||
vibeStreamContent += (content || "");
|
||||
var el = document.getElementById(vibeStreamId);
|
||||
if (!el) return;
|
||||
if (typeof marked !== "undefined" && marked.parse) {
|
||||
el.innerHTML = marked.parse(vibeStreamContent);
|
||||
} else {
|
||||
el.textContent = vibeStreamContent;
|
||||
}
|
||||
var box = document.getElementById("vibeChatMessages");
|
||||
if (box) box.scrollTop = box.scrollHeight;
|
||||
}
|
||||
|
||||
function vibeFinalizeStream() {
|
||||
var el = document.getElementById(vibeStreamId);
|
||||
if (el) {
|
||||
if (typeof marked !== "undefined" && marked.parse) {
|
||||
el.innerHTML = marked.parse(vibeStreamContent);
|
||||
} else {
|
||||
el.textContent = vibeStreamContent;
|
||||
}
|
||||
el.removeAttribute("id");
|
||||
}
|
||||
vibeStreamId = null;
|
||||
vibeStreamContent = "";
|
||||
vibeStreaming = false;
|
||||
}
|
||||
|
||||
/* ── update status badge ── */
|
||||
function setVibeStatus(status) {
|
||||
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 #84d669"; }
|
||||
if (badge) { badge.textContent = "EVOLVED"; badge.style.background = "#84d669"; badge.style.color = "#fff"; }
|
||||
} 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 = "#888"; }
|
||||
} 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 = "#888"; }
|
||||
}
|
||||
}
|
||||
|
||||
/* ── update agent sidebar card ── */
|
||||
function updateMantis1(status, detail) {
|
||||
var card = document.querySelector('.as-agent-card[data-agent-id="1"]');
|
||||
if (!card) return;
|
||||
var bar = card.querySelector(".as-agent-bar .as-bar-fill");
|
||||
if (status === "working") {
|
||||
card.style.borderLeftColor = "#f59e0b";
|
||||
if (!card.querySelector(".as-agent-bar")) {
|
||||
var barWrapper = document.createElement("div");
|
||||
barWrapper.className = "as-agent-bar";
|
||||
barWrapper.innerHTML = '<div class="as-bar-fill bred" style="width:0%;transition:width 0.5s;"></div>';
|
||||
card.appendChild(barWrapper);
|
||||
}
|
||||
} else if (status === "done") {
|
||||
card.style.borderLeftColor = "#84d669";
|
||||
bar = card.querySelector(".as-bar-fill");
|
||||
if (bar) bar.style.width = "100%";
|
||||
setTimeout(function () {
|
||||
var b = card.querySelector(".as-agent-bar");
|
||||
if (b) b.remove();
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── create task node on canvas ── */
|
||||
function addTaskNode(title, description, meta) {
|
||||
var stepsContainer = document.getElementById("vibeSteps");
|
||||
if (!stepsContainer) return;
|
||||
stepsContainer.style.display = "flex";
|
||||
var emptyState = document.getElementById("vibeCanvasEmpty");
|
||||
if (emptyState) emptyState.style.display = "none";
|
||||
|
||||
nodeIdCounter++;
|
||||
meta = meta || {};
|
||||
var fileCount = meta.estimated_files || meta.files || Math.floor(Math.random() * 15 + 3);
|
||||
var time = meta.estimated_time || meta.time || Math.floor(Math.random() * 20 + 5) + "m";
|
||||
var tokens = meta.estimated_tokens || meta.tokens || "~" + Math.floor(Math.random() * 30 + 10) + "k tokens";
|
||||
var status = meta.status || "Planning";
|
||||
var fileList = meta.fileList || [];
|
||||
var isFirst = stepsContainer.children.length === 0;
|
||||
var nodeId = "vibe-node-" + nodeIdCounter;
|
||||
|
||||
var statusBg = status === "Done" ? "#84d669" : (status === "Planning" ? "#eef8eb" : "#fff3cd");
|
||||
var statusColor = status === "Done" ? "#fff" : (status === "Planning" ? "#84d669" : "#856404");
|
||||
|
||||
var subTasksHtml = "";
|
||||
if (fileList.length > 0) {
|
||||
subTasksHtml = '<div id="' + nodeId + '-files" style="display:none;padding:8px 16px;border-top:1px solid #f0f1f2;font-size:10px;color:#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>';
|
||||
}
|
||||
|
||||
var node = document.createElement("div");
|
||||
node.className = "vibe-task-node";
|
||||
node.style.cssText = "background: var(--bg, #fff);border:" + (isFirst ? "2px solid #84d669" : "1px solid #f0f1f2") + ";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, #f0f1f2);">' +
|
||||
'<div style="display:flex;justify-content:space-between;margin-bottom:8px;font-size:10px;color: var(--text-muted, #888);">' +
|
||||
'<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>' +
|
||||
'</div>' +
|
||||
'<div style="padding:10px 16px;background: var(--surface, #fcfcfc);border-bottom: 1px solid var(--border, #f0f1f2);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="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="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 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>' +
|
||||
subTasksHtml;
|
||||
|
||||
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:#84d669;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:#84d669;z-index:20;";
|
||||
node.appendChild(dot);
|
||||
}
|
||||
}
|
||||
|
||||
stepsContainer.appendChild(node);
|
||||
stepsContainer.scrollLeft = stepsContainer.scrollWidth;
|
||||
taskNodes.push({ title: title, description: description, meta: meta });
|
||||
return node;
|
||||
}
|
||||
|
||||
/* ── call /api/autotask/classify (real backend) ── */
|
||||
function callAutotask(intent) {
|
||||
updateMantis1("working");
|
||||
vibeAddMsg("system", "🔄 Mantis #1 is analyzing your request…");
|
||||
|
||||
// Connect task progress WS to get live orchestrator events
|
||||
connectTaskProgressWs(null);
|
||||
|
||||
// Update breadcrumb
|
||||
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>';
|
||||
}
|
||||
|
||||
fetch("/api/autotask/classify", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ intent: intent, auto_process: true })
|
||||
})
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (data) {
|
||||
updateMantis1("done");
|
||||
|
||||
if (data.success && data.result) {
|
||||
var r = data.result;
|
||||
|
||||
// Connect to task-specific progress WS if we have a task_id
|
||||
if (r.task_id) {
|
||||
connectTaskProgressWs(r.task_id);
|
||||
}
|
||||
|
||||
// Add task nodes from created_resources
|
||||
if (r.created_resources && r.created_resources.length > 0) {
|
||||
r.created_resources.forEach(function (res, i) {
|
||||
setTimeout(function () {
|
||||
addTaskNode(
|
||||
res.name || res.resource_type,
|
||||
res.resource_type + (res.path ? " → " + res.path : ""),
|
||||
{ status: "Done" }
|
||||
);
|
||||
}, i * 400);
|
||||
});
|
||||
} else {
|
||||
addTaskNode("Project Setup", "Setting up: " + intent, { status: "Planning" });
|
||||
}
|
||||
|
||||
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>');
|
||||
|
||||
var preview = document.getElementById("vibePreview");
|
||||
var urlBar = document.getElementById("vibePreviewUrl");
|
||||
var content = document.getElementById("vibePreviewContent");
|
||||
if (preview) preview.style.display = "";
|
||||
if (urlBar) urlBar.value = r.app_url;
|
||||
if (content) content.innerHTML = '<iframe src="' + r.app_url + '" style="width:100%;height:100%;border:none;"></iframe>';
|
||||
}
|
||||
|
||||
if (r.next_steps && r.next_steps.length > 0) {
|
||||
vibeAddMsg("bot", "**Next steps:**\n" + r.next_steps.map(function (s) { return "• " + s; }).join("\n"));
|
||||
}
|
||||
} else {
|
||||
vibeAddMsg("bot", "I classified your intent as **" + (data.intent_type || "UNKNOWN") + "**. " + (data.error || "Processing complete."));
|
||||
addTaskNode("Analysis", intent, { status: "Planning" });
|
||||
}
|
||||
})
|
||||
.catch(function (err) {
|
||||
updateMantis1("done");
|
||||
vibeAddMsg("system", "⚠️ Backend unavailable — showing plan preview.");
|
||||
var words = intent.split(/[.,;]/);
|
||||
addTaskNode("Project Setup", "Create project structure and install dependencies", { status: "Planning" });
|
||||
if (words.length > 1) {
|
||||
setTimeout(function () {
|
||||
addTaskNode("Database Schema", "Define tables for: " + words.slice(0, 3).join(", "), { status: "Pending" });
|
||||
}, 500);
|
||||
}
|
||||
vibeAddMsg("bot", "I've created a preliminary plan with " + Math.min(words.length + 1, 5) + " nodes. Once the backend is available, I'll process the full build.");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/* ── WebSocket to backend (re-use chat WS) ── */
|
||||
function connectVibeWs() {
|
||||
setVibeStatus("connecting");
|
||||
|
||||
var botName = window.__INITIAL_BOT_NAME__ || "default";
|
||||
fetch("/api/auth?bot_name=" + encodeURIComponent(botName))
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (auth) {
|
||||
vibeUserId = auth.user_id;
|
||||
vibeSessionId = auth.session_id;
|
||||
vibeBotId = auth.bot_id || "default";
|
||||
vibeBotName = botName;
|
||||
|
||||
var proto = location.protocol === "https:" ? "wss://" : "ws://";
|
||||
var url = proto + location.host + "/ws?session_id=" + vibeSessionId + "&user_id=" + vibeUserId + "&bot_name=" + vibeBotName;
|
||||
vibeWs = new WebSocket(url);
|
||||
|
||||
vibeWs.onopen = function () {
|
||||
setVibeStatus("connected");
|
||||
};
|
||||
|
||||
vibeWs.onmessage = function (event) {
|
||||
try {
|
||||
var data = JSON.parse(event.data);
|
||||
if (data.type === "connected") return;
|
||||
if (data.event) return; // system events
|
||||
|
||||
// Agent-mode messages → update sidebar
|
||||
if (data.type === "thought_process") {
|
||||
vibeAddMsg("system", "💭 " + esc(data.content));
|
||||
return;
|
||||
}
|
||||
if (data.type === "terminal_output") {
|
||||
vibeAddMsg("system", "🖥️ " + esc(data.line));
|
||||
return;
|
||||
}
|
||||
if (data.type === "step_progress") {
|
||||
var pct = Math.round((data.current / data.total) * 100);
|
||||
updateMantis1("working");
|
||||
var bar = document.querySelector('.as-agent-card[data-agent-id="1"] .as-bar-fill');
|
||||
if (bar) bar.style.width = pct + "%";
|
||||
return;
|
||||
}
|
||||
|
||||
// Bot responses → chat
|
||||
if (data.message_type === 2) {
|
||||
if (data.is_complete) {
|
||||
if (vibeStreaming) {
|
||||
vibeFinalizeStream();
|
||||
} else if (data.content && data.content.trim()) {
|
||||
vibeAddMsg("bot", data.content);
|
||||
}
|
||||
vibeStreaming = false;
|
||||
} else {
|
||||
if (!vibeStreaming) {
|
||||
vibeStreaming = true;
|
||||
vibeAddStreamStart();
|
||||
vibeUpdateStream(data.content || "");
|
||||
} else {
|
||||
vibeUpdateStream(data.content || "");
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Vibe WS parse error:", e);
|
||||
}
|
||||
};
|
||||
|
||||
vibeWs.onclose = function () { setVibeStatus("disconnected"); };
|
||||
vibeWs.onerror = function () { setVibeStatus("disconnected"); };
|
||||
})
|
||||
.catch(function () {
|
||||
setVibeStatus("disconnected");
|
||||
vibeAddMsg("system", "⚠️ Could not connect to backend. You can still plan offline.");
|
||||
});
|
||||
}
|
||||
|
||||
/* ── send via WS (for regular chat) ── */
|
||||
function vibeSendWs(content) {
|
||||
if (vibeWs && vibeWs.readyState === WebSocket.OPEN) {
|
||||
vibeWs.send(JSON.stringify({
|
||||
bot_id: vibeBotId,
|
||||
user_id: vibeUserId,
|
||||
session_id: vibeSessionId,
|
||||
channel: "web",
|
||||
content: content,
|
||||
message_type: 1,
|
||||
timestamp: new Date().toISOString()
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Task Progress WebSocket (orchestrator events) ── */
|
||||
var taskProgressWs = null;
|
||||
|
||||
function connectTaskProgressWs(taskId) {
|
||||
var proto = location.protocol === "https:" ? "wss://" : "ws://";
|
||||
var url = proto + location.host + "/ws/task-progress" + (taskId ? "/" + taskId : "");
|
||||
if (taskProgressWs) {
|
||||
try { taskProgressWs.close(); } catch (ignore) { }
|
||||
}
|
||||
taskProgressWs = new WebSocket(url);
|
||||
|
||||
taskProgressWs.onmessage = function (event) {
|
||||
try {
|
||||
var data = JSON.parse(event.data);
|
||||
if (data.type === "connected") return;
|
||||
|
||||
if (data.event_type === "agent_thought" || data.step === "agent_thought") {
|
||||
var agentLabel = (data.details || "mantis_1").replace("mantis_", "Mantis #");
|
||||
vibeAddMsg("system", "💭 " + agentLabel + ": " + esc(data.text || data.message || ""));
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.event_type === "agent_update" || data.step === "agent_update") {
|
||||
try {
|
||||
var info = typeof data.details === "string" ? JSON.parse(data.details) : data.details;
|
||||
if (info) {
|
||||
updateAgentCard(info.agent_id, info.status, info.detail);
|
||||
}
|
||||
} catch (ignore) { }
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.event_type === "task_node" || data.step === "task_node") {
|
||||
try {
|
||||
var nodeInfo = typeof data.details === "string" ? JSON.parse(data.details) : data.details;
|
||||
if (nodeInfo) {
|
||||
addTaskNode(
|
||||
nodeInfo.title || data.message || "Task",
|
||||
nodeInfo.description || "",
|
||||
{
|
||||
status: nodeInfo.status || "Planning",
|
||||
estimated_files: nodeInfo.estimated_files,
|
||||
estimated_time: nodeInfo.estimated_time,
|
||||
estimated_tokens: nodeInfo.estimated_tokens,
|
||||
fileList: nodeInfo.files || []
|
||||
}
|
||||
);
|
||||
}
|
||||
} catch (ignore) {
|
||||
addTaskNode(data.message || "Task", "", { status: "Planning" });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.event_type === "step_progress" || data.step === "step_progress") {
|
||||
var pct = 0;
|
||||
if (data.current_step && data.total_steps) {
|
||||
pct = Math.round((data.current_step / data.total_steps) * 100);
|
||||
} else if (data.current && data.total) {
|
||||
pct = Math.round((data.current / data.total) * 100);
|
||||
}
|
||||
updateMantis1("working");
|
||||
var bar = document.querySelector('.as-agent-card[data-agent-id="1"] .as-bar-fill');
|
||||
if (bar) bar.style.width = pct + "%";
|
||||
|
||||
var stageMap = {
|
||||
"Planning": "plan", "Building": "build",
|
||||
"Reviewing": "review", "Deploying": "deploy",
|
||||
"Monitoring": "monitor"
|
||||
};
|
||||
var stageLabel = data.message || "";
|
||||
var tabStage = stageMap[stageLabel];
|
||||
if (tabStage) {
|
||||
var allTabs = document.querySelectorAll(".vibe-pipeline-tab");
|
||||
allTabs.forEach(function (t) { t.classList.remove("active"); });
|
||||
var activeTab = document.querySelector('.vibe-pipeline-tab[data-stage="' + tabStage + '"]');
|
||||
if (activeTab) activeTab.classList.add("active");
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.event_type === "pipeline_complete" || data.step === "pipeline_complete") {
|
||||
updateMantis1("done");
|
||||
vibeAddMsg("system", "✅ Pipeline complete — all stages finished");
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.event_type === "manifest_update") {
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Task progress parse error:", e);
|
||||
}
|
||||
};
|
||||
|
||||
taskProgressWs.onerror = function () { };
|
||||
taskProgressWs.onclose = function () { };
|
||||
}
|
||||
|
||||
function updateAgentCard(agentId, status, detail) {
|
||||
var card = document.querySelector('.as-agent-card[data-agent-id="' + agentId + '"]');
|
||||
if (!card) return;
|
||||
card.style.opacity = "1";
|
||||
|
||||
var badge = card.querySelector(".as-badge");
|
||||
var dot = card.querySelector(".as-status-dot");
|
||||
|
||||
if (status === "WORKING") {
|
||||
card.style.borderLeft = "3px solid #f59e0b";
|
||||
if (dot) { dot.className = "as-status-dot yellow"; }
|
||||
if (badge) { badge.textContent = "WORKING"; badge.className = "as-badge badge-bred"; }
|
||||
if (!card.querySelector(".as-agent-bar")) {
|
||||
var barWrapper = document.createElement("div");
|
||||
barWrapper.className = "as-agent-bar";
|
||||
barWrapper.innerHTML = '<div class="as-bar-fill bred" style="width:0%;transition:width 0.5s;"></div>';
|
||||
card.appendChild(barWrapper);
|
||||
}
|
||||
} else if (status === "EVOLVED" || status === "DONE") {
|
||||
card.style.borderLeft = "3px solid #84d669";
|
||||
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");
|
||||
if (agBar) agBar.style.width = "100%";
|
||||
setTimeout(function () {
|
||||
var b = card.querySelector(".as-agent-bar");
|
||||
if (b) b.remove();
|
||||
}, 2000);
|
||||
} else if (status === "BRED") {
|
||||
card.style.borderLeft = "3px solid #f59e0b";
|
||||
if (dot) { dot.className = "as-status-dot yellow"; }
|
||||
if (badge) { badge.textContent = "BRED"; badge.className = "as-badge badge-bred"; }
|
||||
} else if (status === "FAILED") {
|
||||
card.style.borderLeft = "3px solid #ef4444";
|
||||
if (dot) { dot.className = "as-status-dot red"; }
|
||||
if (badge) { badge.textContent = "FAILED"; badge.className = "as-badge badge-bred"; badge.style.background = "#ef4444"; }
|
||||
}
|
||||
|
||||
if (detail) {
|
||||
var detailEl = card.querySelector(".as-agent-detail");
|
||||
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;";
|
||||
var body = card.querySelector(".as-agent-body");
|
||||
if (body) body.after(detailEl);
|
||||
}
|
||||
detailEl.textContent = detail;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ── form submit ── */
|
||||
function handleVibeSubmit(e) {
|
||||
e.preventDefault();
|
||||
var input = document.getElementById("vibeChatInput");
|
||||
if (!input) return;
|
||||
var text = input.value.trim();
|
||||
if (!text) return;
|
||||
input.value = "";
|
||||
|
||||
vibeAddMsg("user", text);
|
||||
|
||||
// Decide: if the text looks like a "build" request → call autotask API
|
||||
// Otherwise → send via WS for regular chat
|
||||
var buildKeywords = /\b(create|build|make|develop|generate|design|scaffold|i want|i need|app for|website for|system for|platform for|dashboard for)\b/i;
|
||||
if (buildKeywords.test(text)) {
|
||||
callAutotask(text);
|
||||
// Also send via WS so the bot knows
|
||||
vibeSendWs(text);
|
||||
} else {
|
||||
vibeSendWs(text);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── init ── */
|
||||
function initVibe() {
|
||||
setupPipelineTabs();
|
||||
setupPrompt();
|
||||
setupSidebarCollapse();
|
||||
setupWorkspaceAccordions();
|
||||
setupDragAndDrop();
|
||||
|
||||
// Wire up chat form
|
||||
var form = document.getElementById("vibeChatForm");
|
||||
if (form) form.addEventListener("submit", handleVibeSubmit);
|
||||
|
||||
// Connect WebSocket
|
||||
connectVibeWs();
|
||||
}
|
||||
|
||||
function setupPipelineTabs() {
|
||||
var container = document.querySelector(".vibe-pipeline");
|
||||
if (!container) return;
|
||||
|
||||
container.addEventListener("click", function (e) {
|
||||
var tab = e.target.closest(".vibe-pipeline-tab");
|
||||
if (!tab) return;
|
||||
|
|
@ -125,64 +808,10 @@
|
|||
});
|
||||
}
|
||||
|
||||
function setupPrompt() {
|
||||
var input = document.getElementById("vibePromptInput");
|
||||
var btn = document.getElementById("vibePromptBtn");
|
||||
if (!input || !btn) return;
|
||||
|
||||
function submit() {
|
||||
var text = input.value.trim();
|
||||
if (!text) return;
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = "Building...";
|
||||
|
||||
fetch("/api/autotask/classify", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ intent: text })
|
||||
})
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (data) {
|
||||
btn.disabled = false;
|
||||
btn.textContent = "Build";
|
||||
if (data.result && data.result.app_url) {
|
||||
showPreview(data.result.app_url);
|
||||
} else if (data.app_url) {
|
||||
showPreview(data.app_url);
|
||||
} else if (data.error) {
|
||||
alert("Error: " + data.error);
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
btn.disabled = false;
|
||||
btn.textContent = "Build";
|
||||
});
|
||||
}
|
||||
|
||||
btn.addEventListener("click", submit);
|
||||
input.addEventListener("keydown", function (e) {
|
||||
if (e.key === "Enter") { e.preventDefault(); submit(); }
|
||||
});
|
||||
}
|
||||
|
||||
function showPreview(url) {
|
||||
var preview = document.getElementById("vibePreview");
|
||||
var urlBar = document.getElementById("vibePreviewUrl");
|
||||
var content = document.getElementById("vibePreviewContent");
|
||||
var empty = document.getElementById("vibeCanvasEmpty");
|
||||
|
||||
if (empty) empty.style.display = "none";
|
||||
if (preview) preview.style.display = "";
|
||||
if (urlBar) urlBar.value = url;
|
||||
if (content) content.innerHTML = '<iframe src="' + url + '"></iframe>';
|
||||
}
|
||||
|
||||
function setupSidebarCollapse() {
|
||||
var btn = document.getElementById("agentsSidebarCollapse");
|
||||
var sidebar = document.getElementById("agentsSidebar");
|
||||
if (!btn || !sidebar) return;
|
||||
|
||||
btn.addEventListener("click", function () {
|
||||
sidebar.classList.toggle("collapsed");
|
||||
btn.textContent = sidebar.classList.contains("collapsed") ? "▶" : "◀";
|
||||
|
|
@ -204,40 +833,6 @@
|
|||
});
|
||||
}
|
||||
|
||||
function setupDragAndDrop() {
|
||||
var cards = document.querySelectorAll(".as-agent-card");
|
||||
cards.forEach(function (card) {
|
||||
card.addEventListener("dragstart", function (e) {
|
||||
e.dataTransfer.setData("text/plain", card.getAttribute("data-agent-id"));
|
||||
card.classList.add("dragging");
|
||||
});
|
||||
card.addEventListener("dragend", function () {
|
||||
card.classList.remove("dragging");
|
||||
});
|
||||
});
|
||||
|
||||
var dropzones = document.querySelectorAll(".as-workspace-dropzone");
|
||||
dropzones.forEach(function (zone) {
|
||||
zone.addEventListener("dragover", function (e) {
|
||||
e.preventDefault();
|
||||
zone.classList.add("drag-over");
|
||||
});
|
||||
zone.addEventListener("dragleave", function () {
|
||||
zone.classList.remove("drag-over");
|
||||
});
|
||||
zone.addEventListener("drop", function (e) {
|
||||
e.preventDefault();
|
||||
zone.classList.remove("drag-over");
|
||||
var agentId = e.dataTransfer.getData("text/plain");
|
||||
|
||||
var agentEl = document.createElement("div");
|
||||
agentEl.className = "as-workspace-agent";
|
||||
agentEl.textContent = "Agent #" + agentId;
|
||||
zone.parentNode.insertBefore(agentEl, zone);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", initVibe);
|
||||
} else {
|
||||
|
|
@ -245,3 +840,35 @@
|
|||
}
|
||||
})();
|
||||
</script>
|
||||
<style>
|
||||
@keyframes nodeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.95);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.vibe-quick-btn:hover {
|
||||
border-color: var(--accent, #84d669) !important;
|
||||
color: var(--accent, #84d669) !important;
|
||||
background: rgba(132, 214, 105, 0.06) !important;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
--sentient-text-primary: var(--text, #ffffff);
|
||||
--sentient-text-secondary: var(--text-secondary, #a0a0a0);
|
||||
--sentient-text-muted: var(--text-tertiary, #666666);
|
||||
--sentient-text-dark: #000000;
|
||||
--sentient-text-dark: var(--bg-invert, #000000);
|
||||
|
||||
--sentient-border: var(--border, #2a2a2a);
|
||||
--sentient-border-light: var(--border-light, #333333);
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
--sentient-text-primary: var(--text, #ffffff);
|
||||
--sentient-text-secondary: var(--text-secondary, #a0a0a0);
|
||||
--sentient-text-muted: var(--text-tertiary, #666666);
|
||||
--sentient-text-dark: #000000;
|
||||
--sentient-text-dark: var(--bg-invert, #000000);
|
||||
|
||||
--sentient-border: var(--border, #2a2a2a);
|
||||
--sentient-border-light: var(--border-light, #333333);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
background: var(--bg, #fff);
|
||||
font-family: 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
|
|
@ -14,8 +14,8 @@
|
|||
|
||||
.tw-tabs-header {
|
||||
display: flex;
|
||||
background: #f8f8f8;
|
||||
border-bottom: 1px solid #f0f1f2;
|
||||
background: var(--surface, #f8f8f8);
|
||||
border-bottom: 1px solid var(--border, #f0f1f2);
|
||||
min-height: 34px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
|
@ -25,12 +25,12 @@
|
|||
min-width: 140px;
|
||||
padding: 0 18px;
|
||||
border: none;
|
||||
border-right: 1px solid #f0f1f2;
|
||||
border-right: 1px solid var(--border, #f0f1f2);
|
||||
background: transparent;
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #3b3b3b;
|
||||
color: var(--text, #3b3b3b);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -40,12 +40,12 @@
|
|||
}
|
||||
|
||||
.tw-tab:hover {
|
||||
background: #fff;
|
||||
background: var(--bg, #fff);
|
||||
}
|
||||
|
||||
.tw-tab.active {
|
||||
background: #84d669;
|
||||
color: #fff;
|
||||
background: var(--accent, #84d669);
|
||||
color: var(--bg, #fff);
|
||||
}
|
||||
|
||||
.tw-tab-prefix {
|
||||
|
|
@ -69,20 +69,20 @@
|
|||
|
||||
.tw-pipeline-tabs {
|
||||
display: flex;
|
||||
background: #f8f8f8;
|
||||
border-bottom: 1px solid #f0f1f2;
|
||||
background: var(--surface, #f8f8f8);
|
||||
border-bottom: 1px solid var(--border, #f0f1f2);
|
||||
}
|
||||
|
||||
.tw-pipeline-tab {
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-right: 1px solid #f0f1f2;
|
||||
border-right: 1px solid var(--border, #f0f1f2);
|
||||
background: transparent;
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #888;
|
||||
color: var(--text-muted, #888);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
|
@ -92,13 +92,13 @@
|
|||
}
|
||||
|
||||
.tw-pipeline-tab:hover {
|
||||
background: #fff;
|
||||
color: #3b3b3b;
|
||||
background: var(--bg, #fff);
|
||||
color: var(--text, #3b3b3b);
|
||||
}
|
||||
|
||||
.tw-pipeline-tab.active {
|
||||
background: #84d669;
|
||||
color: #fff;
|
||||
background: var(--accent, #84d669);
|
||||
color: var(--bg, #fff);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #f0f1f2;
|
||||
border-bottom: 1px solid var(--border, #f0f1f2);
|
||||
}
|
||||
|
||||
.tw-filter-chip {
|
||||
|
|
@ -117,26 +117,26 @@
|
|||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 5px 12px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border: 1px solid var(--border, #e0e0e0);
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
background: var(--bg, #fff);
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
color: var(--text-muted, #666);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.tw-filter-chip:hover {
|
||||
border-color: #84d669;
|
||||
color: #3b3b3b;
|
||||
border-color: var(--accent, #84d669);
|
||||
color: var(--text, #3b3b3b);
|
||||
}
|
||||
|
||||
.tw-filter-chip.active {
|
||||
background: #84d669;
|
||||
color: #fff;
|
||||
border-color: #84d669;
|
||||
background: var(--accent, #84d669);
|
||||
color: var(--bg, #fff);
|
||||
border-color: var(--accent, #84d669);
|
||||
}
|
||||
|
||||
.tw-filter-icon {
|
||||
|
|
@ -151,37 +151,37 @@
|
|||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #f0f1f2;
|
||||
border-bottom: 1px solid var(--border, #f0f1f2);
|
||||
}
|
||||
|
||||
.tw-intent-input {
|
||||
flex: 1;
|
||||
padding: 8px 14px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border: 1px solid var(--border, #e0e0e0);
|
||||
border-radius: 6px;
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 13px;
|
||||
color: #3b3b3b;
|
||||
color: var(--text, #3b3b3b);
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
background: #fff;
|
||||
background: var(--bg, #fff);
|
||||
}
|
||||
|
||||
.tw-intent-input:focus {
|
||||
border-color: #84d669;
|
||||
box-shadow: 0 0 0 3px rgba(132, 214, 105, 0.15);
|
||||
border-color: var(--accent, #84d669);
|
||||
box-shadow: 0 0 0 3px var(--accent-light, rgba(132, 214, 105, 0.15));
|
||||
}
|
||||
|
||||
.tw-intent-input::placeholder {
|
||||
color: #bbb;
|
||||
color: var(--text-muted, #bbb);
|
||||
}
|
||||
|
||||
.tw-intent-run {
|
||||
padding: 8px 20px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: #84d669;
|
||||
color: #fff;
|
||||
background: var(--accent, #84d669);
|
||||
color: var(--bg, #fff);
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
|
|
@ -191,9 +191,9 @@
|
|||
}
|
||||
|
||||
.tw-intent-run:hover {
|
||||
background: #72c458;
|
||||
background: var(--accent-hover, #72c458);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(132, 214, 105, 0.3);
|
||||
box-shadow: 0 2px 8px var(--accent-light, rgba(132, 214, 105, 0.3));
|
||||
}
|
||||
|
||||
.tw-intent-run:disabled {
|
||||
|
|
@ -215,14 +215,14 @@
|
|||
.tw-task-list {
|
||||
width: 280px;
|
||||
min-width: 200px;
|
||||
border-right: 1px solid #f0f1f2;
|
||||
border-right: 1px solid var(--border, #f0f1f2);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tw-task-list-empty {
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
color: #bbb;
|
||||
color: var(--text-muted, #bbb);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
|
@ -239,7 +239,7 @@
|
|||
justify-content: center;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
color: #888;
|
||||
color: var(--text-muted, #888);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -250,7 +250,7 @@
|
|||
|
||||
.tw-hint {
|
||||
font-size: 12px;
|
||||
color: #bbb;
|
||||
color: var(--text-muted, #bbb);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
|
@ -262,18 +262,18 @@
|
|||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid #f0f1f2;
|
||||
border-bottom: 1px solid var(--border, #f0f1f2);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.tw-task-item:hover {
|
||||
background: #f8f8f8;
|
||||
background: var(--surface, #f8f8f8);
|
||||
}
|
||||
|
||||
.tw-task-item.active {
|
||||
background: rgba(132, 214, 105, 0.08);
|
||||
border-left: 3px solid #84d669;
|
||||
background: var(--accent-light, rgba(132, 214, 105, 0.08));
|
||||
border-left: 3px solid var(--accent, #84d669);
|
||||
}
|
||||
|
||||
.tw-task-status-dot {
|
||||
|
|
@ -284,23 +284,23 @@
|
|||
}
|
||||
|
||||
.tw-task-status-dot.running {
|
||||
background: #84d669;
|
||||
background: var(--accent, #84d669);
|
||||
}
|
||||
|
||||
.tw-task-status-dot.pending {
|
||||
background: #f59e0b;
|
||||
background: var(--warning, #f59e0b);
|
||||
}
|
||||
|
||||
.tw-task-status-dot.completed {
|
||||
background: #3b82f6;
|
||||
background: var(--success, #3b82f6);
|
||||
}
|
||||
|
||||
.tw-task-status-dot.failed {
|
||||
background: #ef4444;
|
||||
background: var(--error, #ef4444);
|
||||
}
|
||||
|
||||
.tw-task-status-dot.paused {
|
||||
background: #888;
|
||||
background: var(--text-muted, #888);
|
||||
}
|
||||
|
||||
.tw-task-item-info {
|
||||
|
|
@ -311,7 +311,7 @@
|
|||
.tw-task-item-name {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #3b3b3b;
|
||||
color: var(--text, #3b3b3b);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -319,7 +319,7 @@
|
|||
|
||||
.tw-task-item-type {
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
color: var(--text-muted, #888);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
|
@ -338,18 +338,18 @@
|
|||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #f0f1f2;
|
||||
border-bottom: 1px solid var(--border, #f0f1f2);
|
||||
}
|
||||
|
||||
.tw-agent-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: #84d669;
|
||||
background: var(--accent, #84d669);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
color: var(--bg, #fff);
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
@ -361,13 +361,13 @@
|
|||
.tw-agent-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #3b3b3b;
|
||||
color: var(--text, #3b3b3b);
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.tw-agent-subtitle {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
color: var(--text-muted, #888);
|
||||
}
|
||||
|
||||
.tw-section {
|
||||
|
|
@ -377,7 +377,7 @@
|
|||
.tw-section-title {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #888;
|
||||
color: var(--text-muted, #888);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -391,7 +391,7 @@
|
|||
|
||||
.tw-stat-card {
|
||||
padding: 12px;
|
||||
background: #f8f8f8;
|
||||
background: var(--surface, #f8f8f8);
|
||||
border-radius: 8px;
|
||||
border: 1px solid #f0f1f2;
|
||||
}
|
||||
|
|
@ -399,12 +399,12 @@
|
|||
.tw-stat-value {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #3b3b3b;
|
||||
color: var(--text, #3b3b3b);
|
||||
}
|
||||
|
||||
.tw-stat-label {
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
color: var(--text-muted, #888);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
margin-top: 2px;
|
||||
|
|
|
|||
|
|
@ -108,19 +108,19 @@
|
|||
|
||||
.taskmd-status-badge.status-running {
|
||||
background: var(--primary, #c5f82a);
|
||||
color: #000;
|
||||
color: var(--bg, #000);
|
||||
}
|
||||
|
||||
.taskmd-status-badge.status-completed,
|
||||
.taskmd-status-badge.status-complete {
|
||||
background: var(--success, #22c55e);
|
||||
color: #fff;
|
||||
background: var(--success, var(--success, #22c55e));
|
||||
color: var(--text, #fff);
|
||||
}
|
||||
|
||||
.taskmd-status-badge.status-error,
|
||||
.taskmd-status-badge.status-failed {
|
||||
background: var(--error, #ef4444);
|
||||
color: #fff;
|
||||
background: var(--error, var(--error, #ef4444));
|
||||
color: var(--text, #fff);
|
||||
}
|
||||
|
||||
.taskmd-status-badge.status-pending {
|
||||
|
|
@ -430,7 +430,7 @@
|
|||
}
|
||||
|
||||
.tree-section-dot.failed {
|
||||
background: var(--error, #ef4444);
|
||||
background: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.tree-status.completed {
|
||||
|
|
@ -442,7 +442,7 @@
|
|||
}
|
||||
|
||||
.tree-status.failed {
|
||||
color: var(--error, #ef4444);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
/* Tree Children - visible when expanded (default state) */
|
||||
|
|
@ -525,7 +525,7 @@
|
|||
}
|
||||
|
||||
.tree-item-dot.failed {
|
||||
background: var(--error, #ef4444);
|
||||
background: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
@keyframes dot-pulse {
|
||||
|
|
@ -567,7 +567,7 @@
|
|||
}
|
||||
|
||||
.tree-item-check.completed {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.tree-item-check.running {
|
||||
|
|
@ -584,7 +584,7 @@
|
|||
}
|
||||
|
||||
.tree-item.completed .tree-item-dot {
|
||||
background: var(--success, #22c55e);
|
||||
background: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
/* Parent section completed when all children done */
|
||||
|
|
@ -757,8 +757,8 @@
|
|||
}
|
||||
|
||||
.taskmd-terminal-output .markdown-content pre {
|
||||
background: #151515;
|
||||
border: 1px solid #252525;
|
||||
background: var(--surface-hover, #151515);
|
||||
border: 1px solid var(--border-hover, #252525);
|
||||
border-radius: 6px;
|
||||
padding: 12px 16px;
|
||||
margin: 12px 0;
|
||||
|
|
@ -769,7 +769,7 @@
|
|||
}
|
||||
|
||||
.taskmd-terminal-output .markdown-content code {
|
||||
background: #1a1a1a;
|
||||
background: var(--surface-active, #1a1a1a);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: "JetBrains Mono", "Fira Code", monospace;
|
||||
|
|
@ -780,7 +780,7 @@
|
|||
.taskmd-terminal-output .markdown-content pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
color: #aaa;
|
||||
color: var(--text-secondary, #aaa);
|
||||
}
|
||||
|
||||
.taskmd-terminal-output .markdown-content blockquote {
|
||||
|
|
@ -799,13 +799,13 @@
|
|||
|
||||
.taskmd-terminal-output .markdown-content th,
|
||||
.taskmd-terminal-output .markdown-content td {
|
||||
border: 1px solid #252525;
|
||||
border: 1px solid var(--border-hover, #252525);
|
||||
padding: 8px 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.taskmd-terminal-output .markdown-content th {
|
||||
background: #151515;
|
||||
background: var(--surface-hover, #151515);
|
||||
font-weight: 600;
|
||||
color: var(--text, #fff);
|
||||
}
|
||||
|
|
@ -826,11 +826,11 @@
|
|||
}
|
||||
|
||||
.taskmd-terminal-output .terminal-line.success {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.taskmd-terminal-output .terminal-line.error {
|
||||
color: var(--error, #ef4444);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.taskmd-terminal-output .terminal-line.progress {
|
||||
|
|
@ -841,7 +841,7 @@
|
|||
/* Markdown-like header styling */
|
||||
.taskmd-terminal-output .terminal-line:has-text("##"),
|
||||
.taskmd-terminal-output .terminal-line[data-type="header"] {
|
||||
color: #fff;
|
||||
color: var(--text, #fff);
|
||||
font-weight: 600;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 4px;
|
||||
|
|
@ -850,13 +850,13 @@
|
|||
|
||||
/* Code block styling */
|
||||
.taskmd-terminal-output .terminal-code {
|
||||
background: #151515;
|
||||
border: 1px solid #252525;
|
||||
background: var(--surface-hover, #151515);
|
||||
border: 1px solid var(--border-hover, #252525);
|
||||
border-radius: 6px;
|
||||
padding: 12px 16px;
|
||||
margin: 8px 0;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
color: var(--text-secondary, #aaa);
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
|
|
@ -869,28 +869,28 @@
|
|||
|
||||
/* List items */
|
||||
.taskmd-terminal-output .terminal-line.info {
|
||||
color: #888;
|
||||
color: var(--text-muted, #888);
|
||||
}
|
||||
|
||||
/* Bold text in terminal (markdown **text**) */
|
||||
.taskmd-terminal-output strong,
|
||||
.taskmd-terminal-output b {
|
||||
color: #fff;
|
||||
color: var(--text, #fff);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Inline code (markdown `code`) */
|
||||
.taskmd-terminal-output code {
|
||||
background: #1a1a1a;
|
||||
background: var(--surface-active, #1a1a1a);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
color: #c5f82a;
|
||||
color: var(--accent, #c5f82a);
|
||||
}
|
||||
|
||||
/* Timestamp styling */
|
||||
.taskmd-terminal-output .terminal-timestamp {
|
||||
color: #444;
|
||||
color: var(--text-tertiary, #444);
|
||||
font-size: 11px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
|
@ -950,7 +950,7 @@
|
|||
}
|
||||
|
||||
.taskmd-terminal-output .terminal-inline-code {
|
||||
background: #1a1a1a;
|
||||
background: var(--surface-active, #1a1a1a);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: "JetBrains Mono", "Fira Code", monospace;
|
||||
|
|
@ -973,7 +973,7 @@
|
|||
}
|
||||
|
||||
.taskmd-terminal-output .check-mark {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -1016,17 +1016,17 @@
|
|||
}
|
||||
|
||||
.taskmd-actions .btn-open-app {
|
||||
background: var(--success, #22c55e);
|
||||
color: #fff;
|
||||
background: var(--success, var(--success, #22c55e));
|
||||
color: var(--text, #fff);
|
||||
font-weight: 600;
|
||||
padding: 8px 18px;
|
||||
font-size: 13px;
|
||||
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
|
||||
box-shadow: 0 2px 8px var(--success-light, rgba(34, 197, 94, 0.3));
|
||||
}
|
||||
|
||||
.taskmd-actions .btn-open-app:hover {
|
||||
background: #16a34a;
|
||||
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
|
||||
background: var(--success-hover, #16a34a);
|
||||
box-shadow: 0 4px 12px var(--success-light, rgba(34, 197, 94, 0.4));
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
|
|
@ -1039,15 +1039,15 @@
|
|||
}
|
||||
|
||||
.taskmd-actions .btn-cancel:hover {
|
||||
border-color: var(--error, #ef4444);
|
||||
color: var(--error, #ef4444);
|
||||
border-color: var(--error, var(--error, #ef4444));
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.progress-empty {
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
color: #555;
|
||||
color: var(--text-muted, #555);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -1057,19 +1057,19 @@
|
|||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 24px;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid #ef4444;
|
||||
background: var(--error-light, rgba(239, 68, 68, 0.1));
|
||||
border: 1px solid var(--error, #ef4444);
|
||||
border-radius: 6px;
|
||||
margin: 16px 24px;
|
||||
}
|
||||
|
||||
.error-alert .error-icon {
|
||||
color: #ef4444;
|
||||
color: var(--error, #ef4444);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.error-alert .error-text {
|
||||
color: #ef4444;
|
||||
color: var(--error, #ef4444);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -1117,14 +1117,14 @@
|
|||
left: 20px;
|
||||
right: 70px;
|
||||
height: 3px;
|
||||
background: #1a1a1a;
|
||||
background: var(--surface-active, #1a1a1a);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.tree-progress-bar {
|
||||
flex: 1;
|
||||
height: 3px;
|
||||
background: #c5f82a;
|
||||
background: var(--accent, #c5f82a);
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s ease-out;
|
||||
position: relative;
|
||||
|
|
@ -1134,7 +1134,7 @@
|
|||
.tree-progress-percent {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #c5f82a;
|
||||
color: var(--accent, #c5f82a);
|
||||
min-width: 36px;
|
||||
text-align: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -108,19 +108,19 @@
|
|||
|
||||
.taskmd-status-badge.status-running {
|
||||
background: var(--primary, #c5f82a);
|
||||
color: #000;
|
||||
color: var(--bg, #000);
|
||||
}
|
||||
|
||||
.taskmd-status-badge.status-completed,
|
||||
.taskmd-status-badge.status-complete {
|
||||
background: var(--success, #22c55e);
|
||||
color: #fff;
|
||||
background: var(--success, var(--success, #22c55e));
|
||||
color: var(--text, #fff);
|
||||
}
|
||||
|
||||
.taskmd-status-badge.status-error,
|
||||
.taskmd-status-badge.status-failed {
|
||||
background: var(--error, #ef4444);
|
||||
color: #fff;
|
||||
background: var(--error, var(--error, #ef4444));
|
||||
color: var(--text, #fff);
|
||||
}
|
||||
|
||||
.taskmd-status-badge.status-pending {
|
||||
|
|
@ -430,7 +430,7 @@
|
|||
}
|
||||
|
||||
.tree-section-dot.failed {
|
||||
background: var(--error, #ef4444);
|
||||
background: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.tree-status.completed {
|
||||
|
|
@ -442,7 +442,7 @@
|
|||
}
|
||||
|
||||
.tree-status.failed {
|
||||
color: var(--error, #ef4444);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
/* Tree Children - visible when expanded (default state) */
|
||||
|
|
@ -525,7 +525,7 @@
|
|||
}
|
||||
|
||||
.tree-item-dot.failed {
|
||||
background: var(--error, #ef4444);
|
||||
background: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
@keyframes dot-pulse {
|
||||
|
|
@ -567,7 +567,7 @@
|
|||
}
|
||||
|
||||
.tree-item-check.completed {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.tree-item-check.running {
|
||||
|
|
@ -584,7 +584,7 @@
|
|||
}
|
||||
|
||||
.tree-item.completed .tree-item-dot {
|
||||
background: var(--success, #22c55e);
|
||||
background: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
/* Parent section completed when all children done */
|
||||
|
|
@ -757,8 +757,8 @@
|
|||
}
|
||||
|
||||
.taskmd-terminal-output .markdown-content pre {
|
||||
background: #151515;
|
||||
border: 1px solid #252525;
|
||||
background: var(--surface-hover, #151515);
|
||||
border: 1px solid var(--border-hover, #252525);
|
||||
border-radius: 6px;
|
||||
padding: 12px 16px;
|
||||
margin: 12px 0;
|
||||
|
|
@ -769,7 +769,7 @@
|
|||
}
|
||||
|
||||
.taskmd-terminal-output .markdown-content code {
|
||||
background: #1a1a1a;
|
||||
background: var(--surface-active, #1a1a1a);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: "JetBrains Mono", "Fira Code", monospace;
|
||||
|
|
@ -780,7 +780,7 @@
|
|||
.taskmd-terminal-output .markdown-content pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
color: #aaa;
|
||||
color: var(--text-secondary, #aaa);
|
||||
}
|
||||
|
||||
.taskmd-terminal-output .markdown-content blockquote {
|
||||
|
|
@ -799,13 +799,13 @@
|
|||
|
||||
.taskmd-terminal-output .markdown-content th,
|
||||
.taskmd-terminal-output .markdown-content td {
|
||||
border: 1px solid #252525;
|
||||
border: 1px solid var(--border-hover, #252525);
|
||||
padding: 8px 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.taskmd-terminal-output .markdown-content th {
|
||||
background: #151515;
|
||||
background: var(--surface-hover, #151515);
|
||||
font-weight: 600;
|
||||
color: var(--text, #fff);
|
||||
}
|
||||
|
|
@ -826,11 +826,11 @@
|
|||
}
|
||||
|
||||
.taskmd-terminal-output .terminal-line.success {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.taskmd-terminal-output .terminal-line.error {
|
||||
color: var(--error, #ef4444);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.taskmd-terminal-output .terminal-line.progress {
|
||||
|
|
@ -841,7 +841,7 @@
|
|||
/* Markdown-like header styling */
|
||||
.taskmd-terminal-output .terminal-line:has-text("##"),
|
||||
.taskmd-terminal-output .terminal-line[data-type="header"] {
|
||||
color: #fff;
|
||||
color: var(--text, #fff);
|
||||
font-weight: 600;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 4px;
|
||||
|
|
@ -850,13 +850,13 @@
|
|||
|
||||
/* Code block styling */
|
||||
.taskmd-terminal-output .terminal-code {
|
||||
background: #151515;
|
||||
border: 1px solid #252525;
|
||||
background: var(--surface-hover, #151515);
|
||||
border: 1px solid var(--border-hover, #252525);
|
||||
border-radius: 6px;
|
||||
padding: 12px 16px;
|
||||
margin: 8px 0;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
color: var(--text-secondary, #aaa);
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
|
|
@ -869,28 +869,28 @@
|
|||
|
||||
/* List items */
|
||||
.taskmd-terminal-output .terminal-line.info {
|
||||
color: #888;
|
||||
color: var(--text-muted, #888);
|
||||
}
|
||||
|
||||
/* Bold text in terminal (markdown **text**) */
|
||||
.taskmd-terminal-output strong,
|
||||
.taskmd-terminal-output b {
|
||||
color: #fff;
|
||||
color: var(--text, #fff);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Inline code (markdown `code`) */
|
||||
.taskmd-terminal-output code {
|
||||
background: #1a1a1a;
|
||||
background: var(--surface-active, #1a1a1a);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
color: #c5f82a;
|
||||
color: var(--accent, #c5f82a);
|
||||
}
|
||||
|
||||
/* Timestamp styling */
|
||||
.taskmd-terminal-output .terminal-timestamp {
|
||||
color: #444;
|
||||
color: var(--text-tertiary, #444);
|
||||
font-size: 11px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
|
@ -950,7 +950,7 @@
|
|||
}
|
||||
|
||||
.taskmd-terminal-output .terminal-inline-code {
|
||||
background: #1a1a1a;
|
||||
background: var(--surface-active, #1a1a1a);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: "JetBrains Mono", "Fira Code", monospace;
|
||||
|
|
@ -973,7 +973,7 @@
|
|||
}
|
||||
|
||||
.taskmd-terminal-output .check-mark {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -1016,17 +1016,17 @@
|
|||
}
|
||||
|
||||
.taskmd-actions .btn-open-app {
|
||||
background: var(--success, #22c55e);
|
||||
color: #fff;
|
||||
background: var(--success, var(--success, #22c55e));
|
||||
color: var(--text, #fff);
|
||||
font-weight: 600;
|
||||
padding: 8px 18px;
|
||||
font-size: 13px;
|
||||
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
|
||||
box-shadow: 0 2px 8px var(--success-light, rgba(34, 197, 94, 0.3));
|
||||
}
|
||||
|
||||
.taskmd-actions .btn-open-app:hover {
|
||||
background: #16a34a;
|
||||
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
|
||||
background: var(--success-hover, #16a34a);
|
||||
box-shadow: 0 4px 12px var(--success-light, rgba(34, 197, 94, 0.4));
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
|
|
@ -1039,15 +1039,15 @@
|
|||
}
|
||||
|
||||
.taskmd-actions .btn-cancel:hover {
|
||||
border-color: var(--error, #ef4444);
|
||||
color: var(--error, #ef4444);
|
||||
border-color: var(--error, var(--error, #ef4444));
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.progress-empty {
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
color: #555;
|
||||
color: var(--text-muted, #555);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -1057,19 +1057,19 @@
|
|||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 24px;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid #ef4444;
|
||||
background: var(--error-light, rgba(239, 68, 68, 0.1));
|
||||
border: 1px solid var(--error, #ef4444);
|
||||
border-radius: 6px;
|
||||
margin: 16px 24px;
|
||||
}
|
||||
|
||||
.error-alert .error-icon {
|
||||
color: #ef4444;
|
||||
color: var(--error, #ef4444);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.error-alert .error-text {
|
||||
color: #ef4444;
|
||||
color: var(--error, #ef4444);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -1117,14 +1117,14 @@
|
|||
left: 20px;
|
||||
right: 70px;
|
||||
height: 3px;
|
||||
background: #1a1a1a;
|
||||
background: var(--surface-active, #1a1a1a);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.tree-progress-bar {
|
||||
flex: 1;
|
||||
height: 3px;
|
||||
background: #c5f82a;
|
||||
background: var(--accent, #c5f82a);
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s ease-out;
|
||||
position: relative;
|
||||
|
|
@ -1134,7 +1134,7 @@
|
|||
.tree-progress-percent {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #c5f82a;
|
||||
color: var(--accent, #c5f82a);
|
||||
min-width: 36px;
|
||||
text-align: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -162,22 +162,22 @@ body:has(.tasks-app) {
|
|||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 14px 28px;
|
||||
background: #22c55e !important;
|
||||
background: var(--success, #22c55e) !important;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
color: #fff !important;
|
||||
color: var(--text, #fff) !important;
|
||||
font-family: inherit;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
|
||||
box-shadow: 0 4px 12px var(--success-light, rgba(34, 197, 94, 0.4));
|
||||
}
|
||||
|
||||
.btn-create-run:hover {
|
||||
background: #16a34a !important;
|
||||
box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5);
|
||||
background: var(--success-hover, #16a34a) !important;
|
||||
box-shadow: 0 6px 20px var(--success-light, rgba(34, 197, 94, 0.5));
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
|
|
@ -190,7 +190,7 @@ body:has(.tasks-app) {
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
border-top-color: #000;
|
||||
border-top-color: var(--bg, #000);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
|
@ -234,33 +234,33 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.intent-result .result-success {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.intent-result .result-error {
|
||||
color: var(--error, #ef4444);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.intent-result .intent-success {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
font-size: 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
background: var(--success-light, rgba(34, 197, 94, 0.1));
|
||||
border-radius: 6px;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.intent-result .intent-error {
|
||||
color: var(--error, #ef4444);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
font-size: 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
background: var(--error-light, rgba(239, 68, 68, 0.1));
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
|
|
@ -449,19 +449,19 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.task-card.status-awaiting::before {
|
||||
background: var(--warning, #f59e0b);
|
||||
background: var(--warning, var(--warning, #f59e0b));
|
||||
}
|
||||
|
||||
.task-card.status-paused::before {
|
||||
background: var(--info, #8b5cf6);
|
||||
background: var(--info, var(--info, #8b5cf6));
|
||||
}
|
||||
|
||||
.task-card.status-complete::before {
|
||||
background: var(--success, #22c55e);
|
||||
background: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.task-card.status-error::before {
|
||||
background: var(--error, #ef4444);
|
||||
background: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.task-card.status-pending::before {
|
||||
|
|
@ -518,23 +518,23 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.task-card-status.status-complete {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: var(--success, #22c55e);
|
||||
background: var(--success-light, rgba(34, 197, 94, 0.15));
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.task-card-status.status-error {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: var(--error, #ef4444);
|
||||
background: var(--error-light, rgba(239, 68, 68, 0.15));
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.task-card-status.status-awaiting {
|
||||
background: rgba(245, 158, 11, 0.15);
|
||||
color: var(--warning, #f59e0b);
|
||||
background: var(--warning-light, rgba(245, 158, 11, 0.15));
|
||||
color: var(--warning, var(--warning, #f59e0b));
|
||||
}
|
||||
|
||||
.task-card-status.status-paused {
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
color: var(--info, #8b5cf6);
|
||||
background: var(--info-light, rgba(139, 92, 246, 0.15));
|
||||
color: var(--info, var(--info, #8b5cf6));
|
||||
}
|
||||
|
||||
.task-card-body {
|
||||
|
|
@ -551,8 +551,8 @@ body:has(.tasks-app) {
|
|||
|
||||
.priority-badge.priority-high,
|
||||
.priority-badge.priority-urgent {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: var(--error, #ef4444);
|
||||
background: var(--error-light, rgba(239, 68, 68, 0.15));
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.priority-badge.priority-medium {
|
||||
|
|
@ -561,8 +561,8 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.priority-badge.priority-low {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: var(--success, #22c55e);
|
||||
background: var(--success-light, rgba(34, 197, 94, 0.15));
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.task-card-footer {
|
||||
|
|
@ -611,7 +611,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.task-card.awaiting .progress-fill {
|
||||
background: var(--warning, #f59e0b);
|
||||
background: var(--warning, var(--warning, #f59e0b));
|
||||
}
|
||||
|
||||
.progress-info {
|
||||
|
|
@ -637,7 +637,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.task-card.awaiting .progress-percent {
|
||||
color: var(--warning, #f59e0b);
|
||||
color: var(--warning, var(--warning, #f59e0b));
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -667,15 +667,15 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.status-value.status-awaiting {
|
||||
color: var(--warning, #f59e0b);
|
||||
color: var(--warning, var(--warning, #f59e0b));
|
||||
}
|
||||
|
||||
.status-value.status-paused {
|
||||
color: var(--info, #8b5cf6);
|
||||
color: var(--info, var(--info, #8b5cf6));
|
||||
}
|
||||
|
||||
.status-value.status-complete {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
/* Task Card Detail */
|
||||
|
|
@ -784,14 +784,14 @@ body:has(.tasks-app) {
|
|||
|
||||
.task-status.task-status-completed,
|
||||
.task-status.task-status-done {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: var(--success, #22c55e);
|
||||
background: var(--success-light, rgba(34, 197, 94, 0.15));
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.task-status.task-status-error,
|
||||
.task-status.task-status-failed {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: var(--error, #ef4444);
|
||||
background: var(--error-light, rgba(239, 68, 68, 0.15));
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.task-detail-meta {
|
||||
|
|
@ -872,13 +872,13 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.task-detail-section.error-section {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
background: var(--error-light, rgba(239, 68, 68, 0.1));
|
||||
border: 1px solid var(--error-light, rgba(239, 68, 68, 0.2));
|
||||
}
|
||||
|
||||
.task-detail-section .error-text {
|
||||
font-size: 13px;
|
||||
color: var(--error, #ef4444);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
|
|
@ -909,12 +909,12 @@ body:has(.tasks-app) {
|
|||
.btn-review-decision {
|
||||
background: var(--primary, #c5f82a);
|
||||
border-color: var(--primary, #c5f82a);
|
||||
color: #000;
|
||||
color: var(--bg, #000);
|
||||
}
|
||||
|
||||
.btn-review-decision:hover {
|
||||
background: #d4ff4a;
|
||||
color: #000;
|
||||
color: var(--bg, #000);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
|
|
@ -994,8 +994,8 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.status-badge.awaiting {
|
||||
background: rgba(245, 158, 11, 0.15);
|
||||
color: var(--warning, #f59e0b);
|
||||
background: var(--warning-light, rgba(245, 158, 11, 0.15));
|
||||
color: var(--warning, var(--warning, #f59e0b));
|
||||
}
|
||||
|
||||
.status-badge.active {
|
||||
|
|
@ -1012,7 +1012,7 @@ body:has(.tasks-app) {
|
|||
background: var(--primary, #c5f82a);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: #000;
|
||||
color: var(--bg, #000);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
|
@ -1036,8 +1036,8 @@ body:has(.tasks-app) {
|
|||
/* Decision Alert */
|
||||
.decision-alert {
|
||||
margin: 20px 24px;
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
background: var(--warning-light, rgba(245, 158, 11, 0.08));
|
||||
border: 1px solid var(--warning-light, rgba(245, 158, 11, 0.25));
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
@ -1059,7 +1059,7 @@ body:has(.tasks-app) {
|
|||
.decision-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--warning, #f59e0b);
|
||||
color: var(--warning, var(--warning, #f59e0b));
|
||||
margin: 0 0 4px 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
|
@ -1095,7 +1095,7 @@ body:has(.tasks-app) {
|
|||
background: var(--primary, #c5f82a);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: #000;
|
||||
color: var(--bg, #000);
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
|
|
@ -1278,13 +1278,13 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.log-step.completed {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: var(--success, #22c55e);
|
||||
background: var(--success-light, rgba(34, 197, 94, 0.15));
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.log-status {
|
||||
font-size: 12px;
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.log-subitems {
|
||||
|
|
@ -1307,7 +1307,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.log-dot.completed {
|
||||
background: var(--success, #22c55e);
|
||||
background: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.log-subname {
|
||||
|
|
@ -1669,11 +1669,11 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.toast.success {
|
||||
border-color: var(--success, #22c55e);
|
||||
border-color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
border-color: var(--error, #ef4444);
|
||||
border-color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
|
|
@ -1896,12 +1896,12 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.floating-progress-title .progress-dot.completed {
|
||||
background: var(--success, #22c55e);
|
||||
background: var(--success, var(--success, #22c55e));
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.floating-progress-title .progress-dot.error {
|
||||
background: var(--error, #ef4444);
|
||||
background: var(--error, var(--error, #ef4444));
|
||||
animation: none;
|
||||
}
|
||||
|
||||
|
|
@ -2079,7 +2079,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.metric-value.phase-analyzing {
|
||||
color: var(--warning, #f59e0b);
|
||||
color: var(--warning, var(--warning, #f59e0b));
|
||||
}
|
||||
|
||||
.metric-value.phase-parsing {
|
||||
|
|
@ -2087,7 +2087,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.metric-value.phase-database {
|
||||
color: var(--accent, #8b5cf6);
|
||||
color: var(--accent, var(--info, #8b5cf6));
|
||||
}
|
||||
|
||||
.metric-value.phase-writing {
|
||||
|
|
@ -2099,19 +2099,19 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.metric-value.phase-tools {
|
||||
color: var(--warning, #f59e0b);
|
||||
color: var(--warning, var(--warning, #f59e0b));
|
||||
}
|
||||
|
||||
.metric-value.phase-schedulers {
|
||||
color: var(--accent, #8b5cf6);
|
||||
color: var(--accent, var(--info, #8b5cf6));
|
||||
}
|
||||
|
||||
.metric-value.phase-syncing {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.metric-value.phase-completed {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
|
|
@ -2154,7 +2154,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.terminal-status.completed {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
animation: none;
|
||||
}
|
||||
|
||||
|
|
@ -2328,23 +2328,23 @@ body:has(.tasks-app) {
|
|||
.status-badge-rich.status-running,
|
||||
.status-badge-rich.status-pending {
|
||||
background: var(--primary, #c5f82a);
|
||||
color: #000;
|
||||
color: var(--bg, #000);
|
||||
}
|
||||
|
||||
.status-badge-rich.status-completed {
|
||||
background: var(--success, #22c55e);
|
||||
color: #fff;
|
||||
background: var(--success, var(--success, #22c55e));
|
||||
color: var(--text, #fff);
|
||||
}
|
||||
|
||||
.status-badge-rich.status-error,
|
||||
.status-badge-rich.status-failed {
|
||||
background: var(--error, #ef4444);
|
||||
color: #fff;
|
||||
background: var(--error, var(--error, #ef4444));
|
||||
color: var(--text, #fff);
|
||||
}
|
||||
|
||||
.status-badge-rich.status-paused {
|
||||
background: var(--warning, #f59e0b);
|
||||
color: #000;
|
||||
background: var(--warning, var(--warning, #f59e0b));
|
||||
color: var(--bg, #000);
|
||||
}
|
||||
|
||||
/* Section Boxes */
|
||||
|
|
@ -2393,11 +2393,11 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.status-dot.status-completed {
|
||||
background: var(--success, #22c55e);
|
||||
background: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.status-dot.status-error {
|
||||
background: var(--error, #ef4444);
|
||||
background: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
@keyframes pulse-status-dot {
|
||||
|
|
@ -2432,19 +2432,19 @@ body:has(.tasks-app) {
|
|||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 14px 18px;
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
border: 2px solid var(--error, #ef4444);
|
||||
background: var(--error-light, rgba(239, 68, 68, 0.15));
|
||||
border: 2px solid var(--error, var(--error, #ef4444));
|
||||
border-radius: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
color: var(--error, #ef4444);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: var(--error, #ef4444);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
|
@ -2573,7 +2573,7 @@ body:has(.tasks-app) {
|
|||
.log-step-badge {
|
||||
padding: 4px 12px;
|
||||
background: var(--primary, #c5f82a);
|
||||
color: #000;
|
||||
color: var(--bg, #000);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
border-radius: 6px;
|
||||
|
|
@ -2589,8 +2589,8 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.log-status-badge.completed {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: var(--success, #22c55e);
|
||||
background: var(--success-light, rgba(34, 197, 94, 0.15));
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.log-group-items {
|
||||
|
|
@ -2619,7 +2619,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.log-dot.completed {
|
||||
background: var(--success, #22c55e);
|
||||
background: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.log-dot.running {
|
||||
|
|
@ -2628,7 +2628,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.log-dot.failed {
|
||||
background: var(--error, #ef4444);
|
||||
background: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.log-dot.pending {
|
||||
|
|
@ -2656,7 +2656,7 @@ body:has(.tasks-app) {
|
|||
|
||||
.log-item-status {
|
||||
font-size: 0.75rem;
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.log-subitem {
|
||||
|
|
@ -2684,7 +2684,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.log-subdot.failed {
|
||||
background: var(--error, #ef4444);
|
||||
background: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.log-subdot.pending {
|
||||
|
|
@ -2769,11 +2769,11 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.terminal-line.error {
|
||||
color: var(--error, #ef4444);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.terminal-line.success {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.terminal-line.llm-stream {
|
||||
|
|
@ -2850,41 +2850,41 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.btn-action-rich.btn-pause {
|
||||
border-color: var(--warning, #f59e0b);
|
||||
border-color: var(--warning, var(--warning, #f59e0b));
|
||||
border-width: 2px;
|
||||
color: var(--warning, #f59e0b);
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
color: var(--warning, var(--warning, #f59e0b));
|
||||
background: var(--warning-light, rgba(245, 158, 11, 0.08));
|
||||
}
|
||||
|
||||
.btn-action-rich.btn-pause:hover {
|
||||
background: rgba(245, 158, 11, 0.2);
|
||||
box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
|
||||
background: var(--warning-light, rgba(245, 158, 11, 0.2));
|
||||
box-shadow: 0 0 12px var(--warning-light, rgba(245, 158, 11, 0.3));
|
||||
}
|
||||
|
||||
.btn-action-rich.btn-cancel {
|
||||
border-color: var(--error, #ef4444);
|
||||
border-color: var(--error, var(--error, #ef4444));
|
||||
border-width: 2px;
|
||||
color: var(--error, #ef4444);
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
background: var(--error-light, rgba(239, 68, 68, 0.08));
|
||||
}
|
||||
|
||||
.btn-action-rich.btn-cancel:hover {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
|
||||
background: var(--error-light, rgba(239, 68, 68, 0.2));
|
||||
box-shadow: 0 0 12px var(--error-light, rgba(239, 68, 68, 0.3));
|
||||
}
|
||||
|
||||
.btn-action-rich.btn-open-app {
|
||||
border-color: var(--success, #22c55e);
|
||||
border-color: var(--success, var(--success, #22c55e));
|
||||
border-width: 2px;
|
||||
color: var(--success, #22c55e);
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
background: var(--success-light, rgba(34, 197, 94, 0.1));
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-action-rich.btn-open-app:hover {
|
||||
background: rgba(34, 197, 94, 0.25);
|
||||
box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
|
||||
color: #fff;
|
||||
background: var(--success-light, rgba(34, 197, 94, 0.25));
|
||||
box-shadow: 0 0 12px var(--success-light, rgba(34, 197, 94, 0.4));
|
||||
color: var(--text, #fff);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
|
|
@ -2915,8 +2915,8 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.log-item-done {
|
||||
background: rgba(34, 197, 94, 0.08);
|
||||
border-left: 3px solid var(--success, #22c55e);
|
||||
background: var(--success-light, rgba(34, 197, 94, 0.08));
|
||||
border-left: 3px solid var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.log-item-current {
|
||||
|
|
@ -2930,7 +2930,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.log-check {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -2976,19 +2976,19 @@ body:has(.tasks-app) {
|
|||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid var(--error, #ef4444);
|
||||
background: var(--error-light, rgba(239, 68, 68, 0.1));
|
||||
border: 1px solid var(--error, var(--error, #ef4444));
|
||||
border-radius: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.summary-alert .alert-icon {
|
||||
color: var(--error, #ef4444);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.summary-alert .alert-text {
|
||||
font-size: 0.8rem;
|
||||
color: var(--error, #ef4444);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.progress-summary-content {
|
||||
|
|
@ -3075,7 +3075,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.section-indicator.failed {
|
||||
background: var(--error, #ef4444);
|
||||
background: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.section-name {
|
||||
|
|
@ -3244,7 +3244,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.item-check.completed {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.item-check.running {
|
||||
|
|
@ -3444,7 +3444,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.task-card.completed .task-status-badge {
|
||||
background: var(--success, #22c55e);
|
||||
background: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
/* Status section in detail panel */
|
||||
|
|
|
|||
|
|
@ -162,22 +162,22 @@ body:has(.tasks-app) {
|
|||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 14px 28px;
|
||||
background: #22c55e !important;
|
||||
background: var(--success, #22c55e) !important;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
color: #fff !important;
|
||||
color: var(--text, #fff) !important;
|
||||
font-family: inherit;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
|
||||
box-shadow: 0 4px 12px var(--success-light, rgba(34, 197, 94, 0.4));
|
||||
}
|
||||
|
||||
.btn-create-run:hover {
|
||||
background: #16a34a !important;
|
||||
box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5);
|
||||
background: var(--success-hover, #16a34a) !important;
|
||||
box-shadow: 0 6px 20px var(--success-light, rgba(34, 197, 94, 0.5));
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
|
|
@ -190,7 +190,7 @@ body:has(.tasks-app) {
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
border-top-color: #000;
|
||||
border-top-color: var(--bg, #000);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
|
@ -234,33 +234,33 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.intent-result .result-success {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.intent-result .result-error {
|
||||
color: var(--error, #ef4444);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.intent-result .intent-success {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
font-size: 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
background: var(--success-light, rgba(34, 197, 94, 0.1));
|
||||
border-radius: 6px;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.intent-result .intent-error {
|
||||
color: var(--error, #ef4444);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
font-size: 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
background: var(--error-light, rgba(239, 68, 68, 0.1));
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
|
|
@ -449,19 +449,19 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.task-card.status-awaiting::before {
|
||||
background: var(--warning, #f59e0b);
|
||||
background: var(--warning, var(--warning, #f59e0b));
|
||||
}
|
||||
|
||||
.task-card.status-paused::before {
|
||||
background: var(--info, #8b5cf6);
|
||||
background: var(--info, var(--info, #8b5cf6));
|
||||
}
|
||||
|
||||
.task-card.status-complete::before {
|
||||
background: var(--success, #22c55e);
|
||||
background: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.task-card.status-error::before {
|
||||
background: var(--error, #ef4444);
|
||||
background: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.task-card.status-pending::before {
|
||||
|
|
@ -518,23 +518,23 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.task-card-status.status-complete {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: var(--success, #22c55e);
|
||||
background: var(--success-light, rgba(34, 197, 94, 0.15));
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.task-card-status.status-error {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: var(--error, #ef4444);
|
||||
background: var(--error-light, rgba(239, 68, 68, 0.15));
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.task-card-status.status-awaiting {
|
||||
background: rgba(245, 158, 11, 0.15);
|
||||
color: var(--warning, #f59e0b);
|
||||
background: var(--warning-light, rgba(245, 158, 11, 0.15));
|
||||
color: var(--warning, var(--warning, #f59e0b));
|
||||
}
|
||||
|
||||
.task-card-status.status-paused {
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
color: var(--info, #8b5cf6);
|
||||
background: var(--info-light, rgba(139, 92, 246, 0.15));
|
||||
color: var(--info, var(--info, #8b5cf6));
|
||||
}
|
||||
|
||||
.task-card-body {
|
||||
|
|
@ -551,8 +551,8 @@ body:has(.tasks-app) {
|
|||
|
||||
.priority-badge.priority-high,
|
||||
.priority-badge.priority-urgent {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: var(--error, #ef4444);
|
||||
background: var(--error-light, rgba(239, 68, 68, 0.15));
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.priority-badge.priority-medium {
|
||||
|
|
@ -561,8 +561,8 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.priority-badge.priority-low {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: var(--success, #22c55e);
|
||||
background: var(--success-light, rgba(34, 197, 94, 0.15));
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.task-card-footer {
|
||||
|
|
@ -611,7 +611,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.task-card.awaiting .progress-fill {
|
||||
background: var(--warning, #f59e0b);
|
||||
background: var(--warning, var(--warning, #f59e0b));
|
||||
}
|
||||
|
||||
.progress-info {
|
||||
|
|
@ -637,7 +637,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.task-card.awaiting .progress-percent {
|
||||
color: var(--warning, #f59e0b);
|
||||
color: var(--warning, var(--warning, #f59e0b));
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -667,15 +667,15 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.status-value.status-awaiting {
|
||||
color: var(--warning, #f59e0b);
|
||||
color: var(--warning, var(--warning, #f59e0b));
|
||||
}
|
||||
|
||||
.status-value.status-paused {
|
||||
color: var(--info, #8b5cf6);
|
||||
color: var(--info, var(--info, #8b5cf6));
|
||||
}
|
||||
|
||||
.status-value.status-complete {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
/* Task Card Detail */
|
||||
|
|
@ -784,14 +784,14 @@ body:has(.tasks-app) {
|
|||
|
||||
.task-status.task-status-completed,
|
||||
.task-status.task-status-done {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: var(--success, #22c55e);
|
||||
background: var(--success-light, rgba(34, 197, 94, 0.15));
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.task-status.task-status-error,
|
||||
.task-status.task-status-failed {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: var(--error, #ef4444);
|
||||
background: var(--error-light, rgba(239, 68, 68, 0.15));
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.task-detail-meta {
|
||||
|
|
@ -872,13 +872,13 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.task-detail-section.error-section {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
background: var(--error-light, rgba(239, 68, 68, 0.1));
|
||||
border: 1px solid var(--error-light, rgba(239, 68, 68, 0.2));
|
||||
}
|
||||
|
||||
.task-detail-section .error-text {
|
||||
font-size: 13px;
|
||||
color: var(--error, #ef4444);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
|
|
@ -909,12 +909,12 @@ body:has(.tasks-app) {
|
|||
.btn-review-decision {
|
||||
background: var(--primary, #c5f82a);
|
||||
border-color: var(--primary, #c5f82a);
|
||||
color: #000;
|
||||
color: var(--bg, #000);
|
||||
}
|
||||
|
||||
.btn-review-decision:hover {
|
||||
background: #d4ff4a;
|
||||
color: #000;
|
||||
color: var(--bg, #000);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
|
|
@ -994,8 +994,8 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.status-badge.awaiting {
|
||||
background: rgba(245, 158, 11, 0.15);
|
||||
color: var(--warning, #f59e0b);
|
||||
background: var(--warning-light, rgba(245, 158, 11, 0.15));
|
||||
color: var(--warning, var(--warning, #f59e0b));
|
||||
}
|
||||
|
||||
.status-badge.active {
|
||||
|
|
@ -1012,7 +1012,7 @@ body:has(.tasks-app) {
|
|||
background: var(--primary, #c5f82a);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: #000;
|
||||
color: var(--bg, #000);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
|
@ -1036,8 +1036,8 @@ body:has(.tasks-app) {
|
|||
/* Decision Alert */
|
||||
.decision-alert {
|
||||
margin: 20px 24px;
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
background: var(--warning-light, rgba(245, 158, 11, 0.08));
|
||||
border: 1px solid var(--warning-light, rgba(245, 158, 11, 0.25));
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
@ -1059,7 +1059,7 @@ body:has(.tasks-app) {
|
|||
.decision-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--warning, #f59e0b);
|
||||
color: var(--warning, var(--warning, #f59e0b));
|
||||
margin: 0 0 4px 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
|
@ -1095,7 +1095,7 @@ body:has(.tasks-app) {
|
|||
background: var(--primary, #c5f82a);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: #000;
|
||||
color: var(--bg, #000);
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
|
|
@ -1278,13 +1278,13 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.log-step.completed {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: var(--success, #22c55e);
|
||||
background: var(--success-light, rgba(34, 197, 94, 0.15));
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.log-status {
|
||||
font-size: 12px;
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.log-subitems {
|
||||
|
|
@ -1307,7 +1307,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.log-dot.completed {
|
||||
background: var(--success, #22c55e);
|
||||
background: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.log-subname {
|
||||
|
|
@ -1669,11 +1669,11 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.toast.success {
|
||||
border-color: var(--success, #22c55e);
|
||||
border-color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
border-color: var(--error, #ef4444);
|
||||
border-color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
|
|
@ -1896,12 +1896,12 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.floating-progress-title .progress-dot.completed {
|
||||
background: var(--success, #22c55e);
|
||||
background: var(--success, var(--success, #22c55e));
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.floating-progress-title .progress-dot.error {
|
||||
background: var(--error, #ef4444);
|
||||
background: var(--error, var(--error, #ef4444));
|
||||
animation: none;
|
||||
}
|
||||
|
||||
|
|
@ -2079,7 +2079,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.metric-value.phase-analyzing {
|
||||
color: var(--warning, #f59e0b);
|
||||
color: var(--warning, var(--warning, #f59e0b));
|
||||
}
|
||||
|
||||
.metric-value.phase-parsing {
|
||||
|
|
@ -2087,7 +2087,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.metric-value.phase-database {
|
||||
color: var(--accent, #8b5cf6);
|
||||
color: var(--accent, var(--info, #8b5cf6));
|
||||
}
|
||||
|
||||
.metric-value.phase-writing {
|
||||
|
|
@ -2099,19 +2099,19 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.metric-value.phase-tools {
|
||||
color: var(--warning, #f59e0b);
|
||||
color: var(--warning, var(--warning, #f59e0b));
|
||||
}
|
||||
|
||||
.metric-value.phase-schedulers {
|
||||
color: var(--accent, #8b5cf6);
|
||||
color: var(--accent, var(--info, #8b5cf6));
|
||||
}
|
||||
|
||||
.metric-value.phase-syncing {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.metric-value.phase-completed {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
|
|
@ -2154,7 +2154,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.terminal-status.completed {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
animation: none;
|
||||
}
|
||||
|
||||
|
|
@ -2328,23 +2328,23 @@ body:has(.tasks-app) {
|
|||
.status-badge-rich.status-running,
|
||||
.status-badge-rich.status-pending {
|
||||
background: var(--primary, #c5f82a);
|
||||
color: #000;
|
||||
color: var(--bg, #000);
|
||||
}
|
||||
|
||||
.status-badge-rich.status-completed {
|
||||
background: var(--success, #22c55e);
|
||||
color: #fff;
|
||||
background: var(--success, var(--success, #22c55e));
|
||||
color: var(--text, #fff);
|
||||
}
|
||||
|
||||
.status-badge-rich.status-error,
|
||||
.status-badge-rich.status-failed {
|
||||
background: var(--error, #ef4444);
|
||||
color: #fff;
|
||||
background: var(--error, var(--error, #ef4444));
|
||||
color: var(--text, #fff);
|
||||
}
|
||||
|
||||
.status-badge-rich.status-paused {
|
||||
background: var(--warning, #f59e0b);
|
||||
color: #000;
|
||||
background: var(--warning, var(--warning, #f59e0b));
|
||||
color: var(--bg, #000);
|
||||
}
|
||||
|
||||
/* Section Boxes */
|
||||
|
|
@ -2393,11 +2393,11 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.status-dot.status-completed {
|
||||
background: var(--success, #22c55e);
|
||||
background: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.status-dot.status-error {
|
||||
background: var(--error, #ef4444);
|
||||
background: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
@keyframes pulse-status-dot {
|
||||
|
|
@ -2432,19 +2432,19 @@ body:has(.tasks-app) {
|
|||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 14px 18px;
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
border: 2px solid var(--error, #ef4444);
|
||||
background: var(--error-light, rgba(239, 68, 68, 0.15));
|
||||
border: 2px solid var(--error, var(--error, #ef4444));
|
||||
border-radius: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
color: var(--error, #ef4444);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: var(--error, #ef4444);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
|
|
@ -2573,7 +2573,7 @@ body:has(.tasks-app) {
|
|||
.log-step-badge {
|
||||
padding: 4px 12px;
|
||||
background: var(--primary, #c5f82a);
|
||||
color: #000;
|
||||
color: var(--bg, #000);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
border-radius: 6px;
|
||||
|
|
@ -2589,8 +2589,8 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.log-status-badge.completed {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: var(--success, #22c55e);
|
||||
background: var(--success-light, rgba(34, 197, 94, 0.15));
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.log-group-items {
|
||||
|
|
@ -2619,7 +2619,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.log-dot.completed {
|
||||
background: var(--success, #22c55e);
|
||||
background: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.log-dot.running {
|
||||
|
|
@ -2628,7 +2628,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.log-dot.failed {
|
||||
background: var(--error, #ef4444);
|
||||
background: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.log-dot.pending {
|
||||
|
|
@ -2656,7 +2656,7 @@ body:has(.tasks-app) {
|
|||
|
||||
.log-item-status {
|
||||
font-size: 0.75rem;
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.log-subitem {
|
||||
|
|
@ -2684,7 +2684,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.log-subdot.failed {
|
||||
background: var(--error, #ef4444);
|
||||
background: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.log-subdot.pending {
|
||||
|
|
@ -2769,11 +2769,11 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.terminal-line.error {
|
||||
color: var(--error, #ef4444);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.terminal-line.success {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.terminal-line.llm-stream {
|
||||
|
|
@ -2850,41 +2850,41 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.btn-action-rich.btn-pause {
|
||||
border-color: var(--warning, #f59e0b);
|
||||
border-color: var(--warning, var(--warning, #f59e0b));
|
||||
border-width: 2px;
|
||||
color: var(--warning, #f59e0b);
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
color: var(--warning, var(--warning, #f59e0b));
|
||||
background: var(--warning-light, rgba(245, 158, 11, 0.08));
|
||||
}
|
||||
|
||||
.btn-action-rich.btn-pause:hover {
|
||||
background: rgba(245, 158, 11, 0.2);
|
||||
box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
|
||||
background: var(--warning-light, rgba(245, 158, 11, 0.2));
|
||||
box-shadow: 0 0 12px var(--warning-light, rgba(245, 158, 11, 0.3));
|
||||
}
|
||||
|
||||
.btn-action-rich.btn-cancel {
|
||||
border-color: var(--error, #ef4444);
|
||||
border-color: var(--error, var(--error, #ef4444));
|
||||
border-width: 2px;
|
||||
color: var(--error, #ef4444);
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
background: var(--error-light, rgba(239, 68, 68, 0.08));
|
||||
}
|
||||
|
||||
.btn-action-rich.btn-cancel:hover {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
|
||||
background: var(--error-light, rgba(239, 68, 68, 0.2));
|
||||
box-shadow: 0 0 12px var(--error-light, rgba(239, 68, 68, 0.3));
|
||||
}
|
||||
|
||||
.btn-action-rich.btn-open-app {
|
||||
border-color: var(--success, #22c55e);
|
||||
border-color: var(--success, var(--success, #22c55e));
|
||||
border-width: 2px;
|
||||
color: var(--success, #22c55e);
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
background: var(--success-light, rgba(34, 197, 94, 0.1));
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-action-rich.btn-open-app:hover {
|
||||
background: rgba(34, 197, 94, 0.25);
|
||||
box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
|
||||
color: #fff;
|
||||
background: var(--success-light, rgba(34, 197, 94, 0.25));
|
||||
box-shadow: 0 0 12px var(--success-light, rgba(34, 197, 94, 0.4));
|
||||
color: var(--text, #fff);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
|
|
@ -2915,8 +2915,8 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.log-item-done {
|
||||
background: rgba(34, 197, 94, 0.08);
|
||||
border-left: 3px solid var(--success, #22c55e);
|
||||
background: var(--success-light, rgba(34, 197, 94, 0.08));
|
||||
border-left: 3px solid var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.log-item-current {
|
||||
|
|
@ -2930,7 +2930,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.log-check {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -2976,19 +2976,19 @@ body:has(.tasks-app) {
|
|||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid var(--error, #ef4444);
|
||||
background: var(--error-light, rgba(239, 68, 68, 0.1));
|
||||
border: 1px solid var(--error, var(--error, #ef4444));
|
||||
border-radius: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.summary-alert .alert-icon {
|
||||
color: var(--error, #ef4444);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.summary-alert .alert-text {
|
||||
font-size: 0.8rem;
|
||||
color: var(--error, #ef4444);
|
||||
color: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.progress-summary-content {
|
||||
|
|
@ -3075,7 +3075,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.section-indicator.failed {
|
||||
background: var(--error, #ef4444);
|
||||
background: var(--error, var(--error, #ef4444));
|
||||
}
|
||||
|
||||
.section-name {
|
||||
|
|
@ -3244,7 +3244,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.item-check.completed {
|
||||
color: var(--success, #22c55e);
|
||||
color: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
.item-check.running {
|
||||
|
|
@ -3444,7 +3444,7 @@ body:has(.tasks-app) {
|
|||
}
|
||||
|
||||
.task-card.completed .task-status-badge {
|
||||
background: var(--success, #22c55e);
|
||||
background: var(--success, var(--success, #22c55e));
|
||||
}
|
||||
|
||||
/* Status section in detail panel */
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
background: var(--bg, #fff);
|
||||
font-family: 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
|
|
@ -18,20 +18,20 @@
|
|||
|
||||
.vibe-pipeline {
|
||||
display: flex;
|
||||
background: #f8f8f8;
|
||||
border-bottom: 1px solid #f0f1f2;
|
||||
background: var(--surface, #f8f8f8);
|
||||
border-bottom: 1px solid var(--border, #f0f1f2);
|
||||
}
|
||||
|
||||
.vibe-pipeline-tab {
|
||||
flex: 1;
|
||||
height: 34px;
|
||||
border: none;
|
||||
border-right: 1px solid #f0f1f2;
|
||||
border-right: 1px solid var(--border, #f0f1f2);
|
||||
background: transparent;
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
color: var(--text-muted, #888);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
|
@ -41,13 +41,13 @@
|
|||
}
|
||||
|
||||
.vibe-pipeline-tab:hover {
|
||||
background: #fff;
|
||||
color: #3b3b3b;
|
||||
background: var(--bg, #fff);
|
||||
color: var(--text, #3b3b3b);
|
||||
}
|
||||
|
||||
.vibe-pipeline-tab.active {
|
||||
background: #84d669;
|
||||
color: #fff;
|
||||
background: var(--accent, #84d669);
|
||||
color: var(--bg, #fff);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
|
@ -90,13 +90,13 @@
|
|||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #3b3b3b;
|
||||
color: var(--text, #3b3b3b);
|
||||
}
|
||||
|
||||
.vibe-canvas-empty p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
color: var(--text-muted, #888);
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
|
|
@ -111,30 +111,30 @@
|
|||
.vibe-prompt-input {
|
||||
flex: 1;
|
||||
padding: 10px 16px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border: 2px solid var(--border, #e0e0e0);
|
||||
border-radius: 8px;
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 13px;
|
||||
color: #3b3b3b;
|
||||
color: var(--text, #3b3b3b);
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.vibe-prompt-input:focus {
|
||||
border-color: #84d669;
|
||||
box-shadow: 0 0 0 3px rgba(132, 214, 105, 0.15);
|
||||
border-color: var(--accent, #84d669);
|
||||
box-shadow: 0 0 0 3px var(--accent-light, rgba(132, 214, 105, 0.15));
|
||||
}
|
||||
|
||||
.vibe-prompt-input::placeholder {
|
||||
color: #bbb;
|
||||
color: var(--text-muted, #bbb);
|
||||
}
|
||||
|
||||
.vibe-prompt-btn {
|
||||
padding: 10px 24px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: #84d669;
|
||||
color: #fff;
|
||||
background: var(--accent, #84d669);
|
||||
color: var(--bg, #fff);
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
|
|
@ -143,9 +143,9 @@
|
|||
}
|
||||
|
||||
.vibe-prompt-btn:hover {
|
||||
background: #72c458;
|
||||
background: var(--accent-hover, #72c458);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(132, 214, 105, 0.3);
|
||||
box-shadow: 0 4px 12px var(--accent-light, rgba(132, 214, 105, 0.3));
|
||||
}
|
||||
|
||||
.vibe-prompt-btn:disabled {
|
||||
|
|
@ -164,7 +164,7 @@
|
|||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top: 1px solid #f0f1f2;
|
||||
border-top: 1px solid var(--border, #f0f1f2);
|
||||
}
|
||||
|
||||
.vibe-preview-header {
|
||||
|
|
@ -172,23 +172,23 @@
|
|||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
background: #f8f8f8;
|
||||
border-bottom: 1px solid #f0f1f2;
|
||||
background: var(--surface, #f8f8f8);
|
||||
border-bottom: 1px solid var(--border, #f0f1f2);
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #3b3b3b;
|
||||
color: var(--text, #3b3b3b);
|
||||
}
|
||||
|
||||
.vibe-preview-url {
|
||||
flex: 1;
|
||||
padding: 3px 10px;
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
background: var(--bg, #fff);
|
||||
border: 1px solid var(--border, #e0e0e0);
|
||||
border-radius: 4px;
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
color: var(--text-muted, #666);
|
||||
}
|
||||
|
||||
.vibe-preview-content {
|
||||
|
|
@ -208,8 +208,8 @@
|
|||
.agents-sidebar {
|
||||
width: 260px;
|
||||
min-width: 260px;
|
||||
background: #f8f8f8;
|
||||
border-left: 1px solid #f0f1f2;
|
||||
background: var(--surface, #f8f8f8);
|
||||
border-left: 1px solid var(--border, #f0f1f2);
|
||||
overflow-y: auto;
|
||||
transition: width 0.25s, min-width 0.25s;
|
||||
}
|
||||
|
|
@ -222,7 +222,7 @@
|
|||
|
||||
/* Section */
|
||||
.as-section {
|
||||
border-bottom: 1px solid #f0f1f2;
|
||||
border-bottom: 1px solid var(--border, #f0f1f2);
|
||||
}
|
||||
|
||||
.as-section-header {
|
||||
|
|
@ -236,7 +236,7 @@
|
|||
margin: 0;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #888;
|
||||
color: var(--text-muted, #888);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
|
@ -246,7 +246,7 @@
|
|||
height: 20px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #888;
|
||||
color: var(--text-muted, #888);
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
padding: 0;
|
||||
|
|
@ -258,8 +258,8 @@
|
|||
}
|
||||
|
||||
.as-collapse-btn:hover {
|
||||
background: #e0e0e0;
|
||||
color: #3b3b3b;
|
||||
background: var(--surface-active, #e0e0e0);
|
||||
color: var(--text, #3b3b3b);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
|
@ -271,8 +271,8 @@
|
|||
}
|
||||
|
||||
.as-agent-card {
|
||||
background: #fff;
|
||||
border: 1px solid #f0f1f2;
|
||||
background: var(--bg, #fff);
|
||||
border: 1px solid var(--border, #f0f1f2);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 6px;
|
||||
|
|
@ -281,8 +281,8 @@
|
|||
}
|
||||
|
||||
.as-agent-card:hover {
|
||||
border-color: #84d669;
|
||||
box-shadow: 0 2px 8px rgba(132, 214, 105, 0.1);
|
||||
border-color: var(--accent, #84d669);
|
||||
box-shadow: 0 2px 8px var(--accent-light, rgba(132, 214, 105, 0.1));
|
||||
}
|
||||
|
||||
.as-agent-card.dragging {
|
||||
|
|
@ -305,30 +305,30 @@
|
|||
}
|
||||
|
||||
.as-status-dot.green {
|
||||
background: #84d669;
|
||||
background: var(--accent, #84d669);
|
||||
}
|
||||
|
||||
.as-status-dot.yellow {
|
||||
background: #f59e0b;
|
||||
background: var(--warning, #f59e0b);
|
||||
}
|
||||
|
||||
.as-status-dot.red {
|
||||
background: #ef4444;
|
||||
background: var(--error, #ef4444);
|
||||
}
|
||||
|
||||
.as-status-dot.gray {
|
||||
background: #ccc;
|
||||
background: var(--text-muted, #ccc);
|
||||
}
|
||||
|
||||
.as-agent-name {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #3b3b3b;
|
||||
color: var(--text, #3b3b3b);
|
||||
}
|
||||
|
||||
.as-drag-handle {
|
||||
color: #ccc;
|
||||
color: var(--text-muted, #ccc);
|
||||
font-size: 14px;
|
||||
cursor: grab;
|
||||
}
|
||||
|
|
@ -356,41 +356,41 @@
|
|||
}
|
||||
|
||||
.badge-evolved {
|
||||
background: #84d669;
|
||||
color: #fff;
|
||||
background: var(--accent, #84d669);
|
||||
color: var(--bg, #fff);
|
||||
}
|
||||
|
||||
.badge-bred {
|
||||
background: #f59e0b;
|
||||
color: #fff;
|
||||
background: var(--warning, #f59e0b);
|
||||
color: var(--bg, #fff);
|
||||
}
|
||||
|
||||
.badge-wild {
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
background: var(--error, #ef4444);
|
||||
color: var(--bg, #fff);
|
||||
}
|
||||
|
||||
/* Quota Bar */
|
||||
.as-agent-bar {
|
||||
height: 3px;
|
||||
background: #f0f1f2;
|
||||
background: var(--surface, #f0f1f2);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.as-bar-fill {
|
||||
height: 100%;
|
||||
background: #84d669;
|
||||
background: var(--accent, #84d669);
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.as-bar-fill.bred {
|
||||
background: #f59e0b;
|
||||
background: var(--warning, #f59e0b);
|
||||
}
|
||||
|
||||
.as-bar-fill.wild {
|
||||
background: #ef4444;
|
||||
background: var(--error, #ef4444);
|
||||
}
|
||||
|
||||
/* Create Agent Button */
|
||||
|
|
@ -398,21 +398,21 @@
|
|||
width: calc(100% - 16px);
|
||||
margin: 8px 8px;
|
||||
padding: 8px;
|
||||
border: 2px dashed #e0e0e0;
|
||||
border: 2px dashed var(--border, #e0e0e0);
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #888;
|
||||
color: var(--text-muted, #888);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.as-create-btn:hover {
|
||||
border-color: #84d669;
|
||||
color: #84d669;
|
||||
background: rgba(132, 214, 105, 0.05);
|
||||
border-color: var(--accent, #84d669);
|
||||
color: var(--accent, #84d669);
|
||||
background: var(--accent-light, rgba(132, 214, 105, 0.05));
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
|
@ -439,19 +439,19 @@
|
|||
font-family: 'Fira Code', monospace;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #3b3b3b;
|
||||
color: var(--text, #3b3b3b);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.as-workspace-toggle:hover {
|
||||
background: #fff;
|
||||
background: var(--bg, #fff);
|
||||
}
|
||||
|
||||
.as-workspace-arrow {
|
||||
font-size: 8px;
|
||||
color: #888;
|
||||
color: var(--text-muted, #888);
|
||||
width: 8px;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
|
|
@ -459,8 +459,8 @@
|
|||
.as-workspace-count {
|
||||
margin-left: auto;
|
||||
font-size: 10px;
|
||||
background: #e0e0e0;
|
||||
color: #666;
|
||||
background: var(--surface-active, #e0e0e0);
|
||||
color: var(--text-muted, #666);
|
||||
padding: 1px 6px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
|
@ -472,23 +472,23 @@
|
|||
.as-workspace-agent {
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
border-left: 2px solid #f0f1f2;
|
||||
color: var(--text-muted, #666);
|
||||
border-left: 2px solid var(--border, #f0f1f2);
|
||||
}
|
||||
|
||||
.as-workspace-dropzone {
|
||||
margin-top: 4px;
|
||||
padding: 10px;
|
||||
border: 2px dashed #e0e0e0;
|
||||
border: 2px dashed var(--border, #e0e0e0);
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
color: #ccc;
|
||||
color: var(--text-muted, #ccc);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.as-workspace-dropzone.drag-over {
|
||||
border-color: #84d669;
|
||||
background: rgba(132, 214, 105, 0.05);
|
||||
color: #84d669;
|
||||
border-color: var(--accent, #84d669);
|
||||
background: var(--accent-light, rgba(132, 214, 105, 0.05));
|
||||
color: var(--accent, #84d669);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue