ui creation

2026-06-17 09:46:52 +03:00
commit 2c4aef1185
41 changed files with 6251 additions and 0 deletions
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,2 @@
 VITE_CLOUD_API_URL=http://localhost:3100
 VITE_DEFAULT_EDGE=edge5
--- a/.env.local.example
+++ b/.env.local.example
@@ -0,0 +1,9 @@
 VITE_CLOUD_API_URL=http://localhost:3100
 # Если эти переменные не заданы, 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.
 VITE_TOIR_LIGHT_ORIGIN=https://toir-light.greact.ru
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,37 @@
 # Dependencies
 node_modules/
 # Build output
 dist/
 coverage/
 *.tsbuildinfo
 # Environment files
 .env
 .env.*
 !.env.example
 !.env.local.example
 # Logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 # Runtime/dev artifacts
 *.pid
 *.seed
 *.local
 # IDE and OS files
 .idea/
 .vscode/
 .DS_Store
 Thumbs.db
 # Tool caches
 .eslintcache
 .npm/
 .cache/
 .vite/
--- a/19
+++ b/19
@@ -0,0 +1,19 @@
 FROM node:22-alpine AS deps
 WORKDIR /app
 COPY package*.json ./
 RUN npm ci
 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_DEFAULT_EDGE=edge5
 ENV VITE_CLOUD_API_URL=$VITE_CLOUD_API_URL
 ENV VITE_DEFAULT_EDGE=$VITE_DEFAULT_EDGE
 RUN npm run build
 FROM nginx:1.27-alpine
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 COPY --from=build /app/dist /usr/share/nginx/html
 EXPOSE 80
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,13 @@
 services:
  drill-ui:
    build:
      context: .
      args:
        VITE_CLOUD_API_URL: ${VITE_CLOUD_API_URL:-http://localhost:3100}
        VITE_DEFAULT_EDGE: ${VITE_DEFAULT_EDGE:-edge5}
    expose:
      - "80"
 networks:
  external:
    true
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,26 @@
 import js from '@eslint/js';
 import globals from 'globals';
 import reactHooks from 'eslint-plugin-react-hooks';
 import reactRefresh from 'eslint-plugin-react-refresh';
 import tseslint from 'typescript-eslint';
 export default tseslint.config(
  { ignores: ['dist/**', 'node_modules/**'] },
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    files: ['src/**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2022,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
    },
  },
 );
--- a/index.html
+++ b/index.html
@@ -0,0 +1,14 @@
 <!doctype html>
 <html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#0a0d12" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Drill UI</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/nginx.conf
+++ b/nginx.conf
@@ -0,0 +1,11 @@
 server {
  listen 80;
  server_name _;
  root /usr/share/nginx/html;
  index index.html;
  location / {
    try_files $uri $uri/ /index.html;
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,35 @@
 {
  "name": "greact.drill.ui",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host 0.0.0.0 --port 5173",
    "build": "tsc -b && vite build",
    "lint": "eslint \"src/**/*.{ts,tsx}\"",
    "preview": "vite preview --host 0.0.0.0 --port 4173"
  },
  "dependencies": {
    "@tanstack/react-query": "^5.90.2",
    "echarts": "^5.6.0",
    "echarts-for-react": "^3.0.2",
    "keycloak-js": "^26.2.3",
    "lucide-react": "^0.468.0",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-router-dom": "^7.18.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.30.1",
    "@types/react": "^19.1.8",
    "@types/react-dom": "^19.1.6",
    "@vitejs/plugin-react": "^6.0.2",
    "eslint": "^9.30.1",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.20",
    "globals": "^16.3.0",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.35.1",
    "vite": "^8.0.16"
  }
 }
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <rect width="64" height="64" rx="12" fill="#070a0f"/>
  <rect x="5" y="5" width="54" height="54" rx="9" fill="#111821" stroke="#c97a3d" stroke-opacity="0.55" stroke-width="2"/>
  <path d="M31 10h4l13 44h-8l-2-9H25l-2 9h-8l13-44h3zm-4 28h9l-4-18-5 18z" fill="#d7a15f"/>
  <path d="M14 54h36" stroke="#34d399" stroke-width="4" stroke-linecap="round"/>
 </svg>
--- a/public/logo.png
+++ b/public/logo.png
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,32 @@
 import { BrowserRouter, Navigate, Route, Routes, useNavigate } from 'react-router-dom';
 import { EdgeDetailPage } from './pages/EdgeDetailPage';
 import { EdgesDashboard } from './pages/EdgesDashboard';
 /** Связывает dashboard со SPA-навигацией без передачи navigate в саму страницу. */
 function DashboardRoute() {
  const navigate = useNavigate();
  return (
    <EdgesDashboard
      onOpenEdge={(edgeId) => navigate(`/edges/${encodeURIComponent(edgeId)}`)}
      onOpenEquipment={(edgeId) => navigate(`/edges/${encodeURIComponent(edgeId)}/equipment`)}
    />
  );
 }
 /** Описывает публичную карту маршрутов приложения вокруг edge-объектов. */
 export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Navigate to="/edges" replace />} />
        <Route path="/edges" element={<DashboardRoute />} />
        <Route path="/edges/:edgeId" element={<EdgeDetailPage view="overview" />} />
        <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" />} />
        <Route path="*" element={<Navigate to="/edges" replace />} />
      </Routes>
    </BrowserRouter>
  );
 }
--- a/src/api/cloud.ts
+++ b/src/api/cloud.ts
@@ -0,0 +1,135 @@
 const API_URL = import.meta.env.VITE_CLOUD_API_URL ?? 'http://localhost:3100';
 export type HealthResponse = {
  status: 'ok';
  database: {
    now: string;
    timescaledb_installed: boolean;
    timescaledb_version: string | null;
  };
 };
 export type CurrentItem = {
  edge: string;
  tag: string;
  value: number;
  time: string;
  updatedAt: string;
 };
 export type CurrentResponse = {
  edge: string;
  items: CurrentItem[];
 };
 export type CurrentEvent = CurrentResponse;
 export type EdgeItem = {
  id: string;
  name: string;
  tagCount: number;
  currentTagCount: number;
  liveTagCount: number;
  lastDataAt: string | null;
  createdAt: string;
  updatedAt: string;
 };
 export type EdgeResponse = {
  items: EdgeItem[];
 };
 export type HistoryPoint = {
  t: number;
  v: number;
  first?: number;
  min?: number;
  max?: number;
  avg?: number;
  last?: number;
  count?: number;
 };
 export type HistorySeries = {
  edge: string;
  tag: string;
  points: HistoryPoint[];
 };
 export type HistoryResponse = {
  edge: string;
  source: 'empty' | 'latest' | 'raw' | '1m' | '5m' | '1h' | '1d';
  targetPoints: number;
  series: HistorySeries[];
  from?: string;
  to?: string;
  resolutionSeconds?: number | null;
  valueMode?: 'raw' | 'avg' | 'last' | 'first' | 'min' | 'max';
 };
 /** Выполняет типизированный GET-запрос к cloud-v2 и централизованно обрабатывает ошибки 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]) => {
    if (value !== undefined && value !== '') {
      url.searchParams.set(key, String(value));
    }
  });
  const response = await fetch(url);
  if (!response.ok) {
    const message = await response.text();
    throw new Error(message || `${response.status} ${response.statusText}`);
  }
  return response.json() as Promise<T>;
 }
 /** Запрашивает состояние cloud-v2 и подключенной базы данных. */
 export function getHealth(): Promise<HealthResponse> {
  return request<HealthResponse>('/health');
 }
 /** Возвращает список edge-установок, доступных в cloud-v2. */
 export function getEdges(): Promise<EdgeResponse> {
  return request<EdgeResponse>('/edge');
 }
 /** Загружает текущие значения показателей для выбранного edge. */
 export function getCurrent(edge: string, tags?: string[]): Promise<CurrentResponse> {
  return request<CurrentResponse>('/current', {
    edge,
    tags: tags?.join(','),
  });
 }
 /** Формирует URL SSE-потока для live-обновлений текущих значений. */
 export function getCurrentEventsUrl(edge: string, tags?: string[]): string {
  const url = new URL('/current/events', API_URL);
  url.searchParams.set('edge', edge);
  if (tags?.length) {
    url.searchParams.set('tags', tags.join(','));
  }
  return url.toString();
 }
 /** Запрашивает исторические ряды для графика с учетом диапазона, тегов и режима агрегации. */
 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,
    tags: params.tags?.join(','),
    from: params.from,
    to: params.to,
    targetPoints: params.targetPoints,
    valueMode: params.valueMode,
  });
 }
