Put file editing behind an experiment (#98)

src/components/preview_panel/FileEditor.tsx

@@ -5,6 +5,7 @@ import { useTheme } from "@/contexts/ThemeContext";
 import { ChevronRight, Circle } from "lucide-react";
 import "@/components/chat/monaco";
 import { IpcClient } from "@/ipc/ipc_client";
+import { useSettings } from "@/hooks/useSettings";
 
 interface FileEditorProps {
   appId: number | null;
@@ -54,6 +55,7 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({ path, hasUnsavedChanges }) => {
 export const FileEditor = ({ appId, filePath }: FileEditorProps) => {
   const { content, loading, error } = useLoadAppFile(appId, filePath);
   const { theme } = useTheme();
+  const { settings } = useSettings();
   const [value, setValue] = useState<string | undefined>(undefined);
   const [displayUnsavedChanges, setDisplayUnsavedChanges] = useState(false);
 
@@ -197,6 +199,7 @@ export const FileEditor = ({ appId, filePath }: FileEditorProps) => {
             fontFamily: "monospace",
             fontSize: 13,
             lineNumbers: "on",
+            readOnly: !settings?.experiments?.enableFileEditing,
           }}
         />
       </div>

src/hooks/useSettings.ts

@@ -101,6 +101,7 @@ export function useSettings() {
     loading,
     error,
     updateSettings,
+
     isProviderSetup,
     isAnyProviderSetup: () => {
       // Technically we should check for ollama and lmstudio being setup, but

src/lib/schemas.ts

@@ -98,6 +98,7 @@ export type Supabase = z.infer<typeof SupabaseSchema>;
 export const ExperimentsSchema = z.object({
   // Deprecated
   enableSupabaseIntegration: z.boolean().describe("DEPRECATED").optional(),
+  enableFileEditing: z.boolean().optional(),
 });
 export type Experiments = z.infer<typeof ExperimentsSchema>;
 

src/pages/settings.tsx

@@ -13,13 +13,14 @@ import { ArrowLeft } from "lucide-react";
 import { useRouter } from "@tanstack/react-router";
 import { GitHubIntegration } from "@/components/GitHubIntegration";
 import { SupabaseIntegration } from "@/components/SupabaseIntegration";
+import { Switch } from "@/components/ui/switch";
 
 export default function SettingsPage() {
   const { theme, setTheme } = useTheme();
   const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
   const [isResetting, setIsResetting] = useState(false);
   const appVersion = useAppVersion();
-  const { settings } = useSettings();
+  const { settings, updateSettings } = useSettings();
   const router = useRouter();
 
   const handleResetEverything = async () => {
@@ -153,7 +154,31 @@ export default function SettingsPage() {
               Experiments
             </h2>
             <div className="space-y-4">
-              There are no experiments currently available.
+              {/* Enable File Editing Experiment */}
+              <div className="flex items-center justify-between">
+                <label
+                  htmlFor="enable-file-editing"
+                  className="text-sm font-medium text-gray-700 dark:text-gray-300"
+                >
+                  Enable File Editing
+                </label>
+                <Switch
+                  id="enable-file-editing"
+                  checked={!!settings?.experiments?.enableFileEditing}
+                  onCheckedChange={(checked) => {
+                    updateSettings({
+                      experiments: {
+                        ...settings?.experiments,
+                        enableFileEditing: checked,
+                      },
+                    });
+                  }}
+                />
+              </div>
+              <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                File editing is not reliable and requires you to manually commit
+                changes and update Supabase edge functions.
+              </p>
             </div>
           </div>