fix(app): preserve ssh settings inventory

Scope settings by server, replace project dialogs with autosaving views, preserve WSL management, and refine extension lists and controls.

packages/app/e2e/regression/project-lsp.spec.ts

@@ -0,0 +1,129 @@
+import { expect, test } from "@playwright/test"
+import type { ConfigEntry } from "@opencode/client/promise"
+import { mockOpenCodeServer } from "../utils/mock-server"
+
+const directory = "/repo/configured-lsp"
+const entries: ConfigEntry[] = [
+  {
+    type: "document",
+    path: "/config/opencode.json",
+    info: {
+      lsp: {
+        typescript: { command: ["typescript-language-server", "--stdio"], extensions: [".ts", ".tsx"] },
+      },
+    },
+  },
+  {
+    type: "document",
+    path: `${directory}/opencode.jsonc`,
+    info: {
+      lsp: {
+        typescript: { disabled: true },
+        rust: { command: ["rust-analyzer"], extensions: [".rs"] },
+      },
+    },
+  },
+]
+
+test.use({ viewport: { width: 1280, height: 900 } })
+
+test.beforeEach(async ({ page }) => {
+  await mockOpenCodeServer(page, {
+    directory,
+    project: {
+      id: "proj_configured_lsp",
+      canonical: directory,
+      name: "Configured LSP project",
+      sandboxes: [],
+      time: { created: 1, updated: 1 },
+    },
+    provider: { all: [], connected: [], default: {} },
+    sessions: [],
+    pageMessages: () => ({ items: [] }),
+  })
+  await page.addInitScript((directory) => {
+    localStorage.setItem(
+      "opencode.global.dat:server",
+      JSON.stringify({ projects: { local: [{ worktree: directory, expanded: true }] } }),
+    )
+  }, directory)
+  await page.goto("/")
+  await page.getByRole("button", { name: "Settings", exact: true }).click()
+  const settings = page.getByTestId("settings-screen")
+  await settings.getByRole("tab", { name: "Projects", exact: true }).click()
+  await settings.getByRole("button", { name: "Configured LSP project", exact: true }).click()
+  await settings.getByRole("tab", { name: "Extensions", exact: true }).click()
+})
+
+test("shows inherited and project-configured LSP entries with config-only status", async ({ page }) => {
+  const ready = Promise.withResolvers<void>()
+  await page.route(
+    (url) => url.pathname === "/api/config",
+    async (route) => {
+      await ready.promise
+      await route.fulfill({ json: entries })
+    },
+  )
+  const requested = page.waitForRequest((request) => new URL(request.url()).pathname === "/api/config")
+  const settings = page.getByTestId("settings-screen")
+  await settings.getByRole("tab", { name: "LSPs", exact: true }).click()
+  expect(new URL((await requested).url()).searchParams.get("location[directory]")).toBe(directory)
+  const panel = settings.getByRole("tabpanel", { name: "LSPs", exact: true })
+  await expect(panel.getByText("Loading", { exact: true })).toBeVisible()
+  ready.resolve()
+  await expect(panel.getByText("typescript", { exact: true })).toBeVisible()
+  await expect(panel.getByText("rust", { exact: true })).toBeVisible()
+  const typescript = panel.locator(".project-settings-extension-row").filter({ hasText: "typescript" })
+  await expect(typescript).toContainText("Disabled in config")
+  await expect(typescript).toContainText(".ts, .tsx")
+  await expect(panel.locator(".project-settings-extension-row").filter({ hasText: "rust" })).toContainText(
+    "Enabled in config",
+  )
+  await expect(panel.getByRole("switch")).toHaveCount(0)
+  await expect(panel.getByText("Setup required", { exact: true })).toHaveCount(0)
+  await page.setViewportSize({ width: 390, height: 844 })
+  await expect(panel.getByText("rust", { exact: true })).toBeInViewport()
+  await expect
+    .poll(() => settings.evaluate((element) => element.scrollWidth - element.clientWidth))
+    .toBeLessThanOrEqual(1)
+})
+
+for (const lsp of [true, false]) {
+  test(`handles boolean lsp=${lsp} without inventing detected servers`, async ({ page }) => {
+    await page.route(
+      (url) => url.pathname === "/api/config",
+      (route) =>
+        route.fulfill({
+          json: [{ type: "document", info: { lsp } }],
+        }),
+    )
+    const settings = page.getByTestId("settings-screen")
+    await settings.getByRole("tab", { name: "LSPs", exact: true }).click()
+    const panel = settings.getByRole("tabpanel", { name: "LSPs", exact: true })
+    await expect(
+      panel.getByText(lsp ? "No language servers configured" : "Language servers disabled", { exact: true }),
+    ).toBeVisible()
+    await expect(panel.locator(".project-settings-extension-row")).toHaveCount(0)
+  })
+}
+
+test("keeps configuration load failures inside the tab and allows retry", async ({ page }) => {
+  const state = { fail: true }
+  await page.route(
+    (url) => url.pathname === "/api/config",
+    (route) =>
+      route.fulfill({
+        status: state.fail ? 404 : 200,
+        json: state.fail ? {} : entries,
+      }),
+  )
+  const settings = page.getByTestId("settings-screen")
+  await settings.getByRole("tab", { name: "LSPs", exact: true }).click()
+  const panel = settings.getByRole("tabpanel", { name: "LSPs", exact: true })
+  await expect(panel.getByText("Could not load language server configuration", { exact: true })).toBeVisible()
+  state.fail = false
+  await panel.getByRole("button", { name: "Retry", exact: true }).click()
+  await expect(panel.getByText("typescript", { exact: true })).toBeVisible()
+  await settings.getByRole("tab", { name: "Skills", exact: true }).click()
+  await expect(settings.getByRole("tabpanel", { name: "Skills", exact: true })).toBeVisible()
+})

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

