refactor(tui): prototype settings side panel

Co-authored-by: Aiden Cline <63023139+rekram1-node@users.noreply.github.com>

packages/tui/src/app.tsx

@@ -53,6 +53,7 @@ import { DialogModel } from "./component/dialog-model"
 import { useConnected } from "./component/use-connected"
 import { DialogMcp } from "./component/dialog-mcp"
 import { DialogStatus } from "./component/dialog-status"
+import { DialogConfig } from "./component/dialog-config"
 import { DialogDebug } from "./component/dialog-debug"
 import { DialogPair, type DialogPairCredentials } from "./component/dialog-pair"
 import { createOpencodeClient } from "@opencode-ai/sdk/v2/client"
@@ -218,7 +219,9 @@ function fromV1(config: TuiConfigV1.Resolved): Config.Info {
 }
 
 function isConfigInterface(config: Config.Interface | TuiConfigV1.Resolved): config is Config.Interface {
-  return "get" in config && typeof config.get === "function" && "update" in config && typeof config.update === "function"
+  return (
+    "get" in config && typeof config.get === "function" && "update" in config && typeof config.update === "function"
+  )
 }
 
 export const run = Effect.fn("Tui.run")(function* (input: TuiInput) {
@@ -477,7 +480,8 @@ function App(props: {
 }) {
   const log = useLog({ component: "app" })
   const startup = useTuiStartup()
-  const config = useConfig().data
+  const configContext = useConfig()
+  const config = configContext.data
   const route = useRoute()
   const dimensions = useTerminalDimensions()
   const renderer = useRenderer()
@@ -587,10 +591,12 @@ function App(props: {
 
     renderer.clearSelection()
   }
-  const [terminalTitleEnabled, setTerminalTitleEnabled] = createSignal(kv.get("terminal_title_enabled", true))
-  const [pasteSummaryEnabled, setPasteSummaryEnabled] = createSignal(
-    kv.get("paste_summary_enabled", true),
-  )
+  const [terminalTitleEnabled, setTerminalTitleEnabled] = kv.signal("terminal_title_enabled", true)
+  const [pasteSummaryEnabled, setPasteSummaryEnabled] = kv.signal("paste_summary_enabled", true)
+
+  createEffect(() => {
+    renderer.useMouse = !Flag.OPENCODE_DISABLE_MOUSE && config.mouse
+  })
 
   // Update terminal window title based on current route and session
   createEffect(() => {
@@ -849,6 +855,16 @@ function App(props: {
         },
         category: "Integration",
       },
+      {
+        name: "opencode.settings",
+        title: "Open settings",
+        slashName: "settings",
+        enabled: configContext.writable,
+        run: () => {
+          dialog.replace(() => <DialogConfig />)
+        },
+        category: "System",
+      },
       {
         name: "opencode.status",
         title: "View status",

packages/tui/src/component/dialog-config.tsx

@@ -0,0 +1,354 @@
+import { TextAttributes } from "@opentui/core"
+import { useTerminalDimensions } from "@opentui/solid"
+import { createMemo, createSignal, onMount, Show } from "solid-js"
+import { useConfig } from "../config"
+import { useTheme } from "../context/theme"
+import { useDialog } from "../ui/dialog"
+import { DialogSelect } from "../ui/dialog-select"
+import { useToast } from "../ui/toast"
+
+type Setting = {
+  title: string
+  category: string
+  description: string
+  detail?: string
+  path: string[]
+  default: unknown
+  values?: readonly unknown[]
+  labels?: readonly string[]
+  step?: number
+  min?: number
+  max?: number
+  format?: (value: unknown) => string
+}
+
+const settings: Setting[] = [
+  {
+    title: "Theme",
+    category: "Appearance",
+    description: "Interface color theme",
+    detail:
+      "Choose the color theme used throughout OpenCode. Custom themes discovered from your config directory appear here alongside the built-in themes.",
+    path: ["theme", "name"],
+    default: "opencode",
+  },
+  {
+    title: "Color mode",
+    category: "Appearance",
+    description: "Terminal color preference",
+    detail:
+      "Choose how OpenCode selects its colors. System follows your terminal preference, while dark and light keep the interface in a fixed mode.",
+    path: ["theme", "mode"],
+    default: "system",
+    values: ["system", "dark", "light"],
+  },
+  {
+    title: "Animations",
+    category: "Appearance",
+    description: "Interface motion",
+    path: ["animations"],
+    default: true,
+    values: [false, true],
+    labels: ["off", "on"],
+  },
+  {
+    title: "Tips",
+    category: "Appearance",
+    description: "Home screen hints",
+    path: ["hints", "tips"],
+    default: true,
+    values: [false, true],
+    labels: ["off", "on"],
+  },
+  {
+    title: "Onboarding",
+    category: "Appearance",
+    description: "Getting-started guidance",
+    path: ["hints", "onboarding"],
+    default: true,
+    values: [false, true],
+    labels: ["off", "on"],
+  },
+  {
+    title: "Sidebar",
+    category: "Session",
+    description: "Session sidebar visibility",
+    path: ["session", "sidebar"],
+    default: "auto",
+    values: ["hide", "auto"],
+  },
+  {
+    title: "Scrollbar",
+    category: "Session",
+    description: "Transcript scrollbar",
+    path: ["session", "scrollbar"],
+    default: false,
+    values: [false, true],
+    labels: ["off", "on"],
+  },
+  {
+    title: "Thinking",
+    category: "Session",
+    description: "Model reasoning by default",
+    path: ["session", "thinking"],
+    default: "hide",
+    values: ["hide", "show"],
+  },
+  {
+    title: "Grouping",
+    category: "Session",
+    description: "Related transcript items",
+    path: ["session", "grouping"],
+    default: "auto",
+    values: ["none", "auto"],
+  },
+  {
+    title: "Layout",
+    category: "Diffs",
+    description: "Diff presentation",
+    path: ["diffs", "view"],
+    default: "auto",
+    values: ["auto", "split", "unified"],
+  },
+  {
+    title: "Wrapping",
+    category: "Diffs",
+    description: "Long diff lines",
+    path: ["diffs", "wrap"],
+    default: "word",
+    values: ["none", "word"],
+  },
+  {
+    title: "File tree",
+    category: "Diffs",
+    description: "Diff file navigation",
+    path: ["diffs", "tree"],
+    default: true,
+    values: [false, true],
+    labels: ["off", "on"],
+  },
+  {
+    title: "Single patch",
+    category: "Diffs",
+    description: "Only the selected patch",
+    path: ["diffs", "single"],
+    default: false,
+    values: [false, true],
+    labels: ["off", "on"],
+  },
+  {
+    title: "Scroll speed",
+    category: "Input",
+    description: "Distance per input tick",
+    path: ["scroll", "speed"],
+    default: 3,
+    step: 0.25,
+    min: 0.25,
+    max: 10,
+    format: (value) => Number(value).toFixed(2),
+  },
+  {
+    title: "Acceleration",
+    category: "Input",
+    description: "Repeated scrolling",
+    path: ["scroll", "acceleration"],
+    default: false,
+    values: [false, true],
+    labels: ["off", "on"],
+  },
+  {
+    title: "Mouse",
+    category: "Input",
+    description: "Terminal mouse capture",
+    path: ["mouse"],
+    default: true,
+    values: [false, true],
+    labels: ["off", "on"],
+  },
+  {
+    title: "Editor context",
+    category: "Input",
+    description: "Active selection in prompts",
+    path: ["prompt", "editor"],
+    default: true,
+    values: [false, true],
+    labels: ["off", "on"],
+  },
+  {
+    title: "Large pastes",
+    category: "Input",
+    description: "Paste display style",
+    path: ["prompt", "paste"],
+    default: "compact",
+    values: ["compact", "full"],
+  },
+  {
+    title: "Leader timeout",
+    category: "Input",
+    description: "Wait after leader key",
+    path: ["leader", "timeout"],
+    default: 2000,
+    step: 250,
+    min: 250,
+    max: 10000,
+    format: (value) => `${value} ms`,
+  },
+  {
+    title: "Attention",
+    category: "Alerts",
+    description: "Alerts when input is needed",
+    path: ["attention", "enabled"],
+    default: false,
+    values: [false, true],
+    labels: ["off", "on"],
+  },
+  {
+    title: "Notifications",
+    category: "Alerts",
+    description: "System notifications",
+    path: ["attention", "notifications"],
+    default: true,
+    values: [false, true],
+    labels: ["off", "on"],
+  },
+  {
+    title: "Sounds",
+    category: "Alerts",
+    description: "Attention sounds",
+    path: ["attention", "sound"],
+    default: true,
+    values: [false, true],
+    labels: ["off", "on"],
+  },
+  {
+    title: "Volume",
+    category: "Alerts",
+    description: "Attention sound level",
+    path: ["attention", "volume"],
+    default: 0.4,
+    step: 0.1,
+    min: 0,
+    max: 1,
+    format: (value) => `${Math.round(Number(value) * 100)}%`,
+  },
+  {
+    title: "Window title",
+    category: "Terminal",
+    description: "Update terminal title",
+    path: ["terminal", "title"],
+    default: true,
+    values: [false, true],
+    labels: ["off", "on"],
+  },
+]
+
+export function DialogConfig() {
+  const config = useConfig()
+  const dialog = useDialog()
+  const toast = useToast()
+  const themeState = useTheme()
+  const { theme } = themeState
+  const dimensions = useTerminalDimensions()
+  const [selected, setSelected] = createSignal(settings[0])
+  const [saving, setSaving] = createSignal(false)
+  onMount(() => {
+    dialog.setSize("xlarge")
+    dialog.setCentered(true)
+  })
+
+  const value = (setting: Setting) => {
+    const current = setting.path.reduce<unknown>((result, key) => {
+      if (!result || typeof result !== "object") return undefined
+      return (result as Record<string, unknown>)[key]
+    }, config.data)
+    if (setting.path.join(".") === "theme.name") return current ?? themeState.selected
+    return current ?? setting.default
+  }
+  const values = (setting: Setting) =>
+    setting.path.join(".") === "theme.name"
+      ? Object.keys(themeState.all()).sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }))
+      : setting.values
+  const display = (setting: Setting) => {
+    const current = value(setting)
+    if (setting.format) return setting.format(current)
+    const index = setting.values?.indexOf(current)
+    return index === undefined || index < 0 ? String(current) : (setting.labels?.[index] ?? String(current))
+  }
+  const options = createMemo(() =>
+    settings.map((setting) => ({
+      title: setting.title,
+      category: setting.category,
+      value: setting,
+      footer: selected() === setting ? `‹ ${display(setting)} ›` : `  ${display(setting)}  `,
+    })),
+  )
+  const split = createMemo(() => dimensions().width >= 110)
+  const height = createMemo(() => Math.max(8, Math.min(36, dimensions().height - 12)))
+
+  async function change(setting: Setting, direction: number) {
+    if (saving()) return
+    const current = value(setting)
+    const choices = values(setting)
+    const next = choices
+      ? choices[(choices.indexOf(current) + direction + choices.length) % choices.length]
+      : Math.min(setting.max!, Math.max(setting.min!, Number(current) + direction * setting.step!))
+    if (next === current) return
+    setSaving(true)
+    await config
+      .update((draft) => {
+        const parent = setting.path.slice(0, -1).reduce<Record<string, unknown>>((result, key) => {
+          if (!result[key] || typeof result[key] !== "object") result[key] = {}
+          return result[key] as Record<string, unknown>
+        }, draft)
+        parent[setting.path.at(-1)!] = next
+      })
+      .catch(toast.error)
+      .finally(() => setSaving(false))
+  }
+
+  return (
+    <box flexDirection="row" height={height() + 1}>
+      <box width={split() ? "54%" : "100%"}>
+        <DialogSelect
+          title="Settings"
+          options={options()}
+          renderFilter={false}
+          hideClose={split()}
+          maxHeight={height() - 2}
+          onMove={(option) => setSelected(option.value)}
+          onSelect={(option) => void change(option.value, 1)}
+          bindings={[
+            { key: "left", desc: "Previous value", group: "Settings", cmd: () => void change(selected(), -1) },
+            { key: "right", desc: "Next value", group: "Settings", cmd: () => void change(selected(), 1) },
+          ]}
+        />
+      </box>
+      <Show when={split()}>
+        <box
+          position="relative"
+          top={-1}
+          width="46%"
+          height={height() + 2}
+          paddingTop={1}
+          paddingLeft={2}
+          paddingRight={2}
+          backgroundColor={theme.backgroundElement}
+        >
+          <box flexDirection="row" justifyContent="space-between">
+            <text fg={theme.primary} attributes={TextAttributes.BOLD}>
+              {selected().title}
+            </text>
+            <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
+              esc
+            </text>
+          </box>
+          <box paddingTop={1}>
+            <text fg={theme.text} wrapMode="word">
+              {selected().detail ?? selected().description}
+            </text>
+          </box>
+        </box>
+      </Show>
+    </box>
+  )
+}

packages/tui/src/config/index.tsx

@@ -179,6 +179,7 @@ export function resolve(input: Info, options: { terminalSuspend: boolean }): Res
 const ConfigContext = createContext<{
   data: Resolved
   update: Interface["update"]
+  writable: boolean
 }>()
 
 export function ConfigProvider(props: {
@@ -195,7 +196,9 @@ export function ConfigProvider(props: {
     setConfig(reconcile(resolve(info, props.options ?? { terminalSuspend: true })))
     return info
   }
-  return <ConfigContext.Provider value={{ data: config, update }}>{props.children}</ConfigContext.Provider>
+  return (
+    <ConfigContext.Provider value={{ data: config, update, writable: !!host }}>{props.children}</ConfigContext.Provider>
+  )
 }
 
 export function useConfig() {

packages/tui/src/context/theme.tsx

@@ -129,6 +129,15 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       if (theme) setStore("active", theme)
     })
 
+    createEffect(() => {
+      const mode = config.theme?.mode
+      if (mode === "dark" || mode === "light") {
+        pin(mode)
+        return
+      }
+      if (mode === "system" && store.lock !== undefined) free()
+    })
+
     function syncCustomThemes() {
       return themes
         .discover()

packages/tui/src/routes/session/dialog-message.tsx

@@ -6,8 +6,13 @@ import { useToast } from "../../ui/toast"
 import { useSDK } from "../../context/sdk"
 import { errorMessage } from "../../util/error"
 import { DialogFork } from "./dialog-fork"
+import type { PromptInfo } from "../../prompt/history"
 
-export function DialogMessage(props: { messageID: string; sessionID: string }) {
+export function DialogMessage(props: {
+  messageID: string
+  sessionID: string
+  setPrompt?: (prompt: PromptInfo) => void
+}) {
   const data = useData()
   const clipboard = useClipboard()
   const toast = useToast()
@@ -22,9 +27,26 @@ export function DialogMessage(props: { messageID: string; sessionID: string }) {
           title: "Revert",
           value: "session.revert",
           description: "undo messages and file changes",
-          onSelect: async (dialog) => {
-            await sdk.api.session
-              .revert.stage({ sessionID: props.sessionID, messageID: props.messageID })
+          onSelect: (dialog) => {
+            const value = message()
+            if (value?.type === "user") {
+              props.setPrompt?.({
+                text: value.text,
+                files: value.files?.map((file) => ({
+                  uri: file.source.type === "uri" ? file.source.uri : `data:${file.mime};base64,${file.data}`,
+                  name: file.name,
+                  description: file.description,
+                  mention: file.mention ? { ...file.mention } : undefined,
+                })),
+                agents: value.agents?.map((agent) => ({
+                  name: agent.name,
+                  mention: agent.mention ? { ...agent.mention } : undefined,
+                })),
+                pasted: [],
+              })
+            }
+            void sdk.api.session.revert
+              .stage({ sessionID: props.sessionID, messageID: props.messageID })
               .catch((error) => toast.show({ message: errorMessage(error), variant: "error", duration: 5000 }))
             dialog.clear()
           },

packages/tui/src/routes/session/index.tsx

@@ -1468,6 +1468,7 @@ function UserMessage(props: { message: SessionMessageUser }) {
   )
   const dialog = useDialog()
   const renderer = useRenderer()
+  const promptRef = usePromptRef()
 
   return (
     <Show when={props.message.text.trim() || files().length}>
@@ -1486,7 +1487,13 @@ function UserMessage(props: { message: SessionMessageUser }) {
           }}
           onMouseUp={() => {
             if (renderer.getSelection()?.getSelectedText()) return
-            dialog.replace(() => <DialogMessage messageID={props.message.id} sessionID={ctx.sessionID} />)
+            dialog.replace(() => (
+              <DialogMessage
+                messageID={props.message.id}
+                sessionID={ctx.sessionID}
+                setPrompt={(value) => promptRef.current?.set(value)}
+              />
+            ))
           }}
           paddingTop={1}
           paddingBottom={1}

packages/tui/src/ui/dialog-select.tsx

@@ -51,6 +51,8 @@ export interface DialogSelectProps<T> {
   }[]
   bindings?: readonly Binding<Renderable, KeyEvent>[]
   current?: T
+  hideClose?: boolean
+  maxHeight?: number
 }
 
 export interface DialogSelectOption<T = any> {
@@ -212,7 +214,7 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
   })
 
   const dimensions = useTerminalDimensions()
-  const height = createMemo(() => Math.min(rows(), Math.floor(dimensions().height / 2) - 6))
+  const height = createMemo(() => Math.min(rows(), props.maxHeight ?? Math.floor(dimensions().height / 2) - 6))
 
   const selected = createMemo(() => flat()[store.selected])
 
@@ -565,9 +567,11 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
               {props.title}
             </text>
           )}
-          <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
-            esc
-          </text>
+          <Show when={!props.hideClose}>
+            <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
+              esc
+            </text>
+          </Show>
         </box>
         <Show when={props.renderFilter !== false}>
           <box paddingTop={1}>
@@ -789,7 +793,11 @@ function Option(props: {
       </text>
       <Show when={props.footer}>
         <box flexShrink={0}>
-          <text fg={props.active && !props.muted ? fg : theme.textMuted}>{props.footer}</text>
+          {typeof props.footer === "string" ? (
+            <text fg={props.active && !props.muted ? fg : theme.textMuted}>{props.footer}</text>
+          ) : (
+            props.footer
+          )}
         </box>
       </Show>
     </>