loadtoagent 1.0.0

package/renderer/styles-workflows.css

@@ -0,0 +1,1217 @@
+/*
+ * Agent workflows
+ * ---------------
+ * Agent relationships, process maps, collaboration state, and live topology.
+ */
+
+.nav-icon.live-dot {
+  width: 8px;
+  height: 8px;
+  margin-left: 6px;
+  border-radius: 50%;
+  background: var(--green);
+  box-shadow: 0 0 10px rgba(76,227,154,.7);
+}
+
+.live-section-head>div {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+}
+
+.live-section-head .eyebrow {
+  margin-bottom: 4px;
+  color: #63dba0;
+}
+
+.live-session-grid .session-card {
+  border-color: rgba(76,227,154,.18);
+}
+
+.session-card.live-card {
+  box-shadow: inset 0 0 50px color-mix(in srgb,var(--provider) 5%,transparent),0 12px 32px rgba(0,0,0,.15);
+}
+
+.live-section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 28px;
+  margin-bottom: 17px;
+}
+
+.live-section-head h2 {
+  margin: 0;
+  letter-spacing: -.03em;
+  font-size: 22px;
+}
+
+.live-beacon {
+  border: 2px solid rgba(76,227,154,.28);
+  border-radius: 50%;
+  background: var(--green);
+  box-shadow: 0 0 0 5px rgba(76,227,154,.06),0 0 18px rgba(76,227,154,.58);
+  animation: pulse 1.4s infinite;
+  width: 13px;
+  height: 13px;
+}
+
+.agent-map-toolbar {
+  min-height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 15px;
+  padding: 0 2px;
+}
+
+.live-session-grid {
+  grid-template-columns: repeat(2,minmax(0,1fr));
+  gap: 12px;
+  display: block;
+  min-width: 0;
+}
+
+.agent-forest {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(0,1fr));
+  gap: 18px;
+}
+
+.agent-tree {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(340px,430px) 72px minmax(340px,1fr);
+  align-items: center;
+  min-width: 0;
+  padding: 18px;
+  border: 1px solid rgba(94,120,139,.18);
+  border-radius: 17px;
+  background: rgba(5,9,14,.46);
+}
+
+.agent-tree:not(.solo) {
+  grid-column: 1/-1;
+}
+
+.agent-tree.solo {
+  display: block;
+}
+
+.agent-tree.solo .agent-node {
+  height: 100%;
+}
+
+.agent-node.running {
+  border-color: color-mix(in srgb,var(--provider) 48%,#285449);
+  box-shadow: 0 0 0 1px color-mix(in srgb,var(--provider) 8%,transparent),0 16px 42px rgba(0,0,0,.24);
+}
+
+.agent-node.running:before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 3px;
+  background: var(--green);
+  box-shadow: 0 0 16px var(--green);
+}
+
+.agent-node.is-focus {
+  border-color: color-mix(in srgb,var(--provider) 70%,#557184);
+  box-shadow: 0 0 0 2px color-mix(in srgb,var(--provider) 13%,transparent),0 18px 50px rgba(0,0,0,.3);
+}
+
+.agent-node-main {
+  width: 100%;
+  display: block;
+  padding: 17px 18px 14px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.agent-node-main:hover {
+  background: rgba(255,255,255,.018);
+}
+
+.agent-node-top {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+}
+
+.agent-node-top .provider-mark {
+  width: 40px;
+  height: 40px;
+  font-size: 11px;
+}
+
+.agent-identity {
+  min-width: 0;
+  flex: 1;
+}
+
+.agent-identity b {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #eef4fa;
+  font-size: 13px;
+}
+
+.agent-identity small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-top: 4px;
+  color: #7c899c;
+  font-size: 10px;
+}
+
+.agent-node .status-pill {
+  font-size: 9px;
+  padding: 5px 8px;
+}
+
+.agent-task-label {
+  display: block;
+  margin-top: 17px;
+  color: var(--provider);
+  font-size: 10px;
+  font-weight: 750;
+  letter-spacing: .13em;
+}
+
+.agent-task {
+  display: -webkit-box;
+  margin-top: 6px;
+  overflow: hidden;
+  color: #f3f6fa;
+  font-size: 18px;
+  font-weight: 650;
+  line-height: 1.42;
+  letter-spacing: -.025em;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.agent-current {
+  display: block;
+  margin-top: 15px;
+  padding: 12px 13px;
+  border: 1px solid rgba(76,227,154,.14);
+  border-radius: 11px;
+  background: rgba(76,227,154,.055);
+}
+
+.agent-current>span {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.agent-current i {
+  width: 22px;
+  height: 22px;
+  display: grid;
+  place-items: center;
+  border-radius: 6px;
+  background: rgba(76,227,154,.1);
+  color: #67e9a6;
+  font-size: 10px;
+  font-style: normal;
+}
+
+.agent-current b {
+  color: #76e8ac;
+  font-size: 11px;
+}
+
+.agent-current>strong {
+  display: -webkit-box;
+  margin-top: 7px;
+  overflow: hidden;
+  color: #bdc9d6;
+  font-size: 13px;
+  font-weight: 520;
+  line-height: 1.45;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.agent-node-metrics {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.agent-node-metrics>span {
+  min-width: 0;
+}
+
+.agent-node-metrics small {
+  display: block;
+  color: #6f7c8f;
+  font-size: 9px;
+}
+
+.agent-node-metrics b {
+  display: block;
+  margin-top: 4px;
+  overflow: hidden;
+  color: #d7e0e9;
+  font-size: 13px;
+  font-weight: 620;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-node-gauge {
+  display: block;
+  height: 7px;
+  margin-top: 12px;
+  border: 1px solid #263243;
+  border-radius: 6px;
+  background: #151e2a;
+  overflow: hidden;
+}
+
+.agent-node-footer {
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 0 18px;
+  border-top: 1px solid #192230;
+  background: rgba(5,8,13,.5);
+  color: #748195;
+  font-size: 10px;
+}
+
+.agent-node-footer button {
+  height: 28px;
+  padding: 0 9px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: #aab7c7;
+  font-size: 10px;
+  cursor: pointer;
+}
+
+.agent-node-footer button:hover {
+  background: #172130;
+  color: #fff;
+}
+
+.agent-node-footer button b {
+  margin-left: 4px;
+  color: var(--provider);
+}
+
+.focused-agent-path {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  min-width: max-content;
+  padding: 20px;
+  overflow-x: auto;
+  border: 1px solid rgba(94,120,139,.18);
+  border-radius: 17px;
+  background: rgba(5,9,14,.5);
+}
+
+.current-relation>span {
+  color: #72e4a9;
+}
+
+.child-relation {
+  width: min(430px,34vw);
+}
+
+.agent-tree.overview-flow {
+  display: flex;
+  flex-direction: column;
+  grid-column: auto;
+  align-items: stretch;
+  padding: 12px;
+}
+
+.overview-flow>.agent-node {
+  flex: 1;
+}
+
+.agent-flow-lane {
+  --provider: #8fa2b7;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb,var(--provider) 18%,#23303f);
+  border-radius: 14px;
+  background: rgba(7,11,17,.62);
+}
+
+.agent-flow-lane-head .provider-mark {
+  width: 32px;
+  height: 32px;
+  font-size: 8px;
+}
+
+.agent-flow-lane-head>span:nth-child(2) {
+  min-width: 0;
+}
+
+.agent-flow-list {
+  display: grid;
+}
+
+.agent-flow-row:last-child {
+  border-bottom: 0;
+}
+
+.agent-flow-state {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #465362;
+}
+
+.agent-flow-row.running .agent-flow-state {
+  background: #58e1a8;
+  box-shadow: 0 0 9px rgba(88,225,168,.48);
+}
+
+.agent-flow-copy {
+  min-width: 0;
+}
+
+.agent-flow-provider {
+  display: grid;
+  justify-items: end;
+  gap: 4px;
+}
+
+.agent-flow-more:hover {
+  background: #122029;
+  color: #78e3bc;
+}
+
+.agent-relation-rail {
+  min-width: 0;
+  display: grid;
+  gap: 12px;
+}
+
+.agent-relation-block {
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid #21303d;
+  border-radius: 14px;
+  background: rgba(7,11,17,.55);
+}
+
+.agent-relation-block>header {
+  min-height: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 11px;
+  border-bottom: 1px solid #1a2631;
+}
+
+.agent-relation-list {
+  display: grid;
+  max-height: 500px;
+  overflow: auto;
+  scrollbar-color: #2b3d48 transparent;
+}
+
+.agent-relation-block .agent-flow-row {
+  grid-template-columns: 7px minmax(0,1fr) auto;
+  padding: 11px 12px;
+}
+
+.agent-flow-overview {
+  display: grid;
+  align-items: start;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
+}
+
+.agent-flow-lane-head {
+  display: grid;
+  grid-template-columns: 34px minmax(0,1fr) auto;
+  align-items: center;
+  gap: 9px;
+  padding: 9px 10px;
+  border-bottom: 1px solid #1b2733;
+  background: color-mix(in srgb,var(--provider) 5%,#0c131b);
+  min-height: 64px;
+}
+
+.agent-flow-lane-head b {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #e1e9f0;
+  font-size: 13px;
+}
+
+.agent-flow-lane-head small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-top: 3px;
+  color: #667587;
+  font-size: 11px;
+}
+
+.agent-flow-lane-head em {
+  padding: 4px 6px;
+  border-radius: 6px;
+  background: rgba(76,227,154,.07);
+  color: #65dba9;
+  font-style: normal;
+  font-weight: 750;
+  font-size: 11px;
+}
+
+.agent-flow-copy small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 3px;
+  color: var(--provider);
+  font-weight: 700;
+  letter-spacing: .05em;
+  font-size: 10px;
+}
+
+.agent-flow-copy b {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #d9e2e9;
+  font-weight: 620;
+  font-size: 13px;
+}
+
+.agent-flow-copy em {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-top: 4px;
+  color: #5f6f82;
+  font-style: normal;
+  font-size: 11px;
+}
+
+.agent-flow-provider small {
+  max-width: 58px;
+  overflow: hidden;
+  color: #718092;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+}
+
+.agent-flow-provider i {
+  display: grid;
+  place-items: center;
+  border-radius: 5px;
+  background: color-mix(in srgb,var(--provider) 10%,#17212b);
+  color: var(--provider);
+  font-style: normal;
+  font-weight: 800;
+  width: 27px;
+  height: 23px;
+  font-size: 9px;
+}
+
+.agent-flow-more {
+  width: 100%;
+  border: 0;
+  border-top: 1px solid #1b2732;
+  background: #0d151d;
+  color: #7894a1;
+  cursor: pointer;
+  height: 40px;
+  font-size: 11px;
+}
+
+.agent-relation-block>header b {
+  color: #d9e3eb;
+  font-size: 12px;
+}
+
+.agent-relation-block>header span {
+  color: #657587;
+  font-size: 11px;
+}
+
+.agent-relation-empty {
+  min-height: 78px;
+  display: grid;
+  place-items: center;
+  padding: 14px;
+  color: #596a7d;
+  text-align: center;
+  font-size: 11px;
+}
+
+.agent-relation-block .agent-flow-copy b {
+  font-size: 13px;
+}
+
+.agent-relation-block .agent-flow-copy em {
+  font-size: 11px;
+}
+
+.workflow-origin-icon {
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  border-radius: 9px;
+  background: #173541;
+  color: #7ed9ed;
+  font-size: 16px;
+}
+
+.agent-flow-row {
+  --provider: #8fa2b7;
+  width: 100%;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 7px minmax(0,1fr) auto;
+  align-items: center;
+  gap: 9px;
+  border: 0;
+  border-bottom: 1px solid #18232e;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  padding: 12px 11px;
+  transition: transform var(--motion-medium) var(--motion-ease),border-color var(--motion-medium) ease,box-shadow var(--motion-medium) ease,filter var(--motion-medium) ease;
+}
+
+.agent-node {
+  --provider: #8fa2b7;
+  position: relative;
+  min-width: 0;
+  border: 1px solid color-mix(in srgb,var(--provider) 24%,#283345);
+  border-radius: 16px;
+  background: linear-gradient(155deg,color-mix(in srgb,var(--provider) 8%,#131a25),#0b1018 68%);
+  box-shadow: 0 14px 34px rgba(0,0,0,.18);
+  overflow: hidden;
+  transition: transform var(--motion-medium) var(--motion-ease),border-color var(--motion-medium) ease,box-shadow var(--motion-medium) ease,filter var(--motion-medium) ease;
+}
+
+.agent-flow-row:hover {
+  background: color-mix(in srgb,var(--provider) 5%,#111923);
+  will-change: transform;
+}
+
+.agent-node:hover {
+  will-change: transform;
+}
+
+.agent-node-gauge i {
+  display: block;
+  height: 100%;
+  border-radius: 5px;
+  background: linear-gradient(90deg,var(--green),var(--provider));
+  transition: width 520ms var(--motion-ease),background-color var(--motion-medium) ease,filter var(--motion-medium) ease;
+}
+
+.agent-command-panel {
+  --command-accent: #55d6a8;
+  display: grid;
+  gap: 10px;
+  padding: 13px;
+  border: 1px solid #29423f;
+  border-radius: 13px;
+  background: linear-gradient(145deg,rgba(20,48,43,.78),rgba(8,17,21,.94));
+  box-shadow: 0 10px 28px rgba(0,0,0,.18);
+}
+
+.agent-command-panel.unavailable {
+  --command-accent: #647487;
+  border-color: #293641;
+  background: linear-gradient(145deg,rgba(26,35,44,.72),rgba(8,14,20,.92));
+}
+
+.agent-command-panel>header {
+  display: grid;
+  grid-template-columns: 34px minmax(0,1fr) 8px;
+  align-items: center;
+  gap: 9px;
+}
+
+.agent-command-icon {
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  border: 1px solid color-mix(in srgb,var(--command-accent) 36%,#2a3943);
+  border-radius: 9px;
+  background: color-mix(in srgb,var(--command-accent) 10%,#111c22);
+  color: var(--command-accent);
+  font-family: "Cascadia Code",Consolas,monospace;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.agent-command-panel header b {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+}
+
+.agent-command-panel header small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-top: 4px;
+  color: #7f918f;
+  font-size: 10px;
+}
+
+.agent-command-panel header>i {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #4b5964;
+}
+
+.agent-command-panel header>i.connected {
+  background: var(--green);
+  box-shadow: 0 0 9px rgba(76,227,154,.6);
+}
+
+.agent-command-panel.control-connect {
+  --command-accent: #e9b85f;
+  border-color: #4a3d27;
+  background: linear-gradient(145deg,rgba(55,42,21,.72),rgba(12,15,19,.94));
+}
+
+.agent-command-panel.control-handoff {
+  --command-accent: #76d7bd;
+  border-color: #35685b;
+  background: linear-gradient(145deg,rgba(24,67,57,.78),rgba(8,17,21,.95));
+}
+
+.agent-command-panel.control-origin {
+  --command-accent: #6eb5f3;
+  border-color: #29445b;
+  background: linear-gradient(145deg,rgba(25,46,64,.74),rgba(9,15,21,.94));
+}
+
+.agent-command-panel.control-origin-resume {
+  --command-accent: #6eb5f3;
+  border-color: #29445b;
+  background: linear-gradient(145deg,rgba(25,46,64,.74),rgba(9,15,21,.94));
+}
+
+.agent-command-panel.control-origin-resume .agent-command-actions {
+  flex-wrap: wrap;
+}
+
+.agent-command-panel.control-origin-resume .agent-command-actions small {
+  flex: 1 0 100%;
+}
+
+.agent-command-panel.control-ended {
+  --command-accent: #66717f;
+}
+
+.agent-command-panel:not(.connected) .agent-command-input {
+  display: none;
+}
+
+.agent-command-target {
+  display: grid;
+  grid-template-columns: auto minmax(0,1fr);
+  align-items: center;
+  gap: 9px;
+}
+
+.agent-command-target>span {
+  color: #849493;
+  font-size: 10px;
+}
+
+.agent-command-target select {
+  min-width: 0;
+  height: 34px;
+  padding: 0 28px 0 9px;
+  border: 1px solid #31504c;
+  border-radius: 8px;
+  background: #0b1518;
+  color: #b8ccc8;
+  font-size: 10px;
+  outline: none;
+}
+
+.agent-command-target select:focus {
+  border-color: #4c8f7c;
+  box-shadow: 0 0 0 3px rgba(85,214,168,.08);
+}
+
+.agent-command-input textarea {
+  display: block;
+  width: 100%;
+  min-height: 72px;
+  max-height: 170px;
+  resize: vertical;
+  padding: 10px 11px;
+  border: 1px solid #2a4843;
+  border-radius: 10px;
+  background: #071013;
+  color: #dbe9e6;
+  font-size: 11px;
+  line-height: 1.5;
+  outline: none;
+  transition: border-color var(--motion-fast) ease,box-shadow var(--motion-medium) ease;
+}
+
+.agent-command-input textarea::placeholder {
+  color: #526662;
+}
+
+.agent-command-input textarea:focus {
+  border-color: #4b9a82;
+  box-shadow: 0 0 0 3px rgba(85,214,168,.08);
+}
+
+.agent-command-input textarea:disabled {
+  opacity: .48;
+  cursor: not-allowed;
+}
+
+.agent-command-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 7px;
+}
+
+.agent-command-actions>small {
+  min-width: 0;
+  margin-right: auto;
+  color: #647672;
+  font-size: 9px;
+  line-height: 1.4;
+}
+
+.agent-command-actions button {
+  height: 34px;
+  padding: 0 10px;
+  border: 1px solid #31514a;
+  border-radius: 8px;
+  background: #111d1f;
+  color: #9cc9bd;
+  font-size: 10px;
+  font-weight: 650;
+  cursor: pointer;
+  transition: transform var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) ease,background-color var(--motion-fast) ease,color var(--motion-fast) ease;
+}
+
+.agent-command-actions button:last-child {
+  border-color: #428b73;
+  background: #1b4a3a;
+  color: #a6f2d4;
+}
+
+.agent-command-actions button:hover:not(:disabled) {
+  transform: translateY(-1px);
+  border-color: #58aa91;
+  color: #e8fff7;
+}
+
+.agent-command-actions button:active:not(:disabled) {
+  transform: translateY(1px) scale(.985);
+}
+
+.agent-command-actions button:disabled {
+  opacity: .38;
+  cursor: not-allowed;
+}
+
+.agent-flow-row.completed .agent-flow-state {
+  background: #6daecc;
+  box-shadow: 0 0 7px rgba(109,174,204,.32);
+}
+
+.agent-flow-copy .agent-flow-assignment-source {
+  display: block;
+  margin-top: 5px;
+  color: #6f9f91;
+  font-size: 8px;
+  letter-spacing: .01em;
+}
+
+.agent-flow-copy .agent-flow-shared {
+  display: block;
+  margin-top: 5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #71879a;
+  font-size: 8px;
+}
+
+.agent-flow-copy .agent-flow-outcome {
+  display: block;
+  margin-top: 5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-top: 5px;
+  border-top: 1px solid rgba(92,132,145,.12);
+  color: #9fb1bf;
+  font-size: 9px;
+}
+
+.agent-flow-copy .agent-flow-outcome b {
+  display: inline;
+  margin-right: 6px;
+  color: #67dfb0;
+  font-size: 8px;
+}
+
+.agent-flow-copy .agent-flow-outcome.done b {
+  color: #91c9e1;
+}
+
+.agent-flow-row.child-session:hover {
+  border-color: color-mix(in srgb,var(--provider) 52%,#31505b);
+  box-shadow: 0 12px 28px rgba(0,0,0,.2);
+}
+
+.child-session .agent-flow-copy {
+  display: grid;
+  align-content: start;
+  gap: 0;
+}
+
+.child-session .agent-flow-kicker {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 7px;
+}
+
+.child-session .agent-flow-kicker small {
+  margin: 0;
+  color: var(--provider);
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: .08em;
+}
+
+.child-session .agent-flow-kicker time {
+  flex: 0 0 auto;
+  color: #60727e;
+  font-size: 8px;
+}
+
+.child-session .agent-flow-agent {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  margin-top: 8px;
+}
+
+.child-session .agent-flow-agent i {
+  width: 21px;
+  height: 18px;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  border-radius: 5px;
+  background: color-mix(in srgb,var(--provider) 13%,#17212b);
+  color: var(--provider);
+  font-size: 6px;
+  font-style: normal;
+  font-weight: 850;
+}
+
+.child-session .agent-flow-agent strong {
+  flex: 0 0 auto;
+  color: #b9c7cf;
+  font-size: 9px;
+}
+
+.child-session .agent-flow-agent small {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: #627581;
+  font-size: 8px;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.child-session .agent-flow-assignment {
+  display: block;
+  margin-top: 9px;
+  padding: 8px 9px;
+  border-radius: 8px;
+  background: rgba(116,151,164,.06);
+}
+
+.child-session .agent-flow-assignment small {
+  margin: 0 0 4px;
+  color: #6e8791;
+  font-size: 8px;
+  letter-spacing: .04em;
+}
+
+.child-session .agent-flow-assignment strong {
+  display: -webkit-box;
+  overflow: hidden;
+  color: #aebdc5;
+  font-size: 9px;
+  font-weight: 520;
+  line-height: 1.45;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.child-session .agent-flow-outcome {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 28px;
+  margin-top: 10px;
+  padding: 6px 8px;
+  border: 1px solid rgba(109,174,204,.13);
+  border-radius: 8px;
+  background: rgba(109,174,204,.055);
+  color: #c1d0d8;
+  font-size: 10px;
+  white-space: normal;
+}
+
+.child-session .agent-flow-outcome b {
+  display: inline;
+  flex: 0 0 auto;
+  margin: 0;
+  color: #79dfb6;
+  font-size: 8px;
+}
+
+.child-session .agent-flow-outcome.done b {
+  color: #91c9e1;
+}
+
+.child-session .agent-flow-provider {
+  padding-top: 0;
+}
+
+.child-session .agent-flow-provider .status-pill {
+  margin: 0;
+  padding: 4px 6px;
+  font-size: 8px;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.child-session .agent-flow-provider .status-pill:before {
+  width: 4px;
+  height: 4px;
+}
+
+.workflow-metric-grid {
+  display: grid;
+  grid-template-columns: repeat(4,minmax(0,1fr));
+  gap: 7px;
+}
+
+.workflow-metric-grid>span {
+  min-width: 0;
+  padding: 8px;
+  border: 1px solid #21383c;
+  border-radius: 9px;
+  background: rgba(13,28,30,.78);
+}
+
+.workflow-metric-grid small {
+  display: block;
+  overflow: hidden;
+  color: #7b9099;
+  font-size: 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workflow-metric-grid b {
+  display: inline-block;
+  margin-top: 4px;
+  color: #e5f1ef;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.workflow-metric-grid em {
+  margin-left: 3px;
+  color: #73918d;
+  font-size: 8px;
+  font-style: normal;
+}
+
+.workflow-metric-grid>span:nth-child(1) b {
+  color: #72e8b8;
+}
+
+.workflow-metric-grid>span:nth-child(3) b {
+  color: #5ee3aa;
+}
+
+.workflow-metric-grid>span:nth-child(4) b {
+  color: #91c9e1;
+}
+
+.child-session.work-working .agent-flow-state {
+  background: #4ce39a;
+  box-shadow: 0 0 0 4px rgba(76,227,154,.08),0 0 12px rgba(76,227,154,.55);
+}
+
+.child-session.work-resting .agent-flow-state {
+  border: 2px solid #6daecc;
+  background: #0c171e;
+  box-shadow: 0 0 0 3px rgba(109,174,204,.06);
+}
+
+.child-session.work-attention .agent-flow-state {
+  background: #ff6b7f;
+  box-shadow: 0 0 9px rgba(255,107,127,.45);
+}
+
+.child-session .agent-flow-provider em {
+  max-width: 76px;
+  color: #607884;
+  font-size: 7px;
+  font-style: normal;
+  line-height: 1.3;
+  text-align: right;
+}
+
+.child-session .agent-flow-child-action {
+  display: block;
+  margin-top: 9px;
+  color: #6f9f9a;
+  font-size: 8px;
+  font-weight: 750;
+  text-align: right;
+}
+
+.child-session:hover .agent-flow-child-action {
+  color: #79dfba;
+}
+
+.agent-command-panel.resume-ready {
+  --command-accent: #73c8a8;
+  border-color: #365d50;
+  background: linear-gradient(145deg,rgba(24,60,51,.76),rgba(8,17,21,.95));
+}
+
+.agent-command-panel.resume-ready .agent-command-input {
+  display: block;
+}
+
+.agent-command-panel.resume-ready header>i {
+  background: #79c7aa;
+  box-shadow: 0 0 9px rgba(103,210,171,.38);
+}
+
+.agent-command-panel.resume-ready .agent-command-actions button:last-child {
+  border-color: #4c8f78;
+  background: #1c4b3b;
+  color: #aff0d6;
+}
+
+.agent-flow-provider .execution-mode-badge {
+  margin-bottom: 2px;
+  padding: 3px 5px;
+  font-size: 7px;
+}
+
+.agent-node-top .execution-mode-badge {
+  margin-left: auto;
+}
+
+.agent-node-top .execution-mode-badge+.status-pill {
+  margin-left: 0;
+}
+
+.agent-goal-note {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 7px;
+  color: #728695;
+  font-size: 9px;
+  line-height: 1.4;
+}
+
+.agent-goal-note:before {
+  content: "";
+  width: 14px;
+  height: 1px;
+  flex: 0 0 auto;
+  background: color-mix(in srgb,var(--provider) 52%,#44515d);
+}
+
+.live-section {
+  margin: 26px auto 0;
+  border: 1px solid rgba(76,227,154,.2);
+  border-radius: 18px;
+  box-shadow: inset 0 1px rgba(255,255,255,.025);
+  max-width: 1640px;
+  margin-top: 24px;
+  padding: 22px;
+  border-color: rgba(76,227,154,.24);
+  background: radial-gradient(circle at 18% 0,rgba(76,227,154,.08),transparent 32%),linear-gradient(145deg,rgba(15,26,27,.96),rgba(10,14,22,.94) 45%);
+  overflow: hidden;
+  min-width: 0;
+}
+
+.live-section-head>p {
+  margin: 0;
+  text-align: right;
+  max-width: 660px;
+  line-height: 1.6;
+  color: #98a6b5;
+  font-size: 12px;
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .45;
+    transform: scale(.75);
+  }
+}