ruby_event_store-browser 3.0.1 → 3.1.0

data/lib/ruby_event_store/browser/layout.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module RubyEventStore
+  module Browser
+    class Layout
+      def initialize(stylesheets_resolver, scripts_resolver, nav_links_resolver, views_roots:)
+        @stylesheets_resolver = stylesheets_resolver
+        @scripts_resolver = scripts_resolver
+        @nav_links_resolver = nav_links_resolver
+        @views_roots = views_roots
+      end
+
+      def with_views_root(views_root)
+        Layout.new(
+          @stylesheets_resolver,
+          @scripts_resolver,
+          @nav_links_resolver,
+          views_roots: @views_roots + [views_root],
+        )
+      end
+
+      def render(template, urls:, title:, **locals)
+        content = renderer.render(template, urls: urls, **locals)
+        [200, { "content-type" => "text/html;charset=utf-8" }, [wrap(renderer, content, urls, title)]]
+      end
+
+      def render_partial(template, urls:, **locals)
+        renderer.render(template, urls: urls, **locals)
+      end
+
+      def not_found(urls, message:)
+        content = renderer.render("not_found", message: message)
+        [404, { "content-type" => "text/html;charset=utf-8" }, [wrap(renderer, content, urls, "Not found")]]
+      end
+
+      private
+
+      def renderer
+        Renderer.new([*@views_roots, Renderer::VIEWS_ROOT])
+      end
+
+      def wrap(renderer, content, urls, title)
+        renderer.render(
+          "layout",
+          content: content,
+          urls: urls,
+          title: title,
+          extension_stylesheets: @stylesheets_resolver.call(urls),
+          extension_scripts: @scripts_resolver.call(urls),
+          extension_nav_links: @nav_links_resolver.call(urls),
+        )
+      end
+    end
+  end
+end

data/lib/ruby_event_store/browser/renderer.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+require "erb"
+require "json"
+
+module RubyEventStore
+  module Browser
+    class Renderer
+      VIEWS_ROOT = File.expand_path("views", __dir__).freeze
+
+      class Context
+        include ERB::Util
+        alias_method :h, :html_escape
+
+        def initialize(renderer, locals)
+          @_renderer = renderer
+          locals.each { |k, v| define_singleton_method(k) { v } }
+        end
+
+        def render(template, **locals)
+          @_renderer.render(template, **locals)
+        end
+
+        def safe_json(value)
+          if value.is_a?(Float) && value.infinite? && value.positive?
+            '"Infinity"'
+          elsif value.is_a?(Float) && value.infinite?
+            '"-Infinity"'
+          elsif value.is_a?(Float) && value.nan?
+            '"NaN"'
+          elsif value.is_a?(Float) && value == value.to_i
+            value.to_i.to_s
+          elsif value.is_a?(Hash)
+            "{#{value.map { |k, v| "#{k.to_json}:#{safe_json(v)}" }.join(",")}}"
+          elsif value.is_a?(Array)
+            "[#{value.map { |v| safe_json(v) }.join(",")}]"
+          else
+            value.to_json
+          end
+        end
+
+        def get_binding
+          binding
+        end
+      end
+
+      def initialize(views_roots = [VIEWS_ROOT])
+        @views_roots = views_roots
+      end
+
+      def render(template, **locals)
+        context = Context.new(self, locals)
+        ERB.new(File.read(template_path(template)), trim_mode: "-").result(context.get_binding)
+      end
+
+      private
+
+      def template_path(template)
+        @views_roots.map { |root| File.join(root, "#{template}.html.erb") }.find { |path| File.exist?(path) } ||
+          raise(ArgumentError, "Template not found: #{template}")
+      end
+    end
+  end
+end

data/lib/ruby_event_store/browser/urls.rb

@@ -3,78 +3,74 @@
 module RubyEventStore
   module Browser
     class Urls
