feat(app): align settings with project scopes

2026-08-15 17:08:21 -04:00 · 2026-08-07 19:27:49 +10:00
parent 9ded81b6c2
commit 9ecf46bfea
21 changed files with 917 additions and 344 deletions
@@ -0,0 +1,238 @@
+.project-settings-v2-dialog [data-slot="dialog-container"] {
+  background: var(--v2-background-bg-base);
+}
+
+.project-settings-v2-dialog [data-slot="dialog-body"] {
+  padding: 0;
+  overflow: hidden;
+}
+
+.project-settings-v2 {
+  height: 100%;
+}
+
+.project-settings-v2-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+
+.project-settings-v2-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+  overflow: hidden !important;
+  user-select: none;
+}
+
+.project-settings-v2-panel :is(input, textarea, [contenteditable="true"]) {
+  user-select: text;
+}
+
+.project-settings-v2-form {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.project-settings-v2-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: 1;
+}
+
+.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;
+}
@@ -1,156 +1,223 @@
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
-import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"
+import { Dialog, DialogFooter } from "@opencode-ai/ui/v2/dialog-v2"
 import { Field } from "@opencode-ai/ui/v2/field-v2"
-import { Icon } from "@opencode-ai/ui/v2/icon"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { Icon } from "@opencode-ai/ui/icon"
 import { ProjectAvatar, PROJECT_AVATAR_VARIANTS } from "@opencode-ai/ui/v2/project-avatar-v2"
+import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
 import { TextareaV2 } from "@opencode-ai/ui/v2/textarea-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
-import { For, Show } from "solid-js"
+import { For, Show, createSignal, startTransition } from "solid-js"
 import { useLanguage } from "@/context/language"
 import { getProjectAvatarVariant, type LocalProject } from "@/context/layout"
+import { SDKProvider } from "@/context/sdk"
 import { ServerConnection } from "@/context/server"
-import { getProjectAvatarSource } from "@/pages/layout/helpers"
+import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
 import { createEditProjectModel } from "./edit-project"
+import { ProjectSettingsExtensions } from "./project-settings-extensions"
+import { SettingsServerDataScope } from "./settings-server-picker"
+import "./settings-v2/settings-v2.css"
+import "./dialog-edit-project-v2.css"

 export function DialogEditProjectV2(props: { project: LocalProject; server: ServerConnection.Any }) {
+  return (
+    <SettingsServerDataScope server={props.server}>
+      <SDKProvider directory={props.project.worktree}>
+        <ProjectSettingsDialog project={props.project} server={props.server} />
+      </SDKProvider>
+    </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>
+      <ButtonV2 type="button" variant="neutral" disabled={model.save.isPending} onClick={model.close}>
+        {language.t("common.cancel")}
+      </ButtonV2>
+      <ButtonV2 type="submit" variant="contrast" disabled={!model.supported || model.save.isPending}>
+        {model.save.isPending ? language.t("common.saving") : language.t("common.save")}
+      </ButtonV2>
+    </DialogFooter>
+  )

  return (
-    <Dialog fit>
-      <form onSubmit={model.submit} class="contents">
-        <DialogHeader>
-          <DialogTitle>{language.t("dialog.project.edit.title")}</DialogTitle>
-        </DialogHeader>
-        <DividerV2 />
-        <DialogBody class="flex max-h-[min(560px,calc(100vh-160px))] w-full flex-col gap-6 overflow-y-auto px-4 pt-4 pb-1">
-          <Field>
-            <Field.Label>{language.t("dialog.project.edit.name")}</Field.Label>
-            <TextInputV2
-              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-none 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}
-              >
-                <ProjectAvatar
-                  fallback={model.store.name || model.defaultName()}
-                  src={getProjectAvatarSource(props.project.id, {
-                    color: model.store.color,
-                    url: props.project.icon?.url,
-                    override: model.store.iconOverride,
-                  })}
-                  variant={getProjectAvatarVariant(model.store.color)}
-                  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" : "outline-share"} />
-                </span>
-              </button>
-              <input
-                ref={(element) => {
-                  model.setIconInput(element)
-                }}
-                type="file"
-                accept="image/*"
-                class="hidden"
-                onChange={model.inputChange}
+    <Dialog size="x-large" variant="settings" class="project-settings-v2-dialog">
+      <TabsV2
+        orientation="vertical"
+        variant="settings"
+        value={tab()}
+        onChange={(value) => void startTransition(() => setTab(value))}
+        class="project-settings-v2"
+      >
+        <TabsV2.List>
+          <div class="project-settings-v2-nav">
+            <TabsV2.Trigger value="general">
+              <ProjectAvatar
+                fallback={projectName()}
+                variant={getProjectAvatarVariant(props.project.icon?.color)}
+                class="!size-4 shrink-0"
              />
-              <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>
+              <span class="truncate">{projectName()}</span>
+            </TabsV2.Trigger>
+            <TabsV2.Trigger value="scripts">
+              <Icon name="code" size="small" />
+              {language.t("project.settings.scripts")}
+            </TabsV2.Trigger>
+            <TabsV2.Trigger value="extensions">
+              <Icon name="extensions" size="small" />
+              {language.t("settings.tab.extensions")}
+            </TabsV2.Trigger>
          </div>
+        </TabsV2.List>

-          <Show when={!model.store.iconOverride}>
-            <div class="flex w-full flex-col gap-2">
-              <div class="select-none text-[13px] font-[530] leading-none tracking-[-0.04px] text-v2-text-text-base">
-                {language.t("dialog.project.edit.color")}
+        <TabsV2.Content value="general" class="project-settings-v2-panel">
+          <form onSubmit={model.submit} class="project-settings-v2-form">
+            <div class="project-settings-v2-scroll">
+              <div class="project-settings-page-header">
+                <h2>{language.t("dialog.project.edit.title")}</h2>
+                <span>{language.t("project.settings.general.description")}</span>
              </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"
+
+              <Field>
+                <Field.Label>{language.t("dialog.project.edit.name")}</Field.Label>
+                <TextInputV2
+                  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-none 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}
+                  >
+                    <ProjectAvatar
+                      fallback={model.store.name || model.defaultName()}
+                      src={getProjectAvatarSource(props.project.id, {
+                        color: model.store.color,
+                        url: props.project.icon?.url,
+                        override: model.store.iconOverride,
+                      })}
+                      variant={getProjectAvatarVariant(model.store.color)}
+                      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={{
-                        "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,
-                        )
+                        "opacity-100": model.store.iconHover,
+                        "opacity-0": !model.store.iconHover,
                      }}
                    >
