From 107fe1d3939a193474d0f8d23b8ca17703ee31a1 Mon Sep 17 00:00:00 2001
From: MoritzWeber <kontakt@moritz-weber.net>
Date: Mon, 11 Nov 2024 11:17:41 +0100
Subject: [PATCH] feat: Handle unready sessions in session viewer

This enabled direct connection to the session viewer.
Instead of a separate components to select sessions,
it's no embedded into the "Active Sessions" view.

This makes the session viewer more visible and requires
less user interaction.

Read-only sessions are now directly connected after creation.

The Session Viewer shows the current status of the session
and takes over the session refresh on it's own. Once the
session is ready, it connects to it.
---
 frontend/src/app/app-routing.module.ts        |   6 +-
 .../auth/auth-guard/auth-guard.service.ts     |   2 +-
 .../src/app/general/header/header.stories.ts  |   4 -
 .../app/general/nav-bar/nav-bar.service.ts    |   5 -
 .../floating-window-manager.component.html    |  87 +++++-----
 .../floating-window-manager.component.ts      |   4 +-
 .../session-iframe.component.css              |  12 ++
 .../session-iframe.component.html             |  55 ++++++-
 .../session-iframe.component.ts               |   8 +-
 .../session/session-viewer.component.html     |  43 +++++
 .../session/session-viewer.component.ts       |  72 +++++++++
 .../session/session-viewer.service.ts         |  75 +++++++--
 .../session/session-viewer.stories.ts         | 149 ++++++++++++++++++
 .../sessions/session/session.component.css    |   8 -
 .../sessions/session/session.component.html   | 118 --------------
 .../app/sessions/session/session.component.ts | 118 --------------
 .../tiling-window-manager.component.html      |  65 ++++----
 .../tiling-window-manager.component.ts        |   4 +-
 .../active-sessions.component.css             |   8 +-
 .../active-sessions.component.docs.mdx        |  50 ------
 .../active-sessions.component.html            |  82 ++++++----
 .../active-sessions.component.ts              |  42 ++++-
 .../create-readonly-session.component.html    |   2 +-
 ...eate-readonly-model-options.component.html |   2 +-
 ...eate-readonly-session-dialog.component.css |   8 -
 ...readonly-session-dialog.component.docs.mdx |  36 -----
 ...ate-readonly-session-dialog.component.html |  11 +-
 ...reate-readonly-session-dialog.component.ts |   7 +-
 frontend/src/styles.css                       |   4 +-
 29 files changed, 586 insertions(+), 501 deletions(-)
 create mode 100644 frontend/src/app/sessions/session/session-viewer.component.html
 create mode 100644 frontend/src/app/sessions/session/session-viewer.component.ts
 create mode 100644 frontend/src/app/sessions/session/session-viewer.stories.ts
 delete mode 100644 frontend/src/app/sessions/session/session.component.css
 delete mode 100644 frontend/src/app/sessions/session/session.component.html
 delete mode 100644 frontend/src/app/sessions/session/session.component.ts
 delete mode 100644 frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.docs.mdx
 delete mode 100644 frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.component.css
 delete mode 100644 frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.component.docs.mdx

diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 4cbddf5a64..a0af36677b 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -12,7 +12,7 @@ import { ViewLogsDialogComponent } from 'src/app/projects/models/backup-settings
 import { PipelineWrapperComponent } from 'src/app/projects/models/backup-settings/wrapper/pipeline-wrapper/pipeline-wrapper.component';
 import { ModelRestrictionsComponent } from 'src/app/projects/models/model-restrictions/model-restrictions.component';
 import { EditProjectMetadataComponent } from 'src/app/projects/project-detail/edit-project-metadata/edit-project-metadata.component';
-import { SessionComponent } from 'src/app/sessions/session/session.component';
+import { SessionViewerComponent } from 'src/app/sessions/session/session-viewer.component';
 import { ConfigurationSettingsComponent } from 'src/app/settings/core/configuration-settings/configuration-settings.component';
 import { PipelinesOverviewComponent } from 'src/app/settings/core/pipelines-overview/pipelines-overview.component';
 import { CreateToolComponent } from 'src/app/settings/core/tools-settings/create-tool/create-tool.component';
