feat(webui): add responsive model preset detail pane

webui/src/components/settings/SettingsView.tsx

@@ -3375,10 +3375,9 @@ function ModelsSettings({
   );
   const callOrderBusy = orderSaving || saving;
   const selectPreset = (preset: SettingsPayload["model_presets"][number]) => {
-    const toggleCurrentPreset = !creating && selectedPreset?.name === preset.name;
     onSelectConfiguration();
-    if (toggleCurrentPreset) {
+    if (!creating && selectedPreset?.name === preset.name) {
-      setEditorOpen((open) => !open);
+      setEditorOpen(true);
       return;
     }
     setForm((prev) => ({
@@ -3394,6 +3393,11 @@ function ModelsSettings({
     }));
     setEditorOpen(true);
   };
+  const closeEditor = () => {
+    if (creatingSaving) return;
+    if (creating) onCancelCreate();
+    setEditorOpen(false);
+  };
 
   const moveCallOrderItem = (index: number, offset: -1 | 1) => {
     if (callOrderBusy) return;
@@ -3473,7 +3477,13 @@ function ModelsSettings({
               </Button>
             </div>
           ) : (
-            <>
+            <div className="xl:grid xl:grid-cols-[minmax(0,5fr)_minmax(0,6fr)] xl:divide-x xl:divide-border/45">
+              <div
+                className={cn(
+                  "min-w-0 divide-y divide-border/45",
+                  editorOpen && "hidden xl:block",
+                )}
+              >
               <div role="list" className="divide-y divide-border/45">
                 {presetRows.map(({ key, name, orderIndex, preset }) => {
                   const ordered = orderIndex >= 0;
@@ -3495,6 +3505,8 @@ function ModelsSettings({
                     isDropTarget &&
                     draggedCallOrderIndex !== null &&
                     draggedCallOrderIndex < orderIndex;
+                  const isSelected =
+                    editorOpen && !creating && selectedPreset?.name === name;
                   return (
                     <div
                       key={key}
@@ -3567,6 +3579,7 @@ function ModelsSettings({
                           dropAfterTarget &&
                           "after:absolute after:inset-x-4 after:bottom-0 after:z-10 after:h-0.5 after:rounded-full after:bg-foreground sm:after:inset-x-5",
                         ordered && draggedCallOrderIndex === orderIndex && "opacity-35",
+                        isSelected && "bg-muted/45 hover:bg-muted/45",
                         "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
                       )}
                     >
@@ -3580,8 +3593,8 @@ function ModelsSettings({
                       )}
                       <button
                         type="button"
-                        aria-pressed={selectedPreset?.name === name}
+                        aria-pressed={isSelected}
-                        aria-expanded={selectedPreset?.name === name && editorOpen}
+                        aria-controls="model-preset-detail"
                         disabled={!preset}
                         onClick={() => preset && selectPreset(preset)}
                         className="flex min-w-0 flex-1 items-center gap-3 rounded-[12px] text-left outline-none focus-visible:ring-2 focus-visible:ring-ring"
@@ -3627,8 +3640,8 @@ function ModelsSettings({
                         </span>
                         <ChevronRight
                           className={cn(
-                            "h-4 w-4 shrink-0 text-muted-foreground transition-transform",
+                            "h-4 w-4 shrink-0 text-muted-foreground transition-[color,transform] group-hover:translate-x-0.5",
-                            selectedPreset?.name === name && editorOpen && "rotate-90",
+                            isSelected && "text-foreground",
                           )}
                           aria-hidden
                         />
@@ -3694,18 +3707,45 @@ function ModelsSettings({
                   </SettingsStatusMessage>
                 ) : null}
               </div>
-            </>
+              </div>
-          )}
+              <div
-
+                id="model-preset-detail"
-      {editorOpen && (selectedPreset || creating) ? (
+                className={cn(
-        <>
+                  "min-w-0 divide-y divide-border/45",
-            <div className="flex min-h-[52px] items-center justify-between gap-3 bg-muted/15 px-4 py-3 sm:px-5">
+                  !editorOpen && "hidden xl:block",
-              <span className="text-[13px] font-semibold text-foreground/85">
+                )}
-                {creating
+              >
-                  ? tx("settings.models.newPreset", "New model preset")
+                {editorOpen && (selectedPreset || creating) ? (
-                  : tx("settings.models.editPreset", "Edit preset")}
+                  <>
-              </span>
+                    <div className="flex min-h-[64px] items-center gap-2 bg-muted/15 px-4 py-3 sm:px-5">
-            </div>
+                      <button
+                        type="button"
+                        onClick={closeEditor}
+                        disabled={creatingSaving}
+                        aria-label={tx(
+                          "settings.models.backToPresets",
+                          "Back to model presets",
+                        )}
+                        className="-ml-2 grid h-8 w-8 shrink-0 place-items-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40 xl:hidden"
+                      >
+                        <ChevronLeft className="h-4 w-4" aria-hidden />
+                      </button>
+                      <span className="min-w-0">
+                        <span className="block truncate text-[14px] font-semibold text-foreground/90">
+                          {creating
+                            ? tx("settings.models.newPreset", "New model preset")
+                            : selectedPreset?.label}
+                        </span>
+                        <span className="mt-0.5 block truncate text-[12px] text-muted-foreground">
+                          {creating
+                            ? tx(
+                                "settings.models.newPresetHelp",
+                                "Save a reusable model and its generation settings.",
+                              )
+                            : tx("settings.models.editPreset", "Edit preset")}
+                        </span>
+                      </span>
+                    </div>
             <SettingsRow title={tx("settings.models.presetName", "Preset name")}>
               <Input
                 autoFocus={creating}
@@ -3813,10 +3853,7 @@ function ModelsSettings({
                   variant="ghost"
                   className="self-start rounded-full text-muted-foreground"
                   disabled={creatingSaving}
-                  onClick={() => {
+                  onClick={closeEditor}
-                    setEditorOpen(false);
-                    onCancelCreate();
-                  }}
                 >
                   {tx("settings.actions.cancel", "Cancel")}
                 </Button>
@@ -3860,8 +3897,28 @@ function ModelsSettings({
                 </Button>
               </div>
             </div>
-          </>
+                  </>
-      ) : null}
+                ) : (
+                  <div className="flex min-h-[320px] items-center justify-center px-8 py-12 text-center">
+                    <div className="max-w-[16rem]">
+                      <span className="mx-auto grid h-10 w-10 place-items-center rounded-[14px] bg-muted text-muted-foreground">
+                        <Pencil className="h-4 w-4" aria-hidden />
+                      </span>
+                      <p className="mt-3 text-[14px] font-medium text-foreground">
+                        {tx("settings.models.selectPreset", "Select a preset")}
+                      </p>
+                      <p className="mt-1 text-[12px] leading-5 text-muted-foreground">
+                        {tx(
+                          "settings.models.selectPresetHelp",
+                          "Select a preset from the list to edit its model and generation settings.",
+                        )}
+                      </p>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
         </SettingsGroup>
       </section>
     </div>

webui/src/i18n/locales/en/common.json

@@ -132,6 +132,9 @@
       "newPresetHelp": "Save a reusable model and its generation settings.",
       "presets": "Model presets",
       "editPreset": "Edit preset",
+      "backToPresets": "Back to model presets",
+      "selectPreset": "Select a preset",
+      "selectPresetHelp": "Select a preset from the list to edit its model and generation settings.",
       "presetName": "Preset name",
       "presetNameHelp": "A short name used throughout model settings.",
       "presetNamePlaceholder": "Fast writing",

webui/src/i18n/locales/es/common.json

@@ -408,6 +408,9 @@
       "newPresetHelp": "Guarda un modelo reutilizable y sus ajustes de generación.",
       "presets": "Preajustes de modelo",
       "editPreset": "Editar preajuste",
+      "backToPresets": "Volver a los preajustes de modelo",
+      "selectPreset": "Seleccionar un preajuste",
+      "selectPresetHelp": "Selecciona un preajuste de la lista para editar su modelo y los ajustes de generación.",
       "presetName": "Nombre del preajuste",
       "presetNameHelp": "Un nombre corto para usar en los ajustes de modelos.",
       "presetNamePlaceholder": "Escritura rápida",

webui/src/i18n/locales/fr/common.json

@@ -408,6 +408,9 @@
       "newPresetHelp": "Enregistrez un modèle réutilisable et ses paramètres de génération.",
       "presets": "Préréglages de modèle",
       "editPreset": "Modifier le préréglage",
+      "backToPresets": "Retour aux préréglages de modèle",
+      "selectPreset": "Sélectionner un préréglage",
+      "selectPresetHelp": "Sélectionnez un préréglage dans la liste pour modifier son modèle et ses paramètres de génération.",
       "presetName": "Nom du préréglage",
       "presetNameHelp": "Un nom court utilisé dans les paramètres des modèles.",
       "presetNamePlaceholder": "Rédaction rapide",

webui/src/i18n/locales/id/common.json

@@ -408,6 +408,9 @@
       "newPresetHelp": "Simpan model yang dapat digunakan kembali beserta pengaturan generasinya.",
       "presets": "Prasetel model",
       "editPreset": "Ubah prasetel",
+      "backToPresets": "Kembali ke prasetel model",
+      "selectPreset": "Pilih prasetel",
+      "selectPresetHelp": "Pilih prasetel dari daftar untuk mengubah model dan pengaturan generasinya.",
       "presetName": "Nama prasetel",
       "presetNameHelp": "Nama singkat yang digunakan di pengaturan model.",
       "presetNamePlaceholder": "Menulis cepat",

webui/src/i18n/locales/ja/common.json

@@ -408,6 +408,9 @@
       "newPresetHelp": "再利用できるモデルと生成設定を保存します。",
       "presets": "モデルプリセット",
       "editPreset": "プリセットを編集",
+      "backToPresets": "モデルプリセットに戻る",
+      "selectPreset": "プリセットを選択",
+      "selectPresetHelp": "リストからプリセットを選択して、モデルと生成設定を編集します。",
       "presetName": "プリセット名",
       "presetNameHelp": "モデル設定で使用する短い名前です。",
       "presetNamePlaceholder": "高速執筆",

webui/src/i18n/locales/ko/common.json

@@ -408,6 +408,9 @@
       "newPresetHelp": "재사용할 모델과 생성 설정을 저장합니다.",
       "presets": "모델 프리셋",
       "editPreset": "프리셋 편집",
+      "backToPresets": "모델 프리셋으로 돌아가기",
+      "selectPreset": "프리셋 선택",
+      "selectPresetHelp": "목록에서 프리셋을 선택하여 모델과 생성 설정을 편집하세요.",
       "presetName": "프리셋 이름",
       "presetNameHelp": "모델 설정에서 사용할 짧은 이름입니다.",
       "presetNamePlaceholder": "빠른 작성",

webui/src/i18n/locales/pt-BR/common.json

@@ -132,6 +132,9 @@
       "newPresetHelp": "Salve um modelo reutilizável e suas configurações de geração.",
       "presets": "Predefinições de modelo",
       "editPreset": "Editar predefinição",
+      "backToPresets": "Voltar às predefinições de modelo",
+      "selectPreset": "Selecionar uma predefinição",
+      "selectPresetHelp": "Selecione uma predefinição na lista para editar o modelo e as configurações de geração.",
       "presetName": "Nome da predefinição",
       "presetNameHelp": "Um nome curto usado nas configurações de modelo.",
       "presetNamePlaceholder": "Escrita rápida",

webui/src/i18n/locales/vi/common.json

@@ -408,6 +408,9 @@
       "newPresetHelp": "Lưu mô hình có thể tái sử dụng cùng các thiết lập sinh nội dung.",
       "presets": "Cấu hình mô hình đặt trước",
       "editPreset": "Sửa cấu hình đặt trước",
+      "backToPresets": "Quay lại cấu hình mô hình đặt trước",
+      "selectPreset": "Chọn một cấu hình đặt trước",
+      "selectPresetHelp": "Chọn một cấu hình đặt trước trong danh sách để chỉnh sửa mô hình và cài đặt sinh nội dung.",
       "presetName": "Tên cấu hình đặt trước",
       "presetNameHelp": "Tên ngắn dùng trong phần thiết lập mô hình.",
       "presetNamePlaceholder": "Viết nhanh",

webui/src/i18n/locales/zh-CN/common.json

@@ -132,6 +132,9 @@
       "newPresetHelp": "保存可复用的模型及其生成参数。",
       "presets": "模型预设",
       "editPreset": "编辑预设",
+      "backToPresets": "返回模型预设",
+      "selectPreset": "选择一个预设",
+      "selectPresetHelp": "从列表中选择一个预设，编辑它的模型和生成参数。",
       "presetName": "预设名称",
       "presetNameHelp": "在模型设置中使用的简短名称。",
       "presetNamePlaceholder": "快速写作",

webui/src/i18n/locales/zh-TW/common.json

@@ -408,6 +408,9 @@
       "newPresetHelp": "儲存可重複使用的模型與生成參數。",
       "presets": "模型預設",
       "editPreset": "編輯預設",
+      "backToPresets": "返回模型預設",
+      "selectPreset": "選擇一個預設",
+      "selectPresetHelp": "從列表中選擇一個預設，編輯它的模型與生成參數。",
       "presetName": "預設名稱",
       "presetNameHelp": "模型設定中使用的簡短名稱。",
       "presetNamePlaceholder": "快速寫作",

webui/src/tests/settings-view.test.tsx

@@ -2137,6 +2137,44 @@ describe("SettingsView Apps catalog", () => {
     expect(reasoningEffort).toHaveValue("provider-native-mode");
   });
 
+  it("associates preset selection with the responsive detail pane", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (input: RequestInfo | URL) => {
+        const url = String(input);
+        if (url === "/api/settings") return jsonResponse(settingsPayload());
+        if (url === "/api/settings/cli-apps") {
+          return jsonResponse({ apps: [], installed_count: 0 });
+        }
+        if (url === "/api/settings/mcp-presets") {
+          return jsonResponse({ presets: [], installed_count: 0 });
+        }
+        return { ok: false, status: 404, json: async () => ({}) } as Response;
+      }),
+    );
+
+    renderSettingsView({ initialSection: "models" });
+
+    const row = await screen.findByTestId("model-call-order-row-primary");
+    const trigger = within(row).getAllByRole("button")[0];
+    const detail = document.getElementById("model-preset-detail");
+    expect(detail).toHaveClass("hidden", "xl:block");
+    expect(trigger).toHaveAttribute("aria-controls", "model-preset-detail");
+
+    fireEvent.click(trigger);
+
+    expect(trigger).toHaveAttribute("aria-pressed", "true");
+    expect(detail).not.toHaveClass("hidden");
+    expect(within(detail as HTMLElement).getByDisplayValue("Primary")).toBeInTheDocument();
+
+    const backButton = screen.getByRole("button", { name: "Back to model presets" });
+    expect(backButton).toHaveClass("xl:hidden");
+    fireEvent.click(backButton);
+
+    expect(trigger).toHaveAttribute("aria-pressed", "false");
+    expect(detail).toHaveClass("hidden", "xl:block");
+  });
+
   it("drags model presets to reorder and saves the model call order immediately", async () => {
     const { payload, backupPreset } = settingsPayloadWithBackup();
     const updatedPayload: SettingsPayload = {
@@ -4010,6 +4048,10 @@ describe("SettingsView Apps catalog", () => {
     expect(screen.queryByRole("dialog", { name: "New model preset" })).not.toBeInTheDocument();
     expect(screen.getByPlaceholderText("Fast writing")).toHaveValue("");
     expect(screen.queryByText("Temperature")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "Back to model presets" }));
+    expect(screen.queryByPlaceholderText("Fast writing")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "New model preset" }));
     fireEvent.click(screen.getByRole("button", { name: /Advanced options/ }));
     expect(screen.getByText("Temperature")).toBeInTheDocument();
     fireEvent.click(screen.getByRole("button", { name: "Cancel" }));