feat(core): use copilot utility models for titles

.changeset/nested-instruction-reinjection.md

@@ -1,5 +0,0 @@
----
-"@opencode-ai/core": patch
----
-
-Nested AGENTS.md instructions are re-injected after compaction. Previously the in-memory dedup claim outlived the synthetic message that compaction dropped from model-visible history, so nested instructions were silently lost for the rest of the process lifetime. The claim now only guards in-flight loads; the synthetic message metadata in durable history is the sole lasting ledger, so any history truncation (compaction, revert) self-heals on the next read in that subtree.

.github/workflows/test.yml

@@ -50,14 +50,6 @@ jobs:
       - name: Setup Bun
         uses: ./.github/actions/setup-bun
 
-      - name: Test Effect simplification rules
-        if: runner.os == 'Linux'
-        run: bun run test:effect-simplification-rules
-
-      - name: Check Effect simplifications
-        if: runner.os == 'Linux'
-        run: bun run lint:effect-simplifications
-
       - name: Configure git identity
         run: |
           git config --global user.email "bot@opencode.ai"

.opencode/tui.json

@@ -1,3 +1,19 @@
 {
-  "$schema": "https://opencode.ai/tui.json"
+  "$schema": "https://opencode.ai/tui.json",
+  "plugin": [
+    [
+      "./plugins/tui-smoke.tsx",
+      {
+        "enabled": false,
+        "label": "workspace",
+        "keybinds": {
+          "smoke_modal": "ctrl+alt+m",
+          "smoke_screen": "ctrl+alt+o",
+          "smoke_screen_home": "escape,ctrl+shift+h",
+          "smoke_screen_modal": "ctrl+alt+m",
+          "smoke_dialog_close": "escape,q"
+        }
+      }
+    ]
+  ]
 }

AGENTS.md

@@ -1,5 +1,5 @@
 - After changing the public Protocol or Server `HttpApi`, run `bun run generate` from `packages/client`. Do not edit generated client files directly.
-- Keep runtime dependencies directed from Schema to Core and Protocol, then from Core and Protocol to Server. Client runtime code may depend on Schema and Protocol but never Core or Server; `sdk` composes Client, Core, and Server.
+- Keep runtime dependencies directed from Schema to Core and Protocol, then from Core and Protocol to Server. Client runtime code may depend on Schema and Protocol but never Core or Server; `sdk-next` composes Client, Core, and Server.
 - Current implementation changes belong in `packages/core`, `packages/cli`, `packages/server`, `packages/protocol`, `packages/schema`, and related generated client surfaces when required.
 - The default branch in this repo is `v2`.
 - Base all new branches and worktrees on `v2`, or `origin/v2` when the local `v2` ref is unavailable. Do not base them on `dev`.

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-PatsUdaitHvSUpS5gkC5J2rsUNB5vwJKqHdlOFaKk70=",
-    "aarch64-linux": "sha256-gTRQMAADH/SpQ8yh+YS2IcnmQxnJcU4FUah2YfrKeP8=",
-    "aarch64-darwin": "sha256-QTqlwmugYh+iu5Sh/Hxv01NXH/OhzcQ8ObVUbA9A8AM=",
-    "x86_64-darwin": "sha256-0DPAbNCVw2nUMWkIGEhB6saMdxRRwAJi7wAoWCQc7xQ="
+    "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

@@ -18,25 +18,24 @@
     "bench:devex": "bun run --cwd packages/app test:bench:devex",
     "lint": "oxlint",
     "lint:effect-patterns": "ast-grep scan -c script/ast-grep/sgconfig.yml packages/util/src packages/core/src packages/server/src packages/protocol/src packages/cli/src",
-    "lint:effect-simplifications": "ast-grep scan -c script/ast-grep/effect-simplifications/sgconfig.yml --off=unused-suppression packages",
     "test:lint-rules": "ast-grep test -c script/ast-grep/sgconfig.yml",
-    "test:effect-simplification-rules": "ast-grep test -c script/ast-grep/effect-simplifications/sgconfig.yml",
     "typecheck": "bun turbo typecheck --concurrency=3",
     "typecheck:profile": "bun script/profile-typecheck.ts",
     "typecheck:profile:packages": "bun script/profile-typecheck-packages.ts",
     "upgrade-opentui": "bun run script/upgrade-opentui.ts",
     "postinstall": "bun run --cwd packages/core fix-node-pty",
     "prepare": "husky",
