From 4545b009396b2af25bee1ab5a49e3f0435618733 Mon Sep 17 00:00:00 2001
From: Dave Verwer <dave.verwer@gmail.com>
Date: Wed, 17 Jul 2024 12:34:25 +0100
Subject: [PATCH 1/6] Basics of a front-end debug console.

---
 FrontEnd/main.scss                            |  1 +
 .../controllers/debug_console_controller.js   | 37 ++++++++++
 FrontEnd/scripts/controllers/index.js         |  2 +
 FrontEnd/styles/colors.scss                   |  8 +++
 FrontEnd/styles/debug_console.scss            | 69 +++++++++++++++++++
 .../Builds/BuildShow+View.swift               |  6 +-
 .../PackageController/PackageShow+View.swift  | 14 ++--
 Sources/App/Views/PublicPage.swift            | 60 +++++++++++++---
 8 files changed, 180 insertions(+), 17 deletions(-)
 create mode 100644 FrontEnd/scripts/controllers/debug_console_controller.js
 create mode 100644 FrontEnd/styles/debug_console.scss

diff --git a/FrontEnd/main.scss b/FrontEnd/main.scss
index aa4c05d54..9dd79faed 100644
--- a/FrontEnd/main.scss
+++ b/FrontEnd/main.scss
@@ -24,6 +24,7 @@ $mobile-breakpoint: 740px;
 @import 'styles/build_monitor';
 @import 'styles/colors';
 @import 'styles/copyable_input';
+@import 'styles/debug_console';
 @import 'styles/error';
 @import 'styles/github_highlighting';
 @import 'styles/header_footer';
diff --git a/FrontEnd/scripts/controllers/debug_console_controller.js b/FrontEnd/scripts/controllers/debug_console_controller.js
new file mode 100644
index 000000000..7e920a498
--- /dev/null
+++ b/FrontEnd/scripts/controllers/debug_console_controller.js
@@ -0,0 +1,37 @@
+// Copyright Dave Verwer, Sven A. Schmidt, and other contributors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Controller } from '@hotwired/stimulus'
+
+export class DebugConsoleController extends Controller {
+    connect() {
+        console.log('DebugConsoleController connected')
+
+        // Debug console is Hidden by default. Make it visble by typing:
+        //   `localStorage.setItem('spiDebug', 'true');`
+        // into the browser console.
+        if (localStorage.getItem('spiDebug') === 'true') {
+            this.element.classList.remove('hidden')
+        }
+    }
+
+    hide() {
+        this.element.classList.add('hidden')
+    }
+
+    disable() {
+        this.element.classList.add('hidden')
+        localStorage.setItem('spiDebug', 'false')
+    }
+}
diff --git a/FrontEnd/scripts/controllers/index.js b/FrontEnd/scripts/controllers/index.js
index fb8c95cb6..82825054d 100644
--- a/FrontEnd/scripts/controllers/index.js
+++ b/FrontEnd/scripts/controllers/index.js
@@ -21,6 +21,7 @@ import { PanelButtonController } from './panel_button_controller.js'
 import { UseThisPackagePanelController } from './use_this_package_panel_controller.js'
 import { BlogController } from './blog_controller.js'
 import { VegaChartController } from './vega_chart_controller.js'
+import { DebugConsoleController } from './debug_console_controller.js'
 
 const application = Application.start()
 application.register('overflowing-list', OverflowingListController)
@@ -31,3 +32,4 @@ application.register('panel-button', PanelButtonController)
 application.register('use-this-package-panel', UseThisPackagePanelController)
 application.register('blog', BlogController)
 application.register('vega-chart', VegaChartController)
+application.register('debug-console', DebugConsoleController)
diff --git a/FrontEnd/styles/colors.scss b/FrontEnd/styles/colors.scss
index d013ecefd..5d27d3c30 100644
--- a/FrontEnd/styles/colors.scss
+++ b/FrontEnd/styles/colors.scss
@@ -187,6 +187,10 @@
     --avatar-shadow: 0 2px 2px 3px rgba(0, 0, 0, 5%);
 
     --rss-subscribe-color: var(--orange);
+
+    --debug-console-background: var(--light-blue);
+    --debug-console-border: var(--grey);
+    --debug-console-button-hover: var(--light-grey);
 }
 
 // Dark mode.
@@ -309,5 +313,9 @@
             rgba(25, 25, 35, 0%) 50%,
             rgba(25, 25, 35, 100%) 100%
         );
+
+        --debug-console-background: var(--dark-blue);
+        --debug-console-border: var(--light-grey);
+        --debug-console-button-hover: var(--dark-grey);
     }
 }
diff --git a/FrontEnd/styles/debug_console.scss b/FrontEnd/styles/debug_console.scss
new file mode 100644
index 000000000..2d3aa13cc
--- /dev/null
+++ b/FrontEnd/styles/debug_console.scss
@@ -0,0 +1,69 @@
+// Copyright Dave Verwer, Sven A. Schmidt, and other contributors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// -------------------------------------------------------------------------
+// Front End Debug Console
+// -------------------------------------------------------------------------
+
+[data-controller='debug-console'] {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    overflow-y: auto;
+    max-height: 500px;
+    min-height: 100px;
+    background-color: var(--debug-console-background);
+    border-top: 1px solid var(--debug-console-border);
+
+    h3 {
+        margin: 5px;
+    }
+
+    .buttons {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        gap: 10px;
+        padding: 5px;
+
+        button {
+            cursor: pointer;
+            padding: 2px 6px;
+            font-size: 10px;
+            color: var(--page-text);
+            background: none;
+            border: none;
+            border: 1px solid var(--debug-console-border);
+            border-radius: 50px;
+
+            &:hover {
+                background-color: var(--debug-console-button-hover);
+            }
+        }
+    }
+
+    [data-debug-console-target='data-grid'] {
+        display: grid;
+        grid-template-columns: 1fr 10fr;
+        padding: 5px;
+        font-size: 13px;
+
+        > *:nth-child(odd) {
+            font-weight: 600;
+        }
+    }
+}
diff --git a/Sources/App/Views/PackageController/Builds/BuildShow+View.swift b/Sources/App/Views/PackageController/Builds/BuildShow+View.swift
index 4fe92c0f1..5079236d7 100644
--- a/Sources/App/Views/PackageController/Builds/BuildShow+View.swift
+++ b/Sources/App/Views/PackageController/Builds/BuildShow+View.swift
@@ -41,8 +41,10 @@ enum BuildShow {
             "Compatibility information for \(model.packageName). Check compatibility with \(model.buildInfo.swiftVersion.longDisplayName) on \(model.buildInfo.platform.displayName) with full build logs."
         }
 
