loadtoagent 1.1.0 → 1.3.1

package/renderer/styles-components.css

@@ -29,6 +29,16 @@ button {
   color: inherit;
 }
 
+button[aria-busy="true"] {
+  cursor: progress;
+  opacity: .72;
+}
+
+[aria-invalid="true"] {
+  border-color: #ff7188!important;
+  box-shadow: 0 0 0 3px rgba(255,113,136,.14)!important;
+}
+
 .workspace-section {
   display: flex;
   flex: 1;
@@ -58,10 +68,13 @@ button {
 }
 
 .workspace-item strong {
+  min-width: 0;
+  flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-weight: 550;
+  font-size: 13px;
+  font-weight: 620;
 }
 
 .provider-mini-mark {
@@ -93,8 +106,9 @@ button {
   content: "";
   width: 6px;
   height: 6px;
+  flex: 0 0 7px;
   border-radius: 2px;
-  border: 1px solid #526075;
+  border: 1px solid #718296;
 }
 
 .workspace-item button {
@@ -111,10 +125,10 @@ button {
 }
 
 .workspace-empty {
-  padding: 9px;
-  color: #536074;
-  font-size: 10px;
-  line-height: 1.5;
+  padding: 10px;
+  color: #93a3b2;
+  font-size: 12px;
+  line-height: 1.55;
 }
 
 .workspace-item.projectless:before {
@@ -129,12 +143,31 @@ button {
   padding: 2px 6px;
   border-radius: 999px;
   background: #1a2530;
-  color: #91a0ad;
-  font-size: 9px;
+  color: #afbdc8;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.workspace-item.observed-project small,
+.workspace-item[data-workspace="all"] small {
+  margin-left: auto;
+  min-width: 20px;
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: #1a2530;
+  color: #afbdc8;
+  font-size: 12px;
   font-weight: 700;
   text-align: center;
 }
 
+.workspace-item.observed-project.selected small,
+.workspace-item[data-workspace="all"].selected small {
+  background: rgba(89,216,255,.14);
+  color: #81ddf8;
+}
+
 .workspace-item.projectless.selected small {
   background: rgba(79,209,167,.15);
   color: #6ee0b8;
@@ -744,6 +777,25 @@ button {
   font-size: 12px;
 }
 
+.search-clear {
+  width: 40px;
+  height: 40px;
+  flex: 0 0 40px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: #8fa0b2;
+  cursor: pointer;
+}
+
+.search-clear:hover {
+  background: #1a2431;
+  color: #f0f6fb;
+}
+
 .session-tools select {
   padding: 0 28px 0 10px;
   border: 1px solid var(--line);
@@ -770,7 +822,7 @@ button {
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  min-height: 30px;
+  min-height: 36px;
   padding: 0 9px;
   border: 1px solid transparent;
   border-radius: 7px;
@@ -781,6 +833,31 @@ button {
   transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, transform var(--motion-fast) ease;
 }
 
+.filter-reset {
+  min-height: 40px;
+  padding: 0 11px;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: #0d121b;
+  color: #aab7c7;
+  white-space: nowrap;
+}
+
+.filter-reset:hover {
+  border-color: #3b4c60;
+  background: #151d28;
+  color: #f0f6fb;
+}
+
+@media (pointer:coarse) {
+  .search-clear,
+  .provider-filter-chip,
+  .filter-reset {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
 .provider-filter-mark {
   font-family: "Cascadia Code", Consolas, monospace;
   font-size: 9px;

package/renderer/styles-management.css

@@ -0,0 +1,355 @@
+/*
+ * Agent management
+ * ----------------
+ * Action inbox, operational health, structured progress, evidence, and outcome surfaces.
+ */
+
+.advanced-tools-nav {
+  margin: 8px 0;
+  border: 1px solid var(--line-soft);
+  border-radius: 12px;
+  background: rgba(10, 15, 24, .54);
+  overflow: hidden;
+}
+
+.advanced-tools-nav > summary {
+  display: grid;
+  grid-template-columns: 28px 1fr auto 14px;
+  align-items: center;
+  gap: 8px;
+  min-height: 42px;
+  padding: 0 12px;
+  color: var(--muted);
+  cursor: pointer;
+  list-style: none;
+}
+
+.advanced-tools-nav > summary::-webkit-details-marker { display: none; }
+.advanced-tools-nav > summary:hover,
+.advanced-tools-nav.active > summary { color: var(--text); background: rgba(89, 216, 255, .06); }
+.advanced-tools-nav > summary b { min-width: 24px; padding: 3px 7px; border-radius: 999px; color: #8ce6ff; background: #152d3a; text-align: center; font-size: 12px; }
+.advanced-tools-nav > summary i { font-style: normal; transition: transform .18s ease; }
+.advanced-tools-nav[open] > summary i { transform: rotate(180deg); }
+.advanced-tools-list { display: grid; gap: 3px; padding: 4px; border-top: 1px solid var(--line-soft); }
+.advanced-tools-list .nav-item { width: 100%; min-height: 38px; padding-left: 10px; }
+
+.operations-overview,
+.attention-inbox {
+  margin-bottom: 18px;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background: #0b121c;
+  overflow: hidden;
+}
+
+.operations-overview > header,
+.attention-inbox-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 15px 18px;
+  border-bottom: 1px solid var(--line-soft);
+}
+
+.operations-heading {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.operations-signal {
+  width: 36px;
+  height: 36px;
+  flex: 0 0 36px;
+  display: grid;
+  place-items: center;
+  border: 1px solid rgba(246, 189, 85, .28);
+  border-radius: 11px;
+  background: rgba(246, 189, 85, .08);
+  color: #f3c66f;
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.operations-heading-copy { min-width: 0; }
+.operations-heading-copy p,
+.attention-inbox-head p { margin: 0 0 5px; color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
+.operations-heading-copy p { margin-bottom: 3px; color: #95a8b6; font-size: 12px; letter-spacing: .08em; }
+.operations-heading-copy h2,
+.attention-inbox-head h2 { margin: 0; font-size: clamp(20px, 2vw, 28px); }
+.operations-heading-copy h2 { font-size: 19px; letter-spacing: -.025em; }
+.operations-heading-copy > span,
+.attention-inbox-head span { max-width: 620px; color: var(--muted); line-height: 1.55; }
+.operations-heading-copy > span { display: block; margin-top: 3px; font-size: 12px; }
+.operations-review-total {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 8px 11px;
+  border: 1px solid #2a3a48;
+  border-radius: 10px;
+  background: #101a26;
+}
+.operations-review-total strong { color: #f4f8fa; font-size: 21px; line-height: 1; }
+.operations-review-total span { color: #a7b6c2; font-size: 12px; white-space: nowrap; }
+.attention-inbox-head strong { color: var(--text); font-size: 36px; }
+
+.operations-metrics {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  border-bottom: 1px solid var(--line-soft);
+}
+
+.operations-metrics > * {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 54px;
+  padding: 10px 16px;
+  border: 0;
+  border-right: 1px solid var(--line-soft);
+  color: var(--muted);
+  background: transparent;
+  text-align: left;
+  font-size: 12px;
+}
+
+.operations-metrics > *:last-child { border-right: 0; }
+.operations-metrics button { cursor: pointer; }
+.operations-metrics button:hover { background: rgba(89, 216, 255, .055); }
+.operations-metrics b { color: var(--text); font-size: 21px; line-height: 1; }
+.operations-metrics > *:nth-child(1) b { color: #ff8792; }
+.operations-metrics > *:nth-child(2) b { color: #efc96f; }
+.operations-metrics > *:nth-child(3) b { color: #8edff4; }
+.operations-metrics > *:nth-child(4) b { color: #b8a8de; }
+.operations-metrics > *:nth-child(5) b { color: #83ddb1; }
+.operations-priority { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 10px; }
+.operations-priority button { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 11px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 10px; color: var(--text); background: #0c131d; text-align: left; cursor: pointer; }
+.operations-priority button:hover { border-color: #35516a; }
+.operations-priority i { width: 8px; height: 8px; border-radius: 50%; background: #e9b949; box-shadow: 0 0 9px rgba(233, 185, 73, .45); }
+.operations-priority i.critical { background: #ff6b76; box-shadow: 0 0 9px rgba(255, 107, 118, .5); }
+.operations-priority i.warning { background: #e9b949; box-shadow: 0 0 9px rgba(233, 185, 73, .45); }
+.operations-priority i.attention { background: #64cbe5; box-shadow: 0 0 9px rgba(100, 203, 229, .42); }
+.operations-priority i.unknown { background: #aa92dc; box-shadow: 0 0 9px rgba(170, 146, 220, .42); }
+.operations-priority span { min-width: 0; }
+.operations-priority b,
+.operations-priority small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.operations-priority b { font-size: 13px; }
+.operations-priority small,
+.operations-priority em { color: #a6b4c0; font-size: 12px; font-style: normal; }
+.operations-priority small { margin-top: 2px; }
+.operations-more { display: flex; justify-content: flex-end; padding: 0 10px 10px; }
+.operations-more button { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid #2d4659; border-radius: 9px; color: #b9d9e4; background: #0d1923; font-size: 12px; font-weight: 750; cursor: pointer; }
+.operations-more button:hover { border-color: #4cabc3; color: #effcff; }
+.operations-more button b { color: #6dd6ee; }
+.operations-more button i { font-style: normal; }
+.operations-clear { margin: 0; padding: 13px 18px; color: #8edab7; font-size: 12px; }
+
+.attention-inbox-summary { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--line-soft); }
+.attention-inbox-summary button { min-height: 44px; display: inline-flex; gap: 7px; align-items: center; padding: 7px 12px; border: 1px solid var(--line-soft); border-radius: 999px; color: var(--muted); background: #0c141e; font-size: 12px; cursor: pointer; }
+.attention-inbox-summary button:hover { border-color: #3c596b; color: #e2ebf0; }
+.attention-inbox-summary button[aria-pressed="true"] { border-color: #4cabc3; color: #e8f8fb; background: #122935; box-shadow: inset 0 0 0 1px rgba(89,216,255,.12); }
+.attention-inbox-summary button b { color: currentColor; }
+.attention-inbox-summary i { width: 6px; height: 6px; border-radius: 50%; background: #e9b949; }
+.attention-inbox-summary [data-management-inbox-filter="critical"] i { background: #ff6b76; }
+.attention-inbox-summary [data-management-inbox-filter="warning"] i { background: #e9b949; }
+.attention-inbox-summary [data-management-inbox-filter="attention"] i { background: #64cbe5; }
+.attention-inbox-summary [data-management-inbox-filter="unknown"] i { background: #aa92dc; }
+.attention-inbox-summary [data-management-inbox-filter="all"] i { background: #9dabb6; }
+.attention-card-list { display: grid; gap: 12px; padding: 16px; }
+.attention-card { position: relative; display: grid; gap: 13px; padding: 18px; border: 1px solid var(--line); border-left: 3px solid var(--management-provider, #e9b949); border-radius: 16px; background: #0b121d; }
+.attention-card > header { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; }
+.attention-card > header h3 { margin: 3px 0 0; font-size: 17px; }
+.attention-card > header small { color: var(--management-provider, var(--cyan)); }
+.confidence { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; font-style: normal; }
+.confidence.high { color: #82ddb0; border-color: rgba(76, 227, 154, .3); }
+.attention-reason { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 11px; background: rgba(233, 185, 73, .07); }
+.attention-reason span { color: #e9b949; font-size: 12px; font-weight: 800; }
+.attention-reason p { margin: 0; color: #e7edf6; line-height: 1.55; }
+.attention-reason small { color: var(--muted); }
+.management-quick-actions,
+.management-control-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
+.management-quick-actions button,
+.management-control-buttons button { min-height: 34px; padding: 0 12px; border: 1px solid #2a3a4c; border-radius: 9px; color: #c9d5e4; background: #111a27; }
+.management-quick-actions button:hover,
+.management-control-buttons button:hover { border-color: var(--cyan); color: #fff; }
+.management-quick-actions .approve { color: #72dfaa; border-color: rgba(76, 227, 154, .35); background: rgba(76, 227, 154, .08); }
+.management-control-buttons .danger { color: #ff9ba3; border-color: rgba(255, 107, 118, .3); }
+
+.management-progress,
+.management-health,
+.management-artifacts,
+.management-checks,
+.management-evidence,
+.management-controls,
+.management-attention-detail,
+.management-outcome { border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(9, 15, 24, .72); overflow: hidden; }
+.management-progress > header,
+.management-health > header,
+.management-artifacts > header,
+.management-checks > header,
+.management-evidence > header,
+.management-controls > header { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--line-soft); }
+.management-progress > header span,
+.management-health > header span,
+.management-artifacts > header span,
+.management-checks > header span,
+.management-evidence > header span,
+.management-controls > header span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
+.management-progress > header b,
+.management-health > header b,
+.management-artifacts > header b,
+.management-checks > header b,
+.management-evidence > header b,
+.management-controls > header b { margin-left: auto; color: #cbd6e3; font-size: 12px; }
+.management-progress > header strong,
+.management-health > header strong { min-width: 40px; color: var(--green); text-align: right; }
+.management-progress-track { height: 5px; margin: 12px 13px 0; border-radius: 999px; background: #182333; overflow: hidden; }
+.management-progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--green)); }
+.management-progress > p { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 13px 12px; }
+.management-progress > p b { font-size: 12px; }
+.management-progress > p span { color: var(--muted); font-size: 12px; }
+.management-progress > aside { margin: 0 13px 12px; padding: 9px 11px; border-radius: 9px; color: #f0cc75; background: rgba(233, 185, 73, .08); }
+.management-progress > aside span { display: block; margin-bottom: 3px; font-size: 12px; }
+.management-checkpoints,
+.management-health ul,
+.management-artifacts ul,
+.management-checks ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
+.management-checkpoints li,
+.management-health li,
+.management-artifacts li,
+.management-checks li { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-top: 1px solid var(--line-soft); }
+.management-checkpoints i,
+.management-health li i,
+.management-checks li i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #728197; }
+.management-checkpoints li.completed i,
+.management-checks li.passed i { background: var(--green); }
+.management-checkpoints li.failed i,
+.management-health li.critical i,
+.management-checks li.failed i { background: #ff6b76; }
+.management-checkpoints li.running i,
+.management-health li.warning i { background: #e9b949; }
+.management-checkpoints div { min-width: 0; flex: 1; }
+.management-checkpoints b,
+.management-checkpoints small { display: block; }
+.management-checkpoints small,
+.management-checkpoints li > span,
+.management-health li span,
+.management-artifacts li span,
+.management-checks li span { margin-left: auto; color: var(--muted); font-size: 12px; }
+.management-health > p,
+.management-artifacts > p,
+.management-checks > p { margin: 0; padding: 13px; color: var(--muted); }
+.management-health.critical > header strong { color: #ff7d87; }
+.management-health.warning > header strong { color: #e9b949; }
+.management-health.healthy > header strong { color: var(--green); }
+
+.management-detail {
+  container: management-detail / inline-size;
+  display: grid;
+  gap: 12px;
+}
+.management-detail .management-health li {
+  display: grid;
+  grid-template-columns: 7px minmax(148px, max-content) minmax(0, 1fr);
+  align-items: start;
+}
+.management-detail .management-health li > i { margin-top: .4em; }
+.management-detail .management-health li > b {
+  min-width: 0;
+  font-size: 13px;
+  line-height: 1.45;
+}
+.management-detail .management-health li > span {
+  min-width: 0;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+.management-outcome { padding: 16px; border-color: #2b3a4d; }
+.management-outcome > header { display: flex; justify-content: space-between; gap: 16px; }
+.management-outcome h3 { margin: 4px 0 0; font-size: 20px; }
+.management-outcome header span { color: var(--green); font-size: 12px; font-weight: 800; }
+.management-outcome em { align-self: start; padding: 5px 8px; border-radius: 999px; color: #f0c56d; background: rgba(233, 185, 73, .09); font-size: 12px; font-style: normal; }
+.management-outcome em.verified { color: #74dca8; background: rgba(76, 227, 154, .09); }
+.management-outcome > p { margin: 14px 0 0; color: #d8e2ee; line-height: 1.65; white-space: pre-wrap; }
+.management-attention-detail { padding: 14px; border-color: rgba(233, 185, 73, .25); }
+.management-attention-detail > header span { display: block; margin-bottom: 5px; color: #e9b949; font-size: 12px; }
+.management-attention-detail > header b { line-height: 1.5; }
+.management-attention-detail .management-quick-actions { margin-top: 12px; }
+.management-attention-detail .agent-command-panel { margin-top: 12px; }
+.management-artifacts li i { min-width: 50px; padding: 3px 6px; border-radius: 6px; color: #7ddaf1; background: #142330; font-size: 12px; font-style: normal; text-align: center; text-transform: uppercase; }
+.management-artifacts li {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+}
+.management-artifacts li b {
+  min-width: 0;
+  overflow: hidden;
+  color: #e5ebf3;
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1.45;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.management-evidence dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
+.management-evidence dl div { padding: 11px 13px; border-right: 1px solid var(--line-soft); }
+.management-evidence dl div:last-child { border-right: 0; }
+.management-evidence dt { color: var(--muted); font-size: 12px; }
+.management-evidence dd { margin: 4px 0 0; color: #dce6f1; font-size: 12px; }
+.management-evidence > p { margin: 0; padding: 10px 13px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; }
+.management-controls .management-control-buttons { padding: 12px; }
+.management-empty { display: grid; gap: 5px; padding: 34px; color: var(--muted); text-align: center; }
+.management-empty b { color: var(--text); font-size: 18px; }
+
+.session-card > .management-progress,
+.session-card > .management-health { margin-top: 10px; }
+.session-card > .management-health ul { display: flex; flex-wrap: wrap; padding: 8px 10px; }
+.session-card > .management-health li { padding: 4px 7px; border: 0; }
+.session-card > .management-health li span { display: none; }
+
+.global-stat.critical strong { color: #ff7d87; }
+.global-stat.warning strong { color: #e9b949; }
+
+@container management-detail (max-width: 600px) {
+  .management-detail .management-health li {
+    grid-template-columns: 7px minmax(0, 1fr);
+    column-gap: 10px;
+    row-gap: 2px;
+  }
+  .management-detail .management-health li > b,
+  .management-detail .management-health li > span { grid-column: 2; }
+  .management-detail .management-health li > span {
+    display: -webkit-box;
+    margin-left: 0;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+}
+
+@media (max-width: 980px) {
+  .operations-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+  .operations-metrics > * { min-width: 0; padding-inline: 9px; }
+  .operations-priority { grid-template-columns: 1fr; }
+  .attention-card > header { grid-template-columns: 38px 1fr; }
+  .attention-card > header .confidence { grid-column: 2; justify-self: start; }
+  .attention-reason { grid-template-columns: 1fr; }
+  .management-evidence dl { grid-template-columns: 1fr; }
+  .management-evidence dl div { border-right: 0; border-bottom: 1px solid var(--line-soft); }
+}
+
+@media (max-width: 640px) {
+  .operations-overview > header,
+  .attention-inbox-head { align-items: flex-start; flex-direction: column; padding: 18px; }
+  .operations-review-total { align-self: stretch; justify-content: space-between; }
+  .operations-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .operations-metrics > * { min-height: 62px; padding: 12px; }
+  .attention-card-list { padding: 10px; }
+  .attention-card { padding: 13px; }
+  .management-progress > p { align-items: flex-start; flex-direction: column; }
+}

package/renderer/styles-overlays.css

@@ -210,6 +210,12 @@
   color: #c6f8e4;
 }
 
+.drawer-meta .origin-project-meta {
+  border-color: rgba(89,216,255,.24);
+  background: rgba(89,216,255,.06);
+  color: #79cce4;
+}
+
 .drawer-meta .work-state.working {
   border-color: rgba(76,227,154,.3);
   background: rgba(76,227,154,.09);
@@ -229,8 +235,8 @@
 }
 
 .close-button {
-  width: 32px;
-  height: 32px;
+  width: 40px;
+  height: 40px;
   margin-left: auto;
   border: 1px solid var(--line);
   border-radius: 9px;

package/renderer/styles-product.css

@@ -466,8 +466,8 @@
   background: transparent;
   color: #7f8ba0;
   cursor: pointer;
-  width: 34px;
-  height: 34px;
+  width: 40px;
+  height: 40px;
   font-size: 17px;
 }
 
@@ -551,15 +551,18 @@
 
 .workspace-list {
   display: grid;
-  overflow: auto;
-  padding-right: 2px;
-  gap: 5px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-right: 4px;
+  gap: 3px;
+  scrollbar-width: thin;
+  scrollbar-color: #314352 transparent;
 }
 
 .workspace-row {
   position: relative;
   display: grid;
-  grid-template-columns: minmax(0,1fr) 34px;
+  grid-template-columns: minmax(0,1fr) 44px;
   align-items: center;
   gap: 4px;
 }
@@ -573,14 +576,15 @@
   transition: transform var(--motion-fast) var(--motion-ease),background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,box-shadow var(--motion-medium) ease,opacity var(--motion-fast) ease;
   display: flex;
   align-items: center;
-  gap: 9px;
-  padding: 0 8px;
+  gap: 8px;
+  padding: 0 9px;
   border-radius: 9px;
-  min-height: 42px;
+  min-height: 44px;
   height: auto;
   font-size: 13px;
   position: relative;
   width: 100%;
+  min-width: 0;
   border: 1px solid transparent;
   background: transparent;
   color: #b4bfcc;
@@ -607,19 +611,23 @@
 }
 
 .workspace-remove {
-  width: 34px;
-  height: 34px;
-  border: 0;
-  border-radius: 9px;
-  background: #131c27;
-  color: #94a2b2;
-  font-size: 15px;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: #8292a1;
+  font-size: 14px;
   cursor: pointer;
+  opacity: .72;
 }
 
 .workspace-remove:hover {
+  border-color: rgba(255, 107, 127, .25);
   background: #2d1d24;
   color: #ff9baa;
+  opacity: 1;
 }
 
 .child-row {