-    "reserve-packages": "bun script/reserve-package-names.ts",
     "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": [
       "packages/*",
       "packages/console/*",
-      "packages/stats/*"
+      "packages/stats/*",
+      "packages/slack"
     ],
     "catalog": {
       "@effect/opentelemetry": "4.0.0-rc.110",
@@ -129,6 +128,7 @@
     "@aws-sdk/client-s3": "3.933.0",
     "@opencode-ai/plugin": "workspace:*",
     "@opencode-ai/script": "workspace:*",
+    "@opencode-ai/sdk": "1.18.5",
     "heap-snapshot-toolkit": "1.1.3",
     "typescript": "catalog:"
   },
@@ -175,6 +175,6 @@
     "@pierre/trees@1.0.0-beta.4": "patches/@pierre%2Ftrees@1.0.0-beta.4.patch",
     "@modelcontextprotocol/sdk@1.29.0": "patches/@modelcontextprotocol%2Fsdk@1.29.0.patch",
     "@tanstack/virtual-core@3.17.3": "patches/@tanstack%2Fvirtual-core@3.17.3.patch",
-    "@ff-labs/fff-bun@0.10.5": "patches/@ff-labs%2Ffff-bun@0.10.5.patch"
+    "@ff-labs/fff-bun@0.10.1": "patches/@ff-labs%2Ffff-bun@0.10.1.patch"
   }
 }

packages/ai/script/setup-recording-env.ts

@@ -370,7 +370,7 @@ const responseError = Effect.fn("RecordingEnv.responseError")(function* (
   response: HttpClientResponse.HttpClientResponse,
 ) {
   if (response.status >= 200 && response.status < 300) return undefined
-  const body = yield* response.text.pipe(Effect.orElseSucceed(() => ""))
+  const body = yield* response.text.pipe(Effect.catch(() => Effect.succeed("")))
   return `${response.status}${body ? `: ${body.slice(0, 180)}` : ""}`
 })
 

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

@@ -37,10 +37,6 @@ const requiresThoughtSignatureFallback = (modelID: string) => {
   return !/(^|\/)gemini-robotics-er-1\.5(?:[.-]|$)/i.test(modelID)
 }
 
