multi source

Client/WebUI/static/style.css

@@ -312,6 +312,71 @@ input[type=range].trig-range::-webkit-slider-thumb {
 .ctx-range { width:80px; }
 .ctx-range-val { font-size:11px; color:var(--mauve); min-width:26px; }
 
+/* ── Source groups ────────────────────────────────────────────── */
+.source-group { margin-bottom:2px; }
+.source-group-header {
+  display:flex; align-items:center; gap:5px;
+  padding:5px 8px 5px 10px; margin:4px 6px 2px;
+  background:var(--surface0); border-radius:6px;
+}
+.source-state-dot {
+  width:7px; height:7px; border-radius:50%; flex-shrink:0;
+  background:var(--overlay0); transition:background var(--transition);
+}
+.source-state-dot.connected    { background:var(--green); }
+.source-state-dot.connecting   { background:var(--yellow); animation:pulse-orange 1.5s infinite; }
+.source-state-dot.disconnected { background:var(--red); }
+.source-name {
+  font-size:11px; font-weight:600; color:var(--subtext1); flex:1;
+  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
+}
+.source-addr {
+  font-size:10px; color:var(--overlay0); font-family:monospace;
+  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:90px;
+}
+.source-remove-btn {
+  background:none; border:none; color:var(--overlay0);
+  cursor:pointer; font-size:15px; line-height:1; padding:0 2px; flex-shrink:0;
+  transition:color var(--transition);
+}
+.source-remove-btn:hover { color:var(--red); }
+
+/* ── Add source section ───────────────────────────────────────── */
+.add-source-section {
+  border-top:1px solid var(--surface0); margin-top:4px;
+}
+.add-source-title {
+  display:flex; align-items:center; gap:5px;
+  padding:6px 10px; cursor:pointer; user-select:none;
+  font-size:11px; color:var(--overlay0);
+  transition:color var(--transition);
+}
+.add-source-title:hover { color:var(--subtext1); }
+.add-src-arrow {
+  font-size:9px; display:inline-block;
+  transition:transform var(--transition);
+}
+.add-source-body {
+  display:none; flex-direction:column; gap:5px;
+  padding:0 10px 10px;
+}
+.add-source-section.open .add-source-body { display:flex; }
+.add-src-input {
+  background:var(--surface0); color:var(--text);
+  border:1px solid var(--surface1); border-radius:5px;
+  padding:4px 8px; font-size:12px; outline:none; width:100%;
+}
+.add-src-input:focus { border-color:var(--accent); }
+.add-src-btn {
+  background:var(--surface0); color:var(--accent);
+  border:1px solid var(--surface1); border-radius:5px;
+  padding:4px 10px; font-size:12px; cursor:pointer; width:100%;
+  transition:background var(--transition),border-color var(--transition);
+}
+.add-src-btn:hover { background:rgba(137,180,250,0.15); border-color:var(--accent); }
+.save-src-btn { color:var(--green); }
+.save-src-btn:hover { background:rgba(166,227,161,0.1); border-color:var(--green); }
+
 /* ── Empty state ──────────────────────────────────────────────── */
 #empty-state {
   position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);