wrap_it_ruby 0.2.0 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8ce1f71d5f276d68be720746927f8329d7bc67b7a10feead3c3192f12cc4e419
-  data.tar.gz: c66c7abbdd059a99148798242cc0796694410f98cbd96dec504e7bf1ee1342d8
+  metadata.gz: 7f6ed92be744074125808b44a1aa65cf1dafd00be14c8190824904841d275b6d
+  data.tar.gz: 4d3efb23f4ffd7406fd786fd41d98f6f4cb0b2ba35c9e1fd5c43d6c7027771a3
 SHA512:
-  metadata.gz: d3a604c19cba59629d6714be6f04ee0a5481578be2dd4de4e8c40225521dd6c1408ea4f6ddd6702a957938273db2bc1350fa881ffbdcb568187c87e762977138
-  data.tar.gz: 5583c57ac4793d85d57d96d04dab4f0e984358485e366bb311b089ac7187b1dee34ded804cacc4f5e15999c214ff0ef97559cfe88689969253b2dad352d7676f
+  metadata.gz: c7964a50fad62192b45d0e2a238217a6be39c6142f95b8710f5ad61a3f5b3bf3c4c0346f47d898908cb9ed74282f452c29c9add1c32bbefc9c1f207d91b08b3d
+  data.tar.gz: '097445c1d52ed9248c6feff3e1606642c1087e8ae68be7a2d99cf175cecbbc6e0c0f87a70b503496a640c1cc8232a8bb100d0ad82eaac187954a726e89cb9bcb'

data/app/assets/javascripts/wrap_it_ruby/interception.js

@@ -14,6 +14,13 @@
 
   console.log('[interception]', 'loaded');
 
+  // Block service worker registration — proxied apps share the proxy
+  // origin so a SW registered by one app (e.g. code-server) would
+  // intercept requests for all proxied sites with stale cached paths.
+  if (navigator.serviceWorker) {
+    navigator.serviceWorker.register = () => Promise.resolve()
+  }
+
   var _fetch        = window.fetch;
   var _XHR          = window.XMLHttpRequest;
   var _xhrOpen      = _XHR.prototype.open;
@@ -92,15 +99,16 @@
     const url = isReq ? input.url : String(input instanceof URL ? input.href : input)
 
     const headers = new Headers(init.headers || (isReq ? input.headers : {}))
-    headers.set('x-proxy-host', '_proxy')
+    headers.set('x-proxy-host', PROXY_HOST)
 
     const newInit = {
       method: init.method || (isReq ? input.method : 'GET'),
       headers,
       body: 'body' in init ? init.body : (isReq ? input.body : null),
+      referrer: `/_proxy/${PROXY_HOST}/`,
     }
 
-    const passthrough = ['credentials', 'mode', 'cache', 'redirect', 'referrer',
+    const passthrough = ['credentials', 'mode', 'cache', 'redirect',
       'referrerPolicy', 'integrity', 'keepalive', 'signal']
     for (const key of passthrough) {
       if (key in init) newInit[key] = init[key]
@@ -134,39 +142,54 @@
       _xhrOpen.call(this, meta.method, rewritten, ...meta.openArgs)
     }
 
-    _xhrSetHeader.call(this, 'x-proxy-host', '_proxy')
+    _xhrSetHeader.call(this, 'x-proxy-host', PROXY_HOST)
     return _xhrSend.call(this, body)
   }
 
   // ============================= WebSocket ===================================
 
