feat: SAC Telegram settings view, notify_problem severity gate, exclusive docs

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/AppSidebar.vue

@@ -44,6 +44,7 @@ const navItems = [
   { to: "/reports", label: "Отчёты", icon: "▤", match: "prefix" as const },
   { to: "/problems", label: "Проблемы", icon: "!", match: "prefix" as const },
   { to: "/hosts", label: "Хосты", icon: "⬢", match: "exact" as const },
+  { to: "/settings", label: "Настройки", icon: "⚙", match: "exact" as const },
 ];
 
 function isActive(item: (typeof navItems)[number]) {

frontend/src/router.ts

@@ -8,6 +8,7 @@ import ProblemsView from "./views/ProblemsView.vue";
 import ProblemDetailView from "./views/ProblemDetailView.vue";
 import DashboardView from "./views/DashboardView.vue";
 import ReportsView from "./views/ReportsView.vue";
+import SettingsView from "./views/SettingsView.vue";
 
 const router = createRouter({
   history: createWebHistory(),
@@ -21,6 +22,7 @@ const router = createRouter({
     { path: "/hosts", component: HostsView },
     { path: "/problems", component: ProblemsView },
     { path: "/problems/:id", component: ProblemDetailView, props: true },
+    { path: "/settings", component: SettingsView },
   ],
 });
 

frontend/src/views/SettingsView.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="settings-page">
+    <h1>Настройки</h1>
+    <p class="settings-intro">
+      Каналы оповещений SAC. Сейчас конфигурация читается из <code>sac-api.env</code> на сервере;
+      редактирование через UI — в разработке (<code>notif-12</code>).
+    </p>
+
+    <p v-if="error" class="error">{{ error }}</p>
+    <p v-else-if="loading">Загрузка…</p>
+
+    <section v-else-if="data" class="card settings-card">
+      <h2>Telegram</h2>
+      <dl class="settings-dl">
+        <dt>Включён</dt>
+        <dd>{{ data.telegram.enabled ? "да" : "нет" }}</dd>
+        <dt>Настроен (token + chat)</dt>
+        <dd>{{ data.telegram.configured ? "да" : "нет" }}</dd>
+        <dt>Мин. severity</dt>
+        <dd><code>{{ data.telegram.min_severity }}</code></dd>
+        <dt>Bot token</dt>
+        <dd>{{ data.telegram.bot_token_hint ?? "—" }}</dd>
+        <dt>Chat ID</dt>
+        <dd>{{ data.telegram.chat_id_hint ?? "—" }}</dd>
+        <dt>Источник</dt>
+        <dd><code>{{ data.telegram.source }}</code></dd>
+      </dl>
+      <p class="settings-hint">
+        Для <strong>UseSAC=exclusive</strong> на агентах задайте
+        <code>TELEGRAM_ENABLED=true</code> и <code>TELEGRAM_MIN_SEVERITY=warning</code> в
+        <code>sac-api.env</code>, затем перезапустите <code>sac-api</code>.
+      </p>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { apiFetch } from "../api";
+
+interface TelegramSettings {
+  enabled: boolean;
+  configured: boolean;
+  chat_id_hint: string | null;
+  bot_token_hint: string | null;
+  min_severity: string;
+  source: string;
+}
+
+interface NotificationSettings {
+  telegram: TelegramSettings;
+}
+
+const loading = ref(true);
+const error = ref("");
+const data = ref<NotificationSettings | null>(null);
+
+onMounted(async () => {
+  try {
+    data.value = await apiFetch<NotificationSettings>("/api/v1/settings/notifications");
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Ошибка загрузки";
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<style scoped>
+.settings-page {
+  max-width: 42rem;
+}
+
+.settings-intro {
+  color: #9aa4b2;
+  margin-bottom: 1.25rem;
+}
+
+.settings-card h2 {
+  margin-top: 0;
+}
+
+.settings-dl {
+  display: grid;
+  grid-template-columns: 11rem 1fr;
+  gap: 0.5rem 1rem;
+  margin: 0 0 1rem;
+}
+
+.settings-dl dt {
+  color: #9aa4b2;
+}
+
+.settings-dl dd {
+  margin: 0;
+}
+
+.settings-hint {
+  font-size: 0.9rem;
+  color: #9aa4b2;
+  margin: 0;
+}
+</style>