-      def self.from_configuration(host, root_path, api_url = nil)
-        new(host, root_path, api_url)
+      def self.from_configuration(host, root_path)
+        new(host, root_path)
       end
 
       def self.initial
-        new(nil, nil, nil)
+        new(nil, nil)
       end
 
       def with_request(request)
-        Urls.new(host || request.base_url, root_path || request.script_name, api_url)
+        Urls.new(host || request.base_url, root_path || request.script_name)
       end
 
-      attr_reader :app_url, :api_url, :host, :root_path
+      attr_reader :app_url, :host, :root_path
 
-      def initialize(host, root_path, api_url)
+      def initialize(host, root_path)
         @host = host
         @root_path = root_path
         @app_url = [host, root_path].compact.reduce(:+)
-        @api_url = api_url || ("#{app_url}/api" if app_url)
-        @gem_source = GemSource.new($LOAD_PATH)
       end
 
-      def events_url
-        "#{api_url}/events"
+      def stream_url(stream_name)
+        "#{app_url}/streams/#{Rack::Utils.escape(stream_name)}"
       end
 
-      def streams_url
-        "#{api_url}/streams"
+      def event_url(event_id)
+        "#{app_url}/events/#{event_id}"
       end
 
-      def paginated_events_from_stream_url(id:, position: nil, direction: nil, count: nil)
-        stream_name = Rack::Utils.escape(id)
-        query_string =
+      def stream_page_url(stream_name, cursor, count)
+        query =
           URI.encode_www_form(
-            { "page[position]" => position, "page[direction]" => direction, "page[count]" => count }.compact,
+            [["page[position]", cursor[:position]], ["page[direction]", cursor[:direction]], ["page[count]", count]],
           )
-
-        if query_string.empty?
-          "#{api_url}/streams/#{stream_name}/relationships/events"
-        else
-          "#{api_url}/streams/#{stream_name}/relationships/events?#{query_string}"
-        end
+        "#{stream_url(stream_name)}?#{query}"
       end
 
-      def browser_js_url
-        name = "ruby_event_store_browser.js"
-        gem_source.from_git? ? cdn_file_url(name) : local_file_url(name)
+      def swimlane_url(stream_names, sort = nil)
+        "#{app_url}/swimlane?#{swimlane_query(stream_names, sort)}"
       end
 
-      def browser_css_url
-        name = "ruby_event_store_browser.css"
-        gem_source.from_git? ? cdn_file_url(name) : local_file_url(name)
+      def swimlane_more_url(stream_names, cursor, sort)
+        "#{app_url}/swimlane/more?#{swimlane_query(stream_names, sort, [["cursor", cursor]])}"
       end
 
-      def bootstrap_js_url
-        "#{app_url}/bootstrap.js"
+      def app_url_for(*segments, query: nil)
+        path = segments.map { |segment| Rack::Utils.escape(segment) }.join("/")
+        query ? "#{app_url}/#{path}?#{URI.encode_www_form(query)}" : "#{app_url}/#{path}"
       end
 
-      def ==(o)
-        self.class.eql?(o.class) && app_url.eql?(o.app_url) && api_url.eql?(o.api_url)
+      def browser_js_url
+        "#{app_url}/#{BROWSER_JS}"
       end
 
-      private
-
-      attr_reader :gem_source
+      def browser_css_url
+        "#{app_url}/#{BROWSER_CSS}"
+      end
 
-      def local_file_url(name)
-        "#{app_url}/#{name}"
+      def ==(other)
+        self.class.eql?(other.class) && app_url.eql?(other.app_url)
       end
 
-      def cdn_file_url(name)
-        "https://cdn.railseventstore.org/#{gem_source.version}/#{name}"
+      private
+
+      def swimlane_query(stream_names, sort, extra = [])
+        pairs = stream_names.map { |name| ["streams[]", name] }
+        pairs.concat(extra)
+        pairs << ["sort", sort] if sort
+        URI.encode_www_form(pairs)
       end
     end
   end

