fix: fully remove react-router now that it is unused (#1317)

ui/desktop/eslint.config.js

@@ -26,7 +26,7 @@ const noWindowLocationHref = {
         ) {
           context.report({
             node,
-            message: 'Do not use window.location.href directly in Electron apps. Use React Router\'s navigate() instead.'
+            message: 'Do not use window.location.href directly in Electron apps. Use setView from the project instead'
           });
         }
       }

ui/desktop/openapi.json

@@ -10,7 +10,7 @@
     "license": {
       "name": "Apache-2.0"
     },
-    "version": "1.0.5"
+    "version": "1.0.7"
   },
   "paths": {
     "/config": {

ui/desktop/package-lock.json

@@ -38,7 +38,6 @@
         "react-dom": "^18.3.1",
         "react-icons": "^5.3.0",
         "react-markdown": "^9.0.1",
-        "react-router-dom": "^6.28.0",
         "react-select": "^5.9.0",
         "react-syntax-highlighter": "^15.6.1",
         "react-toastify": "^8.0.0",
@@ -3925,15 +3924,6 @@
         }
       }
     },
-    "node_modules/@remix-run/router": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.22.0.tgz",
-      "integrity": "sha512-MBOl8MeOzpK0HQQQshKB7pABXbmyHizdTpqnrIseTbsv0nAepwC2ENZa1aaBExNQcpLoXmWthhak8SABLzvGPw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.34.6",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.6.tgz",
@@ -13655,38 +13645,6 @@
         }
       }
     },