--- a/src/assets/edge.png
+++ b/src/assets/edge.png
--- a/src/auth/AuthProvider.tsx
+++ b/src/auth/AuthProvider.tsx
@@ -0,0 +1,56 @@
 import { type ReactNode, useEffect, useMemo, useState } from 'react';
 import { AuthContext, type AuthContextValue } from './authContext';
 import { type AuthState, getAuthState, initAuth, login, logout, subscribeAuth } from './keycloak';
 /** Оборачивает приложение auth-состоянием и показывает системные экраны Keycloak-инициализации. */
 export function AuthProvider({ children }: { children: ReactNode }) {
  const [state, setState] = useState<AuthState>(getAuthState());
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  useEffect(() => {
    const unsubscribe = subscribeAuth(setState);
    void initAuth().catch((error) => {
      console.error('Keycloak init failed', error);
      setErrorMessage('Не удалось подключиться к Keycloak. Проверьте VITE_KEYCLOAK_* и настройки клиента в SSO.');
    });
    return unsubscribe;
  }, []);
  const value = useMemo<AuthContextValue>(
    () => ({
      ...state,
      login: () => login(),
      logout: () => logout(),
    }),
    [state],
  );
  if (!state.initialized) {
    return (
      <div className="auth-screen">
        <div className="auth-screen-card">
          <h1>Drill UI</h1>
          <p>Проверяем сессию Keycloak...</p>
        </div>
      </div>
    );
  }
  if (errorMessage) {
    return (
      <div className="auth-screen">
        <div className="auth-screen-card">
          <h1>Ошибка авторизации</h1>
          <p>{errorMessage}</p>
          <button type="button" className="auth-screen-button" onClick={() => void login()}>
            Повторить вход
          </button>
        </div>
      </div>
    );
  }
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }
--- a/src/auth/authContext.ts
+++ b/src/auth/authContext.ts
@@ -0,0 +1,20 @@
 import { createContext, useContext } from 'react';
 import type { AuthState } from './keycloak';
 export type AuthContextValue = AuthState & {
  login: () => Promise<void>;
  logout: () => Promise<void>;
 };
 export const AuthContext = createContext<AuthContextValue | null>(null);
 /** Дает компонентам доступ к данным пользователя и действиям login/logout. */
 export function useAuth(): AuthContextValue {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
 }
--- a/src/auth/keycloak.ts
+++ b/src/auth/keycloak.ts
@@ -0,0 +1,183 @@
 import Keycloak, { type KeycloakInitOptions } from 'keycloak-js';
 const keycloakUrl = import.meta.env.VITE_KEYCLOAK_URL;
 const keycloakRealm = import.meta.env.VITE_KEYCLOAK_REALM;
 const keycloakClientId = import.meta.env.VITE_KEYCLOAK_CLIENT_ID;
 const authEnabled = Boolean(keycloakUrl && keycloakRealm && keycloakClientId);
 const keycloak = authEnabled
  ? new Keycloak({
      url: keycloakUrl!,
      realm: keycloakRealm!,
      clientId: keycloakClientId!,
    })
  : null;
 let initPromise: Promise<boolean> | null = null;
 let refreshPromise: Promise<string | null> | null = null;
 export type AuthState = {
  initialized: boolean;
  authenticated: boolean;
  enabled: boolean;
  username: string | null;
  fullName: string | null;
  email: string | null;
 };
 type AuthListener = (state: AuthState) => void;
 const defaultState: AuthState = {
  initialized: !authEnabled,
  authenticated: !authEnabled,
  enabled: authEnabled,
  username: null,
  fullName: null,
  email: null,
 };
 let authState = defaultState;
 const listeners = new Set<AuthListener>();
 /** Извлекает пользовательскую идентичность из распарсенного Keycloak-токена. */
 function getIdentityState(): Pick<AuthState, 'username' | 'fullName' | 'email'> {
  const tokenParsed = keycloak?.tokenParsed as
    | { preferred_username?: string; name?: string; email?: string }
    | undefined;
  return {
    username: tokenParsed?.preferred_username ?? null,
    fullName: tokenParsed?.name ?? null,
    email: tokenParsed?.email ?? null,
  };
 }
 /** Обновляет auth-состояние и уведомляет все React-подписки. */
 function setAuthState(partial: Partial<AuthState>) {
  authState = { ...authState, ...partial };
  listeners.forEach((listener) => listener(authState));
 }
 if (keycloak) {
  keycloak.onAuthSuccess = () => {
    setAuthState({
      initialized: true,
      authenticated: true,
      ...getIdentityState(),
    });
  };
  keycloak.onAuthLogout = () => {
    setAuthState({
      initialized: true,
      authenticated: false,
      username: null,
      fullName: null,
      email: null,
    });
  };
  keycloak.onTokenExpired = () => {
    void refreshToken(30);
  };
 }
 /** Возвращает актуальный снимок auth-состояния без подписки. */
 export function getAuthState(): AuthState {
  return authState;
 }
 /** Подписывает UI на изменения Keycloak-сессии и возвращает функцию отписки. */
 export function subscribeAuth(listener: AuthListener): () => void {
  listeners.add(listener);
  listener(authState);
  return () => {
    listeners.delete(listener);
  };
 }
 /** Инициализирует Keycloak один раз и запускает login-required flow при включенном SSO. */
 export async function initAuth(): Promise<AuthState> {
  if (!keycloak) {
    return authState;
  }
  if (!initPromise) {
    const initOptions: KeycloakInitOptions = {
      onLoad: 'login-required',
      pkceMethod: 'S256',
      checkLoginIframe: false,
    };
    initPromise = keycloak.init(initOptions).then((authenticated) => {
      setAuthState({
        initialized: true,
        authenticated,
        ...getIdentityState(),
      });
      return authenticated;
    });
  }
  await initPromise;
  return authState;
 }
 /** Обновляет access token перед API-запросами и повторно использует текущий refresh-promise. */
 export async function refreshToken(minValidity = 30): Promise<string | null> {
  if (!keycloak) {
    return null;
  }
  if (!refreshPromise) {
    refreshPromise = keycloak
      .updateToken(minValidity)
      .then(() => {
        setAuthState({
          authenticated: Boolean(keycloak.authenticated),
          ...getIdentityState(),
        });
        return keycloak.token ?? null;
      })
      .catch(async () => {
        setAuthState({
          authenticated: false,
          username: null,
          fullName: null,
          email: null,
        });
        await login();
        return null;
      })
      .finally(() => {
        refreshPromise = null;
      });
  }
  return refreshPromise;
 }
 /** Возвращает действующий access token или null, если SSO отключен/пользователь не вошел. */
 export async function getAccessToken(): Promise<string | null> {
  if (!keycloak?.authenticated) {
    return null;
  }
  await refreshToken(30);
  return keycloak.token ?? null;
 }
 /** Запускает ручной вход через Keycloak с возвратом на текущий адрес. */
 export async function login(redirectUri = window.location.href): Promise<void> {
  await keycloak?.login({ redirectUri });
 }
 /** Завершает Keycloak-сессию и возвращает пользователя на origin приложения. */
 export async function logout(redirectUri = window.location.origin): Promise<void> {
  await keycloak?.logout({ redirectUri });
 }
--- a/src/components/HistoryChart.tsx
+++ b/src/components/HistoryChart.tsx
@@ -0,0 +1,143 @@
 import { LineChart } from 'echarts/charts';
 import {
  DataZoomComponent,
  GridComponent,
  LegendComponent,
  TooltipComponent,
 } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import ReactEChartsCore from 'echarts-for-react/esm/core.js';
 import type { HistoryResponse } from '../api/cloud';
 echarts.use([LineChart, GridComponent, LegendComponent, TooltipComponent, DataZoomComponent, CanvasRenderer]);
 const SERIES_COLORS = [
  '#5B8FF9',
  '#5AD8A6',
  '#F6BD16',
  '#E8684A',
  '#6DC8EC',
  '#FF9D4D',
  '#73D13D',
  '#A7B3FF',
 ];
 type HistoryChartProps = {
  data?: HistoryResponse;
  loading: boolean;
  from?: string;
  to?: string;
 };
 /** Подбирает подпись оси времени под текущий масштаб графика. */
 function formatAxisDate(value: number, spanMs?: number): string {
  const date = new Date(value);
  if (!spanMs || spanMs <= 24 * 60 * 60 * 1000) {
    return new Intl.DateTimeFormat('ru-RU', { hour: '2-digit', minute: '2-digit' }).format(date);
  }
  if (spanMs <= 7 * 24 * 60 * 60 * 1000) {
    return new Intl.DateTimeFormat('ru-RU', { day: '2-digit', month: '2-digit', hour: '2-digit' }).format(date);
  }
  return new Intl.DateTimeFormat('ru-RU', { day: '2-digit', month: '2-digit' }).format(date);
 }
 /** Рисует исторические ряды показателей через ECharts с динамической временной шкалой. */
 export function HistoryChart({ data, loading, from, to }: 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 option = {
    color: SERIES_COLORS,
    animation: false,
    backgroundColor: 'transparent',
    textStyle: {
      color: '#cbd5e1',
      fontFamily: 'Inter, Segoe UI, sans-serif',
    },
    tooltip: {
      trigger: 'axis',
      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)),
    },
    legend: {
      type: 'scroll',
      top: 0,
      textStyle: { color: '#cbd5e1' },
    },
    grid: {
      top: 54,
      left: 48,
      right: 24,
      bottom: 72,
    },
    xAxis: {
      type: 'time',
      min: Number.isFinite(xMin) ? xMin : undefined,
      max: Number.isFinite(xMax) ? xMax : undefined,
      axisLine: { lineStyle: { color: 'rgba(148, 163, 184, 0.35)' } },
      axisLabel: {
        color: '#94a3b8',
        formatter: (value: number) => formatAxisDate(value, xSpan),
      },
      splitLine: { show: false },
    },
    yAxis: {
      type: 'value',
      scale: true,
      axisLine: { lineStyle: { color: 'rgba(148, 163, 184, 0.35)' } },
      axisLabel: { color: '#94a3b8' },
      splitLine: { lineStyle: { color: 'rgba(148, 163, 184, 0.1)' } },
    },
    dataZoom: [
      {
        type: 'inside',
        throttle: 80,
      },
      {
        type: 'slider',
        bottom: 18,
        height: 28,
        borderColor: 'rgba(148, 163, 184, 0.24)',
        fillerColor: 'rgba(91, 143, 249, 0.18)',
        handleStyle: {
          color: '#d4a574',
          borderColor: '#e8c9a0',
        },
        textStyle: { color: '#94a3b8' },
      },
    ],
    series:
      data?.series.map((series, index) => ({
        name: 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]),
      })) ?? [],
  };
  if (loading) {
    return <div className="chart-placeholder">Загрузка графика...</div>;
  }
  if (!data?.series.length) {
    return <div className="chart-placeholder">Нет данных для выбранного диапазона</div>;
  }
  return <ReactEChartsCore echarts={echarts} option={option} className="history-chart" notMerge lazyUpdate />;
 }
