feat(web): расписание, каналы уведомлений, история проверок, drift-badge

web/src/App.tsx

@@ -3,10 +3,12 @@ import { Routes, Route, Navigate } from "react-router-dom"
 import { ProtectedRoute } from "@/auth/ProtectedRoute"
 import { Layout } from "@/components/Layout"
 import { AccountsPage } from "@/pages/AccountsPage"
+import { ChannelsPage } from "@/pages/ChannelsPage"
 import { DomainDiffPage } from "@/pages/DomainDiffPage"
 import { DomainsPage } from "@/pages/DomainsPage"
 import { LoginPage } from "@/pages/LoginPage"
 import { RegisterPage } from "@/pages/RegisterPage"
+import { SchedulePage } from "@/pages/SchedulePage"
 import { TemplatesPage } from "@/pages/TemplatesPage"
 
 // Every non-auth route shares the same guard + chrome; wrapping here keeps
@@ -29,6 +31,8 @@ export function App() {
       <Route path="/domains/:id" element={<Protected><DomainDiffPage /></Protected>} />
       <Route path="/accounts" element={<Protected><AccountsPage /></Protected>} />
       <Route path="/templates" element={<Protected><TemplatesPage /></Protected>} />
+      <Route path="/schedule" element={<Protected><SchedulePage /></Protected>} />
+      <Route path="/channels" element={<Protected><ChannelsPage /></Protected>} />
     </Routes>
   )
 }

web/src/components/DomainHistory.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from "@testing-library/react"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { AuthProvider } from "@/auth/AuthContext"
+import { api } from "@/api/client"
+import { vi, beforeEach, test, expect } from "vitest"
+import { DomainHistory } from "./DomainHistory"
+
+const PROJECT_ID = "p1"
+
+function renderComponent() {
+  const qc = new QueryClient()
+  return render(
+    <QueryClientProvider client={qc}>
+      <AuthProvider>
+        <DomainHistory domainId="d1" />
+      </AuthProvider>
+    </QueryClientProvider>,
+  )
+}
+
+beforeEach(() => {
+  vi.restoreAllMocks()
+  vi.spyOn(api.auth, "me").mockResolvedValue({
+    user: { id: "u1", email: "a@b.com" },
+    project: { id: PROJECT_ID, name: "Default" },
+  })
+})
+
+test("отрисовывает список проверок со сводкой updates/prunes", async () => {
+  vi.spyOn(api, "domainHistory").mockResolvedValue([
+    { id: "r1", createdAt: "2026-07-01T10:00:00Z", result: { updates: 2, prunes: 1 } },
+    { id: "r2", createdAt: "2026-06-30T10:00:00Z", result: { updates: 0, prunes: 0 } },
+  ])
+
+  renderComponent()
+
+  expect(await screen.findByText(/updates:\s*2/i)).toBeInTheDocument()
+  expect(screen.getByText(/prunes:\s*1/i)).toBeInTheDocument()
+})
+
+test("пустое состояние при отсутствии истории", async () => {
+  vi.spyOn(api, "domainHistory").mockResolvedValue([])
+
+  renderComponent()
+
+  expect(await screen.findByText(/проверок пока нет/i)).toBeInTheDocument()
+})

web/src/components/DomainHistory.tsx

