From c3f8dec1045e6df7bc540ab56031d7bb0417b6ab Mon Sep 17 00:00:00 2001
From: nntrivi2001 <vinnt@smartgift.vn>
Date: Tue, 15 Sep 2026 14:53:00 +0700
Subject: [PATCH] refactor(lanes): drop the tick box and radio dots from the
 Add-lane modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both controls already render as cards that light up when selected — the same
selected/unselected treatment LaneStripCard uses — so the tick box and the two
radio dots were a second indicator of a state the card was already showing.

Neither input is removed, only hidden (`sr-only`): they are still what a
keyboard toggles and what a screen reader announces, so the cards take a
`focus-within` ring in exchange for the focus ring that went with them.

The router radios needed one thing the checkbox did not. "AI Router" is
disabled until the profile list lands, and the greyed-out dot was the only
thing showing that; hidden, it would have read as a card you can click that
does nothing — the dead control the existing comment warns about. So disabled
is now its own branch: muted text, reduced opacity, no hover, not-allowed
cursor.

Layout follows: no flex row with a gap when there is one child left, and the
two equal-width router cards centre their label rather than leaving it hard
against an empty left edge.

Visual only. No behaviour, API or schema change.
---
 client/src/components/lanes/AddLaneModal.tsx | 52 ++++++++++++--------
 1 file changed, 31 insertions(+), 21 deletions(-)

diff --git a/client/src/components/lanes/AddLaneModal.tsx b/client/src/components/lanes/AddLaneModal.tsx
index 52549bc6..c542fa5e 100644
--- a/client/src/components/lanes/AddLaneModal.tsx
+++ b/client/src/components/lanes/AddLaneModal.tsx
@@ -475,22 +475,31 @@ export function AddLaneModal({
               ] as const
             ).map((option) => {
               const active = option.value === "native" ? router === "native" : router !== "native";
+              // Clicking "AI Router" before the list lands would resolve back to
+              // Native and read as a dead control.
+              const disabled = option.value === "router" && !routersLoaded;
               return (
                 <label
                   key={option.value}
-                  className={`flex flex-1 cursor-pointer items-center gap-2 rounded-lg border p-2.5 text-xs shadow-sm transition-colors ${
-                    active
-                      ? "border-accent bg-accent/10 text-accent"
-                      : "border-border bg-surface-2 text-fg-secondary hover:border-border-light hover:bg-surface-3"
+                  // No radio dot: the card itself lights up when selected. That
+                  // leaves the DISABLED state with nothing to show it, since the
+                  // greyed-out dot was carrying it — hence the explicit branch.
+                  // The input only goes visually hidden, so keyboard and screen
+                  // readers still get a real radio group, and the card carries
+                  // its focus ring.
+                  className={`block flex-1 rounded-lg border p-2.5 text-center text-xs shadow-sm transition-colors focus-within:ring-2 focus-within:ring-accent/50 ${
+                    disabled
+                      ? "cursor-not-allowed border-border bg-surface-2 text-fg-muted opacity-60"
+                      : active
+                        ? "cursor-pointer border-accent bg-accent/10 text-accent"
+                        : "cursor-pointer border-border bg-surface-2 text-fg-secondary hover:border-border-light hover:bg-surface-3"
                   }`}
                 >
                   <input
                     type="radio"
                     name="add-lane-router"
-                    className="h-3.5 w-3.5 accent-accent"
-                    // Clicking "AI Router" before the list lands would resolve
-                    // back to Native and read as a dead control.
-                    disabled={option.value === "router" && !routersLoaded}
+                    className="sr-only"
+                    disabled={disabled}
                     checked={active}
                     onChange={() =>
                       // Switching to "AI Router" lands on the first saved
@@ -536,9 +545,12 @@ export function AddLaneModal({
 
         {tool === "claude" && (
           <label
-            // Card that lights up when ticked, matching LaneStripCard's
-            // selected/unselected treatment.
-            className={`flex cursor-pointer items-start gap-2.5 rounded-lg border p-3 shadow-sm transition-colors ${
+            // No tick box: the card itself lights up when selected, the same
+            // treatment LaneStripCard uses, which makes a second indicator of
+            // the same state redundant. The input stays and only goes visually
+            // hidden — it is still what a keyboard toggles and what a screen
+            // reader announces — so the card carries the focus ring for it.
+            className={`block cursor-pointer rounded-lg border p-3 shadow-sm transition-colors focus-within:ring-2 focus-within:ring-accent/50 ${
               writeDocs
                 ? "border-accent bg-accent/10"
                 : "border-border bg-surface-2 hover:border-border-light hover:bg-surface-3"
@@ -551,17 +563,15 @@ export function AddLaneModal({
               aria-label={t("addLaneWriteDocsLabel")}
               checked={writeDocs}
               onChange={(e) => setWriteDocs(e.target.checked)}
-              className="mt-0.5 h-3.5 w-3.5 shrink-0 accent-accent"
+              className="sr-only"
             />
-            <span>
-              <span
-                className={`block text-xs font-medium ${writeDocs ? "text-accent" : "text-fg-secondary"}`}
-              >
-                {t("addLaneWriteDocsLabel")}
-              </span>
-              <span className="mt-1 block text-[10px] text-fg-muted">
-                {t("addLaneWriteDocsHint")}
-              </span>
+            <span
+              className={`block text-xs font-medium ${writeDocs ? "text-accent" : "text-fg-secondary"}`}
+            >
+              {t("addLaneWriteDocsLabel")}
+            </span>
+            <span className="mt-1 block text-[10px] text-fg-muted">
+              {t("addLaneWriteDocsHint")}
             </span>
           </label>
         )}