Noovolari · JeremySnidaro · May 22, 2026
diff --git a/packages/core/src/models/session.ts b/packages/core/src/models/session.ts
@@ -15,6 +15,7 @@
   startDateTime?: string;
   type: SessionType;
   sessionTokenExpiration: string;
+  color?: string;
 
   constructor(public sessionName: string, public region: string) {
     this.sessionId = uuid.v4();
@@ -26,7 +27,7 @@
    if (this.startDateTime === undefined) {
      return false;
    }
    const currentTime = new Date().getTime();
    const startTime = new Date(this.startDateTime).getTime();
    return (currentTime - startTime) / 1000 > constants.sessionDuration;
  }

diff --git a/packages/desktop-app/package.json b/packages/desktop-app/package.json
@@ -94,9 +94,9 @@
       "desktop": {
         "desktopActions": {
           "NewWindow": {
-             "Exec": "leapp %U"
+            "Exec": "leapp %U"
           }
-       }
+        }
       },
       "target": [
         "deb",
@@ -157,7 +157,6 @@
     "@ng-select/ng-select": "10.0.4",
     "@ngx-translate/core": "14.0.0",
     "@ngx-translate/http-loader": "~6.0.0",
-    "@noovolari/dpapi-addon": "0.1.2",
     "@noovolari/leapp-core": "file:../core",
     "@smithy/fetch-http-handler": "2.4.2",
     "assert": "2.0.0",
@@ -273,5 +272,8 @@
     "ts-node": "^9.1.1",
     "typescript": "^4.9.0",
     "util": "^0.12.4"
+  },
+  "optionalDependencies": {
+    "@noovolari/dpapi-addon": "0.1.2"
   }
 }
diff --git a/packages/desktop-app/src/app/components/components.module.ts b/packages/desktop-app/src/app/components/components.module.ts
@@ -43,6 +43,7 @@ import { MatTooltipModule } from "@angular/material/tooltip";
 import { CredentialProcessDialogComponent } from "./dialogs/credential-process-dialog/credential-process-dialog.component";
 import { ChangeRegionDialogComponent } from "./dialogs/change-region-dialog/change-region-dialog.component";
 import { ChangeNamedProfileDialogComponent } from "./dialogs/change-named-profile-dialog/change-named-profile-dialog.component";
+import { ChangeColorDialogComponent } from "./dialogs/change-color-dialog/change-color-dialog.component";
 import { SsmModalDialogComponent } from "./dialogs/ssm-modal-dialog/ssm-modal-dialog.component";
 import { ContextualMenuComponent } from "./contextual-menu/contextual-menu.component";
 import { BottomBarComponent } from "./bottom-bar/bottom-bar.component";
@@ -92,6 +93,7 @@ import { NoovolariDialogComponent } from "./dialogs/noovolari-dialog/noovolari-d
     CredentialProcessDialogComponent,
     ChangeRegionDialogComponent,
     ChangeNamedProfileDialogComponent,
+    ChangeColorDialogComponent,
     SsmModalDialogComponent,
     ContextualMenuComponent,
     BottomBarComponent,

diff --git a/packages/desktop-app/src/app/components/contextual-menu/contextual-menu.component.html b/packages/desktop-app/src/app/components/contextual-menu/contextual-menu.component.html
@@ -111,6 +111,10 @@
       <i class="moon-User"></i>&nbsp;
       <span>Named Profile</span>
     </button>
+    <button mat-menu-item (click)="changeColorModalOpen();">
+      <i class="moon-Star"></i>&nbsp;
+      <span>Color</span>
+    </button>
   </mat-menu>
 
   <mat-menu #copy>

diff --git a/packages/desktop-app/src/app/components/contextual-menu/contextual-menu.component.ts b/packages/desktop-app/src/app/components/contextual-menu/contextual-menu.component.ts
@@ -158,6 +158,10 @@ export class ContextualMenuComponent implements OnInit, OnDestroy {
     await this.selectedSessionActionsService.changeProfileModalOpen(this.selectedSession);
   }
 
