ok try fix serving

README.md

···
 For production deployment:
 
 1. Build all packages in the correct order:
+
    ```bash
    pnpm build
    ```
-   
+
    This will:
+
    - Build the lexicon package first (shared type definitions)
    - Build the frontend (`packages/client`) next
    - Finally build the backend (`packages/appview`)
···
    ```
 
 The backend server will:
+
 - Serve the API at `/api/*` endpoints
 - Serve the frontend static files from the client's build directory
 - Handle client-side routing by serving index.html for all non-API routes

package.json

···
     "dev:client": "pnpm --filter @statusphere/client dev",
     "dev:oauth": "node scripts/setup-ngrok.js",
     "lexgen": "pnpm --filter @statusphere/lexicon build",
-    
     "build": "pnpm build:lexicon && pnpm build:client && pnpm build:appview",
     "build:lexicon": "pnpm --filter @statusphere/lexicon build",
     "build:appview": "pnpm --filter @statusphere/appview build",
     "build:client": "pnpm --filter @statusphere/client build",
-    
     "start": "pnpm --filter @statusphere/appview start",
     "start:dev": "pnpm -r start",
     "start:appview": "pnpm --filter @statusphere/appview start",
     "start:client": "pnpm --filter @statusphere/client start",
-    
     "clean": "pnpm -r clean",
     "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
     "typecheck": "pnpm -r typecheck"

packages/appview/src/index.ts

···
 import events from 'node:events'
+import fs from 'node:fs'
 import type http from 'node:http'
 import path from 'node:path'
 import type { OAuthClient } from '@atproto/oauth-client-node'
···
 import { createIngester } from '#/ingester'
 import { env } from '#/lib/env'
 import { createRouter } from '#/routes'
-import fs from 'node:fs'
 
 // Application state passed to the router and elsewhere
 export type AppContext = {
···
     const router = createRouter(ctx)
     app.use(express.json())
     app.use(express.urlencoded({ extended: true }))
-    
-    // API routes
+
+    // Two versions of the API routes:
+    // 1. Mounted at /api for the client
     app.use('/api', router)
-    
+
     // Serve static files from the frontend build
     const frontendPath = path.resolve(__dirname, '../../../client/dist')
-    
+
     // Check if the frontend build exists
     if (fs.existsSync(frontendPath)) {
       logger.info(`Serving frontend static files from: ${frontendPath}`)
-      
+
       // Serve static files
       app.use(express.static(frontendPath))
-      
+
       // For any other requests, send the index.html file
       app.get('*', (req, res) => {
-        // Skip API routes
-        if (req.path.startsWith('/api/')) {
-          return res.sendStatus(404)
+        // Only handle non-API paths
+        if (!req.path.startsWith('/api/')) {
+          res.sendFile(path.join(frontendPath, 'index.html'))
+        } else {
+          res.status(404).json({ error: 'API endpoint not found' })
         }
-        
-        res.sendFile(path.join(frontendPath, 'index.html'))
       })
     } else {
       logger.warn(`Frontend build not found at: ${frontendPath}`)

packages/appview/src/routes.ts

···
         clientSession.did = session.did
         await clientSession.save()
 
+        // Get the origin and determine appropriate redirect
+        const host = req.get('host') || ''
+        const protocol = req.protocol || 'http'
+        const baseUrl = `${protocol}://${host}`
+
+        ctx.logger.info(
+          `OAuth callback successful, redirecting to ${baseUrl}/oauth-callback`,
+        )
+
         // Redirect to the frontend oauth-callback page
         res.redirect('/oauth-callback')
       } catch (err) {

packages/client/src/components/StatusForm.tsx

···
                 transition-all duration-200
                 ${isSelected ? 'opacity-60' : 'opacity-100'}
                 ${!isSelected ? 'hover:bg-gray-100 dark:hover:bg-gray-700 hover:scale-110' : ''}
-                ${isCurrentStatus 
-                  ? 'bg-blue-50 ring-1 ring-blue-200 dark:bg-blue-900 dark:bg-opacity-30 dark:ring-blue-700' 
-                  : ''}
+                ${
+                  isCurrentStatus
+                    ? 'bg-blue-50 ring-1 ring-blue-200 dark:bg-blue-900 dark:bg-opacity-30 dark:ring-blue-700'
+                    : ''
+                }
                 active:scale-95
                 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-500
               `}

packages/client/src/components/StatusList.tsx

···
 
   if (isLoading && !data) {
     return (
-      <div className="py-4 text-center text-gray-500 dark:text-gray-400">Loading statuses...</div>
+      <div className="py-4 text-center text-gray-500 dark:text-gray-400">
+        Loading statuses...
+      </div>
     )
   }
 
···
 
   if (statuses.length === 0) {
     return (
-      <div className="py-4 text-center text-gray-500 dark:text-gray-400">No statuses yet.</div>
+      <div className="py-4 text-center text-gray-500 dark:text-gray-400">
+        No statuses yet.
+      </div>
     )
   }
 

packages/client/src/hooks/useAuth.tsx

···
     try {
       // Add a small artificial delay for UX purposes
       const loginPromise = api.login(handle)
-      
+
       // Ensure the loading state shows for at least 800ms for better UX
       const result = await Promise.all([
         loginPromise,
-        new Promise(resolve => setTimeout(resolve, 800))
+        new Promise((resolve) => setTimeout(resolve, 800)),
       ]).then(([loginResult]) => loginResult)
-      
+
       return result
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Login failed'

packages/client/src/pages/HomePage.tsx

···
           <h2 className="text-2xl font-semibold mb-2 text-gray-800 dark:text-gray-200">
             Loading Statusphere...
           </h2>
-          <p className="text-gray-600 dark:text-gray-400">Setting up your experience</p>
+          <p className="text-gray-600 dark:text-gray-400">
+            Setting up your experience
+          </p>
         </div>
       </div>
     )
···
     return (
       <div className="flex justify-center items-center py-16">
         <div className="text-center p-6 max-w-md">
-          <h2 className="text-2xl font-semibold mb-2 text-gray-800 dark:text-gray-200">Error</h2>
+          <h2 className="text-2xl font-semibold mb-2 text-gray-800 dark:text-gray-200">
+            Error
+          </h2>
           <p className="text-red-500 mb-4">{error}</p>
           <a
             href="/login"

packages/client/src/services/api.ts

···
 import { AppBskyActorDefs, XyzStatusphereDefs } from '@statusphere/lexicon'
 
-const API_URL = import.meta.env.VITE_API_URL || '/api'
+// Use '/api' prefix consistently for all API calls
+const API_URL = '/api'
 
 // Helper function for logging API actions
 function logApiCall(
···
 
 // API service
 export const api = {
-  // Get base URL
-  getBaseUrl() {
-    return API_URL || ''
-  },
   // Login
   async login(handle: string) {
-    const url = API_URL ? `${API_URL}/login` : '/login'
+    const url = `${API_URL}/login`
     logApiCall('POST', url)
 
     const response = await fetch(url, {
···
 
   // Logout
   async logout() {
-    const url = API_URL ? `${API_URL}/logout` : '/logout'
+    const url = `${API_URL}/logout`
     logApiCall('POST', url)
     const response = await fetch(url, {
       method: 'POST',
···
 
   // Get current user
   async getCurrentUser() {
-    const url = API_URL ? `${API_URL}/user` : '/user'
+    const url = `${API_URL}/user`
     logApiCall('GET', url)
     try {
-      console.log('📞 Fetching user from:', url, 'with credentials included')
-      // Debug output - what headers are we sending?
       const headers = {
         Accept: 'application/json',
       }
-      console.log('📨 Request headers:', headers)
 
       const response = await fetch(url, {
         credentials: 'include', // This is crucial for sending cookies
···
 
   // Get statuses
   async getStatuses() {
-    const url = API_URL ? `${API_URL}/statuses` : '/statuses'
+    const url = `${API_URL}/statuses`
     logApiCall('GET', url)
     const response = await fetch(url, {
       credentials: 'include',
···
 
   // Create status
   async createStatus(status: string) {
-    const url = API_URL ? `${API_URL}/status` : '/status'
+    const url = `${API_URL}/status`
     logApiCall('POST', url)
     const response = await fetch(url, {
       method: 'POST',