diff --git a/packages/app/AGENTS.md b/packages/app/AGENTS.md index 765e960c8172..6c9f03c7b594 100644 --- a/packages/app/AGENTS.md +++ b/packages/app/AGENTS.md @@ -13,6 +13,17 @@ ## SolidJS - Always prefer `createStore` over multiple `createSignal` calls +- Use effects only to synchronize with external systems; prefer derived state and explicit actions for app state. + +## Architecture + +- Strong ownership should make consumers simple and reduce branching. +- Prefer strict contexts with explicit domain values; do not add implicit or theoretical fallbacks. +- Keep route, server, directory, session, draft, and tab identities explicit. +- Prefer explicit transactions over synchronization between independent state stores. +- Avoid duplicate or near-duplicate logic; consolidate only when the shared concept is real. +- Capture concrete context once at the start of async work. +- Treat reduced code, branching, and compatibility machinery as refactor deliverables. ## Tool Calling diff --git a/packages/app/src/app.tsx b/packages/app/src/app.tsx index 8e5d445f4c76..2a8d2d51f5aa 100644 --- a/packages/app/src/app.tsx +++ b/packages/app/src/app.tsx @@ -1,65 +1,32 @@ import "@/index.css" -import * as Sentry from "@sentry/solid" +import { LegacyRoot } from "@/app/legacy" +import { V2Root } from "@/app/v2" +import { CommandProvider } from "@/context/command" +import { GlobalProvider } from "@/context/global" +import { HighlightsProvider } from "@/context/highlights" +import { LanguageProvider, type Locale, useLanguage } from "@/context/language" +import { usePlatform } from "@/context/platform" +import { ServerConnection, ServerProvider } from "@/context/server" +import { SettingsProvider, useSettings } from "@/context/settings" +import { NotificationServiceProvider } from "@/context/notification" +import { PermissionServiceProvider } from "@/context/permission" +import type { ServerContext } from "@/context/server-context" +import { sessionHref } from "@/utils/v2-route" +import { base64Encode } from "@opencode-ai/core/util/encode" +import { ErrorPage } from "@/pages/error" +import { setV2Toast } from "@/utils/toast" import { I18nProvider } from "@opencode-ai/ui/context" import { DialogProvider } from "@opencode-ai/ui/context/dialog" import { FileComponentProvider } from "@opencode-ai/ui/context/file" import { MarkedProvider } from "@opencode-ai/ui/context/marked" import { File } from "@opencode-ai/ui/file" import { Font } from "@opencode-ai/ui/font" -import { Splash } from "@opencode-ai/ui/logo" import { ThemeProvider } from "@opencode-ai/ui/theme/context" +import * as Sentry from "@sentry/solid" import { MetaProvider } from "@solidjs/meta" -import { type BaseRouterProps, Navigate, Route, Router } from "@solidjs/router" +import type { BaseRouterProps } from "@solidjs/router" import { QueryClient, QueryClientProvider } from "@tanstack/solid-query" -import { Effect } from "effect" -import { - type Component, - createEffect, - createMemo, - createResource, - createSignal, - ErrorBoundary, - For, - type JSX, - lazy, - onCleanup, - type ParentProps, - Show, -} from "solid-js" -import { Dynamic } from "solid-js/web" -import { CommandProvider } from "@/context/command" -import { CommentsProvider } from "@/context/comments" -import { FileProvider } from "@/context/file" -import { ServerSDKProvider } from "@/context/server-sdk" -import { ServerSyncProvider } from "@/context/server-sync" -import { GlobalProvider } from "@/context/global" -import { HighlightsProvider } from "@/context/highlights" -import { LanguageProvider, type Locale, useLanguage } from "@/context/language" -import { LayoutProvider } from "@/context/layout" -import { ModelsProvider } from "@/context/models" -import { NotificationProvider } from "@/context/notification" -import { PermissionProvider } from "@/context/permission" -import { PromptProvider } from "@/context/prompt" -import { ServerConnection, ServerProvider, serverName, useServer } from "@/context/server" -import { SettingsProvider, useSettings } from "@/context/settings" -import { TerminalProvider } from "@/context/terminal" -import { TabsProvider } from "@/context/tabs" -import DirectoryLayout from "@/pages/directory-layout" -import Layout from "@/pages/layout" -import { ErrorPage } from "./pages/error" -import { useCheckServerHealth } from "./utils/server-health" - -const HomeRoute = lazy(() => import("@/pages/home")) -const Session = lazy(() => import("@/pages/session")) - -const SessionRoute = Object.assign( - () => ( - - - - ), - { preload: Session.preload }, -) +import { type Component, createEffect, ErrorBoundary, type JSX, type ParentProps, untrack } from "solid-js" function UiI18nBridge(props: ParentProps) { const language = useLanguage() @@ -100,6 +67,7 @@ function BodyDesignClass() { if (typeof document === "undefined") return const enabled = settings.general.newLayoutDesigns() + setV2Toast(enabled) document.body.classList.toggle("text-12-regular", !enabled) document.body.classList.toggle("font-(family-name:--font-family-text)", enabled) document.body.classList.toggle("text-[13px]", enabled) @@ -109,50 +77,6 @@ function BodyDesignClass() { return null } -function AppShellProviders(props: ParentProps) { - return ( - - - - - - - - - {props.children} - - - - - - - - ) -} - -function SessionProviders(props: ParentProps) { - return ( - - - - {props.children} - - - - ) -} - -function RouterRoot(props: ParentProps<{ appChildren?: JSX.Element }>) { - return ( - - {/*}>*/} - {props.appChildren} - {props.children} - {/**/} - - ) -} - export function AppBaseProviders(props: ParentProps<{ locale?: Locale }>) { return ( @@ -185,119 +109,32 @@ export function AppBaseProviders(props: ParentProps<{ locale?: Locale }>) { ) } -function ConnectionGate(props: ParentProps<{ disableHealthCheck?: boolean }>) { - const server = useServer() - const checkServerHealth = useCheckServerHealth() - - const [checkMode, setCheckMode] = createSignal<"blocking" | "background">("blocking") - - // performs repeated health check with a grace period for - // non-http connections, otherwise fails instantly - const [startupHealthCheck, healthCheckActions] = createResource(() => - props.disableHealthCheck - ? true - : Effect.gen(function* () { - if (!server.current) return true - const { http, type } = server.current - - while (true) { - const res = yield* Effect.promise(() => checkServerHealth(http)) - if (res.healthy) return true - if (checkMode() === "background" || type === "http") return false - } - }).pipe( - Effect.timeoutOrElse({ duration: "10 seconds", orElse: () => Effect.succeed(false) }), - Effect.ensuring(Effect.sync(() => setCheckMode("background"))), - Effect.runPromise, - ), - ) - const checking = createMemo( - () => checkMode() === "blocking" && ["unresolved", "pending"].includes(startupHealthCheck.state), - ) - - return ( - - - - } - > - { - if (checkMode() === "background") void healthCheckActions.refetch() - }} - onServerSelected={(key) => { - setCheckMode("blocking") - server.setActive(key) - void healthCheckActions.refetch() - }} - /> - } - > - {props.children} - - - ) +function v2NotificationHref(server: ServerContext, _directory: string, sessionID?: string) { + if (!sessionID) return "/" + return sessionHref(server.key, sessionID) } -function ConnectionError(props: { onRetry?: () => void; onServerSelected?: (key: ServerConnection.Key) => void }) { - const language = useLanguage() - const server = useServer() - const others = () => server.list.filter((s) => ServerConnection.key(s) !== server.key) - const name = createMemo(() => server.name || server.key) - const serverToken = "\u0000server\u0000" - const unreachable = createMemo(() => language.t("app.server.unreachable", { server: serverToken }).split(serverToken)) - - const timer = setInterval(() => props.onRetry?.(), 1000) - onCleanup(() => clearInterval(timer)) - - return ( -
-
- -

- {unreachable()[0]} - {name()} - {unreachable()[1]} -

-

{language.t("app.server.retrying")}