--- a/src/components/MetricCard.tsx
+++ b/src/components/MetricCard.tsx
@@ -0,0 +1,49 @@
 import { Activity, Check, Clock3, Plus } from 'lucide-react';
 import type { CurrentItem } from '../api/cloud';
 import { formatNumber } from '../utils/format';
 import { getMetricStatus, type MetricStatusInfo } from '../utils/metricStatus';
 type MetricCardProps = {
  item: CurrentItem;
  selected: boolean;
  statusInfo?: MetricStatusInfo;
  onToggle: (tag: string) => void;
 };
 /** Показывает детальную карточку текущего показателя и управляет добавлением тега на график. */
 export function MetricCard({ item, selected, statusInfo = getMetricStatus(item), onToggle }: MetricCardProps) {
  const { ageSeconds, label, status } = statusInfo;
  const ageLabel = ageSeconds < 60 ? `${ageSeconds}с` : `${Math.floor(ageSeconds / 60)}м ${ageSeconds % 60}с`;
  return (
    <button
      className={`metric-card metric-card--${status} ${selected ? 'metric-card--selected' : ''}`}
      type="button"
      onClick={() => onToggle(item.tag)}
      title={selected ? 'Убрать с графика' : 'Добавить на график'}
    >
      <div className="metric-card__header">
        <span className="metric-card__signal">
          <Activity size={15} />
        </span>
        <span className="metric-card__tag">{item.tag}</span>
        <span className="metric-card__corner">
          <span className={`metric-card__state is-${status}`}>{label}</span>
          <span className="metric-card__age" title="Возраст последнего измерения">
            <Clock3 size={13} />
            {ageLabel}
          </span>
        </span>
      </div>
      <div className="metric-card__value">{formatNumber(item.value)}</div>
      <div className="metric-card__footer">
        <span className="metric-card__action">
          {selected ? <Check size={14} /> : <Plus size={14} />}
          {selected ? 'на графике' : 'на график'}
        </span>
      </div>
    </button>
  );
 }
--- a/src/components/StatusPill.tsx
+++ b/src/components/StatusPill.tsx
@@ -0,0 +1,9 @@
 type StatusPillProps = {
  state: 'ok' | 'warn' | 'error' | 'muted';
  label: string;
 };
 /** Отображает компактный статусный бейдж с цветовой семантикой. */
 export function StatusPill({ state, label }: StatusPillProps) {
  return <span className={`status-pill status-pill--${state}`}>{label}</span>;
 }
--- a/src/components/ToirLightIframe.tsx
+++ b/src/components/ToirLightIframe.tsx
@@ -0,0 +1,40 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { buildToirLightUrl, getToirLightPostMessageTarget } from '../integrations/toir';
 type ToirLightIframeProps = {
  path: string;
  title: string;
  className?: string;
  onLoad?: () => void;
 };
 /** Встраивает TOиР light в iframe и синхронизирует с ним темную тему приложения. */
 export function ToirLightIframe({ path, title, className, onLoad }: ToirLightIframeProps) {
  const iframeRef = useRef<HTMLIFrameElement>(null);
  const src = useMemo(() => buildToirLightUrl(path, 'dark'), [path]);
  const targetOrigin = useMemo(() => getToirLightPostMessageTarget(), []);
  /** Отправляет тему в iframe после загрузки и при пересоздании URL. */
  const sendTheme = useCallback(() => {
    iframeRef.current?.contentWindow?.postMessage({ type: 'greact-theme', theme: 'dark' }, targetOrigin);
  }, [targetOrigin]);
  useEffect(() => {
    sendTheme();
  }, [sendTheme, src]);
  return (
    <iframe
      ref={iframeRef}
      className={className}
      src={src}
      title={title}
      loading="lazy"
      referrerPolicy="strict-origin-when-cross-origin"
      onLoad={() => {
        sendTheme();
        onLoad?.();
      }}
    />
  );
 }
--- a/src/integrations/toir.ts
+++ b/src/integrations/toir.ts
@@ -0,0 +1,20 @@
 const DEFAULT_TOIR_ORIGIN = 'https://toir-light.greact.ru';
 /** Возвращает origin встроенного TOиР-приложения с безопасной нормализацией слеша. */
 export function getToirLightOrigin(): string {
  return (import.meta.env.VITE_TOIR_LIGHT_ORIGIN ?? DEFAULT_TOIR_ORIGIN).replace(/\/$/, '');
 }
 /** Определяет targetOrigin для postMessage в iframe TOиР. */
 export function getToirLightPostMessageTarget(): string {
  return getToirLightOrigin();
 }
 /** Собирает полный URL iframe TOиР и передает тему через query-параметр. */
 export function buildToirLightUrl(path: string, theme = 'dark'): string {
  const origin = getToirLightOrigin();
  const normalizedPath = path.startsWith('/') ? path : `/${path}`;
  const url = new URL(normalizedPath, `${origin}/`);
  url.searchParams.set('theme', theme);
  return url.toString();
 }
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,26 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import App from './App';
 import { AuthProvider } from './auth/AuthProvider';
 import './styles/index.css';
 const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1_000,
      retry: 1,
      refetchOnWindowFocus: false,
    },
  },
 });
 createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <AuthProvider>
        <App />
      </AuthProvider>
    </QueryClientProvider>
  </StrictMode>,
 );