data/lib/ruby_event_store/browser/version.rb

@@ -2,6 +2,6 @@
 
 module RubyEventStore
   module Browser
-    VERSION = "3.0.1"
+    VERSION = "3.1.0"
   end
 end

data/lib/ruby_event_store/browser/views/_clipboard_icon.html.erb

@@ -0,0 +1 @@
+<svg class="<%= classes %>" fill="none" height="<%= size %>" width="<%= size %>" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>

data/lib/ruby_event_store/browser/views/_clock_icon.html.erb

@@ -0,0 +1 @@
+<svg class="size-3 text-gray-400" fill="none" height="24" width="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>

data/lib/ruby_event_store/browser/views/_json_tree.html.erb

@@ -0,0 +1 @@
+<div class="font-[monospace] whitespace-pre">{<ul class="list-none ml-[26px] pl-0"><% hash.sort_by { |key, _| key.to_s }.each do |key, value| %><li class="relative"><span class="font-bold"><%= h(key) %></span>: <span class="<%= case value when String then "text-[green]" when Numeric then "text-[blue]" when true, false then "text-[firebrick]" when nil then "text-[gray]" else "text-gray-800" end %>"><%= h(safe_json(value)) %></span>,</li><% end %></ul>}</div>

data/lib/ruby_event_store/browser/views/_raw_section.html.erb

@@ -0,0 +1,9 @@
+<section class="space-y-4">
+  <header class="flex justify-between border-gray-400 border-b text-xs pb-2">
+    <h2 class="text-gray-500 uppercase font-bold"><%= title %></h2>
+    <button data-controller="clipboard" data-clipboard-text-value="<%= h(safe_json(hash)) %>" data-action="clipboard#copy" class="text-red-700 no-underline"><%= render("_clipboard_icon", classes: "text-gray-400 hover:text-red-700", size: 16) %></button>
+  </header>
+  <div class="overflow-auto w-full">
+    <%= render("_json_tree", hash: hash) %>
+  </div>
+</section>

data/lib/ruby_event_store/browser/views/_timestamp.html.erb

@@ -0,0 +1,7 @@
+<section class="space-y-1<%= top ? " pt-3" : "" %> cursor-help" data-timezone-target="zone" title="UTC">
+  <header class="flex items-center gap-1 text-xs">
+    <%= render("_clock_icon") %>
+    <h2 class="text-gray-500 uppercase font-bold"><%= title %></h2>
+  </header>
+  <div class="overflow-auto w-full text-sm font-bold font-mono pl-4 text-gray-700 tracking-tight" data-timezone-target="time" data-iso="<%= time.utc.iso8601(6) %>"><%= time.utc.strftime("%Y-%m-%dT%H:%M:%S.%3N") %></div>
+</section>

data/lib/ruby_event_store/browser/views/events/show.html.erb

