stoplight 5.8.3 → 6.0.0.rc2

data/lib/stoplight/admin/light_view.rb

@@ -0,0 +1,184 @@
+# frozen_string_literal: true
+
+require "securerandom"
+
+module Stoplight
+  class Admin
+    class LightView
+      COLORS = [
+        Stoplight::Color::GREEN,
+        Stoplight::Color::YELLOW,
+        Stoplight::Color::RED
+      ].freeze
+
+      attr_reader :failures
+
+      def initialize(
+        config:,
+        state_snapshot:,
+        metrics_snapshot:,
+        recovery_metrics_snapshot:
+      )
+        @config = config
+        @state_snapshot = state_snapshot
+        @recovery_metrics_snapshot = recovery_metrics_snapshot
+        @metrics_snapshot = metrics_snapshot
+        @failures = [metrics_snapshot.last_error].compact
+      end
+
+      def locked?
+        !unlocked?
+      end
+
+      def color = @state_snapshot.color
+      def id = @config.id
+      def name = @config.name
+      def state = @state_snapshot.locked_state
+      def latest_failure = @metrics_snapshot.last_error
+
+      def traffic_metric_label
+        if @metrics_snapshot.requests.nil?
+          "Consecutive failures"
+        else
+          "Errors"
+        end
+      end
+
+      def traffic_metric_value
+        requests = @metrics_snapshot.requests
+        if requests.nil?
+          @metrics_snapshot.consecutive_errors.to_s
+        else
+          error_rate = @metrics_snapshot.error_rate
+          raise TypeError, "error_rate must not be nil" if error_rate.nil?
+
+          "#{@metrics_snapshot.errors!} / #{requests} requests (#{format("%.1f%%", error_rate * 100)})"
+        end
+      end
+
+      def unlocked?
+        @state_snapshot.locked_state == Stoplight::State::UNLOCKED
+      end
+
+      # @return [Hash]
+      def as_json
+        {
+          id: @config.id,
+          name: @config.name,
+          color: @state_snapshot.color,
+          failures: Array(@metrics_snapshot.last_error),
+          locked: locked?
+        }
+      end
+
+      # @return [Array]
+      def default_sort_key
+        [-COLORS.index(@state_snapshot.color).to_i, @config.name]
+      end
+
+      def last_check = [
+        @metrics_snapshot.last_error_at,
+        @metrics_snapshot.last_success_at,
+        @recovery_metrics_snapshot.last_error_at,
+        @recovery_metrics_snapshot.last_success_at,
+        @state_snapshot.breached_at
+      ].compact.max
+
+      private def duration_in_words(seconds)
+        minutes = seconds / 60
+        seconds %= 60
+        hours = minutes / 60
+        minutes %= 60
+        parts = [] #: Array[String]
+        parts << "#{hours} #{(hours == 1) ? "hour" : "hours"}" if hours > 0
+        parts << "#{minutes} #{(minutes == 1) ? "minute" : "minutes"}" if minutes > 0
+        parts << "#{seconds} #{(seconds == 1) ? "second" : "seconds"}" if seconds > 0
+        parts.join(", ")
+      end
+
+      # @return [String]
+      def description_title
+        case @state_snapshot.color
+        when Stoplight::Color::RED
+          if locked? && @metrics_snapshot.last_error.nil?
+            "Locked Open"
+          else
+            "Last Error"
+          end
+        when Stoplight::Color::YELLOW
+          "Testing Recovery"
+        when Stoplight::Color::GREEN
+          if locked?
+            "Forced Healthy"
+          else
+            "Healthy"
+          end
+        else
+          raise T.absurd
+        end
+      end
+
+      # @return [String]
+      def description_message
+        case @state_snapshot.color
+        when Stoplight::Color::RED
+          if (latest_failure = @metrics_snapshot.last_error)
+            "#{latest_failure.error_class}: #{latest_failure.error_message}"
+          elsif locked?
+            "Circuit manually locked open"
+          else
+            "Not available"
+          end
+        when Stoplight::Color::YELLOW
+          if (latest_failure = @metrics_snapshot.last_error)
+            "#{latest_failure.error_class}: #{latest_failure.error_message}"
+          else
+            "Not available"
+          end
+        when Stoplight::Color::GREEN
+          if locked?
+            "Circuit manually locked closed"
+          else
+            "No recent errors"
+          end
+        else
+          raise T.absurd
+        end
+      end
+
+      # @return [String]
+      def description_comment
+        case @state_snapshot.color
+        when Stoplight::Color::RED
+          if locked?
+            "Override active - all requests blocked"
+          elsif (recovery_at = @state_snapshot.recovery_scheduled_after)
+            recovery_in = [0, (recovery_at - Time.now.utc).to_i].max
+            if recovery_in > 0
+              "Will attempt recovery in #{duration_in_words(recovery_in)}"
+            else
+              "Recovery started: awaiting test traffic"
+            end
+          else
+            "Recovery started: awaiting test traffic"
+          end
+        when Stoplight::Color::YELLOW
+          recovery_metrics_snapshot = @recovery_metrics_snapshot
+          if recovery_metrics_snapshot.consecutive_successes.zero?
+            "Recovery started: awaiting test traffic"
+          else
+            "Allowing limited test traffic (#{recovery_metrics_snapshot.consecutive_successes} of #{@config.recovery_threshold} requests)"
+          end
+        when Stoplight::Color::GREEN
+          if locked?
+            "Override active - all requests processed"
+          else
+            "Operating normally"
+          end
+        else
+          raise T.absurd
+        end
+      end
+    end
+  end
+end

