fix(tui): fetch tool more defensive

README.md

@@ -7,18 +7,17 @@
     </picture>
   </a>
 </p>
+<p align="center">AI coding agent, built for the terminal.</p>
 <p align="center">
   <a href="https://opencode.ai/docs"><img alt="View docs" src="https://img.shields.io/badge/view-docs-blue?style=flat-square" /></a>
   <a href="https://www.npmjs.com/package/opencode-ai"><img alt="npm" src="https://img.shields.io/npm/v/opencode-ai?style=flat-square" /></a>
   <a href="https://github.com/sst/opencode/actions/workflows/publish.yml"><img alt="Build status" src="https://img.shields.io/github/actions/workflow/status/sst/opencode/publish.yml?style=flat-square&branch=dev" /></a>
 </p>
 
----
-
-AI coding agent, built for the terminal.
-
 [![opencode Terminal UI](packages/web/src/assets/themes/opencode.png)](https://opencode.ai)
 
+---
+
 ### Installation
 
 ```bash

bun.lock

@@ -43,6 +43,7 @@
         "yargs": "18.0.0",
         "zod": "catalog:",
         "zod-openapi": "4.2.4",
+        "zod-validation-error": "3.5.2",
       },
       "devDependencies": {
         "@ai-sdk/anthropic": "1.2.12",
@@ -1655,6 +1656,8 @@
 
     "zod-to-ts": ["zod-to-ts@1.2.0", "", { "peerDependencies": { "typescript": "^4.9.4 || ^5.0.2", "zod": "^3" } }, "sha512-x30XE43V+InwGpvTySRNz9kB7qFU8DlyEy7BsSTCHPH1R0QasMmHWZDCzYm6bVXtj/9NNJAZF3jW8rzFvH5OFA=="],
 
+    "zod-validation-error": ["zod-validation-error@3.5.2", "", { "peerDependencies": { "zod": "^3.25.0" } }, "sha512-mdi7YOLtram5dzJ5aDtm1AG9+mxRma1iaMrZdYIpFO7epdKBUwLHIxTF8CPDeCQ828zAXYtizrKlEJAtzgfgrw=="],
+
     "zwitch": ["zwitch@2.0.4", "", {}, "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="],
 
     "@ampproject/remapping/@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.25", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ=="],

opencode.json

@@ -1,5 +1,3 @@
 {
-  "$schema": "https://opencode.ai/config.json",
-  "keybinds": {},
-  "mcp": {}
+  "$schema": "https://opencode.ai/config.json"
 }

packages/opencode/package.json

@@ -42,6 +42,7 @@
     "xdg-basedir": "5.1.0",
     "yargs": "18.0.0",
     "zod": "catalog:",
-    "zod-openapi": "4.2.4"
+    "zod-openapi": "4.2.4",
+    "zod-validation-error": "3.5.2"
   }
 }

packages/opencode/src/cli/error.ts

@@ -0,0 +1,13 @@
+import { Config } from "../config/config"
+
+export function FormatError(input: unknown) {
+  if (Config.JsonError.isInstance(input))
+    return `Config file at ${input.data.path} is not valid JSON`
+  if (Config.InvalidError.isInstance(input))
+    return [
+      `Config file at ${input.data.path} is invalid`,
+      ...(input.data.issues?.map(
+        (issue) => "↳ " + issue.message + " " + issue.path.join("."),
+      ) ?? []),
+    ].join("\n")
+}

packages/opencode/src/config/config.ts

@@ -8,6 +8,7 @@ import { mergeDeep } from "remeda"
 import { Global } from "../global"
 import fs from "fs/promises"
 import { lazy } from "../util/lazy"
+import { NamedError } from "../util/error"
 
 export namespace Config {
   const log = Log.create({ service: "config" })
@@ -15,27 +16,9 @@ export namespace Config {
   export const state = App.state("config", async (app) => {
     let result = await global()
     for (const file of ["opencode.jsonc", "opencode.json"]) {
-      const [resolved] = await Filesystem.findUp(
-        file,
-        app.path.cwd,
-        app.path.root,
-      )
-      if (!resolved) continue
-      try {
-        result = mergeDeep(
-          result,
-          await import(resolved).then((mod) => Info.parse(mod.default)),
-        )
-        log.info("found", { path: resolved })
-        break
-      } catch (e) {
-        if (e instanceof z.ZodError) {
-          for (const issue of e.issues) {
-            log.info(issue.message)
-          }
-          throw e
-        }
-        continue
+      const found = await Filesystem.findUp(file, app.path.cwd, app.path.root)
+      for (const resolved of found.toReversed()) {
+        result = mergeDeep(result, await load(resolved))
       }
     }
     log.info("loaded", result)
@@ -45,9 +28,16 @@ export namespace Config {
   export const McpLocal = z
     .object({
       type: z.literal("local").describe("Type of MCP server connection"),
-      command: z.string().array().describe("Command and arguments to run the MCP server"),
-      environment: z.record(z.string(), z.string()).optional().describe("Environment variables to set when running the MCP server"),
+      command: z
+        .string()
+        .array()
+        .describe("Command and arguments to run the MCP server"),
+      environment: z
+        .record(z.string(), z.string())
+        .optional()
+        .describe("Environment variables to set when running the MCP server"),
     })
+    .strict()
     .openapi({
       ref: "Config.McpLocal",
     })
@@ -57,6 +47,7 @@ export namespace Config {
       type: z.literal("remote").describe("Type of MCP server connection"),
       url: z.string().describe("URL of the remote MCP server"),
     })
+    .strict()
     .openapi({
       ref: "Config.McpRemote",
     })
@@ -66,41 +57,84 @@ export namespace Config {
 
   export const Keybinds = z
     .object({
-      leader: z.string().optional().describe("Leader key for keybind combinations"),
+      leader: z
+        .string()
+        .optional()
+        .describe("Leader key for keybind combinations"),
       help: z.string().optional().describe("Show help dialog"),
       editor_open: z.string().optional().describe("Open external editor"),
       session_new: z.string().optional().describe("Create a new session"),
       session_list: z.string().optional().describe("List all sessions"),
       session_share: z.string().optional().describe("Share current session"),
-      session_interrupt: z.string().optional().describe("Interrupt current session"),
-      session_compact: z.string().optional().describe("Toggle compact mode for session"),
+      session_interrupt: z
+        .string()
+        .optional()
+        .describe("Interrupt current session"),
+      session_compact: z
+        .string()
+        .optional()
+        .describe("Toggle compact mode for session"),
       tool_details: z.string().optional().describe("Show tool details"),
       model_list: z.string().optional().describe("List available models"),
       theme_list: z.string().optional().describe("List available themes"),
-      project_init: z.string().optional().describe("Initialize project configuration"),
+      project_init: z
+        .string()
+        .optional()
+        .describe("Initialize project configuration"),
       input_clear: z.string().optional().describe("Clear input field"),
       input_paste: z.string().optional().describe("Paste from clipboard"),
       input_submit: z.string().optional().describe("Submit input"),
       input_newline: z.string().optional().describe("Insert newline in input"),
-      history_previous: z.string().optional().describe("Navigate to previous history item"),
-      history_next: z.string().optional().describe("Navigate to next history item"),
-      messages_page_up: z.string().optional().describe("Scroll messages up by one page"),
-      messages_page_down: z.string().optional().describe("Scroll messages down by one page"),
-      messages_half_page_up: z.string().optional().describe("Scroll messages up by half page"),
-      messages_half_page_down: z.string().optional().describe("Scroll messages down by half page"),
-      messages_previous: z.string().optional().describe("Navigate to previous message"),
+      history_previous: z
+        .string()
+        .optional()
+        .describe("Navigate to previous history item"),
+      history_next: z
+        .string()
+        .optional()
+        .describe("Navigate to next history item"),
+      messages_page_up: z
+        .string()
+        .optional()
+        .describe("Scroll messages up by one page"),
+      messages_page_down: z
+        .string()
+        .optional()
+        .describe("Scroll messages down by one page"),
+      messages_half_page_up: z
+        .string()
+        .optional()
+        .describe("Scroll messages up by half page"),
+      messages_half_page_down: z
+        .string()
+        .optional()
+        .describe("Scroll messages down by half page"),
+      messages_previous: z
+        .string()
+        .optional()
+        .describe("Navigate to previous message"),
       messages_next: z.string().optional().describe("Navigate to next message"),
-      messages_first: z.string().optional().describe("Navigate to first message"),
+      messages_first: z
+        .string()
+        .optional()
+        .describe("Navigate to first message"),
       messages_last: z.string().optional().describe("Navigate to last message"),
       app_exit: z.string().optional().describe("Exit the application"),
     })
+    .strict()
     .openapi({
       ref: "Config.Keybinds",
     })
   export const Info = z
     .object({
-      $schema: z.string().optional().describe("JSON schema reference for configuration validation"),
-      theme: z.string().optional().describe("Theme name to use for the interface"),
+      $schema: z
+        .string()
+        .optional()
+        .describe("JSON schema reference for configuration validation"),
+      theme: z
+        .string()
+        .optional()
+        .describe("Theme name to use for the interface"),
       keybinds: Keybinds.optional().describe("Custom keybind configurations"),
       autoshare: z
         .boolean()
@@ -129,8 +163,12 @@ export namespace Config {
         )
         .optional()
         .describe("Custom provider configurations and model overrides"),
-      mcp: z.record(z.string(), Mcp).optional().describe("MCP (Model Context Protocol) server configurations"),
+      mcp: z
+        .record(z.string(), Mcp)
+        .optional()
+        .describe("MCP (Model Context Protocol) server configurations"),
     })
+    .strict()
     .openapi({
       ref: "Config.Info",
     })
@@ -138,10 +176,7 @@ export namespace Config {
   export type Info = z.output<typeof Info>
 
   export const global = lazy(async () => {
-    let result = await Bun.file(path.join(Global.Path.config, "config.json"))
-      .json()
-      .then((mod) => Info.parse(mod))
-      .catch(() => ({}) as Info)
+    let result = await load(path.join(Global.Path.config, "config.json"))
 
     await import(path.join(Global.Path.config, "config"), {
       with: {
@@ -160,9 +195,38 @@ export namespace Config {
         await fs.unlink(path.join(Global.Path.config, "config"))
       })
       .catch(() => {})
-    return Info.parse(result)
+
+    return result
   })
 
+  async function load(path: string) {
+    const data = await Bun.file(path)
+      .json()
+      .catch((err) => {
+        if (err.code === "ENOENT") return {}
+        throw new JsonError({ path }, { cause: err })
+      })
+
+    const parsed = Info.safeParse(data)
+    if (parsed.success) return parsed.data
+    throw new InvalidError({ path, issues: parsed.error.issues })
+  }
+
+  export const JsonError = NamedError.create(
+    "ConfigJsonError",
+    z.object({
+      path: z.string(),
+    }),
+  )
+
+  export const InvalidError = NamedError.create(
+    "ConfigInvalidError",
+    z.object({
+      path: z.string(),
+      issues: z.custom<z.ZodIssue[]>().optional(),
+    }),
+  )
+
   export function get() {
     return state()
   }

packages/opencode/src/index.ts

@@ -18,6 +18,8 @@ import { UI } from "./cli/ui"
 import { Installation } from "./installation"
 import { Bus } from "./bus"
 import { Config } from "./config/config"
+import { NamedError } from "./util/error"
+import { FormatError } from "./cli/error"
 
 const cli = yargs(hideBin(process.argv))
   .scriptName("opencode")
@@ -84,21 +86,21 @@ const cli = yargs(hideBin(process.argv))
             },
           })
 
-            ; (async () => {
-              if (Installation.VERSION === "dev") return
-              if (Installation.isSnapshot()) return
-              const config = await Config.global()
-              if (config.autoupdate === false) return
-              const latest = await Installation.latest()
-              if (Installation.VERSION === latest) return
-              const method = await Installation.method()
-              if (method === "unknown") return
-              await Installation.upgrade(method, latest)
-                .then(() => {
-                  Bus.publish(Installation.Event.Updated, { version: latest })
-                })
-                .catch(() => { })
-            })()
+          ;(async () => {
+            if (Installation.VERSION === "dev") return
+            if (Installation.isSnapshot()) return
+            const config = await Config.global()
+            if (config.autoupdate === false) return
+            const latest = await Installation.latest()
+            if (Installation.VERSION === latest) return
+            const method = await Installation.method()
+            if (method === "unknown") return
+            await Installation.upgrade(method, latest)
+              .then(() => {
+                Bus.publish(Installation.Event.Updated, { version: latest })
+              })
+              .catch(() => {})
+          })()
 
           await proc.exited
           server.stop()
@@ -133,7 +135,25 @@ const cli = yargs(hideBin(process.argv))
 try {
   await cli.parse()
 } catch (e) {
-  Log.Default.error(e, {
-    stack: e instanceof Error ? e.stack : undefined,
-  })
+  const data: Record<string, any> = {}
+  if (e instanceof NamedError) {
+    const obj = e.toObject()
+    Object.assign(data, {
+      ...obj.data,
+    })
+  }
+  if (e instanceof Error) {
+    Object.assign(data, {
+      name: e.name,
+      message: e.message,
+      cause: e.cause?.toString(),
+    })
+  }
+  Log.Default.error("fatal", data)
+  const formatted = FormatError(e)
+  if (formatted) UI.error(formatted)
+  if (!formatted)
+    UI.error(
+      "Unexpected error, check log file at " + Log.file() + " for more details",
+    )
 }

packages/opencode/src/provider/provider.ts

@@ -181,7 +181,11 @@ export namespace Provider {
       mergeProvider(providerID, provider.options ?? {}, "config")
     }
 
-    for (const providerID of Object.keys(providers)) {
+    for (const [providerID, provider] of Object.entries(providers)) {
+      if (Object.keys(provider.info.models).length === 0) {
+        delete providers[providerID]
+        continue
+      }
       log.info("found", { providerID })
     }
 
@@ -322,6 +326,10 @@ export namespace Provider {
       ...t,
       parameters: optionalToNullable(t.parameters),
     })),
+    azure: TOOLS.map((t) => ({
+      ...t,
+      parameters: optionalToNullable(t.parameters),
+    })),
     google: TOOLS,
   }
 

packages/opencode/src/session/system.ts

@@ -25,7 +25,7 @@ export namespace SystemPrompt {
   export async function environment() {
     const app = App.info()
 
-    const tree = async () => {
+    ;async () => {
       const files = await Ripgrep.files({
         cwd: app.path.cwd,
       })

packages/opencode/src/util/error.ts

@@ -1,7 +1,7 @@
 import { z, type ZodSchema } from "zod"
-import { Log } from "./log"
+// import { Log } from "./log"
 
-const log = Log.create()
+// const log = Log.create()
 
 export abstract class NamedError extends Error {
   abstract schema(): ZodSchema
@@ -30,10 +30,6 @@ export abstract class NamedError extends Error {
       ) {
         super(name, options)
         this.name = name
-        log.error(name, {
-          ...this.data,
-          cause: options?.cause?.toString(),
-        })
       }
 
       static isInstance(input: any): input is InstanceType<typeof result> {

packages/opencode/src/util/log.ts

@@ -68,13 +68,13 @@ export namespace Log {
     }
     const result = {
       info(message?: any, extra?: Record<string, any>) {
-        process.stderr.write(build(message, extra))
+        process.stderr.write("INFO  " + build(message, extra))
       },
       error(message?: any, extra?: Record<string, any>) {
-        process.stderr.write(build(message, extra))
+        process.stderr.write("ERROR " + build(message, extra))
       },
       warn(message?: any, extra?: Record<string, any>) {
-        process.stderr.write(build(message, extra))
+        process.stderr.write("WARN  " + build(message, extra))
       },
       tag(key: string, value: string) {
         if (tags) tags[key] = value

packages/tui/internal/completions/commands.go

@@ -35,8 +35,7 @@ func (c *CommandCompletionProvider) GetEmptyMessage() string {
 	return "no matching commands"
 }
 
-func getCommandCompletionItem(cmd commands.Command, space int) dialog.CompletionItemI {
-	t := theme.CurrentTheme()
+func getCommandCompletionItem(cmd commands.Command, space int, t theme.Theme) dialog.CompletionItemI {
 	spacer := strings.Repeat(" ", space)
 	title := "  /" + cmd.Trigger + lipgloss.NewStyle().Foreground(t.TextMuted()).Render(spacer+cmd.Description)
 	value := string(cmd.Name)
@@ -47,6 +46,9 @@ func getCommandCompletionItem(cmd commands.Command, space int) dialog.Completion
 }
 
 func (c *CommandCompletionProvider) GetChildEntries(query string) ([]dialog.CompletionItemI, error) {
+	t := theme.CurrentTheme()
+	commands := c.app.Commands
+
 	space := 1
 	for _, cmd := range c.app.Commands {
 		if lipgloss.Width(cmd.Trigger) > space {
@@ -55,15 +57,16 @@ func (c *CommandCompletionProvider) GetChildEntries(query string) ([]dialog.Comp
 	}
 	space += 2
 
+	sorted := commands.Sorted()
 	if query == "" {
 		// If no query, return all commands
 		items := []dialog.CompletionItemI{}
-		for _, cmd := range c.app.Commands {
+		for _, cmd := range sorted {
 			if cmd.Trigger == "" {
 				continue
 			}
 			space := space - lipgloss.Width(cmd.Trigger)
-			items = append(items, getCommandCompletionItem(cmd, space))
+			items = append(items, getCommandCompletionItem(cmd, space, t))
 		}
 		return items, nil
 	}
@@ -72,13 +75,13 @@ func (c *CommandCompletionProvider) GetChildEntries(query string) ([]dialog.Comp
 	var commandNames []string
 	commandMap := make(map[string]dialog.CompletionItemI)
 
-	for _, cmd := range c.app.Commands {
+	for _, cmd := range sorted {
 		if cmd.Trigger == "" {
 			continue
 		}
 		space := space - lipgloss.Width(cmd.Trigger)
 		commandNames = append(commandNames, cmd.Trigger)
-		commandMap[cmd.Trigger] = getCommandCompletionItem(cmd, space)
+		commandMap[cmd.Trigger] = getCommandCompletionItem(cmd, space, t)
 	}
 
 	// Find fuzzy matches

packages/tui/internal/components/chat/editor.go

@@ -214,8 +214,7 @@ func (m *editorComponent) Paste() (tea.Model, tea.Cmd) {
 }
 
 func (m *editorComponent) Newline() (tea.Model, tea.Cmd) {
-	value := m.textarea.Value()
-	m.textarea.SetValue(value + "\n")
+	m.textarea.Newline()
 	return m, nil
 }
 

packages/tui/internal/components/chat/message.go

@@ -417,12 +417,14 @@ func renderToolInvocation(
 		toolArgs = renderArgs(&toolArgsMap, "url")
 		title = fmt.Sprintf("FETCH %s", toolArgs)
 		if format, ok := toolArgsMap["format"].(string); ok {
-			body = *result
-			body = truncateHeight(body, 10)
-			if format == "html" || format == "markdown" {
-				body = toMarkdown(body, innerWidth, t.BackgroundSubtle())
+			if result != nil {
+				body = *result
+				body = truncateHeight(body, 10)
+				if format == "html" || format == "markdown" {
+					body = toMarkdown(body, innerWidth, t.BackgroundSubtle())
+				}
+				body = renderContentBlock(body, WithFullWidth(), WithMarginBottom(1))
 			}
-			body = renderContentBlock(body, WithFullWidth(), WithMarginBottom(1))
 		}
 	case "todowrite":
 		title = fmt.Sprintf("PLAN")
@@ -604,7 +606,7 @@ func renderToolAction(name string) string {
 	case "edit":
 		return "Preparing edit..."
 	case "webfetch":
-		return "Writing fetch..."
+		return "Fetching from the web..."
 	case "glob":
 		return "Finding files..."
 	case "grep":

packages/tui/internal/components/dialog/complete.go

@@ -173,7 +173,6 @@ func (c *completionDialogComponent) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 			}
 			cmds = append(cmds, cmd)
 			cmds = append(cmds, c.pseudoSearchTextArea.Focus())
-			// c.pseudoSearchTextArea.SetValue(msg.String())
 			return c, tea.Batch(cmds...)
 		}
 	case tea.WindowSizeMsg:
@@ -218,12 +217,12 @@ func (c *completionDialogComponent) SetProvider(provider CompletionProvider) {
 	if c.completionProvider.GetId() != provider.GetId() {
 		c.completionProvider = provider
 		c.list.SetEmptyMessage(" " + provider.GetEmptyMessage())
+		c.list.SetItems([]CompletionItemI{})
 	}
 }
 
 func (c *completionDialogComponent) complete(item CompletionItemI) tea.Cmd {
 	value := c.pseudoSearchTextArea.Value()
-
 	if value == "" {
 		return nil
 	}
@@ -242,10 +241,8 @@ func (c *completionDialogComponent) complete(item CompletionItemI) tea.Cmd {
 }
 
 func (c *completionDialogComponent) close() tea.Cmd {
-	c.list.SetItems([]CompletionItemI{})
 	c.pseudoSearchTextArea.Reset()
 	c.pseudoSearchTextArea.Blur()
-
 	return util.CmdHandler(CompletionDialogCloseMsg{})
 }
 

packages/tui/internal/components/textarea/textarea.go

@@ -553,6 +553,14 @@ func (m Model) Line() int {
 	return m.row
 }
 
+func (m *Model) Newline() {
+	if m.MaxHeight > 0 && len(m.value) >= m.MaxHeight {
+		return
+	}
+	m.col = clamp(m.col, 0, len(m.value[m.row]))
+	m.splitLine(m.row, m.col)
+}
+
 // CursorDown moves the cursor down by one line.
 // Returns whether or not the cursor blink should be reset.
 func (m *Model) CursorDown() {
@@ -1113,11 +1121,7 @@ func (m Model) Update(msg tea.Msg) (Model, tea.Cmd) {
 			}
 			m.deleteWordRight()
 		case key.Matches(msg, m.KeyMap.InsertNewline):
-			if m.MaxHeight > 0 && len(m.value) >= m.MaxHeight {
-				return m, nil
-			}
-			m.col = clamp(m.col, 0, len(m.value[m.row]))
-			m.splitLine(m.row, m.col)
+			m.Newline()
 		case key.Matches(msg, m.KeyMap.LineEnd):
 			m.CursorEnd()
 		case key.Matches(msg, m.KeyMap.LineStart):
@@ -1161,8 +1165,6 @@ func (m Model) Update(msg tea.Msg) (Model, tea.Cmd) {
 	}
 
 	var cmd tea.Cmd
-	cmds = append(cmds, cmd)
-
 	newRow, newCol := m.cursorLineNumber(), m.col
 	m.virtualCursor, cmd = m.virtualCursor.Update(msg)
 	if (newRow != oldRow || newCol != oldCol) && m.virtualCursor.Mode() == cursor.CursorBlink {
@@ -1171,7 +1173,6 @@ func (m Model) Update(msg tea.Msg) (Model, tea.Cmd) {
 	}
 	cmds = append(cmds, cmd)
 
-	m.SetHeight(m.ContentHeight())
 	return m, tea.Batch(cmds...)
 }
 

packages/tui/internal/tui/tui.go

@@ -44,7 +44,11 @@ type appModel struct {
 
 func (a appModel) Init() tea.Cmd {
 	var cmds []tea.Cmd
-	cmds = append(cmds, tea.RequestBackgroundColor)
+	// https://github.com/charmbracelet/bubbletea/issues/1440
+	// https://github.com/sst/opencode/issues/127
+	if !util.IsWsl() {
+		cmds = append(cmds, tea.RequestBackgroundColor)
+	}
 	cmds = append(cmds, a.app.InitializeProvider())
 	cmds = append(cmds, a.editor.Init())
 	cmds = append(cmds, a.messages.Init())
@@ -66,9 +70,11 @@ func (a appModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 
 	switch msg := msg.(type) {
 	case tea.KeyPressMsg:
+		keyString := msg.String()
+
 		// 1. Handle active modal
 		if a.modal != nil {
-			switch msg.String() {
+			switch keyString {
 			// Escape always closes current modal
 			case "esc", "ctrl+c":
 				a.modal = nil
@@ -84,7 +90,6 @@ func (a appModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		// 2. Check for commands that require leader
 		if a.isLeaderSequence {
 			matches := a.app.Commands.Matches(msg, a.isLeaderSequence)
-			// Reset leader state
 			a.isLeaderSequence = false
 			if len(matches) > 0 {
 				return a, util.CmdHandler(commands.ExecuteCommandsMsg(matches))
@@ -92,48 +97,49 @@ func (a appModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		}
 
 		// 3. Handle completions trigger
-		switch msg.String() {
-		case "/":
-			if !a.showCompletionDialog {
-				a.showCompletionDialog = true
+		if keyString == "/" && !a.showCompletionDialog {
+			a.showCompletionDialog = true
 
-				initialValue := "/"
-				currentInput := a.editor.Value()
-				// if the input doesn't end with a space,
-				// then we want to include the last word
-				if !strings.HasSuffix(currentInput, " ") {
-					words := strings.Split(a.editor.Value(), " ")
-					if len(words) > 0 {
-						lastWord := words[len(words)-1]
-						lastWord = strings.TrimSpace(lastWord)
-						initialValue = lastWord + "/"
-					}
+			initialValue := "/"
+			currentInput := a.editor.Value()
+
+			// if the input doesn't end with a space,
+			// then we want to include the last word
+			// (ie, `packages/`)
+			if !strings.HasSuffix(currentInput, " ") {
+				words := strings.Split(a.editor.Value(), " ")
+				if len(words) > 0 {
+					lastWord := words[len(words)-1]
+					lastWord = strings.TrimSpace(lastWord)
+					initialValue = lastWord + "/"
 				}
-				updated, cmd := a.completions.Update(
-					app.CompletionDialogTriggerdMsg{
-						InitialValue: initialValue,
-					},
-				)
-				a.completions = updated.(dialog.CompletionDialog)
-				cmds = append(cmds, cmd)
-
-				updated, cmd = a.completions.Update(msg)
-				a.completions = updated.(dialog.CompletionDialog)
-				cmds = append(cmds, cmd)
-
-				updated, cmd = a.editor.Update(msg)
-				a.editor = updated.(chat.EditorComponent)
-				cmds = append(cmds, cmd)
-				return a, tea.Sequence(cmds...)
 			}
+
+			updated, cmd := a.completions.Update(
+				app.CompletionDialogTriggerdMsg{
+					InitialValue: initialValue,
+				},
+			)
+			a.completions = updated.(dialog.CompletionDialog)
+			cmds = append(cmds, cmd)
+
+			updated, cmd = a.editor.Update(msg)
+			a.editor = updated.(chat.EditorComponent)
+			cmds = append(cmds, cmd)
+
+			updated, cmd = a.updateCompletions(msg)
+			a.completions = updated.(dialog.CompletionDialog)
+			cmds = append(cmds, cmd)
+
+			return a, tea.Sequence(cmds...)
 		}
 
 		if a.showCompletionDialog {
-			switch msg.String() {
+			switch keyString {
 			case "tab", "enter", "esc", "ctrl+c":
-				context, contextCmd := a.completions.Update(msg)
-				a.completions = context.(dialog.CompletionDialog)
-				cmds = append(cmds, contextCmd)
+				updated, cmd := a.updateCompletions(msg)
+				a.completions = updated.(dialog.CompletionDialog)
+				cmds = append(cmds, cmd)
 				return a, tea.Batch(cmds...)
 			}
 
@@ -141,13 +147,10 @@ func (a appModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 			a.editor = updated.(chat.EditorComponent)
 			cmds = append(cmds, cmd)
 
-			currentInput := a.editor.Value()
-			provider := a.completionManager.GetProvider(currentInput)
-			a.completions.SetProvider(provider)
+			updated, cmd = a.updateCompletions(msg)
+			a.completions = updated.(dialog.CompletionDialog)
+			cmds = append(cmds, cmd)
 
-			context, contextCmd := a.completions.Update(msg)
-			a.completions = context.(dialog.CompletionDialog)
-			cmds = append(cmds, contextCmd)
 			return a, tea.Batch(cmds...)
 		}
 
@@ -173,10 +176,8 @@ func (a appModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 			return a, util.CmdHandler(commands.ExecuteCommandsMsg(matches))
 		}
 
-		// 7. Fallback to editor. This shouldn't happen?
-		// All printable characters were already sent, and
-		// any other keypress that didn't match a command
-		// is likely a noop.
+		// 7. Fallback to editor. This is for other characters
+		// likek backspace, tab, etc.
 		updatedEditor, cmd := a.editor.Update(msg)
 		a.editor = updatedEditor.(chat.EditorComponent)
 		return a, cmd
@@ -211,7 +212,6 @@ func (a appModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		cmds = append(cmds, cmd)
 	case dialog.CompletionDialogCloseMsg:
 		a.showCompletionDialog = false
-		a.completions.SetProvider(a.completionManager.DefaultProvider())
 	case client.EventInstallationUpdated:
 		return a, toast.NewSuccessToast(
 			"opencode updated to "+msg.Properties.Version+", restart to apply.",
@@ -507,30 +507,18 @@ func (a appModel) executeCommand(command commands.Command) (tea.Model, tea.Cmd)
 		a.messages = updated.(chat.MessagesComponent)
 		cmds = append(cmds, cmd)
 	case commands.MessagesPageUpCommand:
-		if a.showCompletionDialog {
-			return a, nil
-		}
 		updated, cmd := a.messages.PageUp()
 		a.messages = updated.(chat.MessagesComponent)
 		cmds = append(cmds, cmd)
 	case commands.MessagesPageDownCommand:
-		if a.showCompletionDialog {
-			return a, nil
-		}
 		updated, cmd := a.messages.PageDown()
 		a.messages = updated.(chat.MessagesComponent)
 		cmds = append(cmds, cmd)
 	case commands.MessagesHalfPageUpCommand:
-		if a.showCompletionDialog {
-			return a, nil
-		}
 		updated, cmd := a.messages.HalfPageUp()
 		a.messages = updated.(chat.MessagesComponent)
 		cmds = append(cmds, cmd)
 	case commands.MessagesHalfPageDownCommand:
-		if a.showCompletionDialog {
-			return a, nil
-		}
 		updated, cmd := a.messages.HalfPageDown()
 		a.messages = updated.(chat.MessagesComponent)
 		cmds = append(cmds, cmd)
@@ -540,6 +528,15 @@ func (a appModel) executeCommand(command commands.Command) (tea.Model, tea.Cmd)
 	return a, tea.Batch(cmds...)
 }
 
+func (a appModel) updateCompletions(msg tea.Msg) (tea.Model, tea.Cmd) {
+	currentInput := a.editor.Value()
+	if currentInput != "" {
+		provider := a.completionManager.GetProvider(currentInput)
+		a.completions.SetProvider(provider)
+	}
+	return a.completions.Update(msg)
+}
+
 func NewModel(app *app.App) tea.Model {
 	completionManager := completions.NewCompletionManager(app)
 	initialProvider := completionManager.DefaultProvider()

packages/tui/internal/util/util.go

@@ -1,6 +1,9 @@
 package util
 
 import (
+	"os"
+	"strings"
+
 	tea "github.com/charmbracelet/bubbletea/v2"
 )
 
@@ -17,3 +20,18 @@ func Clamp(v, low, high int) int {
 	}
 	return min(high, max(low, v))
 }
+
+func IsWsl() bool {
+	// Check for WSL environment variables
+	if os.Getenv("WSL_DISTRO_NAME") != "" {
+		return true
+	}
+
+	// Check /proc/version for WSL signature
+	if data, err := os.ReadFile("/proc/version"); err == nil {
+		version := strings.ToLower(string(data))
+		return strings.Contains(version, "microsoft") || strings.Contains(version, "wsl")
+	}
+
+	return false
+}

packages/web/src/components/Lander.astro

@@ -5,6 +5,7 @@ import type { Props } from '@astrojs/starlight/props';
 
 import CopyIcon from "../assets/lander/copy.svg";
 import CheckIcon from "../assets/lander/check.svg";
+import Screenshot from "../assets/themes/tokyonight.png";
 
 const { data } = Astro.locals.starlightRoute.entry;
 const { title = data.title, tagline, image, actions = [] } = data.hero || {};
@@ -77,6 +78,13 @@ if (image) {
       </ul>
     </section>
 
+    <section class="images">
+      <div>
+        <p>opencode TUI with the tokyonight theme</p>
+        <Image width={600} src={Screenshot} alt="opencode TUI with the tokyonight theme" />
+      </div>
+    </section>
+
     <section class="footer">
       <div class="col1">
         <span>Version: Beta</span>
@@ -128,24 +136,39 @@ section.cta {
   justify-content: space-between;
   border-top: 2px solid var(--sl-color-border);
 
+  @media (max-width: 40rem) {
+    flex-direction: column;
+  }
+
   & > div {
     flex: 1;
     line-height: 1.4;
     padding: calc(var(--padding) / 2) 0.5rem;
+
+    @media (max-width: 40rem) {
+      padding-bottom: calc(var(--padding) / 2 + 4px);
+    }
+
+    a {
+      font-size: 1rem;
+    }
+  }
+  & > div.col2 {
+    @media (max-width: 50rem) {
+      flex: 0 0 auto;
+    }
   }
   & > div:not(.col2) {
     text-align: center;
     text-transform: uppercase;
   }
 
-  @media (max-width: 30rem) {
-    & > div {
-      padding-bottom: calc(var(--padding) / 2 + 4px);
-    }
-  }
-
   & > div + div {
     border-left: 2px solid var(--sl-color-border);
+    @media (max-width: 40rem) {
+      border-left: none;
+      border-top: 2px solid var(--sl-color-border);
+    }
   }
 
   .command {
@@ -211,6 +234,61 @@ section.content {
   }
 }
 
+section.images {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: space-between;
+  border-top: 2px solid var(--sl-color-border);
+
+  & > div {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--padding) / 4);
+    padding: calc(var(--padding) / 2);
+    border-width: 0;
+    border-style: solid;
+    border-color: var(--sl-color-border);
+
+    & > div, p {
+      flex: 1;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  p {
+    letter-spacing: -0.03125rem;
+    text-transform: uppercase;
+    color: var(--sl-color-text-dimmed);
+
+    @media (max-width: 30rem) {
+      font-size: 0.75rem;
+    }
+  }
+
+  img {
+    align-self: center;
+    width: 100%;
+    max-width: 600px;
+    height: auto;
+  }
+
+  & > div + div {
+    border-width: 0 0 0 2px;
+  }
+
+  @media (max-width: 30rem) {
+    & {
+      flex-direction: column;
+    }
+    & > div + div {
+      border-width: 2px 0 0 0;
+    }
+  }
+}
+
 section.approach {
   border-top: 2px solid var(--sl-color-border);
   padding: var(--padding);

packages/web/src/content/docs/docs/config.mdx

@@ -5,7 +5,7 @@ title: Config
 You can configure opencode using a JSON config file that can be placed in:
 
 - Globally under `~/.config/opencode/config.json`.
-- Your project root under `opencode.json`. This is safe to checked into Git and uses the same schema as the global one.
+- Your project root under `opencode.json`. This is safe to be checked into Git and uses the same schema as the global one.
 
 ```json
 {

packages/web/src/content/docs/docs/index.mdx

@@ -13,6 +13,8 @@ import { Tabs, TabItem } from '@astrojs/starlight/components';
 - Log in with Anthropic to use your Claude Pro or Claude Max account.
 - Supports 75+ LLM providers through [Models.dev](https://models.dev), including local models.
 
+![opencode TUI with the opencode theme](../../../assets/themes/opencode.png)
+
 ---
 
 ## Install