stabilize TUI theme persistence and KV writes (#23188)

packages/opencode/src/cli/cmd/tui/context/kv.tsx

@@ -1,7 +1,9 @@
 import { Global } from "@/global"
 import { Filesystem } from "@/util"
+import { Flock } from "@opencode-ai/shared/util/flock"
+import { rename, rm } from "fs/promises"
 import { createSignal, type Setter } from "solid-js"
-import { createStore } from "solid-js/store"
+import { createStore, unwrap } from "solid-js/store"
 import { createSimpleContext } from "./helper"
 import path from "path"
 
@@ -11,12 +13,29 @@ export const { use: useKV, provider: KVProvider } = createSimpleContext({
     const [ready, setReady] = createSignal(false)
     const [store, setStore] = createStore<Record<string, any>>()
     const filePath = path.join(Global.Path.state, "kv.json")
+    const lock = `tui-kv:${filePath}`
+    // Queue same-process writes so rapid updates persist in order.
+    let write = Promise.resolve()
 
-    Filesystem.readJson<Record<string, any>>(filePath)
+    // Write to a temp file first so kv.json is only replaced once the JSON is complete, avoiding partial writes if shutdown interrupts persistence.
+    function writeSnapshot(snapshot: Record<string, any>) {
+      const tempPath = `${filePath}.${process.pid}.${Date.now()}.tmp`
+      return Filesystem.writeJson(tempPath, snapshot)
+        .then(() => rename(tempPath, filePath))
+        .catch(async (error) => {
+          await rm(tempPath, { force: true }).catch(() => undefined)
+          throw error
+        })
+    }
+
+    // Read under the same lock used for writes because kv.json is shared across processes.
+    Flock.withLock(lock, () => Filesystem.readJson<Record<string, any>>(filePath))
       .then((x) => {
         setStore(x)
       })
-      .catch(() => {})
+      .catch((error) => {
+        console.error("Failed to read KV state", { filePath, error })
+      })
       .finally(() => {
         setReady(true)
       })
@@ -44,7 +63,12 @@ export const { use: useKV, provider: KVProvider } = createSimpleContext({
       },
       set(key: string, value: any) {
         setStore(key, value)
-        void Filesystem.writeJson(filePath, store)
+        const snapshot = structuredClone(unwrap(store))
+        write = write
+          .then(() => Flock.withLock(lock, () => writeSnapshot(snapshot)))
+          .catch((error) => {
+            console.error("Failed to write KV state", { filePath, error })
+          })
       },
     }
     return result

packages/opencode/src/cli/cmd/tui/context/theme.tsx

@@ -314,8 +314,11 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     setStore(
       produce((draft) => {
         const lock = pick(kv.get("theme_mode_lock"))
-        const mode = pick(kv.get("theme_mode", props.mode))
-        draft.mode = lock ?? mode ?? props.mode
+        const mode = lock ?? props.mode
+        if (!lock && pick(kv.get("theme_mode")) !== undefined) {
+          kv.set("theme_mode", undefined)
+        }
+        draft.mode = mode
         draft.lock = lock
         const active = config.theme ?? kv.get("theme", "opencode")
         draft.active = typeof active === "string" ? active : "opencode"
@@ -373,7 +376,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     }
 
     function apply(mode: "dark" | "light") {
-      kv.set("theme_mode", mode)
+      if (store.lock !== undefined) kv.set("theme_mode", mode)
       if (store.mode === mode) return
       setStore("mode", mode)
       renderer.clearPaletteCache()
@@ -389,6 +392,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     function free() {
       setStore("lock", undefined)
       kv.set("theme_mode_lock", undefined)
+      kv.set("theme_mode", undefined)
       const mode = renderer.themeMode
       if (mode) apply(mode)
     }
@@ -397,7 +401,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       if (store.lock) return
       apply(mode)
     }
-    // renderer.on(CliRenderEvents.THEME_MODE, handle)
+    renderer.on(CliRenderEvents.THEME_MODE, handle)
 
     const refresh = () => {
       renderer.clearPaletteCache()