Cleanup

Author: IgorWounds

app/api/user-settings/route.ts

@@ -6,6 +6,8 @@ const schema = z.object({
   together_api_key: z.string().min(1).max(128).optional().or(z.literal('')),
 })
 
+// NOTE: This route uses SUPABASE_SERVICE_ROLE_KEY for all DB access and only accepts JWT via Authorization header. Cookies are NOT used.
+
 function getSupabaseAdmin() {
   return createClient(
     process.env.NEXT_PUBLIC_SUPABASE_URL!,
@@ -17,6 +19,7 @@ async function getUserFromAuthHeader(req: NextRequest) {
   const authHeader = req.headers.get('authorization')
   if (!authHeader) return null
   const jwt = authHeader.replace('Bearer ', '')
+  if (!jwt) return null
   const supabase = getSupabaseAdmin()
   const { data: { user }, error } = await supabase.auth.getUser(jwt)
   if (error || !user) return null

app/chat/[id]/page.tsx

@@ -6,6 +6,7 @@ export const metadata: Metadata = {
   description: 'Continue your conversation with AI in a modern, professional chat UI.'
 }
 
-export default function ChatPage({ params }: { params: { id: string } }) {
-  return <ClientChatPage id={params.id} />
+export default async function ChatPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  return <ClientChatPage id={id} />
 } 

app/layout.tsx

@@ -38,7 +38,6 @@ export const metadata: Metadata = {
     creator: '@yourtwitter',
     images: ['/og-image.png'],
   },
-  themeColor: '#181a20',
   robots: {
     index: true,
     follow: true,
@@ -51,6 +50,10 @@ export const metadata: Metadata = {
   },
 }
 
+export const viewport = {
+  themeColor: '#181a20',
+}
+
 // PHASE 5: Together.AI model selection and chat integration in progress
 
 export default function RootLayout({

components/chat/chat-message.tsx

@@ -93,22 +93,20 @@ export default function ChatMessage({ role, content, highlight, searchTerm, atta
               strong: (props) => <strong className="font-semibold" {...props} />,
               code: (props) => <code className="bg-[#f7f7fa] px-1 py-0.5 rounded text-sm text-[#23272f]" {...props} />,
               img: ({ src, alt }) => (
-                <div className="my-3 flex justify-center">
-                  <img
-                    src={src || ''}
-                    alt={alt || 'generated image'}
-                    loading="lazy"
-                    className="rounded-2xl border border-[#353740] shadow-lg max-w-xs max-h-80 object-contain bg-[#23272f]"
-                    style={{ display: 'block', margin: '0 auto' }}
-                  />
-                </div>
+                <img
+                  src={src || ''}
+                  alt={alt || 'generated image'}
+                  loading="lazy"
+                  className="my-3 rounded-2xl border border-[#353740] shadow-lg max-w-xs max-h-80 object-contain bg-[#23272f] block mx-auto"
+                  style={{ display: 'block', margin: '0 auto' }}
+                />
               ),
               p: ({ children }) => {
-                // If any child is a div (our custom img wrapper), unwrap all children
+                // If any child is an <img>, unwrap all children to avoid <div> or <img> inside <p>
                 if (
                   Array.isArray(children) &&
                   children.some(
-                    (child) => React.isValidElement(child) && child.type === 'div'
+                    (child) => React.isValidElement(child) && child.type === 'img'
                   )
                 ) {
                   return <>{children}</>;

components/settings/settings-modal.tsx

@@ -22,16 +22,25 @@ export default function SettingsModal({ open, onClose }: SettingsModalProps) {
     setSuccess(null)
     setApiKey('')
     setIsLoading(true)
-    fetch('/api/user-settings')
-      .then(res => res.json())
-      .then(data => {
+    // Always get JWT and send it in the header
+    async function fetchSettings() {
+      try {
+        const { data: { session } } = await supabase.auth.getSession()
+        const jwt = session?.access_token
+        const res = await fetch('/api/user-settings', {
+          headers: {
+            ...(jwt ? { 'Authorization': `Bearer ${jwt}` } : {}),
+          },
+        })
+        const data = await res.json()
         setHasKey(!!data.hasTogetherApiKey)
         setIsLoading(false)
-      })
-      .catch(() => {
+      } catch {
         setError('Failed to load settings')
         setIsLoading(false)
-      })
+      }
+    }
+    fetchSettings()
   }, [open])
 
   const handleSave = async (e: React.FormEvent) => {