diff --git a/packages/app/src/components/session/session-sortable-tab-v2.tsx b/packages/app/src/components/session/session-sortable-tab-v2.tsx
new file mode 100644
index 0000000000..e109e5d2ec
--- /dev/null
+++ b/packages/app/src/components/session/session-sortable-tab-v2.tsx
@@ -0,0 +1,74 @@
+import { createMemo, Show } from "solid-js"
+import type { JSX } from "solid-js"
+import { useSortable } from "@dnd-kit/solid/sortable"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { Tabs } from "@opencode-ai/ui/tabs"
+import { useFile } from "@/context/file"
+import { useLanguage } from "@/context/language"
+import { useCommand } from "@/context/command"
+import { FileVisual } from "./session-sortable-tab"
+
+export function SortableTabV2(props: {
+ tab: string
+ index: () => number
+ temporary?: boolean
+ onTabClose: (tab: string) => void
+ onTabDoubleClick?: (tab: string) => void
+}): JSX.Element {
+ const file = useFile()
+ const language = useLanguage()
+ const command = useCommand()
+ const closeTabKeybind = createMemo(() => command.keybindParts("tab.close"))
+ const sortable = useSortable({
+ get id() {
+ return props.tab
+ },
+ get index() {
+ return props.index()
+ },
+ })
+ const path = createMemo(() => file.pathFromTab(props.tab))
+ const content = createMemo(() => {
+ const value = path()
+ if (!value) return
+ return
+ })
+ return (
+
+
+
+ {language.t("common.closeTab")}
+ 0}>
+
+
+
+ }
+ placement="bottom"
+ gutter={10}
+ >
+ props.onTabClose(props.tab)}
+ aria-label={language.t("common.closeTab")}
+ />
+
+ }
+ hideCloseButton
+ onMiddleClick={() => props.onTabClose(props.tab)}
+ onDblClick={() => props.onTabDoubleClick?.(props.tab)}
+ >
+ {(value) => value()}
+
+
+
+ )
+}
diff --git a/packages/app/src/components/session/session-sortable-tab.tsx b/packages/app/src/components/session/session-sortable-tab.tsx
index f04228ca66..d78f392941 100644
--- a/packages/app/src/components/session/session-sortable-tab.tsx
+++ b/packages/app/src/components/session/session-sortable-tab.tsx
@@ -10,7 +10,7 @@ import { useFile } from "@/context/file"
import { useLanguage } from "@/context/language"
import { useCommand } from "@/context/command"
-export function FileVisual(props: { path: string; active?: boolean }): JSX.Element {
+export function FileVisual(props: { path: string; active?: boolean; temporary?: boolean }): JSX.Element {
return (
- {getFilename(props.path)}
+
+ {getFilename(props.path)}
+
)
}
-export function SortableTab(props: { tab: string; onTabClose: (tab: string) => void }): JSX.Element {
+export function SortableTab(props: {
+ tab: string
+ temporary?: boolean
+ onTabClose: (tab: string) => void
+ onTabDoubleClick?: (tab: string) => void
+}): JSX.Element {
const file = useFile()
const language = useLanguage()
const command = useCommand()
@@ -36,7 +43,7 @@ export function SortableTab(props: { tab: string; onTabClose: (tab: string) => v
const content = createMemo(() => {
const value = path()
if (!value) return
- return
+ return
})
return (
@@ -61,6 +68,7 @@ export function SortableTab(props: { tab: string; onTabClose: (tab: string) => v
}
hideCloseButton
onMiddleClick={() => props.onTabClose(props.tab)}
+ onDblClick={() => props.onTabDoubleClick?.(props.tab)}
>
{(value) => value()}
diff --git a/packages/app/src/components/session/session-sortable-terminal-tab-v2.tsx b/packages/app/src/components/session/session-sortable-terminal-tab-v2.tsx
new file mode 100644
index 0000000000..a27b29668e
--- /dev/null
+++ b/packages/app/src/components/session/session-sortable-terminal-tab-v2.tsx
@@ -0,0 +1,284 @@
+import type { JSX } from "solid-js"
+import { Show, createEffect, onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useSortable } from "@dnd-kit/solid/sortable"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Tabs } from "@opencode-ai/ui/tabs"
+import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+import { Icon } from "@opencode-ai/ui/icon"
+import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { isDefaultTitle as isDefaultTerminalTitle } from "@/context/terminal-title"
+import { useTerminal, type LocalPTY } from "@/context/terminal"
+import { useLanguage } from "@/context/language"
+import { focusTerminalById } from "@/pages/session/helpers"
+
+export function SortableTerminalTabV2(props: {
+ terminal: LocalPTY
+ index: () => number
+ newLayout: boolean
+ onClose?: () => void
+}): JSX.Element {
+ const terminal = useTerminal()
+ const language = useLanguage()
+ const sortable = useSortable({
+ get id() {
+ return props.terminal.id
+ },
+ get index() {
+ return props.index()
+ },
+ })
+ const [store, setStore] = createStore({
+ editing: false,
+ title: props.terminal.title,
+ menuOpen: false,
+ menuPosition: { x: 0, y: 0 },
+ blurEnabled: false,
+ })
+ let input: HTMLInputElement | undefined
+ let blurFrame: number | undefined
+ let editRequested = false
+
+ const isDefaultTitle = () => {
+ const number = props.terminal.titleNumber
+ if (!Number.isFinite(number) || number <= 0) return false
+ return isDefaultTerminalTitle(props.terminal.title, number)
+ }
+
+ const label = () => {
+ language.locale()
+ if (props.terminal.title && !isDefaultTitle()) return props.terminal.title
+
+ const number = props.terminal.titleNumber
+ if (Number.isFinite(number) && number > 0) return language.t("terminal.title.numbered", { number })
+ if (props.terminal.title) return props.terminal.title
+ return language.t("terminal.title")
+ }
+
+ const close = () => {
+ const count = terminal.all().length
+ void terminal.close(props.terminal.id)
+ if (count === 1) {
+ props.onClose?.()
+ }
+ }
+
+ const focus = () => {
+ if (store.editing) return
+ terminal.requestFocus(props.terminal.id)
+ terminal.open(props.terminal.id)
+ if (document.activeElement instanceof HTMLElement) document.activeElement.blur()
+ focusTerminalById(props.terminal.id)
+ const input = document.getElementById(`terminal-wrapper-${props.terminal.id}`)?.querySelector("textarea")
+ if (input === document.activeElement) terminal.consumeFocus(props.terminal.id)
+ }
+
+ const edit = (e?: Event) => {
+ if (e) {
+ e.stopPropagation()
+ e.preventDefault()
+ }
+
+ setStore("blurEnabled", false)
+ setStore("title", props.terminal.title)
+ setStore("editing", true)
+ }
+
+ const save = () => {
+ if (!store.blurEnabled) return
+
+ const value = store.title.trim()
+ if (value && value !== props.terminal.title) {
+ terminal.update({ id: props.terminal.id, title: value })
+ }
+ setStore("editing", false)
+ }
+
+ const keydown = (e: KeyboardEvent) => {
+ if (e.key === "Enter") {
+ e.preventDefault()
+ save()
+ return
+ }
+ if (e.key === "Escape") {
+ e.preventDefault()
+ setStore("editing", false)
+ }
+ }
+
+ const menu = (e: MouseEvent) => {
+ e.preventDefault()
+ setStore("menuPosition", { x: e.clientX, y: e.clientY })
+ setStore("menuOpen", true)
+ }
+
+ createEffect(() => {
+ if (!store.editing) return
+ if (!input) return
+ input.focus()
+ input.select()
+ if (blurFrame !== undefined) cancelAnimationFrame(blurFrame)
+ blurFrame = requestAnimationFrame(() => {
+ blurFrame = undefined
+ setStore("blurEnabled", true)
+ })
+ })
+
+ onCleanup(() => {
+ if (blurFrame === undefined) return
+ cancelAnimationFrame(blurFrame)
+ })
+
+ return (
+
+ }
+ >
+
+
+ {
+ // Switch on mousedown to shave the press-release delay off tab switches.
+ if (e.button !== 0) return
+ if (store.editing) return
+ focus()
+ }}
+ onClick={(e) => {
+ // Mouse navigation already happened on mousedown; detail 0 means keyboard activation.
+ if (e.detail > 0) return
+ focus()
+ }}
+ closeButton={
+ {
+ e.stopPropagation()
+ close()
+ }}
+ aria-label={language.t("terminal.close")}
+ />
+ }
+ hideCloseButton
+ onMiddleClick={close}
+ >
+
+ {label()}
+
+
+
+
+ setStore("title", e.currentTarget.value)}
+ onBlur={save}
+ onKeyDown={keydown}
+ onMouseDown={(e) => e.stopPropagation()}
+ class="bg-transparent border-none outline-none min-w-0 flex-1 p-0 text-[13px] leading-4 tracking-[-0.04px] text-v2-text-text-base [font-weight:440] [font-variation-settings:'slnt'_0] [font-variant-numeric:tabular-nums]"
+ />
+
+
+
+
+ {
+ if (!editRequested) return
+ e.preventDefault()
+ editRequested = false
+ requestAnimationFrame(() => edit())
+ }}
+ >
+ (editRequested = true)}>{language.t("common.rename")}
+ {language.t("common.close")}
+
+
+
+
+
+ )
+}
diff --git a/packages/app/src/components/settings-dialog.tsx b/packages/app/src/components/settings-dialog.tsx
index d2cc85c04e..46dd89ade8 100644
--- a/packages/app/src/components/settings-dialog.tsx
+++ b/packages/app/src/components/settings-dialog.tsx
@@ -4,7 +4,7 @@ import { useCommand } from "@/context/command"
import { useLanguage } from "@/context/language"
import { useDialog } from "@opencode-ai/ui/context/dialog"
-export function useSettingsDialog() {
+export function useSettingsDialog(defaultValue?: string) {
const dialog = useDialog()
const params = useParams<{ id?: string }>()
let run = 0
@@ -19,7 +19,7 @@ export function useSettingsDialog() {
const sessionID = params.id
void import("@/components/settings-v2").then((module) => {
if (dead || run !== current) return
- void dialog.show(() =>
)
+ void dialog.show(() =>
)
})
}
}
diff --git a/packages/app/src/components/settings-general.tsx b/packages/app/src/components/settings-general.tsx
index cbbf33d2b1..3beb97225a 100644
--- a/packages/app/src/components/settings-general.tsx
+++ b/packages/app/src/components/settings-general.tsx
@@ -5,6 +5,7 @@ import { Select } from "@opencode-ai/ui/select"
import { Switch } from "@opencode-ai/ui/switch"
import { TextField } from "@opencode-ai/ui/text-field"
import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { Tag } from "@opencode-ai/ui/v2/badge-v2"
import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
import { useDialog } from "@opencode-ai/ui/context/dialog"
import { useParams } from "@solidjs/router"
@@ -248,6 +249,50 @@ export const SettingsGeneral: Component = () => {
triggerVariant: "settings" as const,
})
+ const InterfaceSection = () => (
+
+
+
+ {language.t("settings.general.row.newInterface.title")}
+ {language.t("settings.general.row.newInterface.badge")}
+
+ }
+ description={language.t("settings.general.row.newInterface.description")}
+ >
+
+ {
+ settings.general.setNewLayoutDesigns(checked)
+ if (!checked) return
+ void import("@/components/settings-v2").then((module) => {
+ void dialog.show(() => )
+ })
+ }}
+ />
+
+
+
+
+ )
+
+ const InterfaceNoticeSection = () => (
+
+
+
+
+
+
+
+ )
+
const GeneralSection = () => (
@@ -334,24 +379,6 @@ export const SettingsGeneral: Component = () => {
/>
-
-
-
- {
- settings.general.setNewLayoutDesigns(checked)
- if (!checked) return
- void import("@/components/settings-v2").then((module) => {
- dialog.show(() => )
- })
- }}
- />
-
-
)
@@ -440,11 +467,6 @@ export const SettingsGeneral: Component = () => {
value={(o) => o.value}
label={(o) => o.label}
onSelect={(option) => option && theme.setColorScheme(option.value)}
- onHighlight={(option) => {
- if (!option) return
- theme.previewColorScheme(option.value)
- return () => theme.cancelPreview()
- }}
variant="secondary"
size="small"
triggerVariant="settings"
@@ -471,11 +493,6 @@ export const SettingsGeneral: Component = () => {
if (!option) return
theme.setTheme(option.id)
}}
- onHighlight={(option) => {
- if (!option) return
- theme.previewTheme(option.id)
- return () => theme.cancelPreview()
- }}
variant="secondary"
size="small"
triggerVariant="settings"
@@ -728,6 +745,14 @@ export const SettingsGeneral: Component = () => {