@@ -20,6 +20,7 @@ test("session settings use the remote server context", async ({ page }) => {
   // one toggle sweeps every connected server, not just the focused one.
   await mockServers(page, permissionRequests, permissionResponses, {
     pending: { [serverA]: [pendingPermission("permission-pending-a", sessionA.id)] },
+    preferencesUnavailable: true,
   })
   await configureServers(page)
 
@@ -34,8 +35,10 @@ test("session settings use the remote server context", async ({ page }) => {
   await expect(page.locator('[data-titlebar-tab][data-active="true"]')).toHaveCount(0)
   await expect(page.getByRole("button", { name: "Home", exact: true })).toHaveAttribute("aria-pressed", "false")
   await expect(page.getByRole("dialog")).toHaveCount(0)
-  await expect(settings.getByRole("tablist")).toHaveCSS("width", "328px")
+  await expect(settings.getByRole("complementary")).toHaveCSS("width", "328px")
   await expect(sessionHeading).toBeHidden()
+  await expect(settings.getByText("Servers", { exact: true })).toBeVisible()
+  await expect(settings.getByRole("tab", { name: "Models", exact: true })).toHaveCount(0)
   const autoAccept = settings.locator('[data-action="settings-auto-accept-permissions"]')
   const input = autoAccept.getByRole("switch")
   await expect(autoAccept).toBeVisible()
@@ -63,9 +66,21 @@ test("session settings use the remote server context", async ({ page }) => {
       },
     ])
 
+  await settings.getByRole("tab", { name: "127.0.0.1:4097", exact: true }).click()
+  await expect(settings.getByRole("button", { name: "Back to settings", exact: true })).toBeVisible()
+  await expect(settings.getByRole("heading", { name: "Connection", exact: true })).toBeVisible()
+  await expect(settings.getByRole("tab")).toHaveText([
+    "127.0.0.1:4097",
+    "Projects",
+    "Worktrees",
+    "Providers",
+    "Models",
+    "Extensions",
+  ])
   await settings.getByRole("tab", { name: "Models" }).click()
   await expect(settings.getByRole("switch", { name: "Server B Model" })).toBeEnabled()
   await expect(settings.getByRole("switch", { name: "Server A Model" })).toHaveCount(0)
+  await settings.getByRole("button", { name: "Back to settings" }).click()
   await settings.getByRole("button", { name: "Back to app" }).click()
   await expect(settings).toBeHidden()
   await expect(page).toHaveURL(`/server/${base64Encode(serverB)}/session/${sessionB.id}`)
@@ -73,7 +88,7 @@ test("session settings use the remote server context", async ({ page }) => {
   await expect(page.locator('[data-titlebar-tab][data-active="true"]')).toContainText(sessionB.title)
   await page.keyboard.press("Control+]")
   await expect(page).toHaveURL("/settings")
-  await expect(settings.getByRole("tab", { name: "Models", exact: true })).toHaveAttribute("aria-selected", "true")
+  await expect(settings.getByRole("tab", { name: "Preferences", exact: true })).toHaveAttribute("aria-selected", "true")
   await expect(page.locator('[data-titlebar-tab][data-active="true"]')).toHaveCount(0)
   await page.keyboard.press("Escape")
   await expect(page).toHaveURL(`/server/${base64Encode(serverB)}/session/${sessionB.id}`)
@@ -311,6 +326,7 @@ type MockServerOptions = {
   listFailures?: Record<string, number>
   // Records /api/session/:id GETs so tests can assert session resyncs.
   sessionGets?: string[]
+  preferencesUnavailable?: boolean
 }
 
 async function mockServers(
@@ -402,6 +418,11 @@ async function mockServers(
         directory,
         project: { id: remote ? sessionB.projectID : "project-server-a", directory, canonical: directory },
       })
+    if (url.pathname === "/api/config/preferences") return json(route, {}, options.preferencesUnavailable ? 404 : 200)
+    if (url.pathname === "/api/config/shell")
+      return json(route, options.preferencesUnavailable ? {} : [], options.preferencesUnavailable ? 404 : 200)
+    if (url.pathname === "/api/websearch/provider")
+      return json(route, { location: { directory }, data: [] }, options.preferencesUnavailable ? 404 : 200)
     if (url.pathname === "/api/worktree") return json(route, [{ directory }])
     if (url.pathname === "/api/vcs")
       return json(route, { location: { directory }, data: { branch: "main", defaultBranch: "main" } })

packages/app/e2e/regression/server-dialog-focus.spec.ts

@@ -27,8 +27,12 @@ test("server dialog keeps focus above fullscreen settings", async ({ page }) =>
   const settings = page.getByTestId("settings-screen")
   await expect(settings).toBeVisible()
   await expect(page.getByRole("dialog")).toHaveCount(0)
-  await settings.getByRole("tab", { name: "Servers" }).click()
-  await settings.getByRole("button", { name: "Add server" }).click()
+  const add = settings.getByRole("button", { name: "Add server" })
+  const group = settings.locator('[data-component="settings-nav-group-header"]').filter({ hasText: "Servers" })
+  await expect(add).toHaveCSS("opacity", "0")
+  await group.hover()
+  await expect(add).toHaveCSS("opacity", "1")
+  await add.click()
 
   const editor = page.getByRole("dialog", { name: "Add server" })
   await expect(editor.getByPlaceholder("http://localhost:4096")).toBeFocused()

packages/app/e2e/regression/session-project-menu.spec.ts

@@ -198,14 +198,15 @@ for (const direction of ["ltr", "rtl"] as const) {
       await expect(settings).toBeFocused()
       await expect(page.getByRole("tooltip")).toBeHidden()
       await page.keyboard.press("Enter")
-      const dialog = page.getByRole("dialog")
-      await expect(dialog.getByRole("heading", { name: copy["dialog.project.edit.title"], exact: true })).toBeVisible()
-      await expect(dialog.getByRole("textbox", { name: copy["dialog.project.edit.name"], exact: true })).toHaveValue(
-        project.name,
-      )
+      const settingsScreen = page.getByTestId("settings-screen")
+      await expect(settingsScreen.getByRole("heading", { name: project.name, exact: true })).toBeVisible()
+      await expect(
+        settingsScreen.getByRole("textbox", { name: en["project.settings.name.title"], exact: true }),
+      ).toHaveValue(project.name)
       await expect(menu).toBeHidden()
-      await dialog.getByRole("button", { name: copy["common.cancel"], exact: true }).click()
-      await expect(dialog).toBeHidden()
+      await settingsScreen.getByRole("button", { name: en["settings.backToProjects"], exact: true }).click()
+      await settingsScreen.getByRole("button", { name: en["settings.backToApp"], exact: true }).click()
+      await expect(settingsScreen).toBeHidden()
       await expect(header.getByRole("heading")).toHaveText(fixture.expected.targetTitle)
 
       await page.setViewportSize({ width: 1440, height: 900 })
@@ -272,12 +273,13 @@ for (const state of ["closed", "unopened"] as const) {
       await expect(menu.getByRole("menuitem", { name: fixture.project.name, exact: true })).toBeEnabled()
       await expect(menu.getByRole("menuitem", { name: directory, exact: true })).toBeDisabled()
       await menu.getByRole("menuitem", { name: "Edit project", exact: true }).click()
-      const dialog = page.getByRole("dialog")
-      await expect(dialog.getByRole("textbox", { name: en["dialog.project.edit.name"], exact: true })).toHaveValue(
-        fixture.project.name,
-      )
-      await dialog.getByRole("button", { name: en["common.cancel"], exact: true }).click()
-      await expect(dialog).toBeHidden()
+      const settingsScreen = page.getByTestId("settings-screen")
+      await expect(
+        settingsScreen.getByRole("textbox", { name: en["project.settings.name.title"], exact: true }),
+      ).toHaveValue(fixture.project.name)
+      await settingsScreen.getByRole("button", { name: en["settings.backToProjects"], exact: true }).click()
+      await settingsScreen.getByRole("button", { name: en["settings.backToApp"], exact: true }).click()
+      await expect(settingsScreen).toBeHidden()
     }
     await trigger.click()
     await menu.getByRole("menuitem", { name: fixture.project.name, exact: true }).click()

packages/app/e2e/regression/settings-loading.spec.ts

@@ -13,11 +13,20 @@ test.beforeEach(async ({ page }) => {
       id: "proj_settings_demo",
       canonical: directory,
       name: "Settings demo",
+      icon: {
+        color: "orange",
+        override:
+          "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='16' height='16' fill='red'/%3E%3C/svg%3E",
+      },
+      commands: { start: "echo setup" },
       vcs: "git",
       time: { created: 1700000000000, updated: 1700000000000 },
       sandboxes,
     },
     provider: { all: [], connected: [], default: {} },
+    preferences: { shell: "zsh", websearch: { provider: "exa" } },
+    shells: [{ path: "/bin/zsh", name: "zsh", acceptable: true }],
+    websearchProviders: [{ id: "exa", name: "Exa" }],
     sessions: sandboxes.map((directory, index) => ({
       id: `ses_settings_${index + 1}`,
       title: `Workspace ${index + 1} session`,
@@ -56,9 +65,134 @@ test("settings has its own route and returns through app history", async ({ page
   await expect(home).toHaveAttribute("aria-pressed", "true")
 })
 
+test("single-server settings expose scoped pages without a server picker", async ({ page }) => {
+  const settings = page.getByTestId("settings-screen")
+  await expect(settings.getByRole("tab", { name: "Server", exact: true })).toBeVisible()
+  await expect(settings.getByRole("tab", { name: "Servers", exact: true })).toHaveCount(0)
+
+  for (const name of ["Projects", "Worktrees", "Providers", "Models", "Extensions"]) {
+    await settings.getByRole("tab", { name, exact: true }).click()
+    await expect(settings.locator('[data-action="settings-server-select"]')).toHaveCount(0)
+  }
+
+  await settings.getByRole("tab", { name: "Server", exact: true }).click()
+  await expect(settings.getByRole("button", { name: "Add server", exact: true })).toBeVisible()
+  await expect(settings.getByRole("heading", { name: "Connection", exact: true })).toBeVisible()
+  await expect(settings.getByRole("heading", { name: "Preferences", exact: true })).toBeVisible()
+  await expect(settings.getByText("Terminal shell", { exact: true })).toBeVisible()
+  await expect(settings.getByText("Third-party search", { exact: true })).toBeVisible()
+  await expect(settings.getByText("zsh", { exact: true })).toBeVisible()
+  await expect(settings.getByText("Exa", { exact: true })).toBeVisible()
+
+  await settings.getByText("Exa", { exact: true }).click()
+  const updated = page.waitForRequest(
+    (request) => request.method() === "PATCH" && new URL(request.url()).pathname === "/api/config/preferences",
+  )
+  await page.getByRole("option", { name: "Any", exact: true }).click()
+  expect((await updated).postDataJSON()).toEqual({ websearch: { provider: "random" } })
+})
+
+test("server details tolerate unavailable preference endpoints", async ({ page }) => {
+  await page.route(
+    (url) =>
+      url.pathname === "/api/config/preferences" ||
+      url.pathname === "/api/config/shell" ||
+      url.pathname === "/api/websearch/provider",
+    (route) => route.fulfill({ status: 404, json: {} }),
+  )
+  const settings = page.getByTestId("settings-screen")
+  await settings.getByRole("tab", { name: "Server", exact: true }).click()
+
+  const connection = settings.locator('[data-component="settings-server-connection"]')
+  await expect(connection.getByRole("heading", { name: "Connection", exact: true })).toBeVisible()
+  await expect(connection.locator('[data-component="settings-list"]')).toHaveCSS("padding-left", "16px")
+  await expect(connection.locator(".settings-servers-row")).toHaveCSS("padding-top", "20px")
+  await expect(connection.locator(".settings-servers-lead")).toHaveCSS("column-gap", "4px")
+  await expect(connection.locator(".settings-servers-copy")).toHaveCSS("row-gap", "6px")
+  await expect(page.getByText("Server request failed", { exact: true })).toHaveCount(0)
+})
+
+test("project settings open as a nested autosaving view", async ({ page }) => {
+  const settings = page.getByTestId("settings-screen")
+  await settings.getByRole("tab", { name: "Projects", exact: true }).click()
+  await settings.getByRole("button", { name: "Settings demo", exact: true }).click()
+
+  await expect(settings.getByRole("button", { name: "Back to projects", exact: true })).toBeVisible()
+  await expect(settings.getByRole("tab", { name: "Settings demo", exact: true })).toBeVisible()
+  await expect(settings.getByRole("tab", { name: "Worktrees", exact: true })).toBeVisible()
+  await expect(settings.getByRole("tab", { name: "Extensions", exact: true })).toBeVisible()
+  await expect(settings.getByRole("tab", { name: "Scripts", exact: true })).toHaveCount(0)
+
+  const name = settings.getByRole("textbox", { name: "Project name", exact: true })
+  const saved = page.waitForRequest(
+    (request) => request.method() === "PATCH" && new URL(request.url()).pathname === "/api/project/proj_settings_demo",
+  )
+  await name.fill("Renamed project")
+  await name.blur()
+  expect((await saved).postDataJSON()).toEqual({ name: "Renamed project" })
+  await expect(settings.getByRole("tab", { name: "Renamed project", exact: true })).toBeVisible()
+
+  const startup = settings.getByRole("textbox", { name: "Worktree startup script", exact: true })
+  const scriptSaved = page.waitForRequest(
+    (request) => request.method() === "PATCH" && new URL(request.url()).pathname === "/api/project/proj_settings_demo",
+  )
+  await startup.fill("bun install")
+  await startup.blur()
+  expect((await scriptSaved).postDataJSON()).toEqual({ commands: { start: "bun install" } })
+
+  await settings.getByRole("tab", { name: "Worktrees", exact: true }).click()
+  await expect(settings.getByRole("heading", { name: "Worktrees", exact: true })).toBeVisible()
+  await page.keyboard.press("Escape")
+  await expect(settings.getByRole("heading", { name: "Projects", exact: true })).toBeVisible()
+})
+
+test("clearing project fields sends explicit removal values", async ({ page }) => {
+  const settings = page.getByTestId("settings-screen")
+  await settings.getByRole("tab", { name: "Projects", exact: true }).click()
+  await settings.getByRole("button", { name: "Settings demo", exact: true }).click()
+  const startup = settings.getByRole("textbox", { name: "Worktree startup script", exact: true })
+  await expect(startup).toHaveValue("echo setup")
+
+  const scriptSaved = page.waitForResponse(
+    (response) =>
+      response.request().method() === "PATCH" && new URL(response.url()).pathname === "/api/project/proj_settings_demo",
+  )
+  await startup.clear()
+  await startup.blur()
+  const scriptResponse = await scriptSaved
+  expect(scriptResponse.ok()).toBe(true)
+  expect(scriptResponse.request().postDataJSON()).toEqual({ commands: { start: "" } })
+  await expect(settings.locator('[aria-busy="true"]')).toHaveCount(0)
+
+  const icon = settings.getByRole("button", { name: "Project icon", exact: true })
+  await expect(icon.locator("img")).toHaveCount(1)
+  const iconSaved = page.waitForResponse(
+    (response) =>
+      response.request().method() === "PATCH" && new URL(response.url()).pathname === "/api/project/proj_settings_demo",
+  )
+  await icon.hover()
+  await icon.click()
+  const iconResponse = await iconSaved
+  expect(iconResponse.ok()).toBe(true)
+  expect(iconResponse.request().postDataJSON()).toEqual({ icon: { color: "orange", override: "" } })
+  await expect(settings.locator('[aria-busy="true"]')).toHaveCount(0)
+
+  const color = settings.getByRole("button", { name: "Select orange color", exact: true })
+  await expect(color).toHaveAttribute("aria-pressed", "true")
+  const colorSaved = page.waitForResponse(
+    (response) =>
+      response.request().method() === "PATCH" && new URL(response.url()).pathname === "/api/project/proj_settings_demo",
+  )
+  await color.click()
+  const colorResponse = await colorSaved
+  expect(colorResponse.ok()).toBe(true)
+  expect(colorResponse.request().postDataJSON()).toEqual({ icon: { color: "", override: "" } })
+  await expect(settings.locator('[aria-busy="true"]')).toHaveCount(0)
+})
+
 test("new session shortcut leaves settings and opens a new session screen", async ({ page }) => {
   const settings = page.getByTestId("settings-screen")
-  await expect(settings).toBeFocused()
+  await expect(settings.getByRole("combobox", { name: "Search settings", exact: true })).toBeFocused()
   await page.keyboard.press("Control+t")
 
   await expect(page).toHaveURL(/\/new-session\?draftId=.+$/)

packages/app/e2e/regression/settings-padding.spec.ts

@@ -22,7 +22,9 @@ test.beforeEach(async ({ page }) => {
   )
   await page.goto("/")
   await page.getByRole("button", { name: "Settings", exact: true }).click()
-  await expect(page.getByTestId("settings-screen")).toBeFocused()
+  await expect(
+    page.getByTestId("settings-screen").getByRole("combobox", { name: "Search settings", exact: true }),
+  ).toBeFocused()
 })
 
 for (const viewport of [
@@ -38,7 +40,7 @@ for (const viewport of [
     test("every settings page leaves room below its final content", async ({ page }) => {
       await page.setViewportSize(viewport)
       const settings = page.getByTestId("settings-screen")
-      const panel = settings.locator(":scope > .settings > .settings-panel:visible")
+      const panel = settings.locator(".settings-content > .settings-panel:visible")
       if (viewport.bottom) {
         const toggle = settings.locator('[data-action="settings-mobile-titlebar-bottom"]')
         await toggle.locator('[data-slot="switch-control"]').click()
@@ -50,12 +52,12 @@ for (const viewport of [
         "Appearance",
         "Notifications",
         "Shortcuts",
-        "Servers",
         "Projects",
         "Worktrees",
         "Providers",
         "Models",
         "Extensions",
+        "Server",
         "Experimental",
         "About",
       ]) {

packages/app/e2e/regression/settings-scroll.spec.ts

@@ -31,7 +31,7 @@ for (const viewport of [
     const panel = settings.getByRole("tabpanel")
     const main = page.getByRole("main")
     const slider = settings.getByRole("slider", { name: "Timeline detail", exact: true })
-    await expect(settings).toBeFocused()
+    await expect(settings.getByRole("combobox", { name: "Search settings", exact: true })).toBeFocused()
     await page.setViewportSize(viewport)
     await expect(slider).toHaveAccessibleDescription(/Choose how much detail appears in the session timeline/)
     await expect.poll(() => main.evaluate((el) => el.scrollHeight - el.clientHeight)).toBeLessThanOrEqual(1)

packages/app/e2e/regression/settings-search.spec.ts

@@ -0,0 +1,387 @@
+import { expect, test, type Page } from "@playwright/test"
+import en from "../../src/runtime/i18n/en"
+import { clientSettings } from "../../src/settings/search-catalog"
+import { createMockServerHandler, mockOpenCodeServer } from "../utils/mock-server"
+import { installSseTransport } from "../utils/sse-transport"
+
+const directory = "/projects/opencode"
+const config = {
+  directory,
+  project: {
+    id: "proj_search",
+    canonical: directory,
+    name: "OpenCode",
+    icon: { color: "orange" },
+    vcs: "git",
+    time: { created: 1700000000000, updated: 1700000000000 },
+    sandboxes: [],
+  },
+  provider: { all: [], connected: [], default: {} },
+  sessions: [],
+  pageMessages: () => ({ items: [] }),
+}
+
+function projectList(count: number) {
+  return Array.from({ length: count }, (_, index) => ({
+    ...config.project,
+    id: `proj_search_${index}`,
+    canonical: `${directory}-${index}`,
+    name: `OpenCode ${String(index).padStart(2, "0")}`,
+  }))
+}
+
+function ui(page: Page) {
+  const settings = page.getByTestId("settings-screen")
+  return {
+    settings,
+    search: settings.getByRole("combobox", { name: "Search settings", exact: true }),
+    results: settings.getByRole("listbox", { name: "Settings results", exact: true }),
+  }
+}
+
+async function findShortcut(page: Page) {
+  // Browser emulation can report a different OS than the machine running Playwright.
+  const key = await page.evaluate(() => (/Mac|iPhone|iPad|iPod/.test(navigator.platform) ? "Meta+f" : "Control+f"))
+  await page.keyboard.press(key)
+}
+
+test.use({ viewport: { width: 1280, height: 900 } })
+test.beforeEach(async ({ page }) => {
+  await mockOpenCodeServer(page, config)
+  await page.route("https://api.github.com/**", (route) => route.fulfill({ json: [] }))
+  await page.goto("/")
+  if ((page.viewportSize()?.width ?? 1280) < 800) await page.getByRole("button", { name: "Tabs", exact: true }).click()
+  await page.getByRole("button", { name: "Settings", exact: true }).click()
+  const view = ui(page)
+  await expect(view.search).toBeFocused()
+  // Readiness includes the server-backed project inventory, not just the settings shell.
+  await view.search.fill("OpenCode")
+  await expect(view.results.getByRole("option")).toHaveCount(1)
+  await view.search.clear()
+})
+
+test("autofocus, pointer selection, keyboard navigation, and local find shortcut", async ({ page }) => {
+  const view = ui(page)
+  await view.search.fill("font")
+  const code = view.results.getByRole("option", { name: "Code Font, Appearance", exact: true })
+  const terminal = view.results.getByRole("option", { name: "Terminal Font, Appearance", exact: true })
+  const font = view.results.getByRole("option", { name: "UI Font, Appearance", exact: true })
+  await expect(view.results.getByRole("option")).toHaveText([
+    "Code FontAppearance",
+    "Terminal FontAppearance",
+    "UI FontAppearance",
+  ])
+  await code.click()
+  await expect(code).toBeFocused()
+  await expect(view.settings.getByRole("textbox", { name: "Code Font", exact: true })).toBeInViewport()
+  await code.press("ArrowDown")
+  await expect(terminal).toBeFocused()
+  await expect(terminal).toHaveAttribute("aria-selected", "true")
+  await terminal.press("Enter")
+  await expect(terminal).toBeFocused()
+  await expect(view.settings.getByRole("textbox", { name: "Terminal Font", exact: true })).toBeInViewport()
+  await terminal.press("End")
+  await expect(font).toBeFocused()
+  await font.press("Home")
+  await expect(code).toBeFocused()
+  await terminal.focus()
+  await expect(terminal).toHaveAttribute("aria-selected", "true")
+  await terminal.press("Enter")
+  await expect(view.settings.locator('[data-search-target="row"]')).toContainText("Terminal Font")
+  await findShortcut(page)
+  await expect(view.search).toBeFocused()
+  expect(await view.search.evaluate((input: HTMLInputElement) => [input.selectionStart, input.selectionEnd])).toEqual([
+    0, 4,
+  ])
+  await view.settings.getByRole("button", { name: "Back to app", exact: true }).click()
+  await expect(view.settings).toBeHidden()
+  await findShortcut(page)
+  await expect(page.getByRole("textbox", { name: /Search sessions/ })).toBeFocused()
+})
+
+test("page priority, compact icons, section context, and the minimal empty state", async ({ page }) => {
+  const view = ui(page)
+  await view.search.fill("work")
+  await expect(view.results.getByRole("option")).toHaveText(["Worktrees", "Default environmentPreferences / General"])
+  const pageResult = view.results.getByRole("option", { name: /^Worktrees,/ })
+  await expect(pageResult).toHaveCSS("min-height", "32px")
+  await expect(pageResult.locator("svg")).toHaveCount(1)
+  await expect(view.settings.getByText("App settings", { exact: true })).toHaveCount(0)
+  await view.search.fill("Agent")
+  await expect(view.results.getByRole("option", { name: "Agent, Desktop notifications", exact: true })).toHaveText(
+    "AgentDesktop notifications",
+  )
+  await expect(view.results.getByRole("option", { name: "Agent, Sound effects", exact: true })).toHaveText(
+    "AgentSound effects",
+  )
+  await view.search.fill("zzzzzzzzzz")
+  await expect(view.results.getByRole("option")).toHaveCount(0)
+  await expect(view.settings.getByRole("status")).toHaveText("No setting found")
+  await expect(view.settings.getByRole("heading", { name: "Preferences", exact: true })).toBeVisible()
+  await view.search.press("Escape")
+  await expect(view.search).toHaveValue("")
+  await expect(view.settings.getByRole("tab", { name: "Preferences", exact: true })).toBeVisible()
+})
+
+test("Models and Shortcuts autofocus their filters on normal navigation", async ({ page }) => {
+  const view = ui(page)
+  for (const entry of [
+    { tab: "Models", search: "Search models" },
+    { tab: "Shortcuts", search: "Search shortcuts" },
+    { tab: "Models", search: "Search models" },
+  ]) {
+    await view.settings.getByRole("tab", { name: entry.tab, exact: true }).click()
+    await expect(view.settings.getByRole("searchbox", { name: entry.search, exact: true })).toBeFocused()
+  }
+  await view.search.fill("shortcuts")
+  const result = view.results.getByRole("option", { name: "Keyboard shortcuts", exact: true })
+  await result.click()
+  await expect(result).toBeFocused()
+})
+
+for (const count of [7, 8]) {
+  test(`Projects search uses the full list threshold with ${count} projects`, async ({ page }) => {
+    await page.route("**/api/project", (route) => route.fulfill({ json: projectList(count) }))
+    await page.reload()
+    const view = ui(page)
+    await view.search.fill("OpenCode")
+    await expect(view.results.getByRole("option")).toHaveCount(count)
+    await view.search.clear()
+    await view.settings.getByRole("tab", { name: "Projects", exact: true }).click()
+    const search = view.settings.getByRole("searchbox", { name: "Search projects", exact: true })
+    const projects = view.settings.getByRole("button", { name: /^OpenCode / })
+    await expect(projects).toHaveCount(count)
+    if (count === 7) {
+      await expect(search).toHaveCount(0)
+      return
+    }
+    await expect(search).toBeFocused()
+    await search.fill("  CODE 06  ")
+    await expect(projects).toHaveCount(1)
+    await expect(projects).toHaveAccessibleName("OpenCode 06")
+    await expect(search).toBeVisible()
+    await search.fill("missing-project")
+    await expect(projects).toHaveCount(0)
+    await expect(view.settings.getByText("No projects found", { exact: true })).toBeVisible()
+    await view.settings.getByRole("button", { name: "Clear", exact: true }).click()
+    await expect(search).toBeFocused()
+    await expect(projects).toHaveCount(count)
+    await view.settings.getByRole("tab", { name: "Models", exact: true }).click()
+    await view.settings.getByRole("tab", { name: "Projects", exact: true }).click()
+    await expect(search).toBeFocused()
+    await search.fill("OpenCode 06")
+    await projects.click()
+    await expect(view.settings.getByRole("heading", { name: "OpenCode 06", exact: true })).toBeVisible()
+  })
+}
+
+test("Projects search focuses when the qualifying inventory arrives after opening", async ({ page }) => {
+  const inventory = Promise.withResolvers<void>()
+  await page.route("**/api/project", async (route) => {
+    await inventory.promise
+    await route.fulfill({ json: projectList(8) })
+  })
+  const requested = page.waitForRequest((request) => new URL(request.url()).pathname === "/api/project")
+  await page.reload()
+  await requested
+  const view = ui(page)
+  const search = view.settings.getByRole("searchbox", { name: "Search projects", exact: true })
+  try {
+    await view.settings.getByRole("tab", { name: "Projects", exact: true }).click()
+    await expect(view.settings.getByRole("heading", { name: "Projects", exact: true })).toBeVisible()
+    await expect(search).toHaveCount(0)
+  } finally {
+    inventory.resolve()
+  }
+  await expect(search).toBeFocused()
+  await expect(view.settings.getByRole("button", { name: /^OpenCode / })).toHaveCount(8)
+})
+
+test("all indexed client controls resolve to visible production controls", async ({ page }) => {
+  const view = ui(page)
+  for (const entry of clientSettings.filter((entry) => entry.target && !entry.available)) {
+    await view.search.fill(en[entry.label as keyof typeof en])
+    const result = view.results.locator(`[data-setting-target="${entry.target}"]`)
+    await expect(result).toHaveCount(1)
+    await result.click()
+    await expect(view.settings.locator(`[data-action="${entry.target}"]`)).toBeInViewport()
+  }
+})
+
+test("qualified project results preserve query and selection on return", async ({ page }) => {
+  const view = ui(page)
+  await view.search.fill("project name")
+  await expect(view.results.locator('[data-setting-target="settings-project-name"]')).toHaveCount(0)
+  await view.search.fill("OpenCode")
+  const project = view.results.getByRole("option")
+  await expect(project).toHaveText("OOpenCodeProjects")
+  await expect(project.locator('[data-component="project-avatar-v2"]')).toHaveCSS("width", "14px")
+  await expect(view.settings.locator(".settings-search-group")).toHaveCount(0)
+  await view.search.fill("OpenCode name")
+  const name = view.results.getByRole("option")
+  await expect(name).toHaveText("Project nameGeneral")
+  await name.click()
+  await expect(view.search).toHaveCount(0)
+  await expect(view.settings.getByRole("button", { name: "Back to settings", exact: true })).toBeVisible()
+  await expect(view.settings.getByRole("heading", { name: "OpenCode", exact: true })).toHaveCSS("line-height", "20px")
+  await expect(view.settings.getByRole("textbox", { name: "Project name", exact: true })).toHaveValue("OpenCode")
+  await page.keyboard.press("Escape")
+  await expect(view.search).toBeFocused()
+  await expect(view.search).toHaveValue("OpenCode name")
+  await expect(name).toHaveAttribute("aria-selected", "true")
+})
+
+test("returning from a project restores a scrolled result list", async ({ page }) => {
+  await page.route("**/api/project", (route) =>
+    route.fulfill({
+      json: projectList(30),
+    }),
+  )
+  await page.reload()
+  const view = ui(page)
+  await view.search.fill("OpenCode")
+  await expect(view.results.getByRole("option")).toHaveCount(30)
+  const project = view.results.getByRole("option", { name: /^OpenCode 25,/ })
+  await project.scrollIntoViewIfNeeded()
+  await expect.poll(() => view.results.evaluate((list) => list.scrollTop)).toBeGreaterThan(0)
+  const scroll = await view.results.evaluate((list) => list.scrollTop)
+  await project.click()
+  await expect(view.settings.getByRole("heading", { name: "OpenCode 25", exact: true })).toBeVisible()
+  await view.settings.getByRole("button", { name: "Back to settings", exact: true }).click()
+  await expect(view.search).toBeFocused()
+  await expect(project).toHaveAttribute("aria-selected", "true")
+  await expect.poll(() => view.results.evaluate((list) => list.scrollTop)).toBe(scroll)
+})
+
+test("IME confirmation does not activate a search result", async ({ page }) => {
+  const view = ui(page)
+  await view.search.fill("font")
+  await expect(view.results.getByRole("option")).toHaveCount(3)
+  await view.search.dispatchEvent("keydown", { key: "Enter", isComposing: true, bubbles: true, cancelable: true })
+  await expect(view.settings.getByRole("heading", { name: "Preferences", exact: true })).toBeVisible()
+  await view.search.press("Enter")
+  await expect(view.settings.getByRole("heading", { name: "Appearance", exact: true })).toBeVisible()
+})
+
+test("header highlight runs once per search activation and finishes cleanly", async ({ page }) => {
+  const view = ui(page)
+  await view.settings.evaluate((root) => {
+    root.setAttribute("data-search-flashes", "0")
+    root.addEventListener("animationstart", (event) => {
+      if (!(event instanceof AnimationEvent) || event.animationName !== "settings-search-reveal") return
+      root.setAttribute("data-search-flashes", String(Number(root.getAttribute("data-search-flashes")) + 1))
+    })
+  })
+  await view.search.fill("skills")
+  await view.results.getByRole("option").click()
+  await expect(view.settings.getByRole("tab", { name: "Skills", exact: true })).toHaveAttribute("aria-selected", "true")
+  await expect(view.settings).toHaveAttribute("data-search-flashes", "1")
+  await view.settings.evaluate(async (root) => {
+    await Promise.all(
+      root
+        .getAnimations({ subtree: true })
+        .filter(
+          (animation) => animation instanceof CSSAnimation && animation.animationName === "settings-search-reveal",
+        )
+        .map((animation) => animation.finished),
+    )
+  })
+  await expect(view.settings.locator("[data-search-target]")).toHaveCount(0)
+  for (const tab of ["MCPs", "Plugins", "Skills"]) {
+    await view.settings.getByRole("tab", { name: tab, exact: true }).click()
+    await expect(view.settings.getByRole("tab", { name: tab, exact: true })).toHaveAttribute("aria-selected", "true")
+    await expect(view.settings.locator("[data-search-target]")).toHaveCount(0)
+  }
+  await expect(view.settings).toHaveAttribute("data-search-flashes", "1")
+  await view.results.getByRole("option").click()
+  await expect(view.settings).toHaveAttribute("data-search-flashes", "2")
+  await view.search.fill("about")
+  await view.results.getByRole("option", { name: "About", exact: true }).click()
+  await expect(view.settings.getByText("Released under the MIT License", { exact: true })).toBeVisible()
+  await expect(view.settings).toHaveAttribute("data-search-flashes", "3")
+})
+
+test("multi-server results navigate to the named server and hide search in nested views", async ({ page }) => {
+  const server = "http://127.0.0.1:4097"
+  const remote = createMockServerHandler({
+    ...config,
+    directory: "/remote/opencode",
+    project: { ...config.project, canonical: "/remote/opencode" },
+  })
+  page.on("close", () => void remote.dispose())
+  await installSseTransport(page, { server })
+  await page.route(`${server}/api/**`, async (route) => {
+    if (route.request().method() === "OPTIONS")
+      return route.fulfill({
+        status: 204,
+        headers: { "access-control-allow-origin": "*", "access-control-allow-headers": "*" },
+      })
+    const response = await remote.handler(
+      new Request(route.request().url(), { method: route.request().method(), headers: route.request().headers() }),
+    )
+    await route.fulfill({
+      status: response.status,
+      headers: { ...Object.fromEntries(response.headers), "access-control-allow-origin": "*" },
+      body: Buffer.from(await response.arrayBuffer()),
+    })
+  })
+  await page.addInitScript(
+    (server) =>
+      localStorage.setItem(
+        "opencode.global.dat:server",
+        JSON.stringify({ list: [{ type: "http", displayName: "Build server", http: { url: server } }] }),
+      ),
+    server,
+  )
+  await page.reload()
+  const view = ui(page)
+  await view.search.fill("MCPs")
+  await expect(view.results.getByRole("option")).toHaveCount(2)
+  await view.results.getByRole("option", { name: "MCPs, Build server, Extensions", exact: true }).click()
+  await expect(view.search).toHaveCount(0)
+  await expect(view.settings.getByRole("tab", { name: "Build server", exact: true })).toBeVisible()
+  await expect(view.settings.getByRole("tab", { name: "MCPs", exact: true })).toHaveAttribute("aria-selected", "true")
+  await view.settings.getByRole("button", { name: "Back to settings", exact: true }).click()
+  await expect(view.search).toHaveValue("MCPs")
+  await view.search.fill("Build server models")
+  await view.results.getByRole("option").click()
+  await expect(view.settings.getByRole("searchbox", { name: "Search models", exact: true })).toBeFocused()
+  await view.settings.getByRole("button", { name: "Back to settings", exact: true }).click()
+  await view.search.fill("Build server OpenCode name")
+  await expect(view.results.getByRole("option")).toHaveCount(1)
+  await view.results.getByRole("option").click()
+  await expect(view.settings.getByRole("button", { name: "Build server", exact: true })).toBeVisible()
+  await expect(view.settings.getByRole("textbox", { name: "Project name", exact: true })).toHaveValue("OpenCode")
+})
+
+for (const direction of ["ltr", "rtl"] as const) {
+  test.describe(`search layout ${direction}`, () => {
+    test.use({
+      viewport: { width: 390, height: 844 },
+      colorScheme: direction === "rtl" ? "dark" : "light",
+      contextOptions: { reducedMotion: "reduce" },
+    })
+    test("keeps input/content stable and hides the active descendant when results collapse", async ({ page }) => {
+      const view = ui(page)
+      await page.evaluate((direction) => {
+        document.documentElement.dir = direction
+      }, direction)
+      const input = await view.search.boundingBox()
+      const content = await view.settings.locator(".settings-content").boundingBox()
+      await view.search.fill("e")
+      await expect.poll(() => view.search.boundingBox()).toEqual(input)
+      await expect.poll(() => view.settings.locator(".settings-content").boundingBox()).toEqual(content)
+      await view.search.fill("terminal font")
+      await view.results.getByRole("option").click()
+      await expect(view.results).toBeHidden()
+      await expect(view.search).toHaveAttribute("aria-expanded", "false")
+      await expect(view.search).not.toHaveAttribute("aria-activedescendant", /.+/)
+      await expect(view.settings.getByRole("textbox", { name: "Terminal Font", exact: true })).toBeInViewport()
+      await findShortcut(page)
+      await expect(view.search).toBeFocused()
+      await expect(view.results).toBeVisible()
+      await expect(view.search).toHaveAttribute("aria-activedescendant", /.+/)
+      expect(await view.settings.evaluate((root) => root.scrollWidth <= root.clientWidth)).toBe(true)
+    })
+  })
+}

packages/app/e2e/regression/settings-wsl.spec.ts

@@ -0,0 +1,48 @@
+import { expect, test } from "@playwright/test"
+import { mockOpenCodeServer } from "../utils/mock-server"
+
+test.use({ viewport: { width: 1280, height: 900 } })
+
+for (const mode of ["failed", "stopped", "ready"] as const) {
+  test(`manages a ${mode} configured WSL server from nested settings`, async ({ page }) => {
+    await mockOpenCodeServer(page, {
+      directory: "/repo",
+      project: {
+        id: "proj_wsl_settings",
+        canonical: "/repo",
+        name: "WSL project",
+        sandboxes: [],
+        time: { created: 1, updated: 1 },
+      },
+      provider: { all: [], connected: [], default: {} },
+      sessions: [],
+      pageMessages: () => ({ items: [] }),
+    })
+    const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
+    await page.goto(`/e2e/utils/settings-wsl.html?${new URLSearchParams({ server, mode })}`)
+    const settings = page.getByTestId("settings-screen")
+    await expect(settings.getByRole("tab", { name: "Local Server", exact: true })).toBeEnabled()
+    const ubuntu = settings.getByRole("tab", { name: "Ubuntu", exact: true })
+    await expect(ubuntu).toHaveCount(1)
+    await ubuntu.click()
+    await expect(settings.getByRole("heading", { name: "Ubuntu", exact: true })).toBeVisible()
+    const connection = settings.locator('[data-component="settings-server-connection"]')
+
+    if (mode !== "ready") {
+      await expect(settings.getByRole("tab", { name: "Projects", exact: true })).toBeDisabled()
+      await connection.getByRole("button", { name: "More options", exact: true }).click()
+      await page.getByRole("menuitem", { name: "Retry start", exact: true }).click()
+      await expect(page.getByLabel("WSL actions")).toHaveText("start:wsl:Ubuntu")
+    }
+    await expect(settings.getByRole("tab", { name: "Projects", exact: true })).toBeEnabled()
+    await connection.getByRole("button", { name: "Update OpenCode", exact: true }).click()
+    await expect(page.getByLabel("WSL actions")).toContainText("update:Ubuntu")
+    await expect(connection.getByRole("button", { name: "Update OpenCode", exact: true })).toHaveCount(0)
+
+    await connection.getByRole("button", { name: "More options", exact: true }).click()
+    await page.getByRole("menuitem", { name: "Remove", exact: true }).click()
+    await expect(page.getByLabel("WSL actions")).toContainText("remove:wsl:Ubuntu")
+    await expect(settings.getByRole("tab", { name: "Ubuntu", exact: true })).toHaveCount(0)
+    await expect(settings.getByRole("tab", { name: "Server", exact: true })).toBeEnabled()
+  })
+}

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

@@ -70,7 +70,23 @@ const Group = HttpApiGroup.make("mock")
   .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.patch("projectUpdate", "/api/project/:projectID", {
+      params: { projectID: Schema.String },
+      payload: JsonPayload,
+      success: Json,
+    }),
+  )
   .add(HttpApiEndpoint.get("projectCurrent", "/api/project/current", { success: Json }))
+  .add(HttpApiEndpoint.get("configPreferences", "/api/config/preferences", { success: Json }))
+  .add(
+    HttpApiEndpoint.patch("configUpdatePreferences", "/api/config/preferences", {
+      payload: JsonPayload,
+      success: Json,
+    }),
+  )
+  .add(HttpApiEndpoint.get("configShells", "/api/config/shell", { success: Json }))
+  .add(HttpApiEndpoint.get("websearchProviders", "/api/websearch/provider", { success: Json }))
   .add(
     HttpApiEndpoint.get("worktreeList", "/api/worktree", {
       success: Json,

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

@@ -9,6 +9,9 @@ export interface MockServerConfig {
   provider: unknown | (() => unknown)
   integrationMethods?: Record<string, unknown[]>
   onConnectKey?: (input: { integrationID: string; body: unknown }) => void
+  preferences?: Record<string, unknown>
+  shells?: unknown[]
+  websearchProviders?: unknown[]
   directory: string
   project: unknown
   sessions: ({ id: string } & Record<string, unknown>)[]
@@ -179,13 +182,14 @@ export function createMockServerHandler(config: MockServerConfig) {
 const corsHeaders = {
   "access-control-allow-origin": "*",
   "access-control-allow-headers": "*",
-  "access-control-allow-methods": "GET, POST, PUT, DELETE, OPTIONS",
+  "access-control-allow-methods": "GET, POST, PUT, PATCH, 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))
+  const preferences = { current: config.preferences ?? {} }
   return HttpApiBuilder.group(MockApi, "mock", (handlers) =>
     handlers
       .handleRaw("event", () => {
@@ -263,12 +267,29 @@ function mockHandlers(config: MockServerConfig, state: { cursors: Map<string, st
           const project = config.project as typeof config.project & { canonical?: string; worktree?: string }
           return Effect.succeed([{ ...project, canonical: project.canonical ?? project.worktree ?? config.directory }])
         },
+        projectUpdate: (ctx) => {
+          const project = config.project as { canonical?: string }
+          return Effect.succeed({
+            ...project,
+            ...ctx.payload,
+            id: ctx.params.projectID,
+            canonical: project.canonical ?? config.directory,
+          })
+        },
         projectCurrent: () =>
           Effect.succeed({
             id: (config.project as { id?: string }).id,
             directory: config.directory,
             canonical: config.directory,
           }),
+        configPreferences: () => Effect.succeed(preferences.current),
+        configUpdatePreferences: (ctx) =>
+          Effect.sync(() => {
+            preferences.current = { ...preferences.current, ...ctx.payload }
+            return preferences.current
+          }),
+        configShells: () => Effect.succeed(config.shells ?? []),
+        websearchProviders: () => Effect.succeed({ location: location(config), data: config.websearchProviders ?? [] }),
         worktreeList: () =>
           Effect.succeed([
             { directory: config.directory },

packages/app/e2e/utils/settings-wsl.fixture.tsx

@@ -0,0 +1,135 @@
+import { MemoryRouter, createMemoryHistory } from "@solidjs/router"
+import { createMemo, Show } from "solid-js"
+import { createStore, unwrap } from "solid-js/store"
+import { render } from "solid-js/web"
+import { AppBaseProviders, AppInterface } from "../../src/app"
+import { PlatformProvider, type Platform } from "../../src/runtime/platform/platform"
+import { ServerConnection } from "../../src/runtime/server/registry"
+import { useWslServers } from "../../src/servers/wsl/context"
+import type { WslServersEvent, WslServersPlatform, WslServersState } from "../../src/servers/wsl/types"
+
+export function mount(input: { server: string; mode: "failed" | "stopped" | "ready" }) {
+  const root = document.getElementById("root")
+  if (!root) throw new Error("Missing fixture root")
+  const history = createMemoryHistory()
+  history.set({ value: "/settings", replace: true, scroll: false })
+  render(() => {
+    const [store, setStore] = createStore<{ calls: string[]; state: WslServersState }>({
+      calls: [],
+      state: {
+        runtime: { available: true, version: "2", error: null },
+        installed: [],
+        online: [],
+        distroProbes: {},
+        pendingRestart: false,
+        job: null,
+        servers: [
+          {
+            config: { id: "wsl:Ubuntu", distro: "Ubuntu" },
+            runtime:
+              input.mode === "ready"
+                ? { kind: "ready", url: input.server, password: null }
+                : input.mode === "failed"
+                  ? { kind: "failed", message: "WSL failed to start" }
+                  : { kind: "stopped" },
+          },
+        ],
+        opencodeChecks: {
+          Ubuntu: {
+            distro: "Ubuntu",
+            resolvedPath: "/usr/bin/opencode",
+            version: "old",
+            expectedVersion: "current",
+            matchesDesktop: false,
+            error: null,
+          },
+        },
+      },
+    })
+    const listeners = new Set<(event: WslServersEvent) => void>()
+    const publish = () =>
+      listeners.forEach((listener) => listener({ type: "state", state: structuredClone(unwrap(store.state)) }))
+    const unused = async () => {
+      throw new Error("Unexpected fixture action")
+    }
+    const wsl: WslServersPlatform = {
+      getState: async () => structuredClone(unwrap(store.state)),
+      subscribe: (listener) => {
+        listeners.add(listener)
+        return () => listeners.delete(listener)
+      },
+      probeRuntime: unused,
+      refreshDistros: unused,
+      installWsl: unused,
+      installDistro: unused,
+      probeAddable: unused,
+      openTerminal: unused,
+      addServer: unused,
+      async installOpencode(distro) {
+        setStore("calls", (calls) => [...calls, `update:${distro}`])
+        setStore("state", "opencodeChecks", distro, { version: "current", matchesDesktop: true })
+        publish()
+      },
+      async startServer(id) {
+        setStore("calls", (calls) => [...calls, `start:${id}`])
+        setStore("state", "servers", (server) => server.config.id === id, "runtime", {
+          kind: "ready",
+          url: input.server,
+          password: null,
+        })
+        publish()
+      },
+      async removeServer(id) {
+        setStore("calls", (calls) => [...calls, `remove:${id}`])
+        setStore("state", "servers", (servers) => servers.filter((server) => server.config.id !== id))
+        publish()
+      },
+    }
+    const platform: Platform = {
+      platform: "desktop",
+      os: "windows",
+      windowID: "settings-wsl-test",
+      openExternal: () => undefined,
+      openDirectoryPickerDialog: async () => null,
+      notify: async () => undefined,
+      restart: unused,
+      wslServers: wsl,
+    }
+    function Interface() {
+      const wsl = useWslServers()
+      const servers = createMemo<ServerConnection.Any[]>(() => [
+        { type: "sidecar", variant: "base", displayName: "Local Server", http: { url: input.server } },
+        ...(wsl.data?.servers ?? []).flatMap((item): ServerConnection.Any[] =>
+          item.runtime.kind === "ready"
+            ? [
+                {
+                  type: "sidecar",
+                  variant: "wsl",
+                  distro: item.config.distro,
+                  displayName: item.config.distro,
+                  http: { url: item.runtime.url },
+                },
+              ]
+            : [],
+        ),
+      ])
+      return (
+        <Show when={wsl.data}>
+          <AppInterface
+            servers={servers()}
+            defaultServer={ServerConnection.Key.make("sidecar")}
+            router={(props) => <MemoryRouter {...props} history={history} />}
+          />
+        </Show>
+      )
+    }
+    return (
+      <PlatformProvider value={platform}>
+        <AppBaseProviders locale="en">
+          <output aria-label="WSL actions">{store.calls.join(",")}</output>
+          <Interface />
+        </AppBaseProviders>
+      </PlatformProvider>
+    )
+  }, root)
+}

packages/app/e2e/utils/settings-wsl.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module">
+      import { mount } from "./settings-wsl.fixture.tsx"
+      const query = new URLSearchParams(location.search)
+      mount({ server: query.get("server"), mode: query.get("mode") })
+    </script>
+  </body>
+</html>

packages/app/playwright.config.ts

@@ -40,6 +40,7 @@ export default defineConfig({
         reuseExistingServer: !built,
         timeout: 120_000,
         env: {
+          VITE_OPENCODE_TEST_FIXTURES: "1",
           VITE_OPENCODE_SERVER_HOST: serverHost,
           VITE_OPENCODE_SERVER_PORT: serverPort,
         },

packages/app/src/home/projects/controller.tsx

@@ -1,6 +1,7 @@
 import { useDirectoryPicker } from "@/workspaces/selection/picker"
 import { useServerActionsController } from "@/servers/registry/controller"
 import { useSettingsCommand } from "@/settings/command"
+import { useSettingsSurface } from "@/settings/surface"
 import { type LocalProject } from "@/shell/state/layout"
 import { useLanguage } from "@/runtime/i18n/language"
 import { usePlatform } from "@/runtime/platform/platform"
@@ -27,6 +28,7 @@ export function createHomeProjectsController(home: HomeController) {
   const dialog = useDialog()
   const language = useLanguage()
   const openSettings = useSettingsCommand()
+  const settings = useSettingsSurface()
   const serverManagement = useServerActionsController()
   const global = useGlobal()
   const authenticate = useSshAuthenticate()
@@ -131,8 +133,9 @@ export function createHomeProjectsController(home: HomeController) {
           })
       },
       edit: (conn: ServerConnection.Any, project: LocalProject) => {
-        void import("@/settings/workspaces/project-dialog").then(({ DialogEditProject }) => {
-          void dialog.show(() => <DialogEditProject server={conn} project={project} />)
+        settings.openProject({
+          server: ServerConnection.key(conn),
+          project: project.worktree,
         })
       },
       unseenCount: (conn: ServerConnection.Any, project: LocalProject) => {

packages/app/src/new-session/screen.tsx

@@ -1,7 +1,8 @@
 import { createPromptProjectController } from "@/new-session/project/selector"
-import { useSettingsDialog } from "@/settings/command"
+import { useSettingsSurface } from "@/settings/surface"
 import { useSettings } from "@/settings/model"
 import { useTabs, type DraftTab } from "@/shell/tabs/tabs"
+import { useSettingsServers } from "@/settings/servers/inventory"
 import { useSearchParams } from "@solidjs/router"
 import { createEffect, createMemo, createResource, untrack } from "solid-js"
 import { createComposerModel } from "@/composer/model"
@@ -16,10 +17,19 @@ export default function NewSessionPage(props: { draftId: string }) {
   const settings = useSettings()
   const [search, setSearch] = useSearchParams<{ draftId?: string; prompt?: string }>()
   const tabs = useTabs()
-  const openWorkspaces = useSettingsDialog("workspaces")
+  const servers = useSettingsServers()
+  const settingsSurface = useSettingsSurface()
   const draftTab = createMemo(() =>
     tabs.store.find((tab): tab is DraftTab => tab.type === "draft" && tab.draftID === search.draftId),
   )
+  const openWorkspaces = () => {
+    const draft = draftTab()
+    if (servers().length > 1 && draft) {
+      settingsSurface.openServer(draft.server, "workspaces")
+      return
+    }
+    settingsSurface.open("workspaces")
+  }
   const workspace = createNewSessionWorkspaceController({
     selectedWorktree: () => draftTab()?.worktree,
     selectedBranch: () => draftTab()?.branch,

packages/app/src/providers/models/manage.tsx

@@ -149,7 +149,7 @@ export const DialogManageModels: Component = () => {
                             </span>
                             <span class="settings-models-group-label">
                               <ProviderIcon id={group.category} width={16} height={16} class="shrink-0" />
-                              <span class="settings-section-title">{group.items[0].provider.name}</span>
+                              <span class="settings-models-group-title">{group.items[0].provider.name}</span>
                             </span>
                           </button>
                           <Switch
@@ -162,7 +162,7 @@ export const DialogManageModels: Component = () => {
                           </Switch>
                         </div>
                         <Show when={expanded()}>
-                          <SettingsList>
+                          <SettingsList variant="catalog">
                             <For each={group.items}>
                               {(item) => (
                                 <SettingsRow title={item.name} description="">

packages/app/src/providers/models/select-dialog.tsx

@@ -162,12 +162,12 @@ const ModelList: Component<{
                         </span>
                         <span class="settings-models-group-label">
                           <ProviderIcon id={group.category} width={16} height={16} class="shrink-0" />
-                          <span class="settings-section-title">{group.items[0].provider.name}</span>
+                          <span class="settings-models-group-title">{group.items[0].provider.name}</span>
                         </span>
                       </button>
                     </h3>
                     <Show when={open()}>
-                      <SettingsList>
+                      <SettingsList variant="catalog">
                         <For each={group.items}>
                           {(item) => (
                             <button

packages/app/src/runtime/i18n/en.ts

@@ -448,6 +448,7 @@ export const dict = {
   "dialog.server.menu.default": "Set as default",
   "dialog.server.menu.defaultRemove": "Remove default",
   "dialog.server.menu.delete": "Delete",
+  "dialog.server.menu.remove": "Remove",
   "dialog.server.menu.hide": "Hide from project list",
   "dialog.server.menu.show": "Show in project list",
   "dialog.server.current": "Current Server",
@@ -996,6 +997,15 @@ export const dict = {
   "settings.section.desktop": "Desktop",
   "settings.section.server": "Server",
   "settings.backToApp": "Back to app",
+  "settings.backToSettings": "Back to settings",
+  "settings.backToProjects": "Back to projects",
+  "settings.search.placeholder": "Search settings",
+  "settings.search.results": "Settings results",
+  "settings.search.result": "{{title}}, {{scope}}, {{page}}",
+  "settings.search.page": "{{title}}, {{scope}}",
+  "settings.search.result.unscoped": "{{title}}, {{page}}",
+  "settings.search.empty": "No setting found",
+  "settings.search.refine": "Narrow your search to see more specific results.",
   "settings.tab.general": "General",
   "settings.tab.preferences": "Preferences",
   "settings.tab.shortcuts": "Shortcuts",
@@ -1033,9 +1043,14 @@ export const dict = {
   "settings.notifications.description": "Choose when to receive notifications and hear sounds",
   "settings.shortcuts.description": "Customize shortcuts for common actions",
   "settings.servers.description": "Manage server connections",
+  "settings.server.description": "Manage this server’s connection and preferences",
+  "settings.server.section.connection": "Connection",
+  "settings.server.preferences.websearch.title": "Third-party search",
+  "settings.server.preferences.websearch.description": "Select the search provider agents use to search the web",
   "settings.projects.title": "Projects",
   "settings.projects.description": "Manage project settings on this server",
   "settings.projects.empty": "No projects found",
+  "settings.projects.search.placeholder": "Search projects",
   "settings.projects.server.all": "All servers",
   "settings.mcps.description": "Manage Model Context Protocol (MCP) servers and tools",
   "settings.extensions.description": "Manage extensions available on this server",
@@ -1050,14 +1065,36 @@ export const dict = {
   "dialog.server.authenticate.title": "Authenticate",
   "project.settings.title": "Edit project",
   "project.settings.general.description": "Manage project name and appearance",
+  "project.settings.name.title": "Project name",
+  "project.settings.name.description": "The name shown for this project throughout OpenCode",
+  "project.settings.icon.description": "Recommended: 128×128px. Click or drag to upload an image.",
+  "project.settings.color.description": "Used for the project icon when no custom image is set",
+  "project.settings.worktree.startup.description": "Runs once after creating a new worktree",
+  "project.settings.worktree.startup.hint.base": "Use $OPENCODE_WORKTREE_BASE for the base worktree.",
+  "project.settings.worktree.startup.hint.new": "Use $OPENCODE_WORKTREE_PATH for the new worktree.",
   "project.settings.scripts": "Scripts",
   "project.settings.scripts.description": "Configure scripts for this project",
   "project.settings.extensions.description": "View extensions available to this project",
   "project.settings.extensions.tab.lsps": "LSPs",
   "project.settings.extensions.added": "Added to this project",
   "project.settings.extensions.shared": "Shared with all projects",
+  "project.settings.extensions.empty.mcps.title": "No MCPs yet",
+  "project.settings.extensions.empty.mcps.description": "MCPs available to OpenCode will appear here",
+  "project.settings.extensions.empty.plugins.title": "No plugins yet",
+  "project.settings.extensions.empty.plugins.description": "Plugins available to OpenCode will appear here",
+  "project.settings.extensions.empty.skills.title": "No skills yet",
+  "project.settings.extensions.empty.skills.description": "Skills available to OpenCode will appear here",
   "project.settings.extensions.lsp.detected": "Detected language servers",
   "project.settings.extensions.lsp.description": "Auto-detected from file types",
+  "project.settings.extensions.lsp.configured": "Configured language servers",
+  "project.settings.extensions.lsp.status.enabled": "Enabled in config",
+  "project.settings.extensions.lsp.status.disabled": "Disabled in config",
+  "project.settings.extensions.lsp.empty.title": "No language servers configured",
+  "project.settings.extensions.lsp.empty.description": "Language servers configured for this project will appear here",
+  "project.settings.extensions.lsp.disabled.title": "Language servers disabled",
+  "project.settings.extensions.lsp.disabled.description": "LSP is disabled in this project’s configuration",
+  "project.settings.extensions.lsp.loadFailed": "Could not load language server configuration",
+  "project.settings.extensions.lsp.retry": "Retry",
   "project.settings.extensions.setupRequired": "Setup required",
 
   "settings.general.section.appearance": "Appearance",

packages/app/src/runtime/server/runtime.tsx

@@ -1,6 +1,5 @@
 import { createSimpleContext } from "@opencode/ui/context"
 import { Accessor, createEffect, createMemo, createResource, createRoot, getOwner } from "solid-js"
-import { createStore } from "solid-js/store"
 import { createServerProjects, RECENTLY_CLOSED_DISPLAY_LIMIT, ServerConnection, useServers } from "./registry"
 import { pathKey } from "@/workspaces/path-key"
 import { useServerHealth } from "@/runtime/server/health"
@@ -25,24 +24,8 @@ export const { use: useGlobal, provider: GlobalProvider } = createSimpleContext(
       () => server.list,
       () => true,
     )
-    const [store, setStore] = createStore({
-      settings: {
-        serverKey: undefined as ServerConnection.Key | undefined,
-      },
-    })
     const models = createGlobalModels()
 
-    const settingsServer = createMemo(() => {
-      const list = server.list
-      return list.find((conn) => ServerConnection.key(conn) === store.settings.serverKey) ?? list[0]
-    })
-
-    createEffect(() => {
-      const conn = settingsServer()
-      const key = conn ? ServerConnection.key(conn) : undefined
-      if (store.settings.serverKey !== key) setStore("settings", "serverKey", key)
-    })
-
     const serverCtxs = new Map<ServerConnection.Key, ReturnType<typeof createServerController>>()
     const serverCtxDisposers = new Map<ServerConnection.Key, () => void>()
 
@@ -82,17 +65,6 @@ export const { use: useGlobal, provider: GlobalProvider } = createSimpleContext(
         list: () => server.list,
         health: serverHealth,
       },
-      settings: {
-        server: {
-          get key() {
-            return store.settings.serverKey
-          },
-          selected: settingsServer,
-          set(key: ServerConnection.Key) {
-            if (store.settings.serverKey !== key) setStore("settings", "serverKey", key)
-          },
-        },
-      },
       models,
       ensureServerCtx(conn: ServerConnection.Any) {
         return ensureServerCtx(conn)

packages/app/src/servers/connect/dialog.tsx

@@ -25,11 +25,15 @@ type FormMode = "list" | "add" | "edit"
 export const DialogServer: Component<{
   mode: "add" | "edit"
   server?: ServerConnection.Http
+  onSave?: (server: ServerConnection.Http) => void
 }> = (props) => {
   const dialog = useDialog()
   const language = useLanguage()
   const form = createFormController({
-    onSelect: () => dialog.close(),
+    onSelect: (server) => {
+      props.onSave?.(server)
+      dialog.close()
+    },
   })
   const [opened, setOpened] = createSignal(false)
 
@@ -133,7 +137,7 @@ export const DialogServer: Component<{
   )
 }
 
-function createFormController(options: { onSelect?: () => void } = {}) {
+function createFormController(options: { onSelect?: (server: ServerConnection.Http) => void } = {}) {
   const platform = usePlatform()
   const server = useServers()
   const tabs = useTabs()
@@ -220,13 +224,14 @@ function createFormController(options: { onSelect?: () => void } = {}) {
       if (original?.type === "http") {
         if (normalized === original.http.url) add(connection)
         if (normalized !== original.http.url) replace(ServerConnection.key(original), connection)
+        options.onSelect?.(connection)
         reset()
         return
       }
 
       reset()
       add(connection)
-      options.onSelect?.()
+      options.onSelect?.(connection)
     },
   }))
 

packages/app/src/servers/registry/controller.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, test } from "bun:test"
+import { ServerConnection } from "@/runtime/server/registry"
+import { sortServerConnections } from "./controller"
+
+const server = (url: string): ServerConnection.Http => ({ type: "http", http: { url } })
+
+describe("sortServerConnections", () => {
+  test("places the default first and preserves health and insertion ordering", () => {
+    const first = server("http://first")
+    const offline = server("http://offline")
+    const preferred = server("http://preferred")
+    const unknown = server("http://unknown")
+    const result = sortServerConnections({
+      servers: [first, offline, preferred, unknown],
+      health: {
+        [ServerConnection.key(first)]: { healthy: true },
+        [ServerConnection.key(offline)]: { healthy: false },
+      },
+      defaultKey: ServerConnection.key(preferred),
+    })
+
+    expect(result).toEqual([preferred, first, unknown, offline])
+  })
+})

packages/app/src/servers/registry/controller.ts

@@ -1,10 +1,8 @@
-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"
@@ -49,6 +47,27 @@ function useDefaultServer() {
   }
 }
 
+export function sortServerConnections(input: {
+  servers: ServerConnection.Any[]
+  health: Record<string, ServerHealth | undefined>
+  defaultKey: ServerConnection.Key | null
+}) {
+  const order = new Map(input.servers.map((item, index) => [item, index] as const))
+  const rank = (value?: ServerHealth) => {
+    if (value?.healthy === true) return 0
+    if (value?.healthy === false) return 2
+    return 1
+  }
+  return input.servers.slice().sort((a, b) => {
+    const preferred =
+      Number(ServerConnection.key(b) === input.defaultKey) - Number(ServerConnection.key(a) === input.defaultKey)
+    if (preferred !== 0) return preferred
+    const health = rank(input.health[ServerConnection.key(a)]) - rank(input.health[ServerConnection.key(b)])
+    if (health !== 0) return health
+    return (order.get(a) ?? 0) - (order.get(b) ?? 0)
+  })
+}
+
 export function useServerActionsController() {
   const server = useServers()
   const ssh = useSsh()
@@ -78,8 +97,8 @@ export function useServerActionsController() {
         const conn = server.list.find((item) => ServerConnection.key(item) === key)
         return server.visible.length > 1 && !!conn && ServerConnection.builtin(conn)
       },
-      isHidden: server.isHidden,
-      setHidden: server.setHidden,
+      isHidden: (key: ServerConnection.Key) => server.isHidden(key),
+      setHidden: (key: ServerConnection.Key, hidden: boolean) => server.setHidden(key, hidden),
     },
   }
 }
@@ -89,27 +108,16 @@ export type ServerActionsController = ReturnType<typeof useServerActionsControll
 export function useServerCollectionController() {
   const server = useServers()
   const global = useGlobal()
-  const settings = useSettings()
   const actions = useServerActionsController()
 
   const items = createMemo(() => server.list)
-  const sorted = createMemo(() => {
-    const raw = items()
-    const list = raw
-    if (!list.length) return list
-    const order = new Map(list.map((item, index) => [item, index] as const))
-    const rank = (value?: ServerHealth) => {
-      if (value?.healthy === true) return 0
-      if (value?.healthy === false) return 2
-      return 1
-    }
-    return list.slice().sort((a, b) => {
-      const diff =
-        rank(global.servers.health[ServerConnection.key(a)]) - rank(global.servers.health[ServerConnection.key(b)])
-      if (diff !== 0) return diff
-      return (order.get(a) ?? 0) - (order.get(b) ?? 0)
-    })
-  })
+  const sorted = createMemo(() =>
+    sortServerConnections({
+      servers: items(),
+      health: global.servers.health,
+      defaultKey: actions.defaults.key(),
+    }),
+  )
 
   return {
     collection: {

packages/app/src/servers/registry/row-menu.tsx

@@ -45,7 +45,7 @@ export function serverMenuLabels(language: ReturnType<typeof useLanguage>) {
     edit: language.t("dialog.server.menu.edit"),
     default: language.t("dialog.server.menu.default"),
     defaultRemove: language.t("dialog.server.menu.defaultRemove"),
-    delete: language.t("dialog.server.menu.delete"),
+    remove: language.t("dialog.server.menu.remove"),
     hide: language.t("dialog.server.menu.hide"),
     show: language.t("dialog.server.menu.show"),
   }
@@ -106,7 +106,7 @@ export const ServerRowMenuView: Component<{
             </Show>
             <Show when={props.canRemove}>
               <Menu.Separator />
-              <Menu.Item onSelect={props.onRemove}>{props.labels.delete}</Menu.Item>
+              <Menu.Item onSelect={props.onRemove}>{props.labels.remove}</Menu.Item>
             </Show>
           </Menu.Group>
         </Menu.Content>

packages/app/src/servers/ssh/settings.tsx

@@ -11,14 +11,16 @@ import { Spinner } from "@opencode/ui/spinner"
 import { sshName } from "./name"
 import { isSshConnecting } from "./status"
 
-export function SshServerSettings(props: { filter: string; domain: ServerCollectionController }) {
+export function SshServerSettings(props: { filter: string; id?: string; domain: ServerCollectionController }) {
   const ssh = useSsh()
   const language = useLanguage()
   return (
     <For
       each={ssh.servers.filter(
         (item) =>
-          item.saved && `${item.config.name} ${item.config.target}`.toLowerCase().includes(props.filter.toLowerCase()),
+          item.saved &&
+          (!props.id || item.config.id === props.id) &&
+          `${item.config.name} ${item.config.target}`.toLowerCase().includes(props.filter.toLowerCase()),
       )}
     >
       {(item) => {

packages/app/src/servers/wsl/settings.tsx

@@ -17,12 +17,13 @@ import { DialogAddWslServer } from "./dialog"
 import { useWslServers } from "./context"
 import { wslOpencodeAction, wslRuntimeRetryable } from "./model"
 import { DialogSsh } from "../ssh/dialog"
+import type { WslServerItem } from "./types"
 
 export function isWslServer(server: ServerConnection.Any) {
   return server.type === "sidecar" && server.variant === "wsl"
 }
 
-export function AddServerMenu(props: { onAddServer: () => void }) {
+export function AddServerMenu(props: { onAddServer: () => void; compact?: boolean }) {
   const platform = usePlatform()
   const dialog = useDialog()
   const language = useLanguage()
@@ -33,15 +34,41 @@ export function AddServerMenu(props: { onAddServer: () => void }) {
     <Show
       when={platform.wslServers || platform.sshServers}
       fallback={
-        <Button variant="ghost-muted" icon="plus" onClick={props.onAddServer}>
-          {language.t("dialog.server.add.button")}
-        </Button>
+        <Show
+          when={props.compact}
+          fallback={
+            <Button variant="ghost-muted" icon="plus" onClick={props.onAddServer}>
+              {language.t("dialog.server.add.button")}
+            </Button>
+          }
+        >
+          <IconButton
+            variant="ghost-muted"
+            size="small"
+            icon={<Icon name="plus" />}
+            aria-label={language.t("dialog.server.add.button")}
+            onClick={props.onAddServer}
+          />
+        </Show>
       }
     >
       <Menu gutter={4} modal={false} placement="bottom-end">
-        <Menu.Trigger as={Button} variant="ghost-muted" icon="plus">
-          {language.t("dialog.server.add.button")}
-        </Menu.Trigger>
+        <Show
+          when={props.compact}
+          fallback={
+            <Menu.Trigger as={Button} variant="ghost-muted" icon="plus">
+              {language.t("dialog.server.add.button")}
+            </Menu.Trigger>
+          }
+        >
+          <Menu.Trigger
+            as={IconButton}
+            variant="ghost-muted"
+            size="small"
+            icon={<Icon name="plus" />}
+            aria-label={language.t("dialog.server.add.button")}
+          />
+        </Show>
         <Menu.Portal>
           <Menu.Content>
             <Menu.Item onSelect={props.onAddServer}>{language.t("dialog.server.add.button")}</Menu.Item>
@@ -72,7 +99,7 @@ export function useFilteredWslServers(filter: Accessor<string>) {
 
 export function WslServerSettings(props: {
   domain: Pick<ServerCollectionController, "collection" | "defaults" | "connection">
-  servers: ReturnType<typeof useFilteredWslServers>
+  servers: Accessor<readonly WslServerItem[]>
 }) {
   const platform = usePlatform()
   const language = useLanguage()
@@ -160,7 +187,9 @@ export function WslServerSettings(props: {
                           </Menu.Item>
                         </Show>
                         <Menu.Separator />
-                        <Menu.Item onSelect={() => remove(key)}>{language.t("dialog.server.menu.delete")}</Menu.Item>
+                        <Menu.Item disabled={request.isPending} onSelect={() => remove(key)}>
+                          {language.t("dialog.server.menu.remove")}
+                        </Menu.Item>
                       </Menu.Group>
                     </Menu.Content>
                   </Menu.Portal>

packages/app/src/session/session-identity-header.tsx

@@ -1,5 +1,4 @@
 import type { SessionInfo } from "@opencode/client/promise"
-import { useDialog } from "@opencode/ui/context/dialog"
 import { Icon } from "@opencode/ui/icon"
 import { IconButton } from "@opencode/ui/icon-button"
 import { Menu } from "@opencode/ui/menu"
@@ -10,12 +9,14 @@ import { useNavigate } from "@solidjs/router"
 import { createMemo, Show, type ParentProps } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useServer } from "@/runtime/server/current"
+import { ServerConnection } from "@/runtime/server/registry"
 import { useLanguage } from "@/runtime/i18n/language"
 import { usePlatform } from "@/runtime/platform/platform"
 import { displayName, errorMessage, getProjectAvatarSource, projectForSession } from "@/shell/layout/helpers"
 import { getProjectAvatarVariant, useLayout, type LocalProject } from "@/shell/state/layout"
 import { tabKey, useTabs } from "@/shell/tabs/tabs"
 import { useSettings } from "@/settings/model"
+import { useSettingsSurface } from "@/settings/surface"
 import { pathKey } from "@/workspaces/path-key"
 import { isProjectDirectory, isWorkspaceDirectory } from "@/workspaces/paths"
 import { sessionHref } from "@/shell/routes/session"
@@ -42,9 +43,9 @@ export function SessionProjectMenu(props: {
 }) {
   const server = useServer()
   const language = useLanguage()
-  const dialog = useDialog()
   const platform = usePlatform()
   const layout = useLayout()
+  const settingsSurface = useSettingsSurface()
   const navigate = useNavigate()
   const [state, setState] = createStore({
     open: false,
@@ -64,11 +65,13 @@ export function SessionProjectMenu(props: {
       }),
     )
   }
-  const openProjectSettings = async () => {
+  const openProjectSettings = () => {
     const current = props.project
     if (!current) return
-    const { DialogEditProject } = await import("@/settings/workspaces/project-dialog")
-    dialog.push(() => <DialogEditProject project={{ expanded: false, ...current }} server={server.conn} />)
+    settingsSurface.openProject({
+      server: ServerConnection.key(server.conn),
+      project: current.worktree,
+    })
   }
 
   return (
@@ -191,7 +194,7 @@ export function SessionProjectMenu(props: {
             </Menu.Item>
           </Tooltip>
           <Menu.Separator />
-          <Menu.Item disabled={!props.project} onSelect={() => void openProjectSettings()}>
+          <Menu.Item disabled={!props.project} onSelect={openProjectSettings}>
             <Icon name="settings-gear" class="text-v2-icon-icon-muted" />
             {language.t("project.settings.title")}
           </Menu.Item>

packages/app/src/settings/command.tsx

@@ -1,8 +1,9 @@
 import { useCommand } from "@/shell/commands/command"
 import { useLanguage } from "@/runtime/i18n/language"
 import { useSettingsSurface } from "./surface"
+import type { SettingsRootTab } from "./surface"
 
-export function useSettingsDialog(defaultValue?: string) {
+export function useSettingsDialog(defaultValue?: SettingsRootTab) {
   const settings = useSettingsSurface()
   return () => settings.open(defaultValue)
 }

packages/app/src/settings/general/controllers.ts

@@ -1,4 +1,5 @@
 import { createMemo, createResource, onMount, type Accessor } from "solid-js"
+import type { ConfigPreferences, ConfigUpdatePreferencesInput } from "@opencode/client/promise"
 import type { ColorScheme } from "@opencode/ui/theme/context"
 import { useTheme } from "@opencode/ui/theme/context"
 import {
@@ -14,32 +15,100 @@ import {
   useSettings,
 } from "@/settings/model"
 import { playSoundById, SOUND_OPTIONS } from "@/shell/notifications/sound"
-import { createSoundPreviewController, type ShellOption } from "./behavior"
+import { createSoundPreviewController } from "./behavior"
 import { ServerConnection } from "@/runtime/server/registry"
 import { useServerCtx } from "@/runtime/server/runtime"
+import { useLanguage } from "@/runtime/i18n/language"
+import { showToast } from "@/shell/notifications/toast"
 
 export { createShellOptions, createSoundPreviewController } from "./behavior"
 export type { ShellOption, ShellSelectOption } from "./behavior"
 
-export function createShellSettingsController(server: Accessor<ServerConnection.Any | undefined>) {
+export function createServerPreferencesController(server: Accessor<ServerConnection.Any>) {
+  const language = useLanguage()
   const serverCtx = useServerCtx(server)
-  const [shells] = createResource(
-    async () => {
-      // TODO: Dax is considering the V2 shell discovery and config update APIs.
-      // return (await sdk.api.pty.shells()).data
-      return [] as ShellOption[]
-    },
-    { initialValue: [] as ShellOption[] },
+  const source = () => ServerConnection.key(server())
+  const [preferences, preferencesActions] = createResource<ConfigPreferences, ServerConnection.Key>(
+    source,
+    () =>
+      serverCtx()
+        .sdk.api.config.preferences()
+        .catch(() => ({})),
+    { initialValue: {} },
   )
-  const current = createMemo(() => serverCtx()?.sync.data.config.shell ?? "")
+  const [shells] = createResource(
+    source,
+    () =>
+      serverCtx()
+        .sdk.api.config.shells()
+        .catch(() => []),
+    { initialValue: [] },
+  )
+  const [providers] = createResource(
+    source,
+    () =>
+      serverCtx()
+        .sdk.api.websearch.providers()
+        .then((result) => result.data)
+        .catch(() => []),
+    { initialValue: [] },
+  )
+
+  const update = async (patch: ConfigUpdatePreferencesInput) => {
+    const context = serverCtx()
+    const previous = preferences.latest
+    preferencesActions.mutate({
+      ...previous,
+      ...(patch.shell === undefined ? {} : { shell: patch.shell ?? undefined }),
+      ...(patch.websearch === undefined ? {} : { websearch: patch.websearch ?? undefined }),
+    })
+    await context.sdk.api.config
+      .updatePreferences(patch)
+      .then(preferencesActions.mutate)
+      .catch((error: unknown) => {
+        preferencesActions.mutate(previous)
+        showToast({
+          variant: "error",
+          title: language.t("common.requestFailed"),
+          description: error instanceof Error ? error.message : language.t("common.requestFailed"),
+        })
+      })
+  }
+
+  const websearchOptions = createMemo(() => {
+    const options = providers.latest.map((provider) => ({ value: provider.id, label: provider.name }))
+    const selected = preferences.latest.websearch
+    const configured = selected && selected.provider !== "random" ? selected.provider : undefined
+    return [
+      { value: "random" as const, label: language.t("session.websearch.any") },
+      ...options,
+      ...(configured && !options.some((option) => option.value === configured)
+        ? [{ value: configured, label: configured }]
+        : []),
+      { value: false as const, label: language.t("session.websearch.disable") },
+    ]
+  })
+  const websearchCurrent = createMemo(() => {
+    const selection = preferences.latest.websearch
+    const value = selection === false ? false : (selection?.provider ?? "random")
+    return websearchOptions().find((option) => option.value === value) ?? websearchOptions()[0]
+  })
 
   return {
-    shells: () => shells.latest,
-    current,
-    select: (value: string) => {
-      if (value === current()) return
-      // TODO: Dax is considering the V2 shell discovery and config update APIs.
-      // void serverSync.updateConfig({ shell: value })
+    shell: {
+      shells: () => shells.latest,
+      current: () => preferences.latest.shell ?? "",
+      select: (value: string) => {
+        if (value === (preferences.latest.shell ?? "")) return
+        void update({ shell: value || null })
+      },
+    },
+    websearch: {
+      options: websearchOptions,
+      current: websearchCurrent,
+      select: (value: string | false) => {
+        void update({ websearch: value === false ? false : { provider: value } })
+      },
     },
   }
 }
@@ -139,6 +208,6 @@ export function createSoundSettingsController() {
   }
 }
 
-export type ShellSettingsController = ReturnType<typeof createShellSettingsController>
+export type ShellSettingsController = ReturnType<typeof createServerPreferencesController>["shell"]
 export type AppearanceSettingsController = ReturnType<typeof createAppearanceSettingsController>
 export type SoundSettingsController = ReturnType<typeof createSoundSettingsController>

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

@@ -21,12 +21,10 @@ import { SettingsRow } from "@/settings/row"
 import {
   createAppearanceSettingsController,
   createShellOptions,
-  createShellSettingsController,
   type AppearanceSettingsController,
   type ShellSettingsController,
 } from "./controllers"
 import "@/settings/settings.css"
-import { ServerConnection } from "@/runtime/server/registry"
 
 const schemeOptions: ("system" | "light" | "dark")[] = ["system", "light", "dark"]
 const fontSettings = {
@@ -85,6 +83,7 @@ const WorkspaceDestinationSetting: Component = () => {
       description={language.t("settings.workspaces.default.description")}
     >
       <Select
+        data-action="settings-workspace-destination"
         options={options()}
         current={options().find((option) => option.value === settings.workspaces.defaultDestination())}
         value={(option) => option.value}
@@ -97,7 +96,7 @@ const WorkspaceDestinationSetting: Component = () => {
   )
 }
 
-const ShellSetting: Component<{ controller: ShellSettingsController }> = (props) => {
+export const ShellSetting: Component<{ controller: ShellSettingsController }> = (props) => {
   const language = useLanguage()
   const options = createMemo(() =>
     createShellOptions({
@@ -295,15 +294,12 @@ const LanguageSetting = () => {
   )
 }
 
-export const SettingsGeneral: Component<{
-  server?: ServerConnection.Any
-}> = (props) => {
+export const SettingsGeneral: Component = () => {
   const language = useLanguage()
   const platform = usePlatform()
   const settings = useSettings()
   const mobile = createMediaQuery("(max-width: 767px)")
   const updater = useUpdaterAction()
-  const shell = createShellSettingsController(() => props.server)
   const desktop = createMemo(() => platform.platform === "desktop")
 
   const [pinchZoom, { mutate: setPinchZoom }] = createResource(
@@ -328,10 +324,20 @@ export const SettingsGeneral: Component<{
         <WorkspaceDestinationSetting />
         <AutoApprovePermissionsSetting />
 
-        <ShellSetting controller={shell} />
         <TerminalPlacementSetting />
         <FollowUpBehaviorSetting />
 
+        <Show when={desktop()}>
+          <SettingsRow
+            title={language.t("settings.general.row.pinchZoom.title")}
+            description={language.t("settings.general.row.pinchZoom.description")}
+          >
+            <div data-action="settings-pinch-zoom">
+              <Switch checked={pinchZoom.latest} onChange={onPinchZoomChange} />
+            </div>
+          </SettingsRow>
+        </Show>
+
         <SettingsRow
           title={language.t("session.review.wrapLines")}
           description={language.t("settings.general.row.mobileDiffWrap.description")}
@@ -474,7 +480,13 @@ export const SettingsGeneral: Component<{
           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()}>
+          <Button
+            data-action="settings-check-updates"
+            size="normal"
+            variant="neutral"
+            disabled={!updater.action().run}
+            onClick={() => updater.run()}
+          >
             {language.t(updater.action().label)}
           </Button>
         </SettingsRow>
@@ -482,26 +494,6 @@ export const SettingsGeneral: Component<{
     </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>
-
-        <SettingsList>
-          <SettingsRow
-            title={language.t("settings.general.row.pinchZoom.title")}
-            description={language.t("settings.general.row.pinchZoom.description")}
-          >
-            <div data-action="settings-pinch-zoom">
-              <Switch checked={pinchZoom.latest} onChange={onPinchZoomChange} />
-            </div>
-          </SettingsRow>
-        </SettingsList>
-      </div>
-    </Show>
-  )
-
   return (
     <>
       <div class="settings-tab-header">
@@ -514,7 +506,7 @@ export const SettingsGeneral: Component<{
           </div>
         </div>
       </div>
-      <div class="settings-tab-body">
+      <div class="settings-tab-body settings-tab-body--sectioned">
         <GeneralSection />
 
         <section class="settings-section" aria-label={language.t("settings.timeline.title")}>
@@ -533,8 +525,6 @@ export const SettingsGeneral: Component<{
           <UpdatesSection />
         </Show>
 
-        <DisplaySection />
-
         <AdvancedSection />
       </div>
     </>

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

@@ -1,4 +1,4 @@
-import { For, Show, createMemo, lazy, onCleanup } from "solid-js"
+import { For, Show, createEffect, createMemo, lazy, on, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { Button } from "@opencode/ui/button"
@@ -342,7 +342,7 @@ export function createKeybindSettingsController(
   }
 }
 
-export function SettingsKeybinds() {
+export function SettingsKeybinds(props: { active?: boolean; autofocus?: boolean }) {
   const command = useCommand()
   const settings = useSettings()
   const controller = createKeybindSettingsController({
@@ -352,6 +352,8 @@ export function SettingsKeybinds() {
 
   return (
     <SettingsKeybindsView
+      visible={props.active}
+      autofocus={props.autofocus}
       groups={controller.catalog.groups}
       filtered={controller.catalog.filtered}
       title={controller.catalog.title}
@@ -365,6 +367,8 @@ export function SettingsKeybinds() {
 }
 
 function SettingsKeybindsView(props: {
+  visible?: boolean
+  autofocus?: boolean
   groups: KeybindGroup[]
   filtered: (query: string) => Map<KeybindGroup, string[]>
   title: (id: string) => string
@@ -375,6 +379,20 @@ function SettingsKeybindsView(props: {
   onReset: () => void
 }) {
   const language = useLanguage()
+  let search: HTMLInputElement | undefined
+  createEffect(
+    on(
+      () => props.visible ?? true,
+      (visible) => {
+        if (!visible) return
+        const frame = requestAnimationFrame(() => {
+          if (props.visible !== false && props.autofocus !== false && search?.isConnected)
+            search.focus({ preventScroll: true })
+        })
+        onCleanup(() => cancelAnimationFrame(frame))
+      },
+    ),
+  )
   const [store, setStore] = createStore({ filter: "" })
   const filtered = createMemo(() => props.filtered(store.filter))
   const hasResults = createMemo(() => props.groups.some((group) => (filtered().get(group)?.length ?? 0) > 0))
@@ -393,6 +411,7 @@ function SettingsKeybindsView(props: {
         </div>
         <div class="settings-tab-search">
           <TextInput
+            ref={search}
             type="search"
             appearance="base"
             value={store.filter}
@@ -417,7 +436,7 @@ function SettingsKeybindsView(props: {
         </div>
       </div>
       <div class="settings-tab-body">
-        <div class="settings-shortcuts flex flex-col gap-8">
+        <div class="settings-shortcuts settings-section-stack">
           <For each={props.groups}>
             {(group) => (
               <Show when={(filtered().get(group) ?? []).length > 0}>

packages/app/src/settings/list.tsx

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

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

@@ -4,7 +4,7 @@ import { Switch } from "@opencode/ui/switch"
 import { Icon } from "@opencode/ui/icon"
 import { IconButton } from "@opencode/ui/icon-button"
 import { TextInput } from "@opencode/ui/text-input"
-import { type Component, For, Show } from "solid-js"
+import { type Component, createEffect, For, on, onCleanup, Show } from "solid-js"
 import { Schema } from "effect"
 import { Persistence } from "@/runtime/persistence/schema"
 import { useLanguage } from "@/runtime/i18n/language"
@@ -12,7 +12,6 @@ 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"
@@ -25,10 +24,24 @@ export const ModelProvidersSchema = Schema.Struct({
   collapsed: Persistence.record(Persistence.fallback(Schema.Boolean, () => false)),
 })
 
-export const SettingsModels: Component = () => {
+export const SettingsModels: Component<{ active?: boolean; autofocus?: boolean }> = (props) => {
   const language = useLanguage()
   const models = useModels()
   const serverSdk = useServerSDK()
+  let search: HTMLInputElement | undefined
+  createEffect(
+    on(
+      () => props.active ?? true,
+      (active) => {
+        if (!active) return
+        const frame = requestAnimationFrame(() => {
+          if (props.active !== false && props.autofocus !== false && search?.isConnected)
+            search.focus({ preventScroll: true })
+        })
+        onCleanup(() => cancelAnimationFrame(frame))
+      },
+    ),
+  )
   const [store, setStore] = persisted(
     Persist.serverGlobal(serverSdk.scope, "settings-v2.models.providers"),
     ModelProvidersSchema,
@@ -65,10 +78,10 @@ export const SettingsModels: Component = () => {
             <h2 class="settings-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">
           <TextInput
+            ref={search}
             type="search"
             appearance="base"
             value={list.filter()}
@@ -160,12 +173,12 @@ export const SettingsModels: Component = () => {
                             height={PROVIDER_ICON_SIZE}
                             class="settings-models-provider-icon shrink-0"
                           />
-                          <span class="settings-section-title">{group.items[0].provider.name}</span>
+                          <span class="settings-models-group-title">{group.items[0].provider.name}</span>
                         </span>
                       </button>
                     </h3>
                     <Show when={expanded()}>
-                      <SettingsList>
+                      <SettingsList variant="catalog">
                         <For each={group.items}>
                           {(item) => {
                             const key = { providerID: item.provider.id, modelID: item.id }

packages/app/src/settings/navigation.tsx

@@ -0,0 +1,126 @@
+import { Button } from "@opencode/ui/button"
+import { Icon } from "@opencode/ui/icon"
+import { Menu } from "@opencode/ui/menu"
+import { Tabs } from "@opencode/ui/tabs"
+import { For, Show, type ComponentProps, type JSX } from "solid-js"
+import { useLanguage } from "@/runtime/i18n/language"
+import { useSettingsSurface } from "./surface"
+import { SettingsSearch } from "./search"
+import "./search.css"
+
+export type SettingsNavItem = {
+  value: string
+  label: string
+  icon: ComponentProps<typeof Icon>["name"]
+  disabled?: boolean
+}
+
+export type SettingsNavGroup = {
+  label?: string
+  action?: JSX.Element
+  items: readonly SettingsNavItem[]
+}
+
+export function SettingsNavigation(props: {
+  value: string
+  groups: readonly SettingsNavGroup[]
+  backLabel: string
+  onBack: () => void
+  onChange: (value: string) => void
+  mobileAction?: JSX.Element
+  children: JSX.Element
+}) {
+  const surface = useSettingsSurface()
+  const searchable = () => surface.view().type === "root"
+  const language = useLanguage()
+  const back = () => {
+    if (!searchable() && surface.search.back()) return
+    props.onBack()
+  }
+  const backLabel = () =>
+    !searchable() && surface.search.state.selected ? language.t("settings.backToSettings") : props.backLabel
+  const current = () => props.groups.flatMap((group) => group.items).find((item) => item.value === props.value)
+  const change = (value: string) => {
+    surface.search.clear()
+    props.onChange(value)
+  }
+
+  return (
+    <Tabs orientation="vertical" variant="settings" value={props.value} onChange={change} class="settings">
+      <div class="settings-mobile-nav">
+        <button type="button" class="settings-back" onClick={back}>
+          <Icon name="arrow-left" size="small" class="settings-back-icon" />
+          <span>{backLabel()}</span>
+        </button>
+        <div class="settings-mobile-actions">
+          {props.mobileAction}
+          <Menu placement="bottom-end" gutter={8}>
+            <Menu.Trigger as={Button} size="normal" variant="outline" class="settings-mobile-menu-trigger">
+              <span>{current()?.label}</span>
+              <Icon name="chevron-down" size="small" />
+            </Menu.Trigger>
+            <Menu.Portal>
+              <Menu.Content class="settings-mobile-menu" onEscapeKeyDown={(event) => event.stopPropagation()}>
+                <Menu.RadioGroup value={props.value} onChange={change}>
+                  <For each={props.groups}>
+                    {(group, index) => (
+                      <>
+                        <Show when={index() > 0}>
+                          <Menu.Separator />
+                        </Show>
+                        <For each={group.items}>
+                          {(item) => (
+                            <Menu.RadioItem value={item.value} disabled={item.disabled} closeOnSelect>
+                              <Icon name={item.icon} />
+                              {item.label}
+                            </Menu.RadioItem>
+                          )}
+                        </For>
+                      </>
+                    )}
+                  </For>
+                </Menu.RadioGroup>
+              </Menu.Content>
+            </Menu.Portal>
+          </Menu>
+        </div>
+      </div>
+      <aside class="settings-sidebar" data-searchable={searchable()}>
+        <div class="settings-nav">
+          <button type="button" class="settings-back" onClick={back}>
+            <Icon name="arrow-left" size="small" class="settings-back-icon" />
+            <span>{backLabel()}</span>
+          </button>
+          <Show when={searchable()}>
+            <SettingsSearch />
+          </Show>
+          <Show when={!searchable() || !surface.search.state.query.trim()}>
+            <Tabs.List class="settings-nav-groups">
+              <For each={props.groups}>
+                {(group) => (
+                  <div class="settings-nav-group">
+                    <Show when={group.label || group.action}>
+                      <div class="settings-nav-group-header" data-component="settings-nav-group-header">
+                        <span>{group.label}</span>
+                        {group.action}
+                      </div>
+                    </Show>
+                    <For each={group.items}>
+                      {(item) => (
+                        <Tabs.Trigger value={item.value} disabled={item.disabled}>
+                          <Icon name={item.icon} />
+                          {item.label}
+                        </Tabs.Trigger>
+                      )}
+                    </For>
+                  </div>
+                )}
+              </For>
+            </Tabs.List>
+          </Show>
+        </div>
+      </aside>
+      <div class="settings-content">{props.children}</div>
+    </Tabs>
+  )
+}

packages/app/src/settings/notifications/notifications.tsx

@@ -71,7 +71,7 @@ export const SettingsNotifications: Component = () => {
         </div>
       </div>
 
-      <div class="settings-tab-body">
+      <div class="settings-tab-body settings-tab-body--sectioned">
         <div class="settings-section">
           <h3 class="settings-section-title">{language.t("settings.general.section.notifications")}</h3>
           <SettingsList>

packages/app/src/settings/pages.ts

@@ -0,0 +1,33 @@
+import type { IconProps } from "@opencode/ui/icon"
+import type { useLanguage } from "@/runtime/i18n/language"
+import type { SettingsRootTab } from "./surface"
+
+export const pageIcons = {
+  general: "sliders",
+  appearance: "appearance",
+  notifications: "notifications",
+  shortcuts: "keyboard",
+  projects: "folder",
+  workspaces: "outline-worktree",
+  providers: "providers",
+  models: "models",
+  extensions: "extensions",
+  servers: "server",
+  experimental: "flask",
+  about: "info",
+} as const satisfies Record<SettingsRootTab, IconProps["name"]>
+
+export const pageLabels = {
+  general: "settings.tab.preferences",
+  appearance: "settings.general.section.appearance",
+  notifications: "settings.tab.notifications",
+  shortcuts: "settings.shortcuts.title",
+  projects: "settings.tab.projects",
+  workspaces: "settings.tab.workspaces",
+  providers: "settings.providers.title",
+  models: "settings.models.title",
+  extensions: "settings.tab.extensions",
+  servers: "settings.section.server",
+  experimental: "settings.tab.experimental",
+  about: "settings.tab.about",
+} as const satisfies Record<SettingsRootTab, Parameters<ReturnType<typeof useLanguage>["t"]>[0]>

packages/app/src/settings/providers/extensions.tsx

@@ -8,7 +8,8 @@ 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 { SettingsList } from "@/settings/list"
+import type { SettingsView } from "@/settings/surface"
 import "@/settings/settings.css"
 
 interface McpRowItem {
@@ -20,7 +21,10 @@ interface PluginRowItem {
   name: string
 }
 
-export const SettingsExtensions: Component = () => {
+export const SettingsExtensions: Component<{
+  subtab?: SettingsView["subtab"]
+  onSubtab: (value: SettingsView["subtab"]) => void
+}> = (props) => {
   const language = useLanguage()
   const serverSdk = useServerSDK()
   const data = useData()
@@ -63,12 +67,18 @@ export const SettingsExtensions: Component = () => {
             <h2 class="settings-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">
+        <Tabs
+          variant="pill"
+          value={props.subtab ?? "mcps"}
+          onChange={(value) => {
+            if (value === "mcps" || value === "plugins" || value === "skills") props.onSubtab(value)
+          }}
+          class="settings-extensions-tabs settings-subtabs"
+        >
           <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>
@@ -78,18 +88,20 @@ export const SettingsExtensions: Component = () => {
           <Tabs.Content value="mcps">
             <div class="settings-section">
               <div class="flex items-center justify-between">
-                <span class="text-13-medium text-v2-text-text-base">
+                <span class="settings-extension-heading text-13-medium">
                   {language.t("settings.extensions.availableAll")}
                 </span>
-                <span class="text-13-regular text-v2-text-faint">{language.t("settings.extensions.manageConfig")}</span>
+                <span class="text-13-regular text-v2-text-text-muted">
+                  {language.t("settings.extensions.manageConfig")}
+                </span>
               </div>
-              <div class="bg-[var(--v2-background-bg-base)] border-[0.5px] border-[var(--v2-border-border-base)] rounded-[8px] pl-4 pr-3 overflow-hidden">
+              <SettingsList variant="catalog">
                 <For each={mcps()}>
                   {(item) => (
-                    <div class="py-4 flex items-center justify-between border-b-[0.5px] border-[var(--v2-border-border-base)] last:border-b-0">
-                      <div class="flex items-center gap-2.5 min-w-0">
+                    <div class="settings-extension-row">
+                      <div class="settings-extension-lead">
                         <Icon name="mcp" class="text-v2-icon-icon-muted shrink-0" />
-                        <span class="text-13-medium text-v2-text-text-base truncate">{item.name}</span>
+                        <span class="settings-extension-name truncate">{item.name}</span>
                       </div>
                       <Switch checked={item.enabled} onChange={(checked) => handleMcpToggle(item, checked)} hideLabel>
                         {item.name}
@@ -97,58 +109,57 @@ export const SettingsExtensions: Component = () => {
                     </div>
                   )}
                 </For>
-              </div>
+              </SettingsList>
             </div>
           </Tabs.Content>
 
           <Tabs.Content value="plugins">
             <div class="settings-section">
               <div class="flex items-center justify-between">
-                <span class="text-13-medium text-v2-text-text-base">
+                <span class="settings-extension-heading text-13-medium">
                   {language.t("settings.extensions.availableAll")}
                 </span>
-                <span class="text-13-regular text-v2-text-faint">{language.t("settings.extensions.manageConfig")}</span>
+                <span class="text-13-regular text-v2-text-text-muted">
+                  {language.t("settings.extensions.manageConfig")}
+                </span>
               </div>
-              <div class="bg-[var(--v2-background-bg-base)] border-[0.5px] border-[var(--v2-border-border-base)] rounded-[8px] pl-4 pr-3 overflow-hidden">
+              <SettingsList variant="catalog">
                 <For each={plugins()}>
                   {(plugin) => (
-                    <div class="py-4 flex items-center justify-between border-b-[0.5px] border-[var(--v2-border-border-base)] last:border-b-0">
-                      <div class="flex items-center gap-2.5 min-w-0">
+                    <div class="settings-extension-row">
+                      <div class="settings-extension-lead">
                         <Icon name="cube" class="text-v2-icon-icon-muted shrink-0" />
-                        <span class="text-13-medium text-v2-text-text-base truncate font-mono">{plugin.name}</span>
+                        <span class="settings-extension-name truncate">{plugin.name}</span>
                       </div>
                     </div>
                   )}
                 </For>
-              </div>
+              </SettingsList>
             </div>
           </Tabs.Content>
 
           <Tabs.Content value="skills">
             <div class="settings-section">
               <div class="flex items-center justify-between">
-                <span class="text-13-medium text-v2-text-text-base">
+                <span class="settings-extension-heading text-13-medium">
                   {language.t("settings.extensions.availableAll")}
                 </span>
-                <ExternalLink
-                  class="text-13-regular text-v2-text-accent hover:underline"
-                  href="https://opencode.ai/docs/skills/"
-                >
+                <ExternalLink class="settings-extension-link text-13-regular" href="https://opencode.ai/docs/skills/">
                   {language.t("settings.extensions.addSkills")}
                 </ExternalLink>
               </div>
-              <div class="bg-[var(--v2-background-bg-base)] border-[0.5px] border-[var(--v2-border-border-base)] rounded-[8px] pl-4 pr-3 overflow-hidden">
+              <SettingsList variant="catalog">
                 <For each={skills()}>
                   {(skill) => (
-                    <div class="py-4 flex items-center justify-between border-b-[0.5px] border-[var(--v2-border-border-base)] last:border-b-0">
-                      <div class="flex items-center gap-2.5 min-w-0">
+                    <div class="settings-extension-row">
+                      <div class="settings-extension-lead">
                         <Icon name="post-skill" class="text-v2-icon-icon-muted shrink-0" />
-                        <span class="text-13-medium text-v2-text-text-base truncate">{skill.name}</span>
+                        <span class="settings-extension-name truncate">{skill.name}</span>
                       </div>
                     </div>
                   )}
                 </For>
-              </div>
+              </SettingsList>
             </div>
           </Tabs.Content>
         </Tabs>

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

@@ -9,8 +9,6 @@ import { createMemo, type Component, For, Show } from "solid-js"
 import { useLanguage } from "@/runtime/i18n/language"
 import { useServerSDK } from "@/runtime/server/client"
 import { DialogConnectProvider, useProviderConnectController } from "@/providers/connect/dialog"
-import { SettingsServerScope } from "@/settings/server-scope"
-import { InlineServerSelect } from "@/settings/server-select"
 import { SettingsList } from "@/settings/list"
 import "@/settings/settings.css"
 
@@ -44,11 +42,7 @@ export const SettingsProviders: Component<{
 
   const connect = (provider?: string) => {
     providerConnect.select(provider)
-    void dialog.show(() => (
-      <SettingsServerScope directory={props.directory}>
-        <DialogConnectProvider directory={props.directory} controller={providerConnect} />
-      </SettingsServerScope>
-    ))
+    void dialog.show(() => <DialogConnectProvider directory={props.directory} controller={providerConnect} />)
   }
 
   const connected = createMemo(() => {
@@ -134,14 +128,13 @@ export const SettingsProviders: Component<{
             <h2 class="settings-tab-title">{language.t("settings.providers.title")}</h2>
             <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.providers.description")}</span>
           </div>
-          <InlineServerSelect />
         </div>
       </div>
 
-      <div class="settings-tab-body settings-providers">
+      <div class="settings-tab-body settings-tab-body--sectioned settings-providers">
         <div class="settings-section" data-component="connected-providers-section">
           <h3 class="settings-section-title">{language.t("settings.providers.section.connected")}</h3>
-          <SettingsList>
+          <SettingsList variant="catalog">
             <Show
               when={connected().length > 0}
               fallback={<div class="settings-provider-empty">{language.t("settings.providers.connected.empty")}</div>}
@@ -182,7 +175,7 @@ export const SettingsProviders: Component<{
 
         <div class="settings-section">
           <h3 class="settings-section-title">{language.t("settings.providers.section.popular")}</h3>
-          <SettingsList>
+          <SettingsList variant="catalog">
             <For each={popular()}>
               {(item) => (
                 <div class="settings-provider-row">

packages/app/src/settings/search-catalog.ts

@@ -0,0 +1,247 @@
+import type { useLanguage } from "@/runtime/i18n/language"
+import type { SettingsProjectTab, SettingsRootTab, SettingsServerTab } from "./surface"
+
+type Label = Parameters<ReturnType<typeof useLanguage>["t"]>[0]
+
+// Metadata only: search must not mount settings pages or fetch their catalogs.
+type Entry<Tab> = {
+  tab: Tab
+  label: Label
+  target?: string
+  keywords?: string
+  description?: Label
+  section?: Label
+  subtab?: "mcps" | "plugins" | "skills" | "lsps"
+  available?: "desktop" | "browser" | "dev" | "mobile-dev"
+}
+
+export const clientSettings: Entry<SettingsRootTab>[] = [
+  { tab: "general", label: "settings.tab.preferences" },
+  { tab: "appearance", label: "settings.general.section.appearance" },
+  { tab: "notifications", label: "settings.tab.notifications" },
+  { tab: "shortcuts", label: "settings.shortcuts.title", keywords: "keybind keyboard hotkey" },
+  { tab: "experimental", label: "settings.tab.experimental" },
+  { tab: "about", label: "settings.tab.about", keywords: "version license credits" },
+  { tab: "general", label: "settings.general.row.language.title", target: "settings-language" },
+  {
+    tab: "general",
+    label: "settings.workspaces.default.title",
+    target: "settings-workspace-destination",
+    description: "settings.workspaces.default.description",
+    keywords: "worktree workspace default destination",
+  },
+  {
+    tab: "general",
+    label: "command.permissions.autoaccept.enable",
+    target: "settings-auto-accept-permissions",
+    keywords: "permissions approve allow auto accept",
+  },
+  {
+    tab: "general",
+    label: "settings.general.row.terminalPlacement.title",
+    target: "settings-terminal-placement",
+    keywords: "terminal side bottom position",
+  },
+  {
+    tab: "general",
+    label: "settings.general.row.followUpBehavior.title",
+    target: "settings-follow-up-behavior",
+    keywords: "queue steer follow up",
+  },
+  {
+    tab: "general",
+    label: "settings.general.row.pinchZoom.title",
+    target: "settings-pinch-zoom",
+    available: "desktop",
+  },
+  {
+    tab: "general",
+    label: "session.review.wrapLines",
+    target: "settings-mobile-diff-wrap",
+    keywords: "diff wrap lines",
+  },
+  {
+    tab: "general",
+    label: "settings.general.row.mobileTitlebarBottom.title",
+    target: "settings-mobile-titlebar-bottom",
+    available: "mobile-dev",
+  },
+  {
+    tab: "general",
+    label: "settings.timeline.detail",
+    target: "settings-timeline-detail",
+    section: "settings.timeline.title",
+    keywords: "thinking reasoning tools timeline summary detailed",
+  },
+  {
+    tab: "general",
+    label: "settings.general.row.releaseNotes.title",
+    target: "settings-release-notes",
+    section: "settings.general.section.updates",
+    available: "desktop",
+  },
+  {
+    tab: "general",
+    label: "settings.updates.row.check.title",
+    target: "settings-check-updates",
+    section: "settings.general.section.updates",
+    available: "desktop",
+  },
+  {
+    tab: "general",
+    label: "settings.general.row.showSearch.title",
+    target: "settings-show-search",
+    section: "settings.general.section.advanced",
+  },
+  {
+    tab: "general",
+    label: "settings.general.row.showStatus.title",
+    target: "settings-show-status",
+    section: "settings.general.section.advanced",
+  },
+  {
+    tab: "general",
+    label: "settings.general.row.showCustomAgents.title",
+    target: "settings-show-custom-agents",
+    section: "settings.general.section.advanced",
+  },
+  {
+    tab: "appearance",
+    label: "settings.general.row.colorScheme.title",
+    target: "settings-color-scheme",
+    keywords: "dark mode light mode system",
+  },
+  { tab: "appearance", label: "settings.general.row.theme.title", target: "settings-theme" },
+  {
+    tab: "appearance",
+    label: "settings.general.row.uiFont.title",
+    target: "settings-ui-font",
+    keywords: "interface typeface",
+  },
+  {
+    tab: "appearance",
+    label: "settings.general.row.font.title",
+    target: "settings-code-font",
+    keywords: "code typeface",
+  },
+  {
+    tab: "appearance",
+    label: "settings.general.row.terminalFont.title",
+    target: "settings-terminal-font",
+    keywords: "terminal typeface",
+  },
+  {
+    tab: "notifications",
+    label: "settings.general.notifications.agent.title",
+    target: "settings-notifications-agent",
+    section: "settings.general.section.notifications",
+    description: "settings.general.notifications.agent.description",
+    keywords: "desktop notifications agent",
+  },
+  {
+    tab: "notifications",
+    label: "settings.general.notifications.permissions.title",
+    target: "settings-notifications-permissions",
+    section: "settings.general.section.notifications",
+    description: "settings.general.notifications.permissions.description",
+    keywords: "desktop notifications permissions",
+  },
+  {
+    tab: "notifications",
+    label: "settings.general.notifications.errors.title",
+    target: "settings-notifications-errors",
+    section: "settings.general.section.notifications",
+    description: "settings.general.notifications.errors.description",
+    keywords: "desktop notifications errors",
+  },
+  {
+    tab: "notifications",
+    label: "settings.general.sounds.agent.title",
+    target: "settings-sounds-agent",
+    section: "settings.general.section.sounds",
+    description: "settings.general.sounds.agent.description",
+    keywords: "sound audio agent",
+  },
+  {
+    tab: "notifications",
+    label: "settings.general.sounds.permissions.title",
+    target: "settings-sounds-permissions",
+    section: "settings.general.section.sounds",
+    description: "settings.general.sounds.permissions.description",
+    keywords: "sound audio permissions",
+  },
+  {
+    tab: "notifications",
+    label: "settings.general.sounds.errors.title",
+    target: "settings-sounds-errors",
+    section: "settings.general.section.sounds",
+    description: "settings.general.sounds.errors.description",
+    keywords: "sound audio errors",
+  },
+  {
+    tab: "experimental",
+    label: "settings.general.row.browserPane.title",
+    target: "settings-experimental-browser",
+    available: "browser",
+  },
+  {
+    tab: "experimental",
+    label: "settings.appearance.row.tabs.title",
+    target: "settings-tab-layout",
+    keywords: "vertical horizontal tabs",
+  },
+  { tab: "experimental", label: "settings.appearance.row.projectName.title", target: "settings-show-project-name" },
+  {
+    tab: "experimental",
+    label: "settings.general.row.showProjectIcon.title",
+    target: "settings-show-project-icon",
+    available: "dev",
+  },
+]
+
+export const serverSettings: Entry<SettingsServerTab>[] = [
+  { tab: "projects", label: "settings.tab.projects" },
+  { tab: "workspaces", label: "settings.tab.workspaces", keywords: "workspaces disk usage cleanup delete" },
+  { tab: "providers", label: "settings.providers.title", keywords: "connect api key credentials" },
+  { tab: "models", label: "settings.models.title", keywords: "model picker visibility" },
+  { tab: "extensions", label: "settings.tab.extensions" },
+  {
+    tab: "extensions",
+    subtab: "mcps",
+    label: "settings.extensions.tab.mcps",
+    keywords: "model context protocol tools",
+  },
+  { tab: "extensions", subtab: "plugins", label: "status.popover.tab.plugins" },
+  { tab: "extensions", subtab: "skills", label: "settings.extensions.tab.skills" },
+  {
+    tab: "general",
+    label: "settings.general.row.shell.title",
+    target: "settings-shell",
+    description: "settings.general.row.shell.description",
+    keywords: "bash zsh powershell",
+  },
+  {
+    tab: "general",
+    label: "settings.server.preferences.websearch.title",
+    target: "settings-websearch",
+    description: "settings.server.preferences.websearch.description",
+    keywords: "web search provider",
+  },
+]
+
+export const projectSettings: Entry<SettingsProjectTab>[] = [
+  { tab: "general", label: "project.settings.name.title", target: "settings-project-name", keywords: "rename" },
+  { tab: "general", label: "dialog.project.edit.icon", target: "settings-project-icon" },
+  { tab: "general", label: "dialog.project.edit.color", target: "settings-project-color" },
+  { tab: "workspaces", label: "settings.tab.workspaces", keywords: "workspaces disk usage cleanup delete" },
+  { tab: "extensions", label: "settings.tab.extensions" },
+  {
+    tab: "extensions",
+    subtab: "mcps",
+    label: "settings.extensions.tab.mcps",
+    keywords: "model context protocol tools",
+  },
+  { tab: "extensions", subtab: "plugins", label: "status.popover.tab.plugins" },
+  { tab: "extensions", subtab: "skills", label: "settings.extensions.tab.skills" },
+  { tab: "extensions", subtab: "lsps", label: "project.settings.extensions.tab.lsps", keywords: "language servers" },
+]

packages/app/src/settings/search-index.ts

@@ -0,0 +1,118 @@
+import type { useLanguage } from "@/runtime/i18n/language"
+import type { LocalProject } from "@/shell/state/layout"
+import { displayName } from "@/shell/layout/helpers"
+import { clientSettings, projectSettings, serverSettings } from "./search-catalog"
+import { pageLabels } from "./pages"
+import type { SettingsSearchResult } from "./search-results"
+import type { SettingsServerTab, SettingsView } from "./surface"
+
+export type SettingsSearchServer = {
+  key: string
+  name: string
+  connected: boolean
+  projects: readonly LocalProject[]
+}
+
+export function settingsSearchIndex(input: {
+  servers: readonly SettingsSearchServer[]
+  desktop: boolean
+  browser: boolean
+  dev: boolean
+  mobile: boolean
+  translate: ReturnType<typeof useLanguage>["t"]
+}) {
+  const items: SettingsSearchResult[] = []
+  const add = (
+    entry: (typeof clientSettings)[number],
+    view: SettingsView,
+    owner: string,
+    server?: string,
+    project?: string,
+    projectName?: string,
+  ) => {
+    const page =
+      !server && view.tab === "general" && view.target
+        ? `${input.translate(pageLabels.general)} / ${input.translate(entry.section ?? "settings.general.section.general")}`
+        : input.translate(
+            entry.section ??
+              (view.type !== "root" && view.tab === "general"
+                ? "settings.general.section.general"
+                : pageLabels[view.tab]),
+          )
+    items.push({
+      id: JSON.stringify([server, project, view.tab, view.target, view.subtab, entry.label]),
+      title: input.translate(entry.label),
+      description: entry.description ? input.translate(entry.description) : "",
+      keywords: entry.keywords ?? "",
+      owner,
+      page,
+      server,
+      project,
+      projectName,
+      topLevel: !view.target && !view.subtab && !project,
+      view,
+    })
+  }
+
+  clientSettings.forEach((entry) => {
+    if (entry.available === "desktop" && !input.desktop) return
+    if (entry.available === "browser" && !input.browser) return
+    if ((entry.available === "dev" || entry.available === "mobile-dev") && !input.dev) return
+    if (entry.available === "mobile-dev" && !input.mobile) return
+    add(entry, { type: "root", tab: entry.tab, target: entry.target }, "")
+  })
+  input.servers.forEach((server) => {
+    const view = (tab: SettingsServerTab, target?: string, subtab?: SettingsView["subtab"]): SettingsView => {
+      if (input.servers.length === 1) return { type: "root", tab: tab === "general" ? "servers" : tab, target, subtab }
+      return { type: "server", server: server.key, tab, target, subtab }
+    }
+    items.push({
+      id: `server:${server.key}`,
+      entity: true,
+      title: server.name,
+      description: "",
+      keywords: "",
+      owner: input.translate("status.popover.tab.servers"),
+      page: input.translate("settings.server.section.connection"),
+      server: server.key,
+      view: view("general"),
+    })
+    if (!server.connected) return
+    serverSettings.forEach((entry) => add(entry, view(entry.tab, entry.target, entry.subtab), server.name, server.key))
+    server.projects.forEach((project) => {
+      const destination: SettingsView = {
+        type: "project",
+        server: server.key,
+        project: project.worktree,
+        tab: "general",
+        parent: input.servers.length > 1 ? "server" : "root",
+      }
+      const name = displayName(project)
+      items.push({
+        id: `project:${server.key}:${project.worktree}`,
+        entity: true,
+        title: name,
+        description: "",
+        keywords: "",
+        owner: server.name,
+        page: input.translate("settings.tab.projects"),
+        server: server.key,
+        project: project.worktree,
+        projectInfo: project,
+        view: destination,
+      })
+      projectSettings.forEach((entry) => {
+        if (entry.target === "settings-project-color" && project.icon?.override) return
+        add(
+          entry,
+          { ...destination, tab: entry.tab, target: entry.target, subtab: entry.subtab },
+          `${server.name} · ${name}`,
+          server.key,
+          project.worktree,
+          name,
+        )
+      })
+    })
+  })
+  return items
+}

packages/app/src/settings/search-results.test.ts

@@ -0,0 +1,145 @@
+import { describe, expect, test } from "bun:test"
+import { dict } from "@opencode/ui/i18n/en"
+import en from "@/runtime/i18n/en"
+import { settingsSearchIndex, type SettingsSearchServer } from "./search-index"
+import { rankSettings } from "./search-results"
+import type { SettingsView } from "./surface"
+
+const strings: Record<string, string> = { ...dict, ...en }
+const project = { id: "proj_opencode", name: "OpenCode", worktree: "/projects/opencode", expanded: false }
+const servers: SettingsSearchServer[] = [
+  { key: "local", name: "Local server", connected: true, projects: [project] },
+  { key: "remote", name: "Build server", connected: true, projects: [project] },
+]
+const root: SettingsView = { type: "root", tab: "general" }
+
+function index(input: Partial<Parameters<typeof settingsSearchIndex>[0]> = {}) {
+  return settingsSearchIndex({
+    servers,
+    desktop: false,
+    browser: false,
+    dev: false,
+    mobile: false,
+    translate: (key) => strings[key],
+    ...input,
+  })
+}
+
+describe("settings search index", () => {
+  test("uses concrete server identity and adapts single-server destinations", () => {
+    const multi = rankSettings("models", index(), root).filter((item) => item.topLevel)
+    expect(multi.map((item) => item.view)).toEqual([
+      { type: "server", server: "local", tab: "models", target: undefined, subtab: undefined },
+      { type: "server", server: "remote", tab: "models", target: undefined, subtab: undefined },
+    ])
+    const single = rankSettings("models", index({ servers: [servers[0]] }), root).find((item) => item.topLevel)!
+    expect(single.server).toBe("local")
+    expect(single.view).toEqual({ type: "root", tab: "models", target: undefined, subtab: undefined })
+  })
+
+  test("keeps unavailable servers discoverable without advertising unloaded settings", () => {
+    const items = index({ servers: [{ ...servers[0], connected: false }] })
+    expect(items.filter((item) => item.server).map((item) => item.id)).toEqual(["server:local"])
+    expect(rankSettings("Local server", items, root)[0].view).toEqual({
+      type: "root",
+      tab: "servers",
+      target: undefined,
+      subtab: undefined,
+    })
+    expect(rankSettings("font", items, root)).toHaveLength(3)
+  })
+
+  test("only advertises settings supported by this platform and channel", () => {
+    const targets = (input: Parameters<typeof index>[0]) => index(input).map((item) => item.view.target)
+    expect(targets({})).not.toContain("settings-pinch-zoom")
+    expect(targets({})).not.toContain("settings-experimental-browser")
+    expect(targets({})).not.toContain("settings-show-project-icon")
+    expect(targets({ desktop: true })).toContain("settings-pinch-zoom")
+    expect(targets({ browser: true })).toContain("settings-experimental-browser")
+    expect(targets({ dev: true })).toContain("settings-show-project-icon")
+    expect(targets({ dev: true })).not.toContain("settings-mobile-titlebar-bottom")
+    expect(targets({ dev: true, mobile: true })).toContain("settings-mobile-titlebar-bottom")
+  })
+
+  test("uses section labels and stable identities independent of translated text", () => {
+    const items = index()
+    expect(new Set(items.map((item) => item.id)).size).toBe(items.length)
+    expect(index({ translate: (key) => `translated ${strings[key]}` }).map((item) => item.id)).toEqual(
+      items.map((item) => item.id),
+    )
+    expect(
+      rankSettings("agent", items, root)
+        .filter((item) => item.title === "Agent")
+        .map((item) => item.page),
+    ).toEqual(["Desktop notifications", "Sound effects"])
+    expect(rankSettings("terminal placement", items, root)[0].page).toBe("Preferences / General")
+    expect(items.some((item) => item.view.target === "settings-project-startup")).toBe(false)
+  })
+
+  test("retains project avatars and excludes color when a custom icon owns its appearance", () => {
+    const withIcon = { ...project, icon: { color: "orange", override: "data:image/png;base64,example" } }
+    const items = index({ servers: [{ ...servers[0], projects: [withIcon] }] })
+    expect(rankSettings("opencode", items, root)[0].projectInfo).toEqual(withIcon)
+    expect(rankSettings("opencode color", items, root)).toEqual([])
+  })
+})
+
+describe("settings search ranking", () => {
+  test("prioritizes top-level pages and omits generic project-setting copies", () => {
+    expect(rankSettings("work", index({ servers: [servers[0]] }), root).map((item) => item.title)).toEqual([
+      "Worktrees",
+      "Default environment",
+    ])
+    expect(rankSettings("mcps", index(), root).map((item) => item.view.type)).toEqual(["server", "server"])
+    expect(rankSettings("project name", index(), root).map((item) => item.title)).toEqual(["Show project names"])
+    expect(rankSettings("startup", index(), root)).toEqual([])
+  })
+
+  test("qualifies project settings by project name and supports explicit server names", () => {
+    const matches = rankSettings("opencode name", index(), root)
+    expect(matches.map((item) => item.view.target)).toEqual(["settings-project-name", "settings-project-name"])
+    expect(rankSettings("Build server opencode name", index(), root).map((item) => item.server)).toEqual(["remote"])
+    expect(rankSettings("opencode skills", index(), root).map((item) => item.view.subtab)).toEqual(["skills", "skills"])
+  })
+
+  test("project names alone find projects, including names that are setting labels", () => {
+    const items = index({ servers: [{ ...servers[0], projects: [{ ...project, name: "Skills" }] }] })
+    expect(
+      rankSettings("skills", items, root)
+        .filter((item) => item.project)
+        .map((item) => item.entity),
+    ).toEqual([true])
+    expect(rankSettings("opencode", index(), root).map((item) => item.entity)).toEqual([true, true])
+  })
+
+  test("normalizes whitespace, case, and Unicode in qualified names", () => {
+    const items = index({ servers: [{ ...servers[0], projects: [{ ...project, name: "Open Code" }] }] })
+    expect(rankSettings("  ＯＰＥＮ   ＣＯＤＥ   name  ", items, root).map((item) => item.view.target)).toEqual([
+      "settings-project-name",
+    ])
+  })
+
+  test("does not search paths or use the Projects category to match unrelated names", () => {
+    const items = index({ servers: [{ ...servers[0], projects: [{ ...project, name: "codename" }] }] })
+    expect(rankSettings("project name", items, root).some((item) => item.project)).toBe(false)
+    expect(rankSettings("/projects/opencode", items, root)).toEqual([])
+  })
+
+  test("ranks equivalent matches by origin without merging different servers", () => {
+    const origin: SettingsView = {
+      type: "project",
+      server: "remote",
+      project: project.worktree,
+      tab: "general",
+      parent: "server",
+    }
+    expect(rankSettings("opencode name", index(), origin).map((item) => item.server)).toEqual(["remote", "local"])
+  })
+
+  test("supports synonyms and fuzzy title matches while rejecting unrelated queries", () => {
+    expect(rankSettings("dark mode", index(), root)[0].view.target).toBe("settings-color-scheme")
+    expect(rankSettings("termfont", index(), root)[0].title).toBe("Terminal Font")
+    expect(rankSettings("  ", index(), root)).toEqual([])
+    expect(rankSettings("zzzzzzzzz", index(), root)).toEqual([])
+  })
+})

packages/app/src/settings/search-results.ts

@@ -0,0 +1,71 @@
+import fuzzysort from "fuzzysort"
+import type { SettingsView } from "./surface"
+import type { LocalProject } from "@/shell/state/layout"
+
+export type SettingsSearchResult = {
+  id: string
+  title: string
+  keywords: string
+  description: string
+  owner: string
+  page: string
+  server?: string
+  project?: string
+  projectName?: string
+  projectInfo?: LocalProject
+  entity?: boolean
+  topLevel?: boolean
+  view: SettingsView
+}
+
+export function rankSettings(query: string, items: SettingsSearchResult[], origin: SettingsView) {
+  const value = normalize(query)
+  if (!value) return []
+  return items
+    .flatMap((item) => {
+      const name = item.projectName ? normalize(item.projectName) : undefined
+      if (name && !` ${value} `.includes(` ${name} `)) return []
+      const query = name ? normalize(` ${value} `.replace(` ${name} `, " ")) : value
+      if (!query) return []
+      const tokens = query.split(" ")
+      const title = normalize(item.title)
+      const primary = normalize(`${title} ${item.keywords}`)
+      const description = normalize(item.description)
+      const context = normalize(`${item.owner} ${item.entity ? "" : item.page}`)
+      const fuzzy = fuzzysort.single(query, title)?.score ?? 0
+      // Context qualifies a setting match; a project name alone should not return all its controls.
+      if (!tokens.some((token) => `${primary} ${description}`.includes(token)) && fuzzy < 0.6) return []
+      const score =
+        title === query
+          ? 5
+          : tokens.every((token) => title.includes(token))
+            ? 4
+            : tokens.every((token) => primary.includes(token))
+              ? 3
+              : tokens.every((token) => `${primary} ${description} ${context}`.includes(token))
+                ? 2
+                : fuzzy >= 0.6
+                  ? 1
+                  : 0
+      if (!score) return []
+      const proximity =
+        origin.type === "project" && origin.server === item.server && origin.project === item.project
+          ? 2
+          : origin.type !== "root" && origin.server === item.server
+            ? 1
+            : 0
+      return [{ item, score, proximity }]
+    })
+    .sort(
+      (a, b) =>
+        Number(!!b.item.topLevel) - Number(!!a.item.topLevel) ||
+        b.score - a.score ||
+        b.proximity - a.proximity ||
+        a.item.title.localeCompare(b.item.title),
+    )
+    .map((result) => result.item)
+}
+
+function normalize(value: string) {
+  return value.normalize("NFKC").toLowerCase().trim().replace(/\s+/g, " ")
+}

packages/app/src/settings/search-reveal.ts

@@ -0,0 +1,58 @@
+import type { SettingsView } from "./surface"
+
+/** Reveal one explicit search activation, including targets mounted by an asynchronous scoped page. */
+export function revealSettingsSearch(root: HTMLElement, view: SettingsView) {
+  const state = { disposed: false, row: undefined as HTMLElement | undefined, tabIndex: null as string | null }
+  const restore = () => {
+    const row = state.row
+    if (!row) return
+    row.removeAttribute("data-search-target")
+    if (state.tabIndex === null) row.removeAttribute("tabindex")
+    if (state.tabIndex !== null) row.setAttribute("tabindex", state.tabIndex)
+    state.row = undefined
+  }
+  const finish = (event: AnimationEvent) => {
+    if (event.target === state.row && event.animationName === "settings-search-reveal") restore()
+  }
+  const reveal = () => {
+    if (state.disposed) return true
+    const panel = root.querySelector<HTMLElement>(".settings-panel:not([hidden])")
+    const control = panel?.querySelector<HTMLElement>(
+      view.target ? `[data-action="${CSS.escape(view.target)}"]` : ".settings-tab-header-row, .settings-about-intro",
+    )
+    if (!panel || !control || !control.getClientRects().length) return false
+    const row =
+      control.closest<HTMLElement>('[data-component="settings-row"], [data-component="settings-list"] > *') ?? control
+    if (!view.target) panel.scrollTop = 0
+    if (view.target) row.scrollIntoView({ block: "center", inline: "nearest" })
+    state.row = row
+    state.tabIndex = row.getAttribute("tabindex")
+    row.setAttribute("data-search-target", view.target ? "row" : "header")
+    // Selecting another result can reuse the same header before the browser paints the removal.
+    row.getAnimations({ subtree: true }).forEach((animation) => {
+      if (!(animation instanceof CSSAnimation) || animation.animationName !== "settings-search-reveal") return
+      animation.currentTime = 0
+      animation.play()
+    })
+    if (view.type !== "root") {
+      const focus = view.target ? row : (panel.querySelector<HTMLInputElement>(".settings-tab-search input") ?? row)
+      if (focus === row) row.tabIndex = -1
+      focus.focus({ preventScroll: true })
+    }
+    return true
+  }
+  const observer = new MutationObserver(() => {
+    if (reveal()) observer.disconnect()
+  })
+  root.addEventListener("animationend", finish)
+  queueMicrotask(() => {
+    if (!reveal())
+      observer.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: ["hidden", "class"] })
+  })
+  return () => {
+    state.disposed = true
+    observer.disconnect()
+    root.removeEventListener("animationend", finish)
+    restore()
+  }
+}

packages/app/src/settings/search.css

@@ -0,0 +1,157 @@
+.settings-search,
+.settings-search-matches {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+}
+
+.settings-search {
+  position: relative;
+}
+
+.settings-search[data-empty="true"] [data-slot="text-input-v2-icon-button"] {
+  visibility: hidden;
+}
+
+.settings-search > [data-component="text-input-v2"] {
+  width: 100%;
+  flex-shrink: 0;
+}
+
+.settings-search-group,
+.settings-search-detail,
+.settings-search-note {
+  color: var(--v2-text-text-muted);
+  font-size: 12px;
+  line-height: var(--line-height-compact);
+}
+
+.settings-search-results {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  min-height: 0;
+  padding: 0;
+}
+
+.settings-search-group {
+  padding: 16px 6px 6px;
+  overflow-wrap: anywhere;
+  font-weight: 530;
+}
+
+.settings-search-group:first-child {
+  padding-top: 4px;
+}
+
+.settings-search-result {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 3px;
+  width: 100%;
+  min-height: 48px;
+  padding: 8px 6px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  text-align: start;
+  cursor: pointer;
+}
+
+.settings-search-title {
+  color: var(--v2-text-text-base);
+  font-size: 13px;
+  font-weight: 530;
+  line-height: var(--line-height-compact);
+  overflow-wrap: anywhere;
+}
+
+.settings-search-result[data-compact="true"] {
+  min-height: 32px;
+}
+
+.settings-search-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--v2-icon-icon-muted);
+}
+
+.settings-search-project-icon[data-component="project-avatar-v2"] {
+  width: 14px;
+  height: 14px;
+}
+
+.settings-search-result[data-highlighted="true"],
+.settings-search-result[aria-current="location"],
+.settings-search-result:active {
+  background: var(--v2-overlay-simple-overlay-pressed);
+}
+
+.settings-search-result:focus-visible {
+  outline: none;
+  background: var(--v2-overlay-simple-overlay-pressed);
+}
+
+@media (hover: hover) {
+  .settings-search-result:hover:not([data-highlighted="true"]):not([aria-current="location"]):not(:active) {
+    background: var(--v2-overlay-simple-overlay-hover);
+  }
+}
+
+.settings-search-empty {
+  padding: 20px 6px;
+  font-size: 13px;
+  line-height: var(--line-height-base);
+  color: var(--v2-text-text-muted);
+}
+
+.settings-search-note {
+  padding: 12px 6px 0;
+}
+
+[data-component="settings-list"] {
+  --settings-search-inset: 20px;
+}
+
+[data-component="settings-list"][data-variant="catalog"] {
+  --settings-search-inset: 16px;
+}
+
+[data-search-target] {
+  position: relative;
+  isolation: isolate;
+  outline: none;
+}
+
+[data-search-target]::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline: calc(-1 * var(--settings-search-inset, 0px));
+  z-index: -1;
+  border-radius: 6px;
+  background: var(--v2-background-bg-layer-03);
+  pointer-events: none;
+  animation: settings-search-reveal 1.8s ease-out forwards;
+}
+
+[data-search-target="header"]::before {
+  border-radius: 8px;
+}
+
+@keyframes settings-search-reveal {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-search-target]::before {
+    animation-timing-function: steps(1, end);
+  }
+}

packages/app/src/settings/search.tsx

@@ -0,0 +1,265 @@
+import { createEffect, createMemo, createUniqueId, For, on, onMount, Show } from "solid-js"
+import { createStore } from "solid-js/store"
+import { createMediaQuery } from "@solid-primitives/media"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
+import { Icon } from "@opencode/ui/icon"
+import { TextInput } from "@opencode/ui/text-input"
+import { useLanguage } from "@/runtime/i18n/language"
+import { usePlatform } from "@/runtime/platform/platform"
+import { useGlobal } from "@/runtime/server/runtime"
+import { ProjectIcon } from "@/shell/layout/project-icon"
+import { useCommand } from "@/shell/commands/command"
+import { settingsProjects, useSettingsServers } from "./servers/inventory"
+import { useSettingsSurface } from "./surface"
+import { pageIcons } from "./pages"
+import { rankSettings, type SettingsSearchResult } from "./search-results"
+import { settingsSearchIndex } from "./search-index"
+
+export function SettingsSearch() {
+  const language = useLanguage()
+  const command = useCommand()
+  const platform = usePlatform()
+  const global = useGlobal()
+  const servers = useSettingsServers()
+  const surface = useSettingsSurface()
+  const search = surface.search
+  const mobile = createMediaQuery("(max-width: 767px)")
+  const [state, setState] = createStore({ narrow: false })
+  const listID = `settings-results-${createUniqueId()}`
+  let root: HTMLDivElement | undefined
+  let input: HTMLInputElement | undefined
+  let results: HTMLDivElement | undefined
+  onMount(() => {
+    const screen = root?.closest<HTMLElement>(".settings-screen")
+    if (!screen) return
+    setState("narrow", screen.clientWidth < 800)
+    createResizeObserver(screen, (rect) => setState("narrow", rect.width < 800))
+  })
+  command.register("settings.search", () => [
+    {
+      id: "settings.search.focus",
+      title: language.t("settings.search.placeholder"),
+      keybind: "mod+f",
+      hidden: true,
+      onSelect: () => {
+        input?.focus({ preventScroll: true })
+        input?.select()
+      },
+    },
+  ])
+  const inventory = createMemo(() =>
+    servers().map((server) => {
+      const context = server.connection ? global.ensureServerCtx(server.connection) : undefined
+      return {
+        ...server,
+        connected: context?.sdk.connection.status() === "connected",
+        projects: context ? settingsProjects(context) : [],
+      }
+    }),
+  )
+  const origin = () => search.state.origin ?? surface.view()
+  const catalog = createMemo(() =>
+    settingsSearchIndex({
+      servers: inventory(),
+      desktop: platform.platform === "desktop",
+      browser: !!platform.browserPane,
+      dev: import.meta.env.VITE_OPENCODE_CHANNEL !== "prod",
+      mobile: mobile(),
+      translate: language.t,
+    }),
+  )
+  const matches = createMemo(() => rankSettings(search.state.query, catalog(), origin()))
+  const shown = createMemo(() => matches().slice(0, 60))
+  const expanded = () => !!search.state.query.trim() && (!state.narrow || search.state.expanded)
+  const highlighted = () => shown().find((item) => item.id === search.state.highlighted) ?? shown()[0]
+  const optionID = (id: string) => `${listID}-${encodeURIComponent(id)}`
+  createEffect(
+    on(
+      () => search.state.query,
+      () => {
+        if (results) results.scrollTop = 0
+      },
+      { defer: true },
+    ),
+  )
+  const group = (item: SettingsSearchResult) => {
+    if (!item.server || servers().length > 1) return item.owner
+    return item.projectName ?? ""
+  }
+  const select = (item: SettingsSearchResult) => {
+    surface.search.open(item.view, item.id)
+    if (state.narrow && item.view.type === "root") {
+      input?.blur()
+      root?.closest<HTMLElement>(".settings-screen")?.focus({ preventScroll: true })
+    }
+  }
+  const clear = () => {
+    search.clear()
+    input?.focus()
+  }
+
+  return (
+    <div
+      ref={root}
+      class="settings-search"
+      data-expanded={search.state.expanded}
+      data-empty={!search.state.query.trim()}
+      onKeyDown={(event) => {
+        if (
+          event.defaultPrevented ||
+          event.isComposing ||
+          event.altKey ||
+          event.ctrlKey ||
+          event.metaKey ||
+          event.shiftKey
+        )
+          return
+        if (
+          event.target !== input &&
+          !(event.target instanceof Element && event.target.closest(".settings-search-result"))
+        )
+          return
+        if (event.key === "Escape" && search.state.query) {
+          event.preventDefault()
+          event.stopPropagation()
+          clear()
+          return
+        }
+        if (event.key === "Enter" && expanded() && highlighted()) {
+          event.preventDefault()
+          select(highlighted()!)
+          return
+        }
+        if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return
+        if ((event.key === "Home" || event.key === "End") && event.target === input) return
+        event.preventDefault()
+        search.expand()
+        const index = shown().findIndex((item) => item.id === highlighted()?.id)
+        const next =
+          shown()[
+            event.key === "Home"
+              ? 0
+              : event.key === "End"
+                ? shown().length - 1
+                : Math.max(0, Math.min(shown().length - 1, index + (event.key === "ArrowDown" ? 1 : -1)))
+          ]
+        if (!next) return
+        search.highlight(next.id)
+        const row = results?.querySelector<HTMLElement>(`#${CSS.escape(optionID(next.id))}`)
+        if (event.target !== input) row?.focus({ preventScroll: true })
+        row?.scrollIntoView({ block: "nearest", inline: "nearest" })
+      }}
+    >
+      <TextInput
+        ref={input}
+        type="search"
+        role="combobox"
+        aria-autocomplete="list"
+        aria-expanded={expanded()}
+        aria-activedescendant={expanded() && highlighted() ? optionID(highlighted()!.id) : undefined}
+        value={search.state.query}
+        leadingIcon={<Icon name="magnifying-glass" size="small" />}
+        placeholder={language.t("settings.search.placeholder")}
+        aria-label={language.t("settings.search.placeholder")}
+        aria-controls={search.state.query.trim() ? listID : undefined}
+        showClearButton
+        onClearClick={clear}
+        onFocus={() => search.expand()}
+        onInput={(event) => {
+          search.input(event.currentTarget.value)
+        }}
+        spellcheck={false}
+        autocomplete="off"
+      />
+      <Show when={search.state.query.trim()}>
+        <div class="settings-search-matches">
+          <div
+            ref={(element) => {
+              results = element
+              queueMicrotask(() => {
+                if (element.isConnected) element.scrollTop = search.state.scrollTop
+              })
+            }}
+            id={listID}
+            class="settings-search-results"
+            role="listbox"
+            aria-label={language.t("settings.search.results")}
+            onScroll={(event) => search.scroll(event.currentTarget.scrollTop)}
+          >
+            <For each={shown()}>
+              {(item, index) => (
+                <>
+                  <Show when={group(item) && (index() === 0 || group(shown()[index() - 1]) !== group(item))}>
+                    <div class="settings-search-group" role="presentation">
+                      <bdi dir="auto">{group(item)}</bdi>
+                    </div>
+                  </Show>
+                  <button
+                    id={optionID(item.id)}
+                    role="option"
+                    aria-selected={highlighted()?.id === item.id}
+                    aria-label={
+                      item.page === item.title && !item.owner
+                        ? item.title
+                        : language.t(
+                            item.page === item.title
+                              ? "settings.search.page"
+                              : item.owner
+                                ? "settings.search.result"
+                                : "settings.search.result.unscoped",
+                            { title: item.title, scope: item.owner, page: item.page },
+                          )
+                    }
+                    type="button"
+                    class="settings-search-result"
+                    data-compact={item.page === item.title}
+                    data-setting-target={item.view.target}
+                    data-result-id={item.id}
+                    data-highlighted={highlighted()?.id === item.id}
+                    aria-current={search.state.selected === item.id ? "location" : undefined}
+                    title={[item.owner, item.page].filter(Boolean).join(" › ")}
+                    tabIndex={highlighted()?.id === item.id ? 0 : -1}
+                    onFocus={() => search.highlight(item.id)}
+                    onClick={(event) => {
+                      if (item.view.type === "root" && !state.narrow) event.currentTarget.focus({ preventScroll: true })
+                      select(item)
+                    }}
+                  >
+                    <span class="settings-search-label">
+                      <Show
+                        when={item.projectInfo}
+                        fallback={
+                          <Show when={item.topLevel}>
+                            <Icon name={pageIcons[item.view.tab]} />
+                          </Show>
+                        }
+                      >
+                        {(project) => (
+                          <ProjectIcon project={project()} class="settings-search-project-icon" aria-hidden="true" />
+                        )}
+                      </Show>
+                      <bdi dir="auto" class="settings-search-title">
+                        {item.title}
+                      </bdi>
+                    </span>
+                    <Show when={item.page !== item.title}>
+                      <span class="settings-search-detail">{item.page}</span>
+                    </Show>
+                  </button>
+                </>
+              )}
+            </For>
+          </div>
+          <Show when={!matches().length}>
+            <div class="settings-search-empty" role="status">
+              {language.t("settings.search.empty")}
+            </div>
+          </Show>
+          <Show when={matches().length > shown().length}>
+            <p class="settings-search-note">{language.t("settings.search.refine")}</p>
+          </Show>
+        </div>
+      </Show>
+    </div>
+  )
+}

packages/app/src/settings/server-scope.tsx

@@ -1,22 +1,8 @@
-import { type ParentProps, Show } from "solid-js"
-import { useGlobal } from "@/runtime/server/runtime"
+import { type ParentProps } from "solid-js"
 import { ModelsProvider } from "@/providers/models/models"
 import { ServerProvider } from "@/runtime/server/current"
 import { ServerConnection } from "@/runtime/server/registry"
 
-export function SettingsServerScope(props: ParentProps<{ directory?: string }>) {
-  const global = useGlobal()
-  return (
-    <Show when={global.settings.server.selected()} keyed fallback={props.children}>
-      {(server) => (
-        <SettingsServerDataScope server={server} directory={props.directory}>
-          {props.children}
-        </SettingsServerDataScope>
-      )}
-    </Show>
-  )
-}
-
 export function SettingsServerDataScope(props: ParentProps<{ server: ServerConnection.Any; directory?: string }>) {
   return (
     <ServerProvider conn={props.server}>

packages/app/src/settings/server-select.tsx

@@ -1,48 +0,0 @@
-import { Show, createMemo, type Component } from "solid-js"
-import { Select } from "@opencode/ui/select"
-import { useGlobal } from "@/runtime/server/runtime"
-import { ServerConnection, serverName } from "@/runtime/server/registry"
-
-const allServers = { type: "all" } as const
-type ServerOption = ServerConnection.Any | typeof allServers
-
-export const InlineServerSelect: Component<{
-  all?: {
-    label: string
-    selected: () => boolean
-    onSelect: () => void
-  }
-  onServerSelect?: () => void
-}> = (props) => {
-  const global = useGlobal()
-  const options = createMemo<ServerOption[]>(() => [...(props.all ? [allServers] : []), ...global.servers.list()])
-  const current = () => (props.all?.selected() ? allServers : global.settings.server.selected())
-
-  return (
-    <Show when={options().length > 1}>
-      <Select
-        data-action="settings-server-select"
-        options={options()}
-        current={current()}
-        value={(server) => (server.type === "all" ? server.type : ServerConnection.key(server))}
-        label={(server) =>
-          server.type === "all" ? (props.all?.label ?? "") : serverName(server) || ServerConnection.key(server)
-        }
-        optionDisabled={(server) =>
-          server.type === "all" ? false : global.servers.health[ServerConnection.key(server)]?.healthy === false
-        }
-        placement="bottom-end"
-        gutter={6}
-        onSelect={(server) => {
-          if (!server) return
-          if (server.type === "all") {
-            props.all?.onSelect()
-            return
-          }
-          global.settings.server.set(ServerConnection.key(server))
-          props.onServerSelect?.()
-        }}
-      />
-    </Show>
-  )
-}

packages/app/src/settings/servers/inventory.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, test } from "bun:test"
+import { ServerConnection } from "@/runtime/server/registry"
+import type { SshItem } from "@/servers/ssh/types"
+import { settingsServers } from "./inventory"
+
+const ssh: SshItem = {
+  config: { id: "build", target: "dev@example.com", name: "Build server" },
+  saved: true,
+  stage: "disconnected",
+  detail: "",
+}
+const connection: ServerConnection.Ssh = {
+  type: "ssh",
+  id: ssh.config.id,
+  host: ssh.config.target,
+  displayName: ssh.config.name,
+  http: { url: "http://127.0.0.1:4000", password: "secret" },
+}
+
+describe("settings server inventory", () => {
+  test("includes saved SSH servers before they connect", () => {
+    expect(settingsServers([], [], [ssh])).toEqual([
+      {
+        key: ServerConnection.Key.make("ssh:build"),
+        name: "Build server",
+        ssh,
+      },
+    ])
+  })
+
+  test("joins ready SSH state to its live connection", () => {
+    const ready = { ...ssh, stage: "ready" as const }
+    expect(settingsServers([connection], [], [ready])).toEqual([
+      {
+        key: ServerConnection.Key.make("ssh:build"),
+        name: "Build server",
+        connection,
+        ssh: ready,
+        wsl: undefined,
+      },
+    ])
+  })
+
+  test("omits unsaved SSH state and withholds stale connections while disconnected", () => {
+    expect(settingsServers([], [], [{ ...ssh, saved: false }])).toEqual([])
+    expect(settingsServers([connection], [], [ssh])[0].connection).toBeUndefined()
+  })
+})

packages/app/src/settings/servers/inventory.ts

@@ -0,0 +1,77 @@
+import { createMemo } from "solid-js"
+import { ServerConnection, serverName, useServers } from "@/runtime/server/registry"
+import { useWslServers } from "@/servers/wsl/context"
+import type { WslServerItem } from "@/servers/wsl/types"
+import { useSsh } from "@/servers/ssh/context"
+import { sshName, type SshItem } from "@/servers/ssh/types"
+import type { ServerCtx } from "@/runtime/server/runtime"
+import { pathKey } from "@/workspaces/path-key"
+
+export function settingsProjects(context: ServerCtx) {
+  const tracked = context.projects.list()
+  const paths = new Set(tracked.map((project) => pathKey(project.worktree)))
+  return [
+    ...tracked,
+    ...context.sync.data.project
+      .filter((project) => !paths.has(pathKey(project.worktree)))
+      .map((project) => ({ ...project, expanded: false })),
+  ]
+}
+
+export type SettingsServer = {
+  key: ServerConnection.Key
+  name: string
+  connection?: ServerConnection.Any
+  wsl?: WslServerItem
+  ssh?: SshItem
+}
+
+export function settingsServers(
+  connections: readonly ServerConnection.Any[],
+  wsl: readonly WslServerItem[],
+  ssh: readonly SshItem[],
+) {
+  const configured = new Map(wsl.map((item) => [item.config.id, item]))
+  const saved = new Map(ssh.filter((item) => item.saved).map((item) => [`ssh:${item.config.id}`, item]))
+  const connected = new Set(connections.map(ServerConnection.key))
+  return [
+    ...connections.map((connection): SettingsServer => {
+      const key = ServerConnection.key(connection)
+      const item = configured.get(key)
+      const remote = saved.get(key)
+      return {
+        key,
+        name: item?.config.distro ?? (remote ? sshName(remote.config) : serverName(connection) || key),
+        connection:
+          (item && item.runtime.kind !== "ready") || (remote && remote.stage !== "ready") ? undefined : connection,
+        wsl: item,
+        ssh: remote,
+      }
+    }),
+    ...wsl
+      .filter((item) => !connected.has(ServerConnection.Key.make(item.config.id)))
+      .map(
+        (item): SettingsServer => ({
+          key: ServerConnection.Key.make(item.config.id),
+          name: item.config.distro,
+          wsl: item,
+        }),
+      ),
+    ...ssh
+      .filter((item) => item.saved && !connected.has(ServerConnection.Key.make(`ssh:${item.config.id}`)))
+      .map(
+        (item): SettingsServer => ({
+          key: ServerConnection.Key.make(`ssh:${item.config.id}`),
+          name: sshName(item.config),
+          ssh: item,
+        }),
+      ),
+  ]
+}
+
+export function useSettingsServers() {
+  const servers = useServers()
+  const wsl = useWslServers()
+  const ssh = useSsh()
+  return createMemo(() => settingsServers(servers.list, wsl.data?.servers ?? [], ssh.servers))
+}

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

@@ -1,139 +1,140 @@
 import { Badge } from "@opencode/ui/badge"
-import { Icon } from "@opencode/ui/icon"
-import { IconButton } from "@opencode/ui/icon-button"
-import { TextInput } from "@opencode/ui/text-input"
+import { Select } from "@opencode/ui/select"
 import { useDialog } from "@opencode/ui/context/dialog"
-import fuzzysort from "fuzzysort"
-import { type Component, For, Show, createMemo } from "solid-js"
-import { createStore } from "solid-js/store"
+import { createMemo, Show, type Component } from "solid-js"
 import { ServerRowMenu } from "@/servers/registry/row-menu"
 import { ServerHealthIndicator } from "@/servers/registry/row"
 import { useLanguage } from "@/runtime/i18n/language"
 import { ServerConnection, serverName } from "@/runtime/server/registry"
 import { useServerCollectionController } from "@/servers/registry/controller"
 import { DialogServer } from "@/servers/connect/dialog"
-import { SettingsList } from "@/settings/list"
+import { AddServerMenu, WslServerSettings } from "@/servers/wsl/settings"
 import { SshServerSettings } from "@/servers/ssh/settings"
-import { useSsh } from "@/servers/ssh/context"
-import { AddServerMenu, isWslServer, useFilteredWslServers, WslServerSettings } from "@/servers/wsl/settings"
+import { SettingsList } from "@/settings/list"
+import { SettingsRow } from "@/settings/row"
+import { ShellSetting } from "@/settings/general/general"
+import { createServerPreferencesController } from "@/settings/general/controllers"
+import type { SettingsServer } from "./inventory"
 import "@/settings/settings.css"
 
-export const SettingsServers: Component = () => {
+const WebSearchSetting: Component<{
+  controller: ReturnType<typeof createServerPreferencesController>["websearch"]
+}> = (props) => {
+  const language = useLanguage()
+  return (
+    <SettingsRow
+      title={language.t("settings.server.preferences.websearch.title")}
+      description={language.t("settings.server.preferences.websearch.description")}
+    >
+      <Select
+        data-action="settings-websearch"
+        options={props.controller.options()}
+        current={props.controller.current()}
+        value={(option) => String(option.value)}
+        label={(option) => option.label}
+        placement="bottom-end"
+        gutter={6}
+        onSelect={(option) => option && props.controller.select(option.value)}
+      />
+    </SettingsRow>
+  )
+}
+
+export const SettingsServerGeneral: Component<{
+  entry: SettingsServer
+  nested?: boolean
+  onAddServer?: () => void
+  onServerChange?: (server: ServerConnection.Any) => void
+}> = (props) => {
   const dialog = useDialog()
   const language = useLanguage()
   const controller = useServerCollectionController()
-  const [store, setStore] = createStore({ filter: "" })
-  const wslServers = useFilteredWslServers(() => store.filter)
-  const ssh = useSsh()
-
-  const showSearch = createMemo(
-    () => controller.collection.items().filter((item) => !isWslServer(item)).length + wslServers().length > 1,
-  )
-
-  const filtered = createMemo(() => {
-    const items = controller.collection.items().filter((item) => !isWslServer(item) && item.type !== "ssh")
-    const query = store.filter.trim()
-    if (!query) return items
-    return fuzzysort
-      .go(query, items, {
-        keys: [(item) => serverName(item), (item) => item.http.url],
-      })
-      .map((result) => result.obj)
-  })
-
-  const openAdd = () => {
-    void dialog.push(() => <DialogServer mode="add" />)
-  }
-
-  const openEdit = (server: ServerConnection.Http) => {
-    void dialog.push(() => <DialogServer mode="edit" server={server} />)
-  }
+  const health = createMemo(() => controller.collection.health()[props.entry.key])
+  const edit = (server: ServerConnection.Http) =>
+    void dialog.push(() => <DialogServer mode="edit" server={server} onSave={props.onServerChange} />)
 
   return (
     <>
-      <div
-        class="settings-tab-header settings-servers-header"
-        classList={{ "settings-tab-header--stacked": showSearch() }}
-      >
+      <div class="settings-tab-header">
         <div class="settings-tab-header-row">
           <div class="flex flex-col gap-1">
-            <h2 class="settings-tab-title">{language.t("status.popover.tab.servers")}</h2>
-            <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.servers.description")}</span>
+            <h2 class="settings-tab-title">
+              {props.nested ? props.entry.name : language.t("settings.section.server")}
+            </h2>
+            <span class="text-11-regular text-v2-text-text-muted">
+              {language.t(props.nested ? "settings.server.description" : "settings.servers.description")}
+            </span>
           </div>
-          <AddServerMenu onAddServer={openAdd} />
+          <Show when={!props.nested && props.onAddServer}>
+            <AddServerMenu onAddServer={() => props.onAddServer?.()} />
+          </Show>
         </div>
-        <Show when={showSearch()}>
-          <div class="settings-tab-search">
-            <TextInput
-              type="search"
-              appearance="base"
-              value={store.filter}
-              onInput={(event) => setStore("filter", event.currentTarget.value)}
-              placeholder={language.t("dialog.server.search.placeholder")}
-              spellcheck={false}
-              autocorrect="off"
-              autocomplete="off"
-              autocapitalize="off"
-              aria-label={language.t("dialog.server.search.placeholder")}
-            />
-            <Show when={store.filter}>
-              <IconButton
-                type="button"
-                variant="ghost-muted"
-                size="small"
-                class="settings-tab-search-clear"
-                icon={<Icon name="close" size="large" class="text-v2-icon-icon-muted" />}
-                onClick={() => setStore("filter", "")}
-              />
-            </Show>
-          </div>
-        </Show>
       </div>
 
-      <div class="settings-tab-body settings-servers">
-        <Show
-          when={filtered().length > 0 || wslServers().length > 0 || ssh.servers.some((item) => item.saved)}
-          fallback={
-            <div class="settings-servers-status">
-              <span>{store.filter ? language.t("palette.empty") : language.t("dialog.server.empty")}</span>
-              <Show when={store.filter}>
-                <span class="settings-servers-status-filter">&quot;{store.filter}&quot;</span>
-              </Show>
-            </div>
-          }
-        >
+      <div class="settings-tab-body settings-tab-body--sectioned">
+        <section class="settings-section settings-server-connection" data-component="settings-server-connection">
+          <h3 class="settings-section-title">{language.t("settings.server.section.connection")}</h3>
           <SettingsList>
-            <SshServerSettings filter={store.filter} domain={controller} />
-            <WslServerSettings domain={controller} servers={wslServers} />
-            <For each={filtered()}>
-              {(item) => {
-                const key = ServerConnection.key(item)
-                const health = () => controller.collection.health()[key]
-                const isDefault = () => controller.defaults.key() === key
-                return (
-                  <div class="settings-servers-row">
-                    <div class="settings-servers-lead">
-                      <ServerHealthIndicator health={health()} />
-                      <div class="settings-servers-copy">
-                        <span class="settings-servers-name">{serverName(item)}</span>
-                        <Show when={health()?.version}>
-                          <span class="settings-servers-meta">v{health()?.version}</span>
-                        </Show>
-                      </div>
-                    </div>
-                    <div class="settings-servers-actions">
-                      <Show when={controller.defaults.available() && isDefault()}>
-                        <Badge>{language.t("dialog.server.status.default")}</Badge>
-                      </Show>
-                      <ServerRowMenu server={item} domain={controller} onEdit={openEdit} />
-                    </div>
-                  </div>
-                )
-              }}
-            </For>
+            <Show
+              when={props.entry.ssh}
+              fallback={
+                <Show
+                  when={props.entry.wsl}
+                  fallback={
+                    <Show when={props.entry.connection}>
+                      {(server) => (
+                        <div class="settings-servers-row">
+                          <div class="settings-servers-lead">
+                            <ServerHealthIndicator health={health()} />
+                            <div class="settings-servers-copy">
+                              <bdi class="settings-servers-name" dir="auto">
+                                {serverName(server()) || props.entry.key}
+                              </bdi>
+                              <bdi class="settings-servers-meta" dir="ltr">
+                                {server().http.url}
+                              </bdi>
+                            </div>
+                          </div>
+                          <div class="settings-servers-actions">
+                            <Show
+                              when={controller.defaults.available() && controller.defaults.key() === props.entry.key}
+                            >
+                              <Badge>{language.t("dialog.server.status.default")}</Badge>
+                            </Show>
+                            <ServerRowMenu server={server()} domain={controller} onEdit={edit} />
+                          </div>
+                        </div>
+                      )}
+                    </Show>
+                  }
+                >
+                  {(item) => <WslServerSettings domain={controller} servers={() => [item()]} />}
+                </Show>
+              }
+            >
+              {(item) => <SshServerSettings filter="" id={item().config.id} domain={controller} />}
+            </Show>
           </SettingsList>
+        </section>
+
+        <Show when={props.entry.connection} keyed>
+          {(server) => <ServerPreferences server={server} />}
         </Show>
       </div>
     </>
   )
 }
+
+function ServerPreferences(props: { server: ServerConnection.Any }) {
+  const language = useLanguage()
+  const preferences = createServerPreferencesController(() => props.server)
+  return (
+    <section class="settings-section">
+      <h3 class="settings-section-title">{language.t("settings.tab.preferences")}</h3>
+      <SettingsList>
+        <ShellSetting controller={preferences.shell} />
+        <WebSearchSetting controller={preferences.websearch} />
+      </SettingsList>
+    </section>
+  )
+}

packages/app/src/settings/settings.css

@@ -37,25 +37,29 @@
 
 .settings-screen
   > .settings[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
-  > [data-slot="tabs-v2-list"] {
+  > .settings-sidebar {
+  min-height: 0;
+  flex-shrink: 0;
   width: 328px;
   min-width: 328px;
   padding-block: 48px;
   padding-inline-start: 24px;
-  padding-inline-end: 104px;
+  padding-inline-end: 64px;
   border-inline-end: none;
   background: transparent;
 }
 
-.settings-screen > .settings > .settings-panel {
+.settings-screen > .settings > .settings-content {
+  display: flex;
+  flex-direction: column;
   flex: 1;
   min-width: 0;
+  min-height: 0;
   max-width: 720px;
 }
 
 .settings-screen .settings-tab-header {
-  padding: 48px 0 32px;
-  background: linear-gradient(to bottom, var(--v2-background-bg-base) calc(100% - 24px), transparent);
+  padding: 48px 0 0;
 }
 
 .settings-screen .settings-tab-body {
@@ -64,12 +68,98 @@
 
 .settings-nav {
   display: flex;
-  width: 200px;
+  width: 240px;
+  max-width: 100%;
+  height: 100%;
   flex-shrink: 0;
   flex-direction: column;
   gap: 16px;
 }
 
+.settings-nav-groups {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 16px;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.settings-nav-groups [data-slot="tabs-v2-trigger-wrapper"] {
+  width: 100%;
+  height: 28px;
+  flex-shrink: 0;
+  border-radius: 4px;
+  color: var(--v2-text-text-muted);
+}
+
+.settings-nav-groups [data-slot="tabs-v2-trigger"] {
+  width: 100%;
+  height: 100%;
+  justify-content: flex-start;
+  gap: 6px;
+  padding: 0 6px;
+}
+
+.settings-nav-groups [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
+  background: var(--v2-background-bg-layer-03);
+  color: var(--v2-text-text-base);
+}
+
+@media (hover: hover) {
+  .settings-nav-groups [data-slot="tabs-v2-trigger-wrapper"]:hover {
+    background: var(--v2-background-bg-layer-03);
+  }
+}
+
+.settings-content > .settings-panel {
+  min-height: 0;
+  flex: 1;
+}
+
+.settings-nav-group {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.settings-nav-group-header {
+  display: flex;
+  height: 28px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-inline: 6px;
+  border-radius: 4px;
+  color: var(--v2-text-text-muted);
+  font-size: 13px;
+  font-weight: 440;
+  line-height: var(--line-height-compact);
+}
+
+.settings-nav-group-header [data-component="icon-button-v2"] {
+  opacity: 0;
+}
+
+.settings-nav-group-header:focus-within [data-component="icon-button-v2"] {
+  opacity: 1;
+}
+
+.settings-nav-group-header:focus-within {
+  background: var(--v2-background-bg-layer-03);
+}
+
+@media (hover: hover) {
+  .settings-nav-group-header:hover {
+    background: var(--v2-background-bg-layer-03);
+  }
+
+  .settings-nav-group-header:hover [data-component="icon-button-v2"] {
+    opacity: 1;
+  }
+}
+
 .settings-mobile-nav {
   display: none;
 }
@@ -78,6 +168,13 @@
   min-width: 0;
 }
 
+.settings-mobile-actions {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+}
+
 .settings-mobile-menu-trigger > span {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -189,6 +286,7 @@
 
 .settings-back {
   display: flex;
+  flex-shrink: 0;
   height: 28px;
   align-items: center;
   gap: 6px;
@@ -249,8 +347,18 @@
   position: sticky;
   top: 0;
   z-index: 10;
-  padding: 40px 40px 32px;
-  background: linear-gradient(to bottom, var(--v2-background-bg-base) calc(100% - 24px), transparent);
+  padding: 40px 40px 0;
+  background: var(--v2-background-bg-base);
+}
+
+.settings-tab-header::before {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  top: 100%;
+  height: 24px;
+  background: linear-gradient(to bottom, var(--v2-background-bg-base), transparent);
+  pointer-events: none;
 }
 
 .settings-tab-header-row {
@@ -264,16 +372,20 @@
 .settings-tab-title {
   font-size: 15px;
   font-weight: 640;
-  line-height: 1;
+  line-height: var(--line-height-base);
   color: var(--v2-text-text-base);
 }
 
 .settings-tab-body {
   display: flex;
   flex-direction: column;
-  gap: 36px;
+  gap: 32px;
   width: 100%;
-  padding: 0 40px calc(80px + var(--settings-bottom-inset, 0px));
+  padding: 24px 40px calc(80px + var(--settings-bottom-inset, 0px));
+}
+
+.settings-tab-body--sectioned {
+  padding-top: 32px;
 }
 
 [data-slot="settings-row-description"] a.settings-link {
@@ -293,16 +405,18 @@
 }
 
 .settings-section-title {
-  padding-bottom: 8px;
-  font-size: 15px;
-  font-weight: 640;
-  line-height: 1;
+  padding: 0;
+  font-size: 13px;
+  font-weight: 530;
+  line-height: var(--line-height-compact);
   color: var(--v2-text-text-base);
 }
 
-.settings-section-title + [data-component="settings-list"] {
-  margin-top: -4px;
-  margin-bottom: 0;
+.settings-section-stack {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 32px;
 }
 
 [data-component="settings-list"] {
@@ -312,6 +426,12 @@
   box-shadow: inset 0 0 0 0.5px var(--v2-border-border-muted);
 }
 
+[data-component="settings-list"][data-variant="catalog"] {
+  --settings-list-row-padding: 16px;
+  --settings-list-icon-gap: 8px;
+  padding-inline: 16px;
+}
+
 .settings-interface-feature [data-component="settings-list"] {
   background-color: var(--v2-background-bg-base);
   box-shadow: var(--v2-elevation-raised);
@@ -322,7 +442,7 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 16px;
-  padding-block: 20px;
+  padding-block: var(--settings-list-row-padding, 20px);
   border-bottom: 0.5px solid var(--v2-border-border-base);
 }
 
@@ -375,6 +495,12 @@
   padding: 4px;
 }
 
+[data-component="settings-list"][data-variant="catalog"]
+  [data-slot="settings-row-control"]
+  > :is(div:has([data-component="switch"]), [data-component="switch"]) {
+  padding: 0;
+}
+
 @media (min-width: 640px) {
   [data-slot="settings-row-control"] {
     width: auto;
@@ -411,7 +537,7 @@
 
   .settings-screen
     > .settings[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
-    > [data-slot="tabs-v2-list"] {
+    > .settings-sidebar {
     width: 240px;
     min-width: 240px;
     padding-inline-start: 16px;
@@ -451,7 +577,7 @@
     flex-shrink: 0;
   }
 
-  .settings-screen > .settings > .settings-panel {
+  .settings-screen > .settings > .settings-content {
     min-height: 0;
     max-width: none;
   }
@@ -465,16 +591,47 @@
     padding-top: 12px;
   }
 
-  .settings-screen .settings-tab-title,
-  .settings-screen .settings-section-title {
-    line-height: var(--line-height-base);
-  }
-
   .settings-screen
     > .settings[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
-    > [data-slot="tabs-v2-list"] {
+    > .settings-sidebar {
+    width: 100%;
+    min-width: 0;
+    padding: 8px var(--settings-mobile-inner-inset, 16px);
+    flex-shrink: 0;
+  }
+
+  .settings-nav {
+    width: 100%;
+  }
+
+  .settings-nav > .settings-back,
+  .settings-nav > .settings-nav-groups {
     display: none;
   }
+
+  .settings-search[data-expanded="false"] .settings-search-matches {
+    display: none;
+  }
+
+  .settings-search-matches {
+    position: absolute;
+    inset-block-start: calc(100% + 8px);
+    inset-inline: 0;
+    z-index: 12;
+    max-height: 45vh;
+    padding-block: 8px;
+    border-radius: 8px;
+    background: var(--v2-background-bg-base);
+    box-shadow: var(--v2-elevation-raised);
+  }
+
+  .settings-screen > .settings > .settings-sidebar[data-searchable="false"] {
+    display: none;
+  }
+
+  .settings-search [data-slot="text-input-v2-input"] {
+    font-size: 16px;
+  }
 }
 
 @container settings-panel (max-width: 520px) {
@@ -505,7 +662,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  padding-block: 20px;
+  padding-block: var(--settings-list-row-padding, 20px);
   border-bottom: 0.5px solid var(--v2-border-border-base);
 }
 
@@ -534,7 +691,7 @@
   min-width: 0;
   flex: 1;
   align-items: flex-start;
-  gap: 10px;
+  gap: var(--settings-list-icon-gap, 10px);
 }
 
 .settings-provider-lead:not(:has(.settings-provider-copy)) {
@@ -560,12 +717,12 @@
 .settings-provider-name {
   font-size: 13px;
   font-weight: 530;
-  line-height: 16px;
+  line-height: var(--line-height-compact);
   color: var(--v2-text-text-base);
 }
 
 .settings-provider-description {
-  margin-block: -3.5px;
+  margin: 0;
   font-size: 13px;
   font-weight: 440;
   line-height: 20px;
@@ -573,7 +730,7 @@
 }
 
 .settings-provider-empty {
-  padding-block: 20px;
+  padding-block: var(--settings-list-row-padding, 20px);
   font-size: 13px;
   font-weight: 440;
   line-height: var(--line-height-compact);
@@ -612,30 +769,10 @@
   color: var(--v2-text-text-accent-hover);
 }
 
-.settings-tab-body.settings-providers {
-  gap: 32px;
-}
-
-.settings-tab-header:has(+ .settings-tab-body.settings-providers) {
-  padding-bottom: 32px;
-}
-
-.settings-providers .settings-section-title {
-  padding-bottom: 0;
-  font-size: 13px;
-  font-weight: 530;
-  line-height: var(--line-height-compact);
-}
-
-.settings-providers .settings-section-title + [data-component="settings-list"] {
-  margin-top: 16px;
-}
-
 .settings-tab-header.settings-tab-header--stacked {
   display: flex;
   flex-direction: column;
-  gap: 32px;
-  padding-bottom: 32px;
+  gap: 24px;
 }
 
 .settings-tab-header--stacked > .settings-tab-header-row {
@@ -728,25 +865,16 @@
   gap: 8px;
 }
 
-.settings-models .settings-section-title {
-  padding-bottom: 0;
+.settings-models-group-title {
   font-size: 13px;
   font-weight: 530;
-  line-height: 16px;
+  line-height: var(--line-height-compact);
 }
 
 .settings-models [data-component="provider-icon"] {
   color: var(--v2-icon-icon-base);
 }
 
-.settings-models [data-component="settings-list"] {
-  padding-inline: 16px;
-}
-
-.settings-models .settings-section-title + [data-component="settings-list"] {
-  margin-top: 0;
-}
-
 .settings-models [data-slot="settings-row-description"]:empty {
   display: none;
 }
@@ -792,17 +920,6 @@
   color: var(--v2-text-text-base);
 }
 
-.settings-shortcuts .settings-section {
-  gap: 16px;
-}
-
-.settings-shortcuts .settings-section-title {
-  padding-bottom: 0;
-  font-size: 13px;
-  font-weight: 530;
-  line-height: var(--line-height-compact);
-}
-
 .settings-shortcuts [data-component="settings-list"] {
   display: flex;
   flex-direction: column;
@@ -891,34 +1008,6 @@
   color: var(--v2-text-text-base);
 }
 
-.settings-tab-body.settings-servers {
-  gap: 0;
-}
-
-.settings-tab-header.settings-servers-header {
-  padding-bottom: 24px;
-}
-
-.settings-servers-header .settings-tab-header-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.settings-tab-header.settings-servers-header.settings-tab-header--stacked {
-  gap: 24px;
-  padding-bottom: 24px;
-}
-
-.settings-servers [data-component="settings-list"] {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  padding: 20px;
-  border-radius: 6px;
-}
-
 .settings-servers-row {
   display: flex;
   align-items: center;
@@ -926,6 +1015,18 @@
   gap: 16px;
 }
 
+.settings-server-connection [data-component="settings-list"] {
+  padding-inline: 16px;
+}
+
+.settings-server-connection .settings-servers-row {
+  padding-block: 20px;
+}
+
+.settings-server-connection .settings-servers-lead {
+  gap: 4px;
+}
+
 .settings-servers-row:not(:last-child) {
   padding-bottom: 16px;
   margin-bottom: 16px;
@@ -970,34 +1071,8 @@
   color: var(--v2-text-text-muted);
 }
 
-.settings-servers-status {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding-block: 48px;
-  font-size: 13px;
-  font-weight: 440;
-  line-height: var(--line-height-compact);
-  color: var(--v2-text-text-muted);
-  text-align: center;
-}
-
-.settings-servers-status-filter {
-  color: var(--v2-text-text-base);
-}
-
-.settings-tab-header.settings-workspaces-header {
-  padding-bottom: 24px;
-}
-
-.settings-workspaces-header .settings-tab-title {
-  font-weight: 610;
-}
-
 .settings-tab-body.settings-workspaces {
-  gap: 16px;
+  gap: 0;
 }
 
 .settings-workspaces-toolbar {
@@ -1006,13 +1081,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-}
-
-.settings-workspaces-count {
-  font-size: 15px;
-  font-weight: 530;
-  line-height: 1;
-  color: var(--v2-text-text-base);
+  padding-bottom: 8px;
 }
 
 .settings-workspaces-toolbar-actions {
@@ -1255,7 +1324,7 @@
 
 @media (max-width: 639px) {
   .settings-workspaces-header {
-    padding: 24px 20px 20px;
+    padding: 24px 20px 0;
   }
 
   .settings-tab-body.settings-workspaces {
@@ -1371,20 +1440,68 @@
 
 .settings-extensions-tabs[data-component="tabs-v2"][data-variant="pill"] > [data-slot="tabs-v2-list"] {
   width: min(280px, 100%);
+}
+
+.settings-subtabs[data-component="tabs-v2"][data-variant="pill"] > [data-slot="tabs-v2-list"] {
   padding-inline: 0 !important;
 }
 
-.settings-extensions-tabs[data-component="tabs-v2"][data-variant="pill"] > [data-slot="tabs-v2-list"]::before {
+.settings-subtabs > [data-slot="tabs-v2-content"] {
+  padding-top: 24px;
+}
+
+.settings-extension-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding-block: var(--settings-list-row-padding, 16px);
+  border-bottom: 0.5px solid var(--v2-border-border-base);
+}
+
+.settings-extension-row:last-child {
+  border-bottom: 0;
+}
+
+.settings-extension-lead {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+  gap: var(--settings-list-icon-gap, 8px);
+}
+
+.settings-extension-name {
+  font-size: 13px;
+  font-weight: 530;
+  line-height: var(--line-height-compact);
+}
+
+.settings-extension-heading,
+.settings-extension-name {
+  color: var(--text-strong);
+}
+
+.settings-extension-link {
+  color: var(--v2-text-text-accent) !important;
+  text-decoration: underline;
+}
+
+.settings-extension-link:hover {
+  color: var(--v2-text-text-accent-hover) !important;
+}
+
+.settings-subtabs[data-component="tabs-v2"][data-variant="pill"] > [data-slot="tabs-v2-list"]::before {
   display: none;
 }
 
-.settings-extensions-tabs[data-component="tabs-v2"][data-variant="pill"]
+.settings-subtabs[data-component="tabs-v2"][data-variant="pill"]
   > [data-slot="tabs-v2-list"]
   [data-slot="tabs-v2-trigger-wrapper"] {
   border-radius: 6px;
 }
 
-.settings-extensions-tabs[data-component="tabs-v2"][data-variant="pill"]
+.settings-subtabs[data-component="tabs-v2"][data-variant="pill"]
   > [data-slot="tabs-v2-list"]
   [data-slot="tabs-v2-trigger"] {
   padding-inline: 8px;

packages/app/src/settings/shell.tsx

@@ -1,10 +1,18 @@
-import { Component, createEffect, createMemo, For, Show, onMount, startTransition } from "solid-js"
-import { createStore } from "solid-js/store"
 import { Tabs } from "@opencode/ui/tabs"
-import { Icon } from "@opencode/ui/icon"
-import { Menu } from "@opencode/ui/menu"
-import { Button } from "@opencode/ui/button"
+import { useDialog } from "@opencode/ui/context/dialog"
+import { createEffect, createMemo, on, onCleanup, onMount, Show, Switch, Match, type Accessor } from "solid-js"
+import { createStore } from "solid-js/store"
 import { useLanguage } from "@/runtime/i18n/language"
+import { useLayout } from "@/shell/state/layout"
+import { useTabs } from "@/shell/tabs/tabs"
+import { displayName } from "@/shell/layout/helpers"
+import { useGlobal, useServerCtx } from "@/runtime/server/runtime"
+import { ServerConnection } from "@/runtime/server/registry"
+import type { LocalProject } from "@/shell/state/layout"
+import { useServerCollectionController } from "@/servers/registry/controller"
+import { AddServerMenu } from "@/servers/wsl/settings"
+import { DialogServer } from "@/servers/connect/dialog"
+import { LocationProvider } from "@/workspaces/location"
 import { SettingsGeneral } from "./general/general"
 import { SettingsAppearance } from "./appearance/appearance"
 import { SettingsExperimental } from "./experimental/experimental"
@@ -12,93 +20,129 @@ 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 { SettingsServerGeneral } from "./servers/servers"
+import { useSettingsServers, type SettingsServer } from "./servers/inventory"
 import { SettingsWorkspaces } from "./workspaces/workspaces"
 import { SettingsProjects } from "./workspaces/projects"
 import { SettingsExtensions } from "./providers/extensions"
 import { SettingsAbout } from "./about/about"
-import { SettingsServerScope } from "./server-scope"
-import { useDialog } from "@opencode/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 { SettingsServerDataScope } from "./server-scope"
+import { SettingsNavigation, type SettingsNavGroup } from "./navigation"
+import { SettingsProjectGeneral } from "./workspaces/project"
+import { ProjectSettingsExtensions } from "./workspaces/project-extensions"
 import { useSettingsSurface } from "./surface"
+import { pageIcons } from "./pages"
+import { revealSettingsSearch } from "./search-reveal"
 import "@/settings/settings.css"
 
-const sections = [
-  [
-    { value: "general", icon: "sliders", label: "settings.tab.preferences" },
-    { value: "appearance", icon: "appearance", label: "settings.general.section.appearance" },
-    { value: "notifications", icon: "notifications", label: "settings.tab.notifications" },
-    { value: "shortcuts", icon: "keyboard", label: "settings.tab.shortcuts" },
-  ],
-  [
-    { value: "servers", icon: "server", label: "status.popover.tab.servers" },
-    { value: "projects", icon: "folder", label: "settings.tab.projects" },
-    { value: "workspaces", icon: "outline-worktree", label: "settings.tab.workspaces" },
-  ],
-  [
-    { value: "providers", icon: "providers", label: "settings.providers.title" },
-    { value: "models", icon: "models", label: "settings.models.title" },
-    { value: "extensions", icon: "extensions", label: "settings.tab.extensions" },
-  ],
-  [{ value: "experimental", icon: "flask", label: "settings.tab.experimental" }],
-  [{ value: "about", icon: "info", label: "settings.tab.about" }],
+const rootClientTabs = [
+  { value: "general", icon: pageIcons.general, label: "settings.tab.preferences" },
+  { value: "appearance", icon: pageIcons.appearance, label: "settings.general.section.appearance" },
+  { value: "notifications", icon: pageIcons.notifications, label: "settings.tab.notifications" },
+  { value: "shortcuts", icon: pageIcons.shortcuts, label: "settings.tab.shortcuts" },
 ] as const
 
-export const SettingsScreen: Component = () => {
-  const language = useLanguage()
-  const dialog = useDialog()
+const serverTabs = [
+  { value: "projects", icon: pageIcons.projects, label: "settings.tab.projects" },
+  { value: "workspaces", icon: pageIcons.workspaces, label: "settings.tab.workspaces" },
+  { value: "providers", icon: pageIcons.providers, label: "settings.providers.title" },
+  { value: "models", icon: pageIcons.models, label: "settings.models.title" },
+  { value: "extensions", icon: pageIcons.extensions, label: "settings.tab.extensions" },
+] as const
+
+const trailingTabs = [
+  [{ value: "experimental", icon: pageIcons.experimental, label: "settings.tab.experimental" }],
+  [{ value: "about", icon: pageIcons.about, label: "settings.tab.about" }],
+] as const
+
+const nestedServerTabs = [
+  { value: "general", icon: pageIcons.servers, label: "settings.general.section.general" },
+  ...serverTabs,
+] as const
+
+const nestedProjectTabs = [
+  { value: "general", icon: pageIcons.projects, label: "settings.general.section.general" },
+  { value: "workspaces", icon: pageIcons.workspaces, label: "settings.tab.workspaces" },
+  { value: "extensions", icon: pageIcons.extensions, label: "settings.tab.extensions" },
+] as const
+
+export function SettingsScreen() {
   const surface = useSettingsSurface()
-  const layout = useLayout()
-  const servers = useServers()
-  const tabs = useTabs()
+  const dialog = useDialog()
+  const servers = useSettingsServers()
   const global = useGlobal()
-  const [state, setState] = createStore({ worktreeFilterReset: 0 })
   let root: HTMLDivElement | undefined
+  let viewType = surface.view().type
+  let activation = 0
 
-  onMount(() => {
-    root?.focus({ preventScroll: true })
-  })
-
-  const server = createMemo(() => {
-    const route = surface.route()
-    switch (route.type) {
-      case "draft": {
-        const draft = tabs.store.find((item) => item.type === "draft" && item.draftID === route.draftID)
-        return servers.list.find((item) => ServerConnection.key(item) === draft?.server)
-      }
-      case "session":
-        return servers.list.find((item) => ServerConnection.key(item) === route.server)
-      case "home":
-        return servers.list.find((item) => ServerConnection.key(item) === layout.home.selection().server)
-    }
-  })
-  const serverCtx = useServerCtx(server)
-
+  onMount(() =>
+    (root?.querySelector<HTMLInputElement>(".settings-search input") ?? root)?.focus({ preventScroll: true }),
+  )
   createEffect(() => {
-    const current = server()
-    if (current) global.settings.server.set(ServerConnection.key(current))
+    const next = surface.view().type
+    if (next === viewType) return
+    viewType = next
+    queueMicrotask(() => {
+      const target =
+        surface.search.state.query.trim() && surface.search.state.expanded
+          ? root?.querySelector<HTMLInputElement>(".settings-search input")
+          : root
+      target?.focus({ preventScroll: true })
+    })
   })
 
-  const directory = createMemo(() => {
-    const selected = global.settings.server.selected()
-    const current = server()
-    if (!selected || !current || ServerConnection.key(selected) !== ServerConnection.key(current)) return
-    const route = surface.route()
-    if (route.type === "draft") {
-      const draft = tabs.store.find((item) => item.type === "draft" && item.draftID === route.draftID)
-      return draft?.type === "draft" ? draft.directory : undefined
-    }
-    if (route.type === "session") return serverCtx()?.data.session.get(route.sessionId)?.location.directory
-    return undefined
-  })
+  createEffect(
+    on(
+      () => [surface.view(), surface.search.state.selected] as const,
+      ([view, selected]) => {
+        if (
+          !root ||
+          !selected ||
+          !view.searchActivation ||
+          view.searchActivation !== surface.search.state.activation ||
+          view.searchActivation === activation
+        )
+          return
+        activation = view.searchActivation
+        onCleanup(revealSettingsSearch(root, view))
+      },
+    ),
+  )
 
-  const showProviders = () => {
-    dialog.close()
-    surface.open("providers")
+  const connection = (key: string) => servers().find((item) => item.key === key)
+  const project = (server: ServerConnection.Any, directory: string) => {
+    const context = global.ensureServerCtx(server)
+    const value =
+      context.projects.list().find((item) => item.worktree === directory) ??
+      context.sync.data.project.find((item) => item.worktree === directory)
+    return value ? { expanded: false, ...value } : undefined
   }
+  const targetServer = createMemo(() => {
+    const view = surface.view()
+    if (view.type === "root") return undefined
+    return connection(view.server)
+  })
+  const targetProject = createMemo(() => {
+    const view = surface.view()
+    const server = targetServer()
+    if (view.type !== "project" || !server) return undefined
+    return server.connection && project(server.connection, view.project)
+  })
+  createEffect(() => {
+    const view = surface.view()
+    if (view.type === "root") return
+    const target = targetServer()
+    if (!target) {
+      surface.back()
+      return
+    }
+    if (view.type === "project" && !target.connection) surface.replaceServer(target.key)
+  })
+  createEffect(() => {
+    const view = surface.view()
+    if (view.type !== "server" || servers().length !== 1) return
+    surface.open(view.tab === "general" ? "servers" : view.tab)
+  })
 
   return (
     <div
@@ -109,138 +153,315 @@ export const SettingsScreen: Component = () => {
       onKeyDown={(event) => {
         if (event.key !== "Escape" || event.defaultPrevented || dialog.active) return
         event.preventDefault()
-        surface.close()
+        if (surface.view().type !== "root" && surface.search.back()) return
+        if (surface.search.state.query.trim()) {
+          surface.search.clear()
+          return
+        }
+        surface.back()
       }}
     >
-      <Tabs
-        orientation="vertical"
-        variant="settings"
-        value={surface.tab()}
-        onChange={(value) => void startTransition(() => surface.open(value))}
-        class="settings"
-      >
-        <div class="settings-mobile-nav">
-          <button type="button" class="settings-back" onClick={surface.close}>
-            <Icon name="arrow-left" size="small" class="settings-back-icon" />
-            <span>{language.t("settings.backToApp")}</span>
-          </button>
-          <Menu placement="bottom-end" gutter={8}>
-            <Menu.Trigger as={Button} size="normal" variant="outline" class="settings-mobile-menu-trigger">
-              <span>
-                {language.t(
-                  sections.flat().find((section) => section.value === surface.tab())?.label ??
-                    "settings.tab.preferences",
-                )}
-              </span>
-              <Icon name="chevron-down" size="small" />
-            </Menu.Trigger>
-            <Menu.Portal>
-              <Menu.Content class="settings-mobile-menu" onEscapeKeyDown={(event) => event.stopPropagation()}>
-                <Menu.RadioGroup
-                  value={surface.tab()}
-                  onChange={(value) => void startTransition(() => surface.open(value))}
-                >
-                  <For each={sections}>
-                    {(group, index) => (
-                      <>
-                        <Show when={index() > 0}>
-                          <Menu.Separator />
-                        </Show>
-                        <For each={group}>
-                          {(section) => (
-                            <Menu.RadioItem
-                              value={section.value}
-                              closeOnSelect
-                              onSelect={() => {
-                                if (section.value === "workspaces")
-                                  setState("worktreeFilterReset", (value) => value + 1)
-                              }}
-                            >
-                              <Icon name={section.icon} />
-                              {language.t(section.label)}
-                            </Menu.RadioItem>
-                          )}
-                        </For>
-                      </>
-                    )}
-                  </For>
-                </Menu.RadioGroup>
-              </Menu.Content>
-            </Menu.Portal>
-          </Menu>
-        </div>
-        <Tabs.List>
-          <div class="settings-nav">
-            <button type="button" class="settings-back" onClick={surface.close}>
-              <Icon name="arrow-left" size="small" class="settings-back-icon" />
-              <span>{language.t("settings.backToApp")}</span>
-            </button>
-            <div class="flex flex-col gap-4 w-full">
-              <For each={sections}>
-                {(group) => (
-                  <div class="flex flex-col gap-1 w-full">
-                    <For each={group}>
-                      {(section) => (
-                        <Tabs.Trigger
-                          value={section.value}
-                          onClick={() => {
-                            if (section.value === "workspaces") setState("worktreeFilterReset", (value) => value + 1)
-                          }}
-                        >
-                          <Icon name={section.icon} />
-                          {language.t(section.label)}
-                        </Tabs.Trigger>
-                      )}
-                    </For>
-                  </div>
-                )}
-              </For>
-            </div>
-          </div>
-        </Tabs.List>
-
-        <Tabs.Content value="general" class="settings-panel">
-          <SettingsGeneral server={server()} />
-        </Tabs.Content>
-        <Tabs.Content value="appearance" class="settings-panel">
-          <SettingsAppearance />
-        </Tabs.Content>
-        <Tabs.Content value="notifications" class="settings-panel">
-          <SettingsNotifications />
-        </Tabs.Content>
-        <Tabs.Content value="shortcuts" class="settings-panel">
-          <SettingsKeybinds />
-        </Tabs.Content>
-        <Tabs.Content value="experimental" class="settings-panel">
-          <SettingsExperimental />
-        </Tabs.Content>
-        <Tabs.Content value="servers" class="settings-panel">
-          <SettingsServers />
-        </Tabs.Content>
-        <Tabs.Content value="projects" class="settings-panel">
-          <SettingsProjects />
-        </Tabs.Content>
-        <SettingsServerScope directory={directory()}>
-          <Tabs.Content value="workspaces" class="settings-panel">
-            <SettingsWorkspaces
-              activeDirectory={directory()}
-              resetProjectFilter={() => state.worktreeFilterReset}
-            />
-          </Tabs.Content>
-          <Tabs.Content value="providers" class="settings-panel">
-            <SettingsProviders directory={directory()} onBack={showProviders} />
-          </Tabs.Content>
-          <Tabs.Content value="models" class="settings-panel">
-            <SettingsModels />
-          </Tabs.Content>
-          <Tabs.Content value="extensions" class="settings-panel">
-            <SettingsExtensions />
-          </Tabs.Content>
-        </SettingsServerScope>
-        <Tabs.Content value="about" class="settings-panel settings-about">
-          <SettingsAbout active={surface.tab() === "about"} />
-        </Tabs.Content>
-      </Tabs>
+      <Switch>
+        <Match when={surface.view().type === "root"}>
+          <RootSettings />
+        </Match>
+        <Match when={surface.view().type === "server"}>
+          <Show when={targetServer()}>{(server) => <ServerSettings entry={server()} />}</Show>
+        </Match>
+        <Match when={surface.view().type === "project"}>
+          <Show when={targetServer()?.connection} keyed>
+            {(server) => (
+              <Show when={targetProject()}>{(project) => <ProjectSettings server={server} project={project()} />}</Show>
+            )}
+          </Show>
+        </Match>
+      </Switch>
     </div>
   )
 }
+
+function RootSettings() {
+  const language = useLanguage()
+  const dialog = useDialog()
+  const surface = useSettingsSurface()
+  const layout = useLayout()
+  const tabs = useTabs()
+  const servers = useServerCollectionController()
+  const inventory = useSettingsServers()
+  const [state, setState] = createStore({ worktreeFilterReset: 0 })
+  const list = servers.collection.items
+  const singleEntry = createMemo(() => (inventory().length === 1 ? inventory()[0] : undefined))
+  const single = createMemo(() => singleEntry()?.connection)
+  const multiple = createMemo(() => inventory().length > 1)
+  const ordered = createMemo(() => {
+    const order = new Map(list().map((server, index) => [ServerConnection.key(server), index]))
+    return inventory().toSorted((a, b) => {
+      const preferred = Number(b.key === servers.defaults.key()) - Number(a.key === servers.defaults.key())
+      if (preferred) return preferred
+      return (order.get(a.key) ?? list().length) - (order.get(b.key) ?? list().length)
+    })
+  })
+  const sourceServer = createMemo(() => {
+    const route = surface.route()
+    if (route.type === "session") return connectionFor(list(), route.server)
+    if (route.type === "draft") {
+      const draft = tabs.store.find((item) => item.type === "draft" && item.draftID === route.draftID)
+      return connectionFor(list(), draft?.server)
+    }
+    return connectionFor(list(), layout.home.selection().server)
+  })
+  const sourceDirectory = useSettingsDirectory(sourceServer)
+  const addServer = () =>
+    void dialog.push(() => (
+      <DialogServer mode="add" onSave={(server) => surface.openServer(ServerConnection.key(server))} />
+    ))
+  const groups = createMemo<SettingsNavGroup[]>(() => [
+    { items: rootClientTabs.map((item) => ({ ...item, label: language.t(item.label) })) },
+    ...(multiple()
+      ? [
+          {
+            label: language.t("status.popover.tab.servers"),
+            action: <AddServerMenu compact onAddServer={addServer} />,
+            items: ordered().map((server) => ({
+              value: `server:${server.key}`,
+              icon: "server" as const,
+              label: server.name,
+            })),
+          },
+        ]
+      : [
+          {
+            items: [
+              ...serverTabs.map((item) => ({ ...item, label: language.t(item.label), disabled: !single() })),
+              { value: "servers", icon: "server" as const, label: language.t("settings.section.server") },
+            ],
+          },
+        ]),
+    ...trailingTabs.map((items) => ({ items: items.map((item) => ({ ...item, label: language.t(item.label) })) })),
+  ])
+
+  createEffect(() => {
+    const view = surface.view()
+    if (view.type !== "root" || !multiple()) return
+    if (["projects", "workspaces", "providers", "models", "extensions", "servers"].includes(view.tab))
+      surface.open("general")
+  })
+
+  const change = (value: string) => {
+    if (value.startsWith("server:")) {
+      surface.openServer(value.slice("server:".length))
+      return
+    }
+    if (value === "workspaces") setState("worktreeFilterReset", (current) => current + 1)
+    surface.select(value)
+  }
+
+  return (
+    <SettingsNavigation
+      value={surface.view().tab}
+      groups={groups()}
+      backLabel={language.t("settings.backToApp")}
+      onBack={() => surface.close()}
+      onChange={change}
+      mobileAction={multiple() ? <AddServerMenu compact onAddServer={addServer} /> : undefined}
+    >
+      <Tabs.Content value="general" class="settings-panel">
+        <SettingsGeneral />
+      </Tabs.Content>
+      <Tabs.Content value="appearance" class="settings-panel">
+        <SettingsAppearance />
+      </Tabs.Content>
+      <Tabs.Content value="notifications" class="settings-panel">
+        <SettingsNotifications />
+      </Tabs.Content>
+      <Tabs.Content value="shortcuts" class="settings-panel">
+        <SettingsKeybinds active={surface.view().tab === "shortcuts"} autofocus={!surface.search.state.selected} />
+      </Tabs.Content>
+      <Tabs.Content value="experimental" class="settings-panel">
+        <SettingsExperimental />
+      </Tabs.Content>
+      <Tabs.Content value="about" class="settings-panel settings-about">
+        <SettingsAbout active={surface.view().tab === "about"} />
+      </Tabs.Content>
+      <Show when={single()} keyed>
+        {(server) => (
+          <SettingsServerDataScope server={server}>
+            <Tabs.Content value="projects" class="settings-panel">
+              <SettingsProjects
+                server={server}
+                active={surface.view().tab === "projects"}
+                autofocus={!surface.search.state.selected}
+                onOpenProject={(project) =>
+                  surface.openProject({
+                    server: ServerConnection.key(server),
+                    project: project.worktree,
+                  })
+                }
+              />
+            </Tabs.Content>
+            <Tabs.Content value="workspaces" class="settings-panel">
+              <SettingsWorkspaces
+                activeDirectory={sourceServer() === server ? sourceDirectory() : undefined}
+                resetProjectFilter={() => state.worktreeFilterReset}
+              />
+            </Tabs.Content>
+            <Tabs.Content value="providers" class="settings-panel">
+              <SettingsProviders directory={undefined} onBack={() => surface.select("providers")} />
+            </Tabs.Content>
+            <Tabs.Content value="models" class="settings-panel">
+              <SettingsModels active={surface.view().tab === "models"} autofocus={!surface.search.state.selected} />
+            </Tabs.Content>
+            <Tabs.Content value="extensions" class="settings-panel">
+              <SettingsExtensions subtab={surface.view().subtab} onSubtab={(value) => surface.subtab(value)} />
+            </Tabs.Content>
+          </SettingsServerDataScope>
+        )}
+      </Show>
+      <Show when={singleEntry()}>
+        {(entry) => (
+          <Tabs.Content value="servers" class="settings-panel">
+            <SettingsServerGeneral entry={entry()} onAddServer={addServer} />
+          </Tabs.Content>
+        )}
+      </Show>
+    </SettingsNavigation>
+  )
+}
+
+function ServerSettings(props: { entry: SettingsServer }) {
+  const language = useLanguage()
+  const surface = useSettingsSurface()
+  const activeDirectory = useSettingsDirectory(() => props.entry.connection)
+  const [state, setState] = createStore({ worktreeFilterReset: 0 })
+  const groups = createMemo<SettingsNavGroup[]>(() => [
+    {
+      items: nestedServerTabs.map((item) => ({
+        ...item,
+        label: item.value === "general" ? props.entry.name : language.t(item.label),
+        disabled: item.value !== "general" && !props.entry.connection,
+      })),
+    },
+  ])
+  createEffect(() => {
+    if (!props.entry.connection && surface.view().tab !== "general") surface.select("general")
+  })
+  const change = (value: string) => {
+    if (value === "workspaces") setState("worktreeFilterReset", (current) => current + 1)
+    surface.select(value)
+  }
+
+  return (
+    <SettingsNavigation
+      value={surface.view().tab}
+      groups={groups()}
+      backLabel={language.t("settings.backToSettings")}
+      onBack={() => surface.back()}
+      onChange={change}
+    >
+      <Tabs.Content value="general" class="settings-panel">
+        <SettingsServerGeneral
+          entry={props.entry}
+          nested
+          onServerChange={(server) => surface.replaceServer(ServerConnection.key(server))}
+        />
+      </Tabs.Content>
+      <Show when={props.entry.connection} keyed>
+        {(server) => (
+          <SettingsServerDataScope server={server}>
+            <Tabs.Content value="projects" class="settings-panel">
+              <SettingsProjects
+                server={server}
+                active={surface.view().tab === "projects"}
+                onOpenProject={(project) =>
+                  surface.openProject({
+                    server: props.entry.key,
+                    project: project.worktree,
+                  })
+                }
+              />
+            </Tabs.Content>
+            <Tabs.Content value="workspaces" class="settings-panel">
+              <SettingsWorkspaces
+                activeDirectory={activeDirectory()}
+                resetProjectFilter={() => state.worktreeFilterReset}
+              />
+            </Tabs.Content>
+            <Tabs.Content value="providers" class="settings-panel">
+              <SettingsProviders directory={undefined} onBack={() => surface.select("providers")} />
+            </Tabs.Content>
+            <Tabs.Content value="models" class="settings-panel">
+              <SettingsModels active={surface.view().tab === "models"} />
+            </Tabs.Content>
+            <Tabs.Content value="extensions" class="settings-panel">
+              <SettingsExtensions subtab={surface.view().subtab} onSubtab={(value) => surface.subtab(value)} />
+            </Tabs.Content>
+          </SettingsServerDataScope>
+        )}
+      </Show>
+    </SettingsNavigation>
+  )
+}
+
+function ProjectSettings(props: { server: ServerConnection.Any; project: LocalProject }) {
+  const language = useLanguage()
+  const surface = useSettingsSurface()
+  const activeDirectory = useSettingsDirectory(() => props.server)
+  const groups: SettingsNavGroup[] = [
+    {
+      items: nestedProjectTabs.map((item) => ({
+        ...item,
+        get label() {
+          return item.value === "general" ? displayName(props.project) : language.t(item.label)
+        },
+      })),
+    },
+  ]
+  return (
+    <SettingsServerDataScope server={props.server} directory={props.project.worktree}>
+      <LocationProvider directory={props.project.worktree}>
+        <SettingsNavigation
+          value={surface.view().tab}
+          groups={groups}
+          backLabel={language.t("settings.backToProjects")}
+          onBack={() => surface.back()}
+          onChange={(value) => surface.select(value)}
+        >
+          <Tabs.Content value="general" class="settings-panel">
+            <SettingsProjectGeneral
+              server={props.server}
+              project={props.project}
+              onOpenServer={() => surface.replaceServer(ServerConnection.key(props.server))}
+            />
+          </Tabs.Content>
+          <Tabs.Content value="workspaces" class="settings-panel">
+            <SettingsWorkspaces projectID={props.project.id} activeDirectory={activeDirectory()} />
+          </Tabs.Content>
+          <Tabs.Content value="extensions" class="settings-panel">
+            <ProjectSettingsExtensions subtab={surface.view().subtab} onSubtab={(value) => surface.subtab(value)} />
+          </Tabs.Content>
+        </SettingsNavigation>
+      </LocationProvider>
+    </SettingsServerDataScope>
+  )
+}
+
+function connectionFor(list: readonly ServerConnection.Any[], key: string | undefined) {
+  return list.find((item) => ServerConnection.key(item) === key)
+}
+
+function useSettingsDirectory(server: Accessor<ServerConnection.Any | undefined>) {
+  const surface = useSettingsSurface()
+  const tabs = useTabs()
+  const serverCtx = useServerCtx(server)
+  return createMemo(() => {
+    const current = server()
+    if (!current) return undefined
+    const key = ServerConnection.key(current)
+    const route = surface.route()
+    if (route.type === "session" && route.server === key)
+      return serverCtx()?.data.session.get(route.sessionId)?.location.directory
+    if (route.type !== "draft") return undefined
+    const draft = tabs.store.find((item) => item.type === "draft" && item.draftID === route.draftID)
+    return draft?.type === "draft" && draft.server === key ? draft.directory : undefined
+  })
+}

packages/app/src/settings/surface.tsx

@@ -1,8 +1,83 @@
 import { useLocation, useNavigate } from "@solidjs/router"
-import { createEffect, on } from "solid-js"
+import { batch, createEffect, on } from "solid-js"
+import { createStore } from "solid-js/store"
 import { createSimpleContext } from "@opencode/ui/context"
 import { useLayout, type LayoutRoute } from "@/shell/state/layout"
 import { useCommand } from "@/shell/commands/command"
+import { useSettingsServers } from "./servers/inventory"
+
+export type SettingsRootTab =
+  | "general"
+  | "appearance"
+  | "notifications"
+  | "shortcuts"
+  | "projects"
+  | "workspaces"
+  | "providers"
+  | "models"
+  | "extensions"
+  | "servers"
+  | "experimental"
+  | "about"
+
+export type SettingsServerTab = "general" | "projects" | "workspaces" | "providers" | "models" | "extensions"
+export type SettingsProjectTab = "general" | "workspaces" | "extensions"
+
+export type SettingsView = (
+  | { type: "root"; tab: SettingsRootTab }
+  | { type: "server"; server: string; tab: SettingsServerTab }
+  | {
+      type: "project"
+      server: string
+      project: string
+      tab: SettingsProjectTab
+      parent: "root" | "server"
+    }
+) & {
+  target?: string
+  subtab?: "mcps" | "plugins" | "skills" | "lsps"
+  searchActivation?: number
+}
+
+const rootTabs: Record<SettingsRootTab, true> = {
+  general: true,
+  appearance: true,
+  notifications: true,
+  shortcuts: true,
+  projects: true,
+  workspaces: true,
+  providers: true,
+  models: true,
+  extensions: true,
+  servers: true,
+  experimental: true,
+  about: true,
+}
+const serverTabs: Record<SettingsServerTab, true> = {
+  general: true,
+  projects: true,
+  workspaces: true,
+  providers: true,
+  models: true,
+  extensions: true,
+}
+const projectTabs: Record<SettingsProjectTab, true> = {
+  general: true,
+  workspaces: true,
+  extensions: true,
+}
+
+function isRootTab(value: string): value is SettingsRootTab {
+  return value in rootTabs
+}
+
+function isServerTab(value: string): value is SettingsServerTab {
+  return value in serverTabs
+}
+
+function isProjectTab(value: string): value is SettingsProjectTab {
+  return value in projectTabs
+}
 
 export const { use: useSettingsSurface, provider: SettingsSurfaceProvider } = createSimpleContext({
   name: "SettingsSurface",
@@ -11,18 +86,39 @@ export const { use: useSettingsSurface, provider: SettingsSurfaceProvider } = cr
     const navigate = useNavigate()
     const layout = useLayout()
     const command = useCommand()
+    const servers = useSettingsServers()
     const location = useLocation<{
-      settings?: { route: Exclude<LayoutRoute, { type: "settings" }>; tab: string }
+      settings?: { route: Exclude<LayoutRoute, { type: "settings" }>; view: SettingsView }
     }>()
     const open = () => layout.route().type === "settings"
     const source = () => location.state?.settings?.route ?? { type: "home" as const }
+    const view = (): SettingsView => location.state?.settings?.view ?? { type: "root", tab: "general" }
+    const [search, setSearch] = createStore({
+      query: "",
+      origin: undefined as SettingsView | undefined,
+      selected: "",
+      highlighted: "",
+      scrollTop: 0,
+      activation: 0,
+      expanded: true,
+    })
     let focus: HTMLElement | undefined
 
+    const show = (view: SettingsView, replace: boolean) => {
+      const route = layout.route()
+      if (route.type !== "settings" && document.activeElement instanceof HTMLElement) focus = document.activeElement
+      navigate("/settings", {
+        replace,
+        state: { settings: { route: route.type === "settings" ? source() : route, view } },
+      })
+    }
+
     createEffect(
       on(
         open,
         (value) => {
           if (value) return
+          setSearch({ query: "", origin: undefined, selected: "", highlighted: "", scrollTop: 0, expanded: true })
           if (focus?.isConnected) focus.focus({ preventScroll: true })
           focus = undefined
         },
@@ -33,16 +129,85 @@ export const { use: useSettingsSurface, provider: SettingsSurfaceProvider } = cr
     return {
       active: open,
       route: source,
-      tab: () => location.state?.settings?.tab ?? "general",
-      open(tab = "general") {
-        const route = layout.route()
-        if (route.type !== "settings") {
-          if (document.activeElement instanceof HTMLElement) focus = document.activeElement
+      view,
+      search: {
+        state: search,
+        input(query: string) {
+          if (!search.query.trim() && query.trim()) setSearch("origin", { ...view(), target: undefined })
+          setSearch({ query, highlighted: "", scrollTop: 0, expanded: true })
+          if (!query.trim()) setSearch({ selected: "", origin: undefined })
+        },
+        expand() {
+          setSearch("expanded", true)
+        },
+        highlight(id: string) {
+          setSearch("highlighted", id)
+        },
+        scroll(scrollTop: number) {
+          setSearch("scrollTop", scrollTop)
+        },
+        open(destination: SettingsView, id: string) {
+          batch(() => {
+            show({ ...destination, searchActivation: search.activation + 1 }, true)
+            setSearch({ selected: id, highlighted: id, expanded: false, activation: search.activation + 1 })
+          })
+        },
+        clear() {
+          setSearch({ query: "", selected: "", highlighted: "", scrollTop: 0, origin: undefined, expanded: true })
+        },
+        back() {
+          if (!search.query.trim() || !search.selected || !search.origin) return false
+          show(search.origin, true)
+          setSearch({ selected: "", expanded: true })
+          return true
+        },
+      },
+      open(tab: SettingsRootTab = "general") {
+        show({ type: "root", tab }, open())
+      },
+      openServer(server: string, tab: SettingsServerTab = "general") {
+        show({ type: "server", server, tab }, false)
+      },
+      replaceServer(server: string, tab: SettingsServerTab = "general") {
+        show({ type: "server", server, tab }, true)
+      },
+      openProject(input: { server: string; project: string; tab?: SettingsProjectTab }) {
+        show(
+          {
+            type: "project",
+            ...input,
+            parent: servers().length > 1 ? "server" : "root",
+            tab: input.tab ?? "general",
+          },
+          false,
+        )
+      },
+      select(tab: string) {
+        const current = view()
+        const next: SettingsView =
+          current.type === "root" && isRootTab(tab)
+            ? { ...current, tab }
+            : current.type === "server" && isServerTab(tab)
+              ? { ...current, tab }
+              : current.type === "project" && isProjectTab(tab)
+                ? { ...current, tab }
+                : current
+        show({ ...next, target: undefined, subtab: undefined }, true)
+      },
+      subtab(subtab: SettingsView["subtab"]) {
+        show({ ...view(), subtab, target: undefined }, true)
+      },
+      back() {
+        const current = view()
+        if (current.type === "root") {
+          command.trigger("common.goBack")
+          return
         }
-        navigate("/settings", {
-          replace: open(),
-          state: { settings: { route: route.type === "settings" ? source() : route, tab } },
-        })
+        const parent: SettingsView =
+          current.type === "server" || current.parent === "root"
+            ? { type: "root", tab: current.type === "server" ? "general" : "projects" }
+            : { type: "server", server: current.server, tab: "projects" }
+        show(parent, true)
       },
       close() {
         if (open()) command.trigger("common.goBack")

packages/app/src/settings/workspaces/project-dialog.css

@@ -1,238 +0,0 @@
-.project-settings-dialog [data-slot="dialog-container"] {
-  background: var(--v2-background-bg-base);
-}
-
-.project-settings-dialog [data-slot="dialog-body"] {
-  padding: 0;
-  overflow: hidden;
-}
-
-.project-settings-v2 {
-  height: 100%;
-}
-
-.project-settings-nav {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  width: 100%;
-}
-
-.project-settings-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-width: 0;
-  overflow: hidden !important;
-  user-select: none;
-}
-
-.project-settings-panel :is(input, textarea, [contenteditable="true"]) {
-  user-select: text;
-}
-
-.project-settings-form {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 0;
-}
-
-.project-settings-scroll {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 24px;
-  min-height: 0;
-  padding: 40px;
-  overflow-y: auto;
-}
-
-.project-settings-page-header {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.project-settings-page-header h2 {
-  color: var(--v2-text-text-base);
-  font-size: 15px;
-  font-weight: 640;
-  line-height: 1;
-}
-
-.project-settings-page-header > span {
-  color: var(--v2-text-text-muted);
-  font-size: 11px;
-  font-weight: 440;
-  line-height: 1;
-}
-
-.project-settings-extensions {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 0;
-  padding: 40px;
-}
-
-.project-settings-extension-tabs {
-  flex: 1;
-  height: auto;
-  min-height: 0;
-  margin-top: 24px;
-  overflow: visible;
-}
-
-.project-settings-extension-tabs[data-component="tabs-v2"][data-variant="pill"] > [data-slot="tabs-v2-list"] {
-  width: auto;
-  padding-inline: 0 !important;
-}
-
-.project-settings-extension-tabs[data-component="tabs-v2"][data-variant="pill"] > [data-slot="tabs-v2-list"]::before {
-  display: none;
-}
-
-.project-settings-extension-tabs[data-component="tabs-v2"][data-variant="pill"]
-  > [data-slot="tabs-v2-list"]
-  [data-slot="tabs-v2-trigger-wrapper"] {
-  border-radius: 6px;
-}
-
-.project-settings-extension-tabs[data-component="tabs-v2"][data-variant="pill"]
-  > [data-slot="tabs-v2-list"]
-  [data-slot="tabs-v2-trigger"] {
-  padding-inline: 8px;
-}
-
-.project-settings-extension-tabs [data-slot="tabs-v2-content"] {
-  overflow-y: auto;
-}
-
-.project-settings-extension-section {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding-top: 20px;
-}
-
-.project-settings-extension-section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  color: var(--v2-text-text-base);
-  font-size: 13px;
-  font-weight: 530;
-  line-height: var(--line-height-compact);
-}
-
-.project-settings-extension-section-header > :last-child {
-  color: var(--v2-text-text-faint);
-  font-size: 11px;
-  font-weight: 440;
-}
-
-.project-settings-extension-link {
-  color: var(--v2-text-text-accent) !important;
-  text-decoration: none;
-}
-
-.project-settings-extension-link:hover {
-  text-decoration: underline;
-}
-
-.project-settings-extension-card {
-  padding-inline: 12px;
-  overflow: hidden;
-  border: 0.5px solid var(--v2-border-border-base);
-  border-radius: 8px;
-  background: var(--v2-background-bg-base);
-}
-
-.project-settings-extension-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  min-height: 48px;
-  border-bottom: 0.5px solid var(--v2-border-border-base);
-}
-
-.project-settings-extension-row:last-child {
-  border-bottom: 0;
-}
-
-.project-settings-extension-row-main {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-}
-
-.project-settings-extension-row-icon {
-  flex-shrink: 0;
-  color: var(--v2-icon-icon-muted);
-}
-
-.project-settings-extension-row-name {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--v2-text-text-base);
-  font-size: 13px;
-  font-weight: 530;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.project-settings-extension-row-status {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-  color: var(--v2-text-text-muted);
-  font-size: 11px;
-}
-
-.project-settings-extension-row-status-dot {
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background: var(--v2-state-fg-warning);
-}
-
-.project-settings-shared {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.project-settings-shared-trigger {
-  display: flex;
-  align-items: center;
-  align-self: flex-start;
-  gap: 6px;
-  color: var(--v2-text-text-base);
-  font-size: 11px;
-  font-weight: 530;
-}
-
-.project-settings-shared-chevron {
-  width: 12px;
-  height: 12px;
-  color: var(--v2-icon-icon-muted);
-  transition: transform 120ms ease;
-}
-
-.project-settings-shared-chevron.open {
-  transform: rotate(90deg);
-}
-
-.project-settings-shared-count {
-  padding: 1px 4px;
-  border-radius: 3px;
-  background: var(--v2-background-bg-layer-02);
-  color: var(--v2-text-text-muted);
-  font-size: 9px;
-}

packages/app/src/settings/workspaces/project-dialog.tsx

@@ -1,219 +0,0 @@
-import { Button } from "@opencode/ui/button"
-import { Dialog, DialogFooter } from "@opencode/ui/dialog"
-import { Field } from "@opencode/ui/field"
-import { Icon } from "@opencode/ui/icon"
-import { ProjectAvatar, PROJECT_AVATAR_VARIANTS } from "@opencode/ui/project-avatar"
-import { Tabs } from "@opencode/ui/tabs"
-import { Textarea } from "@opencode/ui/textarea"
-import { TextInput } from "@opencode/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 } from "@/shell/layout/helpers"
-import { ProjectIcon } from "@/shell/layout/project-icon"
-import { createEditProjectModel } from "./project-model"
-import { ProjectSettingsExtensions } from "./project-extensions"
-import { SettingsServerDataScope } from "@/settings/server-scope"
-import "@/settings/settings.css"
-import "./project-dialog.css"
-
-export function DialogEditProject(props: { project: LocalProject; server: ServerConnection.Any }) {
-  return (
-    <SettingsServerDataScope server={props.server}>
-      <LocationProvider directory={props.project.worktree}>
-        <ProjectSettingsDialog project={props.project} server={props.server} />
-      </LocationProvider>
-    </SettingsServerDataScope>
-  )
-}
-
-function ProjectSettingsDialog(props: { project: LocalProject; server: ServerConnection.Any }) {
-  const language = useLanguage()
-  const model = createEditProjectModel(props)
-  const projectName = () => displayName(props.project)
-  const [tab, setTab] = createSignal("general")
-
-  const Footer = () => (
-    <DialogFooter>
-      <Button type="button" variant="neutral" disabled={model.save.isPending} onClick={model.close}>
-        {language.t("common.cancel")}
-      </Button>
-      <Button type="submit" variant="contrast" disabled={model.save.isPending}>
-        {model.save.isPending ? language.t("common.saving") : language.t("common.save")}
-      </Button>
-    </DialogFooter>
-  )
-
-  return (
-    <Dialog size="x-large" variant="settings" class="project-settings-dialog">
-      <Tabs
-        orientation="vertical"
-        variant="settings"
-        value={tab()}
-        onChange={(value) => void startTransition(() => setTab(value))}
-        class="project-settings-v2"
-      >
-        <Tabs.List>
-          <div class="project-settings-nav">
-            <Tabs.Trigger value="general">
-              <ProjectIcon project={props.project} class="!size-4 shrink-0" />
-              <span class="truncate">{projectName()}</span>
-            </Tabs.Trigger>
-            <Tabs.Trigger value="scripts">
-              <Icon name="code" size="small" />
-              {language.t("project.settings.scripts")}
-            </Tabs.Trigger>
-            <Tabs.Trigger value="extensions">
-              <Icon name="extensions" size="small" />
-              {language.t("settings.tab.extensions")}
-            </Tabs.Trigger>
-          </div>
-        </Tabs.List>
-
-        <Tabs.Content value="general" class="project-settings-panel">
-          <form onSubmit={model.submit} class="project-settings-form">
-            <div class="project-settings-scroll">
-              <div class="project-settings-page-header">
-                <h2>{language.t("dialog.project.edit.title")}</h2>
-                <span>{language.t("project.settings.general.description")}</span>
-              </div>
-
-              <Field>
-                <Field.Label>{language.t("dialog.project.edit.name")}</Field.Label>
-                <TextInput
-                  autofocus
-                  appearance="large"
-                  class="!w-full"
-                  value={model.store.name}
-                  placeholder={model.folderName()}
-                  onInput={(event) => model.setStore("name", event.currentTarget.value)}
-                />
-              </Field>
-
-              <div class="flex w-full flex-col gap-2">
-                <div class="select-none text-[13px] font-[530] leading-text-compact tracking-[-0.04px] text-v2-text-text-base">
-                  {language.t("dialog.project.edit.icon")}
-                </div>
-                <div class="flex items-center gap-3">
-                  <button
-                    type="button"
-                    aria-label={language.t("dialog.project.edit.icon.alt")}
-                    class="relative size-16 shrink-0 cursor-pointer overflow-hidden rounded-[6px] outline outline-1 outline-transparent transition-[background-color,outline-color] focus-visible:outline-v2-border-border-focus"
-                    classList={{
-                      "bg-v2-overlay-simple-overlay-hover outline-v2-border-border-focus": model.store.dragOver,
-                    }}
-                    onMouseEnter={() => model.setStore("iconHover", true)}
-                    onMouseLeave={() => model.setStore("iconHover", false)}
-                    onDrop={model.drop}
-                    onDragOver={model.dragOver}
-                    onDragLeave={model.dragLeave}
-                    onClick={model.iconClick}
-                  >
-                    <ProjectIcon
-                      project={props.project}
-                      fallback={model.store.name || model.defaultName()}
-                      icon={{
-                        color: model.store.color,
-                        url: props.project.icon?.url,
-                        override: model.store.iconOverride,
-                      }}
-                      class="!size-16 [&_[data-slot=project-avatar-surface]]:!rounded-[6px] [&_[data-slot=project-avatar-surface]]:!text-[32px]"
-                    />
-                    <span
-                      class="pointer-events-none absolute inset-0 flex items-center justify-center rounded-[6px] bg-v2-background-bg-contrast/80 text-v2-icon-icon-contrast backdrop-blur-[2px] transition-opacity"
-                      classList={{
-                        "opacity-100": model.store.iconHover,
-                        "opacity-0": !model.store.iconHover,
-                      }}
-                    >
-                      <Icon name={model.store.iconOverride ? "close" : "share"} />
-                    </span>
-                  </button>
-                  <input
-                    ref={(element) => model.setIconInput(element)}
-                    type="file"
-                    accept="image/*"
-                    class="hidden"
-                    onChange={model.inputChange}
-                  />
-                  <div class="flex select-none flex-col gap-[6px] text-[11px] font-[440] leading-none tracking-[0.05px] text-v2-text-text-muted">
-                    <span>{language.t("dialog.project.edit.icon.hint")}</span>
-                    <span>{language.t("dialog.project.edit.icon.recommended")}</span>
-                  </div>
-                </div>
-              </div>
-
-              <Show when={!model.store.iconOverride}>
-                <div class="flex w-full flex-col gap-2">
-                  <div class="select-none text-[13px] font-[530] leading-text-compact tracking-[-0.04px] text-v2-text-text-base">
-                    {language.t("dialog.project.edit.color")}
-                  </div>
-                  <div class="-ml-1 flex gap-1.5">
-                    <For each={PROJECT_AVATAR_VARIANTS}>
-                      {(color) => (
-                        <button
-                          type="button"
-                          aria-label={language.t("dialog.project.edit.color.select", { color })}
-                          aria-pressed={getProjectAvatarVariant(model.store.color) === color}
-                          class="flex size-8 items-center justify-center rounded-[10px] p-1 outline outline-1 outline-transparent transition-[background-color,outline-color] hover:bg-v2-overlay-simple-overlay-hover focus-visible:outline-v2-border-border-focus"
-                          classList={{
-                            "bg-v2-overlay-simple-overlay-hover [box-shadow:inset_0_0_0_2px_var(--v2-border-border-focus)]":
-                              getProjectAvatarVariant(model.store.color) === color,
-                          }}
-                          onClick={() => {
-                            if (getProjectAvatarVariant(model.store.color) === color && !props.project.icon?.url) return
-                            model.setStore(
-                              "color",
-                              getProjectAvatarVariant(model.store.color) === color ? undefined : color,
-                            )
-                          }}
-                        >
-                          <ProjectAvatar
-                            fallback={model.store.name || model.defaultName()}
-                            variant={getProjectAvatarVariant(color)}
-                            class="!size-6 [&_[data-slot=project-avatar-surface]]:!rounded-[6px]"
-                          />
-                        </button>
-                      )}
-                    </For>
-                  </div>
-                </div>
-              </Show>
-            </div>
-            <Footer />
-          </form>
-        </Tabs.Content>
-
-        <Tabs.Content value="scripts" class="project-settings-panel">
-          <form onSubmit={model.submit} class="project-settings-form">
-            <div class="project-settings-scroll">
-              <div class="project-settings-page-header">
-                <h2>{language.t("project.settings.scripts")}</h2>
-                <span>{language.t("project.settings.scripts.description")}</span>
-              </div>
-              <Field>
-                <Field.Label>{language.t("dialog.project.edit.worktree.startup")}</Field.Label>
-                <Field.Prefix>{language.t("dialog.project.edit.worktree.startup.description")}</Field.Prefix>
-                <Textarea
-                  class="!w-full [&_[data-slot=textarea-v2-textarea]]:font-mono"
-                  rows={5}
-                  value={model.store.startup}
-                  placeholder={language.t("dialog.project.edit.worktree.startup.placeholder")}
-                  spellcheck={false}
-                  onInput={(event) => model.setStore("startup", event.currentTarget.value)}
-                />
-              </Field>
-            </div>
-            <Footer />
-          </form>
-        </Tabs.Content>
-
-        <Tabs.Content value="extensions" class="project-settings-panel">
-          <ProjectSettingsExtensions />
-        </Tabs.Content>
-      </Tabs>
-    </Dialog>
-  )
-}

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

@@ -1,7 +1,19 @@
 import { Icon } from "@opencode/ui/icon"
 import { Switch } from "@opencode/ui/switch"
 import { Tabs } from "@opencode/ui/tabs"
-import { type Component, For, Show, createEffect, createMemo, createResource, createSignal, type JSX } from "solid-js"
+import { Button } from "@opencode/ui/button"
+import { useQuery } from "@tanstack/solid-query"
+import {
+  type Component,
+  For,
+  Show,
+  createEffect,
+  createMemo,
+  createResource,
+  createSignal,
+  onCleanup,
+  type JSX,
+} from "solid-js"
 import { useLanguage } from "@/runtime/i18n/language"
 import { useMcpToggle } from "@/providers/connect/mcp"
 import { useWorkspaceLocation } from "@/workspaces/location"
@@ -9,6 +21,9 @@ 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 { configuredLanguageServers } from "./project-lsp"
+import { SettingsList } from "@/settings/list"
+import "./project.css"
 
 type SkillItem = {
   name: string
@@ -18,23 +33,54 @@ 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>
+  <SettingsList variant="catalog">{props.children}</SettingsList>
 )
 
 const ExtensionRow: Component<{
-  icon: "mcp" | "cube" | "post-skill"
+  icon: "mcp" | "cube" | "post-skill" | "code"
   name: string
+  description?: JSX.Element
   children?: JSX.Element
 }> = (props) => (
-  <div class="project-settings-extension-row">
-    <div class="project-settings-extension-row-main">
+  <div class="settings-extension-row project-settings-extension-row">
+    <div class="settings-extension-lead">
       <Icon name={props.icon} class="project-settings-extension-row-icon" />
-      <span class="project-settings-extension-row-name">{props.name}</span>
+      <div class="project-settings-extension-row-copy">
+        <span class="project-settings-extension-row-name settings-extension-name">{props.name}</span>
+        <Show when={props.description}>
+          <span class="project-settings-extension-row-description">{props.description}</span>
+        </Show>
+      </div>
     </div>
     {props.children}
   </div>
 )
 
+const ProjectSectionHeader: Component<{
+  kind: "mcps" | "plugins" | "skills"
+  empty: boolean
+  action: JSX.Element
+}> = (props) => {
+  const language = useLanguage()
+  return (
+    <div class="project-settings-extension-section-header">
+      <div class="project-settings-extension-section-copy">
+        <span>
+          {props.empty
+            ? language.t(`project.settings.extensions.empty.${props.kind}.title`)
+            : language.t("project.settings.extensions.added")}
+        </span>
+        <Show when={props.empty}>
+          <span class="project-settings-extension-empty-description">
+            {language.t(`project.settings.extensions.empty.${props.kind}.description`)}
+          </span>
+        </Show>
+      </div>
+      {props.action}
+    </div>
+  )
+}
+
 const SharedSection: Component<{
   count: number
   children: JSX.Element
@@ -46,13 +92,21 @@ const SharedSection: Component<{
       <div class="project-settings-shared">
         <button
           type="button"
-          class="project-settings-shared-trigger"
+          class="settings-models-group-trigger project-settings-shared-trigger"
           aria-expanded={open()}
           onClick={() => setOpen((value) => !value)}
         >
-          <Icon name="chevron-right" classList={{ "project-settings-shared-chevron": true, open: open() }} />
-          <span>{language.t("project.settings.extensions.shared")}</span>
-          <span class="project-settings-shared-count">{props.count}</span>
+          <span class="settings-models-group-chevron">
+            <Icon
+              name="fill-triangle-down"
+              size="small"
+              classList={{ "project-settings-shared-chevron": true, open: open() }}
+            />
+          </span>
+          <span class="project-settings-shared-label">
+            <span class="settings-models-group-title">{language.t("project.settings.extensions.shared")}</span>
+            <span class="project-settings-shared-count">{props.count}</span>
+          </span>
         </button>
         <Show when={open()}>
           <ExtensionCard>{props.children}</ExtensionCard>
@@ -62,7 +116,99 @@ const SharedSection: Component<{
   )
 }
 
-export const ProjectSettingsExtensions: Component = () => {
+const ProjectLanguageServers: Component = () => {
+  const language = useLanguage()
+  const server = useServerSDK()
+  const location = useWorkspaceLocation()
+  const config = useQuery(() => ({
+    queryKey: [server.scope, "settings-project-language-servers", location().directory],
+    enabled: server.connection.status() === "connected",
+    queryFn: () => server.api.config.get({ location: { directory: location().directory } }),
+  }))
+  const configured = createMemo(() =>
+    configuredLanguageServers(config.isPending || config.isError ? [] : (config.data ?? [])),
+  )
+  const empty = () => !config.isPending && !config.isError && configured().servers.length === 0
+  onCleanup(
+    server.event.on("config.updated", (event) => {
+      if (event.location && event.location.directory !== location().directory) return
+      void config.refetch()
+    }),
+  )
+
+  return (
+    <div class="project-settings-extension-section">
+      <div class="project-settings-extension-section-header">
+        <div class="project-settings-extension-section-copy">
+          <span>
+            {language.t(
+              empty()
+                ? configured().disabled
+                  ? "project.settings.extensions.lsp.disabled.title"
+                  : "project.settings.extensions.lsp.empty.title"
+                : "project.settings.extensions.lsp.configured",
+            )}
+          </span>
+          <Show when={empty()}>
+            <span class="project-settings-extension-empty-description">
+              {language.t(
+                configured().disabled
+                  ? "project.settings.extensions.lsp.disabled.description"
+                  : "project.settings.extensions.lsp.empty.description",
+              )}
+            </span>
+          </Show>
+        </div>
+        <span>{language.t("project.settings.extensions.lsp.description")}</span>
+      </div>
+      <Show
+        when={!config.isPending}
+        fallback={<p class="project-settings-extension-empty-description">{language.t("common.loading")}</p>}
+      >
+        <Show
+          when={!config.isError}
+          fallback={
+            <div class="project-settings-extension-section-copy" role="status">
+              <span class="project-settings-extension-empty-description">
+                {language.t("project.settings.extensions.lsp.loadFailed")}
+              </span>
+              <Button variant="ghost-muted" onClick={() => void config.refetch()}>
+                {language.t("project.settings.extensions.lsp.retry")}
+              </Button>
+            </div>
+          }
+        >
+          <Show when={configured().servers.length > 0}>
+            <ExtensionCard>
+              <For each={configured().servers}>
+                {(item) => (
+                  <ExtensionRow
+                    icon="code"
+                    name={item.name}
+                    description={item.extensions.length ? <bdi dir="ltr">{item.extensions.join(", ")}</bdi> : undefined}
+                  >
+                    <span class="project-settings-extension-row-status">
+                      {language.t(
+                        item.disabled
+                          ? "project.settings.extensions.lsp.status.disabled"
+                          : "project.settings.extensions.lsp.status.enabled",
+                      )}
+                    </span>
+                  </ExtensionRow>
+                )}
+              </For>
+            </ExtensionCard>
+          </Show>
+        </Show>
+      </Show>
+    </div>
+  )
+}
+
+export const ProjectSettingsExtensions: Component<{
+  subtab?: "mcps" | "plugins" | "skills" | "lsps"
+  onSubtab: (value: "mcps" | "plugins" | "skills" | "lsps") => void
+}> = (props) => {
   const language = useLanguage()
   const serverSDK = useServerSDK()
   const directorySDK = useWorkspaceLocation()
@@ -145,61 +291,84 @@ export const ProjectSettingsExtensions: Component = () => {
   )
 
   return (
-    <div class="project-settings-extensions">
-      <div class="project-settings-page-header">
-        <h2>{language.t("settings.tab.extensions")}</h2>
-        <span>{language.t("project.settings.extensions.description")}</span>
+    <>
+      <div class="settings-tab-header">
+        <div class="settings-tab-header-row">
+          <div class="flex flex-col gap-1">
+            <h2 class="settings-tab-title">{language.t("settings.tab.extensions")}</h2>
+            <span class="text-11-regular text-v2-text-text-muted">
+              {language.t("project.settings.extensions.description")}
+            </span>
+          </div>
+        </div>
       </div>
 
-      <Tabs variant="pill" defaultValue="mcps" class="project-settings-extension-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>
-          <Tabs.Trigger value="skills">{language.t("settings.extensions.tab.skills")}</Tabs.Trigger>
-          {/* TODO: Restore LSP status when V2 exposes it. */}
-        </Tabs.List>
+      <div class="settings-tab-body">
+        <Tabs
+          variant="pill"
+          value={props.subtab ?? "mcps"}
+          onChange={(value) => {
+            if (value === "mcps" || value === "plugins" || value === "skills" || value === "lsps") props.onSubtab(value)
+          }}
+          class="project-settings-extension-tabs settings-subtabs"
+        >
+          <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>
+            <Tabs.Trigger value="skills">{language.t("settings.extensions.tab.skills")}</Tabs.Trigger>
+            <Tabs.Trigger value="lsps">{language.t("project.settings.extensions.tab.lsps")}</Tabs.Trigger>
+          </Tabs.List>
 
-        <Tabs.Content value="mcps">
-          <div class="project-settings-extension-section">
-            <div class="project-settings-extension-section-header">
-              <span>{language.t("project.settings.extensions.added")}</span>
-              <span>{language.t("settings.extensions.manageConfig")}</span>
+          <Tabs.Content value="mcps">
+            <div class="project-settings-extension-section">
+              <ProjectSectionHeader
+                kind="mcps"
+                empty={projectMcpNames().length === 0}
+                action={<span>{language.t("settings.extensions.manageConfig")}</span>}
+              />
+              <Show when={projectMcpNames().length > 0}>
+                <ExtensionCard>{mcpRows(projectMcpNames())}</ExtensionCard>
+              </Show>
+              <SharedSection count={globalMcpNames().length}>{mcpRows(globalMcpNames())}</SharedSection>
             </div>
-            <Show when={projectMcpNames().length > 0}>
-              <ExtensionCard>{mcpRows(projectMcpNames())}</ExtensionCard>
-            </Show>
-            <SharedSection count={globalMcpNames().length}>{mcpRows(globalMcpNames())}</SharedSection>
-          </div>
-        </Tabs.Content>
+          </Tabs.Content>
 
-        <Tabs.Content value="plugins">
-          <div class="project-settings-extension-section">
-            <div class="project-settings-extension-section-header">
-              <span>{language.t("project.settings.extensions.added")}</span>
-              <span>{language.t("settings.extensions.manageConfig")}</span>
+          <Tabs.Content value="plugins">
+            <div class="project-settings-extension-section">
+              <ProjectSectionHeader
+                kind="plugins"
+                empty={projectPlugins().length === 0}
+                action={<span>{language.t("settings.extensions.manageConfig")}</span>}
+              />
+              <Show when={projectPlugins().length > 0}>
+                <ExtensionCard>{pluginRows(projectPlugins())}</ExtensionCard>
+              </Show>
+              <SharedSection count={globalPlugins().length}>{pluginRows(globalPlugins())}</SharedSection>
             </div>
-            <Show when={projectPlugins().length > 0}>
-              <ExtensionCard>{pluginRows(projectPlugins())}</ExtensionCard>
-            </Show>
-            <SharedSection count={globalPlugins().length}>{pluginRows(globalPlugins())}</SharedSection>
-          </div>
-        </Tabs.Content>
+          </Tabs.Content>
 
-        <Tabs.Content value="skills">
-          <div class="project-settings-extension-section">
-            <div class="project-settings-extension-section-header">
-              <span>{language.t("project.settings.extensions.added")}</span>
-              <ExternalLink class="project-settings-extension-link" href="https://opencode.ai/docs/skills/">
-                {language.t("settings.extensions.addSkills")}
-              </ExternalLink>
+          <Tabs.Content value="skills">
+            <div class="project-settings-extension-section">
+              <ProjectSectionHeader
+                kind="skills"
+                empty={projectSkills().length === 0}
+                action={
+                  <ExternalLink class="settings-extension-link" href="https://opencode.ai/docs/skills/">
+                    {language.t("settings.extensions.addSkills")}
+                  </ExternalLink>
+                }
+              />
+              <Show when={projectSkills().length > 0}>
+                <ExtensionCard>{skillRows(projectSkills())}</ExtensionCard>
+              </Show>
+              <SharedSection count={serverSkills().length}>{skillRows(serverSkills())}</SharedSection>
             </div>
-            <Show when={projectSkills().length > 0}>
-              <ExtensionCard>{skillRows(projectSkills())}</ExtensionCard>
-            </Show>
-            <SharedSection count={serverSkills().length}>{skillRows(serverSkills())}</SharedSection>
-          </div>
-        </Tabs.Content>
-      </Tabs>
-    </div>
+          </Tabs.Content>
+          <Tabs.Content value="lsps">
+            <ProjectLanguageServers />
+          </Tabs.Content>
+        </Tabs>
+      </div>
+    </>
   )
 }

packages/app/src/settings/workspaces/project-lsp.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, test } from "bun:test"
+import type { ConfigEntry } from "@opencode/client/promise"
+import { configuredLanguageServers } from "./project-lsp"
+
+const global: ConfigEntry = {
+  type: "document",
+  path: "/config/opencode.json",
+  info: {
+    lsp: {
+      typescript: { command: ["typescript-language-server", "--stdio"], extensions: [".ts", ".tsx"] },
+      eslint: { disabled: true },
+    },
+  },
+}
+
+describe("configuredLanguageServers", () => {
+  test("merges inherited entries and project overrides by name", () => {
+    expect(
+      configuredLanguageServers([
+        global,
+        { type: "directory", path: "/project/.opencode" },
+        {
+          type: "document",
+          path: "/project/opencode.jsonc",
+          info: {
+            lsp: {
+              typescript: { disabled: true },
+              eslint: { command: ["eslint-lsp"], disabled: false, extensions: [".js"] },
+              rust: { command: ["rust-analyzer"], extensions: [".rs"] },
+            },
+          },
+        },
+      ]),
+    ).toEqual({
+      disabled: false,
+      servers: [
+        { name: "eslint", disabled: false, extensions: [".js"] },
+        { name: "rust", disabled: false, extensions: [".rs"] },
+        { name: "typescript", disabled: true, extensions: [".ts", ".tsx"] },
+      ],
+    })
+  })
+
+  test("does not invent servers for omitted or boolean-only configuration", () => {
+    expect(configuredLanguageServers([])).toEqual({ disabled: false, servers: [] })
+    expect(configuredLanguageServers([global, { type: "document", info: { lsp: false } }])).toEqual({
+      disabled: true,
+      servers: [],
+    })
+    expect(configuredLanguageServers([global, { type: "document", info: { lsp: true } }])).toEqual({
+      disabled: false,
+      servers: [],
+    })
+  })
+
+  test("allows named configuration after a disabled parent without reviving earlier entries", () => {
+    expect(
+      configuredLanguageServers([
+        global,
+        { type: "document", info: { lsp: false } },
+        { type: "document", info: { lsp: { custom: { command: ["custom-lsp"] } } } },
+      ]),
+    ).toEqual({ disabled: false, servers: [{ name: "custom", disabled: false, extensions: [] }] })
+  })
+})

packages/app/src/settings/workspaces/project-lsp.ts

@@ -0,0 +1,28 @@
+import type { ConfigEntry } from "@opencode/client/promise"
+
+type ConfiguredServer = { name: string; disabled: boolean; extensions: readonly string[] }
+
+export function configuredLanguageServers(entries: readonly ConfigEntry[]) {
+  const state = entries.reduce(
+    (state, entry) => {
+      if (entry.type !== "document" || entry.info.lsp === undefined) return state
+      const config = entry.info.lsp
+      // A boolean replaces the object form, so earlier named entries no longer apply.
+      if (typeof config === "boolean") return { disabled: !config, servers: new Map<string, ConfiguredServer>() }
+      Object.entries(config).forEach(([name, server]) => {
+        const previous = state.servers.get(name)
+        state.servers.set(name, {
+          name,
+          disabled: server.disabled ?? previous?.disabled ?? false,
+          extensions: ("extensions" in server ? server.extensions : undefined) ?? previous?.extensions ?? [],
+        })
+      })
+      return { disabled: false, servers: state.servers }
+    },
+    { disabled: false, servers: new Map<string, ConfiguredServer>() },
+  )
+  return {
+    disabled: state.disabled,
+    servers: [...state.servers.values()].sort((a, b) => a.name.localeCompare(b.name)),
+  }
+}

packages/app/src/settings/workspaces/project-model.ts

@@ -1,14 +1,17 @@
 import { getFilename } from "@opencode/util/path"
-import { useDialog } from "@opencode/ui/context/dialog"
-import { useMutation } from "@tanstack/solid-query"
+import type { ProjectUpdateInput } from "@opencode/client/promise"
 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 { useLanguage } from "@/runtime/i18n/language"
+import type { LocalProject } from "@/shell/state/layout"
 import { ServerConnection } from "@/runtime/server/registry"
+import { showToast } from "@/shell/notifications/toast"
+
+type ProjectPatch = Pick<ProjectUpdateInput, "name" | "icon" | "commands">
 
 export function createEditProjectModel(props: { project: LocalProject; server: ServerConnection.Any }) {
-  const dialog = useDialog()
+  const language = useLanguage()
   const global = useGlobal()
   const serverCtx = createMemo(() => global.ensureServerCtx(props.server))
   const folderName = createMemo(() => getFilename(props.project.worktree))
@@ -20,8 +23,62 @@ export function createEditProjectModel(props: { project: LocalProject; server: S
     startup: props.project.commands?.start ?? "",
     dragOver: false,
     iconHover: false,
+    saving: 0,
   })
+  const saved = {
+    name: props.project.name ?? "",
+    startup: store.startup.trim(),
+    color: store.color,
+    iconOverride: store.iconOverride,
+  }
   let iconInput: HTMLInputElement | undefined
+  let queue = Promise.resolve()
+
+  const persist = (patch: ProjectPatch, complete: () => void) => {
+    setStore("saving", (value) => value + 1)
+    queue = queue
+      .then(async () => {
+        if (props.project.id && props.project.id !== "global") {
+          const project = await serverCtx().sdk.api.project.update({ projectID: props.project.id, ...patch })
+          serverCtx().sync.project.update(project)
+          return
+        }
+        serverCtx().sync.project.meta(props.project.worktree, patch)
+      })
+      .then(complete)
+      .catch((error: unknown) => {
+        showToast({
+          variant: "error",
+          title: language.t("common.requestFailed"),
+          description: error instanceof Error ? error.message : language.t("common.requestFailed"),
+        })
+      })
+      .finally(() => setStore("saving", (value) => value - 1))
+  }
+
+  const saveName = () => {
+    const value = store.name.trim() === folderName() ? "" : store.name.trim()
+    if (value === saved.name) return
+    persist({ name: value }, () => {
+      saved.name = value
+    })
+  }
+
+  const saveStartup = () => {
+    const value = store.startup.trim()
+    if (value === saved.startup) return
+    persist({ commands: { start: value } }, () => {
+      saved.startup = value
+    })
+  }
+
+  const saveIcon = (color = store.color, override = store.iconOverride) => {
+    if (color === saved.color && override === saved.iconOverride) return
+    persist({ icon: { color: color ?? "", override: override ?? "" } }, () => {
+      saved.color = color
+      saved.iconOverride = override
+    })
+  }
 
   function selectFile(file: File) {
     if (!file.type.startsWith("image/")) return
@@ -31,85 +88,46 @@ export function createEditProjectModel(props: { project: LocalProject; server: S
       if (typeof result !== "string") return
       setStore("iconOverride", result)
       setStore("iconHover", false)
+      saveIcon(store.color, result)
     }
     reader.readAsDataURL(file)
   }
 
-  function drop(event: DragEvent) {
-    event.preventDefault()
-    setStore("dragOver", false)
-    const file = event.dataTransfer?.files[0]
-    if (file) selectFile(file)
-  }
-
-  function dragOver(event: DragEvent) {
-    event.preventDefault()
-    setStore("dragOver", true)
-  }
-
-  function dragLeave() {
-    setStore("dragOver", false)
-  }
-
-  function inputChange(event: Event) {
-    const file = (event.currentTarget as HTMLInputElement).files?.[0]
-    if (file) selectFile(file)
-  }
-
-  function iconClick() {
-    if (store.iconOverride && store.iconHover) {
-      setStore("iconOverride", "")
-      return
-    }
-    iconInput?.click()
-  }
-
-  const save = useMutation(() => ({
-    mutationFn: async () => {
-      const name = store.name.trim() === folderName() ? "" : store.name.trim()
-      const start = store.startup.trim()
-
-      if (props.project.id && props.project.id !== "global") {
-        const project = await serverCtx().sdk.api.project.update({
-          projectID: props.project.id,
-          name,
-          icon: { color: store.color ?? "", override: store.iconOverride ?? "" },
-          commands: { start },
-        })
-        serverCtx().sync.project.update(project)
-        dialog.close()
-        return
-      }
-
-      serverCtx().sync.project.meta(props.project.worktree, {
-        name,
-        icon: { color: store.color || undefined, override: store.iconOverride || undefined },
-        commands: { start: start || undefined },
-      })
-      dialog.close()
-    },
-  }))
-
-  function submit(event: SubmitEvent) {
-    event.preventDefault()
-    if (save.isPending) return
-    save.mutate()
-  }
-
   return {
     store,
     setStore,
     folderName,
     defaultName,
-    save,
-    submit,
-    drop,
-    dragOver,
-    dragLeave,
-    inputChange,
-    iconClick,
-    close() {
-      dialog.close()
+    saveName,
+    saveStartup,
+    setColor(value: string | undefined) {
+      setStore("color", value)
+      saveIcon(value, store.iconOverride)
+    },
+    drop(event: DragEvent) {
+      event.preventDefault()
+      setStore("dragOver", false)
+      const file = event.dataTransfer?.files[0]
+      if (file) selectFile(file)
+    },
+    dragOver(event: DragEvent) {
+      event.preventDefault()
+      setStore("dragOver", true)
+    },
+    dragLeave() {
+      setStore("dragOver", false)
+    },
+    inputChange(input: HTMLInputElement) {
+      const file = input.files?.[0]
+      if (file) selectFile(file)
+    },
+    iconClick() {
+      if (store.iconOverride && store.iconHover) {
+        setStore("iconOverride", "")
+        saveIcon(store.color, "")
+        return
+      }
+      iconInput?.click()
     },
     setIconInput(input: HTMLInputElement) {
       iconInput = input

packages/app/src/settings/workspaces/project.css

@@ -0,0 +1,299 @@
+.project-settings-extension-tabs {
+  flex: 1;
+  height: auto;
+  min-height: 0;
+  overflow: visible;
+}
+
+.project-settings-extension-tabs[data-component="tabs-v2"][data-variant="pill"] > [data-slot="tabs-v2-list"] {
+  width: auto;
+}
+
+.project-settings-extension-tabs [data-slot="tabs-v2-content"] {
+  overflow-y: auto;
+}
+
+.project-settings-extension-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.project-settings-extension-section-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  font-size: 13px;
+  font-weight: 530;
+  line-height: var(--line-height-compact);
+}
+
+.project-settings-extension-section-copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 6px;
+  color: var(--text-strong);
+}
+
+.project-settings-extension-section-header > :last-child {
+  color: var(--v2-text-text-muted);
+  font-size: 13px;
+  font-weight: 440;
+}
+
+.project-settings-extension-empty-description {
+  color: var(--v2-text-text-muted);
+  font-size: 13px;
+  font-weight: 440;
+  line-height: var(--line-height-base);
+}
+
+.project-settings-extension-row-icon {
+  flex-shrink: 0;
+  color: var(--v2-icon-icon-muted);
+}
+
+.project-settings-extension-row-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.project-settings-extension-row-copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.project-settings-extension-row-description {
+  color: var(--v2-text-text-muted);
+  font-size: 13px;
+  font-weight: 440;
+  line-height: var(--line-height-base);
+  overflow-wrap: anywhere;
+}
+
+.project-settings-extension-row-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  color: var(--v2-text-text-muted);
+  font-size: 11px;
+  line-height: var(--line-height-compact);
+}
+
+.project-settings-extension-row-status-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--v2-state-fg-warning);
+}
+
+.project-settings-shared {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.project-settings-shared-trigger {
+  width: fit-content;
+  align-self: flex-start;
+}
+
+.project-settings-shared-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.project-settings-shared-chevron {
+  color: var(--v2-icon-icon-muted);
+  transition: transform 120ms ease;
+  transform: rotate(-90deg);
+}
+
+.project-settings-shared-chevron.open {
+  transform: rotate(0deg);
+}
+
+[dir="rtl"] .project-settings-shared-chevron {
+  transform: rotate(90deg);
+}
+
+[dir="rtl"] .project-settings-shared-chevron.open {
+  transform: rotate(0deg);
+}
+
+.project-settings-shared-count {
+  display: inline-flex;
+  min-width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  padding-inline: 4px;
+  border-radius: 3px;
+  background: var(--v2-background-bg-layer-02);
+  color: var(--v2-text-text-muted);
+  font-size: 11px;
+  font-weight: 530;
+  line-height: var(--line-height-compact);
+}
+
+.project-settings-name {
+  width: min(280px, 100%);
+}
+
+.project-settings-server-link {
+  width: fit-content;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--v2-text-text-muted);
+  font-size: 13px;
+  font-weight: 440;
+  line-height: var(--line-height-compact);
+  text-align: start;
+  cursor: pointer;
+}
+
+.project-settings-server-link:hover,
+.project-settings-server-link:focus-visible {
+  color: var(--v2-text-text-base);
+  text-decoration: underline;
+}
+
+.project-settings-server-link:focus-visible {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 2px;
+}
+
+.project-settings-icon {
+  position: relative;
+  display: flex;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: 6px;
+  outline: 1px solid transparent;
+  background: transparent;
+  cursor: pointer;
+}
+
+.project-settings-icon--active,
+.project-settings-icon:focus-visible {
+  outline-color: var(--v2-border-border-focus);
+}
+
+.project-settings-icon-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--v2-background-bg-contrast) 80%, transparent);
+  color: var(--v2-icon-icon-contrast);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+
+.project-settings-icon-overlay.visible {
+  opacity: 1;
+}
+
+.project-settings-colors {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.project-settings-color {
+  position: relative;
+  display: flex;
+  width: 20px;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  outline: none;
+  background: transparent;
+  transition: box-shadow 120ms ease;
+}
+
+.project-settings-color:focus-visible,
+.project-settings-color--selected {
+  box-shadow:
+    0 0 0 2px var(--v2-background-bg-layer-01),
+    0 0 0 4px var(--v2-border-border-focus);
+}
+
+@media (hover: hover) {
+  .project-settings-color:not(.project-settings-color--selected):hover {
+    box-shadow:
+      0 0 0 2px var(--v2-background-bg-layer-01),
+      0 0 0 4px var(--v2-border-border-strong);
+  }
+}
+
+.project-settings-color-check {
+  position: absolute;
+  color: var(--v2-icon-icon-contrast);
+}
+
+.project-settings-startup {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-block: 20px;
+}
+
+.project-settings-startup-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.project-settings-startup-title {
+  color: var(--v2-text-text-base);
+  font-size: 13px;
+  font-weight: 530;
+  line-height: var(--line-height-compact);
+}
+
+.project-settings-startup-description,
+.project-settings-startup-hint {
+  color: var(--v2-text-text-muted);
+  font-size: 13px;
+  font-weight: 440;
+  line-height: var(--line-height-base);
+}
+
+.project-settings-startup-hint code {
+  padding-inline: 4px;
+  border-radius: 4px;
+  background: var(--v2-background-bg-layer-02);
+  color: var(--v2-text-text-base);
+  font-family: var(--font-family-mono);
+  font-size: 12px;
+  unicode-bidi: isolate;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .project-settings-icon-overlay,
+  .project-settings-color,
+  .project-settings-shared-chevron {
+    transition: none;
+  }
+}

packages/app/src/settings/workspaces/project.tsx

@@ -0,0 +1,169 @@
+import { Icon } from "@opencode/ui/icon"
+import { ProjectAvatar, PROJECT_AVATAR_VARIANTS } from "@opencode/ui/project-avatar"
+import { Textarea } from "@opencode/ui/textarea"
+import { TextInput } from "@opencode/ui/text-input"
+import { For, Show, type Component } from "solid-js"
+import { useLanguage } from "@/runtime/i18n/language"
+import { getProjectAvatarVariant, type LocalProject } from "@/shell/state/layout"
+import { ServerConnection, serverName } from "@/runtime/server/registry"
+import { useSettingsServers } from "@/settings/servers/inventory"
+import { displayName } from "@/shell/layout/helpers"
+import { ProjectIcon } from "@/shell/layout/project-icon"
+import { SettingsList } from "@/settings/list"
+import { SettingsRow } from "@/settings/row"
+import { createEditProjectModel } from "./project-model"
+import "./project.css"
+
+export const SettingsProjectGeneral: Component<{
+  project: LocalProject
+  server: ServerConnection.Any
+  onOpenServer: () => void
+}> = (props) => {
+  const language = useLanguage()
+  const model = createEditProjectModel(props)
+  const servers = useSettingsServers()
+
+  return (
+    <>
+      <div class="settings-tab-header">
+        <div class="settings-tab-header-row">
+          <div class="flex min-w-0 flex-col gap-1">
+            <h2 class="settings-tab-title truncate">
+              <bdi dir="auto">{model.store.name || displayName(props.project)}</bdi>
+            </h2>
+            <Show when={servers().length > 1}>
+              <button type="button" class="project-settings-server-link" onClick={() => props.onOpenServer()}>
+                <bdi dir="auto">{serverName(props.server) || ServerConnection.key(props.server)}</bdi>
+              </button>
+            </Show>
+          </div>
+        </div>
+      </div>
+
+      <div class="settings-tab-body project-settings-general" aria-busy={model.store.saving > 0}>
+        <SettingsList>
+          <SettingsRow
+            title={language.t("project.settings.name.title")}
+            description={language.t("project.settings.name.description")}
+          >
+            <div class="project-settings-name">
+              <TextInput
+                data-action="settings-project-name"
+                type="text"
+                appearance="base"
+                value={model.store.name}
+                placeholder={model.folderName()}
+                aria-label={language.t("project.settings.name.title")}
+                onInput={(event) => model.setStore("name", event.currentTarget.value)}
+                onBlur={model.saveName}
+              />
+            </div>
+          </SettingsRow>
+
+          <SettingsRow
+            title={language.t("dialog.project.edit.icon")}
+            description={language.t("project.settings.icon.description")}
+          >
+            <button
+              data-action="settings-project-icon"
+              type="button"
+              aria-label={language.t("dialog.project.edit.icon.alt")}
+              class="project-settings-icon"
+              classList={{ "project-settings-icon--active": model.store.dragOver }}
+              onMouseEnter={() => model.setStore("iconHover", true)}
+              onMouseLeave={() => model.setStore("iconHover", false)}
+              onDrop={(event) => model.drop(event)}
+              onDragOver={(event) => model.dragOver(event)}
+              onDragLeave={() => model.dragLeave()}
+              onClick={() => model.iconClick()}
+            >
+              <ProjectIcon
+                project={props.project}
+                fallback={model.store.name || model.defaultName()}
+                icon={{
+                  color: model.store.color,
+                  url: props.project.icon?.url,
+                  override: model.store.iconOverride,
+                }}
+                class="!size-8 [&_[data-slot=project-avatar-surface]]:!rounded-[6px] [&_[data-slot=project-avatar-surface]]:!text-[16px]"
+              />
+              <span classList={{ "project-settings-icon-overlay": true, visible: model.store.iconHover }}>
+                <Icon name={model.store.iconOverride ? "close" : "share"} />
+              </span>
+            </button>
+            <input
+              ref={(element) => model.setIconInput(element)}
+              type="file"
+              accept="image/*"
+              class="hidden"
+              onChange={(event) => model.inputChange(event.currentTarget)}
+            />
+          </SettingsRow>
+
+          <Show when={!model.store.iconOverride}>
+            <SettingsRow
+              title={language.t("dialog.project.edit.color")}
+              description={language.t("project.settings.color.description")}
+            >
+              <div class="project-settings-colors" data-action="settings-project-color">
+                <For each={PROJECT_AVATAR_VARIANTS}>
+                  {(color) => {
+                    const selected = () => getProjectAvatarVariant(model.store.color) === color
+                    return (
+                      <button
+                        type="button"
+                        aria-label={language.t("dialog.project.edit.color.select", { color })}
+                        aria-pressed={selected()}
+                        class="project-settings-color"
+                        classList={{ "project-settings-color--selected": selected() }}
+                        onClick={() => model.setColor(selected() ? undefined : color)}
+                      >
+                        <ProjectAvatar
+                          fallback=""
+                          variant={color}
+                          class="!size-5 [&_[data-slot=project-avatar-surface]]:!rounded-[6px]"
+                        />
+                        <Show when={selected()}>
+                          <Icon name="check" size="small" class="project-settings-color-check" />
+                        </Show>
+                      </button>
+                    )
+                  }}
+                </For>
+              </div>
+            </SettingsRow>
+          </Show>
+
+          <div class="project-settings-startup">
+            <div class="project-settings-startup-copy">
+              <span class="project-settings-startup-title">{language.t("dialog.project.edit.worktree.startup")}</span>
+              <span class="project-settings-startup-description">
+                {language.t("project.settings.worktree.startup.description")}
+              </span>
+            </div>
+            <Textarea
+              class="!w-full [&_[data-slot=textarea-v2-textarea]]:font-mono"
+              rows={5}
+              value={model.store.startup}
+              placeholder={language.t("dialog.project.edit.worktree.startup.placeholder")}
+              aria-label={language.t("dialog.project.edit.worktree.startup")}
+              spellcheck={false}
+              onInput={(event) => model.setStore("startup", event.currentTarget.value)}
+              onBlur={model.saveStartup}
+            />
+            <div class="project-settings-startup-hint flex flex-col">
+              <span>{inlineVariables(language.t("project.settings.worktree.startup.hint.base"))}</span>
+              <span>{inlineVariables(language.t("project.settings.worktree.startup.hint.new"))}</span>
+            </div>
+          </div>
+        </SettingsList>
+      </div>
+    </>
+  )
+}
+
+function inlineVariables(text: string) {
+  return text
+    .split(/(\$[A-Z][A-Z0-9_]*)/g)
+    .map((part, index) => (index % 2 === 0 ? part : <code dir="ltr">{part}</code>))
+}

packages/app/src/settings/workspaces/projects.tsx

@@ -1,146 +1,112 @@
-import { Component, For, Show, createMemo, createSignal } from "solid-js"
-import { IconButton } from "@opencode/ui/icon-button"
+import { For, Show, createEffect, createMemo, on, onCleanup, type Component } from "solid-js"
+import { createStore } from "solid-js/store"
 import { Icon } from "@opencode/ui/icon"
-import { useDialog } from "@opencode/ui/context/dialog"
+import { TextInput } from "@opencode/ui/text-input"
 import { useLanguage } from "@/runtime/i18n/language"
 import { useGlobal } from "@/runtime/server/runtime"
-import { ServerConnection, serverName } from "@/runtime/server/registry"
+import { ServerConnection } from "@/runtime/server/registry"
 import { displayName } from "@/shell/layout/helpers"
 import { ProjectIcon } from "@/shell/layout/project-icon"
-import { InlineServerSelect } from "@/settings/server-select"
-import { DialogEditProject } from "./project-dialog"
+import type { LocalProject } from "@/shell/state/layout"
+import { settingsProjects } from "../servers/inventory"
 import "@/settings/settings.css"
 
-export const SettingsProjects: Component = () => {
-  const dialog = useDialog()
+export const SettingsProjects: Component<{
+  server: ServerConnection.Any
+  active?: boolean
+  autofocus?: boolean
+  onOpenProject: (project: LocalProject) => void
+}> = (props) => {
   const language = useLanguage()
   const global = useGlobal()
-  const [allServers, setAllServers] = createSignal(true)
-  const selected = global.settings.server.selected
-  const multiple = createMemo(() => global.servers.list().length > 1)
-  const projects = createMemo(() => {
-    const server = selected()
-    if (!server) return []
-    return global.ensureServerCtx(server).projects.list()
+  const [store, setStore] = createStore({ filter: "" })
+  let search: HTMLInputElement | undefined
+  const projects = createMemo(() => settingsProjects(global.ensureServerCtx(props.server)))
+  const searchable = createMemo(() => projects().length > 7)
+  const filtered = createMemo(() => {
+    const query = searchable() ? store.filter.trim().toLowerCase() : ""
+    return query ? projects().filter((project) => displayName(project).toLowerCase().includes(query)) : projects()
   })
-
-  type ProjectItem = ReturnType<typeof projects>[number]
-
-  const groups = createMemo(() =>
-    global.servers
-      .list()
-      .map((server) => ({ server, projects: global.ensureServerCtx(server).projects.list() }))
-      .filter((group) => group.projects.length > 0),
+  createEffect(
+    on(
+      () => (props.active ?? true) && searchable(),
+      (active) => {
+        if (!active) return
+        const frame = requestAnimationFrame(() => {
+          if (props.active !== false && props.autofocus !== false && search?.isConnected)
+            search.focus({ preventScroll: true })
+        })
+        onCleanup(() => cancelAnimationFrame(frame))
+      },
+    ),
   )
-
-  const openProjectSettings = (project: ProjectItem, server = selected()) => {
-    if (!server) return
-    dialog.push(() => <DialogEditProject project={project} server={server} />)
-  }
-
-  const ProjectRow: Component<{ project: ProjectItem; server: ServerConnection.Any }> = (props) => {
-    const name = () => displayName(props.project)
-    return (
-      <div
-        class="group mx-px flex items-center justify-between gap-5 px-4 py-2.5 rounded-lg bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)] transition-all hover:bg-v2-background-bg-layer-01"
-        onClick={() => openProjectSettings(props.project, props.server)}
-      >
-        <div class="flex items-center gap-2.5 min-w-0 flex-1">
-          <ProjectIcon project={props.project} class="shrink-0" />
-          <span class="text-13-medium text-v2-text-text-base truncate">{name()}</span>
-        </div>
-        <div class="flex items-center gap-2 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
-          <IconButton
-            type="button"
-            variant="ghost-muted"
-            size="small"
-            icon={<Icon name="settings-gear" size="small" class="text-v2-icon-icon-muted" />}
-            onClick={(event: MouseEvent) => {
-              event.stopPropagation()
-              openProjectSettings(props.project, props.server)
-            }}
-          />
-        </div>
-      </div>
-    )
-  }
+  createEffect(() => {
+    if (!searchable()) setStore("filter", "")
+  })
 
   return (
     <>
-      <div class="settings-tab-header">
+      <div class="settings-tab-header" classList={{ "settings-tab-header--stacked": searchable() }}>
         <div class="settings-tab-header-row">
           <div class="flex flex-col gap-1">
             <h2 class="settings-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>
-          <Show when={multiple()}>
-            <InlineServerSelect
-              all={{
-                label: language.t("settings.projects.server.all"),
-                selected: allServers,
-                onSelect: () => setAllServers(true),
-              }}
-              onServerSelect={() => setAllServers(false)}
-            />
-          </Show>
         </div>
+        <Show when={searchable()}>
+          <div class="settings-tab-search">
+            <TextInput
+              ref={search}
+              type="search"
+              appearance="base"
+              value={store.filter}
+              onInput={(event) => setStore("filter", event.currentTarget.value)}
+              placeholder={language.t("settings.projects.search.placeholder")}
+              aria-label={language.t("settings.projects.search.placeholder")}
+              showClearButton={!!store.filter}
+              onClearClick={() => {
+                setStore("filter", "")
+                search?.focus({ preventScroll: true })
+              }}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+            />
+          </div>
+        </Show>
       </div>
 
       <div class="settings-tab-body">
         <Show
-          when={allServers()}
+          when={filtered().length > 0}
           fallback={
-            <div class="flex flex-col gap-2 w-full">
-              <Show
-                when={projects().length > 0}
-                fallback={
-                  <div class="py-12 text-center text-v2-text-text-muted text-13-regular">
-                    {language.t("settings.projects.empty")}
-                  </div>
-                }
-              >
-                <Show when={selected()} keyed>
-                  {(server) => (
-                    <div class="settings-section">
-                      <Show when={multiple()}>
-                        <h3 class="settings-section-title">{serverName(server) || ServerConnection.key(server)}</h3>
-                      </Show>
-                      <div class="flex flex-col gap-2 w-full">
-                        <For each={projects()}>{(project) => <ProjectRow project={project} server={server} />}</For>
-                      </div>
-                    </div>
-                  )}
-                </Show>
-              </Show>
+            <div class="py-12 text-center text-v2-text-text-muted text-13-regular">
+              {language.t("settings.projects.empty")}
             </div>
           }
         >
-          <div class="flex flex-col gap-8 w-full">
-            <Show
-              when={groups().length > 0}
-              fallback={
-                <div class="py-12 text-center text-v2-text-text-muted text-13-regular">
-                  {language.t("settings.projects.empty")}
-                </div>
-              }
-            >
-              <For each={groups()}>
-                {(group) => (
-                  <div class="settings-section">
-                    <Show when={multiple()}>
-                      <h3 class="settings-section-title">
-                        {serverName(group.server) || ServerConnection.key(group.server)}
-                      </h3>
-                    </Show>
-                    <div class="flex flex-col gap-2 w-full">
-                      <For each={group.projects}>
-                        {(project) => <ProjectRow project={project} server={group.server} />}
-                      </For>
-                    </div>
-                  </div>
-                )}
-              </For>
-            </Show>
+          <div class="flex w-full flex-col gap-2">
+            <For each={filtered()}>
+              {(project) => (
+                <button
+                  type="button"
+                  aria-label={displayName(project)}
+                  class="group mx-px flex items-center justify-between gap-5 px-4 py-2.5 rounded-lg bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)] transition-[background-color] hover:bg-v2-background-bg-layer-01 text-start"
+                  onClick={() => props.onOpenProject(project)}
+                >
+                  <span class="flex items-center gap-2.5 min-w-0 flex-1">
+                    <ProjectIcon project={project} class="shrink-0" />
+                    <bdi class="text-13-medium text-v2-text-text-base truncate">{displayName(project)}</bdi>
+                  </span>
+                  <Icon
+                    name="chevron-right"
+                    size="small"
+                    class="shrink-0 text-v2-icon-icon-muted opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"
+                  />
+                </button>
+              )}
+            </For>
           </div>
         </Show>
       </div>

packages/app/src/settings/workspaces/workspaces.tsx

@@ -21,7 +21,6 @@ import { getRelativeTime } from "@/shell/time"
 import { sessionLabel } from "@/session/title"
 import { pathKey } from "@/workspaces/path-key"
 import { SettingsList } from "@/settings/list"
-import { InlineServerSelect } from "@/settings/server-select"
 import { useTabs } from "@/shell/tabs/tabs"
 import { usePlatform } from "@/runtime/platform/platform"
 import { clearWorkspaceTerminals } from "@/session/terminal/context"
@@ -48,9 +47,11 @@ type Workspace = {
   project: Project
 }
 
-export const SettingsWorkspaces: Component<{ activeDirectory?: string; resetProjectFilter: () => number }> = (
-  props,
-) => {
+export const SettingsWorkspaces: Component<{
+  activeDirectory?: string
+  resetProjectFilter?: () => number
+  projectID?: string
+}> = (props) => {
   const dialog = useDialog()
   const language = useLanguage()
   const serverSDK = useServerSDK()
@@ -64,7 +65,11 @@ export const SettingsWorkspaces: Component<{ activeDirectory?: string; resetProj
     removing: [] as string[],
   })
   createEffect(() => {
-    props.resetProjectFilter()
+    if (props.projectID) {
+      setStore("project", props.projectID)
+      return
+    }
+    props.resetProjectFilter?.()
     setStore("project", "all")
   })
 
@@ -91,7 +96,11 @@ export const SettingsWorkspaces: Component<{ activeDirectory?: string; resetProj
     ...projects().map((project) => ({ id: project.id, label: projectName(project) })),
   ])
   const selectedProject = createMemo(() =>
-    store.project === "all" || projects().some((project) => project.id === store.project) ? store.project : "all",
+    props.projectID
+      ? props.projectID
+      : store.project === "all" || projects().some((project) => project.id === store.project)
+        ? store.project
+        : "all",
   )
   const filtered = createMemo(() => filterWorkspaceInventory(workspaces(), selectedProject()))
   const captureDeleteContext = () => {
@@ -328,18 +337,17 @@ export const SettingsWorkspaces: Component<{ activeDirectory?: string; resetProj
             <h2 class="settings-tab-title">{language.t("settings.tab.workspaces")}</h2>
             <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.workspaces.description")}</span>
           </div>
-          <InlineServerSelect />
         </div>
       </div>
 
       <div class="settings-tab-body settings-workspaces">
         <Show when={filtered().length > 0}>
           <div class="settings-workspaces-toolbar">
-            <span class="settings-workspaces-count">
+            <span class="settings-section-title">
               {language.plural("settings.workspaces.count", filtered().length)}
             </span>
             <div class="settings-workspaces-toolbar-actions">
-              <Show when={projects().length > 1}>
+              <Show when={!props.projectID && projects().length > 1}>
                 <Menu placement="bottom-end" gutter={6}>
                   <Menu.Trigger as={Button} size="small" variant="ghost-muted" class="max-w-48">
                     <span class="min-w-0 truncate">

packages/app/test-browser/playwright-config.test.ts

@@ -31,6 +31,7 @@ test.each([
   )
   expect(config.webServer.reuseExistingServer).toBe(!built)
   expect(config.webServer.env).toEqual({
+    VITE_OPENCODE_TEST_FIXTURES: "1",
     VITE_OPENCODE_SERVER_HOST: built ? "127.0.0.1" : "127.0.0.2",
     VITE_OPENCODE_SERVER_PORT: built ? "4321" : "4322",
   })

packages/app/vite.config.ts

@@ -35,6 +35,9 @@ export default defineConfig({
     port: 3000,
   },
   build: {
+    ...(process.env.VITE_OPENCODE_TEST_FIXTURES === "1"
+      ? { rolldownOptions: { input: ["index.html", "e2e/utils/settings-wsl.html"] } }
+      : {}),
     assetsDir: "_assets",
     target: "esnext",
     sourcemap: true,

packages/client/src/effect/api/api.ts

@@ -2116,8 +2116,30 @@ export type ConfigGetInput = {
 export type ConfigGetOutput = ReadonlyArray<Config.Entry>
 export type ConfigGetOperation<E = never> = (input?: ConfigGetInput) => Effect.Effect<ConfigGetOutput, E>
 
+export type ConfigPreferencesOutput = Config.Preferences
+export type ConfigPreferencesOperation<E = never> = () => Effect.Effect<ConfigPreferencesOutput, E>
+
+export type ConfigUpdatePreferencesInput = {
+  readonly shell?: string | null | undefined
+  readonly websearch?: false | { readonly provider: "random" | WebSearch.ID } | null | undefined
+}
+export type ConfigUpdatePreferencesOutput = Config.Preferences
+export type ConfigUpdatePreferencesOperation<E = never> = (
+  input?: ConfigUpdatePreferencesInput,
+) => Effect.Effect<ConfigUpdatePreferencesOutput, E>
+
+export type ConfigShellsOutput = ReadonlyArray<{
+  readonly path: string
+  readonly name: string
+  readonly acceptable: boolean
+}>
+export type ConfigShellsOperation<E = never> = () => Effect.Effect<ConfigShellsOutput, E>
+
 export interface ConfigApi<E = never> {
   readonly get: ConfigGetOperation<E>
+  readonly preferences: ConfigPreferencesOperation<E>
+  readonly updatePreferences: ConfigUpdatePreferencesOperation<E>
+  readonly shells: ConfigShellsOperation<E>
 }
 
 export interface AppApi<E = never> {

packages/client/src/effect/generated/client.ts

@@ -268,6 +268,10 @@ import type {
   WebsearchQueryOutput,
   ConfigGetInput,
   ConfigGetOutput,
+  ConfigPreferencesOutput,
+  ConfigUpdatePreferencesInput,
+  ConfigUpdatePreferencesOutput,
+  ConfigShellsOutput,
 } from "../api/api.js"
 import { ClientError } from "./client-error.js"
 
@@ -1571,7 +1575,25 @@ const EndpointConfigGet = (raw: RawClient["server.config"]) => (input?: ConfigGe
     raw["config.get"]({ query: { location: input?.["location"] } }).pipe(Effect.mapError(mapClientError)),
   )
 
-const adaptGroupConfig = (raw: RawClient["server.config"]) => ({ get: EndpointConfigGet(raw) })
+const EndpointConfigPreferences = (raw: RawClient["server.config"]) => () =>
+  preserveEffect<ConfigPreferencesOutput>()(raw["config.preferences"]({}).pipe(Effect.mapError(mapClientError)))
+
+const EndpointConfigUpdatePreferences = (raw: RawClient["server.config"]) => (input?: ConfigUpdatePreferencesInput) =>
+  preserveEffect<ConfigUpdatePreferencesOutput>()(
+    raw["config.updatePreferences"]({ payload: { shell: input?.["shell"], websearch: input?.["websearch"] } }).pipe(
+      Effect.mapError(mapClientError),
+    ),
+  )
+
+const EndpointConfigShells = (raw: RawClient["server.config"]) => () =>
+  preserveEffect<ConfigShellsOutput>()(raw["config.shells"]({}).pipe(Effect.mapError(mapClientError)))
+
+const adaptGroupConfig = (raw: RawClient["server.config"]) => ({
+  get: EndpointConfigGet(raw),
+  preferences: EndpointConfigPreferences(raw),
+  updatePreferences: EndpointConfigUpdatePreferences(raw),
+  shells: EndpointConfigShells(raw),
+})
 
 const adaptClient = (raw: RawClient) => ({
   health: adaptGroupHealth(raw["server.health"]),

packages/client/src/promise/generated/client.ts

@@ -264,6 +264,10 @@ import type {
   WebsearchQueryOutput,
   ConfigGetInput,
   ConfigGetOutput,
+  ConfigPreferencesOutput,
+  ConfigUpdatePreferencesInput,
+  ConfigUpdatePreferencesOutput,
+  ConfigShellsOutput,
 } from "./types.js"
 import { ClientError } from "./client-error.js"
 
@@ -2188,6 +2192,34 @@ export function make(options: ClientOptions) {
           },
           requestOptions,
         ),
+      preferences: (requestOptions?: RequestOptions) =>
+        request<ConfigPreferencesOutput>(
+          {
+            method: "GET",
+            path: `/api/config/preferences`,
+            successStatus: 200,
+            declaredStatuses: [400, 401],
+            empty: false,
+          },
+          requestOptions,
+        ),
+      updatePreferences: (input?: ConfigUpdatePreferencesInput, requestOptions?: RequestOptions) =>
+        request<ConfigUpdatePreferencesOutput>(
+          {
+            method: "PATCH",
+            path: `/api/config/preferences`,
+            body: { shell: input?.["shell"], websearch: input?.["websearch"] },
+            successStatus: 200,
+            declaredStatuses: [400, 401],
+            empty: false,
+          },
+          requestOptions,
+        ),
+      shells: (requestOptions?: RequestOptions) =>
+        request<ConfigShellsOutput>(
+          { method: "GET", path: `/api/config/shell`, successStatus: 200, declaredStatuses: [400, 401], empty: false },
+          requestOptions,
+        ),
     },
   }
 }

packages/client/src/promise/generated/types.ts

@@ -431,6 +431,10 @@ export type WebSearchResult = { url: string; title?: string; content?: string; t
 
 export type ConfigWorktree = { directory: string }
 
+export type ConfigPreferences = { shell?: string; websearch?: false | { provider: "random" | (string & {}) } }
+
+export type ConfigShellOption = { path: string; name: string; acceptable: boolean }
+
 export type ProviderRequest = {
   settings: ProviderSettings
   headers: { [x: string]: string }
@@ -6327,3 +6331,20 @@ export type ConfigGetInput = {
 }
 
 export type ConfigGetOutput = Array<ConfigEntry>
+
+export type ConfigPreferencesOutput = ConfigPreferences
+
+export type ConfigUpdatePreferencesInput = {
+  readonly shell?: {
+    readonly shell?: string | null
+    readonly websearch?: false | { readonly provider: "random" | (string & {}) } | null
+  }["shell"]
+  readonly websearch?: {
+    readonly shell?: string | null
+    readonly websearch?: false | { readonly provider: "random" | (string & {}) } | null
+  }["websearch"]
+}
+
+export type ConfigUpdatePreferencesOutput = ConfigPreferences
+
+export type ConfigShellsOutput = Array<ConfigShellOption>

packages/core/src/config.ts

@@ -3,7 +3,7 @@ export * as Config from "./config.js"
 import { makeLocationNode } from "@opencode/util/effect/app-node"
 import path from "path"
 import { isDeepStrictEqual } from "node:util"
-import { type ParseError, parse } from "jsonc-parser"
+import { applyEdits, modify, type ParseError, parse } from "jsonc-parser"
 import { Context, Effect, FiberMap, Layer, Option, PubSub, Ref, Schema, Semaphore, Stream } from "effect"
 import {
   AgentsDirectory,
@@ -11,6 +11,8 @@ import {
   Directory,
   Document,
   Info,
+  type Preferences,
+  type PreferencesPatch,
   type Entry,
   Event,
 } from "@opencode/schema/config"
@@ -41,6 +43,10 @@ export interface Interface {
    * source files they parse and rebuild their own state.
    */
   readonly changes: () => Stream.Stream<Watcher.Update>
+  /** Returns preferences from the highest-precedence global config document. */
+  readonly preferences?: () => Effect.Effect<Preferences, FSUtil.Error>
+  /** Patches preferences in the highest-precedence global config document. */
+  readonly updatePreferences?: (patch: PreferencesPatch) => Effect.Effect<Preferences, FSUtil.Error>
 }
 
 export const Options = Schema.Struct({
@@ -80,6 +86,19 @@ export const testLayer = (initial: Entry[] = []) =>
     }),
   )
 
+function decodePreferences(text: string): Preferences {
+  const errors: ParseError[] = []
+  const input: unknown = parse(text, errors, { allowTrailingComma: true })
+  if (errors.length) return {}
+  const normalized = ConfigNormalize.normalize(input)
+  if (normalized.type === "rejected") return {}
+  const info = Option.getOrUndefined(Schema.decodeUnknownOption(Info)(normalized.encoded))
+  return {
+    ...(info?.shell === undefined ? {} : { shell: info.shell }),
+    ...(info?.websearch === undefined ? {} : { websearch: info.websearch }),
+  }
+}
+
 export const layer = (options?: Options) =>
   Layer.effect(
     Service,
@@ -89,8 +108,10 @@ export const layer = (options?: Options) =>
       const watcher = yield* Watcher.Service
       const bus = yield* Bus.Service
       const credentials = yield* Credential.Service
+      const globalService = yield* Global.Service
       const wellknown = yield* WellKnown.Service
       const reloadLock = Semaphore.makeUnsafe(1)
+      const updateLock = Semaphore.makeUnsafe(1)
       const decodeOptions = { errors: "all", onExcessProperty: "ignore", propertyOrder: "original" } as const
       const decodeInfo = Schema.decodeUnknownOption(Info, decodeOptions)
       const parseInfo = Effect.fn("Config.parseInfo")(function* (text: string, source: string) {
@@ -317,11 +338,50 @@ export const layer = (options?: Options) =>
       )
       yield* reloadLock.withPermit(reconcile(initial))
 
+      const globalConfigPath = Effect.fn("Config.globalConfigPath")(function* () {
+        const directory = initial.global ?? AbsolutePath.make(globalService.config)
+        const candidates = ConfigDiscovery.names.map((name) => path.join(directory, name))
+        const existing = yield* Effect.filter(candidates, fs.isFile)
+        return existing.at(-1) ?? path.join(directory, "opencode.jsonc")
+      })
+
+      const preferences = Effect.fn("Config.preferences")(function* () {
+        const filepath = yield* globalConfigPath()
+        const text = yield* fs.readFileStringSafe(filepath)
+        return text === undefined ? {} : decodePreferences(text)
+      })
+
+      const updatePreferences = Effect.fn("Config.updatePreferences")(
+        function* (patch: PreferencesPatch) {
+          const filepath = yield* globalConfigPath()
+          const text = (yield* fs.readFileStringSafe(filepath)) ?? "{}\n"
+          const updated = yield* Effect.try({
+            try: () =>
+              (["shell", "websearch"] as const).reduce((content, key) => {
+                if (!Object.prototype.hasOwnProperty.call(patch, key)) return content
+                return applyEdits(
+                  content,
+                  modify(content, [key], patch[key] === null ? undefined : patch[key], {
+                    formattingOptions: { tabSize: 2, insertSpaces: true },
+                  }),
+                )
+              }, text),
+            catch: (cause) => new FSUtil.FileSystemError({ method: "config.updatePreferences", cause }),
+          })
+          yield* fs.writeWithDirs(filepath, updated.endsWith("\n") ? updated : `${updated}\n`)
+          yield* requestReload
+          return decodePreferences(updated)
+        },
+        (effect) => updateLock.withPermit(effect),
+      )
+
       return Service.of({
         entries: Effect.fnUntraced(function* () {
           return configs
         }),
         changes: () => Stream.fromPubSub(updates),
+        preferences,
+        updatePreferences,
       })
     }),
   )

packages/core/src/config/plugin/agent.ts

@@ -184,6 +184,15 @@ function decode(file: { directory: string; filepath: string; primary: boolean },
     .replace(/\.md$/, "")
   const body = markdown.content.trim()
   const legacy = Object.keys(markdown.data).some((key) => !agentKeys.has(key))
+  // Join legacy model + variant without sending native request/permissions through migration.
+  // Embedded and structured native selections, and a variant without a model, stay unchanged.
+  const data =
+    typeof markdown.data.model === "string" &&
+    !markdown.data.model.includes("#") &&
+    typeof markdown.data.variant === "string" &&
+    /^[^#]+$/.test(markdown.data.variant)
+      ? { ...markdown.data, model: `${markdown.data.model}#${markdown.data.variant}` }
+      : markdown.data
   const agent = legacy
     ? Option.getOrUndefined(
         Option.map(
@@ -191,9 +200,7 @@ function decode(file: { directory: string; filepath: string; primary: boolean },
           ConfigMigrateV1.migrateAgent,
         ),
       )
-    : Option.getOrUndefined(
-        decodeAgent({ ...markdown.data, system: body }, { errors: "all", propertyOrder: "original" }),
-      )
+    : Option.getOrUndefined(decodeAgent({ ...data, system: body }, { errors: "all", propertyOrder: "original" }))
   if (!agent) return
   const info = Option.getOrUndefined(
     decodeConfig({

packages/core/src/shell/select.ts

@@ -47,6 +47,7 @@ export type ResolveInput = {
 
 export interface Interface extends State.Transformable<Editor> {
   readonly resolve: (input: ResolveInput) => Effect.Effect<string>
+  readonly list?: () => Effect.Effect<Item[]>
 }
 
 export class Service extends Context.Service<Service, Interface>()("@opencode/ShellSelect") {}
@@ -214,6 +215,7 @@ const layer = (options?: Options) =>
         transform: state.transform,
         reload: state.reload,
         resolve: (input) => Effect.sync(() => resolve(input, state.get().shell, options, global.bin)),
+        list: () => Effect.promise(() => list(options, global.bin)),
       })
     }),
   )

packages/core/test/config/agent.test.ts

@@ -6,6 +6,7 @@ import { Agent } from "@opencode/core/agent"
 import { Bus } from "@opencode/core/bus"
 import { Config } from "@opencode/core/config"
 import { Directory, Document, Event, Info } from "@opencode/schema/config"
+import { Model } from "@opencode/schema/model"
 import { ConfigAgentPlugin } from "@opencode/core/config/plugin/agent"
 import { AppNodeBuilder } from "@opencode/core/effect/app-node-builder"
 import { LayerNode } from "@opencode/util/effect/layer-node"
@@ -17,7 +18,7 @@ import { AbsolutePath } from "@opencode/core/schema"
 import { ConfigMigrateV1 } from "@opencode/core/v1/config/migrate"
 import { ConfigAgentV1 } from "@opencode/core/v1/config/agent"
 import { advance, drain } from "../lib/clock"
-import { tmpdir } from "../fixture/tmpdir"
+import { tmpdir, tmpdirScoped } from "../fixture/tmpdir"
 import { testEffect } from "../lib/effect"
 import { agentHost, host } from "../plugin/host"
 
@@ -60,6 +61,76 @@ test("keeps schema fields and name out of legacy agent options", () => {
 })
 
 describe("ConfigAgentPlugin.Plugin", () => {
+  for (const item of [
+    { name: "separate legacy variant", frontmatter: "model: example/chat\nvariant: high", model: "example/chat#high" },
+    { name: "unqualified model", frontmatter: "model: example/chat", model: "example/chat" },
+    { name: "embedded native variant", frontmatter: "model: example/chat#high", model: "example/chat#high" },
+    {
+      name: "structured native variant",
+      frontmatter: "model:\n  providerID: example\n  model: chat\n  variant: high",
+      model: "example/chat#high",
+    },
+    {
+      name: "structured unqualified model",
+      frontmatter: "model:\n  providerID: example\n  model: chat",
+      model: "example/chat",
+    },
+    { name: "standalone variant", frontmatter: "variant: high", model: undefined },
+    {
+      name: "embedded native variant with an ignored separate variant",
+      frontmatter: "model: example/chat#high\nvariant: low",
+      model: "example/chat#high",
+    },
+    {
+      name: "structured native variant with an ignored separate variant",
+      frontmatter: "model:\n  providerID: example\n  model: chat\n  variant: high\nvariant: low",
+      model: "example/chat#high",
+    },
+  ]) {
+    for (const native of [false, true]) {
+      it.live(`loads Markdown ${item.name}${native ? " with native request and permissions" : ""}`, () =>
+        Effect.gen(function* () {
+          const agent = yield* loadMarkdownAgent(
+            native
+              ? `${item.frontmatter}
+request:
+  headers:
+    x-agent: native
+  body:
+    effort: high
+permissions:
+  - action: edit
+    resource: "*"
+    effect: deny`
+              : item.frontmatter,
+          )
+          expect(agent.model).toEqual(item.model === undefined ? undefined : Model.Ref.parse(item.model))
+          expect(agent.request).toEqual({
+            settings: {},
+            headers: native ? { "x-agent": "native" } : {},
+            body: native ? { effort: "high" } : {},
+          })
+          if (native) {
+            expect(agent.permissions).toContainEqual({ action: "edit", resource: "*", effect: "deny" })
+            expect(Permission.evaluate("edit", "example.txt", agent.permissions).effect).toBe("deny")
+          }
+        }),
+      )
+    }
+  }
+
+  for (const variant of [undefined, "high"]) {
+    it.live(`loads Markdown legacy temperature ${variant ? "with" : "without"} a separate variant`, () =>
+      Effect.gen(function* () {
+        const agent = yield* loadMarkdownAgent(
+          `model: example/chat\ntemperature: 0.5${variant ? `\nvariant: ${variant}` : ""}`,
+        )
+        expect(agent.model).toEqual(Model.Ref.parse(variant ? "example/chat#high" : "example/chat"))
+        expect(agent.request).toEqual({ settings: {}, headers: {}, body: { temperature: 0.5 } })
+      }),
+    )
+  }
+
   it.effect("matches POSIX paths against home-relative permissions", () =>
     Effect.gen(function* () {
       const permissions = yield* loadHomePermissions("/home/test")
@@ -560,6 +631,26 @@ Use native v2 fields.`,
   )
 })
 
+function loadMarkdownAgent(frontmatter: string) {
+  return Effect.gen(function* () {
+    const tmp = yield* tmpdirScoped()
+    const fs = yield* FSUtil.Service
+    yield* fs.makeDirectory(path.join(tmp.path, "agents"))
+    yield* fs.writeFileString(
+      path.join(tmp.path, "agents", "reviewer.md"),
+      `---\n${frontmatter}\n---\nReview carefully.`,
+    )
+    const agents = yield* Agent.Service
+    yield* ConfigAgentPlugin.Plugin.effect(host({ agent: agentHost(agents) })).pipe(
+      Effect.provide(Config.testLayer([directoryEntry(tmp.path)])),
+    )
+    const agent = yield* agents.get(Agent.ID.make("reviewer"))
+    if (!agent) throw new Error("expected configured Markdown agent")
+    expect(agent.system).toBe("Review carefully.")
+    return agent
+  })
+}
+
 function directoryEntry(directory: string) {
   return new Directory({ type: "directory", path: AbsolutePath.make(directory) })
 }

packages/protocol/src/groups/config.ts

@@ -1,4 +1,5 @@
 import { Config } from "@opencode/schema/config"
+import { ConfigShell } from "@opencode/schema/config/shell"
 import { Schema } from "effect"
 import { HttpApiEndpoint, HttpApiGroup, OpenApi } from "effect/unstable/httpapi"
 import { LocationQuery, locationQueryOpenApi } from "./location.js"
@@ -19,4 +20,38 @@ export const ConfigGroup = HttpApiGroup.make("server.config")
         }),
       ),
   )
+  .add(
+    HttpApiEndpoint.get("config.preferences", "/api/config/preferences", {
+      success: Config.Preferences,
+    }).annotateMerge(
+      OpenApi.annotations({
+        identifier: "v2.config.preferences",
+        summary: "Get global preferences",
+        description: "Return preferences from the highest-precedence global configuration document.",
+      }),
+    ),
+  )
+  .add(
+    HttpApiEndpoint.patch("config.updatePreferences", "/api/config/preferences", {
+      payload: Config.PreferencesPatch,
+      success: Config.Preferences,
+    }).annotateMerge(
+      OpenApi.annotations({
+        identifier: "v2.config.updatePreferences",
+        summary: "Update global preferences",
+        description: "Patch preferences in the highest-precedence global configuration document.",
+      }),
+    ),
+  )
+  .add(
+    HttpApiEndpoint.get("config.shells", "/api/config/shell", {
+      success: Schema.Array(ConfigShell.Option),
+    }).annotateMerge(
+      OpenApi.annotations({
+        identifier: "v2.config.shells",
+        summary: "List available shells",
+        description: "Return shells available to terminal and agent execution.",
+      }),
+    ),
+  )
   .annotateMerge(OpenApi.annotations({ title: "config", description: "Location-scoped configuration routes." }))

packages/schema/src/config.ts

@@ -109,6 +109,18 @@ export class Info extends Schema.Class<Info>("Config.Info")({
   experimental: ConfigExperimental.Info.pipe(optional),
 }) {}
 
+export const Preferences = Schema.Struct({
+  shell: Schema.String.pipe(optional),
+  websearch: ConfigWebSearch.Selection.pipe(optional),
+}).annotate({ identifier: "Config.Preferences" })
+export interface Preferences extends Schema.Schema.Type<typeof Preferences> {}
+
+export const PreferencesPatch = Schema.Struct({
+  shell: Schema.NullOr(Schema.String).pipe(optional),
+  websearch: Schema.NullOr(ConfigWebSearch.Selection).pipe(optional),
+}).annotate({ identifier: "Config.PreferencesPatch" })
+export interface PreferencesPatch extends Schema.Schema.Type<typeof PreferencesPatch> {}
+
 export class Document extends Schema.Class<Document>("Config.Document")({
   type: Schema.Literal("document"),
   path: AbsolutePath.pipe(optional),

packages/schema/src/config/shell.ts

@@ -0,0 +1,10 @@
+export * as ConfigShell from "./shell.js"
+
+import { Schema } from "effect"
+
+export const Option = Schema.Struct({
+  path: Schema.String,
+  name: Schema.String,
+  acceptable: Schema.Boolean,
+}).annotate({ identifier: "ConfigShell.Option" })
+export interface Option extends Schema.Schema.Type<typeof Option> {}

packages/server/src/handlers/config.ts

@@ -1,7 +1,34 @@
 import { Config } from "@opencode/core/config"
+import { ShellSelect } from "@opencode/core/shell/select"
+import { Effect } from "effect"
 import { HttpApiBuilder } from "effect/unstable/httpapi"
 import { Api } from "../api"
 
 export const ConfigHandler = HttpApiBuilder.group(Api, "server.config", (handlers) =>
-  handlers.handle("config.get", () => Config.Service.use((config) => config.entries())),
+  handlers
+    .handle("config.get", () => Config.Service.use((config) => config.entries()))
+    .handle(
+      "config.preferences",
+      Effect.fn(function* () {
+        const config = yield* Config.Service
+        if (!config.preferences) return yield* Effect.die(new Error("Config preferences are unavailable"))
+        return yield* config.preferences().pipe(Effect.orDie)
+      }),
+    )
+    .handle(
+      "config.updatePreferences",
+      Effect.fn(function* (ctx) {
+        const config = yield* Config.Service
+        if (!config.updatePreferences) return yield* Effect.die(new Error("Config preference updates are unavailable"))
+        return yield* config.updatePreferences(ctx.payload).pipe(Effect.orDie)
+      }),
+    )
+    .handle(
+      "config.shells",
+      Effect.fn(function* () {
+        const shell = yield* ShellSelect.Service
+        if (!shell.list) return yield* Effect.die(new Error("Shell discovery is unavailable"))
+        return yield* shell.list()
+      }),
+    ),
 )

packages/server/test/config.test.ts

@@ -59,6 +59,54 @@ it.live("returns ordered config entries for the requested directory", () =>
   }),
 )
 
+it.live("updates global preferences without replacing unrelated JSONC", () =>
+  Effect.gen(function* () {
+    const tmp = yield* Effect.acquireDisposable(Effect.promise(() => tmpdir("opencode-config-preferences-")))
+    const global = path.join(tmp.path, "global")
+    const config = path.join(global, "opencode.jsonc")
+    yield* Effect.promise(() => fs.mkdir(global, { recursive: true }))
+    yield* Effect.promise(() =>
+      fs.writeFile(
+        config,
+        `{
+  // keep this comment
+  "model": "provider/model",
+  "shell": "bash"
+}
+`,
+      ),
+    )
+    const server = yield* startServer(global)
+    const response = yield* Effect.promise(() =>
+      fetch(new URL("/api/config/preferences", server.base), {
+        method: "PATCH",
+        headers: { ...server.headers, "content-type": "application/json" },
+        body: JSON.stringify({ shell: null, websearch: { provider: "random" } }),
+      }),
+    )
+
+    expect(response.status).toBe(200)
+    expect(yield* Effect.promise(() => response.json())).toEqual({ websearch: { provider: "random" } })
+    const text = yield* Effect.promise(() => fs.readFile(config, "utf8"))
+    expect(text).toContain("// keep this comment")
+    expect(text).toContain('"model": "provider/model"')
+    expect(text).not.toContain('"shell"')
+    expect(text).toContain('"websearch"')
+
+    const preferences = yield* Effect.promise(() =>
+      fetch(new URL("/api/config/preferences", server.base), { headers: server.headers }),
+    )
+    expect(preferences.status).toBe(200)
+    expect(yield* Effect.promise(() => preferences.json())).toEqual({ websearch: { provider: "random" } })
+
+    const shells = yield* Effect.promise(() =>
+      fetch(new URL("/api/config/shell", server.base), { headers: server.headers }),
+    )
+    expect(shells.status).toBe(200)
+    expect(Array.isArray(yield* Effect.promise(() => shells.json()))).toBe(true)
+  }),
+)
+
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null && !Array.isArray(value)
 }

packages/ui/src/icons/icon/additional-icons.ts

@@ -93,23 +93,33 @@ export const additionalIcons = {
   dash: `<rect x="5" y="9.5" width="10" height="1" fill="currentColor"/>`,
   "cloud-upload": `<path d="M12.0833 16.25H15C17.0711 16.25 18.75 14.5711 18.75 12.5C18.75 10.5649 17.2843 8.97217 15.4025 8.77133C15.2 6.13103 12.8586 4.08333 10 4.08333C7.71532 4.08333 5.76101 5.49781 4.96501 7.49881C2.84892 7.90461 1.25 9.76559 1.25 11.6667C1.25 13.9813 3.30203 16.25 5.83333 16.25H7.91667M10 16.25V10.4167M12.0833 11.875L10 9.79167L7.91667 11.875" stroke="currentColor" stroke-linecap="square"/>`,
   trash: `<path d="M4.58342 17.9134L4.58369 17.4134L4.22787 17.5384L4.22766 18.0384H4.58342V17.9134ZM15.4167 17.9134V18.0384H15.7725L15.7723 17.5384L15.4167 17.9134ZM2.08342 3.95508V3.45508H1.58342V3.95508H2.08342V4.45508V3.95508ZM17.9167 4.45508V4.95508H18.4167V4.45508H17.9167V3.95508V4.45508ZM4.16677 4.58008L3.66701 4.5996L4.22816 17.5379L4.72792 17.4934L5.22767 17.4489L4.66652 4.54055L4.16677 4.58008ZM4.58342 18.0384V17.9134H15.4167V18.0384V18.5384H4.58342V18.0384ZM15.4167 17.9134L15.8332 17.5379L16.2498 4.5996L15.7501 4.58008L15.2503 4.56055L14.8337 17.4989L15.4167 17.9134ZM15.8334 4.58008V4.08008H4.16677V4.58008V5.08008H15.8334V4.58008ZM2.08342 4.45508V4.95508H4.16677V4.58008V4.08008H2.08342V4.45508ZM15.8334 4.58008V5.08008H17.9167V4.45508V3.95508H15.8334V4.58008ZM6.83951 4.35149L7.432 4.55047C7.79251 3.47701 8.80699 2.70508 10.0001 2.70508V2.20508V1.70508C8.25392 1.70508 6.77335 2.83539 6.24702 4.15251L6.83951 4.35149ZM10.0001 2.20508V2.70508C11.1932 2.70508 12.2077 3.47701 12.5682 4.55047L13.1607 4.35149L13.7532 4.15251C13.2269 2.83539 11.7463 1.70508 10.0001 1.70508V2.20508Z" fill="currentColor"/>`,
-  sliders: `<path d="M3.625 6.25H10.9375M16.375 13.75H10.5625M3.625 13.75H4.9375M11.125 6.25C11.125 4.79969 12.2997 3.625 13.75 3.625C15.2003 3.625 16.375 4.79969 16.375 6.25C16.375 7.70031 15.2003 8.875 13.75 8.875C12.2997 8.875 11.125 7.70031 11.125 6.25ZM10.375 13.75C10.375 15.2003 9.20031 16.375 7.75 16.375C6.29969 16.375 5.125 15.2003 5.125 13.75C5.125 12.2997 6.29969 11.125 7.75 11.125C9.20031 11.125 10.375 12.2997 10.375 13.75Z" stroke="currentColor" stroke-linecap="square"/>`,
+  sliders: `<path d="M11.7778 4.66797H14.4444M11.7778 4.66797C11.7778 5.77254 10.8823 6.66797 9.77776 6.66797C8.67319 6.66797 7.77776 5.77254 7.77776 4.66797M11.7778 4.66797C11.7778 3.5634 10.8823 2.66797 9.77776 2.66797C8.67319 2.66797 7.77776 3.5634 7.77776 4.66797M1.55554 4.66797H7.77776M4.22221 11.3346H1.55554M4.22221 11.3346C4.22221 12.4392 5.11764 13.3346 6.22221 13.3346C7.32678 13.3346 8.22221 12.4392 8.22221 11.3346M4.22221 11.3346C4.22221 10.2301 5.11764 9.33464 6.22221 9.33464C7.32678 9.33464 8.22221 10.2301 8.22221 11.3346M14.4444 11.3346H8.22221" stroke="currentColor"/>`,
   keyboard: `<path d="M5.125 7.375V4.375H14.875V2.875M8.3125 13.9375H11.6875M8.125 13.9375H11.875M2.125 7.375H17.875V17.125H2.125V7.375ZM5.5 10.375H5.125V10.75H5.5V10.375ZM8.5 10.375H8.125V10.75H8.5V10.375ZM11.875 10.375H11.5V10.75H11.875V10.375ZM14.875 10.375H14.5V10.75H14.875V10.375ZM14.875 13.75H14.5V14.125H14.875V13.75ZM5.5 13.75H5.125V14.125H5.5V13.75Z" stroke="currentColor" stroke-linecap="square"/>`,
   selector: `<path d="M6.66626 12.5033L9.99959 15.8366L13.3329 12.5033M6.66626 7.50326L9.99959 4.16992L13.3329 7.50326" stroke="currentColor" stroke-linecap="square"/>`,
   "arrow-down-to-line": `<path d="M15.2083 11.6667L10 16.875L4.79167 11.6667M10 16.25V3.125" stroke="currentColor" stroke-width="1.25" stroke-linecap="square"/>`,
   warning: `<path d="M10 7.91667V11.6667M10 13.7417V13.75M10 2.5L1.875 16.25H18.125L10 2.5Z" stroke="currentColor" stroke-linecap="square"/>`,
   reset: `<path d="M5.83333 4.16406L2.5 7.4974L5.83333 10.8307M3.33333 7.4974H17.9167V15.4141H10" stroke="currentColor" stroke-linecap="square"/>`,
   link: `<path d="M2.08334 12.0833L1.72979 11.7298L1.37624 12.0833L1.72979 12.4369L2.08334 12.0833ZM7.91668 17.9167L7.56312 18.2702L7.91668 18.6238L8.27023 18.2702L7.91668 17.9167ZM17.9167 7.91666L18.2702 8.27022L18.6238 7.91666L18.2702 7.56311L17.9167 7.91666ZM12.0833 2.08333L12.4369 1.72977L12.0833 1.37622L11.7298 1.72977L12.0833 2.08333ZM8.39646 5.06311L8.0429 5.41666L8.75001 6.12377L9.10356 5.77021L8.75001 5.41666L8.39646 5.06311ZM5.77023 9.10355L6.12378 8.74999L5.41668 8.04289L5.06312 8.39644L5.41668 8.74999L5.77023 9.10355ZM14.2298 10.8964L13.8762 11.25L14.5833 11.9571L14.9369 11.6035L14.5833 11.25L14.2298 10.8964ZM11.6036 14.9369L11.9571 14.5833L11.25 13.8762L10.8965 14.2298L11.25 14.5833L11.6036 14.9369ZM7.14646 12.1464L6.7929 12.5L7.50001 13.2071L7.85356 12.8535L7.50001 12.5L7.14646 12.1464ZM12.8536 7.85355L13.2071 7.49999L12.5 6.79289L12.1465 7.14644L12.5 7.49999L12.8536 7.85355ZM2.08334 12.0833L1.72979 12.4369L7.56312 18.2702L7.91668 17.9167L8.27023 17.5631L2.4369 11.7298L2.08334 12.0833ZM17.9167 7.91666L18.2702 7.56311L12.4369 1.72977L12.0833 2.08333L11.7298 2.43688L17.5631 8.27022L17.9167 7.91666ZM12.0833 2.08333L11.7298 1.72977L8.39646 5.06311L8.75001 5.41666L9.10356 5.77021L12.4369 2.43688L12.0833 2.08333ZM5.41668 8.74999L5.06312 8.39644L1.72979 11.7298L2.08334 12.0833L2.4369 12.4369L5.77023 9.10355L5.41668 8.74999ZM14.5833 11.25L14.9369 11.6035L18.2702 8.27022L17.9167 7.91666L17.5631 7.56311L14.2298 10.8964L14.5833 11.25ZM7.91668 17.9167L8.27023 18.2702L11.6036 14.9369L11.25 14.5833L10.8965 14.2298L7.56312 17.5631L7.91668 17.9167ZM7.50001 12.5L7.85356 12.8535L12.8536 7.85355L12.5 7.49999L12.1465 7.14644L7.14646 12.1464L7.50001 12.5Z" fill="currentColor"/>`,
-  providers: `<path d="M10.0001 4.37562V2.875M13 4.37793V2.87793M7.00014 4.37793V2.875M10 17.1279V15.6279M13 17.1279V15.6279M7 17.1279V15.6279M15.625 13.0029H17.125M15.625 7.00293H17.125M15.625 10.0029H17.125M2.875 10.0029H4.375M2.875 13.0029H4.375M2.875 7.00293H4.375M4.375 4.37793H15.625V15.6279H4.375V4.37793ZM12.6241 10.0022C12.6241 11.4519 11.4488 12.6272 9.99908 12.6272C8.54934 12.6272 7.37408 11.4519 7.37408 10.0022C7.37408 8.55245 8.54934 7.3772 9.99908 7.3772C11.4488 7.3772 12.6241 8.55245 12.6241 10.0022Z" stroke="currentColor" stroke-linecap="square"/>`,
-  models: `<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 10C12.2917 10 10 12.2917 10 17.5C10 12.2917 7.70833 10 2.5 10C7.70833 10 10 7.70833 10 2.5C10 7.70833 12.2917 10 17.5 10Z" stroke="currentColor"/>`,
-  appearance: `<path d="M2.707 14.707L14.707 2.707M2.707 9.06L9.06 2.707M2.707 3.413L3.413 2.707M8.354 14.707L14.707 8.354M14.000 14.706L14.706 14.000" stroke="currentColor" stroke-linecap="square"/>`,
-  notifications: `<path d="M15.389 7.278V9.611C15.389 10.593 15.389 11.389 15.389 11.389H11.833M6.056 11.389H2.5C2.5 11.389 2.5 10.593 2.5 9.611V4.278C2.5 3.296 2.5 2.5 2.5 2.5H9.945M6.056 11.389V13.611H8.944H11.833V11.389M6.056 11.389H11.833" stroke="currentColor"/><circle cx="14.5" cy="4.5" r="2" stroke="currentColor" fill="currentColor"/>`,
-  extensions: `<path d="M9.166 6.805V9.305M11.834 6.805V9.305M6.5 6.805V9.305M2.5 2.5V13.61H15.833V2.5H2.5Z" stroke="currentColor" stroke-linecap="square"/>`,
+  providers: `<path d="M5.11115 3.33252H10.8889M5.11115 3.33252L3.33337 3.33254V12.6658H5.11115M5.11115 3.33252L5.11108 1.55469M10.8889 3.33252L12.6667 3.33252V12.6658H10.8889M10.8889 3.33252L10.8889 1.55469M10.8889 12.6658H5.11115M10.8889 12.6658L10.8889 14.4435M5.11115 12.6658L5.11108 14.4435M8 1.55469V3.33247M14.4444 7.99915H12.6666M14.4444 5.11023H12.6666M14.4444 10.8881H12.6666M8 14.4435V12.6658M1.55554 7.99915H3.33332M1.55554 10.8881H3.33332M1.55554 5.11023H3.33332M6 9.99915V5.99915H10V9.99915H6Z" stroke="currentColor"/>`,
+  models: `<path fill-rule="evenodd" clip-rule="evenodd" d="M14 8C9.83336 8 8 9.83336 8 14C8 9.83336 6.16666 8 2 8C6.16666 8 8 6.16666 8 2C8 6.16666 9.83336 8 14 8Z" stroke="currentColor"/>`,
+  appearance: `<path d="M2.00012 13.9997L13.9998 2" stroke="currentColor" stroke-linecap="square"/><path d="M2.00012 8.35278L8.3529 2" stroke="currentColor" stroke-linecap="square"/><path d="M2.00012 2.70586L2.70599 2" stroke="currentColor" stroke-linecap="square"/><path d="M7.64722 14.0012L14 7.64844" stroke="currentColor" stroke-linecap="square"/><path d="M13.2935 13.9988L13.9993 13.293" stroke="currentColor" stroke-linecap="square"/>`,
+  notifications: `<path d="M14.8889 6.77778V9.11112C14.8889 10.093 14.8889 10.8889 14.8889 10.8889H11.3334M5.55558 10.8889H2C2 10.8889 2.00001 10.093 2.00001 9.11112V3.77778C2.00001 2.79594 2.00009 2 2.00009 2H9.44531M5.55558 10.8889V13.1111H8.44447H11.3334V10.8889M5.55558 10.8889H11.3334" stroke="currentColor"/><path d="M13 5C14.1046 5 15 4.10457 15 3C15 1.89543 14.1046 1 13 1C11.8954 1 11 1.89543 11 3C11 4.10457 11.8954 5 13 5Z" stroke="currentColor"/>`,
+  extensions: `<path d="M8 6.75047V9.25047M10.668 6.75047V9.25047M5.33398 6.75047V9.25047M1.33398 2.44531V13.5553H14.6673V2.44531H1.33398Z" stroke="currentColor" stroke-linecap="square"/>`,
   cube: `<path d="M10 2.5L16.5 6.25V13.75L10 17.5L3.5 13.75V6.25L10 2.5Z" stroke="currentColor"/><path d="M10 10L16.5 6.25M10 10V17.5M10 10L3.5 6.25" stroke="currentColor"/>`,
   "post-skill": `<rect x="2.5" y="3.5" width="15" height="13" rx="1.5" stroke="currentColor"/><path d="M5.5 7.5H10.5M5.5 10.5H14.5" stroke="currentColor"/>`,
   "arrow-undo-down": `<path d="M4.08333 11.0859L1.75 8.7526L4.08333 6.41927M2.33333 8.7526L12.5417 8.7526L12.5417 3.21094L7 3.21094" stroke="currentColor" stroke-width="1" stroke-linecap="square"/>`,
 }
 
 export function additionalIconViewBox(name: keyof typeof additionalIcons) {
-  return name === "magnifying-glass" || name === "arrow-undo-down" || name === "subagent" ? "0 0 16 16" : "0 0 20 20"
+  return name === "magnifying-glass" ||
+    name === "arrow-undo-down" ||
+    name === "subagent" ||
+    name === "notifications" ||
+    name === "appearance" ||
+    name === "extensions" ||
+    name === "sliders" ||
+    name === "providers" ||
+    name === "models"
+    ? "0 0 16 16"
+    : "0 0 20 20"
 }

packages/ui/src/icons/icon/icon.tsx

@@ -26,7 +26,7 @@ const icons = {
   },
   folder: {
     viewBox: "0 0 16 16",
-    body: `<path d="M2.545 3.364V12.636H13.455V5H8.545L6.909 3.364H2.545Z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/>`,
+    body: `<path d="M1.33337 2V13.3333H14.6667V4H8.66671L6.66671 2H1.33337Z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/>`,
   },
   branch: {
     viewBox: "0 0 16 16",