🤖 Add SSH runtime badge to workspace UI

src/App.stories.tsx

@@ -166,6 +166,11 @@ export const SingleProject: Story = {
         projectPath: "/home/user/projects/my-app",
         projectName: "my-app",
         namedWorkspacePath: "/home/user/.cmux/src/my-app/feature-auth",
+        runtimeConfig: {
+          type: "ssh",
+          host: "dev-server.example.com",
+          srcBaseDir: "/home/user/.cmux/src",
+        },
       },
       {
         id: "my-app-bugfix",
@@ -249,13 +254,23 @@ export const MultipleProjects: Story = {
         projectPath: "/home/user/projects/backend",
         projectName: "backend",
         namedWorkspacePath: "/home/user/.cmux/src/backend/api-v2",
+        runtimeConfig: {
+          type: "ssh",
+          host: "prod-server.example.com",
+          srcBaseDir: "/home/user/.cmux/src",
+        },
       },
       {
         id: "5e6f7a8b9c",
         name: "db-migration",
         projectPath: "/home/user/projects/backend",
         projectName: "backend",
         namedWorkspacePath: "/home/user/.cmux/src/backend/db-migration",
+        runtimeConfig: {
+          type: "ssh",
+          host: "staging.example.com",
+          srcBaseDir: "/home/user/.cmux/src",
+        },
       },
       {
         id: "6f7a8b9c0d",

src/App.tsx

@@ -641,6 +641,9 @@ function AppInner() {
                     selectedWorkspace.workspaceId
                   }
                   namedWorkspacePath={selectedWorkspace.namedWorkspacePath ?? ""}
+                  runtimeConfig={
+                    workspaceMetadata.get(selectedWorkspace.workspaceId)?.runtimeConfig
+                  }
                 />
               </ErrorBoundary>
             ) : (

src/components/AIView.tsx

@@ -24,17 +24,20 @@ import { useWorkspaceState, useWorkspaceAggregator } from "@/stores/WorkspaceSto
 import { StatusIndicator } from "./StatusIndicator";
 import { getModelName } from "@/utils/ai/models";
 import { GitStatusIndicator } from "./GitStatusIndicator";
+import { RuntimeBadge } from "./RuntimeBadge";
 
 import { useGitStatus } from "@/stores/GitStatusStore";
 import { TooltipWrapper, Tooltip } from "./Tooltip";
 import type { DisplayedMessage } from "@/types/message";
+import type { RuntimeConfig } from "@/types/runtime";
 import { useAIViewKeybinds } from "@/hooks/useAIViewKeybinds";
 
 interface AIViewProps {
   workspaceId: string;
   projectName: string;
   branch: string;
   namedWorkspacePath: string; // User-friendly path for display and terminal
+  runtimeConfig?: RuntimeConfig;
   className?: string;
 }
 
@@ -43,6 +46,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
   projectName,
   branch,
   namedWorkspacePath,
+  runtimeConfig,
   className,
 }) => {
   const chatAreaRef = useRef<HTMLDivElement>(null);
@@ -348,6 +352,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
               workspaceId={workspaceId}
               tooltipPosition="bottom"
             />
+            <RuntimeBadge runtimeConfig={runtimeConfig} />
             <span className="min-w-0 truncate font-mono text-xs">
               {projectName} / {branch}
             </span>

src/components/RuntimeBadge.tsx

@@ -0,0 +1,56 @@
+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
+        )}
+      >
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-label="SSH Runtime"
+        >
+          {/* Server rack icon */}
+          <rect x="2" y="2" width="12" height="4" rx="1" />
+          <rect x="2" y="10" width="12" height="4" rx="1" />
+          <line x1="5" y1="4" x2="5" y2="4" />
+          <line x1="5" y1="12" x2="5" y2="12" />
+        </svg>
+        <span className="truncate">{hostname}</span>
+      </span>
+      <Tooltip align="right">
+        Running on SSH host: {runtimeConfig?.type === "ssh" ? runtimeConfig.host : hostname}
+      </Tooltip>
+    </TooltipWrapper>
+  );
+}

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;
@@ -181,30 +182,33 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
           workspaceId={workspaceId}
           tooltipPosition="right"
         />
-        {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"
-            value={editingName}
-            onChange={(e) => setEditingName(e.target.value)}
-            onKeyDown={handleRenameKeyDown}
-            onBlur={() => void handleConfirmRename()}
-            autoFocus
-            onClick={(e) => e.stopPropagation()}
-            aria-label={`Rename workspace ${displayName}`}
-            data-workspace-id={workspaceId}
-          />
-        ) : (
-          <span
-            className="text-foreground min-w-0 cursor-pointer truncate rounded-sm px-1 py-0.5 text-right text-[14px] transition-colors duration-200 hover:bg-white/5"
-            onDoubleClick={(e) => {
-              e.stopPropagation();
-              startRenaming();
-            }}
-            title="Double-click to rename"
-          >
-            {displayName}
-          </span>
-        )}
+        <div className="flex min-w-0 items-center justify-end gap-1.5">
+          <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"
+              value={editingName}
+              onChange={(e) => setEditingName(e.target.value)}
+              onKeyDown={handleRenameKeyDown}
+              onBlur={() => void handleConfirmRename()}
+              autoFocus
+              onClick={(e) => e.stopPropagation()}
+              aria-label={`Rename workspace ${displayName}`}
+              data-workspace-id={workspaceId}
+            />
+          ) : (
+            <span
+              className="text-foreground min-w-0 cursor-pointer truncate rounded-sm px-1 py-0.5 text-right text-[14px] transition-colors duration-200 hover:bg-white/5"
+              onDoubleClick={(e) => {
+                e.stopPropagation();
+                startRenaming();
+              }}
+              title="Double-click to rename"
+            >
+              {displayName}
+            </span>
+          )}
+        </div>
         <StatusIndicator
           className="ml-2"
           streaming={isStreaming}

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;
+}