From 17ae56182839db192cd2e7d879e6e19c5584a03c Mon Sep 17 00:00:00 2001
From: Jocadbz <joaquimmadureira@protonmail.com>
Date: Tue, 9 Jun 2026 20:14:50 -0300
Subject: [PATCH] Cable labels shown between trace segments

Connection labels now appear as accent-bordered pills on the main arrow
between far and clicked segments, instead of plain paragraphs below the
trace. Unlabeled cables show a plain em-dash as before.
---
 static/style.css                | 6 ++++++
 templates/connection_modal.html | 6 +++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/static/style.css b/static/style.css
index 9386aff..3149ecc 100644
--- a/static/style.css
+++ b/static/style.css
@@ -158,6 +158,12 @@ th { background: var(--surface); font-weight: 600; }
 }
 .trace-segment small { display: block; }
 .trace-arrow { color: var(--text-muted); font-weight: bold; }
+.trace-cable { color: var(--accent); }
+.cable-label { 
+    display: inline-block; padding: 0.1em 0.5em; background: var(--surface2);
+    border: 1px solid var(--accent); border-radius: 3px;
+    font-size: 0.8em; font-weight: 400; color: var(--text);
+}
 .trace-clicked {
     padding: 0.3em 0.6em; background: var(--surface2); border-radius: 3px;
     border: 2px solid var(--accent); display: inline-block;
diff --git a/templates/connection_modal.html b/templates/connection_modal.html
index d564a31..b5cdea0 100644
--- a/templates/connection_modal.html
+++ b/templates/connection_modal.html
@@ -41,7 +41,9 @@
             <div class="trace-arrow">&mdash;</div>
             {{end}}
         </div>
-        <div class="trace-arrow">&mdash;</div>
+        <div class="trace-arrow trace-cable">
+            {{if or .Trace.Label1 .Trace.Label2}}<span class="cable-label">{{if .Trace.Label1}}{{.Trace.Label1}}{{end}}{{if and .Trace.Label1 .Trace.Label2}} / {{end}}{{if .Trace.Label2}}{{.Trace.Label2}}{{end}}</span>{{else}}&mdash;{{end}}
+        </div>
         {{end}}
 
         <div class="trace-clicked">
@@ -68,8 +70,6 @@
     <div class="connection-details">
         <p><strong>Type:</strong> {{.Trace.ConnectionType}}</p>
         <p><strong>Color:</strong> <span style="display:inline-block;width:1em;height:1em;background:{{.Trace.Color}};border:1px solid #999;vertical-align:middle;"></span> {{.Trace.Color}}</p>
-        {{if .Trace.Label1}}<p><strong>Label end 1:</strong> {{.Trace.Label1}}</p>{{end}}
-        {{if .Trace.Label2}}<p><strong>Label end 2:</strong> {{.Trace.Label2}}</p>{{end}}
     </div>
 
     <div class="connection-actions">