data/lib/stoplight/admin/lights_stats.rb

@@ -8,8 +8,6 @@ module Stoplight
         percent_red: 0, percent_yellow: 0, percent_green: 0
       }.freeze
 
-      # @!attribute lights
-      #   @return [<Stoplight::Admin::LightsRepository::Light>]
       attr_reader :lights
       private :lights
 
@@ -19,7 +17,7 @@ module Stoplight
         end
       end
 
-      # @param lights [<Stoplight::Admin::LightsRepository::Light>]
+      # @param lights [<Stoplight::Admin::LightView>]
       def initialize(lights)
         @lights = lights
       end
@@ -38,27 +36,27 @@ module Stoplight
       end
 
       private def count_red
-        count_lights(RED)
+        count_lights(Color::RED)
       end
 
       private def percent_red
-        percent_lights(RED)
+        percent_lights(Color::RED)
       end
 
       private def count_green
-        count_lights(GREEN)
+        count_lights(Color::GREEN)
       end
 
       private def percent_green
-        percent_lights(GREEN)
+        percent_lights(Color::GREEN)
       end
 
       private def count_yellow
-        count_lights(YELLOW)
+        count_lights(Color::YELLOW)
       end
 
       private def percent_yellow
-        percent_lights(YELLOW)
+        percent_lights(Color::YELLOW)
       end
 
       private def count_lights(color)

data/lib/stoplight/admin/views/_card.erb

@@ -1,6 +1,6 @@
-<div class="max-w-xl mr-5 p-6 border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
+<div class="flex flex-col max-w-xl mr-5 p-6 border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
   <div class="flex items-center">
-    <% light_name = CGI.escape(light.name) %>
+    <% light_id = light.id %>
 
     <div class="relative">
       <div class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-<%= color %>-100 rounded-full dark:bg-<%= color %>-600">
@@ -24,7 +24,7 @@
 
     <div class="flex-1 min-w-0 ms-4">
       <p class="text-sm font-medium text-gray-900 truncate dark:text-white">
-        <%= light.name %>
+        <%= CGI.escapeHTML(light.name) %>
       </p>
       <span class="flex items-center text-sm font-medium text-gray-500 dark:text-gray-400 truncate me-3">
         <span class="flex w-2.5 h-2.5 bg-<%= color %>-600 rounded-full me-1.5 shrink-0"></span>
@@ -50,11 +50,13 @@
       </svg>
     </button>
 
+    <% action_classes = "flex items-center py-2 px-4 text-sm " + (settings.read_only? ? "text-gray-400 dark:text-gray-500 cursor-not-allowed" : "hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white") %>
+
     <!-- Dropdown menu -->
     <div id="dropdownDotsHorizontal-<%= light.id %>" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700 dark:divide-gray-600">
       <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownMenuIconHorizontalButton">
         <li>
