Доп. сигналы — отдельные устройства, а не sensor_type у существующего

Раньше "добавить сигнал" дописывал ещё один sensor_type к sensor-1 —
концептуально неверно и для дискретных входов, и тем более для выходов.
Теперь и вход (датчик), и выход (актуатор) создаются как полноценное
отдельное MQTT-устройство со своим external_id/zone_id — так же, как
завели бы новое Device на платформе.

state.Store обобщён: 4 фиксированных слота (плата, GPIO-пины, нельзя
удалить) + произвольное число доп. устройств (свой slot "extra-N",
можно удалить). HTTP: POST /api/devices (создать, kind=sensor|actuator),
DELETE /api/devices/{slot}.

На схеме доп. устройства подвешены к пину EXT пунктирным проводом —
визуально отделены от жёстко распаянных GPIO4/16/17/18. Можно указать
и произвольный пин (просто текстовая метка на схеме, без валидации) —
подписывается у провода вместо общего EXT.

Карточки создаются/удаляются динамически при получении снапшота через
SSE, без перезагрузки страницы.

internal/httpserver/server.go

@@ -43,10 +43,60 @@ func (s *Server) routes() {
 
 	s.mux.HandleFunc("GET /api/snapshot", s.handleSnapshot)
 	s.mux.HandleFunc("GET /api/events", s.handleEvents)
+	s.mux.HandleFunc("POST /api/devices", s.handleAddDevice)
+	s.mux.HandleFunc("DELETE /api/devices/{slot}", s.handleRemoveDevice)
 	s.mux.HandleFunc("POST /api/devices/{slot}/identity", s.handleSetIdentity)
 	s.mux.HandleFunc("POST /api/devices/{slot}/telemetry", s.handlePublishTelemetry)
 }
 
