fix: config profile form focus loss and path validation messages

- Fix React key stability in env vars, files, and mount file inputs
  to prevent focus loss on every keystroke
- Improve validation error messages to explain Files vs Mounts
- Add helper text in UI clarifying relative vs absolute paths

Fixes focus loss bug and improves UX for path validation errors.

apps/api/src/api/config_profiles.py

@@ -78,8 +78,13 @@ class MountItem(BaseModel):
     @classmethod
     def validate_files(cls, v: dict) -> dict:
         for path in v.keys():
-            if ".." in path or path.startswith("/") or not path:
+            if ".." in path or not path:
                 raise ValueError(f"Invalid file path: {path}")
+            if path.startswith("/"):
+                raise ValueError(
+                    f"Mount file paths must be relative (got: {path}). "
+                    f"The mount target defines the absolute container path."
+                )
         return v
 
 
@@ -103,8 +108,13 @@ class ConfigProfileCreate(BaseModel):
     @classmethod
     def validate_files(cls, v: dict) -> dict:
         for path in v.keys():
-            if ".." in path or path.startswith("/") or not path:
+            if ".." in path or not path:
                 raise ValueError(f"Invalid file path: {path}")
+            if path.startswith("/"):
+                raise ValueError(
+                    f"File paths must be relative (got: {path}). "
+                    f"Use Mounts for absolute container paths."
+                )
         return v
 
     @field_validator("env_vars")

apps/web/src/pages/config-profiles.tsx

@@ -343,8 +343,8 @@ export const ConfigProfilesPage = () => {
 
           <div className="form-section">
             <h4>Environment Variables</h4>
-            {Object.entries(formData.env_vars || {}).map(([key, value]) => (
-              <div key={key} className="form-row">
+            {Object.entries(formData.env_vars || {}).map(([key, value], idx) => (
+              <div key={idx} className="form-row">
                 <input
                   type="text"
                   value={key}
@@ -387,8 +387,9 @@ export const ConfigProfilesPage = () => {
 
           <div className="form-section">
             <h4>Files</h4>
-            {Object.entries(formData.files || {}).map(([path, content]) => (
-              <div key={path} className="file-entry">
+            <p className="muted">Relative paths written to the instance directory. Use Mounts below for absolute container paths.</p>
+            {Object.entries(formData.files || {}).map(([path, content], idx) => (
+              <div key={idx} className="file-entry">
                 <input
                   type="text"
                   value={path}
@@ -414,6 +415,7 @@ export const ConfigProfilesPage = () => {
 
           <div className="form-section">
             <h4>Mounts</h4>
+            <p className="muted">Bind directories into the container at absolute paths. Files are relative to the mount target.</p>
             {(formData.mounts || []).map((mount, index) => (
               <div key={index} className="mount-entry card">
                 <div className="form-row">
@@ -442,8 +444,8 @@ export const ConfigProfilesPage = () => {
                 </div>
 
                 <div className="mount-files">
-                  {Object.entries(mount.files).map(([path, content]) => (
-                    <div key={path} className="file-entry">
+                  {Object.entries(mount.files).map(([path, content], idx) => (
+                    <div key={idx} className="file-entry">
                       <input
                         type="text"
                         value={path}