proxy for llm requests (#174)

* WIP

* LLM instruction for callai prooxy

* fix tests.

* fix: update auth flow test to check for relative connectUrl path

* fix: update titleGenerator to use environment variable for CALLAI endpoint

* fix: remove  X-VIBES-Token header from token requests

* revert prompts

* Simplify proxy configuration

* chore: update package dependencies and lockfile to latest versions

* fix: update API_BASE_URL to use new production domain

* feat: add APP_HOST_BASE_URL env var and update app URL construction

* style: format appUrl assignment with line break for better readability

---------

Co-authored-by: J Chris Anderson <[email protected]>

Author: necrodome

.gitignore

@@ -11,3 +11,4 @@
 
 # VS Code settings
 .vscode/settings.json
+.claude/settings.local.json

__mocks__/useAuth.ts

@@ -40,8 +40,6 @@ export const mockUseAuth = vi.fn().mockImplementation(() => defaultAuthenticated
 export const setMockAuthState = (state: Partial<AuthContextType>) => {
   mockUseAuth.mockImplementation(() => ({
     ...defaultAuthenticatedState,
-    needsLogin: false,
-    setNeedsLogin: vi.fn(),
     ...state,
   }));
 };

app/components/NeedsLoginModal.tsx

@@ -6,7 +6,7 @@ import { useAuthPopup } from '../hooks/useAuthPopup';
 
 /**
  * A modal that appears when the user needs to login to get more credits
- * This listens for the 'needsLoginTriggered' event from useSimpleChat
+ * This listens for the needsLogin state from AuthContext
  */
 export function NeedsLoginModal() {
   const [isOpen, setIsOpen] = useState(false);

app/components/ResultPreview/IframeContent.tsx

@@ -1,11 +1,12 @@
-import React, { useEffect, useRef, useState } from 'react';
-import type { IframeFiles } from './ResultPreviewTypes';
 import Editor from '@monaco-editor/react';
-import { useApiKey } from '~/hooks/useApiKey';
+import React, { useEffect, useRef } from 'react';
+import type { IframeFiles } from './ResultPreviewTypes';
+// API key import removed - proxy handles authentication
+import { CALLAI_ENDPOINT } from '../../config/env';
+import { normalizeComponentExports } from '../../utils/normalizeComponentExports';
+import { DatabaseListView } from './DataView';
 import { setupMonacoEditor } from './setupMonacoEditor';
 import { transformImports } from './transformImports';
-import { DatabaseListView } from './DataView';
-import { normalizeComponentExports } from '../../utils/normalizeComponentExports';
 
 // Import the iframe template using Vite's ?raw import option
 import iframeTemplateRaw from './templates/iframe-template.html?raw';
@@ -27,8 +28,7 @@ const IframeContent: React.FC<IframeContentProps> = ({
   isDarkMode,
   sessionId,
 }) => {
-  const { ensureApiKey } = useApiKey();
-  const [apiKey, setApiKey] = useState('');
+  // API key no longer needed - proxy handles authentication
   const iframeRef = useRef<HTMLIFrameElement>(null);
   // Theme state is now received from parent via props
   const contentLoadedRef = useRef(false);
@@ -79,19 +79,11 @@ const IframeContent: React.FC<IframeContentProps> = ({
 
   // This effect is now managed at the ResultPreview component level
 
-  // Get API key on component mount
-  useEffect(() => {
-    const getApiKey = async () => {
-      const keyData = await ensureApiKey();
-      setApiKey(keyData.key);
-    };
-
-    getApiKey();
-  }, [ensureApiKey]);
+  // API key management removed - proxy handles authentication
 
-  // Update iframe when code is ready and API key is available
+  // Update iframe when code is ready
   useEffect(() => {
-    if (codeReady && apiKey && iframeRef.current) {
+    if (codeReady && iframeRef.current) {
       // Skip if content hasn't changed
       if (contentLoadedRef.current && appCode === lastContentRef.current) {
         return;
@@ -110,7 +102,8 @@ const IframeContent: React.FC<IframeContentProps> = ({
 
       // Use the template and replace placeholders
       const htmlContent = iframeTemplateRaw
-        .replace('{{API_KEY}}', apiKey)
+        .replaceAll('{{API_KEY}}', 'sk-vibes-proxy-managed')
+        .replaceAll('{{CALLAI_ENDPOINT}}', CALLAI_ENDPOINT)
         .replace('{{APP_CODE}}', transformedCode)
         .replace('{{SESSION_ID}}', sessionIdValue);
 
@@ -132,7 +125,7 @@ const IframeContent: React.FC<IframeContentProps> = ({
         window.removeEventListener('message', handleMessage);
       };
     }
-  }, [appCode, apiKey, codeReady]);
+  }, [appCode, codeReady]);
 
   // Determine which view to show based on URL path - gives more stable behavior on refresh
   const getViewFromPath = () => {

app/components/ResultPreview/ResultPreview.tsx

@@ -42,15 +42,9 @@ function ResultPreview({
     const handleMessage = ({ data }: MessageEvent) => {
       if (data) {
         if (data.type === 'preview-ready' || data.type === 'preview-loaded') {
-          // respond with the API key
-          const storedKey = localStorage.getItem('vibes-openrouter-key');
-          if (storedKey) {
-            const keyData = JSON.parse(storedKey);
-            const iframe = document.querySelector('iframe') as HTMLIFrameElement;
-            iframe?.contentWindow?.postMessage({ type: 'callai-api-key', key: keyData.key }, '*');
-            setMobilePreviewShown(true);
-            onPreviewLoaded();
-          }
+          // No API key needed - proxy handles authentication
+          setMobilePreviewShown(true);
+          onPreviewLoaded();
         } else if (data.type === 'streaming' && data.state !== undefined) {
           if (setIsIframeFetching) {
             setIsIframeFetching(data.state);

app/components/ResultPreview/templates/iframe-template.html

@@ -238,6 +238,8 @@
     <script>
       window.CALLAI_API_KEY = '{{API_KEY}}';
       window.SESSION_ID = '{{SESSION_ID}}';
+      window.CALLAI_CHAT_URL = '{{CALLAI_ENDPOINT}}';
+      window.CALLAI_IMG_URL = '{{CALLAI_ENDPOINT}}';
     </script>
     <script type="importmap">
       {
@@ -409,8 +411,6 @@
     </script>
 
     <script type="text/babel" data-type="module">
-      window.CALLAI_IMG_URL = 'https://vibesdiy.app';
-
       import ReactDOMClient from 'react-dom/client';
 
       // App runs normally without our interference, but the iframe loads our script to modify use-fireproof

app/components/SessionSidebar.tsx

@@ -17,7 +17,7 @@ import { dark, light } from './colorways';
  */
 function SessionSidebar({ isVisible, onClose }: SessionSidebarProps) {
   const sidebarRef = useRef<HTMLDivElement>(null);
-  const { isAuthenticated, isLoading, needsLogin, setNeedsLogin } = useAuth();
+  const { isAuthenticated, isLoading } = useAuth();
   const { isPolling, pollError, initiateLogin } = useAuthPopup();
   const { isDarkMode } = useTheme();
 
@@ -169,7 +169,6 @@ function SessionSidebar({ isVisible, onClose }: SessionSidebarProps) {
                       type="button"
                       onClick={async () => {
                         await initiateLogin();
-                        setNeedsLogin(false);
                         onClose();
                       }}
                       style={{
@@ -182,7 +181,7 @@ function SessionSidebar({ isVisible, onClose }: SessionSidebarProps) {
                           color: rando.diyText,
                         }}
                       >
-                        Log in {needsLogin ? 'for credits' : ''}
+                        Log in
                       </span>
                     </button>
                   </li>

app/config/env.ts

@@ -44,13 +44,20 @@ export const APP_MODE = import.meta.env.MODE || 'production'; // typically 'deve
 
 // Fireproof Connect & Auth
 export const CONNECT_URL =
-  import.meta.env.VITE_CONNECT_URL || 'https://dev.connect.fireproof.direct/token';
+  import.meta.env.VITE_CONNECT_URL || 'https://connect.fireproof.direct/token';
 export const CONNECT_API_URL =
-  import.meta.env.VITE_CONNECT_API_URL || 'https://dev.connect.fireproof.direct/api';
-export const CLOUD_SESSION_TOKEN_PUBLIC_KEY = import.meta.env.VITE_CLOUD_SESSION_TOKEN_PUBLIC || '';
+  import.meta.env.VITE_CONNECT_API_URL || 'https://connect.fireproof.direct/api';
+export const CLOUD_SESSION_TOKEN_PUBLIC_KEY =
+  import.meta.env.VITE_CLOUD_SESSION_TOKEN_PUBLIC ||
+  'zeWndr5LEoaySgKSo2aZniYqWtx2vKfVz4dd5GQwAuby3fPKcNyLp6mFpf9nCRFYbUcPiN2YT1ZApJ6f3WipiVjuMvyP1JYgHwkaoxDBpJiLoz1grRYkbao9ntukNNo2TQ4uSznUmNPrr4ZxjihoavHwB1zLhLNp5Qj78fBkjgEMA';
 
 // Vibes Service API
-export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'https://vibesdiy.app';
+export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'https://vibes-diy-api.com';
+
+export const APP_HOST_BASE_URL = import.meta.env.VITE_APP_HOST_BASE_URL || 'https://vibesdiy.app';
+
+// CallAI Endpoint
+export const CALLAI_ENDPOINT = import.meta.env.VITE_CALLAI_ENDPOINT || API_BASE_URL;
 
 // Chat History Database
 export const SETTINGS_DBNAME =

app/config/provisioning.ts

@@ -16,7 +16,7 @@ export interface AuthContextType {
   isLoading: boolean;
   userPayload: TokenPayload | null; // Changed from userEmail
   needsLogin: boolean;
-  setNeedsLogin: (value: boolean) => void;
+  setNeedsLogin: (value: boolean, reason: string) => void;
   checkAuthStatus: () => Promise<void>;
   processToken: (token: string | null) => Promise<void>;
 }
@@ -37,7 +37,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
   const [token, setToken] = useState<string | null>(null);
   const [userPayload, setUserPayload] = useState<TokenPayload | null>(null); // Changed state
   const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [needsLogin, setNeedsLogin] = useState<boolean>(false);
+  const [needsLogin, setNeedsLoginState] = useState<boolean>(false);
 
   // Updated function to process token using verifyToken
   const processToken = useCallback(async (newToken: string | null) => {
@@ -47,7 +47,6 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
         // Valid token and payload
         setToken(newToken);
         setUserPayload(payload.payload); // Store the full payload
-        setNeedsLogin(false); // user is authenticated
       } else {
         // Token is invalid or expired
         localStorage.removeItem('auth_token');
@@ -70,7 +69,6 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     } catch (error) {
       console.error('Error reading auth token from storage:', error);
       await processToken(null); // Ensure state is cleared on error
-      setNeedsLogin(true); // trigger login requirement on error
     } finally {
       setIsLoading(false);
     }
@@ -98,7 +96,6 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
         } catch (error) {
           console.error('Error processing token from popup message:', error);
           await processToken(null); // Clear state on error
-          setNeedsLogin(true); // trigger login requirement on error
         } finally {
           setIsLoading(false);
         }
@@ -114,8 +111,31 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
 
   const isAuthenticated = !!token && !!userPayload; // Check both token and payload
 
+  // Function to set needsLogin with a reason
+  const setNeedsLogin = useCallback(
+    (value: boolean, reason: string) => {
+      console.log(`Setting needsLogin to ${value} due to: ${reason}`);
+      setNeedsLoginState(value);
+
+      // If user is already authenticated, don't set needsLogin to true
+      if (value && isAuthenticated) {
+        console.log('User is already authenticated, not setting needsLogin');
+        setNeedsLoginState(false);
+      }
+    },
+    [isAuthenticated]
+  );
+
+  // Reset needsLogin when user becomes authenticated
+  useEffect(() => {
+    if (isAuthenticated && needsLogin) {
+      console.log('User authenticated, resetting needsLogin');
+      setNeedsLoginState(false);
+    }
+  }, [isAuthenticated, needsLogin]);
+
   // Value provided by the context
-  const value = {
+  const value: AuthContextType = {
     token,
     isAuthenticated,
     isLoading,