feat: Make Python Virtual Environment Persistent: Install Persistent Environment in Computing Unit

frontend/src/app/dashboard/component/user/user-venv/user-venv.component.ts

@@ -175,6 +175,11 @@ export class UserVenvComponent implements OnInit {
       return;
     }
 
+    if (!/^[a-zA-Z0-9]+$/.test(trimmedName)) {
+      this.notificationService.error("Environment name must contain only letters and numbers.");
+      return;
+    }
+
     const conflict = this.pves.find(p => p.name.trim() === trimmedName && p.veid !== draft.veid);
     if (conflict) {
       this.notificationService.error(`An environment named "${trimmedName}" already exists.`);

frontend/src/app/workspace/component/power-button/computing-unit-selection.component.html

@@ -452,12 +452,6 @@
         (click)="closePveModal()">
         Close
       </button>
-      <button
-        nz-button
-        nzType="primary"
-        (click)="addEnvironment()">
-        Add Environment
-      </button>
     </div>
   </ng-template>
 
@@ -511,6 +505,33 @@
       </nz-collapse>
     </div>
 
+    <!-- Saved environments (from the user's Python Venv DB list) -->
+    <div class="saved-pves-section">
+      <nz-collapse>
+        <nz-collapse-panel
+          nzHeader="Saved Environments"
+          [nzActive]="true">
+          <div
+            *ngIf="availableDbPves.length === 0"
+            class="saved-pve-empty">
+            No saved environments yet. Create one from the Environments tab.
+          </div>
+          <div
+            *ngFor="let saved of availableDbPves"
+            class="saved-pve-row">
+            <span class="saved-pve-name">{{ saved.name }}</span>
+            <button
+              nz-button
+              nzType="primary"
+              nzSize="small"
+              (click)="installFromSavedPve(saved.veid)">
+              {{ isSavedPveInstalledInCu(saved.name) ? "Reinstall" : "Install" }}
+            </button>
+          </div>
+        </nz-collapse-panel>
+      </nz-collapse>
+    </div>
+
     <!-- Environments -->
     <nz-collapse>
       <nz-collapse-panel
@@ -521,7 +542,14 @@
         <!-- Custom header -->
         <ng-template #headerTpl>
           <div class="env-header">
-            <span class="env-title"> {{ pve.name }} </span>
+            <span class="env-title">
+              {{ pve.name }}
+              <span
+                *ngIf="pve.isLocked"
+                class="env-unsynced-note">
+                Manual changes here won’t update the saved environment.
+              </span>
+            </span>
             <span
               class="env-actions"
               (click)="$event.stopPropagation()">

frontend/src/app/workspace/component/power-button/computing-unit-selection.component.scss

@@ -383,3 +383,11 @@
   color: red;
   font-weight: bold;
 }
+
+.env-unsynced-note {
+  margin-left: 0.5em;
+  font-size: 0.8em;
+  font-style: italic;
+  font-weight: normal;
+  color: rgba(0, 0, 0, 0.45);
+}