🤖 feat: add Docker runtime to CreationControls UI

Add Docker option to runtime selector with image input field.
- Add Docker to RUNTIME_OPTIONS with DockerIcon and styling
- Add dockerImage/onDockerImageChange props to CreationControls
- Wire up Docker image state through useCreationWorkspace

_Generated with mux_

Author: ammar-agent

src/browser/components/ChatInput/CreationControls.tsx

@@ -4,7 +4,7 @@ import { Select } from "../Select";
 import { Loader2, Wand2 } from "lucide-react";
 import { cn } from "@/common/lib/utils";
 import { Tooltip, TooltipTrigger, TooltipContent } from "../ui/tooltip";
-import { SSHIcon, WorktreeIcon, LocalIcon } from "../icons/RuntimeIcons";
+import { SSHIcon, WorktreeIcon, LocalIcon, DockerIcon } from "../icons/RuntimeIcons";
 import { DocsLink } from "../DocsLink";
 import type { WorkspaceNameState } from "@/browser/hooks/useWorkspaceName";
 
@@ -17,9 +17,11 @@ interface CreationControlsProps {
   runtimeMode: RuntimeMode;
   defaultRuntimeMode: RuntimeMode;
   sshHost: string;
+  dockerImage: string;
   onRuntimeModeChange: (mode: RuntimeMode) => void;
   onSetDefaultRuntime: (mode: RuntimeMode) => void;
   onSshHostChange: (host: string) => void;
+  onDockerImageChange: (image: string) => void;
   disabled: boolean;
   /** Project name to display as header */
   projectName: string;
@@ -80,6 +82,17 @@ const RUNTIME_OPTIONS: Array<{
     idleClass:
       "bg-transparent text-muted border-transparent hover:border-[var(--color-runtime-ssh)]/40",
   },
+  {
+    value: RUNTIME_MODE.DOCKER,
+    label: "Docker",
+    description: "Run in Docker container",
+    docsPath: "/runtime/docker",
+    Icon: DockerIcon,
+    activeClass:
+      "bg-[var(--color-runtime-docker)]/20 text-[var(--color-runtime-docker-text)] border-[var(--color-runtime-docker)]/60",
+    idleClass:
+      "bg-transparent text-muted border-transparent hover:border-[var(--color-runtime-docker)]/40",
+  },
 ];
 
 function RuntimeButtonGroup(props: RuntimeButtonGroupProps) {
@@ -268,7 +281,11 @@ export function CreationControls(props: CreationControlsProps) {
             defaultMode={props.defaultRuntimeMode}
             onSetDefault={props.onSetDefaultRuntime}
             disabled={props.disabled}
-            disabledModes={isNonGitRepo ? [RUNTIME_MODE.WORKTREE, RUNTIME_MODE.SSH] : undefined}
+            disabledModes={
+              isNonGitRepo
+                ? [RUNTIME_MODE.WORKTREE, RUNTIME_MODE.SSH, RUNTIME_MODE.DOCKER]
+                : undefined
+            }
           />
 
           {/* Branch selector - shown for worktree/SSH */}
@@ -306,6 +323,21 @@ export function CreationControls(props: CreationControlsProps) {
               />
             </div>
           )}
+
+          {/* Docker Image Input */}
+          {props.runtimeMode === RUNTIME_MODE.DOCKER && (
+            <div className="flex items-center gap-2">
+              <label className="text-muted-foreground text-xs">image</label>
+              <input
+                type="text"
+                value={props.dockerImage}
+                onChange={(e) => props.onDockerImageChange(e.target.value)}
+                placeholder="ubuntu:22.04"
+                disabled={props.disabled}
+                className="bg-bg-dark text-foreground border-border-medium focus:border-accent h-7 w-36 rounded-md border px-2 text-sm focus:outline-none disabled:opacity-50"
+              />
+            </div>
+          )}
         </div>
       </div>
     </div>

src/browser/components/ChatInput/index.tsx

@@ -1441,9 +1441,11 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
               runtimeMode={creationState.runtimeMode}
               defaultRuntimeMode={creationState.defaultRuntimeMode}
               sshHost={creationState.sshHost}
+              dockerImage={creationState.dockerImage}
               onRuntimeModeChange={creationState.setRuntimeMode}
               onSetDefaultRuntime={creationState.setDefaultRuntimeMode}
               onSshHostChange={creationState.setSshHost}
+              onDockerImageChange={creationState.setDockerImage}
               disabled={creationState.isSending || isSending}
               projectName={props.projectName}
               nameState={creationState.nameState}

src/browser/components/ChatInput/useCreationWorkspace.ts

@@ -65,12 +65,15 @@ interface UseCreationWorkspaceReturn {
   runtimeMode: RuntimeMode;
   defaultRuntimeMode: RuntimeMode;
   sshHost: string;
+  dockerImage: string;
   /** Set the currently selected runtime mode (does not persist) */
   setRuntimeMode: (mode: RuntimeMode) => void;
   /** Set the default runtime mode for this project (persists via checkbox) */
   setDefaultRuntimeMode: (mode: RuntimeMode) => void;
   /** Set the SSH host (persisted separately from runtime mode) */
   setSshHost: (host: string) => void;
+  /** Set the Docker image (persisted separately from runtime mode) */
+  setDockerImage: (image: string) => void;
   toast: Toast | null;
   setToast: (toast: Toast | null) => void;
   isSending: boolean;
@@ -109,6 +112,7 @@ export function useCreationWorkspace({
     setRuntimeMode,
     setDefaultRuntimeMode,
     setSshHost,
+    setDockerImage,
     setTrunkBranch,
     getRuntimeString,
   } = useDraftWorkspaceSettings(projectPath, branches, recommendedTrunk);
@@ -261,9 +265,11 @@ export function useCreationWorkspace({
     runtimeMode: settings.runtimeMode,
     defaultRuntimeMode: settings.defaultRuntimeMode,
     sshHost: settings.sshHost,
+    dockerImage: settings.dockerImage,
     setRuntimeMode,
     setDefaultRuntimeMode,
     setSshHost,
+    setDockerImage,
     toast,
     setToast,
     isSending,