From cc8d961c33d0aecf3b25cd8e03c8e1d3beee232c Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Sat, 25 Apr 2026 15:23:30 +0300
Subject: [PATCH] fix(redesign): make Active Wires pipe visually prominent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wire column was content-width (min 100px) so the line vanished between
two wide endpoint blocks. Bumped to minmax(220px, 1.6fr) so the pipe
takes ~60% more space than either side, thickened the line 2→3px,
faded both ends via color-mix transparency stops, added a soft
primary-glow halo plus a 1px specular sheen, and beefed up the count
badge with a rule-strong border / inset highlight / drop shadow so it
reads as a node on the wire. Stacks to a single column below 880px.
---
 frontend/src/routes/+page.svelte | 48 ++++++++++++++++++++++++--------
 1 file changed, 36 insertions(+), 12 deletions(-)

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 06dcc45..8d45d89 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1315,10 +1315,10 @@
 	}
 	.wire {
 		display: grid;
-		grid-template-columns: 1fr auto 1fr;
-		gap: 0.85rem;
+		grid-template-columns: minmax(0, 1fr) minmax(220px, 1.6fr) minmax(0, 1fr);
+		gap: 1rem;
 		align-items: center;
-		padding: 0.7rem 0;
+		padding: 0.85rem 0;
 	}
 	.wire + .wire { border-top: 1px dashed var(--color-border); }
 	.wire-from, .wire-to {
@@ -1333,26 +1333,50 @@
 	.wire-sub { font-size: 0.65rem; color: var(--color-muted-foreground); margin-top: 0.15rem; }
 	.wire-pipe {
 		position: relative;
-		min-width: 100px;
 		display: flex; align-items: center; justify-content: center;
-		height: 22px;
+		height: 26px;
 	}
 	.wire-pipe::before {
 		content: '';
-		position: absolute; inset: 50% 0 auto 0; height: 2px;
-		background: linear-gradient(90deg, var(--color-primary), var(--color-orchid), var(--color-mint));
-		opacity: 0.5;
-		border-radius: 2px;
+		position: absolute; left: 0; right: 0; top: 50%;
+		height: 3px; transform: translateY(-50%);
+		background: linear-gradient(90deg,
+			color-mix(in srgb, var(--color-primary) 35%, transparent),
+			var(--color-primary),
+			var(--color-orchid),
+			var(--color-mint),
+			color-mix(in srgb, var(--color-mint) 35%, transparent));
+		opacity: 0.85;
+		border-radius: 3px;
+		box-shadow: 0 0 12px -2px var(--color-glow-strong);
+	}
+	.wire-pipe::after {
+		content: '';
+		position: absolute; left: 0; right: 0; top: 50%;
+		height: 1px; transform: translateY(-50%);
+		background: linear-gradient(90deg, transparent 8%, rgba(255,255,255,0.35) 50%, transparent 92%);
+		pointer-events: none;
 	}
 	.wire-count {
 		position: relative; z-index: 1;
 		background: var(--color-glass-elev);
-		border: 1px solid var(--color-border);
-		padding: 0.15rem 0.6rem;
+		border: 1px solid var(--color-rule-strong);
+		padding: 0.2rem 0.7rem;
 		border-radius: 999px;
-		font-size: 0.7rem;
+		font-size: 0.72rem;
+		font-weight: 500;
 		color: var(--color-foreground);
 		font-variant-numeric: tabular-nums;
+		box-shadow: 0 2px 10px -4px var(--color-glow), inset 0 1px 0 var(--color-highlight);
+	}
+
+	@media (max-width: 880px) {
+		.wire {
+			grid-template-columns: 1fr;
+			gap: 0.4rem;
+		}
+		.wire-to { justify-content: flex-start; text-align: left; }
+		.wire-pipe { height: 18px; }
 	}
 
 	/* ============================================================