🤖 feat: add SSH config hosts dropdown for runtime selection

When selecting SSH runtime, the host input now shows a dropdown with hosts
from the user's ~/.ssh/config file. Features:

- Parses Host directives from SSH config (skipping wildcards and negation patterns)
- Shows dropdown above the input when focused
- Supports keyboard navigation (arrow keys, Enter, Escape)
- Filters hosts as user types
- Works in both browser and desktop modes

_Generated with `mux`_

Author: ibetitsmike

src/browser/api.ts

@@ -364,6 +364,9 @@ const webApi: IPCApi = {
   voice: {
     transcribe: (audioBase64) => invokeIPC(IPC_CHANNELS.VOICE_TRANSCRIBE, audioBase64),
   },
+  ssh: {
+    getConfigHosts: () => invokeIPC(IPC_CHANNELS.SSH_CONFIG_HOSTS),
+  },
   update: {
     check: () => invokeIPC(IPC_CHANNELS.UPDATE_CHECK),
     download: () => invokeIPC(IPC_CHANNELS.UPDATE_DOWNLOAD),

src/browser/components/ChatInput/CreationControls.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { RUNTIME_MODE, type RuntimeMode } from "@/common/types/runtime";
 import { TooltipWrapper, Tooltip } from "../Tooltip";
 import { Select } from "../Select";
+import { SSHHostInput } from "./SSHHostInput";
 
 interface CreationControlsProps {
   branches: string[];
@@ -69,13 +70,10 @@ export function CreationControls(props: CreationControlsProps) {
           aria-label="Runtime mode"
         />
         {props.runtimeMode === RUNTIME_MODE.SSH && (
-          <input
-            type="text"
+          <SSHHostInput
             value={props.sshHost}
-            onChange={(e) => props.onRuntimeChange(RUNTIME_MODE.SSH, e.target.value)}
-            placeholder="user@host"
+            onChange={(value) => props.onRuntimeChange(RUNTIME_MODE.SSH, value)}
             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"
           />
         )}
         <TooltipWrapper inline>

src/browser/components/ChatInput/SSHHostInput.tsx

@@ -0,0 +1,138 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+
+interface SSHHostInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  disabled: boolean;
+}
+
+/**
+ * SSH host input with dropdown of hosts from SSH config.
+ * Shows dropdown above the input when focused and there are matching hosts.
+ */
+export function SSHHostInput(props: SSHHostInputProps) {
+  const [hosts, setHosts] = useState<string[]>([]);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Fetch SSH config hosts on mount
+  useEffect(() => {
+    window.api.ssh
+      .getConfigHosts()
+      .then(setHosts)
+      .catch(() => setHosts([]));
+  }, []);
+
+  // Filter hosts based on current input
+  const filteredHosts = hosts.filter((host) =>
+    host.toLowerCase().includes(props.value.toLowerCase())
+  );
+
+  // Handle clicking outside to close dropdown
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setShowDropdown(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const { onChange } = props;
+  const selectHost = useCallback(
+    (host: string) => {
+      onChange(host);
+      setShowDropdown(false);
+      setHighlightedIndex(-1);
+      inputRef.current?.focus();
+    },
+    [onChange]
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (!showDropdown || filteredHosts.length === 0) {
+        return;
+      }
+
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setHighlightedIndex((prev) => (prev < filteredHosts.length - 1 ? prev + 1 : 0));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : filteredHosts.length - 1));
+          break;
+        case "Enter":
+          if (highlightedIndex >= 0) {
+            e.preventDefault();
+            selectHost(filteredHosts[highlightedIndex]);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          setShowDropdown(false);
+          setHighlightedIndex(-1);
+          break;
+      }
+    },
+    [showDropdown, filteredHosts, highlightedIndex, selectHost]
+  );
+
+  const handleFocus = () => {
+    if (filteredHosts.length > 0) {
+      setShowDropdown(true);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    props.onChange(e.target.value);
+    // Show dropdown when typing if there are matches
+    if (hosts.length > 0) {
+      setShowDropdown(true);
+    }
+    setHighlightedIndex(-1);
+  };
+
+  // Show dropdown when there are filtered hosts
+  const shouldShowDropdown = showDropdown && filteredHosts.length > 0 && !props.disabled;
+
+  return (
+    <div ref={containerRef} className="relative">
+      <input
+        ref={inputRef}
+        type="text"
+        value={props.value}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onKeyDown={handleKeyDown}
+        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"
+        autoComplete="off"
+      />
+      {shouldShowDropdown && (
+        <div className="bg-separator border-border-light absolute bottom-full left-0 z-[1000] mb-1 max-h-[150px] min-w-32 overflow-y-auto rounded border shadow-[0_4px_12px_rgba(0,0,0,0.3)]">
+          {filteredHosts.map((host, index) => (
+            <div
+              key={host}
+              onClick={() => selectHost(host)}
+              onMouseEnter={() => setHighlightedIndex(index)}
+              className={`cursor-pointer px-2 py-1 text-xs ${
+                index === highlightedIndex
+                  ? "bg-accent text-white"
+                  : "text-foreground hover:bg-border-medium"
+              }`}
+            >
+              {host}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/browser/stories/mockFactory.ts

@@ -459,6 +459,9 @@ export function createMockAPI(options: MockAPIOptions): IPCApi {
     voice: {
       transcribe: () => Promise.resolve({ success: false, error: "Not implemented in mock" }),
     },
+    ssh: {
+      getConfigHosts: () => Promise.resolve(["dev-server", "prod-server", "staging"]),
+    },
     update: {
       check: () => Promise.resolve(undefined),
       download: () => Promise.resolve(undefined),

src/common/constants/ipc-constants.ts

@@ -71,6 +71,9 @@ export const IPC_CHANNELS = {
   // Voice channels
   VOICE_TRANSCRIBE: "voice:transcribe",
 
+  // SSH channels
+  SSH_CONFIG_HOSTS: "ssh:configHosts",
+
   // Dynamic channel prefixes
   WORKSPACE_CHAT_PREFIX: "workspace:chat:",
   WORKSPACE_METADATA: "workspace:metadata",

src/common/types/ipc.ts

@@ -375,6 +375,10 @@ export interface IPCApi {
     /** Transcribe audio using OpenAI Whisper. Audio should be base64-encoded webm/opus. */
     transcribe(audioBase64: string): Promise<Result<string, string>>;
   };
+  ssh: {
+    /** Get list of hosts from user's SSH config file */
+    getConfigHosts(): Promise<string[]>;
+  };
   update: {
     check(): Promise<void>;
     download(): Promise<void>;

src/desktop/preload.ts

@@ -164,6 +164,9 @@ const api: IPCApi = {
     transcribe: (audioBase64: string) =>
       ipcRenderer.invoke(IPC_CHANNELS.VOICE_TRANSCRIBE, audioBase64),
   },
+  ssh: {
+    getConfigHosts: () => ipcRenderer.invoke(IPC_CHANNELS.SSH_CONFIG_HOSTS),
+  },
   update: {
     check: () => ipcRenderer.invoke(IPC_CHANNELS.UPDATE_CHECK),
     download: () => ipcRenderer.invoke(IPC_CHANNELS.UPDATE_DOWNLOAD),

src/node/services/ipcMain.ts

@@ -1896,6 +1896,48 @@ export class IpcMain {
         }
       }
     );
+
+    // SSH config hosts handler
+    ipcMain.handle(IPC_CHANNELS.SSH_CONFIG_HOSTS, async () => {
+      try {
+        return await this.parseSSHConfigHosts();
+      } catch (error) {
+        log.error("Failed to parse SSH config hosts:", error);
+        return [];
+      }
+    });
+  }
+
+  /**
+   * Parse SSH config file and extract host definitions.
+   * Returns list of configured hosts sorted alphabetically.
+   */
+  private async parseSSHConfigHosts(): Promise<string[]> {
+    const sshConfigPath = path.join(process.env.HOME ?? "", ".ssh", "config");
+    try {
+      const content = await fsPromises.readFile(sshConfigPath, "utf-8");
+      const hosts = new Set<string>();
+
+      // Parse Host directives - each can have multiple patterns separated by whitespace
+      // Skip wildcards (*) and negation patterns (!)
+      for (const line of content.split("\n")) {
+        const trimmed = line.trim();
+        if (trimmed.toLowerCase().startsWith("host ")) {
+          const patterns = trimmed.slice(5).trim().split(/\s+/);
+          for (const pattern of patterns) {
+            // Skip wildcards and negation patterns
+            if (!pattern.includes("*") && !pattern.includes("?") && !pattern.startsWith("!")) {
+              hosts.add(pattern);
+            }
+          }
+        }
+      }
+
+      return Array.from(hosts).sort((a, b) => a.localeCompare(b));
+    } catch {
+      // File doesn't exist or can't be read - return empty list
+      return [];
+    }
   }
 
   private registerTerminalHandlers(ipcMain: ElectronIpcMain, mainWindow: BrowserWindow): void {