-  //window.WebSocket = function (url, protocols) {
-  //  var req = { type: 'websocket', url: rewriteUrl(url), originalUrl: url,
-  //              method: 'GET', headers: {}, body: null };
-  //  runRequestHooks(req);
-  //  if (protocols !== undefined) return new _WebSocket(req.url, protocols);
-  //  return new _WebSocket(req.url);
-  //};
-  //window.WebSocket.prototype  = _WebSocket.prototype;
-  //window.WebSocket.CONNECTING = _WebSocket.CONNECTING;
-  //window.WebSocket.OPEN       = _WebSocket.OPEN;
-  //window.WebSocket.CLOSING    = _WebSocket.CLOSING;
-  //window.WebSocket.CLOSED     = _WebSocket.CLOSED;
-
-  //// ============================ EventSource ==================================
-
-  //if (_EventSource) {
-  //  window.EventSource = function (url, dict) {
-  //    var raw = typeof url === 'string' ? url : url.href;
-  //    var req = { type: 'eventsource', url: rewriteUrl(raw), originalUrl: raw,
-  //                method: 'GET', headers: {}, body: null };
-  //    runRequestHooks(req);
-  //    return new _EventSource(req.url, dict);
-  //  };
-  //  window.EventSource.prototype  = _EventSource.prototype;
-  //  window.EventSource.CONNECTING = _EventSource.CONNECTING;
-  //  window.EventSource.OPEN       = _EventSource.OPEN;
-  //  window.EventSource.CLOSED     = _EventSource.CLOSED;
-  //}
+  // Rewrite WebSocket URLs so they go through the proxy.
+  // wss://code.cia.net/ws → wss://4000.cia.net/_proxy/code.cia.net/ws
+  const rewriteWsUrl = (url) => {
+    const raw = typeof url === 'string' ? url : url.toString()
+    try {
+      const parsed = new URL(raw)
+      if (parsed.host === window.__hostingSite) return raw
+      // Rewrite wss://upstream/path → wss://proxy/_proxy/upstream/path
+      return `${parsed.protocol}//${window.__hostingSite}/_proxy/${parsed.host}${parsed.pathname}${parsed.search}`
+    } catch {
+      // Relative URL — prefix with proxy host
+      if (raw.startsWith('/')) {
+        return `wss://${window.__hostingSite}/_proxy/${PROXY_HOST}${raw}`
+      }
+      return raw
+    }
+  }
+
+  window.WebSocket = function (url, protocols) {
+    const rewritten = rewriteWsUrl(url)
+    console.log('[interception] WebSocket', url, '->', rewritten)
+    if (protocols !== undefined) return new _WebSocket(rewritten, protocols)
+    return new _WebSocket(rewritten)
+  }
+  window.WebSocket.prototype  = _WebSocket.prototype
+  window.WebSocket.CONNECTING = _WebSocket.CONNECTING
+  window.WebSocket.OPEN       = _WebSocket.OPEN
+  window.WebSocket.CLOSING    = _WebSocket.CLOSING
+  window.WebSocket.CLOSED     = _WebSocket.CLOSED
+
+  // ============================ EventSource ==================================
+
+  if (_EventSource) {
+    window.EventSource = function (url, dict) {
+      const raw = typeof url === 'string' ? url : url.href
+      const rewritten = raw.startsWith('/') ? `/_proxy/${PROXY_HOST}${raw}` : rewriteUrl(raw)
+      return new _EventSource(rewritten, dict)
+    }
+    window.EventSource.prototype  = _EventSource.prototype
+    window.EventSource.CONNECTING = _EventSource.CONNECTING
+    window.EventSource.OPEN       = _EventSource.OPEN
+    window.EventSource.CLOSED     = _EventSource.CLOSED
+  }
 
 })(window);

data/app/assets/stylesheets/wrap_it_ruby/application.css

@@ -8,6 +8,32 @@ html, body {
   background-color: white;
 }
 
+#site-content {
+  position: relative;
+}
+
+#site-content::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-shadow: inset 0px 0px 4px 1px rgb(0 0 0 / 19%);
+  pointer-events: none;
+  border-radius: inherit;
+  border: 1px solid rgb(151 151 151 / 79%);
+}
+
+/*
+.iframe-wrapper::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 1px solid rgb(151 151 151 / 79%);
+  box-shadow: inset 0px 0px 4px 1px rgb(0 0 0 / 19%);
+  pointer-events: none;
+  border-radius: inherit;
+}
+*/
+
 #site-wrapper {
   display: flex;
   flex-direction: column;
@@ -25,11 +51,55 @@ html, body {
     margin: 7px;
     margin-top: 0px;
     border-radius: 15px;
-    background-color: grey;
+    #background-color: grey;
     overflow: hidden;
   }
 }
 
