loadtoagent 1.0.0

package/renderer/styles-responsive-workflows.css

@@ -0,0 +1,778 @@
+/*
+ * Responsive agent workflows
+ * --------------------------
+ * Agent maps, routed workflows, collaboration detail, and live topology.
+ * Breakpoints are ordered wide-to-narrow, followed by height and motion rules.
+ */
+
+/* Wide screens ≥ 1900px: expand workflow columns and downstream lanes into the available canvas. */
+@media (min-width:1900px) {
+  .agent-workflow-grid {
+    grid-template-columns: minmax(190px,.55fr) minmax(360px,1fr) minmax(700px,1.9fr);
+  }
+
+  .downstream-stack.density-many {
+    grid-template-columns: repeat(3,minmax(0,1fr));
+  }
+
+  .completed-subagent-list {
+    grid-template-columns: repeat(3,minmax(0,1fr));
+  }
+}
+
+/* Wide screens ≥ 1401px: expand workflow columns and downstream lanes into the available canvas. */
+@media (min-width:1401px) {
+  .agent-workflow-grid {
+    grid-template-columns: minmax(170px,.55fr) minmax(320px,1fr) minmax(360px,1.35fr);
+    gap: clamp(24px,2vw,42px);
+  }
+
+  .downstream-column {
+    grid-column: auto;
+  }
+
+  .upstream-column .agent-workflow-port.output {
+    right: -7px;
+    left: auto;
+    top: 50%;
+    bottom: auto;
+    transform: translate(50%,-50%);
+  }
+
+  .agent-workflow-selected>.agent-workflow-port.input {
+    left: -7px;
+    top: 38px;
+    bottom: auto;
+    transform: translate(-50%,-50%);
+  }
+
+  .downstream-column>.agent-workflow-port.group-input {
+    left: -7px;
+    top: 96px;
+    bottom: auto;
+    transform: translate(-50%,-50%);
+  }
+}
+
+/* Compact screens ≤ 1500px: tighten workflow columns and connector gutters. */
+@media (max-width:1500px) {
+  .agent-command-actions {
+    flex-wrap: wrap;
+  }
+
+  .agent-command-actions>small {
+    flex: 1 0 100%;
+  }
+}
+
+/* Intermediate width 901–1450px: use a two-stage graph route before the single-column collapse. */
+@media (max-width:1450px) and (min-width:901px) {
+  .downstream-column .agent-workflow-stack {
+    grid-template-columns: repeat(2,minmax(0,1fr));
+  }
+
+  .agent-workflow-selected .agent-workflow-port.input {
+    left: -7px;
+    top: 50%;
+    transform: translate(-50%,-50%);
+  }
+
+  .agent-workflow-selected .agent-workflow-port.output {
+    right: auto;
+    left: 50%;
+    top: auto;
+    bottom: -7px;
+    transform: translate(-50%,50%);
+  }
+
+  .agent-workflow-canvas {
+    padding: 20px 24px;
+  }
+
+  .agent-workflow-grid {
+    grid-template-columns: minmax(190px,.62fr) minmax(330px,1.38fr);
+    gap: 46px;
+  }
+
+  .agent-workflow-selected {
+    max-width: 350px;
+  }
+
+  .upstream-column .agent-workflow-port.output {
+    right: -7px;
+    left: auto;
+    top: 50%;
+    bottom: auto;
+    transform: translate(50%,-50%);
+  }
+
+  .agent-workflow-selected>.agent-workflow-port.input {
+    left: -7px;
+    top: 38px;
+    transform: translate(-50%,-50%);
+  }
+
+  .agent-workflow-selected>.agent-workflow-port.output {
+    right: auto;
+    left: 50%;
+    top: auto;
+    bottom: -7px;
+    transform: translate(-50%,50%);
+  }
+
+  .downstream-column {
+    grid-column: 1/-1;
+  }
+
+  .downstream-column .agent-workflow-port.input {
+    left: 50%;
+    top: -7px;
+    transform: translate(-50%,-50%);
+  }
+
+  .downstream-column>.agent-workflow-port.group-input {
+    left: 50%;
+    top: -7px;
+    transform: translate(-50%,-50%);
+  }
+}
+
+/* Compact screens ≤ 1450px: tighten workflow columns and connector gutters. */
+@media (max-width:1450px) {
+  .workflow-metric-grid {
+    grid-template-columns: repeat(2,minmax(0,1fr));
+  }
+
+  .agent-communication-event {
+    grid-template-columns: minmax(140px,180px) minmax(0,1fr) auto;
+  }
+
+  .subagent-filterbar {
+    grid-template-columns: minmax(0,1fr) minmax(150px,220px) minmax(105px,130px);
+  }
+
+  .subagent-filter-result {
+    grid-column: 1/-1;
+    text-align: right;
+  }
+}
+
+/* Compact screens ≤ 1400px: tighten workflow columns and connector gutters. */
+@media (max-width:1400px) {
+  .agent-flow-overview {
+    grid-template-columns: repeat(2,minmax(0,1fr));
+  }
+}
+
+/* Intermediate width 901–1400px: use a two-stage graph route before the single-column collapse. */
+@media (max-width:1400px) and (min-width:901px) {
+  .agent-workflow-selected-stack>.agent-workflow-port.output {
+    right: auto;
+    left: 50%;
+    top: auto;
+    bottom: -7px;
+    transform: translate(-50%,50%);
+  }
+}
+
+/* Compact screens ≤ 1300px: tighten workflow columns and connector gutters. */
+@media (max-width:1300px) {
+  .agent-workflow-column>header {
+    min-height: 0;
+    margin-bottom: 9px;
+  }
+}
+
+/* Compact screens ≤ 1280px: move graph branches into compact rows without collisions. */
+@media (max-width:1280px) {
+  .agent-forest {
+    grid-template-columns: 1fr;
+  }
+
+  .agent-tree {
+    grid-template-columns: minmax(310px,390px) 56px minmax(310px,1fr);
+  }
+
+  .focus-relation {
+    min-width: 310px;
+  }
+
+  .agent-task {
+    font-size: 16px;
+  }
+}
+
+/* Compact screens ≤ 1260px: move graph branches into compact rows without collisions. */
+@media (max-width:1260px) {
+  .provider-overview {
+    grid-template-columns: repeat(2,1fr);
+  }
+
+  .global-stats {
+    grid-template-columns: repeat(3,1fr);
+  }
+
+  .global-stat:nth-child(3) {
+    border-right: 0;
+  }
+}
+
+/* Compact screens ≤ 1120px: move graph branches into compact rows without collisions. */
+@media (max-width:1120px) {
+  .live-session-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .live-section-head {
+    align-items: flex-start;
+  }
+
+  .live-section-head>p {
+    display: none;
+  }
+}
+
+/* Compact screens ≤ 1050px: move graph branches into compact rows without collisions. */
+@media (max-width:1050px) {
+  .agent-focus-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .agent-relation-rail {
+    grid-template-columns: repeat(2,minmax(0,1fr));
+  }
+
+  .agent-flow-overview {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+/* Compact screens ≤ 980px: move graph branches into compact rows without collisions. */
+@media (max-width:980px) {
+  .agent-tree {
+    display: block;
+  }
+
+  .tree-connector {
+    width: 1px;
+    height: 36px;
+    margin: auto;
+    background: #34495a;
+  }
+
+  .tree-connector:before {
+    display: none;
+  }
+
+  .tree-connector i {
+    display: none;
+  }
+
+  .tree-children {
+    margin-top: 0;
+  }
+
+  .tree-children:before {
+    left: 16px;
+    top: -36px;
+    bottom: 50%;
+  }
+
+  .tree-child {
+    padding-left: 34px;
+  }
+
+  .tree-child:before {
+    left: 16px;
+    width: 18px;
+  }
+
+  .focused-agent-path {
+    justify-content: flex-start;
+  }
+
+  .live-section {
+    padding: 16px;
+  }
+
+  .agent-map-toolbar {
+    align-items: flex-start;
+  }
+
+  .graph-breadcrumbs {
+    flex-wrap: wrap;
+  }
+
+  .provider-overview {
+    grid-template-columns: repeat(2,1fr);
+  }
+}
+
+/* Compact screens ≤ 900px: move graph branches into compact rows without collisions. */
+@media (max-width:900px) {
+  .global-stats {
+    grid-template-columns: repeat(2,1fr);
+  }
+
+  .agent-workflow-port.input {
+    left: 50%;
+    top: -7px;
+    transform: translate(-50%,-50%);
+  }
+
+  .agent-workflow-port.output {
+    right: auto;
+    left: 50%;
+    top: auto;
+    bottom: -7px;
+    transform: translate(-50%,50%);
+  }
+
+  .agent-workflow-selected>.agent-workflow-port.output {
+    right: auto;
+    left: 50%;
+    top: auto;
+    bottom: -7px;
+    transform: translate(-50%,50%);
+  }
+
+  .workflow-summary-evidence {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .agent-communication-event {
+    grid-template-columns: 1fr auto;
+    gap: 6px;
+  }
+
+  .communication-route {
+    grid-column: 1;
+  }
+
+  .communication-copy {
+    grid-column: 1/-1;
+  }
+
+  .agent-communication-event time {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .downstream-stack .agent-flow-row.child-session {
+    min-height: 132px;
+  }
+
+  .subagent-filterbar {
+    grid-template-columns: 1fr 120px;
+  }
+
+  .subagent-status-filters {
+    grid-column: 1/-1;
+  }
+
+  .subagent-filter-result {
+    grid-column: 1/-1;
+  }
+
+  .subagent-conversation-summary {
+    grid-template-columns: 1fr;
+  }
+
+  .subagent-dialog-list .chat-row.assistant {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .subagent-dialog-list .chat-row.user {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .completed-subagent-list {
+    grid-template-columns: 1fr;
+  }
+
+  .completed-subagent-disclosure>button {
+    grid-template-columns: 30px minmax(0,1fr);
+  }
+
+  .completed-subagent-disclosure button>i {
+    grid-column: 2;
+  }
+
+  .agent-node-top {
+    flex-wrap: wrap;
+  }
+
+  .agent-node-top .execution-mode-badge {
+    order: 3;
+    margin-left: 51px;
+  }
+
+  .agent-workflow-canvas {
+    padding: 18px;
+    overflow: hidden;
+  }
+
+  .agent-workflow-grid {
+    grid-template-columns: minmax(0,1fr);
+    gap: 56px;
+  }
+
+  .agent-workflow-column>header {
+    min-height: 0;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  .agent-workflow-selected-stack {
+    margin: auto;
+    width: min(620px,100%);
+    margin-inline: auto;
+  }
+
+  .agent-workflow-selected {
+    margin: auto;
+    width: min(520px,100%);
+    max-width: none;
+    margin-inline: auto;
+  }
+
+  .upstream-column .agent-workflow-stack {
+    margin: auto;
+    width: min(520px,100%);
+    margin-inline: auto;
+  }
+
+  .downstream-column {
+    grid-column: 1;
+    min-width: 0;
+  }
+
+  .downstream-column .agent-workflow-stack {
+    grid-template-columns: repeat(2,minmax(0,1fr));
+  }
+
+  .upstream-column .agent-workflow-port.output {
+    right: auto;
+    left: 50%;
+    top: auto;
+    bottom: -7px;
+    transform: translate(-50%,50%);
+  }
+
+  .agent-workflow-selected>.agent-workflow-port.input {
+    left: 50%;
+    top: -7px;
+    bottom: auto;
+    transform: translate(-50%,-50%);
+  }
+
+  .agent-workflow-selected-stack>.agent-workflow-port.output {
+    right: auto;
+    left: 50%;
+    top: auto;
+    bottom: -7px;
+    transform: translate(-50%,50%);
+  }
+
+  .downstream-column>.agent-workflow-port.group-input {
+    left: 50%;
+    top: -7px;
+    bottom: auto;
+    transform: translate(-50%,-50%);
+  }
+}
+
+/* Compact screens ≤ 720px: stack relationship cards and route connectors vertically. */
+@media (max-width:720px) {
+  .agent-flow-provider small {
+    display: none;
+  }
+
+  .agent-focus-layout {
+    display: block;
+  }
+
+  .agent-command-target {
+    grid-template-columns: 1fr;
+  }
+
+  .agent-command-actions button {
+    flex: 1;
+  }
+
+  .agent-command-actions>small {
+    flex-basis: 100%;
+  }
+
+  .downstream-stack.density-many {
+    grid-template-columns: 1fr;
+  }
+
+  .agent-workflow-summary {
+    margin-bottom: 8px;
+  }
+
+  .workflow-summary-chip b {
+    display: none;
+  }
+
+  .nav-icon.live-dot {
+    width: 8px;
+    height: 8px;
+    margin: 6px auto 7px;
+  }
+
+  .global-stats {
+    grid-template-columns: repeat(2,minmax(0,1fr));
+  }
+
+  .global-stat {
+    min-width: 0;
+    padding: 13px 12px;
+    border-right: 1px solid var(--line-soft);
+    border-bottom: 1px solid var(--line-soft);
+  }
+
+  .global-stat:nth-child(2n) {
+    border-right: 0;
+  }
+
+  .global-stat:last-child {
+    grid-column: 1/-1;
+    border-right: 0;
+    border-bottom: 0;
+  }
+
+  .provider-overview {
+    grid-template-columns: 1fr;
+  }
+
+  .session-card.subagent {
+    margin-left: 0;
+  }
+
+  .live-section {
+    padding: 13px;
+    border-radius: 15px;
+  }
+
+  .live-section-head {
+    gap: 14px;
+  }
+
+  .live-section-head>div {
+    min-width: 0;
+    align-items: flex-start;
+  }
+
+  .agent-node {
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .agent-flow-row {
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .agent-flow-overview {
+    grid-template-columns: 1fr;
+  }
+
+  .agent-relation-rail {
+    margin-top: 12px;
+    grid-template-columns: 1fr;
+  }
+
+  .workflow-metric-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .focus-relation {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .agent-workflow-canvas {
+    max-width: 100%;
+    overflow: hidden;
+    padding: 11px;
+  }
+
+  .agent-workflow-grid {
+    gap: 50px;
+  }
+
+  .agent-workflow-selected-stack {
+    width: 100%;
+  }
+
+  .downstream-column .agent-workflow-stack {
+    grid-template-columns: 1fr;
+  }
+
+  .global-stat span {
+    font-size: 10px;
+  }
+
+  .global-stat em {
+    font-size: 10px;
+  }
+
+  .global-stat strong {
+    font-size: 23px;
+  }
+
+  .provider-overview-card {
+    min-height: 124px;
+  }
+}
+
+/* Compact screens ≤ 640px: stack relationship cards and route connectors vertically. */
+@media (max-width:640px) {
+  .global-stat {
+    border-right: 0;
+    border-bottom: 1px solid var(--line-soft);
+  }
+
+  .live-section-head h2 {
+    font-size: 19px;
+  }
+
+  .agent-node-main {
+    padding: 15px;
+  }
+
+  .agent-task {
+    font-size: 16px;
+  }
+
+  .agent-node-metrics {
+    grid-template-columns: repeat(2,1fr);
+  }
+
+  .agent-node-metrics>span:last-child {
+    display: none;
+  }
+
+  .agent-node-footer {
+    padding: 0 14px;
+  }
+
+  .global-stats {
+    grid-template-columns: repeat(2,1fr);
+  }
+
+  .provider-overview {
+    grid-template-columns: 1fr;
+  }
+
+  .focused-agent-path {
+    padding: 12px;
+  }
+
+  .focus-relation {
+    min-width: 280px;
+    width: 82vw;
+  }
+
+  .memory-candidate header {
+    flex-wrap: wrap;
+  }
+
+  .memory-category {
+    margin-left: 0;
+  }
+
+  .agent-forest {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Compact screens ≤ 520px: compress graph summaries while preserving task identity. */
+@media (max-width:520px) {
+  .agent-workflow-selected .agent-node-main {
+    padding: 13px 12px;
+  }
+
+  .agent-node-top {
+    display: grid;
+    grid-template-columns: 40px minmax(0,1fr) auto;
+    grid-template-rows: auto auto;
+    align-items: center;
+    column-gap: 9px;
+    row-gap: 6px;
+  }
+
+  .agent-node-top .provider-mark {
+    grid-column: 1;
+    grid-row: 1/3;
+    width: 40px;
+    height: 40px;
+  }
+
+  .agent-node-top .agent-identity {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .agent-node-top .status-pill {
+    grid-column: 3;
+    grid-row: 1;
+    margin: 0;
+    justify-self: end;
+  }
+
+  .agent-node-top .execution-mode-badge {
+    grid-column: 2/4;
+    grid-row: 2;
+    order: initial;
+    margin: 0;
+    justify-self: start;
+  }
+
+  .agent-identity b {
+    font-size: 12px;
+  }
+}
+
+/* Compact screens ≤ 420px: compress graph summaries while preserving task identity. */
+@media (max-width:420px) {
+  .global-stat strong {
+    font-size: 20px;
+  }
+
+  .poc-metrics {
+    gap: 2px;
+  }
+
+  .poc-metrics div {
+    padding-right: 3px;
+  }
+
+  .live-section {
+    padding: 10px;
+  }
+
+  .graph-breadcrumbs button.current {
+    max-width: calc(100vw - 168px);
+  }
+
+  .agent-flow-copy b {
+    display: -webkit-box;
+    white-space: normal;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-height: 1.4;
+  }
+}
+
+/* Reduced motion: preserve state changes while removing decorative movement. */
+@media (prefers-reduced-motion:reduce) {
+  .live-beacon {
+    animation: none!important;
+  }
+}