+// handleAddDevice creates a new standalone sensor (input) or actuator
+// (output) device — a separate MQTT device_id, not another sensor_type or
+// a manual override tacked onto an existing device. Mirrors how you'd
+// actually add a second physical device to the platform (a new Device row
+// with its own external_id).
+func (s *Server) handleAddDevice(w http.ResponseWriter, r *http.Request) {
+	var req struct {
+		Kind          string `json:"kind"` // "sensor" | "actuator"
+		SignalName    string `json:"signal_name"`
+		ExternalID    string `json:"external_id"`
+		ZoneID        string `json:"zone_id"`
+		Pin           string `json:"pin"`
+		Discrete      bool   `json:"discrete"`
+		SupportsLevel bool   `json:"supports_level"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil || req.ExternalID == "" || req.ZoneID == "" {
+		http.Error(w, "external_id and zone_id are required", http.StatusBadRequest)
+		return
+	}
+
+	var slot string
+	switch req.Kind {
+	case "sensor":
+		if req.SignalName == "" {
+			http.Error(w, "signal_name is required for a sensor device", http.StatusBadRequest)
+			return
+		}
+		slot = s.store.AddSensorDevice(req.SignalName, req.ExternalID, req.ZoneID, req.Pin, req.Discrete)
+	case "actuator":
+		slot = s.store.AddActuatorDevice(req.ExternalID, req.ZoneID, req.Pin, req.SupportsLevel)
+	default:
+		http.Error(w, `kind must be "sensor" or "actuator"`, http.StatusBadRequest)
+		return
+	}
+
+	writeJSON(w, http.StatusCreated, s.store.Snapshot())
+	s.logger.Info("extra device added", "slot", slot, "kind", req.Kind, "device_id", req.ExternalID)
+}
+
+func (s *Server) handleRemoveDevice(w http.ResponseWriter, r *http.Request) {
+	slot := r.PathValue("slot")
+	if !s.store.RemoveDevice(slot) {
+		http.Error(w, "unknown or non-removable slot", http.StatusBadRequest)
+		return
+	}
+	writeJSON(w, http.StatusOK, s.store.Snapshot())
+}
+
 func (s *Server) handleSnapshot(w http.ResponseWriter, r *http.Request) {
 	writeJSON(w, http.StatusOK, s.store.Snapshot())
 }

internal/httpserver/web/index.html

@@ -20,6 +20,7 @@
     --wire-fan: #5b7ba8;
     --wire-light: #e8b339;
     --wire-pump: #3aa0e8;
+    --wire-ext: #7a8ba8;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   }
   * { box-sizing: border-box; }
@@ -30,7 +31,7 @@
     padding: 24px;
   }
   h1 { font-size: 1.3rem; font-weight: 600; margin: 0 0 4px; }
-  .subtitle { color: var(--muted); margin: 0 0 24px; font-size: 0.9rem; max-width: 640px; }
+  .subtitle { color: var(--muted); margin: 0 0 24px; font-size: 0.9rem; max-width: 680px; }
   .conn {
     display: inline-flex; align-items: center; gap: 6px;
     font-size: 0.8rem; color: var(--muted); margin-bottom: 20px;
@@ -79,15 +80,18 @@
     transition: box-shadow .3s, border-color .3s;
   }
   .card.flash { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(51,209,122,0.25); }
+  .card.add-device-card { border-style: dashed; }
   .card h2 {
     font-size: 0.95rem; margin: 0 0 12px;
-    display: flex; align-items: center; justify-content: space-between;
+    display: flex; align-items: center; justify-content: space-between; gap: 8px;
   }
+  .card h2 .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .badge {
     font-size: 0.72rem; padding: 2px 8px; border-radius: 999px;
-    background: var(--panel-2); color: var(--muted); font-weight: 500;
+    background: var(--panel-2); color: var(--muted); font-weight: 500; flex-shrink: 0;
   }
   .badge.on { background: var(--accent-dim); color: var(--accent); }
+  .badge.extra { background: #2a2440; color: #b39ddb; }
 
   label { display: block; font-size: 0.78rem; color: var(--muted); margin: 10px 0 4px; }
   input[type=text], input[type=number] {
@@ -105,6 +109,7 @@
     font-weight: 600; font-size: 0.85rem; cursor: pointer;
   }
   button.secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
+  button.danger { background: transparent; color: #e08a8a; border: 1px solid #4a2c2c; }
   button:active { transform: translateY(1px); }
 
   .status-line { display: flex; justify-content: space-between; font-size: 0.85rem; margin-top: 8px; }
@@ -112,17 +117,10 @@
   .value { color: var(--text); font-weight: 600; }
   .hint { color: var(--muted); font-size: 0.78rem; margin-top: 10px; }
 
-  .signal-group-label {
-    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
-    color: var(--muted); margin-top: 12px; margin-bottom: 2px;
-  }
-  .signal-group-label:first-child { margin-top: 0; }
-
   .signal-row {
     display: flex; align-items: center; justify-content: space-between;
-    gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 0.85rem;
+    gap: 8px; padding: 6px 0; font-size: 0.85rem;
   }
-  .signal-row:first-of-type { border-top: none; }
   .signal-row .name { color: var(--muted); }
   .signal-row input[type=range] { flex: 1; }
   .signal-row .val { width: 44px; text-align: right; font-weight: 600; }
@@ -137,22 +135,24 @@
   }
   .toggle.on .knob { left: 20px; background: var(--accent); }
 
-  .add-signal { border-top: 1px dashed var(--border); margin-top: 12px; padding-top: 12px; }
-  .add-signal .row2 { display: flex; gap: 8px; margin-top: 6px; }
   select {
-    padding: 7px 9px; border-radius: 7px; border: 1px solid var(--border);
+    width: 100%; padding: 7px 9px; border-radius: 7px; border: 1px solid var(--border);
     background: var(--panel-2); color: var(--text); font-size: 0.85rem;
   }
+  .field-row { display: flex; gap: 8px; }
+  .field-row > div { flex: 1; }
+  .checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.85rem; }
+  .checkbox-row input { width: auto; margin: 0; }
 </style>
 </head>
 <body>
 
 <h1>ESP32 Emulator</h1>
-<p class="subtitle">Виртуальный ESP32-контроллер гроубокса. Слева — какой пин к чему подключён. Показания датчика вы задаёте и публикуете сами (входные сигналы → в автоматику); питание/уровень актуаторов меняются САМИ, когда платформа реально присылает команду (выход из автоматики → сюда).</p>
+<p class="subtitle">Виртуальный ESP32-контроллер гроубокса. Слева — какой пин к чему подключён. Показания задаёте и публикуете сами (входные сигналы → в автоматику); питание/уровень актуаторов меняются САМИ, когда платформа реально присылает команду (выход из автоматики → сюда). Дополнительные сигналы — это отдельные устройства (свой external_id), а не довесок к существующим.</p>
 <div id="conn" class="conn offline"><span class="dot"></span><span id="conn-label">подключение…</span></div>
 
 <div class="board-wrap">
-<svg class="board" viewBox="0 0 700 340" xmlns="http://www.w3.org/2000/svg">
+<svg class="board" viewBox="0 0 700 460" xmlns="http://www.w3.org/2000/svg">
   <!-- ESP32 devkit board -->
   <g transform="translate(255,20)">
     <rect x="0" y="0" width="190" height="300" rx="8" fill="#1a4d2e" stroke="#0d2e1b" stroke-width="2"/>
@@ -172,6 +172,8 @@
     <g id="pin-fan"><circle class="pin" cx="190" cy="130" r="3.5"/></g>
     <g id="pin-light"><circle class="pin" cx="190" cy="170" r="3.5"/></g>
     <g id="pin-pump"><circle class="pin" cx="190" cy="210" r="3.5"/></g>
+    <!-- expansion header (I2C/GPIO for extra devices, not one fixed pin) -->
+    <g id="pin-ext"><circle class="pin" cx="95" cy="300" r="3.5"/></g>
 
     <!-- decorative header pins -->
     <g fill="#8a8a8a">
@@ -186,6 +188,7 @@
     <text class="pin-label" x="150" y="127">GPIO16</text>
     <text class="pin-label" x="150" y="167">GPIO17</text>
     <text class="pin-label" x="150" y="207">GPIO18</text>
+    <text class="pin-label" x="60" y="298" text-anchor="end">EXT</text>
   </g>
 
   <!-- sensor (left) -->
@@ -230,125 +233,53 @@
   </g>
   <text class="peripheral-label" x="615" y="332">Помпа</text>
   <text class="peripheral-sub" x="500" y="332">GPIO18 · relay</text>
+
+  <!-- extra devices attach here, below the fixed board — see renderExtensionDevices() -->
+  <path class="wire" id="ext-trunk" d="M 350,320 L 350,360" stroke="var(--wire-ext)" stroke-dasharray="4 3"/>
+  <text x="350" y="378" text-anchor="middle" font-size="9" fill="var(--wire-ext)">доп. устройства (EXT)</text>
+  <g id="extension-devices"></g>
 </svg>
 </div>
 
 <div class="grid" id="cards"></div>
 
 <script>
-const SLOTS = {
-  sensor: { label: 'Датчик (входные сигналы)', kind: 'sensor' },
-  fan:    { label: 'Вентилятор', kind: 'actuator' },
-  light:  { label: 'Свет', kind: 'actuator' },
-  pump:   { label: 'Помпа', kind: 'actuator' },
-};
-
-// Signals with a slider preset (min/max/step/unit); anything else added via
-// "add signal" is either a plain number or a discrete on/off toggle.
+// Presets give known signal names a friendly slider range/unit; anything
+// else is just min 0 / max 100 unless the user picked "discrete".
 const SIGNAL_PRESETS = {
   temperature: { min: -10, max: 50, step: 0.5, unit: '°C' },
   humidity:    { min: 0,   max: 100, step: 1,  unit: '%' },
 };
 
-let latest = {};
-let knownSignals = {}; // slot -> Set of sensor_type names currently rendered
+const CORE_LABELS = { sensor: 'Датчик', fan: 'Вентилятор', light: 'Свет', pump: 'Помпа' };
 
-function cardHTML(slot) {
-  const meta = SLOTS[slot];
-  const idPrefix = slot;
-  let body = `
-    <label>external_id</label>
-    <input type="text" id="${idPrefix}-external-id">
-    <label>zone_id</label>
-    <input type="text" id="${idPrefix}-zone-id">
-    <button class="secondary" onclick="saveIdentity('${slot}')">Сохранить идентификатор</button>
-  `;
+let latest = {};       // slot -> last known Device
+let cardSlots = new Set(); // slots that currently have a rendered card
 
-  if (meta.kind === 'sensor') {
-    body += `
-      <div id="${idPrefix}-signals"></div>
-      <div class="add-signal">
-        <label>Добавить сигнал</label>
-        <div class="row2">
-          <input type="text" id="${idPrefix}-new-name" placeholder="напр. door_open">
-          <select id="${idPrefix}-new-kind">
-            <option value="analog">аналоговый</option>
-            <option value="discrete">дискретный (вкл/выкл)</option>
-          </select>
-        </div>
-        <button class="secondary" onclick="addSignal('${slot}')">Добавить</button>
-      </div>
-      <p class="hint">Входные сигналы публикуются в MQTT автоматически (слайдер — с небольшой задержкой после того, как отпустили; переключатель — сразу).</p>
-      <button class="secondary" onclick="publishAll('${slot}')">Переопубликовать всё сейчас</button>
-    `;
-  } else {
-    body += `
-      <div class="status-line"><span>Питание</span><span id="${idPrefix}-power">—</span></div>
-      <div class="status-line" id="${idPrefix}-level-row" style="display:none">
-        <span>Уровень</span><span id="${idPrefix}-level">—</span>
-      </div>
-      <p class="hint">Выходной сигнал — меняется, когда платформа присылает команду по MQTT. Ручного переключателя здесь нет специально.</p>
-    `;
-  }
-
-  const badge = meta.kind === 'actuator' ? `<span class="badge" id="${idPrefix}-badge">выключено</span>` : '';
-  return `<div class="card" id="${idPrefix}-card">
-    <h2>${meta.label} ${badge}</h2>
-    ${body}
-  </div>`;
+function escapeHTML(str) {
+  return String(str).replace(/[&<>"']/g, (c) => ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c]));
 }
 
-document.getElementById('cards').innerHTML = Object.keys(SLOTS).map(cardHTML).join('');
-
-function isDiscreteSignal(slot, name) {
-  return knownSignals[slot]?.discrete?.has(name);
-}
+function cssId(name) { return name.replace(/[^a-zA-Z0-9_-]/g, '_'); }
 
 function analogRowHTML(slot, name, value) {
   const preset = SIGNAL_PRESETS[name];
   const min = preset?.min ?? 0, max = preset?.max ?? 100, step = preset?.step ?? 1, unit = preset?.unit ?? '';
-  return `<div class="signal-row" data-signal="${name}">
-    <span class="name">${name}${unit ? ' ('+unit+')' : ''}</span>
+  return `<div class="signal-row" data-signal="${escapeHTML(name)}">
+    <span class="name">${escapeHTML(name)}${unit ? ' ('+unit+')' : ''}</span>
     <input type="range" min="${min}" max="${max}" step="${step}" value="${value}"
-      oninput="onSliderInput('${slot}','${name}', this.value)">
+      oninput="onSliderInput('${slot}','${escapeHTML(name)}', this.value)">
     <span class="val" id="${slot}-${cssId(name)}-val">${value}</span>
   </div>`;
 }
 
 function discreteRowHTML(slot, name, value) {
-  return `<div class="signal-row" data-signal="${name}">
-    <span class="name">${name}</span>
-    <div class="toggle ${value ? 'on' : ''}" onclick="toggleDiscrete('${slot}','${name}')"><div class="knob"></div></div>
+  return `<div class="signal-row" data-signal="${escapeHTML(name)}">
+    <span class="name">${escapeHTML(name)}</span>
+    <div class="toggle ${value ? 'on' : ''}" onclick="toggleDiscrete('${slot}','${escapeHTML(name)}')"><div class="knob"></div></div>
   </div>`;
 }
 
-function cssId(name) { return name.replace(/[^a-zA-Z0-9_-]/g, '_'); }
-
-// Discrete vs analog are shown as two visually separate groups — a
-// discrete "door_open" signal is still just another sensor_type on the
-// same physical device underneath (one MQTT device can report several
-// sensor_types, same as real telemetry), but grouping keeps it from
-// reading as "attached to the temperature sensor".
-function renderSignals(slot, readings) {
-  const container = document.getElementById(`${slot}-signals`);
-  knownSignals[slot] = knownSignals[slot] || { discrete: new Set() };
-
-  const analogNames = orderedNames(readings).filter((n) => !isDiscreteSignal(slot, n));
-  const discreteNames = Object.keys(readings).filter((n) => isDiscreteSignal(slot, n)).sort();
-
-  let html = '';
-  if (analogNames.length) {
-    html += `<div class="signal-group-label">Аналоговые</div>`;
-    html += analogNames.map((name) => analogRowHTML(slot, name, readings[name])).join('');
-  }
-  if (discreteNames.length) {
-    html += `<div class="signal-group-label">Дискретные</div>`;
-    html += discreteNames.map((name) => discreteRowHTML(slot, name, readings[name])).join('');
-  }
-  container.innerHTML = html;
-  updateBoardText(slot, readings);
-}
-
 // Known presets sort first (temperature before humidity), custom signals
 // after, alphabetically — keeps the board's two-line readout predictable.
 function orderedNames(readings) {
@@ -357,6 +288,149 @@ function orderedNames(readings) {
   return names.sort((a, b) => rank(a) - rank(b) || a.localeCompare(b));
 }
 
+function deviceTitle(d) {
+  if (d.core) return CORE_LABELS[d.slot];
+  if (d.kind === 'sensor') return Object.keys(d.readings || {})[0] || d.external_id;
+  return d.external_id;
+}
+
+function cardHTML(d) {
+  const badge = d.kind === 'actuator'
+    ? `<span class="badge" id="${d.slot}-badge">выключено</span>`
+    : (!d.core ? `<span class="badge extra">доп.</span>` : '');
+
+  let body = '';
+  if (d.pin) {
+    body += `<p class="hint" style="margin-top:0">Пин: <strong style="color:var(--text)">${escapeHTML(d.pin)}</strong></p>`;
+  }
+  body += `
+    <label>external_id</label>
+    <input type="text" id="${d.slot}-external-id">
+    <label>zone_id</label>
+    <input type="text" id="${d.slot}-zone-id">
+    <button class="secondary" onclick="saveIdentity('${d.slot}')">Сохранить идентификатор</button>
+  `;
+
+  if (d.kind === 'sensor') {
+    body += `<div id="${d.slot}-signals"></div>`;
+    body += `<p class="hint">Публикуется в MQTT автоматически (слайдер — с небольшой задержкой после того, как отпустили; переключатель — сразу).</p>`;
+  } else {
+    body += `
+      <div class="status-line"><span>Питание</span><span id="${d.slot}-power">—</span></div>
+      <div class="status-line" id="${d.slot}-level-row" style="display:none">
+        <span>Уровень</span><span id="${d.slot}-level">—</span>
+      </div>
+      <p class="hint">Выходной сигнал — меняется, когда платформа присылает команду по MQTT. Ручного переключателя здесь нет специально.</p>
+    `;
+  }
+
+  if (!d.core) {
+    body += `<button class="danger" onclick="removeDevice('${d.slot}')">Удалить устройство</button>`;
+  }
+
+  return `<div class="card" id="${d.slot}-card">
+    <h2><span class="title">${escapeHTML(deviceTitle(d))}</span> ${badge}</h2>
+    ${body}
+  </div>`;
+}
+
+function addDeviceCardHTML() {
+  return `<div class="card add-device-card" id="add-device-card">
+    <h2><span class="title">Добавить устройство</span></h2>
+    <label>Тип</label>
+    <select id="new-device-kind" onchange="onNewDeviceKindChange()">
+      <option value="sensor">Вход (датчик)</option>
+      <option value="actuator">Выход (актуатор)</option>
+    </select>
+
+    <div id="new-device-sensor-fields">
+      <label>Название сигнала</label>
+      <input type="text" id="new-device-signal-name" placeholder="напр. door_open">
+      <div class="checkbox-row">
+        <input type="checkbox" id="new-device-discrete">
+        <label style="margin:0" for="new-device-discrete">Дискретный (вкл/выкл)</label>
+      </div>
+    </div>
+    <div id="new-device-actuator-fields" style="display:none">
+      <div class="checkbox-row">
+        <input type="checkbox" id="new-device-supports-level">
+        <label style="margin:0" for="new-device-supports-level">Поддерживает уровень (set_level)</label>
+      </div>
+    </div>
+
+    <div class="field-row">
+      <div>
+        <label>external_id</label>
+        <input type="text" id="new-device-external-id" placeholder="напр. door-1">
+      </div>
+      <div>
+        <label>zone_id</label>
+        <input type="text" id="new-device-zone-id" value="1">
+      </div>
+    </div>
+    <label>Пин (необязательно)</label>
+    <input type="text" id="new-device-pin" placeholder="напр. GPIO25">
+    <button onclick="addDevice()">Создать устройство</button>
+    <p class="hint">Создаёт отдельный MQTT-девайс (свой external_id) — так же, как завели бы новое устройство на платформе, а не довесок к существующему.</p>
+  </div>`;
+}
+
+function onNewDeviceKindChange() {
+  const kind = document.getElementById('new-device-kind').value;
+  document.getElementById('new-device-sensor-fields').style.display = kind === 'sensor' ? 'block' : 'none';
+  document.getElementById('new-device-actuator-fields').style.display = kind === 'actuator' ? 'block' : 'none';
+}
+
+async function addDevice() {
+  const kind = document.getElementById('new-device-kind').value;
+  const externalId = document.getElementById('new-device-external-id').value.trim();
+  const zoneId = document.getElementById('new-device-zone-id').value.trim();
+  if (!externalId || !zoneId) return;
+
+  const payload = { kind, external_id: externalId, zone_id: zoneId,
+    pin: document.getElementById('new-device-pin').value.trim() };
+  if (kind === 'sensor') {
+    const name = document.getElementById('new-device-signal-name').value.trim();
+    if (!name) return;
+    payload.signal_name = name;
+    payload.discrete = document.getElementById('new-device-discrete').checked;
+  } else {
+    payload.supports_level = document.getElementById('new-device-supports-level').checked;
+  }
+
+  const res = await fetch('/api/devices', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+  if (!res.ok) {
+    alert('Не удалось создать устройство: ' + (await res.text()));
+    return;
+  }
+  document.getElementById('new-device-external-id').value = '';
+  document.getElementById('new-device-signal-name').value = '';
+  document.getElementById('new-device-pin').value = '';
+}
+
+async function removeDevice(slot) {
+  if (!confirm('Удалить это устройство?')) return;
+  await fetch(`/api/devices/${slot}`, { method: 'DELETE' });
+}
+
+function renderSignals(d) {
+  const container = document.getElementById(`${d.slot}-signals`);
+  const readings = d.readings || {};
+  const names = orderedNames(readings);
+  container.innerHTML = names.map((name) => {
+    // Core sensor's own readings (temperature/humidity) are always analog;
+    // an extra sensor device has exactly one reading, flagged by the
+    // server via d.discrete.
+    const discrete = !d.core && d.discrete;
+    return discrete ? discreteRowHTML(d.slot, name, readings[name]) : analogRowHTML(d.slot, name, readings[name]);
+  }).join('');
+  updateBoardText(d.slot, readings);
+}
+
 function updateBoardText(slot, readings) {
   if (slot !== 'sensor') return;
   const [primary, secondary] = orderedNames(readings);
@@ -367,10 +441,10 @@ function updateBoardText(slot, readings) {
 
 // Debounced per-signal auto-publish: a value only "counts" as sent to the
 // platform ~350ms after the user stops moving the slider, so a full drag
-// doesn't flood MQTT with one message per pixel — but it still leaves the
-// server (and thus the SSE truth every client, including reconnects,
-// converges to) in sync within a fraction of a second, not only when a
-// separate "publish" button is remembered/clicked.
+// doesn't flood MQTT with one message per pixel — but the server (and thus
+// the SSE truth every client, including reconnects, converges to) is back
+// in sync within a fraction of a second either way, not only when a
+// separate "publish" button is remembered and clicked.
 const publishTimers = {};
 
 function schedulePublish(slot, name, value) {
@@ -392,38 +466,28 @@ function toggleDiscrete(slot, name) {
   const cur = latest[slot]?.readings?.[name] ?? 0;
   const next = cur ? 0 : 1;
   latest[slot].readings[name] = next;
-  renderSignals(slot, latest[slot].readings);
+  renderSignals(latest[slot]);
   publishOne(slot, name, next); // discrete flips are instant, no debounce needed
 }
 
-function addSignal(slot) {
-  const nameInput = document.getElementById(`${slot}-new-name`);
-  const kindSelect = document.getElementById(`${slot}-new-kind`);
-  const name = nameInput.value.trim();
-  if (!name) return;
-  const isDiscrete = kindSelect.value === 'discrete';
-
-  knownSignals[slot] = knownSignals[slot] || { discrete: new Set() };
-  if (isDiscrete) knownSignals[slot].discrete.add(name);
-
-  if (!latest[slot]) latest[slot] = { readings: {} };
-  latest[slot].readings[name] = 0;
-  renderSignals(slot, latest[slot].readings);
-  nameInput.value = '';
-  publishOne(slot, name, 0); // publish immediately so it survives an SSE reconnect right away
-}
-
 function render(snapshot) {
+  const seenSlots = new Set();
+
   for (const d of snapshot.devices) {
+    seenSlots.add(d.slot);
     const prevPower = latest[d.slot]?.power;
     const prevLevel = latest[d.slot]?.level;
     latest[d.slot] = d;
 
+    if (!cardSlots.has(d.slot)) {
+      insertCard(d);
+    }
+
     document.getElementById(`${d.slot}-external-id`).value = d.external_id;
     document.getElementById(`${d.slot}-zone-id`).value = d.zone_id;
 
     if (d.kind === 'sensor') {
-      renderSignals(d.slot, d.readings || {});
+      renderSignals(d);
     } else {
       const badge = document.getElementById(`${d.slot}-badge`);
       badge.textContent = d.power ? 'включено' : 'выключено';
@@ -441,10 +505,29 @@ function render(snapshot) {
     }
   }
 
+  // Drop cards for devices that no longer exist (removed extras).
+  for (const slot of [...cardSlots]) {
+    if (!seenSlots.has(slot)) {
+      document.getElementById(`${slot}-card`)?.remove();
+      cardSlots.delete(slot);
+      delete latest[slot];
+    }
+  }
+
   document.getElementById('fan-blades').classList.toggle('on', !!latest.fan?.power);
   document.getElementById('bulb-glow').classList.toggle('on', !!latest.light?.power);
   document.getElementById('bulb-body').setAttribute('fill', latest.light?.power ? '#e8b339' : '#233348');
   document.getElementById('pump-ring').classList.toggle('on', !!latest.pump?.power);
+
+  renderExtensionDevices(snapshot.devices.filter((d) => !d.core));
+}
+
+function insertCard(d) {
+  const cardsEl = document.getElementById('cards');
+  const wrapper = document.createElement('div');
+  wrapper.innerHTML = cardHTML(d);
+  cardsEl.appendChild(wrapper.firstElementChild);
+  cardSlots.add(d.slot);
 }
 
 function flashCard(slot) {
@@ -453,6 +536,56 @@ function flashCard(slot) {
   setTimeout(() => card.classList.remove('flash'), 900);
 }
 
+// Draws every non-core device as its own icon hanging off the "EXT" bus
+// below the fixed board — visually distinct (dashed wire) from the four
+// GPIO-wired peripherals, since these aren't on a real fixed pin.
+function renderExtensionDevices(extras) {
+  const g = document.getElementById('extension-devices');
+  const trunk = document.getElementById('ext-trunk');
+
+  if (!extras.length) {
+    g.innerHTML = '';
+    trunk.setAttribute('d', 'M 350,320 L 350,360');
+    return;
+  }
+
+  const busY = 375;
+  const spacing = 110;
+  const totalWidth = spacing * (extras.length - 1);
+  const startX = 350 - totalWidth / 2;
+  trunk.setAttribute('d', `M 350,320 L 350,${busY}`);
+
+  let svg = `<line x1="${startX}" y1="${busY}" x2="${startX + totalWidth}" y2="${busY}" stroke="var(--wire-ext)" stroke-width="2" stroke-dasharray="4 3"/>`;
+
+  extras.forEach((d, i) => {
+    const x = startX + spacing * i;
+    const y = busY + 55;
+    svg += `<line x1="${x}" y1="${busY}" x2="${x}" y2="${y - 26}" stroke="var(--wire-ext)" stroke-width="2" stroke-dasharray="4 3"/>`;
+    if (d.pin) {
+      svg += `<text x="${x + 6}" y="${busY + 14}" font-size="9" fill="var(--wire-ext)">${escapeHTML(d.pin)}</text>`;
+    }
+
+    const title = escapeHTML(deviceTitle(d));
+    const pinPrefix = d.pin ? `${escapeHTML(d.pin)} · ` : '';
+    const sub = `${pinPrefix}${escapeHTML(d.external_id)} · ${d.kind === 'sensor' ? 'input' : 'output'}`;
+
+    if (d.kind === 'sensor') {
+      const name = Object.keys(d.readings || {})[0];
+      const value = name !== undefined ? d.readings[name] : 0;
+      svg += `<circle cx="${x}" cy="${y}" r="24" fill="#233348" stroke="var(--wire-sensor)" stroke-width="2"/>`;
+      svg += `<text x="${x}" y="${y + 5}" text-anchor="middle" font-size="13" fill="#e6edf5" font-weight="700">${escapeHTML(value)}</text>`;
+    } else {
+      const on = !!d.power;
+      svg += `<circle cx="${x}" cy="${y}" r="24" fill="${on ? 'var(--accent-dim)' : '#233348'}" stroke="var(--wire-fan)" stroke-width="2"/>`;
+      svg += `<text x="${x}" y="${y + 4}" text-anchor="middle" font-size="10" fill="${on ? 'var(--accent)' : '#8ea0b8'}" font-weight="700">${on ? 'ON' : 'OFF'}</text>`;
+    }
+    svg += `<text class="peripheral-label" x="${x}" y="${y + 42}">${title}</text>`;
+    svg += `<text class="peripheral-sub" x="${x}" y="${y + 53}">${sub}</text>`;
+  });
+
+  g.innerHTML = svg;
+}
+
 async function saveIdentity(slot) {
   const external_id = document.getElementById(`${slot}-external-id`).value.trim();
   const zone_id = document.getElementById(`${slot}-zone-id`).value.trim();
@@ -471,13 +604,6 @@ async function publishOne(slot, sensorType, value) {
   });
 }
 
-async function publishAll(slot) {
-  const readings = latest[slot]?.readings || {};
-  for (const [name, value] of Object.entries(readings)) {
-    await publishOne(slot, name, value);
-  }
-}
-
 function connectEvents() {
   const es = new EventSource('/api/events');
   const conn = document.getElementById('conn');
@@ -488,6 +614,7 @@ function connectEvents() {
   es.onmessage = (e) => render(JSON.parse(e.data));
 }
 
+document.getElementById('cards').innerHTML = addDeviceCardHTML();
 connectEvents();
 </script>
 </body>