-// Gemini 3 accepts media nested inside function responses; matched Gemini 2.5 variants reject it,
-// so their tool-result attachments lower as a separate user turn instead.
-const routesLegacyToolMedia = (modelID: string) => /gemini-2[.-]5(?:[.-]|$)/i.test(modelID)
-
 export interface OptionsInput {
   readonly [key: string]: unknown
   readonly cachedContent?: string
@@ -217,7 +213,6 @@ interface ParserState {
   readonly usage?: Usage
   readonly lifecycle: Lifecycle.State
   readonly reasoningSignature?: string
-  readonly textSignature?: string
 }
 
 // =============================================================================
@@ -289,16 +284,8 @@ const lowerToolCall = (part: ToolCallPart) => ({
 
 const lowerMessages = Effect.fn("Gemini.lowerMessages")(function* (request: LLMRequest) {
   const contents: GeminiContent[] = []
-  const legacyToolMedia = routesLegacyToolMedia(request.model.id)
-  let pendingMedia: GeminiInlineDataPart[] | undefined
-  const flushMedia = () => {
-    if (!pendingMedia) return
-    contents.push({ role: "user", parts: [{ text: "Attached media from tool result:" }, ...pendingMedia] })
-    pendingMedia = undefined
-  }
 
   for (const message of request.messages) {
-    if (message.role !== "tool") flushMedia()
     if (message.role === "system") {
       const part = yield* ProviderShared.wrappedSystemUpdate("Gemini", message)
       const previous = contents.at(-1)
@@ -329,7 +316,7 @@ const lowerMessages = Effect.fn("Gemini.lowerMessages")(function* (request: LLMR
         if (!ProviderShared.supportsContent(part, ["text", "reasoning", "tool-call"]))
           return yield* ProviderShared.unsupportedContent("Gemini", "assistant", ["text", "reasoning", "tool-call"])
         if (part.type === "text") {
-          parts.push({ text: part.text, thoughtSignature: thoughtSignature(part.providerMetadata) })
+          parts.push({ text: part.text })
           continue
         }
         if (part.type === "reasoning") {
@@ -380,7 +367,6 @@ const lowerMessages = Effect.fn("Gemini.lowerMessages")(function* (request: LLMR
         const value = ProviderShared.normalizeToolFile(item)
         media.push({ inlineData: { mimeType: value.mime, data: value.base64 } })
       }
-      if (legacyToolMedia && media.length > 0) (pendingMedia ??= []).push(...media)
       parts.push({
         functionResponse: {
           id: functionCallId(part.providerMetadata),
@@ -389,19 +375,13 @@ const lowerMessages = Effect.fn("Gemini.lowerMessages")(function* (request: LLMR
             name: part.name,
             content: text.join("\n"),
           },
-          parts: legacyToolMedia || media.length === 0 ? undefined : media,
+          parts: media.length > 0 ? media : undefined,
         },
       })
     }
-    // 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 })
   }
 
-  flushMedia()
   return contents
 })
 
@@ -541,16 +521,14 @@ const finish = (state: ParserState): ReadonlyArray<LLMEvent> => {
   if (finishReason === undefined && state.usage === undefined) return []
 
   const events: LLMEvent[] = []
-  let lifecycle = state.lifecycle
-  if (state.reasoningSignature !== undefined)
-    lifecycle = Lifecycle.reasoningEnd(
-      lifecycle,
-      events,
-      "reasoning-0",
-      googleMetadata({ thoughtSignature: state.reasoningSignature }),
-    )
-  if (state.textSignature !== undefined)
-    lifecycle = Lifecycle.textEnd(lifecycle, events, "text-0", googleMetadata({ thoughtSignature: state.textSignature }))
+  const lifecycle = state.reasoningSignature
+    ? Lifecycle.reasoningEnd(
+        state.lifecycle,
+        events,
+        "reasoning-0",
+        googleMetadata({ thoughtSignature: state.reasoningSignature }),
+      )
+    : state.lifecycle
   Lifecycle.finish(lifecycle, events, {
     reason: {
       normalized:
@@ -582,14 +560,10 @@ const step = (state: ParserState, event: GeminiEvent) => {
   let lifecycle = nextState.lifecycle
   let nextToolCallId = nextState.nextToolCallId
   let reasoningSignature = nextState.reasoningSignature
-  let textSignature = nextState.textSignature
 
   for (const part of candidate.content.parts) {
-    const signature = "thoughtSignature" in part && part.thoughtSignature ? part.thoughtSignature : undefined
-    // Gemini attaches replay signatures to thought parts, visible text, or function calls;
-    // each block kind must retain the signature attached to its own parts.
-    if (signature !== undefined && "thought" in part && part.thought) reasoningSignature = signature
-    else if (signature !== undefined && "text" in part) textSignature = signature
+    if ("thoughtSignature" in part && part.thoughtSignature && "thought" in part && part.thought)
+      reasoningSignature = part.thoughtSignature
     if ("text" in part && part.text.length > 0) {
       if (part.thought) {
         lifecycle = Lifecycle.reasoningDelta(
@@ -597,7 +571,7 @@ const step = (state: ParserState, event: GeminiEvent) => {
           events,
           "reasoning-0",
           part.text,
-          signature ? googleMetadata({ thoughtSignature: signature }) : undefined,
+          part.thoughtSignature ? googleMetadata({ thoughtSignature: part.thoughtSignature }) : undefined,
         )
         continue
       }
@@ -607,14 +581,7 @@ const step = (state: ParserState, event: GeminiEvent) => {
         "reasoning-0",
         reasoningSignature ? googleMetadata({ thoughtSignature: reasoningSignature }) : undefined,
       )
-      lifecycle = Lifecycle.textDelta(
-        lifecycle,
-        events,
-        "text-0",
-        part.text,
-        textSignature ? googleMetadata({ thoughtSignature: textSignature }) : undefined,
-      )
-      textSignature = undefined
+      lifecycle = Lifecycle.textDelta(lifecycle, events, "text-0", part.text)
       continue
     }
 
@@ -651,7 +618,6 @@ const step = (state: ParserState, event: GeminiEvent) => {
       lifecycle,
       nextToolCallId,
       reasoningSignature,
-      textSignature,
       finishReason: candidate.finishReason ?? nextState.finishReason,
     },
     events,

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/protocols/utils/lifecycle.ts

@@ -21,15 +21,9 @@ export const textStart = (state: State, events: LLMEvent[], id: string, provider
   return { ...stepped, text: new Set([...stepped.text, id]) }
 }
 
-export const textDelta = (
-  state: State,
-  events: LLMEvent[],
-  id: string,
-  text: string,
-  providerMetadata?: ProviderMetadata,
-): State => {
+export const textDelta = (state: State, events: LLMEvent[], id: string, text: string): State => {
   const started = textStart(state, events, id)
-  events.push(LLMEvent.textDelta({ id, text, providerMetadata }))
+  events.push(LLMEvent.textDelta({ id, text }))
   return started
 }
 

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(
@@ -328,18 +281,14 @@ describe("Gemini route", () => {
               functionResponse: {
                 name: "read",
                 response: { name: "read", content: "Image read successfully" },
+                parts: [
+                  { inlineData: { mimeType: "image/png", data: "AAECAw==" } },
+                  { inlineData: { mimeType: "application/pdf", data: "JVBERi0xLjQ=" } },
+                ],
               },
             },
           ],
         },
-        {
-          role: "user",
-          parts: [
-            { text: "Attached media from tool result:" },
-            { inlineData: { mimeType: "image/png", data: "AAECAw==" } },
-            { inlineData: { mimeType: "application/pdf", data: "JVBERi0xLjQ=" } },
-          ],
-        },
       ])
       expect(JSON.stringify(prepared.body.contents)).not.toContain('"content":"AAECAw=="')
     }),
@@ -372,161 +321,11 @@ describe("Gemini route", () => {
               functionResponse: {
                 name: "read",
                 response: { name: "read", content: "" },
+                parts: [{ inlineData: { mimeType: "image/jpeg", data: "/9j/" } }],
               },
             },
           ],
         },
-        {
-          role: "user",
-          parts: [
-            { text: "Attached media from tool result:" },
-            { inlineData: { mimeType: "image/jpeg", data: "/9j/" } },
-          ],
-        },
-      ])
-    }),
-  )
-
-  it.effect("nests media inside function responses for gemini 3", () =>
-    Effect.gen(function* () {
-      const prepared = yield* compileRequest(
-        LLM.request({
-          model: gemini3,
-          messages: [
-            Message.assistant([
-              ToolCallPart.make({
-                id: "call_image",
-                name: "read",
-                input: { path: "pixel.png" },
-                providerMetadata: { google: { thoughtSignature: "sig_1" } },
-              }),
-            ]),
-            Message.tool({
-              id: "call_image",
-              name: "read",
-              result: {
-                type: "content",
-                value: [
-                  { type: "text", text: "Image read successfully" },
-                  { type: "file", uri: "data:image/png;base64,AAECAw==", mime: "image/png", name: "pixel.png" },
-                ],
-              },
-            }),
-          ],
-        }),
-      )
-
-      expect(prepared.body.contents).toEqual([
-        {
-          role: "model",
-          parts: [{ functionCall: { name: "read", args: { path: "pixel.png" } }, thoughtSignature: "sig_1" }],
-        },
-        {
-          role: "user",
-          parts: [
-            {
-              functionResponse: {
-                name: "read",
-                response: { name: "read", content: "Image read successfully" },
-                parts: [{ inlineData: { mimeType: "image/png", data: "AAECAw==" } }],
-              },
-            },
-          ],
-        },
-      ])
-    }),
-  )
-
-  it.effect("flushes pending media before system update text", () =>
-    Effect.gen(function* () {
-      const prepared = yield* compileRequest(
-        LLM.request({
-          model,
-          messages: [
-            Message.assistant([ToolCallPart.make({ id: "call_1", name: "shot", input: {} })]),
-            Message.tool({
-              id: "call_1",
-              name: "shot",
-              result: {
-                type: "content",
-                value: [{ type: "file", uri: "data:image/png;base64,AAEC", mime: "image/png" }],
-              },
-            }),
-            Message.system("Update."),
-          ],
-        }),
-      )
-
-      expect(prepared.body.contents).toEqual([
-        { role: "model", parts: [{ functionCall: { name: "shot", args: {} } }] },
-        {
-          role: "user",
-          parts: [{ functionResponse: { name: "shot", response: { name: "shot", content: "" } } }],
-        },
-        {
-          role: "user",
-          parts: [
-            { text: "Attached media from tool result:" },
-            { inlineData: { mimeType: "image/png", data: "AAEC" } },
-            { text: "<system-update>\nUpdate.\n</system-update>" },
-          ],
-        },
-      ])
-    }),
-  )
-
-  it.effect("collects legacy tool media into one turn after merged responses", () =>
-    Effect.gen(function* () {
-      const prepared = yield* compileRequest(
-        LLM.request({
-          model,
-          messages: [
-            Message.assistant([
-              ToolCallPart.make({ id: "call_1", name: "shot", input: {} }),
-              ToolCallPart.make({ id: "call_2", name: "shot", input: {} }),
-            ]),
-            Message.tool({
-              id: "call_1",
-              name: "shot",
-              result: {
-                type: "content",
-                value: [{ type: "file", uri: "data:image/png;base64,AAEC", mime: "image/png" }],
-              },
-            }),
-            Message.tool({
-              id: "call_2",
-              name: "shot",
-              result: {
-                type: "content",
-                value: [{ type: "text", text: "no image here" }],
-              },
-            }),
-          ],
-        }),
-      )
-
-      expect(prepared.body.contents).toEqual([
-        {
-          role: "model",
-          parts: [
-            { functionCall: { name: "shot", args: {} } },
-            { functionCall: { name: "shot", args: {} } },
-          ],
-        },
-        {
-          role: "user",
-          parts: [
-            { functionResponse: { name: "shot", response: { name: "shot", content: "" } } },
-            { functionResponse: { name: "shot", response: { name: "shot", content: "no image here" } } },
-          ],
-        },
-        {
-          role: "user",
-          parts: [
-            { text: "Attached media from tool result:" },
-            { inlineData: { mimeType: "image/png", data: "AAEC" } },
-          ],
-        },
       ])
     }),
   )
@@ -905,61 +704,6 @@ describe("Gemini route", () => {
     }),
   )
 
-  it.effect("preserves thoughtSignature on visible text parts", () =>
-    Effect.gen(function* () {
-      const body = sseEvents({
-        candidates: [
-          {
-            content: { role: "model", parts: [{ text: "All done.", thoughtSignature: "text_sig" }] },
-            finishReason: "STOP",
-          },
-        ],
-      })
-      const response = yield* LLMClient.generate(request).pipe(Effect.provide(fixedResponse(body)))
-      const delta = response.events.find((event) => event.type === "text-delta")
-      expect(delta).toMatchObject({
-        id: "text-0",
-        text: "All done.",
-        providerMetadata: { google: { thoughtSignature: "text_sig" } },
-      })
-
-      const prepared = yield* compileRequest(
-        LLM.request({
-          model,
-          messages: [Message.assistant([{ type: "text", text: "All done.", providerMetadata: delta?.providerMetadata }])],
-        }),
-      )
-      expect(prepared.body.contents).toEqual([
-        { role: "model", parts: [{ text: "All done.", thoughtSignature: "text_sig" }] },
-      ])
-    }),
-  )
-
-  it.effect("flushes a trailing empty signed text part at block close", () =>
-    Effect.gen(function* () {
-      const body = sseEvents({
-        candidates: [
-          {
-            content: {
-              role: "model",
-              parts: [{ text: "Working." }, { text: "", thoughtSignature: "tail_sig" }],
-            },
-            finishReason: "STOP",
-          },
-        ],
-      })
-      const response = yield* LLMClient.generate(request).pipe(Effect.provide(fixedResponse(body)))
-      const delta = response.events.find((event) => event.type === "text-delta")
-      const end = response.events.find((event) => event.type === "text-end")
-
-      expect(delta).toMatchObject({ id: "text-0", text: "Working.", providerMetadata: undefined })
-      expect(end).toMatchObject({
-        id: "text-0",
-        providerMetadata: { google: { thoughtSignature: "tail_sig" } },
-      })
-    }),
-  )
-
   it.effect("replays unsigned Gemini 3 tool calls with the validator bypass sentinel", () =>
     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,24 +4,27 @@ 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,
   createShellOptions,
   createShellSettingsController,
+  createSoundSettingsController,
+  soundOptions,
   type AppearanceSettingsController,
   type PermissionScopeController,
   type ShellSettingsController,
-} from "./controllers"
-import "@/settings/settings.css"
-import { ServerConnection } from "@/runtime/server/registry"
+  type SoundSettingsController,
+} from "./general-controllers"
+import "./settings-v2.css"
+import { ServerConnection } from "@/context/servers"
 
 const schemeOptions: ("system" | "light" | "dark")[] = ["system", "light", "dark"]
 const fontSettings = {
@@ -47,10 +50,28 @@ const fontSettings = {
     input: "setTerminal",
   },
 } as const
+const soundSettings = {
+  agent: {
+    action: "settings-sounds-agent",
+    title: "settings.general.sounds.agent.title",
+    description: "settings.general.sounds.agent.description",
+  },
+  permissions: {
+    action: "settings-sounds-permissions",
+    title: "settings.general.sounds.permissions.title",
+    description: "settings.general.sounds.permissions.description",
+  },
+  errors: {
+    action: "settings-sounds-errors",
+    title: "settings.general.sounds.errors.title",
+    description: "settings.general.sounds.errors.description",
+  },
+} as const
+
 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")}
     >
@@ -61,7 +82,7 @@ const PermissionScopeSetting: Component<{ controller: PermissionScopeController
           onChange={props.controller.set}
         />
       </div>
-    </SettingsRow>
+    </SettingsRowV2>
   )
 }
 
@@ -75,7 +96,7 @@ const WorkspaceDestinationSetting: Component = () => {
   ])
 
   return (
-    <SettingsRow
+    <SettingsRowV2
       title={language.t("settings.workspaces.default.title")}
       description={language.t("settings.workspaces.default.description")}
     >
@@ -88,7 +109,7 @@ const WorkspaceDestinationSetting: Component = () => {
         gutter={6}
         onSelect={(option) => option && settings.workspaces.setDefaultDestination(option.value)}
       />
-    </SettingsRow>
+    </SettingsRowV2>
   )
 }
 
@@ -101,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")}
     >
@@ -119,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")}
         >
@@ -146,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>
             </>
@@ -169,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>
   )
 }