-          <a href="<%= url("/unlock?names=#{light_name}") %>" data-turbo-method="post" class="flex items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+          <a <%= control_attributes(system_url(system_id, "/lights/#{light_id}/unlock"), verb: "patch") %> class="<%= action_classes %>">
             <svg class="flex w-4 h-4 me-1.5 shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <circle cx="12" cy="16" r="1"/>
               <rect width="18" height="12" x="3" y="10" rx="2"/>
@@ -64,7 +66,7 @@
           </a>
         </li>
         <li>
-          <a href="<%= url("/red?names=#{light_name}") %>" data-turbo-method="post" class="flex items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+          <a <%= control_attributes(system_url(system_id, "/lights/#{light_id}/lock?color=red"), verb: "patch") %> class="<%= action_classes %>">
             <svg class="flex w-4 h-4 me-1.5 text-red-600 shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <circle cx="12" cy="16" r="1"/>
               <rect x="3" y="10" width="18" height="12" rx="2"/>
@@ -74,7 +76,7 @@
           </a>
         </li>
         <li>
-          <a href="<%= url("/green?names=#{light_name}") %>" data-turbo-method="post" class="flex items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+          <a <%= control_attributes(system_url(system_id, "/lights/#{light_id}/lock?color=green"), verb: "patch") %> class="<%= action_classes %>">
             <svg class="flex w-4 h-4 me-1.5 text-green-600 shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <circle cx="12" cy="16" r="1"/>
               <rect x="3" y="10" width="18" height="12" rx="2"/>
@@ -84,7 +86,7 @@
           </a>
         </li>
         <li>
-          <a href="<%= url("/remove?names=#{light_name}") %>" data-turbo-method="post" data-turbo-confirm="Are you sure you want to remove this light?" class="flex items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+          <a <%= control_attributes(system_url(system_id, "/lights/#{light_id}"), confirm: "Are you sure you want to remove this light?", verb: "delete") %> class="<%= action_classes %>">
             <svg class="flex w-4 h-4 me-1.5 text-red-600 shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <polyline points="3 6 5 6 21 6"/>
               <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
@@ -101,13 +103,9 @@
 
   <div class="p-4 my-4 text-sm text-<%= color %>-800 rounded-lg bg-<%= color %>-50 dark:bg-gray-800 dark:text-<%= color %>-400">
     <div class="flex justify-between items-center">
-      <div class="pr-4">
-        <p class="font-semibold"><%= light.description_title %></p>
-        <p class="font-medium"><%= light.description_message %></p>
-        <p><%= light.description_comment %></p>
-      </div>
+      <p class="font-semibold pr-4"><%= CGI.escapeHTML(light.description_title) %></p>
       <% if light.latest_failure %>
-        <div class="whitespace-nowrap text-center">
+        <div class="whitespace-nowrap text-center shrink-0">
           <%= light.latest_failure.time.strftime("%F %T") %>
           <span class="text-gray-400 dark:text-gray-500 uppercase tracking-wide">
             UTC
@@ -115,20 +113,20 @@
         </div>
       <% end %>
     </div>
+    <p class="font-medium"><%= CGI.escapeHTML(light.description_message) %></p>
+    <p><%= CGI.escapeHTML(light.description_comment) %></p>
   </div>
 
   <!-- Stats Row -->
-  <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-3">
+  <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-3" style="margin-top: auto;">
     <div>
-      <span class="font-medium">Failures:</span> <%= light.failure_count %>
+      <span class="font-medium"><%= light.traffic_metric_label %>:</span> <%= light.traffic_metric_value %>
     </div>
 
-    <% light.last_check.then do |last_check| %>
-      <% if last_check %>
-        <div>
-          <span class="font-medium">Last Check:</span><%= time_ago_in_words(last_check) %>
-        </div>
-      <% end %>
+    <% if light.last_check %>
+      <div>
+        <span class="font-medium">Last Check:</span><%= time_ago_in_words(light.last_check) %>
+      </div>
     <% end %>
   </div>
 </div>