@@ -0,0 +1,85 @@
+<div class="py-8 md:py-12 container mx-auto space-y-10">
+  <header class="flex items-start justify-between gap-4 flex-wrap md:flex-nowrap">
+    <div class="flex flex-col items-start">
+      <h1 class="font-bold text-2xl break-words min-w-0 mb-2"><%= h(event.event_type) %></h1>
+      <p class="flex gap-2 md:items-center min-w-0 text-sm flex-wrap mb-4">
+        <span class="whitespace-nowrap text-xs text-gray-500 uppercase font-bold">Event ID:</span>
+        <button data-controller="clipboard" data-clipboard-text-value="<%= event.event_id %>" data-action="clipboard#copy" class="flex items-center text-left gap-2 group font-mono text-gray-800 font-bold text-sm">
+          <%= event.event_id %>
+          <%= render("_clipboard_icon", classes: "size-4 -translate-y-0.5 opacity-0 group-hover:opacity-100", size: 24) %>
+        </button>
+      </p>
+      <% if extension_links.any? -%>
+        <div class="flex gap-2">
+          <% extension_links.each do |link| -%>
+            <a class="inline-block text-center text-sm bg-red-700 text-gray-100 border border-red-700 rounded px-2 py-1" href="<%= h(link[:url]) %>"><%= h(link[:label]) %></a>
+          <% end -%>
+        </div>
+      <% end -%>
+    </div>
+    <div class="space-y-4">
+      <%= render("_timestamp", title: "Created at", time: event.metadata[:timestamp], top: true) %>
+      <%= render("_timestamp", title: "Valid at", time: event.metadata[:valid_at], top: false) %>
+    </div>
+  </header>
+
+  <div class="w-full text-left grid md:grid-cols-2 gap-8 overflow-hidden">
+    <%= render("_raw_section", title: "Raw Data", hash: event.data) %>
+    <%= render("_raw_section", title: "Raw Metadata", hash: metadata) %>
+  </div>
+
+  <div>
+    <h2 class="font-bold text-xl mb-4">Event streams</h2>
+    <ul class="list-disc pl-4 space-y-2">
+      <% streams.each do |stream| -%>
+        <li>
+          <a class="text-red-700 no-underline" href="<%= urls.stream_url(stream) %>"><%= h(stream) %></a>
+        </li>
+      <% end -%>
+    </ul>
+  </div>
+
+  <% if parent_event -%>
+    <div>
+      <h2 class="font-bold text-xl mb-4">Related</h2>
+      <ul class="list-disc pl-4 space-y-2">
+        <li>Parent event: <a class="text-red-700 no-underline" href="<%= urls.event_url(parent_event.event_id) %>"><%= parent_event.event_id %></a></li>
+      </ul>
+    </div>
+  <% end -%>
+
+  <% if caused_by.any? -%>
+    <div class="space-y-4">
+      <h2 class="font-bold text-xl">Events caused by this event:</h2>
+      <table class="w-full text-left table-fixed">
+        <thead class="align-bottom leading-tight sticky top-0 bg-white/70 backdrop-blur-sm text-gray-500 uppercase text-xs">
+          <tr class="border-gray-400 border-b">
+            <th class="p-4">Event name</th>
+            <th class="py-4 pr-4 lg:w-80">Event id</th>
+          </tr>
+        </thead>
+        <tbody class="align-top">
+          <% caused_by.each do |child| -%>
+            <tr class="border-gray-50 border-b hover:bg-gray-100">
+              <td>
+                <a class="text-red-700 no-underline min-h-11 w-full flex items-center px-4" href="<%= urls.event_url(child.event_id) %>"><%= h(child.event_type) %></a>
+              </td>
+              <td class="font-mono text-sm leading-none font-medium align-middle">
+                <a class="no-underline h-full min-h-11 flex items-center" href="<%= urls.event_url(child.event_id) %>"><%= child.event_id %></a>
+              </td>
+            </tr>
+          <% end -%>
+        </tbody>
+        <tfoot>
+          <tr>
+            <td class="text-gray-500 py-4 text-center text-xs" colspan="2"><%= "The results may be truncated, check stream for full information." if caused_by.size == PAGE_SIZE %></td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  <% else -%>
+    <div>
+      <h2 class="font-bold text-xl">Events caused by this event: none</h2>
+    </div>
+  <% end -%>
+</div>

