From 29f86836172c557f482487a36716873c6845dbfc Mon Sep 17 00:00:00 2001
From: Idir Chikhoune <idir.chikhoune@lisn.fr>
Date: Fri, 3 Apr 2026 21:51:29 +0200
Subject: [PATCH 1/4] pagination feature ready, needs to be tested

---
 .../riot/competitions/detail/leaderboards.tag | 125 +++++++++++++++++-
 1 file changed, 119 insertions(+), 6 deletions(-)

diff --git a/src/static/riot/competitions/detail/leaderboards.tag b/src/static/riot/competitions/detail/leaderboards.tag
index 32050a480..c62737258 100644
--- a/src/static/riot/competitions/detail/leaderboards.tag
+++ b/src/static/riot/competitions/detail/leaderboards.tag
@@ -48,12 +48,12 @@
         </tr>
         <tr each="{ submission, index in selected_leaderboard.submissions}">
             <td class="collapsing index-column center aligned">
-                <gold-medal if="{index + 1 === 1}"></gold-medal>
-                <silver-medal if="{index + 1 === 2}"></silver-medal>
-                <bronze-medal if="{index + 1 === 3}"></bronze-medal>
-                <fourth-place-medal if="{index + 1 === 4}"></fourth-place-medal>
-                <fifth-place-medal if="{index + 1 === 5}"></fifth-place-medal>
-                <virtual if="{index + 1 > 5}">{index + 1}</virtual>
+                <gold-medal if="{get_row_number(index) === 1}"></gold-medal>
+                <silver-medal if="{get_row_number(index) === 2}"></silver-medal>
+                <bronze-medal if="{get_row_number(index) === 3}"></bronze-medal>
+                <fourth-place-medal if="{get_row_number(index) === 4}"></fourth-place-medal>
+                <fifth-place-medal if="{get_row_number(index) === 5}"></fifth-place-medal>
+                <virtual if="{get_row_number(index) > 5}">{get_row_number(index)}</virtual>
             </td>
             <td if="{submission.organization === null}"><a href="{submission.slug_url}">{ submission.owner }</a></td>
             <td if="{submission.organization !== null}"><a href="{submission.organization.url}">{ submission.organization.name }</a></td>
@@ -73,6 +73,38 @@
         </tbody>
     </table>
 
+    <div class="ui pagination menu" style="display:flex; align-items:center; justify-content:space-between; margin-top: 12px;">
+        <div style="display:flex; align-items:center; gap:8px;">
+            <button class="ui button" onclick="{ go_to_page.bind(this, page - 1) }" disabled="{ page <= 1 }">
+                <i class="icon chevron left"></i> Previous
+            </button>
+
+            <div style="display:flex; align-items:center; gap:6px;">
+                <span>Page</span>
+                <input type="number" min="1" value="{ page }" onkeydown="{ handle_page_enter }" style="width:70px; text-align:center;" />
+                <span> / { total_pages || 1 }</span>
+            </div>
+
+            <button class="ui button" onclick="{ go_to_page.bind(this, page + 1) }" disabled="{ page >= total_pages }">
+                Next <i class="icon chevron right"></i>
+            </button>
+        </div>
+
+        <div style="display:flex; align-items:center; gap:8px;">
+            <label>Per page</label>
+            <select class="ui dropdown" value="{ page_size }" onchange="{ change_page_size.bind(this) }">
+                <option value="50">50</option>
+                <option value="100">100</option>
+                <option value="500">500</option>
+                <option value="all">all</option>
+            </select>
+
+            <div style="margin-right: 10px; color: #8c8c8c;">
+                <small>{ total_count || 0 } total</small>
+            </div>
+        </div>
+    </div>
+
 
     <script>
         let self = this
@@ -85,6 +117,87 @@
         self.enable_detailed_results = false
         self.show_detailed_results_in_leaderboard = false
 