@@ -61,8 +61,8 @@ export const routes: Routes = [
         data: { breadcrumb: 'Sessions' },
       },
       {
-        path: 'session',
-        component: SessionComponent,
+        path: 'session-viewer',
+        component: SessionViewerComponent,
         data: { breadcrumb: 'Session Viewer' },
       },
       {
diff --git a/frontend/src/app/general/auth/auth-guard/auth-guard.service.ts b/frontend/src/app/general/auth/auth-guard/auth-guard.service.ts
index cdbc883953..2a3c2c64ea 100644
--- a/frontend/src/app/general/auth/auth-guard/auth-guard.service.ts
+++ b/frontend/src/app/general/auth/auth-guard/auth-guard.service.ts
@@ -20,7 +20,7 @@ export const authGuard: CanActivateFn = (
     return true;
   } else {
     // Needs window.location, since Router.url isn't updated yet
-    authService.redirectURL = window.location.pathname;
+    authService.redirectURL = window.location.pathname + window.location.search;
     authService.login();
     return false;
   }
diff --git a/frontend/src/app/general/header/header.stories.ts b/frontend/src/app/general/header/header.stories.ts
index bde5913622..3f472f2313 100644
--- a/frontend/src/app/general/header/header.stories.ts
+++ b/frontend/src/app/general/header/header.stories.ts
@@ -27,10 +27,6 @@ class MockNavbarService implements Partial<NavBarService> {
       name: 'Sessions',
       requiredRole: 'user',
     },
-    {
-      name: 'Session viewer',
-      requiredRole: 'user',
-    },
     {
       name: 'Session overview',
       requiredRole: 'administrator',
diff --git a/frontend/src/app/general/nav-bar/nav-bar.service.ts b/frontend/src/app/general/nav-bar/nav-bar.service.ts
index 2cf9156c46..a78e16a0c8 100644
--- a/frontend/src/app/general/nav-bar/nav-bar.service.ts
+++ b/frontend/src/app/general/nav-bar/nav-bar.service.ts
@@ -61,11 +61,6 @@ export class NavBarService {
       routerLink: '',
       requiredRole: 'user',
     },
-    {
-      name: 'Session viewer',
-      routerLink: ['/session'],
-      requiredRole: 'user',
-    },
     {
       name: 'Session overview',
       routerLink: ['/sessions', 'overview'],
diff --git a/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.html b/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.html
index a3cab34782..c8947ed764 100644
--- a/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.html
+++ b/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.html
@@ -3,53 +3,58 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<ng-container *ngIf="sessionViewerService.sessions$ | async as viewerSessions">
+@if (sessionViewerService.sessions$ | async; as viewerSessions) {
   <div class="flex h-full gap-0.5">
-    <div
-      class="flex w-full flex-col active:z-30"
-      [ngClass]="{
-        'z-20': session.focused,
-        'z-10': !session.focused,
-      }"
-      (click)="sessionViewerService.focusSession(session)"
-      *ngFor="let session of viewerSessions; trackBy: trackBySessionId"
-      cdkDrag
-      (cdkDragStarted)="dragStart()"
-      (cdkDragEnded)="dragStop()"
-    >
+    @for (session of viewerSessions; track trackBySessionId) {
       <div
-        class="flex cursor-grab items-center justify-between gap-2 rounded-t p-1 active:cursor-grabbing"
-        [ngClass]="session.focused ? 'bg-slate-100' : 'bg-slate-300'"
-        cdkDragHandle
+        class="flex w-full flex-col active:z-30"
+        [ngClass]="{
+          'z-20': session.focused,
+          'z-10': !session.focused,
+        }"
+        (click)="sessionViewerService.focusSession(session)"
+        cdkDrag
+        (cdkDragStarted)="dragStart()"
+        (cdkDragEnded)="dragStop()"
       >
-        <div class="flex items-center gap-2">
-          <mat-icon>control_camera</mat-icon>
-          <span>
-            {{ session.version.tool.name }} {{ session.version.name }},
-            {{ session.type }}
-          </span>
-        </div>
-
-        <div>
-          <div *ngIf="session.focused" class="flex items-center gap-2">
-            <span>Focused</span><mat-icon>phonelink</mat-icon>
+        <div
+          class="flex cursor-grab items-center justify-between gap-2 rounded-t p-1 active:cursor-grabbing"
+          [ngClass]="session.focused ? 'bg-slate-100' : 'bg-slate-300'"
+          cdkDragHandle
+        >
+          <div class="flex items-center gap-2">
+            <mat-icon>control_camera</mat-icon>
+            <span>
+              {{ session.version.tool.name }} {{ session.version.name }},
+              {{ session.type }}
+            </span>
           </div>
-          <div *ngIf="!session.focused" class="flex items-center gap-2">
-            <span>Not focused</span>
-            <mat-icon>phonelink_off</mat-icon>
+
+          <div class="flex items-center gap-2">
+            @if (session.focused) {
+              <span>Focused</span><mat-icon>phonelink</mat-icon>
+            } @else {
+              <span>Not focused</span>
+              <mat-icon>phonelink_off</mat-icon>
+            }
           </div>
+
+          @if ((sessionViewerService.allSessions$ | async)!.length > 1) {
+            <button
+              class="m-0 flex items-center"
+              (click)="sessionViewerService.toggleFullscreen(session)"
+            >
+              @if (session.fullscreen) {
+                <mat-icon>fullscreen_exit</mat-icon>
+              } @else {
+                <mat-icon>fullscreen</mat-icon>
+              }
+            </button>
+          }
         </div>
 
-        <button
-          class="m-0 flex items-center"
-          (click)="sessionViewerService.toggleFullscreen(session)"
-        >
-          <mat-icon *ngIf="!session.fullscreen">fullscreen</mat-icon>
-          <mat-icon *ngIf="session.fullscreen">fullscreen_exit</mat-icon>
-        </button>
+        <app-session-iframe class="flex h-full" [session]="session" />
       </div>
-
-      <app-session-iframe class="flex h-full" [session]="session" />
-    </div>
+    }
   </div>
-</ng-container>
+}
diff --git a/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.ts b/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.ts
index 2b0ca91759..75712b31ac 100644
--- a/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.ts
+++ b/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
-import { NgIf, NgFor, NgClass, AsyncPipe } from '@angular/common';
+import { NgClass, AsyncPipe } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { MatIcon } from '@angular/material/icon';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
@@ -16,8 +16,6 @@ import { SessionViewerService, ViewerSession } from '../session-viewer.service';
   templateUrl: './floating-window-manager.component.html',
   standalone: true,
   imports: [
-    NgIf,
-    NgFor,
     CdkDrag,
     NgClass,
     CdkDragHandle,
diff --git a/frontend/src/app/sessions/session/session-iframe/session-iframe.component.css b/frontend/src/app/sessions/session/session-iframe/session-iframe.component.css
index 7f12bf8468..8cdc5f53e2 100644
--- a/frontend/src/app/sessions/session/session-iframe/session-iframe.component.css
+++ b/frontend/src/app/sessions/session/session-iframe/session-iframe.component.css
@@ -12,3 +12,15 @@
 
   z-index: 40;
 }
+
+.error {
+  @apply bg-error;
+}
+
+.warning {
+  @apply bg-warning;
+}
+
+.primary {
+  @apply bg-primary;
+}
diff --git a/frontend/src/app/sessions/session/session-iframe/session-iframe.component.html b/frontend/src/app/sessions/session/session-iframe/session-iframe.component.html
index e69cf363d0..3e395daf7e 100644
--- a/frontend/src/app/sessions/session/session-iframe/session-iframe.component.html
+++ b/frontend/src/app/sessions/session/session-iframe/session-iframe.component.html
@@ -4,10 +4,57 @@
  -->
 
 <div class="relative grow">
-  <div
-    *ngIf="!session.focused"
-    class="iframe-overlay bg-black opacity-10"
-  ></div>
+  @if (!session.focused) {
+    <div class="iframe-overlay bg-black opacity-10"></div>
+  }
+
+  @if (
+    !sessionService.beautifyState(session.preparation_state, session.state)
+      .success
+  ) {
+    <div
+      class="iframe-overlay flex items-center justify-center bg-black text-white"
+    >
+      <div
+        class="m-2 rounded border p-5 text-center"
+        [ngClass]="
+          sessionService.beautifyState(session.preparation_state, session.state)
+            .css
+        "
+      >
+        The session will be loaded as soon as it is ready.
+        <div
+          class="mt-2 flex w-full items-center justify-center gap-5 text-center"
+        >
+          <div class="basis-1/3">
+            <div class="text-sm">Preparation</div>
+            <div class="text-xl font-bold">
+              {{ session.preparation_state }}
+            </div>
+          </div>
+          <mat-icon>{{
+            sessionService.beautifyState(
+              session.preparation_state,
+              session.state
+            ).icon
+          }}</mat-icon>
+          <div class="basis-1/3">
+            <div class="text-sm">Session</div>
+            <div class="text-xl font-bold">{{ session.state }}</div>
+          </div>
+        </div>
+        @if (
+          sessionService.beautifyState(session.preparation_state, session.state)
+            .info;
+          as info
+        ) {
+          <div class="mt-2 max-w-card text-sm">
+            {{ info }}
+          </div>
+        }
+      </div>
+    </div>
+  }
   <iframe
     [title]="
       session.version.tool.name +
diff --git a/frontend/src/app/sessions/session/session-iframe/session-iframe.component.ts b/frontend/src/app/sessions/session/session-iframe/session-iframe.component.ts
index c303c89450..a36f248e5a 100644
--- a/frontend/src/app/sessions/session/session-iframe/session-iframe.component.ts
+++ b/frontend/src/app/sessions/session/session-iframe/session-iframe.component.ts
@@ -2,8 +2,10 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { NgIf, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { Component, Input } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { SessionService } from 'src/app/sessions/service/session.service';
 import { ViewerSession } from '../session-viewer.service';
 
 @Component({
@@ -11,8 +13,10 @@ import { ViewerSession } from '../session-viewer.service';
   templateUrl: './session-iframe.component.html',
   styleUrls: ['./session-iframe.component.css'],
   standalone: true,
-  imports: [NgIf, NgClass],
+  imports: [NgClass, MatIconModule],
 })
 export class SessionIFrameComponent {
   @Input({ required: true }) session!: ViewerSession;
+
+  constructor(public sessionService: SessionService) {}
 }
diff --git a/frontend/src/app/sessions/session/session-viewer.component.html b/frontend/src/app/sessions/session/session-viewer.component.html
new file mode 100644
index 0000000000..1ce7de6ecd
--- /dev/null
+++ b/frontend/src/app/sessions/session/session-viewer.component.html
@@ -0,0 +1,43 @@
+<!--
+ ~ SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ ~ SPDX-License-Identifier: Apache-2.0
+ -->
+
+@if ((sessionViewerService.sessions$ | async) === undefined) {
+  <div class="flex h-screen">
+    <mat-spinner class="m-auto"></mat-spinner>
+  </div>
+}
+
+@if (sessionViewerService.sessions$ | async; as viewerSessions) {
+  @if (viewerSessions.length) {
+    <div
+      class="select-none"
+      [ngClass]="{
+        'h-[calc(100vh-2vh-65px-110px)]':
+          (fullscreenService.isFullscreen$ | async) === false,
+        'h-screen': fullscreenService.isFullscreen$ | async,
+      }"
+    >
+      @if (this.selectedWindowType === "floating") {
+        <app-floating-window-manager />
+      } @else {
+        <app-tiling-window-manager />
+      }
+    </div>
+  }
+}
+
+<div class="fixed bottom-4 right-4 z-50">
+  <button
+    mat-fab
+    color="primary"
+    (click)="fullscreenService.toggleFullscreen()"
+  >
+    @if (fullscreenService.isFullscreen$ | async) {
+      <mat-icon>fullscreen_exit</mat-icon>
+    } @else {
+      <mat-icon>fullscreen</mat-icon>
+    }
+  </button>
+</div>
diff --git a/frontend/src/app/sessions/session/session-viewer.component.ts b/frontend/src/app/sessions/session/session-viewer.component.ts
new file mode 100644
index 0000000000..e13645660c
--- /dev/null
+++ b/frontend/src/app/sessions/session/session-viewer.component.ts
@@ -0,0 +1,72 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { NgClass, AsyncPipe } from '@angular/common';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule, MatFabButton } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { ActivatedRoute } from '@angular/router';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { FullscreenService } from 'src/app/sessions/service/fullscreen.service';
+import { SessionService } from 'src/app/sessions/service/session.service';
+import { UserSessionService } from 'src/app/sessions/service/user-session.service';
+import { FloatingWindowManagerComponent } from './floating-window-manager/floating-window-manager.component';
+import { SessionViewerService } from './session-viewer.service';
+import { TilingWindowManagerComponent } from './tiling-window-manager/tiling-window-manager.component';
+
+@Component({
+  selector: 'app-session-viewer',
+  templateUrl: './session-viewer.component.html',
+  standalone: true,
+  imports: [
+    NgxSkeletonLoaderModule,
+    FormsModule,
+    MatButtonModule,
+    MatIconModule,
+    NgClass,
+    FloatingWindowManagerComponent,
+    TilingWindowManagerComponent,
+    MatFabButton,
+    AsyncPipe,
+    MatProgressSpinnerModule,
+  ],
+})
+@UntilDestroy()
+export class SessionViewerComponent implements OnInit, OnDestroy {
+  selectedWindowType?: string = undefined;
+
+  constructor(
+    public userSessionService: UserSessionService,
+    public sessionService: SessionService,
+    public sessionViewerService: SessionViewerService,
+    public fullscreenService: FullscreenService,
+    private route: ActivatedRoute,
+  ) {
+    this.fullscreenService.toggleFullscreen();
+    this.fullscreenService.isFullscreen$
+      .pipe(untilDestroyed(this))
+      .subscribe(() => this.sessionViewerService.resizeSessions());
+  }
+
+  ngOnInit(): void {
+    this.route.queryParams.subscribe((params) => {
+      this.selectedWindowType = params['window-manager'] || 'tiling';
+      const sessionIDs = params['session-id'];
+      if (typeof sessionIDs === 'string') {
+        this.sessionViewerService.pushSession(sessionIDs);
+      } else {
+        for (const sessionID of sessionIDs) {
+          this.sessionViewerService.pushSession(sessionID);
+        }
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.sessionViewerService.clearSessions();
+  }
+}
diff --git a/frontend/src/app/sessions/session/session-viewer.service.ts b/frontend/src/app/sessions/session/session-viewer.service.ts
index 0c1ec1346d..71edf06e3c 100644
--- a/frontend/src/app/sessions/session/session-viewer.service.ts
+++ b/frontend/src/app/sessions/session/session-viewer.service.ts
@@ -4,9 +4,20 @@
  */
 import { Injectable } from '@angular/core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
-import { BehaviorSubject, map } from 'rxjs';
+import {
+  BehaviorSubject,
+  map,
+  Subscription,
+  switchMap,
+  takeWhile,
+  timer,
+} from 'rxjs';
 import { ToastService } from 'src/app/helpers/toast/toast.service';
-import { Session, SessionConnectionInformation } from 'src/app/openapi';
+import {
+  Session,
+  SessionConnectionInformation,
+  SessionsService,
+} from 'src/app/openapi';
 import { SessionService } from 'src/app/sessions/service/session.service';
 
 @Injectable({
@@ -17,6 +28,7 @@ export class SessionViewerService {
     private sessionService: SessionService,
     private domSanitizer: DomSanitizer,
     private toastService: ToastService,
+    private sessionsService: SessionsService,
   ) {}
 
   private _sessions = new BehaviorSubject<ViewerSession[] | undefined>(
@@ -30,7 +42,35 @@ export class SessionViewerService {
     }),
   );
 
-  pushSession(
+  public readonly allSessions$ = this._sessions.asObservable();
+
+  private _subscriptions: Subscription[] = [];
+
+  pushSession(sessionID: string): void {
+    this._subscriptions.push(
+      timer(0, 3000)
+        .pipe(
+          switchMap(() => this.sessionsService.getSession(sessionID)),
+          takeWhile(
+            (session) =>
+              !this.sessionService.beautifyState(
+                session.preparation_state,
+                session.state,
+              ).success,
+            true,
+          ),
+        )
+        .subscribe((session) => {
+          this.sessionsService
+            .getSessionConnectionInformation(session.id)
+            .subscribe((connectionInfo) => {
+              this._connectToSession(session, connectionInfo.payload);
+            });
+        }),
+    );
+  }
+
+  private _connectToSession(
     session: Session,
     connectionInfo: SessionConnectionInformation,
   ): void {
@@ -38,16 +78,8 @@ export class SessionViewerService {
 
     if (!connectionInfo.redirect_url) {
       this.toastService.showError(
-        'Session connection information is not available yet.',
-        'Try again later.',
-      );
-      return;
-    }
-
-    if (!connectionInfo.redirect_url) {
-      this.toastService.showError(
-        'Session connection information is not available yet.',
-        'Try again later.',
+        'Session connection information is not available.',
+        'Contact support for more details.',
       );
       return;
     }
@@ -104,7 +136,7 @@ export class SessionViewerService {
       );
 
       if (session?.reloadToResize) {
-        this.reloadIFrame(iframe);
+        this._reloadIFrame(iframe);
       }
     });
   }
@@ -115,7 +147,7 @@ export class SessionViewerService {
     );
 
     if (sessionIFrame && session.reloadToResize) {
-      this.reloadIFrame(sessionIFrame);
+      this._reloadIFrame(sessionIFrame);
     }
   }
 
@@ -132,9 +164,10 @@ export class SessionViewerService {
 
   clearSessions(): void {
     this._sessions.next(undefined);
+    this._subscriptions.forEach((s) => s.unsubscribe());
   }
 
-  private reloadIFrame(iframe: HTMLIFrameElement) {
+  private _reloadIFrame(iframe: HTMLIFrameElement) {
     const src = iframe.src;
 
     iframe.removeAttribute('src');
@@ -150,7 +183,15 @@ export class SessionViewerService {
     if (currentSessions === undefined) {
       this._sessions.next([viewerSession]);
     } else {
-      this._sessions.next([...currentSessions, viewerSession]);
+      const index = currentSessions.findIndex(
+        (session) => session.id === viewerSession.id,
+      );
+      if (index === -1) {
+        this._sessions.next([...currentSessions, viewerSession]);
+      } else {
+        currentSessions[index] = viewerSession;
+        this._sessions.next(currentSessions);
+      }
     }
   }
 }
diff --git a/frontend/src/app/sessions/session/session-viewer.stories.ts b/frontend/src/app/sessions/session/session-viewer.stories.ts
new file mode 100644
index 0000000000..c7606e7500
--- /dev/null
+++ b/frontend/src/app/sessions/session/session-viewer.stories.ts
@@ -0,0 +1,149 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { SafeResourceUrl } from '@angular/platform-browser';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { BehaviorSubject } from 'rxjs';
+import {
+  SessionViewerService,
+  ViewerSession,
+} from 'src/app/sessions/session/session-viewer.service';
+import {
+  mockPersistentSession,
+  mockReadonlySession,
+} from 'src/storybook/session';
+import { SessionViewerComponent } from './session-viewer.component';
+
+const meta: Meta<SessionViewerComponent> = {
+  title: 'Session Components/Session Viewer',
+  component: SessionViewerComponent,
+};
+
+export default meta;
+type Story = StoryObj<SessionViewerComponent>;
+
+class MockSessionViewerService implements Partial<SessionViewerService> {
+  private _sessions = new BehaviorSubject<ViewerSession[] | undefined>(
+    undefined,
+  );
+  public readonly sessions$ = this._sessions.asObservable();
+  public readonly allSessions$ = this._sessions.asObservable();
+
+  constructor(sessions: ViewerSession[] | undefined) {
+    this._sessions.next(sessions);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  clearSessions(): void {}
+}
+
+const mockPersistentViewerSession: ViewerSession = {
+  ...mockPersistentSession,
+  safeResourceURL: 'about:blank' as SafeResourceUrl,
+  focused: true,
+  reloadToResize: false,
+  fullscreen: false,
+  disabled: false,
+};
+
+const mockReadOnlyViewerSession: ViewerSession = {
+  ...mockReadonlySession,
+  safeResourceURL: 'about:blank' as SafeResourceUrl,
+  focused: false,
+  reloadToResize: false,
+  fullscreen: false,
+  disabled: false,
+};
+
+const mockSessionServiceProvider = (sessions: ViewerSession[] | undefined) => {
+  return {
+    provide: SessionViewerService,
+    useValue: new MockSessionViewerService(sessions),
+  };
+};
+
+export const Loading: Story = {};
+
+export const OneSuccessfulSession: Story = {
+  decorators: [
+    moduleMetadata({
+      providers: [mockSessionServiceProvider([mockPersistentViewerSession])],
+    }),
+  ],
+};
+
+export const TwoSessionsFloating: Story = {
+  args: {
+    selectedWindowType: 'floating',
+  },
+  decorators: [
+    moduleMetadata({
+      providers: [
+        mockSessionServiceProvider([
+          mockPersistentViewerSession,
+          mockReadOnlyViewerSession,
+        ]),
+      ],
+    }),
+  ],
+};
+
+export const TwoSessionsTiling: Story = {
+  args: {
+    selectedWindowType: 'tiling',
+  },
+  decorators: [
+    moduleMetadata({
+      providers: [
+        mockSessionServiceProvider([
+          mockPersistentViewerSession,
+          mockReadOnlyViewerSession,
+        ]),
+      ],
+    }),
+  ],
+};
+
+export const TwoSessionsTilingPending: Story = {
+  args: {
+    selectedWindowType: 'tiling',
+  },
+  decorators: [
+    moduleMetadata({
+      providers: [
+        mockSessionServiceProvider([
+          {
+            ...mockPersistentViewerSession,
+            preparation_state: 'Pending',
+            state: 'Pending',
+          },
+          {
+            ...mockReadOnlyViewerSession,
+            preparation_state: 'Completed',
+            state: 'Failed',
+          },
+        ]),
+      ],
+    }),
+  ],
+};
+
+export const OneSessionTilingPending: Story = {
+  args: {
+    selectedWindowType: 'tiling',
+  },
+  decorators: [
+    moduleMetadata({
+      providers: [
+        mockSessionServiceProvider([
+          {
+            ...mockPersistentViewerSession,
+            preparation_state: 'Completed',
+            state: 'Pending',
+          },
+        ]),
+      ],
+    }),
+  ],
+};
diff --git a/frontend/src/app/sessions/session/session.component.css b/frontend/src/app/sessions/session/session.component.css
deleted file mode 100644
index 76be2f69fe..0000000000
--- a/frontend/src/app/sessions/session/session.component.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-.height {
-  height: calc(100vh - 2vh - 65px - 110px);
-}
diff --git a/frontend/src/app/sessions/session/session.component.html b/frontend/src/app/sessions/session/session.component.html
deleted file mode 100644
index 36e399be09..0000000000
--- a/frontend/src/app/sessions/session/session.component.html
+++ /dev/null
@@ -1,118 +0,0 @@
-<!--
- ~ SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
- ~ SPDX-License-Identifier: Apache-2.0
- -->
-
-<div
-  *ngIf="
-    (sessionViewerService.sessions$ | async) === undefined ||
-    (sessionViewerService.sessions$ | async)?.length === 0
-  "
->
-  <span>
-    Please select the sessions that you'd like to open in the session viewer:
-  </span>
-  <div *ngIf="cachedSessions && !cachedSessions.length">
-    No sessions found. Please create a session in the 'Sessions' tab first.
-  </div>
-
-  <div *ngIf="cachedSessions === undefined">
-    <ngx-skeleton-loader
-      *ngFor="let _ of [0, 1, 2, 3]"
-      appearance="circle"
-      [theme]="{
-        'border-radius': '5px',
-        height: '24px',
-        width: '80%',
-        border: '1px solid white',
-        margin: '0',
-      }"
-    ></ngx-skeleton-loader>
-  </div>
-
-  <div class="flex flex-col" *ngIf="cachedSessions && cachedSessions.length">
-    <mat-checkbox
-      class="w-fit"
-      color="primary"
-      [disabled]="
-        !sessionService.beautifyState(session.preparation_state, session.state)
-          .success
-      "
-      matTooltip="Please wait until the session is running. You can check the status in the 'Sessions' tab."
-      [matTooltipDisabled]="
-        sessionService.beautifyState(session.preparation_state, session.state)
-          .success
-      "
-      [value]="session.id"
-      [(ngModel)]="session.checked"
-      *ngFor="let session of cachedSessions"
-    >
-      {{ session.version.tool.name }} {{ session.version.name }},
-      {{ session.type }}, created at
-      {{ session.created_at | date: "EE, dd MMM y HH:mm:ss" }}
-    </mat-checkbox>
-  </div>
-
-  <div class="mt-2 w-fit rounded border-2 p-2">
-    Please note: We're not technically preventing that you select two
-    Eclipse-based sessions (for example two Capella sessions), <br />but the
-    server will not let you connect to the sessions. We're working on making
-    this possible.
-  </div>
-  <div class="mt-2">
-    <mat-radio-group [(ngModel)]="selectedWindowType">
-      <mat-radio-button value="floating">
-        Floating window manager
-      </mat-radio-button>
-      <mat-radio-button value="tiling">Tiling window manager</mat-radio-button>
-    </mat-radio-group>
-  </div>
-
-  <div class="mt-2">
-    <button
-      mat-raised-button
-      (click)="selectSessions()"
-      [disabled]="checkedSessions === undefined || !checkedSessions.length"
-      class="flex"
-    >
-      Open session viewer
-      <mat-icon iconPositionEnd class="mat-icon-position"
-        >navigate_next</mat-icon
-      >
-    </button>
-  </div>
-</div>
-
-<ng-container *ngIf="sessionViewerService.sessions$ | async as viewerSessions">
-  <div
-    class="select-none"
-    *ngIf="viewerSessions.length"
-    [ngClass]="{
-      height: (fullscreenService.isFullscreen$ | async) === false,
-      'h-screen': fullscreenService.isFullscreen$ | async,
-    }"
-  >
-    <app-floating-window-manager
-      *ngIf="isFloatingWindowManager; else tilingWindow"
-    />
-
-    <ng-template #tilingWindow>
-      <app-tiling-window-manager *ngIf="isTilingWindowManager" />
-    </ng-template>
-  </div>
-
-  <div class="fixed bottom-4 right-4 z-50">
-    <button
-      mat-fab
-      color="primary"
-      (click)="fullscreenService.toggleFullscreen()"
-    >
-      <mat-icon *ngIf="(fullscreenService.isFullscreen$ | async) === false">
-        fullscreen
-      </mat-icon>
-      <mat-icon *ngIf="fullscreenService.isFullscreen$ | async">
-        fullscreen_exit
-      </mat-icon>
-    </button>
-  </div>
-</ng-container>
diff --git a/frontend/src/app/sessions/session/session.component.ts b/frontend/src/app/sessions/session/session.component.ts
deleted file mode 100644
index 8bba7f095e..0000000000
--- a/frontend/src/app/sessions/session/session.component.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-import { NgIf, NgFor, NgClass, AsyncPipe, DatePipe } from '@angular/common';
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { MatButton, MatFabButton } from '@angular/material/button';
-import { MatCheckbox } from '@angular/material/checkbox';
-import { MatIcon } from '@angular/material/icon';
-import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
-import { MatTooltip } from '@angular/material/tooltip';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import { filter, take } from 'rxjs';
-import { Session, SessionsService } from 'src/app/openapi';
-import { FullscreenService } from 'src/app/sessions/service/fullscreen.service';
-import { SessionService } from 'src/app/sessions/service/session.service';
-import { UserSessionService } from 'src/app/sessions/service/user-session.service';
-import { FloatingWindowManagerComponent } from './floating-window-manager/floating-window-manager.component';
-import { SessionViewerService } from './session-viewer.service';
-import { TilingWindowManagerComponent } from './tiling-window-manager/tiling-window-manager.component';
-
-@Component({
-  selector: 'app-session',
-  templateUrl: './session.component.html',
-  styleUrls: ['./session.component.css'],
-  standalone: true,
-  imports: [
-    NgIf,
-    NgFor,
-    NgxSkeletonLoaderModule,
-    MatCheckbox,
-    MatTooltip,
-    FormsModule,
-    MatRadioGroup,
-    MatRadioButton,
-    MatButton,
-    MatIcon,
-    NgClass,
-    FloatingWindowManagerComponent,
-    TilingWindowManagerComponent,
-    MatFabButton,
-    AsyncPipe,
-    DatePipe,
-  ],
-})
-@UntilDestroy()
-export class SessionComponent implements OnInit, OnDestroy {
-  cachedSessions?: CachedSession[] = undefined;
-
-  selectedWindowType = 'floating';
-
-  constructor(
-    public userSessionService: UserSessionService,
-    public sessionService: SessionService,
-    private sessionsService: SessionsService,
-    public sessionViewerService: SessionViewerService,
-    public fullscreenService: FullscreenService,
-  ) {
-    this.userSessionService.loadSessions();
-
-    this.fullscreenService.isFullscreen$
-      .pipe(untilDestroyed(this))
-      .subscribe(() => this.sessionViewerService.resizeSessions());
-  }
-
-  get checkedSessions(): undefined | CachedSession[] {
-    return this.cachedSessions?.filter((session) => session.checked);
-  }
-
-  get isTilingWindowManager(): boolean {
-    return this.selectedWindowType === 'tiling';
-  }
-
-  get isFloatingWindowManager(): boolean {
-    return this.selectedWindowType === 'floating';
-  }
-
-  ngOnInit(): void {
-    this.initializeCachedSessions();
-  }
-
-  ngOnDestroy(): void {
-    this.sessionViewerService.clearSessions();
-  }
-
-  initializeCachedSessions() {
-    this.userSessionService.sessions$
-      .pipe(
-        filter((sessions) => sessions !== undefined),
-        take(1),
-      )
-      .subscribe((sessions) => {
-        this.cachedSessions = sessions?.map((session) => {
-          (session as CachedSession).checked = false;
-          return session;
-        });
-      });
-  }
-
-  selectSessions() {
-    this.checkedSessions?.forEach((session) => {
-      this.sessionsService
-        .getSessionConnectionInformation(session.id)
-        .subscribe((connectionInfo) => {
-          this.sessionViewerService.pushSession(
-            session,
-            connectionInfo.payload,
-          );
-        });
-    });
-  }
-}
-
-type CachedSession = Session & {
-  checked?: boolean;
-};
diff --git a/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.html b/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.html
index f4b62c0d3e..2a97f526cb 100644
--- a/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.html
+++ b/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.html
@@ -4,9 +4,7 @@
  -->
 
 <div class="flex h-full gap-0.5">
-  <ng-container
-    *ngFor="let session of sessions; trackBy: trackBySessionIndexAndId"
-  >
+  @for (session of sessions; track trackBySessionIndexAndId) {
     <div
       class="flex flex-col"
       (click)="sessionViewerService.focusSession(session)"
@@ -20,42 +18,40 @@
           {{ session.type }}
         </span>
 
-        <div>
-          <div *ngIf="session.focused" class="flex items-center gap-2">
+        <div class="flex items-center gap-2">
+          @if (session.focused) {
             <span>Focused</span><mat-icon>phonelink</mat-icon>
-          </div>
-          <div *ngIf="!session.focused" class="flex items-center gap-2">
+          } @else {
             <span>Not focused</span>
             <mat-icon>phonelink_off</mat-icon>
-          </div>
+          }
         </div>
 
         <div class="flex items-center gap-2">
           <div class="flex items-center gap-1">
-            <button
-              class="m-0"
-              *ngIf="session.index !== 0"
-              (click)="onLeftArrowClick(session)"
-            >
-              <mat-icon class="!flex items-center"> arrow_back </mat-icon>
-            </button>
+            @if (session.index !== 0) {
+              <button class="m-0" (click)="onLeftArrowClick(session)">
+                <mat-icon class="!flex items-center">arrow_back</mat-icon>
+              </button>
+            } @else if (session.index !== sessions.length - 1) {
+              <button class="m-0" (click)="onRightArrowClick(session)">
+                <mat-icon class="!flex items-center">arrow_forward</mat-icon>
+              </button>
+            }
+          </div>
 
+          @if ((sessionViewerService.allSessions$ | async)!.length > 1) {
             <button
-              class="m-0"
-              *ngIf="session.index !== sessions.length - 1"
-              (click)="onRightArrowClick(session)"
+              class="m-0 flex items-center"
+              (click)="sessionViewerService.toggleFullscreen(session)"
             >
-              <mat-icon class="!flex items-center"> arrow_forward </mat-icon>
+              @if (session.fullscreen) {
+                <mat-icon>fullscreen_exit</mat-icon>
+              } @else {
+                <mat-icon>fullscreen</mat-icon>
+              }
             </button>
-          </div>
-
-          <button
-            class="m-0 flex items-center"
-            (click)="sessionViewerService.toggleFullscreen(session)"
-          >
-            <mat-icon *ngIf="!session.fullscreen">fullscreen</mat-icon>
-            <mat-icon *ngIf="session.fullscreen">fullscreen_exit</mat-icon>
-          </button>
+          }
         </div>
       </div>
 
@@ -66,10 +62,11 @@
       />
     </div>
 
-    <div
-      *ngIf="session.index < sessions.length - 1"
-      class="w-2 cursor-col-resize rounded bg-gray-300"
-      (mousedown)="onMouseDown($event, session.index)"
-    ></div>
-  </ng-container>
+    @if (session.index < sessions.length - 1) {
+      <div
+        class="w-2 cursor-col-resize rounded bg-gray-300"
+        (mousedown)="onMouseDown($event, session.index)"
+      ></div>
+    }
+  }
 </div>
diff --git a/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.ts b/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.ts
index 7c91fcc99a..c31f256fdf 100644
--- a/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.ts
+++ b/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.ts
@@ -2,7 +2,7 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { NgFor, NgIf, NgClass } from '@angular/common';
+import { AsyncPipe, NgClass } from '@angular/common';
 import { Component, HostListener, OnInit } from '@angular/core';
 import { MatIcon } from '@angular/material/icon';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
@@ -14,7 +14,7 @@ import { SessionViewerService, ViewerSession } from '../session-viewer.service';
   selector: 'app-tiling-window-manager',
   templateUrl: './tiling-window-manager.component.html',
   standalone: true,
-  imports: [NgFor, NgIf, MatIcon, SessionIFrameComponent, NgClass],
+  imports: [MatIcon, SessionIFrameComponent, NgClass, AsyncPipe],
 })
 @UntilDestroy()
 export class TilingWindowManagerComponent implements OnInit {
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.css b/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.css
index fcdf7fdb18..abd9a56cbd 100644
--- a/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.css
+++ b/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.css
@@ -4,17 +4,17 @@
 */
 
 .error {
-  background-color: var(--error-color);
+  @apply bg-error;
 }
 
 .warning {
-  background-color: var(--warning-color);
+  @apply bg-warning;
 }
 
 .success {
-  background-color: var(--success-color);
+  @apply bg-success;
 }
 
 .primary {
-  background-color: var(--primary-color);
+  @apply bg-primary;
 }
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.docs.mdx b/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.docs.mdx
deleted file mode 100644
index 989f99d2ed..0000000000
--- a/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.docs.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
-{/*
-    SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
-    SPDX-License-Identifier: Apache-2.0
-*/}
-
-
-import * as ActiveSessions from './active-sessions.stories.ts'
-import { Meta, Story, Title } from '@storybook/blocks'
-
-<Meta of={ActiveSessions} />
-
-<Title />
-
-The Active Session component shows users information about their current
-sessions, including the session type, such as read-only or persistent,
-creation type, tool, and connection method, and displays the current session state.
-
-When loading sessions, it looks like this:
-<Story of={ActiveSessions.LoadingStory}/>
-
-If there are no active sessions, it looks like this:
-<Story of={ActiveSessions.NoActiveStories}/>
-
-If the session starts successfully, it looks like this:
-<Story of={ActiveSessions.SessionSuccessStateStory}/>
-
-During session creation, when no error has occurred, it looks like this:
-<Story of={ActiveSessions.SessionWarningStateStory}/>
-
-If there is an error during creation, it looks like this:
-<Story of={ActiveSessions.SessionErrorStateStory}/>
-
-Even though we cover a variety of possible states, the session may end
-in an unknown state that looks like this:
-<Story of={ActiveSessions.SessionUnknownStateStory}/>
-
-The only difference between a persistent session and a read-only session is the title.
-Since we only covered persistent sessions above, this is a read-only session:
-<Story of={ActiveSessions.ReadonlySessionSuccessStateStory}/>
-
-## Session sharing
-
-When the tool supports session sharing, the session owner can see a share button:
-<Story of={ActiveSessions.SessionSharingEnabled}/>
-
-When the session is shared, the names of users who have access to the session are displayed:
-<Story of={ActiveSessions.SessionSharedWithUser}/>
-
-For the user who has access to the shared session, the session looks like this:
-<Story of={ActiveSessions.SharedSession}/>
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.html b/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.html
index a3ee5ecffa..58f2d04480 100644
--- a/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.html
+++ b/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.html
@@ -5,7 +5,7 @@
 
 <h1 class="text-2xl">Active Sessions</h1>
 
-@if ((userSessionService.sessions$ | async) === undefined) {
+@if ((sessions | async) === undefined) {
   <ngx-skeleton-loader
     appearance="circle"
     [theme]="{
@@ -15,48 +15,74 @@ <h1 class="text-2xl">Active Sessions</h1>
       border: '1px solid white',
     }"
   ></ngx-skeleton-loader>
-} @else if ((userSessionService.sessions$ | async)?.length === 0) {
+} @else if ((sessions | async)?.length === 0) {
   <div class="mat-card collab-card w-full">
     <h2 class="mb-3 text-xl font-medium">No active sessions</h2>
     <div class="text-sm">
       There are no active sessions for your user in our system. <br />
     </div>
   </div>
-} @else if ((userSessionService.sessions$ | async)?.length !== 0) {
+} @else if ((sessions | async)?.length !== 0) {
   <div class="flex flex-col gap-2">
-    <a
-      class="w-full max-w-[85vw]"
-      matInput
-      mat-stroked-button
-      color="primary"
-      type="submit"
-      routerLink="/session"
-    >
-      <span> Open internal session viewer </span>
-      <mat-icon iconPositionEnd>keyboard_arrow_right</mat-icon>
-    </a>
+    <div class="rounded border bg-white p-2">
+      <h2><b>Internal Session Viewer</b></h2>
+      <mat-radio-group [(ngModel)]="selectedWindowManager">
+        <mat-radio-button value="tiling"
+          >Tiling window manager</mat-radio-button
+        >
+        <mat-radio-button value="floating">
+          Floating window manager
+        </mat-radio-button>
+      </mat-radio-group>
 
-    @for (session of userSessionService.sessions$ | async; track session.id) {
+      <a
+        class="w-full max-w-[85vw]"
+        matInput
+        mat-stroked-button
+        color="primary"
+        type="submit"
+        routerLink="/session-viewer"
+        [queryParams]="{
+          'window-manager': selectedWindowManager,
+          'session-id': (selectedSessionIDs$ | async),
+        }"
+        [disabled]="!(selectedSessionIDs$ | async)?.length"
+      >
+        <span> Open selected sessions in internal session viewer </span>
+        <mat-icon iconPositionEnd>keyboard_arrow_right</mat-icon>
+      </a>
+    </div>
+
+    @for (session of sessions | async; track session.id) {
       <div class="collab-card">
-        <div class="flex items-center justify-between">
+        <div class="flex h-12 items-center justify-between">
+          <mat-checkbox
+            class="left-[-10px]"
+            color="primary"
+            [(ngModel)]="session.selected"
+          ></mat-checkbox>
           <b class="text-lg">
             @if (isPersistentSession(session)) {
               <h2>Persistent workspace session</h2>
             } @else if (isReadonlySession(session)) {
-              <h2>Read-only session</h2>
+              <h2>Read-Only session</h2>
             }
           </b>
-          @if ((feedbackService.feedbackConfig$ | async)?.on_session_card) {
-            <button
-              mat-icon-button
-              color="primary"
-              (click)="feedbackService.showDialog([session], 'On session card')"
-              matTooltip="Give feedback"
-              matTooltipPosition="above"
-            >
-              <mat-icon>feedback</mat-icon>
-            </button>
-          }
+          <div>
+            @if ((feedbackService.feedbackConfig$ | async)?.on_session_card) {
+              <button
+                mat-icon-button
+                color="primary"
+                (click)="
+                  feedbackService.showDialog([session], 'On session card')
+                "
+                matTooltip="Give feedback"
+                matTooltipPosition="above"
+              >
+                <mat-icon>feedback</mat-icon>
+              </button>
+            }
+          </div>
         </div>
 
         <div>
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.ts b/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.ts
index 97df1b4384..75de55e765 100644
--- a/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.ts
+++ b/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.ts
@@ -3,15 +3,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { NgClass, AsyncPipe } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { MatAnchor, MatButton, MatIconButton } from '@angular/material/button';
 import { MatCardContent } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
 import { MatIcon } from '@angular/material/icon';
 import { MatProgressBar } from '@angular/material/progress-bar';
+import { MatRadioModule } from '@angular/material/radio';
 import { MatTooltip } from '@angular/material/tooltip';
 import { RouterLink } from '@angular/router';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { BehaviorSubject, map } from 'rxjs';
 import { Session } from 'src/app/openapi';
 import { BeautifyService } from 'src/app/services/beatify/beautify.service';
 import { OwnUserWrapperService } from 'src/app/services/user/user.service';
@@ -44,9 +48,12 @@ import { FileBrowserDialogComponent } from './file-browser-dialog/file-browser-d
     AsyncPipe,
     MatIconButton,
     MatTooltip,
+    MatCheckboxModule,
+    MatRadioModule,
+    FormsModule,
   ],
 })
-export class ActiveSessionsComponent {
+export class ActiveSessionsComponent implements OnInit {
   isReadonlySession = isReadonlySession;
   isPersistentSession = isPersistentSession;
 
@@ -59,6 +66,35 @@ export class ActiveSessionsComponent {
     private dialog: MatDialog,
   ) {}
 
+  selectedWindowManager = 'tiling';
+
+  sessions = new BehaviorSubject<SessionWithSelection[] | undefined>(undefined);
+
+  ngOnInit(): void {
+    this.userSessionService.sessions$.subscribe((sessions) => {
+      const selectedSessionIDs = new Set(
+        this.sessions.value?.filter((s) => s.selected).map((s) => s.id) ?? [],
+      );
+
+      this.sessions.next(
+        sessions?.map((s) => ({
+          ...s,
+          selected: selectedSessionIDs.has(s.id),
+        })),
+      );
+    });
+  }
+
+  get selectedSessionIDs$() {
+    return this.sessions.pipe(
+      map((sessions) =>
+        sessions
+          ?.filter((session) => session.selected)
+          .map((session) => session.id),
+      ),
+    );
+  }
+
   openDeletionDialog(sessions: Session[]): void {
     const dialogRef = this.dialog.open(DeleteSessionDialogComponent, {
       data: sessions,
@@ -98,3 +134,5 @@ export class ActiveSessionsComponent {
     return session.owner.id != this.userWrapperService.user?.id;
   }
 }
+
+type SessionWithSelection = Session & { selected: boolean };
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component.html b/frontend/src/app/sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component.html
index 4b1e0b6269..1b3b967394 100644
--- a/frontend/src/app/sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component.html
+++ b/frontend/src/app/sessions/user-sessions-wrapper/create-session/create-readonly-session/create-readonly-session.component.html
@@ -3,7 +3,7 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 <div class="wrapper flex flex-col">
-  <h2 class="mb-2 text-xl font-medium">Read-only Sessions</h2>
+  <h2 class="mb-2 text-xl font-medium">Read-Only Sessions</h2>
   <div id="readonly-card" class="collab-card grow p-[16px]">
     <div class="flex h-full flex-col justify-between gap-2">
       <p class="text-sm">
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-model-options/create-readonly-model-options.component.html b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-model-options/create-readonly-model-options.component.html
index 12f010638c..37a5b0a94b 100644
--- a/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-model-options/create-readonly-model-options.component.html
+++ b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-model-options/create-readonly-model-options.component.html
@@ -19,7 +19,7 @@ <h2>
   </h2>
 
   @if (form.controls.include.value) {
-    <fieldset class="my-2 !ml-10 flex-col items-start justify-stretch">
+    <fieldset class="my-2 !ml-10 block min-w-0 max-w-full">
       <mat-form-field appearance="fill" class="w-full">
         <mat-label>Branch, tag or revision</mat-label>
         <input
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.component.css b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.component.css
deleted file mode 100644
index 0008a68f9e..0000000000
--- a/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.component.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-form {
-  min-width: 400px;
-}
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.component.docs.mdx b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.component.docs.mdx
deleted file mode 100644
index 181841ebc8..0000000000
--- a/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.component.docs.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
-{/*
-    SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
-    SPDX-License-Identifier: Apache-2.0
-*/}
-
-import * as CreateReadonlySessionDialog from "./create-readonly-session-dialog.stories.ts";
-import {Meta, Title, Story, Canvas, Unstyled} from "@storybook/blocks";
-
-<Meta of={CreateReadonlySessionDialog} />
-
-<Title />
-
-The Create read-only session dialog lets users select the models they
-want to load into their read-only session.
-
-## Large devices
-
-If a model is selected and there is either no limit on the number of
-models that can be provisioned or the limit has not been reached, the
-"Start Session" button can be used to request the read-only session.
-<Story of={CreateReadonlySessionDialog.ModelSelectedAndStartSessionPossible}/>
-
-If there are no models to display, the "Start Session" button is disabled
-and a banner is displayed that there are no models with read-only support.
-
-<Story of={CreateReadonlySessionDialog.NoModelsToShow}/>
-
-If the tool only supports a limited number of models that can be deployed
-in a single session, and this limit is exceeded, the Start Session button will be
-disabled and a banner will appear indicating the maximum number of sessions possible.
-
-<Story of={CreateReadonlySessionDialog.MaxNumberOfModelsExceeded}/>
-
-When different tool versions are compatible, this is displayed when creating a read-only sessions:
-
-<Story of={CreateReadonlySessionDialog.ShowNoteForCompatibleSession}/>
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.component.html b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.component.html
index 51a16a9186..42f9b98278 100644
--- a/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.component.html
+++ b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.component.html
@@ -3,10 +3,9 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div class="dialog">
+<div class="max-h-[90vh] px-5 pt-5">
   <form [formGroup]="form" (ngSubmit)="requestSession()">
-    <h2>Open Read-Only Session</h2>
-
+    <h2 class="mb-2 text-xl font-medium">Start a Read-Only Session</h2>
     @if (modelOptions.length && connectionMethods.length > 1) {
       <div class="mb-2">
         <p class="text-sm">
@@ -59,7 +58,7 @@ <h2>Open Read-Only Session</h2>
     @if (maxNumberOfModelsExceeded()) {
       <div class="my-1 rounded border bg-error p-2 text-sm shadow">
         <div class="flex items-center gap-2 text-white">
-          <mat-icon>warning</mat-icon>
+          <mat-icon class="!hidden sm:!block">warning</mat-icon>
           <span>
             The selected tool only supports up to
             {{ maxNumberOfModels }} provisioned model(s) at a time.
@@ -68,8 +67,8 @@ <h2>Open Read-Only Session</h2>
       </div>
     }
 
-    <div class="flex justify-between">
-      <button mat-flat-button mat-dialog-close type="button">Cancel</button>
+    <div class="mt-2 flex justify-between pb-5">
+      <button mat-stroked-button mat-dialog-close type="button">Cancel</button>
       <button
         mat-flat-button
         [disabled]="
diff --git a/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.component.ts b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.component.ts
index af3a12d7cc..f183193ed3 100644
--- a/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.component.ts
+++ b/frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-readonly-session/create-readonly-session-dialog.component.ts
@@ -31,7 +31,6 @@ import { ConnectionMethod } from 'src/app/settings/core/tools-settings/tool.serv
 @Component({
   selector: 'create-readonly-session-dialog',
   templateUrl: './create-readonly-session-dialog.component.html',
-  styleUrls: ['./create-readonly-session-dialog.component.css'],
   standalone: true,
   imports: [
     FormsModule,
@@ -130,9 +129,11 @@ export class CreateReadonlySessionDialogComponent implements OnInit {
         }),
       )
       .subscribe({
-        next: () => {
+        next: (session) => {
           this.dialog.close();
-          this.router.navigateByUrl('/');
+          this.router.navigate(['/session-viewer'], {
+            queryParams: { 'session-id': session.id },
+          });
         },
         error: () => {
           this.loading = false;
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 7c5c0a06b3..d876744460 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -64,8 +64,8 @@ table {
 /* All global variables are defined here */
 :root {
   --primary-color: #3f51b5;
-  --error-color: darkred;
-  --warning-color: darkorange;
+  --error-color: rgb(127 29 29);
+  --warning-color: rgb(194 65 12);
   --success-color: darkgreen;
   --hover-color: lightcyan;
   --banner-color: #010035;