🤖 feat: icon-based runtime selector for new workspace page

Replace dropdown selector with three clickable icons (Local, Worktree, SSH):
- Selected icon shows active styling (brighter colors)
- Tooltips show runtime name and description
- Clicking an icon sets it as the project default

Simplify runtime persistence:
- Single default runtime per project (worktree by default)
- Default can only be changed via icon selector
- Slash command runtime overrides are one-time, don't change default

Extract shared RuntimeIcons component for reuse with RuntimeBadge.

Author: ammar-agent

src/browser/components/ChatInput/CreationControls.tsx

@@ -1,15 +1,18 @@
 import React from "react";
 import { RUNTIME_MODE, type RuntimeMode } from "@/common/types/runtime";
-import { TooltipWrapper, Tooltip } from "../Tooltip";
 import { Select } from "../Select";
+import { RuntimeIconSelector } from "../RuntimeIconSelector";
 
 interface CreationControlsProps {
   branches: string[];
   trunkBranch: string;
   onTrunkBranchChange: (branch: string) => void;
   runtimeMode: RuntimeMode;
   sshHost: string;
-  onRuntimeChange: (mode: RuntimeMode, host: string) => void;
+  /** Called when user changes runtime mode via checkbox in tooltip */
+  onRuntimeModeChange: (mode: RuntimeMode) => void;
+  /** Called when user changes SSH host */
+  onSshHostChange: (host: string) => void;
   disabled: boolean;
 }
 
