easter egg (#1201)

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

@@ -5,92 +5,109 @@ import { Input } from '../ui/input';
 import { Button } from '../ui/button';
 import { required_keys } from './models/hardcoded_stuff';
 import { isSecretKey } from './api_keys/utils';
-// import UnionIcon from "../images/[email protected]";
+import { OllamaBattleGame } from './OllamaBattleGame';
 
 interface ProviderSetupModalProps {
   provider: string;
-  model: string;
-  endpoint: string;
+  _model: string;
+  _endpoint: string;
   title?: string;
   onSubmit: (configValues: { [key: string]: string }) => void;
   onCancel: () => void;
+  forceBattle?: boolean;
 }
 
 export function ProviderSetupModal({
   provider,
-  model,
-  endpoint,
+  _model,
+  _endpoint,
   title,
   onSubmit,
   onCancel,
+  forceBattle = false,
 }: ProviderSetupModalProps) {
   const [configValues, setConfigValues] = React.useState<{ [key: string]: string }>({});
   const requiredKeys = required_keys[provider] || ['API Key'];
   const headerText = title || `Setup ${provider}`;
 
+  const shouldShowBattle = React.useMemo(() => {
+    if (forceBattle) return true;
+    if (provider.toLowerCase() !== 'ollama') return false;
+
+    const now = new Date();
+    return now.getMinutes() === 0;
+  }, [provider, forceBattle]);
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     onSubmit(configValues);
   };
 
   return (
     <div className="fixed inset-0 bg-black/20 dark:bg-white/20 backdrop-blur-sm transition-colors animate-[fadein_200ms_ease-in_forwards]">
-      <Card className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] bg-bgApp rounded-xl overflow-hidden shadow-none p-[16px] pt-[24px] pb-0">
+      <Card className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] bg-bgApp rounded-xl overflow-hidden shadow-none p-[16px] pt-[24px] pb-0">
         <div className="px-4 pb-0 space-y-8">
           {/* Header */}
           <div className="flex">
-            {/* Purple icon */}
-            {/* <div className="w-[24px] h-[24px] flex items-center justify-center">
-              <img src={UnionIcon} alt="Union icon" />
-            </div> */}
             <h2 className="text-2xl font-regular text-textStandard">{headerText}</h2>
           </div>
 
