bluemsi/connectai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Release v2.2.0: Milestone - Human-Centric UI & Workflow Evolution

Browse Source
This commit is contained in:
g1nation
2026-05-14 22:58:45 +09:00
parent d9d89e6db7
commit e86e3177c7
12 changed files with 334 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
media/sidebar.css
+140 -7
View File
@@ -332,7 +332,24 @@
.company-name-input:focus { border-color: var(--accent); outline: none; }
/* Agent cards inside the manage overlay. */
.company-agent-list { display: flex; flex-direction: column; gap: 6px; padding: 0; }
.company-agent-list { display: flex; flex-direction: column; gap: 8px; padding: 0; }
.company-agent-section-label {
list-style: none;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin: 6px 2px -2px;
color: var(--text-bright);
font-size: 11px;
font-weight: 700;
}
.company-agent-section-label small {
color: var(--text-dim);
font-size: 9.5px;
font-weight: 500;
text-align: right;
}
/*
* Agent card layout, rebuilt 2026-05-14 to fix overflow:
* - Card itself stacks its rows VERTICALLY (`flex-direction: column`).
@@ -351,12 +368,14 @@
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 10px;
padding: 10px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
list-style: none;
overflow: hidden;
position: relative;
transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
/* 비활성 카드는 더 흐릿하게 + 좌측 액센트 바를 떨궈서 한 눈에 그룹 구분되도록. */
.company-agent-card[data-active="false"] {
@@ -365,7 +384,7 @@
border-style: dashed;
}
.company-agent-card[data-active="true"] {
border-left: 3px solid var(--accent);
border-left: 3px solid var(--agent-color, var(--accent));
}
.company-agent-card[data-locked="true"] {
border-left-color: #FACC15; /* CEO는 골드 액센트 */
@@ -423,6 +442,7 @@
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
border-radius: 6px; background: var(--bg-secondary);
border: 1px solid var(--border);
}
.company-agent-body {
flex: 1 1 180px; /* prefer ≥180px, shrink down to its content */
@@ -440,20 +460,47 @@
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-top: 1px;
}
.company-agent-meta {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-top: 5px;
}
.company-agent-chip {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 7px;
border-radius: 999px;
border: 1px solid var(--border);
color: var(--text-dim);
background: var(--bg-secondary);
font-size: 9.5px;
line-height: 1;
white-space: nowrap;
}
.company-agent-chip.tuned {
color: var(--accent);
border-color: var(--accent);
background: var(--accent-glow);
}
.company-agent-controls {
display: flex; align-items: center; gap: 6px;
flex-shrink: 0;
margin-left: auto; /* push to the right of the head row */
max-width: 100%;
flex-wrap: wrap;
justify-content: flex-end;
}
.company-agent-toggle {
background: transparent; border: 1px solid var(--border);
color: var(--text-dim); font-size: 10px; font-weight: 600;
padding: 3px 8px; border-radius: 999px; cursor: pointer;
padding: 4px 9px; border-radius: 999px; cursor: pointer;
flex-shrink: 0;
}
.company-agent-card[data-active="true"] .company-agent-toggle {
border-color: var(--accent); color: var(--accent);
border-color: var(--agent-color, var(--accent)); color: var(--text-bright);
background: var(--accent-glow);
}
.company-agent-model {
background: var(--input-bg); border: 1px solid var(--border);
@@ -475,7 +522,7 @@
.company-agent-edit {
background: transparent; border: 1px solid var(--border);
color: var(--text-dim); font-size: 10px;
padding: 3px 6px; border-radius: 6px; cursor: pointer;
padding: 4px 8px; border-radius: 6px; cursor: pointer;
flex-shrink: 0;
}
.company-agent-edit:hover { color: var(--accent); border-color: var(--accent); }
@@ -484,6 +531,36 @@
background: var(--accent-glow);
}
.company-agent-settings {
display: none;
margin-top: 2px;
padding: 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg-secondary);
}
.company-agent-card[data-settings-expanded="true"] .company-agent-settings { display: block; }
.company-agent-settings-grid {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: 8px;
margin-bottom: 8px;
}
.company-agent-settings-grid label {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
color: var(--text-dim);
font-size: 10px;
}
.company-agent-settings .company-agent-role-select,
.company-agent-settings .company-agent-model {
width: 100%;
max-width: 100%;
height: 28px;
}
/* Per-agent Knowledge Mix slider. Wraps so the slider always has
breathing room — hint + checkbox flow to next line when needed. */
.company-agent-mix-row {
@@ -597,13 +674,69 @@
background: var(--accent); border-color: var(--accent); color: #fff;
}
.pipeline-empty-state {
list-style: none;
color: var(--text-dim);
padding: 12px 10px;
border: 1px dashed var(--border);
border-radius: 8px;
background: var(--bg-secondary);
font-size: 11px;
text-align: center;
}
.pipeline-summary-card {
list-style: none;
padding: 10px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
}
.pipeline-summary-head {
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
}
.pipeline-summary-title {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.25;
}
.pipeline-summary-title strong {
color: var(--text-bright);
font-size: 12px;
}
.pipeline-summary-title span {
color: var(--text-dim);
font-size: 10px;
}
.pipeline-summary-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.pipeline-summary-flow {
margin-top: 8px;
padding: 7px 8px;
border-radius: 6px;
background: var(--bg-secondary);
color: var(--text-primary);
font-size: 10.5px;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Pipeline stage cards ───────────────────────────────────── */
.pipeline-stage-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 8px;
}
.pipeline-stage-list:empty::before {
content: '아직 단계가 없습니다. "+ Stage 추가" 로 첫 단계를 만드세요.';
content: '아직 단계가 없습니다. "+ 단계 추가" 로 첫 작업을 만드세요.';
font-size: 11px; color: var(--text-dim); font-style: italic;
padding: 12px 4px; display: block; text-align: center;
}