data/lib/ruby_event_store/browser/views/layout.html.erb

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>RubyEventStore::Browser<% if defined?(title) && title %> - <%= h(title) %><% end %></title>
+    <link type="text/css" rel="stylesheet" href="<%= urls.browser_css_url %>">
+    <% extension_stylesheets.each do |href| -%>
+      <link type="text/css" rel="stylesheet" href="<%= href %>">
+    <% end -%>
+    <meta name="robots" content="noindex, nofollow">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="theme-color" content="#ffffff">
+  </head>
+  <body data-controller="swimlane" data-swimlane-base-url-value="<%= urls.app_url %>">
+    <div class="flex flex-col w-full min-h-screen font-sans antialiased leading-relaxed text-gray-800 bg-gray-100" data-controller="search timezone" data-search-base-value="<%= urls.app_url %>" data-action="keydown.meta+k@window->search#open keydown.ctrl+k@window->search#open">
+      <header>
+        <nav class="sticky flex justify-between h-16 px-8 bg-red-700">
+          <div class="flex items-center gap-6">
+            <a href="<%= urls.app_url %>" class="font-semibold text-gray-100">Ruby Event Store</a>
+            <% extension_nav_links.each do |link| -%>
+            <a href="<%= h(link[:url]) %>" class="text-sm text-red-100 hover:text-white"><%= h(link[:label]) %></a>
+            <% end -%>
+          </div>
+          <div class="flex items-center gap-2">
+            <button class="flex items-center gap-2 px-3 text-sm text-red-100 bg-red-800 rounded outline-none hover:bg-red-900 h-9" data-action="search#open">
+              <svg class="size-4" fill="none" height="24" width="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>Go to stream&hellip;<span class="text-xs">&#x2318;K</span>
+            </button>
+          </div>
+        </nav>
+      </header>
+      <main class="flex w-full px-4 bg-white grow">
+        <%= content %>
+        <dialog data-search-target="dialog" class="open:flex flex-col items-center justify-center fixed inset-0 size-full max-w-full max-h-full bg-transparent backdrop:bg-black/50">
+          <button class="fixed inset-0 -z-10 cursor-default" data-action="search#close" tabindex="-1" aria-label="Close search"></button>
+          <form data-action="search#go" class="w-full max-w-md p-4 bg-white rounded-lg shadow-xl">
+            <div class="relative">
+              <svg class="size-4 text-gray-400 absolute pointer-events-none top-3.5 left-2" fill="none" height="24" width="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              <input data-search-target="input" class="w-full py-2 pl-8 pr-12 text-gray-800 rounded outline-none appearance-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" placeholder="Go to stream&hellip;" autofocus>
+              <span class="absolute top-0 h-full flex items-center right-3 text-[.5rem] pointer-events-none">
+                <span class="block p-1 font-bold text-gray-500 border border-gray-300 rounded bg-gray-50">ESC</span>
+              </span>
+            </div>
+          </form>
+        </dialog>
+      </main>
+      <footer class="flex justify-between px-8 py-4 pb-20 border-t border-gray-400">
+        <div class="text-sm text-gray-500">RubyEventStore v<%= RubyEventStore::VERSION %><span class="inline-block ml-4 font-bold text-gray-400">&bull;</span><a href="https://railseventstore.org/docs/getting-started/install" class="ml-4">Documentation</a><span class="inline-block ml-4 font-bold text-gray-400">&bull;</span><a href="https://railseventstore.org/support/" class="ml-4">Support</a></div>
+        <div class="flex gap-2 text-sm text-gray-500 item-center">Display times in timezone:<select data-timezone-target="select" data-action="change->timezone#change">
+            <option value="UTC">UTC</option>
+          </select>
+        </div>
+      </footer>
+    </div>
+    <script type="module" src="<%= urls.browser_js_url %>"></script>
+    <% extension_scripts.each do |src| -%>
+      <script type="module" src="<%= src %>"></script>
+    <% end -%>
+    <div data-swimlane-target="drawer" class="fixed z-10 hidden has-[li]:flex flex-col items-end justify-end gap-4 bottom-8 right-8">
+      <div data-swimlane-target="drawer-content" class="hidden [[data-swimlane-drawer-open]_&]:flex flex-col items-stretch gap-3 p-4 bg-white rounded-md shadow-md w-72 max-w-[90vw]">
+        <ul data-swimlane-target="drawerList" class="flex flex-col divide-y divide-gray-100"></ul>
+        <button data-action="swimlane#go" title="Go to swimlane view" class="inline-flex items-center justify-center gap-2 px-3 py-1.5 text-sm text-gray-100 bg-red-700 rounded hover:bg-red-800">
+          <span>Go to swimlane view</span>
+          <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
+        </button>
+      </div>
+      <button class="flex items-center justify-center text-xl text-white bg-blue-800 rounded-full size-10"  data-action="swimlane#toggleDrawer"><span class="sr-only">Toggle swimlane drawer</span>≈</button>
+    </div>
+  </body>
+</html>