+/*! Sortable Tree 0.7.6, (c) 2025 Marc Anton Dahmen, MIT license */
+:root {
+  --st-label-height: 2.5rem;
+  --st-subnodes-padding-left: 1.5rem;
+  --st-collapse-icon-height: var(--st-label-height);
+  --st-collapse-icon-width: 1.25rem;
+  --st-collapse-icon-size: 0.75rem;
+}
+sortable-tree-node {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+}
+sortable-tree-node * {
+  user-select: none;
+}
+sortable-tree-node > :first-child {
+  display: flex;
+  align-items: center;
+  height: var(--st-label-height);
+}
+sortable-tree-node > :nth-child(2) {
+  display: none;
+  flex-direction: column;
+  padding-left: var(--st-subnodes-padding-left);
+}
+sortable-tree-node[open] > div:nth-child(2) {
+  display: flex;
+}
+sortable-tree-node > :nth-child(3) {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  top: 0;
+  left: calc(var(--st-collapse-icon-width) * -1);
+  height: var(--st-collapse-icon-height);
+  font-size: var(--st-collapse-icon-size);
+  cursor: pointer;
+}
+sortable-tree-node > :nth-child(2):empty + span {
+  display: none;
+}
+
 #proxy-content {
   height: 100%;
 

data/app/controllers/wrap_it_ruby/menu_settings_controller.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module WrapItRuby
+  class MenuSettingsController < ::ApplicationController
+    def index
+      @menu_items = ::MenuItem.roots.includes(children: :children)
+    end
+
+    def create
+      ::MenuItem.create!(menu_item_params)
+      respond_with_tree_refresh
+    end
+
+    def update
+      item = ::MenuItem.find(params[:id])
+      item.update!(menu_item_params)
+      respond_with_tree_refresh
+    end
+
+    def destroy
+      item = ::MenuItem.find(params[:id])
+      item.destroy!
+      respond_with_tree_refresh
+    end
+
+    def sort
+      ordering = params.require(:ordering)
+
+      ::MenuItem.transaction do
+        ordering.each do |entry|
+          item = ::MenuItem.find(entry[:id])
+          new_parent_id = entry[:parent_id].presence
+
+          if item.parent_id.to_s != new_parent_id.to_s
+            item.remove_from_list
+            item.update!(parent_id: new_parent_id)
+          end
+
+          item.insert_at(entry[:position].to_i)
+        end
+      end
+
+      respond_with_tree_refresh
+    end
+
+    private
+
+    def menu_item_params
+      params.permit(:label, :icon, :route, :url, :item_type, :parent_id)
+    end
+
+    def respond_with_tree_refresh
+      respond_to do |format|
+        format.turbo_stream do
+          render turbo_stream: turbo_stream.replace(
+            'menu-tree-container',
+            partial: 'wrap_it_ruby/menu_settings/tree'
+          )
+        end
+        format.html { head :no_content }
+      end
+    end
+  end
+end

data/app/controllers/wrap_it_ruby/proxy_controller.rb

@@ -11,7 +11,8 @@ module WrapItRuby
         target_domain = menu_item["url"]
 
         target_url  = "#{target_domain}/#{target_path}"
-        @iframe_src = "/_proxy/#{target_url}"
+        proxy_host  = ENV["WRAP_IT_PROXY_HOST"]
+        @iframe_src = proxy_host ? "//#{proxy_host}/_proxy/#{target_url}" : "/_proxy/#{target_url}"
       end
     end
 

data/app/helpers/wrap_it_ruby/menu_helper.rb

@@ -1,8 +1,9 @@
-require "yaml"
+require 'yaml'
 
 module WrapItRuby
   # Loads and queries the menu configuration from the host app's
-  # config/menu.yml file.
+  # config/menu.yml file, or from the database when menu_item_class
+  # is configured.
   #
   # Can be used as a module (extend self) or included in controllers/helpers.
   #
@@ -13,46 +14,321 @@ module WrapItRuby
   module MenuHelper
     def menu_config = load_menu
 
