From 1c2f92412a8d5ab830321b6413776a43c5caca49 Mon Sep 17 00:00:00 2001
From: Wibias <37517432+Wibias@users.noreply.github.com>
Date: Sun, 26 Jul 2026 01:19:14 +0200
Subject: [PATCH 1/4] refactor(gui): split Combos workspace for react-doctor

Extract ComboWorkspace panels/modals and harden fetch/loading paths for the 0.9.1 doctor rules.
---
 gui/src/combo-workspace-data.ts               |  17 +-
 gui/src/components/ComboWorkspace.tsx         | 838 +-----------------
 .../components/combo-workspace-add-modal.tsx  | 198 +++++
 .../components/combo-workspace-controls.tsx   | 230 +++++
 .../combo-workspace-detail-panel.tsx          | 269 ++++++
 .../components/combo-workspace-dialogs.tsx    |  86 ++
 .../combo-workspace-overview-panel.tsx        |  58 ++
 gui/src/components/combo-workspace-types.ts   |  25 +
 gui/src/components/combo-workspace-utils.ts   |  40 +
 gui/src/pages/Combos.tsx                      |  10 +-
 10 files changed, 938 insertions(+), 833 deletions(-)
 create mode 100644 gui/src/components/combo-workspace-add-modal.tsx
 create mode 100644 gui/src/components/combo-workspace-controls.tsx
 create mode 100644 gui/src/components/combo-workspace-detail-panel.tsx
 create mode 100644 gui/src/components/combo-workspace-dialogs.tsx
 create mode 100644 gui/src/components/combo-workspace-overview-panel.tsx
 create mode 100644 gui/src/components/combo-workspace-types.ts
 create mode 100644 gui/src/components/combo-workspace-utils.ts