data/lib/stoplight/admin/views/index.erb

@@ -13,7 +13,7 @@
 
       <div class="space-y-4">
         <p class="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48 dark:text-gray-400">
-          Ensure that your Stoplight data store is properly configured and that your Stoplight blocks have been run.
+          Ensure lights are registered and this Admin instance uses the same data store as your application.
         </p>
       </div>
 
@@ -28,9 +28,15 @@
     </div>
   </section>
 <% else %>
-  <section class="grid gap-4" style="grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));">
+  <style nonce="<%= nonce %>">
+    .lights-grid { grid-template-columns: 1fr; }
+    @media (min-width: 800px) {
+      .lights-grid { grid-template-columns: repeat(auto-fill, 500px); }
+    }
+  </style>
+  <section class="grid gap-4 lights-grid">
     <% lights.each do |light| %>
-      <%= erb :_card, locals: { light:, color: light.color } %>
+      <%= erb :_card, locals: { light:, color: light.color, system_id: } %>
     <% end %>
   </section>
 <% end %>

data/lib/stoplight/admin/views/layout.erb

@@ -6,23 +6,33 @@
 
     <title>Stoplight Admin</title>
 
-    <script nonce="<%= nonce %>" type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@latest/dist/turbo.es2017-esm.min.js"></script>
+    <link rel="icon" href="<%= asset_path('favicon.ico') %>" sizes="32x32">
+    <link rel="icon" href="<%= asset_path('icon.svg') %>" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="<%= asset_path('apple-touch-icon.png') %>">
+
+    <script nonce="<%= nonce %>" type="module" src="<%= asset_path('turbo.es2017-esm.min.js') %>"></script>
     <script nonce="<%= nonce %>" type="module">
         document.addEventListener("turbo:load", () => {
             window.initFlowbite()
         })
     </script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" />
+    <link rel="stylesheet" href="<%= asset_path('flowbite.min.css') %>" />
   </head>
-  <body>
-    <div class="antialiased bg-gray-50 dark:bg-gray-900 h-screen flex flex-col justify-between">
-      <div>
+  <body class="bg-gray-50 dark:bg-gray-900">
+    <div class="antialiased bg-gray-50 dark:bg-gray-900 flex flex-col" style="min-height: 100vh;">
+      <div class="grow">
         <nav class="bg-white border-gray-200 dark:bg-gray-900">
-          <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
-            <a href="<%= url('/') %>" class="flex items-center space-x-3 rtl:space-x-reverse">
-              🚦
-              <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Stoplight Admin</span>
-            </a>
+          <div class="flex flex-wrap items-center justify-between p-4">
+            <div class="flex items-center space-x-3 rtl:space-x-reverse">
+              <a href="<%= url('/') %>" class="flex items-center space-x-3 rtl:space-x-reverse">
+                🚦
+                <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Stoplight Admin</span>
+              </a>
+
+              <% if settings.read_only? %>
+                <span class="bg-gray-100 text-gray-600 text-xs font-medium px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-gray-300" title="This panel cannot change light states">Read-only</span>
+              <% end %>
+            </div>
 
             <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
               <span class="sr-only">Open main menu</span>
@@ -33,9 +43,31 @@
 
             <div class="hidden w-full md:block md:w-auto" id="navbar-default">
               <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
+                <% if show_system_switcher? %>
+                  <li class="relative me-2 mb-2">
+                    <button id="systemMenuButton" data-dropdown-toggle="systemMenu" type="button"
+                      class="flex items-center gap-2 py-2.5 px-4 text-sm font-medium text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700">
+                      <%= CGI.escapeHTML(current_system.name) %>
+                      <svg class="w-2.5 h-2.5 ms-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6" fill="none">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
+                      </svg>
+                    </button>
+                    <div id="systemMenu" class="z-10 hidden w-60 bg-white divide-y divide-gray-100 rounded-lg shadow-lg border border-gray-100 dark:bg-gray-700 dark:divide-gray-600 dark:border-gray-600">
+                      <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="systemMenuButton">
+                        <% settings.systems.each do |other_system| %>
+                          <li>
+                            <a href="<%= system_url(other_system.config.id, "/lights") %>" class="block px-4 py-2 <%= (other_system.config.id == current_system_id) ? "bg-blue-50 text-blue-700 dark:bg-gray-600 dark:text-white" : "hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" %>">
+                              <%= CGI.escapeHTML(other_system.name) %>
+                            </a>
+                          </li>
+                        <% end %>
+                      </ul>
+                    </div>
+                  </li>
+                <% end %>
                 <% if count_red + count_yellow > 0 %>
                   <li>