-    # Renders the sidebar menu using rails-active-ui component helpers.
-    # Must be called from a view context where ComponentHelper is included.
+    # Renders the menu entries using rails-active-ui component helpers.
+    # Must be called from inside a Menu { } block in the layout.
+    #
+    # Supports arbitrary nesting depth:
+    #   - Top-level entries with "items" render as Fomantic-UI simple
+    #     dropdown menu items (hover to open).
+    #   - Nested entries with "items" render as flyout sub-dropdowns
+    #     (dropdown icon + nested .menu inside an .item).
+    #   - Leaf entries render as plain linked menu items.
     def render_menu
-      Menu(attached: true) {
-        WrapItRuby::MenuHelper.menu_config.each do |group|
-          if group["items"]
-            group["items"].each do |item|
-              MenuItem(href: item["route"]) { text item["label"] }
-            end
-          else
-            MenuItem(href: group["route"]) { text group["label"] }
-          end
-        end
+      WrapItRuby::MenuHelper.menu_config.each do |entry|
+        render_menu_entry(entry, top_level: true)
+      end
+    end
+
+    # Renders the menu-settings, edit, and add modals.
+    # Call this outside the Menu { } block so modals are not
+    # nested inside the menu bar.
+    def render_menu_modals
+      # Settings modal — sortable tree + add button
+      concat tag.div(id: 'menu-settings-modal', class: 'ui large modal') {
+        safe_join([
+                    tag.i(class: 'close icon'),
+                    tag.div(class: 'header') { tag.i(class: 'bars icon') + ' Menu Settings' },
+                    tag.div(class: 'scrolling content') {
+                      tag.div(id: 'menu-tree-container') { sortable_menu_tree }
+                    },
+                    tag.div(class: 'actions') {
+                      safe_join([
+                                  tag.button(class: 'ui green button', onclick: 'menuSettingsShowAdd()') {
+                                    tag.i(class: 'plus icon') + ' Add Item'
+                                  }
+                                ])
+                    }
+                  ])
+      }
+
+      # Edit modal — stacked on top of settings modal
+      concat tag.div(id: 'menu-edit-modal', class: 'ui small modal') {
+        safe_join([
+                    tag.i(class: 'close icon'),
+                    tag.div(class: 'header') { 'Edit Menu Item' },
+                    tag.div(class: 'content') {
+                      tag.form(class: 'ui form', id: 'menu-edit-form') {
+                        safe_join([
+                                    tag.input(type: 'hidden', name: 'id', id: 'menu-edit-id'),
+                                    tag.div(class: 'two fields') {
+                                      safe_join([
+                                                  tag.div(class: 'field') {
+                                                    tag.label {
+                                                      'Label'
+                                                    } + tag.input(type: 'text', name: 'label', id: 'menu-edit-label')
+                                                  },
+                                                  tag.div(class: 'field') {
+                                                    tag.label {
+                                                      'Icon'
+                                                    } + tag.input(type: 'text', name: 'icon', id: 'menu-edit-icon',
+                                                                  placeholder: 'e.g. server')
+                                                  }
+                                                ])
+                                    },
+                                    tag.div(class: 'two fields', id: 'menu-edit-proxy-fields') {
+                                      safe_join([
+                                                  tag.div(class: 'field') {
+                                                    tag.label {
+                                                      'Route'
+                                                    } + tag.input(type: 'text', name: 'route', id: 'menu-edit-route',
+                                                                  placeholder: '/path')
+                                                  },
+                                                  tag.div(class: 'field') {
+                                                    tag.label {
+                                                      'URL'
+                                                    } + tag.input(type: 'text', name: 'url', id: 'menu-edit-url',
+                                                                  placeholder: 'upstream.example.com')
+                                                  }
+                                                ])
+                                    },
+                                    tag.div(class: 'field') {
+                                      tag.label { 'Type' } +
+                                      tag.select(name: 'item_type', id: 'menu-edit-type', class: 'ui dropdown',
+                                                 onchange: "menuSettingsToggleProxyFields('menu-edit')") {
+                                        safe_join([
+                                                    tag.option(value: 'group') { 'Group' },
+                                                    tag.option(value: 'proxy') { 'Proxy' }
+                                                  ])
+                                      }
+                                    }
+                                  ])
+                      }
+                    },
+                    tag.div(class: 'actions') {
+                      safe_join([
+                                  tag.button(class: 'ui red left floated button', onclick: 'menuSettingsDelete()') {
+                                    tag.i(class: 'trash icon') + ' Delete'
+                                  },
+                                  tag.button(class: 'ui button', onclick: "$('#menu-edit-modal').modal('hide')") {
+                                    'Cancel'
+                                  },
+                                  tag.button(class: 'ui green button', onclick: 'menuSettingsSave()') {
+                                    tag.i(class: 'save icon') + ' Save'
+                                  }
+                                ])
+                    }
+                  ])
+      }
+
+      # Add modal — stacked on top of settings modal
+      concat tag.div(id: 'menu-add-modal', class: 'ui small modal') {
+        safe_join([
+                    tag.i(class: 'close icon'),
+                    tag.div(class: 'header') { 'Add Menu Item' },
+                    tag.div(class: 'content') {
+                      tag.form(class: 'ui form', id: 'menu-add-form') {
+                        safe_join([
+                                    tag.div(class: 'field') {
+                                      tag.label { 'Type' } +
+                                      tag.select(name: 'item_type', id: 'menu-add-type', class: 'ui dropdown',
+                                                 onchange: "menuSettingsToggleProxyFields('menu-add')") {
+                                        safe_join([
+                                                    tag.option(value: 'group') { 'Group' },
+                                                    tag.option(value: 'proxy') { 'Proxy' }
+                                                  ])
+                                      }
+                                    },
+                                    tag.div(class: 'two fields') {
+                                      safe_join([
+                                                  tag.div(class: 'field') {
+                                                    tag.label {
+                                                      'Label'
+                                                    } + tag.input(type: 'text', name: 'label', id: 'menu-add-label')
+                                                  },
+                                                  tag.div(class: 'field') {
+                                                    tag.label {
+                                                      'Icon'
+                                                    } + tag.input(type: 'text', name: 'icon', id: 'menu-add-icon',
+                                                                  placeholder: 'e.g. server')
+                                                  }
+                                                ])
+                                    },
+                                    tag.div(class: 'two fields', id: 'menu-add-proxy-fields', style: 'display:none') {
+                                      safe_join([
+                                                  tag.div(class: 'field') {
+                                                    tag.label {
+                                                      'Route'
+                                                    } + tag.input(type: 'text', name: 'route', id: 'menu-add-route',
+                                                                  placeholder: '/path')
+                                                  },
+                                                  tag.div(class: 'field') {
+                                                    tag.label {
+                                                      'URL'
+                                                    } + tag.input(type: 'text', name: 'url', id: 'menu-add-url',
+                                                                  placeholder: 'upstream.example.com')
+                                                  }
+                                                ])
+                                    },
+                                    tag.div(class: 'field') {
+                                      tag.label { 'Parent' } +
+                                      tag.select(name: 'parent_id', id: 'menu-add-parent', class: 'ui dropdown') {
+                                        safe_join([
+                                                    tag.option(value: '') { 'Root (top level)' },
+                                                    *menu_group_options
+                                                  ])
+                                      }
+                                    }
+                                  ])
+                      }
+                    },
+                    tag.div(class: 'actions') {
+                      safe_join([
+                                  tag.button(class: 'ui button', onclick: "$('#menu-add-modal').modal('hide')") {
+                                    'Cancel'
+                                  },
+                                  tag.button(class: 'ui green button', onclick: 'menuSettingsCreate()') {
+                                    tag.i(class: 'plus icon') + ' Add'
+                                  }
+                                ])
+                    }
+                  ])
       }
     end
 
     def all_menu_items
-      menu_config.flat_map { |item| [item, *item.fetch("items", [])] }
+      flatten_items(menu_config)
     end
 
     def all_proxy_menu_items
-      all_menu_items.select { |item| item["type"] == "proxy" }
+      all_menu_items.select { |item| item['type'] == 'proxy' }
     end
 
     def proxy_paths
       all_menu_items
-        .select { |item| item["type"] == "proxy" }
-        .map    { |item| item["route"] }
+        .select { |item| item['type'] == 'proxy' }
+        .map    { |item| item['route'] }
+    end
+
+    def reset_menu_cache!
+      @menu_config = nil
     end
 
     extend self
 
     private
 
-      def menu_file
-        Rails.root.join("config/menu.yml")
+    def render_menu_entry(entry, top_level: false)
+      if entry['items']
+        if top_level
+          MenuItem(dropdown: true, icon: entry['icon']) do
+            text entry['label']
+            concat tag.i(class: 'dropdown icon')
+            SubMenu do
+              entry['items'].each { |child| render_menu_entry(child) }
+            end
+          end
+        else
+          MenuItem do
+            concat tag.i(class: 'dropdown icon')
+            text entry['label']
+            SubMenu do
+              entry['items'].each { |child| render_menu_entry(child) }
+            end
+          end
+        end
+      else
+        MenuItem(href: entry['route'], icon: entry['icon']) { text entry['label'] }
+      end
+    end
+
+    # Renders a sortable-tree container.
+    # Pass an array of MenuItem records (roots with children eager-loaded).
+    # The Stimulus controller reads the JSON and initializes sortable-tree.
+    def sortable_menu_tree
+      items = ::MenuItem.roots.includes(children: :children)
+      nodes_json = menu_items_to_nodes(items).to_json
+      sort_url = wrap_it_ruby.sort_menu_setting_path(id: 'bulk')
+
+      tag.div(
+        data: {
+          controller: 'wrap-it-ruby--sortable-tree',
+          "wrap-it-ruby--sortable-tree-nodes-value": nodes_json,
+          "wrap-it-ruby--sortable-tree-sort-url-value": sort_url,
+          "wrap-it-ruby--sortable-tree-lock-root-value": false,
+          "wrap-it-ruby--sortable-tree-collapse-level-value": 3
+        }
+      )
+    end
+
+    # Converts MenuItem records to the sortable-tree nodes format:
+    #   [{ data: { id:, title:, icon:, route:, url: }, nodes: [...] }]
+    def menu_items_to_nodes(items)
+      items.map do |item|
+        {
+          data: {
+            id: item.id,
+            title: item.label,
+            icon: item.icon,
+            route: item.route,
+            url: item.url,
+            item_type: item.item_type
+          },
+          nodes: item.children.any? ? menu_items_to_nodes(item.children) : []
+        }
+      end
+    end
+
+    # Builds <option> tags for all group items (for parent dropdown in add modal).
+    # Indents sub-groups with dashes to show hierarchy.
+    def menu_group_options(items = nil, depth = 0)
+      items ||= ::MenuItem.groups.where(parent_id: nil).order(:position).includes(children: :children)
+      items.flat_map do |item|
+        prefix = "\u00A0\u00A0" * depth + (depth > 0 ? "\u2514 " : '')
+        opts = [tag.option(value: item.id) { "#{prefix}#{item.label}" }]
+        sub_groups = item.children.select(&:group?)
+        opts += menu_group_options(sub_groups, depth + 1) if sub_groups.any?
+        opts
       end
+    end
+
+    def flatten_items(items)
+      items.flat_map { |item| [item, *flatten_items(item.fetch('items', []))] }
+    end
+
+    def menu_file
+      Rails.root.join('config/menu.yml')
+    end
+
+    def load_menu
+      @menu_config ||= if database_menu_available?
+                         load_menu_from_database
+                       else
+                         YAML.load_file(menu_file)
+                       end
+    end
+
+    def database_menu_available?
+      defined?(::MenuItem) && ::MenuItem.table_exists? && ::MenuItem.exists?
+    rescue StandardError
+      false
+    end
 
-      def load_menu
-        @menu_config ||= YAML.load_file(menu_file)
+    def load_menu_from_database
+      ::MenuItem.roots.includes(children: :children).map { |item| item_to_hash(item) }
+    end
+
+    def item_to_hash(item)
+      hash = { 'label' => item.label, 'icon' => item.icon }
+
+      if item.children.any?
+        hash['items'] = item.children.map { |child| item_to_hash(child) }
+      else
+        hash['route'] = item.route
+        hash['url']   = item.url
+        hash['type']  = item.item_type
       end
+
+      hash
+    end
   end
 end