- 
-
-
diff --git a/packages/app/src/components/dialog-release-notes.tsx b/packages/app/src/components/dialog-release-notes.tsx
index 2040009a8c3..d0a35b71beb 100644
--- a/packages/app/src/components/dialog-release-notes.tsx
+++ b/packages/app/src/components/dialog-release-notes.tsx
@@ -2,6 +2,7 @@ import { createSignal } from "solid-js"
import { Dialog } from "@opencode-ai/ui/dialog"
import { Button } from "@opencode-ai/ui/button"
import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { useLanguage } from "@/context/language"
import { useSettings } from "@/context/settings"
export type Highlight = {
@@ -16,6 +17,7 @@ export type Highlight = {
export function DialogReleaseNotes(props: { highlights: Highlight[] }) {
const dialog = useDialog()
+ const language = useLanguage()
const settings = useSettings()
const [index, setIndex] = createSignal(0)
@@ -83,16 +85,16 @@ export function DialogReleaseNotes(props: { highlights: Highlight[] }) {
!.media!.src})
) : (
diff --git a/packages/app/src/components/dialog-select-directory.tsx b/packages/app/src/components/dialog-select-directory.tsx
index 515e640c9fa..91e23f8ffa5 100644
--- a/packages/app/src/components/dialog-select-directory.tsx
+++ b/packages/app/src/components/dialog-select-directory.tsx
@@ -8,6 +8,7 @@ import fuzzysort from "fuzzysort"
import { createMemo, createResource, createSignal } from "solid-js"
import { useGlobalSDK } from "@/context/global-sdk"
import { useGlobalSync } from "@/context/global-sync"
+import { useLayout } from "@/context/layout"
import { useLanguage } from "@/context/language"
interface DialogSelectDirectoryProps {
@@ -19,6 +20,7 @@ interface DialogSelectDirectoryProps {
type Row = {
absolute: string
search: string
+ group: "recent" | "folders"
}
function cleanInput(value: string) {
@@ -101,7 +103,7 @@ function displayPath(path: string, input: string, home: string) {
return tildeOf(full, home) || full
}
-function toRow(absolute: string, home: string): Row {
+function toRow(absolute: string, home: string, group: Row["group"]): Row {
const full = trimTrailing(absolute)
const tilde = tildeOf(full, home)
const withSlash = (value: string) => {
@@ -113,7 +115,16 @@ function toRow(absolute: string, home: string): Row {
const search = Array.from(
new Set([full, withSlash(full), tilde, withSlash(tilde), getFilename(full)].filter(Boolean)),
).join("\n")
- return { absolute: full, search }
+ return { absolute: full, search, group }
+}
+
+function uniqueRows(rows: Row[]) {
+ const seen = new Set()
+ return rows.filter((row) => {
+ if (seen.has(row.absolute)) return false
+ seen.add(row.absolute)
+ return true
+ })
}
function useDirectorySearch(args: {
@@ -237,6 +248,7 @@ function useDirectorySearch(args: {
export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
const sync = useGlobalSync()
const sdk = useGlobalSDK()
+ const layout = useLayout()
const dialog = useDialog()
const language = useLanguage()
@@ -266,9 +278,42 @@ export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
start,
})
+ const recentProjects = createMemo(() => {
+ const projects = layout.projects.list()
+ const byProject = new Map()
+
+ for (const project of projects) {
+ let at = 0
+ const dirs = [project.worktree, ...(project.sandboxes ?? [])]
+ for (const directory of dirs) {
+ const sessions = sync.child(directory, { bootstrap: false })[0].session
+ for (const session of sessions) {
+ if (session.time.archived) continue
+ const updated = session.time.updated ?? session.time.created
+ if (updated > at) at = updated
+ }
+ }
+ byProject.set(project.worktree, at)
+ }
+
+ return projects
+ .map((project, index) => ({ project, at: byProject.get(project.worktree) ?? 0, index }))
+ .sort((a, b) => b.at - a.at || a.index - b.index)
+ .slice(0, 5)
+ .map(({ project }) => {
+ const row = toRow(project.worktree, home(), "recent")
+ const name = project.name || getFilename(project.worktree)
+ return {
+ ...row,
+ search: `${row.search}\n${name}`,
+ }
+ })
+ })
+
const items = async (value: string) => {
const results = await directories(value)
- return results.map((absolute) => toRow(absolute, home()))
+ const directoryRows = results.map((absolute) => toRow(absolute, home(), "folders"))
+ return uniqueRows([...recentProjects(), ...directoryRows])
}
function resolve(absolute: string) {
@@ -285,6 +330,14 @@ export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
items={items}
key={(x) => x.absolute}
filterKeys={["search"]}
+ groupBy={(item) => item.group}
+ sortGroupsBy={(a, b) => {
+ if (a.category === b.category) return 0
+ return a.category === "recent" ? -1 : 1
+ }}
+ groupHeader={(group) =>
+ group.category === "recent" ? language.t("home.recentProjects") : language.t("command.project.open")
+ }
ref={(r) => (list = r)}
onFilter={(value) => setFilter(cleanInput(value))}
onKeyEvent={(e, item) => {
diff --git a/packages/app/src/components/dialog-select-file.tsx b/packages/app/src/components/dialog-select-file.tsx
index 29a3666c034..b530aff532f 100644
--- a/packages/app/src/components/dialog-select-file.tsx
+++ b/packages/app/src/components/dialog-select-file.tsx
@@ -449,7 +449,7 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
- {getRelativeTime(new Date(item.updated!).toISOString())}
+ {getRelativeTime(new Date(item.updated!).toISOString(), language.t)}
diff --git a/packages/app/src/components/dialog-select-model-unpaid.tsx b/packages/app/src/components/dialog-select-model-unpaid.tsx
index af788d05b03..bcee3f501f5 100644
--- a/packages/app/src/components/dialog-select-model-unpaid.tsx
+++ b/packages/app/src/components/dialog-select-model-unpaid.tsx
@@ -1,7 +1,6 @@
import { Button } from "@opencode-ai/ui/button"
import { useDialog } from "@opencode-ai/ui/context/dialog"
import { Dialog } from "@opencode-ai/ui/dialog"
-import type { IconName } from "@opencode-ai/ui/icons/provider"
import { List, type ListRef } from "@opencode-ai/ui/list"
import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
import { Tag } from "@opencode-ai/ui/tag"
@@ -95,11 +94,22 @@ export const DialogSelectModelUnpaid: Component = () => {
>
{(i) => (
{isLast() ? (
) : (
)}
@@ -128,7 +130,7 @@ export function DialogReleaseNotes(props: { highlights: Highlight[] }) {
{feature()!.media!.type === "image" ? (
-
+
{language.t("dialog.provider.tag.recommended")}
+
+ <>
+ {language.t("dialog.provider.tag.recommended")}
+
+
diff --git a/packages/app/src/components/dialog-select-provider.tsx b/packages/app/src/components/dialog-select-provider.tsx
index d5e2d82e6fd..9dcf81e1f0d 100644
--- a/packages/app/src/components/dialog-select-provider.tsx
+++ b/packages/app/src/components/dialog-select-provider.tsx
@@ -5,18 +5,12 @@ import { Dialog } from "@opencode-ai/ui/dialog"
import { List } from "@opencode-ai/ui/list"
import { Tag } from "@opencode-ai/ui/tag"
import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
-import { iconNames, type IconName } from "@opencode-ai/ui/icons/provider"
import { DialogConnectProvider } from "./dialog-connect-provider"
import { useLanguage } from "@/context/language"
import { DialogCustomProvider } from "./dialog-custom-provider"
const CUSTOM_ID = "_custom"
-function icon(id: string): IconName {
- if (iconNames.includes(id as IconName)) return id as IconName
- return "synthetic"
-}
-
export const DialogSelectProvider: Component = () => {
const dialog = useDialog()
const providers = useProviders()
@@ -31,6 +25,7 @@ export const DialogSelectProvider: Component = () => {
if (id === "anthropic") return language.t("dialog.provider.anthropic.note")
if (id === "openai") return language.t("dialog.provider.openai.note")
if (id.startsWith("github-copilot")) return language.t("dialog.provider.copilot.note")
+ if (id === "opencode-go") return language.t("dialog.provider.opencodeGo.tagline")
}
return (
@@ -70,7 +65,7 @@ export const DialogSelectProvider: Component = () => {
>
{(i) => (
, err: unknown) {
@@ -83,83 +79,86 @@ function useServerPreview(fetcher: typeof fetch) {
return host.includes(".") || host.includes(":")
}
- const previewStatus = async (value: string, setStatus: (value: boolean | undefined) => void) => {
+ const previewStatus = async (
+ value: string,
+ username: string,
+ password: string,
+ setStatus: (value: boolean | undefined) => void,
+ ) => {
setStatus(undefined)
if (!looksComplete(value)) return
const normalized = normalizeServerUrl(value)
if (!normalized) return
- const result = await checkServerHealth({ url: normalized }, fetcher)
+ const http: ServerConnection.HttpBase = { url: normalized }
+ if (username) http.username = username
+ if (password) http.password = password
+ const result = await checkServerHealth(http, fetcher)
setStatus(result.healthy)
}
return { previewStatus }
}
-function AddRow(props: AddRowProps) {
- return (
-
{language.t("dialog.provider.opencode.tagline")}
+
+ {language.t("dialog.provider.opencodeGo.tagline")}
+
+ {language.t("dialog.provider.anthropic.note")}
-
@@ -85,6 +80,9 @@ export const DialogSelectProvider: Component = () => {
{language.t("dialog.provider.tag.recommended")}
{(value) =>
+
+ {language.t("dialog.provider.tag.recommended")}
+
)}
diff --git a/packages/app/src/components/dialog-select-server.tsx b/packages/app/src/components/dialog-select-server.tsx
index 76c8ff60ef0..4813ecc45d3 100644
--- a/packages/app/src/components/dialog-select-server.tsx
+++ b/packages/app/src/components/dialog-select-server.tsx
@@ -2,6 +2,7 @@ import { Button } from "@opencode-ai/ui/button"
import { useDialog } from "@opencode-ai/ui/context/dialog"
import { Dialog } from "@opencode-ai/ui/dialog"
import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+import { Icon } from "@opencode-ai/ui/icon"
import { IconButton } from "@opencode-ai/ui/icon-button"
import { List } from "@opencode-ai/ui/list"
import { TextField } from "@opencode-ai/ui/text-field"
@@ -9,32 +10,27 @@ import { showToast } from "@opencode-ai/ui/toast"
import { useNavigate } from "@solidjs/router"
import { createEffect, createMemo, createResource, onCleanup, Show } from "solid-js"
import { createStore, reconcile } from "solid-js/store"
-import { ServerRow } from "@/components/server/server-row"
+import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row"
import { useLanguage } from "@/context/language"
import { usePlatform } from "@/context/platform"
import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server"
import { checkServerHealth, type ServerHealth } from "@/utils/server-health"
-interface AddRowProps {
- value: string
- placeholder: string
- adding: boolean
- error: string
- status: boolean | undefined
- onChange: (value: string) => void
- onKeyDown: (event: KeyboardEvent) => void
- onBlur: () => void
-}
-
-interface EditRowProps {
+interface ServerFormProps {
value: string
+ name: string
+ username: string
+ password: string
placeholder: string
busy: boolean
error: string
status: boolean | undefined
onChange: (value: string) => void
- onKeyDown: (event: KeyboardEvent) => void
- onBlur: () => void
+ onNameChange: (value: string) => void
+ onUsernameChange: (value: string) => void
+ onPasswordChange: (value: string) => void
+ onSubmit: () => void
+ onBack: () => void
}
function showRequestError(language: ReturnType{value()}
}
-
-
- )
-}
+function ServerForm(props: ServerFormProps) {
+ const language = useLanguage()
+ const keyDown = (event: KeyboardEvent) => {
+ event.stopPropagation()
+ if (event.key === "Escape") {
+ event.preventDefault()
+ props.onBack()
+ return
+ }
+ if (event.key !== "Enter" || event.isComposing) return
+ event.preventDefault()
+ props.onSubmit()
+ }
-function EditRow(props: EditRowProps) {
return (
- {
- // Position relative to input-wrapper
- requestAnimationFrame(() => {
- const wrapper = el.parentElement?.querySelector('[data-slot="input-wrapper"]')
- if (wrapper instanceof HTMLElement) {
- wrapper.appendChild(el)
- }
- })
- }}
- />
-
- event.stopPropagation()}>
-
-
+ ,
addServer: {
url: "",
+ name: "",
+ username: "",
+ password: "",
adding: false,
error: "",
showForm: false,
@@ -187,6 +188,9 @@ export function DialogSelectServer() {
editServer: {
id: undefined as string | undefined,
value: "",
+ name: "",
+ username: "",
+ password: "",
error: "",
busy: false,
status: undefined as boolean | undefined,
@@ -196,27 +200,32 @@ export function DialogSelectServer() {
const resetAdd = () => {
setStore("addServer", {
url: "",
+ name: "",
+ username: "",
+ password: "",
+ adding: false,
error: "",
showForm: false,
status: undefined,
})
}
-
const resetEdit = () => {
setStore("editServer", {
id: undefined,
value: "",
+ name: "",
+ username: "",
+ password: "",
error: "",
status: undefined,
busy: false,
})
}
- const replaceServer = (original: ServerConnection.Http, next: string) => {
+ const replaceServer = (original: ServerConnection.Http, next: ServerConnection.Http) => {
const active = server.key
const newConn = server.add(next)
if (!newConn) return
-
const nextActive = active === ServerConnection.key(original) ? ServerConnection.key(newConn) : active
if (nextActive) server.setActive(nextActive)
server.remove(ServerConnection.key(original))
@@ -271,8 +280,8 @@ export function DialogSelectServer() {
async function select(conn: ServerConnection.Any, persist?: boolean) {
if (!persist && store.status[ServerConnection.key(conn)]?.healthy === false) return
dialog.close()
- if (persist) {
- server.add(conn.http.url)
+ if (persist && conn.type === "http") {
+ server.add(conn)
navigate("/")
return
}
@@ -283,21 +292,59 @@ export function DialogSelectServer() {
const handleAddChange = (value: string) => {
if (store.addServer.adding) return
setStore("addServer", { url: value, error: "" })
- void previewStatus(value, (next) => setStore("addServer", { status: next }))
+ void previewStatus(value, store.addServer.username, store.addServer.password, (next) =>
+ setStore("addServer", { status: next }),
+ )
}
- const scrollListToBottom = () => {
- const scroll = listRoot?.querySelector('[data-slot="list-scroll"]')
- if (!scroll) return
- requestAnimationFrame(() => {
- scroll.scrollTop = scroll.scrollHeight
- })
+ const handleAddNameChange = (value: string) => {
+ if (store.addServer.adding) return
+ setStore("addServer", { name: value, error: "" })
+ }
+
+ const handleAddUsernameChange = (value: string) => {
+ if (store.addServer.adding) return
+ setStore("addServer", { username: value, error: "" })
+ void previewStatus(store.addServer.url, value, store.addServer.password, (next) =>
+ setStore("addServer", { status: next }),
+ )
+ }
+
+ const handleAddPasswordChange = (value: string) => {
+ if (store.addServer.adding) return
+ setStore("addServer", { password: value, error: "" })
+ void previewStatus(store.addServer.url, store.addServer.username, value, (next) =>
+ setStore("addServer", { status: next }),
+ )
}
const handleEditChange = (value: string) => {
if (store.editServer.busy) return
setStore("editServer", { value, error: "" })
- void previewStatus(value, (next) => setStore("editServer", { status: next }))
+ void previewStatus(value, store.editServer.username, store.editServer.password, (next) =>
+ setStore("editServer", { status: next }),
+ )
+ }
+
+ const handleEditNameChange = (value: string) => {
+ if (store.editServer.busy) return
+ setStore("editServer", { name: value, error: "" })
+ }
+
+ const handleEditUsernameChange = (value: string) => {
+ if (store.editServer.busy) return
+ setStore("editServer", { username: value, error: "" })
+ void previewStatus(store.editServer.value, value, store.editServer.password, (next) =>
+ setStore("editServer", { status: next }),
+ )
+ }
+
+ const handleEditPasswordChange = (value: string) => {
+ if (store.editServer.busy) return
+ setStore("editServer", { password: value, error: "" })
+ void previewStatus(store.editServer.value, store.editServer.username, value, (next) =>
+ setStore("editServer", { status: next }),
+ )
}
async function handleAdd(value: string) {
@@ -310,16 +357,22 @@ export function DialogSelectServer() {
setStore("addServer", { adding: true, error: "" })
- const result = await checkServerHealth({ url: normalized }, fetcher)
+ const conn: ServerConnection.Http = {
+ type: "http",
+ http: { url: normalized },
+ }
+ if (store.addServer.name.trim()) conn.displayName = store.addServer.name.trim()
+ if (store.addServer.username) conn.http.username = store.addServer.username
+ if (store.addServer.password) conn.http.password = store.addServer.password
+ const result = await checkServerHealth(conn.http, fetcher)
setStore("addServer", { adding: false })
-
if (!result.healthy) {
setStore("addServer", { error: language.t("dialog.server.add.error") })
return
}
resetAdd()
- await select({ type: "http", http: { url: normalized } }, true)
+ await select(conn, true)
}
async function handleEdit(original: ServerConnection.Any, value: string) {
@@ -330,53 +383,115 @@ export function DialogSelectServer() {
return
}
- if (normalized === original.http.url) {
+ const name = store.editServer.name.trim() || undefined
+ const username = store.editServer.username || undefined
+ const password = store.editServer.password || undefined
+ const existingName = original.displayName
+ if (
+ normalized === original.http.url &&
+ name === existingName &&
+ username === original.http.username &&
+ password === original.http.password
+ ) {
resetEdit()
return
}
setStore("editServer", { busy: true, error: "" })
- const result = await checkServerHealth({ url: normalized }, fetcher)
+ const conn: ServerConnection.Http = {
+ type: "http",
+ displayName: name,
+ http: { url: normalized, username, password },
+ }
+ const result = await checkServerHealth(conn.http, fetcher)
setStore("editServer", { busy: false })
-
if (!result.healthy) {
setStore("editServer", { error: language.t("dialog.server.add.error") })
return
}
-
- replaceServer(original, normalized)
+ if (normalized === original.http.url) {
+ server.add(conn)
+ } else {
+ replaceServer(original, conn)
+ }
resetEdit()
}
- const handleAddKey = (event: KeyboardEvent) => {
- event.stopPropagation()
- if (event.key !== "Enter" || event.isComposing) return
- event.preventDefault()
- handleAdd(store.addServer.url)
+ const mode = createMemo<"list" | "add" | "edit">(() => {
+ if (store.editServer.id) return "edit"
+ if (store.addServer.showForm) return "add"
+ return "list"
+ })
+
+ const editing = createMemo(() => {
+ if (!store.editServer.id) return
+ return items().find((x) => x.type === "http" && x.http.url === store.editServer.id)
+ })
+
+ const resetForm = () => {
+ resetAdd()
+ resetEdit()
}
- const blurAdd = () => {
- if (!store.addServer.url.trim()) {
- resetAdd()
- return
- }
- handleAdd(store.addServer.url)
+ const startAdd = () => {
+ resetEdit()
+ setStore("addServer", {
+ showForm: true,
+ url: "",
+ name: "",
+ username: "",
+ password: "",
+ error: "",
+ status: undefined,
+ })
}
- const handleEditKey = (event: KeyboardEvent, original: ServerConnection.Any) => {
- event.stopPropagation()
- if (event.key === "Escape") {
- event.preventDefault()
- resetEdit()
+ const startEdit = (conn: ServerConnection.Http) => {
+ resetAdd()
+ setStore("editServer", {
+ id: conn.http.url,
+ value: conn.http.url,
+ name: conn.displayName ?? "",
+ username: conn.http.username ?? "",
+ password: conn.http.password ?? "",
+ error: "",
+ status: store.status[ServerConnection.key(conn)]?.healthy,
+ busy: false,
+ })
+ }
+
+ const submitForm = () => {
+ if (mode() === "add") {
+ void handleAdd(store.addServer.url)
return
}
- if (event.key !== "Enter" || event.isComposing) return
- event.preventDefault()
- handleEdit(original, store.editServer.value)
+ const original = editing()
+ if (!original) return
+ void handleEdit(original, store.editServer.value)
}
+ const isFormMode = createMemo(() => mode() !== "list")
+ const isAddMode = createMemo(() => mode() === "add")
+ const formBusy = createMemo(() => (isAddMode() ? store.addServer.adding : store.editServer.busy))
+
+ const formTitle = createMemo(() => {
+ if (!isFormMode()) return language.t("dialog.server.title")
+ return (
+
+
)
@@ -174,11 +173,13 @@ export function DialogSelectServer() {
const fetcher = platform.fetch ?? globalThis.fetch
const { defaultUrl, canDefault, setDefault } = useDefaultServer(platform, language)
const { previewStatus } = useServerPreview(fetcher)
- let listRoot: HTMLDivElement | undefined
const [store, setStore] = createStore({
status: {} as Record
+
+
+
+
+ )
+ })
+
+ createEffect(() => {
+ if (!store.editServer.id) return
+ if (editing()) return
+ resetEdit()
+ })
+
async function handleRemove(url: ServerConnection.Key) {
server.remove(url)
if ((await platform.getDefaultServerUrl?.()) === url) {
@@ -385,9 +500,29 @@ export function DialogSelectServer() {
}
return (
-