chore(gui-extensions): integrate the latest v2 changes

Keep upstream Git initialization, browser geometry transition tracking, unused-code cleanup and version updates while preserving typed composition, context properties and screen-owned extension models.
Hona · Oct 4, 2026 · Oct 2, 2026 · Oct 2, 2026 · Oct 2, 2026 · Oct 2, 2026
commit 2189ec15551fedf283aea95f2f4026830726f02d
@@ -36,7 +36,6 @@ import type {
   ComposerComment,
   ComposerFilePart,
   ComposerOption,
-  ComposerPersistedState,
   ComposerPrompt,
   ComposerSkillPart,
   ComposerSuggestion,

@@ -153,13 +153,13 @@ function EmbedView(props: EmbedProps & { input: Input; bridge: Bridge }) {
     if (placed !== id) hide()
     placed = id
 
-    const geometry = {
+    const box = {
       visible,
       bounds: { x: left, y: top, width: Math.max(0, right - left), height: Math.max(0, bottom - top) },
       radius: Math.round((props.radius ?? 0) * zoom),
     }
 
-    props.bridge.embed(id, rgba ? { ...geometry, background: [rgba[0], rgba[1], rgba[2], rgba[3]] as const } : geometry)
+    props.bridge.embed(id, rgba ? { ...box, background: [rgba[0], rgba[1], rgba[2], rgba[3]] as const } : box)
   }
 
   const tick = () => {

@@ -9,7 +9,6 @@ import {
   runWithOwner,
   untrack,
   type Accessor,
-  type Owner,
 } from "solid-js"
 import { createStore, produce, type Store } from "solid-js/store"
 import type { Schema } from "effect"

@@ -18,34 +18,8 @@ import { SettingsRow } from "@/settings/row"
 import { createShellOptions, type ShellSettingsController } from "./controllers"
 import "@/settings/settings.css"
 
-const schemeOptions: ("system" | "light" | "dark")[] = ["system", "light", "dark"]
-
 const tabLayoutOptions: ("horizontal" | "vertical")[] = ["horizontal", "vertical"]
 
-const fontSettings = {
-  ui: {
-    action: "settings-ui-font",
-    title: "settings.general.row.uiFont.title",
-    description: "settings.general.row.uiFont.description",
-    font: "ui",
-    input: "setUI",
-  },
-  code: {
-    action: "settings-code-font",
-    title: "settings.general.row.font.title",
-    description: "settings.general.row.font.description",
-    font: "code",
-    input: "setCode",
-  },
-  terminal: {
-    action: "settings-terminal-font",
-    title: "settings.general.row.terminalFont.title",
-    description: "settings.general.row.terminalFont.description",
-    font: "terminal",
-    input: "setTerminal",
-  },
-} as const
-
 const AutoApprovePermissionsSetting: Component = () => {
   const language = useLanguage()
   const settings = useSettings()
@@ -187,94 +161,6 @@ const FollowUpBehaviorSetting: Component = () => {
   )
 }
 
-const AppearanceSection: Component<{ controller: AppearanceSettingsController }> = (props) => {
-  const language = useLanguage()
-
-  return (
-    <div class="settings-section">
-      <h3 class="settings-section-title">{language.t("settings.general.section.appearance")}</h3>
-      <SettingsList>
-        <SettingsRow
-          title={language.t("settings.general.row.colorScheme.title")}
-          description={language.t("settings.general.row.colorScheme.description")}
-        >
-          <Select
-            data-action="settings-color-scheme"
-            options={schemeOptions}
-            current={schemeOptions.find((option) => option === props.controller.scheme.current())}
-            placement="bottom-end"
-            gutter={6}
-            label={(option) => {
-              if (option === "system") return language.t("theme.scheme.system")
-
-              if (option === "light") return language.t("theme.scheme.light")
-
-              return language.t("theme.scheme.dark")
-            }}
-            onSelect={(option) => option && props.controller.scheme.select(option)}
-          />
-        </SettingsRow>
-
-        <SettingsRow
-          title={language.t("settings.general.row.theme.title")}
-          description={
-            <>
-              {language.t("settings.general.row.theme.description")}{" "}
-              <ExternalLink class="settings-link" href="https://opencode.ai/docs/themes/">
-                {language.t("common.learnMore")}
-              </ExternalLink>
-            </>
-          }
-        >
-          <Select
-            data-action="settings-theme"
-            options={props.controller.theme.options()}
-            current={props.controller.theme.current()}
-            placement="bottom-end"
-            gutter={6}
-            value={(option) => option.id}
-            label={(option) => option.name}
-            onSelect={props.controller.theme.select}
-          />
-        </SettingsRow>
-
-        <FontSetting kind="ui" fonts={props.controller.fonts} />
-        <FontSetting kind="code" fonts={props.controller.fonts} />
-        <FontSetting kind="terminal" fonts={props.controller.fonts} />
-      </SettingsList>
-    </div>
-  )
-}
-
-const FontSetting: Component<{
-  kind: "ui" | "code" | "terminal"
-  fonts: AppearanceSettingsController["fonts"]
-}> = (props) => {
-  const language = useLanguage()
-  const config = () => fontSettings[props.kind]
-
-  return (
-    <SettingsRow title={language.t(config().title)} description={language.t(config().description)}>
-      <div class="w-full sm:w-[220px]">
-        <TextInput
-          data-action={config().action}
-          type="text"
-          appearance="base"
-          value={props.fonts[config().font]().value}
-          onInput={(event) => props.fonts[config().input](event.currentTarget.value)}
-          placeholder={props.fonts[config().font]().placeholder}
-          spellcheck={false}
-          autocorrect="off"
-          autocomplete="off"
-          autocapitalize="off"
-          aria-label={language.t(config().title)}
-          style={{ "font-family": props.fonts[config().font]().family }}
-        />
-      </div>
-    </SettingsRow>
-  )
-}
-
 const LanguageSetting = () => {
   const language = useLanguage()
 

@@ -15,7 +15,6 @@ import { displayName } from "@opencode/ui/project-avatar"
 import { resolveProjectForSession } from "@/shell/layout/helpers"
 import { useExtensionHost } from "@/runtime/extension/host"
 import { useExtensionAttachment } from "@/runtime/extension/host-apis"
-import { useServer } from "@/runtime/server/current"
 import { looksLikeSessionID } from "@/session/search"
 
 export type CommandPaletteEntry = {

diff --git a/packages/gui-extensions/src/review/model.ts b/packages/gui-extensions/src/review/model.ts
@@ -55,7 +55,7 @@ export function createReviewModel(input: {
   const directory = () => screen.file.root
 
   // The filter is transient by design: a persisted filter would silently hide files after a reload.
-  const [state, setState] = createStore({ filter: "" })
+  const [state, setState] = createStore({ filter: "", initializingGit: false })
 
   // The review panel's scroller and the file it scrolls to belong to the session the view shows.
   const [scroll, setScroll] = createVisitState<HTMLDivElement | undefined>(undefined)
@@ -239,6 +239,58 @@ export function createReviewModel(input: {
     return !diffQuery.isPending
   }
 
+  const lifetime = { disposed: false }
+
+  onCleanup(() => {
+    lifetime.disposed = true
+  })
+
+  // Initializes Git for the routed session. The request keeps that session's object, so its server and location stay
+  // its own; the outcome applies only while the screen still routes it.
+  const initializeGit = () => {
+    if (state.initializingGit) return
+
+    const session = view()
+    const location = session.location
+
+    if (!location || !session.server.connected) {
+      showToast({ variant: "error", title: ctx.t("common.requestFailed") })
+
+      return
+    }
+
+    const current = () => !lifetime.disposed && !ctx.signal.aborted && view().key === session.key
+
+    setState("initializingGit", true)
+    void session.server.client.vcs
+      .init({ location, provider: "git" })
+      .then(async () => {
+        if (!current()) return
+
+        const data = session.server.data
+
+        data.project.invalidate()
+        data.session.invalidate(session.id)
+        data.location.invalidate(location)
+        data.location.vcs.invalidate(location)
+        await data.project.sync()
+        await data.session.sync(session.id)
+        await Promise.all([data.location.syncInfo(location), data.location.vcs.sync(location)])
+      })
+      .catch((error) => {
+        if (!current()) return
+
+        showToast({
+          variant: "error",
+          title: ctx.t("common.requestFailed"),
+          description: error instanceof Error ? error.message : undefined,
+        })
+      })
+      .finally(() => {
+        if (current()) setState("initializingGit", false)
+      })
+  }
+
   const loadDiff = async (path: string, version?: number): Promise<FileDiffInfo | undefined> => {
     const source = diffs().find((diff) => diff.file === path)
 

diff --git a/packages/gui-extensions/src/sdk/host-apis.ts b/packages/gui-extensions/src/sdk/host-apis.ts
@@ -1,7 +1,7 @@
 import type { Data } from "@opencode/client/solid"
 import type { LocationRef, OpenCodeClient, ProjectListOutput, WorktreeDirectory } from "@opencode/client/promise"
 import type { Schema } from "effect"
-import type { Accessor, JSX } from "solid-js"
+import type { JSX } from "solid-js"
 import type { Store } from "solid-js/store"
 import type { Cleanup, OS, Persisted, StoreFrom } from "./core"
 import type { IconName, Link } from "./points"

diff --git a/packages/gui-extensions/src/updater/actions.tsx b/packages/gui-extensions/src/updater/actions.tsx
@@ -1,4 +1,3 @@
-import type { JSX } from "solid-js"
 import { Button } from "@opencode/ui/button"
 import { Dialog, DialogFooter, DialogHeader, DialogTitleGroup } from "@opencode/ui/dialog"
 import { Icon } from "@opencode/ui/icon"