From 025299f4407adb0bf4d46b7c033ed534c969bf07 Mon Sep 17 00:00:00 2001 From: Adam <2363879+adamdotdevin@users.noreply.github.com> Date: Mon, 23 Mar 2026 20:04:38 -0500 Subject: [PATCH] fix(app): dedupe startup requests, lazy load fonts --- packages/app/src/app.tsx | 6 +- .../components/dialog-connect-provider.tsx | 50 +++-- .../app/src/components/settings-general.tsx | 4 + packages/app/src/context/global-sync.tsx | 58 +++--- .../app/src/context/global-sync/bootstrap.ts | 189 +++++++++--------- packages/app/src/context/language.tsx | 13 +- packages/app/src/context/settings.tsx | 2 + packages/app/src/hooks/use-providers.ts | 2 +- packages/app/src/index.ts | 1 + packages/app/src/pages/directory-layout.tsx | 70 +++---- packages/app/src/utils/server-health.ts | 24 ++- .../desktop-electron/src/renderer/index.tsx | 20 +- packages/desktop/src/index.tsx | 19 +- packages/ui/src/components/font.tsx | 157 ++++++++------- 14 files changed, 357 insertions(+), 258 deletions(-) diff --git a/packages/app/src/app.tsx b/packages/app/src/app.tsx index 5822dc77e0..0eb5b4e9e0 100644 --- a/packages/app/src/app.tsx +++ b/packages/app/src/app.tsx @@ -32,7 +32,7 @@ import { FileProvider } from "@/context/file" import { GlobalSDKProvider } from "@/context/global-sdk" import { GlobalSyncProvider } from "@/context/global-sync" import { HighlightsProvider } from "@/context/highlights" -import { LanguageProvider, useLanguage } from "@/context/language" +import { LanguageProvider, type Locale, useLanguage } from "@/context/language" import { LayoutProvider } from "@/context/layout" import { ModelsProvider } from "@/context/models" import { NotificationProvider } from "@/context/notification" @@ -130,7 +130,7 @@ function RouterRoot(props: ParentProps<{ appChildren?: JSX.Element }>) { ) } -export function AppBaseProviders(props: ParentProps) { +export function AppBaseProviders(props: ParentProps<{ locale?: Locale }>) { return ( @@ -139,7 +139,7 @@ export function AppBaseProviders(props: ParentProps) { void window.api?.setTitlebar?.({ mode }) }} > - + }> diff --git a/packages/app/src/components/dialog-connect-provider.tsx b/packages/app/src/components/dialog-connect-provider.tsx index 734958dd58..e7eaa1fb29 100644 --- a/packages/app/src/components/dialog-connect-provider.tsx +++ b/packages/app/src/components/dialog-connect-provider.tsx @@ -1,4 +1,4 @@ -import type { ProviderAuthAuthorization } from "@opencode-ai/sdk/v2/client" +import type { ProviderAuthAuthorization, ProviderAuthMethod } from "@opencode-ai/sdk/v2/client" import { Button } from "@opencode-ai/ui/button" import { useDialog } from "@opencode-ai/ui/context/dialog" import { Dialog } from "@opencode-ai/ui/dialog" @@ -9,7 +9,7 @@ import { ProviderIcon } from "@opencode-ai/ui/provider-icon" import { Spinner } from "@opencode-ai/ui/spinner" import { TextField } from "@opencode-ai/ui/text-field" import { showToast } from "@opencode-ai/ui/toast" -import { createMemo, Match, onCleanup, onMount, Switch } from "solid-js" +import { createEffect, createMemo, createResource, Match, onCleanup, onMount, Switch } from "solid-js" import { createStore, produce } from "solid-js/store" import { Link } from "@/components/link" import { useGlobalSDK } from "@/context/global-sdk" @@ -34,15 +34,25 @@ export function DialogConnectProvider(props: { provider: string }) { }) const provider = createMemo(() => globalSync.data.provider.all.find((x) => x.id === props.provider)!) - const methods = createMemo( - () => - globalSync.data.provider_auth[props.provider] ?? [ - { - type: "api", - label: language.t("provider.connect.method.apiKey"), - }, - ], + const fallback = createMemo(() => [ + { + type: "api" as const, + label: language.t("provider.connect.method.apiKey"), + }, + ]) + const [auth] = createResource( + () => props.provider, + async () => { + const cached = globalSync.data.provider_auth[props.provider] + if (cached) return cached + const res = await globalSDK.client.provider.auth() + if (!alive.value) return fallback() + globalSync.set("provider_auth", res.data ?? {}) + return res.data?.[props.provider] ?? fallback() + }, ) + const loading = createMemo(() => auth.loading && !globalSync.data.provider_auth[props.provider]) + const methods = createMemo(() => auth.latest ?? globalSync.data.provider_auth[props.provider] ?? fallback()) const [store, setStore] = createStore({ methodIndex: undefined as undefined | number, authorization: undefined as undefined | ProviderAuthAuthorization, @@ -177,7 +187,11 @@ export function DialogConnectProvider(props: { provider: string }) { index: 0, }) - const prompts = createMemo(() => method()?.prompts ?? []) + const prompts = createMemo>(() => { + const value = method() + if (value?.type !== "oauth") return [] + return value.prompts ?? [] + }) const matches = (prompt: NonNullable[number]>, value: Record) => { if (!prompt.when) return true const actual = value[prompt.when.key] @@ -296,8 +310,12 @@ export function DialogConnectProvider(props: { provider: string }) { listRef?.onKeyDown(e) } - onMount(() => { + let auto = false + createEffect(() => { + if (auto) return + if (loading()) return if (methods().length === 1) { + auto = true selectMethod(0) } }) @@ -573,6 +591,14 @@ export function DialogConnectProvider(props: { provider: string }) {
+ +
+
+ + {language.t("provider.connect.status.inProgress")} +
+
+ diff --git a/packages/app/src/components/settings-general.tsx b/packages/app/src/components/settings-general.tsx index ac50286cf8..6eeb3633d6 100644 --- a/packages/app/src/components/settings-general.tsx +++ b/packages/app/src/components/settings-general.tsx @@ -1,6 +1,7 @@ import { Component, Show, createMemo, createResource, onMount, type JSX } from "solid-js" import { createStore } from "solid-js/store" import { Button } from "@opencode-ai/ui/button" +import { ensureMonoFont } from "@opencode-ai/ui/font" import { Icon } from "@opencode-ai/ui/icon" import { Select } from "@opencode-ai/ui/select" import { Switch } from "@opencode-ai/ui/switch" @@ -337,6 +338,9 @@ export const SettingsGeneral: Component = () => { current={fontOptionsList.find((o) => o.value === settings.appearance.font())} value={(o) => o.value} label={(o) => language.t(o.label)} + onHighlight={(option) => { + void ensureMonoFont(option?.value) + }} onSelect={(option) => option && settings.appearance.setFont(option.value)} variant="secondary" size="small" diff --git a/packages/app/src/context/global-sync.tsx b/packages/app/src/context/global-sync.tsx index 2d1e501353..cbd08e99f5 100644 --- a/packages/app/src/context/global-sync.tsx +++ b/packages/app/src/context/global-sync.tsx @@ -9,17 +9,7 @@ import type { } from "@opencode-ai/sdk/v2/client" import { showToast } from "@opencode-ai/ui/toast" import { getFilename } from "@opencode-ai/util/path" -import { - createContext, - getOwner, - Match, - onCleanup, - onMount, - type ParentProps, - Switch, - untrack, - useContext, -} from "solid-js" +import { createContext, getOwner, onCleanup, onMount, type ParentProps, untrack, useContext } from "solid-js" import { createStore, produce, reconcile } from "solid-js/store" import { useLanguage } from "@/context/language" import { Persist, persisted } from "@/utils/persist" @@ -80,6 +70,8 @@ function createGlobalSync() { let active = true let projectWritten = false + let bootedAt = 0 + let bootingRoot = false onCleanup(() => { active = false @@ -258,6 +250,11 @@ function createGlobalSync() { const sdk = sdkFor(directory) await bootstrapDirectory({ directory, + global: { + config: globalStore.config, + project: globalStore.project, + provider: globalStore.provider, + }, sdk, store: child[0], setStore: child[1], @@ -278,15 +275,20 @@ function createGlobalSync() { const unsub = globalSDK.event.listen((e) => { const directory = e.name const event = e.details + const recent = bootingRoot || Date.now() - bootedAt < 1500 if (directory === "global") { applyGlobalEvent({ event, project: globalStore.project, - refresh: queue.refresh, + refresh: () => { + if (recent) return + queue.refresh() + }, setGlobalProject: setProjects, }) if (event.type === "server.connected" || event.type === "global.disposed") { + if (recent) return for (const directory of Object.keys(children.children)) { queue.push(directory) } @@ -325,17 +327,19 @@ function createGlobalSync() { }) async function bootstrap() { - await bootstrapGlobal({ - globalSDK: globalSDK.client, - connectErrorTitle: language.t("dialog.server.add.error"), - connectErrorDescription: language.t("error.globalSync.connectFailed", { - url: globalSDK.url, - }), - requestFailedTitle: language.t("common.requestFailed"), - translate: language.t, - formatMoreCount: (count) => language.t("common.moreCountSuffix", { count }), - setGlobalStore: setBootStore, - }) + bootingRoot = true + try { + await bootstrapGlobal({ + globalSDK: globalSDK.client, + requestFailedTitle: language.t("common.requestFailed"), + translate: language.t, + formatMoreCount: (count) => language.t("common.moreCountSuffix", { count }), + setGlobalStore: setBootStore, + }) + bootedAt = Date.now() + } finally { + bootingRoot = false + } } onMount(() => { @@ -392,13 +396,7 @@ const GlobalSyncContext = createContext>() export function GlobalSyncProvider(props: ParentProps) { const value = createGlobalSync() - return ( - - - {props.children} - - - ) + return {props.children} } export function useGlobalSync() { diff --git a/packages/app/src/context/global-sync/bootstrap.ts b/packages/app/src/context/global-sync/bootstrap.ts index 13494b7ade..c795ab471c 100644 --- a/packages/app/src/context/global-sync/bootstrap.ts +++ b/packages/app/src/context/global-sync/bootstrap.ts @@ -33,27 +33,11 @@ type GlobalStore = { export async function bootstrapGlobal(input: { globalSDK: OpencodeClient - connectErrorTitle: string - connectErrorDescription: string requestFailedTitle: string translate: (key: string, vars?: Record) => string formatMoreCount: (count: number) => string setGlobalStore: SetStoreFunction }) { - const health = await input.globalSDK.global - .health() - .then((x) => x.data) - .catch(() => undefined) - if (!health?.healthy) { - showToast({ - variant: "error", - title: input.connectErrorTitle, - description: input.connectErrorDescription, - }) - input.setGlobalStore("ready", true) - return - } - const tasks = [ retry(() => input.globalSDK.path.get().then((x) => { @@ -80,11 +64,6 @@ export async function bootstrapGlobal(input: { input.setGlobalStore("provider", normalizeProviderList(x.data!)) }), ), - retry(() => - input.globalSDK.provider.auth().then((x) => { - input.setGlobalStore("provider_auth", x.data ?? {}) - }), - ), ] const results = await Promise.allSettled(tasks) @@ -111,6 +90,10 @@ function groupBySession(input: T[]) }, {}) } +function projectID(directory: string, projects: Project[]) { + return projects.find((project) => project.worktree === directory || project.sandboxes?.includes(directory))?.id +} + export async function bootstrapDirectory(input: { directory: string sdk: OpencodeClient @@ -119,88 +102,112 @@ export async function bootstrapDirectory(input: { vcsCache: VcsCache loadSessions: (directory: string) => Promise | void translate: (key: string, vars?: Record) => string + global: { + config: Config + project: Project[] + provider: ProviderListResponse + } }) { - if (input.store.status !== "complete") input.setStore("status", "loading") + const loading = input.store.status !== "complete" + const seededProject = projectID(input.directory, input.global.project) + if (seededProject) input.setStore("project", seededProject) + if (input.store.provider.all.length === 0 && input.global.provider.all.length > 0) { + input.setStore("provider", input.global.provider) + } + if (Object.keys(input.store.config).length === 0 && Object.keys(input.global.config).length > 0) { + input.setStore("config", input.global.config) + } + if (loading) input.setStore("status", "partial") - const blockingRequests = { - project: () => input.sdk.project.current().then((x) => input.setStore("project", x.data!.id)), - provider: () => + const results = await Promise.allSettled([ + seededProject + ? Promise.resolve() + : retry(() => input.sdk.project.current()).then((x) => input.setStore("project", x.data!.id)), + retry(() => input.sdk.provider.list().then((x) => { input.setStore("provider", normalizeProviderList(x.data!)) }), - agent: () => input.sdk.app.agents().then((x) => input.setStore("agent", x.data ?? [])), - config: () => input.sdk.config.get().then((x) => input.setStore("config", x.data!)), - } + ), + retry(() => input.sdk.app.agents().then((x) => input.setStore("agent", x.data ?? []))), + retry(() => input.sdk.config.get().then((x) => input.setStore("config", x.data!))), + retry(() => + input.sdk.path.get().then((x) => { + input.setStore("path", x.data!) + const next = projectID(x.data?.directory ?? input.directory, input.global.project) + if (next) input.setStore("project", next) + }), + ), + retry(() => input.sdk.command.list().then((x) => input.setStore("command", x.data ?? []))), + retry(() => input.sdk.session.status().then((x) => input.setStore("session_status", x.data!))), + input.loadSessions(input.directory), + retry(() => input.sdk.mcp.status().then((x) => input.setStore("mcp", x.data!))), + retry(() => input.sdk.lsp.status().then((x) => input.setStore("lsp", x.data!))), + retry(() => + input.sdk.vcs.get().then((x) => { + const next = x.data ?? input.store.vcs + input.setStore("vcs", next) + if (next?.branch) input.vcsCache.setStore("value", next) + }), + ), + retry(() => + input.sdk.permission.list().then((x) => { + const grouped = groupBySession( + (x.data ?? []).filter((perm): perm is PermissionRequest => !!perm?.id && !!perm.sessionID), + ) + batch(() => { + for (const sessionID of Object.keys(input.store.permission)) { + if (grouped[sessionID]) continue + input.setStore("permission", sessionID, []) + } + for (const [sessionID, permissions] of Object.entries(grouped)) { + input.setStore( + "permission", + sessionID, + reconcile( + permissions.filter((p) => !!p?.id).sort((a, b) => cmp(a.id, b.id)), + { key: "id" }, + ), + ) + } + }) + }), + ), + retry(() => + input.sdk.question.list().then((x) => { + const grouped = groupBySession((x.data ?? []).filter((q): q is QuestionRequest => !!q?.id && !!q.sessionID)) + batch(() => { + for (const sessionID of Object.keys(input.store.question)) { + if (grouped[sessionID]) continue + input.setStore("question", sessionID, []) + } + for (const [sessionID, questions] of Object.entries(grouped)) { + input.setStore( + "question", + sessionID, + reconcile( + questions.filter((q) => !!q?.id).sort((a, b) => cmp(a.id, b.id)), + { key: "id" }, + ), + ) + } + }) + }), + ), + ]) - try { - await Promise.all(Object.values(blockingRequests).map((p) => retry(p))) - } catch (err) { - console.error("Failed to bootstrap instance", err) + const errors = results + .filter((item): item is PromiseRejectedResult => item.status === "rejected") + .map((item) => item.reason) + if (errors.length > 0) { + console.error("Failed to bootstrap instance", errors[0]) const project = getFilename(input.directory) showToast({ variant: "error", title: input.translate("toast.project.reloadFailed.title", { project }), - description: formatServerError(err, input.translate), + description: formatServerError(errors[0], input.translate), }) - input.setStore("status", "partial") return } - if (input.store.status !== "complete") input.setStore("status", "partial") - - Promise.all([ - input.sdk.path.get().then((x) => input.setStore("path", x.data!)), - input.sdk.command.list().then((x) => input.setStore("command", x.data ?? [])), - input.sdk.session.status().then((x) => input.setStore("session_status", x.data!)), - input.loadSessions(input.directory), - input.sdk.mcp.status().then((x) => input.setStore("mcp", x.data!)), - input.sdk.lsp.status().then((x) => input.setStore("lsp", x.data!)), - input.sdk.vcs.get().then((x) => { - const next = x.data ?? input.store.vcs - input.setStore("vcs", next) - if (next?.branch) input.vcsCache.setStore("value", next) - }), - input.sdk.permission.list().then((x) => { - const grouped = groupBySession( - (x.data ?? []).filter((perm): perm is PermissionRequest => !!perm?.id && !!perm.sessionID), - ) - batch(() => { - for (const sessionID of Object.keys(input.store.permission)) { - if (grouped[sessionID]) continue - input.setStore("permission", sessionID, []) - } - for (const [sessionID, permissions] of Object.entries(grouped)) { - input.setStore( - "permission", - sessionID, - reconcile( - permissions.filter((p) => !!p?.id).sort((a, b) => cmp(a.id, b.id)), - { key: "id" }, - ), - ) - } - }) - }), - input.sdk.question.list().then((x) => { - const grouped = groupBySession((x.data ?? []).filter((q): q is QuestionRequest => !!q?.id && !!q.sessionID)) - batch(() => { - for (const sessionID of Object.keys(input.store.question)) { - if (grouped[sessionID]) continue - input.setStore("question", sessionID, []) - } - for (const [sessionID, questions] of Object.entries(grouped)) { - input.setStore( - "question", - sessionID, - reconcile( - questions.filter((q) => !!q?.id).sort((a, b) => cmp(a.id, b.id)), - { key: "id" }, - ), - ) - } - }) - }), - ]).then(() => { - input.setStore("status", "complete") - }) + if (loading) input.setStore("status", "complete") } diff --git a/packages/app/src/context/language.tsx b/packages/app/src/context/language.tsx index 65ee336005..51dc09cd7d 100644 --- a/packages/app/src/context/language.tsx +++ b/packages/app/src/context/language.tsx @@ -129,6 +129,10 @@ function loadDict(locale: Locale) { }) } +export function loadLocaleDict(locale: Locale) { + return loadDict(locale).then(() => undefined) +} + const localeMatchers: Array<{ locale: Locale; match: (language: string) => boolean }> = [ { locale: "en", match: (language) => language.startsWith("en") }, { locale: "zht", match: (language) => language.startsWith("zh") && language.includes("hant") }, @@ -166,7 +170,7 @@ function detectLocale(): Locale { return "en" } -function normalizeLocale(value: string): Locale { +export function normalizeLocale(value: string): Locale { return LOCALES.includes(value as Locale) ? (value as Locale) : "en" } @@ -188,11 +192,12 @@ if (warm !== "en") void loadDict(warm) export const { use: useLanguage, provider: LanguageProvider } = createSimpleContext({ name: "Language", - init: () => { + init: (props: { locale?: Locale }) => { + const initial = props.locale ?? readStoredLocale() ?? detectLocale() const [store, setStore, _, ready] = persisted( Persist.global("language", ["language.v1"]), createStore({ - locale: detectLocale() as Locale, + locale: initial, }), ) @@ -200,7 +205,7 @@ export const { use: useLanguage, provider: LanguageProvider } = createSimpleCont const intl = createMemo(() => INTL[locale()]) const [dict] = createResource(locale, loadDict, { - initialValue: base, + initialValue: dicts.get(initial) ?? base, }) const t = i18n.translator(() => dict() ?? base, i18n.resolveTemplate) as ( diff --git a/packages/app/src/context/settings.tsx b/packages/app/src/context/settings.tsx index 48788fe8ec..336b9291a9 100644 --- a/packages/app/src/context/settings.tsx +++ b/packages/app/src/context/settings.tsx @@ -1,6 +1,7 @@ import { createStore, reconcile } from "solid-js/store" import { createEffect, createMemo } from "solid-js" import { createSimpleContext } from "@opencode-ai/ui/context" +import { ensureMonoFont } from "@opencode-ai/ui/font" import { persisted } from "@/utils/persist" export interface NotificationSettings { @@ -111,6 +112,7 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont createEffect(() => { if (typeof document === "undefined") return + void ensureMonoFont(store.appearance?.font) document.documentElement.style.setProperty("--font-family-mono", monoFontFamily(store.appearance?.font)) }) diff --git a/packages/app/src/hooks/use-providers.ts b/packages/app/src/hooks/use-providers.ts index a25f8b4b25..a8f2360bbf 100644 --- a/packages/app/src/hooks/use-providers.ts +++ b/packages/app/src/hooks/use-providers.ts @@ -22,7 +22,7 @@ export function useProviders() { const providers = () => { if (dir()) { const [projectStore] = globalSync.child(dir()) - return projectStore.provider + if (projectStore.provider.all.length > 0) return projectStore.provider } return globalSync.data.provider } diff --git a/packages/app/src/index.ts b/packages/app/src/index.ts index 53063f48f8..d80e9fffb0 100644 --- a/packages/app/src/index.ts +++ b/packages/app/src/index.ts @@ -1,6 +1,7 @@ export { AppBaseProviders, AppInterface } from "./app" export { ACCEPTED_FILE_EXTENSIONS, ACCEPTED_FILE_TYPES, filePickerFilters } from "./constants/file-picker" export { useCommand } from "./context/command" +export { loadLocaleDict, normalizeLocale, type Locale } from "./context/language" export { type DisplayBackend, type Platform, PlatformProvider } from "./context/platform" export { ServerConnection } from "./context/server" export { handleNotificationClick } from "./utils/notification-click" diff --git a/packages/app/src/pages/directory-layout.tsx b/packages/app/src/pages/directory-layout.tsx index cd5e079a69..6d3b04be9d 100644 --- a/packages/app/src/pages/directory-layout.tsx +++ b/packages/app/src/pages/directory-layout.tsx @@ -2,8 +2,7 @@ import { DataProvider } from "@opencode-ai/ui/context" import { showToast } from "@opencode-ai/ui/toast" import { base64Encode } from "@opencode-ai/util/encode" import { useLocation, useNavigate, useParams } from "@solidjs/router" -import { createMemo, createResource, type ParentProps, Show } from "solid-js" -import { useGlobalSDK } from "@/context/global-sdk" +import { createEffect, createMemo, type ParentProps, Show } from "solid-js" import { useLanguage } from "@/context/language" import { LocalProvider } from "@/context/local" import { SDKProvider } from "@/context/sdk" @@ -11,10 +10,18 @@ import { SyncProvider, useSync } from "@/context/sync" import { decode64 } from "@/utils/base64" function DirectoryDataProvider(props: ParentProps<{ directory: string }>) { + const location = useLocation() const navigate = useNavigate() const sync = useSync() const slug = createMemo(() => base64Encode(props.directory)) + createEffect(() => { + 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 }) + }) + return ( ) { export default function Layout(props: ParentProps) { const params = useParams() - const location = useLocation() const language = useLanguage() - const globalSDK = useGlobalSDK() const navigate = useNavigate() let invalid = "" - const [resolved] = createResource( - () => { - if (params.dir) return [location.pathname, params.dir] as const - }, - async ([pathname, b64Dir]) => { - const directory = decode64(b64Dir) + const resolved = createMemo(() => { + if (!params.dir) return "" + return decode64(params.dir) ?? "" + }) - if (!directory) { - if (invalid === params.dir) return - invalid = b64Dir - showToast({ - variant: "error", - title: language.t("common.requestFailed"), - description: language.t("directory.error.invalidUrl"), - }) - navigate("/", { replace: true }) - return - } - - return await globalSDK - .createClient({ - directory, - throwOnError: true, - }) - .path.get() - .then((x) => { - const next = x.data?.directory ?? directory - invalid = "" - if (next === directory) return next - const path = pathname.slice(b64Dir.length + 1) - navigate(`/${base64Encode(next)}${path}${location.search}${location.hash}`, { replace: true }) - }) - .catch(() => { - invalid = "" - return directory - }) - }, - ) + createEffect(() => { + const dir = params.dir + if (!dir) return + if (resolved()) { + invalid = "" + return + } + if (invalid === dir) return + invalid = dir + showToast({ + variant: "error", + title: language.t("common.requestFailed"), + description: language.t("directory.error.invalidUrl"), + }) + navigate("/", { replace: true }) + }) return ( diff --git a/packages/app/src/utils/server-health.ts b/packages/app/src/utils/server-health.ts index 45a323c7be..a13fd34ef7 100644 --- a/packages/app/src/utils/server-health.ts +++ b/packages/app/src/utils/server-health.ts @@ -14,6 +14,15 @@ interface CheckServerHealthOptions { const defaultTimeoutMs = 3000 const defaultRetryCount = 2 const defaultRetryDelayMs = 100 +const cacheMs = 750 +const healthCache = new Map< + string, + { at: number; done: boolean; fetch: typeof globalThis.fetch; promise: Promise } +>() + +function cacheKey(server: ServerConnection.HttpBase) { + return `${server.url}\n${server.username ?? ""}\n${server.password ?? ""}` +} function timeoutSignal(timeoutMs: number) { const timeout = (AbortSignal as unknown as { timeout?: (ms: number) => AbortSignal }).timeout @@ -87,5 +96,18 @@ export function useCheckServerHealth() { const platform = usePlatform() const fetcher = platform.fetch ?? globalThis.fetch - return (http: ServerConnection.HttpBase) => checkServerHealth(http, fetcher) + return (http: ServerConnection.HttpBase) => { + const key = cacheKey(http) + const hit = healthCache.get(key) + const now = Date.now() + if (hit && hit.fetch === fetcher && (!hit.done || now - hit.at < cacheMs)) return hit.promise + const promise = checkServerHealth(http, fetcher).finally(() => { + const next = healthCache.get(key) + if (!next || next.promise !== promise) return + next.done = true + next.at = Date.now() + }) + healthCache.set(key, { at: now, done: false, fetch: fetcher, promise }) + return promise + } } diff --git a/packages/desktop-electron/src/renderer/index.tsx b/packages/desktop-electron/src/renderer/index.tsx index ec2b4d1e7a..44f2e6360c 100644 --- a/packages/desktop-electron/src/renderer/index.tsx +++ b/packages/desktop-electron/src/renderer/index.tsx @@ -6,6 +6,9 @@ import { AppBaseProviders, AppInterface, handleNotificationClick, + loadLocaleDict, + normalizeLocale, + type Locale, type Platform, PlatformProvider, ServerConnection, @@ -246,6 +249,17 @@ listenForDeepLinks() render(() => { const platform = createPlatform() + const loadLocale = async () => { + const current = await platform.storage?.("opencode.global.dat").getItem("language") + const legacy = current ? undefined : await platform.storage?.().getItem("language.v1") + const raw = current ?? legacy + if (!raw) return + const locale = raw.match(/"locale"\s*:\s*"([^"]+)"/)?.[1] + if (!locale) return + const next = normalizeLocale(locale) + if (next !== "en") await loadLocaleDict(next) + return next satisfies Locale + } const [windowCount] = createResource(() => window.api.getWindowCount()) @@ -257,6 +271,7 @@ render(() => { if (url) return ServerConnection.key({ type: "http", http: { url } }) }), ) + const [locale] = createResource(loadLocale) const servers = () => { const data = sidecar() @@ -309,15 +324,14 @@ render(() => { return ( - - + + {(_) => { return ( 1} > diff --git a/packages/desktop/src/index.tsx b/packages/desktop/src/index.tsx index e677956440..5fe88d501b 100644 --- a/packages/desktop/src/index.tsx +++ b/packages/desktop/src/index.tsx @@ -6,6 +6,9 @@ import { AppBaseProviders, AppInterface, handleNotificationClick, + loadLocaleDict, + normalizeLocale, + type Locale, type Platform, PlatformProvider, ServerConnection, @@ -414,6 +417,17 @@ void listenForDeepLinks() render(() => { const platform = createPlatform() + const loadLocale = async () => { + const current = await platform.storage?.("opencode.global.dat").getItem("language") + const legacy = current ? undefined : await platform.storage?.().getItem("language.v1") + const raw = current ?? legacy + if (!raw) return + const locale = raw.match(/"locale"\s*:\s*"([^"]+)"/)?.[1] + if (!locale) return + const next = normalizeLocale(locale) + if (next !== "en") await loadLocaleDict(next) + return next satisfies Locale + } // Fetch sidecar credentials from Rust (available immediately, before health check) const [sidecar] = createResource(() => commands.awaitInitialization(new Channel() as any)) @@ -423,6 +437,7 @@ render(() => { if (url) return ServerConnection.key({ type: "http", http: { url } }) }), ) + const [locale] = createResource(loadLocale) // Build the sidecar server connection once credentials arrive const servers = () => { @@ -465,8 +480,8 @@ render(() => { return ( - - + + {(_) => { return ( Promise +> + export const MONO_NERD_FONTS = [ { + id: "jetbrains-mono", family: "JetBrains Mono Nerd Font", - regular: jetbrainsMono, - bold: jetbrainsMonoBold, + regular: "../assets/fonts/jetbrains-mono-nerd-font.woff2", + bold: "../assets/fonts/jetbrains-mono-nerd-font-bold.woff2", }, { + id: "fira-code", family: "Fira Code Nerd Font", - regular: firaCode, - bold: firaCodeBold, + regular: "../assets/fonts/fira-code-nerd-font.woff2", + bold: "../assets/fonts/fira-code-nerd-font-bold.woff2", }, { + id: "cascadia-code", family: "Cascadia Code Nerd Font", - regular: cascadiaCode, - bold: cascadiaCodeBold, + regular: "../assets/fonts/cascadia-code-nerd-font.woff2", + bold: "../assets/fonts/cascadia-code-nerd-font-bold.woff2", }, { + id: "hack", family: "Hack Nerd Font", - regular: hack, - bold: hackBold, + regular: "../assets/fonts/hack-nerd-font.woff2", + bold: "../assets/fonts/hack-nerd-font-bold.woff2", }, { + id: "source-code-pro", family: "Source Code Pro Nerd Font", - regular: sourceCodePro, - bold: sourceCodeProBold, + regular: "../assets/fonts/source-code-pro-nerd-font.woff2", + bold: "../assets/fonts/source-code-pro-nerd-font-bold.woff2", }, { + id: "inconsolata", family: "Inconsolata Nerd Font", - regular: inconsolata, - bold: inconsolataBold, + regular: "../assets/fonts/inconsolata-nerd-font.woff2", + bold: "../assets/fonts/inconsolata-nerd-font-bold.woff2", }, { + id: "roboto-mono", family: "Roboto Mono Nerd Font", - regular: robotoMono, - bold: robotoMonoBold, + regular: "../assets/fonts/roboto-mono-nerd-font.woff2", + bold: "../assets/fonts/roboto-mono-nerd-font-bold.woff2", }, { + id: "ubuntu-mono", family: "Ubuntu Mono Nerd Font", - regular: ubuntuMono, - bold: ubuntuMonoBold, + regular: "../assets/fonts/ubuntu-mono-nerd-font.woff2", + bold: "../assets/fonts/ubuntu-mono-nerd-font-bold.woff2", }, { + id: "intel-one-mono", family: "Intel One Mono Nerd Font", - regular: intelOneMono, - bold: intelOneMonoBold, + regular: "../assets/fonts/intel-one-mono-nerd-font.woff2", + bold: "../assets/fonts/intel-one-mono-nerd-font-bold.woff2", }, { + id: "meslo-lgs", family: "Meslo LGS Nerd Font", - regular: mesloLgs, - bold: mesloLgsBold, + regular: "../assets/fonts/meslo-lgs-nerd-font.woff2", + bold: "../assets/fonts/meslo-lgs-nerd-font-bold.woff2", }, { + id: "iosevka", family: "Iosevka Nerd Font", - regular: iosevka, - bold: iosevkaBold, + regular: "../assets/fonts/iosevka-nerd-font.woff2", + bold: "../assets/fonts/iosevka-nerd-font-bold.woff2", }, { + id: "geist-mono", family: "GeistMono Nerd Font", - regular: geistMono, - bold: geistMonoBold, + regular: "../assets/fonts/GeistMonoNerdFontMono-Regular.woff2", + bold: "../assets/fonts/GeistMonoNerdFontMono-Bold.woff2", }, ] satisfies MonoFont[] -const monoNerdCss = MONO_NERD_FONTS.map( - (font) => ` - @font-face { - font-family: "${font.family}"; - src: url("${font.regular}") format("woff2"); - font-display: swap; - font-style: normal; - font-weight: 400; - } - @font-face { - font-family: "${font.family}"; - src: url("${font.bold}") format("woff2"); - font-display: swap; - font-style: normal; - font-weight: 700; - }`, -).join("") +const mono = Object.fromEntries(MONO_NERD_FONTS.map((font) => [font.id, font])) as Record +const loads = new Map>() + +function css(font: { family: string; regular: string; bold: string }) { + return ` + @font-face { + font-family: "${font.family}"; + src: url("${font.regular}") format("woff2"); + font-display: swap; + font-style: normal; + font-weight: 400; + } + @font-face { + font-family: "${font.family}"; + src: url("${font.bold}") format("woff2"); + font-display: swap; + font-style: normal; + font-weight: 700; + } + ` +} + +export function ensureMonoFont(id: string | undefined) { + if (!id || id === "ibm-plex-mono") return Promise.resolve() + if (typeof document !== "object") return Promise.resolve() + const font = mono[id] + if (!font) return Promise.resolve() + const styleId = `oc-font-${font.id}` + if (document.getElementById(styleId)) return Promise.resolve() + const hit = loads.get(font.id) + if (hit) return hit + const load = Promise.all([files[font.regular]?.(), files[font.bold]?.()]).then(([regular, bold]) => { + if (!regular || !bold) return + if (document.getElementById(styleId)) return + const style = document.createElement("style") + style.id = styleId + style.textContent = css({ family: font.family, regular, bold }) + document.head.appendChild(style) + }) + loads.set(font.id, load) + return load +} export const Font = () => { return ( @@ -165,7 +183,6 @@ export const Font = () => { descent-override: 25%; line-gap-override: 1%; } -${monoNerdCss} `}