From 30e7da8cf81a9c237971f1ef5432b7bb00e58cf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CNaeel=E2=80=9D?= <tazet@narod.ru>
Date: Sun, 16 Aug 2026 19:11:17 +0400
Subject: [PATCH] feat(landing): hand-drawn pipeline SVG diagram; v0.1.12

---
 Makefile                                    |  2 +-
 internal/service/api/ui/landing.html        | 51 ++++++++++++++-
 internal/service/api/ui/static/pipeline.svg | 71 +++++++++++++++++++++
 3 files changed, 120 insertions(+), 4 deletions(-)
 create mode 100644 internal/service/api/ui/static/pipeline.svg

diff --git a/Makefile b/Makefile
index 33fb9f1..a55878f 100644
--- a/Makefile
+++ b/Makefile
@@ -1,7 +1,7 @@
 # Makefile — монолит iot-service (образ naeel/iot-service).
 # Старые k8s-цели — в legacy/Makefile.old.
 
-VERSION ?= v0.1.9
+VERSION ?= v0.1.12
 IMAGE ?= naeel/iot-service
 LDFLAGS = -X main.version=$(VERSION)
 
diff --git a/internal/service/api/ui/landing.html b/internal/service/api/ui/landing.html
index 46dd76f..cb0d321 100644
--- a/internal/service/api/ui/landing.html
+++ b/internal/service/api/ui/landing.html
@@ -143,6 +143,41 @@ pre code { background: none; border: none; padding: 0; }
   line-height: 1.7;
 }
 .hint-box code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
