Merge pull request lidge-jun#739 from lidge-jun/stack/gui-codex-pool-hydration

fix(gui): gate Codex pool writes until hydrated and ignore stale strategy polls

Author: Wibias

gui/src/clamp-draft.ts

@@ -0,0 +1,15 @@
+/** Clamp a numeric draft string into [min, max] after applying delta (for NumberStepper). */
+export function clampNumberDraft(
+  raw: string,
+  delta: number,
+  min: number,
+  max: number,
+  step = 1,
+): string {
+  const trimmed = raw.trim();
+  const parsed = trimmed === "" ? NaN : Number(trimmed);
+  const base = Number.isFinite(parsed) ? parsed : min;
+  const next = Math.min(max, Math.max(min, base + delta));
+  // Keep one decimal for GiB-style steps; integers otherwise.
+  return step < 1 ? String(Math.round(next * 10) / 10) : String(Math.round(next));
+}

gui/src/codex-auto-switch.ts

@@ -39,6 +39,14 @@ export function autoSwitchThresholdReadDisposition(
   return editing || saving ? "defer" : "apply";
 }
 
+/** Accept bare threshold numbers or a full /active payload. */
+export function extractAutoSwitchThresholdPayload(value: unknown): unknown {
+  if (value && typeof value === "object" && value !== null && "autoSwitchThreshold" in value) {
+    return (value as { autoSwitchThreshold: unknown }).autoSwitchThreshold;
+  }
+  return value;
+}
+
 export interface AutoSwitchTogglePlan {
   threshold: number;
   lastEnabled: number;

gui/src/components/AccountPoolStrategyControls.tsx

@@ -3,6 +3,9 @@ import {
   ACCOUNT_POOL_STRATEGIES,
   type AccountPoolStrategy,
 } from "../account-pool-strategy";
+import { clampNumberDraft } from "../clamp-draft";
+import { NumberStepper } from "./NumberStepper";
+import { Select } from "../ui";
 
 const STRATEGY_LABEL_KEYS = {
   quota: "accountPool.strategyQuota",
@@ -24,7 +27,8 @@ export interface AccountPoolStrategyControlsProps {
   strategyLabelHidden?: boolean;
   onStrategyChange(strategy: AccountPoolStrategy): void;
   onStickyDraftChange(value: string): void;
-  onStickyCommit(): void;
+  /** Optional draft overrides React state when steppers commit in the same tick as a draft change. */
+  onStickyCommit(nextDraft?: string): void;
 }
 
 /**
@@ -42,57 +46,73 @@ export default function AccountPoolStrategyControls({
   onStickyCommit,
 }: AccountPoolStrategyControlsProps) {
   const t = useT();
+  const strategyOptions = ACCOUNT_POOL_STRATEGIES.map((value) => ({
+    value,
+    label: t(STRATEGY_LABEL_KEYS[value]),
+  }));
+
   return (
-    <div style={{ marginTop: 12 }}>
-      <label className="field" style={{ display: "block" }} htmlFor={strategySelectId}>
-        <span className={strategyLabelHidden ? "sr-only" : "field-label"}>
+    <div className="account-pool-strategy-controls">
+      <div className="field">
+        <span
+          className={strategyLabelHidden ? "sr-only" : "field-label"}
+          id={`${strategySelectId}-label`}
+        >
           {t("accountPool.strategy")}
         </span>
-        <select
+        <Select
           id={strategySelectId}
-          className="input"
           value={strategy}
+          options={strategyOptions}
           disabled={disabled}
-          aria-label={t("accountPool.strategy")}
-          onChange={(event) => {
-            onStrategyChange(event.target.value as AccountPoolStrategy);
-          }}
-        >
-          {ACCOUNT_POOL_STRATEGIES.map((value) => (
-            <option key={value} value={value}>
-              {t(STRATEGY_LABEL_KEYS[value])}
-            </option>
-          ))}
-        </select>
-      </label>
-      <div className="card-sub" style={{ marginTop: 4 }}>
-        {t("accountPool.strategyHint")}
+          label={t("accountPool.strategy")}
+          style={{ width: "100%", display: "block" }}
+          onChange={(next) => onStrategyChange(next as AccountPoolStrategy)}
+        />
       </div>
+      <div className="card-sub">{t("accountPool.strategyHint")}</div>
       {strategy === "round-robin" && (
-        <label className="field" style={{ display: "block", marginTop: 12 }} htmlFor={stickyInputId}>
+        <label className="field" htmlFor={stickyInputId}>
           <span className="field-label">{t("accountPool.stickyLimit")}</span>
-          <input
-            id={stickyInputId}
-            className="input mono"
-            type="number"
-            min={1}
-            max={100}
-            step={1}
-            inputMode="numeric"
-            value={stickyDraft}
-            disabled={disabled}
-            aria-label={t("accountPool.stickyLimitAria")}
-            onChange={(event) => onStickyDraftChange(event.target.value)}
-            onBlur={() => onStickyCommit()}
-            onKeyDown={(event) => {
-              if (event.nativeEvent.isComposing || disabled) return;
-              if (event.key === "Enter") {
-                event.preventDefault();
-                onStickyCommit();
-              }
-            }}
-          />
-          <div className="card-sub" style={{ marginTop: 4 }}>{t("accountPool.stickyLimitHelp")}</div>
+          <span className="codex-auto-switch-input-wrap">
+            <input
+              id={stickyInputId}
+              className="input mono codex-auto-switch-input"
+              type="number"
+              min={1}
+              max={100}
+              step={1}
+              inputMode="numeric"
+              value={stickyDraft}
+              disabled={disabled}
+              aria-label={t("accountPool.stickyLimitAria")}
+              onChange={(event) => onStickyDraftChange(event.target.value)}
+              onBlur={() => onStickyCommit()}
+              onKeyDown={(event) => {
+                if (event.nativeEvent.isComposing || disabled) return;
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  onStickyCommit();
+                }
+              }}
+            />
+            <NumberStepper
+              disabled={disabled}
+              incrementLabel={t("accountPool.stickyLimitInc")}
+              decrementLabel={t("accountPool.stickyLimitDec")}
+              onIncrement={() => {
+                const next = clampNumberDraft(stickyDraft, 1, 1, 100);
+                onStickyDraftChange(next);
+                onStickyCommit(next);
+              }}
+              onDecrement={() => {
+                const next = clampNumberDraft(stickyDraft, -1, 1, 100);
+                onStickyDraftChange(next);
+                onStickyCommit(next);
+              }}
+            />
+          </span>
+          <div className="card-sub">{t("accountPool.stickyLimitHelp")}</div>
         </label>
       )}
     </div>