docs: tighten request orchestration graph layout

Author: linhay

docs-linhay/spaces/20260502-request-orchestration-menu/request-orchestration-design-v01.html

@@ -244,14 +244,14 @@
         position: relative;
         min-width: 0;
         min-height: 100vh;
-        padding: 122px 28px 28px;
+        padding: 154px 28px 28px;
         overflow: auto;
       }
 
       .active-path-strip {
         position: absolute;
-        top: 122px;
-        left: 256px;
+        top: 104px;
+        left: 268px;
         z-index: 2;
         min-height: 42px;
         max-width: 780px;
@@ -385,41 +385,44 @@
       .graph-board {
         position: relative;
         z-index: 1;
-        display: grid;
-        grid-template-columns: 200px minmax(300px, 340px) minmax(320px, 360px) minmax(320px, 360px);
-        grid-template-areas: "entry groups proxies sink";
-        gap: 22px 28px;
-        align-items: start;
-        min-height: 680px;
+        display: block;
+        min-width: 1300px;
+        min-height: 790px;
       }
 
       .node-column {
+        position: absolute;
         display: grid;
-        gap: 14px;
+        gap: 10px;
       }
 
       .node-column.entry {
-        grid-area: entry;
-        margin-top: 92px;
+        left: 0;
+        top: 96px;
+        width: 200px;
       }
 
       .node-column.groups {
-        grid-area: groups;
+        left: 240px;
+        top: 0;
+        width: 330px;
       }
 
       .node-column.proxies {
-        grid-area: proxies;
-        margin-top: 54px;
+        left: 610px;
+        top: 72px;
+        width: 330px;
       }
 
       .node-column.sink {
-        grid-area: sink;
-        margin-top: 54px;
+        left: 980px;
+        top: 72px;
+        width: 340px;
       }
 
       .node-shell {
         display: grid;
-        gap: 12px;
+        gap: 8px;
       }
 
       .node-shell.active .node-head {
@@ -429,15 +432,18 @@
 
       .node-head,
       .node-body {
-        border: 2px solid var(--line);
-        background: var(--bg-node);
-        box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.22);
+        position: relative;
       }
 
       .node-head {
-        padding: 10px 12px;
+        width: fit-content;
+        max-width: 100%;
+        border: 2px solid var(--line);
+        background: rgba(15, 17, 20, 0.9);
+        box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
+        padding: 9px 11px;
         display: grid;
-        gap: 6px;
+        gap: 5px;
         cursor: pointer;
         transition: transform 120ms ease, border-color 120ms ease;
       }
@@ -474,17 +480,19 @@
         color: var(--text-secondary);
         font-size: 10px;
         line-height: 1.45;
-        max-width: 34ch;
+        max-width: 26ch;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
 
       .node-body {
-        padding: 14px;
+        padding: 0;
         display: grid;
-        gap: 14px;
-        position: relative;
+        gap: 10px;
+        border: 0;
+        background: transparent;
+        box-shadow: none;
       }
 
       .node-body.entry {
@@ -590,9 +598,18 @@
       .group-card,
       .route-target,
       .sink-card {
-        padding: 14px;
+        padding: 12px;
         display: grid;
-        gap: 10px;
+        gap: 8px;
+      }
+
+      .group-card,
+      .route-target,
+      .account-chip,
+      .sink-card,
+      .entry-button,
+      .route-editor {
+        outline: 1px solid rgba(255, 255, 255, 0.02);
       }
 
       .group-card.selected {
@@ -602,8 +619,8 @@
 
       .group-card.pending {
         opacity: 0.88;
-        padding-top: 10px;
-        padding-bottom: 10px;
+        padding-top: 9px;
+        padding-bottom: 9px;
       }
 
       .group-card.pending .metric-list,
@@ -634,11 +651,15 @@
       .target-note,
       .sink-copy {
         color: var(--text-secondary);
-        font-size: 12px;
+        font-size: 11px;
         line-height: 1.45;
         margin-top: 4px;
       }
 
+      .target-note {
+        display: none;
+      }
+
       .badge {
         min-height: 26px;
         border: 2px solid var(--line);
@@ -679,10 +700,10 @@
       }
 
       .group-editing-strip {
-        min-height: 54px;
+        min-height: 48px;
         border: 2px solid rgba(243, 87, 45, 0.24);
         background: rgba(243, 87, 45, 0.08);
-        padding: 10px 12px;
+        padding: 8px 10px;
         display: grid;
         gap: 6px;
       }
@@ -731,21 +752,24 @@
       }
 
       .account-cloud {
-        display: flex;
-        flex-wrap: wrap;
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 8px;
       }
 
       .account-chip {
-        min-height: 42px;
+        min-height: 86px;
         border: 2px solid var(--line);
         background: rgba(255, 255, 255, 0.03);
         color: var(--text-secondary);
-        padding: 0 10px;
-        display: inline-flex;
-        align-items: center;
+        padding: 10px;
+        display: grid;
+        align-content: space-between;
+        justify-items: start;
         gap: 8px;
         position: relative;
+        text-align: left;
+        box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.18);
       }
 
       .account-chip.compatible {
@@ -764,7 +788,7 @@
       }
 
       .account-chip.active strong::after {
-        content: " editing";
+        content: " current";
         margin-left: 6px;
         font-family: var(--mono);
         font-size: 9px;
@@ -787,8 +811,11 @@
       }
 
       .account-link-handle {
-        width: 18px;
-        height: 18px;
+        position: absolute;
+        right: 8px;
+        bottom: 8px;
+        width: 20px;
+        height: 20px;
         border: 2px solid currentColor;
         border-radius: 999px;
         display: inline-flex;
@@ -822,10 +849,10 @@
       }
 
       .route-editor {
-        padding: 12px;
+        padding: 10px;
         background: rgba(255, 255, 255, 0.03);
         display: grid;
-        gap: 10px;
+        gap: 8px;
       }
 
       .route-editor-meta {
@@ -836,17 +863,18 @@
 
       .route-editor-copy {
         color: var(--text-secondary);
-        font-size: 12px;
+        font-size: 11px;
         line-height: 1.45;
+        display: none;
       }
 
       .selected-account {
-        min-height: 68px;
+        min-height: 54px;
         border: 2px solid rgba(243, 87, 45, 0.28);
         background: rgba(243, 87, 45, 0.08);
-        padding: 12px;
+        padding: 10px;
         display: grid;
-        gap: 8px;
+        gap: 6px;
       }
 
       .selected-account.empty {
@@ -867,13 +895,15 @@
 
       .route-target-grid {
         display: grid;
-        grid-template-columns: 1fr;
-        gap: 12px;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 10px;
       }
 
       .route-target {
+        min-height: 118px;
         text-align: left;
         cursor: pointer;
+        align-content: space-between;
         transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
       }
 
@@ -934,10 +964,10 @@
       }
 
       .route-chip {
-        min-height: 24px;
+        min-height: 22px;
         border: 1px solid var(--line);
         background: rgba(255, 255, 255, 0.03);
-        padding: 0 8px;
+        padding: 0 6px;
         display: inline-flex;
         align-items: center;
         gap: 6px;
@@ -946,6 +976,23 @@
         font-size: 10px;
       }
 
+      .route-chip.current,
+      .route-chip.tested {
+        border-color: rgba(243, 87, 45, 0.32);
+        background: rgba(243, 87, 45, 0.1);
+      }
+
+      .route-chip.tested {
+        border-color: rgba(101, 210, 123, 0.42);
+        background: rgba(101, 210, 123, 0.12);
+      }
+
+      .sink-card .metric-list {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 0 12px;
+      }
+
       .route-chip strong {
         color: var(--text-primary);
       }
@@ -1010,14 +1057,14 @@
       }
 
       .test-console {
-        min-height: 108px;
+        min-height: 78px;
         border: 2px solid var(--line);
         background: rgba(0, 0, 0, 0.18);
-        padding: 12px;
+        padding: 10px;
         color: var(--text-secondary);
         font-family: var(--mono);
-        font-size: 11px;
-        line-height: 1.6;
+        font-size: 10px;
+        line-height: 1.5;
         white-space: pre-line;
       }