+  async changeColorModalOpen(): Promise<void> {
+    await this.selectedSessionActionsService.changeColorModalOpen(this.selectedSession);
+  }
+
   async copyCredentials(type: number): Promise<void> {
     await this.selectedSessionActionsService.copyCredentials(this.selectedSession, type);
   }

diff --git a/...top-app/src/app/components/dialogs/change-color-dialog/change-color-dialog.component.html b/...top-app/src/app/components/dialogs/change-color-dialog/change-color-dialog.component.html
@@ -0,0 +1,23 @@
+<a class="close-modal" (click)="closeModal();"><i class="moon-Close"></i></a>
+<h4>{{session.sessionName}}</h4>
+<h5>{{session | detail }}</h5>
+
+<div class="color-form">
+  <p>Select a color</p>
+  <div class="color-swatches">
+    <button
+      *ngFor="let color of colors"
+      type="button"
+      class="color-swatch-wrapper"
+      [class.selected]="selectedColor === color.name"
+      (click)="selectColor(color.name)">
+      <div class="color-swatch" [style.background-color]="color.hex"></div>
+      <span class="color-label">{{color.name}}</span>
+    </button>
+  </div>
+  <br>
+  <button type="button" (click)="saveColor();" [disabled]="!selectedColor"
+          [ngClass]="(!selectedColor) ? 'btn-control mat-button-disabled': 'btn-control'">Save Color
+  </button>
+  <a (click)="closeModal();">Cancel</a>
+</div>
diff --git a/...top-app/src/app/components/dialogs/change-color-dialog/change-color-dialog.component.scss b/...top-app/src/app/components/dialogs/change-color-dialog/change-color-dialog.component.scss
@@ -0,0 +1,63 @@
+.color-form {
+  margin-top: 20px;
+
+  p {
+    display: block;
+    margin-bottom: 12px;
+  }
+
+  a {
+    display: inline-block;
+    margin-left: 10px;
+  }
+}
+
+.color-swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.color-swatch-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  gap: 4px;
+  background: none !important;
+  border: none;
+  padding: 0;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+
+  &:focus-visible .color-swatch {
+    box-shadow: 0 0 0 3px white, 0 0 0 5px rgba(0, 0, 0, 0.4);
+  }
+
+  &:hover .color-swatch {
+    transform: scale(1.15);
+  }
+
+  &.selected .color-swatch {
+    transform: scale(1.15);
+    box-shadow: 0 0 0 3px white, 0 0 0 5px rgba(0, 0, 0, 0.4);
+  }
+
+  &.selected .color-label {
+    font-weight: bold;
+  }
+}
+
+.color-swatch {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+}
+
+.color-label {
+  font-size: 9px;
+  text-transform: capitalize;
+  opacity: 0.75;
+}
diff --git a/...sktop-app/src/app/components/dialogs/change-color-dialog/change-color-dialog.component.ts b/...sktop-app/src/app/components/dialogs/change-color-dialog/change-color-dialog.component.ts
@@ -0,0 +1,59 @@
+import { Component, Input, OnInit, ViewEncapsulation } from "@angular/core";
+import { Session } from "@noovolari/leapp-core/models/session";
+import { AppService } from "../../../services/app.service";
+import { AppProviderService } from "../../../services/app-provider.service";
+import { MessageToasterService, ToastLevel } from "../../../services/message-toaster.service";
+
+export const containerColors: { name: string; hex: string }[] = [
+  { name: "toolbar", hex: "#7c7c7d" },
+  { name: "red", hex: "#ff0039" },
+  { name: "pink", hex: "#ff84a3" },
+  { name: "orange", hex: "#ff9f00" },
+  { name: "yellow", hex: "#ffcb00" },
+  { name: "green", hex: "#51cd00" },
+  { name: "turquoise", hex: "#00c79a" },
+  { name: "blue", hex: "#37adff" },
+  { name: "purple", hex: "#af51f5" },
+];
+
+@Component({
+  selector: "app-change-color-dialog",
+  templateUrl: "./change-color-dialog.component.html",
+  styleUrls: ["./change-color-dialog.component.scss"],
+  encapsulation: ViewEncapsulation.None,
+})
+export class ChangeColorDialogComponent implements OnInit {
+  @Input()
+  public session: Session;
+
+  public colors = containerColors;
+  public selectedColor: string;
+
+  constructor(
+    private readonly appService: AppService,
+    private readonly appProviderService: AppProviderService,
+    private readonly messageToasterService: MessageToasterService
+  ) {}
+
+  ngOnInit(): void {
+    this.selectedColor = this.session.color ?? null;
+  }
+
+  closeModal(): void {
+    this.appService.closeModal();
+  }
+
+  selectColor(colorName: string): void {
+    this.selectedColor = colorName;
+  }
+
+  saveColor(): void {
+    if (this.selectedColor) {
+      this.session.color = this.selectedColor;
+      this.appProviderService.repository.updateSession(this.session.sessionId, this.session);
+      this.appProviderService.behaviouralSubjectService.setSessions(this.appProviderService.repository.getSessions());
+      this.messageToasterService.toast("Color has been changed!", ToastLevel.success, "Color changed!");
+      this.closeModal();
+    }
+  }
+}
diff --git a/packages/desktop-app/src/app/components/sessions/session-card/session-card.component.html b/packages/desktop-app/src/app/components/sessions/session-card/session-card.component.html
@@ -9,6 +9,7 @@
       class="moon-Hover-{{session.status !== eSessionStatus.active && session.status !== eSessionStatus.pending ? 'Start' : 'Stop'}} moon-hover-session hover-item"
       (click)="session.status === eSessionStatus.active || session.status === eSessionStatus.pending ? stopSession() : startSession()"></i>
     <span class="{{session.status === eSessionStatus.active ? 'strong' : ''}}">{{$any(session)?.awsAccount ? $any(session)?.awsAccount?.accountName : session.sessionName}}</span>
