Add global config file editor (NeuralNomadsAI#477)

## Summary
- Add an allowlisted server API for editing global config files,
starting with OpenCode global config.
- Add a Config Files settings section using the existing Monaco editor
with save, reload, dirty-state handling, and responsive layout.
- Improve compact settings navigation with a full-width section
selector, settings icon, and close action in the compact toolbar.

## Validation
- npm run typecheck in packages/server
- npm run typecheck in packages/ui
- npm run build in packages/ui

## Notes
- Existing Vite warnings about virtua JSX import source and large chunks
remain unrelated.

Author: shantur

packages/server/src/api-types.ts

@@ -220,6 +220,26 @@ export interface FileSystemFileContentResponse {
   encoding: "utf-8" | "base64"
 }
 
+export interface ConfigFileDescriptor {
+  id: string
+  label: string
+  path: string
+  language: string
+}
+
+export type ConfigFileListResponse = ConfigFileDescriptor[]
+
+export interface ConfigFileContentResponse {
+  id: string
+  path: string
+  contents: string
+  exists: boolean
+}
+
+export interface ConfigFileContentRequest {
+  contents: string
+}
+
 export const WINDOWS_DRIVES_ROOT = "__drives__"
 
 export interface WorkspaceFileResponse {

packages/server/src/server/http-server.ts

@@ -18,6 +18,7 @@ import { EventBus } from "../events/bus"
 import { registerWorkspaceRoutes } from "./routes/workspaces"
 import { registerSettingsRoutes } from "./routes/settings"
 import { registerFilesystemRoutes } from "./routes/filesystem"
+import { registerConfigFileRoutes } from "./routes/config-files"
 import { registerMetaRoutes } from "./routes/meta"
 import { registerEventRoutes } from "./routes/events"
 import { registerStorageRoutes } from "./routes/storage"
@@ -271,6 +272,7 @@ export function createHttpServer(deps: HttpServerDeps) {
   registerWorkspaceRoutes(app, { workspaceManager: deps.workspaceManager })
   registerSettingsRoutes(app, { settings: deps.settings, logger: apiLogger })
   registerFilesystemRoutes(app, { fileSystemBrowser: deps.fileSystemBrowser })
+  registerConfigFileRoutes(app)
   registerMetaRoutes(app, { serverMeta: deps.serverMeta })
   registerEventRoutes(app, {
     eventBus: deps.eventBus,

packages/server/src/server/routes/config-files.test.ts

@@ -0,0 +1,140 @@
+import assert from "node:assert/strict"
+import fs from "node:fs"
+import os from "node:os"
+import path from "node:path"
+import { afterEach, describe, it } from "node:test"
+import Fastify from "fastify"
+
+import { registerConfigFileRoutes } from "./config-files"
+
+const tempDirs = new Set<string>()
+
+afterEach(() => {
+  for (const dir of tempDirs) {
+    fs.rmSync(dir, { recursive: true, force: true })
+  }
+  tempDirs.clear()
+})
+
+describe("config file routes", () => {
+  it("lists only allowlisted config file descriptors", async () => {
+    const tempDir = createTempDir()
+    const app = createApp([
+      createConfigEntry(path.join(tempDir, "opencode", "opencode.json"), "~/.config/opencode/opencode.json"),
+      createConfigEntry(path.join(tempDir, "opencode", "opencode.jsonc"), "~/.config/opencode/opencode.jsonc", {
+        id: "test-config-jsonc",
+        label: "Test Config JSONC",
+        language: "jsonc",
+      }),
+    ])
+
+    const response = await app.inject({ method: "GET", url: "/api/config-files" })
+
+    assert.equal(response.statusCode, 200)
+    assert.deepEqual(response.json(), [
+      {
+        id: "test-config",
+        label: "Test Config",
+        path: "~/.config/opencode/opencode.json",
+        language: "json",
+      },
+      {
+        id: "test-config-jsonc",
+        label: "Test Config JSONC",
+        path: "~/.config/opencode/opencode.jsonc",
+        language: "jsonc",
+      },
+    ])
+    await app.close()
+  })
+
+  it("returns empty content for an allowlisted missing file", async () => {
+    const tempDir = createTempDir()
+    const app = createApp([createConfigEntry(path.join(tempDir, "missing", "config.json"), "display/config.json")])
+
+    const response = await app.inject({ method: "GET", url: "/api/config-files/test-config/content" })
+
+    assert.equal(response.statusCode, 200)
+    assert.deepEqual(response.json(), {
+      id: "test-config",
+      path: "display/config.json",
+      contents: "",
+      exists: false,
+    })
+    await app.close()
+  })
+
+  it("creates parent directories when writing an allowlisted file", async () => {
+    const tempDir = createTempDir()
+    const targetPath = path.join(tempDir, "nested", "opencode.json")
+    const app = createApp([createConfigEntry(targetPath, "display/opencode.json")])
+
+    const response = await app.inject({
+      method: "PUT",
+      url: "/api/config-files/test-config/content",
+      payload: { contents: '{"model":"test"}' },
+    })
+
+    assert.equal(response.statusCode, 204)
+    assert.equal(fs.readFileSync(targetPath, "utf-8"), '{"model":"test"}')
+    await app.close()
+  })
+
+  it("rejects unknown config file ids", async () => {
+    const tempDir = createTempDir()
+    const app = createApp([createConfigEntry(path.join(tempDir, "opencode.json"), "display/opencode.json")])
+
+    const readResponse = await app.inject({ method: "GET", url: "/api/config-files/unknown/content" })
+    const writeResponse = await app.inject({
+      method: "PUT",
+      url: "/api/config-files/unknown/content",
+      payload: { contents: "{}" },
+    })
+
+    assert.equal(readResponse.statusCode, 404)
+    assert.equal(writeResponse.statusCode, 404)
+    await app.close()
+  })
+
+  it("returns a client error when writes fail", async () => {
+    const tempDir = createTempDir()
+    const blockedParent = path.join(tempDir, "not-a-directory")
+    fs.writeFileSync(blockedParent, "occupied")
+    const app = createApp([createConfigEntry(path.join(blockedParent, "opencode.json"), "display/opencode.json")])
+
+    const response = await app.inject({
+      method: "PUT",
+      url: "/api/config-files/test-config/content",
+      payload: { contents: "{}" },
+    })
+
+    assert.equal(response.statusCode, 400)
+    await app.close()
+  })
+})
+
+function createTempDir() {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), "codenomad-config-files-test-"))
+  tempDirs.add(dir)
+  return dir
+}
+
+function createConfigEntry(
+  absolutePath: string,
+  displayPath: string,
+  overrides: Partial<{ id: string; label: string; language: string }> = {},
+) {
+  return {
+    id: overrides.id ?? "test-config",
+    label: overrides.label ?? "Test Config",
+    path: displayPath,
+    absolutePath,
+    language: overrides.language ?? "json",
+  }
+}
+
+function createApp(files: Array<ReturnType<typeof createConfigEntry>>) {
+  const app = Fastify({ logger: false })
+  registerConfigFileRoutes(app, { files })
+  return app
+}

packages/server/src/server/routes/config-files.ts

@@ -0,0 +1,113 @@
+import { FastifyInstance } from "fastify"
+import fs from "fs/promises"
+import os from "os"
+import path from "path"
+import { z } from "zod"
+import type { ConfigFileDescriptor } from "../../api-types"
+
+type ConfigFileEntry = ConfigFileDescriptor & {
+  absolutePath: string
+}
+
+interface ConfigFileRouteOptions {
+  files?: ConfigFileEntry[]
+}
+
+const ConfigFileContentBodySchema = z.object({
+  contents: z.string(),
+})
+
+function resolveOpenCodeGlobalConfigPaths(): ConfigFileEntry[] {
+  if (process.platform === "win32") {
+    const basePath = path.join(os.homedir(), ".config", "opencode")
+    return [
+      {
+        id: "opencode-global-config",
+        label: "OpenCode Global Config",
+        path: "%USERPROFILE%\\.config\\opencode\\opencode.json",
+        absolutePath: path.join(basePath, "opencode.json"),
+        language: "json",
+      },
+      {
+        id: "opencode-global-config-jsonc",
+        label: "OpenCode Global Config (JSONC)",
+        path: "%USERPROFILE%\\.config\\opencode\\opencode.jsonc",
+        absolutePath: path.join(basePath, "opencode.jsonc"),
+        language: "jsonc",
+      },
+    ]
+  }
+
+  return [
+    {
+      id: "opencode-global-config",
+      label: "OpenCode Global Config",
+      path: "~/.config/opencode/opencode.json",
+      absolutePath: path.join(os.homedir(), ".config", "opencode", "opencode.json"),
+      language: "json",
+    },
+    {
+      id: "opencode-global-config-jsonc",
+      label: "OpenCode Global Config (JSONC)",
+      path: "~/.config/opencode/opencode.jsonc",
+      absolutePath: path.join(os.homedir(), ".config", "opencode", "opencode.jsonc"),
+      language: "jsonc",
+    },
+  ]
+}
+
+function defaultConfigFileEntries(): ConfigFileEntry[] {
+  return resolveOpenCodeGlobalConfigPaths()
+}
+
+function listConfigFiles(files: ConfigFileEntry[]): ConfigFileDescriptor[] {
+  return files.map(({ absolutePath: _absolutePath, ...file }) => file)
+}
+
+function getConfigFile(files: ConfigFileEntry[], id: string): ConfigFileEntry | null {
+  return files.find((file) => file.id === id) ?? null
+}
+
+export function registerConfigFileRoutes(app: FastifyInstance, options: ConfigFileRouteOptions = {}) {
+  const configFiles = options.files ?? defaultConfigFileEntries()
+
+  app.get("/api/config-files", async () => listConfigFiles(configFiles))
+
+  app.get<{ Params: { id: string } }>("/api/config-files/:id/content", async (request, reply) => {
+    const file = getConfigFile(configFiles, request.params.id)
+    if (!file) {
+      reply.code(404)
+      return { error: "Config file not found" }
+    }
+
+    try {
+      const contents = await fs.readFile(file.absolutePath, "utf-8")
+      return { id: file.id, path: file.path, contents, exists: true }
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code === "ENOENT") {
+        return { id: file.id, path: file.path, contents: "", exists: false }
+      }
+
+      reply.code(400)
+      return { error: error instanceof Error ? error.message : "Failed to read config file" }
+    }
+  })
+
+  app.put<{ Params: { id: string } }>("/api/config-files/:id/content", async (request, reply) => {
+    const file = getConfigFile(configFiles, request.params.id)
+    if (!file) {
+      reply.code(404)
+      return { error: "Config file not found" }
+    }
+
+    try {
+      const body = ConfigFileContentBodySchema.parse(request.body ?? {})
+      await fs.mkdir(path.dirname(file.absolutePath), { recursive: true })
+      await fs.writeFile(file.absolutePath, body.contents, "utf-8")
+      reply.code(204)
+    } catch (error) {
+      reply.code(400)
+      return { error: error instanceof Error ? error.message : "Failed to save config file" }
+    }
+  })
+}

packages/ui/src/components/file-viewer/monaco-file-viewer.tsx

@@ -10,6 +10,7 @@ interface MonacoFileViewerProps {
   path: string
   content: string
   wordWrap?: "on" | "off"
+  compactGutter?: boolean
   onSave?: (content: string) => void
   onContentChange?: (content: string) => void
 }
@@ -41,6 +42,12 @@ export function MonacoFileViewer(props: MonacoFileViewerProps) {
     props.onSave(editor.getValue())
   }
 
+  const lineNumbersMinChars = (value: string) => {
+    if (!props.compactGutter) return 5
+    const lineCount = value.split(/\r\n|\r|\n/).length
+    return Math.max(3, String(lineCount).length + 1)
+  }
+
   onMount(() => {
     let cancelled = false
     void (async () => {
@@ -55,6 +62,10 @@ export function MonacoFileViewer(props: MonacoFileViewerProps) {
         readOnly: false,
         automaticLayout: true,
         lineNumbers: "on",
+        lineNumbersMinChars: lineNumbersMinChars(props.content),
+        glyphMargin: false,
+        folding: !props.compactGutter,
+        lineDecorationsWidth: props.compactGutter ? 8 : 10,
         minimap: { enabled: false },
         scrollBeyondLastLine: false,
         wordWrap: "off",
@@ -90,6 +101,15 @@ export function MonacoFileViewer(props: MonacoFileViewerProps) {
     editor.updateOptions({ wordWrap: props.wordWrap === "on" ? "on" : "off" })
   })
 
+  createEffect(() => {
+    if (!ready() || !editor) return
+    editor.updateOptions({
+      lineNumbersMinChars: lineNumbersMinChars(props.content),
+      folding: !props.compactGutter,
+      lineDecorationsWidth: props.compactGutter ? 8 : 10,
+    })
+  })
+
   createEffect(() => {
     if (!ready() || !monaco || !editor) return
     const languageId = inferMonacoLanguageId(monaco, props.path)