rewrite 2026-09 and 2027 articles for reader-facing quality

web/public/assets/editorial/2026/frontend-backend-boundary-2026-review-evidence-loop.svg

@@ -1,9 +1,39 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="720" height="610" viewBox="0 0 720 610" role="img" aria-labelledby="title desc">
-  <title id="title">Цикл evidence для synthetic hand-off</title><desc id="desc">Пять шагов соединяют fixed literal, проверку ownership, stop или counterexample, уточнённый literal и ограниченный synthetic hand-off. Красная ветка возвращает domain claim к read model.</desc>
-  <defs><marker id="b" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto"><path d="M0 0L10 5L0 10Z" fill="#1f4b99"/></marker><marker id="r" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto"><path d="M0 0L10 5L0 10Z" fill="#b3263a"/></marker></defs>
-  <rect width="720" height="610" fill="#f8fafc"/><text x="34" y="46" font-family="Arial,sans-serif" font-size="28" font-weight="700" fill="#152238">Synthetic evidence loop</text>
-  <g font-family="Arial,sans-serif" font-size="23" text-anchor="middle"><rect x="50" y="115" width="180" height="74" rx="14" fill="#e8f0fe" stroke="#3566b8" stroke-width="3"/><text x="140" y="160" fill="#173a78">fixed literal</text><rect x="270" y="115" width="180" height="74" rx="14" fill="#eef7e9" stroke="#4d8b44" stroke-width="3"/><text x="360" y="160" fill="#245b2e">ownership check</text><rect x="490" y="115" width="180" height="74" rx="14" fill="#fff3df" stroke="#b67617" stroke-width="3"/><text x="580" y="160" fill="#824c00">named result</text><rect x="490" y="335" width="180" height="74" rx="14" fill="#eaf5f7" stroke="#257184" stroke-width="3"/><text x="580" y="380" fill="#1d5c6a">review hand-off</text><rect x="270" y="335" width="180" height="74" rx="14" fill="#f2edfb" stroke="#7051a8" stroke-width="3"/><text x="360" y="380" fill="#553885">new literal</text></g>
-  <path d="M230 152H270M450 152H490M580 189V335M490 372H450M270 372H140V189" fill="none" stroke="#1f4b99" stroke-width="5" marker-end="url(#b)"/>
-  <path d="M580 189V260H190V190" fill="none" stroke="#b3263a" stroke-width="5" marker-end="url(#r)"/><text x="288" y="246" font-family="Arial,sans-serif" font-size="22" font-weight="700" fill="#8a1f2d">domain claim → stop → read question</text>
-  <text x="34" y="510" font-family="Arial,sans-serif" font-size="21" fill="#526273">Positive output: только review hand-off.</text><text x="34" y="546" font-family="Arial,sans-serif" font-size="21" fill="#526273">productionEffect: not-attempted</text><text x="34" y="582" font-family="Arial,sans-serif" font-size="19" fill="#526273">Нет UI trace, сети, файлов или секретов.</text>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 420" role="img" aria-labelledby="title desc">
+  <title id="title">Диагностика рассинхрона UI и API</title>
+  <desc id="desc">Четыре наблюдения сравниваются последовательно: намерение, запрос, ответ и вход в рендер. Несовпадение ведёт к проверке соответствующей границы.</desc>
+  <rect width="720" height="420" rx="24" fill="#f7f3ea"/>
+  <g font-family="Arial, sans-serif" fill="#202124">
+    <text x="42" y="48" font-size="24" font-weight="700">Сравниваем соседние границы</text>
+    <text x="42" y="76" font-size="16" fill="#5f6368">intent → request → response → render input</text>
+    <g font-size="17" font-weight="700">
+      <circle cx="120" cy="184" r="54" fill="#d7e8ff" stroke="#2b5f9e" stroke-width="3"/>
+      <circle cx="290" cy="184" r="54" fill="#d7e8ff" stroke="#2b5f9e" stroke-width="3"/>
+      <circle cx="460" cy="184" r="54" fill="#d9f1e1" stroke="#2e7d51" stroke-width="3"/>
+      <circle cx="630" cy="184" r="54" fill="#d9f1e1" stroke="#2e7d51" stroke-width="3"/>
+      <text x="120" y="178" text-anchor="middle">intent</text>
+      <text x="120" y="201" text-anchor="middle">action</text>
+      <text x="290" y="178" text-anchor="middle">request</text>
+      <text x="290" y="201" text-anchor="middle">HTTP</text>
+      <text x="460" y="178" text-anchor="middle">response</text>
+      <text x="460" y="201" text-anchor="middle">contract</text>
+      <text x="630" y="178" text-anchor="middle">render</text>
+      <text x="630" y="201" text-anchor="middle">input</text>
+    </g>
+    <g stroke="#2b5f9e" stroke-width="3" fill="none">
+      <path d="M174 184h62m170 0h62m170 0h2"/>
+      <path d="m226 177 10 7-10 7m170-7 10 7-10 7m164-7 10 7-10 7"/>
+    </g>
+    <g font-size="16">
+      <rect x="104" y="292" width="152" height="58" rx="12" fill="#fff" stroke="#b7b7b7"/>
+      <rect x="284" y="292" width="152" height="58" rx="12" fill="#fff" stroke="#b7b7b7"/>
+      <rect x="464" y="292" width="152" height="58" rx="12" fill="#ffe2dc" stroke="#b84b3b" stroke-width="2"/>
+      <text x="180" y="317" text-anchor="middle">mapping формы</text>
+      <text x="180" y="338" text-anchor="middle">и безопасный input</text>
+      <text x="360" y="317" text-anchor="middle">route, status,</text>
+      <text x="360" y="338" text-anchor="middle">Content-Type</text>
+      <text x="540" y="317" text-anchor="middle">stale state,</text>
+      <text x="540" y="338" text-anchor="middle">selector или race</text>
+    </g>
+    <text x="42" y="392" font-size="15" fill="#5f6368">Снимок одного слоя не доказывает причину расхождения в другом.</text>
+  </g>
 </svg>