feat(desktop): redesign the models settings pages

apps/desktop/renderer-architecture.json

@@ -163,7 +163,6 @@
     "src/renderer/settings/provider-connection-status.ts",
     "src/renderer/settings/provider-display-copy.ts",
     "src/renderer/settings/provider-display.tsx",
-    "src/renderer/settings/provider-enabled-model-manager.tsx",
     "src/renderer/settings/provider-endpoint-presentation.ts",
     "src/renderer/settings/provider-oauth-section.tsx",
     "src/renderer/settings/providers-panel.tsx",
@@ -3428,7 +3427,6 @@
           "./password-input": 1,
           "./provider-add-model-dialog": 1,
           "./provider-display": 1,
-          "./provider-enabled-model-manager": 1,
           "./provider-endpoint-presentation": 1,
           "./relay-thinking-bulk": 1,
           "./request-customization-editor": 1,
@@ -3440,7 +3438,7 @@
           "@astryxdesign/core": 1,
           "@maka/core/llm-connections": 1,
           "@maka/core/model-thinking": 1,
-          "@maka/ui": 2,
+          "@maka/ui": 1,
           "react": 1
         }
       },
@@ -3484,22 +3482,6 @@
           "@maka/core/llm-connections": 1
         }
       },
-      "src/renderer/settings/provider-enabled-model-manager.tsx": {
-        "bridgePaths": {},
-        "environmentCapabilities": {},
-        "hookCalls": {
-          "useUiLocale": 1
-        },
-        "lifecycleMethods": {},
-        "unresolvedDependencies": 0,
-        "actionFactories": [],
-        "dependencyPaths": {
-          "../features/connection-settings": 1,
-          "@astryxdesign/core": 1,
-          "@maka/core/model-catalog": 1,
-          "@maka/ui": 1
-        }
-      },
       "src/renderer/settings/provider-endpoint-presentation.ts": {
         "bridgePaths": {},
         "environmentCapabilities": {},

apps/desktop/src/renderer/features/connection-settings/index.ts

@@ -32,11 +32,11 @@ export type {
   RuntimeHostSettingsConnectionsBridge,
 } from './ports.js';
 export {
-  categoryLabel,
   connectionLastTestMessageDisplay,
   connectionTestFailureMessage,
   providerPanelActionErrorMessage,
 } from './provider-panel-shared.js';
+export { OnboardingStepForm } from './onboarding-step-form.js';
 export { getProviderSettingsCopy } from './settings-provider-copy.js';
 export type { ProviderSettingsCopy } from './settings-provider-copy.js';
 export type {

apps/desktop/src/renderer/features/connection-settings/onboarding-step-form.tsx

@@ -0,0 +1,61 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// A wizard step that takes focus when it appears.
+//
+// A step replaces the whole form in place: the button the user pressed unmounts
+// with the step it belonged to, and focus falls to `document.body`. The
+// settings route has not moved, so the page's level focus never re-runs. The
+// step that arrives is the only thing that knows it arrived, so it owns the
+// move, and it owns it on mount — which is exactly when it arrives.
+//
+// Focus lands on the step itself rather than its first control, so a screen
+// reader announces the step the user is now in. A step whose first control is a
+// text field can say so with that field's `hasAutoFocus` instead and skip this.
+import { useEffect, useRef, type FormEvent, type ReactNode } from 'react';
+import { VStack } from '@astryxdesign/core';
+
+export function OnboardingStepForm(props: {
+  /** Names the step for assistive technology; focus lands here. */
+  label: string;
+  /** The story DOM contract for this step. */
+  contract: string;
+  onSubmit(event: FormEvent<HTMLFormElement>): void;
+  children: ReactNode;
+}) {
+  const stepRef = useRef<HTMLFormElement>(null);
+
+  useEffect(() => {
+    // `preventScroll` because the step renders at the top of the content area
+    // already: scrolling to the focus target would push its header out of view.
+    stepRef.current?.focus({ preventScroll: true });
+  }, []);
+
+  return (
+    <form
+      ref={stepRef}
+      tabIndex={-1}
+      aria-label={props.label}
+      data-maka-contract={props.contract}
+      onSubmit={props.onSubmit}
+    >
+      <VStack gap={4}>{props.children}</VStack>
+    </form>
+  );
+}

apps/desktop/src/renderer/features/connection-settings/provider-panel-shared.ts

@@ -18,10 +18,7 @@
  */
 
 import { generalizedErrorMessage, generalizedErrorMessageChinese, redactSecrets } from '@maka/core/redaction';
-import {
-  type ConnectionTestResult,
-  type ProviderCategory,
-} from '@maka/core/llm-connections';
+import { type ConnectionTestResult } from '@maka/core/llm-connections';
 import { type UiLocale } from '@maka/core/ui-locale';
 import { getProviderSettingsCopy } from './settings-provider-copy.js';
 import { cleanErrorMessage } from '../../application/contracts/connection-error-cleaner.js';
@@ -104,7 +101,3 @@ export function connectionLastTestMessageDisplay(message: string | undefined, lo
     : generalizedErrorMessage(new Error(trimmed), '');
   return classified || copy.statusUnavailable;
 }
-
-export function categoryLabel(category: ProviderCategory, locale: UiLocale = 'zh'): string {
-  return getProviderSettingsCopy(locale).shared.categories[category];
-}