feat: browser settings in the settings page

actions/browser.tsx

@@ -0,0 +1,48 @@
+'use server';
+
+import fs from 'fs';
+import os from 'os';
+import path from 'path';
+
+export type BrowserSettings = {
+  headless: boolean;
+  useDefaultSession: boolean;
+};
+
+const defaultSettings: BrowserSettings = {
+  headless: false,
+  useDefaultSession: false,
+};
+
+export async function getBrowserSettings(): Promise<BrowserSettings> {
+  const location = await browserSettingsLocation();
+  if (fs.existsSync(location)) {
+    const settings = fs.readFileSync(location, 'utf-8');
+    return JSON.parse(settings) as BrowserSettings;
+  }
+
+  return defaultSettings;
+}
+
+export async function setBrowserSettings(settings: BrowserSettings) {
+  const location = await browserSettingsLocation();
+  fs.writeFileSync(location, JSON.stringify(settings, null, 2));
+}
+
+export async function browserSettingsLocation(): Promise<string> {
+  const homeDir = os.homedir();
+  let configDir;
+  if (os.platform() === 'darwin') {
+    configDir =
+      process.env.XDG_CONFIG_HOME ||
+      path.join(homeDir, 'Library', 'Application Support');
+  } else if (os.platform() === 'win32') {
+    configDir = path.join(homeDir, 'AppData', 'Local');
+  } else if (os.platform() === 'linux') {
+    configDir = process.env.XDG_CONFIG_HOME || path.join(homeDir, '.config');
+  } else {
+    throw new Error('Unsupported platform');
+  }
+
+  return path.join(configDir, 'acorn', 'browsersettings.json');
+}

app/settings/page.tsx

@@ -1,9 +1,34 @@
 'use client';
 
-import { Button, Divider } from '@nextui-org/react';
+import { Button, Chip, Divider, Switch, Tooltip } from '@nextui-org/react';
 import { GoDownload } from 'react-icons/go';
+import { useEffect, useState } from 'react';
+import {
+  BrowserSettings,
+  getBrowserSettings,
+  setBrowserSettings,
+} from '@/actions/browser';
+import { IoIosInformationCircleOutline } from 'react-icons/io';
 
 export default function Settings() {
+  const [settings, setSettings] = useState({
+    headless: false,
+    useDefaultSession: false,
+  } as BrowserSettings);
+  const [loading, setLoading] = useState(true);
+  const [saveButtonText, setSaveButtonText] = useState('Save Settings');
+
+  useEffect(() => {
+    getBrowserSettings().then((settings) => {
+      setSettings(settings);
+      setLoading(false);
+    });
+  }, []);
+
+  async function saveSettings() {
+    await setBrowserSettings(settings);
+  }
+
   return (
     <div className="container mx-auto max-w-6xl py-10 px-6">
       <h1 className="text-3xl font-bold mb-8">Settings</h1>
@@ -22,6 +47,69 @@ export default function Settings() {
             Export Acorn Logs
           </Button>
         </section>
+        <section>
+          <h2 className="text-2xl font-semibold mb-4">Browser Tool</h2>
+          {loading ? (
+            <p>Loading...</p>
+          ) : (
+            <>
+              <div className="mt-2 mb-2 flex items-center">
+                <Switch
+                  isSelected={settings.headless}
+                  onValueChange={(isSelected) => {
+                    setSettings((prevState) => ({
+                      ...prevState,
+                      headless: isSelected,
+                    }));
+                  }}
+                >
+                  Headless Mode
+                </Switch>
+                <Tooltip
+                  content="Headless Mode runs the browser without a graphical interface."
+                  placement="right"
+                >
+                  <Chip className="ml-2 font-mono cursor-default">i</Chip>
+                </Tooltip>
+              </div>
+              <div className="mt-2 mb-2 flex items-center">
+                <Switch
+                  isSelected={settings.useDefaultSession}
+                  onValueChange={(isSelected) => {
+                    setSettings((prevState) => ({
+                      ...prevState,
+                      useDefaultSession: isSelected,
+                    }));
+                  }}
+                >
+                  Use Default Session
+                </Switch>
+                <Tooltip
+                  content="Use Default Session will use your existing default Google Chrome session. When this setting is enabled, Chrome must be closed before running the browser tool."
+                  placement="right"
+                >
+                  <Chip className="ml-2 font-mono cursor-default">i</Chip>
+                </Tooltip>
+              </div>
+            </>
+          )}
+        </section>
+        <Button
+          className="w-full md:w-auto"
+          onClick={() => {
+            setSaveButtonText('Saving...');
+            saveSettings().then(() => {
+              setSaveButtonText('Saved!');
+              setTimeout(() => {
+                setSaveButtonText('Save Settings');
+              }, 1000);
+            });
+          }}
+          color="primary"
+          variant="flat"
+        >
+          {saveButtonText}
+        </Button>
       </div>
     </div>
   );

electron/config.mjs

@@ -4,6 +4,25 @@ import { join, dirname, parse } from 'path';
 import log from 'electron-log/main.js';
 import util from 'util';
 import { renameSync } from 'fs';
+import os from 'os';
+
+function browserSettingsLocation() {
+  const homeDir = os.homedir();
+  let configDir;
+  if (os.platform() === 'darwin') {
+    configDir =
+      process.env.XDG_CONFIG_HOME ||
+      join(homeDir, 'Library', 'Application Support');
+  } else if (os.platform() === 'win32') {
+    configDir = join(homeDir, 'AppData', 'Local');
+  } else if (os.platform() === 'linux') {
+    configDir = process.env.XDG_CONFIG_HOME || join(homeDir, '.config');
+  } else {
+    throw new Error('Unsupported platform');
+  }
+
+  return join(configDir, 'acorn', 'browsersettings.json');
+}
 
 // App config
 const dev = !app.isPackaged;
@@ -14,6 +33,7 @@ const resourcesDir = dirname(appDir);
 const dataDir = join(app.getPath('userData'), appName);
 const threadsDir = process.env.THREADS_DIR || join(dataDir, 'threads');
 const workspaceDir = process.env.WORKSPACE_DIR || join(dataDir, 'workspace');
+const browserSettingsFile = browserSettingsLocation();
 const port =
   process.env.PORT ||
   (!dev ? await getPort({ portRange: [30000, 40000] }) : 3000);
@@ -92,4 +112,5 @@ export const config = {
   gptscriptBin,
   gatewayUrl,
   knowledgeBin,
+  browserSettingsFile,
 };

electron/main.mjs

@@ -31,6 +31,7 @@ async function startServer() {
   process.env.WORKSPACE_DIR = config.workspaceDir;
   process.env.GPTSCRIPT_GATEWAY_URL = config.gatewayUrl;
   process.env.GPTSCRIPT_OPENAPI_REVAMP = 'true';
+  process.env.GPTSCRIPT_BROWSER_SETTINGS_FILE = config.browserSettingsFile;
 
   console.log(`GPTSCRIPT_BIN=${config.gptscriptBin}`);