fix(core): restore shell tool fallback

bun.lock

@@ -380,8 +380,6 @@
         "google-auth-library": "10.5.0",
         "gray-matter": "4.0.3",
         "htmlparser2": "8.0.2",
-        "http-proxy-agent": "7.0.2",
-        "https-proxy-agent": "7.0.6",
         "ignore": "7.0.5",
         "immer": "11.1.4",
         "jsonc-parser": "3.3.1",

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-8pRvkbUX2aZhFTFtFuUM6mPqZZhfC4mFd1+BXVMzEJk=",
-    "aarch64-linux": "sha256-df25TWdjjLKeLZJEfrDpgVaV8ZAZhHWPoV2IPIQ4U2w=",
-    "aarch64-darwin": "sha256-VjbOx7Zi9eTiPxqpKN3+EQWweBfJHf7y36sGSN1peg0=",
-    "x86_64-darwin": "sha256-q7nW4AR2OnepnDcPDtYECgcsXI+JRHOCWhPsAX8t7q0="
+    "x86_64-linux": "sha256-PuNZrtSgh5F3KpXSM+bd+rYQuyzwWd+wCOnMJSDS2Z0=",
+    "aarch64-linux": "sha256-RYy8ZRf59FE/3+gICjvsZv3ekQvn+DTZaT9jefbK+0g=",
+    "aarch64-darwin": "sha256-1AsDK8xNj3RlzX2efbuEDEwaOLAgjFYaEvk7EkQkh4w=",
+    "x86_64-darwin": "sha256-8ONeOu9UmM0GRxVeOO3Uhk1yAOuW6R8tqBYswOVEkME="
   }
 }

package.json

@@ -27,6 +27,7 @@
     "prepare": "husky",
     "random": "echo 'Random script'",
     "sso": "aws sso login --sso-session=opencode --no-browser",
+    "translate:app": "bun run script/translate-app.ts",
     "test": "echo 'do not run tests from root' && exit 1"
   },
   "workspaces": {

packages/ai/src/protocols/anthropic-messages.ts

@@ -374,18 +374,16 @@ const lowerToolChoice = (toolChoice: NonNullable<LLMRequest["toolChoice"]>) =>
     tool: (name) => ({ type: "tool" as const, name }),
   })
 
-const scrubToolCallID = (id: string) => id.replace(/[^a-zA-Z0-9_-]/g, "_")
-
 const lowerToolCall = (part: ToolCallPart): AnthropicToolUseBlock => ({
   type: "tool_use",
-  id: scrubToolCallID(part.id),
+  id: part.id,
   name: part.name,
   input: part.input,
 })
 
 const lowerServerToolCall = (part: ToolCallPart): AnthropicServerToolUseBlock => ({
   type: "server_tool_use",
-  id: scrubToolCallID(part.id),
+  id: part.id,
   name: part.name,
   input: part.input,
 })