-                      <ProjectAvatar
-                        fallback={model.store.name || model.defaultName()}
-                        variant={getProjectAvatarVariant(color)}
-                        class="!size-6 [&_[data-slot=project-avatar-surface]]:!rounded-[6px]"
-                      />
-                    </button>
-                  )}
-                </For>
+                      <IconV2 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>
-            </div>
-          </Show>

-          <Field>
-            <Field.Label>{language.t("dialog.project.edit.worktree.startup")}</Field.Label>
-            <Field.Prefix>{language.t("dialog.project.edit.worktree.startup.description")}</Field.Prefix>
-            <TextareaV2
-              class="!w-full [&_[data-slot=textarea-v2-textarea]]:font-mono"
-              rows={3}
-              value={model.store.startup}
-              placeholder={language.t("dialog.project.edit.worktree.startup.placeholder")}
-              spellcheck={false}
-              onInput={(event) => model.setStore("startup", event.currentTarget.value)}
-            />
-          </Field>
-        </DialogBody>
-        <DialogFooter>
-          <ButtonV2 type="button" variant="neutral" disabled={model.save.isPending} onClick={model.close}>
-            {language.t("common.cancel")}
-          </ButtonV2>
-          <ButtonV2 type="submit" variant="contrast" disabled={!model.supported || model.save.isPending}>
-            {model.save.isPending ? language.t("common.saving") : language.t("common.save")}
-          </ButtonV2>
-        </DialogFooter>
-      </form>
+              <Show when={!model.store.iconOverride}>
+                <div class="flex w-full flex-col gap-2">
+                  <div class="select-none text-[13px] font-[530] leading-none 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>
+        </TabsV2.Content>
+
+        <TabsV2.Content value="scripts" class="project-settings-v2-panel">
+          <form onSubmit={model.submit} class="project-settings-v2-form">
+            <div class="project-settings-v2-scroll">
+              <div class="project-settings-page-header">
+                <h2>{language.t("project.settings.scripts")}</h2>
+                <span>{language.t("project.settings.scripts.description")}</span>
+              </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>
+                <TextareaV2
+                  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>
+        </TabsV2.Content>
+
+        <TabsV2.Content value="extensions" class="project-settings-v2-panel">
+          <ProjectSettingsExtensions />
+        </TabsV2.Content>
+      </TabsV2>
    </Dialog>
  )
 }
