Service Mesh
-
-
+
@@ -89,7 +105,7 @@
Proplet
-
Linux · Cloud node
+
Cloud Node · Linux
Wasm
@@ -112,7 +128,7 @@
Proplet
-
Zephyr · MCU
+
MCU · Zephyr RTOS
Wasm
@@ -126,7 +142,7 @@
OCI Registry
Artifact store
-
HTTP
+
Wasm Module
@@ -264,6 +280,14 @@
background: rgba(255, 122, 74, 0.03);
}
+ /* ── Bounding box grouping FluxMQ + Atom under Service Mesh ── */
+ .pt-mesh-group {
+ border: 1px solid rgba(255, 122, 74, 0.3);
+ border-radius: 10px;
+ padding: 6px;
+ background: rgba(255, 122, 74, 0.02);
+ }
+
.pt-name {
font-family: "JetBrains Mono", monospace;
font-size: 13px;
@@ -296,37 +320,6 @@
align-self: flex-start;
}
- /* ── Vertical pipe (between layers) ── */
- .pt-pipe {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 44px;
- flex-shrink: 0;
- position: relative;
- margin: 2px 0;
- }
- .pt-pipe::before,
- .pt-pipe::after {
- content: "";
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- width: 0;
- height: 0;
- border-left: 4px solid transparent;
- border-right: 4px solid transparent;
- z-index: 3;
- }
- .pt-pipe::before {
- top: 2px;
- border-bottom: 5px solid rgba(7, 55, 99, 0.3);
- }
- .pt-pipe::after {
- bottom: 2px;
- border-top: 5px solid rgba(7, 55, 99, 0.3);
- }
-
/* ── Shared vertical line ── */
.pt-vline {
position: absolute;
@@ -356,10 +349,6 @@
animation: ptVBeam 2.8s ease-in-out infinite;
border-radius: 2px;
}
- .pt-vbeam-rev {
- animation-delay: 1.4s;
- animation-direction: reverse;
- }
@keyframes ptVBeam {
from {
top: -40%;
@@ -369,22 +358,6 @@
}
}
- /* ── Proto label (main pipes) ── */
- .pt-proto {
- position: relative;
- z-index: 2;
- background: var(--paper-2);
- border: 1px solid rgba(7, 55, 99, 0.18);
- padding: 3px 11px;
- border-radius: 999px;
- font-family: "JetBrains Mono", monospace;
- font-size: 8px;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.14em;
- color: rgba(7, 55, 99, 0.6);
- }
-
/* ── Small proto label (fork pipe branches, HTTP↓) ── */
.pt-proto-sm {
position: relative;
@@ -491,6 +464,32 @@
z-index: 3;
}
+ /* ── Merge fork — mirrors pt-pipe-fork (Manager + K8s Operator → Service Mesh) ── */
+ /* Branches now run from the top cells down to the junction bar */
+ .pt-pipe-merge .pt-fork-half .pt-vline {
+ top: 0;
+ bottom: 50%;
+ }
+ /* Upward arrowhead pointing into Manager / K8s Operator above */
+ .pt-pipe-merge .pt-fork-half::after {
+ top: 2px;
+ bottom: auto;
+ border-top: none;
+ border-bottom: 5px solid rgba(7, 55, 99, 0.3);
+ }
+ /* Stem now runs from the junction bar down into Service Mesh below */
+ .pt-pipe-merge .pt-fork-stem {
+ top: auto;
+ bottom: 0;
+ }
+ /* Downward arrowhead pointing into Service Mesh */
+ .pt-pipe-merge.pt-pipe-fork::after {
+ top: auto;
+ bottom: 2px;
+ border-bottom: none;
+ border-top: 5px solid rgba(7, 55, 99, 0.3);
+ }
+
/* ── Edge grid (5 columns + OCI below Proxy) ── */
.pt-edge-grid {
display: grid;
@@ -659,7 +658,7 @@
z-index: 3;
}
- /* ── Edge fork: Magistrala → Proplet L & Proplet R ── */
+ /* ── Edge fork: Service Mesh → Proplet L & Proplet R ── */
/* Uses the same grid-template-columns as pt-edge-grid so branches align exactly */
.pt-pipe-edge-fork {
display: grid;
@@ -669,7 +668,7 @@
margin: 2px 0;
position: relative;
}
- /* Upward arrowhead at top-center pointing toward Magistrala */
+ /* Upward arrowhead at top-center pointing toward Service Mesh */
.pt-pipe-edge-fork::after {
content: "";
position: absolute;
@@ -695,7 +694,7 @@
transform: translateY(-50%);
border-radius: 1px;
}
- /* Vertical stem from Magistrala center down to the horizontal bar */
+ /* Vertical stem from Service Mesh center down to the horizontal bar */
.pt-fork-stem-center {
position: absolute;
top: 0;
@@ -777,9 +776,6 @@
padding: 2px 5px;
margin-top: 5px;
}
- .pt-pipe {
- height: 36px;
- }
.pt-pipe-fork {
height: 36px;
}