+
+
+ {showDropdown && (
+
+ ) : (
+
+ )}
+
+ {showSignIn && (
+
+
+ )}
+
+ {user.email}
+
+
+ setShowSignIn(false)}
+ >
+
+ )}
+
+ );
+}
diff --git a/app/components/header/Header.tsx b/app/components/header/Header.tsx
index 23236745..14d0fa45 100644
--- a/app/components/header/Header.tsx
+++ b/app/components/header/Header.tsx
@@ -5,45 +5,56 @@ import { classNames } from '~/utils/classNames';
import { HeaderActionButtons } from './HeaderActionButtons.client';
import { ChatDescription } from '~/lib/persistence/ChatDescription.client';
import { Feedback } from './Feedback';
+import { Suspense } from 'react';
+import { ClientAuth } from '~/components/auth/ClientAuth';
+import { shouldUseSupabase } from '~/lib/supabase/client';
export function Header() {
const chat = useStore(chatStore);
return (
e.stopPropagation()}
+ >
+
+ Sign In
+ +
+
- {chat.started && ( // Display ChatDescription and HeaderActionButtons only when the chat has started.
- <>
+
+
+ {() => (
+
)}
);
diff --git a/app/env.d.ts b/app/env.d.ts
new file mode 100644
index 00000000..4f9bd621
--- /dev/null
+++ b/app/env.d.ts
@@ -0,0 +1,19 @@
+/**
+ * ;
export async function listAllProblems(): Promise {
+ if (shouldUseSupabase()) {
+ return supabaseListAllProblems();
+ }
+
try {
const rv = await sendCommandDedicatedClient({
method: 'Recording.globalExperimentalCommand',
@@ -70,7 +83,16 @@ export async function listAllProblems(): Promise {
}
export async function getProblem(problemId: string): Promise {
+ if (shouldUseSupabase()) {
+ return supabaseGetProblem(problemId);
+ }
+
try {
+ if (!problemId) {
+ toast.error('Invalid problem ID');
+ return null;
+ }
+
const rv = await sendCommandDedicatedClient({
method: 'Recording.globalExperimentalCommand',
params: {
@@ -78,10 +100,14 @@ export async function getProblem(problemId: string): Promise
params: { problemId },
},
});
- console.log('FetchProblemRval', rv);
const problem = (rv as { rval: { problem: BoltProblem } }).rval.problem;
+ if (!problem) {
+ toast.error('Problem not found');
+ return null;
+ }
+
if ('prompt' in problem) {
// 2/11/2025: Update obsolete data format for older problems.
problem.repositoryContents = (problem as any).prompt.content;
@@ -91,12 +117,23 @@ export async function getProblem(problemId: string): Promise
return problem;
} catch (error) {
console.error('Error fetching problem', error);
- toast.error('Failed to fetch problem');
+
+ // Check for specific protocol error
+ if (error instanceof Error && error.message.includes('Unknown problem ID')) {
+ toast.error('Problem not found');
+ } else {
+ toast.error('Failed to fetch problem');
+ }
}
+
return null;
}
export async function submitProblem(problem: BoltProblemInput): Promise {
+ if (shouldUseSupabase()) {
+ return supabaseSubmitProblem(problem);
+ }
+
try {
const rv = await sendCommandDedicatedClient({
method: 'Recording.globalExperimentalCommand',
@@ -116,11 +153,24 @@ export async function submitProblem(problem: BoltProblemInput): Promise {
+ if (shouldUseSupabase()) {
+ return supabaseDeleteProblem(problemId);
+ }
+
+ return undefined;
+}
+
+export async function updateProblem(problemId: string, problem: BoltProblemInput): Promise {
+ if (shouldUseSupabase()) {
+ return supabaseUpdateProblem(problemId, problem);
+ }
+
try {
if (!getNutIsAdmin()) {
toast.error('Admin user required');
- return;
+
+ return undefined;
}
const loginKey = Cookies.get(nutLoginKeyCookieName);
@@ -131,10 +181,14 @@ export async function updateProblem(problemId: string, problem: BoltProblemInput
params: { problemId, problem, loginKey },
},
});
+
+ return undefined;
} catch (error) {
console.error('Error updating problem', error);
toast.error('Failed to update problem');
}
+
+ return undefined;
}
const nutLoginKeyCookieName = 'nutLoginKey';
@@ -208,6 +262,10 @@ export async function extractFileArtifactsFromRepositoryContents(repositoryConte
}
export async function submitFeedback(feedback: any) {
+ if (shouldUseSupabase()) {
+ return supabaseSubmitFeedback(feedback);
+ }
+
try {
const rv = await sendCommandDedicatedClient({
method: 'Recording.globalExperimentalCommand',
diff --git a/app/lib/stores/auth.ts b/app/lib/stores/auth.ts
new file mode 100644
index 00000000..bbde31f4
--- /dev/null
+++ b/app/lib/stores/auth.ts
@@ -0,0 +1,145 @@
+import { atom } from 'nanostores';
+import { getSupabase } from '~/lib/supabase/client';
+import type { User, Session } from '@supabase/supabase-js';
+import { logStore } from './logs';
+
+export const userStore = atom(null);
+export const sessionStore = atom(null);
+export const isLoadingStore = atom(true);
+
+export async function initializeAuth() {
+ try {
+ isLoadingStore.set(true);
+
+ // Get initial session
+ const {
+ data: { session },
+ error,
+ } = await getSupabase().auth.getSession();
+
+ if (error) {
+ throw error;
+ }
+
+ if (session) {
+ userStore.set(session.user);
+ sessionStore.set(session);
+ logStore.logSystem('Auth initialized with existing session', {
+ userId: session.user.id,
+ email: session.user.email,
+ });
+ }
+
+ // Listen for auth changes
+ const {
+ data: { subscription },
+ } = getSupabase().auth.onAuthStateChange(async (event, session) => {
+ logStore.logSystem('Auth state changed', { event });
+
+ if (session) {
+ userStore.set(session.user);
+ sessionStore.set(session);
+ logStore.logSystem('User authenticated', {
+ userId: session.user.id,
+ email: session.user.email,
+ });
+ } else {
+ userStore.set(null);
+ sessionStore.set(null);
+ logStore.logSystem('User signed out');
+ }
+ });
+
+ return () => {
+ subscription.unsubscribe();
+ };
+ } catch (error) {
+ logStore.logError('Failed to initialize auth', error);
+ throw error;
+ } finally {
+ isLoadingStore.set(false);
+ }
+}
+
+export async function signInWithEmail(email: string, password: string) {
+ try {
+ isLoadingStore.set(true);
+
+ const { data, error } = await getSupabase().auth.signInWithPassword({
+ email,
+ password,
+ });
+
+ if (error) {
+ throw error;
+ }
+
+ return data;
+ } catch (error) {
+ logStore.logError('Failed to sign in', error);
+ throw error;
+ } finally {
+ isLoadingStore.set(false);
+ }
+}
+
+export async function signUp(email: string, password: string) {
+ try {
+ isLoadingStore.set(true);
+
+ const { data, error } = await getSupabase().auth.signUp({
+ email,
+ password,
+ options: {
+ emailRedirectTo: typeof window !== 'undefined' ? `${window.location.origin}/auth/callback` : undefined,
+ },
+ });
+
+ if (error) {
+ throw error;
+ }
+
+ return data;
+ } catch (error) {
+ logStore.logError('Failed to sign up', error);
+ throw error;
+ } finally {
+ isLoadingStore.set(false);
+ }
+}
+
+export async function updatePassword(newPassword: string) {
+ try {
+ isLoadingStore.set(true);
+
+ const { error } = await getSupabase().auth.updateUser({
+ password: newPassword,
+ });
+
+ if (error) {
+ throw error;
+ }
+ } catch (error) {
+ logStore.logError('Failed to update password', error);
+ throw error;
+ } finally {
+ isLoadingStore.set(false);
+ }
+}
+
+export async function signOut() {
+ try {
+ isLoadingStore.set(true);
+
+ const { error } = await getSupabase().auth.signOut();
+
+ if (error) {
+ throw error;
+ }
+ } catch (error) {
+ logStore.logError('Failed to sign out', error);
+ throw error;
+ } finally {
+ isLoadingStore.set(false);
+ }
+}
diff --git a/app/lib/supabase/client.ts b/app/lib/supabase/client.ts
new file mode 100644
index 00000000..6ec19044
--- /dev/null
+++ b/app/lib/supabase/client.ts
@@ -0,0 +1,104 @@
+import { createClient } from '@supabase/supabase-js';
+
+export type Json = string | number | boolean | null | { [key: string]: Json | undefined } | Json[];
+
+export interface Database {
+ public: {
+ Tables: {
+ problems: {
+ Row: {
+ id: string;
+ created_at: string;
+ updated_at: string;
+ title: string;
+ description: string;
+ status: 'Pending' | 'Solved' | 'Unsolved';
+ keywords: string[];
+ repository_contents: Json;
+ user_id: string | null;
+ problem_comments: Database['public']['Tables']['problem_comments']['Row'][];
+ };
+ Insert: Omit;
+ Update: Partial;
+ };
+ problem_comments: {
+ Row: {
+ id: string;
+ created_at: string;
+ problem_id: string;
+ content: string;
+ username: string;
+ };
+ Insert: Omit;
+ Update: Partial;
+ };
+ };
+ };
+}
+
+// Get Supabase URL and key from environment variables
+let supabaseUrl = '';
+let supabaseAnonKey = '';
+
+/**
+ * Determines whether Supabase should be used based on URL parameters and environment variables.
+ * URL parameters take precedence over environment variables.
+ */
+export function shouldUseSupabase(): boolean {
+ // Check URL parameters (client-side only)
+ const urlParams = typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : null;
+ const useSupabaseFromUrl = urlParams ? urlParams.get('supabase') === 'true' : false;
+
+ // Check environment variables
+ const useSupabaseFromEnv =
+ typeof window !== 'undefined' ? window.ENV?.USE_SUPABASE === 'true' : process.env.USE_SUPABASE === 'true';
+
+ // URL param takes precedence over environment variable
+ const shouldUse = useSupabaseFromUrl || useSupabaseFromEnv;
+
+ // Log for debugging
+ if (typeof window !== 'undefined') {
+ console.log('Supabase usage check:', {
+ fromUrl: useSupabaseFromUrl,
+ fromEnv: useSupabaseFromEnv,
+ enabled: shouldUse,
+ });
+ }
+
+ return shouldUse;
+}
+
+export function getSupabase() {
+ // Determine execution environment and get appropriate variables
+ if (process.browser) {
+ supabaseUrl = window.ENV.SUPABASE_URL || '';
+ supabaseAnonKey = window.ENV.SUPABASE_ANON_KEY || '';
+ } else {
+ // Node.js environment (development)
+ supabaseUrl = process.env.SUPABASE_URL || '';
+ supabaseAnonKey = process.env.SUPABASE_ANON_KEY || '';
+ }
+
+ // If neither URL param nor environment variable is set to true, log a warning
+ if (!shouldUseSupabase()) {
+ console.log('Supabase is not enabled. Set USE_SUPABASE=true or use ?supabase=true query parameter.');
+ }
+
+ // Log warning if environment variables are missing
+ if (!supabaseUrl || !supabaseAnonKey) {
+ console.warn('Missing Supabase environment variables. Some features may not work properly.');
+ }
+
+ // Create and return the Supabase client
+ return createClient(supabaseUrl, supabaseAnonKey, {
+ auth: {
+ persistSession: true,
+ autoRefreshToken: true,
+ },
+ });
+}
+
+// Helper function to check if Supabase is properly initialized
+export const isSupabaseInitialized = (): boolean => {
+ return Boolean(supabaseUrl && supabaseAnonKey);
+};
diff --git a/app/lib/supabase/problems.ts b/app/lib/supabase/problems.ts
new file mode 100644
index 00000000..8df7266e
--- /dev/null
+++ b/app/lib/supabase/problems.ts
@@ -0,0 +1,245 @@
+// Supabase implementation of problem management functions
+
+import { toast } from 'react-toastify';
+import { getSupabase, type Database } from './client';
+import type { BoltProblem, BoltProblemDescription, BoltProblemInput, BoltProblemStatus } from '~/lib/replay/Problems';
+import { getProblemsUsername, getNutIsAdmin } from '~/lib/replay/Problems';
+
+export async function supabaseListAllProblems(): Promise {
+ try {
+ const { data, error } = await getSupabase()
+ .from('problems')
+ .select('id, created_at, updated_at, title, description, status, keywords, user_id')
+ .order('created_at', { ascending: false });
+
+ console.log('ListAllProblemsData', data);
+
+ if (error) {
+ throw error;
+ }
+
+ const problems: BoltProblemDescription[] = data.map((problem) => ({
+ version: 1,
+ problemId: problem.id,
+ timestamp: new Date(problem.created_at).getTime(),
+ title: problem.title,
+ description: problem.description,
+ status: problem.status,
+ keywords: problem.keywords,
+ }));
+
+ return problems;
+ } catch (error) {
+ console.error('Error fetching problems', error);
+ toast.error('Failed to fetch problems');
+
+ return [];
+ }
+}
+
+export async function supabaseGetProblem(problemId: string): Promise {
+ try {
+ if (!problemId) {
+ toast.error('Invalid problem ID');
+ return null;
+ }
+
+ const { data, error } = await getSupabase()
+ .from('problems')
+ .select(
+ `
+ *,
+ problem_comments (
+ *
+ )
+ `,
+ )
+ .eq('id', problemId)
+ .single();
+
+ if (error) {
+ // More specific error message based on error code
+ if (error.code === 'PGRST116') {
+ toast.error('Problem not found');
+ } else {
+ toast.error(`Failed to fetch problem: ${error.message}`);
+ }
+
+ throw error;
+ }
+
+ if (!data) {
+ toast.error('Problem not found');
+ return null;
+ }
+
+ // If the problem has a user_id, fetch the profile information
+ let username = null;
+
+ if (data.user_id) {
+ const { data: profileData, error: profileError } = await getSupabase()
+ .from('profiles')
+ .select('username')
+ .eq('id', data.user_id)
+ .single();
+
+ if (!profileError && profileData) {
+ username = profileData.username;
+ }
+ }
+
+ return {
+ problemId: data.id,
+ version: 1,
+ timestamp: new Date(data.created_at).getTime(),
+ title: data.title,
+ description: data.description,
+ status: data.status as BoltProblemStatus,
+ keywords: data.keywords,
+ repositoryContents: data.repository_contents,
+ username,
+ comments: data.problem_comments.map((comment: any) => ({
+ id: comment.id,
+ createdAt: comment.created_at,
+ problemId: comment.problem_id,
+ content: comment.content,
+ username: comment.username,
+ })),
+ };
+ } catch (error) {
+ console.error('Error fetching problem:', error);
+
+ // Don't show duplicate toast if we already showed one above
+ if (!(error as any)?.code) {
+ toast.error('Failed to fetch problem');
+ }
+ }
+
+ return null;
+}
+
+export async function supabaseSubmitProblem(problem: BoltProblemInput): Promise {
+ try {
+ const supabaseProblem = {
+ id: undefined as any, // This will be set by Supabase
+ title: problem.title,
+ description: problem.description,
+ status: problem.status as BoltProblemStatus,
+ keywords: problem.keywords || [],
+ repository_contents: problem.repositoryContents,
+ user_id: null,
+ };
+
+ const { data, error } = await getSupabase().from('problems').insert(supabaseProblem).select().single();
+
+ if (error) {
+ throw error;
+ }
+
+ return data.id;
+ } catch (error) {
+ console.error('Error submitting problem', error);
+ toast.error('Failed to submit problem');
+
+ return null;
+ }
+}
+
+export async function supabaseDeleteProblem(problemId: string): Promise {
+ try {
+ const { error: deleteError } = await getSupabase().from('problems').delete().eq('id', problemId);
+
+ if (deleteError) {
+ throw deleteError;
+ }
+
+ return undefined;
+ } catch (error) {
+ console.error('Error deleting problem', error);
+
+ return undefined;
+ }
+}
+
+export async function supabaseUpdateProblem(problemId: string, problem: BoltProblemInput): Promise {
+ try {
+ if (!getNutIsAdmin()) {
+ toast.error('Admin user required');
+ return undefined;
+ }
+
+ // Extract comments to add separately if needed
+ const comments = problem.comments || [];
+ delete (problem as any).comments;
+
+ // Convert to Supabase format
+ const updates: Database['public']['Tables']['problems']['Update'] = {
+ title: problem.title,
+ description: problem.description,
+ status: problem.status,
+ keywords: problem.keywords || [],
+ repository_contents: problem.repositoryContents,
+ };
+
+ // Update the problem
+ const { error: updateError } = await getSupabase().from('problems').update(updates).eq('id', problemId);
+
+ if (updateError) {
+ throw updateError;
+ }
+
+ // Handle comments if they exist
+ if (comments.length > 0) {
+ /**
+ * Create a unique identifier for each comment based on content and timestamp.
+ * This allows us to use upsert with onConflict to avoid duplicates.
+ */
+ const commentInserts = comments.map((comment) => ({
+ problem_id: problemId,
+ content: comment.content,
+ username: comment.username || getProblemsUsername() || 'Anonymous',
+
+ /**
+ * Use timestamp as a unique identifier for the comment.
+ * This assumes that comments with the same timestamp are the same comment.
+ */
+ created_at: new Date(comment.timestamp).toISOString(),
+ }));
+
+ /**
+ * Use upsert with onConflict to avoid duplicates.
+ * This will insert new comments and ignore existing ones based on created_at.
+ */
+ const { error: commentsError } = await getSupabase().from('problem_comments').upsert(commentInserts, {
+ onConflict: 'created_at',
+ ignoreDuplicates: true,
+ });
+
+ if (commentsError) {
+ throw commentsError;
+ }
+ }
+ } catch (error) {
+ console.error('Error updating problem', error);
+ toast.error('Failed to update problem');
+ }
+
+ return undefined;
+}
+
+export async function supabaseSubmitFeedback(feedback: any) {
+ try {
+ /*
+ * Store feedback in supabase if needed
+ * For now, just return true
+ */
+ console.log('Feedback submitted:', feedback);
+
+ return true;
+ } catch (error) {
+ console.error('Error submitting feedback', error);
+ toast.error('Failed to submit feedback');
+
+ return false;
+ }
+}
diff --git a/app/root.tsx b/app/root.tsx
index 593bc38e..c91d1f61 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,12 +1,16 @@
import { sentryHandleError } from '~/lib/sentry';
import { useStore } from '@nanostores/react';
-import type { LinksFunction } from '@remix-run/cloudflare';
-import { Links, Meta, Outlet, Scripts, ScrollRestoration, useRouteError } from '@remix-run/react';
+import type { LinksFunction, LoaderFunction } from '@remix-run/cloudflare';
+import { json } from '@remix-run/cloudflare';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, useRouteError, useLoaderData } from '@remix-run/react';
import tailwindReset from '@unocss/reset/tailwind-compat.css?url';
import { themeStore } from './lib/stores/theme';
import { stripIndents } from './utils/stripIndent';
import { createHead } from 'remix-island';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { logStore } from './lib/stores/logs';
+import { initializeAuth, userStore, isLoadingStore } from './lib/stores/auth';
+import { ToastContainer } from 'react-toastify';
import reactToastifyStyles from 'react-toastify/dist/ReactToastify.css?url';
import globalStyles from './styles/index.scss?url';
@@ -14,6 +18,14 @@ import xtermStyles from '@xterm/xterm/css/xterm.css?url';
import 'virtual:uno.css';
+interface LoaderData {
+ ENV: {
+ SUPABASE_URL: string;
+ SUPABASE_ANON_KEY: string;
+ USE_SUPABASE?: string;
+ };
+}
+
export const links: LinksFunction = () => [
{
rel: 'icon',
@@ -39,6 +51,20 @@ export const links: LinksFunction = () => [
},
];
+export const loader: LoaderFunction = async ({ context }) => {
+ const supabaseUrl = (context.SUPABASE_URL || process.env.SUPABASE_URL || '') as string;
+ const supabaseAnonKey = (context.SUPABASE_ANON_KEY || process.env.SUPABASE_ANON_KEY || '') as string;
+ const useSupabase = (context.USE_SUPABASE || process.env.USE_SUPABASE || '') as string;
+
+ return json({
+ ENV: {
+ SUPABASE_URL: supabaseUrl,
+ SUPABASE_ANON_KEY: supabaseAnonKey,
+ USE_SUPABASE: useSupabase,
+ },
+ });
+};
+
const inlineThemeCode = stripIndents`
setTutorialKitTheme();
@@ -63,46 +89,82 @@ export const Head = createHead(() => (
));
-export function Layout({ children }: { children: React.ReactNode }) {
+function ClientOnly({ children }: { children: React.ReactNode }) {
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => setMounted(true), []);
+
+ return mounted ? <>{children} : null;
+}
+
+function ThemeProvider() {
const theme = useStore(themeStore);
useEffect(() => {
document.querySelector('html')?.setAttribute('data-theme', theme);
}, [theme]);
- return (
- <>
- {children}
- () as LoaderData;
+ const [mounted, setMounted] = useState(false);
useEffect(() => {
- logStore.logSystem('Application initialized', {
- theme,
- platform: navigator.platform,
- userAgent: navigator.userAgent,
- timestamp: new Date().toISOString(),
- });
+ window.ENV = data.ENV;
+ setMounted(true);
}, []);
+ // Only access stores on the client side
+ const theme = useStore(themeStore);
+ const user = useStore(userStore);
+ const isLoading = useStore(isLoadingStore);
+
+ useEffect(() => {
+ if (mounted) {
+ logStore.logSystem('Application initialized', {
+ theme,
+ platform: navigator.platform,
+ userAgent: navigator.userAgent,
+ timestamp: new Date().toISOString(),
+ isAuthenticated: !!user,
+ });
+ }
+ }, [theme, user, mounted]);
+
return (
-
-
+ <>
+
+ {isLoading ? :
+
+
+ {chat.started && (
{() =>
-
- {() => (
-
-
+ )}
+
+
+
+ {shouldUseSupabase() && (
+
-
- )}
-
+ {chat.started && (
+
+ {() => (
+
+ )}
+
+
+
+ )}
+ Something went wrong
;
};
export default function App() {
- const theme = useStore(themeStore);
+ const data = useLoaderData