chore: merge dev into v2 (#36312)

Co-authored-by: opencode-agent[bot] <219766164+opencode-agent[bot]@users.noreply.github.com> Co-authored-by: LukeParkerDev <10430890+Hona@users.noreply.github.com> Co-authored-by: opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com> Co-authored-by: Aiden Cline <63023139+rekram1-node@users.noreply.github.com> Co-authored-by: Brendan Allan <14191578+Brendonovich@users.noreply.github.com> Co-authored-by: Aarav Sareen <96787824+arvsrn@users.noreply.github.com> Co-authored-by: Julian Coy <julian@ex-machina.co> Co-authored-by: Brendan Allan <git@brendonovich.dev> Co-authored-by: usrnk1 <7547651+usrnk1@users.noreply.github.com> Co-authored-by: opencode <opencode@sst.dev> Co-authored-by: Vladimir Glafirov <vglafirov@gitlab.com> Co-authored-by: Adam <2363879+adamdotdevin@users.noreply.github.com> Co-authored-by: Frank <frank@anoma.ly> Co-authored-by: Jay <53023+jayair@users.noreply.github.com> Co-authored-by: Dustin Deus <deusdustin@gmail.com> Co-authored-by: Kit Langton <kit.langton@gmail.com> Co-authored-by: James Long <longster@gmail.com> Co-authored-by: Simon Klee <hello@simonklee.dk> Co-authored-by: Jay <air@live.ca> Co-authored-by: Jack <jack@anoma.ly> Co-authored-by: David Hill <1879069+iamdavidhill@users.noreply.github.com> Co-authored-by: Aiden Cline <aidenpcline@gmail.com> Co-authored-by: James Long <jlongster@users.noreply.github.com> Co-authored-by: 冯基魁 <56265583+fengjikui@users.noreply.github.com> Co-authored-by: Aiden Cline <rekram1-node@users.noreply.github.com> Co-authored-by: Victor Navarro <vn4varro@gmail.com>
2026-07-10 15:11:29 -05:00 · 2026-07-10 15:11:29 -05:00 · 43ecf3ff1b
commit 43ecf3ff1b
parent 9028c2d8f8
82 changed files with 4519 additions and 1231 deletions
--- a/packages/app/src/pages/session/composer/prompt-model-selection.ts
+++ b/packages/app/src/pages/session/composer/prompt-model-selection.ts
@ -0,0 +1,133 @@
+import { batch, createMemo, startTransition } from "solid-js"
+import { useModels } from "@/context/models"
+import type { ModelKey, ModelSelection } from "@/context/local"
+import { cycleModelVariant, getConfiguredAgentVariant, resolveModelVariant } from "@/context/model-variant"
+import { usePrompt } from "@/context/prompt"
+import { useSDK } from "@/context/sdk"
+import { useSync } from "@/context/sync"
+import { useProviders } from "@/hooks/use-providers"
+
+export function createPromptModelSelection(input: { agent: () => { model?: ModelKey; variant?: string } | undefined }) {
+  const sdk = useSDK()
+  const sync = useSync()
+  const models = useModels()
+  const prompt = usePrompt()
+  const providers = useProviders(() => sdk().directory)
+  const connected = createMemo(() => new Set(providers.connected().map((item) => item.id)))
+
+  const valid = (model: ModelKey) => {
+    const provider = providers.all().get(model.providerID)
+    return !!provider?.models[model.modelID] && connected().has(model.providerID)
+  }
+
+  const configured = () => {
+    const value = sync().data.config.model
+    if (!value) return
+    const [providerID, modelID] = value.split("/")
+    const model = { providerID, modelID }
+    if (valid(model)) return model
+  }
+
+  const recent = () => models.recent.list().find(valid)
+  const fallback = () => {
+    const defaults = providers.default()
+    return providers.connected().flatMap((provider) => {
+      const modelID = defaults[provider.id] ?? Object.values(provider.models)[0]?.id
+      return modelID ? [{ providerID: provider.id, modelID }] : []
+    })[0]
+  }
+
+  const current = () => {
+    const key = [prompt.model.current(), input.agent()?.model, configured(), recent(), fallback()].find(
+      (item): item is ModelKey => !!item && valid(item),
+    )
+    if (!key) return
+    return models.find(key)
+  }
+  const recentModels = createMemo(() =>
+    models.recent
+      .list()
+      .map(models.find)
+      .filter((item): item is NonNullable<typeof item> => !!item),
+  )
+
+  const selection = {
+    ready: models.ready,
+    current,
+    recent: recentModels,
+    list: models.list,
+    cycle(direction: 1 | -1) {
+      const items = recentModels()
+      const item = current()
+      if (!item) return
+      const index = items.findIndex((entry) => entry.provider.id === item.provider.id && entry.id === item.id)
+      if (index === -1) return
+      const next = items[(index + direction + items.length) % items.length]
+      if (next) selection.set({ providerID: next.provider.id, modelID: next.id })
+    },
+    set(item: ModelKey | undefined, options?: { recent?: boolean }) {
+      startTransition(() =>
+        batch(() => {
+          prompt.model.set(item ? { ...item, variant: prompt.model.current()?.variant } : undefined)
+          if (!item) return
+          models.setVisibility(item, true)
+          if (options?.recent) models.recent.push(item)
+        }),
+      )
+    },
+    visible: models.visible,
+    setVisibility: models.setVisibility,
+    variant: {
+      configured() {
+        const item = input.agent()
+        const model = current()
+        if (!item || !model) return
+        return getConfiguredAgentVariant({
+          agent: { model: item.model, variant: item.variant },
+          model: { providerID: model.provider.id, modelID: model.id, variants: model.variants },
+        })
+      },
+      selected() {
+        return prompt.model.current()?.variant
+      },
+      current() {
+        const resolved = resolveModelVariant({
+          variants: this.list(),
+          selected: this.selected(),
+          configured: this.configured(),
+        })
+        if (resolved) return resolved
+        const model = current()
+        if (!model) return
+        const saved = models.variant.get({ providerID: model.provider.id, modelID: model.id })
+        if (saved && this.list().includes(saved)) return saved
+      },
+      list() {
+        return Object.keys(current()?.variants ?? {})
+      },
+      set(value: string | undefined) {
+        startTransition(() =>
+          batch(() => {
+            const model = current()
+            if (!model) return
+            prompt.model.set({ providerID: model.provider.id, modelID: model.id, variant: value ?? null })
+            models.variant.set({ providerID: model.provider.id, modelID: model.id }, value)
+          }),
+        )
+      },
+      cycle() {
+        const variants = this.list()
+        if (variants.length === 0) return
+        this.set(
+          cycleModelVariant({
+            variants,
+            selected: this.selected(),
+            configured: this.configured(),
+          }),
+        )
+      },
+    },
+  } satisfies ModelSelection
+
+  return selection
+}
--- a/packages/app/src/pages/session/composer/session-composer-controls.ts
+++ b/packages/app/src/pages/session/composer/session-composer-controls.ts
@ -7,7 +7,7 @@ import type { PromptProjectControls } from "@/components/prompt-project-selector
 import { useDirectoryPicker } from "@/components/directory-picker"
 import { useGlobal } from "@/context/global"
 import { useLayout } from "@/context/layout"
-import { useLocal } from "@/context/local"
+import { useLocal, type ModelSelection } from "@/context/local"
 import type { QueryOptionsApi } from "@/context/server-sync"
 import { useServerSDK } from "@/context/server-sdk"
 import { serverName, ServerConnection, useServer } from "@/context/server"
@ -22,6 +22,7 @@ export function createPromptInputController(input: {
  sessionKey: Accessor<string>
  sessionID: Accessor<string | undefined>
  queryOptions: Pick<QueryOptionsApi, "agents" | "providers">
+  model?: ModelSelection
 }) {
  const layout = useLayout()
  const local = useLocal()
@ -44,7 +45,7 @@ export function createPromptInputController(input: {
      select: local.agent.set,
    },
    model: {
-      selection: local.model,
+      selection: input.model ?? local.model,
      paid: providers.paid().length > 0,
      loading: agentsQuery.isLoading || providersQuery.isLoading || globalProvidersQuery.isLoading,
    },
--- a/packages/app/src/pages/session/session-model-helpers.test.ts
+++ b/packages/app/src/pages/session/session-model-helpers.test.ts
@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test"
 import type { UserMessage } from "@opencode-ai/sdk/v2"
-import { resetSessionModel, syncSessionModel } from "./session-model-helpers"
+import { resetSessionModel, restorePromptModel, syncPromptModel, syncSessionModel } from "./session-model-helpers"

 const message = (input?: { agent?: string; model?: UserMessage["model"] }) =>
  ({
@ -50,3 +50,102 @@ describe("resetSessionModel", () => {
    expect(calls).toEqual(["reset"])
  })
 })
+
+describe("syncPromptModel", () => {
+  test("stores the effective session model in prompt state", () => {
+    const calls: unknown[] = []
+
+    syncPromptModel(
+      {
+        model: {
+          current: () => ({ id: "claude-sonnet-4", provider: { id: "anthropic" } }),
+          set() {},
+          variant: { current: () => "high", set() {} },
+        },
+      },
+      {
+        model: {
+          current: () => undefined,
+          set: (model) => calls.push(model),
+        },
+      },
+    )
+
+    expect(calls).toEqual([{ providerID: "anthropic", modelID: "claude-sonnet-4", variant: "high" }])
+  })
+
+  test("does not rewrite an unchanged prompt model", () => {
+    const calls: unknown[] = []
+    const model = { providerID: "anthropic", modelID: "claude-sonnet-4", variant: "high" }
+
+    syncPromptModel(
+      {
+        model: {
+          current: () => ({ id: model.modelID, provider: { id: model.providerID } }),
+          set() {},
+          variant: { current: () => model.variant, set() {} },
+        },
+      },
+      {
+        model: {
+          current: () => model,
+          set: (value) => calls.push(value),
+        },
+      },
+    )
+
+    expect(calls).toEqual([])
+  })
+})
+
+describe("restorePromptModel", () => {
+  test("restores the persisted prompt model into session selection", () => {
+    const calls: unknown[] = []
+    const restored = restorePromptModel(
+      {
+        model: {
+          current: () => ({ id: "gpt", provider: { id: "openai" } }),
+          set: (model) => calls.push(model),
+          variant: {
+            current: () => undefined,
+            set: (variant) => calls.push(variant),
+          },
+        },
+      },
+      {
+        model: {
+          current: () => ({ providerID: "anthropic", modelID: "claude", variant: "high" }),
+          set() {},
+        },
+      },
+    )
+
+    expect(restored).toBe(true)
+    expect(calls).toEqual([{ providerID: "anthropic", modelID: "claude" }, "high"])
+  })
+
+  test("does nothing without a persisted prompt model", () => {
+    const calls: unknown[] = []
+    const restored = restorePromptModel(
+      {
+        model: {
+          current: () => ({ id: "gpt", provider: { id: "openai" } }),
+          set: (model) => calls.push(model),
+          variant: {
+            current: () => undefined,
+            set: (variant) => calls.push(variant),
+          },
+        },
+      },
+      {
+        model: {
+          current: () => undefined,
+          set() {},
+        },
+      },
+    )
+
+    expect(restored).toBe(false)
+    expect(calls).toEqual([])
+  })
+})
--- a/packages/app/src/pages/session/session-model-helpers.ts
+++ b/packages/app/src/pages/session/session-model-helpers.ts
@ -7,6 +7,24 @@ type Local = {
  }
 }

+type ModelSelection = {
+  model: {
+    current(): { id: string; provider: { id: string } } | undefined
+    set(model: { providerID: string; modelID: string }): void
+    variant: {
+      current(): string | undefined
+      set(variant: string | undefined): void
+    }
+  }
+}
+
+type PromptState = {
+  model: {
+    current(): { providerID: string; modelID: string; variant?: string | null } | undefined
+    set(model: { providerID: string; modelID: string; variant?: string | null }): void
+  }
+}
+
 export const resetSessionModel = (local: Local) => {
  local.session.reset()
 }
@ -14,3 +32,32 @@ export const resetSessionModel = (local: Local) => {
 export const syncSessionModel = (local: Local, msg: UserMessage) => {
  local.session.restore(msg)
 }
+
+export const syncPromptModel = (local: ModelSelection, prompt: PromptState) => {
+  const model = local.model.current()
+  if (!model) return
+  const next = {
+    providerID: model.provider.id,
+    modelID: model.id,
+    variant: local.model.variant.current(),
+  }
+  const current = prompt.model.current()
+  if (current?.providerID === next.providerID && current.modelID === next.modelID && current.variant === next.variant)
+    return
+  prompt.model.set(next)
+}
+
+export const restorePromptModel = (local: ModelSelection, prompt: PromptState) => {
+  const model = prompt.model.current()
+  if (!model) return false
+  const current = local.model.current()
+  if (
+    current?.provider.id === model.providerID &&
+    current.id === model.modelID &&
+    local.model.variant.current() === (model.variant ?? undefined)
+  )
+    return true
+  local.model.set({ providerID: model.providerID, modelID: model.modelID })
+  local.model.variant.set(model.variant ?? undefined)
+  return true
+}
--- a/packages/app/src/pages/session/session-side-panel.tsx
+++ b/packages/app/src/pages/session/session-side-panel.tsx
@ -249,8 +249,10 @@ export function SessionSidePanel(props: {
        aria-label={language.t("session.panel.reviewAndFiles")}
        aria-hidden={!open()}
        inert={!open()}
-        class="relative min-w-0 flex overflow-hidden bg-background-base"
+        class="relative min-w-0 flex overflow-hidden"
        classList={{
+          "bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
+          "bg-background-base": !settings.general.newLayoutDesigns(),
          "h-full shrink-0": !props.stacked,
          "h-full min-h-0": props.stacked,
          "pointer-events-none": !open(),
@ -269,8 +271,20 @@ export function SessionSidePanel(props: {
            }}
          >
            <Show when={reviewOpen()}>
-              <div class="relative min-w-0 h-full flex-1 overflow-hidden bg-background-base">
-                <div class="size-full min-w-0 h-full bg-background-base">
+              <div
+                class="relative min-w-0 h-full flex-1 overflow-hidden"
+                classList={{
+                  "bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
+                  "bg-background-base": !settings.general.newLayoutDesigns(),
+                }}
+              >
+                <div
+                  class="size-full min-w-0 h-full"
+                  classList={{
+                    "bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
+                    "bg-background-base": !settings.general.newLayoutDesigns(),
+                  }}
+                >
                  <DragDropProvider
                    onDragStart={handleDragStart}
                    onDragEnd={handleDragEnd}
@ -373,7 +387,13 @@ export function SessionSidePanel(props: {
                              )}
                            </For>
                          </SortableProvider>
-                          <div class="bg-background-stronger h-full shrink-0 sticky right-0 z-10 flex items-center justify-center pr-3">
+                          <div
+                            class="h-full shrink-0 sticky right-0 z-10 flex items-center justify-center pr-3"
+                            classList={{
+                              "bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
+                              "bg-background-stronger": !settings.general.newLayoutDesigns(),
+                            }}
+                          >
                            <TooltipKeybind
                              title={language.t("command.file.open")}
                              keybind={command.keybind("file.open")}
--- a/packages/app/src/pages/session/terminal-panel-v2.tsx
+++ b/packages/app/src/pages/session/terminal-panel-v2.tsx
@ -195,7 +195,7 @@ export function TerminalPanelV2(props: { stacked?: boolean } = {}) {
      aria-label={language.t("terminal.title")}
      aria-hidden={!opened()}
      inert={!opened()}
-      class="relative shrink-0 overflow-hidden bg-background-stronger"
+      class="relative shrink-0 overflow-hidden bg-v2-background-bg-base"
      classList={{
        "w-full": !isDesktop() || stacked(),
        "min-w-0 h-full flex-1": isDesktop() && opened() && !stacked(),
@ -237,7 +237,7 @@ export function TerminalPanelV2(props: { stacked?: boolean } = {}) {
          when={terminal.ready()}
          fallback={
            <div class="flex flex-col h-full pointer-events-none">
-              <div class="h-10 flex items-center gap-2 px-2 border-b border-border-weaker-base bg-background-stronger overflow-hidden">
+              <div class="h-10 flex items-center gap-2 px-2 border-b border-border-weaker-base bg-v2-background-bg-base overflow-hidden">
                <For each={handoff()}>
                  {(title) => (
                    <div class="px-2 py-1 rounded-md bg-surface-base text-14-regular text-text-weak truncate max-w-40">
--- a/packages/app/src/pages/session/timeline/message-timeline.tsx
+++ b/packages/app/src/pages/session/timeline/message-timeline.tsx
@ -1243,12 +1243,13 @@ export function MessageTimeline(props: {
    const initialRow = timelineRowByKey().get(props.rowKey)!
    const item = createMemo(() => virtualItemByKey().get(props.rowKey) ?? initialItem)
    const row = createMemo(() => timelineRowByKey().get(props.rowKey) ?? initialRow)
-    const asyncFile = () => {
+    const tool = () => {
      const value = row()
-      if (value._tag !== "AssistantPart" || value.group.type !== "part") return false
+      if (value._tag !== "AssistantPart" || value.group.type !== "part") return
      const part = getMsgPart(value.group.ref.messageID, value.group.ref.partID)
-      return part?.type === "tool" && ["edit", "write", "patch", "apply_patch"].includes(part.tool)
+      if (part?.type === "tool") return part
    }
+    const asyncFile = () => ["edit", "write", "patch", "apply_patch"].includes(tool()?.tool ?? "")
    const [ready, setReady] = createSignal(initialItem.size <= timelineFallbackItemSize || !asyncFile())
    let contentMeasureFrame: number | undefined

@ -1278,6 +1279,8 @@ export function MessageTimeline(props: {
          width: "100%",
          height: `${item().size}px`,
          overflow: "clip",
+          // Rounded virtual measurements can otherwise clip a framed row's outer paint.
+          "overflow-clip-margin": row()._tag === "TurnGap" ? undefined : "0.5px",
        }}
      >
        <div
@ -1383,7 +1386,7 @@ export function MessageTimeline(props: {
              "w-full": true,
              "pb-4": true,
              "pr-3": true,
-              "pl-2": settings.general.newLayoutDesigns(),
+              "pl-2.5": settings.general.newLayoutDesigns(),
              "pl-2 md:pl-4": !settings.general.newLayoutDesigns(),
              "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered && !settings.general.newLayoutDesigns(),
            }}
--- a/packages/app/src/pages/session/use-composer-commands.tsx
+++ b/packages/app/src/pages/session/use-composer-commands.tsx
@ -1,6 +1,6 @@
 import { useCommand, type CommandOption } from "@/context/command"
 import { useLanguage } from "@/context/language"
-import { useLocal } from "@/context/local"
+import { useLocal, type ModelSelection } from "@/context/local"
 import { useSettings } from "@/context/settings"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { getCursorPosition, setCursorPosition } from "@/components/prompt-input/editor-dom"
@ -14,7 +14,7 @@ const withCategory = (category: string) => {
  })
 }

-export const useComposerCommands = () => {
+export const useComposerCommands = (input: { model?: ModelSelection } = {}) => {
  const command = useCommand()
  const dialog = useDialog()
  const language = useLanguage()
@ -22,6 +22,7 @@ export const useComposerCommands = () => {
  const settings = useSettings()
  const { sessionKey } = useSessionLayout()
  const sessionOwnership = createSessionOwnership(sessionKey)
+  const model = input.model ?? local.model
  const modelCommand = withCategory(language.t("command.category.model"))
  const agentCommand = withCategory(language.t("command.category.agent"))

@ -43,7 +44,7 @@ export const useComposerCommands = () => {
    }
    const { DialogSelectModel } = await import("@/components/dialog-select-model")
    owner.run(() => {
-      void dialog.show(() => <DialogSelectModel model={local.model} />, restoreComposer)
+      void dialog.show(() => <DialogSelectModel model={model} />, restoreComposer)
    })
  }

@ -61,7 +62,7 @@ export const useComposerCommands = () => {
      title: language.t("command.model.variant.cycle"),
      description: language.t("command.model.variant.cycle.description"),
      keybind: "shift+mod+d",
-      onSelect: () => local.model.variant.cycle(),
+      onSelect: () => model.variant.cycle(),
    }),
    agentCommand({
      id: "agent.cycle",
--- a/packages/app/src/pages/session/v2/session-file-browser-tab.tsx
+++ b/packages/app/src/pages/session/v2/session-file-browser-tab.tsx
@ -46,6 +46,7 @@ export function SessionFileBrowserTab(props: {
  const resultsID = `session-file-browser-results-${createUniqueId()}`
  const [filter, setFilter] = createSignal("")
  const [explicitHighlight, setExplicitHighlight] = createSignal<string>()
+  const sidebarOpened = () => props.placeholder || props.state.sidebarOpened()
  const query = createMemo(() => filter().trim())
  const search = createQuery(() => {
    const value = query()
@ -98,15 +99,15 @@ export function SessionFileBrowserTab(props: {
        toolbar
        toolbarStart={
          <>
-            <SessionReviewV2SidebarToggle opened={props.state.sidebarOpened()} onToggle={props.state.toggleSidebar} />
-            <Show when={!props.state.sidebarOpened()}>
+            <SessionReviewV2SidebarToggle opened={sidebarOpened()} onToggle={props.state.toggleSidebar} />
+            <Show when={!sidebarOpened()}>
              <SessionFilePanelV2Title>{title()}</SessionFilePanelV2Title>
            </Show>
          </>
        }
        sidebar={
          <SessionReviewV2Sidebar
-            open={props.state.sidebarOpened()}
+            open={sidebarOpened()}
            title={<span class="truncate">{title()}</span>}
            filter={filter()}
            onFilterChange={setFilter}