@@ -0,0 +1,240 @@
+import { Icon } from "@opencode-ai/ui/icon"
+import { Switch } from "@opencode-ai/ui/v2/switch-v2"
+import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
+import { type Component, For, Show, createMemo, createResource, createSignal } from "solid-js"
+import { useLanguage } from "@/context/language"
+import { useMcpToggle } from "@/context/mcp"
+import { useSDK } from "@/context/sdk"
+import { useServerSDK } from "@/context/server-sdk"
+import { useServerSync } from "@/context/server-sync"
+import { useSync } from "@/context/sync"
+import { ExternalLink } from "./external-link"
+
+type SkillItem = {
+  name: string
+  location: string
+}
+
+const pluginName = (item: string | [string, Record<string, unknown>]) => (typeof item === "string" ? item : item[0])
+const skillKey = (item: SkillItem) => `${item.name}\n${item.location}`
+
+const ExtensionCard: Component<{ children: unknown }> = (props) => (
+  <div class="project-settings-extension-card">{props.children as any}</div>
+)
+
+const ExtensionRow: Component<{
+  icon: "mcp" | "cube" | "post-skill" | "code"
+  name: string
+  status?: string
+  children?: unknown
+}> = (props) => (
+  <div class="project-settings-extension-row">
+    <div class="project-settings-extension-row-main">
+      <Icon name={props.icon} class="project-settings-extension-row-icon" />
+      <span class="project-settings-extension-row-name">{props.name}</span>
+    </div>
+    <Show when={props.status}>
+      {(status) => (
+        <span class="project-settings-extension-row-status">
+          <span class="project-settings-extension-row-status-dot" />
+          {status()}
+        </span>
+      )}
+    </Show>
+    {props.children as any}
+  </div>
+)
+
+const SharedSection: Component<{
+  count: number
+  children: unknown
+}> = (props) => {
+  const language = useLanguage()
+  const [open, setOpen] = createSignal(false)
+  return (
+    <Show when={props.count > 0}>
+      <div class="project-settings-shared">
+        <button
+          type="button"
+          class="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>
+        </button>
+        <Show when={open()}>
+          <ExtensionCard>{props.children}</ExtensionCard>
+        </Show>
+      </div>
+    </Show>
+  )
+}
+
+export const ProjectSettingsExtensions: Component = () => {
+  const language = useLanguage()
+  const serverSDK = useServerSDK()
+  const directorySDK = useSDK()
+  const serverSync = useServerSync()
+  const sync = useSync()
+  const toggleMcp = useMcpToggle()
+
+  const [serverMcp] = createResource(
+    serverSDK,
+    (sdk) =>
+      sdk.api.mcp
+        .list()
+        .then((result) => Object.fromEntries(result.data.map((server) => [server.name, server.status])))
+        .catch(() => ({})),
+    { initialValue: {} },
+  )
+  const globalMcpNames = createMemo(() =>
+    [...new Set([...Object.keys(serverSync().data.config.mcp ?? {}), ...Object.keys(serverMcp.latest)])].sort(),
+  )
+  const projectMcpNames = createMemo(() => {
+    const shared = new Set(globalMcpNames())
+    const configured = Object.keys(sync().data.config.mcp ?? {}).filter((name) => !shared.has(name))
+    if (configured.length > 0) return configured.sort()
+    return Object.keys(sync().data.mcp ?? {})
+      .filter((name) => !shared.has(name))
+      .sort()
+  })
+  const mcpEnabled = (name: string) => sync().data.mcp?.[name]?.status === "connected"
+
+  const globalPlugins = createMemo(() => (serverSync().data.config.plugin ?? []).map(pluginName))
+  const projectPlugins = createMemo(() => {
+    const shared = new Set(globalPlugins())
+    return (sync().data.config.plugin ?? []).map(pluginName).filter((name) => !shared.has(name))
+  })
+
+  const [serverSkills] = createResource(
+    serverSDK,
+    (sdk): Promise<SkillItem[]> =>
+      sdk.api.skill
+        .list()
+        .then((result) => result.data.map((item) => ({ name: item.name, location: item.location }))),
+    { initialValue: [] },
+  )
+  const [directorySkills] = createResource(
+    directorySDK,
+    (sdk): Promise<SkillItem[]> =>
+      sdk.api.skill
+        .list({ location: { directory: sdk.directory } })
+        .then((result) => result.data.map((item) => ({ name: item.name, location: item.location }))),
+    { initialValue: [] },
+  )
+  const projectSkills = createMemo(() => {
+    const shared = new Set(serverSkills.latest.map(skillKey))
+    return directorySkills.latest.filter((item) => !shared.has(skillKey(item)))
+  })
+
+  const mcpRows = (items: string[]) => (
+    <For each={items}>
+      {(name) => (
+        <ExtensionRow icon="mcp" name={name}>
+          <Switch
+            checked={mcpEnabled(name)}
+            disabled={toggleMcp.isPending && toggleMcp.variables === name}
+            hideLabel
+            onChange={() => {
+              if (toggleMcp.isPending) return
+              toggleMcp.mutate(name)
+            }}
+          >
+            {name}
+          </Switch>
+        </ExtensionRow>
+      )}
+    </For>
+  )
+
+  const pluginRows = (items: string[]) => <For each={items}>{(name) => <ExtensionRow icon="cube" name={name} />}</For>
+
+  const skillRows = (items: SkillItem[]) => (
+    <For each={items}>{(item) => <ExtensionRow icon="post-skill" name={item.name} />}</For>
+  )
+
+  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>
+
+      <TabsV2 variant="pill" defaultValue="mcps" class="project-settings-extension-tabs">
+        <TabsV2.List>
+          <TabsV2.Trigger value="mcps">{language.t("settings.extensions.tab.mcps")}</TabsV2.Trigger>
+          <TabsV2.Trigger value="plugins">{language.t("status.popover.tab.plugins")}</TabsV2.Trigger>
+          <TabsV2.Trigger value="skills">{language.t("settings.extensions.tab.skills")}</TabsV2.Trigger>
+          <TabsV2.Trigger value="lsps">{language.t("project.settings.extensions.tab.lsps")}</TabsV2.Trigger>
+        </TabsV2.List>
+
+        <TabsV2.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>
+            </div>
+            <Show when={projectMcpNames().length > 0}>
+              <ExtensionCard>{mcpRows(projectMcpNames())}</ExtensionCard>
+            </Show>
+            <SharedSection count={globalMcpNames().length}>{mcpRows(globalMcpNames())}</SharedSection>
+          </div>
+        </TabsV2.Content>
+
+        <TabsV2.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>
+            </div>
+            <Show when={projectPlugins().length > 0}>
+              <ExtensionCard>{pluginRows(projectPlugins())}</ExtensionCard>
+            </Show>
+            <SharedSection count={globalPlugins().length}>{pluginRows(globalPlugins())}</SharedSection>
+          </div>
+        </TabsV2.Content>
+
+        <TabsV2.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>
+            </div>
+            <Show when={projectSkills().length > 0}>
+              <ExtensionCard>{skillRows(projectSkills())}</ExtensionCard>
+            </Show>
+            <SharedSection count={serverSkills.latest.length}>{skillRows(serverSkills.latest)}</SharedSection>
+          </div>
+        </TabsV2.Content>
+
+        <TabsV2.Content value="lsps">
+          <div class="project-settings-extension-section">
+            <div class="project-settings-extension-section-header">
+              <span>{language.t("project.settings.extensions.lsp.detected")}</span>
+              <span>{language.t("project.settings.extensions.lsp.description")}</span>
+            </div>
+            <Show when={sync().data.lsp.length > 0}>
+              <ExtensionCard>
+                <For each={sync().data.lsp}>
+                  {(item) => (
+                    <ExtensionRow
+                      icon="code"
+                      name={item.name || item.id}
+                      status={
+                        item.status === "error" ? language.t("project.settings.extensions.setupRequired") : undefined
+                      }
+                    />
+                  )}
+                </For>
+              </ExtensionCard>
+            </Show>
+          </div>
+        </TabsV2.Content>
+      </TabsV2>
+    </div>
+  )
+}
@@ -9,7 +9,7 @@ import { ServerConnection } from "@/context/server"
 export const ServerRowMenu: Component<{
  server: ServerConnection.Any
  domain: ServerActionsController
-  onEdit: (server: ServerConnection.Http) => void
+  onEdit: (server: ServerConnection.Any) => void
  open?: boolean
  onOpenChange?: (open: boolean) => void
 }> = (props) => {
@@ -49,7 +49,7 @@ export const ServerRowMenuView: Component<{
  canDefault: boolean
  isDefault: boolean
  canRemove: boolean
-  onEdit: (server: ServerConnection.Http) => void
+  onEdit: (server: ServerConnection.Any) => void
  onSetDefault: () => void
  onRemoveDefault: () => void
  onRemove: () => void
@@ -57,7 +57,6 @@ export const ServerRowMenuView: Component<{
  onOpenChange?: (open: boolean) => void
 }> = (props) => {
  const builtin = () => ServerConnection.builtin(props.server)
-  const httpServer = () => (props.server.type === "http" ? props.server : undefined)
  return (
    <MenuV2 gutter={6} modal={false} placement="bottom-end" open={props.open} onOpenChange={props.onOpenChange}>
      <MenuV2.Trigger
@@ -71,15 +70,7 @@ export const ServerRowMenuView: Component<{
        <MenuV2.Content>
          <MenuV2.Group>
            <MenuV2.GroupLabel>{props.labels.server}</MenuV2.GroupLabel>
-            <MenuV2.Item
-              disabled={builtin() || !httpServer()}
-              onSelect={() => {
-                const server = httpServer()
-                if (server) props.onEdit(server)
-              }}
-            >
-              {props.labels.edit}
-            </MenuV2.Item>
+            <MenuV2.Item onSelect={() => props.onEdit(props.server)}>{props.labels.edit}</MenuV2.Item>
            <Show when={props.canDefault && !props.isDefault}>
              <MenuV2.Item onSelect={props.onSetDefault}>{props.labels.default}</MenuV2.Item>
            </Show>
@@ -451,7 +451,10 @@ function SettingsKeybindsV2View(props: {
    <>
      <div class="settings-v2-tab-header settings-v2-tab-header--stacked">
        <div class="settings-v2-tab-header-row">
-          <h2 class="settings-v2-tab-title">{language.t("settings.shortcuts.title")}</h2>
+          <div class="flex flex-col gap-1">
+            <h2 class="settings-v2-tab-title">{language.t("settings.shortcuts.title")}</h2>
+            <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.shortcuts.description")}</span>
+          </div>
          <ButtonV2 variant="ghost" onClick={props.onReset} disabled={!props.hasOverrides()}>
            {language.t("settings.shortcuts.reset.button")}
          </ButtonV2>
@@ -1,33 +1,23 @@
-import { Button } from "@opencode-ai/ui/button"
-import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
-import { Icon } from "@opencode-ai/ui/icon"
 import { QueryClientProvider } from "@tanstack/solid-query"
-import { createMemo, For, type ParentProps, Show } from "solid-js"
-import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row"
+import { type ParentProps, Show } from "solid-js"
+import { useGlobal } from "@/context/global"
 import { ModelsProvider } from "@/context/models"
 import { ServerConnection } from "@/context/server"
 import { ServerSDKProvider } from "@/context/server-sdk"
 import { ServerSyncProvider } from "@/context/server-sync"
-import { useGlobal } from "@/context/global"
-import { useSettings } from "@/context/settings"

 export function SettingsServerScope(props: ParentProps) {
  const global = useGlobal()
-  const settings = useSettings()
-
  return (
-    <Show when={settings.general.newLayoutDesigns()} fallback={props.children}>
-      <Show when={global.settings.server.selected()} keyed>
-        {(server) => <SettingsServerDataProviders server={server}>{props.children}</SettingsServerDataProviders>}
-      </Show>
+    <Show when={global.settings.server.selected()} keyed fallback={props.children}>
+      {(server) => <SettingsServerDataScope server={server}>{props.children}</SettingsServerDataScope>}
    </Show>
  )
 }

-function SettingsServerDataProviders(props: ParentProps<{ server: ServerConnection.Any }>) {
+export function SettingsServerDataScope(props: ParentProps<{ server: ServerConnection.Any }>) {
  const global = useGlobal()
  const serverCtx = () => global.ensureServerCtx(props.server)
-
  return (
    <QueryClientProvider client={serverCtx().queryClient}>
      <ServerSDKProvider server={() => props.server}>
@@ -38,69 +28,3 @@ function SettingsServerDataProviders(props: ParentProps<{ server: ServerConnecti
    </QueryClientProvider>
  )
 }
-
-export function SettingsServerPicker() {
-  const global = useGlobal()
-  const settings = useSettings()
-  const selected = createMemo(() =>
-    settings.general.newLayoutDesigns() ? global.settings.server.selected() : undefined,
-  )
-
-  return (
-    <Show when={selected()}>
-      {(conn) => (
-        <DropdownMenu gutter={4} placement="bottom-end">
-          <DropdownMenu.Trigger
-            as={Button}
-            variant="secondary"
-            size="large"
-            class="h-8 max-w-[260px] gap-2 px-2 py-1.5 data-[expanded]:bg-surface-base-active"
-          >
-            <ServerHealthIndicator health={global.servers.health[ServerConnection.key(conn())]} />
-            <ServerRow
-              conn={conn()}
-              status={global.servers.health[ServerConnection.key(conn())]}
-              class="flex items-center gap-2 min-w-0 flex-1"
-              nameClass="text-14-regular text-text-base truncate"
-              versionClass="hidden"
-            />
-            <Icon name="chevron-down" size="small" class="text-icon-weak shrink-0" />
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Portal>
-            <DropdownMenu.Content class="w-[320px] mt-1 [&_[data-slot=dropdown-menu-radio-item]]:pl-2 [&_[data-slot=dropdown-menu-radio-item]]:pr-2">
-              <DropdownMenu.RadioGroup
-                value={global.settings.server.key}
-                onChange={(key) => {
-                  if (typeof key === "string") global.settings.server.set(ServerConnection.Key.make(key))
-                }}
-              >
-                <For each={global.servers.list()}>
-                  {(item) => {
-                    const key = ServerConnection.key(item)
-                    const blocked = () => global.servers.health[key]?.healthy === false
-                    return (
-                      <DropdownMenu.RadioItem value={key} disabled={blocked()}>
-                        <ServerHealthIndicator health={global.servers.health[key]} />
-                        <ServerRow
-                          conn={item}
-                          dimmed={blocked()}
-                          status={global.servers.health[key]}
-                          class="flex items-center gap-2 min-w-0 flex-1"
-                          nameClass="text-14-regular text-text-base truncate"
-                          versionClass="text-12-regular text-text-weak truncate"
-                        />
-                        <DropdownMenu.ItemIndicator>
-                          <Icon name="check-small" size="small" class="text-icon-weak" />
-                        </DropdownMenu.ItemIndicator>
-                      </DropdownMenu.RadioItem>
-                    )
-                  }}
-                </For>
-              </DropdownMenu.RadioGroup>
-            </DropdownMenu.Content>
-          </DropdownMenu.Portal>
-        </DropdownMenu>
-      )}
-    </Show>
-  )
-}
@@ -1,9 +1,7 @@
-import { Component, Show, createMemo, createResource } from "solid-js"
+import { Component, createMemo } from "solid-js"
 import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
-import { Switch } from "@opencode-ai/ui/v2/switch-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { useLanguage } from "@/context/language"
-import { usePlatform } from "@/context/platform"
 import { ExternalLink } from "../external-link"
 import { SettingsListV2 } from "./parts/list"
 import { SettingsRowV2 } from "./parts/row"
@@ -65,28 +63,16 @@ const FontSetting: Component<{

 export const SettingsAppearanceV2: Component = () => {
  const language = useLanguage()
-  const platform = usePlatform()
  const appearance = createAppearanceSettingsController()
-  const desktop = createMemo(() => platform.platform === "desktop")
-
-  const [pinchZoom, { mutate: setPinchZoom }] = createResource(
-    () => desktop() && "getPinchZoomEnabled" in platform,
-    () => Promise.resolve(platform.getPinchZoomEnabled?.() ?? false).catch(() => false),
-    { initialValue: false },
-  )
-
-  const onPinchZoomChange = (checked: boolean) => {
-    setPinchZoom(checked)
-    const update = platform.setPinchZoomEnabled?.(checked)
-    if (!update) return
-    void update.catch(() => setPinchZoom(!checked))
-  }

  return (
    <>
      <div class="settings-v2-tab-header">
        <div class="settings-v2-tab-header-row">
-          <h2 class="settings-v2-tab-title">{language.t("settings.general.section.appearance")}</h2>
+          <div class="flex flex-col gap-1">
+            <h2 class="settings-v2-tab-title">{language.t("settings.general.section.appearance")}</h2>
+            <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.appearance.description")}</span>
+          </div>
        </div>
      </div>

@@ -142,22 +128,6 @@ export const SettingsAppearanceV2: Component = () => {
            <FontSetting kind="terminal" fonts={appearance.fonts} />
          </SettingsListV2>
        </div>
-
-        <Show when={desktop()}>
-          <div class="settings-v2-section">
-            <h3 class="settings-v2-section-title">{language.t("settings.general.section.display")}</h3>
-            <SettingsListV2>
-              <SettingsRowV2
-                title={language.t("settings.general.row.pinchZoom.title")}
-                description={language.t("settings.general.row.pinchZoom.description")}
-              >
-                <div data-action="settings-pinch-zoom">
-                  <Switch checked={pinchZoom.latest} onChange={onPinchZoomChange} />
-                </div>
-              </SettingsRowV2>
-            </SettingsListV2>
-          </div>
-        </Show>
      </div>
    </>
  )
@@ -50,11 +50,8 @@ export const SettingsExtensionsV2: Component = () => {
  })

  const [skills] = createResource(
-    () => serverSdk(),
-    async (sdk) => {
-      const result = await sdk.client.v2.skill.list(undefined, { throwOnError: true })
-      return result.data.data
-    },
+    serverSdk,
+    (sdk) => sdk.api.skill.list().then((result) => result.data),
    { initialValue: [] },
  )

@@ -64,7 +61,7 @@ export const SettingsExtensionsV2: Component = () => {
        <div class="settings-v2-tab-header-row">
          <div class="flex flex-col gap-1">
            <h2 class="settings-v2-tab-title">{language.t("settings.tab.extensions")}</h2>
-            <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.mcps.description")}</span>
+            <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.extensions.description")}</span>
          </div>
          <InlineServerSelect />
        </div>
@@ -73,9 +70,9 @@ export const SettingsExtensionsV2: Component = () => {
      <div class="settings-v2-tab-body">
        <TabsV2 variant="pill" defaultValue="mcps" class="settings-v2-extensions-tabs">
          <TabsV2.List>
-            <TabsV2.Trigger value="mcps">{language.t("status.popover.tab.mcp")}</TabsV2.Trigger>
+            <TabsV2.Trigger value="mcps">{language.t("settings.extensions.tab.mcps")}</TabsV2.Trigger>
            <TabsV2.Trigger value="plugins">{language.t("status.popover.tab.plugins")}</TabsV2.Trigger>
-            <TabsV2.Trigger value="skills">{language.t("settings.permissions.tool.skill.title")}</TabsV2.Trigger>
+            <TabsV2.Trigger value="skills">{language.t("settings.extensions.tab.skills")}</TabsV2.Trigger>
          </TabsV2.List>

          <TabsV2.Content value="mcps">
@@ -279,8 +279,6 @@ export const SettingsGeneralV2: Component<{
  const updater = useUpdaterAction()
  const permissionScope = createPermissionScopeController(() => props.sessionID)
  const shell = createShellSettingsController()
-  const appearance = createAppearanceSettingsController()
-  const sounds = createSoundSettingsController()
  const desktop = createMemo(() => platform.platform === "desktop")

  const [pinchZoom, { mutate: setPinchZoom }] = createResource(
@@ -298,6 +296,7 @@ export const SettingsGeneralV2: Component<{

  const GeneralSection = () => (
    <div class="settings-v2-section">
+      <h3 class="settings-v2-section-title">{language.t("settings.general.section.general")}</h3>
      <SettingsListV2>
        <LanguageSetting />

@@ -510,18 +509,19 @@ export const SettingsGeneralV2: Component<{
  return (
    <>
      <div class="settings-v2-tab-header">
-        <h2 class="settings-v2-tab-title">{language.t("settings.tab.general")}</h2>
+        <div class="settings-v2-tab-header-row">
+          <div class="flex flex-col gap-1">
+            <h2 class="settings-v2-tab-title">{language.t("settings.tab.preferences")}</h2>
+            <span class="text-11-regular text-v2-text-text-muted">
+              {language.t("settings.preferences.description")}
+            </span>
+          </div>
+        </div>
      </div>

      <div class="settings-v2-tab-body">
        <GeneralSection />

-        <AppearanceSection controller={appearance} />
-
-        <NotificationsSection />
-
-        <SoundsSection controller={sounds} />
-
        <Show when={desktop()}>
          <UpdatesSection />
        </Show>
@@ -55,7 +55,10 @@ export const SettingsModelsV2: Component = () => {
    <>
      <div class="settings-v2-tab-header settings-v2-tab-header--stacked">
        <div class="settings-v2-tab-header-row">
-          <h2 class="settings-v2-tab-title">{language.t("settings.models.title")}</h2>
+          <div class="flex flex-col gap-1">
+            <h2 class="settings-v2-tab-title">{language.t("settings.models.title")}</h2>
+            <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.models.description")}</span>
+          </div>
          <InlineServerSelect />
        </div>
        <div class="settings-v2-tab-search">
@@ -59,12 +59,18 @@ export const SettingsNotificationsV2: Component = () => {
    <>
      <div class="settings-v2-tab-header">
        <div class="settings-v2-tab-header-row">
-          <h2 class="settings-v2-tab-title">{language.t("settings.tab.notifications")}</h2>
+          <div class="flex flex-col gap-1">
+            <h2 class="settings-v2-tab-title">{language.t("settings.tab.notifications")}</h2>
+            <span class="text-11-regular text-v2-text-text-muted">
+              {language.t("settings.notifications.description")}
+            </span>
+          </div>
        </div>
      </div>

      <div class="settings-v2-tab-body">
        <div class="settings-v2-section">
+          <h3 class="settings-v2-section-title">{language.t("settings.general.section.notifications")}</h3>
          <SettingsListV2>
            <SettingsRowV2
              title={language.t("settings.general.notifications.agent.title")}
@@ -1,25 +1,47 @@
-import { Show, type Component } from "solid-js"
+import { Show, createMemo, type Component } from "solid-js"
 import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
 import { useGlobal } from "@/context/global"
 import { ServerConnection, serverName } from "@/context/server"

-export const InlineServerSelect: Component = () => {
+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={global.servers.list().length > 1}>
+    <Show when={options().length > 1}>
      <SelectV2
        appearance="inline"
        data-action="settings-server-select"
-        options={global.servers.list()}
-        current={global.settings.server.selected()}
-        value={ServerConnection.key}
-        label={(server) => serverName(server) || ServerConnection.key(server)}
-        optionDisabled={(server) => global.servers.health[ServerConnection.key(server)]?.healthy === false}
+        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) global.settings.server.set(ServerConnection.key(server))
+          if (!server) return
+          if (server.type === "all") {
+            props.all?.onSelect()
+            return
+          }
+          global.settings.server.set(ServerConnection.key(server))
+          props.onServerSelect?.()
        }}
      />
    </Show>
@@ -1,4 +1,4 @@
-import { Component, For, Show, createMemo } from "solid-js"
+import { Component, For, Show, createMemo, createSignal } from "solid-js"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
@@ -6,6 +6,7 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useLanguage } from "@/context/language"
 import { useGlobal } from "@/context/global"
 import { getProjectAvatarVariant } from "@/context/layout"
+import { ServerConnection, serverName } from "@/context/server"
 import { displayName } from "@/pages/layout/helpers"
 import { InlineServerSelect } from "./parts/server-select"
 import { DialogEditProjectV2 } from "../dialog-edit-project-v2"
@@ -15,6 +16,7 @@ export const SettingsProjectsV2: Component = () => {
  const dialog = useDialog()
  const language = useLanguage()
  const global = useGlobal()
+  const [allServers, setAllServers] = createSignal(true)
  const selected = global.settings.server.selected
  const projects = createMemo(() => {
    const server = selected()
@@ -22,12 +24,48 @@ export const SettingsProjectsV2: Component = () => {
    return global.ensureServerCtx(server).projects.list()
  })

-  const openProjectSettings = (project: ReturnType<typeof projects>[number]) => {
-    const server = selected()
+  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),
+  )
+
+  const openProjectSettings = (project: ProjectItem, server = selected()) => {
    if (!server) return
    dialog.push(() => <DialogEditProjectV2 project={project} server={server} />)
  }

+  const ProjectRow: Component<{ project: ProjectItem; server: ServerConnection.Any }> = (props) => {
+    const name = () => displayName(props.project)
+    const color = () => getProjectAvatarVariant(props.project.icon?.color)
+    return (
+      <div
+        class="group flex items-center justify-between gap-5 px-4 py-2.5 rounded-lg bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)] cursor-pointer 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">
+          <ProjectAvatar fallback={name()} variant={color()} 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">
+          <IconButtonV2
+            type="button"
+            variant="ghost-muted"
+            size="small"
+            icon={<IconV2 name="settings-gear" size="small" class="text-v2-icon-icon-muted" />}
+            onClick={(event: MouseEvent) => {
+              event.stopPropagation()
+              openProjectSettings(props.project, props.server)
+            }}
+          />
+        </div>
+      </div>
+    )
+  }
+
  return (
    <>
      <div class="settings-v2-tab-header">
@@ -36,52 +74,65 @@ export const SettingsProjectsV2: Component = () => {
            <h2 class="settings-v2-tab-title">{language.t("settings.projects.title")}</h2>
            <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.projects.description")}</span>
          </div>
-          <InlineServerSelect />
+          <InlineServerSelect
+            all={{
+              label: language.t("settings.projects.server.all"),
+              selected: allServers,
+              onSelect: () => setAllServers(true),
+            }}
+            onServerSelect={() => setAllServers(false)}
+          />
        </div>
      </div>

      <div class="settings-v2-tab-body">
-        <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>
-            }
-          >
-            <For each={projects()}>
-              {(project) => {
-                const name = () => displayName(project)
-                const color = () => getProjectAvatarVariant(project.icon?.color)
-
-                return (
-                  <div
-                    class="group flex items-center justify-between gap-5 px-4 py-2.5 rounded-lg bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)] cursor-pointer transition-all hover:bg-v2-background-bg-layer-01"
-                    onClick={() => openProjectSettings(project)}
-                  >
-                    <div class="flex items-center gap-2.5 min-w-0 flex-1">
-                      <ProjectAvatar fallback={name()} variant={color()} 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">
-                      <IconButtonV2
-                        type="button"
-                        variant="ghost-muted"
-                        size="small"
-                        icon={<IconV2 name="settings-gear" size="small" class="text-v2-icon-icon-muted" />}
-                        onClick={(e: MouseEvent) => {
-                          e.stopPropagation()
-                          openProjectSettings(project)
-                        }}
-                      />
+        <Show
+          when={allServers()}
+          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) => (
+                    <For each={projects()}>{(project) => <ProjectRow project={project} server={server} />}</For>
+                  )}
+                </Show>
+              </Show>
+            </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-v2-section">
+                    <h3 class="settings-v2-section-title">
+                      {serverName(group.server) || ServerConnection.key(group.server)}
+                    </h3>
+                    <div class="flex flex-col gap-2 w-full">
+                      <For each={group.projects}>
+                        {(project) => <ProjectRow project={project} server={group.server} />}
+                      </For>
                    </div>
                  </div>
-                )
-              }}
-            </For>
-          </Show>
-        </div>
+                )}
+              </For>
+            </Show>
+          </div>
+        </Show>
      </div>
    </>
  )
@@ -148,7 +148,10 @@ export const SettingsProvidersV2: Component<{
    <>
      <div class="settings-v2-tab-header">
        <div class="settings-v2-tab-header-row">
-          <h2 class="settings-v2-tab-title">{language.t("settings.providers.title")}</h2>
+          <div class="flex flex-col gap-1">
+            <h2 class="settings-v2-tab-title">{language.t("settings.providers.title")}</h2>
+            <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.providers.description")}</span>
+          </div>
          <InlineServerSelect />
        </div>
      </div>
@@ -42,10 +42,15 @@ export const SettingsServersV2: Component = () => {
    void dialog.push(() => <DialogServerV2 mode="add" />)
  }

-  const openEdit = (server: ServerConnection.Http) => {
+  const openEdit = (server: ServerConnection.Any) => {
    void dialog.push(() => <DialogServerV2 mode="edit" server={server} />)
  }

+  const openWslEdit = (key: ServerConnection.Key) => {
+    const item = controller.collection.items().find((candidate) => ServerConnection.key(candidate) === key)
+    if (item) openEdit(item)
+  }
+
  return (
    <>
      <div
@@ -53,7 +58,10 @@ export const SettingsServersV2: Component = () => {
        classList={{ "settings-v2-tab-header--stacked": showSearch() }}
      >
        <div class="settings-v2-tab-header-row">
-          <h2 class="settings-v2-tab-title">{language.t("status.popover.tab.servers")}</h2>
+          <div class="flex flex-col gap-1">
+            <h2 class="settings-v2-tab-title">{language.t("status.popover.tab.servers")}</h2>
+            <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.servers.description")}</span>
+          </div>
          <AddServerMenu onAddServer={openAdd} />
        </div>
        <Show when={showSearch()}>
@@ -97,7 +105,7 @@ export const SettingsServersV2: Component = () => {
          }
        >
          <SettingsListV2>
-            <WslServerSettings domain={controller} servers={wslServers} />
+            <WslServerSettings domain={controller} servers={wslServers} onEdit={openWslEdit} />
            <For each={filtered()}>
              {(item) => {
                const key = ServerConnection.key(item)
@@ -736,19 +736,23 @@
  color: var(--v2-state-fg-danger);
 }

-.settings-v2-extensions-tabs [data-slot="tabs-v2-list"] {
+.settings-v2-extensions-tabs[data-component="tabs-v2"][data-variant="pill"] > [data-slot="tabs-v2-list"] {
  width: 280px;
-  padding-inline: 0;
+  padding-inline: 0 !important;
 }

-.settings-v2-extensions-tabs [data-slot="tabs-v2-list"]::before {
+.settings-v2-extensions-tabs[data-component="tabs-v2"][data-variant="pill"] > [data-slot="tabs-v2-list"]::before {
  display: none;
 }

-.settings-v2-extensions-tabs [data-slot="tabs-v2-trigger-wrapper"] {
+.settings-v2-extensions-tabs[data-component="tabs-v2"][data-variant="pill"]
+  > [data-slot="tabs-v2-list"]
+  [data-slot="tabs-v2-trigger-wrapper"] {
  border-radius: 6px;
 }

-.settings-v2-extensions-tabs [data-slot="tabs-v2-trigger"] {
+.settings-v2-extensions-tabs[data-component="tabs-v2"][data-variant="pill"]
+  > [data-slot="tabs-v2-list"]
+  [data-slot="tabs-v2-trigger"] {
  padding-inline: 8px;
 }
@@ -897,20 +897,41 @@ export const dict = {
  "settings.tab.notifications": "Notifications",
  "settings.tab.projects": "Projects",
  "settings.tab.extensions": "Extensions",
+  "settings.preferences.description": "Customize preferences and theme and default behavior",
+  "settings.appearance.description": "Customize theme and fonts",
+  "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.projects.title": "Projects",
-  "settings.projects.description": "View and configure projects on this server",
+  "settings.projects.description": "Manage project settings on this server",
  "settings.projects.empty": "No projects found",
+  "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",
+  "settings.extensions.tab.mcps": "MCPs",
+  "settings.extensions.tab.skills": "Skills",
  "settings.extensions.availableAll": "Available to all projects",
  "settings.extensions.manageConfig": "Manage in opencode.json",
  "settings.extensions.addSkills": "How to add skills",
  "settings.desktop.section.wsl": "WSL",
  "settings.desktop.wsl.title": "WSL integration",
  "settings.desktop.wsl.description": "Run the OpenCode server inside WSL on Windows.",
+  "dialog.server.authenticate.title": "Authenticate",
+  "project.settings.general.description": "Manage project name and appearance",
+  "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.lsp.detected": "Detected language servers",
+  "project.settings.extensions.lsp.description": "Auto-detected from file types",
+  "project.settings.extensions.setupRequired": "Setup required",

  "settings.general.section.appearance": "Appearance",
+  "settings.general.section.general": "General",
  "settings.general.section.advanced": "Advanced",
-  "settings.general.section.notifications": "System notifications",
+  "settings.general.section.notifications": "Desktop notifications",
  "settings.general.section.updates": "Updates",
  "settings.general.section.sounds": "Sound effects",
  "settings.general.section.feed": "Feed",
@@ -1071,7 +1092,7 @@ export const dict = {
  "settings.shortcuts.group.prompt": "Prompt",

  "settings.providers.title": "Providers",
-  "settings.providers.description": "Provider settings will be configurable here.",
+  "settings.providers.description": "Connect and manage model providers",
  "settings.providers.section.connected": "Connected providers",
  "settings.providers.connected.empty": "No connected providers",
  "settings.providers.connected.environmentDescription": "Connected from your environment variables",
@@ -1082,7 +1103,7 @@ export const dict = {
  "settings.providers.tag.custom": "Custom",
  "settings.providers.tag.other": "Other",
  "settings.models.title": "Models",
-  "settings.models.description": "Model settings will be configurable here.",
+  "settings.models.description": "Choose which models appear in model picker",
  "settings.agents.title": "Agents",
  "settings.agents.description": "Agent settings will be configurable here.",
  "settings.commands.title": "Commands",
@@ -87,13 +87,34 @@ const appFallbackKeys = new Set([
  "settings.tab.notifications",
  "settings.tab.projects",
  "settings.tab.extensions",
+  "settings.preferences.description",
+  "settings.appearance.description",
+  "settings.notifications.description",
+  "settings.shortcuts.description",
+  "settings.servers.description",
  "settings.projects.title",
  "settings.projects.description",
  "settings.projects.empty",
+  "settings.projects.server.all",
  "settings.mcps.description",
+  "settings.extensions.description",
+  "settings.extensions.tab.mcps",
+  "settings.extensions.tab.skills",
  "settings.extensions.availableAll",
  "settings.extensions.manageConfig",
  "settings.extensions.addSkills",
+  "settings.general.section.general",
+  "dialog.server.authenticate.title",
+  "project.settings.general.description",
+  "project.settings.scripts",
+  "project.settings.scripts.description",
+  "project.settings.extensions.description",
+  "project.settings.extensions.tab.lsps",
+  "project.settings.extensions.added",
+  "project.settings.extensions.shared",
+  "project.settings.extensions.lsp.detected",
+  "project.settings.extensions.lsp.description",
+  "project.settings.extensions.setupRequired",
 ])

 const domains = [
@@ -62,7 +62,7 @@ export function createHomeProjectsController(home: HomeController) {
        serverManagement.defaults.set(conn ? ServerConnection.key(conn) : null),
      canRemove: (conn: ServerConnection.Any) => serverManagement.connection.canRemove(ServerConnection.key(conn)),
      remove: (conn: ServerConnection.Any) => serverManagement.connection.remove(ServerConnection.key(conn)),
-      edit: (conn: ServerConnection.Http) => dialog.show(() => <DialogServerV2 mode="edit" server={conn} />),
+      edit: (conn: ServerConnection.Any) => dialog.show(() => <DialogServerV2 mode="edit" server={conn} />),
      focus: home.selection.focusServer,
    },
    project: {
@@ -45,7 +45,7 @@ export type HomeProjectsViewProps = {
  onChooseProject: (server: ServerConnection.Any) => void
  onFocusServer: (server: ServerConnection.Any) => void
  onToggleCollapsed: (server: ServerConnection.Any) => void
-  onEditServer: (server: ServerConnection.Http) => void
+  onEditServer: (server: ServerConnection.Any) => void
  onSetDefaultServer: (server: ServerConnection.Any | undefined) => void
  canRemoveServer: (server: ServerConnection.Any) => boolean
  onRemoveServer: (server: ServerConnection.Any) => void
@@ -67,6 +67,7 @@ export function useFilteredWslServers(filter: Accessor<string>) {
 export function WslServerSettings(props: {
  domain: Pick<ServerCollectionController, "collection" | "defaults" | "connection">
  servers: ReturnType<typeof useFilteredWslServers>
+  onEdit: (key: ServerConnection.Key) => void
 }) {
  const platform = usePlatform()
  const language = useLanguage()
@@ -138,6 +139,9 @@ export function WslServerSettings(props: {
                    <MenuV2.Content>
                      <MenuV2.Group>
                        <MenuV2.GroupLabel>{language.t("wsl.server.menu.label")}</MenuV2.GroupLabel>
+                        <MenuV2.Item onSelect={() => props.onEdit(key)}>
+                          {language.t("dialog.server.menu.edit")}
+                        </MenuV2.Item>
                        <Show when={wslRuntimeRetryable(item.runtime)}>
                          <MenuV2.Item onSelect={() => api && request.mutate(() => api.startServer(key))}>
                            {language.t("wsl.server.retryStart")}