+
)
diff --git a/packages/opencode/src/cli/cmd/run.ts b/packages/opencode/src/cli/cmd/run.ts
index 7bde4a31..a979f8ba 100644
--- a/packages/opencode/src/cli/cmd/run.ts
+++ b/packages/opencode/src/cli/cmd/run.ts
@@ -14,6 +14,8 @@ import { Agent } from "../../agent/agent"
import { Command } from "../../command"
import { SessionPrompt } from "../../session/prompt"
import { EOL } from "os"
+import { Permission } from "@/permission"
+import { select } from "@clack/prompts"
const TOOL: Record
= {
todowrite: ["Todo", UI.Style.TEXT_WARNING_BOLD],
@@ -229,7 +231,9 @@ export const RunCommand = cmd({
const [tool, color] = TOOL[part.tool] ?? [part.tool, UI.Style.TEXT_INFO_BOLD]
const title =
part.state.title ||
- (Object.keys(part.state.input).length > 0 ? JSON.stringify(part.state.input) : "Unknown")
+ (Object.keys(part.state.input).length > 0
+ ? JSON.stringify(part.state.input)
+ : "Unknown")
printEvent(color, tool, title)
@@ -275,6 +279,31 @@ export const RunCommand = cmd({
UI.error(err)
})
+ Bus.subscribe(Permission.Event.Updated, async (evt) => {
+ const permission = evt.properties
+ const message = `Permission required to run: ${permission.title}`
+
+ const result = await select({
+ message,
+ options: [
+ { value: "once", label: "Allow once" },
+ { value: "always", label: "Always allow" },
+ { value: "reject", label: "Reject" },
+ ],
+ initialValue: "once",
+ }).catch(() => "reject")
+ const response = (result.toString().includes("cancel") ? "reject" : result) as
+ | "once"
+ | "always"
+ | "reject"
+
+ Permission.respond({
+ sessionID: session.id,
+ permissionID: permission.id,
+ response,
+ })
+ })
+
await (async () => {
if (args.command) {
return await SessionPrompt.command({
diff --git a/packages/opencode/src/cli/error.ts b/packages/opencode/src/cli/error.ts
index 1bc20de3..7c873ae5 100644
--- a/packages/opencode/src/cli/error.ts
+++ b/packages/opencode/src/cli/error.ts
@@ -1,3 +1,4 @@
+import { ConfigMarkdown } from "@/config/markdown"
import { Config } from "../config/config"
import { MCP } from "../mcp"
import { UI } from "./ui"
@@ -7,16 +8,22 @@ export function FormatError(input: unknown) {
return `MCP server "${input.data.name}" failed. Note, opencode does not support MCP authentication yet.`
if (Config.JsonError.isInstance(input)) {
return (
- `Config file at ${input.data.path} is not valid JSON(C)` + (input.data.message ? `: ${input.data.message}` : "")
+ `Config file at ${input.data.path} is not valid JSON(C)` +
+ (input.data.message ? `: ${input.data.message}` : "")
)
}
if (Config.ConfigDirectoryTypoError.isInstance(input)) {
return `Directory "${input.data.dir}" in ${input.data.path} is not valid. Use "${input.data.suggestion}" instead. This is a common typo.`
}
+ if (ConfigMarkdown.FrontmatterError.isInstance(input)) {
+ return `Failed to parse frontmatter in ${input.data.path}:\n${input.data.message}`
+ }
if (Config.InvalidError.isInstance(input))
return [
- `Config file at ${input.data.path} is invalid` + (input.data.message ? `: ${input.data.message}` : ""),
- ...(input.data.issues?.map((issue) => "↳ " + issue.message + " " + issue.path.join(".")) ?? []),
+ `Config file at ${input.data.path} is invalid` +
+ (input.data.message ? `: ${input.data.message}` : ""),
+ ...(input.data.issues?.map((issue) => "↳ " + issue.message + " " + issue.path.join(".")) ??
+ []),
].join("\n")
if (UI.CancelledError.isInstance(input)) return ""
diff --git a/packages/opencode/src/config/config.ts b/packages/opencode/src/config/config.ts
index 12a5c162..031c4d82 100644
--- a/packages/opencode/src/config/config.ts
+++ b/packages/opencode/src/config/config.ts
@@ -9,7 +9,6 @@ import { Global } from "../global"
import fs from "fs/promises"
import { lazy } from "../util/lazy"
import { NamedError } from "../util/error"
-import matter from "gray-matter"
import { Flag } from "../flag/flag"
import { Auth } from "../auth"
import {
@@ -21,6 +20,7 @@ import { Instance } from "../project/instance"
import { LSPServer } from "../lsp/server"
import { BunProc } from "@/bun"
import { Installation } from "@/installation"
+import { ConfigMarkdown } from "./markdown"
export namespace Config {
const log = Log.create({ service: "config" })
@@ -191,8 +191,7 @@ export namespace Config {
dot: true,
cwd: dir,
})) {
- const content = await Bun.file(item).text()
- const md = matter(content)
+ const md = await ConfigMarkdown.parse(item)
if (!md.data) continue
const name = (() => {
@@ -231,8 +230,7 @@ export namespace Config {
dot: true,
cwd: dir,
})) {
- const content = await Bun.file(item).text()
- const md = matter(content)
+ const md = await ConfigMarkdown.parse(item)
if (!md.data) continue
// Extract relative path from agent folder for nested agents
@@ -274,8 +272,7 @@ export namespace Config {
dot: true,
cwd: dir,
})) {
- const content = await Bun.file(item).text()
- const md = matter(content)
+ const md = await ConfigMarkdown.parse(item)
if (!md.data) continue
const config = {
diff --git a/packages/opencode/src/config/markdown.ts b/packages/opencode/src/config/markdown.ts
index a4dcbf5d..3e84bbf4 100644
--- a/packages/opencode/src/config/markdown.ts
+++ b/packages/opencode/src/config/markdown.ts
@@ -1,3 +1,7 @@
+import { NamedError } from "@/util/error"
+import matter from "gray-matter"
+import { z } from "zod"
+
export namespace ConfigMarkdown {
export const FILE_REGEX = /(? {
if (!clients.includes(client)) return
- const wait = waitForDiagnostics ? client.waitForDiagnostics({ path: input }) : Promise.resolve()
+
+ const wait = waitForDiagnostics
+ ? client.waitForDiagnostics({ path: input })
+ : Promise.resolve()
await client.notify.open({ path: input })
return wait
}).catch((err) => {
diff --git a/packages/opencode/src/lsp/server.ts b/packages/opencode/src/lsp/server.ts
index ee0f73fc..da450879 100644
--- a/packages/opencode/src/lsp/server.ts
+++ b/packages/opencode/src/lsp/server.ts
@@ -54,7 +54,17 @@ export namespace LSPServer {
export const Deno: Info = {
id: "deno",
- root: NearestRoot(["deno.json", "deno.jsonc"]),
+ root: async (file) => {
+ const files = Filesystem.up({
+ targets: ["deno.json", "deno.jsonc"],
+ start: path.dirname(file),
+ stop: Instance.directory,
+ })
+ const first = await files.next()
+ await files.return()
+ if (!first.value) return undefined
+ return path.dirname(first.value)
+ },
extensions: [".ts", ".tsx", ".js", ".jsx", ".mjs"],
async spawn(root) {
const deno = Bun.which("deno")
@@ -78,7 +88,9 @@ export namespace LSPServer {
),
extensions: [".ts", ".tsx", ".js", ".jsx", ".mjs", ".cjs", ".mts", ".cts"],
async spawn(root) {
- const tsserver = await Bun.resolve("typescript/lib/tsserver.js", Instance.directory).catch(() => {})
+ const tsserver = await Bun.resolve("typescript/lib/tsserver.js", Instance.directory).catch(
+ () => {},
+ )
if (!tsserver) return
const proc = spawn(BunProc.which(), ["x", "typescript-language-server", "--stdio"], {
cwd: root,
@@ -101,7 +113,13 @@ export namespace LSPServer {
export const Vue: Info = {
id: "vue",
extensions: [".vue"],
- root: NearestRoot(["package-lock.json", "bun.lockb", "bun.lock", "pnpm-lock.yaml", "yarn.lock"]),
+ root: NearestRoot([
+ "package-lock.json",
+ "bun.lockb",
+ "bun.lock",
+ "pnpm-lock.yaml",
+ "yarn.lock",
+ ]),
async spawn(root) {
let binary = Bun.which("vue-language-server")
const args: string[] = []
@@ -149,17 +167,31 @@ export namespace LSPServer {
export const ESLint: Info = {
id: "eslint",
- root: NearestRoot(["package-lock.json", "bun.lockb", "bun.lock", "pnpm-lock.yaml", "yarn.lock"]),
+ root: NearestRoot([
+ "package-lock.json",
+ "bun.lockb",
+ "bun.lock",
+ "pnpm-lock.yaml",
+ "yarn.lock",
+ ]),
extensions: [".ts", ".tsx", ".js", ".jsx", ".mjs", ".cjs", ".mts", ".cts", ".vue"],
async spawn(root) {
const eslint = await Bun.resolve("eslint", Instance.directory).catch(() => {})
if (!eslint) return
log.info("spawning eslint server")
- const serverPath = path.join(Global.Path.bin, "vscode-eslint", "server", "out", "eslintServer.js")
+ const serverPath = path.join(
+ Global.Path.bin,
+ "vscode-eslint",
+ "server",
+ "out",
+ "eslintServer.js",
+ )
if (!(await Bun.file(serverPath).exists())) {
if (Flag.OPENCODE_DISABLE_LSP_DOWNLOAD) return
log.info("downloading and building VS Code ESLint server")
- const response = await fetch("https://github.com/microsoft/vscode-eslint/archive/refs/heads/main.zip")
+ const response = await fetch(
+ "https://github.com/microsoft/vscode-eslint/archive/refs/heads/main.zip",
+ )
if (!response.ok) return
const zipPath = path.join(Global.Path.bin, "vscode-eslint.zip")
@@ -284,12 +316,25 @@ export namespace LSPServer {
export const Pyright: Info = {
id: "pyright",
extensions: [".py", ".pyi"],
- root: NearestRoot(["pyproject.toml", "setup.py", "setup.cfg", "requirements.txt", "Pipfile", "pyrightconfig.json"]),
+ root: NearestRoot([
+ "pyproject.toml",
+ "setup.py",
+ "setup.cfg",
+ "requirements.txt",
+ "Pipfile",
+ "pyrightconfig.json",
+ ]),
async spawn(root) {
let binary = Bun.which("pyright-langserver")
const args = []
if (!binary) {
- const js = path.join(Global.Path.bin, "node_modules", "pyright", "dist", "pyright-langserver.js")
+ const js = path.join(
+ Global.Path.bin,
+ "node_modules",
+ "pyright",
+ "dist",
+ "pyright-langserver.js",
+ )
if (!(await Bun.file(js).exists())) {
if (Flag.OPENCODE_DISABLE_LSP_DOWNLOAD) return
await Bun.spawn([BunProc.which(), "install", "pyright"], {
@@ -307,9 +352,11 @@ export namespace LSPServer {
const initialization: Record = {}
- const potentialVenvPaths = [process.env["VIRTUAL_ENV"], path.join(root, ".venv"), path.join(root, "venv")].filter(
- (p): p is string => p !== undefined,
- )
+ const potentialVenvPaths = [
+ process.env["VIRTUAL_ENV"],
+ path.join(root, ".venv"),
+ path.join(root, "venv"),
+ ].filter((p): p is string => p !== undefined)
for (const venvPath of potentialVenvPaths) {
const isWindows = process.platform === "win32"
const potentialPythonPath = isWindows
@@ -360,7 +407,9 @@ export namespace LSPServer {
if (Flag.OPENCODE_DISABLE_LSP_DOWNLOAD) return
log.info("downloading elixir-ls from GitHub releases")
- const response = await fetch("https://github.com/elixir-lsp/elixir-ls/archive/refs/heads/master.zip")
+ const response = await fetch(
+ "https://github.com/elixir-lsp/elixir-ls/archive/refs/heads/master.zip",
+ )
if (!response.ok) return
const zipPath = path.join(Global.Path.bin, "elixir-ls.zip")
await Bun.file(zipPath).write(response)
@@ -410,7 +459,9 @@ export namespace LSPServer {
if (Flag.OPENCODE_DISABLE_LSP_DOWNLOAD) return
log.info("downloading zls from GitHub releases")
- const releaseResponse = await fetch("https://api.github.com/repos/zigtools/zls/releases/latest")
+ const releaseResponse = await fetch(
+ "https://api.github.com/repos/zigtools/zls/releases/latest",
+ )
if (!releaseResponse.ok) {
log.error("Failed to fetch zls release info")
return
@@ -585,7 +636,13 @@ export namespace LSPServer {
export const Clangd: Info = {
id: "clangd",
- root: NearestRoot(["compile_commands.json", "compile_flags.txt", ".clangd", "CMakeLists.txt", "Makefile"]),
+ root: NearestRoot([
+ "compile_commands.json",
+ "compile_flags.txt",
+ ".clangd",
+ "CMakeLists.txt",
+ "Makefile",
+ ]),
extensions: [".c", ".cpp", ".cc", ".cxx", ".c++", ".h", ".hpp", ".hh", ".hxx", ".h++"],
async spawn(root) {
let bin = Bun.which("clangd", {
@@ -595,7 +652,9 @@ export namespace LSPServer {
if (Flag.OPENCODE_DISABLE_LSP_DOWNLOAD) return
log.info("downloading clangd from GitHub releases")
- const releaseResponse = await fetch("https://api.github.com/repos/clangd/clangd/releases/latest")
+ const releaseResponse = await fetch(
+ "https://api.github.com/repos/clangd/clangd/releases/latest",
+ )
if (!releaseResponse.ok) {
log.error("Failed to fetch clangd release info")
return
@@ -664,12 +723,24 @@ export namespace LSPServer {
export const Svelte: Info = {
id: "svelte",
extensions: [".svelte"],
- root: NearestRoot(["package-lock.json", "bun.lockb", "bun.lock", "pnpm-lock.yaml", "yarn.lock"]),
+ root: NearestRoot([
+ "package-lock.json",
+ "bun.lockb",
+ "bun.lock",
+ "pnpm-lock.yaml",
+ "yarn.lock",
+ ]),
async spawn(root) {
let binary = Bun.which("svelteserver")
const args: string[] = []
if (!binary) {
- const js = path.join(Global.Path.bin, "node_modules", "svelte-language-server", "bin", "server.js")
+ const js = path.join(
+ Global.Path.bin,
+ "node_modules",
+ "svelte-language-server",
+ "bin",
+ "server.js",
+ )
if (!(await Bun.file(js).exists())) {
if (Flag.OPENCODE_DISABLE_LSP_DOWNLOAD) return
await Bun.spawn([BunProc.which(), "install", "svelte-language-server"], {
@@ -704,9 +775,17 @@ export namespace LSPServer {
export const Astro: Info = {
id: "astro",
extensions: [".astro"],
- root: NearestRoot(["package-lock.json", "bun.lockb", "bun.lock", "pnpm-lock.yaml", "yarn.lock"]),
+ root: NearestRoot([
+ "package-lock.json",
+ "bun.lockb",
+ "bun.lock",
+ "pnpm-lock.yaml",
+ "yarn.lock",
+ ]),
async spawn(root) {
- const tsserver = await Bun.resolve("typescript/lib/tsserver.js", Instance.directory).catch(() => {})
+ const tsserver = await Bun.resolve("typescript/lib/tsserver.js", Instance.directory).catch(
+ () => {},
+ )
if (!tsserver) {
log.info("typescript not found, required for Astro language server")
return
@@ -716,7 +795,14 @@ export namespace LSPServer {
let binary = Bun.which("astro-ls")
const args: string[] = []
if (!binary) {
- const js = path.join(Global.Path.bin, "node_modules", "@astrojs", "language-server", "bin", "nodeServer.js")
+ const js = path.join(
+ Global.Path.bin,
+ "node_modules",
+ "@astrojs",
+ "language-server",
+ "bin",
+ "nodeServer.js",
+ )
if (!(await Bun.file(js).exists())) {
if (Flag.OPENCODE_DISABLE_LSP_DOWNLOAD) return
await Bun.spawn([BunProc.which(), "install", "@astrojs/language-server"], {
@@ -794,7 +880,9 @@ export namespace LSPServer {
.then(({ stdout }) => stdout.toString().trim())
const launcherJar = path.join(launcherDir, jarFileName)
if (!(await fs.exists(launcherJar))) {
- log.error(`Failed to locate the JDTLS launcher module in the installed directory: ${distPath}.`)
+ log.error(
+ `Failed to locate the JDTLS launcher module in the installed directory: ${distPath}.`,
+ )
return
}
const configFile = path.join(
@@ -860,7 +948,9 @@ export namespace LSPServer {
if (Flag.OPENCODE_DISABLE_LSP_DOWNLOAD) return
log.info("downloading lua-language-server from GitHub releases")
- const releaseResponse = await fetch("https://api.github.com/repos/LuaLS/lua-language-server/releases/latest")
+ const releaseResponse = await fetch(
+ "https://api.github.com/repos/LuaLS/lua-language-server/releases/latest",
+ )
if (!releaseResponse.ok) {
log.error("Failed to fetch lua-language-server release info")
return
@@ -897,7 +987,9 @@ export namespace LSPServer {
const assetSuffix = `${lualsPlatform}-${lualsArch}.${ext}`
if (!supportedCombos.includes(assetSuffix)) {
- log.error(`Platform ${platform} and architecture ${arch} is not supported by lua-language-server`)
+ log.error(
+ `Platform ${platform} and architecture ${arch} is not supported by lua-language-server`,
+ )
return
}
@@ -920,7 +1012,10 @@ export namespace LSPServer {
// Unlike zls which is a single self-contained binary,
// lua-language-server needs supporting files (meta/, locale/, etc.)
// Extract entire archive to dedicated directory to preserve all files
- const installDir = path.join(Global.Path.bin, `lua-language-server-${lualsArch}-${lualsPlatform}`)
+ const installDir = path.join(
+ Global.Path.bin,
+ `lua-language-server-${lualsArch}-${lualsPlatform}`,
+ )
// Remove old installation if exists
const stats = await fs.stat(installDir).catch(() => undefined)
@@ -945,7 +1040,11 @@ export namespace LSPServer {
await fs.rm(tempPath, { force: true })
// Binary is located in bin/ subdirectory within the extracted archive
- bin = path.join(installDir, "bin", "lua-language-server" + (platform === "win32" ? ".exe" : ""))
+ bin = path.join(
+ installDir,
+ "bin",
+ "lua-language-server" + (platform === "win32" ? ".exe" : ""),
+ )
if (!(await Bun.file(bin).exists())) {
log.error("Failed to extract lua-language-server binary")
@@ -954,7 +1053,9 @@ export namespace LSPServer {
if (platform !== "win32") {
const ok = await $`chmod +x ${bin}`.quiet().catch((error) => {
- log.error("Failed to set executable permission for lua-language-server binary", { error })
+ log.error("Failed to set executable permission for lua-language-server binary", {
+ error,
+ })
})
if (!ok) return
}
diff --git a/packages/opencode/src/session/prompt.ts b/packages/opencode/src/session/prompt.ts
index 96dfbad0..080f9d99 100644
--- a/packages/opencode/src/session/prompt.ts
+++ b/packages/opencode/src/session/prompt.ts
@@ -534,7 +534,6 @@ export namespace SessionPrompt {
args,
},
)
- item.parameters.parse(args)
const result = await item.execute(args, {
sessionID: input.sessionID,
abort: options.abortSignal!,
@@ -618,7 +617,7 @@ export namespace SessionPrompt {
return {
title: "",
- metadata: {},
+ metadata: result.metadata ?? {},
output,
}
}
diff --git a/packages/opencode/src/tool/task.ts b/packages/opencode/src/tool/task.ts
index 830c298a..342645c3 100644
--- a/packages/opencode/src/tool/task.ts
+++ b/packages/opencode/src/tool/task.ts
@@ -33,6 +33,14 @@ export const TaskTool = Tool.define("task", async () => {
})
const msg = await Session.getMessage({ sessionID: ctx.sessionID, messageID: ctx.messageID })
if (msg.info.role !== "assistant") throw new Error("Not an assistant message")
+
+ ctx.metadata({
+ title: params.description,
+ metadata: {
+ sessionId: session.id,
+ },
+ })
+
const messageID = Identifier.ascending("message")
const parts: Record = {}
const unsub = Bus.subscribe(MessageV2.Event.PartUpdated, async (evt) => {
@@ -44,6 +52,7 @@ export const TaskTool = Tool.define("task", async () => {
title: params.description,
metadata: {
summary: Object.values(parts).sort((a, b) => a.id?.localeCompare(b.id)),
+ sessionId: session.id,
},
})
})
@@ -87,6 +96,7 @@ export const TaskTool = Tool.define("task", async () => {
title: params.description,
metadata: {
summary: all,
+ sessionId: session.id,
},
output: (result.parts.findLast((x: any) => x.type === "text") as any)?.text ?? "",
}
diff --git a/packages/opencode/src/tool/tool.ts b/packages/opencode/src/tool/tool.ts
index c7a28c51..f826d0c9 100644
--- a/packages/opencode/src/tool/tool.ts
+++ b/packages/opencode/src/tool/tool.ts
@@ -42,8 +42,13 @@ export namespace Tool {
return {
id,
init: async () => {
- if (init instanceof Function) return init()
- return init
+ const toolInfo = init instanceof Function ? await init() : init
+ const execute = toolInfo.execute
+ toolInfo.execute = (args, ctx) => {
+ toolInfo.parameters.parse(args)
+ return execute(args, ctx)
+ }
+ return toolInfo
},
}
}
diff --git a/packages/tui/internal/app/app.go b/packages/tui/internal/app/app.go
index 708b9257..e0f1d992 100644
--- a/packages/tui/internal/app/app.go
+++ b/packages/tui/internal/app/app.go
@@ -490,19 +490,7 @@ func (a *App) InitializeProvider() tea.Cmd {
}
}
- // Priority 2: Config file model setting
- if selectedProvider == nil && a.Config.Model != "" {
- if provider, model := findModelByFullID(providers, a.Config.Model); provider != nil &&
- model != nil {
- selectedProvider = provider
- selectedModel = model
- slog.Debug("Selected model from config", "provider", provider.ID, "model", model.ID)
- } else {
- slog.Debug("Config model not found", "model", a.Config.Model)
- }
- }
-
- // Priority 3: Current agent's preferred model
+ // Priority 2: Current agent's preferred model
if selectedProvider == nil && a.Agent().Model.ModelID != "" {
if provider, model := findModelByProviderAndModelID(providers, a.Agent().Model.ProviderID, a.Agent().Model.ModelID); provider != nil &&
model != nil {
@@ -522,6 +510,18 @@ func (a *App) InitializeProvider() tea.Cmd {
}
}
+ // Priority 3: Config file model setting
+ if selectedProvider == nil && a.Config.Model != "" {
+ if provider, model := findModelByFullID(providers, a.Config.Model); provider != nil &&
+ model != nil {
+ selectedProvider = provider
+ selectedModel = model
+ slog.Debug("Selected model from config", "provider", provider.ID, "model", model.ID)
+ } else {
+ slog.Debug("Config model not found", "model", a.Config.Model)
+ }
+ }
+
// Priority 4: Recent model usage (most recently used model)
if selectedProvider == nil && len(a.State.RecentlyUsedModels) > 0 {
recentUsage := a.State.RecentlyUsedModels[0] // Most recent is first
diff --git a/packages/tui/internal/app/app_test.go b/packages/tui/internal/app/app_test.go
index 9260a991..e716d437 100644
--- a/packages/tui/internal/app/app_test.go
+++ b/packages/tui/internal/app/app_test.go
@@ -226,3 +226,79 @@ func TestFindProviderByID(t *testing.T) {
})
}
}
+
+// TestModelSelectionPriority tests the priority order for model selection
+func TestModelSelectionPriority(t *testing.T) {
+ providers := []opencode.Provider{
+ {
+ ID: "anthropic",
+ Models: map[string]opencode.Model{
+ "claude-opus": {ID: "claude-opus"},
+ },
+ },
+ {
+ ID: "openai",
+ Models: map[string]opencode.Model{
+ "gpt-4": {ID: "gpt-4"},
+ },
+ },
+ }
+
+ tests := []struct {
+ name string
+ agentProviderID string
+ agentModelID string
+ configModel string
+ expectedProviderID string
+ expectedModelID string
+ description string
+ }{
+ {
+ name: "agent model takes priority over config",
+ agentProviderID: "openai",
+ agentModelID: "gpt-4",
+ configModel: "anthropic/claude-opus",
+ expectedProviderID: "openai",
+ expectedModelID: "gpt-4",
+ description: "When agent specifies a model, it should be used even if config has a different model",
+ },
+ {
+ name: "config model used when agent has no model",
+ agentProviderID: "",
+ agentModelID: "",
+ configModel: "anthropic/claude-opus",
+ expectedProviderID: "anthropic",
+ expectedModelID: "claude-opus",
+ description: "When agent has no model specified, config model should be used as fallback",
+ },
+ }
+
+ for _, tt := range tests {
+ t.Run(tt.name, func(t *testing.T) {
+ var selectedProvider *opencode.Provider
+ var selectedModel *opencode.Model
+
+ // Simulate priority 2: Agent model check
+ if tt.agentModelID != "" {
+ selectedProvider, selectedModel = findModelByProviderAndModelID(providers, tt.agentProviderID, tt.agentModelID)
+ }
+
+ // Simulate priority 3: Config model fallback
+ if selectedProvider == nil && tt.configModel != "" {
+ selectedProvider, selectedModel = findModelByFullID(providers, tt.configModel)
+ }
+
+ if selectedProvider == nil || selectedModel == nil {
+ t.Fatalf("Expected to find model, but got nil - %s", tt.description)
+ }
+
+ if selectedProvider.ID != tt.expectedProviderID {
+ t.Errorf("Expected provider %s, got %s - %s", tt.expectedProviderID, selectedProvider.ID, tt.description)
+ }
+
+ if selectedModel.ID != tt.expectedModelID {
+ t.Errorf("Expected model %s, got %s - %s", tt.expectedModelID, selectedModel.ID, tt.description)
+ }
+ })
+ }
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 8fd6bff6..91ab3867 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -11,11 +11,13 @@
"./fonts/*": "./src/assets/fonts/*"
},
"scripts": {
+ "typecheck": "tsgo --noEmit",
"dev": "vite",
"generate:tailwind": "bun run script/tailwind.ts"
},
"devDependencies": {
"@types/bun": "catalog:",
+ "@tsconfig/node22": "catalog:",
"typescript": "catalog:",
"vite": "catalog:",
"vite-plugin-solid": "catalog:",
@@ -24,11 +26,17 @@
},
"dependencies": {
"@kobalte/core": "catalog:",
+ "@opencode-ai/sdk": "workspace:*",
"@pierre/precision-diffs": "catalog:",
+ "@shikijs/transformers": "3.9.2",
"@solidjs/meta": "catalog:",
+ "@typescript/native-preview": "catalog:",
"fuzzysort": "catalog:",
"luxon": "catalog:",
+ "marked": "16.2.0",
+ "marked-shiki": "1.2.1",
"remeda": "catalog:",
+ "shiki": "3.9.2",
"solid-js": "catalog:",
"solid-list": "catalog:",
"virtua": "catalog:"
diff --git a/packages/ui/src/components/basic-tool.css b/packages/ui/src/components/basic-tool.css
new file mode 100644
index 00000000..f3d9f865
--- /dev/null
+++ b/packages/ui/src/components/basic-tool.css
@@ -0,0 +1,76 @@
+[data-component="tool-trigger"] {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ align-self: stretch;
+ gap: 20px;
+ justify-content: space-between;
+
+ [data-slot="tool-trigger-content"] {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ align-self: stretch;
+ gap: 20px;
+ }
+
+ [data-slot="tool-icon"] {
+ flex-shrink: 0;
+ }
+
+ [data-slot="tool-info"] {
+ flex-grow: 1;
+ min-width: 0;
+ }
+
+ [data-slot="tool-info-structured"] {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ justify-content: space-between;
+ }
+
+ [data-slot="tool-info-main"] {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ [data-slot="tool-title"] {
+ font-family: var(--font-family-sans);
+ font-size: var(--font-size-small);
+ font-style: normal;
+ font-weight: var(--font-weight-medium);
+ line-height: var(--line-height-large);
+ letter-spacing: var(--letter-spacing-normal);
+ color: var(--text-base);
+
+ &.capitalize {
+ text-transform: capitalize;
+ }
+ }
+
+ [data-slot="tool-subtitle"] {
+ font-family: var(--font-family-sans);
+ font-size: var(--font-size-small);
+ font-style: normal;
+ font-weight: var(--font-weight-medium);
+ line-height: var(--line-height-large);
+ letter-spacing: var(--letter-spacing-normal);
+ color: var(--text-weak);
+ }
+
+ [data-slot="tool-arg"] {
+ font-family: var(--font-family-sans);
+ font-size: var(--font-size-small);
+ font-style: normal;
+ font-weight: var(--font-weight-regular);
+ line-height: var(--line-height-large);
+ letter-spacing: var(--letter-spacing-normal);
+ color: var(--text-weak);
+ }
+}
diff --git a/packages/ui/src/components/basic-tool.tsx b/packages/ui/src/components/basic-tool.tsx
new file mode 100644
index 00000000..43574fbb
--- /dev/null
+++ b/packages/ui/src/components/basic-tool.tsx
@@ -0,0 +1,95 @@
+import { children, For, Match, Show, Switch, type JSX } from "solid-js"
+import { Collapsible } from "./collapsible"
+import { Icon, IconProps } from "./icon"
+
+export type TriggerTitle = {
+ title: string
+ titleClass?: string
+ subtitle?: string
+ subtitleClass?: string
+ args?: string[]
+ argsClass?: string
+ action?: JSX.Element
+}
+
+const isTriggerTitle = (val: any): val is TriggerTitle => {
+ return typeof val === "object" && val !== null && "title" in val && !(val instanceof Node)
+}
+
+export interface BasicToolProps {
+ icon: IconProps["name"]
+ trigger: TriggerTitle | JSX.Element
+ children?: JSX.Element
+ hideDetails?: boolean
+}
+
+export function BasicTool(props: BasicToolProps) {
+ const resolved = children(() => props.children)
+ return (
+
+
+
+
+
+
+
+
+ {(trigger) => (
+
+
+
+ {trigger().title}
+
+
+
+ {trigger().subtitle}
+
+
+
+
+ {(arg) => (
+
+ {arg}
+
+ )}
+
+
+
+
{trigger().action}
+
+ {props.trigger as JSX.Element}
+
+
+
+
+
+
+
+ {resolved()}
+
+
+ )
+}
+
+export function GenericTool(props: { tool: string; hideDetails?: boolean }) {
+ return
+ {props.children}
+
+ )
+}
diff --git a/packages/ui/src/components/collapsible.css b/packages/ui/src/components/collapsible.css
index 3d8c8ebe..4b2c14d4 100644
--- a/packages/ui/src/components/collapsible.css
+++ b/packages/ui/src/components/collapsible.css
@@ -11,7 +11,7 @@
[data-slot="collapsible-trigger"] {
width: 100%;
display: flex;
- height: 40px;
+ height: 32px;
padding: 6px 8px 6px 12px;
align-items: center;
align-self: stretch;
diff --git a/packages/ui/src/components/diff-changes.css b/packages/ui/src/components/diff-changes.css
new file mode 100644
index 00000000..eb95c467
--- /dev/null
+++ b/packages/ui/src/components/diff-changes.css
@@ -0,0 +1,39 @@
+[data-component="diff-changes"] {
+ display: flex;
+ gap: 8px;
+ justify-content: flex-end;
+ align-items: center;
+
+ [data-slot="additions"] {
+ font-family: var(--font-family-mono);
+ font-size: var(--font-size-small);
+ font-style: normal;
+ font-weight: var(--font-weight-regular);
+ line-height: var(--line-height-large);
+ letter-spacing: var(--letter-spacing-normal);
+ text-align: right;
+ color: var(--text-diff-add-base);
+ }
+
+ [data-slot="deletions"] {
+ font-family: var(--font-family-mono);
+ font-size: var(--font-size-small);
+ font-style: normal;
+ font-weight: var(--font-weight-regular);
+ line-height: var(--line-height-large);
+ letter-spacing: var(--letter-spacing-normal);
+ text-align: right;
+ color: var(--text-diff-delete-base);
+ }
+}
+
+[data-component="diff-changes"][data-variant="bars"] {
+ width: 18px;
+ flex-shrink: 0;
+
+ svg {
+ display: block;
+ width: 100%;
+ height: auto;
+ }
+}
diff --git a/packages/ui/src/components/diff-changes.tsx b/packages/ui/src/components/diff-changes.tsx
new file mode 100644
index 00000000..433c47f3
--- /dev/null
+++ b/packages/ui/src/components/diff-changes.tsx
@@ -0,0 +1,122 @@
+import type { FileDiff } from "@opencode-ai/sdk"
+import { createMemo, For, Match, Show, Switch } from "solid-js"
+
+export function DiffChanges(props: { diff: FileDiff | FileDiff[]; variant?: "default" | "bars" }) {
+ const variant = () => props.variant ?? "default"
+
+ const additions = createMemo(() =>
+ Array.isArray(props.diff)
+ ? props.diff.reduce((acc, diff) => acc + (diff.additions ?? 0), 0)
+ : props.diff.additions,
+ )
+ const deletions = createMemo(() =>
+ Array.isArray(props.diff)
+ ? props.diff.reduce((acc, diff) => acc + (diff.deletions ?? 0), 0)
+ : props.diff.deletions,
+ )
+ const total = createMemo(() => (additions() ?? 0) + (deletions() ?? 0))
+
+ const countLines = (text: string) => {
+ if (!text) return 0
+ return text.split("\n").length
+ }
+
+ const totalBeforeLines = createMemo(() => {
+ if (!Array.isArray(props.diff)) return countLines(props.diff.before || "")
+ return props.diff.reduce((acc, diff) => acc + countLines(diff.before || ""), 0)
+ })
+
+ const blockCounts = createMemo(() => {
+ const TOTAL_BLOCKS = 5
+
+ const adds = additions() ?? 0
+ const dels = deletions() ?? 0
+
+ if (adds === 0 && dels === 0) {
+ return { added: 0, deleted: 0, neutral: TOTAL_BLOCKS }
+ }
+
+ const total = adds + dels
+
+ if (total < 5) {
+ const added = adds > 0 ? 1 : 0
+ const deleted = dels > 0 ? 1 : 0
+ const neutral = TOTAL_BLOCKS - added - deleted
+ return { added, deleted, neutral }
+ }
+
+ const ratio = adds > dels ? adds / dels : dels / adds
+ let BLOCKS_FOR_COLORS = TOTAL_BLOCKS
+
+ if (total < 20) {
+ BLOCKS_FOR_COLORS = TOTAL_BLOCKS - 1
+ } else if (ratio < 4) {
+ BLOCKS_FOR_COLORS = TOTAL_BLOCKS - 1
+ }
+
+ const percentAdded = adds / total
+ const percentDeleted = dels / total
+
+ const added_raw = percentAdded * BLOCKS_FOR_COLORS
+ const deleted_raw = percentDeleted * BLOCKS_FOR_COLORS
+
+ let added = adds > 0 ? Math.max(1, Math.round(added_raw)) : 0
+ let deleted = dels > 0 ? Math.max(1, Math.round(deleted_raw)) : 0
+
+ // Cap bars based on actual change magnitude
+ if (adds > 0 && adds <= 5) added = Math.min(added, 1)
+ if (adds > 5 && adds <= 10) added = Math.min(added, 2)
+ if (dels > 0 && dels <= 5) deleted = Math.min(deleted, 1)
+ if (dels > 5 && dels <= 10) deleted = Math.min(deleted, 2)
+
+ let total_allocated = added + deleted
+ if (total_allocated > BLOCKS_FOR_COLORS) {
+ if (added_raw > deleted_raw) {
+ added = BLOCKS_FOR_COLORS - deleted
+ } else {
+ deleted = BLOCKS_FOR_COLORS - added
+ }
+ total_allocated = added + deleted
+ }
+
+ const neutral = Math.max(0, TOTAL_BLOCKS - total_allocated)
+
+ return { added, deleted, neutral }
+ })
+
+ const ADD_COLOR = "var(--icon-diff-add-base)"
+ const DELETE_COLOR = "var(--icon-diff-delete-base)"
+ const NEUTRAL_COLOR = "var(--icon-weak-base)"
+
+ const visibleBlocks = createMemo(() => {
+ const counts = blockCounts()
+ const blocks = [
+ ...Array(counts.added).fill(ADD_COLOR),
+ ...Array(counts.deleted).fill(DELETE_COLOR),
+ ...Array(counts.neutral).fill(NEUTRAL_COLOR),
+ ]
+ return blocks.slice(0, 5)
+ })
+
+ return (
+ 0 : true}>
+
+
+
+
+
+
+ {(color, i) =>
+
+
+
+
+ {`+${additions()}`}
+ {`-${deletions()}`}
+
+
+
+
+ )
+}
diff --git a/packages/ui/src/components/diff.css b/packages/ui/src/components/diff.css
index c4e83187..860e3b1d 100644
--- a/packages/ui/src/components/diff.css
+++ b/packages/ui/src/components/diff.css
@@ -22,5 +22,9 @@
width: var(--pjs-column-content-width);
left: var(--pjs-column-number-width);
padding-left: 8px;
+
+ [data-slot="diff-hunk-separator-content-span"] {
+ mix-blend-mode: var(--text-mix-blend-mode);
+ }
}
}
diff --git a/packages/ui/src/components/diff.tsx b/packages/ui/src/components/diff.tsx
index 731b1bfe..e9e46d6b 100644
--- a/packages/ui/src/components/diff.tsx
+++ b/packages/ui/src/components/diff.tsx
@@ -3,12 +3,12 @@ import {
FileDiff,
type DiffLineAnnotation,
type HunkData,
- DiffFileRendererOptions,
+ FileDiffOptions,
// registerCustomTheme,
} from "@pierre/precision-diffs"
import { ComponentProps, createEffect, splitProps } from "solid-js"
-export type DiffProps = Omit, "themes"> & {
+export type DiffProps = FileDiffOptions & {
before: FileContents
after: FileContents
annotations?: DiffLineAnnotation[]
@@ -54,13 +54,9 @@ export function Diff(props: DiffProps) {
// When ready to render, simply call .render with old/new file, optional
// annotations and a container element to hold the diff
createEffect(() => {
- // @ts-expect-error
const instance = new FileDiff({
// theme: "pierre-light",
- // theme: "pierre-light",
- // Or can also provide a 'themes' prop, which allows the code to adapt
- // to your OS light or dark theme
- themes: { dark: "pierre-dark", light: "pierre-light" },
+ theme: { dark: "pierre-dark", light: "pierre-light" },
// When using the 'themes' prop, 'themeType' allows you to force 'dark'
// or 'light' theme, or inherit from the OS ('system') theme.
themeType: "system",
@@ -113,8 +109,11 @@ export function Diff(props: DiffProps) {
numCol.dataset["slot"] = "diff-hunk-separator-line-number"
fragment.appendChild(numCol)
const contentCol = document.createElement("div")
- contentCol.textContent = `${hunkData.lines} unmodified lines`
contentCol.dataset["slot"] = "diff-hunk-separator-content"
+ const span = document.createElement("span")
+ span.dataset["slot"] = "diff-hunk-separator-content-span"
+ span.textContent = `${hunkData.lines} unmodified lines`
+ contentCol.appendChild(span)
fragment.appendChild(contentCol)
return fragment
},
@@ -170,7 +169,7 @@ export function Diff(props: DiffProps) {
"--pjs-font-family": "var(--font-family-mono)",
"--pjs-font-size": "var(--font-size-small)",
"--pjs-line-height": "24px",
- "--pjs-tab-size": 4,
+ "--pjs-tab-size": 2,
"--pjs-font-features": "var(--font-family-mono--font-feature-settings)",
"--pjs-header-font-family": "var(--font-family-sans)",
"--pjs-gap-block": 0,
diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx
index 5736146e..a2e12729 100644
--- a/packages/ui/src/components/icon.tsx
+++ b/packages/ui/src/components/icon.tsx
@@ -149,6 +149,7 @@ const newIcons = {
console: `
+ },
+) {
+ const [local, others] = splitProps(props, ["text", "class", "classList"])
+ const marked = useMarked()
+ const [html] = createResource(
+ () => strip(local.text),
+ async (markdown) => {
+ return marked.parse(markdown)
+ },
+ )
+ return (
+
+ )
+}
diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css
new file mode 100644
index 00000000..fa251a2b
--- /dev/null
+++ b/packages/ui/src/components/message-part.css
@@ -0,0 +1,129 @@
+[data-component="assistant-message"] {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+}
+
+[data-component="user-message"] {
+ font-family: var(--font-family-sans);
+ font-size: var(--font-size-small);
+ font-style: normal;
+ font-weight: var(--font-weight-regular);
+ line-height: var(--line-height-large);
+ letter-spacing: var(--letter-spacing-normal);
+ color: var(--text-base);
+ display: -webkit-box;
+ line-clamp: 3;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+[data-component="text-part"] {
+ [data-component="markdown"] {
+ margin-top: 32px;
+ }
+}
+
+[data-component="tool-error"] {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ [data-slot="icon"] {
+ color: var(--icon-critical-active);
+ }
+
+ [data-slot="content"] {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ [data-slot="title"] {
+ font-family: var(--font-family-sans);
+ font-size: var(--font-size-small);
+ font-style: normal;
+ font-weight: var(--font-weight-medium);
+ line-height: var(--line-height-large);
+ letter-spacing: var(--letter-spacing-normal);
+ color: var(--ember-light-11);
+ text-transform: capitalize;
+ }
+}
+
+[data-component="tool-output"] {
+ white-space: pre;
+}
+
+[data-component="edit-trigger"],
+[data-component="write-trigger"] {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+
+ [data-slot="title-area"] {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ [data-slot="title"] {
+ font-family: var(--font-family-sans);
+ font-size: var(--font-size-small);
+ font-style: normal;
+ font-weight: var(--font-weight-medium);
+ line-height: var(--line-height-large);
+ letter-spacing: var(--letter-spacing-normal);
+ color: var(--text-base);
+ text-transform: capitalize;
+ }
+
+ [data-slot="path"] {
+ display: flex;
+ }
+
+ [data-slot="directory"] {
+ color: var(--text-weak);
+ }
+
+ [data-slot="filename"] {
+ color: var(--text-strong);
+ }
+
+ [data-slot="actions"] {
+ display: flex;
+ gap: 16px;
+ align-items: center;
+ justify-content: flex-end;
+ }
+}
+
+[data-component="edit-content"] {
+ border-top: 1px solid var(--border-weaker-base);
+}
+
+[data-component="tool-action"] {
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+[data-component="todos"] {
+ padding: 10px 12px 24px 48px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ [data-slot="todo-content"] {
+ &[data-completed="completed"] {
+ text-decoration: line-through;
+ color: var(--text-weaker);
+ }
+ }
+}
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
new file mode 100644
index 00000000..1aaab751
--- /dev/null
+++ b/packages/ui/src/components/message-part.tsx
@@ -0,0 +1,446 @@
+import { Component, createMemo, For, Match, Show, Switch } from "solid-js"
+import { Dynamic } from "solid-js/web"
+import {
+ AssistantMessage,
+ Message as MessageType,
+ Part as PartType,
+ TextPart,
+ ToolPart,
+ UserMessage,
+} from "@opencode-ai/sdk"
+import { BasicTool } from "./basic-tool"
+import { GenericTool } from "./basic-tool"
+import { Card } from "./card"
+import { Icon } from "./icon"
+import { Checkbox } from "./checkbox"
+import { Diff } from "./diff"
+import { DiffChanges } from "./diff-changes"
+import { Markdown } from "./markdown"
+
+export interface MessageProps {
+ message: MessageType
+ parts: PartType[]
+}
+
+export interface MessagePartProps {
+ part: PartType
+ message: MessageType
+ hideDetails?: boolean
+}
+
+export type PartComponent = Component
+
+export const PART_MAPPING: Record = {}
+
+function getFilename(path: string) {
+ if (!path) return ""
+ const trimmed = path.replace(/[\/]+$/, "")
+ const parts = trimmed.split("/")
+ return parts[parts.length - 1] ?? ""
+}
+
+function getDirectory(path: string) {
+ const parts = path.split("/")
+ const dir = parts.slice(0, parts.length - 1).join("/")
+ return dir ? dir + "/" : ""
+}
+
+export function registerPartComponent(type: string, component: PartComponent) {
+ PART_MAPPING[type] = component
+}
+
+export function Message(props: MessageProps) {
+ return (
+
+
+ {(userMessage) => (
+
+
+ {(assistantMessage) => (
+
+
+ )
+}
+
+export function AssistantMessageDisplay(props: { message: AssistantMessage; parts: PartType[] }) {
+ const filteredParts = createMemo(() => {
+ return props.parts?.filter((x) => {
+ if (x.type === "reasoning") return false
+ return x.type !== "tool" || (x as ToolPart).tool !== "todoread"
+ })
+ })
+ return {(part) =>
+}
+
+export function UserMessageDisplay(props: { message: UserMessage; parts: PartType[] }) {
+ const text = createMemo(() =>
+ props.parts
+ ?.filter((p) => p.type === "text" && !(p as TextPart).synthetic)
+ ?.map((p) => (p as TextPart).text)
+ ?.join(""),
+ )
+ return {text()}
+}
+
+export function Part(props: MessagePartProps) {
+ const component = createMemo(() => PART_MAPPING[props.part.type])
+ return (
+
+
+ )
+}
+
+export interface ToolProps {
+ input: Record
+ metadata: Record
+ tool: string
+ output?: string
+ hideDetails?: boolean
+}
+
+export type ToolComponent = Component
+
+const state: Record<
+ string,
+ {
+ name: string
+ render?: ToolComponent
+ }
+> = {}
+
+export function registerTool(input: { name: string; render?: ToolComponent }) {
+ state[input.name] = input
+ return input
+}
+
+export function getTool(name: string) {
+ return state[name]?.render
+}
+
+export const ToolRegistry = {
+ register: registerTool,
+ render: getTool,
+}
+
+PART_MAPPING["tool"] = function ToolPartDisplay(props) {
+ const part = props.part as ToolPart
+ const component = createMemo(() => {
+ const render = ToolRegistry.render(part.tool) ?? GenericTool
+ const metadata = part.state.status === "pending" ? {} : (part.state.metadata ?? {})
+ const input = part.state.status === "completed" ? part.state.input : {}
+
+ return (
+
+
+ {(error) => {
+ const cleaned = error().replace("Error: ", "")
+ const [title, ...rest] = cleaned.split(": ")
+ return (
+
+
+
+
+
+
+
{title}
+
{rest.join(": ")}
+
+ {cleaned}
+
+
+ )
+ }}
+
+
+
+
+ )
+ })
+
+ return {component()}
+}
+
+PART_MAPPING["text"] = function TextPartDisplay(props) {
+ const part = props.part as TextPart
+ return (
+
+
+
+
+ )
+}
+
+PART_MAPPING["reasoning"] = function ReasoningPartDisplay(props) {
+ const part = props.part as any
+ return (
+
+
+
+
+ )
+}
+
+ToolRegistry.register({
+ name: "read",
+ render(props) {
+ return (
+
+
+ {props.output}
+
+
+ )
+ },
+})
+
+ToolRegistry.register({
+ name: "glob",
+ render(props) {
+ return (
+ {props.output}