fix(tui): align running shell output (#41101)

bun.lock

@@ -64,6 +64,7 @@
         "@opencode-ai/client": "workspace:*",
         "@opencode-ai/core": "workspace:*",
         "@opencode-ai/schema": "workspace:*",
+        "@opencode-ai/sdk": "file:vendor/opencode-ai-sdk-1.18.8-dev.tgz",
         "@opencode-ai/session-ui": "workspace:*",
         "@opencode-ai/ui": "workspace:*",
         "@opencode-ai/util": "workspace:*",
@@ -111,7 +112,6 @@
         "@types/luxon": "catalog:",
         "@types/node": "catalog:",
         "@typescript/native-preview": "catalog:",
-        "happy-dom": "20.11.1",
         "tw-animate-css": "1.4.0",
         "typescript": "catalog:",
         "vite": "catalog:",
@@ -395,7 +395,6 @@
         "ignore": "7.0.5",
         "immer": "11.1.4",
         "jsonc-parser": "3.3.1",
-        "mime-types": "3.0.2",
         "tree-sitter-bash": "0.25.0",
         "tree-sitter-powershell": "0.25.10",
         "turndown": "7.2.0",
@@ -6320,6 +6319,8 @@
 
     "@openauthjs/openauth/jose": ["jose@5.9.6", "", {}, "sha512-AMlnetc9+CV9asI19zHmrgS/WYsWUwCn2R7RzlbJWD7F9eWYUTGyBmU9o6PxngtLGOiDGPRu+Uc4fhKzbpteZQ=="],
 
+    "@opencode-ai/app/@opencode-ai/sdk": ["@opencode-ai/sdk@vendor/opencode-ai-sdk-1.18.8-dev.tgz", { "dependencies": { "cross-spawn": "7.0.6" } }, "sha512-C2nfk4x0sPINwE5V6DPkFSuH3PkUmKPWHPzxpXC1j+3Ui5hslLCWJbkk8WcOG1Lyt3C0+yp4ea64v/kmtYCO4w=="],
+
     "@opencode-ai/cli/semver": ["semver@7.7.4", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],
 
     "@opencode-ai/console-app/@smithy/eventstream-codec": ["@smithy/eventstream-codec@4.2.7", "", { "dependencies": { "@aws-crypto/crc32": "5.2.0", "@smithy/types": "^4.11.0", "@smithy/util-hex-encoding": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-DrpkEoM3j9cBBWhufqBwnbbn+3nf1N9FP6xuVJ+e220jbactKuQgaZwjwP5CP1t+O94brm2JgVMD2atMGX3xIQ=="],

packages/ai/README.md

@@ -368,12 +368,11 @@ Other provider exports listed above remain direct facades until they explicitly
 
 ## Provider options & HTTP overlays
 
-Request options in order of stability:
+Three escape hatches in order of stability:
 
 1. **`generation`** — portable knobs (`maxTokens`, `temperature`, `topP`, `topK`, penalties, seed, stop).
-2. **`promptCacheKey`** — stable cache affinity lowered by every protocol that supports it.
-3. **`providerOptions: { <provider>: {...} }`** — typed-at-the-facade provider-specific knobs (OpenAI `store`, Anthropic `thinking`, Gemini `thinkingConfig`, OpenRouter routing).
-4. **`http: { body, headers, query }`** — last-resort serializable overlays merged into the final HTTP request. Reach for this only when a stable typed path doesn't yet exist.
+2. **`providerOptions: { <provider>: {...} }`** — typed-at-the-facade provider-specific knobs (OpenAI `promptCacheKey`, Anthropic `thinking`, Gemini `thinkingConfig`, OpenRouter routing).
+3. **`http: { body, headers, query }`** — last-resort serializable overlays merged into the final HTTP request. Reach for this only when a stable typed path doesn't yet exist.
 
 Route/provider defaults are overridden by request-level values for each axis.
 

packages/ai/example/tutorial.ts

@@ -33,10 +33,9 @@ const model = OpenAI.configure({
 //
 //   - `generation`: common controls such as max tokens, temperature, topP/topK,
 //     penalties, seed, and stop sequences.
-//   - `promptCacheKey`: stable cache affinity for protocols that support it.
 //   - `providerOptions`: namespaced provider-native behavior. For example,
-//     OpenAI store behavior, Anthropic thinking, Gemini thinking config, or
-//     OpenRouter routing/reasoning.
+//     OpenAI cache keys and store behavior, Anthropic thinking, Gemini thinking
+//     config, or OpenRouter routing/reasoning.
 //   - `http`: last-resort serializable overlays for final request body, headers,
 //     and query params. Prefer typed `providerOptions` when a field is stable.
 //
@@ -46,7 +45,9 @@ const request = LLM.request({
   system: "You are concise and practical.",
   prompt: "Tell me a joke",
   generation: { maxTokens: 80, temperature: 0.7 },
-  promptCacheKey: "tutorial-joke",
+  providerOptions: {
+    openai: { promptCacheKey: "tutorial-joke" },
+  },
 })
 
 // 3. `generate` sends the request and collects the event stream into one

packages/ai/src/protocols/gemini.ts

@@ -25,20 +25,8 @@ import { ToolSchemaProjection } from "./utils/tool-schema"
 
 const ADAPTER = "gemini"
 const MEDIA_MIMES = new Set<string>(ProviderShared.MEDIA_MIMES)
-// Google documents this sentinel for replaying Gemini 3 function calls after their original signature was lost.
-const SKIP_THOUGHT_SIGNATURE_VALIDATOR = "skip_thought_signature_validator"
 export const DEFAULT_BASE_URL = "https://generativelanguage.googleapis.com/v1beta"
 
-// Gemini 3 rejects replayed function calls without a thought signature. Google's SDKs avoid that in normal chats by
-// retaining complete model responses, but OpenCode reconstructs durable history and may encounter an unsigned call
-// from an older or external session. Model IDs are open-ended, so unknown Gemini aliases inherit current behavior.
-const requiresThoughtSignatureFallback = (modelID: string) => {
-  if (!/(^|\/)gemini-/i.test(modelID)) return false
-  if (/(^|\/)gemini-(?:1|2)(?:[.-]|$)/i.test(modelID)) return false
-  if (/(^|\/)gemini-pro(?:-vision)?$/i.test(modelID)) return false
-  return !/(^|\/)gemini-robotics-er-1\.5(?:[.-]|$)/i.test(modelID)
-}
-
 export interface OptionsInput {
   readonly [key: string]: unknown
   readonly cachedContent?: string
@@ -157,9 +145,6 @@ const GeminiGenerationConfig = Schema.Struct({
   temperature: Schema.optional(Schema.Number),
   topP: Schema.optional(Schema.Number),
   topK: Schema.optional(Schema.Number),
-  frequencyPenalty: Schema.optional(Schema.Number),
-  presencePenalty: Schema.optional(Schema.Number),
-  seed: Schema.optional(Schema.Number),
   stopSequences: optionalArray(Schema.String),
   thinkingConfig: Schema.optional(GeminiThinkingConfig),
 })
@@ -217,13 +202,11 @@ interface ParserState {
 //    keys on non-object scalars. Mirrors OpenCode's historical Gemini rules.
 //
 // 2. Project — lossy mapping from JSON Schema to Gemini's schema dialect:
-//    drop empty root parameter schemas while preserving nested empty objects,
-//    expand type arrays into `anyOf`, derive `nullable: true` from null members,
-//    coerce `const` to `[const]` enum, recurse properties/items, and propagate
+//    drop empty objects, derive `nullable: true` from `type: [..., "null"]`,
+//    coerce `const` to `[const]` enum, recurse properties/items, propagate
 //    only an allowlisted set of keys (description, required, format, type,
-//    nullable, enum, properties, items, allOf, anyOf, oneOf, minLength).
-//    Anything outside the allowlist (e.g. `additionalProperties`, `$ref`) is
-//    silently dropped.
+//    properties, items, allOf, anyOf, oneOf, minLength). Anything outside the
+//    allowlist (e.g. `additionalProperties`, `$ref`) is silently dropped.
 //
 // Sanitize runs first, then project. The implementation lives in
 // `utils/gemini-tool-schema` so this protocol keeps the same shape as the other
@@ -299,8 +282,6 @@ const lowerMessages = Effect.fn("Gemini.lowerMessages")(function* (request: LLMR
 
     if (message.role === "assistant") {
       const parts: Array<Schema.Schema.Type<typeof GeminiContentPart>> = []
-      // Parallel Gemini 3 calls may carry one signature on the first call; unsigned sibling calls are valid.
-      let hasSignedToolCall = false
       for (const part of message.content) {
         if (!ProviderShared.supportsContent(part, ["text", "reasoning", "tool-call"]))
           return yield* ProviderShared.unsupportedContent("Gemini", "assistant", ["text", "reasoning", "tool-call"])
@@ -313,17 +294,7 @@ const lowerMessages = Effect.fn("Gemini.lowerMessages")(function* (request: LLMR
           continue
         }
         if (part.type === "tool-call") {
-          const lowered = lowerToolCall(part)
-          const signature = lowered.thoughtSignature
-          parts.push({
-            ...lowered,
-            thoughtSignature:
-              signature ??
-              (requiresThoughtSignatureFallback(request.model.id) && !hasSignedToolCall
-                ? SKIP_THOUGHT_SIGNATURE_VALIDATOR
-                : undefined),
-          })
-          if (signature !== undefined) hasSignedToolCall = true
+          parts.push(lowerToolCall(part))
           continue
         }
       }
@@ -417,9 +388,6 @@ const fromRequest = Effect.fn("Gemini.fromRequest")(function* (request: LLMReque
     temperature: generation?.temperature,
     topP: generation?.topP,
     topK: generation?.topK,
-    frequencyPenalty: generation?.frequencyPenalty,
-    presencePenalty: generation?.presencePenalty,
-    seed: generation?.seed,
     stopSequences: generation?.stop,
     thinkingConfig: options.thinkingConfig,
   }

packages/ai/src/protocols/open-responses.ts

@@ -539,7 +539,7 @@ const lowerOptions = (request: LLMRequest) => {
   return {
     ...(options.instructions ? { instructions: options.instructions } : {}),
     ...(options.store !== undefined ? { store: options.store } : {}),
-    ...(request.promptCacheKey ? { prompt_cache_key: request.promptCacheKey } : {}),
+    ...(options.promptCacheKey ? { prompt_cache_key: options.promptCacheKey } : {}),
     ...(options.include ? { include: options.include } : {}),
     ...(options.reasoningEffort || options.reasoningSummary
       ? { reasoning: { effort: options.reasoningEffort, summary: options.reasoningSummary } }

packages/ai/src/protocols/openai-chat.ts

@@ -67,12 +67,6 @@ const OpenAIChatAssistantToolCall = Schema.Struct({
 })
 type OpenAIChatAssistantToolCall = Schema.Schema.Type<typeof OpenAIChatAssistantToolCall>
 
-// Intentionally omit Gemini's provider-specific `extra_content.google.thought_signature`
-// extension until direct Google OpenAI-compatible routing is supported here:
-// https://github.com/vercel/ai/issues/11590
-// https://github.com/vercel/ai/pull/11745
-// https://ai.google.dev/gemini-api/docs/thought-signatures#openai
-
 const OpenAIChatUserContent = Schema.Union([
   Schema.Struct({
     type: Schema.Literal("text"),
@@ -132,7 +126,6 @@ export const bodyFields = {
   stream: Schema.Literal(true),
   stream_options: Schema.optional(Schema.Struct({ include_usage: Schema.Boolean })),
   store: Schema.optional(Schema.Boolean),
-  prompt_cache_key: Schema.optional(Schema.String),
   reasoning_effort: Schema.optional(OpenAIOptions.OpenAIReasoningEffort),
   max_completion_tokens: Schema.optional(Schema.Number),
   max_tokens: Schema.optional(Schema.Number),
@@ -152,33 +145,22 @@ export type OpenAIChatBody = Schema.Schema.Type<typeof OpenAIChatBody>
 // The event schema is one decoded SSE `data:` payload. `Framing.sse` splits the
 // byte stream into strings, then `Protocol.jsonEvent` decodes each string into
 // this provider-native event shape.
-const OpenAIChatUsage = Schema.StructWithRest(
-  Schema.Struct({
-    prompt_tokens: optionalNull(Schema.Number),
-    completion_tokens: optionalNull(Schema.Number),
-    total_tokens: optionalNull(Schema.Number),
-    prompt_tokens_details: optionalNull(
-      Schema.StructWithRest(
-        Schema.Struct({
-          cached_tokens: optionalNull(Schema.Number),
-          cache_write_tokens: optionalNull(Schema.Number),
-        }),
-        [Schema.Record(Schema.String, Schema.Unknown)],
-      ),
-    ),
-    completion_tokens_details: optionalNull(
-      Schema.StructWithRest(
-        Schema.Struct({
-          reasoning_tokens: optionalNull(Schema.Number),
-          accepted_prediction_tokens: optionalNull(Schema.Number),
-          rejected_prediction_tokens: optionalNull(Schema.Number),
-        }),
-        [Schema.Record(Schema.String, Schema.Unknown)],
-      ),
-    ),
-  }),
-  [Schema.Record(Schema.String, Schema.Unknown)],
-)
+const OpenAIChatUsage = Schema.Struct({
+  prompt_tokens: Schema.optional(Schema.Number),
+  completion_tokens: Schema.optional(Schema.Number),
+  total_tokens: Schema.optional(Schema.Number),
+  prompt_tokens_details: optionalNull(
+    Schema.Struct({
+      cached_tokens: Schema.optional(Schema.Number),
+      cache_write_tokens: Schema.optional(Schema.Number),
+    }),
+  ),
+  completion_tokens_details: optionalNull(
+    Schema.Struct({
+      reasoning_tokens: Schema.optional(Schema.Number),
+    }),
+  ),
+})
 
 const OpenAIChatToolCallDeltaFunction = Schema.Struct({
   name: optionalNull(Schema.String),
@@ -186,7 +168,7 @@ const OpenAIChatToolCallDeltaFunction = Schema.Struct({
 })
 
 const OpenAIChatToolCallDelta = Schema.Struct({
-  index: optionalNull(Schema.Number),
+  index: Schema.Number,
   id: optionalNull(Schema.String),
   function: optionalNull(OpenAIChatToolCallDeltaFunction),
 })
@@ -240,8 +222,6 @@ export interface ParserState {
   readonly reasoningDetails: Array<unknown>
   readonly reasoningDetailsObserved: boolean
   readonly reasoningEmitted: boolean
-  readonly latestToolIndex?: number
-  readonly nextToolIndex: number
 }
 
 // =============================================================================
@@ -510,7 +490,6 @@ const lowerOptions = (request: LLMRequest) => {
   const options = OpenAIOptions.resolve(request)
   return {
     ...(options.store !== undefined ? { store: options.store } : {}),
-    ...(request.promptCacheKey ? { prompt_cache_key: request.promptCacheKey } : {}),
     ...(options.reasoningEffort ? { reasoning_effort: options.reasoningEffort } : {}),
   }
 }
@@ -580,34 +559,22 @@ const mapFinishReason = (reason: string | null | undefined): FinishReason => {
 // satisfied on both sides.
 const mapUsage = (usage: OpenAIChatEvent["usage"]): Usage | undefined => {
   if (!usage) return undefined
-  const input = usage.prompt_tokens ?? undefined
-  const output = usage.completion_tokens ?? undefined
-  const cached = usage.prompt_tokens_details?.cached_tokens ?? undefined
-  const cacheWrite = usage.prompt_tokens_details?.cache_write_tokens ?? undefined
-  const reasoning = usage.completion_tokens_details?.reasoning_tokens ?? undefined
-  const nonCached = ProviderShared.subtractTokens(input, ProviderShared.sumTokens(cached, cacheWrite))
+  const cached = usage.prompt_tokens_details?.cached_tokens
+  const cacheWrite = usage.prompt_tokens_details?.cache_write_tokens
+  const reasoning = usage.completion_tokens_details?.reasoning_tokens
+  const nonCached = ProviderShared.subtractTokens(usage.prompt_tokens, ProviderShared.sumTokens(cached, cacheWrite))
   return new Usage({
-    inputTokens: input,
-    outputTokens: output,
+    inputTokens: usage.prompt_tokens,
+    outputTokens: usage.completion_tokens,
     nonCachedInputTokens: nonCached,
     cacheReadInputTokens: cached,
     cacheWriteInputTokens: cacheWrite,
     reasoningTokens: reasoning,
-    totalTokens: ProviderShared.totalTokens(input, output, usage.total_tokens ?? undefined),
+    totalTokens: ProviderShared.totalTokens(usage.prompt_tokens, usage.completion_tokens, usage.total_tokens),
     providerMetadata: { openai: usage },
   })
 }
 
-const toolIndexByID = (
-  tools: ParserState["tools"],
-  pendingTools: ParserState["pendingTools"],
-  id: string | undefined,
-) => {
-  if (!id) return undefined
-  const entry = Object.entries({ ...pendingTools, ...tools }).find(([, tool]) => tool?.id === id)
-  return entry ? Number(entry[0]) : undefined
-}
-
 const reasoningDelta = (
   delta: Schema.Schema.Type<typeof OpenAIChatDelta> | null | undefined,
   configuredField?: string,
@@ -690,34 +657,17 @@ const step = (state: ParserState, event: OpenAIChatEvent) =>
     const events: LLMEvent[] = []
     const usage = mapUsage(event.usage) ?? state.usage
     const choice = event.choices?.[0]
-    const rawFinishReason = choice?.finish_reason
-    const finishReason =
-      rawFinishReason !== undefined && rawFinishReason !== null
-        ? { normalized: mapFinishReason(rawFinishReason), raw: choice?.native_finish_reason ?? rawFinishReason }
-        : state.finishReason
+    const finishReason = choice?.finish_reason
+      ? { normalized: mapFinishReason(choice.finish_reason), raw: choice.native_finish_reason ?? choice.finish_reason }
+      : state.finishReason
     const delta = choice?.delta
     const toolDeltas = delta?.tool_calls ?? []
     let tools = state.tools
     let pendingTools = state.pendingTools
-    let latestToolIndex = state.latestToolIndex
-    let nextToolIndex = state.nextToolIndex
 
     let lifecycle = state.lifecycle
 
     const reasoning = reasoningDelta(delta, state.reasoningField)
-    const hasLateContent =
-      Boolean(delta?.content) ||
-      reasoning !== undefined ||
-      (Array.isArray(delta?.reasoning_details) && delta.reasoning_details.length > 0) ||
-      toolDeltas.some(
-        (tool) => Boolean(tool.id) || Boolean(tool.function?.name) || Boolean(tool.function?.arguments),
-      )
-    if (state.finishReason !== undefined) {
-      if (hasLateContent)
-        return yield* ProviderShared.eventError(ADAPTER, "OpenAI Chat received content after the finish reason")
-      return [{ ...state, usage }, events] as const
-    }
-
     const reasoningField = state.reasoningField ?? (!state.lifecycle.text.has("text-0") ? reasoning?.field : undefined)
     const detailDelta = Array.isArray(delta?.reasoning_details) ? delta.reasoning_details : undefined
     if (detailDelta !== undefined) appendReasoningDetails(state.reasoningDetails, detailDelta)
@@ -744,37 +694,24 @@ const step = (state: ParserState, event: OpenAIChatEvent) =>
       lifecycle = Lifecycle.textDelta(lifecycle, events, "text-0", delta.content)
     }
 
-    // Compatible providers may omit indexes. Prefer durable identity, then use
-    // batch position for parallel deltas or the latest call for sparse chunks.
-    for (const [position, tool] of toolDeltas.entries()) {
-      const matched = toolIndexByID(tools, pendingTools, tool.id || undefined)
-      const fallback = toolDeltas.length > 1 ? position : (latestToolIndex ?? position)
-      const fallbackTool = tools[fallback] ?? pendingTools[fallback]
-      const index =
-        tool.index ?? matched ??
-        (tool.id && fallbackTool?.id && fallbackTool.id !== tool.id ? nextToolIndex : fallback)
-      const current = tools[index]
-      const pending = pendingTools[index]
+    for (const tool of toolDeltas) {
+      const current = tools[tool.index]
+      const pending = pendingTools[tool.index]
       const id = current?.id ?? pending?.id ?? (tool.id || undefined)
       const name = current?.name ?? pending?.name ?? (tool.function?.name || undefined)
       const text = `${pending?.input ?? ""}${tool.function?.arguments ?? ""}`
-      latestToolIndex = index
-      nextToolIndex = Math.max(nextToolIndex, index + 1)
       if (!current && (!id || !name)) {
-        pendingTools = {
-          ...pendingTools,
-          [index]: { id: id || undefined, name: name || undefined, input: text },
-        }
+        pendingTools = { ...pendingTools, [tool.index]: { id: id || undefined, name: name || undefined, input: text } }
         continue
       }
       if (pending) {
         pendingTools = { ...pendingTools }
-        delete pendingTools[index]
+        delete pendingTools[tool.index]
       }
       const result = ToolStream.appendOrStart(
         ADAPTER,
         tools,
-        index,
+        tool.index,
         { id: id || undefined, name: name || undefined, text },
         "OpenAI Chat tool call delta is missing id or name",
       )
@@ -806,8 +743,6 @@ const step = (state: ParserState, event: OpenAIChatEvent) =>
         reasoningDetails: state.reasoningDetails,
         reasoningDetailsObserved,
         reasoningEmitted,
-        latestToolIndex,
-        nextToolIndex,
       },
       events,
     ] as const
@@ -864,7 +799,6 @@ export const protocol = Protocol.make({
       reasoningDetails: [],
       reasoningDetailsObserved: false,
       reasoningEmitted: false,
-      nextToolIndex: 0,
     }),
     step,
     onHalt: finishEvents,

packages/ai/src/protocols/utils/gemini-tool-schema.ts

@@ -61,57 +61,37 @@ const emptyObjectSchema = (schema: Record<string, unknown>) =>
   (!isRecord(schema.properties) || Object.keys(schema.properties).length === 0) &&
   !schema.additionalProperties
 
-const projectNode = (schema: unknown, nested = false): Record<string, unknown> | undefined => {
+const projectNode = (schema: unknown): Record<string, unknown> | undefined => {
   if (!isRecord(schema)) return undefined
-  if (!nested && emptyObjectSchema(schema)) return undefined
-  const types = Array.isArray(schema.type) ? schema.type.filter((type) => type !== "null") : undefined
-  const anyOf = Array.isArray(schema.anyOf) ? schema.anyOf : undefined
-  const hasNullAnyOf = anyOf?.some((item) => isRecord(item) && item.type === "null") ?? false
-  const anyOfTypes = hasNullAnyOf ? anyOf?.filter((item) => !isRecord(item) || item.type !== "null") : anyOf
-  const flattenedAnyOf = hasNullAnyOf && anyOfTypes?.length === 1 ? projectNode(anyOfTypes[0], true) : undefined
-  const result = Object.fromEntries(
+  if (emptyObjectSchema(schema)) return undefined
+  return Object.fromEntries(
     [
       ["description", schema.description],
       ["required", schema.required],
       ["format", schema.format],
-      ["type", types ? (types.length === 0 ? "null" : undefined) : schema.type],
-      [
-        "nullable",
-        (Array.isArray(schema.type) && schema.type.includes("null") && types && types.length > 0) || hasNullAnyOf
-          ? true
-          : undefined,
-      ],
+      ["type", Array.isArray(schema.type) ? schema.type.filter((type) => type !== "null")[0] : schema.type],
+      ["nullable", Array.isArray(schema.type) && schema.type.includes("null") ? true : undefined],
       ["enum", schema.const !== undefined ? [schema.const] : schema.enum],
       [
         "properties",
         isRecord(schema.properties)
-          ? Object.fromEntries(Object.entries(schema.properties).map(([key, value]) => [key, projectNode(value, true)]))
+          ? Object.fromEntries(Object.entries(schema.properties).map(([key, value]) => [key, projectNode(value)]))
           : undefined,
       ],
       [
         "items",
         Array.isArray(schema.items)
-          ? schema.items.map((item) => projectNode(item, true))
+          ? schema.items.map(projectNode)
           : schema.items === undefined
             ? undefined
-            : projectNode(schema.items, true),
+            : projectNode(schema.items),
       ],
-      ["allOf", Array.isArray(schema.allOf) ? schema.allOf.map((item) => projectNode(item, true)) : undefined],
-      [
-        "anyOf",
-        anyOfTypes
-          ? hasNullAnyOf && anyOfTypes.length === 1
-            ? undefined
-            : anyOfTypes.map((item) => projectNode(item, true))
-          : types && types.length > 0
-            ? types.map((type) => ({ type }))
-            : undefined,
-      ],
-      ["oneOf", Array.isArray(schema.oneOf) ? schema.oneOf.map((item) => projectNode(item, true)) : undefined],
+      ["allOf", Array.isArray(schema.allOf) ? schema.allOf.map(projectNode) : undefined],
+      ["anyOf", Array.isArray(schema.anyOf) ? schema.anyOf.map(projectNode) : undefined],
+      ["oneOf", Array.isArray(schema.oneOf) ? schema.oneOf.map(projectNode) : undefined],
       ["minLength", schema.minLength],
     ].filter((entry) => entry[1] !== undefined),
   )
-  return flattenedAnyOf ? { ...result, ...flattenedAnyOf } : result
 }
 
 export const convert = (schema: unknown) => projectNode(sanitizeNode(schema))

packages/ai/src/protocols/utils/open-responses-options.ts

@@ -33,6 +33,7 @@ export const ServiceTierSchema = Schema.Literals(ServiceTiers)
 export interface Resolved {
   readonly instructions?: string
   readonly store?: boolean
+  readonly promptCacheKey?: string
   readonly reasoningEffort?: string
   readonly reasoningSummary?: "auto" | "concise" | "detailed"
   readonly include?: ReadonlyArray<ResponseIncludable>
@@ -49,6 +50,7 @@ export const resolve = (request: LLMRequest): Resolved => {
   return {
     instructions: typeof input?.instructions === "string" ? input.instructions : undefined,
     store: typeof input?.store === "boolean" ? input.store : undefined,
+    promptCacheKey: typeof input?.promptCacheKey === "string" ? input.promptCacheKey : undefined,
     reasoningEffort: typeof input?.reasoningEffort === "string" ? input.reasoningEffort : undefined,
     reasoningSummary:
       reasoningSummary === "auto" || reasoningSummary === "concise" || reasoningSummary === "detailed"

packages/ai/src/providers/azure.ts

@@ -5,7 +5,6 @@ import type { ProviderPackage } from "../provider-package"
 import { ProviderID, type ModelID } from "../schema"
 import * as OpenAIChat from "../protocols/openai-chat"
 import * as OpenAIResponses from "../protocols/openai-responses"
-import { ProviderShared } from "../protocols/shared"
 import { withOpenAIOptions, type OpenAIProviderOptionsInput } from "./openai-options"
 
 export const id = ProviderID.make("azure")
@@ -20,7 +19,7 @@ export type LanguageModelOptions = AzureURL &
   ProviderAuthOption<"optional"> & {
     readonly apiVersion?: string
     readonly queryParams?: Record<string, string>
-    readonly useDeploymentBasedUrls?: boolean
+    readonly useCompletionUrls?: boolean
     readonly providerOptions?: OpenAIProviderOptionsInput
   }
 export type Config = LanguageModelOptions
@@ -30,22 +29,27 @@ export type Settings = ProviderPackage.Settings &
     readonly apiKey?: string
     readonly apiVersion?: string
     readonly queryParams?: Readonly<Record<string, string>>
-    readonly useDeploymentBasedUrls?: boolean
     readonly providerOptions?: OpenAIProviderOptionsInput
   }
 
-const resourceBaseURL = (resourceName: string) => `https://${resourceName.trim()}.openai.azure.com/openai`
+const resourceBaseURL = (resourceName: string) => `https://${resourceName.trim()}.openai.azure.com/openai/v1`
 
 const responsesRoute = OpenAIResponses.route.with({
   id: "azure-openai-responses",
   provider: id,
   auth: routeAuth,
+  endpoint: {
+    query: { "api-version": "v1" },
+  },
 })
 
 const chatRoute = OpenAIChat.route.with({
   id: "azure-openai-chat",
   provider: id,
   auth: routeAuth,
+  endpoint: {
+    query: { "api-version": "v1" },
+  },
 })
 
 export const routes = [responsesRoute, chatRoute]
@@ -55,7 +59,7 @@ const defaults = (input: Config) => {
     apiKey: _,
     apiVersion: _apiVersion,
     resourceName: _resourceName,
-    useDeploymentBasedUrls: _useDeploymentBasedUrls,
+    useCompletionUrls: _useCompletionUrls,
     baseURL: _baseURL,
     queryParams: _queryParams,
     ...rest
@@ -76,39 +80,37 @@ const auth = (input: Config) => {
   )
 }
 
-const configuredRoute = <Body, Prepared>(route: RouteDef<Body, Prepared>, input: Config, modelID: string | ModelID) =>
+const configuredRoute = <Body, Prepared>(route: RouteDef<Body, Prepared>, input: Config) =>
   route.with({
     auth: auth(input),
-    endpoint: endpoint(input, modelID),
+    endpoint: {
+      // AtLeastOne guarantees at least one is set; baseURL wins if both are.
+      baseURL: input.baseURL ?? resourceBaseURL(input.resourceName!),
+      query: {
+        ...(input.apiVersion ? { "api-version": input.apiVersion } : {}),
+        ...input.queryParams,
+      },
+    },
   })
 
-function endpoint(input: Config, modelID: string | ModelID) {
-  const baseURL = ProviderShared.trimBaseUrl(input.baseURL ?? resourceBaseURL(input.resourceName!))
-  const query = { "api-version": input.apiVersion ?? "v1", ...input.queryParams }
-
-  if (input.useDeploymentBasedUrls) return { baseURL: `${baseURL}/deployments/${modelID}`, query }
-  if (input.baseURL !== undefined && !new URL(input.baseURL).hostname.endsWith(".openai.azure.com")) {
-    return { baseURL, query: input.queryParams }
-  }
-  return { baseURL: `${baseURL}/v1`, query }
-}
-
 export const configure = (input: Config) => {
+  const configuredResponsesRoute = configuredRoute(responsesRoute, input)
+  const configuredChatRoute = configuredRoute(chatRoute, input)
   const modelDefaults = defaults(input)
 
   const responses = (modelID: string | ModelID) =>
-    configuredRoute(responsesRoute, input, modelID)
+    configuredResponsesRoute
       .with(withOpenAIOptions(modelID, modelDefaults))
       .model<OpenAIProviderOptionsInput>({ id: modelID })
 
   const chat = (modelID: string | ModelID) =>
-    configuredRoute(chatRoute, input, modelID)
+    configuredChatRoute
       .with(withOpenAIOptions(modelID, modelDefaults))
       .model<OpenAIProviderOptionsInput>({ id: modelID })
 
   return {
     id,
-    model: responses,
+    model: (modelID: string | ModelID) => (input.useCompletionUrls === true ? chat(modelID) : responses(modelID)),
     responses,
     chat,
     configure,
@@ -129,7 +131,6 @@ const config = (settings: Settings): Config => {
     limits: settings.limits,
     providerOptions: settings.providerOptions,
     queryParams: settings.queryParams === undefined ? undefined : { ...settings.queryParams },
-    useDeploymentBasedUrls: settings.useDeploymentBasedUrls,
   }
   if (settings.baseURL !== undefined) return { ...common, baseURL: settings.baseURL }
   if (settings.resourceName !== undefined) return { ...common, resourceName: settings.resourceName }

packages/ai/src/providers/google-vertex-messages.ts

@@ -15,7 +15,8 @@ export type AnthropicThinkingInput = AnthropicMessages.ThinkingInput
 
 const VERSION = "vertex-2023-10-16" as const
 
-export const id = ProviderID.make("google-vertex")
+// models.dev uses this provider id even though the API contract is Anthropic Messages.
+export const id = ProviderID.make("google-vertex-anthropic")
 
 export type Config = RouteDefaultsInput &
   GoogleVertexShared.OAuthOptions & {

packages/ai/src/providers/open-responses-options.ts

@@ -5,6 +5,7 @@ export interface OpenResponsesOptionsInput {
   readonly [key: string]: unknown
   readonly instructions?: string
   readonly store?: boolean
+  readonly promptCacheKey?: string
   readonly reasoningEffort?: ReasoningEffort
   readonly reasoningSummary?: "auto" | "concise" | "detailed"
   readonly include?: ReadonlyArray<ResponseIncludable>

packages/ai/src/providers/openai-options.ts

@@ -17,6 +17,7 @@ const openAIProviderOptions = (options: OpenAIOptionsInput | undefined): Provide
   const openai = Object.fromEntries(
     definedEntries({
       store: options?.store,
+      promptCacheKey: options?.promptCacheKey,
       reasoningEffort: options?.reasoningEffort,
       reasoningSummary: options?.reasoningSummary,
       include: options?.include,

packages/ai/src/providers/openrouter.ts

@@ -55,6 +55,7 @@ export interface OpenRouterOptions {
   readonly debug?: Readonly<{ echo_upstream_body?: boolean }>
   readonly models?: ReadonlyArray<string>
   readonly plugins?: ReadonlyArray<OpenRouterPlugin>
+  readonly promptCacheKey?: string
   readonly provider?: OpenRouterProviderRouting
   readonly reasoning?: Readonly<{
     enabled?: boolean
@@ -121,7 +122,6 @@ export const protocol = Protocol.make({
             ...body,
             messages,
             ...bodyOptions(request.providerOptions?.openrouter),
-            ...(request.promptCacheKey ? { prompt_cache_key: request.promptCacheKey } : {}),
           } as OpenRouterBody
         }),
       ),
@@ -161,6 +161,7 @@ const bodyOptions = (input: unknown) => {
     ...(isRecord(debug) ? { debug } : {}),
     ...(typeof user === "string" ? { user } : {}),
     ...(isRecord(reasoning) ? { reasoning } : {}),
+    ...(typeof promptCacheKey === "string" ? { prompt_cache_key: promptCacheKey } : {}),
   }
 }
 

packages/ai/src/providers/xai.ts

@@ -47,8 +47,6 @@ const chatRoute = Route.make({
   protocol: OpenAIChat.protocol,
   endpoint: Endpoint.path("/chat/completions", { baseURL: OpenAICompatibleProfiles.profiles.xai.baseURL }),
   transport: OpenAICompatibleChat.route.transport,
-  headers: ({ request }): Record<string, string> =>
-    request.promptCacheKey ? { "x-grok-conv-id": request.promptCacheKey } : {},
 })
 
 export const routes = [responsesRoute, chatRoute]

packages/ai/src/schema/messages.ts

@@ -272,8 +272,6 @@ export class LLMRequest extends Schema.Class<LLMRequest>("LLM.Request")({
   providerOptions: Schema.optional(ProviderOptions),
   http: Schema.optional(HttpOptions),
   cache: Schema.optional(CachePolicy),
-  // Stable cache affinity for protocols that support provider-managed prompt caching.
-  promptCacheKey: Schema.optional(Schema.String),
   metadata: Schema.optional(Schema.Record(Schema.String, Schema.Unknown)),
 }) {}
 
@@ -291,7 +289,6 @@ export namespace LLMRequest {
     providerOptions: request.providerOptions,
     http: request.http,
     cache: request.cache,
-    promptCacheKey: request.promptCacheKey,
     metadata: request.metadata,
   })
 

packages/ai/src/schema/options.ts

@@ -178,7 +178,6 @@ export class LanguageModelCompatibility extends Schema.Class<LanguageModelCompat
   toolSchema: Schema.optional(LanguageModelToolSchemaCompatibility),
   reasoningField: Schema.optional(Schema.String),
   maxTokensField: Schema.optional(LanguageModelMaxTokensFieldCompatibility),
-  requireFinishReason: Schema.optional(Schema.Boolean),
 }) {}
 
 export namespace LanguageModelCompatibility {

packages/ai/test/llm.test.ts

@@ -102,7 +102,7 @@ describe("llm constructors", () => {
     const updated = LanguageModel.update(base, {
       route: responsesRoute,
       defaults: { generation: { maxTokens: 20 } },
-      compatibility: { toolSchema: "gemini", requireFinishReason: false },
+      compatibility: { toolSchema: "gemini" },
     })
     const updatedInput = LanguageModel.input(updated)
 
@@ -110,7 +110,7 @@ describe("llm constructors", () => {
     expect(String(updated.id)).toBe("fake-model")
     expect(updated.route).toBe(responsesRoute)
     expect(updated.defaults?.generation).toEqual({ maxTokens: 20 })
-    expect(updated.compatibility).toEqual({ toolSchema: "gemini", requireFinishReason: false })
+    expect(updated.compatibility).toEqual({ toolSchema: "gemini" })
     expect(updatedInput.defaults).toBe(updated.defaults)
     expect(updatedInput.compatibility).toBe(updated.compatibility)
     expect(String(updatedInput.provider)).toBe("fake")

packages/ai/test/provider-options/cloudflare.types.ts

@@ -3,11 +3,11 @@ import { CloudflareWorkersAI } from "../../src/providers"
 
 const model = CloudflareWorkersAI.configure({ accountId: "account", apiKey: "test" }).model("model")
 
-LLM.request({ model, prompt: "Hello", promptCacheKey: "cache" })
+LLM.request({ model, prompt: "Hello", providerOptions: { openai: { promptCacheKey: "cache" } } })
 
 LLM.request({
   model,
   prompt: "Hello",
-  // @ts-expect-error Prompt cache keys must be strings.
-  promptCacheKey: 1,
+  // @ts-expect-error Cloudflare's OpenAI-compatible prompt cache key must be a string.
+  providerOptions: { openai: { promptCacheKey: 1 } },
 })

packages/ai/test/provider-package.test.ts

@@ -209,27 +209,6 @@ describe("provider package entrypoints", () => {
     expect(chat.route.id).toBe("azure-openai-chat")
   })
 
-  test("constructs Azure deployment URLs and preserves custom gateway URLs", async () => {
-    const Azure = await import("@opencode-ai/ai/providers/azure")
-    const deployment = Azure.model("custom-deployment", {
-      apiKey: "fixture",
-      resourceName: "opencode-test",
-      apiVersion: "2025-01-01-preview",
-      useDeploymentBasedUrls: true,
-    })
-    const gateway = Azure.model("gateway-model", {
-      apiKey: "fixture",
-      baseURL: "https://gateway.example/azure/",
-    })
-
-    expect(deployment.route.endpoint).toMatchObject({
-      baseURL: "https://opencode-test.openai.azure.com/openai/deployments/custom-deployment",
-      query: { "api-version": "2025-01-01-preview" },
-    })
-    expect(gateway.route.endpoint.baseURL).toBe("https://gateway.example/azure")
-    expect(gateway.route.endpoint.query).toBeUndefined()
-  })
-
   test("maps Google package settings onto the Gemini model", async () => {
     const Google = await import("@opencode-ai/ai/providers/google")
     const selected = Google.model("gemini-2.5-flash", {

packages/ai/test/provider/gemini.test.ts

@@ -16,13 +16,6 @@ const model = Gemini.route
   })
   .model({ id: "gemini-2.5-flash" })
 
-const gemini3 = Gemini.route
-  .with({
-    endpoint: { baseURL: "https://generativelanguage.test/v1beta/" },
-    auth: Auth.header("x-goog-api-key", "test"),
-  })
-  .model({ id: "gemini-3-flash-preview" })
-
 const request = LLM.request({
   id: "req_1",
   model,
@@ -93,39 +86,6 @@ describe("Gemini route", () => {
     }),
   )
 
-  it.effect("forwards standard Gemini generation options", () =>
-    Effect.gen(function* () {
-      const prepared = yield* compileRequest(
-        LLM.request({
-          model,
-          prompt: "Say hello.",
-          generation: {
-            maxTokens: 40,
-            temperature: 0.2,
-            topP: 0.8,
-            topK: 12,
-            frequencyPenalty: 0.3,
-            presencePenalty: 0.4,
-            seed: 42,
-            stop: ["done"],
-          },
-        }),
-      )
-
-      expect(prepared.body.generationConfig).toEqual({
-        maxOutputTokens: 40,
-        temperature: 0.2,
-        topP: 0.8,
-        topK: 12,
-        frequencyPenalty: 0.3,
-        presencePenalty: 0.4,
-        seed: 42,
-        stopSequences: ["done"],
-        thinkingConfig: undefined,
-      })
-    }),
-  )
-
   it.effect("lowers chronological system updates to wrapped user text in order", () =>
     Effect.gen(function* () {
       const prepared = yield* compileRequest(
@@ -390,100 +350,6 @@ describe("Gemini route", () => {
     }),
   )
 
-  it.effect("preserves nested empty object tool schemas", () =>
-    Effect.gen(function* () {
-      const prepared = yield* compileRequest(
-        LLM.request({
-          model,
-          prompt: "Use the tool.",
-          tools: [
-            {
-              name: "configure",
-              description: "Configure the operation",
-              inputSchema: {
-                type: "object",
-                required: ["options"],
-                properties: {
-                  options: { type: "object", description: "Optional provider settings", properties: {} },
-                },
-              },
-            },
-          ],
-        }),
-      )
-
-      expect(prepared.body.tools).toEqual([
-        {
-          functionDeclarations: [
-            {
-              name: "configure",
-              description: "Configure the operation",
-              parameters: {
-                type: "object",
-                required: ["options"],
-                properties: {
-                  options: { type: "object", description: "Optional provider settings", properties: {} },
-                },
-              },
-            },
-          ],
-        },
-      ])
-    }),
-  )
-
-  it.effect("projects Gemini type arrays without narrowing their allowed values", () =>
-    Effect.gen(function* () {
-      const prepared = yield* compileRequest(
-        LLM.request({
-          model,
-          prompt: "Use the tool.",
-          tools: [
-            {
-              name: "filter",
-              description: "Filter values",
-              inputSchema: {
-                type: "object",
-                properties: {
-                  status: { type: ["number", "string"], description: "Status filter" },
-                  maybe: { type: ["string", "null"] },
-                  nothing: { type: ["null"] },
-                  explicit: { anyOf: [{ type: "string" }, { type: "null" }] },
-                  choice: { anyOf: [{ type: "string" }, { type: "number" }, { type: "null" }] },
-                },
-              },
-            },
-          ],
-        }),
-      )
-
-      expect(prepared.body.tools?.[0]?.functionDeclarations[0]?.parameters).toEqual({
-        type: "object",
-        properties: {
-          status: {
-            description: "Status filter",
-            anyOf: [{ type: "number" }, { type: "string" }],
-          },
-          maybe: {
-            nullable: true,
-            anyOf: [{ type: "string" }],
-          },
-          nothing: {
-            type: "null",
-          },
-          explicit: {
-            type: "string",
-            nullable: true,
-          },
-          choice: {
-            anyOf: [{ type: "string" }, { type: "number" }],
-            nullable: true,
-          },
-        },
-      })
-    }),
-  )
-
   it.effect("parses text, reasoning, and usage stream fixtures", () =>
     Effect.gen(function* () {
       const body = sseEvents(
@@ -670,44 +536,6 @@ describe("Gemini route", () => {
     }),
   )
 
-  it.effect("replays unsigned Gemini 3 tool calls with the validator bypass sentinel", () =>
-    Effect.gen(function* () {
-      const prepared = yield* compileRequest(
-        LLM.request({
-          model: gemini3,
-          messages: [
-            Message.assistant([ToolCallPart.make({ id: "tool_0", name: "lookup", input: { query: "weather" } })]),
-            Message.tool({ id: "tool_0", name: "lookup", result: "done", resultType: "text" }),
-          ],
-        }),
-      )
-
-      expect(prepared.body.contents).toEqual([
-        {
-          role: "model",
-          parts: [
-            {
-              functionCall: { id: undefined, name: "lookup", args: { query: "weather" } },
-              thoughtSignature: "skip_thought_signature_validator",
-            },
-          ],
-        },
-        {
-          role: "user",
-          parts: [
-            {
-              functionResponse: {
-                id: undefined,
-                name: "lookup",
-                response: { name: "lookup", content: "done" },
-              },
-            },
-          ],
-        },
-      ])
-    }),
-  )
-
   it.effect("emits streamed tool calls and maps finish reason", () =>
     Effect.gen(function* () {
       const body = sseEvents({

packages/ai/test/provider/google-vertex.test.ts

@@ -56,14 +56,13 @@ describe("Google Vertex providers", () => {
 
   it.effect("projects Anthropic Messages onto the Vertex raw-predict API", () =>
     Effect.gen(function* () {
-      const model = GoogleVertexMessages.configure({
-        accessToken: "vertex-token",
-        location: "eu",
-        project: "vertex-project",
-      }).model("claude-sonnet-4-6")
       const response = yield* LLMClient.generate(
         LLM.request({
-          model,
+          model: GoogleVertexMessages.configure({
+            accessToken: "vertex-token",
+            location: "eu",
+            project: "vertex-project",
+          }).model("claude-sonnet-4-6"),
           prompt: "Say hello.",
         }),
       ).pipe(
@@ -98,7 +97,6 @@ describe("Google Vertex providers", () => {
         ),
       )
 
-      expect(model.provider).toBe("google-vertex")
       expect(response.text).toBe("Hello.")
     }),
   )

packages/ai/test/provider/openai-chat.test.ts

@@ -15,8 +15,6 @@ import {
 } from "../../src"
 import * as Azure from "../../src/providers/azure"
 import * as OpenAI from "../../src/providers/openai"
-import * as OpenAICompatible from "../../src/providers/openai-compatible"
-import * as XAI from "../../src/providers/xai"
 import * as OpenAIChat from "../../src/protocols/openai-chat"
 import { ProviderShared } from "../../src/protocols/shared"
 import { Auth, LLMClient } from "../../src/route"
@@ -156,47 +154,6 @@ describe("OpenAI Chat route", () => {
     }),
   )
 
-  it.effect("maps the request prompt cache key", () =>
-    Effect.gen(function* () {
-      const prepared = yield* compileRequest(
-        LLM.request({
-          model: OpenAICompatible.configure({
-            baseURL: "https://api.compatible.test/v1",
-            apiKey: "test",
-          }).model("compatible-model"),
-          prompt: "Hello",
-          promptCacheKey: "session_123",
-        }),
-      )
-
-      expect(prepared.body.prompt_cache_key).toBe("session_123")
-    }),
-  )
-
-  it.effect("maps the xAI Chat prompt cache key to conversation affinity", () =>
-    LLMClient.generate(
-      LLM.request({
-        model: XAI.configure({ apiKey: "test", baseURL: "https://api.x.ai/v1" }).chat("grok-4.5"),
-        prompt: "Hello",
-        promptCacheKey: "session_123",
-      }),
-    ).pipe(
-      Effect.provide(
-        dynamicResponse((input) =>
-          Effect.gen(function* () {
-            const web = yield* HttpClientRequest.toWeb(input.request).pipe(Effect.orDie)
-            expect(web.headers.get("x-grok-conv-id")).toBe("session_123")
-            const body = decodeJson(yield* Effect.promise(() => web.text()))
-            expect(ProviderShared.isRecord(body) ? body.prompt_cache_key : undefined).toBe("session_123")
-            return input.respond(sseEvents(deltaChunk({}, "stop")), {
-              headers: { "content-type": "text/event-stream" },
-            })
-          }),
-        ),
-      ),
-    ),
-  )
-
   it.effect("passes through custom OpenAI-compatible reasoning effort strings", () =>
     Effect.gen(function* () {
       const prepared = yield* compileRequest(

packages/ai/test/provider/openai-compatible-chat.test.ts

@@ -7,7 +7,7 @@ import { compileRequest } from "../../src/route/client"
 import * as OpenAICompatible from "../../src/providers/openai-compatible"
 import * as OpenAICompatibleChat from "../../src/protocols/openai-compatible-chat"
 import { it } from "../lib/effect"
-import { dynamicResponse, fixedResponse } from "../lib/http"
+import { dynamicResponse } from "../lib/http"
 import { sseEvents } from "../lib/sse"
 
 const Json = Schema.fromJsonString(Schema.Unknown)
@@ -253,106 +253,4 @@ describe("OpenAI-compatible Chat route", () => {
       })
     }),
   )
-
-  it.effect("accepts nullable usage and preserves provider fields", () =>
-    Effect.gen(function* () {
-      const response = yield* LLMClient.generate(request).pipe(
-        Effect.provide(
-          fixedResponse(
-            sseEvents(
-              deltaChunk({ content: "Hello" }),
-              deltaChunk({}, "stop"),
-              usageChunk({
-                prompt_tokens: null,
-                completion_tokens: null,
-                total_tokens: null,
-                prompt_tokens_details: { cached_tokens: null, vendor_cache_tokens: 3 },
-                completion_tokens_details: {
-                  reasoning_tokens: null,
-                  accepted_prediction_tokens: null,
-                  rejected_prediction_tokens: null,
-                },
-                cost: "0.001",
-              }),
-            ),
-          ),
-        ),
-      )
-
-      expect(response.usage).toMatchObject({
-        inputTokens: undefined,
-        outputTokens: undefined,
-        totalTokens: undefined,
-        providerMetadata: {
-          openai: {
-            prompt_tokens: null,
-            completion_tokens: null,
-            total_tokens: null,
-            prompt_tokens_details: { cached_tokens: null, vendor_cache_tokens: 3 },
-            cost: "0.001",
-          },
-        },
-      })
-    }),
-  )
-
-  it.effect("assembles indexless parallel tool calls across sparse chunks", () =>
-    Effect.gen(function* () {
-      const response = yield* LLMClient.generate(
-        LLMRequest.update(request, {
-          tools: [ToolDefinition.make({ name: "weather", description: "Get weather", inputSchema: { type: "object" } })],
-        }),
-      ).pipe(
-        Effect.provide(
-          fixedResponse(
-            sseEvents(
-              deltaChunk({
-                tool_calls: [
-                  { id: "call_paris", function: { name: "weather", arguments: '{"city":"' } },
-                  { index: null, id: "call_london", function: { name: "weather", arguments: '{"city":"' } },
-                ],
-              }),
-              deltaChunk({ tool_calls: [{ function: { arguments: 'London"}' } }] }),
-              deltaChunk({ tool_calls: [{ id: "call_paris", function: { arguments: 'Paris"}' } }] }),
-              deltaChunk({}, "tool_calls"),
-            ),
-          ),
-        ),
-      )
-
-      expect(response.toolCalls).toMatchObject([
-        { id: "call_paris", name: "weather", input: { city: "Paris" } },
-        { id: "call_london", name: "weather", input: { city: "London" } },
-      ])
-    }),
-  )
-
-  it.effect("treats an empty finish reason as terminal", () =>
-    Effect.gen(function* () {
-      const response = yield* LLMClient.generate(request).pipe(
-        Effect.provide(fixedResponse(sseEvents(deltaChunk({ content: "Hello" }), deltaChunk({}, "")))),
-      )
-
-      expect(response.finishReason).toEqual({ normalized: "unknown", raw: "" })
-    }),
-  )
-
-  it.effect("rejects content after a terminal chunk", () =>
-    Effect.gen(function* () {
-      const error = yield* LLMClient.generate(request).pipe(
-        Effect.provide(
-          fixedResponse(
-            sseEvents(
-              deltaChunk({ content: "Hello" }),
-              deltaChunk({}, "stop"),
-              deltaChunk({ tool_calls: [{ index: 0, id: "call_1", function: { name: "lookup", arguments: "{}" } }] }),
-            ),
-          ),
-        ),
-        Effect.flip,
-      )
-
-      expect(error.message).toContain("OpenAI Chat received content after the finish reason")
-    }),
-  )
 })

packages/ai/test/provider/openai-responses-cache.recorded.test.ts

@@ -20,7 +20,7 @@ const cacheRequest = LLM.request({
   system: LARGE_CACHEABLE_SYSTEM,
   prompt: "Say hi.",
   generation: { maxTokens: 16, temperature: 0 },
-  promptCacheKey: "recorded-cache-test",
+  providerOptions: { openai: { promptCacheKey: "recorded-cache-test" } },
 })
 
 const recorded = recordedTests({

packages/ai/test/provider/openai-responses.test.ts

@@ -682,9 +682,9 @@ describe("OpenAI Responses route", () => {
         LLM.request({
           model: OpenAI.configure({ baseURL: "https://api.openai.test/v1/", apiKey: "test" }).model("gpt-5.2"),
           prompt: "think",
-          promptCacheKey: "session_123",
           providerOptions: {
             openai: {
+              promptCacheKey: "session_123",
               reasoningEffort: "high",
               reasoningSummary: "auto",
               include: ["reasoning.encrypted_content"],
@@ -803,16 +803,17 @@ describe("OpenAI Responses route", () => {
     }),
   )
 
-  it.effect("maps the request prompt cache key", () =>
+  it.effect("request OpenAI provider options override route defaults", () =>
     Effect.gen(function* () {
       const prepared = yield* compileRequest(
         LLM.request({
           model: OpenAI.configure({
             baseURL: "https://api.openai.test/v1/",
             apiKey: "test",
+            providerOptions: { openai: { promptCacheKey: "model_cache" } },
           }).model("gpt-4.1-mini"),
           prompt: "no cache",
-          promptCacheKey: "request_cache",
+          providerOptions: { openai: { promptCacheKey: "request_cache" } },
         }),
       )
 

packages/ai/test/provider/openrouter.test.ts

@@ -162,6 +162,7 @@ describe("OpenRouter", () => {
               openrouter: {
                 usage: true,
                 reasoning: { effort: "high" },
+                promptCacheKey: "session_123",
                 models: ["anthropic/claude-sonnet-4.6", "google/gemini-3.1-pro"],
                 provider: { order: ["anthropic", "google"], require_parameters: true },
                 plugins: [{ id: "response-healing" }],
@@ -173,7 +174,6 @@ describe("OpenRouter", () => {
             },
           }).model("anthropic/claude-3.7-sonnet:thinking"),
           prompt: "Think briefly.",
-          promptCacheKey: "session_123",
         }),
       )
 

packages/app/V1_API_MIGRATION.md

@@ -0,0 +1,220 @@
+# V1 API Migration Checklist
+
+The app is currently hybrid. In this document, V1 refers to the legacy unprefixed server APIs used by `@opencode-ai/sdk/v2`, despite the SDK package name.
+
+## Events
+
+- [x] Replace `GET /global/event` with `GET /api/event`.
+  - `src/context/server-sdk.tsx`
+- [x] Reduce current granular session and message events into the existing app projections.
+  - `src/context/server-session-v2-reducer.ts`
+  - `src/context/server-session.ts`
+- [ ] Remove transitional session event dependencies: `session.created`, `session.updated`, `session.diff`, `session.status`, `session.idle`, and `session.error`.
+  - `src/context/global-sync/event-reducer.ts`
+  - `src/context/server-session.ts`
+  - `src/context/notification.tsx`
+  - `src/pages/session/usage-exceeded-dialogs.tsx`
+- [ ] Remove legacy message event compatibility: `message.updated`, `message.removed`, `message.part.updated`, `message.part.removed`, and `message.part.delta`.
+  - `src/context/global-sync/event-reducer.ts`
+  - `src/context/server-session.ts`
+- [x] Adapt current permission and question events to the existing request model.
+  - `src/context/global-sync/event-reducer.ts`
+  - `src/context/permission.tsx`
+- [x] Consume current file watcher events.
+  - `src/context/file.tsx`
+- [x] Consume current VCS events.
+  - `src/context/global-sync/event-reducer.ts`
+  - `src/pages/session.tsx`
+- [x] Consume current `pty.exited` events.
+  - `src/context/terminal.tsx`
+- [ ] Migrate LSP and reference events.
+  - `src/context/global-sync/event-reducer.ts`
+
+## Sessions
+
+- [x] Replace `GET /session/status` with one server-scoped `GET /api/session/active` snapshot plus V2 execution events.
+  - `src/context/server-sync.tsx`
+- [x] Migrate session listing from `GET /session`.
+  - `src/context/server-sync.tsx`
+  - `src/context/directory-sync.ts`
+  - `src/pages/layout.tsx`
+- [x] Migrate the remaining direct session read from `GET /session/:sessionID`.
+  - `src/components/titlebar.tsx`
+- [x] Migrate session updates from `PATCH /session/:sessionID`.
+  - `src/context/directory-sync.ts`
+  - `src/context/layout.tsx`
+  - `src/pages/home.tsx`
+  - `src/pages/layout.tsx`
+  - `src/pages/session/timeline/message-timeline.tsx`
+  - `src/components/titlebar-tab-nav.tsx`
+  - Renames use `POST /api/session/:sessionID/rename`; archival uses `POST /api/session/:sessionID/archive`.
+- [x] Migrate session deletion from `DELETE /session/:sessionID`.
+  - `src/pages/session/timeline/message-timeline.tsx`
+- [x] Remove session diff loading from `GET /session/:sessionID/diff`.
+  - Historical Session diffs remain unavailable until the current API defines their snapshot semantics.
+- [x] Migrate abort from `POST /session/:sessionID/abort`.
+  - `src/components/prompt-input/submit.ts`
+  - `src/pages/session/use-session-commands.tsx`
+  - `src/pages/session.tsx`
+- [x] Migrate revert and unrevert from `POST /session/:sessionID/revert` and `POST /session/:sessionID/unrevert`.
+  - `src/pages/session/use-session-commands.tsx`
+  - `src/pages/session.tsx`
+- [x] Replace `POST /session/:sessionID/summarize` with the current compact API.
+  - `src/pages/session/use-session-commands.tsx`
+- [x] Migrate slash commands from `POST /session/:sessionID/command`.
+  - `src/components/prompt-input/submit.ts`
+- [x] Migrate shell execution from `POST /session/:sessionID/shell`.
+  - `src/components/prompt-input/submit.ts`
+- [x] Migrate session fork from `POST /session/:sessionID/fork`.
+  - `src/components/dialog-fork.tsx`
+- [ ] Migrate sharing from `POST /session/:sessionID/share` and `DELETE /session/:sessionID/share`.
+  - `src/pages/session/use-session-commands.tsx`
+  - `src/pages/session/timeline/message-timeline.tsx`
+  - Blocked: the current API has no sharing contract or implementation.
+
+## Session Compatibility Fallbacks
+
+These calls are retained as fallback adapters. The current production path supplies the current session and message APIs.
+
+- [ ] Remove fallback `GET /session/:sessionID` after compatibility support is unnecessary.
+  - `src/context/server-session.ts`
+- [ ] Remove fallback `GET /session/:sessionID/message` after compatibility support is unnecessary.
+  - `src/context/server-session.ts`
+- [ ] Remove fallback `GET /session/:sessionID/message/:messageID` after compatibility support is unnecessary.
+  - `src/context/server-session.ts`
+
+## Filesystem
+
+- [ ] Migrate file listing from `GET /file`.
+  - `src/context/file.tsx`
+- [ ] Migrate file reads from `GET /file/content`.
+  - `src/context/file.tsx`
+  - `src/pages/session/review-tab.tsx`
+  - `src/pages/session/v2/review-panel-v2.tsx`
+- [x] Migrate path discovery from `GET /path` to `GET /api/path`.
+  - `src/context/global-sync/bootstrap.ts`
+  - `src/components/dialog-select-directory.tsx`
+  - `src/components/dialog-select-directory-v2.tsx`
+
+## Projects And Worktrees
+
+- [x] Migrate project listing from `GET /project` to `GET /api/project`.
+  - `src/context/global-sync/bootstrap.ts`
+- [x] Migrate the current project lookup from `GET /project/current` to `GET /api/project/current`.
+  - `src/context/global-sync/bootstrap.ts`
+- [ ] Migrate Git initialization from `POST /project/git/init`.
+  - `src/pages/session.tsx`
+- [x] Migrate project updates from `PATCH /project/:projectID` to `PATCH /api/project/:projectID`.
+  - `src/context/layout.tsx`
+  - `src/components/edit-project.ts`
+  - `src/pages/layout.tsx`
+- [ ] Migrate experimental worktree listing, creation, removal, and reset from `/experimental/worktree`.
+  - `src/pages/layout.tsx`
+  - `src/components/prompt-input/submit.ts`
+  - Listing now uses `GET /api/project/:projectID/directories`; create, removal, and reset remain.
+- [ ] Migrate instance disposal from `POST /instance/dispose`.
+  - `src/pages/layout.tsx`
+
+## VCS
+
+- [x] Migrate repository information from `GET /vcs` to `GET /api/vcs`.
+  - `src/context/global-sync/bootstrap.ts`
+- [x] Migrate diffs from `GET /vcs/diff` to `GET /api/vcs/diff`.
+  - `src/pages/session.tsx`
+- [x] Migrate status from `GET /vcs/status` to `GET /api/vcs/status`.
+  - `src/pages/layout.tsx`
+
+## Configuration And Authentication
+
+- [ ] Migrate global configuration reads from `GET /global/config`.
+  - `src/context/global-sync/bootstrap.ts`
+- [ ] Migrate directory configuration reads from `GET /config`.
+  - `src/context/global-sync/bootstrap.ts`
+- [ ] Migrate global configuration updates from `PATCH /global/config`.
+  - `src/context/server-sync.tsx`
+- [x] Migrate provider authentication method discovery from `GET /provider/auth` to `GET /api/integration/:integrationID`.
+  - `src/components/dialog-connect-provider.tsx`
+- [x] Migrate built-in provider OAuth authorization and callbacks to `/api/integration/:integrationID/connect/oauth/*`.
+  - `src/components/dialog-connect-provider.tsx`
+- [ ] Migrate remaining credentials from `PUT /auth/:providerID` and `DELETE /auth/:providerID`.
+  - Built-in provider key connections now use `POST /api/integration/:integrationID/connect/key`.
+  - `src/components/dialog-connect-provider.tsx`
+  - `src/components/dialog-custom-provider.tsx`
+  - `src/components/settings-providers.tsx`
+  - `src/components/settings-v2/providers.tsx`
+- [ ] Migrate global disposal from `POST /global/dispose`.
+  - `src/components/dialog-connect-provider.tsx`
+  - `src/components/settings-providers.tsx`
+  - `src/components/settings-v2/providers.tsx`
+
+## Permissions And Questions
+
+- [x] Migrate permission listing from `GET /permission` to `GET /api/permission/request`.
+  - `src/context/global-sync/bootstrap.ts`
+  - `src/context/permission.tsx`
+- [x] Migrate permission responses from `/session/:sessionID/permissions/:permissionID`.
+  - `src/context/permission.tsx`
+  - `src/pages/session/composer/session-composer-state.ts`
+- [x] Migrate question listing from `GET /question` to `GET /api/question/request`.
+  - `src/context/global-sync/bootstrap.ts`
+- [x] Migrate question replies and rejections from `/question/:requestID/*` to `/api/session/:sessionID/question/:requestID/*`.
+  - `src/pages/session/composer/session-question-dock.tsx`
+
+## Commands, MCP, LSP, And References
+
+- [x] Migrate command listing from `GET /command` to `GET /api/command`.
+  - `src/context/global-sync/bootstrap.ts`
+  - `src/context/server-sync.tsx`
+- [x] Migrate MCP listing, connection, and disconnection from `/mcp` to `/api/mcp`.
+  - `src/context/server-sync.tsx`
+- [ ] Replace legacy MCP authentication with the Integration OAuth workflow.
+  - `src/context/server-sync.tsx`
+- [x] Migrate experimental resource listing from `GET /experimental/resource` to `GET /api/mcp/resource`.
+  - `src/context/server-sync.tsx`
+- [ ] Migrate LSP status from `GET /lsp`.
+  - `src/context/server-sync.tsx`
+- [x] Move `GET /api/reference` off the legacy generated SDK transport.
+  - `src/context/global-sync/bootstrap.ts`
+
+## Search
+
+- [x] Migrate global session search from `GET /experimental/session` to `GET /api/session`.
+  - `src/components/command-palette.ts`
+  - `src/components/dialog-command-palette-v2.tsx`
+
+## PTY And Terminal
+
+- [x] Migrate PTY creation, reads, updates, and deletion from `/pty` to `/api/pty`.
+  - `src/context/terminal.tsx`
+  - `src/components/terminal.tsx`
+- [x] Migrate shell listing from `GET /pty/shells` to `GET /api/pty/shells`.
+  - `src/components/settings-general.tsx`
+  - `src/components/settings-v2/general.tsx`
+- [x] Migrate connection tokens from `POST /pty/:ptyID/connect-token` to `POST /api/pty/:ptyID/connect-token`.
+  - `src/components/terminal.tsx`
+- [x] Migrate the direct WebSocket connection from `/pty/:ptyID/connect` to `/api/pty/:ptyID/connect`.
+  - `src/components/terminal.tsx`
+
+## Legacy Types And Adapters
+
+These are not V1 network requests, but they keep the UI coupled to V1 data contracts.
+
+- [ ] Replace the current-session-to-legacy-session adapter.
+  - `src/utils/session.ts`
+- [ ] Replace the current-message-to-legacy-message-and-part adapter.
+  - `src/utils/session-message.ts`
+- [ ] Replace current agent, provider, and model adapters to legacy SDK structures.
+  - `src/context/global-sync/utils.ts`
+- [ ] Replace legacy `Session`, `Message`, `Part`, `PermissionRequest`, `QuestionRequest`, `Project`, `FileNode`, `FileDiffInfo`, and `Event` types throughout app state and rendering.
+- [ ] Remove the `@opencode-ai/sdk` runtime dependency after all legacy calls and types are gone.
+  - `package.json`
+
+## Test Infrastructure
+
+- [ ] Replace V1 endpoint mocks with current API mocks.
+  - `e2e/utils/mock-server.ts`
+- [x] Replace `/global/event` and `/event` interception with current event transport handling.
+  - `e2e/utils/sse-transport.ts`
+- [ ] Replace `SessionV1` and legacy SDK fixtures in timeline performance tests.
+  - `e2e/performance/timeline-stability/fixture.ts`
+- [ ] Remove remaining legacy SDK type fixtures from unit and browser tests.

packages/app/e2e/performance/timeline-stability/fixture.test.ts

@@ -45,6 +45,10 @@ describe("timeline fixture validation", () => {
     expect(first.payload.id).toMatch(/^evt_timeline_\d{4}$/)
     expect(Number(second.payload.id.slice(-4))).toBe(Number(first.payload.id.slice(-4)) + 1)
   })
+
+  test("uses the projected tool ID as its call ID", () => {
+    expect(toolPart("call_1", "read", "running", {})).toMatchObject({ id: "call_1", callID: "call_1" })
+  })
 })
 
 if (false) {

packages/app/e2e/performance/timeline-stability/fixture.ts

@@ -2,8 +2,15 @@ import { base64Encode } from "@opencode-ai/core/util/encode"
 import { Event } from "@opencode-ai/schema/event"
 import { SessionStatusEvent } from "@opencode-ai/schema/session-status-event"
 import { SessionV1 } from "@opencode-ai/schema/session-v1"
-import type { SessionInfo, SessionStatus } from "@opencode-ai/client/promise"
-import type { AssistantMessage, Message, Part, ToolPart, ToolState, UserMessage } from "../../../src/types"
+import type {
+  AssistantMessage,
+  Message,
+  Part,
+  ToolPart,
+  ToolState,
+  UserMessage,
+} from "../../../src/types"
+import type { SessionV1Info, SessionStatus } from "@opencode-ai/client/promise"
 import { expect, type Page } from "@playwright/test"
 import { Schema } from "effect"
 import { mockOpenCodeServer } from "../../utils/mock-server"
@@ -18,7 +25,7 @@ export const assistantID = "msg_1001_timeline_assistant"
 export const title = "Timeline visual stability"
 export const model = { providerID: "opencode", modelID: "claude-opus-4-6", variant: "max" }
 
-type Session = SessionInfo
+type Session = SessionV1Info
 type GlobalEvent = {
   directory: string
   project?: string
@@ -530,11 +537,11 @@ export function project() {
 export function session(input: Partial<Session> = {}): Session {
   return {
     id: sessionID,
+    slug: "timeline-stability",
     projectID,
-    location: { directory },
+    directory,
     title,
-    cost: 0,
-    tokens: { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
+    version: "dev",
     time: { created: 1700000000000, updated: 1700000000000 },
     ...input,
   }

packages/app/e2e/performance/timeline-stability/interaction.spec.ts

@@ -177,8 +177,7 @@ test("shows all and expands historical diff summary without overlap", async ({ p
   const firstUser = userMessage(undefined, {
     summary: {
       diffs: Array.from({ length: 12 }, (_, index) => ({
-         file: `src/diff-${index}.ts`,
-         status: "modified",
+        file: `src/diff-${index}.ts`,
         additions: 1,
         deletions: 1,
         patch: `@@ -1 +1 @@\n-export const value = ${index}\n+export const value = ${index + 1}`,

packages/app/e2e/regression/legacy-new-session.spec.ts

@@ -1,18 +1,19 @@
 import { expect, test } from "@playwright/test"
+import { base64Encode } from "@opencode-ai/core/util/encode"
 import { mockOpenCodeServer } from "../utils/mock-server"
 
-const draftID = "draft_removed_layout_preference"
-const directory = "C:/OpenCode/RemovedLayoutPreference"
+const draftID = "draft_legacy_new_session"
+const directory = "C:/OpenCode/LegacyNewSession"
 const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
 
-test("ignores persisted old layout preferences when opening drafts", async ({ page }) => {
+test("redirects a draft to the legacy new-session route", async ({ page }) => {
   await mockOpenCodeServer(page, {
     directory,
     project: {
-      id: "proj_removed_layout_preference",
+      id: "proj_legacy_new_session",
       worktree: directory,
       vcs: "git",
-      name: "removed-layout-preference",
+      name: "legacy-new-session",
       time: { created: 1700000000000, updated: 1700000000000 },
       sandboxes: [],
     },
@@ -23,6 +24,7 @@ test("ignores persisted old layout preferences when opening drafts", async ({ pa
   await page.addInitScript(
     ({ directory, draftID, server }) => {
       localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: false } }))
+      localStorage.setItem("app-version.v1", JSON.stringify({ version: "1.17.20" }))
       localStorage.setItem(
         "opencode.window.browser.dat:tabs",
         JSON.stringify([{ type: "draft", draftID, server, directory }]),
@@ -33,7 +35,7 @@ test("ignores persisted old layout preferences when opening drafts", async ({ pa
 
   await page.goto(`/new-session?draftId=${draftID}`)
 
-  await expect(page).toHaveURL(`/new-session?draftId=${draftID}`)
-  await expect(page.locator("body")).toHaveAttribute("data-new-layout", "")
-  await expect(page.getByRole("textbox", { name: "Prompt" })).toBeVisible()
+  await expect(page).toHaveURL(`/${base64Encode(directory)}/session`)
+  await expect(page.locator("header[data-tauri-drag-region]")).toBeVisible()
+  await expect(page.locator('[data-component="prompt-input"]')).toBeVisible()
 })

packages/app/e2e/regression/session-timeline-context-resize.spec.ts

@@ -14,8 +14,8 @@ const projectID = "proj_context_resize_regression"
 const sessionID = "ses_context_resize_regression"
 const title = "Context resize regression"
 const model = { providerID: "opencode", modelID: "claude-opus-4-6", variant: "max" }
-const contextIDs = ["ctx_0100_read", "ctx_0101_glob", "ctx_0102_grep", "ctx_0103_list"]
-const followingTextID = `${id("msg_assistant", 10)}:text:0`
+const contextIDs = ["prt_0100_read", "prt_0101_glob", "prt_0102_grep", "prt_0103_list"]
+const followingTextID = "prt_0104_text"
 
 type Message = {
   info: Record<string, unknown> & { id: string; role: "user" | "assistant" }
@@ -295,7 +295,7 @@ function contextTool(
     sessionID,
     messageID,
     type: "tool",
-    callID: partID,
+    callID: `call_${partID}`,
     tool,
     state: {
       status,

packages/app/e2e/regression/session-todo-dock-navigation.spec.ts

@@ -23,7 +23,7 @@ type EventPayload = {
 
 test.use({ viewport: { width: 1440, height: 900 }, reducedMotion: "no-preference" })
 
-test("animates todo opening without replaying it across session tabs", async ({ page }) => {
+test("animates todo lifecycle without replaying it across session tabs", async ({ page }) => {
   test.setTimeout(90_000)
   const events: EventPayload[] = []
   const todos: Record<string, typeof activeTodos> = { [sourceID]: [], [otherID]: [] }
@@ -86,8 +86,28 @@ test("animates todo opening without replaying it across session tabs", async ({
   await switchSession(page, otherID, otherTitle)
   await expect(dock).toHaveCount(0)
 
+  const returningOpen = sampleDock(page, 700)
+  await switchSession(page, sourceID, sourceTitle)
+  const openSamples = (await returningOpen).filter((sample) => sample.present)
+  expect(openSamples.length).toBeGreaterThan(0)
+  expect(openSamples[0]!.opacity).toBeGreaterThan(0.98)
+  expect(openSamples[0]!.height).toBeGreaterThan(70)
+  await expect(dock.locator('[data-state="in_progress"]')).toHaveCount(1)
+
+  const completedTodos = activeTodos.map((todo) => ({ ...todo, status: "completed" }))
+  const closing = sampleDock(page, 1_000)
+  todos[sourceID] = completedTodos
+  events.push(todoEvent(sourceID, completedTodos))
+  await expect(dock).toHaveCount(0)
+  expect((await closing).some((sample) => sample.opacity > 0.05 && sample.opacity < 0.95)).toBe(true)
+  todos[sourceID] = []
+  events.push(todoEvent(sourceID, []))
+
+  await switchSession(page, otherID, otherTitle)
+  const returningEmpty = sampleDock(page, 700)
   await switchSession(page, sourceID, sourceTitle)
   await expect(dock).toHaveCount(0)
+  expect((await returningEmpty).every((sample) => !sample.present)).toBe(true)
 })
 
 function session(id: string, title: string, created: number) {

packages/app/e2e/regression/terminal-tab-switch.spec.ts

@@ -32,7 +32,7 @@ test("keeps the terminal session alive when switching session tabs in a workspac
   const connection = new URL(connections[0]!)
   expect(connection.pathname).toBe(`/api/pty/${ptyID}/connect`)
   expect(connection.searchParams.get("location[directory]")).toBe(directory)
-  expect(connection.searchParams.get("ticket")).toBeNull()
+  expect(connection.searchParams.get("ticket")).toBe("e2e-ticket")
   await writeProbe(page)
 
   await switchTab(page, titleB)

packages/app/e2e/utils/mock-server.ts

@@ -80,8 +80,9 @@ export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
       )
     }
     if (path === "/global/health")
-      return config.protocol === "v2" ? json(route, {}, undefined, 404) : json(route, { healthy: true })
-    if (path === "/api/health") return json(route, { healthy: true, version: "2.0.0", pid: 1 })
+      return config.protocol === "v2" ? json(route, {}) : json(route, { healthy: true })
+    if (path === "/api/health" && config.protocol === "v2")
+      return json(route, { healthy: true, version: "2.0.0", pid: 1 })
     if (path === "/experimental/capabilities") return json(route, { backgroundSubagents: true })
     if (path === "/provider") return json(route, providerConfig(config))
     if (path === "/provider/auth") return json(route, config.integrationMethods ?? {})

packages/app/e2e/utils/sse-transport.ts

@@ -3,7 +3,7 @@ import type { Page } from "@playwright/test"
 export type SseConnectionRecord = {
   id: number
   url: string
-  path: "/api/event"
+  path: "/global/event" | "/event" | "/api/event"
   headers: Record<string, string>
   openedAt: number
   endedAt?: number
@@ -174,7 +174,10 @@ export async function installSseTransport<T>(
       const fetch = (input: RequestInfo | URL, init?: RequestInit) => {
         const request = new Request(input, init)
         const url = new URL(request.url)
-        if (url.origin !== server || url.pathname !== "/api/event")
+        if (
+          url.origin !== server ||
+          (url.pathname !== "/global/event" && url.pathname !== "/event" && url.pathname !== "/api/event")
+        )
           return originalFetch(request)
 
         const id = ++nextConnectionID
@@ -190,9 +193,18 @@ export async function installSseTransport<T>(
             record.controller = controller
             connections.push(record)
             if (retry !== undefined) controller.enqueue(encoder.encode(`retry: ${retry}\n\n`))
-            controller.enqueue(
-              encoder.encode(frame({ id: `evt_mock_connected_${id}`, type: "server.connected", data: {} })),
-            )
+            if (url.pathname === "/api/event")
+              controller.enqueue(
+                encoder.encode(frame({ id: `evt_mock_connected_${id}`, type: "server.connected", data: {} })),
+              )
+            if (url.pathname === "/global/event")
+              controller.enqueue(
+                encoder.encode(
+                  frame({
+                    payload: { id: `evt_mock_connected_${id}`, type: "server.connected", properties: {} },
+                  }),
+                ),
+              )
             request.signal.addEventListener(
               "abort",
               () => {

packages/app/index.html

@@ -20,7 +20,7 @@
     <meta property="twitter:image" content="/social-share.png" />
     <script id="oc-theme-preload-script" src="/oc-theme-preload.js"></script>
   </head>
-  <body data-new-layout class="antialiased overscroll-none font-(family-name:--font-family-text) text-[13px] font-[440] overflow-hidden bg-v2-background-bg-deep">
+  <body class="antialiased overscroll-none text-12-regular overflow-hidden bg-v2-background-bg-deep">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root" class="flex flex-col h-dvh bg-v2-background-bg-deep p-px"></div>
     <script src="/src/entry.tsx" type="module"></script>

packages/app/package.json

@@ -40,7 +40,6 @@
     "@types/luxon": "catalog:",
     "@types/node": "catalog:",
     "@typescript/native-preview": "catalog:",
-    "happy-dom": "20.11.1",
     "tw-animate-css": "1.4.0",
     "typescript": "catalog:",
     "vite": "catalog:",
@@ -57,6 +56,7 @@
     "@opencode-ai/client": "workspace:*",
     "@opencode-ai/core": "workspace:*",
     "@opencode-ai/schema": "workspace:*",
+    "@opencode-ai/sdk": "file:vendor/opencode-ai-sdk-1.18.8-dev.tgz",
     "@opencode-ai/session-ui": "workspace:*",
     "@opencode-ai/ui": "workspace:*",
     "@opencode-ai/util": "workspace:*",

packages/app/src/app.tsx

@@ -14,11 +14,14 @@ import {
   Navigate,
   Route,
   Router,
+  useLocation,
+  useNavigate,
   useParams,
   useSearchParams,
 } from "@solidjs/router"
 import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"
 import { Effect } from "effect"
+import { base64Encode } from "@opencode-ai/core/util/encode"
 import {
   type Component,
   createEffect,
@@ -40,7 +43,7 @@ import { CommandProvider, useCommand, type CommandOption } from "@/context/comma
 import { CommentsProvider } from "@/context/comments"
 import { FileProvider } from "@/context/file"
 import { ServerSDKProvider } from "@/context/server-sdk"
-import { ServerSyncProvider } from "@/context/server-sync"
+import { ServerSyncProvider, useServerSync } from "@/context/server-sync"
 import { GlobalProvider, useGlobal } from "@/context/global"
 import { HighlightsProvider } from "@/context/highlights"
 import { LanguageProvider, type Locale, useLanguage } from "@/context/language"
@@ -51,36 +54,58 @@ import { PermissionProvider } from "@/context/permission"
 import { usePlatform } from "@/context/platform"
 import { PromptProvider } from "@/context/prompt"
 import { ServerConnection, ServerProvider, serverName, useServer } from "@/context/server"
-import { SettingsProvider } from "@/context/settings"
+import { SettingsProvider, useSettings } from "@/context/settings"
 import { TabsProvider, useTabs, type DraftTab } from "@/context/tabs"
-import { SDKProvider } from "@/context/sdk"
+import { SDKProvider, useSDK } from "@/context/sdk"
 import { WslServersProvider } from "@/wsl/context"
-import { DirectoryDataProvider } from "@/pages/directory-layout"
-import Layout from "@/pages/layout"
+import DirectoryLayout, { DirectoryDataProvider } from "@/pages/directory-layout"
+import LegacyLayout from "@/pages/layout"
+import NewLayout from "@/pages/layout-new"
 import { ErrorPage } from "./pages/error"
 import { useCheckServerHealth } from "./utils/server-health"
-import { legacySessionServer, requireServerKey, sessionHref } from "./utils/session-route"
-import { decode64 } from "@/utils/base64"
+import { legacySessionHref, legacySessionServer, requireServerKey, sessionHref } from "./utils/session-route"
+import { createSessionLineage } from "@/pages/session/session-lineage"
 
-import { TargetSessionRouteContent } from "@/pages/session"
-import { Home } from "@/pages/home"
+import { SessionPage, SessionRouteErrorBoundary, TargetSessionRouteContent } from "@/pages/session"
+import { NewHome } from "@/pages/home"
+import { LegacyHome } from "@/pages/home/legacy-home"
 
 const NewSession = lazy(() => import("@/pages/new-session"))
 
-const DirectoryDraftRedirect = () => {
+const SessionRoute = () => {
+  const settings = useSettings()
   const params = useParams()
   const [search] = useSearchParams<{ draftId?: string; prompt?: string }>()
+  const sdk = useSDK()
   const server = useServer()
   const tabs = useTabs()
 
+  if (params.id && settings.general.newLayoutDesigns()) {
+    const sessionID = params.id
+    return (
+      <Show when={tabs.ready()}>
+        {(_) => {
+          const persisted = tabs.store.filter((item) => item.type === "session")
+          return <Navigate href={sessionHref(legacySessionServer(persisted, sessionID, server.key), sessionID)} />
+        }}
+      </Show>
+    )
+  }
+
+  // When the new layout is enabled, the legacy new-session route (/:dir/session with no id)
+  // is replaced by a draft at /new-session?draftId=…
   createEffect(() => {
-    if (search.draftId || !tabs.ready()) return
-    const directory = decode64(params.dir)
-    if (!directory) return
-    tabs.newDraft({ server: server.key, directory }, search.prompt)
+    if (!settings.general.newLayoutDesigns()) return
+    if (params.id || search.draftId) return
+    if (!tabs.ready() || !sdk().directory) return
+    tabs.newDraft({ server: server.key, directory: sdk().directory }, search.prompt)
   })
 
-  return null
+  return (
+    <SessionRouteErrorBoundary sessionID={params.id}>
+      <SessionPage />
+    </SessionRouteErrorBoundary>
+  )
 }
 
 function TargetServerRoute(props: ParentProps) {
@@ -92,7 +117,9 @@ function TargetServerRoute(props: ParentProps) {
   })
 
   return (
-    // Owns the server-identity remount. Session changes must not remount this subtree.
+    // Owns the server-identity remount. Session changes must NOT remount this
+    // subtree (SessionRouteErrorBoundary resets and createSessionLineage
+    // re-resolves reactively instead); both rely on this key for server changes.
     <Show when={requireServerKey(params.serverKey)} keyed>
       <ServerSDKProvider server={conn}>
         <ServerSyncProvider server={conn}>{props.children}</ServerSyncProvider>
@@ -107,6 +134,35 @@ const TargetSessionRoute = () => (
   </TargetServerRoute>
 )
 
+function LegacyTargetSessionRoute() {
+  const params = useParams<{ serverKey: string; id: string }>()
+  return (
+    <TargetServerRoute>
+      <SessionRouteErrorBoundary sessionID={params.id} serverKey={requireServerKey(params.serverKey)}>
+        <LegacyTargetSessionRedirect />
+      </SessionRouteErrorBoundary>
+    </TargetServerRoute>
+  )
+}
+
+function LegacyTargetSessionRedirect() {
+  const params = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const sync = useServerSync()
+  const current = createSessionLineage(
+    () => params.id,
+    () => sync().session.lineage,
+  )
+
+  createEffect(() => {
+    const directory = current()?.session.directory
+    if (!directory) return
+    navigate(legacySessionHref(directory, params.id), { replace: true })
+  })
+
+  return null
+}
+
 // Wraps the non-draft routes. They are gated on (and keyed to) the globally selected
 // server via ServerKey, then provide the server-scoped shell for that server.
 function SelectedServerProviders(props: ParentProps) {
@@ -119,8 +175,17 @@ function SelectedServerProviders(props: ParentProps) {
   )
 }
 
+function LegacyServerLayout(props: ParentProps<{ serverScoped?: JSX.Element }>) {
+  return (
+    <SelectedServerProviders>
+      <LegacyServerScopedShell serverScoped={props.serverScoped}>{props.children}</LegacyServerScopedShell>
+    </SelectedServerProviders>
+  )
+}
+
 function DraftRoute() {
   const [search] = useSearchParams<{ draftId?: string }>()
+  const settings = useSettings()
   const tabs = useTabs()
   return (
     <Show when={tabs.ready()}>
@@ -129,7 +194,14 @@ function DraftRoute() {
         keyed
         fallback={<Navigate href="/" />}
       >
-        {(draft) => <ResolvedDraftRoute draft={draft} />}
+        {(draft) => (
+          <Show
+            when={settings.general.newLayoutDesigns()}
+            fallback={<Navigate href={`/${base64Encode(draft.directory)}/session`} />}
+          >
+            <ResolvedDraftRoute draft={draft} />
+          </Show>
+        )}
       </Show>
     </Show>
   )
@@ -165,6 +237,30 @@ function UiI18nBridge(props: ParentProps) {
   return <I18nProvider value={{ locale: language.intl, t: language.t }}>{props.children}</I18nProvider>
 }
 
+function LayoutCompatibility(props: ParentProps) {
+  const global = useGlobal()
+  const navigate = useNavigate()
+  const server = useServer()
+  const settings = useSettings()
+
+  createEffect(() => {
+    if (settings.general.newLayoutDesigns()) return
+    const current = server.current
+    if (!current) return
+    const protocol = global.ensureServerCtx(current).sdk.protocolKind()
+    if (protocol !== "v2") return
+    const next = global.servers.list().find((s) => {
+      if (ServerConnection.key(s) === ServerConnection.key(current)) return false
+      return global.ensureServerCtx(s).sdk.protocolKind() !== "v2"
+    })
+    if (!next) return
+    navigate("/")
+    queueMicrotask(() => server.setActive(ServerConnection.key(next)))
+  })
+
+  return <>{props.children}</>
+}
+
 declare global {
   interface Window {
     __OPENCODE__?: {
@@ -191,11 +287,17 @@ function QueryProvider(props: ParentProps) {
 }
 
 function BodyDesignClass() {
+  const settings = useSettings()
+
   createRenderEffect(() => {
     if (typeof document === "undefined") return
-    document.body.toggleAttribute("data-new-layout", true)
-    document.body.classList.remove("text-12-regular")
-    document.body.classList.add("font-(family-name:--font-family-text)", "text-[13px]", "font-[440]")
+
+    const enabled = settings.general.newLayoutDesigns()
+    document.body.toggleAttribute("data-new-layout", 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)
+    document.body.classList.toggle("font-[440]", enabled)
   })
 
   return null
@@ -238,6 +340,7 @@ function DesktopCommands() {
   return null
 }
 
+// Server-scoped providers shared by the legacy shell and the top-level new shell.
 type ServerScopedShellProps = ParentProps<{
   directory?: () => string | undefined
   serverScoped?: JSX.Element
@@ -252,11 +355,19 @@ function ServerScopedProviders(props: ServerScopedShellProps) {
   )
 }
 
-function AppLayout(props: ParentProps<{ serverScoped?: JSX.Element }>) {
+function LegacyServerScopedShell(props: ServerScopedShellProps) {
+  return (
+    <ServerScopedProviders directory={props.directory} serverScoped={props.serverScoped}>
+      <LegacyLayout>{props.children}</LegacyLayout>
+    </ServerScopedProviders>
+  )
+}
+
+function NewAppLayout(props: ParentProps<{ serverScoped?: JSX.Element }>) {
   return (
     <SelectedServerProviders>
       <ServerScopedProviders serverScoped={props.serverScoped}>
-        <Layout>{props.children}</Layout>
+        <NewLayout>{props.children}</NewLayout>
       </ServerScopedProviders>
     </SelectedServerProviders>
   )
@@ -445,7 +556,7 @@ export function AppInterface(props: {
   startup?: Promise<void>
   serverScoped?: JSX.Element
 }) {
-  // The visual layout lives in the router root so it remains mounted across
+  // The visual new layout lives in the router root so it remains mounted across
   // route changes. Draft and session routes override only their server-bound data
   // providers beneath it.
   const ServerShell = (shellProps: ParentProps) => (
@@ -466,22 +577,26 @@ export function AppInterface(props: {
       <GlobalProvider>
         <SettingsProvider>
           <ConnectionGate disableHealthCheck={props.disableHealthCheck} startup={props.startup}>
-            <Dynamic
-              component={props.router ?? Router}
-              root={(routerProps) => (
-                <TabsProvider>
-                  <PermissionProvider>
-                    <NotificationProvider>
-                      <ServerShell>
-                        <AppLayout serverScoped={props.serverScoped}>{routerProps.children}</AppLayout>
-                      </ServerShell>
-                    </NotificationProvider>
-                  </PermissionProvider>
-                </TabsProvider>
-              )}
-            >
-              <Routes />
-            </Dynamic>
+            <Show when={useSettings().general.newLayoutDesigns().toString()} keyed>
+              <Dynamic
+                component={props.router ?? Router}
+                root={(routerProps) => (
+                  <TabsProvider>
+                    <PermissionProvider>
+                      <NotificationProvider>
+                        <ServerShell>
+                          <Show when={useSettings().general.newLayoutDesigns()} fallback={routerProps.children}>
+                            <NewAppLayout serverScoped={props.serverScoped}>{routerProps.children}</NewAppLayout>
+                          </Show>
+                        </ServerShell>
+                      </NotificationProvider>
+                    </PermissionProvider>
+                  </TabsProvider>
+                )}
+              >
+                <Routes serverScoped={props.serverScoped} />
+              </Dynamic>
+            </Show>
           </ConnectionGate>
         </SettingsProvider>
       </GlobalProvider>
@@ -489,20 +604,40 @@ export function AppInterface(props: {
   )
 }
 
-function Routes() {
+function Routes(props: { serverScoped?: JSX.Element }) {
+  const settings = useSettings()
+
   return (
     <>
-      <Route path="/" component={Home} />
-      <Route path="/:dir" component={DirectoryDraftRedirect} />
-      <Route path="/:dir/session" component={DirectoryDraftRedirect} />
-      <Route path="/:dir/session/:id" component={LegacySessionRedirect} />
-      <Route path="/server/:serverKey/session/:id" component={TargetSessionRoute} />
+      <Route
+        component={(routeProps) => (
+          <LegacyServerLayout serverScoped={props.serverScoped}>{routeProps.children}</LegacyServerLayout>
+        )}
+      >
+        <Show when={!settings.general.newLayoutDesigns()}>
+          {
+            <>
+              <Route path="/" component={LegacyHome} />
+              <Route path="/server/:serverKey/session/:id" component={LegacyTargetSessionRoute} />
+            </>
+          }
+        </Show>
+        <Route path="/:dir" component={DirectoryLayout}>
+          <Route path="/" component={() => <Navigate href="session" />} />
+          <Route path="/session/:id?" component={SessionRoute} />
+        </Route>
+      </Route>
+      <Show when={settings.general.newLayoutDesigns()}>
+        <Route path="/" component={NewHome} />
+        <Route path="/:dir/session/:id" component={NewLayoutLegacySessionRedirect} />
+        <Route path="/server/:serverKey/session/:id" component={TargetSessionRoute} />
+      </Show>
       <Route path="/new-session" component={DraftRoute} />
     </>
   )
 }
 
-function LegacySessionRedirect() {
+function NewLayoutLegacySessionRedirect() {
   const server = useServer()
   const tabs = useTabs()
   const params = useParams<{ id: string }>()

packages/app/src/components/command-palette.ts

@@ -14,6 +14,7 @@ import { useTabs } from "@/context/tabs"
 import { displayName, projectForSession } from "@/pages/layout/helpers"
 import { createSessionTabs } from "@/pages/session/helpers"
 import { useSessionLayout } from "@/pages/session/session-layout"
+import { normalizeSessionInfo } from "@/utils/session"
 
 export type CommandPaletteEntry = {
   id: string
@@ -145,7 +146,7 @@ export function createCommandPaletteModel(props: { filesOnly?: () => boolean; on
     server: ServerConnection.key(serverSDK.server),
     opened: serverCtx.projects.list,
     stored: () => serverCtx.sync.data.project,
-    load: (search, signal) => serverSDK.api.session.list({ parentID: null, search, limit: 50 }, { signal }),
+    load: (search, signal) => serverSDK.currentApi.session.list({ parentID: null, search, limit: 50 }, { signal }),
     untitled: () => language.t("command.session.new"),
     category: () => language.t("command.category.session"),
   })
@@ -256,6 +257,7 @@ export function createServerSessionEntries(props: {
       .load(search, current.signal)
       .then((result) =>
         result.data
+          .map(normalizeSessionInfo)
           .filter((session) => !session.time.archived)
           .map((session) => {
             const project =
@@ -264,9 +266,9 @@ export function createServerSessionEntries(props: {
               id: `session:${props.server}:${session.id}`,
               type: "session" as const,
               title: session.title || props.untitled(),
-              description: project ? displayName(project) : getFilename(session.location.directory),
+              description: project ? displayName(project) : getFilename(session.directory),
               category: props.category(),
-              directory: session.location.directory,
+              directory: session.directory,
               sessionID: session.id,
               server: props.server,
               project,

packages/app/src/components/dialog-command-palette-v2.tsx

@@ -79,7 +79,7 @@ export function DialogHomeCommandPaletteV2(props: {
     server: ServerConnection.key(props.server),
     opened: serverCtx.projects.list,
     stored: () => serverCtx.sync.data.project,
-    load: (search, signal) => serverCtx.sdk.api.session.list({ parentID: null, search, limit: 50 }, { signal }),
+    load: (search, signal) => serverCtx.sdk.currentApi.session.list({ parentID: null, search, limit: 50 }, { signal }),
     untitled: () => language.t("command.session.new"),
     category: () => language.t("command.category.session"),
   })

packages/app/src/components/dialog-connect-provider.tsx

@@ -418,7 +418,7 @@ function ProviderConnection(props: {
     () => ({ provider: props.provider, directory: directory() }),
     (input) =>
       serverSDK()
-        .api.integration.get({
+        .currentApi.integration.get({
           integrationID: input.provider,
           location: input.directory ? { directory: input.directory } : undefined,
         })
@@ -547,7 +547,7 @@ function ProviderConnection(props: {
       }
       dispatch({ type: "auth.pending" })
       await serverSDK()
-        .api.integration.oauth.connect({
+        .currentApi.integration.oauth.connect({
           integrationID: props.provider,
           methodID: method.id,
           inputs: inputs ?? {},
@@ -816,7 +816,7 @@ function ProviderConnection(props: {
       }
 
       setFormStore("error", undefined)
-      await serverSDK().api.integration.connect.key({
+      await serverSDK().currentApi.integration.connect.key({
         integrationID: props.provider,
         location: location(),
         key: apiKey,
@@ -947,7 +947,7 @@ function ProviderConnection(props: {
 
       setFormStore("error", undefined)
       const result = await serverSDK()
-        .api.integration.oauth.complete({
+        .currentApi.integration.oauth.complete({
           integrationID: props.provider,
           attemptID: store.authorization!.attemptID,
           location: location(),
@@ -1044,7 +1044,7 @@ function ProviderConnection(props: {
         const authorization = store.authorization
         if (!authorization || !alive.value) return
         const result = await serverSDK()
-          .api.integration.oauth.status({
+          .currentApi.integration.oauth.status({
             integrationID: props.provider,
             attemptID: authorization.attemptID,
             location: location(),

packages/app/src/components/dialog-custom-provider.tsx

@@ -130,9 +130,26 @@ export function CustomProviderForm(props: { autofocus?: boolean } = {}) {
   }
 
   const saveMutation = useMutation(() => ({
-    mutationFn: async (result: NonNullable<ReturnType<typeof validate>>): Promise<typeof result> => {
-      // TODO: Restore custom providers when V2 exposes config and arbitrary credential APIs.
-      throw new Error(`Custom provider ${result.providerID} is unavailable`)
+    mutationFn: async (result: NonNullable<ReturnType<typeof validate>>) => {
+      if ((await serverSDK().protocol) !== "v1") throw new Error("Custom providers are unavailable on this server")
+      const disabledProviders = serverSync().data.config.disabled_providers ?? []
+      const nextDisabled = disabledProviders.filter((id) => id !== result.providerID)
+
+      if (result.key) {
+        await serverSDK().legacy.auth.set({
+          providerID: result.providerID,
+          auth: {
+            type: "api",
+            key: result.key,
+          },
+        })
+      }
+
+      await serverSync().updateConfig({
+        provider: { [result.providerID]: result.config },
+        disabled_providers: nextDisabled,
+      })
+      return result
     },
     onSuccess: (result) => {
       dialog.close()

packages/app/src/components/dialog-edit-project-v2.tsx

@@ -146,7 +146,7 @@ export function DialogEditProjectV2(props: { project: LocalProject; server: Serv
           <ButtonV2 type="button" variant="neutral" disabled={model.save.isPending} onClick={model.close}>
             {language.t("common.cancel")}
           </ButtonV2>
-          <ButtonV2 type="submit" variant="contrast" disabled={!model.supported || model.save.isPending}>
+          <ButtonV2 type="submit" variant="contrast" disabled={model.save.isPending}>
             {model.save.isPending ? language.t("common.saving") : language.t("common.save")}
           </ButtonV2>
         </DialogFooter>

packages/app/src/components/dialog-edit-project.tsx

@@ -0,0 +1,170 @@
+import { Button } from "@opencode-ai/ui/button"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { Icon } from "@opencode-ai/ui/icon"
+import { For, Show } from "solid-js"
+import { type LocalProject, getAvatarColors } from "@/context/layout"
+import { Avatar } from "@opencode-ai/ui/avatar"
+import { useLanguage } from "@/context/language"
+import { getProjectAvatarSource } from "@/pages/layout/helpers"
+import { ServerConnection } from "@/context/server"
+import { createEditProjectModel } from "./edit-project"
+
+const AVATAR_COLOR_KEYS = ["pink", "mint", "orange", "purple", "cyan", "lime"] as const
+
+export function DialogEditProject(props: { project: LocalProject; server: ServerConnection.Any }) {
+  const language = useLanguage()
+  const model = createEditProjectModel(props)
+
+  return (
+    <Dialog title={language.t("dialog.project.edit.title")} class="w-full max-w-[480px] mx-auto">
+      <form onSubmit={model.submit} class="flex flex-col gap-6 p-6 pt-0">
+        <div class="flex flex-col gap-4">
+          <TextField
+            autofocus
+            type="text"
+            label={language.t("dialog.project.edit.name")}
+            placeholder={model.folderName()}
+            value={model.store.name}
+            onChange={(v) => model.setStore("name", v)}
+          />
+
+          <div class="flex flex-col gap-2">
+            <label class="text-12-medium text-text-weak">{language.t("dialog.project.edit.icon")}</label>
+            <div class="flex gap-3 items-start">
+              <div
+                class="relative"
+                onMouseEnter={() => model.setStore("iconHover", true)}
+                onMouseLeave={() => model.setStore("iconHover", false)}
+              >
+                <div
+                  class="relative size-16 rounded-md transition-colors cursor-pointer"
+                  classList={{
+                    "border-text-interactive-base bg-surface-info-base/20": model.store.dragOver,
+                    "border-border-base hover:border-border-strong": !model.store.dragOver,
+                    "overflow-hidden": !!model.store.iconOverride,
+                  }}
+                  onDrop={model.drop}
+                  onDragOver={model.dragOver}
+                  onDragLeave={model.dragLeave}
+                  onClick={model.iconClick}
+                >
+                  <Show
+                    when={getProjectAvatarSource(props.project.id, {
+                      color: model.store.color,
+                      url: props.project.icon?.url,
+                      override: model.store.iconOverride,
+                    })}
+                    fallback={
+                      <div class="size-full flex items-center justify-center">
+                        <Avatar
+                          fallback={model.store.name || model.defaultName()}
+                          {...getAvatarColors(model.store.color)}
+                          class="size-full text-[32px]"
+                        />
+                      </div>
+                    }
+                  >
+                    {(src) => (
+                      <img
+                        src={src()}
+                        alt={language.t("dialog.project.edit.icon.alt")}
+                        class="size-full object-cover"
+                      />
+                    )}
+                  </Show>
+                </div>
+                <div
+                  class="absolute inset-0 size-16 bg-surface-raised-stronger-non-alpha/90 rounded-[6px] z-10 pointer-events-none flex items-center justify-center transition-opacity"
+                  classList={{
+                    "opacity-100": model.store.iconHover && !model.store.iconOverride,
+                    "opacity-0": !(model.store.iconHover && !model.store.iconOverride),
+                  }}
+                >
+                  <Icon name="cloud-upload" size="large" class="text-icon-on-interactive-base drop-shadow-sm" />
+                </div>
+                <div
+                  class="absolute inset-0 size-16 bg-surface-raised-stronger-non-alpha/90 rounded-[6px] z-10 pointer-events-none flex items-center justify-center transition-opacity"
+                  classList={{
+                    "opacity-100": model.store.iconHover && !!model.store.iconOverride,
+                    "opacity-0": !(model.store.iconHover && !!model.store.iconOverride),
+                  }}
+                >
+                  <Icon name="trash" size="large" class="text-icon-on-interactive-base drop-shadow-sm" />
+                </div>
+              </div>
+              <input
+                id="icon-upload"
+                ref={(el) => {
+                  model.setIconInput(el)
+                }}
+                type="file"
+                accept="image/*"
+                class="hidden"
+                onChange={model.inputChange}
+              />
+              <div class="flex flex-col gap-1.5 text-12-regular text-text-weak self-center">
+                <span>{language.t("dialog.project.edit.icon.hint")}</span>
+                <span>{language.t("dialog.project.edit.icon.recommended")}</span>
+              </div>
+            </div>
+          </div>
+
+          <Show when={!model.store.iconOverride}>
+            <div class="flex flex-col gap-2">
+              <label class="text-12-medium text-text-weak">{language.t("dialog.project.edit.color")}</label>
+              <div class="flex gap-1.5">
+                <For each={AVATAR_COLOR_KEYS}>
+                  {(color) => (
+                    <button
+                      type="button"
+                      aria-label={language.t("dialog.project.edit.color.select", { color })}
+                      aria-pressed={model.store.color === color}
+                      classList={{
+                        "flex items-center justify-center size-10 p-0.5 rounded-lg overflow-hidden transition-colors cursor-default": true,
+                        "bg-transparent border-2 border-icon-strong-base hover:bg-surface-base-hover":
+                          model.store.color === color,
+                        "bg-transparent border border-transparent hover:bg-surface-base-hover hover:border-border-weak-base":
+                          model.store.color !== color,
+                      }}
+                      onClick={() => {
+                        if (model.store.color === color && !props.project.icon?.url) return
+                        model.setStore("color", model.store.color === color ? undefined : color)
+                      }}
+                    >
+                      <Avatar
+                        fallback={model.store.name || model.defaultName()}
+                        {...getAvatarColors(color)}
+                        class="size-full rounded"
+                      />
+                    </button>
+                  )}
+                </For>
+              </div>
+            </div>
+          </Show>
+
+          <TextField
+            multiline
+            label={language.t("dialog.project.edit.worktree.startup")}
+            description={language.t("dialog.project.edit.worktree.startup.description")}
+            placeholder={language.t("dialog.project.edit.worktree.startup.placeholder")}
+            value={model.store.startup}
+            onChange={(v) => model.setStore("startup", v)}
+            spellcheck={false}
+            class="max-h-14 w-full overflow-y-auto font-mono text-xs"
+          />
+        </div>
+
+        <div class="flex justify-end gap-2">
+          <Button type="button" variant="ghost" size="large" onClick={model.close}>
+            {language.t("common.cancel")}
+          </Button>
+          <Button type="submit" variant="primary" size="large" disabled={model.save.isPending}>
+            {model.save.isPending ? language.t("common.saving") : language.t("common.save")}
+          </Button>
+        </div>
+      </form>
+    </Dialog>
+  )
+}

packages/app/src/components/dialog-fork.tsx

@@ -69,7 +69,7 @@ export const DialogFork: Component = () => {
     const dir = base64Encode(sdk().directory)
 
     sdk()
-      .api.session.fork({ sessionID, boundary: { type: "before", messageID: item.id } })
+      .currentApi.session.fork({ sessionID, boundary: { type: "before", messageID: item.id } })
       .then((forked) => {
         dialog.close()
         prompt.set(restored, undefined, { dir, id: forked.id })

packages/app/src/components/dialog-select-directory-v2.tsx

@@ -66,21 +66,23 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
   let pathArea: HTMLDivElement | undefined
   let navigation = 0
 
+  const missingBase = createMemo(() => !(sync.data.path.home || sync.data.path.directory))
   const [fallbackPath] = createResource(
-    () => (!(sync.data.path.home || sync.data.path.directory) ? true : undefined),
-    () =>
-      sdk.api.location
+    () => (missingBase() ? true : undefined),
+    async (): Promise<Path | undefined> => {
+      if ((await sdk.protocol) === "v1")
+        return sdk.legacy.path.get().catch(() => undefined)
+      return sdk.api.location
         .get()
-        .then(
-          (location): Path => ({
-            state: "",
-            config: "",
-            worktree: location.project.directory,
-            directory: location.directory,
-            home: "",
-          }),
-        )
-        .catch(() => undefined),
+        .then((location) => ({
+          state: "",
+          config: "",
+          worktree: location.project.directory,
+          directory: location.directory,
+          home: "",
+        }))
+        .catch(() => undefined)
+    },
     { initialValue: undefined },
   )
   const home = createMemo(() => sync.data.path.home || fallbackPath()?.home || "")
@@ -102,7 +104,7 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
     if (!policy.includeFiles) return { query: value, items: directories.slice(0, 5) }
     const base = pickerRoot(cleaned) || root() || start()
     if (!base) return { query: value, items: directories.slice(0, 5) }
-    const files = await sdk.api.file
+    const files = await sdk.currentApi.file
       .find({
         location: { directory: base },
         query: pickerFileSearchQuery(base, value, home()),
@@ -132,7 +134,7 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
       existing ??
       loads.schedule(`${generation}:${key}`, eager ? "background" : "user", () => {
         if (!activeTreeNavigation(generation, navigation)) return Promise.resolve(undefined)
-        return sdk.api.file
+        return sdk.currentApi.file
           .list({ location: { directory: absolute } })
           .then((result) =>
             result.data.map((entry) => ({

packages/app/src/components/dialog-select-directory.tsx

@@ -57,21 +57,23 @@ export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
   const [filter, setFilter] = createSignal("")
   let list: ListRef | undefined
 
+  const missingBase = createMemo(() => !(sync.data.path.home || sync.data.path.directory))
   const [fallbackPath] = createResource(
-    () => (!(sync.data.path.home || sync.data.path.directory) ? true : undefined),
-    () =>
-      sdk.api.location
+    () => (missingBase() ? true : undefined),
+    async (): Promise<Path | undefined> => {
+      if ((await sdk.protocol) === "v1")
+        return sdk.legacy.path.get().catch(() => undefined)
+      return sdk.api.location
         .get()
-        .then(
-          (location): Path => ({
-            state: "",
-            config: "",
-            worktree: location.project.directory,
-            directory: location.directory,
-            home: "",
-          }),
-        )
-        .catch(() => undefined),
+        .then((location) => ({
+          state: "",
+          config: "",
+          worktree: location.project.directory,
+          directory: location.directory,
+          home: "",
+        }))
+        .catch(() => undefined)
+    },
     { initialValue: undefined },
   )
 

packages/app/src/components/dialog-select-mcp.tsx

@@ -10,6 +10,7 @@ const statusLabels = {
   connected: "mcp.status.connected",
   failed: "mcp.status.failed",
   needs_auth: "mcp.status.needs_auth",
+  needs_client_registration: "mcp.status.needs_client_registration",
   disabled: "mcp.status.disabled",
 } as const
 
@@ -56,7 +57,7 @@ export const DialogSelectMcp: Component = () => {
           }
           const error = () => {
             const s = mcpStatus()
-            if (s?.status === "failed") return s.error
+            if (s?.status === "failed" || s?.status === "needs_client_registration") return s.error
           }
           const enabled = () => status() === "connected"
           return (

packages/app/src/components/dialog-select-server.tsx

@@ -16,6 +16,7 @@ import { useGlobal } from "@/context/global"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
 import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server"
+import { detectServerProtocol } from "@/utils/server-protocol"
 import { type ServerHealth, useCheckServerHealth } from "@/utils/server-health"
 import { useSettings } from "@/context/settings"
 import { useTabs } from "@/context/tabs"
@@ -263,6 +264,13 @@ export function useServerManagementController(options: { onSelect?: () => void;
         setStore("addServer", { error: language.t("dialog.server.add.error") })
         return
       }
+      if (
+        !settings.general.newLayoutDesigns() &&
+        (await detectServerProtocol(conn.http, platform.fetch ?? globalThis.fetch)) === "v2"
+      ) {
+        setStore("addServer", { error: language.t("dialog.server.add.error") })
+        return
+      }
 
       resetAdd()
       if (options.navigateOnAdd === false) {
@@ -307,6 +315,13 @@ export function useServerManagementController(options: { onSelect?: () => void;
         setStore("editServer", { error: language.t("dialog.server.add.error") })
         return
       }
+      if (
+        !settings.general.newLayoutDesigns() &&
+        (await detectServerProtocol(conn.http, platform.fetch ?? globalThis.fetch)) === "v2"
+      ) {
+        setStore("editServer", { error: language.t("dialog.server.add.error") })
+        return
+      }
       if (normalized === input.original.http.url) {
         server.add(conn)
       } else {
@@ -345,7 +360,9 @@ export function useServerManagementController(options: { onSelect?: () => void;
 
   const sortedItems = createMemo(() => {
     const raw = items()
-    const list = raw
+    const list = settings.general.newLayoutDesigns()
+      ? raw
+      : raw.filter((x) => global.ensureServerCtx(x).sdk.protocolKind() !== "v2")
     if (!list.length) return list
     const active = current()
     const order = new Map(list.map((url, index) => [url, index] as const))

packages/app/src/components/dialog-settings.tsx

@@ -0,0 +1,94 @@
+import { Component, createSignal, startTransition } from "solid-js"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { Tabs } from "@opencode-ai/ui/tabs"
+import { Icon } from "@opencode-ai/ui/icon"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { SettingsGeneral } from "./settings-general"
+import { SettingsKeybinds } from "./settings-keybinds"
+import { SettingsProviders } from "./settings-providers"
+import { SettingsModels } from "./settings-models"
+import { SettingsServers } from "./settings-servers"
+
+export const DialogSettings: Component<{ defaultValue?: string }> = (props) => {
+  const language = useLanguage()
+  const platform = usePlatform()
+  const dialog = useDialog()
+  const [tab, setTab] = createSignal(props.defaultValue ?? "general")
+
+  const showProviders = () => {
+    void dialog.show(() => <DialogSettings defaultValue="providers" />)
+  }
+
+  return (
+    <Dialog size="x-large" transition>
+      <Tabs
+        orientation="vertical"
+        variant="settings"
+        value={tab()}
+        onChange={(value) => void startTransition(() => setTab(value))}
+        class="h-full settings-dialog"
+      >
+        <Tabs.List>
+          <div class="flex flex-col justify-between h-full w-full gap-4">
+            <div class="flex flex-col gap-3 w-full pt-3">
+              <div class="flex flex-col gap-3">
+                <div class="flex flex-col gap-1.5">
+                  <Tabs.SectionTitle>{language.t("settings.section.desktop")}</Tabs.SectionTitle>
+                  <div class="flex flex-col gap-1.5 w-full">
+                    <Tabs.Trigger value="general">
+                      <Icon name="sliders" />
+                      {language.t("settings.tab.general")}
+                    </Tabs.Trigger>
+                    <Tabs.Trigger value="shortcuts">
+                      <Icon name="keyboard" />
+                      {language.t("settings.tab.shortcuts")}
+                    </Tabs.Trigger>
+                    <Tabs.Trigger value="servers">
+                      <Icon name="server" />
+                      {language.t("status.popover.tab.servers")}
+                    </Tabs.Trigger>
+                  </div>
+                </div>
+
+                <div class="flex flex-col gap-1.5">
+                  <Tabs.SectionTitle>{language.t("settings.section.server")}</Tabs.SectionTitle>
+                  <div class="flex flex-col gap-1.5 w-full">
+                    <Tabs.Trigger value="providers">
+                      <Icon name="providers" />
+                      {language.t("settings.providers.title")}
+                    </Tabs.Trigger>
+                    <Tabs.Trigger value="models">
+                      <Icon name="models" />
+                      {language.t("settings.models.title")}
+                    </Tabs.Trigger>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="flex flex-col gap-1 pl-1 py-1 text-12-medium text-text-weak">
+              <span>{language.t("app.name.desktop")}</span>
+              <span class="text-11-regular">v{platform.version}</span>
+            </div>
+          </div>
+        </Tabs.List>
+        <Tabs.Content value="general" class="no-scrollbar">
+          <SettingsGeneral />
+        </Tabs.Content>
+        <Tabs.Content value="shortcuts" class="no-scrollbar">
+          <SettingsKeybinds />
+        </Tabs.Content>
+        <Tabs.Content value="servers" class="no-scrollbar">
+          <SettingsServers />
+        </Tabs.Content>
+        <Tabs.Content value="providers" class="no-scrollbar">
+          <SettingsProviders onBack={showProviders} />
+        </Tabs.Content>
+        <Tabs.Content value="models" class="no-scrollbar">
+          <SettingsModels />
+        </Tabs.Content>
+      </Tabs>
+    </Dialog>
+  )
+}

packages/app/src/components/directory-picker-domain.test.ts

@@ -133,7 +133,7 @@ test("scopes file autocomplete to the current browser root", () => {
 test("resolves directory autocomplete from the current browser root", async () => {
   const directories: string[] = []
   const sdk = {
-    api: {
+    currentApi: {
       file: {
         find: (input: { location?: { directory?: string } }) => {
           directories.push(input.location?.directory ?? "")
@@ -155,7 +155,7 @@ test("resolves directory autocomplete from the current browser root", async () =
 test("searches from an absolute root without a default base", async () => {
   const directories: string[] = []
   const sdk = {
-    api: {
+    currentApi: {
       file: {
         list: (input: { location?: { directory?: string } }) => {
           directories.push(input.location?.directory ?? "")

packages/app/src/components/directory-picker-domain.ts

@@ -342,7 +342,7 @@ export function createDirectorySearch(args: { sdk: ServerSDK; base: () => string
     const key = trimPickerPath(directory)
     const existing = cache.get(key)
     if (existing) return existing
-    const request = args.sdk.api.file
+    const request = args.sdk.currentApi.file
       .list({ location: { directory: key } })
       .then((result) => result.data)
       .catch(() => [])
@@ -374,7 +374,7 @@ export function createDirectorySearch(args: { sdk: ServerSDK; base: () => string
     const pathInput = raw.startsWith("~") || !!pickerRoot(raw) || raw.includes("/")
     const query = normalizePickerDrive(input.path)
     if (!pathInput) {
-      const results = await args.sdk.api.file
+      const results = await args.sdk.currentApi.file
         .find({ location: { directory: input.directory }, query, type: "directory", limit: 50 })
         .then((result) => result.data.map((entry) => entry.path))
         .catch(() => [])

packages/app/src/components/edit-project.ts

@@ -9,7 +9,6 @@ import { type LocalProject } from "@/context/layout"
 import { ServerConnection } from "@/context/server"
 
 export function createEditProjectModel(props: { project: LocalProject; server: ServerConnection.Any }) {
-  const supported = !props.project.id || props.project.id === "global"
   const dialog = useDialog()
   const global = useGlobal()
   const serverCtx = createMemo(() => global.ensureServerCtx(props.server))
@@ -72,9 +71,23 @@ export function createEditProjectModel(props: { project: LocalProject; server: S
       const start = store.startup.trim()
 
       if (props.project.id && props.project.id !== "global") {
-        // TODO: Restore project edits when the V2 client exposes a project update API.
-        // await serverCtx().sdk.api.project.update({ projectID: props.project.id, name, icon, commands })
-        throw new Error(`Project ${props.project.id} cannot be updated`)
+        if ((await serverCtx().sdk.protocol) !== "v1") return
+        const project = await serverCtx()
+          .sdk.legacy.project.update({
+            projectID: props.project.id,
+            directory: props.project.worktree,
+            name,
+            icon: { color: store.color || "", override: store.iconOverride || "" },
+            commands: { start },
+          })
+          .then((result) => result.data)
+        if (!project) return
+        serverCtx().sync.set("project", (items) =>
+          items.map((item) => (item.id === project.id ? normalizeProjectInfo(project) : item)),
+        )
+        serverCtx().sync.project.icon(props.project.worktree, store.iconOverride || undefined)
+        dialog.close()
+        return
       }
 
       serverCtx().sync.project.meta(props.project.worktree, {
@@ -88,7 +101,7 @@ export function createEditProjectModel(props: { project: LocalProject; server: S
 
   function submit(event: SubmitEvent) {
     event.preventDefault()
-    if (!supported || save.isPending) return
+    if (save.isPending) return
     save.mutate()
   }
 
@@ -98,7 +111,6 @@ export function createEditProjectModel(props: { project: LocalProject; server: S
     folderName,
     defaultName,
     save,
-    supported,
     submit,
     drop,
     dragOver,

packages/app/src/components/help-button.tsx

@@ -0,0 +1,148 @@
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { createSignal, Show } from "solid-js"
+import { Drawer, DrawerClose, DrawerContent } from "@/components/ui/drawer"
+import { usePlatform } from "@/context/platform"
+import { useSettings } from "@/context/settings"
+import introducingTabsVideo from "@/assets/help/introducing-tabs.mp4"
+import homeImage from "@/assets/help/home.png"
+import tabsImage from "@/assets/help/tabs.png"
+
+// TODO: wire to changelog / seen-state when available
+const showPopover = () => true
+
+// can remove this after the tabs rollout has been out for a while
+export function TabsInfoPopup() {
+  const settings = useSettings()
+  const platform = usePlatform()
+  const [drawerOpen, setDrawerOpen] = createSignal(false)
+  const windows = () => platform.platform === "desktop" && platform.os === "windows"
+
+  return (
+    <Drawer open={drawerOpen()} onOpenChange={setDrawerOpen} side="right">
+      <Show when={settings.general.shouldDisplayTabsToast()}>
+        <div
+          class="fixed bottom-5 right-5 z-50 h-[240px] w-[192px] rounded-[8px] bg-v2-background-bg-base p-1 shadow-[var(--v2-elevation-floating)]"
+          aria-label="Introducing Tabs. Organize your work and active sessions with tabs"
+        >
+          <button
+            type="button"
+            aria-label="Dismiss Tabs information"
+            class="absolute top-3 right-3 z-10 size-5 flex items-center justify-center rounded-[4px] bg-[rgba(0,0,0,0.4)]"
+            onClick={settings.general.dismissTabsToast}
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+            >
+              <path d="M4.25 11.75L11.75 4.25M11.75 11.75L4.25 4.25" stroke="white" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            class="relative block h-[232px] w-[184px] cursor-pointer overflow-hidden rounded-[4px] text-left"
+            onClick={() => {
+              settings.general.dismissTabsToast()
+              setDrawerOpen(true)
+            }}
+          >
+            <video
+              src={introducingTabsVideo}
+              class="absolute inset-0 h-full w-full object-cover"
+              loop
+              muted
+              autoplay
+              playsinline
+              aria-hidden="true"
+              onContextMenu={(event) => event.preventDefault()}
+            />
+            <div class="absolute inset-x-0 bottom-0 flex w-full flex-col items-start gap-1.5 bg-[linear-gradient(180deg,rgba(0,0,0,0)_0%,#000000_100%)] px-3 py-5">
+              <p class="w-full select-none text-[13px] font-[530] leading-none tracking-[-0.04px] text-[#FFFFFF]">
+                Introducing Tabs
+              </p>
+              <p class="w-full select-none text-[13px] font-[440] leading-[140%] tracking-[-0.04px] text-[#808080]">
+                Organize your work and active sessions with tabs
+              </p>
+            </div>
+          </button>
+        </div>
+      </Show>
+      <DrawerContent
+        style={
+          windows()
+            ? {
+                inset: "0 0 0 auto",
+                "max-height": "100vh",
+                "max-width": "100vw",
+                "border-radius": "0",
+              }
+            : undefined
+        }
+      >
+        <Show when={windows()}>
+          <DrawerClose
+            as={IconButtonV2}
+            type="button"
+            size="small"
+            variant="neutral"
+            aria-label="Close"
+            icon={<IconV2 name="xmark-small" />}
+            class="absolute top-[10px] left-[-36px]"
+          />
+        </Show>
+        <div
+          class="flex w-full shrink-0 items-center gap-4 self-stretch border-b border-v2-border-border-muted"
+          classList={{
+            "h-[40px] px-4": windows(),
+            "h-[52px] p-4": !windows(),
+          }}
+        >
+          <p class="min-h-0 min-w-0 flex-1 text-[13px] font-[530] leading-5 tracking-[-0.04px] tabular-nums text-v2-text-text-muted">
+            July 14
+          </p>
+          <Show when={!windows()}>
+            <DrawerClose
+              as={IconButtonV2}
+              type="button"
+              size="small"
+              variant="ghost-muted"
+              aria-label="Close"
+              icon={<IconV2 name="xmark-small" />}
+            />
+          </Show>
+        </div>
+        <div class="relative flex min-h-0 w-full flex-1 flex-col items-start gap-6 overflow-y-auto p-8">
+          <p class="w-full shrink-0 self-stretch text-[21px] font-[610] leading-6 tracking-[-0.37px] tabular-nums text-v2-text-text-base">
+            Introducing Tabs
+          </p>
+          <div class="flex w-full flex-1 flex-col gap-4 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base">
+            <p>OpenCode Desktop is now built around tabs.</p>
+            <img src={tabsImage} alt="" class="aspect-video w-full rounded-[6px] object-cover" />
+            <p>
+              Start a new session in a tab, or open an existing session from any of your projects. Open a new tab when
+              you're starting something new, and close it when you're done.
+            </p>
+            <p>
+              Keeping a few tabs open makes it easier to organize your active sessions. Rename tabs to something
+              memorable if you plan to keep them around.
+            </p>
+            <p>
+              You'll find all your sessions and projects on the new Home screen. Selecting a session opens it in a tab.
+            </p>
+            <img src={homeImage} alt="" class="aspect-video w-full rounded-[6px] object-cover" />
+            <p>When you reopen the app, your tabs are still open.</p>
+            <p>
+              The new design does not support Git Worktrees yet, it's coming soon. So if you'd prefer to continue using
+              the previous layout, you can switch between layouts in Settings. Just keep in mind that the new layout
+              will become permanent in a few weeks.
+            </p>
+          </div>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}

packages/app/src/components/prompt-input-v2.tsx

@@ -5,7 +5,7 @@ import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { Icon } from "@opencode-ai/ui/v2/icon"
 import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
 import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
-import type { ReferenceInfo } from "@opencode-ai/client/promise"
+import type { ReferenceInfo } from "@/types"
 import { createEffect, createMemo, on, Show } from "solid-js"
 import { ModelSelectorPopoverV2 } from "@/components/dialog-select-model"
 import { DialogSelectModelUnpaidV2 } from "@/components/dialog-select-model-unpaid-v2"

packages/app/src/components/prompt-input.tsx

@@ -81,7 +81,7 @@ import { promptDesignPlaceholder, promptPlaceholder } from "./prompt-input/place
 import { createPromptInputTransientState } from "./prompt-input/transient-state"
 import { showToast } from "@/utils/toast"
 import { ImagePreview } from "@opencode-ai/ui/image-preview"
-import type { ReferenceInfo } from "@opencode-ai/client/promise"
+import type { ReferenceInfo } from "@/types"
 
 export { createPromptInputHistory }
 export type { PromptInputControls, PromptInputHistory, PromptInputProps, PromptInputState, PromptInputSubmission }

packages/app/src/components/prompt-input/build-request-parts.ts

@@ -1,15 +1,12 @@
 import { getFilename } from "@opencode-ai/core/util/path"
-import type { AgentPart as MessageAgentPart, FilePart, Part, TextPart } from "@/types"
+import type { AgentPartInput, FilePartInput, Part, TextPartInput } from "@/types"
 import type { FileSelection } from "@/context/file"
 import { encodeFilePath } from "@/context/file/path"
 import type { AgentPart, FileAttachmentPart, ImageAttachmentPart, Prompt } from "@/context/prompt"
 import { Identifier } from "@/utils/id"
 import { createCommentMetadata, formatCommentNote } from "@/utils/comment-note"
 
-type PromptRequestPart =
-  | (Omit<TextPart, "id" | "sessionID" | "messageID"> & { id: string })
-  | (Omit<FilePart, "id" | "sessionID" | "messageID"> & { id: string })
-  | (Omit<MessageAgentPart, "id" | "sessionID" | "messageID"> & { id: string })
+type PromptRequestPart = (TextPartInput | FilePartInput | AgentPartInput) & { id: string }
 
 type ContextFile = {
   key: string

packages/app/src/components/prompt-input/submit.test.ts

@@ -31,12 +31,6 @@ const promotedDrafts: Array<{ draftID: string; server: string; sessionId: string
 const sentPrompts: string[] = []
 const promptInputs: unknown[] = []
 const sentCommands: unknown[] = []
-const switchedAgents: Array<{ sessionID: string; agent: string }> = []
-const switchedModels: Array<{
-  sessionID: string
-  model: { id: string; providerID: string; variant?: string }
-}> = []
-const sessionRequestOrder: string[] = []
 const commands: Array<{ name: string }> = []
 let serverSessionSyncs = 0
 
@@ -99,22 +93,10 @@ const clientFor = (directory: string) => {
           }
         },
         prompt: async (input: unknown) => {
-          sessionRequestOrder.push("prompt")
           sentPrompts.push(directory)
           promptInputs.push(input)
           return { data: undefined }
         },
-        switchAgent: async (input: { sessionID: string; agent: string }) => {
-          sessionRequestOrder.push("agent")
-          switchedAgents.push(input)
-        },
-        switchModel: async (input: {
-          sessionID: string
-          model: { id: string; providerID: string; variant?: string }
-        }) => {
-          sessionRequestOrder.push("model")
-          switchedModels.push(input)
-        },
         command: async (input: unknown) => {
           sentCommands.push(input)
         },
@@ -143,6 +125,13 @@ beforeAll(async () => {
     useSearchParams: () => [search, () => undefined],
   }))
 
+  mock.module("@opencode-ai/sdk/v2/client", () => ({
+    createOpencodeClient: (input: { directory: string }) => {
+      createdClients.push(input.directory)
+      return clientFor(input.directory)
+    },
+  }))
+
   mock.module("@opencode-ai/ui/toast", () => ({
     Toast: { Region: () => null },
     showToast: () => 0,
@@ -208,8 +197,13 @@ beforeAll(async () => {
       const sdk = {
         scope: "local",
         directory: "/repo/main",
+        client: rootClient,
         api: rootClient.api,
+        currentApi: rootClient.api,
         url: "http://localhost:4096",
+        createClient(opts: any) {
+          return clientFor(opts.directory)
+        },
       }
       return () => sdk
     },
@@ -297,9 +291,6 @@ beforeEach(() => {
   sentPrompts.length = 0
   promptInputs.length = 0
   sentCommands.length = 0
-  switchedAgents.length = 0
-  switchedModels.length = 0
-  sessionRequestOrder.length = 0
   commands.length = 0
   promptValue = [{ type: "text", content: "ls", start: 0, end: 2 }]
   params = {}
@@ -457,17 +448,13 @@ describe("prompt submit worktree selection", () => {
     expect(promotedDrafts).toEqual([{ draftID: "draft-1", server: "project-server", sessionId: "session-1" }])
   })
 
-  test("switches the selected agent and model before prompting", async () => {
+  test("includes the selected variant on optimistic prompts", async () => {
     params = { id: "session-1" }
     variant = "high"
 
     const submit = createPromptSubmit({
       prompt,
-      info: () => ({
-        id: "session-1",
-        agent: "old-agent",
-        model: { id: "old-model", providerID: "old-provider" },
-      }),
+      info: () => ({ id: "session-1" }),
       imageAttachments: () => [],
       commentCount: () => 0,
       autoAccept: () => false,
@@ -496,14 +483,6 @@ describe("prompt submit worktree selection", () => {
       },
     })
     expect(sentPrompts).toEqual(["/repo/main"])
-    expect(switchedAgents).toEqual([{ sessionID: "session-1", agent: "agent" }])
-    expect(switchedModels).toEqual([
-      {
-        sessionID: "session-1",
-        model: { id: "model", providerID: "provider", variant: "high" },
-      },
-    ])
-    expect(sessionRequestOrder).toEqual(["agent", "model", "prompt"])
     expect(promptInputs[0]).toMatchObject({
       sessionID: "session-1",
       text: "ls",

packages/app/src/components/prompt-input/submit.ts

@@ -1,5 +1,4 @@
-import type { Message } from "@/types"
-import type { SessionInfo } from "@opencode-ai/client/promise"
+import type { Message, Session } from "@/types"
 import { showToast } from "@/utils/toast"
 import { base64Encode } from "@opencode-ai/core/util/encode"
 import { Binary } from "@opencode-ai/core/util/binary"
@@ -16,13 +15,14 @@ import { useSDK, type DirectorySDK } from "@/context/sdk"
 import { useSync, type DirectorySync } from "@/context/sync"
 import { Identifier } from "@/utils/id"
 import { Worktree as WorktreeState } from "@/utils/worktree"
-import { getDirectory } from "@opencode-ai/core/util/path"
 import { buildRequestParts } from "./build-request-parts"
 import { setCursorPosition } from "./editor-dom"
 import { formatServerError } from "@/utils/server-errors"
 import { ScopedKey } from "@/utils/server-scope"
 import { createPromptSubmissionState } from "./submission-state"
+import { normalizeSessionInfo } from "@/utils/session"
 import { Event } from "@opencode-ai/schema/event"
+import { getDirectory } from "@opencode-ai/core/util/path"
 
 type PendingPrompt = {
   abort: AbortController
@@ -42,10 +42,9 @@ export type FollowupDraft = {
 }
 
 type FollowupSendInput = {
-  api: DirectorySDK["api"]["session"]
+  api: DirectorySDK["currentApi"]["session"]
   serverSync: ServerSync
   sync: DirectorySync
-  session: Accessor<{ agent?: string; model?: { id: string; providerID: string; variant?: string } } | undefined>
   draft: FollowupDraft
   messageID?: string
   optimisticBusy?: boolean
@@ -158,25 +157,6 @@ export async function sendFollowupDraft(input: FollowupSendInput) {
       return false
     }
 
-    const session = input.session()
-    if (session?.agent !== input.draft.agent) {
-      await input.api.switchAgent({ sessionID: input.draft.sessionID, agent: input.draft.agent })
-    }
-    if (
-      session?.model?.providerID !== input.draft.model.providerID ||
-      session.model.id !== input.draft.model.modelID ||
-      (session.model.variant ?? "default") !== (input.draft.variant ?? "default")
-    ) {
-      await input.api.switchModel({
-        sessionID: input.draft.sessionID,
-        model: {
-          id: input.draft.model.modelID,
-          providerID: input.draft.model.providerID,
-          variant: input.draft.variant,
-        },
-      })
-    }
-
     await input.api.prompt({
       sessionID: input.draft.sessionID,
       id: messageID,
@@ -217,9 +197,7 @@ export async function sendFollowupDraft(input: FollowupSendInput) {
 
 type PromptSubmitInput = {
   prompt: ReturnType<typeof usePrompt>
-  info: Accessor<
-    { id: string; agent?: string; model?: { id: string; providerID: string; variant?: string } } | undefined
-  >
+  info: Accessor<{ id: string } | undefined>
   imageAttachments: Accessor<ImageAttachmentPart[]>
   commentCount: Accessor<number>
   autoAccept: Accessor<boolean>
@@ -283,7 +261,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
       return Promise.resolve()
     }
     return sdk()
-      .api.session.interrupt({ sessionID })
+      .currentApi.session.interrupt({ sessionID })
       .catch(() => {})
   }
 
@@ -310,10 +288,10 @@ export function createPromptSubmit(input: PromptSubmitInput) {
     }
   }
 
-  const seed = (dir: string, info: SessionInfo) => {
+  const seed = (dir: string, info: Session) => {
     serverSync().session.remember(info)
     const [, setStore] = serverSync().child(dir)
-    setStore("session", (list: SessionInfo[]) => {
+    setStore("session", (list: Session[]) => {
       const result = Binary.search(list, info.id, (item) => item.id)
       const next = [...list]
       if (result.found) {
@@ -367,10 +345,11 @@ export function createPromptSubmit(input: PromptSubmitInput) {
     const worktreeSelection = input.newSessionWorktree?.() || "main"
 
     let sessionDirectory = projectDirectory
+
     if (isNewSession) {
       if (worktreeSelection === "create") {
         const createdWorktree = await sdk()
-          .api.projectCopy.create({
+          .currentApi.projectCopy.create({
             projectID: sync().data.project,
             strategy: "git_worktree",
             directory: getDirectory(projectDirectory),
@@ -383,6 +362,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
             })
             return undefined
           })
+
         if (!createdWorktree) return
         WorktreeState.pending(sdk().scope, createdWorktree.directory)
         sessionDirectory = createdWorktree.directory
@@ -402,11 +382,12 @@ export function createPromptSubmit(input: PromptSubmitInput) {
     let session = input.info()
     if (!session && isNewSession) {
       const created = await sdk()
-        .api.session.create({
+        .currentApi.session.create({
           agent: currentAgent.name,
           model: { id: currentModel.id, providerID: currentModel.provider.id, variant },
           location: { directory: sessionDirectory },
         })
+        .then(normalizeSessionInfo)
         .catch((err) => {
           showToast({
             title: language.t("prompt.toast.sessionCreateFailed.title"),
@@ -492,7 +473,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
       clearInput()
       const eventID = Event.ID.create()
       sdk()
-        .api.session.shell({
+        .currentApi.session.shell({
           sessionID: session.id,
           id: eventID,
           command: text,
@@ -516,7 +497,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
         const messageID = Identifier.ascending("message")
         serverSync().session.set("session_status", session.id, { type: "busy" })
         sdk()
-          .api.session.command({
+          .currentApi.session.command({
             sessionID: session.id,
             id: messageID,
             command: commandName,
@@ -613,10 +594,9 @@ export function createPromptSubmit(input: PromptSubmitInput) {
     }
 
     void sendFollowupDraft({
-      api: sdk().api.session,
+      api: sdk().currentApi.session,
       sync: sync(),
       serverSync: serverSync(),
-      session: () => input.info() ?? session,
       draft,
       messageID,
       optimisticBusy: sessionDirectory === projectDirectory,

packages/app/src/components/settings-general.tsx

@@ -0,0 +1,792 @@
+import { Component, Show, createMemo, createResource, onMount, type JSX } from "solid-js"
+import { Button } from "@opencode-ai/ui/button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Select } from "@opencode-ai/ui/select"
+import { Switch } from "@opencode-ai/ui/switch"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { Tag } from "@opencode-ai/ui/v2/badge-v2"
+import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+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 { useServerProtocol, useServerSDK } from "@/context/server-sdk"
+import { useUpdaterAction } from "./updater-action"
+import {
+  monoDefault,
+  monoFontFamily,
+  monoInput,
+  sansDefault,
+  sansFontFamily,
+  sansInput,
+  terminalDefault,
+  terminalFontFamily,
+  terminalInput,
+  useSettings,
+} from "@/context/settings"
+import { decode64 } from "@/utils/base64"
+import { playSoundById, 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,
+}
+
+type ThemeOption = {
+  id: string
+  name: string
+}
+
+type ShellOption = {
+  path: string
+  name: string
+  acceptable: boolean
+}
+
+type ShellSelectOption = {
+  id: string
+  value: string
+  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 = () => {
+  const theme = useTheme()
+  const language = useLanguage()
+  const permission = usePermission()
+  const platform = usePlatform()
+  const dialog = useDialog()
+  const params = useParams()
+  const settings = useSettings()
+
+  const updater = useUpdaterAction()
+
+  const linux = createMemo(() => platform.platform === "desktop" && platform.os === "linux")
+  const dir = createMemo(() => decode64(params.dir))
+  const accepting = createMemo(() => {
+    const value = dir()
+    if (!value) return false
+    if (!params.id) return permission.isAutoAcceptingDirectory(value)
+    return permission.isAutoAccepting(params.id, value)
+  })
+
+  const toggleAccept = (checked: boolean) => {
+    const value = dir()
+    if (!value) return
+
+    if (!params.id) {
+      if (permission.isAutoAcceptingDirectory(value) === checked) return
+      permission.toggleAutoAcceptDirectory(value)
+      return
+    }
+
+    if (checked) {
+      permission.enableAutoAccept(params.id, value)
+      return
+    }
+
+    permission.disableAutoAccept(params.id, value)
+  }
+  const desktop = createMemo(() => platform.platform === "desktop")
+
+  const themeOptions = createMemo<ThemeOption[]>(() => theme.ids().map((id) => ({ id, name: theme.name(id) })))
+
+  const serverSync = useServerSync()
+  const serverSdk = useServerSDK()
+  const protocol = useServerProtocol()
+
+  const [shells] = createResource(
+    () => (protocol() === "v1" ? serverSdk() : undefined),
+    (sdk) => sdk.legacy.pty.shells().catch(() => [] as ShellOption[]),
+    { initialValue: [] as ShellOption[] },
+  )
+
+  const [displayBackend, { refetch: refetchDisplayBackend }] = createResource(
+    () => (linux() && platform.getDisplayBackend ? true : false),
+    () => Promise.resolve(platform.getDisplayBackend?.() ?? null).catch(() => null as DisplayBackend | null),
+    { initialValue: null as DisplayBackend | null },
+  )
+
+  const [pinchZoom, { mutate: setPinchZoom }] = createResource(
+    () => (desktop() && platform.getPinchZoomEnabled ? true : false),
+    () => Promise.resolve(platform.getPinchZoomEnabled?.() ?? false).catch(() => false),
+    { initialValue: false },
+  )
+
+  onMount(() => {
+    void theme.loadThemes()
+  })
+
+  const autoOption = { id: "auto", value: "", label: language.t("settings.general.row.shell.autoDefault") }
+  const currentShell = createMemo(() => serverSync().data.config.shell ?? "")
+
+  const shellOptions = createMemo<ShellSelectOption[]>(() => {
+    const list = shells.latest
+    const current = serverSync().data.config.shell
+
+    const nameCounts = new Map<string, number>()
+    for (const s of list) {
+      nameCounts.set(s.name, (nameCounts.get(s.name) || 0) + 1)
+    }
+
+    const options = [
+      autoOption,
+      ...list.map((s) => {
+        const ambiguousName = (nameCounts.get(s.name) || 0) > 1
+        const text = ambiguousName ? s.path : s.name
+        const label = s.acceptable ? text : `${text} (${language.t("settings.general.row.shell.terminalOnly")})`
+        return {
+          id: s.path,
+          // Prefer name over path - "bash" is much cleaner than the explicit full route even when it may change due to PATH.
+          value: ambiguousName ? s.path : s.name,
+          label,
+        }
+      }),
+    ]
+
+    if (current && !options.some((o) => o.value === current)) {
+      options.push({ id: current, value: current, label: current })
+    }
+
+    return options
+  })
+
+  const onDisplayBackendChange = (checked: boolean) => {
+    const update = platform.setDisplayBackend?.(checked ? "wayland" : "auto")
+    if (!update) return
+    void update.finally(() => {
+      void refetchDisplayBackend()
+    })
+  }
+
+  const onPinchZoomChange = (checked: boolean) => {
+    setPinchZoom(checked)
+    const update = platform.setPinchZoomEnabled?.(checked)
+    if (!update) return
+    void update.catch(() => setPinchZoom(!checked))
+  }
+
+  const colorSchemeOptions = createMemo((): { value: ColorScheme; label: string }[] => [
+    { value: "system", label: language.t("theme.scheme.system") },
+    { value: "light", label: language.t("theme.scheme.light") },
+    { value: "dark", label: language.t("theme.scheme.dark") },
+  ])
+
+  const languageOptions = createMemo(() =>
+    language.locales.map((locale) => ({
+      value: locale,
+      label: language.label(locale),
+    })),
+  )
+
+  const noneSound = { id: "none", label: "sound.option.none" } as const
+  const soundOptions = [noneSound, ...SOUND_OPTIONS]
+  const mono = () => monoInput(settings.appearance.font())
+  const sans = () => sansInput(settings.appearance.uiFont())
+  const terminal = () => terminalInput(settings.appearance.terminalFont())
+
+  const soundSelectProps = (
+    enabled: () => boolean,
+    current: () => string,
+    setEnabled: (value: boolean) => void,
+    set: (id: string) => void,
+  ) => ({
+    options: soundOptions,
+    current: enabled() ? (soundOptions.find((o) => o.id === current()) ?? noneSound) : noneSound,
+    value: (o: (typeof soundOptions)[number]) => o.id,
+    label: (o: (typeof soundOptions)[number]) => language.t(o.label),
+    onHighlight: (option: (typeof soundOptions)[number] | undefined) => {
+      if (!option) return
+      playDemoSound(option.id === "none" ? undefined : option.id)
+    },
+    onSelect: (option: (typeof soundOptions)[number] | undefined) => {
+      if (!option) return
+      if (option.id === "none") {
+        setEnabled(false)
+        stopDemoSound()
+        return
+      }
+      setEnabled(true)
+      set(option.id)
+      playDemoSound(option.id)
+    },
+    variant: "secondary" as const,
+    size: "small" as const,
+    triggerVariant: "settings" as const,
+  })
+
+  const InterfaceSection = () => (
+    <div class="flex flex-col gap-1">
+      <SettingsList>
+        <SettingsRow
+          title={
+            <span class="flex items-center gap-2">
+              {language.t("settings.general.row.newInterface.title")}
+              <Tag variant="accent">{language.t("settings.general.row.newInterface.badge")}</Tag>
+            </span>
+          }
+          description={language.t("settings.general.row.newInterface.description")}
+        >
+          <div data-action="settings-new-layout-designs">
+            <Switch
+              checked={settings.general.newLayoutDesigns()}
+              onChange={(checked) => {
+                settings.general.setNewLayoutDesigns(checked)
+                if (!checked) return
+                void import("@/components/settings-v2").then((module) => {
+                  void dialog.show(() => <module.DialogSettings />)
+                })
+              }}
+            />
+          </div>
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const InterfaceNoticeSection = () => (
+    <div class="flex flex-col gap-1">
+      <SettingsList>
+        <SettingsRow
+          title={language.t("settings.general.row.newInterfaceNotice.title")}
+          description={language.t("settings.general.row.newInterfaceNotice.description")}
+        >
+          <Button size="small" variant="ghost" onClick={settings.general.dismissNewInterfaceNotice}>
+            {language.t("settings.general.row.newInterfaceNotice.dismiss")}
+          </Button>
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const GeneralSection = () => (
+    <div class="flex flex-col gap-1">
+      <SettingsList>
+        <SettingsRow
+          title={language.t("settings.general.row.language.title")}
+          description={language.t("settings.general.row.language.description")}
+        >
+          <Select
+            data-action="settings-language"
+            options={languageOptions()}
+            current={languageOptions().find((o) => o.value === language.locale())}
+            value={(o) => o.value}
+            label={(o) => o.label}
+            onSelect={(option) => option && language.setLocale(option.value)}
+            variant="secondary"
+            size="small"
+            triggerVariant="settings"
+          />
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("command.permissions.autoaccept.enable")}
+          description={language.t("toast.permissions.autoaccept.on.description")}
+        >
+          <div data-action="settings-auto-accept-permissions">
+            <Switch checked={accepting()} disabled={!dir()} onChange={toggleAccept} />
+          </div>
+        </SettingsRow>
+
+        <Show when={protocol() === "v1"}>
+          <SettingsRow
+            title={language.t("settings.general.row.shell.title")}
+            description={language.t("settings.general.row.shell.description")}
+          >
+          <Select
+            data-action="settings-shell"
+            options={shellOptions()}
+            current={shellOptions().find((o) => o.value === currentShell()) ?? autoOption}
+            value={(o) => o.id}
+            label={(o) => o.label}
+            onSelect={(option) => {
+              if (!option) return
+              if (option.value === currentShell()) return
+              serverSync().updateConfig({ shell: option.value })
+            }}
+            variant="secondary"
+            size="small"
+            triggerVariant="settings"
+            triggerStyle={{ "min-width": "180px" }}
+          />
+          </SettingsRow>
+        </Show>
+
+        <SettingsRow
+          title={language.t("settings.general.row.reasoningSummaries.title")}
+          description={language.t("settings.general.row.reasoningSummaries.description")}
+        >
+          <div data-action="settings-feed-reasoning-summaries">
+            <Switch
+              checked={settings.general.showReasoningSummaries()}
+              onChange={(checked) => settings.general.setShowReasoningSummaries(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.shellToolPartsExpanded.title")}
+          description={language.t("settings.general.row.shellToolPartsExpanded.description")}
+        >
+          <div data-action="settings-feed-shell-tool-parts-expanded">
+            <Switch
+              checked={settings.general.shellToolPartsExpanded()}
+              onChange={(checked) => settings.general.setShellToolPartsExpanded(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.editToolPartsExpanded.title")}
+          description={language.t("settings.general.row.editToolPartsExpanded.description")}
+        >
+          <div data-action="settings-feed-edit-tool-parts-expanded">
+            <Switch
+              checked={settings.general.editToolPartsExpanded()}
+              onChange={(checked) => settings.general.setEditToolPartsExpanded(checked)}
+            />
+          </div>
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const AdvancedSection = () => (
+    <div class="flex flex-col gap-1">
+      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.advanced")}</h3>
+
+      <SettingsList>
+        <SettingsRow
+          title={language.t("settings.general.row.showFileTree.title")}
+          description={language.t("settings.general.row.showFileTree.description")}
+        >
+          <div data-action="settings-show-file-tree">
+            <Switch
+              checked={settings.general.showFileTree()}
+              onChange={(checked) => settings.general.setShowFileTree(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.showNavigation.title")}
+          description={language.t("settings.general.row.showNavigation.description")}
+        >
+          <div data-action="settings-show-navigation">
+            <Switch
+              checked={settings.general.showNavigation()}
+              onChange={(checked) => settings.general.setShowNavigation(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.showSearch.title")}
+          description={language.t("settings.general.row.showSearch.description")}
+        >
+          <div data-action="settings-show-search">
+            <Switch
+              checked={settings.general.showSearch()}
+              onChange={(checked) => settings.general.setShowSearch(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.showStatus.title")}
+          description={language.t("settings.general.row.showStatus.description")}
+        >
+          <div data-action="settings-show-status">
+            <Switch
+              checked={settings.general.showStatus()}
+              onChange={(checked) => settings.general.setShowStatus(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.showCustomAgents.title")}
+          description={language.t("settings.general.row.showCustomAgents.description")}
+        >
+          <div data-action="settings-show-custom-agents">
+            <Switch
+              checked={settings.general.showCustomAgents()}
+              onChange={(checked) => settings.general.setShowCustomAgents(checked)}
+            />
+          </div>
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const AppearanceSection = () => (
+    <div class="flex flex-col gap-1">
+      <h3 class="text-14-medium text-text-strong pb-2">{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={colorSchemeOptions()}
+            current={colorSchemeOptions().find((o) => o.value === theme.colorScheme())}
+            value={(o) => o.value}
+            label={(o) => o.label}
+            onSelect={(option) => option && theme.setColorScheme(option.value)}
+            variant="secondary"
+            size="small"
+            triggerVariant="settings"
+            triggerStyle={{ "min-width": "220px" }}
+          />
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.theme.title")}
+          description={
+            <>
+              {language.t("settings.general.row.theme.description")}{" "}
+              <Link href="https://opencode.ai/docs/themes/">{language.t("common.learnMore")}</Link>
+            </>
+          }
+        >
+          <Select
+            data-action="settings-theme"
+            options={themeOptions()}
+            current={themeOptions().find((o) => o.id === theme.themeId())}
+            value={(o) => o.id}
+            label={(o) => o.name}
+            onSelect={(option) => {
+              if (!option) return
+              theme.setTheme(option.id)
+            }}
+            variant="secondary"
+            size="small"
+            triggerVariant="settings"
+          />
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.uiFont.title")}
+          description={language.t("settings.general.row.uiFont.description")}
+        >
+          <div class="w-full sm:w-[220px]">
+            <TextField
+              data-action="settings-ui-font"
+              label={language.t("settings.general.row.uiFont.title")}
+              hideLabel
+              type="text"
+              value={sans()}
+              onChange={(value) => settings.appearance.setUIFont(value)}
+              placeholder={sansDefault}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+              class="text-12-regular"
+              style={{ "font-family": sansFontFamily(settings.appearance.uiFont()) }}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.font.title")}
+          description={language.t("settings.general.row.font.description")}
+        >
+          <div class="w-full sm:w-[220px]">
+            <TextField
+              data-action="settings-code-font"
+              label={language.t("settings.general.row.font.title")}
+              hideLabel
+              type="text"
+              value={mono()}
+              onChange={(value) => settings.appearance.setFont(value)}
+              placeholder={monoDefault}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+              class="text-12-regular"
+              style={{ "font-family": monoFontFamily(settings.appearance.font()) }}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.terminalFont.title")}
+          description={language.t("settings.general.row.terminalFont.description")}
+        >
+          <div class="w-full sm:w-[220px]">
+            <TextField
+              data-action="settings-terminal-font"
+              label={language.t("settings.general.row.terminalFont.title")}
+              hideLabel
+              type="text"
+              value={terminal()}
+              onChange={(value) => settings.appearance.setTerminalFont(value)}
+              placeholder={terminalDefault}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+              class="text-12-regular"
+              style={{ "font-family": terminalFontFamily(settings.appearance.terminalFont()) }}
+            />
+          </div>
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const NotificationsSection = () => (
+    <div class="flex flex-col gap-1">
+      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.notifications")}</h3>
+
+      <SettingsList>
+        <SettingsRow
+          title={language.t("settings.general.notifications.agent.title")}
+          description={language.t("settings.general.notifications.agent.description")}
+        >
+          <div data-action="settings-notifications-agent">
+            <Switch
+              checked={settings.notifications.agent()}
+              onChange={(checked) => settings.notifications.setAgent(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.notifications.permissions.title")}
+          description={language.t("settings.general.notifications.permissions.description")}
+        >
+          <div data-action="settings-notifications-permissions">
+            <Switch
+              checked={settings.notifications.permissions()}
+              onChange={(checked) => settings.notifications.setPermissions(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.notifications.errors.title")}
+          description={language.t("settings.general.notifications.errors.description")}
+        >
+          <div data-action="settings-notifications-errors">
+            <Switch
+              checked={settings.notifications.errors()}
+              onChange={(checked) => settings.notifications.setErrors(checked)}
+            />
+          </div>
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const SoundsSection = () => (
+    <div class="flex flex-col gap-1">
+      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.sounds")}</h3>
+
+      <SettingsList>
+        <SettingsRow
+          title={language.t("settings.general.sounds.agent.title")}
+          description={language.t("settings.general.sounds.agent.description")}
+        >
+          <Select
+            data-action="settings-sounds-agent"
+            {...soundSelectProps(
+              () => settings.sounds.agentEnabled(),
+              () => settings.sounds.agent(),
+              (value) => settings.sounds.setAgentEnabled(value),
+              (id) => settings.sounds.setAgent(id),
+            )}
+          />
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.sounds.permissions.title")}
+          description={language.t("settings.general.sounds.permissions.description")}
+        >
+          <Select
+            data-action="settings-sounds-permissions"
+            {...soundSelectProps(
+              () => settings.sounds.permissionsEnabled(),
+              () => settings.sounds.permissions(),
+              (value) => settings.sounds.setPermissionsEnabled(value),
+              (id) => settings.sounds.setPermissions(id),
+            )}
+          />
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.sounds.errors.title")}
+          description={language.t("settings.general.sounds.errors.description")}
+        >
+          <Select
+            data-action="settings-sounds-errors"
+            {...soundSelectProps(
+              () => settings.sounds.errorsEnabled(),
+              () => settings.sounds.errors(),
+              (value) => settings.sounds.setErrorsEnabled(value),
+              (id) => settings.sounds.setErrors(id),
+            )}
+          />
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const UpdatesSection = () => (
+    <div class="flex flex-col gap-1">
+      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.updates")}</h3>
+
+      <SettingsList>
+        <SettingsRow
+          title={language.t("settings.general.row.releaseNotes.title")}
+          description={language.t("settings.general.row.releaseNotes.description")}
+        >
+          <div data-action="settings-release-notes">
+            <Switch
+              checked={settings.general.releaseNotes()}
+              onChange={(checked) => settings.general.setReleaseNotes(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.updates.row.check.title")}
+          description={language.t("settings.updates.row.check.description")}
+        >
+          <Button size="small" variant="secondary" disabled={!updater.action().run} onClick={updater.run}>
+            {language.t(updater.action().label)}
+          </Button>
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
+  const DisplaySection = () => (
+    <Show when={desktop()}>
+      <div class="flex flex-col gap-1">
+        <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.display")}</h3>
+
+        <SettingsList>
+          <SettingsRow
+            title={language.t("settings.general.row.pinchZoom.title")}
+            description={language.t("settings.general.row.pinchZoom.description")}
+          >
+            <div data-action="settings-pinch-zoom">
+              <Switch checked={pinchZoom.latest} onChange={onPinchZoomChange} />
+            </div>
+          </SettingsRow>
+
+          <Show when={linux()}>
+            <SettingsRow
+              title={
+                <div class="flex items-center gap-2">
+                  <span>{language.t("settings.general.row.wayland.title")}</span>
+                  <Tooltip value={language.t("settings.general.row.wayland.tooltip")} placement="top">
+                    <span class="text-text-weak">
+                      <Icon name="help" size="small" />
+                    </span>
+                  </Tooltip>
+                </div>
+              }
+              description={language.t("settings.general.row.wayland.description")}
+            >
+              <div data-action="settings-wayland">
+                <Switch checked={displayBackend.latest === "wayland"} onChange={onDisplayBackendChange} />
+              </div>
+            </SettingsRow>
+          </Show>
+        </SettingsList>
+      </div>
+    </Show>
+  )
+
+  return (
+    <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
+      <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
+        <div class="flex flex-col gap-1 pt-6 pb-8">
+          <h2 class="text-16-medium text-text-strong">{language.t("settings.tab.general")}</h2>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-8 w-full">
+        <Show when={settings.general.layoutTransitionAvailable()}>
+          <InterfaceSection />
+        </Show>
+
+        <Show when={settings.general.newInterfaceNoticeVisible()}>
+          <InterfaceNoticeSection />
+        </Show>
+
+        <GeneralSection />
+
+        <AppearanceSection />
+
+        <NotificationsSection />
+
+        <SoundsSection />
+
+        <UpdatesSection />
+
+        <DisplaySection />
+
+        <Show when={desktop()}>
+          <AdvancedSection />
+        </Show>
+      </div>
+    </div>
+  )
+}
+
+interface SettingsRowProps {
+  title: string | JSX.Element
+  description: string | JSX.Element
+  children: JSX.Element
+}
+
+const SettingsRow: Component<SettingsRowProps> = (props) => {
+  return (
+    <div class="flex flex-wrap items-center gap-4 py-3 border-b border-border-weak-base last:border-none sm:flex-nowrap">
+      <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+        <span class="text-14-medium text-text-strong">{props.title}</span>
+        <span class="text-12-regular text-text-weak">{props.description}</span>
+      </div>
+      <div class="flex w-full justify-end sm:w-auto sm:shrink-0">{props.children}</div>
+    </div>
+  )
+}

packages/app/src/components/settings-models.tsx

@@ -0,0 +1,149 @@
+import { useFilteredList } from "@opencode-ai/ui/hooks"
+import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+import { Switch } from "@opencode-ai/ui/switch"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { type Component, For, Show } from "solid-js"
+import { useLanguage } from "@/context/language"
+import { useModels } from "@/context/models"
+import { popularProviders } from "@/hooks/use-providers"
+import { SettingsList } from "./settings-list"
+import { SettingsServerPicker, SettingsServerScope } from "./settings-server-picker"
+
+type ModelItem = ReturnType<ReturnType<typeof useModels>["list"]>[number]
+
+const ListLoadingState: Component<{ label: string }> = (props) => {
+  return (
+    <div class="flex flex-col items-center justify-center py-12 text-center">
+      <span class="text-14-regular text-text-weak">{props.label}</span>
+    </div>
+  )
+}
+
+const ListEmptyState: Component<{ message: string; filter: string }> = (props) => {
+  return (
+    <div class="flex flex-col items-center justify-center py-12 text-center">
+      <span class="text-14-regular text-text-weak">{props.message}</span>
+      <Show when={props.filter}>
+        <span class="text-14-regular text-text-strong mt-1">&quot;{props.filter}&quot;</span>
+      </Show>
+    </div>
+  )
+}
+
+export const SettingsModels: Component = () => {
+  return (
+    <SettingsServerScope>
+      <SettingsModelsContent />
+    </SettingsServerScope>
+  )
+}
+
+const SettingsModelsContent: Component = () => {
+  const language = useLanguage()
+  const models = useModels()
+
+  const list = useFilteredList<ModelItem>({
+    items: (_filter) => models.list(),
+    key: (x) => `${x.provider.id}:${x.id}`,
+    filterKeys: ["provider.name", "name", "id"],
+    sortBy: (a, b) => a.name.localeCompare(b.name),
+    groupBy: (x) => x.provider.id,
+    sortGroupsBy: (a, b) => {
+      const aIndex = popularProviders.indexOf(a.category)
+      const bIndex = popularProviders.indexOf(b.category)
+      const aPopular = aIndex >= 0
+      const bPopular = bIndex >= 0
+
+      if (aPopular && !bPopular) return -1
+      if (!aPopular && bPopular) return 1
+      if (aPopular && bPopular) return aIndex - bIndex
+
+      const aName = a.items[0].provider.name
+      const bName = b.items[0].provider.name
+      return aName.localeCompare(bName)
+    },
+  })
+
+  return (
+    <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
+      <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
+        <div class="flex flex-col gap-4 pt-6 pb-6 max-w-[720px]">
+          <div class="flex items-center justify-between gap-4">
+            <h2 class="text-16-medium text-text-strong">{language.t("settings.models.title")}</h2>
+            <SettingsServerPicker />
+          </div>
+          <div class="flex items-center gap-2 px-3 h-9 rounded-lg bg-surface-base">
+            <Icon name="magnifying-glass" class="text-icon-weak-base flex-shrink-0" />
+            <TextField
+              variant="ghost"
+              type="text"
+              value={list.filter()}
+              onChange={list.onInput}
+              placeholder={language.t("dialog.model.search.placeholder")}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+              class="flex-1"
+            />
+            <Show when={list.filter()}>
+              <IconButton icon="circle-x" variant="ghost" onClick={list.clear} />
+            </Show>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-8 max-w-[720px]">
+        <Show
+          when={!list.grouped.loading}
+          fallback={
+            <ListLoadingState label={`${language.t("common.loading")}${language.t("common.loading.ellipsis")}`} />
+          }
+        >
+          <Show
+            when={list.flat().length > 0}
+            fallback={<ListEmptyState message={language.t("dialog.model.empty")} filter={list.filter()} />}
+          >
+            <For each={list.grouped.latest}>
+              {(group) => (
+                <div class="flex flex-col gap-1">
+                  <div class="flex items-center gap-2 pb-2">
+                    <ProviderIcon id={group.category} class="size-5 shrink-0 icon-strong-base" />
+                    <span class="text-14-medium text-text-strong">{group.items[0].provider.name}</span>
+                  </div>
+                  <SettingsList>
+                    <For each={group.items}>
+                      {(item) => {
+                        const key = { providerID: item.provider.id, modelID: item.id }
+                        return (
+                          <div class="flex flex-wrap items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
+                            <div class="min-w-0">
+                              <span class="text-14-regular text-text-strong truncate block">{item.name}</span>
+                            </div>
+                            <div class="flex-shrink-0">
+                              <Switch
+                                checked={models.visible(key)}
+                                onChange={(checked) => {
+                                  models.setVisibility(key, checked)
+                                }}
+                                hideLabel
+                              >
+                                {item.name}
+                              </Switch>
+                            </div>
+                          </div>
+                        )
+                      }}
+                    </For>
+                  </SettingsList>
+                </div>
+              )}
+            </For>
+          </Show>
+        </Show>
+      </div>
+    </div>
+  )
+}

packages/app/src/components/settings-providers.tsx

@@ -0,0 +1,266 @@
+import { Button } from "@opencode-ai/ui/button"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+import { Tag } from "@opencode-ai/ui/tag"
+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 { useServerProtocol, useServerSDK } from "@/context/server-sdk"
+import { useServerSync } from "@/context/server-sync"
+import { DialogConnectProvider, useProviderConnectController } from "./dialog-connect-provider"
+import { DialogCustomProvider } from "./dialog-custom-provider"
+import { SettingsList } from "./settings-list"
+import { SettingsServerPicker, SettingsServerScope } from "./settings-server-picker"
+
+type ProviderSource = "env" | "api" | "config" | "custom"
+type ProviderItem = ReturnType<ReturnType<typeof useProviders>["connected"]>[number]
+
+const PROVIDER_NOTES = [
+  { match: (id: string) => id === "opencode", key: "dialog.provider.opencode.note" },
+  { match: (id: string) => id === "opencode-go", key: "dialog.provider.opencodeGo.tagline" },
+  { match: (id: string) => id === "anthropic", key: "dialog.provider.anthropic.note" },
+  { match: (id: string) => id.startsWith("github-copilot"), key: "dialog.provider.copilot.note" },
+  { match: (id: string) => id === "openai", key: "dialog.provider.openai.note" },
+  { match: (id: string) => id === "google", key: "dialog.provider.google.note" },
+  { match: (id: string) => id === "openrouter", key: "dialog.provider.openrouter.note" },
+  { match: (id: string) => id === "vercel", key: "dialog.provider.vercel.note" },
+] as const
+
+export const SettingsProviders: Component<{ onBack?: () => void }> = (props) => {
+  return (
+    <SettingsServerScope>
+      <SettingsProvidersContent onBack={props.onBack} />
+    </SettingsServerScope>
+  )
+}
+
+const SettingsProvidersContent: Component<{ onBack?: () => void }> = (props) => {
+  const dialog = useDialog()
+  const language = useLanguage()
+  const serverSDK = useServerSDK()
+  const protocol = useServerProtocol()
+  const serverSync = useServerSync()
+  const providers = useProviders(() => undefined)
+  const providerConnect = useProviderConnectController({ onBack: props.onBack })
+
+  const connect = (provider?: string) => {
+    providerConnect.select(provider)
+    void dialog.show(() => <DialogConnectProvider controller={providerConnect} />)
+  }
+
+  const connected = createMemo(() => {
+    return providers
+      .connected()
+      .filter((p) => p.id !== "opencode" || Object.values(p.models).find((m) => m.cost?.input))
+  })
+
+  const popular = createMemo(() => {
+    const connectedIDs = new Set(connected().map((p) => p.id))
+    const items = providers
+      .popular()
+      .filter((p) => !connectedIDs.has(p.id))
+      .slice()
+    items.sort((a, b) => popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id))
+    return items
+  })
+
+  const source = (item: ProviderItem): ProviderSource | undefined => {
+    if (!("source" in item)) return
+    const value = item.source
+    if (value === "env" || value === "api" || value === "config" || value === "custom") return value
+    return
+  }
+
+  const type = (item: ProviderItem) => {
+    const current = source(item)
+    if (current === "env") return language.t("settings.providers.tag.environment")
+    if (current === "api") return language.t("provider.connect.method.apiKey")
+    if (current === "config") {
+      if (isConfigCustom(item.id)) return language.t("settings.providers.tag.custom")
+      return language.t("settings.providers.tag.config")
+    }
+    if (current === "custom") return language.t("settings.providers.tag.custom")
+    return language.t("settings.providers.tag.other")
+  }
+
+  const canDisconnect = (item: ProviderItem) =>
+    source(item) !== "env" && (protocol() === "v1" || !isConfigCustom(item.id))
+
+  const note = (id: string) => PROVIDER_NOTES.find((item) => item.match(id))?.key
+
+  const isConfigCustom = (providerID: string) => {
+    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
+    return true
+  }
+
+  const disableProvider = async (providerID: string, name: string) => {
+    if (protocol() !== "v1") return
+    const before = serverSync().data.config.disabled_providers ?? []
+    const next = before.includes(providerID) ? before : [...before, providerID]
+    serverSync().set("config", "disabled_providers", next)
+
+    await serverSync()
+      .updateConfig({ disabled_providers: next })
+      .then(() => {
+        showToast({
+          variant: "success",
+          icon: "circle-check",
+          title: language.t("provider.disconnect.toast.disconnected.title", { provider: name }),
+          description: language.t("provider.disconnect.toast.disconnected.description", { provider: name }),
+        })
+      })
+      .catch((err: unknown) => {
+        serverSync().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) => {
+    if (isConfigCustom(providerID)) {
+      await serverSDK().legacy.auth.remove({ providerID }).catch(() => undefined)
+      await disableProvider(providerID, name)
+      return
+    }
+    await serverSDK()
+      .currentApi.integration.get({ integrationID: providerID })
+      .then(async (integration) => {
+        const credentials = integration.data?.connections.filter((item) => item.type === "credential") ?? []
+        if (credentials.length === 0) throw new Error(`No removable credentials found for ${name}`)
+        await Promise.all(
+          credentials.map((credential) => serverSDK().currentApi.credential.remove({ credentialID: credential.id })),
+        )
+        showToast({
+          variant: "success",
+          icon: "circle-check",
+          title: language.t("provider.disconnect.toast.disconnected.title", { provider: name }),
+          description: language.t("provider.disconnect.toast.disconnected.description", { provider: name }),
+        })
+      })
+      .catch((err: unknown) => {
+        const message = err instanceof Error ? err.message : String(err)
+        showToast({ title: language.t("common.requestFailed"), description: message })
+      })
+  }
+
+  return (
+    <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
+      <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
+        <div class="flex items-center justify-between gap-4 pt-6 pb-8 max-w-[720px]">
+          <h2 class="text-16-medium text-text-strong">{language.t("settings.providers.title")}</h2>
+          <SettingsServerPicker />
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-8 max-w-[720px]">
+        <div class="flex flex-col gap-1" data-component="connected-providers-section">
+          <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.providers.section.connected")}</h3>
+          <SettingsList>
+            <Show
+              when={connected().length > 0}
+              fallback={
+                <div class="py-4 text-14-regular text-text-weak">
+                  {language.t("settings.providers.connected.empty")}
+                </div>
+              }
+            >
+              <For each={connected()}>
+                {(item) => (
+                  <div class="group flex flex-wrap items-center justify-between gap-4 min-h-16 py-3 border-b border-border-weak-base last:border-none">
+                    <div class="flex items-center gap-3 min-w-0">
+                      <ProviderIcon id={item.id} class="size-5 shrink-0 icon-strong-base" />
+                      <span class="text-14-medium text-text-strong truncate">{item.name}</span>
+                      <Tag>{type(item)}</Tag>
+                    </div>
+                    <Show
+                      when={canDisconnect(item)}
+                      fallback={
+                        <span class="text-14-regular text-text-base opacity-0 group-hover:opacity-100 transition-opacity duration-200 pr-3 cursor-default">
+                          {language.t("settings.providers.connected.environmentDescription")}
+                        </span>
+                      }
+                    >
+                      <Button size="large" variant="ghost" onClick={() => void disconnect(item.id, item.name)}>
+                        {language.t("common.disconnect")}
+                      </Button>
+                    </Show>
+                  </div>
+                )}
+              </For>
+            </Show>
+          </SettingsList>
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.providers.section.popular")}</h3>
+          <SettingsList>
+            <For each={popular()}>
+              {(item) => (
+                <div class="flex flex-wrap items-center justify-between gap-4 min-h-16 py-3 border-b border-border-weak-base last:border-none">
+                  <div class="flex flex-col min-w-0">
+                    <div class="flex items-center gap-x-3">
+                      <ProviderIcon id={item.id} class="size-5 shrink-0 icon-strong-base" />
+                      <span class="text-14-medium text-text-strong">{item.name}</span>
+                      <Show when={item.id === "opencode"}>
+                        <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
+                      </Show>
+                      <Show when={item.id === "opencode-go"}>
+                        <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
+                      </Show>
+                    </div>
+                    <Show when={note(item.id)}>
+                      {(key) => <span class="text-12-regular text-text-weak pl-8">{language.t(key())}</span>}
+                    </Show>
+                  </div>
+                  <Button size="large" variant="secondary" icon="plus-small" onClick={() => connect(item.id)}>
+                    {language.t("common.connect")}
+                  </Button>
+                </div>
+              )}
+            </For>
+
+            <Show when={protocol() === "v1"}>
+              <div
+                class="flex items-center justify-between gap-4 min-h-16 border-b border-border-weak-base last:border-none flex-wrap py-3"
+                data-component="custom-provider-section"
+              >
+                <div class="flex flex-col min-w-0">
+                  <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
+                    <ProviderIcon id="synthetic" class="size-5 shrink-0 icon-strong-base" />
+                    <span class="text-14-medium text-text-strong">{language.t("provider.custom.title")}</span>
+                    <Tag>{language.t("settings.providers.tag.custom")}</Tag>
+                  </div>
+                  <span class="text-12-regular text-text-weak pl-8">
+                    {language.t("settings.providers.custom.description")}
+                  </span>
+                </div>
+                <Button
+                  size="large"
+                  variant="secondary"
+                  icon="plus-small"
+                  onClick={() => {
+                    dialog.show(() => <DialogCustomProvider onBack={dialog.close} />)
+                  }}
+                >
+                  {language.t("common.connect")}
+                </Button>
+              </div>
+            </Show>
+          </SettingsList>
+
+          <Button
+            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={() => connect()}
+          >
+            {language.t("dialog.provider.viewAll")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

packages/app/src/components/settings-server-picker.tsx

@@ -0,0 +1,106 @@
+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 { 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 { useGlobal } from "@/context/global"
+import { useSettings } from "@/context/settings"
+
+export function SettingsServerScope(props: ParentProps) {
+  const global = useGlobal()
+  const settings = useSettings()
+
+  return (
+    <Show when={settings.general.newLayoutDesigns()} fallback={props.children}>
+      <Show when={global.settings.server.selected()}>
+        {(server) => <SettingsServerDataProviders server={server()}>{props.children}</SettingsServerDataProviders>}
+      </Show>
+    </Show>
+  )
+}
+
+function SettingsServerDataProviders(props: ParentProps<{ server: ServerConnection.Any }>) {
+  const global = useGlobal()
+  const serverCtx = () => global.ensureServerCtx(props.server)
+
+  return (
+    <QueryClientProvider client={serverCtx().queryClient}>
+      <ServerSDKProvider server={() => props.server}>
+        <ServerSyncProvider>
+          <ModelsProvider>{props.children}</ModelsProvider>
+        </ServerSyncProvider>
+      </ServerSDKProvider>
+    </QueryClientProvider>
+  )
+}
+
+export function SettingsServerPicker() {
+  const global = useGlobal()
+  const settings = useSettings()
+  const selected = createMemo(() =>
+    settings.general.newLayoutDesigns() ? global.settings.server.selected() : undefined,
+  )
+
+  return (
+    <Show when={selected()}>
+      {(conn) => (
+        <DropdownMenu gutter={4} placement="bottom-end">
+          <DropdownMenu.Trigger
+            as={Button}
+            variant="secondary"
+            size="large"
+            class="h-8 max-w-[260px] gap-2 px-2 py-1.5 data-[expanded]:bg-surface-base-active"
+          >
+            <ServerHealthIndicator health={global.servers.health[ServerConnection.key(conn())]} />
+            <ServerRow
+              conn={conn()}
+              status={global.servers.health[ServerConnection.key(conn())]}
+              class="flex items-center gap-2 min-w-0 flex-1"
+              nameClass="text-14-regular text-text-base truncate"
+              versionClass="hidden"
+            />
+            <Icon name="chevron-down" size="small" class="text-icon-weak shrink-0" />
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Portal>
+            <DropdownMenu.Content class="w-[320px] mt-1 [&_[data-slot=dropdown-menu-radio-item]]:pl-2 [&_[data-slot=dropdown-menu-radio-item]]:pr-2">
+              <DropdownMenu.RadioGroup
+                value={global.settings.server.key}
+                onChange={(key) => {
+                  if (typeof key === "string") global.settings.server.set(ServerConnection.Key.make(key))
+                }}
+              >
+                <For each={global.servers.list()}>
+                  {(item) => {
+                    const key = ServerConnection.key(item)
+                    const blocked = () => global.servers.health[key]?.healthy === false
+                    return (
+                      <DropdownMenu.RadioItem value={key} disabled={blocked()}>
+                        <ServerHealthIndicator health={global.servers.health[key]} />
+                        <ServerRow
+                          conn={item}
+                          dimmed={blocked()}
+                          status={global.servers.health[key]}
+                          class="flex items-center gap-2 min-w-0 flex-1"
+                          nameClass="text-14-regular text-text-base truncate"
+                          versionClass="text-12-regular text-text-weak truncate"
+                        />
+                        <DropdownMenu.ItemIndicator>
+                          <Icon name="check-small" size="small" class="text-icon-weak" />
+                        </DropdownMenu.ItemIndicator>
+                      </DropdownMenu.RadioItem>
+                    )
+                  }}
+                </For>
+              </DropdownMenu.RadioGroup>
+            </DropdownMenu.Content>
+          </DropdownMenu.Portal>
+        </DropdownMenu>
+      )}
+    </Show>
+  )
+}

packages/app/src/components/settings-servers.tsx

@@ -0,0 +1,33 @@
+import { Show, type Component } from "solid-js"
+import { useLanguage } from "@/context/language"
+import { ServerConnectionForm, ServerConnectionList, useServerManagementController } from "./dialog-select-server"
+
+export const SettingsServers: Component = () => {
+  const language = useLanguage()
+  const controller = useServerManagementController()
+
+  return (
+    <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
+      <div class="flex flex-col flex-1 min-h-0 max-w-[720px]">
+        <Show
+          when={controller.isFormMode()}
+          fallback={
+            <>
+              <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
+                <div class="flex flex-col gap-1 pt-6 pb-8">
+                  <h2 class="text-16-medium text-text-strong">{language.t("status.popover.tab.servers")}</h2>
+                </div>
+              </div>
+              <ServerConnectionList controller={controller} />
+            </>
+          }
+        >
+          <div class="flex flex-1 min-h-0 flex-col gap-4 pt-6">
+            <div class="text-16-medium text-text-strong">{controller.formTitle()}</div>
+            <ServerConnectionForm controller={controller} />
+          </div>
+        </Show>
+      </div>
+    </div>
+  )
+}

packages/app/src/components/settings-v2/dialog-settings-v2.tsx

@@ -33,7 +33,7 @@ export const DialogSettings: Component<{
       const draft = tabs.store.find((item) => item.type === "draft" && item.draftID === route.draftID)
       return draft?.type === "draft" ? draft.directory : undefined
     }
-    if (route.type === "session") return serverSync().session.get(route.sessionId)?.location.directory
+    if (route.type === "session") return serverSync().session.get(route.sessionId)?.directory
     return undefined
   })
 

packages/app/src/components/settings-v2/general.tsx

@@ -5,10 +5,12 @@ import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
 import { Switch } from "@opencode-ai/ui/v2/switch-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useLanguage } from "@/context/language"
 import { usePermission } from "@/context/permission"
 import { usePlatform } from "@/context/platform"
 import { useServerSync } from "@/context/server-sync"
+import { useServerProtocol, useServerSDK } from "@/context/server-sdk"
 import { useUpdaterAction } from "../updater-action"
 import {
   monoDefault,
@@ -26,6 +28,7 @@ import { playSoundById, SOUND_OPTIONS } from "@/utils/sound"
 import { Link } from "../link"
 import { SettingsListV2 } from "./parts/list"
 import { SettingsRowV2 } from "./parts/row"
+import { LayoutRetirementNotice, LayoutTransitionToggle } from "./interface-transition"
 import "./settings-v2.css"
 
 let demoSoundState = {
@@ -85,15 +88,18 @@ export const SettingsGeneralV2: Component<{
   const language = useLanguage()
   const permission = usePermission()
   const platform = usePlatform()
+  const dialog = useDialog()
   const settings = useSettings()
   const serverSync = useServerSync()
+  const serverSdk = useServerSDK()
+  const protocol = useServerProtocol()
   const mobile = createMediaQuery("(max-width: 767px)")
 
   const updater = useUpdaterAction()
 
   const dir = createMemo(() => {
     if (!props.sessionID) return undefined
-    return serverSync().session.lineage.peek(props.sessionID)?.session.location.directory
+    return serverSync().session.lineage.peek(props.sessionID)?.session.directory
   })
   const accepting = createMemo(() => {
     const value = dir()
@@ -117,11 +123,8 @@ export const SettingsGeneralV2: Component<{
   const themeOptions = createMemo<ThemeOption[]>(() => theme.ids().map((id) => ({ id, name: theme.name(id) })))
 
   const [shells] = createResource(
-    async () => {
-      // TODO: Restore executable shell discovery when the V2 client exposes it.
-      // return (await sdk.api.pty.shells()).data
-      return [] as ShellOption[]
-    },
+    () => (protocol() === "v1" ? serverSdk() : undefined),
+    (sdk) => sdk.legacy.pty.shells().catch(() => [] as ShellOption[]),
     { initialValue: [] as ShellOption[] },
   )
 
@@ -222,6 +225,31 @@ export const SettingsGeneralV2: Component<{
     },
   })
 
+  const InterfaceSection = () => (
+    <LayoutTransitionToggle
+      title={language.t("settings.general.row.newInterface.title")}
+      badge={language.t("settings.general.row.newInterface.badge")}
+      description={language.t("settings.general.row.newInterface.description")}
+      checked={settings.general.newLayoutDesigns()}
+      onChange={(checked) => {
+        settings.general.setNewLayoutDesigns(checked)
+        if (checked) return
+        void import("@/components/dialog-settings").then((module) => {
+          void dialog.show(() => <module.DialogSettings />)
+        })
+      }}
+    />
+  )
+
+  const InterfaceNoticeSection = () => (
+    <LayoutRetirementNotice
+      title={language.t("settings.general.row.newInterfaceNotice.title")}
+      description={language.t("settings.general.row.newInterfaceNotice.description")}
+      dismiss={language.t("settings.general.row.newInterfaceNotice.dismiss")}
+      onDismiss={settings.general.dismissNewInterfaceNotice}
+    />
+  )
+
   const GeneralSection = () => (
     <div class="settings-v2-section">
       <SettingsListV2>
@@ -251,10 +279,11 @@ export const SettingsGeneralV2: Component<{
           </div>
         </SettingsRowV2>
 
-        <SettingsRowV2
-          title={language.t("settings.general.row.shell.title")}
-          description={language.t("settings.general.row.shell.description")}
-        >
+        <Show when={protocol() === "v1"}>
+          <SettingsRowV2
+            title={language.t("settings.general.row.shell.title")}
+            description={language.t("settings.general.row.shell.description")}
+          >
           <SelectV2
             appearance="inline"
             data-action="settings-shell"
@@ -270,7 +299,8 @@ export const SettingsGeneralV2: Component<{
               serverSync().updateConfig({ shell: option.value })
             }}
           />
-        </SettingsRowV2>
+          </SettingsRowV2>
+        </Show>
 
         <SettingsRowV2
           title={language.t("settings.general.row.reasoningSummaries.title")}
@@ -661,6 +691,14 @@ export const SettingsGeneralV2: Component<{
       </div>
 
       <div class="settings-v2-tab-body">
+        <Show when={settings.general.layoutTransitionAvailable()}>
+          <InterfaceSection />
+        </Show>
+
+        <Show when={settings.general.newInterfaceNoticeVisible()}>
+          <InterfaceNoticeSection />
+        </Show>
+
         <GeneralSection />
 
         <AppearanceSection />

packages/app/src/components/settings-v2/interface-transition.stories.tsx

@@ -0,0 +1,76 @@
+// @ts-nocheck
+import { Show } from "solid-js"
+import { createStore } from "solid-js/store"
+import { LayoutRetirementNotice, LayoutTransitionToggle } from "./interface-transition"
+
+const copy = {
+  title: "New layout",
+  badge: "New",
+  description: "Use the new tabs and home layout. Switch between layouts for a limited time.",
+  noticeTitle: "You're now using new layout",
+  noticeDescription: "The previous layout is no longer available",
+  dismiss: "Dismiss",
+}
+
+function Frame(props) {
+  return <div class="w-[640px] max-w-full">{props.children}</div>
+}
+
+function ToggleExample(props) {
+  const [state, setState] = createStore({ checked: props.checked })
+  return (
+    <Frame>
+      <LayoutTransitionToggle
+        title={copy.title}
+        badge={copy.badge}
+        description={copy.description}
+        checked={state.checked}
+        onChange={(checked) => setState("checked", checked)}
+      />
+    </Frame>
+  )
+}
+
+function NoticeExample() {
+  const [state, setState] = createStore({ dismissed: false })
+  return (
+    <Frame>
+      <Show when={!state.dismissed} fallback={<span class="text-v2-text-text-muted">Notice dismissed</span>}>
+        <LayoutRetirementNotice
+          title={copy.noticeTitle}
+          description={copy.noticeDescription}
+          dismiss={copy.dismiss}
+          onDismiss={() => setState("dismissed", true)}
+        />
+      </Show>
+    </Frame>
+  )
+}
+
+export default {
+  title: "App/Settings/Layout transition",
+  id: "app-settings-layout-transition",
+  component: LayoutTransitionToggle,
+}
+
+export const NewLayoutEnabled = {
+  render: () => <ToggleExample checked />,
+}
+
+export const PreviousLayoutEnabled = {
+  render: () => <ToggleExample checked={false} />,
+}
+
+export const PreviousLayoutRetired = {
+  render: () => <NoticeExample />,
+}
+
+export const AllStates = {
+  render: () => (
+    <div class="flex flex-col gap-8">
+      <ToggleExample checked />
+      <ToggleExample checked={false} />
+      <NoticeExample />
+    </div>
+  ),
+}

packages/app/src/components/settings-v2/interface-transition.tsx

@@ -0,0 +1,54 @@
+import { Tag } from "@opencode-ai/ui/v2/badge-v2"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Switch } from "@opencode-ai/ui/v2/switch-v2"
+import { SettingsListV2 } from "./parts/list"
+import { SettingsRowV2 } from "./parts/row"
+
+export function LayoutTransitionToggle(props: {
+  title: string
+  badge: string
+  description: string
+  checked: boolean
+  onChange: (checked: boolean) => void
+}) {
+  return (
+    <div class="settings-v2-section">
+      <div class="settings-v2-interface-feature">
+        <SettingsListV2>
+          <SettingsRowV2
+            title={
+              <span class="flex items-center gap-2">
+                {props.title}
+                <Tag variant="accent">{props.badge}</Tag>
+              </span>
+            }
+            description={props.description}
+          >
+            <div data-action="settings-new-layout-designs">
+              <Switch checked={props.checked} onChange={props.onChange} />
+            </div>
+          </SettingsRowV2>
+        </SettingsListV2>
+      </div>
+    </div>
+  )
+}
+
+export function LayoutRetirementNotice(props: {
+  title: string
+  description: string
+  dismiss: string
+  onDismiss: () => void
+}) {
+  return (
+    <div class="settings-v2-section">
+      <SettingsListV2>
+        <SettingsRowV2 title={props.title} description={props.description}>
+          <ButtonV2 size="small" variant="ghost-muted" onClick={props.onDismiss}>
+            {props.dismiss}
+          </ButtonV2>
+        </SettingsRowV2>
+      </SettingsListV2>
+    </div>
+  )
+}

packages/app/src/components/settings-v2/providers.tsx

@@ -6,7 +6,7 @@ import { showToast } from "@/utils/toast"
 import { popularProviders, useProviders } from "@/hooks/use-providers"
 import { createMemo, type Accessor, type Component, For, Show } from "solid-js"
 import { useLanguage } from "@/context/language"
-import { useServerSDK } from "@/context/server-sdk"
+import { useServerProtocol, useServerSDK } from "@/context/server-sdk"
 import { useServerSync } from "@/context/server-sync"
 import { DialogConnectProvider, useProviderConnectController } from "../dialog-connect-provider"
 import { DialogCustomProvider } from "../dialog-custom-provider"
@@ -36,6 +36,7 @@ export const SettingsProvidersV2: Component<{
   const dialog = useDialog()
   const language = useLanguage()
   const serverSdk = useServerSDK()
+  const protocol = useServerProtocol()
   const serverSync = useServerSync()
   const providers = useProviders(props.directory)
   const providerConnect = useProviderConnectController({ onBack: props.onBack })
@@ -80,7 +81,8 @@ export const SettingsProvidersV2: Component<{
     return language.t("settings.providers.tag.other")
   }
 
-  const canDisconnect = (item: ProviderItem) => source(item) !== "env" && !isConfigCustom(item.id)
+  const canDisconnect = (item: ProviderItem) =>
+    source(item) !== "env" && (protocol() === "v1" || !isConfigCustom(item.id))
 
   const note = (id: string) => PROVIDER_NOTES.find((item) => item.match(id))?.key
 
@@ -93,7 +95,7 @@ export const SettingsProvidersV2: Component<{
   }
 
   const disableProvider = async (providerID: string, name: string) => {
-    return
+    if (protocol() !== "v1") return
     const before = serverSync().data.config.disabled_providers ?? []
     const next = before.includes(providerID) ? before : [...before, providerID]
     serverSync().set("config", "disabled_providers", next)
@@ -116,15 +118,20 @@ export const SettingsProvidersV2: Component<{
   }
 
   const disconnect = async (providerID: string, name: string) => {
+    if (isConfigCustom(providerID)) {
+      await serverSdk().legacy.auth.remove({ providerID }).catch(() => undefined)
+      await disableProvider(providerID, name)
+      return
+    }
     const location = props.directory() ? { directory: props.directory() } : undefined
     await serverSdk()
-      .api.integration.get({ integrationID: providerID, location })
+      .currentApi.integration.get({ integrationID: providerID, location })
       .then(async (integration) => {
         const credentials = integration.data?.connections.filter((item) => item.type === "credential") ?? []
         if (credentials.length === 0) throw new Error(`No removable credentials found for ${name}`)
         await Promise.all(
           credentials.map((credential) =>
-            serverSdk().api.credential.remove({ credentialID: credential.id, location }),
+            serverSdk().currentApi.credential.remove({ credentialID: credential.id, location }),
           ),
         )
         showToast({
@@ -222,7 +229,7 @@ export const SettingsProvidersV2: Component<{
               )}
             </For>
 
-            <Show when={false}>
+            <Show when={protocol() === "v1"}>
               <div class="settings-v2-provider-row" data-component="custom-provider-section">
                 <div class="settings-v2-provider-lead">
                   <ProviderIcon

packages/app/src/components/status-popover-body.tsx

@@ -5,7 +5,7 @@ import { Switch } from "@opencode-ai/ui/switch"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { showToast } from "@/utils/toast"
 import { useNavigate } from "@solidjs/router"
-import { type Accessor, createEffect, createMemo, createResource, For, type JSXElement, onCleanup, Show } from "solid-js"
+import { type Accessor, 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"
@@ -16,7 +16,7 @@ import { type ServerHealth } from "@/utils/server-health"
 import { useGlobal } from "@/context/global"
 import { useSettings } from "@/context/settings"
 import { useMcpToggle } from "@/context/mcp"
-import { useSDK } from "@/context/sdk"
+import { useServerProtocol } from "@/context/server-sdk"
 
 const pluginEmptyMessage = (value: string, file: string): JSXElement => {
   const parts = value.split(file)
@@ -251,7 +251,6 @@ function ServerStatusList(props: { state: ServerStatusState }) {
 
 export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
   const sync = useSync()
-  const sdk = useSDK()
   const global = useGlobal()
   const server = useServer()
   const platform = usePlatform()
@@ -259,6 +258,7 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
   const language = useLanguage()
   const navigate = useNavigate()
   const settings = useSettings()
+  const protocol = useServerProtocol()
 
   const fail = (err: unknown) => {
     showToast({
@@ -279,7 +279,9 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
     dialogRun += 1
   })
   const sortedServers = createMemo(() => {
-    const list = global.servers.list()
+    const list = settings.general.newLayoutDesigns()
+      ? global.servers.list()
+      : global.servers.list().filter((x) => global.ensureServerCtx(x).sdk.protocolKind() !== "v2")
     return listServersByHealth(list, server.key, global.servers.health)
   })
   const toggleMcp = useMcpToggle()
@@ -289,11 +291,9 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
   const mcpConnected = createMemo(() => mcpNames().filter((name) => mcpStatus(name) === "connected").length)
   const lspItems = createMemo(() => sync().data.lsp ?? [])
   const lspCount = createMemo(() => lspItems().length)
-  const [pluginList] = createResource(
-    () => (props.shown() ? sdk().directory : undefined),
-    (directory) => sdk().api.plugin.list({ location: { directory } }).then((result) => result.data),
+  const plugins = createMemo(() =>
+    (sync().data.config.plugin ?? []).map((item) => (typeof item === "string" ? item : item[0])),
   )
-  const plugins = createMemo(() => (pluginList.latest ?? []).map((item) => item.id))
   const pluginCount = createMemo(() => plugins().length)
   const pluginEmpty = createMemo(() => pluginEmptyMessage(language.t("dialog.plugins.empty"), "opencode.json"))
 
@@ -318,11 +318,13 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
             {mcpConnected() > 0 ? `${mcpConnected()} ` : ""}
             {language.t("status.popover.tab.mcp")}
           </Tabs.Trigger>
-          <Tabs.Trigger value="lsp" data-slot="tab" class="text-12-regular">
-            {lspCount() > 0 ? `${lspCount()} ` : ""}
-            {language.t("status.popover.tab.lsp")}
-          </Tabs.Trigger>
-          <Show when={true}>
+          <Show when={protocol() === "v1"}>
+            <Tabs.Trigger value="lsp" data-slot="tab" class="text-12-regular">
+              {lspCount() > 0 ? `${lspCount()} ` : ""}
+              {language.t("status.popover.tab.lsp")}
+            </Tabs.Trigger>
+          </Show>
+          <Show when={protocol() === "v1"}>
             <Tabs.Trigger value="plugins" data-slot="tab" class="text-12-regular">
               {pluginCount() > 0 ? `${pluginCount()} ` : ""}
               {language.t("status.popover.tab.plugins")}
@@ -426,7 +428,8 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
                             "bg-icon-success-base": status() === "connected",
                             "bg-icon-critical-base": status() === "failed",
                             "bg-border-weak-base": status() === "disabled",
-                            "bg-icon-warning-base": status() === "needs_auth",
+                            "bg-icon-warning-base":
+                              status() === "needs_auth" || status() === "needs_client_registration",
                           }}
                         />
                         <span class="flex flex-col min-w-0 flex-1">
@@ -458,7 +461,8 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
           </div>
         </Tabs.Content>
 
-        <Tabs.Content value="lsp">
+        <Show when={protocol() === "v1"}>
+          <Tabs.Content value="lsp">
           <div class="flex flex-col px-2 pb-2">
             <div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
               <Show
@@ -484,9 +488,10 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
               </Show>
             </div>
           </div>
-        </Tabs.Content>
+          </Tabs.Content>
+        </Show>
 
-        <Show when={true}>
+        <Show when={protocol() === "v1"}>
           <Tabs.Content value="plugins">
             <div class="flex flex-col px-2 pb-2">
               <div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">

packages/app/src/components/status-popover-indicator.test.ts

@@ -35,6 +35,7 @@ describe("hasNonBlockingServiceIssue", () => {
   test("detects MCP failures that do not block chatting", () => {
     expect(hasNonBlockingServiceIssue({ mcp: ["failed"], lsp: [] })).toBe(true)
     expect(hasNonBlockingServiceIssue({ mcp: ["needs_auth"], lsp: [] })).toBe(true)
+    expect(hasNonBlockingServiceIssue({ mcp: ["needs_client_registration"], lsp: [] })).toBe(true)
     expect(hasNonBlockingServiceIssue({ mcp: ["connected", "pending", "disabled"], lsp: [] })).toBe(false)
   })
 
@@ -47,6 +48,7 @@ describe("hasNonBlockingServiceIssue", () => {
 describe("hasServiceNeedingAttention", () => {
   test("detects MCP states that need user attention", () => {
     expect(hasServiceNeedingAttention({ mcp: ["needs_auth"] })).toBe(true)
+    expect(hasServiceNeedingAttention({ mcp: ["needs_client_registration"] })).toBe(true)
   })
 
   test("ignores states that do not need user attention", () => {

packages/app/src/components/status-popover-indicator.ts

@@ -2,7 +2,7 @@ import type { LspStatus } from "@/types"
 import type { McpServer } from "@opencode-ai/client/promise"
 
 export function hasServiceNeedingAttention(input: { mcp: Array<McpServer["status"]["status"]> }) {
-  return input.mcp.some((status) => status === "needs_auth")
+  return input.mcp.some((status) => status === "needs_auth" || status === "needs_client_registration")
 }
 
 export function hasNonBlockingServiceIssue(input: {

packages/app/src/components/terminal.tsx

@@ -11,11 +11,13 @@ import { matchKeybind, parseKeybind } from "@/context/command"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
 import { useSDK } from "@/context/sdk"
+import { useServerSDK } from "@/context/server-sdk"
 import { terminalFontFamily, useSettings } from "@/context/settings"
 import type { LocalPTY } from "@/context/terminal"
 import { disposeIfDisposable, getHoveredLinkText, setOptionIfSupported } from "@/utils/runtime-adapters"
 import { terminalWriter } from "@/utils/terminal-writer"
 import { terminalWebSocketURL } from "@/utils/terminal-websocket-url"
+import { authTokenFromCredentials } from "@/utils/server"
 
 const TOGGLE_TERMINAL_ID = "terminal.toggle"
 const DEFAULT_TOGGLE_TERMINAL_KEYBIND = "ctrl+`"
@@ -174,8 +176,13 @@ export const Terminal = (props: TerminalProps) => {
   const settings = useSettings()
   const theme = useTheme()
   const language = useLanguage()
+  // Terminal captures its connection for the PTY lifetime, so callers must key it per server/session.
+  const connection = useServerSDK()().server
   const directory = sdk().directory
   const url = sdk().url
+  const auth = connection.http
+  const username = auth?.username ?? "opencode"
+  const password = auth?.password ?? ""
   let container!: HTMLDivElement
   const [local, others] = splitProps(props, [
     "pty",
@@ -234,7 +241,7 @@ export const Terminal = (props: TerminalProps) => {
 
   const pushSize = async (cols: number, rows: number) => {
     return sdk()
-      .api.pty.update({
+      .currentApi.pty.update({
         ptyID: id,
         location: { directory },
         size: { cols, rows },
@@ -516,7 +523,7 @@ export const Terminal = (props: TerminalProps) => {
 
       const gone = async () => {
         return sdk()
-          .api.pty.get({ ptyID: id, location: { directory } })
+          .currentApi.pty.get({ ptyID: id, location: { directory } })
           .then((result) => result.data.status === "exited")
           .catch((err) => {
             if (err && typeof err === "object" && "_tag" in err && err._tag === "PtyNotFoundError") return true
@@ -526,8 +533,23 @@ export const Terminal = (props: TerminalProps) => {
       }
 
       const connectToken = async () => {
-        // TODO: Add PTY tickets when the V2 client exposes a connect-token API.
-        return undefined
+        const endpoint = new URL(`/api/pty/${encodeURIComponent(id)}/connect-token`, url)
+        endpoint.searchParams.set("location[directory]", directory)
+        const response = await (platform.fetch ?? globalThis.fetch)(endpoint, {
+          method: "POST",
+          headers: {
+            "x-opencode-ticket": "1",
+            ...(password
+              ? { Authorization: `Basic ${authTokenFromCredentials({ username, password })}` }
+              : undefined),
+          },
+        })
+        if (response.status === 403)
+          throw new Error("PTY connect ticket rejected by origin or CSRF checks. Check the server CORS config.")
+        if (!response.ok) throw new Error(`PTY connect ticket failed with ${response.status}`)
+        const result = (await response.json()) as { data?: { ticket?: string } }
+        if (!result.data?.ticket) throw new Error("PTY connect ticket response did not include a ticket")
+        return result.data.ticket
       }
 
       const retry = (err: unknown) => {

packages/app/src/components/titlebar-tab-nav.tsx

@@ -4,12 +4,12 @@ import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { createMutation } 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 { displayLabel } from "@opencode-ai/util/session-title-fallback"
 import { useGlobal } from "@/context/global"
 import { ServerConnection, serverName } from "@/context/server"
 import { displayName, projectForSession } from "@/pages/layout/helpers"
 import { SessionTabAvatar } from "@/pages/layout/session-tab-avatar"
-import type { SessionInfo } from "@opencode-ai/client/promise"
-import { sessionLabel } from "@/utils/session-title"
+import type { Session } from "@/types"
 import { canOpenTabRename, forwardTabRef } from "./titlebar-tab-gesture"
 import { TabPreviewPopover } from "./titlebar-tab-popover"
 import "./titlebar-tab-nav.css"
@@ -21,7 +21,7 @@ export function TabNavItem(props: {
   ref?: Ref<HTMLDivElement>
   href: string
   server: ServerConnection.Key
-  session: () => SessionInfo | undefined
+  session: () => Session | undefined
   fallbackTitle?: string
   onRename: (title: string) => Promise<void>
   onClose: () => void
@@ -57,19 +57,19 @@ export function TabNavItem(props: {
   })
   const title = createMemo(() => {
     const session = props.session()
-    return session ? sessionLabel(session) : props.fallbackTitle
+    return session ? displayLabel(session) : props.fallbackTitle
   })
 
   const projectName = createMemo(() => {
     const session = props.session()
     if (!session) return
-    return displayName(project() ?? { worktree: session.location.directory })
+    return displayName(project() ?? { worktree: session.directory })
   })
   const previewPath = createMemo(() => {
     const session = props.session()
     if (!session) return
     const home = serverCtx()?.sync.data.path.home
-    return home ? session.location.directory.replace(home, "~") : session.location.directory
+    return home ? session.directory.replace(home, "~") : session.directory
   })
   // Only label the server when multiple servers are connected.
   const serverLabel = createMemo(() => {
@@ -235,7 +235,7 @@ export function TabNavItem(props: {
             {(session) => (
               <SessionTabAvatar
                 project={project()}
-                directory={session().location.directory}
+                directory={session().directory}
                 sessionId={session().id}
                 server={props.server}
               />
@@ -306,7 +306,7 @@ export function TabNavItem(props: {
       }}
       data={{
         projectName: projectName(),
-        title: props.session()?.title,
+        title: title(),
         path: previewPath(),
         serverName: serverLabel(),
       }}

packages/app/src/components/titlebar-tab-strip.tsx

@@ -19,7 +19,7 @@ import { base64Encode } from "@opencode-ai/core/util/encode"
 import { showToast } from "@/utils/toast"
 import { canStartTabDrag, isTabCloseTarget } from "./titlebar-tab-gesture"
 import { adjacentTabKey, mergeVisibleTabOrder } from "./titlebar-tab-order"
-import type { SessionInfo } from "@opencode-ai/client/promise"
+import type { Session } from "@/types"
 
 function SessionTabSlot(props: {
   tab: SessionTab
@@ -27,7 +27,7 @@ function SessionTabSlot(props: {
   index: () => number
   active: () => boolean
   forceTruncate: boolean
-  session: () => SessionInfo | undefined
+  session: () => Session | undefined
   fallbackTitle?: string
   onRename: (title: string) => Promise<void>
   onNavigate: (element: HTMLDivElement) => void
@@ -105,7 +105,7 @@ function SessionTabEntry(props: {
 
     ctx.sync.session.remember({ ...value, title })
     try {
-      await ctx.sdk.api.session.rename({ sessionID: value.id, title })
+      await ctx.sdk.currentApi.session.rename({ sessionID: value.id, title })
     } catch (err) {
       const current = session()
       const currentCtx = props.serverCtx()
@@ -127,7 +127,7 @@ function SessionTabEntry(props: {
     createRoot((dispose) => {
       try {
         void ctx.sync
-          .ensureDirSyncContext(value.location.directory)
+          .ensureDirSyncContext(value.directory)
           .session.sync(value.id)
           .catch(() => {})
           .finally(dispose)
@@ -144,7 +144,7 @@ function SessionTabEntry(props: {
     const current = sdk()
     if (!current) return
     createTabPromptState(tabs, props.tab, current.scope, {
-      dir: base64Encode(value.location.directory),
+      dir: base64Encode(value.directory),
       id: value.id,
     })
   })

packages/app/src/components/titlebar.tsx

@@ -27,6 +27,7 @@ import { tabKey, useTabs } from "@/context/tabs"
 import type { PromptSession } from "@/context/prompt"
 import "./titlebar.css"
 import { newTabTooltipKeybind } from "./command-tooltip-keybind"
+import { normalizeSessionInfo } from "@/utils/session"
 
 const legacyTitlebarHeight = 40
 const v2TitlebarHeight = 36
@@ -191,8 +192,9 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
                 return conn ? { route, sdk: global.ensureServerCtx(conn).sdk } : undefined
               },
               ({ route, sdk }) =>
-                sdk.api.session
+                sdk.currentApi.session
                   .get({ sessionID: route.sessionId })
+                  .then(normalizeSessionInfo)
                   .catch(() => {}),
             )
 
@@ -254,7 +256,7 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
                   sessionId: activeSession.id,
                 }
                 const model = tabs.stateValue<PromptSession>(sessionTab, "prompt")?.model.current()
-                tabs.newDraft({ server: sessionTab.server, directory: activeSession.location.directory }, "", model)
+                tabs.newDraft({ server: sessionTab.server, directory: activeSession.directory }, "", model)
                 return
               }
 

packages/app/src/context/directory-sync.ts

@@ -1,11 +1,11 @@
 import { Binary } from "@opencode-ai/core/util/binary"
-import type { Message, Part } from "@/types"
-import type { SessionInfo } from "@opencode-ai/client/promise"
+import type { Message, Part, Session } from "@/types"
 import { createMemo } from "solid-js"
 import { produce, reconcile, type SetStoreFunction } from "solid-js/store"
 import type { createServerSdkContext } from "./server-sdk"
 import type { createServerSyncContextInner } from "./server-sync"
 import type { State } from "./global-sync/types"
+import { normalizeSessionInfo } from "@/utils/session"
 
 const cmp = (a: string, b: string) => (a < b ? -1 : a > b ? 1 : 0)
 const sessionFields = new Set([
@@ -26,6 +26,7 @@ export const createDirSyncContext = (
   serverSync: ReturnType<typeof createServerSyncContextInner>,
   serverSDK: ReturnType<typeof createServerSdkContext>,
 ) => {
+  const client = serverSDK.createClient({ directory, throwOnError: true })
   const current = createMemo(() => serverSync.child(directory, { mcp: true }))
   const absolute = (path: string) => (current()[0].path.directory + "/" + path).replace("//", "/")
   const data = new Proxy({} as State, {
@@ -46,7 +47,7 @@ export const createDirSyncContext = (
 
   const index = (sessionID: string) => {
     const session = serverSync.session.get(sessionID)
-    if (!session || session.location.directory !== directory) return
+    if (!session || session.directory !== directory) return
     const [store, setStore] = current()
     const result = Binary.search(store.session, session.id, (item) => item.id)
     if (result.found) {
@@ -74,13 +75,13 @@ export const createDirSyncContext = (
       if (match.found) return serverSync.data.project[match.index]
     },
     session: {
-      remember(session: SessionInfo) {
+      remember(session: Session) {
         serverSync.session.remember(session)
         index(session.id)
       },
       get(sessionID: string) {
         const session = serverSync.session.get(sessionID)
-        if (session?.location.directory === directory) return session
+        if (session?.directory === directory) return session
       },
       optimistic: {
         add(input: { directory?: string; sessionID: string; message: Message; parts: Part[] }) {
@@ -123,8 +124,9 @@ export const createDirSyncContext = (
       fetch: async (count = 10) => {
         const [store, setStore] = current()
         setStore("limit", (value) => value + count)
-        const response = await serverSDK.api.session.list({ directory, limit: store.limit, order: "desc" })
+        const response = await serverSDK.currentApi.session.list({ directory, limit: store.limit, order: "desc" })
         const sessions = response.data
+          .map(normalizeSessionInfo)
           .sort((a, b) => cmp(a.id, b.id))
           .slice(0, store.limit)
         sessions.forEach(serverSync.session.remember)
@@ -132,8 +134,14 @@ export const createDirSyncContext = (
       },
       more: createMemo(() => current()[0].session.length >= current()[0].limit),
       archive: async (sessionID: string) => {
-        // TODO: Restore archiving when the V2 client exposes a session archive API.
-        void sessionID
+        await serverSDK.legacy.session.archive(sessionID, directory)
+        current()[1](
+          "session",
+          produce((draft) => {
+            const match = Binary.search(draft, sessionID, (session) => session.id)
+            if (match.found) draft.splice(match.index, 1)
+          }),
+        )
       },
     },
     mcp: {

packages/app/src/context/file.tsx

@@ -81,7 +81,7 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
       normalizeDir: path.normalizeDir,
       list: (dir) =>
         sdk()
-          .api.file.list({ path: dir, location: { directory: scope() } })
+          .currentApi.file.list({ path: dir, location: { directory: scope() } })
           .then((x) =>
             x.data.map((entry) => ({
               ...entry,
@@ -188,7 +188,7 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
       setLoading(file)
 
       const promise = sdk()
-        .api.file.read({ path: file, location: { directory } })
+        .currentApi.file.read({ path: file, location: { directory } })
         .then((data) => {
           if (scope() !== directory) return
           const content = { type: "text" as const, content: new TextDecoder().decode(data) }
@@ -212,7 +212,7 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
 
     const search = (query: string, dirs: "true" | "false", options?: { limit?: number; signal?: AbortSignal }) =>
       serverSDK()
-        .api.file.find(
+        .currentApi.file.find(
           {
             location: { directory: sdk().directory },
             query,

packages/app/src/context/global-sync/bootstrap.test.ts

@@ -1,8 +1,12 @@
 import { describe, expect, test } from "bun:test"
+import { createStore } from "solid-js/store"
 import { QueryClient } from "@tanstack/solid-query"
+import type { Config, Project } from "@/types"
+import type { LegacyCapabilities } from "@/utils/server-compat"
 import type { AgentApi, CatalogApi, CommandApi, ReferenceApi } from "@opencode-ai/client/promise"
 import type { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
 import {
+  bootstrapDirectory,
   loadAgentsQuery,
   loadCommands,
   loadPathQuery,
@@ -10,19 +14,139 @@ import {
   loadProvidersQuery,
   loadReferencesQuery,
 } from "./bootstrap"
+import type { State, VcsCache } from "./types"
 import { ServerScope } from "@/utils/server-scope"
 import type { ServerApi } from "@/utils/server"
 
 type ProjectApi = ServerApi["project"]
 
+const provider = { all: new Map(), connected: [], default: {} } satisfies NormalizedProviderListResponse
+const api = {
+  agent: { list: async () => ({ location: {}, data: [] }) },
+  provider: { list: async () => ({ location: {}, data: [] }) },
+  model: {
+    list: async () => ({ location: {}, data: [] }),
+    default: async () => ({ location: {}, data: null }),
+  },
+  permission: { request: { list: async () => ({ location: {}, data: [] }) } },
+  project: {
+    list: async () => [],
+    current: async () => ({ id: "project", directory: "/project" }),
+  },
+  question: { request: { list: async () => ({ location: {}, data: [] }) } },
+  reference: { list: async () => ({ location: {}, data: [] }) },
+  vcs: { get: async () => ({ location: {}, data: {} }) },
+} as unknown as ServerApi
+
+function directoryState() {
+  return createStore<State>({
+    status: "loading",
+    agent: [],
+    command: [],
+    reference: [],
+    project: "",
+    projectMeta: undefined,
+    icon: undefined,
+    provider_ready: true,
+    provider,
+    config: {},
+    path: { state: "", config: "", worktree: "/project", directory: "/project", home: "/home" },
+    session: [],
+    sessionTotal: 0,
+    session_status: {},
+    session_working(id: string) {
+      return this.session_status[id]?.type !== "idle"
+    },
+    session_diff: {},
+    todo: {},
+    permission: {},
+    question: {},
+    mcp_ready: true,
+    mcp: {},
+    mcp_resource: {},
+    lsp_ready: true,
+    lsp: [],
+    vcs: undefined,
+    limit: 5,
+    message: {},
+    session_message: {},
+    part: {},
+    part_text_accum_delta: {},
+  })
+}
+
+describe("bootstrapDirectory", () => {
+  test("uses current MCP endpoints while retaining unsupported v1 directory reads", async () => {
+    const mcpReads: string[] = []
+    const [store, setStore] = directoryState()
+    const currentApi = {
+      ...api,
+      command: {
+        list: async () => {
+          mcpReads.push("command")
+          return { location: {}, data: [] }
+        },
+      },
+      mcp: {
+        list: async () => {
+          mcpReads.push("status")
+          return { location: {}, data: [] }
+        },
+        resource: {
+          catalog: async () => {
+            mcpReads.push("resource")
+            return { location: {}, data: { resources: [], templates: [] } }
+          },
+        },
+      },
+    } as unknown as ServerApi
+
+    await bootstrapDirectory({
+      directory: "/project",
+      scope: ServerScope.local,
+      mcp: true,
+      global: {
+        config: {} satisfies Config,
+        path: { state: "", config: "", worktree: "/project", directory: "/project", home: "/home" },
+        project: [{ id: "project", worktree: "/project" } as Project],
+        provider,
+      },
+      legacy: { config: { directory: async () => ({}) } } as unknown as LegacyCapabilities,
+      api: currentApi,
+      store,
+      setStore,
+      vcsCache: { setStore() {} } as unknown as VcsCache,
+      loadSessions() {},
+      translate: (key) => key,
+      queryClient: new QueryClient(),
+      protocol: Promise.resolve("v1"),
+    })
+
+    expect(store.status).toBe("partial")
+
+    await new Promise((resolve) => setTimeout(resolve, 80))
+
+    expect(store.status).toBe("complete")
+    expect(mcpReads.sort()).toEqual(["command", "resource", "status"])
+  })
+})
+
 describe("query keys", () => {
   test("partitions identical directories by server scope", () => {
+    const location = {} as Parameters<typeof loadPathQuery>[2]
     const api = {} as CatalogApi
-    const location = {} as ServerApi["location"]
     const remote = "https://debian.example" as typeof ServerScope.local
 
-    expect([...loadPathQuery(ServerScope.local, "/repo", location).queryKey]).toEqual(["local", "/repo", "path"])
-    expect([...loadPathQuery(remote, "/repo", location).queryKey]).toEqual(["https://debian.example", "/repo", "path"])
+    expect([...loadPathQuery(ServerScope.local, "/repo", location).queryKey]).toEqual([
+      "local",
+      "/repo",
+      "path",
+    ])
+    expect([...loadPathQuery(remote, "/repo", location).queryKey]).toEqual([
+      "https://debian.example",
+      "/repo",
+      "path",
+    ])
     expect([...loadProvidersQuery(remote, null, api).queryKey]).toEqual(["https://debian.example", null, "providers"])
   })
 
@@ -57,21 +181,6 @@ describe("query keys", () => {
     expect(result.connected).toEqual(["openai"])
   })
 
-  test("loads current location metadata", async () => {
-    const calls: unknown[] = []
-    const api = {
-      get: async (input: unknown) => {
-        calls.push(input)
-        return { directory: "/repo/subpath", project: { id: "project", directory: "/repo" } }
-      },
-    } as ServerApi["location"]
-
-    const result = await new QueryClient().fetchQuery(loadPathQuery(ServerScope.local, "/repo/subpath", api))
-
-    expect(calls).toEqual([{ location: { directory: "/repo/subpath" } }])
-    expect(result).toMatchObject({ directory: "/repo/subpath", worktree: "/repo" })
-  })
-
   test("loads agents from the current location-scoped endpoint", async () => {
     const calls: unknown[] = []
     const api = {

packages/app/src/context/global-sync/bootstrap.ts

@@ -1,9 +1,14 @@
 import type {
   Config,
   Path,
+  PermissionRequest,
   Project,
   ProviderAuthResponse,
+  QuestionRequest,
+  ReferenceInfo,
+  Session,
 } from "@/types"
+import type { LegacyCapabilities } from "@/utils/server-compat"
 import type {
   AgentListInput,
   AgentListOutput,
@@ -13,16 +18,12 @@ import type {
   CommandListOutput,
   LocationGetInput,
   LocationGetOutput,
-  PermissionRequest,
   ProjectCurrentInput,
   ProjectCurrentOutput,
   ProjectListOutput,
   ReferenceListInput,
   ReferenceListOutput,
-  ReferenceInfo,
-  QuestionRequest,
   SessionApi,
-  SessionInfo,
 } from "@opencode-ai/client/promise"
 import { showToast } from "@/utils/toast"
 import { getFilename } from "@opencode-ai/core/util/path"
@@ -34,6 +35,7 @@ import type { ServerSession } from "../server-session"
 import {
   cmp,
   normalizeAgentList,
+  normalizePermissionRequest,
   normalizeProjectInfo,
   normalizeProviderList,
 } from "./utils"
@@ -42,6 +44,8 @@ import { QueryClient, queryOptions } from "@tanstack/solid-query"
 import { loadMcpQuery, loadMcpResourcesQuery } from "../server-sync"
 import { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
 import { ScopedKey, type ServerScope } from "@/utils/server-scope"
+import { normalizeSessionInfo } from "@/utils/session"
+import type { ServerProtocol } from "@/utils/server-protocol"
 import type { ServerApi } from "@/utils/server"
 
 type GlobalStore = {
@@ -103,11 +107,11 @@ function showErrors(input: {
   })
 }
 
-export const loadGlobalConfigQuery = (scope: ServerScope) =>
+export const loadGlobalConfigQuery = (scope: ServerScope, legacy: LegacyCapabilities, enabled = true) =>
   queryOptions({
     queryKey: [scope, "config"],
-    // TODO: Restore config loading when the V2 client exposes a config API.
-    queryFn: async (): Promise<Config> => ({}),
+    queryFn: () => retry(() => legacy.config.global()),
+    enabled,
   })
 
 type ProjectApi = {
@@ -138,7 +142,9 @@ export const loadProjectsQuery = (scope: ServerScope, api: ProjectApi) =>
   })
 
 export async function bootstrapGlobal(input: {
+  legacy: LegacyCapabilities
   serverAPI: CatalogApi & { readonly location: LocationApi; readonly project: ProjectApi }
+  protocol?: Promise<ServerProtocol>
   scope: ServerScope
   requestFailedTitle: string
   translate: (key: string, vars?: Record<string, string | number>) => string
@@ -146,18 +152,22 @@ export async function bootstrapGlobal(input: {
   setGlobalStore: SetStoreFunction<GlobalStore>
   queryClient: QueryClient
 }) {
+  const protocol = await input.protocol
   const slow = [
-    () => input.queryClient.fetchQuery(loadGlobalConfigQuery(input.scope)),
+    protocol === "v1" && (() => input.queryClient.fetchQuery(loadGlobalConfigQuery(input.scope, input.legacy))),
     () =>
       input.queryClient.fetchQuery(
         loadProvidersQuery(input.scope, null, input.serverAPI),
       ),
-    () => input.queryClient.fetchQuery(loadPathQuery(input.scope, null, input.serverAPI.location)),
+    () =>
+      input.queryClient.fetchQuery(
+        loadPathQuery(input.scope, null, input.serverAPI.location),
+      ),
     () =>
       input.queryClient
         .fetchQuery(loadProjectsQuery(input.scope, input.serverAPI.project))
         .then((data) => input.setGlobalStore("project", data)),
-  ]
+  ].filter(Boolean) as Array<() => Promise<unknown>>
   await runAll(slow)
   // showErrors({
   //   errors: errors(),
@@ -181,7 +191,7 @@ function projectID(directory: string, projects: Project[]) {
   return projects.find((project) => project.worktree === directory || project.sandboxes?.includes(directory))?.id
 }
 
-function mergeSession(setStore: SetStoreFunction<State>, session: SessionInfo) {
+function mergeSession(setStore: SetStoreFunction<State>, session: Session) {
   setStore("session", (list) => {
     const next = list.slice()
     const idx = next.findIndex((item) => item.id >= session.id)
@@ -206,7 +216,9 @@ function warmSessions(input: {
   if (ids.length === 0) return Promise.resolve()
   return Promise.all(
     ids.map((sessionID) =>
-      retry(() => input.api.get({ sessionID })).then((session) => mergeSession(input.setStore, session)),
+      retry(() => input.api.get({ sessionID })).then((session) =>
+        mergeSession(input.setStore, normalizeSessionInfo(session)),
+      ),
     ),
   ).then(() => undefined)
 }
@@ -267,7 +279,7 @@ export const loadPathQuery = (
   queryOptions<Path>({
     queryKey: [scope, directory, "path"],
     queryFn: () =>
-      api.get(directory ? { location: { directory } } : undefined).then((location) => ({
+      retry(() => api.get(directory ? { location: { directory } } : undefined)).then((location) => ({
         state: "",
         config: "",
         worktree: location.project.directory,
@@ -292,6 +304,7 @@ export async function bootstrapDirectory(input: {
   directory: string
   scope: ServerScope
   mcp: boolean
+  legacy: LegacyCapabilities
   api: CatalogApi & {
     readonly agent: AgentListApi
     readonly command: CommandListApi
@@ -317,6 +330,7 @@ export async function bootstrapDirectory(input: {
   }
   queryClient: QueryClient
   session?: ServerSession
+  protocol?: Promise<ServerProtocol>
 }) {
   const loading = input.store.status !== "complete"
   const seededProject = projectID(input.directory, input.global.project)
@@ -338,6 +352,13 @@ export async function bootstrapDirectory(input: {
         input.queryClient
           .ensureQueryData(loadAgentsQuery(input.scope, input.directory, input.api.agent))
           .then((data) => input.setStore("agent", data)),
+      (await input.protocol) === "v1" &&
+        (() =>
+          retry(() =>
+            input.legacy.config
+              .directory(input.directory)
+              .then((config) => input.setStore("config", reconcile(config, { merge: false }))),
+          )),
       !seededProject &&
         (() =>
           retry(() => input.api.project.current({ location: { directory: input.directory } })).then((project) =>
@@ -346,7 +367,9 @@ export async function bootstrapDirectory(input: {
       !seededPath &&
         (() =>
           input.queryClient
-            .ensureQueryData(loadPathQuery(input.scope, input.directory, input.api.location))
+            .ensureQueryData(
+              loadPathQuery(input.scope, input.directory, input.api.location),
+            )
             .then((data) => {
               const next = projectID(data.directory ?? input.directory, input.global.project)
               if (next) input.setStore("project", next)
@@ -364,7 +387,7 @@ export async function bootstrapDirectory(input: {
         retry(() =>
           input.api.permission.request
             .list({ location: { directory: input.directory } })
-            .then((result) => result.data)
+            .then((result) => result.data.map(normalizePermissionRequest))
             .then((permissions) => {
             const ids = permissions.map((permission) => permission.sessionID)
             const grouped = groupBySession(
@@ -378,7 +401,7 @@ export async function bootstrapDirectory(input: {
                 const current = input.session?.data.permission ?? input.store.permission
                 for (const sessionID of Object.keys(current)) {
                   if (grouped[sessionID]) continue
-                   if (input.session?.get(sessionID)?.location.directory !== input.directory) continue
+                  if (input.session?.get(sessionID)?.directory !== input.directory) continue
                   if (input.session) input.session.set("permission", sessionID, [])
                   if (!input.session) input.setStore("permission", sessionID, [])
                 }
@@ -412,7 +435,7 @@ export async function bootstrapDirectory(input: {
                 const current = input.session?.data.question ?? input.store.question
                 for (const sessionID of Object.keys(current)) {
                   if (grouped[sessionID]) continue
-                   if (input.session?.get(sessionID)?.location.directory !== input.directory) continue
+                  if (input.session?.get(sessionID)?.directory !== input.directory) continue
                   if (input.session) input.session.set("question", sessionID, [])
                   if (!input.session) input.setStore("question", sessionID, [])
                 }

packages/app/src/context/global-sync/child-store.ts

@@ -191,7 +191,10 @@ export function createChildStoreManager(input: {
           const pathQuery = useQuery(() => ({ ...input.queryOptions.path(key), enabled: instanceQueriesEnabled() }))
           const mcpQuery = useQuery(() => ({ ...input.queryOptions.mcp(key), enabled: mcpEnabled() }))
           const mcpResourceQuery = useQuery(() => ({ ...input.queryOptions.mcpResources(key), enabled: mcpEnabled() }))
-          const lspQuery = useQuery(() => ({ ...input.queryOptions.lsp(key), enabled: instanceQueriesEnabled() }))
+          const lspQuery = useQuery(() => {
+            const options = input.queryOptions.lsp(key)
+            return { ...options, enabled: options.enabled !== false && instanceQueriesEnabled() }
+          })
           const providerQuery = useQuery(() => ({
             ...input.queryOptions.providers(key),
             enabled: instanceQueriesEnabled(),

packages/app/src/context/global-sync/event-reducer.test.ts

@@ -1,6 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import type { Message, Part, Project } from "@/types"
-import type { PermissionRequest, QuestionRequest, SessionInfo } from "@opencode-ai/client/promise"
+import type { Message, Part, PermissionRequest, Project, QuestionRequest, Session } from "@/types"
 import { createStore } from "solid-js/store"
 import type { State } from "./types"
 import { applyDirectoryEvent, applyGlobalEvent, cleanupDroppedSessionCaches } from "./event-reducer"
@@ -14,7 +13,7 @@ const rootSession = (input: { id: string; parentID?: string; archived?: number }
       updated: 1,
       archived: input.archived,
     },
-  }) as SessionInfo
+  }) as Session
 
 const userMessage = (id: string, sessionID: string) =>
   ({
@@ -39,10 +38,10 @@ const permissionRequest = (id: string, sessionID: string, title = id) =>
   ({
     id,
     sessionID,
-    action: title,
-    resources: ["*"],
+    permission: title,
+    patterns: ["*"],
     metadata: {},
-    save: [],
+    always: [],
   }) as PermissionRequest
 
 const questionRequest = (id: string, sessionID: string, title = id) =>
@@ -513,7 +512,7 @@ describe("applyDirectoryEvent", () => {
       directory: "/tmp",
       loadLsp() {},
     })
-    expect(store.permission[sessionID]?.find((x) => x.id === "perm_2")?.action).toBe("updated")
+    expect(store.permission[sessionID]?.find((x) => x.id === "perm_2")?.permission).toBe("updated")
 
     applyDirectoryEvent({
       event: { type: "permission.replied", properties: { sessionID, requestID: "perm_2" } },

packages/app/src/context/global-sync/event-reducer.ts

@@ -3,10 +3,14 @@ import { produce, reconcile, type SetStoreFunction, type Store } from "solid-js/
 import type {
   Message,
   Part,
+  PermissionRequest,
   Project,
+  QuestionRequest,
+  Session,
+  SessionStatus,
   Todo,
 } from "@/types"
-import type { FileDiffInfo, PermissionRequest, QuestionRequest, SessionInfo, SessionStatus } from "@opencode-ai/client/promise"
+import type { FileDiffInfo } from "@opencode-ai/client/promise"
 import type { State, VcsCache } from "./types"
 import { trimSessions } from "./session-trim"
 import { dropSessionCaches } from "./session-cache"
@@ -75,7 +79,7 @@ function cleanupSessionCaches(
 export function cleanupDroppedSessionCaches(
   store: Store<State>,
   setStore: SetStoreFunction<State>,
-  next: SessionInfo[],
+  next: Session[],
   setSessionTodo?: (sessionID: string, todos: Todo[] | undefined) => void,
 ) {
   const keep = new Set(next.map((item) => item.id))
@@ -124,7 +128,7 @@ export function applyDirectoryEvent(input: {
       return
     }
     case "session.created": {
-      const info = (event.properties as { info: SessionInfo }).info
+      const info = (event.properties as { info: Session }).info
       const result = Binary.search(input.store.session, info.id, (s) => s.id)
       if (result.found) {
         input.setStore("session", result.index, reconcile(info))
@@ -139,7 +143,7 @@ export function applyDirectoryEvent(input: {
       break
     }
     case "session.updated": {
-      const info = (event.properties as { info: SessionInfo }).info
+      const info = (event.properties as { info: Session }).info
       const result = Binary.search(input.store.session, info.id, (s) => s.id)
       if (info.time.archived) {
         if (!result.found) break
@@ -167,7 +171,7 @@ export function applyDirectoryEvent(input: {
       break
     }
     case "session.deleted": {
-      const properties = event.properties as { sessionID?: string; info?: SessionInfo }
+      const properties = event.properties as { sessionID?: string; info?: Session }
       const sessionID = properties.info?.id ?? properties.sessionID
       if (!sessionID) break
       const result = Binary.search(input.store.session, sessionID, (s) => s.id)
@@ -197,7 +201,7 @@ export function applyDirectoryEvent(input: {
       break
     }
     case "session.usage.updated": {
-      const properties = event.properties as Pick<SessionInfo, "cost" | "tokens"> & { sessionID: string }
+      const properties = event.properties as Pick<Session, "cost" | "tokens"> & { sessionID: string }
       const result = Binary.search(input.store.session, properties.sessionID, (session) => session.id)
       if (!result.found) break
       input.setStore("session", result.index, (session) => ({
@@ -233,8 +237,9 @@ export function applyDirectoryEvent(input: {
         input.setStore("session", result.index, (session) => ({
           ...session,
           projectID: properties.projectID ?? session.projectID,
-          location: properties.location,
-          subpath: properties.subpath,
+          workspaceID: properties.location.workspaceID,
+          directory: properties.location.directory,
+          path: properties.subpath,
           time: { ...session.time, updated: Date.now() },
         }))
         break

packages/app/src/context/global-sync/home-session-index.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import type { SessionInfo } from "@opencode-ai/client/promise"
+import type { SessionV2Info } from "@/types"
 import {
   applyHomeSessionEvent,
   appendHomeSessionEvent,
@@ -33,7 +33,7 @@ describe("Home V2 session index", () => {
     const calls: unknown[] = []
     const result = await loadHomeSessionIndex(async (input) => {
       calls.push(input)
-      return { data: [session({ id: "root" })], cursor: {} }
+      return { data: { data: [session({ id: "root" })], cursor: {} } }
     })
 
     expect(result.sessions).toHaveLength(1)
@@ -48,11 +48,15 @@ describe("Home V2 session index", () => {
         calls.push({ input, signal: options.signal })
         if (!("cursor" in input)) {
           return {
-            data: Array.from({ length: HOME_V2_SESSION_PAGE_LIMIT }, (_, index) => session({ id: `page-1-${index}` })),
-            cursor: { next: "next-page" },
+            data: {
+              data: Array.from({ length: HOME_V2_SESSION_PAGE_LIMIT }, (_, index) =>
+                session({ id: `page-1-${index}` }),
+              ),
+              cursor: { next: "next-page" },
+            },
           }
         }
-        return { data: [session({ id: "page-2" })], cursor: {} }
+        return { data: { data: [session({ id: "page-2" })], cursor: {} } }
       },
       0,
       controller.signal,
@@ -72,7 +76,7 @@ describe("Home V2 session index", () => {
     const activeNull = {
       ...session({ id: "active-null", updated: 20 }),
       time: { created: 1, updated: 20, archived: null },
-    } as unknown as SessionInfo
+    } as unknown as SessionV2Info
     const result = parseHomeSessionIndex([
       session({ id: "root", updated: 30 }),
       activeNull,
@@ -81,9 +85,11 @@ describe("Home V2 session index", () => {
     ])
 
     expect(result).toEqual([
-       expect.objectContaining({
-         id: "root",
-         location: { directory: "/project" },
+      expect.objectContaining({
+        id: "root",
+        slug: "root",
+        version: "",
+        directory: "/project",
         projectID: "project",
         title: "root",
         time: { created: 1, updated: 30 },
@@ -99,17 +105,17 @@ describe("Home V2 session index", () => {
     const now = 10 * 60 * 60 * 1000
     const sessions = Array.from({ length: 80 }, (_, index) => ({
       ...parseHomeSessionIndex([session({ id: `session-${index}`, updated: index + 1 })])[0],
-      location: { directory: index % 2 === 0 ? "/one" : "/two" },
+      directory: index % 2 === 0 ? "/one" : "/two",
     }))
 
     const retained = retainHomeSessions(sessions, 10, now)
-    expect(retained.filter((item) => item.location.directory === "/one")).toHaveLength(10)
-    expect(retained.filter((item) => item.location.directory === "/two")).toHaveLength(10)
+    expect(retained.filter((item) => item.directory === "/one")).toHaveLength(10)
+    expect(retained.filter((item) => item.directory === "/two")).toHaveLength(10)
   })
 
   test("replays session events over the loaded index", () => {
     const initial = parseHomeSessionIndex([session({ id: "old" })])
-    const created = { ...initial[0], id: "new", title: "new", time: { created: 2, updated: 2 } }
+    const created = { ...initial[0], id: "new", slug: "new", title: "new", time: { created: 2, updated: 2 } }
 
     const afterCreate = applyHomeSessionEvent(initial, {
       type: "session.created",
@@ -139,8 +145,10 @@ describe("Home V2 session index", () => {
     expect(homeSessionIndexSessions({ sessions: initial, eventSequence: 1 }, events)[0]?.title).toBe("current")
   })
 
-  test("refetches after reconnect", () => {
+  test("refetches after reconnect, disposal, and session moves", () => {
     expect(homeSessionIndexRefresh("server.connected", false)).toEqual({ connected: true, refetch: false })
     expect(homeSessionIndexRefresh("server.connected", true)).toEqual({ connected: true, refetch: true })
+    expect(homeSessionIndexRefresh("global.disposed", true).refetch).toBe(true)
+    expect(homeSessionIndexRefresh("session.next.moved", true).refetch).toBe(true)
   })
 })

packages/app/src/context/global-sync/home-session-index.ts

@@ -1,5 +1,4 @@
-import type { Event } from "@/types"
-import type { SessionInfo, SessionsResponse } from "@opencode-ai/client/promise"
+import type { Event, Session, SessionV2Info, V2SessionListResponse } from "@/types"
 import type { QueryClient } from "@tanstack/solid-query"
 import { trimSessions } from "./session-trim"
 import { pathKey } from "@/utils/path-key"
@@ -8,29 +7,31 @@ export const HOME_V2_SESSION_PAGE_LIMIT = 5_000
 
 export type HomeSessionEvent = {
   type: "session.created" | "session.updated" | "session.deleted"
-  properties: { sessionID: string; info?: SessionInfo }
+  properties: { sessionID: string; info: Session }
 }
 export type HomeSessionEvents = {
   sequence: number
   entries: Array<{ sequence: number; event: HomeSessionEvent }>
 }
 export type HomeSessionIndex = {
-  sessions: SessionInfo[]
+  sessions: Session[]
   eventSequence: number
 }
 
 export const homeSessionIndexKey = (server: string) => ["home", "session-index", server] as const
 export const homeSessionEventsKey = (server: string) => ["home", "session-events", server] as const
 
+type HomeSessionPage = { data?: V2SessionListResponse }
+
 export async function loadHomeSessionIndex(
   list: (
     input: { limit: number; order: "desc"; cursor?: string },
     options: { signal?: AbortSignal },
-  ) => Promise<SessionsResponse>,
+  ) => Promise<HomeSessionPage>,
   eventSequence = 0,
   signal?: AbortSignal,
 ) {
-  const data: SessionInfo[] = []
+  const data: SessionV2Info[] = []
   let cursor: string | undefined
 
   for (;;) {
@@ -42,7 +43,7 @@ export async function loadHomeSessionIndex(
       },
       { signal },
     )
-    const page = response
+    const page = response.data!
     data.push(...page.data)
     if (page.data.length < HOME_V2_SESSION_PAGE_LIMIT || !page.cursor.next)
       return { sessions: parseHomeSessionIndex(data), eventSequence }
@@ -74,7 +75,10 @@ export function homeSessionIndexSessions(index: HomeSessionIndex | undefined, ev
 
 export function homeSessionIndexRefresh(event: Event["type"], connected: boolean) {
   if (event === "server.connected") return { connected: true, refetch: connected }
-  return { connected, refetch: false }
+  return {
+    connected,
+    refetch: event === "global.disposed" || event === "session.next.moved",
+  }
 }
 
 export function createHomeSessionIndexCache(queryClient: QueryClient, server: string) {
@@ -125,28 +129,23 @@ export function createHomeSessionIndexCache(queryClient: QueryClient, server: st
 // current V2 API orders by creation time and cannot filter roots, archives, or
 // multiple directories. A bounded page could omit an old session updated today.
 // Once released, use client.v2.project.list() and client.v2.session.list({
-// parentID: null, order: "desc" }) and replace this full-table scan.
-export function parseHomeSessionIndex(sessions: SessionInfo[]): SessionInfo[] {
+// parentID: null, order: "desc" }), then remove this adapter and its V1 fields.
+export function parseHomeSessionIndex(sessions: SessionV2Info[]): Session[] {
   return sessions.flatMap((item) => {
     if (item.parentID || typeof item.time.archived === "number") return []
-    return [item]
+    return [toLegacySummary(item)]
   })
 }
 
-export function retainHomeSessions(sessions: SessionInfo[], limit: number, now: number) {
-  const grouped = Map.groupBy(sessions, (session) => pathKey(session.location.directory))
+export function retainHomeSessions(sessions: Session[], limit: number, now: number) {
+  const grouped = Map.groupBy(sessions, (session) => pathKey(session.directory))
   return [...grouped.values()].flatMap((items) => trimSessions(items, { limit, permission: {}, now }))
 }
 
-export function applyHomeSessionEvent(sessions: SessionInfo[], event: HomeSessionEvent) {
+export function applyHomeSessionEvent(sessions: Session[], event: HomeSessionEvent) {
   const info = event.properties.info
-  const index = sessions.findIndex((session) => session.id === (info?.id ?? event.properties.sessionID))
-  if (event.type === "session.deleted") {
-    if (index === -1) return sessions
-    return sessions.toSpliced(index, 1)
-  }
-  if (!info) return sessions
-  if (info.parentID || typeof info.time.archived === "number") {
+  const index = sessions.findIndex((session) => session.id === info.id)
+  if (event.type === "session.deleted" || info.parentID || typeof info.time.archived === "number") {
     if (index === -1) return sessions
     return sessions.toSpliced(index, 1)
   }
@@ -154,3 +153,22 @@ export function applyHomeSessionEvent(sessions: SessionInfo[], event: HomeSessio
   if (index === -1) return [...sessions, info]
   return sessions.with(index, info)
 }
+
+function toLegacySummary(session: SessionV2Info): Session {
+  return {
+    id: session.id,
+    slug: session.id,
+    projectID: session.projectID,
+    workspaceID: session.location.workspaceID,
+    directory: session.location.directory,
+    path: session.subpath,
+    parentID: session.parentID,
+    cost: session.cost,
+    tokens: session.tokens,
+    title: session.title,
+    agent: session.agent,
+    model: session.model,
+    version: "",
+    time: session.time,
+  }
+}

packages/app/src/context/global-sync/mcp.ts

@@ -13,6 +13,7 @@ export async function toggleMcp(input: {
     needs_auth: input.authenticate,
     disabled: input.connect,
     failed: input.connect,
+    needs_client_registration: input.connect,
   }[input.status]()
   await input.refresh()
 }

packages/app/src/context/global-sync/session-cache.test.ts

@@ -1,6 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import type { Message, Part, Todo } from "@/types"
-import type { PermissionRequest, QuestionRequest, SessionStatus } from "@opencode-ai/client/promise"
+import type { Message, Part, PermissionRequest, QuestionRequest, SessionStatus, Todo } from "@/types"
 import type { FileDiffInfo } from "@opencode-ai/client/promise"
 import { dropSessionCaches, pickSessionCacheEvictions } from "./session-cache"
 

packages/app/src/context/global-sync/session-cache.ts

@@ -1,5 +1,4 @@
-import type { Message, Part, Todo } from "@/types"
-import type { PermissionRequest, QuestionRequest, SessionStatus } from "@opencode-ai/client/promise"
+import type { Message, Part, PermissionRequest, QuestionRequest, SessionStatus, Todo } from "@/types"
 import type { FileDiffInfo } from "@opencode-ai/client/promise"
 import type { SessionMessageInfo } from "@opencode-ai/client/promise"
 

packages/app/src/context/global-sync/session-load.ts

@@ -1,4 +1,5 @@
 import type { SessionApi } from "@opencode-ai/client/promise"
+import { normalizeSessionInfo } from "@/utils/session"
 
 export async function loadRootSessions(input: { api: Pick<SessionApi, "list">; directory: string; limit: number }) {
   const result = await input.api.list({
@@ -8,7 +9,7 @@ export async function loadRootSessions(input: { api: Pick<SessionApi, "list">; d
     order: "desc",
   })
   return {
-    data: result.data,
+    data: result.data.map(normalizeSessionInfo),
     limit: input.limit,
     limited: true,
   } as const

packages/app/src/context/global-sync/session-trim.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import type { PermissionRequest, SessionInfo } from "@opencode-ai/client/promise"
+import type { PermissionRequest, Session } from "@/types"
 import { trimSessions } from "./session-trim"
 
 const session = (input: { id: string; parentID?: string; created: number; updated?: number; archived?: number }) =>
@@ -11,7 +11,7 @@ const session = (input: { id: string; parentID?: string; created: number; update
       updated: input.updated,
       archived: input.archived,
     },
-  }) as SessionInfo
+  }) as Session
 
 describe("trimSessions", () => {
   test("keeps base roots and recent roots beyond the limit", () => {

packages/app/src/context/global-sync/session-trim.ts

@@ -1,22 +1,21 @@
-import type { SessionInfo } from "@opencode-ai/client/promise"
-import type { PermissionRequest } from "@opencode-ai/client/promise"
+import type { PermissionRequest, Session } from "@/types"
 import { cmp } from "./utils"
 import { SESSION_RECENT_LIMIT, SESSION_RECENT_WINDOW } from "./types"
 
-export function sessionUpdatedAt(session: SessionInfo) {
+export function sessionUpdatedAt(session: Session) {
   return session.time.updated ?? session.time.created
 }
 
-export function compareSessionRecent(a: SessionInfo, b: SessionInfo) {
+export function compareSessionRecent(a: Session, b: Session) {
   const aUpdated = sessionUpdatedAt(a)
   const bUpdated = sessionUpdatedAt(b)
   if (aUpdated !== bUpdated) return bUpdated - aUpdated
   return cmp(a.id, b.id)
 }
 
-export function takeRecentSessions(sessions: SessionInfo[], limit: number, cutoff: number) {
-  if (limit <= 0) return [] as SessionInfo[]
-  const selected: SessionInfo[] = []
+export function takeRecentSessions(sessions: Session[], limit: number, cutoff: number) {
+  if (limit <= 0) return [] as Session[]
+  const selected: Session[] = []
   const seen = new Set<string>()
   for (const session of sessions) {
     if (!session?.id) continue
@@ -32,7 +31,7 @@ export function takeRecentSessions(sessions: SessionInfo[], limit: number, cutof
 }
 
 export function trimSessions(
-  input: SessionInfo[],
+  input: Session[],
   options: { limit: number; permission: Record<string, PermissionRequest[]>; now?: number },
 ) {
   const limit = Math.max(0, options.limit)

packages/app/src/context/global-sync/types.ts

@@ -5,17 +5,15 @@ import type {
   Message,
   Part,
   Path,
-  Todo,
-  VcsInfo,
-} from "@/types"
-import type {
-  FileDiffInfo,
   PermissionRequest,
   QuestionRequest,
   ReferenceInfo,
-  SessionInfo,
+  Session,
   SessionStatus,
-} from "@opencode-ai/client/promise"
+  Todo,
+  VcsInfo,
+} from "@/types"
+import type { FileDiffInfo } from "@opencode-ai/client/promise"
 import { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
 import type { CommandInfo, McpResource, McpServer, SessionMessageInfo } from "@opencode-ai/client/promise"
 import type { Accessor } from "solid-js"
@@ -44,7 +42,7 @@ export type State = {
   provider: NormalizedProviderListResponse
   config: Config
   path: Path
-  session: SessionInfo[]
+  session: Session[]
   sessionTotal: number
   session_status: {
     [sessionID: string]: SessionStatus

packages/app/src/context/global-sync/utils.test.ts

@@ -5,7 +5,7 @@ import type {
   ModelListOutput,
   ProviderListOutput,
 } from "@opencode-ai/client/promise"
-import { directoryKey, normalizeAgentList, normalizeProviderList } from "./utils"
+import { directoryKey, normalizeAgentList, normalizePermissionRequest, normalizeProviderList } from "./utils"
 
 describe("normalizeAgentList", () => {
   test("adapts current agents to the app agent shape", () => {
@@ -43,6 +43,30 @@ describe("normalizeAgentList", () => {
   })
 })
 
+describe("normalizePermissionRequest", () => {
+  test("adapts the current permission request to app state", () => {
+    expect(
+      normalizePermissionRequest({
+        id: "permission-1",
+        sessionID: "session-1",
+        action: "read",
+        resources: ["README.md"],
+        save: ["*.md"],
+        metadata: { path: "README.md" },
+        source: { type: "tool", messageID: "message-1", id: "call-1" },
+      }),
+    ).toEqual({
+      id: "permission-1",
+      sessionID: "session-1",
+      permission: "read",
+      patterns: ["README.md"],
+      always: ["*.md"],
+      metadata: { path: "README.md" },
+      tool: { messageID: "message-1", callID: "call-1" },
+    })
+  })
+})
+
 describe("normalizeProviderList", () => {
   test("groups current models into the app provider catalog", () => {
     const result = normalizeProviderList(

packages/app/src/context/global-sync/utils.ts

@@ -2,9 +2,10 @@ import type {
   AgentListOutput,
   ModelDefaultOutput,
   ModelListOutput,
+  PermissionRequest,
   ProviderListOutput,
 } from "@opencode-ai/client/promise"
-import type { Agent, Project, Provider, ProviderListResponse } from "@/types"
+import type { Agent, Event, Project, Provider, ProviderListResponse } from "@/types"
 import type { Project as CurrentProject } from "@opencode-ai/client/promise"
 import { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
 export { pathKey as directoryKey, type PathKey as DirectoryKey } from "@/utils/path-key"
@@ -35,13 +36,42 @@ export function normalizeAgentList(input: AgentListOutput["data"] | Agent[]): Ag
   }))
 }
 
+type LegacyPermissionRequest = Extract<Event, { type: "permission.asked" }>["properties"]
+
+export function normalizePermissionRequest(input: PermissionRequest | LegacyPermissionRequest): LegacyPermissionRequest {
+  if ("permission" in input) return input
+  return {
+    id: input.id,
+    sessionID: input.sessionID,
+    permission: input.action,
+    patterns: input.resources,
+    always: input.save ?? [],
+    metadata: input.metadata ?? {},
+    tool:
+      input.source?.type === "tool" ? { messageID: input.source.messageID, callID: input.source.id } : undefined,
+  }
+}
+
 export function normalizeProviderList(
   providers: ProviderListOutput["data"] | ProviderListResponse,
   models?: ModelListOutput["data"],
   defaultModel?: ModelDefaultOutput["data"],
 ): NormalizedProviderListResponse {
   if (!Array.isArray(providers)) {
-    return providers
+    return {
+      ...providers,
+      all: new Map(
+        providers.all.map((provider) => [
+          provider.id,
+          {
+            ...provider,
+            models: Object.fromEntries(
+              Object.entries(provider.models).filter(([, model]) => model.status !== "deprecated"),
+            ),
+          },
+        ]),
+      ),
+    }
   }
   const all = new Map<string, Provider>()
 

packages/app/src/context/layout.tsx

@@ -340,7 +340,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
           void removePersisted(target, platform)
 
           if (scope !== ServerScope.local) continue
-          const legacyKey = `${dir}/${entry["legacy"]}${session ? "/" + session : ""}.${entry.version}`
+          const legacyKey = `${dir}/${entry.legacy}${session ? "/" + session : ""}.${entry.version}`
           void removePersisted({ key: legacyKey }, platform)
         }
       }
@@ -572,8 +572,17 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
 
         const projectID = project.id
         void (async () => {
-          // TODO: Restore project color updates when the V2 client exposes a project update API.
-          void projectID
+          const sdk = serverSdk()
+          if ((await sdk.protocol) !== "v1") return
+          return sdk.legacy.project
+            .update({ projectID, directory: worktree, icon: { color } })
+            .then((response) => response.data)
+            .then((result) => {
+              if (!result) return
+              serverSync().set("project", (items) =>
+                items.map((item) => (item.id === result.id ? normalizeProjectInfo(result) : item)),
+              )
+            })
         })().catch(() => {
           if (colorRequested.get(worktree) === color) colorRequested.delete(worktree)
         })