+        self.page = 1
+        self.page_size = 50
+        self.total_count = 0
+        self.total_pages = 1
+        self.paginated_submissions = []
+
+
+        self.get_page_size_value = function () {
+            if (String(self.page_size).toLowerCase() === 'all') {
+                return self.total_count || 1
+            }
+
+            var n = parseInt(self.page_size, 10)
+            if (isNaN(n) || n <= 0) {
+                return 50
+            }
+
+            return n
+        }
+
+        self.get_row_number = function (index) {
+            if (String(self.page_size).toLowerCase() === 'all') {
+                return index + 1
+            }
+
+            return ((self.page - 1) * self.get_page_size_value()) + index + 1
+        }
+
+        self.update_pagination = function () {
+            self.total_count = _.get(self.selected_leaderboard, 'submissions', []).length
+
+            var page_size_value = self.get_page_size_value()
+
+            if (String(self.page_size).toLowerCase() === 'all') {
+                self.total_pages = 1
+                self.page = 1
+                self.paginated_submissions = _.get(self.selected_leaderboard, 'submissions', [])
+                return
+            }
+
+            self.total_pages = Math.max(1, Math.ceil(self.total_count / page_size_value))
+
+            if (self.page > self.total_pages) {
+                self.page = self.total_pages
+            }
+
+            var start = (self.page - 1) * page_size_value
+            var end = start + page_size_value
+            self.paginated_submissions = _.slice(_.get(self.selected_leaderboard, 'submissions', []), start, end)
+        }
+
+        self.go_to_page = function (p) {
+            var newPage = parseInt(p, 10)
+            if (isNaN(newPage) || newPage < 1) newPage = 1
+            if (newPage > self.total_pages) newPage = self.total_pages
+            if (newPage === self.page) return
+
+            self.page = newPage
+            self.update_pagination()
+            self.update()
+        }
+
+        self.change_page_size = function (e) {
+            var raw = (e && e.target && typeof e.target.value !== 'undefined')
+                ? String(e.target.value).toLowerCase()
+                : String(self.page_size).toLowerCase()
+
+            if (raw === 'all') {
+                self.page_size = 'all'
+            } else {
+                var val = parseInt(raw, 10)
+                if (isNaN(val) || val <= 0) return
+                if ([50, 100, 500].indexOf(val) === -1) return
+                self.page_size = val
+            }
+
+            self.page = 1
+            self.update_pagination()
+            self.update()
+        }
+
         self.pretty_date = function (date_string) {
             if (!!date_string) {
                 return luxon.DateTime.fromISO(date_string).toFormat('yyyy-MM-dd HH:mm')

From 391cb0dd3fed897e30cb40969ef3eacb1ff6b387 Mon Sep 17 00:00:00 2001
From: Idir Chikhoune <idir.chikhoune@lisn.fr>
Date: Tue, 7 Apr 2026 10:37:18 +0200
Subject: [PATCH 2/4] set up 50 as default value for leaderboard pagination

---
 .../riot/competitions/detail/leaderboards.tag | 59 ++++++++++---------
 1 file changed, 30 insertions(+), 29 deletions(-)

diff --git a/src/static/riot/competitions/detail/leaderboards.tag b/src/static/riot/competitions/detail/leaderboards.tag
index c62737258..effe8899d 100644
--- a/src/static/riot/competitions/detail/leaderboards.tag
+++ b/src/static/riot/competitions/detail/leaderboards.tag
@@ -41,35 +41,35 @@
         </thead>
         <!--  Always show leaderboard  -->
         <tbody>
-        <tr if="{_.isEmpty(selected_leaderboard.submissions)}" class="center aligned">
-            <td colspan="100%">
-                <em>No submissions have been added to this leaderboard yet!</em>
-            </td>
-        </tr>
-        <tr each="{ submission, index in selected_leaderboard.submissions}">
-            <td class="collapsing index-column center aligned">
-                <gold-medal if="{get_row_number(index) === 1}"></gold-medal>
-                <silver-medal if="{get_row_number(index) === 2}"></silver-medal>
-                <bronze-medal if="{get_row_number(index) === 3}"></bronze-medal>
-                <fourth-place-medal if="{get_row_number(index) === 4}"></fourth-place-medal>
-                <fifth-place-medal if="{get_row_number(index) === 5}"></fifth-place-medal>
-                <virtual if="{get_row_number(index) > 5}">{get_row_number(index)}</virtual>
-            </td>
-            <td if="{submission.organization === null}"><a href="{submission.slug_url}">{ submission.owner }</a></td>
-            <td if="{submission.organization !== null}"><a href="{submission.organization.url}">{ submission.organization.name }</a></td>
-            <td data-sort="{ sort_date_value(submission.created_when) }"
-                data-sort-value="{ sort_date_value(submission.created_when) }"
-            >
-                { pretty_date(submission.created_when) }
-            </td>
-            <td>{submission.id}</td>
-            <td each="{ column in filtered_columns }">
-                <a if="{column.title == 'Detailed Results'}" href="detailed_results/{get_detailed_result_submisison_id(column, submission)}" target="_blank" class="eye-icon-link">
-                    <i class="icon grey eye eye-icon"></i>
-                </a>
-                <span if="{column.title != 'Detailed Results'}" class="{bold_class(column, submission)}">{get_score(column, submission)}</span>
-            </td>
-        </tr>
+            <tr if="{_.isEmpty(paginated_submissions)}" class="center aligned">
+                <td colspan="100%">
+                    <em>No submissions have been added to this leaderboard yet!</em>
+                </td>
+            </tr>
+
+            <tr each="{ submission, index in paginated_submissions}">
+                <td class="collapsing index-column center aligned">
+                    <gold-medal if="{get_row_number(index) === 1}"></gold-medal>
+                    <silver-medal if="{get_row_number(index) === 2}"></silver-medal>
+                    <bronze-medal if="{get_row_number(index) === 3}"></bronze-medal>
+                    <fourth-place-medal if="{get_row_number(index) === 4}"></fourth-place-medal>
+                    <fifth-place-medal if="{get_row_number(index) === 5}"></fifth-place-medal>
+                    <virtual if="{get_row_number(index) > 5}">{get_row_number(index)}</virtual>
+                </td>
+                <td if="{submission.organization === null}"><a href="{submission.slug_url}">{ submission.owner }</a></td>
+                <td if="{submission.organization !== null}"><a href="{submission.organization.url}">{ submission.organization.name }</a></td>
+                <td data-sort="{ sort_date_value(submission.created_when) }"
+                    data-sort-value="{ sort_date_value(submission.created_when) }">
+                    { pretty_date(submission.created_when) }
+                </td>
+                <td>{submission.id}</td>
+                <td each="{ column in filtered_columns }">
+                    <a if="{column.title == 'Detailed Results'}" href="detailed_results/{get_detailed_result_submisison_id(column, submission)}" target="_blank" class="eye-icon-link">
+                        <i class="icon grey eye eye-icon"></i>
+                    </a>
+                    <span if="{column.title != 'Detailed Results'}" class="{bold_class(column, submission)}">{get_score(column, submission)}</span>
+                </td>
+            </tr>
         </tbody>
     </table>
 
@@ -309,6 +309,7 @@
                         }
                     }
                     self.filter_columns()
+                    self.update_pagination()
                     $('#leaderboardTable').tablesort()
                     self.update()
                 })

From fc3655660f57b283d43f45d13480444e22c14dd4 Mon Sep 17 00:00:00 2001
From: Idir Chikhoune <idir.chikhoune@lisn.fr>
Date: Tue, 7 Apr 2026 17:28:16 +0200
Subject: [PATCH 3/4] fix pagination in endpoint

---
 src/apps/api/views/competitions.py            |  24 +-
 src/static/js/ours/client.js                  |   4 +
 .../riot/competitions/detail/detail.tag       | 679 ++++++++++++++++--
 .../riot/competitions/detail/leaderboards.tag | 172 +++--
 4 files changed, 751 insertions(+), 128 deletions(-)

diff --git a/src/apps/api/views/competitions.py b/src/apps/api/views/competitions.py
index 7cacb433b..7ee468acf 100644
--- a/src/apps/api/views/competitions.py
+++ b/src/apps/api/views/competitions.py
@@ -18,7 +18,7 @@
 from rest_framework.response import Response
 from rest_framework.renderers import JSONRenderer
 from rest_framework_csv.renderers import CSVRenderer
