move modes settings v2 (#1884)

ui/desktop/src/components/BottomMenuModeSelection.tsx

@@ -6,29 +6,36 @@ import {
   filterGooseModes,
   ModeSelectionItem,
 } from './settings/basic/ModeSelectionItem';
+import { useConfig } from './ConfigContext';
 
 export const BottomMenuModeSelection = () => {
   const [isGooseModeMenuOpen, setIsGooseModeMenuOpen] = useState(false);
   const [gooseMode, setGooseMode] = useState('auto');
   const [previousApproveModel, setPreviousApproveModel] = useState('');
   const gooseModeDropdownRef = useRef<HTMLDivElement>(null);
+  const { read, upsert } = useConfig();
 
   useEffect(() => {
     const fetchCurrentMode = async () => {
       try {
-        const response = await fetch(getApiUrl('/configs/get?key=GOOSE_MODE'), {
+        if (!process.env.ALPHA) {
-          method: 'GET',
+          const response = await fetch(getApiUrl('/configs/get?key=GOOSE_MODE'), {
-          headers: {
+            method: 'GET',
-            'Content-Type': 'application/json',
+            headers: {
-            'X-Secret-Key': getSecretKey(),
+              'Content-Type': 'application/json',
-          },
+              'X-Secret-Key': getSecretKey(),
-        });
+            },
+          });
 
-        if (response.ok) {
+          if (response.ok) {
-          const { value } = await response.json();
+            const { value } = await response.json();
-          if (value) {
+            if (value) {
-            setGooseMode(value);
+              setGooseMode(value);
+            }
           }
+        } else {
+          const mode = (await read('GOOSE_MODE', false)) as string;
+          setGooseMode(mode);
         }
       } catch (error) {
         console.error('Error fetching current mode:', error);
@@ -77,28 +84,37 @@ export const BottomMenuModeSelection = () => {
     if (gooseMode === newMode) {
       return;
     }
-    const storeResponse = await fetch(getApiUrl('/configs/store'), {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'X-Secret-Key': getSecretKey(),
-      },
-      body: JSON.stringify({
-        key: 'GOOSE_MODE',
-        value: newMode,
-        isSecret: false,
-      }),
-    });
 
-    if (!storeResponse.ok) {
+    if (!process.env.ALPHA) {
-      const errorText = await storeResponse.text();
+      const storeResponse = await fetch(getApiUrl('/configs/store'), {
-      console.error('Store response error:', errorText);
+        method: 'POST',
-      throw new Error(`Failed to store new goose mode: ${newMode}`);
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Secret-Key': getSecretKey(),
+        },
+        body: JSON.stringify({
+          key: 'GOOSE_MODE',
+          value: newMode,
+          isSecret: false,
+        }),
+      });
+
+      if (!storeResponse.ok) {
+        const errorText = await storeResponse.text();
+        console.error('Store response error:', errorText);
+        throw new Error(`Failed to store new goose mode: ${newMode}`);
+      }
+      if (gooseMode.includes('approve')) {
+        setPreviousApproveModel(gooseMode);
+      }
+      setGooseMode(newMode);
+    } else {
+      await upsert('GOOSE_MODE', newMode, false);
+      if (gooseMode.includes('approve')) {
+        setPreviousApproveModel(gooseMode);
+      }
+      setGooseMode(newMode);
     }
-    if (gooseMode.includes('approve')) {
-      setPreviousApproveModel(gooseMode);
-    }
-    setGooseMode(newMode);
   };
 
   function getValueByKey(key) {

ui/desktop/src/components/settings_v2/SettingsView.tsx

@@ -4,6 +4,7 @@ import BackButton from '../ui/BackButton';
 import type { View } from '../../App';
 import ExtensionsSection from './extensions/ExtensionsSection';
 import ModelsSection from './models/ModelsSection';
+import { ModeSection } from './mode/ModeSection';
 
 export type SettingsViewOptions = {
   extensionId?: string;
@@ -36,6 +37,8 @@ export default function SettingsView({
               <ModelsSection setView={setView} />
               {/* Extensions Section */}
               <ExtensionsSection />
+              {/* Goose Modes */}
+              <ModeSection />
             </div>
           </div>
         </div>

ui/desktop/src/components/settings_v2/mode/ConfigureApproveMode.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useState } from 'react';
+import { Card } from '../../ui/card';
+import { Button } from '../../ui/button';
+import { GooseMode, ModeSelectionItem } from './ModeSelectionItem';
+
+interface ConfigureApproveModeProps {
+  onClose: () => void;
+  handleModeChange: (newMode: string) => void;
+  currentMode: string | null;
+}
+
+export function ConfigureApproveMode({
+  onClose,
+  handleModeChange,
+  currentMode,
+}: ConfigureApproveModeProps) {
+  const approveModes: GooseMode[] = [
+    {
+      key: 'approve',
+      label: 'Manual Approval',
+      description: 'All tools, extensions and file modifications will require human approval',
+    },
+    {
+      key: 'smart_approve',
+      label: 'Smart Approval',
+      description: 'Intelligently determine which actions need approval based on risk level ',
+    },
+  ];
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [approveMode, setApproveMode] = useState(currentMode);
+
+  useEffect(() => {
+    setApproveMode(currentMode);
+  }, [currentMode]);
+
+  const handleModeSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    setIsSubmitting(true);
+    try {
+      handleModeChange(approveMode);
+      onClose();
+    } catch (error) {
+      console.error('Error configuring goose mode:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/20 backdrop-blur-sm">
+      <Card className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[440px] bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden p-[16px] pt-[24px] pb-0">
+        <div className="px-4 pb-0 space-y-6">
+          {/* Header */}
+          <div className="flex">
+            <h2 className="text-2xl font-regular dark:text-white text-gray-900">
+              Configure Approve Mode
+            </h2>
+          </div>
+
+          <div className="mt-[24px]">
+            <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
+              Approve requests can either be given to all tool requests or determine which actions
+              may need integration
+            </p>
+            <div className="space-y-4">
+              {approveModes.map((mode) => (
+                <ModeSelectionItem
+                  key={mode.key}
+                  mode={mode}
+                  showDescription={true}
+                  currentMode={approveMode}
+                  isApproveModeConfigure={true}
+                  handleModeChange={(newMode) => {
+                    setApproveMode(newMode);
+                  }}
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className="mt-[8px] ml-[-24px] mr-[-24px] pt-[16px]">
+            <Button
+              type="submit"
+              variant="ghost"
+              disabled={isSubmitting}
+              onClick={handleModeSubmit}
+              className="w-full h-[60px] rounded-none border-t dark:border-gray-600 text-lg hover:bg-gray-50 hover:dark:text-black dark:text-white dark:border-gray-600 font-regular"
+            >
+              {isSubmitting ? 'Saving...' : 'Save Mode'}
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              disabled={isSubmitting}
+              onClick={onClose}
+              className="w-full h-[60px] rounded-none border-t dark:border-gray-600 text-gray-400 hover:bg-gray-50 dark:border-gray-600 text-lg font-regular"
+            >
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

ui/desktop/src/components/settings_v2/mode/ModeSection.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from 'react';
+import { getApiUrl, getSecretKey } from '../../../config';
+import { all_goose_modes, filterGooseModes, ModeSelectionItem } from './ModeSelectionItem';
+import ExtensionList from '@/src/components/settings_v2/extensions/subcomponents/ExtensionList';
+import { Button } from '@/src/components/ui/button';
+import { Plus } from 'lucide-react';
+import { GPSIcon } from '@/src/components/ui/icons';
+
+export const ModeSection = () => {
+  const [currentMode, setCurrentMode] = useState('auto');
+  const [previousApproveModel, setPreviousApproveModel] = useState('');
+
+  const handleModeChange = async (newMode: string) => {
+    const storeResponse = await fetch(getApiUrl('/configs/store'), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Secret-Key': getSecretKey(),
+      },
+      body: JSON.stringify({
+        key: 'GOOSE_MODE',
+        value: newMode,
+        isSecret: false,
+      }),
+    });
+
+    if (!storeResponse.ok) {
+      const errorText = await storeResponse.text();
+      console.error('Store response error:', errorText);
+      throw new Error(`Failed to store new goose mode: ${newMode}`);
+    }
+    // Only track the previous approve if current mode is approve related but new mode is not.
+    if (currentMode.includes('approve') && !newMode.includes('approve')) {
+      setPreviousApproveModel(currentMode);
+    }
+    setCurrentMode(newMode);
+  };
+
+  useEffect(() => {
+    const fetchCurrentMode = async () => {
+      try {
+        const response = await fetch(getApiUrl('/configs/get?key=GOOSE_MODE'), {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-Secret-Key': getSecretKey(),
+          },
+        });
+
+        if (response.ok) {
+          const { value } = await response.json();
+          if (value) {
+            setCurrentMode(value);
+          }
+        }
+      } catch (error) {
+        console.error('Error fetching current mode:', error);
+      }
+    };
+
+    fetchCurrentMode();
+  }, []);
+
+  return (
+    <section id="mode">
+      <div className="flex justify-between items-center mb-6 px-8">
+        <h1 className="text-3xl font-medium text-textStandard">Mode</h1>
+      </div>
+      <div className="px-8">
+        <p className="text-sm text-textStandard mb-6">
+          Configure how Goose interacts with tools and extensions
+        </p>
+        <div>
+          {filterGooseModes(currentMode, all_goose_modes, previousApproveModel).map((mode) => (
+            <ModeSelectionItem
+              key={mode.key}
+              mode={mode}
+              currentMode={currentMode}
+              showDescription={true}
+              isApproveModeConfigure={false}
+              handleModeChange={handleModeChange}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};

ui/desktop/src/components/settings_v2/mode/ModeSelectionItem.tsx

@@ -0,0 +1,146 @@
+import React, { useEffect, useState } from 'react';
+import { Gear } from '../../icons';
+import { ConfigureApproveMode } from './ConfigureApproveMode';
+
+export interface GooseMode {
+  key: string;
+  label: string;
+  description: string;
+}
+
+export const all_goose_modes: GooseMode[] = [
+  {
+    key: 'auto',
+    label: 'Completely Autonomous',
+    description: 'Full file modification capabilities, edit, create, and delete files freely.',
+  },
+  {
+    key: 'approve',
+    label: 'Manual Approval',
+    description: 'All tools, extensions and file modifications will require human approval',
+  },
+  {
+    key: 'smart_approve',
+    label: 'Smart Approval',
+    description: 'Intelligently determine which actions need approval based on risk level ',
+  },
+  {
+    key: 'chat',
+    label: 'Chat Only',
+    description: 'Engage with the selected provider without using tools or extensions.',
+  },
+];
+
+export function filterGooseModes(
+  currentMode: string,
+  modes: GooseMode[],
+  previousApproveMode: string
+) {
+  return modes.filter((mode) => {
+    const approveList = ['approve', 'smart_approve'];
+    const nonApproveList = ['auto', 'chat'];
+    // Always keep 'auto' and 'chat'
+    if (nonApproveList.includes(mode.key)) {
+      return true;
+    }
+    // If current mode is non approve mode, we display write approve by default.
+    if (nonApproveList.includes(currentMode) && !previousApproveMode) {
+      return mode.key === 'smart_approve';
+    }
+
+    // Always include the current and previou approve mode
+    if (mode.key === currentMode) {
+      return true;
+    }
+
+    // Current mode and previous approve mode cannot exist at the same time.
+    if (approveList.includes(currentMode) && approveList.includes(previousApproveMode)) {
+      return false;
+    }
+
+    if (mode.key === previousApproveMode) {
+      return true;
+    }
+
+    return false;
+  });
+}
+
+interface ModeSelectionItemProps {
+  currentMode: string;
+  mode: GooseMode;
+  showDescription: boolean;
+  isApproveModeConfigure: boolean;
+  handleModeChange: (newMode: string) => void;
+}
+
+export function ModeSelectionItem({
+  currentMode,
+  mode,
+  showDescription,
+  isApproveModeConfigure,
+  handleModeChange,
+}: ModeSelectionItemProps) {
+  const [checked, setChecked] = useState(currentMode == mode.key);
+  const [isDislogOpen, setIsDislogOpen] = useState(false);
+
+  useEffect(() => {
+    setChecked(currentMode === mode.key);
+  }, [currentMode, mode.key]);
+
+  return (
+    <div>
+      <div
+        className="flex items-center justify-between p-2 text-textStandard hover:bg-bgSubtle transition-colors"
+        onClick={() => handleModeChange(mode.key)}
+      >
+        <div>
+          <h3 className="text-sm font-light text-textStandard dark:text-gray-200">{mode.label}</h3>
+          {showDescription && (
+            <p className="text-xs text-textSubtle dark:text-gray-400 mt-[2px]">
+              {mode.description}
+            </p>
+          )}
+        </div>
+        <div className="relative flex items-center gap-3">
+          {!isApproveModeConfigure && (mode.key == 'approve' || mode.key == 'smart_approve') && (
+            <button
+              onClick={() => {
+                setIsDislogOpen(true);
+              }}
+            >
+              <Gear className="w-5 h-5 text-textSubtle hover:text-textStandard" />
+            </button>
+          )}
+          <input
+            type="radio"
+            name="modes"
+            value={mode.key}
+            checked={checked}
+            onChange={() => handleModeChange(mode.key)}
+            className="peer sr-only"
+          />
+          <div
+            className="h-4 w-4 rounded-full border border-gray-400 dark:border-gray-500
+                  peer-checked:border-[6px] peer-checked:border-black dark:peer-checked:border-white
+                  peer-checked:bg-white dark:peer-checked:bg-black
+                  transition-all duration-200 ease-in-out"
+          ></div>
+        </div>
+      </div>
+      <div>
+        <div>
+          {isDislogOpen ? (
+            <ConfigureApproveMode
+              onClose={() => {
+                setIsDislogOpen(false);
+              }}
+              handleModeChange={handleModeChange}
+              currentMode={currentMode}
+            />
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}