@@ -186,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}
@@ -203,7 +224,44 @@ 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-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} />
+      </SettingsListV2>
+    </div>
+  )
+}
+
+const SoundSetting: Component<{
+  kind: "agent" | "permissions" | "errors"
+  channel: SoundSettingsController["agent"]
+}> = (props) => {
+  const language = useLanguage()
+  const config = () => soundSettings[props.kind]
+  return (
+    <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
+      <Select
+        data-action={config().action}
+        options={soundOptions}
+        current={props.channel.current()}
+        value={(option) => option.id}
+        label={(option) => language.t(option.label)}
+        onHighlight={props.channel.highlight}
+        onSelect={props.channel.select}
+        placement="bottom-end"
+        gutter={6}
+      />
+    </SettingsRowV2>
   )
 }
 
@@ -216,7 +274,7 @@ const LanguageSetting = () => {
     })),
   )
   return (
-    <SettingsRow
+    <SettingsRowV2
       title={language.t("settings.general.row.language.title")}
       description={language.t("settings.general.row.language.description")}
     >
@@ -230,7 +288,7 @@ const LanguageSetting = () => {
         label={(option) => option.label}
         onSelect={(option) => option && language.setLocale(option.value)}
       />
-    </SettingsRow>
+    </SettingsRowV2>
   )
 }
 
@@ -264,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 />
@@ -274,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")}
         >
@@ -284,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")}
         >
@@ -296,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")}
         >
@@ -308,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")}
           >
@@ -321,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")}
         >
@@ -342,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")}
         >
@@ -354,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")}
         >
@@ -366,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")}
         >
@@ -386,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")}
         >
@@ -398,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")}
         >
@@ -410,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")}
         >
@@ -430,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">