-from api.pagination import LargePagination
+from api.pagination import DynamicChoicePagination, LargePagination
 from api.renderers import ZipRenderer
 from rest_framework.viewsets import ModelViewSet
 from api.serializers.competitions import CompetitionSerializerSimple, PhaseSerializer, \
@@ -775,9 +775,10 @@ def get_leaderboard(self, request, pk):
         phase = self.get_object()
         if phase.competition.fact_sheet:
             fact_sheet_keys = [(phase.competition.fact_sheet[question]['key'], phase.competition.fact_sheet[question]['title'])
-                               for question in phase.competition.fact_sheet if phase.competition.fact_sheet[question]['is_on_leaderboard'] == 'true']
+                            for question in phase.competition.fact_sheet if phase.competition.fact_sheet[question]['is_on_leaderboard'] == 'true']
         else:
             fact_sheet_keys = None
+
         query = LeaderboardPhaseSerializer(phase).data
         response = {
             'title': query['leaderboard']['title'],
@@ -787,9 +788,11 @@ def get_leaderboard(self, request, pk):
             'fact_sheet_keys': fact_sheet_keys or None,
             'primary_index': query['leaderboard']['primary_index']
         }
+
         columns = [col for col in query['columns']]
         submissions_keys = {}
         submission_detailed_results = {}
+
         for submission in query['submissions']:
             submission_key = f"{submission['owner']}{submission['parent'] or submission['id']}"
             # gather detailed result from submissions for each task
@@ -814,6 +817,7 @@ def get_leaderboard(self, request, pk):
                     'organization': submission['organization'],
                     'created_when': submission['created_when']
                 })
+
             for score in submission['scores']:
 
                 # to check if a column is found
@@ -851,6 +855,21 @@ def get_leaderboard(self, request, pk):
         for k, v in submissions_keys.items():
             response['submissions'][v]['detailed_results'] = submission_detailed_results[k]
 
