🤖 Add SSH runtime badge to workspace sidebar and title bar

Add a visual indicator showing which SSH host a workspace is running on:
- Badge displays 🖥️ icon + hostname for SSH workspaces
- Appears in workspace sidebar (left of workspace name) and title bar
- Tooltip shows full SSH host string on hover
- No badge shown for local workspaces

Implementation:
- New RuntimeBadge component with accent-colored styling
- extractSshHostname() utility handles various SSH host formats
- Uses existing runtimeConfig from WorkspaceMetadata (no new IPC)
- Comprehensive test coverage for hostname extraction

Generated with `cmux`

Author: ammar-agent

src/components/RuntimeBadge.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import type { RuntimeConfig } from "@/types/runtime";
+import { extractSshHostname } from "@/utils/ui/runtimeBadge";
+import { TooltipWrapper, Tooltip } from "./Tooltip";
+
+interface RuntimeBadgeProps {
+  runtimeConfig?: RuntimeConfig;
+  className?: string;
+}
+
+/**
+ * Badge to display SSH runtime information.
+ * Shows compute icon + hostname for SSH runtimes, nothing for local.
+ */
+export function RuntimeBadge({ runtimeConfig, className }: RuntimeBadgeProps) {
+  const hostname = extractSshHostname(runtimeConfig);
+
+  if (!hostname) {
+    return null;
+  }
+
+  return (
+    <TooltipWrapper inline>
+      <span
+        className={cn(
+          "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium",
+          "bg-accent/10 text-accent border border-accent/30",
+          className
+        )}
+      >
+        <span className="text-[10px]" aria-label="SSH Runtime">
+          🖥️
+        </span>
+        <span className="truncate">{hostname}</span>
+      </span>
+      <Tooltip align="right">
+        Running on SSH host: {runtimeConfig?.type === "ssh" ? runtimeConfig.host : hostname}
+      </Tooltip>
+    </TooltipWrapper>
+  );
+}

src/components/TitleBar.tsx

@@ -4,6 +4,8 @@ import { VERSION } from "@/version";
 import { TooltipWrapper, Tooltip } from "./Tooltip";
 import type { UpdateStatus } from "@/types/ipc";
 import { isTelemetryEnabled } from "@/telemetry";
+import { useApp } from "@/contexts/AppContext";
+import { RuntimeBadge } from "./RuntimeBadge";
 
 // Update check intervals
 const UPDATE_CHECK_INTERVAL_MS = 4 * 60 * 60 * 1000; // 4 hours