--- a/src/pages/EdgeDetailPage.tsx
+++ b/src/pages/EdgeDetailPage.tsx
@@ -0,0 +1,683 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import {
  Activity,
  BarChart3,
  CalendarClock,
  ChevronDown,
  DatabaseZap,
  Gauge,
  LogOut,
  Menu,
  PanelLeftClose,
  PanelLeftOpen,
  RefreshCw,
  Search,
  Wrench,
 } from 'lucide-react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { CurrentEvent, CurrentItem, CurrentResponse, getCurrent, getCurrentEventsUrl, getHistory } from '../api/cloud';
 import { useAuth } from '../auth/authContext';
 import { HistoryChart } from '../components/HistoryChart';
 import { MetricCard } from '../components/MetricCard';
 import { ToirLightIframe } from '../components/ToirLightIframe';
 import { formatDateTime, formatNumber, toInputDateTimeValue, toIsoFromInput } from '../utils/format';
 import { getMetricStatus } from '../utils/metricStatus';
 const RANGE_PRESETS = [
  { id: '1h', label: '1 час', hours: 1 },
  { id: '6h', label: '6 часов', hours: 6 },
  { id: '24h', label: '24 часа', hours: 24 },
  { id: '7d', label: '7 дней', hours: 24 * 7 },
  { id: '30d', label: '30 дней', hours: 24 * 30 },
 ] as const;
 const ACTIVE_EQUIPMENT_PATH =
  '/equipment?filter=%7B%22status%22%3A%5B%22Active%22%5D%7D&displayedFilters=%7B%22status%22%3Atrue%7D';
 type DetailView = 'overview' | 'archive' | 'indicators' | 'equipment';
 type EdgeDetailPageProps = {
  view: DetailView;
 };
 /** Создает диапазон истории от текущего времени на заданное количество часов назад. */
 function createRange(hours: number) {
  const to = new Date();
  const from = new Date(to.getTime() - hours * 60 * 60 * 1000);
  return {
    from: toInputDateTimeValue(from),
    to: toInputDateTimeValue(to),
  };
 }
 /** Собирает общий layout edge-раздела: меню, live-данные, архив, показатели и iframe оборудования. */
 export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const auth = useAuth();
  const { edgeId = '' } = useParams();
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  const [currentEventsConnected, setCurrentEventsConnected] = useState(false);
  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)}`;
  const current = useQuery({
    queryKey: ['current', edgeId],
    queryFn: () => getCurrent(edgeId),
    enabled: Boolean(edgeId),
    refetchInterval: currentEventsConnected ? false : 1_000,
  });
  useEffect(() => {
    if (!edgeId || typeof EventSource === 'undefined') {
      setCurrentEventsConnected(false);
      return undefined;
    }
    const eventSource = new EventSource(getCurrentEventsUrl(edgeId));
    eventSource.onopen = () => setCurrentEventsConnected(true);
    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)),
        };
      });
    };
    return () => {
      eventSource.close();
      setCurrentEventsConnected(false);
    };
  }, [edgeId, queryClient]);
  const visibleItems = useMemo(() => {
    const query = search.trim().toLowerCase();
    const items = current.data?.items ?? [];
    return query ? items.filter((item) => item.tag.toLowerCase().includes(query)) : items;
  }, [current.data?.items, search]);
  const latestUpdatedAt = useMemo(() => {
    const latest = (current.data?.items ?? []).reduce<number | null>((max, item) => {
      const updatedAt = new Date(item.updatedAt).getTime();
      return Number.isFinite(updatedAt) && (max === null || updatedAt > max) ? updatedAt : max;
    }, null);
    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 history = useQuery({
    queryKey: ['history', edgeId, selectedTags, range.from, range.to, valueMode],
    queryFn: () =>
      getHistory({
        edge: edgeId,
        tags: selectedTags,
        from: toIsoFromInput(range.from),
        to: toIsoFromInput(range.to),
        targetPoints: 1600,
        valueMode,
      }),
    enabled: Boolean(edgeId && selectedTags.length),
    refetchInterval: 5_000,
  });
  /** Переключает выбранный тег для отображения на историческом графике. */
  const toggleTag = (tag: string) => {
    setSelectedTags((prev) => (prev.includes(tag) ? prev.filter((item) => item !== tag) : [...prev, tag]));
  };
  /** Быстро выбирает первые найденные показатели для первичного анализа графика. */
  const selectFirstTags = () => {
    setSelectedTags(visibleItems.slice(0, 6).map((item) => item.tag));
  };
  /** Добавляет все отфильтрованные показатели к текущему набору выбранных тегов. */
  const selectVisibleTags = () => {
    setSelectedTags((prev) => Array.from(new Set([...prev, ...visibleItems.map((item) => item.tag)])));
  };
  /** Снимает выбор только с тех тегов, которые сейчас видны после фильтра поиска. */
  const clearVisibleTags = () => {
    const visibleTags = new Set(visibleItems.map((item) => item.tag));
    setSelectedTags((prev) => prev.filter((tag) => !visibleTags.has(tag)));
  };
  return (
    <main className={`app-shell ${sidebarCollapsed ? 'app-shell--sidebar-collapsed' : ''}`}>
      <aside className="sidebar">
        <div className="brand">
          <img src="/logo.png" alt="" />
          <div className="brand__text">
            <strong>Drill UI</strong>
          </div>
          <button
            type="button"
            className="sidebar-toggle"
            onClick={() => setSidebarCollapsed((collapsed) => !collapsed)}
            title={sidebarCollapsed ? 'Развернуть меню' : 'Свернуть меню'}
          >
            {sidebarCollapsed ? <PanelLeftOpen size={18} /> : <PanelLeftClose size={18} />}
          </button>
        </div>
        <nav className="nav-list" aria-label="Основная навигация">
          <button className="nav-item nav-item--button" type="button" onClick={() => navigate('/edges')}>
            <Menu size={18} />
            <span className="nav-label">Буровые</span>
          </button>
          <button
            className={`nav-item nav-item--button ${view === 'overview' ? 'nav-item--active' : ''}`}
            type="button"
            onClick={() => navigate(edgePath)}
          >
            <Gauge size={18} />
            <span className="nav-label">Обзор</span>
          </button>
          <button
            className={`nav-item nav-item--button ${view === 'archive' ? 'nav-item--active' : ''}`}
            type="button"
            onClick={() => navigate(`${edgePath}/archive`)}
          >
            <BarChart3 size={18} />
            <span className="nav-label">Архив</span>
          </button>
          <button
            className={`nav-item nav-item--button ${view === 'indicators' ? 'nav-item--active' : ''}`}
            type="button"
            onClick={() => navigate(`${edgePath}/indicators`)}
          >
            <Activity size={18} />
            <span className="nav-label">Показатели</span>
          </button>
          <button
            className={`nav-item nav-item--button ${view === 'equipment' ? 'nav-item--active' : ''}`}
            type="button"
            onClick={() => navigate(`${edgePath}/equipment`)}
          >
            <Wrench size={18} />
            <span className="nav-label">Оборудование</span>
          </button>
        </nav>
      </aside>
      <section className={`workspace workspace--${view}`}>
        <header className="topbar">
          <div>
            <span className="page-kicker">Операторская панель</span>
            <h1>Буровая установка {edgeId}</h1>
          </div>
          <div className="topbar-actions">
            <button type="button" className="ghost-button" onClick={() => navigate('/edges')}>
              <Menu size={17} />
              К списку
            </button>
            <button type="button" className="icon-button" onClick={() => current.refetch()} title="Обновить данные">
              <RefreshCw size={18} />
            </button>
            {auth.enabled ? (
              <button type="button" className="ghost-button" onClick={() => void auth.logout()}>
                <LogOut size={17} />
                Разлогиниться
              </button>
            ) : null}
          </div>
        </header>
        {view === 'overview' ? (
          <OverviewView
            edgeId={edgeId}
            totalTags={current.data?.items.length ?? 0}
            liveCount={liveCount}
            latestUpdatedAt={latestUpdatedAt}
            selectedCount={selectedTags.length}
            onOpenArchive={() => navigate(`${edgePath}/archive`)}
            onOpenIndicators={() => navigate(`${edgePath}/indicators`)}
            onOpenEquipment={() => navigate(`${edgePath}/equipment`)}
          />
        ) : null}
        {view === 'archive' ? (
          <ArchiveView
            items={visibleItems}
            search={search}
            selectedTags={selectedTags}
            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}
            onClearVisibleTags={clearVisibleTags}
            onClearTags={() => setSelectedTags([])}
          />
        ) : null}
        {view === 'indicators' ? (
          <IndicatorsView
            items={visibleItems}
            search={search}
            isError={current.isError}
            error={current.error}
            selectedTags={selectedTags}
            onSearchChange={setSearch}
            onToggleTag={toggleTag}
          />
        ) : null}
        {view === 'equipment' ? <EquipmentView /> : null}
      </section>
    </main>
  );
 }
 /** Показывает обзор выбранного edge и быстрые переходы в основные разделы. */
 function OverviewView({
  edgeId,
  totalTags,
  liveCount,
  latestUpdatedAt,
  selectedCount,
  onOpenArchive,
  onOpenIndicators,
  onOpenEquipment,
 }: {
  edgeId: string;
  totalTags: number;
  liveCount: number;
  latestUpdatedAt?: Date;
  selectedCount: number;
  onOpenArchive: () => void;
  onOpenIndicators: () => void;
  onOpenEquipment: () => void;
 }) {
  return (
    <section className="detail-overview">
      <div className="summary-grid">
        <div className="summary-card">
          <span>Всего показателей</span>
          <strong>{totalTags}</strong>
        </div>
        <div className="summary-card">
          <span>Live</span>
          <strong>{liveCount}</strong>
        </div>
        <div className="summary-card">
          <span>Выбрано для графика</span>
          <strong>{selectedCount}</strong>
        </div>
        <div className="summary-card">
          <span>Последнее обновление</span>
          <strong>{latestUpdatedAt ? formatDateTime(latestUpdatedAt) : '—'}</strong>
        </div>
      </div>
      <section className="detail-action-panel">
        <div>
          <span className="page-kicker">Разделы</span>
          <h2>{edgeId}</h2>
        </div>
        <div className="detail-action-grid">
          <button type="button" onClick={onOpenIndicators}>
            <Activity size={18} />
            Текущие показатели
          </button>
          <button type="button" onClick={onOpenArchive}>
            <BarChart3 size={18} />
            Архив и график
          </button>
          <button type="button" onClick={onOpenEquipment}>
            <Wrench size={18} />
            Состояние оборудования
          </button>
          <button type="button">
            <CalendarClock size={18} />
            Техническое обслуживание
          </button>
        </div>
      </section>
    </section>
  );
 }
 /** Управляет выбором тегов, диапазона и режима агрегации для исторического графика. */
 function ArchiveView({
  items,
  search,
  selectedTags,
  history,
  historyLoading,
  historySource,
  resolutionSeconds,
  range,
  valueMode,
  onSearchChange,
  onRangeChange,
  onValueModeChange,
  onToggleTag,
  onSelectFirstTags,
  onSelectVisibleTags,
  onClearVisibleTags,
  onClearTags,
 }: {
  items: Array<{ tag: string; value: number; time: string }>;
  search: string;
  selectedTags: string[];
  history: Parameters<typeof HistoryChart>[0]['data'];
  historyLoading: boolean;
  historySource?: string;
  resolutionSeconds?: number | null;
  range: { from: string; to: string };
  valueMode: 'avg' | 'last' | 'min' | 'max';
  onSearchChange: (value: string) => void;
  onRangeChange: (value: { from: string; to: string }) => void;
  onValueModeChange: (value: 'avg' | 'last' | 'min' | 'max') => void;
  onToggleTag: (tag: string) => void;
  onSelectFirstTags: () => void;
  onSelectVisibleTags: () => void;
  onClearVisibleTags: () => void;
  onClearTags: () => void;
 }) {
  const [selectorOpen, setSelectorOpen] = useState(false);
  const selectedPreview = selectedTags.slice(0, 10);
  const hiddenSelectedCount = Math.max(0, selectedTags.length - selectedPreview.length);
  return (
    <section className="chart-section chart-section--archive">
      <div className="section-header">
        <div>
          <span className="page-kicker">
            <CalendarClock size={14} />
            История
          </span>
          <h2>График параметров</h2>
        </div>
        <div className="source-chip">
          <DatabaseZap size={16} />
          {historySource ?? 'source'}
          {resolutionSeconds ? ` · ${resolutionSeconds}s` : ''}
        </div>
      </div>
      <div className="archive-tag-panel">
        <button
          type="button"
          className="archive-tag-panel__toggle"
          onClick={() => setSelectorOpen((open) => !open)}
          aria-expanded={selectorOpen}
        >
          <span>
            Показатели
            <strong>{selectedTags.length} выбрано · {items.length} найдено</strong>
          </span>
          <ChevronDown size={18} />
        </button>
        {selectorOpen ? (
          <div className="tag-selector">
            <div className="tag-selector__header">
              <label className="search-box">
                <Search size={16} />
                <input value={search} onChange={(event) => onSearchChange(event.target.value)} placeholder="Поиск" />
              </label>
              <div className="tag-selector__tools">
                <button type="button" onClick={onSelectFirstTags}>
                  Первые 6
                </button>
                <button type="button" onClick={onSelectVisibleTags}>
                  Выбрать найденные
                </button>
                <button type="button" onClick={onClearVisibleTags}>
                  Снять найденные
                </button>
                <button type="button" onClick={onClearTags}>
                  Сбросить все
                </button>
              </div>
            </div>
            <div className="selected-tags">
              {selectedPreview.length ? selectedPreview.map((tag) => <span key={tag}>{tag}</span>) : <span>Не выбрано</span>}
              {hiddenSelectedCount > 0 ? <span>+{hiddenSelectedCount}</span> : null}
            </div>
            <div className="tag-select-list">
              {items.map((item) => {
                const selected = selectedTags.includes(item.tag);
                return (
                  <button
                    key={item.tag}
                    type="button"
                    className={`tag-select-item ${selected ? 'tag-select-item--selected' : ''}`}
                    onClick={() => onToggleTag(item.tag)}
                  >
                    <span>{item.tag}</span>
                    <strong>{item.value.toLocaleString('ru-RU', { maximumFractionDigits: 3 })}</strong>
                  </button>
                );
              })}
            </div>
          </div>
        ) : null}
      </div>
      <div className="archive-chart">
        <div className="toolbar">
          <div className="segmented">
            {RANGE_PRESETS.map((preset) => (
              <button key={preset.id} type="button" onClick={() => onRangeChange(createRange(preset.hours))}>
                {preset.label}
              </button>
            ))}
          </div>
          <label>
            С
            <input
              type="datetime-local"
              value={range.from}
              onChange={(event) => onRangeChange({ ...range, from: event.target.value })}
            />
          </label>
          <label>
            По
            <input
              type="datetime-local"
              value={range.to}
              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 ? (
          <HistoryChart
            data={history}
            loading={historyLoading}
            from={toIsoFromInput(range.from)}
            to={toIsoFromInput(range.to)}
          />
        ) : (
          <div className="chart-placeholder">Разверните список показателей и выберите серии для графика</div>
        )}
      </div>
    </section>
  );
 }
 /** Встраивает страницу активного оборудования из TOиР light почти на всю рабочую область. */
 function EquipmentView() {
  const [iframeLoaded, setIframeLoaded] = useState(false);
  return (
    <section className="equipment-section" aria-label="Активное оборудование">
      <div className="equipment-frame-shell" aria-busy={!iframeLoaded}>
        {!iframeLoaded ? (
          <div className="equipment-frame-loading" role="status" aria-live="polite">
            <span className="equipment-frame-loading__ring" aria-hidden />
            <span>Загрузка интерфейса управления оборудованием...</span>
          </div>
        ) : null}
        <ToirLightIframe
          className="equipment-frame"
          path={ACTIVE_EQUIPMENT_PATH}
          title="ТОиР light: управление активным оборудованием"
          onLoad={() => setIframeLoaded(true)}
        />
      </div>
    </section>
  );
 }
 /** Показывает текущие показатели edge в режимах общей картины и детальных карточек. */
 function IndicatorsView({
  items,
  search,
  isError,
  error,
  selectedTags,
  onSearchChange,
  onToggleTag,
 }: {
  items: CurrentItem[];
  search: string;
  isError: boolean;
  error: unknown;
  selectedTags: string[];
  onSearchChange: (value: string) => void;
  onToggleTag: (tag: string) => void;
 }) {
  const [displayMode, setDisplayMode] = useState<'overview' | 'cards'>('overview');
  const itemStatuses = useMemo(() => {
    const now = Date.now();
    return items.map((item) => ({ item, statusInfo: getMetricStatus(item, now) }));
  }, [items]);
  const statusCounts = itemStatuses.reduce(
    (counts, { statusInfo }) => {
      counts[statusInfo.status] += 1;
      return counts;
    },
    { normal: 0, warning: 0, critical: 0 },
  );
  return (
    <section className="tags-section">
      <div className="section-header">
        <div>
          <span className="page-kicker">
            <Search size={14} />
            Показатели
          </span>
          <h2>Текущие значения</h2>
        </div>
        <div className="indicator-controls">
          <div className="view-switch" aria-label="Режим отображения показателей">
            <button
              type="button"
              className={displayMode === 'overview' ? 'view-switch__button--active' : ''}
              onClick={() => setDisplayMode('overview')}
            >
              Картина
            </button>
            <button
              type="button"
              className={displayMode === 'cards' ? 'view-switch__button--active' : ''}
              onClick={() => setDisplayMode('cards')}
            >
              Карточки
            </button>
          </div>
          <label className="search-box">
            <Search size={16} />
            <input value={search} onChange={(event) => onSearchChange(event.target.value)} placeholder="Поиск показателя" />
          </label>
        </div>
      </div>
      <div className="indicator-summary">
        <div>
          <span>Всего</span>
          <strong>{items.length}</strong>
        </div>
        <div>
          <span>В норме</span>
          <strong>{statusCounts.normal}</strong>
        </div>
        <div>
          <span>Предупреждение</span>
          <strong>{statusCounts.warning}</strong>
        </div>
        <div>
          <span>Критично</span>
          <strong>{statusCounts.critical}</strong>
        </div>
        <div>
          <span>На графике</span>
          <strong>{selectedTags.length}</strong>
        </div>
      </div>
      {isError ? (
        <div className="empty-panel">Не удалось загрузить текущие значения: {String(error)}</div>
      ) : displayMode === 'overview' ? (
        <div className="metric-mosaic">
          {itemStatuses.map(({ item, statusInfo }) => (
            <button
              key={`${item.edge}:${item.tag}`}
              type="button"
              className={`metric-tile metric-tile--${statusInfo.status} ${selectedTags.includes(item.tag) ? 'metric-tile--selected' : ''}`}
              title={`${item.tag}: ${formatNumber(item.value)} · ${statusInfo.label}`}
              onClick={() => onToggleTag(item.tag)}
            >
              <span className="metric-tile__status" />
              <span className="metric-tile__tag">{item.tag}</span>
              <strong>{formatNumber(item.value)}</strong>
            </button>
          ))}
        </div>
      ) : (
        <div className="metric-grid">
          {itemStatuses.map(({ item, statusInfo }) => (
            <MetricCard
              key={`${item.edge}:${item.tag}`}
              item={item}
              statusInfo={statusInfo}
              selected={selectedTags.includes(item.tag)}
              onToggle={onToggleTag}
            />
          ))}
        </div>
      )}
    </section>
  );
 }
--- a/src/pages/EdgesDashboard.tsx
+++ b/src/pages/EdgesDashboard.tsx
@@ -0,0 +1,217 @@
 import { useMemo, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { ArrowRight, Clock3, Gauge, LogOut, RefreshCw, Search, ShieldAlert, Wrench } from 'lucide-react';
 import edgeImage from '../assets/edge.png';
 import { EdgeItem, getEdges } from '../api/cloud';
 import { useAuth } from '../auth/authContext';
 import { formatDateTime } from '../utils/format';
 type EdgesDashboardProps = {
  onOpenEdge: (edgeId: string) => void;
  onOpenEquipment: (edgeId: string) => void;
 };
 /** Определяет базовый статус edge по наличию последних и live-данных. */
 function getEdgeState(edge: EdgeItem): 'ok' | 'warn' | 'empty' {
  if (!edge.lastDataAt) {
    return 'empty';
  }
  if (edge.liveTagCount > 0) {
    return 'ok';
  }
  return 'warn';
 }
 /** Возвращает пользовательское имя edge, если оно отличается от технического id. */
 function getEdgeTitle(edge: EdgeItem): string {
  if (edge.name && edge.name !== edge.id) {
    return edge.name;
  }
  return edge.id;
 }
 /** Отображает стартовый dashboard со списком edge-установок и общей статистикой. */
 export function EdgesDashboard({ onOpenEdge, onOpenEquipment }: EdgesDashboardProps) {
  const [search, setSearch] = useState('');
  const auth = useAuth();
  const edges = useQuery({
    queryKey: ['edge'],
    queryFn: getEdges,
    refetchInterval: 5_000,
  });
  const filteredEdges = useMemo(() => {
    const query = search.trim().toLowerCase();
    const items = edges.data?.items ?? [];
    if (!query) {
      return items;
    }
    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,
  };
  return (
    <main className="dashboard-shell">
      <header className="dashboard-header">
        <div>
          <span className="page-kicker">Drill Cloud</span>
          <h1>Буровые установки</h1>
        </div>
        <div className="dashboard-actions">
          <label className="search-box dashboard-search">
            <Search size={16} />
            <input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Поиск буровой" />
          </label>
          <button type="button" className="icon-button" onClick={() => edges.refetch()} title="Обновить список">
            <RefreshCw size={18} />
          </button>
          {auth.enabled ? (
            <button type="button" className="ghost-button" onClick={() => void auth.logout()}>
              <LogOut size={17} />
              Разлогиниться
            </button>
          ) : null}
        </div>
      </header>
      <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" />
      </section>
      {edges.isError ? (
        <div className="empty-panel">Не удалось загрузить список буровых: {String(edges.error)}</div>
      ) : (
        <section className="edge-card-grid" aria-label="Буровые установки">
          {filteredEdges.map((edge, index) => (
            <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>
      ) : null}
    </main>
  );
 }
 /** Показывает один числовой показатель общей статистики dashboard. */
 function StatBlock({
  label,
  value,
  tone,
 }: {
  label: string;
  value: number;
  tone: 'neutral' | 'success' | 'danger' | 'warning' | 'accent';
 }) {
  return (
    <article className={`dashboard-stat dashboard-stat--${tone}`}>
      <span>{label}</span>
      <strong>{value}</strong>
    </article>
  );
 }
 /** Рендерит продуктовую карточку edge с быстрыми переходами в рабочие разделы. */
 function EdgeCard({
  edge,
  onOpenEdge,
  onOpenEquipment,
 }: {
  edge: EdgeItem;
  index: number;
  onOpenEdge: (edgeId: string) => void;
  onOpenEquipment: (edgeId: string) => void;
 }) {
  const state = getEdgeState(edge);
  const title = getEdgeTitle(edge);
  const stateLabel = state === 'ok' ? 'В норме' : state === 'warn' ? 'Нет live' : 'Нет данных';
  return (
    <article className={`edge-card edge-card--${state}`}>
      <header className="edge-card__header">
        <div className="edge-card__logo">
          <img src={edgeImage} alt="" />
        </div>
        <div className="edge-card__title">
          <h2>{title}</h2>
          <span>{edge.id}</span>
        </div>
        <span className={`edge-state edge-state--${state}`}>
          <Gauge size={14} />
          {stateLabel}
        </span>
      </header>
      <dl className="edge-card__meta">
        <div>
          <dt>Показатели</dt>
          <dd>{edge.currentTagCount}/{edge.tagCount}</dd>
        </div>
        <div>
          <dt>Live</dt>
          <dd>{edge.liveTagCount}</dd>
        </div>
        <div>
          <dt>
            <Clock3 size={14} />
            Последние данные
          </dt>
          <dd>{edge.lastDataAt ? formatDateTime(edge.lastDataAt) : '—'}</dd>
        </div>
      </dl>
      <div className="edge-card__actions" aria-label={`Разделы ${title}`}>
        <button type="button" onClick={() => onOpenEquipment(edge.id)}>
          <Wrench size={15} />
          Оборудование
        </button>
        <button type="button">
          <Gauge size={15} />
          Состояние байпасов
        </button>
        <button type="button">
          <ShieldAlert size={15} />
          Аварии приводов
        </button>
        <button type="button">
          <Clock3 size={15} />
          Техническое обслуживание
        </button>
      </div>
      <section className="edge-card__maintenance" aria-label="Техническое обслуживание">
        <span>Техническое обслуживание</span>
        <div>
          <button type="button">Ежедневное</button>
          <button type="button">Еженедельное</button>
          <button type="button">Ежемесячное</button>
          <button type="button">Полугодовое</button>
          <button type="button">Годовое</button>
        </div>
      </section>
      <button type="button" className="edge-card__details" onClick={() => onOpenEdge(edge.id)}>
        <span>Подробнее</span>
        <ArrowRight size={18} />
      </button>
    </article>
  );
 }
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -0,0 +1,57 @@
 * {
  box-sizing: border-box;
 }
 body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 6%, rgba(201, 122, 61, 0.14), transparent 34%),
    radial-gradient(circle at 90% 80%, rgba(139, 90, 43, 0.14), transparent 38%),
    var(--bg);
 }
 button,
 input,
 select {
  font: inherit;
 }
 button {
  color: inherit;
 }
 h1,
 h2 {
  margin: 0;
  letter-spacing: 0;
 }
 h1 {
  margin-top: 4px;
  font-size: 1.9rem;
  font-weight: 650;
 }
 h2 {
  font-size: 1.18rem;
 }
 label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.84rem;
 }
 input,
 select {
  min-height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--radius);
  background: rgba(15, 23, 42, 0.72);
  color: var(--text);
  padding: 0 10px;
 }
--- a/src/styles/charts.css
+++ b/src/styles/charts.css
@@ -0,0 +1,33 @@
 .history-chart {
  width: 100%;
  height: 440px;
 }
 .chart-section--archive .history-chart {
  flex: 1;
  min-height: 520px;
  height: calc(100dvh - 280px);
 }
 .chart-placeholder {
  min-height: 260px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed rgba(148, 163, 184, 0.2);
  border-radius: var(--radius);
 }
 .chart-section--archive .chart-placeholder {
  flex: 1;
  min-height: 520px;
  height: calc(100dvh - 280px);
 }
@media (max-width: 680px) {
  .chart-section--archive .history-chart,
  .chart-section--archive .chart-placeholder {
    min-height: 420px;
    height: calc(100dvh - 340px);
  }
 }
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -0,0 +1,529 @@
 .panel-eyebrow,
 .page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
 }
 .icon-button,
 .segmented button,
 .ghost-button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(201, 122, 61, 0.08);
  cursor: pointer;
 }
 .icon-button {
  width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
 }
 .ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: #cbd5e1;
 }
 .segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius);
  background: rgba(2, 6, 23, 0.35);
 }
 .view-switch {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius);
  background: rgba(2, 6, 23, 0.35);
 }
 .segmented button {
  border-color: transparent;
  padding: 0 10px;
 }
 .view-switch button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 3px);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
 }
 .view-switch button:hover,
 .view-switch__button--active {
  border-color: rgba(212, 165, 116, 0.34);
  background: rgba(201, 122, 61, 0.14);
  color: #f8fafc;
 }
 .segmented button:hover,
 .icon-button:hover {
  border-color: var(--line-strong);
  background: rgba(201, 122, 61, 0.18);
 }
 .source-chip,
 .status-pill,
 .metric-card__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.78rem;
 }
 .source-chip {
  border: 1px solid var(--line);
  color: #cbd5e1;
 }
 .status-pill--ok {
  border: 1px solid rgba(34, 197, 94, 0.36);
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
 }
 .status-pill--warn {
  border: 1px solid rgba(245, 158, 11, 0.36);
  background: rgba(245, 158, 11, 0.12);
  color: #facc15;
 }
 .status-pill--error {
  border: 1px solid rgba(239, 68, 68, 0.36);
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
 }
 .status-pill--muted {
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(148, 163, 184, 0.08);
  color: #cbd5e1;
 }
 .search-box {
  min-width: min(320px, 100%);
  padding-left: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--radius);
  background: rgba(15, 23, 42, 0.72);
 }
 .search-box input {
  flex: 1;
  border: 0;
  background: transparent;
  padding-left: 0;
 }
 .empty-panel {
  min-height: 260px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed rgba(148, 163, 184, 0.2);
  border-radius: var(--radius);
 }
 .auth-screen {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 18%, rgba(201, 122, 61, 0.16), transparent 36%),
    var(--bg);
 }
 .auth-screen-card {
  width: min(420px, 100%);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 34%),
    rgba(10, 13, 18, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 22px 44px rgba(0, 0, 0, 0.34);
 }
 .auth-screen-card h1 {
  margin: 0 0 10px;
  font-size: 1.4rem;
 }
 .auth-screen-card p {
  margin: 0;
  color: var(--muted);
 }
 .auth-screen-button {
  min-height: 38px;
  margin-top: 18px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(201, 122, 61, 0.12);
  color: var(--text);
  cursor: pointer;
 }
 .metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
 }
 .metric-mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 7px;
 }
 .metric-tile {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1 / 0.86;
  min-height: 76px;
  min-width: 0;
  display: grid;
  align-content: space-between;
  gap: 7px;
  padding: 10px 9px 9px;
  border: 1px solid rgba(88, 103, 121, 0.5);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 32%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 9px),
    linear-gradient(145deg, rgba(20, 27, 36, 0.96), rgba(5, 8, 13, 0.92));
  cursor: pointer;
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 8px 18px rgba(0, 0, 0, 0.18);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
 }
 .metric-tile::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: 4px;
  border-radius: 6px 0 0 6px;
  background: currentColor;
  box-shadow: 0 0 16px currentColor;
  opacity: 0.94;
 }
 .metric-tile::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 4px;
  pointer-events: none;
 }
 .metric-tile:hover,
 .metric-tile--selected {
  border-color: rgba(232, 201, 160, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 10px 22px rgba(0, 0, 0, 0.26);
  transform: translateY(-1px);
 }
 .metric-tile--normal {
  color: #22c55e;
 }
 .metric-tile--warning {
  color: #f59e0b;
 }
 .metric-tile--critical {
  color: #ef4444;
 }
 .metric-tile__status {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: currentColor;
  box-shadow:
    0 0 0 3px color-mix(in srgb, currentColor 13%, transparent),
    0 0 16px currentColor;
 }
 .metric-tile__tag,
 .metric-tile strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 .metric-tile__tag {
  color: #cbd5e1;
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
 }
 .metric-tile strong {
  color: #f8fafc;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
 }
 .metric-card {
  position: relative;
  overflow: hidden;
  min-height: 184px;
  text-align: left;
  padding: 16px 15px 15px 17px;
  border: 1px solid rgba(88, 103, 121, 0.52);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 11px),
    linear-gradient(145deg, rgba(18, 25, 34, 0.95), rgba(5, 8, 13, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.52),
    0 14px 28px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
 }
 .metric-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: currentColor;
  box-shadow: 0 0 18px currentColor;
 }
 .metric-card::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 5px;
  pointer-events: none;
 }
 .metric-card:hover,
 .metric-card--selected {
  border-color: rgba(232, 201, 160, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 30%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 11px),
    linear-gradient(145deg, rgba(27, 35, 46, 0.98), rgba(11, 14, 20, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.58),
    0 18px 32px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
 }
 .metric-card--normal {
  color: #22c55e;
 }
 .metric-card--normal .metric-card__signal {
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(34, 197, 94, 0.08);
 }
 .metric-card--warning {
  color: #f59e0b;
 }
 .metric-card--warning .metric-card__signal {
  color: #facc15;
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.08);
 }
 .metric-card--critical {
  color: #ef4444;
 }
 .metric-card--critical .metric-card__signal {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.1);
 }
 .metric-card__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
 }
 .metric-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
 }
 .metric-card__signal {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212, 165, 116, 0.24);
  border-radius: 6px;
  color: var(--accent-soft);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 7px),
    rgba(2, 6, 23, 0.42);
 }
 .metric-card__tag {
  min-width: 0;
  overflow: hidden;
  color: #e5e7eb;
  font-size: 0.86rem;
  font-weight: 750;
  letter-spacing: 0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 .metric-card__state {
  flex: 0 0 auto;
  padding: 0 8px;
 }
 .metric-card__corner {
  display: inline-flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 6px;
 }
 .metric-card__age {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #9aa8ba;
  font-size: 0.73rem;
  font-variant-numeric: tabular-nums;
 }
 .metric-card__state.is-normal {
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(34, 197, 94, 0.1);
  color: #86efac;
 }
 .metric-card__state.is-warning {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.1);
  color: #facc15;
 }
 .metric-card__state.is-critical {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
 }
 .metric-card__value {
  margin: 22px 0 16px;
  overflow: hidden;
  font-size: clamp(1.85rem, 4vw, 2.7rem);
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  line-height: 1;
  color: #f8fafc;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 18px color-mix(in srgb, currentColor 18%, transparent);
 }
 .metric-card__footer {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  color: var(--muted);
  font-size: 0.78rem;
 }
 .metric-card__footer span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 .metric-card__action {
  flex: 0 0 auto;
  color: var(--accent-soft);
  font-weight: 700;
 }
@media (max-width: 680px) {
  .search-box {
    width: 100%;
  }
  .segmented {
    width: 100%;
    overflow-x: auto;
  }
  .view-switch {
    width: 100%;
  }
  .view-switch button {
    flex: 1;
  }
 }
--- a/src/styles/dashboard.css
+++ b/src/styles/dashboard.css
@@ -0,0 +1,411 @@
 .dashboard-shell {
  width: min(1440px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 26px 24px 36px;
 }
 .dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
 }
 .dashboard-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
 }
 .dashboard-search {
  width: min(360px, 100%);
 }
 .dashboard-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
 }
 .dashboard-stat {
  min-height: 112px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(17, 24, 39, 0.78), rgba(2, 6, 23, 0.62)),
    rgba(2, 6, 23, 0.38);
 }
 .dashboard-stat span {
  display: block;
  min-height: 34px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
 }
 .dashboard-stat strong {
  display: block;
  margin-top: 12px;
  font-size: 2rem;
  line-height: 1;
 }
 .dashboard-stat--success {
  border-color: rgba(34, 197, 94, 0.28);
 }
 .dashboard-stat--success strong {
  color: #86efac;
 }
 .dashboard-stat--danger {
  border-color: rgba(239, 68, 68, 0.28);
 }
 .dashboard-stat--danger strong {
  color: #fca5a5;
 }
 .dashboard-stat--warning {
  border-color: rgba(245, 158, 11, 0.3);
 }
 .dashboard-stat--warning strong {
  color: #facc15;
 }
 .dashboard-stat--accent {
  border-color: rgba(212, 165, 116, 0.32);
 }
 .dashboard-stat--accent strong {
  color: var(--accent-soft);
 }
 .edge-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
 }
 .edge-card {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.09), transparent 26%),
    linear-gradient(145deg, rgba(23, 30, 42, 0.92), rgba(4, 9, 16, 0.84)),
    var(--panel-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 34px rgba(0, 0, 0, 0.22);
  transition:
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
 }
 .edge-card:hover {
  border-color: rgba(212, 165, 116, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 44px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
 }
 .edge-card--ok {
  border-color: rgba(34, 197, 94, 0.26);
 }
 .edge-card--warn {
  border-color: rgba(245, 158, 11, 0.3);
 }
 .edge-card--empty {
  border-color: rgba(148, 163, 184, 0.18);
 }
 .edge-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
 }
 .edge-card__logo {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(212, 165, 116, 0.22);
  border-radius: var(--radius);
  background: rgba(2, 6, 23, 0.38);
 }
 .edge-card__logo img {
  width: 46px;
  height: 52px;
  object-fit: contain;
  filter:
    sepia(1)
    saturate(1.25)
    hue-rotate(342deg)
    brightness(0.86)
    contrast(1.1);
 }
 .edge-card__title {
  min-width: 0;
  flex: 1;
 }
 .edge-card__title h2 {
  margin: 0;
  overflow: hidden;
  font-size: 1.08rem;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 .edge-card__title span {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.77rem;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 .edge-state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
 }
 .edge-state--ok {
  color: #22e27f;
 }
 .edge-state--warn,
 .edge-state--empty {
  color: #f2a23a;
 }
 .edge-card__meta {
  margin: 18px 0 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
 }
 .edge-card__meta div {
  min-height: 64px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: var(--radius);
  background: rgba(2, 6, 23, 0.26);
 }
 .edge-card__meta div:last-child {
  grid-column: 1 / -1;
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
 }
 .edge-card__meta dt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
 }
 .edge-card__meta dd {
  margin: 8px 0 0;
  overflow: hidden;
  color: #e5e7eb;
  font-size: 1.02rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 .edge-card__meta div:last-child dd {
  margin: 0;
  font-size: 0.92rem;
 }
 .edge-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
 }
 .edge-card__actions button,
 .edge-card__maintenance button {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius);
  background: rgba(2, 6, 23, 0.24);
  color: #cbd5e1;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
 }
 .edge-card__actions button {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: #b8c3d3;
  font-size: 0.76rem;
  text-align: left;
 }
 .edge-card__actions button:hover,
 .edge-card__maintenance button:hover {
  border-color: rgba(212, 165, 116, 0.42);
  background: rgba(201, 122, 61, 0.1);
  color: #f8fafc;
 }
 .edge-card__maintenance {
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: var(--radius);
  background: rgba(2, 6, 23, 0.2);
 }
 .edge-card__maintenance > span {
  display: block;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
 }
 .edge-card__maintenance div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
 }
 .edge-card__maintenance button {
  min-height: 34px;
  padding: 0 8px;
  font-size: 0.72rem;
 }
 .edge-card__details {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin-top: auto;
  padding: 0 12px;
  border: 1px solid rgba(212, 165, 116, 0.28);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(201, 122, 61, 0.14), rgba(212, 165, 116, 0.06)),
    rgba(201, 122, 61, 0.08);
  color: #f8fafc;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
 }
 .edge-card__details:hover {
  border-color: var(--line-strong);
  background: rgba(201, 122, 61, 0.16);
 }
@media (max-width: 1100px) {
  .dashboard-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .edge-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
 }
@media (max-width: 680px) {
  .dashboard-shell {
    padding: 16px;
  }
  .dashboard-header {
    align-items: stretch;
    flex-direction: column;
  }
  .dashboard-actions,
  .dashboard-search {
    width: 100%;
  }
  .edge-card-grid {
    gap: 16px;
    grid-template-columns: 1fr;
  }
  .edge-card {
    min-height: 0;
    padding: 18px;
  }
  .edge-card__actions,
  .edge-card__maintenance div {
    grid-template-columns: 1fr;
  }
  .dashboard-stats {
    grid-template-columns: 1fr;
  }
  .edge-card__header {
    align-items: flex-start;
  }
  .edge-state {
    margin-left: auto;
  }
 }
--- a/src/styles/detail.css
+++ b/src/styles/detail.css
@@ -0,0 +1,406 @@
 .detail-overview {
  display: grid;
  gap: 18px;
 }
 .chart-section,
 .tags-section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.08), transparent 38%),
    linear-gradient(145deg, rgba(17, 24, 39, 0.9), rgba(2, 6, 23, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 36px rgba(0, 0, 0, 0.28);
 }
 .summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
 }
 .summary-card {
  min-height: 149px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(10, 13, 18, 0.62);
 }
 .summary-card span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
 }
 .summary-card strong {
  display: block;
  margin-top: 18px;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.1;
 }
 .detail-action-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(10, 13, 18, 0.58);
 }
 .detail-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
 }
 .detail-action-grid button {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius);
  background: rgba(2, 6, 23, 0.28);
  color: #cbd5e1;
  cursor: pointer;
 }
 .detail-action-grid button:hover {
  border-color: var(--line-strong);
  background: rgba(201, 122, 61, 0.12);
  color: var(--text);
 }
 .chart-section,
 .tags-section {
  padding: 18px;
  margin-bottom: 18px;
 }
 .indicator-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
 }
 .indicator-summary div {
  position: relative;
  overflow: hidden;
  min-height: 76px;
  padding: 13px;
  border: 1px solid rgba(88, 103, 121, 0.46);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), transparent 34%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.024) 0 1px, transparent 1px 10px),
    rgba(2, 6, 23, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.48);
 }
 .indicator-summary div::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: rgba(212, 165, 116, 0.58);
 }
 .indicator-summary span {
  display: block;
  color: #9aa8ba;
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
 }
 .indicator-summary strong {
  display: block;
  margin-top: 9px;
  color: #f8fafc;
  font-size: 1.65rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
 }
 .chart-section--archive {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
 }
 .equipment-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
 }
 .equipment-frame-shell {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(88, 103, 121, 0.5);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 32%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 11px),
    rgba(2, 6, 23, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.52);
 }
 .equipment-frame-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 12px;
  align-content: center;
  color: #cbd5e1;
  background: rgba(2, 6, 23, 0.74);
 }
 .equipment-frame-loading__ring {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(212, 165, 116, 0.22);
  border-top-color: var(--accent-soft);
  border-radius: 999px;
  animation: equipmentFrameSpin 900ms linear infinite;
 }
 .equipment-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #05080d;
 }
@keyframes equipmentFrameSpin {
  to {
    transform: rotate(360deg);
  }
 }
 .section-header {
  justify-content: space-between;
  margin-bottom: 16px;
 }
 .indicator-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: min(560px, 100%);
 }
 .toolbar {
  margin-bottom: 14px;
 }
 .archive-tag-panel {
  margin-bottom: 14px;
 }
 .archive-tag-panel__toggle {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius);
  background: rgba(2, 6, 23, 0.28);
  color: #cbd5e1;
  cursor: pointer;
  text-align: left;
 }
 .archive-tag-panel__toggle span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
 }
 .archive-tag-panel__toggle strong {
  color: var(--accent-soft);
  font-size: 0.78rem;
  font-weight: 700;
 }
 .archive-tag-panel__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
 }
 .tag-selector {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: var(--radius);
  background: rgba(2, 6, 23, 0.24);
 }
 .tag-selector__header {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(420px, 0.9fr);
  gap: 10px;
 }
 .tag-selector__header span,
 .tag-selector__tools button,
 .selected-tags span {
  color: var(--muted);
  font-size: 0.76rem;
 }
 .tag-selector__header strong {
  color: var(--accent-soft);
  font-size: 0.86rem;
 }
 .tag-selector__tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
 }
 .tag-selector__tools button {
  min-height: 34px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius);
  background: rgba(15, 23, 42, 0.54);
  cursor: pointer;
 }
 .tag-selector__tools button:hover,
 .tag-select-item:hover,
 .tag-select-item--selected {
  border-color: var(--line-strong);
  background: rgba(201, 122, 61, 0.12);
 }
 .selected-tags {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
 }
 .selected-tags span {
  max-width: 100%;
  overflow: hidden;
  padding: 5px 8px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 .tag-select-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 7px;
  padding-right: 2px;
 }
 .tag-select-item {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: var(--radius);
  background: rgba(2, 6, 23, 0.22);
  color: #cbd5e1;
  cursor: pointer;
  text-align: left;
 }
 .tag-select-item span {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 .tag-select-item strong {
  color: #e5e7eb;
  font-size: 0.76rem;
 }
 .tag-select-item--selected span {
  color: #f8fafc;
 }
 .archive-chart {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
 }
 .chart-section--archive .toolbar {
  flex: 0 0 auto;
 }
@media (max-width: 1200px) {
  .summary-grid,
  .detail-action-grid,
  .indicator-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tag-selector__header {
    grid-template-columns: 1fr;
  }
  .indicator-controls {
    min-width: 100%;
    justify-content: flex-start;
  }
 }
@media (max-width: 680px) {
  .summary-grid,
  .detail-action-grid,
  .indicator-summary {
    grid-template-columns: 1fr;
  }
  .tag-selector__tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .indicator-controls {
    flex-direction: column;
    align-items: stretch;
  }
 }
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -0,0 +1,7 @@
@import './tokens.css';
@import './base.css';
@import './components.css';
@import './layout.css';
@import './dashboard.css';
@import './detail.css';
@import './charts.css';
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -0,0 +1,235 @@
 .app-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 264px minmax(0, calc(100dvw - 264px));
 }
 .app-shell--sidebar-collapsed {
  grid-template-columns: 76px minmax(0, calc(100dvw - 76px));
 }
 .sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  padding: 20px 16px;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(15, 17, 21, 0.96), rgba(10, 13, 18, 0.92)),
    var(--panel-strong);
 }
 .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin-bottom: 24px;
 }
 .brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
 }
 .brand strong,
 .cloud-state strong {
  display: block;
  font-size: 0.96rem;
 }
 .brand span,
 .cloud-state span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
 }
 .sidebar-toggle {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius);
  background: rgba(2, 6, 23, 0.28);
  color: #cbd5e1;
  cursor: pointer;
 }
 .sidebar-toggle:hover {
  border-color: var(--line-strong);
  background: rgba(201, 122, 61, 0.12);
 }
 .app-shell--sidebar-collapsed .sidebar {
  padding: 20px 12px;
 }
 .app-shell--sidebar-collapsed .brand {
  justify-content: center;
 }
 .app-shell--sidebar-collapsed .brand img {
  display: none;
 }
 .app-shell--sidebar-collapsed .brand__text,
 .app-shell--sidebar-collapsed .nav-label {
  display: none;
 }
 .app-shell--sidebar-collapsed .sidebar-toggle {
  margin-left: 0;
 }
 .app-shell--sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 0;
 }
 .nav-list {
  display: grid;
  gap: 8px;
 }
 .nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: #cbd5e1;
  text-decoration: none;
 }
 .nav-item--button {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
 }
 .nav-item:hover,
 .nav-item--active {
  border-color: var(--line);
  background: rgba(201, 122, 61, 0.11);
  color: var(--text);
 }
 .sidebar-panel {
  margin-top: 28px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(201, 122, 61, 0.05);
 }
 .cloud-state {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
 }
 .workspace {
  min-width: 0;
  height: 100dvh;
  overflow: auto;
  padding: 24px;
 }
 .workspace--archive,
 .workspace--equipment {
  display: flex;
  flex-direction: column;
  overflow: auto;
 }
 .workspace--equipment {
  overflow: hidden;
  padding: 14px;
 }
 .workspace--equipment .topbar {
  flex: 0 0 auto;
  margin-bottom: 12px;
 }
 .topbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin-bottom: 22px;
 }
 .topbar-actions,
 .toolbar,
 .section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
 }
 .topbar-actions {
  justify-content: flex-end;
 }
 .edge-input input {
  width: 150px;
 }
@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .app-shell--sidebar-collapsed {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
 }
@media (max-width: 680px) {
  .workspace {
    padding: 16px;
  }
  .topbar,
  .section-header {
    align-items: stretch;
    flex-direction: column;
  }
  .topbar-actions,
  .toolbar {
    justify-content: stretch;
  }
  .edge-input,
  .edge-input input {
    width: 100%;
  }
  .nav-list {
    grid-template-columns: 1fr;
  }
 }
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -0,0 +1,22 @@
 :root {
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  color: #f8fafc;
  background: #0a0d12;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --bg: #0a0d12;
  --panel: rgba(17, 24, 39, 0.88);
  --panel-strong: rgba(10, 13, 18, 0.94);
  --line: rgba(212, 165, 116, 0.22);
  --line-strong: rgba(232, 201, 160, 0.48);
  --accent: #c97a3d;
  --accent-soft: #d4a574;
  --text: #f8fafc;
  --muted: #94a3b8;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius: 8px;
 }
--- a/src/utils/format.ts
+++ b/src/utils/format.ts
@@ -0,0 +1,46 @@
 /** Форматирует числовое значение показателя для карточек и мини-плиток. */
 export function formatNumber(value: number): string {
  if (!Number.isFinite(value)) {
    return '—';
  }
  return new Intl.NumberFormat('ru-RU', {
    maximumFractionDigits: Math.abs(value) >= 100 ? 1 : 3,
  }).format(value);
 }
 /** Приводит дату/время к короткому русскому формату для операторского интерфейса. */
 export function formatDateTime(value: string | number | Date): string {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) {
    return '—';
  }
  return new Intl.DateTimeFormat('ru-RU', {
    day: '2-digit',
    month: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  }).format(date);
 }
 /** Конвертирует 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())}`,
    `${pad(date.getHours())}:${pad(date.getMinutes())}`,
  ].join('T');
 }
 /** Преобразует значение datetime-local в ISO-строку для API-запросов. */
 export function toIsoFromInput(value: string): string | undefined {
  if (!value) {
    return undefined;
  }
  const date = new Date(value);
  return Number.isNaN(date.getTime()) ? undefined : date.toISOString();
 }
