Add environment variables configuration to OpenCode instances

- Add environment variables editor in advanced settings - Store environment variables in global preferences - Pass environment variables to OpenCode processes when spawning - Display environment variables in instance information and server logs - Fix system PATH binary handling for 'opencode' command - Show detailed environment variable values in startup logs - Save and restore last used binary across app restarts - Add system PATH binary to recent binaries list when used Features: - Environment variables editor with add/remove functionality - Persistent storage of environment variables across sessions - Real-time display of active environment variables in logs - Instance information shows configured environment variables - Proper handling of system PATH vs custom binary paths - Last used binary persistence and automatic restoration
2025-10-26 10:48:47 +00:00
parent f63a4b3754
commit 0b26ffd97d
8 changed files with 245 additions and 49 deletions
--- a/electron/main/ipc.ts
+++ b/electron/main/ipc.ts
@@ -37,47 +37,54 @@ export function setupInstanceIPC(mainWindow: BrowserWindow) {
    return result.filePaths[0]
  })

-  ipcMain.handle("instance:create", async (event, id: string, folder: string, binaryPath?: string) => {
-    const instance: Instance = {
-      id,
-      folder,
-      port: 0,
-      pid: 0,
-      status: "starting",
-    }
-
-    instances.set(id, instance)
-
-    try {
-      const { pid, port, binaryPath: actualBinaryPath } = await processManager.spawn(folder, id, binaryPath)
-
-      instance.port = port
-      instance.pid = pid
-      instance.status = "ready"
-
-      mainWindow.webContents.send("instance:started", { id, port, pid, binaryPath: actualBinaryPath })
-
-      const meta = processManager.getAllProcesses().get(pid)
-      if (meta) {
-        meta.childProcess.on("exit", (code, signal) => {
-          instance.status = "stopped"
-          mainWindow.webContents.send("instance:stopped", { id })
-        })
+  ipcMain.handle(
+    "instance:create",
+    async (event, id: string, folder: string, binaryPath?: string, environmentVariables?: Record<string, string>) => {
+      const instance: Instance = {
+        id,
+        folder,
+        port: 0,
+        pid: 0,
+        status: "starting",
      }

-      return { id, port, pid, binaryPath: actualBinaryPath }
-    } catch (error) {
-      instance.status = "error"
-      instance.error = error instanceof Error ? error.message : String(error)
+      instances.set(id, instance)

-      mainWindow.webContents.send("instance:error", {
-        id,
-        error: instance.error,
-      })
+      try {
+        const {
+          pid,
+          port,
+          binaryPath: actualBinaryPath,
+        } = await processManager.spawn(folder, id, binaryPath, environmentVariables)

-      throw error
-    }
-  })
+        instance.port = port
+        instance.pid = pid
+        instance.status = "ready"
+
+        mainWindow.webContents.send("instance:started", { id, port, pid, binaryPath: actualBinaryPath })
+
+        const meta = processManager.getAllProcesses().get(pid)
+        if (meta) {
+          meta.childProcess.on("exit", (code, signal) => {
+            instance.status = "stopped"
+            mainWindow.webContents.send("instance:stopped", { id })
+          })
+        }
+
+        return { id, port, pid, binaryPath: actualBinaryPath }
+      } catch (error) {
+        instance.status = "error"
+        instance.error = error instanceof Error ? error.message : String(error)
+
+        mainWindow.webContents.send("instance:error", {
+          id,
+          error: instance.error,
+        })
+
+        throw error
+      }
+    },
+  )

  ipcMain.handle("instance:stop", async (event, pid: number) => {
    await processManager.kill(pid)
--- a/electron/main/process-manager.ts
+++ b/electron/main/process-manager.ts
@@ -50,17 +50,29 @@ class ProcessManager {
    }
  }

-  async spawn(folder: string, instanceId: string, binaryPath?: string): Promise<ProcessInfo> {
+  async spawn(
+    folder: string,
+    instanceId: string,
+    binaryPath?: string,
+    environmentVariables?: Record<string, string>,
+  ): Promise<ProcessInfo> {
    this.validateFolder(folder)
    const actualBinaryPath = binaryPath ? this.validateCustomBinary(binaryPath) : this.validateOpenCodeBinary()

    this.sendLog(instanceId, "info", `Starting OpenCode server for ${folder} using ${actualBinaryPath}...`)

+    // Merge environment variables with process environment
+    const env = { ...process.env }
+    if (environmentVariables) {
+      Object.assign(env, environmentVariables)
+      this.sendLog(instanceId, "info", `Using ${Object.keys(environmentVariables).length} custom environment variables`)
+    }
+
    return new Promise((resolve, reject) => {
      const child = spawn(actualBinaryPath, ["serve", "--port", "0", "--print-logs", "--log-level", "DEBUG"], {
        cwd: folder,
        stdio: ["ignore", "pipe", "pipe"],
-        env: process.env,
+        env,
        shell: false,
      })

--- a/electron/preload/index.ts
+++ b/electron/preload/index.ts
@@ -6,6 +6,7 @@ export interface ElectronAPI {
    id: string,
    folder: string,
    binaryPath?: string,
+    environmentVariables?: Record<string, string>,
  ) => Promise<{ id: string; port: number; pid: number; binaryPath: string }>
  stopInstance: (pid: number) => Promise<void>
  onInstanceStarted: (callback: (data: { id: string; port: number; pid: number; binaryPath: string }) => void) => void
@@ -35,8 +36,8 @@ export interface ElectronAPI {

 const electronAPI: ElectronAPI = {
  selectFolder: () => ipcRenderer.invoke("dialog:selectFolder"),
-  createInstance: (id: string, folder: string, binaryPath?: string) =>
-    ipcRenderer.invoke("instance:create", id, folder, binaryPath),
+  createInstance: (id: string, folder: string, binaryPath?: string, environmentVariables?: Record<string, string>) =>
+    ipcRenderer.invoke("instance:create", id, folder, binaryPath, environmentVariables),
  stopInstance: (pid: number) => ipcRenderer.invoke("instance:stop", pid),
  onInstanceStarted: (callback) => {
    ipcRenderer.on("instance:started", (_, data) => callback(data))
--- a/src/components/environment-variables-editor.tsx
+++ b/src/components/environment-variables-editor.tsx
@@ -0,0 +1,147 @@
+import { Component, createSignal, For, Show } from "solid-js"
+import { Plus, Trash2, Key, Globe } from "lucide-solid"
+import {
+  preferences,
+  addEnvironmentVariable,
+  removeEnvironmentVariable,
+  updateEnvironmentVariables,
+} from "../stores/preferences"
+
+interface EnvironmentVariablesEditorProps {
+  disabled?: boolean
+}
+
+const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (props) => {
+  const [envVars, setEnvVars] = createSignal<Record<string, string>>(preferences().environmentVariables || {})
+  const [newKey, setNewKey] = createSignal("")
+  const [newValue, setNewValue] = createSignal("")
+
+  const entries = () => Object.entries(envVars())
+
+  function handleAddVariable() {
+    const key = newKey().trim()
+    const value = newValue().trim()
+
+    if (!key) return
+
+    addEnvironmentVariable(key, value)
+    setEnvVars({ ...envVars(), [key]: value })
+    setNewKey("")
+    setNewValue("")
+  }
+
+  function handleRemoveVariable(key: string) {
+    removeEnvironmentVariable(key)
+    const { [key]: removed, ...rest } = envVars()
+    setEnvVars(rest)
+  }
+
+  function handleUpdateVariable(key: string, value: string) {
+    const updated = { ...envVars(), [key]: value }
+    setEnvVars(updated)
+    updateEnvironmentVariables(updated)
+  }
+
+  function handleKeyPress(e: KeyboardEvent) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault()
+      handleAddVariable()
+    }
+  }
+
+  return (
+    <div class="space-y-3">
+      <div class="flex items-center gap-2 mb-3">
+        <Globe class="w-4 h-4 text-gray-500 dark:text-gray-400" />
+        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Environment Variables</span>
+        <span class="text-xs text-gray-500 dark:text-gray-400">
+          ({entries().length} variable{entries().length !== 1 ? "s" : ""})
+        </span>
+      </div>
+
+      {/* Existing variables */}
+      <Show when={entries().length > 0}>
+        <div class="space-y-2">
+          <For each={entries()}>
+            {([key, value]) => (
+              <div class="flex items-center gap-2">
+                <div class="flex-1 flex items-center gap-2">
+                  <Key class="w-3.5 h-3.5 text-gray-400 dark:text-gray-500 flex-shrink-0" />
+                  <input
+                    type="text"
+                    value={key}
+                    disabled={props.disabled}
+                    class="flex-1 px-2.5 py-1.5 text-sm bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded text-gray-500 dark:text-gray-400 cursor-not-allowed"
+                    placeholder="Variable name"
+                    title="Variable name (read-only)"
+                  />
+                  <input
+                    type="text"
+                    value={value}
+                    disabled={props.disabled}
+                    onInput={(e) => handleUpdateVariable(key, e.currentTarget.value)}
+                    class="flex-1 px-2.5 py-1.5 text-sm bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+                    placeholder="Variable value"
+                  />
+                </div>
+                <button
+                  onClick={() => handleRemoveVariable(key)}
+                  disabled={props.disabled}
+                  class="p-1.5 text-gray-400 dark:text-gray-500 hover:text-red-600 dark:hover:text-red-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                  title="Remove variable"
+                >
+                  <Trash2 class="w-3.5 h-3.5" />
+                </button>
+              </div>
+            )}
+          </For>
+        </div>
+      </Show>
+
+      {/* Add new variable */}
+      <div class="flex items-center gap-2 pt-2 border-t border-gray-200 dark:border-gray-600">
+        <div class="flex-1 flex items-center gap-2">
+          <Key class="w-3.5 h-3.5 text-gray-400 dark:text-gray-500 flex-shrink-0" />
+          <input
+            type="text"
+            value={newKey()}
+            onInput={(e) => setNewKey(e.currentTarget.value)}
+            onKeyPress={handleKeyPress}
+            disabled={props.disabled}
+            class="flex-1 px-2.5 py-1.5 text-sm bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+            placeholder="Variable name"
+          />
+          <input
+            type="text"
+            value={newValue()}
+            onInput={(e) => setNewValue(e.currentTarget.value)}
+            onKeyPress={handleKeyPress}
+            disabled={props.disabled}
+            class="flex-1 px-2.5 py-1.5 text-sm bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+            placeholder="Variable value"
+          />
+        </div>
+        <button
+          onClick={handleAddVariable}
+          disabled={props.disabled || !newKey().trim()}
+          class="p-1.5 text-gray-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          title="Add variable"
+        >
+          <Plus class="w-3.5 h-3.5" />
+        </button>
+      </div>
+
+      <Show when={entries().length === 0}>
+        <div class="text-xs text-gray-500 dark:text-gray-400 text-center py-2">
+          No environment variables configured. Add variables above to customize the OpenCode environment.
+        </div>
+      </Show>
+
+      <div class="text-xs text-gray-500 dark:text-gray-400 mt-2">
+        These variables will be available in the OpenCode environment when starting instances.
+      </div>
+    </div>
+  )
+}
+
+export default EnvironmentVariablesEditor
--- a/src/components/folder-selection-view.tsx
+++ b/src/components/folder-selection-view.tsx
@@ -2,6 +2,7 @@ import { Component, createSignal, Show, For, onMount, onCleanup } from "solid-js
 import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronDown, ChevronUp } from "lucide-solid"
 import { recentFolders, removeRecentFolder, preferences } from "../stores/preferences"
 import OpenCodeBinarySelector from "./opencode-binary-selector"
+import EnvironmentVariablesEditor from "./environment-variables-editor"

 interface FolderSelectionViewProps {
  onSelectFolder: (folder?: string, binaryPath?: string) => void
@@ -265,13 +266,19 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
              </button>

              <Show when={showAdvanced()}>
-                <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-900/50 overflow-visible">
-                  <div class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">OpenCode Binary</div>
-                  <OpenCodeBinarySelector
-                    selectedBinary={selectedBinary()}
-                    onBinaryChange={setSelectedBinary}
-                    disabled={props.isLoading}
-                  />
+                <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-900/50 overflow-visible space-y-4">
+                  <div>
+                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">OpenCode Binary</div>
+                    <OpenCodeBinarySelector
+                      selectedBinary={selectedBinary()}
+                      onBinaryChange={setSelectedBinary}
+                      disabled={props.isLoading}
+                    />
+                  </div>
+
+                  <div>
+                    <EnvironmentVariablesEditor disabled={props.isLoading} />
+                  </div>
                </div>
              </Show>
            </div>
--- a/src/lib/storage.ts
+++ b/src/lib/storage.ts
@@ -51,6 +51,7 @@ export class FileStorage {
      return {
        preferences: {
          showThinkingBlocks: false,
+          environmentVariables: {},
        },
        recentFolders: [],
        opencodeBinaries: [],
--- a/src/stores/instances.ts
+++ b/src/stores/instances.ts
@@ -3,6 +3,7 @@ import type { Instance, LogEntry } from "../types/instance"
 import { sdkManager } from "../lib/sdk-manager"
 import { sseManager } from "../lib/sse-manager"
 import { fetchSessions, fetchAgents, fetchProviders } from "./sessions"
+import { preferences } from "./preferences"

 const [instances, setInstances] = createSignal<Map<string, Instance>>(new Map())
 const [activeInstanceId, setActiveInstanceId] = createSignal<string | null>(null)
@@ -61,7 +62,7 @@ async function createInstance(folder: string, binaryPath?: string): Promise<stri
      port,
      pid,
      binaryPath: actualBinaryPath,
-    } = await window.electronAPI.createInstance(id, folder, binaryPath)
+    } = await window.electronAPI.createInstance(id, folder, binaryPath, preferences().environmentVariables)

    const client = sdkManager.createClient(port)

--- a/src/stores/preferences.ts
+++ b/src/stores/preferences.ts
@@ -4,6 +4,7 @@ import { storage, type ConfigData } from "../lib/storage"
 export interface Preferences {
  showThinkingBlocks: boolean
  lastUsedBinary?: string
+  environmentVariables?: Record<string, string>
 }

 export interface OpenCodeBinary {
@@ -105,6 +106,22 @@ function updateLastUsedBinary(path: string): void {
  }
 }

+function updateEnvironmentVariables(envVars: Record<string, string>): void {
+  updatePreferences({ environmentVariables: envVars })
+}
+
+function addEnvironmentVariable(key: string, value: string): void {
+  const current = preferences().environmentVariables || {}
+  const updated = { ...current, [key]: value }
+  updateEnvironmentVariables(updated)
+}
+
+function removeEnvironmentVariable(key: string): void {
+  const current = preferences().environmentVariables || {}
+  const { [key]: removed, ...rest } = current
+  updateEnvironmentVariables(rest)
+}
+
 // Load config on mount and listen for changes from other instances
 onMount(() => {
  loadConfig()
@@ -129,4 +146,7 @@ export {
  addOpenCodeBinary,
  removeOpenCodeBinary,
  updateLastUsedBinary,
+  updateEnvironmentVariables,
+  addEnvironmentVariable,
+  removeEnvironmentVariable,
 }