-        override func bodyComments() -> Node<HTML.BodyContext> {
-            .comment(model.versionId.uuidString)
+        override func frontEndDebugConsoleData() -> [PublicPage.DebugConsoleDataItem] {
+            [
+                .init(title: "Version ID", value: model.versionId.uuidString)
+            ]
         }
 
         override func breadcrumbs() -> [Breadcrumb] {
diff --git a/Sources/App/Views/PackageController/PackageShow+View.swift b/Sources/App/Views/PackageController/PackageShow+View.swift
index 320cd3f2a..d34d7e74e 100644
--- a/Sources/App/Views/PackageController/PackageShow+View.swift
+++ b/Sources/App/Views/PackageController/PackageShow+View.swift
@@ -51,13 +51,6 @@ extension PackageShow {
             "package"
         }
 
-        override func bodyComments() -> Node<HTML.BodyContext> {
-            .group(
-                .comment(model.packageId.uuidString),
-                .comment(model.score.map(String.init) ?? "unknown")
-            )
-        }
-
         override func breadcrumbs() -> [Breadcrumb] {
             [
                 Breadcrumb(title: "Home", url: SiteURL.home.relativeURL()),
@@ -72,6 +65,13 @@ extension PackageShow {
             }
         }
 
+        override func frontEndDebugConsoleData() -> [PublicPage.DebugConsoleDataItem] {
+            [
+                .init(title: "Package ID", value: model.packageId.uuidString),
+                .init(title: "Score", value: model.score.map(String.init) ?? "No score.")
+            ]
+        }
+
         override func content() -> Node<HTML.BodyContext> {
             .group(
                 .div(
diff --git a/Sources/App/Views/PublicPage.swift b/Sources/App/Views/PublicPage.swift
index 2b56bb72a..ce47945bb 100644
--- a/Sources/App/Views/PublicPage.swift
+++ b/Sources/App/Views/PublicPage.swift
@@ -238,7 +238,6 @@ class PublicPage {
             .class(bodyClass() ?? ""),
             .forEach(bodyAttributes(), { .attribute($0) }),
             preBody(),
-            bodyComments(),
             stagingBanner(),
             header(),
             announcementBanner(),
@@ -248,16 +247,11 @@ class PublicPage {
             postMain(),
             footer(),
             stagingBanner(),
-            postBody()
+            postBody(),
+            frontEndDebugConsole()
         )
     }
 
-    /// Any page level HTML comments for hidden metadata.
-    /// - Returns: An element, or `group` of elements.
-    func bodyComments() -> Node<HTML.BodyContext> {
-        .empty
-    }
-
     /// A staging banner, which only appears on the staging/development server.
     /// - Returns: Either a <div> element, or nothing.
     final func stagingBanner() -> Node<HTML.BodyContext> {
@@ -458,6 +452,49 @@ class PublicPage {
         )
     }
 
+    /// Output a hidden-by-default panel on the page showing useful debug information
+    /// - Returns: The HTML for the debug console element.
+    final func frontEndDebugConsole() -> Node<HTML.BodyContext> {
+        .div(
+            .class("hidden"),
+            .data(named: "controller", value: "debug-console"),
+            .div(
+                .class("buttons"),
+                .button(
+                    .text("Hide"),
+                    .title("Temporarily hide this panel"),
+                    .data(named: "action", value: "click->debug-console#hide")
+                ),
+                .button(
+                    .text("Disable"),
+                    .title("Disable the debug console"),
+                    .data(named: "action", value: "click->debug-console#disable")
+                )
+            ),
+            .h3("Debugging information"),
+            .section(
+                .data(named: "debug-console-target", value: "data-grid"),
+                .group(
+                    frontEndDebugConsoleData().map({ dataItem -> Node<HTML.BodyContext> in
+                            .group(
+                                .div(
+                                    .text(dataItem.title)
+                                ),
+                                .div(
+                                    .text(dataItem.value)
+                                )
+                            )
+                    })
+                )
+            )
+        )
+    }
+
+    /// Returns the debug information that a page would like to show in the front-end debug console.
+    /// - Returns: An array of `DebugConsoleDataItem` structs that will be displayed by `frontEndDebugConsole()`.
+    func frontEndDebugConsoleData() -> [DebugConsoleDataItem] {
+        []
+    }
 }
 
 extension PublicPage {
@@ -468,3 +505,10 @@ extension PublicPage {
     }
 
 }
+
+extension PublicPage {
+    struct DebugConsoleDataItem {
+        var title: String
+        var value: String
+    }
+}

From 9d5d70778ce93078dea6d3ca24cc3c76cbe76e5b Mon Sep 17 00:00:00 2001
From: Dave Verwer <dave.verwer@gmail.com>
Date: Wed, 17 Jul 2024 13:01:24 +0100
Subject: [PATCH 2/6] Added canonical and window URL information.

---
 .../controllers/debug_console_controller.js   | 26 +++++++++++++++++--
 FrontEnd/styles/debug_console.scss            | 11 +++-----
 Sources/App/Views/PublicPage.swift            |  3 +--
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/FrontEnd/scripts/controllers/debug_console_controller.js b/FrontEnd/scripts/controllers/debug_console_controller.js
index 7e920a498..8355d09d4 100644
--- a/FrontEnd/scripts/controllers/debug_console_controller.js
+++ b/FrontEnd/scripts/controllers/debug_console_controller.js
@@ -15,14 +15,16 @@
 import { Controller } from '@hotwired/stimulus'
 
 export class DebugConsoleController extends Controller {
-    connect() {
-        console.log('DebugConsoleController connected')
+    static targets = ['grid']
 
+    connect() {
         // Debug console is Hidden by default. Make it visble by typing:
         //   `localStorage.setItem('spiDebug', 'true');`
         // into the browser console.
         if (localStorage.getItem('spiDebug') === 'true') {
             this.element.classList.remove('hidden')
+
+            this.addCanonicalUrls()
         }
     }
 
@@ -34,4 +36,24 @@ export class DebugConsoleController extends Controller {
         this.element.classList.add('hidden')
         localStorage.setItem('spiDebug', 'false')
     }
+
+    newGridCell(contents) {
+        const cellElement = document.createElement('div')
+        cellElement.innerText = contents
+        return cellElement
+    }
+
+    addCanonicalUrls() {
+        const canonicalUrl = document.querySelector('link[rel="canonical"]').href
+        const windowUrl = window.location.href
+
+        this.gridTarget.appendChild(this.newGridCell('Canonical URL'))
+        this.gridTarget.appendChild(this.newGridCell(canonicalUrl))
+
+        this.gridTarget.appendChild(this.newGridCell('Window URL'))
+        this.gridTarget.appendChild(this.newGridCell(windowUrl))
+
+        this.gridTarget.appendChild(this.newGridCell('URLs Match'))
+        this.gridTarget.appendChild(this.newGridCell(canonicalUrl === windowUrl))
+    }
 }
diff --git a/FrontEnd/styles/debug_console.scss b/FrontEnd/styles/debug_console.scss
index 2d3aa13cc..8811c2e60 100644
--- a/FrontEnd/styles/debug_console.scss
+++ b/FrontEnd/styles/debug_console.scss
@@ -28,10 +28,6 @@
     background-color: var(--debug-console-background);
     border-top: 1px solid var(--debug-console-border);
 
-    h3 {
-        margin: 5px;
-    }
-
     .buttons {
         position: absolute;
         top: 0;
@@ -56,14 +52,15 @@
         }
     }
 
-    [data-debug-console-target='data-grid'] {
+    [data-debug-console-target='grid'] {
         display: grid;
-        grid-template-columns: 1fr 10fr;
+        grid-template-columns: min-content 1fr;
+        gap: 3px 20px;
         padding: 5px;
-        font-size: 13px;
 
         > *:nth-child(odd) {
             font-weight: 600;
+            white-space: nowrap;
         }
     }
 }
diff --git a/Sources/App/Views/PublicPage.swift b/Sources/App/Views/PublicPage.swift
index ce47945bb..a0309e39a 100644
--- a/Sources/App/Views/PublicPage.swift
+++ b/Sources/App/Views/PublicPage.swift
@@ -471,9 +471,8 @@ class PublicPage {
                     .data(named: "action", value: "click->debug-console#disable")
                 )
             ),
-            .h3("Debugging information"),
             .section(
-                .data(named: "debug-console-target", value: "data-grid"),
+                .data(named: "debug-console-target", value: "grid"),
                 .group(
                     frontEndDebugConsoleData().map({ dataItem -> Node<HTML.BodyContext> in
                             .group(

From 8b944e3b20c9a25f5358accfadb5af55e35bde87 Mon Sep 17 00:00:00 2001
From: Dave Verwer <dave.verwer@gmail.com>
Date: Wed, 17 Jul 2024 18:11:57 +0100
Subject: [PATCH 3/6] Shared between main site and documentation pages.

---
 .gitignore                                    |  4 ++
 FrontEnd/docc.scss                            |  3 -
 FrontEnd/esbuild.mjs                          |  8 ++-
 FrontEnd/main.scss                            |  4 +-
 .../controllers/debug_console_controller.js   | 59 ------------------
 FrontEnd/scripts/controllers/index.js         |  2 -
 FrontEnd/scripts/debug_panel.js               | 62 +++++++++++++++++++
 FrontEnd/shared.js                            | 19 ++++++
 FrontEnd/shared.scss                          | 22 +++++++
 FrontEnd/styles/base.scss                     |  9 ---
 .../{debug_console.scss => debug_panel.scss}  |  6 +-
 FrontEnd/styles/utility.scss                  | 26 ++++++++
 .../Views/DocumentationPageProcessor.swift    | 26 ++++++--
 Sources/App/Views/Plot+Extensions.swift       | 35 +++++++++++
 Sources/App/Views/PublicPage.swift            | 43 ++++---------
 15 files changed, 211 insertions(+), 117 deletions(-)
 delete mode 100644 FrontEnd/scripts/controllers/debug_console_controller.js
 create mode 100644 FrontEnd/scripts/debug_panel.js
 create mode 100644 FrontEnd/shared.js
 create mode 100644 FrontEnd/shared.scss
 rename FrontEnd/styles/{debug_console.scss => debug_panel.scss} (94%)
 create mode 100644 FrontEnd/styles/utility.scss

diff --git a/.gitignore b/.gitignore
index cb925c764..89f676831 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,8 +18,12 @@ node_modules
 .parcel-cache
 Public/main.js
 Public/main.js.map
+Public/shared.js
+Public/shared.js.map
 Public/main.css
 Public/main.css.map
+Public/shared.css
+Public/shared.css.map
 Public/docc.css
 Public/docc.css.map
 Tests/AppTests/__Snapshots__/WebpageSnapshotTests/*
diff --git a/FrontEnd/docc.scss b/FrontEnd/docc.scss
index 6f2285146..4e594d259 100644
--- a/FrontEnd/docc.scss
+++ b/FrontEnd/docc.scss
@@ -18,9 +18,6 @@
 
 $mobile-breakpoint: 740px;
 
-@import 'styles/colors';
-@import 'styles/images';
-
 header.spi,
 footer.spi {
     position: sticky;
diff --git a/FrontEnd/esbuild.mjs b/FrontEnd/esbuild.mjs
index b23db5090..00038f3f4 100755
--- a/FrontEnd/esbuild.mjs
+++ b/FrontEnd/esbuild.mjs
@@ -17,7 +17,13 @@ import { sassPlugin } from 'esbuild-sass-plugin'
 
 try {
     const context = await esbuild.context({
-        entryPoints: ['FrontEnd/main.js', 'FrontEnd/main.scss', 'FrontEnd/docc.scss'],
+        entryPoints: [
+            'FrontEnd/main.js',
+            'FrontEnd/shared.js',
+            'FrontEnd/main.scss',
+            'FrontEnd/docc.scss',
+            'FrontEnd/shared.scss',
+        ],
         outdir: 'Public',
         bundle: true,
         sourcemap: true,
diff --git a/FrontEnd/main.scss b/FrontEnd/main.scss
index 9dd79faed..4b9ac8b14 100644
--- a/FrontEnd/main.scss
+++ b/FrontEnd/main.scss
@@ -22,14 +22,11 @@ $mobile-breakpoint: 740px;
 @import 'styles/breadcrumbs';
 @import 'styles/build_logs';
 @import 'styles/build_monitor';
-@import 'styles/colors';
 @import 'styles/copyable_input';
-@import 'styles/debug_console';
 @import 'styles/error';
 @import 'styles/github_highlighting';
 @import 'styles/header_footer';
 @import 'styles/home';
-@import 'styles/images';
 @import 'styles/keywords';
 @import 'styles/layout';
 @import 'styles/maintainer_info';
@@ -46,5 +43,6 @@ $mobile-breakpoint: 740px;
 @import 'styles/spinner';
 @import 'styles/supporters';
 @import 'styles/tab_bar';
+@import 'styles/utility';
 @import 'styles/validate_manifest';
 @import 'styles/vega_charts';
diff --git a/FrontEnd/scripts/controllers/debug_console_controller.js b/FrontEnd/scripts/controllers/debug_console_controller.js
deleted file mode 100644
index 8355d09d4..000000000
--- a/FrontEnd/scripts/controllers/debug_console_controller.js
+++ /dev/null
@@ -1,59 +0,0 @@
-// Copyright Dave Verwer, Sven A. Schmidt, and other contributors.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { Controller } from '@hotwired/stimulus'
-
-export class DebugConsoleController extends Controller {
-    static targets = ['grid']
-
-    connect() {
-        // Debug console is Hidden by default. Make it visble by typing:
-        //   `localStorage.setItem('spiDebug', 'true');`
-        // into the browser console.
-        if (localStorage.getItem('spiDebug') === 'true') {
-            this.element.classList.remove('hidden')
-
-            this.addCanonicalUrls()
-        }
-    }
-
-    hide() {
-        this.element.classList.add('hidden')
-    }
-
-    disable() {
-        this.element.classList.add('hidden')
-        localStorage.setItem('spiDebug', 'false')
-    }
-
-    newGridCell(contents) {
-        const cellElement = document.createElement('div')
-        cellElement.innerText = contents
-        return cellElement
-    }
-
-    addCanonicalUrls() {
-        const canonicalUrl = document.querySelector('link[rel="canonical"]').href
-        const windowUrl = window.location.href
-
-        this.gridTarget.appendChild(this.newGridCell('Canonical URL'))
-        this.gridTarget.appendChild(this.newGridCell(canonicalUrl))
-
-        this.gridTarget.appendChild(this.newGridCell('Window URL'))
-        this.gridTarget.appendChild(this.newGridCell(windowUrl))
-
-        this.gridTarget.appendChild(this.newGridCell('URLs Match'))
-        this.gridTarget.appendChild(this.newGridCell(canonicalUrl === windowUrl))
-    }
-}
diff --git a/FrontEnd/scripts/controllers/index.js b/FrontEnd/scripts/controllers/index.js
index 82825054d..fb8c95cb6 100644
--- a/FrontEnd/scripts/controllers/index.js
+++ b/FrontEnd/scripts/controllers/index.js
@@ -21,7 +21,6 @@ import { PanelButtonController } from './panel_button_controller.js'
 import { UseThisPackagePanelController } from './use_this_package_panel_controller.js'
 import { BlogController } from './blog_controller.js'
 import { VegaChartController } from './vega_chart_controller.js'
-import { DebugConsoleController } from './debug_console_controller.js'
 
 const application = Application.start()
 application.register('overflowing-list', OverflowingListController)
@@ -32,4 +31,3 @@ application.register('panel-button', PanelButtonController)
 application.register('use-this-package-panel', UseThisPackagePanelController)
 application.register('blog', BlogController)
 application.register('vega-chart', VegaChartController)
-application.register('debug-console', DebugConsoleController)
diff --git a/FrontEnd/scripts/debug_panel.js b/FrontEnd/scripts/debug_panel.js
new file mode 100644
index 000000000..3d530fe0c
--- /dev/null
+++ b/FrontEnd/scripts/debug_panel.js
@@ -0,0 +1,62 @@
+// Copyright Dave Verwer, Sven A. Schmidt, and other contributors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+export class SPIDebugPanel extends HTMLElement {
+    connectedCallback() {
+        // Debug console is Hidden by default. Make it visble by typing:
+        //   `localStorage.setItem('spiDebug', 'true');`
+        // into the browser console.
+        if (localStorage.getItem('spiDebug') === 'true') {
+            this.classList.remove('hidden')
+            this.addCanonicalUrls()
+        }
+
+        this.querySelector('.buttons > .hide').addEventListener('click', () => {
+            this.classList.add('hidden')
+        })
+
+        this.querySelector('.buttons > .disable').addEventListener('click', () => {
+            this.classList.add('hidden')
+            localStorage.setItem('spiDebug', 'false')
+        })
+    }
+
+    disconnectedCallback() {
+        console.log('SPIDebugPanel disconnectedCallback')
+    }
+
+    newTableRow(title, value) {
+        const rowElement = document.createElement('tr')
+
+        const titleCellElement = document.createElement('td')
+        titleCellElement.innerText = title
+
+        const valueCellElement = document.createElement('td')
+        valueCellElement.innerText = value
+
+        rowElement.appendChild(titleCellElement)
+        rowElement.appendChild(valueCellElement)
+        return rowElement
+    }
+
+    addCanonicalUrls() {
+        const tableElement = this.querySelector('table')
+        const canonicalUrl = document.querySelector('link[rel="canonical"]').href
+        const windowUrl = window.location.href
+
+        tableElement.appendChild(this.newTableRow('Canonical URL', canonicalUrl))
+        tableElement.appendChild(this.newTableRow('Window URL', windowUrl))
+        tableElement.appendChild(this.newTableRow('URLs Match', canonicalUrl === windowUrl))
+    }
+}
diff --git a/FrontEnd/shared.js b/FrontEnd/shared.js
new file mode 100644
index 000000000..d7781af4f
--- /dev/null
+++ b/FrontEnd/shared.js
@@ -0,0 +1,19 @@
+// Copyright Dave Verwer, Sven A. Schmidt, and other contributors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { SPIDebugPanel } from './scripts/debug_panel.js'
+
+customElements.define('spi-debug-panel', SPIDebugPanel)
+
+//# sourceMappingURL=shared.js.map
diff --git a/FrontEnd/shared.scss b/FrontEnd/shared.scss
new file mode 100644
index 000000000..6074dd7bf
--- /dev/null
+++ b/FrontEnd/shared.scss
@@ -0,0 +1,22 @@
+// Copyright Dave Verwer, Sven A. Schmidt, and other contributors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// -------------------------------------------------------------------------
+// Any styles shared between SPI and the SPI documentation pages.
+// -------------------------------------------------------------------------
+
+@import 'styles/colors';
+@import 'styles/utility';
+@import 'styles/debug_panel';
+@import 'styles/images';
diff --git a/FrontEnd/styles/base.scss b/FrontEnd/styles/base.scss
index 3495d2f01..ec67efc9f 100644
--- a/FrontEnd/styles/base.scss
+++ b/FrontEnd/styles/base.scss
@@ -226,15 +226,6 @@ a.big-button {
     background-color: var(--announcement-background);
 }
 
-.hidden {
-    display: none;
-}
-
-.trimmed {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
 .count-tag {
     padding: 1px 5px;
     font-size: 10px;
diff --git a/FrontEnd/styles/debug_console.scss b/FrontEnd/styles/debug_panel.scss
similarity index 94%
rename from FrontEnd/styles/debug_console.scss
rename to FrontEnd/styles/debug_panel.scss
index 8811c2e60..0938dd3cb 100644
--- a/FrontEnd/styles/debug_console.scss
+++ b/FrontEnd/styles/debug_panel.scss
@@ -13,10 +13,10 @@
 // limitations under the License.
 
 // -------------------------------------------------------------------------
-// Front End Debug Console
+// Debug console panel shared between the site and documentation.
 // -------------------------------------------------------------------------
 
-[data-controller='debug-console'] {
+spi-debug-panel {
     position: fixed;
     bottom: 0;
     left: 0;
@@ -58,7 +58,7 @@
         gap: 3px 20px;
         padding: 5px;
 
-        > *:nth-child(odd) {
+        tr > td:first-child {
             font-weight: 600;
             white-space: nowrap;
         }
diff --git a/FrontEnd/styles/utility.scss b/FrontEnd/styles/utility.scss
new file mode 100644
index 000000000..7087304e9
--- /dev/null
+++ b/FrontEnd/styles/utility.scss
@@ -0,0 +1,26 @@
+// Copyright Dave Verwer, Sven A. Schmidt, and other contributors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// -------------------------------------------------------------------------
+// Shared utility styles.
+// -------------------------------------------------------------------------
+
+.hidden {
+    display: none;
+}
+
+.trimmed {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
diff --git a/Sources/App/Views/DocumentationPageProcessor.swift b/Sources/App/Views/DocumentationPageProcessor.swift
index 1db163505..5189b5b0f 100644
--- a/Sources/App/Views/DocumentationPageProcessor.swift
+++ b/Sources/App/Views/DocumentationPageProcessor.swift
@@ -79,7 +79,8 @@ struct DocumentationPageProcessor {
             if let metaNoIndex = self.metaNoIndex {
                 try document.head()?.prepend(metaNoIndex)
             }
-            try document.head()?.append(self.stylesheetLink)
+            try document.head()?.append(self.stylesheetLinks)
+            try document.head()?.append(self.javascriptLinks)
             if let canonicalUrl = self.canonicalUrl {
                 try document.head()?.append(
                     // We should not use `url` here as some of the DocC JavaScript lowercases
@@ -93,6 +94,7 @@ struct DocumentationPageProcessor {
             }
             try document.body()?.prepend(self.header)
             try document.body()?.append(self.footer)
+            try document.body()?.append(self.frontEndDebugPanel)
             if let analyticsScript = self.analyticsScript {
                 try document.head()?.append(analyticsScript)
             }
@@ -109,10 +111,20 @@ struct DocumentationPageProcessor {
         ).render()
     }
 
-    var stylesheetLink: String {
-        Plot.Node.link(
-            .rel(.stylesheet),
-            .href(SiteURL.stylesheets("docc").relativeURL() + "?" + ResourceReloadIdentifier.value)
+    var stylesheetLinks: String {
+        Plot.Node.group(["docc", "shared"].map { stylesheetName -> Plot.Node<HTML.HeadContext> in
+                .link(
+                    .rel(.stylesheet),
+                    .href(SiteURL.stylesheets(stylesheetName).relativeURL() + "?" + ResourceReloadIdentifier.value)
+                )
+        }).render()
+    }
+
+    var javascriptLinks: String {
+        Plot.Node<HTML.HeadContext>.script(
+            .src(SiteURL.javascripts("shared").relativeURL() + "?" + ResourceReloadIdentifier.value),
+            .data(named: "turbolinks-track", value: "reload"),
+            .defer()
         ).render()
     }
 
@@ -280,6 +292,10 @@ struct DocumentationPageProcessor {
         ).render()
     }
 
+    var frontEndDebugPanel: String {
+        Plot.Node<HTML.BodyContext>.spiFrontEndDebugConsole(dataItems: []).render()
+    }
+
     var processedPage: String {
         do {
             return try document.html()
diff --git a/Sources/App/Views/Plot+Extensions.swift b/Sources/App/Views/Plot+Extensions.swift
index 2dd366e84..92d43cdab 100644
--- a/Sources/App/Views/Plot+Extensions.swift
+++ b/Sources/App/Views/Plot+Extensions.swift
@@ -206,6 +206,41 @@ extension Node where Context: HTML.BodyContext {
             )
         )
     }
+
+    static func spiFrontEndDebugConsole(dataItems: [PublicPage.DebugConsoleDataItem]) -> Node<HTML.BodyContext> {
+        .element(named: "spi-debug-panel", nodes: [
+            .class("hidden"),
+            .div(
+                .class("buttons"),
+                .button(
+                    .class("hide"),
+                    .text("Hide"),
+                    .title("Temporarily hide this panel")
+                ),
+                .button(
+                    .class("disable"),
+                    .text("Disable"),
+                    .title("Disable the debug console")
+                )
+            ),
+            .table(
+                .class("grid"),
+                .group(
+                    dataItems.map({ dataItem -> Node<HTML.TableContext> in
+                            .tr(
+                                .class("server-side"),
+                                .td(
+                                    .text(dataItem.title)
+                                ),
+                                .td(
+                                    .text(dataItem.value)
+                                )
+                            )
+                    })
+                )
+            )
+        ])
+    }
 }
 
 extension Node where Context == HTML.FormContext {
diff --git a/Sources/App/Views/PublicPage.swift b/Sources/App/Views/PublicPage.swift
index a0309e39a..2cf04ac41 100644
--- a/Sources/App/Views/PublicPage.swift
+++ b/Sources/App/Views/PublicPage.swift
@@ -52,6 +52,11 @@ class PublicPage {
             .socialImageLink(SiteURL.images("logo.png").absoluteURL()),
             .favicon(SiteURL.images("logo-tiny.png").relativeURL()),
             rssFeeds(),
+            .link(
+                .rel(.stylesheet),
+                .href(SiteURL.stylesheets("shared").relativeURL() + "?" + ResourceReloadIdentifier.value),
+                .data(named: "turbolinks-track", value: "reload")
+            ),
             .link(
                 .rel(.stylesheet),
                 .href(SiteURL.stylesheets("main").relativeURL() + "?" + ResourceReloadIdentifier.value),
@@ -62,6 +67,11 @@ class PublicPage {
                 .data(named: "turbolinks-track", value: "reload"),
                 .defer()
             ),
+            .script(
+                .src(SiteURL.javascripts("shared").relativeURL() + "?" + ResourceReloadIdentifier.value),
+                .data(named: "turbolinks-track", value: "reload"),
+                .defer()
+            ),
             analyticsHead(),
             postHead()
         )
@@ -455,38 +465,7 @@ class PublicPage {
     /// Output a hidden-by-default panel on the page showing useful debug information
     /// - Returns: The HTML for the debug console element.
     final func frontEndDebugConsole() -> Node<HTML.BodyContext> {
-        .div(
-            .class("hidden"),
-            .data(named: "controller", value: "debug-console"),
-            .div(
-                .class("buttons"),
-                .button(
-                    .text("Hide"),
-                    .title("Temporarily hide this panel"),
-                    .data(named: "action", value: "click->debug-console#hide")
-                ),
-                .button(
-                    .text("Disable"),
-                    .title("Disable the debug console"),
-                    .data(named: "action", value: "click->debug-console#disable")
-                )
-            ),
-            .section(
-                .data(named: "debug-console-target", value: "grid"),
-                .group(
-                    frontEndDebugConsoleData().map({ dataItem -> Node<HTML.BodyContext> in
-                            .group(
-                                .div(
-                                    .text(dataItem.title)
-                                ),
-                                .div(
-                                    .text(dataItem.value)
-                                )
-                            )
-                    })
-                )
-            )
-        )
+        .spiFrontEndDebugConsole(dataItems: frontEndDebugConsoleData())
     }
 
     /// Returns the debug information that a page would like to show in the front-end debug console.

From 70e7fc3a2d262370e01ecb52b3c7d8493561346c Mon Sep 17 00:00:00 2001
From: Dave Verwer <dave.verwer@gmail.com>
Date: Wed, 17 Jul 2024 18:54:07 +0100
Subject: [PATCH 4/6] Use a table instead of divs, and get styling correct.

---
 FrontEnd/scripts/debug_panel.js               | 55 ++++++++++++++-----
 FrontEnd/styles/debug_panel.scss              | 41 +++++++++++---
 .../Views/DocumentationPageProcessor.swift    |  2 +-
 Sources/App/Views/Plot+Extensions.swift       | 40 +++++---------
 Sources/App/Views/PublicPage.swift            |  2 +-
 5 files changed, 90 insertions(+), 50 deletions(-)

diff --git a/FrontEnd/scripts/debug_panel.js b/FrontEnd/scripts/debug_panel.js
index 3d530fe0c..33cd70d78 100644
--- a/FrontEnd/scripts/debug_panel.js
+++ b/FrontEnd/scripts/debug_panel.js
@@ -19,44 +19,73 @@ export class SPIDebugPanel extends HTMLElement {
         // into the browser console.
         if (localStorage.getItem('spiDebug') === 'true') {
             this.classList.remove('hidden')
+
+            this.reset()
+            this.addButtons()
             this.addCanonicalUrls()
         }
+    }
+
+    disconnectedCallback() {
+        console.log('SPIDebugPanel disconnectedCallback')
+    }
+
+    reset() {
+        const buttonsContainer = this.querySelector('.buttons')
+        if (buttonsContainer) buttonsContainer.remove()
 
-        this.querySelector('.buttons > .hide').addEventListener('click', () => {
+        const dynamicRowElements = this.querySelectorAll('tr:not([server-side])')
+        dynamicRowElements.forEach((row) => row.remove())
+    }
+
+    addButtons() {
+        const hideButton = document.createElement('button')
+        hideButton.innerText = 'Hide'
+        hideButton.title = 'Temporarily hide this panel'
+        hideButton.addEventListener('click', () => {
             this.classList.add('hidden')
         })
 
-        this.querySelector('.buttons > .disable').addEventListener('click', () => {
-            this.classList.add('hidden')
+        const disableButton = document.createElement('button')
+        disableButton.innerText = 'Disable'
+        disableButton.title = 'Disable the debug panel'
+        disableButton.addEventListener('click', () => {
             localStorage.setItem('spiDebug', 'false')
+            this.classList.add('hidden')
         })
-    }
 
-    disconnectedCallback() {
-        console.log('SPIDebugPanel disconnectedCallback')
+        const buttonsContainer = document.createElement('div')
+        buttonsContainer.classList.add('buttons')
+        buttonsContainer.appendChild(hideButton)
+        buttonsContainer.appendChild(disableButton)
+        this.prepend(buttonsContainer)
     }
 
-    newTableRow(title, value) {
+    newTableRow(title, value, valueCssClass) {
+        const tableElement = this.querySelector('table > tbody')
         const rowElement = document.createElement('tr')
 
         const titleCellElement = document.createElement('td')
         titleCellElement.innerText = title
 
+        const valueSpanElement = document.createElement('span')
+        valueSpanElement.innerText = value
         const valueCellElement = document.createElement('td')
-        valueCellElement.innerText = value
+        valueCellElement.appendChild(valueSpanElement)
+        if (valueCssClass) valueCellElement.classList.add(valueCssClass)
 
         rowElement.appendChild(titleCellElement)
         rowElement.appendChild(valueCellElement)
-        return rowElement
+        tableElement.appendChild(rowElement)
     }
 
     addCanonicalUrls() {
-        const tableElement = this.querySelector('table')
         const canonicalUrl = document.querySelector('link[rel="canonical"]').href
         const windowUrl = window.location.href
+        const matchingCanonicalUrl = canonicalUrl === windowUrl
 
-        tableElement.appendChild(this.newTableRow('Canonical URL', canonicalUrl))
-        tableElement.appendChild(this.newTableRow('Window URL', windowUrl))
-        tableElement.appendChild(this.newTableRow('URLs Match', canonicalUrl === windowUrl))
+        this.newTableRow('Canonical URL', canonicalUrl)
+        this.newTableRow('Window URL', windowUrl)
+        this.newTableRow('Canonical Match', matchingCanonicalUrl, matchingCanonicalUrl ? 'green' : 'red')
     }
 }
diff --git a/FrontEnd/styles/debug_panel.scss b/FrontEnd/styles/debug_panel.scss
index 0938dd3cb..77d7d78b4 100644
--- a/FrontEnd/styles/debug_panel.scss
+++ b/FrontEnd/styles/debug_panel.scss
@@ -25,6 +25,7 @@ spi-debug-panel {
     overflow-y: auto;
     max-height: 500px;
     min-height: 100px;
+    padding: 18px;
     background-color: var(--debug-console-background);
     border-top: 1px solid var(--debug-console-border);
 
@@ -38,7 +39,7 @@ spi-debug-panel {
 
         button {
             cursor: pointer;
-            padding: 2px 6px;
+            padding: 0 6px;
             font-size: 10px;
             color: var(--page-text);
             background: none;
@@ -52,15 +53,37 @@ spi-debug-panel {
         }
     }
 
-    [data-debug-console-target='grid'] {
-        display: grid;
-        grid-template-columns: min-content 1fr;
-        gap: 3px 20px;
-        padding: 5px;
+    table {
+        width: 100%;
+        border-collapse: collapse;
+
+        tr {
+            > td:first-child {
+                width: 20%;
+                font-size: 14px;
+                font-weight: 600;
+                white-space: nowrap;
+            }
+
+            > td:last-child {
+                width: 80%;
+                font-family: monospace;
+                font-size: 12px;
+            }
+        }
+
+        td > span {
+            padding: 3px;
+        }
+
+        td.green > span {
+            color: var(--very-light-grey);
+            background-color: var(--mid-green);
+        }
 
-        tr > td:first-child {
-            font-weight: 600;
-            white-space: nowrap;
+        td.red > span {
+            color: var(--very-light-grey);
+            background-color: var(--mid-red);
         }
     }
 }
diff --git a/Sources/App/Views/DocumentationPageProcessor.swift b/Sources/App/Views/DocumentationPageProcessor.swift
index 5189b5b0f..d0b161e15 100644
--- a/Sources/App/Views/DocumentationPageProcessor.swift
+++ b/Sources/App/Views/DocumentationPageProcessor.swift
@@ -293,7 +293,7 @@ struct DocumentationPageProcessor {
     }
 
     var frontEndDebugPanel: String {
-        Plot.Node<HTML.BodyContext>.spiFrontEndDebugConsole(dataItems: []).render()
+        Plot.Node<HTML.BodyContext>.spiFrontEndDebugPanel(dataItems: []).render()
     }
 
     var processedPage: String {
diff --git a/Sources/App/Views/Plot+Extensions.swift b/Sources/App/Views/Plot+Extensions.swift
index 92d43cdab..e4315df73 100644
--- a/Sources/App/Views/Plot+Extensions.swift
+++ b/Sources/App/Views/Plot+Extensions.swift
@@ -207,36 +207,24 @@ extension Node where Context: HTML.BodyContext {
         )
     }
 
-    static func spiFrontEndDebugConsole(dataItems: [PublicPage.DebugConsoleDataItem]) -> Node<HTML.BodyContext> {
+    static func spiFrontEndDebugPanel(dataItems: [PublicPage.DebugConsoleDataItem]) -> Node<HTML.BodyContext> {
         .element(named: "spi-debug-panel", nodes: [
             .class("hidden"),
-            .div(
-                .class("buttons"),
-                .button(
-                    .class("hide"),
-                    .text("Hide"),
-                    .title("Temporarily hide this panel")
-                ),
-                .button(
-                    .class("disable"),
-                    .text("Disable"),
-                    .title("Disable the debug console")
-                )
-            ),
             .table(
-                .class("grid"),
-                .group(
-                    dataItems.map({ dataItem -> Node<HTML.TableContext> in
-                            .tr(
-                                .class("server-side"),
-                                .td(
-                                    .text(dataItem.title)
-                                ),
-                                .td(
-                                    .text(dataItem.value)
+                .tbody(
+                    .group(
+                        dataItems.map({ dataItem -> Node<HTML.TableContext> in
+                                .tr(
+                                    .attribute(named: "server-side"),
+                                    .td(
+                                        .text(dataItem.title)
+                                    ),
+                                    .td(
+                                        .text(dataItem.value)
+                                    )
                                 )
-                            )
-                    })
+                        })
+                    )
                 )
             )
         ])
diff --git a/Sources/App/Views/PublicPage.swift b/Sources/App/Views/PublicPage.swift
index 2cf04ac41..5f3f5f488 100644
--- a/Sources/App/Views/PublicPage.swift
+++ b/Sources/App/Views/PublicPage.swift
@@ -465,7 +465,7 @@ class PublicPage {
     /// Output a hidden-by-default panel on the page showing useful debug information
     /// - Returns: The HTML for the debug console element.
     final func frontEndDebugConsole() -> Node<HTML.BodyContext> {
-        .spiFrontEndDebugConsole(dataItems: frontEndDebugConsoleData())
+        .spiFrontEndDebugPanel(dataItems: frontEndDebugConsoleData())
     }
 
     /// Returns the debug information that a page would like to show in the front-end debug console.

From d6531e47d9561becb8b0145a49b0f6bb6613b214 Mon Sep 17 00:00:00 2001
From: Dave Verwer <dave.verwer@gmail.com>
Date: Thu, 18 Jul 2024 10:23:42 +0100
Subject: [PATCH 5/6] Refactoring before PR.

---
 FrontEnd/main.scss                                 |  1 -
 .../PackageController/Builds/BuildShow+View.swift  |  2 +-
 .../Views/PackageController/PackageShow+View.swift |  2 +-
 Sources/App/Views/Plot+Extensions.swift            |  2 +-
 Sources/App/Views/PublicPage.swift                 | 14 +++++++-------
 5 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/FrontEnd/main.scss b/FrontEnd/main.scss
index 4b9ac8b14..b00e0f8b2 100644
--- a/FrontEnd/main.scss
+++ b/FrontEnd/main.scss
@@ -43,6 +43,5 @@ $mobile-breakpoint: 740px;
 @import 'styles/spinner';
 @import 'styles/supporters';
 @import 'styles/tab_bar';
-@import 'styles/utility';
 @import 'styles/validate_manifest';
 @import 'styles/vega_charts';
diff --git a/Sources/App/Views/PackageController/Builds/BuildShow+View.swift b/Sources/App/Views/PackageController/Builds/BuildShow+View.swift
index 5079236d7..da3f4fada 100644
--- a/Sources/App/Views/PackageController/Builds/BuildShow+View.swift
+++ b/Sources/App/Views/PackageController/Builds/BuildShow+View.swift
@@ -41,7 +41,7 @@ enum BuildShow {
             "Compatibility information for \(model.packageName). Check compatibility with \(model.buildInfo.swiftVersion.longDisplayName) on \(model.buildInfo.platform.displayName) with full build logs."
         }
 
-        override func frontEndDebugConsoleData() -> [PublicPage.DebugConsoleDataItem] {
+        override func frontEndDebugPanelData() -> [PublicPage.FrontEndDebugPanelDataItem] {
             [
                 .init(title: "Version ID", value: model.versionId.uuidString)
             ]
diff --git a/Sources/App/Views/PackageController/PackageShow+View.swift b/Sources/App/Views/PackageController/PackageShow+View.swift
index d34d7e74e..2f74a6054 100644
--- a/Sources/App/Views/PackageController/PackageShow+View.swift
+++ b/Sources/App/Views/PackageController/PackageShow+View.swift
@@ -65,7 +65,7 @@ extension PackageShow {
             }
         }
 
-        override func frontEndDebugConsoleData() -> [PublicPage.DebugConsoleDataItem] {
+        override func frontEndDebugPanelData() -> [PublicPage.FrontEndDebugPanelDataItem] {
             [
                 .init(title: "Package ID", value: model.packageId.uuidString),
                 .init(title: "Score", value: model.score.map(String.init) ?? "No score.")
diff --git a/Sources/App/Views/Plot+Extensions.swift b/Sources/App/Views/Plot+Extensions.swift
index e4315df73..85808b357 100644
--- a/Sources/App/Views/Plot+Extensions.swift
+++ b/Sources/App/Views/Plot+Extensions.swift
@@ -207,7 +207,7 @@ extension Node where Context: HTML.BodyContext {
         )
     }
 
-    static func spiFrontEndDebugPanel(dataItems: [PublicPage.DebugConsoleDataItem]) -> Node<HTML.BodyContext> {
+    static func spiFrontEndDebugPanel(dataItems: [PublicPage.FrontEndDebugPanelDataItem]) -> Node<HTML.BodyContext> {
         .element(named: "spi-debug-panel", nodes: [
             .class("hidden"),
             .table(
diff --git a/Sources/App/Views/PublicPage.swift b/Sources/App/Views/PublicPage.swift
index 5f3f5f488..dc102ad81 100644
--- a/Sources/App/Views/PublicPage.swift
+++ b/Sources/App/Views/PublicPage.swift
@@ -63,12 +63,12 @@ class PublicPage {
                 .data(named: "turbolinks-track", value: "reload")
             ),
             .script(
-                .src(SiteURL.javascripts("main").relativeURL() + "?" + ResourceReloadIdentifier.value),
+                .src(SiteURL.javascripts("shared").relativeURL() + "?" + ResourceReloadIdentifier.value),
                 .data(named: "turbolinks-track", value: "reload"),
                 .defer()
             ),
             .script(
-                .src(SiteURL.javascripts("shared").relativeURL() + "?" + ResourceReloadIdentifier.value),
+                .src(SiteURL.javascripts("main").relativeURL() + "?" + ResourceReloadIdentifier.value),
                 .data(named: "turbolinks-track", value: "reload"),
                 .defer()
             ),
@@ -258,7 +258,7 @@ class PublicPage {
             footer(),
             stagingBanner(),
             postBody(),
-            frontEndDebugConsole()
+            frontEndDebugPanel()
         )
     }
 
@@ -464,13 +464,13 @@ class PublicPage {
 
     /// Output a hidden-by-default panel on the page showing useful debug information
     /// - Returns: The HTML for the debug console element.
-    final func frontEndDebugConsole() -> Node<HTML.BodyContext> {
-        .spiFrontEndDebugPanel(dataItems: frontEndDebugConsoleData())
+    final func frontEndDebugPanel() -> Node<HTML.BodyContext> {
+        .spiFrontEndDebugPanel(dataItems: frontEndDebugPanelData())
     }
 
     /// Returns the debug information that a page would like to show in the front-end debug console.
     /// - Returns: An array of `DebugConsoleDataItem` structs that will be displayed by `frontEndDebugConsole()`.
-    func frontEndDebugConsoleData() -> [DebugConsoleDataItem] {
+    func frontEndDebugPanelData() -> [FrontEndDebugPanelDataItem] {
         []
     }
 }
@@ -485,7 +485,7 @@ extension PublicPage {
 }
 
 extension PublicPage {
-    struct DebugConsoleDataItem {
+    struct FrontEndDebugPanelDataItem {
         var title: String
         var value: String
     }

From b82edbf5d71beec516ea66349dc060e583dba59e Mon Sep 17 00:00:00 2001
From: Dave Verwer <dave.verwer@gmail.com>
Date: Thu, 18 Jul 2024 12:55:53 +0100
Subject: [PATCH 6/6] Snapshots.

---
 ...documentation_issue_2287.current-index.html |  7 +++++++
 ...ocumentation_issue_2287.ref-index-path.html |  7 +++++++
 ...est_documentation_issue_2287.ref-index.html |  7 +++++++
 ...tation_routes_current.index-mixed-case.html |  7 +++++++
 ...est_documentation_routes_current.index.html |  7 +++++++
 ...outes_current_rewrite.index-mixed-case.html |  7 +++++++
 ...mentation_routes_current_rewrite.index.html |  7 +++++++
 ...routes_ref.index-target-a-b-mixed-case.html |  7 +++++++
 ...umentation_routes_ref.index-target-a-b.html |  7 +++++++
 ..._documentation_routes_ref.index-target.html |  7 +++++++
 ...t_documentation_routes_tutorials.index.html |  7 +++++++
 .../test_issue_2288.index.html                 |  7 +++++++
 .../test_AuthorShow.1.html                     |  7 +++++++
 .../test_Blog_index.1.html                     |  7 +++++++
 .../WebpageSnapshotTests/test_Blog_show.1.html |  7 +++++++
 .../test_BuildIndex.1.html                     |  7 +++++++
 .../test_BuildMonitorIndex.1.html              |  7 +++++++
 .../WebpageSnapshotTests/test_BuildShow.1.html | 14 +++++++++++++-
 .../test_DocCTemplate.1.html                   |  7 +++++++
 .../test_DocCTemplate_multipleVersions.1.html  |  7 +++++++
 ...t_DocCTemplate_outdatedStableVersion.1.html |  7 +++++++
 .../test_ErrorPageView.1.html                  |  7 +++++++
 .../test_HomeIndexView.1.html                  |  7 +++++++
 .../test_HomeIndexView_development.1.html      |  7 +++++++
 .../test_KeywordShow.1.html                    |  7 +++++++
 .../test_MaintainerInfoIndex.1.html            |  7 +++++++
 .../test_MarkdownPage.1.html                   |  7 +++++++
 .../test_MarkdownPageStyling.1.html            |  7 +++++++
 .../test_PackageShowView.1.html                | 18 +++++++++++++++++-
 ...wView_app_store_incompatible_license.1.html | 18 +++++++++++++++++-
 .../test_PackageShowView_binary_targets.1.html | 18 +++++++++++++++++-
 ...owView_canonicalURL_noImageSnapshots.1.html | 18 +++++++++++++++++-
 .../test_PackageShowView_emoji_summary.1.html  | 18 +++++++++++++++++-
 .../test_PackageShowView_few_keywords.1.html   | 18 +++++++++++++++++-
 .../test_PackageShowView_many_keywords.1.html  | 18 +++++++++++++++++-
 .../test_PackageShowView_missingPackage.1.html |  7 +++++++
 ..._PackageShowView_no_authors_activity.1.html | 18 +++++++++++++++++-
 .../test_PackageShowView_no_builds.1.html      | 18 +++++++++++++++++-
 .../test_PackageShowView_no_license.1.html     | 18 +++++++++++++++++-
 ..._PackageShowView_open_source_license.1.html | 18 +++++++++++++++++-
 .../test_PackageShowView_other_license.1.html  | 18 +++++++++++++++++-
 ...st_PackageShowView_single_row_tables.1.html | 18 +++++++++++++++++-
 ...kageShowView_withPackageFundingLinks.1.html | 18 +++++++++++++++++-
 ...kageShowView_with_documentation_link.1.html | 18 +++++++++++++++++-
 .../test_ReadyForSwift6Show.1.html             |  7 +++++++
 .../test_SearchShow.1.html                     |  7 +++++++
 .../test_SearchShow_withFilters.1.html         |  7 +++++++
 .../test_SearchShow_withXSSAttempt.1.html      |  7 +++++++
 .../test_SupportersShow.1.html                 |  7 +++++++
 .../test_ValidateSPIManifest_show.1.html       |  7 +++++++
 50 files changed, 506 insertions(+), 16 deletions(-)

diff --git a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_issue_2287.current-index.html b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_issue_2287.current-index.html
index 04c5d034a..7a29ee144 100644
--- a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_issue_2287.current-index.html
+++ b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_issue_2287.current-index.html
@@ -13,6 +13,8 @@
   <script defer src="/owner/package/~/js/index.2871ffbd.js"></script> 
   <link href="/owner/package/~/css/index.ff036a9e.css" rel="stylesheet" /> 
   <link rel="stylesheet" href="/docc.css?test" />
+  <link rel="stylesheet" href="/shared.css?test" />
+  <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
  </head> 
  <body data-color-scheme="auto">
   <header class="spi">
@@ -60,5 +62,10 @@
     <a href="https://swiftpackageindex.com">visit swiftpackageindex.com</a>.
    </div>
   </footer>
+  <spi-debug-panel class="hidden">
+   <table>
+    <tbody></tbody>
+   </table>
+  </spi-debug-panel>
  </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_issue_2287.ref-index-path.html b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_issue_2287.ref-index-path.html
index 0fa89e95f..541913ee0 100644
--- a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_issue_2287.ref-index-path.html
+++ b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_issue_2287.ref-index-path.html
@@ -13,6 +13,8 @@
   <script defer src="/owner/package/feature-1.2.3/js/index.2871ffbd.js"></script> 
   <link href="/owner/package/feature-1.2.3/css/index.ff036a9e.css" rel="stylesheet" /> 
   <link rel="stylesheet" href="/docc.css?test" />
+  <link rel="stylesheet" href="/shared.css?test" />
+  <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
   <link rel="canonical" href="/owner/package/feature/1.2.3/documentation/a/b" />
  </head> 
  <body data-color-scheme="auto">
@@ -55,5 +57,10 @@
     <a href="https://swiftpackageindex.com">visit swiftpackageindex.com</a>.
    </div>
   </footer>
+  <spi-debug-panel class="hidden">
+   <table>
+    <tbody></tbody>
+   </table>
+  </spi-debug-panel>
  </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_issue_2287.ref-index.html b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_issue_2287.ref-index.html
index 99f00ca2a..f48221940 100644
--- a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_issue_2287.ref-index.html
+++ b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_issue_2287.ref-index.html
@@ -13,6 +13,8 @@
   <script defer src="/owner/package/feature-1.2.3/js/index.2871ffbd.js"></script> 
   <link href="/owner/package/feature-1.2.3/css/index.ff036a9e.css" rel="stylesheet" /> 
   <link rel="stylesheet" href="/docc.css?test" />
+  <link rel="stylesheet" href="/shared.css?test" />
+  <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
   <link rel="canonical" href="/owner/package/feature/1.2.3/documentation/target" />
  </head> 
  <body data-color-scheme="auto">
@@ -61,5 +63,10 @@
     <a href="https://swiftpackageindex.com">visit swiftpackageindex.com</a>.
    </div>
   </footer>
+  <spi-debug-panel class="hidden">
+   <table>
+    <tbody></tbody>
+   </table>
+  </spi-debug-panel>
  </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_current.index-mixed-case.html b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_current.index-mixed-case.html
index 46d40ce51..9eb813f3e 100644
--- a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_current.index-mixed-case.html
+++ b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_current.index-mixed-case.html
@@ -13,6 +13,8 @@
   <script defer src="/owner/package/~/js/index.2871ffbd.js"></script> 
   <link href="/owner/package/~/css/index.ff036a9e.css" rel="stylesheet" /> 
   <link rel="stylesheet" href="/docc.css?test" />
+  <link rel="stylesheet" href="/shared.css?test" />
+  <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
  </head> 
  <body data-color-scheme="auto">
   <header class="spi">
@@ -61,5 +63,10 @@
     <a href="https://swiftpackageindex.com">visit swiftpackageindex.com</a>.
    </div>
   </footer>
+  <spi-debug-panel class="hidden">
+   <table>
+    <tbody></tbody>
+   </table>
+  </spi-debug-panel>
  </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_current.index.html b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_current.index.html
index 73135ba86..6f0788057 100644
--- a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_current.index.html
+++ b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_current.index.html
@@ -13,6 +13,8 @@
   <script defer src="/owner/package/~/js/index.2871ffbd.js"></script> 
   <link href="/owner/package/~/css/index.ff036a9e.css" rel="stylesheet" /> 
   <link rel="stylesheet" href="/docc.css?test" />
+  <link rel="stylesheet" href="/shared.css?test" />
+  <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
  </head> 
  <body data-color-scheme="auto">
   <header class="spi">
@@ -61,5 +63,10 @@
     <a href="https://swiftpackageindex.com">visit swiftpackageindex.com</a>.
    </div>
   </footer>
+  <spi-debug-panel class="hidden">
+   <table>
+    <tbody></tbody>
+   </table>
+  </spi-debug-panel>
  </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_current_rewrite.index-mixed-case.html b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_current_rewrite.index-mixed-case.html
index 46d40ce51..9eb813f3e 100644
--- a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_current_rewrite.index-mixed-case.html
+++ b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_current_rewrite.index-mixed-case.html
@@ -13,6 +13,8 @@
   <script defer src="/owner/package/~/js/index.2871ffbd.js"></script> 
   <link href="/owner/package/~/css/index.ff036a9e.css" rel="stylesheet" /> 
   <link rel="stylesheet" href="/docc.css?test" />
+  <link rel="stylesheet" href="/shared.css?test" />
+  <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
  </head> 
  <body data-color-scheme="auto">
   <header class="spi">
@@ -61,5 +63,10 @@
     <a href="https://swiftpackageindex.com">visit swiftpackageindex.com</a>.
    </div>
   </footer>
+  <spi-debug-panel class="hidden">
+   <table>
+    <tbody></tbody>
+   </table>
+  </spi-debug-panel>
  </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_current_rewrite.index.html b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_current_rewrite.index.html
index 73135ba86..6f0788057 100644
--- a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_current_rewrite.index.html
+++ b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_current_rewrite.index.html
@@ -13,6 +13,8 @@
   <script defer src="/owner/package/~/js/index.2871ffbd.js"></script> 
   <link href="/owner/package/~/css/index.ff036a9e.css" rel="stylesheet" /> 
   <link rel="stylesheet" href="/docc.css?test" />
+  <link rel="stylesheet" href="/shared.css?test" />
+  <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
  </head> 
  <body data-color-scheme="auto">
   <header class="spi">
@@ -61,5 +63,10 @@
     <a href="https://swiftpackageindex.com">visit swiftpackageindex.com</a>.
    </div>
   </footer>
+  <spi-debug-panel class="hidden">
+   <table>
+    <tbody></tbody>
+   </table>
+  </spi-debug-panel>
  </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_ref.index-target-a-b-mixed-case.html b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_ref.index-target-a-b-mixed-case.html
index 7ad4a31c6..0b809c56b 100644
--- a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_ref.index-target-a-b-mixed-case.html
+++ b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_ref.index-target-a-b-mixed-case.html
@@ -13,6 +13,8 @@
   <script defer src="/owner/package/1.2.3/js/index.2871ffbd.js"></script> 
   <link href="/owner/package/1.2.3/css/index.ff036a9e.css" rel="stylesheet" /> 
   <link rel="stylesheet" href="/docc.css?test" />
+  <link rel="stylesheet" href="/shared.css?test" />
+  <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
   <link rel="canonical" href="/owner/package/1.2.3/documentation/target/A/b#Anchor" />
  </head> 
  <body data-color-scheme="auto">
@@ -62,5 +64,10 @@
     <a href="https://swiftpackageindex.com">visit swiftpackageindex.com</a>.
    </div>
   </footer>
+  <spi-debug-panel class="hidden">
+   <table>
+    <tbody></tbody>
+   </table>
+  </spi-debug-panel>
  </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_ref.index-target-a-b.html b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_ref.index-target-a-b.html
index 63ed7ed2d..f49a102b0 100644
--- a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_ref.index-target-a-b.html
+++ b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_ref.index-target-a-b.html
@@ -13,6 +13,8 @@
   <script defer src="/owner/package/1.2.3/js/index.2871ffbd.js"></script> 
   <link href="/owner/package/1.2.3/css/index.ff036a9e.css" rel="stylesheet" /> 
   <link rel="stylesheet" href="/docc.css?test" />
+  <link rel="stylesheet" href="/shared.css?test" />
+  <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
   <link rel="canonical" href="/owner/package/1.2.3/documentation/target/a/b#anchor" />
  </head> 
  <body data-color-scheme="auto">
@@ -62,5 +64,10 @@
     <a href="https://swiftpackageindex.com">visit swiftpackageindex.com</a>.
    </div>
   </footer>
+  <spi-debug-panel class="hidden">
+   <table>
+    <tbody></tbody>
+   </table>
+  </spi-debug-panel>
  </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_ref.index-target.html b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_ref.index-target.html
index cae9020a7..307101333 100644
--- a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_ref.index-target.html
+++ b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_ref.index-target.html
@@ -13,6 +13,8 @@
   <script defer src="/owner/package/1.2.3/js/index.2871ffbd.js"></script> 
   <link href="/owner/package/1.2.3/css/index.ff036a9e.css" rel="stylesheet" /> 
   <link rel="stylesheet" href="/docc.css?test" />
+  <link rel="stylesheet" href="/shared.css?test" />
+  <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
   <link rel="canonical" href="/owner/package/1.2.3/documentation/target" />
  </head> 
  <body data-color-scheme="auto">
@@ -62,5 +64,10 @@
     <a href="https://swiftpackageindex.com">visit swiftpackageindex.com</a>.
    </div>
   </footer>
+  <spi-debug-panel class="hidden">
+   <table>
+    <tbody></tbody>
+   </table>
+  </spi-debug-panel>
  </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_tutorials.index.html b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_tutorials.index.html
index 249570a2a..597bcf7f5 100644
--- a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_tutorials.index.html
+++ b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_documentation_routes_tutorials.index.html
@@ -13,6 +13,8 @@
   <script defer src="/owner/package/~/js/index.2871ffbd.js"></script> 
   <link href="/owner/package/~/css/index.ff036a9e.css" rel="stylesheet" /> 
   <link rel="stylesheet" href="/docc.css?test" />
+  <link rel="stylesheet" href="/shared.css?test" />
+  <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
  </head> 
  <body data-color-scheme="auto">
   <header class="spi">
@@ -54,5 +56,10 @@
     <a href="https://swiftpackageindex.com">visit swiftpackageindex.com</a>.
    </div>
   </footer>
+  <spi-debug-panel class="hidden">
+   <table>
+    <tbody></tbody>
+   </table>
+  </spi-debug-panel>
  </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_issue_2288.index.html b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_issue_2288.index.html
index 97e778b25..bc240bf83 100644
--- a/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_issue_2288.index.html
+++ b/Tests/AppTests/__Snapshots__/PackageController+routesTests/test_issue_2288.index.html
@@ -13,6 +13,8 @@
   <script defer src="/foo/bar/~/js/index.2871ffbd.js"></script> 
   <link href="/foo/bar/~/css/index.ff036a9e.css" rel="stylesheet" /> 
   <link rel="stylesheet" href="/docc.css?test" />
+  <link rel="stylesheet" href="/shared.css?test" />
+  <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
  </head> 
  <body data-color-scheme="auto">
   <header class="spi">
@@ -60,5 +62,10 @@
     <a href="https://swiftpackageindex.com">visit swiftpackageindex.com</a>.
    </div>
   </footer>
+  <spi-debug-panel class="hidden">
+   <table>
+    <tbody></tbody>
+   </table>
+  </spi-debug-panel>
  </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_AuthorShow.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_AuthorShow.1.html
index ce4357bb5..958c8b043 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_AuthorShow.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_AuthorShow.1.html
@@ -23,7 +23,9 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
@@ -297,5 +299,10 @@ <h4>vapor-10</h4>
         </nav>
       </div>
     </footer>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody></tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_Blog_index.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_Blog_index.1.html
index e1d156b30..1e9d9ad46 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_Blog_index.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_Blog_index.1.html
@@ -21,7 +21,9 @@
     <meta property="og:image" content="http://localhost:8080/images/logo.png"/>
     <link rel="shortcut icon" href="/images/logo-tiny.png" type="image/png"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index Blog" href="http://localhost:8080/blog/feed.xml"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
@@ -172,5 +174,10 @@ <h3>Post three title</h3>
         </nav>
       </div>
     </footer>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody></tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_Blog_show.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_Blog_show.1.html
index e241a119f..1e602edbb 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_Blog_show.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_Blog_show.1.html
@@ -18,7 +18,9 @@
     <meta property="og:image" content="http://localhost:8080/images/logo.png"/>
     <link rel="shortcut icon" href="/images/logo-tiny.png" type="image/png"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index Blog" href="http://localhost:8080/blog/feed.xml"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
@@ -121,5 +123,10 @@ <h3>About this blog</h3>The
         </nav>
       </div>
     </footer>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody></tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_BuildIndex.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_BuildIndex.1.html
index 7c32dc4d3..5d1cca05f 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_BuildIndex.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_BuildIndex.1.html
@@ -24,7 +24,9 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
@@ -884,5 +886,10 @@ <h3>Swift 5.8</h3>
         </nav>
       </div>
     </footer>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody></tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_BuildMonitorIndex.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_BuildMonitorIndex.1.html
index 67b3e9255..514f3c40f 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_BuildMonitorIndex.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_BuildMonitorIndex.1.html
@@ -23,7 +23,9 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
@@ -172,5 +174,10 @@ <h3>AccessibilitySnapshotColorBlindness
         </nav>
       </div>
     </footer>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody></tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_BuildShow.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_BuildShow.1.html
index fc86c5d40..5111b4a39 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_BuildShow.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_BuildShow.1.html
@@ -24,11 +24,13 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
-  <body><!--CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE-->
+  <body>
     <header>
       <div class="inner">
         <a href="/">
@@ -249,5 +251,15 @@ <h3>Build Log</h3>
         </nav>
       </div>
     </footer>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody>
+          <tr server-side>
+            <td>Version ID</td>
+            <td>CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE</td>
+          </tr>
+        </tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_DocCTemplate.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_DocCTemplate.1.html
index 042456b5b..b9714a9e7 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_DocCTemplate.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_DocCTemplate.1.html
@@ -7,6 +7,8 @@
   <link rel="stylesheet" href="/owner/package/main/path/to/some/styles.css?12345" /> 
   <script src="/owner/package/main/path/to/some/script.js?12345" defer></script> 
   <link rel="stylesheet" href="/docc.css?test" />
+  <link rel="stylesheet" href="/shared.css?test" />
+  <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
   <script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script> 
   <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
  </head> 
@@ -45,5 +47,10 @@
     <small>The Swift Package Index is entirely funded by sponsorship. Thank you to <a href="https://github.com/SwiftPackageIndex/SwiftPackageIndex-Server#funding-and-sponsorship">all our sponsors for their generosity</a>.</small>
    </div>
   </footer>
+  <spi-debug-panel class="hidden">
+   <table>
+    <tbody></tbody>
+   </table>
+  </spi-debug-panel>
  </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_DocCTemplate_multipleVersions.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_DocCTemplate_multipleVersions.1.html
index 0f6302c4d..3823cd623 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_DocCTemplate_multipleVersions.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_DocCTemplate_multipleVersions.1.html
@@ -7,6 +7,8 @@
   <link rel="stylesheet" href="/owner/package/main/path/to/some/styles.css?12345" /> 
   <script src="/owner/package/main/path/to/some/script.js?12345" defer></script> 
   <link rel="stylesheet" href="/docc.css?test" />
+  <link rel="stylesheet" href="/shared.css?test" />
+  <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
   <link rel="canonical" href="https://example.com/owner/repo/canonical-ref" />
   <script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script> 
   <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
@@ -62,5 +64,10 @@
     <small>The Swift Package Index is entirely funded by sponsorship. Thank you to <a href="https://github.com/SwiftPackageIndex/SwiftPackageIndex-Server#funding-and-sponsorship">all our sponsors for their generosity</a>.</small>
    </div>
   </footer>
+  <spi-debug-panel class="hidden">
+   <table>
+    <tbody></tbody>
+   </table>
+  </spi-debug-panel>
  </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_DocCTemplate_outdatedStableVersion.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_DocCTemplate_outdatedStableVersion.1.html
index 6f40f9ab0..5d2a26f1d 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_DocCTemplate_outdatedStableVersion.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_DocCTemplate_outdatedStableVersion.1.html
@@ -7,6 +7,8 @@
   <link rel="stylesheet" href="/owner/package/1.1.0/path/to/some/styles.css?12345" /> 
   <script src="/owner/package/1.1.0/path/to/some/script.js?12345" defer></script> 
   <link rel="stylesheet" href="/docc.css?test" />
+  <link rel="stylesheet" href="/shared.css?test" />
+  <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
   <link rel="canonical" href="https://example.com/owner/repo/canonical-ref" />
   <script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script> 
   <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
@@ -53,5 +55,10 @@
     <small>The Swift Package Index is entirely funded by sponsorship. Thank you to <a href="https://github.com/SwiftPackageIndex/SwiftPackageIndex-Server#funding-and-sponsorship">all our sponsors for their generosity</a>.</small>
    </div>
   </footer>
+  <spi-debug-panel class="hidden">
+   <table>
+    <tbody></tbody>
+   </table>
+  </spi-debug-panel>
  </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_ErrorPageView.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_ErrorPageView.1.html
index d4fae30ab..34ef33f07 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_ErrorPageView.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_ErrorPageView.1.html
@@ -23,7 +23,9 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
@@ -110,5 +112,10 @@ <h4>404 - Not Found</h4>
         </nav>
       </div>
     </footer>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody></tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_HomeIndexView.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_HomeIndexView.1.html
index b6a30ca21..c5721c3cc 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_HomeIndexView.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_HomeIndexView.1.html
@@ -23,7 +23,9 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
@@ -241,5 +243,10 @@ <h3>Recent Releases</h3>
       </div>
     </footer>
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","potentialAction":{"@context":"https://schema.org","@type":"SearchAction","query-input":"required name=search_term_string","target":{"@context":"https://schema.org","@type":"EntryPoint","urlTemplate":"http://localhost:8080/search?query={search_term_string}"}},"url":"http://localhost:8080/"}</script>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody></tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_HomeIndexView_development.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_HomeIndexView_development.1.html
index 9ddcb2681..b4c014958 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_HomeIndexView_development.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_HomeIndexView_development.1.html
@@ -24,7 +24,9 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script>
   </head>
   <body class="home">
@@ -247,5 +249,10 @@ <h3>Recent Releases</h3>
       <a href="https://swiftpackageindex.com">visit swiftpackageindex.com</a>.
     </div>
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","potentialAction":{"@context":"https://schema.org","@type":"SearchAction","query-input":"required name=search_term_string","target":{"@context":"https://schema.org","@type":"EntryPoint","urlTemplate":"http://localhost:8080/search?query={search_term_string}"}},"url":"http://localhost:8080/"}</script>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody></tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_KeywordShow.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_KeywordShow.1.html
index 0be0bce0a..ad59f438d 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_KeywordShow.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_KeywordShow.1.html
@@ -23,7 +23,9 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
@@ -291,5 +293,10 @@ <h4>Networking Package 10</h4>
         </nav>
       </div>
     </footer>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody></tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_MaintainerInfoIndex.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_MaintainerInfoIndex.1.html
index 3ed63be59..5f21d9e44 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_MaintainerInfoIndex.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_MaintainerInfoIndex.1.html
@@ -24,7 +24,9 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
@@ -245,5 +247,10 @@ <h3>Package Score</h3>
         </nav>
       </div>
     </footer>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody></tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_MarkdownPage.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_MarkdownPage.1.html
index 3b8ce10da..67b21b8b9 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_MarkdownPage.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_MarkdownPage.1.html
@@ -23,7 +23,9 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
@@ -113,5 +115,10 @@ <h1>
         </nav>
       </div>
     </footer>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody></tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_MarkdownPageStyling.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_MarkdownPageStyling.1.html
index 057d58397..438f3f9d5 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_MarkdownPageStyling.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_MarkdownPageStyling.1.html
@@ -23,7 +23,9 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
@@ -105,5 +107,10 @@ <h1>
         </nav>
       </div>
     </footer>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody></tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView.1.html
index 30b473668..c4056f7fd 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView.1.html
@@ -23,11 +23,13 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
-  <body class="package"><!--CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE--><!--10-->
+  <body class="package">
     <header>
       <div class="inner">
         <a href="/">
@@ -430,5 +432,19 @@ <h3>Compatibility</h3>
       </div>
     </footer>
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareSourceCode","codeRepository":"https://github.com/Alamofire/Alamofire","dateModified":"2001-01-01T00:00:00Z","datePublished":"1970-01-01T00:00:00Z","description":"This is an amazing package.","identifier":"Owner/Name","keywords":["foo","bar","baz"],"license":"https://github.com/Alamofire/Alamofire/blob/master/LICENSE","name":"Name","programmingLanguage":{"@context":"https://schema.org","@type":"ComputerLanguage","name":"Swift","url":"https://swift.org/"},"sourceOrganization":{"@context":"https://schema.org","@type":"Organization","legalName":"MegaOwner Corporation"},"url":"http://localhost:8080/Owner/Name","version":"5.2.0"}</script>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody>
+          <tr server-side>
+            <td>Package ID</td>
+            <td>CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE</td>
+          </tr>
+          <tr server-side>
+            <td>Score</td>
+            <td>10</td>
+          </tr>
+        </tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_app_store_incompatible_license.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_app_store_incompatible_license.1.html
index b74e0c1f8..dd5cdc5f7 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_app_store_incompatible_license.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_app_store_incompatible_license.1.html
@@ -23,11 +23,13 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
-  <body class="package"><!--CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE--><!--10-->
+  <body class="package">
     <header>
       <div class="inner">
         <a href="/">
@@ -430,5 +432,19 @@ <h3>Compatibility</h3>
       </div>
     </footer>
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareSourceCode","codeRepository":"https://github.com/Alamofire/Alamofire","dateModified":"2001-01-01T00:00:00Z","datePublished":"1970-01-01T00:00:00Z","description":"This is an amazing package.","identifier":"Owner/Name","keywords":["foo","bar","baz"],"license":"https://github.com/Alamofire/Alamofire/blob/master/LICENSE","name":"Name","programmingLanguage":{"@context":"https://schema.org","@type":"ComputerLanguage","name":"Swift","url":"https://swift.org/"},"sourceOrganization":{"@context":"https://schema.org","@type":"Organization","legalName":"MegaOwner Corporation"},"url":"http://localhost:8080/Owner/Name","version":"5.2.0"}</script>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody>
+          <tr server-side>
+            <td>Package ID</td>
+            <td>CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE</td>
+          </tr>
+          <tr server-side>
+            <td>Score</td>
+            <td>10</td>
+          </tr>
+        </tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_binary_targets.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_binary_targets.1.html
index 1f751fbbb..ddc93466b 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_binary_targets.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_binary_targets.1.html
@@ -23,11 +23,13 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
-  <body class="package"><!--CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE--><!--10-->
+  <body class="package">
     <header>
       <div class="inner">
         <a href="/">
@@ -434,5 +436,19 @@ <h3>Compatibility</h3>
       </div>
     </footer>
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareSourceCode","codeRepository":"https://github.com/Alamofire/Alamofire","dateModified":"2001-01-01T00:00:00Z","datePublished":"1970-01-01T00:00:00Z","description":"This is an amazing package.","identifier":"Owner/Name","keywords":["foo","bar","baz"],"license":"https://github.com/Alamofire/Alamofire/blob/master/LICENSE","name":"Name","programmingLanguage":{"@context":"https://schema.org","@type":"ComputerLanguage","name":"Swift","url":"https://swift.org/"},"sourceOrganization":{"@context":"https://schema.org","@type":"Organization","legalName":"MegaOwner Corporation"},"url":"http://localhost:8080/Owner/Name","version":"5.2.0"}</script>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody>
+          <tr server-side>
+            <td>Package ID</td>
+            <td>CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE</td>
+          </tr>
+          <tr server-side>
+            <td>Score</td>
+            <td>10</td>
+          </tr>
+        </tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_canonicalURL_noImageSnapshots.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_canonicalURL_noImageSnapshots.1.html
index 77b7ed8da..a899843ef 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_canonicalURL_noImageSnapshots.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_canonicalURL_noImageSnapshots.1.html
@@ -23,11 +23,13 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
-  <body class="package"><!--CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE--><!--10-->
+  <body class="package">
     <header>
       <div class="inner">
         <a href="/">
@@ -427,5 +429,19 @@ <h3>Compatibility</h3>
       </div>
     </footer>
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareSourceCode","codeRepository":"https://github.com/Alamofire/Alamofire","dateModified":"2001-01-01T00:00:00Z","datePublished":"1970-01-01T00:00:00Z","description":"This is an amazing package.","identifier":"Owner/Name","keywords":["foo","bar","baz"],"license":"https://github.com/Alamofire/Alamofire/blob/master/LICENSE","name":"Name","programmingLanguage":{"@context":"https://schema.org","@type":"ComputerLanguage","name":"Swift","url":"https://swift.org/"},"sourceOrganization":{"@context":"https://schema.org","@type":"Organization","legalName":"MegaOwner Corporation"},"url":"http://localhost:8080/Owner/Name","version":"5.2.0"}</script>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody>
+          <tr server-side>
+            <td>Package ID</td>
+            <td>CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE</td>
+          </tr>
+          <tr server-side>
+            <td>Score</td>
+            <td>10</td>
+          </tr>
+        </tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_emoji_summary.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_emoji_summary.1.html
index 033576955..6f33cd956 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_emoji_summary.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_emoji_summary.1.html
@@ -23,11 +23,13 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
-  <body class="package"><!--CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE--><!--10-->
+  <body class="package">
     <header>
       <div class="inner">
         <a href="/">
@@ -427,5 +429,19 @@ <h3>Compatibility</h3>
       </div>
     </footer>
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareSourceCode","codeRepository":"https://github.com/Alamofire/Alamofire","dateModified":"2001-01-01T00:00:00Z","datePublished":"1970-01-01T00:00:00Z","description":"This is an amazing package.","identifier":"Owner/Name","keywords":["foo","bar","baz"],"license":"https://github.com/Alamofire/Alamofire/blob/master/LICENSE","name":"Name","programmingLanguage":{"@context":"https://schema.org","@type":"ComputerLanguage","name":"Swift","url":"https://swift.org/"},"sourceOrganization":{"@context":"https://schema.org","@type":"Organization","legalName":"MegaOwner Corporation"},"url":"http://localhost:8080/Owner/Name","version":"5.2.0"}</script>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody>
+          <tr server-side>
+            <td>Package ID</td>
+            <td>CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE</td>
+          </tr>
+          <tr server-side>
+            <td>Score</td>
+            <td>10</td>
+          </tr>
+        </tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_few_keywords.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_few_keywords.1.html
index 730fc536b..5ec3aba82 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_few_keywords.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_few_keywords.1.html
@@ -23,11 +23,13 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
-  <body class="package"><!--CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE--><!--10-->
+  <body class="package">
     <header>
       <div class="inner">
         <a href="/">
@@ -458,5 +460,19 @@ <h3>Compatibility</h3>
       </div>
     </footer>
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareSourceCode","codeRepository":"https://github.com/Alamofire/Alamofire","dateModified":"2001-01-01T00:00:00Z","datePublished":"1970-01-01T00:00:00Z","description":"This is an amazing package.","identifier":"Owner/Name","keywords":["foo","bar","baz"],"license":"https://github.com/Alamofire/Alamofire/blob/master/LICENSE","name":"Name","programmingLanguage":{"@context":"https://schema.org","@type":"ComputerLanguage","name":"Swift","url":"https://swift.org/"},"sourceOrganization":{"@context":"https://schema.org","@type":"Organization","legalName":"MegaOwner Corporation"},"url":"http://localhost:8080/Owner/Name","version":"5.2.0"}</script>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody>
+          <tr server-side>
+            <td>Package ID</td>
+            <td>CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE</td>
+          </tr>
+          <tr server-side>
+            <td>Score</td>
+            <td>10</td>
+          </tr>
+        </tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_many_keywords.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_many_keywords.1.html
index 866766627..52366c96e 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_many_keywords.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_many_keywords.1.html
@@ -23,11 +23,13 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
-  <body class="package"><!--CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE--><!--10-->
+  <body class="package">
     <header>
       <div class="inner">
         <a href="/">
@@ -633,5 +635,19 @@ <h3>Compatibility</h3>
       </div>
     </footer>
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareSourceCode","codeRepository":"https://github.com/Alamofire/Alamofire","dateModified":"2001-01-01T00:00:00Z","datePublished":"1970-01-01T00:00:00Z","description":"This is an amazing package.","identifier":"Owner/Name","keywords":["foo","bar","baz"],"license":"https://github.com/Alamofire/Alamofire/blob/master/LICENSE","name":"Name","programmingLanguage":{"@context":"https://schema.org","@type":"ComputerLanguage","name":"Swift","url":"https://swift.org/"},"sourceOrganization":{"@context":"https://schema.org","@type":"Organization","legalName":"MegaOwner Corporation"},"url":"http://localhost:8080/Owner/Name","version":"5.2.0"}</script>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody>
+          <tr server-side>
+            <td>Package ID</td>
+            <td>CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE</td>
+          </tr>
+          <tr server-side>
+            <td>Score</td>
+            <td>10</td>
+          </tr>
+        </tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_missingPackage.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_missingPackage.1.html
index 3f2df9209..16a011a33 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_missingPackage.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_missingPackage.1.html
@@ -23,7 +23,9 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
@@ -106,5 +108,10 @@ <h2>Package not found</h2>
         </nav>
       </div>
     </footer>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody></tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_no_authors_activity.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_no_authors_activity.1.html
index f74d828a5..6d0fbe910 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_no_authors_activity.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_no_authors_activity.1.html
@@ -23,11 +23,13 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
-  <body class="package"><!--CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE--><!--10-->
+  <body class="package">
     <header>
       <div class="inner">
         <a href="/">
@@ -422,5 +424,19 @@ <h3>Compatibility</h3>
       </div>
     </footer>
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareSourceCode","codeRepository":"https://github.com/Alamofire/Alamofire","dateModified":"2001-01-01T00:00:00Z","datePublished":"1970-01-01T00:00:00Z","description":"This is an amazing package.","identifier":"Owner/Name","keywords":["foo","bar","baz"],"license":"https://github.com/Alamofire/Alamofire/blob/master/LICENSE","name":"Name","programmingLanguage":{"@context":"https://schema.org","@type":"ComputerLanguage","name":"Swift","url":"https://swift.org/"},"sourceOrganization":{"@context":"https://schema.org","@type":"Organization","legalName":"MegaOwner Corporation"},"url":"http://localhost:8080/Owner/Name","version":"5.2.0"}</script>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody>
+          <tr server-side>
+            <td>Package ID</td>
+            <td>CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE</td>
+          </tr>
+          <tr server-side>
+            <td>Score</td>
+            <td>10</td>
+          </tr>
+        </tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_no_builds.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_no_builds.1.html
index 57eb2e6f5..deead96a8 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_no_builds.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_no_builds.1.html
@@ -23,11 +23,13 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
-  <body class="package"><!--CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE--><!--10-->
+  <body class="package">
     <header>
       <div class="inner">
         <a href="/">
@@ -310,5 +312,19 @@ <h3>Compatibility</h3>
       </div>
     </footer>
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareSourceCode","codeRepository":"https://github.com/Alamofire/Alamofire","dateModified":"2001-01-01T00:00:00Z","datePublished":"1970-01-01T00:00:00Z","description":"This is an amazing package.","identifier":"Owner/Name","keywords":["foo","bar","baz"],"license":"https://github.com/Alamofire/Alamofire/blob/master/LICENSE","name":"Name","programmingLanguage":{"@context":"https://schema.org","@type":"ComputerLanguage","name":"Swift","url":"https://swift.org/"},"sourceOrganization":{"@context":"https://schema.org","@type":"Organization","legalName":"MegaOwner Corporation"},"url":"http://localhost:8080/Owner/Name","version":"5.2.0"}</script>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody>
+          <tr server-side>
+            <td>Package ID</td>
+            <td>CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE</td>
+          </tr>
+          <tr server-side>
+            <td>Score</td>
+            <td>10</td>
+          </tr>
+        </tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_no_license.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_no_license.1.html
index 00870cba9..cd79d6d85 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_no_license.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_no_license.1.html
@@ -23,11 +23,13 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
-  <body class="package"><!--CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE--><!--10-->
+  <body class="package">
     <header>
       <div class="inner">
         <a href="/">
@@ -430,5 +432,19 @@ <h3>Compatibility</h3>
       </div>
     </footer>
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareSourceCode","codeRepository":"https://github.com/Alamofire/Alamofire","dateModified":"2001-01-01T00:00:00Z","datePublished":"1970-01-01T00:00:00Z","description":"This is an amazing package.","identifier":"Owner/Name","keywords":["foo","bar","baz"],"license":"https://github.com/Alamofire/Alamofire/blob/master/LICENSE","name":"Name","programmingLanguage":{"@context":"https://schema.org","@type":"ComputerLanguage","name":"Swift","url":"https://swift.org/"},"sourceOrganization":{"@context":"https://schema.org","@type":"Organization","legalName":"MegaOwner Corporation"},"url":"http://localhost:8080/Owner/Name","version":"5.2.0"}</script>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody>
+          <tr server-side>
+            <td>Package ID</td>
+            <td>CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE</td>
+          </tr>
+          <tr server-side>
+            <td>Score</td>
+            <td>10</td>
+          </tr>
+        </tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_open_source_license.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_open_source_license.1.html
index 410eff682..1c044cb91 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_open_source_license.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_open_source_license.1.html
@@ -23,11 +23,13 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
-  <body class="package"><!--CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE--><!--10-->
+  <body class="package">
     <header>
       <div class="inner">
         <a href="/">
@@ -429,5 +431,19 @@ <h3>Compatibility</h3>
       </div>
     </footer>
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareSourceCode","codeRepository":"https://github.com/Alamofire/Alamofire","dateModified":"2001-01-01T00:00:00Z","datePublished":"1970-01-01T00:00:00Z","description":"This is an amazing package.","identifier":"Owner/Name","keywords":["foo","bar","baz"],"license":"https://github.com/Alamofire/Alamofire/blob/master/LICENSE","name":"Name","programmingLanguage":{"@context":"https://schema.org","@type":"ComputerLanguage","name":"Swift","url":"https://swift.org/"},"sourceOrganization":{"@context":"https://schema.org","@type":"Organization","legalName":"MegaOwner Corporation"},"url":"http://localhost:8080/Owner/Name","version":"5.2.0"}</script>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody>
+          <tr server-side>
+            <td>Package ID</td>
+            <td>CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE</td>
+          </tr>
+          <tr server-side>
+            <td>Score</td>
+            <td>10</td>
+          </tr>
+        </tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_other_license.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_other_license.1.html
index f87725887..a1ab6e9fd 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_other_license.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_other_license.1.html
@@ -23,11 +23,13 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
-  <body class="package"><!--CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE--><!--10-->
+  <body class="package">
     <header>
       <div class="inner">
         <a href="/">
@@ -430,5 +432,19 @@ <h3>Compatibility</h3>
       </div>
     </footer>
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareSourceCode","codeRepository":"https://github.com/Alamofire/Alamofire","dateModified":"2001-01-01T00:00:00Z","datePublished":"1970-01-01T00:00:00Z","description":"This is an amazing package.","identifier":"Owner/Name","keywords":["foo","bar","baz"],"license":"https://github.com/Alamofire/Alamofire/blob/master/LICENSE","name":"Name","programmingLanguage":{"@context":"https://schema.org","@type":"ComputerLanguage","name":"Swift","url":"https://swift.org/"},"sourceOrganization":{"@context":"https://schema.org","@type":"Organization","legalName":"MegaOwner Corporation"},"url":"http://localhost:8080/Owner/Name","version":"5.2.0"}</script>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody>
+          <tr server-side>
+            <td>Package ID</td>
+            <td>CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE</td>
+          </tr>
+          <tr server-side>
+            <td>Score</td>
+            <td>10</td>
+          </tr>
+        </tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_single_row_tables.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_single_row_tables.1.html
index 53c69e9dd..a51df8247 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_single_row_tables.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_single_row_tables.1.html
@@ -23,11 +23,13 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
-  <body class="package"><!--CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE--><!--10-->
+  <body class="package">
     <header>
       <div class="inner">
         <a href="/">
@@ -363,5 +365,19 @@ <h3>Compatibility</h3>
       </div>
     </footer>
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareSourceCode","codeRepository":"https://github.com/Alamofire/Alamofire","dateModified":"2001-01-01T00:00:00Z","datePublished":"1970-01-01T00:00:00Z","description":"This is an amazing package.","identifier":"Owner/Name","keywords":["foo","bar","baz"],"license":"https://github.com/Alamofire/Alamofire/blob/master/LICENSE","name":"Name","programmingLanguage":{"@context":"https://schema.org","@type":"ComputerLanguage","name":"Swift","url":"https://swift.org/"},"sourceOrganization":{"@context":"https://schema.org","@type":"Organization","legalName":"MegaOwner Corporation"},"url":"http://localhost:8080/Owner/Name","version":"5.2.0"}</script>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody>
+          <tr server-side>
+            <td>Package ID</td>
+            <td>CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE</td>
+          </tr>
+          <tr server-side>
+            <td>Score</td>
+            <td>10</td>
+          </tr>
+        </tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_withPackageFundingLinks.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_withPackageFundingLinks.1.html
index e5711ffff..7808e9d6c 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_withPackageFundingLinks.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_withPackageFundingLinks.1.html
@@ -23,11 +23,13 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
-  <body class="package"><!--CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE--><!--10-->
+  <body class="package">
     <header>
       <div class="inner">
         <a href="/">
@@ -435,5 +437,19 @@ <h3>Compatibility</h3>
       </div>
     </footer>
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareSourceCode","codeRepository":"https://github.com/Alamofire/Alamofire","dateModified":"2001-01-01T00:00:00Z","datePublished":"1970-01-01T00:00:00Z","description":"This is an amazing package.","identifier":"Owner/Name","keywords":["foo","bar","baz"],"license":"https://github.com/Alamofire/Alamofire/blob/master/LICENSE","name":"Name","programmingLanguage":{"@context":"https://schema.org","@type":"ComputerLanguage","name":"Swift","url":"https://swift.org/"},"sourceOrganization":{"@context":"https://schema.org","@type":"Organization","legalName":"MegaOwner Corporation"},"url":"http://localhost:8080/Owner/Name","version":"5.2.0"}</script>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody>
+          <tr server-side>
+            <td>Package ID</td>
+            <td>CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE</td>
+          </tr>
+          <tr server-side>
+            <td>Score</td>
+            <td>10</td>
+          </tr>
+        </tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_with_documentation_link.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_with_documentation_link.1.html
index 17fb52ef8..a5dd40da8 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_with_documentation_link.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_with_documentation_link.1.html
@@ -23,11 +23,13 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
-  <body class="package"><!--CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE--><!--10-->
+  <body class="package">
     <header>
       <div class="inner">
         <a href="/">
@@ -430,5 +432,19 @@ <h3>Compatibility</h3>
       </div>
     </footer>
     <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareSourceCode","codeRepository":"https://github.com/Alamofire/Alamofire","dateModified":"2001-01-01T00:00:00Z","datePublished":"1970-01-01T00:00:00Z","description":"This is an amazing package.","identifier":"Owner/Name","keywords":["foo","bar","baz"],"license":"https://github.com/Alamofire/Alamofire/blob/master/LICENSE","name":"Name","programmingLanguage":{"@context":"https://schema.org","@type":"ComputerLanguage","name":"Swift","url":"https://swift.org/"},"sourceOrganization":{"@context":"https://schema.org","@type":"Organization","legalName":"MegaOwner Corporation"},"url":"http://localhost:8080/Owner/Name","version":"5.2.0"}</script>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody>
+          <tr server-side>
+            <td>Package ID</td>
+            <td>CAFECAFE-CAFE-CAFE-CAFE-CAFECAFECAFE</td>
+          </tr>
+          <tr server-side>
+            <td>Score</td>
+            <td>10</td>
+          </tr>
+        </tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_ReadyForSwift6Show.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_ReadyForSwift6Show.1.html
index 9b290a9ff..e69f6d7fa 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_ReadyForSwift6Show.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_ReadyForSwift6Show.1.html
@@ -23,7 +23,9 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
@@ -171,5 +173,10 @@ <h3 id="faq">Frequently asked questions</h3>
         </nav>
       </div>
     </footer>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody></tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_SearchShow.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_SearchShow.1.html
index 3da623746..225cddb2b 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_SearchShow.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_SearchShow.1.html
@@ -23,7 +23,9 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
@@ -284,5 +286,10 @@ <h4>Matching keywords</h4>
         </nav>
       </div>
     </footer>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody></tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_SearchShow_withFilters.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_SearchShow_withFilters.1.html
index da682b323..4394839cd 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_SearchShow_withFilters.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_SearchShow_withFilters.1.html
@@ -23,7 +23,9 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
@@ -242,5 +244,10 @@ <h4>Matching keywords</h4>
         </nav>
       </div>
     </footer>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody></tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_SearchShow_withXSSAttempt.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_SearchShow_withXSSAttempt.1.html
index 3509c0e15..d230f7a1f 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_SearchShow_withXSSAttempt.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_SearchShow_withXSSAttempt.1.html
@@ -23,7 +23,9 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
@@ -134,5 +136,10 @@ <h4>Matching packages</h4>
         </nav>
       </div>
     </footer>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody></tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_SupportersShow.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_SupportersShow.1.html
index 881cd6186..bec345807 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_SupportersShow.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_SupportersShow.1.html
@@ -23,7 +23,9 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
@@ -321,5 +323,10 @@ <h3>Community Supporters</h3>
         </nav>
       </div>
     </footer>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody></tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file
diff --git a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_ValidateSPIManifest_show.1.html b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_ValidateSPIManifest_show.1.html
index ef556abd7..5ea8f4597 100644
--- a/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_ValidateSPIManifest_show.1.html
+++ b/Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_ValidateSPIManifest_show.1.html
@@ -26,7 +26,9 @@
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major Package Releases" href="http://localhost:8080/releases.rss?major=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Major & Minor Package Releases" href="http://localhost:8080/releases.rss?major=true&minor=true"/>
     <link rel="alternate" type="application/rss+xml" title="Swift Package Index – Recent Package Pre-Releases" href="http://localhost:8080/releases.rss?pre=true"/>
+    <link rel="stylesheet" href="/shared.css?test" data-turbolinks-track="reload"/>
     <link rel="stylesheet" href="/main.css?test" data-turbolinks-track="reload"/>
+    <script src="/shared.js?test" data-turbolinks-track="reload" defer></script>
     <script src="/main.js?test" data-turbolinks-track="reload" defer></script><script async defer data-domain="swiftpackageindex.com" src="https://plausible.io/js/plausible.outbound-links.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
   </head>
@@ -145,5 +147,10 @@ <h2 class="trimmed">Validate a Swift Package Index manifest</h2>
         </nav>
       </div>
     </footer>
+    <spi-debug-panel class="hidden">
+      <table>
+        <tbody></tbody>
+      </table>
+    </spi-debug-panel>
   </body>
 </html>
\ No newline at end of file