--- a/src/utils/metricStatus.ts
+++ b/src/utils/metricStatus.ts
@@ -0,0 +1,25 @@
 import type { CurrentItem } from '../api/cloud';
 export type MetricStatus = 'normal' | 'warning' | 'critical';
 export type MetricStatusInfo = {
  status: MetricStatus;
  label: string;
  ageSeconds: number;
 };
 /** Классифицирует показатель по свежести данных до подключения реальных аварийных правил. */
 export function getMetricStatus(item: CurrentItem, now = Date.now()): MetricStatusInfo {
  const measuredAt = new Date(item.time).getTime();
  const ageSeconds = Number.isFinite(measuredAt) ? Math.max(0, Math.round((now - measuredAt) / 1000)) : Number.POSITIVE_INFINITY;
  if (ageSeconds > 300) {
    return { status: 'critical', label: 'нет связи', ageSeconds };
  }
  if (ageSeconds > 30) {
    return { status: 'warning', label: 'устарело', ageSeconds };
  }
  return { status: 'normal', label: 'норма', ageSeconds };
 }
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1,13 @@
 /// <reference types="vite/client" />
 interface ImportMetaEnv {
  readonly VITE_CLOUD_API_URL?: string;
  readonly VITE_TOIR_LIGHT_ORIGIN?: string;
  readonly VITE_KEYCLOAK_URL?: string;
  readonly VITE_KEYCLOAK_REALM?: string;
  readonly VITE_KEYCLOAK_CLIENT_ID?: string;
 }
 interface ImportMeta {
  readonly env: ImportMetaEnv;
 }
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,21 @@
 {
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
 {
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,14 @@
 {
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2023",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "Bundler",
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noEmit": true
  },
  "include": ["vite.config.ts", "eslint.config.js"]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,34 @@
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 export default defineConfig({
  plugins: [react()],
  build: {
    chunkSizeWarningLimit: 700,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules/echarts') || id.includes('node_modules/echarts-for-react')) {
            return 'charts';
          }
          if (
            id.includes('node_modules/react') ||
            id.includes('node_modules/react-dom') ||
            id.includes('node_modules/@tanstack/react-query')
          ) {
            return 'react';
          }
          return undefined;
        },
      },
    },
  },
  server: {
    port: 5173,
  },
  preview: {
    port: 4173,
  },
 });
		`@@ -0,0 +1,2 @@`
							`VITE_CLOUD_API_URL=http://localhost:3100`
							`VITE_DEFAULT_EDGE=edge5`