+        # --- pagination addition ---
+        total_count = len(response['submissions'])
+        paginator = DynamicChoicePagination()
+        paginated_submissions = paginator.paginate_queryset(response['submissions'], request, view=self)
+        if paginated_submissions is None:
+            paginated_submissions = response['submissions']
+
+        response['submissions'] = paginated_submissions
+        response['count'] = total_count
+        response['page_size'] = getattr(paginator, 'requested_page_size', request.query_params.get('page_size', 50))
+        response['next'] = paginator.get_next_link()
+        response['previous'] = paginator.get_previous_link()
+        response['allowed_page_sizes'] = [50, 100, 500, 'all']
+        # --- end pagination addition ---
+
         for task in query['tasks']:
             # This can be used to rendered variable columns on each task
             tempTask = {
@@ -862,6 +881,7 @@ def get_leaderboard(self, request, pk):
             for col in columns:
                 tempTask['columns'].append(col)
             response['tasks'].append(tempTask)
+
         return Response(response)
 
 
diff --git a/src/static/js/ours/client.js b/src/static/js/ours/client.js
index f43bfaaa2..decd1d6f4 100644
--- a/src/static/js/ours/client.js
+++ b/src/static/js/ours/client.js
@@ -147,6 +147,10 @@ CODALAB.api = {
     get_leaderboard_for_render: function (phase_pk) {
         return CODALAB.api.request('GET', `${URLS.API}phases/${phase_pk}/get_leaderboard/`)
     },
+    get_leaderboard_for_render: function (phase_pk, params = {}) {
+        return CODALAB.api.request('GET', `${URLS.API}phases/${phase_pk}/get_leaderboard/`, params)
+    },
+
     update_submission_score: function (pk, data) {
         return CODALAB.api.request('PATCH', `${URLS.API}submission_scores/${pk}/`, data)
     },
diff --git a/src/static/riot/competitions/detail/detail.tag b/src/static/riot/competitions/detail/detail.tag
index f0c9418c1..f971675b3 100644
--- a/src/static/riot/competitions/detail/detail.tag
+++ b/src/static/riot/competitions/detail/detail.tag
@@ -1,65 +1,648 @@
 <competition-detail>
-    <comp-detail-header class="comp-detail-paragraph-text" competition="{ competition }"></comp-detail-header>
-    <comp-detail-timeline class="comp-detail-phases" competition="{ competition }"></comp-detail-timeline>
-    <comp-tabs class="comp-detail-paragraph-text" competition="{ competition }"></comp-tabs>
+    <div class="layout">
+        <div class="comp-content">
+            <comp-detail-header class="comp-detail-paragraph-text" competition="{ competition }"></comp-detail-header>
+            <comp-detail-timeline class="comp-detail-phases" competition="{ competition }"></comp-detail-timeline>
+            <comp-tabs class="comp-detail-paragraph-text" competition="{ competition }"></comp-tabs>
+        </div>
+
+        <button
+            if="{ canViewWorkersPanel }"
+            class="ui button primary workers-toggle-btn"
+            onclick="{ toggleWorkersPanel }">
+            <i class="server icon"></i>
+            { showWorkersPanel ? 'Hide workers' : 'Show workers' }
+        </button>
+
+        <aside if="{ canViewWorkersPanel && showWorkersPanel }"
+               class="workers-panel"
+               style="left: { panelLeft }px; top: { panelTop }px;">
+            <div class="workers-card">
+                <div class="workers-header workers-drag-handle" onmousedown="{ startPanelDrag }">
+                    <div class="workers-title">
+                        <i class="server icon"></i>
+                        <div class="workers-title-text">
+                            Compute Workers
+                            </br>
+                            <small><small><small>displayed only for competition organizers</small></small></small>
+                            <div class="workers-subtitle">
+                                <span class="workers-connection { wsState }">{ connectionLabel() }</span>
+                                <span class="workers-separator">•</span>
+                                Last update: { lastSyncLabel() }
+                            </div>
+                        </div>
+                    </div>
+                    <div class="workers-drag-hint">Drag to move</div>
+                </div>
+
+                <div class="workers-stats">
+                    <div class="stat-card">
+                        <div class="stat-value">{ totalCount() }</div>
+                        <div class="stat-label">Total</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value stat-green">{ availableCount() }</div>
+                        <div class="stat-label">Available</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value stat-yellow">{ busyCount() }</div>
+                        <div class="stat-label">Busy</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value stat-red">{ unavailableCount() }</div>
+                        <div class="stat-label">Down</div>
+                    </div>
+                </div>
+
+                <div class="workers-table-wrap">
+                    <table class="ui very compact selectable striped table workers-table">
+                        <thead>
+                            <tr>
+                                <th class="col-worker">Worker</th>
+                                <th class="col-status">Status</th>
+                                <th class="col-jobs">Jobs</th>
+                                <th class="col-lastseen">Last seen</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr each="{ worker in sortedWorkers() }">
+                                <td><strong>{ worker.hostname }</strong></td>
+                                <td>
+                                    <span class="ui tiny label worker-status { getStatusClass(worker) }">
+                                        <i class="{ getStatusIcon(worker) } icon"></i>
+                                        { getStatusText(worker) }
+                                    </span>
+                                </td>
+                                <td><span class="ui circular label">{ worker.running_jobs || 0 }</span></td>
+                                <td>{ formatLastSeen(worker.timestamp) }</td>
+                            </tr>
+                            <tr if="{ sortedWorkers().length === 0 }">
+                                <td colspan="4" class="center aligned">
+                                    <div class="workers-empty">
+                                        <div class="header">No compute workers detected</div>
+                                        <div class="description">Waiting for the first websocket snapshot.</div>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="workers-footer">
+                    Green = available, yellow = busy, red = unavailable
+                </div>
+            </div>
+        </aside>
+    </div>
+
     <script>
-        var self = this
+        var self = this;
 
-        // Stops page load errors... although we shouldn't be using/referencing empty `competitions` object?
-        self.competition = {}
+        self.competition = {};
+        self.workers = [];
+        self.ws = null;
+        self.wsReconnectTimer = null;
+        self.wsState = 'disconnected';
+        self.lastSyncAt = null;
 
-        self.one("mount", function () {
-            // Setup tabs
-            $('.menu .item', self.root).tab()
+        self.canViewWorkersPanel = (self.opts.can_view_workers_panel === 'true');
+        self.showWorkersPanel = false
+
+        self.canViewWorkersPanel = String(self.opts.can_view_workers_panel || 'false') === 'true'
+        self.panelLeft = 24;
+        self.panelTop = 24;
+        self.panelWidth = 375;
+        self.draggingPanel = false;
+        self.dragOffsetX = 0;
+        self.dragOffsetY = 0;
+        self.panelStorageKey = 'codabench_workers_panel_position';
+        self.resizeListenerAttached = false;
+
+        self.toggleWorkersPanel = function () {
+            self.showWorkersPanel = !self.showWorkersPanel
+
+            if (self.showWorkersPanel) {
+                self.loadPanelPosition()
+                self.connect_workers_socket()
+            } else {
+                self.close_workers_socket()
+            }
+
+            self.update()
+        }
 
-            // Get the actual data
-            self.update_competition_data()
-        })
+        self.one('mount', function () {
+            $('.menu .item', self.root).tab();
+            self.update_competition_data();
+            if (self.canViewWorkersPanel) {
+                self.loadPanelPosition();
+                self.attachResizeListener();
+            }
+        });
+
+        self.close_workers_socket = function () {
+            if (self.wsReconnectTimer) {
+                clearTimeout(self.wsReconnectTimer)
+                self.wsReconnectTimer = null
+            }
+
+            if (self.ws) {
+                self.ws.onclose = null
+
+                try { self.ws.close() } catch (e) {}
+                self.ws = null
+            }
+
+            self.wsState = 'disconnected'
+        }
+
+        self.one('unmount', function () {
+            self.detachResizeListener();
+            if (self.wsReconnectTimer) {
+                clearTimeout(self.wsReconnectTimer);
+                self.wsReconnectTimer = null;
+            }
+            if (self.ws) {
+                try { self.ws.close(); } catch(e) {}
+                self.ws = null;
+            }
+            document.body.classList.remove('workers-panel-dragging');
+        });
 
         self.update_competition_data = function () {
             CODALAB.api.get_competition(self.opts.competition_pk, self.opts.secret_key)
                 .done(function (data) {
-                    self.competition = data
-                    CODALAB.events.trigger('competition_loaded', self.competition)
-                    let selected_phase_index = _.get(_.find(self.competition.phases, {'status': 'Current'}), 'id')
-                    if (selected_phase_index == null) {
-                        selected_phase_index = _.get(_.find(self.competition.phases, {is_final_phase: true}), 'id')
+                    self.competition = data;
+                    CODALAB.events.trigger('competition_loaded', self.competition);
+
+                    let currentPhase = _.find(self.competition.phases, { status: 'Current' });
+                    let selectedPhaseId = currentPhase ? currentPhase.id : null;
+                    if (selectedPhaseId === null) {
+                        let finalPhase = _.find(self.competition.phases, { is_final_phase: true });
+                        selectedPhaseId = finalPhase ? finalPhase.id : null;
                     }
-                    CODALAB.events.trigger('phase.selected',(_.find(self.competition.phases, {id: selected_phase_index})))
-                    self.update()
-                })
-                .fail(function (response) {
-                    toastr.error("Could not find benchmark")
+                    CODALAB.events.trigger(
+                        'phase.selected',
+                        (_.find(self.competition.phases, { id: selectedPhaseId }))
+                    );
+
+                    self.update();
                 })
-        }
+                .fail(function () {
+                    toastr.error("Could not find competition");
+                });
+        };
+
+        self.attachResizeListener = function () {
+            if (self.resizeListenerAttached) return;
+            window.addEventListener('resize', self.onWindowResize);
+            self.resizeListenerAttached = true;
+        };
+
+        self.detachResizeListener = function () {
+            if (!self.resizeListenerAttached) return;
+            window.removeEventListener('resize', self.onWindowResize);
+            self.resizeListenerAttached = false;
+        };
+
+        self.loadPanelPosition = function () {
+            try {
+                var raw = localStorage.getItem(self.panelStorageKey);
+                if (!raw) return;
+                var pos = JSON.parse(raw);
+                if (typeof pos.left === 'number') self.panelLeft = pos.left;
+                if (typeof pos.top === 'number') self.panelTop = pos.top;
+                self.clampPanelPosition();
+            } catch (e) {
+                console.warn('Could not load panel position', e);
+            }
+        };
+
+        self.savePanelPosition = function () {
+            try {
+                localStorage.setItem(self.panelStorageKey, JSON.stringify({
+                    left: self.panelLeft,
+                    top: self.panelTop
+                }));
+            } catch (e) {
+                console.warn('Could not save panel position', e);
+            }
+        };
+
+        self.clampPanelPosition = function () {
+            var minLeft = 8, minTop = 8;
+            var maxLeft = Math.max(minLeft, window.innerWidth - self.panelWidth - 8);
+            var maxTop = Math.max(minTop, window.innerHeight - 80);
+            self.panelLeft = Math.min(Math.max(minLeft, self.panelLeft), maxLeft);
+            self.panelTop = Math.min(Math.max(minTop, self.panelTop), maxTop);
+        };
+
+        self.onWindowResize = function () {
+            self.clampPanelPosition();
+            self.update();
+        };
+
+        self.startPanelDrag = function (e) {
+            if (e.button !== 0) return;
+            var panel = self.root.querySelector('.workers-panel');
+            if (!panel) return;
+            var rect = panel.getBoundingClientRect();
+            self.draggingPanel = true;
+            self.dragOffsetX = e.clientX - rect.left;
+            self.dragOffsetY = e.clientY - rect.top;
+            document.body.classList.add('workers-panel-dragging');
+            window.addEventListener('mousemove', self.onPanelDragMove);
+            window.addEventListener('mouseup', self.stopPanelDrag);
+            e.preventDefault(); e.stopPropagation();
+        };
+
+        self.onPanelDragMove = function (e) {
+            if (!self.draggingPanel) return;
+            var minLeft = 8, minTop = 8;
+            var maxLeft = Math.max(minLeft, window.innerWidth - self.panelWidth - 8);
+            var maxTop = Math.max(minTop, window.innerHeight - 80);
+            var newLeft = e.clientX - self.dragOffsetX;
+            var newTop = e.clientY - self.dragOffsetY;
+            self.panelLeft = Math.min(Math.max(minLeft, newLeft), maxLeft);
+            self.panelTop = Math.min(Math.max(minTop, newTop), maxTop);
+            self.update();
+        };
+
+        self.stopPanelDrag = function () {
+            if (!self.draggingPanel) return;
+            self.draggingPanel = false;
+            document.body.classList.remove('workers-panel-dragging');
+            window.removeEventListener('mousemove', self.onPanelDragMove);
+            window.removeEventListener('mouseup', self.stopPanelDrag);
+            self.savePanelPosition();
+            self.update();
+        };
+
+        self.connect_workers_socket = function () {
+            if (self.ws) {
+                try { self.ws.close(); } catch (e) {}
+                self.ws = null;
+            }
+            var scheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
+            var url = scheme + '://' + window.location.host + '/ws/workers/';
+            self.wsState = 'connecting';
+            self.update();
+            self.ws = new WebSocket(url);
+
+            self.ws.onopen = function () {
+                self.wsState = 'connected';
+                self.update();
+            };
+            self.ws.onmessage = function (event) {
+                try {
+                    var message = JSON.parse(event.data);
+                    if (message.type === 'workers.snapshot') {
+                        self.workers = message.workers || [];
+                        self.lastSyncAt = Date.now();
+                        self.update();
+                    }
+                    if (message.type === 'worker.health' && message.worker) {
+                        self.upsertWorker(message.worker);
+                        self.lastSyncAt = Date.now();
+                        self.update();
+                    }
+                } catch (e) {
+                    console.error('Invalid websocket payload:', e);
+                }
+            };
+
+            self.ws.onerror = function () {
+                self.wsState = 'error'
+                self.update()
+            }
+
+            self.ws.onclose = function () {
+                self.wsState = 'disconnected'
+                self.update()
+
+                if (!self.showWorkersPanel) return
+
+                if (self.wsReconnectTimer) {
+                    clearTimeout(self.wsReconnectTimer)
+                }
+
+                self.wsReconnectTimer = setTimeout(function () {
+                    self.connect_workers_socket()
+                }, 2000)
+            }
+        };
+
+        self.normalizeWorker = function (worker) {
+            worker = worker || {};
+            return {
+                hostname: worker.hostname || 'unknown',
+                status: worker.status || 'unavailable',
+                running_jobs: typeof worker.running_jobs === 'number' ? worker.running_jobs : 0,
+                timestamp: worker.timestamp || null
+            };
+        };
+
+        self.normalizeWorkers = function (workers) {
+            return (workers || [])
+                .filter(function (w) { return w && w.hostname; })
+                .map(self.normalizeWorker);
+        };
+
+        self.upsertWorker = function (worker) {
+            worker = self.normalizeWorker(worker);
+            if (!worker.hostname || worker.hostname === 'unknown') return;
+            var idx = _.findIndex(self.workers, { hostname: worker.hostname });
+            if (idx === -1) {
+                self.workers.push(worker);
+            } else {
+                self.workers[idx] = worker;
+            }
+            self.workers = self.workers.slice();
+        };
 
-        // This is triggered when a new submission is uploaded
-        // This gets the updated submissions to refresh the used submissions count
-        CODALAB.events.on('new_submission_created', function (new_submission_data) {
-            self.update_competition_data()
-        })
+        self.sortedWorkers = function () {
+            var order = { available: 0, busy: 1, unavailable: 2 };
+            return (self.workers || []).slice().sort(function (a, b) {
+                var sa = self.displayStatus(a), sb = self.displayStatus(b);
+                var oa = order[sa] || 99, ob = order[sb] || 99;
+                if (oa !== ob) return oa - ob;
+                if ((b.running_jobs || 0) !== (a.running_jobs || 0)) {
+                    return (b.running_jobs || 0) - (a.running_jobs || 0);
+                }
+                return (a.hostname || '').localeCompare(b.hostname || '');
+            });
+        };
 
+        self.displayStatus = function (worker) {
+            return worker && worker.status ? worker.status : 'unavailable';
+        };
+        self.getStatusClass = function (worker) {
+            var status = self.displayStatus(worker);
+            if (status === 'available') return 'green';
+            if (status === 'busy') return 'yellow';
+            return 'red';
+        };
+        self.getStatusIcon = function (worker) {
+            var status = self.displayStatus(worker);
+            if (status === 'available') return 'check circle';
+            if (status === 'busy') return 'clock';
+            return 'times circle';
+        };
+        self.getStatusText = function (worker) {
+            var status = self.displayStatus(worker);
+            if (status === 'available') return 'Available';
+            if (status === 'busy') return 'Busy';
+            return 'Unavailable';
+        };
+
+        self.formatLastSeen = function (timestamp) {
+            if (!timestamp) return '—';
+            var age = Math.round((Date.now()/1000) - timestamp);
+            if (age < 5) return 'just now';
+            if (age < 60) return age + 's ago';
+            var minutes = Math.floor(age/60);
+            if (minutes < 60) return minutes + 'm ago';
+            return Math.floor(minutes/60) + 'h ago';
+        };
+
+        self.lastSyncLabel = function () {
+            if (!self.lastSyncAt) return 'never';
+            var age = Math.round((Date.now() - self.lastSyncAt)/1000);
+            if (age < 5) return 'just now';
+            if (age < 60) return age + 's ago';
+            var minutes = Math.floor(age/60);
+            return minutes + 'm ago';
+        };
+
+        self.totalCount = function () { return (self.workers || []).length; };
+        self.availableCount = function () {
+            return (self.workers || []).filter(w => self.displayStatus(w) === 'available').length;
+        };
+        self.busyCount = function () {
+            return (self.workers || []).filter(w => self.displayStatus(w) === 'busy').length;
+        };
+        self.unavailableCount = function () {
+            return (self.workers || []).filter(w => self.displayStatus(w) === 'unavailable').length;
+        };
+        self.connectionLabel = function () {
+            if (self.wsState === 'connected') return 'Connected';
+            if (self.wsState === 'connecting') return 'Connecting';
+            if (self.wsState === 'error') return 'Error';
+            return 'Disconnected';
+        };
+
+        CODALAB.events.on('new_submission_created', function () {
+            self.update_competition_data();
+        });
     </script>
+
     <style type="text/stylus">
-        .comp-detail-paragraph-text
-            font-size 16px !important
-            line-height 20px !important
-        :scope
-            display block
-            width 100%
-            height 100%
-
-        .ui.inverted.table
-            background #44586b
-
-        .ui.modal
-            margin 20px
-
-        .ui.table
-            color $blue !important
-
-            thead > tr > th
-                color $blue !important
-                background-color $lightblue !important
+        .comp-detail-paragraph-text {
+            font-size: 16px !important;
+            line-height: 20px !important;
+        }
+        :scope { display: block; width: 100%; height: 100%; }
+        .layout { position: relative; display: block; }
+        .comp-content { min-width: 0; padding-right: 0; }
+
+        .workers-panel {
+            position: fixed;
+            top: 24px;
+            right: 24px;
+            width: 375px;
+            z-index: 25;
+            background: #fff;
+            overflow: auto;
+            max-height: calc(100vh - 48px);
+        }
+
+        .workers-card {
+            background: #fff;
+            border: 1px solid rgba(0,0,0,0.1);
+            border-radius: 16px;
+            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+            padding: 12px;
+        }
+        .workers-header { margin-bottom: 12px; }
+        .workers-title { display: flex; align-items: flex-start; gap: 10px; }
+        .workers-title .icon { margin-top: 2px; }
+        .workers-title-text { font-size: 18px; font-weight: 700; color: #1f2937; line-height: 1.2; }
+        .workers-subtitle {
+            margin-top: 4px;
+            font-size: 12px;
+            color: #6b7280;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .workers-toggle-btn
+            z-index 10
+            position relative
+            top 10%
+            right 100vh
+            background #576671 !important
+            color white !important
+            
+        .workers-connection {
+            display: inline-flex;
+            align-items: center;
+            padding: 3px 8px;
+            border-radius: 999px;
+            font-weight: 700;
+            font-size: 11px;
+            text-transform: uppercase;
+            background: #f3f4f6;
+            color: #6b7280;
+        }
+        .workers-connection.connected {
+            background: rgba(33,186,69,.12);
+            color: #21ba45;
+        }
+        .workers-connection.connecting {
+            background: rgba(251,189,8,.14);
+            color: #b58105;
+        }
+        .workers-connection.error {
+            background: rgba(219,40,40,.12);
+            color: #db2828;
+        }
+        .workers-connection.disconnected {
+            background: rgba(219,40,40,.12);
+            color: #db2828;
+        }
+        .workers-separator { opacity: .6; }
+        .workers-drag-hint { margin-top: 4px; font-size: 11px; color: #9ca3af; white-space: nowrap; }
+
+        .workers-stats {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 8px;
+            margin: 10px 0 15px 0 !important;
+        }
+        .stat-card {
+            background: #f9fafb;
+            border: 1px solid rgba(0,0,0,0.06);
+            border-radius: 12px;
+            padding: 10px 8px;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+        .stat-value {
+            font-size: 18px;
+            font-weight: 800;
+            color: #111827;
+            margin-bottom: 4px;
+            min-width: 1ch;
+        }
+        .stat-green { color: #21ba45; }
+        .stat-yellow { color: #b58105; }
+        .stat-red { color: #db2828; }
+        .stat-label {
+            font-size: 11px;
+            font-weight: 700;
+            text-transform: uppercase;
+            color: #6b7280;
+            letter-spacing: .04em;
+        }
+
+        .workers-table-wrap {
+            max-height: calc(100vh - 240px);
+            overflow: auto;
+            border-radius: 12px;
+        }
+        .workers-table {
+            margin: 0 !important;
+            width: 100%;
+            table-layout: auto;
+            font-size: 13px;
+        }
+        .workers-table thead th {
+            position: sticky;
+            top: 0;
+            background: #f8fafc !important;
+            color: #374151 !important;
+            font-weight: 700 !important;
+            font-size: 12px;
+            text-transform: uppercase;
+        }
+        .workers-table td, .workers-table th {
+            vertical-align: middle !important;
+        }
+        .worker-hostname {
+            font-size: 13px;
+            font-weight: 700;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .worker-jobs {
+            text-align: center;
+        }
+        .worker-lastseen {
+            color: #6b7280;
+            font-size: 12px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .worker-status {
+            border-radius: 999px !important;
+            font-weight: 700 !important;
+            display: inline-flex !important;
+            align-items: center;
+            gap: 6px;
+            white-space: nowrap;
+        }
+        .workers-empty {
+            padding: 24px 12px;
+            text-align: center;
+            color: #6b7280;
+        }
+        .workers-empty .header {
+            font-weight: 700;
+            color: #374151;
+            margin-bottom: 4px;
+        }
+        .workers-footer {
+            margin-top: 12px;
+            font-size: 12px;
+            color: #6b7280;
+        }
+        .ui.label.green {
+            background-color: #21ba45 !important;
+            color: white !important;
+        }
+        .ui.label.yellow {
+            background-color: #f2c037 !important;
+            color: black !important;
+        }
+        .ui.label.red {
+            background-color: #db2828 !important;
+            color: white !important;
+        }
+        body.workers-panel-dragging {
+            user-select: none;
+        }
+
+        @media (max-width: 1400px) {
+            .workers-panel {
+                position: static;
+                width: 100%;
+                max-height: none;
+                margin-top: 16px;
+            }
+            .workers-table-wrap {
+                max-height: none;
+            }
+        }
+        @media (max-width: 768px) {
+            .workers-stats {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
     </style>
 </competition-detail>
diff --git a/src/static/riot/competitions/detail/leaderboards.tag b/src/static/riot/competitions/detail/leaderboards.tag
index effe8899d..80af465c4 100644
--- a/src/static/riot/competitions/detail/leaderboards.tag
+++ b/src/static/riot/competitions/detail/leaderboards.tag
@@ -123,7 +123,6 @@
         self.total_pages = 1
         self.paginated_submissions = []
 
-
         self.get_page_size_value = function () {
             if (String(self.page_size).toLowerCase() === 'all') {
                 return self.total_count || 1
@@ -146,37 +145,54 @@
         }
 
         self.update_pagination = function () {
-            self.total_count = _.get(self.selected_leaderboard, 'submissions', []).length
+            var submissions = _.get(self.selected_leaderboard, 'submissions', [])
 
-            var page_size_value = self.get_page_size_value()
+            self.total_count = parseInt(_.get(self.selected_leaderboard, 'count', submissions.length), 10) || submissions.length
 
-            if (String(self.page_size).toLowerCase() === 'all') {
+            var raw_page_size = _.get(self.selected_leaderboard, 'page_size', self.page_size)
+
+            if (String(raw_page_size).toLowerCase() === 'all') {
+                self.page_size = 'all'
                 self.total_pages = 1
                 self.page = 1
-                self.paginated_submissions = _.get(self.selected_leaderboard, 'submissions', [])
-                return
-            }
+            } else {
+                var page_size_value = parseInt(raw_page_size, 10)
+                if (isNaN(page_size_value) || page_size_value <= 0) {
+                    page_size_value = self.get_page_size_value()
+                }
 
-            self.total_pages = Math.max(1, Math.ceil(self.total_count / page_size_value))
+                self.page_size = page_size_value
+                self.total_pages = Math.max(1, Math.ceil(self.total_count / page_size_value))
 
-            if (self.page > self.total_pages) {
-                self.page = self.total_pages
+                if (self.page > self.total_pages) {
+                    self.page = self.total_pages
+                }
             }
 
-            var start = (self.page - 1) * page_size_value
-            var end = start + page_size_value
-            self.paginated_submissions = _.slice(_.get(self.selected_leaderboard, 'submissions', []), start, end)
+            self.paginated_submissions = submissions
         }
 
         self.go_to_page = function (p) {
+            if (String(self.page_size).toLowerCase() === 'all') {
+                return
+            }
+
             var newPage = parseInt(p, 10)
             if (isNaN(newPage) || newPage < 1) newPage = 1
             if (newPage > self.total_pages) newPage = self.total_pages
             if (newPage === self.page) return
 
             self.page = newPage
-            self.update_pagination()
-            self.update()
+            self.update_leaderboard()
+        }
+
+        self.handle_page_enter = function (e) {
+            if (e.key !== 'Enter' && e.keyCode !== 13) {
+                return
+            }
+
+            e.preventDefault()
+            self.go_to_page(e.target.value)
         }
 
         self.change_page_size = function (e) {
@@ -194,8 +210,7 @@
             }
 
             self.page = 1
-            self.update_pagination()
-            self.update()
+            self.update_leaderboard()
         }
 
         self.pretty_date = function (date_string) {
@@ -211,22 +226,20 @@
             const dt = luxon.DateTime.fromISO(date_string)
             return dt.isValid ? dt.toMillis() : 0
         }
-       
+
         self.bold_class = function(column, submission){
-            // Return `text-bold` if submission has 
-            // more than one scores and score index  == leaderbaord.primary_index
-            // otherwise return empty string
-            return_class = '' // default class value
-            if(column.task_id != -1){ // factsheet check
-                if(submission.scores.length > 1){ // score length check
+            return_class = ''
+            if(column.task_id != -1){
+                if(submission.scores.length > 1){
                     let column_index = _.get(column, 'index')
-                    if(column_index === self.selected_leaderboard.primary_index){ // column index check
+                    if(column_index === self.selected_leaderboard.primary_index){
                         return_class = 'text-bold'
                     }
                 }
             }
             return return_class
         }
+
         self.get_score = function(column, submission) {
             if(column.task_id === -1){
                 return _.get(submission, 'fact_sheet_answers[' + column.key + ']', 'n/a')
@@ -239,7 +252,7 @@
             return 'n/a'
         }
 
-        self.on("mount" , function () {
+        self.on("mount", function () {
             this.refs.leaderboardFilter.onkeyup = function (e) {
                 self.filter_columns()
             }
@@ -251,96 +264,99 @@
 
         self.filter_columns = () => {
             let search_key = self.refs.leaderboardFilter.value.toLowerCase()
-            self.filtered_tasks = JSON.parse(JSON.stringify(self.selected_leaderboard.tasks))
-            if(search_key){
+            self.filtered_tasks = JSON.parse(JSON.stringify(self.selected_leaderboard.tasks || []))
+
+            if (search_key) {
                 self.filtered_columns = []
-                for (const column of self.columns){
-                    let key = column.key.toLowerCase()
-                    let title = column.title.toLowerCase()
-                    if((key.includes(search_key) || title.includes(search_key))) {
+                for (const column of self.columns) {
+                    let key = (column.key || '').toLowerCase()
+                    let title = (column.title || '').toLowerCase()
+                    if ((key.includes(search_key) || title.includes(search_key))) {
                         self.filtered_columns.push(column)
-                    }
-                    else {
+                    } else {
                         let task = _.find(self.filtered_tasks, {id: column.task_id})
-                        task.colWidth -= 1
+                        if (task) task.colWidth -= 1
                     }
                 }
                 self.filtered_tasks = self.filtered_tasks.filter(task => task.colWidth > 0)
             } else {
                 self.filtered_columns = self.columns
             }
+
             self.update()
         }
 
         self.update_leaderboard = () => {
-            CODALAB.api.get_leaderboard_for_render(self.phase_id)
-                .done(responseData => {
-                    self.selected_leaderboard = responseData
-                    self.columns = []
-                    // Make fake task and columns for Metadata so it can be filtered like columns
-                    if(self.selected_leaderboard.fact_sheet_keys){
-                        let fake_metadata_task = {
-                            id: -1,
-                            colWidth: self.selected_leaderboard.fact_sheet_keys.length,
-                            columns: [],
-                            name: "Fact Sheet Answers"
-                        }
-                        for(question of self.selected_leaderboard.fact_sheet_keys){
-                            fake_metadata_task.columns.push({
-                                key: question[0],
-                                title: question[1],
-                            })
-                        }
-                        self.selected_leaderboard.tasks.unshift(fake_metadata_task)
+            CODALAB.api.get_leaderboard_for_render(self.phase_id, {
+                page: self.page,
+                page_size: self.page_size
+            })
+            .done(responseData => {
+                self.selected_leaderboard = responseData
+                self.columns = []
+
+                if (self.selected_leaderboard.fact_sheet_keys) {
+                    let fake_metadata_task = {
+                        id: -1,
+                        colWidth: self.selected_leaderboard.fact_sheet_keys.length,
+                        columns: [],
+                        name: "Fact Sheet Answers"
                     }
-                    for(task of self.selected_leaderboard.tasks){
-
-                        for(column of task.columns){
-                            column.task_id = task.id
-                            self.columns.push(column)
-                        }
-                        // -1 id is used for fact sheet answers
-                        if(self.enable_detailed_results & self.show_detailed_results_in_leaderboard & task.id != -1){
-                            self.columns.push({
-                              task_id: task.id,
-                              title: "Detailed Results"
-                            })
-                            task.colWidth += 1
-                        }
+                    for (question of self.selected_leaderboard.fact_sheet_keys) {
+                        fake_metadata_task.columns.push({
+                            key: question[0],
+                            title: question[1],
+                        })
                     }
-                    self.filter_columns()
-                    self.update_pagination()
-                    $('#leaderboardTable').tablesort()
-                    self.update()
-                })
+                    self.selected_leaderboard.tasks.unshift(fake_metadata_task)
+                }
+
+                for (task of self.selected_leaderboard.tasks) {
+                    for (column of task.columns) {
+                        column.task_id = task.id
+                        self.columns.push(column)
+                    }
+                    if (self.enable_detailed_results & self.show_detailed_results_in_leaderboard & task.id != -1) {
+                        self.columns.push({
+                            task_id: task.id,
+                            title: "Detailed Results"
+                        })
+                        task.colWidth += 1
+                    }
+                }
+
+                self.filter_columns()
+                self.update_pagination()
+                $('#leaderboardTable').tablesort()
+                self.update()
+            })
         }
 
         self.get_detailed_result_submisison_id = function(column, submisison){
             for (index in submisison.detailed_results) {
-                if(column.task_id == submisison.detailed_results[index].task){
+                if (column.task_id == submisison.detailed_results[index].task) {
                     return submisison.detailed_results[index].id
                 }
             }
         }
 
-
         CODALAB.events.on('phase_selected', data => {
             self.phase_id = data.id
+            self.page = 1
             self.update_leaderboard()
         })
 
         CODALAB.events.on('competition_loaded', (competition) => {
             self.competition_id = competition.id
             self.participant_status = competition.participant_status
-            self.opts.is_admin ? self.show_download = "visible": self.show_download = "hidden"
+            self.opts.is_admin ? self.show_download = "visible" : self.show_download = "hidden"
             self.enable_detailed_results = competition.enable_detailed_results
             self.show_detailed_results_in_leaderboard = competition.show_detailed_results_in_leaderboard
-            
         })
 
         CODALAB.events.on('submission_changed_on_leaderboard', self.update_leaderboard)
-
     </script>
+    
     <style type="text/stylus">
         :scope
             display: block

From 6e2b1a62b7b456aa26e932309378c33b4f433e03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrien=20Pav=C3=A3o?= <adrien.pavao@gmail.com>
Date: Wed, 8 Apr 2026 13:37:14 +0200
Subject: [PATCH 4/4] Fix indent in competitions.py

---
 src/apps/api/views/competitions.py | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/apps/api/views/competitions.py b/src/apps/api/views/competitions.py
index 7ee468acf..53b9d2193 100644
--- a/src/apps/api/views/competitions.py
+++ b/src/apps/api/views/competitions.py
@@ -774,8 +774,14 @@ def rerun_submissions(self, request, pk):
     def get_leaderboard(self, request, pk):
         phase = self.get_object()
         if phase.competition.fact_sheet:
-            fact_sheet_keys = [(phase.competition.fact_sheet[question]['key'], phase.competition.fact_sheet[question]['title'])
-                            for question in phase.competition.fact_sheet if phase.competition.fact_sheet[question]['is_on_leaderboard'] == 'true']
+            fact_sheet_keys = [
+                (
+                    phase.competition.fact_sheet[question]['key'],
+                    phase.competition.fact_sheet[question]['title']
+                )
+                for question in phase.competition.fact_sheet
+                if phase.competition.fact_sheet[question]['is_on_leaderboard'] == 'true'
+            ]
         else:
             fact_sheet_keys = None