From c4025cd2f7c0c4a61778567eac9b4a38a4c04379 Mon Sep 17 00:00:00 2001
From: nntrivi2001 <vinnt@smartgift.vn>
Date: Mon, 14 Sep 2026 13:10:16 +0700
Subject: [PATCH] style(lanes): render the create-readme option as a selectable
 card
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Matches LaneStripCard's selected/unselected treatment and moves the hint
inside the card. Drops the "codex has no slash commands" clause from the
hint — the option is already hidden for a codex lane.
---
 client/src/components/lanes/AddLaneModal.tsx | 41 ++++++++++++++------
 client/src/i18n/locales/en/lanes.json        |  2 +-
 client/src/i18n/locales/vi/lanes.json        |  2 +-
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/client/src/components/lanes/AddLaneModal.tsx b/client/src/components/lanes/AddLaneModal.tsx
index d0023491..ac9a0831 100644
--- a/client/src/components/lanes/AddLaneModal.tsx
+++ b/client/src/components/lanes/AddLaneModal.tsx
@@ -408,18 +408,35 @@ export function AddLaneModal({
         </div>
 
         {tool === "claude" && (
-          <div>
-            <label className="flex items-center gap-2 text-xs text-fg-secondary">
-              <input
-                type="checkbox"
-                checked={writeDocs}
-                onChange={(e) => setWriteDocs(e.target.checked)}
-                className="h-3.5 w-3.5 accent-accent"
-              />
-              {t("addLaneWriteDocsLabel")}
-            </label>
-            <p className="mt-1 text-[10px] text-fg-muted">{t("addLaneWriteDocsHint")}</p>
-          </div>
+          <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 ${
+              writeDocs
+                ? "border-accent bg-accent/10"
+                : "border-border bg-surface-2 hover:border-border-light hover:bg-surface-3"
+            }`}
+          >
+            <input
+              type="checkbox"
+              // The wrapping label also holds the hint, so name the input
+              // itself — otherwise its accessible name is label + hint.
+              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"
+            />
+            <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>
+          </label>
         )}
 
         {mode === "worktree" && branches && (
diff --git a/client/src/i18n/locales/en/lanes.json b/client/src/i18n/locales/en/lanes.json
index b273ee14..a4ef5c16 100644
--- a/client/src/i18n/locales/en/lanes.json
+++ b/client/src/i18n/locales/en/lanes.json
@@ -40,7 +40,7 @@
   "addLaneToolClaude": "Claude Code",
   "addLaneToolCodex": "Codex",
   "addLaneToolHint": "Which CLI drives this lane. Cannot be changed later.",
-  "addLaneWriteDocsHint": "Opens the lane's terminal on creation and runs the /sg-all:sg-md-writing skill there. Claude lanes only — codex has no slash commands.",
+  "addLaneWriteDocsHint": "Opens the lane's terminal on creation and runs the /sg-all:sg-md-writing skill there.",
   "addLaneWriteDocsLabel": "Create/update readme file",
   "mode.repo": "Repo",
   "mode.repoHint": "Adopt this directory as a lane, as-is — no worktree, no new branch.",
diff --git a/client/src/i18n/locales/vi/lanes.json b/client/src/i18n/locales/vi/lanes.json
index e6b4b65f..a61f5154 100644
--- a/client/src/i18n/locales/vi/lanes.json
+++ b/client/src/i18n/locales/vi/lanes.json
@@ -40,7 +40,7 @@
   "addLaneToolClaude": "Claude Code",
   "addLaneToolCodex": "Codex",
   "addLaneToolHint": "CLI nào điều khiển lane này. Không thể thay đổi sau này.",
-  "addLaneWriteDocsHint": "Khi tạo lane sẽ mở terminal của lane và chạy skill /sg-all:sg-md-writing tại đó. Chỉ áp dụng cho lane Claude — codex không có slash command.",
+  "addLaneWriteDocsHint": "Khi tạo lane sẽ mở terminal của lane và chạy skill /sg-all:sg-md-writing tại đó.",
   "addLaneWriteDocsLabel": "Tạo/cập nhật file readme",
   "mode.repo": "Repo",
   "mode.repoHint": "Gắn thẳng thư mục này làm lane, nguyên trạng — không worktree, không nhánh mới.",