diff --git a/docs/superpowers/plans/2026-07-03-phase1c-react-spa.md b/docs/superpowers/plans/2026-07-03-phase1c-react-spa.md
new file mode 100644
index 0000000..dece3db
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-03-phase1c-react-spa.md
@@ -0,0 +1,854 @@
+# Phase 1C: React SPA — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. UI-задачи ДОПОЛНИТЕЛЬНО используют superpowers:frontend-design для визуального качества. Steps use checkbox (`- [ ]`) syntax.
+
+**Goal:** Полноценный React SPA поверх готового REST API (1B): управление учётками/шаблонами/доменами, импорт зон, просмотр дифа с семантической подсветкой и применение с guard на удаление; в prod вшивается в Go-бинарь.
+
+**Architecture:** `web/` — Vite + React + TS. TanStack Query для server-state, типизированный fetch-клиент к `/api/v1/projects/{DEFAULT_PROJECT_ID}`. shadcn/ui + Tailwind, тёмная «technical console» эстетика. В dev — Vite proxy на Go API; в prod — `vite build` → `dist/` вшивается через `embed.FS` в `internal/web`, отдаётся `cmd/server` с SPA-fallback (API-роуты приоритетны).
+
+**Tech Stack:** Vite, React 18+, TypeScript, react-router-dom, @tanstack/react-query v5, Tailwind CSS v4 (`@tailwindcss/vite`), shadcn/ui, react-hook-form + zod, Vitest + React Testing Library. Пакетный менеджер — **npm**.
+
+## Global Constraints
+
+- Каталог фронта — `web/` в корне репозитория (Go-модуль `github.com/vasyakrg/dns-autoresolver`).
+- `DEFAULT_PROJECT_ID = "00000000-0000-0000-0000-000000000002"` (seed default project; Фаза 1C без логина).
+- API base: `/api/v1/projects/${DEFAULT_PROJECT_ID}`. В dev Vite проксирует `/api` → `http://localhost:8080`.
+- Секрет учётки — только на вход (POST accounts); НИКОГДА не отображается обратно (API его и не возвращает).
+- Apply: чекбокс prune **по умолчанию выключен**; включается только явным действием пользователя с визуальным предупреждением. Тело `POST apply`: `{applyUpdates:true, applyPrunes:<bool>}`.
+- Диф-семантика и цвета (CSS-переменные): add=emerald, update=amber, delete/prune=rose, in-sync=muted, read-only=dimmed.
+- Типографика: НЕ Inter/Roboto/system. UI-гротеск + моноширинный для DNS-данных/дифов.
+- Эстетика: тёмная refined «technical console» (см. spec, секция «Фаза 1C»). UI-задачи используют skill frontend-design.
+- Тесты: каждая задача с логикой завершается зелёным `npm run test` (Vitest) и коммитом. Go-задача — `go test`.
+- Типы фронта (`api/types.ts`) зеркалят Go DTO из `internal/api` (Account/Template/Domain/Changeset/RecordView/ApplyRequest).
+
+---
+
+### Task 1: Scaffold web/ (Vite + Tailwind + shadcn + router + тема)
+
+**Files:**
+- Create: `web/` (Vite react-ts проект), `web/vite.config.ts`, `web/tsconfig*.json`, `web/components.json`
+- Create: `web/src/index.css` (тема, шрифты, diff-переменные), `web/src/main.tsx`, `web/src/App.tsx`
+- Create: `web/src/components/Layout.tsx`
+- Modify: `.gitignore` (web/node_modules, web/dist)
+- Create: `web/src/App.test.tsx` (smoke)
+
+**Interfaces:**
+- Produces: рабочий dev-сервер (`npm run dev`) с proxy; alias `@`; тёмная тема; роутер-каркас со страницами-заглушками; Vitest настроен.
+
+- [ ] **Step 1: Создать Vite-проект и зависимости**
+
+```bash
+cd /Users/vasyansk/Developers/MyProject/IaaC/Realmanual/dns-autoresolver
+npm create vite@latest web -- --template react-ts
+cd web
+npm install
+npm install -D @tailwindcss/vite tailwindcss
+npm install react-router-dom @tanstack/react-query
+npm install react-hook-form zod @hookform/resolvers
+npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom @testing-library/user-event
+```
+
+- [ ] **Step 2: Tailwind v4 + alias + proxy + vitest в конфиге**
+
+`web/src/index.css` (начало):
+```css
+@import "tailwindcss";
+```
+
+`web/vite.config.ts`:
+```ts
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import tailwindcss from "@tailwindcss/vite"
+import path from "path"
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: { "@": path.resolve(__dirname, "./src") },
+  },
+  server: {
+    proxy: {
+      "/api": { target: "http://localhost:8080", changeOrigin: true },
+    },
+  },
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: "./src/test-setup.ts",
+  },
+})
+```
+
+`web/src/test-setup.ts`:
+```ts
+import "@testing-library/jest-dom"
+```
+
+`web/tsconfig.json` — добавить в `compilerOptions`:
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": { "@/*": ["./src/*"] }
+  }
+}
+```
+(и то же `baseUrl`/`paths` в `tsconfig.app.json`, чтобы редактор/сборка резолвили `@`.)
+
+- [ ] **Step 3: Инициализировать shadcn и добавить компоненты**
+
+```bash
+npx shadcn@latest init   # base color: slate; CSS variables: yes; dark mode готов
+npx shadcn@latest add button table dialog input label form card badge checkbox sonner separator textarea select
+```
+
+- [ ] **Step 4: Тема «technical console» + шрифты + diff-переменные**
+
+Дополнить `web/src/index.css` (после shadcn-переменных): подключить характерные шрифты (не Inter/system) и mono, задать тёмную тему по умолчанию (`<html class="dark">` в `index.html`) и diff-семантику:
+```css
+/* Шрифты через Fontsource (устанавливаются): напр. @fontsource-variable/hanken-grotesk и @fontsource-variable/ibm-plex-mono */
+:root {
+  --font-ui: "Hanken Grotesk Variable", ui-sans-serif, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
+
+  --diff-add: oklch(0.72 0.15 155);      /* emerald */
+  --diff-update: oklch(0.80 0.14 85);    /* amber */
+  --diff-delete: oklch(0.68 0.19 20);    /* rose */
+  --diff-insync: oklch(0.55 0.02 260);   /* muted */
+  --diff-readonly: oklch(0.50 0.02 260); /* dimmed */
+}
+body { font-family: var(--font-ui); }
+.font-dns { font-family: var(--font-mono); }
+```
+Установить шрифты:
+```bash
+npm install @fontsource-variable/hanken-grotesk @fontsource-variable/ibm-plex-mono
+```
+и импортировать их в `web/src/main.tsx`.
+Реализатор: подключить skill frontend-design и довести тёмную «technical console» тему (фон-атмосфера, границы, тени) — это центральное впечатление продукта.
+
+- [ ] **Step 5: main.tsx + App.tsx + Layout + роутер-каркас**
+
+`web/src/main.tsx`:
+```tsx
+import "@fontsource-variable/hanken-grotesk"
+import "@fontsource-variable/ibm-plex-mono"
+import "./index.css"
+import React from "react"
+import ReactDOM from "react-dom/client"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { BrowserRouter } from "react-router-dom"
+import { App } from "./App"
+
+const queryClient = new QueryClient()
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </QueryClientProvider>
+  </React.StrictMode>,
+)
+```
+
+`web/src/App.tsx` — роуты со страницами-заглушками (реальные страницы — задачи 3-6):
+```tsx
+import { Routes, Route, Navigate } from "react-router-dom"
+import { Layout } from "@/components/Layout"
+
+function Placeholder({ name }: { name: string }) {
+  return <div className="p-8 text-2xl">{name}</div>
+}
+
+export function App() {
+  return (
+    <Layout>
+      <Routes>
+        <Route path="/" element={<Navigate to="/domains" replace />} />
+        <Route path="/domains" element={<Placeholder name="Domains" />} />
+        <Route path="/domains/:id" element={<Placeholder name="Domain diff" />} />
+        <Route path="/accounts" element={<Placeholder name="Accounts" />} />
+        <Route path="/templates" element={<Placeholder name="Templates" />} />
+      </Routes>
+    </Layout>
+  )
+}
+```
+
+`web/src/components/Layout.tsx` — сайдбар/навигация (Domains/Accounts/Templates), тёмная console-эстетика (реализатор дорабатывает по frontend-design).
+
+- [ ] **Step 6: Smoke-тест + .gitignore**
+
+`.gitignore` (добавить):
+```
+web/node_modules/
+web/dist/
+```
+
+`web/src/App.test.tsx`:
+```tsx
+import { render, screen } from "@testing-library/react"
+import { MemoryRouter } from "react-router-dom"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { App } from "./App"
+
+test("renders navigation and redirects to domains", () => {
+  render(
+    <QueryClientProvider client={new QueryClient()}>
+      <MemoryRouter initialEntries={["/"]}>
+        <App />
+      </MemoryRouter>
+    </QueryClientProvider>,
+  )
+  expect(screen.getByText("Domains")).toBeInTheDocument()
+})
+```
+
+Добавить в `web/package.json` scripts: `"test": "vitest run"`, `"test:watch": "vitest"`.
+
+- [ ] **Step 7: Проверки**
+
+Run: `cd web && npm run test` → PASS (smoke).
+Run: `cd web && npx tsc --noEmit` → без ошибок типов.
+Run: `cd web && npm run build` → `dist/` собирается.
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add web/ .gitignore
+git commit -m "feat(web): scaffold Vite+React+TS, Tailwind v4, shadcn, router, тёмная console-тема"
+```
+
+---
+
+### Task 2: API-клиент, типы и Query-хуки
+
+**Files:**
+- Create: `web/src/lib/config.ts`, `web/src/api/types.ts`, `web/src/api/client.ts`, `web/src/api/client.test.ts`
+- Create: `web/src/hooks/useApi.ts`
+
+**Interfaces:**
+- Consumes: Go DTO из `internal/api` (Account/Template/Domain/Changeset/RecordView/ApplyRequest — сверить с `internal/api/dto.go`, `tenant_dto.go`)
+- Produces:
+  - `DEFAULT_PROJECT_ID`
+  - типы `Account, Template, Domain, RecordView, ChangesetResponse, RecordDTO, ApplyRequest`
+  - `api` — объект с методами: `listAccounts/createAccount/deleteAccount`, `listTemplates/createTemplate/updateTemplate/deleteTemplate`, `listDomains/createDomain/deleteDomain/importZones/setDomainTemplate`, `checkDomain/applyDomain`
+  - хуки: `useAccounts, useCreateAccount, useDeleteAccount, useTemplates, ...`, `useDomains, useImportZones, useSetDomainTemplate, useCheckDomain, useApplyDomain`
+
+- [ ] **Step 1: Написать падающий тест клиента**
+
+`web/src/api/client.test.ts`:
+```ts
+import { describe, it, expect, vi, beforeEach } from "vitest"
+import { api } from "./client"
+import { DEFAULT_PROJECT_ID } from "@/lib/config"
+
+beforeEach(() => { vi.restoreAllMocks() })
+
+function mockFetch(body: unknown, ok = true, status = 200) {
+  return vi.spyOn(globalThis, "fetch").mockResolvedValue({
+    ok, status,
+    json: async () => body,
+    text: async () => JSON.stringify(body),
+  } as Response)
+}
+
+describe("api client", () => {
+  it("lists accounts at project-scoped path", async () => {
+    const spy = mockFetch([{ id: "a1", provider: "selectel", comment: "" }])
+    const accounts = await api.listAccounts()
+    expect(accounts).toHaveLength(1)
+    expect(spy).toHaveBeenCalledWith(
+      `/api/v1/projects/${DEFAULT_PROJECT_ID}/accounts`,
+      expect.objectContaining({ method: "GET" }),
+    )
+  })
+
+  it("sends secret on account creation but path has no secret leakage in response typing", async () => {
+    const spy = mockFetch({ id: "a2", provider: "selectel", comment: "prod" })
+    await api.createAccount({ provider: "selectel", secret: "TOKEN", comment: "prod" })
+    const [, opts] = spy.mock.calls[0]
+    expect((opts as RequestInit).method).toBe("POST")
+    expect(String((opts as RequestInit).body)).toContain("TOKEN")
+  })
+
+  it("throws on non-ok response", async () => {
+    mockFetch({ error: "boom" }, false, 500)
+    await expect(api.listDomains()).rejects.toThrow()
+  })
+
+  it("applies with prune flag", async () => {
+    const spy = mockFetch({ updates: [], prunes: [], readOnly: [], inSyncCount: 0 })
+    await api.applyDomain("d1", { applyUpdates: true, applyPrunes: true })
+    const [url, opts] = spy.mock.calls[0]
+    expect(url).toContain("/domains/d1/apply")
+    expect(String((opts as RequestInit).body)).toContain("applyPrunes")
+  })
+})
+```
+
+- [ ] **Step 2: Запустить — падает**
+
+Run: `cd web && npm run test -- client` → FAIL.
+
+- [ ] **Step 3: config + types + client**
+
+`web/src/lib/config.ts`:
+```ts
+export const DEFAULT_PROJECT_ID = "00000000-0000-0000-0000-000000000002"
+export const API_BASE = `/api/v1/projects/${DEFAULT_PROJECT_ID}`
+```
+
+`web/src/api/types.ts` (зеркало Go DTO — сверить имена полей с internal/api):
+```ts
+export interface Account { id: string; provider: string; comment: string }
+export interface CreateAccountInput { provider: string; secret: string; comment: string }
+
+export interface RecordDTO { type: string; name: string; ttl: number; values: string[] }
+export interface Template { id: string; name: string; records: RecordDTO[] }
+export interface CreateTemplateInput { name: string; records: RecordDTO[] }
+
+export interface Domain {
+  id: string
+  providerAccountId: string
+  zoneName: string
+  zoneId: string
+  templateId: string | null
+}
+export interface CreateDomainInput {
+  providerAccountId: string
+  zoneName: string
+  zoneId: string
+  templateId?: string | null
+}
+
+export interface RecordView {
+  kind: string           // add | update | delete | in_sync
+  type: string
+  name: string
+  desired?: string[]
+  actual?: string[]
+  readOnly: boolean
+}
+export interface ChangesetResponse {
+  updates: RecordView[]
+  prunes: RecordView[]
+  readOnly: RecordView[]
+  inSyncCount: number
+}
+export interface ApplyRequest { applyUpdates: boolean; applyPrunes: boolean }
+```
+
+`web/src/api/client.ts`:
+```ts
+import { API_BASE } from "@/lib/config"
+import type {
+  Account, CreateAccountInput, Template, CreateTemplateInput,
+  Domain, CreateDomainInput, ChangesetResponse, ApplyRequest,
+} from "./types"
+
+async function req<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(`${API_BASE}${path}`, {
+    headers: { "Content-Type": "application/json" },
+    method: "GET",
+    ...init,
+  })
+  if (!res.ok) {
+    let msg = `HTTP ${res.status}`
+    try { const b = await res.json(); if (b?.error) msg = b.error } catch { /* ignore */ }
+    throw new Error(msg)
+  }
+  if (res.status === 204) return undefined as T
+  return (await res.json()) as T
+}
+
+export const api = {
+  listAccounts: () => req<Account[]>("/accounts"),
+  createAccount: (input: CreateAccountInput) =>
+    req<Account>("/accounts", { method: "POST", body: JSON.stringify(input) }),
+  deleteAccount: (id: string) => req<void>(`/accounts/${id}`, { method: "DELETE" }),
+
+  listTemplates: () => req<Template[]>("/templates"),
+  createTemplate: (input: CreateTemplateInput) =>
+    req<Template>("/templates", { method: "POST", body: JSON.stringify(input) }),
+  updateTemplate: (id: string, input: CreateTemplateInput) =>
+    req<Template>(`/templates/${id}`, { method: "PUT", body: JSON.stringify(input) }),
+  deleteTemplate: (id: string) => req<void>(`/templates/${id}`, { method: "DELETE" }),
+
+  listDomains: () => req<Domain[]>("/domains"),
+  createDomain: (input: CreateDomainInput) =>
+    req<Domain>("/domains", { method: "POST", body: JSON.stringify(input) }),
+  deleteDomain: (id: string) => req<void>(`/domains/${id}`, { method: "DELETE" }),
+  importZones: (accountId: string) =>
+    req<Domain[]>(`/accounts/${accountId}/import`, { method: "POST" }),
+  setDomainTemplate: (id: string, templateId: string | null) =>
+    req<Domain>(`/domains/${id}`, { method: "PATCH", body: JSON.stringify({ templateId }) }),
+
+  checkDomain: (id: string) => req<ChangesetResponse>(`/domains/${id}/check`),
+  applyDomain: (id: string, body: ApplyRequest) =>
+    req<ChangesetResponse>(`/domains/${id}/apply`, { method: "POST", body: JSON.stringify(body) }),
+}
+```
+
+> Реализатор: сверь имена JSON-полей ответов (`updates/prunes/readOnly/inSyncCount`, `zoneName/zoneId/templateId`, `providerAccountId`) с фактическими json-тегами в `internal/api/dto.go` и `tenant_dto.go`. При расхождении — правь `types.ts`, тесты самосогласованы.
+
+- [ ] **Step 4: Query-хуки**
+
+`web/src/hooks/useApi.ts` — обёртки TanStack Query. Паттерн (полностью для accounts, аналогично для templates/domains):
+```ts
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { api } from "@/api/client"
+import type { CreateAccountInput, CreateTemplateInput, CreateDomainInput, ApplyRequest } from "@/api/types"
+
+export function useAccounts() {
+  return useQuery({ queryKey: ["accounts"], queryFn: api.listAccounts })
+}
+export function useCreateAccount() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (input: CreateAccountInput) => api.createAccount(input),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["accounts"] }),
+  })
+}
+export function useDeleteAccount() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (id: string) => api.deleteAccount(id),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["accounts"] }),
+  })
+}
+
+export function useTemplates() {
+  return useQuery({ queryKey: ["templates"], queryFn: api.listTemplates })
+}
+export function useCreateTemplate() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (input: CreateTemplateInput) => api.createTemplate(input),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["templates"] }),
+  })
+}
+export function useUpdateTemplate() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, input }: { id: string; input: CreateTemplateInput }) => api.updateTemplate(id, input),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["templates"] }),
+  })
+}
+export function useDeleteTemplate() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (id: string) => api.deleteTemplate(id),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["templates"] }),
+  })
+}
+
+export function useDomains() {
+  return useQuery({ queryKey: ["domains"], queryFn: api.listDomains })
+}
+export function useImportZones() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (accountId: string) => api.importZones(accountId),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["domains"] }),
+  })
+}
+export function useSetDomainTemplate() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, templateId }: { id: string; templateId: string | null }) => api.setDomainTemplate(id, templateId),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["domains"] }),
+  })
+}
+export function useDeleteDomain() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (id: string) => api.deleteDomain(id),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["domains"] }),
+  })
+}
+export function useCheckDomain(id: string) {
+  return useQuery({ queryKey: ["check", id], queryFn: () => api.checkDomain(id), enabled: !!id })
+}
+export function useApplyDomain(id: string) {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (body: ApplyRequest) => api.applyDomain(id, body),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["check", id] }),
+  })
+}
+```
+
+- [ ] **Step 5: Тесты клиента зелёные**
+
+Run: `cd web && npm run test -- client` → PASS (4 теста). `npx tsc --noEmit` → чисто.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add web/src/lib web/src/api web/src/hooks
+git commit -m "feat(web): типизированный API-клиент, типы DTO, TanStack Query хуки"
+```
+
+---
+
+### Task 3: DiffView + DomainDiffPage (центральный экран, apply-guard)
+
+**Files:**
+- Create: `web/src/components/DiffView.tsx`, `web/src/components/DiffView.test.tsx`
+- Create: `web/src/pages/DomainDiffPage.tsx`, `web/src/pages/DomainDiffPage.test.tsx`
+- Modify: `web/src/App.tsx` (роут `/domains/:id`)
+
+**Interfaces:**
+- Consumes: `ChangesetResponse`, `RecordView`, `useCheckDomain`, `useApplyDomain`
+- Produces: `DiffView` (секции Updates/Prunes/ReadOnly + in-sync counter, семантические цвета, mono для записей); `DomainDiffPage` (check + Apply с prune-guard)
+
+**Дизайн:** используй skill frontend-design. Диф — самый выразительный экран: моноширинные записи, цветовые полосы по семантике, чёткая иерархия секций.
+
+- [ ] **Step 1: Падающий тест DiffView**
+
+`web/src/components/DiffView.test.tsx`:
+```tsx
+import { render, screen } from "@testing-library/react"
+import { DiffView } from "./DiffView"
+import type { ChangesetResponse } from "@/api/types"
+
+const cs: ChangesetResponse = {
+  updates: [{ kind: "update", type: "A", name: "www.example.com.", desired: ["1.1.1.1"], actual: ["9.9.9.9"], readOnly: false }],
+  prunes: [{ kind: "delete", type: "A", name: "old.example.com.", actual: ["2.2.2.2"], readOnly: false }],
+  readOnly: [{ kind: "update", type: "NS", name: "example.com.", desired: ["ns1."], actual: ["ns2."], readOnly: true }],
+  inSyncCount: 3,
+}
+
+test("renders all sections with counts", () => {
+  render(<DiffView changeset={cs} />)
+  expect(screen.getByText(/www\.example\.com\./)).toBeInTheDocument()
+  expect(screen.getByText(/old\.example\.com\./)).toBeInTheDocument()
+  expect(screen.getByText(/example\.com\./)).toBeInTheDocument()
+  expect(screen.getByText(/3/)).toBeInTheDocument() // in-sync count
+})
+
+test("marks read-only records", () => {
+  render(<DiffView changeset={cs} />)
+  expect(screen.getByText(/NS/)).toBeInTheDocument()
+})
+```
+
+- [ ] **Step 2: Запустить — падает**
+
+Run: `cd web && npm run test -- DiffView` → FAIL.
+
+- [ ] **Step 3: Реализовать DiffView**
+
+`web/src/components/DiffView.tsx` — секции по `changeset.updates` (amber), `changeset.prunes` (rose), `changeset.readOnly` (dimmed), футер с `inSyncCount`. Каждая запись — mono (`className="font-dns"`), показывает `name`, `type`, desired→actual. Пустые секции скрываются или помечаются «нет изменений». Реальный JSX с семантическими классами/цветами (реализатор доводит визуал по frontend-design; тест выше фиксирует контент).
+
+- [ ] **Step 4: Падающий тест DomainDiffPage (apply-guard)**
+
+`web/src/pages/DomainDiffPage.test.tsx`:
+```tsx
+import { render, screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { MemoryRouter, Routes, Route } from "react-router-dom"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { DomainDiffPage } from "./DomainDiffPage"
+import { api } from "@/api/client"
+import { vi } from "vitest"
+
+function renderPage() {
+  const qc = new QueryClient()
+  return render(
+    <QueryClientProvider client={qc}>
+      <MemoryRouter initialEntries={["/domains/d1"]}>
+        <Routes><Route path="/domains/:id" element={<DomainDiffPage />} /></Routes>
+      </MemoryRouter>
+    </QueryClientProvider>,
+  )
+}
+
+test("apply sends applyPrunes=false by default, true only after opting in", async () => {
+  vi.spyOn(api, "checkDomain").mockResolvedValue({
+    updates: [{ kind: "update", type: "A", name: "a.", desired: ["1"], actual: ["2"], readOnly: false }],
+    prunes: [{ kind: "delete", type: "A", name: "b.", actual: ["3"], readOnly: false }],
+    readOnly: [], inSyncCount: 0,
+  })
+  const applySpy = vi.spyOn(api, "applyDomain").mockResolvedValue({ updates: [], prunes: [], readOnly: [], inSyncCount: 0 })
+  const user = userEvent.setup()
+  renderPage()
+
+  const applyBtn = await screen.findByRole("button", { name: /apply/i })
+  await user.click(applyBtn)
+  await waitFor(() => expect(applySpy).toHaveBeenCalled())
+  expect(applySpy.mock.calls[0][1]).toEqual({ applyUpdates: true, applyPrunes: false })
+
+  // включить prune и применить снова
+  const pruneToggle = screen.getByRole("checkbox", { name: /prune|удал/i })
+  await user.click(pruneToggle)
+  await user.click(screen.getByRole("button", { name: /apply/i }))
+  await waitFor(() => expect(applySpy).toHaveBeenCalledTimes(2))
+  expect(applySpy.mock.calls[1][1]).toEqual({ applyUpdates: true, applyPrunes: true })
+})
+```
+
+- [ ] **Step 5: Реализовать DomainDiffPage**
+
+`web/src/pages/DomainDiffPage.tsx`: `useParams` id → `useCheckDomain(id)` → лоадинг/ошибка/`<DiffView>`. Состояние `applyPrunes` (default `false`) через `checkbox`. Кнопка Apply → `useApplyDomain(id).mutate({applyUpdates:true, applyPrunes})`. Если есть prune-записи и `applyPrunes` включён — визуальное предупреждение (rose) рядом с чекбоксом. Подключить роут в `App.tsx`.
+
+- [ ] **Step 6: Тесты зелёные**
+
+Run: `cd web && npm run test -- DiffView DomainDiffPage` → PASS. `npx tsc --noEmit` чисто.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add web/src/components/DiffView.tsx web/src/components/DiffView.test.tsx web/src/pages/DomainDiffPage.tsx web/src/pages/DomainDiffPage.test.tsx web/src/App.tsx
+git commit -m "feat(web): DiffView + DomainDiffPage с prune-guard по умолчанию выключенным"
+```
+
+---
+
+### Task 4: DomainsPage (список, импорт, привязка шаблона)
+
+**Files:**
+- Create: `web/src/pages/DomainsPage.tsx`, `web/src/pages/DomainsPage.test.tsx`
+- Modify: `web/src/App.tsx` (роут `/domains`)
+
+**Interfaces:**
+- Consumes: `useDomains, useImportZones, useSetDomainTemplate, useDeleteDomain, useAccounts, useTemplates`
+- Produces: `DomainsPage`
+
+- [ ] **Step 1: Падающий тест**
+
+`web/src/pages/DomainsPage.test.tsx`: мокнуть `api.listDomains` (2 домена), `api.listAccounts`, `api.listTemplates`; проверить, что домены отрисованы, ссылка на `/domains/:id` есть, кнопка импорта вызывает `api.importZones` с выбранной учёткой, привязка шаблона вызывает `api.setDomainTemplate`. (Паттерн рендера с провайдерами — как в DomainDiffPage.test.)
+
+- [ ] **Step 2: Запустить — падает** → FAIL.
+
+- [ ] **Step 3: Реализовать DomainsPage**
+
+Таблица доменов (shadcn Table): zoneName (mono), провайдер-учётка, привязанный шаблон (select → `setDomainTemplate`), ссылка «Diff» → `/domains/:id`, удаление. Блок импорта: выбор учётки + кнопка «Импортировать зоны» → `useImportZones`. Пустое состояние. Реализатор доводит визуал (frontend-design).
+
+- [ ] **Step 4: Тесты зелёные** → `cd web && npm run test -- DomainsPage` PASS; `npx tsc --noEmit` чисто.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add web/src/pages/DomainsPage.tsx web/src/pages/DomainsPage.test.tsx web/src/App.tsx
+git commit -m "feat(web): DomainsPage — список, импорт зон, привязка шаблона"
+```
+
+---
+
+### Task 5: AccountsPage (CRUD, secret-форма, инструкция Selectel)
+
+**Files:**
+- Create: `web/src/pages/AccountsPage.tsx`, `web/src/pages/AccountsPage.test.tsx`
+- Modify: `web/src/App.tsx` (роут `/accounts`)
+
+**Interfaces:**
+- Consumes: `useAccounts, useCreateAccount, useDeleteAccount`
+- Produces: `AccountsPage`
+
+- [ ] **Step 1: Падающий тест**
+
+`AccountsPage.test.tsx`: мокнуть `api.listAccounts`; форма создания (provider=selectel, secret, comment) вызывает `api.createAccount` с введённым secret; в списке учёток секрет НЕ отображается (в DOM нет введённого токена после создания). Проверить наличие ссылки-инструкции получения ключа Selectel.
+
+- [ ] **Step 2: Запустить — падает** → FAIL.
+
+- [ ] **Step 3: Реализовать AccountsPage**
+
+Список учёток (провайдер, comment, без секрета). Форма создания (react-hook-form + zod): поле provider (пока `selectel`), поле API-ключа (`type="password"`), comment; блок-подсказка с текстом и ссылкой на страницу получения ключа в панели Selectel (`https://my.selectel.ru` / доки). Submit → `useCreateAccount`. Удаление. Секрет после отправки не хранится/не показывается.
+
+- [ ] **Step 4: Тесты зелёные** → `cd web && npm run test -- AccountsPage` PASS; `npx tsc --noEmit` чисто.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add web/src/pages/AccountsPage.tsx web/src/pages/AccountsPage.test.tsx web/src/App.tsx
+git commit -m "feat(web): AccountsPage — CRUD учёток, secret-форма, инструкция Selectel"
+```
+
+---
+
+### Task 6: TemplatesPage + RecordEditor (CRUD шаблонов)
+
+**Files:**
+- Create: `web/src/pages/TemplatesPage.tsx`, `web/src/pages/TemplatesPage.test.tsx`
+- Create: `web/src/components/RecordEditor.tsx`, `web/src/components/RecordEditor.test.tsx`
+- Modify: `web/src/App.tsx` (роут `/templates`)
+
+**Interfaces:**
+- Consumes: `useTemplates, useCreateTemplate, useUpdateTemplate, useDeleteTemplate`, `RecordDTO`
+- Produces: `RecordEditor` (редактор массива `RecordDTO`), `TemplatesPage`
+
+- [ ] **Step 1: Падающий тест RecordEditor**
+
+`RecordEditor.test.tsx`: контролируемый компонент `value: RecordDTO[]`, `onChange`. Добавление записи (type=A, name, ttl, values), изменение, удаление — вызывает `onChange` с корректным массивом. Поддержка SRV (values = "prio weight port target"). Реальные ассерты на `onChange`.
+
+- [ ] **Step 2: Запустить — падает** → FAIL.
+
+- [ ] **Step 3: Реализовать RecordEditor**
+
+Редактор списка записей: строка = select type (A/AAAA/CNAME/MX/TXT/SRV/NS/SOA), input name (mono), input ttl (number), values (textarea/список; для нескольких значений — по строке). Кнопки add/remove. Контролируемый через `value`/`onChange`. Mono-шрифт для name/values.
+
+- [ ] **Step 4: Падающий тест TemplatesPage**
+
+`TemplatesPage.test.tsx`: мокнуть `api.listTemplates`; создание шаблона (name + записи через RecordEditor) вызывает `api.createTemplate` с `{name, records}`; список отображает шаблоны; удаление вызывает `api.deleteTemplate`.
+
+- [ ] **Step 5: Реализовать TemplatesPage**
+
+Список шаблонов (name, число записей). Форма создания/редактирования: name + `<RecordEditor>`; submit → `useCreateTemplate`/`useUpdateTemplate`. Удаление. Реализатор доводит визуал.
+
+- [ ] **Step 6: Тесты зелёные** → `cd web && npm run test -- RecordEditor TemplatesPage` PASS; `npx tsc --noEmit` чисто; `npm run build` собирается.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add web/src/pages/TemplatesPage.tsx web/src/pages/TemplatesPage.test.tsx web/src/components/RecordEditor.tsx web/src/components/RecordEditor.test.tsx web/src/App.tsx
+git commit -m "feat(web): TemplatesPage + RecordEditor — CRUD шаблонов с редактором записей"
+```
+
+---
+
+### Task 7: Go embed статики + SPA-fallback в cmd/server
+
+**Files:**
+- Create: `internal/web/web.go`, `internal/web/web_test.go`
+- Modify: `cmd/server/main.go` (монтирование статики)
+- Modify: `Makefile` (цель сборки фронта)
+
+**Interfaces:**
+- Consumes: собранный `web/dist`
+- Produces:
+  - `func Handler() (http.Handler, error)` — отдаёт вшитую статику из `web/dist`, с SPA-fallback на `index.html` для не-API, не-файловых путей
+  - монтирование в `cmd/server`: `/api/v1` (chi API) приоритетно, всё прочее → `web.Handler()`
+
+**Замечание:** `embed` требует, чтобы `web/dist` существовал на момент `go build`. Для этого Makefile сначала собирает фронт. В тесте — если `dist` пуст, тест это учитывает (skip или минимальный fixture); предпочтительно собрать фронт перед `go test ./internal/web`.
+
+- [ ] **Step 1: Makefile — сборка фронта**
+
+Добавить в `Makefile`:
+```makefile
+.PHONY: web
+web:
+	cd web && npm ci && npm run build
+
+.PHONY: build-all
+build-all: web build
+```
+
+- [ ] **Step 2: Собрать фронт (нужно для embed)**
+
+Run: `cd web && npm run build` → `web/dist/index.html` и ассеты существуют.
+
+- [ ] **Step 3: Падающий тест web.Handler**
+
+`internal/web/web_test.go`:
+```go
+package web
+
+import (
+	"net/http"
+	"net/http/httptest"
+	"testing"
+)
+
+func TestHandlerServesIndexAndSPAFallback(t *testing.T) {
+	h, err := Handler()
+	if err != nil {
+		t.Fatalf("handler: %v", err)
+	}
+	// корень → 200 и HTML
+	rec := httptest.NewRecorder()
+	h.ServeHTTP(rec, httptest.NewRequest(http.MethodGet, "/", nil))
+	if rec.Code != http.StatusOK {
+		t.Fatalf("root status %d", rec.Code)
+	}
+	// неизвестный клиентский путь → SPA fallback (index.html), не 404
+	rec2 := httptest.NewRecorder()
+	h.ServeHTTP(rec2, httptest.NewRequest(http.MethodGet, "/domains/xyz", nil))
+	if rec2.Code != http.StatusOK {
+		t.Fatalf("SPA fallback status %d", rec2.Code)
+	}
+}
+```
+
+- [ ] **Step 4: Реализовать web.Handler**
+
+`internal/web/web.go`:
+```go
+package web
+
+import (
+	"embed"
+	"io/fs"
+	"net/http"
+	"strings"
+)
+
+//go:embed all:dist
+var distFS embed.FS
+
+// Handler serves the embedded SPA with fallback to index.html for
+// client-side routes (any non-file path that isn't an API route).
+func Handler() (http.Handler, error) {
+	sub, err := fs.Sub(distFS, "dist")
+	if err != nil {
+		return nil, err
+	}
+	fileServer := http.FileServer(http.FS(sub))
+	index, err := fs.ReadFile(sub, "index.html")
+	if err != nil {
+		return nil, err
+	}
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		// существующий файл (ассет) — отдать как есть
+		p := strings.TrimPrefix(r.URL.Path, "/")
+		if p != "" {
+			if f, err := sub.Open(p); err == nil {
+				_ = f.Close()
+				fileServer.ServeHTTP(w, r)
+				return
+			}
+		}
+		// иначе — SPA index
+		w.Header().Set("Content-Type", "text/html; charset=utf-8")
+		_, _ = w.Write(index)
+	}), nil
+}
+```
+
+> `//go:embed all:dist` требует наличия `web/dist`, но пакет лежит в `internal/web`. Реализатор: положи `dist` рядом с `web.go` (симлинк/копия из `web/dist`) ИЛИ измени встраивание, чтобы путь резолвился. Рекомендуемый вариант — цель Makefile копирует `web/dist` в `internal/web/dist` перед `go build` (и `internal/web/dist` в `.gitignore`). Отрази это в Makefile и тесте.
+
+- [ ] **Step 5: Монтирование в cmd/server**
+
+Обновить `cmd/server/main.go`: API-роутер chi под `/api/v1`, а корень отдать `web.Handler()`. Вариант — обернуть: если путь начинается с `/api/`, отдать API-роутеру, иначе — web-хендлеру. Логировать старт. Ошибку `web.Handler()` не считать фатальной для API (можно поднять API без фронта, если dist отсутствует), но логировать.
+
+- [ ] **Step 6: Проверки**
+
+Run: `make web` (собрать фронт) затем `go test ./internal/web/ -v` → PASS.
+Run: `go build ./...` → компилируется.
+Run: `go test ./...` → все Go-пакеты зелёные (store — Docker).
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add internal/web/ cmd/server/main.go Makefile .gitignore
+git commit -m "feat(web,server): embed статики SPA + fallback, монтирование в cmd/server"
+```
+
+---
+
+## Self-Review
+
+- **Spec coverage:** scaffold+тема (T1), API-клиент+типы+хуки (T2), DiffView+DomainDiff с prune-guard (T3 — центральный экран), Domains+импорт+привязка шаблона (T4), Accounts CRUD+secret+Selectel-инструкция (T5), Templates+RecordEditor включая SRV (T6), Go embed+SPA-fallback+wiring (T7). Все экраны и подача из spec-секции 1C покрыты.
+- **Type consistency:** `types.ts` (Account/Template/Domain/RecordView/ChangesetResponse/ApplyRequest) едины в T2-T6; `api`-методы (client.ts) и хуки (useApi.ts) согласованы; `DEFAULT_PROJECT_ID` из config; prune-guard `{applyUpdates:true, applyPrunes:bool}` един в client/hook/DomainDiffPage.
+- **Placeholders:** нет кода-плейсхолдера. Пометки «реализатор доводит визуал (frontend-design)» — намеренные точки эстетической доработки, не логические пробелы; функциональная логика и тесты заданы. Пометка про сверку json-тегов с Go DTO — точка синхронизации с 1B (образцы полей приведены).
+
+## Проверка (end-to-end)
+
+1. `cd web && npm install && npm run test && npx tsc --noEmit && npm run build` — фронт собирается, тесты зелёные.
+2. `make web` копирует/собирает `dist`; `go build ./...` вшивает статику; `go test ./...` зелёно.
+3. Ручной прогон: поднять Postgres, задать env, `go run ./cmd/server`; открыть `http://localhost:8080` — SPA грузится; создать учётку Selectel (secret не виден после), импортировать зоны, привязать шаблон, открыть Diff — секции Updates/Prunes/ReadOnly с цветами; Apply без prune не трогает удаления; включить prune (с предупреждением) — применяет.
+4. Playwright/визуальная проверка на PROD (по правилам validation) — при деплое.