+    <span *ngIf="getSessionColorHex()" class="session-color-dot" [style.background-color]="getSessionColorHex()"></span>
     <i class="moon-Pin" *ngIf="optionService.pinned.indexOf(session.sessionId) !== -1"></i>
   </div>
 </td>

diff --git a/packages/desktop-app/src/app/components/sessions/session-card/session-card.component.scss b/packages/desktop-app/src/app/components/sessions/session-card/session-card.component.scss
@@ -266,6 +266,15 @@ td:nth-child(4) {
   left: -65px !important;
 }
 
+.session-color-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-left: 6px;
+  flex-shrink: 0;
+}
+
 .session-name-td {
   height: inherit;
   overflow: hidden;

diff --git a/packages/desktop-app/src/app/components/sessions/session-card/session-card.component.ts b/packages/desktop-app/src/app/components/sessions/session-card/session-card.component.ts
@@ -20,6 +20,18 @@
   styleUrls: ["./session-card.component.scss"],
 })
 export class SessionCardComponent implements OnInit {
+  private static readonly colorMap: Record<string, string> = {
+    toolbar: "#7c7c7d",
+    red: "#ff0039",
+    pink: "#ff84a3",
+    orange: "#ff9f00",
+    yellow: "#ffcb00",
+    green: "#51cd00",
+    turquoise: "#00c79a",
+    blue: "#37adff",
+    purple: "#af51f5",
+  };
+
   @Input()
   session!: Session;
 
@@ -58,6 +70,10 @@
     this.sessionService = this.selectedSessionActionService.getSelectedSessionService(this.session);
   }
 