data/lib/ruby_event_store/browser/views/not_found.html.erb

@@ -0,0 +1,3 @@
+<div class="py-12">
+  <h1 class="font-bold px-8 text-2xl"><%= h(message) %></h1>
+</div>

data/lib/ruby_event_store/browser/views/streams/show.html.erb

@@ -0,0 +1,74 @@
+<div class="container py-8 mx-auto">
+  <div class="flex justify-between">
+    <h1 class="text-2xl font-bold">Events in <%= h(stream_name) %> </h1>
+    <div>
+      <ul class="flex">
+        <% [["first", pagination[:first]], ["previous", pagination[:prev]], ["next", pagination[:next]], ["last", pagination[:last]]].each do |label, url| -%>
+          <li>
+            <% if url -%>
+              <a class="px-2 py-1 mr-1 text-sm text-center text-red-700 border border-red-700 rounded" href="<%= url %>"><%= label %></a>
+            <% else -%>
+              <a class="px-2 py-1 mr-1 text-sm text-center border rounded cursor-not-allowed text-red-700/50 border-red-700/50"><%= label %></a>
+            <% end -%>
+          </li>
+        <% end -%>
+      </ul>
+    </div>
+  </div>
+  <% unless stream_name == SERIALIZED_GLOBAL_STREAM_NAME -%>
+  <button class="inline-flex items-center gap-1 px-2 py-1 mt-3 text-sm text-center text-gray-100 bg-blue-800 border border-blue-800 rounded hover:bg-blue-900" data-stream-name="<%= h(stream_name) %>" data-action="swimlane#add">
+    <svg class="pointer-events-none size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+    Add to swimlane
+  </button>
+  <% end -%>
+
+  <% links = [*extension_links].compact -%>
+  <% if links.any? -%>
+    <div class="flex gap-2 pt-3">
+      <% links.each do |link| -%>
+        <a class="inline-block px-2 py-1 text-sm text-center text-gray-100 bg-red-700 border border-red-700 rounded" href="<%= h(link[:url]) %>"><%= h(link[:label]) %></a>
+      <% end -%>
+    </div>
+  <% end -%>
+  <div>
+    <div class="w-full overflow-x-scroll sm:overflow-visible">
+      <table class="w-full my-10 text-left lg:table-fixed">
+        <thead class="sticky top-0 text-xs leading-tight text-gray-500 uppercase align-bottom bg-white/70 backdrop-blur-sm">
+          <tr class="border-b border-gray-400">
+            <th class="p-4">Event name</th>
+            <th class="py-4 pr-4 lg:w-80">Event id</th>
+            <th class="py-4 pr-4 text-right lg:w-60"><span class="cursor-help" data-timezone-target="zone" title="UTC">Created at</span></th>
+          </tr>
+        </thead>
+        <tbody class="align-top">
+          <% events.each do |event| -%>
+            <% href = urls.event_url(event.event_id) -%>
+            <tr class="border-b border-gray-50 hover:bg-gray-100">
+              <td>
+                <a class="flex items-center w-full px-4 text-red-700 no-underline min-h-11" href="<%= href %>"><span class="min-w-0 break-words"><%= h(event.event_type) %></span></a>
+              </td>
+              <td class="font-mono text-sm font-medium leading-none align-middle">
+                <a class="flex items-center h-full no-underline min-h-11" href="<%= href %>"><%= event.event_id %></a>
+              </td>
+              <td class="font-mono text-sm font-medium leading-none">
+                <a class="flex items-center justify-end px-4 no-underline min-h-11" href="<%= href %>"><span data-timezone-target="time" data-iso="<%= event.metadata[:timestamp].utc.iso8601(6) %>" title="UTC"><%= event.metadata[:timestamp].utc.strftime("%Y-%m-%dT%H:%M:%S.%3N") %></span></a>
+              </td>
+            </tr>
+          <% end -%>
+        </tbody>
+      </table>
+    </div>
+  </div>
+  <div>
+    <% if related_streams && related_streams.any? -%>
+      <div>
+        <h2 class="text-xl font-bold">Related streams:</h2>
+        <ul class="pl-8 list-disc">
+          <% related_streams.each do |stream| -%>
+            <li><a class="text-red-700 no-underline" href="<%= urls.stream_url(stream) %>"><%= h(stream) %></a></li>
+          <% end -%>
+        </ul>
+      </div>
+    <% end -%>
+  </div>
+</div>

