From 1ee453b3b6b97770c89366cba41d9a577f0f9cc9 Mon Sep 17 00:00:00 2001
From: Dmitriy Petrov <floplopru@gmail.com>
Date: Thu, 20 Aug 2026 01:55:50 +0300
Subject: [PATCH] Add failover setting step controls

---
 src/shared/versions.ts                        |  4 +--
 src/web/features/failover/FailoverFeature.tsx | 17 +++++++----
 src/web/styles/features/failover.css          |  7 +++--
 test/web/failover-feature-contract.test.js    |  8 +++--
 test/web/style-boundaries.test.js             | 29 ++++++++++---------
 test/web/style-source.js                      |  5 ++--
 6 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/src/shared/versions.ts b/src/shared/versions.ts
index b7e7d61..183dad5 100644
--- a/src/shared/versions.ts
+++ b/src/shared/versions.ts
@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.30.1',
-  gatewayClient: '0.31.1',
+  macClient: '0.30.2',
+  gatewayClient: '0.31.2',
   gatewayBackend: '0.31.0',
 });
 
diff --git a/src/web/features/failover/FailoverFeature.tsx b/src/web/features/failover/FailoverFeature.tsx
index 9d01a73..5981337 100644
--- a/src/web/features/failover/FailoverFeature.tsx
+++ b/src/web/features/failover/FailoverFeature.tsx
@@ -76,17 +76,19 @@ function pulseNumber(event: FormEvent<HTMLInputElement>) {
   ], { duration: 320, easing: 'cubic-bezier(0.16, 1, 0.3, 1)' });
 }
 
