+
+ - x?.id}
+ items={() => {
+ language.locale()
+ return [{ id: CUSTOM_ID, name: customLabel() }, ...providers.all().values()]
+ }}
+ filterKeys={["id", "name"]}
+ groupBy={(x) => (popularProviders.includes(x.id) ? popularGroup() : otherGroup())}
+ sortBy={(a, b) => {
+ if (a.id === CUSTOM_ID) return -1
+ if (b.id === CUSTOM_ID) return 1
+ if (popularProviders.includes(a.id) && popularProviders.includes(b.id))
+ return popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id)
+ return a.name.localeCompare(b.name)
+ }}
+ sortGroupsBy={(a, b) => {
+ const popular = popularGroup()
+ if (a.category === popular && b.category !== popular) return -1
+ if (b.category === popular && a.category !== popular) return 1
+ return 0
+ }}
+ onSelect={(x) => {
+ if (!x) return
+ props.onSelect(x.id)
+ }}
+ >
+ {(i) => (
+
+
+
+
+ {language.t("settings.providers.tag.custom")}
+
+
+ {language.t("dialog.provider.tag.recommended")}
+
+ {(value) =>
+
+ {language.t("dialog.provider.tag.recommended")}
+
+
+ )}
+ {language.t("dialog.provider.opencode.tagline")}
+ {value()}
}
+
+ )
+}
+
+function ProviderConnection(props: {
+ provider: string
+ directory?: Accessor
+
+
+
+
+
+
+
+ )
+
+ return (
+ <>
+
+ {language.t("provider.connect.selectMethod", { provider: provider().name })}
+
+
+
+ {(item, index) => {
+ const details = () => methodDetails(item)
+ return (
+
+ )
+ }}
+
+
+
+ {language.t("provider.connect.selectMethod", { provider: provider().name })}
+
+
+
+
+ )
+ }
+
+ function ApiAuthView() {
+ let apiKey: HTMLInputElement | undefined
+ const errorID = createUniqueId()
+ const [formStore, setFormStore] = createStore({
+ value: "",
+ error: undefined as string | undefined,
+ })
+
+ onMount(() => {
+ if (!newLayout()) return
+ apiKey?.focus({ preventScroll: true })
+ })
+
+ async function handleSubmit(e: SubmitEvent) {
+ e.preventDefault()
+
+ const form = e.currentTarget as HTMLFormElement
+ const formData = new FormData(form)
+ const apiKey = formData.get("apiKey") as string
+
+ if (!apiKey?.trim()) {
+ setFormStore("error", language.t("provider.connect.apiKey.required"))
+ return
+ }
+
+ setFormStore("error", undefined)
+ await serverSDK().api.integration.connect.key({
+ integrationID: props.provider,
+ location: location(),
+ key: apiKey,
+ })
+ await complete()
+ }
+
+ if (newLayout())
+ return (
+ - {
+ listRef = ref
+ }}
+ items={methods}
+ key={(m) => m?.label ?? m?.type}
+ onSelect={async (selected, index) => {
+ if (!selected) return
+ void selectMethod(index)
+ }}
+ >
+ {(i) => (
+
+
+ )}
+
+
+
+ {methodLabel(i)}
+
+
+
+
+
+ )
+
+ return (
+
+
+ {language.t("provider.connect.opencodeZen.line1")}
+ {language.t("provider.connect.opencodeZen.line2")}
+
+ {language.t("provider.connect.opencodeZen.visit.prefix")}
+
+ {language.t("provider.connect.opencodeZen.visit.link")}
+
+ {language.t("provider.connect.opencodeZen.visit.suffix")}
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+ function OAuthCodeView() {
+ let codeInput: HTMLInputElement | undefined
+ const errorID = createUniqueId()
+ const [formStore, setFormStore] = createStore({
+ value: "",
+ error: undefined as string | undefined,
+ })
+
+ onMount(() => {
+ if (!newLayout()) return
+ codeInput?.focus({ preventScroll: true })
+ })
+
+ async function handleSubmit(e: SubmitEvent) {
+ e.preventDefault()
+
+ const form = e.currentTarget as HTMLFormElement
+ const formData = new FormData(form)
+ const code = formData.get("code") as string
+
+ if (!code?.trim()) {
+ setFormStore("error", language.t("provider.connect.oauth.code.required"))
+ return
+ }
+
+ setFormStore("error", undefined)
+ const result = await serverSDK()
+ .api.integration.oauth.complete({
+ integrationID: props.provider,
+ attemptID: store.authorization!.attemptID,
+ location: location(),
+ code,
+ })
+ .then(() => ({ ok: true as const }))
+ .catch((error) => ({ ok: false as const, error }))
+ if (result.ok) {
+ await complete()
+ return
+ }
+ setFormStore("error", formatError(result.error, language.t("provider.connect.oauth.code.invalid")))
+ }
+
+ if (newLayout())
+ return (
+
+
+ {language.t("provider.connect.opencodeZen.line1")}
+ {language.t("provider.connect.opencodeZen.line2")}
+
+ {language.t("provider.connect.opencodeZen.visit.prefix")}
+
+ {language.t("provider.connect.opencodeZen.visit.link")}
+
+ {language.t("provider.connect.opencodeZen.visit.suffix")}
+
+
+ {language.t("provider.connect.apiKey.description", { provider: provider().name })}
+
+
+
+ )
+
+ return (
+
+ {language.t("provider.connect.oauth.code.visit.prefix")}
+
+ {language.t("provider.connect.oauth.code.visit.link")}
+
+ {language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
+
+
+
+
+ )
+ }
+
+ function OAuthAutoView() {
+ const code = createMemo(() => {
+ const instructions = store.authorization?.instructions
+ if (instructions?.includes(":")) {
+ return instructions.split(":").pop()?.trim()
+ }
+ return instructions
+ })
+
+ onMount(() => {
+ const poll = async () => {
+ const authorization = store.authorization
+ if (!authorization || !alive.value) return
+ const result = await serverSDK()
+ .api.integration.oauth.status({
+ integrationID: props.provider,
+ attemptID: authorization.attemptID,
+ location: location(),
+ })
+ .then((value) => ({ ok: true as const, status: value.data }))
+ .catch((error) => ({ ok: false as const, error }))
+ if (!alive.value) return
+ if (!result.ok) {
+ dispatch({ type: "auth.error", error: formatError(result.error, language.t("common.requestFailed")) })
+ return
+ }
+ if (result.status.status === "complete") {
+ await complete()
+ return
+ }
+ if (result.status.status === "failed") {
+ dispatch({ type: "auth.error", error: result.status.message })
+ return
+ }
+ if (result.status.status === "expired") {
+ dispatch({ type: "auth.error", error: language.t("common.requestFailed") })
+ return
+ }
+ timer.current = setTimeout(poll, 1_000)
+ }
+ void poll()
+ })
+
+ return (
+
+ {language.t("provider.connect.oauth.code.visit.prefix")}
+
+ {language.t("provider.connect.oauth.code.visit.link")}
+
+ {language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
+
+
+
+
+ )
+ }
+
+ return (
+
+ {language.t("provider.connect.oauth.auto.visit.prefix")}
+
+ {language.t("provider.connect.oauth.auto.visit.link")}
+
+ {language.t("provider.connect.oauth.auto.visit.suffix", { provider: provider().name })}
+
+
+
+
+
+ )
+}
diff --git a/packages/app-bundle/overlay/packages/app/src/components/dialog-edit-project-v2.tsx b/packages/app-bundle/overlay/packages/app/src/components/dialog-edit-project-v2.tsx
new file mode 100644
index 00000000..d0eab418
--- /dev/null
+++ b/packages/app-bundle/overlay/packages/app/src/components/dialog-edit-project-v2.tsx
@@ -0,0 +1,156 @@
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
+import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"
+import { Field } from "@opencode-ai/ui/v2/field-v2"
+import { Icon } from "@opencode-ai/ui/v2/icon"
+import { ProjectAvatar, PROJECT_AVATAR_VARIANTS } from "@opencode-ai/ui/v2/project-avatar-v2"
+import { TextareaV2 } from "@opencode-ai/ui/v2/textarea-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { For, Show } from "solid-js"
+import { useLanguage } from "@/context/language"
+import { getProjectAvatarVariant, type LocalProject } from "@/context/layout"
+import { ServerConnection } from "@/context/server"
+import { getProjectAvatarSource } from "@/pages/layout/helpers"
+import { createEditProjectModel } from "./edit-project"
+
+export function DialogEditProjectV2(props: { project: LocalProject; server: ServerConnection.Any }) {
+ const language = useLanguage()
+ const model = createEditProjectModel(props)
+
+ return (
+
+ )
+}
diff --git a/packages/app-bundle/overlay/packages/app/src/components/dialog-edit-project.tsx b/packages/app-bundle/overlay/packages/app/src/components/dialog-edit-project.tsx
new file mode 100644
index 00000000..e2287821
--- /dev/null
+++ b/packages/app-bundle/overlay/packages/app/src/components/dialog-edit-project.tsx
@@ -0,0 +1,170 @@
+import { Button } from "@opencode-ai/ui/button"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { Icon } from "@opencode-ai/ui/icon"
+import { For, Show } from "solid-js"
+import { type LocalProject, getAvatarColors } from "@/context/layout"
+import { Avatar } from "@opencode-ai/ui/avatar"
+import { useLanguage } from "@/context/language"
+import { getProjectAvatarSource } from "@/pages/layout/helpers"
+import { ServerConnection } from "@/context/server"
+import { createEditProjectModel } from "./edit-project"
+
+const AVATAR_COLOR_KEYS = ["pink", "mint", "orange", "purple", "cyan", "lime"] as const
+
+export function DialogEditProject(props: { project: LocalProject; server: ServerConnection.Any }) {
+ const language = useLanguage()
+ const model = createEditProjectModel(props)
+
+ return (
+
+ )
+}
diff --git a/packages/app-bundle/overlay/packages/app/src/components/dialog-release-notes.tsx b/packages/app-bundle/overlay/packages/app/src/components/dialog-release-notes.tsx
new file mode 100644
index 00000000..b03660fe
--- /dev/null
+++ b/packages/app-bundle/overlay/packages/app/src/components/dialog-release-notes.tsx
@@ -0,0 +1,144 @@
+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 = {
+ title: string
+ description: string
+ media?: {
+ type: "image" | "video"
+ src: string
+ alt?: string
+ }
+}
+
+export function DialogReleaseNotes(props: { highlights: Highlight[] }) {
+ const dialog = useDialog()
+ const language = useLanguage()
+ const settings = useSettings()
+ const [index, setIndex] = createSignal(0)
+
+ const total = () => props.highlights.length
+ const last = () => Math.max(0, total() - 1)
+ const feature = () => props.highlights[index()] ?? props.highlights[last()]
+ const isFirst = () => index() === 0
+ const isLast = () => index() >= last()
+ const paged = () => total() > 1
+
+ function handleNext() {
+ if (isLast()) return
+ setIndex(index() + 1)
+ }
+
+ function handleClose() {
+ dialog.close()
+ }
+
+ function handleDisable() {
+ settings.general.setReleaseNotes(false)
+ handleClose()
+ }
+
+ function handleKeyDown(e: KeyboardEvent) {
+ if (e.key === "Escape") {
+ e.preventDefault()
+ handleClose()
+ return
+ }
+
+ if (!paged()) return
+ if (e.key === "ArrowLeft" && !isFirst()) {
+ e.preventDefault()
+ setIndex(index() - 1)
+ }
+ if (e.key === "ArrowRight" && !isLast()) {
+ e.preventDefault()
+ setIndex(index() + 1)
+ }
+ }
+
+ return (
+
+ )
+}
diff --git a/packages/app-bundle/overlay/packages/app/src/components/dialog-select-directory-v2.css b/packages/app-bundle/overlay/packages/app/src/components/dialog-select-directory-v2.css
new file mode 100644
index 00000000..7382b4f1
--- /dev/null
+++ b/packages/app-bundle/overlay/packages/app/src/components/dialog-select-directory-v2.css
@@ -0,0 +1,107 @@
+.directory-picker-v2-body {
+ display: flex;
+ min-height: 0;
+ flex: 1;
+ flex-direction: column;
+ gap: 12px;
+ padding: 2px 16px 0;
+}
+
+.directory-picker-v2-path {
+ position: relative;
+ z-index: 10;
+ display: flex;
+ gap: 8px;
+}
+
+.directory-picker-v2-actions {
+ display: flex;
+ flex-shrink: 0;
+ gap: 2px;
+}
+
+.directory-picker-v2-suggestions {
+ position: absolute;
+ z-index: 20;
+ top: 36px;
+ right: 0;
+ left: 0;
+ display: flex;
+ flex-direction: column;
+ padding: 4px;
+ border: 1px solid var(--v2-border-border-base);
+ border-radius: var(--radius-sm);
+ background: var(--v2-background-bg-layer-02);
+ box-shadow: var(--v2-elevation-overlay);
+}
+
+.directory-picker-v2-suggestions button {
+ overflow: hidden;
+ padding: 6px 8px;
+ border-radius: var(--radius-sm);
+ color: var(--v2-text-text-muted);
+ font-size: 12px;
+ text-align: left;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.directory-picker-v2-suggestions button:hover,
+.directory-picker-v2-suggestions button[data-active] {
+ color: var(--v2-text-text-base);
+ background: var(--v2-overlay-simple-overlay-hover);
+}
+
+.directory-picker-v2-browser {
+ position: relative;
+ z-index: 0;
+ isolation: isolate;
+ min-height: 0;
+ flex: 1;
+ overflow: auto;
+ border: 1px solid var(--v2-border-border-base);
+ border-radius: var(--radius-sm);
+ background: transparent;
+}
+
+.directory-picker-v2-tree {
+ display: block;
+ width: 100%;
+ height: 100%;
+ --trees-bg-override: transparent;
+ --trees-fg-override: var(--v2-text-text-base);
+ --trees-fg-muted-override: var(--v2-text-text-muted);
+ --trees-bg-muted-override: transparent;
+ --trees-selected-bg-override: transparent;
+ --trees-selected-fg-override: var(--v2-text-text-base);
+ --trees-selected-focused-border-color-override: transparent;
+ --trees-focus-ring-color-override: transparent;
+ --trees-focus-ring-width-override: 0px;
+ --trees-focus-ring-offset-override: 0px;
+ --trees-border-color-override: var(--v2-border-border-base);
+ --trees-font-family-override: var(--font-family-sans);
+ --trees-font-size-override: 12px;
+ --trees-item-height: 24px;
+ --trees-border-radius-override: 4px;
+}
+
+.directory-picker-v2-state {
+ position: absolute;
+ z-index: 1;
+ inset: 0;
+ display: grid;
+ place-items: center;
+ color: var(--v2-text-text-muted);
+ font-size: 12px;
+ pointer-events: none;
+}
+
+.directory-picker-v2-selection {
+ overflow: hidden;
+ flex-shrink: 0;
+ color: var(--v2-text-text-muted);
+ font-size: 12px;
+ line-height: 16px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
diff --git a/packages/app-bundle/overlay/packages/app/src/components/dialog-select-file.tsx b/packages/app-bundle/overlay/packages/app/src/components/dialog-select-file.tsx
new file mode 100644
index 00000000..d9ccaea5
--- /dev/null
+++ b/packages/app-bundle/overlay/packages/app/src/components/dialog-select-file.tsx
@@ -0,0 +1,189 @@
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Keybind } from "@opencode-ai/ui/keybind"
+import { List } from "@opencode-ai/ui/list"
+import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
+import { createMemo, createSignal, lazy, Match, Show, Switch } from "solid-js"
+import { formatKeybind } from "@/context/command"
+import { useServerSDK } from "@/context/server-sdk"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { useSettings } from "@/context/settings"
+import { useSessionLayout } from "@/pages/session/session-layout"
+import { decode64 } from "@/utils/base64"
+import { getRelativeTime } from "@/utils/time"
+import {
+ createCommandPaletteFileEntry,
+ createCommandPaletteFileOpener,
+ createCommandPaletteModel,
+ uniqueCommandPaletteEntries,
+ type CommandPaletteEntry,
+} from "./command-palette"
+import { DialogCommandPaletteV2 } from "./dialog-command-palette-v2"
+
+const DialogSelectFileV2 = lazy(() =>
+ import("./dialog-select-directory-v2").then((module) => ({ default: module.DialogSelectDirectoryV2 })),
+)
+type DialogSelectFileMode = "all" | "files"
+
+export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFile?: (path: string) => void }) {
+ const platform = usePlatform()
+ const settings = useSettings()
+ const filesOnly = () => props.mode === "files"
+
+ if (!filesOnly() && settings.general.newLayoutDesigns()) {
+ return
+
+
+
+
+ {language.t("provider.connect.title.anthropicProMax")}
+
+ {language.t("provider.connect.title", { provider: provider().name })}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + July 14 +
+
+
+ + Introducing Tabs +
+
+ 
+ 
+
+ OpenCode Desktop is now built around tabs.
++ Start a new session in a tab, or open an existing session from any of your projects. Open a new tab when + you're starting something new, and close it when you're done. +
++ Keeping a few tabs open makes it easier to organize your active sessions. Rename tabs to something + memorable if you plan to keep them around. +
++ You'll find all your sessions and projects on the new Home screen. Selecting a session opens it in a tab. +
+When you reopen the app, your tabs are still open.
++ The new design does not support Git Worktrees yet, it's coming soon. So if you'd prefer to continue using + the previous layout, you can switch between layouts in Settings. Just keep in mind that the new layout + will become permanent in a few weeks. +
+
+
+ {typeLabel(attachment.filename, attachment.mime)}
+
+
+ }
+ >
+ 
props.onOpen(attachment)}
+ />
+
+ )
+ const name = () => (
+
+
+ )
+ }}
+
+
+
+
+
+ {(item) => (
+
+
+
+ {(attachment) => {
+ const image = attachment.mime.startsWith("image/")
+ const media = () => (
+
+
+ }
+ >
+
+
+ props.onOpenComment?.(item)}
+ />
+
+
+
+ )}
+
+ {attachment.filename}
+
+ )
+ const remove = () => (
+
+ )
+ // v2 keeps the remove button outside the tooltip trigger so hovering it dismisses the tooltip
+ return (
+
+ {media()}
+ {name()}
+ {remove()}
+
+
+ }
+ >
+
+
+ {media()}
+
+
+
+
+ {remove()}
+
+ {
+ if (props.popover === "slash") props.setSlashPopoverRef(el)
+ }}
+ class="absolute inset-x-0 -top-2 -translate-y-full origin-bottom-left max-h-80 min-h-10
+ overflow-auto no-scrollbar flex flex-col p-2"
+ classList={{
+ "z-[70] rounded-md bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)]": props.newLayoutDesigns,
+ "rounded-lg bg-surface-raised-stronger-non-alpha shadow-[var(--shadow-lg-border-base)]":
+ !props.newLayoutDesigns,
+ }}
+ onMouseDown={(e) => e.preventDefault()}
+ >
+
+
+ 0}
+ fallback={
+
+ {(item) => {
+ const key = props.atKey(item)
+
+ if (item.type === "agent") {
+ return (
+
+ )
+ }
+
+ if (item.type === "resource") {
+ return (
+
+ )
+ }
+
+ if (item.type === "reference") {
+ return (
+
+ )
+ }
+
+ const isDirectory = item.path.endsWith("/")
+ const directory = isDirectory ? item.path : getDirectory(item.path)
+ const filename = isDirectory ? "" : getFilename(item.path)
+
+ return (
+
+ )
+ }}
+
+
+
+
+
+
+ 0}
+ fallback={
+
+ {(cmd) => {
+ const keybind = () => props.commandKeybind(cmd.id)
+ const keybindParts = () => props.commandKeybindParts(cmd.id)
+ return (
+
+ )
+ }}
+
+
+
+
+
+
+ {props.t("prompt.popover.emptyResults")}
+
+ }
+ >
+
+ requestAnimationFrame(() => el.focus())}
+ value={props.slashMenuQuery}
+ onInput={(event) => props.onSlashMenuInput(event.currentTarget.value)}
+ onKeyDown={props.onSlashMenuKeyDown}
+ onMouseDown={(event) => event.stopPropagation()}
+ aria-label={props.t("prompt.menu.commands")}
+ placeholder="/"
+ class="w-full bg-transparent outline-none text-[13px] leading-5 text-v2-text-text-base placeholder:text-v2-text-text-faint"
+ />
+
+
+ {props.t("prompt.popover.emptyCommands")}
+
+ }
+ >
+