From b1734a492f71ee31a310d87bb08b814ae4b5f4f7 Mon Sep 17 00:00:00 2001
From: nntrivi2001 <vinnt@smartgift.vn>
Date: Thu, 27 Aug 2026 13:33:55 +0700
Subject: [PATCH] feat(run): tool-aware model picker and run panel labels for
 codex lanes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Model dropdown now shows curated Claude vs Codex models per lane's tool,
and the run panel title/subtitle/binary-missing text switch between
"Chạy Claude"/"Chạy Codex" accordingly.
---
 client/src/components/run/LaneConsolePane.tsx |  9 ++++---
 client/src/components/run/RunSetup.tsx        | 21 ++++++++++-----
 .../run/__tests__/LaneConsolePane.test.tsx    |  1 +
 .../run/__tests__/RunSetup.test.tsx           |  4 +--
 client/src/i18n/locales/en/run.json           |  8 +++---
 client/src/i18n/locales/vi/run.json           |  8 +++---
 client/src/lib/api.ts                         | 26 ++++++++++---------
 .../screens.snapshot.test.tsx.snap            |  2 +-
 8 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/client/src/components/run/LaneConsolePane.tsx b/client/src/components/run/LaneConsolePane.tsx
index 50989b05..7bab72e5 100644
--- a/client/src/components/run/LaneConsolePane.tsx
+++ b/client/src/components/run/LaneConsolePane.tsx
@@ -88,6 +88,7 @@ export function LaneConsolePane({
 
   const currentLane = laneId !== null ? lanes.find((l) => l.id === laneId) : null;
   const laneTool = currentLane?.tool ?? "claude";
+  const toolLabel = laneTool === "codex" ? "Codex" : "Claude";
 
   useEffect(() => {
     onHasActiveRunChange?.(handle !== null);
@@ -419,7 +420,9 @@ export function LaneConsolePane({
         </div>
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2">
-            <h1 className="text-lg font-semibold text-fg-primary">{t("title")}</h1>
+            <h1 className="text-lg font-semibold text-fg-primary">
+              {t("title", { tool: toolLabel })}
+            </h1>
             {wsConnected ? (
               <span className="flex items-center gap-1.5 text-[11px] text-status-success bg-status-success/10 border border-status-success/20 px-2 py-0.5 rounded-full">
                 <span className="w-1.5 h-1.5 rounded-full bg-status-success animate-pulse-dot" />
@@ -432,7 +435,7 @@ export function LaneConsolePane({
               </span>
             )}
           </div>
-          <p className="text-xs text-fg-muted max-w-3xl">{t("subtitle")}</p>
+          <p className="text-xs text-fg-muted max-w-3xl">{t("subtitle", { tool: toolLabel })}</p>
         </div>
         <ActiveRunsSwitcher
           activeRuns={activeRuns}
@@ -449,7 +452,7 @@ export function LaneConsolePane({
       {binaryStatus && !binaryStatus[laneTool]?.found && (
         <div className="rounded-lg border border-status-danger/40 bg-status-danger/10 px-4 py-3 text-sm text-status-danger flex items-center gap-2">
           <AlertCircle className="w-4 h-4 flex-shrink-0" />
-          <span>{t("binary.missing")}</span>
+          <span>{t("binary.missing", { cli: laneTool, tool: toolLabel })}</span>
         </div>
       )}
 
diff --git a/client/src/components/run/RunSetup.tsx b/client/src/components/run/RunSetup.tsx
index d323a33d..bf0de199 100644
--- a/client/src/components/run/RunSetup.tsx
+++ b/client/src/components/run/RunSetup.tsx
@@ -42,7 +42,7 @@ import {
   RotateCcw,
   Lock,
 } from "lucide-react";
-import { api, RUN_MODEL_CHOICES, RUN_EFFORT_CHOICES } from "../../lib/api";
+import { api, RUN_MODEL_CHOICES, RUN_MODEL_CHOICES_CODEX, RUN_EFFORT_CHOICES } from "../../lib/api";
 import type {
   CwdSuggestion,
   DashboardRunHistoryItem,
@@ -233,7 +233,7 @@ export function RunSetup(props: RunSetupProps) {
           )}
         </Field>
         <Field label={t("fields.model")}>
-          <ModelPicker value={props.model} onChange={props.onModelChange} />
+          <ModelPicker value={props.model} onChange={props.onModelChange} tool={props.tool} />
         </Field>
         {props.tool === "codex" ? (
           <>
@@ -712,10 +712,19 @@ function SessionPicker({
 // the "inherit from settings" choice, so use a non-empty marker.
 const MODEL_CUSTOM = "__custom__";
 
-function ModelPicker({ value, onChange }: { value: string; onChange: (s: string) => void }) {
+function ModelPicker({
+  value,
+  onChange,
+  tool,
+}: {
+  value: string;
+  onChange: (s: string) => void;
+  tool: LaneTool;
+}) {
   const { t } = useTranslation("run");
+  const choices = tool === "codex" ? RUN_MODEL_CHOICES_CODEX : RUN_MODEL_CHOICES;
   // "Custom" is selected when the value isn't one of our curated IDs.
-  const knownIds = useMemo(() => RUN_MODEL_CHOICES.map((c) => c.id), []);
+  const knownIds = useMemo(() => choices.map((c) => c.id), [choices]);
   const isCustom = value !== "" && !knownIds.includes(value);
   const [showCustom, setShowCustom] = useState(isCustom);
 
@@ -724,14 +733,14 @@ function ModelPicker({ value, onChange }: { value: string; onChange: (s: string)
   // a browser-native <select>.
   const options = useMemo(
     () => [
-      ...RUN_MODEL_CHOICES.map((c) => ({
+      ...choices.map((c) => ({
         value: c.id === "" ? "" : c.id,
         label: c.id === "" ? t("fields.modelInheritLabel") : c.label,
         hint: c.hint,
       })),
       { value: MODEL_CUSTOM, label: t("fields.modelCustom") },
     ],
-    [t]
+    [t, choices]
   );
 
   const onSelect = (v: string) => {
diff --git a/client/src/components/run/__tests__/LaneConsolePane.test.tsx b/client/src/components/run/__tests__/LaneConsolePane.test.tsx
index c6e4403f..092c012e 100644
--- a/client/src/components/run/__tests__/LaneConsolePane.test.tsx
+++ b/client/src/components/run/__tests__/LaneConsolePane.test.tsx
@@ -31,6 +31,7 @@ vi.mock("../../../lib/api", () => ({
     },
   },
   RUN_MODEL_CHOICES: [],
+  RUN_MODEL_CHOICES_CODEX: [],
   RUN_EFFORT_CHOICES: [],
 }));
 
diff --git a/client/src/components/run/__tests__/RunSetup.test.tsx b/client/src/components/run/__tests__/RunSetup.test.tsx
index 0ea399a3..3ce8c3e6 100644
--- a/client/src/components/run/__tests__/RunSetup.test.tsx
+++ b/client/src/components/run/__tests__/RunSetup.test.tsx
@@ -121,8 +121,8 @@ describe("RunSetup — selections report through callbacks", () => {
 
   it("reports the model from the picker, including a custom id", () => {
     const { spies } = renderSetup();
-    pickFromSelect(i18n.t("run:fields.modelInheritLabel"), "Sonnet 4.6");
-    expect(spies.onModelChange).toHaveBeenCalledWith("sonnet");
+    pickFromSelect(i18n.t("run:fields.modelInheritLabel"), "Sonnet 5");
+    expect(spies.onModelChange).toHaveBeenCalledWith("claude-sonnet-5");
     // "Custom…" is a sentinel, not a model id — it must not be reported as one;
     // the free-text box it reveals is what reports.
     fireEvent.click(screen.getByText(i18n.t("run:fields.modelInheritLabel")));
diff --git a/client/src/i18n/locales/en/run.json b/client/src/i18n/locales/en/run.json
index c2c78b43..bbe6f699 100644
--- a/client/src/i18n/locales/en/run.json
+++ b/client/src/i18n/locales/en/run.json
@@ -20,7 +20,7 @@
   },
   "binary": {
     "found": "Using {{path}}",
-    "missing": "The `claude` CLI isn't on your PATH. Install Claude Code or set PATH so the dashboard can spawn it."
+    "missing": "The `{{cli}}` CLI isn't on your PATH. Install {{tool}} or set PATH so the dashboard can spawn it."
   },
   "concurrency": {
     "active_one": "{{count}} run already in flight",
@@ -69,7 +69,7 @@
     "effort": "Thinking effort",
     "model": "Model",
     "modelCustom": "Custom…",
-    "modelCustomPlaceholder": "model id (e.g. claude-opus-4-7-20260101)",
+    "modelCustomPlaceholder": "model id (e.g. claude-opus-5)",
     "modelInheritLabel": "Inherit from settings",
     "permissionAcceptEdits": "acceptEdits (recommended)",
     "permissionBypass": "bypassPermissions (DANGER - allows everything without asking)",
@@ -153,8 +153,8 @@
     "permissionMode": "Mode",
     "session": "Session"
   },
-  "subtitle": "Spin up a Claude Code session right inside the dashboard. Live streaming output, multi-turn conversation, and the same hooks-driven analytics as your terminal sessions.",
-  "title": "Run Claude",
+  "subtitle": "Spin up a {{tool}} session right inside the dashboard. Live streaming output, multi-turn conversation, and the same hooks-driven analytics as your terminal sessions.",
+  "title": "Run {{tool}}",
   "tokens": {
     "cacheRead": "Cache hit",
     "cost": "Cost",
diff --git a/client/src/i18n/locales/vi/run.json b/client/src/i18n/locales/vi/run.json
index cda1234d..3be794d0 100644
--- a/client/src/i18n/locales/vi/run.json
+++ b/client/src/i18n/locales/vi/run.json
@@ -20,7 +20,7 @@
   },
   "binary": {
     "found": "Đang dùng {{path}}",
-    "missing": "Không thấy CLI `claude` trong PATH. Cài đặt Claude Code hoặc đặt PATH."
+    "missing": "Không thấy CLI `{{cli}}` trong PATH. Cài đặt {{tool}} hoặc đặt PATH."
   },
   "concurrency": {
     "active_other": "Có {{count}} run đang chạy",
@@ -68,7 +68,7 @@
     "effort": "Mức độ suy nghĩ",
     "model": "Model",
     "modelCustom": "Tuỳ chỉnh…",
-    "modelCustomPlaceholder": "model id (vd: claude-opus-4-7-20260101)",
+    "modelCustomPlaceholder": "model id (vd: claude-opus-5)",
     "modelInheritLabel": "Kế thừa từ settings",
     "permissionAcceptEdits": "acceptEdits (khuyên dùng)",
     "permissionBypass": "bypassPermissions (NGUY HIỂM - cho phép tất cả mà không hỏi)",
@@ -152,8 +152,8 @@
     "permissionMode": "Mode",
     "session": "Session"
   },
-  "subtitle": "Khởi chạy một phiên Claude Code ngay trong dashboard. Stream output trực tiếp, hội thoại đa lượt, và chia sẻ cùng pipeline hooks/analytics với phiên ở terminal.",
-  "title": "Chạy Claude",
+  "subtitle": "Khởi chạy một phiên {{tool}} ngay trong dashboard. Stream output trực tiếp, hội thoại đa lượt, và chia sẻ cùng pipeline hooks/analytics với phiên ở terminal.",
+  "title": "Chạy {{tool}}",
   "tokens": {
     "cacheRead": "Cache hit",
     "cost": "Chi phí",
diff --git a/client/src/lib/api.ts b/client/src/lib/api.ts
index 6729f47f..be59370f 100644
--- a/client/src/lib/api.ts
+++ b/client/src/lib/api.ts
@@ -2719,18 +2719,20 @@ export const RUN_EFFORT_CHOICES: EffortChoice[] = [
 // configured default and the rest map to concrete `--model` values.
 export const RUN_MODEL_CHOICES: ModelChoice[] = [
   { id: "", label: "Inherit from settings", hint: "Use whatever your settings.json model is" },
-  {
-    id: "claude-opus-4-8[1m]",
-    label: "Opus 4.8 (1M context)",
-    hint: "Highest capability, 1M token window",
-  },
-  {
-    id: "claude-opus-4-7[1m]",
-    label: "Opus 4.7 (1M context)",
-    hint: "Previous Opus, 1M token window",
-  },
-  { id: "sonnet", label: "Sonnet 4.6", hint: "Balanced capability and speed" },
-  { id: "haiku", label: "Haiku 4.5", hint: "Fastest, lightest" },
+  { id: "claude-opus-5", label: "Opus 5", hint: "Highest capability" },
+  { id: "claude-sonnet-5", label: "Sonnet 5", hint: "Balanced capability and speed" },
+  { id: "claude-fable-5", label: "Fable 5", hint: "Fast output, same capability tier as Opus" },
+  { id: "claude-haiku-4-5-20251001", label: "Haiku 4.5", hint: "Fastest, lightest" },
+];
+
+// Curated model list for Codex lanes - same shape as RUN_MODEL_CHOICES, sent
+// via `codex -m`. "" inherits Codex's own configured default.
+export const RUN_MODEL_CHOICES_CODEX: ModelChoice[] = [
+  { id: "", label: "Inherit from settings", hint: "Use whatever your Codex config model is" },
+  { id: "gpt-5.6-sol", label: "GPT-5.6 Sol", hint: "Highest capability" },
+  { id: "gpt-5.6-terra", label: "GPT-5.6 Terra", hint: "Balanced capability and speed" },
+  { id: "gpt-5.6-luna", label: "GPT-5.6 Luna", hint: "Fastest, lightest" },
+  { id: "gpt-5.5", label: "GPT-5.5", hint: "Previous generation" },
 ];
 
 /** Result of a transcript import run - returned by `api.import.rescan`,
diff --git a/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap b/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
index 6a897715..68512ce3 100644
--- a/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
+++ b/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
@@ -5142,7 +5142,7 @@ exports[`screen snapshots > Run 1`] = `
               <p
                 class="text-xs text-fg-muted max-w-3xl"
               >
-                Spin up a Claude Code session right inside the dashboard. Live streaming output, multi-turn conversation, and the same hooks-driven analytics as your terminal sessions.
+                Spin up a Claude session right inside the dashboard. Live streaming output, multi-turn conversation, and the same hooks-driven analytics as your terminal sessions.
               </p>
             </div>
             <button