-    "node_modules/react-router": {
-      "version": "6.29.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.29.0.tgz",
-      "integrity": "sha512-DXZJoE0q+KyeVw75Ck6GkPxFak63C4fGqZGNijnWgzB/HzSP1ZfTlBj5COaGWwhrMQ/R8bXiq5Ooy4KG+ReyjQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@remix-run/router": "1.22.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8"
-      }
-    },
-    "node_modules/react-router-dom": {
-      "version": "6.29.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.29.0.tgz",
-      "integrity": "sha512-pkEbJPATRJ2iotK+wUwHfy0xs2T59YPEN8BQxVCPeBZvK7kfPESRc/nyxzdcxR17hXgUPYx2whMwl+eo9cUdnQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@remix-run/router": "1.22.0",
-        "react-router": "6.29.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
-      }
-    },
     "node_modules/react-select": {
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.10.0.tgz",

ui/desktop/package.json

@@ -93,7 +93,6 @@
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "react-markdown": "^9.0.1",
-    "react-router-dom": "^6.28.0",
     "react-select": "^5.9.0",
     "react-syntax-highlighter": "^15.6.1",
     "react-toastify": "^8.0.0",

ui/desktop/src/App.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { addExtensionFromDeepLink } from './extensions';
-import { useNavigate } from 'react-router-dom';
 import LauncherWindow from './LauncherWindow';
 import ChatWindow from './ChatWindow';
 import ErrorScreen from './components/ErrorScreen';
@@ -19,7 +18,7 @@ export default function App() {
   const [isInstalling, setIsInstalling] = useState(false); // Track installation progress
   const searchParams = new URLSearchParams(window.location.search);
   const isLauncher = searchParams.get('window') === 'launcher';
-  const navigate = useNavigate();
+  const navigate = () => console.log('todo - bring back nav');
 
   // Utility function to extract the command from the link
   function extractCommand(link: string): string {
@@ -55,7 +54,7 @@ export default function App() {
       console.log('Confirming installation for link:', pendingLink);
 
       try {
-        await addExtensionFromDeepLink(pendingLink, navigate); // Proceed with adding the extension
+        await addExtensionFromDeepLink(pendingLink, navigate);
       } catch (error) {
         console.error('Failed to add extension:', error);
       } finally {

ui/desktop/src/ChatWindow.tsx

@@ -363,12 +363,6 @@ export default function ChatWindow() {
     setupStoredProvider();
   }, []);
 
-  // Render everything inside ChatLayout now
-  // We'll switch views inside the ChatLayout children.
-
-  // If we want to skip showing ChatLayout for the welcome screen, we can do so.
-  // But let's do exactly what's requested: put all view options under ChatLayout.
-
   return (
     <ChatLayout mode={mode}>
       {/* Conditionally render based on `view` */}
@@ -395,14 +389,6 @@ export default function ChatWindow() {
           setView={setView}
         />
       )}
-      {view === 'configPage' && (
-        <ConfigPage
-          onClose={() => {
-            setView('chat');
-          }}
-          setView={setView}
-        />
-      )}
       {view === 'configureProviders' && (
         <ConfigureProviders
           onClose={() => {

ui/desktop/src/ConfigTestingWindow.tsx

@@ -1,150 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Button } from './components/ui/button';
-import { Input } from './components/ui/input';
-import { Label } from './components/ui/label';
-import { Card } from './components/ui/card';
-import { useNavigate } from 'react-router-dom';
-import BackButton from './components/ui/BackButton';
-import { useConfig } from './hooks/useConfig';
-
-export default function ConfigPage() {
-  const [configs, setConfigs] = useState<Record<string, any>>({});
-  const [newKey, setNewKey] = useState('');
-  const [newValue, setNewValue] = useState('');
-  const navigate = useNavigate();
-
-  const { loading, error, loadConfigs, addConfig, removeConfig } = useConfig();
-
-  // Fetch all configs on component mount
-  useEffect(() => {
-    const fetchConfigs = async () => {
-      const result = await loadConfigs();
-      setConfigs(result);
-    };
-    fetchConfigs();
-  }, [loadConfigs]);
-
-  const handleAddConfig = async () => {
-    if (!newKey || !newValue) {
-      return;
-    }
-
-    let parsedValue = newValue;
-    // Try to parse as JSON if it looks like JSON
-    if (newValue.trim().startsWith('{') || newValue.trim().startsWith('[')) {
-      try {
-        parsedValue = JSON.parse(newValue);
-      } catch (e) {
-        // If parsing fails, use the original string value
-        console.log('Value is not valid JSON, using as string');
-      }
-    }
-
-    const success = await addConfig(newKey, parsedValue);
-    if (success) {
-      setNewKey('');
-      setNewValue('');
-      const updatedConfigs = await loadConfigs();
-      setConfigs(updatedConfigs);
-    }
-  };
-
-  const handleRemoveConfig = async (key: string) => {
-    const success = await removeConfig(key);
-    if (success) {
-      const updatedConfigs = await loadConfigs();
-      setConfigs(updatedConfigs);
-    }
-  };
-
-  return (
-    <div className="h-screen w-full">
-      <div className="relative flex items-center h-[36px] w-full bg-bgSubtle"></div>
-
-      <div className="flex flex-col pb-24">
-        <div className="px-8 pt-6 pb-4">
-          <BackButton onClick={() => navigate('/settings')} />
-          <h1 className="text-3xl font-medium text-textStandard mt-1">Configuration</h1>
-        </div>
-
-        <div className="flex-1 py-8 pt-[20px] px-8">
-          <div className="space-y-8 max-w-2xl">
-            {/* Add new config form */}
-            <Card className="p-6">
-              <h2 className="text-xl font-semibold mb-4">Add New Configuration</h2>
-              <div className="grid gap-4">
-                <div>
-                  <Label htmlFor="configKey">Key</Label>
-                  <Input
-                    id="configKey"
-                    value={newKey}
-                    onChange={(e) => setNewKey(e.target.value)}
-                    placeholder="Enter config key"
-                    className="mt-1"
-                  />
-                </div>
-                <div>
-                  <Label htmlFor="configValue">Value</Label>
-                  <Input
-                    id="configValue"
-                    value={newValue}
-                    onChange={(e) => setNewValue(e.target.value)}
-                    placeholder="Enter config value (string or JSON)"
-                    className="mt-1"
-                  />
-                </div>
-                <Button onClick={handleAddConfig} disabled={loading}>
-                  {loading ? 'Adding...' : 'Add Configuration'}
-                </Button>
-              </div>
-            </Card>
-
-            {/* Error display */}
-            {error && (
-              <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
-                {error.message}
-              </div>
-            )}
-
-            {/* Config list */}
-            <Card className="p-6">
-              <h2 className="text-xl font-semibold mb-4">Current Configurations</h2>
-              <div className="grid gap-4">
-                {loading ? (
-                  <div className="text-center text-gray-500">Loading configurations...</div>
-                ) : Object.keys(configs).length === 0 ? (
-                  <div className="text-center text-gray-500">No configurations found</div>
-                ) : (
-                  Object.entries(configs).map(([key, value]) => (
-                    <div
-                      key={key}
-                      className="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-800 rounded"
-                    >
-                      <div className="break-all">
-                        <span className="font-medium">{key}:</span>{' '}
-                        <span className="text-gray-600 dark:text-gray-300">
-                          {typeof value === 'object'
-                            ? JSON.stringify(value, null, 2)
-                            : String(value)}
-                        </span>
-                      </div>
-                      <Button
-                        variant="destructive"
-                        onClick={() => handleRemoveConfig(key)}
-                        size="sm"
-                        className="ml-4 shrink-0"
-                        disabled={loading}
-                      >
-                        {loading ? '...' : 'Remove'}
-                      </Button>
-                    </div>
-                  ))
-                )}
-              </div>
-            </Card>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

ui/desktop/src/components/BottomMenu.tsx

@@ -3,8 +3,6 @@ import { useModel } from './settings/models/ModelContext';
 import { useRecentModels } from './settings/models/RecentModels'; // Hook for recent models
 import { Sliders } from 'lucide-react';
 import { ModelRadioList } from './settings/models/ModelRadioList';
-// Remove react-router-dom usage
-// import { useNavigate } from 'react-router-dom';
 import { Document, ChevronUp, ChevronDown } from './icons';
 import type { View } from '../ChatWindow';
 
@@ -13,7 +11,7 @@ export default function BottomMenu({
   setView,
 }: {
   hasMessages: boolean;
-  setView?: (view: View) => void;
+  setView: (view: View) => void;
 }) {
   const [isModelMenuOpen, setIsModelMenuOpen] = useState(false);
   const { currentModel } = useModel();
@@ -133,8 +131,7 @@ export default function BottomMenu({
                   border-t border-borderSubtle mt-2"
                 onClick={() => {
                   setIsModelMenuOpen(false);
-                  // Instead of navigate('/settings'), call setView('settings').
+                  setView('settings');
-                  setView?.('settings');
                 }}
               >
                 <span className="text-sm">Tools and Settings</span>

ui/desktop/src/components/MoreMenu.tsx

@@ -1,12 +1,6 @@
 import { Popover, PopoverContent, PopoverTrigger, PopoverPortal } from '@radix-ui/react-popover';
 import React, { useEffect, useState } from 'react';
-import { FaMoon, FaSun } from 'react-icons/fa';
-import VertDots from './ui/VertDots';
-// Removed react-router-dom import
-// import { useNavigate } from 'react-router-dom';
 import { More } from './icons';
-import { Settings, Grid, MessageSquare } from 'lucide-react';
-import { Button } from './ui/button';
 import type { View } from '../../ChatWindow';
 
 interface VersionInfo {
@@ -15,7 +9,7 @@ interface VersionInfo {
 }
 
 // Accept setView as a prop from the parent (e.g. ChatContent)
-export default function MoreMenu({ setView }: { setView?: (view: View) => void }) {
+export default function MoreMenu({ setView }: { setView: (view: View) => void }) {
   const [open, setOpen] = useState(false);
   const [versions, setVersions] = useState<VersionInfo | null>(null);
   const [showVersions, setShowVersions] = useState(false);
@@ -231,8 +225,7 @@ export default function MoreMenu({ setView }: { setView?: (view: View) => void }
             <button
               onClick={() => {
                 setOpen(false);
-                // Instead of navigate('/settings'), call setView to switch.
+                setView('settings');
-                setView?.('settings');
               }}
               className="w-full text-left p-2 text-sm hover:bg-bgSubtle transition-colors"
             >

ui/desktop/src/components/pages/ConfigPage.tsx

@@ -1,162 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Button } from '../ui/button';
-import { Input } from '../ui/input';
-import { Label } from '../ui/label';
-import { Card } from '../ui/card';
-import { useNavigate } from 'react-router-dom';
-import BackButton from '../ui/BackButton';
-import { useConfig } from '../../hooks/useConfig';
-import type { View } from '@/src/ChatWindow';
-
-interface ConfigItem {
-  key: string;
-  value: any;
-}
-
-export function ConfigPage({
-  onClose,
-  setView,
-}: {
-  onClose: () => void;
-  setView?: (view: View) => void;
-}) {
-  const [configs, setConfigs] = useState<Record<string, any>>({});
-  const [newKey, setNewKey] = useState('');
-  const [newValue, setNewValue] = useState('');
-  const navigate = useNavigate();
-
-  const { loading, error, loadConfigs, addConfig, removeConfig } = useConfig();
-
-  // Fetch all configs on component mount
-  useEffect(() => {
-    const fetchConfigs = async () => {
-      const result = await loadConfigs();
-      setConfigs(result);
-    };
-    fetchConfigs();
-  }, [loadConfigs]);
-
-  const handleAddConfig = async () => {
-    if (!newKey || !newValue) {
-      return;
-    }
-
-    let parsedValue = newValue;
-    // Try to parse as JSON if it looks like JSON
-    if (newValue.trim().startsWith('{') || newValue.trim().startsWith('[')) {
-      try {
-        parsedValue = JSON.parse(newValue);
-      } catch (e) {
-        // If parsing fails, use the original string value
-        console.log('Value is not valid JSON, using as string');
-      }
-    }
-
-    const success = await addConfig(newKey, parsedValue);
-    if (success) {
-      setNewKey('');
-      setNewValue('');
-      const updatedConfigs = await loadConfigs();
-      setConfigs(updatedConfigs);
-    }
-  };
-
-  const handleRemoveConfig = async (key: string) => {
-    const success = await removeConfig(key);
-    if (success) {
-      const updatedConfigs = await loadConfigs();
-      setConfigs(updatedConfigs);
-    }
-  };
-
-  return (
-    <div className="h-screen w-full">
-      <div className="relative flex items-center h-[36px] w-full bg-bgSubtle"></div>
-
-      <div className="flex flex-col pb-24">
-        <div className="px-8 pt-6 pb-4">
-          <BackButton onClick={() => navigate('/settings')} />
-          <h1 className="text-3xl font-medium text-textStandard mt-1">Configuration</h1>
-        </div>
-
-        <div className="flex-1 py-8 pt-[20px] px-8">
-          <div className="space-y-8 max-w-2xl">
-            {/* Add new config form */}
-            <Card className="p-6">
-              <h2 className="text-xl font-semibold mb-4">Add New Configuration</h2>
-              <div className="grid gap-4">
-                <div>
-                  <Label htmlFor="configKey">Key</Label>
-                  <Input
-                    id="configKey"
-                    value={newKey}
-                    onChange={(e) => setNewKey(e.target.value)}
-                    placeholder="Enter config key"
-                    className="mt-1"
-                  />
-                </div>
-                <div>
-                  <Label htmlFor="configValue">Value</Label>
-                  <Input
-                    id="configValue"
-                    value={newValue}
-                    onChange={(e) => setNewValue(e.target.value)}
-                    placeholder="Enter config value (string or JSON)"
-                    className="mt-1"
-                  />
-                </div>
-                <Button onClick={handleAddConfig} disabled={loading}>
-                  {loading ? 'Adding...' : 'Add Configuration'}
-                </Button>
-              </div>
-            </Card>
-
-            {/* Error display */}
-            {error && (
-              <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
-                {error.message}
-              </div>
-            )}
-
-            {/* Config list */}
-            <Card className="p-6">
-              <h2 className="text-xl font-semibold mb-4">Current Configurations</h2>
-              <div className="grid gap-4">
-                {loading ? (
-                  <div className="text-center text-gray-500">Loading configurations...</div>
-                ) : Object.keys(configs).length === 0 ? (
-                  <div className="text-center text-gray-500">No configurations found</div>
-                ) : (
-                  Object.entries(configs).map(([key, value]) => (
-                    <div
-                      key={key}
-                      className="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-800 rounded"
-                    >
-                      <div className="break-all">
-                        <span className="font-medium">{key}:</span>{' '}
-                        <span className="text-gray-600 dark:text-gray-300">
-                          {typeof value === 'object'
-                            ? JSON.stringify(value, null, 2)
-                            : String(value)}
-                        </span>
-                      </div>
-                      <Button
-                        variant="destructive"
-                        onClick={() => handleRemoveConfig(key)}
-                        size="sm"
-                        className="ml-4 shrink-0"
-                        disabled={loading}
-                      >
-                        {loading ? '...' : 'Remove'}
-                      </Button>
-                    </div>
-                  ))
-                )}
-              </div>
-            </Card>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

ui/desktop/src/components/settings/Settings.tsx

@@ -56,7 +56,6 @@ export default function Settings({
   onClose: () => void;
   setView: (view: View) => void;
 }) {
-  // We'll read query params from window.location instead of react-router's useLocation
   const [searchParams] = useState(() => new URLSearchParams(window.location.search));
 
   const [settings, setSettings] = React.useState<SettingsType>(() => {
@@ -181,8 +180,6 @@ export default function Settings({
     return BUILT_IN_EXTENSIONS.some((builtIn) => builtIn.id === extensionId);
   };
 
-  function navigate(s: string) {}
-
   return (
     <div className="h-screen w-full">
       <div className="relative flex items-center h-[36px] w-full bg-bgSubtle"></div>
@@ -190,12 +187,7 @@ export default function Settings({
       <ScrollArea className="h-full w-full">
         <div className="flex flex-col pb-24">
           <div className="px-8 pt-6 pb-4">
-            <BackButton
+            <BackButton onClick={() => onClose()} />
-              onClick={() => {
-                // Instead of navigate('/chat/1', { replace: true });
-                onClose();
-              }}
-            />
             <h1 className="text-3xl font-medium text-textStandard mt-1">Settings</h1>
           </div>
 
@@ -207,7 +199,6 @@ export default function Settings({
                   <h2 className="text-xl font-medium text-textStandard">Models</h2>
                   <button
                     onClick={() => {
-                      // Instead of navigate('/settings/more-models'):
                       setView('moreModels');
                     }}
                     className="text-indigo-500 hover:text-indigo-600 text-sm"
@@ -261,27 +252,6 @@ export default function Settings({
                   )}
                 </div>
               </section>
-
-              <section id="configuration">
-                <div className="flex justify-between items-center mb-6 border-b border-borderSubtle px-8">
-                  <h2 className="text-xl font-semibold text-textStandard">Configuration</h2>
-                  <div className="flex gap-4">
-                    <button
-                      onClick={() => navigate('/settings/config')}
-                      className="text-indigo-500 hover:text-indigo-600 text-sm"
-                    >
-                      Manage
-                    </button>
-                  </div>
-                </div>
-
-                <div className="px-8">
-                  <p className="text-sm text-textStandard mb-4">
-                    Manage application configuration and settings. You can view, add, edit, and
-                    remove configuration values.
-                  </p>
-                </div>
-              </section>
             </div>
           </div>
         </div>

ui/desktop/src/components/settings/models/MoreModels.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
-import { Button } from '../../ui/button';
 import { RecentModels } from './RecentModels';
 import { ProviderButtons } from './ProviderButtons';
 import BackButton from '../../ui/BackButton';
 import { SearchBar } from './Search';
 import { useModel } from './ModelContext';
 import { AddModelInline } from './AddModelInline';
-// Removed react-router-dom usage
-// import { useNavigate } from 'react-router-dom';
 import { ScrollArea } from '../../ui/scroll-area';
 import type { View } from '../../../ChatWindow';
 

ui/desktop/src/components/welcome_screen/ProviderGrid.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Button } from '../ui/button';
 import {
   supported_providers,
   required_keys,
@@ -15,7 +14,6 @@ import { initializeSystem } from '../../utils/providerUtils';
 import { getApiUrl, getSecretKey } from '../../config';
 import { toast } from 'react-toastify';
 import { getActiveProviders, isSecretKey } from '../settings/api_keys/utils';
-import { useNavigate } from 'react-router-dom';
 import { BaseProviderGrid, getProviderDescription } from '../settings/providers/BaseProviderGrid';
 
 interface ProviderGridProps {
@@ -28,7 +26,6 @@ export function ProviderGrid({ onSubmit }: ProviderGridProps) {
   const [showSetupModal, setShowSetupModal] = React.useState(false);
   const { switchModel } = useModel();
   const { addRecentModel } = useRecentModels();
-  const navigate = useNavigate();
 
   const providers = React.useMemo(() => {
     return supported_providers.map((providerName) => {

ui/desktop/src/extensions.tsx

@@ -1,5 +1,4 @@
 import { getApiUrl, getSecretKey } from './config';
-import { NavigateFunction } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
 // ExtensionConfig type matching the Rust version
@@ -258,7 +257,7 @@ function handleError(message: string, shouldThrow = false): void {
   }
 }
 
-export async function addExtensionFromDeepLink(url: string, navigate: NavigateFunction) {
+export async function addExtensionFromDeepLink(url: string, navigate: any) {
   if (!url.startsWith('goose://extension')) {
     handleError(
       'Failed to install extension: Invalid URL: URL must use the goose://extension scheme'

ui/desktop/src/renderer.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { HashRouter as Router } from 'react-router-dom';
 import App from './App';
 
 // Error Boundary Component
@@ -72,9 +71,7 @@ window.addEventListener('error', (event) => {
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <ErrorBoundary>
-      <Router>
+      <App />
-        <App />
-      </Router>
     </ErrorBoundary>
   </React.StrictMode>
 );