@@ -78,6 +80,12 @@ export function TitleBar() {
   const lastHoverCheckTime = useRef<number>(0);
   const telemetryEnabled = isTelemetryEnabled();
 
+  // Get selected workspace runtime config
+  const { selectedWorkspace, workspaceMetadata } = useApp();
+  const runtimeConfig = selectedWorkspace?.workspaceId
+    ? workspaceMetadata.get(selectedWorkspace.workspaceId)?.runtimeConfig
+    : undefined;
+
   useEffect(() => {
     // Skip update checks if telemetry is disabled
     if (!telemetryEnabled) {
@@ -242,6 +250,7 @@ export function TitleBar() {
             </Tooltip>
           </TooltipWrapper>
         )}
+        <RuntimeBadge runtimeConfig={runtimeConfig} />
         <div className="min-w-0 cursor-text truncate text-xs font-normal tracking-wider select-text">
           cmux {gitDescribe ?? "(dev)"}
         </div>

src/components/WorkspaceListItem.tsx

@@ -9,6 +9,7 @@ import { ModelDisplay } from "./Messages/ModelDisplay";
 import { StatusIndicator } from "./StatusIndicator";
 import { useRename } from "@/contexts/WorkspaceRenameContext";
 import { cn } from "@/lib/utils";
+import { RuntimeBadge } from "./RuntimeBadge";
 
 export interface WorkspaceSelection {
   projectPath: string;
@@ -132,7 +133,7 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
     <React.Fragment>
       <div
         className={cn(
-          "py-1.5 px-3 pl-7 cursor-pointer grid grid-cols-[auto_auto_1fr_auto] gap-2 items-center border-l-[3px] border-transparent transition-all duration-150 text-[13px] relative hover:bg-hover [&:hover_button]:opacity-100",
+          "py-1.5 px-3 pl-7 cursor-pointer grid grid-cols-[auto_auto_auto_1fr_auto] gap-2 items-center border-l-[3px] border-transparent transition-all duration-150 text-[13px] relative hover:bg-hover [&:hover_button]:opacity-100",
           isSelected && "bg-hover border-l-[#569cd6]"
         )}
         onClick={() =>
@@ -181,6 +182,7 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
           workspaceId={workspaceId}
           tooltipPosition="right"
         />
+        <RuntimeBadge runtimeConfig={metadata.runtimeConfig} />
         {isEditing ? (
           <input
             className="bg-input-bg text-input-text border-input-border font-inherit focus:border-input-border-focus min-w-0 rounded-sm border px-1 py-0.5 text-right text-[13px] outline-none"

src/utils/ui/runtimeBadge.test.ts

@@ -0,0 +1,62 @@
+import { describe, it, expect } from "@jest/globals";
+import { extractSshHostname } from "./runtimeBadge";
+import type { RuntimeConfig } from "@/types/runtime";
+
+describe("extractSshHostname", () => {
+  it("should return null for undefined runtime config", () => {
+    expect(extractSshHostname(undefined)).toBeNull();
+  });
+
+  it("should return null for local runtime", () => {
+    const config: RuntimeConfig = {
+      type: "local",
+      srcBaseDir: "/home/user/.cmux/src",
+    };
+    expect(extractSshHostname(config)).toBeNull();
+  });
+
+  it("should extract hostname from simple host", () => {
+    const config: RuntimeConfig = {
+      type: "ssh",
+      host: "myserver",
+      srcBaseDir: "/home/user/.cmux/src",
+    };
+    expect(extractSshHostname(config)).toBe("myserver");
+  });
+
+  it("should extract hostname from user@host format", () => {
+    const config: RuntimeConfig = {
+      type: "ssh",
+      host: "user@myserver.example.com",
+      srcBaseDir: "/home/user/.cmux/src",
+    };
+    expect(extractSshHostname(config)).toBe("myserver.example.com");
+  });
+
+  it("should handle hostname with port in host string", () => {
+    const config: RuntimeConfig = {
+      type: "ssh",
+      host: "myserver:2222",
+      srcBaseDir: "/home/user/.cmux/src",
+    };
+    expect(extractSshHostname(config)).toBe("myserver");
+  });
+
+  it("should handle user@host:port format", () => {
+    const config: RuntimeConfig = {
+      type: "ssh",
+      host: "user@myserver.example.com:2222",
+      srcBaseDir: "/home/user/.cmux/src",
+    };
+    expect(extractSshHostname(config)).toBe("myserver.example.com");
+  });
+
+  it("should handle SSH config alias", () => {
+    const config: RuntimeConfig = {
+      type: "ssh",
+      host: "my-server-alias",
+      srcBaseDir: "/home/user/.cmux/src",
+    };
+    expect(extractSshHostname(config)).toBe("my-server-alias");
+  });
+});

src/utils/ui/runtimeBadge.ts

@@ -0,0 +1,26 @@
+import type { RuntimeConfig } from "@/types/runtime";
+
+/**
+ * Extract hostname from SSH runtime config.
+ * Returns null if runtime is local or not configured.
+ *
+ * Examples:
+ * - "hostname" -> "hostname"
+ * - "user@hostname" -> "hostname"
+ * - "user@hostname:port" -> "hostname"
+ */
+export function extractSshHostname(runtimeConfig?: RuntimeConfig): string | null {
+  if (!runtimeConfig?.type || runtimeConfig.type !== "ssh") {
+    return null;
+  }
+
+  const { host } = runtimeConfig;
+
+  // Remove user@ prefix if present
+  const withoutUser = host.includes("@") ? host.split("@")[1] : host;
+
+  // Remove :port suffix if present (though port is usually in separate field)
+  const hostname = withoutUser.split(":")[0];
+
+  return hostname || null;
+}