data/lib/ruby_event_store/browser/views/swimlane/_rows.html.erb

@@ -0,0 +1,20 @@
+<% time_field = sort == "as_of" ? :valid_at : :timestamp -%>
+<% events.each_with_index do |(names, event), index| -%>
+  <% next_event = events[index + 1]&.last -%>
+  <% same_group = next_event && next_event.metadata[time_field].utc.iso8601(3) == event.metadata[time_field].utc.iso8601(3) -%>
+  <% cell = "align-middle px-2 py-1#{" border-b border-gray-300" unless same_group}" -%>
+  <tr>
+    <td class="<%= cell %> font-mono text-xs text-gray-500 whitespace-nowrap">
+      <% unless same_group -%>
+        <span data-swimlane-view-target="time" data-iso="<%= event.metadata[time_field].utc.iso8601(6) %>" title="UTC"><%= event.metadata[time_field].utc.strftime("%Y-%m-%dT%H:%M:%S.%3N") %></span>
+      <% end -%>
+    </td>
+    <% stream_names.each_with_index do |stream_name, column| -%>
+      <td class="<%= cell %><%= " border-l border-gray-200" if column.positive? %><%= " hover:bg-gray-100" if names.include?(stream_name) %>">
+        <% if names.include?(stream_name) -%>
+          <a href="<%= urls.event_url(event.event_id) %>" class="no-underline text-red-700 text-sm break-words"><%= h(event.event_type) %></a>
+        <% end -%>
+      </td>
+    <% end -%>
+  </tr>
+<% end -%>

data/lib/ruby_event_store/browser/views/swimlane/show.html.erb

