Introduce ConfigProvider to stabilize preference saves

- move config state into a dedicated context provider that eagerly hydrates disk state before any write
- update App, folder selection, message rendering, and advanced settings to consume the context instead of globals
- wrap the renderer entry in ConfigProvider so every view shares the same initialized config data

src/components/environment-variables-editor.tsx

@@ -1,17 +1,18 @@
 import { Component, createSignal, For, Show } from "solid-js"
 import { Plus, Trash2, Key, Globe } from "lucide-solid"
-import {
-  preferences,
-  addEnvironmentVariable,
-  removeEnvironmentVariable,
-  updateEnvironmentVariables,
-} from "../stores/preferences"
+import { useConfig } from "../stores/preferences"
 
 interface EnvironmentVariablesEditorProps {
   disabled?: boolean
 }
 
 const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (props) => {
+  const {
+    preferences,
+    addEnvironmentVariable,
+    removeEnvironmentVariable,
+    updateEnvironmentVariables,
+  } = useConfig()
   const [envVars, setEnvVars] = createSignal<Record<string, string>>(preferences().environmentVariables || {})
   const [newKey, setNewKey] = createSignal("")
   const [newValue, setNewValue] = createSignal("")

src/components/folder-selection-view.tsx

@@ -1,6 +1,6 @@
 import { Component, createSignal, Show, For, onMount, onCleanup, createEffect } from "solid-js"
 import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight } from "lucide-solid"
-import { recentFolders, removeRecentFolder, preferences, updateLastUsedBinary } from "../stores/preferences"
+import { useConfig } from "../stores/preferences"
 import AdvancedSettingsModal from "./advanced-settings-modal"
 import Kbd from "./kbd"
 
@@ -15,6 +15,7 @@ interface FolderSelectionViewProps {
 }
 
 const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
+  const { recentFolders, removeRecentFolder, preferences, updateLastUsedBinary } = useConfig()
   const [selectedIndex, setSelectedIndex] = createSignal(0)
   const [focusMode, setFocusMode] = createSignal<"recent" | "new" | null>("recent")
   const [selectedBinary, setSelectedBinary] = createSignal(preferences().lastUsedBinary || "opencode")

src/components/message-part.tsx

@@ -3,7 +3,7 @@ import ToolCall from "./tool-call"
 import { isItemExpanded, toggleItemExpanded } from "../stores/tool-call-state"
 import { Markdown } from "./markdown"
 import { useTheme } from "../lib/theme"
-import { preferences } from "../stores/preferences"
+import { useConfig } from "../stores/preferences"
 import { partHasRenderableText, SDKPart, TextPart, ClientPart } from "../types/message"
 
 type ToolCallPart = Extract<ClientPart, { type: "tool" }>
@@ -14,6 +14,7 @@ interface MessagePartProps {
 }
 export default function MessagePart(props: MessagePartProps) {
   const { isDark } = useTheme()
+  const { preferences } = useConfig()
   const partType = () => props.part?.type || ""
   const reasoningId = () => `reasoning-${props.part?.id || ""}`
   const isReasoningExpanded = () => isItemExpanded(reasoningId())

src/components/message-stream.tsx

@@ -30,7 +30,7 @@ import MessageItem from "./message-item"
 import ToolCall from "./tool-call"
 import { sseManager } from "../lib/sse-manager"
 import Kbd from "./kbd"
-import { preferences } from "../stores/preferences"
+import { useConfig } from "../stores/preferences"
 import { getSessionInfo, computeDisplayParts, sessions, setActiveSession, setActiveParentSession } from "../stores/sessions"
 import { setActiveInstanceId } from "../stores/instances"
 
@@ -170,6 +170,7 @@ function getSessionCache(instanceId: string, sessionId: string): SessionCache {
 }
 
 export default function MessageStream(props: MessageStreamProps) {
+  const { preferences } = useConfig()
   let containerRef: HTMLDivElement | undefined
   const [autoScroll, setAutoScroll] = createSignal(true)
   const [showScrollBottomButton, setShowScrollBottomButton] = createSignal(false)

src/components/opencode-binary-selector.tsx

@@ -1,12 +1,6 @@
 import { Component, For, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
 import { FolderOpen, Trash2, Check, AlertCircle, Loader2, Plus } from "lucide-solid"
-import {
-  opencodeBinaries,
-  addOpenCodeBinary,
-  removeOpenCodeBinary,
-  preferences,
-  updatePreferences,
-} from "../stores/preferences"
+import { useConfig } from "../stores/preferences"
 
 interface BinaryOption {
   path: string
@@ -23,6 +17,13 @@ interface OpenCodeBinarySelectorProps {
 }
 
 const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) => {
+  const {
+    opencodeBinaries,
+    addOpenCodeBinary,
+    removeOpenCodeBinary,
+    preferences,
+    updatePreferences,
+  } = useConfig()
   const [customPath, setCustomPath] = createSignal("")
   const [validating, setValidating] = createSignal(false)
   const [validationError, setValidationError] = createSignal<string | null>(null)

src/components/tool-call.tsx

@@ -6,7 +6,8 @@ import { useTheme } from "../lib/theme"
 import { getLanguageFromPath } from "../lib/markdown"
 import { isRenderableDiffText } from "../lib/diff-utils"
 import { getToolRenderCache, setToolRenderCache } from "../lib/tool-render-cache"
-import { preferences, setDiffViewMode, type DiffViewMode } from "../stores/preferences"
+import { useConfig } from "../stores/preferences"
+import type { DiffViewMode } from "../stores/preferences"
 import type { TextPart, SDKPart, ClientPart } from "../types/message"
 
 type ToolCallPart = Extract<ClientPart, { type: "tool" }>
@@ -177,6 +178,7 @@ function extractDiffPayload(toolName: string, state: ToolState): DiffPayload | n
 }
 
 export default function ToolCall(props: ToolCallProps) {
+  const { preferences, setDiffViewMode } = useConfig()
   const { isDark } = useTheme()
   const toolCallId = () => props.toolCallId || props.toolCall?.id || ""
   const expanded = () => isToolCallExpanded(toolCallId())