-function FailoverNumberSetting({ before, after, value, min, max, disabled, ariaLabel, onChange }: {
+function FailoverNumberSetting({ before, after, value, min, max, step = 10, disabled, ariaLabel, onChange }: {
   before: string;
   after: string;
   value: number;
   min: number;
   max: number;
+  step?: number;
   disabled?: boolean;
   ariaLabel: string;
   onChange: (value: number) => void;
 }) {
-  return <label className="client-failover-number-setting">
+  const set = (next: number) => onChange(Math.min(max, Math.max(min, next)));
+  return <div className="client-failover-number-setting">
     <span>{before}</span>
     <input
       className="client-failover-number-input"
@@ -104,7 +106,11 @@ function FailoverNumberSetting({ before, after, value, min, max, disabled, ariaL
       }}
     />
     <span>{after}</span>
-  </label>;
+    <span className="client-failover-number-steps">
+      <button type="button" aria-label={`${ariaLabel}: уменьшить на ${step}`} disabled={disabled || value <= min} onClick={() => set(value - step)}>−{step}</button>
+      <button type="button" aria-label={`${ariaLabel}: увеличить на ${step}`} disabled={disabled || value >= max} onClick={() => set(value + step)}>+{step}</button>
+    </span>
+  </div>;
 }
 
 const reasonLabel = (reason: string | null) => ({
@@ -513,6 +519,7 @@ export function FailoverPanel({
               after="секунд"
               min={2}
               max={30}
+              step={1}
               ariaLabel={`Время ожидания ответа: ${service?.label || 'сервис недоступен'}`}
               value={seconds(check.timeoutMs)}
               disabled={blocked || !draft.enabled}
@@ -587,8 +594,8 @@ export function FailoverPanel({
         </header>
         <div className="client-failover-protection-options">
           <FailoverNumberSetting before="Оставаться на резервном не меньше" after="секунд" min={60} max={86400} ariaLabel="Минимальное время на резервном канале" value={seconds(draft.minimumReserveMs)} disabled={blocked || !draft.enabled} onChange={(value) => update({ minimumReserveMs: value * 1_000 })} />
-          <FailoverNumberSetting before="Отправлять основной в карантин после" after="повторных сбоев" min={2} max={10} ariaLabel="Количество повторных сбоев" value={draft.flapProtection.count} disabled={blocked || !draft.enabled} onChange={(value) => update({ flapProtection: { ...draft.flapProtection, count: value } })} />
-          <FailoverNumberSetting before="Считать повторными сбои за последние" after="часов" min={1} max={72} ariaLabel="Период повторных сбоев" value={Math.round(draft.flapProtection.windowMs / 3_600_000)} disabled={blocked || !draft.enabled} onChange={(value) => update({ flapProtection: { ...draft.flapProtection, windowMs: value * 3_600_000 } })} />
+          <FailoverNumberSetting before="Отправлять основной в карантин после" after="повторных сбоев" min={2} max={10} step={1} ariaLabel="Количество повторных сбоев" value={draft.flapProtection.count} disabled={blocked || !draft.enabled} onChange={(value) => update({ flapProtection: { ...draft.flapProtection, count: value } })} />
+          <FailoverNumberSetting before="Считать повторными сбои за последние" after="часов" min={1} max={72} step={1} ariaLabel="Период повторных сбоев" value={Math.round(draft.flapProtection.windowMs / 3_600_000)} disabled={blocked || !draft.enabled} onChange={(value) => update({ flapProtection: { ...draft.flapProtection, windowMs: value * 3_600_000 } })} />
           <FailoverNumberSetting before="Не возвращаться на основной после карантина" after="минут" min={10} max={10080} ariaLabel="Длительность карантина основного канала" value={Math.round(draft.flapProtection.quarantineMs / 60_000)} disabled={blocked || !draft.enabled} onChange={(value) => update({ flapProtection: { ...draft.flapProtection, quarantineMs: value * 60_000 } })} />
         </div>
       </section>
diff --git a/src/web/styles/features/failover.css b/src/web/styles/features/failover.css
index 01e435b..b3eb505 100644
--- a/src/web/styles/features/failover.css
+++ b/src/web/styles/features/failover.css
@@ -41,8 +41,11 @@
 .client-failover-picker-list button[aria-disabled='true'] { color: color-mix(in oklch, var(--client-muted) 58%, transparent); cursor: default; text-shadow: none; }
 .client-failover-number-setting { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .55ch; min-height: 42px; color: var(--client-muted); font: var(--type-body); letter-spacing: var(--type-body-tracking); text-transform: var(--type-body-transform); cursor: text; }
 .client-failover-number-setting input { flex: 0 0 auto; min-width: 2ch; min-height: 1.35em; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--client-text); font: var(--type-item-title); font-variant-numeric: var(--numeric-tabular); letter-spacing: var(--type-item-title-tracking); text-align: center; text-transform: var(--type-item-title-transform); appearance: textfield; transition: color 220ms ease, text-shadow 220ms ease; }
+.client-failover-number-setting input::-webkit-inner-spin-button, .client-failover-number-setting input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
 .client-failover-number-setting input:disabled { color: var(--client-muted); opacity: .45; }
-.client-failover-global-actions > button:disabled { color: var(--client-muted); cursor: default; opacity: .42; }
+.client-failover-number-steps { display: inline-flex; align-items: baseline; gap: 10px; margin-left: .65ch; }
+.client-failover-number-steps button { min-width: 34px; padding: 5px 0; border: 0; background: transparent; color: var(--client-accent); font: var(--type-control); font-variant-numeric: var(--numeric-tabular); letter-spacing: var(--type-control-tracking); text-transform: var(--type-control-transform); cursor: pointer; }
+.client-failover-number-steps button:disabled, .client-failover-global-actions > button:disabled { color: var(--client-muted); cursor: default; opacity: .42; }
 .client-failover-services { display: grid; gap: 9px; margin: 0; padding: 0; border: 0; }
 .client-failover-services legend { width: 100%; margin-bottom: 14px; padding: 0; }
 .client-failover-section-header { display: grid; gap: 4px; margin-bottom: 12px; }
@@ -84,7 +87,7 @@
 .client-failover-actions button { padding: 7px 0; border: 0; background: transparent; color: var(--client-accent); font: var(--type-control); letter-spacing: var(--type-control-tracking); text-transform: var(--type-control-transform); cursor: pointer; }
 .client-failover-actions small { flex-basis: 100%; margin-top: -14px; color: var(--client-muted); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: var(--type-label-transform); }
 .client-failover-actions button:disabled { color: var(--client-muted); cursor: default; opacity: .45; }
-.client-failover-actions button:focus-visible, .client-failover-service-editor button:focus-visible, .client-failover-discard button:focus-visible, .client-failover-global-actions > button:focus-visible { outline: 2px solid var(--client-accent); outline-offset: 2px; }
+.client-failover-actions button:focus-visible, .client-failover-service-editor button:focus-visible, .client-failover-discard button:focus-visible, .client-failover-global-actions > button:focus-visible, .client-failover-number-steps button:focus-visible { outline: 2px solid var(--client-accent); outline-offset: 2px; }
 .client-failover-form input:not(.client-failover-number-input):focus-visible { outline: 0; border-bottom-color: var(--client-accent); box-shadow: 0 1px 0 color-mix(in oklch, var(--client-accent) 60%, transparent); text-shadow: 0 0 9px color-mix(in oklch, var(--client-accent) 34%, transparent); }
 .client-failover-number-input:focus-visible { outline: 0; color: var(--client-accent); text-shadow: 0 0 9px color-mix(in oklch, var(--client-accent) 38%, transparent); }
 @keyframes failover-service-in { from { opacity: 0; filter: blur(5px); transform: translateY(-4px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
diff --git a/test/web/failover-feature-contract.test.js b/test/web/failover-feature-contract.test.js
index 322927d..b8c8205 100644
--- a/test/web/failover-feature-contract.test.js
+++ b/test/web/failover-feature-contract.test.js
@@ -32,7 +32,9 @@ test('failover settings use Harbor switches, a two-column channel table and plai
   assert.match(feature, /Не переключать во время активной работы[\s\S]*Переключать после[\s\S]*без активной передачи данных[\s\S]*Считать работу активной при скорости от/);
   assert.match(feature, /Когда переключать канал[\s\S]*сначала подтверждает сбой[\s\S]*Защита от частых переключений[\s\S]*остаётся на резервном/);
   assert.match(feature, /client-failover-number-input[\s\S]*Math\.max\(2, String\(value\)\.length \+ 0\.6\)/);
-  assert.doesNotMatch(feature, /client-failover-number-steps|уменьшить на|увеличить на|advancedOpen|advancedClosing|toggleAdvanced|aria-controls="client-failover-advanced-options"/);
+  assert.match(feature, /client-failover-number-steps[\s\S]*уменьшить на[\s\S]*увеличить на/);
+  assert.match(feature, /before="Ждать ответ не дольше"[\s\S]*step=\{1\}/);
+  assert.doesNotMatch(feature, /advancedOpen|advancedClosing|toggleAdvanced|aria-controls="client-failover-advanced-options"/);
   assert.match(feature, /label="Добавить проверку"/);
   assert.match(feature, /Новый HTTPS-сервис…/);
   assert.match(feature, /Убрать проверку:/);
@@ -54,7 +56,9 @@ test('failover settings use Harbor switches, a two-column channel table and plai
   assert.match(styles, /failover-service-out 300ms[\s\S]*@media \(prefers-reduced-motion: reduce\)/);
   assert.match(styles, /\.client-failover-number-setting \{[^}]*display:\s*flex[^}]*flex-wrap:\s*wrap/);
   assert.match(styles, /\.client-failover-number-setting input \{[^}]*border:\s*0[^}]*text-align:\s*center[^}]*appearance:\s*textfield/);
-  assert.doesNotMatch(styles, /client-failover-number-steps|client-failover-advanced|failover-advanced-in|failover-advanced-out/);
+  assert.match(styles, /input::\-webkit-inner-spin-button[\s\S]*input::\-webkit-outer-spin-button[^}]*\-webkit-appearance:\s*none/);
+  assert.match(styles, /\.client-failover-number-steps \{[^}]*display:\s*inline-flex/);
+  assert.doesNotMatch(styles, /client-failover-advanced|failover-advanced-in|failover-advanced-out/);
 });
 
 test('runtime status keeps fixed geometry and explains active traffic without motion dependence', () => {
diff --git a/test/web/style-boundaries.test.js b/test/web/style-boundaries.test.js
index 1973999..5829168 100644
--- a/test/web/style-boundaries.test.js
+++ b/test/web/style-boundaries.test.js
@@ -39,26 +39,26 @@ const expectedImports = [
 const sha256 = (value) => crypto.createHash('sha256').update(value).digest('hex');
 const acceptedLedger = {
   counts: {
-    cascadeEdges: 1014,
+    cascadeEdges: 1017,
     customProperties: 106,
-    declarations: 4063,
+    declarations: 4079,
     important: 0,
     keyframes: 50,
     media: 17,
-    rules: 1100,
-    variableReferences: 1036,
+    rules: 1103,
+    variableReferences: 1041,
   },
   hashes: {
-    cascadeEdges: '4fe4311542670277b77fffa4a14f7de1353f3f98f676fa07f3a5a202917cc14b',
+    cascadeEdges: 'baefd0b3605b82e516a6b4f76b047a8ec2f4a2e0a96d4cf77dec266f9c601e54',
     customProperties: 'fd6f16069f9fe3526f09d4d574431ddae67150d8e7a8a40e04c9fd2d179ec7ac',
-    declarations: 'e6695bd8f63a3ae1842683ff3346136a07e99d1c893cd8a7c6eaf8e50796d1fd',
+    declarations: 'bc841497c24f42e41ba053ac1c6bebd556596031402f0b1709e5bef3dd179358',
     duplicateKeyframes: '4f53cda18c2baa0c0354bb5f9a3ecbe5ed12ab4d8e11ba873c2f11161202b945',
     duplicateSelectors: '8982145dba05b33bf1c93b2d54cfbe76305b276ff3c657aa020144016ada5848',
     keyframes: 'af4b9ae18d070fd2462a9b050293f3821bf5017c6e7cc53bbe18dc826f0fe3b9',
-    ruleDeclarationSequences: '58fb23b3f9c488cb68d6b453951667dd55a8cdec31d3bababb8966997bf18812',
-    selectors: '33a03f858af784d6047bb33b0a4b2fd715da1ecad798554cf223d0d2389004ca',
-    variableReferences: 'cc85eef6fd25e1865151fec7ee090d3fbb7fa5769d89daf39ba1feb9cbe3f544',
-    witnesses: '88d2ed948d207fb7372770f803374ec6e0505c34bd59c580f9e1e568e0cdd60d',
+    ruleDeclarationSequences: 'b1498de2ccc1305f4df4e8a916ea9eacefde930408196fb8a037ea4e8e36fc01',
+    selectors: 'c1ed45252baf6856f1179b8459cdbc44754bdb412b7738e62df13d2364aa202d',
+    variableReferences: '41d6e2fdb0e0261bb003ce09b24cbeac54bd75874a4e94864386b6e72987bb22',
+    witnesses: '835e479222ea1447f21dc95be3d7e1b03c0225e1aa536ad0ab262f60cbd5e13c',
   },
 };
 
@@ -211,7 +211,7 @@ test('client typography uses the shared semantic scale outside the token owner',
 
 test('accepted stylesheet has pinned declaration, selector, keyframe, variable, and cascade ledgers', () => {
   const witnesses = readStyleWitnesses(root);
-  assert.equal(witnesses.length, 1050);
+  assert.equal(witnesses.length, 1080);
   assert.equal(witnesses.filter((witness) => witness.unknown || witness.ancestorUnknown).length, 0);
   const ledger = createStyleLedger(readStyleSource(root), { witnesses });
   assert.deepEqual(ledger.counts, acceptedLedger.counts);
@@ -324,6 +324,7 @@ test('selector proof uses the observed level-four grammar and exact specificity'
     ['.client-shell:has(.harbor-brand.is-gateway-active)', [{ a: 0, b: 3, c: 0 }]],
     ['.client-instructions-toggle:not(.client-devices-toggle):not(.client-diagnostics-toggle)', [{ a: 0, b: 3, c: 0 }]],
     [".client-power[aria-checked='true']::before", [{ a: 0, b: 2, c: 1 }]],
+    ['.client-failover-number-setting input::-webkit-inner-spin-button', [{ a: 0, b: 1, c: 2 }]],
     ['.client-instruction-block:nth-child(n)', [{ a: 0, b: 2, c: 0 }]],
     ['.client-confirmation-actions button:hover:not(:disabled), #root', [
       { a: 0, b: 3, c: 1 },
@@ -407,8 +408,8 @@ test('main owns one public stylesheet and the regrouped production CSS is determ
   assert.equal((main.match(/import ['"][^'"]+\.css['"]/g) || []).length, 1);
 
   const assets = fs.readdirSync(path.join(root, 'dist/assets')).filter((file) => file.endsWith('.css'));
-  assert.deepEqual(assets, ['index-DL7r5BkR.css']);
+  assert.deepEqual(assets, ['index-DsxsLlC8.css']);
   const built = fs.readFileSync(path.join(root, 'dist/assets', assets[0]));
-  assert.equal(built.byteLength, 154336);
-  assert.equal(sha256(built), '5a7e01e9723a683a904c09a7c77b956ae0769b2153ef34ca7d29fb7f36833b36');
+  assert.equal(built.byteLength, 154992);
+  assert.equal(sha256(built), '8e1947e4aa98297130ba9e5f097b8341ecdd89a80faaade55abf907b2796823b');
 });
diff --git a/test/web/style-source.js b/test/web/style-source.js
index 52a616d..9e3bd9b 100644
--- a/test/web/style-source.js
+++ b/test/web/style-source.js
@@ -481,7 +481,7 @@ const OBSERVED_PROPERTIES = new Set(`
 --client-accent --client-accent-soft --client-bg --client-border --client-control
 --client-delete-strike-y --client-device-chart-height --client-device-copy-color --client-rule-drag-y
 --client-muted --client-panel --client-power-top --client-text --client-work-height
---harbor-connect --harbor-gateway --harbor-word -webkit-backdrop-filter
+--harbor-connect --harbor-gateway --harbor-word -webkit-appearance -webkit-backdrop-filter
 -webkit-text-fill-color align-content align-items align-self animation
 animation-duration animation-name animation-timing-function appearance backdrop-filter
 background background-color border border-bottom border-bottom-color border-collapse
@@ -520,7 +520,8 @@ const PROPERTY_FAMILIES = new Map([
 const SUPPORTED_SELECTOR_NODES = new Set(['attribute', 'class', 'combinator', 'id', 'pseudo', 'selector', 'tag', 'universal']);
 const SUPPORTED_COMBINATORS = new Set([' ', '+', '>']);
 const SUPPORTED_PSEUDOS = new Set([
-  ':-webkit-autofill', '::-webkit-scrollbar', '::after', '::before', '::marker', '::placeholder',
+  ':-webkit-autofill', '::-webkit-inner-spin-button', '::-webkit-outer-spin-button', '::-webkit-scrollbar',
+  '::after', '::before', '::marker', '::placeholder',
   '::view-transition-group', '::view-transition-new', '::view-transition-old', ':active', ':disabled',
   ':first-child', ':focus', ':focus-visible', ':focus-within', ':has', ':hover', ':last-child', ':not',
   ':nth-child', ':root',