Replace hardcoded Supabase secrets with environment variables

Co-authored-by: Oxygen-Low <95589118+Oxygen-Low@users.noreply.github.com>

Author: google-labs-jules[bot]

.jules/bolt.md

@@ -2,6 +2,8 @@
 
 **Learning:** Static arrays that contain JSX elements (e.g. configuring categories or routing with icons) created inside a React component render function are re-allocated on every single render. This forces child components and `useMemo` hooks depending on them to constantly re-evaluate.
 **Action:** Always define static configuration structures containing JSX elements outside the component body.
+
 ## 2024-05-17 - [ReactMarkdown Memoization Pattern]
+
 **Learning:** In streaming chat interfaces (like `Chatbot.tsx`), placing inline object or function definitions (like the `components` prop for `ReactMarkdown`) inside a `React.memo` wrapped child component causes that heavy component to re-render constantly. This happens because the parent `ChatMessage` is memoized and might try to avoid re-renders, but when it does re-render due to prop changes (like new tokens in `m.content`), it recreates the `components` object, which then forces `ReactMarkdown` (a very heavy component with SyntaxHighlighter) to completely re-render from scratch instead of just updating text.
 **Action:** Always extract static configuration objects, such as `ReactMarkdown`'s `components` mappings or custom renderers, outside of the React render body. If they depend on props/state, use `useMemo`. This prevents O(n) re-renders during frequent streaming state updates.

.jules/palette.md

@@ -1,6 +1,9 @@
 ## 2023-10-27 - [Add aria-pressed to custom toggles]
+
 **Learning:** Custom toggle buttons and selection items (like themes, fonts, or feature switches) constructed with `button` elements often lack implicit state for screen readers. Using CSS classes alone for visual active state is insufficient for accessibility.
 **Action:** Always map the boolean active state of a custom toggle or selection button to the `aria-pressed` attribute (e.g., `aria-pressed={isActive}`). For multi-selection or lists, `aria-selected` within a `role="listbox"` or `role="tablist"` might be more appropriate, but `aria-pressed` is crucial for standalone toggles.
+
 ## 2025-02-28 - Add missing ARIA labels to Music Player
+
 **Learning:** Icon-only buttons without `aria-label` or `title` attributes are completely inaccessible to screen readers and difficult for sighted users to identify. When adding ARIA attributes to toggle buttons (like "Shuffle"), it is important to include `aria-pressed` to communicate the active state to assistive technologies.
 **Action:** Always add `aria-label` and `title` to icon-only buttons. For stateful toggle buttons, implement `aria-pressed={state}` dynamically.

.jules/sentinel.md

@@ -3,3 +3,9 @@
 **Vulnerability:** A critical SSRF (Server-Side Request Forgery) vulnerability via DNS rebinding existed because `url.hostname` was directly assigned an IPv6 address (`firstAddress.address`) without brackets (`[]`). Node.js fails silently when setting an unbracketed IPv6 address to `url.hostname`, leaving the original hostname intact and bypassing IP pinning.
 **Learning:** In Node.js, `URL.hostname` fails silently when assigned an unbracketed IPv6 address (e.g., `url.hostname = '2606:4700::1111'`). This can leave the original domain intact and bypass IP pinning or SSRF mitigations like DNS rebinding protection.
 **Prevention:** Always use `net.isIPv6()` to bracket IPv6 addresses (e.g., `[2606:4700::1111]`) before assigning them to `url.hostname`.
+
+## 2024-05-18 - Hardcoded Supabase Secrets in Backend
+
+**Vulnerability:** Hardcoded Supabase URL and anon keys found across the backend and frontend.
+**Learning:** Hardcoding API keys is a major security flaw allowing exploitation.
+**Prevention:** Always use environment variables for sensitive info (`import.meta.env` for Vite or `process.env` in node).

client/components/apps/Chatbot.tsx

@@ -149,9 +149,7 @@ const ChatMessage = React.memo(
                 : "bg-slate-900 border border-slate-800 text-slate-200",
             )}
           >
-            <ReactMarkdown
-              components={memoizedMarkdownComponents}
-            >
+            <ReactMarkdown components={memoizedMarkdownComponents}>
               {displayContent}
             </ReactMarkdown>
           </div>

client/lib/supabase.ts

@@ -1,7 +1,7 @@
 import { createClient } from "@supabase/supabase-js";
 
-const supabaseUrl = "https://vqmukrmpgvavscsyefqd.supabase.co";
-const supabaseKey = "sb_publishable_t2Nj_QmKvYBkmhQZvGkPAQ_a6YFGq4Q";
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
 
 export const supabase = createClient(supabaseUrl, supabaseKey);