new flow for Pi provider/model settings

src/apps/officer-web/Screens/Dashboard/Settings/SystemSettings.tsx

@@ -16,7 +16,7 @@ import { TerminalView } from 'officerdev';
 import { createSettingsPanelComponents, type SettingsSectionGroup } from './SettingsPanel';
 import { useSettings } from 'state/useSettings';
 import { useUserState } from 'state/useUserState';
-import { usePiModels, useVisiblePiModels, type ModelOption } from 'state/useModels';
+import { usePiModels, useVisiblePiModels, modelKey, getProviderDisplayName, type ModelOption } from 'state/useModels';
 import type { UserSettings } from 'state/useSettings';
 import { AIHarnessesSection } from './ServerSettings/AIHarnessesSection';
 import { RUN_COMMAND_CHANNEL, type RunCommandState } from './ServerSettings/run-command-channel';
@@ -39,7 +39,7 @@ const PROVIDER_DISPLAY: Record<string, string> = {
 };
 
 function displayProviderName(provider: string): string {
-  return PROVIDER_DISPLAY[provider] ?? provider;
+  return PROVIDER_DISPLAY[provider] ?? getProviderDisplayName(provider);
 }
 
 const groups: SettingsSectionGroup[] = [
@@ -351,11 +351,14 @@ function ModelVisibilitySection() {
 
   const { enabled, disabled } = useMemo(() => {
     if (!currentGroup) return { enabled: [], disabled: [] };
+    const allEnabled = enabledModels.length === 0;
+    const enabledProviderSet = new Set(enabledModels.map((key) => key.split(':')[0]));
+    const isNewProvider = !allEnabled && !enabledProviderSet.has(currentGroup.provider);
     const en: { id: string; name: string; key: string }[] = [];
     const dis: { id: string; name: string; key: string }[] = [];
     for (const m of currentGroup.models) {
       const key = `${currentGroup.provider}:${m.id}`;
-      if (enabledModels.includes(key)) {
+      if (allEnabled || isNewProvider || enabledModels.includes(key)) {
         en.push({ ...m, key });
       } else {
         dis.push({ ...m, key });
@@ -374,9 +377,20 @@ function ModelVisibilitySection() {
 
   const disableModel = useCallback(
     async (key: string) => {
-      await saveSettings({ ...settings, ai: { ...settings.ai, enabledModels: enabledModels.filter((id) => id !== key) } });
+      let base = enabledModels;
+      if (base.length === 0) {
+        base = piModels.map((m) => modelKey(m));
+      } else {
+        const provider = key.split(':')[0]!;
+        const knownProviders = new Set(base.map((k) => k.split(':')[0]));
+        if (!knownProviders.has(provider)) {
+          const newProviderKeys = piModels.filter((m) => m.provider === provider).map((m) => modelKey(m));
+          base = [...base, ...newProviderKeys];
+        }
+      }
+      await saveSettings({ ...settings, ai: { ...settings.ai, enabledModels: base.filter((id) => id !== key) } });
     },
-    [settings, enabledModels, saveSettings],
+    [settings, enabledModels, piModels, saveSettings],
   );
 
   const onDragStart = useCallback((ev: DragEvent, key: string) => {