@@ -25,40 +28,12 @@ export function CreationControls(props: CreationControlsProps) {
 
   return (
     <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
-      {/* Runtime Selector - first */}
-      <div
-        className="flex items-center gap-1"
-        data-component="RuntimeSelectorGroup"
-        data-tutorial="runtime-selector"
-      >
-        <label className="text-muted text-xs">Runtime:</label>
-        <Select
-          value={props.runtimeMode}
-          options={[
-            { value: RUNTIME_MODE.LOCAL, label: "Local" },
-            { value: RUNTIME_MODE.WORKTREE, label: "Worktree" },
-            { value: RUNTIME_MODE.SSH, label: "SSH" },
-          ]}
-          onChange={(newMode) => {
-            const mode = newMode as RuntimeMode;
-            // Preserve SSH host across mode switches so it's remembered when returning to SSH
-            props.onRuntimeChange(mode, props.sshHost);
-          }}
-          disabled={props.disabled}
-          aria-label="Runtime mode"
-        />
-        <TooltipWrapper inline>
-          <span className="text-muted cursor-help text-xs">?</span>
-          <Tooltip className="tooltip" align="center" width="wide">
-            <strong>Runtime:</strong>
-            <br />
-            • Local: work directly in project directory (no isolation)
-            <br />
-            • Worktree: git worktree in ~/.mux/src (isolated)
-            <br />• SSH: remote clone on SSH host
-          </Tooltip>
-        </TooltipWrapper>
-      </div>
+      {/* Runtime Selector - icon-based with tooltips */}
+      <RuntimeIconSelector
+        value={props.runtimeMode}
+        onChange={props.onRuntimeModeChange}
+        disabled={props.disabled}
+      />
 
       {/* Trunk Branch Selector - hidden for Local runtime */}
       {showTrunkBranchSelector && (
@@ -86,7 +61,7 @@ export function CreationControls(props: CreationControlsProps) {
         <input
           type="text"
           value={props.sshHost}
-          onChange={(e) => props.onRuntimeChange(RUNTIME_MODE.SSH, e.target.value)}
+          onChange={(e) => props.onSshHostChange(e.target.value)}
           placeholder="user@host"
           disabled={props.disabled}
           className="bg-separator text-foreground border-border-medium focus:border-accent w-32 rounded border px-1 py-0.5 text-xs focus:outline-none disabled:opacity-50"

src/browser/components/ChatInput/index.tsx

@@ -1383,7 +1383,8 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
                 onTrunkBranchChange={creationState.setTrunkBranch}
                 runtimeMode={creationState.runtimeMode}
                 sshHost={creationState.sshHost}
-                onRuntimeChange={creationState.setRuntimeOptions}
+                onRuntimeModeChange={creationState.setRuntimeMode}
+                onSshHostChange={creationState.setSshHost}
                 disabled={creationState.isSending || isSending}
               />
             )}

src/browser/components/ChatInput/useCreationWorkspace.test.tsx

@@ -487,27 +487,32 @@ function createDraftSettingsHarness(
     runtimeString: string | undefined;
   };
 
-  const setRuntimeOptions = mock((mode: RuntimeMode, host: string) => {
-    state.runtimeMode = mode;
-    state.sshHost = host;
-    const trimmedHost = host.trim();
-    state.runtimeString = mode === "ssh" ? (trimmedHost ? `ssh ${trimmedHost}` : "ssh") : undefined;
-  });
-
   const setTrunkBranch = mock((branch: string) => {
     state.trunkBranch = branch;
   });
 
   const getRuntimeString = mock(() => state.runtimeString);
 
+  const setRuntimeMode = mock((mode: RuntimeMode) => {
+    state.runtimeMode = mode;
+    const trimmedHost = state.sshHost.trim();
+    state.runtimeString = mode === "ssh" ? (trimmedHost ? `ssh ${trimmedHost}` : "ssh") : undefined;
+  });
+
+  const setSshHost = mock((host: string) => {
+    state.sshHost = host;
+  });
+
   return {
     state,
-    setRuntimeOptions,
+    setRuntimeMode,
+    setSshHost,
     setTrunkBranch,
     getRuntimeString,
     snapshot(): {
       settings: DraftWorkspaceSettings;
-      setRuntimeOptions: typeof setRuntimeOptions;
+      setRuntimeMode: typeof setRuntimeMode;
+      setSshHost: typeof setSshHost;
       setTrunkBranch: typeof setTrunkBranch;
       getRuntimeString: typeof getRuntimeString;
     } {
@@ -521,7 +526,8 @@ function createDraftSettingsHarness(
       };
       return {
         settings,
-        setRuntimeOptions,
+        setRuntimeMode,
+        setSshHost,
         setTrunkBranch,
         getRuntimeString,
       };

src/browser/components/ChatInput/useCreationWorkspace.ts

@@ -47,7 +47,10 @@ interface UseCreationWorkspaceReturn {
   setTrunkBranch: (branch: string) => void;
   runtimeMode: RuntimeMode;
   sshHost: string;
-  setRuntimeOptions: (mode: RuntimeMode, host: string) => void;
+  /** Set the default runtime mode for this project (only via checkbox) */
+  setRuntimeMode: (mode: RuntimeMode) => void;
+  /** Set the SSH host (persisted separately from runtime mode) */
+  setSshHost: (host: string) => void;
   toast: Toast | null;
   setToast: (toast: Toast | null) => void;
   isSending: boolean;
@@ -72,7 +75,7 @@ export function useCreationWorkspace({
   const [isSending, setIsSending] = useState(false);
 
   // Centralized draft workspace settings with automatic persistence
-  const { settings, setRuntimeOptions, setTrunkBranch, getRuntimeString } =
+  const { settings, setRuntimeMode, setSshHost, setTrunkBranch, getRuntimeString } =
     useDraftWorkspaceSettings(projectPath, branches, recommendedTrunk);
 
   // Get send options from shared hook (uses project-scoped storage key)
@@ -181,7 +184,8 @@ export function useCreationWorkspace({
     setTrunkBranch,
     runtimeMode: settings.runtimeMode,
     sshHost: settings.sshHost,
-    setRuntimeOptions,
+    setRuntimeMode,
+    setSshHost,
     toast,
     setToast,
     isSending,

src/browser/components/RuntimeBadge.tsx

@@ -4,6 +4,7 @@ import type { RuntimeConfig } from "@/common/types/runtime";
 import { isSSHRuntime, isWorktreeRuntime, isLocalProjectRuntime } from "@/common/types/runtime";
 import { extractSshHostname } from "@/browser/utils/ui/runtimeBadge";
 import { TooltipWrapper, Tooltip } from "./Tooltip";
+import { SSHIcon, WorktreeIcon, LocalIcon } from "./icons/RuntimeIcons";
 
 interface RuntimeBadgeProps {
   runtimeConfig?: RuntimeConfig;
@@ -12,72 +13,6 @@ interface RuntimeBadgeProps {
   isWorking?: boolean;
 }
 
-/** Server rack icon for SSH runtime */
-function SSHIcon() {
-  return (
-    <svg
-      width="10"
-      height="10"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-label="SSH Runtime"
-    >
-      <rect x="2" y="2" width="12" height="5" rx="1" />
-      <rect x="2" y="9" width="12" height="5" rx="1" />
-      <circle cx="5" cy="4.5" r="0.5" fill="currentColor" />
-      <circle cx="5" cy="11.5" r="0.5" fill="currentColor" />
-    </svg>
-  );
-}
-
-/** Git branch icon for worktree runtime */
-function WorktreeIcon() {
-  return (
-    <svg
-      width="10"
-      height="10"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-label="Worktree Runtime"
-    >
-      {/* Simplified git branch: vertical line with branch off */}
-      <circle cx="8" cy="3" r="2" />
-      <circle cx="8" cy="13" r="2" />
-      <line x1="8" y1="5" x2="8" y2="11" />
-      <circle cx="12" cy="7" r="2" />
-      <path d="M10 7 L8 9" />
-    </svg>
-  );
-}
-
-/** Folder icon for local project-dir runtime */
-function LocalIcon() {
-  return (
-    <svg
-      width="10"
-      height="10"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-label="Local Runtime"
-    >
-      {/* Folder icon */}
-      <path d="M2 4 L2 13 L14 13 L14 5 L8 5 L7 3 L2 3 L2 4" />
-    </svg>
-  );
-}
-
 // Runtime-specific color schemes - each type has consistent colors in idle/working states
 // Idle: subtle with visible colored border for discrimination
 // Working: brighter colors with pulse animation

src/browser/components/RuntimeIconSelector.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+import { cn } from "@/common/lib/utils";
+import { RUNTIME_MODE, type RuntimeMode } from "@/common/types/runtime";
+import { SSHIcon, WorktreeIcon, LocalIcon } from "./icons/RuntimeIcons";
+import { TooltipWrapper, Tooltip } from "./Tooltip";
+
+interface RuntimeIconSelectorProps {
+  value: RuntimeMode;
+  onChange: (mode: RuntimeMode) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+// Runtime-specific color schemes matching RuntimeBadge
+// Selected (active) uses the "working" styling, unselected uses "idle"
+const RUNTIME_STYLES = {
+  ssh: {
+    idle: "bg-transparent text-muted border-blue-500/30 hover:border-blue-500/50",
+    active: "bg-blue-500/20 text-blue-400 border-blue-500/60",
+  },
+  worktree: {
+    idle: "bg-transparent text-muted border-purple-500/30 hover:border-purple-500/50",
+    active: "bg-purple-500/20 text-purple-400 border-purple-500/60",
+  },
+  local: {
+    idle: "bg-transparent text-muted border-muted/30 hover:border-muted/50",
+    active: "bg-muted/30 text-foreground border-muted/60",
+  },
+} as const;
+
+const RUNTIME_INFO: Record<RuntimeMode, { label: string; description: string }> = {
+  local: {
+    label: "Local",
+    description: "Work directly in project directory (no isolation)",
+  },
+  worktree: {
+    label: "Worktree",
+    description: "Git worktree in ~/.mux/src (isolated)",
+  },
+  ssh: {
+    label: "SSH",
+    description: "Remote clone on SSH host",
+  },
+};
+
+interface RuntimeIconButtonProps {
+  mode: RuntimeMode;
+  isSelected: boolean;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+function RuntimeIconButton(props: RuntimeIconButtonProps) {
+  const info = RUNTIME_INFO[props.mode];
+  const styles = RUNTIME_STYLES[props.mode];
+  const stateStyle = props.isSelected ? styles.active : styles.idle;
+
+  const Icon =
+    props.mode === RUNTIME_MODE.SSH
+      ? SSHIcon
+      : props.mode === RUNTIME_MODE.WORKTREE
+        ? WorktreeIcon
+        : LocalIcon;
+
+  return (
+    <TooltipWrapper inline>
+      <button
+        type="button"
+        onClick={props.onClick}
+        disabled={props.disabled}
+        className={cn(
+          "inline-flex items-center justify-center rounded border p-1.5 transition-colors",
+          "focus:outline-none focus-visible:ring-1 focus-visible:ring-blue-500",
+          stateStyle,
+          props.disabled && "cursor-not-allowed opacity-50"
+        )}
+        aria-label={`${info.label} runtime`}
+        aria-pressed={props.isSelected}
+      >
+        <Icon size={14} />
+      </button>
+      <Tooltip align="center" width="wide" position="bottom">
+        <strong>{info.label}</strong>
+        <p className="text-muted mt-0.5">{info.description}</p>
+      </Tooltip>
+    </TooltipWrapper>
+  );
+}
+
+/**
+ * Runtime selector using icons with tooltips.
+ * Shows Local, Worktree, and SSH options as clickable icons.
+ * Selected runtime uses "active" styling (brighter colors).
+ * Clicking an icon sets it as the project default.
+ */
+export function RuntimeIconSelector(props: RuntimeIconSelectorProps) {
+  const modes: RuntimeMode[] = [RUNTIME_MODE.LOCAL, RUNTIME_MODE.WORKTREE, RUNTIME_MODE.SSH];
+
+  return (
+    <div
+      className={cn("inline-flex items-center gap-1", props.className)}
+      data-component="RuntimeIconSelector"
+      data-tutorial="runtime-selector"
+    >
+      {modes.map((mode) => (
+        <RuntimeIconButton
+          key={mode}
+          mode={mode}
+          isSelected={props.value === mode}
+          onClick={() => props.onChange(mode)}
+          disabled={props.disabled}
+        />
+      ))}
+    </div>
+  );
+}