diff --git a/.env.example b/.env.example
index d1afa6d..28cc5bb 100644
--- a/.env.example
+++ b/.env.example
@@ -1,2 +1,3 @@
-VITE_CLOUD_API_URL=http://localhost:3100
+VITE_CLOUD_API_URL=http://localhost:3101
+VITE_DIAGRAM_API_URL=http://localhost:3002
 VITE_DEFAULT_EDGE=edge5
diff --git a/.env.local.example b/.env.local.example
index 004f8e6..f143beb 100644
--- a/.env.local.example
+++ b/.env.local.example
@@ -1,9 +1,10 @@
-VITE_CLOUD_API_URL=http://localhost:3100
+VITE_CLOUD_API_URL=http://localhost:3101
+VITE_DIAGRAM_API_URL=http://localhost:3002
 
 # Если эти переменные не заданы, greact.drill.ui работает без SSO для локальной разработки.
 VITE_KEYCLOAK_URL=https://sso.greact.ru
 VITE_KEYCLOAK_REALM=toir
 VITE_KEYCLOAK_CLIENT_ID=drill-ui-frontend
 
-# Origin встроенного TOиР light. По умолчанию используется https://toir-light.greact.ru.
+# Origin встроенного ТОиР light. По умолчанию используется https://toir-light.greact.ru.
 VITE_TOIR_LIGHT_ORIGIN=https://toir-light.greact.ru
diff --git a/Dockerfile b/Dockerfile
index 5ec076c..64dcbad 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,7 +7,7 @@ FROM node:22-alpine AS build
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-ARG VITE_CLOUD_API_URL=http://localhost:3100
+ARG VITE_CLOUD_API_URL=http://localhost:3101
 ARG VITE_DEFAULT_EDGE=edge5
 ENV VITE_CLOUD_API_URL=$VITE_CLOUD_API_URL
 ENV VITE_DEFAULT_EDGE=$VITE_DEFAULT_EDGE
diff --git a/docker-compose.yml b/docker-compose.yml
index f232542..9a1e3ce 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -3,11 +3,11 @@ services:
     build:
       context: .
       args:
-        VITE_CLOUD_API_URL: ${VITE_CLOUD_API_URL:-http://localhost:3100}
+        VITE_CLOUD_API_URL: ${VITE_CLOUD_API_URL:-http://localhost:3101}
         VITE_DEFAULT_EDGE: ${VITE_DEFAULT_EDGE:-edge5}
     expose:
       - "80"
 
 networks:
   external:
-    true
\ No newline at end of file
+    true
diff --git a/src/App.tsx b/src/App.tsx
index bb6950a..6529772 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -25,6 +25,8 @@ export default function App() {
         <Route path="/edges/:edgeId/archive" element={<EdgeDetailPage view="archive" />} />
         <Route path="/edges/:edgeId/indicators" element={<EdgeDetailPage view="indicators" />} />
         <Route path="/edges/:edgeId/equipment" element={<EdgeDetailPage view="equipment" />} />
+        {/* Электросхемы временно скрыты до готовности опубликованных схем и diagram-service. */}
+        {/* <Route path="/edges/:edgeId/electrical" element={<EdgeDetailPage view="electrical" />} /> */}
         <Route path="*" element={<Navigate to="/edges" replace />} />
       </Routes>
     </BrowserRouter>
diff --git a/src/api/cloud.ts b/src/api/cloud.ts
index c4ab647..bf2c42b 100644
--- a/src/api/cloud.ts
+++ b/src/api/cloud.ts
@@ -1,4 +1,4 @@
-const API_URL = import.meta.env.VITE_CLOUD_API_URL ?? 'http://localhost:3100';
+const API_URL = import.meta.env.VITE_CLOUD_API_URL ?? 'http://localhost:3101';
 
 export type HealthResponse = {
   status: 'ok';
@@ -13,8 +13,16 @@ export type CurrentItem = {
   edge: string;
   tag: string;
   value: number;
-  time: string;
+  createdAt: string;
   updatedAt: string;
+  time: string;
+  name: string | null;
+  tagGroup: string | null;
+  min: number | null;
+  max: number | null;
+  comment: string | null;
+  unitOfMeasurement: string | null;
+  precision: number | null;
 };
 
 export type CurrentResponse = {
@@ -27,27 +35,41 @@ export type CurrentEvent = CurrentResponse;
 export type EdgeItem = {
   id: string;
   name: string;
+  parentId: string | null;
+  tagIds: string[];
   tagCount: number;
   currentTagCount: number;
   liveTagCount: number;
   lastDataAt: string | null;
-  createdAt: string;
-  updatedAt: string;
 };
 
 export type EdgeResponse = {
   items: EdgeItem[];
 };
 
+export type TagItem = {
+  id: string;
+  name: string;
+  tagGroup: string | null;
+  min: number;
+  max: number;
+  comment: string;
+  unitOfMeasurement: string;
+  edgeIds: string[];
+  precision: number | null;
+};
+
+export type TagResponse = {
+  items: TagItem[];
+};
+
 export type HistoryPoint = {
   t: number;
   v: number;
-  first?: number;
-  min?: number;
-  max?: number;
-  avg?: number;
-  last?: number;
-  count?: number;
+  min: number;
+  avg: number;
+  max: number;
+  count: number;
 };
 
 export type HistorySeries = {
@@ -64,25 +86,9 @@ export type HistoryResponse = {
   from?: string;
   to?: string;
   resolutionSeconds?: number | null;
-  valueMode?: 'raw' | 'avg' | 'last' | 'first' | 'min' | 'max';
 };
 
-export type TagTranslationItem = {
-  edge: string;
-  tag: string;
-  locale: string;
-  displayName: string;
-  source: string | null;
-  updatedAt: string;
-};
-
-export type TagTranslationResponse = {
-  edge: string;
-  locale: string;
-  items: TagTranslationItem[];
-};
-
-/** Выполняет типизированный GET-запрос к cloud-v2 и централизованно обрабатывает ошибки HTTP. */
+/** Выполняет типизированный GET-запрос к cloud-v3 и централизованно обрабатывает HTTP-ошибки. */
 async function request<T>(path: string, params?: Record<string, string | number | undefined>): Promise<T> {
   const url = new URL(path, API_URL);
   Object.entries(params ?? {}).forEach(([key, value]) => {
@@ -100,17 +106,22 @@ async function request<T>(path: string, params?: Record<string, string | number
   return response.json() as Promise<T>;
 }
 
-/** Запрашивает состояние cloud-v2 и подключенной базы данных. */
+/** Запрашивает состояние cloud-v3 и подключенной базы данных. */
 export function getHealth(): Promise<HealthResponse> {
   return request<HealthResponse>('/health');
 }
 
-/** Возвращает список edge-установок, доступных в cloud-v2. */
+/** Возвращает список edge-установок, доступных в cloud-v3. */
 export function getEdges(): Promise<EdgeResponse> {
   return request<EdgeResponse>('/edge');
 }
 
-/** Загружает текущие значения показателей для выбранного edge. */
+/** Загружает справочник тегов, используя tag.name как отображаемое имя. */
+export function getTags(params: { edge?: string; search?: string } = {}): Promise<TagResponse> {
+  return request<TagResponse>('/tag', params);
+}
+
+/** Загружает текущие значения показателей для выбранного edge вместе с метаданными тегов. */
 export function getCurrent(edge: string, tags?: string[]): Promise<CurrentResponse> {
   return request<CurrentResponse>('/current', {
     edge,
@@ -118,7 +129,7 @@ export function getCurrent(edge: string, tags?: string[]): Promise<CurrentRespon
   });
 }
 
-/** Формирует URL SSE-потока для live-обновлений текущих значений. */
+/** Формирует URL SSE-потока текущих значений для выбранного edge. */
 export function getCurrentEventsUrl(edge: string, tags?: string[]): string {
   const url = new URL('/current/events', API_URL);
   url.searchParams.set('edge', edge);
@@ -130,14 +141,13 @@ export function getCurrentEventsUrl(edge: string, tags?: string[]): string {
   return url.toString();
 }
 
-/** Запрашивает исторические ряды для графика с учетом диапазона, тегов и режима агрегации. */
+/** Запрашивает исторические ряды с avg-линией и min/max-диапазоном для графика. */
 export function getHistory(params: {
   edge: string;
   tags?: string[];
   from?: string;
   to?: string;
   targetPoints?: number;
-  valueMode?: 'avg' | 'last' | 'first' | 'min' | 'max';
 }): Promise<HistoryResponse> {
   return request<HistoryResponse>('/history', {
     edge: params.edge,
@@ -145,19 +155,5 @@ export function getHistory(params: {
     from: params.from,
     to: params.to,
     targetPoints: params.targetPoints,
-    valueMode: params.valueMode,
-  });
-}
-
-/** Загружает русскоязычный справочник названий тегов для выбранного edge. */
-export function getTagTranslations(params: {
-  edge: string;
-  locale?: string;
-  tags?: string[];
-}): Promise<TagTranslationResponse> {
-  return request<TagTranslationResponse>('/tag-translations', {
-    edge: params.edge,
-    locale: params.locale ?? 'ru',
-    tags: params.tags?.join(','),
   });
 }
diff --git a/src/api/diagram.ts b/src/api/diagram.ts
new file mode 100644
index 0000000..67e9260
--- /dev/null
+++ b/src/api/diagram.ts
@@ -0,0 +1,124 @@
+import { getAccessToken } from '../auth/keycloak';
+
+const DIAGRAM_API_URL = import.meta.env.VITE_DIAGRAM_API_URL ?? 'http://localhost:3002';
+
+export type DiagramPoint = {
+  x: number;
+  y: number;
+};
+
+export type DiagramSize = {
+  width: number;
+  height: number;
+};
+
+export type DiagramBindingConfig = {
+  stateTagId?: string;
+  alarmTagId?: string;
+  edgeId?: string;
+  sseEdgeId?: string;
+  sseUrl?: string;
+};
+
+export type DiagramNode =
+  | {
+      id: string;
+      kind: 'tagWidget';
+      tagId: string;
+      edgeId: string;
+      widgetType: string;
+      position: DiagramPoint;
+      size?: DiagramSize;
+      zIndex?: number;
+      label?: string;
+      displayType?: 'widget' | 'compact' | 'card';
+      style?: Record<string, unknown>;
+    }
+  | {
+      id: string;
+      kind: 'decoration';
+      decorationType: string;
+      position: DiagramPoint;
+      size: DiagramSize;
+      rotation?: number;
+      zIndex?: number;
+      data?: Record<string, unknown>;
+      style?: Record<string, unknown>;
+      bindings?: DiagramBindingConfig;
+    };
+
+export type DiagramEdge = {
+  id: string;
+  sourceNodeId: string;
+  targetNodeId: string;
+  sourceSide?: 'left' | 'right' | 'top' | 'bottom';
+  targetSide?: 'left' | 'right' | 'top' | 'bottom';
+  kind: 'wire' | 'power' | 'signal' | 'alert';
+  label?: string;
+  animated?: boolean;
+  waypoints?: DiagramPoint[];
+};
+
+export type DiagramDocument = {
+  schemaVersion: number;
+  pageKey: string;
+  ownerEdgeId: string;
+  title?: string;
+  viewport?: { x: number; y: number; zoom: number } | null;
+  background?: {
+    url?: string;
+    opacity?: number;
+    fit?: 'contain' | 'cover' | 'stretch';
+  };
+  nodes: DiagramNode[];
+  edges: DiagramEdge[];
+};
+
+export type DiagramPageSummary = {
+  pageKey: string;
+  ownerEdgeId: string;
+  title?: string | null;
+  schemaVersion: number;
+  revision: number;
+  status: 'draft' | 'published' | 'archived';
+  publishedRevision?: number;
+  publishedAt?: string;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type DiagramPageResponse = DiagramPageSummary & {
+  document: DiagramDocument;
+};
+
+/** Выполняет запрос к diagram-service и пробрасывает Bearer-токен, если UI работает с SSO. */
+async function request<T>(path: string, params?: Record<string, string | undefined>): Promise<T> {
+  const url = new URL(path, DIAGRAM_API_URL);
+  Object.entries(params ?? {}).forEach(([key, value]) => {
+    if (value) {
+      url.searchParams.set(key, value);
+    }
+  });
+
+  const token = await getAccessToken();
+  const response = await fetch(url, {
+    headers: token ? { Authorization: `Bearer ${token}` } : undefined,
+  });
+
+  if (!response.ok) {
+    const message = await response.text();
+    throw new Error(message || `${response.status} ${response.statusText}`);
+  }
+
+  return response.json() as Promise<T>;
+}
+
+/** Возвращает список страниц схем, опубликованность определяется по publishedRevision. */
+export function listDiagramPages(ownerEdgeId?: string): Promise<DiagramPageSummary[]> {
+  return request<DiagramPageSummary[]>('/diagram/pages', { ownerEdgeId });
+}
+
+/** Загружает опубликованную версию страницы схемы. */
+export function getPublishedDiagramPage(pageKey: string): Promise<DiagramPageResponse> {
+  return request<DiagramPageResponse>(`/diagram/pages/${encodeURIComponent(pageKey)}/published`);
+}
diff --git a/src/components/HistoryChart.tsx b/src/components/HistoryChart.tsx
index 2571709..13ad13a 100644
--- a/src/components/HistoryChart.tsx
+++ b/src/components/HistoryChart.tsx
@@ -1,4 +1,4 @@
-import { LineChart } from 'echarts/charts';
+import { LineChart, ScatterChart } from 'echarts/charts';
 import {
   DataZoomComponent,
   GridComponent,
@@ -8,9 +8,18 @@ import {
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import ReactEChartsCore from 'echarts-for-react/esm/core.js';
+import type { EChartsOption, SeriesOption } from 'echarts';
 import type { HistoryResponse } from '../api/cloud';
 
-echarts.use([LineChart, GridComponent, LegendComponent, TooltipComponent, DataZoomComponent, CanvasRenderer]);
+echarts.use([
+  LineChart,
+  ScatterChart,
+  GridComponent,
+  LegendComponent,
+  TooltipComponent,
+  DataZoomComponent,
+  CanvasRenderer,
+]);
 
 const SERIES_COLORS = [
   '#5B8FF9',
@@ -31,6 +40,14 @@ type HistoryChartProps = {
   tagLabels?: Record<string, string>;
 };
 
+type AvgPointValue = [time: number, value: number, min: number, avg: number, max: number, count: number];
+
+type TooltipParam = {
+  marker?: string;
+  seriesName?: string;
+  value?: unknown;
+};
+
 /** Подбирает подпись оси времени под текущий масштаб графика. */
 function formatAxisDate(value: number, spanMs?: number): string {
   const date = new Date(value);
@@ -46,13 +63,155 @@ function formatAxisDate(value: number, spanMs?: number): string {
   return new Intl.DateTimeFormat('ru-RU', { day: '2-digit', month: '2-digit' }).format(date);
 }
 
-/** Рисует исторические ряды показателей через ECharts с динамической временной шкалой. */
+/** Форматирует числовое значение для tooltip без лишнего шума в дробной части. */
+function formatChartValue(value: number): string {
+  return new Intl.NumberFormat('ru-RU', {
+    maximumFractionDigits: Math.abs(value) >= 100 ? 2 : 3,
+  }).format(value);
+}
+
+/** Проверяет, что tooltip получил основную точку avg-линии, а не вспомогательную серию. */
+function isAvgPointValue(value: unknown): value is AvgPointValue {
+  return Array.isArray(value) && value.length >= 6 && value.every((item) => typeof item === 'number');
+}
+
+/** Собирает tooltip с min/avg/max для всех серий на выбранной отметке времени. */
+function formatTooltip(params: unknown): string {
+  const items = (Array.isArray(params) ? params : [params]).filter(
+    (item): item is TooltipParam => typeof item === 'object' && item !== null,
+  );
+  const avgItems = items.filter((item) => isAvgPointValue(item.value));
+  const firstValue = avgItems[0]?.value as AvgPointValue | undefined;
+
+  if (!firstValue) {
+    return '';
+  }
+
+  const header = new Intl.DateTimeFormat('ru-RU', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  }).format(new Date(firstValue[0]));
+
+  const rows = avgItems.map((item) => {
+    const value = item.value as AvgPointValue;
+    return [
+      '<div class="chart-tooltip-row">',
+      `<span>${item.marker ?? ''}${item.seriesName ?? ''}</span>`,
+      '<strong>',
+      `min ${formatChartValue(value[2])} · avg ${formatChartValue(value[3])} · max ${formatChartValue(value[4])}`,
+      value[5] > 1 ? ` · ${value[5]} точек` : '',
+      '</strong>',
+      '</div>',
+    ].join('');
+  });
+
+  return [`<div class="chart-tooltip"><div class="chart-tooltip-title">${header}</div>`, ...rows, '</div>'].join('');
+}
+
+/** Создает avg-линию, вертикальные min/max отрезки и точки экстремумов для одной серии. */
+function createSeriesOptions(
+  series: NonNullable<HistoryResponse['series']>[number],
+  index: number,
+  label: string,
+): SeriesOption[] {
+  const color = SERIES_COLORS[index % SERIES_COLORS.length];
+  const avgData: AvgPointValue[] = series.points.map((point) => [
+    point.t,
+    point.v,
+    point.min,
+    point.avg,
+    point.max,
+    point.count,
+  ]);
+  const spreadData = series.points.flatMap((point) => [
+    [point.t, point.min],
+    [point.t, point.max],
+    [point.t, null],
+  ]);
+
+  return [
+    {
+      name: `${label} min/max`,
+      type: 'line',
+      data: spreadData,
+      showSymbol: false,
+      connectNulls: false,
+      silent: true,
+      tooltip: { show: false },
+      legendHoverLink: false,
+      lineStyle: {
+        width: 1,
+        opacity: 0.42,
+        color,
+      },
+      emphasis: {
+        disabled: true,
+      },
+      z: 1,
+    },
+    {
+      name: `${label} min`,
+      type: 'scatter',
+      data: series.points.map((point) => [point.t, point.min]),
+      symbolSize: 4,
+      silent: true,
+      tooltip: { show: false },
+      itemStyle: {
+        color,
+        opacity: 0.72,
+      },
+      emphasis: {
+        disabled: true,
+      },
+      z: 2,
+    },
+    {
+      name: `${label} max`,
+      type: 'scatter',
+      data: series.points.map((point) => [point.t, point.max]),
+      symbolSize: 4,
+      silent: true,
+      tooltip: { show: false },
+      itemStyle: {
+        color,
+        opacity: 0.72,
+      },
+      emphasis: {
+        disabled: true,
+      },
+      z: 2,
+    },
+    {
+      name: label,
+      type: 'line',
+      showSymbol: false,
+      smooth: false,
+      sampling: 'lttb',
+      data: avgData,
+      lineStyle: {
+        width: 1.8,
+        color,
+      },
+      emphasis: {
+        focus: 'series',
+      },
+      z: 3,
+    },
+  ];
+}
+
+/** Рисует исторические ряды: avg соединяется линией, min/max показываются точками и вертикальным диапазоном. */
 export function HistoryChart({ data, loading, from, to, tagLabels = {} }: HistoryChartProps) {
   const xMin = from ? new Date(from).getTime() : undefined;
   const xMax = to ? new Date(to).getTime() : undefined;
   const xSpan = Number.isFinite(xMin) && Number.isFinite(xMax) ? Number(xMax) - Number(xMin) : undefined;
+  const legendData = data?.series.map((series) => tagLabels[series.tag] ?? series.tag) ?? [];
 
-  const option = {
+  const option: EChartsOption = {
     color: SERIES_COLORS,
     animation: false,
     backgroundColor: 'transparent',
@@ -65,11 +224,12 @@ export function HistoryChart({ data, loading, from, to, tagLabels = {} }: Histor
       backgroundColor: 'rgba(10, 13, 18, 0.96)',
       borderColor: 'rgba(212, 165, 116, 0.32)',
       textStyle: { color: '#f8fafc' },
-      valueFormatter: (value: unknown) => (typeof value === 'number' ? value.toFixed(3) : String(value)),
+      formatter: formatTooltip,
     },
     legend: {
       type: 'scroll',
       top: 0,
+      data: legendData,
       textStyle: { color: '#cbd5e1' },
     },
     grid: {
@@ -115,21 +275,9 @@ export function HistoryChart({ data, loading, from, to, tagLabels = {} }: Histor
       },
     ],
     series:
-      data?.series.map((series, index) => ({
-        name: tagLabels[series.tag] ?? series.tag,
-        type: 'line',
-        showSymbol: false,
-        smooth: false,
-        sampling: 'lttb',
-        lineStyle: {
-          width: 1.8,
-          color: SERIES_COLORS[index % SERIES_COLORS.length],
-        },
-        emphasis: {
-          focus: 'series',
-        },
-        data: series.points.map((point) => [point.t, point.v]),
-      })) ?? [],
+      data?.series.flatMap((series, index) =>
+        createSeriesOptions(series, index, tagLabels[series.tag] ?? series.tag),
+      ) ?? [],
   };
 
   if (loading) {
diff --git a/src/pages/EdgeDetailPage.tsx b/src/pages/EdgeDetailPage.tsx
index e2625ac..bfd1178 100644
--- a/src/pages/EdgeDetailPage.tsx
+++ b/src/pages/EdgeDetailPage.tsx
@@ -16,15 +16,8 @@ import {
   Wrench,
 } from 'lucide-react';
 import { useNavigate, useParams } from 'react-router-dom';
-import {
-  CurrentEvent,
-  CurrentItem,
-  CurrentResponse,
-  getCurrent,
-  getCurrentEventsUrl,
-  getHistory,
-  getTagTranslations,
-} from '../api/cloud';
+import type { CurrentEvent, CurrentItem, CurrentResponse, HistoryResponse } from '../api/cloud';
+import { getCurrent, getCurrentEventsUrl, getHistory } from '../api/cloud';
 import { useAuth } from '../auth/authContext';
 import { HistoryChart } from '../components/HistoryChart';
 import { MetricCard } from '../components/MetricCard';
@@ -49,8 +42,13 @@ type EdgeDetailPageProps = {
   view: DetailView;
 };
 
+type DateRangeState = {
+  from: string;
+  to: string;
+};
+
 /** Создает диапазон истории от текущего времени на заданное количество часов назад. */
-function createRange(hours: number) {
+function createRange(hours: number): DateRangeState {
   const to = new Date();
   const from = new Date(to.getTime() - hours * 60 * 60 * 1000);
   return {
@@ -59,7 +57,12 @@ function createRange(hours: number) {
   };
 }
 
-/** Собирает общий layout edge-раздела: меню, live-данные, архив, показатели и iframe оборудования. */
+/** Возвращает русское имя тега из tag.name, если оно пришло из cloud-v3. */
+function getItemLabel(item: CurrentItem): string {
+  return item.name?.trim() || item.tag;
+}
+
+/** Собирает общий layout edge-раздела: меню, текущие данные, архив, показатели и iframe оборудования. */
 export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
@@ -70,7 +73,6 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
   const [search, setSearch] = useState('');
   const [range, setRange] = useState(() => createRange(24));
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
-  const [valueMode, setValueMode] = useState<'avg' | 'last' | 'min' | 'max'>('avg');
 
   const edgePath = `/edges/${encodeURIComponent(edgeId)}`;
 
@@ -81,13 +83,6 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
     refetchInterval: currentEventsConnected ? false : 1_000,
   });
 
-  const tagTranslations = useQuery({
-    queryKey: ['tag-translations', edgeId, 'ru'],
-    queryFn: () => getTagTranslations({ edge: edgeId, locale: 'ru' }),
-    enabled: Boolean(edgeId),
-    staleTime: 10 * 60 * 1000,
-  });
-
   useEffect(() => {
     if (!edgeId || typeof EventSource === 'undefined') {
       setCurrentEventsConnected(false);
@@ -100,16 +95,7 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
     eventSource.onerror = () => setCurrentEventsConnected(false);
     eventSource.onmessage = (message) => {
       const event = JSON.parse(message.data) as CurrentEvent;
-
-      queryClient.setQueryData<CurrentResponse>(['current', edgeId], (previous) => {
-        const byTag = new Map((previous?.items ?? []).map((item) => [item.tag, item]));
-        event.items.forEach((item) => byTag.set(item.tag, item));
-
-        return {
-          edge: event.edge,
-          items: Array.from(byTag.values()).sort((left, right) => left.tag.localeCompare(right.tag)),
-        };
-      });
+      queryClient.setQueryData<CurrentResponse>(['current', edgeId], event);
     };
 
     return () => {
@@ -119,8 +105,8 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
   }, [edgeId, queryClient]);
 
   const tagLabels = useMemo(() => {
-    return Object.fromEntries((tagTranslations.data?.items ?? []).map((item) => [item.tag, item.displayName]));
-  }, [tagTranslations.data?.items]);
+    return Object.fromEntries((current.data?.items ?? []).map((item) => [item.tag, getItemLabel(item)]));
+  }, [current.data?.items]);
 
   const getTagLabel = (tag: string) => tagLabels[tag] ?? tag;
 
@@ -129,9 +115,21 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
     const items = current.data?.items ?? [];
 
     return query
-      ? items.filter((item) => `${item.tag} ${tagLabels[item.tag] ?? ''}`.toLowerCase().includes(query))
+      ? items.filter((item) =>
+          [
+            item.tag,
+            item.name,
+            item.comment,
+            item.tagGroup,
+            item.unitOfMeasurement,
+          ]
+            .filter(Boolean)
+            .join(' ')
+            .toLowerCase()
+            .includes(query),
+        )
       : items;
-  }, [current.data?.items, search, tagLabels]);
+  }, [current.data?.items, search]);
 
   const latestUpdatedAt = useMemo(() => {
     const latest = (current.data?.items ?? []).reduce<number | null>((max, item) => {
@@ -142,13 +140,14 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
     return latest === null ? undefined : new Date(latest);
   }, [current.data?.items]);
 
-  const liveCount = current.data?.items.filter((item) => {
-    const ageSeconds = (Date.now() - new Date(item.time).getTime()) / 1000;
-    return ageSeconds <= 30;
-  }).length ?? 0;
+  const liveCount =
+    current.data?.items.filter((item) => {
+      const ageSeconds = (Date.now() - new Date(item.time).getTime()) / 1000;
+      return ageSeconds <= 30;
+    }).length ?? 0;
 
   const history = useQuery({
-    queryKey: ['history', edgeId, selectedTags, range.from, range.to, valueMode],
+    queryKey: ['history', edgeId, selectedTags, range.from, range.to],
     queryFn: () =>
       getHistory({
         edge: edgeId,
@@ -156,7 +155,6 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
         from: toIsoFromInput(range.from),
         to: toIsoFromInput(range.to),
         targetPoints: 1600,
-        valueMode,
       }),
     enabled: Boolean(edgeId && selectedTags.length),
     refetchInterval: 5_000,
@@ -238,6 +236,15 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
             <Wrench size={18} />
             <span className="nav-label">Оборудование</span>
           </button>
+          {/* Электросхемы временно скрыты до готовности опубликованных схем и diagram-service. */}
+          {/* <button
+            className={`nav-item nav-item--button ${view === 'electrical' ? 'nav-item--active' : ''}`}
+            type="button"
+            onClick={() => navigate(`${edgePath}/electrical`)}
+          >
+            <CircuitBoard size={18} />
+            <span className="nav-label">Электросхемы</span>
+          </button> */}
         </nav>
       </aside>
 
@@ -246,6 +253,9 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
           <div>
             <span className="page-kicker">Операторская панель</span>
             <h1>Буровая установка {edgeId}</h1>
+            <span className={`current-transport current-transport--${currentEventsConnected ? 'sse' : 'polling'}`}>
+              {currentEventsConnected ? 'SSE live' : 'polling'}
+            </span>
           </div>
           <div className="topbar-actions">
             <button type="button" className="ghost-button" onClick={() => navigate('/edges')}>
@@ -258,7 +268,7 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
             {auth.enabled ? (
               <button type="button" className="ghost-button" onClick={() => void auth.logout()}>
                 <LogOut size={17} />
-                Разлогиниться
+                Выйти
               </button>
             ) : null}
           </div>
@@ -285,12 +295,9 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
             history={history.data}
             historyLoading={history.isPending && selectedTags.length > 0}
             historySource={history.data?.source}
-            resolutionSeconds={history.data?.resolutionSeconds}
             range={range}
-            valueMode={valueMode}
             onSearchChange={setSearch}
             onRangeChange={setRange}
-            onValueModeChange={setValueMode}
             onToggleTag={toggleTag}
             onSelectFirstTags={selectFirstTags}
             onSelectVisibleTags={selectVisibleTags}
@@ -315,6 +322,9 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
         ) : null}
 
         {view === 'equipment' ? <EquipmentView /> : null}
+
+        {/* Электросхемы временно скрыты до готовности опубликованных схем и diagram-service. */}
+        {/* {view === 'electrical' ? <ElectricalSchematicsPage edgeId={edgeId} /> : null} */}
       </section>
     </main>
   );
@@ -357,7 +367,7 @@ function OverviewView({
         </div>
         <div className="summary-card">
           <span>Последнее обновление</span>
-          <strong>{latestUpdatedAt ? formatDateTime(latestUpdatedAt) : '—'}</strong>
+          <strong>{latestUpdatedAt ? formatDateTime(latestUpdatedAt) : '-'}</strong>
         </div>
       </div>
 
@@ -379,6 +389,11 @@ function OverviewView({
             <Wrench size={18} />
             Состояние оборудования
           </button>
+          {/* Электросхемы временно скрыты до готовности опубликованных схем и diagram-service. */}
+          {/* <button type="button" onClick={onOpenElectrical}>
+            <CircuitBoard size={18} />
+            Электросхемы
+          </button> */}
           <button type="button">
             <CalendarClock size={18} />
             Техническое обслуживание
@@ -389,7 +404,7 @@ function OverviewView({
   );
 }
 
-/** Управляет выбором тегов, диапазона и режима агрегации для исторического графика. */
+/** Управляет выбором тегов и диапазона для исторического графика cloud-v3. */
 function ArchiveView({
   items,
   search,
@@ -397,12 +412,9 @@ function ArchiveView({
   history,
   historyLoading,
   historySource,
-  resolutionSeconds,
   range,
-  valueMode,
   onSearchChange,
   onRangeChange,
-  onValueModeChange,
   onToggleTag,
   onSelectFirstTags,
   onSelectVisibleTags,
@@ -411,18 +423,15 @@ function ArchiveView({
   getTagLabel,
   tagLabels,
 }: {
-  items: Array<{ tag: string; value: number; time: string }>;
+  items: CurrentItem[];
   search: string;
   selectedTags: string[];
-  history: Parameters<typeof HistoryChart>[0]['data'];
+  history?: HistoryResponse;
   historyLoading: boolean;
   historySource?: string;
-  resolutionSeconds?: number | null;
-  range: { from: string; to: string };
-  valueMode: 'avg' | 'last' | 'min' | 'max';
+  range: DateRangeState;
   onSearchChange: (value: string) => void;
-  onRangeChange: (value: { from: string; to: string }) => void;
-  onValueModeChange: (value: 'avg' | 'last' | 'min' | 'max') => void;
+  onRangeChange: (value: DateRangeState) => void;
   onToggleTag: (tag: string) => void;
   onSelectFirstTags: () => void;
   onSelectVisibleTags: () => void;
@@ -447,8 +456,7 @@ function ArchiveView({
         </div>
         <div className="source-chip">
           <DatabaseZap size={16} />
-          {historySource ?? 'source'}
-          {resolutionSeconds ? ` · ${resolutionSeconds}s` : ''}
+          cloud-v3 · {historySource ?? 'ожидание'}
         </div>
       </div>
 
@@ -497,6 +505,7 @@ function ArchiveView({
             <div className="tag-select-list">
               {items.map((item) => {
                 const selected = selectedTags.includes(item.tag);
+                const label = getTagLabel(item.tag);
                 return (
                   <button
                     key={item.tag}
@@ -506,10 +515,10 @@ function ArchiveView({
                     onClick={() => onToggleTag(item.tag)}
                   >
                     <span className="tag-select-item__name">
-                      <span>{getTagLabel(item.tag)}</span>
-                      {getTagLabel(item.tag) !== item.tag ? <small>{item.tag}</small> : null}
+                      <span>{label}</span>
+                      {label !== item.tag ? <small>{item.tag}</small> : null}
                     </span>
-                    <strong>{item.value.toLocaleString('ru-RU', { maximumFractionDigits: 3 })}</strong>
+                    <strong>{item.value.toLocaleString('ru-RU', { maximumFractionDigits: item.precision ?? 3 })}</strong>
                   </button>
                 );
               })}
@@ -543,15 +552,6 @@ function ArchiveView({
               onChange={(event) => onRangeChange({ ...range, to: event.target.value })}
             />
           </label>
-          <label>
-            Режим
-            <select value={valueMode} onChange={(event) => onValueModeChange(event.target.value as typeof valueMode)}>
-              <option value="avg">avg</option>
-              <option value="last">last</option>
-              <option value="min">min</option>
-              <option value="max">max</option>
-            </select>
-          </label>
         </div>
 
         {selectedTags.length ? (
@@ -570,7 +570,7 @@ function ArchiveView({
   );
 }
 
-/** Встраивает страницу активного оборудования из TOиР light почти на всю рабочую область. */
+/** Встраивает страницу активного оборудования из ТОиР light почти на всю рабочую область. */
 function EquipmentView() {
   const [iframeLoaded, setIframeLoaded] = useState(false);
 
diff --git a/src/pages/EdgesDashboard.tsx b/src/pages/EdgesDashboard.tsx
index 9ba953a..89e2759 100644
--- a/src/pages/EdgesDashboard.tsx
+++ b/src/pages/EdgesDashboard.tsx
@@ -33,7 +33,7 @@ function getEdgeTitle(edge: EdgeItem): string {
   return edge.id;
 }
 
-/** Отображает стартовый dashboard со списком edge-установок и общей статистикой. */
+/** Отображает стартовый dashboard со списком edge-установок и общей статистикой cloud-v3. */
 export function EdgesDashboard({ onOpenEdge, onOpenEquipment }: EdgesDashboardProps) {
   const [search, setSearch] = useState('');
   const auth = useAuth();
@@ -54,19 +54,26 @@ export function EdgesDashboard({ onOpenEdge, onOpenEquipment }: EdgesDashboardPr
     return items.filter((edge) => `${edge.id} ${edge.name}`.toLowerCase().includes(query));
   }, [edges.data?.items, search]);
 
-  const stats = {
-    total: edges.data?.items.length ?? 0,
-    normal: 0,
-    emergency: 0,
-    equipmentProblem: 0,
-    maintenanceRequired: 0,
-  };
+  const stats = useMemo(() => {
+    const items = edges.data?.items ?? [];
+    const normal = items.filter((edge) => getEdgeState(edge) === 'ok').length;
+    const stale = items.filter((edge) => getEdgeState(edge) === 'warn').length;
+    const empty = items.filter((edge) => getEdgeState(edge) === 'empty').length;
+
+    return {
+      total: items.length,
+      normal,
+      stale,
+      empty,
+      liveTags: items.reduce((sum, edge) => sum + edge.liveTagCount, 0),
+    };
+  }, [edges.data?.items]);
 
   return (
     <main className="dashboard-shell">
       <header className="dashboard-header">
         <div>
-          <span className="page-kicker">Drill Cloud</span>
+          <span className="page-kicker">Drill Cloud v3</span>
           <h1>Буровые установки</h1>
         </div>
         <div className="dashboard-actions">
@@ -80,7 +87,7 @@ export function EdgesDashboard({ onOpenEdge, onOpenEquipment }: EdgesDashboardPr
           {auth.enabled ? (
             <button type="button" className="ghost-button" onClick={() => void auth.logout()}>
               <LogOut size={17} />
-              Разлогиниться
+              Выйти
             </button>
           ) : null}
         </div>
@@ -89,9 +96,9 @@ export function EdgesDashboard({ onOpenEdge, onOpenEquipment }: EdgesDashboardPr
       <section className="dashboard-stats" aria-label="Статистика буровых">
         <StatBlock label="Всего установок" value={stats.total} tone="neutral" />
         <StatBlock label="В норме" value={stats.normal} tone="success" />
-        <StatBlock label="Авария" value={stats.emergency} tone="danger" />
-        <StatBlock label="Проблема оборудования" value={stats.equipmentProblem} tone="warning" />
-        <StatBlock label="Требуется ТО" value={stats.maintenanceRequired} tone="accent" />
+        <StatBlock label="Нет live" value={stats.stale} tone="warning" />
+        <StatBlock label="Нет данных" value={stats.empty} tone="danger" />
+        <StatBlock label="Live тегов" value={stats.liveTags} tone="accent" />
       </section>
 
       {edges.isError ? (
@@ -99,13 +106,19 @@ export function EdgesDashboard({ onOpenEdge, onOpenEquipment }: EdgesDashboardPr
       ) : (
         <section className="edge-card-grid" aria-label="Буровые установки">
           {filteredEdges.map((edge, index) => (
-            <EdgeCard key={edge.id} edge={edge} index={index} onOpenEdge={onOpenEdge} onOpenEquipment={onOpenEquipment} />
+            <EdgeCard
+              key={edge.id}
+              edge={edge}
+              index={index}
+              onOpenEdge={onOpenEdge}
+              onOpenEquipment={onOpenEquipment}
+            />
           ))}
         </section>
       )}
 
       {!edges.isPending && !filteredEdges.length && !edges.isError ? (
-        <div className="empty-panel">В cloud-v2 пока нет буровых</div>
+        <div className="empty-panel">В cloud-v3 пока нет буровых</div>
       ) : null}
     </main>
   );
@@ -129,7 +142,7 @@ function StatBlock({
   );
 }
 
-/** Рендерит продуктовую карточку edge с быстрыми переходами в рабочие разделы. */
+/** Рендерит карточку edge с быстрыми переходами в рабочие разделы. */
 function EdgeCard({
   edge,
   onOpenEdge,
@@ -174,7 +187,7 @@ function EdgeCard({
             <Clock3 size={14} />
             Последние данные
           </dt>
-          <dd>{edge.lastDataAt ? formatDateTime(edge.lastDataAt) : '—'}</dd>
+          <dd>{edge.lastDataAt ? formatDateTime(edge.lastDataAt) : '-'}</dd>
         </div>
       </dl>
 
@@ -187,6 +200,11 @@ function EdgeCard({
           <Gauge size={15} />
           Состояние байпасов
         </button>
+        {/* Электросхемы временно скрыты до готовности опубликованных схем и diagram-service. */}
+        {/* <button type="button" onClick={() => onOpenElectrical(edge.id)}>
+          <CircuitBoard size={15} />
+          Электросхемы
+        </button> */}
         <button type="button">
           <ShieldAlert size={15} />
           Аварии приводов
diff --git a/src/pages/ElectricalSchematicsPage.tsx b/src/pages/ElectricalSchematicsPage.tsx
new file mode 100644
index 0000000..91babad
--- /dev/null
+++ b/src/pages/ElectricalSchematicsPage.tsx
@@ -0,0 +1,476 @@
+import { useEffect, useMemo, useState, type CSSProperties } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Activity, AlertTriangle, CircuitBoard, DatabaseZap, PlugZap, RefreshCw } from 'lucide-react';
+import type {
+  CurrentEvent,
+  CurrentItem,
+  CurrentResponse,
+} from '../api/cloud';
+import { getCurrent, getCurrentEventsUrl } from '../api/cloud';
+import {
+  getPublishedDiagramPage,
+  listDiagramPages,
+  type DiagramDocument,
+  type DiagramEdge,
+  type DiagramNode,
+  type DiagramPageSummary,
+  type DiagramPoint,
+} from '../api/diagram';
+import { formatDateTime, formatNumber } from '../utils/format';
+
+type ElectricalSchematicsPageProps = {
+  edgeId: string;
+};
+
+type LiveValue = CurrentItem & {
+  sourceKey: string;
+};
+
+type BindingTag = {
+  tagId: string;
+  edgeId: string;
+  sourceKey: string;
+  sseUrl?: string;
+};
+
+type LiveGroup = {
+  sourceKey: string;
+  edgeId: string;
+  sseUrl?: string;
+  tags: string[];
+};
+
+const DEFAULT_PAGE_PREFIXES = ['ELECTRICAL', 'MAIN', 'DIRECT'];
+
+/** Выбирает опубликованную страницу, отдавая приоритет электросхеме текущей установки. */
+function pickDefaultPage(pages: DiagramPageSummary[], edgeId: string): DiagramPageSummary | undefined {
+  const published = pages.filter((page) => page.publishedRevision);
+  const byPriority = [...published].sort((a, b) => {
+    const aRank = getPageRank(a.pageKey, edgeId);
+    const bRank = getPageRank(b.pageKey, edgeId);
+    return aRank - bRank || a.pageKey.localeCompare(b.pageKey);
+  });
+
+  return byPriority[0];
+}
+
+/** Чем меньше ранг, тем выше страница в списке выбора опубликованных схем. */
+function getPageRank(pageKey: string, edgeId: string): number {
+  const exactKeys = DEFAULT_PAGE_PREFIXES.map((prefix) => (prefix === 'DIRECT' ? edgeId : `${prefix}_${edgeId}`));
+  const exactIndex = exactKeys.indexOf(pageKey);
+  if (exactIndex >= 0) {
+    return exactIndex;
+  }
+
+  return pageKey.includes(edgeId) ? 10 : 20;
+}
+
+/** Собирает теги, которые надо читать по SSE, из виджетов и bindings у элементов схемы. */
+function collectBindingTags(document: DiagramDocument): BindingTag[] {
+  const tags: BindingTag[] = [];
+
+  for (const node of document.nodes) {
+    if (node.kind === 'tagWidget') {
+      tags.push({
+        tagId: node.tagId,
+        edgeId: node.edgeId || document.ownerEdgeId,
+        sourceKey: `edge:${node.edgeId || document.ownerEdgeId}`,
+      });
+      continue;
+    }
+
+    const bindings = node.bindings;
+    if (!bindings) {
+      continue;
+    }
+
+    const edgeId = bindings.sseEdgeId || bindings.edgeId || document.ownerEdgeId;
+    const sourceKey = bindings.sseUrl || `edge:${edgeId}`;
+
+    [bindings.stateTagId, bindings.alarmTagId].filter(Boolean).forEach((tagId) => {
+      tags.push({
+        tagId: tagId!,
+        edgeId,
+        sourceKey,
+        sseUrl: bindings.sseUrl,
+      });
+    });
+  }
+
+  const unique = new Map<string, BindingTag>();
+  tags.forEach((tag) => unique.set(`${tag.sourceKey}:${tag.edgeId}:${tag.tagId}`, tag));
+  return Array.from(unique.values());
+}
+
+/** Группирует подписки так, чтобы один EventSource читал сразу несколько тегов одного edge/source. */
+function createLiveGroups(tags: BindingTag[]): LiveGroup[] {
+  const groups = new Map<string, LiveGroup>();
+
+  tags.forEach((tag) => {
+    const group = groups.get(tag.sourceKey) ?? {
+      sourceKey: tag.sourceKey,
+      edgeId: tag.edgeId,
+      sseUrl: tag.sseUrl,
+      tags: [],
+    };
+
+    if (!group.tags.includes(tag.tagId)) {
+      group.tags.push(tag.tagId);
+    }
+
+    groups.set(tag.sourceKey, group);
+  });
+
+  return Array.from(groups.values());
+}
+
+/** Добавляет tags-параметр к пользовательскому SSE URL, если он еще не задан в настройке. */
+function buildCustomSseUrl(sseUrl: string, tags: string[]): string {
+  const url = new URL(sseUrl, window.location.origin);
+  if (tags.length && !url.searchParams.has('tags')) {
+    url.searchParams.set('tags', tags.join(','));
+  }
+
+  return url.toString();
+}
+
+/** Возвращает live-значение с учетом edge, но оставляет fallback по tag для старых схем. */
+function getLiveValue(values: Map<string, LiveValue>, edgeId: string, tagId?: string): LiveValue | undefined {
+  if (!tagId) {
+    return undefined;
+  }
+
+  return values.get(`${edgeId}:${tagId}`) ?? values.get(`tag:${tagId}`);
+}
+
+/** Рассчитывает размеры полотна по опубликованным координатам элементов. */
+function getCanvasBounds(document?: DiagramDocument) {
+  const nodes = document?.nodes ?? [];
+  const maxX = Math.max(...nodes.map((node) => node.position.x + getNodeSize(node).width), 960);
+  const maxY = Math.max(...nodes.map((node) => node.position.y + getNodeSize(node).height), 560);
+
+  return {
+    width: Math.ceil(maxX + 80),
+    height: Math.ceil(maxY + 80),
+  };
+}
+
+function getNodeSize(node: DiagramNode) {
+  if (node.kind === 'decoration') {
+    return node.size;
+  }
+
+  return node.size ?? { width: 190, height: 82 };
+}
+
+function getNodeTitle(node: DiagramNode, value?: LiveValue) {
+  if (node.kind === 'tagWidget') {
+    return node.label || value?.name || node.tagId;
+  }
+
+  return String(node.data?.title || node.data?.text || node.decorationType);
+}
+
+function getNodeCenter(node: DiagramNode): DiagramPoint {
+  const size = getNodeSize(node);
+  return {
+    x: node.position.x + size.width / 2,
+    y: node.position.y + size.height / 2,
+  };
+}
+
+function getEdgePoints(edge: DiagramEdge, nodeMap: Map<string, DiagramNode>): DiagramPoint[] {
+  const source = nodeMap.get(edge.sourceNodeId);
+  const target = nodeMap.get(edge.targetNodeId);
+  if (!source || !target) {
+    return [];
+  }
+
+  return [getNodeCenter(source), ...(edge.waypoints ?? []), getNodeCenter(target)];
+}
+
+function pointsToPolyline(points: DiagramPoint[]) {
+  return points.map((point) => `${point.x},${point.y}`).join(' ');
+}
+
+/** Отображает опубликованную электросхему и подставляет live-значения через SSE cloud-v3. */
+export function ElectricalSchematicsPage({ edgeId }: ElectricalSchematicsPageProps) {
+  const [selectedPageKey, setSelectedPageKey] = useState('');
+  const [liveValues, setLiveValues] = useState(() => new Map<string, LiveValue>());
+  const [connectedSources, setConnectedSources] = useState<Set<string>>(new Set());
+
+  const pages = useQuery({
+    queryKey: ['diagram-pages', edgeId],
+    queryFn: () => listDiagramPages(edgeId),
+    enabled: Boolean(edgeId),
+  });
+
+  const publishedPages = useMemo(() => pages.data?.filter((page) => page.publishedRevision) ?? [], [pages.data]);
+  const selectedPage = useMemo(
+    () => publishedPages.find((page) => page.pageKey === selectedPageKey) ?? pickDefaultPage(publishedPages, edgeId),
+    [edgeId, publishedPages, selectedPageKey],
+  );
+
+  useEffect(() => {
+    if (selectedPage && selectedPage.pageKey !== selectedPageKey) {
+      setSelectedPageKey(selectedPage.pageKey);
+    }
+  }, [selectedPage, selectedPageKey]);
+
+  const page = useQuery({
+    queryKey: ['published-diagram-page', selectedPage?.pageKey],
+    queryFn: () => getPublishedDiagramPage(selectedPage!.pageKey),
+    enabled: Boolean(selectedPage?.pageKey),
+  });
+
+  const document = page.data?.document;
+  const bindingTags = useMemo(() => (document ? collectBindingTags(document) : []), [document]);
+  const liveGroups = useMemo(() => createLiveGroups(bindingTags), [bindingTags]);
+  const nodeMap = useMemo(() => new Map((document?.nodes ?? []).map((node) => [node.id, node])), [document?.nodes]);
+  const canvasBounds = useMemo(() => getCanvasBounds(document), [document]);
+
+  useEffect(() => {
+    setLiveValues(new Map());
+    setConnectedSources(new Set());
+  }, [selectedPage?.pageKey]);
+
+  useEffect(() => {
+    if (!liveGroups.length) {
+      return undefined;
+    }
+
+    let closed = false;
+    const eventSources: EventSource[] = [];
+
+    const mergeResponse = (response: CurrentResponse, sourceKey: string) => {
+      if (closed) {
+        return;
+      }
+
+      setLiveValues((previous) => {
+        const next = new Map(previous);
+        response.items.forEach((item) => {
+          const value = { ...item, sourceKey };
+          next.set(`${item.edge}:${item.tag}`, value);
+          next.set(`tag:${item.tag}`, value);
+        });
+        return next;
+      });
+    };
+
+    liveGroups.forEach((group) => {
+      if (!group.sseUrl) {
+        void getCurrent(group.edgeId, group.tags).then((response) => mergeResponse(response, group.sourceKey));
+      }
+
+      const url = group.sseUrl ? buildCustomSseUrl(group.sseUrl, group.tags) : getCurrentEventsUrl(group.edgeId, group.tags);
+      const eventSource = new EventSource(url);
+
+      eventSource.onopen = () => {
+        setConnectedSources((previous) => new Set(previous).add(group.sourceKey));
+      };
+
+      eventSource.onerror = () => {
+        setConnectedSources((previous) => {
+          const next = new Set(previous);
+          next.delete(group.sourceKey);
+          return next;
+        });
+      };
+
+      eventSource.onmessage = (message) => {
+        const event = JSON.parse(message.data) as CurrentEvent;
+        mergeResponse(event, group.sourceKey);
+      };
+
+      eventSources.push(eventSource);
+    });
+
+    return () => {
+      closed = true;
+      eventSources.forEach((eventSource) => eventSource.close());
+    };
+  }, [liveGroups]);
+
+  const liveTagCount = liveValues.size ? Array.from(liveValues.keys()).filter((key) => key.startsWith('tag:')).length : 0;
+  const connected = connectedSources.size > 0;
+
+  return (
+    <section className="electrical-section">
+      <div className="section-header">
+        <div>
+          <span className="page-kicker">
+            <CircuitBoard size={14} />
+            Электросхемы
+          </span>
+          <h2>{page.data?.title || document?.title || selectedPage?.pageKey || edgeId}</h2>
+        </div>
+        <div className="electrical-toolbar">
+          {publishedPages.length > 1 ? (
+            <label>
+              Схема
+              <select value={selectedPageKey} onChange={(event) => setSelectedPageKey(event.target.value)}>
+                {publishedPages.map((item) => (
+                  <option key={item.pageKey} value={item.pageKey}>
+                    {item.title || item.pageKey}
+                  </option>
+                ))}
+              </select>
+            </label>
+          ) : null}
+          <div className={`source-chip electrical-live-chip ${connected ? 'electrical-live-chip--sse' : ''}`}>
+            <DatabaseZap size={16} />
+            {connected ? `SSE · ${connectedSources.size}` : liveGroups.length ? 'подключение SSE' : 'нет привязок'}
+          </div>
+          <button type="button" className="icon-button" onClick={() => void page.refetch()} title="Обновить схему">
+            <RefreshCw size={18} />
+          </button>
+        </div>
+      </div>
+
+      {pages.isError ? (
+        <div className="empty-panel">Не удалось загрузить список опубликованных схем: {String(pages.error)}</div>
+      ) : null}
+
+      {!pages.isPending && !publishedPages.length && !pages.isError ? (
+        <div className="empty-panel">Для {edgeId} пока нет опубликованных схем</div>
+      ) : null}
+
+      {page.isError ? (
+        <div className="empty-panel">Не удалось загрузить опубликованную схему: {String(page.error)}</div>
+      ) : null}
+
+      {document ? (
+        <div className="electrical-layout">
+          <div className="electrical-canvas-shell">
+            <div
+              className="electrical-canvas"
+              style={{ width: canvasBounds.width, height: canvasBounds.height }}
+            >
+              {document.background?.url ? (
+                <img
+                  className={`electrical-background electrical-background--${document.background.fit ?? 'contain'}`}
+                  src={document.background.url}
+                  alt=""
+                  style={{ opacity: document.background.opacity ?? 0.22 }}
+                />
+              ) : null}
+
+              <svg className="electrical-wires" width={canvasBounds.width} height={canvasBounds.height}>
+                {(document.edges ?? []).map((edge) => {
+                  const points = getEdgePoints(edge, nodeMap);
+                  if (points.length < 2) {
+                    return null;
+                  }
+
+                  return (
+                    <polyline
+                      key={edge.id}
+                      className={`electrical-wire electrical-wire--${edge.kind} ${edge.animated ? 'electrical-wire--animated' : ''}`}
+                      points={pointsToPolyline(points)}
+                    />
+                  );
+                })}
+              </svg>
+
+              {document.nodes.map((node) => (
+                <ElectricalNode
+                  key={node.id}
+                  node={node}
+                  ownerEdgeId={document.ownerEdgeId}
+                  liveValues={liveValues}
+                />
+              ))}
+            </div>
+          </div>
+
+          <aside className="electrical-side-panel">
+            <div>
+              <span>Опубликовано</span>
+              <strong>{page.data?.publishedAt ? formatDateTime(page.data.publishedAt) : '-'}</strong>
+            </div>
+            <div>
+              <span>Элементы</span>
+              <strong>{document.nodes.length}</strong>
+            </div>
+            <div>
+              <span>Провода</span>
+              <strong>{document.edges.length}</strong>
+            </div>
+            <div>
+              <span>Live-теги</span>
+              <strong>{liveTagCount}</strong>
+            </div>
+          </aside>
+        </div>
+      ) : page.isPending || pages.isPending ? (
+        <div className="empty-panel">Загрузка опубликованной схемы...</div>
+      ) : null}
+    </section>
+  );
+}
+
+function ElectricalNode({
+  node,
+  ownerEdgeId,
+  liveValues,
+}: {
+  node: DiagramNode;
+  ownerEdgeId: string;
+  liveValues: Map<string, LiveValue>;
+}) {
+  const size = getNodeSize(node);
+  const bindings = node.kind === 'decoration' ? node.bindings : undefined;
+  const bindingEdgeId = bindings?.sseEdgeId || bindings?.edgeId || ownerEdgeId;
+  const mainValue =
+    node.kind === 'tagWidget'
+      ? getLiveValue(liveValues, node.edgeId || ownerEdgeId, node.tagId)
+      : getLiveValue(liveValues, bindingEdgeId, bindings?.stateTagId);
+  const alarmValue = node.kind === 'decoration' ? getLiveValue(liveValues, bindingEdgeId, bindings?.alarmTagId) : undefined;
+  const alarmActive = Boolean(alarmValue && Number(alarmValue.value) !== 0);
+  const stateActive = Boolean(mainValue && Number(mainValue.value) !== 0);
+  const title = getNodeTitle(node, mainValue);
+  const style: CSSProperties = {
+    left: node.position.x,
+    top: node.position.y,
+    width: size.width,
+    height: size.height,
+    zIndex: node.zIndex ?? 1,
+    transform: node.kind === 'decoration' && node.rotation ? `rotate(${node.rotation}deg)` : undefined,
+  };
+
+  return (
+    <article
+      className={[
+        'electrical-node',
+        `electrical-node--${node.kind}`,
+        node.kind === 'decoration' ? `electrical-node--${node.decorationType}` : `electrical-node--${node.widgetType}`,
+        stateActive ? 'electrical-node--active' : '',
+        alarmActive ? 'electrical-node--alarm' : '',
+      ].join(' ')}
+      style={style}
+      title={title}
+    >
+      <div className="electrical-node__header">
+        {alarmActive ? <AlertTriangle size={15} /> : node.kind === 'tagWidget' ? <Activity size={15} /> : <PlugZap size={15} />}
+        <span>{title}</span>
+      </div>
+
+      {mainValue ? (
+        <strong className="electrical-node__value">
+          {formatNumber(mainValue.value)}
+          {mainValue.unitOfMeasurement ? <small>{mainValue.unitOfMeasurement}</small> : null}
+        </strong>
+      ) : node.kind === 'decoration' ? (
+        <span className="electrical-node__text">{String(node.data?.text || node.data?.title || node.decorationType)}</span>
+      ) : (
+        <strong className="electrical-node__value">-</strong>
+      )}
+
+      <div className="electrical-node__footer">
+        {node.kind === 'tagWidget' ? <span>{node.tagId}</span> : bindings?.stateTagId ? <span>{bindings.stateTagId}</span> : <span>{node.decorationType}</span>}
+        {alarmValue ? <span className="electrical-node__alarm">alarm {formatNumber(alarmValue.value)}</span> : null}
+      </div>
+    </article>
+  );
+}
diff --git a/src/styles/charts.css b/src/styles/charts.css
index 8129a34..66bcfc2 100644
--- a/src/styles/charts.css
+++ b/src/styles/charts.css
@@ -18,6 +18,38 @@
   border-radius: var(--radius);
 }
 
+.chart-tooltip {
+  min-width: 240px;
+}
+
+.chart-tooltip-title {
+  margin-bottom: 8px;
+  color: #e5e7eb;
+  font-weight: 750;
+}
+
+.chart-tooltip-row {
+  display: grid;
+  grid-template-columns: minmax(90px, 1fr) auto;
+  align-items: center;
+  gap: 14px;
+  margin-top: 5px;
+}
+
+.chart-tooltip-row span {
+  min-width: 0;
+  overflow: hidden;
+  color: #cbd5e1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chart-tooltip-row strong {
+  color: #f8fafc;
+  font-variant-numeric: tabular-nums;
+  font-weight: 650;
+}
+
 .chart-section--archive .chart-placeholder {
   flex: 1;
   min-height: 520px;
diff --git a/src/styles/detail.css b/src/styles/detail.css
index 793c46d..4767eec 100644
--- a/src/styles/detail.css
+++ b/src/styles/detail.css
@@ -3,6 +3,33 @@
   gap: 18px;
 }
 
+.current-transport {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  margin-top: 8px;
+  padding: 0 9px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 999px;
+  color: var(--muted);
+  font-size: 0.72rem;
+  font-weight: 750;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.current-transport--sse {
+  border-color: rgba(34, 197, 94, 0.34);
+  background: rgba(34, 197, 94, 0.1);
+  color: #86efac;
+}
+
+.current-transport--polling {
+  border-color: rgba(245, 158, 11, 0.32);
+  background: rgba(245, 158, 11, 0.08);
+  color: #facc15;
+}
+
 .chart-section,
 .tags-section {
   border: 1px solid var(--line);
@@ -193,12 +220,266 @@
   background: #05080d;
 }
 
+.electrical-section {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 18px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 30%),
+    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 12px),
+    rgba(10, 13, 18, 0.72);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.07),
+    0 18px 36px rgba(0, 0, 0, 0.24);
+}
+
+.electrical-toolbar {
+  display: flex;
+  align-items: end;
+  justify-content: flex-end;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.electrical-toolbar label {
+  min-width: 260px;
+}
+
+.electrical-live-chip--sse {
+  border-color: rgba(34, 197, 94, 0.34);
+  background: rgba(34, 197, 94, 0.1);
+  color: #86efac;
+}
+
+.electrical-layout {
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 220px;
+  gap: 14px;
+  flex: 1;
+}
+
+.electrical-canvas-shell {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  border: 1px solid rgba(88, 103, 121, 0.5);
+  border-radius: 8px;
+  background:
+    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
+    #070b12;
+  background-size: 28px 28px;
+}
+
+.electrical-canvas {
+  position: relative;
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.electrical-background {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.electrical-background--contain {
+  object-fit: contain;
+}
+
+.electrical-background--cover {
+  object-fit: cover;
+}
+
+.electrical-background--stretch {
+  object-fit: fill;
+}
+
+.electrical-wires {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.electrical-wire {
+  fill: none;
+  stroke: #94a3b8;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0.9;
+}
+
+.electrical-wire--power {
+  stroke: #f97316;
+  stroke-width: 3;
+}
+
+.electrical-wire--signal {
+  stroke: #38bdf8;
+  stroke-dasharray: 8 6;
+}
+
+.electrical-wire--alert {
+  stroke: #ef4444;
+  stroke-dasharray: 5 5;
+}
+
+.electrical-wire--animated {
+  animation: electricalWireFlow 900ms linear infinite;
+}
+
+.electrical-node {
+  position: absolute;
+  z-index: 2;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 6px;
+  overflow: hidden;
+  padding: 10px;
+  border: 1px solid rgba(148, 163, 184, 0.34);
+  border-radius: 7px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 32%),
+    rgba(15, 23, 42, 0.9);
+  color: #e5e7eb;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 12px 24px rgba(0, 0, 0, 0.28);
+}
+
+.electrical-node--decoration {
+  border-style: dashed;
+  background:
+    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 10px),
+    rgba(15, 23, 42, 0.74);
+}
+
+.electrical-node--active {
+  border-color: rgba(34, 197, 94, 0.58);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 0 0 1px rgba(34, 197, 94, 0.2),
+    0 0 22px rgba(34, 197, 94, 0.16);
+}
+
+.electrical-node--alarm {
+  border-color: rgba(239, 68, 68, 0.76);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 0 0 1px rgba(239, 68, 68, 0.24),
+    0 0 26px rgba(239, 68, 68, 0.22);
+}
+
+.electrical-node__header,
+.electrical-node__footer {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.electrical-node__header span,
+.electrical-node__footer span,
+.electrical-node__text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.electrical-node__header {
+  color: #f8fafc;
+  font-size: 0.78rem;
+  font-weight: 750;
+}
+
+.electrical-node__value {
+  align-self: center;
+  min-width: 0;
+  overflow: hidden;
+  color: #f8fafc;
+  font-size: clamp(1.2rem, 2vw, 1.9rem);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.electrical-node__value small {
+  margin-left: 6px;
+  color: var(--muted);
+  font-size: 0.72rem;
+  font-weight: 650;
+}
+
+.electrical-node__text {
+  align-self: center;
+  color: #cbd5e1;
+  font-size: 0.9rem;
+}
+
+.electrical-node__footer {
+  color: var(--muted);
+  font-size: 0.68rem;
+}
+
+.electrical-node__alarm {
+  margin-left: auto;
+  color: #fca5a5;
+}
+
+.electrical-side-panel {
+  display: grid;
+  align-content: start;
+  gap: 10px;
+}
+
+.electrical-side-panel div {
+  min-height: 82px;
+  padding: 12px;
+  border: 1px solid rgba(88, 103, 121, 0.46);
+  border-radius: 8px;
+  background: rgba(2, 6, 23, 0.32);
+}
+
+.electrical-side-panel span {
+  display: block;
+  color: var(--muted);
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.electrical-side-panel strong {
+  display: block;
+  margin-top: 10px;
+  color: #f8fafc;
+  font-size: 1.18rem;
+  line-height: 1.2;
+}
+
 @keyframes equipmentFrameSpin {
   to {
     transform: rotate(360deg);
   }
 }
 
+@keyframes electricalWireFlow {
+  to {
+    stroke-dashoffset: -28;
+  }
+}
+
 .section-header {
   justify-content: space-between;
   margin-bottom: 16px;
@@ -394,6 +675,14 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .electrical-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .electrical-side-panel {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
   .tag-selector__header {
     grid-template-columns: 1fr;
   }
@@ -419,4 +708,17 @@
     flex-direction: column;
     align-items: stretch;
   }
+
+  .electrical-side-panel {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .electrical-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .electrical-toolbar label {
+    min-width: 0;
+  }
 }
diff --git a/src/styles/layout.css b/src/styles/layout.css
index dab67b0..e2690c5 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -146,7 +146,8 @@
 }
 
 .workspace--archive,
-.workspace--equipment {
+.workspace--equipment,
+.workspace--electrical {
   display: flex;
   flex-direction: column;
   overflow: auto;
diff --git a/src/utils/format.ts b/src/utils/format.ts
index 6f880e9..2f27483 100644
--- a/src/utils/format.ts
+++ b/src/utils/format.ts
@@ -1,7 +1,7 @@
 /** Форматирует числовое значение показателя для карточек и мини-плиток. */
 export function formatNumber(value: number): string {
   if (!Number.isFinite(value)) {
-    return '—';
+    return '-';
   }
 
   return new Intl.NumberFormat('ru-RU', {
@@ -9,11 +9,11 @@ export function formatNumber(value: number): string {
   }).format(value);
 }
 
-/** Приводит дату/время к короткому русскому формату для операторского интерфейса. */
+/** Приводит дату и время к короткому русскому формату для операторского интерфейса. */
 export function formatDateTime(value: string | number | Date): string {
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) {
-    return '—';
+    return '-';
   }
 
   return new Intl.DateTimeFormat('ru-RU', {
@@ -27,7 +27,6 @@ export function formatDateTime(value: string | number | Date): string {
 
 /** Конвертирует Date в формат, который ожидает input[type="datetime-local"]. */
 export function toInputDateTimeValue(date: Date): string {
-  /** Дополняет часть даты ведущим нулем для стабильного input-формата. */
   const pad = (part: number) => String(part).padStart(2, '0');
   return [
     `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`,