+  getSessionColorHex(): string | null {
+    return SessionCardComponent.colorMap[this.session?.color] ?? null;
+  }
+
   /**
    * Used to call for start or stop depending on sessions status
    */
@@ -133,7 +149,7 @@
  }

  get profileName(): string {
    const profileId = this.session.type !== SessionType.azure ? (this.session as any).profileId : undefined;
    let profileName = constants.defaultAwsProfileName;
    try {
      profileName = this.appProviderService.namedProfileService.getProfileName(profileId);

diff --git a/packages/desktop-app/src/app/services/app-native.service.ts b/packages/desktop-app/src/app/services/app-native.service.ts
@@ -77,7 +77,8 @@
       this.notification = window.require("@electron/remote").Notification;
       this.nodeIpc = window.require("node-ipc");
       this.process = (window as any).process;
-      this.msalEncryptionService = new MsalEncryptionService(window.require("@noovolari/dpapi-addon"));
+      const dpapiAddon = process.platform === "win32" ? window.require("@noovolari/dpapi-addon") : null;
+      this.msalEncryptionService = new MsalEncryptionService(dpapiAddon);
       this.requireModule = window.require("require-module");
       this.hashElement = window.require("folder-hash");
       this.crypto = window.require("crypto");
@@ -89,6 +90,6 @@
  }

  get isElectron(): boolean {
    return !!(window && window.process && (window.process as any).type);
  }
 }
diff --git a/packages/desktop-app/src/app/services/extension-websocket.service.ts b/packages/desktop-app/src/app/services/extension-websocket.service.ts
@@ -100,7 +100,8 @@
           sessionRole: (session as any).roleArn.split("/")[1],
           sessionRegion: session.region,
           sessionType: session.type.toString().startsWith("aws") ? "aws" : session.type.toString(),
+          sessionColor: session.color,
           createdAt: new Date().getTime(),
         },
         leappSessionId: session.sessionId,
      })

diff --git a/packages/desktop-app/src/app/services/selected-session-actions.service.ts b/packages/desktop-app/src/app/services/selected-session-actions.service.ts
@@ -8,6 +8,7 @@
 import { ChangeRegionDialogComponent } from "../components/dialogs/change-region-dialog/change-region-dialog.component";
 import { BsModalService } from "ngx-bootstrap/modal";
 import { ChangeNamedProfileDialogComponent } from "../components/dialogs/change-named-profile-dialog/change-named-profile-dialog.component";
+import { ChangeColorDialogComponent } from "../components/dialogs/change-color-dialog/change-color-dialog.component";
 import { SsmModalDialogComponent } from "../components/dialogs/ssm-modal-dialog/ssm-modal-dialog.component";
 import { EditDialogComponent } from "../components/dialogs/edit-dialog/edit-dialog.component";
 import { constants } from "@noovolari/leapp-core/models/constants";
@@ -104,6 +105,15 @@
     });
   }
 
+  async changeColorModalOpen(session: Session): Promise<void> {
+    this.behaviouralSubjectService.unselectSessions();
+    this.modalService.show(ChangeColorDialogComponent, {
+      animated: false,
+      class: "ssm-modal",
+      initialState: { session },
+    });
+  }
+
   async ssmModalOpen(session: Session): Promise<void> {
     this.behaviouralSubjectService.unselectSessions();
     this.modalService.show(SsmModalDialogComponent, {
@@ -162,7 +172,7 @@
  }

  isPinned(selectedSession: Session): boolean {
    return this.optionService.pinned.indexOf(selectedSession.sessionId) !== -1;
  }

  copyProfile(profileName: string): void {
@@ -266,7 +276,7 @@
    dependentSessions.forEach((sess) => {
      dependendSessionsHtml += `<li><div class="removed-sessions"><b>${sess.sessionName}</b></div></li>`;
    });
    if (dependendSessionsHtml !== "") {
      return (
        "This session has dependent sessions: <br><ul>" +
        dependendSessionsHtml +