diff --git a/gui/src/combo-workspace-data.ts b/gui/src/combo-workspace-data.ts
index 5d3f5f0b4..227d3aafc 100644
--- a/gui/src/combo-workspace-data.ts
+++ b/gui/src/combo-workspace-data.ts
@@ -12,6 +12,19 @@ export interface ComboTarget {
   provider: string;
   model: string;
   weight?: number;
+  /** UI-only stable key for React lists; never sent to the API. */
+  clientKey?: string;
+}
+
+let comboTargetKeySeq = 0;
+
+export function newComboTarget(partial: Partial<ComboTarget> = {}): ComboTarget {
+  return {
+    provider: partial.provider ?? "",
+    model: partial.model ?? "",
+    ...(partial.weight !== undefined ? { weight: partial.weight } : {}),
+    clientKey: partial.clientKey ?? `ct-${++comboTargetKeySeq}`,
+  };
 }
 
 export interface ComboItem {
@@ -101,7 +114,7 @@ export function parseComboList(payload: unknown): ComboItem[] {
       const model = typeof tr.model === "string" ? tr.model.trim() : "";
       if (!provider || !model) continue;
       const weight = normalizeWeight(tr.weight);
-      targets.push(weight !== undefined ? { provider, model, weight } : { provider, model });
+      targets.push(weight !== undefined ? newComboTarget({ provider, model, weight }) : newComboTarget({ provider, model }));
     }
     out.push({
       id,
@@ -275,6 +288,6 @@ export function emptyDraft(id = ""): ComboItem {
     strategy: "failover",
     stickyLimit: 1,
     defaultEffort: null,
-    targets: [{ provider: "", model: "" }],
+    targets: [newComboTarget()],
   };
 }
diff --git a/gui/src/components/ComboWorkspace.tsx b/gui/src/components/ComboWorkspace.tsx
index 13e4d3f17..fa479391e 100644
--- a/gui/src/components/ComboWorkspace.tsx
+++ b/gui/src/components/ComboWorkspace.tsx
@@ -1,838 +1,20 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import {
-  type ComboEffort,
   type ComboItem,
-  type ComboStrategy,
-  type ComboTarget,
-  COMBO_EFFORTS,
-  buildComboAttention,
   comboModelId,
-  comboPublicModelId,
-  draftEquals,
   emptyDraft,
   filterCombos,
   groupCombos,
-  validateComboDraft,
 } from "../combo-workspace-data";
-import {
-  IconAlert,
-  IconChevron,
-  IconGrip,
-  IconPlus,
-  IconSearch,
-  IconShuffle,
-  IconTrash,
-  IconX,
-} from "../icons";
-import { useT } from "../i18n";
-import { Notice } from "../ui";
-
-export type ProviderOption = {
-  name: string;
-  disabled?: boolean;
-  hiddenFromPicker?: boolean;
-  authMode?: string;
-  adapter?: string;
-  baseUrl?: string;
-};
-export type ModelOption = { provider: string; id: string; namespaced?: string };
-
-type DetailTab = "config" | "about";
-
-export interface ComboWorkspaceProps {
-  combos: ComboItem[];
-  providers: ProviderOption[];
-  models: ModelOption[];
-  loading?: boolean;
-  onRefresh: () => void;
-  onSave: (item: ComboItem, isCreate: boolean, renameFrom?: string) => Promise<{ ok: boolean; error?: string }>;
-  onRemove: (id: string) => Promise<{ ok: boolean; error?: string }>;
-  onAdd: () => void;
-  adding: boolean;
-  onCloseAdd: () => void;
-  onCreated: (id: string) => void;
-}
-
-function enabledProviders(providers: ProviderOption[]): ProviderOption[] {
-  return providers
-    .filter((p) => !p.disabled && !p.hiddenFromPicker)
-    .sort((a, b) => a.name.localeCompare(b.name));
-}
-
-/** ChatGPT passthrough has no /models catalog — GPT slugs are listed under provider "openai". */
-function isChatGptForwardOption(p: ProviderOption | undefined): boolean {
-  if (!p) return false;
-  const id = p.name.toLowerCase();
-  if (id !== "openai" && id !== "chatgpt") return false;
-  if ((p.authMode ?? "").toLowerCase() !== "forward") return false;
-  if ((p.adapter ?? "").toLowerCase() !== "openai-responses") return false;
-  const base = (p.baseUrl ?? "").replace(/\/+$/, "");
-  return !base || base.includes("chatgpt.com/backend-api/codex");
-}
-
-function modelsForProvider(
-  models: ModelOption[],
-  provider: string,
-  providers: ProviderOption[],
-): string[] {
-  const keys = new Set<string>([provider]);
-  const meta = providers.find((p) => p.name === provider);
-  // Alias chatgpt → openai native GPT rows (forward providers don't publish their own catalog).
-  if (provider.toLowerCase() === "chatgpt" || isChatGptForwardOption(meta)) {
-    keys.add("openai");
-  }
-  const ids = models
-    .filter((m) => keys.has(m.provider))
-    .map((m) => m.id)
-    .filter(Boolean);
-  return [...new Set(ids)].sort((a, b) => a.localeCompare(b));
-}
-
-function StrategySeg({
-  value,
-  onChange,
-  disabled,
-}: {
-  value: ComboStrategy;
-  onChange: (next: ComboStrategy) => void;
-  disabled?: boolean;
-}) {
-  const t = useT();
-  return (
-    <div className="cwi-strategy-seg" role="radiogroup" aria-label={t("cws.strategy")}>
-      {([
-        ["failover", "cws.strategy.failover"],
-        ["round-robin", "cws.strategy.roundRobin"],
-      ] as const).map(([id, key]) => (
-        <button
-          key={id}
-          type="button"
-          role="radio"
-          aria-checked={value === id}
-          className={`btn btn-sm${value === id ? " btn-primary" : " btn-ghost"}`}
-          disabled={disabled}
-          onClick={() => onChange(id)}
-        >
-          {t(key)}
-        </button>
-      ))}
-    </div>
-  );
-}
-
-function EffortSelect({
-  id,
-  value,
-  onChange,
-  disabled,
-}: {
-  id: string;
-  value: ComboEffort | null;
-  onChange: (next: ComboEffort | null) => void;
-  disabled?: boolean;
-}) {
-  const t = useT();
-  return (
-    <select
-      id={id}
-      className="input"
-      value={value ?? ""}
-      disabled={disabled}
-      aria-label={t("cws.field.defaultEffort")}
-      onChange={(e) => onChange(e.target.value === "" ? null : e.target.value as ComboEffort)}
-    >
-      <option value="">{t("cws.field.defaultEffortNone")}</option>
-      {COMBO_EFFORTS.map((effort) => (
-        <option key={effort} value={effort}>{effort}</option>
-      ))}
-    </select>
-  );
-}
-
-function TargetEditor({
-  targets,
-  strategy,
-  providers,
-  models,
-  onChange,
-}: {
-  targets: ComboTarget[];
-  strategy: ComboStrategy;
-  providers: ProviderOption[];
-  models: ModelOption[];
-  onChange: (next: ComboTarget[]) => void;
-}) {
-  const t = useT();
-  const provs = enabledProviders(providers);
-  const [dragIndex, setDragIndex] = useState<number | null>(null);
-  const [overIndex, setOverIndex] = useState<number | null>(null);
-
-  const update = (index: number, patch: Partial<ComboTarget>) => {
-    onChange(targets.map((row, i) => (i === index ? { ...row, ...patch } : row)));
-  };
-
-  const reorder = (from: number, to: number) => {
-    if (from === to || from < 0 || to < 0 || from >= targets.length || to >= targets.length) return;
-    const copy = [...targets];
-    const [moved] = copy.splice(from, 1);
-    copy.splice(to, 0, moved!);
-    onChange(copy);
-  };
-
-  return (
-    <div className="cwi-target-list">
-      {targets.map((row, index) => {
-        const currentProvider = providers.find((provider) => provider.name === row.provider);
-        const providerOptions = currentProvider && !provs.some((provider) => provider.name === row.provider)
-          ? [...provs, currentProvider]
-          : provs;
-        const modelIds = modelsForProvider(models, row.provider, providers);
-        const options = row.model && !modelIds.includes(row.model)
-          ? [row.model, ...modelIds]
-          : modelIds;
-        const modelSelectDisabled = !row.provider;
-        const dragging = dragIndex === index;
-        const dropTarget = overIndex === index && dragIndex !== null && dragIndex !== index;
-        return (
-          <div
-            key={index}
-            className={[
-              "cwi-target-row",
-              strategy === "failover" ? "cwi-target-row--failover" : "",
-              dragging ? "cwi-target-row--dragging" : "",
-              dropTarget ? "cwi-target-row--drop" : "",
-            ].filter(Boolean).join(" ")}
-            onDragOver={(e) => {
-              if (dragIndex === null) return;
-              e.preventDefault();
-              e.dataTransfer.dropEffect = "move";
-              if (overIndex !== index) setOverIndex(index);
-            }}
-            onDrop={(e) => {
-              e.preventDefault();
-              if (dragIndex !== null) reorder(dragIndex, index);
-              setDragIndex(null);
-              setOverIndex(null);
-            }}
-            onDragEnd={() => {
-              setDragIndex(null);
-              setOverIndex(null);
-            }}
-          >
-            <button
-              type="button"
-              className="cwi-target-grip"
-              draggable
-              aria-label={t("cws.target.drag")}
-              title={t("cws.target.drag")}
-              onDragStart={(e) => {
-                setDragIndex(index);
-                e.dataTransfer.effectAllowed = "move";
-                e.dataTransfer.setData("text/plain", String(index));
-              }}
-            >
-              <IconGrip width={14} height={14} aria-hidden="true" />
-            </button>
-            <select
-              className="input"
-              value={row.provider}
-              aria-label={t("cws.target.provider")}
-              onChange={(e) => {
-                const provider = e.target.value;
-                const first = modelsForProvider(models, provider, providers)[0] ?? "";
-                update(index, { provider, model: first });
-              }}
-            >
-              <option value="">{t("cws.target.pickProvider")}</option>
-              {providerOptions.map((p) => (
-                <option key={p.name} value={p.name}>
-                  {p.disabled ? t("cws.target.disabled", { name: p.name }) : p.name}
-                </option>
-              ))}
-            </select>
-            <select
-              className="input"
-              value={row.model}
-              disabled={modelSelectDisabled}
-              aria-label={t("cws.target.model")}
-              onChange={(e) => update(index, { model: e.target.value })}
-            >
-              <option value="">
-                {modelSelectDisabled
-                  ? t("cws.target.pickProviderFirst")
-                  : options.length === 0
-                    ? t("cws.target.noModels")
-                    : t("cws.target.pickModel")}
-              </option>
-              {options.map((id) => (
-                <option key={id} value={id}>{id}</option>
-              ))}
-            </select>
-            {strategy === "round-robin" && (
-              <input
-                className="input mono"
-                type="number"
-                min={1}
-                max={10000}
-                value={row.weight ?? 1}
-                aria-label={t("cws.target.weight")}
-                onChange={(e) => update(index, { weight: Number(e.target.value) })}
-              />
-            )}
-            <div className="cwi-target-actions">
-              <button
-                type="button"
-                className="btn btn-ghost btn-sm"
-                disabled={targets.length <= 1}
-                onClick={() => onChange(targets.filter((_, i) => i !== index))}
-                aria-label={t("common.remove")}
-              >
-                <IconTrash width={14} height={14} />
-              </button>
-            </div>
-          </div>
-        );
-      })}
-      <button
-        type="button"
-        className="btn btn-ghost btn-sm"
-        style={{ alignSelf: "flex-start" }}
-        onClick={() => onChange([...targets, { provider: "", model: "" }])}
-      >
-        <IconPlus width={14} height={14} /> {t("cws.target.add")}
-      </button>
-    </div>
-  );
-}
-
-function RemoveComboDialog({
-  model,
-  onCancel,
-  onConfirm,
-}: {
-  model: string;
-  onCancel: () => void;
-  onConfirm: () => void;
-}) {
-  const t = useT();
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        onCancel();
-      }
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onCancel]);
-
-  return (
-    <div className="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="cwi-remove-title" onClick={onCancel}>
-      <div className="modal-card pwi-remove-confirm-card" onClick={(e) => e.stopPropagation()}>
-        <h3 id="cwi-remove-title" className="pwi-remove-confirm-title">
-          {t("cws.removeConfirmTitle", { model })}
-        </h3>
-        <p className="muted pwi-remove-confirm-desc">{t("cws.removeConfirmDesc")}</p>
-        <div className="pwi-remove-confirm-actions">
-          <button type="button" className="btn btn-ghost" onClick={onCancel}>{t("common.cancel")}</button>
-          <button type="button" className="btn pwi-remove-confirm-danger" onClick={onConfirm}>{t("common.remove")}</button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function UnsavedLeaveDialog({
-  onKeep,
-  onDiscard,
-}: {
-  onKeep: () => void;
-  onDiscard: () => void;
-}) {
-  const t = useT();
-  return (
-    <div className="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="cwi-unsaved-title" onClick={onKeep}>
-      <div className="modal-card pwi-json-unsaved-card" onClick={(e) => e.stopPropagation()}>
-        <h3 id="cwi-unsaved-title" className="pwi-json-unsaved-title">{t("cws.unsavedTitle")}</h3>
-        <p className="muted pwi-json-unsaved-desc">{t("cws.unsavedDesc")}</p>
-        <div className="pwi-json-unsaved-actions">
-          <button type="button" className="btn btn-ghost" onClick={onKeep}>{t("cws.keepEditing")}</button>
-          <button type="button" className="btn btn-danger" onClick={onDiscard}>{t("common.discard")}</button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function AddComboModal({
-  existingIds,
-  existingAliases,
-  providerMap,
-  providers,
-  models,
-  onClose,
-  onSubmit,
-}: {
-  existingIds: string[];
-  existingAliases: string[];
-  providerMap: Readonly<Record<string, { disabled?: boolean }>>;
-  providers: ProviderOption[];
-  models: ModelOption[];
-  onClose: () => void;
-  onSubmit: (item: ComboItem) => Promise<{ ok: boolean; error?: string }>;
-}) {
-  const t = useT();
-  const [draft, setDraft] = useState<ComboItem>(() => emptyDraft());
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState("");
-
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape" && !busy) {
-        e.preventDefault();
-        onClose();
-      }
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [busy, onClose]);
-
-  const submit = async () => {
-    const code = validateComboDraft(draft, {
-      existingIds,
-      existingAliases,
-      isCreate: true,
-      providers: providerMap,
-    });
-    if (code) {
-      setError(t(`cws.err.${code}`));
-      return;
-    }
-    setBusy(true);
-    setError("");
-    const id = draft.id.trim();
-    const alias = draft.alias?.trim() || null;
-    const res = await onSubmit({ ...draft, id, alias, model: comboPublicModelId(id, alias) });
-    setBusy(false);
-    if (!res.ok) {
-      setError(res.error || t("cws.saveFailed"));
-      return;
-    }
-  };
-
-  return (
-    <div className="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="cwi-add-title" onClick={() => { if (!busy) onClose(); }}>
-      <div className="modal-card" style={{ width: "min(560px, 94vw)" }} onClick={(e) => e.stopPropagation()}>
-        <div className="row" style={{ justifyContent: "space-between", marginBottom: 8 }}>
-          <h3 id="cwi-add-title" style={{ margin: 0 }}>{t("cws.addTitle")}</h3>
-          <button type="button" className="btn btn-ghost btn-sm" onClick={onClose} disabled={busy} aria-label={t("common.close")}>
-            <IconX width={16} height={16} />
-          </button>
-        </div>
-        <p className="muted" style={{ marginTop: 0 }}>{t("cws.addSubtitle")}</p>
-        {error && <Notice tone="err">{error}</Notice>}
-        <div className="cwi-modal-form">
-          <div className="cwi-field">
-            <label htmlFor="cwi-new-id">{t("cws.field.id")}</label>
-            <input
-              id="cwi-new-id"
-              className="input mono"
-              value={draft.id}
-              disabled={busy}
-              onChange={(e) => setDraft((d) => ({
-                ...d,
-                id: e.target.value,
-                model: comboPublicModelId(e.target.value, d.alias),
-              }))}
-            />
-            <p className="muted" style={{ fontSize: 12, margin: "4px 0 0" }}>
-              {t("cws.field.idInternalHint")}
-            </p>
-          </div>
-          <div className="cwi-field">
-            <label htmlFor="cwi-new-alias">{t("cws.field.alias")}</label>
-            <input
-              id="cwi-new-alias"
-              className="input mono"
-              value={draft.alias ?? ""}
-              placeholder={t("cws.field.aliasPlaceholder")}
-              disabled={busy}
-              onChange={(e) => setDraft((d) => ({
-                ...d,
-                alias: e.target.value.trim() ? e.target.value : null,
-                model: comboPublicModelId(d.id, e.target.value),
-              }))}
-            />
-            <p className="muted" style={{ fontSize: 12, margin: "4px 0 0" }}>
-              {t("cws.field.aliasHint")}
-            </p>
-            <p className="muted" style={{ fontSize: 12, margin: "4px 0 0" }}>
-              {t("cws.field.idHint", {
-                model: draft.id.trim() ? comboPublicModelId(draft.id, draft.alias) : "…",
-              })}
-            </p>
-          </div>
-          <div className="cwi-field">
-            <label>{t("cws.strategy")}</label>
-            <StrategySeg
-              value={draft.strategy}
-              disabled={busy}
-              onChange={(strategy) => setDraft((d) => ({ ...d, strategy }))}
-            />
-            <p className="muted" style={{ fontSize: 12, margin: "6px 0 0" }}>
-              {draft.strategy === "failover" ? t("cws.strategy.failoverHint") : t("cws.strategy.roundRobinHint")}
-            </p>
-          </div>
-          <div className="cwi-field">
-            <label htmlFor="cwi-new-effort">{t("cws.field.defaultEffort")}</label>
-            <EffortSelect
-              id="cwi-new-effort"
-              value={draft.defaultEffort}
-              disabled={busy}
-              onChange={(defaultEffort) => setDraft((d) => ({ ...d, defaultEffort }))}
-            />
-            <p className="muted" style={{ fontSize: 12, margin: "4px 0 0" }}>
-              {t("cws.field.defaultEffortHint")}
-            </p>
-          </div>
-          {draft.strategy === "round-robin" && (
-            <div className="cwi-field">
-              <label htmlFor="cwi-new-sticky">{t("cws.field.stickyLimit")}</label>
-              <input
-                id="cwi-new-sticky"
-                className="input mono"
-                type="number"
-                min={1}
-                max={100}
-                value={draft.stickyLimit}
-                disabled={busy}
-                onChange={(e) => setDraft((d) => ({ ...d, stickyLimit: Number(e.target.value) }))}
-              />
-              <p className="muted" style={{ fontSize: 12, margin: "4px 0 0" }}>
-                {t("cws.field.stickyLimitHint")}
-              </p>
-            </div>
-          )}
-          <div className="cwi-field">
-            <label>{t("cws.targets")}</label>
-            <p className="muted" style={{ fontSize: 12, margin: "0 0 8px" }}>
-              {draft.strategy === "failover" ? t("cws.targets.failoverHint") : t("cws.targets.roundRobinHint")}
-            </p>
-            <TargetEditor
-              targets={draft.targets}
-              strategy={draft.strategy}
-              providers={providers}
-              models={models}
-              onChange={(targets) => setDraft((d) => ({ ...d, targets }))}
-            />
-          </div>
-        </div>
-        <div className="cwi-modal-actions">
-          <button type="button" className="btn btn-ghost" onClick={onClose} disabled={busy}>{t("common.cancel")}</button>
-          <button type="button" className="btn btn-primary" onClick={() => { void submit(); }} disabled={busy}>
-            {busy ? t("common.saving") : t("cws.create")}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function OverviewPanel({
-  combos,
-  onSelect,
-  onAdd,
-}: {
-  combos: ComboItem[];
-  onSelect: (id: string) => void;
-  onAdd: () => void;
-}) {
-  const t = useT();
-  const sections = groupCombos(combos);
-  const attention = buildComboAttention(combos);
-
-  return (
-    <div className="combos-workspace-overview">
-      <div className="combos-workspace-overview-head">
-        <h2 className="combos-workspace-overview-title">{t("cws.overviewTitle")}</h2>
-        <button type="button" className="btn btn-primary btn-sm" onClick={onAdd}>
-          <IconPlus width={14} height={14} /> {t("cws.add")}
-        </button>
-      </div>
-      <p className="muted" style={{ marginTop: 0, maxWidth: "62ch" }}>{t("cws.overviewBlurb")}</p>
-      <div className="cwi-count-strip">
-        <div className="cwi-count-pill"><strong>{combos.length}</strong><span>{t("cws.count.total")}</span></div>
-        <div className="cwi-count-pill"><strong>{sections.failover.length}</strong><span>{t("cws.count.failover")}</span></div>
-        <div className="cwi-count-pill"><strong>{sections.roundRobin.length}</strong><span>{t("cws.count.roundRobin")}</span></div>
-      </div>
-
-      <section className="pwi-section" aria-label={t("cws.howTitle")}>
-        <h3 className="pwi-section-title">{t("cws.howTitle")}</h3>
-        <p className="muted" style={{ margin: 0 }}>{t("cws.howBody")}</p>
-      </section>
-
-      {attention.length > 0 && (
-        <section className="pwi-section" aria-label={t("cws.attentionTitle")}>
-          <h3 className="pwi-section-title">{t("cws.attentionTitle")}</h3>
-          <div className="cwi-attention-list">
-            {attention.map((item) => (
-              <button key={item.id} type="button" className="cwi-attention-row" onClick={() => onSelect(item.id)}>
-                <IconAlert width={14} height={14} aria-hidden="true" />
-                <code className="chip">{item.model}</code>
-                <span className="muted">
-                  {item.reason === "empty-targets" ? t("cws.attention.empty") : t("cws.attention.few")}
-                </span>
-                <IconChevron width={14} height={14} style={{ marginLeft: "auto" }} aria-hidden="true" />
-              </button>
-            ))}
-          </div>
-        </section>
-      )}
-    </div>
-  );
-}
-
-function DetailPanel({
-  baseline,
-  isCreate = false,
-  otherIds,
-  otherAliases,
-  providerMap,
-  providers,
-  models,
-  onBack,
-  onSaved,
-  onRequestRemove,
-  onSave,
-  onDirtyChange,
-}: {
-  baseline: ComboItem;
-  isCreate?: boolean;
-  /** Ids of all OTHER combos — rename collisions validate against these. */
-  otherIds: string[];
-  /** Aliases of all OTHER combos — alias uniqueness validates against these. */
-  otherAliases: string[];
-  providerMap: Readonly<Record<string, { disabled?: boolean }>>;
-  providers: ProviderOption[];
-  models: ModelOption[];
-  onBack?: () => void;
-  onSaved: (item: ComboItem) => void;
-  onRequestRemove?: () => void;
-  onSave: (item: ComboItem, isCreate: boolean, renameFrom?: string) => Promise<{ ok: boolean; error?: string }>;
-  onDirtyChange: (dirty: boolean) => void;
-}) {
-  const t = useT();
-  const [tab, setTab] = useState<DetailTab>("config");
-  const [draft, setDraft] = useState<ComboItem>(baseline);
-  const [busy, setBusy] = useState(false);
-  const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null);
-  const [copied, setCopied] = useState(false);
-  const dirty = !draftEquals(draft, baseline);
-  const baselineSyncKey = `${baseline.id}:${baseline.alias ?? ""}:${baseline.strategy}:${baseline.stickyLimit}:${baseline.defaultEffort}:${baseline.targets.map((t) => `${t.provider}/${t.model}:${t.weight ?? 1}`).join(",")}`;
-
-  useEffect(() => {
-    const timer = window.setTimeout(() => {
-      setDraft(baseline);
-      setMsg(null);
-      setTab("config");
-    }, 0);
-    return () => window.clearTimeout(timer);
-    // Sync when server/local baseline content changes for this combo (same id after save/refresh).
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentional: key captures baseline payload
-  }, [baselineSyncKey]);
-
-  useEffect(() => {
-    onDirtyChange(dirty);
-  }, [dirty, onDirtyChange]);
-
-  const copyModel = async () => {
-    try {
-      await navigator.clipboard.writeText(baseline.model);
-      setCopied(true);
-      window.setTimeout(() => setCopied(false), 1200);
-    } catch {
-      /* ignore */
-    }
-  };
-
-  const save = async () => {
-    const code = validateComboDraft(draft, {
-      existingIds: otherIds,
-      existingAliases: otherAliases,
-      isCreate,
-      providers: providerMap,
-    });
-    if (code) {
-      setMsg({ ok: false, text: t(`cws.err.${code}`) });
-      return;
-    }
-    setBusy(true);
-    const trimmedId = draft.id.trim();
-    const alias = draft.alias?.trim() || null;
-    const item = {
-      ...draft,
-      id: trimmedId,
-      alias,
-      model: comboPublicModelId(trimmedId, alias),
-    };
-    const renameFrom = !isCreate && trimmedId !== baseline.id ? baseline.id : undefined;
-    const res = await onSave(item, isCreate, renameFrom);
-    setBusy(false);
-    if (!res.ok) {
-      setMsg({ ok: false, text: res.error || t("cws.saveFailed") });
-      return;
-    }
-    setMsg({
-      ok: true,
-      text: isCreate ? t("cws.created", { model: item.model }) : t("cws.saved"),
-    });
-    onSaved(item);
-  };
-
-  const headerModel = isCreate
-    ? (draft.id.trim() ? comboPublicModelId(draft.id, draft.alias) : t("cws.addTitle"))
-    : baseline.model;
-
-  return (
-    <div className="combos-workspace-detail">
-      <div className="combos-workspace-detail-head">
-        {onBack && (
-          <button type="button" className="btn btn-ghost btn-sm pwi-back-overview" onClick={onBack} aria-label={t("cws.backToAll")}>
-            <IconChevron style={{ width: 14, height: 14, transform: "rotate(180deg)" }} aria-hidden="true" />
-            {t("cws.allCombos")}
-          </button>
-        )}
-        <h2 className="combos-workspace-detail-title">{headerModel}</h2>
-        {!isCreate && (
-          <button type="button" className="chip cwi-copy-chip" onClick={() => { void copyModel(); }} title={t("cws.copyModel")}>
-            {copied ? t("cws.copied") : t("cws.copyModel")}
-          </button>
-        )}
-        <div className="combos-workspace-detail-actions">
-          {!isCreate && onRequestRemove && (
-            <button type="button" className="btn btn-ghost btn-sm" onClick={onRequestRemove}>
-              <IconTrash width={14} height={14} /> {t("common.remove")}
-            </button>
-          )}
-          <button type="button" className="btn btn-primary btn-sm" disabled={(!isCreate && !dirty) || busy} onClick={() => { void save(); }}>
-            {busy ? t("common.saving") : t(isCreate ? "cws.create" : "common.save")}
-          </button>
-        </div>
-      </div>
-
-      {msg && <Notice tone={msg.ok ? "ok" : "err"}>{msg.text}</Notice>}
-
-      <div className="combos-workspace-tabs" role="tablist">
-        <button type="button" role="tab" aria-selected={tab === "config"} className={`combos-workspace-tab${tab === "config" ? " combos-workspace-tab--active" : ""}`} onClick={() => setTab("config")}>
-          {t("cws.tab.config")}
-        </button>
-        <button type="button" role="tab" aria-selected={tab === "about"} className={`combos-workspace-tab${tab === "about" ? " combos-workspace-tab--active" : ""}`} onClick={() => setTab("about")}>
-          {t("cws.tab.about")}
-        </button>
-      </div>
-
-      <div className="combos-workspace-tab-content" role="tabpanel">
-        {tab === "config" ? (
-          <div className="cwi-form-grid">
-            <div className="cwi-field">
-              <label htmlFor="cwi-edit-id">{t("cws.field.id")}</label>
-              <input
-                id="cwi-edit-id"
-                className="input mono"
-                value={draft.id}
-                disabled={busy}
-                onChange={(e) => setDraft((d) => ({
-                  ...d,
-                  id: e.target.value,
-                  model: comboPublicModelId(e.target.value, d.alias),
-                }))}
-              />
-              <p className="muted" style={{ fontSize: 12, margin: "4px 0 0" }}>
-                {isCreate
-                  ? t("cws.field.idInternalHint")
-                  : t("cws.field.idHintEdit", { model: comboPublicModelId(draft.id, draft.alias) })}
-              </p>
-            </div>
-            <div className="cwi-field">
-              <label htmlFor="cwi-edit-alias">{t("cws.field.alias")}</label>
-              <input
-                id="cwi-edit-alias"
-                className="input mono"
-                value={draft.alias ?? ""}
-                placeholder={comboModelId(draft.id.trim() || "…")}
-                disabled={busy}
-                onChange={(e) => setDraft((d) => ({
-                  ...d,
-                  alias: e.target.value.trim() ? e.target.value : null,
-                  model: comboPublicModelId(d.id, e.target.value),
-                }))}
-              />
-              <p className="muted" style={{ fontSize: 12, margin: "4px 0 0" }}>
-                {t("cws.field.aliasHint")}
-              </p>
-            </div>
-            <div className="cwi-field">
-              <label>{t("cws.strategy")}</label>
-              <StrategySeg
-                value={draft.strategy}
-                disabled={busy}
-                onChange={(strategy) => setDraft((d) => ({ ...d, strategy }))}
-              />
-              <p className="muted" style={{ fontSize: 12, margin: "6px 0 0" }}>
-                {draft.strategy === "failover" ? t("cws.strategy.failoverHint") : t("cws.strategy.roundRobinHint")}
-              </p>
-            </div>
-            <div className="cwi-field">
-              <label htmlFor="cwi-effort">{t("cws.field.defaultEffort")}</label>
-              <EffortSelect
-                id="cwi-effort"
-                value={draft.defaultEffort}
-                disabled={busy}
-                onChange={(defaultEffort) => setDraft((d) => ({ ...d, defaultEffort }))}
-              />
-              <p className="muted" style={{ fontSize: 12, margin: "4px 0 0" }}>
-                {t("cws.field.defaultEffortHint")}
-              </p>
-            </div>
-            {draft.strategy === "round-robin" && (
-              <div className="cwi-field">
-                <label htmlFor="cwi-sticky">{t("cws.field.stickyLimit")}</label>
-                <input
-                  id="cwi-sticky"
-                  className="input mono"
-                  type="number"
-                  min={1}
-                  max={100}
-                  value={draft.stickyLimit}
-                  disabled={busy}
-                  onChange={(e) => setDraft((d) => ({ ...d, stickyLimit: Number(e.target.value) }))}
-                />
-              </div>
-            )}
-            <div className="cwi-field">
-              <label>{t("cws.targets")}</label>
-              <p className="muted" style={{ fontSize: 12, margin: "0 0 8px" }}>
-                {draft.strategy === "failover" ? t("cws.targets.failoverHint") : t("cws.targets.roundRobinHint")}
-              </p>
-              <TargetEditor
-                targets={draft.targets}
-                strategy={draft.strategy}
-                providers={providers}
-                models={models}
-                onChange={(targets) => setDraft((d) => ({ ...d, targets }))}
-              />
-            </div>
-          </div>
-        ) : (
-          <section className="pwi-section">
-            <h3 className="pwi-section-title">{t("cws.aboutTitle")}</h3>
-            <p className="muted" style={{ margin: 0 }}>{t("cws.aboutBody")}</p>
-          </section>
-        )}
-      </div>
-    </div>
-  );
-}
+import { IconChevron, IconPlus, IconSearch, IconShuffle } from "../icons";
+import { useT } from "../i18n/shared";
+import { AddComboModal } from "./combo-workspace-add-modal";
+import { DetailPanel } from "./combo-workspace-detail-panel";
+import { RemoveComboDialog, UnsavedLeaveDialog } from "./combo-workspace-dialogs";
+import { OverviewPanel } from "./combo-workspace-overview-panel";
+import type { ComboWorkspaceProps } from "./combo-workspace-types";
+
+export type { ModelOption, ProviderOption, ComboWorkspaceProps } from "./combo-workspace-types";
 
 export default function ComboWorkspace({
   combos,
diff --git a/gui/src/components/combo-workspace-add-modal.tsx b/gui/src/components/combo-workspace-add-modal.tsx
new file mode 100644
index 000000000..acd07095f
--- /dev/null
+++ b/gui/src/components/combo-workspace-add-modal.tsx
@@ -0,0 +1,198 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  type ComboItem,
+  comboPublicModelId,
+  emptyDraft,
+  validateComboDraft,
+} from "../combo-workspace-data";
+import { IconX } from "../icons";
+import { useT } from "../i18n/shared";
+import { Notice } from "../ui";
+import type { ModelOption, ProviderOption } from "./combo-workspace-types";
+import { EffortSelect, StrategySeg, TargetEditor } from "./combo-workspace-controls";
+
+export function AddComboModal({
+  existingIds,
+  existingAliases,
+  providerMap,
+  providers,
+  models,
+  onClose,
+  onSubmit,
+}: {
+  existingIds: string[];
+  existingAliases: string[];
+  providerMap: Readonly<Record<string, { disabled?: boolean }>>;
+  providers: ProviderOption[];
+  models: ModelOption[];
+  onClose: () => void;
+  onSubmit: (item: ComboItem) => Promise<{ ok: boolean; error?: string }>;
+}) {
+  const t = useT();
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const [draft, setDraft] = useState<ComboItem>(() => emptyDraft());
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (dialog && !dialog.open) dialog.showModal();
+  }, []);
+
+  const requestClose = useCallback(() => {
+    if (!busy) onClose();
+  }, [busy, onClose]);
+
+  const handleCancel = useCallback((e: React.SyntheticEvent) => {
+    e.preventDefault();
+    requestClose();
+  }, [requestClose]);
+
+  const submit = async () => {
+    const code = validateComboDraft(draft, {
+      existingIds,
+      existingAliases,
+      isCreate: true,
+      providers: providerMap,
+    });
+    if (code) {
+      setError(t(`cws.err.${code}`));
+      return;
+    }
+    setBusy(true);
+    setError("");
+    const id = draft.id.trim();
+    const alias = draft.alias?.trim() || null;
+    try {
+      const res = await onSubmit({ ...draft, id, alias, model: comboPublicModelId(id, alias) });
+      if (!res.ok) {
+        setError(res.error || t("cws.saveFailed"));
+        return;
+      }
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <dialog
+      ref={dialogRef}
+      className="modal-overlay"
+      aria-labelledby="cwi-add-title"
+      onCancel={handleCancel}
+    >
+      <div className="modal-card" style={{ width: "min(560px, 94vw)" }} onClick={(e) => e.stopPropagation()}>
+        <div className="row" style={{ justifyContent: "space-between", marginBottom: 8 }}>
+          <h3 id="cwi-add-title" style={{ margin: 0 }}>{t("cws.addTitle")}</h3>
+          <button type="button" className="btn btn-ghost btn-sm" onClick={onClose} disabled={busy} aria-label={t("common.close")}>
+            <IconX width={16} height={16} />
+          </button>
+        </div>
+        <p className="muted" style={{ marginTop: 0 }}>{t("cws.addSubtitle")}</p>
+        {error && <Notice tone="err">{error}</Notice>}
+        <div className="cwi-modal-form">
+          <div className="cwi-field">
+            <label htmlFor="cwi-new-id">{t("cws.field.id")}</label>
+            <input
+              id="cwi-new-id"
+              className="input mono"
+              value={draft.id}
+              disabled={busy}
+              onChange={(e) => setDraft((d) => ({
+                ...d,
+                id: e.target.value,
+                model: comboPublicModelId(e.target.value, d.alias),
+              }))}
+            />
+            <p className="muted" style={{ fontSize: 12, margin: "4px 0 0" }}>
+              {t("cws.field.idInternalHint")}
+            </p>
+          </div>
+          <div className="cwi-field">
+            <label htmlFor="cwi-new-alias">{t("cws.field.alias")}</label>
+            <input
+              id="cwi-new-alias"
+              className="input mono"
+              value={draft.alias ?? ""}
+              placeholder={t("cws.field.aliasPlaceholder")}
+              disabled={busy}
+              onChange={(e) => setDraft((d) => ({
+                ...d,
+                alias: e.target.value.trim() ? e.target.value : null,
+                model: comboPublicModelId(d.id, e.target.value),
+              }))}
+            />
+            <p className="muted" style={{ fontSize: 12, margin: "4px 0 0" }}>
+              {t("cws.field.aliasHint")}
+            </p>
+            <p className="muted" style={{ fontSize: 12, margin: "4px 0 0" }}>
+              {t("cws.field.idHint", {
+                model: draft.id.trim() ? comboPublicModelId(draft.id, draft.alias) : "…",
+              })}
+            </p>
+          </div>
+          <div className="cwi-field">
+            <span className="field-label">{t("cws.strategy")}</span>
+            <StrategySeg
+              value={draft.strategy}
+              disabled={busy}
+              onChange={(strategy) => setDraft((d) => ({ ...d, strategy }))}
+            />
+            <p className="muted" style={{ fontSize: 12, margin: "6px 0 0" }}>
+              {draft.strategy === "failover" ? t("cws.strategy.failoverHint") : t("cws.strategy.roundRobinHint")}
+            </p>
+          </div>
+          <div className="cwi-field">
+            <label htmlFor="cwi-new-effort">{t("cws.field.defaultEffort")}</label>
+            <EffortSelect
+              id="cwi-new-effort"
+              value={draft.defaultEffort}
+              disabled={busy}
+              onChange={(defaultEffort) => setDraft((d) => ({ ...d, defaultEffort }))}
+            />
+            <p className="muted" style={{ fontSize: 12, margin: "4px 0 0" }}>
+              {t("cws.field.defaultEffortHint")}
+            </p>
+          </div>
+          {draft.strategy === "round-robin" && (
+            <div className="cwi-field">
+              <label htmlFor="cwi-new-sticky">{t("cws.field.stickyLimit")}</label>
+              <input
+                id="cwi-new-sticky"
+                className="input mono"
+                type="number"
+                min={1}
+                max={100}
+                value={draft.stickyLimit}
+                disabled={busy}
+                onChange={(e) => setDraft((d) => ({ ...d, stickyLimit: Number(e.target.value) }))}
+              />
+              <p className="muted" style={{ fontSize: 12, margin: "4px 0 0" }}>
+                {t("cws.field.stickyLimitHint")}
+              </p>
+            </div>
+          )}
+          <div className="cwi-field">
+            <span className="field-label">{t("cws.targets")}</span>
+            <p className="muted" style={{ fontSize: 12, margin: "0 0 8px" }}>
+              {draft.strategy === "failover" ? t("cws.targets.failoverHint") : t("cws.targets.roundRobinHint")}
+            </p>
+            <TargetEditor
+              targets={draft.targets}
+              strategy={draft.strategy}
+              providers={providers}
+              models={models}
+              onChange={(targets) => setDraft((d) => ({ ...d, targets }))}
+            />
+          </div>
+        </div>
+        <div className="cwi-modal-actions">
+          <button type="button" className="btn btn-ghost" onClick={onClose} disabled={busy}>{t("common.cancel")}</button>
+          <button type="button" className="btn btn-primary" onClick={() => { void submit(); }} disabled={busy}>
+            {busy ? t("common.saving") : t("cws.create")}
+          </button>
+        </div>
+      </div>
+    </dialog>
+  );
+}
diff --git a/gui/src/components/combo-workspace-controls.tsx b/gui/src/components/combo-workspace-controls.tsx
new file mode 100644
index 000000000..817500df3
--- /dev/null
+++ b/gui/src/components/combo-workspace-controls.tsx
@@ -0,0 +1,230 @@
+import { useState } from "react";
+import type { ComboEffort, ComboStrategy, ComboTarget } from "../combo-workspace-data";
+import { COMBO_EFFORTS, newComboTarget } from "../combo-workspace-data";
+import { IconGrip, IconPlus, IconTrash } from "../icons";
+import { useT } from "../i18n/shared";
+import type { ModelOption, ProviderOption } from "./combo-workspace-types";
+import { enabledProviders, modelsForProvider } from "./combo-workspace-utils";
+
+export function StrategySeg({
+  value,
+  onChange,
+  disabled,
+}: {
+  value: ComboStrategy;
+  onChange: (next: ComboStrategy) => void;
+  disabled?: boolean;
+}) {
+  const t = useT();
+  return (
+    <div className="cwi-strategy-seg" role="radiogroup" aria-label={t("cws.strategy")}>
+      {([
+        ["failover", "cws.strategy.failover"],
+        ["round-robin", "cws.strategy.roundRobin"],
+      ] as const).map(([id, key]) => (
+        <button
+          key={id}
+          type="button"
+          role="radio"
+          aria-checked={value === id}
+          className={`btn btn-sm${value === id ? " btn-primary" : " btn-ghost"}`}
+          disabled={disabled}
+          onClick={() => onChange(id)}
+        >
+          {t(key)}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function EffortSelect({
+  id,
+  value,
+  onChange,
+  disabled,
+}: {
+  id: string;
+  value: ComboEffort | null;
+  onChange: (next: ComboEffort | null) => void;
+  disabled?: boolean;
+}) {
+  const t = useT();
+  return (
+    <select
+      id={id}
+      className="input"
+      value={value ?? ""}
+      disabled={disabled}
+      aria-label={t("cws.field.defaultEffort")}
+      onChange={(e) => onChange(e.target.value === "" ? null : e.target.value as ComboEffort)}
+    >
+      <option value="">{t("cws.field.defaultEffortNone")}</option>
+      {COMBO_EFFORTS.map((effort) => (
+        <option key={effort} value={effort}>{effort}</option>
+      ))}
+    </select>
+  );
+}
+
+export function TargetEditor({
+  targets,
+  strategy,
+  providers,
+  models,
+  onChange,
+}: {
+  targets: ComboTarget[];
+  strategy: ComboStrategy;
+  providers: ProviderOption[];
+  models: ModelOption[];
+  onChange: (next: ComboTarget[]) => void;
+}) {
+  const t = useT();
+  const provs = enabledProviders(providers);
+  const [dragIndex, setDragIndex] = useState<number | null>(null);
+  const [overIndex, setOverIndex] = useState<number | null>(null);
+
+  const update = (index: number, patch: Partial<ComboTarget>) => {
+    onChange(targets.map((row, i) => (i === index ? { ...row, ...patch } : row)));
+  };
+
+  const reorder = (from: number, to: number) => {
+    if (from === to || from < 0 || to < 0 || from >= targets.length || to >= targets.length) return;
+    const copy = [...targets];
+    const [moved] = copy.splice(from, 1);
+    copy.splice(to, 0, moved!);
+    onChange(copy);
+  };
+
+  return (
+    <div className="cwi-target-list">
+      {targets.map((row, index) => {
+        const currentProvider = providers.find((provider) => provider.name === row.provider);
+        const providerOptions = currentProvider && !provs.some((provider) => provider.name === row.provider)
+          ? [...provs, currentProvider]
+          : provs;
+        const modelIds = modelsForProvider(models, row.provider, providers);
+        const options = row.model && !modelIds.includes(row.model)
+          ? [row.model, ...modelIds]
+          : modelIds;
+        const modelSelectDisabled = !row.provider;
+        const dragging = dragIndex === index;
+        const dropTarget = overIndex === index && dragIndex !== null && dragIndex !== index;
+        return (
+          <div
+            key={row.clientKey ?? `${row.provider}:${row.model}`}
+            className={[
+              "cwi-target-row",
+              strategy === "failover" ? "cwi-target-row--failover" : "",
+              dragging ? "cwi-target-row--dragging" : "",
+              dropTarget ? "cwi-target-row--drop" : "",
+            ].filter(Boolean).join(" ")}
+            onDragOver={(e) => {
+              if (dragIndex === null) return;
+              e.preventDefault();
+              e.dataTransfer.dropEffect = "move";
+              if (overIndex !== index) setOverIndex(index);
+            }}
+            onDrop={(e) => {
+              e.preventDefault();
+              if (dragIndex !== null) reorder(dragIndex, index);
+              setDragIndex(null);
+              setOverIndex(null);
+            }}
+            onDragEnd={() => {
+              setDragIndex(null);
+              setOverIndex(null);
+            }}
+          >
+            <button
+              type="button"
+              className="cwi-target-grip"
+              draggable
+              aria-label={t("cws.target.drag")}
+              title={t("cws.target.drag")}
+              onDragStart={(e) => {
+                setDragIndex(index);
+                e.dataTransfer.effectAllowed = "move";
+                e.dataTransfer.setData("text/plain", String(index));
+              }}
+            >
+              <IconGrip width={14} height={14} aria-hidden="true" />
+            </button>
+            <select
+              className="input"
+              value={row.provider}
+              aria-label={t("cws.target.provider")}
+              onChange={(e) => {
+                const provider = e.target.value;
+                const first = modelsForProvider(models, provider, providers)[0] ?? "";
+                update(index, { provider, model: first });
+              }}
+            >
+              <option value="">{t("cws.target.pickProvider")}</option>
+              {providerOptions.map((p) => (
+                <option key={p.name} value={p.name}>
+                  {p.disabled ? t("cws.target.disabled", { name: p.name }) : p.name}
+                </option>
+              ))}
+            </select>
+            <select
+              className="input"
+              value={row.model}
+              disabled={modelSelectDisabled}
+              aria-label={t("cws.target.model")}
+              onChange={(e) => update(index, { model: e.target.value })}
+            >
+              <option value="">
+                {modelSelectDisabled
+                  ? t("cws.target.pickProviderFirst")
+                  : options.length === 0
+                    ? t("cws.target.noModels")
+                    : t("cws.target.pickModel")}
+              </option>
+              {options.map((id) => (
+                <option key={id} value={id}>{id}</option>
+              ))}
+            </select>
+            {strategy === "round-robin" && (
+              <input
+                className="input mono"
+                type="number"
+                min={1}
+                max={10000}
+                value={row.weight ?? 1}
+                aria-label={t("cws.target.weight")}
+                onChange={(e) => {
+                  const raw = e.target.value;
+                  if (raw === "") return;
+                  const weight = Number(raw);
+                  if (!Number.isFinite(weight)) return;
+                  update(index, { weight });
+                }}
+              />
+            )}
+            <div className="cwi-target-actions">
+              <button
+                type="button"
+                className="btn btn-ghost btn-sm"
+                disabled={targets.length <= 1}
+                onClick={() => onChange(targets.filter((_, i) => i !== index))}
+                aria-label={t("common.remove")}
+              >
+                <IconTrash width={14} height={14} />
+              </button>
+            </div>
+          </div>
+        );
+      })}
+      <button
+        type="button"
+        className="btn btn-ghost btn-sm"
+        style={{ alignSelf: "flex-start" }}
+        onClick={() => onChange([...targets, newComboTarget()])}
+      >
+        <IconPlus width={14} height={14} /> {t("cws.target.add")}
+      </button>
+    </div>
+  );
+}
diff --git a/gui/src/components/combo-workspace-detail-panel.tsx b/gui/src/components/combo-workspace-detail-panel.tsx
new file mode 100644
index 000000000..2f630e6a4
--- /dev/null
+++ b/gui/src/components/combo-workspace-detail-panel.tsx
@@ -0,0 +1,269 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  type ComboItem,
+  comboModelId,
+  comboPublicModelId,
+  draftEquals,
+  validateComboDraft,
+} from "../combo-workspace-data";
+import { IconChevron, IconTrash } from "../icons";
+import { useT } from "../i18n/shared";
+import { Notice } from "../ui";
+import type { ModelOption, ProviderOption } from "./combo-workspace-types";
+import { EffortSelect, StrategySeg, TargetEditor } from "./combo-workspace-controls";
+
+type DetailTab = "config" | "about";
+
+export function DetailPanel({
+  baseline,
+  isCreate = false,
+  otherIds,
+  otherAliases,
+  providerMap,
+  providers,
+  models,
+  onBack,
+  onSaved,
+  onRequestRemove,
+  onSave,
+  onDirtyChange,
+}: {
+  baseline: ComboItem;
+  isCreate?: boolean;
+  /** Ids of all OTHER combos — rename collisions validate against these. */
+  otherIds: string[];
+  /** Aliases of all OTHER combos — alias uniqueness validates against these. */
+  otherAliases: string[];
+  providerMap: Readonly<Record<string, { disabled?: boolean }>>;
+  providers: ProviderOption[];
+  models: ModelOption[];
+  onBack?: () => void;
+  onSaved: (item: ComboItem) => void;
+  onRequestRemove?: () => void;
+  onSave: (item: ComboItem, isCreate: boolean, renameFrom?: string) => Promise<{ ok: boolean; error?: string }>;
+  onDirtyChange: (dirty: boolean) => void;
+}) {
+  const t = useT();
+  const [tab, setTab] = useState<DetailTab>("config");
+  const [draft, setDraft] = useState<ComboItem>(baseline);
+  const [busy, setBusy] = useState(false);
+  const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null);
+  const [copied, setCopied] = useState(false);
+  const dirty = !draftEquals(draft, baseline);
+  const baselineSyncKey = `${baseline.id}:${baseline.alias ?? ""}:${baseline.strategy}:${baseline.stickyLimit}:${baseline.defaultEffort}:${baseline.targets.map((t) => `${t.provider}/${t.model}:${t.weight ?? 1}`).join(",")}`;
+
+  const onDirtyChangeRef = useRef(onDirtyChange);
+  useEffect(() => {
+    onDirtyChangeRef.current = onDirtyChange;
+  }, [onDirtyChange]);
+
+  const updateDraft = useCallback((next: ComboItem | ((prev: ComboItem) => ComboItem)) => {
+    setDraft(prev => {
+      const resolved = typeof next === "function" ? next(prev) : next;
+      onDirtyChangeRef.current(!draftEquals(resolved, baseline));
+      return resolved;
+    });
+  }, [baseline]);
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => {
+      setDraft(baseline);
+      setMsg(null);
+      setTab("config");
+      onDirtyChangeRef.current(false);
+    }, 0);
+    return () => window.clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentional: key captures baseline payload
+  }, [baselineSyncKey]);
+
+  const copyModel = async () => {
+    try {
+      await navigator.clipboard.writeText(baseline.model);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1200);
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const save = async () => {
+    const code = validateComboDraft(draft, {
+      existingIds: otherIds,
+      existingAliases: otherAliases,
+      isCreate,
+      providers: providerMap,
+    });
+    if (code) {
+      setMsg({ ok: false, text: t(`cws.err.${code}`) });
+      return;
+    }
+    setBusy(true);
+    const trimmedId = draft.id.trim();
+    const alias = draft.alias?.trim() || null;
+    const item = {
+      ...draft,
+      id: trimmedId,
+      alias,
+      model: comboPublicModelId(trimmedId, alias),
+    };
+    const renameFrom = !isCreate && trimmedId !== baseline.id ? baseline.id : undefined;
+    try {
+      const res = await onSave(item, isCreate, renameFrom);
+      if (!res.ok) {
+        setMsg({ ok: false, text: res.error || t("cws.saveFailed") });
+        return;
+      }
+      setMsg({
+        ok: true,
+        text: isCreate ? t("cws.created", { model: item.model }) : t("cws.saved"),
+      });
+      onSaved(item);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const headerModel = isCreate
+    ? (draft.id.trim() ? comboPublicModelId(draft.id, draft.alias) : t("cws.addTitle"))
+    : baseline.model;
+
+  return (
+    <div className="combos-workspace-detail">
+      <div className="combos-workspace-detail-head">
+        {onBack && (
+          <button type="button" className="btn btn-ghost btn-sm pwi-back-overview" onClick={onBack} aria-label={t("cws.backToAll")}>
+            <IconChevron style={{ width: 14, height: 14, transform: "rotate(180deg)" }} aria-hidden="true" />
+            {t("cws.allCombos")}
+          </button>
+        )}
+        <h2 className="combos-workspace-detail-title">{headerModel}</h2>
+        {!isCreate && (
+          <button type="button" className="chip cwi-copy-chip" onClick={() => { void copyModel(); }} title={t("cws.copyModel")}>
+            {copied ? t("cws.copied") : t("cws.copyModel")}
+          </button>
+        )}
+        <div className="combos-workspace-detail-actions">
+          {!isCreate && onRequestRemove && (
+            <button type="button" className="btn btn-ghost btn-sm" onClick={onRequestRemove}>
+              <IconTrash width={14} height={14} /> {t("common.remove")}
+            </button>
+          )}
+          <button type="button" className="btn btn-primary btn-sm" disabled={(!isCreate && !dirty) || busy} onClick={() => { void save(); }}>
+            {busy ? t("common.saving") : t(isCreate ? "cws.create" : "common.save")}
+          </button>
+        </div>
+      </div>
+
+      {msg && <Notice tone={msg.ok ? "ok" : "err"}>{msg.text}</Notice>}
+
+      <div className="combos-workspace-tabs" role="tablist">
+        <button type="button" role="tab" aria-selected={tab === "config"} className={`combos-workspace-tab${tab === "config" ? " combos-workspace-tab--active" : ""}`} onClick={() => setTab("config")}>
+          {t("cws.tab.config")}
+        </button>
+        <button type="button" role="tab" aria-selected={tab === "about"} className={`combos-workspace-tab${tab === "about" ? " combos-workspace-tab--active" : ""}`} onClick={() => setTab("about")}>
+          {t("cws.tab.about")}
+        </button>
+      </div>
+
+      <div className="combos-workspace-tab-content" role="tabpanel">
+        {tab === "config" ? (
+          <div className="cwi-form-grid">
+            <div className="cwi-field">
+              <label htmlFor="cwi-edit-id">{t("cws.field.id")}</label>
+              <input
+                id="cwi-edit-id"
+                className="input mono"
+                value={draft.id}
+                disabled={busy}
+                onChange={(e) => updateDraft((d) => ({
+                  ...d,
+                  id: e.target.value,
+                  model: comboPublicModelId(e.target.value, d.alias),
+                }))}
+              />
+              <p className="muted" style={{ fontSize: 12, margin: "4px 0 0" }}>
+                {isCreate
+                  ? t("cws.field.idInternalHint")
+                  : t("cws.field.idHintEdit", { model: comboPublicModelId(draft.id, draft.alias) })}
+              </p>
+            </div>
+            <div className="cwi-field">
+              <label htmlFor="cwi-edit-alias">{t("cws.field.alias")}</label>
+              <input
+                id="cwi-edit-alias"
+                className="input mono"
+                value={draft.alias ?? ""}
+                placeholder={comboModelId(draft.id.trim() || "…")}
+                disabled={busy}
+                onChange={(e) => updateDraft((d) => ({
+                  ...d,
+                  alias: e.target.value.trim() ? e.target.value : null,
+                  model: comboPublicModelId(d.id, e.target.value),
+                }))}
+              />
+              <p className="muted" style={{ fontSize: 12, margin: "4px 0 0" }}>
+                {t("cws.field.aliasHint")}
+              </p>
+            </div>
+            <div className="cwi-field">
+              <span className="field-label">{t("cws.strategy")}</span>
+              <StrategySeg
+                value={draft.strategy}
+                disabled={busy}
+                onChange={(strategy) => updateDraft((d) => ({ ...d, strategy }))}
+              />
+              <p className="muted" style={{ fontSize: 12, margin: "6px 0 0" }}>
+                {draft.strategy === "failover" ? t("cws.strategy.failoverHint") : t("cws.strategy.roundRobinHint")}
+              </p>
+            </div>
+            <div className="cwi-field">
+              <label htmlFor="cwi-effort">{t("cws.field.defaultEffort")}</label>
+              <EffortSelect
+                id="cwi-effort"
+                value={draft.defaultEffort}
+                disabled={busy}
+                onChange={(defaultEffort) => updateDraft((d) => ({ ...d, defaultEffort }))}
+              />
+              <p className="muted" style={{ fontSize: 12, margin: "4px 0 0" }}>
+                {t("cws.field.defaultEffortHint")}
+              </p>
+            </div>
+            {draft.strategy === "round-robin" && (
+              <div className="cwi-field">
+                <label htmlFor="cwi-sticky">{t("cws.field.stickyLimit")}</label>
+                <input
+                  id="cwi-sticky"
+                  className="input mono"
+                  type="number"
+                  min={1}
+                  max={100}
+                  value={draft.stickyLimit}
+                  disabled={busy}
+                  onChange={(e) => updateDraft((d) => ({ ...d, stickyLimit: Number(e.target.value) }))}
+                />
+              </div>
+            )}
+            <div className="cwi-field">
+              <span className="field-label">{t("cws.targets")}</span>
+              <p className="muted" style={{ fontSize: 12, margin: "0 0 8px" }}>
+                {draft.strategy === "failover" ? t("cws.targets.failoverHint") : t("cws.targets.roundRobinHint")}
+              </p>
+              <TargetEditor
+                targets={draft.targets}
+                strategy={draft.strategy}
+                providers={providers}
+                models={models}
+                onChange={(targets) => updateDraft((d) => ({ ...d, targets }))}
+              />
+            </div>
+          </div>
+        ) : (
+          <section className="pwi-section">
+            <h3 className="pwi-section-title">{t("cws.aboutTitle")}</h3>
+            <p className="muted" style={{ margin: 0 }}>{t("cws.aboutBody")}</p>
+          </section>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/gui/src/components/combo-workspace-dialogs.tsx b/gui/src/components/combo-workspace-dialogs.tsx
new file mode 100644
index 000000000..61b13b73b
--- /dev/null
+++ b/gui/src/components/combo-workspace-dialogs.tsx
@@ -0,0 +1,86 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useT } from "../i18n/shared";
+
+export function RemoveComboDialog({
+  model,
+  onCancel,
+  onConfirm,
+}: {
+  model: string;
+  onCancel: () => void;
+  onConfirm: () => void;
+}) {
+  const t = useT();
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (dialog && !dialog.open) dialog.showModal();
+  }, []);
+
+  const handleCancel = useCallback((e: React.SyntheticEvent) => {
+    e.preventDefault();
+    onCancel();
+  }, [onCancel]);
+
+  return (
+    <dialog
+      ref={dialogRef}
+      className="modal-overlay"
+      aria-labelledby="cwi-remove-title"
+      onCancel={handleCancel}
+    >
+      <button type="button" className="modal-scrim" aria-label={t("common.close")} onClick={onCancel} />
+      <div className="modal-card pwi-remove-confirm-card" onClick={(e) => e.stopPropagation()}>
+        <h3 id="cwi-remove-title" className="pwi-remove-confirm-title">
+          {t("cws.removeConfirmTitle", { model })}
+        </h3>
+        <p className="muted pwi-remove-confirm-desc">{t("cws.removeConfirmDesc")}</p>
+        <div className="pwi-remove-confirm-actions">
+          <button type="button" className="btn btn-ghost" onClick={onCancel}>{t("common.cancel")}</button>
+          <button type="button" className="btn pwi-remove-confirm-danger" onClick={onConfirm}>{t("common.remove")}</button>
+        </div>
+      </div>
+    </dialog>
+  );
+}
+
+export function UnsavedLeaveDialog({
+  onKeep,
+  onDiscard,
+}: {
+  onKeep: () => void;
+  onDiscard: () => void;
+}) {
+  const t = useT();
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (dialog && !dialog.open) dialog.showModal();
+  }, []);
+
+  const handleCancel = useCallback((e: React.SyntheticEvent) => {
+    e.preventDefault();
+    onKeep();
+  }, [onKeep]);
+
+  return (
+    <dialog
+      ref={dialogRef}
+      className="modal-overlay"
+      aria-labelledby="cwi-unsaved-title"
+      onCancel={handleCancel}
+    >
+      <button type="button" className="modal-scrim" aria-label={t("common.close")} onClick={onKeep} />
+      <div className="modal-card pwi-json-unsaved-card" onClick={(e) => e.stopPropagation()}>
+        <h3 id="cwi-unsaved-title" className="pwi-json-unsaved-title">{t("cws.unsavedTitle")}</h3>
+        <p className="muted pwi-json-unsaved-desc">{t("cws.unsavedDesc")}</p>
+        <div className="pwi-json-unsaved-actions">
+          <button type="button" className="btn btn-ghost" onClick={onKeep}>{t("cws.keepEditing")}</button>
+          <button type="button" className="btn btn-danger" onClick={onDiscard}>{t("common.discard")}</button>
+        </div>
+      </div>
+    </dialog>
+  );
+}
diff --git a/gui/src/components/combo-workspace-overview-panel.tsx b/gui/src/components/combo-workspace-overview-panel.tsx
new file mode 100644
index 000000000..463041ef0
--- /dev/null
+++ b/gui/src/components/combo-workspace-overview-panel.tsx
@@ -0,0 +1,58 @@
+import type { ComboItem } from "../combo-workspace-data";
+import { buildComboAttention, groupCombos } from "../combo-workspace-data";
+import { IconAlert, IconChevron, IconPlus } from "../icons";
+import { useT } from "../i18n/shared";
+
+export function OverviewPanel({
+  combos,
+  onSelect,
+  onAdd,
+}: {
+  combos: ComboItem[];
+  onSelect: (id: string) => void;
+  onAdd: () => void;
+}) {
+  const t = useT();
+  const sections = groupCombos(combos);
+  const attention = buildComboAttention(combos);
+
+  return (
+    <div className="combos-workspace-overview">
+      <div className="combos-workspace-overview-head">
+        <h2 className="combos-workspace-overview-title">{t("cws.overviewTitle")}</h2>
+        <button type="button" className="btn btn-primary btn-sm" onClick={onAdd}>
+          <IconPlus width={14} height={14} /> {t("cws.add")}
+        </button>
+      </div>
+      <p className="muted" style={{ marginTop: 0, maxWidth: "62ch" }}>{t("cws.overviewBlurb")}</p>
+      <div className="cwi-count-strip">
+        <div className="cwi-count-pill"><strong>{combos.length}</strong><span>{t("cws.count.total")}</span></div>
+        <div className="cwi-count-pill"><strong>{sections.failover.length}</strong><span>{t("cws.count.failover")}</span></div>
+        <div className="cwi-count-pill"><strong>{sections.roundRobin.length}</strong><span>{t("cws.count.roundRobin")}</span></div>
+      </div>
+
+      <section className="pwi-section" aria-label={t("cws.howTitle")}>
+        <h3 className="pwi-section-title">{t("cws.howTitle")}</h3>
+        <p className="muted" style={{ margin: 0 }}>{t("cws.howBody")}</p>
+      </section>
+
+      {attention.length > 0 && (
+        <section className="pwi-section" aria-label={t("cws.attentionTitle")}>
+          <h3 className="pwi-section-title">{t("cws.attentionTitle")}</h3>
+          <div className="cwi-attention-list">
+            {attention.map((item) => (
+              <button key={item.id} type="button" className="cwi-attention-row" onClick={() => onSelect(item.id)}>
+                <IconAlert width={14} height={14} aria-hidden="true" />
+                <code className="chip">{item.model}</code>
+                <span className="muted">
+                  {item.reason === "empty-targets" ? t("cws.attention.empty") : t("cws.attention.few")}
+                </span>
+                <IconChevron width={14} height={14} style={{ marginLeft: "auto" }} aria-hidden="true" />
+              </button>
+            ))}
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}
diff --git a/gui/src/components/combo-workspace-types.ts b/gui/src/components/combo-workspace-types.ts
new file mode 100644
index 000000000..5e8bed72c
--- /dev/null
+++ b/gui/src/components/combo-workspace-types.ts
@@ -0,0 +1,25 @@
+import type { ComboItem } from "../combo-workspace-data";
+
+export type ProviderOption = {
+  name: string;
+  disabled?: boolean;
+  hiddenFromPicker?: boolean;
+  authMode?: string;
+  adapter?: string;
+  baseUrl?: string;
+};
+export type ModelOption = { provider: string; id: string; namespaced?: string };
+
+export interface ComboWorkspaceProps {
+  combos: ComboItem[];
+  providers: ProviderOption[];
+  models: ModelOption[];
+  loading?: boolean;
+  onRefresh: () => void;
+  onSave: (item: ComboItem, isCreate: boolean, renameFrom?: string) => Promise<{ ok: boolean; error?: string }>;
+  onRemove: (id: string) => Promise<{ ok: boolean; error?: string }>;
+  onAdd: () => void;
+  adding: boolean;
+  onCloseAdd: () => void;
+  onCreated: (id: string) => void;
+}
diff --git a/gui/src/components/combo-workspace-utils.ts b/gui/src/components/combo-workspace-utils.ts
new file mode 100644
index 000000000..eccfd043e
--- /dev/null
+++ b/gui/src/components/combo-workspace-utils.ts
@@ -0,0 +1,40 @@
+import type { ModelOption, ProviderOption } from "./combo-workspace-types";
+
+export function enabledProviders(providers: ProviderOption[]): ProviderOption[] {
+  return providers
+    .filter((p) => !p.disabled && !p.hiddenFromPicker)
+    .sort((a, b) => a.name.localeCompare(b.name));
+}
+
+/** ChatGPT passthrough has no /models catalog — GPT slugs are listed under provider "openai". */
+export function isChatGptForwardOption(p: ProviderOption | undefined): boolean {
+  if (!p) return false;
+  const id = p.name.toLowerCase();
+  if (id !== "openai" && id !== "chatgpt") return false;
+  if ((p.authMode ?? "").toLowerCase() !== "forward") return false;
+  if ((p.adapter ?? "").toLowerCase() !== "openai-responses") return false;
+  const base = (p.baseUrl ?? "").replace(/\/+$/, "");
+  return !base || base.includes("chatgpt.com/backend-api/codex");
+}
+
+export function modelsForProvider(
+  models: ModelOption[],
+  provider: string,
+  providers: ProviderOption[],
+): string[] {
+  const keys = new Set<string>([provider]);
+  const meta = providers.find((p) => p.name === provider);
+  // Alias chatgpt → openai native GPT rows (forward providers don't publish their own catalog).
+  if (provider.toLowerCase() === "chatgpt" || isChatGptForwardOption(meta)) {
+    keys.add("openai");
+  }
+  const ids: string[] = [];
+  const seen = new Set<string>();
+  for (const m of models) {
+    if (!keys.has(m.provider) || !m.id) continue;
+    if (seen.has(m.id)) continue;
+    seen.add(m.id);
+    ids.push(m.id);
+  }
+  return ids.toSorted((a, b) => a.localeCompare(b));
+}
diff --git a/gui/src/pages/Combos.tsx b/gui/src/pages/Combos.tsx
index 86686b6dc..ae356ddaf 100644
--- a/gui/src/pages/Combos.tsx
+++ b/gui/src/pages/Combos.tsx
@@ -8,7 +8,7 @@ import {
 } from "../combo-workspace-data";
 import { hideRedundantChatGptForwardProviders } from "../provider-workspace/catalog";
 import { Notice } from "../ui";
-import { useT } from "../i18n";
+import { useT } from "../i18n/shared";
 
 type ProviderOption = {
   name: string;
@@ -148,7 +148,9 @@ export default function Combos({ apiBase }: { apiBase: string }) {
         headers: { "content-type": "application/json" },
         body: JSON.stringify(toPutBody(item, renameFrom ? { renameFrom } : {})),
       });
-      const data = await res.json() as unknown;
+      const data = res.ok
+        ? await res.json() as unknown
+        : await res.json().catch(() => null) as unknown;
       const serverError = responseError(data);
       if (!res.ok || serverError || !responseSucceeded(data)) {
         const err = serverError || t("cws.saveFailed");
@@ -173,7 +175,9 @@ export default function Combos({ apiBase }: { apiBase: string }) {
   const removeCombo = async (id: string) => {
     try {
       const res = await fetch(`${apiBase}/api/combos?id=${encodeURIComponent(id)}`, { method: "DELETE" });
-      const data = await res.json() as unknown;
+      const data = res.ok
+        ? await res.json() as unknown
+        : await res.json().catch(() => null) as unknown;
       const serverError = responseError(data);
       if (!res.ok || serverError || !responseSucceeded(data)) {
         const err = serverError || t("cws.removeFailed");

From 76a0fc1366684332310acd139abda2e0095bc725 Mon Sep 17 00:00:00 2001
From: Wibias <37517432+Wibias@users.noreply.github.com>
Date: Sun, 26 Jul 2026 03:04:20 +0200
Subject: [PATCH 2/4] fix(gui): address Combos review blockers for clientKey
 and dialog dismissal

Keep UI-only clientKey in the parsed view model with contract tests that prove toPutBody strips it, and restore backdrop click dismissal on combo dialogs.
---
 .../components/combo-workspace-add-modal.tsx    |  7 +++++--
 gui/src/components/combo-workspace-dialogs.tsx  |  8 ++++++--
 tests/combo-workspace-data.test.ts              | 17 ++++++++++++++---
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/gui/src/components/combo-workspace-add-modal.tsx b/gui/src/components/combo-workspace-add-modal.tsx
index acd07095f..6c1e9eda1 100644
--- a/gui/src/components/combo-workspace-add-modal.tsx
+++ b/gui/src/components/combo-workspace-add-modal.tsx
@@ -80,11 +80,14 @@ export function AddComboModal({
       className="modal-overlay"
       aria-labelledby="cwi-add-title"
       onCancel={handleCancel}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) requestClose();
+      }}
     >
       <div className="modal-card" style={{ width: "min(560px, 94vw)" }} onClick={(e) => e.stopPropagation()}>
         <div className="row" style={{ justifyContent: "space-between", marginBottom: 8 }}>
           <h3 id="cwi-add-title" style={{ margin: 0 }}>{t("cws.addTitle")}</h3>
-          <button type="button" className="btn btn-ghost btn-sm" onClick={onClose} disabled={busy} aria-label={t("common.close")}>
+          <button type="button" className="btn btn-ghost btn-sm" onClick={requestClose} disabled={busy} aria-label={t("common.close")}>
             <IconX width={16} height={16} />
           </button>
         </div>
@@ -187,7 +190,7 @@ export function AddComboModal({
           </div>
         </div>
         <div className="cwi-modal-actions">
-          <button type="button" className="btn btn-ghost" onClick={onClose} disabled={busy}>{t("common.cancel")}</button>
+          <button type="button" className="btn btn-ghost" onClick={requestClose} disabled={busy}>{t("common.cancel")}</button>
           <button type="button" className="btn btn-primary" onClick={() => { void submit(); }} disabled={busy}>
             {busy ? t("common.saving") : t("cws.create")}
           </button>
diff --git a/gui/src/components/combo-workspace-dialogs.tsx b/gui/src/components/combo-workspace-dialogs.tsx
index 61b13b73b..8899c6961 100644
--- a/gui/src/components/combo-workspace-dialogs.tsx
+++ b/gui/src/components/combo-workspace-dialogs.tsx
@@ -1,6 +1,10 @@
 import { useCallback, useEffect, useRef } from "react";
 import { useT } from "../i18n/shared";
 
+function dismissIfBackdrop(e: React.MouseEvent<HTMLDialogElement>, onDismiss: () => void) {
+  if (e.target === e.currentTarget) onDismiss();
+}
+
 export function RemoveComboDialog({
   model,
   onCancel,
@@ -29,8 +33,8 @@ export function RemoveComboDialog({
       className="modal-overlay"
       aria-labelledby="cwi-remove-title"
       onCancel={handleCancel}
+      onClick={(e) => dismissIfBackdrop(e, onCancel)}
     >
-      <button type="button" className="modal-scrim" aria-label={t("common.close")} onClick={onCancel} />
       <div className="modal-card pwi-remove-confirm-card" onClick={(e) => e.stopPropagation()}>
         <h3 id="cwi-remove-title" className="pwi-remove-confirm-title">
           {t("cws.removeConfirmTitle", { model })}
@@ -71,8 +75,8 @@ export function UnsavedLeaveDialog({
       className="modal-overlay"
       aria-labelledby="cwi-unsaved-title"
       onCancel={handleCancel}
+      onClick={(e) => dismissIfBackdrop(e, onKeep)}
     >
-      <button type="button" className="modal-scrim" aria-label={t("common.close")} onClick={onKeep} />
       <div className="modal-card pwi-json-unsaved-card" onClick={(e) => e.stopPropagation()}>
         <h3 id="cwi-unsaved-title" className="pwi-json-unsaved-title">{t("cws.unsavedTitle")}</h3>
         <p className="muted pwi-json-unsaved-desc">{t("cws.unsavedDesc")}</p>
diff --git a/tests/combo-workspace-data.test.ts b/tests/combo-workspace-data.test.ts
index 875fd9ea7..28c07982c 100644
--- a/tests/combo-workspace-data.test.ts
+++ b/tests/combo-workspace-data.test.ts
@@ -88,7 +88,7 @@ describe("combo-workspace-data", () => {
         strategy: "failover",
         stickyLimit: 1,
         defaultEffort: null,
-        targets: [{ provider: "a", model: "m1", weight: 1 }],
+        targets: [{ provider: "a", model: "m1", weight: 1, clientKey: expect.stringMatching(/^ct-\d+$/) }],
       },
       {
         id: "weighted",
@@ -98,11 +98,14 @@ describe("combo-workspace-data", () => {
         stickyLimit: 4,
         defaultEffort: "high",
         targets: [
-          { provider: "a", model: "m1", weight: 3 },
-          { provider: "b", model: "m2", weight: 1 },
+          { provider: "a", model: "m1", weight: 3, clientKey: expect.stringMatching(/^ct-\d+$/) },
+          { provider: "b", model: "m2", weight: 1, clientKey: expect.stringMatching(/^ct-\d+$/) },
         ],
       },
     ]);
+    // UI-only keys must be unique across the parsed list.
+    const keys = items.flatMap((item) => item.targets.map((t) => t.clientKey));
+    expect(new Set(keys).size).toBe(keys.length);
     expect(parseComboList([])).toEqual([]);
     expect(parseComboList({ combos: "invalid" })).toEqual([]);
   });
@@ -257,6 +260,14 @@ describe("combo-workspace-data", () => {
     });
     expect("stickyLimit" in failoverBody.combo).toBe(false);
     expect("weight" in failoverBody.combo.targets[0]!).toBe(false);
+    // clientKey is UI-only — never serialize it upstream even when present on the draft.
+    const withClientKeys = toPutBody(combo({
+      targets: [
+        { provider: "a", model: "m1", clientKey: "ct-ui-1" },
+        { provider: "b", model: "m2", clientKey: "ct-ui-2" },
+      ],
+    }));
+    expect(withClientKeys.combo.targets.every((t) => !("clientKey" in t))).toBe(true);
   });
 
   test("preserves an unset effort through parse, draft, and PUT", () => {

From 1b1ec2bf443923eb88ebc74632a6e0d4bd5d6e5f Mon Sep 17 00:00:00 2001
From: Wibias <37517432+Wibias@users.noreply.github.com>
Date: Sun, 26 Jul 2026 03:36:37 +0200
Subject: [PATCH 3/4] fix(gui): keep combo detail draft updater pure under
 Strict Mode

Compute the next draft outside setState before notifying dirty changes, and cover edit/revert/unsaved navigation in a Strict Mode regression test.
---
 .../combo-workspace-detail-panel.tsx          |  21 +--
 gui/tests/combo-workspace-dirty.test.tsx      | 170 ++++++++++++++++++
 2 files changed, 177 insertions(+), 14 deletions(-)
 create mode 100644 gui/tests/combo-workspace-dirty.test.tsx

diff --git a/gui/src/components/combo-workspace-detail-panel.tsx b/gui/src/components/combo-workspace-detail-panel.tsx
index 2f630e6a4..21879372a 100644
--- a/gui/src/components/combo-workspace-detail-panel.tsx
+++ b/gui/src/components/combo-workspace-detail-panel.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import {
   type ComboItem,
   comboModelId,
@@ -52,25 +52,18 @@ export function DetailPanel({
   const dirty = !draftEquals(draft, baseline);
   const baselineSyncKey = `${baseline.id}:${baseline.alias ?? ""}:${baseline.strategy}:${baseline.stickyLimit}:${baseline.defaultEffort}:${baseline.targets.map((t) => `${t.provider}/${t.model}:${t.weight ?? 1}`).join(",")}`;
 
-  const onDirtyChangeRef = useRef(onDirtyChange);
-  useEffect(() => {
-    onDirtyChangeRef.current = onDirtyChange;
-  }, [onDirtyChange]);
-
-  const updateDraft = useCallback((next: ComboItem | ((prev: ComboItem) => ComboItem)) => {
-    setDraft(prev => {
-      const resolved = typeof next === "function" ? next(prev) : next;
-      onDirtyChangeRef.current(!draftEquals(resolved, baseline));
-      return resolved;
-    });
-  }, [baseline]);
+  const updateDraft = useCallback((updater: (prev: ComboItem) => ComboItem) => {
+    const next = updater(draft);
+    setDraft(next);
+    onDirtyChange(!draftEquals(next, baseline));
+  }, [draft, baseline, onDirtyChange]);
 
   useEffect(() => {
     const timer = window.setTimeout(() => {
       setDraft(baseline);
       setMsg(null);
       setTab("config");
-      onDirtyChangeRef.current(false);
+      onDirtyChange(false);
     }, 0);
     return () => window.clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps -- intentional: key captures baseline payload
diff --git a/gui/tests/combo-workspace-dirty.test.tsx b/gui/tests/combo-workspace-dirty.test.tsx
new file mode 100644
index 000000000..4db60f3f1
--- /dev/null
+++ b/gui/tests/combo-workspace-dirty.test.tsx
@@ -0,0 +1,170 @@
+import { afterEach, beforeEach, expect, test } from "bun:test";
+import { Window } from "happy-dom";
+import { act, StrictMode } from "react";
+import type { Root } from "react-dom/client";
+import type { ComboItem } from "../src/combo-workspace-data";
+import ComboWorkspace from "../src/components/ComboWorkspace";
+import { LanguageProvider } from "../src/i18n/provider";
+
+const globals = ["document", "window", "navigator", "localStorage", "IS_REACT_ACT_ENVIRONMENT"] as const;
+let previousGlobals: Record<(typeof globals)[number], unknown>;
+let testWindow: Window;
+
+const combos: ComboItem[] = [
+  {
+    id: "alpha",
+    model: "combo/alpha",
+    alias: null,
+    strategy: "failover",
+    stickyLimit: 1,
+    defaultEffort: null,
+    targets: [{ provider: "openai", model: "gpt-5", clientKey: "ct-a" }],
+  },
+  {
+    id: "beta",
+    model: "combo/beta",
+    alias: null,
+    strategy: "failover",
+    stickyLimit: 1,
+    defaultEffort: null,
+    targets: [{ provider: "openai", model: "gpt-5", clientKey: "ct-b" }],
+  },
+];
+
+beforeEach(() => {
+  previousGlobals = Object.fromEntries(globals.map((key) => [key, Reflect.get(globalThis, key)])) as typeof previousGlobals;
+  testWindow = new Window({ url: "http://localhost/" });
+  Object.defineProperty(testWindow.navigator, "language", { configurable: true, value: "en-US" });
+  Object.defineProperties(globalThis, {
+    document: { configurable: true, value: testWindow.document },
+    window: { configurable: true, value: testWindow },
+    navigator: { configurable: true, value: testWindow.navigator },
+    localStorage: { configurable: true, value: testWindow.localStorage },
+  });
+  (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean })
+    .IS_REACT_ACT_ENVIRONMENT = true;
+});
+
+afterEach(() => {
+  testWindow.close();
+  for (const key of globals) {
+    Object.defineProperty(globalThis, key, { configurable: true, value: previousGlobals[key] });
+  }
+});
+
+async function flushTimers() {
+  await act(async () => {
+    await new Promise<void>((resolve) => testWindow.setTimeout(resolve, 0));
+  });
+}
+
+function setInputValue(input: HTMLInputElement, value: string) {
+  Object.getOwnPropertyDescriptor(testWindow.HTMLInputElement.prototype, "value")!
+    .set!.call(input, value);
+  input.dispatchEvent(new testWindow.Event("input", { bubbles: true }));
+}
+
+function railButton(container: HTMLElement, model: string): HTMLButtonElement {
+  const button = [...container.querySelectorAll<HTMLButtonElement>(".combos-workspace-rail-row")]
+    .find((row) => row.querySelector(".combos-workspace-rail-name")?.textContent === model);
+  if (!button) throw new Error(`rail row not found: ${model}`);
+  return button;
+}
+
+test("Strict Mode: edit, revert, and unsaved navigation keep dirty state coherent", async () => {
+  const { createRoot } = await import("react-dom/client");
+  const container = document.createElement("div");
+  document.body.append(container);
+  let root!: Root;
+
+  await act(async () => {
+    root = createRoot(container);
+    root.render(
+      <StrictMode>
+        <LanguageProvider>
+          <ComboWorkspace
+            combos={combos}
+            providers={[{ name: "openai" }]}
+            models={[{ provider: "openai", id: "gpt-5" }]}
+            loading={false}
+            onRefresh={() => {}}
+            onSave={async () => ({ ok: true })}
+            onRemove={async () => ({ ok: true })}
+            onAdd={() => {}}
+            adding={false}
+            onCloseAdd={() => {}}
+            onCreated={() => {}}
+          />
+        </LanguageProvider>
+      </StrictMode>,
+    );
+  });
+  await flushTimers();
+
+  await act(async () => {
+    railButton(container, "combo/alpha").click();
+  });
+  await flushTimers();
+
+  const aliasInput = container.querySelector<HTMLInputElement>("#cwi-edit-alias")!;
+  expect(aliasInput).toBeTruthy();
+
+  await act(async () => {
+    setInputValue(aliasInput, "edited-alias");
+  });
+  expect(aliasInput.value).toBe("edited-alias");
+
+  await act(async () => {
+    railButton(container, "combo/beta").click();
+  });
+  expect(container.querySelector("#cwi-unsaved-title")).toBeTruthy();
+
+  const keepButton = [...container.querySelectorAll<HTMLButtonElement>("button")]
+    .find((button) => button.textContent?.trim() === "Keep editing");
+  expect(keepButton).toBeDefined();
+  await act(async () => {
+    keepButton!.click();
+  });
+  expect(container.querySelector("#cwi-unsaved-title")).toBeNull();
+  expect(container.querySelector<HTMLInputElement>("#cwi-edit-alias")?.value).toBe("edited-alias");
+
+  await act(async () => {
+    railButton(container, "combo/beta").click();
+  });
+  expect(container.querySelector("#cwi-unsaved-title")).toBeTruthy();
+
+  const discardButton = [...container.querySelectorAll<HTMLButtonElement>("button")]
+    .find((button) => button.textContent?.trim() === "Discard");
+  expect(discardButton).toBeDefined();
+  await act(async () => {
+    discardButton!.click();
+  });
+  await flushTimers();
+  expect(container.querySelector("#cwi-unsaved-title")).toBeNull();
+  expect(container.querySelector(".combos-workspace-detail-title")?.textContent).toBe("combo/beta");
+
+  await act(async () => {
+    railButton(container, "combo/alpha").click();
+  });
+  await flushTimers();
+
+  const aliasAgain = container.querySelector<HTMLInputElement>("#cwi-edit-alias")!;
+  await act(async () => {
+    setInputValue(aliasAgain, "temp");
+  });
+  await act(async () => {
+    setInputValue(aliasAgain, "");
+  });
+  expect(aliasAgain.value).toBe("");
+
+  await act(async () => {
+    railButton(container, "combo/beta").click();
+  });
+  expect(container.querySelector("#cwi-unsaved-title")).toBeNull();
+  expect(container.querySelector(".combos-workspace-detail-title")?.textContent).toBe("combo/beta");
+
+  await act(async () => {
+    root.unmount();
+  });
+  container.remove();
+});

From 67417f42ee9284b4a4e2bb5aa2dd6667460c4883 Mon Sep 17 00:00:00 2001
From: Wibias <37517432+Wibias@users.noreply.github.com>
Date: Sun, 26 Jul 2026 03:53:11 +0200
Subject: [PATCH 4/4] fix(gui): address CodeRabbit Combos a11y and numeric
 guards

Add keyboard target reorder, clamp sticky/weight inputs, and locale-stable unsaved dialog test ids.
---
 .../components/combo-workspace-add-modal.tsx  |  7 ++++-
 .../components/combo-workspace-controls.tsx   | 30 +++++++++++++++----
 .../combo-workspace-detail-panel.tsx          |  7 ++++-
 .../components/combo-workspace-dialogs.tsx    | 18 +++++++++--
 gui/src/components/combo-workspace-utils.ts   | 11 +++++++
 gui/src/styles-combos-workspace.css           | 25 ++++++++++++----
 gui/tests/combo-workspace-dirty.test.tsx      | 10 +++----
 7 files changed, 86 insertions(+), 22 deletions(-)

diff --git a/gui/src/components/combo-workspace-add-modal.tsx b/gui/src/components/combo-workspace-add-modal.tsx
index 6c1e9eda1..920b90a05 100644
--- a/gui/src/components/combo-workspace-add-modal.tsx
+++ b/gui/src/components/combo-workspace-add-modal.tsx
@@ -10,6 +10,7 @@ import { useT } from "../i18n/shared";
 import { Notice } from "../ui";
 import type { ModelOption, ProviderOption } from "./combo-workspace-types";
 import { EffortSelect, StrategySeg, TargetEditor } from "./combo-workspace-controls";
+import { clampedNumberInput } from "./combo-workspace-utils";
 
 export function AddComboModal({
   existingIds,
@@ -168,7 +169,11 @@ export function AddComboModal({
                 max={100}
                 value={draft.stickyLimit}
                 disabled={busy}
-                onChange={(e) => setDraft((d) => ({ ...d, stickyLimit: Number(e.target.value) }))}
+                onChange={(e) => {
+                  const stickyLimit = clampedNumberInput(e.target.value, 1, 100);
+                  if (stickyLimit === undefined) return;
+                  setDraft((d) => ({ ...d, stickyLimit }));
+                }}
               />
               <p className="muted" style={{ fontSize: 12, margin: "4px 0 0" }}>
                 {t("cws.field.stickyLimitHint")}
diff --git a/gui/src/components/combo-workspace-controls.tsx b/gui/src/components/combo-workspace-controls.tsx
index 817500df3..d94013781 100644
--- a/gui/src/components/combo-workspace-controls.tsx
+++ b/gui/src/components/combo-workspace-controls.tsx
@@ -1,10 +1,10 @@
 import { useState } from "react";
 import type { ComboEffort, ComboStrategy, ComboTarget } from "../combo-workspace-data";
 import { COMBO_EFFORTS, newComboTarget } from "../combo-workspace-data";
-import { IconGrip, IconPlus, IconTrash } from "../icons";
+import { IconArrowDown, IconArrowUp, IconGrip, IconPlus, IconTrash } from "../icons";
 import { useT } from "../i18n/shared";
 import type { ModelOption, ProviderOption } from "./combo-workspace-types";
-import { enabledProviders, modelsForProvider } from "./combo-workspace-utils";
+import { clampedNumberInput, enabledProviders, modelsForProvider } from "./combo-workspace-utils";
 
 export function StrategySeg({
   value,
@@ -151,6 +151,26 @@ export function TargetEditor({
             >
               <IconGrip width={14} height={14} aria-hidden="true" />
             </button>
+            <div className="cwi-target-reorder">
+              <button
+                type="button"
+                className="btn btn-ghost btn-sm"
+                disabled={index === 0}
+                aria-label={t("cws.target.moveUp")}
+                onClick={() => reorder(index, index - 1)}
+              >
+                <IconArrowUp width={14} height={14} aria-hidden="true" />
+              </button>
+              <button
+                type="button"
+                className="btn btn-ghost btn-sm"
+                disabled={index === targets.length - 1}
+                aria-label={t("cws.target.moveDown")}
+                onClick={() => reorder(index, index + 1)}
+              >
+                <IconArrowDown width={14} height={14} aria-hidden="true" />
+              </button>
+            </div>
             <select
               className="input"
               value={row.provider}
@@ -195,10 +215,8 @@ export function TargetEditor({
                 value={row.weight ?? 1}
                 aria-label={t("cws.target.weight")}
                 onChange={(e) => {
-                  const raw = e.target.value;
-                  if (raw === "") return;
-                  const weight = Number(raw);
-                  if (!Number.isFinite(weight)) return;
+                  const weight = clampedNumberInput(e.target.value, 1, 10000);
+                  if (weight === undefined) return;
                   update(index, { weight });
                 }}
               />
diff --git a/gui/src/components/combo-workspace-detail-panel.tsx b/gui/src/components/combo-workspace-detail-panel.tsx
index 21879372a..973021947 100644
--- a/gui/src/components/combo-workspace-detail-panel.tsx
+++ b/gui/src/components/combo-workspace-detail-panel.tsx
@@ -11,6 +11,7 @@ import { useT } from "../i18n/shared";
 import { Notice } from "../ui";
 import type { ModelOption, ProviderOption } from "./combo-workspace-types";
 import { EffortSelect, StrategySeg, TargetEditor } from "./combo-workspace-controls";
+import { clampedNumberInput } from "./combo-workspace-utils";
 
 type DetailTab = "config" | "about";
 
@@ -232,7 +233,11 @@ export function DetailPanel({
                   max={100}
                   value={draft.stickyLimit}
                   disabled={busy}
-                  onChange={(e) => updateDraft((d) => ({ ...d, stickyLimit: Number(e.target.value) }))}
+                  onChange={(e) => {
+                    const stickyLimit = clampedNumberInput(e.target.value, 1, 100);
+                    if (stickyLimit === undefined) return;
+                    updateDraft((d) => ({ ...d, stickyLimit }));
+                  }}
                 />
               </div>
             )}
diff --git a/gui/src/components/combo-workspace-dialogs.tsx b/gui/src/components/combo-workspace-dialogs.tsx
index 8899c6961..4aaf81d0b 100644
--- a/gui/src/components/combo-workspace-dialogs.tsx
+++ b/gui/src/components/combo-workspace-dialogs.tsx
@@ -81,8 +81,22 @@ export function UnsavedLeaveDialog({
         <h3 id="cwi-unsaved-title" className="pwi-json-unsaved-title">{t("cws.unsavedTitle")}</h3>
         <p className="muted pwi-json-unsaved-desc">{t("cws.unsavedDesc")}</p>
         <div className="pwi-json-unsaved-actions">
-          <button type="button" className="btn btn-ghost" onClick={onKeep}>{t("cws.keepEditing")}</button>
-          <button type="button" className="btn btn-danger" onClick={onDiscard}>{t("common.discard")}</button>
+          <button
+            type="button"
+            className="btn btn-ghost"
+            data-testid="cwi-unsaved-keep"
+            onClick={onKeep}
+          >
+            {t("cws.keepEditing")}
+          </button>
+          <button
+            type="button"
+            className="btn btn-danger"
+            data-testid="cwi-unsaved-discard"
+            onClick={onDiscard}
+          >
+            {t("common.discard")}
+          </button>
         </div>
       </div>
     </dialog>
diff --git a/gui/src/components/combo-workspace-utils.ts b/gui/src/components/combo-workspace-utils.ts
index eccfd043e..5a5c6ee1c 100644
--- a/gui/src/components/combo-workspace-utils.ts
+++ b/gui/src/components/combo-workspace-utils.ts
@@ -6,6 +6,17 @@ export function enabledProviders(providers: ProviderOption[]): ProviderOption[]
     .sort((a, b) => a.name.localeCompare(b.name));
 }
 
+/**
+ * Parse a number input and clamp to [min, max]. Empty / non-finite values return
+ * `undefined` so callers can ignore the keystroke without writing NaN.
+ */
+export function clampedNumberInput(raw: string, min: number, max: number): number | undefined {
+  if (raw === "") return undefined;
+  const n = Number(raw);
+  if (!Number.isFinite(n)) return undefined;
+  return Math.min(max, Math.max(min, n));
+}
+
 /** ChatGPT passthrough has no /models catalog — GPT slugs are listed under provider "openai". */
 export function isChatGptForwardOption(p: ProviderOption | undefined): boolean {
   if (!p) return false;
diff --git a/gui/src/styles-combos-workspace.css b/gui/src/styles-combos-workspace.css
index 452a0c1bd..acbd804b5 100644
--- a/gui/src/styles-combos-workspace.css
+++ b/gui/src/styles-combos-workspace.css
@@ -318,13 +318,13 @@
 
 .cwi-target-row {
   display: grid;
-  grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1.2fr) 4.5rem auto;
+  grid-template-columns: 28px auto minmax(0, 1fr) minmax(0, 1.2fr) 4.5rem auto;
   gap: 8px;
   align-items: center;
 }
 
 .cwi-target-row--failover {
-  grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1.2fr) auto;
+  grid-template-columns: 28px auto minmax(0, 1fr) minmax(0, 1.2fr) auto;
 }
 
 .cwi-target-row--dragging {
@@ -360,6 +360,19 @@
   cursor: grabbing;
 }
 
+.cwi-target-reorder {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0;
+  flex-shrink: 0;
+}
+
+.cwi-target-reorder .btn {
+  min-width: 0;
+  padding: 2px 4px;
+  line-height: 1;
+}
+
 .cwi-target-actions {
   display: flex;
   gap: 2px;
@@ -466,12 +479,12 @@
 
   .cwi-target-row,
   .cwi-target-row--failover {
-    grid-template-columns: 28px 1fr auto;
+    grid-template-columns: 28px auto 1fr auto;
   }
 
-  .cwi-target-row > .input:nth-child(2),
-  .cwi-target-row > .input:nth-child(3) {
-    grid-column: 2 / -1;
+  .cwi-target-row > .input:nth-child(3),
+  .cwi-target-row > .input:nth-child(4) {
+    grid-column: 3 / -1;
   }
 }
 
diff --git a/gui/tests/combo-workspace-dirty.test.tsx b/gui/tests/combo-workspace-dirty.test.tsx
index 4db60f3f1..6df8cb795 100644
--- a/gui/tests/combo-workspace-dirty.test.tsx
+++ b/gui/tests/combo-workspace-dirty.test.tsx
@@ -119,9 +119,8 @@ test("Strict Mode: edit, revert, and unsaved navigation keep dirty state coheren
   });
   expect(container.querySelector("#cwi-unsaved-title")).toBeTruthy();
 
-  const keepButton = [...container.querySelectorAll<HTMLButtonElement>("button")]
-    .find((button) => button.textContent?.trim() === "Keep editing");
-  expect(keepButton).toBeDefined();
+  const keepButton = container.querySelector<HTMLButtonElement>('[data-testid="cwi-unsaved-keep"]');
+  expect(keepButton).toBeTruthy();
   await act(async () => {
     keepButton!.click();
   });
@@ -133,9 +132,8 @@ test("Strict Mode: edit, revert, and unsaved navigation keep dirty state coheren
   });
   expect(container.querySelector("#cwi-unsaved-title")).toBeTruthy();
 
-  const discardButton = [...container.querySelectorAll<HTMLButtonElement>("button")]
-    .find((button) => button.textContent?.trim() === "Discard");
-  expect(discardButton).toBeDefined();
+  const discardButton = container.querySelector<HTMLButtonElement>('[data-testid="cwi-unsaved-discard"]');
+  expect(discardButton).toBeTruthy();
   await act(async () => {
     discardButton!.click();
   });