+/* Схема пайплайна */
+.flow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: stretch;
+  margin: 10px 0 4px;
+}
+.flow-node {
+  border: 1px solid var(--brand-gray);
+  border-radius: 10px;
+  background: #fff;
+  padding: 10px 12px;
+  min-width: 110px;
+  text-align: center;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
+}
+.flow-node .fn-title { font-weight: 600; font-size: 13.5px; }
+.flow-node .fn-sub {
+  font-family: ui-monospace, Menlo, Consolas, monospace;
+  font-size: 11.5px;
+  color: var(--text-muted);
+  margin-top: 3px;
+  word-break: break-all;
+}
+.flow-node.acc { border-color: #bfdbfe; background: #eff6ff; }
+.flow-node.acc .fn-title { color: var(--brand-primary); }
+.flow-arrow {
+  align-self: center;
+  color: var(--text-muted);
+  font-size: 16px;
+  padding: 0 2px;
+}
+.flow-caption { color: var(--text-muted); font-size: 12px; margin-top: 6px; }
+.pipeline { width: 100%; max-width: 760px; display: block; margin: 12px auto 4px; }
 </style>
 </head>
 <body>
@@ -172,10 +207,20 @@ pre code { background: none; border: none; padding: 0; }
     <div class="card-body">
       <p>Устройство (датчик, бойлер, счётчик) отправляет показания по протоколу
       MQTT. Дальше показания проходят по цепочке и попадают в базу данных:</p>
-      <div class="hint-box">
-        устройство → <code>MQTT (wss)</code> → очередь <code>iot-telemetry</code>
-        → <b>PostgreSQL</b> → API / консоль
+      <img class="pipeline" src="/static/pipeline.svg" alt="Схема пайплайна IoT">
+      <div class="flow-caption">
+        Между брокером и базой работают бридж и потребитель (части iot-service):
+        бридж кладёт показания в очередь, потребитель пишет их в базу.
       </div>
+      <p style="color:#374151">
+        Очередь <code>iot-telemetry</code> — внутренний буфер сервиса: она
+        защищает показания от потерь при всплесках и сбоях базы. Пользователю
+        креды очереди НЕ нужны — сервис ходит в неё сам. Если требуется
+        посмотреть сообщения вручную — консоль очереди:
+        <a href="https://sqs.containerk8s.dev.nubes.ru/ui">sqs.containerk8s.dev.nubes.ru/ui</a>
+        (вход по API-токену Nubes; описание — на
+        <a href="https://sqs.containerk8s.dev.nubes.ru/">sqs.containerk8s.dev.nubes.ru</a>).
+      </p>
       <p style="color:#374151">
         У каждого устройства — свои логин и пароль, поэтому чужое устройство не
         сможет писать в ваш топик. Данные разных проектов (namespace) лежат в
diff --git a/internal/service/api/ui/static/pipeline.svg b/internal/service/api/ui/static/pipeline.svg
new file mode 100644
index 0000000..45161dd
--- /dev/null
+++ b/internal/service/api/ui/static/pipeline.svg
@@ -0,0 +1,71 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 300" width="100%" role="img" aria-label="Схема пайплайна IoT">
+  <defs>
+    <style>
+      text { font-family: system-ui, "Segoe UI", Roboto, sans-serif; }
+      .mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
+    </style>
+    <marker id="arr" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
+      <path d="M0,0 L8,3 L0,6 Z" fill="#6b7280"/>
+    </marker>
+  </defs>
+
+  <!-- Подложка «ПЛАТФОРМА» -->
+  <text x="365" y="50" font-size="12" fill="#6b7280">ПЛАТФОРМА</text>
+  <rect x="335" y="60" width="818" height="144" rx="16" fill="none"
+        stroke="#bfdbfe" stroke-width="1.5" stroke-dasharray="6 4"/>
+
+  <!-- Стрелки -->
+  <line x1="211" y1="132" x2="353" y2="132" stroke="#6b7280" stroke-width="2" marker-end="url(#arr)"/>
+  <line x1="551" y1="132" x2="643" y2="132" stroke="#6b7280" stroke-width="2" marker-end="url(#arr)"/>
+  <line x1="841" y1="132" x2="933" y2="132" stroke="#6b7280" stroke-width="2" marker-end="url(#arr)"/>
+  <line x1="1131" y1="132" x2="1223" y2="132" stroke="#6b7280" stroke-width="2" marker-end="url(#arr)"/>
+
+  <!-- Ярлыки над стрелками -->
+  <rect x="232" y="100" width="104" height="22" rx="6" fill="#ffffff" stroke="#d1d5db"/>
+  <text x="284" y="115" font-size="12" fill="#1a1a1a" text-anchor="middle">MQTT over wss</text>
+
+  <rect x="574" y="100" width="50" height="22" rx="6" fill="#ffffff" stroke="#d1d5db"/>
+  <text x="599" y="115" font-size="12" fill="#1a1a1a" text-anchor="middle">бридж</text>
+
+  <rect x="847" y="100" width="84" height="22" rx="6" fill="#ffffff" stroke="#d1d5db"/>
+  <text x="889" y="115" font-size="12" fill="#1a1a1a" text-anchor="middle">потребитель</text>
+
+  <rect x="1157" y="100" width="43" height="22" rx="6" fill="#ffffff" stroke="#d1d5db"/>
+  <text x="1179" y="115" font-size="12" fill="#1a1a1a" text-anchor="middle">REST</text>
+
+  <!-- Подписи под стрелками -->
+  <text x="284" y="160" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">{namespace}/</text>
+  <text x="284" y="176" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">telemetry/{device_id}</text>
+
+  <text x="599" y="164" font-size="11" fill="#6b7280" text-anchor="middle">кладёт показания</text>
+  <text x="889" y="164" font-size="11" fill="#6b7280" text-anchor="middle">пишет в базу</text>
+  <text x="1179" y="164" font-size="11" fill="#6b7280" text-anchor="middle">чтение истории</text>
+
+  <!-- Блок 1: Устройство -->
+  <rect x="41" y="84" width="168" height="96" rx="12" fill="#ffffff" stroke="#d1d5db"/>
+  <text x="125" y="128" font-size="15" font-weight="600" fill="#1a1a1a" text-anchor="middle">Устройство</text>
+  <text x="125" y="152" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">датчик · MQTT-клиент</text>
+
+  <!-- Блок 2: EMQX -->
+  <rect x="359" y="84" width="190" height="96" rx="12" fill="#eff6ff" stroke="#bfdbfe"/>
+  <text x="454" y="128" font-size="15" font-weight="600" fill="#2563eb" text-anchor="middle">EMQX</text>
+  <text x="454" y="152" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">брокер · wss /mqtt</text>
+
+  <!-- Блок 3: Очередь -->
+  <rect x="649" y="84" width="190" height="96" rx="12" fill="#eff6ff" stroke="#bfdbfe"/>
+  <text x="744" y="128" font-size="15" font-weight="600" fill="#2563eb" text-anchor="middle">Очередь</text>
+  <text x="744" y="152" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">iot-telemetry</text>
+
+  <!-- Блок 4: PostgreSQL -->
+  <rect x="939" y="84" width="190" height="96" rx="12" fill="#eff6ff" stroke="#bfdbfe"/>
+  <text x="1034" y="128" font-size="15" font-weight="600" fill="#2563eb" text-anchor="middle">PostgreSQL</text>
+  <text x="1034" y="152" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">база на namespace</text>
+
+  <!-- Блок 5: API / Консоль -->
+  <rect x="1229" y="84" width="170" height="96" rx="12" fill="#ffffff" stroke="#d1d5db"/>
+  <text x="1314" y="128" font-size="15" font-weight="600" fill="#1a1a1a" text-anchor="middle">API / Консоль</text>
+  <text x="1314" y="152" font-size="11" class="mono" fill="#6b7280" text-anchor="middle">чтение истории</text>
+
+  <!-- Подвал -->
+  <text x="720" y="252" font-size="12" fill="#6b7280" text-anchor="middle">бридж и потребитель — части сервиса iot-service</text>
+</svg>