From f3ec6b31ceac395df9bb050c06ed5dd1f1177584 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Sat, 3 Oct 2026 19:50:31 +0700
Subject: [PATCH] =?UTF-8?q?fix(alerts):=20=D1=81=D0=B4=D0=B5=D0=BB=D0=B0?=
 =?UTF-8?q?=D1=82=D1=8C=20=D0=B2=D1=8B=D0=B1=D0=BE=D1=80=20=D0=BE=D0=B1?=
 =?UTF-8?q?=D1=8A=D0=B5=D0=BA=D1=82=D0=BE=D0=B2=20=D0=B4=D0=BE=D1=81=D1=82?=
 =?UTF-8?q?=D1=83=D0=BF=D0=BD=D1=8B=D0=BC=20=D1=81=20=D0=BA=D0=BB=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=B8=D0=B0=D1=82=D1=83=D1=80=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(main)/alerts/page.tsx       | 102 ++++++++++---------------------
 docs/ux-ui-plan.md               |   2 +-
 docs/ux-ui-progress.md           |  10 ++-
 docs/ux-ui-stage-11b.md          |   4 ++
 tests/e2e/alerts-pickers.spec.ts |   6 ++
 5 files changed, 53 insertions(+), 71 deletions(-)
 create mode 100644 tests/e2e/alerts-pickers.spec.ts