@@ -0,0 +1,55 @@
+<div class="w-full shrink-0" data-controller="swimlane-view swimlane-add" data-swimlane-view-more-url-value="<%= more_url %>" data-swimlane-add-base-url-value="<%= urls.swimlane_url(stream_names, sort) %>">
+  <div class="container py-8 mx-auto">
+    <div class="flex items-center justify-between">
+      <h1 class="text-2xl font-bold">Comparing <%= h(stream_names.join(", ")) %></h1>
+      <button class="px-2 py-1 text-sm text-center text-red-700 border border-red-700 rounded" data-action="swimlane-add#open">Add stream</button>
+    </div>
+    <% missing_stream_names.each do |stream_name| -%>
+      <p class="px-4 py-3 mt-4 text-sm text-yellow-800 border border-yellow-300 rounded bg-yellow-50">
+        Stream <span class="font-bold"><%= h(stream_name) %></span> does not exist.
+      </p>
+    <% end -%>
+    <% if stream_names.any? -%>
+      <div class="flex items-center gap-2 pt-3 text-sm">
+        <span class="text-gray-500">Sort by</span>
+        <% if sort == "as_of" -%>
+          <a class="text-gray-500 no-underline hover:text-red-700" href="<%= urls.swimlane_url(stream_names) %>">created at</a>
+          <span class="font-bold text-red-700">valid at</span>
+        <% else -%>
+          <span class="font-bold text-red-700">created at</span>
+          <a class="text-gray-500 no-underline hover:text-red-700" href="<%= urls.swimlane_url(stream_names, "as_of") %>">valid at</a>
+        <% end -%>
+      </div>
+      <div class="my-10 overflow-x-auto">
+        <table class="text-left">
+          <thead class="text-xs leading-tight text-gray-500 uppercase align-bottom">
+            <tr>
+              <th class="px-2 pb-2 text-base font-bold text-gray-800 normal-case border-b border-gray-400 whitespace-nowrap">Time</th>
+              <% stream_names.each_with_index do |stream_name, column| -%>
+                <th class="font-bold border-b border-gray-400 pb-2 px-2 normal-case text-base text-gray-800<%= " border-l" if column.positive? %>">
+                  <div class="flex items-center justify-between gap-2">
+                    <span class="break-words"><%= h(stream_name) %></span>
+                    <% if stream_names.size > 1 -%>
+                      <a class="text-xl leading-none text-gray-400 no-underline hover:text-red-700" href="<%= urls.swimlane_url(stream_names - [stream_name], sort) %>" title="Remove from comparison">&times;</a>
+                    <% end -%>
+                  </div>
+                </th>
+              <% end -%>
+            </tr>
+          </thead>
+          <tbody data-swimlane-view-target="tbody">
+            <%= render("swimlane/_rows", urls: urls, stream_names: stream_names, events: events, sort: sort) %>
+          </tbody>
+        </table>
+      </div>
+    <% end -%>
+  </div>
+  <dialog data-swimlane-add-target="dialog" class="open:flex flex-col items-center justify-center fixed inset-0 size-full max-w-full max-h-full bg-transparent backdrop:bg-black/50">
+    <button class="fixed inset-0 -z-10 cursor-default" data-action="swimlane-add#close" tabindex="-1" aria-label="Close"></button>
+    <form data-action="swimlane-add#go" class="w-full max-w-md p-4 bg-white rounded-lg shadow-xl">
+      <div class="relative">
+        <input data-swimlane-add-target="input" class="w-full px-3 py-2 text-gray-800 rounded outline-none appearance-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" placeholder="Add stream to compare&hellip;" autofocus>
+      </div>
+    </form>
+  </dialog>
+</div>

data/lib/ruby_event_store/browser.rb

@@ -1,18 +1,30 @@
 # frozen_string_literal: true
 
+require "digest"
+
 module RubyEventStore
   module Browser
     PAGE_SIZE = 20
     SERIALIZED_GLOBAL_STREAM_NAME = "all".freeze
     DEFAULT_RELATED_STREAMS_QUERY = ->(stream_name) { [] }
+
+    ASSETS_ROOT = File.expand_path("../../public", __dir__).freeze
+
+    def self.fingerprint(name)
+      base, ext = name.split(".", 2)
+      digest = Digest::MD5.hexdigest(File.binread(File.join(ASSETS_ROOT, name)))[0, 8]
+      "#{base}.#{ext}?v=#{digest}"
+    end
+
+    BROWSER_JS  = fingerprint("ruby_event_store_browser.js")
+    BROWSER_CSS = fingerprint("ruby_event_store_browser.css")
   end
 end
 
-require_relative "browser/get_event"
-require_relative "browser/json_api_event"
-require_relative "browser/json_api_stream"
 require_relative "browser/get_events_from_stream"
-require_relative "browser/get_stream"
+require_relative "browser/get_events_from_streams"
 require_relative "browser/urls"
-require_relative "browser/gem_source"
 require_relative "browser/router"
+require_relative "browser/renderer"
+require_relative "browser/layout"
+require_relative "browser/extension_context"