-          {/* Form */}
-          <form onSubmit={handleSubmit}>
-            <div className="mt-[24px] space-y-4">
-              {requiredKeys.map((keyName) => (
-                <div key={keyName}>
-                  <Input
-                    type={isSecretKey(keyName) ? 'password' : 'text'}
-                    value={configValues[keyName] || ''}
-                    onChange={(e) =>
-                      setConfigValues((prev) => ({
-                        ...prev,
-                        [keyName]: e.target.value,
-                      }))
+          {provider.toLowerCase() === 'ollama' && shouldShowBattle ? (
+            <OllamaBattleGame onComplete={onSubmit} requiredKeys={requiredKeys} />
+          ) : (
+            <form onSubmit={handleSubmit}>
+              <div className="mt-[24px] space-y-4">
+                {requiredKeys.map((keyName) => (
+                  <div key={keyName}>
+                    <Input
+                      type={isSecretKey(keyName) ? 'password' : 'text'}
+                      value={configValues[keyName] || ''}
+                      onChange={(e) =>
+                        setConfigValues((prev) => ({
+                          ...prev,
+                          [keyName]: e.target.value,
+                        }))
+                      }
+                      placeholder={keyName}
+                      className="w-full h-14 px-4 font-regular rounded-lg border shadow-none border-gray-300 bg-white text-lg placeholder:text-gray-400 font-regular text-gray-900"
+                      required
+                    />
+                  </div>
+                ))}
+                <div
+                  className="flex text-gray-600 dark:text-gray-300"
+                  onClick={() => {
+                    if (provider.toLowerCase() === 'ollama') {
+                      onCancel();
+                      onSubmit({ forceBattle: 'true' });
                     }
-                    placeholder={keyName}
-                    className="w-full h-14 px-4 font-regular rounded-lg border shadow-none border-gray-300 bg-white text-lg placeholder:text-gray-400 font-regular text-gray-900"
-                    required
-                  />
+                  }}
+                >
+                  <Lock className="w-6 h-6" />
+                  <span className="text-sm font-light ml-4 mt-[2px]">{`Your configuration values will be stored securely in the keychain and used only for making requests to ${provider}`}</span>
                 </div>
-              ))}
-              <div className="flex text-gray-600 dark:text-gray-300">
-                <Lock className="w-6 h-6" />
-                <span className="text-sm font-light ml-4 mt-[2px]">{`Your configuration values will be stored securely in the keychain and used only for making requests to ${provider}`}</span>
               </div>
-            </div>
 
-            {/* Actions */}
-            <div className="mt-[8px] -ml-8 -mr-8 pt-8">
-              <Button
-                type="submit"
-                variant="ghost"
-                className="w-full h-[60px] rounded-none border-t border-borderSubtle text-md hover:bg-bgSubtle text-textProminent font-regular"
-              >
-                Submit
-              </Button>
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={onCancel}
-                className="w-full h-[60px] rounded-none border-t border-borderSubtle hover:text-textStandard text-textSubtle hover:bg-bgSubtle text-md font-regular"
-              >
-                Cancel
-              </Button>
-            </div>
-          </form>
+              {/* Actions */}
+              <div className="mt-[8px] -ml-8 -mr-8 pt-8">
+                <Button
+                  type="submit"
+                  variant="ghost"
+                  className="w-full h-[60px] rounded-none border-t border-borderSubtle text-md hover:bg-bgSubtle text-textProminent font-regular"
+                >
+                  Submit
+                </Button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  onClick={onCancel}
+                  className="w-full h-[60px] rounded-none border-t border-borderSubtle hover:text-textStandard text-textSubtle hover:bg-bgSubtle text-md font-regular"
+                >
+                  Cancel
+                </Button>
+              </div>
+            </form>
+          )}
         </div>
       </Card>
     </div>

ui/desktop/src/components/settings/providers/BaseProviderGrid.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { Check, Plus, Settings, X, Rocket, RefreshCw, AlertCircle } from 'lucide-react';
+import { Check, Plus, Settings, X, Rocket } from 'lucide-react';
 import { Button } from '../../ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/Tooltip';
 import { Portal } from '@radix-ui/react-portal';
 import { required_keys } from '../models/hardcoded_stuff';
-import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { useActiveKeys } from '../api_keys/ActiveKeysContext';
 import { getActiveProviders } from '../api_keys/utils';
 

ui/desktop/src/components/settings/providers/ConfigureProvidersGrid.tsx

@@ -41,7 +41,7 @@ export function ConfigureProvidersGrid() {
   const { activeKeys, setActiveKeys } = useActiveKeys();
   const [showSetupModal, setShowSetupModal] = useState(false);
   const [selectedForSetup, setSelectedForSetup] = useState<string | null>(null);
-  const [modalMode, setModalMode] = useState<'edit' | 'setup'>('setup');
+  const [modalMode, setModalMode] = useState<'edit' | 'setup' | 'battle'>('setup');
   const [isConfirmationOpen, setIsConfirmationOpen] = useState(false);
   const [providerToDelete, setProviderToDelete] = useState(null);
   const { currentModel } = useModel();
@@ -242,11 +242,21 @@ export function ConfigureProvidersGrid() {
                 ? `Edit ${providers.find((p) => p.id === selectedForSetup)?.name} Configuration`
                 : undefined
             }
-            onSubmit={handleModalSubmit}
+            onSubmit={(configValues) => {
+              if (configValues.forceBattle === 'true') {
+                setSelectedForSetup(selectedForSetup);
+                setModalMode('battle');
+                setShowSetupModal(true);
+                return;
+              }
+              handleModalSubmit(configValues);
+            }}
             onCancel={() => {
               setShowSetupModal(false);
               setSelectedForSetup(null);
+              setModalMode('setup');
             }}
+            forceBattle={modalMode === 'battle'}
           />
         </div>
       )}

ui/desktop/src/styles/pokemon.css

@@ -0,0 +1,21 @@
+@font-face {
+  font-family: 'Pokemon';
+  src: url('../assets/fonts/pokemon.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.font-pokemon {
+  font-family:
+    'Pokemon',
+    system-ui,
+    -apple-system,
+    sans-serif;
+  letter-spacing: 0.5px;
+}
+
+.pixelated {
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+}