Связи (pixel-aquarium, 10.06): партия 2 (UI-фишки) — поиск, хлебные крошки, бейджи, цветовые кластеры

Всё в лаборатории (вариант 2: реальный путь /network-view не трогаем).

- Поиск + телепорт: строка .fg-search; Enter → graph.findNode(имя) → камера летит к узлу
  (dive в «Вселенной», иначе перецентр).
- Хлебные крошки: .fg-breadcrumb «Иван › Нина › Ада» (движок шлёт onDiveChange(path), API getDivePath);
  клик по корню — полный сброс, по предку — навигация на его уровень.
- Бейдж числа связей: .fg-node-badge (degreeById → updateBadges; у центра — число связей 1-го уровня).
- Цветовые кластеры: мягкая аура узла по типу связи (CSS is-family/friend/business/contact).

Автопроверки расширены до 17 ассертов (добавлены поиск/крошки/бейдж) — прогон 17/17 PASS.
Фикс: TDZ breadcrumbEl (объявлен до createForceGraph, т.к. onDiveChange вызывается при монтировании).
Бамп client.version → 1.2.149.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

shine-UI/styles/network-graph.css

@@ -533,3 +533,109 @@
 .fg-sheet-actions > button {
   flex: 1;
 }
+
+/* === Партия 2: бейдж-счётчик связей, поиск, хлебные крошки, цветовые кластеры ============ */
+
+/* Бейдж числа связей — маленькая пилюля в правом-верхнем углу аватарки */
+.fg-node-badge {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 999px;
+  background: rgba(16, 24, 40, 0.92);
+  border: 1px solid rgba(150, 200, 255, 0.5);
+  color: #d9ecff;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 14px;
+  text-align: center;
+  pointer-events: none;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+}
+.fg-node.is-focus .fg-node-badge {
+  background: rgba(61, 196, 223, 0.95);
+  border-color: rgba(220, 245, 255, 0.8);
+  color: #06131c;
+}
+.fg-node.is-tier2 .fg-node-badge { transform: scale(0.85); }
+
+/* Цветовые кластеры: мягкая аура узла по типу связи (визуально группирует «семью/друзей/бизнес») */
+.fg-node.is-family .node-dot { box-shadow: 0 0 16px rgba(255, 159, 94, 0.20); }
+.fg-node.is-friend .node-dot { box-shadow: 0 0 16px rgba(120, 179, 255, 0.20); }
+.fg-node.is-business .node-dot { box-shadow: 0 0 16px rgba(190, 150, 255, 0.20); }
+.fg-node.is-contact .node-dot { box-shadow: 0 0 16px rgba(170, 190, 220, 0.16); }
+/* сияющие/фокус — свой эффект свечения (см. выше), ауру кластера не навязываем */
+.fg-node.is-shine .node-dot, .fg-node.is-focus .node-dot { box-shadow: none; }
+
+/* Строка поиска (оверлей вверху, под панелью фильтров) */
+.fg-search {
+  position: absolute;
+  top: max(92px, calc(env(safe-area-inset-top) + 88px));
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 12;
+  width: min(280px, 70vw);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 0.5px solid rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
+}
+.fg-search input {
+  flex: 1;
+  border: 0;
+  background: transparent;
+  color: #eaf2ff;
+  font-size: 13px;
+  outline: none;
+}
+.fg-search input::placeholder { color: #7d8aa6; }
+.fg-search .fg-search-ico { color: #9fc0ff; font-size: 13px; }
+
+/* Хлебные крошки навигации (стек погружений: Иван › Нина › Ада) */
+.fg-breadcrumb {
+  position: absolute;
+  top: max(132px, calc(env(safe-area-inset-top) + 128px));
+  left: 0;
+  right: 0;
+  z-index: 12;
+  display: none;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 0 12px;
+  pointer-events: none;
+}
+.fg-breadcrumb.is-open { display: flex; }
+.fg-crumb {
+  pointer-events: auto;
+  border: 0;
+  background: rgba(16, 24, 40, 0.7);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  color: #cfe0ff;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  padding: 5px 10px;
+  border-radius: 999px;
+  cursor: pointer;
+  max-width: 110px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fg-crumb.is-last {
+  background: rgba(125, 215, 255, 0.18);
+  color: #eaf7ff;
+  cursor: default;
+}
+.fg-crumb-sep { color: #5f7196; font-size: 11px; align-self: center; pointer-events: none; }