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

@@ -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;

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">