mirror of
https://github.com/agent0ai/agent-zero.git
synced 2026-05-22 03:06:54 +00:00
process groups and steps css polish
remove leftover user status label
This commit is contained in:
3clyp50
Alessandro
parent
8d94e676e4
commit
b0d83a439d
5 changed files with 59 additions and 129 deletions
|
|
@ -95,7 +95,6 @@ const model = {
|
|||
'warning': 'warning',
|
||||
'error': 'error',
|
||||
'util': 'memory',
|
||||
'user': 'person',
|
||||
'done': 'done_all'
|
||||
};
|
||||
return icons[type] || 'circle';
|
||||
|
|
@ -117,7 +116,6 @@ const model = {
|
|||
'warning': 'WRN',
|
||||
'error': 'ERR',
|
||||
'util': 'UTL',
|
||||
'user': 'USR',
|
||||
'done': 'END'
|
||||
};
|
||||
return codes[type] || type?.toUpperCase()?.slice(0, 4) || 'GEN';
|
||||
|
|
@ -139,7 +137,6 @@ const model = {
|
|||
'warning': 'status-wrn',
|
||||
'error': 'status-err',
|
||||
'util': 'status-utl',
|
||||
'user': 'status-usr',
|
||||
'done': 'status-end'
|
||||
};
|
||||
return colors[type] || 'status-gen';
|
||||
|
|
|
|||
|
|
@ -90,7 +90,6 @@
|
|||
font-size: var(--font-size-smaller);
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
opacity: 0.9;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -265,12 +264,7 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* END status with checkmark icon - use ::before only */
|
||||
.status-end::before {
|
||||
content: "✓";
|
||||
margin-right: 2px;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* END status with checkmark icon (icon added via JS, no ::before needed) */
|
||||
|
||||
/* Completed process group styling */
|
||||
.process-group-completed {
|
||||
|
|
@ -300,7 +294,12 @@
|
|||
font-size: 0.65rem;
|
||||
font-family: var(--font-family-code);
|
||||
color: var(--color-text);
|
||||
opacity: 0.6;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.process-group-header .group-metrics .material-symbols-outlined {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.process-group-header .group-metrics span[class^="metric-"] {
|
||||
|
|
@ -309,10 +308,6 @@
|
|||
gap: 2px;
|
||||
}
|
||||
|
||||
.process-group-header .group-metrics .metric-value {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Legacy timestamp/duration (for backwards compatibility) */
|
||||
.process-group-header .group-timestamp {
|
||||
font-size: 0.65rem;
|
||||
|
|
@ -422,7 +417,6 @@
|
|||
flex: 1;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text);
|
||||
opacity: 0.85;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -459,6 +453,23 @@
|
|||
opacity: 0;
|
||||
transition: grid-template-rows 0.2s ease-out, opacity 0.15s ease-out;
|
||||
overflow: hidden;
|
||||
-webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE/Edge */
|
||||
overscroll-behavior: contain; /* avoid scroll chaining */
|
||||
}
|
||||
/* Hide scrollbar for Chrome/Safari/Webkit */
|
||||
.process-step-detail::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.process-step-detail-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.process-step-detail > .process-step-detail-content {
|
||||
|
|
@ -480,6 +491,11 @@
|
|||
line-height: 1.5;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE/Edge */
|
||||
overscroll-behavior: contain; /* avoid scroll chaining */
|
||||
}
|
||||
|
||||
.process-step-detail-content pre {
|
||||
|
|
@ -502,6 +518,7 @@
|
|||
.process-step-detail-content .step-kvp {
|
||||
display: flex;
|
||||
gap: var(--spacing-xs);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.process-step-detail-content .step-kvp-key {
|
||||
|
|
@ -510,6 +527,8 @@
|
|||
opacity: 0.8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
||||
.process-step-detail-content .step-kvp-key .material-symbols-outlined {
|
||||
|
|
@ -521,7 +540,9 @@
|
|||
color: var(--color-text);
|
||||
opacity: 0.75;
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Thoughts styling - single icon with plain text */
|
||||
|
|
@ -542,7 +563,7 @@
|
|||
.process-step-detail-content .thought-text {
|
||||
font-size: 0.72rem;
|
||||
color: var(--color-text);
|
||||
opacity: 0.8;
|
||||
opacity: 0.65;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
|
|
@ -625,24 +646,6 @@
|
|||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.process-step-detail-content .terminal-cmd {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
color: var(--color-text);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.process-step-detail-content .terminal-prompt {
|
||||
color: #7ee787;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.process-step-detail-content .terminal-code {
|
||||
color: var(--color-text);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.process-step-detail-content .terminal-output {
|
||||
margin: var(--spacing-xs) 0 0 0;
|
||||
padding: var(--spacing-xs);
|
||||
|
|
@ -653,64 +656,47 @@
|
|||
word-break: break-word;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE/Edge */
|
||||
overscroll-behavior: contain; /* avoid scroll chaining */
|
||||
}
|
||||
|
||||
.process-step-detail-content .terminal-output::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
#chat-input::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
#chat-input::-webkit-scrollbar-track { background: transparent; margin: 4px 0; border-radius: 6px; }
|
||||
#chat-input::-webkit-scrollbar-thumb { background-color: rgba(155,155,155,0.5); border-radius: 6px; -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; }
|
||||
#chat-input::-webkit-scrollbar-thumb:hover { background-color: rgba(155,155,155,0.7); }
|
||||
|
||||
/* Light mode terminal */
|
||||
.light-mode .process-step-detail-content .terminal-prompt {
|
||||
color: #1a7f37;
|
||||
}
|
||||
|
||||
.light-mode .process-step-detail-content .terminal-output {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: #24292f;
|
||||
}
|
||||
|
||||
/* Light mode adjustments */
|
||||
.light-mode .process-group {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.light-mode .process-group.embedded {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
border-bottom-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.light-mode .message-container.has-process-group {
|
||||
background: var(--color-panel);
|
||||
border-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.light-mode .process-group:hover {
|
||||
border-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.light-mode .process-group.expanded .process-group-content {
|
||||
border-top-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.light-mode .process-step:hover {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.light-mode .process-step-detail-content {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.light-mode .process-group-header .step-count {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* Light mode text colors for process group */
|
||||
.light-mode .process-group-header .group-title,
|
||||
.light-mode .process-step-header .step-title {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.light-mode .process-group-header .group-metrics {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Light mode status badge adjustments for better contrast */
|
||||
.light-mode .status-gen {
|
||||
background-color: rgba(14, 165, 233, 0.12);
|
||||
|
|
|
|||
|
|
@ -168,6 +168,10 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.light-mode #left-panel {
|
||||
box-shadow: 1px 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#left-panel {
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -485,56 +485,6 @@
|
|||
border-bottom: none;
|
||||
}
|
||||
|
||||
.light-mode .message-default {
|
||||
background-color: transparent;
|
||||
color: #1a242f;
|
||||
}
|
||||
|
||||
.light-mode .message-agent {
|
||||
background-color: transparent;
|
||||
color: #356ca3;
|
||||
}
|
||||
|
||||
.light-mode .message-agent-response {
|
||||
background-color: transparent;
|
||||
color: #188216;
|
||||
}
|
||||
|
||||
.light-mode .message-agent-delegation {
|
||||
background-color: transparent;
|
||||
color: #12685e;
|
||||
}
|
||||
|
||||
.light-mode .message-tool {
|
||||
background-color: transparent;
|
||||
color: #1c3c88;
|
||||
}
|
||||
|
||||
.light-mode .message-code-exe {
|
||||
background-color: transparent;
|
||||
color: #6c43b0;
|
||||
}
|
||||
|
||||
.light-mode .message-browser {
|
||||
background-color: transparent;
|
||||
color: #6c43b0;
|
||||
}
|
||||
|
||||
.light-mode .message-info {
|
||||
background-color: transparent;
|
||||
color: #3f3f3f;
|
||||
}
|
||||
|
||||
.light-mode .message-util {
|
||||
background-color: transparent;
|
||||
color: #5b5540;
|
||||
}
|
||||
|
||||
.light-mode .message-warning {
|
||||
background-color: transparent;
|
||||
color: #8f4800;
|
||||
}
|
||||
|
||||
.light-mode .message-error {
|
||||
background-color: rgba(220, 60, 60, 0.15);
|
||||
border: 1px solid rgba(180, 40, 40, 0.4);
|
||||
|
|
@ -542,11 +492,7 @@
|
|||
}
|
||||
|
||||
.light-mode .message-user {
|
||||
background-color: var(--color-panel);
|
||||
color: #4e4e4e;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: inset 0 2rem 2rem -2rem rgba(0, 0, 0, 0.15),
|
||||
inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* Markdown in messages */
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
--color-input-focus-dark: #101010;
|
||||
|
||||
/* Light mode */
|
||||
--color-background-light: #dbdbdb;
|
||||
--color-background-light: #f6f6f6;
|
||||
--color-text-light: #333333;
|
||||
--color-primary-light: #384653;
|
||||
--color-secondary-light: #e8eaf6;
|
||||
|
|
@ -126,7 +126,7 @@ body,
|
|||
.switch-label {
|
||||
-webkit-transition: background-color 0.3s, color 0.3s, border-color 0.3s;
|
||||
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
|
||||
color: var(--color-text);
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -196,11 +196,8 @@ div#right-panel::-webkit-scrollbar-thumb:hover {
|
|||
|
||||
#time-date {
|
||||
color: var(--color-text);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
line-height: 1.2;
|
||||
font-family: var(--font-family-code);
|
||||
}
|
||||
|
||||
#user-date {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue