-
-
-
-
-
-
-
- - 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. -
-
-
-
- {language.t("settings.general.row.newInterface.title")}
- {language.t("settings.general.row.newInterface.badge")}
-
- }
- description={language.t("settings.general.row.newInterface.description")}
- >
-
-
-
- )
-
- const InterfaceNoticeSection = () => (
-
- {
- settings.general.setNewLayoutDesigns(checked)
- if (!checked) return
- void import("@/components/settings-v2").then((module) => {
- void dialog.show(() =>
-
-
-
-
-
-
-
- )
-
- const GeneralSection = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-
- const AdvancedSection = () => (
-
-
-
- settings.general.setShowReasoningSummaries(checked)}
- />
-
-
- settings.general.setShellToolPartsExpanded(checked)}
- />
-
-
- settings.general.setEditToolPartsExpanded(checked)}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-
- const AppearanceSection = () => (
- {language.t("settings.general.section.advanced")}
- -
- settings.general.setShowFileTree(checked)}
- />
-
-
- settings.general.setShowNavigation(checked)}
- />
-
-
- settings.general.setShowSearch(checked)}
- />
-
-
- settings.general.setShowStatus(checked)}
- />
-
-
- settings.general.setShowCustomAgents(checked)}
- />
-
-
-
-
-
-
-
- {language.t("settings.general.row.theme.description")}{" "}
- {language.t("common.learnMore")}
-
- }
- >
-
-
-
-
-
-
-
-
-
-
-
-
- )
-
- const NotificationsSection = () => (
- {language.t("settings.general.section.appearance")}
- -
- settings.appearance.setUIFont(value)}
- placeholder={sansDefault}
- spellcheck={false}
- autocorrect="off"
- autocomplete="off"
- autocapitalize="off"
- class="text-12-regular"
- style={{ "font-family": sansFontFamily(settings.appearance.uiFont()) }}
- />
-
-
- settings.appearance.setFont(value)}
- placeholder={monoDefault}
- spellcheck={false}
- autocorrect="off"
- autocomplete="off"
- autocapitalize="off"
- class="text-12-regular"
- style={{ "font-family": monoFontFamily(settings.appearance.font()) }}
- />
-
-
- settings.appearance.setTerminalFont(value)}
- placeholder={terminalDefault}
- spellcheck={false}
- autocorrect="off"
- autocomplete="off"
- autocapitalize="off"
- class="text-12-regular"
- style={{ "font-family": terminalFontFamily(settings.appearance.terminalFont()) }}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-
- const SoundsSection = () => (
- {language.t("settings.general.section.notifications")}
- -
- settings.notifications.setAgent(checked)}
- />
-
-
- settings.notifications.setPermissions(checked)}
- />
-
-
- settings.notifications.setErrors(checked)}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-
- const UpdatesSection = () => (
- {language.t("settings.general.section.sounds")}
- -
-
-
-
-
-
-
-
-
-
- )
-
- const DisplaySection = () => (
- {language.t("settings.general.section.updates")}
- -
- settings.general.setReleaseNotes(checked)}
- />
-
-
-
-
-
-
-
-
- {language.t("settings.general.row.wayland.title")}
-
-
-
-
- }
- description={language.t("settings.general.row.wayland.description")}
- >
- {language.t("settings.general.section.display")}
- -
-
-
-
-
-
-
- )
-}
diff --git a/packages/app/src/components/settings-models.tsx b/packages/app/src/components/settings-models.tsx
deleted file mode 100644
index f3d9e1522f..0000000000
--- a/packages/app/src/components/settings-models.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import { useFilteredList } from "@opencode-ai/ui/hooks"
-import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
-import { Switch } from "@opencode-ai/ui/switch"
-import { Icon } from "@opencode-ai/ui/icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { TextField } from "@opencode-ai/ui/text-field"
-import { type Component, For, Show } from "solid-js"
-import { useLanguage } from "@/context/language"
-import { useModels } from "@/context/models"
-import { popularProviders } from "@/hooks/use-providers"
-import { SettingsList } from "./settings-list"
-import { SettingsServerPicker, SettingsServerScope } from "./settings-server-picker"
-
-type ModelItem = ReturnType
- {props.title}
- {props.description}
-
- {props.children}
-
- {props.label}
-
- )
-}
-
-const ListEmptyState: Component<{ message: string; filter: string }> = (props) => {
- return (
-
- {props.message}
-
- "{props.filter}"
-
-
- )
-}
-
-export const SettingsModels: Component = () => {
- return (
-
-
-
-
-
-
-
setState("checked", checked)}
- />
-
- )
-}
-
-function NoticeExample() {
- const [state, setState] = createStore({ dismissed: false })
- return (
-
- Notice dismissed}>
- setState("dismissed", true)}
- />
-
-
- )
-}
-
-export default {
- title: "App/Settings/Layout transition",
- id: "app-settings-layout-transition",
- component: LayoutTransitionToggle,
-}
-
-export const NewLayoutEnabled = {
- render: () => | string | null, previousVersion: string | undefined) {
- return settings !== null || previousVersion !== undefined
-}
-
-export function shouldEnableNewLayout(previous: string | undefined, current: string | undefined) {
- if (!current) return false
- const currentComparison = compareVersions(current, newLayoutDesignsUpgradeCutoff)
- if (!previous) return currentComparison !== undefined && currentComparison > 0
- if (!isAppUpgrade(previous, current)) return false
- const previousComparison = compareVersions(previous, newLayoutDesignsUpgradeCutoff)
- return (
- previousComparison !== undefined &&
- currentComparison !== undefined &&
- previousComparison <= 0 &&
- currentComparison > 0
- )
-}
-
-export function layoutTransitionState(scheduled: boolean, eligible: boolean, retired: boolean, dismissed: boolean) {
- return {
- available: scheduled && eligible && !retired,
- notice: scheduled && eligible && retired && !dismissed,
- }
-}
-
-export const maximumSunsetTimeout = 2_147_483_647
-
-export function nextSunsetCheckDelay(sunset: number, now: number) {
- return Math.min(Math.max(0, sunset - now), maximumSunsetTimeout)
-}
-
-export function resolveNewLayoutDesigns(retired: boolean, preference: boolean | undefined, fallback = true) {
- if (retired) return true
- return preference ?? fallback
-}
-
const monoFallback =
'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
const sansFallback = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
@@ -223,17 +149,7 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
name: "Settings",
gate: false,
init: () => {
- const platform = usePlatform()
- const [store, setStore, settingsInit, ready] = persisted("settings.v3", createStore(defaultSettings))
- const [launch, setLaunch, , launchReady] = persisted(
- "app-version.v1",
- createStore<{ version?: string }>({ version: undefined }),
- )
- const [launchState, setLaunchState] = createStore({
- classified: false,
- migrationApplied: false,
- previous: undefined as string | undefined,
- })
+ const [store, setStore, , ready] = persisted("settings.v3", createStore(defaultSettings))
const showFileTree = withFallback(() => store.general?.showFileTree, defaultSettings.general.showFileTree)
const showSearch = withFallback(() => store.general?.showSearch, defaultSettings.general.showSearch)
const showStatus = withFallback(() => store.general?.showStatus, defaultSettings.general.showStatus)
@@ -241,93 +157,6 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
() => store.general?.showCustomAgents,
defaultSettings.general.showCustomAgents,
)
- const sunset = oldInterfaceSunset
- const [oldInterfaceRetired, setOldInterfaceRetired] = createSignal(sunset ? Date.now() >= sunset.getTime() : false)
- const layoutTransitionClassified = createMemo(() => typeof store.general?.layoutTransitionEligible === "boolean")
- const layoutTransitionEligible = withFallback(() => store.general?.layoutTransitionEligible, false)
- const newInterfaceNoticeDismissed = withFallback(() => store.general?.newInterfaceNoticeDismissed, false)
- const layoutUpgrade = createMemo(() =>
- launchState.classified && !launchState.migrationApplied
- ? shouldEnableNewLayout(launchState.previous, platform.version)
- : false,
- )
- const layoutTransition = createMemo(() =>
- layoutTransitionState(!!sunset, layoutTransitionEligible(), oldInterfaceRetired(), newInterfaceNoticeDismissed()),
- )
- const newLayoutDesigns = createMemo(() => {
- if (layoutUpgrade()) return true
- if (!ready() && !oldInterfaceRetired()) return legacyNewLayoutDesignsDefault
- if (!layoutTransitionClassified()) {
- return resolveNewLayoutDesigns(
- oldInterfaceRetired(),
- store.general?.newLayoutDesigns,
- legacyNewLayoutDesignsDefault,
- )
- }
- return resolveNewLayoutDesigns(
- oldInterfaceRetired(),
- store.general?.newLayoutDesigns,
- layoutTransitionEligible() ? legacyNewLayoutDesignsDefault : newLayoutDesignsDefault,
- )
- })
- const visible = (preference: () => boolean) => createMemo(() => !newLayoutDesigns() || preference())
-
- if (sunset && !oldInterfaceRetired()) {
- const timeout = { current: undefined as ReturnType | undefined }
- const checkSunset = () => {
- if (Date.now() >= sunset.getTime()) {
- setOldInterfaceRetired(true)
- return
- }
- timeout.current = setTimeout(checkSunset, nextSunsetCheckDelay(sunset.getTime(), Date.now()))
- }
- checkSunset()
- onCleanup(() => {
- if (timeout.current !== undefined) clearTimeout(timeout.current)
- })
- }
-
- createEffect(() => {
- if (!launchReady() || launchState.classified) return
- setLaunchState({
- classified: true,
- previous: launch.version,
- })
- if (!platform.version || launch.version === platform.version) return
- setLaunch("version", platform.version)
- })
-
- createEffect(() => {
- if (!ready() || !launchState.classified || platform.platform !== "web") return
- if (layoutTransitionClassified()) return
- setStore("general", "layoutTransitionEligible", hasExistingWebState(settingsInit, launchState.previous))
- })
-
- createEffect(() => {
- if (!ready() || !launchState.classified || launchState.migrationApplied) return
- if (layoutUpgrade() && store.general?.newLayoutDesigns !== true) {
- setStore("general", "newLayoutDesigns", true)
- }
- setLaunchState("migrationApplied", true)
- })
-
- createEffect(() => {
- if (!ready() || !launchState.classified) return
- if (typeof store.general?.shouldDisplayTabsToast === "boolean") return
- if (!launchState.previous && !layoutTransitionClassified()) return
- setStore(
- "general",
- "shouldDisplayTabsToast",
- shouldDisplayTabsToast(launchState.previous, platform.version, layoutTransitionEligible()),
- )
- })
-
- createEffect(() => {
- if (!ready() || !oldInterfaceRetired()) return
- if (store.general?.newLayoutDesigns === true) return
- setStore("general", "newLayoutDesigns", true)
- })
-
createEffect(() => {
if (typeof document === "undefined") return
const root = document.documentElement
@@ -413,34 +242,13 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
setMobileTitlebarPosition(value: "top" | "bottom") {
setStore("general", "mobileTitlebarPosition", value)
},
- newLayoutDesigns,
- setNewLayoutDesigns(value: boolean) {
- const next = oldInterfaceRetired() ? true : value
- if (newLayoutDesigns() === next) return
- setStore("general", "newLayoutDesigns", next)
- if (typeof window !== "undefined") setTimeout(() => window.location.reload())
- },
- layoutTransitionClassified,
- setOldLayoutEligible(eligible: boolean) {
- const current = store.general?.layoutTransitionEligible
- if (typeof current === "boolean") return
- setStore("general", "layoutTransitionEligible", eligible)
- },
- layoutTransitionAvailable: createMemo(() => ready() && layoutTransition().available),
- newInterfaceNoticeVisible: createMemo(() => ready() && layoutTransition().notice),
- dismissNewInterfaceNotice() {
- setStore("general", "newInterfaceNoticeDismissed", true)
- },
- shouldDisplayTabsToast: withFallback(() => store.general?.shouldDisplayTabsToast, false),
- dismissTabsToast() {
- setStore("general", "shouldDisplayTabsToast", false)
- },
+ newLayoutDesigns: () => true,
},
visibility: {
- fileTree: visible(showFileTree),
- search: visible(showSearch),
- status: visible(showStatus),
- customAgents: visible(showCustomAgents),
+ fileTree: showFileTree,
+ search: showSearch,
+ status: showStatus,
+ customAgents: showCustomAgents,
},
appearance: {
fontSize: withFallback(() => store.appearance?.fontSize, defaultSettings.appearance.fontSize),
diff --git a/packages/app/src/pages/home.tsx b/packages/app/src/pages/home.tsx
index 4fadb8a68f..443169aa0e 100644
--- a/packages/app/src/pages/home.tsx
+++ b/packages/app/src/pages/home.tsx
@@ -8,7 +8,7 @@ import { createHomeSessionSearchController } from "./home/home-session-search-co
import { createHomeSessionsController } from "./home/home-sessions-controller"
import { HomeSessions } from "./home/home-sessions"
-export function NewHome() {
+export function Home() {
const home = createHomeController()
const projects = createHomeProjectsController(home)
const sessions = createHomeSessionsController(home)
diff --git a/packages/app/src/pages/home/legacy-home.tsx b/packages/app/src/pages/home/legacy-home.tsx
deleted file mode 100644
index 0556f7cf60..0000000000
--- a/packages/app/src/pages/home/legacy-home.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { DialogSelectServer } from "@/components/dialog-select-server"
-import { useDirectoryPicker } from "@/components/directory-picker"
-import { useGlobal } from "@/context/global"
-import { useLanguage } from "@/context/language"
-import { type ServerConnection, useServer } from "@/context/server"
-import { useServerSync } from "@/context/server-sync"
-import { base64Encode } from "@opencode-ai/core/util/encode"
-import { Button } from "@opencode-ai/ui/button"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Icon } from "@opencode-ai/ui/icon"
-import { Logo } from "@opencode-ai/ui/logo"
-import { useNavigate } from "@solidjs/router"
-import { DateTime } from "luxon"
-import { createMemo, For, Match, Switch } from "solid-js"
-
-export function LegacyHome() {
- const sync = useServerSync()
- const pickDirectory = useDirectoryPicker()
- const dialog = useDialog()
- const navigate = useNavigate()
- const global = useGlobal()
- const server = useServer()
- const language = useLanguage()
- const homedir = createMemo(() => sync().data.path.home)
- const serverUnreachable = createMemo(() => global.servers.health[server.key]?.healthy === false)
- const recent = createMemo(() => {
- return sync()
- .data.project.slice()
- .sort((a, b) => (b.time.updated ?? b.time.created) - (a.time.updated ?? a.time.created))
- .slice(0, 5)
- })
-
- const serverDotClass = createMemo(() => {
- const healthy = global.servers.health[server.key]?.healthy
- if (healthy === true) return "bg-icon-success-base"
- if (healthy === false) return "bg-icon-critical-base"
- return "bg-border-weak-base"
- })
-
- function openProject(conn: ServerConnection.Any, directory: string) {
- const serverCtx = global.ensureServerCtx(conn)
- serverCtx.projects.open(directory)
- serverCtx.projects.touch(directory)
- navigate(`/${base64Encode(directory)}`)
- }
-
- function chooseProject() {
- if (serverUnreachable()) return
- const conn = server.current
- if (!conn) return
-
- const resolve = (result: string | string[] | null) => {
- if (Array.isArray(result)) {
- result.forEach((directory) => openProject(conn, directory))
- return
- }
- if (result) openProject(conn, result)
- }
-
- pickDirectory({
- server: conn,
- title: language.t("command.project.open"),
- multiple: true,
- onSelect: resolve,
- })
- }
-
- return (
- ,
- workspaceName: {} as Record,
- workspaceBranchName: {} as Record>,
- workspaceExpanded: {} as Record,
- gettingStartedDismissed: false,
- }),
- )
-
- const pageReady = createMemo(() => ready())
-
- let scrollContainerRef: HTMLDivElement | undefined
- let dialogRun = 0
- let dialogDead = false
-
- const params = useParams()
- const serverSync = useServerSync()
- const layout = useLayout()
- const layoutReady = createMemo(() => layout.ready())
+export default function Layout(props: ParentProps) {
const platform = usePlatform()
- const pickDirectory = useDirectoryPicker()
- const settings = useSettings()
- const server = useServer()
- const notification = useNotification()
- const permission = usePermission()
const navigate = useNavigate()
setNavigate(navigate)
- const providers = useProviders(() => undefined)
- const dialog = useDialog()
- const command = useCommand()
- const theme = useTheme()
- const language = useLanguage()
- createEffect(() => setV2Toast(false))
- const initialDirectory = decode64(params.dir)
- const route = createMemo(() => {
- const slug = params.dir
- if (!slug) return { slug, dir: "" }
- const dir = decode64(slug)
- if (!dir) return { slug, dir: "" }
- const store = serverSync().peek(dir, { bootstrap: false })
- return {
- slug,
- store,
- dir: store[0].path.directory || dir,
- }
- })
- const availableThemeEntries = createMemo(() => theme.ids().map((id) => [id, theme.themes()[id]] as const))
- const colorSchemeOrder: ColorScheme[] = ["system", "light", "dark"]
- const colorSchemeKey: Record = {
- system: "theme.scheme.system",
- light: "theme.scheme.light",
- dark: "theme.scheme.dark",
- }
- const colorSchemeLabel = (scheme: ColorScheme) => language.t(colorSchemeKey[scheme])
- const currentDir = createMemo(() => route().dir)
+ const [state, setState] = createStore({ debugTools: true })
- const [state, setState] = createStore({
- autoselect: !initialDirectory,
- busyWorkspaces: {} as Record,
- hoverProject: undefined as string | undefined,
- scrollSessionKey: undefined as string | undefined,
- nav: undefined as HTMLElement | undefined,
- sortNow: Date.now(),
- sizing: false,
- peek: undefined as string | undefined,
- peeked: false,
- debugTools: true,
- })
+ createEffect(() => setV2Toast(true))
- const updateVersion = () => {
- const state = platform.updater?.state()
- if (state?.status !== "ready") return
- return state.version
- }
- const installUpdate = () => void platform.updater?.install()
- const titlebarUpdate: TitlebarUpdate = {
- version: updateVersion,
+ const update: TitlebarUpdate = {
+ version: () => {
+ const state = platform.updater?.state()
+ if (state?.status !== "ready") return
+ return state.version
+ },
installing: () => platform.updater?.state().status === "installing",
- install: installUpdate,
+ install: () => void platform.updater?.install(),
}
- const editor = createInlineEditorController()
- const setBusy = (directory: string, value: boolean) => {
- const key = pathKey(directory)
- if (value) {
- setState("busyWorkspaces", key, true)
- return
- }
- setState(
- "busyWorkspaces",
- produce((draft) => {
- delete draft[key]
- }),
- )
- }
- const isBusy = (directory: string) => !!state.busyWorkspaces[pathKey(directory)]
- const navLeave = { current: undefined as number | undefined }
- const sortNow = () => state.sortNow
- let sizet: number | undefined
- let sortNowInterval: ReturnType | undefined
- const sortNowTimeout = setTimeout(
- () => {
- setState("sortNow", Date.now())
- sortNowInterval = setInterval(() => setState("sortNow", Date.now()), 60_000)
- },
- 60_000 - (Date.now() % 60_000),
- )
-
- const aim = createAim({
- enabled: () => !layout.sidebar.opened(),
- active: () => state.hoverProject,
- el: () => state.nav?.querySelector("[data-component='sidebar-rail']") ?? state.nav,
- onActivate: (directory) => {
- serverSync().child(directory)
- setState("hoverProject", directory)
- },
- })
-
- onCleanup(() => {
- dialogDead = true
- dialogRun += 1
- if (navLeave.current !== undefined) clearTimeout(navLeave.current)
- clearTimeout(sortNowTimeout)
- if (sortNowInterval) clearInterval(sortNowInterval)
- if (sizet !== undefined) clearTimeout(sizet)
- if (peekt !== undefined) clearTimeout(peekt)
- aim.reset()
- })
-
- onMount(() => {
- const stop = () => setState("sizing", false)
- const blur = () => reset()
- const hide = () => {
- if (document.visibilityState !== "hidden") return
- reset()
- }
- makeEventListener(window, "pointerup", stop)
- makeEventListener(window, "pointercancel", stop)
- makeEventListener(window, "blur", stop)
- makeEventListener(window, "blur", blur)
- makeEventListener(document, "visibilitychange", hide)
- })
-
- const sidebarHovering = createMemo(() => !layout.sidebar.opened() && state.hoverProject !== undefined)
- const sidebarExpanded = createMemo(() => layout.sidebar.opened() || sidebarHovering())
- const setHoverProject = (value: string | undefined) => {
- setState("hoverProject", value)
- if (value !== undefined) return
- aim.reset()
- }
- const clearHoverProjectSoon = () => queueMicrotask(() => setHoverProject(undefined))
-
- const disarm = () => {
- if (navLeave.current === undefined) return
- clearTimeout(navLeave.current)
- navLeave.current = undefined
- }
-
- const reset = () => {
- disarm()
- setHoverProject(undefined)
- }
-
- const arm = () => {
- if (layout.sidebar.opened()) return
- if (state.hoverProject === undefined) return
- disarm()
- navLeave.current = window.setTimeout(() => {
- navLeave.current = undefined
- setHoverProject(undefined)
- }, 300)
- }
-
- let peekt: number | undefined
-
- const hoverProjectData = createMemo(() => {
- const id = state.hoverProject
- if (!id) return
- return layout.projects.list().find((project) => project.worktree === id)
- })
-
- const peekProject = createMemo(() => {
- const id = state.peek
- if (!id) return
- return layout.projects.list().find((project) => project.worktree === id)
- })
-
- createEffect(() => {
- const p = hoverProjectData()
- if (p) {
- if (peekt !== undefined) {
- clearTimeout(peekt)
- peekt = undefined
- }
- setState("peek", p.worktree)
- setState("peeked", true)
- return
- }
-
- setState("peeked", false)
- if (state.peek === undefined) return
- if (peekt !== undefined) clearTimeout(peekt)
- peekt = window.setTimeout(() => {
- peekt = undefined
- setState("peek", undefined)
- }, 180)
- })
-
- createEffect(() => {
- if (!layout.sidebar.opened()) return
- setHoverProject(undefined)
- })
-
- createEffect(() => {
- if (!state.autoselect) return
- const dir = params.dir
- if (!dir) return
- const directory = decode64(dir)
- if (!directory) return
- setState("autoselect", false)
- })
-
- const editorOpen = editor.editorOpen
- const openEditor = editor.openEditor
- const closeEditor = editor.closeEditor
- const setEditor = editor.setEditor
- const InlineEditor = editor.InlineEditor
-
- const clearSidebarHoverState = () => {
- if (layout.sidebar.opened()) return
- reset()
- }
-
- const navigateWithSidebarReset = (href: string) => {
- clearSidebarHoverState()
- navigate(href)
- layout.mobileSidebar.hide()
- }
-
- function cycleTheme(direction = 1) {
- const ids = availableThemeEntries().map(([id]) => id)
- if (ids.length === 0) return
- const currentIndex = ids.indexOf(theme.themeId())
- const nextIndex = currentIndex === -1 ? 0 : (currentIndex + direction + ids.length) % ids.length
- const nextThemeId = ids[nextIndex]
- theme.setTheme(nextThemeId)
- showToast({
- title: language.t("toast.theme.title"),
- description: theme.name(nextThemeId),
- })
- }
-
- function cycleColorScheme(direction = 1) {
- const current = theme.colorScheme()
- const currentIndex = colorSchemeOrder.indexOf(current)
- const nextIndex =
- currentIndex === -1 ? 0 : (currentIndex + direction + colorSchemeOrder.length) % colorSchemeOrder.length
- const next = colorSchemeOrder[nextIndex]
- theme.setColorScheme(next)
- showToast({
- title: language.t("toast.scheme.title"),
- description: colorSchemeLabel(next),
- })
- }
-
- function setLocale(next: Locale) {
- if (next === language.locale()) return
- language.setLocale(next)
- showToast({
- title: language.t("toast.language.title"),
- description: language.t("toast.language.description", { language: language.label(next) }),
- })
- }
-
- function cycleLanguage(direction = 1) {
- const locales = language.locales
- const currentIndex = locales.indexOf(language.locale())
- const nextIndex = currentIndex === -1 ? 0 : (currentIndex + direction + locales.length) % locales.length
- const next = locales[nextIndex]
- if (!next) return
- setLocale(next)
- }
-
- const useSDKNotificationToasts = () =>
- onMount(() => {
- const toastBySession = new Map()
- const alertedAtBySession = new Map()
- const cooldownMs = 5000
-
- const dismissSessionAlert = (sessionKey: string) => {
- const toastId = toastBySession.get(sessionKey)
- if (toastId === undefined) return
- toaster.dismiss(toastId)
- toastBySession.delete(sessionKey)
- alertedAtBySession.delete(sessionKey)
- }
-
- const unsub = serverSDK().event.listen((e) => {
- if (
- e.details?.type === "question.replied" ||
- e.details?.type === "question.rejected" ||
- e.details?.type === "permission.replied"
- ) {
- const props = e.details.properties as { sessionID: string }
- const sessionKey = `${e.name}:${props.sessionID}`
- dismissSessionAlert(sessionKey)
- return
- }
-
- if (e.details?.type !== "permission.asked" && e.details?.type !== "question.asked") return
- const title =
- e.details.type === "permission.asked"
- ? language.t("notification.permission.title")
- : language.t("notification.question.title")
- const icon = e.details.type === "permission.asked" ? ("checklist" as const) : ("bubble-5" as const)
- const directory = e.name
- const props = e.details.properties
- if (e.details.type === "permission.asked" && permission.autoResponds(e.details.properties, directory)) return
-
- const [store] = serverSync().child(directory, { bootstrap: false })
- const session = store.session.find((s) => s.id === props.sessionID)
- const sessionKey = `${directory}:${props.sessionID}`
-
- const sessionTitle = session?.title ?? language.t("command.session.new")
- const projectName = getFilename(directory)
- const description =
- e.details.type === "permission.asked"
- ? language.t("notification.permission.description", { sessionTitle, projectName })
- : language.t("notification.question.description", { sessionTitle, projectName })
- const href = `/${base64Encode(directory)}/session/${props.sessionID}`
-
- const now = Date.now()
- const lastAlerted = alertedAtBySession.get(sessionKey) ?? 0
- if (now - lastAlerted < cooldownMs) return
- alertedAtBySession.set(sessionKey, now)
-
- if (e.details.type === "permission.asked") {
- if (settings.sounds.permissionsEnabled()) {
- void playSoundById(settings.sounds.permissions())
- }
- if (settings.notifications.permissions()) {
- void platform.notify(title, description, href)
- }
- }
-
- if (e.details.type === "question.asked") {
- if (settings.notifications.agent()) {
- void platform.notify(title, description, href)
- }
- }
-
- const currentSession = params.id
- if (pathKey(directory) === pathKey(currentDir()) && props.sessionID === currentSession) return
- if (pathKey(directory) === pathKey(currentDir()) && session?.parentID === currentSession) return
-
- dismissSessionAlert(sessionKey)
-
- const toastId = showToast({
- persistent: true,
- icon,
- title,
- description,
- actions: [
- {
- label: language.t("notification.action.goToSession"),
- onClick: () => navigate(href),
- },
- {
- label: language.t("common.dismiss"),
- onClick: "dismiss",
- },
- ],
- })
- toastBySession.set(sessionKey, toastId)
- })
- onCleanup(unsub)
-
- createEffect(() => {
- const currentSession = params.id
- if (!currentDir() || !currentSession) return
- const sessionKey = `${currentDir()}:${currentSession}`
- dismissSessionAlert(sessionKey)
- const [store] = serverSync().child(currentDir(), { bootstrap: false })
- const childSessions = store.session.filter((s) => s.parentID === currentSession)
- for (const child of childSessions) {
- dismissSessionAlert(`${currentDir()}:${child.id}`)
- }
- })
- })
-
- useSDKNotificationToasts()
-
- function scrollToSession(sessionId: string, sessionKey: string) {
- if (!scrollContainerRef) return
- if (state.scrollSessionKey === sessionKey) return
- const element = scrollContainerRef.querySelector(`[data-session-id="${sessionId}"]`)
- if (!element) return
- const containerRect = scrollContainerRef.getBoundingClientRect()
- const elementRect = element.getBoundingClientRect()
- if (elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom) {
- setState("scrollSessionKey", sessionKey)
- return
- }
- setState("scrollSessionKey", sessionKey)
- element.scrollIntoView({ block: "nearest", behavior: "smooth" })
- }
-
- const currentProject = createMemo(() => {
- const directory = currentDir()
- if (!directory) return
- const key = pathKey(directory)
-
- const projects = layout.projects.list()
-
- const sandbox = projects.find((p) => p.sandboxes?.some((item) => pathKey(item) === key))
- if (sandbox) return sandbox
-
- const direct = projects.find((p) => pathKey(p.worktree) === key)
- if (direct) return direct
-
- const [child] = serverSync().child(directory, { bootstrap: false })
- const id = child.project
- if (!id) return
-
- const meta = serverSync().data.project.find((p) => p.id === id)
- const root = meta?.worktree
- if (!root) return
-
- return projects.find((p) => p.worktree === root)
- })
-
- const [autoselecting] = createResource(async () => {
- await ready.promise
- await layout.ready.promise
- if (!untrack(() => state.autoselect)) return
-
- const list = layout.projects.list()
- const last = server.projects.last()
-
- if (list.length === 0) {
- if (!last) return
- await openProject(last, true)
- } else {
- const next = list.find((project) => project.worktree === last) ?? list[0]
- if (!next) return
- await openProject(next.worktree, true)
- }
- })
-
- const workspaceName = (directory: string, projectId?: string, branch?: string) => {
- const key = pathKey(directory)
- const direct = store.workspaceName[key] ?? store.workspaceName[directory]
- if (direct) return direct
- if (!projectId) return
- if (!branch) return
- return store.workspaceBranchName[projectId]?.[branch]
- }
-
- const setWorkspaceName = (directory: string, next: string, projectId?: string, branch?: string) => {
- const key = pathKey(directory)
- setStore("workspaceName", key, next)
- if (!projectId) return
- if (!branch) return
- if (!store.workspaceBranchName[projectId]) {
- setStore("workspaceBranchName", projectId, {})
- }
- setStore("workspaceBranchName", projectId, branch, next)
- }
-
- const workspaceLabel = (directory: string, branch?: string, projectId?: string) =>
- workspaceName(directory, projectId, branch) ?? branch ?? getFilename(directory)
-
- const workspaceSetting = createMemo(() => {
- const project = currentProject()
- if (!project) return false
- if (project.vcs !== "git") return false
- return layout.sidebar.workspaces(project.worktree)()
- })
-
- const visibleSessionDirs = createMemo(() => {
- const project = currentProject()
- if (!project) return [] as string[]
- if (!workspaceSetting()) return [project.worktree]
-
- const activeDir = currentDir()
- return workspaceIds(project).filter((directory) => {
- const expanded = store.workspaceExpanded[directory] ?? directory === project.worktree
- const active = pathKey(directory) === pathKey(activeDir)
- return expanded || active
- })
- })
-
- createEffect(() => {
- if (!pageReady()) return
- if (!layoutReady()) return
- const projects = layout.projects.list()
- for (const [directory, expanded] of Object.entries(store.workspaceExpanded)) {
- if (!expanded) continue
- const key = pathKey(directory)
- const project = projects.find(
- (item) => pathKey(item.worktree) === key || item.sandboxes?.some((sandbox) => pathKey(sandbox) === key),
- )
- if (!project) continue
- if (project.vcs === "git" && layout.sidebar.workspaces(project.worktree)()) continue
- setStore("workspaceExpanded", directory, false)
- }
- })
-
- const currentSessions = createMemo(() => {
- const now = Date.now()
- const dirs = visibleSessionDirs()
- if (dirs.length === 0) return [] as Session[]
-
- const result: Session[] = []
- for (const dir of dirs) {
- const [dirStore] = serverSync().child(dir, { bootstrap: true })
- const dirSessions = sortedRootSessions(dirStore, now)
- result.push(...dirSessions)
- }
- return result
- })
-
- type PrefetchQueue = {
- inflight: Set
- pending: string[]
- pendingSet: Set
- running: number
- }
-
- const prefetchChunk = 200
- const prefetchConcurrency = 2
- const prefetchPendingLimit = 10
- const span = 4
- const prefetchToken = { value: 0 }
- const prefetchQueues = new Map()
-
- const PREFETCH_MAX_SESSIONS_PER_DIR = 10
- const prefetchedByDir = new Map>()
-
- const lruFor = (directory: string) => {
- const existing = prefetchedByDir.get(directory)
- if (existing) return existing
- const created = new Set()
- prefetchedByDir.set(directory, created)
- return created
- }
-
- const markPrefetched = (directory: string, sessionID: string) => {
- const lru = lruFor(directory)
- return pickSessionCacheEvictions({
- seen: lru,
- keep: sessionID,
- limit: PREFETCH_MAX_SESSIONS_PER_DIR,
- preserve: params.id && pathKey(directory) === pathKey(currentDir()) ? [params.id] : undefined,
- })
- }
-
- createEffect(() => {
- const active = new Set(visibleSessionDirs())
- for (const directory of prefetchedByDir.keys()) {
- if (active.has(directory)) continue
- prefetchedByDir.delete(directory)
- }
- })
-
- createEffect(() => {
- route()
- serverSDK().url
-
- prefetchToken.value += 1
- prefetchQueues.clear()
- })
-
- createEffect(() => {
- const visible = new Set(visibleSessionDirs())
- for (const [directory, q] of prefetchQueues) {
- if (visible.has(directory)) continue
- q.pending.length = 0
- q.pendingSet.clear()
- if (q.running === 0) prefetchQueues.delete(directory)
- }
- })
-
- const queueFor = (directory: string) => {
- const existing = prefetchQueues.get(directory)
- if (existing) return existing
-
- const created: PrefetchQueue = {
- inflight: new Set(),
- pending: [],
- pendingSet: new Set(),
- running: 0,
- }
- prefetchQueues.set(directory, created)
- return created
- }
-
- async function prefetchMessages(directory: string, sessionID: string, token: number) {
- await serverSync()
- .session.prefetch(sessionID, prefetchChunk)
- .catch(() => {})
- if (prefetchToken.value !== token) return
- for (const stale of markPrefetched(directory, sessionID)) serverSync().session.evict(stale)
- }
-
- const pumpPrefetch = (directory: string) => {
- const q = queueFor(directory)
- if (q.running >= prefetchConcurrency) return
-
- const sessionID = q.pending.shift()
- if (!sessionID) return
-
- q.pendingSet.delete(sessionID)
- q.inflight.add(sessionID)
- q.running += 1
-
- const token = prefetchToken.value
-
- void prefetchMessages(directory, sessionID, token).finally(() => {
- q.running -= 1
- q.inflight.delete(sessionID)
- pumpPrefetch(directory)
- })
- }
-
- const prefetchSession = (session: Session, priority: "high" | "low" = "low") => {
- const directory = session.directory
- if (!directory) return
-
- const cached = untrack(() => !serverSync().session.shouldPrefetch(session.id, prefetchChunk))
- if (cached) return
-
- const q = queueFor(directory)
- if (q.inflight.has(session.id)) return
- if (q.pendingSet.has(session.id)) {
- if (priority !== "high") return
- const index = q.pending.indexOf(session.id)
- if (index > 0) {
- q.pending.splice(index, 1)
- q.pending.unshift(session.id)
- }
- return
- }
-
- const lru = lruFor(directory)
- const known = lru.has(session.id)
- if (!known && lru.size >= PREFETCH_MAX_SESSIONS_PER_DIR && priority !== "high") return
-
- if (priority === "high") q.pending.unshift(session.id)
- if (priority !== "high") q.pending.push(session.id)
- q.pendingSet.add(session.id)
-
- while (q.pending.length > prefetchPendingLimit) {
- const dropped = q.pending.pop()
- if (!dropped) continue
- q.pendingSet.delete(dropped)
- }
-
- pumpPrefetch(directory)
- }
-
- const warm = (sessions: Session[], index: number) => {
- for (let offset = 1; offset <= span; offset++) {
- const next = sessions[index + offset]
- if (next) prefetchSession(next, offset === 1 ? "high" : "low")
-
- const prev = sessions[index - offset]
- if (prev) prefetchSession(prev, offset === 1 ? "high" : "low")
- }
- }
-
- createEffect(() => {
- const sessions = currentSessions()
- if (sessions.length === 0) return
-
- const index = params.id ? sessions.findIndex((s) => s.id === params.id) : 0
- if (index === -1) return
-
- if (!params.id) {
- const first = sessions[index]
- if (first) prefetchSession(first, "high")
- }
-
- warm(sessions, index)
- })
-
- function navigateSessionByOffset(offset: number) {
- const sessions = currentSessions()
- if (sessions.length === 0) return
-
- const sessionIndex = params.id ? sessions.findIndex((s) => s.id === params.id) : -1
-
- let targetIndex: number
- if (sessionIndex === -1) {
- targetIndex = offset > 0 ? 0 : sessions.length - 1
- } else {
- targetIndex = (sessionIndex + offset + sessions.length) % sessions.length
- }
-
- const session = sessions[targetIndex]
- if (!session) return
-
- prefetchSession(session, "high")
- warm(sessions, targetIndex)
-
- navigateToSession(session)
- }
-
- function navigateProjectByOffset(offset: number) {
- const projects = layout.projects.list()
- if (projects.length === 0) return
-
- const current = currentProject()?.worktree
- const fallback = currentDir() ? projectRoot(currentDir()) : undefined
- const active = current ?? fallback
- const index = active ? projects.findIndex((project) => project.worktree === active) : -1
-
- const target =
- index === -1
- ? offset > 0
- ? projects[0]
- : projects[projects.length - 1]
- : projects[(index + offset + projects.length) % projects.length]
- if (!target) return
-
- // warm up child store to prevent flicker
- serverSync().child(target.worktree)
- void openProject(target.worktree)
- }
-
- function navigateToProjectIndex(index: number) {
- const projects = layout.projects.list()
- const target = projects[index]
- if (!target) return
-
- serverSync().child(target.worktree)
- void openProject(target.worktree)
- }
-
- function navigateSessionByUnseen(offset: number) {
- const sessions = currentSessions()
- if (sessions.length === 0) return
-
- const hasUnseen = sessions.some((session) => notification.session.unseenCount(session.id) > 0)
- if (!hasUnseen) return
-
- const activeIndex = params.id ? sessions.findIndex((s) => s.id === params.id) : -1
- const start = activeIndex === -1 ? (offset > 0 ? -1 : 0) : activeIndex
-
- for (let i = 1; i <= sessions.length; i++) {
- const index = offset > 0 ? (start + i) % sessions.length : (start - i + sessions.length) % sessions.length
- const session = sessions[index]
- if (!session) continue
- if (notification.session.unseenCount(session.id) === 0) continue
-
- prefetchSession(session, "high")
- warm(sessions, index)
-
- navigateToSession(session)
- return
- }
- }
-
- async function archiveSession(session: Session) {
- // TODO: Restore archiving when the V2 client exposes a session archive API.
- void session
- return
- const [store, setStore] = serverSync().child(session.directory)
- const sessions = store.session ?? []
- const index = sessions.findIndex((s) => s.id === session.id)
- const nextSession = sessions[index + 1] ?? sessions[index - 1]
-
- setStore(
- produce((draft) => {
- const match = Binary.search(draft.session, session.id, (s) => s.id)
- if (match.found) draft.session.splice(match.index, 1)
- }),
- )
- if (session.id === params.id) {
- if (nextSession) {
- navigate(`/${params.dir}/session/${nextSession.id}`)
- } else {
- navigate(`/${params.dir}/session`)
- }
- }
- }
-
- command.register("layout", () => {
- const commands: CommandOption[] = [
- {
- id: "sidebar.toggle",
- title: language.t("command.sidebar.toggle"),
- category: language.t("command.category.view"),
- keybind: "mod+b",
- onSelect: () => layout.sidebar.toggle(),
- },
- {
- id: "project.open",
- title: language.t("command.project.open"),
- category: language.t("command.category.project"),
- keybind: "mod+o",
- onSelect: () => chooseProject(),
- },
- {
- id: "project.previous",
- title: language.t("command.project.previous"),
- category: language.t("command.category.project"),
- keybind: "mod+alt+arrowup",
- onSelect: () => navigateProjectByOffset(-1),
- },
- {
- id: "project.next",
- title: language.t("command.project.next"),
- category: language.t("command.category.project"),
- keybind: "mod+alt+arrowdown",
- onSelect: () => navigateProjectByOffset(1),
- },
- {
- id: "provider.connect",
- title: language.t("command.provider.connect"),
- category: language.t("command.category.provider"),
- onSelect: () => connectProvider(),
- },
- {
- id: "server.switch",
- title: language.t("command.server.switch"),
- category: language.t("command.category.server"),
- onSelect: () => openServer(),
- },
- {
- id: "settings.open",
- title: language.t("command.settings.open"),
- category: language.t("command.category.settings"),
- keybind: "mod+comma",
- onSelect: () => openSettings(),
- },
- {
- id: "session.previous",
- title: language.t("command.session.previous"),
- category: language.t("command.category.session"),
- keybind: "alt+arrowup",
- onSelect: () => navigateSessionByOffset(-1),
- },
- {
- id: "session.next",
- title: language.t("command.session.next"),
- category: language.t("command.category.session"),
- keybind: "alt+arrowdown",
- onSelect: () => navigateSessionByOffset(1),
- },
- {
- id: "session.previous.unseen",
- title: language.t("command.session.previous.unseen"),
- category: language.t("command.category.session"),
- keybind: "shift+alt+arrowup",
- onSelect: () => navigateSessionByUnseen(-1),
- },
- {
- id: "session.next.unseen",
- title: language.t("command.session.next.unseen"),
- category: language.t("command.category.session"),
- keybind: "shift+alt+arrowdown",
- onSelect: () => navigateSessionByUnseen(1),
- },
- {
- id: "session.archive",
- title: language.t("command.session.archive"),
- category: language.t("command.category.session"),
- keybind: "mod+shift+backspace",
- // TODO: Restore the command when the V2 client exposes session archive.
- disabled: true,
- onSelect: () => {
- const session = currentSessions().find((s) => s.id === params.id)
- if (session) void archiveSession(session)
- },
- },
- {
- id: "workspace.new",
- title: language.t("workspace.new"),
- category: language.t("command.category.workspace"),
- keybind: "mod+shift+w",
- disabled: !workspaceSetting(),
- onSelect: () => {
- const project = currentProject()
- if (!project) return
- return createWorkspace(project)
- },
- },
- {
- id: "workspace.toggle",
- title: language.t("command.workspace.toggle"),
- description: language.t("command.workspace.toggle.description"),
- category: language.t("command.category.workspace"),
- slash: "workspace",
- disabled: !currentProject() || currentProject()?.vcs !== "git",
- onSelect: () => {
- const project = currentProject()
- if (!project) return
- if (project.vcs !== "git") return
- const wasEnabled = layout.sidebar.workspaces(project.worktree)()
- layout.sidebar.toggleWorkspaces(project.worktree)
- showToast({
- title: wasEnabled
- ? language.t("toast.workspace.disabled.title")
- : language.t("toast.workspace.enabled.title"),
- description: wasEnabled
- ? language.t("toast.workspace.disabled.description")
- : language.t("toast.workspace.enabled.description"),
- })
- },
- },
- {
- id: "theme.cycle",
- title: language.t("command.theme.cycle"),
- category: language.t("command.category.theme"),
- keybind: "mod+shift+t",
- onSelect: () => cycleTheme(1),
- },
- ]
-
- Array.from({ length: 9 }, (_, i) => {
- const index = i
- const number = index + 1
- commands.push({
- id: `project.${number}`,
- category: language.t("command.category.project"),
- title: `Open Project {number}`,
- keybind: `mod+${number}`,
- disabled: layout.projects.list().length <= index,
- hidden: true,
- onSelect: () => navigateToProjectIndex(index),
- })
- })
-
- for (const [id] of availableThemeEntries()) {
- commands.push({
- id: `theme.set.${id}`,
- title: language.t("command.theme.set", { theme: theme.name(id) }),
- category: language.t("command.category.theme"),
- onSelect: () => theme.commitPreview(),
- onHighlight: () => {
- theme.previewTheme(id)
- return () => theme.cancelPreview()
- },
- })
- }
-
- commands.push({
- id: "theme.scheme.cycle",
- title: language.t("command.theme.scheme.cycle"),
- category: language.t("command.category.theme"),
- keybind: "mod+shift+s",
- onSelect: () => cycleColorScheme(1),
- })
-
- for (const scheme of colorSchemeOrder) {
- commands.push({
- id: `theme.scheme.${scheme}`,
- title: language.t("command.theme.scheme.set", { scheme: colorSchemeLabel(scheme) }),
- category: language.t("command.category.theme"),
- onSelect: () => theme.commitPreview(),
- onHighlight: () => {
- theme.previewColorScheme(scheme)
- return () => theme.cancelPreview()
- },
- })
- }
-
- commands.push({
- id: "language.cycle",
- title: language.t("command.language.cycle"),
- category: language.t("command.category.language"),
- onSelect: () => cycleLanguage(1),
- })
-
- for (const locale of language.locales) {
- commands.push({
- id: `language.set.${locale}`,
- title: language.t("command.language.set", { language: language.label(locale) }),
- category: language.t("command.category.language"),
- onSelect: () => setLocale(locale),
- })
- }
-
- return commands
- })
-
- function connectProvider() {
- const run = ++dialogRun
- void import("@/components/dialog-connect-provider").then((x) => {
- if (dialogDead || dialogRun !== run) return
- void dialog.show(() => ()
-
- createEffect(
- on(
- visibleSessionDirs,
- (dirs) => {
- if (dirs.length === 0) {
- loadedSessionDirs.clear()
- return
- }
-
- const next = new Set(dirs)
- for (const directory of next) {
- if (loadedSessionDirs.has(directory)) continue
- void serverSync().project.loadSessions(directory)
- }
-
- loadedSessionDirs.clear()
- for (const directory of next) {
- loadedSessionDirs.add(directory)
- }
- },
- { defer: true },
- ),
- )
-
- function handleDragStart(event: unknown) {
- const id = getDraggableId(event)
- if (!id) return
- setHoverProject(undefined)
- setStore("activeProject", id)
- }
-
- function handleDragOver(event: DragEvent) {
- const { draggable, droppable } = event
- if (draggable && droppable) {
- const projects = layout.projects.list()
- const fromIndex = projects.findIndex((p) => p.worktree === draggable.id.toString())
- const toIndex = projects.findIndex((p) => p.worktree === droppable.id.toString())
- if (fromIndex !== toIndex && toIndex !== -1) {
- layout.projects.move(draggable.id.toString(), toIndex)
- }
- }
- }
-
- function handleDragEnd() {
- setStore("activeProject", undefined)
- }
-
- function workspaceIds(project: LocalProject | undefined) {
- if (!project) return []
- const local = project.worktree
- const dirs = [local, ...(project.sandboxes ?? [])]
- const active = currentProject()
- const directory = pathKey(active?.worktree ?? "") === pathKey(project.worktree) ? currentDir() : undefined
- const extra =
- directory && pathKey(directory) !== pathKey(local) && !dirs.some((item) => pathKey(item) === pathKey(directory))
- ? directory
- : undefined
- const pending = extra ? WorktreeState.get(serverSDK().scope, extra)?.status === "pending" : false
-
- const ordered = effectiveWorkspaceOrder(local, dirs, store.workspaceOrder[project.worktree])
- if (pending && extra) return [local, extra, ...ordered.filter((item) => item !== local)]
- if (!extra) return ordered
- if (pending) return ordered
- return [...ordered, extra]
- }
-
- const sidebarProject = createMemo(() => {
- if (layout.sidebar.opened()) return currentProject()
- const hovered = hoverProjectData()
- if (hovered) return hovered
- return currentProject()
- })
-
- function handleWorkspaceDragStart(event: unknown) {
- const id = getDraggableId(event)
- if (!id) return
- setStore("activeWorkspace", id)
- }
-
- function handleWorkspaceDragOver(event: DragEvent) {
- const { draggable, droppable } = event
- if (!draggable || !droppable) return
-
- const project = sidebarProject()
- if (!project) return
-
- const ids = workspaceIds(project)
- const fromIndex = ids.findIndex((dir) => dir === draggable.id.toString())
- const toIndex = ids.findIndex((dir) => dir === droppable.id.toString())
- if (fromIndex === -1 || toIndex === -1) return
- if (fromIndex === toIndex) return
-
- const result = ids.slice()
- const [item] = result.splice(fromIndex, 1)
- if (!item) return
- result.splice(toIndex, 0, item)
- setStore(
- "workspaceOrder",
- project.worktree,
- result.filter((directory) => pathKey(directory) !== pathKey(project.worktree)),
- )
- }
-
- function handleWorkspaceDragEnd() {
- setStore("activeWorkspace", undefined)
- }
-
- const createWorkspace = async (project: LocalProject) => {
- clearSidebarHoverState()
- const created = project.id
- ? await serverSDK()
- .api.projectCopy.create({
- projectID: project.id,
- strategy: "git_worktree",
- directory: getDirectory(project.worktree),
- location: { directory: project.worktree },
- })
- .catch((err) => {
- showToast({
- title: language.t("workspace.create.failed.title"),
- description: errorMessage(err, language.t("common.requestFailed")),
- })
- return undefined
- })
- : undefined
-
- if (!created?.directory) return
-
- setWorkspaceName(created.directory, getFilename(created.directory), project.id)
-
- const local = project.worktree
- const key = pathKey(created.directory)
- const root = pathKey(local)
-
- setBusy(created.directory, true)
- WorktreeState.pending(serverSDK().scope, created.directory)
- setStore("workspaceExpanded", key, true)
- if (key !== created.directory) {
- setStore("workspaceExpanded", created.directory, true)
- }
- setStore("workspaceOrder", project.worktree, (prev) => {
- const existing = prev ?? []
- const next = existing.filter((item) => {
- const id = pathKey(item)
- return id !== root && id !== key
- })
- return [created.directory, ...next]
- })
-
- serverSync().child(created.directory)
- navigateWithSidebarReset(`/${base64Encode(created.directory)}/session`)
- }
-
- const workspaceSidebarCtx: WorkspaceSidebarContext = {
- currentDir,
- navList: currentSessions,
- sidebarExpanded,
- sidebarHovering,
- clearHoverProjectSoon,
- prefetchSession,
- archiveSession,
- workspaceName,
- renameWorkspace,
- editorOpen,
- openEditor,
- closeEditor,
- setEditor,
- InlineEditor,
- isBusy,
- workspaceExpanded: (directory, local) => store.workspaceExpanded[directory] ?? local,
- setWorkspaceExpanded: (directory, value) => setStore("workspaceExpanded", directory, value),
- showResetWorkspaceDialog: (root, directory) =>
- dialog.show(() =>
- mobile?: boolean
- merged?: boolean
- }) => {
- const project = panelProps.project
- const merged = createMemo(() => panelProps.mobile || (panelProps.merged ?? layout.sidebar.opened()))
- const hover = createMemo(() => !panelProps.mobile && panelProps.merged === false && !layout.sidebar.opened())
- const empty = createMemo(() => !params.dir && layout.projects.list().length === 0)
- const projectName = createMemo(() => {
- const item = project()
- if (!item) return ""
- return item.name || getFilename(item.worktree)
- })
- const projectId = createMemo(() => project()?.id ?? "")
- const worktree = createMemo(() => project()?.worktree ?? "")
- const slug = createMemo(() => {
- const dir = worktree()
- if (!dir) return ""
- return base64Encode(dir)
- })
- const workspaces = createMemo(() => {
- const item = project()
- if (!item) return [] as string[]
- return workspaceIds(item)
- })
- const unseenCount = createMemo(() =>
- workspaces().reduce((total, directory) => total + notification.project.unseenCount(directory), 0),
- )
- const clearNotifications = () =>
- workspaces()
- .filter((directory) => notification.project.unseenCount(directory) > 0)
- .forEach((directory) => notification.project.markViewed(directory))
- const workspacesEnabled = createMemo(() => {
- const item = project()
- if (!item) return false
- if (item.vcs !== "git") return false
- return layout.sidebar.workspaces(item.worktree)()
- })
- const canToggle = createMemo(() => {
- const item = project()
- if (!item) return false
- return item.vcs === "git" || layout.sidebar.workspaces(item.worktree)()
- })
- const homedir = createMemo(() => serverSync().data.path.home)
-
- return (
- store.activeProject} />
- const sidebarContent = (mobile?: boolean) => (
- layout.sidebar.opened()}
- aimMove={aim.move}
- projects={projects}
- renderProject={(project) => (
-
Ask anything...
{props.children}
-}
-
-function ToggleExample(props) {
- const [state, setState] = createStore({ checked: props.checked })
- return (
-
-
-
- ),
-}
diff --git a/packages/app/src/components/settings-v2/interface-transition.tsx b/packages/app/src/components/settings-v2/interface-transition.tsx
deleted file mode 100644
index 53bd980a54..0000000000
--- a/packages/app/src/components/settings-v2/interface-transition.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Tag } from "@opencode-ai/ui/v2/badge-v2"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Switch } from "@opencode-ai/ui/v2/switch-v2"
-import { SettingsListV2 } from "./parts/list"
-import { SettingsRowV2 } from "./parts/row"
-
-export function LayoutTransitionToggle(props: {
- title: string
- badge: string
- description: string
- checked: boolean
- onChange: (checked: boolean) => void
-}) {
- return (
-
-
- )
-}
-
-export function LayoutRetirementNotice(props: {
- title: string
- description: string
- dismiss: string
- onDismiss: () => void
-}) {
- return (
-
-
-
- {props.title}
- {props.badge}
-
- }
- description={props.description}
- >
-
-
-
-
-
-
-
-
-
- {props.dismiss}
-
-
-
-
- )
-}
diff --git a/packages/app/src/context/settings.test.ts b/packages/app/src/context/settings.test.ts
deleted file mode 100644
index 3f94f22ec3..0000000000
--- a/packages/app/src/context/settings.test.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import {
- hasExistingWebState,
- isAppUpgrade,
- layoutTransitionState,
- maximumSunsetTimeout,
- newLayoutDesignsDefault,
- nextSunsetCheckDelay,
- resolveNewLayoutDesigns,
- shouldDisplayTabsToast,
- shouldEnableNewLayout,
-} from "./settings"
-
-describe("layout transition", () => {
- test("blank profiles default to the new layout", () => {
- expect(newLayoutDesignsDefault).toBe(true)
- })
-
- test("hides the transition until a sunset is scheduled", () => {
- expect(layoutTransitionState(false, true, false, false)).toEqual({ available: false, notice: false })
- })
-
- test("existing profiles can switch before sunset", () => {
- expect(layoutTransitionState(true, true, false, false)).toEqual({ available: true, notice: false })
- })
-
- test("classifies web profiles from existing settings or a recorded version", () => {
- expect(hasExistingWebState("{}", undefined)).toBe(true)
- expect(hasExistingWebState(null, "1.17.19")).toBe(true)
- expect(hasExistingWebState(null, undefined)).toBe(false)
- })
-
- test("preserves explicit and default layout preferences", () => {
- expect(resolveNewLayoutDesigns(false, false, true)).toBe(false)
- expect(resolveNewLayoutDesigns(false, undefined, false)).toBe(false)
- expect(resolveNewLayoutDesigns(false, undefined, true)).toBe(true)
- })
-
- test("sunset replaces the toggle with a dismissible notice", () => {
- expect(layoutTransitionState(true, true, true, false)).toEqual({ available: false, notice: true })
- expect(layoutTransitionState(true, true, true, true)).toEqual({ available: false, notice: false })
- expect(resolveNewLayoutDesigns(true, false)).toBe(true)
- })
-
- test("caps checks for sunsets beyond the browser timeout limit", () => {
- expect(nextSunsetCheckDelay(maximumSunsetTimeout + 1_000, 0)).toBe(maximumSunsetTimeout)
- expect(nextSunsetCheckDelay(10_000, 9_000)).toBe(1_000)
- expect(nextSunsetCheckDelay(9_000, 10_000)).toBe(0)
- })
-
- test("enables the new layout when upgrading from 1.17.19 or earlier", () => {
- expect(shouldEnableNewLayout("v1.17.19", "1.17.20")).toBe(true)
- expect(shouldEnableNewLayout("1.16.9", "2.0.0")).toBe(true)
- })
-
- test("enables the new layout when no previous version was recorded", () => {
- expect(shouldEnableNewLayout(undefined, "1.17.20")).toBe(true)
- })
-
- test("detects upgrades only when a previous version is older", () => {
- expect(isAppUpgrade("1.17.19", "1.17.20")).toBe(true)
- expect(isAppUpgrade(undefined, "1.17.20")).toBe(false)
- expect(isAppUpgrade("1.17.20", "1.17.20")).toBe(false)
- expect(isAppUpgrade("1.17.21", "1.17.20")).toBe(false)
- })
-
- test("shows the tabs toast for upgrades and existing installs without a recorded version", () => {
- expect(shouldDisplayTabsToast("1.17.19", "1.17.20", false)).toBe(true)
- expect(shouldDisplayTabsToast(undefined, "1.17.20", true)).toBe(true)
- expect(shouldDisplayTabsToast(undefined, "1.17.20", false)).toBe(false)
- })
-
- test("does not enable the new layout without a qualifying upgrade", () => {
- expect(shouldEnableNewLayout("1.17.19", "1.17.19")).toBe(false)
- expect(shouldEnableNewLayout("1.17.20", "1.17.21")).toBe(false)
- expect(shouldEnableNewLayout(undefined, "1.17.19")).toBe(false)
- expect(shouldEnableNewLayout("dev", "1.17.20")).toBe(false)
- })
-})
diff --git a/packages/app/src/context/settings.tsx b/packages/app/src/context/settings.tsx
index fe8b4e3c03..6ecee88564 100644
--- a/packages/app/src/context/settings.tsx
+++ b/packages/app/src/context/settings.tsx
@@ -1,8 +1,7 @@
import { createStore, reconcile } from "solid-js/store"
-import { createEffect, createMemo, createSignal, onCleanup } from "solid-js"
+import { createEffect, createMemo } from "solid-js"
import { createSimpleContext } from "@opencode-ai/ui/context"
import { persisted } from "@/utils/persist"
-import { usePlatform } from "@/context/platform"
export interface NotificationSettings {
agent: boolean
@@ -34,10 +33,6 @@ export interface Settings {
editToolPartsExpanded: boolean
showCustomAgents: boolean
mobileTitlebarPosition: "top" | "bottom"
- newLayoutDesigns?: boolean
- layoutTransitionEligible?: boolean
- newInterfaceNoticeDismissed?: boolean
- shouldDisplayTabsToast?: boolean
}
appearance: {
fontSize: number
@@ -56,75 +51,6 @@ export interface Settings {
export const monoDefault = "System Mono"
export const sansDefault = "System Sans"
export const terminalDefault = "JetBrainsMono Nerd Font Mono"
-const legacyNewLayoutDesignsDefault = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"
-export const newLayoutDesignsDefault = true
-// Existing users can switch layouts until local midnight on this date. Set new Date(YYYY, M-1, D) to show.
-export const oldInterfaceSunset = new Date(2026, 8, 14)
-const newLayoutDesignsUpgradeCutoff = "1.17.19"
-
-function compareVersions(a: string, b: string) {
- const parse = (version: string) => {
- const match = /^v?(\d+)\.(\d+)\.(\d+)(?:[-+].*)?$/i.exec(version.trim())
- if (!match) return
- return match.slice(1).map(Number)
- }
- const left = parse(a)
- const right = parse(b)
- if (!left || !right) return
- const index = left.findIndex((part, index) => part !== right[index])
- return index === -1 ? 0 : left[index]! - right[index]!
-}
-
-export function isAppUpgrade(previous: string | undefined, current: string | undefined) {
- if (!previous || !current) return false
- const comparison = compareVersions(current, previous)
- return comparison !== undefined && comparison > 0
-}
-
-export function shouldDisplayTabsToast(
- previous: string | undefined,
- current: string | undefined,
- existingInstall: boolean,
-) {
- return isAppUpgrade(previous, current) || (!previous && existingInstall)
-}
-
-export function hasExistingWebState(settings: Promise
-
- 0}>
-
-
-
-
-
-
-
- )
-}
diff --git a/packages/app/src/pages/layout-new.tsx b/packages/app/src/pages/layout-new.tsx
deleted file mode 100644
index c6fed8f6d5..0000000000
--- a/packages/app/src/pages/layout-new.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { createEffect, Suspense, type ParentProps } from "solid-js"
-import { createStore } from "solid-js/store"
-import { useNavigate } from "@solidjs/router"
-import { DebugBar } from "@/components/debug-bar"
-import { TabsInfoPopup } from "@/components/help-button"
-import { Titlebar, type TitlebarUpdate } from "@/components/titlebar"
-import { usePlatform } from "@/context/platform"
-import { setNavigate } from "@/utils/notification-click"
-import { setV2Toast, ToastRegion } from "@/utils/toast"
-
-export default function NewLayout(props: ParentProps) {
- const platform = usePlatform()
- const navigate = useNavigate()
- setNavigate(navigate)
- const [state, setState] = createStore({ debugTools: true })
-
- createEffect(() => setV2Toast(true))
-
- const update: TitlebarUpdate = {
- version: () => {
- const state = platform.updater?.state()
- if (state?.status !== "ready") return
- return state.version
- },
- installing: () => platform.updater?.state().status === "installing",
- install: () => void platform.updater?.install(),
- }
-
- return (
-
-
-
-
- {language.t("home.recentProjects")}
-
- -
-
-
- {language.t("common.loading")}
-
-
-
-
-
-
- {language.t("home.empty.title")}
- {language.t("home.empty.description")}
-
- setState("debugTools", (value) => !value) }
- : undefined
- }
- />
-
- {props.children}
-
- {import.meta.env.DEV && state.debugTools &&
- )
-}
diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx
index 26ab0b3b45..154d711402 100644
--- a/packages/app/src/pages/layout.tsx
+++ b/packages/app/src/pages/layout.tsx
@@ -1,2417 +1,51 @@
-import {
- createEffect,
- createMemo,
- createResource,
- For,
- on,
- onCleanup,
- onMount,
- ParentProps,
- Show,
- untrack,
- type Accessor,
-} from "solid-js"
-import { makeEventListener } from "@solid-primitives/event-listener"
-import { useNavigate, useParams } from "@solidjs/router"
-import { useLayout, LocalProject } from "@/context/layout"
-import { useServerSync } from "@/context/server-sync"
-import { Persist, persisted } from "@/utils/persist"
-import { base64Encode } from "@opencode-ai/core/util/encode"
-import { decode64 } from "@/utils/base64"
-import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
-import { Button } from "@opencode-ai/ui/button"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
-import { Dialog } from "@opencode-ai/ui/dialog"
-import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
-import type { Session } from "@/types"
-import { usePlatform } from "@/context/platform"
-import { useSettings } from "@/context/settings"
-import { createStore, produce, reconcile } from "solid-js/store"
-import { DragDropProvider, DragDropSensors, DragOverlay, SortableProvider, closestCenter } from "@thisbeyond/solid-dnd"
-import type { DragEvent } from "@thisbeyond/solid-dnd"
-import { useProviders } from "@/hooks/use-providers"
-import { toaster } from "@opencode-ai/ui/toast"
-import { setV2Toast, showToast, ToastRegion } from "@/utils/toast"
-import { useServerSDK } from "@/context/server-sdk"
-import { normalizeProjectInfo } from "@/context/global-sync/utils"
-import { clearWorkspaceTerminals } from "@/context/terminal"
-import { pickSessionCacheEvictions } from "@/context/global-sync/session-cache"
-import { useNotification } from "@/context/notification"
-import { usePermission } from "@/context/permission"
-import { Binary } from "@opencode-ai/core/util/binary"
-import { retry } from "@opencode-ai/core/util/retry"
-import { playSoundById } from "@/utils/sound"
-import { createAim } from "@/utils/aim"
-import { setNavigate } from "@/utils/notification-click"
-import { Worktree as WorktreeState } from "@/utils/worktree"
-import { setSessionHandoff } from "@/pages/session/handoff"
-import { SessionRouteKey, SessionStateKey } from "@/utils/server-scope"
-import { listAllSessions } from "@/utils/session"
-
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
-import { useCommand, type CommandOption } from "@/context/command"
-import { ConstrainDragXAxis, getDraggableId } from "@/utils/solid-dnd"
+import { createEffect, Suspense, type ParentProps } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useNavigate } from "@solidjs/router"
import { DebugBar } from "@/components/debug-bar"
-import { TabsInfoPopup } from "@/components/help-button"
import { Titlebar, type TitlebarUpdate } from "@/components/titlebar"
-import { useDirectoryPicker } from "@/components/directory-picker"
-import { ServerConnection, useServer } from "@/context/server"
-import { useLanguage, type Locale } from "@/context/language"
-import { pathKey } from "@/utils/path-key"
-import {
- displayName,
- effectiveWorkspaceOrder,
- errorMessage,
- latestRootSession,
- sortedRootSessions,
-} from "./layout/helpers"
-import {
- collectNewSessionDeepLinks,
- collectOpenProjectDeepLinks,
- deepLinkEvent,
- drainPendingDeepLinks,
-} from "./layout/deep-links"
-import { createInlineEditorController } from "./layout/inline-editor"
-import {
- LocalWorkspace,
- SortableWorkspace,
- WorkspaceDragOverlay,
- type WorkspaceSidebarContext,
-} from "./layout/sidebar-workspace"
-import { ProjectDragOverlay, SortableProject, type ProjectSidebarContext } from "./layout/sidebar-project"
-import { SidebarContent } from "./layout/sidebar-shell"
+import { usePlatform } from "@/context/platform"
+import { setNavigate } from "@/utils/notification-click"
+import { setV2Toast, ToastRegion } from "@/utils/toast"
-export default function LegacyLayout(props: ParentProps) {
- const serverSDK = useServerSDK()
- const [store, setStore, , ready] = persisted(
- Persist.serverGlobal(serverSDK().scope, "layout.page", ["layout.page.v1"]),
- createStore({
- lastProjectSession: {} as { [directory: string]: { directory: string; id: string; at: number } },
- activeProject: undefined as string | undefined,
- activeWorkspace: undefined as string | undefined,
- workspaceOrder: {} as Record
-
-
- }
- keyed
- >
- {(project) => (
- <>
-
- )
- }
-
- const projects = () => layout.projects.list()
- const projectOverlay = () =>
-
-
-
-
-
-
- {language.t("sidebar.empty.title")}
-
- {language.t("sidebar.empty.description")}
-
-
-
-
-
-
-
-
- {
- showEditProjectDialog(server.current!, project)
- }}
- >
- {language.t("common.edit")}
-
- {
- toggleProjectWorkspaces(project)
- }}
- >
-
- {workspacesEnabled()
- ? language.t("sidebar.workspaces.disable")
- : language.t("sidebar.workspaces.enable")}
-
-
-
-
- {language.t("sidebar.project.clearNotifications")}
-
-
- {
- const dir = worktree()
- if (!dir) return
- closeProject(dir)
- }}
- >
- {language.t("common.close")}
-
-
-
-
-
-
- {projectName()}}
- >
- {
- void renameProject(project, next)
- }}
- class="text-14-medium text-text-strong truncate"
- displayClass="text-14-medium text-text-strong truncate"
- stopPropagation
- />
-
-
-
-
- {worktree().replace(homedir(), "~")}
-
-
-
-
-
-
-
-
-
- )}
-
-
-
-
-
-
-
-
- }
- >
- <>
-
-
-
-
-
-
- store.activeWorkspace}
- workspaceLabel={workspaceLabel}
- />
-
-
-
-
- {
- if (!panelProps.mobile) scrollContainerRef = el
- }}
- class="size-full flex flex-col py-2 gap-4 overflow-y-auto no-scrollbar [overflow-anchor:none]"
- >
-
-
- {(directory) => (
-
-
-
- 0 && providers.paid().length === 0),
- }}
- >
-
-
-
-
-
-
-
- {language.t("sidebar.gettingStarted.title")}
-
- {language.t("sidebar.gettingStarted.line1")}
-
-
- {language.t("sidebar.gettingStarted.line2")}
-
-
-
-
-
-
- {autoselecting() ?? ""}
+
setState("debugTools", (value) => !value) }
: undefined
}
/>
-
-
-
-}) {
- let toastId: number | undefined
-
- onMount(() => {
- toastId = showToast({
- persistent: true,
- icon: "download",
- title: props.language.t("toast.update.title"),
- description: props.language.t("toast.update.description", { version: props.version }),
- actions: [
- {
- label: props.language.t("toast.update.action.installRestart"),
- onClick: props.install,
- },
- {
- label: props.language.t("toast.update.action.notYet"),
- onClick: "dismiss",
- },
- ],
- })
- })
-
- onCleanup(() => {
- if (toastId === undefined) return
- toaster.dismiss(toastId)
- })
-
- return null
-}
diff --git a/packages/app/src/pages/layout/inline-editor.tsx b/packages/app/src/pages/layout/inline-editor.tsx
deleted file mode 100644
index 4189e4a72a..0000000000
--- a/packages/app/src/pages/layout/inline-editor.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { createStore } from "solid-js/store"
-import { onCleanup, Show, type Accessor } from "solid-js"
-import { InlineInput } from "@opencode-ai/ui/inline-input"
-
-export function createInlineEditorController() {
- // This controller intentionally supports one active inline editor at a time.
- const [editor, setEditor] = createStore({
- active: "" as string,
- value: "",
- })
-
- const editorOpen = (id: string) => editor.active === id
- const editorValue = () => editor.value
- const openEditor = (id: string, value: string) => {
- if (!id) return
- setEditor({ active: id, value })
- }
- const closeEditor = () => setEditor({ active: "", value: "" })
-
- const saveEditor = (callback: (next: string) => void) => {
- const next = editor.value.trim()
- if (!next) {
- closeEditor()
- return
- }
- closeEditor()
- callback(next)
- }
-
- const editorKeyDown = (event: KeyboardEvent, callback: (next: string) => void) => {
- if (event.key === "Enter") {
- event.preventDefault()
- saveEditor(callback)
- return
- }
- if (event.key !== "Escape") return
- event.preventDefault()
- closeEditor()
- }
-
- const InlineEditor = (props: {
- id: string
- value: Accessor
- onSave: (next: string) => void
- class?: string
- displayClass?: string
- editing?: boolean
- stopPropagation?: boolean
- openOnDblClick?: boolean
- }) => {
- let frame: number | undefined
-
- onCleanup(() => {
- if (frame === undefined) return
- cancelAnimationFrame(frame)
- })
-
- const isEditing = () => props.editing ?? editorOpen(props.id)
- const stopEvents = () => props.stopPropagation ?? false
- const allowDblClick = () => props.openOnDblClick ?? true
- const stopPropagation = (event: Event) => {
- if (!stopEvents()) return
- event.stopPropagation()
- }
- const handleDblClick = (event: MouseEvent) => {
- if (!allowDblClick()) return
- stopPropagation(event)
- openEditor(props.id, props.value())
- }
-
- return (
-
- {props.value()}
-
- }
- >
- {
- if (frame !== undefined) cancelAnimationFrame(frame)
- frame = requestAnimationFrame(() => {
- frame = undefined
- if (!el.isConnected) return
- el.focus()
- })
- }}
- value={editorValue()}
- class={props.class}
- onInput={(event) => setEditor("value", event.currentTarget.value)}
- onKeyDown={(event) => {
- event.stopPropagation()
- editorKeyDown(event, props.onSave)
- }}
- onBlur={closeEditor}
- onPointerDown={stopPropagation}
- onClick={stopPropagation}
- onDblClick={stopPropagation}
- onMouseDown={stopPropagation}
- onMouseUp={stopPropagation}
- onTouchStart={stopPropagation}
- />
-
- )
- }
-
- return {
- editor,
- editorOpen,
- editorValue,
- openEditor,
- closeEditor,
- saveEditor,
- editorKeyDown,
- setEditor,
- InlineEditor,
- }
-}
diff --git a/packages/app/src/pages/layout/sidebar-items.tsx b/packages/app/src/pages/layout/sidebar-items.tsx
deleted file mode 100644
index cc4390c09d..0000000000
--- a/packages/app/src/pages/layout/sidebar-items.tsx
+++ /dev/null
@@ -1,336 +0,0 @@
-import type { Session } from "@/types"
-import { Avatar } from "@opencode-ai/ui/avatar"
-import { Icon } from "@opencode-ai/ui/icon"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Spinner } from "@opencode-ai/ui/spinner"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { getFilename } from "@opencode-ai/core/util/path"
-import { A, useParams } from "@solidjs/router"
-import { type Accessor, createMemo, For, type JSX, Match, Show, Switch } from "solid-js"
-import { useServerSync } from "@/context/server-sync"
-import { useLanguage } from "@/context/language"
-import { getAvatarColors, type LocalProject, useLayout } from "@/context/layout"
-import { useNotification } from "@/context/notification"
-import { usePermission } from "@/context/permission"
-import { messageAgentColor } from "@/utils/agent"
-import { sessionTitle } from "@/utils/session-title"
-import { sessionPermissionRequest } from "../session/composer/session-request-tree"
-import { childSessionOnPath, getProjectAvatarSource, hasProjectPermissions } from "./helpers"
-
-export const ProjectIcon = (props: {
- project: LocalProject
- class?: string
- notify?: boolean
- working?: boolean
-}): JSX.Element => {
- const serverSync = useServerSync()
- const notification = useNotification()
- const permission = usePermission()
- const dirs = createMemo(() => [props.project.worktree, ...(props.project.sandboxes ?? [])])
- const unseenCount = createMemo(() =>
- dirs().reduce((total, directory) => total + notification.project.unseenCount(directory), 0),
- )
- const hasError = createMemo(() => dirs().some((directory) => notification.project.unseenHasError(directory)))
- const hasPermissions = createMemo(() =>
- dirs().some((directory) => {
- return hasProjectPermissions(serverSync().session.data.permission, (item) => {
- if (serverSync().session.get(item.sessionID)?.directory !== directory) return false
- return !permission.autoResponds(item, directory)
- })
- }),
- )
- const notify = createMemo(() => props.notify && (hasPermissions() || unseenCount() > 0))
- const name = createMemo(() => props.project.name || getFilename(props.project.worktree))
-
- return (
-
- slug: string
- mobile?: boolean
- dense?: boolean
- showTooltip?: boolean
- showChild?: boolean
- level?: number
- sidebarExpanded: Accessor
- clearHoverProjectSoon: () => void
- prefetchSession: (session: Session, priority?: "high" | "low") => void
- archiveSession: (session: Session) => Promise
-}
-
-const SessionRow = (props: {
- session: Session
- slug: string
- mobile?: boolean
- dense?: boolean
- tint: Accessor
- isWorking: Accessor
- hasPermissions: Accessor
- hasError: Accessor
- unseenCount: Accessor
- clearHoverProjectSoon: () => void
- sidebarOpened: Accessor
- warmPress: () => void
- warmFocus: () => void
-}): JSX.Element => {
- const title = () => sessionTitle(props.session.title)
-
- return (
- {
- if (props.sidebarOpened()) return
- props.clearHoverProjectSoon()
- }}
- >
- 0}>
-
- {title()}
-
- )
-}
-
-export const SessionItem = (props: SessionItemProps): JSX.Element => {
- const params = useParams()
- const layout = useLayout()
- const language = useLanguage()
- const notification = useNotification()
- const permission = usePermission()
- const serverSync = useServerSync()
- const unseenCount = createMemo(() => notification.session.unseenCount(props.session.id))
- const hasError = createMemo(() => notification.session.unseenHasError(props.session.id))
- const [sessionStore] = serverSync().child(props.session.directory)
- const hasPermissions = createMemo(() => {
- return !!sessionPermissionRequest(
- sessionStore.session,
- serverSync().session.data.permission,
- props.session.id,
- (item) => {
- return !permission.autoResponds(item, props.session.directory)
- },
- )
- })
- const isWorking = createMemo(() => {
- if (hasPermissions()) return false
- return serverSync().session.data.session_working(props.session.id)
- })
-
- const tint = createMemo(() =>
- messageAgentColor(serverSync().session.data.message[props.session.id], sessionStore.agent),
- )
- const tooltip = createMemo(() => props.showTooltip ?? (props.mobile || !props.sidebarExpanded()))
- const currentChild = createMemo(() => {
- if (!props.showChild) return
- return childSessionOnPath(sessionStore.session, props.session.id, params.id)
- })
-
- const warm = (span: number, priority: "high" | "low") => {
- const nav = props.navList?.()
- const list = nav?.some((item) => item.id === props.session.id && item.directory === props.session.directory)
- ? nav
- : props.list
-
- props.prefetchSession(props.session, priority)
-
- const idx = list.findIndex((item) => item.id === props.session.id && item.directory === props.session.directory)
- if (idx === -1) return
-
- for (let step = 1; step <= span; step++) {
- const next = list[idx + step]
- if (next) props.prefetchSession(next, step === 1 ? "high" : priority)
-
- const prev = list[idx - step]
- if (prev) props.prefetchSession(prev, step === 1 ? "high" : priority)
- }
- }
-
- const item = (
- warm(2, "high")}
- warmFocus={() => warm(2, "high")}
- />
- )
-
- return (
- <>
-
-
- {(child) => (
-
-
- )
-}
-
-export const NewSessionItem = (props: {
- slug: string
- mobile?: boolean
- dense?: boolean
- sidebarExpanded: Accessor
- clearHoverProjectSoon: () => void
-}): JSX.Element => {
- const layout = useLayout()
- const language = useLanguage()
- const label = language.t("command.session.new")
- const tooltip = () => props.mobile || !props.sidebarExpanded()
- const item = (
- {
- if (layout.sidebar.opened()) return
- props.clearHoverProjectSoon()
- }}
- >
-
- currentProject: Accessor
- sidebarOpened: Accessor
- sidebarHovering: Accessor
- hoverProject: Accessor
- onProjectMouseEnter: (worktree: string, event: MouseEvent) => void
- onProjectMouseLeave: (worktree: string) => void
- onProjectFocus: (worktree: string) => void
- onHoverOpenChanged: (worktree: string, hovered: boolean) => void
- navigateToProject: (directory: string) => void
- openSidebar: () => void
- closeProject: (directory: string) => void
- showEditProjectDialog: (project: LocalProject) => void
- toggleProjectWorkspaces: (project: LocalProject) => void
- workspacesEnabled: (project: LocalProject) => boolean
- workspaceIds: (project: LocalProject) => string[]
- workspaceLabel: (directory: string, branch?: string, projectId?: string) => string
- sessionProps: Omit
-}
-
-export const ProjectDragOverlay = (props: {
- projects: Accessor
- activeProject: Accessor
-}): JSX.Element => {
- const project = createMemo(() => props.projects().find((p) => p.worktree === props.activeProject()))
- return (
-
- {(p) => (
-
- )
-}
-
-const ProjectTile = (props: {
- project: LocalProject
- mobile?: boolean
- sidebarHovering: Accessor
- selected: Accessor
- active: Accessor
- isWorking: Accessor
- overlay: Accessor
- suppressHover: Accessor
- dirs: Accessor
- onProjectMouseEnter: (worktree: string, event: MouseEvent) => void
- onProjectMouseLeave: (worktree: string) => void
- onProjectFocus: (worktree: string) => void
- navigateToProject: (directory: string) => void
- showEditProjectDialog: (project: LocalProject) => void
- toggleProjectWorkspaces: (project: LocalProject) => void
- workspacesEnabled: (project: LocalProject) => boolean
- closeProject: (directory: string) => void
- setMenu: (value: boolean) => void
- setOpen: (value: boolean) => void
- setSuppressHover: (value: boolean) => void
- language: ReturnType
-}): JSX.Element => {
- const notification = useNotification()
- const layout = useLayout()
- const unseenCount = createMemo(() =>
- props.dirs().reduce((total, directory) => total + notification.project.unseenCount(directory), 0),
- )
-
- const clear = () =>
- props
- .dirs()
- .filter((directory) => notification.project.unseenCount(directory) > 0)
- .forEach((directory) => notification.project.markViewed(directory))
-
- return (
- {
- props.setMenu(value)
- props.setSuppressHover(value)
- if (value) props.setOpen(false)
- }}
- >
- {
- if (event.button === 0 && !event.ctrlKey) {
- props.setOpen(false)
- props.setSuppressHover(true)
- return
- }
- if (!props.overlay()) return
- if (event.button !== 2 && !(event.button === 0 && event.ctrlKey)) return
- props.setOpen(false)
- props.setSuppressHover(true)
- event.preventDefault()
- }}
- onMouseEnter={(event: MouseEvent) => {
- if (!props.overlay()) return
- if (props.suppressHover()) return
- props.onProjectMouseEnter(props.project.worktree, event)
- }}
- onMouseLeave={() => {
- if (props.suppressHover()) props.setSuppressHover(false)
- if (!props.overlay()) return
- props.onProjectMouseLeave(props.project.worktree)
- }}
- onFocus={() => {
- if (!props.overlay()) return
- if (props.suppressHover()) return
- props.onProjectFocus(props.project.worktree)
- }}
- onClick={() => {
- props.setOpen(false)
- if (props.selected()) {
- layout.sidebar.toggle()
- return
- }
- props.navigateToProject(props.project.worktree)
- }}
- onBlur={() => props.setOpen(false)}
- >
-
-
-
- props.showEditProjectDialog(props.project)}>
- {props.language.t("common.edit")}
-
- props.toggleProjectWorkspaces(props.project)}
- >
-
- {props.workspacesEnabled(props.project)
- ? props.language.t("sidebar.workspaces.disable")
- : props.language.t("sidebar.workspaces.enable")}
-
-
-
- {props.language.t("sidebar.project.clearNotifications")}
-
- props.closeProject(props.project.worktree)}
- >
- {props.language.t("common.close")}
-
-
-
-
- )
-}
-
-const ProjectPreviewPanel = (props: {
- project: LocalProject
- mobile?: boolean
- selected: Accessor
- workspaceEnabled: Accessor
- workspaces: Accessor
- label: (directory: string) => string
- projectSessions: Accessor>
- workspaceSessions: (directory: string) => ReturnType
- ctx: ProjectSidebarContext
- language: ReturnType
-}): JSX.Element => (
-
-}): JSX.Element => {
- const serverSync = useServerSync()
- const language = useLanguage()
- const sortable = createSortable(props.project.worktree)
- const selected = createMemo(() => props.ctx.currentProject()?.worktree === props.project.worktree)
- const workspaces = createMemo(() => props.ctx.workspaceIds(props.project).slice(0, 2))
- const workspaceEnabled = createMemo(() => props.ctx.workspacesEnabled(props.project))
- const dirs = createMemo(() => props.ctx.workspaceIds(props.project))
- const [state, setState] = createStore({
- menu: false,
- suppressHover: false,
- })
-
- const isHoverProject = () => props.ctx.hoverProject() === props.project.worktree
- const preview = createMemo(() => !props.mobile && props.ctx.sidebarOpened())
- const overlay = createMemo(() => !props.mobile && !props.ctx.sidebarOpened())
- const active = createMemo(() => state.menu || (preview() ? isHoverProject() : overlay() && isHoverProject()))
-
- const hoverOpen = () => isHoverProject() && preview() && !selected() && !state.menu
-
- const label = (directory: string) => {
- const [data] = serverSync().child(directory, { bootstrap: false })
- const kind =
- directory === props.project.worktree ? language.t("workspace.type.local") : language.t("workspace.type.sandbox")
- const name = props.ctx.workspaceLabel(directory, data.vcs?.branch, props.project.id)
- return `${kind} : ${name}`
- }
-
- const projectStore = createMemo(() => serverSync().child(props.project.worktree, { bootstrap: false })[0])
- const isWorking = createMemo(() =>
- dirs().some((directory) => {
- return Object.keys(serverSync().session.data.session_status).some((id) => {
- if (serverSync().session.get(id)?.directory !== directory) return false
- return serverSync().session.data.session_working(id)
- })
- }),
- )
- const projectSessions = createMemo(() => sortedRootSessions(projectStore(), props.sortNow()))
- const workspaceSessions = (directory: string) => {
- const [data] = serverSync().child(directory, { bootstrap: false })
- return sortedRootSessions(data, props.sortNow())
- }
- const tile = () => (
- state.suppressHover}
- dirs={dirs}
- onProjectMouseEnter={props.ctx.onProjectMouseEnter}
- onProjectMouseLeave={props.ctx.onProjectMouseLeave}
- onProjectFocus={props.ctx.onProjectFocus}
- navigateToProject={props.ctx.navigateToProject}
- showEditProjectDialog={props.ctx.showEditProjectDialog}
- toggleProjectWorkspaces={props.ctx.toggleProjectWorkspaces}
- workspacesEnabled={props.ctx.workspacesEnabled}
- closeProject={props.ctx.closeProject}
- setMenu={(value) => setState("menu", value)}
- setOpen={(value) => props.ctx.onHoverOpenChanged(props.project.worktree, value)}
- setSuppressHover={(value) => setState("suppressHover", value)}
- language={language}
- />
- )
-
- return (
- // @ts-ignore
-
- aimMove: (event: MouseEvent) => void
- projects: Accessor
- renderProject: (project: LocalProject) => JSX.Element
- handleDragStart: (event: unknown) => void
- handleDragEnd: () => void
- handleDragOver: (event: DragEvent) => void
- openProjectLabel: JSX.Element
- openProjectKeybind: Accessor
- onOpenProject: () => void
- renderProjectOverlay: () => JSX.Element
- settingsLabel: Accessor
- settingsKeybind: Accessor
- onOpenSettings: () => void
- helpLabel: Accessor
- onOpenHelp: () => void
- renderPanel: () => JSX.Element
-}): JSX.Element => {
- const expanded = createMemo(() => !!props.mobile || props.opened())
- const placement = () => (props.mobile ? "bottom" : "right")
- let panel: HTMLDivElement | undefined
-
- createEffect(() => {
- const el = panel
- if (!el) return
- if (expanded()) {
- el.removeAttribute("inert")
- return
- }
- el.setAttribute("inert", "")
- })
-
- return (
-
- )
-}
diff --git a/packages/app/src/pages/layout/sidebar-workspace.tsx b/packages/app/src/pages/layout/sidebar-workspace.tsx
deleted file mode 100644
index 2e300f3a8f..0000000000
--- a/packages/app/src/pages/layout/sidebar-workspace.tsx
+++ /dev/null
@@ -1,489 +0,0 @@
-import { useNavigate, useParams } from "@solidjs/router"
-import { createEffect, createMemo, For, Show, type Accessor, type JSX } from "solid-js"
-import { createStore } from "solid-js/store"
-import { createSortable } from "@thisbeyond/solid-dnd"
-import { createMediaQuery } from "@solid-primitives/media"
-import { base64Encode } from "@opencode-ai/core/util/encode"
-import { getFilename } from "@opencode-ai/core/util/path"
-import { Button } from "@opencode-ai/ui/button"
-import { Collapsible } from "@opencode-ai/ui/collapsible"
-import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
-import { Icon } from "@opencode-ai/ui/icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { Spinner } from "@opencode-ai/ui/spinner"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import type { Session } from "@/types"
-import { type LocalProject } from "@/context/layout"
-import { useServerSync, useQueryOptions } from "@/context/server-sync"
-import { useLanguage } from "@/context/language"
-import { pathKey } from "@/utils/path-key"
-import { NewSessionItem, SessionItem, SessionSkeleton } from "./sidebar-items"
-import { sortedRootSessions } from "./helpers"
-import { useIsFetching } from "@tanstack/solid-query"
-
-type InlineEditorComponent = (props: {
- id: string
- value: Accessor
- onSave: (next: string) => void
- class?: string
- displayClass?: string
- editing?: boolean
- stopPropagation?: boolean
- openOnDblClick?: boolean
-}) => JSX.Element
-
-export type WorkspaceSidebarContext = {
- currentDir: Accessor
- navList: Accessor
- sidebarExpanded: Accessor
- sidebarHovering: Accessor
- clearHoverProjectSoon: () => void
- prefetchSession: (session: Session, priority?: "high" | "low") => void
- archiveSession: (session: Session) => Promise
- workspaceName: (directory: string, projectId?: string, branch?: string) => string | undefined
- renameWorkspace: (directory: string, next: string, projectId?: string, branch?: string) => void
- editorOpen: (id: string) => boolean
- openEditor: (id: string, value: string) => void
- closeEditor: () => void
- setEditor: (key: "value", value: string) => void
- InlineEditor: InlineEditorComponent
- isBusy: (directory: string) => boolean
- workspaceExpanded: (directory: string, local: boolean) => boolean
- setWorkspaceExpanded: (directory: string, value: boolean) => void
- showResetWorkspaceDialog: (root: string, directory: string) => void
- showDeleteWorkspaceDialog: (root: string, directory: string) => void
- setScrollContainerRef: (el: HTMLDivElement | undefined, mobile?: boolean) => void
-}
-
-export const WorkspaceDragOverlay = (props: {
- sidebarProject: Accessor
- activeWorkspace: Accessor
- workspaceLabel: (directory: string, branch?: string, projectId?: string) => string
-}): JSX.Element => {
- const serverSync = useServerSync()
- const language = useLanguage()
- const label = createMemo(() => {
- const project = props.sidebarProject()
- if (!project) return
- const directory = props.activeWorkspace()
- if (!directory) return
-
- const [workspaceStore] = serverSync().child(directory, { bootstrap: false })
- const kind =
- directory === project.worktree ? language.t("workspace.type.local") : language.t("workspace.type.sandbox")
- const name = props.workspaceLabel(directory, workspaceStore.vcs?.branch, project.id)
- return `${kind} : ${name}`
- })
-
- return (
-
- {(value) =>
- )
-}
-
-const WorkspaceHeader = (props: {
- local: Accessor
- busy: Accessor
- open: Accessor
- directory: string
- language: ReturnType
- branch: Accessor
- workspaceValue: Accessor
- workspaceEditActive: Accessor
- InlineEditor: WorkspaceSidebarContext["InlineEditor"]
- renameWorkspace: WorkspaceSidebarContext["renameWorkspace"]
- setEditor: WorkspaceSidebarContext["setEditor"]
- projectId?: string
-}): JSX.Element => (
-
- busy: Accessor
- menuOpen: Accessor
- pendingRename: Accessor
- setMenuOpen: (open: boolean) => void
- setPendingRename: (value: boolean) => void
- sidebarHovering: Accessor
- touch: Accessor
- language: ReturnType
- workspaceValue: Accessor
- openEditor: WorkspaceSidebarContext["openEditor"]
- showResetWorkspaceDialog: WorkspaceSidebarContext["showResetWorkspaceDialog"]
- showDeleteWorkspaceDialog: WorkspaceSidebarContext["showDeleteWorkspaceDialog"]
- root: string
- clearHoverProjectSoon: WorkspaceSidebarContext["clearHoverProjectSoon"]
- navigateToNewSession: () => void
-}): JSX.Element => (
-
- mobile?: boolean
- ctx: WorkspaceSidebarContext
- showNew: Accessor
- loading: Accessor
- sessions: Accessor
- hasMore: Accessor
- loadMore: () => Promise
- language: ReturnType
-}): JSX.Element => (
-
-)
-
-export const SortableWorkspace = (props: {
- ctx: WorkspaceSidebarContext
- directory: string
- project: LocalProject
- sortNow: Accessor
- mobile?: boolean
-}): JSX.Element => {
- const navigate = useNavigate()
- const params = useParams()
- const serverSync = useServerSync()
- const queryOptions = useQueryOptions()
- const language = useLanguage()
- const sortable = createSortable(props.directory)
- const [workspaceStore, setWorkspaceStore] = serverSync().child(props.directory, { bootstrap: false })
- const [menu, setMenu] = createStore({
- open: false,
- pendingRename: false,
- })
- const slug = createMemo(() => base64Encode(props.directory))
- const sessions = createMemo(() => sortedRootSessions(workspaceStore, props.sortNow()))
- const local = createMemo(() => props.directory === props.project.worktree)
- const active = createMemo(() => pathKey(props.ctx.currentDir()) === pathKey(props.directory))
- const workspaceValue = createMemo(() => {
- const branch = workspaceStore.vcs?.branch
- const name = branch ?? getFilename(props.directory)
- return props.ctx.workspaceName(props.directory, props.project.id, branch) ?? name
- })
- const open = createMemo(() => props.ctx.workspaceExpanded(props.directory, local()))
- const boot = createMemo(() => open() || active())
- const count = createMemo(() => sessions()?.length ?? 0)
- const hasMore = createMemo(() => workspaceStore.sessionTotal > count())
- const fetching = useIsFetching(() => queryOptions().sessions(pathKey(props.directory)))
- const busy = createMemo(() => props.ctx.isBusy(props.directory))
- const loading = () => fetching() > 0 && count() === 0
- const touch = createMediaQuery("(hover: none)")
- const showNew = createMemo(() => !loading() && (touch() || count() === 0 || (active() && !params.id)))
- const loadMore = async () => {
- setWorkspaceStore("limit", (limit) => (limit ?? 0) + 5)
- await serverSync().project.loadSessions(props.directory)
- }
-
- const workspaceEditActive = createMemo(() => props.ctx.editorOpen(`workspace:${props.directory}`))
- const header = () => (
- workspaceStore.vcs?.branch}
- workspaceValue={workspaceValue}
- workspaceEditActive={workspaceEditActive}
- InlineEditor={props.ctx.InlineEditor}
- renameWorkspace={props.ctx.renameWorkspace}
- setEditor={props.ctx.setEditor}
- projectId={props.project.id}
- />
- )
-
- const openWrapper = (value: boolean) => {
- props.ctx.setWorkspaceExpanded(props.directory, value)
- if (value) return
- if (props.ctx.editorOpen(`workspace:${props.directory}`)) props.ctx.closeEditor()
- }
-
- createEffect(() => {
- if (!boot()) return
- serverSync().child(props.directory, { bootstrap: true })
- })
-
- return (
-
- mobile?: boolean
-}): JSX.Element => {
- const serverSync = useServerSync()
- const queryOptions = useQueryOptions()
- const language = useLanguage()
- const workspace = createMemo(() => {
- const [store, setStore] = serverSync().child(props.project.worktree)
- return { store, setStore }
- })
- const slug = createMemo(() => base64Encode(props.project.worktree))
- const sessions = createMemo(() => sortedRootSessions(workspace().store, props.sortNow()))
- const count = createMemo(() => sessions()?.length ?? 0)
- const fetching = useIsFetching(() => queryOptions().sessions(pathKey(props.project.worktree)))
- const hasMore = createMemo(() => workspace().store.sessionTotal > count())
- const loading = () => fetching() > 0 && count() === 0
- const loadMore = async () => {
- workspace().setStore("limit", (limit) => (limit ?? 0) + 5)
- await serverSync().project.loadSessions(props.project.worktree)
- }
-
- return (
-
{/* Reproduce the real composer stack: dock + card overlapping the dock's bottom by lift() = 18px */}
-
+ {props.children}
+
+ {import.meta.env.DEV && state.debugTools &&
)
}
-
-function UpdateAvailableToast(props: {
- version: string
- install: () => void
- language: ReturnType
-
-
-
-
-
-
-
-
-
-
- {import.meta.env.DEV && import.meta.env.VITE_DISABLE_DEBUG_BAR !== "1" && state.debugTools && setState("sizing", true)}
- >
- {
- setState("sizing", true)
- if (sizet !== undefined) clearTimeout(sizet)
- sizet = window.setTimeout(() => setState("sizing", false), 120)
- layout.sidebar.resize(w)
- }}
- />
-
-
-
- {
- if (e.target === e.currentTarget) layout.mobileSidebar.hide()
- }}
- />
-
-
-
-
-
-
-
-
- {
- disarm()
- aim.reset()
- }}
- onPointerDown={disarm}
- onMouseLeave={() => {
- arm()
- }}
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-export type SessionItemProps = {
- session: Session
- list: Session[]
- navList?: Accessor
-
-
-
-
-
-
-
-
-
-
-
-
-
- 0}>
-
-
-
-
-
-
- )}
-
-
- {label}
-
- )
-
- return (
-
-
- {item}
-
- }
- >
- {item}
-
-
- )
-}
-
-export const SessionSkeleton = (props: { count?: number }): JSX.Element => {
- const items = Array.from({ length: props.count ?? 4 }, (_, index) => index)
- return (
-
-
- {() => }
-
-
- )
-}
diff --git a/packages/app/src/pages/layout/sidebar-project.tsx b/packages/app/src/pages/layout/sidebar-project.tsx
deleted file mode 100644
index 9d29a1b495..0000000000
--- a/packages/app/src/pages/layout/sidebar-project.tsx
+++ /dev/null
@@ -1,377 +0,0 @@
-import { createMemo, For, Show, type Accessor, type JSX } from "solid-js"
-import { createStore } from "solid-js/store"
-import { base64Encode } from "@opencode-ai/core/util/encode"
-import { Button } from "@opencode-ai/ui/button"
-import { ContextMenu } from "@opencode-ai/ui/context-menu"
-import { HoverCard } from "@opencode-ai/ui/hover-card"
-import { Icon } from "@opencode-ai/ui/icon"
-import { createSortable } from "@thisbeyond/solid-dnd"
-import { useLayout, type LocalProject } from "@/context/layout"
-import { useServerSync } from "@/context/server-sync"
-import { useLanguage } from "@/context/language"
-import { useNotification } from "@/context/notification"
-import { ProjectIcon, SessionItem, type SessionItemProps } from "./sidebar-items"
-import { displayName, sortedRootSessions } from "./helpers"
-
-export type ProjectSidebarContext = {
- currentDir: Accessor
-
- )}
-
-
-)
-
-export const SortableProject = (props: {
- project: LocalProject
- mobile?: boolean
- ctx: ProjectSidebarContext
- sortNow: Accessor
-
- {displayName(props.project)}
- {props.language.t("sidebar.project.recentSessions")}
-
-
- {(session) => (
-
- {(directory) => {
- const sessions = createMemo(() => props.workspaceSessions(directory))
- return (
-
-
-
-
-
- {(session) => (
-
-
- )
- }}
-
-
-
-
- {props.label(directory)}
-
-
-
-
-
- {
- if (state.menu) return
- if (value && state.suppressHover) return
- props.ctx.onHoverOpenChanged(props.project.worktree, value)
- }}
- >
-
-
-
- )
-}
diff --git a/packages/app/src/pages/layout/sidebar-shell.tsx b/packages/app/src/pages/layout/sidebar-shell.tsx
deleted file mode 100644
index ca36af2a42..0000000000
--- a/packages/app/src/pages/layout/sidebar-shell.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { createEffect, createMemo, For, Show, type Accessor, type JSX } from "solid-js"
-import {
- DragDropProvider,
- DragDropSensors,
- DragOverlay,
- SortableProvider,
- closestCenter,
- type DragEvent,
-} from "@thisbeyond/solid-dnd"
-import { ConstrainDragXAxis } from "@/utils/solid-dnd"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
-import { type LocalProject } from "@/context/layout"
-
-export const SidebarContent = (props: {
- mobile?: boolean
- opened: Accessor
-
-
-
- {props.renderProjectOverlay()}
-
-
-
-
-
-
-
-
-
-
-
- {
- panel = el
- }}
- classList={{ "flex-1 flex h-full min-h-0 min-w-0 overflow-hidden": true, "pointer-events-none": !expanded() }}
- aria-hidden={!expanded()}
- >
- {props.renderPanel()}
-
- {value()}
}
-
-
- {props.branch() ?? getFilename(props.directory)}
-
- }
- >
- {
- const trimmed = next.trim()
- if (!trimmed) return
- props.renameWorkspace(props.directory, trimmed, props.projectId, props.branch())
- props.setEditor("value", props.workspaceValue())
- }}
- class="text-14-medium text-text-base min-w-0 truncate"
- displayClass="text-14-medium text-text-base min-w-0 truncate"
- editing={props.workspaceEditActive()}
- stopPropagation={false}
- openOnDblClick={false}
- />
-
-
-)
-
-const WorkspaceActions = (props: {
- directory: string
- local: Accessor
-
-
- {props.local() ? props.language.t("workspace.type.local") : props.language.t("workspace.type.sandbox")} :
-
-
-
-
- props.setMenuOpen(open)}
- >
-
-
-
- {
- if (!props.pendingRename()) return
- event.preventDefault()
- props.setPendingRename(false)
- props.openEditor(`workspace:${props.directory}`, props.workspaceValue())
- }}
- >
- {
- props.setPendingRename(true)
- props.setMenuOpen(false)
- }}
- >
- {props.language.t("common.rename")}
-
- props.showResetWorkspaceDialog(props.root, props.directory)}
- disabled
- >
- {props.language.t("common.reset")}
-
- props.showDeleteWorkspaceDialog(props.root, props.directory)}
- >
- {props.language.t("common.delete")}
-
-
-
-
-
-
-
-
-
-)
-
-const WorkspaceSessionList = (props: {
- slug: Accessor
-
-
-
-
-
- )
-}
-
-export const LocalWorkspace = (props: {
- ctx: WorkspaceSidebarContext
- project: LocalProject
- sortNow: Accessor
-
-
-
-
-
-
- {header()}
-
- }
- >
-
- menu.open}
- pendingRename={() => menu.pendingRename}
- setMenuOpen={(open) => setMenu("open", open)}
- setPendingRename={(value) => setMenu("pendingRename", value)}
- sidebarHovering={props.ctx.sidebarHovering}
- touch={touch}
- language={language}
- workspaceValue={workspaceValue}
- openEditor={props.ctx.openEditor}
- showResetWorkspaceDialog={props.ctx.showResetWorkspaceDialog}
- showDeleteWorkspaceDialog={props.ctx.showDeleteWorkspaceDialog}
- root={props.project.worktree}
- clearHoverProjectSoon={props.ctx.clearHoverProjectSoon}
- navigateToNewSession={() => navigate(`/${slug()}/session`)}
- />
-
-
- {header()}
-
- props.ctx.setScrollContainerRef(el, props.mobile)}
- class="size-full flex flex-col py-2 overflow-y-auto no-scrollbar [overflow-anchor:none]"
- >
- false}
- loading={loading}
- sessions={sessions}
- hasMore={hasMore}
- loadMore={loadMore}
- language={language}
- />
-
- )
-}
diff --git a/packages/app/src/pages/session/composer/session-revert-dock.stories.tsx b/packages/app/src/pages/session/composer/session-revert-dock.stories.tsx
index ce3fd26b02..97ee84163f 100644
--- a/packages/app/src/pages/session/composer/session-revert-dock.stories.tsx
+++ b/packages/app/src/pages/session/composer/session-revert-dock.stories.tsx
@@ -2,7 +2,7 @@ import { For } from "solid-js"
import { createStore } from "solid-js/store"
import { DockShell } from "@opencode-ai/ui/dock-surface"
import { SessionRevertDock } from "@/pages/session/composer/session-revert-dock"
-import { SettingsProvider, useSettings } from "@/context/settings"
+import { SettingsProvider } from "@/context/settings"
export default {
title: "Composer/Revert Dock",
@@ -21,9 +21,6 @@ Real \`SessionRevertDock\` from app code, rendered above a mock composer card.
The live composer overlaps the dock's bottom by 18px (\`session-composer-region-controller.ts\` \`lift()\`).
The card below reproduces that overlap so the collapsed/expanded cutoff behavior can be verified in isolation.
-### Layout split
-Use the **Layout** button to toggle \`newLayoutDesigns\` and preview both the v2 dock and the legacy (v1) \`DockTray\` fallback.
-
### Notes
- \`onRestore\` only mutates local story state, so nothing in the real session is affected.
- Click the header to expand/collapse. Click "Restore message" to remove a row.`,
@@ -53,11 +50,9 @@ const btn = (accent?: boolean) =>
}) as const
function Stage(props: { count: number }) {
- const settings = useSettings()
const seed = () => messages.slice(0, props.count).map((text, index) => ({ id: `rolled-${index}`, text }))
const [store, setStore] = createStore({ items: seed() })
- const v2 = () => settings.general.newLayoutDesigns()
const reset = () => setStore("items", seed())
const restore = (id: string) =>
setStore(
@@ -71,22 +66,15 @@ function Stage(props: { count: number }) {
-