🤖 fix: validate workspace name input in real-time (#1021)

Show validation error as user types in the workspace name field. Uses
the existing validateWorkspaceName() function to check that names only
contain lowercase letters, digits, underscore, and hyphen.

_Generated with `mux`_

Author: ibetitsmike

src/browser/hooks/useWorkspaceName.ts

@@ -1,5 +1,6 @@
 import { useState, useRef, useCallback, useEffect, useMemo } from "react";
 import { useAPI } from "@/browser/contexts/API";
+import { validateWorkspaceName } from "@/common/utils/validation/workspaceValidation";
 
 export interface UseWorkspaceNameOptions {
   /** The user's message to generate a name for */
@@ -206,7 +207,13 @@ export function useWorkspaceName(options: UseWorkspaceNameOptions): UseWorkspace
 
   const setName = useCallback((name: string) => {
     setManualName(name);
-    setError(null);
+    // Validate manual input and show errors in real-time
+    if (name.trim()) {
+      const validation = validateWorkspaceName(name);
+      setError(validation.error ?? null);
+    } else {
+      setError(null);
+    }
   }, []);
 
   const waitForGeneration = useCallback(async (): Promise<string> => {

src/common/utils/validation/workspaceValidation.test.ts

@@ -57,7 +57,7 @@ describe("validateWorkspaceName", () => {
     test("rejects uppercase letters", () => {
       const result = validateWorkspaceName("MyBranch");
       expect(result.valid).toBe(false);
-      expect(result.error).toContain("lowercase");
+      expect(result.error).toContain("a-z");
     });
 
     test("rejects spaces", () => {

src/common/utils/validation/workspaceValidation.ts

@@ -17,7 +17,7 @@ export function validateWorkspaceName(name: string): { valid: boolean; error?: s
   if (!validPattern.test(name)) {
     return {
       valid: false,
-      error: "Workspace name can only contain lowercase letters, digits, underscore, and hyphen",
+      error: "Use only: a-z, 0-9, _, -",
     };
   }
 

tests/ipc/createWorkspace.test.ts

@@ -798,9 +798,9 @@ exit 1
             try {
               const invalidCases = [
                 { name: "", expectedErrorFragment: "empty" },
-                { name: "My-Branch", expectedErrorFragment: "lowercase" },
-                { name: "branch name", expectedErrorFragment: "lowercase" },
-                { name: "branch@123", expectedErrorFragment: "lowercase" },
+                { name: "My-Branch", expectedErrorFragment: "a-z" },
+                { name: "branch name", expectedErrorFragment: "a-z" },
+                { name: "branch@123", expectedErrorFragment: "a-z" },
                 { name: "a".repeat(65), expectedErrorFragment: "64 characters" },
               ];
 

tests/ipc/forkWorkspace.test.ts

@@ -49,9 +49,9 @@ describeIntegration("Workspace fork", () => {
         // Test various invalid names
         const invalidNames = [
           { name: "", expectedError: "empty" },
-          { name: "Invalid-Name", expectedError: "lowercase" },
-          { name: "name with spaces", expectedError: "lowercase" },
-          { name: "name@special", expectedError: "lowercase" },
+          { name: "Invalid-Name", expectedError: "a-z" },
+          { name: "name with spaces", expectedError: "a-z" },
+          { name: "name@special", expectedError: "a-z" },
           { name: "a".repeat(65), expectedError: "64 characters" },
         ];