@@ -0,0 +1,66 @@
+import { History, Loader2 } from "lucide-react"
+import { useDomainHistory } from "@/hooks/useApi"
+
+// check_runs.result is a provider-neutral JSON summary written by
+// store.SaveCheckRun (Фаза 3, T1/T4): {"updates": N, "prunes": N}. We read it
+// defensively since it's typed as `object` end-to-end and older/foreign rows
+// could in principle omit a key.
+function summarize(result: object): string {
+  const r = result as Record<string, unknown>
+  const updates = typeof r.updates === "number" ? r.updates : 0
+  const prunes = typeof r.prunes === "number" ? r.prunes : 0
+  return `updates: ${updates} · prunes: ${prunes}`
+}
+
+function formatTimestamp(iso: string): string {
+  const date = new Date(iso)
+  if (Number.isNaN(date.getTime())) return iso
+  return date.toLocaleString("ru-RU", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  })
+}
+
+export function DomainHistory({ domainId }: { domainId: string }) {
+  const history = useDomainHistory(domainId)
+  const runs = history.data ?? []
+
+  return (
+    <section className="flex flex-col gap-2">
+      <header className="flex items-center gap-2 px-0.5">
+        <History className="size-3.5 text-muted-foreground" strokeWidth={1.75} />
+        <h2 className="text-xs font-semibold tracking-wide text-foreground uppercase">
+          История проверок
+        </h2>
+      </header>
+
+      {history.isPending ? (
+        <div className="flex items-center gap-2 rounded-lg border border-border bg-card px-4 py-4 text-sm text-muted-foreground">
+          <Loader2 className="size-4 animate-spin" strokeWidth={1.75} />
+          Загружаю историю…
+        </div>
+      ) : runs.length === 0 ? (
+        <p className="rounded-lg border border-dashed border-border px-3 py-2.5 text-sm text-muted-foreground/70">
+          Проверок пока нет — история появится после первого запуска планировщика.
+        </p>
+      ) : (
+        <div className="flex flex-col divide-y divide-border rounded-lg bg-card ring-1 ring-border">
+          {runs.map((run, i) => (
+            <div
+              key={run.id ?? i}
+              className="flex items-center justify-between gap-3 px-3 py-2 text-sm"
+            >
+              <span className="font-dns text-xs text-muted-foreground">
+                {formatTimestamp(run.createdAt)}
+              </span>
+              <span className="font-dns text-xs text-foreground">{summarize(run.result)}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </section>
+  )
+}

web/src/components/Layout.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react"
 import { NavLink, useLocation, useNavigate } from "react-router-dom"
-import { Globe, LogOut, Users, LayoutTemplate, SquareTerminal } from "lucide-react"
+import { BellRing, CalendarClock, Globe, LogOut, Users, LayoutTemplate, SquareTerminal } from "lucide-react"
 import { useAuth } from "@/auth/AuthContext"
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
@@ -9,6 +9,8 @@ const NAV = [
   { to: "/domains", label: "Domains", icon: Globe },
   { to: "/accounts", label: "Accounts", icon: Users },
   { to: "/templates", label: "Templates", icon: LayoutTemplate },
+  { to: "/schedule", label: "Schedule", icon: CalendarClock },
+  { to: "/channels", label: "Channels", icon: BellRing },
 ] as const
 
 export function Layout({ children }: { children: ReactNode }) {

web/src/components/StatusBadge.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from "@testing-library/react"
+import { test, expect } from "vitest"
+import { StatusBadge } from "./StatusBadge"
+
+test("in_sync — emerald, текст «in sync»", () => {
+  render(<StatusBadge status="in_sync" />)
+  expect(screen.getByText("in sync")).toBeInTheDocument()
+  const badge = screen.getByText("in sync").closest('[data-slot="status-badge"]')
+  expect(badge).toHaveAttribute("data-status", "in_sync")
+  expect(screen.getByTestId("status-dot")).toHaveStyle({ background: "var(--diff-add)" })
+})
+
+test("drift — amber, текст «drift»", () => {
+  render(<StatusBadge status="drift" />)
+  expect(screen.getByText("drift")).toBeInTheDocument()
+  expect(screen.getByTestId("status-dot")).toHaveStyle({ background: "var(--diff-update)" })
+})
+
+test("error — rose, текст «error»", () => {
+  render(<StatusBadge status="error" />)
+  expect(screen.getByText("error")).toBeInTheDocument()
+  expect(screen.getByTestId("status-dot")).toHaveStyle({ background: "var(--diff-delete)" })
+})
+
+test("unknown — muted, текст «unknown»", () => {
+  render(<StatusBadge status="unknown" />)
+  expect(screen.getByText("unknown")).toBeInTheDocument()
+  expect(screen.getByTestId("status-dot")).toHaveStyle({ background: "var(--diff-readonly)" })
+})
+
+test("отсутствие статуса трактуется как unknown", () => {
+  render(<StatusBadge />)
+  expect(screen.getByText("unknown")).toBeInTheDocument()
+})
+
+test("неизвестное значение статуса не падает и рендерит unknown", () => {
+  render(<StatusBadge status="bogus" />)
+  expect(screen.getByText("unknown")).toBeInTheDocument()
+})

web/src/components/StatusBadge.tsx

@@ -0,0 +1,42 @@
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+// Mirrors backend check status (store.Domain.LastCheckStatus / T4-T5):
+// unknown | in_sync | drift | error. Colors reuse the diff-* tokens already
+// established for the domain-diff console so a drifted zone reads the same
+// "amber" whether you're looking at the list or the diff view.
+export type CheckStatus = "unknown" | "in_sync" | "drift" | "error"
+
+const STATUS_META: Record<CheckStatus, { label: string; color: string }> = {
+  in_sync: { label: "in sync", color: "var(--diff-add)" },
+  drift: { label: "drift", color: "var(--diff-update)" },
+  error: { label: "error", color: "var(--diff-delete)" },
+  unknown: { label: "unknown", color: "var(--diff-readonly)" },
+}
+
+function resolveStatus(status?: string): CheckStatus {
+  if (status === "in_sync" || status === "drift" || status === "error") return status
+  return "unknown"
+}
+
+export function StatusBadge({ status, className }: { status?: string; className?: string }) {
+  const resolved = resolveStatus(status)
+  const meta = STATUS_META[resolved]
+
+  return (
+    <Badge
+      variant="outline"
+      data-slot="status-badge"
+      data-status={resolved}
+      className={cn("font-dns gap-1.5 border-border text-foreground", className)}
+    >
+      <span
+        data-testid="status-dot"
+        className="size-1.5 shrink-0 rounded-full"
+        style={{ background: meta.color }}
+        aria-hidden
+      />
+      {meta.label}
+    </Badge>
+  )
+}

web/src/pages/ChannelsPage.test.tsx

@@ -0,0 +1,146 @@
+import { render, screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { MemoryRouter } from "react-router-dom"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { ChannelsPage } from "./ChannelsPage"
+import { AuthProvider } from "@/auth/AuthContext"
+import { api } from "@/api/client"
+import { vi, beforeEach, test, expect } from "vitest"
+import type { Channel } from "@/api/types"
+
+const PROJECT_ID = "p1"
+const channels: Channel[] = [
+  { id: "c1", type: "telegram", config: { chat_id: "123456" }, enabled: true },
+  { id: "c2", type: "webhook", config: { url: "https://hooks.example.com/x" }, enabled: false },
+]
+
+function renderPage() {
+  const qc = new QueryClient()
+  return render(
+    <QueryClientProvider client={qc}>
+      <AuthProvider>
+        <MemoryRouter initialEntries={["/channels"]}>
+          <ChannelsPage />
+        </MemoryRouter>
+      </AuthProvider>
+    </QueryClientProvider>,
+  )
+}
+
+beforeEach(() => {
+  vi.restoreAllMocks()
+  vi.spyOn(api.auth, "me").mockResolvedValue({
+    user: { id: "u1", email: "a@b.com" },
+    project: { id: PROJECT_ID, name: "Default" },
+  })
+  vi.spyOn(api, "listChannels").mockResolvedValue(channels)
+})
+
+test("отрисовывает список каналов без секрета", async () => {
+  renderPage()
+
+  expect(await screen.findByText("telegram")).toBeInTheDocument()
+  expect(screen.getByText("webhook")).toBeInTheDocument()
+  expect(screen.getByText(/123456/)).toBeInTheDocument()
+  expect(screen.getByText(/hooks\.example\.com/)).toBeInTheDocument()
+
+  expect(document.body.textContent).not.toMatch(/bot_token/i)
+  expect(screen.queryByDisplayValue(/123456/)).not.toBeInTheDocument()
+})
+
+test("создание telegram-канала собирает config.chat_id + secret=bot_token", async () => {
+  const createSpy = vi.spyOn(api, "createChannel").mockResolvedValue({
+    id: "c3", type: "telegram", config: { chat_id: "999" }, enabled: true,
+  })
+  const user = userEvent.setup()
+  renderPage()
+
+  await screen.findByText("telegram")
+
+  await user.click(screen.getByRole("combobox", { name: /тип канала/i }))
+  await user.click(await screen.findByRole("option", { name: /telegram/i }))
+
+  await user.type(screen.getByLabelText(/chat id/i), "999")
+  await user.type(screen.getByLabelText(/bot token/i), "SECRET_TOKEN")
+  await user.click(screen.getByRole("button", { name: /добавить канал/i }))
+
+  await waitFor(() =>
+    expect(createSpy).toHaveBeenCalledWith(PROJECT_ID, {
+      type: "telegram",
+      config: { chat_id: "999" },
+      secret: "SECRET_TOKEN",
+    }),
+  )
+
+  expect(document.body.textContent).not.toMatch(/SECRET_TOKEN/)
+})
+
+test("создание webhook-канала собирает config.url без секрета", async () => {
+  const createSpy = vi.spyOn(api, "createChannel").mockResolvedValue({
+    id: "c4", type: "webhook", config: { url: "https://hooks.example.com/y" }, enabled: true,
+  })
+  const user = userEvent.setup()
+  renderPage()
+
+  await screen.findByText("telegram")
+
+  await user.click(screen.getByRole("combobox", { name: /тип канала/i }))
+  await user.click(await screen.findByRole("option", { name: /webhook/i }))
+
+  await user.type(screen.getByLabelText(/url/i), "https://hooks.example.com/y")
+  await user.click(screen.getByRole("button", { name: /добавить канал/i }))
+
+  await waitFor(() =>
+    expect(createSpy).toHaveBeenCalledWith(PROJECT_ID, {
+      type: "webhook",
+      config: { url: "https://hooks.example.com/y" },
+      secret: "",
+    }),
+  )
+})
+
+test("удаление канала вызывает api.deleteChannel", async () => {
+  const deleteSpy = vi.spyOn(api, "deleteChannel").mockResolvedValue(undefined)
+  vi.spyOn(window, "confirm").mockReturnValue(true)
+  const user = userEvent.setup()
+  renderPage()
+
+  await screen.findByText("telegram")
+
+  await user.click(screen.getByRole("button", { name: /удалить канал telegram/i }))
+
+  await waitFor(() => expect(deleteSpy).toHaveBeenCalledWith(PROJECT_ID, "c1"))
+})
+
+test("кнопка «Тест» вызывает api.testChannel", async () => {
+  const testSpy = vi.spyOn(api, "testChannel").mockResolvedValue({ status: "ok" })
+  const user = userEvent.setup()
+  renderPage()
+
+  await screen.findByText("telegram")
+
+  const testButtons = screen.getAllByRole("button", { name: /тест/i })
+  await user.click(testButtons[0])
+
+  await waitFor(() => expect(testSpy).toHaveBeenCalledWith(PROJECT_ID, "c1"))
+})
+
+test("ошибка тест-отправки отображается как alert", async () => {
+  vi.spyOn(api, "testChannel").mockRejectedValue(new Error("Канал не отвечает"))
+  const user = userEvent.setup()
+  renderPage()
+
+  await screen.findByText("telegram")
+
+  const testButtons = screen.getAllByRole("button", { name: /тест/i })
+  await user.click(testButtons[0])
+
+  expect(await screen.findByRole("alert")).toHaveTextContent("Канал не отвечает")
+})
+
+test("пустое состояние при отсутствии каналов", async () => {
+  vi.spyOn(api, "listChannels").mockResolvedValue([])
+  renderPage()
+
+  expect(await screen.findByText(/каналов пока нет/i)).toBeInTheDocument()
+})

web/src/pages/ChannelsPage.tsx

@@ -0,0 +1,342 @@
+import { useId, useState } from "react"
+import { Controller, useForm, useWatch } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+import { Inbox, Loader2, Plus, Send, Trash2 } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Field,
+  FieldContent,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldSet,
+} from "@/components/ui/field"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { useChannels, useCreateChannel, useDeleteChannel, useTestChannel } from "@/hooks/useApi"
+import { cn } from "@/lib/utils"
+import type { Channel, CreateChannelInput } from "@/api/types"
+
+const CHANNEL_TYPES = [
+  { value: "telegram", label: "Telegram" },
+  { value: "webhook", label: "Webhook" },
+] as const
+
+const channelFormSchema = z
+  .object({
+    type: z.enum(["telegram", "webhook"]),
+    chatId: z.string(),
+    botToken: z.string(),
+    url: z.string(),
+  })
+  .superRefine((values, ctx) => {
+    if (values.type === "telegram") {
+      if (!values.chatId.trim()) {
+        ctx.addIssue({ code: "custom", path: ["chatId"], message: "Укажите chat_id" })
+      }
+      if (!values.botToken.trim()) {
+        ctx.addIssue({ code: "custom", path: ["botToken"], message: "Укажите bot token" })
+      }
+      return
+    }
+    if (!values.url.trim()) {
+      ctx.addIssue({ code: "custom", path: ["url"], message: "Укажите URL" })
+      return
+    }
+    try {
+      new URL(values.url)
+    } catch {
+      ctx.addIssue({ code: "custom", path: ["url"], message: "Некорректный URL, включая протокол http(s)://" })
+    }
+  })
+
+type ChannelForm = z.infer<typeof channelFormSchema>
+
+const EMPTY_FORM: ChannelForm = { type: "telegram", chatId: "", botToken: "", url: "" }
+
+// Channel.config is a generic `object` end-to-end (T5/T7) — it never carries
+// the secret (bot_token/signing key), only the public half (chat_id/url), so
+// rendering every key is always safe to show in the list.
+function formatConfig(config: object): string {
+  const entries = Object.entries(config as Record<string, unknown>)
+  if (entries.length === 0) return "—"
+  return entries.map(([k, v]) => `${k}=${String(v)}`).join(" · ")
+}
+
+function ChannelForm({ onCreated }: { onCreated: () => void }) {
+  const createChannel = useCreateChannel()
+  const typeFieldId = useId()
+  const chatIdFieldId = useId()
+  const botTokenFieldId = useId()
+  const urlFieldId = useId()
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<ChannelForm>({
+    resolver: zodResolver(channelFormSchema),
+    defaultValues: EMPTY_FORM,
+  })
+
+  const type = useWatch({ control, name: "type" })
+
+  function onSubmit(values: ChannelForm) {
+    const input: CreateChannelInput =
+      values.type === "telegram"
+        ? { type: "telegram", config: { chat_id: values.chatId.trim() }, secret: values.botToken.trim() }
+        : { type: "webhook", config: { url: values.url.trim() }, secret: "" }
+
+    createChannel.mutate(input, {
+      onSuccess: () => {
+        reset(EMPTY_FORM)
+        onCreated()
+      },
+    })
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      noValidate
+      className="flex flex-col gap-4 rounded-xl border border-border bg-card/60 p-4"
+    >
+      <FieldSet className="gap-3">
+        <FieldGroup className="flex-row flex-wrap items-start gap-3">
+          <Field className="w-40">
+            <FieldLabel htmlFor={typeFieldId}>Тип канала</FieldLabel>
+            <FieldContent>
+              <Controller
+                control={control}
+                name="type"
+                render={({ field }) => (
+                  <Select
+                    items={CHANNEL_TYPES}
+                    value={field.value}
+                    onValueChange={(v) => field.onChange(v)}
+                  >
+                    <SelectTrigger id={typeFieldId} aria-label="Тип канала" className="w-full">
+                      <SelectValue placeholder="Выберите тип" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {CHANNEL_TYPES.map((item) => (
+                        <SelectItem key={item.value} value={item.value}>
+                          {item.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+            </FieldContent>
+          </Field>
+
+          {type === "telegram" ? (
+            <>
+              <Field className="w-56">
+                <FieldLabel htmlFor={chatIdFieldId}>Chat ID</FieldLabel>
+                <FieldContent>
+                  <Controller
+                    control={control}
+                    name="chatId"
+                    render={({ field }) => (
+                      <Input
+                        {...field}
+                        id={chatIdFieldId}
+                        placeholder="123456789"
+                        className="font-dns"
+                        aria-invalid={!!errors.chatId}
+                      />
+                    )}
+                  />
+                  <FieldError errors={[errors.chatId]} />
+                </FieldContent>
+              </Field>
+              <Field className="w-64">
+                <FieldLabel htmlFor={botTokenFieldId}>Bot token</FieldLabel>
+                <FieldContent>
+                  <Controller
+                    control={control}
+                    name="botToken"
+                    render={({ field }) => (
+                      <Input
+                        {...field}
+                        id={botTokenFieldId}
+                        type="password"
+                        autoComplete="off"
+                        placeholder="123456:ABC-DEF…"
+                        className="font-dns"
+                        aria-invalid={!!errors.botToken}
+                      />
+                    )}
+                  />
+                  <FieldError errors={[errors.botToken]} />
+                </FieldContent>
+              </Field>
+            </>
+          ) : (
+            <Field className="w-80">
+              <FieldLabel htmlFor={urlFieldId}>URL</FieldLabel>
+              <FieldContent>
+                <Controller
+                  control={control}
+                  name="url"
+                  render={({ field }) => (
+                    <Input
+                      {...field}
+                      id={urlFieldId}
+                      placeholder="https://hooks.example.com/…"
+                      className="font-dns"
+                      aria-invalid={!!errors.url}
+                    />
+                  )}
+                />
+                <FieldError errors={[errors.url]} />
+              </FieldContent>
+            </Field>
+          )}
+        </FieldGroup>
+      </FieldSet>
+
+      <div className="flex items-center justify-between gap-3 border-t border-border pt-3">
+        {createChannel.isError && (
+          <span role="alert" className="font-dns text-xs text-destructive">
+            {createChannel.error.message}
+          </span>
+        )}
+        <Button type="submit" disabled={createChannel.isPending} className="ml-auto">
+          {createChannel.isPending ? (
+            <Loader2 className="size-4 animate-spin" strokeWidth={1.75} />
+          ) : (
+            <Plus className="size-4" strokeWidth={1.75} />
+          )}
+          Добавить канал
+        </Button>
+      </div>
+    </form>
+  )
+}
+
+export function ChannelsPage() {
+  const channels = useChannels()
+  const deleteChannel = useDeleteChannel()
+  const testChannel = useTestChannel()
+  const [testingId, setTestingId] = useState<string | null>(null)
+
+  const channelList = channels.data ?? []
+
+  function onDelete(channel: Channel) {
+    if (window.confirm(`Удалить канал «${channel.type}»? Действие необратимо.`)) {
+      deleteChannel.mutate(channel.id)
+    }
+  }
+
+  function onTest(channel: Channel) {
+    setTestingId(channel.id)
+    testChannel.mutate(channel.id)
+  }
+
+  return (
+    <div className="mx-auto flex max-w-4xl flex-col gap-6 px-6 py-8">
+      <header className="flex flex-col gap-1">
+        <span className="font-dns text-[11px] tracking-wider text-muted-foreground uppercase">
+          notifications
+        </span>
+        <h1 className="text-xl font-semibold tracking-tight text-foreground">Каналы уведомлений</h1>
+      </header>
+
+      <ChannelForm onCreated={() => setTestingId(null)} />
+
+      {deleteChannel.isError && (
+        <span role="alert" className="font-dns text-xs text-destructive">
+          {deleteChannel.error.message}
+        </span>
+      )}
+      {testChannel.isError && (
+        <span role="alert" className="font-dns text-xs text-destructive">
+          {testChannel.error.message}
+        </span>
+      )}
+
+      {channelList.length === 0 ? (
+        <div className="flex flex-col items-center gap-2 rounded-xl border border-dashed border-border px-4 py-12 text-center text-sm text-muted-foreground">
+          <Inbox className="size-6" strokeWidth={1.5} />
+          Каналов пока нет — добавьте Telegram или Webhook выше.
+        </div>
+      ) : (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Тип</TableHead>
+              <TableHead>Конфигурация</TableHead>
+              <TableHead>Статус</TableHead>
+              <TableHead className="text-right">Действия</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {channelList.map((c) => (
+              <TableRow key={c.id}>
+                <TableCell className="font-dns">{c.type}</TableCell>
+                <TableCell className="font-dns text-xs text-muted-foreground">
+                  {formatConfig(c.config)}
+                </TableCell>
+                <TableCell>
+                  <span
+                    className={cn(
+                      "font-dns text-xs",
+                      c.enabled ? "text-foreground" : "text-muted-foreground",
+                    )}
+                  >
+                    {c.enabled ? "включён" : "выключен"}
+                  </span>
+                </TableCell>
+                <TableCell className="text-right">
+                  <div className="flex justify-end gap-1.5">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => onTest(c)}
+                      disabled={testChannel.isPending && testingId === c.id}
+                    >
+                      {testChannel.isPending && testingId === c.id ? (
+                        <Loader2 className="size-3.5 animate-spin" strokeWidth={1.75} />
+                      ) : (
+                        <Send className="size-3.5" strokeWidth={1.75} />
+                      )}
+                      Тест
+                    </Button>
+                    <Button
+                      variant="destructive"
+                      size="icon-sm"
+                      aria-label={`Удалить канал ${c.type}`}
+                      onClick={() => onDelete(c)}
+                      disabled={deleteChannel.isPending}
+                    >
+                      <Trash2 className="size-3.5" strokeWidth={1.75} />
+                    </Button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </div>
+  )
+}

web/src/pages/DomainDiffPage.test.tsx

@@ -28,6 +28,7 @@ beforeEach(() => {
     user: { id: "u1", email: "a@b.com" },
     project: { id: PROJECT_ID, name: "Default" },
   })
+  vi.spyOn(api, "domainHistory").mockResolvedValue([])
 })
 
 test("apply sends applyPrunes=false by default, true only after opting in", async () => {

web/src/pages/DomainDiffPage.tsx

@@ -2,6 +2,7 @@ import { useId, useState } from "react"
 import { useParams } from "react-router-dom"
 import { AlertTriangle, Loader2, Play, RefreshCw, TriangleAlert } from "lucide-react"
 import { DiffView } from "@/components/DiffView"
+import { DomainHistory } from "@/components/DomainHistory"
 import { Button } from "@/components/ui/button"
 import { Checkbox } from "@/components/ui/checkbox"
 import { Label } from "@/components/ui/label"
@@ -137,6 +138,8 @@ export function DomainDiffPage() {
           </div>
         </>
       )}
+
+      <DomainHistory domainId={id} />
     </div>
   )
 }

web/src/pages/DomainsPage.test.tsx

@@ -18,8 +18,8 @@ const templates: Template[] = [
   { id: "t2", name: "Minimal", records: [], version: 1 },
 ]
 const domains: Domain[] = [
-  { id: "d1", providerAccountId: "acc1", zoneName: "example.com.", zoneId: "z1", templateId: null },
+  { id: "d1", providerAccountId: "acc1", zoneName: "example.com.", zoneId: "z1", templateId: null, lastCheckStatus: "drift" },
-  { id: "d2", providerAccountId: "acc2", zoneName: "test.org.", zoneId: "z2", templateId: "t1" },
+  { id: "d2", providerAccountId: "acc2", zoneName: "test.org.", zoneId: "z2", templateId: "t1", lastCheckStatus: "in_sync" },
 ]
 
 function renderPage() {
@@ -108,3 +108,12 @@ test("пустое состояние при отсутствии доменов
 
   expect(await screen.findByText(/доменов пока нет/i)).toBeInTheDocument()
 })
+
+test("drift-badge отражает lastCheckStatus каждого домена", async () => {
+  renderPage()
+
+  await screen.findByText("example.com.")
+
+  expect(screen.getByText("drift")).toBeInTheDocument()
+  expect(screen.getByText("in sync")).toBeInTheDocument()
+})

web/src/pages/DomainsPage.tsx

@@ -2,6 +2,7 @@ import { useState } from "react"
 import { Link } from "react-router-dom"
 import { Inbox, Loader2, Trash2, Upload } from "lucide-react"
 import { Button } from "@/components/ui/button"
+import { StatusBadge } from "@/components/StatusBadge"
 import {
   Select,
   SelectContent,
@@ -134,6 +135,7 @@ export function DomainsPage() {
               <TableHead>Zone</TableHead>
               <TableHead>Учётка</TableHead>
               <TableHead>Шаблон</TableHead>
+              <TableHead>Статус</TableHead>
               <TableHead className="text-right">Действия</TableHead>
             </TableRow>
           </TableHeader>
@@ -167,6 +169,9 @@ export function DomainsPage() {
                       </SelectContent>
                     </Select>
                   </TableCell>
+                  <TableCell>
+                    <StatusBadge status={d.lastCheckStatus} />
+                  </TableCell>
                   <TableCell className="text-right">
                     <div className="flex justify-end gap-1.5">
                       <Button variant="outline" size="sm" render={<Link to={`/domains/${d.id}`} />}>

web/src/pages/SchedulePage.test.tsx

@@ -0,0 +1,83 @@
+import { render, screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { MemoryRouter } from "react-router-dom"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { SchedulePage } from "./SchedulePage"
+import { AuthProvider } from "@/auth/AuthContext"
+import { api } from "@/api/client"
+import { vi, beforeEach, test, expect } from "vitest"
+
+const PROJECT_ID = "p1"
+
+function renderPage() {
+  const qc = new QueryClient()
+  return render(
+    <QueryClientProvider client={qc}>
+      <AuthProvider>
+        <MemoryRouter initialEntries={["/schedule"]}>
+          <SchedulePage />
+        </MemoryRouter>
+      </AuthProvider>
+    </QueryClientProvider>,
+  )
+}
+
+beforeEach(() => {
+  vi.restoreAllMocks()
+  vi.spyOn(api.auth, "me").mockResolvedValue({
+    user: { id: "u1", email: "a@b.com" },
+    project: { id: PROJECT_ID, name: "Default" },
+  })
+  vi.spyOn(api, "getSchedule").mockResolvedValue({ intervalSeconds: 120, enabled: true })
+})
+
+test("показывает текущий интервал и enabled", async () => {
+  renderPage()
+
+  const intervalInput = await screen.findByLabelText(/интервал/i)
+  expect(intervalInput).toHaveValue(120)
+  expect(screen.getByRole("checkbox", { name: /включ/i })).toBeChecked()
+})
+
+test("сохранение вызывает updateSchedule с новыми значениями", async () => {
+  const updateSpy = vi.spyOn(api, "putSchedule").mockResolvedValue({ intervalSeconds: 300, enabled: false })
+  const user = userEvent.setup()
+  renderPage()
+
+  const intervalInput = await screen.findByLabelText(/интервал/i)
+  await user.clear(intervalInput)
+  await user.type(intervalInput, "300")
+  await user.click(screen.getByRole("checkbox", { name: /включ/i }))
+  await user.click(screen.getByRole("button", { name: /сохранить/i }))
+
+  await waitFor(() =>
+    expect(updateSpy).toHaveBeenCalledWith(PROJECT_ID, { intervalSeconds: 300, enabled: false }),
+  )
+})
+
+test("валидация: интервал меньше 60 блокирует сохранение", async () => {
+  const updateSpy = vi.spyOn(api, "putSchedule").mockResolvedValue({ intervalSeconds: 120, enabled: true })
+  const user = userEvent.setup()
+  renderPage()
+
+  const intervalInput = await screen.findByLabelText(/интервал/i)
+  await user.clear(intervalInput)
+  await user.type(intervalInput, "30")
+  await user.click(screen.getByRole("button", { name: /сохранить/i }))
+
+  expect(await screen.findByRole("alert")).toHaveTextContent(/60/)
+  expect(updateSpy).not.toHaveBeenCalled()
+})
+
+test("ошибка сохранения отображается пользователю", async () => {
+  vi.spyOn(api, "putSchedule").mockRejectedValue(new Error("Не удалось сохранить расписание"))
+  const user = userEvent.setup()
+  renderPage()
+
+  const intervalInput = await screen.findByLabelText(/интервал/i)
+  await user.clear(intervalInput)
+  await user.type(intervalInput, "180")
+  await user.click(screen.getByRole("button", { name: /сохранить/i }))
+
+  expect(await screen.findByRole("alert")).toHaveTextContent("Не удалось сохранить расписание")
+})

web/src/pages/SchedulePage.tsx

@@ -0,0 +1,145 @@
+import { useId } from "react"
+import { Controller, useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+import { Loader2, Save } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Field,
+  FieldContent,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldSet,
+} from "@/components/ui/field"
+import { useSchedule, useUpdateSchedule } from "@/hooks/useApi"
+import type { Schedule } from "@/api/types"
+
+const scheduleFormSchema = z.object({
+  intervalSeconds: z
+    .number({ error: "Укажите интервал в секундах" })
+    .int("Интервал — целое число секунд")
+    .min(60, "Интервал не может быть меньше 60 секунд"),
+  enabled: z.boolean(),
+})
+
+type ScheduleForm = z.infer<typeof scheduleFormSchema>
+
+const DEFAULT_SCHEDULE: Schedule = { intervalSeconds: 300, enabled: false }
+
+// Rendered only once the current schedule is loaded, so useForm's
+// defaultValues (a one-time snapshot in react-hook-form) are always seeded
+// with the real values — no reset()-after-fetch race between the query and
+// the form's first render.
+function ScheduleFormCard({ initial }: { initial: Schedule }) {
+  const updateSchedule = useUpdateSchedule()
+  const intervalFieldId = useId()
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ScheduleForm>({
+    resolver: zodResolver(scheduleFormSchema),
+    defaultValues: initial,
+  })
+
+  function onSubmit(values: ScheduleForm) {
+    updateSchedule.mutate(values)
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      noValidate
+      className="flex flex-col gap-4 rounded-xl border border-border bg-card/60 p-4"
+    >
+      <FieldSet className="gap-3">
+        <FieldGroup className="gap-3">
+          <Field className="sm:max-w-56">
+            <FieldLabel htmlFor={intervalFieldId}>Интервал (секунд)</FieldLabel>
+            <FieldContent>
+              <Controller
+                control={control}
+                name="intervalSeconds"
+                render={({ field }) => (
+                  <Input
+                    {...field}
+                    id={intervalFieldId}
+                    type="number"
+                    min={60}
+                    step={1}
+                    className="font-dns"
+                    aria-invalid={!!errors.intervalSeconds}
+                    onChange={(e) => field.onChange(e.target.valueAsNumber)}
+                  />
+                )}
+              />
+              <FieldError errors={[errors.intervalSeconds]} />
+            </FieldContent>
+          </Field>
+
+          <Field>
+            <Controller
+              control={control}
+              name="enabled"
+              render={({ field }) => (
+                <Label className="flex items-center gap-2.5 text-sm font-normal">
+                  <Checkbox
+                    aria-label="Включено"
+                    checked={field.value}
+                    onCheckedChange={(v) => field.onChange(v === true)}
+                  />
+                  Автоматические проверки включены
+                </Label>
+              )}
+            />
+          </Field>
+        </FieldGroup>
+      </FieldSet>
+
+      <div className="flex items-center justify-between gap-3 border-t border-border pt-3">
+        {updateSchedule.isError && (
+          <span role="alert" className="font-dns text-xs text-destructive">
+            {updateSchedule.error.message}
+          </span>
+        )}
+        <Button type="submit" disabled={updateSchedule.isPending} className="ml-auto">
+          {updateSchedule.isPending ? (
+            <Loader2 className="size-4 animate-spin" strokeWidth={1.75} />
+          ) : (
+            <Save className="size-4" strokeWidth={1.75} />
+          )}
+          Сохранить расписание
+        </Button>
+      </div>
+    </form>
+  )
+}
+
+export function SchedulePage() {
+  const schedule = useSchedule()
+
+  return (
+    <div className="mx-auto flex max-w-2xl flex-col gap-6 px-6 py-8">
+      <header className="flex flex-col gap-1">
+        <span className="font-dns text-[11px] tracking-wider text-muted-foreground uppercase">
+          scheduler
+        </span>
+        <h1 className="text-xl font-semibold tracking-tight text-foreground">Расписание проверок</h1>
+      </header>
+
+      {schedule.isPending ? (
+        <div className="flex items-center gap-2 rounded-lg border border-border bg-card px-4 py-8 text-sm text-muted-foreground">
+          <Loader2 className="size-4 animate-spin" strokeWidth={1.75} />
+          Загружаю расписание…
+        </div>
+      ) : (
+        <ScheduleFormCard initial={schedule.data ?? DEFAULT_SCHEDULE} />
+      )}
+    </div>
+  )
+}