@@ -407,7 +405,7 @@ const lowerServerToolResult = Effect.fn("AnthropicMessages.lowerServerToolResult
   // Prefer the provider-owned replay payload; fall back to the result value for
   // histories constructed directly from provider events.
   const payload = part.providerMetadata?.anthropic?.["result"] ?? part.result.value
-  return { type: wireType, tool_use_id: scrubToolCallID(part.id), content: payload } satisfies AnthropicServerToolResultBlock
+  return { type: wireType, tool_use_id: part.id, content: payload } satisfies AnthropicServerToolResultBlock
 })
 
 const lowerMedia = Effect.fn("AnthropicMessages.lowerMedia")(function* (part: MediaPart) {
@@ -589,7 +587,7 @@ const lowerMessages = Effect.fn("AnthropicMessages.lowerMessages")(function* (
         return yield* ProviderShared.unsupportedContent("Anthropic Messages", "tool", ["tool-result"])
       content.push({
         type: "tool_result",
-        tool_use_id: scrubToolCallID(part.id),
+        tool_use_id: part.id,
         content: yield* lowerToolResultContent(part),
         is_error: part.result.type === "error" ? true : undefined,
         cache_control: cacheControl(breakpoints, part.cache),

packages/ai/src/protocols/gemini.ts

@@ -379,12 +379,7 @@ const lowerMessages = Effect.fn("Gemini.lowerMessages")(function* (request: LLMR
         },
       })
     }
-    // Gemini requires every response to a parallel call batch in one user turn,
-    // so consecutive tool results join the open function-response turn.
-    const previous = contents.at(-1)
-    if (previous?.role === "user" && previous.parts.some((item) => "functionResponse" in item))
-      contents[contents.length - 1] = { role: "user", parts: [...previous.parts, ...parts] }
-    else contents.push({ role: "user", parts })
+    contents.push({ role: "user", parts })
   }
 
   return contents

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

@@ -22,8 +22,6 @@ export interface Options {
   readonly id: string
   readonly name: string
   readonly rotateAfterMs?: number
-  readonly enabled?: (url: string) => boolean
-  readonly url?: (url: string) => string
   readonly headers?: (headers: Headers.Headers) => Headers.Headers
   readonly driver?: (input: {
     readonly request: Readonly<Record<string, unknown>>
@@ -149,19 +147,18 @@ export const transport = <Body>(options: Options): Transport<Body, Prepared, str
       Effect.gen(function* () {
         const parts = yield* HttpTransport.jsonRequestParts(input)
         const headers = Headers.remove(options.headers?.(parts.headers) ?? parts.headers, "content-length")
-        const channel =
-          input.webSocket && (options.enabled?.(parts.url) ?? true)
-            ? yield* Effect.gen(function* () {
-                const create = yield* message(parts.jsonBody)
-                const base = driver(options, create.message)
-                return {
-                  url: yield* WebSocketTransport.toWebSocketUrl(options.url?.(parts.url) ?? parts.url),
-                  headers,
-                  rotateAfterMs: options.rotateAfterMs,
-                  driver: options.driver?.({ request: create.request, message: create.message, base }) ?? base,
-                }
-              })
-            : undefined
+        const channel = input.webSocket
+          ? yield* Effect.gen(function* () {
+              const create = yield* message(parts.jsonBody)
+              const base = driver(options, create.message)
+              return {
+                url: yield* WebSocketTransport.toWebSocketUrl(parts.url),
+                headers,
+                rotateAfterMs: options.rotateAfterMs,
+                driver: options.driver?.({ request: create.request, message: create.message, base }) ?? base,
+              }
+            })
+          : undefined
         return {
           http: {
             request: ProviderShared.jsonPost({ url: parts.url, body: parts.bodyText, headers: parts.headers }),

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

@@ -11,7 +11,7 @@ import { optionalArray, ProviderShared } from "./shared.js"
 import { Lifecycle } from "./utils/lifecycle.js"
 import { OpenAIImage } from "./utils/openai-image.js"
 import { ToolSchemaProjection } from "./utils/tool-schema.js"
-import { OpenResponsesChannel, type Options } from "./open-responses-channel.js"
+import { OpenResponsesChannel } from "./open-responses-channel.js"
 import { OpenAIResponsesChannel } from "./openai-responses-channel.js"
 
 const ADAPTER = "openai-responses"
@@ -247,16 +247,12 @@ const endpoint = Endpoint.path<OpenAIResponsesBody>(PATH, { baseURL: DEFAULT_BAS
 const auth = Auth.none
 
 export const httpTransport = HttpTransport.sseJson.with<OpenAIResponsesBody>()
-export const channelTransport = (options: Omit<Options, "driver">) =>
-  OpenResponsesChannel.transport<OpenAIResponsesBody>({
-    ...options,
-    driver: (input) => OpenAIResponsesChannel.driver({ id: options.id, name: options.name, ...input }),
-  })
-export const transport = channelTransport({
+export const transport = OpenResponsesChannel.transport<OpenAIResponsesBody>({
   id: ADAPTER,
   name: NAME,
   rotateAfterMs: WEBSOCKET_ROTATE_AFTER_MS,
   headers: (headers) => Headers.set(headers, "openai-beta", headers["openai-beta"] ?? WEBSOCKET_PROTOCOL_HEADER),
+  driver: (input) => OpenAIResponsesChannel.driver({ id: ADAPTER, name: NAME, ...input }),
 })
 
 export const route = Route.make({

packages/ai/src/provider-error.ts

@@ -74,7 +74,6 @@ const INVALID_REQUEST_CODES = new Set(["invalid_prompt", "invalid_request_error"
 const RATE_LIMIT_TEXT = /rate increased too quickly|rate[-_\s]?limit|too[_\s]?many[_\s]?requests/i
 const QUOTA_TEXT = /insufficient[-_\s]?quota|quota[-_\s]?exceeded/i
 const CONTENT_POLICY_TEXT = /content[-_\s]?policy|content_filter|safety/i
-const NETWORK_ERROR_TEXT = /network[-_\s]error/i
 
 export interface ProviderFailure {
   readonly message: string
@@ -128,7 +127,6 @@ export function classifyProviderFailure(input: ProviderFailure): AIError["reason
       retryAfterMs: input.retryAfterMs,
       rateLimit: input.rateLimit,
     })
-  if (NETWORK_ERROR_TEXT.test(text)) return new ProviderInternalReason({ ...common, status: input.status })
   if (codes.some((code) => SERVER_CODES.has(code) || code.includes("exhausted") || code.includes("unavailable")))
     return new ProviderInternalReason({
       ...common,

packages/ai/src/providers/azure.ts

@@ -1,4 +1,3 @@
-import { Headers } from "effect/unstable/http"
 import { Auth } from "../route/auth.js"
 import { type AtLeastOne, type ProviderAuthOption } from "../route/auth-options.js"
 import type { Route as RouteDef, RouteDefaultsInput } from "../route/client.js"
@@ -11,7 +10,6 @@ import { withOpenAIOptions, type OpenAIProviderOptionsInput } from "./openai-opt
 
 export const id = ProviderID.make("azure")
 const routeAuth = Auth.remove("authorization")
-const RESPONSES_WEBSOCKET_ROTATE_AFTER_MS = 55 * 60 * 1000
 
 // Azure needs the customer's resource URL; supply either `resourceName`
 // (helper builds the URL) or `baseURL` directly.
@@ -42,30 +40,6 @@ const responsesRoute = OpenAIResponses.route.with({
   id: "azure-openai-responses",
   provider: id,
   auth: routeAuth,
-  transport: OpenAIResponses.channelTransport({
-    id: "azure-openai-responses",
-    name: "Azure OpenAI Responses",
-    rotateAfterMs: RESPONSES_WEBSOCKET_ROTATE_AFTER_MS,
-    enabled: (value) => {
-      const url = new URL(value)
-      return (
-        url.protocol === "https:" &&
-        url.hostname.endsWith(".openai.azure.com") &&
-        url.pathname.endsWith("/openai/v1/responses") &&
-        url.searchParams.get("api-version") === "v1"
-      )
-    },
-    url: (value) => {
-      const url = new URL(value)
-      url.searchParams.delete("api-version")
-      return url.toString()
-    },
-    headers: (headers) => {
-      const apiKey = headers["api-key"]
-      if (!apiKey) return headers
-      return Headers.remove(Headers.set(headers, "authorization", `Bearer ${apiKey}`), "api-key")
-    },
-  }),
 })
 
 const chatRoute = OpenAIChat.route.with({

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

@@ -13,7 +13,6 @@ export type AnthropicProviderOptionsInput = AnthropicMessages.ProviderOptionsInp
 export type AnthropicThinkingInput = AnthropicMessages.ThinkingInput
 
 const VERSION = "vertex-2023-10-16" as const
-const HEADER_VERSION = "2023-06-01" as const
 
 export const id = ProviderID.make("google-vertex")
 
@@ -58,7 +57,6 @@ const route = Route.make({
   endpoint: Endpoint.path(({ request }) => `/${request.model.id}:streamRawPredict`),
   auth: Auth.none,
   framing: AnthropicMessages.framing,
-  headers: () => ({ "anthropic-version": HEADER_VERSION }),
 })
 
 export const routes = [route]

packages/ai/src/providers/xai.ts

@@ -28,19 +28,13 @@ export interface Settings extends ProviderPackage.Settings {
 
 export type { XAIImageOptions } from "../protocols/xai-images.js"
 
-const RESPONSES_WEBSOCKET_ROTATE_AFTER_MS = 24 * 60 * 1000
-
 const responsesRoute = Route.make({
   id: "openai-responses",
   provider: id,
   providerMetadataKey: "xai",
   protocol: OpenAIResponses.protocol,
   endpoint: Endpoint.path("/responses", { baseURL: OpenAICompatibleProfiles.profiles.xai.baseURL }),
-  transport: OpenAIResponses.channelTransport({
-    id: "openai-responses",
-    name: "xAI Responses",
-    rotateAfterMs: RESPONSES_WEBSOCKET_ROTATE_AFTER_MS,
-  }),
+  transport: OpenAIResponses.httpTransport,
   defaults: { providerOptions: { store: false } },
 })
 

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

@@ -82,14 +82,6 @@ describe("provider error classification", () => {
     ])
   })
 
-  test("classifies network error text as provider internal", () => {
-    expect(
-      ["network error", "network-error", "network_error"].map(
-        (message) => classifyProviderFailure({ message })._tag,
-      ),
-    ).toEqual(["ProviderInternal", "ProviderInternal", "ProviderInternal"])
-  })
-
   test("classifies nested provider codes when a top-level code is also present", () => {
     expect(
       [

packages/ai/test/provider/anthropic-messages.test.ts

@@ -327,29 +327,6 @@ describe("Anthropic Messages route", () => {
     }),
   )
 
-  it.effect("scrubs outbound tool call IDs without truncating them", () =>
-    Effect.gen(function* () {
-      const id = `functions.lookup:1|${"x".repeat(64)}`
-      const scrubbed = `functions_lookup_1_${"x".repeat(64)}`
-      const prepared = yield* compileRequest(
-        LLM.request({
-          model,
-          messages: [
-            Message.assistant([ToolCallPart.make({ id, name: "lookup", input: {} })]),
-            Message.tool({ id, name: "lookup", result: "done" }),
-          ],
-          cache: "none",
-        }),
-      )
-
-      expect(prepared.body.messages).toMatchObject([
-        { role: "assistant", content: [{ type: "tool_use", id: scrubbed, name: "lookup", input: {} }] },
-        { role: "user", content: [{ type: "tool_result", tool_use_id: scrubbed }] },
-      ])
-      expect(scrubbed.length).toBeGreaterThan(64)
-    }),
-  )
-
   it.effect("batches parallel tool results into one Anthropic user message", () =>
     Effect.gen(function* () {
       const prepared = yield* compileRequest(
@@ -1416,14 +1393,14 @@ describe("Anthropic Messages route", () => {
             Message.assistant([
               {
                 type: "tool-call",
-                id: "srvtoolu.abc",
+                id: "srvtoolu_abc",
                 name: "web_search",
                 input: { query: "effect 4" },
                 providerExecuted: true,
               },
               {
                 type: "tool-result",
-                id: "srvtoolu.abc",
+                id: "srvtoolu_abc",
                 name: "web_search",
                 result: { type: "json", value: [{ url: "https://example.com" }] },
                 providerExecuted: true,

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

@@ -181,53 +181,6 @@ describe("Gemini route", () => {
     }),
   )
 
-  it.effect("merges parallel tool results into one function-response turn", () =>
-    Effect.gen(function* () {
-      const prepared = yield* compileRequest(
-        LLM.request({
-          model,
-          messages: [
-            Message.assistant([
-              ToolCallPart.make({ id: "call_1", name: "lookup", input: { query: "weather" } }),
-              ToolCallPart.make({ id: "call_2", name: "lookup", input: { query: "time" } }),
-            ]),
-            Message.tool({ id: "call_1", name: "lookup", result: "sunny", resultType: "text" }),
-            Message.tool({ id: "call_2", name: "lookup", result: "noon", resultType: "text" }),
-          ],
-        }),
-      )
-
-      expect(prepared.body.contents).toEqual([
-        {
-          role: "model",
-          parts: [
-            { functionCall: { id: undefined, name: "lookup", args: { query: "weather" } } },
-            { functionCall: { id: undefined, name: "lookup", args: { query: "time" } } },
-          ],
-        },
-        {
-          role: "user",
-          parts: [
-            {
-              functionResponse: {
-                id: undefined,
-                name: "lookup",
-                response: { name: "lookup", content: "sunny" },
-              },
-            },
-            {
-              functionResponse: {
-                id: undefined,
-                name: "lookup",
-                response: { name: "lookup", content: "noon" },
-              },
-            },
-          ],
-        },
-      ])
-    }),
-  )
-
   it.effect("prepares multimodal user input and tool history", () =>
     Effect.gen(function* () {
       const prepared = yield* compileRequest(

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

@@ -96,7 +96,7 @@ describe("Google Vertex providers", () => {
                 "https://aiplatform.eu.rep.googleapis.com/v1/projects/vertex-project/locations/eu/publishers/anthropic/models/claude-sonnet-4-6:streamRawPredict",
               )
               expect(request.headers.get("authorization")).toBe("Bearer vertex-token")
-              expect(request.headers.get("anthropic-version")).toBe("2023-06-01")
+              expect(request.headers.get("anthropic-version")).toBeNull()
               const body = yield* Effect.promise(() => request.json())
               expect(body).toMatchObject({
                 anthropic_version: "vertex-2023-10-16",

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

@@ -691,134 +691,6 @@ describe("OpenAI Responses route", () => {
     }),
   )
 
-  it.effect("builds xAI WebSocket requests without OpenAI handshake headers", () =>
-    Effect.gen(function* () {
-      const deps = Layer.succeed(
-        RequestExecutor.Service,
-        RequestExecutor.Service.of({ execute: () => Effect.die("unexpected HTTP request") }),
-      )
-      const response = yield* LLMClient.generate(LLM.request({ model: xaiModel, prompt: "Say hello." }), {
-        webSocket: {
-          execute: (exchange) =>
-            Effect.gen(function* () {
-              expect(exchange.connect.url).toBe("wss://api.x.ai/v1/responses")
-              expect(exchange.connect.rotateAfterMs).toBe(24 * 60 * 1000)
-              expect(exchange.connect.headers.authorization).toBe("Bearer test")
-              expect(exchange.connect.headers["openai-beta"]).toBeUndefined()
-              expect(JSON.parse((yield* exchange.driver.create(undefined)).message)).toMatchObject({
-                type: "response.create",
-                model: "grok-4.5",
-                store: false,
-              })
-              return {
-                frames: Stream.make(
-                  JSON.stringify({ type: "response.created", response: { id: "resp_xai" } }),
-                  JSON.stringify({ type: "response.completed", response: { id: "resp_xai" } }),
-                ),
-                complete: Effect.void,
-              }
-            }),
-        },
-      }).pipe(Effect.provide(LLMClient.layer.pipe(Layer.provide(deps))))
-
-      expect(response.finishReason.normalized).toBe("stop")
-    }),
-  )
-
-  it.effect("builds Azure WebSocket requests with v1 URLs and bearer auth", () =>
-    Effect.gen(function* () {
-      const deps = Layer.succeed(
-        RequestExecutor.Service,
-        RequestExecutor.Service.of({ execute: () => Effect.die("unexpected HTTP request") }),
-      )
-      const cases = [
-        {
-          model: Azure.configure({ resourceName: "opencode-test", apiKey: "azure-key" }).responses("deployment"),
-          authorization: "Bearer azure-key",
-        },
-        {
-          model: Azure.configure({ resourceName: "opencode-test", auth: Auth.bearer("entra-token") }).responses(
-            "deployment",
-          ),
-          authorization: "Bearer entra-token",
-        },
-      ]
-
-      yield* Effect.forEach(cases, (item) =>
-        LLMClient.generate(LLM.request({ model: item.model, prompt: "Say hello." }), {
-          webSocket: {
-            execute: (exchange) =>
-              Effect.gen(function* () {
-                expect(exchange.connect.url).toBe("wss://opencode-test.openai.azure.com/openai/v1/responses")
-                expect(exchange.connect.rotateAfterMs).toBe(55 * 60 * 1000)
-                expect(exchange.connect.headers.authorization).toBe(item.authorization)
-                expect(exchange.connect.headers["api-key"]).toBeUndefined()
-                expect(exchange.connect.headers["openai-beta"]).toBeUndefined()
-                expect(JSON.parse((yield* exchange.driver.create(undefined)).message)).toMatchObject({
-                  type: "response.create",
-                  model: "deployment",
-                  store: false,
-                })
-                return {
-                  frames: Stream.make(
-                    JSON.stringify({ type: "response.created", response: { id: "resp_azure" } }),
-                    JSON.stringify({ type: "response.completed", response: { id: "resp_azure" } }),
-                  ),
-                  complete: Effect.void,
-                }
-              }),
-          },
-        }).pipe(Effect.provide(LLMClient.layer.pipe(Layer.provide(deps)))),
-      )
-    }),
-  )
-
-  it.effect("keeps unsupported Azure endpoints and API versions on HTTP", () =>
-    Effect.gen(function* () {
-      const cases = [
-        {
-          model: Azure.configure({
-            resourceName: "opencode-test",
-            apiKey: "azure-key",
-            apiVersion: "2025-04-01-preview",
-          }).responses("deployment"),
-          url: "https://opencode-test.openai.azure.com/openai/v1/responses?api-version=2025-04-01-preview",
-        },
-        {
-          model: Azure.configure({
-            resourceName: "opencode-test",
-            apiKey: "azure-key",
-            useDeploymentBasedUrls: true,
-          }).responses("deployment"),
-          url: "https://opencode-test.openai.azure.com/openai/deployments/deployment/responses?api-version=v1",
-        },
-        {
-          model: Azure.configure({ baseURL: "https://gateway.example/azure", apiKey: "azure-key" }).responses(
-            "deployment",
-          ),
-          url: "https://gateway.example/azure/responses",
-        },
-      ]
-
-      yield* Effect.forEach(cases, (item) =>
-        LLMClient.generate(LLM.request({ model: item.model, prompt: "Say hello." }), {
-          webSocket: { execute: () => Effect.die("unexpected WebSocket request") },
-        }).pipe(
-          Effect.provide(
-            dynamicResponse((input) =>
-              Effect.gen(function* () {
-                expect(input.request.url).toBe(item.url)
-                return input.respond(sseEvents({ type: "response.completed", response: {} }), {
-                  headers: { "content-type": "text/event-stream" },
-                })
-              }),
-            ),
-          ),
-        ),
-      )
-    }),
-  )
-
   it.effect("uses exactly one HTTP request when no WebSocket executor is supplied", () =>
     Effect.gen(function* () {
       const attempts = yield* Ref.make(0)

packages/app/e2e/performance/unit/mock-server.test.ts

@@ -5,11 +5,9 @@ import { mockOpenCodeServer } from "../../utils/mock-server"
 test("applies message latency after a list response gate is released", async () => {
   const events: string[] = []
   const gate = Promise.withResolvers<void>()
-  const started = Promise.withResolvers<void>()
   let handler: ((route: Route) => Promise<void>) | undefined
   const page = {
     addInitScript: () => Promise.resolve(),
-    on: () => page,
     route: (_url: string, callback: (route: Route) => Promise<void>) => {
       handler = callback
       return Promise.resolve()
@@ -23,7 +21,6 @@ test("applies message latency after a list response gate is released", async ()
     messageDelay: 25,
     beforeMessagesResponse: () => {
       events.push("before")
-      started.resolve()
       return gate.promise
     },
     onMessages: (request) => events.push(request.phase),
@@ -34,18 +31,12 @@ test("applies message latency after a list response gate is released", async ()
   })
 
   const response = handler!({
-    request: () => ({
-      url: () => "http://127.0.0.1:4096/api/session/session/message",
-      method: () => "GET",
-      headers: () => ({}),
-      postDataBuffer: () => null,
-    }),
+    request: () => ({ url: () => "http://127.0.0.1:4096/api/session/session/message" }),
     fulfill: () => {
       events.push("fulfill")
       return Promise.resolve()
     },
   } as unknown as Route)
-  await started.promise
   expect(events).toEqual(["start", "before"])
 
   const released = performance.now()
@@ -54,42 +45,3 @@ test("applies message latency after a list response gate is released", async ()
   expect(performance.now() - released).toBeGreaterThanOrEqual(20)
   expect(events).toEqual(["start", "before", "page", "end", "fulfill"])
 })
-
-test("routes requests through the HttpApi contract", async () => {
-  const connected = Promise.withResolvers<{ integrationID: string; body: unknown }>()
-  let handler: ((route: Route) => Promise<void>) | undefined
-  const page = {
-    addInitScript: () => Promise.resolve(),
-    on: () => page,
-    route: (_url: string, callback: (route: Route) => Promise<void>) => {
-      handler = callback
-      return Promise.resolve()
-    },
-  } as unknown as Page
-  await mockOpenCodeServer(page, {
-    provider: {},
-    directory: "C:/OpenCode",
-    project: {},
-    sessions: [],
-    pageMessages: () => ({ items: [] }),
-    onConnectKey: connected.resolve,
-  })
-
-  const body = Buffer.from(JSON.stringify({ key: "secret" }))
-  let status: number | undefined
-  await handler!({
-    request: () => ({
-      url: () => "http://127.0.0.1:4096/api/integration/anthropic/connect/key",
-      method: () => "POST",
-      headers: () => ({ "content-type": "application/json" }),
-      postDataBuffer: () => body,
-    }),
-    fulfill: (response: Parameters<Route["fulfill"]>[0]) => {
-      status = response?.status
-      return Promise.resolve()
-    },
-  } as unknown as Route)
-
-  expect(status).toBe(204)
-  expect(await connected.promise).toEqual({ integrationID: "anthropic", body: { key: "secret" } })
-})

packages/app/e2e/regression/open-file-expand-folder.spec.ts

@@ -60,7 +60,7 @@ test("expands a folder whose path has a trailing Windows separator", async ({ pa
       if (path) return []
       return [
         {
-          name: "",
+          name: "frontend",
           path: "frontend\\",
           absolute: `${directory}/frontend`,
           type: "directory" as const,
@@ -116,7 +116,6 @@ test("expands a folder whose path has a trailing Windows separator", async ({ pa
 
   const frontendRow = panel.locator('[data-slot="file-tree-v2-row"][data-path="frontend"]')
   await expect(frontendRow).toBeVisible()
-  await expect(frontendRow.getByText("frontend", { exact: true })).toBeVisible()
   await expect(frontendRow).toHaveAttribute("aria-expanded", "false")
   await frontendRow.click()
   await expect(frontendRow).toHaveAttribute("aria-expanded", "true")

packages/app/e2e/regression/remote-session-settings.spec.ts

@@ -22,7 +22,7 @@ test("session settings use the remote server context", async ({ page }) => {
   await expect(page.getByRole("heading", { name: sessionB.title, exact: true })).toBeVisible()
   await page.keyboard.press("Control+,")
 
-  const dialog = page.locator(".settings-dialog")
+  const dialog = page.locator(".settings-v2-dialog")
   const autoAccept = dialog.locator('[data-action="settings-auto-accept-permissions"]')
   const input = autoAccept.getByRole("switch")
   await expect(autoAccept).toBeVisible()
@@ -63,7 +63,7 @@ test("auto-accept responds for an unfocused server session", async ({ page }) =>
   await page.goto(`/server/${base64Encode(serverA)}/session/${sessionA.id}`)
   await expect(page.getByRole("heading", { name: sessionA.title, exact: true })).toBeVisible()
   await page.keyboard.press("Control+,")
-  const autoAccept = page.locator(".settings-dialog").locator('[data-action="settings-auto-accept-permissions"]')
+  const autoAccept = page.locator(".settings-v2-dialog").locator('[data-action="settings-auto-accept-permissions"]')
   await autoAccept.locator('[data-slot="switch-control"]').click()
   await expect(autoAccept.getByRole("switch")).toBeChecked()
   await expect

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

@@ -1,249 +0,0 @@
-import { Schema, SchemaGetter } from "effect"
-import { HttpApi, HttpApiEndpoint, HttpApiGroup, HttpApiSchema } from "effect/unstable/httpapi"
-
-const Json = Schema.Json.pipe(
-  Schema.decodeTo(Schema.Unknown, {
-    decode: SchemaGetter.passthrough(),
-    encode: SchemaGetter.transform(jsonValue),
-  }),
-  HttpApiSchema.asJson(),
-)
-const JsonPayload = Schema.Unknown.pipe(HttpApiSchema.asJson())
-const Query = Schema.Struct({
-  directory: Schema.optional(Schema.String),
-  parentID: Schema.optional(Schema.String),
-  search: Schema.optional(Schema.String),
-  order: Schema.optional(Schema.String),
-  cursor: Schema.optional(Schema.String),
-  limit: Schema.optional(Schema.NumberFromString),
-  path: Schema.optional(Schema.String),
-  query: Schema.optional(Schema.String),
-  type: Schema.optional(Schema.String),
-})
-const SessionParams = { sessionID: Schema.String }
-const NoContent = HttpApiSchema.NoContent
-
-export class MockNotFound extends Schema.TaggedError<MockNotFound>()("MockNotFound", {
-  message: Schema.String,
-}) {}
-
-export class MockBadRequest extends Schema.TaggedError<MockBadRequest>()("MockBadRequest", {
-  message: Schema.String,
-}) {}
-
-const Group = HttpApiGroup.make("mock")
-  .add(HttpApiEndpoint.get("health", "/api/health", { success: Json }))
-  .add(
-    HttpApiEndpoint.get("event", "/api/event", {
-      success: Schema.String.pipe(HttpApiSchema.asText({ contentType: "text/event-stream" })),
-    }),
-  )
-  .add(HttpApiEndpoint.get("reference", "/api/reference", { success: Json }))
-  .add(HttpApiEndpoint.get("agent", "/api/agent", { success: Json }))
-  .add(HttpApiEndpoint.get("provider", "/api/provider", { success: Json }))
-  .add(HttpApiEndpoint.get("model", "/api/model", { success: Json }))
-  .add(HttpApiEndpoint.get("modelDefault", "/api/model/default", { success: Json }))
-  .add(HttpApiEndpoint.get("integrationList", "/api/integration", { success: Json }))
-  .add(
-    HttpApiEndpoint.get("integrationGet", "/api/integration/:integrationID", {
-      params: { integrationID: Schema.String },
-      success: Json,
-    }),
-  )
-  .add(
-    HttpApiEndpoint.post("integrationConnect", "/api/integration/:integrationID/connect/key", {
-      params: { integrationID: Schema.String },
-      payload: JsonPayload,
-      success: NoContent,
-    }),
-  )
-  .add(
-    HttpApiEndpoint.delete("credentialRemove", "/api/credential/:credentialID", {
-      params: { credentialID: Schema.String },
-      success: NoContent,
-    }),
-  )
-  .add(HttpApiEndpoint.get("command", "/api/command", { success: Json }))
-  .add(HttpApiEndpoint.get("skill", "/api/skill", { success: Json }))
-  .add(HttpApiEndpoint.get("plugin", "/api/plugin", { success: Json }))
-  .add(HttpApiEndpoint.get("mcp", "/api/mcp", { success: Json }))
-  .add(HttpApiEndpoint.get("mcpResource", "/api/mcp/resource", { success: Json }))
-  .add(HttpApiEndpoint.get("projectList", "/api/project", { success: Json }))
-  .add(HttpApiEndpoint.get("projectCurrent", "/api/project/current", { success: Json }))
-  .add(
-    HttpApiEndpoint.get("worktreeList", "/api/worktree/:projectID", {
-      params: { projectID: Schema.String },
-      success: Json,
-    }),
-  )
-  .add(
-    HttpApiEndpoint.post("worktreeCreate", "/api/worktree/:projectID", {
-      params: { projectID: Schema.String },
-      payload: JsonPayload,
-      success: Json,
-    }),
-  )
-  .add(
-    HttpApiEndpoint.delete("worktreeRemove", "/api/worktree/:projectID", {
-      params: { projectID: Schema.String },
-      success: NoContent,
-    }),
-  )
-  .add(
-    HttpApiEndpoint.post("worktreeRefresh", "/api/worktree/:projectID/refresh", {
-      params: { projectID: Schema.String },
-      success: NoContent,
-    }),
-  )
-  .add(HttpApiEndpoint.get("location", "/api/location", { success: Json }))
-  .add(HttpApiEndpoint.get("permissionRequests", "/api/permission/request", { success: Json }))
-  .add(HttpApiEndpoint.get("formRequests", "/api/form/request", { success: Json }))
-  .add(HttpApiEndpoint.get("vcs", "/api/vcs", { success: Json }))
-  .add(HttpApiEndpoint.get("vcsStatus", "/api/vcs/status", { success: Json }))
-  .add(HttpApiEndpoint.get("vcsDiff", "/api/vcs/diff", { success: Json }))
-  .add(HttpApiEndpoint.get("fsList", "/api/fs/list", { query: Query, success: Json }))
-  .add(
-    HttpApiEndpoint.get("fsRead", "/api/fs/read/*", {
-      success: Schema.Uint8Array.pipe(HttpApiSchema.asUint8Array()),
-    }),
-  )
-  .add(HttpApiEndpoint.get("fsFind", "/api/fs/find", { query: Query, success: Json }))
-  .add(HttpApiEndpoint.get("shell", "/api/shell", { success: Json }))
-  .add(
-    HttpApiEndpoint.get("ptyConnectToken", "/api/pty/:ptyID/connect-token", {
-      params: { ptyID: Schema.String },
-      success: Json,
-    }),
-  )
-  .add(
-    HttpApiEndpoint.get("sessionList", "/api/session", {
-      query: Query,
-      success: Json,
-      error: MockBadRequest.pipe(HttpApiSchema.status(400)),
-    }),
-  )
-  .add(HttpApiEndpoint.post("sessionCreate", "/api/session", { payload: JsonPayload, success: Json }))
-  .add(HttpApiEndpoint.get("sessionActive", "/api/session/active", { success: Json }))
-  .add(
-    HttpApiEndpoint.get("sessionGet", "/api/session/:sessionID", {
-      params: SessionParams,
-      success: Json,
-      error: MockNotFound.pipe(HttpApiSchema.status(404)),
-    }),
-  )
-  .add(
-    HttpApiEndpoint.delete("sessionRemove", "/api/session/:sessionID", {
-      params: SessionParams,
-      success: NoContent,
-    }),
-  )
-  .add(
-    HttpApiEndpoint.post("sessionShell", "/api/session/:sessionID/shell", {
-      params: SessionParams,
-      success: NoContent,
-    }),
-  )
-  .add(
-    HttpApiEndpoint.get("sessionForm", "/api/session/:sessionID/form", {
-      params: SessionParams,
-      success: Json,
-    }),
-  )
-  .add(
-    HttpApiEndpoint.post("sessionFormReply", "/api/session/:sessionID/form/:formID/reply", {
-      params: { ...SessionParams, formID: Schema.String },
-      payload: JsonPayload,
-      success: NoContent,
-    }),
-  )
-  .add(
-    HttpApiEndpoint.post("sessionFormCancel", "/api/session/:sessionID/form/:formID/cancel", {
-      params: { ...SessionParams, formID: Schema.String },
-      success: NoContent,
-    }),
-  )
-  .add(
-    HttpApiEndpoint.post("sessionBackground", "/api/session/:sessionID/background", {
-      params: SessionParams,
-      success: NoContent,
-    }),
-  )
-  .add(
-    HttpApiEndpoint.get("sessionInbox", "/api/session/:sessionID/inbox", {
-      params: SessionParams,
-      success: Json,
-    }),
-  )
-  .add(
-    HttpApiEndpoint.get("sessionPermission", "/api/session/:sessionID/permission", {
-      params: SessionParams,
-      success: Json,
-    }),
-  )
-  .add(
-    HttpApiEndpoint.post("sessionPermissionReply", "/api/session/:sessionID/permission/:permissionID/reply", {
-      params: { ...SessionParams, permissionID: Schema.String },
-      payload: JsonPayload,
-      success: NoContent,
-    }),
-  )
-  .add(
-    HttpApiEndpoint.post("sessionRename", "/api/session/:sessionID/rename", {
-      params: SessionParams,
-      payload: JsonPayload,
-      success: NoContent,
-    }),
-  )
-  .add(
-    HttpApiEndpoint.post("sessionInterrupt", "/api/session/:sessionID/interrupt", {
-      params: SessionParams,
-      success: NoContent,
-    }),
-  )
-  .add(
-    HttpApiEndpoint.post("sessionRevertStage", "/api/session/:sessionID/revert/stage", {
-      params: SessionParams,
-      payload: JsonPayload,
-      success: Json,
-      error: MockBadRequest.pipe(HttpApiSchema.status(400)),
-    }),
-  )
-  .add(
-    HttpApiEndpoint.post("sessionRevertClear", "/api/session/:sessionID/revert/clear", {
-      params: SessionParams,
-      success: NoContent,
-    }),
-  )
-  .add(
-    HttpApiEndpoint.post("sessionRevertCommit", "/api/session/:sessionID/revert/commit", {
-      params: SessionParams,
-      success: NoContent,
-    }),
-  )
-  .add(
-    HttpApiEndpoint.get("messageGet", "/api/session/:sessionID/message/:messageID", {
-      params: { ...SessionParams, messageID: Schema.String },
-      success: Json,
-      error: MockNotFound.pipe(HttpApiSchema.status(404)),
-    }),
-  )
-  .add(
-    HttpApiEndpoint.get("messageList", "/api/session/:sessionID/message", {
-      params: SessionParams,
-      query: Query,
-      success: Json,
-      error: MockBadRequest.pipe(HttpApiSchema.status(400)),
-    }),
-  )
-
-export const MockApi = HttpApi.make("mock").add(Group)
-
-function jsonValue(value: unknown): Schema.Json {
-  if (value === null || typeof value === "string" || typeof value === "boolean") return value
-  if (typeof value === "number") return Number.isFinite(value) ? value : null
-  if (Array.isArray(value)) return value.map(jsonValue)
-  if (!value || typeof value !== "object") return null
-  return Object.fromEntries(
-    Object.entries(value).flatMap(([key, item]) => (item === undefined ? [] : [[key, jsonValue(item)]])),
-  )
-}

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

@@ -1,9 +1,5 @@
-import type { Page } from "@playwright/test"
+import type { Page, Route } from "@playwright/test"
 import type { JsonValue, OpenCodeEvent, SessionMessageInfo } from "@opencode-ai/client/promise"
-import { Duration, Effect, Layer } from "effect"
-import { HttpRouter, HttpServer, HttpServerResponse } from "effect/unstable/http"
-import { HttpApiBuilder, HttpApiSchema } from "effect/unstable/httpapi"
-import { MockApi, MockBadRequest, MockNotFound } from "./mock-api"
 
 export interface MockServerConfig {
   provider: unknown | (() => unknown)
@@ -43,8 +39,9 @@ type MockStreamWindow = Window & {
 }
 
 export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
-  const state = { cursors: new Map<string, string>(), nextCursor: 0 }
+  const cursors = new Map<string, string>()
   const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
+  let nextCursor = 0
 
   await page.addInitScript(
     ({ server, retry }) => {
@@ -131,331 +128,316 @@ export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
     }, 50)
     page.on("close", () => clearInterval(timer))
   }
-  const transport = HttpRouter.toWebHandler(
-    HttpApiBuilder.layer(MockApi).pipe(
-      Layer.provide(mockHandlers(config, state)),
-      Layer.provide(HttpServer.layerServices),
-    ),
-    { disableLogger: true },
-  )
-  page.on("close", () => void transport.dispose())
-
   await page.route("**/*", async (route) => {
     const url = new URL(route.request().url())
+    const targetPort = process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"
     const appPort = new URL(
       process.env.PLAYWRIGHT_BASE_URL ?? `http://127.0.0.1:${process.env.PLAYWRIGHT_PORT ?? "3000"}`,
     ).port
     if (url.origin !== server && url.port !== appPort) return route.fallback()
-    if (route.request().method() === "OPTIONS") {
-      return route.fulfill({ status: 204, headers: corsHeaders })
-    }
 
-    const body = route.request().postDataBuffer()
-    const response = await transport.handler(
-      new Request(url, {
-        method: route.request().method(),
-        headers: route.request().headers(),
-        body: body ? Uint8Array.from(body) : undefined,
-      }),
-    )
-    if (response.status === 404 && url.origin !== server) return route.fallback()
-    return route.fulfill({
-      status: response.status,
-      headers: { ...Object.fromEntries(response.headers), ...corsHeaders },
-      body: Buffer.from(await response.arrayBuffer()),
-    })
-  })
-}
-
-const corsHeaders = {
-  "access-control-allow-origin": "*",
-  "access-control-allow-headers": "*",
-  "access-control-allow-methods": "GET, POST, PUT, DELETE, OPTIONS",
-  "access-control-expose-headers": "x-next-cursor",
-}
-
-function mockHandlers(config: MockServerConfig, state: { cursors: Map<string, string>; nextCursor: number }) {
-  const noContent = Effect.succeed(HttpApiSchema.NoContent.make())
-  const delay = config.messageDelay === undefined ? Effect.void : Effect.sleep(Duration.millis(config.messageDelay))
-  return HttpApiBuilder.group(MockApi, "mock", (handlers) =>
-    handlers
-      .handleRaw("event", () => {
-        const events = config.events?.()
-        const retry = config.eventRetry === undefined ? "" : `retry: ${config.eventRetry}\n\n`
-        const body = [{ id: "evt_mock_connected", type: "server.connected", data: {} }, ...(events ?? [])]
-          .map((event) => `data: ${JSON.stringify(event)}\n\n`)
-          .join("")
-        return Effect.succeed(HttpServerResponse.text(retry + body, { contentType: "text/event-stream" }))
-      })
-      .handleRaw("fsRead", (ctx) =>
-        Effect.gen(function* () {
-          const path = decodeURIComponent(new URL(ctx.request.url, "http://localhost").pathname.slice(13))
-          const value = yield* Effect.promise(() => Promise.resolve(config.fileContent?.(path)))
-          const content =
-            value && typeof value === "object" && "content" in value ? String(value.content) : String(value ?? "")
-          return HttpServerResponse.uint8Array(new TextEncoder().encode(content))
-        }),
+    const path = url.pathname
+    if (path === "/api/event") {
+      const events = config.events?.()
+      return sse(
+        route,
+        [{ id: "evt_mock_connected", type: "server.connected", data: {} }, ...(events ?? [])],
+        config.eventRetry,
       )
-      .handleAll({
-        health: () => Effect.succeed({ healthy: true, version: "2.0.0", pid: 1 }),
-        reference: () =>
-          Effect.succeed({
-            location: {
-              directory: config.directory,
-              project: {
-                id: (config.project as { id?: string }).id,
-                directory: config.directory,
-                canonical: config.directory,
-              },
-            },
-            data: [],
-          }),
-        agent: () =>
-          Effect.succeed({
-            location: location(config),
-            data: [
-              {
-                id: "build",
-                name: "Build",
-                mode: "primary",
-                hidden: false,
-                request: { settings: {}, headers: {}, body: {} },
-                permissions: [],
-              },
-            ],
-          }),
-        provider: () => Effect.succeed({ location: location(config), data: currentProviders(providerConfig(config)) }),
-        model: () => Effect.succeed({ location: location(config), data: currentModels(providerConfig(config)) }),
-        modelDefault: () =>
-          Effect.succeed({ location: location(config), data: currentDefaultModel(providerConfig(config)) }),
-        integrationList: () => Effect.succeed({ location: location(config), data: [] }),
-        integrationGet: (ctx) =>
-          Effect.succeed({
-            location: location(config),
-            data: {
-              id: ctx.params.integrationID,
-              name: ctx.params.integrationID,
-              methods: config.integrationMethods?.[ctx.params.integrationID] ?? [{ type: "key", label: "API key" }],
-              connections: [],
-            },
-          }),
-        integrationConnect: (ctx) =>
-          Effect.sync(() => config.onConnectKey?.({ integrationID: ctx.params.integrationID, body: ctx.payload })).pipe(
-            Effect.andThen(noContent),
-          ),
-        credentialRemove: () => noContent,
-        command: () => Effect.succeed({ location: location(config), data: [] }),
-        skill: () => Effect.succeed({ location: location(config), data: [] }),
-        plugin: () => Effect.succeed({ location: location(config), data: [] }),
-        mcp: () => Effect.succeed({ location: location(config), data: [] }),
-        mcpResource: () => Effect.succeed({ location: location(config), data: { resources: [], templates: [] } }),
-        projectList: () => {
-          const project = config.project as typeof config.project & { canonical?: string; worktree?: string }
-          return Effect.succeed([{ ...project, canonical: project.canonical ?? project.worktree ?? config.directory }])
-        },
-        projectCurrent: () =>
-          Effect.succeed({
+    }
+    if (path === "/api/health") return json(route, { healthy: true, version: "2.0.0", pid: 1 })
+    if (path === "/api/reference")
+      return json(route, {
+        location: {
+          directory: config.directory,
+          project: {
             id: (config.project as { id?: string }).id,
             directory: config.directory,
             canonical: config.directory,
-          }),
-        worktreeList: () =>
-          Effect.succeed([
-            { directory: config.directory },
-            ...((config.project as { sandboxes?: string[] }).sandboxes ?? []).map((directory) => ({
-              directory,
-              strategy: "git",
-            })),
-          ]),
-        worktreeCreate: (ctx) => {
-          const input = record(ctx.payload) ? ctx.payload : {}
-          return Effect.succeed({
-            directory: `${typeof input.directory === "string" ? input.directory : config.directory}/${
-              typeof input.name === "string" ? input.name : "copy"
-            }`,
-          })
+          },
         },
-        worktreeRemove: () => noContent,
-        worktreeRefresh: () => noContent,
-        location: () => Effect.succeed(location(config)),
-        permissionRequests: () =>
-          Effect.succeed({
-            location: location(config),
-            data: (typeof config.permissions === "function" ? config.permissions() : (config.permissions ?? [])).map(
-              currentPermission,
-            ),
-          }),
-        formRequests: () =>
-          Effect.succeed({
-            location: location(config),
-            data: typeof config.forms === "function" ? config.forms() : (config.forms ?? []),
-          }),
-        vcs: () =>
-          Effect.succeed({ location: location(config), data: { branch: { current: "main", default: "main" } } }),
-        vcsStatus: () => Effect.succeed({ location: location(config), data: [] }),
-        vcsDiff: () => Effect.succeed({ location: location(config), data: config.vcsDiff ?? [] }),
-        fsList: (ctx) =>
-          Effect.promise(() => Promise.resolve(config.fileList?.(ctx.query.path ?? ""))).pipe(
-            Effect.map((data) => ({ location: location(config), data })),
-          ),
-        fsFind: (ctx) =>
-          Effect.promise(() =>
-            Promise.resolve(
-              config.findFiles?.({ query: ctx.query.query ?? "", dirs: ctx.query.type, limit: ctx.query.limit }),
-            ),
-          ).pipe(
-            Effect.map((entries) => ({
-              location: location(config),
-              data: Array.isArray(entries)
-                ? entries.map((entry) =>
-                    typeof entry === "string"
-                      ? {
-                          name: entry.split(/[\\/]/).at(-1) ?? entry,
-                          path: entry,
-                          absolute: `${config.directory}/${entry}`,
-                          type: "directory",
-                          ignored: false,
-                        }
-                      : entry,
-                  )
-                : entries,
-            })),
-          ),
-        shell: () => Effect.succeed({ location: location(config), data: [] }),
-        ptyConnectToken: () =>
-          Effect.succeed({ location: location(config), data: { ticket: "e2e-ticket", expires_in: 60 } }),
-        sessionList: (ctx) => {
-          const sessions = config.sessions
-            .filter((session) => {
-              const location = session.location as { directory?: string } | undefined
-              return (
-                !ctx.query.directory ||
-                location?.directory === ctx.query.directory ||
-                session.directory === ctx.query.directory
-              )
-            })
-            .filter((session) => {
-              if (ctx.query.parentID === undefined) return true
-              if (ctx.query.parentID === "null") return session.parentID === undefined
-              return session.parentID === ctx.query.parentID
-            })
-            .filter((session) =>
-              ctx.query.search === undefined
-                ? true
-                : String(session.title ?? "")
-                    .toLowerCase()
-                    .includes(ctx.query.search.toLowerCase()),
+        data: [],
+      })
+    if (path === "/api/agent")
+      return json(route, {
+        location: location(config),
+        data: [
+          {
+            id: "build",
+            name: "Build",
+            mode: "primary",
+            hidden: false,
+            request: { settings: {}, headers: {}, body: {} },
+            permissions: [],
+          },
+        ],
+      })
+    if (path === "/api/provider")
+      return json(route, {
+        location: location(config),
+        data: currentProviders(providerConfig(config)),
+      })
+    if (path === "/api/model")
+      return json(route, { location: location(config), data: currentModels(providerConfig(config)) })
+    if (path === "/api/model/default")
+      return json(route, { location: location(config), data: currentDefaultModel(providerConfig(config)) })
+    if (path === "/api/integration") return json(route, { location: location(config), data: [] })
+    if (path === "/api/command") return json(route, { location: location(config), data: [] })
+    if (path === "/api/skill") return json(route, { location: location(config), data: [] })
+    if (path === "/api/plugin") return json(route, { location: location(config), data: [] })
+    if (path === "/api/mcp") return json(route, { location: location(config), data: [] })
+    if (path === "/api/mcp/resource")
+      return json(route, { location: location(config), data: { resources: [], templates: [] } })
+    const integration = path.match(/^\/api\/integration\/([^/]+)$/)?.[1]
+    if (integration && route.request().method() === "GET")
+      return json(route, {
+        location: location(config),
+        data: {
+          id: integration,
+          name: integration,
+          methods: config.integrationMethods?.[integration] ?? [{ type: "key", label: "API key" }],
+          connections: [],
+        },
+      })
+    const integrationConnect = path.match(/^\/api\/integration\/([^/]+)\/connect\/key$/)?.[1]
+    if (integrationConnect && route.request().method() === "POST") {
+      config.onConnectKey?.({ integrationID: integrationConnect, body: route.request().postDataJSON() })
+      return route.fulfill({ status: 204, headers: { "access-control-allow-origin": "*" } })
+    }
+    if (/^\/api\/credential\/[^/]+$/.test(path) && route.request().method() === "DELETE")
+      return route.fulfill({ status: 204, headers: { "access-control-allow-origin": "*" } })
+    if (path === "/api/project") {
+      const project = config.project as typeof config.project & { canonical?: string; worktree?: string }
+      return json(route, [
+        {
+          ...project,
+          canonical: project.canonical ?? project.worktree ?? config.directory,
+        },
+      ])
+    }
+    if (path === "/api/project/current")
+      return json(route, {
+        id: (config.project as { id?: string }).id,
+        directory: config.directory,
+        canonical: config.directory,
+      })
+    const worktree = path.match(/^\/api\/worktree\/([^/]+)$/)?.[1]
+    if (worktree && route.request().method() === "GET")
+      return json(route, [
+        { directory: config.directory },
+        ...((config.project as { sandboxes?: string[] }).sandboxes ?? []).map((directory) => ({
+          directory,
+          strategy: "git",
+        })),
+      ])
+    if (path === "/api/location") return json(route, location(config))
+    if (worktree && route.request().method() === "POST") {
+      const input = route.request().postDataJSON() as { directory: string; name?: string }
+      return json(route, { directory: `${input.directory}/${input.name ?? "copy"}` })
+    }
+    if (worktree && route.request().method() === "DELETE")
+      return route.fulfill({ status: 204, headers: { "access-control-allow-origin": "*" } })
+    if (/^\/api\/worktree\/[^/]+\/refresh$/.test(path))
+      return route.fulfill({ status: 204, headers: { "access-control-allow-origin": "*" } })
+    if (path === "/api/permission/request")
+      return json(route, {
+        location: location(config),
+        data: (typeof config.permissions === "function" ? config.permissions() : (config.permissions ?? [])).map(
+          currentPermission,
+        ),
+      })
+    if (path === "/api/form/request")
+      return json(route, {
+        location: location(config),
+        data: typeof config.forms === "function" ? config.forms() : (config.forms ?? []),
+      })
+    if (path === "/api/vcs")
+      return json(route, { location: location(config), data: { branch: { current: "main", default: "main" } } })
+    if (path === "/api/vcs/status") return json(route, { location: location(config), data: [] })
+    if (path === "/api/vcs/diff") return json(route, { location: location(config), data: config.vcsDiff ?? [] })
+    if (path === "/api/fs/list" && config.fileList)
+      return json(route, {
+        location: location(config),
+        data: await config.fileList(url.searchParams.get("path") ?? ""),
+      })
+    const fileRead = path.match(/^\/api\/fs\/read\/(.+)$/)?.[1]
+    if (fileRead && config.fileContent) {
+      const value = await config.fileContent(decodeURIComponent(fileRead))
+      const content =
+        value && typeof value === "object" && "content" in value ? String(value.content) : String(value ?? "")
+      return route.fulfill({ status: 200, body: content, headers: { "content-type": "application/octet-stream" } })
+    }
+    if (path === "/api/fs/find" && config.findFiles) {
+      const entries = await config.findFiles({
+        query: url.searchParams.get("query") ?? "",
+        dirs: url.searchParams.get("type") ?? undefined,
+        limit: url.searchParams.has("limit") ? Number(url.searchParams.get("limit")) : undefined,
+      })
+      return json(route, {
+        location: location(config),
+        data: Array.isArray(entries)
+          ? entries.map((entry) =>
+              typeof entry === "string"
+                ? {
+                    name: entry.split(/[\\/]/).at(-1) ?? entry,
+                    path: entry,
+                    absolute: `${config.directory}/${entry}`,
+                    type: "directory",
+                    ignored: false,
+                  }
+                : entry,
             )
-          const ordered = ctx.query.order === "asc" ? sessions : sessions.toReversed()
-          const offset = Number(ctx.query.cursor ?? 0)
-          const limit = ctx.query.limit ?? 50
-          const data = ordered.slice(offset, offset + limit)
-          return Effect.succeed({
-            data: data.map((session) => currentSession(session, config.directory)),
-            cursor: { next: offset + limit < ordered.length ? String(offset + limit) : undefined },
-          })
-        },
-        sessionCreate: (ctx) => {
-          const payload = record(ctx.payload) ? ctx.payload : {}
-          const created = currentSession(
-            {
-              id: "ses_mock_created",
-              projectID: (config.project as { id?: string }).id,
-              title: typeof payload.title === "string" ? payload.title : "New session",
-              parentID: typeof payload.parentID === "string" ? payload.parentID : undefined,
-            },
-            config.directory,
+          : entries,
+      })
+    }
+    if (path === "/api/shell" && route.request().method() === "GET")
+      return json(route, { location: location(config), data: [] })
+    if (/^\/api\/pty\/[^/]+\/connect-token$/.test(path))
+      return json(route, { location: location(config), data: { ticket: "e2e-ticket", expires_in: 60 } })
+    if (path === "/api/session") {
+      if (route.request().method() === "POST") {
+        const payload = route.request().postDataJSON() as Record<string, unknown>
+        const created = currentSession(
+          {
+            id: "ses_mock_created",
+            projectID: (config.project as { id?: string }).id,
+            title: typeof payload.title === "string" ? payload.title : "New session",
+            parentID: typeof payload.parentID === "string" ? payload.parentID : undefined,
+          },
+          config.directory,
+        )
+        config.sessions.push(created)
+        return json(route, { data: created })
+      }
+      if (route.request().method() !== "GET") return route.fallback()
+      const directory = url.searchParams.get("directory")
+      const parentID = url.searchParams.get("parentID")
+      const limit = Number(url.searchParams.get("limit") ?? 50)
+      const offset = Number(url.searchParams.get("cursor") ?? 0)
+      const sessions = config.sessions
+        .filter((session) => {
+          const location = session.location as { directory?: string } | undefined
+          return !directory || location?.directory === directory || session.directory === directory
+        })
+        .filter((session) => {
+          if (parentID === null) return true
+          if (parentID === "null") return session.parentID === undefined
+          return session.parentID === parentID
+        })
+        .filter((session) => {
+          const search = url.searchParams.get("search")?.toLowerCase()
+          return (
+            !search ||
+            String(session.title ?? "")
+              .toLowerCase()
+              .includes(search)
           )
-          return Effect.sync(() => config.sessions.push(created)).pipe(Effect.as({ data: created }))
-        },
-        sessionActive: () => {
-          const statuses = (
-            typeof config.sessionStatus === "function" ? config.sessionStatus() : (config.sessionStatus ?? {})
-          ) as Record<string, { type?: string }>
-          return Effect.succeed({
-            data: Object.fromEntries(
-              Object.entries(statuses).flatMap(([id, status]) =>
-                status.type === "idle" ? [] : [[id, { type: "running" }]],
-              ),
-            ),
-          })
-        },
-        sessionGet: (ctx) => {
-          const session = config.sessions.find((item) => item.id === ctx.params.sessionID)
-          return session
-            ? Effect.succeed({ data: currentSession(session, config.directory) })
-            : Effect.fail(new MockNotFound({ message: "Session not found" }))
-        },
-        sessionRemove: () => noContent,
-        sessionShell: () => noContent,
-        sessionForm: (ctx) => {
-          const forms = typeof config.forms === "function" ? config.forms() : (config.forms ?? [])
-          return Effect.succeed({
-            data: forms.filter((form) => (form as { sessionID?: string }).sessionID === ctx.params.sessionID),
-          })
-        },
-        sessionFormReply: () => noContent,
-        sessionFormCancel: () => noContent,
-        sessionBackground: () => noContent,
-        sessionInbox: () => Effect.succeed({ data: [] }),
-        sessionPermission: (ctx) => {
-          const permissions =
-            typeof config.permissions === "function" ? config.permissions() : (config.permissions ?? [])
-          return Effect.succeed({
-            data: permissions
-              .map(currentPermission)
-              .filter((permission) => permission.sessionID === ctx.params.sessionID),
-          })
-        },
-        sessionPermissionReply: () => noContent,
-        sessionRename: () => noContent,
-        sessionInterrupt: () => noContent,
-        sessionRevertStage: (ctx) => {
-          const payload = record(ctx.payload) ? ctx.payload : {}
-          const messageID = payload.messageID
-          if (typeof messageID !== "string") {
-            return Effect.fail(new MockBadRequest({ message: "Invalid revert request" }))
-          }
-          return Effect.sync(() => config.onRevertStage?.({ sessionID: ctx.params.sessionID, messageID })).pipe(
-            Effect.as({ data: { messageID } }),
-          )
-        },
-        sessionRevertClear: () => noContent,
-        sessionRevertCommit: () => noContent,
-        messageGet: (ctx) =>
-          Effect.gen(function* () {
-            config.onMessage?.({ sessionID: ctx.params.sessionID, messageID: ctx.params.messageID })
-            yield* delay
-            const message =
-              config.message?.(ctx.params.sessionID, ctx.params.messageID) ??
-              config
-                .pageMessages(ctx.params.sessionID, Number.MAX_SAFE_INTEGER)
-                .items.find((item) => item.id === ctx.params.messageID)
-            if (!message) return yield* new MockNotFound({ message: "Message not found" })
-            return { data: message }
-          }),
-        messageList: (ctx) => {
-          const token = ctx.query.cursor
-          const before = token ? state.cursors.get(token) : undefined
-          if (token && !before) return Effect.fail(new MockBadRequest({ message: "Invalid cursor" }))
-          return Effect.gen(function* () {
-            config.onMessages?.({ sessionID: ctx.params.sessionID, before, phase: "start" })
-            if (config.beforeMessagesResponse) {
-              yield* Effect.promise(() => config.beforeMessagesResponse!({ sessionID: ctx.params.sessionID, before }))
-            }
-            yield* delay
-            const pageData = config.pageMessages(ctx.params.sessionID, ctx.query.limit ?? 50, before)
-            config.onMessages?.({ sessionID: ctx.params.sessionID, before, phase: "end" })
-            const cursor = pageData.cursor ? `cursor_${++state.nextCursor}` : undefined
-            if (cursor) state.cursors.set(cursor, pageData.cursor!)
-            return {
-              data: ctx.query.order === "asc" ? pageData.items : pageData.items.toReversed(),
-              cursor: { next: cursor },
-            }
-          })
-        },
-      }),
-  )
+        })
+      const ordered = url.searchParams.get("order") === "asc" ? sessions : sessions.toReversed()
+      const data = ordered.slice(offset, offset + limit)
+      const next = offset + limit < ordered.length ? String(offset + limit) : undefined
+      return json(route, {
+        data: data.map((session) => currentSession(session, config.directory)),
+        cursor: { next },
+      })
+    }
+    if (path === "/api/session/active") {
+      const statuses = (
+        typeof config.sessionStatus === "function" ? config.sessionStatus() : (config.sessionStatus ?? {})
+      ) as Record<string, { type?: string }>
+      return json(route, {
+        data: Object.fromEntries(
+          Object.entries(statuses).flatMap(([id, status]) =>
+            status.type === "idle" ? [] : [[id, { type: "running" }]],
+          ),
+        ),
+      })
+    }
+    if (/^\/api\/session\/[^/]+\/shell$/.test(path) && route.request().method() === "POST") {
+      return route.fulfill({ status: 204, headers: { "access-control-allow-origin": "*" } })
+    }
+    const sessionForm = path.match(/^\/api\/session\/([^/]+)\/form$/)?.[1]
+    if (sessionForm && route.request().method() === "GET") {
+      const forms = typeof config.forms === "function" ? config.forms() : (config.forms ?? [])
+      return json(route, { data: forms.filter((form) => (form as { sessionID?: string }).sessionID === sessionForm) })
+    }
+    if (/^\/api\/session\/[^/]+\/form\/[^/]+\/(reply|cancel)$/.test(path) && route.request().method() === "POST") {
+      return route.fulfill({ status: 204, headers: { "access-control-allow-origin": "*" } })
+    }
+    if (/^\/api\/session\/[^/]+\/background$/.test(path) && route.request().method() === "POST")
+      return route.fulfill({ status: 204, headers: { "access-control-allow-origin": "*" } })
+    if (/^\/api\/session\/[^/]+\/inbox$/.test(path) && route.request().method() === "GET")
+      return json(route, { data: [] })
+    const sessionPermission = path.match(/^\/api\/session\/([^/]+)\/permission$/)?.[1]
+    if (sessionPermission && route.request().method() === "GET") {
+      const permissions = typeof config.permissions === "function" ? config.permissions() : (config.permissions ?? [])
+      return json(route, {
+        data: permissions.map(currentPermission).filter((permission) => permission.sessionID === sessionPermission),
+      })
+    }
+    if (/^\/api\/session\/[^/]+\/permission\/[^/]+\/reply$/.test(path) && route.request().method() === "POST") {
+      return route.fulfill({ status: 204, headers: { "access-control-allow-origin": "*" } })
+    }
+    if (
+      /^\/api\/session\/[^/]+\/(rename|interrupt|revert\/clear|revert\/commit)$/.test(path) &&
+      route.request().method() === "POST"
+    ) {
+      return route.fulfill({ status: 204, headers: { "access-control-allow-origin": "*" } })
+    }
+    const revertStage = path.match(/^\/api\/session\/([^/]+)\/revert\/stage$/)?.[1]
+    if (revertStage && route.request().method() === "POST") {
+      const body = route.request().postDataJSON()
+      if (!body || typeof body !== "object" || !("messageID" in body) || typeof body.messageID !== "string") {
+        return json(route, { error: "Invalid revert request" }, undefined, 400)
+      }
+      config.onRevertStage?.({ sessionID: revertStage, messageID: body.messageID })
+      return json(route, { data: { messageID: body.messageID } })
+    }
+    if (/^\/api\/session\/[^/]+$/.test(path) && route.request().method() === "DELETE") {
+      return route.fulfill({ status: 204, headers: { "access-control-allow-origin": "*" } })
+    }
+    const currentSessionMatch = path.match(/^\/api\/session\/([^/]+)$/)
+    if (currentSessionMatch) {
+      const session = config.sessions.find((item) => item.id === currentSessionMatch[1])
+      if (!session) return json(route, { error: "Session not found" }, undefined, 404)
+      return json(route, {
+        data: currentSession(session, config.directory),
+      })
+    }
+
+    const messageMatch = path.match(/^\/api\/session\/([^/]+)\/message\/([^/]+)$/)
+    if (messageMatch) {
+      config.onMessage?.({ sessionID: messageMatch[1]!, messageID: messageMatch[2]! })
+      if (config.messageDelay !== undefined) await new Promise((resolve) => setTimeout(resolve, config.messageDelay))
+      const message =
+        config.message?.(messageMatch[1]!, messageMatch[2]!) ??
+        config.pageMessages(messageMatch[1]!, Number.MAX_SAFE_INTEGER).items.find((item) => item.id === messageMatch[2])
+      if (message === undefined) return json(route, { error: "Message not found" }, undefined, 404)
+      return json(route, { data: message })
+    }
+
+    const messagesMatch = path.match(/^\/api\/session\/([^/]+)\/message$/)
+    if (messagesMatch) {
+      const token = url.searchParams.get("cursor") ?? undefined
+      const before = token ? cursors.get(token) : undefined
+      if (token && !before) return json(route, { error: "Invalid cursor" }, undefined, 400)
+      config.onMessages?.({ sessionID: messagesMatch[1], before, phase: "start" })
+      await config.beforeMessagesResponse?.({ sessionID: messagesMatch[1]!, before })
+      if (config.messageDelay !== undefined) await new Promise((resolve) => setTimeout(resolve, config.messageDelay))
+      const pageData = config.pageMessages(messagesMatch[1], Number(url.searchParams.get("limit") ?? 50), before)
+      config.onMessages?.({ sessionID: messagesMatch[1], before, phase: "end" })
+      const cursor = pageData.cursor ? `cursor_${++nextCursor}` : undefined
+      if (cursor) cursors.set(cursor, pageData.cursor!)
+      return json(route, {
+        data: url.searchParams.get("order") === "asc" ? pageData.items : pageData.items.toReversed(),
+        cursor: { next: cursor },
+      })
+    }
+
+    if (url.port === targetPort && targetPort !== appPort)
+      return json(route, { error: `Unhandled mock route: ${path}` }, undefined, 404)
+    return route.fallback()
+  })
 }
 
 function location(config: MockServerConfig) {
@@ -613,3 +595,24 @@ function jsonValue(value: unknown): JsonValue | undefined {
 function record(value: unknown): value is Record<string, unknown> {
   return !!value && typeof value === "object" && !Array.isArray(value)
 }
+
+function json(route: Route, body: unknown, headers?: Record<string, string>, status = 200) {
+  return route.fulfill({
+    status,
+    contentType: "application/json",
+    headers: {
+      "access-control-allow-origin": "*",
+      "access-control-expose-headers": "x-next-cursor",
+      ...headers,
+    },
+    body: JSON.stringify(body ?? null),
+  })
+}
+
+function sse(route: Route, events?: unknown[], retry?: number) {
+  return route.fulfill({
+    status: 200,
+    contentType: "text/event-stream",
+    body: `${retry === undefined ? "" : `retry: ${retry}\n\n`}${events?.map((event) => `data: ${JSON.stringify(event)}\n\n`).join("") || ": ok\n\n"}`,
+  })
+}

packages/app/package.json

@@ -6,10 +6,10 @@
   "exports": {
     ".": "./src/index.ts",
     "./desktop": "./src/desktop.ts",
-    "./desktop-menu": "./src/shell/commands/desktop-menu.ts",
-    "./i18n/desktop-native": "./src/runtime/i18n/desktop-native.ts",
-    "./updater": "./src/shell/updates/types.ts",
-    "./wsl/types": "./src/servers/wsl/types.ts",
+    "./desktop-menu": "./src/desktop-menu.ts",
+    "./i18n/desktop-native": "./src/i18n/desktop-native.ts",
+    "./updater": "./src/updater.ts",
+    "./wsl/types": "./src/wsl/types.ts",
     "./vite": "./vite.js",
     "./index.css": "./src/index.css"
   },

packages/app/src/app.tsx

@@ -4,26 +4,72 @@ import { FileComponentProvider } from "@opencode-ai/ui/context/file"
 import { Font } from "@opencode-ai/ui/font"
 import { ThemeProvider } from "@opencode-ai/ui/theme/context"
 import { MetaProvider } from "@solidjs/meta"
-import { type BaseRouterProps, Router } from "@solidjs/router"
+import { type BaseRouterProps, Route, Router, useParams } from "@solidjs/router"
 import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"
-import { type Component, createRenderEffect, ErrorBoundary, type JSX, type ParentProps } from "solid-js"
+import {
+  type Component,
+  createMemo,
+  createRenderEffect,
+  ErrorBoundary,
+  type JSX,
+  lazy,
+  type ParentProps,
+  Show,
+} from "solid-js"
 import { Dynamic } from "solid-js/web"
-import { CommandProvider } from "@/shell/commands/command"
-import { DesktopCommands } from "@/shell/commands/desktop"
-import { GlobalProvider } from "@/runtime/server/runtime"
-import { HighlightsProvider } from "@/shell/updates/highlights"
-import { LanguageProvider, UiI18nBridge, type Locale } from "@/runtime/i18n/language"
-import { ServerConnection, ServersProvider } from "@/runtime/server/registry"
-import { SettingsProvider } from "@/settings/model"
-import { TabsProvider } from "@/shell/tabs/tabs"
-import { WslServersProvider } from "@/servers/wsl/context"
-import { ErrorPage } from "@/shell/errors/error"
-import { AppRoutes, File, preloadRoute } from "@/shell/routes/routes"
+import { CommandProvider, useCommand, type CommandOption } from "@/context/command"
+import { GlobalProvider, useGlobal } from "@/context/global"
+import { HighlightsProvider } from "@/context/highlights"
+import { LanguageProvider, UiI18nBridge, type Locale, useLanguage } from "@/context/language"
+import { LayoutProvider } from "@/context/layout"
+import { usePlatform } from "@/context/platform"
+import { ServerConnection, ServersProvider } from "@/context/servers"
+import { SettingsProvider } from "@/context/settings"
+import { TabsProvider } from "@/context/tabs"
+import { WslServersProvider } from "@/wsl/context"
+import Layout from "@/pages/layout"
+import { ErrorPage } from "./pages/error"
+import { requireServerKey } from "./utils/session-route"
 
-export { preloadRoute }
+import { Home } from "@/pages/home"
+import { ServerProvider } from "./context/server"
+
+const File = lazy(() => import("@opencode-ai/session-ui/file").then((module) => ({ default: module.File })))
+const loadDraftRoute = () => Promise.all([import("@/pages/draft-route"), File.preload()]).then(([module]) => module)
+const loadSessionRoute = () => Promise.all([import("@/session/route"), File.preload()]).then(([module]) => module)
+const DraftRoute = lazy(() => loadDraftRoute().then((module) => ({ default: module.DraftRoute })))
+const TargetSessionRouteContent = lazy(() =>
+  loadSessionRoute().then((module) => ({ default: module.TargetSessionRouteContent })),
+)
+
+export function preloadRoute(url: string) {
+  const pathname = url.split(/[?#]/, 1)[0]
+  if (pathname === "/new-session") return DraftRoute.preload().then(() => undefined)
+  if (/^\/server\/[^/]+\/session\/[^/]+$/.test(pathname))
+    return TargetSessionRouteContent.preload().then(() => undefined)
+  return Promise.resolve()
+}
+
+function TargetServerRoute(props: ParentProps) {
+  const params = useParams<{ serverKey: string }>()
+  const global = useGlobal()
+  const conn = createMemo(() =>
+    global.servers.list().find((item) => ServerConnection.key(item) === requireServerKey(params.serverKey)),
+  )
+
+  return (
+    // Owns the server-identity remount. Session changes must not remount this subtree.
+    <Show when={conn()} keyed>
+      {(conn) => <ServerProvider conn={conn}>{props.children}</ServerProvider>}
+    </Show>
+  )
+}
 
 declare global {
   interface Window {
+    __OPENCODE__?: {
+      deepLinks?: string[]
+    }
     api?: {
       setTitlebar?: (theme: { mode: "light" | "dark"; scheme?: "system" | "light" | "dark" }) => Promise<void>
       exportDebugLogs?: () => Promise<string>
@@ -54,6 +100,39 @@ function BodyTypography() {
   return null
 }
 
+// Server-agnostic providers shared across every route. These live in the shared
+// shell (router root) so they stay mounted regardless of the active server/route.
+function DesktopCommands() {
+  const command = useCommand()
+  const language = useLanguage()
+  const platform = usePlatform()
+
+  command.register("desktop", () => {
+    const commands: CommandOption[] = []
+    if (platform.platform === "desktop" && platform.exportDebugLogs) {
+      commands.push({
+        id: "logs.export",
+        title: language.t("command.logs.export"),
+        category: language.t("command.category.settings"),
+        onSelect: () => {
+          void platform.exportDebugLogs?.()
+        },
+      })
+    }
+    return commands
+  })
+
+  return null
+}
+
+function AppLayout(props: ParentProps) {
+  return (
+    <LayoutProvider>
+      <Layout>{props.children}</Layout>
+    </LayoutProvider>
+  )
+}
+
 export function AppBaseProviders(
   props: ParentProps<{
     locale?: Locale
@@ -125,7 +204,18 @@ export function AppInterface(props: {
       <SettingsProvider>
         <GlobalProvider>
           <Dynamic component={props.router ?? Router} root={Root}>
-            <AppRoutes />
+            <Route component={AppLayout}>
+              <Route path="/" component={Home} />
+              <Route
+                path="/server/:serverKey/session/:id"
+                component={() => (
+                  <TargetServerRoute>
+                    <TargetSessionRouteContent />
+                  </TargetServerRoute>
+                )}
+              />
+              <Route path="/new-session" component={DraftRoute} />
+            </Route>
           </Dynamic>
         </GlobalProvider>
       </SettingsProvider>

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

@@ -1,20 +1,20 @@
 import { getFilename } from "@opencode-ai/util/path"
-import type { Project } from "@/runtime/server/types"
+import type { Project } from "@/types"
 import type { SessionInfo } from "@opencode-ai/client/promise"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { createMemo, onCleanup } from "solid-js"
-import { commandPaletteOptions, useCommand, type CommandOption } from "@/shell/commands/command"
-import { useFile } from "@/workspaces/files/model"
-import { useGlobal } from "@/runtime/server/runtime"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useLayout, type LocalProject } from "@/shell/state/layout"
-import { ServerConnection } from "@/runtime/server/registry"
-import { useServerSDK } from "@/runtime/server/client"
-import { useTabs } from "@/shell/tabs/tabs"
-import { displayName, projectForSession } from "@/shell/layout/helpers"
+import { commandPaletteOptions, useCommand, type CommandOption } from "@/context/command"
+import { useFile } from "@/context/file"
+import { useGlobal } from "@/context/global"
+import { useLanguage } from "@/context/language"
+import { useLayout, type LocalProject } from "@/context/layout"
+import { ServerConnection } from "@/context/servers"
+import { useServerSDK } from "@/context/server-sdk"
+import { useTabs } from "@/context/tabs"
+import { displayName, projectForSession } from "@/pages/layout/helpers"
 import { createSessionTabs } from "@/session/helpers"
 import { useSessionLayout } from "@/session/session-layout"
-import { useServer } from "@/runtime/server/current"
+import { useServer } from "@/context/server"
 
 export type CommandPaletteEntry = {
   id: string

packages/app/src/components/command-tooltip-keybind.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { newTabTooltipKeybind, reviewTooltipKeybind } from "./tooltip-keybind"
+import { newTabTooltipKeybind, reviewTooltipKeybind } from "./command-tooltip-keybind"
 
 describe("command tooltip keybinds", () => {
   test("keeps localized review shortcut modifiers", () => {

packages/app/src/components/debug-bar.tsx

@@ -3,8 +3,8 @@ import { batch, createEffect, onCleanup, onMount, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { useLanguage } from "@/runtime/i18n/language"
-import { usePlatform } from "@/runtime/platform/platform"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
 
 type Mem = Performance & {
   memory?: {

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

@@ -6,12 +6,14 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { Keybind } from "@opencode-ai/ui/keybind"
 import { TextInput } from "@opencode-ai/ui/text-input"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { createEffect, createMemo, createResource, createSignal, For, Match, Show, Switch } from "solid-js"
-import { formatKeybindParts } from "@/shell/commands/command"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useTabs } from "@/shell/tabs/tabs"
-import { SessionTabAvatar } from "@/shell/layout/session-tab-avatar"
-import { getRelativeTime } from "@/shell/time"
+import { createEffect, createMemo, createResource, createSignal, For, Match, onCleanup, Show, Switch } from "solid-js"
+import { commandPaletteOptions, formatKeybindParts, useCommand } from "@/context/command"
+import { useGlobal } from "@/context/global"
+import { useLanguage } from "@/context/language"
+import { ServerConnection } from "@/context/servers"
+import { useTabs } from "@/context/tabs"
+import { SessionTabAvatar } from "@/pages/layout/session-tab-avatar"
+import { getRelativeTime } from "@/utils/time"
 import {
   createCommandPaletteCommandEntry,
   createCommandPaletteFileEntry,
@@ -19,8 +21,8 @@ import {
   createServerSessionEntries,
   uniqueCommandPaletteEntries,
   type CommandPaletteEntry,
-} from "./palette"
-import "./dialog.css"
+} from "./command-palette"
+import "./dialog-command-palette.css"
 
 function groups(entries: CommandPaletteEntry[]) {
   const map = new Map<string, CommandPaletteEntry[]>()
@@ -28,7 +30,7 @@ function groups(entries: CommandPaletteEntry[]) {
   return Array.from(map.entries()).map(([category, entries]) => ({ category, entries }))
 }
 
-export function matchesCommandPaletteEntry(entry: CommandPaletteEntry, query: string) {
+function matchesEntry(entry: CommandPaletteEntry, query: string) {
   const value = query.toLowerCase()
   return [entry.title, entry.description, entry.category].some((text) => text?.toLowerCase().includes(value))
 }
@@ -42,7 +44,7 @@ export function DialogCommandPalette(props: { onOpenFile?: (path: string) => voi
     const [files, nextSessions] = await Promise.all([palette.file.searchFiles(q), Promise.resolve(palette.sessions(q))])
     const category = palette.language.t("palette.group.files")
     return [
-      ...palette.commandEntries().filter((entry) => matchesCommandPaletteEntry(entry, q)),
+      ...palette.commandEntries().filter((entry) => matchesEntry(entry, q)),
       ...nextSessions,
       ...files.map((path) => createCommandPaletteFileEntry(path, category)),
     ]
@@ -59,7 +61,69 @@ export function DialogCommandPalette(props: { onOpenFile?: (path: string) => voi
   )
 }
 
-export function CommandPaletteView(props: {
+export function DialogHomeCommandPalette(props: {
+  server: ServerConnection.Any
+  onSelectSession: (entry: CommandPaletteEntry) => void
+}) {
+  const command = useCommand()
+  const dialog = useDialog()
+  const global = useGlobal()
+  const language = useLanguage()
+  const serverCtx = global.ensureServerCtx(props.server)
+  const state = { cleanup: undefined as (() => void) | void, committed: false }
+  const commandEntries = createMemo(() => {
+    const category = language.t("palette.group.commands")
+    return commandPaletteOptions(command.options).map((option) => createCommandPaletteCommandEntry(option, category))
+  })
+  const sessions = createServerSessionEntries({
+    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 }),
+    untitled: () => language.t("command.session.new"),
+    category: () => language.t("command.category.session"),
+  })
+
+  const highlight = (item: CommandPaletteEntry | undefined) => {
+    state.cleanup?.()
+    state.cleanup = undefined
+    if (item?.type !== "command") return
+    state.cleanup = item.option?.onHighlight?.()
+  }
+  const select = (item: CommandPaletteEntry | undefined) => {
+    if (!item) return
+    state.committed = true
+    state.cleanup = undefined
+    dialog.close()
+    if (item.type === "command") {
+      item.option?.onSelect?.("palette")
+      return
+    }
+    if (item.type === "session") props.onSelectSession(item)
+  }
+  const loadItems = async (text: string) => {
+    const query = text.trim()
+    if (!query) return commandEntries().slice(0, 5)
+    return [...commandEntries().filter((entry) => matchesEntry(entry, query)), ...(await sessions(query))]
+  }
+
+  onCleanup(() => {
+    if (state.committed) return
+    state.cleanup?.()
+  })
+
+  return (
+    <CommandPaletteView
+      placeholder={language.t("palette.search.placeholder.home")}
+      loadItems={loadItems}
+      highlight={highlight}
+      select={select}
+      close={() => dialog.close()}
+    />
+  )
+}
+
+function CommandPaletteView(props: {
   placeholder: string
   loadItems: (text: string) => CommandPaletteEntry[] | Promise<CommandPaletteEntry[]>
   highlight: (item: CommandPaletteEntry | undefined) => void

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

@@ -2,9 +2,9 @@
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"
-import { mockProviderAuth } from "@/runtime/server/sync"
+import { mockProviderAuth } from "@/context/server-sync"
 import { onCleanup, onMount } from "solid-js"
-import { DialogConnectProvider, useProviderConnectController } from "./dialog"
+import { DialogConnectProvider, useProviderConnectController } from "./dialog-connect-provider"
 
 function ConnectProviderDialogStory() {
   const dialog = useDialog()
@@ -48,7 +48,7 @@ export default {
   id: "app-dialog-connect-provider",
 }
 
-export const Picker = {
+export const V2 = {
   render: () => (
     <QueryClientProvider client={new QueryClient()}>
       <ConnectProviderDialogStory />
@@ -57,17 +57,17 @@ export const Picker = {
 }
 
 export const ApiKey = {
-  render: renderConnection("openrouter", [{ type: "key", label: "API key" }]),
+  render: renderConnection("openrouter", [{ type: "api", label: "API key" }]),
 }
 
 export const OpenCodeZen = {
-  render: renderConnection("opencode", [{ type: "key", label: "API key" }]),
+  render: renderConnection("opencode", [{ type: "api", label: "API key" }]),
 }
 
 export const LoginMethods = {
   render: renderConnection("openai", [
     { type: "oauth", label: "ChatGPT Pro/Plus (browser)" },
     { type: "oauth", label: "ChatGPT Pro/Plus (headless)" },
-    { type: "key", label: "API key" },
+    { type: "api", label: "API key" },
   ]),
 }

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

@@ -7,17 +7,17 @@ import { Spinner } from "@opencode-ai/ui/spinner"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { DialogBody, DialogHeader, DialogTitle, Dialog } from "@opencode-ai/ui/dialog"
 import { TextInput } from "@opencode-ai/ui/text-input"
-import { showToast } from "@/shell/notifications/toast"
+import { showToast } from "@/utils/toast"
 import { type Component, createMemo, createUniqueId, For, Match, onMount, Show, Switch } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useParams } from "@solidjs/router"
-import { ExternalLink } from "@/runtime/platform/external-link"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useProviders } from "@/providers/catalog/providers"
-import { useIntegrations } from "@/providers/catalog/integrations"
-import { CustomProviderForm } from "@/providers/credentials/dialog"
-import { decode64 } from "@/runtime/persistence/base64"
-import { createProviderConnectionController, type ProviderConnectMethod } from "./controller"
+import { ExternalLink } from "@/components/external-link"
+import { useLanguage } from "@/context/language"
+import { useProviders } from "@/hooks/use-providers"
+import { useIntegrations } from "@/hooks/use-integrations"
+import { CustomProviderForm } from "./dialog-custom-provider"
+import { decode64 } from "@/utils/base64"
+import { createProviderConnectionController, type ProviderConnectMethod } from "./provider-connection-controller"
 
 const CUSTOM_ID = "_custom"
 type IntegrationForm = NonNullable<ProviderConnectMethod["form"]>[number]

packages/app/src/components/dialog-custom-provider.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { validateCustomProvider } from "./form"
+import { validateCustomProvider } from "./dialog-custom-provider-form"
 
 const t = (key: string) => key
 

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

@@ -1,17 +1,45 @@
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog, DialogBody, DialogHeader, DialogTitle } from "@opencode-ai/ui/dialog"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { useMutation } from "@tanstack/solid-query"
 import { TextField } from "@opencode-ai/ui/text-field"
-import { showToast } from "@/shell/notifications/toast"
+import { showToast } from "@/utils/toast"
 import { batch, For } from "solid-js"
 import { createStore, produce } from "solid-js/store"
-import { ExternalLink } from "@/runtime/platform/external-link"
-import { useData } from "@/runtime/server/current"
-import { useLanguage } from "@/runtime/i18n/language"
-import { type FormState, headerRow, modelRow, validateCustomProvider } from "./form"
+import { ExternalLink } from "@/components/external-link"
+import { useData } from "@/context/server"
+import { useLanguage } from "@/context/language"
+import { type FormState, headerRow, modelRow, validateCustomProvider } from "./dialog-custom-provider-form"
+
+type Props = {
+  onBack: () => void
+}
+
+export function DialogCustomProvider(props: Props) {
+  const language = useLanguage()
+
+  return (
+    <Dialog class="h-full">
+      <DialogHeader>
+        <DialogTitle>
+          <IconButton
+            tabIndex={-1}
+            icon={<Icon name="arrow-left" />}
+            variant="ghost"
+            onClick={props.onBack}
+            aria-label={language.t("common.goBack")}
+          />
+        </DialogTitle>
+      </DialogHeader>
+      <DialogBody>
+        <CustomProviderForm />
+      </DialogBody>
+    </Dialog>
+  )
+}
 
 export function CustomProviderForm(props: { autofocus?: boolean } = {}) {
   const dialog = useDialog()

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

@@ -1,8 +1,8 @@
-.project-settings-dialog [data-slot="dialog-container"] {
+.project-settings-v2-dialog [data-slot="dialog-container"] {
   background: var(--v2-background-bg-base);
 }
 
-.project-settings-dialog [data-slot="dialog-body"] {
+.project-settings-v2-dialog [data-slot="dialog-body"] {
   padding: 0;
   overflow: hidden;
 }
@@ -11,14 +11,14 @@
   height: 100%;
 }
 
-.project-settings-nav {
+.project-settings-v2-nav {
   display: flex;
   flex-direction: column;
   gap: 4px;
   width: 100%;
 }
 
-.project-settings-panel {
+.project-settings-v2-panel {
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -27,18 +27,18 @@
   user-select: none;
 }
 
-.project-settings-panel :is(input, textarea, [contenteditable="true"]) {
+.project-settings-v2-panel :is(input, textarea, [contenteditable="true"]) {
   user-select: text;
 }
 
-.project-settings-form {
+.project-settings-v2-form {
   display: flex;
   flex-direction: column;
   height: 100%;
   min-height: 0;
 }
 
-.project-settings-scroll {
+.project-settings-v2-scroll {
   display: flex;
   flex: 1;
   flex-direction: column;

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

@@ -7,18 +7,18 @@ import { Tabs } from "@opencode-ai/ui/tabs"
 import { Textarea } from "@opencode-ai/ui/textarea"
 import { TextInput } from "@opencode-ai/ui/text-input"
 import { For, Show, createSignal, startTransition } from "solid-js"
-import { useLanguage } from "@/runtime/i18n/language"
-import { getProjectAvatarVariant, type LocalProject } from "@/shell/state/layout"
-import { ServerConnection } from "@/runtime/server/registry"
-import { LocationProvider } from "@/workspaces/location"
-import { displayName, getProjectAvatarSource } from "@/shell/layout/helpers"
-import { createEditProjectModel } from "./project-model"
-import { ProjectSettingsExtensions } from "./project-extensions"
-import { SettingsServerDataScope } from "@/settings/server-scope"
-import "@/settings/settings.css"
-import "./project-dialog.css"
+import { useLanguage } from "@/context/language"
+import { getProjectAvatarVariant, type LocalProject } from "@/context/layout"
+import { ServerConnection } from "@/context/servers"
+import { LocationProvider } from "@/context/location"
+import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
+import { createEditProjectModel } from "./edit-project"
+import { ProjectSettingsExtensions } from "./project-settings-extensions"
+import { SettingsServerDataScope } from "./settings-server-picker"
+import "./settings-v2/settings-v2.css"
+import "./dialog-edit-project-v2.css"
 
-export function DialogEditProject(props: { project: LocalProject; server: ServerConnection.Any }) {
+export function DialogEditProjectV2(props: { project: LocalProject; server: ServerConnection.Any }) {
   return (
     <SettingsServerDataScope server={props.server}>
       <LocationProvider directory={props.project.worktree}>
@@ -46,7 +46,7 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
   )
 
   return (
-    <Dialog size="x-large" variant="settings" class="project-settings-dialog">
+    <Dialog size="x-large" variant="settings" class="project-settings-v2-dialog">
       <Tabs
         orientation="vertical"
         variant="settings"
@@ -55,7 +55,7 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
         class="project-settings-v2"
       >
         <Tabs.List>
-          <div class="project-settings-nav">
+          <div class="project-settings-v2-nav">
             <Tabs.Trigger value="general">
               <ProjectAvatar
                 fallback={projectName()}
@@ -75,9 +75,9 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
           </div>
         </Tabs.List>
 
-        <Tabs.Content value="general" class="project-settings-panel">
-          <form onSubmit={model.submit} class="project-settings-form">
-            <div class="project-settings-scroll">
+        <Tabs.Content value="general" class="project-settings-v2-panel">
+          <form onSubmit={model.submit} class="project-settings-v2-form">
+            <div class="project-settings-v2-scroll">
               <div class="project-settings-page-header">
                 <h2>{language.t("dialog.project.edit.title")}</h2>
                 <span>{language.t("project.settings.general.description")}</span>
@@ -189,9 +189,9 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
           </form>
         </Tabs.Content>
 
-        <Tabs.Content value="scripts" class="project-settings-panel">
-          <form onSubmit={model.submit} class="project-settings-form">
-            <div class="project-settings-scroll">
+        <Tabs.Content value="scripts" class="project-settings-v2-panel">
+          <form onSubmit={model.submit} class="project-settings-v2-form">
+            <div class="project-settings-v2-scroll">
               <div class="project-settings-page-header">
                 <h2>{language.t("project.settings.scripts")}</h2>
                 <span>{language.t("project.settings.scripts.description")}</span>
@@ -213,7 +213,7 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
           </form>
         </Tabs.Content>
 
-        <Tabs.Content value="extensions" class="project-settings-panel">
+        <Tabs.Content value="extensions" class="project-settings-v2-panel">
           <ProjectSettingsExtensions />
         </Tabs.Content>
       </Tabs>

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

@@ -1,18 +1,18 @@
 import { Component, createMemo } from "solid-js"
 import { useNavigate, useParams } from "@solidjs/router"
-import { useData } from "@/runtime/server/current"
+import { useData } from "@/context/server"
 import { useComposerState } from "@/composer/persistence"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog, DialogBody, DialogHeader, DialogTitle } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
-import { showToast } from "@/shell/notifications/toast"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useServerSDK } from "@/runtime/server/client"
+import { showToast } from "@/utils/toast"
+import { useLanguage } from "@/context/language"
+import { useServerSDK } from "@/context/server-sdk"
 import { base64Encode } from "@opencode-ai/util/encode"
-import { extractPromptComments, extractPromptFromMessage } from "@/composer/prompt"
-import { useWorkspaceLocation } from "@/workspaces/location"
-import { useServer } from "@/runtime/server/current"
-import { sessionHref } from "@/shell/routes/session"
+import { extractPromptComments, extractPromptFromMessage } from "@/utils/prompt"
+import { useWorkspaceLocation } from "@/context/location"
+import { useServer } from "@/context/server"
+import { sessionHref } from "@/utils/session-route"
 
 interface ForkableMessage {
   id: string

packages/app/src/components/dialog-manage-models.tsx

@@ -7,15 +7,15 @@ import { Switch } from "@opencode-ai/ui/switch"
 import { TextInput } from "@opencode-ai/ui/text-input"
 import { useFilteredList } from "@opencode-ai/ui/hooks"
 import { For, Show, type Component } from "solid-js"
-import { useLocal } from "@/providers/models/selection"
-import { popularProviders } from "@/providers/catalog/providers"
-import { useLanguage } from "@/runtime/i18n/language"
+import { useLocal } from "@/context/local"
+import { popularProviders } from "@/hooks/use-providers"
+import { useLanguage } from "@/context/language"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { DialogConnectProvider } from "@/providers/connect/dialog"
-import { decode64 } from "@/runtime/persistence/base64"
-import { SettingsList } from "@/settings/list"
-import { SettingsRow } from "@/settings/row"
-import "@/settings/settings.css"
+import { DialogConnectProvider } from "./dialog-connect-provider"
+import { decode64 } from "@/utils/base64"
+import { SettingsListV2 } from "./settings-v2/parts/list"
+import { SettingsRowV2 } from "./settings-v2/parts/row"
+import "./settings-v2/settings-v2.css"
 
 type ModelItem = ReturnType<ReturnType<typeof useLocal>["model"]["list"]>[number]
 
@@ -57,7 +57,7 @@ export const DialogManageModels: Component = () => {
   })
 
   return (
-    <Dialog size="large" variant="settings" class="settings-manage-models-dialog">
+    <Dialog size="large" variant="settings" class="settings-v2-manage-models-dialog">
       <DialogHeader hideClose={true} closeLabel={language.t("common.close")}>
         <DialogTitleGroup
           title={language.t("dialog.model.manage")}
@@ -89,7 +89,7 @@ export const DialogManageModels: Component = () => {
                 type="button"
                 variant="ghost-muted"
                 size="small"
-                class="settings-tab-search-clear"
+                class="settings-v2-tab-search-clear"
                 icon={<Icon name="close" size="large" class="text-v2-icon-icon-muted" />}
                 onClick={() => list.clear()}
                 aria-label={language.t("common.clear")}
@@ -98,11 +98,11 @@ export const DialogManageModels: Component = () => {
           </div>
         </div>
         <div data-slot="manage-models-scroll" class="relative min-h-0 flex-1">
-          <div class="settings-panel settings-models h-full px-4 pt-4 pb-4">
+          <div class="settings-v2-panel settings-v2-models h-full px-4 pt-4 pb-4">
             <Show
               when={!list.grouped.loading}
               fallback={
-                <div class="settings-models-status">
+                <div class="settings-v2-models-status">
                   {language.t("common.loading")}
                   {language.t("common.loading.ellipsis")}
                 </div>
@@ -111,21 +111,21 @@ export const DialogManageModels: Component = () => {
               <Show
                 when={list.flat().length > 0}
                 fallback={
-                  <div class="settings-models-status">
+                  <div class="settings-v2-models-status">
                     <span>{language.t("dialog.model.empty")}</span>
                     <Show when={list.filter()}>
-                      <span class="settings-models-status-filter">&quot;{list.filter()}&quot;</span>
+                      <span class="settings-v2-models-status-filter">&quot;{list.filter()}&quot;</span>
                     </Show>
                   </div>
                 }
               >
                 <For each={list.grouped.latest}>
                   {(group) => (
-                    <div class="settings-section" data-component="settings-models-provider">
-                      <div class="settings-models-group-header justify-between">
+                    <div class="settings-v2-section" data-component="settings-models-provider">
+                      <div class="settings-v2-models-group-header justify-between">
                         <div class="flex min-w-0 items-center gap-2">
                           <ProviderIcon id={group.category} width={16} height={16} class="ml-4 shrink-0" />
-                          <h3 class="settings-section-title">{group.items[0].provider.name}</h3>
+                          <h3 class="settings-v2-section-title">{group.items[0].provider.name}</h3>
                         </div>
                         <div>
                           <Switch
@@ -138,10 +138,10 @@ export const DialogManageModels: Component = () => {
                           </Switch>
                         </div>
                       </div>
-                      <SettingsList>
+                      <SettingsListV2>
                         <For each={group.items}>
                           {(item) => (
-                            <SettingsRow title={item.name} description="">
+                            <SettingsRowV2 title={item.name} description="">
                               <div>
                                 <Switch
                                   checked={local.model.visible({ modelID: item.id, providerID: item.provider.id })}
@@ -151,10 +151,10 @@ export const DialogManageModels: Component = () => {
                                   {item.name}
                                 </Switch>
                               </div>
-                            </SettingsRow>
+                            </SettingsRowV2>
                           )}
                         </For>
-                      </SettingsList>
+                      </SettingsListV2>
                     </div>
                   )}
                 </For>

packages/app/src/components/dialog-release-notes.tsx

@@ -2,8 +2,8 @@ import { createSignal, Index, Show } from "solid-js"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useSettings } from "@/settings/model"
+import { useLanguage } from "@/context/language"
+import { useSettings } from "@/context/settings"
 
 export type Highlight = {
   title: string

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

@@ -1,4 +1,4 @@
-.directory-picker-body {
+.directory-picker-v2-body {
   display: flex;
   min-height: 0;
   flex: 1;
@@ -7,20 +7,20 @@
   padding: 2px 16px 0;
 }
 
-.directory-picker-path {
+.directory-picker-v2-path {
   position: relative;
   z-index: 10;
   display: flex;
   gap: 8px;
 }
 
-.directory-picker-actions {
+.directory-picker-v2-actions {
   display: flex;
   flex-shrink: 0;
   gap: 2px;
 }
 
-.directory-picker-suggestions {
+.directory-picker-v2-suggestions {
   position: absolute;
   z-index: 20;
   top: 36px;
@@ -35,7 +35,7 @@
   box-shadow: var(--v2-elevation-overlay);
 }
 
-.directory-picker-suggestions button {
+.directory-picker-v2-suggestions button {
   overflow: hidden;
   padding: 6px 8px;
   border-radius: 4px;
@@ -46,13 +46,13 @@
   white-space: nowrap;
 }
 
-.directory-picker-suggestions button:hover,
-.directory-picker-suggestions button[data-active] {
+.directory-picker-v2-suggestions button:hover,
+.directory-picker-v2-suggestions button[data-active] {
   color: var(--v2-text-text-base);
   background: var(--v2-overlay-simple-overlay-hover);
 }
 
-.directory-picker-browser {
+.directory-picker-v2-browser {
   position: relative;
   z-index: 0;
   isolation: isolate;
@@ -64,7 +64,7 @@
   background: transparent;
 }
 
-.directory-picker-tree {
+.directory-picker-v2-tree {
   display: block;
   width: 100%;
   height: 100%;
@@ -85,7 +85,7 @@
   --trees-border-radius-override: 4px;
 }
 
-.directory-picker-state {
+.directory-picker-v2-state {
   position: absolute;
   z-index: 1;
   inset: 0;
@@ -96,7 +96,7 @@
   pointer-events: none;
 }
 
-.directory-picker-selection {
+.directory-picker-v2-selection {
   overflow: hidden;
   flex-shrink: 0;
   color: var(--v2-text-text-muted);

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

@@ -5,10 +5,10 @@ import { Button } from "@opencode-ai/ui/button"
 import { TextInput } from "@opencode-ai/ui/text-input"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { createEffect, createMemo, createResource, createSignal, For, onCleanup, onMount, Show } from "solid-js"
-import { useGlobal } from "@/runtime/server/runtime"
-import { useLanguage } from "@/runtime/i18n/language"
-import { ServerConnection } from "@/runtime/server/registry"
-import type { Path } from "@/runtime/server/types"
+import { useGlobal } from "@/context/global"
+import { useLanguage } from "@/context/language"
+import { ServerConnection } from "@/context/servers"
+import type { Path } from "@/types"
 import {
   absoluteTreePath,
   activeTreeNavigation,
@@ -26,12 +26,12 @@ import {
   displayPickerPath,
   pickerParent,
   pickerRoot,
-} from "./domain"
-import "./dialog.css"
+} from "./directory-picker-domain"
+import "./dialog-select-directory-v2.css"
 import { Divider } from "@opencode-ai/ui/divider"
 import { getFilename } from "@opencode-ai/util/path"
 
-interface DirectoryPickerDialogProps {
+interface DialogSelectDirectoryV2Props {
   title?: string
   multiple?: boolean
   onSelect: (result: string | string[] | null) => void
@@ -40,7 +40,7 @@ interface DirectoryPickerDialogProps {
   start?: string
 }
 
-export function DirectoryPickerDialog(props: DirectoryPickerDialogProps) {
+export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
   const global = useGlobal()
   const { sync, sdk } = global.ensureServerCtx(props.server)
   const dialog = useDialog()
@@ -277,7 +277,7 @@ export function DirectoryPickerDialog(props: DirectoryPickerDialogProps) {
     })
     if (!container) return
     tree.render({ containerWrapper: container })
-    tree.getFileTreeContainer()?.classList.add("directory-picker-tree")
+    tree.getFileTreeContainer()?.classList.add("directory-picker-v2-tree")
   })
 
   createEffect(() => {
@@ -289,13 +289,13 @@ export function DirectoryPickerDialog(props: DirectoryPickerDialogProps) {
   onCleanup(() => tree?.cleanUp())
 
   return (
-    <Dialog size="large" class="directory-picker">
+    <Dialog size="large" class="directory-picker-v2">
       <DialogHeader>
         <DialogTitle>{props.title ?? language.t("command.project.open")}</DialogTitle>
       </DialogHeader>
       <Divider />
-      <DialogBody class="directory-picker-body pt-4!">
-        <div class="directory-picker-path" ref={pathArea}>
+      <DialogBody class="directory-picker-v2-body pt-4!">
+        <div class="directory-picker-v2-path" ref={pathArea}>
           <TextInput
             value={input()}
             autofocus
@@ -311,13 +311,13 @@ export function DirectoryPickerDialog(props: DirectoryPickerDialogProps) {
             role="combobox"
             aria-autocomplete="list"
             aria-expanded={suggestionsOpen()}
-            aria-controls="directory-picker-suggestions"
+            aria-controls="directory-picker-v2-suggestions"
             aria-activedescendant={
-              activeSuggestion() >= 0 ? `directory-picker-suggestion-${activeSuggestion()}` : undefined
+              activeSuggestion() >= 0 ? `directory-picker-v2-suggestion-${activeSuggestion()}` : undefined
             }
             onKeyDown={handleInputKey}
           />
-          <div class="directory-picker-actions">
+          <div class="directory-picker-v2-actions">
             <Button size="small" variant="ghost" onClick={() => void navigate(home())}>
               ~
             </Button>
@@ -329,11 +329,11 @@ export function DirectoryPickerDialog(props: DirectoryPickerDialogProps) {
             </Button>
           </div>
           <Show when={suggestionsOpen() && currentSuggestions().length > 0}>
-            <div id="directory-picker-suggestions" role="listbox" class="directory-picker-suggestions">
+            <div id="directory-picker-v2-suggestions" role="listbox" class="directory-picker-v2-suggestions">
               <For each={currentSuggestions()}>
                 {(suggestion, index) => (
                   <button
-                    id={`directory-picker-suggestion-${index()}`}
+                    id={`directory-picker-v2-suggestion-${index()}`}
                     data-directory-path={suggestion.absolute}
                     role="option"
                     aria-selected={index() === activeSuggestion()}
@@ -350,7 +350,7 @@ export function DirectoryPickerDialog(props: DirectoryPickerDialogProps) {
           </Show>
         </div>
         <div
-          class="directory-picker-browser"
+          class="directory-picker-v2-browser"
           ref={container}
           onWheel={(event) => {
             const scroller = tree
@@ -370,13 +370,13 @@ export function DirectoryPickerDialog(props: DirectoryPickerDialogProps) {
           }}
         >
           <Show when={loading()}>
-            <div class="directory-picker-state">{language.t("common.loading")}</div>
+            <div class="directory-picker-v2-state">{language.t("common.loading")}</div>
           </Show>
           <Show when={!loading() && error()}>
-            <div class="directory-picker-state">{language.t("dialog.directory.readError")}</div>
+            <div class="directory-picker-v2-state">{language.t("dialog.directory.readError")}</div>
           </Show>
         </div>
-        <div class="directory-picker-selection">{policy.result(root(), selected(), rootValid())}</div>
+        <div class="directory-picker-v2-selection">{policy.result(root(), selected(), rootValid())}</div>
       </DialogBody>
       <DialogFooter>
         <Button variant="neutral" onClick={() => dialog.close()}>

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

@@ -1,11 +1,11 @@
 import { Component, createMemo, Show } from "solid-js"
-import { useData } from "@/runtime/server/current"
-import { useWorkspaceLocation } from "@/workspaces/location"
+import { useData } from "@/context/server"
+import { useWorkspaceLocation } from "@/context/location"
 import { Dialog, DialogBody, DialogHeader, DialogTitleGroup } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
 import { Switch } from "@opencode-ai/ui/switch"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useMcpToggle } from "@/providers/connect/mcp"
+import { useLanguage } from "@/context/language"
+import { useMcpToggle } from "@/context/mcp"
 
 const statusLabels = {
   connected: "mcp.status.connected",

packages/app/src/components/dialog-select-model-search.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { matchesModelSearch } from "./search"
+import { matchesModelSearch } from "./dialog-select-model-search"
 
 describe("matchesModelSearch", () => {
   test("matches model names across separators", () => {

packages/app/src/components/dialog-select-model-unpaid.stories.tsx

@@ -2,7 +2,7 @@
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { createSignal, onMount } from "solid-js"
-import { DialogSelectModelUnpaid } from "./unpaid"
+import { DialogSelectModelUnpaid } from "./dialog-select-model-unpaid"
 
 const names = [
   "MiMo V2.5 Free",

packages/app/src/components/dialog-select-model-unpaid.tsx

@@ -6,11 +6,11 @@ import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useTheme } from "@opencode-ai/ui/theme"
 import { createMemo, onCleanup, onMount, type Component, For, Show } from "solid-js"
-import { useLocal } from "@/providers/models/selection"
-import { useIntegrations } from "@/providers/catalog/integrations"
-import { decode64 } from "@/runtime/persistence/base64"
-import { useLanguage } from "@/runtime/i18n/language"
-import { ModelTooltip } from "./tooltip"
+import { useLocal } from "@/context/local"
+import { useIntegrations } from "@/hooks/use-integrations"
+import { decode64 } from "@/utils/base64"
+import { useLanguage } from "@/context/language"
+import { ModelTooltip } from "./model-tooltip"
 
 type ModelState = ReturnType<typeof useLocal>["model"]
 const featuredProviders = ["opencode", "opencode-go", "openai", "anthropic", "google", "github-copilot"]
@@ -34,7 +34,7 @@ export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props
   const freeModels = createMemo(() => model.list().filter(isFree))
 
   const openProviders = (provider?: string) => {
-    void import("@/providers/connect/dialog").then((x) => {
+    void import("./dialog-connect-provider").then((x) => {
       const controller = x.useProviderConnectController()
       controller.select(provider)
       void dialog.show(() => <x.DialogConnectProvider controller={controller} directory={directory()} />)

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

@@ -1,9 +1,9 @@
-import { Popover } from "@kobalte/core/popover"
+import { Popover as Kobalte } from "@kobalte/core/popover"
 import { Component, ComponentProps, createEffect, createMemo, For, JSX, Show } from "solid-js"
 import { createStore } from "solid-js/store"
-import { useLocal } from "@/providers/models/selection"
+import { useLocal } from "@/context/local"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { popularProviders } from "@/providers/catalog/providers"
+import { popularProviders } from "@/hooks/use-providers"
 import { Button } from "@opencode-ai/ui/button"
 import { Badge } from "@opencode-ai/ui/badge"
 import { Dialog, DialogBody, DialogHeader, DialogTitle } from "@opencode-ai/ui/dialog"
@@ -13,13 +13,13 @@ import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import { List } from "@opencode-ai/ui/list"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { Menu } from "@opencode-ai/ui/menu"
-import { ModelTooltip } from "./tooltip"
-import { useLanguage } from "@/runtime/i18n/language"
-import { decode64 } from "@/runtime/persistence/base64"
-import { handleDocumentSearchKeydown } from "@/shell/commands/search-keydown"
-import { createMenuDismissController } from "@/shell/commands/menu-dismiss"
+import { ModelTooltip } from "./model-tooltip"
+import { useLanguage } from "@/context/language"
+import { decode64 } from "@/utils/base64"
+import { handleDocumentSearchKeydown } from "@/utils/search-keydown"
+import { createMenuDismissController } from "@/utils/menu-dismiss-controller"
 import { createEventListener } from "@solid-primitives/event-listener"
-import { matchesModelSearch } from "./search"
+import { matchesModelSearch } from "./dialog-select-model-search"
 
 const isFree = (provider: string, cost: { input: number } | undefined) =>
   provider === "opencode" && (!cost || cost.input === 0)
@@ -111,7 +111,7 @@ const ModelList: Component<{
   )
 }
 
-type ModelSelectorTriggerProps = Omit<ComponentProps<typeof Popover.Trigger>, "as" | "ref">
+type ModelSelectorTriggerProps = Omit<ComponentProps<typeof Kobalte.Trigger>, "as" | "ref">
 type ModelSelectorTrigger = (props: ModelSelectorTriggerProps) => JSX.Element
 export function ModelSelectorPopover(props: {
   provider?: string
@@ -134,7 +134,7 @@ export function ModelSelectorPopover(props: {
       current={controller.current()}
       select={controller.select}
       onManage={() => {
-        void import("./manage").then((module) => {
+        void import("./dialog-manage-models").then((module) => {
           void dialog.show(() => <module.DialogManageModels />)
         })
       }}
@@ -419,13 +419,13 @@ export const DialogSelectModel: Component<{ provider?: string; model?: ModelStat
   const directory = () => decode64(local.slug())
 
   const provider = () => {
-    void import("@/providers/connect/dialog").then((x) => {
+    void import("./dialog-connect-provider").then((x) => {
       void dialog.show(() => <x.DialogConnectProvider directory={directory()} />)
     })
   }
 
   const manage = () => {
-    void import("./manage").then((x) => {
+    void import("./dialog-manage-models").then((x) => {
       dialog.show(() => <x.DialogManageModels />)
     })
   }

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

@@ -0,0 +1,261 @@
+import { Button } from "@opencode-ai/ui/button"
+import { Menu } from "@opencode-ai/ui/menu"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { List } from "@opencode-ai/ui/list"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { Show } from "solid-js"
+import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row"
+import { useLanguage } from "@/context/language"
+import { ServerConnection } from "@/context/servers"
+import { ServerCollectionController } from "@/components/server/server-management-controller"
+
+type ServerConnectionFormController = {
+  state: {
+    adding: () => boolean
+    busy: () => boolean
+    value: () => string
+    name: () => string
+    username: () => string
+    password: () => string
+    error: () => string
+    status: () => boolean | undefined
+  }
+  change: {
+    value: (value: string) => void
+    name: (value: string) => void
+    username: (value: string) => void
+    password: (value: string) => void
+  }
+  reset: () => void
+  submit: () => void
+}
+
+interface ServerFormProps {
+  value: string
+  name: string
+  username: string
+  password: string
+  placeholder: string
+  busy: boolean
+  error: string
+  status: boolean | undefined
+  onChange: (value: string) => void
+  onNameChange: (value: string) => void
+  onUsernameChange: (value: string) => void
+  onPasswordChange: (value: string) => void
+  onSubmit: () => void
+  onBack: () => void
+}
+
+function ServerForm(props: ServerFormProps) {
+  const language = useLanguage()
+  const keyDown = (event: KeyboardEvent) => {
+    event.stopPropagation()
+    if (event.key === "Escape") {
+      event.preventDefault()
+      props.onBack()
+      return
+    }
+    if (event.key !== "Enter" || event.isComposing) return
+    event.preventDefault()
+    props.onSubmit()
+  }
+
+  return (
+    <div>
+      <div class="bg-surface-base rounded-md p-5 flex flex-col gap-3">
+        <div class="flex-1 min-w-0 [&_[data-slot=input-wrapper]]:relative">
+          <TextField
+            type="text"
+            label={language.t("dialog.server.add.url")}
+            placeholder={props.placeholder}
+            value={props.value}
+            autofocus
+            validationState={props.error ? "invalid" : "valid"}
+            error={props.error}
+            disabled={props.busy}
+            onChange={props.onChange}
+            onKeyDown={keyDown}
+          />
+        </div>
+        <TextField
+          type="text"
+          label={language.t("dialog.server.add.name")}
+          placeholder={language.t("dialog.server.add.namePlaceholder")}
+          defaultValue={props.name}
+          disabled={props.busy}
+          onChange={props.onNameChange}
+          onKeyDown={keyDown}
+        />
+        <div class="grid grid-cols-2 gap-2 min-w-0">
+          <TextField
+            type="text"
+            label={language.t("dialog.server.add.username")}
+            placeholder={language.t("dialog.server.add.usernamePlaceholder")}
+            defaultValue={props.username}
+            disabled={props.busy}
+            onChange={props.onUsernameChange}
+            onKeyDown={keyDown}
+          />
+          <TextField
+            type="password"
+            label={language.t("dialog.server.add.password")}
+            placeholder={language.t("dialog.server.add.passwordPlaceholder")}
+            defaultValue={props.password}
+            disabled={props.busy}
+            onChange={props.onPasswordChange}
+            onKeyDown={keyDown}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function ServerConnectionList(props: {
+  domain: ServerCollectionController
+  onAdd: () => void
+  onEdit: (server: ServerConnection.Http) => void
+}) {
+  const language = useLanguage()
+
+  return (
+    <div class="flex flex-1 min-h-0 flex-col gap-4">
+      <List
+        class="flex-1 min-h-0 [&_[data-slot=list-search-wrapper]]:w-full [&_[data-slot=list-scroll]]:flex-1 [&_[data-slot=list-scroll]]:overflow-y-auto [&_[data-slot=list-items]]:bg-surface-base [&_[data-slot=list-items]]:rounded-md [&_[data-slot=list-item]]:min-h-14 [&_[data-slot=list-item]]:p-3 [&_[data-slot=list-item]]:!bg-transparent"
+        search={{
+          placeholder: language.t("dialog.server.search.placeholder"),
+          autofocus: false,
+        }}
+        noInitialSelection
+        emptyMessage={language.t("dialog.server.empty")}
+        items={props.domain.collection.items}
+        key={(x) => x.http.url}
+        divider={true}
+      >
+        {(i) => {
+          const key = ServerConnection.key(i)
+          return (
+            <div class="flex items-center gap-3 min-w-0 flex-1 w-full group/item">
+              <div class="flex flex-col h-full items-center w-5">
+                <ServerHealthIndicator health={props.domain.collection.health()[key]} />
+              </div>
+              <ServerRow
+                conn={i}
+                dimmed={props.domain.collection.health()[key]?.healthy === false}
+                status={props.domain.collection.health()[key]}
+                class="flex items-center gap-3 min-w-0 flex-1"
+                badge={
+                  <Show when={props.domain.defaults.key() === ServerConnection.key(i)}>
+                    <span class="text-text-base bg-surface-base text-14-regular px-1.5 rounded-xs">
+                      {language.t("dialog.server.status.default")}
+                    </span>
+                  </Show>
+                }
+                showCredentials
+              />
+              <div class="flex items-center justify-center gap-4 pl-4">
+                <Show when={i.type === "http"}>
+                  <Menu appearance="standard">
+                    <Menu.Trigger
+                      as={IconButton}
+                      icon={<Icon name="dot-grid" />}
+                      variant="ghost"
+                      class="shrink-0 size-8 hover:bg-surface-base-hover data-[expanded]:bg-surface-base-active"
+                      onClick={(e: MouseEvent) => e.stopPropagation()}
+                      onPointerDown={(e: PointerEvent) => e.stopPropagation()}
+                    />
+                    <Menu.Portal>
+                      <Menu.Content class="mt-1">
+                        <Menu.Item
+                          onSelect={() => {
+                            if (i.type !== "http") return
+                            props.onEdit(i)
+                          }}
+                        >
+                          {language.t("dialog.server.menu.edit")}
+                        </Menu.Item>
+                        <Show when={props.domain.defaults.available() && props.domain.defaults.key() !== key}>
+                          <Menu.Item onSelect={() => props.domain.defaults.set(key)}>
+                            {language.t("dialog.server.menu.default")}
+                          </Menu.Item>
+                        </Show>
+                        <Show when={props.domain.defaults.available() && props.domain.defaults.key() === key}>
+                          <Menu.Item onSelect={() => props.domain.defaults.set(null)}>
+                            {language.t("dialog.server.menu.defaultRemove")}
+                          </Menu.Item>
+                        </Show>
+                        <Show when={props.domain.connection.canRemove(key)}>
+                          <Menu.Separator />
+                          <Menu.Item
+                            onSelect={() => props.domain.connection.remove(key)}
+                            class="text-text-on-critical-base hover:bg-surface-critical-weak"
+                          >
+                            {language.t("dialog.server.menu.delete")}
+                          </Menu.Item>
+                        </Show>
+                      </Menu.Content>
+                    </Menu.Portal>
+                  </Menu>
+                </Show>
+              </div>
+            </div>
+          )
+        }}
+      </List>
+
+      <div class="shrink-0 pb-5">
+        <Button
+          variant="neutral"
+          icon="plus-small"
+          size="large"
+          onClick={props.onAdd}
+          class="py-1.5 pl-1.5 pr-3 flex items-center gap-1.5"
+        >
+          {language.t("dialog.server.add.button")}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export function ServerConnectionForm(props: { form: ServerConnectionFormController }) {
+  const language = useLanguage()
+
+  return (
+    <div class="flex flex-1 min-h-0 flex-col gap-4">
+      <ServerForm
+        value={props.form.state.value()}
+        name={props.form.state.name()}
+        username={props.form.state.username()}
+        password={props.form.state.password()}
+        placeholder={language.t("dialog.server.add.placeholder")}
+        busy={props.form.state.busy()}
+        error={props.form.state.error()}
+        status={props.form.state.status()}
+        onChange={props.form.change.value}
+        onNameChange={props.form.change.name}
+        onUsernameChange={props.form.change.username}
+        onPasswordChange={props.form.change.password}
+        onSubmit={props.form.submit}
+        onBack={props.form.reset}
+      />
+      <div class="shrink-0 pb-5">
+        <Button
+          variant="contrast"
+          size="large"
+          onClick={props.form.submit}
+          disabled={props.form.state.busy()}
+          class="px-3 py-1.5"
+        >
+          {props.form.state.busy()
+            ? language.t("dialog.server.add.checking")
+            : props.form.state.adding()
+              ? language.t("dialog.server.add.button")
+              : language.t("common.save")}
+        </Button>
+      </div>
+    </div>
+  )
+}

packages/app/src/components/dialog-usage-exceeded.tsx

@@ -1,5 +1,5 @@
-import { usePlatform } from "@/runtime/platform/platform"
-import { useLanguage } from "@/runtime/i18n/language"
+import { usePlatform } from "@/context/platform"
+import { useLanguage } from "@/context/language"
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog, DialogBody, DialogHeader, DialogTitleGroup } from "@opencode-ai/ui/dialog"

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

@@ -20,7 +20,7 @@ import {
   pickerParent,
   pickerRoot,
   pickerAbsoluteInput,
-} from "./domain"
+} from "./directory-picker-domain"
 
 test("maps server directory entries into Pierre paths", () => {
   expect(

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

@@ -247,7 +247,7 @@ export function nativePickerPath(path: string) {
 }
 import { getFilename } from "@opencode-ai/util/path"
 import fuzzysort from "fuzzysort"
-import { ServerSDK } from "@/runtime/server/client"
+import { ServerSDK } from "@/context/server-sdk"
 
 export function cleanPickerInput(value: string) {
   const first = (value ?? "").split(/\r?\n/)[0] ?? ""

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

@@ -1,5 +1,5 @@
-import { ServerConnection } from "@/runtime/server/registry"
-import type { Platform } from "@/runtime/platform/platform"
+import { ServerConnection } from "@/context/servers"
+import type { Platform } from "@/context/platform"
 
 export function directoryPickerKind(platform: Platform["platform"], server: ServerConnection.Any) {
   if (platform === "desktop" && ServerConnection.local(server)) return "native" as const

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

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { directoryPickerKind } from "./policy"
+import { directoryPickerKind } from "./directory-picker-policy"
 
 const local = {
   type: "sidecar",

packages/app/src/components/directory-picker.tsx

@@ -1,11 +1,11 @@
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { ServerConnection } from "@/runtime/server/registry"
-import { usePlatform } from "@/runtime/platform/platform"
+import { ServerConnection } from "@/context/servers"
+import { usePlatform } from "@/context/platform"
 import { lazy } from "solid-js"
-import { directoryPickerKind } from "./policy"
+import { directoryPickerKind } from "./directory-picker-policy"
 
-const DirectoryPickerDialog = lazy(() =>
-  import("./dialog").then((module) => ({ default: module.DirectoryPickerDialog })),
+const DialogSelectDirectoryV2 = lazy(() =>
+  import("./dialog-select-directory-v2").then((module) => ({ default: module.DialogSelectDirectoryV2 })),
 )
 
 type DirectoryPickerInput = {
@@ -33,6 +33,6 @@ export function useDirectoryPicker() {
     const cancel = () => {
       if (!selected) input.onSelect(null)
     }
-    dialog.show(() => <DirectoryPickerDialog {...input} onSelect={onSelect} />, cancel)
+    dialog.show(() => <DialogSelectDirectoryV2 {...input} onSelect={onSelect} />, cancel)
   }
 }

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

@@ -1,12 +1,12 @@
 import { getFilename } from "@opencode-ai/util/path"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useMutation } from "@tanstack/solid-query"
-import { normalizeProjectInfo } from "@/runtime/server/global-sync/utils"
+import { normalizeProjectInfo } from "@/context/global-sync/utils"
 import { createMemo } from "solid-js"
 import { createStore } from "solid-js/store"
-import { useGlobal } from "@/runtime/server/runtime"
-import { type LocalProject } from "@/shell/state/layout"
-import { ServerConnection } from "@/runtime/server/registry"
+import { useGlobal } from "@/context/global"
+import { type LocalProject } from "@/context/layout"
+import { ServerConnection } from "@/context/servers"
 
 export function createEditProjectModel(props: { project: LocalProject; server: ServerConnection.Any }) {
   const supported = !props.project.id || props.project.id === "global"

packages/app/src/components/file-tree-v2-model.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test"
 import { buildFileTreeV2Model, flattenFileTreeV2, flattenLiveFileTreeV2 } from "./file-tree-v2-model"
-import type { FileNode } from "@/runtime/server/types"
+import type { FileNode } from "@/types"
 
 describe("buildFileTreeV2Model", () => {
   test("builds a sorted tree and flattens expanded directories", () => {

packages/app/src/components/file-tree-v2-model.ts

@@ -1,4 +1,4 @@
-import type { FileNode } from "@/runtime/server/types"
+import type { FileNode } from "@/types"
 
 export type FileTreeV2Model = {
   children: ReadonlyMap<string, readonly FileTreeV2Node[]>

packages/app/src/components/file-tree-v2.tsx

@@ -1,4 +1,4 @@
-import { useFile } from "@/workspaces/files/model"
+import { useFile } from "@/context/file"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import "@opencode-ai/ui/file-tree.css"
 import {
@@ -12,9 +12,9 @@ import {
   type ParentProps,
 } from "solid-js"
 import { Dynamic } from "solid-js/web"
-import type { FileNode } from "@/runtime/server/types"
+import type { FileNode } from "@/types"
 import { Icon } from "@opencode-ai/ui/icon"
-import { pathToFileUrl, withFileDragImage, type Kind } from "@/session/files/file-tree"
+import { pathToFileUrl, withFileDragImage, type Kind } from "@/components/file-tree"
 import { createVirtualizer, defaultRangeExtractor } from "@tanstack/solid-virtual"
 import {
   buildFileTreeV2Model,
@@ -22,10 +22,10 @@ import {
   flattenLiveFileTreeV2,
   normalizeFileTreeV2Path,
   type FileTreeV2Node,
-} from "@/session/files/file-tree-v2-model"
-import { virtualScrollElement } from "@/session/files/virtual-scroll"
+} from "@/components/file-tree-v2-model"
+import { virtualScrollElement } from "@/components/virtual-scroll-element"
 
-export type { Kind } from "@/session/files/file-tree"
+export type { Kind } from "@/components/file-tree"
 
 const INDENT_STEP = 16
 
@@ -100,11 +100,7 @@ const FileTreeNodeV2 = (
     >
       {local.children}
       <span class="flex-1 min-w-0 text-start text-12-medium whitespace-nowrap truncate">
-        <bdi dir="auto">
-          {local.node.type === "directory"
-            ? normalizeFileTreeV2Path(local.node.path).split("/").at(-1)
-            : local.node.name}
-        </bdi>
+        <bdi dir="auto">{local.node.name}</bdi>
       </span>
       {(() => {
         const value = kind()

packages/app/src/components/file-tree.test.ts

@@ -11,7 +11,7 @@ beforeAll(async () => {
     useLocation: () => ({}),
     useSearchParams: () => [{}, () => undefined],
   }))
-  mock.module("@/workspaces/files/model", () => ({
+  mock.module("@/context/file", () => ({
     useFile: () => ({
       tree: {
         state: () => undefined,

packages/app/src/components/file-tree.tsx

@@ -1,5 +1,5 @@
-import { useFile } from "@/workspaces/files/model"
-import { encodeFilePath } from "@/workspaces/files/path"
+import { useFile } from "@/context/file"
+import { encodeFilePath } from "@/context/file/path"
 import { Collapsible } from "@opencode-ai/ui/collapsible"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { Icon } from "@opencode-ai/ui/icon"
@@ -17,7 +17,7 @@ import {
   type ParentProps,
 } from "solid-js"
 import { Dynamic } from "solid-js/web"
-import type { FileNode } from "@/runtime/server/types"
+import type { FileNode } from "@/types"
 
 const MAX_DEPTH = 128
 

packages/app/src/components/model-tooltip.tsx

@@ -1,5 +1,5 @@
 import { Show, type Component, type JSX } from "solid-js"
-import { useLanguage } from "@/runtime/i18n/language"
+import { useLanguage } from "@/context/language"
 
 type InputKey = "text" | "image" | "audio" | "video" | "pdf"
 type InputMap = Record<InputKey, boolean>

packages/app/src/components/project-settings-extensions.tsx

@@ -1,14 +1,14 @@
 import { Icon } from "@opencode-ai/ui/icon"
 import { Switch } from "@opencode-ai/ui/switch"
 import { Tabs } from "@opencode-ai/ui/tabs"
-import { type Component, For, Show, createEffect, createMemo, createResource, createSignal, type JSX } from "solid-js"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useMcpToggle } from "@/providers/connect/mcp"
-import { useWorkspaceLocation } from "@/workspaces/location"
-import { useServerSDK } from "@/runtime/server/client"
-import { useData } from "@/runtime/server/current"
-import { pluginLabels } from "@/providers/catalog/plugin"
-import { ExternalLink } from "@/runtime/platform/external-link"
+import { type Component, For, Show, createEffect, createMemo, createResource, createSignal } from "solid-js"
+import { useLanguage } from "@/context/language"
+import { useMcpToggle } from "@/context/mcp"
+import { useWorkspaceLocation } from "@/context/location"
+import { useServerSDK } from "@/context/server-sdk"
+import { useData } from "@/context/server"
+import { pluginLabel } from "@/utils/plugin"
+import { ExternalLink } from "./external-link"
 
 type SkillItem = {
   name: string
@@ -17,27 +17,27 @@ type SkillItem = {
 
 const skillKey = (item: SkillItem) => `${item.name}\n${item.location}`
 
-const ExtensionCard: Component<{ children: JSX.Element }> = (props) => (
-  <div class="project-settings-extension-card">{props.children}</div>
+const ExtensionCard: Component<{ children: unknown }> = (props) => (
+  <div class="project-settings-extension-card">{props.children as any}</div>
 )
 
 const ExtensionRow: Component<{
   icon: "mcp" | "cube" | "post-skill"
   name: string
-  children?: JSX.Element
+  children?: unknown
 }> = (props) => (
   <div class="project-settings-extension-row">
     <div class="project-settings-extension-row-main">
       <Icon name={props.icon} class="project-settings-extension-row-icon" />
       <span class="project-settings-extension-row-name">{props.name}</span>
     </div>
-    {props.children}
+    {props.children as any}
   </div>
 )
 
 const SharedSection: Component<{
   count: number
-  children: JSX.Element
+  children: unknown
 }> = (props) => {
   const language = useLanguage()
   const [open, setOpen] = createSignal(false)
@@ -102,10 +102,10 @@ export const ProjectSettingsExtensions: Component = () => {
     () => (serverSDK.connection.status() === "connected" ? directorySDK().directory : undefined),
     (directory) => serverSDK.api.plugin.list({ location: { directory } }).then((result) => result.data),
   )
-  const globalPlugins = createMemo(() => pluginLabels(globalPluginList.latest ?? []))
+  const globalPlugins = createMemo(() => (globalPluginList.latest ?? []).map(pluginLabel))
   const projectPlugins = createMemo(() => {
     const shared = new Set(globalPlugins())
-    return pluginLabels(projectPluginList.latest ?? []).filter((name) => !shared.has(name))
+    return (projectPluginList.latest ?? []).map(pluginLabel).filter((name) => !shared.has(name))
   })
 
   const serverSkills = createMemo(() => data.location.skill.list() ?? [])

packages/app/src/components/prompt-project-selector.tsx

@@ -12,12 +12,12 @@ import { createStore } from "solid-js/store"
 import { Menu } from "@opencode-ai/ui/menu"
 import { Icon } from "@opencode-ai/ui/icon"
 import { ProjectAvatar } from "@opencode-ai/ui/project-avatar"
-import { getProjectAvatarVariant } from "@/shell/state/layout"
-import { useLanguage } from "@/runtime/i18n/language"
-import { displayName, getProjectAvatarSource } from "@/shell/layout/helpers"
-import { pathKey } from "@/workspaces/path-key"
-import { handleDocumentSearchKeydown } from "@/shell/commands/search-keydown"
-import { createMenuDismissController } from "@/shell/commands/menu-dismiss"
+import { getProjectAvatarVariant } from "@/context/layout"
+import { useLanguage } from "@/context/language"
+import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
+import { pathKey } from "@/utils/path-key"
+import { handleDocumentSearchKeydown } from "@/utils/search-keydown"
+import { createMenuDismissController } from "@/utils/menu-dismiss-controller"
 
 export type PromptProject = {
   name?: string
@@ -277,6 +277,7 @@ export function PromptProjectSelector(props: {
 
   return (
     <Menu
+      appearance="standard"
       open={triggerReady() && props.controller.open()}
       placement={props.placement ?? "bottom"}
       gutter={4}
@@ -291,13 +292,13 @@ export function PromptProjectSelector(props: {
         <Menu.Content
           ref={contentRef}
           id="prompt-project-menu"
-          class="w-[243px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 shadow-[var(--v2-elevation-floating)] focus:outline-none [&[data-closed]]:!animate-none"
+          class="w-[243px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 p-0 shadow-[var(--v2-elevation-floating)] focus:outline-none [&[data-closed]]:!animate-none"
           onOpenAutoFocus={(event) => event.preventDefault()}
           onPointerDownOutside={dismiss.preventTriggerRestore}
           onFocusOutside={dismiss.preventTriggerRestore}
           onCloseAutoFocus={dismiss.onCloseAutoFocus}
         >
-          <div class="flex flex-col">
+          <div class="flex flex-col p-0.5">
             <div class="flex h-7 items-center gap-2 rounded-sm pl-3 pr-2.5 text-v2-icon-icon-muted">
               <Icon name="magnifying-glass" size="small" class="shrink-0" />
               <input
@@ -396,7 +397,7 @@ export function PromptProjectSelector(props: {
             </div>
           </div>
           <div class="h-px bg-v2-border-border-muted" />
-          <div class="flex flex-col">
+          <div class="flex flex-col p-0.5">
             <Show
               when={props.controller.servers().length > 1}
               fallback={
@@ -418,10 +419,12 @@ export function PromptProjectSelector(props: {
                   onMouseEnter={() => props.controller.setActive(props.controller.actionKey())}
                 >
                   <Icon name="plus" size="small" />
-                  <span class="min-w-0 flex-1 truncate leading-5">{props.controller.labels.add()}</span>
+                  <span class="min-w-0 flex-1 truncate leading-5">
+                    {props.controller.labels.add()}
+                  </span>
                 </Menu.SubTrigger>
                 <Menu.Portal>
-                  <Menu.SubContent class="min-w-[180px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 shadow-[var(--v2-elevation-floating)] focus:outline-none">
+                  <Menu.SubContent class="min-w-[180px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 p-0.5 shadow-[var(--v2-elevation-floating)] focus:outline-none">
                     <For each={props.controller.servers()}>
                       {(server) => <ServerAction server={server!} onSelect={selectAction} />}
                     </For>
@@ -507,8 +510,17 @@ function ProjectItem(props: {
       id={key()}
       value={key()}
       data-option-key={key()}
-      class="h-7 gap-2 rounded-sm px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base [font-family:var(--v2-font-family-sans)] data-[highlighted]:!bg-v2-overlay-simple-overlay-hover"
+      class="h-7 gap-2 rounded-sm px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base data-[highlighted]:!bg-v2-overlay-simple-overlay-hover"
       classList={{ "!bg-v2-overlay-simple-overlay-hover": props.controller.active() === key() }}
+      style={{
+        "font-family": "var(--v2-font-family-sans)",
+        "font-size": "13px",
+        "font-weight": 440,
+        "line-height": "20px",
+        "letter-spacing": "-0.04px",
+        color: "var(--v2-text-text-base)",
+        padding: "0 12px",
+      }}
       closeOnSelect
       onMouseEnter={() => {
         props.controller.setActive(key())
@@ -539,8 +551,17 @@ function ProjectAction(props: {
     <Menu.Item
       id={key()}
       data-option-key={key()}
-      class="h-7 gap-2 rounded-sm px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base [font-family:var(--v2-font-family-sans)] data-[highlighted]:!bg-v2-overlay-simple-overlay-hover"
+      class="h-7 gap-2 rounded-sm px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base data-[highlighted]:!bg-v2-overlay-simple-overlay-hover"
       classList={{ "!bg-v2-overlay-simple-overlay-hover": props.controller.active() === key() }}
+      style={{
+        "font-family": "var(--v2-font-family-sans)",
+        "font-size": "13px",
+        "font-weight": 440,
+        "line-height": "20px",
+        "letter-spacing": "-0.04px",
+        color: "var(--v2-text-text-base)",
+        padding: "0 12px",
+      }}
       onMouseEnter={() => {
         props.controller.setActive(key())
         props.controller.focusSearch()
@@ -548,7 +569,9 @@ function ProjectAction(props: {
       onSelect={() => props.onSelect(props.server)}
     >
       <Icon name="plus" size="small" />
-      <span class="min-w-0 truncate leading-5">{props.controller.labels.add()}</span>
+      <span class="min-w-0 truncate leading-5">
+        {props.controller.labels.add()}
+      </span>
     </Menu.Item>
   )
 }

packages/app/src/components/prompt-workspace-selector.tsx

@@ -3,8 +3,8 @@ import { Menu } from "@opencode-ai/ui/menu"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { Icon } from "@opencode-ai/ui/icon"
 import { getFilename } from "@opencode-ai/util/path"
-import { useLanguage } from "@/runtime/i18n/language"
-import { sameDirectory } from "@/workspaces/paths"
+import { useLanguage } from "@/context/language"
+import { sameDirectory } from "@/utils/workspace"
 
 export function PromptWorkspaceSelector(props: {
   value: string

packages/app/src/components/provider-connection-controller.ts

@@ -1,7 +1,7 @@
 import type { FormAnswer, IntegrationMethod, IntegrationOauthConnectOutput } from "@opencode-ai/client/promise"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useServerSDK } from "@/runtime/server/client"
-import { useData } from "@/runtime/server/current"
+import { useLanguage } from "@/context/language"
+import { useServerSDK } from "@/context/server-sdk"
+import { useData } from "@/context/server"
 import { createEffect, createMemo, createResource, onCleanup } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 

packages/app/src/components/server/server-management-controller.ts

@@ -1,13 +1,13 @@
 import { useNavigate } from "@solidjs/router"
 import { createMemo, createResource } from "solid-js"
-import { useGlobal } from "@/runtime/server/runtime"
-import { useLanguage } from "@/runtime/i18n/language"
-import { usePlatform } from "@/runtime/platform/platform"
-import { ServerConnection, useServers } from "@/runtime/server/registry"
-import { useSettings } from "@/settings/model"
-import { useTabs } from "@/shell/tabs/tabs"
-import { type ServerHealth } from "@/runtime/server/health"
-import { showToast } from "@/shell/notifications/toast"
+import { useGlobal } from "@/context/global"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { ServerConnection, useServers } from "@/context/servers"
+import { useSettings } from "@/context/settings"
+import { useTabs } from "@/context/tabs"
+import { type ServerHealth } from "@/utils/server-health"
+import { showToast } from "@/utils/toast"
 
 function showRequestError(language: ReturnType<typeof useLanguage>, err: unknown) {
   showToast({

packages/app/src/components/server/server-management.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test"
-import { ServerConnection } from "@/runtime/server/registry"
-import { createServerHealthPreview, replaceServerConnection, type ServerFormValues } from "./management"
+import { ServerConnection } from "@/context/servers"
+import { createServerHealthPreview, replaceServerConnection, type ServerFormValues } from "./server-management"
 
 function deferred<T>() {
   let resolve!: (value: T) => void

packages/app/src/components/server/server-management.ts

@@ -1,5 +1,5 @@
-import { normalizeServerUrl, ServerConnection } from "@/runtime/server/registry"
-import type { ServerHealth } from "@/runtime/server/health"
+import { normalizeServerUrl, ServerConnection } from "@/context/servers"
+import type { ServerHealth } from "@/utils/server-health"
 
 export type ServerFormValues = {
   url: string

packages/app/src/components/server/server-row-menu.tsx

@@ -2,9 +2,9 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Menu } from "@opencode-ai/ui/menu"
 import { type Component, Show } from "solid-js"
-import type { ServerActionsController } from "@/servers/registry/controller"
-import { useLanguage } from "@/runtime/i18n/language"
-import { ServerConnection } from "@/runtime/server/registry"
+import type { ServerActionsController } from "@/components/server/server-management-controller"
+import { useLanguage } from "@/context/language"
+import { ServerConnection } from "@/context/servers"
 
 export const ServerRowMenu: Component<{
   server: ServerConnection.Any

packages/app/src/components/server/server-row.tsx

@@ -1,5 +1,4 @@
 import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { Icon } from "@opencode-ai/ui/icon"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import {
   children,
@@ -11,9 +10,9 @@ import {
   type ParentProps,
   Show,
 } from "solid-js"
-import { useLanguage } from "@/runtime/i18n/language"
-import { type ServerConnection, serverName } from "@/runtime/server/registry"
-import type { ServerHealth } from "@/runtime/server/health"
+import { useLanguage } from "@/context/language"
+import { type ServerConnection, serverName } from "@/context/servers"
+import type { ServerHealth } from "@/utils/server-health"
 
 interface ServerRowProps extends ParentProps {
   conn: ServerConnection.Any
@@ -120,20 +119,13 @@ export function ServerRow(props: ServerRowProps) {
 
 export function ServerHealthIndicator(props: { health?: ServerHealth }) {
   return (
-    <Show
-      when={props.health?.incompatible}
-      fallback={
-        <div
-          classList={{
-            "size-1.5 rounded-full shrink-0 my-[3.5px]": true,
-            "bg-icon-success-base": props.health?.healthy === true,
-            "bg-icon-critical-base": props.health?.healthy === false,
-            "bg-border-weak-base": props.health === undefined,
-          }}
-        />
-      }
-    >
-      <Icon name="warning" size="small" class="shrink-0 text-icon-warning-base" />
-    </Show>
+    <div
+      classList={{
+        "size-1.5 rounded-full shrink-0 my-[3.5px]": true,
+        "bg-icon-success-base": props.health?.healthy === true,
+        "bg-icon-critical-base": props.health?.healthy === false,
+        "bg-border-weak-base": props.health === undefined,
+      }}
+    />
   )
 }

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

@@ -1,7 +1,7 @@
 import { useParams } from "@solidjs/router"
 import { onCleanup } from "solid-js"
-import { useCommand } from "@/shell/commands/command"
-import { useLanguage } from "@/runtime/i18n/language"
+import { useCommand } from "@/context/command"
+import { useLanguage } from "@/context/language"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 
 export function useSettingsDialog(defaultValue?: string) {
@@ -17,7 +17,7 @@ export function useSettingsDialog(defaultValue?: string) {
   return () => {
     const current = ++run
     const sessionID = params.id
-    void import("@/settings/shell").then((module) => {
+    void import("@/components/settings-v2").then((module) => {
       if (dead || run !== current) return
       void dialog.show(() => <module.DialogSettings sessionID={sessionID} defaultValue={defaultValue} />)
     })

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

@@ -4,12 +4,12 @@ import { makeEventListener } from "@solid-primitives/event-listener"
 import { Button } from "@opencode-ai/ui/button"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { TextInput } from "@opencode-ai/ui/text-input"
-import { showToast } from "@/shell/notifications/toast"
+import { showToast } from "@/utils/toast"
 import fuzzysort from "fuzzysort"
-import { DEFAULT_PALETTE_KEYBIND, formatKeybind, parseKeybind, useCommand } from "@/shell/commands/command"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useSettings } from "@/settings/model"
-import { SettingsList } from "@/settings/list"
+import { DEFAULT_PALETTE_KEYBIND, formatKeybind, parseKeybind, useCommand } from "@/context/command"
+import { useLanguage } from "@/context/language"
+import { useSettings } from "@/context/settings"
+import { SettingsListV2 } from "./settings-v2/parts/list"
 
 const Icon = lazy(() => import("@opencode-ai/ui/icon").then((module) => ({ default: module.Icon })))
 
@@ -351,7 +351,7 @@ export function SettingsKeybinds() {
   })
 
   return (
-    <SettingsKeybindsView
+    <SettingsKeybindsV2View
       groups={controller.catalog.groups}
       filtered={controller.catalog.filtered}
       title={controller.catalog.title}
@@ -364,7 +364,7 @@ export function SettingsKeybinds() {
   )
 }
 
-function SettingsKeybindsView(props: {
+function SettingsKeybindsV2View(props: {
   groups: KeybindGroup[]
   filtered: (query: string) => Map<KeybindGroup, string[]>
   title: (id: string) => string
@@ -381,17 +381,17 @@ function SettingsKeybindsView(props: {
 
   return (
     <>
-      <div class="settings-tab-header settings-tab-header--stacked">
-        <div class="settings-tab-header-row">
+      <div class="settings-v2-tab-header settings-v2-tab-header--stacked">
+        <div class="settings-v2-tab-header-row">
           <div class="flex flex-col gap-1">
-            <h2 class="settings-tab-title">{language.t("settings.shortcuts.title")}</h2>
+            <h2 class="settings-v2-tab-title">{language.t("settings.shortcuts.title")}</h2>
             <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.shortcuts.description")}</span>
           </div>
           <Button variant="ghost" onClick={props.onReset} disabled={!props.hasOverrides}>
             {language.t("settings.shortcuts.reset.button")}
           </Button>
         </div>
-        <div class="settings-tab-search">
+        <div class="settings-v2-tab-search">
           <TextInput
             type="search"
             appearance="base"
@@ -409,21 +409,21 @@ function SettingsKeybindsView(props: {
               type="button"
               variant="ghost-muted"
               size="small"
-              class="settings-tab-search-clear"
+              class="settings-v2-tab-search-clear"
               icon={<Icon name="close" size="large" class="text-v2-icon-icon-muted" />}
               onClick={() => setStore("filter", "")}
             />
           </Show>
         </div>
       </div>
-      <div class="settings-tab-body">
-        <div class="settings-shortcuts flex flex-col gap-8">
+      <div class="settings-v2-tab-body">
+        <div class="settings-v2-shortcuts flex flex-col gap-8">
           <For each={props.groups}>
             {(group) => (
               <Show when={(filtered().get(group) ?? []).length > 0}>
-                <div class="settings-section">
-                  <h3 class="settings-section-title">{language.t(groupKey[group])}</h3>
-                  <SettingsList>
+                <div class="settings-v2-section">
+                  <h3 class="settings-v2-section-title">{language.t(groupKey[group])}</h3>
+                  <SettingsListV2>
                     <For each={filtered().get(group) ?? []}>
                       {(id) => (
                         <div class="flex items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
@@ -432,8 +432,8 @@ function SettingsKeybindsView(props: {
                             type="button"
                             data-keybind-id={id}
                             classList={{
-                              "settings-keybind-button": true,
-                              "settings-keybind-button--active": props.active === id,
+                              "settings-v2-keybind-button": true,
+                              "settings-v2-keybind-button--active": props.active === id,
                             }}
                             onClick={() => props.onCapture(id)}
                           >
@@ -447,15 +447,15 @@ function SettingsKeybindsView(props: {
                         </div>
                       )}
                     </For>
-                  </SettingsList>
+                  </SettingsListV2>
                 </div>
               </Show>
             )}
           </For>
           <Show when={store.filter && !hasResults()}>
-            <div class="settings-shortcuts-status">
+            <div class="settings-v2-shortcuts-status">
               <span>{language.t("settings.shortcuts.search.empty")}</span>
-              <span class="settings-shortcuts-status-filter">&quot;{store.filter}&quot;</span>
+              <span class="settings-v2-shortcuts-status-filter">&quot;{store.filter}&quot;</span>
             </div>
           </Show>
         </div>

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

@@ -0,0 +1,5 @@
+import { type Component, type JSX } from "solid-js"
+
+export const SettingsList: Component<{ children: JSX.Element }> = (props) => {
+  return <div class="bg-surface-base px-4 rounded-lg">{props.children}</div>
+}

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

@@ -1,8 +1,8 @@
 import { type ParentProps, Show } from "solid-js"
-import { useGlobal } from "@/runtime/server/runtime"
-import { ModelsProvider } from "@/providers/models/models"
-import { ServerProvider } from "@/runtime/server/current"
-import { ServerConnection } from "@/runtime/server/registry"
+import { useGlobal } from "@/context/global"
+import { ModelsProvider } from "@/context/models"
+import { ServerProvider } from "@/context/server"
+import { ServerConnection } from "@/context/servers"
 
 export function SettingsServerScope(props: ParentProps<{ directory?: string }>) {
   const global = useGlobal()

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

@@ -1,12 +1,12 @@
 import { Component, createMemo } from "solid-js"
 import { Select } from "@opencode-ai/ui/select"
 import { TextInput } from "@opencode-ai/ui/text-input"
-import { useLanguage } from "@/runtime/i18n/language"
-import { ExternalLink } from "@/runtime/platform/external-link"
-import { SettingsList } from "@/settings/list"
-import { SettingsRow } from "@/settings/row"
-import { createAppearanceSettingsController, type AppearanceSettingsController } from "@/settings/general/controllers"
-import "@/settings/settings.css"
+import { useLanguage } from "@/context/language"
+import { ExternalLink } from "../external-link"
+import { SettingsListV2 } from "./parts/list"
+import { SettingsRowV2 } from "./parts/row"
+import { createAppearanceSettingsController, type AppearanceSettingsController } from "./general-controllers"
+import "./settings-v2.css"
 
 const schemeOptions: ("system" | "light" | "dark")[] = ["system", "light", "dark"]
 const fontSettings = {
@@ -40,7 +40,7 @@ const FontSetting: Component<{
   const language = useLanguage()
   const config = () => fontSettings[props.kind]
   return (
-    <SettingsRow title={language.t(config().title)} description={language.t(config().description)}>
+    <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
       <div class="w-full sm:w-[220px]">
         <TextInput
           data-action={config().action}
@@ -57,29 +57,29 @@ const FontSetting: Component<{
           style={{ "font-family": props.fonts[config().font]().family }}
         />
       </div>
-    </SettingsRow>
+    </SettingsRowV2>
   )
 }
 
-export const SettingsAppearance: Component = () => {
+export const SettingsAppearanceV2: Component = () => {
   const language = useLanguage()
   const appearance = createAppearanceSettingsController()
 
   return (
     <>
-      <div class="settings-tab-header">
-        <div class="settings-tab-header-row">
+      <div class="settings-v2-tab-header">
+        <div class="settings-v2-tab-header-row">
           <div class="flex flex-col gap-1">
-            <h2 class="settings-tab-title">{language.t("settings.general.section.appearance")}</h2>
+            <h2 class="settings-v2-tab-title">{language.t("settings.general.section.appearance")}</h2>
             <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.appearance.description")}</span>
           </div>
         </div>
       </div>
 
-      <div class="settings-tab-body">
-        <div class="settings-section">
-          <SettingsList>
-            <SettingsRow
+      <div class="settings-v2-tab-body">
+        <div class="settings-v2-section">
+          <SettingsListV2>
+            <SettingsRowV2
               title={language.t("settings.general.row.colorScheme.title")}
               description={language.t("settings.general.row.colorScheme.description")}
             >
@@ -96,14 +96,14 @@ export const SettingsAppearance: Component = () => {
                 }}
                 onSelect={(option) => option && appearance.scheme.select(option)}
               />
-            </SettingsRow>
+            </SettingsRowV2>
 
-            <SettingsRow
+            <SettingsRowV2
               title={language.t("settings.general.row.theme.title")}
               description={
                 <>
                   {language.t("settings.general.row.theme.description")}{" "}
-                  <ExternalLink class="settings-link" href="https://opencode.ai/docs/themes/">
+                  <ExternalLink class="settings-v2-link" href="https://opencode.ai/docs/themes/">
                     {language.t("common.learnMore")}
                   </ExternalLink>
                 </>
@@ -119,12 +119,12 @@ export const SettingsAppearance: Component = () => {
                 label={(option) => option.name}
                 onSelect={appearance.theme.select}
               />
-            </SettingsRow>
+            </SettingsRowV2>
 
             <FontSetting kind="ui" fonts={appearance.fonts} />
             <FontSetting kind="code" fonts={appearance.fonts} />
             <FontSetting kind="terminal" fonts={appearance.fonts} />
-          </SettingsList>
+          </SettingsListV2>
         </div>
       </div>
     </>

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

@@ -10,19 +10,19 @@ import {
   createServerHealthPreview,
   replaceServerConnection,
   type ServerFormValues,
-} from "@/servers/registry/management"
-import { useGlobal } from "@/runtime/server/runtime"
-import { useLanguage } from "@/runtime/i18n/language"
-import { normalizeServerUrl, ServerConnection, useServers } from "@/runtime/server/registry"
-import { useTabs } from "@/shell/tabs/tabs"
-import { useCheckServerHealth } from "@/runtime/server/health"
-import "@/settings/settings.css"
+} from "@/components/server/server-management"
+import { useGlobal } from "@/context/global"
+import { useLanguage } from "@/context/language"
+import { normalizeServerUrl, ServerConnection, useServers } from "@/context/servers"
+import { useTabs } from "@/context/tabs"
+import { useCheckServerHealth } from "@/utils/server-health"
+import "./settings-v2.css"
 
 const DEFAULT_USERNAME = "opencode"
 
 type FormMode = "list" | "add" | "edit"
 
-export const DialogServer: Component<{
+export const DialogServerV2: Component<{
   mode: "add" | "edit"
   server?: ServerConnection.Http
 }> = (props) => {
@@ -65,7 +65,7 @@ export const DialogServer: Component<{
   }
 
   return (
-    <Dialog fit class="settings-server-dialog">
+    <Dialog fit class="settings-v2-server-dialog">
       <DialogHeader hideClose={true}>
         <DialogTitle>{title()}</DialogTitle>
       </DialogHeader>
@@ -73,7 +73,7 @@ export const DialogServer: Component<{
       <DialogBody class="flex w-full min-w-0 flex-1 flex-col px-4 pt-4 pb-2">
         <div class="flex w-full min-w-0 flex-col gap-6">
           <div class="flex w-full min-w-0 flex-col gap-2">
-            <label class="settings-server-dialog-label">{language.t("dialog.server.add.url")}</label>
+            <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.url")}</label>
             <TextInput
               type="text"
               appearance="large"
@@ -87,11 +87,11 @@ export const DialogServer: Component<{
               onKeyDown={keyDown}
             />
             <Show when={form.state.error()}>
-              <span class="settings-server-dialog-error">{form.state.error()}</span>
+              <span class="settings-v2-server-dialog-error">{form.state.error()}</span>
             </Show>
           </div>
           <div class="flex w-full min-w-0 flex-col gap-2">
-            <label class="settings-server-dialog-label">{language.t("dialog.server.add.name")}</label>
+            <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.name")}</label>
             <TextInput
               type="text"
               appearance="large"
@@ -105,7 +105,7 @@ export const DialogServer: Component<{
           </div>
           <div class="grid w-full min-w-0 grid-cols-2 gap-4">
             <div class="flex min-w-0 flex-col gap-2">
-              <label class="settings-server-dialog-label">{language.t("dialog.server.add.username")}</label>
+              <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.username")}</label>
               <TextInput
                 type="text"
                 appearance="large"
@@ -118,7 +118,7 @@ export const DialogServer: Component<{
               />
             </div>
             <div class="flex min-w-0 flex-col gap-2">
-              <label class="settings-server-dialog-label">{language.t("dialog.server.add.password")}</label>
+              <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.password")}</label>
               <TextInput
                 type="password"
                 appearance="large"

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

@@ -2,25 +2,25 @@ import { Component, createEffect, createMemo, createSignal, startTransition } fr
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { Icon } from "@opencode-ai/ui/icon"
-import { useLanguage } from "@/runtime/i18n/language"
-import { usePlatform } from "@/runtime/platform/platform"
-import { SettingsGeneral } from "./general/general"
-import { SettingsAppearance } from "./appearance/appearance"
-import { SettingsKeybinds } from "./keybinds/keybinds"
-import { SettingsNotifications } from "./notifications/notifications"
-import { SettingsProviders } from "./providers/providers"
-import { SettingsModels } from "./models/models"
-import { SettingsServers } from "./servers/servers"
-import { SettingsWorkspaces } from "./workspaces/workspaces"
-import { SettingsProjects } from "./workspaces/projects"
-import { SettingsExtensions } from "./providers/extensions"
-import { SettingsServerScope } from "./server-scope"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { SettingsGeneral } from "./general"
+import { SettingsAppearanceV2 } from "./appearance"
+import { SettingsKeybinds } from "../settings-keybinds"
+import { SettingsNotificationsV2 } from "./notifications"
+import { SettingsProvidersV2 } from "./providers"
+import { SettingsModelsV2 } from "./models"
+import { SettingsServersV2 } from "./servers"
+import { SettingsWorkspacesV2 } from "./workspaces"
+import { SettingsProjectsV2 } from "./projects"
+import { SettingsExtensionsV2 } from "./extensions"
+import { SettingsServerScope } from "../settings-server-picker"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { useLayout } from "@/shell/state/layout"
-import { useTabs } from "@/shell/tabs/tabs"
-import { useGlobal, useServerCtx } from "@/runtime/server/runtime"
-import { ServerConnection, useServers } from "@/runtime/server/registry"
-import "@/settings/settings.css"
+import { useLayout } from "@/context/layout"
+import { useTabs } from "@/context/tabs"
+import { useGlobal, useServerCtx } from "@/context/global"
+import { ServerConnection, useServers } from "@/context/servers"
+import "./settings-v2.css"
 
 export const DialogSettings: Component<{
   sessionID?: string
@@ -72,13 +72,13 @@ export const DialogSettings: Component<{
   }
 
   return (
-    <Dialog size="x-large" variant="settings" class="settings-dialog">
+    <Dialog size="x-large" variant="settings" class="settings-v2-dialog">
       <Tabs
         orientation="vertical"
         variant="settings"
         value={tab()}
         onChange={(value) => void startTransition(() => setTab(value))}
-        class="settings"
+        class="settings-v2"
       >
         <Tabs.List>
           <div class="flex flex-col justify-between h-full w-full">
@@ -136,43 +136,43 @@ export const DialogSettings: Component<{
               </div>
             </div>
 
-            <div class="settings-nav-footer">
+            <div class="settings-v2-nav-footer">
               <span>{language.t("app.name.desktop")}</span>
               <span>v{platform.version}</span>
             </div>
           </div>
         </Tabs.List>
 
-        <Tabs.Content value="general" class="settings-panel">
+        <Tabs.Content value="general" class="settings-v2-panel">
           <SettingsGeneral server={server()} sessionID={props.sessionID} />
         </Tabs.Content>
-        <Tabs.Content value="appearance" class="settings-panel">
-          <SettingsAppearance />
+        <Tabs.Content value="appearance" class="settings-v2-panel">
+          <SettingsAppearanceV2 />
         </Tabs.Content>
-        <Tabs.Content value="notifications" class="settings-panel">
-          <SettingsNotifications />
+        <Tabs.Content value="notifications" class="settings-v2-panel">
+          <SettingsNotificationsV2 />
         </Tabs.Content>
-        <Tabs.Content value="shortcuts" class="settings-panel">
+        <Tabs.Content value="shortcuts" class="settings-v2-panel">
           <SettingsKeybinds />
         </Tabs.Content>
-        <Tabs.Content value="servers" class="settings-panel">
-          <SettingsServers />
+        <Tabs.Content value="servers" class="settings-v2-panel">
+          <SettingsServersV2 />
         </Tabs.Content>
-        <Tabs.Content value="projects" class="settings-panel">
-          <SettingsProjects />
+        <Tabs.Content value="projects" class="settings-v2-panel">
+          <SettingsProjectsV2 />
         </Tabs.Content>
         <SettingsServerScope directory={directory()}>
-          <Tabs.Content value="workspaces" class="settings-panel">
-            <SettingsWorkspaces activeDirectory={directory()} />
+          <Tabs.Content value="workspaces" class="settings-v2-panel">
+            <SettingsWorkspacesV2 activeDirectory={directory()} />
           </Tabs.Content>
-          <Tabs.Content value="providers" class="settings-panel">
-            <SettingsProviders directory={directory()} onBack={showProviders} />
+          <Tabs.Content value="providers" class="settings-v2-panel">
+            <SettingsProvidersV2 directory={directory()} onBack={showProviders} />
           </Tabs.Content>
-          <Tabs.Content value="models" class="settings-panel">
-            <SettingsModels />
+          <Tabs.Content value="models" class="settings-v2-panel">
+            <SettingsModelsV2 />
           </Tabs.Content>
-          <Tabs.Content value="extensions" class="settings-panel">
-            <SettingsExtensions />
+          <Tabs.Content value="extensions" class="settings-v2-panel">
+            <SettingsExtensionsV2 />
           </Tabs.Content>
         </SettingsServerScope>
       </Tabs>

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

@@ -2,14 +2,14 @@ import { Component, For, createEffect, createMemo, createResource } from "solid-
 import { Icon } from "@opencode-ai/ui/icon"
 import { Switch } from "@opencode-ai/ui/switch"
 import { Tabs } from "@opencode-ai/ui/tabs"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useData } from "@/runtime/server/current"
-import { useServerSDK } from "@/runtime/server/client"
-import { useMcpToggle } from "@/providers/connect/mcp"
-import { pluginLabels } from "@/providers/catalog/plugin"
-import { ExternalLink } from "@/runtime/platform/external-link"
-import { InlineServerSelect } from "@/settings/server-select"
-import "@/settings/settings.css"
+import { useLanguage } from "@/context/language"
+import { useData } from "@/context/server"
+import { useServerSDK } from "@/context/server-sdk"
+import { useMcpToggle } from "@/context/mcp"
+import { pluginLabel } from "@/utils/plugin"
+import { ExternalLink } from "../external-link"
+import { InlineServerSelect } from "./parts/server-select"
+import "./settings-v2.css"
 
 interface McpRowItem {
   name: string
@@ -20,7 +20,7 @@ interface PluginRowItem {
   name: string
 }
 
-export const SettingsExtensions: Component = () => {
+export const SettingsExtensionsV2: Component = () => {
   const language = useLanguage()
   const serverSdk = useServerSDK()
   const data = useData()
@@ -45,7 +45,9 @@ export const SettingsExtensions: Component = () => {
     () => serverSdk.connection.status() === "connected",
     () => serverSdk.api.plugin.list().then((result) => result.data),
   )
-  const plugins = createMemo<PluginRowItem[]>(() => pluginLabels(pluginList.latest ?? []).map((name) => ({ name })))
+  const plugins = createMemo<PluginRowItem[]>(() =>
+    (pluginList.latest ?? []).map((item) => ({ name: pluginLabel(item) })),
+  )
 
   createEffect(() => {
     if (serverSdk.connection.status() !== "connected") return
@@ -55,18 +57,18 @@ export const SettingsExtensions: Component = () => {
 
   return (
     <>
-      <div class="settings-tab-header">
-        <div class="settings-tab-header-row">
+      <div class="settings-v2-tab-header">
+        <div class="settings-v2-tab-header-row">
           <div class="flex flex-col gap-1">
-            <h2 class="settings-tab-title">{language.t("settings.tab.extensions")}</h2>
+            <h2 class="settings-v2-tab-title">{language.t("settings.tab.extensions")}</h2>
             <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.extensions.description")}</span>
           </div>
           <InlineServerSelect />
         </div>
       </div>
 
-      <div class="settings-tab-body">
-        <Tabs variant="pill" defaultValue="mcps" class="settings-extensions-tabs">
+      <div class="settings-v2-tab-body">
+        <Tabs variant="pill" defaultValue="mcps" class="settings-v2-extensions-tabs">
           <Tabs.List>
             <Tabs.Trigger value="mcps">{language.t("settings.extensions.tab.mcps")}</Tabs.Trigger>
             <Tabs.Trigger value="plugins">{language.t("status.popover.tab.plugins")}</Tabs.Trigger>
@@ -74,7 +76,7 @@ export const SettingsExtensions: Component = () => {
           </Tabs.List>
 
           <Tabs.Content value="mcps">
-            <div class="settings-section">
+            <div class="settings-v2-section">
               <div class="flex items-center justify-between">
                 <span class="text-13-medium text-v2-text-text-base">
                   {language.t("settings.extensions.availableAll")}
@@ -100,7 +102,7 @@ export const SettingsExtensions: Component = () => {
           </Tabs.Content>
 
           <Tabs.Content value="plugins">
-            <div class="settings-section">
+            <div class="settings-v2-section">
               <div class="flex items-center justify-between">
                 <span class="text-13-medium text-v2-text-text-base">
                   {language.t("settings.extensions.availableAll")}
@@ -123,7 +125,7 @@ export const SettingsExtensions: Component = () => {
           </Tabs.Content>
 
           <Tabs.Content value="skills">
-            <div class="settings-section">
+            <div class="settings-v2-section">
               <div class="flex items-center justify-between">
                 <span class="text-13-medium text-v2-text-text-base">
                   {language.t("settings.extensions.availableAll")}

packages/app/src/components/settings-v2/general-controllers.test.ts

@@ -1,8 +1,8 @@
 import { describe, expect, test, vi } from "bun:test"
 import { createRoot } from "solid-js"
-import { createShellOptions, createSoundPreviewController } from "./behavior"
+import { createShellOptions, createSoundPreviewController } from "./general-controller-behavior"
 
-describe("settings controllers", () => {
+describe("settings v2 controllers", () => {
   test("normalizes shell names and preserves an unavailable configured shell", () => {
     expect(
       createShellOptions({

packages/app/src/components/settings-v2/general-controllers.ts

@@ -1,7 +1,7 @@
 import { createMemo, createResource, onMount, type Accessor } from "solid-js"
 import type { ColorScheme } from "@opencode-ai/ui/theme/context"
 import { useTheme } from "@opencode-ai/ui/theme/context"
-import { usePermission } from "@/session/requests/permission"
+import { usePermission } from "@/context/permission"
 import {
   monoDefault,
   monoFontFamily,
@@ -13,14 +13,14 @@ import {
   terminalFontFamily,
   terminalInput,
   useSettings,
-} from "@/settings/model"
-import { playSoundById, SOUND_OPTIONS } from "@/shell/notifications/sound"
-import { createSoundPreviewController, type ShellOption } from "./behavior"
-import { ServerConnection } from "@/runtime/server/registry"
-import { useGlobal, useServerCtx } from "@/runtime/server/runtime"
+} from "@/context/settings"
+import { playSoundById, SOUND_OPTIONS } from "@/utils/sound"
+import { createSoundPreviewController, type ShellOption } from "./general-controller-behavior"
+import { ServerConnection } from "@/context/servers"
+import { useGlobal, useServerCtx } from "@/context/global"
 
-export { createShellOptions, createSoundPreviewController } from "./behavior"
-export type { ShellOption, ShellSelectOption } from "./behavior"
+export { createShellOptions, createSoundPreviewController } from "./general-controller-behavior"
+export type { ShellOption, ShellSelectOption } from "./general-controller-behavior"
 
 export function createPermissionScopeController(
   server: Accessor<ServerConnection.Any | undefined>,

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

@@ -4,13 +4,13 @@ import { Button } from "@opencode-ai/ui/button"
 import { Select } from "@opencode-ai/ui/select"
 import { Switch } from "@opencode-ai/ui/switch"
 import { TextInput } from "@opencode-ai/ui/text-input"
-import { useLanguage } from "@/runtime/i18n/language"
-import { usePlatform } from "@/runtime/platform/platform"
-import { useUpdaterAction } from "@/shell/updates/action"
-import { type WorkspaceDefaultDestination, useSettings } from "@/settings/model"
-import { ExternalLink } from "@/runtime/platform/external-link"
-import { SettingsList } from "@/settings/list"
-import { SettingsRow } from "@/settings/row"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { useUpdaterAction } from "../updater-action"
+import { type WorkspaceDefaultDestination, useSettings } from "@/context/settings"
+import { ExternalLink } from "../external-link"
+import { SettingsListV2 } from "./parts/list"
+import { SettingsRowV2 } from "./parts/row"
 import {
   createAppearanceSettingsController,
   createPermissionScopeController,
@@ -22,9 +22,9 @@ import {
   type PermissionScopeController,
   type ShellSettingsController,
   type SoundSettingsController,
-} from "./controllers"
-import "@/settings/settings.css"
-import { ServerConnection } from "@/runtime/server/registry"
+} from "./general-controllers"
+import "./settings-v2.css"
+import { ServerConnection } from "@/context/servers"
 
 const schemeOptions: ("system" | "light" | "dark")[] = ["system", "light", "dark"]
 const fontSettings = {
@@ -71,7 +71,7 @@ const soundSettings = {
 const PermissionScopeSetting: Component<{ controller: PermissionScopeController }> = (props) => {
   const language = useLanguage()
   return (
-    <SettingsRow
+    <SettingsRowV2
       title={language.t("command.permissions.autoaccept.enable")}
       description={language.t("toast.permissions.autoaccept.on.description")}
     >
@@ -82,7 +82,7 @@ const PermissionScopeSetting: Component<{ controller: PermissionScopeController
           onChange={props.controller.set}
         />
       </div>
-    </SettingsRow>
+    </SettingsRowV2>
   )
 }
 
@@ -96,7 +96,7 @@ const WorkspaceDestinationSetting: Component = () => {
   ])
 
   return (
-    <SettingsRow
+    <SettingsRowV2
       title={language.t("settings.workspaces.default.title")}
       description={language.t("settings.workspaces.default.description")}
     >
@@ -109,7 +109,7 @@ const WorkspaceDestinationSetting: Component = () => {
         gutter={6}
         onSelect={(option) => option && settings.workspaces.setDefaultDestination(option.value)}
       />
-    </SettingsRow>
+    </SettingsRowV2>
   )
 }
 
@@ -122,7 +122,7 @@ const ShellSetting: Component<{ controller: ShellSettingsController }> = (props)
     }),
   )
   return (
-    <SettingsRow
+    <SettingsRowV2
       title={language.t("settings.general.row.shell.title")}
       description={language.t("settings.general.row.shell.description")}
     >
@@ -140,17 +140,17 @@ const ShellSetting: Component<{ controller: ShellSettingsController }> = (props)
         }}
         onSelect={(option) => option && props.controller.select(option.value)}
       />
-    </SettingsRow>
+    </SettingsRowV2>
   )
 }
 
 const AppearanceSection: Component<{ controller: AppearanceSettingsController }> = (props) => {
   const language = useLanguage()
   return (
-    <div class="settings-section">
-      <h3 class="settings-section-title">{language.t("settings.general.section.appearance")}</h3>
-      <SettingsList>
-        <SettingsRow
+    <div class="settings-v2-section">
+      <h3 class="settings-v2-section-title">{language.t("settings.general.section.appearance")}</h3>
+      <SettingsListV2>
+        <SettingsRowV2
           title={language.t("settings.general.row.colorScheme.title")}
           description={language.t("settings.general.row.colorScheme.description")}
         >
@@ -167,14 +167,14 @@ const AppearanceSection: Component<{ controller: AppearanceSettingsController }>
             }}
             onSelect={(option) => option && props.controller.scheme.select(option)}
           />
-        </SettingsRow>
+        </SettingsRowV2>
 
-        <SettingsRow
+        <SettingsRowV2
           title={language.t("settings.general.row.theme.title")}
           description={
             <>
               {language.t("settings.general.row.theme.description")}{" "}
-              <ExternalLink class="settings-link" href="https://opencode.ai/docs/themes/">
+              <ExternalLink class="settings-v2-link" href="https://opencode.ai/docs/themes/">
                 {language.t("common.learnMore")}
               </ExternalLink>
             </>
@@ -190,12 +190,12 @@ const AppearanceSection: Component<{ controller: AppearanceSettingsController }>
             label={(option) => option.name}
             onSelect={props.controller.theme.select}
           />
-        </SettingsRow>
+        </SettingsRowV2>
 
         <FontSetting kind="ui" fonts={props.controller.fonts} />
         <FontSetting kind="code" fonts={props.controller.fonts} />
         <FontSetting kind="terminal" fonts={props.controller.fonts} />
-      </SettingsList>
+      </SettingsListV2>
     </div>
   )
 }
@@ -207,7 +207,7 @@ const FontSetting: Component<{
   const language = useLanguage()
   const config = () => fontSettings[props.kind]
   return (
-    <SettingsRow title={language.t(config().title)} description={language.t(config().description)}>
+    <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
       <div class="w-full sm:w-[220px]">
         <TextInput
           data-action={config().action}
@@ -224,20 +224,20 @@ const FontSetting: Component<{
           style={{ "font-family": props.fonts[config().font]().family }}
         />
       </div>
-    </SettingsRow>
+    </SettingsRowV2>
   )
 }
 
 const SoundsSection: Component<{ controller: SoundSettingsController }> = (props) => {
   const language = useLanguage()
   return (
-    <div class="settings-section">
-      <h3 class="settings-section-title">{language.t("settings.general.section.sounds")}</h3>
-      <SettingsList>
+    <div class="settings-v2-section">
+      <h3 class="settings-v2-section-title">{language.t("settings.general.section.sounds")}</h3>
+      <SettingsListV2>
         <SoundSetting kind="agent" channel={props.controller.agent} />
         <SoundSetting kind="permissions" channel={props.controller.permissions} />
         <SoundSetting kind="errors" channel={props.controller.errors} />
-      </SettingsList>
+      </SettingsListV2>
     </div>
   )
 }
@@ -249,7 +249,7 @@ const SoundSetting: Component<{
   const language = useLanguage()
   const config = () => soundSettings[props.kind]
   return (
-    <SettingsRow title={language.t(config().title)} description={language.t(config().description)}>
+    <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
       <Select
         data-action={config().action}
         options={soundOptions}
@@ -261,7 +261,7 @@ const SoundSetting: Component<{
         placement="bottom-end"
         gutter={6}
       />
-    </SettingsRow>
+    </SettingsRowV2>
   )
 }
 
@@ -274,7 +274,7 @@ const LanguageSetting = () => {
     })),
   )
   return (
-    <SettingsRow
+    <SettingsRowV2
       title={language.t("settings.general.row.language.title")}
       description={language.t("settings.general.row.language.description")}
     >
@@ -288,7 +288,7 @@ const LanguageSetting = () => {
         label={(option) => option.label}
         onSelect={(option) => option && language.setLocale(option.value)}
       />
-    </SettingsRow>
+    </SettingsRowV2>
   )
 }
 
@@ -322,9 +322,9 @@ export const SettingsGeneral: Component<{
   }
 
   const GeneralSection = () => (
-    <div class="settings-section">
-      <h3 class="settings-section-title">{language.t("settings.general.section.general")}</h3>
-      <SettingsList>
+    <div class="settings-v2-section">
+      <h3 class="settings-v2-section-title">{language.t("settings.general.section.general")}</h3>
+      <SettingsListV2>
         <LanguageSetting />
 
         <WorkspaceDestinationSetting />
@@ -332,7 +332,7 @@ export const SettingsGeneral: Component<{
 
         <ShellSetting controller={shell} />
 
-        <SettingsRow
+        <SettingsRowV2
           title={language.t("settings.general.row.reasoningSummaries.title")}
           description={language.t("settings.general.row.reasoningSummaries.description")}
         >
@@ -342,9 +342,9 @@ export const SettingsGeneral: Component<{
               onChange={(checked) => settings.general.setShowReasoningSummaries(checked)}
             />
           </div>
-        </SettingsRow>
+        </SettingsRowV2>
 
-        <SettingsRow
+        <SettingsRowV2
           title={language.t("settings.general.row.shellToolPartsExpanded.title")}
           description={language.t("settings.general.row.shellToolPartsExpanded.description")}
         >
@@ -354,9 +354,9 @@ export const SettingsGeneral: Component<{
               onChange={(checked) => settings.general.setShellToolPartsExpanded(checked)}
             />
           </div>
-        </SettingsRow>
+        </SettingsRowV2>
 
-        <SettingsRow
+        <SettingsRowV2
           title={language.t("settings.general.row.editToolPartsExpanded.title")}
           description={language.t("settings.general.row.editToolPartsExpanded.description")}
         >
@@ -366,10 +366,10 @@ export const SettingsGeneral: Component<{
               onChange={(checked) => settings.general.setEditToolPartsExpanded(checked)}
             />
           </div>
-        </SettingsRow>
+        </SettingsRowV2>
 
         <Show when={mobile() && import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"}>
-          <SettingsRow
+          <SettingsRowV2
             title={language.t("settings.general.row.mobileTitlebarBottom.title")}
             description={language.t("settings.general.row.mobileTitlebarBottom.description")}
           >
@@ -379,18 +379,18 @@ export const SettingsGeneral: Component<{
                 onChange={(checked) => settings.general.setMobileTitlebarPosition(checked ? "bottom" : "top")}
               />
             </div>
-          </SettingsRow>
+          </SettingsRowV2>
         </Show>
-      </SettingsList>
+      </SettingsListV2>
     </div>
   )
 
   const AdvancedSection = () => (
-    <div class="settings-section">
-      <h3 class="settings-section-title">{language.t("settings.general.section.advanced")}</h3>
+    <div class="settings-v2-section">
+      <h3 class="settings-v2-section-title">{language.t("settings.general.section.advanced")}</h3>
 
-      <SettingsList>
-        <SettingsRow
+      <SettingsListV2>
+        <SettingsRowV2
           title={language.t("settings.general.row.showSearch.title")}
           description={language.t("settings.general.row.showSearch.description")}
         >
@@ -400,9 +400,9 @@ export const SettingsGeneral: Component<{
               onChange={(checked) => settings.general.setShowSearch(checked)}
             />
           </div>
-        </SettingsRow>
+        </SettingsRowV2>
 
-        <SettingsRow
+        <SettingsRowV2
           title={language.t("settings.general.row.showStatus.title")}
           description={language.t("settings.general.row.showStatus.description")}
         >
@@ -412,9 +412,9 @@ export const SettingsGeneral: Component<{
               onChange={(checked) => settings.general.setShowStatus(checked)}
             />
           </div>
-        </SettingsRow>
+        </SettingsRowV2>
 
-        <SettingsRow
+        <SettingsRowV2
           title={language.t("settings.general.row.showCustomAgents.title")}
           description={language.t("settings.general.row.showCustomAgents.description")}
         >
@@ -424,17 +424,17 @@ export const SettingsGeneral: Component<{
               onChange={(checked) => settings.general.setShowCustomAgents(checked)}
             />
           </div>
-        </SettingsRow>
-      </SettingsList>
+        </SettingsRowV2>
+      </SettingsListV2>
     </div>
   )
 
   const NotificationsSection = () => (
-    <div class="settings-section">
-      <h3 class="settings-section-title">{language.t("settings.general.section.notifications")}</h3>
+    <div class="settings-v2-section">
+      <h3 class="settings-v2-section-title">{language.t("settings.general.section.notifications")}</h3>
 
-      <SettingsList>
-        <SettingsRow
+      <SettingsListV2>
+        <SettingsRowV2
           title={language.t("settings.general.notifications.agent.title")}
           description={language.t("settings.general.notifications.agent.description")}
         >
@@ -444,9 +444,9 @@ export const SettingsGeneral: Component<{
               onChange={(checked) => settings.notifications.setAgent(checked)}
             />
           </div>
-        </SettingsRow>
+        </SettingsRowV2>
 
-        <SettingsRow
+        <SettingsRowV2
           title={language.t("settings.general.notifications.permissions.title")}
           description={language.t("settings.general.notifications.permissions.description")}
         >
@@ -456,9 +456,9 @@ export const SettingsGeneral: Component<{
               onChange={(checked) => settings.notifications.setPermissions(checked)}
             />
           </div>
-        </SettingsRow>
+        </SettingsRowV2>
 
-        <SettingsRow
+        <SettingsRowV2
           title={language.t("settings.general.notifications.errors.title")}
           description={language.t("settings.general.notifications.errors.description")}
         >
@@ -468,17 +468,17 @@ export const SettingsGeneral: Component<{
               onChange={(checked) => settings.notifications.setErrors(checked)}
             />
           </div>
-        </SettingsRow>
-      </SettingsList>
+        </SettingsRowV2>
+      </SettingsListV2>
     </div>
   )
 
   const UpdatesSection = () => (
-    <div class="settings-section">
-      <h3 class="settings-section-title">{language.t("settings.general.section.updates")}</h3>
+    <div class="settings-v2-section">
+      <h3 class="settings-v2-section-title">{language.t("settings.general.section.updates")}</h3>
 
-      <SettingsList>
-        <SettingsRow
+      <SettingsListV2>
+        <SettingsRowV2
           title={language.t("settings.general.row.releaseNotes.title")}
           description={language.t("settings.general.row.releaseNotes.description")}
         >
@@ -488,53 +488,53 @@ export const SettingsGeneral: Component<{
               onChange={(checked) => settings.general.setReleaseNotes(checked)}
             />
           </div>
-        </SettingsRow>
+        </SettingsRowV2>
 
-        <SettingsRow
+        <SettingsRowV2
           title={language.t("settings.updates.row.check.title")}
           description={language.t("settings.updates.row.check.description")}
         >
           <Button size="normal" variant="neutral" disabled={!updater.action().run} onClick={() => updater.run()}>
             {language.t(updater.action().label)}
           </Button>
-        </SettingsRow>
-      </SettingsList>
+        </SettingsRowV2>
+      </SettingsListV2>
     </div>
   )
 
   // We can probably remove this, right?
   const DisplaySection = () => (
     <Show when={desktop()}>
-      <div class="settings-section">
-        <h3 class="settings-section-title">{language.t("settings.general.section.display")}</h3>
+      <div class="settings-v2-section">
+        <h3 class="settings-v2-section-title">{language.t("settings.general.section.display")}</h3>
 
-        <SettingsList>
-          <SettingsRow
+        <SettingsListV2>
+          <SettingsRowV2
             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>
-        </SettingsList>
+          </SettingsRowV2>
+        </SettingsListV2>
       </div>
     </Show>
   )
 
   return (
     <>
-      <div class="settings-tab-header">
-        <div class="settings-tab-header-row">
+      <div class="settings-v2-tab-header">
+        <div class="settings-v2-tab-header-row">
           <div class="flex flex-col gap-1">
-            <h2 class="settings-tab-title">{language.t("settings.tab.preferences")}</h2>
+            <h2 class="settings-v2-tab-title">{language.t("settings.tab.preferences")}</h2>
             <span class="text-11-regular text-v2-text-text-muted">
               {language.t("settings.preferences.description")}
             </span>
           </div>
         </div>
       </div>
-      <div class="settings-tab-body">
+      <div class="settings-v2-tab-body">
         <GeneralSection />
 
         <Show when={desktop()}>

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

@@ -0,0 +1 @@
+export { DialogSettings } from "./dialog-settings-v2"

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

@@ -6,21 +6,21 @@ import { IconButton } from "@opencode-ai/ui/icon-button"
 import { TextInput } from "@opencode-ai/ui/text-input"
 import { type Component, For, Show } from "solid-js"
 import { createStore } from "solid-js/store"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useModels } from "@/providers/models/models"
-import { useServerSDK } from "@/runtime/server/client"
-import { popularProviders } from "@/providers/catalog/providers"
-import { Persist, persisted } from "@/runtime/persistence/storage"
-import { InlineServerSelect } from "@/settings/server-select"
-import { SettingsList } from "@/settings/list"
-import { SettingsRow } from "@/settings/row"
-import "@/settings/settings.css"
+import { useLanguage } from "@/context/language"
+import { useModels } from "@/context/models"
+import { useServerSDK } from "@/context/server-sdk"
+import { popularProviders } from "@/hooks/use-providers"
+import { Persist, persisted } from "@/utils/persist"
+import { InlineServerSelect } from "./parts/server-select"
+import { SettingsListV2 } from "./parts/list"
+import { SettingsRowV2 } from "./parts/row"
+import "./settings-v2.css"
 
 type ModelItem = ReturnType<ReturnType<typeof useModels>["list"]>[number]
 
 const PROVIDER_ICON_SIZE = 16
 
-export const SettingsModels: Component = () => {
+export const SettingsModelsV2: Component = () => {
   const language = useLanguage()
   const models = useModels()
   const serverSdk = useServerSDK()
@@ -53,15 +53,15 @@ export const SettingsModels: Component = () => {
 
   return (
     <>
-      <div class="settings-tab-header settings-tab-header--stacked">
-        <div class="settings-tab-header-row">
+      <div class="settings-v2-tab-header settings-v2-tab-header--stacked">
+        <div class="settings-v2-tab-header-row">
           <div class="flex flex-col gap-1">
-            <h2 class="settings-tab-title">{language.t("settings.models.title")}</h2>
+            <h2 class="settings-v2-tab-title">{language.t("settings.models.title")}</h2>
             <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.models.description")}</span>
           </div>
           <InlineServerSelect />
         </div>
-        <div class="settings-tab-search">
+        <div class="settings-v2-tab-search">
           <TextInput
             type="search"
             appearance="base"
@@ -79,7 +79,7 @@ export const SettingsModels: Component = () => {
               type="button"
               variant="ghost-muted"
               size="small"
-              class="settings-tab-search-clear"
+              class="settings-v2-tab-search-clear"
               icon={<Icon name="close" size="large" class="text-v2-icon-icon-muted" />}
               onClick={() => list.clear()}
             />
@@ -87,11 +87,11 @@ export const SettingsModels: Component = () => {
         </div>
       </div>
 
-      <div class="settings-tab-body settings-models">
+      <div class="settings-v2-tab-body settings-v2-models">
         <Show
           when={!list.grouped.loading}
           fallback={
-            <div class="settings-models-status">
+            <div class="settings-v2-models-status">
               {language.t("common.loading")}
               {language.t("common.loading.ellipsis")}
             </div>
@@ -100,10 +100,10 @@ export const SettingsModels: Component = () => {
           <Show
             when={list.flat().length > 0}
             fallback={
-              <div class="settings-models-status">
+              <div class="settings-v2-models-status">
                 <span>{language.t("dialog.model.empty")}</span>
                 <Show when={list.filter()}>
-                  <span class="settings-models-status-filter">&quot;{list.filter()}&quot;</span>
+                  <span class="settings-v2-models-status-filter">&quot;{list.filter()}&quot;</span>
                 </Show>
               </div>
             }
@@ -115,19 +115,19 @@ export const SettingsModels: Component = () => {
 
                 return (
                   <div
-                    class="settings-section"
+                    class="settings-v2-section"
                     data-component="settings-models-provider"
                     data-expanded={expanded() ? "" : undefined}
                   >
-                    <h3 class="settings-models-group-header">
+                    <h3 class="settings-v2-models-group-header">
                       <button
                         type="button"
-                        class="settings-models-group-trigger"
+                        class="settings-v2-models-group-trigger"
                         aria-expanded={expanded()}
                         disabled={searching()}
                         onClick={() => setStore("collapsed", group.category, expanded())}
                       >
-                        <span class="settings-models-group-chevron">
+                        <span class="settings-v2-models-group-chevron">
                           <Show
                             when={expanded()}
                             fallback={
@@ -147,24 +147,24 @@ export const SettingsModels: Component = () => {
                             </svg>
                           </Show>
                         </span>
-                        <span class="settings-models-group-label">
+                        <span class="settings-v2-models-group-label">
                           <ProviderIcon
                             id={group.category}
                             width={PROVIDER_ICON_SIZE}
                             height={PROVIDER_ICON_SIZE}
-                            class="settings-models-provider-icon shrink-0"
+                            class="settings-v2-models-provider-icon shrink-0"
                           />
-                          <span class="settings-section-title">{group.items[0].provider.name}</span>
+                          <span class="settings-v2-section-title">{group.items[0].provider.name}</span>
                         </span>
                       </button>
                     </h3>
                     <Show when={expanded()}>
-                      <SettingsList>
+                      <SettingsListV2>
                         <For each={group.items}>
                           {(item) => {
                             const key = { providerID: item.provider.id, modelID: item.id }
                             return (
-                              <SettingsRow title={item.name} description="">
+                              <SettingsRowV2 title={item.name} description="">
                                 <div>
                                   <Switch
                                     checked={models.visible(key)}
@@ -176,11 +176,11 @@ export const SettingsModels: Component = () => {
                                     {item.name}
                                   </Switch>
                                 </div>
-                              </SettingsRow>
+                              </SettingsRowV2>
                             )
                           }}
                         </For>
-                      </SettingsList>
+                      </SettingsListV2>
                     </Show>
                   </div>
                 )

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

@@ -1,16 +1,12 @@
 import { Component } from "solid-js"
 import { Select } from "@opencode-ai/ui/select"
 import { Switch } from "@opencode-ai/ui/switch"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useSettings } from "@/settings/model"
-import { SettingsList } from "@/settings/list"
-import { SettingsRow } from "@/settings/row"
-import {
-  createSoundSettingsController,
-  soundOptions,
-  type SoundSettingsController,
-} from "@/settings/general/controllers"
-import "@/settings/settings.css"
+import { useLanguage } from "@/context/language"
+import { useSettings } from "@/context/settings"
+import { SettingsListV2 } from "./parts/list"
+import { SettingsRowV2 } from "./parts/row"
+import { createSoundSettingsController, soundOptions, type SoundSettingsController } from "./general-controllers"
+import "./settings-v2.css"
 
 const soundSettings = {
   agent: {
@@ -37,7 +33,7 @@ const SoundSetting: Component<{
   const language = useLanguage()
   const config = () => soundSettings[props.kind]
   return (
-    <SettingsRow title={language.t(config().title)} description={language.t(config().description)}>
+    <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
       <Select
         data-action={config().action}
         options={soundOptions}
@@ -49,21 +45,21 @@ const SoundSetting: Component<{
         placement="bottom-end"
         gutter={6}
       />
-    </SettingsRow>
+    </SettingsRowV2>
   )
 }
 
-export const SettingsNotifications: Component = () => {
+export const SettingsNotificationsV2: Component = () => {
   const language = useLanguage()
   const settings = useSettings()
   const sounds = createSoundSettingsController()
 
   return (
     <>
-      <div class="settings-tab-header">
-        <div class="settings-tab-header-row">
+      <div class="settings-v2-tab-header">
+        <div class="settings-v2-tab-header-row">
           <div class="flex flex-col gap-1">
-            <h2 class="settings-tab-title">{language.t("settings.tab.notifications")}</h2>
+            <h2 class="settings-v2-tab-title">{language.t("settings.tab.notifications")}</h2>
             <span class="text-11-regular text-v2-text-text-muted">
               {language.t("settings.notifications.description")}
             </span>
@@ -71,11 +67,11 @@ export const SettingsNotifications: Component = () => {
         </div>
       </div>
 
-      <div class="settings-tab-body">
-        <div class="settings-section">
-          <h3 class="settings-section-title">{language.t("settings.general.section.notifications")}</h3>
-          <SettingsList>
-            <SettingsRow
+      <div class="settings-v2-tab-body">
+        <div class="settings-v2-section">
+          <h3 class="settings-v2-section-title">{language.t("settings.general.section.notifications")}</h3>
+          <SettingsListV2>
+            <SettingsRowV2
               title={language.t("settings.general.notifications.agent.title")}
               description={language.t("settings.general.notifications.agent.description")}
             >
@@ -85,9 +81,9 @@ export const SettingsNotifications: Component = () => {
                   onChange={(checked) => settings.notifications.setAgent(checked)}
                 />
               </div>
-            </SettingsRow>
+            </SettingsRowV2>
 
-            <SettingsRow
+            <SettingsRowV2
               title={language.t("settings.general.notifications.permissions.title")}
               description={language.t("settings.general.notifications.permissions.description")}
             >
@@ -97,9 +93,9 @@ export const SettingsNotifications: Component = () => {
                   onChange={(checked) => settings.notifications.setPermissions(checked)}
                 />
               </div>
-            </SettingsRow>
+            </SettingsRowV2>
 
-            <SettingsRow
+            <SettingsRowV2
               title={language.t("settings.general.notifications.errors.title")}
               description={language.t("settings.general.notifications.errors.description")}
             >
@@ -109,17 +105,17 @@ export const SettingsNotifications: Component = () => {
                   onChange={(checked) => settings.notifications.setErrors(checked)}
                 />
               </div>
-            </SettingsRow>
-          </SettingsList>
+            </SettingsRowV2>
+          </SettingsListV2>
         </div>
 
-        <div class="settings-section">
-          <h3 class="settings-section-title">{language.t("settings.general.section.sounds")}</h3>
-          <SettingsList>
+        <div class="settings-v2-section">
+          <h3 class="settings-v2-section-title">{language.t("settings.general.section.sounds")}</h3>
+          <SettingsListV2>
             <SoundSetting kind="agent" channel={sounds.agent} />
             <SoundSetting kind="permissions" channel={sounds.permissions} />
             <SoundSetting kind="errors" channel={sounds.errors} />
-          </SettingsList>
+          </SettingsListV2>
         </div>
       </div>
     </>

packages/app/src/components/settings-v2/parts/list.tsx

@@ -0,0 +1,6 @@
+import type { Component, JSX } from "solid-js"
+import "../settings-v2.css"
+
+export const SettingsListV2: Component<{ children: JSX.Element }> = (props) => {
+  return <div data-component="settings-v2-list">{props.children}</div>
+}

packages/app/src/components/settings-v2/parts/row.tsx

@@ -0,0 +1,20 @@
+import type { Component, JSX } from "solid-js"
+import "../settings-v2.css"
+
+export interface SettingsRowV2Props {
+  title: string | JSX.Element
+  description: string | JSX.Element
+  children: JSX.Element
+}
+
+export const SettingsRowV2: Component<SettingsRowV2Props> = (props) => {
+  return (
+    <div data-component="settings-v2-row">
+      <div data-slot="settings-v2-row-copy">
+        <div data-slot="settings-v2-row-title">{props.title}</div>
+        <div data-slot="settings-v2-row-description">{props.description}</div>
+      </div>
+      <div data-slot="settings-v2-row-control">{props.children}</div>
+    </div>
+  )
+}

packages/app/src/components/settings-v2/parts/server-select.tsx

@@ -1,7 +1,7 @@
 import { Show, createMemo, type Component } from "solid-js"
 import { Select } from "@opencode-ai/ui/select"
-import { useGlobal } from "@/runtime/server/runtime"
-import { ServerConnection, serverName } from "@/runtime/server/registry"
+import { useGlobal } from "@/context/global"
+import { ServerConnection, serverName } from "@/context/servers"
 
 const allServers = { type: "all" } as const
 type ServerOption = ServerConnection.Any | typeof allServers

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

@@ -3,16 +3,16 @@ import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Icon } from "@opencode-ai/ui/icon"
 import { ProjectAvatar } from "@opencode-ai/ui/project-avatar"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useGlobal } from "@/runtime/server/runtime"
-import { getProjectAvatarVariant } from "@/shell/state/layout"
-import { ServerConnection, serverName } from "@/runtime/server/registry"
-import { displayName } from "@/shell/layout/helpers"
-import { InlineServerSelect } from "@/settings/server-select"
-import { DialogEditProject } from "./project-dialog"
-import "@/settings/settings.css"
+import { useLanguage } from "@/context/language"
+import { useGlobal } from "@/context/global"
+import { getProjectAvatarVariant } from "@/context/layout"
+import { ServerConnection, serverName } from "@/context/servers"
+import { displayName } from "@/pages/layout/helpers"
+import { InlineServerSelect } from "./parts/server-select"
+import { DialogEditProjectV2 } from "../dialog-edit-project-v2"
+import "./settings-v2.css"
 
-export const SettingsProjects: Component = () => {
+export const SettingsProjectsV2: Component = () => {
   const dialog = useDialog()
   const language = useLanguage()
   const global = useGlobal()
@@ -35,7 +35,7 @@ export const SettingsProjects: Component = () => {
 
   const openProjectSettings = (project: ProjectItem, server = selected()) => {
     if (!server) return
-    dialog.push(() => <DialogEditProject project={project} server={server} />)
+    dialog.push(() => <DialogEditProjectV2 project={project} server={server} />)
   }
 
   const ProjectRow: Component<{ project: ProjectItem; server: ServerConnection.Any }> = (props) => {
@@ -68,10 +68,10 @@ export const SettingsProjects: Component = () => {
 
   return (
     <>
-      <div class="settings-tab-header">
-        <div class="settings-tab-header-row">
+      <div class="settings-v2-tab-header">
+        <div class="settings-v2-tab-header-row">
           <div class="flex flex-col gap-1">
-            <h2 class="settings-tab-title">{language.t("settings.projects.title")}</h2>
+            <h2 class="settings-v2-tab-title">{language.t("settings.projects.title")}</h2>
             <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.projects.description")}</span>
           </div>
           <InlineServerSelect
@@ -85,7 +85,7 @@ export const SettingsProjects: Component = () => {
         </div>
       </div>
 
-      <div class="settings-tab-body">
+      <div class="settings-v2-tab-body">
         <Show
           when={allServers()}
           fallback={
@@ -118,8 +118,8 @@ export const SettingsProjects: Component = () => {
             >
               <For each={groups()}>
                 {(group) => (
-                  <div class="settings-section">
-                    <h3 class="settings-section-title">
+                  <div class="settings-v2-section">
+                    <h3 class="settings-v2-section-title">
                       {serverName(group.server) || ServerConnection.key(group.server)}
                     </h3>
                     <div class="flex flex-col gap-2 w-full">

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

@@ -2,17 +2,18 @@ import { Button } from "@opencode-ai/ui/button"
 import { Badge } from "@opencode-ai/ui/badge"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
-import { showToast } from "@/shell/notifications/toast"
-import { popularProviders, useProviders } from "@/providers/catalog/providers"
-import { useIntegrations } from "@/providers/catalog/integrations"
+import { showToast } from "@/utils/toast"
+import { popularProviders, useProviders } from "@/hooks/use-providers"
+import { useIntegrations } from "@/hooks/use-integrations"
 import { createMemo, type Component, For, Show } from "solid-js"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useServerSDK } from "@/runtime/server/client"
-import { DialogConnectProvider, useProviderConnectController } from "@/providers/connect/dialog"
-import { SettingsServerScope } from "@/settings/server-scope"
-import { InlineServerSelect } from "@/settings/server-select"
-import { SettingsList } from "@/settings/list"
-import "@/settings/settings.css"
+import { useLanguage } from "@/context/language"
+import { useServerSDK } from "@/context/server-sdk"
+import { DialogConnectProvider, useProviderConnectController } from "../dialog-connect-provider"
+import { DialogCustomProvider } from "../dialog-custom-provider"
+import { SettingsServerScope } from "../settings-server-picker"
+import { InlineServerSelect } from "./parts/server-select"
+import { SettingsListV2 } from "./parts/list"
+import "./settings-v2.css"
 
 type ProviderSource = "env" | "api" | "config" | "custom"
 type ProviderItem = ReturnType<ReturnType<typeof useProviders>["connected"]>[number]
@@ -30,7 +31,7 @@ const PROVIDER_NOTES = [
 
 const PROVIDER_ICON_SIZE = 16
 
-export const SettingsProviders: Component<{
+export const SettingsProvidersV2: Component<{
   directory: string | undefined
   onBack?: () => void
 }> = (props) => {
@@ -127,43 +128,45 @@ export const SettingsProviders: Component<{
 
   return (
     <>
-      <div class="settings-tab-header">
-        <div class="settings-tab-header-row">
+      <div class="settings-v2-tab-header">
+        <div class="settings-v2-tab-header-row">
           <div class="flex flex-col gap-1">
-            <h2 class="settings-tab-title">{language.t("settings.providers.title")}</h2>
+            <h2 class="settings-v2-tab-title">{language.t("settings.providers.title")}</h2>
             <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.providers.description")}</span>
           </div>
           <InlineServerSelect />
         </div>
       </div>
 
-      <div class="settings-tab-body settings-providers">
-        <div class="settings-section" data-component="connected-providers-section">
-          <h3 class="settings-section-title">{language.t("settings.providers.section.connected")}</h3>
-          <SettingsList>
+      <div class="settings-v2-tab-body settings-v2-providers">
+        <div class="settings-v2-section" data-component="connected-providers-section">
+          <h3 class="settings-v2-section-title">{language.t("settings.providers.section.connected")}</h3>
+          <SettingsListV2>
             <Show
               when={connected().length > 0}
-              fallback={<div class="settings-provider-empty">{language.t("settings.providers.connected.empty")}</div>}
+              fallback={
+                <div class="settings-v2-provider-empty">{language.t("settings.providers.connected.empty")}</div>
+              }
             >
               <For each={connected()}>
                 {(item) => (
-                  <div class="settings-provider-row group">
-                    <div class="settings-provider-lead">
+                  <div class="settings-v2-provider-row group">
+                    <div class="settings-v2-provider-lead">
                       <ProviderIcon
                         id={item.id}
                         width={PROVIDER_ICON_SIZE}
                         height={PROVIDER_ICON_SIZE}
-                        class="settings-provider-icon shrink-0"
+                        class="settings-v2-provider-icon shrink-0"
                       />
-                      <div class="settings-provider-main">
-                        <span class="settings-provider-name truncate">{item.name}</span>
+                      <div class="settings-v2-provider-main">
+                        <span class="settings-v2-provider-name truncate">{item.name}</span>
                         <Badge>{type(item)}</Badge>
                       </div>
                     </div>
                     <Show
                       when={canDisconnect(item)}
                       fallback={
-                        <span class="settings-provider-env-hint">
+                        <span class="settings-v2-provider-env-hint">
                           {language.t("settings.providers.connected.environmentDescription")}
                         </span>
                       }
@@ -176,31 +179,31 @@ export const SettingsProviders: Component<{
                 )}
               </For>
             </Show>
-          </SettingsList>
+          </SettingsListV2>
         </div>
 
-        <div class="settings-section">
-          <h3 class="settings-section-title">{language.t("settings.providers.section.popular")}</h3>
-          <SettingsList>
+        <div class="settings-v2-section">
+          <h3 class="settings-v2-section-title">{language.t("settings.providers.section.popular")}</h3>
+          <SettingsListV2>
             <For each={popular()}>
               {(item) => (
-                <div class="settings-provider-row">
-                  <div class="settings-provider-lead">
+                <div class="settings-v2-provider-row">
+                  <div class="settings-v2-provider-lead">
                     <ProviderIcon
                       id={item.id}
                       width={PROVIDER_ICON_SIZE}
                       height={PROVIDER_ICON_SIZE}
-                      class="settings-provider-icon shrink-0"
+                      class="settings-v2-provider-icon shrink-0"
                     />
-                    <div class="settings-provider-copy">
-                      <div class="settings-provider-main">
-                        <span class="settings-provider-name">{item.name}</span>
+                    <div class="settings-v2-provider-copy">
+                      <div class="settings-v2-provider-main">
+                        <span class="settings-v2-provider-name">{item.name}</span>
                         <Show when={item.id === "opencode" || item.id === "opencode-go"}>
                           <Badge>{language.t("dialog.provider.tag.recommended")}</Badge>
                         </Show>
                       </div>
                       <Show when={note(item.id)}>
-                        {(key) => <p class="settings-provider-description">{language.t(key())}</p>}
+                        {(key) => <p class="settings-v2-provider-description">{language.t(key())}</p>}
                       </Show>
                     </div>
                   </div>
@@ -210,9 +213,45 @@ export const SettingsProviders: Component<{
                 </div>
               )}
             </For>
-          </SettingsList>
 
-          <button type="button" class="settings-providers-view-all" onClick={() => connect()}>
+            <Show when={false}>
+              <div class="settings-v2-provider-row" data-component="custom-provider-section">
+                <div class="settings-v2-provider-lead">
+                  <ProviderIcon
+                    id="synthetic"
+                    width={PROVIDER_ICON_SIZE}
+                    height={PROVIDER_ICON_SIZE}
+                    class="settings-v2-provider-icon shrink-0"
+                  />
+                  <div class="settings-v2-provider-copy">
+                    <div class="settings-v2-provider-main">
+                      <span class="settings-v2-provider-name">{language.t("provider.custom.title")}</span>
+                      <Badge>{language.t("settings.providers.tag.custom")}</Badge>
+                    </div>
+                    <p class="settings-v2-provider-description">
+                      {language.t("settings.providers.custom.description")}
+                    </p>
+                  </div>
+                </div>
+                <Button
+                  size="normal"
+                  variant="neutral"
+                  icon="plus"
+                  onClick={() => {
+                    dialog.show(() => (
+                      <SettingsServerScope directory={props.directory}>
+                        <DialogCustomProvider onBack={dialog.close} />
+                      </SettingsServerScope>
+                    ))
+                  }}
+                >
+                  {language.t("common.connect")}
+                </Button>
+              </div>
+            </Show>
+          </SettingsListV2>
+
+          <button type="button" class="settings-v2-providers-view-all" onClick={() => connect()}>
             {language.t("dialog.provider.viewAll")}
           </button>
         </div>

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

@@ -6,17 +6,17 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import fuzzysort from "fuzzysort"
 import { type Component, For, Show, createMemo } from "solid-js"
 import { createStore } from "solid-js/store"
-import { ServerRowMenu } from "@/servers/registry/row-menu"
-import { ServerHealthIndicator } from "@/servers/registry/row"
-import { useLanguage } from "@/runtime/i18n/language"
-import { ServerConnection, serverName } from "@/runtime/server/registry"
-import { useServerCollectionController } from "@/servers/registry/controller"
-import { DialogServer } from "@/servers/connect/dialog"
-import { SettingsList } from "@/settings/list"
-import { AddServerMenu, isWslServer, useFilteredWslServers, WslServerSettings } from "@/servers/wsl/settings"
-import "@/settings/settings.css"
+import { ServerRowMenu } from "@/components/server/server-row-menu"
+import { ServerHealthIndicator } from "@/components/server/server-row"
+import { useLanguage } from "@/context/language"
+import { ServerConnection, serverName } from "@/context/servers"
+import { useServerCollectionController } from "../server/server-management-controller"
+import { DialogServerV2 } from "./dialog-server-v2"
+import { SettingsListV2 } from "./parts/list"
+import { AddServerMenu, isWslServer, useFilteredWslServers, WslServerSettings } from "@/wsl/settings"
+import "./settings-v2.css"
 
-export const SettingsServers: Component = () => {
+export const SettingsServersV2: Component = () => {
   const dialog = useDialog()
   const language = useLanguage()
   const controller = useServerCollectionController()
@@ -39,28 +39,28 @@ export const SettingsServers: Component = () => {
   })
 
   const openAdd = () => {
-    void dialog.push(() => <DialogServer mode="add" />)
+    void dialog.push(() => <DialogServerV2 mode="add" />)
   }
 
   const openEdit = (server: ServerConnection.Http) => {
-    void dialog.push(() => <DialogServer mode="edit" server={server} />)
+    void dialog.push(() => <DialogServerV2 mode="edit" server={server} />)
   }
 
   return (
     <>
       <div
-        class="settings-tab-header settings-servers-header"
-        classList={{ "settings-tab-header--stacked": showSearch() }}
+        class="settings-v2-tab-header settings-v2-servers-header"
+        classList={{ "settings-v2-tab-header--stacked": showSearch() }}
       >
-        <div class="settings-tab-header-row">
+        <div class="settings-v2-tab-header-row">
           <div class="flex flex-col gap-1">
-            <h2 class="settings-tab-title">{language.t("status.popover.tab.servers")}</h2>
+            <h2 class="settings-v2-tab-title">{language.t("status.popover.tab.servers")}</h2>
             <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.servers.description")}</span>
           </div>
           <AddServerMenu onAddServer={openAdd} />
         </div>
         <Show when={showSearch()}>
-          <div class="settings-tab-search">
+          <div class="settings-v2-tab-search">
             <TextInput
               type="search"
               appearance="base"
@@ -78,7 +78,7 @@ export const SettingsServers: Component = () => {
                 type="button"
                 variant="ghost-muted"
                 size="small"
-                class="settings-tab-search-clear"
+                class="settings-v2-tab-search-clear"
                 icon={<Icon name="close" size="large" class="text-v2-icon-icon-muted" />}
                 onClick={() => setStore("filter", "")}
               />
@@ -87,19 +87,19 @@ export const SettingsServers: Component = () => {
         </Show>
       </div>
 
-      <div class="settings-tab-body settings-servers">
+      <div class="settings-v2-tab-body settings-v2-servers">
         <Show
           when={filtered().length > 0 || wslServers().length > 0}
           fallback={
-            <div class="settings-servers-status">
+            <div class="settings-v2-servers-status">
               <span>{store.filter ? language.t("palette.empty") : language.t("dialog.server.empty")}</span>
               <Show when={store.filter}>
-                <span class="settings-servers-status-filter">&quot;{store.filter}&quot;</span>
+                <span class="settings-v2-servers-status-filter">&quot;{store.filter}&quot;</span>
               </Show>
             </div>
           }
         >
-          <SettingsList>
+          <SettingsListV2>
             <WslServerSettings domain={controller} servers={wslServers} />
             <For each={filtered()}>
               {(item) => {
@@ -107,12 +107,12 @@ export const SettingsServers: Component = () => {
                 const health = () => controller.collection.health()[key]
                 const isDefault = () => controller.defaults.key() === key
                 return (
-                  <div class="settings-servers-row">
-                    <div class="settings-servers-lead">
+                  <div class="settings-v2-servers-row">
+                    <div class="settings-v2-servers-lead">
                       <ServerHealthIndicator health={health()} />
-                      <div class="settings-servers-copy">
-                        <span class="settings-servers-name">{serverName(item)}</span>
-                        <span class="settings-servers-meta">
+                      <div class="settings-v2-servers-copy">
+                        <span class="settings-v2-servers-name">{serverName(item)}</span>
+                        <span class="settings-v2-servers-meta">
                           <Show when={health()?.version}>v{health()?.version}</Show>
                           <Show when={health()?.version && item.type === "http"}> • </Show>
                           <Show
@@ -124,7 +124,7 @@ export const SettingsServers: Component = () => {
                         </span>
                       </div>
                     </div>
-                    <div class="settings-servers-actions">
+                    <div class="settings-v2-servers-actions">
                       <Show when={controller.defaults.available() && isDefault()}>
                         <Badge>{language.t("dialog.server.status.default")}</Badge>
                       </Show>
@@ -134,7 +134,7 @@ export const SettingsServers: Component = () => {
                 )
               }}
             </For>
-          </SettingsList>
+          </SettingsListV2>
         </Show>
       </div>
     </>

packages/app/src/components/settings-v2/settings-v2.css

@@ -14,7 +14,7 @@
   overflow: hidden;
 }
 
-.settings-panel {
+.settings-v2-panel {
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -23,15 +23,15 @@
   user-select: none;
 }
 
-.settings-panel :is(input, textarea, [contenteditable="true"]) {
+.settings-v2-panel :is(input, textarea, [contenteditable="true"]) {
   user-select: text;
 }
 
-.settings-panel::-webkit-scrollbar {
+.settings-v2-panel::-webkit-scrollbar {
   display: none;
 }
 
-.settings-tab-header {
+.settings-v2-tab-header {
   position: sticky;
   top: 0;
   z-index: 10;
@@ -39,7 +39,7 @@
   background: linear-gradient(to bottom, var(--v2-background-bg-base) calc(100% - 24px), transparent);
 }
 
-.settings-tab-header-row {
+.settings-v2-tab-header-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -47,14 +47,14 @@
   width: 100%;
 }
 
-.settings-tab-title {
+.settings-v2-tab-title {
   font-size: 15px;
   font-weight: 640;
   line-height: 1;
   color: var(--v2-text-text-base);
 }
 
-.settings-tab-body {
+.settings-v2-tab-body {
   display: flex;
   flex-direction: column;
   gap: 36px;
@@ -62,23 +62,23 @@
   padding: 0 40px 40px;
 }
 
-[data-slot="settings-row-description"] a.settings-link {
+[data-slot="settings-v2-row-description"] a.settings-v2-link {
   color: var(--v2-text-text-accent);
   cursor: pointer;
   text-decoration: none;
 }
 
-[data-slot="settings-row-description"] a.settings-link:hover {
+[data-slot="settings-v2-row-description"] a.settings-v2-link:hover {
   color: var(--v2-text-text-accent-hover);
 }
 
-.settings-section {
+.settings-v2-section {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
 
-.settings-section-title {
+.settings-v2-section-title {
   padding-bottom: 8px;
   font-size: 15px;
   font-weight: 640;
@@ -86,24 +86,24 @@
   color: var(--v2-text-text-base);
 }
 
-.settings-section-title + [data-component="settings-list"] {
+.settings-v2-section-title + [data-component="settings-v2-list"] {
   margin-top: -4px;
   margin-bottom: 0;
 }
 
-[data-component="settings-list"] {
+[data-component="settings-v2-list"] {
   border-radius: 8px;
   background-color: var(--v2-background-bg-layer-01);
   padding-inline: 20px;
   box-shadow: inset 0 0 0 0.5px var(--v2-border-border-muted);
 }
 
-.settings-interface-feature [data-component="settings-list"] {
+.settings-v2-interface-feature [data-component="settings-v2-list"] {
   background-color: var(--v2-background-bg-base);
   box-shadow: var(--v2-elevation-raised);
 }
 
-[data-component="settings-row"] {
+[data-component="settings-v2-row"] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -112,17 +112,17 @@
   border-bottom: 0.5px solid var(--v2-border-border-base);
 }
 
-[data-component="settings-row"]:last-child {
+[data-component="settings-v2-row"]:last-child {
   border-bottom: none;
 }
 
 @media (min-width: 640px) {
-  [data-component="settings-row"] {
+  [data-component="settings-v2-row"] {
     flex-wrap: nowrap;
   }
 }
 
-[data-slot="settings-row-copy"] {
+[data-slot="settings-v2-row-copy"] {
   display: flex;
   min-width: 0;
   flex: 1;
@@ -130,7 +130,7 @@
   gap: 8px;
 }
 
-[data-slot="settings-row-title"] {
+[data-slot="settings-v2-row-title"] {
   font-style: normal;
   font-size: 13px;
   font-weight: 530;
@@ -140,7 +140,7 @@
   font-variation-settings: "slnt" 0;
 }
 
-[data-slot="settings-row-description"] {
+[data-slot="settings-v2-row-description"] {
   margin-block: -3.5px;
   font-size: 13px;
   font-weight: 440;
@@ -148,27 +148,27 @@
   color: var(--v2-text-text-muted);
 }
 
-[data-slot="settings-row-control"] {
+[data-slot="settings-v2-row-control"] {
   display: flex;
   width: 100%;
   justify-content: flex-end;
 }
 
-[data-slot="settings-row-control"] > div:has([data-component="switch"]),
-[data-slot="settings-row-control"] > [data-component="switch"] {
+[data-slot="settings-v2-row-control"] > div:has([data-component="switch"]),
+[data-slot="settings-v2-row-control"] > [data-component="switch"] {
   display: inline-flex;
   align-items: center;
   padding: 4px;
 }
 
 @media (min-width: 640px) {
-  [data-slot="settings-row-control"] {
+  [data-slot="settings-v2-row-control"] {
     width: auto;
     flex-shrink: 0;
   }
 }
 
-[data-slot="settings-row-control"] [data-component="text-input-v2"] {
+[data-slot="settings-v2-row-control"] [data-component="text-input-v2"] {
   width: 100%;
 }
 
@@ -187,7 +187,7 @@
 }
 
 @media (max-width: 639px) {
-  .settings[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
+  .settings-v2[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
     > [data-slot="tabs-v2-list"] {
     width: 144px;
     min-width: 144px;
@@ -195,7 +195,7 @@
   }
 }
 
-.settings-nav-footer {
+.settings-v2-nav-footer {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -203,14 +203,14 @@
   user-select: none;
 }
 
-.settings-nav-footer > span {
+.settings-v2-nav-footer > span {
   font-size: 11px;
   font-weight: 440;
   line-height: 1;
   color: var(--v2-text-text-faint);
 }
 
-.settings-provider-row {
+.settings-v2-provider-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -220,21 +220,21 @@
   border-bottom: 0.5px solid var(--v2-border-border-base);
 }
 
-.settings-provider-row:last-child {
+.settings-v2-provider-row:last-child {
   border-bottom: none;
 }
 
 @media (min-width: 640px) {
-  .settings-provider-row {
+  .settings-v2-provider-row {
     flex-wrap: nowrap;
   }
 }
 
-.settings-providers [data-component="provider-icon"] {
+.settings-v2-providers [data-component="provider-icon"] {
   color: var(--v2-icon-icon-base);
 }
 
-.settings-provider-lead {
+.settings-v2-provider-lead {
   display: flex;
   min-width: 0;
   flex: 1;
@@ -242,11 +242,11 @@
   gap: 10px;
 }
 
-.settings-provider-lead:not(:has(.settings-provider-copy)) {
+.settings-v2-provider-lead:not(:has(.settings-v2-provider-copy)) {
   align-items: center;
 }
 
-.settings-provider-copy {
+.settings-v2-provider-copy {
   display: flex;
   min-width: 0;
   flex: 1;
@@ -254,7 +254,7 @@
   gap: 6px;
 }
 
-.settings-provider-main {
+.settings-v2-provider-main {
   display: flex;
   min-width: 0;
   flex-wrap: wrap;
@@ -262,14 +262,14 @@
   gap: 8px;
 }
 
-.settings-provider-name {
+.settings-v2-provider-name {
   font-size: 13px;
   font-weight: 530;
   line-height: 16px;
   color: var(--v2-text-text-base);
 }
 
-.settings-provider-description {
+.settings-v2-provider-description {
   margin-block: -3.5px;
   font-size: 13px;
   font-weight: 440;
@@ -277,7 +277,7 @@
   color: var(--v2-text-text-muted);
 }
 
-.settings-provider-empty {
+.settings-v2-provider-empty {
   padding-block: 20px;
   font-size: 13px;
   font-weight: 440;
@@ -285,7 +285,7 @@
   color: var(--v2-text-text-muted);
 }
 
-.settings-provider-env-hint {
+.settings-v2-provider-env-hint {
   padding-inline-end: 12px;
   font-size: 13px;
   font-weight: 440;
@@ -296,11 +296,11 @@
   cursor: default;
 }
 
-.group:hover .settings-provider-env-hint {
+.group:hover .settings-v2-provider-env-hint {
   opacity: 1;
 }
 
-.settings-providers-view-all {
+.settings-v2-providers-view-all {
   margin-top: 20px;
   padding: 0;
   border: 0;
@@ -313,57 +313,57 @@
   text-align: start;
 }
 
-.settings-providers-view-all:hover {
+.settings-v2-providers-view-all:hover {
   color: var(--v2-text-text-accent-hover);
 }
 
-.settings-tab-body.settings-providers {
+.settings-v2-tab-body.settings-v2-providers {
   gap: 32px;
 }
 
-.settings-tab-header:has(+ .settings-tab-body.settings-providers) {
+.settings-v2-tab-header:has(+ .settings-v2-tab-body.settings-v2-providers) {
   padding-bottom: 32px;
 }
 
-.settings-providers .settings-section-title {
+.settings-v2-providers .settings-v2-section-title {
   padding-bottom: 0;
   font-size: 13px;
   font-weight: 530;
   line-height: 1;
 }
 
-.settings-providers .settings-section-title + [data-component="settings-list"] {
+.settings-v2-providers .settings-v2-section-title + [data-component="settings-v2-list"] {
   margin-top: 16px;
 }
 
-.settings-tab-header.settings-tab-header--stacked {
+.settings-v2-tab-header.settings-v2-tab-header--stacked {
   display: flex;
   flex-direction: column;
   gap: 32px;
   padding-bottom: 32px;
 }
 
-.settings-tab-header--stacked > .settings-tab-header-row {
+.settings-v2-tab-header--stacked > .settings-v2-tab-header-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
 }
 
-.settings-tab-search {
+.settings-v2-tab-search {
   position: relative;
   width: 100%;
 }
 
-.settings-tab-search [data-component="text-input-v2"] {
+.settings-v2-tab-search [data-component="text-input-v2"] {
   width: 100%;
 }
 
-.settings-tab-search [data-slot="text-input-v2-input"] {
+.settings-v2-tab-search [data-slot="text-input-v2-input"] {
   padding-inline-end: 28px;
 }
 
-.settings-tab-search-clear {
+.settings-v2-tab-search-clear {
   position: absolute;
   top: 50%;
   inset-inline-end: 6px;
@@ -371,25 +371,25 @@
   transform: translateY(-50%);
 }
 
-.settings-models {
+.settings-v2-models {
   gap: 12px;
 }
 
-.settings-models .settings-section {
+.settings-v2-models .settings-v2-section {
   gap: 12px;
 }
 
-.settings-models .settings-section[data-expanded] {
+.settings-v2-models .settings-v2-section[data-expanded] {
   padding-bottom: 12px;
 }
 
-.settings-models-group-header {
+.settings-v2-models-group-header {
   display: flex;
   align-items: center;
   height: 28px;
 }
 
-.settings-models-group-trigger {
+.settings-v2-models-group-trigger {
   display: flex;
   align-items: center;
   gap: 4px;
@@ -401,22 +401,22 @@
   color: var(--v2-text-text-base);
 }
 
-.settings-models-group-trigger:focus-visible {
+.settings-v2-models-group-trigger:focus-visible {
   outline: 2px solid var(--v2-border-border-focus);
   outline-offset: 2px;
 }
 
 @media (hover: hover) {
-  .settings-models-group-trigger:not(:disabled):hover {
+  .settings-v2-models-group-trigger:not(:disabled):hover {
     background-color: var(--v2-background-bg-layer-02);
   }
 }
 
-.settings-models-group-trigger:disabled {
+.settings-v2-models-group-trigger:disabled {
   cursor: default;
 }
 
-.settings-models-group-chevron {
+.settings-v2-models-group-chevron {
   display: flex;
   width: 20px;
   height: 20px;
@@ -426,40 +426,40 @@
   color: var(--v2-icon-icon-muted);
 }
 
-.settings-models-group-label {
+.settings-v2-models-group-label {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.settings-models .settings-section-title {
+.settings-v2-models .settings-v2-section-title {
   padding-bottom: 0;
   font-size: 13px;
   font-weight: 530;
   line-height: 16px;
 }
 
-.settings-models [data-component="provider-icon"] {
+.settings-v2-models [data-component="provider-icon"] {
   color: var(--v2-icon-icon-base);
 }
 
-.settings-models [data-component="settings-list"] {
+.settings-v2-models [data-component="settings-v2-list"] {
   padding-inline: 16px;
 }
 
-.settings-models .settings-section-title + [data-component="settings-list"] {
+.settings-v2-models .settings-v2-section-title + [data-component="settings-v2-list"] {
   margin-top: 0;
 }
 
-.settings-models [data-slot="settings-row-description"]:empty {
+.settings-v2-models [data-slot="settings-v2-row-description"]:empty {
   display: none;
 }
 
-.settings-models [data-slot="settings-row-copy"] {
+.settings-v2-models [data-slot="settings-v2-row-copy"] {
   gap: 0;
 }
 
-.settings-models [data-slot="settings-row-title"] {
+.settings-v2-models [data-slot="settings-v2-row-title"] {
   min-width: 0;
   overflow: hidden;
   font-size: 13px;
@@ -469,7 +469,7 @@
   white-space: nowrap;
 }
 
-.settings-models-status {
+.settings-v2-models-status {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -483,22 +483,22 @@
   text-align: center;
 }
 
-.settings-models-status-filter {
+.settings-v2-models-status-filter {
   color: var(--v2-text-text-base);
 }
 
-.settings-shortcuts .settings-section {
+.settings-v2-shortcuts .settings-v2-section {
   gap: 16px;
 }
 
-.settings-shortcuts .settings-section-title {
+.settings-v2-shortcuts .settings-v2-section-title {
   padding-bottom: 0;
   font-size: 13px;
   font-weight: 530;
   line-height: 1;
 }
 
-.settings-shortcuts [data-component="settings-list"] {
+.settings-v2-shortcuts [data-component="settings-v2-list"] {
   display: flex;
   flex-direction: column;
   gap: 0;
@@ -506,7 +506,7 @@
   border-radius: 6px;
 }
 
-.settings-shortcuts [data-component="settings-list"] > div {
+.settings-v2-shortcuts [data-component="settings-v2-list"] > div {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -516,13 +516,13 @@
   border-bottom: none;
 }
 
-.settings-shortcuts [data-component="settings-list"] > div:not(:last-child) {
+.settings-v2-shortcuts [data-component="settings-v2-list"] > div:not(:last-child) {
   padding-bottom: 16px;
   margin-bottom: 16px;
   border-bottom: 0.5px solid var(--v2-border-border-base);
 }
 
-.settings-shortcuts [data-component="settings-list"] > div > span {
+.settings-v2-shortcuts [data-component="settings-v2-list"] > div > span {
   font-weight: 440;
   font-size: 13px;
   line-height: 1;
@@ -531,7 +531,7 @@
   font-variation-settings: "slnt" 0;
 }
 
-.settings-keybind-button {
+.settings-v2-keybind-button {
   box-sizing: border-box;
   flex-shrink: 0;
   padding: 6px 8px;
@@ -553,22 +553,22 @@
   color: var(--v2-text-text-faint);
 }
 
-.settings-keybind-button:hover {
+.settings-v2-keybind-button:hover {
   background-color: var(--v2-background-bg-layer-02);
 }
 
-.settings-keybind-button:focus-visible {
+.settings-v2-keybind-button:focus-visible {
   outline: 2px solid var(--v2-border-border-focus);
   outline-offset: 2px;
 }
 
-.settings-keybind-button--active {
+.settings-v2-keybind-button--active {
   color: var(--v2-text-text-faint);
   border-radius: 2px;
   background-color: var(--v2-background-bg-layer-02);
 }
 
-.settings-shortcuts-status {
+.settings-v2-shortcuts-status {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -582,31 +582,31 @@
   text-align: center;
 }
 
-.settings-shortcuts-status-filter {
+.settings-v2-shortcuts-status-filter {
   color: var(--v2-text-text-base);
 }
 
-.settings-tab-body.settings-servers {
+.settings-v2-tab-body.settings-v2-servers {
   gap: 0;
 }
 
-.settings-tab-header.settings-servers-header {
+.settings-v2-tab-header.settings-v2-servers-header {
   padding-bottom: 24px;
 }
 
-.settings-servers-header .settings-tab-header-row {
+.settings-v2-servers-header .settings-v2-tab-header-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
 }
 
-.settings-tab-header.settings-servers-header.settings-tab-header--stacked {
+.settings-v2-tab-header.settings-v2-servers-header.settings-v2-tab-header--stacked {
   gap: 24px;
   padding-bottom: 24px;
 }
 
-.settings-servers [data-component="settings-list"] {
+.settings-v2-servers [data-component="settings-v2-list"] {
   display: flex;
   flex-direction: column;
   gap: 0;
@@ -614,20 +614,20 @@
   border-radius: 6px;
 }
 
-.settings-servers-row {
+.settings-v2-servers-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
 }
 
-.settings-servers-row:not(:last-child) {
+.settings-v2-servers-row:not(:last-child) {
   padding-bottom: 16px;
   margin-bottom: 16px;
   border-bottom: 0.5px solid var(--v2-border-border-base);
 }
 
-.settings-servers-actions {
+.settings-v2-servers-actions {
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -635,7 +635,7 @@
   gap: 8px;
 }
 
-.settings-servers-lead {
+.settings-v2-servers-lead {
   display: flex;
   min-width: 0;
   flex: 1;
@@ -643,7 +643,7 @@
   gap: 10px;
 }
 
-.settings-servers-copy {
+.settings-v2-servers-copy {
   display: flex;
   min-width: 0;
   flex: 1;
@@ -651,21 +651,21 @@
   gap: 6px;
 }
 
-.settings-servers-name {
+.settings-v2-servers-name {
   font-size: 13px;
   font-weight: 530;
   line-height: 1;
   color: var(--v2-text-text-base);
 }
 
-.settings-servers-meta {
+.settings-v2-servers-meta {
   font-size: 11px;
   font-weight: 440;
   line-height: 1;
   color: var(--v2-text-text-muted);
 }
 
-.settings-servers-status {
+.settings-v2-servers-status {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -679,23 +679,23 @@
   text-align: center;
 }
 
-.settings-servers-status-filter {
+.settings-v2-servers-status-filter {
   color: var(--v2-text-text-base);
 }
 
-.settings-tab-header.settings-workspaces-header {
+.settings-v2-tab-header.settings-v2-workspaces-header {
   padding-bottom: 24px;
 }
 
-.settings-workspaces-header .settings-tab-title {
+.settings-v2-workspaces-header .settings-v2-tab-title {
   font-weight: 610;
 }
 
-.settings-tab-body.settings-workspaces {
+.settings-v2-tab-body.settings-v2-workspaces {
   gap: 16px;
 }
 
-.settings-workspaces-toolbar {
+.settings-v2-workspaces-toolbar {
   display: flex;
   min-width: 0;
   align-items: center;
@@ -703,24 +703,24 @@
   gap: 16px;
 }
 
-.settings-workspaces-count {
+.settings-v2-workspaces-count {
   font-size: 15px;
   font-weight: 530;
   line-height: 1;
   color: var(--v2-text-text-base);
 }
 
-.settings-workspaces-toolbar-actions {
+.settings-v2-workspaces-toolbar-actions {
   display: flex;
   align-items: center;
   gap: 4px;
 }
 
-.settings-workspaces-delete-all {
+.settings-v2-workspaces-delete-all {
   color: var(--v2-state-fg-danger);
 }
 
-.settings-workspaces-inventory [data-component="settings-list"] {
+.settings-v2-workspaces-inventory [data-component="settings-v2-list"] {
   display: flex;
   flex-direction: column;
   gap: 0;
@@ -730,20 +730,20 @@
   box-shadow: inset 0 0 0 0.5px var(--v2-border-border-base);
 }
 
-.settings-workspaces-row {
+.settings-v2-workspaces-row {
   display: flex;
   min-width: 0;
   flex-direction: column;
   gap: 12px;
 }
 
-.settings-workspaces-row:not(:last-child) {
+.settings-v2-workspaces-row:not(:last-child) {
   padding-bottom: 20px;
   margin-bottom: 20px;
   border-bottom: 0.5px solid var(--v2-border-border-base);
 }
 
-.settings-workspaces-row-header {
+.settings-v2-workspaces-row-header {
   display: flex;
   min-width: 0;
   align-items: flex-start;
@@ -751,7 +751,7 @@
   gap: 20px;
 }
 
-.settings-workspaces-copy {
+.settings-v2-workspaces-copy {
   display: flex;
   min-width: 0;
   flex: 1;
@@ -759,12 +759,12 @@
   gap: 8px;
 }
 
-.settings-workspaces-main {
+.settings-v2-workspaces-main {
   display: flex;
   min-width: 0;
 }
 
-.settings-workspaces-row-actions {
+.settings-v2-workspaces-row-actions {
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -772,11 +772,11 @@
   gap: 12px;
 }
 
-.settings-workspaces-main [data-component="tooltip-v2-trigger"] {
+.settings-v2-workspaces-main [data-component="tooltip-v2-trigger"] {
   min-width: 0;
 }
 
-.settings-workspaces-path {
+.settings-v2-workspaces-path {
   display: block;
   min-width: 0;
   overflow: hidden;
@@ -793,15 +793,15 @@
   cursor: default;
 }
 
-.settings-workspaces-meta {
+.settings-v2-workspaces-meta {
   font-size: 13px;
   font-weight: 440;
   line-height: 1;
   color: var(--v2-text-text-faint);
 }
 
-.settings-workspaces-active,
-.settings-workspaces-more {
+.settings-v2-workspaces-active,
+.settings-v2-workspaces-more {
   flex-shrink: 0;
   font-size: 11px;
   font-weight: 440;
@@ -809,7 +809,7 @@
   color: var(--v2-text-text-faint);
 }
 
-.settings-workspaces-sessions {
+.settings-v2-workspaces-sessions {
   display: flex;
   flex-direction: column;
   border: 0.5px solid var(--v2-border-border-base);
@@ -818,7 +818,7 @@
   overflow: hidden;
 }
 
-.settings-workspaces-session {
+.settings-v2-workspaces-session {
   display: flex;
   min-width: 0;
   align-items: center;
@@ -831,25 +831,25 @@
   color: var(--v2-text-text-base);
 }
 
-.settings-workspaces-session:not(:last-child) {
+.settings-v2-workspaces-session:not(:last-child) {
   border-bottom: 0.5px solid var(--v2-border-border-base);
 }
 
-.settings-workspaces-session > span:first-child {
+.settings-v2-workspaces-session > span:first-child {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.settings-workspaces-session-time {
+.settings-v2-workspaces-session-time {
   flex-shrink: 0;
   font-size: 11px;
   line-height: 1;
   color: var(--v2-text-text-muted);
 }
 
-.settings-workspaces-empty {
+.settings-v2-workspaces-empty {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -861,46 +861,46 @@
 }
 
 @media (max-width: 639px) {
-  .settings-workspaces-header {
+  .settings-v2-workspaces-header {
     padding: 24px 20px 20px;
   }
 
-  .settings-tab-body.settings-workspaces {
+  .settings-v2-tab-body.settings-v2-workspaces {
     padding: 0 20px 24px;
   }
 
-  .settings-workspaces-toolbar,
-  .settings-workspaces-main {
+  .settings-v2-workspaces-toolbar,
+  .settings-v2-workspaces-main {
     align-items: flex-start;
   }
 
-  .settings-workspaces-toolbar {
+  .settings-v2-workspaces-toolbar {
     flex-wrap: wrap;
   }
 
-  .settings-workspaces-toolbar-actions {
+  .settings-v2-workspaces-toolbar-actions {
     width: 100%;
     flex-wrap: wrap;
     justify-content: space-between;
   }
 
-  .settings-workspaces-inventory [data-component="settings-list"] {
+  .settings-v2-workspaces-inventory [data-component="settings-v2-list"] {
     padding: 14px;
   }
 
-  .settings-workspaces-path {
+  .settings-v2-workspaces-path {
     overflow: visible;
     text-overflow: clip;
     white-space: normal;
     overflow-wrap: anywhere;
   }
 
-  .settings-workspaces-active {
+  .settings-v2-workspaces-active {
     display: none;
   }
 }
 
-[data-component="dialog-v2"].settings-server-dialog [data-slot="dialog-container"] {
+[data-component="dialog-v2"].settings-v2-server-dialog [data-slot="dialog-container"] {
   width: 480px;
   max-width: calc(100vw - 32px);
   height: auto;
@@ -908,17 +908,17 @@
   align-items: stretch;
 }
 
-[data-component="dialog-v2"].settings-server-dialog [data-slot="dialog-content"] {
+[data-component="dialog-v2"].settings-v2-server-dialog [data-slot="dialog-content"] {
   align-items: stretch;
   width: 100%;
 }
 
-[data-component="dialog-v2"].settings-server-dialog [data-slot="dialog-header"] {
+[data-component="dialog-v2"].settings-v2-server-dialog [data-slot="dialog-header"] {
   align-items: center;
   padding: 24px 24px 16px;
 }
 
-[data-component="dialog-v2"].settings-server-dialog [data-slot="dialog-body"] {
+[data-component="dialog-v2"].settings-v2-server-dialog [data-slot="dialog-body"] {
   display: flex;
   width: 100%;
   min-width: 0;
@@ -926,40 +926,40 @@
   align-items: stretch;
 }
 
-[data-component="dialog-v2"].settings-server-dialog [data-slot="dialog-footer"] {
+[data-component="dialog-v2"].settings-v2-server-dialog [data-slot="dialog-footer"] {
   padding: 24px;
 }
 
-.settings-server-dialog-label {
+.settings-v2-server-dialog-label {
   font-size: 13px;
   font-weight: 530;
   line-height: 1;
   color: var(--v2-text-text-base);
 }
 
-.settings-server-dialog-error {
+.settings-v2-server-dialog-error {
   font-size: 11px;
   font-weight: 440;
   line-height: 1;
   color: var(--v2-state-fg-danger);
 }
 
-.settings-extensions-tabs[data-component="tabs-v2"][data-variant="pill"] > [data-slot="tabs-v2-list"] {
+.settings-v2-extensions-tabs[data-component="tabs-v2"][data-variant="pill"] > [data-slot="tabs-v2-list"] {
   width: 280px;
   padding-inline: 0 !important;
 }
 
-.settings-extensions-tabs[data-component="tabs-v2"][data-variant="pill"] > [data-slot="tabs-v2-list"]::before {
+.settings-v2-extensions-tabs[data-component="tabs-v2"][data-variant="pill"] > [data-slot="tabs-v2-list"]::before {
   display: none;
 }
 
-.settings-extensions-tabs[data-component="tabs-v2"][data-variant="pill"]
+.settings-v2-extensions-tabs[data-component="tabs-v2"][data-variant="pill"]
   > [data-slot="tabs-v2-list"]
   [data-slot="tabs-v2-trigger-wrapper"] {
   border-radius: 6px;
 }
 
-.settings-extensions-tabs[data-component="tabs-v2"][data-variant="pill"]
+.settings-v2-extensions-tabs[data-component="tabs-v2"][data-variant="pill"]
   > [data-slot="tabs-v2-list"]
   [data-slot="tabs-v2-trigger"] {
   padding-inline: 8px;

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

@@ -11,20 +11,20 @@ import { Menu } from "@opencode-ai/ui/menu"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { getFilename } from "@opencode-ai/util/path"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useServerSDK } from "@/runtime/server/client"
-import { useData } from "@/runtime/server/current"
-import { showToast } from "@/shell/notifications/toast"
-import { getRelativeTime } from "@/shell/time"
-import { sessionLabel } from "@/session/title"
-import { pathKey } from "@/workspaces/path-key"
-import { SettingsList } from "@/settings/list"
-import { InlineServerSelect } from "@/settings/server-select"
-import { useTabs } from "@/shell/tabs/tabs"
-import { usePlatform } from "@/runtime/platform/platform"
-import { clearWorkspaceTerminals } from "@/session/terminal/context"
-import { ServerConnection } from "@/runtime/server/registry"
-import type { Project } from "@/runtime/server/types"
+import { useLanguage } from "@/context/language"
+import { useServerSDK } from "@/context/server-sdk"
+import { useData } from "@/context/server"
+import { showToast } from "@/utils/toast"
+import { getRelativeTime } from "@/utils/time"
+import { sessionLabel } from "@/utils/session-title"
+import { pathKey } from "@/utils/path-key"
+import { SettingsListV2 } from "./parts/list"
+import { InlineServerSelect } from "./parts/server-select"
+import { useTabs } from "@/context/tabs"
+import { usePlatform } from "@/context/platform"
+import { clearWorkspaceTerminals } from "@/context/terminal"
+import { ServerConnection } from "@/context/servers"
+import type { Project } from "@/types"
 import {
   containsDirectory,
   filterWorkspaceInventory,
@@ -35,18 +35,18 @@ import {
   sessionsForWorkspace,
   type WorkspaceDeleteInspection,
   workspaceInventory,
-} from "@/workspaces/paths"
-import { listAllSessions } from "@/session/list"
-import type { ServerScope } from "@/runtime/server/scope"
-import { normalizeProjectInfo } from "@/runtime/server/global-sync/utils"
-import "@/settings/settings.css"
+} from "@/utils/workspace"
+import { listAllSessions } from "@/utils/session"
+import type { ServerScope } from "@/utils/server-scope"
+import { normalizeProjectInfo } from "@/context/global-sync/utils"
+import "./settings-v2.css"
 
 type Workspace = {
   directory: string
   project: Project
 }
 
-export const SettingsWorkspaces: Component<{ activeDirectory?: string }> = (props) => {
+export const SettingsWorkspacesV2: Component<{ activeDirectory?: string }> = (props) => {
   const dialog = useDialog()
   const language = useLanguage()
   const serverSDK = useServerSDK()
@@ -259,19 +259,19 @@ export const SettingsWorkspaces: Component<{ activeDirectory?: string }> = (prop
 
   return (
     <>
-      <div class="settings-tab-header settings-workspaces-header">
-        <div class="settings-tab-header-row">
-          <h2 class="settings-tab-title">{language.t("settings.tab.workspaces")}</h2>
+      <div class="settings-v2-tab-header settings-v2-workspaces-header">
+        <div class="settings-v2-tab-header-row">
+          <h2 class="settings-v2-tab-title">{language.t("settings.tab.workspaces")}</h2>
           <InlineServerSelect />
         </div>
       </div>
 
-      <div class="settings-tab-body settings-workspaces">
-        <div class="settings-workspaces-toolbar">
-          <span class="settings-workspaces-count">
+      <div class="settings-v2-tab-body settings-v2-workspaces">
+        <div class="settings-v2-workspaces-toolbar">
+          <span class="settings-v2-workspaces-count">
             {language.plural("settings.workspaces.count", filtered().length)}
           </span>
-          <div class="settings-workspaces-toolbar-actions">
+          <div class="settings-v2-workspaces-toolbar-actions">
             <Show when={projects().length > 1}>
               <Menu placement="bottom-end" gutter={6}>
                 <Menu.Trigger class="flex h-6 max-w-48 items-center gap-1 rounded-sm px-2 text-13-medium hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none data-[expanded]:bg-v2-overlay-simple-overlay-pressed">
@@ -310,7 +310,9 @@ export const SettingsWorkspaces: Component<{ activeDirectory?: string }> = (prop
                 <Menu.Portal>
                   <Menu.Content>
                     <Menu.Item onSelect={confirmDeleteAll}>
-                      <span class="settings-workspaces-delete-all">{language.t("settings.workspaces.deleteAll")}</span>
+                      <span class="settings-v2-workspaces-delete-all">
+                        {language.t("settings.workspaces.deleteAll")}
+                      </span>
                     </Menu.Item>
                   </Menu.Content>
                 </Menu.Portal>
@@ -319,20 +321,20 @@ export const SettingsWorkspaces: Component<{ activeDirectory?: string }> = (prop
           </div>
         </div>
 
-        <div class="settings-workspaces-inventory">
+        <div class="settings-v2-workspaces-inventory">
           <Show
             when={filtered().length > 0}
-            fallback={<div class="settings-workspaces-empty">{language.t("settings.workspaces.empty")}</div>}
+            fallback={<div class="settings-v2-workspaces-empty">{language.t("settings.workspaces.empty")}</div>}
           >
-            <SettingsList>
+            <SettingsListV2>
               <For each={filtered()}>
                 {(workspace) => {
                   const linked = () => workspaceSessions(workspace)
                   return (
-                    <div class="settings-workspaces-row">
-                      <div class="settings-workspaces-row-header">
-                        <div class="settings-workspaces-copy">
-                          <div class="settings-workspaces-main">
+                    <div class="settings-v2-workspaces-row">
+                      <div class="settings-v2-workspaces-row-header">
+                        <div class="settings-v2-workspaces-copy">
+                          <div class="settings-v2-workspaces-main">
                             <Tooltip
                               value={workspace.directory}
                               placement="top-start"
@@ -342,19 +344,19 @@ export const SettingsWorkspaces: Component<{ activeDirectory?: string }> = (prop
                                 tabIndex={0}
                                 dir="ltr"
                                 aria-label={workspace.directory}
-                                class="settings-workspaces-path"
+                                class="settings-v2-workspaces-path"
                               >
                                 {workspace.directory}
                               </span>
                             </Tooltip>
                           </div>
-                          <span class="settings-workspaces-meta">{sessionCount(workspace)}</span>
+                          <span class="settings-v2-workspaces-meta">{sessionCount(workspace)}</span>
                         </div>
-                        <div class="settings-workspaces-row-actions">
+                        <div class="settings-v2-workspaces-row-actions">
                           <Show when={lastActive(workspace)}>
                             {(value) => (
                               <Tooltip value={language.t("settings.workspaces.lastActiveSession")} placement="top-end">
-                                <span tabIndex={0} class="settings-workspaces-active">
+                                <span tabIndex={0} class="settings-v2-workspaces-active">
                                   {value()}
                                 </span>
                               </Tooltip>
@@ -374,13 +376,13 @@ export const SettingsWorkspaces: Component<{ activeDirectory?: string }> = (prop
                         </div>
                       </div>
                       <Show when={linked().length > 0}>
-                        <div class="settings-workspaces-sessions">
+                        <div class="settings-v2-workspaces-sessions">
                           <For each={linked()}>
                             {(session) => (
-                              <div class="settings-workspaces-session">
+                              <div class="settings-v2-workspaces-session">
                                 <span>{sessionLabel(session)}</span>
                                 <Show when={sessionTime(session)}>
-                                  {(time) => <span class="settings-workspaces-session-time">{time()}</span>}
+                                  {(time) => <span class="settings-v2-workspaces-session-time">{time()}</span>}
                                 </Show>
                               </div>
                             )}
@@ -391,7 +393,7 @@ export const SettingsWorkspaces: Component<{ activeDirectory?: string }> = (prop
                   )
                 }}
               </For>
-            </SettingsList>
+            </SettingsListV2>
           </Show>
         </div>
       </div>

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

@@ -1,12 +1,12 @@
 import { Switch } from "@opencode-ai/ui/switch"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { createMemo, createResource, For, type JSXElement, Show } from "solid-js"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useMcpToggle } from "@/providers/connect/mcp"
-import { useWorkspaceLocation } from "@/workspaces/location"
-import { useData } from "@/runtime/server/current"
-import { useServerSDK } from "@/runtime/server/client"
-import { pluginLabels } from "@/providers/catalog/plugin"
+import { useLanguage } from "@/context/language"
+import { useMcpToggle } from "@/context/mcp"
+import { useWorkspaceLocation } from "@/context/location"
+import { useData } from "@/context/server"
+import { useServerSDK } from "@/context/server-sdk"
+import { pluginLabel } from "@/utils/plugin"
 
 const pluginEmptyMessage = (value: string, file: string): JSXElement => {
   const parts = value.split(file)
@@ -39,7 +39,7 @@ export function StatusPopoverBody(props: { shown: boolean }) {
     () => (props.shown ? sdk().directory : undefined),
     (directory) => serverSDK.api.plugin.list({ location: { directory } }).then((result) => result.data),
   )
-  const plugins = createMemo(() => pluginLabels(pluginList.latest ?? []))
+  const plugins = createMemo(() => (pluginList.latest ?? []).map(pluginLabel))
   const pluginCount = createMemo(() => plugins().length)
   const pluginEmpty = createMemo(() => pluginEmptyMessage(language.t("dialog.plugins.empty"), "opencode.json"))
 

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

@@ -1,5 +1,9 @@
 import { describe, expect, test } from "bun:test"
-import { hasNonBlockingServiceIssue, hasServiceNeedingAttention, serverStatusDotClass } from "./indicator"
+import {
+  hasNonBlockingServiceIssue,
+  hasServiceNeedingAttention,
+  serverStatusDotClass,
+} from "./status-popover-indicator"
 
 describe("serverStatusDotClass", () => {
   test("uses the success token while the server and services are healthy", () => {

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

@@ -1,4 +1,4 @@
-import type { LspStatus } from "@/runtime/server/types"
+import type { LspStatus } from "@/types"
 import type { McpServer } from "@opencode-ai/client/promise"
 
 export function hasServiceNeedingAttention(input: { mcp: Array<McpServer["status"]["status"]> }) {