diff --git a/app/(main)/alerts/page.tsx b/app/(main)/alerts/page.tsx
index 1cf54ab5..359eb5ac 100644
--- a/app/(main)/alerts/page.tsx
+++ b/app/(main)/alerts/page.tsx
@@ -866,8 +866,6 @@ function ServerObjectCardPicker({
   selected,
   onToggle,
   hideLabel,
-  /** Родитель задаёт высоту и скролл (блок в шите) */
-  listUnconstrained,
 }: {
   label: string
   rows: AlertsServerRow[]
@@ -875,7 +873,6 @@ function ServerObjectCardPicker({
   onToggle: (serverTitle: string) => void
   /** Один общий заголовок снаружи (блок «шагов») */
   hideLabel?: boolean
-  listUnconstrained?: boolean
 }) {
   const [query, setQuery] = useState("")
 
@@ -927,13 +924,11 @@ function ServerObjectCardPicker({
             />
           </div>
           <div
-            role="listbox"
+            role="group"
             aria-label={label}
             className={cn(
               "flex flex-col gap-1 overscroll-contain pr-1 -mr-1",
-              listUnconstrained
-                ? "overflow-visible"
-                : "max-h-[min(40vh,16rem)] overflow-y-auto",
+              "overflow-visible",
             )}
           >
             {filteredRows.length === 0 ? (
@@ -948,8 +943,7 @@ function ServerObjectCardPicker({
                 <button
                   key={`${title}\0${s.host}`}
                   type="button"
-                  role="option"
-                  aria-selected={active}
+                  aria-pressed={active}
                   onClick={() => onToggle(title)}
                   className={cn(
                     "rounded-md border px-2.5 py-1.5 text-left transition-all w-full min-w-0 leading-tight",
@@ -998,14 +992,12 @@ function GreTunnelObjectCardPicker({
   selected,
   onToggle,
   hideLabel,
-  listUnconstrained,
 }: {
   label: string
   rows: AlertsGreTunnelRow[]
   selected: string[]
   onToggle: (targetLabel: string) => void
   hideLabel?: boolean
-  listUnconstrained?: boolean
 }) {
   const [query, setQuery] = useState("")
 
@@ -1059,11 +1051,11 @@ function GreTunnelObjectCardPicker({
             />
           </div>
           <div
-            role="listbox"
+            role="group"
             aria-label={label}
             className={cn(
               "flex flex-col gap-1 overscroll-contain pr-1 -mr-1",
-              listUnconstrained ? "overflow-visible" : "max-h-[min(40vh,16rem)] overflow-y-auto",
+              "overflow-visible",
             )}
           >
             {filteredRows.length === 0 ? (
@@ -1083,8 +1075,7 @@ function GreTunnelObjectCardPicker({
               <button
                 key={`${r.targetLabel}\0${r.remoteAddress}`}
                 type="button"
-                role="option"
-                aria-selected={active}
+                aria-pressed={active}
                 onClick={() => onToggle(r.targetLabel)}
                 className={cn(
                   "rounded-md border px-2.5 py-1.5 text-left transition-all w-full min-w-0 leading-tight",
@@ -1150,7 +1141,6 @@ function StringOptionCardPicker({
   selected,
   onToggle,
   hideLabel,
-  listUnconstrained,
   ruleType,
 }: {
   label: string
@@ -1158,7 +1148,6 @@ function StringOptionCardPicker({
   selected: string[]
   onToggle: (opt: string) => void
   hideLabel?: boolean
-  listUnconstrained?: boolean
   ruleType: AlertType
 }) {
   const [query, setQuery] = useState("")
@@ -1200,11 +1189,11 @@ function StringOptionCardPicker({
             />
           </div>
           <div
-            role="listbox"
+            role="group"
             aria-label={label}
             className={cn(
               "flex flex-col gap-1 overscroll-contain pr-1 -mr-1",
-              listUnconstrained ? "overflow-visible" : "max-h-[min(40vh,16rem)] overflow-y-auto",
+              "overflow-visible",
             )}
           >
             {filtered.length === 0 ? (
@@ -1217,8 +1206,7 @@ function StringOptionCardPicker({
                 <button
                   key={opt}
                   type="button"
-                  role="option"
-                  aria-selected={active}
+                  aria-pressed={active}
                   onClick={() => onToggle(opt)}
                   className={cn(
                     "rounded-md border px-2.5 py-1.5 text-left transition-all w-full min-w-0 leading-tight",
@@ -1258,7 +1246,6 @@ function ConditionOptionCardPicker({
   selected,
   onToggle,
   hideLabel,
-  listUnconstrained,
   ruleType,
 }: {
   label: string
@@ -1266,7 +1253,6 @@ function ConditionOptionCardPicker({
   selected: string[]
   onToggle: (v: string) => void
   hideLabel?: boolean
-  listUnconstrained?: boolean
   ruleType: AlertType
 }) {
   const [query, setQuery] = useState("")
@@ -1307,12 +1293,11 @@ function ConditionOptionCardPicker({
             />
           </div>
           <div
-            role="listbox"
+            role="group"
             aria-label={label}
-            aria-multiselectable
             className={cn(
               "flex flex-col gap-1 overscroll-contain pr-1 -mr-1",
-              listUnconstrained ? "overflow-visible" : "max-h-[min(36vh,14rem)] overflow-y-auto",
+              "overflow-visible",
             )}
           >
             {filtered.length === 0 ? (
@@ -1325,8 +1310,7 @@ function ConditionOptionCardPicker({
                 <button
                   key={opt}
                   type="button"
-                  role="option"
-                  aria-selected={active}
+                  aria-pressed={active}
                   onClick={() => onToggle(opt)}
                   className={cn(
                     "rounded-md border px-2.5 py-1.5 text-left transition-all w-full min-w-0 leading-tight",
@@ -1561,13 +1545,6 @@ function AddRuleSheet({
     ...(initialForm ?? {}),
   }))
   const nameTouchedRef = useRef(Boolean(editRuleId))
-  /** Список объектов не показываем сразу — после фокуса/клика по другому полю шита. Редактирование с выбранными объектами — сразу. */
-  const [objectPickerRevealed, setObjectPickerRevealed] = useState(
-    () => Boolean(editRuleId && (initialForm?.targets?.length ?? 0) > 0),
-  )
-  const revealObjectPicker = useCallback(() => {
-    setObjectPickerRevealed(true)
-  }, [])
   /** Для списка объектов: после выбора сворачиваем список, ниже показываем условия. */
   const [objectExpanded, setObjectExpanded] = useState(
     () => !(initialForm?.targets?.length),
@@ -1743,7 +1720,7 @@ function AddRuleSheet({
         </SheetHeader>
 
         {/* ── scrollable body ── */}
-        <fieldset disabled={saving} className="min-h-0 min-w-0 flex-1 overflow-y-auto px-4 sm:px-6 py-5 flex flex-col gap-5">
+        <fieldset disabled={saving} className="min-h-0 min-w-0 flex-1 overflow-y-auto px-4 sm:px-6 py-5 flex flex-col gap-5 [&>div]:shrink-0">
 
           {/* name */}
           <div className="flex flex-col gap-1.5">
@@ -1755,7 +1732,7 @@ function AddRuleSheet({
                 size="sm"
                 className="h-7 text-[11px] px-2 text-muted-foreground shrink-0"
                 onClick={() => {
-                  revealObjectPicker()
+                  
                   applySuggestedName()
                 }}
               >
@@ -1765,7 +1742,7 @@ function AddRuleSheet({
             <Input
               aria-label="Название правила" placeholder="Подставится при выборе объекта или условия и будет обновляться при каждом шаге"
               value={form.name}
-              onFocus={revealObjectPicker}
+              
               onChange={e => {
                 nameTouchedRef.current = true
                 setForm((f) => ({ ...f, name: e.target.value }))
@@ -1790,10 +1767,11 @@ function AddRuleSheet({
                   <button
                     key={t}
                     type="button"
-                    onFocus={revealObjectPicker}
+                    aria-pressed={active}
+                    
                     onClick={() => {
                       nameTouchedRef.current = false
-                      setObjectPickerRevealed(true)
+                      
                       setForm((f) => ({
                         ...f,
                         type: t,
@@ -1838,14 +1816,9 @@ function AddRuleSheet({
             {allowManualTarget ? (
               <div className="flex flex-col gap-1.5 min-w-0">
                 <FieldLabel>Объект</FieldLabel>
-                {!objectPickerRevealed ? (
-                  <p className="text-[10px] text-muted-foreground leading-snug">
-                    Поле ввода появится после клика или фокуса на названии правила, типе события, серьёзности,
-                    пороге, группе или Chat ID.
-                  </p>
-                ) : (
+                {(
                   <>
-                    <Input
+                    <Input aria-label="Объект правила"
                       value={form.targets[0] ?? ""}
                       onChange={e => {
                         nameTouchedRef.current = false
@@ -1874,12 +1847,7 @@ function AddRuleSheet({
                 <p className="text-[10px] text-muted-foreground leading-snug">
                   Можно выбрать несколько карточек — сработает при событии на любом из них (OR).
                 </p>
-                {!objectPickerRevealed ? (
-                  <p className="text-[10px] text-muted-foreground leading-snug">
-                    Список объектов появится после клика или фокуса на названии правила, типе события, серьёзности,
-                    пороге, группе или Chat ID.
-                  </p>
-                ) : (
+                {(
                   <div
                     className={cn(
                       "rounded-xl border border-border/80 bg-muted/10 overflow-hidden",
@@ -1893,11 +1861,10 @@ function AddRuleSheet({
                       )}
                     >
                       <div className="min-h-0 overflow-hidden">
-                        <div className="p-3 max-h-[min(42vh,17rem)] overflow-y-auto overscroll-contain">
+                        <div className="p-3">
                           {useGreTunnelObjectCards ? (
                             <GreTunnelObjectCardPicker
                               hideLabel
-                              listUnconstrained
                               label="Объект"
                               rows={objectGreCardRows}
                               selected={form.targets}
@@ -1906,7 +1873,6 @@ function AddRuleSheet({
                           ) : useServerObjectCards ? (
                             <ServerObjectCardPicker
                               hideLabel
-                              listUnconstrained
                               label="Объект"
                               rows={objectServerCardRows}
                               selected={form.targets}
@@ -1915,7 +1881,6 @@ function AddRuleSheet({
                           ) : (
                             <StringOptionCardPicker
                               hideLabel
-                              listUnconstrained
                               label="Объект"
                               ruleType={form.type}
                               options={targets}
@@ -1940,7 +1905,7 @@ function AddRuleSheet({
                             server={objectSummaryGre ? undefined : objectSummaryServer}
                             greTunnel={objectSummaryGre}
                             onExpand={() => {
-                              revealObjectPicker()
+                              
                               setObjectExpanded(true)
                             }}
                           />
@@ -1972,10 +1937,9 @@ function AddRuleSheet({
                       "opacity-100 translate-y-0 motion-reduce:transition-none",
                     )}
                   >
-                    <div className="p-3 max-h-[min(40vh,16rem)] overflow-y-auto overscroll-contain">
+                    <div className="p-3">
                       <ConditionOptionCardPicker
                         hideLabel
-                        listUnconstrained
                         label="Условие"
                         ruleType={form.type}
                         conditions={conditions}
@@ -1997,7 +1961,7 @@ function AddRuleSheet({
                 <Input
                   type="number" min="0"
                   value={form.threshold}
-                  onFocus={revealObjectPicker}
+                  
                   onChange={e => {
                     nameTouchedRef.current = false
                     setForm((f) => ({ ...f, threshold: e.target.value }))
@@ -2023,9 +1987,9 @@ function AddRuleSheet({
                   <button
                     key={s}
                     type="button"
-                    onFocus={revealObjectPicker}
+                    
                     onClick={() => {
-                      revealObjectPicker()
+                      
                       setForm((f) => ({ ...f, severity: s }))
                     }}
                     className={cn(
@@ -2056,9 +2020,9 @@ function AddRuleSheet({
                 <button
                   key={c}
                   type="button"
-                  onFocus={revealObjectPicker}
+                  
                   onClick={() => {
-                    revealObjectPicker()
+                    
                     setForm((f) => ({ ...f, cooldown: c }))
                   }}
                   className={cn(
@@ -2085,9 +2049,9 @@ function AddRuleSheet({
                   <button
                     key={o.label}
                     type="button"
-                    onFocus={revealObjectPicker}
+                    
                     onClick={() => {
-                      revealObjectPicker()
+                      
                       setForm((f) => ({ ...f, confirmStabilitySec: o.value }))
                     }}
                     className={cn(
@@ -2116,7 +2080,7 @@ function AddRuleSheet({
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
               )}
               value={form.groupId ?? ""}
-              onFocus={revealObjectPicker}
+              
               onChange={(e) => {
                 const v = e.target.value
                 setForm((f) => ({ ...f, groupId: v ? v : null }))
@@ -2139,7 +2103,7 @@ function AddRuleSheet({
             <FieldLabel>Chat ID — переопределить</FieldLabel>
             <Input
               value={form.chatId}
-              onFocus={revealObjectPicker}
+              
               onChange={e => setForm(f => ({ ...f, chatId: e.target.value }))}
               className="font-mono text-sm"
               placeholder="-100xxxxxxxxxx"
diff --git a/docs/ux-ui-plan.md b/docs/ux-ui-plan.md
index af9159bd..2d8bf7f0 100644
--- a/docs/ux-ui-plan.md
+++ b/docs/ux-ui-plan.md
@@ -4,7 +4,7 @@
 
 ## Актуальная точка продолжения — 2026-10-03
 
-Этап 11Б в работе; последний проверенный блок 11Б.4.4.3.8; System DB принят локально с внешними ограничениями. Следующий блок 11Б.4.4.3.9: исправить семантику выбора объектов/условий и один scroll owner в Alerts Sheet; затем обозначить неподдерживаемое BGP-prefix событие, Releases/probe scheduling и приёмка 11Б/12. Processing recovery требует сценария остановки отправителя.
+Этап 11Б в работе; последний проверенный блок 11Б.4.4.3.9; System DB принят локально с внешними ограничениями. Следующий блок 11Б.4.4.3.10: явно обозначить неподдерживаемый BGP-prefix evaluator в live UI, затем production build накопленных изменений. Далее processing recovery, компактность основной Alerts страницы, Releases/probe scheduling и приёмка 11Б/12.
 
 Реальные pg_dump/pg_restore, PG rollback и остановка UDP worker требуют внешней приёмки. Датированные продолжения ниже — история; точный следующий шаг также указан в начале [журнала](ux-ui-progress.md).
 
diff --git a/docs/ux-ui-progress.md b/docs/ux-ui-progress.md
index 4e5a1371..960fc76a 100644
--- a/docs/ux-ui-progress.md
+++ b/docs/ux-ui-progress.md
@@ -28,7 +28,7 @@
 | 9 | VPN, Firewall и Filters | Завершён в границах локальной приёмки 2026-09-30; блоки 9.1–9.64, ограничения в 9.64 |
 | 10 | Маршрутизация, диагностика, карта и терминал | Завершён в границах локальной приёмки 2026-10-01; блоки 10.1–10.71, внешние ограничения в 10.71 |
 | 11А | Пользователи, контейнеры, сертификаты и резервные копии | Завершён в границах локальной приёмки 2026-10-01; 11А.1–11А.33, внешние ограничения в 11А.33 |
-| 11Б | Оповещения, сбор данных, интеграции, релизы и настройки | В работе: 11Б.1–11Б.4.4.3.8; scheduler и GeoIP приняты локально; NetFlow принят локально; Evolution принят локально; далее общие Settings |
+| 11Б | Оповещения, сбор данных, интеграции, релизы и настройки | В работе: 11Б.1–11Б.4.4.3.9; scheduler и GeoIP приняты локально; NetFlow принят локально; Evolution принят локально; далее общие Settings |
 | 12 | Итоговая доступность, адаптивность, производительность и регрессия | Не начат |
 
 
@@ -36,6 +36,14 @@
 
 
 
+## Блок 11Б.4.4.3.9 — доступный выбор и одна прокрутка формы (2026-10-03)
+
+- Existing object/condition cards теперь native toggle buttons с aria-pressed в labelled group: UI не обещает listbox/option keyboard model без реализации arrow navigation. Type cards тоже сообщают выбранное состояние. Manual object input имеет имя. Список объектов доступен сразу, не требует фокуса на постороннем поле.
+- Удалены listUnconstrained API и все guessed max-h в локальных pickers; один fieldset с min-h-0/flex-1 owns scroll. Header/footer закреплены, блоки тела не сжимаются. Installed ReUI primitives/theme не менялись; Frame checklist применён.
+- Typecheck/lint, 21 browser scenarios picker/rules/preview/queue прошли. 320/1440 keyboard Space/pressed, один scroll owner, доступный footer и отсутствие overflow проверены; screenshot320 просмотрен. Первоначальный прогон нашёл синтаксическую ошибку удаления старого conditional и скрытый initial object picker; обе причины исправлены до успешного повторного прогона.
+- Это локальная приёмка формы, не всей Alerts страницы; BGP-prefix всё ещё не имеет evaluator, основной экран требует компактности и полная внешняя приёмка отсутствует.
+- Следующий точный шаг 11Б.4.4.3.10: явно обозначить неподдерживаемый BGP-prefix evaluator в live UI, затем production build накопленных изменений. Далее processing recovery, компактность основной Alerts страницы, Releases/probe scheduling и приёмка 11Б/12.
+
 ## Блок 11Б.4.4.3.8 — честные backend счётчики каталогов (2026-10-03)
 
 - WireGuard/IPsec/VXLAN/BGP/certificates count берётся только из полного результата с явным failures:[]; containers — из нового typed state с available containers на всех устройствах. Legacy BGP/container list с swallowed errors не используется для count. Known empty даёт 0; timeout/throw/partial/malformed count даёт undefined, который HTTP не выдаёт как числовое значение.
diff --git a/docs/ux-ui-stage-11b.md b/docs/ux-ui-stage-11b.md
index 70c747c1..03987283 100644
--- a/docs/ux-ui-stage-11b.md
+++ b/docs/ux-ui-stage-11b.md
@@ -312,3 +312,7 @@ Dashboard per-request permissions принят локально: mapper parity13
 ### Продолжение 2026-10-03 — 11Б.4.4.3.8
 
 Backend sidebar optional counts не выдают timeout/partial/error как0, используют complete typed catalogs; helper2/HTTP/build/containers/live-maps/lint/browser7 прошли. Сетевой опрос после deadline не отменяется; PG/RouterOS внешняя приёмка нужна. Следующий блок 11Б.4.4.3.9: исправить семантику выбора объектов/условий и один scroll owner в Alerts Sheet; затем обозначить неподдерживаемое BGP-prefix событие, Releases/probe scheduling и приёмка 11Б/12. Processing recovery требует сценария остановки отправителя.
+
+### Продолжение 2026-10-03 — 11Б.4.4.3.9
+
+Picker keyboard semantics/one parent scroll/initial objects accepted locally; browser21/typecheck/lint/ReUI audit passed, 320px screenshot reviewed. Общий Alerts экран не принят. Следующий блок 11Б.4.4.3.10: явно обозначить неподдерживаемый BGP-prefix evaluator в live UI, затем production build накопленных изменений. Далее processing recovery, компактность основной Alerts страницы, Releases/probe scheduling и приёмка 11Б/12.
diff --git a/tests/e2e/alerts-pickers.spec.ts b/tests/e2e/alerts-pickers.spec.ts
new file mode 100644
index 00000000..03bb2fb7
--- /dev/null
+++ b/tests/e2e/alerts-pickers.spec.ts
@@ -0,0 +1,6 @@
+import {test,expect} from "@playwright/test"
+import {emptyAlerts,emptyOutbox} from "./fixtures/alerts"
+for(const width of [320,1440])test("Alerts picker native keyboard selection and one sheet scroll owner/"+width,async({page})=>{
+ await page.setViewportSize({width,height:900});const servers=Array.from({length:24},(_,i)=>({name:"Fixture server "+i,host:"192.0.2."+(i+1),site:"TEST",country:"RU",type:"exit-node"}))
+ await page.route("**/health",r=>r.fulfill({json:{status:"ok"}}));await page.route("**/api/**",r=>{const path=new URL(r.request().url()).pathname;return r.fulfill({json:path==="/api/auth/config"?{required:false}:path==="/api/alerts"?{...emptyAlerts,meta:{...emptyAlerts.meta,servers:servers.map(row=>row.name),serversDetail:servers}}:path==="/api/alerts/outbox"?emptyOutbox:path==="/api/filters/gre-tunnels"?{tunnels:[],failures:[]}:[]})});await page.goto("/alerts");await page.getByRole("button",{name:"Добавить правило",exact:true}).first().click();const dialog=page.getByRole("dialog");const objects=dialog.getByRole("group",{name:"Объект",exact:true});const card=objects.getByRole("button").filter({hasText:"Fixture server 0"});await card.focus();await page.keyboard.press("Space");await expect(card).toHaveAttribute("aria-pressed","true");const conditions=dialog.getByRole("group",{name:"Условие",exact:true});const condition=conditions.getByRole("button").first();await condition.focus();await page.keyboard.press("Space");await expect(condition).toHaveAttribute("aria-pressed","true");await expect(dialog.getByRole("listbox")).toHaveCount(0);const scrollOwners=await dialog.locator("*").evaluateAll(nodes=>nodes.filter(node=>{const style=getComputedStyle(node);return ["auto","scroll"].includes(style.overflowY)&&node.scrollHeight>node.clientHeight+1}).length);expect(scrollOwners).toBe(1);const save=dialog.getByRole("button",{name:"Сохранить правило",exact:true});await save.scrollIntoViewIfNeeded();await expect(save).toBeInViewport();const bounds=await dialog.boundingBox();expect(bounds!.x).toBeGreaterThanOrEqual(0);expect(bounds!.x+bounds!.width).toBeLessThanOrEqual(width);await dialog.screenshot({path:"test-results/alerts-pickers-"+width+".png"})
+})