-                    <a href="<%= url('/green_all') %>" data-turbo-method="post" class="inline-flex items-center text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">
+                    <a <%= control_attributes(system_url(system_id, '/lights/lock?color=green'), verb: "patch") %> class="inline-flex items-center font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 border bg-white dark:bg-gray-800 <%= settings.read_only? ? "text-gray-400 border-gray-200 cursor-not-allowed dark:text-gray-500 dark:border-gray-700" : "text-gray-900 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" %>">
                       <svg class="flex w-4 h-4 me-1.5 text-green-600 shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                         <circle cx="12" cy="16" r="1"/>
                         <rect x="3" y="10" width="18" height="12" rx="2"/>
@@ -57,12 +89,12 @@
 
       <footer class="bg-white rounded-lg shadow-sm dark:bg-gray-900 m-4">
         <div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
-          <p class="block text-sm text-gray-500 sm:text-center dark:text-gray-400 mb-2">All of the Lights -- cop lights, flashlights, spotlights, strobe lights...</p>
+          <p class="block text-sm text-gray-500 sm:text-center dark:text-gray-400 mb-2">All of the Lights — cop lights, flashlights, spotlights, strobe lights…</p>
           <p class="block text-sm text-gray-500 sm:text-center dark:text-gray-400">💡 🔦 🚨 🚥 💫</p>
         </div>
       </footer>
     </div>
 
-    <script nonce="<%= nonce %>" src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
+    <script nonce="<%= nonce %>" src="<%= asset_path('flowbite.min.js') %>"></script>
   </body>
 </html>

data/lib/stoplight/admin.rb

@@ -2,6 +2,7 @@
 
 require "cgi/escape"
 require "cgi/util" if RUBY_VERSION < "3.5"
+require "digest"
 
 begin
   require "sinatra/base"
@@ -16,61 +17,149 @@ rescue LoadError
 end
 
 module Stoplight
+  # A Sinatra dashboard listing every light, its color, and its recent failures, with
+  # controls to lock a light green or red, unlock it, or remove it.
+  #
+  # Setting +read_only+ deploys it as an observation-only dashboard: every light stays
+  # visible, and every control that would change one is refused with 403 rather than merely
+  # hidden, so calling the endpoints directly does not get around it. The standalone Docker
+  # image reads the same option from +STOPLIGHT_ADMIN_READ_ONLY+, for the exact string +true+.
+  #
+  # This is not access control - it has no notion of users, and anyone who reaches the panel
+  # still reads every light name and failure message. Keep it behind authentication either way.
+  #
+  # @example Observing without being able to change anything
+  #   Stoplightt::Admin.conrfigure do |config|
+  #     config.read_only = true
+  #   end
+  #
+  #   mount Stoplight::Admin => "/stoplights"
+  #
+  # @example configue multiple systems
+  #   Core = Stoplight.register_system("Core", data_store:)
+  #   Analytics = Stoplight.register_system("Analytics", data_store:)
+  #
+  #   Stoplight::Admin.configure do |config|
+  #     config.add_system Core
+  #     config.add_system Analytics
+  #   end
+  #
   class Admin < Sinatra::Base
     COLORS = [
-      GREEN = Stoplight::Color::GREEN,
-      YELLOW = Stoplight::Color::YELLOW,
-      RED = Stoplight::Color::RED
+      Color::GREEN,
+      Color::YELLOW,
+      Color::RED
     ].freeze
     private_constant :COLORS
 