-
- 0}> -
- {language.t("app.server.otherServers")} -
- - {(conn) => { - const key = ServerConnection.key(conn) - return ( - - ) - }} - -
-
- -
- ) +function legacyNotificationHref(_server: ServerContext, directory: string, sessionID?: string) { + if (!sessionID) return `/${base64Encode(directory)}` + return `/${base64Encode(directory)}/session/${sessionID}` } -function ServerKey(props: ParentProps) { - const server = useServer() +function Application(props: ParentProps<{ router?: Component; disableHealthCheck?: boolean }>) { + const platform = usePlatform() + const settings = useSettings() + const desktopV2 = platform.platform === "desktop" && untrack(settings.general.newLayoutDesigns) + const href = desktopV2 ? v2NotificationHref : legacyNotificationHref return ( - - {props.children} - + + + {props.children} + {desktopV2 ? ( + + ) : ( + + )} + + ) } @@ -315,32 +152,18 @@ export function AppInterface(props: { canonicalLocalServer={props.canonicalLocalServer} servers={props.servers} > - - - ( - - - - - - {routerProps.children} - - - - - - )} - > - - - } /> - - - - - + + + + + + + {props.children} + + + + + ) } diff --git a/packages/app/src/app/legacy.tsx b/packages/app/src/app/legacy.tsx new file mode 100644 index 000000000000..56a9c0786388 --- /dev/null +++ b/packages/app/src/app/legacy.tsx @@ -0,0 +1,210 @@ +import { ServerProviders, SessionProviders } from "@/app/route-providers" +import { useGlobal } from "@/context/global" +import { useLanguage } from "@/context/language" +import { ServerConnection, serverName, useServer } from "@/context/server" +import { ServerContextProvider } from "@/context/server-context" +import { TabsProvider } from "@/context/tabs" +import DirectoryLayout from "@/pages/directory-layout" +import Layout from "@/pages/layout" +import { decode64 } from "@/utils/base64" +import { useCheckServerHealth } from "@/utils/server-health" +import { Splash } from "@opencode-ai/ui/logo" +import { type BaseRouterProps, Navigate, Route, Router, useParams } from "@solidjs/router" +import { Effect } from "effect" +import { + type Component, + createMemo, + createResource, + createSignal, + For, + lazy, + onCleanup, + type ParentProps, + Show, +} from "solid-js" +import { Dynamic } from "solid-js/web" + +const Home = lazy(() => import("@/pages/home").then((module) => ({ default: module.LegacyHome }))) +const Session = lazy(() => import("@/pages/session")) + +const SessionRoute = Object.assign( + () => ( + + + + ), + { preload: Session.preload }, +) + +function ConnectionGate(props: ParentProps<{ disableHealthCheck?: boolean }>) { + const server = useServer() + const checkServerHealth = useCheckServerHealth() + + const [checkMode, setCheckMode] = createSignal<"blocking" | "background">("blocking") + + // performs repeated health check with a grace period for + // non-http connections, otherwise fails instantly + const [startupHealthCheck, healthCheckActions] = createResource(() => + props.disableHealthCheck + ? true + : Effect.gen(function* () { + if (!server.current) return true + const { http, type } = server.current + + while (true) { + const res = yield* Effect.promise(() => checkServerHealth(http)) + if (res.healthy) return true + if (checkMode() === "background" || type === "http") return false + } + }).pipe( + Effect.timeoutOrElse({ duration: "10 seconds", orElse: () => Effect.succeed(false) }), + Effect.ensuring(Effect.sync(() => setCheckMode("background"))), + Effect.runPromise, + ), + ) + const checking = createMemo( + () => checkMode() === "blocking" && ["unresolved", "pending"].includes(startupHealthCheck.state), + ) + + return ( + + + + } + > + { + if (checkMode() === "background") void healthCheckActions.refetch() + }} + onServerSelected={(key) => { + setCheckMode("blocking") + server.setActive(key) + void healthCheckActions.refetch() + }} + /> + } + > + {props.children} + + + ) +} + +function ConnectionError(props: { onRetry?: () => void; onServerSelected?: (key: ServerConnection.Key) => void }) { + const language = useLanguage() + const server = useServer() + const others = () => server.list.filter((s) => ServerConnection.key(s) !== server.key) + const name = createMemo(() => server.name || server.key) + const serverToken = "\u0000server\u0000" + const unreachable = createMemo(() => language.t("app.server.unreachable", { server: serverToken }).split(serverToken)) + + const timer = setInterval(() => props.onRetry?.(), 1000) + onCleanup(() => clearInterval(timer)) + + return ( +
+
+ +

+ {unreachable()[0]} + {name()} + {unreachable()[1]} +

+

{language.t("app.server.retrying")}

+
+ 0}> +
+ {language.t("app.server.otherServers")} +
+ + {(conn) => { + const key = ServerConnection.key(conn) + return ( + + ) + }} + +
+
+ +
+ ) +} + +function ServerKey(props: ParentProps) { + const server = useServer() + return ( + + {props.children} + + ) +} + +function LegacyShell( + props: ParentProps<{ + directory: () => string | undefined + sessionID: () => string | undefined + }>, +) { + return ( + + {props.children} + + ) +} + +function LegacyProviders(props: ParentProps<{ disableHealthCheck?: boolean }>) { + const params = useParams<{ dir?: string; id?: string }>() + const server = useServer() + const global = useGlobal() + const directory = createMemo(() => (params.dir ? decode64(params.dir) : undefined)) + return ( + + + + {(connection) => ( + global.createServerCtx(connection)}> + params.id} + > + {props.children} + + + )} + + + + ) +} + +export function LegacyRoot(props: { router?: Component; disableHealthCheck?: boolean }) { + return ( + ( + + {routerProps.children} + + )} + > + + + } /> + + + + ) +} diff --git a/packages/app/src/app/route-providers.tsx b/packages/app/src/app/route-providers.tsx new file mode 100644 index 000000000000..2a31a651df5d --- /dev/null +++ b/packages/app/src/app/route-providers.tsx @@ -0,0 +1,38 @@ +import { CommentsProvider } from "@/context/comments" +import { FileProvider } from "@/context/file" +import { LayoutProvider } from "@/context/layout" +import { ModelsProvider } from "@/context/models" +import { NotificationProvider } from "@/context/notification" +import { PermissionProvider } from "@/context/permission" +import { PromptProvider } from "@/context/prompt" +import { TerminalProvider } from "@/context/terminal" +import type { Accessor, ParentProps } from "solid-js" + +export function ServerProviders( + props: ParentProps<{ + directory: Accessor + sessionID: Accessor + }>, +) { + return ( + + + + {props.children} + + + + ) +} + +export function SessionProviders(props: ParentProps) { + return ( + + + + {props.children} + + + + ) +} diff --git a/packages/app/src/app/v2.tsx b/packages/app/src/app/v2.tsx new file mode 100644 index 000000000000..ab8aca6b5eb9 --- /dev/null +++ b/packages/app/src/app/v2.tsx @@ -0,0 +1,288 @@ +import { ServerProviders, SessionProviders } from "@/app/route-providers" +import { DebugBar } from "@/components/debug-bar" +import { TitlebarV2 } from "@/components/titlebar-v2" +import { DirectoryProvider, type DirectoryState } from "@/context/directory" +import { useGlobal } from "@/context/global" +import { NavigationProvider, type Navigation } from "@/context/navigation" +import { RouteProvider, type AppRoute } from "@/context/route" +import { type ServerContext, ServerContextProvider } from "@/context/server-context" +import { TabsProvider, useTabs } from "@/context/tabs" +import { DirectoryDataProvider } from "@/pages/directory-layout" +import { ErrorPage } from "@/pages/error" +import { ToastRegion } from "@/utils/toast" +import { requireServerKey, rootSession, sessionHref, sessionQuery } from "@/utils/v2-route" +import type { Session as SessionInfo } from "@opencode-ai/sdk/v2/client" +import { Splash } from "@opencode-ai/ui/logo" +import { type BaseRouterProps, Route, Router, useParams, useSearchParams } from "@solidjs/router" +import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/solid-query" +import { type Accessor, type Component, createMemo, lazy, Match, onMount, type ParentProps, Show, Switch } from "solid-js" +import { Dynamic } from "solid-js/web" +import { makeEventListener } from "@solid-primitives/event-listener" +import { + collectNewSessionDeepLinks, + collectOpenProjectDeepLinks, + deepLinkEvent, + drainPendingDeepLinks, +} from "@/pages/layout/deep-links" + +const Home = lazy(() => import("@/pages/home").then((module) => ({ default: module.V2Home }))) +const Session = lazy(() => import("@/pages/session")) + +const SessionRoute = Object.assign( + () => ( + + + + ), + { preload: Session.preload }, +) + +function V2Shell(props: ParentProps) { + return ( +
+ +
{props.children}
+ {import.meta.env.DEV && } + +
+ ) +} + +function HomeRoute() { + const global = useGlobal() + return ( + ({ type: "home" })}> + + undefined} sessionID={() => undefined}> + + + + + + + ) +} + +function DraftRoute() { + const [search] = useSearchParams<{ draftId?: string }>() + const tabs = useTabs() + return ( + }> + + + ) +} + +function ReadyDraftRoute(props: { draftID?: string }) { + const global = useGlobal() + const tabs = useTabs() + const resolved = createMemo(() => { + const draftID = props.draftID + if (!draftID) throw new Error("Draft route requires a draft ID") + const draft = tabs.draft(draftID) + return { draftID, draft, server: global.servers.get(draft.server) } + }) + const route = createMemo(() => { + const current = resolved()! + return { + type: "draft", + draftID: current.draftID, + server: current.draft.server, + directory: current.draft.directory, + } + }) + const navigation = createMemo(() => { + const current = resolved() + return { + session: (sessionID) => sessionHref(current.draft.server, sessionID), + newSession: () => tabs.newDraft({ server: current.draft.server, directory: current.draft.directory }), + openSession: (sessionID) => tabs.openSession(current.draft.server, sessionID), + selectDirectory: (directory) => tabs.updateDraft(current.draftID, { directory }), + created: (session) => { + tabs.promoteDraft(current.draftID, { server: current.draft.server, sessionId: session.id }) + }, + } + }) + + return ( + resolved().server} + directory={() => resolved().draft.directory} + sessionID={() => undefined} + state={() => ({ type: "draft", id: resolved().draftID })} + navigation={navigation} + /> + ) +} + +type ResolvedServer = { id: string; ctx: ServerContext } +type ResolvedSession = { server: ServerContext; session: SessionInfo; tabID: string } + +function SessionRouteResolver() { + const params = useParams<{ serverKey: string; id: string }>() + const global = useGlobal() + const queryClient = useQueryClient() + const resolved = createMemo(() => { + const key = requireServerKey(params.serverKey) + return { id: params.id, ctx: global.servers.get(key) } + }) + const session = useQuery(() => { + const server = resolved() + return { + queryKey: ["v2", "resolved-session", server.ctx.key, server.ctx.instance, server.id] as const, + placeholderData: keepPreviousData, + queryFn: async () => { + const locator = await queryClient.ensureQueryData( + sessionQuery(server.ctx.key, server.ctx.instance, server.ctx.sdk, server.id), + ) + const root = await rootSession(locator.session, (id) => + queryClient + .ensureQueryData(sessionQuery(server.ctx.key, server.ctx.instance, server.ctx.sdk, id)) + .then((result) => result.session), + ) + return { server: server.ctx, session: locator.session, tabID: root.id } + }, + } + }) + return ( + }> + {(error) => } + + } + > + {(current) => ( + <> + + + + + + )} + + ) +} + +function RouteLoading(props: { overlay?: boolean }) { + return ( +
+ +
+ ) +} + +function ResolvedSessionRoute(props: { resolved: Accessor }) { + const tabs = useTabs() + const route = createMemo(() => { + const { server, session } = props.resolved() + return { + type: "session", + server: server.key, + directory: session.directory, + sessionID: session.id, + tabID: props.resolved().tabID, + } + }) + const navigation = createMemo(() => { + const current = props.resolved() + return { + session: (sessionID) => sessionHref(current.server.key, sessionID), + newSession: () => tabs.newDraft({ server: current.server.key, directory: current.session.directory }), + openSession: (sessionID) => tabs.openSession(current.server.key, sessionID), + selectDirectory: (directory) => tabs.newDraft({ server: current.server.key, directory }), + created: (session) => tabs.openSession(current.server.key, session.id), + } + }) + return ( + <> + + {(resolved) => } + + props.resolved().server} + directory={() => props.resolved().session.directory} + sessionID={() => props.resolved().session.id} + state={() => ({ type: "session", id: props.resolved().session.id })} + navigation={navigation} + /> + + ) +} + +function SessionAdmission(props: { server: ServerContext; sessionID: string }) { + const tabs = useTabs() + onMount(() => tabs.admitSession({ server: props.server.key, sessionId: props.sessionID })) + return null +} + +function V2DirectoryRoute(props: { + route: Accessor + server: Accessor + directory: Accessor + sessionID: Accessor + state: Accessor + navigation: Accessor +}) { + return ( + + + + + + + + + + + + + + + + ) +} + +function V2DeepLinks() { + const global = useGlobal() + const tabs = useTabs() + + const open = (urls: string[]) => { + const server = global.servers.first() + if (!server.isLocal) return + collectOpenProjectDeepLinks(urls).forEach((directory) => tabs.newDraft({ server: server.key, directory })) + collectNewSessionDeepLinks(urls).forEach((link) => + tabs.newDraft({ server: server.key, directory: link.directory }, link.prompt), + ) + } + + onMount(() => { + open(drainPendingDeepLinks(window)) + makeEventListener(window, deepLinkEvent, (event) => open((event as CustomEvent<{ urls: string[] }>).detail.urls)) + }) + return null +} + +export function V2Root(props: { router?: Component }) { + return ( + ( + + + {routerProps.children} + + )} + > + + + + + ) +} diff --git a/packages/app/src/components/dialog-connect-provider.tsx b/packages/app/src/components/dialog-connect-provider.tsx index 4d477ea273f3..c27c33266748 100644 --- a/packages/app/src/components/dialog-connect-provider.tsx +++ b/packages/app/src/components/dialog-connect-provider.tsx @@ -12,21 +12,20 @@ import { showToast } from "@/utils/toast" import { createEffect, createMemo, createResource, Match, onCleanup, onMount, Switch } from "solid-js" import { createStore, produce } from "solid-js/store" import { Link } from "@/components/link" -import { useServerSDK } from "@/context/server-sdk" -import { useServerSync } from "@/context/server-sync" +import { useServerSDK, useServerSync } from "@/context/server-context" import { useLanguage } from "@/context/language" import { useProviders } from "@/hooks/use-providers" -export function DialogConnectProvider(props: { provider: string }) { +export function DialogConnectProvider(props: { provider: string; directory?: string }) { const dialog = useDialog() const serverSync = useServerSync() const serverSDK = useServerSDK() const language = useLanguage() - const providers = useProviders() + const providers = useProviders(() => props.directory) const all = () => { void import("./dialog-select-provider").then((x) => { - dialog.show(() => ) + dialog.show(() => ) }) } @@ -41,7 +40,7 @@ export function DialogConnectProvider(props: { provider: string }) { }) const provider = createMemo( - () => providers.all().get(props.provider) ?? serverSync.data.provider.all.get(props.provider)!, + () => providers.all().get(props.provider) ?? serverSync().data.provider.all.get(props.provider)!, ) const fallback = createMemo(() => [ { @@ -52,16 +51,18 @@ export function DialogConnectProvider(props: { provider: string }) { const [auth] = createResource( () => props.provider, async () => { - const cached = serverSync.data.provider_auth[props.provider] + const sync = serverSync() + const sdk = serverSDK() + const cached = sync.data.provider_auth[props.provider] if (cached) return cached - const res = await serverSDK.client.provider.auth() + const res = await sdk.client.provider.auth() if (!alive.value) return fallback() - serverSync.set("provider_auth", res.data ?? {}) + sync.set("provider_auth", res.data ?? {}) return res.data?.[props.provider] ?? fallback() }, ) - const loading = createMemo(() => auth.loading && !serverSync.data.provider_auth[props.provider]) - const methods = createMemo(() => auth.latest ?? serverSync.data.provider_auth[props.provider] ?? fallback()) + const loading = createMemo(() => auth.loading && !serverSync().data.provider_auth[props.provider]) + const methods = createMemo(() => auth.latest ?? serverSync().data.provider_auth[props.provider] ?? fallback()) const [store, setStore] = createStore({ methodIndex: undefined as undefined | number, authorization: undefined as undefined | ProviderAuthAuthorization, @@ -143,6 +144,7 @@ export function DialogConnectProvider(props: { provider: string }) { } async function selectMethod(index: number, inputs?: Record) { + const sdk = serverSDK() if (timer.current !== undefined) { clearTimeout(timer.current) timer.current = undefined @@ -158,7 +160,7 @@ export function DialogConnectProvider(props: { provider: string }) { } dispatch({ type: "auth.pending" }) const start = Date.now() - await serverSDK.client.provider.oauth + await sdk.client.provider.oauth .authorize( { providerID: props.provider, @@ -331,7 +333,8 @@ export function DialogConnectProvider(props: { provider: string }) { }) async function complete() { - await serverSDK.client.global.dispose() + const sdk = serverSDK() + await sdk.client.global.dispose() dialog.close() showToast({ variant: "success", @@ -409,7 +412,8 @@ export function DialogConnectProvider(props: { provider: string }) { } setFormStore("error", undefined) - await serverSDK.client.auth.set({ + const sdk = serverSDK() + await sdk.client.auth.set({ providerID: props.provider, auth: { type: "api", @@ -480,7 +484,8 @@ export function DialogConnectProvider(props: { provider: string }) { } setFormStore("error", undefined) - const result = await serverSDK.client.provider.oauth + const sdk = serverSDK() + const result = await sdk.client.provider.oauth .callback({ providerID: props.provider, method: store.methodIndex, @@ -533,7 +538,8 @@ export function DialogConnectProvider(props: { provider: string }) { onMount(() => { void (async () => { - const result = await serverSDK.client.provider.oauth + const sdk = serverSDK() + const result = await sdk.client.provider.oauth .callback({ providerID: props.provider, method: store.methodIndex, diff --git a/packages/app/src/components/dialog-custom-provider.tsx b/packages/app/src/components/dialog-custom-provider.tsx index 38690bb24106..8ee0b1d99bce 100644 --- a/packages/app/src/components/dialog-custom-provider.tsx +++ b/packages/app/src/components/dialog-custom-provider.tsx @@ -9,14 +9,14 @@ import { showToast } from "@/utils/toast" import { batch, For } from "solid-js" import { createStore, produce } from "solid-js/store" import { Link } from "@/components/link" -import { useServerSDK } from "@/context/server-sdk" -import { useServerSync } from "@/context/server-sync" +import { useServerSDK, useServerSync } from "@/context/server-context" import { useLanguage } from "@/context/language" import { type FormState, headerRow, modelRow, validateCustomProvider } from "./dialog-custom-provider-form" import { DialogSelectProvider } from "./dialog-select-provider" type Props = { back?: "providers" | "close" + directory?: string } export function DialogCustomProvider(props: Props) { @@ -40,7 +40,7 @@ export function DialogCustomProvider(props: Props) { dialog.close() return } - dialog.show(() => ) + dialog.show(() => ) } const addModel = () => { @@ -105,8 +105,8 @@ export function DialogCustomProvider(props: Props) { const output = validateCustomProvider({ form, t: language.t, - disabledProviders: serverSync.data.config.disabled_providers ?? [], - existingProviderIDs: new Set(serverSync.data.provider.all.keys()), + disabledProviders: serverSync().data.config.disabled_providers ?? [], + existingProviderIDs: new Set(serverSync().data.provider.all.keys()), }) batch(() => { setForm("err", output.err) @@ -118,11 +118,13 @@ export function DialogCustomProvider(props: Props) { const saveMutation = useMutation(() => ({ mutationFn: async (result: NonNullable>) => { - const disabledProviders = serverSync.data.config.disabled_providers ?? [] + const sync = serverSync() + const sdk = serverSDK() + const disabledProviders = sync.data.config.disabled_providers ?? [] const nextDisabled = disabledProviders.filter((id) => id !== result.providerID) if (result.key) { - await serverSDK.client.auth.set({ + await sdk.client.auth.set({ providerID: result.providerID, auth: { type: "api", @@ -131,7 +133,7 @@ export function DialogCustomProvider(props: Props) { }) } - await serverSync.updateConfig({ + await sync.updateConfig({ provider: { [result.providerID]: result.config }, disabled_providers: nextDisabled, }) diff --git a/packages/app/src/components/dialog-edit-project.tsx b/packages/app/src/components/dialog-edit-project.tsx index 29ee4dfeabdd..34891ac73ad8 100644 --- a/packages/app/src/components/dialog-edit-project.tsx +++ b/packages/app/src/components/dialog-edit-project.tsx @@ -76,23 +76,25 @@ export function DialogEditProject(props: { project: LocalProject; server: Server const saveMutation = useMutation(() => ({ mutationFn: async () => { + const sdk = serverSDK() + const sync = serverSync() const name = store.name.trim() === folderName() ? "" : store.name.trim() const start = store.startup.trim() if (props.project.id && props.project.id !== "global") { - await serverSDK().client.project.update({ + await sdk.client.project.update({ projectID: props.project.id, directory: props.project.worktree, name, icon: { color: store.color || "", override: store.iconOverride || "" }, commands: { start }, }) - serverSync().project.icon(props.project.worktree, store.iconOverride || undefined) + sync.project.icon(props.project.worktree, store.iconOverride || undefined) dialog.close() return } - serverSync().project.meta(props.project.worktree, { + sync.project.meta(props.project.worktree, { name, icon: { color: store.color || undefined, override: store.iconOverride || undefined }, commands: { start: start || undefined }, diff --git a/packages/app/src/components/dialog-fork.tsx b/packages/app/src/components/dialog-fork.tsx index d0d105e078e9..aa63152b76a9 100644 --- a/packages/app/src/components/dialog-fork.tsx +++ b/packages/app/src/components/dialog-fork.tsx @@ -1,7 +1,5 @@ import { Component, createMemo } from "solid-js" -import { useNavigate, useParams } from "@solidjs/router" -import { useSync } from "@/context/sync" -import { useSDK } from "@/context/sdk" +import { useDirectory, useSync } from "@/context/directory" import { usePrompt } from "@/context/prompt" import { useDialog } from "@opencode-ai/ui/context/dialog" import { Dialog } from "@opencode-ai/ui/dialog" @@ -9,8 +7,8 @@ import { List } from "@opencode-ai/ui/list" import { showToast } from "@/utils/toast" import { extractPromptFromParts } from "@/utils/prompt" import type { TextPart as SDKTextPart } from "@opencode-ai/sdk/v2/client" -import { base64Encode } from "@opencode-ai/core/util/encode" import { useLanguage } from "@/context/language" +import { useNavigation } from "@/context/navigation" interface ForkableMessage { id: string @@ -23,25 +21,24 @@ function formatTime(date: Date): string { } export const DialogFork: Component = () => { - const params = useParams() - const navigate = useNavigate() + const directory = useDirectory() + const navigation = useNavigation() const sync = useSync() - const sdk = useSDK() const prompt = usePrompt() const dialog = useDialog() const language = useLanguage() const messages = createMemo((): ForkableMessage[] => { - const sessionID = params.id + const sessionID = directory().sessionID if (!sessionID) return [] - const msgs = sync.data.message[sessionID] ?? [] + const msgs = sync().data.message[sessionID] ?? [] const result: ForkableMessage[] = [] for (const message of msgs) { if (message.role !== "user") continue - const parts = sync.data.part[message.id] ?? [] + const parts = sync().data.part[message.id] ?? [] const textPart = parts.find((x): x is SDKTextPart => x.type === "text" && !x.synthetic && !x.ignored) if (!textPart) continue @@ -58,17 +55,18 @@ export const DialogFork: Component = () => { const handleSelect = (item: ForkableMessage | undefined) => { if (!item) return - const sessionID = params.id + const sessionID = directory().sessionID if (!sessionID) return - const parts = sync.data.part[item.id] ?? [] + const parts = sync().data.part[item.id] ?? [] + const current = directory() const restored = extractPromptFromParts(parts, { - directory: sdk.directory, + directory: current.sdk.directory, attachmentName: language.t("common.attachment"), }) - const dir = base64Encode(sdk.directory) + const destination = navigation() - sdk.client.session + current.sdk.client.session .fork({ sessionID, messageID: item.id }) .then((forked) => { if (!forked.data) { @@ -76,8 +74,12 @@ export const DialogFork: Component = () => { return } dialog.close() - prompt.set(restored, undefined, { dir, id: forked.data.id }) - navigate(`/${dir}/session/${forked.data.id}`) + prompt.set(restored, undefined, { + serverScope: current.server.scope, + directory: current.directory, + state: { type: "session", id: forked.data.id }, + }) + destination.openSession(forked.data.id) }) .catch((err: unknown) => { const message = err instanceof Error ? err.message : String(err) diff --git a/packages/app/src/components/dialog-manage-models.tsx b/packages/app/src/components/dialog-manage-models.tsx index b46034bbad96..79eabd495205 100644 --- a/packages/app/src/components/dialog-manage-models.tsx +++ b/packages/app/src/components/dialog-manage-models.tsx @@ -9,14 +9,16 @@ import { popularProviders } from "@/hooks/use-providers" import { useLanguage } from "@/context/language" import { useDialog } from "@opencode-ai/ui/context/dialog" import { DialogSelectProvider } from "./dialog-select-provider" +import { useDirectory } from "@/context/directory" export const DialogManageModels: Component = () => { const local = useLocal() + const directory = useDirectory() const language = useLanguage() const dialog = useDialog() const handleConnectProvider = () => { - dialog.show(() => ) + dialog.show(() => ) } const providerRank = (id: string) => popularProviders.indexOf(id) const providerList = (providerID: string) => local.model.list().filter((x) => x.provider.id === providerID) diff --git a/packages/app/src/components/dialog-select-file.tsx b/packages/app/src/components/dialog-select-file.tsx index 5c024ec3b4cb..3834da2ee47a 100644 --- a/packages/app/src/components/dialog-select-file.tsx +++ b/packages/app/src/components/dialog-select-file.tsx @@ -4,19 +4,16 @@ import { FileIcon } from "@opencode-ai/ui/file-icon" import { Icon } from "@opencode-ai/ui/icon" import { Keybind } from "@opencode-ai/ui/keybind" import { List } from "@opencode-ai/ui/list" -import { base64Encode } from "@opencode-ai/core/util/encode" import { getDirectory, getFilename } from "@opencode-ai/core/util/path" -import { useNavigate } from "@solidjs/router" +import { useNavigation } from "@/context/navigation" import { createMemo, createSignal, Match, onCleanup, Show, Switch } from "solid-js" import { formatKeybind, useCommand, type CommandOption } from "@/context/command" -import { useServerSDK } from "@/context/server-sdk" -import { useServerSync } from "@/context/server-sync" +import { useServerSDK, useServerSync } from "@/context/server-context" import { useLayout } from "@/context/layout" import { useFile } from "@/context/file" import { useLanguage } from "@/context/language" import { useSessionLayout } from "@/pages/session/session-layout" import { createSessionTabs } from "@/pages/session/helpers" -import { decode64 } from "@/utils/base64" import { getRelativeTime } from "@/utils/time" type EntryType = "command" | "file" | "session" @@ -203,11 +200,12 @@ function createSessionEntries(props: { const current = state.token const dirs = props.workspaces() if (dirs.length === 0) return [] as Entry[] + const serverSDK = props.serverSDK() state.inflight = Promise.all( dirs.map((directory) => { const description = props.label(directory) - return props.serverSDK.client.session + return serverSDK.client.session .list({ directory, roots: true }) .then((x) => (x.data ?? []) @@ -267,17 +265,17 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil const layout = useLayout() const file = useFile() const dialog = useDialog() - const navigate = useNavigate() + const navigation = useNavigation() const serverSDK = useServerSDK() const serverSync = useServerSync() - const { params, tabs, view } = useSessionLayout() + const { directory, tabs, view } = useSessionLayout() const filesOnly = () => props.mode === "files" const state = { cleanup: undefined as (() => void) | void, committed: false } const [grouped, setGrouped] = createSignal(false) const commandEntries = createCommandEntries({ filesOnly, command, language }) const fileEntries = createFileEntries({ file, tabs, language }) - const projectDirectory = createMemo(() => decode64(params.dir) ?? "") + const projectDirectory = createMemo(directory) const project = createMemo(() => { const directory = projectDirectory() if (!directory) return @@ -292,14 +290,14 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil if (directory && !dirs.includes(directory)) return [...dirs, directory] return dirs }) - const homedir = createMemo(() => serverSync.data.path.home) + const homedir = createMemo(() => serverSync().data.path.home) const label = (directory: string) => { const current = project() const kind = current && directory === current.worktree ? language.t("workspace.type.local") : language.t("workspace.type.sandbox") - const [store] = serverSync.child(directory, { bootstrap: false }) + const [store] = serverSync().child(directory, { bootstrap: false }) const home = homedir() const path = home ? directory.replace(home, "~") : directory const name = store.vcs?.branch ?? getFilename(directory) @@ -369,8 +367,8 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil } if (item.type === "session") { - if (!item.directory || !item.sessionID) return - navigate(`/${base64Encode(item.directory)}/session/${item.sessionID}`) + if (!item.sessionID) return + navigation().openSession(item.sessionID) return } diff --git a/packages/app/src/components/dialog-select-mcp.tsx b/packages/app/src/components/dialog-select-mcp.tsx index 49d8ee677285..c4052c7d9743 100644 --- a/packages/app/src/components/dialog-select-mcp.tsx +++ b/packages/app/src/components/dialog-select-mcp.tsx @@ -1,12 +1,11 @@ import { useMutation, useQueryClient } from "@tanstack/solid-query" import { Component, createMemo, Show } from "solid-js" -import { useSync } from "@/context/sync" -import { useSDK } from "@/context/sdk" +import { useSDK, useSync } from "@/context/directory" import { Dialog } from "@opencode-ai/ui/dialog" import { List } from "@opencode-ai/ui/list" import { Switch } from "@opencode-ai/ui/switch" import { useLanguage } from "@/context/language" -import { useQueryOptions } from "@/context/server-sync" +import { useServerContext } from "@/context/server-context" import { pathKey } from "@/utils/path-key" const statusLabels = { @@ -22,28 +21,30 @@ export const DialogSelectMcp: Component = () => { const sdk = useSDK() const language = useLanguage() const queryClient = useQueryClient() - const queryOptions = useQueryOptions() + const server = useServerContext() + const queryOptions = () => server().sync.queryOptions const items = createMemo(() => - Object.entries(sync.data.mcp ?? {}) + Object.entries(sync().data.mcp ?? {}) .map(([name, status]) => ({ name, status: status.status })) .sort((a, b) => a.name.localeCompare(b.name)), ) const toggle = useMutation(() => ({ mutationFn: async (name: string) => { - const status = sync.data.mcp[name] + const current = sdk() + const status = sync().data.mcp[name] if (status?.status === "connected") { - await sdk.client.mcp.disconnect({ name }) + await current.client.mcp.disconnect({ name }) return } if (status?.status === "needs_auth") { - await sdk.client.mcp.auth.authenticate({ name }) + await current.client.mcp.auth.authenticate({ name }) return } - await sdk.client.mcp.connect({ name }) + await current.client.mcp.connect({ name }) }, - onSuccess: () => queryClient.refetchQueries(queryOptions.mcp(pathKey(sync.directory))), + onSuccess: () => queryClient.refetchQueries(queryOptions().mcp(pathKey(sync().directory))), })) const enabledCount = createMemo(() => items().filter((i) => i.status === "connected").length) @@ -68,7 +69,7 @@ export const DialogSelectMcp: Component = () => { }} > {(i) => { - const mcpStatus = () => sync.data.mcp[i.name] + const mcpStatus = () => sync().data.mcp[i.name] const status = () => mcpStatus()?.status const statusLabel = () => { const key = status() ? statusLabels[status() as keyof typeof statusLabels] : undefined diff --git a/packages/app/src/components/dialog-select-model-unpaid.tsx b/packages/app/src/components/dialog-select-model-unpaid.tsx index fae743bb81bd..69bf98e4f926 100644 --- a/packages/app/src/components/dialog-select-model-unpaid.tsx +++ b/packages/app/src/components/dialog-select-model-unpaid.tsx @@ -10,24 +10,26 @@ import { useLocal } from "@/context/local" import { popularProviders, useProviders } from "@/hooks/use-providers" import { ModelTooltip } from "./model-tooltip" import { useLanguage } from "@/context/language" +import { useDirectory } from "@/context/directory" type ModelState = ReturnType["model"] export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props) => { const model = props.model ?? useLocal().model + const directory = useDirectory() const dialog = useDialog() - const providers = useProviders() + const providers = useProviders(() => directory().directory) const language = useLanguage() const connect = (provider: string) => { void import("./dialog-connect-provider").then((x) => { - dialog.show(() => ) + dialog.show(() => ) }) } const all = () => { void import("./dialog-select-provider").then((x) => { - dialog.show(() => ) + dialog.show(() => ) }) } diff --git a/packages/app/src/components/dialog-select-model.tsx b/packages/app/src/components/dialog-select-model.tsx index ca2643c3b5ba..bc1f1d2e22fb 100644 --- a/packages/app/src/components/dialog-select-model.tsx +++ b/packages/app/src/components/dialog-select-model.tsx @@ -12,6 +12,7 @@ import { List } from "@opencode-ai/ui/list" import { Tooltip } from "@opencode-ai/ui/tooltip" import { ModelTooltip } from "./model-tooltip" import { useLanguage } from "@/context/language" +import { useDirectory } from "@/context/directory" const isFree = (provider: string, cost: { input: number } | undefined) => provider === "opencode" && (!cost || cost.input === 0) @@ -104,6 +105,7 @@ export function ModelSelectorPopover(props: { dismiss: null, }) const dialog = useDialog() + const directory = useDirectory() const close = (dismiss: Dismiss) => { setStore("dismiss", dismiss) @@ -120,7 +122,7 @@ export function ModelSelectorPopover(props: { const handleConnectProvider = () => { close("provider") void import("./dialog-select-provider").then((x) => { - dialog.show(() => ) + dialog.show(() => ) }) } const language = useLanguage() @@ -198,11 +200,12 @@ export function ModelSelectorPopover(props: { export const DialogSelectModel: Component<{ provider?: string; model?: ModelState }> = (props) => { const dialog = useDialog() + const directory = useDirectory() const language = useLanguage() const provider = () => { void import("./dialog-select-provider").then((x) => { - dialog.show(() => ) + dialog.show(() => ) }) } diff --git a/packages/app/src/components/dialog-select-provider.tsx b/packages/app/src/components/dialog-select-provider.tsx index 89310286daf2..dc5489e10938 100644 --- a/packages/app/src/components/dialog-select-provider.tsx +++ b/packages/app/src/components/dialog-select-provider.tsx @@ -11,9 +11,9 @@ import { DialogCustomProvider } from "./dialog-custom-provider" const CUSTOM_ID = "_custom" -export const DialogSelectProvider: Component = () => { +export const DialogSelectProvider: Component<{ directory?: string }> = (props) => { const dialog = useDialog() - const providers = useProviders() + const providers = useProviders(() => props.directory) const language = useLanguage() const popularGroup = () => language.t("dialog.provider.group.popular") @@ -56,10 +56,10 @@ export const DialogSelectProvider: Component = () => { onSelect={(x) => { if (!x) return if (x.id === CUSTOM_ID) { - dialog.show(() => ) + dialog.show(() => ) return } - dialog.show(() => ) + dialog.show(() => ) }} > {(i) => ( diff --git a/packages/app/src/components/dialog-select-server.tsx b/packages/app/src/components/dialog-select-server.tsx index 90a644097b3d..1c08418bd2cf 100644 --- a/packages/app/src/components/dialog-select-server.tsx +++ b/packages/app/src/components/dialog-select-server.tsx @@ -9,7 +9,7 @@ import { TextField } from "@opencode-ai/ui/text-field" import { useMutation } from "@tanstack/solid-query" import { showToast } from "@/utils/toast" import { useNavigate } from "@solidjs/router" -import { createEffect, createMemo, createResource, Show } from "solid-js" +import { batch, createEffect, createMemo, createResource, Show } from "solid-js" import { createStore } from "solid-js/store" import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row" import { useGlobal } from "@/context/global" @@ -19,6 +19,7 @@ import { normalizeServerUrl, ServerConnection, useServer } from "@/context/serve import { type ServerHealth, useCheckServerHealth } from "@/utils/server-health" import { useSettings } from "@/context/settings" import { useTabs } from "@/context/tabs" +import { useServerContext } from "@/context/server-context" const DEFAULT_USERNAME = "opencode" @@ -193,6 +194,7 @@ export function useServerManagementController(options: { onSelect?: () => void } const navigate = useNavigate() const server = useServer() const tabs = useTabs() + const currentServer = useServerContext() const global = useGlobal() const platform = usePlatform() const language = useLanguage() @@ -303,7 +305,7 @@ export function useServerManagementController(options: { onSelect?: () => void } return } if (normalized === input.original.http.url) { - server.add(conn) + global.servers.replace(ServerConnection.key(input.original), conn) } else { replaceServer(input.original, conn) } @@ -314,13 +316,11 @@ export function useServerManagementController(options: { onSelect?: () => void } const replaceServer = (original: ServerConnection.Http, next: ServerConnection.Http) => { const originalKey = ServerConnection.key(original) - const active = server.key - tabs.removeServer(originalKey) - const newConn = server.add(next) - if (!newConn) return - const nextActive = active === originalKey ? ServerConnection.key(newConn) : active - if (nextActive) server.setActive(nextActive) - server.remove(originalKey) + batch(() => { + if (currentServer().key === originalKey) navigate("/") + tabs.removeServer(originalKey) + global.servers.replace(originalKey, next) + }) } const items = createMemo(() => { @@ -505,8 +505,11 @@ export function useServerManagementController(options: { onSelect?: () => void } }) async function handleRemove(url: ServerConnection.Key) { - tabs.removeServer(url) - server.remove(url) + batch(() => { + if (currentServer().key === url) navigate("/") + tabs.removeServer(url) + global.servers.remove(url) + }) if ((await platform.getDefaultServer?.()) === url) { void platform.setDefaultServer?.(null) } diff --git a/packages/app/src/components/dialog-settings.tsx b/packages/app/src/components/dialog-settings.tsx index 20d71f4bfd44..54cf2c831614 100644 --- a/packages/app/src/components/dialog-settings.tsx +++ b/packages/app/src/components/dialog-settings.tsx @@ -10,7 +10,7 @@ import { SettingsProviders } from "./settings-providers" import { SettingsModels } from "./settings-models" import { SettingsServers } from "./settings-servers" -export const DialogSettings: Component = () => { +export const DialogSettings: Component<{ directory?: string; sessionID?: string }> = (props) => { const language = useLanguage() const platform = usePlatform() @@ -61,7 +61,7 @@ export const DialogSettings: Component = () => { - + @@ -70,10 +70,10 @@ export const DialogSettings: Component = () => { - + - + diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx index 8e4913b1f5b0..a808f84f0fd3 100644 --- a/packages/app/src/components/prompt-input.tsx +++ b/packages/app/src/components/prompt-input.tsx @@ -31,10 +31,8 @@ import { FileAttachmentPart, } from "@/context/prompt" import { useLayout } from "@/context/layout" -import { useNavigate } from "@solidjs/router" -import { useSDK } from "@/context/sdk" -import { useServer } from "@/context/server" -import { useSync } from "@/context/sync" +import { useSDK, useSync } from "@/context/directory" +import { useServerContext } from "@/context/server-context" import { useComments } from "@/context/comments" import { Button } from "@opencode-ai/ui/button" import { DockShellForm, DockTray } from "@opencode-ai/ui/dock-surface" @@ -74,10 +72,9 @@ import { PromptDragOverlay } from "./prompt-input/drag-overlay" import { promptPlaceholder } from "./prompt-input/placeholder" import { ImagePreview } from "@opencode-ai/ui/image-preview" import { useQueries } from "@tanstack/solid-query" -import { useQueryOptions } from "@/context/server-sync" import { pathKey } from "@/utils/path-key" -import { base64Encode } from "@opencode-ai/core/util/encode" import { displayName } from "@/pages/layout/helpers" +import { useNavigation } from "@/context/navigation" interface PromptInputProps { class?: string @@ -123,24 +120,24 @@ const EXAMPLES = [ export const PromptInput: Component = (props) => { const sdk = useSDK() - const navigate = useNavigate() - const queryOptions = useQueryOptions() + const server = useServerContext() + const queryOptions = () => server().sync.queryOptions const sync = useSync() const local = useLocal() const files = useFile() const prompt = usePrompt() const layout = useLayout() - const server = useServer() + const navigation = useNavigation() const comments = useComments() const dialog = useDialog() - const providers = useProviders() + const providers = useProviders(() => sdk().directory) const command = useCommand() const permission = usePermission() const language = useLanguage() const platform = usePlatform() const settings = useSettings() - const { params, tabs, view } = useSessionLayout() + const { sessionID: currentSessionID, tabs, view } = useSessionLayout() let editorRef!: HTMLDivElement let fileInputRef: HTMLInputElement | undefined let scrollRef!: HTMLDivElement @@ -198,10 +195,10 @@ export const PromptInput: Component = (props) => { }).activeFileTab const commentInReview = (path: string) => { - const sessionID = params.id + const sessionID = currentSessionID() if (!sessionID) return false - const diffs = sync.data.session_diff[sessionID] + const diffs = sync().data.session_diff[sessionID] if (!diffs) return false return diffs.some((diff) => diff.file === path) } @@ -263,8 +260,8 @@ export const PromptInput: Component = (props) => { return paths }) - const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined)) - const working = createMemo(() => sync.data.session_working(params.id ?? "")) + const info = createMemo(() => (currentSessionID() ? sync().session.get(currentSessionID()!) : undefined)) + const working = createMemo(() => sync().data.session_working(currentSessionID() ?? "")) const imageAttachments = createMemo(() => prompt.current().filter((part): part is ImageAttachmentPart => part.type === "image"), ) @@ -341,9 +338,9 @@ export const PromptInput: Component = (props) => { }) const hasUserPrompt = createMemo(() => { - const sessionID = params.id + const sessionID = currentSessionID() if (!sessionID) return false - const messages = sync.data.message[sessionID] + const messages = sync().data.message[sessionID] if (!messages) return false return messages.some((m) => m.role === "user") }) @@ -554,8 +551,8 @@ export const PromptInput: Component = (props) => { } createEffect(() => { - params.id - if (params.id) return + currentSessionID() + if (currentSessionID()) return if (!suggest()) return const interval = setInterval(() => { setStore("placeholder", (prev) => (prev + 1) % EXAMPLES.length) @@ -584,7 +581,7 @@ export const PromptInput: Component = (props) => { } const agentList = createMemo(() => - sync.data.agent + sync().data.agent .filter((agent) => !agent.hidden && agent.mode !== "primary") .map((agent): AtOption => ({ type: "agent", name: agent.name, display: agent.name })), ) @@ -653,7 +650,7 @@ export const PromptInput: Component = (props) => { type: "builtin" as const, })) - const custom = sync.data.command.map((cmd) => ({ + const custom = sync().data.command.map((cmd) => ({ id: `custom.${cmd.name}`, trigger: cmd.name, title: cmd.name, @@ -1106,9 +1103,9 @@ export const PromptInput: Component = (props) => { // Check provider variants directly: `variants` also includes the UI-only default option. const showVariantControl = createMemo(() => local.model.variant.list().length > 0) const accepting = createMemo(() => { - const id = params.id - if (!id) return permission.isAutoAcceptingDirectory(sdk.directory) - return permission.isAutoAccepting(id, sdk.directory) + const id = currentSessionID() + if (!id) return permission.isAutoAcceptingDirectory(sdk().directory) + return permission.isAutoAccepting(id, sdk().directory) }) const { abort, handleSubmit } = createPromptSubmit({ @@ -1299,9 +1296,9 @@ export const PromptInput: Component = (props) => { const [agentsQuery, globalProvidersQuery, providersQuery] = useQueries(() => ({ queries: [ - queryOptions.agents(pathKey(sdk.directory)), - queryOptions.providers(null), - queryOptions.providers(pathKey(sdk.directory)), + queryOptions().agents(pathKey(sdk().directory)), + queryOptions().providers(null), + queryOptions().providers(pathKey(sdk().directory)), ], })) @@ -1346,7 +1343,7 @@ export const PromptInput: Component = (props) => { (project) => pathKey(project.worktree) === key || project.sandboxes?.some((sandbox) => pathKey(sandbox) === key), ) } - const selectedProject = createMemo(() => projectForDirectory(sdk.directory)) + const selectedProject = createMemo(() => projectForDirectory(sdk().directory)) const projectResults = createMemo(() => { const search = picker.projectSearch.trim().toLowerCase() if (!search) return projects() @@ -1363,18 +1360,17 @@ export const PromptInput: Component = (props) => { return } layout.projects.open(worktree) - server.projects.touch(worktree) - navigate(`/${base64Encode(worktree)}/session`) + server().projects.touch(worktree) + navigation().selectDirectory(worktree) } const addProject = async () => { - const conn = server.current - if (!conn) return + const conn = server().connection const select = (result: string | string[] | null) => { const directory = Array.isArray(result) ? result[0] : result if (!directory) return selectProject(directory) } - if (platform.openDirectoryPickerDialog && server.isLocal()) { + if (platform.openDirectoryPickerDialog && server().isLocal) { select(await platform.openDirectoryPickerDialog({ title: language.t("command.project.open") })) return } diff --git a/packages/app/src/components/prompt-input/submit.test.ts b/packages/app/src/components/prompt-input/submit.test.ts index 092731a9ea7a..b6b9709cd393 100644 --- a/packages/app/src/components/prompt-input/submit.test.ts +++ b/packages/app/src/components/prompt-input/submit.test.ts @@ -61,6 +61,7 @@ beforeAll(async () => { mock.module("@solidjs/router", () => ({ useNavigate: () => () => undefined, useParams: () => params, + useSearchParams: () => [{}], })) mock.module("@opencode-ai/sdk/v2/client", () => ({ @@ -124,7 +125,8 @@ beforeAll(async () => { }), })) - mock.module("@/context/sdk", () => ({ + mock.module("@/context/directory", () => ({ + useDirectory: () => () => ({ sessionID: params.id }), useSDK: () => { const sdk = { scope: "local", @@ -135,11 +137,8 @@ beforeAll(async () => { return clientFor(opts.directory) }, } - return sdk + return () => sdk }, - })) - - mock.module("@/context/sync", () => ({ useSync: () => ({ data: { command: [] }, session: { @@ -163,7 +162,7 @@ beforeAll(async () => { }), })) - mock.module("@/context/server-sync", () => ({ + mock.module("@/context/server-context", () => ({ useServerSync: () => ({ child: (directory: string) => { syncedDirectories.push(directory) diff --git a/packages/app/src/components/prompt-input/submit.ts b/packages/app/src/components/prompt-input/submit.ts index 024bdd7ae2e6..d767df05a3a2 100644 --- a/packages/app/src/components/prompt-input/submit.ts +++ b/packages/app/src/components/prompt-input/submit.ts @@ -1,24 +1,30 @@ import type { Message, Session } from "@opencode-ai/sdk/v2/client" import { showToast } from "@/utils/toast" -import { base64Encode } from "@opencode-ai/core/util/encode" import { Binary } from "@opencode-ai/core/util/binary" -import { useNavigate, useParams } from "@solidjs/router" import { batch, type Accessor } from "solid-js" import type { FileSelection } from "@/context/file" -import { useServerSync } from "@/context/server-sync" +import type { ServerSync } from "@/context/server-sync" +import { useServerSync } from "@/context/server-context" import { useLanguage } from "@/context/language" import { useLayout } from "@/context/layout" import { useLocal } from "@/context/local" import { usePermission } from "@/context/permission" import { type ContextItem, type ImageAttachmentPart, type Prompt, usePrompt } from "@/context/prompt" -import { useSDK } from "@/context/sdk" -import { useSync } from "@/context/sync" +import { + DirectoryState, + useDirectory, + useSDK, + useSync, + type DirectorySDK, + type DirectorySync, +} from "@/context/directory" import { Identifier } from "@/utils/id" import { Worktree as WorktreeState } from "@/utils/worktree" import { buildRequestParts } from "./build-request-parts" import { setCursorPosition } from "./editor-dom" import { formatServerError } from "@/utils/server-errors" import { ScopedKey } from "@/utils/server-scope" +import { useNavigation } from "@/context/navigation" type PendingPrompt = { abort: AbortController @@ -38,9 +44,9 @@ export type FollowupDraft = { } type FollowupSendInput = { - client: ReturnType["client"] - serverSync: ReturnType - sync: ReturnType + client: DirectorySDK["client"] + serverSync: ReturnType> + sync: DirectorySync draft: FollowupDraft messageID?: string optimisticBusy?: boolean @@ -202,8 +208,11 @@ type CommentItem = { preview?: string } +type PromptBinding = ReturnType["bind"]> + export function createPromptSubmit(input: PromptSubmitInput) { - const navigate = useNavigate() + const navigation = useNavigation() + const directory = useDirectory() const sdk = useSDK() const sync = useSync() const serverSync = useServerSync() @@ -212,8 +221,7 @@ export function createPromptSubmit(input: PromptSubmitInput) { const prompt = usePrompt() const layout = useLayout() const language = useLanguage() - const params = useParams() - const pendingKey = (sessionID: string) => ScopedKey.from(sdk.scope, sessionID) + const pendingKey = (scope: DirectorySDK["scope"], sessionID: string) => ScopedKey.from(scope, sessionID) const errorMessage = (err: unknown) => { if (err && typeof err === "object" && "data" in err) { @@ -225,16 +233,18 @@ export function createPromptSubmit(input: PromptSubmitInput) { } const abort = async () => { - const sessionID = params.id + const sessionID = directory().sessionID if (!sessionID) return Promise.resolve() + const current = sdk() + const currentServerSync = serverSync() - serverSync.todo.set(sessionID, []) - const [, setStore] = serverSync.child(sdk.directory) + currentServerSync.todo.set(sessionID, []) + const [, setStore] = currentServerSync.child(current.directory) setStore("todo", sessionID, []) input.onAbort?.() - const key = pendingKey(sessionID) + const key = pendingKey(current.scope, sessionID) const queued = pending.get(key) if (queued) { queued.abort.abort() @@ -242,16 +252,16 @@ export function createPromptSubmit(input: PromptSubmitInput) { pending.delete(key) return Promise.resolve() } - return sdk.client.session + return current.client.session .abort({ sessionID, }) .catch(() => {}) } - const restoreCommentItems = (items: CommentItem[]) => { + const restoreCommentItems = (current: PromptBinding, items: CommentItem[]) => { for (const item of items) { - prompt.context.add({ + current.context.add({ type: "file", path: item.path, selection: item.selection, @@ -263,19 +273,19 @@ export function createPromptSubmit(input: PromptSubmitInput) { } } - const removeCommentItems = (items: { key: string }[]) => { + const removeCommentItems = (current: PromptBinding, items: { key: string }[]) => { for (const item of items) { - prompt.context.remove(item.key) + current.context.remove(item.key) } } - const clearContext = () => { - for (const item of prompt.context.items()) { - prompt.context.remove(item.key) + const clearContext = (current: PromptBinding) => { + for (const item of current.context.items()) { + current.context.remove(item.key) } } - const seed = (dir: string, info: Session) => { + const seed = (serverSync: ServerSync, dir: string, info: Session) => { const [, setStore] = serverSync.child(dir) setStore("session", (list: Session[]) => { const result = Binary.search(list, info.id, (item) => item.id) @@ -291,8 +301,23 @@ export function createPromptSubmit(input: PromptSubmitInput) { const handleSubmit = async (event: Event) => { event.preventDefault() - - const currentPrompt = prompt.current() + const destination = navigation() + const currentDirectory = directory() + const sourceKey = DirectoryState.key({ + serverScope: currentDirectory.server.scope, + directory: currentDirectory.directory, + state: currentDirectory.state, + }) + const current = sdk() + const currentSync = sync() + const currentServerSync = serverSync() + const currentPromptState = prompt.bind() + let promptState = currentPromptState + const currentLocalSession = local.session.bind() + const currentPermission = permission.bind() + + const currentPrompt = currentPromptState.current() + const currentContext = currentPromptState.context.items().slice() const text = currentPrompt.map((part) => ("content" in part ? part.content : "")).join("") const images = input.imageAttachments().slice() const mode = input.mode() @@ -316,13 +341,13 @@ export function createPromptSubmit(input: PromptSubmitInput) { input.addToHistory(currentPrompt, mode) input.resetHistoryNavigation() - const projectDirectory = sdk.directory - const isNewSession = !params.id + const projectDirectory = current.directory + const isNewSession = !directory().sessionID const shouldAutoAccept = isNewSession && input.autoAccept() const worktreeSelection = input.newSessionWorktree?.() || "main" let sessionDirectory = projectDirectory - let client = sdk.client + let client = current.client if (isNewSession) { if (worktreeSelection === "create") { @@ -344,7 +369,7 @@ export function createPromptSubmit(input: PromptSubmitInput) { }) return } - WorktreeState.pending(sdk.scope, createdWorktree.directory) + WorktreeState.pending(current.scope, createdWorktree.directory) sessionDirectory = createdWorktree.directory } @@ -353,11 +378,11 @@ export function createPromptSubmit(input: PromptSubmitInput) { } if (sessionDirectory !== projectDirectory) { - client = sdk.createClient({ + client = current.createClient({ directory: sessionDirectory, throwOnError: true, }) - serverSync.child(sessionDirectory) + currentServerSync.child(sessionDirectory) } input.onNewSessionWorktreeReset?.() @@ -376,12 +401,21 @@ export function createPromptSubmit(input: PromptSubmitInput) { return undefined }) if (created) { - seed(sessionDirectory, created) + seed(currentServerSync, sessionDirectory, created) session = created - if (shouldAutoAccept) permission.enableAutoAccept(session.id, sessionDirectory) - local.session.promote(sessionDirectory, session.id) - layout.handoff.setTabs(base64Encode(sessionDirectory), session.id) - navigate(`/${base64Encode(sessionDirectory)}/session/${session.id}`) + if (shouldAutoAccept) currentPermission.enableAutoAccept(session.id, sessionDirectory) + currentLocalSession.promote(sessionDirectory, session.id) + layout.promoteTabs( + { serverScope: current.scope, directory: currentDirectory.directory, state: currentDirectory.state }, + { serverScope: current.scope, directory: sessionDirectory, state: { type: "session", id: session.id } }, + ) + promptState = prompt.bind({ + serverScope: current.scope, + directory: sessionDirectory, + state: { type: "session", id: session.id }, + }) + currentPromptState.reset() + destination.created({ id: session.id, directory: sessionDirectory }) } } if (!session) { @@ -397,7 +431,7 @@ export function createPromptSubmit(input: PromptSubmitInput) { providerID: currentModel.provider.id, } const agent = currentAgent.name - const context = prompt.context.items().slice() + const context = currentContext const draft: FollowupDraft = { sessionID: session.id, sessionDirectory, @@ -409,13 +443,20 @@ export function createPromptSubmit(input: PromptSubmitInput) { } const clearInput = () => { - prompt.reset() + promptState.reset() input.setMode("normal") input.setPopover(null) } const restoreInput = () => { - prompt.set(currentPrompt, input.promptLength(currentPrompt)) + promptState.set(currentPrompt, input.promptLength(currentPrompt)) + const selected = directory() + const selectedKey = DirectoryState.key({ + serverScope: selected.server.scope, + directory: selected.directory, + state: selected.state, + }) + if (selectedKey !== sourceKey) return input.setMode(mode) input.setPopover(null) requestAnimationFrame(() => { @@ -429,7 +470,7 @@ export function createPromptSubmit(input: PromptSubmitInput) { if (!isNewSession && mode === "normal" && input.shouldQueue?.()) { input.onQueue?.(draft) - clearContext() + clearContext(promptState) clearInput() return } @@ -458,7 +499,7 @@ export function createPromptSubmit(input: PromptSubmitInput) { if (text.startsWith("/")) { const [cmdName, ...args] = text.split(" ") const commandName = cmdName.slice(1) - const customCommand = sync.data.command.find((c) => c.name === commandName) + const customCommand = currentSync.data.command.find((c) => c.name === commandName) if (customCommand) { clearInput() client.session @@ -492,35 +533,35 @@ export function createPromptSubmit(input: PromptSubmitInput) { const messageID = Identifier.ascending("message") const removeOptimisticMessage = () => { - sync.session.optimistic.remove({ + currentSync.session.optimistic.remove({ directory: sessionDirectory, sessionID: session.id, messageID, }) } - removeCommentItems(commentItems) + removeCommentItems(promptState, commentItems) clearInput() const waitForWorktree = async () => { - const worktree = WorktreeState.get(sdk.scope, sessionDirectory) + const worktree = WorktreeState.get(current.scope, sessionDirectory) if (!worktree || worktree.status !== "pending") return true if (sessionDirectory === projectDirectory) { - sync.set("session_status", session.id, { type: "busy" }) + currentSync.set("session_status", session.id, { type: "busy" }) } const controller = new AbortController() const cleanup = () => { if (sessionDirectory === projectDirectory) { - sync.set("session_status", session.id, { type: "idle" }) + currentSync.set("session_status", session.id, { type: "idle" }) } removeOptimisticMessage() - restoreCommentItems(commentItems) + restoreCommentItems(promptState, commentItems) restoreInput() } - pending.set(pendingKey(session.id), { abort: controller, cleanup }) + pending.set(pendingKey(current.scope, session.id), { abort: controller, cleanup }) const abortWait = new Promise>>((resolve) => { if (controller.signal.aborted) { @@ -547,13 +588,13 @@ export function createPromptSubmit(input: PromptSubmitInput) { }, timeoutMs) }) - const result = await Promise.race([WorktreeState.wait(sdk.scope, sessionDirectory), abortWait, timeout]).finally( + const result = await Promise.race([WorktreeState.wait(current.scope, sessionDirectory), abortWait, timeout]).finally( () => { if (timer.id === undefined) return clearTimeout(timer.id) }, ) - pending.delete(pendingKey(session.id)) + pending.delete(pendingKey(current.scope, session.id)) if (controller.signal.aborted) return false if (result.status === "failed") throw new Error(result.message) return true @@ -561,23 +602,23 @@ export function createPromptSubmit(input: PromptSubmitInput) { void sendFollowupDraft({ client, - sync, - serverSync, + sync: currentSync, + serverSync: currentServerSync, draft, messageID, optimisticBusy: sessionDirectory === projectDirectory, before: waitForWorktree, }).catch((err) => { - pending.delete(pendingKey(session.id)) + pending.delete(pendingKey(current.scope, session.id)) if (sessionDirectory === projectDirectory) { - sync.set("session_status", session.id, { type: "idle" }) + currentSync.set("session_status", session.id, { type: "idle" }) } showToast({ title: language.t("prompt.toast.promptSendFailed.title"), description: errorMessage(err), }) removeOptimisticMessage() - restoreCommentItems(commentItems) + restoreCommentItems(promptState, commentItems) restoreInput() }) } diff --git a/packages/app/src/components/session-context-usage.tsx b/packages/app/src/components/session-context-usage.tsx index 1f65e9adb3c7..f1e650f701ff 100644 --- a/packages/app/src/components/session-context-usage.tsx +++ b/packages/app/src/components/session-context-usage.tsx @@ -5,7 +5,7 @@ import { Button } from "@opencode-ai/ui/button" import { useFile } from "@/context/file" import { useLayout } from "@/context/layout" -import { useSync } from "@/context/sync" +import { useDirectory, useSync } from "@/context/directory" import { useLanguage } from "@/context/language" import { useProviders } from "@/hooks/use-providers" import { getSessionContextMetrics } from "@/components/session/session-context-metrics" @@ -33,8 +33,9 @@ export function SessionContextUsage(props: SessionContextUsageProps) { const file = useFile() const layout = useLayout() const language = useLanguage() - const providers = useProviders() - const { params, tabs, view } = useSessionLayout() + const directory = useDirectory() + const providers = useProviders(() => directory().directory) + const { sessionID, tabs, view } = useSessionLayout() const variant = createMemo(() => props.variant ?? "button") const tabState = createSessionTabs({ @@ -42,7 +43,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) { pathFromTab: file.pathFromTab, normalizeTab: (tab) => (tab.startsWith("file://") ? file.tab(tab) : tab), }) - const messages = createMemo(() => (params.id ? (sync.data.message[params.id] ?? []) : [])) + const messages = createMemo(() => (sessionID() ? (sync().data.message[sessionID()!] ?? []) : [])) const usd = createMemo( () => @@ -59,7 +60,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) { }) const openContext = () => { - if (!params.id) return + if (!sessionID()) return if (tabState.activeTab() === "context") { tabs().close("context") @@ -102,7 +103,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) { ) return ( - + {circle()} diff --git a/packages/app/src/components/session/session-context-tab.tsx b/packages/app/src/components/session/session-context-tab.tsx index 88c3889858c8..c1bcd68fc0f7 100644 --- a/packages/app/src/components/session/session-context-tab.tsx +++ b/packages/app/src/components/session/session-context-tab.tsx @@ -1,6 +1,6 @@ import { createMemo, createEffect, on, onCleanup, For, Show } from "solid-js" import type { JSX } from "solid-js" -import { useSync } from "@/context/sync" +import { useSync } from "@/context/directory" import { checksum } from "@opencode-ai/core/util/encode" import { findLast } from "@opencode-ai/core/util/array" import { same } from "@/utils/same" @@ -17,6 +17,7 @@ import { useSessionLayout } from "@/pages/session/session-layout" import { getSessionContextMetrics } from "./session-context-metrics" import { estimateSessionContextBreakdown, type SessionContextBreakdownKey } from "./session-context-breakdown" import { createSessionContextFormatter } from "./session-context-format" +import { useDirectory } from "@/context/directory" const BREAKDOWN_COLOR: Record = { system: "var(--syntax-info)", @@ -92,17 +93,18 @@ const emptyUserMessages: UserMessage[] = [] export function SessionContextTab() { const sync = useSync() + const directory = useDirectory() const language = useLanguage() - const providers = useProviders() - const { params, view } = useSessionLayout() + const providers = useProviders(() => directory().directory) + const { sessionID, view } = useSessionLayout() - const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined)) + const info = createMemo(() => (sessionID() ? sync().session.get(sessionID()!) : undefined)) const messages = createMemo( () => { - const id = params.id + const id = sessionID() if (!id) return emptyMessages - return (sync.data.message[id] ?? []) as Message[] + return (sync().data.message[id] ?? []) as Message[] }, emptyMessages, { equals: same }, @@ -180,7 +182,7 @@ export function SessionContextTab() { if (!c?.input) return [] return estimateSessionContextBreakdown({ messages: messages(), - parts: sync.data.part as Record, + parts: sync().data.part as Record, input: c.input, systemPrompt: systemPrompt(), }) @@ -197,7 +199,7 @@ export function SessionContextTab() { } const stats = [ - { label: "context.stats.session", value: () => info()?.title ?? params.id ?? "—" }, + { label: "context.stats.session", value: () => info()?.title ?? sessionID() ?? "—" }, { label: "context.stats.messages", value: () => counts().all.toLocaleString(language.intl()) }, { label: "context.stats.provider", value: providerLabel }, { label: "context.stats.model", value: modelLabel }, @@ -221,7 +223,7 @@ export function SessionContextTab() { let scroll: HTMLDivElement | undefined let frame: number | undefined let pending: { x: number; y: number } | undefined - const getParts = (id: string) => (sync.data.part[id] ?? []) as Part[] + const getParts = (id: string) => (sync().data.part[id] ?? []) as Part[] const restoreScroll = () => { const el = scroll diff --git a/packages/app/src/components/session/session-header.tsx b/packages/app/src/components/session/session-header.tsx index b983633d8069..b0d6650d6bc7 100644 --- a/packages/app/src/components/session/session-header.tsx +++ b/packages/app/src/components/session/session-header.tsx @@ -15,18 +15,18 @@ import { useCommand } from "@/context/command" import { useLanguage } from "@/context/language" import { useLayout } from "@/context/layout" import { usePlatform } from "@/context/platform" -import { useServer } from "@/context/server" +import { useServerContext } from "@/context/server-context" import { useSettings } from "@/context/settings" -import { useSync } from "@/context/sync" +import { useSync } from "@/context/directory" import { useTerminal } from "@/context/terminal" import { focusTerminalById } from "@/pages/session/helpers" import { useSessionLayout } from "@/pages/session/session-layout" import { messageAgentColor } from "@/utils/agent" -import { decode64 } from "@/utils/base64" import { Persist, persisted } from "@/utils/persist" import { StatusPopover, StatusPopoverV2 } from "../status-popover" import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2" import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon" +import { TITLEBAR_PORTAL_ID } from "../titlebar-shared" const OPEN_APPS = [ "vscode", @@ -134,15 +134,15 @@ const showRequestError = (language: ReturnType, err: unknown export function SessionHeader() { const layout = useLayout() const command = useCommand() - const server = useServer() + const server = useServerContext() const platform = usePlatform() const language = useLanguage() const settings = useSettings() const sync = useSync() const terminal = useTerminal() - const { params, view } = useSessionLayout() + const { directory, sessionID, view } = useSessionLayout() - const projectDirectory = createMemo(() => decode64(params.dir) ?? "") + const projectDirectory = createMemo(directory) const project = createMemo(() => { const directory = projectDirectory() if (!directory) return @@ -222,7 +222,7 @@ export function SessionHeader() { app: undefined as OpenApp | undefined, }) - const canOpen = createMemo(() => platform.platform === "desktop" && !!platform.openPath && server.isLocal()) + const canOpen = createMemo(() => platform.platform === "desktop" && !!platform.openPath && server().isLocal) const current = createMemo( () => options().find((o) => o.id === prefs.app) ?? @@ -231,7 +231,7 @@ export function SessionHeader() { ) const opening = createMemo(() => openRequest.app !== undefined) const tint = createMemo(() => - messageAgentColor(params.id ? sync.data.message[params.id] : undefined, sync.data.agent), + messageAgentColor(sessionID() ? sync().data.message[sessionID()!] : undefined, sync().data.agent), ) const v2ActionsState = createMemo(() => ({ statusVisible: status(), @@ -282,8 +282,8 @@ export function SessionHeader() { const [centerMount, setCenterMount] = createSignal(null) const [rightMount, setRightMount] = createSignal(null) onMount(() => { - setCenterMount(document.getElementById("opencode-titlebar-center")) - setRightMount(document.getElementById("opencode-titlebar-right")) + setCenterMount(document.getElementById(TITLEBAR_PORTAL_ID.center)) + setRightMount(document.getElementById(TITLEBAR_PORTAL_ID.right)) }) return ( diff --git a/packages/app/src/components/session/session-new-view.tsx b/packages/app/src/components/session/session-new-view.tsx index 36c1eb42c316..476651840567 100644 --- a/packages/app/src/components/session/session-new-view.tsx +++ b/packages/app/src/components/session/session-new-view.tsx @@ -1,7 +1,6 @@ import { Show, createMemo } from "solid-js" import { DateTime } from "luxon" -import { useSync } from "@/context/sync" -import { useSDK } from "@/context/sdk" +import { useSDK, useSync } from "@/context/directory" import { useLanguage } from "@/context/language" import { Icon } from "@opencode-ai/ui/icon" import { Mark } from "@opencode-ai/ui/logo" @@ -20,24 +19,24 @@ export function NewSessionView(props: NewSessionViewProps) { const sdk = useSDK() const language = useLanguage() - const sandboxes = createMemo(() => sync.project?.sandboxes ?? []) + const sandboxes = createMemo(() => sync().project?.sandboxes ?? []) const options = createMemo(() => [MAIN_WORKTREE, ...sandboxes(), CREATE_WORKTREE]) const current = createMemo(() => { const selection = props.worktree if (options().includes(selection)) return selection return MAIN_WORKTREE }) - const projectRoot = createMemo(() => sync.project?.worktree ?? sdk.directory) + const projectRoot = createMemo(() => sync().project?.worktree ?? sdk().directory) const isWorktree = createMemo(() => { - const project = sync.project + const project = sync().project if (!project) return false - return sdk.directory !== project.worktree + return sdk().directory !== project.worktree }) const label = (value: string) => { if (value === MAIN_WORKTREE) { if (isWorktree()) return language.t("session.new.worktree.main") - const branch = sync.data.vcs?.branch + const branch = sync().data.vcs?.branch if (branch) return language.t("session.new.worktree.mainWithBranch", { branch }) return language.t("session.new.worktree.main") } @@ -69,7 +68,7 @@ export function NewSessionView(props: NewSessionViewProps) { {label(current())} - + {(project) => (
diff --git a/packages/app/src/components/settings-general.tsx b/packages/app/src/components/settings-general.tsx index b5e8ffa721d5..115aaab4b777 100644 --- a/packages/app/src/components/settings-general.tsx +++ b/packages/app/src/components/settings-general.tsx @@ -7,14 +7,11 @@ import { Switch } from "@opencode-ai/ui/switch" import { TextField } from "@opencode-ai/ui/text-field" import { Tooltip } from "@opencode-ai/ui/tooltip" import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context" -import { useDialog } from "@opencode-ai/ui/context/dialog" import { showToast } from "@/utils/toast" -import { useParams } from "@solidjs/router" import { useLanguage } from "@/context/language" import { usePermission } from "@/context/permission" import { usePlatform, type DisplayBackend } from "@/context/platform" -import { useServerSync } from "@/context/server-sync" -import { useServerSDK } from "@/context/server-sdk" +import { useServerSDK, useServerSync } from "@/context/server-context" import { monoDefault, monoFontFamily, @@ -27,16 +24,10 @@ import { terminalInput, useSettings, } from "@/context/settings" -import { decode64 } from "@/utils/base64" -import { playSoundById, SOUND_OPTIONS } from "@/utils/sound" +import { SOUND_OPTIONS } from "@/utils/sound" import { Link } from "./link" import { SettingsList } from "./settings-list" - -let demoSoundState = { - cleanup: undefined as (() => void) | undefined, - timeout: undefined as NodeJS.Timeout | undefined, - run: 0, -} +import { playDemoSound, stopDemoSound } from "./settings-sound" type ThemeOption = { id: string @@ -55,40 +46,11 @@ type ShellSelectOption = { label: string } -// To prevent audio from overlapping/playing very quickly when navigating the settings menus, -// delay the playback by 100ms during quick selection changes and pause existing sounds. -const stopDemoSound = () => { - demoSoundState.run += 1 - if (demoSoundState.cleanup) { - demoSoundState.cleanup() - } - clearTimeout(demoSoundState.timeout) - demoSoundState.cleanup = undefined -} - -const playDemoSound = (id: string | undefined) => { - stopDemoSound() - if (!id) return - - const run = ++demoSoundState.run - demoSoundState.timeout = setTimeout(() => { - void playSoundById(id).then((cleanup) => { - if (demoSoundState.run !== run) { - cleanup?.() - return - } - demoSoundState.cleanup = cleanup - }) - }, 100) -} - -export const SettingsGeneral: Component = () => { +export const SettingsGeneral: Component<{ directory?: string; sessionID?: string }> = (props) => { const theme = useTheme() const language = useLanguage() const permission = usePermission() const platform = usePlatform() - const dialog = useDialog() - const params = useParams() const settings = useSettings() const [store, setStore] = createStore({ @@ -96,30 +58,29 @@ export const SettingsGeneral: Component = () => { }) const linux = createMemo(() => platform.platform === "desktop" && platform.os === "linux") - const dir = createMemo(() => decode64(params.dir)) const accepting = createMemo(() => { - const value = dir() + const value = props.directory if (!value) return false - if (!params.id) return permission.isAutoAcceptingDirectory(value) - return permission.isAutoAccepting(params.id, value) + if (!props.sessionID) return permission.isAutoAcceptingDirectory(value) + return permission.isAutoAccepting(props.sessionID, value) }) const toggleAccept = (checked: boolean) => { - const value = dir() + const value = props.directory if (!value) return - if (!params.id) { + if (!props.sessionID) { if (permission.isAutoAcceptingDirectory(value) === checked) return permission.toggleAutoAcceptDirectory(value) return } if (checked) { - permission.enableAutoAccept(params.id, value) + permission.enableAutoAccept(props.sessionID, value) return } - permission.disableAutoAccept(params.id, value) + permission.disableAutoAccept(props.sessionID, value) } const desktop = createMemo(() => platform.platform === "desktop") @@ -182,7 +143,7 @@ export const SettingsGeneral: Component = () => { const [shells] = createResource( () => - serverSdk.client.pty + serverSdk().client.pty .shells() .then((res) => res.data ?? []) .catch(() => [] as ShellOption[]), @@ -206,11 +167,11 @@ export const SettingsGeneral: Component = () => { }) const autoOption = { id: "auto", value: "", label: language.t("settings.general.row.shell.autoDefault") } - const currentShell = createMemo(() => serverSync.data.config.shell ?? "") + const currentShell = createMemo(() => serverSync().data.config.shell ?? "") const shellOptions = createMemo(() => { const list = shells.latest - const current = serverSync.data.config.shell + const current = serverSync().data.config.shell const nameCounts = new Map() for (const s of list) { @@ -328,7 +289,7 @@ export const SettingsGeneral: Component = () => { description={language.t("toast.permissions.autoaccept.on.description")} >
- +
@@ -345,7 +306,7 @@ export const SettingsGeneral: Component = () => { onSelect={(option) => { if (!option) return if (option.value === currentShell()) return - serverSync.updateConfig({ shell: option.value }) + serverSync().updateConfig({ shell: option.value }) }} variant="secondary" size="small" @@ -409,13 +370,7 @@ export const SettingsGeneral: Component = () => {
{ - settings.general.setNewLayoutDesigns(checked) - if (!checked) return - void import("@/components/settings-v2").then((module) => { - dialog.show(() => ) - }) - }} + onChange={settings.general.setNewLayoutDesigns} />
diff --git a/packages/app/src/components/settings-models.tsx b/packages/app/src/components/settings-models.tsx index f3d9e1522ff4..5b2d7740f424 100644 --- a/packages/app/src/components/settings-models.tsx +++ b/packages/app/src/components/settings-models.tsx @@ -32,9 +32,9 @@ const ListEmptyState: Component<{ message: string; filter: string }> = (props) = ) } -export const SettingsModels: Component = () => { +export const SettingsModels: Component<{ directory?: string }> = (props) => { return ( - + props.directory}> ) diff --git a/packages/app/src/components/settings-providers.tsx b/packages/app/src/components/settings-providers.tsx index ef8d03aedd0a..c356054d2267 100644 --- a/packages/app/src/components/settings-providers.tsx +++ b/packages/app/src/components/settings-providers.tsx @@ -6,8 +6,7 @@ import { showToast } from "@/utils/toast" import { popularProviders, useProviders } from "@/hooks/use-providers" import { createMemo, type Component, For, Show } from "solid-js" import { useLanguage } from "@/context/language" -import { useServerSDK } from "@/context/server-sdk" -import { useServerSync } from "@/context/server-sync" +import { useServerSDK, useServerSync } from "@/context/server-context" import { DialogConnectProvider } from "./dialog-connect-provider" import { DialogSelectProvider } from "./dialog-select-provider" import { DialogCustomProvider } from "./dialog-custom-provider" @@ -28,20 +27,20 @@ const PROVIDER_NOTES = [ { match: (id: string) => id === "vercel", key: "dialog.provider.vercel.note" }, ] as const -export const SettingsProviders: Component = () => { +export const SettingsProviders: Component<{ directory?: string }> = (props) => { return ( - - + props.directory}> + ) } -const SettingsProvidersContent: Component = () => { +const SettingsProvidersContent: Component<{ directory?: string }> = (props) => { const dialog = useDialog() const language = useLanguage() const serverSDK = useServerSDK() const serverSync = useServerSync() - const providers = useProviders() + const providers = useProviders(() => props.directory) const connected = createMemo(() => { return providers @@ -83,7 +82,7 @@ const SettingsProvidersContent: Component = () => { const note = (id: string) => PROVIDER_NOTES.find((item) => item.match(id))?.key const isConfigCustom = (providerID: string) => { - const provider = serverSync.data.config.provider?.[providerID] + const provider = serverSync().data.config.provider?.[providerID] if (!provider) return false if (provider.npm !== "@ai-sdk/openai-compatible") return false if (!provider.models || Object.keys(provider.models).length === 0) return false @@ -91,11 +90,12 @@ const SettingsProvidersContent: Component = () => { } const disableProvider = async (providerID: string, name: string) => { - const before = serverSync.data.config.disabled_providers ?? [] + const sync = serverSync() + const before = sync.data.config.disabled_providers ?? [] const next = before.includes(providerID) ? before : [...before, providerID] - serverSync.set("config", "disabled_providers", next) + sync.set("config", "disabled_providers", next) - await serverSync + await sync .updateConfig({ disabled_providers: next }) .then(() => { showToast({ @@ -106,22 +106,23 @@ const SettingsProvidersContent: Component = () => { }) }) .catch((err: unknown) => { - serverSync.set("config", "disabled_providers", before) + sync.set("config", "disabled_providers", before) const message = err instanceof Error ? err.message : String(err) showToast({ title: language.t("common.requestFailed"), description: message }) }) } const disconnect = async (providerID: string, name: string) => { + const sdk = serverSDK() if (isConfigCustom(providerID)) { - await serverSDK.client.auth.remove({ providerID }).catch(() => undefined) + await sdk.client.auth.remove({ providerID }).catch(() => undefined) await disableProvider(providerID, name) return } - await serverSDK.client.auth + await sdk.client.auth .remove({ providerID }) .then(async () => { - await serverSDK.client.global.dispose() + await sdk.client.global.dispose() showToast({ variant: "success", icon: "circle-check", @@ -209,7 +210,7 @@ const SettingsProvidersContent: Component = () => { variant="secondary" icon="plus-small" onClick={() => { - dialog.show(() => ) + dialog.show(() => ) }} > {language.t("common.connect")} @@ -237,7 +238,7 @@ const SettingsProvidersContent: Component = () => { variant="secondary" icon="plus-small" onClick={() => { - dialog.show(() => ) + dialog.show(() => ) }} > {language.t("common.connect")} @@ -249,7 +250,7 @@ const SettingsProvidersContent: Component = () => { variant="ghost" class="px-0 py-0 mt-5 text-14-medium text-text-interactive-base text-left justify-start hover:bg-transparent active:bg-transparent" onClick={() => { - dialog.show(() => ) + dialog.show(() => ) }} > {language.t("dialog.provider.viewAll")} diff --git a/packages/app/src/components/settings-server-picker.tsx b/packages/app/src/components/settings-server-picker.tsx index 3f679753f053..4bf15211834d 100644 --- a/packages/app/src/components/settings-server-picker.tsx +++ b/packages/app/src/components/settings-server-picker.tsx @@ -1,41 +1,41 @@ import { Button } from "@opencode-ai/ui/button" import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu" import { Icon } from "@opencode-ai/ui/icon" -import { QueryClientProvider } from "@tanstack/solid-query" -import { createMemo, For, type ParentProps, Show } from "solid-js" +import { createMemo, For, type Accessor, type ParentProps, Show } from "solid-js" import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row" import { ModelsProvider } from "@/context/models" import { ServerConnection } from "@/context/server" -import { ServerSDKProvider } from "@/context/server-sdk" -import { ServerSyncProvider } from "@/context/server-sync" +import { ServerContextProvider } from "@/context/server-context" import { useGlobal } from "@/context/global" import { useSettings } from "@/context/settings" -export function SettingsServerScope(props: ParentProps) { +export function SettingsServerScope(props: ParentProps<{ directory: Accessor }>) { const global = useGlobal() const settings = useSettings() return ( - {(server) => {props.children}} + {(server) => ( + + {props.children} + + )} ) } -function SettingsServerDataProviders(props: ParentProps<{ server: ServerConnection.Any }>) { +function SettingsServerDataProviders( + props: ParentProps<{ server: ServerConnection.Any; directory: Accessor }>, +) { const global = useGlobal() const serverCtx = () => global.createServerCtx(props.server) return ( - - - - {props.children} - - - + + {props.children} + ) } diff --git a/packages/app/src/components/settings-sound.ts b/packages/app/src/components/settings-sound.ts new file mode 100644 index 000000000000..8dacaf5b5881 --- /dev/null +++ b/packages/app/src/components/settings-sound.ts @@ -0,0 +1,30 @@ +import { playSoundById } from "@/utils/sound" + +const state = { + cleanup: undefined as (() => void) | undefined, + timeout: undefined as NodeJS.Timeout | undefined, + run: 0, +} + +export function stopDemoSound() { + state.run += 1 + state.cleanup?.() + clearTimeout(state.timeout) + state.cleanup = undefined +} + +export function playDemoSound(id: string | undefined) { + stopDemoSound() + if (!id) return + + const run = ++state.run + state.timeout = setTimeout(() => { + void playSoundById(id).then((cleanup) => { + if (state.run !== run) { + cleanup?.() + return + } + state.cleanup = cleanup + }) + }, 100) +} diff --git a/packages/app/src/components/settings-v2/dialog-settings-v2.tsx b/packages/app/src/components/settings-v2/dialog-settings-v2.tsx index 932f2dedd468..abc9f3ae94d2 100644 --- a/packages/app/src/components/settings-v2/dialog-settings-v2.tsx +++ b/packages/app/src/components/settings-v2/dialog-settings-v2.tsx @@ -10,8 +10,9 @@ import { SettingsProvidersV2 } from "./providers" import { SettingsModelsV2 } from "./models" import "./settings-v2.css" import { SettingsServers } from "../settings-servers" +import { SettingsServerScope } from "../settings-server-picker" -export const DialogSettings: Component = () => { +export const DialogSettings: Component<{ directory?: string; sessionID?: string }> = (props) => { const language = useLanguage() const platform = usePlatform() @@ -62,7 +63,7 @@ export const DialogSettings: Component = () => {
- + @@ -71,10 +72,14 @@ export const DialogSettings: Component = () => { - + props.directory}> + + - + props.directory}> + + diff --git a/packages/app/src/components/settings-v2/general.tsx b/packages/app/src/components/settings-v2/general.tsx index 9bc5141ba602..eb005829d24f 100644 --- a/packages/app/src/components/settings-v2/general.tsx +++ b/packages/app/src/components/settings-v2/general.tsx @@ -7,14 +7,11 @@ import { Switch } from "@opencode-ai/ui/v2/switch-v2" import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2" import { Tooltip } from "@opencode-ai/ui/tooltip" import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context" -import { useDialog } from "@opencode-ai/ui/context/dialog" import { showToast } from "@/utils/toast" -import { useParams } from "@solidjs/router" import { useLanguage } from "@/context/language" import { usePermission } from "@/context/permission" import { usePlatform, type DisplayBackend } from "@/context/platform" -import { useServerSync } from "@/context/server-sync" -import { useServerSDK } from "@/context/server-sdk" +import { useServerSDK, useServerSync } from "@/context/server-context" import { monoDefault, monoFontFamily, @@ -27,19 +24,13 @@ import { terminalInput, useSettings, } from "@/context/settings" -import { decode64 } from "@/utils/base64" -import { playSoundById, SOUND_OPTIONS } from "@/utils/sound" +import { SOUND_OPTIONS } from "@/utils/sound" import { Link } from "../link" +import { playDemoSound, stopDemoSound } from "../settings-sound" import { SettingsListV2 } from "./parts/list" import { SettingsRowV2 } from "./parts/row" import "./settings-v2.css" -let demoSoundState = { - cleanup: undefined as (() => void) | undefined, - timeout: undefined as NodeJS.Timeout | undefined, - run: 0, -} - type ThemeOption = { id: string name: string @@ -57,40 +48,11 @@ type ShellSelectOption = { label: string } -// To prevent audio from overlapping/playing very quickly when navigating the settings menus, -// delay the playback by 100ms during quick selection changes and pause existing sounds. -const stopDemoSound = () => { - demoSoundState.run += 1 - if (demoSoundState.cleanup) { - demoSoundState.cleanup() - } - clearTimeout(demoSoundState.timeout) - demoSoundState.cleanup = undefined -} - -const playDemoSound = (id: string | undefined) => { - stopDemoSound() - if (!id) return - - const run = ++demoSoundState.run - demoSoundState.timeout = setTimeout(() => { - void playSoundById(id).then((cleanup) => { - if (demoSoundState.run !== run) { - cleanup?.() - return - } - demoSoundState.cleanup = cleanup - }) - }, 100) -} - -export const SettingsGeneralV2: Component = () => { +export const SettingsGeneralV2: Component<{ directory?: string; sessionID?: string }> = (props) => { const theme = useTheme() const language = useLanguage() const permission = usePermission() const platform = usePlatform() - const dialog = useDialog() - const params = useParams() const settings = useSettings() const [store, setStore] = createStore({ @@ -98,30 +60,29 @@ export const SettingsGeneralV2: Component = () => { }) const linux = createMemo(() => platform.platform === "desktop" && platform.os === "linux") - const dir = createMemo(() => decode64(params.dir)) const accepting = createMemo(() => { - const value = dir() + const value = props.directory if (!value) return false - if (!params.id) return permission.isAutoAcceptingDirectory(value) - return permission.isAutoAccepting(params.id, value) + if (!props.sessionID) return permission.isAutoAcceptingDirectory(value) + return permission.isAutoAccepting(props.sessionID, value) }) const toggleAccept = (checked: boolean) => { - const value = dir() + const value = props.directory if (!value) return - if (!params.id) { + if (!props.sessionID) { if (permission.isAutoAcceptingDirectory(value) === checked) return permission.toggleAutoAcceptDirectory(value) return } if (checked) { - permission.enableAutoAccept(params.id, value) + permission.enableAutoAccept(props.sessionID, value) return } - permission.disableAutoAccept(params.id, value) + permission.disableAutoAccept(props.sessionID, value) } const desktop = createMemo(() => platform.platform === "desktop") @@ -184,7 +145,7 @@ export const SettingsGeneralV2: Component = () => { const [shells] = createResource( () => - serverSdk.client.pty + serverSdk().client.pty .shells() .then((res) => res.data ?? []) .catch(() => [] as ShellOption[]), @@ -208,11 +169,11 @@ export const SettingsGeneralV2: Component = () => { }) const autoOption = { id: "auto", value: "", label: language.t("settings.general.row.shell.autoDefault") } - const currentShell = createMemo(() => serverSync.data.config.shell ?? "") + const currentShell = createMemo(() => serverSync().data.config.shell ?? "") const shellOptions = createMemo(() => { const list = shells.latest - const current = serverSync.data.config.shell + const current = serverSync().data.config.shell const nameCounts = new Map() for (const s of list) { @@ -327,7 +288,7 @@ export const SettingsGeneralV2: Component = () => { description={language.t("toast.permissions.autoaccept.on.description")} >
- +
@@ -347,7 +308,7 @@ export const SettingsGeneralV2: Component = () => { onSelect={(option) => { if (!option) return if (option.value === currentShell()) return - serverSync.updateConfig({ shell: option.value }) + serverSync().updateConfig({ shell: option.value }) }} /> @@ -407,13 +368,7 @@ export const SettingsGeneralV2: Component = () => {
{ - settings.general.setNewLayoutDesigns(checked) - if (checked) return - void import("@/components/dialog-settings").then((module) => { - dialog.show(() => ) - }) - }} + onChange={settings.general.setNewLayoutDesigns} />
diff --git a/packages/app/src/components/settings-v2/models.tsx b/packages/app/src/components/settings-v2/models.tsx index a3f058670e4a..3f5c08419650 100644 --- a/packages/app/src/components/settings-v2/models.tsx +++ b/packages/app/src/components/settings-v2/models.tsx @@ -11,6 +11,7 @@ import { popularProviders } from "@/hooks/use-providers" import { SettingsListV2 } from "./parts/list" import { SettingsRowV2 } from "./parts/row" import "./settings-v2.css" +import { SettingsServerPicker } from "../settings-server-picker" type ModelItem = ReturnType["list"]>[number] @@ -45,7 +46,10 @@ export const SettingsModelsV2: Component = () => { return ( <>
-

{language.t("settings.models.title")}

+
+

{language.t("settings.models.title")}

+ +
["connected"]>[number] @@ -30,12 +30,12 @@ const PROVIDER_NOTES = [ const PROVIDER_ICON_SIZE = 16 -export const SettingsProvidersV2: Component = () => { +export const SettingsProvidersV2: Component<{ directory?: string }> = (props) => { const dialog = useDialog() const language = useLanguage() const serverSdk = useServerSDK() const serverSync = useServerSync() - const providers = useProviders() + const providers = useProviders(() => props.directory) const connected = createMemo(() => { return providers @@ -77,7 +77,7 @@ export const SettingsProvidersV2: Component = () => { const note = (id: string) => PROVIDER_NOTES.find((item) => item.match(id))?.key const isConfigCustom = (providerID: string) => { - const provider = serverSync.data.config.provider?.[providerID] + const provider = serverSync().data.config.provider?.[providerID] if (!provider) return false if (provider.npm !== "@ai-sdk/openai-compatible") return false if (!provider.models || Object.keys(provider.models).length === 0) return false @@ -85,11 +85,12 @@ export const SettingsProvidersV2: Component = () => { } const disableProvider = async (providerID: string, name: string) => { - const before = serverSync.data.config.disabled_providers ?? [] + const sync = serverSync() + const before = sync.data.config.disabled_providers ?? [] const next = before.includes(providerID) ? before : [...before, providerID] - serverSync.set("config", "disabled_providers", next) + sync.set("config", "disabled_providers", next) - await serverSync + await sync .updateConfig({ disabled_providers: next }) .then(() => { showToast({ @@ -100,22 +101,23 @@ export const SettingsProvidersV2: Component = () => { }) }) .catch((err: unknown) => { - serverSync.set("config", "disabled_providers", before) + sync.set("config", "disabled_providers", before) const message = err instanceof Error ? err.message : String(err) showToast({ title: language.t("common.requestFailed"), description: message }) }) } const disconnect = async (providerID: string, name: string) => { + const sdk = serverSdk() if (isConfigCustom(providerID)) { - await serverSdk.client.auth.remove({ providerID }).catch(() => undefined) + await sdk.client.auth.remove({ providerID }).catch(() => undefined) await disableProvider(providerID, name) return } - await serverSdk.client.auth + await sdk.client.auth .remove({ providerID }) .then(async () => { - await serverSdk.client.global.dispose() + await sdk.client.global.dispose() showToast({ variant: "success", icon: "circle-check", @@ -133,6 +135,7 @@ export const SettingsProvidersV2: Component = () => { <>

{language.t("settings.providers.title")}

+
@@ -209,7 +212,7 @@ export const SettingsProvidersV2: Component = () => { variant="neutral" icon="plus" onClick={() => { - dialog.show(() => ) + dialog.show(() => ) }} > {language.t("common.connect")} @@ -239,7 +242,7 @@ export const SettingsProvidersV2: Component = () => { variant="neutral" icon="plus" onClick={() => { - dialog.show(() => ) + dialog.show(() => ) }} > {language.t("common.connect")} @@ -251,7 +254,7 @@ export const SettingsProvidersV2: Component = () => { type="button" class="settings-v2-providers-view-all" onClick={() => { - dialog.show(() => ) + dialog.show(() => ) }} > {language.t("dialog.provider.viewAll")} diff --git a/packages/app/src/components/status-popover-body.tsx b/packages/app/src/components/status-popover-body.tsx index 7f2184558128..68b1e18de0a4 100644 --- a/packages/app/src/components/status-popover-body.tsx +++ b/packages/app/src/components/status-popover-body.tsx @@ -6,16 +6,15 @@ import { Tabs } from "@opencode-ai/ui/tabs" import { useMutation, useQueryClient } from "@tanstack/solid-query" import { showToast } from "@/utils/toast" import { useNavigate } from "@solidjs/router" -import { type Accessor, createEffect, createMemo, For, type JSXElement, onCleanup, Show } from "solid-js" +import { createEffect, createMemo, For, type JSXElement, onCleanup, Show } from "solid-js" import { createStore } from "solid-js/store" import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row" import { useLanguage } from "@/context/language" import { usePlatform } from "@/context/platform" -import { useSDK } from "@/context/sdk" +import { useSDK, useSync } from "@/context/directory" import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server" -import { useSync } from "@/context/sync" import { type ServerHealth } from "@/utils/server-health" -import { useQueryOptions } from "@/context/server-sync" +import { useServerContext } from "@/context/server-context" import { pathKey } from "@/utils/path-key" import { useGlobal } from "@/context/global" import { useSettings } from "@/context/settings" @@ -108,22 +107,24 @@ const useMcpToggleMutation = () => { const sdk = useSDK() const language = useLanguage() const queryClient = useQueryClient() - const queryOptions = useQueryOptions() + const server = useServerContext() + const queryOptions = () => server().sync.queryOptions return useMutation(() => ({ mutationFn: async (name: string) => { - const status = sync.data.mcp[name] + const current = sdk() + const status = sync().data.mcp[name] if (status?.status === "connected") { - await sdk.client.mcp.disconnect({ name }) + await current.client.mcp.disconnect({ name }) return } if (status?.status === "needs_auth") { - await sdk.client.mcp.auth.authenticate({ name }) + await current.client.mcp.auth.authenticate({ name }) return } - await sdk.client.mcp.connect({ name }) + await current.client.mcp.connect({ name }) }, - onSuccess: () => queryClient.refetchQueries(queryOptions.mcp(pathKey(sync.directory))), + onSuccess: () => queryClient.refetchQueries(queryOptions().mcp(pathKey(sync().directory))), onError: (err) => { showToast({ variant: "error", @@ -287,7 +288,7 @@ function ServerStatusList(props: { state: ServerStatusState }) { ) } -export function StatusPopoverBody(props: { shown: Accessor }) { +export function StatusPopoverBody() { const sync = useSync() const global = useGlobal() const server = useServer() @@ -305,10 +306,6 @@ export function StatusPopoverBody(props: { shown: Accessor }) { }) } - createEffect(() => { - if (!props.shown()) return - }) - let dialogRun = 0 let dialogDead = false onCleanup(() => { @@ -318,13 +315,13 @@ export function StatusPopoverBody(props: { shown: Accessor }) { const sortedServers = createMemo(() => listServersByHealth(global.servers.list(), server.key, global.servers.health)) const toggleMcp = useMcpToggleMutation() const defaultServer = useDefaultServerKey(platform.getDefaultServer) - const mcpNames = createMemo(() => Object.keys(sync.data.mcp ?? {}).sort((a, b) => a.localeCompare(b))) - const mcpStatus = (name: string) => sync.data.mcp?.[name]?.status + const mcpNames = createMemo(() => Object.keys(sync().data.mcp ?? {}).sort((a, b) => a.localeCompare(b))) + const mcpStatus = (name: string) => sync().data.mcp?.[name]?.status const mcpConnected = createMemo(() => mcpNames().filter((name) => mcpStatus(name) === "connected").length) - const lspItems = createMemo(() => sync.data.lsp ?? []) + const lspItems = createMemo(() => sync().data.lsp ?? []) const lspCount = createMemo(() => lspItems().length) const plugins = createMemo(() => - (sync.data.config.plugin ?? []).map((item) => (typeof item === "string" ? item : item[0])), + (sync().data.config.plugin ?? []).map((item) => (typeof item === "string" ? item : item[0])), ) const pluginCount = createMemo(() => plugins().length) const pluginEmpty = createMemo(() => pluginEmptyMessage(language.t("dialog.plugins.empty"), "opencode.json")) diff --git a/packages/app/src/components/status-popover.tsx b/packages/app/src/components/status-popover.tsx index 6b42e62e535a..24a9311ce6d2 100644 --- a/packages/app/src/components/status-popover.tsx +++ b/packages/app/src/components/status-popover.tsx @@ -6,8 +6,9 @@ import { Popover } from "@opencode-ai/ui/popover" import { Suspense, createMemo, createSignal, lazy, Show, type JSX } from "solid-js" import { useLanguage } from "@/context/language" import { useServer } from "@/context/server" -import { useSync } from "@/context/sync" +import { useSync } from "@/context/directory" import { useGlobal } from "@/context/global" +import { useServerContext } from "@/context/server-context" const Body = lazy(() => import("./status-popover-body").then((x) => ({ default: x.StatusPopoverBody }))) const ServerBody = lazy(() => import("./status-popover-body").then((x) => ({ default: x.StatusPopoverServerBody }))) @@ -18,9 +19,9 @@ export function StatusPopover() { const global = useGlobal() const sync = useSync() const [shown, setShown] = createSignal(false) - const ready = createMemo(() => global.servers.health[server.key]?.healthy === false || sync.data.mcp_ready) + const ready = createMemo(() => global.servers.health[server.key]?.healthy === false || sync().data.mcp_ready) const mcpIssue = createMemo(() => { - const mcp = Object.values(sync.data.mcp ?? {}) + const mcp = Object.values(sync().data.mcp ?? {}) const failed = mcp.some((item) => item.status === "failed" || item.status === "needs_client_registration") const warn = mcp.some((item) => item.status === "needs_auth") if (failed) return "critical" as const @@ -67,7 +68,7 @@ export function StatusPopover() {
} > - + @@ -81,14 +82,14 @@ export function StatusPopoverV2(props: { scope?: "server" }) { function DirectoryStatusPopover() { const language = useLanguage() - const server = useServer() + const server = useServerContext() const global = useGlobal() const sync = useSync() const [shown, setShown] = createSignal(false) - const serverHealth = () => global.servers.health[server.key]?.healthy - const ready = createMemo(() => serverHealth() === false || sync.data.mcp_ready) + const serverHealth = () => global.servers.health[server().key]?.healthy + const ready = createMemo(() => serverHealth() === false || sync().data.mcp_ready) const mcpIssue = createMemo(() => { - const mcp = Object.values(sync.data.mcp ?? {}) + const mcp = Object.values(sync().data.mcp ?? {}) const failed = mcp.some((item) => item.status === "failed" || item.status === "needs_client_registration") const warn = mcp.some((item) => item.status === "needs_auth") if (failed) return "critical" as const @@ -105,7 +106,7 @@ function DirectoryStatusPopover() { onOpenChange: setShown, body: () => ( - + ), })) diff --git a/packages/app/src/components/terminal.tsx b/packages/app/src/components/terminal.tsx index 035eb3285695..256ac2d87573 100644 --- a/packages/app/src/components/terminal.tsx +++ b/packages/app/src/components/terminal.tsx @@ -9,8 +9,8 @@ import { SerializeAddon } from "@/addons/serialize" import { matchKeybind, parseKeybind } from "@/context/command" import { useLanguage } from "@/context/language" import { usePlatform } from "@/context/platform" -import { useSDK } from "@/context/sdk" -import { useServer } from "@/context/server" +import { useSDK } from "@/context/directory" +import { useServerContext } from "@/context/server-context" import { terminalFontFamily, useSettings } from "@/context/settings" import type { LocalPTY } from "@/context/terminal" import { disposeIfDisposable, getHoveredLinkText, setOptionIfSupported } from "@/utils/runtime-adapters" @@ -160,11 +160,13 @@ export const Terminal = (props: TerminalProps) => { const settings = useSettings() const theme = useTheme() const language = useLanguage() - const server = useServer() - const directory = sdk.directory - const client = sdk.client - const url = sdk.url - const auth = server.current?.http + const server = useServerContext() + const current = sdk() + const directory = current.directory + const client = current.client + const url = current.url + const connection = server().connection + const auth = connection.http const username = auth?.username ?? "opencode" const password = auth?.password ?? "" const sameOrigin = new URL(url, location.href).origin === location.origin @@ -540,7 +542,7 @@ export const Terminal = (props: TerminalProps) => { sameOrigin, username, password, - authToken: server.current?.type === "http" ? server.current.authToken : false, + authToken: connection.type === "http" ? connection.authToken : false, }), ) socket.binaryType = "arraybuffer" diff --git a/packages/app/src/components/titlebar-session-events.test.ts b/packages/app/src/components/titlebar-session-events.test.ts deleted file mode 100644 index e1913e946a41..000000000000 --- a/packages/app/src/components/titlebar-session-events.test.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { describe, expect, test } from "bun:test" -import { readSessionTabsRemovedDetail, SESSION_TABS_REMOVED_EVENT } from "./titlebar-session-events" - -describe("titlebar session events", () => { - test("reads valid removed session tab details", () => { - expect( - readSessionTabsRemovedDetail( - new CustomEvent(SESSION_TABS_REMOVED_EVENT, { - detail: { directory: "/tmp/project", sessionIDs: ["ses_1", "ses_2", 1] }, - }), - ), - ).toEqual({ - directory: "/tmp/project", - sessionIDs: ["ses_1", "ses_2"], - }) - }) - - test("ignores invalid removed session tab details", () => { - expect(readSessionTabsRemovedDetail(new Event(SESSION_TABS_REMOVED_EVENT))).toBeUndefined() - expect( - readSessionTabsRemovedDetail( - new CustomEvent(SESSION_TABS_REMOVED_EVENT, { - detail: { directory: "/tmp/project", sessionIDs: [] }, - }), - ), - ).toBeUndefined() - }) -}) diff --git a/packages/app/src/components/titlebar-session-events.ts b/packages/app/src/components/titlebar-session-events.ts deleted file mode 100644 index aa6b5e1d1150..000000000000 --- a/packages/app/src/components/titlebar-session-events.ts +++ /dev/null @@ -1,29 +0,0 @@ -export const SESSION_TABS_REMOVED_EVENT = "opencode:session-tabs-removed" - -export type SessionTabsRemovedDetail = { - directory: string - sessionIDs: string[] -} - -export function notifySessionTabsRemoved(input: SessionTabsRemovedDetail) { - window.dispatchEvent(new CustomEvent(SESSION_TABS_REMOVED_EVENT, { detail: input })) -} - -export function readSessionTabsRemovedDetail(event: Event): SessionTabsRemovedDetail | undefined { - if (!(event instanceof CustomEvent)) return undefined - - const detail: unknown = event.detail - if (!detail || typeof detail !== "object") return undefined - if (!("directory" in detail)) return undefined - if (!("sessionIDs" in detail)) return undefined - if (typeof detail.directory !== "string") return undefined - if (!Array.isArray(detail.sessionIDs)) return undefined - - const sessionIDs = detail.sessionIDs.filter((id): id is string => typeof id === "string") - if (sessionIDs.length === 0) return undefined - - return { - directory: detail.directory, - sessionIDs, - } -} diff --git a/packages/app/src/components/titlebar-shared.tsx b/packages/app/src/components/titlebar-shared.tsx new file mode 100644 index 000000000000..161a61b7a0c2 --- /dev/null +++ b/packages/app/src/components/titlebar-shared.tsx @@ -0,0 +1,116 @@ +import { createEffect, createMemo, untrack } from "solid-js" +import { createStore } from "solid-js/store" +import { useLocation, useNavigate } from "@solidjs/router" +import { usePlatform } from "@/context/platform" +import { useCommand } from "@/context/command" +import { useLanguage } from "@/context/language" +import { applyPath, backPath, forwardPath } from "./titlebar-history" + +const minTitlebarZoom = 0.25 +const windowsControlsBaseWidth = 138 // 3 native Windows caption buttons at 46px each. + +export const TITLEBAR_PORTAL_ID = { + center: "opencode-titlebar-center", + right: "opencode-titlebar-right", +} as const + +export const TITLEBAR_DRAG_CLASS = "[app-region:drag] [&_button]:[app-region:no-drag] [&_a]:[app-region:no-drag] [&_input]:[app-region:no-drag] [&_[role=button]]:[app-region:no-drag] [&_[role=menuitem]]:[app-region:no-drag]" + +export function useTitlebarRuntime(height: number) { + const platform = usePlatform() + const command = useCommand() + const language = useLanguage() + const navigate = useNavigate() + const location = useLocation() + const mac = createMemo(() => platform.platform === "desktop" && platform.os === "macos") + const windows = createMemo(() => platform.platform === "desktop" && platform.os === "windows") + const linux = createMemo(() => platform.platform === "desktop" && platform.os === "linux") + const web = createMemo(() => platform.platform === "web") + const zoom = () => platform.webviewZoom?.() ?? 1 + const titlebarZoom = () => (windows() ? Math.max(zoom(), minTitlebarZoom) : zoom()) + const counterZoom = () => (windows() && titlebarZoom() < 1 ? 1 / titlebarZoom() : 1) + const minHeight = () => { + if (mac()) return `${height / zoom()}px` + if (windows()) return `${height / Math.min(titlebarZoom(), 1)}px` + return undefined + } + const windowsControlsWidth = () => `${windowsControlsBaseWidth / Math.max(titlebarZoom(), 1)}px` + + const [history, setHistory] = createStore({ + stack: [] as string[], + index: 0, + action: undefined as "back" | "forward" | undefined, + }) + + createEffect(() => { + const current = `${location.pathname}${location.search}${location.hash}` + + untrack(() => { + const next = applyPath(history, current) + if (next === history) return + setHistory(next) + }) + }) + + const canBack = createMemo(() => history.index > 0) + const canForward = createMemo(() => history.index < history.stack.length - 1) + const back = () => { + const next = backPath(history) + if (!next) return + setHistory(next.state) + navigate(next.to) + } + const forward = () => { + const next = forwardPath(history) + if (!next) return + setHistory(next.state) + navigate(next.to) + } + + command.register(() => [ + { + id: "common.goBack", + title: language.t("common.goBack"), + category: language.t("command.category.view"), + keybind: "mod+[", + onSelect: back, + }, + { + id: "common.goForward", + title: language.t("common.goForward"), + category: language.t("command.category.view"), + keybind: "mod+]", + onSelect: forward, + }, + ]) + + return { + platform, + command, + language, + mac, + windows, + linux, + web, + zoom, + counterZoom, + minHeight, + windowsControlsWidth, + canBack, + canForward, + back, + forward, + } +} + +export function ChannelIndicator() { + return ( + <> + {["beta", "dev"].includes(import.meta.env.VITE_OPENCODE_CHANNEL) && ( +
+ {import.meta.env.VITE_OPENCODE_CHANNEL.toUpperCase()} +
+ )} + + ) +} diff --git a/packages/app/src/components/titlebar-v2.tsx b/packages/app/src/components/titlebar-v2.tsx new file mode 100644 index 000000000000..abd0a3435e92 --- /dev/null +++ b/packages/app/src/components/titlebar-v2.tsx @@ -0,0 +1,330 @@ +import { createMemo, For, Show } from "solid-js" +import { useQuery } from "@tanstack/solid-query" +import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2" +import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon" +import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2" +import { getProjectAvatarVariant, type LocalProject } from "@/context/layout" +import { useGlobal } from "@/context/global" +import { ServerConnection } from "@/context/server" +import { useAppRoute } from "@/context/route" +import { useTabs } from "@/context/tabs" +import { displayName, getProjectAvatarSource, projectForSession } from "@/pages/layout/helpers" +import { useSessionTabAvatarState } from "@/pages/layout/project-avatar-state" +import { WindowsAppMenu } from "./windows-app-menu" +import { ChannelIndicator, TITLEBAR_DRAG_CLASS, TITLEBAR_PORTAL_ID, useTitlebarRuntime } from "./titlebar-shared" +import { sessionQuery } from "@/utils/v2-route" + +const titlebarHeight = 36 + +export function TitlebarV2() { + const route = useAppRoute() + const tabs = useTabs() + const titlebar = useTitlebarRuntime(titlebarHeight) + const activeTab = () => { + const current = route() + if (current.type === "draft") return tabs.tabs.find((tab) => tab.type === "draft" && tab.draftID === current.draftID) + if (current.type !== "session") return + return tabs.tabs.find( + (tab) => tab.type === "session" && tab.server === current.server && tab.sessionId === current.tabID, + ) + } + const placement = () => { + const current = route() + if (current.type === "session" || current.type === "draft") { + return { server: current.server, directory: current.directory } + } + } + const openNewTab = () => { + const current = placement() + if (!current) return + tabs.newDraft(current) + } + + titlebar.command.register("tabs", () => { + const current = activeTab() + return [ + { + id: "tab.new", + category: "tab", + title: titlebar.language.t("command.session.new"), + keybind: "mod+t", + hidden: true, + onSelect: openNewTab, + }, + current && { + id: "tab.close", + category: "tab", + title: titlebar.language.t("command.tab.close"), + keybind: "mod+w", + hidden: true, + onSelect: () => tabs.close(current, true), + }, + { + id: `tab.prev`, + category: "tab", + title: "", + keybind: `mod+option+ArrowLeft`, + hidden: true, + onSelect: () => { + const current = activeTab() + if (current) tabs.previous(current) + }, + }, + { + id: `tab.next`, + category: "tab", + title: "", + keybind: `mod+option+ArrowRight`, + hidden: true, + onSelect: () => { + const current = activeTab() + if (current) tabs.next(current) + }, + }, + ...Array.from({ length: 9 }, (_, index) => { + const number = index + 1 + return { + id: `tab.${number}`, + category: "tab", + title: "", + keybind: `mod+${number}`, + disabled: tabs.tabs.length <= index, + hidden: true, + onSelect: () => tabs.select(index), + } + }), + ].filter((value) => value !== undefined) + }) + + return ( +
+
+ + + + + } + state={route().type === "home" ? "pressed" : undefined} + /> + +
+
+ + {(tab, index) => ( + <> + {index() !== 0 && ( +
+ )} + {tab.type === "session" ? ( + tabs.select(index())} + onClose={() => tabs.close(tab, activeTab() === tab)} + active={activeTab() === tab} + /> + ) : ( + tabs.select(index())} + onClose={() => tabs.close(tab, activeTab() === tab)} + active={activeTab() === tab} + /> + )} + + )} + +
+ + } + onClick={openNewTab} + aria-label={titlebar.language.t("command.session.new")} + /> + +
+
+
+
+
+
+
+ ) +} + +function TabNavItem(props: { + href: string + server: ServerConnection.Key + sessionId: string + onSelect: () => void + onClose: () => void + active?: boolean +}) { + const global = useGlobal() + const closeTab = (event: MouseEvent) => { + event.preventDefault() + event.stopPropagation() + props.onClose() + } + const server = createMemo(() => global.servers.get(props.server)) + const session = useQuery(() => sessionQuery(props.server, server().instance, server().sdk, props.sessionId)) + + return ( +
{ + if (event.button !== 1) return + closeTab(event) + }} + > + + {(locator) => { + const project = createMemo(() => projectForSession(locator().session, server().projects.list())) + return ( + { + event.preventDefault() + props.onSelect() + }} + class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base" + > + + + + {locator().session.title} + + ) + }} + + +
+
+ } + /> +
+
+ ) +} + +function ProjectTabAvatar(props: { + project?: LocalProject + server: ServerConnection.Key + directory: string + sessionId: string +}) { + const state = useSessionTabAvatarState( + () => props.server, + () => props.directory, + () => props.sessionId, + ) + return ( + + ) +} + +function NewSessionTabItem(props: { + href: string + title: string + onSelect: () => void + onClose: () => void + active: boolean +}) { + const closeTab = (event: MouseEvent) => { + event.preventDefault() + event.stopPropagation() + props.onClose() + } + return ( +
{ + if (event.button !== 1) return + closeTab(event) + }} + > + { + event.preventDefault() + props.onSelect() + }} + aria-current={props.active ? "page" : undefined} + class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 overflow-hidden text-[13px] font-medium leading-5 text-[var(--v2-text-text-base)]" + > + + + + {props.title} + +
+ { + event.preventDefault() + event.stopPropagation() + }} + onClick={closeTab} + icon={} + aria-label="Close tab" + /> +
+
+ ) +} diff --git a/packages/app/src/components/titlebar.tsx b/packages/app/src/components/titlebar.tsx index 36c7e46b626a..08c843232256 100644 --- a/packages/app/src/components/titlebar.tsx +++ b/packages/app/src/components/titlebar.tsx @@ -1,850 +1,192 @@ -import { createEffect, createMemo, createResource, For, Match, Show, startTransition, Switch, untrack } from "solid-js" -import { createStore } from "solid-js/store" -import { useLocation, useMatch, useNavigate, useParams } from "@solidjs/router" +import { createMemo, Show } from "solid-js" +import { useLocation, useNavigate, useParams } from "@solidjs/router" import { IconButton } from "@opencode-ai/ui/icon-button" import { Icon } from "@opencode-ai/ui/icon" import { Button } from "@opencode-ai/ui/button" import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip" -import { useTheme } from "@opencode-ai/ui/theme/context" -import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2" -import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon" - -import { getProjectAvatarVariant, LayoutRoute, useLayout, type LocalProject } from "@/context/layout" -import { usePlatform } from "@/context/platform" -import { useCommand } from "@/context/command" -import { useLanguage } from "@/context/language" -import { useSettings } from "@/context/settings" +import { useLayout } from "@/context/layout" import { WindowsAppMenu } from "./windows-app-menu" -import { applyPath, backPath, forwardPath } from "./titlebar-history" -import { useServerSync } from "@/context/server-sync" -import { base64Encode } from "@opencode-ai/core/util/encode" -import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2" -import { displayName, getProjectAvatarSource, projectForSession } from "@/pages/layout/helpers" -import { useSessionTabAvatarState } from "@/pages/layout/project-avatar-state" -import { makeEventListener } from "@solid-primitives/event-listener" -import { readSessionTabsRemovedDetail, SESSION_TABS_REMOVED_EVENT } from "@/components/titlebar-session-events" -import { useGlobal } from "@/context/global" -import { decode64 } from "@/utils/base64" -import { ServerConnection, useServer } from "@/context/server" -import { tabHref, useTabs, type Tab } from "@/context/tabs" - -type TauriDesktopWindow = { - startDragging?: () => Promise - toggleMaximize?: () => Promise -} - -type TauriThemeWindow = { - setTheme?: (theme?: "light" | "dark" | null) => Promise -} +import { ChannelIndicator, TITLEBAR_DRAG_CLASS, TITLEBAR_PORTAL_ID, useTitlebarRuntime } from "./titlebar-shared" -type TauriApi = { - window?: { - getCurrentWindow?: () => TauriDesktopWindow - } - webviewWindow?: { - getCurrentWebviewWindow?: () => TauriThemeWindow - } -} - -const tauriApi = () => (window as unknown as { __TAURI__?: TauriApi }).__TAURI__ -const currentDesktopWindow = () => tauriApi()?.window?.getCurrentWindow?.() -const currentThemeWindow = () => tauriApi()?.webviewWindow?.getCurrentWebviewWindow?.() -const legacyTitlebarHeight = 40 -const v2TitlebarHeight = 36 -const minTitlebarZoom = 0.25 -const windowsControlsBaseWidth = 138 // 3 native Windows caption buttons at 46px each. +const titlebarHeight = 40 -export type TitlebarUpdate = { - version: () => string | undefined - installing: () => boolean - install: () => void -} - -export function Titlebar(props: { update?: TitlebarUpdate }) { +export function Titlebar() { const layout = useLayout() - const platform = usePlatform() - const command = useCommand() - const language = useLanguage() - const settings = useSettings() - const theme = useTheme() - const server = useServer() const navigate = useNavigate() const location = useLocation() - const params = useParams() - const useV2Titlebar = createMemo(() => settings.general.newLayoutDesigns()) - - const mac = createMemo(() => platform.platform === "desktop" && platform.os === "macos") - const windows = createMemo(() => platform.platform === "desktop" && platform.os === "windows") - const electronWindows = createMemo(() => windows() && !tauriApi()) - const linux = createMemo(() => platform.platform === "desktop" && platform.os === "linux") - const web = createMemo(() => platform.platform === "web") - const zoom = () => platform.webviewZoom?.() ?? 1 - const titlebarZoom = () => (windows() ? Math.max(zoom(), minTitlebarZoom) : zoom()) - const counterZoom = () => (windows() && titlebarZoom() < 1 ? 1 / titlebarZoom() : 1) - const minHeight = () => { - const height = useV2Titlebar() ? v2TitlebarHeight : legacyTitlebarHeight - if (mac()) return `${height / zoom()}px` - if (windows()) return `${height / Math.min(titlebarZoom(), 1)}px` - return undefined - } - const windowsControlsWidth = () => `${windowsControlsBaseWidth / Math.max(titlebarZoom(), 1)}px` - - const [history, setHistory] = createStore({ - stack: [] as string[], - index: 0, - action: undefined as "back" | "forward" | undefined, - }) - - const path = () => `${location.pathname}${location.search}${location.hash}` + const params = useParams<{ dir?: string; id?: string }>() + const titlebar = useTitlebarRuntime(titlebarHeight) const creating = createMemo(() => { if (!params.dir) return false if (params.id) return false const parts = location.pathname.replace(/\/+$/, "").split("/") return parts.at(-1) === "session" }) - - createEffect(() => { - const current = path() - - untrack(() => { - const next = applyPath(history, current) - if (next === history) return - setHistory(next) - }) - }) - - const canBack = createMemo(() => history.index > 0) - const canForward = createMemo(() => history.index < history.stack.length - 1) const hasProjects = createMemo(() => layout.projects.list().length > 0) - const nav = createMemo(() => (useV2Titlebar() ? settings.general.showNavigation() : true)) - const updateState = createMemo(() => { - const installing = props.update?.installing() ?? false - const version = props.update?.version() - return { - visible: version !== undefined || installing, - installing, - label: "Update", - ariaLabel: language.t("toast.update.action.installRestart"), - title: version ? `Update ${version}` : undefined, - onInstall: () => props.update?.install(), - } - }) - const v2RightState = createMemo(() => ({ - update: updateState(), - })) - - const back = () => { - const next = backPath(history) - if (!next) return - setHistory(next.state) - navigate(next.to) - } - - const forward = () => { - const next = forwardPath(history) - if (!next) return - setHistory(next.state) - navigate(next.to) - } - - command.register(() => [ - { - id: "common.goBack", - title: language.t("common.goBack"), - category: language.t("command.category.view"), - keybind: "mod+[", - onSelect: back, - }, - { - id: "common.goForward", - title: language.t("common.goForward"), - category: language.t("command.category.view"), - keybind: "mod+]", - onSelect: forward, - }, - ]) - - const getWin = () => { - if (platform.platform !== "desktop") return - return currentDesktopWindow() - } - - createEffect(() => { - if (platform.platform !== "desktop") return - - const scheme = theme.colorScheme() - const value = scheme === "system" ? null : scheme - - const win = currentThemeWindow() - if (!win?.setTheme) return - - void win.setTheme(value).catch(() => undefined) - }) - - const interactive = (target: EventTarget | null) => { - if (!(target instanceof Element)) return false - - const selector = - "button, a, input, textarea, select, option, [role='button'], [role='menuitem'], [contenteditable='true'], [contenteditable='']" - - return !!target.closest(selector) - } - - const drag = (e: MouseEvent) => { - if (platform.platform !== "desktop") return - if (e.buttons !== 1) return - if (interactive(e.target)) return - - const win = getWin() - if (!win?.startDragging) return - - e.preventDefault() - void win.startDragging().catch(() => undefined) - } - - const maximize = (e: MouseEvent) => { - if (platform.platform !== "desktop") return - if (interactive(e.target)) return - if (e.target instanceof Element && e.target.closest("[data-tauri-decorum-tb]")) return - - const win = getWin() - if (!win?.toggleMaximize) return - - e.preventDefault() - void win.toggleMaximize().catch(() => undefined) - } return (
- - - {(_) => { - const serverSync = useServerSync() - const navigate = useNavigate() - const homeMatch = useMatch(() => "/") - const layout = useLayout() - - const newSessionHref = () => { - if (params.dir) return `/${params.dir}/session` - - const project = layout.projects.list()[0] - if (!project) return "/" - - return `/${base64Encode(project.worktree)}/session` - } - - const tabs = useTabs() - const tabsStore = tabs.store - const tabsStoreActions = tabs - const navigateTab = (tab: Tab) => { - const href = tabHref(tab) - if (tab.server === server.key) { - navigate(href) - return - } - void startTransition(() => { - server.setActive(tab.server) - navigate(href) - }) - } - - const matchRoute = (route: LayoutRoute) => { - if (route.type === "home") return - if (route.type === "dir-new-sesssion") { - } - if (route.type === "session") { - const main = tabsStore.find( - (item) => - item.type === "session" && item.server === route.server && item.sessionId === route.sessionId, - ) - if (main) return main - const sync = serverSync.createDirSyncContext(route.dir) - const session = sync.session.get(route.sessionId) - if (session?.parentID) { - const parentID = session.parentID - const parent = tabsStore.find( - (item) => item.type === "session" && item.server === route.server && item.sessionId === parentID, - ) - if (parent) return parent - } - } - } - - const currentTab = () => matchRoute(layout.route()) - - createEffect(() => { - const route = layout.route() - if (!tabs.ready()) return - const tab = currentTab() - if (tab) return - - if (route.type === "session") { - const sync = serverSync.createDirSyncContext(route.dir) - const session = sync.session.get(route.sessionId) - if (!session) return - const sessionId = session.parentID ?? session.id - const next = { - server: route.server ?? server.key, - dirBase64: route.dirBase64, - sessionId, - } - tabsStoreActions.addSessionTab(next) - } - }) - - makeEventListener(window, SESSION_TABS_REMOVED_EVENT, (event) => { - const detail = readSessionTabsRemovedDetail(event) - if (!detail) return - tabsStoreActions.removeSessions(detail) - }) - - const openNewTab = () => navigate(newSessionHref()) - - command.register("tabs", () => { - const current = currentTab() - - return [ - { - id: "tab.new", - category: "tab", - title: language.t("command.session.new"), - keybind: "mod+t", - hidden: true, - onSelect: openNewTab, - }, - current && { - id: "tab.close", - category: "tab", - title: language.t("command.tab.close"), - keybind: "mod+w", - hidden: true, - onSelect: () => { - tabsStoreActions.removeTab(tabsStore.findIndex((tab) => current === tab)) - }, - }, - { - id: `tab.prev`, - category: "tab", - title: "", - keybind: `mod+option+ArrowLeft`, - hidden: true, - onSelect: () => { - let index = tabsStore.findIndex((tab) => tab === currentTab()) - if (index === -1) return - - index -= 1 - if (index === -1) index = tabsStore.length - 1 - - const next = tabsStore[index] - if (next) navigateTab(next) - }, - }, - { - id: `tab.next`, - category: "tab", - title: "", - keybind: `mod+option+ArrowRight`, - hidden: true, - onSelect: () => { - let index = tabsStore.findIndex((tab) => tab === currentTab()) - if (index === -1) return - - index += 1 - if (index === tabsStore.length) index = 0 - - const next = tabsStore[index] - if (next) navigateTab(next) - }, - }, - ...Array.from({ length: 9 }, (_, i) => { - const index = i - const number = index + 1 - return { - id: `tab.${number}`, - category: "tab", - title: "", - keybind: `mod+${number}`, - disabled: layout.projects.list().length <= index, - hidden: true, - onSelect: () => { - const tab = tabsStore[index] - if (tab) navigateTab(tab) - }, - } - }), - ].filter((v) => v !== undefined) - }) - - return ( -
- - - - - } - state={!!homeMatch() ? "pressed" : undefined} - /> - -
-
- - {(tab, i) => ( - <> - {i() !== 0 && ( -
- )} - navigateTab(tab)} - onClose={() => tabsStoreActions.removeTab(i())} - active={currentTab() === tab} - activeServer={tab.server === server.key} - /> - - )} - -
- } - as="a" - href={newSessionHref()} - aria-label={language.t("command.session.new")} - /> - } - > - { - const tab = tabsStore.at(-1) - if (tab) navigateTab(tab) - else navigate("/") - }} - /> - -
-
- - -
- -
- ) +
+
- -
-
+ + + + +
+ +
+ + +
+ +
+ +
+ - - - - - {/*
*/} -
- -
- - -
- -
- -
- + + + +
- ) -} - -type TitlebarUpdatePillState = { - visible: boolean - installing: boolean - label: string - ariaLabel: string - title?: string - onInstall: () => void -} - -type TitlebarV2RightState = { - update: TitlebarUpdatePillState -} - -function TitlebarV2Right(props: { state: TitlebarV2RightState }) { - return ( -
- - - -
-
- ) -} - -function TitlebarUpdateIconButton(props: { state: TitlebarUpdatePillState }) { - return ( -
- -
- ) -} - -function TabNavItem(props: { - href: string - server: ServerConnection.Key - directory: string - sessionId?: string - hideClose?: boolean - onClose: () => void - onNavigate: () => void - active?: boolean - activeServer: boolean -}) { - const closeTab = (event: MouseEvent) => { - event.preventDefault() - event.stopPropagation() - props.onClose() - } - const global = useGlobal() - const serverCtx = createMemo(() => { - const conn = global.servers.list().find((item) => ServerConnection.key(item) === props.server) - if (conn) return global.createServerCtx(conn) - }) - const dirSyncCtx = createMemo(() => serverCtx()?.sync.createDirSyncContext(props.directory)) - - const [session] = createResource( - () => { - const ctx = dirSyncCtx() - if (!ctx || !props.sessionId) return - return [props.sessionId, ctx] as const - }, - async ([sessionId, dirSyncCtx]) => { - await dirSyncCtx.session.sync(sessionId).catch(() => {}) - return dirSyncCtx.session.get(sessionId) - }, - { initialValue: props.sessionId ? dirSyncCtx()?.session.get(props.sessionId) : undefined }, - ) - - return ( -
{ - if (event.button !== 1) return - closeTab(event) - }} - > - - {(session) => { - const project = createMemo(() => projectForSession(session(), serverCtx()?.projects.list() ?? [])) +
- return ( - { - event.preventDefault() - props.onNavigate() - }} - class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base" - > - - - - {session().title} - - ) - }} - +
+
+
-
- } - /> -
-
- ) -} - -function ProjectTabAvatar(props: { - project?: LocalProject - directory: string - sessionId: string - activeServer: boolean -}) { - const directory = () => props.directory - const sessionId = () => props.sessionId - const state = useSessionTabAvatarState(directory, sessionId, () => props.activeServer) - return ( - - ) -} - -function NewSessionTabItem(props: { href: string; title: string; onClose: () => void }) { - const closeTab = (event: MouseEvent) => { - event.preventDefault() - event.stopPropagation() - props.onClose() - } - return ( -
{ - if (event.button !== 1) return - closeTab(event) - }} - > - - - - - {props.title} - -
- { - event.preventDefault() - event.stopPropagation() - }} - onClick={closeTab} - icon={} - aria-label="Close tab" - /> -
-
- ) -} - -function ChannelIndicator() { - return ( - <> - {["beta", "dev"].includes(import.meta.env.VITE_OPENCODE_CHANNEL) && ( -
- {import.meta.env.VITE_OPENCODE_CHANNEL.toUpperCase()} + > +
+ +
+
- )} - +
+ ) } diff --git a/packages/app/src/context/comments.test.ts b/packages/app/src/context/comments.test.ts index 82fa170f2fc7..21fd35cf1aae 100644 --- a/packages/app/src/context/comments.test.ts +++ b/packages/app/src/context/comments.test.ts @@ -8,6 +8,7 @@ beforeAll(async () => { mock.module("@solidjs/router", () => ({ useNavigate: () => () => undefined, useParams: () => ({}), + useSearchParams: () => [{}], })) mock.module("@opencode-ai/ui/context", () => ({ createSimpleContext: () => ({ diff --git a/packages/app/src/context/comments.tsx b/packages/app/src/context/comments.tsx index 32946da7ca86..d62ee459e15d 100644 --- a/packages/app/src/context/comments.tsx +++ b/packages/app/src/context/comments.tsx @@ -1,13 +1,13 @@ import { batch, createMemo, createRoot, onCleanup } from "solid-js" import { createStore, reconcile, type SetStoreFunction, type Store } from "solid-js/store" import { createSimpleContext } from "@opencode-ai/ui/context" -import { useParams } from "@solidjs/router" -import { Persist, persisted } from "@/utils/persist" -import { useServerSDK } from "./server-sdk" -import type { ServerScope } from "@/utils/server-scope" +import { base64Encode } from "@opencode-ai/core/util/encode" +import { persisted } from "@/utils/persist" +import { ScopedKey } from "@/utils/server-scope" import { createScopedCache } from "@/utils/scoped-cache" import { uuid } from "@/utils/uuid" import type { SelectedLineRange } from "@/context/file" +import { DirectoryState, type DirectoryStateScope, useDirectory } from "./directory" export type LineComment = { id: string @@ -19,21 +19,9 @@ export type LineComment = { type CommentFocus = { file: string; id: string } -const WORKSPACE_KEY = "__workspace__" const MAX_COMMENT_SESSIONS = 20 -function sessionKey(dir: string, id: string | undefined) { - return `${dir}\n${id ?? WORKSPACE_KEY}` -} - -function decodeSessionKey(key: string) { - const split = key.lastIndexOf("\n") - if (split < 0) return { dir: key, id: WORKSPACE_KEY } - return { - dir: key.slice(0, split), - id: key.slice(split + 1), - } -} +type Scope = DirectoryStateScope type CommentStore = { comments: Record @@ -168,11 +156,13 @@ export function createCommentSessionForTest(comments: Record({ comments: {}, }), @@ -201,17 +191,11 @@ export const { use: useComments, provider: CommentsProvider } = createSimpleCont name: "Comments", gate: false, init: () => { - const params = useParams() - const serverSDK = useServerSDK() + const directory = useDirectory() const cache = createScopedCache( - (key) => { - const decoded = decodeSessionKey(key) + (_key: ScopedKey, scope: Scope) => { return createRoot((dispose) => ({ - value: createCommentSession( - serverSDK.scope, - decoded.dir, - decoded.id === WORKSPACE_KEY ? undefined : decoded.id, - ), + value: createCommentSession(scope), dispose, })) }, @@ -223,12 +207,12 @@ export const { use: useComments, provider: CommentsProvider } = createSimpleCont onCleanup(() => cache.clear()) - const load = (dir: string, id: string | undefined) => { - const key = sessionKey(dir, id) - return cache.get(key).value - } + const load = (scope: Scope) => cache.get(DirectoryState.key(scope), scope).value - const session = createMemo(() => load(params.dir!, params.id)) + const session = createMemo(() => { + const current = directory() + return load({ serverScope: current.server.scope, directory: current.directory, state: current.state }) + }) return { ready: () => session().ready(), diff --git a/packages/app/src/context/directory-sync.ts b/packages/app/src/context/directory-sync.ts index e8221fd0b088..76dfd3f333d4 100644 --- a/packages/app/src/context/directory-sync.ts +++ b/packages/app/src/context/directory-sync.ts @@ -11,7 +11,7 @@ import { import type { Message, Part } from "@opencode-ai/sdk/v2/client" import { SESSION_CACHE_LIMIT, dropSessionCaches, pickSessionCacheEvictions } from "./global-sync/session-cache" import { diffs as list, message as clean } from "@/utils/diffs" -import { createServerSdkContext, useServerSDK } from "./server-sdk" +import { createServerSdkContext } from "./server-sdk" import { type createServerSyncContextInner } from "./server-sync" const SKIP_PARTS = new Set(["patch", "step-start", "step-finish"]) @@ -174,7 +174,7 @@ function setOptimisticRemove(setStore: (...args: unknown[]) => void, input: Opti export const createDirSyncContext = ( directory: string, serverSync: ReturnType, - serverSDK: ReturnType = useServerSDK(), + serverSDK: ReturnType, ) => { const client = serverSDK.createClient({ directory, throwOnError: true }) diff --git a/packages/app/src/context/directory.tsx b/packages/app/src/context/directory.tsx new file mode 100644 index 000000000000..72ad83f25d05 --- /dev/null +++ b/packages/app/src/context/directory.tsx @@ -0,0 +1,101 @@ +import { createContext, createMemo, type Accessor, type ParentProps, useContext } from "solid-js" +import { useServerContext, type ServerContext } from "./server-context" +import { Persist, removePersisted, type PersistTarget } from "@/utils/persist" +import type { Platform } from "./platform" +import { ScopedKey, ServerScope, SessionRouteKey, SessionStateKey, type ServerScope as ServerScopeValue } from "@/utils/server-scope" +import { base64Encode } from "@opencode-ai/core/util/encode" + +export type DirectorySDK = ReturnType +export type DirectorySync = ReturnType + +export type DirectoryState = { type: "workspace" } | { type: "draft"; id: string } | { type: "session"; id: string } + +export type DirectoryStateScope = { + serverScope: ServerScopeValue + directory: string + state: DirectoryState +} + +const DRAFT_SCOPE = "draft" as ServerScopeValue +const DRAFT_PERSISTED_KEYS = ["prompt", "comments", "model-selection", "file-view", "layout"] + +export const DirectoryState = { + sessionID(state: DirectoryState) { + if (state.type === "session") return state.id + }, + key(scope: DirectoryStateScope) { + if (scope.state.type === "draft") return ScopedKey.from(DRAFT_SCOPE, scope.state.id) + if (scope.state.type === "session") { + return ScopedKey.from(scope.serverScope, "session", scope.directory, scope.state.id) + } + return ScopedKey.from(scope.serverScope, "workspace", scope.directory) + }, + layoutKey(scope: DirectoryStateScope) { + if (scope.state.type === "draft") return DirectoryState.key(scope) + return SessionStateKey.from( + scope.serverScope, + SessionRouteKey.fromRoute(base64Encode(scope.directory), DirectoryState.sessionID(scope.state)), + ) + }, + persist(scope: DirectoryStateScope, key: string, legacy?: string[]): PersistTarget { + if (scope.state.type === "draft") return Persist.draft(scope.state.id, key) + if (scope.state.type === "session") { + return Persist.serverSession(scope.serverScope, scope.directory, scope.state.id, key, legacy) + } + return Persist.serverWorkspace(scope.serverScope, scope.directory, key, legacy) + }, + draftID(key: string) { + const prefix = ScopedKey.prefix(DRAFT_SCOPE) + if (!key.startsWith(prefix)) return + return key.slice(prefix.length) + }, + removeDraft(draftID: string, platform: Platform) { + for (const key of DRAFT_PERSISTED_KEYS) removePersisted(Persist.draft(draftID, key), platform) + }, +} + +export type DirectoryContext = { + server: ServerContext + directory: string + sessionID: string | undefined + state: DirectoryState + sdk: DirectorySDK + sync: DirectorySync +} + +const Context = createContext>() + +export function DirectoryProvider( + props: ParentProps<{ directory: Accessor; sessionID: Accessor; state: Accessor }>, +) { + const server = useServerContext() + const value = createMemo(() => { + const current = server() + const directory = props.directory() + return { + server: current, + directory, + sessionID: props.sessionID(), + state: props.state(), + sdk: current.sdk.createDirSdkContext(directory), + sync: current.sync.createDirSyncContext(directory), + } + }) + return {props.children} +} + +export function useDirectory() { + const directory = useContext(Context) + if (!directory) throw new Error("Directory context must be used within DirectoryProvider") + return directory +} + +export function useSDK(): Accessor { + const directory = useDirectory() + return () => directory().sdk +} + +export function useSync(): Accessor { + const directory = useDirectory() + return () => directory().sync +} diff --git a/packages/app/src/context/file.tsx b/packages/app/src/context/file.tsx index fcfd750c2e07..5e0474dfa28e 100644 --- a/packages/app/src/context/file.tsx +++ b/packages/app/src/context/file.tsx @@ -1,16 +1,14 @@ -import { batch, createEffect, createMemo, onCleanup } from "solid-js" -import { createStore, produce, reconcile } from "solid-js/store" +import { createMemo, createRoot, getOwner, onCleanup } from "solid-js" +import { createStore, produce } from "solid-js/store" import { createSimpleContext } from "@opencode-ai/ui/context" import { showToast } from "@/utils/toast" -import { useParams } from "@solidjs/router" import { getFilename } from "@opencode-ai/core/util/path" -import { useSDK } from "./sdk" -import { useSync } from "./sync" +import { useDirectory } from "./directory" import { useLanguage } from "@/context/language" -import { useLayout } from "@/context/layout" import { createPathHelpers } from "./file/path" import { approxBytes, + createFileContentCache, evictContentLru, getFileContentBytesTotal, getFileContentEntryCount, @@ -21,10 +19,10 @@ import { touchFileContent, } from "./file/content-cache" import { createFileViewCache } from "./file/view-cache" -import { useServerSDK } from "./server-sdk" -import { SessionRouteKey, SessionStateKey } from "@/utils/server-scope" +import { ScopedKey } from "@/utils/server-scope" import { createFileTreeStore } from "./file/tree-store" import { invalidateFromWatcher } from "./file/watcher" +import { createScopedCache } from "@/utils/scoped-cache" import { selectionFromLines, type FileState, @@ -45,6 +43,8 @@ export { touchFileContent, } +const MAX_FILE_DIRECTORIES = 20 + function errorMessage(error: unknown, fallback: string) { if (error instanceof Error && error.message) return error.message if (typeof error === "string" && error) return error @@ -55,214 +55,188 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({ name: "File", gate: false, init: () => { - const sdk = useSDK() - useSync() - const params = useParams() - const serverSDK = useServerSDK() + const directory = useDirectory() const language = useLanguage() - const layout = useLayout() - - const scope = createMemo(() => sdk.directory) - const path = createPathHelpers(scope) - const tabs = layout.tabs(() => - SessionStateKey.from(serverSDK.scope, SessionRouteKey.fromRoute(params.dir, params.id)), - ) - - const inflight = new Map>() - const [store, setStore] = createStore<{ - file: Record - }>({ - file: {}, - }) - - const tree = createFileTreeStore({ - scope, - normalizeDir: path.normalizeDir, - list: (dir) => sdk.client.file.list({ path: dir }).then((x) => x.data ?? []), - onError: (message) => { - showToast({ - variant: "error", - title: language.t("toast.file.listFailed.title"), - description: message, - }) - }, - }) - - const evictContent = (keep?: Set) => { - evictContentLru(keep, (target) => { - if (!store.file[target]) return - setStore( - "file", - target, - produce((draft) => { - draft.content = undefined - draft.loaded = false - }), - ) - }) - } + const owner = getOwner() + const viewCache = createFileViewCache() - createEffect(() => { - scope() - inflight.clear() - resetFileContentLru() - batch(() => { - setStore("file", reconcile({})) - tree.reset() - }) - }) - - const viewCache = createFileViewCache(serverSDK.scope) - const view = createMemo(() => viewCache.load(scope(), params.id)) - - const ensure = (file: string) => { - if (!file) return - if (store.file[file]) return - setStore("file", file, { path: file, name: getFilename(file) }) - } - - const setLoading = (file: string) => { - setStore( - "file", - file, - produce((draft) => { - draft.loading = true - draft.error = undefined - }), - ) - } + const cache = createScopedCache( + (_key: ScopedKey, current: ReturnType) => + createRoot((dispose) => { + const currentSDK = current.sdk + const path = createPathHelpers(() => current.directory) + const inflight = new Map>() + const contentCache = createFileContentCache() + const [store, setStore] = createStore<{ file: Record }>({ file: {} }) + const tree = createFileTreeStore({ + scope: () => current.directory, + normalizeDir: path.normalizeDir, + list: (dir) => currentSDK.client.file.list({ path: dir }).then((x) => x.data ?? []), + onError: (message) => { + showToast({ + variant: "error", + title: language.t("toast.file.listFailed.title"), + description: message, + }) + }, + }) - const setLoaded = (file: string, content: FileState["content"]) => { - setStore( - "file", - file, - produce((draft) => { - draft.loaded = true - draft.loading = false - draft.content = content - }), - ) - } + const evictContent = (keep?: Set) => { + contentCache.evict(keep, (target) => { + if (!store.file[target]) return + setStore( + "file", + target, + produce((draft) => { + draft.content = undefined + draft.loaded = false + }), + ) + }) + } - const setLoadError = (file: string, message: string) => { - setStore( - "file", - file, - produce((draft) => { - draft.loading = false - draft.error = message - }), - ) - showToast({ - variant: "error", - title: language.t("toast.file.loadFailed.title"), - description: message, - }) - } + const ensure = (file: string) => { + if (!file) return + if (store.file[file]) return + setStore("file", file, { path: file, name: getFilename(file) }) + } - const load = (input: string, options?: { force?: boolean }) => { - const file = path.normalize(input) - if (!file) return Promise.resolve() + const setLoading = (file: string) => { + setStore( + "file", + file, + produce((draft) => { + draft.loading = true + draft.error = undefined + }), + ) + } - const directory = scope() - const key = `${directory}\n${file}` - ensure(file) + const setLoaded = (file: string, content: FileState["content"]) => { + setStore( + "file", + file, + produce((draft) => { + draft.loaded = true + draft.loading = false + draft.content = content + }), + ) + } - const current = store.file[file] - if (!options?.force && current?.loaded) return Promise.resolve() + const setLoadError = (file: string, message: string) => { + setStore( + "file", + file, + produce((draft) => { + draft.loading = false + draft.error = message + }), + ) + showToast({ + variant: "error", + title: language.t("toast.file.loadFailed.title"), + description: message, + }) + } - const pending = inflight.get(key) - if (pending) return pending + const load = (input: string, options?: { force?: boolean }) => { + const file = path.normalize(input) + if (!file) return Promise.resolve() + ensure(file) - setLoading(file) + if (!options?.force && store.file[file]?.loaded) return Promise.resolve() + const pending = inflight.get(file) + if (pending) return pending + setLoading(file) - const promise = sdk.client.file - .read({ path: file }) - .then((x) => { - if (scope() !== directory) return - const content = x.data - setLoaded(file, content) + const promise = currentSDK.client.file + .read({ path: file }) + .then((x) => { + const content = x.data + setLoaded(file, content) + if (!content) return + contentCache.touch(file, approxBytes(content)) + evictContent(new Set([file])) + }) + .catch((e) => setLoadError(file, errorMessage(e, language.t("error.chain.unknown")))) + .finally(() => inflight.delete(file)) - if (!content) return - touchFileContent(file, approxBytes(content)) - evictContent(new Set([file])) - }) - .catch((e) => { - if (scope() !== directory) return - setLoadError(file, errorMessage(e, language.t("error.chain.unknown"))) - }) - .finally(() => { - inflight.delete(key) - }) + inflight.set(file, promise) + return promise + } - inflight.set(key, promise) - return promise - } + const search = (query: string, dirs: "true" | "false") => + currentSDK.client.find.files({ query, dirs }).then( + (x) => (x.data ?? []).map(path.normalize), + () => [], + ) - const search = (query: string, dirs: "true" | "false") => - sdk.client.find.files({ query, dirs }).then( - (x) => (x.data ?? []).map(path.normalize), - () => [], - ) + const get = (input: string) => { + const file = path.normalize(input) + const state = store.file[file] + const content = state?.content + if (!content) return state + if (contentCache.has(file)) { + contentCache.touch(file) + return state + } + contentCache.touch(file, approxBytes(content)) + return state + } - const stop = sdk.event.listen((e) => { - invalidateFromWatcher(e.details, { - normalize: path.normalize, - hasFile: (file) => Boolean(store.file[file]), - isOpen: (file) => tabs.all().some((tab) => path.pathFromTab(tab) === file), - loadFile: (file) => { - void load(file, { force: true }) - }, - node: tree.node, - isDirLoaded: tree.isLoaded, - refreshDir: (dir) => { - void tree.listDir(dir, { force: true }) - }, - }) - }) + const stop = currentSDK.event.listen((event) => { + invalidateFromWatcher(event.details, { + normalize: path.normalize, + hasFile: (file) => Boolean(store.file[file]), + loadFile: (file) => void load(file, { force: true }), + node: tree.node, + isDirLoaded: tree.isLoaded, + refreshDir: (dir) => void tree.listDir(dir, { force: true }), + }) + }) - const get = (input: string) => { - const file = path.normalize(input) - const state = store.file[file] - const content = state?.content - if (!content) return state - if (hasFileContent(file)) { - touchFileContent(file) - return state - } - touchFileContent(file, approxBytes(content)) - return state - } + onCleanup(() => { + stop() + inflight.clear() + contentCache.reset() + tree.reset() + }) - function withPath(input: string, action: (file: string) => unknown) { - return action(path.normalize(input)) - } - const scrollTop = (input: string) => withPath(input, (file) => view().scrollTop(file)) - const scrollLeft = (input: string) => withPath(input, (file) => view().scrollLeft(file)) - const selectedLines = (input: string) => withPath(input, (file) => view().selectedLines(file)) - const setScrollTop = (input: string, top: number) => withPath(input, (file) => view().setScrollTop(file, top)) - const setScrollLeft = (input: string, left: number) => withPath(input, (file) => view().setScrollLeft(file, left)) - const setSelectedLines = (input: string, range: SelectedLineRange | null) => - withPath(input, (file) => view().setSelectedLines(file, range)) + return { + value: { path, tree, get, load, search }, + dispose, + } + }, owner), + { + maxEntries: MAX_FILE_DIRECTORIES, + dispose: (entry) => entry.dispose(), + }, + ) + onCleanup(() => cache.clear()) + onCleanup(() => viewCache.clear()) - onCleanup(() => { - stop() - viewCache.clear() + const selected = createMemo(() => { + const current = directory() + const state = cache.get(ScopedKey.from(current.server.scope, current.server.instance, current.directory), current).value + const view = viewCache.load({ serverScope: current.server.scope, directory: current.directory, state: current.state }) + return { state, view } }) return { - ready: () => view().ready(), - normalize: path.normalize, - tab: path.tab, - pathFromTab: path.pathFromTab, + ready: () => selected().view.ready(), + normalize: (input: string) => selected().state.path.normalize(input), + tab: (input: string) => selected().state.path.tab(input), + pathFromTab: (input: string) => selected().state.path.pathFromTab(input), tree: { - list: tree.listDir, - refresh: (input: string) => tree.listDir(input, { force: true }), - state: tree.dirState, - children: tree.children, - expand: tree.expandDir, - collapse: tree.collapseDir, + list: (input: string) => selected().state.tree.listDir(input), + refresh: (input: string) => selected().state.tree.listDir(input, { force: true }), + state: (input: string) => selected().state.tree.dirState(input), + children: (input: string) => selected().state.tree.children(input), + expand: (input: string) => selected().state.tree.expandDir(input), + collapse: (input: string) => selected().state.tree.collapseDir(input), toggle(input: string) { + const tree = selected().state.tree if (tree.dirState(input)?.expanded) { tree.collapseDir(input) return @@ -270,16 +244,34 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({ tree.expandDir(input) }, }, - get, - load, - scrollTop, - scrollLeft, - setScrollTop, - setScrollLeft, - selectedLines, - setSelectedLines, - searchFiles: (query: string) => search(query, "false"), - searchFilesAndDirectories: (query: string) => search(query, "true"), + get: (input: string) => selected().state.get(input), + load: (input: string, options?: { force?: boolean }) => selected().state.load(input, options), + scrollTop: (input: string) => { + const current = selected() + return current.view.scrollTop(current.state.path.normalize(input)) + }, + scrollLeft: (input: string) => { + const current = selected() + return current.view.scrollLeft(current.state.path.normalize(input)) + }, + setScrollTop: (input: string, top: number) => { + const current = selected() + return current.view.setScrollTop(current.state.path.normalize(input), top) + }, + setScrollLeft: (input: string, left: number) => { + const current = selected() + return current.view.setScrollLeft(current.state.path.normalize(input), left) + }, + selectedLines: (input: string) => { + const current = selected() + return current.view.selectedLines(current.state.path.normalize(input)) + }, + setSelectedLines: (input: string, range: SelectedLineRange | null) => { + const current = selected() + return current.view.setSelectedLines(current.state.path.normalize(input), range) + }, + searchFiles: (query: string) => selected().state.search(query, "false"), + searchFilesAndDirectories: (query: string) => selected().state.search(query, "true"), } }, }) diff --git a/packages/app/src/context/file/content-cache.ts b/packages/app/src/context/file/content-cache.ts index 4b724068834b..8a25fedb006e 100644 --- a/packages/app/src/context/file/content-cache.ts +++ b/packages/app/src/context/file/content-cache.ts @@ -3,9 +3,6 @@ import type { FileContent } from "@opencode-ai/sdk/v2" const MAX_FILE_CONTENT_ENTRIES = 40 const MAX_FILE_CONTENT_BYTES = 20 * 1024 * 1024 -const lru = new Map() -let total = 0 - export function approxBytes(content: FileContent) { const patchBytes = content.patch?.hunks.reduce((sum, hunk) => { @@ -15,74 +12,96 @@ export function approxBytes(content: FileContent) { return (content.content.length + (content.diff?.length ?? 0) + patchBytes) * 2 } -function setBytes(path: string, nextBytes: number) { - const prev = lru.get(path) - if (prev !== undefined) total -= prev - lru.delete(path) - lru.set(path, nextBytes) - total += nextBytes -} +export function createFileContentCache() { + const lru = new Map() + let total = 0 -function touch(path: string, bytes?: number) { - const prev = lru.get(path) - if (prev === undefined && bytes === undefined) return - setBytes(path, bytes ?? prev ?? 0) -} + const set = (path: string, nextBytes: number) => { + const prev = lru.get(path) + if (prev !== undefined) total -= prev + lru.delete(path) + lru.set(path, nextBytes) + total += nextBytes + } -function remove(path: string) { - const prev = lru.get(path) - if (prev === undefined) return - lru.delete(path) - total -= prev -} + const touch = (path: string, bytes?: number) => { + const prev = lru.get(path) + if (prev === undefined && bytes === undefined) return + set(path, bytes ?? prev ?? 0) + } -function reset() { - lru.clear() - total = 0 -} + const remove = (path: string) => { + const prev = lru.get(path) + if (prev === undefined) return + lru.delete(path) + total -= prev + } -export function evictContentLru(keep: Set | undefined, evict: (path: string) => void) { - const set = keep ?? new Set() + const reset = () => { + lru.clear() + total = 0 + } + + const evict = (keep: Set | undefined, drop: (path: string) => void) => { + const kept = keep ?? new Set() - while (lru.size > MAX_FILE_CONTENT_ENTRIES || total > MAX_FILE_CONTENT_BYTES) { - const path = lru.keys().next().value - if (!path) return + while (lru.size > MAX_FILE_CONTENT_ENTRIES || total > MAX_FILE_CONTENT_BYTES) { + const path = lru.keys().next().value + if (!path) return - if (set.has(path)) { - touch(path) - if (lru.size <= set.size) return - continue + if (kept.has(path)) { + touch(path) + if (lru.size <= kept.size) return + continue + } + + remove(path) + drop(path) } + } - remove(path) - evict(path) + return { + evict, + reset, + set, + remove, + touch, + total: () => total, + count: () => lru.size, + has: (path: string) => lru.has(path), } } +const cache = createFileContentCache() + +export function evictContentLru(keep: Set | undefined, evict: (path: string) => void) { + cache.evict(keep, evict) +} + export function resetFileContentLru() { - reset() + cache.reset() } export function setFileContentBytes(path: string, bytes: number) { - setBytes(path, bytes) + cache.set(path, bytes) } export function removeFileContentBytes(path: string) { - remove(path) + cache.remove(path) } export function touchFileContent(path: string, bytes?: number) { - touch(path, bytes) + cache.touch(path, bytes) } export function getFileContentBytesTotal() { - return total + return cache.total() } export function getFileContentEntryCount() { - return lru.size + return cache.count() } export function hasFileContent(path: string) { - return lru.has(path) + return cache.has(path) } diff --git a/packages/app/src/context/file/view-cache.ts b/packages/app/src/context/file/view-cache.ts index 87b859dea82b..1b84d49e59b0 100644 --- a/packages/app/src/context/file/view-cache.ts +++ b/packages/app/src/context/file/view-cache.ts @@ -1,11 +1,11 @@ -import { createEffect, createRoot } from "solid-js" +import { createRoot } from "solid-js" import { createStore, produce } from "solid-js/store" -import { Persist, persisted } from "@/utils/persist" +import { persisted } from "@/utils/persist" import { createScopedCache } from "@/utils/scoped-cache" import type { FileViewState, SelectedLineRange } from "./types" -import type { ServerScope } from "@/utils/server-scope" +import { ScopedKey } from "@/utils/server-scope" +import { DirectoryState, type DirectoryStateScope } from "../directory" -const WORKSPACE_KEY = "__workspace__" const MAX_FILE_VIEW_SESSIONS = 20 const MAX_VIEW_FILES = 500 @@ -34,11 +34,13 @@ function equalSelectedLines(a: SelectedLineRange | null | undefined, b: Selected ) } -function createViewSession(scope: ServerScope, dir: string, id: string | undefined) { +function createViewSession(scope: DirectoryStateScope) { + const id = DirectoryState.sessionID(scope.state) + const dir = scope.directory const legacyViewKey = `${dir}/file${id ? "/" + id : ""}.v1` const [view, setView, _, ready] = persisted( - Persist.serverScoped(scope, dir, id, "file-view", [legacyViewKey]), + DirectoryState.persist(scope, "file-view", [legacyViewKey]), createStore<{ file: Record }>({ @@ -46,8 +48,6 @@ function createViewSession(scope: ServerScope, dir: string, id: string | undefin }), ) - const meta = { pruned: false } - const pruneView = (keep?: string) => { const keys = Object.keys(view.file) if (keys.length <= MAX_VIEW_FILES) return @@ -64,10 +64,7 @@ function createViewSession(scope: ServerScope, dir: string, id: string | undefin ) } - createEffect(() => { - if (!ready()) return - if (meta.pruned) return - meta.pruned = true + void Promise.resolve(ready.promise).then(() => { pruneView() }) @@ -120,14 +117,11 @@ function createViewSession(scope: ServerScope, dir: string, id: string | undefin } } -export function createFileViewCache(scope: ServerScope) { +export function createFileViewCache() { const cache = createScopedCache( - (key) => { - const split = key.lastIndexOf("\n") - const dir = split >= 0 ? key.slice(0, split) : key - const id = split >= 0 ? key.slice(split + 1) : WORKSPACE_KEY + (_key: ScopedKey, input: DirectoryStateScope) => { return createRoot((dispose) => ({ - value: createViewSession(scope, dir, id === WORKSPACE_KEY ? undefined : id), + value: createViewSession(input), dispose, })) }, @@ -138,10 +132,7 @@ export function createFileViewCache(scope: ServerScope) { ) return { - load: (dir: string, id: string | undefined) => { - const key = `${dir}\n${id ?? WORKSPACE_KEY}` - return cache.get(key).value - }, + load: (scope: DirectoryStateScope) => cache.get(DirectoryState.key(scope), scope).value, clear: () => cache.clear(), } } diff --git a/packages/app/src/context/global.tsx b/packages/app/src/context/global.tsx index b096daa07983..2420dad1d793 100644 --- a/packages/app/src/context/global.tsx +++ b/packages/app/src/context/global.tsx @@ -1,13 +1,13 @@ import { createSimpleContext } from "@opencode-ai/ui/context" -import { createEffect, createMemo, createRoot } from "solid-js" +import { createMemo, createRoot, createSignal, getOwner, onCleanup } from "solid-js" import { createStore } from "solid-js/store" import { createServerProjects, ServerConnection, useServer } from "./server" import { useServerHealth } from "@/utils/server-health" import { createServerSdkContext } from "./server-sdk" import { createServerSyncContext } from "./server-sync" -import { getOwner } from "solid-js/web" -import { QueryClient } from "@tanstack/solid-query" import type { ServerScope } from "@/utils/server-scope" +import type { ServerContext } from "./server-context" +import { uuid } from "@/utils/uuid" export const { use: useGlobal, provider: GlobalProvider } = createSimpleContext({ name: "Global", @@ -28,51 +28,73 @@ export const { use: useGlobal, provider: GlobalProvider } = createSimpleContext( return list.find((conn) => ServerConnection.key(conn) === store.settings.serverKey) ?? list[0] }) - createEffect(() => { - const conn = settingsServer() - const key = conn ? ServerConnection.key(conn) : undefined - if (store.settings.serverKey !== key) setStore("settings", "serverKey", key) - }) - const serverCtxs = new Map< ServerConnection.Key, { dispose: () => void; serverCtx: ReturnType } >() const owner = getOwner() + const [revision, setRevision] = createSignal(0) const ensureServerCtx = (conn: ServerConnection.Any) => { + revision() const key = ServerConnection.key(conn) const existing = serverCtxs.get(key) if (existing) return existing.serverCtx const root = createRoot((dispose) => { const serverCtx = createServerCtx(conn, server.scope(key), server.projects.forServer(key)) return { dispose, serverCtx } - }, owner as any) + }, owner) serverCtxs.set(key, root) return root.serverCtx } - createMemo(() => { - for (const conn of server.list) { - ensureServerCtx(conn) - } - }) + const removeServerCtx = (key: ServerConnection.Key) => { + serverCtxs.get(key)?.dispose() + serverCtxs.delete(key) + setRevision((value) => value + 1) + } - createEffect(() => { - for (const [key] of serverCtxs) { - if (!server.list.find((conn) => ServerConnection.key(conn) === key)) { - const { dispose } = serverCtxs.get(key)! - dispose() - serverCtxs.delete(key) - } - } - }) + const replaceServerCtx = (conn: ServerConnection.Any) => { + const key = ServerConnection.key(conn) + serverCtxs.get(key)?.dispose() + serverCtxs.delete(key) + const context = ensureServerCtx(conn) + setRevision((value) => value + 1) + return context + } + + onCleanup(() => serverCtxs.forEach((entry) => entry.dispose())) return { servers: { list: () => server.list, health: serverHealth, + get(key: ServerConnection.Key) { + const conn = server.list.find((item) => ServerConnection.key(item) === key) + if (!conn) throw new Error(`Server not found: ${key}`) + return ensureServerCtx(conn) + }, + first() { + const conn = server.list[0] + if (!conn) throw new Error("No server available") + return ensureServerCtx(conn) + }, + remove(key: ServerConnection.Key) { + server.remove(key) + removeServerCtx(key) + }, + replace(original: ServerConnection.Key, conn: ServerConnection.Http) { + const next = server.add(conn) + if (!next) return + const key = ServerConnection.key(next) + replaceServerCtx(next) + if (original !== key) { + server.remove(original) + removeServerCtx(original) + } + return next + }, }, settings: { server: { @@ -96,15 +118,11 @@ function createServerCtx( conn: ServerConnection.Any, scope: ServerScope, projects: ReturnType, -) { - const queryClient = new QueryClient({ - defaultOptions: { - queries: { - refetchOnReconnect: false, - refetchOnMount: false, - refetchOnWindowFocus: false, - }, - }, +): ServerContext { + const dispose = new Set<() => void>() + onCleanup(() => { + for (const callback of dispose) callback() + dispose.clear() }) const sdk = createServerSdkContext(conn, scope) const sync = createServerSyncContext(sdk) @@ -128,11 +146,13 @@ function createServerCtx( const projectsList = createMemo(() => projects.list().map(enrich)) - const isLocal = - (conn?.type === "sidecar" && conn.variant === "base") || (conn?.type === "http" && isLocalHost(conn.http.url)) + const isLocal = (conn.type === "sidecar" && conn.variant === "base") || (conn.type === "http" && !!isLocalHost(conn.http.url)) return { - queryClient, + instance: uuid(), + key: ServerConnection.key(conn), + connection: conn, + scope, sdk, sync, isLocal, @@ -140,11 +160,13 @@ function createServerCtx( ...projects, list: projectsList, }, + onDispose(callback) { + dispose.add(callback) + return () => dispose.delete(callback) + }, } } -export type ServerCtx = ReturnType - function isLocalHost(url: string) { const host = url.replace(/^https?:\/\//, "").split(":")[0] if (host === "localhost" || host === "127.0.0.1") return "local" diff --git a/packages/app/src/context/layout.tsx b/packages/app/src/context/layout.tsx index 49d04df54665..a714984cd7f7 100644 --- a/packages/app/src/context/layout.tsx +++ b/packages/app/src/context/layout.tsx @@ -1,11 +1,9 @@ import { createStore, produce } from "solid-js/store" -import { batch, createEffect, createMemo, onCleanup, onMount, type Accessor } from "solid-js" -import { useLocation } from "@solidjs/router" +import { batch, createEffect, createMemo, createRoot, getOwner, onCleanup, onMount, type Accessor } from "solid-js" import { createSimpleContext } from "@opencode-ai/ui/context" import { makeEventListener } from "@solid-primitives/event-listener" -import { useServerSync } from "./server-sync" -import { useServerSDK } from "./server-sdk" -import { ServerConnection, useServer } from "./server" +import { useServerContext, useServerSDK, useServerSync } from "./server-context" +import { ServerConnection } from "./server" import { usePlatform } from "./platform" import { Project } from "@opencode-ai/sdk/v2" import { Persist, persisted, removePersisted } from "@/utils/persist" @@ -15,7 +13,9 @@ import { createScrollPersistence, type SessionScroll } from "./layout-scroll" import { createPathHelpers } from "./file/path" import type { ProjectAvatarVariant } from "@opencode-ai/ui/v2/project-avatar-v2" import { migrateLegacySessionStateKeys, ServerScope, SessionStateKey } from "@/utils/server-scope" +import { createScopedCache } from "@/utils/scoped-cache" import { createSessionKeyReader, ensureSessionKey, pruneSessionKeys } from "./layout-helpers" +import { DirectoryState, type DirectoryStateScope } from "./directory" export { createSessionKeyReader, ensureSessionKey, pruneSessionKeys } @@ -64,22 +64,10 @@ type SessionView = { todoCollapsed?: boolean } -type TabHandoff = { - scope: ServerScope - dir: string - id: string - at: number -} - export type LocalProject = Partial & { worktree: string; expanded: boolean } export type ReviewDiffStyle = "unified" | "split" -export type LayoutRoute = - | { type: "home" } - | { type: "dir-new-sesssion"; dir: string; dirBase64: string; server?: ServerConnection.Key } - | { type: "session"; dir: string; dirBase64: string; sessionId: string; server?: ServerConnection.Key } - function nextSessionTabsForOpen(current: SessionTabs | undefined, tab: string): SessionTabs { const all = current?.all ?? [] if (tab === "review") return { all: all.filter((x) => x !== "review"), active: tab } @@ -89,6 +77,7 @@ function nextSessionTabsForOpen(current: SessionTabs | undefined, tab: string): } const sessionPath = (key: string) => { + if (DirectoryState.draftID(key)) return const dir = SessionStateKey.route(key).split("/")[0] if (!dir) return const root = decode64(dir) @@ -120,35 +109,14 @@ const normalizeStoredSessionTabs = (key: string, tabs: SessionTabs) => { } } -const currentRoute = (pathname: string): LayoutRoute => { - const parts = pathname.split("/").filter(Boolean) - if (parts.length === 0) return { type: "home" } - - const dirBase64 = parts[0] - const dir = decode64(dirBase64) - if (!dir) return { type: "home" } - - if (parts[1] !== "session") return { type: "home" } - - const id = parts[2] - if (id) return { type: "session", dir, dirBase64, sessionId: id } - return { type: "dir-new-sesssion", dir, dirBase64 } -} - export const { use: useLayout, provider: LayoutProvider } = createSimpleContext({ name: "Layout", gate: false, init: () => { const serverSdk = useServerSDK() const serverSync = useServerSync() - const server = useServer() + const server = useServerContext() const platform = usePlatform() - const location = useLocation() - const route = createMemo(() => { - const value = currentRoute(location.pathname) - if (value.type === "home") return value - return { ...value, server: server.key } - }) const isRecord = (value: unknown): value is Record => typeof value === "object" && value !== null && !Array.isArray(value) @@ -239,161 +207,143 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( } } - const target = Persist.serverGlobal(serverSdk.scope, "layout", ["layout.v6"]) - const [store, setStore, _, ready] = persisted( - { ...target, migrate }, - createStore({ - sidebar: { - opened: false, - width: DEFAULT_SIDEBAR_WIDTH, - workspaces: {} as Record, - workspacesDefault: false, - }, - terminal: { - height: DEFAULT_TERMINAL_HEIGHT, - opened: false, - }, - review: { - diffStyle: "split" as ReviewDiffStyle, - panelOpened: true, - }, - fileTree: { - opened: false, - width: DEFAULT_FILE_TREE_WIDTH, - tab: "changes" as "changes" | "all", - }, - session: { - width: DEFAULT_SESSION_WIDTH, - }, - mobileSidebar: { - opened: false, - }, - sessionTabs: {} as Record, - sessionView: {} as Record, - handoff: { - tabs: undefined as TabHandoff | undefined, - }, - }), - ) - const MAX_SESSION_KEYS = 50 const PENDING_MESSAGE_TTL_MS = 2 * 60 * 1000 - const usage = { - active: undefined as string | undefined, - pruned: false, - used: new Map(), - } - const SESSION_STATE_KEYS = [ { key: "prompt", legacy: "prompt", version: "v2" }, { key: "terminal", legacy: "terminal", version: "v1" }, { key: "file-view", legacy: "file", version: "v1" }, ] as const - - const dropSessionState = (keys: string[]) => { - for (const key of keys) { - const scope = SessionStateKey.scope(key) - const parts = SessionStateKey.route(key).split("/") - const dir = parts[0] - const session = parts[1] - if (!dir) continue - - for (const entry of SESSION_STATE_KEYS) { - const target = session - ? Persist.serverSession(scope, dir, session, entry.key) - : Persist.serverWorkspace(scope, dir, entry.key) - void removePersisted(target, platform) - - if (scope !== ServerScope.local) continue - const legacyKey = `${dir}/${entry.legacy}${session ? "/" + session : ""}.${entry.version}` - void removePersisted({ key: legacyKey }, platform) - } - } - } - - function prune(keep?: string) { - const drop = pruneSessionKeys({ - keep, - max: MAX_SESSION_KEYS, - used: usage.used, - view: Object.keys(store.sessionView), - tabs: Object.keys(store.sessionTabs), - }) - if (drop.length === 0) return - - setStore( - produce((draft) => { - for (const key of drop) { - delete draft.sessionView[key] - delete draft.sessionTabs[key] - } + const createState = (scope: ServerScope, target = Persist.serverGlobal(scope, "layout", ["layout.v6"])) => { + const [store, setStore, _, ready] = persisted( + { ...target, migrate }, + createStore({ + sidebar: { + opened: false, + width: DEFAULT_SIDEBAR_WIDTH, + workspaces: {} as Record, + workspacesDefault: false, + }, + terminal: { height: DEFAULT_TERMINAL_HEIGHT, opened: false }, + review: { diffStyle: "split" as ReviewDiffStyle, panelOpened: true }, + fileTree: { opened: false, width: DEFAULT_FILE_TREE_WIDTH, tab: "changes" as "changes" | "all" }, + session: { width: DEFAULT_SESSION_WIDTH }, + mobileSidebar: { opened: false }, + sessionTabs: {} as Record, + sessionView: {} as Record, }), ) - - scroll.drop(drop) - dropSessionState(drop) - - for (const key of drop) { - usage.used.delete(key) + const usage = { active: undefined as string | undefined, pruned: false, used: new Map() } + + const dropSessionState = (keys: string[]) => { + for (const key of keys) { + const scope = SessionStateKey.scope(key) + const parts = SessionStateKey.route(key).split("/") + const dir = parts[0] + const session = parts[1] + if (!dir) continue + for (const entry of SESSION_STATE_KEYS) { + const target = session + ? Persist.serverSession(scope, dir, session, entry.key) + : Persist.serverWorkspace(scope, dir, entry.key) + void removePersisted(target, platform) + if (scope !== ServerScope.local) continue + void removePersisted({ key: `${dir}/${entry.legacy}${session ? "/" + session : ""}.${entry.version}` }, platform) + } + } } - } - function touch(sessionKey: string) { - usage.active = sessionKey - usage.used.set(sessionKey, Date.now()) - - if (!ready()) return - if (usage.pruned) return - - usage.pruned = true - prune(sessionKey) - } - - const scroll = createScrollPersistence({ - debounceMs: 250, - getSnapshot: (sessionKey) => store.sessionView[sessionKey]?.scroll, - onFlush: (sessionKey, next) => { - const current = store.sessionView[sessionKey] - const keep = usage.active ?? sessionKey - if (!current) { - setStore("sessionView", sessionKey, { scroll: next }) + const scroll = createScrollPersistence({ + debounceMs: 250, + getSnapshot: (sessionKey) => store.sessionView[sessionKey]?.scroll, + onFlush: (sessionKey, next) => { + const current = store.sessionView[sessionKey] + const keep = usage.active ?? sessionKey + if (!current) setStore("sessionView", sessionKey, { scroll: next }) + if (current) setStore("sessionView", sessionKey, "scroll", (prev) => ({ ...prev, ...next })) prune(keep) - return - } - - setStore("sessionView", sessionKey, "scroll", (prev) => ({ ...prev, ...next })) - prune(keep) - }, - }) - - const ensureKey = (key: string) => ensureSessionKey(key, touch, (sessionKey) => scroll.seed(sessionKey)) + }, + }) - createEffect(() => { - if (!ready()) return - if (usage.pruned) return - const active = usage.active - if (!active) return - usage.pruned = true - prune(active) - }) + function prune(keep?: string) { + const drop = pruneSessionKeys({ + keep, + max: MAX_SESSION_KEYS, + used: usage.used, + view: Object.keys(store.sessionView), + tabs: Object.keys(store.sessionTabs), + }) + if (drop.length === 0) return + setStore( + produce((draft) => { + for (const key of drop) { + delete draft.sessionView[key] + delete draft.sessionTabs[key] + } + }), + ) + scroll.drop(drop) + dropSessionState(drop) + for (const key of drop) usage.used.delete(key) + } - onMount(() => { - const flush = () => batch(() => scroll.flushAll()) - const handleVisibility = () => { - if (document.visibilityState !== "hidden") return - flush() + function touch(sessionKey: string) { + usage.active = sessionKey + usage.used.set(sessionKey, Date.now()) + if (!ready() || usage.pruned) return + usage.pruned = true + prune(sessionKey) } - makeEventListener(window, "pagehide", flush) - makeEventListener(document, "visibilitychange", handleVisibility) + void Promise.resolve(ready.promise).then(() => { + if (usage.pruned || !usage.active) return + usage.pruned = true + prune(usage.active) + }) - onCleanup(() => { - scroll.dispose() + onMount(() => { + const flush = () => batch(() => scroll.flushAll()) + makeEventListener(window, "pagehide", flush) + makeEventListener(document, "visibilitychange", () => { + if (document.visibilityState === "hidden") flush() + }) + onCleanup(() => scroll.dispose()) }) - }) - const [colors, setColors] = createStore>({}) - const colorRequested = new Map() + const [colors, setColors] = createStore>({}) + return { + store, + setStore, + ready, + usage, + scroll, + prune, + touch, + ensureKey: (key: string) => ensureSessionKey(key, touch, (sessionKey) => scroll.seed(sessionKey)), + colors, + setColors, + colorRequested: new Map(), + } + } + + const owner = getOwner() + const cache = createScopedCache( + (scope: ServerScope) => createRoot((dispose) => ({ value: createState(scope), dispose }), owner), + { dispose: (entry) => entry.dispose() }, + ) + const draftCache = createScopedCache( + (draftID: string) => + createRoot((dispose) => ({ value: createState(ServerScope.local, Persist.draft(draftID, "layout")), dispose }), owner), + { dispose: (entry) => entry.dispose() }, + ) + onCleanup(() => cache.clear()) + onCleanup(() => draftCache.clear()) + const state = createMemo(() => cache.get(server().scope).value) + const stateForKey = (key: string) => { + const draftID = DirectoryState.draftID(key) + if (draftID) return draftCache.get(draftID).value + return cache.get(SessionStateKey.scope(key)).value + } function pickAvailableColor(used: Set): AvatarColorKey { const available = AVATAR_COLOR_KEYS.filter((c) => !used.has(c)) @@ -402,11 +352,12 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( } function enrich(project: { worktree: string; expanded: boolean }) { - const [childStore] = serverSync.child(project.worktree, { bootstrap: false }) + const sync = serverSync() + const [childStore] = sync.child(project.worktree, { bootstrap: false }) const projectID = childStore.project const metadata = projectID - ? serverSync.data.project.find((x) => x.id === projectID) - : serverSync.data.project.find((x) => x.worktree === project.worktree) + ? sync.data.project.find((x) => x.id === projectID) + : sync.data.project.find((x) => x.worktree === project.worktree) // Preserve local icon override from per-workspace localStorage cache (childStore.icon). // Without this, different subdirectories of the same git repo would share the same @@ -420,7 +371,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( const roots = createMemo(() => { const map = new Map() - for (const project of serverSync.data.project) { + for (const project of serverSync().data.project) { const sandboxes = project.sandboxes ?? [] for (const sandbox of sandboxes) { map.set(sandbox, project.worktree) @@ -452,7 +403,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( } createEffect(() => { - const projects = server.projects.list() + const projects = server().projects.list() const seen = new Set(projects.map((project) => project.worktree)) batch(() => { @@ -460,23 +411,23 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( const root = rootFor(project.worktree) if (root === project.worktree) continue - server.projects.close(project.worktree) + server().projects.close(project.worktree) if (!seen.has(root)) { - server.projects.open(root) + server().projects.open(root) seen.add(root) } - if (project.expanded) server.projects.expand(root) + if (project.expanded) server().projects.expand(root) } }) }) - const enriched = createMemo(() => server.projects.list().map(enrich)) + const enriched = createMemo(() => server().projects.list().map(enrich)) const list = createMemo(() => { const projects = enriched() return projects.map((project) => { - const color = project.icon?.color ?? colors[project.worktree] + const color = project.icon?.color ?? state().colors[project.worktree] if (!color) return project const icon = project.icon ? { ...project.icon, color } : { color } return { ...project, icon } @@ -486,53 +437,57 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( createEffect(() => { const projects = enriched() if (projects.length === 0) return - if (!serverSync.ready) return + const sync = serverSync() + if (!sync.ready) return for (const project of projects) { if (!project.id) continue if (project.id === "global") continue - serverSync.project.icon(project.worktree, project.icon?.override) + sync.project.icon(project.worktree, project.icon?.override) } }) createEffect(() => { const projects = enriched() if (projects.length === 0) return + const sync = serverSync() + const sdk = serverSdk() + const layout = state() for (const project of projects) { - if (project.icon?.color) colorRequested.delete(project.worktree) + if (project.icon?.color) layout.colorRequested.delete(project.worktree) } const used = new Set() for (const project of projects) { - const color = project.icon?.color ?? colors[project.worktree] + const color = project.icon?.color ?? layout.colors[project.worktree] if (color) used.add(color) } for (const project of projects) { if (project.icon?.color || project.icon?.override || project.icon?.url) continue const worktree = project.worktree - const existing = colors[worktree] + const existing = layout.colors[worktree] const color = existing ?? pickAvailableColor(used) if (!existing) { used.add(color) - setColors(worktree, color) + layout.setColors(worktree, color) } if (!project.id) continue - const requested = colorRequested.get(worktree) + const requested = layout.colorRequested.get(worktree) if (requested === color) continue - colorRequested.set(worktree, color) + layout.colorRequested.set(worktree, color) if (project.id === "global") { - serverSync.project.meta(worktree, { icon: { color } }) + sync.project.meta(worktree, { icon: { color } }) continue } - void serverSdk.client.project + void sdk.client.project .update({ projectID: project.id, directory: worktree, icon: { color } }) .catch(() => { - if (colorRequested.get(worktree) === color) colorRequested.delete(worktree) + if (layout.colorRequested.get(worktree) === color) layout.colorRequested.delete(worktree) }) } }) @@ -545,9 +500,10 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( sessionFrame = undefined sessionTimer = window.setTimeout(() => { sessionTimer = undefined + const current = server() void Promise.all( - server.projects.list().map((project) => { - return serverSync.project.loadSessions(project.worktree) + current.projects.list().map((project) => { + return current.sync.project.loadSessions(project.worktree) }), ) }, 0) @@ -560,159 +516,174 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( }) return { - route, - ready, - handoff: { - tabs: createMemo(() => store.handoff?.tabs), - setTabs(dir: string, id: string) { - setStore("handoff", "tabs", { scope: server.scope(), dir, id, at: Date.now() }) - }, - clearTabs() { - if (!store.handoff?.tabs) return - setStore("handoff", "tabs", undefined) - }, + ready: () => state().ready(), + readyPromise: () => state().ready.promise, + promoteTabs(from: DirectoryStateScope, to: DirectoryStateScope) { + const fromKey = DirectoryState.layoutKey(from) + const toKey = DirectoryState.layoutKey(to) + const source = stateForKey(fromKey) + const destination = stateForKey(toKey) + const tabs = source.store.sessionTabs[fromKey] + if (tabs) destination.setStore("sessionTabs", toKey, tabs) + source.setStore( + "sessionTabs", + produce((draft) => { + delete draft[fromKey] + }), + ) + if (from.state.type !== "draft") return + draftCache.delete(from.state.id) }, projects: { list, open(directory: string) { const root = rootFor(directory) - if (server.projects.list().find((x) => x.worktree === root)) return - void serverSync.project.loadSessions(root) - server.projects.open(root) + if (server().projects.list().find((x) => x.worktree === root)) return + void serverSync().project.loadSessions(root) + server().projects.open(root) }, close(directory: string) { - server.projects.close(directory) + server().projects.close(directory) }, expand(directory: string) { - server.projects.expand(directory) + server().projects.expand(directory) }, collapse(directory: string) { - server.projects.collapse(directory) + server().projects.collapse(directory) }, move(directory: string, toIndex: number) { - server.projects.move(directory, toIndex) + server().projects.move(directory, toIndex) }, }, sidebar: { - opened: createMemo(() => store.sidebar.opened), + opened: createMemo(() => state().store.sidebar.opened), open() { - setStore("sidebar", "opened", true) + state().setStore("sidebar", "opened", true) }, close() { - setStore("sidebar", "opened", false) + state().setStore("sidebar", "opened", false) }, toggle() { - setStore("sidebar", "opened", (x) => !x) + state().setStore("sidebar", "opened", (x) => !x) }, - width: createMemo(() => store.sidebar.width), + width: createMemo(() => state().store.sidebar.width), resize(width: number) { - setStore("sidebar", "width", width) + state().setStore("sidebar", "width", width) }, workspaces(directory: string) { - return () => store.sidebar.workspaces[directory] ?? store.sidebar.workspacesDefault ?? false + return () => state().store.sidebar.workspaces[directory] ?? state().store.sidebar.workspacesDefault ?? false }, setWorkspaces(directory: string, value: boolean) { - setStore("sidebar", "workspaces", directory, value) + state().setStore("sidebar", "workspaces", directory, value) }, toggleWorkspaces(directory: string) { - const current = store.sidebar.workspaces[directory] ?? store.sidebar.workspacesDefault ?? false - setStore("sidebar", "workspaces", directory, !current) + const layout = state() + const current = layout.store.sidebar.workspaces[directory] ?? layout.store.sidebar.workspacesDefault ?? false + layout.setStore("sidebar", "workspaces", directory, !current) }, }, terminal: { - height: createMemo(() => store.terminal.height), + height: createMemo(() => state().store.terminal.height), resize(height: number) { - setStore("terminal", "height", height) + state().setStore("terminal", "height", height) }, }, review: { - diffStyle: createMemo(() => store.review?.diffStyle ?? "split"), + diffStyle: createMemo(() => state().store.review?.diffStyle ?? "split"), setDiffStyle(diffStyle: ReviewDiffStyle) { - if (!store.review) { - setStore("review", { diffStyle, panelOpened: true }) + const layout = state() + if (!layout.store.review) { + layout.setStore("review", { diffStyle, panelOpened: true }) return } - setStore("review", "diffStyle", diffStyle) + layout.setStore("review", "diffStyle", diffStyle) }, }, fileTree: { - opened: createMemo(() => store.fileTree?.opened ?? true), - width: createMemo(() => store.fileTree?.width ?? DEFAULT_FILE_TREE_WIDTH), - tab: createMemo(() => store.fileTree?.tab ?? "changes"), + opened: createMemo(() => state().store.fileTree?.opened ?? true), + width: createMemo(() => state().store.fileTree?.width ?? DEFAULT_FILE_TREE_WIDTH), + tab: createMemo(() => state().store.fileTree?.tab ?? "changes"), setTab(tab: "changes" | "all") { - if (!store.fileTree) { - setStore("fileTree", { opened: true, width: DEFAULT_FILE_TREE_WIDTH, tab }) + const layout = state() + if (!layout.store.fileTree) { + layout.setStore("fileTree", { opened: true, width: DEFAULT_FILE_TREE_WIDTH, tab }) return } - setStore("fileTree", "tab", tab) + layout.setStore("fileTree", "tab", tab) }, open() { - if (!store.fileTree) { - setStore("fileTree", { opened: true, width: DEFAULT_FILE_TREE_WIDTH, tab: "changes" }) + const layout = state() + if (!layout.store.fileTree) { + layout.setStore("fileTree", { opened: true, width: DEFAULT_FILE_TREE_WIDTH, tab: "changes" }) return } - setStore("fileTree", "opened", true) + layout.setStore("fileTree", "opened", true) }, close() { - if (!store.fileTree) { - setStore("fileTree", { opened: false, width: DEFAULT_FILE_TREE_WIDTH, tab: "changes" }) + const layout = state() + if (!layout.store.fileTree) { + layout.setStore("fileTree", { opened: false, width: DEFAULT_FILE_TREE_WIDTH, tab: "changes" }) return } - setStore("fileTree", "opened", false) + layout.setStore("fileTree", "opened", false) }, toggle() { - if (!store.fileTree) { - setStore("fileTree", { opened: true, width: DEFAULT_FILE_TREE_WIDTH, tab: "changes" }) + const layout = state() + if (!layout.store.fileTree) { + layout.setStore("fileTree", { opened: true, width: DEFAULT_FILE_TREE_WIDTH, tab: "changes" }) return } - setStore("fileTree", "opened", (x) => !x) + layout.setStore("fileTree", "opened", (x) => !x) }, resize(width: number) { - if (!store.fileTree) { - setStore("fileTree", { opened: true, width, tab: "changes" }) + const layout = state() + if (!layout.store.fileTree) { + layout.setStore("fileTree", { opened: true, width, tab: "changes" }) return } - setStore("fileTree", "width", width) + layout.setStore("fileTree", "width", width) }, }, session: { - width: createMemo(() => store.session?.width ?? DEFAULT_SESSION_WIDTH), + width: createMemo(() => state().store.session?.width ?? DEFAULT_SESSION_WIDTH), resize(width: number) { - if (!store.session) { - setStore("session", { width }) + const layout = state() + if (!layout.store.session) { + layout.setStore("session", { width }) return } - setStore("session", "width", width) + layout.setStore("session", "width", width) }, }, mobileSidebar: { - opened: createMemo(() => store.mobileSidebar?.opened ?? false), + opened: createMemo(() => state().store.mobileSidebar?.opened ?? false), show() { - setStore("mobileSidebar", "opened", true) + state().setStore("mobileSidebar", "opened", true) }, hide() { - setStore("mobileSidebar", "opened", false) + state().setStore("mobileSidebar", "opened", false) }, toggle() { - setStore("mobileSidebar", "opened", (x) => !x) + state().setStore("mobileSidebar", "opened", (x) => !x) }, }, pendingMessage: { set(sessionKey: string, messageID: string) { + const layout = stateForKey(sessionKey) const at = Date.now() - touch(sessionKey) - const current = store.sessionView[sessionKey] + layout.touch(sessionKey) + const current = layout.store.sessionView[sessionKey] if (!current) { - setStore("sessionView", sessionKey, { + layout.setStore("sessionView", sessionKey, { scroll: {}, pendingMessage: messageID, pendingMessageAt: at, }) - prune(usage.active ?? sessionKey) + layout.prune(layout.usage.active ?? sessionKey) return } - setStore( + layout.setStore( "sessionView", sessionKey, produce((draft) => { @@ -722,12 +693,13 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( ) }, consume(sessionKey: string) { - const current = store.sessionView[sessionKey] + const layout = stateForKey(sessionKey) + const current = layout.store.sessionView[sessionKey] const message = current?.pendingMessage const at = current?.pendingMessageAt if (!message || !at) return - setStore( + layout.setStore( "sessionView", sessionKey, produce((draft) => { @@ -741,51 +713,54 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( }, }, view(sessionKey: string | Accessor) { - const key = createSessionKeyReader(sessionKey, ensureKey) - const s = createMemo(() => store.sessionView[key()] ?? { scroll: {} }) - const terminalOpened = createMemo(() => store.terminal?.opened ?? false) - const reviewPanelOpened = createMemo(() => store.review?.panelOpened ?? true) + const key = createSessionKeyReader(sessionKey, (value) => stateForKey(value).ensureKey(value)) + const s = createMemo(() => stateForKey(key()).store.sessionView[key()] ?? { scroll: {} }) + const terminalOpened = createMemo(() => stateForKey(key()).store.terminal?.opened ?? false) + const reviewPanelOpened = createMemo(() => stateForKey(key()).store.review?.panelOpened ?? true) function setTerminalOpened(next: boolean) { - const current = store.terminal + const layout = stateForKey(key()) + const current = layout.store.terminal if (!current) { - setStore("terminal", { height: DEFAULT_TERMINAL_HEIGHT, opened: next }) + layout.setStore("terminal", { height: DEFAULT_TERMINAL_HEIGHT, opened: next }) return } const value = current.opened ?? false if (value === next) return - setStore("terminal", "opened", next) + layout.setStore("terminal", "opened", next) } function setReviewPanelOpened(next: boolean) { - const current = store.review + const layout = stateForKey(key()) + const current = layout.store.review if (!current) { - setStore("review", { diffStyle: "split" as ReviewDiffStyle, panelOpened: next }) + layout.setStore("review", { diffStyle: "split" as ReviewDiffStyle, panelOpened: next }) return } const value = current.panelOpened ?? true if (value === next) return - setStore("review", "panelOpened", next) + layout.setStore("review", "panelOpened", next) } return { scroll(tab: string) { - return scroll.scroll(key(), tab) + return stateForKey(key()).scroll.scroll(key(), tab) }, setScroll(tab: string, pos: SessionScroll) { - scroll.setScroll(key(), tab, pos) + stateForKey(key()).scroll.setScroll(key(), tab, pos) }, todoCollapsed: { get: () => s().todoCollapsed ?? false, set(collapsed: boolean) { const session = key() - const current = store.sessionView[session] + const layout = stateForKey(session) + const current = layout.store.sessionView[session] if (!current) { - setStore("sessionView", session, { scroll: {}, todoCollapsed: collapsed }) + layout.setStore("sessionView", session, { scroll: {}, todoCollapsed: collapsed }) } else { - setStore("sessionView", session, "todoCollapsed", collapsed) + layout.setStore("sessionView", session, "todoCollapsed", collapsed) } }, }, @@ -818,9 +793,10 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( setOpen(open: string[]) { const session = key() const next = Array.from(new Set(open)) - const current = store.sessionView[session] + const layout = stateForKey(session) + const current = layout.store.sessionView[session] if (!current) { - setStore("sessionView", session, { + layout.setStore("sessionView", session, { scroll: {}, reviewOpen: next, }) @@ -828,13 +804,14 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( } if (same(current.reviewOpen, next)) return - setStore("sessionView", session, "reviewOpen", next) + layout.setStore("sessionView", session, "reviewOpen", next) }, openPath(path: string) { const session = key() - const current = store.sessionView[session] + const layout = stateForKey(session) + const current = layout.store.sessionView[session] if (!current) { - setStore("sessionView", session, { + layout.setStore("sessionView", session, { scroll: {}, reviewOpen: [path], }) @@ -842,21 +819,22 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( } if (!current.reviewOpen) { - setStore("sessionView", session, "reviewOpen", [path]) + layout.setStore("sessionView", session, "reviewOpen", [path]) return } if (current.reviewOpen.includes(path)) return - setStore("sessionView", session, "reviewOpen", current.reviewOpen.length, path) + layout.setStore("sessionView", session, "reviewOpen", current.reviewOpen.length, path) }, closePath(path: string) { const session = key() - const current = store.sessionView[session]?.reviewOpen + const layout = stateForKey(session) + const current = layout.store.sessionView[session]?.reviewOpen if (!current) return const index = current.indexOf(path) if (index === -1) return - setStore( + layout.setStore( "sessionView", session, "reviewOpen", @@ -868,7 +846,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( }, togglePath(path: string) { const session = key() - const current = store.sessionView[session]?.reviewOpen + const current = stateForKey(session).store.sessionView[session]?.reviewOpen if (!current || !current.includes(path)) { this.openPath(path) return @@ -880,9 +858,9 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( } }, tabs(sessionKey: string | Accessor) { - const key = createSessionKeyReader(sessionKey, ensureKey) + const key = createSessionKeyReader(sessionKey, (value) => stateForKey(value).ensureKey(value)) const path = createMemo(() => sessionPath(key())) - const tabs = createMemo(() => store.sessionTabs[key()] ?? { all: [] }) + const tabs = createMemo(() => stateForKey(key()).store.sessionTabs[key()] ?? { all: [] }) const normalize = (tab: string) => normalizeSessionTab(path(), tab) const normalizeAll = (all: string[]) => normalizeSessionTabList(path(), all) return { @@ -892,57 +870,62 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext( setActive(tab: string | undefined) { const session = key() const next = tab ? normalize(tab) : tab - if (!store.sessionTabs[session]) { - setStore("sessionTabs", session, { all: [], active: next }) + const layout = stateForKey(session) + if (!layout.store.sessionTabs[session]) { + layout.setStore("sessionTabs", session, { all: [], active: next }) } else { - setStore("sessionTabs", session, "active", next) + layout.setStore("sessionTabs", session, "active", next) } }, setAll(all: string[]) { const session = key() const next = normalizeAll(all).filter((tab) => tab !== "review") - if (!store.sessionTabs[session]) { - setStore("sessionTabs", session, { all: next, active: undefined }) + const layout = stateForKey(session) + if (!layout.store.sessionTabs[session]) { + layout.setStore("sessionTabs", session, { all: next, active: undefined }) } else { - setStore("sessionTabs", session, "all", next) + layout.setStore("sessionTabs", session, "all", next) } }, async open(tab: string) { const session = key() - const next = nextSessionTabsForOpen(store.sessionTabs[session], normalize(tab)) - setStore("sessionTabs", session, next) + const layout = stateForKey(session) + const next = nextSessionTabsForOpen(layout.store.sessionTabs[session], normalize(tab)) + layout.setStore("sessionTabs", session, next) }, close(tab: string) { const session = key() - const current = store.sessionTabs[session] + const layout = stateForKey(session) + const current = layout.store.sessionTabs[session] if (!current) return if (tab === "review") { if (current.active !== tab) return - setStore("sessionTabs", session, "active", current.all[0]) + layout.setStore("sessionTabs", session, "active", current.all[0]) return } const all = current.all.filter((x) => x !== tab) if (current.active !== tab) { - setStore("sessionTabs", session, "all", all) + layout.setStore("sessionTabs", session, "all", all) return } const index = current.all.findIndex((f) => f === tab) const next = current.all[index - 1] ?? current.all[index + 1] ?? all[0] batch(() => { - setStore("sessionTabs", session, "all", all) - setStore("sessionTabs", session, "active", next) + layout.setStore("sessionTabs", session, "all", all) + layout.setStore("sessionTabs", session, "active", next) }) }, move(tab: string, to: number) { const session = key() - const current = store.sessionTabs[session] + const layout = stateForKey(session) + const current = layout.store.sessionTabs[session] if (!current) return const index = current.all.findIndex((f) => f === tab) if (index === -1) return - setStore( + layout.setStore( "sessionTabs", session, "all", diff --git a/packages/app/src/context/local.tsx b/packages/app/src/context/local.tsx index 8bc58a7c2670..f5291c114b89 100644 --- a/packages/app/src/context/local.tsx +++ b/packages/app/src/context/local.tsx @@ -1,16 +1,14 @@ import { createSimpleContext } from "@opencode-ai/ui/context" import { base64Encode } from "@opencode-ai/core/util/encode" -import { useParams } from "@solidjs/router" -import { batch, createEffect, createMemo } from "solid-js" +import { batch, createMemo, createRoot, getOwner, onCleanup } from "solid-js" import { createStore } from "solid-js/store" import { useModels } from "@/context/models" import { useProviders } from "@/hooks/use-providers" import { Persist, persisted } from "@/utils/persist" import { cycleModelVariant, getConfiguredAgentVariant, resolveModelVariant } from "./model-variant" -import { useSDK } from "./sdk" -import { useSync } from "./sync" -import { useServerSDK } from "./server-sdk" +import { DirectoryState, type DirectoryStateScope, useDirectory, useSync } from "@/context/directory" import { ScopedKey, type ServerScope } from "@/utils/server-scope" +import { createScopedCache } from "@/utils/scoped-cache" export type ModelKey = { providerID: string; modelID: string; variant?: string } @@ -24,11 +22,6 @@ type Saved = { session: Record } -const WORKSPACE_KEY = "__workspace__" -const handoff = new Map() - -const handoffKey = (scope: ServerScope, dir: string, id: string) => ScopedKey.from(scope, dir, id) - const migrate = (value: unknown) => { if (!value || typeof value !== "object") return { session: {} } @@ -41,7 +34,7 @@ const migrate = (value: unknown) => { if (!item.pick || typeof item.pick !== "object") return { session: {} } return { - session: Object.fromEntries(Object.entries(item.pick).filter(([key]) => key !== WORKSPACE_KEY)), + session: item.pick, } } @@ -53,43 +46,80 @@ const clone = (value: State | undefined) => { } satisfies State } +type Scope = DirectoryStateScope + +function createLocalWorkspace(scope: ServerScope, directory: string) { + const [saved, setSaved] = persisted( + { + ...Persist.serverWorkspace(scope, directory, "model-selection", ["model-selection.v1"]), + migrate, + }, + createStore({ + session: {}, + }), + ) + + return { saved, setSaved } +} + +function createLocalState(scope: Scope, workspace: ReturnType) { + if (scope.state.type === "session") { + const id = scope.state.id + return { + scope, + current: () => workspace.saved.session[id], + write: (next: State) => workspace.setSaved("session", id, next), + clear: () => workspace.setSaved("session", id, undefined), + restore(next: State) { + if (workspace.saved.session[id] !== undefined) return + workspace.setSaved("session", id, next) + }, + } + } + + const [store, setStore] = + scope.state.type === "draft" + ? persisted(DirectoryState.persist(scope, "model-selection"), createStore<{ value?: State }>({ value: undefined })) + : createStore<{ value?: State }>({ value: undefined }) + + return { + scope, + current: () => store.value, + write: (next: State) => setStore({ value: next }), + clear: () => setStore({ value: undefined }), + restore() {}, + } +} + export const { use: useLocal, provider: LocalProvider } = createSimpleContext({ name: "Local", init: () => { - const params = useParams() - const sdk = useSDK() + const directory = useDirectory() const sync = useSync() - const serverSDK = useServerSDK() - const providers = useProviders() + const providers = useProviders(() => directory().directory) const models = useModels() - - const id = createMemo(() => params.id || undefined) - const list = createMemo(() => sync.data.agent.filter((item) => item.mode !== "subagent" && !item.hidden)) + const list = createMemo(() => sync().data.agent.filter((item) => item.mode !== "subagent" && !item.hidden)) const connected = createMemo(() => new Set(providers.connected().map((item) => item.id))) - - const [saved, setSaved] = persisted( - { - ...Persist.serverWorkspace(serverSDK.scope, sdk.directory, "model-selection", ["model-selection.v1"]), - migrate, - }, - createStore({ - session: {}, - }), + const owner = getOwner() + const workspaceCache = createScopedCache( + (_key: ScopedKey, scope: Scope) => + createRoot((dispose) => ({ value: createLocalWorkspace(scope.serverScope, scope.directory), dispose }), owner), + { dispose: (entry) => entry.dispose() }, ) + const stateCache = createScopedCache((_key: ScopedKey, scope: Scope) => { + const workspace = workspaceCache.get( + ScopedKey.from(scope.serverScope, scope.directory), + scope, + ).value + return createLocalState(scope, workspace) + }) + onCleanup(() => stateCache.clear()) + onCleanup(() => workspaceCache.clear()) - const [store, setStore] = createStore<{ - current?: string - draft?: State - last?: { - type: "agent" | "model" | "variant" - agent?: string - model?: ModelKey | null - variant?: string | null - } - }>({ - current: list()[0]?.name, - draft: undefined, - last: undefined, + const select = (scope: Scope) => stateCache.get(DirectoryState.key(scope), scope) + const state = createMemo(() => { + const current = directory() + return select({ serverScope: current.server.scope, directory: current.directory, state: current.state }) }) const validModel = (model: ModelKey) => { @@ -111,41 +141,12 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({ return items.find((item) => item.name === name) ?? items[0] } - createEffect(() => { - const items = list() - if (items.length === 0) { - if (store.current !== undefined) setStore("current", undefined) - return - } - if (items.some((item) => item.name === store.current)) return - setStore("current", items[0]?.name) - }) - - const scope = createMemo(() => { - const session = id() - if (!session) return store.draft - return saved.session[session] ?? handoff.get(handoffKey(serverSDK.scope, sdk.directory, session)) - }) - - createEffect(() => { - const session = id() - if (!session) return - - const key = handoffKey(serverSDK.scope, sdk.directory, session) - const next = handoff.get(key) - if (!next) return - if (saved.session[session] !== undefined) { - handoff.delete(key) - return - } - - setSaved("session", session, clone(next)) - handoff.delete(key) - }) + const scope = () => state().current() const configuredModel = () => { - if (!sync.data.config.model) return - const [providerID, modelID] = sync.data.config.model.split("/") + const modelConfig = sync().data.config.model + if (!modelConfig) return + const [providerID, modelID] = modelConfig.split("/") const model = { providerID, modelID } if (validModel(model)) return model } @@ -177,43 +178,24 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({ const agent = { list, current() { - return pickAgent(scope()?.agent ?? store.current) + return pickAgent(scope()?.agent) }, set(name: string | undefined) { const item = pickAgent(name) - if (!item) { - setStore("current", undefined) - return - } + if (!item) return batch(() => { - setStore("current", item.name) - setStore("last", { - type: "agent", - agent: item.name, - model: item.model, - variant: item.variant ?? null, - }) const prev = scope() - const next = { + state().write({ agent: item.name, model: item.model ?? prev?.model, variant: item.variant ?? prev?.variant, - } satisfies State - const session = id() - if (session) { - setSaved("session", session, next) - return - } - setStore("draft", next) + }) }) }, move(direction: 1 | -1) { const items = list() - if (items.length === 0) { - setStore("current", undefined) - return - } + if (items.length === 0) return let next = items.findIndex((item) => item.name === agent.current()?.name) + direction if (next < 0) next = items.length - 1 @@ -256,17 +238,11 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({ } const write = (next: Partial) => { - const state = { + const nextState = { ...(scope() ?? { agent: agent.current()?.name }), ...next, } satisfies State - - const session = id() - if (session) { - setSaved("session", session, state) - return - } - setStore("draft", state) + state().write(nextState) } const recent = createMemo(() => models.recent.list().map(models.find).filter(Boolean)) @@ -294,12 +270,6 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({ }, set(item: ModelKey | undefined, options?: { recent?: boolean }) { batch(() => { - setStore("last", { - type: "model", - agent: agent.current()?.name, - model: item ?? null, - variant: selected(), - }) write({ model: item }) if (!item) return models.setVisibility(item, true) @@ -336,12 +306,6 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({ set(value: string | undefined) { batch(() => { const model = current() - setStore("last", { - type: "variant", - agent: agent.current()?.name, - model: model ? { providerID: model.provider.id, modelID: model.id } : null, - variant: value ?? null, - }) write({ variant: value ?? null }) if (model) { models.variant.set({ providerID: model.provider.id, modelID: model.id }, value ?? undefined) @@ -363,34 +327,33 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({ } const result = { - slug: createMemo(() => base64Encode(sdk.directory)), + slug: createMemo(() => base64Encode(directory().directory)), model, agent, session: { + bind() { + const source = state() + const serverScope = directory().server.scope + const selected = clone(snapshot()) + return { + promote(dir: string, session: string) { + const destination = select({ serverScope, directory: dir, state: { type: "session", id: session } }) + if (selected) destination.write(selected) + if (source !== destination) source.clear() + }, + } + }, reset() { - setStore("draft", undefined) + const current = state().scope + select({ ...current, state: { type: "workspace" } }).clear() }, promote(dir: string, session: string) { - const next = clone(snapshot()) - if (!next) return - - if (dir === sdk.directory) { - setSaved("session", session, next) - setStore("draft", undefined) - return - } - - handoff.set(handoffKey(serverSDK.scope, dir, session), next) - setStore("draft", undefined) + this.bind().promote(dir, session) }, restore(msg: { sessionID: string; agent: string; model: ModelKey }) { - const session = id() - if (!session) return - if (msg.sessionID !== session) return - if (saved.session[session] !== undefined) return - if (handoff.has(handoffKey(serverSDK.scope, sdk.directory, session))) return - - setSaved("session", session, { + const current = state() + if (msg.sessionID !== DirectoryState.sessionID(current.scope.state)) return + current.restore({ agent: msg.agent, model: msg.model, variant: msg.model?.variant ?? null, diff --git a/packages/app/src/context/models.tsx b/packages/app/src/context/models.tsx index 21816ab12dc3..6d7d710fa6de 100644 --- a/packages/app/src/context/models.tsx +++ b/packages/app/src/context/models.tsx @@ -25,8 +25,8 @@ function modelKey(model: ModelKey) { export const { use: useModels, provider: ModelsProvider } = createSimpleContext({ name: "Models", gate: false, - init: () => { - const providers = useProviders() + init: (props: { directory: () => string | undefined }) => { + const providers = useProviders(props.directory) const [store, setStore, _, ready] = persisted( Persist.global("model", ["model.v1"]), diff --git a/packages/app/src/context/navigation.tsx b/packages/app/src/context/navigation.tsx new file mode 100644 index 000000000000..add4e9310c92 --- /dev/null +++ b/packages/app/src/context/navigation.tsx @@ -0,0 +1,21 @@ +import { createContext, type Accessor, type ParentProps, useContext } from "solid-js" + +export type Navigation = { + session: (sessionID: string) => string + openSession: (sessionID: string) => void + newSession: () => void + selectDirectory: (directory: string) => void + created: (session: { id: string; directory: string }) => void +} + +const Context = createContext>() + +export function NavigationProvider(props: ParentProps<{ value: Accessor }>) { + return {props.children} +} + +export function useNavigation() { + const navigation = useContext(Context) + if (!navigation) throw new Error("Navigation must be used within NavigationProvider") + return navigation +} diff --git a/packages/app/src/context/notification.tsx b/packages/app/src/context/notification.tsx index 130c4a262b31..309d2eb90ab8 100644 --- a/packages/app/src/context/notification.tsx +++ b/packages/app/src/context/notification.tsx @@ -1,18 +1,17 @@ import { createStore, reconcile } from "solid-js/store" -import { batch, createEffect, createMemo, onCleanup } from "solid-js" -import { useParams } from "@solidjs/router" +import { batch, createEffect, createMemo, createRoot, getOwner, onCleanup, type Accessor } from "solid-js" import { createSimpleContext } from "@opencode-ai/ui/context" -import { useServerSDK } from "./server-sdk" -import { useServerSync } from "./server-sync" +import { useServerContext, type ServerContext } from "./server-context" import { usePlatform } from "@/context/platform" import { useLanguage } from "@/context/language" import { useSettings } from "@/context/settings" import { Binary } from "@opencode-ai/core/util/binary" -import { base64Encode } from "@opencode-ai/core/util/encode" -import { decode64 } from "@/utils/base64" import { EventSessionError } from "@opencode-ai/sdk/v2" import { Persist, persisted } from "@/utils/persist" +import { createScopedCache } from "@/utils/scoped-cache" import { playSoundById } from "@/utils/sound" +import { useGlobal } from "./global" +import { ServerConnection } from "./server" type NotificationBase = { directory?: string @@ -33,6 +32,12 @@ type ErrorNotification = NotificationBase & { export type Notification = TurnCompleteNotification | ErrorNotification +type ActiveNotificationRoute = { + server: Accessor + directory: Accessor + sessionID: Accessor +} + type NotificationIndex = { session: { all: Record @@ -105,269 +110,312 @@ function buildNotificationIndex(list: Notification[]) { return index } -export const { use: useNotification, provider: NotificationProvider } = createSimpleContext({ - name: "Notification", - gate: false, - init: () => { - const params = useParams() - const serverSDK = useServerSDK() - const serverSync = useServerSync() - const platform = usePlatform() - const settings = useSettings() - const language = useLanguage() - - const empty: Notification[] = [] - - const currentDirectory = createMemo(() => { - return decode64(params.dir) - }) - - const currentSession = createMemo(() => params.id) - - const [store, setStore, _, ready] = persisted( - Persist.serverGlobal(serverSDK.scope, "notification", ["notification.v1"]), - createStore({ - list: [] as Notification[], - }), +function createNotificationServerState(input: { + server: ServerContext + active: () => ActiveNotificationRoute | undefined + platform: ReturnType + settings: ReturnType + language: ReturnType + href: (server: ServerContext, directory: string, sessionID?: string) => string +}) { + const empty: Notification[] = [] + const [store, setStore, _, ready] = persisted( + Persist.serverGlobal(input.server.scope, "notification", ["notification.v1"]), + createStore({ + list: [] as Notification[], + }), + ) + const [index, setIndex] = createStore(buildNotificationIndex(store.list)) + const meta = { disposed: false } + + const updateUnseen = (scope: "session" | "project", key: string, unseen: Notification[]) => { + setIndex(scope, "unseen", key, unseen) + setIndex(scope, "unseenCount", key, unseen.length) + setIndex( + scope, + "unseenHasError", + key, + unseen.some((notification) => notification.type === "error"), ) - const [index, setIndex] = createStore(buildNotificationIndex(store.list)) - - const meta = { pruned: false, disposed: false } - - const updateUnseen = (scope: "session" | "project", key: string, unseen: Notification[]) => { - setIndex(scope, "unseen", key, unseen) - setIndex(scope, "unseenCount", key, unseen.length) - setIndex( - scope, - "unseenHasError", - key, - unseen.some((notification) => notification.type === "error"), - ) - } + } - const appendToIndex = (notification: Notification) => { - if (notification.session) { - setIndex("session", "all", notification.session, (all = []) => [...all, notification]) - if (!notification.viewed) { - setIndex("session", "unseen", notification.session, (unseen = []) => [...unseen, notification]) - setIndex("session", "unseenCount", notification.session, (count = 0) => count + 1) - if (notification.type === "error") setIndex("session", "unseenHasError", notification.session, true) - } + const appendToIndex = (notification: Notification) => { + if (notification.session) { + setIndex("session", "all", notification.session, (all = []) => [...all, notification]) + if (!notification.viewed) { + setIndex("session", "unseen", notification.session, (unseen = []) => [...unseen, notification]) + setIndex("session", "unseenCount", notification.session, (count = 0) => count + 1) + if (notification.type === "error") setIndex("session", "unseenHasError", notification.session, true) } + } - if (notification.directory) { - setIndex("project", "all", notification.directory, (all = []) => [...all, notification]) - if (!notification.viewed) { - setIndex("project", "unseen", notification.directory, (unseen = []) => [...unseen, notification]) - setIndex("project", "unseenCount", notification.directory, (count = 0) => count + 1) - if (notification.type === "error") setIndex("project", "unseenHasError", notification.directory, true) - } + if (notification.directory) { + setIndex("project", "all", notification.directory, (all = []) => [...all, notification]) + if (!notification.viewed) { + setIndex("project", "unseen", notification.directory, (unseen = []) => [...unseen, notification]) + setIndex("project", "unseenCount", notification.directory, (count = 0) => count + 1) + if (notification.type === "error") setIndex("project", "unseenHasError", notification.directory, true) } } + } - const removeFromIndex = (notification: Notification) => { - if (notification.session) { - setIndex("session", "all", notification.session, (all = []) => all.filter((n) => n !== notification)) - if (!notification.viewed) { - const unseen = (index.session.unseen[notification.session] ?? empty).filter((n) => n !== notification) - updateUnseen("session", notification.session, unseen) - } + const removeFromIndex = (notification: Notification) => { + if (notification.session) { + setIndex("session", "all", notification.session, (all = []) => all.filter((n) => n !== notification)) + if (!notification.viewed) { + const unseen = (index.session.unseen[notification.session] ?? empty).filter((n) => n !== notification) + updateUnseen("session", notification.session, unseen) } + } - if (notification.directory) { - setIndex("project", "all", notification.directory, (all = []) => all.filter((n) => n !== notification)) - if (!notification.viewed) { - const unseen = (index.project.unseen[notification.directory] ?? empty).filter((n) => n !== notification) - updateUnseen("project", notification.directory, unseen) - } + if (notification.directory) { + setIndex("project", "all", notification.directory, (all = []) => all.filter((n) => n !== notification)) + if (!notification.viewed) { + const unseen = (index.project.unseen[notification.directory] ?? empty).filter((n) => n !== notification) + updateUnseen("project", notification.directory, unseen) } } + } - createEffect(() => { - if (!ready()) return - if (meta.pruned) return - meta.pruned = true - const list = pruneNotifications(store.list) - batch(() => { - setStore("list", list) - setIndex(reconcile(buildNotificationIndex(list), { merge: false })) - }) + void Promise.resolve(ready.promise).then(() => { + const list = pruneNotifications(store.list) + batch(() => { + setStore("list", list) + setIndex(reconcile(buildNotificationIndex(list), { merge: false })) }) + }) - const append = (notification: Notification) => { - const list = pruneNotifications([...store.list, notification]) - const keep = new Set(list) - const removed = store.list.filter((n) => !keep.has(n)) - - batch(() => { - if (keep.has(notification)) appendToIndex(notification) - removed.forEach((n) => removeFromIndex(n)) - setStore("list", list) - }) - } + const append = (notification: Notification) => { + const list = pruneNotifications([...store.list, notification]) + const keep = new Set(list) + const removed = store.list.filter((n) => !keep.has(n)) - const lookup = async (directory: string, sessionID?: string) => { - if (!sessionID) return undefined - const [syncStore] = serverSync.child(directory, { bootstrap: false }) - const match = Binary.search(syncStore.session, sessionID, (s) => s.id) - if (match.found) return syncStore.session[match.index] - return serverSDK.client.session - .get({ directory, sessionID }) - .then((x) => x.data) - .catch(() => undefined) - } + batch(() => { + if (keep.has(notification)) appendToIndex(notification) + removed.forEach((n) => removeFromIndex(n)) + setStore("list", list) + }) + } - const viewedInCurrentSession = (directory: string, sessionID?: string) => { - const activeDirectory = currentDirectory() - const activeSession = currentSession() - if (!activeDirectory) return false - if (!activeSession) return false - if (!sessionID) return false - if (directory !== activeDirectory) return false - return sessionID === activeSession - } + const lookup = async (directory: string, sessionID?: string) => { + if (!sessionID) return undefined + const [syncStore] = input.server.sync.child(directory, { bootstrap: false }) + const match = Binary.search(syncStore.session, sessionID, (s) => s.id) + if (match.found) return syncStore.session[match.index] + return input.server.sdk.client.session + .get({ directory, sessionID }) + .then((x) => x.data) + .catch(() => undefined) + } - const handleSessionIdle = (directory: string, event: { properties: { sessionID?: string } }, time: number) => { - const sessionID = event.properties.sessionID - void lookup(directory, sessionID).then((session) => { - if (meta.disposed) return - if (!session) return - if (session.parentID) return + const viewedInCurrentSession = (directory: string, sessionID?: string) => { + const active = input.active() + if (active?.server() !== input.server) return false + const activeDirectory = active.directory() + const activeSession = active.sessionID() + if (!activeDirectory || !activeSession || !sessionID) return false + if (directory !== activeDirectory) return false + return sessionID === activeSession + } - if (settings.sounds.agentEnabled()) { - void playSoundById(settings.sounds.agent()) - } + const handleSessionIdle = (directory: string, event: { properties: { sessionID?: string } }, time: number) => { + const sessionID = event.properties.sessionID + void lookup(directory, sessionID).then((session) => { + if (meta.disposed || !session || session.parentID) return + if (input.settings.sounds.agentEnabled()) void playSoundById(input.settings.sounds.agent()) + + append({ + directory, + time, + viewed: viewedInCurrentSession(directory, sessionID), + type: "turn-complete", + session: sessionID, + }) - append({ - directory, - time, - viewed: viewedInCurrentSession(directory, sessionID), - type: "turn-complete", - session: sessionID, - }) + const href = input.href(input.server, directory, sessionID) + if (input.settings.notifications.agent()) { + void input.platform.notify(input.language.t("notification.session.responseReady.title"), session.title ?? sessionID, href) + } + }) + } - const href = `/${base64Encode(directory)}/session/${sessionID}` - if (settings.notifications.agent()) { - void platform.notify(language.t("notification.session.responseReady.title"), session.title ?? sessionID, href) - } + const handleSessionError = ( + directory: string, + event: { properties: { sessionID?: string; error?: EventSessionError["properties"]["error"] } }, + time: number, + ) => { + const sessionID = event.properties.sessionID + void lookup(directory, sessionID).then((session) => { + if (meta.disposed || session?.parentID) return + if (input.settings.sounds.errorsEnabled()) void playSoundById(input.settings.sounds.errors()) + + const error = "error" in event.properties ? event.properties.error : undefined + append({ + directory, + time, + viewed: viewedInCurrentSession(directory, sessionID), + type: "error", + session: sessionID ?? "global", + error, }) - } + const description = + session?.title ?? + (typeof error === "string" ? error : input.language.t("notification.session.error.fallbackDescription")) + const href = input.href(input.server, directory, sessionID) + if (input.settings.notifications.errors()) { + void input.platform.notify(input.language.t("notification.session.error.title"), description, href) + } + }) + } - const handleSessionError = ( - directory: string, - event: { properties: { sessionID?: string; error?: EventSessionError["properties"]["error"] } }, - time: number, - ) => { - const sessionID = event.properties.sessionID - void lookup(directory, sessionID).then((session) => { - if (meta.disposed) return - if (session?.parentID) return - - if (settings.sounds.errorsEnabled()) { - void playSoundById(settings.sounds.errors()) - } + const unsub = input.server.sdk.event.listen((e) => { + const event = e.details + if (event.type !== "session.idle" && event.type !== "session.error") return + const time = Date.now() + if (event.type === "session.idle") { + handleSessionIdle(e.name, event, time) + return + } + handleSessionError(e.name, event, time) + }) + onCleanup(() => { + meta.disposed = true + unsub() + }) - const error = "error" in event.properties ? event.properties.error : undefined - append({ - directory, - time, - viewed: viewedInCurrentSession(directory, sessionID), - type: "error", - session: sessionID ?? "global", - error, + return { + ready, + session: { + all: (session: string) => index.session.all[session] ?? empty, + unseen: (session: string) => index.session.unseen[session] ?? empty, + unseenCount: (session: string) => index.session.unseenCount[session] ?? 0, + unseenHasError: (session: string) => index.session.unseenHasError[session] ?? false, + markViewed(session: string) { + const unseen = index.session.unseen[session] ?? empty + if (!unseen.length) return + const projects = [ + ...new Set(unseen.flatMap((notification) => (notification.directory ? [notification.directory] : []))), + ] + batch(() => { + setStore("list", (n) => n.session === session && !n.viewed, "viewed", true) + updateUnseen("session", session, []) + projects.forEach((directory) => { + updateUnseen( + "project", + directory, + (index.project.unseen[directory] ?? empty).filter((notification) => notification.session !== session), + ) + }) + }) + }, + }, + project: { + all: (directory: string) => index.project.all[directory] ?? empty, + unseen: (directory: string) => index.project.unseen[directory] ?? empty, + unseenCount: (directory: string) => index.project.unseenCount[directory] ?? 0, + unseenHasError: (directory: string) => index.project.unseenHasError[directory] ?? false, + markViewed(directory: string) { + const unseen = index.project.unseen[directory] ?? empty + if (!unseen.length) return + const sessions = [ + ...new Set(unseen.flatMap((notification) => (notification.session ? [notification.session] : []))), + ] + batch(() => { + setStore("list", (n) => n.directory === directory && !n.viewed, "viewed", true) + updateUnseen("project", directory, []) + sessions.forEach((session) => { + updateUnseen( + "session", + session, + (index.session.unseen[session] ?? empty).filter((notification) => notification.directory !== directory), + ) + }) }) - const description = - session?.title ?? - (typeof error === "string" ? error : language.t("notification.session.error.fallbackDescription")) - const href = sessionID ? `/${base64Encode(directory)}/session/${sessionID}` : `/${base64Encode(directory)}` - if (settings.notifications.errors()) { - void platform.notify(language.t("notification.session.error.title"), description, href) + }, + }, + } +} + +const { use: useNotificationService, provider: NotificationServiceProvider } = createSimpleContext({ + name: "NotificationService", + gate: false, + init: (props: { href: (server: ServerContext, directory: string, sessionID?: string) => string }) => { + const global = useGlobal() + const platform = usePlatform() + const settings = useSettings() + const language = useLanguage() + const owner = getOwner() + const active: { current?: ActiveNotificationRoute } = {} + const cache = createScopedCache( + (current: ServerContext) => + (() => { + const entry = createRoot( + (dispose) => ({ + value: createNotificationServerState({ + server: current, + active: () => active.current, + platform, + settings, + language, + href: props.href, + }), + dispose, + }), + owner, + ) + return { ...entry, unregister: current.onDispose(() => cache.delete(current)) } + })(), + { + dispose: (entry) => { + entry.unregister() + entry.dispose() + }, + }, + ) + onCleanup(() => cache.clear()) + createEffect(() => { + global.servers.list().forEach((connection) => cache.get(global.servers.get(ServerConnection.key(connection)))) + }) + + return { + forServer: (server: ServerContext) => cache.get(server).value, + activate(route: ActiveNotificationRoute) { + active.current = route + return () => { + if (active.current === route) active.current = undefined } - }) + }, } + }, +}) - const unsub = serverSDK.event.listen((e) => { - const event = e.details - if (event.type !== "session.idle" && event.type !== "session.error") return +export { NotificationServiceProvider } - const directory = e.name - const time = Date.now() - if (event.type === "session.idle") { - handleSessionIdle(directory, event, time) - return - } - handleSessionError(directory, event, time) - }) - onCleanup(() => { - meta.disposed = true - unsub() - }) +export const { use: useNotification, provider: NotificationProvider } = createSimpleContext({ + name: "Notification", + gate: false, + init: (props: { directory: Accessor; sessionID: Accessor }) => { + const server = useServerContext() + const service = useNotificationService() + onCleanup(service.activate({ server, directory: props.directory, sessionID: props.sessionID })) + const current = createMemo(() => service.forServer(server())) return { - ready, + forServer: service.forServer, + ready: () => current().ready(), session: { - all(session: string) { - return index.session.all[session] ?? empty - }, - unseen(session: string) { - return index.session.unseen[session] ?? empty - }, - unseenCount(session: string) { - return index.session.unseenCount[session] ?? 0 - }, - unseenHasError(session: string) { - return index.session.unseenHasError[session] ?? false - }, - markViewed(session: string) { - const unseen = index.session.unseen[session] ?? empty - if (!unseen.length) return - - const projects = [ - ...new Set(unseen.flatMap((notification) => (notification.directory ? [notification.directory] : []))), - ] - batch(() => { - setStore("list", (n) => n.session === session && !n.viewed, "viewed", true) - updateUnseen("session", session, []) - projects.forEach((directory) => { - const next = (index.project.unseen[directory] ?? empty).filter( - (notification) => notification.session !== session, - ) - updateUnseen("project", directory, next) - }) - }) - }, + all: (session: string) => current().session.all(session), + unseen: (session: string) => current().session.unseen(session), + unseenCount: (session: string) => current().session.unseenCount(session), + unseenHasError: (session: string) => current().session.unseenHasError(session), + markViewed: (session: string) => current().session.markViewed(session), }, project: { - all(directory: string) { - return index.project.all[directory] ?? empty - }, - unseen(directory: string) { - return index.project.unseen[directory] ?? empty - }, - unseenCount(directory: string) { - return index.project.unseenCount[directory] ?? 0 - }, - unseenHasError(directory: string) { - return index.project.unseenHasError[directory] ?? false - }, - markViewed(directory: string) { - const unseen = index.project.unseen[directory] ?? empty - if (!unseen.length) return - - const sessions = [ - ...new Set(unseen.flatMap((notification) => (notification.session ? [notification.session] : []))), - ] - batch(() => { - setStore("list", (n) => n.directory === directory && !n.viewed, "viewed", true) - updateUnseen("project", directory, []) - sessions.forEach((session) => { - const next = (index.session.unseen[session] ?? empty).filter( - (notification) => notification.directory !== directory, - ) - updateUnseen("session", session, next) - }) - }) - }, + all: (directory: string) => current().project.all(directory), + unseen: (directory: string) => current().project.unseen(directory), + unseenCount: (directory: string) => current().project.unseenCount(directory), + unseenHasError: (directory: string) => current().project.unseenHasError(directory), + markViewed: (directory: string) => current().project.markViewed(directory), }, } }, diff --git a/packages/app/src/context/permission.tsx b/packages/app/src/context/permission.tsx index f22df019450e..d0cda26c9e44 100644 --- a/packages/app/src/context/permission.tsx +++ b/packages/app/src/context/permission.tsx @@ -1,12 +1,12 @@ -import { createEffect, createMemo, onCleanup } from "solid-js" +import { createEffect, createMemo, createRoot, getOwner, onCleanup } from "solid-js" import { createStore, produce } from "solid-js/store" import { createSimpleContext } from "@opencode-ai/ui/context" import type { PermissionRequest } from "@opencode-ai/sdk/v2/client" import { Persist, persisted } from "@/utils/persist" -import { useServerSDK } from "@/context/server-sdk" -import { useServerSync } from "./server-sync" -import { useParams } from "@solidjs/router" -import { decode64 } from "@/utils/base64" +import { createScopedCache } from "@/utils/scoped-cache" +import { useGlobal } from "./global" +import { ServerConnection } from "./server" +import { useServerContext, type ServerContext } from "./server-context" import { acceptKey, directoryAcceptKey, @@ -44,234 +44,280 @@ function hasPermissionPromptRules(permission: unknown) { return Object.values(config).some(isNonAllowRule) } -export const { use: usePermission, provider: PermissionProvider } = createSimpleContext({ - name: "Permission", - gate: false, - init: () => { - const params = useParams() - const serverSDK = useServerSDK() - const serverSync = useServerSync() +function createPermissionServerState(server: ServerContext) { + const serverSDK = server.sdk + const serverSync = server.sync + const [store, setStore, _, ready] = persisted( + { + ...Persist.serverGlobal(server.scope, "permission", ["permission.v3"]), + migrate(value) { + if (!value || typeof value !== "object" || Array.isArray(value)) return value + + const data = value as Record + if (data.autoAccept) return value + + return { + ...data, + autoAccept: + typeof data.autoAcceptEdits === "object" && data.autoAcceptEdits && !Array.isArray(data.autoAcceptEdits) + ? data.autoAcceptEdits + : {}, + } + }, + }, + createStore({ + autoAccept: {} as Record, + }), + ) + + const MAX_RESPONDED = 1000 + const RESPONDED_TTL_MS = 60 * 60 * 1000 + const responded = new Map() + const enableVersion = new Map() + + function pruneResponded(now: number) { + for (const [id, ts] of responded) { + if (now - ts < RESPONDED_TTL_MS) break + responded.delete(id) + } - const permissionsEnabled = createMemo(() => { - const directory = decode64(params.dir) - if (!directory) return false - const [store] = serverSync.child(directory) - return hasPermissionPromptRules(store.config.permission) + for (const id of responded.keys()) { + if (responded.size <= MAX_RESPONDED) break + responded.delete(id) + } + } + + const respond: PermissionRespondFn = (input) => { + serverSDK.client.permission.respond(input).catch(() => { + responded.delete(input.permissionID) }) + } - const [store, setStore, _, ready] = persisted( - { - ...Persist.serverGlobal(serverSDK.scope, "permission", ["permission.v3"]), - migrate(value) { - if (!value || typeof value !== "object" || Array.isArray(value)) return value - - const data = value as Record - if (data.autoAccept) return value - - return { - ...data, - autoAccept: - typeof data.autoAcceptEdits === "object" && data.autoAcceptEdits && !Array.isArray(data.autoAcceptEdits) - ? data.autoAcceptEdits - : {}, - } - }, - }, - createStore({ - autoAccept: {} as Record, - }), - ) + function autoAccept(directory?: string) { + if (!directory) return store.autoAccept + const key = directoryAcceptKey(directory) + if (store.autoAccept[key] !== undefined) return store.autoAccept + if (serverSync.child(directory, { bootstrap: false })[0].config.permission !== "allow") return store.autoAccept + return { ...store.autoAccept, [key]: true } + } - // When config has permission: "allow", auto-enable directory-level auto-accept - createEffect(() => { - if (!ready()) return - const directory = decode64(params.dir) - if (!directory) return - const [childStore] = serverSync.child(directory) - const perm = childStore.config.permission - if (typeof perm === "string" && perm === "allow") { - const key = directoryAcceptKey(directory) - if (store.autoAccept[key] === undefined) { - setStore( - produce((draft) => { - draft.autoAccept[key] = true - }), - ) - } - } + function respondOnce(permission: PermissionRequest, directory?: string) { + const now = Date.now() + const hit = responded.has(permission.id) + responded.delete(permission.id) + responded.set(permission.id, now) + pruneResponded(now) + if (hit) return + respond({ + sessionID: permission.sessionID, + permissionID: permission.id, + response: "once", + directory, }) + } - const MAX_RESPONDED = 1000 - const RESPONDED_TTL_MS = 60 * 60 * 1000 - const responded = new Map() - const enableVersion = new Map() - - function pruneResponded(now: number) { - for (const [id, ts] of responded) { - if (now - ts < RESPONDED_TTL_MS) break - responded.delete(id) - } - - for (const id of responded.keys()) { - if (responded.size <= MAX_RESPONDED) break - responded.delete(id) - } - } + function isAutoAccepting(sessionID: string, directory?: string) { + const session = directory ? serverSync.child(directory, { bootstrap: false })[0].session : [] + return autoRespondsPermission(autoAccept(directory), session, { sessionID }, directory) + } - const respond: PermissionRespondFn = (input) => { - serverSDK.client.permission.respond(input).catch(() => { - responded.delete(input.permissionID) - }) - } + function isAutoAcceptingDirectory(directory: string) { + return isDirectoryAutoAccepting(autoAccept(directory), directory) + } - function respondOnce(permission: PermissionRequest, directory?: string) { - const now = Date.now() - const hit = responded.has(permission.id) - responded.delete(permission.id) - responded.set(permission.id, now) - pruneResponded(now) - if (hit) return - respond({ - sessionID: permission.sessionID, - permissionID: permission.id, - response: "once", - directory, - }) - } + function shouldAutoRespond(permission: PermissionRequest, directory?: string) { + const session = directory ? serverSync.child(directory, { bootstrap: false })[0].session : [] + return autoRespondsPermission(autoAccept(directory), session, permission, directory) + } - function isAutoAccepting(sessionID: string, directory?: string) { - const session = directory ? serverSync.child(directory, { bootstrap: false })[0].session : [] - return autoRespondsPermission(store.autoAccept, session, { sessionID }, directory) - } + function bumpEnableVersion(sessionID: string, directory?: string) { + const key = acceptKey(sessionID, directory) + const next = (enableVersion.get(key) ?? 0) + 1 + enableVersion.set(key, next) + return next + } - function isAutoAcceptingDirectory(directory: string) { - return isDirectoryAutoAccepting(store.autoAccept, directory) - } + const unsubscribe = serverSDK.event.listen((e) => { + const event = e.details + if (event?.type !== "permission.asked") return + if (!shouldAutoRespond(event.properties, e.name)) return + respondOnce(event.properties, e.name) + }) + onCleanup(unsubscribe) + + function enableDirectory(directory: string) { + const key = directoryAcceptKey(directory) + setStore( + produce((draft) => { + draft.autoAccept[key] = true + }), + ) - function shouldAutoRespond(permission: PermissionRequest, directory?: string) { - const session = directory ? serverSync.child(directory, { bootstrap: false })[0].session : [] - return autoRespondsPermission(store.autoAccept, session, permission, directory) - } + serverSDK.client.permission + .list({ directory }) + .then((x) => { + if (!isAutoAcceptingDirectory(directory)) return + for (const perm of x.data ?? []) { + if (!perm?.id) continue + if (!shouldAutoRespond(perm, directory)) continue + respondOnce(perm, directory) + } + }) + .catch(() => undefined) + } - function bumpEnableVersion(sessionID: string, directory?: string) { - const key = acceptKey(sessionID, directory) - const next = (enableVersion.get(key) ?? 0) + 1 - enableVersion.set(key, next) - return next - } + function disableDirectory(directory: string) { + const key = directoryAcceptKey(directory) + setStore( + produce((draft) => { + draft.autoAccept[key] = false + }), + ) + } + + function enable(sessionID: string, directory: string) { + const key = acceptKey(sessionID, directory) + const version = bumpEnableVersion(sessionID, directory) + setStore( + produce((draft) => { + draft.autoAccept[key] = true + delete draft.autoAccept[sessionID] + }), + ) + + serverSDK.client.permission + .list({ directory }) + .then((x) => { + if (enableVersion.get(key) !== version) return + if (!isAutoAccepting(sessionID, directory)) return + for (const perm of x.data ?? []) { + if (!perm?.id) continue + if (!shouldAutoRespond(perm, directory)) continue + respondOnce(perm, directory) + } + }) + .catch(() => undefined) + } - const unsubscribe = serverSDK.event.listen((e) => { - const event = e.details - if (event?.type !== "permission.asked") return + function disable(sessionID: string, directory?: string) { + bumpEnableVersion(sessionID, directory) + const key = directory ? acceptKey(sessionID, directory) : sessionID + setStore( + produce((draft) => { + draft.autoAccept[key] = false + if (!directory) return + delete draft.autoAccept[sessionID] + }), + ) + } - const perm = event.properties - if (!shouldAutoRespond(perm, e.name)) return + return { + ready, + respond, + autoResponds: shouldAutoRespond, + isAutoAccepting, + isAutoAcceptingDirectory, + enableDirectory, + disableDirectory, + enable, + disable, + isPermissionAllowAll(directory: string) { + return serverSync.child(directory)[0].config.permission === "allow" + }, + permissionsEnabled(directory: string) { + return hasPermissionPromptRules(serverSync.child(directory)[0].config.permission) + }, + } +} - respondOnce(perm, e.name) +const { use: usePermissionService, provider: PermissionServiceProvider } = createSimpleContext({ + name: "PermissionService", + gate: false, + init: () => { + const global = useGlobal() + const owner = getOwner() + const cache = createScopedCache( + (current: ServerContext) => { + const entry = createRoot((dispose) => ({ value: createPermissionServerState(current), dispose }), owner) + return { ...entry, unregister: current.onDispose(() => cache.delete(current)) } + }, + { + dispose: (entry) => { + entry.unregister() + entry.dispose() + }, + }, + ) + onCleanup(() => cache.clear()) + createEffect(() => { + global.servers.list().forEach((connection) => cache.get(global.servers.get(ServerConnection.key(connection)))) }) - onCleanup(unsubscribe) - - function enableDirectory(directory: string) { - const key = directoryAcceptKey(directory) - setStore( - produce((draft) => { - draft.autoAccept[key] = true - }), - ) - - serverSDK.client.permission - .list({ directory }) - .then((x) => { - if (!isAutoAcceptingDirectory(directory)) return - for (const perm of x.data ?? []) { - if (!perm?.id) continue - if (!shouldAutoRespond(perm, directory)) continue - respondOnce(perm, directory) - } - }) - .catch(() => undefined) - } - function disableDirectory(directory: string) { - const key = directoryAcceptKey(directory) - setStore( - produce((draft) => { - draft.autoAccept[key] = false - }), - ) - } + return { forServer: (server: ServerContext) => cache.get(server).value } + }, +}) - function enable(sessionID: string, directory: string) { - const key = acceptKey(sessionID, directory) - const version = bumpEnableVersion(sessionID, directory) - setStore( - produce((draft) => { - draft.autoAccept[key] = true - delete draft.autoAccept[sessionID] - }), - ) - - serverSDK.client.permission - .list({ directory }) - .then((x) => { - if (enableVersion.get(key) !== version) return - if (!isAutoAccepting(sessionID, directory)) return - for (const perm of x.data ?? []) { - if (!perm?.id) continue - if (!shouldAutoRespond(perm, directory)) continue - respondOnce(perm, directory) - } - }) - .catch(() => undefined) - } +export { PermissionServiceProvider } - function disable(sessionID: string, directory?: string) { - bumpEnableVersion(sessionID, directory) - const key = directory ? acceptKey(sessionID, directory) : sessionID - setStore( - produce((draft) => { - draft.autoAccept[key] = false - if (!directory) return - delete draft.autoAccept[sessionID] - }), - ) - } +export const { use: usePermission, provider: PermissionProvider } = createSimpleContext({ + name: "Permission", + gate: false, + init: (props: { directory: () => string | undefined }) => { + const server = useServerContext() + const service = usePermissionService() + + const current = createMemo(() => service.forServer(server())) + + const permissionsEnabled = createMemo(() => { + const directory = props.directory() + if (!directory) return false + return current().permissionsEnabled(directory) + }) return { - ready, - respond, + forServer: service.forServer, + bind() { + const state = current() + return { + enableAutoAccept(sessionID: string, directory: string) { + if (!state.isAutoAccepting(sessionID, directory)) state.enable(sessionID, directory) + }, + } + }, + ready: () => current().ready(), + respond: (input: Parameters[0]) => current().respond(input), autoResponds(permission: PermissionRequest, directory?: string) { - return shouldAutoRespond(permission, directory) + return current().autoResponds(permission, directory) }, - isAutoAccepting, - isAutoAcceptingDirectory, + isAutoAccepting: (sessionID: string, directory?: string) => current().isAutoAccepting(sessionID, directory), + isAutoAcceptingDirectory: (directory: string) => current().isAutoAcceptingDirectory(directory), toggleAutoAccept(sessionID: string, directory: string) { - if (isAutoAccepting(sessionID, directory)) { - disable(sessionID, directory) + const state = current() + if (state.isAutoAccepting(sessionID, directory)) { + state.disable(sessionID, directory) return } - - enable(sessionID, directory) + state.enable(sessionID, directory) }, toggleAutoAcceptDirectory(directory: string) { - if (isAutoAcceptingDirectory(directory)) { - disableDirectory(directory) + const state = current() + if (state.isAutoAcceptingDirectory(directory)) { + state.disableDirectory(directory) return } - enableDirectory(directory) + state.enableDirectory(directory) }, enableAutoAccept(sessionID: string, directory: string) { - if (isAutoAccepting(sessionID, directory)) return - enable(sessionID, directory) + const state = current() + if (state.isAutoAccepting(sessionID, directory)) return + state.enable(sessionID, directory) }, disableAutoAccept(sessionID: string, directory?: string) { - disable(sessionID, directory) + current().disable(sessionID, directory) }, permissionsEnabled, isPermissionAllowAll(directory: string) { - const [childStore] = serverSync.child(directory) - const perm = childStore.config.permission - return typeof perm === "string" && perm === "allow" + return current().isPermissionAllowAll(directory) }, } }, diff --git a/packages/app/src/context/platform.tsx b/packages/app/src/context/platform.tsx index 79e2503b1e86..38f0a086dc31 100644 --- a/packages/app/src/context/platform.tsx +++ b/packages/app/src/context/platform.tsx @@ -24,7 +24,7 @@ export type Platform = { /** Platform discriminator */ platform: PlatformName - /** Desktop OS (Tauri only) */ + /** Desktop OS */ os?: DesktopOS /** App version */ @@ -48,13 +48,13 @@ export type Platform = { /** Send a system notification (optional deep link) */ notify(title: string, description?: string, href?: string): Promise - /** Open directory picker dialog (native on Tauri, server-backed on web) */ + /** Open directory picker dialog (native on desktop, server-backed on web) */ openDirectoryPickerDialog?(opts?: OpenDirectoryPickerOptions): Promise - /** Open native file picker dialog (Tauri only) */ + /** Open native file picker dialog (desktop only) */ openFilePickerDialog?(opts?: OpenFilePickerOptions): Promise - /** Save file picker dialog (Tauri only) */ + /** Save file picker dialog (desktop only) */ saveFilePickerDialog?(opts?: SaveFilePickerOptions): Promise /** Storage mechanism, defaults to localStorage */ diff --git a/packages/app/src/context/prompt.tsx b/packages/app/src/context/prompt.tsx index b0dbca221eed..f9f9d340fb19 100644 --- a/packages/app/src/context/prompt.tsx +++ b/packages/app/src/context/prompt.tsx @@ -1,12 +1,12 @@ import { createSimpleContext } from "@opencode-ai/ui/context" -import { checksum } from "@opencode-ai/core/util/encode" -import { useParams } from "@solidjs/router" +import { base64Encode, checksum } from "@opencode-ai/core/util/encode" import { batch, createMemo, createRoot, getOwner, onCleanup } from "solid-js" import { createStore, type SetStoreFunction } from "solid-js/store" import type { FileSelection } from "@/context/file" -import { Persist, persisted } from "@/utils/persist" -import { useServerSDK } from "./server-sdk" -import type { ServerScope } from "@/utils/server-scope" +import { DirectoryState, type DirectoryStateScope, useDirectory } from "./directory" +import { persisted } from "@/utils/persist" +import { createScopedCache } from "@/utils/scoped-cache" +import { ScopedKey } from "@/utils/server-scope" interface PartBase { content: string @@ -148,26 +148,17 @@ function createPromptActions( } } -const WORKSPACE_KEY = "__workspace__" const MAX_PROMPT_SESSIONS = 20 -type PromptSession = ReturnType +type Scope = DirectoryStateScope -type Scope = { - dir: string - id?: string -} - -type PromptCacheEntry = { - value: PromptSession - dispose: VoidFunction -} - -function createPromptSession(scope: ServerScope, dir: string, id: string | undefined) { +function createPromptSession(scope: Scope) { + const id = DirectoryState.sessionID(scope.state) + const dir = base64Encode(scope.directory) const legacy = `${dir}/prompt${id ? "/" + id : ""}.v2` const [store, setStore, _, ready] = persisted( - Persist.serverScoped(scope, dir, id, "prompt", [legacy]), + DirectoryState.persist({ ...scope, directory: dir }, "prompt", [legacy]), createStore<{ prompt: Prompt cursor?: number @@ -230,56 +221,34 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext( name: "Prompt", gate: false, init: () => { - const params = useParams() - const serverSDK = useServerSDK() - const cache = new Map() - - const disposeAll = () => { - for (const entry of cache.values()) { - entry.dispose() - } - cache.clear() - } - - onCleanup(disposeAll) - - const prune = () => { - while (cache.size > MAX_PROMPT_SESSIONS) { - const first = cache.keys().next().value - if (!first) return - const entry = cache.get(first) - entry?.dispose() - cache.delete(first) - } - } - + const directory = useDirectory() const owner = getOwner() - const load = (dir: string, id: string | undefined) => { - const key = `${dir}:${id ?? WORKSPACE_KEY}` - const existing = cache.get(key) - if (existing) { - cache.delete(key) - cache.set(key, existing) - return existing.value - } - - const entry = createRoot( - (dispose) => ({ - value: createPromptSession(serverSDK.scope, dir, id), - dispose, - }), - owner, - ) + const cache = createScopedCache( + (_key: ScopedKey, scope: Scope) => + createRoot( + (dispose) => ({ + value: createPromptSession(scope), + dispose, + }), + owner, + ), + { + maxEntries: MAX_PROMPT_SESSIONS, + dispose: (entry) => entry.dispose(), + }, + ) + onCleanup(() => cache.clear()) - cache.set(key, entry) - prune() - return entry.value - } + const pick = (scope: Scope) => cache.get(DirectoryState.key(scope), scope).value - const session = createMemo(() => load(params.dir!, params.id)) - const pick = (scope?: Scope) => (scope ? load(scope.dir, scope.id) : session()) + const session = createMemo(() => { + const current = directory() + return pick({ serverScope: current.server.scope, directory: current.directory, state: current.state }) + }) + const select = (scope?: Scope) => (scope ? pick(scope) : session()) return { + bind: select, ready: () => session().ready, current: () => session().current(), cursor: () => session().cursor(), @@ -293,8 +262,8 @@ export const { use: usePrompt, provider: PromptProvider } = createSimpleContext( session().context.updateComment(path, commentID, next), replaceComments: (items: FileContextItem[]) => session().context.replaceComments(items), }, - set: (prompt: Prompt, cursorPosition?: number, scope?: Scope) => pick(scope).set(prompt, cursorPosition), - reset: (scope?: Scope) => pick(scope).reset(), + set: (prompt: Prompt, cursorPosition?: number, scope?: Scope) => select(scope).set(prompt, cursorPosition), + reset: (scope?: Scope) => select(scope).reset(), } }, }) diff --git a/packages/app/src/context/route.tsx b/packages/app/src/context/route.tsx new file mode 100644 index 000000000000..ade83a571aa1 --- /dev/null +++ b/packages/app/src/context/route.tsx @@ -0,0 +1,19 @@ +import { createContext, type Accessor, type ParentProps, useContext } from "solid-js" +import type { ServerConnection } from "./server" + +export type AppRoute = + | { type: "home" } + | { type: "draft"; draftID: string; server: ServerConnection.Key; directory: string } + | { type: "session"; server: ServerConnection.Key; directory: string; sessionID: string; tabID: string } + +const Context = createContext<() => AppRoute>() + +export function RouteProvider(props: ParentProps<{ route: Accessor }>) { + return {props.children} +} + +export function useAppRoute() { + const route = useContext(Context) + if (!route) throw new Error("App route must be used within RouteProvider") + return route +} diff --git a/packages/app/src/context/sdk.tsx b/packages/app/src/context/sdk.tsx deleted file mode 100644 index 46e8c1b2138a..000000000000 --- a/packages/app/src/context/sdk.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { createSimpleContext } from "@opencode-ai/ui/context" -import { useServerSDK } from "./server-sdk" - -export const { use: useSDK, provider: SDKProvider } = createSimpleContext({ - name: "SDK", - init: (props: { directory: string }) => { - const serverSDK = useServerSDK() - - return serverSDK.createDirSdkContext(props.directory) - }, -}) diff --git a/packages/app/src/context/server-context.tsx b/packages/app/src/context/server-context.tsx new file mode 100644 index 000000000000..1ba714a9dc7b --- /dev/null +++ b/packages/app/src/context/server-context.tsx @@ -0,0 +1,44 @@ +import { createContext, type Accessor, type ParentProps, useContext } from "solid-js" +import type { ServerConnection, createServerProjects } from "./server" +import type { ServerScope } from "@/utils/server-scope" +import type { ServerSDK } from "./server-sdk" +import type { ServerSync } from "./server-sync" +import type { Project } from "@opencode-ai/sdk/v2/client" + +type Projects = Omit, "list"> & { + list: () => Array["list"]>[number] & Partial> +} + +export type ServerContext = { + instance: string + key: ServerConnection.Key + connection: ServerConnection.Any + scope: ServerScope + sdk: ServerSDK + sync: ServerSync + isLocal: boolean + projects: Projects + onDispose: (callback: () => void) => () => void +} + +const Context = createContext>() + +export function ServerContextProvider(props: ParentProps<{ value: Accessor }>) { + return {props.children} +} + +export function useServerContext() { + const server = useContext(Context) + if (!server) throw new Error("Server context must be used within ServerContextProvider") + return server +} + +export function useServerSDK(): Accessor { + const server = useServerContext() + return () => server().sdk +} + +export function useServerSync(): Accessor { + const server = useServerContext() + return () => server().sync +} diff --git a/packages/app/src/context/server-sdk.tsx b/packages/app/src/context/server-sdk.tsx index ab736c7382d4..031416ed0b21 100644 --- a/packages/app/src/context/server-sdk.tsx +++ b/packages/app/src/context/server-sdk.tsx @@ -1,14 +1,11 @@ import type { Event } from "@opencode-ai/sdk/v2/client" -import { createSimpleContext } from "@opencode-ai/ui/context" import { createGlobalEmitter } from "@solid-primitives/event-bus" import { makeEventListener } from "@solid-primitives/event-listener" import { batch, onCleanup, onMount } from "solid-js" import { createSdkForServer } from "@/utils/server" -import { useLanguage } from "./language" import { usePlatform } from "./platform" -import { ServerConnection, useServer } from "./server" +import { ServerConnection } from "./server" import { createRefCountMap } from "@/utils/refcount" -import { useGlobal } from "./global" import { ServerScope } from "@/utils/server-scope" const isAbortError = (error: unknown) => @@ -21,7 +18,7 @@ export function resumeStreamAfterPageShow(event: PageTransitionEvent, start: () start() } -export function createServerSdkContext(server: ServerConnection.Any, scope: ServerScope) { +function createServerSdkContextBase(server: ServerConnection.Any, scope: ServerScope) { const platform = usePlatform() const abort = new AbortController() @@ -261,30 +258,21 @@ export function createServerSdkContext(server: ServerConnection.Any, scope: Serv } } -export type ServerSDK = ReturnType +type ServerSDKBase = ReturnType +export type ServerSDK = ServerSDKBase & { createDirSdkContext: (directory: string) => ReturnType } -export const { use: useServerSDK, provider: ServerSDKProvider } = createSimpleContext({ - name: "ServerSDK", - init: (props: { server?: ServerConnection.Any }) => { - const global = useGlobal() - const language = useLanguage() - const server = useServer() - - const conn = props.server ?? server.current - if (!conn) throw new Error(language.t("error.serverSDK.noServerAvailable")) - - const ctx = global.createServerCtx(conn) - return Object.assign(ctx.sdk, { - createDirSdkContext: createRefCountMap((dir) => createDirSdkContext(dir, ctx.sdk)), - }) - }, -}) +export function createServerSdkContext(server: ServerConnection.Any, scope: ServerScope): ServerSDK { + const sdk = createServerSdkContextBase(server, scope) + return Object.assign(sdk, { + createDirSdkContext: createRefCountMap((dir) => createDirSdkContext(dir, sdk)), + }) +} type SDKEventMap = { [key in Event["type"]]: Extract } -function createDirSdkContext(directory: string, serverSDK: ServerSDK) { +function createDirSdkContext(directory: string, serverSDK: ServerSDKBase) { const client = serverSDK.createClient({ directory, throwOnError: true, diff --git a/packages/app/src/context/server-sync.tsx b/packages/app/src/context/server-sync.tsx index 9a61c4641938..c0f6d8e5128b 100644 --- a/packages/app/src/context/server-sync.tsx +++ b/packages/app/src/context/server-sync.tsx @@ -5,7 +5,7 @@ import { batch, getOwner, onCleanup, onMount, untrack } from "solid-js" import { createStore, produce, reconcile } from "solid-js/store" import { useLanguage } from "@/context/language" import type { InitError } from "../pages/error" -import { ServerSDK, useServerSDK } from "./server-sdk" +import { ServerSDK } from "./server-sdk" import { bootstrapDirectory, bootstrapGlobal, @@ -29,10 +29,8 @@ import { createRefreshQueue } from "./global-sync/queue" import { directoryKey } from "./global-sync/utils" import { PathKey } from "@/utils/path-key" import { createDirSyncContext } from "./directory-sync" -import { createSimpleContext, NormalizedProviderListResponse } from "@opencode-ai/ui/context" +import { NormalizedProviderListResponse } from "@opencode-ai/ui/context" import { createRefCountMap } from "@/utils/refcount" -import { useGlobal } from "./global" -import { ServerConnection, useServer } from "./server" import { retry } from "@opencode-ai/core/util/retry" import type { ServerScope } from "@/utils/server-scope" import { persisted } from "@/utils/persist" @@ -83,8 +81,7 @@ function makeQueryOptionsApi( } export type QueryOptionsApi = ReturnType -export function createServerSyncContextInner(_serverSDK?: ServerSDK) { - const serverSDK: ServerSDK = _serverSDK ?? useServerSDK() +export function createServerSyncContextInner(serverSDK: ServerSDK) { const language = useLanguage() const owner = getOwner() if (!owner) throw new Error("ServerSync must be created within owner") @@ -479,33 +476,15 @@ export function createServerSyncContextInner(_serverSDK?: ServerSDK) { } } -export function createServerSyncContext(_serverSDK?: ServerSDK) { - const inner = createServerSyncContextInner(_serverSDK) +export function createServerSyncContext(serverSDK: ServerSDK) { + const inner = createServerSyncContextInner(serverSDK) return Object.assign(inner, { createDirSyncContext: createRefCountMap( - (dir) => createDirSyncContext(dir, inner, _serverSDK), + (dir) => createDirSyncContext(dir, inner, serverSDK), (dir) => inner.disableMcp(dir), directoryKey, ), }) } -export const { use: useServerSync, provider: ServerSyncProvider } = createSimpleContext({ - name: "ServerSync", - gate: false, - init: (props: { server?: ServerConnection.Any }) => { - const global = useGlobal() - const language = useLanguage() - const server = useServer() - - const conn = props.server ?? server.current - if (!conn) throw new Error(language.t("error.serverSDK.noServerAvailable")) - const ctx = global.createServerCtx(conn) - - return ctx.sync - }, -}) - -export function useQueryOptions() { - return useServerSync().queryOptions -} +export type ServerSync = ReturnType diff --git a/packages/app/src/context/settings.tsx b/packages/app/src/context/settings.tsx index ca04ff68647a..723d2e00bfd5 100644 --- a/packages/app/src/context/settings.tsx +++ b/packages/app/src/context/settings.tsx @@ -158,7 +158,20 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont name: "Settings", gate: false, init: () => { - const [store, setStore, _, ready] = persisted("settings.v3", createStore(defaultSettings)) + const [store, setStore, _, ready] = persisted( + { + key: "settings.v3", + migrate(value) { + if (!value || typeof value !== "object" || Array.isArray(value)) return value + const settings = value as Record + if (!settings.general || typeof settings.general !== "object" || Array.isArray(settings.general)) return value + const general = settings.general as Record + if (general.followup !== "queue") return value + return { ...settings, general: { ...general, followup: "steer" } } + }, + }, + createStore(defaultSettings), + ) createEffect(() => { if (typeof document === "undefined") return @@ -167,11 +180,6 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont root.style.setProperty("--font-family-sans", sansFontFamily(store.appearance?.sans)) }) - createEffect(() => { - if (store.general?.followup !== "queue") return - setStore("general", "followup", "steer") - }) - return { ready, get current() { @@ -248,6 +256,7 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont newLayoutDesigns: withFallback(() => store.general?.newLayoutDesigns, newLayoutDesignsDefault), setNewLayoutDesigns(value: boolean) { setStore("general", "newLayoutDesigns", value) + location.reload() }, }, updates: { diff --git a/packages/app/src/context/sync-optimistic.test.ts b/packages/app/src/context/sync-optimistic.test.ts index 94324f8a060a..934b516f4b56 100644 --- a/packages/app/src/context/sync-optimistic.test.ts +++ b/packages/app/src/context/sync-optimistic.test.ts @@ -1,6 +1,6 @@ import { describe, expect, test } from "bun:test" import type { Message, Part } from "@opencode-ai/sdk/v2/client" -import { applyOptimisticAdd, applyOptimisticRemove, mergeOptimisticPage } from "./sync" +import { applyOptimisticAdd, applyOptimisticRemove, mergeOptimisticPage } from "./directory-sync" type Text = Extract diff --git a/packages/app/src/context/sync.tsx b/packages/app/src/context/sync.tsx deleted file mode 100644 index 1734d717b397..000000000000 --- a/packages/app/src/context/sync.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import { Binary } from "@opencode-ai/core/util/binary" -import { useServerSync } from "./server-sync" -import { useSDK } from "./sdk" -import type { Message, Part } from "@opencode-ai/sdk/v2/client" - -const SKIP_PARTS = new Set(["patch", "step-start", "step-finish"]) - -function sortParts(parts: Part[]) { - return parts.filter((part) => !!part?.id).sort((a, b) => cmp(a.id, b.id)) -} - -const cmp = (a: string, b: string) => (a < b ? -1 : a > b ? 1 : 0) - -type OptimisticStore = { - message: Record - part: Record -} - -type OptimisticAddInput = { - sessionID: string - message: Message - parts: Part[] -} - -type OptimisticRemoveInput = { - sessionID: string - messageID: string -} - -type OptimisticItem = { - message: Message - parts: Part[] -} - -type MessagePage = { - session: Message[] - part: { id: string; part: Part[] }[] - cursor?: string - complete: boolean -} - -const hasParts = (parts: Part[] | undefined, want: Part[]) => { - if (!parts) return want.length === 0 - return want.every((part) => Binary.search(parts, part.id, (item) => item.id).found) -} - -const mergeParts = (parts: Part[] | undefined, want: Part[]) => { - if (!parts) return sortParts(want) - const next = [...parts] - let changed = false - for (const part of want) { - const result = Binary.search(next, part.id, (item) => item.id) - if (result.found) continue - next.splice(result.index, 0, part) - changed = true - } - if (!changed) return parts - return next -} - -export function mergeOptimisticPage(page: MessagePage, items: OptimisticItem[]) { - if (items.length === 0) return { ...page, confirmed: [] as string[] } - - const session = [...page.session] - const part = new Map(page.part.map((item) => [item.id, sortParts(item.part)])) - const confirmed: string[] = [] - - for (const item of items) { - const result = Binary.search(session, item.message.id, (message) => message.id) - const found = result.found - if (!found) session.splice(result.index, 0, item.message) - - const current = part.get(item.message.id) - if (found && hasParts(current, item.parts)) { - confirmed.push(item.message.id) - continue - } - - part.set(item.message.id, mergeParts(current, item.parts)) - } - - return { - cursor: page.cursor, - complete: page.complete, - session, - part: [...part.entries()].sort((a, b) => cmp(a[0], b[0])).map(([id, part]) => ({ id, part })), - confirmed, - } -} - -export function applyOptimisticAdd(draft: OptimisticStore, input: OptimisticAddInput) { - const messages = draft.message[input.sessionID] - if (messages) { - const result = Binary.search(messages, input.message.id, (m) => m.id) - messages.splice(result.index, 0, input.message) - } else { - draft.message[input.sessionID] = [input.message] - } - draft.part[input.message.id] = sortParts(input.parts) -} - -export function applyOptimisticRemove(draft: OptimisticStore, input: OptimisticRemoveInput) { - const messages = draft.message[input.sessionID] - if (messages) { - const result = Binary.search(messages, input.messageID, (m) => m.id) - if (result.found) messages.splice(result.index, 1) - } - delete draft.part[input.messageID] -} - -export const useSync = () => { - const serverSync = useServerSync() - const sdk = useSDK() - - return serverSync.createDirSyncContext(sdk.directory) -} diff --git a/packages/app/src/context/tabs.tsx b/packages/app/src/context/tabs.tsx index 32c11466466d..af4f6e246292 100644 --- a/packages/app/src/context/tabs.tsx +++ b/packages/app/src/context/tabs.tsx @@ -1,140 +1,175 @@ import { createSimpleContext } from "@opencode-ai/ui/context" import { createStore, produce } from "solid-js/store" +import { batch } from "solid-js" import { Persist, persisted } from "@/utils/persist" -import { ServerConnection, useServer } from "./server" -import { createEffect, startTransition } from "solid-js" -import { useNavigate, useParams } from "@solidjs/router" -import { SessionTabsRemovedDetail } from "@/components/titlebar-session-events" +import { useLocation, useNavigate } from "@solidjs/router" +import { draftHref, rootSession, sessionHref, sessionQuery } from "@/utils/v2-route" +import { uuid } from "@/utils/uuid" +import { useGlobal } from "./global" +import { ServerConnection } from "./server" +import { useQueryClient } from "@tanstack/solid-query" +import { DirectoryState } from "./directory" +import { usePlatform } from "./platform" export type SessionTab = { type: "session" server: ServerConnection.Key - dirBase64: string sessionId: string } -export type Tab = SessionTab +export type DraftTab = { + type: "draft" + draftID: string +} -export const tabHref = (tab: Tab) => `/${tab.dirBase64}/session/${tab.sessionId}` -export const tabKey = (tab: Tab) => `${tab.server}\n${tabHref(tab)}` +export type NewSessionDraft = { + server: ServerConnection.Key + directory: string + worktree?: string +} + +export type Tab = SessionTab | DraftTab + +type State = { + tabs: Tab[] + drafts: Record +} + +export const tabHref = (tab: Tab) => + tab.type === "draft" ? draftHref(tab.draftID) : sessionHref(tab.server, tab.sessionId) + +export const tabKey = (tab: Tab) => + tab.type === "draft" ? `draft:${tab.draftID}` : `session:${tab.server}:${tab.sessionId}` export const { use: useTabs, provider: TabsProvider } = createSimpleContext({ name: "Tabs", gate: false, init: () => { - const server = useServer() - const fallback = server.key + const global = useGlobal() + const navigate = useNavigate() + const location = useLocation() + const queryClient = useQueryClient() + const platform = usePlatform() const [store, setStore, _, ready] = persisted( - { - ...Persist.global("tabs"), - migrate: (value: unknown) => { - if (!Array.isArray(value)) return value - return value.map((tab) => { - if (!tab || typeof tab !== "object" || "server" in tab) return tab - return { ...tab, server: fallback } - }) - }, - }, - createStore([]), + Persist.global("tabs.v2"), + createStore({ tabs: [], drafts: {} }), ) - const params = useParams() - const navigate = useNavigate() - - const closing = new Set() - - createEffect(() => { - if (!ready()) return - const servers = new Set(server.list.map(ServerConnection.key)) - if (store.every((tab) => servers.has(tab.server))) return - setStore((tabs) => tabs.filter((tab) => servers.has(tab.server))) - }) + const addSession = (tab: Omit) => { + const next = { type: "session" as const, ...tab } + setStore( + "tabs", + produce((tabs) => { + if (!tabs.some((item) => tabKey(item) === tabKey(next))) tabs.push(next) + }), + ) + } - const navigateTab = (tab: Tab) => { - const href = tabHref(tab) - if (tab.server === server.key) { - navigate(href) - return - } - void startTransition(() => { - server.setActive(tab.server) - navigate(href) - }) + const navigateTab = (tab: Tab) => navigate(tabHref(tab)) + const adjacent = (tab: Tab, offset: number) => { + const index = store.tabs.findIndex((item) => tabKey(item) === tabKey(tab)) + const next = store.tabs[(index + offset + store.tabs.length) % store.tabs.length] + if (next) navigateTab(next) } - const actions = { - addSessionTab: (tab: Omit) => { - const next = { type: "session" as const, ...tab } - if (closing.has(tabKey(next))) return + return { + tabs: store.tabs, + drafts: store.drafts, + ready, + draft(draftID: string) { + const draft = store.drafts[draftID] + if (!draft) throw new Error(`Draft not found: ${draftID}`) + return draft + }, + href: tabHref, + admitSession: addSession, + select(index: number) { + const tab = store.tabs[index] + if (tab) navigateTab(tab) + }, + previous(tab: Tab) { + adjacent(tab, -1) + }, + next(tab: Tab) { + adjacent(tab, 1) + }, + openSession(server: ServerConnection.Key, sessionId: string) { + navigate(sessionHref(server, sessionId)) + const context = global.servers.get(server) + void queryClient + .ensureQueryData(sessionQuery(server, context.instance, context.sdk, sessionId)) + .then((locator) => + rootSession(locator.session, (id) => + queryClient.ensureQueryData(sessionQuery(server, context.instance, context.sdk, id)).then((result) => result.session), + ), + ) + .then((root) => addSession({ server, sessionId: root.id })) + .catch(() => undefined) + }, + newDraft(draft: NewSessionDraft, prompt?: string) { + const draftID = uuid() setStore( - produce((tabs) => { - if (tabs.some((item) => tabKey(item) === tabKey(next))) return - tabs.push(next) + produce((state) => { + state.drafts[draftID] = draft + state.tabs.push({ type: "draft", draftID }) }), ) + navigate(prompt ? `${draftHref(draftID)}&prompt=${encodeURIComponent(prompt)}` : draftHref(draftID)) }, - removeTab: (index: number) => { - const tab = store[index] - if (!tab) return - const key = tabKey(tab) - const nextTab = store[index + 1] ?? store[index - 1] - closing.add(key) - void startTransition(() => { + updateDraft(draftID: string, draft: Partial) { + setStore("drafts", draftID, (current) => ({ ...current, ...draft })) + }, + promoteDraft(draftID: string, session: Omit) { + const active = `${location.pathname}${location.search}` === draftHref(draftID) + batch(() => { setStore( - produce((tabs) => { - tabs.splice(index, 1) + produce((state) => { + const index = state.tabs.findIndex((tab) => tab.type === "draft" && tab.draftID === draftID) + if (index !== -1) state.tabs[index] = { type: "session", ...session } + delete state.drafts[draftID] }), ) - if (nextTab) navigateTab(nextTab) - else navigate("/") - }).finally(() => closing.delete(key)) - }, - removeServer(key: ServerConnection.Key) { - setStore((tabs) => tabs.filter((tab) => tab.server !== key)) - if (server.key === key) navigate("/") + if (active) navigate(sessionHref(session.server, session.sessionId)) + }) + DirectoryState.removeDraft(draftID, platform) }, - removeSessions: (input: SessionTabsRemovedDetail) => { - void startTransition(() => { + close(tab: Tab, active: boolean) { + const index = store.tabs.findIndex((item) => tabKey(item) === tabKey(tab)) + if (index === -1) return + const next = store.tabs[index + 1] ?? store.tabs[index - 1] + const draftID = tab.type === "draft" ? tab.draftID : undefined + batch(() => { setStore( - produce((tabs) => { - const sessionIDs = new Set(input.sessionIDs) - const currentHref = - params.dir && params.id - ? tabHref({ type: "session", server: server.key, dirBase64: params.dir, sessionId: params.id }) - : undefined - const currentIndex = currentHref - ? tabs.findIndex( - (tab) => tab.type === "session" && tab.server === server.key && tabHref(tab) === currentHref, - ) - : -1 - const currentTab = tabs[currentIndex] - const removedCurrent = - currentTab?.type === "session" && - currentTab.server === server.key && - atob(currentTab.dirBase64) === input.directory && - sessionIDs.has(currentTab.sessionId) - - for (let i = tabs.length - 1; i >= 0; i--) { - const tab = tabs[i] - if (!tab || tab.type !== "session") continue - if (tab.server !== server.key) continue - if (atob(tab.dirBase64) !== input.directory) continue - if (!sessionIDs.has(tab.sessionId)) continue - tabs.splice(i, 1) - } - - if (!removedCurrent) return - const nextTab = - tabs.slice(currentIndex).find((tab) => tab.type === "session") ?? - tabs.slice(0, currentIndex).findLast((tab) => tab.type === "session") - if (nextTab) navigateTab(nextTab) - else navigate("/") + produce((state) => { + const [tab] = state.tabs.splice(index, 1) + if (tab?.type === "draft") delete state.drafts[tab.draftID] }), ) + if (!active) return + if (next) navigateTab(next) + if (!next) navigate("/") }) + if (draftID) DirectoryState.removeDraft(draftID, platform) + }, + removeServer(key: ServerConnection.Key) { + const drafts = Object.entries(store.drafts).flatMap(([draftID, draft]) => (draft.server === key ? [draftID] : [])) + setStore( + produce((state) => { + for (const [draftID, draft] of Object.entries(state.drafts)) { + if (draft.server === key) delete state.drafts[draftID] + } + state.tabs = state.tabs.filter((tab) => + tab.type === "session" ? tab.server !== key : !!state.drafts[tab.draftID], + ) + }), + ) + for (const draftID of drafts) DirectoryState.removeDraft(draftID, platform) + }, + removeSessions(server: ServerConnection.Key, sessionIDs: Set) { + setStore("tabs", (tabs) => + tabs.filter((tab) => tab.type !== "session" || tab.server !== server || !sessionIDs.has(tab.sessionId)), + ) }, } - - return { ...actions, store, ready } }, }) diff --git a/packages/app/src/context/terminal.test.ts b/packages/app/src/context/terminal.test.ts index 4f16953c79dd..05db1126c1c0 100644 --- a/packages/app/src/context/terminal.test.ts +++ b/packages/app/src/context/terminal.test.ts @@ -9,6 +9,7 @@ beforeAll(async () => { mock.module("@solidjs/router", () => ({ useNavigate: () => () => undefined, useParams: () => ({}), + useSearchParams: () => [{}], })) mock.module("@opencode-ai/ui/context", () => ({ createSimpleContext: () => ({ diff --git a/packages/app/src/context/terminal.tsx b/packages/app/src/context/terminal.tsx index f15b76000ea6..2ad4a6fb072a 100644 --- a/packages/app/src/context/terminal.tsx +++ b/packages/app/src/context/terminal.tsx @@ -1,13 +1,13 @@ import { createStore, produce } from "solid-js/store" import { createSimpleContext } from "@opencode-ai/ui/context" -import { batch, createEffect, createMemo, createRoot, on, onCleanup } from "solid-js" -import { useParams } from "@solidjs/router" -import { useSDK } from "./sdk" +import { batch, createMemo, createRoot, onCleanup } from "solid-js" +import { useDirectory, useSDK, type DirectorySDK } from "@/context/directory" import type { Platform } from "./platform" -import { useServer } from "./server" +import { useServerContext } from "./server-context" import { defaultTitle, titleNumber } from "./terminal-title" import { Persist, persisted, removePersisted } from "@/utils/persist" import { ScopedKey, ServerScope, type ServerScope as ServerScopeValue } from "@/utils/server-scope" +import { createScopedCache } from "@/utils/scoped-cache" export type LocalPTY = { id: string @@ -100,7 +100,7 @@ type TerminalCacheEntry = { dispose: VoidFunction } -const caches = new Set>() +const caches = new Set<{ peek(key: ScopedKey): TerminalCacheEntry | undefined }>() const trimTerminal = (pty: LocalPTY) => { if (!pty.buffer && pty.cursor === undefined && pty.scrollY === undefined) return pty @@ -118,13 +118,14 @@ function terminalPersistTarget(scope: ServerScopeValue, dir: string, legacy?: st export function clearWorkspaceTerminals( dir: string, - sessionIDs?: string[], - platform?: Platform, - scope: ServerScopeValue = ServerScope.local, + sessionIDs: string[] | undefined, + platform: Platform | undefined, + scope: ServerScopeValue, + instance: string, ) { - const key = getWorkspaceTerminalCacheKey(dir, scope) + const key = ScopedKey.from(scope, instance, dir, WORKSPACE_KEY) for (const cache of caches) { - const entry = cache.get(key) + const entry = cache.peek(key) entry?.value.clear() } @@ -143,7 +144,7 @@ export function clearWorkspaceTerminals( } function createWorkspaceTerminalSession( - sdk: ReturnType, + sdk: DirectorySDK, dir: string, scope: ServerScopeValue, legacySessionID?: string, @@ -202,7 +203,7 @@ function createWorkspaceTerminalSession( }) onCleanup(unsub) - const update = (client: ReturnType["client"], pty: Partial & { id: string }) => { + const update = (client: DirectorySDK["client"], pty: Partial & { id: string }) => { const index = store.all.findIndex((x) => x.id === pty.id) const previous = index >= 0 ? store.all[index] : undefined if (index >= 0) { @@ -223,7 +224,7 @@ function createWorkspaceTerminalSession( }) } - const clone = async (client: ReturnType["client"], id: string) => { + const clone = async (client: DirectorySDK["client"], id: string) => { const index = store.all.findIndex((x) => x.id === id) const pty = store.all[index] if (!pty) return @@ -374,66 +375,44 @@ export const { use: useTerminal, provider: TerminalProvider } = createSimpleCont gate: false, init: () => { const sdk = useSDK() - const server = useServer() - const params = useParams() - const cache = new Map() - const scope = server.scope() + const directory = useDirectory() + const server = useServerContext() + const scope = () => server().scope + const cache = createScopedCache( + ( + _key: ScopedKey, + input: { dir: string; legacySessionID: string | undefined; serverScope: ServerScopeValue; instance: string }, + ) => + createRoot((dispose) => ({ + value: createWorkspaceTerminalSession(sdk(), input.dir, input.serverScope, input.legacySessionID), + dispose, + })), + { + maxEntries: MAX_TERMINAL_SESSIONS, + dispose: (entry) => entry.dispose(), + }, + ) caches.add(cache) onCleanup(() => caches.delete(cache)) - - const disposeAll = () => { - for (const entry of cache.values()) { - entry.dispose() - } - cache.clear() - } - - onCleanup(disposeAll) - - const prune = () => { - while (cache.size > MAX_TERMINAL_SESSIONS) { - const first = cache.keys().next().value - if (!first) return - const entry = cache.get(first) - entry?.dispose() - cache.delete(first) - } - } - - const loadWorkspace = (dir: string, legacySessionID: string | undefined, serverScope: ServerScopeValue) => { + onCleanup(() => cache.clear()) + + let activeKey: ScopedKey | undefined + const loadWorkspace = ( + dir: string, + legacySessionID: string | undefined, + serverScope: ServerScopeValue, + instance: string, + ) => { // Terminals are workspace-scoped so tabs persist while switching sessions in the same directory. - const key = getWorkspaceTerminalCacheKey(dir, serverScope) - const existing = cache.get(key) - if (existing) { - cache.delete(key) - cache.set(key, existing) - return existing.value - } - - const entry = createRoot((dispose) => ({ - value: createWorkspaceTerminalSession(sdk, dir, serverScope, legacySessionID), - dispose, - })) - - cache.set(key, entry) - prune() - return entry.value + const key = ScopedKey.from(serverScope, instance, dir, WORKSPACE_KEY) + if (activeKey && activeKey !== key) cache.peek(activeKey)?.value.trimAll() + activeKey = key + return cache.get(key, { dir, legacySessionID, serverScope, instance }).value } - const workspace = createMemo(() => loadWorkspace(params.dir!, params.id, scope)) - - createEffect( - on( - () => ({ dir: params.dir, id: params.id, scope }), - (next, prev) => { - if (!prev?.dir) return - if (next.dir === prev.dir && next.id === prev.id && next.scope === prev.scope) return - if (next.dir === prev.dir && next.id && next.scope === prev.scope) return - loadWorkspace(prev.dir, prev.id, prev.scope).trimAll() - }, - { defer: true }, - ), + const workspace = createMemo(() => + loadWorkspace(directory().directory, directory().sessionID, scope(), server().instance), ) return { diff --git a/packages/app/src/hooks/use-providers.ts b/packages/app/src/hooks/use-providers.ts index 922b4ae855c1..3d4a0d79bffb 100644 --- a/packages/app/src/hooks/use-providers.ts +++ b/packages/app/src/hooks/use-providers.ts @@ -1,8 +1,6 @@ -import { useServerSync } from "@/context/server-sync" -import { decode64 } from "@/utils/base64" -import { useParams } from "@solidjs/router" +import { useServerSync } from "@/context/server-context" import { Iterable, pipe } from "effect" -import { createMemo } from "solid-js" +import type { Accessor } from "solid-js" export const popularProviders = [ "opencode", @@ -16,16 +14,16 @@ export const popularProviders = [ ] const popularProviderSet = new Set(popularProviders) -export function useProviders() { +export function useProviders(directory?: Accessor) { const serverSync = useServerSync() - const params = useParams() - const dir = createMemo(() => decode64(params.dir) ?? "") const providers = () => { - if (dir()) { - const [projectStore] = serverSync.child(dir()) + const sync = serverSync() + const current = directory?.() + if (current) { + const [projectStore] = sync.child(current) if (projectStore.provider_ready) return projectStore.provider } - return serverSync.data.provider + return sync.data.provider } return { all: () => providers().all, diff --git a/packages/app/src/pages/directory-layout.tsx b/packages/app/src/pages/directory-layout.tsx index 2d0dfd81dc7b..0c1377f3cf40 100644 --- a/packages/app/src/pages/directory-layout.tsx +++ b/packages/app/src/pages/directory-layout.tsx @@ -2,42 +2,56 @@ import { DataProvider } from "@opencode-ai/ui/context" import { showToast } from "@/utils/toast" import { base64Encode } from "@opencode-ai/core/util/encode" import { useLocation, useNavigate, useParams } from "@solidjs/router" -import { createEffect, createMemo, createResource, type ParentProps, Show } from "solid-js" +import { createEffect, createMemo, type ParentProps, Show } from "solid-js" import { useLanguage } from "@/context/language" import { LocalProvider } from "@/context/local" -import { SDKProvider } from "@/context/sdk" -import { useSync } from "@/context/sync" +import { DirectoryProvider, useSync } from "@/context/directory" +import { NavigationProvider, useNavigation, type Navigation } from "@/context/navigation" import { decode64 } from "@/utils/base64" import { Schema } from "effect" -function DirectoryDataProvider(props: ParentProps<{ directory: string }>) { +export function DirectoryDataProvider(props: ParentProps<{ directory: string }>) { + const navigation = useNavigation() + const sync = useSync() + + return ( + navigation().openSession(sessionID)} + onSessionHref={(sessionID) => navigation().session(sessionID)} + > + {props.children} + + ) +} + +function LegacyDirectoryDataProvider(props: ParentProps<{ directory: string }>) { const location = useLocation() const navigate = useNavigate() - const params = useParams() const sync = useSync() const slug = createMemo(() => base64Encode(props.directory)) + const navigation = createMemo(() => ({ + session: (sessionID) => `/${slug()}/session/${sessionID}`, + newSession: () => navigate(`/${slug()}/session`), + openSession: (sessionID) => navigate(`/${slug()}/session/${sessionID}`), + selectDirectory: (directory) => navigate(`/${base64Encode(directory)}/session`), + created: (session) => navigate(`/${base64Encode(session.directory)}/session/${session.id}`), + })) createEffect(() => { - const next = sync.data.path.directory + const next = sync().data.path.directory if (!next || next === props.directory) return const path = location.pathname.slice(slug().length + 1) navigate(`/${base64Encode(next)}${path}${location.search}${location.hash}`, { replace: true }) }) - createResource( - () => params.id, - (id) => sync.session.sync(id).catch(() => {}), - ) - return ( - navigate(`/${slug()}/session/${sessionID}`)} - onSessionHref={(sessionID: string) => `/${slug()}/session/${sessionID}`} + - {props.children} - + {props.children} + ) } @@ -51,7 +65,7 @@ export function decodeDirectory(dir: string): ProjectDirString | undefined { } export default function Layout(props: ParentProps) { - const params = useParams() + const params = useParams<{ dir?: string; id?: string }>() const language = useLanguage() const navigate = useNavigate() let invalid = "" @@ -81,9 +95,13 @@ export default function Layout(props: ParentProps) { return ( {(resolved) => ( - - {props.children} - + resolved} + sessionID={() => params.id} + state={() => (params.id ? { type: "session", id: params.id } : { type: "workspace" })} + > + {props.children} + )} ) diff --git a/packages/app/src/pages/home.tsx b/packages/app/src/pages/home.tsx index b15e528a1ad9..69876309b903 100644 --- a/packages/app/src/pages/home.tsx +++ b/packages/app/src/pages/home.tsx @@ -1,5 +1,5 @@ import type { Session } from "@opencode-ai/sdk/v2/client" -import { batch, createEffect, createMemo, For, Match, on, onCleanup, onMount, Show, Switch } from "solid-js" +import { batch, createMemo, For, Match, onCleanup, onMount, Show, Switch } from "solid-js" import { makeEventListener } from "@solid-primitives/event-listener" import { createStore } from "solid-js/store" import { useQuery } from "@tanstack/solid-query" @@ -22,7 +22,7 @@ import { useDialog } from "@opencode-ai/ui/context/dialog" import { DialogSelectDirectory } from "@/components/dialog-select-directory" import { DialogSelectServer } from "@/components/dialog-select-server" import { ServerConnection, useServer } from "@/context/server" -import { useServerSync } from "@/context/server-sync" +import { useServerContext, useServerSync } from "@/context/server-context" import { useLanguage } from "@/context/language" import { useNotification } from "@/context/notification" import { usePermission } from "@/context/permission" @@ -31,8 +31,6 @@ import { displayName, getProjectAvatarSource, homeProjectDirectories, - homeProjectNavigation, - homeSessionServerStatus, type HomeProjectSelection, projectForSession, sortedRootSessions, @@ -44,8 +42,9 @@ import { messageAgentColor } from "@/utils/agent" import { sessionPermissionRequest } from "@/pages/session/composer/session-request-tree" import { useGlobal } from "@/context/global" import { useCommand } from "@/context/command" -import { useSettings } from "@/context/settings" import { ServerHealthIndicator } from "@/components/server/server-row" +import { useTabs } from "@/context/tabs" +import type { ServerContext } from "@/context/server-context" const HOME_SESSION_LIMIT = 15 const HOME_ROW_LAYOUT = @@ -62,7 +61,7 @@ type HomeSessionRecord = { projectName: string } -type HomeSessionSync = Pick, "child"> +type HomeSessionSync = Pick>, "child"> type HomeSessionGroup = { id: "today" | "yesterday" | "older" @@ -78,10 +77,8 @@ const HOME_SEARCH_RESULT_TITLE = const HOME_SEARCH_RESULT_META = "min-w-0 flex-[1_1_auto] overflow-hidden text-ellipsis whitespace-nowrap text-[13px] leading-4 tracking-[-0.04px] text-v2-text-text-muted [font-weight:440]" -let pendingHomeNavigation: { server: ServerConnection.Key; href: string } | undefined - function buildHomeSessionRecords(input: { - sync: Pick, "child"> + sync: HomeSessionSync projectDirectories: () => string[] projects: () => LocalProject[] projectByID: () => Map @@ -112,41 +109,31 @@ function matchesHomeSessionSearch(record: HomeSessionRecord, query: string) { function createHomeSessionStatus(input: { record: () => HomeSessionRecord - sync: () => HomeSessionSync - activeServer: () => boolean + server: () => ServerContext }) { const notification = useNotification() const permission = usePermission() - const sessionStore = createMemo(() => input.sync().child(input.record().session.directory, { bootstrap: false })[0]) - const unseenCount = createMemo(() => - input.activeServer() ? notification.session.unseenCount(input.record().session.id) : 0, - ) - const hasError = createMemo( - () => input.activeServer() && notification.session.unseenHasError(input.record().session.id), - ) + const sessionStore = createMemo(() => input.server().sync.child(input.record().session.directory, { bootstrap: false })[0]) + const notifications = () => notification.forServer(input.server()) + const permissions = () => permission.forServer(input.server()) + const unseenCount = createMemo(() => notifications().session.unseenCount(input.record().session.id)) + const hasError = createMemo(() => notifications().session.unseenHasError(input.record().session.id)) const hasPermissions = createMemo( () => - input.activeServer() && !!sessionPermissionRequest( sessionStore().session, sessionStore().permission, input.record().session.id, (item) => { - return !permission.autoResponds(item, input.record().session.directory) + return !permissions().autoResponds(item, input.record().session.directory) }, ), ) - const serverStatus = createMemo(() => - homeSessionServerStatus(input.activeServer(), () => ({ - working: sessionStore().session_working(input.record().session.id), - tint: messageAgentColor(sessionStore().message[input.record().session.id], sessionStore().agent), - })), - ) const isWorking = createMemo(() => { if (hasPermissions()) return false - return serverStatus().working + return sessionStore().session_working(input.record().session.id) }) - const tint = createMemo(() => serverStatus().tint) + const tint = createMemo(() => messageAgentColor(sessionStore().message[input.record().session.id], sessionStore().agent)) return { unseenCount, hasError, @@ -161,44 +148,37 @@ function homeSessionSearchKey(record: HomeSessionRecord) { return `${pathKey(record.session.directory)}:${record.session.id}` } -export default function Home() { - const settings = useSettings() - return ( - }> - - - ) -} - -function HomeDesign() { - const sync = useServerSync() - const layout = useLayout() +export function V2Home() { + const server = useServerContext() const platform = usePlatform() const dialog = useDialog() - const navigate = useNavigate() - const server = useServer() const language = useLanguage() const global = useGlobal() const command = useCommand() const notification = useNotification() + const tabs = useTabs() let focusSessionSearch: (() => void) | undefined const [state, setState] = createStore({ search: "", - selection: { server: server.key } as HomeProjectSelection, + selection: { server: server().key } as HomeProjectSelection, searchFocused: false, }) + const selection = createMemo(() => { + if (global.servers.list().some((conn) => ServerConnection.key(conn) === state.selection.server)) return state.selection + return { server: server().key } + }) const focusedServer = createMemo( - () => global.servers.list().find((conn) => ServerConnection.key(conn) === state.selection.server) ?? server.current, + () => global.servers.list().find((conn) => ServerConnection.key(conn) === selection().server) ?? server().connection, ) const focusedServerCtx = createMemo(() => { const conn = focusedServer() if (!conn) return return global.createServerCtx(conn) }) - const focusedSync = () => focusedServerCtx()?.sync ?? sync - const projects = createMemo(() => focusedServerCtx()?.projects.list() ?? layout.projects.list()) - const selectedProject = createMemo(() => projects().find((project) => project.worktree === state.selection.directory)) + const focusedSync = () => focusedServerCtx()?.sync ?? server().sync + const projects = createMemo(() => focusedServerCtx()?.projects.list() ?? server().projects.list()) + const selectedProject = createMemo(() => projects().find((project) => project.worktree === selection().directory)) const newSessionProject = createMemo( () => selectedProject() ?? @@ -213,7 +193,7 @@ function HomeDesign() { }) const search = createMemo(() => state.search.trim()) const sessionLoad = useQuery(() => ({ - queryKey: ["home", "sessions", state.selection.server, ...projectDirectories()] as const, + queryKey: ["home", "sessions", selection().server, ...projectDirectories()] as const, queryFn: async () => { await Promise.all(projectDirectories().map((directory) => focusedSync().project.loadSessions(directory))) return null @@ -267,20 +247,6 @@ function HomeDesign() { }, ]) - createEffect(() => { - const list = global.servers.list() - if (list.some((conn) => ServerConnection.key(conn) === state.selection.server)) return - const conn = list.find((conn) => ServerConnection.key(conn) === server.key) ?? list[0] - if (conn) setSelection({ server: ServerConnection.key(conn) }) - }) - - createEffect(() => { - const pending = pendingHomeNavigation - if (!pending || pending.server !== server.key) return - pendingHomeNavigation = undefined - navigate(pending.href) - }) - function focusServer(conn: ServerConnection.Any) { setSelection({ server: ServerConnection.key(conn) }) } @@ -294,7 +260,7 @@ function HomeDesign() { .some((project) => project.worktree === directory) ) return - setSelection(toggleHomeProjectSelection(state.selection, key, directory)) + setSelection(toggleHomeProjectSelection(selection(), key, directory)) } function addProjects(conn: ServerConnection.Any, directories: string[]) { @@ -313,21 +279,11 @@ function HomeDesign() { openProjectNewSession(conn, project.worktree) } - function navigateOnServer(conn: ServerConnection.Any, href: string) { - const next = homeProjectNavigation(server.key, ServerConnection.key(conn), href) - if (!next.server) { - navigate(next.href) - return - } - pendingHomeNavigation = next - server.setActive(next.server) - } - function openProjectNewSession(conn: ServerConnection.Any, directory: string) { const ctx = global.createServerCtx(conn) ctx.projects.open(directory) ctx.projects.touch(directory) - navigateOnServer(conn, `/${base64Encode(directory)}/session`) + tabs.newDraft({ server: ServerConnection.key(conn), directory }) } function editProject(conn: ServerConnection.Any, project: LocalProject) { @@ -337,12 +293,12 @@ function HomeDesign() { } function unseenCount(conn: ServerConnection.Any, project: LocalProject) { - if (ServerConnection.key(conn) !== server.key) return 0 + if (ServerConnection.key(conn) !== server().key) return 0 return directories(project).reduce((total, directory) => total + notification.project.unseenCount(directory), 0) } function clearNotifications(conn: ServerConnection.Any, project: LocalProject) { - if (ServerConnection.key(conn) !== server.key) return + if (ServerConnection.key(conn) !== server().key) return directories(project) .filter((directory) => notification.project.unseenCount(directory) > 0) .forEach((directory) => notification.project.markViewed(directory)) @@ -356,7 +312,7 @@ function HomeDesign() { const ctx = global.createServerCtx(conn) ctx.projects.open(directory) ctx.projects.touch(directory) - navigateOnServer(conn, `/${base64Encode(session.directory)}/session/${session.id}`) + tabs.openSession(ServerConnection.key(conn), session.id) } async function chooseProject(conn: ServerConnection.Any) { @@ -392,7 +348,7 @@ function HomeDesign() {
{ const next = closeHomeProject( - state.selection, + selection(), ServerConnection.key(conn), global.createServerCtx(conn).projects, directory, @@ -421,8 +377,7 @@ function HomeDesign() { open={searchOpen()} loading={sessionLoad.isLoading} results={searchResults()} - sync={focusedSync()} - activeServer={state.selection.server === server.key} + server={focusedServerCtx()!} noResultsLabel={language.t("home.sessions.search.noResults", { query: search() })} bindFocus={(focus) => { focusSessionSearch = focus @@ -461,8 +416,7 @@ function HomeDesign() { {(record) => ( )} @@ -711,8 +665,7 @@ function HomeSessionSearch(props: { open: boolean loading: boolean results: HomeSessionRecord[] - sync: HomeSessionSync - activeServer: boolean + server: ServerContext noResultsLabel: string bindFocus: (focus: () => void) => void onInput: (value: string) => void @@ -735,27 +688,14 @@ function HomeSessionSearch(props: { props.bindFocus(focusInput) }) - const syncActive = (results: HomeSessionRecord[]) => { - if (results.length === 0) { - setStore("active", "") - return - } - if (!results.some((record) => homeSessionSearchKey(record) === store.active)) { - setStore("active", homeSessionSearchKey(results[0])) - } - } - - createEffect(() => syncActive(props.results)) - - createEffect( - on( - () => props.value, - () => syncActive(props.results), - ), - ) + const active = createMemo(() => { + if (props.results.some((record) => homeSessionSearchKey(record) === store.active)) return store.active + const first = props.results[0] + return first ? homeSessionSearchKey(first) : "" + }) const scrollActiveIntoView = () => { - const key = store.active + const key = active() if (!key || !listRef) return const element = listRef.querySelector(`[data-key="${key}"]`) element?.scrollIntoView({ block: "nearest" }) @@ -764,7 +704,7 @@ function HomeSessionSearch(props: { const moveActive = (delta: number) => { const results = props.results if (results.length === 0) return - const index = results.findIndex((record) => homeSessionSearchKey(record) === store.active) + const index = results.findIndex((record) => homeSessionSearchKey(record) === active()) const start = index === -1 ? 0 : index const next = (start + delta + results.length) % results.length setStore("active", homeSessionSearchKey(results[next])) @@ -772,7 +712,7 @@ function HomeSessionSearch(props: { } const selectActive = () => { - const record = props.results.find((item) => homeSessionSearchKey(item) === store.active) + const record = props.results.find((item) => homeSessionSearchKey(item) === active()) if (!record) return props.onSelect(record.session) } @@ -827,9 +767,8 @@ function HomeSessionSearch(props: { {(record) => ( setStore("active", homeSessionSearchKey(record))} onSelect={(session) => props.onSelect(session)} /> @@ -862,7 +801,7 @@ function HomeSessionSearch(props: { aria-controls={HOME_SESSION_SEARCH_RESULTS_ID} aria-autocomplete="list" aria-activedescendant={ - store.active && props.open ? `home-session-search-option-${store.active}` : undefined + active() && props.open ? `home-session-search-option-${active()}` : undefined } onFocus={() => props.onFocus()} onInput={(event) => props.onInput(event.currentTarget.value)} @@ -913,16 +852,14 @@ function HomeSessionSearch(props: { function HomeSessionSearchResultRow(props: { record: HomeSessionRecord - sync: HomeSessionSync - activeServer: boolean + server: ServerContext selected: boolean onHighlight: () => void onSelect: (session: Session) => void }) { const status = createHomeSessionStatus({ record: () => props.record, - sync: () => props.sync, - activeServer: () => props.activeServer, + server: () => props.server, }) const title = createMemo(() => sessionTitle(props.record.session.title) || props.record.session.id) @@ -1010,14 +947,12 @@ function HomeSessionGroupHeader(props: { title: string; onNewSession?: () => voi function HomeSessionRow(props: { record: HomeSessionRecord - sync: HomeSessionSync - activeServer: boolean + server: ServerContext openSession: (session: Session) => void }) { const status = createHomeSessionStatus({ record: () => props.record, - sync: () => props.sync, - activeServer: () => props.activeServer, + server: () => props.server, }) const title = createMemo(() => sessionTitle(props.record.session.title) || props.record.session.id) @@ -1108,7 +1043,7 @@ function groupSessions(records: HomeSessionRecord[], language: ReturnType group.sessions.length > 0) } -function LegacyHome() { +export function LegacyHome() { const sync = useServerSync() const platform = usePlatform() const dialog = useDialog() @@ -1116,9 +1051,9 @@ function LegacyHome() { const global = useGlobal() const server = useServer() const language = useLanguage() - const homedir = createMemo(() => sync.data.path.home) + const homedir = createMemo(() => sync().data.path.home) const recent = createMemo(() => { - return sync.data.project + return sync().data.project .slice() .sort((a, b) => (b.time.updated ?? b.time.created) - (a.time.updated ?? a.time.created)) .slice(0, 5) @@ -1184,7 +1119,7 @@ function LegacyHome() { {server.name} - 0}> + 0}>
{language.t("home.recentProjects")}
@@ -1211,7 +1146,7 @@ function LegacyHome() {
- +
{language.t("common.loading")}