diff --git a/apps/app/src/react-app/domains/session/modals/model-picker-modal-components.tsx b/apps/app/src/react-app/domains/session/modals/model-picker-modal-components.tsx
new file mode 100644
index 000000000..d26ab9422
--- /dev/null
+++ b/apps/app/src/react-app/domains/session/modals/model-picker-modal-components.tsx
@@ -0,0 +1,414 @@
+/** @jsxImportSource react */
+import type { KeyboardEvent as ReactKeyboardEvent, RefObject } from "react";
+import { CheckCircle2, Circle, Search, X } from "lucide-react";
+
+import { t } from "../../../../i18n";
+import { modelEquals } from "../../../../app/utils";
+import type { ModelOption, ModelRef } from "../../../../app/types";
+
+function ProviderIcon({
+  providerId,
+  size = 16,
+  className,
+}: {
+  providerId: string;
+  size?: number;
+  className?: string;
+}) {
+  const initial = providerId.trim().charAt(0).toUpperCase() || "?";
+  return (
+    <span
+      aria-hidden
+      className={className}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: size,
+        height: size,
+        fontSize: Math.round(size * 0.65),
+        fontWeight: 600,
+      }}
+    >
+      {initial}
+    </span>
+  );
+}
+
+export type ProviderLinkItem = {
+  providerID: string;
+  title: string;
+  matchCount: number;
+  index: number;
+};
+
+export function ModelPickerDialog(props: {
+  target: "default" | "session";
+  query: string;
+  totalOptions: number;
+  filteredCount: number;
+  current: ModelRef;
+  searchInputRef: RefObject<HTMLInputElement | null>;
+  activeIndex: number;
+  renderedCount: number;
+  recommendedOptions: { opt: ModelOption; index: number }[];
+  otherEnabledOptions: { opt: ModelOption; index: number }[];
+  otherOptions: ProviderLinkItem[];
+  registerOptionRef: (index: number) => (el: HTMLDivElement | null) => void;
+  onSetQuery: (value: string) => void;
+  onSetActiveIndex: (index: number) => void;
+  onSelect: (model: ModelRef) => void;
+  onBehaviorChange: (model: ModelRef, value: string | null) => void;
+  onOpenSettings: () => void;
+  onClose: (options?: { restorePromptFocus?: boolean }) => void;
+}) {
+  return (
+    <div className="fixed inset-0 z-50 bg-gray-1/60 backdrop-blur-sm flex items-start justify-center p-4 overflow-y-auto">
+      <div className="bg-dls-surface border border-dls-border w-full max-w-lg rounded-[24px] shadow-[var(--dls-shell-shadow)] overflow-hidden max-h-[calc(100vh-2rem)] flex flex-col">
+        <div className="p-6 flex flex-col min-h-0">
+          <ModelPickerHeader target={props.target} onClose={props.onClose} />
+          <ModelPickerSearch
+            query={props.query}
+            totalOptions={props.totalOptions}
+            filteredCount={props.filteredCount}
+            searchInputRef={props.searchInputRef}
+            onSetQuery={props.onSetQuery}
+          />
+          <ModelPickerSections
+            current={props.current}
+            activeIndex={props.activeIndex}
+            renderedCount={props.renderedCount}
+            recommendedOptions={props.recommendedOptions}
+            otherEnabledOptions={props.otherEnabledOptions}
+            otherOptions={props.otherOptions}
+            registerOptionRef={props.registerOptionRef}
+            onSetActiveIndex={props.onSetActiveIndex}
+            onSelect={props.onSelect}
+            onBehaviorChange={props.onBehaviorChange}
+            onOpenSettings={props.onOpenSettings}
+            onClose={props.onClose}
+          />
+          <div className="mt-5 flex justify-end shrink-0">
+            <button
+              type="button"
+              className="inline-flex items-center justify-center rounded-full border border-dls-border px-4 py-2 text-[13px] font-medium text-dls-text transition-colors hover:bg-[var(--dls-hover)]"
+              onClick={() => props.onClose()}
+            >
+              {t("settings.done")}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ModelPickerHeader(props: {
+  target: "default" | "session";
+  onClose: (options?: { restorePromptFocus?: boolean }) => void;
+}) {
+  return (
+    <div className="flex items-start justify-between gap-4">
+      <div>
+        <h3 className="text-lg font-semibold text-gray-12">
+          {t(props.target === "default" ? "model_picker.default_model_title" : "model_picker.chat_model_title")}
+        </h3>
+        <p className="text-sm text-gray-11 mt-1">
+          {t(props.target === "default" ? "model_picker.default_model_desc" : "model_picker.chat_model_desc")}
+        </p>
+      </div>
+      <button
+        type="button"
+        className="inline-flex size-8 items-center justify-center rounded-full text-gray-10 transition-colors hover:bg-[var(--dls-hover)]"
+        onClick={() => props.onClose()}
+      >
+        <X size={16} />
+      </button>
+    </div>
+  );
+}
+
+function ModelPickerSearch(props: {
+  query: string;
+  totalOptions: number;
+  filteredCount: number;
+  searchInputRef: RefObject<HTMLInputElement | null>;
+  onSetQuery: (value: string) => void;
+}) {
+  return (
+    <div className="mt-5">
+      <div className="relative">
+        <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-dls-secondary" />
+        <input
+          ref={props.searchInputRef}
+          type="text"
+          value={props.query}
+          onChange={(event) => props.onSetQuery(event.currentTarget.value)}
+          placeholder={t("settings.search_models")}
+          className="w-full bg-dls-surface border border-dls-border rounded-xl py-2.5 pl-9 pr-3 text-sm text-dls-text placeholder:text-dls-secondary focus:outline-none focus:ring-1 focus:ring-[rgba(var(--dls-accent-rgb),0.2)] focus:border-dls-accent"
+        />
+      </div>
+      {props.query.trim() ? (
+        <div className="mt-2 text-xs text-dls-secondary">
+          {t("settings.showing_models", { count: props.filteredCount, total: props.totalOptions })}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function ModelPickerSections(props: {
+  current: ModelRef;
+  activeIndex: number;
+  renderedCount: number;
+  recommendedOptions: { opt: ModelOption; index: number }[];
+  otherEnabledOptions: { opt: ModelOption; index: number }[];
+  otherOptions: ProviderLinkItem[];
+  registerOptionRef: (index: number) => (el: HTMLDivElement | null) => void;
+  onSetActiveIndex: (index: number) => void;
+  onSelect: (model: ModelRef) => void;
+  onBehaviorChange: (model: ModelRef, value: string | null) => void;
+  onOpenSettings: () => void;
+  onClose: (options?: { restorePromptFocus?: boolean }) => void;
+}) {
+  return (
+    <div className="mt-4 space-y-4 overflow-y-auto pr-1 -mr-1 min-h-0">
+      <ModelOptionsSection
+        title={t("model_picker.recommended")}
+        options={props.recommendedOptions}
+        current={props.current}
+        activeIndex={props.activeIndex}
+        registerOptionRef={props.registerOptionRef}
+        onSetActiveIndex={props.onSetActiveIndex}
+        onSelect={props.onSelect}
+        onBehaviorChange={props.onBehaviorChange}
+      />
+      <ModelOptionsSection
+        title={t("model_picker.other_connected_models")}
+        options={props.otherEnabledOptions}
+        current={props.current}
+        activeIndex={props.activeIndex}
+        registerOptionRef={props.registerOptionRef}
+        onSetActiveIndex={props.onSetActiveIndex}
+        onSelect={props.onSelect}
+        onBehaviorChange={props.onBehaviorChange}
+      />
+      {props.otherOptions.length > 0 ? (
+        <section className="space-y-2">
+          <div className="px-1 text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-9">
+            {t("model_picker.more_providers")}
+          </div>
+          {props.otherOptions.map((provider) => (
+            <ProviderLinkRow
+              key={provider.providerID}
+              provider={provider}
+              activeIndex={props.activeIndex}
+              registerOptionRef={props.registerOptionRef}
+              onSetActiveIndex={props.onSetActiveIndex}
+              onOpenSettings={props.onOpenSettings}
+              onClose={props.onClose}
+            />
+          ))}
+        </section>
+      ) : null}
+      {props.renderedCount === 0 ? (
+        <div className="rounded-2xl border border-gray-6/70 bg-gray-1/40 px-4 py-6 text-sm text-gray-10">
+          {t("model_picker.no_results")}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function ModelOptionsSection(props: {
+  title: string;
+  options: { opt: ModelOption; index: number }[];
+  current: ModelRef;
+  activeIndex: number;
+  registerOptionRef: (index: number) => (el: HTMLDivElement | null) => void;
+  onSetActiveIndex: (index: number) => void;
+  onSelect: (model: ModelRef) => void;
+  onBehaviorChange: (model: ModelRef, value: string | null) => void;
+}) {
+  if (props.options.length === 0) return null;
+  return (
+    <section className="space-y-2">
+      <div className="px-1 text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-9">
+        {props.title}
+      </div>
+      {props.options.map(({ opt, index }) => (
+        <ModelOptionRow
+          key={`${opt.providerID}/${opt.modelID}`}
+          opt={opt}
+          index={index}
+          activeIndex={props.activeIndex}
+          current={props.current}
+          registerOptionRef={props.registerOptionRef}
+          onSetActiveIndex={props.onSetActiveIndex}
+          onSelect={props.onSelect}
+          onBehaviorChange={props.onBehaviorChange}
+        />
+      ))}
+    </section>
+  );
+}
+
+function ModelOptionRow(props: {
+  opt: ModelOption;
+  index: number;
+  activeIndex: number;
+  current: ModelRef;
+  registerOptionRef: (index: number) => (el: HTMLDivElement | null) => void;
+  onSetActiveIndex: (index: number) => void;
+  onSelect: (model: ModelRef) => void;
+  onBehaviorChange: (model: ModelRef, value: string | null) => void;
+}) {
+  const { opt } = props;
+  const active = modelEquals(props.current, {
+    providerID: opt.providerID,
+    modelID: opt.modelID,
+  });
+  const isKeyboardActive = props.index === props.activeIndex;
+  const selectOption = () => props.onSelect({ providerID: opt.providerID, modelID: opt.modelID });
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      ref={props.registerOptionRef(props.index)}
+      className={[
+        "group w-full text-left rounded-xl px-3 py-2.5 transition-colors cursor-pointer",
+        active
+          ? "bg-gray-3 text-gray-12"
+          : isKeyboardActive
+            ? "bg-gray-2 text-gray-12"
+            : "text-gray-10 hover:bg-gray-1/70 hover:text-gray-11",
+      ].join(" ")}
+      onMouseEnter={() => props.onSetActiveIndex(props.index)}
+      onClick={selectOption}
+      onKeyDown={(event: ReactKeyboardEvent<HTMLDivElement>) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        if (event.nativeEvent.isComposing) return;
+        event.preventDefault();
+        selectOption();
+      }}
+    >
+      <div className="flex items-start gap-3">
+        <ProviderIcon
+          providerId={opt.providerID}
+          size={16}
+          className={[
+            "mt-[1px] shrink-0 transition-colors",
+            active ? "text-gray-12" : "text-gray-10 group-hover:text-gray-11",
+          ].join(" ")}
+        />
+        <div className="flex-1 min-w-0">
+          <div className={["text-[13px] flex items-center justify-between gap-2", active ? "font-medium text-gray-12" : "text-current"].join(" ")}>
+            <span className="truncate">{opt.title}</span>
+          </div>
+          <div className={["mt-0.5 flex items-center gap-3 text-[11px]", active ? "text-gray-10" : "text-gray-9 group-hover:text-gray-10"].join(" ")}>
+            <span className="truncate">{opt.description ?? opt.providerID}</span>
+            <span className="ml-auto opacity-70 font-mono">
+              {opt.providerID}/{opt.modelID}
+            </span>
+          </div>
+          {opt.footer ? (
+            <div className={["text-[11px] mt-1", active ? "text-gray-10" : "text-gray-8 group-hover:text-gray-9"].join(" ")}>
+              {opt.footer}
+            </div>
+          ) : null}
+          {active && (opt.behaviorOptions?.length ?? 0) > 0 ? <ModelBehaviorOptions opt={opt} onBehaviorChange={props.onBehaviorChange} /> : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ModelBehaviorOptions(props: {
+  opt: ModelOption;
+  onBehaviorChange: (model: ModelRef, value: string | null) => void;
+}) {
+  return (
+    <div role="presentation" className="mt-3 flex items-center gap-2" onClick={(event) => event.stopPropagation()} onKeyDown={(event) => event.stopPropagation()}>
+      <span className="text-[11px] font-medium text-gray-10 mr-1">{props.opt.behaviorTitle}:</span>
+      <div className="flex flex-wrap items-center gap-3">
+        {(props.opt.behaviorOptions ?? []).map((option) => (
+          <button
+            key={option.value ?? "default"}
+            type="button"
+            className={[
+              "text-[11px] transition-colors",
+              props.opt.behaviorValue === option.value ? "text-gray-12 font-semibold" : "text-gray-10 hover:text-gray-12",
+            ].join(" ")}
+            onClick={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              props.onBehaviorChange({ providerID: props.opt.providerID, modelID: props.opt.modelID }, option.value);
+            }}
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ProviderLinkRow(props: {
+  provider: ProviderLinkItem;
+  activeIndex: number;
+  registerOptionRef: (index: number) => (el: HTMLDivElement | null) => void;
+  onSetActiveIndex: (index: number) => void;
+  onOpenSettings: () => void;
+  onClose: (options?: { restorePromptFocus?: boolean }) => void;
+}) {
+  const isKeyboardActive = props.provider.index === props.activeIndex;
+  const openProviderSettings = () => {
+    props.onClose({ restorePromptFocus: false });
+    props.onOpenSettings();
+  };
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      ref={props.registerOptionRef(props.provider.index)}
+      className={[
+        "group w-full text-left rounded-xl px-3 py-2.5 transition-colors cursor-pointer",
+        isKeyboardActive ? "bg-gray-2 text-gray-12" : "text-gray-10 hover:bg-gray-1/70 hover:text-gray-11",
+      ].join(" ")}
+      onMouseEnter={() => props.onSetActiveIndex(props.provider.index)}
+      onClick={openProviderSettings}
+      onKeyDown={(event: ReactKeyboardEvent<HTMLDivElement>) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        if (event.nativeEvent.isComposing) return;
+        event.preventDefault();
+        openProviderSettings();
+      }}
+    >
+      <div className="flex items-start gap-3">
+        <ProviderIcon
+          providerId={props.provider.providerID}
+          size={16}
+          className={[
+            "mt-[1px] shrink-0 transition-colors",
+            isKeyboardActive ? "text-gray-12" : "text-gray-10 group-hover:text-gray-11",
+          ].join(" ")}
+        />
+        <div className="flex-1 min-w-0">
+          <div className="text-[13px] flex items-center justify-between gap-2 text-current">
+            <span className="truncate">{props.provider.title}</span>
+          </div>
+          <div className={["mt-0.5 flex items-center gap-3 text-[11px]", isKeyboardActive ? "text-gray-10" : "text-gray-9 group-hover:text-gray-10"].join(" ")}>
+            <span className="truncate">{t("model_picker.connect_provider_hint")}</span>
+            <span className="ml-auto opacity-70">{t("model_picker.model_count", { count: props.provider.matchCount })}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ModelPickerSelectedIcon({ active }: { active: boolean }) {
+  return active ? <CheckCircle2 size={14} /> : <Circle size={14} />;
+}
diff --git a/apps/app/src/react-app/domains/session/modals/model-picker-modal.tsx b/apps/app/src/react-app/domains/session/modals/model-picker-modal.tsx
index 9af2c776f..a992957ca 100644
--- a/apps/app/src/react-app/domains/session/modals/model-picker-modal.tsx
+++ b/apps/app/src/react-app/domains/session/modals/model-picker-modal.tsx
@@ -6,44 +6,11 @@ import {
   useMemo,
   useRef,
   useState,
-  type KeyboardEvent as ReactKeyboardEvent,
 } from "react";
-import { CheckCircle2, Circle, Search, X } from "lucide-react";
 
-import { t } from "../../../../i18n";
 import { modelEquals } from "../../../../app/utils";
 import type { ModelOption, ModelRef } from "../../../../app/types";
-
-// Minimal inline provider icon placeholder. The full ProviderIcon gets ported
-// from src/app/components/provider-icon.tsx in a later step of the plan.
-function ProviderIcon({
-  providerId,
-  size = 16,
-  className,
-}: {
-  providerId: string;
-  size?: number;
-  className?: string;
-}) {
-  const initial = providerId.trim().charAt(0).toUpperCase() || "?";
-  return (
-    <span
-      aria-hidden
-      className={className}
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: size,
-        height: size,
-        fontSize: Math.round(size * 0.65),
-        fontWeight: 600,
-      }}
-    >
-      {initial}
-    </span>
-  );
-}
+import { ModelPickerDialog, type ProviderLinkItem } from "./model-picker-modal-components";
 
 export type ModelPickerModalProps = {
   open: boolean;
@@ -272,317 +239,26 @@ export function ModelPickerModal(props: ModelPickerModalProps) {
     optionRefs.current[index] = el;
   };
 
-  const renderOption = (opt: ModelOption, index: number) => {
-    const active = modelEquals(props.current, {
-      providerID: opt.providerID,
-      modelID: opt.modelID,
-    });
-    const isKeyboardActive = index === activeIndex;
-
-    return (
-      <div
-        key={`${opt.providerID}/${opt.modelID}`}
-        role="button"
-        tabIndex={0}
-        ref={registerOptionRef(index)}
-        className={[
-          "group w-full text-left rounded-xl px-3 py-2.5 transition-colors cursor-pointer",
-          active
-            ? "bg-gray-3 text-gray-12"
-            : isKeyboardActive
-              ? "bg-gray-2 text-gray-12"
-              : "text-gray-10 hover:bg-gray-1/70 hover:text-gray-11",
-        ].join(" ")}
-        onMouseEnter={() => setActiveIndex(index)}
-        onClick={() =>
-          props.onSelect({
-            providerID: opt.providerID,
-            modelID: opt.modelID,
-          })
-        }
-        onKeyDown={(event: ReactKeyboardEvent<HTMLDivElement>) => {
-          if (event.key !== "Enter" && event.key !== " ") return;
-          if (event.nativeEvent.isComposing) return;
-          event.preventDefault();
-          props.onSelect({
-            providerID: opt.providerID,
-            modelID: opt.modelID,
-          });
-        }}
-      >
-        <div className="flex items-start gap-3">
-          <ProviderIcon
-            providerId={opt.providerID}
-            size={16}
-            className={[
-              "mt-[1px] shrink-0 transition-colors",
-              active
-                ? "text-gray-12"
-                : "text-gray-10 group-hover:text-gray-11",
-            ].join(" ")}
-          />
-          <div className="flex-1 min-w-0">
-            <div
-              className={[
-                "text-[13px] flex items-center justify-between gap-2",
-                active ? "font-medium text-gray-12" : "text-current",
-              ].join(" ")}
-            >
-              <span className="truncate">{opt.title}</span>
-            </div>
-            <div
-              className={[
-                "mt-0.5 flex items-center gap-3 text-[11px]",
-                active
-                  ? "text-gray-10"
-                  : "text-gray-9 group-hover:text-gray-10",
-              ].join(" ")}
-            >
-              <span className="truncate">
-                {opt.description ?? opt.providerID}
-              </span>
-              <span className="ml-auto opacity-70 font-mono">
-                {opt.providerID}/{opt.modelID}
-              </span>
-            </div>
-            {opt.footer ? (
-              <div
-                className={[
-                  "text-[11px] mt-1",
-                  active
-                    ? "text-gray-10"
-                    : "text-gray-8 group-hover:text-gray-9",
-                ].join(" ")}
-              >
-                {opt.footer}
-              </div>
-            ) : null}
-            {active && (opt.behaviorOptions?.length ?? 0) > 0 ? (
-              <div
-                role="presentation"
-                className="mt-3 flex items-center gap-2"
-                onClick={(event) => event.stopPropagation()}
-                onKeyDown={(event) => event.stopPropagation()}
-              >
-                <span className="text-[11px] font-medium text-gray-10 mr-1">
-                  {opt.behaviorTitle}:
-                </span>
-                <div
-                  className="flex flex-wrap items-center gap-3"
-                >
-                  {(opt.behaviorOptions ?? []).map((option) => (
-                    <button
-                      key={option.value ?? "default"}
-                      type="button"
-                      className={[
-                        "text-[11px] transition-colors",
-                        opt.behaviorValue === option.value
-                          ? "text-gray-12 font-semibold"
-                          : "text-gray-10 hover:text-gray-12",
-                      ].join(" ")}
-                      onClick={(event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        props.onBehaviorChange(
-                          {
-                            providerID: opt.providerID,
-                            modelID: opt.modelID,
-                          },
-                          option.value,
-                        );
-                      }}
-                    >
-                      {option.label}
-                    </button>
-                  ))}
-                </div>
-              </div>
-            ) : null}
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  const renderProviderLink = (provider: {
-    providerID: string;
-    title: string;
-    matchCount: number;
-    index: number;
-  }) => {
-    const isKeyboardActive = provider.index === activeIndex;
-    return (
-      <div
-        key={provider.providerID}
-        role="button"
-        tabIndex={0}
-        ref={registerOptionRef(provider.index)}
-        className={[
-          "group w-full text-left rounded-xl px-3 py-2.5 transition-colors cursor-pointer",
-          isKeyboardActive
-            ? "bg-gray-2 text-gray-12"
-            : "text-gray-10 hover:bg-gray-1/70 hover:text-gray-11",
-        ].join(" ")}
-        onMouseEnter={() => setActiveIndex(provider.index)}
-        onClick={() => {
-          props.onClose({ restorePromptFocus: false });
-          props.onOpenSettings();
-        }}
-        onKeyDown={(event: ReactKeyboardEvent<HTMLDivElement>) => {
-          if (event.key !== "Enter" && event.key !== " ") return;
-          if (event.nativeEvent.isComposing) return;
-          event.preventDefault();
-          props.onClose({ restorePromptFocus: false });
-          props.onOpenSettings();
-        }}
-      >
-        <div className="flex items-start gap-3">
-          <ProviderIcon
-            providerId={provider.providerID}
-            size={16}
-            className={[
-              "mt-[1px] shrink-0 transition-colors",
-              isKeyboardActive
-                ? "text-gray-12"
-                : "text-gray-10 group-hover:text-gray-11",
-            ].join(" ")}
-          />
-          <div className="flex-1 min-w-0">
-            <div className="text-[13px] flex items-center justify-between gap-2 text-current">
-              <span className="truncate">{provider.title}</span>
-            </div>
-            <div
-              className={[
-                "mt-0.5 flex items-center gap-3 text-[11px]",
-                isKeyboardActive
-                  ? "text-gray-10"
-                  : "text-gray-9 group-hover:text-gray-10",
-              ].join(" ")}
-            >
-              <span className="truncate">
-                {t("model_picker.connect_provider_hint")}
-              </span>
-              <span className="ml-auto opacity-70">
-                {t("model_picker.model_count", { count: provider.matchCount })}
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  };
-
   return (
-    <div className="fixed inset-0 z-50 bg-gray-1/60 backdrop-blur-sm flex items-start justify-center p-4 overflow-y-auto">
-      <div className="bg-dls-surface border border-dls-border w-full max-w-lg rounded-[24px] shadow-[var(--dls-shell-shadow)] overflow-hidden max-h-[calc(100vh-2rem)] flex flex-col">
-        <div className="p-6 flex flex-col min-h-0">
-          <div className="flex items-start justify-between gap-4">
-            <div>
-              <h3 className="text-lg font-semibold text-gray-12">
-                {t(
-                  props.target === "default"
-                    ? "model_picker.default_model_title"
-                    : "model_picker.chat_model_title",
-                )}
-              </h3>
-              <p className="text-sm text-gray-11 mt-1">
-                {t(
-                  props.target === "default"
-                    ? "model_picker.default_model_desc"
-                    : "model_picker.chat_model_desc",
-                )}
-              </p>
-            </div>
-            <button
-              type="button"
-              className="inline-flex size-8 items-center justify-center rounded-full text-gray-10 transition-colors hover:bg-[var(--dls-hover)]"
-              onClick={() => props.onClose()}
-            >
-              <X size={16} />
-            </button>
-          </div>
-
-          <div className="mt-5">
-            <div className="relative">
-              <Search
-                size={16}
-                className="absolute left-3 top-1/2 -translate-y-1/2 text-dls-secondary"
-              />
-              <input
-                ref={searchInputRef}
-                type="text"
-                value={props.query}
-                onChange={(event) => props.setQuery(event.currentTarget.value)}
-                placeholder={t("settings.search_models")}
-                className="w-full bg-dls-surface border border-dls-border rounded-xl py-2.5 pl-9 pr-3 text-sm text-dls-text placeholder:text-dls-secondary focus:outline-none focus:ring-1 focus:ring-[rgba(var(--dls-accent-rgb),0.2)] focus:border-dls-accent"
-              />
-            </div>
-            {props.query.trim() ? (
-              <div className="mt-2 text-xs text-dls-secondary">
-                {t("settings.showing_models", {
-                  count: filteredOptions.length,
-                  total: props.options.length,
-                })}
-              </div>
-            ) : null}
-          </div>
-
-          <div className="mt-4 space-y-4 overflow-y-auto pr-1 -mr-1 min-h-0">
-            {recommendedOptions.length > 0 ? (
-              <section className="space-y-2">
-                <div className="px-1 text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-9">
-                  {t("model_picker.recommended")}
-                </div>
-                {recommendedOptions.map(({ opt, index }) =>
-                  renderOption(opt, index),
-                )}
-              </section>
-            ) : null}
-
-            {otherEnabledOptions.length > 0 ? (
-              <section className="space-y-2">
-                <div className="px-1 text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-9">
-                  {t("model_picker.other_connected_models")}
-                </div>
-                {otherEnabledOptions.map(({ opt, index }) =>
-                  renderOption(opt, index),
-                )}
-              </section>
-            ) : null}
-
-            {otherOptions.length > 0 ? (
-              <section className="space-y-2">
-                <div className="px-1 text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-9">
-                  {t("model_picker.more_providers")}
-                </div>
-                {otherOptions.map(renderProviderLink)}
-              </section>
-            ) : null}
-
-            {renderedItems.length === 0 ? (
-              <div className="rounded-2xl border border-gray-6/70 bg-gray-1/40 px-4 py-6 text-sm text-gray-10">
-                {t("model_picker.no_results")}
-              </div>
-            ) : null}
-          </div>
-
-          <div className="mt-5 flex justify-end shrink-0">
-            <button
-              type="button"
-              className="inline-flex items-center justify-center rounded-full border border-dls-border px-4 py-2 text-[13px] font-medium text-dls-text transition-colors hover:bg-[var(--dls-hover)]"
-              onClick={() => props.onClose()}
-            >
-              {t("settings.done")}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
+    <ModelPickerDialog
+      target={props.target}
+      query={props.query}
+      totalOptions={props.options.length}
+      filteredCount={filteredOptions.length}
+      current={props.current}
+      searchInputRef={searchInputRef}
+      activeIndex={activeIndex}
+      renderedCount={renderedItems.length}
+      recommendedOptions={recommendedOptions}
+      otherEnabledOptions={otherEnabledOptions}
+      otherOptions={otherOptions}
+      registerOptionRef={registerOptionRef}
+      onSetQuery={props.setQuery}
+      onSetActiveIndex={setActiveIndex}
+      onSelect={props.onSelect}
+      onBehaviorChange={props.onBehaviorChange}
+      onOpenSettings={props.onOpenSettings}
+      onClose={props.onClose}
+    />
   );
 }
-
-// Small helper so downstream callers can keep the check/circle icons
-// colocated with the picker (future use for selected-state ornaments).
-export function ModelPickerSelectedIcon({ active }: { active: boolean }) {
-  return active ? <CheckCircle2 size={14} /> : <Circle size={14} />;
-}
diff --git a/apps/app/src/react-app/domains/session/surface/scroll-controller-state.ts b/apps/app/src/react-app/domains/session/surface/scroll-controller-state.ts
new file mode 100644
index 000000000..49ddbf0f5
--- /dev/null
+++ b/apps/app/src/react-app/domains/session/surface/scroll-controller-state.ts
@@ -0,0 +1,30 @@
+type SessionScrollMode = "follow-latest" | "manual-browse";
+
+type SessionScrollState = {
+  mode: SessionScrollMode;
+  topClippedMessageId: string | null;
+};
+
+type SessionScrollAction =
+  | { type: "mode"; mode: SessionScrollMode }
+  | { type: "topClippedMessage"; id: string | null }
+  | { type: "followLatest" };
+
+export const initialSessionScrollState: SessionScrollState = {
+  mode: "follow-latest",
+  topClippedMessageId: null,
+};
+
+export function sessionScrollReducer(
+  state: SessionScrollState,
+  action: SessionScrollAction,
+): SessionScrollState {
+  switch (action.type) {
+    case "mode":
+      return { ...state, mode: action.mode };
+    case "topClippedMessage":
+      return { ...state, topClippedMessageId: action.id };
+    case "followLatest":
+      return { mode: "follow-latest", topClippedMessageId: null };
+  }
+}
diff --git a/apps/app/src/react-app/domains/session/surface/scroll-controller.ts b/apps/app/src/react-app/domains/session/surface/scroll-controller.ts
index 6d9ab4fee..dc273e6c9 100644
--- a/apps/app/src/react-app/domains/session/surface/scroll-controller.ts
+++ b/apps/app/src/react-app/domains/session/surface/scroll-controller.ts
@@ -1,4 +1,6 @@
-import { useCallback, useEffect, useRef, useState, type RefObject, type UIEventHandler } from "react";
+import { useCallback, useEffect, useReducer, useRef, type RefObject, type UIEventHandler } from "react";
+
+import { initialSessionScrollState, sessionScrollReducer } from "./scroll-controller-state";
 
 const FOLLOW_LATEST_BOTTOM_GAP_PX = 96;
 // Widened from 250ms so a single wheel or trackpad flick isn't missed between
@@ -9,8 +11,6 @@ const SCROLL_GESTURE_WINDOW_MS = 600;
 // follow-latest for pixel-level content growth.
 const MANUAL_BROWSE_UPWARD_THRESHOLD_PX = 16;
 
-type SessionScrollMode = "follow-latest" | "manual-browse";
-
 type SessionScrollControllerOptions = {
   selectedSessionId: string | null;
   renderedMessages: unknown;
@@ -21,8 +21,10 @@ type SessionScrollControllerOptions = {
 export function useSessionScrollController(
   options: SessionScrollControllerOptions,
 ) {
-  const [mode, setMode] = useState<SessionScrollMode>("follow-latest");
-  const [topClippedMessageId, setTopClippedMessageId] = useState<string | null>(null);
+  const [{ mode, topClippedMessageId }, dispatchScroll] = useReducer(
+    sessionScrollReducer,
+    initialSessionScrollState,
+  );
 
   const lastKnownScrollTopRef = useRef(0);
   const programmaticScrollRef = useRef(false);
@@ -84,7 +86,7 @@ export function useSessionScrollController(
   const refreshTopClippedMessage = useCallback(() => {
     const container = options.containerRef.current;
     if (!container) {
-      setTopClippedMessageId(null);
+      dispatchScroll({ type: "topClippedMessage", id: null });
       return;
     }
 
@@ -113,7 +115,7 @@ export function useSessionScrollController(
       break;
     }
 
-    setTopClippedMessageId(nextId);
+    dispatchScroll({ type: "topClippedMessage", id: nextId });
   }, [options.containerRef]);
 
   const scrollToBottom = useCallback(
@@ -121,8 +123,7 @@ export function useSessionScrollController(
       const container = options.containerRef.current;
       if (!container) return;
 
-      setMode("follow-latest");
-      setTopClippedMessageId(null);
+      dispatchScroll({ type: "followLatest" });
       programmaticScrollRef.current = true;
 
       if (behavior === "smooth") {
@@ -162,7 +163,7 @@ export function useSessionScrollController(
       if (programmaticScrollRef.current && (userGestured || scrolledUp)) {
         programmaticScrollRef.current = false;
         clearProgrammaticScrollReset();
-        setMode("manual-browse");
+        dispatchScroll({ type: "mode", mode: "manual-browse" });
         lastKnownScrollTopRef.current = currentTop;
         refreshTopClippedMessage();
         return;
@@ -185,9 +186,9 @@ export function useSessionScrollController(
 
       const bottomGap = container.scrollHeight - (currentTop + container.clientHeight);
       if (bottomGap <= FOLLOW_LATEST_BOTTOM_GAP_PX) {
-        setMode("follow-latest");
+        dispatchScroll({ type: "mode", mode: "follow-latest" });
       } else if (scrolledUp) {
-        setMode("manual-browse");
+        dispatchScroll({ type: "mode", mode: "manual-browse" });
       }
       lastKnownScrollTopRef.current = currentTop;
       refreshTopClippedMessage();
@@ -214,7 +215,7 @@ export function useSessionScrollController(
       ) as HTMLElement | null;
       if (!target) return;
 
-      setMode("manual-browse");
+      dispatchScroll({ type: "mode", mode: "manual-browse" });
       target.scrollIntoView({ behavior, block: "start" });
     },
     [options.containerRef, topClippedMessageId],
@@ -260,8 +261,7 @@ export function useSessionScrollController(
     previousSessionIdRef.current = options.selectedSessionId;
     if (!options.selectedSessionId) return;
 
-    setMode("follow-latest");
-    setTopClippedMessageId(null);
+    dispatchScroll({ type: "followLatest" });
     observedContentHeightRef.current = 0;
     queueMicrotask(() => {
       const container = options.containerRef.current;
@@ -277,8 +277,8 @@ export function useSessionScrollController(
       const latestHeight = latest.getBoundingClientRect().height;
       const containerHeight = container.getBoundingClientRect().height;
       if (latestHeight > containerHeight) {
-        setMode("manual-browse");
-        setTopClippedMessageId(null);
+        dispatchScroll({ type: "mode", mode: "manual-browse" });
+        dispatchScroll({ type: "topClippedMessage", id: null });
         programmaticScrollRef.current = true;
         latest.scrollIntoView({ block: "start" });
         releaseProgrammaticScrollSoon();
diff --git a/apps/app/src/react-app/domains/settings/pages/advanced-view-sections.tsx b/apps/app/src/react-app/domains/settings/pages/advanced-view-sections.tsx
new file mode 100644
index 000000000..30658a67f
--- /dev/null
+++ b/apps/app/src/react-app/domains/settings/pages/advanced-view-sections.tsx
@@ -0,0 +1,317 @@
+/** @jsxImportSource react */
+import type { ReactNode } from "react";
+import { CircleAlert, Cpu, RefreshCcw, Server, Zap } from "lucide-react";
+
+import type { OpenworkServerStatus } from "../../../../app/lib/openwork-server";
+import type { EngineInfo } from "../../../../app/lib/desktop";
+import { isDesktopRuntime } from "../../../../app/utils";
+import { t } from "../../../../i18n";
+import { Button } from "../../../design-system/button";
+
+const settingsPanelClass = "rounded-[28px] border border-dls-border bg-dls-surface p-5 md:p-6";
+const settingsPanelSoftClass = "rounded-2xl border border-gray-6/60 bg-gray-1/40 p-4";
+
+type RuntimeStatusCardProps = {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  statusLabel: string;
+  statusStyle: string;
+  statusDot: string;
+  detailLines?: string[];
+};
+
+function RuntimeStatusCard(props: RuntimeStatusCardProps) {
+  return (
+    <div className={`${settingsPanelSoftClass} space-y-3`}>
+      <div className="flex items-start gap-3">
+        <div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-gray-6/60 bg-gray-1/70 text-gray-12">
+          {props.icon}
+        </div>
+        <div>
+          <div className="text-sm font-medium text-gray-12">{props.title}</div>
+          <div className="text-xs text-gray-9">{props.description}</div>
+        </div>
+      </div>
+      <div
+        className={`inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-[11px] font-medium ${props.statusStyle}`}
+      >
+        <span className={`size-2 rounded-full ${props.statusDot}`} />
+        {props.statusLabel}
+      </div>
+      {props.detailLines?.length ? (
+        <div className="space-y-1 border-t border-gray-6/50 pt-2 text-[11px] text-gray-9">
+          {props.detailLines.map((line) => (
+            <div key={line} className="truncate" title={line}>
+              {line}
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function formatOpencodeBinary(info: EngineInfo | null) {
+  const binary = info?.opencodeBinPath?.trim();
+  if (!binary) return "—";
+  const source = info?.opencodeBinSource?.trim();
+  return source ? `${binary} (${source})` : binary;
+}
+
+export function AdvancedRuntimeSection(props: {
+  engineInfo: EngineInfo | null;
+  clientStatusLabel: string;
+  clientStatusStyle: string;
+  clientStatusDot: string;
+  openworkStatusLabel: string;
+  openworkStatusStyle: string;
+  openworkStatusDot: string;
+}) {
+  return (
+    <div className={`${settingsPanelClass} space-y-4`}>
+      <div>
+        <div className="text-sm font-medium text-gray-12">{t("settings.runtime_title")}</div>
+        <div className="text-xs text-gray-9">{t("settings.runtime_desc")}</div>
+      </div>
+
+      <div className="grid gap-3 sm:grid-cols-2">
+        <RuntimeStatusCard
+          icon={<Cpu size={18} />}
+          title={t("settings.opencode_engine_label")}
+          description={t("settings.opencode_engine_desc")}
+          statusLabel={props.clientStatusLabel}
+          statusStyle={props.clientStatusStyle}
+          statusDot={props.clientStatusDot}
+          detailLines={[
+            t("settings.diag_opencode_binary", undefined, {
+              binary: formatOpencodeBinary(props.engineInfo),
+            }),
+          ]}
+        />
+        <RuntimeStatusCard
+          icon={<Server size={18} />}
+          title={t("settings.openwork_server_label")}
+          description={t("settings.openwork_server_desc")}
+          statusLabel={props.openworkStatusLabel}
+          statusStyle={props.openworkStatusStyle}
+          statusDot={props.openworkStatusDot}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function AdvancedOpencodeSection(props: { busy: boolean; enabled: boolean; onToggle: () => void }) {
+  return (
+    <div className={`${settingsPanelClass} space-y-3`}>
+      <div>
+        <div className="text-sm font-medium text-gray-12">{t("settings.opencode_section_label")}</div>
+        <div className="text-xs text-gray-9">{t("settings.opencode_engine_desc")}</div>
+      </div>
+
+      <div className="flex items-center justify-between gap-3 rounded-xl border border-gray-6 bg-gray-1 p-3">
+        <div className="min-w-0">
+          <div className="text-sm text-gray-12">{t("settings.enable_exa")}</div>
+          <div className="text-xs text-gray-7">{t("settings.enable_exa_desc")}</div>
+        </div>
+        <Button variant="outline" className="h-8 shrink-0 px-3 py-0 text-xs" onClick={props.onToggle} disabled={props.busy}>
+          {props.enabled ? t("settings.on") : t("settings.off")}
+        </Button>
+      </div>
+
+      <div className="text-[11px] text-gray-7">{t("settings.exa_restart_hint")}</div>
+    </div>
+  );
+}
+
+export function AdvancedFeatureFlagsSection(props: {
+  busy: boolean;
+  microsandboxCreateSandboxEnabled: boolean;
+  onToggleMicrosandboxCreateSandbox: () => void;
+}) {
+  return (
+    <div className={`${settingsPanelClass} space-y-3`}>
+      <div>
+        <div className="text-sm font-medium text-gray-12">Feature flags</div>
+        <div className="text-xs text-gray-9">Experimental controls for sandbox and workspace behaviors.</div>
+      </div>
+
+      <div className="flex items-center justify-between gap-3 rounded-xl border border-gray-6 bg-gray-1 p-3">
+        <div className="min-w-0">
+          <div className="text-sm text-gray-12">Create Sandbox uses microsandbox image</div>
+          <div className="text-xs text-gray-7">
+            When enabled, Create Sandbox launches the detached worker with the microsandbox image flow instead of the default Docker image flow.
+          </div>
+        </div>
+        <Button
+          variant="outline"
+          className="h-8 shrink-0 px-3 py-0 text-xs"
+          onClick={props.onToggleMicrosandboxCreateSandbox}
+          disabled={props.busy || !isDesktopRuntime()}
+        >
+          {props.microsandboxCreateSandboxEnabled ? "On" : "Off"}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function AdvancedDeveloperSection(props: {
+  busy: boolean;
+  developerMode: boolean;
+  opencodeDevModeEnabled: boolean;
+  deepLinkOpen: boolean;
+  deepLinkInput: string;
+  deepLinkBusy: boolean;
+  deepLinkStatus: string | null;
+  onToggleDeveloperMode: () => void;
+  onToggleDeepLink: () => void;
+  onDeepLinkInput: (input: string) => void;
+  onSubmitDeepLink: () => Promise<void>;
+}) {
+  return (
+    <div className={`${settingsPanelClass} space-y-3`}>
+      <div className="text-sm font-medium text-gray-12">{t("settings.developer_mode_title")}</div>
+      <div className="text-xs text-gray-9">{t("settings.developer_mode_desc")}</div>
+      <div className="flex flex-wrap items-center gap-3 pt-1">
+        <button
+          type="button"
+          className={`inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-xs font-medium shadow-sm transition-colors duration-150 focus:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-60 ${
+            props.developerMode
+              ? "border-blue-7/35 bg-blue-3/20 text-blue-11 hover:bg-blue-3/35 hover:text-blue-11 focus-visible:ring-[rgba(var(--dls-accent-rgb),0.25)]"
+              : "border-dls-border bg-dls-surface text-dls-secondary hover:bg-dls-hover hover:text-dls-text focus-visible:ring-[rgba(var(--dls-accent-rgb),0.25)]"
+          }`}
+          onClick={props.onToggleDeveloperMode}
+        >
+          <Zap size={14} className={props.developerMode ? "text-blue-10" : "text-dls-secondary"} />
+          {props.developerMode ? t("settings.disable_developer_mode") : t("settings.enable_developer_mode")}
+        </button>
+        <div className="text-xs text-gray-10">
+          {props.developerMode ? t("settings.developer_panel_enabled") : t("settings.developer_panel_disabled")}
+        </div>
+      </div>
+
+      {isDesktopRuntime() && props.opencodeDevModeEnabled && props.developerMode ? (
+        <div className={`${settingsPanelSoftClass} space-y-3`}>
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <div className="text-sm font-medium text-gray-12">{t("settings.open_deeplink_title")}</div>
+              <div className="text-xs text-gray-9">{t("settings.open_deeplink_desc")}</div>
+            </div>
+            <button
+              type="button"
+              className="inline-flex items-center gap-1.5 rounded-md border border-dls-border bg-dls-surface px-3 py-1.5 text-xs font-medium text-dls-secondary shadow-sm transition-colors duration-150 hover:bg-dls-hover hover:text-dls-text focus:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(var(--dls-accent-rgb),0.25)] disabled:cursor-not-allowed disabled:opacity-60"
+              onClick={props.onToggleDeepLink}
+              disabled={props.busy || props.deepLinkBusy}
+            >
+              {props.deepLinkOpen ? t("common.hide") : t("settings.open_deeplink_button")}
+            </button>
+          </div>
+
+          {props.deepLinkOpen ? (
+            <div className="space-y-3">
+              <textarea
+                value={props.deepLinkInput}
+                onChange={(event) => props.onDeepLinkInput(event.currentTarget.value)}
+                rows={3}
+                placeholder="openwork://..."
+                className="w-full rounded-xl border border-gray-6 bg-gray-1 px-3 py-2 text-xs font-mono text-gray-12 outline-none transition focus:border-blue-8"
+              />
+              <div className="flex flex-wrap items-center gap-2">
+                <Button
+                  variant="secondary"
+                  className="h-8 px-3 py-0 text-xs"
+                  onClick={() => void props.onSubmitDeepLink()}
+                  disabled={props.busy || props.deepLinkBusy || !props.deepLinkInput.trim()}
+                >
+                  {props.deepLinkBusy ? t("settings.opening") : t("settings.open_deeplink_action")}
+                </Button>
+                <div className="text-[11px] text-gray-8">{t("settings.deeplink_hint")}</div>
+              </div>
+            </div>
+          ) : null}
+
+          {props.deepLinkStatus ? <div className="text-xs text-gray-10">{props.deepLinkStatus}</div> : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export function AdvancedConnectionSection(props: {
+  busy: boolean;
+  headerStatus: string;
+  baseUrl: string;
+  openworkServerUrl: string;
+  openworkServerStatus: OpenworkServerStatus;
+  openworkReconnectBusy: boolean;
+  isLocalEngineRunning: boolean;
+  restartBusy: boolean;
+  reconnectStatus: string | null;
+  reconnectError: string | null;
+  restartStatus: string | null;
+  restartError: string | null;
+  onReconnect: () => Promise<void>;
+  onRestart: () => Promise<void>;
+  onStopHost: () => void;
+}) {
+  return (
+    <div className={`${settingsPanelClass} space-y-3`}>
+      <div className="text-sm font-medium text-gray-12">{t("settings.connection_title")}</div>
+      <div className="text-xs text-gray-9">{props.headerStatus}</div>
+      <div className="break-all font-mono text-xs text-gray-8">{props.baseUrl}</div>
+      <div className="flex flex-wrap gap-2 pt-2">
+        <button
+          type="button"
+          className="inline-flex items-center gap-1.5 rounded-md border border-dls-border bg-dls-surface px-3 py-1.5 text-xs font-medium text-dls-secondary shadow-sm transition-colors duration-150 hover:bg-dls-hover hover:text-dls-text focus:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(var(--dls-accent-rgb),0.25)] disabled:cursor-not-allowed disabled:opacity-60"
+          onClick={() => void props.onReconnect()}
+          disabled={props.busy || props.openworkReconnectBusy || !props.openworkServerUrl.trim()}
+        >
+          <RefreshCcw size={14} className={`text-dls-secondary ${props.openworkReconnectBusy ? "animate-spin" : ""}`} />
+          {props.openworkReconnectBusy ? t("settings.reconnecting") : t("settings.reconnect_server")}
+        </button>
+
+        {props.isLocalEngineRunning ? (
+          <button
+            type="button"
+            className="inline-flex items-center gap-1.5 rounded-md border border-dls-border bg-dls-surface px-3 py-1.5 text-xs font-medium text-dls-secondary shadow-sm transition-colors duration-150 hover:bg-dls-hover hover:text-dls-text focus:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(var(--dls-accent-rgb),0.25)] disabled:cursor-not-allowed disabled:opacity-60"
+            onClick={() => void props.onRestart()}
+            disabled={props.busy || props.restartBusy}
+          >
+            <RefreshCcw size={14} className={`text-dls-secondary ${props.restartBusy ? "animate-spin" : ""}`} />
+            {props.restartBusy ? t("settings.restarting") : t("settings.restart_openwork_server")}
+          </button>
+        ) : null}
+
+        {props.isLocalEngineRunning ? (
+          <button
+            type="button"
+            className="inline-flex items-center gap-1.5 rounded-md border border-red-7/35 bg-red-3/25 px-3 py-1.5 text-xs font-medium text-red-11 transition-colors duration-150 hover:border-red-7/50 hover:bg-red-3/45 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-7/35 disabled:cursor-not-allowed disabled:opacity-60"
+            onClick={props.onStopHost}
+            disabled={props.busy}
+          >
+            <CircleAlert size={14} />
+            {t("settings.stop_local_server")}
+          </button>
+        ) : null}
+
+        {!props.isLocalEngineRunning && props.openworkServerStatus === "connected" ? (
+          <button
+            type="button"
+            className="inline-flex items-center gap-1.5 rounded-md border border-dls-border bg-dls-surface px-3 py-1.5 text-xs font-medium text-dls-secondary shadow-sm transition-colors duration-150 hover:bg-dls-hover hover:text-dls-text focus:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(var(--dls-accent-rgb),0.25)] disabled:cursor-not-allowed disabled:opacity-60"
+            onClick={props.onStopHost}
+            disabled={props.busy}
+          >
+            {t("settings.disconnect_server")}
+          </button>
+        ) : null}
+      </div>
+
+      {props.reconnectStatus ? <div className="text-xs text-gray-10">{props.reconnectStatus}</div> : null}
+      {props.reconnectError ? <div className="text-xs text-red-11">{props.reconnectError}</div> : null}
+      {props.restartStatus ? <div className="text-xs text-gray-10">{props.restartStatus}</div> : null}
+      {props.restartError ? <div className="text-xs text-red-11">{props.restartError}</div> : null}
+    </div>
+  );
+}
diff --git a/apps/app/src/react-app/domains/settings/pages/advanced-view-state.ts b/apps/app/src/react-app/domains/settings/pages/advanced-view-state.ts
new file mode 100644
index 000000000..937a5f03f
--- /dev/null
+++ b/apps/app/src/react-app/domains/settings/pages/advanced-view-state.ts
@@ -0,0 +1,72 @@
+type AdvancedLocalState = {
+  reconnectStatus: string | null;
+  reconnectError: string | null;
+  restartBusy: boolean;
+  restartStatus: string | null;
+  restartError: string | null;
+  deepLinkOpen: boolean;
+  deepLinkInput: string;
+  deepLinkBusy: boolean;
+  deepLinkStatus: string | null;
+};
+
+type AdvancedLocalAction =
+  | { type: "reconnectStart" }
+  | { type: "reconnectStatus"; status: string | null }
+  | { type: "reconnectError"; error: string | null }
+  | { type: "restartStart" }
+  | { type: "restartStatus"; status: string | null }
+  | { type: "restartError"; error: string | null }
+  | { type: "restartDone" }
+  | { type: "toggleDeepLink" }
+  | { type: "deepLinkInput"; input: string }
+  | { type: "deepLinkStart" }
+  | { type: "deepLinkStatus"; status: string | null }
+  | { type: "deepLinkDone" }
+  | { type: "deepLinkSuccess"; status: string | null };
+
+export const initialAdvancedLocalState: AdvancedLocalState = {
+  reconnectStatus: null,
+  reconnectError: null,
+  restartBusy: false,
+  restartStatus: null,
+  restartError: null,
+  deepLinkOpen: false,
+  deepLinkInput: "",
+  deepLinkBusy: false,
+  deepLinkStatus: null,
+};
+
+export function advancedLocalReducer(
+  state: AdvancedLocalState,
+  action: AdvancedLocalAction,
+): AdvancedLocalState {
+  switch (action.type) {
+    case "reconnectStart":
+      return { ...state, reconnectStatus: null, reconnectError: null };
+    case "reconnectStatus":
+      return { ...state, reconnectStatus: action.status };
+    case "reconnectError":
+      return { ...state, reconnectError: action.error };
+    case "restartStart":
+      return { ...state, restartStatus: null, restartError: null, restartBusy: true };
+    case "restartStatus":
+      return { ...state, restartStatus: action.status };
+    case "restartError":
+      return { ...state, restartError: action.error };
+    case "restartDone":
+      return { ...state, restartBusy: false };
+    case "toggleDeepLink":
+      return { ...state, deepLinkOpen: !state.deepLinkOpen, deepLinkStatus: null };
+    case "deepLinkInput":
+      return { ...state, deepLinkInput: action.input };
+    case "deepLinkStart":
+      return { ...state, deepLinkBusy: true, deepLinkStatus: null };
+    case "deepLinkStatus":
+      return { ...state, deepLinkStatus: action.status };
+    case "deepLinkDone":
+      return { ...state, deepLinkBusy: false };
+    case "deepLinkSuccess":
+      return { ...state, deepLinkInput: "", deepLinkStatus: action.status };
+  }
+}
diff --git a/apps/app/src/react-app/domains/settings/pages/advanced-view.tsx b/apps/app/src/react-app/domains/settings/pages/advanced-view.tsx
index 2e3e9dcfe..93f7f618d 100644
--- a/apps/app/src/react-app/domains/settings/pages/advanced-view.tsx
+++ b/apps/app/src/react-app/domains/settings/pages/advanced-view.tsx
@@ -1,102 +1,21 @@
 /** @jsxImportSource react */
-import { useReducer, type ReactNode } from "react";
-import { CircleAlert, Cpu, RefreshCcw, Server, Zap } from "lucide-react";
+import { useReducer } from "react";
 
 import type { OpencodeConnectStatus } from "../../../../app/types";
 import type { OpenworkServerStatus } from "../../../../app/lib/openwork-server";
 import type { EngineInfo } from "../../../../app/lib/desktop";
-import { isDesktopRuntime } from "../../../../app/utils";
 import { t } from "../../../../i18n";
-import { Button } from "../../../design-system/button";
 
+import { advancedLocalReducer, initialAdvancedLocalState } from "./advanced-view-state";
+import {
+  AdvancedConnectionSection,
+  AdvancedDeveloperSection,
+  AdvancedFeatureFlagsSection,
+  AdvancedOpencodeSection,
+  AdvancedRuntimeSection,
+} from "./advanced-view-sections";
 import { ConfigView, type ConfigViewProps } from "./config-view";
 
-const settingsPanelClass = "rounded-[28px] border border-dls-border bg-dls-surface p-5 md:p-6";
-const settingsPanelSoftClass = "rounded-2xl border border-gray-6/60 bg-gray-1/40 p-4";
-
-type RuntimeStatusCardProps = {
-  icon: ReactNode;
-  title: string;
-  description: string;
-  statusLabel: string;
-  statusStyle: string;
-  statusDot: string;
-  detailLines?: string[];
-};
-
-type AdvancedLocalState = {
-  reconnectStatus: string | null;
-  reconnectError: string | null;
-  restartBusy: boolean;
-  restartStatus: string | null;
-  restartError: string | null;
-  deepLinkOpen: boolean;
-  deepLinkInput: string;
-  deepLinkBusy: boolean;
-  deepLinkStatus: string | null;
-};
-
-type AdvancedLocalAction =
-  | { type: "reconnectStart" }
-  | { type: "reconnectStatus"; status: string | null }
-  | { type: "reconnectError"; error: string | null }
-  | { type: "restartStart" }
-  | { type: "restartStatus"; status: string | null }
-  | { type: "restartError"; error: string | null }
-  | { type: "restartDone" }
-  | { type: "toggleDeepLink" }
-  | { type: "deepLinkInput"; input: string }
-  | { type: "deepLinkStart" }
-  | { type: "deepLinkStatus"; status: string | null }
-  | { type: "deepLinkDone" }
-  | { type: "deepLinkSuccess"; status: string | null };
-
-const initialAdvancedLocalState: AdvancedLocalState = {
-  reconnectStatus: null,
-  reconnectError: null,
-  restartBusy: false,
-  restartStatus: null,
-  restartError: null,
-  deepLinkOpen: false,
-  deepLinkInput: "",
-  deepLinkBusy: false,
-  deepLinkStatus: null,
-};
-
-function advancedLocalReducer(
-  state: AdvancedLocalState,
-  action: AdvancedLocalAction,
-): AdvancedLocalState {
-  switch (action.type) {
-    case "reconnectStart":
-      return { ...state, reconnectStatus: null, reconnectError: null };
-    case "reconnectStatus":
-      return { ...state, reconnectStatus: action.status };
-    case "reconnectError":
-      return { ...state, reconnectError: action.error };
-    case "restartStart":
-      return { ...state, restartStatus: null, restartError: null, restartBusy: true };
-    case "restartStatus":
-      return { ...state, restartStatus: action.status };
-    case "restartError":
-      return { ...state, restartError: action.error };
-    case "restartDone":
-      return { ...state, restartBusy: false };
-    case "toggleDeepLink":
-      return { ...state, deepLinkOpen: !state.deepLinkOpen, deepLinkStatus: null };
-    case "deepLinkInput":
-      return { ...state, deepLinkInput: action.input };
-    case "deepLinkStart":
-      return { ...state, deepLinkBusy: true, deepLinkStatus: null };
-    case "deepLinkStatus":
-      return { ...state, deepLinkStatus: action.status };
-    case "deepLinkDone":
-      return { ...state, deepLinkBusy: false };
-    case "deepLinkSuccess":
-      return { ...state, deepLinkInput: "", deepLinkStatus: action.status };
-  }
-}
-
 export type AdvancedViewProps = {
   busy: boolean;
   baseUrl: string;
@@ -121,44 +40,6 @@ export type AdvancedViewProps = {
   configView: ConfigViewProps;
 };
 
-function RuntimeStatusCard(props: RuntimeStatusCardProps) {
-  return (
-    <div className={`${settingsPanelSoftClass} space-y-3`}>
-      <div className="flex items-start gap-3">
-        <div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-gray-6/60 bg-gray-1/70 text-gray-12">
-          {props.icon}
-        </div>
-        <div>
-          <div className="text-sm font-medium text-gray-12">{props.title}</div>
-          <div className="text-xs text-gray-9">{props.description}</div>
-        </div>
-      </div>
-      <div
-        className={`inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-[11px] font-medium ${props.statusStyle}`}
-      >
-        <span className={`size-2 rounded-full ${props.statusDot}`} />
-        {props.statusLabel}
-      </div>
-      {props.detailLines?.length ? (
-        <div className="space-y-1 border-t border-gray-6/50 pt-2 text-[11px] text-gray-9">
-          {props.detailLines.map((line) => (
-            <div key={line} className="truncate" title={line}>
-              {line}
-            </div>
-          ))}
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-function formatOpencodeBinary(info: EngineInfo | null) {
-  const binary = info?.opencodeBinPath?.trim();
-  if (!binary) return "—";
-  const source = info?.opencodeBinSource?.trim();
-  return source ? `${binary} (${source})` : binary;
-}
-
 export function AdvancedView(props: AdvancedViewProps) {
   const [localState, dispatchLocal] = useReducer(
     advancedLocalReducer,
@@ -291,214 +172,59 @@ export function AdvancedView(props: AdvancedViewProps) {
 
   return (
     <div className="space-y-6 max-w-3xl w-full">
-      <div className={`${settingsPanelClass} space-y-4`}>
-        <div>
-          <div className="text-sm font-medium text-gray-12">{t("settings.runtime_title")}</div>
-          <div className="text-xs text-gray-9">{t("settings.runtime_desc")}</div>
-        </div>
-
-        <div className="grid gap-3 sm:grid-cols-2">
-          <RuntimeStatusCard
-            icon={<Cpu size={18} />}
-            title={t("settings.opencode_engine_label")}
-            description={t("settings.opencode_engine_desc")}
-            statusLabel={clientStatusLabel}
-            statusStyle={clientStatusStyle}
-            statusDot={clientStatusDot}
-            detailLines={[
-              t("settings.diag_opencode_binary", undefined, {
-                binary: formatOpencodeBinary(props.engineInfo),
-              }),
-            ]}
-          />
-          <RuntimeStatusCard
-            icon={<Server size={18} />}
-            title={t("settings.openwork_server_label")}
-            description={t("settings.openwork_server_desc")}
-            statusLabel={openworkStatusLabel}
-            statusStyle={openworkStatusStyle}
-            statusDot={openworkStatusDot}
-          />
-        </div>
-      </div>
-
-      <div className={`${settingsPanelClass} space-y-3`}>
-        <div>
-          <div className="text-sm font-medium text-gray-12">{t("settings.opencode_section_label")}</div>
-          <div className="text-xs text-gray-9">{t("settings.opencode_engine_desc")}</div>
-        </div>
-
-        <div className="flex items-center justify-between gap-3 rounded-xl border border-gray-6 bg-gray-1 p-3">
-          <div className="min-w-0">
-            <div className="text-sm text-gray-12">{t("settings.enable_exa")}</div>
-            <div className="text-xs text-gray-7">{t("settings.enable_exa_desc")}</div>
-          </div>
-          <Button
-            variant="outline"
-            className="h-8 shrink-0 px-3 py-0 text-xs"
-            onClick={props.toggleOpencodeEnableExa}
-            disabled={props.busy}
-          >
-            {props.opencodeEnableExa ? t("settings.on") : t("settings.off")}
-          </Button>
-        </div>
-
-        <div className="text-[11px] text-gray-7">{t("settings.exa_restart_hint")}</div>
-      </div>
-
-      <div className={`${settingsPanelClass} space-y-3`}>
-        <div>
-          <div className="text-sm font-medium text-gray-12">Feature flags</div>
-          <div className="text-xs text-gray-9">
-            Experimental controls for sandbox and workspace behaviors.
-          </div>
-        </div>
-
-        <div className="flex items-center justify-between gap-3 rounded-xl border border-gray-6 bg-gray-1 p-3">
-          <div className="min-w-0">
-            <div className="text-sm text-gray-12">Create Sandbox uses microsandbox image</div>
-            <div className="text-xs text-gray-7">
-              When enabled, Create Sandbox launches the detached worker with the microsandbox image
-              flow instead of the default Docker image flow.
-            </div>
-          </div>
-          <Button
-            variant="outline"
-            className="h-8 shrink-0 px-3 py-0 text-xs"
-            onClick={props.toggleMicrosandboxCreateSandbox}
-            disabled={props.busy || !isDesktopRuntime()}
-          >
-            {props.microsandboxCreateSandboxEnabled ? "On" : "Off"}
-          </Button>
-        </div>
-      </div>
-
-      <div className={`${settingsPanelClass} space-y-3`}>
-        <div className="text-sm font-medium text-gray-12">{t("settings.developer_mode_title")}</div>
-        <div className="text-xs text-gray-9">{t("settings.developer_mode_desc")}</div>
-        <div className="flex flex-wrap items-center gap-3 pt-1">
-          <button
-            type="button"
-            className={`inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-xs font-medium shadow-sm transition-colors duration-150 focus:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-60 ${
-              props.developerMode
-                ? "border-blue-7/35 bg-blue-3/20 text-blue-11 hover:bg-blue-3/35 hover:text-blue-11 focus-visible:ring-[rgba(var(--dls-accent-rgb),0.25)]"
-                : "border-dls-border bg-dls-surface text-dls-secondary hover:bg-dls-hover hover:text-dls-text focus-visible:ring-[rgba(var(--dls-accent-rgb),0.25)]"
-            }`}
-            onClick={props.toggleDeveloperMode}
-          >
-            <Zap size={14} className={props.developerMode ? "text-blue-10" : "text-dls-secondary"} />
-            {props.developerMode
-              ? t("settings.disable_developer_mode")
-              : t("settings.enable_developer_mode")}
-          </button>
-          <div className="text-xs text-gray-10">
-            {props.developerMode
-              ? t("settings.developer_panel_enabled")
-              : t("settings.developer_panel_disabled")}
-          </div>
-        </div>
-
-        {isDesktopRuntime() && props.opencodeDevModeEnabled && props.developerMode ? (
-          <div className={`${settingsPanelSoftClass} space-y-3`}>
-            <div className="flex items-start justify-between gap-3">
-              <div>
-                <div className="text-sm font-medium text-gray-12">{t("settings.open_deeplink_title")}</div>
-                <div className="text-xs text-gray-9">{t("settings.open_deeplink_desc")}</div>
-              </div>
-              <button
-                type="button"
-                className="inline-flex items-center gap-1.5 rounded-md border border-dls-border bg-dls-surface px-3 py-1.5 text-xs font-medium text-dls-secondary shadow-sm transition-colors duration-150 hover:bg-dls-hover hover:text-dls-text focus:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(var(--dls-accent-rgb),0.25)] disabled:cursor-not-allowed disabled:opacity-60"
-                onClick={() => dispatchLocal({ type: "toggleDeepLink" })}
-                disabled={props.busy || debugDeepLinkBusy}
-              >
-                {debugDeepLinkOpen ? t("common.hide") : t("settings.open_deeplink_button")}
-              </button>
-            </div>
-
-            {debugDeepLinkOpen ? (
-              <div className="space-y-3">
-                <textarea
-                  value={debugDeepLinkInput}
-                  onChange={(event) => dispatchLocal({ type: "deepLinkInput", input: event.currentTarget.value })}
-                  rows={3}
-                  placeholder="openwork://..."
-                  className="w-full rounded-xl border border-gray-6 bg-gray-1 px-3 py-2 text-xs font-mono text-gray-12 outline-none transition focus:border-blue-8"
-                />
-                <div className="flex flex-wrap items-center gap-2">
-                  <Button
-                    variant="secondary"
-                    className="h-8 px-3 py-0 text-xs"
-                    onClick={() => void submitDebugDeepLink()}
-                    disabled={props.busy || debugDeepLinkBusy || !debugDeepLinkInput.trim()}
-                  >
-                    {debugDeepLinkBusy ? t("settings.opening") : t("settings.open_deeplink_action")}
-                  </Button>
-                  <div className="text-[11px] text-gray-8">{t("settings.deeplink_hint")}</div>
-                </div>
-              </div>
-            ) : null}
-
-            {debugDeepLinkStatus ? <div className="text-xs text-gray-10">{debugDeepLinkStatus}</div> : null}
-          </div>
-        ) : null}
-      </div>
-
-      <div className={`${settingsPanelClass} space-y-3`}>
-        <div className="text-sm font-medium text-gray-12">{t("settings.connection_title")}</div>
-        <div className="text-xs text-gray-9">{props.headerStatus}</div>
-        <div className="break-all font-mono text-xs text-gray-8">{props.baseUrl}</div>
-        <div className="flex flex-wrap gap-2 pt-2">
-          <button
-            type="button"
-            className="inline-flex items-center gap-1.5 rounded-md border border-dls-border bg-dls-surface px-3 py-1.5 text-xs font-medium text-dls-secondary shadow-sm transition-colors duration-150 hover:bg-dls-hover hover:text-dls-text focus:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(var(--dls-accent-rgb),0.25)] disabled:cursor-not-allowed disabled:opacity-60"
-            onClick={() => void handleReconnectOpenworkServer()}
-            disabled={props.busy || props.openworkReconnectBusy || !props.openworkServerUrl.trim()}
-          >
-            <RefreshCcw size={14} className={`text-dls-secondary ${props.openworkReconnectBusy ? "animate-spin" : ""}`} />
-            {props.openworkReconnectBusy ? t("settings.reconnecting") : t("settings.reconnect_server")}
-          </button>
-
-          {isLocalEngineRunning ? (
-            <button
-              type="button"
-              className="inline-flex items-center gap-1.5 rounded-md border border-dls-border bg-dls-surface px-3 py-1.5 text-xs font-medium text-dls-secondary shadow-sm transition-colors duration-150 hover:bg-dls-hover hover:text-dls-text focus:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(var(--dls-accent-rgb),0.25)] disabled:cursor-not-allowed disabled:opacity-60"
-              onClick={() => void handleRestartLocalServer()}
-              disabled={props.busy || openworkRestartBusy}
-            >
-              <RefreshCcw size={14} className={`text-dls-secondary ${openworkRestartBusy ? "animate-spin" : ""}`} />
-              {openworkRestartBusy ? t("settings.restarting") : t("settings.restart_openwork_server")}
-            </button>
-          ) : null}
-
-          {isLocalEngineRunning ? (
-            <button
-              type="button"
-              className="inline-flex items-center gap-1.5 rounded-md border border-red-7/35 bg-red-3/25 px-3 py-1.5 text-xs font-medium text-red-11 transition-colors duration-150 hover:border-red-7/50 hover:bg-red-3/45 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-7/35 disabled:cursor-not-allowed disabled:opacity-60"
-              onClick={props.stopHost}
-              disabled={props.busy}
-            >
-              <CircleAlert size={14} />
-              {t("settings.stop_local_server")}
-            </button>
-          ) : null}
-
-          {!isLocalEngineRunning && props.openworkServerStatus === "connected" ? (
-            <button
-              type="button"
-              className="inline-flex items-center gap-1.5 rounded-md border border-dls-border bg-dls-surface px-3 py-1.5 text-xs font-medium text-dls-secondary shadow-sm transition-colors duration-150 hover:bg-dls-hover hover:text-dls-text focus:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(var(--dls-accent-rgb),0.25)] disabled:cursor-not-allowed disabled:opacity-60"
-              onClick={props.stopHost}
-              disabled={props.busy}
-            >
-              {t("settings.disconnect_server")}
-            </button>
-          ) : null}
-        </div>
-
-        {openworkReconnectStatus ? <div className="text-xs text-gray-10">{openworkReconnectStatus}</div> : null}
-        {openworkReconnectError ? <div className="text-xs text-red-11">{openworkReconnectError}</div> : null}
-        {openworkRestartStatus ? <div className="text-xs text-gray-10">{openworkRestartStatus}</div> : null}
-        {openworkRestartError ? <div className="text-xs text-red-11">{openworkRestartError}</div> : null}
-      </div>
+      <AdvancedRuntimeSection
+        engineInfo={props.engineInfo}
+        clientStatusLabel={clientStatusLabel}
+        clientStatusStyle={clientStatusStyle}
+        clientStatusDot={clientStatusDot}
+        openworkStatusLabel={openworkStatusLabel}
+        openworkStatusStyle={openworkStatusStyle}
+        openworkStatusDot={openworkStatusDot}
+      />
+
+      <AdvancedOpencodeSection
+        busy={props.busy}
+        enabled={props.opencodeEnableExa}
+        onToggle={props.toggleOpencodeEnableExa}
+      />
+
+      <AdvancedFeatureFlagsSection
+        busy={props.busy}
+        microsandboxCreateSandboxEnabled={props.microsandboxCreateSandboxEnabled}
+        onToggleMicrosandboxCreateSandbox={props.toggleMicrosandboxCreateSandbox}
+      />
+
+      <AdvancedDeveloperSection
+        busy={props.busy}
+        developerMode={props.developerMode}
+        opencodeDevModeEnabled={props.opencodeDevModeEnabled}
+        deepLinkOpen={debugDeepLinkOpen}
+        deepLinkInput={debugDeepLinkInput}
+        deepLinkBusy={debugDeepLinkBusy}
+        deepLinkStatus={debugDeepLinkStatus}
+        onToggleDeveloperMode={props.toggleDeveloperMode}
+        onToggleDeepLink={() => dispatchLocal({ type: "toggleDeepLink" })}
+        onDeepLinkInput={(input) => dispatchLocal({ type: "deepLinkInput", input })}
+        onSubmitDeepLink={submitDebugDeepLink}
+      />
+
+      <AdvancedConnectionSection
+        busy={props.busy}
+        headerStatus={props.headerStatus}
+        baseUrl={props.baseUrl}
+        openworkServerUrl={props.openworkServerUrl}
+        openworkServerStatus={props.openworkServerStatus}
+        openworkReconnectBusy={props.openworkReconnectBusy}
+        isLocalEngineRunning={isLocalEngineRunning}
+        restartBusy={openworkRestartBusy}
+        reconnectStatus={openworkReconnectStatus}
+        reconnectError={openworkReconnectError}
+        restartStatus={openworkRestartStatus}
+        restartError={openworkRestartError}
+        onReconnect={handleReconnectOpenworkServer}
+        onRestart={handleRestartLocalServer}
+        onStopHost={props.stopHost}
+      />
 
       {props.developerMode ? <ConfigView {...props.configView} /> : null}
     </div>
diff --git a/apps/app/src/react-app/domains/settings/pages/config-view-sections.tsx b/apps/app/src/react-app/domains/settings/pages/config-view-sections.tsx
new file mode 100644
index 000000000..154f95c39
--- /dev/null
+++ b/apps/app/src/react-app/domains/settings/pages/config-view-sections.tsx
@@ -0,0 +1,230 @@
+/** @jsxImportSource react */
+import { RefreshCcw } from "lucide-react";
+
+import type { OpenworkServerInfo } from "../../../../app/lib/desktop";
+import { t } from "../../../../i18n";
+import { Button } from "../../../design-system/button";
+import { TextInput } from "../../../design-system/text-input";
+import type { OpenworkTestState, TokenVisibilityKey } from "./config-view-state";
+
+export function ConfigWorkspaceSummary(props: { runtimeWorkspaceId: string | null }) {
+  return (
+    <div className="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-2">
+      <div className="text-sm font-medium text-gray-12">{t("config.workspace_config_title")}</div>
+      <div className="text-xs text-gray-10">{t("config.workspace_config_desc")}</div>
+      {props.runtimeWorkspaceId ? (
+        <div className="text-[11px] text-gray-7 font-mono truncate">
+          {t("config.workspace_id_prefix")}
+          {props.runtimeWorkspaceId}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export function ConfigEngineReloadSection(props: {
+  anyActiveRuns: boolean;
+  reloadBusy: boolean;
+  reloadError: string | null;
+  reloadAvailabilityReason: string | null;
+  reloadButtonTone: "danger" | "secondary";
+  reloadButtonDisabled: boolean;
+  reloadButtonLabel: string;
+  onReload: () => Promise<void>;
+}) {
+  return (
+    <div className="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-4">
+      <div>
+        <div className="text-sm font-medium text-gray-12">{t("config.engine_reload_title")}</div>
+        <div className="text-xs text-gray-10">{t("config.engine_reload_desc")}</div>
+      </div>
+      <div className="flex items-center justify-between bg-gray-1 p-3 rounded-xl border border-gray-6 gap-3">
+        <div className="min-w-0 space-y-1">
+          <div className="text-sm text-gray-12">{t("config.reload_now_title")}</div>
+          <div className="text-xs text-gray-7">{t("config.reload_now_desc")}</div>
+          {props.anyActiveRuns ? <div className="text-[11px] text-amber-11">{t("config.reload_active_tasks_warning")}</div> : null}
+          {props.reloadError ? <div className="text-[11px] text-red-11">{props.reloadError}</div> : null}
+          {props.reloadAvailabilityReason ? <div className="text-[11px] text-gray-9">{props.reloadAvailabilityReason}</div> : null}
+        </div>
+        <Button variant={props.reloadButtonTone} className="text-xs h-8 py-0 px-3 shrink-0" onClick={props.onReload} disabled={props.reloadButtonDisabled}>
+          <RefreshCcw size={14} className={props.reloadBusy ? "animate-spin" : ""} />
+          {props.reloadButtonLabel}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function ConfigDiagnosticsSection(props: {
+  busy: boolean;
+  diagnosticsBundleJson: string;
+  copyingField: string | null;
+  onCopy: (value: string, field: string) => void | Promise<void>;
+}) {
+  return (
+    <div className="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-3">
+      <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+        <div>
+          <div className="text-sm font-medium text-gray-12">{t("config.diagnostics_title")}</div>
+          <div className="text-xs text-gray-10">{t("config.diagnostics_desc")}</div>
+        </div>
+        <Button variant="secondary" className="text-xs h-8 py-0 px-3 shrink-0" onClick={() => void props.onCopy(props.diagnosticsBundleJson, "debug-bundle")} disabled={props.busy}>
+          {props.copyingField === "debug-bundle" ? t("config.copied") : t("config.copy")}
+        </Button>
+      </div>
+      <pre className="text-xs text-gray-12 whitespace-pre-wrap break-words max-h-64 overflow-auto bg-gray-1/20 border border-gray-6 rounded-xl p-3">
+        {props.diagnosticsBundleJson}
+      </pre>
+    </div>
+  );
+}
+
+function TokenRow(props: {
+  label: string;
+  tokenValue: string | null | undefined;
+  hint: string;
+  visible: boolean;
+  toggle: () => void;
+  copyKey: string;
+  copyingField: string | null;
+  onCopy: (value: string, field: string) => void | Promise<void>;
+}) {
+  return (
+    <div className="flex items-center justify-between bg-gray-1 p-3 rounded-xl border border-gray-6 gap-3">
+      <div className="min-w-0">
+        <div className="text-xs font-medium text-gray-11">{props.label}</div>
+        <div className="text-xs text-gray-7 font-mono truncate">
+          {props.visible ? props.tokenValue || "—" : props.tokenValue ? "••••••••••••" : "—"}
+        </div>
+        <div className="text-[11px] text-gray-8 mt-1">{props.hint}</div>
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        <Button variant="outline" className="text-xs h-8 py-0 px-3" onClick={props.toggle} disabled={!props.tokenValue}>
+          {props.visible ? t("common.hide") : t("common.show")}
+        </Button>
+        <Button variant="outline" className="text-xs h-8 py-0 px-3" onClick={() => props.onCopy(props.tokenValue ?? "", props.copyKey)} disabled={!props.tokenValue}>
+          {props.copyingField === props.copyKey ? t("config.copied") : t("config.copy")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function ConfigServerSharingSection(props: {
+  hostInfo: OpenworkServerInfo;
+  hostConnectUrl: string;
+  hostRemoteAccessEnabled: boolean;
+  hostConnectUrlUsesMdns: boolean;
+  hostStatusLabel: string;
+  hostStatusStyle: string;
+  tokenVisible: Record<TokenVisibilityKey, boolean>;
+  copyingField: string | null;
+  onCopy: (value: string, field: string) => void | Promise<void>;
+  onToggleToken: (key: TokenVisibilityKey) => void;
+}) {
+  const hostUrlHint = !props.hostRemoteAccessEnabled
+    ? t("config.remote_access_off_hint")
+    : props.hostConnectUrlUsesMdns
+      ? t("config.mdns_hint")
+      : t("config.local_ip_hint");
+  return (
+    <div className="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-4">
+      <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+        <div>
+          <div className="text-sm font-medium text-gray-12">{t("config.server_sharing_title")}</div>
+          <div className="text-xs text-gray-10">{t("config.server_sharing_desc")}</div>
+        </div>
+        <div className={`text-xs px-2 py-1 rounded-full border ${props.hostStatusStyle}`}>{props.hostStatusLabel}</div>
+      </div>
+      <div className="grid gap-3">
+        <div className="flex items-center justify-between bg-gray-1 p-3 rounded-xl border border-gray-6 gap-3">
+          <div className="min-w-0">
+            <div className="text-xs font-medium text-gray-11">{t("config.server_url_label")}</div>
+            <div className="text-xs text-gray-7 font-mono truncate">{props.hostConnectUrl || t("config.starting_server")}</div>
+            {props.hostConnectUrl ? <div className="text-[11px] text-gray-8 mt-1">{hostUrlHint}</div> : null}
+          </div>
+          <Button variant="outline" className="text-xs h-8 py-0 px-3 shrink-0" onClick={() => props.onCopy(props.hostConnectUrl, "host-url")} disabled={!props.hostConnectUrl}>
+            {props.copyingField === "host-url" ? t("config.copied") : t("config.copy")}
+          </Button>
+        </div>
+        <TokenRow label={t("config.collaborator_token_label")} tokenValue={props.hostInfo.clientToken} hint={props.hostRemoteAccessEnabled ? t("config.collaborator_token_remote_hint") : t("config.collaborator_token_disabled_hint")} visible={props.tokenVisible.client} toggle={() => props.onToggleToken("client")} copyKey="client-token" copyingField={props.copyingField} onCopy={props.onCopy} />
+        <TokenRow label={t("config.owner_token_label")} tokenValue={props.hostInfo.ownerToken} hint={props.hostRemoteAccessEnabled ? t("config.owner_token_remote_hint") : t("config.owner_token_disabled_hint")} visible={props.tokenVisible.owner} toggle={() => props.onToggleToken("owner")} copyKey="owner-token" copyingField={props.copyingField} onCopy={props.onCopy} />
+        <TokenRow label={t("config.host_admin_token_label")} tokenValue={props.hostInfo.hostToken} hint={t("config.host_admin_token_hint")} visible={props.tokenVisible.host} toggle={() => props.onToggleToken("host")} copyKey="host-token" copyingField={props.copyingField} onCopy={props.onCopy} />
+      </div>
+      <div className="text-xs text-gray-9">{t("config.server_sharing_menu_hint")}</div>
+    </div>
+  );
+}
+
+export function ConfigServerConnectionSection(props: {
+  busy: boolean;
+  openworkUrl: string;
+  openworkToken: string;
+  tokenVisible: boolean;
+  openworkStatusLabel: string;
+  openworkStatusStyle: string;
+  resolvedWorkspaceUrl: string;
+  resolvedWorkspaceId: string;
+  openworkTestState: OpenworkTestState;
+  openworkTestMessage: string | null;
+  hasOpenworkChanges: boolean;
+  onUrlChange: (url: string) => void;
+  onTokenChange: (token: string) => void;
+  onToggleToken: () => void;
+  onTestConnection: () => Promise<void>;
+  onSave: () => void;
+  onReset: () => void;
+}) {
+  return (
+    <div className="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-4">
+      <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+        <div>
+          <div className="text-sm font-medium text-gray-12">{t("config.server_section_title")}</div>
+          <div className="text-xs text-gray-10">{t("config.server_section_desc")}</div>
+        </div>
+        <div className={`text-xs px-2 py-1 rounded-full border ${props.openworkStatusStyle}`}>{props.openworkStatusLabel}</div>
+      </div>
+      <div className="grid gap-3">
+        <TextInput label={t("config.server_url_input_label")} value={props.openworkUrl} onChange={(event) => props.onUrlChange(event.currentTarget.value)} placeholder="http://127.0.0.1:<port>" hint={t("config.server_url_hint")} disabled={props.busy} />
+        <label className="block">
+          <div className="mb-1 text-xs font-medium text-gray-11">{t("config.token_label")}</div>
+          <div className="flex items-center gap-2">
+            <input type={props.tokenVisible ? "text" : "password"} value={props.openworkToken} onChange={(event) => props.onTokenChange(event.currentTarget.value)} placeholder={t("config.token_placeholder")} disabled={props.busy} className="w-full rounded-xl bg-gray-2/60 px-3 py-2 text-sm text-gray-12 placeholder:text-gray-10 shadow-[0_0_0_1px_rgba(255,255,255,0.08)] focus:outline-none focus:ring-2 focus:ring-gray-6/20" />
+            <Button variant="outline" className="text-xs h-9 px-3 shrink-0" onClick={props.onToggleToken} disabled={props.busy}>
+              {props.tokenVisible ? t("common.hide") : t("common.show")}
+            </Button>
+          </div>
+          <div className="mt-1 text-xs text-gray-10">{t("config.token_hint")}</div>
+        </label>
+      </div>
+      <div className="space-y-1">
+        <div className="text-[11px] text-gray-7 font-mono truncate">{t("config.resolved_worker_url")}{props.resolvedWorkspaceUrl || t("config.not_set")}</div>
+        <div className="text-[11px] text-gray-8 font-mono truncate">{t("config.worker_id")}{props.resolvedWorkspaceId || t("config.unavailable")}</div>
+      </div>
+      <div className="flex flex-wrap gap-2">
+        <Button variant="secondary" onClick={() => void props.onTestConnection()} disabled={props.busy || props.openworkTestState === "testing"}>{props.openworkTestState === "testing" ? t("config.testing") : t("config.test_connection")}</Button>
+        <Button variant="outline" onClick={props.onSave} disabled={props.busy || !props.hasOpenworkChanges}>{t("common.save")}</Button>
+        <Button variant="ghost" onClick={props.onReset} disabled={props.busy}>{t("common.reset")}</Button>
+      </div>
+      {props.openworkTestState !== "idle" ? <ConfigConnectionTestStatus state={props.openworkTestState} message={props.openworkTestMessage} /> : null}
+      {props.openworkStatusLabel !== t("config.status_connected") ? <div className="text-xs text-gray-9">{t("config.server_needed_hint")}</div> : null}
+    </div>
+  );
+}
+
+function ConfigConnectionTestStatus(props: { state: OpenworkTestState; message: string | null }) {
+  return (
+    <div className={`text-xs ${props.state === "success" ? "text-green-11" : props.state === "error" ? "text-red-11" : "text-gray-9"}`} role="status" aria-live="polite">
+      {props.state === "testing" ? t("config.testing_connection") : (props.message ?? t("config.connection_status_updated"))}
+    </div>
+  );
+}
+
+export function ConfigMessagingIdentitiesSection() {
+  return (
+    <div className="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-2">
+      <div className="text-sm font-medium text-gray-12">{t("config.messaging_identities_title")}</div>
+      <div className="text-xs text-gray-10">{t("config.messaging_identities_desc")}</div>
+    </div>
+  );
+}
diff --git a/apps/app/src/react-app/domains/settings/pages/config-view-state.ts b/apps/app/src/react-app/domains/settings/pages/config-view-state.ts
new file mode 100644
index 000000000..618e09589
--- /dev/null
+++ b/apps/app/src/react-app/domains/settings/pages/config-view-state.ts
@@ -0,0 +1,89 @@
+export type OpenworkTestState = "idle" | "testing" | "success" | "error";
+
+export type OpenworkConnectionState = {
+  url: string;
+  token: string;
+  testState: OpenworkTestState;
+  testMessage: string | null;
+};
+
+export type TokenVisibilityKey = "openwork" | "client" | "owner" | "host";
+
+type ConfigLocalState = {
+  openworkConnection: OpenworkConnectionState;
+  tokenVisible: Record<TokenVisibilityKey, boolean>;
+  copyingField: string | null;
+};
+
+type ConfigLocalAction =
+  | { type: "serverSettings"; connection: OpenworkConnectionState }
+  | { type: "url"; url: string }
+  | { type: "token"; token: string }
+  | { type: "testState"; testState: OpenworkTestState; testMessage: string | null }
+  | { type: "toggleToken"; key: TokenVisibilityKey }
+  | { type: "copyingField"; field: string | null };
+
+export const initialConfigLocalState: ConfigLocalState = {
+  openworkConnection: {
+    url: "",
+    token: "",
+    testState: "idle",
+    testMessage: null,
+  },
+  tokenVisible: {
+    openwork: false,
+    client: false,
+    owner: false,
+    host: false,
+  },
+  copyingField: null,
+};
+
+export function configLocalReducer(
+  state: ConfigLocalState,
+  action: ConfigLocalAction,
+): ConfigLocalState {
+  switch (action.type) {
+    case "serverSettings":
+      return { ...state, openworkConnection: action.connection };
+    case "url":
+      return {
+        ...state,
+        openworkConnection: {
+          ...state.openworkConnection,
+          url: action.url,
+          testState: "idle",
+          testMessage: null,
+        },
+      };
+    case "token":
+      return {
+        ...state,
+        openworkConnection: {
+          ...state.openworkConnection,
+          token: action.token,
+          testState: "idle",
+          testMessage: null,
+        },
+      };
+    case "testState":
+      return {
+        ...state,
+        openworkConnection: {
+          ...state.openworkConnection,
+          testState: action.testState,
+          testMessage: action.testMessage,
+        },
+      };
+    case "toggleToken":
+      return {
+        ...state,
+        tokenVisible: {
+          ...state.tokenVisible,
+          [action.key]: !state.tokenVisible[action.key],
+        },
+      };
+    case "copyingField":
+      return { ...state, copyingField: action.field };
+  }
+}
diff --git a/apps/app/src/react-app/domains/settings/pages/config-view.tsx b/apps/app/src/react-app/domains/settings/pages/config-view.tsx
index 14fa79453..216f6dc0e 100644
--- a/apps/app/src/react-app/domains/settings/pages/config-view.tsx
+++ b/apps/app/src/react-app/domains/settings/pages/config-view.tsx
@@ -13,8 +13,15 @@ import {
 import type { OpenworkServerInfo } from "../../../../app/lib/desktop";
 import { isDesktopRuntime } from "../../../../app/utils";
 import { t } from "../../../../i18n";
-import { Button } from "../../../design-system/button";
-import { TextInput } from "../../../design-system/text-input";
+import {
+  ConfigDiagnosticsSection,
+  ConfigEngineReloadSection,
+  ConfigMessagingIdentitiesSection,
+  ConfigServerConnectionSection,
+  ConfigServerSharingSection,
+  ConfigWorkspaceSummary,
+} from "./config-view-sections";
+import { configLocalReducer, initialConfigLocalState } from "./config-view-state";
 
 export type ConfigViewProps = {
   busy: boolean;
@@ -41,135 +48,69 @@ export type ConfigViewProps = {
   developerMode: boolean;
 };
 
-type OpenworkTestState = "idle" | "testing" | "success" | "error";
-
-type OpenworkConnectionState = {
-  url: string;
-  token: string;
-  testState: OpenworkTestState;
-  testMessage: string | null;
-};
-
-type TokenVisibilityKey = "openwork" | "client" | "owner" | "host";
-
-type ConfigLocalState = {
-  openworkConnection: OpenworkConnectionState;
-  tokenVisible: Record<TokenVisibilityKey, boolean>;
-  copyingField: string | null;
-};
-
-type ConfigLocalAction =
-  | { type: "serverSettings"; connection: OpenworkConnectionState }
-  | { type: "url"; url: string }
-  | { type: "token"; token: string }
-  | { type: "testState"; testState: OpenworkTestState; testMessage: string | null }
-  | { type: "toggleToken"; key: TokenVisibilityKey }
-  | { type: "copyingField"; field: string | null };
-
-const initialConfigLocalState: ConfigLocalState = {
-  openworkConnection: {
-    url: "",
-    token: "",
-    testState: "idle",
-    testMessage: null,
-  },
-  tokenVisible: {
-    openwork: false,
-    client: false,
-    owner: false,
-    host: false,
-  },
-  copyingField: null,
-};
-
-function configLocalReducer(
-  state: ConfigLocalState,
-  action: ConfigLocalAction,
-): ConfigLocalState {
-  switch (action.type) {
-    case "serverSettings":
-      return { ...state, openworkConnection: action.connection };
-    case "url":
-      return {
-        ...state,
-        openworkConnection: {
-          ...state.openworkConnection,
-          url: action.url,
-          testState: "idle",
-          testMessage: null,
-        },
-      };
-    case "token":
-      return {
-        ...state,
-        openworkConnection: {
-          ...state.openworkConnection,
-          token: action.token,
-          testState: "idle",
-          testMessage: null,
-        },
-      };
-    case "testState":
-      return {
-        ...state,
-        openworkConnection: {
-          ...state.openworkConnection,
-          testState: action.testState,
-          testMessage: action.testMessage,
-        },
-      };
-    case "toggleToken":
-      return {
-        ...state,
-        tokenVisible: {
-          ...state.tokenVisible,
-          [action.key]: !state.tokenVisible[action.key],
-        },
-      };
-    case "copyingField":
-      return { ...state, copyingField: action.field };
-  }
-}
-
-function TokenRow(props: {
-  label: string;
-  tokenValue: string | null | undefined;
-  hint: string;
-  visible: boolean;
-  toggle: () => void;
-  copyKey: string;
-  copyingField: string | null;
-  onCopy: (value: string, field: string) => void | Promise<void>;
+function buildDiagnosticsBundleJson(input: {
+  anyActiveRuns: boolean;
+  canReloadWorkspace: boolean;
+  clientConnected: boolean;
+  developerMode: boolean;
+  hostConnectUrl: string;
+  hostConnectUrlUsesMdns: boolean;
+  hostInfo: OpenworkServerInfo | null;
+  openworkServerSettings: OpenworkServerSettings;
+  openworkServerStatus: OpenworkServerStatus;
+  openworkServerUrl: string;
+  runtimeWorkspaceId: string | null;
 }) {
-  return (
-    <div className="flex items-center justify-between bg-gray-1 p-3 rounded-xl border border-gray-6 gap-3">
-      <div className="min-w-0">
-        <div className="text-xs font-medium text-gray-11">{props.label}</div>
-        <div className="text-xs text-gray-7 font-mono truncate">
-          {props.visible ? props.tokenValue || "—" : props.tokenValue ? "••••••••••••" : "—"}
-        </div>
-        <div className="text-[11px] text-gray-8 mt-1">{props.hint}</div>
-      </div>
-      <div className="flex items-center gap-2 shrink-0">
-        <Button
-          variant="outline"
-          className="text-xs h-8 py-0 px-3"
-          onClick={props.toggle}
-          disabled={!props.tokenValue}
-        >
-          {props.visible ? t("common.hide") : t("common.show")}
-        </Button>
-        <Button
-          variant="outline"
-          className="text-xs h-8 py-0 px-3"
-          onClick={() => props.onCopy(props.tokenValue ?? "", props.copyKey)}
-          disabled={!props.tokenValue}
-        >
-          {props.copyingField === props.copyKey ? t("config.copied") : t("config.copy")}
-        </Button>
-      </div>
-    </div>
-  );
+  const urlOverride = input.openworkServerSettings.urlOverride?.trim() ?? "";
+  const token = input.openworkServerSettings.token?.trim() ?? "";
+  const developerLogs = input.developerMode ? readDevLogs(80) : [];
+  const perfLogs = input.developerMode ? readPerfLogs(80) : [];
+  const bundle = {
+    capturedAt: new Date().toISOString(),
+    runtime: {
+      tauri: isDesktopRuntime(),
+      developerMode: input.developerMode,
+    },
+    workspace: {
+      runtimeWorkspaceId: input.runtimeWorkspaceId ?? null,
+      clientConnected: input.clientConnected,
+      anyActiveRuns: input.anyActiveRuns,
+    },
+    openworkServer: {
+      status: input.openworkServerStatus,
+      url: input.openworkServerUrl,
+      settings: {
+        urlOverride: urlOverride || null,
+        tokenPresent: Boolean(token),
+      },
+      host: input.hostInfo
+        ? {
+            running: Boolean(input.hostInfo.running),
+            remoteAccessEnabled: input.hostInfo.remoteAccessEnabled,
+            baseUrl: input.hostInfo.baseUrl ?? null,
+            connectUrl: input.hostInfo.connectUrl ?? null,
+            mdnsUrl: input.hostInfo.mdnsUrl ?? null,
+            lanUrl: input.hostInfo.lanUrl ?? null,
+          }
+        : null,
+    },
+    reload: {
+      canReloadWorkspace: input.canReloadWorkspace,
+    },
+    sharing: {
+      hostConnectUrl: input.hostConnectUrl || null,
+      hostConnectUrlUsesMdns: input.hostConnectUrlUsesMdns,
+    },
+    performance: {
+      retainedEntries: perfLogs.length,
+      recent: perfLogs,
+    },
+    developerLogs: {
+      retainedEntries: developerLogs.length,
+      recent: developerLogs,
+    },
+  };
+  return JSON.stringify(bundle, null, 2);
 }
 
 export function ConfigView(props: ConfigViewProps) {
@@ -286,56 +227,19 @@ export function ConfigView(props: ConfigViewProps) {
   const hostConnectUrlUsesMdns = hostConnectUrl.includes(".local");
 
   const diagnosticsBundleJson = useMemo(() => {
-    const urlOverride = props.openworkServerSettings.urlOverride?.trim() ?? "";
-    const token = props.openworkServerSettings.token?.trim() ?? "";
-    const developerLogs = props.developerMode ? readDevLogs(80) : [];
-    const perfLogs = props.developerMode ? readPerfLogs(80) : [];
-    const bundle = {
-      capturedAt: new Date().toISOString(),
-      runtime: {
-        tauri: isDesktopRuntime(),
-        developerMode: props.developerMode,
-      },
-      workspace: {
-        runtimeWorkspaceId: props.runtimeWorkspaceId ?? null,
-        clientConnected: props.clientConnected,
-        anyActiveRuns: props.anyActiveRuns,
-      },
-      openworkServer: {
-        status: props.openworkServerStatus,
-        url: props.openworkServerUrl,
-        settings: {
-          urlOverride: urlOverride || null,
-          tokenPresent: Boolean(token),
-        },
-        host: hostInfo
-          ? {
-              running: Boolean(hostInfo.running),
-              remoteAccessEnabled: hostInfo.remoteAccessEnabled,
-              baseUrl: hostInfo.baseUrl ?? null,
-              connectUrl: hostInfo.connectUrl ?? null,
-              mdnsUrl: hostInfo.mdnsUrl ?? null,
-              lanUrl: hostInfo.lanUrl ?? null,
-            }
-          : null,
-      },
-      reload: {
-        canReloadWorkspace: props.canReloadWorkspace,
-      },
-      sharing: {
-        hostConnectUrl: hostConnectUrl || null,
-        hostConnectUrlUsesMdns,
-      },
-      performance: {
-        retainedEntries: perfLogs.length,
-        recent: perfLogs,
-      },
-      developerLogs: {
-        retainedEntries: developerLogs.length,
-        recent: developerLogs,
-      },
-    };
-    return JSON.stringify(bundle, null, 2);
+    return buildDiagnosticsBundleJson({
+      anyActiveRuns: props.anyActiveRuns,
+      canReloadWorkspace: props.canReloadWorkspace,
+      clientConnected: props.clientConnected,
+      developerMode: props.developerMode,
+      hostConnectUrl,
+      hostConnectUrlUsesMdns,
+      hostInfo,
+      openworkServerSettings: props.openworkServerSettings,
+      openworkServerStatus: props.openworkServerStatus,
+      openworkServerUrl: props.openworkServerUrl,
+      runtimeWorkspaceId: props.runtimeWorkspaceId,
+    });
   }, [
     hostConnectUrl,
     hostConnectUrlUsesMdns,
@@ -401,332 +305,60 @@ export function ConfigView(props: ConfigViewProps) {
 
   return (
     <section className="space-y-6 max-w-3xl w-full">
-      <div className="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-2">
-        <div className="text-sm font-medium text-gray-12">
-          {t("config.workspace_config_title")}
-        </div>
-        <div className="text-xs text-gray-10">
-          {t("config.workspace_config_desc")}
-        </div>
-        {props.runtimeWorkspaceId ? (
-          <div className="text-[11px] text-gray-7 font-mono truncate">
-            {t("config.workspace_id_prefix")}
-            {props.runtimeWorkspaceId}
-          </div>
-        ) : null}
-      </div>
-
-      <div className="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-4">
-        <div>
-          <div className="text-sm font-medium text-gray-12">
-            {t("config.engine_reload_title")}
-          </div>
-          <div className="text-xs text-gray-10">
-            {t("config.engine_reload_desc")}
-          </div>
-        </div>
-
-        <div className="flex items-center justify-between bg-gray-1 p-3 rounded-xl border border-gray-6 gap-3">
-          <div className="min-w-0 space-y-1">
-            <div className="text-sm text-gray-12">
-              {t("config.reload_now_title")}
-            </div>
-            <div className="text-xs text-gray-7">
-              {t("config.reload_now_desc")}
-            </div>
-            {props.anyActiveRuns ? (
-              <div className="text-[11px] text-amber-11">
-                {t("config.reload_active_tasks_warning")}
-              </div>
-            ) : null}
-            {props.reloadError ? (
-              <div className="text-[11px] text-red-11">{props.reloadError}</div>
-            ) : null}
-            {reloadAvailabilityReason ? (
-              <div className="text-[11px] text-gray-9">
-                {reloadAvailabilityReason}
-              </div>
-            ) : null}
-          </div>
-          <Button
-            variant={reloadButtonTone}
-            className="text-xs h-8 py-0 px-3 shrink-0"
-            onClick={props.reloadWorkspaceEngine}
-            disabled={reloadButtonDisabled}
-          >
-            <RefreshCcw
-              size={14}
-              className={props.reloadBusy ? "animate-spin" : ""}
-            />
-            {reloadButtonLabel}
-          </Button>
-        </div>
-      </div>
-
+      <ConfigWorkspaceSummary runtimeWorkspaceId={props.runtimeWorkspaceId} />
+      <ConfigEngineReloadSection
+        anyActiveRuns={props.anyActiveRuns}
+        reloadBusy={props.reloadBusy}
+        reloadError={props.reloadError}
+        reloadAvailabilityReason={reloadAvailabilityReason}
+        reloadButtonTone={reloadButtonTone}
+        reloadButtonDisabled={reloadButtonDisabled}
+        reloadButtonLabel={reloadButtonLabel}
+        onReload={props.reloadWorkspaceEngine}
+      />
       {props.developerMode ? (
-        <div className="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-3">
-          <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
-            <div>
-              <div className="text-sm font-medium text-gray-12">
-                {t("config.diagnostics_title")}
-              </div>
-              <div className="text-xs text-gray-10">
-                {t("config.diagnostics_desc")}
-              </div>
-            </div>
-            <Button
-              variant="secondary"
-              className="text-xs h-8 py-0 px-3 shrink-0"
-              onClick={() =>
-                void handleCopy(diagnosticsBundleJson, "debug-bundle")
-              }
-              disabled={props.busy}
-            >
-              {copyingField === "debug-bundle"
-                ? t("config.copied")
-                : t("config.copy")}
-            </Button>
-          </div>
-          <pre className="text-xs text-gray-12 whitespace-pre-wrap break-words max-h-64 overflow-auto bg-gray-1/20 border border-gray-6 rounded-xl p-3">
-            {diagnosticsBundleJson}
-          </pre>
-        </div>
+        <ConfigDiagnosticsSection
+          busy={props.busy}
+          diagnosticsBundleJson={diagnosticsBundleJson}
+          copyingField={copyingField}
+          onCopy={handleCopy}
+        />
       ) : null}
-
       {hostInfo ? (
-        <div className="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-4">
-          <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
-            <div>
-              <div className="text-sm font-medium text-gray-12">
-                {t("config.server_sharing_title")}
-              </div>
-              <div className="text-xs text-gray-10">
-                {t("config.server_sharing_desc")}
-              </div>
-            </div>
-            <div
-              className={`text-xs px-2 py-1 rounded-full border ${hostStatusStyle}`}
-            >
-              {hostStatusLabel}
-            </div>
-          </div>
-
-          <div className="grid gap-3">
-            <div className="flex items-center justify-between bg-gray-1 p-3 rounded-xl border border-gray-6 gap-3">
-              <div className="min-w-0">
-                <div className="text-xs font-medium text-gray-11">
-                  {t("config.server_url_label")}
-                </div>
-                <div className="text-xs text-gray-7 font-mono truncate">
-                  {hostConnectUrl || t("config.starting_server")}
-                </div>
-                {hostConnectUrl ? (
-                  <div className="text-[11px] text-gray-8 mt-1">
-                    {!hostRemoteAccessEnabled
-                      ? t("config.remote_access_off_hint")
-                      : hostConnectUrlUsesMdns
-                        ? t("config.mdns_hint")
-                        : t("config.local_ip_hint")}
-                  </div>
-                ) : null}
-              </div>
-              <Button
-                variant="outline"
-                className="text-xs h-8 py-0 px-3 shrink-0"
-                onClick={() => handleCopy(hostConnectUrl, "host-url")}
-                disabled={!hostConnectUrl}
-              >
-                {copyingField === "host-url"
-                  ? t("config.copied")
-                  : t("config.copy")}
-              </Button>
-            </div>
-
-            <TokenRow
-              label={t("config.collaborator_token_label")}
-              tokenValue={hostInfo?.clientToken}
-              hint={
-                hostRemoteAccessEnabled
-                  ? t("config.collaborator_token_remote_hint")
-                  : t("config.collaborator_token_disabled_hint")
-              }
-              visible={tokenVisible.client}
-              toggle={() => dispatchLocal({ type: "toggleToken", key: "client" })}
-              copyKey="client-token"
-              copyingField={copyingField}
-              onCopy={handleCopy}
-            />
-
-            <TokenRow
-              label={t("config.owner_token_label")}
-              tokenValue={hostInfo?.ownerToken}
-              hint={
-                hostRemoteAccessEnabled
-                  ? t("config.owner_token_remote_hint")
-                  : t("config.owner_token_disabled_hint")
-              }
-              visible={tokenVisible.owner}
-              toggle={() => dispatchLocal({ type: "toggleToken", key: "owner" })}
-              copyKey="owner-token"
-              copyingField={copyingField}
-              onCopy={handleCopy}
-            />
-
-            <TokenRow
-              label={t("config.host_admin_token_label")}
-              tokenValue={hostInfo?.hostToken}
-              hint={t("config.host_admin_token_hint")}
-              visible={tokenVisible.host}
-              toggle={() => dispatchLocal({ type: "toggleToken", key: "host" })}
-              copyKey="host-token"
-              copyingField={copyingField}
-              onCopy={handleCopy}
-            />
-          </div>
-
-          <div className="text-xs text-gray-9">
-            {t("config.server_sharing_menu_hint")}
-          </div>
-        </div>
-      ) : null}
-
-      <div className="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-4">
-        <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
-          <div>
-            <div className="text-sm font-medium text-gray-12">
-              {t("config.server_section_title")}
-            </div>
-            <div className="text-xs text-gray-10">
-              {t("config.server_section_desc")}
-            </div>
-          </div>
-          <div
-            className={`text-xs px-2 py-1 rounded-full border ${openworkStatusStyle}`}
-          >
-            {openworkStatusLabel}
-          </div>
-        </div>
-
-        <div className="grid gap-3">
-          <TextInput
-            label={t("config.server_url_input_label")}
-            value={openworkUrl}
-            onChange={(event) =>
-              dispatchLocal({ type: "url", url: event.currentTarget.value })
-            }
-            placeholder="http://127.0.0.1:<port>"
-            hint={t("config.server_url_hint")}
-            disabled={props.busy}
-          />
-
-          <label className="block">
-            <div className="mb-1 text-xs font-medium text-gray-11">
-              {t("config.token_label")}
-            </div>
-            <div className="flex items-center gap-2">
-              <input
-                type={tokenVisible.openwork ? "text" : "password"}
-                value={openworkToken}
-                onChange={(event) =>
-                  dispatchLocal({ type: "token", token: event.currentTarget.value })
-                }
-                placeholder={t("config.token_placeholder")}
-                disabled={props.busy}
-                className="w-full rounded-xl bg-gray-2/60 px-3 py-2 text-sm text-gray-12 placeholder:text-gray-10 shadow-[0_0_0_1px_rgba(255,255,255,0.08)] focus:outline-none focus:ring-2 focus:ring-gray-6/20"
-              />
-              <Button
-                variant="outline"
-                className="text-xs h-9 px-3 shrink-0"
-                onClick={() => dispatchLocal({ type: "toggleToken", key: "openwork" })}
-                disabled={props.busy}
-              >
-                {tokenVisible.openwork ? t("common.hide") : t("common.show")}
-              </Button>
-            </div>
-            <div className="mt-1 text-xs text-gray-10">
-              {t("config.token_hint")}
-            </div>
-          </label>
-        </div>
-
-        <div className="space-y-1">
-          <div className="text-[11px] text-gray-7 font-mono truncate">
-            {t("config.resolved_worker_url")}
-            {resolvedWorkspaceUrl || t("config.not_set")}
-          </div>
-          <div className="text-[11px] text-gray-8 font-mono truncate">
-            {t("config.worker_id")}
-            {resolvedWorkspaceId || t("config.unavailable")}
-          </div>
-        </div>
-
-        <div className="flex flex-wrap gap-2">
-          <Button
-            variant="secondary"
-            onClick={() => void handleTestConnection()}
-            disabled={props.busy || openworkTestState === "testing"}
-          >
-            {openworkTestState === "testing"
-              ? t("config.testing")
-              : t("config.test_connection")}
-          </Button>
-          <Button
-            variant="outline"
-            onClick={() =>
-              props.updateOpenworkServerSettings(buildOpenworkSettings())
-            }
-            disabled={props.busy || !hasOpenworkChanges}
-          >
-            {t("common.save")}
-          </Button>
-          <Button
-            variant="ghost"
-            onClick={props.resetOpenworkServerSettings}
-            disabled={props.busy}
-          >
-            {t("common.reset")}
-          </Button>
-        </div>
-
-        {openworkTestState !== "idle" ? (
-          <div
-            className={`text-xs ${
-              openworkTestState === "success"
-                ? "text-green-11"
-                : openworkTestState === "error"
-                  ? "text-red-11"
-                  : "text-gray-9"
-            }`}
-            role="status"
-            aria-live="polite"
-          >
-            {openworkTestState === "testing"
-              ? t("config.testing_connection")
-              : (openworkTestMessage ?? t("config.connection_status_updated"))}
-          </div>
-        ) : null}
-
-        {openworkStatusLabel !== t("config.status_connected") ? (
-          <div className="text-xs text-gray-9">
-            {t("config.server_needed_hint")}
-          </div>
-        ) : null}
-      </div>
-
-      <div className="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-2">
-        <div className="text-sm font-medium text-gray-12">
-          {t("config.messaging_identities_title")}
-        </div>
-        <div className="text-xs text-gray-10">
-          {t("config.messaging_identities_desc")}
-        </div>
-      </div>
-
-      {!isDesktopRuntime() ? (
-        <div className="text-xs text-gray-9">
-          {t("config.desktop_only_hint")}
-        </div>
+        <ConfigServerSharingSection
+          hostInfo={hostInfo}
+          hostConnectUrl={hostConnectUrl}
+          hostRemoteAccessEnabled={hostRemoteAccessEnabled}
+          hostConnectUrlUsesMdns={hostConnectUrlUsesMdns}
+          hostStatusLabel={hostStatusLabel}
+          hostStatusStyle={hostStatusStyle}
+          tokenVisible={tokenVisible}
+          copyingField={copyingField}
+          onCopy={handleCopy}
+          onToggleToken={(key) => dispatchLocal({ type: "toggleToken", key })}
+        />
       ) : null}
+      <ConfigServerConnectionSection
+        busy={props.busy}
+        openworkUrl={openworkUrl}
+        openworkToken={openworkToken}
+        tokenVisible={tokenVisible.openwork}
+        openworkStatusLabel={openworkStatusLabel}
+        openworkStatusStyle={openworkStatusStyle}
+        resolvedWorkspaceUrl={resolvedWorkspaceUrl}
+        resolvedWorkspaceId={resolvedWorkspaceId}
+        openworkTestState={openworkTestState}
+        openworkTestMessage={openworkTestMessage}
+        hasOpenworkChanges={hasOpenworkChanges}
+        onUrlChange={(url) => dispatchLocal({ type: "url", url })}
+        onTokenChange={(token) => dispatchLocal({ type: "token", token })}
+        onToggleToken={() => dispatchLocal({ type: "toggleToken", key: "openwork" })}
+        onTestConnection={handleTestConnection}
+        onSave={() => props.updateOpenworkServerSettings(buildOpenworkSettings())}
+        onReset={props.resetOpenworkServerSettings}
+      />
+      <ConfigMessagingIdentitiesSection />
+      {!isDesktopRuntime() ? <div className="text-xs text-gray-9">{t("config.desktop_only_hint")}</div> : null}
     </section>
   );
 }
diff --git a/apps/app/src/react-app/domains/settings/pages/environment-view.tsx b/apps/app/src/react-app/domains/settings/pages/environment-view.tsx
index e6b9a28ef..69059d432 100644
--- a/apps/app/src/react-app/domains/settings/pages/environment-view.tsx
+++ b/apps/app/src/react-app/domains/settings/pages/environment-view.tsx
@@ -319,248 +319,41 @@ export function EnvironmentView(props: EnvironmentViewProps) {
 
   return (
     <div className="space-y-6 max-w-3xl w-full">
-      <div className={`${settingsPanelClass} space-y-4`}>
-        <div className="flex items-start justify-between gap-4">
-          <div className="min-w-0">
-            <div className="text-sm font-medium text-gray-12">
-              {t("settings.environment.title")}
-            </div>
-            <p className="mt-1 max-w-[52ch] text-xs text-gray-10">
-              {t("settings.environment.description")}
-            </p>
-          </div>
-          {canEdit ? (
-            <Button
-              variant="primary"
-              className="h-8 shrink-0 px-3 py-0 text-xs"
-              onClick={openAdd}
-            >
-              <Plus size={13} className="mr-1.5" />
-              {t("settings.environment.add_button")}
-            </Button>
-          ) : null}
-        </div>
-
-        {isRemoteWorkspace ? (
-          <div className="rounded-lg border border-dls-border/60 bg-dls-surface-muted/40 px-3 py-2 text-xs text-gray-10">
-            {t("settings.environment.remote_workspace_hint")}
-          </div>
-        ) : null}
-
-        {error ? (
-          <div className="rounded-lg border border-red-7 bg-red-3/40 px-3 py-2 text-xs text-red-11">
-            {error}
-          </div>
-        ) : null}
-
-        {pendingChanges && !isRemoteWorkspace ? (
-          <div className="rounded-xl border border-amber-7/50 bg-amber-3/30 p-3">
-            <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-              <div className="flex min-w-0 items-start gap-2.5">
-                <div className="mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full bg-amber-4/70 text-amber-11">
-                  <RefreshCw size={14} />
-                </div>
-                <div className="min-w-0">
-                  <div className="text-xs font-medium text-gray-12">
-                    {t("settings.environment.apply_pending_title")}
-                  </div>
-                  <p className="mt-0.5 max-w-[54ch] text-xs text-gray-10">
-                    {props.onApplyChanges
-                      ? t("settings.environment.apply_pending_body")
-                      : t("settings.environment.apply_pending_body_manual")}
-                  </p>
-                  {applyBlockedReason ? (
-                    <div className="mt-2 rounded-lg border border-amber-7/50 bg-amber-3/30 px-3 py-2 text-xs text-amber-11">
-                      {applyBlockedReason}
-                    </div>
-                  ) : applyError ? (
-                    <div className="mt-2 rounded-lg border border-red-7 bg-red-3/40 px-3 py-2 text-xs text-red-11">
-                      {applyError}
-                    </div>
-                  ) : null}
-                </div>
-              </div>
-              {props.onApplyChanges ? (
-                <Button
-                  variant="primary"
-                  className="h-8 shrink-0 px-3 py-0 text-xs"
-                  onClick={() => {
-                    if (props.applyBlocked) {
-                      const message = applyBlockedReason ?? t("settings.environment.apply_blocked_active_tasks");
-                      setApplyError(message);
-                      onStatusMessage(message);
-                      return;
-                    }
-                    setApplyConfirmOpen(true);
-                  }}
-                  disabled={applyBusy || props.applyBlocked}
-                  title={applyBlockedReason ?? undefined}
-                >
-                  <RefreshCw size={13} className={applyBusy ? "animate-spin" : ""} />
-                  {applyBusy ? t("settings.environment.applying") : t("settings.environment.apply_button")}
-                </Button>
-              ) : null}
-            </div>
-          </div>
-        ) : null}
-
-        {isRemoteWorkspace ? null : loading && items.length === 0 ? (
-          <div className="py-6 text-center text-xs text-gray-10">
-            {t("settings.environment.loading")}
-          </div>
-        ) : items.length === 0 ? (
-          <div className="rounded-2xl border border-dashed border-dls-border/60 px-4 py-8 text-center">
-            <div className="text-sm text-gray-12">
-              {t("settings.environment.empty_title")}
-            </div>
-            <p className="mx-auto mt-1 max-w-[42ch] text-xs text-gray-10">
-              {t("settings.environment.empty_body")}
-            </p>
-          </div>
-        ) : (
-          <div className="divide-y divide-dls-border/60 overflow-hidden rounded-2xl border border-dls-border/60">
-            {items.map((item) => {
-              const isRevealed = Boolean(revealed[item.key]);
-              const displayValue = isRevealed ? item.value : maskValue(item.value);
-              return (
-                <div
-                  key={item.key}
-                  className="flex items-center gap-3 px-4 py-3 text-sm"
-                >
-                  <div className="min-w-0 flex-1">
-                    <button
-                      type="button"
-                      onClick={() => canEdit && openEdit(item)}
-                      disabled={!canEdit}
-                      className="font-mono text-[13px] text-gray-12 hover:underline disabled:cursor-default disabled:no-underline"
-                      title={canEdit ? t("settings.environment.click_to_edit") : ""}
-                    >
-                      {item.key}
-                    </button>
-                    <div className="mt-0.5 flex items-center gap-2 text-[11px] text-gray-8">
-                      <span className="font-mono">{displayValue || t("settings.environment.empty_value")}</span>
-                      <span>·</span>
-                      <span>{formatUpdatedAt(item.updatedAt)}</span>
-                    </div>
-                  </div>
-                  <div className="flex shrink-0 items-center gap-1">
-                    <button
-                      type="button"
-                      className={rowIconButtonClass}
-                      onClick={() =>
-                        setRevealed((current) => ({ ...current, [item.key]: !current[item.key] }))
-                      }
-                      title={isRevealed ? t("settings.environment.hide") : t("settings.environment.reveal")}
-                      aria-pressed={isRevealed}
-                      aria-label={(isRevealed
-                        ? t("settings.environment.hide_value")
-                        : t("settings.environment.reveal_value")
-                      ).replace("{key}", item.key)}
-                    >
-                      {isRevealed ? <EyeOff className="size-4" strokeWidth={2.1} /> : <Eye className="size-4" strokeWidth={2.1} />}
-                    </button>
-                    {canEdit ? (
-                      <button
-                        type="button"
-                        className={rowDangerIconButtonClass}
-                        onClick={() => setDeleteCandidate(item)}
-                        disabled={deletingKey === item.key}
-                        title={t("settings.environment.delete")}
-                        aria-label={t("settings.environment.delete_variable").replace("{key}", item.key)}
-                      >
-                        <Trash2 className="size-4" strokeWidth={2.1} />
-                      </button>
-                    ) : null}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        )}
-
-        {!isRemoteWorkspace ? (
-          <div className="space-y-1 text-[11px] text-gray-8">
-            <div>{t("settings.environment.footer_hint")}</div>
-            <div>{t("settings.environment.override_hint")}</div>
-          </div>
-        ) : null}
-      </div>
+      <EnvironmentSettingsPanel
+        canEdit={canEdit}
+        isRemoteWorkspace={isRemoteWorkspace}
+        error={error}
+        pendingChanges={pendingChanges}
+        onApplyChanges={props.onApplyChanges}
+        applyBlocked={props.applyBlocked}
+        applyBlockedReason={applyBlockedReason}
+        applyBusy={applyBusy}
+        applyError={applyError}
+        loading={loading}
+        items={items}
+        revealed={revealed}
+        deletingKey={deletingKey}
+        onAdd={openAdd}
+        onEdit={openEdit}
+        onToggleReveal={(key) => setRevealed((current) => ({ ...current, [key]: !current[key] }))}
+        onDeleteCandidate={setDeleteCandidate}
+        onApplyBlocked={(message) => {
+          setApplyError(message);
+          onStatusMessage(message);
+        }}
+        onOpenApplyConfirm={() => setApplyConfirmOpen(true)}
+      />
 
       {editor ? (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-          <button type="button" className="absolute inset-0 bg-gray-1/60 backdrop-blur-sm" aria-label={t("settings.environment.close_editor")} onClick={closeEditor} />
-          <div
-            className="relative w-full max-w-md rounded-2xl border border-gray-6 bg-gray-2 p-5 shadow-2xl"
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby={editorTitleId}
-          >
-            <div className="flex items-center justify-between">
-              <div id={editorTitleId} className="text-sm font-medium text-gray-12">
-                {editor.mode === "add"
-                  ? t("settings.environment.add_title")
-                  : t("settings.environment.edit_title")}
-              </div>
-              <Button
-                variant="ghost"
-                className="size-7 p-0"
-                onClick={closeEditor}
-                aria-label={t("settings.environment.close_editor")}
-                title={t("settings.environment.close_editor")}
-              >
-                <X size={14} />
-              </Button>
-            </div>
-
-            <div className="mt-4 space-y-3">
-              <TextInput
-                label={t("settings.environment.key_label")}
-                hint={t("settings.environment.key_hint")}
-                value={editor.key}
-                onChange={(event) =>
-                  setEditor((current) => (current ? { ...current, key: event.target.value } : current))
-                }
-                disabled={editor.mode === "edit" || saving}
-                placeholder="ANTHROPIC_API_KEY"
-              />
-              <label className="block">
-                <div className="mb-1 text-xs font-medium text-dls-secondary">
-                  {t("settings.environment.value_label")}
-                </div>
-                <textarea
-                  value={editor.value}
-                  onChange={(event) =>
-                    setEditor((current) => (current ? { ...current, value: event.target.value } : current))
-                  }
-                  disabled={saving}
-                  rows={3}
-                  spellCheck={false}
-                  autoComplete="off"
-                  className="w-full rounded-lg border border-dls-border bg-dls-surface px-3 py-2 font-mono text-[13px] text-dls-text shadow-sm focus:outline-none focus:ring-2 focus:ring-[rgba(var(--dls-accent-rgb),0.2)]"
-                />
-              </label>
-              {editorError ? (
-                <div className="rounded-lg border border-red-7 bg-red-3/40 px-3 py-2 text-xs text-red-11">
-                  {editorError}
-                </div>
-              ) : null}
-            </div>
-
-            <div className="mt-5 flex justify-end gap-2">
-              <Button variant="outline" className="h-8 px-3 text-xs" onClick={closeEditor} disabled={saving}>
-                {t("settings.environment.cancel")}
-              </Button>
-              <Button
-                variant="primary"
-                className="h-8 px-3 text-xs"
-                onClick={() => void submitEditor()}
-                disabled={saving}
-              >
-                {saving ? t("settings.environment.saving") : t("settings.environment.save")}
-              </Button>
-            </div>
-          </div>
-        </div>
+        <EnvironmentEditorModal
+          editor={editor}
+          titleId={editorTitleId}
+          saving={saving}
+          error={editorError}
+          onClose={closeEditor}
+          onChange={setEditor}
+          onSubmit={submitEditor}
+        />
       ) : null}
 
       <ConfirmModal
@@ -593,3 +386,312 @@ export function EnvironmentView(props: EnvironmentViewProps) {
     </div>
   );
 }
+
+function EnvironmentSettingsPanel(props: {
+  canEdit: boolean;
+  isRemoteWorkspace: boolean;
+  error: string | null;
+  pendingChanges: boolean;
+  onApplyChanges?: () => Promise<ApplyEnvironmentChangesResult>;
+  applyBlocked?: boolean;
+  applyBlockedReason: string | null;
+  applyBusy: boolean;
+  applyError: string | null;
+  loading: boolean;
+  items: EnvItem[];
+  revealed: Record<string, boolean>;
+  deletingKey: string | null;
+  onAdd: () => void;
+  onEdit: (item: EnvItem) => void;
+  onToggleReveal: (key: string) => void;
+  onDeleteCandidate: (item: EnvItem) => void;
+  onApplyBlocked: (message: string) => void;
+  onOpenApplyConfirm: () => void;
+}) {
+  return (
+    <div className={`${settingsPanelClass} space-y-4`}>
+      <EnvironmentPanelHeader canEdit={props.canEdit} onAdd={props.onAdd} />
+
+      {props.isRemoteWorkspace ? (
+        <div className="rounded-lg border border-dls-border/60 bg-dls-surface-muted/40 px-3 py-2 text-xs text-gray-10">
+          {t("settings.environment.remote_workspace_hint")}
+        </div>
+      ) : null}
+
+      {props.error ? (
+        <div className="rounded-lg border border-red-7 bg-red-3/40 px-3 py-2 text-xs text-red-11">
+          {props.error}
+        </div>
+      ) : null}
+
+      {props.pendingChanges && !props.isRemoteWorkspace ? (
+        <EnvironmentPendingChanges
+          onApplyChanges={props.onApplyChanges}
+          applyBlocked={props.applyBlocked}
+          applyBlockedReason={props.applyBlockedReason}
+          applyBusy={props.applyBusy}
+          applyError={props.applyError}
+          onApplyBlocked={props.onApplyBlocked}
+          onOpenApplyConfirm={props.onOpenApplyConfirm}
+        />
+      ) : null}
+
+      <EnvironmentItemsList
+        isRemoteWorkspace={props.isRemoteWorkspace}
+        loading={props.loading}
+        items={props.items}
+        revealed={props.revealed}
+        canEdit={props.canEdit}
+        deletingKey={props.deletingKey}
+        onEdit={props.onEdit}
+        onToggleReveal={props.onToggleReveal}
+        onDeleteCandidate={props.onDeleteCandidate}
+      />
+
+      {!props.isRemoteWorkspace ? (
+        <div className="space-y-1 text-[11px] text-gray-8">
+          <div>{t("settings.environment.footer_hint")}</div>
+          <div>{t("settings.environment.override_hint")}</div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function EnvironmentPanelHeader(props: { canEdit: boolean; onAdd: () => void }) {
+  return (
+    <div className="flex items-start justify-between gap-4">
+      <div className="min-w-0">
+        <div className="text-sm font-medium text-gray-12">{t("settings.environment.title")}</div>
+        <p className="mt-1 max-w-[52ch] text-xs text-gray-10">{t("settings.environment.description")}</p>
+      </div>
+      {props.canEdit ? (
+        <Button variant="primary" className="h-8 shrink-0 px-3 py-0 text-xs" onClick={props.onAdd}>
+          <Plus size={13} className="mr-1.5" />
+          {t("settings.environment.add_button")}
+        </Button>
+      ) : null}
+    </div>
+  );
+}
+
+function EnvironmentPendingChanges(props: {
+  onApplyChanges?: () => Promise<ApplyEnvironmentChangesResult>;
+  applyBlocked?: boolean;
+  applyBlockedReason: string | null;
+  applyBusy: boolean;
+  applyError: string | null;
+  onApplyBlocked: (message: string) => void;
+  onOpenApplyConfirm: () => void;
+}) {
+  return (
+    <div className="rounded-xl border border-amber-7/50 bg-amber-3/30 p-3">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="flex min-w-0 items-start gap-2.5">
+          <div className="mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full bg-amber-4/70 text-amber-11">
+            <RefreshCw size={14} />
+          </div>
+          <div className="min-w-0">
+            <div className="text-xs font-medium text-gray-12">{t("settings.environment.apply_pending_title")}</div>
+            <p className="mt-0.5 max-w-[54ch] text-xs text-gray-10">
+              {props.onApplyChanges
+                ? t("settings.environment.apply_pending_body")
+                : t("settings.environment.apply_pending_body_manual")}
+            </p>
+            {props.applyBlockedReason ? (
+              <div className="mt-2 rounded-lg border border-amber-7/50 bg-amber-3/30 px-3 py-2 text-xs text-amber-11">
+                {props.applyBlockedReason}
+              </div>
+            ) : props.applyError ? (
+              <div className="mt-2 rounded-lg border border-red-7 bg-red-3/40 px-3 py-2 text-xs text-red-11">
+                {props.applyError}
+              </div>
+            ) : null}
+          </div>
+        </div>
+        {props.onApplyChanges ? (
+          <Button
+            variant="primary"
+            className="h-8 shrink-0 px-3 py-0 text-xs"
+            onClick={() => {
+              if (props.applyBlocked) {
+                props.onApplyBlocked(props.applyBlockedReason ?? t("settings.environment.apply_blocked_active_tasks"));
+                return;
+              }
+              props.onOpenApplyConfirm();
+            }}
+            disabled={props.applyBusy || props.applyBlocked}
+            title={props.applyBlockedReason ?? undefined}
+          >
+            <RefreshCw size={13} className={props.applyBusy ? "animate-spin" : ""} />
+            {props.applyBusy ? t("settings.environment.applying") : t("settings.environment.apply_button")}
+          </Button>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function EnvironmentItemsList(props: {
+  isRemoteWorkspace: boolean;
+  loading: boolean;
+  items: EnvItem[];
+  revealed: Record<string, boolean>;
+  canEdit: boolean;
+  deletingKey: string | null;
+  onEdit: (item: EnvItem) => void;
+  onToggleReveal: (key: string) => void;
+  onDeleteCandidate: (item: EnvItem) => void;
+}) {
+  if (props.isRemoteWorkspace) return null;
+  if (props.loading && props.items.length === 0) {
+    return <div className="py-6 text-center text-xs text-gray-10">{t("settings.environment.loading")}</div>;
+  }
+  if (props.items.length === 0) {
+    return (
+      <div className="rounded-2xl border border-dashed border-dls-border/60 px-4 py-8 text-center">
+        <div className="text-sm text-gray-12">{t("settings.environment.empty_title")}</div>
+        <p className="mx-auto mt-1 max-w-[42ch] text-xs text-gray-10">{t("settings.environment.empty_body")}</p>
+      </div>
+    );
+  }
+  return (
+    <div className="divide-y divide-dls-border/60 overflow-hidden rounded-2xl border border-dls-border/60">
+      {props.items.map((item) => (
+        <EnvironmentItemRow
+          key={item.key}
+          item={item}
+          isRevealed={Boolean(props.revealed[item.key])}
+          canEdit={props.canEdit}
+          deleting={props.deletingKey === item.key}
+          onEdit={props.onEdit}
+          onToggleReveal={props.onToggleReveal}
+          onDeleteCandidate={props.onDeleteCandidate}
+        />
+      ))}
+    </div>
+  );
+}
+
+function EnvironmentItemRow(props: {
+  item: EnvItem;
+  isRevealed: boolean;
+  canEdit: boolean;
+  deleting: boolean;
+  onEdit: (item: EnvItem) => void;
+  onToggleReveal: (key: string) => void;
+  onDeleteCandidate: (item: EnvItem) => void;
+}) {
+  const displayValue = props.isRevealed ? props.item.value : maskValue(props.item.value);
+  return (
+    <div className="flex items-center gap-3 px-4 py-3 text-sm">
+      <div className="min-w-0 flex-1">
+        <button
+          type="button"
+          onClick={() => props.canEdit && props.onEdit(props.item)}
+          disabled={!props.canEdit}
+          className="font-mono text-[13px] text-gray-12 hover:underline disabled:cursor-default disabled:no-underline"
+          title={props.canEdit ? t("settings.environment.click_to_edit") : ""}
+        >
+          {props.item.key}
+        </button>
+        <div className="mt-0.5 flex items-center gap-2 text-[11px] text-gray-8">
+          <span className="font-mono">{displayValue || t("settings.environment.empty_value")}</span>
+          <span>·</span>
+          <span>{formatUpdatedAt(props.item.updatedAt)}</span>
+        </div>
+      </div>
+      <div className="flex shrink-0 items-center gap-1">
+        <button
+          type="button"
+          className={rowIconButtonClass}
+          onClick={() => props.onToggleReveal(props.item.key)}
+          title={props.isRevealed ? t("settings.environment.hide") : t("settings.environment.reveal")}
+          aria-pressed={props.isRevealed}
+          aria-label={(props.isRevealed
+            ? t("settings.environment.hide_value")
+            : t("settings.environment.reveal_value")
+          ).replace("{key}", props.item.key)}
+        >
+          {props.isRevealed ? <EyeOff className="size-4" strokeWidth={2.1} /> : <Eye className="size-4" strokeWidth={2.1} />}
+        </button>
+        {props.canEdit ? (
+          <button
+            type="button"
+            className={rowDangerIconButtonClass}
+            onClick={() => props.onDeleteCandidate(props.item)}
+            disabled={props.deleting}
+            title={t("settings.environment.delete")}
+            aria-label={t("settings.environment.delete_variable").replace("{key}", props.item.key)}
+          >
+            <Trash2 className="size-4" strokeWidth={2.1} />
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function EnvironmentEditorModal(props: {
+  editor: EnvironmentEditorState;
+  titleId: string;
+  saving: boolean;
+  error: string | null;
+  onClose: () => void;
+  onChange: (value: SetStateAction<EnvironmentEditorState>) => void;
+  onSubmit: () => Promise<void>;
+}) {
+  if (!props.editor) return null;
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <button type="button" className="absolute inset-0 bg-gray-1/60 backdrop-blur-sm" aria-label={t("settings.environment.close_editor")} onClick={props.onClose} />
+      <div className="relative w-full max-w-md rounded-2xl border border-gray-6 bg-gray-2 p-5 shadow-2xl" role="dialog" aria-modal="true" aria-labelledby={props.titleId}>
+        <div className="flex items-center justify-between">
+          <div id={props.titleId} className="text-sm font-medium text-gray-12">
+            {props.editor.mode === "add" ? t("settings.environment.add_title") : t("settings.environment.edit_title")}
+          </div>
+          <Button variant="ghost" className="size-7 p-0" onClick={props.onClose} aria-label={t("settings.environment.close_editor")} title={t("settings.environment.close_editor")}>
+            <X size={14} />
+          </Button>
+        </div>
+
+        <div className="mt-4 space-y-3">
+          <TextInput
+            label={t("settings.environment.key_label")}
+            hint={t("settings.environment.key_hint")}
+            value={props.editor.key}
+            onChange={(event) => props.onChange((current) => (current ? { ...current, key: event.target.value } : current))}
+            disabled={props.editor.mode === "edit" || props.saving}
+            placeholder="ANTHROPIC_API_KEY"
+          />
+          <label className="block">
+            <div className="mb-1 text-xs font-medium text-dls-secondary">{t("settings.environment.value_label")}</div>
+            <textarea
+              value={props.editor.value}
+              onChange={(event) => props.onChange((current) => (current ? { ...current, value: event.target.value } : current))}
+              disabled={props.saving}
+              rows={3}
+              spellCheck={false}
+              autoComplete="off"
+              className="w-full rounded-lg border border-dls-border bg-dls-surface px-3 py-2 font-mono text-[13px] text-dls-text shadow-sm focus:outline-none focus:ring-2 focus:ring-[rgba(var(--dls-accent-rgb),0.2)]"
+            />
+          </label>
+          {props.error ? (
+            <div className="rounded-lg border border-red-7 bg-red-3/40 px-3 py-2 text-xs text-red-11">
+              {props.error}
+            </div>
+          ) : null}
+        </div>
+
+        <div className="mt-5 flex justify-end gap-2">
+          <Button variant="outline" className="h-8 px-3 text-xs" onClick={props.onClose} disabled={props.saving}>
+            {t("settings.environment.cancel")}
+          </Button>
+          <Button variant="primary" className="h-8 px-3 text-xs" onClick={() => void props.onSubmit()} disabled={props.saving}>
+            {props.saving ? t("settings.environment.saving") : t("settings.environment.save")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/app/src/react-app/domains/settings/pages/mcp-view-state.ts b/apps/app/src/react-app/domains/settings/pages/mcp-view-state.ts
new file mode 100644
index 000000000..220465d4e
--- /dev/null
+++ b/apps/app/src/react-app/domains/settings/pages/mcp-view-state.ts
@@ -0,0 +1,68 @@
+import type { SetStateAction } from "react";
+
+import type { OpencodeConfigFile } from "../../../../app/lib/desktop";
+
+export type ConfigScope = "project" | "global";
+
+export type McpViewLocalState = {
+  logoutOpen: boolean;
+  logoutTarget: string | null;
+  logoutBusy: boolean;
+  removeOpen: boolean;
+  removeTarget: string | null;
+  configScope: ConfigScope;
+  projectConfig: OpencodeConfigFile | null;
+  globalConfig: OpencodeConfigFile | null;
+  configError: string | null;
+  revealBusy: boolean;
+  showAdvanced: boolean;
+  addMcpModalOpen: boolean;
+  togglingMcp: string | null;
+  chromeSetupOpen: boolean;
+};
+
+type McpViewLocalAction<K extends keyof McpViewLocalState = keyof McpViewLocalState> =
+  | { type: "set"; key: K; value: SetStateAction<any> }
+  | { type: "configUnavailable" }
+  | { type: "configLoaded"; project: OpencodeConfigFile | null; global: OpencodeConfigFile | null }
+  | { type: "configLoadError"; error: string };
+
+export const initialMcpViewLocalState: McpViewLocalState = {
+  logoutOpen: false,
+  logoutTarget: null,
+  logoutBusy: false,
+  removeOpen: false,
+  removeTarget: null,
+  configScope: "project",
+  projectConfig: null,
+  globalConfig: null,
+  configError: null,
+  revealBusy: false,
+  showAdvanced: false,
+  addMcpModalOpen: false,
+  togglingMcp: null,
+  chromeSetupOpen: false,
+};
+
+export function mcpViewLocalReducer(
+  state: McpViewLocalState,
+  action: McpViewLocalAction,
+): McpViewLocalState {
+  switch (action.type) {
+    case "set": {
+      const current = state[action.key];
+      const next =
+        typeof action.value === "function"
+          ? (action.value as (value: typeof current) => typeof current)(current)
+          : action.value;
+      if (Object.is(current, next)) return state;
+      return { ...state, [action.key]: next };
+    }
+    case "configUnavailable":
+      return { ...state, projectConfig: null, globalConfig: null, configError: null };
+    case "configLoaded":
+      return { ...state, projectConfig: action.project, globalConfig: action.global };
+    case "configLoadError":
+      return { ...state, projectConfig: null, globalConfig: null, configError: action.error };
+  }
+}
diff --git a/apps/app/src/react-app/domains/settings/pages/mcp-view.tsx b/apps/app/src/react-app/domains/settings/pages/mcp-view.tsx
index d22835372..8b7e0d1b7 100644
--- a/apps/app/src/react-app/domains/settings/pages/mcp-view.tsx
+++ b/apps/app/src/react-app/domains/settings/pages/mcp-view.tsx
@@ -39,6 +39,12 @@ import { Button } from "../../../design-system/button";
 import { ConfirmModal } from "../../../design-system/modals/confirm-modal";
 import { AddMcpModal } from "../../connections/modals/add-mcp-modal";
 import { ChromeConnectionSetupModal } from "../../connections/modals/chrome-connection-setup-modal";
+import {
+  initialMcpViewLocalState,
+  mcpViewLocalReducer,
+  type ConfigScope,
+  type McpViewLocalState,
+} from "./mcp-view-state";
 
 export type ReactMcpStatus =
   | "connected"
@@ -155,71 +161,6 @@ const serviceIconBg = (name: string) => {
   return "bg-dls-hover border-dls-border";
 };
 
-type ConfigScope = "project" | "global";
-
-type McpViewLocalState = {
-  logoutOpen: boolean;
-  logoutTarget: string | null;
-  logoutBusy: boolean;
-  removeOpen: boolean;
-  removeTarget: string | null;
-  configScope: ConfigScope;
-  projectConfig: OpencodeConfigFile | null;
-  globalConfig: OpencodeConfigFile | null;
-  configError: string | null;
-  revealBusy: boolean;
-  showAdvanced: boolean;
-  addMcpModalOpen: boolean;
-  togglingMcp: string | null;
-  chromeSetupOpen: boolean;
-};
-
-type McpViewLocalAction<K extends keyof McpViewLocalState = keyof McpViewLocalState> =
-  | { type: "set"; key: K; value: SetStateAction<any> }
-  | { type: "configUnavailable" }
-  | { type: "configLoaded"; project: OpencodeConfigFile | null; global: OpencodeConfigFile | null }
-  | { type: "configLoadError"; error: string };
-
-const initialMcpViewLocalState: McpViewLocalState = {
-  logoutOpen: false,
-  logoutTarget: null,
-  logoutBusy: false,
-  removeOpen: false,
-  removeTarget: null,
-  configScope: "project",
-  projectConfig: null,
-  globalConfig: null,
-  configError: null,
-  revealBusy: false,
-  showAdvanced: false,
-  addMcpModalOpen: false,
-  togglingMcp: null,
-  chromeSetupOpen: false,
-};
-
-function mcpViewLocalReducer(
-  state: McpViewLocalState,
-  action: McpViewLocalAction,
-): McpViewLocalState {
-  switch (action.type) {
-    case "set": {
-      const current = state[action.key];
-      const next =
-        typeof action.value === "function"
-          ? (action.value as (value: typeof current) => typeof current)(current)
-          : action.value;
-      if (Object.is(current, next)) return state;
-      return { ...state, [action.key]: next };
-    }
-    case "configUnavailable":
-      return { ...state, projectConfig: null, globalConfig: null, configError: null };
-    case "configLoaded":
-      return { ...state, projectConfig: action.project, globalConfig: action.global };
-    case "configLoadError":
-      return { ...state, projectConfig: null, globalConfig: null, configError: action.error };
-  }
-}
-
 export function McpView(props: McpViewProps) {
   const showHeader = props.showHeader !== false;
 
@@ -399,18 +340,7 @@ export function McpView(props: McpViewProps) {
   return (
     <section className="space-y-8 max-w-3xl w-full animate-in fade-in duration-300">
       {showHeader ? (
-        <div>
-          <h2 className="text-3xl font-semibold text-dls-text">{t("mcp.apps_title")}</h2>
-          <p className="mt-1.5 text-sm text-dls-secondary">{t("mcp.apps_subtitle")}</p>
-          {connectedCount > 0 ? (
-            <div className="mt-3 inline-flex items-center gap-2 rounded-full bg-green-3 px-3 py-1">
-              <div className="size-2 rounded-full bg-green-9" />
-              <span className="text-xs font-medium text-green-11">
-                {connectedCount} {connectedCount === 1 ? t("mcp.app_connected") : t("mcp.apps_connected")}
-              </span>
-            </div>
-          ) : null}
-        </div>
+        <McpViewHeader connectedCount={connectedCount} />
       ) : null}
 
       {props.mcpStatus ? (
@@ -421,308 +351,42 @@ export function McpView(props: McpViewProps) {
 
       {/* Connect Chrome card */}
       {isDesktopRuntime() ? (
-        <div className="rounded-2xl border border-amber-6/30 bg-[linear-gradient(180deg,rgba(245,158,11,0.08),rgba(245,158,11,0.03))] p-5 sm:px-6">
-          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-            <div className="space-y-1">
-              <div className="text-base font-semibold text-dls-text">{t("chrome_setup.title")}</div>
-              <div className="text-sm text-dls-secondary">{t("chrome_setup.subtitle")}</div>
-            </div>
-            <Button variant="outline" onClick={() => setChromeSetupOpen(true)}>
-              <Chrome size={14} />
-              {t("chrome_setup.test_connection")}
-            </Button>
-          </div>
-        </div>
+        <McpChromeSetupCard onOpen={() => setChromeSetupOpen(true)} />
       ) : null}
 
-      <div className="rounded-2xl border border-blue-6/30 bg-[linear-gradient(180deg,rgba(59,130,246,0.08),rgba(59,130,246,0.03))] p-5 sm:px-6">
-        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-          <div className="space-y-1">
-            <div className="text-base font-semibold text-dls-text">{t("mcp.add_modal_title")}</div>
-            <div className="text-sm text-dls-secondary">{t("mcp.custom_app_cta_hint")}</div>
-          </div>
-          <Button variant="secondary" onClick={() => setAddMcpModalOpen(true)}>
-            <Plus size={14} />
-            {t("mcp.add_modal_title")}
-          </Button>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <div className="flex items-center justify-between">
-          <h3 className="text-[11px] font-semibold uppercase tracking-widest text-dls-secondary">
-            {t("mcp.available_apps")}
-          </h3>
-          <span className="text-[11px] text-dls-secondary">{t("mcp.one_click_connect")}</span>
-        </div>
-
-        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
-          {quickConnectList.map((entry) => {
-            const configured = isQuickConnectConfigured(entry);
-            const connecting = props.mcpConnectingName === entry.name;
-            const Icon = serviceIcon(entry.name);
-            const quickStatus = !configured ? quickConnectStatus(entry) : undefined;
-
-            return (
-              <div key={getMcpIdentityKey(entry)} className="relative">
-                <button
-                  type="button"
-                  disabled={configured || props.busy || connecting}
-                  onClick={() => {
-                    if (configured) return;
-                    props.connectMcp(entry);
-                  }}
-                  className={`group w-full rounded-xl border p-4 text-left transition-all ${
-                    configured
-                      ? "border-green-6 bg-green-2"
-                      : "border-dls-border bg-dls-surface hover:bg-dls-hover hover:shadow-[0_4px_16px_rgba(17,24,39,0.06)]"
-                  }`}
-                >
-                  <div className="flex items-start gap-3">
-                    <div
-                      className={`flex size-10 shrink-0 items-center justify-center rounded-lg border ${
-                        configured ? "border-green-6 bg-green-3" : serviceIconBg(entry.name)
-                      }`}
-                    >
-                      {connecting ? (
-                        <Loader2 size={18} className="animate-spin text-dls-secondary" />
-                      ) : configured ? (
-                        <CheckCircle2 size={18} className="text-green-11" />
-                      ) : (
-                        <Icon size={18} className={serviceColor(entry.name)} />
-                      )}
-                    </div>
-
-                    <div className="min-w-0 flex-1">
-                      <div className="flex items-center gap-2 pr-10">
-                        <h4 className="text-sm font-semibold text-dls-text">{entry.name}</h4>
-                        {configured ? (
-                          <span className="rounded-md bg-green-3 px-1.5 py-0.5 text-[10px] font-medium text-green-11">
-                            {t("mcp.connected_badge")}
-                          </span>
-                        ) : null}
-                        {!configured && quickStatus ? (
-                          <span
-                            className={`rounded-md px-1.5 py-0.5 text-[10px] font-medium ${statusBadgeStyle(
-                              quickStatus.status,
-                            )}`}
-                          >
-                            {friendlyStatus(quickStatus.status)}
-                          </span>
-                        ) : null}
-                      </div>
-                      <p className="mt-0.5 line-clamp-2 text-xs text-dls-secondary">
-                        {entry.description}
-                      </p>
-                      {!configured && !connecting ? (
-                        <div className="mt-2 text-[11px] font-medium text-blue-11 transition-colors group-hover:text-blue-12">
-                          {t("mcp.tap_to_connect")}
-                        </div>
-                      ) : null}
-                    </div>
-                  </div>
-                </button>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <div className="flex flex-wrap items-center justify-between gap-3">
-          <h3 className="text-[11px] font-semibold uppercase tracking-widest text-dls-secondary">
-            {t("mcp.your_apps")}
-          </h3>
-          {props.mcpLastUpdatedAt ? (
-            <span className="tabular-nums text-[11px] text-dls-secondary">
-              {t("mcp.last_synced")} {formatRelativeTime(props.mcpLastUpdatedAt)}
-            </span>
-          ) : null}
-        </div>
-
-        {props.mcpServers.length ? (
-          <div className="space-y-2">
-            {props.mcpServers.map((entry) => {
-              const status = resolveStatus(entry);
-              const Icon = serviceIcon(entry.name);
-              const isSelected = props.selectedMcp === entry.name;
-              const resolvedStatus = props.mcpStatuses[entry.name];
-              const errorInfo =
-                resolvedStatus && resolvedStatus.status === "failed"
-                  ? "error" in resolvedStatus
-                    ? resolvedStatus.error
-                    : t("mcp.connection_failed")
-                  : null;
-
-              return (
-                <div
-                  key={entry.name}
-                  className={`rounded-xl border transition-all ${
-                    isSelected
-                      ? "border-blue-7 bg-blue-2 shadow-sm"
-                      : "border-dls-border bg-dls-surface hover:bg-dls-hover"
-                  }`}
-                >
-                  <button
-                    type="button"
-                    className="w-full px-4 py-3.5 text-left"
-                    onClick={() => props.setSelectedMcp(isSelected ? null : entry.name)}
-                  >
-                    <div className="flex items-center gap-3">
-                      <div
-                        className={`flex size-8 shrink-0 items-center justify-center rounded-lg border ${
-                          status === "connected"
-                            ? "border-green-6 bg-green-3"
-                            : serviceIconBg(entry.name)
-                        }`}
-                      >
-                        <Icon
-                          size={15}
-                          className={
-                            status === "connected" ? "text-green-11" : serviceColor(entry.name)
-                          }
-                        />
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <div className="truncate text-sm font-medium text-dls-text">
-                          {displayName(entry.name)}
-                        </div>
-                      </div>
-                      <div className="flex shrink-0 items-center gap-2">
-                        <div className={`size-2 rounded-full ${statusDot(status)}`} />
-                        <span className="text-[11px] text-dls-secondary">
-                          {friendlyStatus(status)}
-                        </span>
-                      </div>
-                      <div className={`transition-transform ${isSelected ? "rotate-180" : ""}`}>
-                        <ChevronDown size={14} className="text-dls-secondary/40" />
-                      </div>
-                    </div>
-                  </button>
-
-                  {isSelected ? (
-                    <div className="animate-in fade-in slide-in-from-top-1 space-y-3 border-t border-blue-6/20 px-4 py-3 duration-200">
-                      <div className="flex items-center gap-4 text-xs">
-                        <span className="text-dls-secondary">{t("mcp.connection_type")}</span>
-                        <span className="text-dls-text">
-                          {entry.config.type === "remote" ? t("mcp.type_cloud") : t("mcp.type_local")}
-                        </span>
-                      </div>
-
-                      <div className="flex items-center gap-2">
-                        <span className="rounded-md border border-dls-border bg-dls-surface px-2 py-0.5 text-[10px] font-medium text-dls-text">
-                          {t("mcp.cap_tools")}
-                        </span>
-                        {entry.config.type === "remote" ? (
-                          <span className="rounded-md border border-dls-border bg-dls-surface px-2 py-0.5 text-[10px] font-medium text-dls-text">
-                            {t("mcp.cap_signin")}
-                          </span>
-                        ) : null}
-                      </div>
+      <McpCustomAppCard onOpen={() => setAddMcpModalOpen(true)} />
 
-                      {errorInfo ? (
-                        <div className="rounded-lg border border-red-6 bg-red-2 px-3 py-2 text-xs text-red-11">
-                          {errorInfo}
-                        </div>
-                      ) : null}
-
-                      <details className="group">
-                        <summary className="flex cursor-pointer list-none items-center gap-1.5 text-[11px] text-dls-secondary transition-colors hover:text-dls-text">
-                          <Code2 size={11} />
-                          {t("mcp.technical_details")}
-                          <ChevronDown size={10} className="transition-transform group-open:rotate-180" />
-                        </summary>
-                        <div className="mt-1.5 break-all rounded-lg bg-dls-hover px-3 py-2 font-mono text-[11px] text-dls-secondary">
-                          {entry.config.type === "remote"
-                            ? entry.config.url
-                            : entry.config.command?.join(" ")}
-                        </div>
-                      </details>
-
-                      {supportsOauth(entry) && status !== "connected" ? (
-                        <>
-                          <div className="flex items-center justify-between gap-3 pt-1">
-                            <div className="text-xs text-dls-secondary">{t("mcp.logout_label")}</div>
-                            <Button
-                              variant="secondary"
-                              className="px-3 py-1.5 text-xs"
-                              disabled={props.busy}
-                              onClick={() => props.authorizeMcp(entry)}
-                            >
-                              {t("mcp.login_action")}
-                            </Button>
-                          </div>
-                          <div className="text-[11px] text-dls-secondary/70">{t("mcp.login_hint")}</div>
-                        </>
-                      ) : null}
-
-                      {supportsOauth(entry) && status === "connected" ? (
-                        <>
-                          <div className="flex items-center justify-between gap-3 pt-1">
-                            <div className="text-xs text-dls-secondary">{t("mcp.logout_label")}</div>
-                            <Button
-                              variant="danger"
-                              className="px-3 py-1.5 text-xs"
-                              disabled={props.busy || logoutBusy}
-                              onClick={() => requestLogout(entry.name)}
-                            >
-                              {logoutBusy && logoutTarget === entry.name
-                                ? t("mcp.logout_working")
-                                : t("mcp.logout_action")}
-                            </Button>
-                          </div>
-                          <div className="text-[11px] text-dls-secondary/70">{t("mcp.logout_hint")}</div>
-                        </>
-                      ) : null}
+      <McpQuickConnectSection
+        entries={quickConnectList}
+        busy={props.busy}
+        connectingName={props.mcpConnectingName}
+        isConfigured={isQuickConnectConfigured}
+        statusForEntry={quickConnectStatus}
+        onConnect={props.connectMcp}
+      />
 
-                      <div className="flex justify-end gap-2 pt-1">
-                        {props.setMcpEnabled && entry.source !== "config.global" ? (
-                          <Button
-                            variant="outline"
-                            className="!px-3 !py-1.5 !text-xs"
-                            disabled={props.busy || togglingMcp === entry.name}
-                            onClick={(event) => {
-                              event.stopPropagation();
-                              if (togglingMcp) return;
-                              const next = entry.config.enabled !== false ? false : true;
-                              setTogglingMcp(entry.name);
-                              void Promise.resolve(props.setMcpEnabled?.(entry.name, next)).finally(
-                                () => setTogglingMcp(null),
-                              );
-                            }}
-                          >
-                            <Power size={13} />
-                            {entry.config.enabled === false
-                              ? t("mcp.enable_app")
-                              : t("mcp.disable_app")}
-                          </Button>
-                        ) : null}
-                        <Button
-                          variant="danger"
-                          className="!px-3 !py-1.5 !text-xs"
-                          onClick={(event) => {
-                            event.stopPropagation();
-                            setRemoveTarget(entry.name);
-                            setRemoveOpen(true);
-                          }}
-                        >
-                          {t("mcp.remove_app")}
-                        </Button>
-                      </div>
-                    </div>
-                  ) : null}
-                </div>
-              );
-            })}
-          </div>
-        ) : (
-          <div className="rounded-xl border border-dashed border-dls-border px-5 py-10 text-center">
-            <Unplug size={24} className="mx-auto mb-3 text-dls-secondary/30" />
-            <div className="text-sm font-medium text-dls-secondary">{t("mcp.no_apps_yet")}</div>
-            <div className="mt-1 text-xs text-dls-secondary/60">{t("mcp.no_apps_hint")}</div>
-          </div>
-        )}
-      </div>
+      <McpConfiguredServersSection
+        servers={props.mcpServers}
+        statuses={props.mcpStatuses}
+        lastUpdatedAt={props.mcpLastUpdatedAt}
+        selectedMcp={props.selectedMcp}
+        busy={props.busy}
+        logoutBusy={logoutBusy}
+        logoutTarget={logoutTarget}
+        togglingMcp={togglingMcp}
+        displayName={displayName}
+        resolveStatus={resolveStatus}
+        supportsOauth={supportsOauth}
+        onSelect={props.setSelectedMcp}
+        onAuthorize={props.authorizeMcp}
+        onRequestLogout={requestLogout}
+        onRemove={(name) => {
+          setRemoveTarget(name);
+          setRemoveOpen(true);
+        }}
+        onToggleEnabled={props.setMcpEnabled}
+        onToggleBusy={setTogglingMcp}
+      />
 
       <ConfirmModal
         open={logoutOpen}
@@ -759,106 +423,464 @@ export function McpView(props: McpViewProps) {
         }}
       />
 
-      <div className="overflow-hidden rounded-xl border border-dls-border bg-dls-surface">
-        <button
-          type="button"
-          className="flex w-full items-center justify-between px-5 py-4 transition-colors hover:bg-dls-hover"
-          onClick={() => setShowAdvanced((current) => !current)}
-        >
-          <div className="flex items-center gap-3">
-            <Settings2 size={16} className="text-dls-secondary" />
-            <div className="text-left">
-              <div className="text-sm font-medium text-dls-text">{t("mcp.advanced_settings")}</div>
-              <div className="text-xs text-dls-secondary">{t("mcp.advanced_settings_hint")}</div>
-            </div>
-          </div>
-          <div className={`transition-transform ${showAdvanced ? "rotate-180" : ""}`}>
-            <ChevronDown size={16} className="text-dls-secondary" />
-          </div>
-        </button>
+      <McpAdvancedConfigSection
+        open={showAdvanced}
+        configScope={configScope}
+        activeConfig={activeConfig}
+        canRevealConfig={canRevealConfig}
+        revealBusy={revealBusy}
+        revealLabel={revealLabel}
+        configError={configError}
+        onToggle={() => setShowAdvanced((current) => !current)}
+        onScopeChange={setConfigScope}
+        onReveal={revealConfig}
+      />
 
-        {showAdvanced ? (
-          <div className="animate-in fade-in slide-in-from-top-1 space-y-4 border-t border-dls-border px-5 py-4 duration-200">
-            <div className="flex items-center gap-1.5">
-              <button
-                type="button"
-                className={`rounded-lg px-3 py-1.5 text-xs font-medium transition-colors ${
-                  configScope === "project"
-                    ? "bg-dls-active text-dls-text"
-                    : "text-dls-secondary hover:bg-dls-hover hover:text-dls-text"
-                }`}
-                onClick={() => setConfigScope("project")}
-              >
-                {t("mcp.scope_project")}
-              </button>
+      <AddMcpModal
+        open={addMcpModalOpen}
+        onClose={() => setAddMcpModalOpen(false)}
+        onAdd={(entry) => props.connectMcp(entry)}
+        busy={props.busy}
+        isRemoteWorkspace={props.isRemoteWorkspace}
+      />
+
+      <ChromeConnectionSetupModal
+        open={chromeSetupOpen}
+        onClose={() => setChromeSetupOpen(false)}
+      />
+    </section>
+  );
+}
+
+function McpViewHeader(props: { connectedCount: number }) {
+  return (
+    <div>
+      <h2 className="text-3xl font-semibold text-dls-text">{t("mcp.apps_title")}</h2>
+      <p className="mt-1.5 text-sm text-dls-secondary">{t("mcp.apps_subtitle")}</p>
+      {props.connectedCount > 0 ? (
+        <div className="mt-3 inline-flex items-center gap-2 rounded-full bg-green-3 px-3 py-1">
+          <div className="size-2 rounded-full bg-green-9" />
+          <span className="text-xs font-medium text-green-11">
+            {props.connectedCount} {props.connectedCount === 1 ? t("mcp.app_connected") : t("mcp.apps_connected")}
+          </span>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function McpChromeSetupCard(props: { onOpen: () => void }) {
+  return (
+    <div className="rounded-2xl border border-amber-6/30 bg-[linear-gradient(180deg,rgba(245,158,11,0.08),rgba(245,158,11,0.03))] p-5 sm:px-6">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="space-y-1">
+          <div className="text-base font-semibold text-dls-text">{t("chrome_setup.title")}</div>
+          <div className="text-sm text-dls-secondary">{t("chrome_setup.subtitle")}</div>
+        </div>
+        <Button variant="outline" onClick={props.onOpen}>
+          <Chrome size={14} />
+          {t("chrome_setup.test_connection")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function McpCustomAppCard(props: { onOpen: () => void }) {
+  return (
+    <div className="rounded-2xl border border-blue-6/30 bg-[linear-gradient(180deg,rgba(59,130,246,0.08),rgba(59,130,246,0.03))] p-5 sm:px-6">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="space-y-1">
+          <div className="text-base font-semibold text-dls-text">{t("mcp.add_modal_title")}</div>
+          <div className="text-sm text-dls-secondary">{t("mcp.custom_app_cta_hint")}</div>
+        </div>
+        <Button variant="secondary" onClick={props.onOpen}>
+          <Plus size={14} />
+          {t("mcp.add_modal_title")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function McpQuickConnectSection(props: {
+  entries: McpDirectoryInfo[];
+  busy: boolean;
+  connectingName: string | null;
+  isConfigured: (entry: McpDirectoryInfo) => boolean;
+  statusForEntry: (entry: McpDirectoryInfo) => { status: ReactMcpStatus } | undefined;
+  onConnect: (entry: McpDirectoryInfo) => void;
+}) {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-[11px] font-semibold uppercase tracking-widest text-dls-secondary">
+          {t("mcp.available_apps")}
+        </h3>
+        <span className="text-[11px] text-dls-secondary">{t("mcp.one_click_connect")}</span>
+      </div>
+
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+        {props.entries.map((entry) => {
+          const configured = props.isConfigured(entry);
+          const connecting = props.connectingName === entry.name;
+          const Icon = serviceIcon(entry.name);
+          const quickStatus = !configured ? props.statusForEntry(entry) : undefined;
+
+          return (
+            <div key={getMcpIdentityKey(entry)} className="relative">
               <button
                 type="button"
-                className={`rounded-lg px-3 py-1.5 text-xs font-medium transition-colors ${
-                  configScope === "global"
-                    ? "bg-dls-active text-dls-text"
-                    : "text-dls-secondary hover:bg-dls-hover hover:text-dls-text"
+                disabled={configured || props.busy || connecting}
+                onClick={() => {
+                  if (!configured) props.onConnect(entry);
+                }}
+                className={`group w-full rounded-xl border p-4 text-left transition-all ${
+                  configured
+                    ? "border-green-6 bg-green-2"
+                    : "border-dls-border bg-dls-surface hover:bg-dls-hover hover:shadow-[0_4px_16px_rgba(17,24,39,0.06)]"
                 }`}
-                onClick={() => setConfigScope("global")}
               >
-                {t("mcp.scope_global")}
+                <div className="flex items-start gap-3">
+                  <div
+                    className={`flex size-10 shrink-0 items-center justify-center rounded-lg border ${
+                      configured ? "border-green-6 bg-green-3" : serviceIconBg(entry.name)
+                    }`}
+                  >
+                    {connecting ? (
+                      <Loader2 size={18} className="animate-spin text-dls-secondary" />
+                    ) : configured ? (
+                      <CheckCircle2 size={18} className="text-green-11" />
+                    ) : (
+                      <Icon size={18} className={serviceColor(entry.name)} />
+                    )}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2 pr-10">
+                      <h4 className="text-sm font-semibold text-dls-text">{entry.name}</h4>
+                      {configured ? (
+                        <span className="rounded-md bg-green-3 px-1.5 py-0.5 text-[10px] font-medium text-green-11">
+                          {t("mcp.connected_badge")}
+                        </span>
+                      ) : null}
+                      {!configured && quickStatus ? (
+                        <span className={`rounded-md px-1.5 py-0.5 text-[10px] font-medium ${statusBadgeStyle(quickStatus.status)}`}>
+                          {friendlyStatus(quickStatus.status)}
+                        </span>
+                      ) : null}
+                    </div>
+                    <p className="mt-0.5 line-clamp-2 text-xs text-dls-secondary">{entry.description}</p>
+                    {!configured && !connecting ? (
+                      <div className="mt-2 text-[11px] font-medium text-blue-11 transition-colors group-hover:text-blue-12">
+                        {t("mcp.tap_to_connect")}
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
               </button>
             </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
 
-            <div className="flex flex-col gap-1 text-xs">
-              <div className="text-dls-secondary">{t("mcp.config_file")}</div>
-              <div className="truncate font-mono text-[11px] text-dls-secondary/80">
-                {activeConfig?.path ?? t("mcp.config_not_loaded")}
-              </div>
-            </div>
+function McpConfiguredServersSection(props: {
+  servers: McpServerEntry[];
+  statuses: McpStatusMap;
+  lastUpdatedAt: number | null;
+  selectedMcp: string | null;
+  busy: boolean;
+  logoutBusy: boolean;
+  logoutTarget: string | null;
+  togglingMcp: string | null;
+  displayName: (name: string) => string;
+  resolveStatus: (entry: McpServerEntry) => ReactMcpStatus;
+  supportsOauth: (entry: McpServerEntry) => boolean;
+  onSelect: (name: string | null) => void;
+  onAuthorize: (entry: McpServerEntry) => void;
+  onRequestLogout: (name: string) => void;
+  onRemove: (name: string) => void;
+  onToggleEnabled?: (name: string, enabled: boolean) => Promise<void> | void;
+  onToggleBusy: (value: SetStateAction<string | null>) => void;
+}) {
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <h3 className="text-[11px] font-semibold uppercase tracking-widest text-dls-secondary">
+          {t("mcp.your_apps")}
+        </h3>
+        {props.lastUpdatedAt ? (
+          <span className="tabular-nums text-[11px] text-dls-secondary">
+            {t("mcp.last_synced")} {formatRelativeTime(props.lastUpdatedAt)}
+          </span>
+        ) : null}
+      </div>
 
-            <div className="flex items-center justify-between gap-3">
-              <div className="flex items-center gap-2">
-                <Button variant="secondary" onClick={() => void revealConfig()} disabled={!canRevealConfig}>
-                  {revealBusy ? (
-                    <>
-                      <Loader2 size={14} className="animate-spin" />
-                      {t("mcp.opening_label")}
-                    </>
-                  ) : (
-                    <>
-                      <FolderOpen size={14} />
-                      {revealLabel}
-                    </>
-                  )}
-                </Button>
-                <a
-                  href="https://opencode.ai/docs/mcp-servers/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="inline-flex items-center gap-1 text-xs text-dls-secondary transition-colors hover:text-dls-text"
-                >
-                  {t("mcp.docs_link")}
-                  <ExternalLink size={11} />
-                </a>
-              </div>
-              {activeConfig && activeConfig.exists === false ? (
-                <div className="text-[11px] text-dls-secondary">{t("mcp.file_not_found")}</div>
-              ) : null}
-            </div>
+      {props.servers.length ? (
+        <div className="space-y-2">
+          {props.servers.map((entry) => (
+            <McpConfiguredServerRow
+              key={entry.name}
+              entry={entry}
+              status={props.resolveStatus(entry)}
+              errorInfo={readMcpErrorInfo(props.statuses[entry.name])}
+              selected={props.selectedMcp === entry.name}
+              busy={props.busy}
+              logoutBusy={props.logoutBusy}
+              logoutTarget={props.logoutTarget}
+              togglingMcp={props.togglingMcp}
+              displayName={props.displayName}
+              supportsOauth={props.supportsOauth}
+              onSelect={props.onSelect}
+              onAuthorize={props.onAuthorize}
+              onRequestLogout={props.onRequestLogout}
+              onRemove={props.onRemove}
+              onToggleEnabled={props.onToggleEnabled}
+              onToggleBusy={props.onToggleBusy}
+            />
+          ))}
+        </div>
+      ) : (
+        <div className="rounded-xl border border-dashed border-dls-border px-5 py-10 text-center">
+          <Unplug size={24} className="mx-auto mb-3 text-dls-secondary/30" />
+          <div className="text-sm font-medium text-dls-secondary">{t("mcp.no_apps_yet")}</div>
+          <div className="mt-1 text-xs text-dls-secondary/60">{t("mcp.no_apps_hint")}</div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function readMcpErrorInfo(status: McpStatusMap[string] | undefined) {
+  if (!status || status.status !== "failed") return null;
+  return "error" in status ? status.error : t("mcp.connection_failed");
+}
 
-            {configError ? <div className="text-xs text-red-11">{configError}</div> : null}
+function McpConfiguredServerRow(props: {
+  entry: McpServerEntry;
+  status: ReactMcpStatus;
+  errorInfo: string | null;
+  selected: boolean;
+  busy: boolean;
+  logoutBusy: boolean;
+  logoutTarget: string | null;
+  togglingMcp: string | null;
+  displayName: (name: string) => string;
+  supportsOauth: (entry: McpServerEntry) => boolean;
+  onSelect: (name: string | null) => void;
+  onAuthorize: (entry: McpServerEntry) => void;
+  onRequestLogout: (name: string) => void;
+  onRemove: (name: string) => void;
+  onToggleEnabled?: (name: string, enabled: boolean) => Promise<void> | void;
+  onToggleBusy: (value: SetStateAction<string | null>) => void;
+}) {
+  const Icon = serviceIcon(props.entry.name);
+  return (
+    <div className={`rounded-xl border transition-all ${props.selected ? "border-blue-7 bg-blue-2 shadow-sm" : "border-dls-border bg-dls-surface hover:bg-dls-hover"}`}>
+      <button type="button" className="w-full px-4 py-3.5 text-left" onClick={() => props.onSelect(props.selected ? null : props.entry.name)}>
+        <div className="flex items-center gap-3">
+          <div className={`flex size-8 shrink-0 items-center justify-center rounded-lg border ${props.status === "connected" ? "border-green-6 bg-green-3" : serviceIconBg(props.entry.name)}`}>
+            <Icon size={15} className={props.status === "connected" ? "text-green-11" : serviceColor(props.entry.name)} />
+          </div>
+          <div className="min-w-0 flex-1">
+            <div className="truncate text-sm font-medium text-dls-text">{props.displayName(props.entry.name)}</div>
           </div>
+          <div className="flex shrink-0 items-center gap-2">
+            <div className={`size-2 rounded-full ${statusDot(props.status)}`} />
+            <span className="text-[11px] text-dls-secondary">{friendlyStatus(props.status)}</span>
+          </div>
+          <div className={`transition-transform ${props.selected ? "rotate-180" : ""}`}>
+            <ChevronDown size={14} className="text-dls-secondary/40" />
+          </div>
+        </div>
+      </button>
+
+      {props.selected ? <McpConfiguredServerDetails {...props} /> : null}
+    </div>
+  );
+}
+
+function McpConfiguredServerDetails(props: Parameters<typeof McpConfiguredServerRow>[0]) {
+  return (
+    <div className="animate-in fade-in slide-in-from-top-1 space-y-3 border-t border-blue-6/20 px-4 py-3 duration-200">
+      <div className="flex items-center gap-4 text-xs">
+        <span className="text-dls-secondary">{t("mcp.connection_type")}</span>
+        <span className="text-dls-text">{props.entry.config.type === "remote" ? t("mcp.type_cloud") : t("mcp.type_local")}</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="rounded-md border border-dls-border bg-dls-surface px-2 py-0.5 text-[10px] font-medium text-dls-text">
+          {t("mcp.cap_tools")}
+        </span>
+        {props.entry.config.type === "remote" ? (
+          <span className="rounded-md border border-dls-border bg-dls-surface px-2 py-0.5 text-[10px] font-medium text-dls-text">
+            {t("mcp.cap_signin")}
+          </span>
         ) : null}
       </div>
+      {props.errorInfo ? <div className="rounded-lg border border-red-6 bg-red-2 px-3 py-2 text-xs text-red-11">{props.errorInfo}</div> : null}
+      <details className="group">
+        <summary className="flex cursor-pointer list-none items-center gap-1.5 text-[11px] text-dls-secondary transition-colors hover:text-dls-text">
+          <Code2 size={11} />
+          {t("mcp.technical_details")}
+          <ChevronDown size={10} className="transition-transform group-open:rotate-180" />
+        </summary>
+        <div className="mt-1.5 break-all rounded-lg bg-dls-hover px-3 py-2 font-mono text-[11px] text-dls-secondary">
+          {props.entry.config.type === "remote" ? props.entry.config.url : props.entry.config.command?.join(" ")}
+        </div>
+      </details>
+      <McpConfiguredServerAuthActions {...props} />
+      <div className="flex justify-end gap-2 pt-1">
+        {props.onToggleEnabled && props.entry.source !== "config.global" ? (
+          <Button
+            variant="outline"
+            className="!px-3 !py-1.5 !text-xs"
+            disabled={props.busy || props.togglingMcp === props.entry.name}
+            onClick={(event) => {
+              event.stopPropagation();
+              if (props.togglingMcp) return;
+              const next = props.entry.config.enabled !== false ? false : true;
+              props.onToggleBusy(props.entry.name);
+              void Promise.resolve(props.onToggleEnabled?.(props.entry.name, next)).finally(() => props.onToggleBusy(null));
+            }}
+          >
+            <Power size={13} />
+            {props.entry.config.enabled === false ? t("mcp.enable_app") : t("mcp.disable_app")}
+          </Button>
+        ) : null}
+        <Button
+          variant="danger"
+          className="!px-3 !py-1.5 !text-xs"
+          onClick={(event) => {
+            event.stopPropagation();
+            props.onRemove(props.entry.name);
+          }}
+        >
+          {t("mcp.remove_app")}
+        </Button>
+      </div>
+    </div>
+  );
+}
 
-      <AddMcpModal
-        open={addMcpModalOpen}
-        onClose={() => setAddMcpModalOpen(false)}
-        onAdd={(entry) => props.connectMcp(entry)}
-        busy={props.busy}
-        isRemoteWorkspace={props.isRemoteWorkspace}
-      />
+function McpConfiguredServerAuthActions(props: Parameters<typeof McpConfiguredServerRow>[0]) {
+  if (!props.supportsOauth(props.entry)) return null;
+  if (props.status !== "connected") {
+    return (
+      <>
+        <div className="flex items-center justify-between gap-3 pt-1">
+          <div className="text-xs text-dls-secondary">{t("mcp.logout_label")}</div>
+          <Button variant="secondary" className="px-3 py-1.5 text-xs" disabled={props.busy} onClick={() => props.onAuthorize(props.entry)}>
+            {t("mcp.login_action")}
+          </Button>
+        </div>
+        <div className="text-[11px] text-dls-secondary/70">{t("mcp.login_hint")}</div>
+      </>
+    );
+  }
+  return (
+    <>
+      <div className="flex items-center justify-between gap-3 pt-1">
+        <div className="text-xs text-dls-secondary">{t("mcp.logout_label")}</div>
+        <Button
+          variant="danger"
+          className="px-3 py-1.5 text-xs"
+          disabled={props.busy || props.logoutBusy}
+          onClick={() => props.onRequestLogout(props.entry.name)}
+        >
+          {props.logoutBusy && props.logoutTarget === props.entry.name ? t("mcp.logout_working") : t("mcp.logout_action")}
+        </Button>
+      </div>
+      <div className="text-[11px] text-dls-secondary/70">{t("mcp.logout_hint")}</div>
+    </>
+  );
+}
 
-      <ChromeConnectionSetupModal
-        open={chromeSetupOpen}
-        onClose={() => setChromeSetupOpen(false)}
-      />
-    </section>
+function McpAdvancedConfigSection(props: {
+  open: boolean;
+  configScope: ConfigScope;
+  activeConfig: OpencodeConfigFile | null;
+  canRevealConfig: boolean;
+  revealBusy: boolean;
+  revealLabel: string;
+  configError: string | null;
+  onToggle: () => void;
+  onScopeChange: (scope: ConfigScope) => void;
+  onReveal: () => Promise<void>;
+}) {
+  return (
+    <div className="overflow-hidden rounded-xl border border-dls-border bg-dls-surface">
+      <button type="button" className="flex w-full items-center justify-between px-5 py-4 transition-colors hover:bg-dls-hover" onClick={props.onToggle}>
+        <div className="flex items-center gap-3">
+          <Settings2 size={16} className="text-dls-secondary" />
+          <div className="text-left">
+            <div className="text-sm font-medium text-dls-text">{t("mcp.advanced_settings")}</div>
+            <div className="text-xs text-dls-secondary">{t("mcp.advanced_settings_hint")}</div>
+          </div>
+        </div>
+        <div className={`transition-transform ${props.open ? "rotate-180" : ""}`}>
+          <ChevronDown size={16} className="text-dls-secondary" />
+        </div>
+      </button>
+      {props.open ? (
+        <div className="animate-in fade-in slide-in-from-top-1 space-y-4 border-t border-dls-border px-5 py-4 duration-200">
+          <div className="flex items-center gap-1.5">
+            <McpConfigScopeButton scope="project" activeScope={props.configScope} onScopeChange={props.onScopeChange} />
+            <McpConfigScopeButton scope="global" activeScope={props.configScope} onScopeChange={props.onScopeChange} />
+          </div>
+          <div className="flex flex-col gap-1 text-xs">
+            <div className="text-dls-secondary">{t("mcp.config_file")}</div>
+            <div className="truncate font-mono text-[11px] text-dls-secondary/80">
+              {props.activeConfig?.path ?? t("mcp.config_not_loaded")}
+            </div>
+          </div>
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex items-center gap-2">
+              <Button variant="secondary" onClick={() => void props.onReveal()} disabled={!props.canRevealConfig}>
+                {props.revealBusy ? (
+                  <>
+                    <Loader2 size={14} className="animate-spin" />
+                    {t("mcp.opening_label")}
+                  </>
+                ) : (
+                  <>
+                    <FolderOpen size={14} />
+                    {props.revealLabel}
+                  </>
+                )}
+              </Button>
+              <a href="https://opencode.ai/docs/mcp-servers/" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-xs text-dls-secondary transition-colors hover:text-dls-text">
+                {t("mcp.docs_link")}
+                <ExternalLink size={11} />
+              </a>
+            </div>
+            {props.activeConfig && props.activeConfig.exists === false ? <div className="text-[11px] text-dls-secondary">{t("mcp.file_not_found")}</div> : null}
+          </div>
+          {props.configError ? <div className="text-xs text-red-11">{props.configError}</div> : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function McpConfigScopeButton(props: {
+  scope: ConfigScope;
+  activeScope: ConfigScope;
+  onScopeChange: (scope: ConfigScope) => void;
+}) {
+  return (
+    <button
+      type="button"
+      className={`rounded-lg px-3 py-1.5 text-xs font-medium transition-colors ${
+        props.activeScope === props.scope
+          ? "bg-dls-active text-dls-text"
+          : "text-dls-secondary hover:bg-dls-hover hover:text-dls-text"
+      }`}
+      onClick={() => props.onScopeChange(props.scope)}
+    >
+      {props.scope === "project" ? t("mcp.scope_project") : t("mcp.scope_global")}
+    </button>
   );
 }
 
diff --git a/apps/app/src/react-app/domains/settings/panels/authorized-folders-panel-state.ts b/apps/app/src/react-app/domains/settings/panels/authorized-folders-panel-state.ts
new file mode 100644
index 000000000..3bdd0c4dd
--- /dev/null
+++ b/apps/app/src/react-app/domains/settings/panels/authorized-folders-panel-state.ts
@@ -0,0 +1,129 @@
+import type { SetStateAction } from "react";
+
+import { t } from "../../../../i18n";
+import { normalizeDirectoryQueryPath } from "../../../../app/utils";
+
+export type AuthorizedFoldersState = {
+  folders: string[];
+  draft: string;
+  loading: boolean;
+  saving: boolean;
+  status: string | null;
+  error: string | null;
+};
+
+type AuthorizedFoldersAction =
+  | { type: "set"; key: keyof AuthorizedFoldersState; value: SetStateAction<any> }
+  | { type: "reset" }
+  | { type: "loadStart" }
+  | { type: "loadSuccess"; folders: string[]; status: string | null }
+  | { type: "loadError"; message: string }
+  | { type: "loadDone" };
+
+export const initialAuthorizedFoldersState: AuthorizedFoldersState = {
+  folders: [],
+  draft: "",
+  loading: false,
+  saving: false,
+  status: null,
+  error: null,
+};
+
+export function authorizedFoldersReducer(
+  state: AuthorizedFoldersState,
+  action: AuthorizedFoldersAction,
+): AuthorizedFoldersState {
+  switch (action.type) {
+    case "set": {
+      const current = state[action.key];
+      const next =
+        typeof action.value === "function"
+          ? (action.value as (value: typeof current) => typeof current)(current)
+          : action.value;
+      if (Object.is(current, next)) return state;
+      return { ...state, [action.key]: next };
+    }
+    case "reset":
+      return initialAuthorizedFoldersState;
+    case "loadStart":
+      return { ...state, draft: "", loading: true, error: null, status: null };
+    case "loadSuccess":
+      return { ...state, folders: action.folders, status: action.status };
+    case "loadError":
+      return { ...state, folders: [], error: action.message };
+    case "loadDone":
+      return { ...state, loading: false };
+  }
+}
+
+export const ensureRecord = (value: unknown): Record<string, unknown> => {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return {};
+  return value as Record<string, unknown>;
+};
+
+export const normalizeAuthorizedFolderPath = (input: string | null | undefined) => {
+  const trimmed = (input ?? "").trim();
+  if (!trimmed) return "";
+  const withoutWildcard = trimmed.replace(/[\\/]\*+$/, "");
+  return normalizeDirectoryQueryPath(withoutWildcard);
+};
+
+const authorizedFolderToExternalDirectoryKey = (folder: string) => {
+  const normalized = normalizeAuthorizedFolderPath(folder);
+  if (!normalized) return "";
+  return normalized === "/" ? "/*" : `${normalized}/*`;
+};
+
+const externalDirectoryKeyToAuthorizedFolder = (key: string, value: unknown) => {
+  if (value !== "allow") return null;
+  const trimmed = key.trim();
+  if (!trimmed) return null;
+  if (trimmed === "/*") return "/";
+  if (!trimmed.endsWith("/*")) return null;
+  return normalizeAuthorizedFolderPath(trimmed.slice(0, -2));
+};
+
+export const readAuthorizedFoldersFromConfig = (opencodeConfig: Record<string, unknown>) => {
+  const permission = ensureRecord(opencodeConfig.permission);
+  const externalDirectory = ensureRecord(permission.external_directory);
+  const folders: string[] = [];
+  const hiddenEntries: Record<string, unknown> = {};
+  const seen = new Set<string>();
+
+  for (const [key, value] of Object.entries(externalDirectory)) {
+    const folder = externalDirectoryKeyToAuthorizedFolder(key, value);
+    if (!folder) {
+      hiddenEntries[key] = value;
+      continue;
+    }
+    if (seen.has(folder)) continue;
+    seen.add(folder);
+    folders.push(folder);
+  }
+
+  return { folders, hiddenEntries };
+};
+
+export const buildAuthorizedFoldersStatus = (preservedCount: number, action?: string) => {
+  const preservedLabel =
+    preservedCount > 0
+      ? preservedCount === 1
+        ? t("context_panel.preserving_entry")
+        : t("context_panel.preserving_entries", undefined, { count: preservedCount })
+      : null;
+  if (action && preservedLabel) return `${action} ${preservedLabel}`;
+  return action ?? preservedLabel;
+};
+
+export const mergeAuthorizedFoldersIntoExternalDirectory = (
+  folders: string[],
+  hiddenEntries: Record<string, unknown>,
+): Record<string, unknown> | undefined => {
+  const next: Record<string, unknown> = { ...hiddenEntries };
+  for (const folder of folders) {
+    const key = authorizedFolderToExternalDirectoryKey(folder);
+    if (!key) continue;
+    next[key] = "allow";
+  }
+  return Object.keys(next).length ? next : undefined;
+};
diff --git a/apps/app/src/react-app/domains/settings/panels/authorized-folders-panel.tsx b/apps/app/src/react-app/domains/settings/panels/authorized-folders-panel.tsx
index f5aa1cc19..d048b8d98 100644
--- a/apps/app/src/react-app/domains/settings/panels/authorized-folders-panel.tsx
+++ b/apps/app/src/react-app/domains/settings/panels/authorized-folders-panel.tsx
@@ -12,9 +12,18 @@ import type {
 import { pickDirectory } from "../../../../app/lib/desktop";
 import {
   isDesktopRuntime,
-  normalizeDirectoryQueryPath,
   safeStringify,
 } from "../../../../app/utils";
+import {
+  authorizedFoldersReducer,
+  buildAuthorizedFoldersStatus,
+  ensureRecord,
+  initialAuthorizedFoldersState,
+  mergeAuthorizedFoldersIntoExternalDirectory,
+  normalizeAuthorizedFolderPath,
+  readAuthorizedFoldersFromConfig,
+  type AuthorizedFoldersState,
+} from "./authorized-folders-panel-state";
 
 export type AuthorizedFoldersPanelProps = {
   openworkServerClient: OpenworkServerClient | null;
@@ -29,131 +38,6 @@ export type AuthorizedFoldersPanelProps = {
 const panelClass = "rounded-[28px] border border-dls-border bg-dls-surface p-5 md:p-6";
 const softPanelClass = "rounded-2xl border border-gray-6/60 bg-gray-1/40 p-4";
 
-type AuthorizedFoldersState = {
-  folders: string[];
-  draft: string;
-  loading: boolean;
-  saving: boolean;
-  status: string | null;
-  error: string | null;
-};
-
-type AuthorizedFoldersAction =
-  | { type: "set"; key: keyof AuthorizedFoldersState; value: SetStateAction<any> }
-  | { type: "reset" }
-  | { type: "loadStart" }
-  | { type: "loadSuccess"; folders: string[]; status: string | null }
-  | { type: "loadError"; message: string }
-  | { type: "loadDone" };
-
-const initialAuthorizedFoldersState: AuthorizedFoldersState = {
-  folders: [],
-  draft: "",
-  loading: false,
-  saving: false,
-  status: null,
-  error: null,
-};
-
-function authorizedFoldersReducer(
-  state: AuthorizedFoldersState,
-  action: AuthorizedFoldersAction,
-): AuthorizedFoldersState {
-  switch (action.type) {
-    case "set": {
-      const current = state[action.key];
-      const next =
-        typeof action.value === "function"
-          ? (action.value as (value: typeof current) => typeof current)(current)
-          : action.value;
-      if (Object.is(current, next)) return state;
-      return { ...state, [action.key]: next };
-    }
-    case "reset":
-      return initialAuthorizedFoldersState;
-    case "loadStart":
-      return { ...state, draft: "", loading: true, error: null, status: null };
-    case "loadSuccess":
-      return { ...state, folders: action.folders, status: action.status };
-    case "loadError":
-      return { ...state, folders: [], error: action.message };
-    case "loadDone":
-      return { ...state, loading: false };
-  }
-}
-
-const ensureRecord = (value: unknown): Record<string, unknown> => {
-  if (!value || typeof value !== "object" || Array.isArray(value)) return {};
-  return value as Record<string, unknown>;
-};
-
-const normalizeAuthorizedFolderPath = (input: string | null | undefined) => {
-  const trimmed = (input ?? "").trim();
-  if (!trimmed) return "";
-  const withoutWildcard = trimmed.replace(/[\\/]\*+$/, "");
-  return normalizeDirectoryQueryPath(withoutWildcard);
-};
-
-const authorizedFolderToExternalDirectoryKey = (folder: string) => {
-  const normalized = normalizeAuthorizedFolderPath(folder);
-  if (!normalized) return "";
-  return normalized === "/" ? "/*" : `${normalized}/*`;
-};
-
-const externalDirectoryKeyToAuthorizedFolder = (key: string, value: unknown) => {
-  if (value !== "allow") return null;
-  const trimmed = key.trim();
-  if (!trimmed) return null;
-  if (trimmed === "/*") return "/";
-  if (!trimmed.endsWith("/*")) return null;
-  return normalizeAuthorizedFolderPath(trimmed.slice(0, -2));
-};
-
-const readAuthorizedFoldersFromConfig = (opencodeConfig: Record<string, unknown>) => {
-  const permission = ensureRecord(opencodeConfig.permission);
-  const externalDirectory = ensureRecord(permission.external_directory);
-  const folders: string[] = [];
-  const hiddenEntries: Record<string, unknown> = {};
-  const seen = new Set<string>();
-
-  for (const [key, value] of Object.entries(externalDirectory)) {
-    const folder = externalDirectoryKeyToAuthorizedFolder(key, value);
-    if (!folder) {
-      hiddenEntries[key] = value;
-      continue;
-    }
-    if (seen.has(folder)) continue;
-    seen.add(folder);
-    folders.push(folder);
-  }
-
-  return { folders, hiddenEntries };
-};
-
-const buildAuthorizedFoldersStatus = (preservedCount: number, action?: string) => {
-  const preservedLabel =
-    preservedCount > 0
-      ? preservedCount === 1
-        ? t("context_panel.preserving_entry")
-        : t("context_panel.preserving_entries", undefined, { count: preservedCount })
-      : null;
-  if (action && preservedLabel) return `${action} ${preservedLabel}`;
-  return action ?? preservedLabel;
-};
-
-const mergeAuthorizedFoldersIntoExternalDirectory = (
-  folders: string[],
-  hiddenEntries: Record<string, unknown>,
-): Record<string, unknown> | undefined => {
-  const next: Record<string, unknown> = { ...hiddenEntries };
-  for (const folder of folders) {
-    const key = authorizedFolderToExternalDirectoryKey(folder);
-    if (!key) continue;
-    next[key] = "allow";
-  }
-  return Object.keys(next).length ? next : undefined;
-};
-
 export function AuthorizedFoldersPanel(props: AuthorizedFoldersPanelProps) {
   const [folderState, dispatchFolderState] = useReducer(
     authorizedFoldersReducer,
@@ -370,134 +254,205 @@ export function AuthorizedFoldersPanel(props: AuthorizedFoldersPanelProps) {
           {authorizedFoldersHint ?? t("context_panel.authorized_folders_no_access")}
         </div>
       ) : (
-        <div className="flex flex-col overflow-hidden rounded-xl border border-gray-5/60 bg-gray-1/50 shadow-sm">
-          {authorizedFoldersHint ? (
-            <div className="border-b border-gray-5/40 bg-gray-2/60 px-3 py-2 text-[11px] text-gray-10">
-              {authorizedFoldersHint}
-            </div>
-          ) : null}
+        <AuthorizedFoldersEditor
+          hint={authorizedFoldersHint}
+          folders={visibleAuthorizedFolders}
+          workspaceRootFolder={workspaceRootFolder}
+          draft={authorizedFolderDraft}
+          loading={authorizedFoldersLoading}
+          saving={authorizedFoldersSaving}
+          status={authorizedFoldersStatus}
+          error={authorizedFoldersError}
+          canWriteConfig={canWriteConfig}
+          canPickAuthorizedFolder={canPickAuthorizedFolder}
+          onDraftChange={setAuthorizedFolderDraft}
+          onAddFolder={addAuthorizedFolder}
+          onPickFolder={pickAuthorizedFolder}
+          onRemoveFolder={removeAuthorizedFolder}
+        />
+      )}
+    </div>
+  );
+}
 
-          {visibleAuthorizedFolders.length > 0 ? (
-            <div className="flex max-h-[300px] flex-col divide-y divide-gray-5/40 overflow-y-auto">
-              {visibleAuthorizedFolders.map((folder) => {
-                const isWorkspaceRoot = folder === workspaceRootFolder;
-                const folderName = folder.split(/[\/\\]/).filter(Boolean).pop() || folder;
-                return (
-                  <div
-                    key={folder}
-                    className={`flex items-center justify-between px-3 py-2.5 transition-colors ${
-                      isWorkspaceRoot ? "bg-blue-2/20" : "hover:bg-gray-2/50"
-                    }`}
-                  >
-                    <div className="flex overflow-hidden items-center gap-3">
-                      <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-blue-3/30 text-blue-11">
-                        <Folder size={15} />
-                      </div>
-                      <div className="flex min-w-0 flex-col">
-                        <div className="flex items-center gap-2">
-                          <span className="truncate text-sm font-medium text-gray-12">{folderName}</span>
-                          {isWorkspaceRoot ? (
-                            <span className="rounded-full border border-blue-7/30 bg-blue-3/25 px-2 py-0.5 text-[10px] font-medium text-blue-11">
-                              {t("context_panel.workspace_root_badge")}
-                            </span>
-                          ) : null}
-                        </div>
-                        <span className="truncate font-mono text-[10px] text-gray-8">{folder}</span>
-                      </div>
-                    </div>
-                    {!isWorkspaceRoot ? (
-                      <Button
-                        variant="ghost"
-                        className="size-6 shrink-0 !rounded-full !p-0 border-0 bg-transparent text-red-10 shadow-none hover:bg-red-3/15 hover:text-red-11 focus:ring-red-7/25"
-                        onClick={() => void removeAuthorizedFolder(folder)}
-                        disabled={authorizedFoldersLoading || authorizedFoldersSaving || !canWriteConfig}
-                        aria-label={t("context_panel.remove_folder", undefined, { name: folderName })}
-                      >
-                        <X size={16} className="text-current" />
-                      </Button>
-                    ) : (
-                      <span className="shrink-0 text-[10px] font-medium text-gray-8">
-                        {t("context_panel.always_available")}
-                      </span>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          ) : (
-            <div className="flex flex-col items-center justify-center p-6 text-center">
-              <div className="mb-3 flex size-10 items-center justify-center rounded-full bg-blue-3/30 text-blue-11">
-                <Folder size={20} />
-              </div>
-              <div className="text-sm font-medium text-gray-11">{t("context_panel.no_external_folders")}</div>
-              <div className="mt-1 max-w-[40ch] text-[11px] text-gray-9">
-                {t("context_panel.add_folder_hint")}
-              </div>
-            </div>
-          )}
+function AuthorizedFoldersEditor(props: {
+  hint: string | null;
+  folders: string[];
+  workspaceRootFolder: string;
+  draft: string;
+  loading: boolean;
+  saving: boolean;
+  status: string | null;
+  error: string | null;
+  canWriteConfig: boolean;
+  canPickAuthorizedFolder: boolean;
+  onDraftChange: (value: string) => void;
+  onAddFolder: () => Promise<void>;
+  onPickFolder: () => Promise<void>;
+  onRemoveFolder: (folder: string) => Promise<void>;
+}) {
+  return (
+    <div className="flex flex-col overflow-hidden rounded-xl border border-gray-5/60 bg-gray-1/50 shadow-sm">
+      {props.hint ? (
+        <div className="border-b border-gray-5/40 bg-gray-2/60 px-3 py-2 text-[11px] text-gray-10">
+          {props.hint}
+        </div>
+      ) : null}
+
+      {props.folders.length > 0 ? (
+        <AuthorizedFoldersList
+          folders={props.folders}
+          workspaceRootFolder={props.workspaceRootFolder}
+          disabled={props.loading || props.saving || !props.canWriteConfig}
+          onRemoveFolder={props.onRemoveFolder}
+        />
+      ) : (
+        <AuthorizedFoldersEmptyState />
+      )}
 
-          {authorizedFoldersStatus ? (
-            <div className="border-t border-gray-5/40 bg-blue-2/30 px-3 py-2 text-[11px] text-blue-11">
-              {authorizedFoldersStatus}
-            </div>
-          ) : null}
-          {authorizedFoldersError ? (
-            <div className="border-t border-gray-5/40 bg-red-2/30 px-3 py-2 text-[11px] text-red-11">
-              {authorizedFoldersError}
-            </div>
-          ) : null}
+      {props.status ? (
+        <div className="border-t border-gray-5/40 bg-blue-2/30 px-3 py-2 text-[11px] text-blue-11">
+          {props.status}
+        </div>
+      ) : null}
+      {props.error ? (
+        <div className="border-t border-gray-5/40 bg-red-2/30 px-3 py-2 text-[11px] text-red-11">
+          {props.error}
+        </div>
+      ) : null}
+
+      <AuthorizedFoldersInput
+        draft={props.draft}
+        disabled={props.loading || props.saving || !props.canWriteConfig}
+        saving={props.saving}
+        canPickAuthorizedFolder={props.canPickAuthorizedFolder}
+        onDraftChange={props.onDraftChange}
+        onAddFolder={props.onAddFolder}
+        onPickFolder={props.onPickFolder}
+      />
+    </div>
+  );
+}
 
+function AuthorizedFoldersList(props: {
+  folders: string[];
+  workspaceRootFolder: string;
+  disabled: boolean;
+  onRemoveFolder: (folder: string) => Promise<void>;
+}) {
+  return (
+    <div className="flex max-h-[300px] flex-col divide-y divide-gray-5/40 overflow-y-auto">
+      {props.folders.map((folder) => {
+        const isWorkspaceRoot = folder === props.workspaceRootFolder;
+        const folderName = folder.split(/[\/\\]/).filter(Boolean).pop() || folder;
+        return (
           <div
-            className="flex items-center gap-2 border-t border-gray-5/60 bg-gray-2/60 p-2"
+            key={folder}
+            className={`flex items-center justify-between px-3 py-2.5 transition-colors ${
+              isWorkspaceRoot ? "bg-blue-2/20" : "hover:bg-gray-2/50"
+            }`}
           >
-            <div className="relative flex-1">
-              <input
-                className="w-full rounded-lg border border-gray-5/60 bg-gray-1 px-3 py-1.5 text-xs text-gray-12 placeholder:text-gray-8 focus:outline-none focus:ring-2 focus:ring-blue-7/30 disabled:opacity-50"
-                value={authorizedFolderDraft}
-                onChange={(event) => setAuthorizedFolderDraft(event.currentTarget.value)}
-                onPaste={(event) => {
-                  event.preventDefault();
-                }}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter" && authorizedFolderDraft.trim()) {
-                    void addAuthorizedFolder();
-                  }
-                }}
-                placeholder={t("context_panel.input_placeholder")}
-                disabled={authorizedFoldersLoading || authorizedFoldersSaving || !canWriteConfig}
-              />
+            <div className="flex overflow-hidden items-center gap-3">
+              <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-blue-3/30 text-blue-11">
+                <Folder size={15} />
+              </div>
+              <div className="flex min-w-0 flex-col">
+                <div className="flex items-center gap-2">
+                  <span className="truncate text-sm font-medium text-gray-12">{folderName}</span>
+                  {isWorkspaceRoot ? (
+                    <span className="rounded-full border border-blue-7/30 bg-blue-3/25 px-2 py-0.5 text-[10px] font-medium text-blue-11">
+                      {t("context_panel.workspace_root_badge")}
+                    </span>
+                  ) : null}
+                </div>
+                <span className="truncate font-mono text-[10px] text-gray-8">{folder}</span>
+              </div>
             </div>
-
-            {canPickAuthorizedFolder ? (
+            {!isWorkspaceRoot ? (
               <Button
-                type="button"
-                variant="outline"
-                className="h-8 px-3 text-xs bg-gray-1 hover:bg-gray-2"
-                onClick={() => void pickAuthorizedFolder()}
-                disabled={authorizedFoldersLoading || authorizedFoldersSaving || !canWriteConfig}
+                variant="ghost"
+                className="size-6 shrink-0 !rounded-full !p-0 border-0 bg-transparent text-red-10 shadow-none hover:bg-red-3/15 hover:text-red-11 focus:ring-red-7/25"
+                onClick={() => void props.onRemoveFolder(folder)}
+                disabled={props.disabled}
+                aria-label={t("context_panel.remove_folder", undefined, { name: folderName })}
               >
-                <FolderSearch size={13} className="mr-1.5" />
-                {t("context_panel.browse_button")}
+                <X size={16} className="text-current" />
               </Button>
-            ) : null}
-
-            <Button
-              type="button"
-              variant="outline"
-              className="h-8 border border-gray-5/60 bg-gray-3 px-3 text-xs text-gray-12 hover:bg-gray-4"
-              onClick={() => void addAuthorizedFolder()}
-              disabled={
-                authorizedFoldersLoading ||
-                authorizedFoldersSaving ||
-                !canWriteConfig ||
-                !authorizedFolderDraft.trim()
-              }
-            >
-              {authorizedFoldersSaving ? t("context_panel.adding_button") : t("context_panel.add_button")}
-            </Button>
+            ) : (
+              <span className="shrink-0 text-[10px] font-medium text-gray-8">
+                {t("context_panel.always_available")}
+              </span>
+            )}
           </div>
-        </div>
-      )}
+        );
+      })}
+    </div>
+  );
+}
+
+function AuthorizedFoldersEmptyState() {
+  return (
+    <div className="flex flex-col items-center justify-center p-6 text-center">
+      <div className="mb-3 flex size-10 items-center justify-center rounded-full bg-blue-3/30 text-blue-11">
+        <Folder size={20} />
+      </div>
+      <div className="text-sm font-medium text-gray-11">{t("context_panel.no_external_folders")}</div>
+      <div className="mt-1 max-w-[40ch] text-[11px] text-gray-9">
+        {t("context_panel.add_folder_hint")}
+      </div>
+    </div>
+  );
+}
+
+function AuthorizedFoldersInput(props: {
+  draft: string;
+  disabled: boolean;
+  saving: boolean;
+  canPickAuthorizedFolder: boolean;
+  onDraftChange: (value: string) => void;
+  onAddFolder: () => Promise<void>;
+  onPickFolder: () => Promise<void>;
+}) {
+  return (
+    <div className="flex items-center gap-2 border-t border-gray-5/60 bg-gray-2/60 p-2">
+      <div className="relative flex-1">
+        <input
+          className="w-full rounded-lg border border-gray-5/60 bg-gray-1 px-3 py-1.5 text-xs text-gray-12 placeholder:text-gray-8 focus:outline-none focus:ring-2 focus:ring-blue-7/30 disabled:opacity-50"
+          value={props.draft}
+          onChange={(event) => props.onDraftChange(event.currentTarget.value)}
+          onPaste={(event) => event.preventDefault()}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && props.draft.trim()) {
+              void props.onAddFolder();
+            }
+          }}
+          placeholder={t("context_panel.input_placeholder")}
+          disabled={props.disabled}
+        />
+      </div>
+
+      {props.canPickAuthorizedFolder ? (
+        <Button
+          type="button"
+          variant="outline"
+          className="h-8 px-3 text-xs bg-gray-1 hover:bg-gray-2"
+          onClick={() => void props.onPickFolder()}
+          disabled={props.disabled}
+        >
+          <FolderSearch size={13} className="mr-1.5" />
+          {t("context_panel.browse_button")}
+        </Button>
+      ) : null}
+
+      <Button
+        type="button"
+        variant="outline"
+        className="h-8 border border-gray-5/60 bg-gray-3 px-3 text-xs text-gray-12 hover:bg-gray-4"
+        onClick={() => void props.onAddFolder()}
+        disabled={props.disabled || !props.draft.trim()}
+      >
+        {props.saving ? t("context_panel.adding_button") : t("context_panel.add_button")}
+      </Button>
     </div>
   );
 }
diff --git a/apps/app/src/react-app/domains/workspace/create-workspace-modal-state.ts b/apps/app/src/react-app/domains/workspace/create-workspace-modal-state.ts
new file mode 100644
index 000000000..b1116debd
--- /dev/null
+++ b/apps/app/src/react-app/domains/workspace/create-workspace-modal-state.ts
@@ -0,0 +1,68 @@
+import type { SetStateAction } from "react";
+
+import { readDenSettings, type DenOrgSummary, type DenWorkerSummary } from "../../../app/lib/den";
+import type { CreateWorkspaceScreen } from "./types";
+
+export type CreateWorkspaceLocalState = {
+  screen: CreateWorkspaceScreen;
+  selectedFolder: string | null;
+  pickingFolder: boolean;
+  showProgressDetails: boolean;
+  now: number;
+  cloudSettings: ReturnType<typeof readDenSettings>;
+  remoteUrl: string;
+  remoteToken: string;
+  remoteDisplayName: string;
+  remoteTokenVisible: boolean;
+  orgs: DenOrgSummary[];
+  activeOrgId: string;
+  orgsBusy: boolean;
+  orgsError: string | null;
+  workers: DenWorkerSummary[];
+  workersBusy: boolean;
+  workersError: string | null;
+  openingWorkerId: string | null;
+  workerSearch: string;
+};
+
+type CreateWorkspaceLocalAction<K extends keyof CreateWorkspaceLocalState = keyof CreateWorkspaceLocalState> =
+  | { type: "set"; key: K; value: SetStateAction<any> }
+  | { type: "reset"; settings: ReturnType<typeof readDenSettings> };
+
+export function createInitialWorkspaceLocalState(settings = readDenSettings()): CreateWorkspaceLocalState {
+  return {
+    screen: "chooser",
+    selectedFolder: null,
+    pickingFolder: false,
+    showProgressDetails: false,
+    now: Date.now(),
+    cloudSettings: settings,
+    remoteUrl: "",
+    remoteToken: "",
+    remoteDisplayName: "",
+    remoteTokenVisible: false,
+    orgs: [],
+    activeOrgId: settings.activeOrgId?.trim() ?? "",
+    orgsBusy: false,
+    orgsError: null,
+    workers: [],
+    workersBusy: false,
+    workersError: null,
+    openingWorkerId: null,
+    workerSearch: "",
+  };
+}
+
+export function createWorkspaceLocalReducer(
+  state: CreateWorkspaceLocalState,
+  action: CreateWorkspaceLocalAction,
+): CreateWorkspaceLocalState {
+  if (action.type === "reset") return createInitialWorkspaceLocalState(action.settings);
+  const current = state[action.key];
+  const next =
+    typeof action.value === "function"
+      ? (action.value as (value: typeof current) => typeof current)(current)
+      : action.value;
+  if (Object.is(current, next)) return state;
+  return { ...state, [action.key]: next };
+}
diff --git a/apps/app/src/react-app/domains/workspace/create-workspace-modal.tsx b/apps/app/src/react-app/domains/workspace/create-workspace-modal.tsx
index 1f7bc3055..4ee540a04 100644
--- a/apps/app/src/react-app/domains/workspace/create-workspace-modal.tsx
+++ b/apps/app/src/react-app/domains/workspace/create-workspace-modal.tsx
@@ -3,8 +3,9 @@ import {
   useCallback,
   useEffect,
   useMemo,
+  useReducer,
   useRef,
-  useState,
+  type SetStateAction,
 } from "react";
 import { ArrowLeft, Cloud, FolderPlus, Globe, Loader2, X } from "lucide-react";
 
@@ -21,6 +22,11 @@ import {
 import type { WorkspacePreset } from "../../../app/types";
 import { usePlatform } from "../../kernel/platform";
 import { CreateWorkspaceLocalPanel } from "./create-workspace-local-panel";
+import {
+  createInitialWorkspaceLocalState,
+  createWorkspaceLocalReducer,
+  type CreateWorkspaceLocalState,
+} from "./create-workspace-modal-state";
 import { CreateWorkspaceSharedPanel } from "./create-workspace-shared-panel";
 import {
   modalBodyClass,
@@ -92,26 +98,56 @@ export function CreateWorkspaceModal(props: CreateWorkspaceModalProps) {
   const remoteUrlRef = useRef<HTMLInputElement | null>(null);
   const platform = usePlatform();
 
-  const [screen, setScreen] = useState<CreateWorkspaceScreen>("chooser");
+  const [localState, dispatchLocal] = useReducer(
+    createWorkspaceLocalReducer,
+    undefined,
+    () => createInitialWorkspaceLocalState(),
+  );
+  const {
+    screen,
+    selectedFolder,
+    pickingFolder,
+    showProgressDetails,
+    now,
+    cloudSettings,
+    remoteUrl,
+    remoteToken,
+    remoteDisplayName,
+    remoteTokenVisible,
+    orgs,
+    activeOrgId,
+    orgsBusy,
+    orgsError,
+    workers,
+    workersBusy,
+    workersError,
+    openingWorkerId,
+    workerSearch,
+  } = localState;
+  const setLocal = <K extends keyof CreateWorkspaceLocalState>(
+    key: K,
+    value: SetStateAction<CreateWorkspaceLocalState[K]>,
+  ) => dispatchLocal({ type: "set", key, value });
+  const setScreen = (value: SetStateAction<CreateWorkspaceScreen>) => setLocal("screen", value);
+  const setSelectedFolder = (value: SetStateAction<string | null>) => setLocal("selectedFolder", value);
+  const setPickingFolder = (value: SetStateAction<boolean>) => setLocal("pickingFolder", value);
+  const setShowProgressDetails = (value: SetStateAction<boolean>) => setLocal("showProgressDetails", value);
+  const setNow = (value: SetStateAction<number>) => setLocal("now", value);
+  const setCloudSettings = (value: SetStateAction<ReturnType<typeof readDenSettings>>) => setLocal("cloudSettings", value);
+  const setRemoteUrl = (value: SetStateAction<string>) => setLocal("remoteUrl", value);
+  const setRemoteToken = (value: SetStateAction<string>) => setLocal("remoteToken", value);
+  const setRemoteDisplayName = (value: SetStateAction<string>) => setLocal("remoteDisplayName", value);
+  const setRemoteTokenVisible = (value: SetStateAction<boolean>) => setLocal("remoteTokenVisible", value);
+  const setOrgs = (value: SetStateAction<DenOrgSummary[]>) => setLocal("orgs", value);
+  const setActiveOrgId = (value: SetStateAction<string>) => setLocal("activeOrgId", value);
+  const setOrgsBusy = (value: SetStateAction<boolean>) => setLocal("orgsBusy", value);
+  const setOrgsError = (value: SetStateAction<string | null>) => setLocal("orgsError", value);
+  const setWorkers = (value: SetStateAction<DenWorkerSummary[]>) => setLocal("workers", value);
+  const setWorkersBusy = (value: SetStateAction<boolean>) => setLocal("workersBusy", value);
+  const setWorkersError = (value: SetStateAction<string | null>) => setLocal("workersError", value);
+  const setOpeningWorkerId = (value: SetStateAction<string | null>) => setLocal("openingWorkerId", value);
+  const setWorkerSearch = (value: SetStateAction<string>) => setLocal("workerSearch", value);
   const preset = props.defaultPreset ?? "starter";
-  const [selectedFolder, setSelectedFolder] = useState<string | null>(null);
-  const [pickingFolder, setPickingFolder] = useState(false);
-  const [showProgressDetails, setShowProgressDetails] = useState(false);
-  const [now, setNow] = useState(() => Date.now());
-  const [cloudSettings, setCloudSettings] = useState(() => readDenSettings());
-  const [remoteUrl, setRemoteUrl] = useState("");
-  const [remoteToken, setRemoteToken] = useState("");
-  const [remoteDisplayName, setRemoteDisplayName] = useState("");
-  const [remoteTokenVisible, setRemoteTokenVisible] = useState(false);
-  const [orgs, setOrgs] = useState<DenOrgSummary[]>([]);
-  const [activeOrgId, setActiveOrgId] = useState("");
-  const [orgsBusy, setOrgsBusy] = useState(false);
-  const [orgsError, setOrgsError] = useState<string | null>(null);
-  const [workers, setWorkers] = useState<DenWorkerSummary[]>([]);
-  const [workersBusy, setWorkersBusy] = useState(false);
-  const [workersError, setWorkersError] = useState<string | null>(null);
-  const [openingWorkerId, setOpeningWorkerId] = useState<string | null>(null);
-  const [workerSearch, setWorkerSearch] = useState("");
 
   const showClose = props.showClose ?? true;
   const isInline = props.inline ?? false;
@@ -195,19 +231,7 @@ export function CreateWorkspaceModal(props: CreateWorkspaceModalProps) {
   // Reset state when the modal opens.
   useEffect(() => {
     if (!props.open) return;
-    const settings = readDenSettings();
-    setScreen("chooser");
-    setCloudSettings(settings);
-    setRemoteUrl("");
-    setRemoteToken("");
-    setRemoteDisplayName("");
-    setRemoteTokenVisible(false);
-    setWorkerSearch("");
-    setOrgs([]);
-    setWorkers([]);
-    setOrgsError(null);
-    setWorkersError(null);
-    setActiveOrgId(settings.activeOrgId?.trim() ?? "");
+    dispatchLocal({ type: "reset", settings: readDenSettings() });
   }, [props.open]);
 
   // React to Den session changes.
diff --git a/apps/app/src/react-app/domains/workspace/share-workspace-state.ts b/apps/app/src/react-app/domains/workspace/share-workspace-state.ts
index 3048856e9..973c4cb1e 100644
--- a/apps/app/src/react-app/domains/workspace/share-workspace-state.ts
+++ b/apps/app/src/react-app/domains/workspace/share-workspace-state.ts
@@ -1,5 +1,5 @@
 /** @jsxImportSource react */
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useReducer } from "react";
 
 import {
   buildOpenworkWorkspaceBaseUrl,
@@ -27,16 +27,47 @@ type UseShareWorkspaceStateOptions = {
   workspaceLabel: (workspace: WorkspaceInfo) => string;
 };
 
+type ShareWorkspaceLocalState = {
+  shareWorkspaceId: string | null;
+  shareLocalOpenworkWorkspaceId: string | null;
+};
+
+type ShareWorkspaceLocalAction =
+  | { type: "open"; workspaceId: string }
+  | { type: "close" }
+  | { type: "localOpenworkWorkspace"; workspaceId: string | null };
+
+const initialShareWorkspaceLocalState: ShareWorkspaceLocalState = {
+  shareWorkspaceId: null,
+  shareLocalOpenworkWorkspaceId: null,
+};
+
+function shareWorkspaceLocalReducer(
+  state: ShareWorkspaceLocalState,
+  action: ShareWorkspaceLocalAction,
+): ShareWorkspaceLocalState {
+  switch (action.type) {
+    case "open":
+      return { ...state, shareWorkspaceId: action.workspaceId };
+    case "close":
+      return { ...state, shareWorkspaceId: null };
+    case "localOpenworkWorkspace":
+      return { ...state, shareLocalOpenworkWorkspaceId: action.workspaceId };
+  }
+}
+
 export function useShareWorkspaceState(options: UseShareWorkspaceStateOptions) {
-  const [shareWorkspaceId, setShareWorkspaceId] = useState<string | null>(null);
-  const [shareLocalOpenworkWorkspaceId, setShareLocalOpenworkWorkspaceId] = useState<string | null>(null);
+  const [{ shareWorkspaceId, shareLocalOpenworkWorkspaceId }, dispatchShareWorkspace] = useReducer(
+    shareWorkspaceLocalReducer,
+    initialShareWorkspaceLocalState,
+  );
 
   const openShareWorkspace = useCallback((workspaceId: string) => {
-    setShareWorkspaceId(workspaceId);
+    dispatchShareWorkspace({ type: "open", workspaceId });
   }, []);
 
   const closeShareWorkspace = useCallback(() => {
-    setShareWorkspaceId(null);
+    dispatchShareWorkspace({ type: "close" });
   }, []);
 
   const shareWorkspace = useMemo(() => {
@@ -86,12 +117,12 @@ export function useShareWorkspaceState(options: UseShareWorkspaceStateOptions) {
       !baseUrl ||
       !token
     ) {
-      setShareLocalOpenworkWorkspaceId(null);
+      dispatchShareWorkspace({ type: "localOpenworkWorkspace", workspaceId: null });
       return;
     }
 
     let cancelled = false;
-    setShareLocalOpenworkWorkspaceId(null);
+    dispatchShareWorkspace({ type: "localOpenworkWorkspace", workspaceId: null });
 
     void (async () => {
       try {
@@ -103,9 +134,11 @@ export function useShareWorkspaceState(options: UseShareWorkspaceStateOptions) {
         const match = items.find(
           (entry) => normalizeDirectoryPath(entry.path) === targetPath,
         );
-        setShareLocalOpenworkWorkspaceId(match?.id ?? null);
+        dispatchShareWorkspace({ type: "localOpenworkWorkspace", workspaceId: match?.id ?? null });
       } catch {
-        if (!cancelled) setShareLocalOpenworkWorkspaceId(null);
+        if (!cancelled) {
+          dispatchShareWorkspace({ type: "localOpenworkWorkspace", workspaceId: null });
+        }
       }
     })();
 
diff --git a/apps/app/src/react-app/kernel/server-provider-state.ts b/apps/app/src/react-app/kernel/server-provider-state.ts
new file mode 100644
index 000000000..7f61f150f
--- /dev/null
+++ b/apps/app/src/react-app/kernel/server-provider-state.ts
@@ -0,0 +1,43 @@
+type ServerState = {
+  list: string[];
+  active: string;
+  healthy: boolean | undefined;
+};
+
+type ServerAction =
+  | { type: "ready"; list: string[]; active: string }
+  | { type: "active"; active: string }
+  | { type: "add"; url: string }
+  | { type: "remove"; url: string }
+  | { type: "healthy"; healthy: boolean | undefined };
+
+export const initialServerState: ServerState = {
+  list: [],
+  active: "",
+  healthy: undefined,
+};
+
+export function serverReducer(state: ServerState, action: ServerAction): ServerState {
+  switch (action.type) {
+    case "ready":
+      return { ...state, list: action.list, active: action.active };
+    case "active":
+      return { ...state, active: action.active };
+    case "add":
+      return {
+        ...state,
+        list: state.list.includes(action.url) ? state.list : [...state.list, action.url],
+        active: action.url,
+      };
+    case "remove": {
+      const list = state.list.filter((item) => item !== action.url);
+      return {
+        ...state,
+        list,
+        active: state.active === action.url ? list[0] ?? "" : state.active,
+      };
+    }
+    case "healthy":
+      return { ...state, healthy: action.healthy };
+  }
+}
diff --git a/apps/app/src/react-app/kernel/server-provider.tsx b/apps/app/src/react-app/kernel/server-provider.tsx
index fb9a369dd..c6193ba13 100644
--- a/apps/app/src/react-app/kernel/server-provider.tsx
+++ b/apps/app/src/react-app/kernel/server-provider.tsx
@@ -5,8 +5,8 @@ import {
   use,
   useEffect,
   useMemo,
+  useReducer,
   useRef,
-  useState,
   type ReactNode,
 } from "react";
 import { createOpencodeClient } from "@opencode-ai/sdk/v2/client";
@@ -14,6 +14,7 @@ import { createOpencodeClient } from "@opencode-ai/sdk/v2/client";
 import { desktopFetch } from "../../app/lib/desktop";
 import { isWebDeployment } from "../../app/lib/openwork-deployment";
 import { isDesktopRuntime } from "../../app/utils";
+import { initialServerState, serverReducer } from "./server-provider-state";
 
 export function normalizeServerUrl(input: string): string | undefined {
   const trimmed = input.trim();
@@ -92,9 +93,7 @@ type ServerProviderProps = {
 };
 
 export function ServerProvider({ children, defaultUrl }: ServerProviderProps) {
-  const [list, setList] = useState<string[]>([]);
-  const [active, setActiveRaw] = useState<string>("");
-  const [healthy, setHealthy] = useState<boolean | undefined>(undefined);
+  const [{ list, active, healthy }, dispatchServer] = useReducer(serverReducer, initialServerState);
   const readyRef = useRef(false);
 
   useEffect(() => {
@@ -113,8 +112,7 @@ export function ServerProvider({ children, defaultUrl }: ServerProviderProps) {
           import.meta.env.VITE_OPENWORK_URL.trim().length > 0));
 
     if (forceProxy && fallback) {
-      setList([fallback]);
-      setActiveRaw(fallback);
+      dispatchServer({ type: "ready", list: [fallback], active: fallback });
       readyRef.current = true;
       return;
     }
@@ -125,8 +123,7 @@ export function ServerProvider({ children, defaultUrl }: ServerProviderProps) {
     const initialList = storedList.length ? storedList : fallback ? [fallback] : [];
     const initialActive = storedActive || initialList[0] || fallback || "";
 
-    setList(initialList);
-    setActiveRaw(initialActive);
+    dispatchServer({ type: "ready", list: initialList, active: initialActive });
     readyRef.current = true;
   }, [defaultUrl]);
 
@@ -148,10 +145,10 @@ export function ServerProvider({ children, defaultUrl }: ServerProviderProps) {
       // `/opencode` URLs directly. Ignore old persisted raw OpenCode daemon
       // URLs here; their ephemeral ports go stale across restarts and otherwise
       // produce noisy `/global/health` connection-refused polling forever.
-      setHealthy(undefined);
+      dispatchServer({ type: "healthy", healthy: undefined });
       return;
     }
-    setHealthy(undefined);
+    dispatchServer({ type: "healthy", healthy: undefined });
 
     let cancelled = false;
     let busy = false;
@@ -162,7 +159,7 @@ export function ServerProvider({ children, defaultUrl }: ServerProviderProps) {
       void checkHealth(active)
         .then((next) => {
           if (cancelled) return;
-          setHealthy(next);
+          dispatchServer({ type: "healthy", healthy: next });
         })
         .finally(() => {
           busy = false;
@@ -181,26 +178,19 @@ export function ServerProvider({ children, defaultUrl }: ServerProviderProps) {
   const setActive = useCallback((input: string) => {
     const next = normalizeServerUrl(input);
     if (!next) return;
-    setActiveRaw(next);
+    dispatchServer({ type: "active", active: next });
   }, []);
 
   const add = useCallback((input: string) => {
     const next = normalizeServerUrl(input);
     if (!next) return;
-    setList((current) => (current.includes(next) ? current : [...current, next]));
-    setActiveRaw(next);
+    dispatchServer({ type: "add", url: next });
   }, []);
 
   const remove = useCallback((input: string) => {
     const next = normalizeServerUrl(input);
     if (!next) return;
-    setList((current) => current.filter((item) => item !== next));
-    setActiveRaw((current) => {
-      if (current !== next) return current;
-      // Read latest list after the filter above through functional updater.
-      const remaining = readStoredList().filter((item) => item !== next);
-      return remaining[0] ?? "";
-    });
+    dispatchServer({ type: "remove", url: next });
   }, []);
 
   const value = useMemo<ServerContextValue>(