-
+ {/* User request: keep the configure shortcut but render it in muted gray. */}
+
+
+ -
+
+
- {/* Branch selector - shown for worktree/SSH */}
- {showTrunkBranchSelector && (
-
-
-
- )}
- {/* Loading placeholder - reserves space while branches load to avoid layout flash */}
- {showBranchLoadingPlaceholder && (
-
- )}
+ onValueChange={props.onTrunkBranchChange}
+ disabled={isBranchSelectorDisabled}
+ >
+
+
+
+
+ {branchOptions.map((branch) => (
+
+ {branch}
+
+ ))}
+
+
+ ) : (
+
+ )}
+
{/* SSH Host Input - hidden when Coder runtime is selected */}
{selectedRuntime.mode === "ssh" &&
diff --git a/src/browser/components/ChatInput/index.tsx b/src/browser/components/ChatInput/index.tsx
index d540f5d573..fd87218aa5 100644
--- a/src/browser/components/ChatInput/index.tsx
+++ b/src/browser/components/ChatInput/index.tsx
@@ -44,6 +44,7 @@ import {
getInputAttachmentsKey,
AGENT_AI_DEFAULTS_KEY,
VIM_ENABLED_KEY,
+ RUNTIME_ENABLEMENT_KEY,
getProjectScopeId,
getPendingScopeId,
getDraftScopeId,
@@ -95,6 +96,7 @@ import type { PendingUserMessage } from "@/browser/utils/chatEditing";
import type { AgentSkillDescriptor } from "@/common/types/agentSkill";
import type { AgentAiDefaults } from "@/common/types/agentAiDefaults";
import { coerceThinkingLevel, type ThinkingLevel } from "@/common/types/thinking";
+import { DEFAULT_RUNTIME_ENABLEMENT, normalizeRuntimeEnablement } from "@/common/types/runtime";
import { resolveThinkingInput } from "@/common/utils/thinking/policy";
import {
type MuxFrontendMetadata,
@@ -208,6 +210,14 @@ const ChatInputInner: React.FC
= (props) => {
};
})();
+ // User request: keep creation runtime controls synced with Settings enablement toggles.
+ const [rawRuntimeEnablement] = usePersistedState(
+ RUNTIME_ENABLEMENT_KEY,
+ DEFAULT_RUNTIME_ENABLEMENT,
+ { listener: true }
+ );
+ const runtimeEnablement = normalizeRuntimeEnablement(rawRuntimeEnablement);
+
const [input, setInput] = usePersistedState(storageKeys.inputKey, "", { listener: true });
// Keep a stable reference to the latest input value so event handlers don't need to rebind
@@ -627,6 +637,15 @@ const ChatInputInner: React.FC = (props) => {
const { projects } = useProjectContext();
const pendingSectionId = variant === "creation" ? (props.pendingSectionId ?? null) : null;
const creationProject = variant === "creation" ? projects.get(props.projectPath) : undefined;
+ const hasCreationRuntimeOverrides =
+ creationProject?.runtimeOverridesEnabled === true ||
+ Boolean(creationProject?.runtimeEnablement) ||
+ creationProject?.defaultRuntime !== undefined;
+ // Keep workspace creation in sync with Settings → Runtimes project overrides.
+ const creationRuntimeEnablement =
+ variant === "creation" && hasCreationRuntimeOverrides
+ ? normalizeRuntimeEnablement(creationProject?.runtimeEnablement)
+ : runtimeEnablement;
const creationSections = creationProject?.sections ?? [];
const [selectedSectionId, setSelectedSectionId] = useState(() => pendingSectionId);
@@ -769,6 +788,7 @@ const ChatInputInner: React.FC = (props) => {
projectName: props.projectName,
nameState: creationState.nameState,
runtimeAvailabilityState: creationState.runtimeAvailabilityState,
+ runtimeEnablement: creationRuntimeEnablement,
sections: creationSections,
selectedSectionId,
onSectionChange: handleCreationSectionChange,
diff --git a/src/browser/components/ChatInput/useCreationWorkspace.test.tsx b/src/browser/components/ChatInput/useCreationWorkspace.test.tsx
index d124a98768..a1fb95c049 100644
--- a/src/browser/components/ChatInput/useCreationWorkspace.test.tsx
+++ b/src/browser/components/ChatInput/useCreationWorkspace.test.tsx
@@ -1,4 +1,5 @@
import type { APIClient } from "@/browser/contexts/API";
+import { ProjectProvider } from "@/browser/contexts/ProjectContext";
import type { DraftWorkspaceSettings } from "@/browser/hooks/useDraftWorkspaceSettings";
import {
getAgentIdKey,
@@ -161,7 +162,10 @@ type WorkspaceUpdateAgentAISettingsResult = Awaited<
type WorkspaceCreateResult = Awaited>;
type NameGenerationArgs = Parameters[0];
type NameGenerationResult = Awaited>;
-type MockOrpcProjectsClient = Pick;
+type MockOrpcProjectsClient = Pick<
+ APIClient["projects"],
+ "list" | "listBranches" | "runtimeAvailability"
+>;
type MockOrpcWorkspaceClient = Pick<
APIClient["workspace"],
"sendMessage" | "create" | "updateAgentAISettings"
@@ -266,6 +270,7 @@ const setupWindow = ({
currentORPCClient = {
projects: {
+ list: () => Promise.resolve([]),
listBranches: (input: ListBranchesArgs) => listBranchesMock(input),
runtimeAvailability: () =>
Promise.resolve({
@@ -881,7 +886,11 @@ function renderUseCreationWorkspace(options: HookOptions) {
return null;
}
- render();
+ render(
+
+
+
+ );
return () => {
if (!resultRef.current) {
diff --git a/src/browser/components/Settings/SettingsPage.tsx b/src/browser/components/Settings/SettingsPage.tsx
index 85b7df5119..12f4faf5b8 100644
--- a/src/browser/components/Settings/SettingsPage.tsx
+++ b/src/browser/components/Settings/SettingsPage.tsx
@@ -10,6 +10,7 @@ import {
Bot,
Keyboard,
Layout,
+ Container,
BrainCircuit,
ShieldCheck,
Server,
@@ -28,6 +29,7 @@ import { Button } from "@/browser/components/ui/button";
import { MCPSettingsSection } from "./sections/MCPSettingsSection";
import { SecretsSection } from "./sections/SecretsSection";
import { LayoutsSection } from "./sections/LayoutsSection";
+import { RuntimesSection } from "./sections/RuntimesSection";
import { ExperimentsSection } from "./sections/ExperimentsSection";
import { KeybindsSection } from "./sections/KeybindsSection";
import type { SettingsSection } from "./types";
@@ -75,6 +77,12 @@ const BASE_SECTIONS: SettingsSection[] = [
icon: ,
component: LayoutsSection,
},
+ {
+ id: "runtimes",
+ label: "Runtimes",
+ icon: ,
+ component: RuntimesSection,
+ },
{
id: "experiments",
label: "Experiments",
diff --git a/src/browser/components/Settings/sections/RuntimesSection.tsx b/src/browser/components/Settings/sections/RuntimesSection.tsx
new file mode 100644
index 0000000000..909e80b657
--- /dev/null
+++ b/src/browser/components/Settings/sections/RuntimesSection.tsx
@@ -0,0 +1,549 @@
+import { useEffect, useRef, useState } from "react";
+import { AlertTriangle, Loader2 } from "lucide-react";
+
+import { resolveCoderAvailability } from "@/browser/components/ChatInput/CoderControls";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/browser/components/ui/select";
+import { Switch } from "@/browser/components/ui/switch";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/browser/components/ui/tooltip";
+import { useAPI } from "@/browser/contexts/API";
+import { useProjectContext } from "@/browser/contexts/ProjectContext";
+import { useRuntimeEnablement } from "@/browser/hooks/useRuntimeEnablement";
+import { RUNTIME_CHOICE_UI, type RuntimeUiSpec } from "@/browser/utils/runtimeUi";
+import { cn } from "@/common/lib/utils";
+import type { CoderInfo } from "@/common/orpc/schemas/coder";
+import type {
+ RuntimeAvailabilityStatus,
+ RuntimeEnablement,
+ RuntimeEnablementId,
+ RuntimeMode,
+} from "@/common/types/runtime";
+import { normalizeRuntimeEnablement } from "@/common/types/runtime";
+
+type RuntimeAvailabilityMap = Record;
+
+type RuntimeRow = { id: RuntimeEnablementId } & RuntimeUiSpec;
+
+type RuntimeAvailabilityState =
+ | { status: "idle" }
+ | { status: "loading" }
+ | { status: "failed" }
+ | { status: "loaded"; data: RuntimeAvailabilityMap };
+
+interface RuntimeOverrideCacheEntry {
+ enablement: RuntimeEnablement;
+ defaultRuntime: RuntimeEnablementId | null;
+ pending: boolean;
+}
+
+const ALL_SCOPE_VALUE = "__all__";
+
+const RUNTIME_ROWS: RuntimeRow[] = [
+ { id: "local", ...RUNTIME_CHOICE_UI.local },
+ { id: "worktree", ...RUNTIME_CHOICE_UI.worktree },
+ { id: "ssh", ...RUNTIME_CHOICE_UI.ssh },
+ { id: "coder", ...RUNTIME_CHOICE_UI.coder },
+ { id: "docker", ...RUNTIME_CHOICE_UI.docker },
+ { id: "devcontainer", ...RUNTIME_CHOICE_UI.devcontainer },
+];
+
+function getProjectLabel(path: string) {
+ return path.split(/[\\/]/).pop() ?? path;
+}
+
+function getFallbackRuntime(enablement: RuntimeEnablement): RuntimeEnablementId | null {
+ return RUNTIME_ROWS.find((runtime) => enablement[runtime.id])?.id ?? null;
+}
+
+export function RuntimesSection() {
+ const { api } = useAPI();
+ const { projects, refreshProjects } = useProjectContext();
+ const { enablement, setRuntimeEnabled, defaultRuntime, setDefaultRuntime } =
+ useRuntimeEnablement();
+
+ const projectList = Array.from(projects.keys());
+
+ const [selectedScope, setSelectedScope] = useState(ALL_SCOPE_VALUE);
+ const [projectOverrideEnabled, setProjectOverrideEnabled] = useState(false);
+ const [projectEnablement, setProjectEnablement] = useState(enablement);
+ const [projectDefaultRuntime, setProjectDefaultRuntime] = useState(
+ defaultRuntime
+ );
+ const [runtimeAvailabilityState, setRuntimeAvailabilityState] =
+ useState({ status: "idle" });
+ const [coderInfo, setCoderInfo] = useState(null);
+ const [overrideCacheVersion, setOverrideCacheVersion] = useState(0);
+ // Cache pending per-project overrides locally while config updates propagate.
+ const overrideCacheRef = useRef(new Map());
+
+ const selectedProjectPath = selectedScope === ALL_SCOPE_VALUE ? null : selectedScope;
+ const isProjectScope = Boolean(selectedProjectPath);
+ const isProjectOverrideActive = isProjectScope && projectOverrideEnabled;
+
+ const syncProjects = () =>
+ refreshProjects().catch(() => {
+ // Best-effort only.
+ });
+
+ const queueProjectOverrideUpdate = (
+ projectPath: string,
+ entry: RuntimeOverrideCacheEntry,
+ payload: {
+ projectPath: string;
+ runtimeEnablement?: RuntimeEnablement | null;
+ defaultRuntime?: RuntimeEnablementId | null;
+ runtimeOverridesEnabled?: boolean | null;
+ }
+ ) => {
+ overrideCacheRef.current.set(projectPath, entry);
+ const updatePromise = api?.config?.updateRuntimeEnablement(payload);
+ if (!updatePromise) {
+ overrideCacheRef.current.set(projectPath, { ...entry, pending: false });
+ setOverrideCacheVersion((prev) => prev + 1);
+ return;
+ }
+
+ updatePromise
+ .finally(() =>
+ syncProjects().finally(() => {
+ if (overrideCacheRef.current.get(projectPath) === entry) {
+ overrideCacheRef.current.set(projectPath, { ...entry, pending: false });
+ setOverrideCacheVersion((prev) => prev + 1);
+ }
+ })
+ )
+ .catch(() => {
+ // Best-effort only.
+ });
+ };
+
+ useEffect(() => {
+ if (selectedScope === ALL_SCOPE_VALUE) {
+ return;
+ }
+
+ if (!projects.has(selectedScope)) {
+ setSelectedScope(ALL_SCOPE_VALUE);
+ }
+ }, [projects, selectedScope]);
+
+ useEffect(() => {
+ if (!selectedProjectPath) {
+ setProjectOverrideEnabled(false);
+ setProjectEnablement(enablement);
+ setProjectDefaultRuntime(defaultRuntime ?? null);
+ return;
+ }
+
+ const cached = overrideCacheRef.current.get(selectedProjectPath);
+ if (cached?.pending) {
+ setProjectOverrideEnabled(true);
+ setProjectEnablement(cached.enablement);
+ setProjectDefaultRuntime(cached.defaultRuntime ?? defaultRuntime ?? null);
+ return;
+ }
+
+ const projectConfig = projects.get(selectedProjectPath);
+ const hasOverrides =
+ projectConfig?.runtimeOverridesEnabled === true ||
+ Boolean(projectConfig?.runtimeEnablement) ||
+ projectConfig?.defaultRuntime !== undefined;
+
+ if (hasOverrides) {
+ const resolvedEnablement = normalizeRuntimeEnablement(projectConfig?.runtimeEnablement);
+ setProjectOverrideEnabled(true);
+ // When overrides are active, the project's enablement is independent of global settings
+ // (all-true defaults + only the project's explicit `false` overrides). This matches
+ // the creation flow in ChatInput/index.tsx which uses normalizeRuntimeEnablement directly.
+ setProjectEnablement(resolvedEnablement);
+ setProjectDefaultRuntime(projectConfig?.defaultRuntime ?? defaultRuntime ?? null);
+ overrideCacheRef.current.set(selectedProjectPath, {
+ enablement: resolvedEnablement,
+ defaultRuntime: projectConfig?.defaultRuntime ?? null,
+ pending: false,
+ });
+ return;
+ }
+
+ overrideCacheRef.current.delete(selectedProjectPath);
+ setProjectOverrideEnabled(false);
+ setProjectEnablement(enablement);
+ setProjectDefaultRuntime(defaultRuntime ?? null);
+ }, [defaultRuntime, enablement, projects, selectedProjectPath, overrideCacheVersion]);
+
+ useEffect(() => {
+ if (!api || !selectedProjectPath) {
+ setRuntimeAvailabilityState({ status: "idle" });
+ return;
+ }
+
+ let active = true;
+ setRuntimeAvailabilityState({ status: "loading" });
+
+ api.projects
+ .runtimeAvailability({ projectPath: selectedProjectPath })
+ .then((availability) => {
+ if (active) {
+ setRuntimeAvailabilityState({ status: "loaded", data: availability });
+ }
+ })
+ .catch(() => {
+ if (active) {
+ setRuntimeAvailabilityState({ status: "failed" });
+ }
+ });
+
+ return () => {
+ active = false;
+ };
+ }, [api, selectedProjectPath]);
+
+ useEffect(() => {
+ if (!api) {
+ setCoderInfo(null);
+ return;
+ }
+
+ let active = true;
+
+ api.coder
+ .getInfo()
+ .then((info) => {
+ if (active) {
+ setCoderInfo(info);
+ }
+ })
+ .catch(() => {
+ if (active) {
+ setCoderInfo({
+ state: "unavailable",
+ reason: { kind: "error", message: "Failed to fetch" },
+ });
+ }
+ });
+
+ return () => {
+ active = false;
+ };
+ }, [api]);
+
+ const coderAvailability = resolveCoderAvailability(coderInfo);
+ const availabilityMap =
+ runtimeAvailabilityState.status === "loaded" ? runtimeAvailabilityState.data : null;
+
+ const effectiveEnablement = isProjectOverrideActive ? projectEnablement : enablement;
+ const effectiveDefaultRuntime = isProjectOverrideActive ? projectDefaultRuntime : defaultRuntime;
+
+ const enabledRuntimeOptions = RUNTIME_ROWS.filter((runtime) => effectiveEnablement[runtime.id]);
+ const enabledRuntimeCount = enabledRuntimeOptions.length;
+
+ const defaultRuntimeValue =
+ effectiveDefaultRuntime && effectiveEnablement[effectiveDefaultRuntime]
+ ? effectiveDefaultRuntime
+ : "";
+ const defaultRuntimePlaceholder =
+ enabledRuntimeOptions.length === 0 ? "No runtimes enabled" : "Select default runtime";
+ const defaultRuntimeDisabled =
+ enabledRuntimeOptions.length === 0 || (isProjectScope && !projectOverrideEnabled);
+
+ const handleOverrideToggle = (checked: boolean) => {
+ if (!selectedProjectPath) {
+ return;
+ }
+
+ if (!checked) {
+ setProjectOverrideEnabled(false);
+ setProjectEnablement(enablement);
+ setProjectDefaultRuntime(defaultRuntime ?? null);
+ overrideCacheRef.current.delete(selectedProjectPath);
+ const updatePromise = api?.config?.updateRuntimeEnablement({
+ projectPath: selectedProjectPath,
+ runtimeEnablement: null,
+ defaultRuntime: null,
+ runtimeOverridesEnabled: null,
+ });
+ if (!updatePromise) {
+ return;
+ }
+ updatePromise
+ .finally(() => {
+ void syncProjects();
+ })
+ .catch(() => {
+ // Best-effort only.
+ });
+ return;
+ }
+
+ const nextEnablement = { ...enablement };
+ const cacheEntry: RuntimeOverrideCacheEntry = {
+ enablement: nextEnablement,
+ defaultRuntime: defaultRuntime ?? null,
+ pending: true,
+ };
+ setProjectOverrideEnabled(true);
+ setProjectEnablement(nextEnablement);
+ setProjectDefaultRuntime(defaultRuntime ?? null);
+
+ queueProjectOverrideUpdate(selectedProjectPath, cacheEntry, {
+ projectPath: selectedProjectPath,
+ runtimeEnablement: nextEnablement,
+ defaultRuntime: defaultRuntime ?? null,
+ runtimeOverridesEnabled: true,
+ });
+ };
+
+ const handleRuntimeToggle = (runtimeId: RuntimeEnablementId, enabled: boolean) => {
+ if (!enabled) {
+ // Keep at least one runtime enabled to avoid leaving users without a fallback.
+ const currentEnabledCount = RUNTIME_ROWS.filter(
+ (runtime) => effectiveEnablement[runtime.id]
+ ).length;
+ if (currentEnabledCount <= 1) {
+ return;
+ }
+ }
+
+ const nextEnablement: RuntimeEnablement = {
+ ...effectiveEnablement,
+ [runtimeId]: enabled,
+ };
+
+ if (!isProjectScope) {
+ setRuntimeEnabled(runtimeId, enabled);
+ if (defaultRuntime && !nextEnablement[defaultRuntime]) {
+ setDefaultRuntime(getFallbackRuntime(nextEnablement));
+ }
+ return;
+ }
+
+ if (!selectedProjectPath || !projectOverrideEnabled) {
+ return;
+ }
+
+ setProjectEnablement(nextEnablement);
+
+ let nextDefaultRuntime = projectDefaultRuntime ?? null;
+ if (nextDefaultRuntime && !nextEnablement[nextDefaultRuntime]) {
+ nextDefaultRuntime = getFallbackRuntime(nextEnablement);
+ setProjectDefaultRuntime(nextDefaultRuntime);
+ }
+ const cacheEntry: RuntimeOverrideCacheEntry = {
+ enablement: nextEnablement,
+ defaultRuntime: nextDefaultRuntime,
+ pending: true,
+ };
+
+ const updatePayload: {
+ projectPath: string;
+ runtimeEnablement: RuntimeEnablement;
+ defaultRuntime?: RuntimeEnablementId | null;
+ runtimeOverridesEnabled?: boolean;
+ } = {
+ projectPath: selectedProjectPath,
+ runtimeEnablement: nextEnablement,
+ runtimeOverridesEnabled: true,
+ };
+
+ if (nextDefaultRuntime !== projectDefaultRuntime) {
+ updatePayload.defaultRuntime = nextDefaultRuntime ?? null;
+ }
+
+ queueProjectOverrideUpdate(selectedProjectPath, cacheEntry, updatePayload);
+ };
+
+ const handleDefaultRuntimeChange = (value: string) => {
+ const runtimeId = value as RuntimeEnablementId;
+
+ if (!isProjectScope) {
+ setDefaultRuntime(runtimeId);
+ return;
+ }
+
+ if (!selectedProjectPath || !projectOverrideEnabled) {
+ return;
+ }
+
+ setProjectDefaultRuntime(runtimeId);
+ const cacheEntry: RuntimeOverrideCacheEntry = {
+ enablement: projectEnablement,
+ defaultRuntime: runtimeId,
+ pending: true,
+ };
+ queueProjectOverrideUpdate(selectedProjectPath, cacheEntry, {
+ projectPath: selectedProjectPath,
+ defaultRuntime: runtimeId,
+ runtimeOverridesEnabled: true,
+ });
+ };
+
+ return (
+
+
+
+
+
Scope
+
Manage runtimes globally or per project.
+
+
+
+
+ {isProjectScope ? (
+
+
+
Override project settings
+
+ Keep global defaults or customize enabled runtimes for this project.
+
+
+
+
+ ) : null}
+
+
+
+
+
+
Default runtime
+
+ {isProjectScope
+ ? "Applied to new workspaces in this project."
+ : "Applied to new workspaces by default."}
+
+
+
+
+
+
+ {RUNTIME_ROWS.map((runtime) => {
+ const Icon = runtime.Icon;
+ const isCoder = runtime.id === "coder";
+ const availability = isCoder
+ ? null
+ : (availabilityMap?.[runtime.id as RuntimeMode] ?? null);
+ const availabilityReason = isProjectScope
+ ? isCoder
+ ? coderAvailability.state !== "available" && coderAvailability.state !== "loading"
+ ? coderAvailability.reason
+ : null
+ : availability && !availability.available
+ ? availability.reason
+ : null
+ : null;
+ const showLoading = isProjectScope
+ ? isCoder
+ ? coderAvailability.state === "loading"
+ : runtimeAvailabilityState.status === "loading"
+ : false;
+ const rowDisabled = isProjectScope && !projectOverrideEnabled;
+ const isLastEnabled = effectiveEnablement[runtime.id] && enabledRuntimeCount <= 1;
+ const switchDisabled = rowDisabled || isLastEnabled;
+ const switchControl = (
+
handleRuntimeToggle(runtime.id, checked)}
+ aria-label={`Toggle ${runtime.label} runtime`}
+ />
+ );
+ const switchNode =
+ isLastEnabled && !rowDisabled ? (
+
+
+ {switchControl}
+
+ At least one runtime must be enabled.
+
+ ) : (
+ switchControl
+ );
+
+ // Inline status indicators keep availability feedback from shifting row layout.
+ return (
+
+
+
+
+
+
{runtime.label}
+ {availabilityReason ? (
+
+
+
+
+ Unavailable
+
+
+
+ {availabilityReason}
+
+
+ ) : null}
+
+
{runtime.description}
+
+
+
+
+ {showLoading ? : null}
+
+ {switchNode}
+
+
+
+