loadtoagent 1.0.0

package/renderer/styles-collaboration.css

@@ -0,0 +1,534 @@
+/*
+ * Collaboration detail
+ * --------------------
+ * Subagent state, delegated work, communication history, and memory detail.
+ */
+
+.session-card.subagent {
+  margin-left: 11px;
+  border-style: dashed;
+}
+
+.session-card.subagent:after {
+  content: "SUB";
+  position: absolute;
+  right: 14px;
+  top: 14px;
+  color: color-mix(in srgb,var(--provider) 66%,#8c98a8);
+  font-size: 7px;
+  font-weight: 800;
+  letter-spacing: .15em;
+}
+
+.chat-row.assistant .memory-candidates {
+  background: color-mix(in srgb,var(--drawer-provider) 3%,#0b0f16);
+}
+
+.memory-candidates {
+  border: 1px solid var(--line-soft);
+  border-radius: 11px;
+  background: #0b0f16;
+  color: #bec9d6;
+  font-size: 13px;
+  line-height: 1.68;
+  padding: 13px;
+  display: grid;
+  gap: 10px;
+}
+
+.memory-candidates .structured-heading {
+  margin-bottom: 1px;
+}
+
+.memory-candidate {
+  padding: 12px 13px;
+  border: 1px solid #243242;
+  border-radius: 10px;
+  background: #0d141d;
+}
+
+.memory-candidate header {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.memory-candidate header>b {
+  width: 21px;
+  height: 21px;
+  display: grid;
+  place-items: center;
+  border-radius: 6px;
+  background: color-mix(in srgb,var(--drawer-provider) 12%,#17212d);
+  color: var(--drawer-provider);
+  font-size: 10px;
+}
+
+.memory-target {
+  padding: 3px 7px;
+  border-radius: 6px;
+  font-size: 10px;
+  max-width: 220px;
+  overflow: hidden;
+  background: #18222e;
+  color: #aebbc9;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.memory-category {
+  padding: 3px 7px;
+  border-radius: 6px;
+  font-size: 10px;
+  margin-left: auto;
+  background: #10241f;
+  color: #74d9ae;
+}
+
+.memory-candidate p {
+  margin: 9px 0 0;
+  color: #c3ced9;
+  font-size: 12px;
+  line-height: 1.65;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.agent-communication-panel {
+  position: relative;
+  z-index: 2;
+  margin-top: 18px;
+  border: 1px solid #20363c;
+  border-radius: 14px;
+  background: rgba(6,14,19,.9);
+  overflow: hidden;
+}
+
+.agent-communication-panel>header {
+  min-height: 54px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 13px;
+  border-bottom: 1px solid #1b2b32;
+  background: rgba(15,31,35,.78);
+}
+
+.agent-communication-panel>header b {
+  display: block;
+  color: #dce9eb;
+  font-size: 12px;
+}
+
+.agent-communication-panel>header small {
+  display: block;
+  margin-top: 4px;
+  color: #71868d;
+  font-size: 9px;
+}
+
+.agent-communication-panel>header em {
+  padding: 5px 7px;
+  border-radius: 8px;
+  background: rgba(81,213,169,.09);
+  color: #75dfb8;
+  font-size: 9px;
+  font-style: normal;
+}
+
+.agent-communication-panel.empty>p {
+  padding: 18px;
+  color: #6f828c;
+  font-size: 10px;
+  text-align: center;
+}
+
+.agent-communication-list {
+  display: grid;
+  max-height: 330px;
+  overflow: auto;
+  scrollbar-color: #29434a transparent;
+}
+
+.agent-communication-event {
+  display: grid;
+  grid-template-columns: minmax(150px,210px) minmax(0,1fr) auto;
+  align-items: center;
+  gap: 12px;
+  min-height: 58px;
+  padding: 9px 12px;
+  border-bottom: 1px solid #17262d;
+}
+
+.agent-communication-event:last-child {
+  border-bottom: 0;
+}
+
+.agent-communication-event.result {
+  background: rgba(93,170,205,.035);
+}
+
+.agent-communication-event.assignment {
+  background: rgba(82,215,171,.028);
+}
+
+.communication-route {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+}
+
+.communication-route b {
+  min-width: 0;
+  overflow: hidden;
+  color: #b8c8cf;
+  font-size: 9px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.communication-route i {
+  color: #4c9e87;
+  font-size: 12px;
+  font-style: normal;
+}
+
+.communication-copy {
+  min-width: 0;
+}
+
+.communication-copy small {
+  display: block;
+  color: #6edcaf;
+  font-size: 8px;
+}
+
+.communication-copy strong {
+  display: -webkit-box;
+  margin-top: 5px;
+  overflow: hidden;
+  color: #a9b8c0;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1.4;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.agent-communication-event.result .communication-copy small {
+  color: #8fc6de;
+}
+
+.agent-communication-event time {
+  color: #596f79;
+  font-size: 8px;
+}
+
+.subagent-filterbar {
+  display: grid;
+  grid-template-columns: minmax(0,1fr) minmax(150px,210px) minmax(105px,130px) auto;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 10px;
+  padding: 8px;
+  border: 1px solid #21343c;
+  border-radius: 11px;
+  background: rgba(7,16,22,.88);
+}
+
+.subagent-status-filters {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.subagent-status-filters::-webkit-scrollbar {
+  display: none;
+}
+
+.subagent-status-filters button {
+  height: 30px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  padding: 0 9px;
+  border: 1px solid #263943;
+  border-radius: 8px;
+  background: #0d171e;
+  color: #788b97;
+  font-size: 9px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.subagent-status-filters button b {
+  min-width: 17px;
+  padding: 2px 4px;
+  border-radius: 6px;
+  background: #15242d;
+  color: #9aadb7;
+  font-size: 8px;
+}
+
+.subagent-status-filters button.active {
+  border-color: #43826f;
+  background: #153029;
+  color: #8be7c1;
+}
+
+.subagent-status-filters button.active b {
+  background: #214a3d;
+  color: #a7f1d4;
+}
+
+.subagent-search input {
+  width: 100%;
+  height: 30px;
+  border: 1px solid #293e49;
+  border-radius: 8px;
+  background: #091219;
+  color: #bac8d0;
+  font-size: 9px;
+  outline: none;
+  padding: 0 9px;
+}
+
+.subagent-provider-filter select {
+  width: 100%;
+  height: 30px;
+  border: 1px solid #293e49;
+  border-radius: 8px;
+  background: #091219;
+  color: #bac8d0;
+  font-size: 9px;
+  outline: none;
+  padding: 0 25px 0 8px;
+}
+
+.subagent-search input:focus {
+  border-color: #477c70;
+  box-shadow: 0 0 0 3px rgba(85,214,168,.06);
+}
+
+.subagent-provider-filter select:focus {
+  border-color: #477c70;
+  box-shadow: 0 0 0 3px rgba(85,214,168,.06);
+}
+
+.subagent-search input::placeholder {
+  color: #526673;
+}
+
+.subagent-filter-result {
+  color: #617783;
+  font-size: 8px;
+  white-space: nowrap;
+}
+
+.subagent-filter-result b {
+  color: #87d9bc;
+  font-size: 10px;
+}
+
+.subagent-conversation-summary {
+  display: grid;
+  grid-template-columns: repeat(3,minmax(0,1fr));
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.subagent-conversation-summary>span {
+  padding: 11px;
+  border: 1px solid #263b45;
+  border-radius: 10px;
+  background: #0c171e;
+}
+
+.subagent-conversation-summary small {
+  display: block;
+  color: #718591;
+  font-size: 9px;
+}
+
+.subagent-conversation-summary b {
+  display: block;
+  margin-top: 5px;
+  color: #dce8ec;
+  font-size: 17px;
+}
+
+.subagent-conversation-summary>span:nth-child(1) b {
+  color: #76dfb8;
+}
+
+.subagent-conversation-summary>span:nth-child(2) b {
+  color: #8fc8df;
+}
+
+.subagent-dialog-row.user .chat-bubble {
+  background: #10231e;
+}
+
+.subagent-dialog-row.assistant .chat-bubble {
+  background: #111d28;
+}
+
+.subagent-dialog-row.system .chat-bubble {
+  background: #0d151c;
+}
+
+.subagent-dialog-list .chat-row.assistant {
+  padding-left: 28px;
+}
+
+.subagent-dialog-list .chat-row.user {
+  padding-right: 28px;
+}
+
+.subagent-dialog-row .chat-bubble {
+  border-color: #283c46;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.subagent-dialog-row .chat-bubble-head {
+  gap: 7px;
+  min-width: 0;
+}
+
+.subagent-dialog-row .chat-bubble-head b {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.subagent-dialog-row .subagent-route {
+  margin-right: auto;
+  padding: 3px 6px;
+  border-radius: 6px;
+  background: #13242a;
+  color: #6fa89b;
+  font-size: 8px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.subagent-event-label {
+  display: block;
+  margin: 6px 0 -2px;
+  color: #6b8f8a;
+  font-size: 8px;
+  font-weight: 750;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.subagent-message-preview {
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.subagent-message-preview p {
+  display: -webkit-box;
+  margin: 0;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+}
+
+.subagent-message-preview.is-truncated p {
+  color: #a9bac2;
+}
+
+.completed-subagent-disclosure {
+  grid-column: 1/-1;
+  min-width: 0;
+}
+
+.completed-subagent-disclosure>button {
+  width: 100%;
+  min-height: 58px;
+  display: grid;
+  grid-template-columns: 32px minmax(0,1fr) auto;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 11px;
+  border: 1px solid #2a3b46;
+  border-radius: 11px;
+  background: linear-gradient(135deg,#101a22,#0c141b);
+  color: #8d9dab;
+  text-align: left;
+  cursor: pointer;
+}
+
+.completed-subagent-disclosure>button:hover {
+  border-color: #415866;
+  background: linear-gradient(135deg,#14212a,#0e1920);
+  color: #b7c4ce;
+}
+
+.completed-subagent-disclosure b {
+  display: block;
+  color: #b7c3cd;
+  font-size: 11px;
+}
+
+.completed-subagent-disclosure small {
+  display: block;
+  margin-top: 4px;
+  color: #667887;
+  font-size: 9px;
+  font-weight: 500;
+}
+
+.completed-subagent-disclosure button>i {
+  color: #7e93a1;
+  font-size: 9px;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.completed-subagent-disclosure.expanded>button {
+  border-color: #3a555e;
+  background: #122128;
+}
+
+.completed-subagent-list {
+  grid-column: 1/-1;
+  display: grid;
+  grid-template-columns: repeat(2,minmax(0,1fr));
+  gap: 10px 12px;
+  padding-top: 2px;
+}
+
+.completed-subagent-list:before {
+  content: "완료 기록";
+  grid-column: 1/-1;
+  color: #617482;
+  font-size: 9px;
+  font-weight: 750;
+  letter-spacing: .08em;
+}
+
+.completed-subagent-list .child-session {
+  opacity: .88;
+}
+
+.completed-subagent-list .child-session:hover {
+  opacity: 1;
+}