+    ASSETS_PATH = File.join(T.must(__dir__), "admin", "assets")
+    ASSET_DIGESTS = Dir.children(ASSETS_PATH).to_h do |name|
+      [name, T.must(Digest::SHA256.file(File.join(ASSETS_PATH, name)).hexdigest[0, 8])]
+    end.freeze
+
+    ONE_YEAR_IN_SECONDS = 60 * 60 * 24 * 365
+    private_constant :ONE_YEAR_IN_SECONDS
+
     helpers Helpers
+    @systems = []
+
+    def self.add_system(system)
+      @systems << validate_persistent_system!(system)
+    end
+
+    def self.__stoplight__reset_systems!
+      @systems = []
+    end
+
+    def self.validate_persistent_system!(system)
+      return system if system.persistent?
+
+      raise TypeError, "Stoplight Admin requires a persistent data store, but the current data store is not persistent. " \
+        "Please configure a different data store in your Stoplight configuration."
+    end
+    private_class_method :validate_persistent_system!
+
+    set :systems do
+      if @systems.empty?
+        [validate_persistent_system!(Stoplight.__stoplight__default_system)]
+      else
+        @systems
+      end
+    end
 
     set :protection, except: %i[json_csrf]
+    set :read_only, false
     set :data_store, proc { Stoplight.__stoplight__default_configuration.data_store }
-    set :views, File.join(__dir__, "admin", "views")
+    set :views, File.join(T.must(__dir__), "admin", "views")
     set :nonce, proc { |request| }
+    set :public_folder, ASSETS_PATH
+    set :static_cache_control, [:public, max_age: ONE_YEAR_IN_SECONDS, immutable: true]
+
+    # Gates on the request method rather than on a list of paths, so a write route added
+    # later is refused without anyone having to remember this filter exists.
+    before do
+      if settings.read_only? && !request.get? && !request.head?
+        halt 403, "Stoplight Admin is running in read-only mode."
+      end
+    end
 
     get "/" do
+      system = settings.systems.first
+
+      redirect system_url(system.config.id, "/lights")
+    end
+
+    get "/systems/:system_id/lights" do
       lights, stats = dependencies.stats_action.call
 
-      erb :index, locals: stats.merge(lights: lights, nonce: settings.nonce(request))
+      erb :index, locals: stats.merge(
+        lights: lights,
+        nonce: settings.nonce(request),
+        system_id: current_system_id
+      )
     end
 
+    # Always reports the first configured system, regardless of which system is "current" -
+    # for external monitors that already poll this unscoped path.
     get "/stats" do
-      lights, stats = dependencies.stats_action.call
+      lights, stats = Dependencies.new(system: settings.systems.first).stats_action.call
 
       json({stats: stats, lights: lights.map(&:as_json)})
     end
 
-    post "/unlock" do
-      dependencies.unlock_action.call(params)
+    get "/systems/:system_id/lights.json" do
+      lights, stats = dependencies.stats_action.call
 
-      redirect to("/")
+      json({stats: stats, lights: lights.map(&:as_json)})
     end
 
-    post "/green" do
-      dependencies.green_action.call(params)
+    patch "/systems/:system_id/lights/:light_id/unlock" do
+      light_id = T.must(params[:light_id])
+      dependencies.unlock_action.call(light_id:)
 
-      redirect to("/")
+      redirect system_url(current_system_id, "/lights")
     end
 
-    post "/red" do
-      dependencies.red_action.call(params)
+    patch "/systems/:system_id/lights/:light_id/lock" do
+      light_id = T.must(params[:light_id])
+      color = T.must(params[:color])
+      dependencies.lock_action.call(light_id:, color:)
 
-      redirect to("/")
+      redirect system_url(current_system_id, "/lights")
     end
 
-    post "/green_all" do
-      dependencies.green_all_action.call
+    patch "/systems/:system_id/lights/lock" do
+      color = T.must(params[:color])
+      dependencies.lock_all_action.call(color:)
 
-      redirect to("/")
+      redirect system_url(current_system_id, "/lights")
     end
 
-    post "/remove" do
-      dependencies.remove_action.call(params)
+    delete "/systems/:system_id/lights/:light_id" do
+      light_id = T.must(params[:light_id])
+      dependencies.remove_action.call(light_id:)
 
-      redirect to("/")
+      redirect system_url(current_system_id, "/lights")
     end
   end
 end