command_deck 0.1.0

data/app/controllers/command_deck/panels_controller.rb

@@ -0,0 +1,108 @@
+# frozen_string_literal: true
+
+module CommandDeck
+  # Controller for serving panels
+  class PanelsController < BaseController
+    def index
+      render json: { panels: serialize_panels }
+    end
+
+    private
+
+    def serialize_panels
+      Registry.panels.map { |panel| serialize_panel(panel) }
+    end
+
+    def serialize_panel(panel)
+      {
+        key: panel.key,
+        title: panel.title,
+        owner: panel.owner,
+        group: panel.group,
+        tabs: serialize_tabs(panel.tabs)
+      }
+    end
+
+    def serialize_tabs(tabs)
+      tabs.map { |tab| serialize_tab(tab) }
+    end
+
+    def serialize_tab(tab)
+      { title: tab.title, actions: serialize_actions(tab.actions) }
+    end
+
+    def serialize_actions(actions)
+      actions.map { |action| serialize_action(action) }
+    end
+
+    def serialize_action(action)
+      { title: action.title, key: action.key, params: serialize_params(action.params) }
+    end
+
+    def serialize_params(params)
+      (params || []).map { |p| serialize_param(p) }
+    end
+
+    def serialize_param(param)
+      base = base_param(param)
+
+      choices = extract_choices(param)
+      if choices
+        base[:choices] = normalize_choices(choices)
+        base[:include_blank] = param[:include_blank] if param.key?(:include_blank)
+      end
+
+      base[:return] = param[:return] if param.key?(:return)
+      base
+    end
+
+    def normalize_choices(choices)
+      arrayify(choices).map { |item| normalize_choice_item(item) }
+    end
+
+    def base_param(param)
+      {
+        name: param[:name],
+        type: param[:type].to_s,
+        label: param[:label] || param[:name].to_s.tr("_", " ").capitalize,
+        required: param.key?(:required) ? param[:required] : false
+      }
+    end
+
+    def extract_choices(param)
+      return param[:options] if param.key?(:options)
+
+      collection = param[:collection]
+      collection.respond_to?(:call) ? collection.call : nil
+    end
+
+    def arrayify(obj)
+      obj.is_a?(Array) ? obj : obj.to_a
+    end
+
+    def normalize_choice_item(item)
+      return normalize_choice_hash(item)  if item.is_a?(Hash)
+      return normalize_choice_array(item) if item.is_a?(Array)
+
+      normalize_choice_default(item)
+    end
+
+    def normalize_choice_hash(item)
+      out = {}
+      out[:label] = item[:label].to_s if item.key?(:label)
+      out[:value] = item[:value] if item.key?(:value)
+      out[:meta]  = item[:meta]  if item.key?(:meta)
+      out
+    end
+
+    def normalize_choice_array(item)
+      return normalize_choice_default(item) if item.size < 2
+
+      { label: item[0].to_s, value: item[1] }
+    end
+
+    def normalize_choice_default(item)
+      { label: item.to_s, value: item }
+    end
+  end
+end

data/config/routes.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+CommandDeck::Engine.routes.draw do
+  get   "/assets/js/*path",  to: "assets#js"
+  get   "/assets/css/*path", to: "assets#css"
+
+  get   "/panels", to: "panels#index"
+  resources :actions, only: [:create]
+end

data/lib/command_deck/assets/css/main.css

@@ -0,0 +1,393 @@
+/* ==========================================
+   Command Deck • main.css (scoped)
+   ========================================== */
+
+/* ---------- Base & Panel ---------- */
+#command-deck-toggle {
+  position: fixed;
+  z-index: 2147483000;
+  right: 16px;
+  bottom: 16px;
+  width: 44px;
+  height: 44px;
+  border-radius: 22px;
+  background: #111;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: 600 14px system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
+  cursor: pointer;
+}
+
+/* Dark theme for toggle */
+#command-deck-toggle.cd-theme-dark {
+  background: #000; /* full black */
+  color: #fff;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, .6);
+}
+
+#command-deck-panel {
+  position: fixed;
+  z-index: 2147483000;
+  right: 16px;
+  bottom: 72px;
+  width: 360px;
+  max-width: 92vw;
+  background: #fff;
+  color: #111;
+  border-radius: 12px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
+  padding: 12px;
+  border: 1px solid rgba(0, 0, 0, .06);
+}
+
+/* Dark theme for panel */
+#command-deck-panel.cd-theme-dark {
+  background: #000; /* full black */
+  color: #f1f1f1;
+  border-color: #222;
+  box-shadow: 0 12px 40px rgba(0,0,0,.7);
+}
+
+#command-deck-panel.cd-theme-dark #cd-tabs-wrap .cd-tab-btn,
+#command-deck-panel.cd-theme-dark #cd-settings-btn,
+#command-deck-panel.cd-theme-dark .cd-menu-item,
+#command-deck-panel.cd-theme-dark .cd-form input[type="text"],
+#command-deck-panel.cd-theme-dark .cd-form input[type="number"],
+#command-deck-panel.cd-theme-dark .cd-form select,
+#command-deck-panel.cd-theme-dark #cd-panel-selector select {
+  background: #111; /* near-black */
+  color: #eee;
+  border-color: #333;
+}
+
+#command-deck-panel.cd-theme-dark .cd-action { border-color: #222; }
+
+/* Dark mode: improve readability of labels and placeholders */
+#command-deck-panel.cd-theme-dark .cd-form label {
+  color: #cfcfcf;
+}
+
+#command-deck-panel.cd-theme-dark .cd-form input[type="text"],
+#command-deck-panel.cd-theme-dark .cd-form input[type="number"] {
+  caret-color: #fff;
+}
+
+#command-deck-panel.cd-theme-dark .cd-form input[type="text"]::placeholder,
+#command-deck-panel.cd-theme-dark .cd-form input[type="number"]::placeholder {
+  color: #9a9a9a;
+  opacity: 1; /* Ensure consistent placeholder contrast */
+}
+
+#command-deck-panel.cd-theme-dark #command-deck-output {
+  background: #0d0d0d;
+  color: #eee;
+}
+
+/* Theme toggle button */
+#cd-theme-toggle {
+  border: 1px solid #ddd;
+  background: #f9f9f9;
+  border-radius: 6px;
+  padding: 4px 8px;
+  cursor: pointer;
+  margin-top: 8px;
+}
+
+#command-deck-panel.cd-theme-dark #cd-theme-toggle {
+  background: #111827;
+  color: #e5e7eb;
+  border-color: #374151;
+}
+
+#command-deck-panel * {
+  font: 500 13px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+}
+
+/* ---------- Header & Settings ---------- */
+#cd-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  position: relative;
+}
+
+#command-deck-panel h4 {
+  margin: 0 0 8px;
+  font-size: 14px;
+}
+
+#cd-settings-btn {
+  border: 1px solid #ddd;
+  background: #f9f9f9;
+  border-radius: 6px;
+  padding: 4px 8px;
+  cursor: pointer;
+}
+
+#cd-settings-btn.open {
+  background: #eef4ff;
+  border-color: #cfe0ff;
+}
+
+#cd-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+#cd-panel-selector select {
+  padding: 4px 8px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background: #fff;
+}
+
+#cd-settings-panel {
+  position: absolute;
+  top: 32px;
+  right: 0;
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  box-shadow: 0 10px 28px rgba(0,0,0,.12);
+  padding: 8px;
+  z-index: 2147483001;
+  min-width: 180px;
+}
+
+/* Dark theme for settings dropdown */
+#command-deck-panel.cd-theme-dark #cd-settings-panel {
+  background: #0d0d0d;
+  border-color: #333;
+  box-shadow: 0 10px 28px rgba(0,0,0,.6);
+}
+
+.cd-settings-title {
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.cd-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cd-menu-item {
+  text-align: left;
+  padding: 6px 8px;
+  border: 1px solid #eee;
+  background: #f9f9f9;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.cd-menu-item.active {
+  background: #0d6efd;
+  color: #fff;
+  border-color: #0d6efd;
+}
+
+/* ---------- Tabs & Actions ---------- */
+#cd-tabs-wrap {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin: 6px 0 8px;
+}
+
+#cd-tabs-wrap .cd-tab-btn {
+  padding: 6px 8px;
+  border: 1px solid #ddd;
+  background: #f9f9f9;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+#cd-actions-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.cd-action {
+  border: 1px solid #eee;
+  border-radius: 8px;
+  padding: 10px;
+}
+
+.cd-action-title {
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.cd-form label {
+  display: block;
+  margin: 6px 0 2px;
+  color: #555;
+}
+
+.cd-form label .cd-required {
+  color: #d00;
+  margin-left: 4px;
+  font-weight: 700;
+}
+
+.cd-form input[type="text"],
+.cd-form input[type="number"],
+.cd-form select {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px 10px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+}
+
+.cd-actions-row {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+
+.cd-param-hint {
+  margin-top: 6px;
+  color: #666;
+  font-size: 12px;
+}
+
+.cd-badge {
+  display: inline-block;
+  padding: 2px 6px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  margin-left: 4px;
+}
+
+.cd-badge.cd-on {
+  background: #e6f4ea;
+  color: #137333;
+  border: 1px solid #c8e6c9;
+}
+
+.cd-badge.cd-off {
+  background: #fde8e8;
+  color: #b91c1c;
+  border: 1px solid #fecaca;
+}
+
+#command-deck-panel.cd-theme-dark .cd-param-hint { 
+    color: #bdbdbd;
+}
+#command-deck-panel.cd-theme-dark .cd-badge.cd-on { 
+    background: #0b2f1c; 
+    color: #a7f3d0; 
+    border-color: #065f46; 
+}
+#command-deck-panel.cd-theme-dark .cd-badge.cd-off { 
+    background: #3b0c0c; 
+    color: #fecaca; 
+    border-color: #7f1d1d; 
+}
+
+.cd-form .cd-run {
+  width: 36px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: #0d6efd;
+  color: #fff;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.cd-form .cd-run:hover:not(:disabled) {
+  background: #0b5ed7; /* darker */
+}
+
+.cd-form .cd-run:focus-visible {
+  outline: 2px solid #9ec5fe;
+  outline-offset: 2px;
+}
+
+.cd-form .cd-run:disabled,
+.cd-form .cd-run.loading {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+#command-deck-output {
+  white-space: pre-wrap;
+  background: #0b102114;
+  color: #0b1d30;
+  border-radius: 6px;
+  padding: 8px;
+  margin-top: 10px;
+  max-height: 200px;
+  overflow: auto;
+}
+
+/* ---------- Corner Positioning ---------- */
+#command-deck-toggle.cd-pos-tl {
+  left: 16px;
+  right: auto;
+  top: 16px;
+  bottom: auto;
+}
+
+#command-deck-toggle.cd-pos-tr {
+  right: 16px;
+  left: auto;
+  top: 16px;
+  bottom: auto;
+}
+
+#command-deck-toggle.cd-pos-bl {
+  left: 16px;
+  right: auto;
+  bottom: 16px;
+  top: auto;
+}
+
+#command-deck-toggle.cd-pos-br {
+  right: 16px;
+  left: auto;
+  bottom: 16px;
+  top: auto;
+}
+
+#command-deck-panel.cd-pos-tl {
+  left: 16px;
+  right: auto;
+  top: 72px;
+  bottom: auto;
+}
+
+#command-deck-panel.cd-pos-tr {
+  right: 16px;
+  left: auto;
+  top: 72px;
+  bottom: auto;
+}
+
+#command-deck-panel.cd-pos-bl {
+  left: 16px;
+  right: auto;
+  bottom: 72px;
+  top: auto;
+}
+
+#command-deck-panel.cd-pos-br {
+  right: 16px;
+  left: auto;
+  bottom: 72px;
+  top: auto;
+}

data/lib/command_deck/assets/js/core/api.js

@@ -0,0 +1,20 @@
+export class PanelsApi {
+  constructor(mount) { this.mount = mount; }
+  fetchPanels() {
+    return fetch(this.mount + '/panels', { credentials: 'same-origin' }).then(r => r.json());
+  }
+}
+
+export class ActionsApi {
+  constructor(mount) { this.mount = mount; }
+  submit(key, params) {
+    const tokenEl = document.querySelector('meta[name="csrf-token"]');
+    const token = tokenEl ? tokenEl.getAttribute('content') : '';
+    return fetch(this.mount + '/actions', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': token },
+      body: JSON.stringify({ key, params }),
+      credentials: 'same-origin'
+    }).then(r => r.json());
+  }
+}

data/lib/command_deck/assets/js/core/dom.js

@@ -0,0 +1,33 @@
+// DOM helpers and ready hook
+export function onReady(fn) {
+  const run = () => { try { fn(); } catch(_) {} };
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', run);
+  } else {
+    run();
+  }
+  document.addEventListener('turbo:load', run);
+  document.addEventListener('turbo:render', run);
+  window.addEventListener('pageshow', run);
+}
+
+export function el(tag, attrs, children) {
+  const e = document.createElement(tag);
+  if (attrs) for (const k in attrs) {
+    if (k === 'style' && typeof attrs[k] === 'object') {
+      Object.assign(e.style, attrs[k]);
+    } else if (k === 'class') {
+      e.className = attrs[k];
+    } else if (k.startsWith('on') && typeof attrs[k] === 'function') {
+      e.addEventListener(k.slice(2), attrs[k]);
+    } else {
+      e.setAttribute(k, attrs[k]);
+    }
+  }
+  (children || []).forEach(c => e.appendChild(typeof c === 'string' ? document.createTextNode(c) : c));
+  return e;
+}
+
+export function jsonPretty(obj) {
+  try { return JSON.stringify(obj, null, 2); } catch(_) { return String(obj); }
+}

data/lib/command_deck/assets/js/core/store.js

@@ -0,0 +1,13 @@
+const KEY_PREFIX = 'command-deck-';
+
+export const store = {
+  get(key, fallback = null) {
+    try {
+      const v = localStorage.getItem(KEY_PREFIX + key);
+      return v == null ? fallback : v;
+    } catch(_) { return fallback; }
+  },
+  set(key, value) {
+    try { localStorage.setItem(KEY_PREFIX + key, value); } catch(_) {}
+  }
+};

data/lib/command_deck/assets/js/main.js

@@ -0,0 +1,39 @@
+import { onReady } from './core/dom.js';
+import { PanelsApi, ActionsApi } from './core/api.js';
+import { Overlay } from './ui/overlay.js';
+import { SettingsDropdown } from './ui/settings_dropdown.js';
+import { PanelSelector } from './ui/panel_selector.js';
+
+function getMount() {
+  const s = document.querySelector('script[data-mount]') || document.currentScript;
+  const m = s && s.getAttribute('data-mount');
+  return m || '/command_deck';
+}
+
+onReady(() => {
+  function ensureOverlay() {
+    const existingToggle = document.getElementById('command-deck-toggle');
+    const existingPanel  = document.getElementById('command-deck-panel');
+    if (existingToggle && existingPanel) return;
+
+    const mount = getMount();
+    const panelsApi = new PanelsApi(mount);
+    const actionsApi = new ActionsApi(mount);
+
+    const overlay = new Overlay({ mount, panelsApi, actionsApi });
+    overlay.init();
+
+    const dropdown = new SettingsDropdown(
+      (pos) => overlay.position.set(pos),
+      (theme) => overlay.theme && overlay.theme.set(theme)
+    );
+    overlay.attachSettings(dropdown);
+
+    const selector = new PanelSelector((key) => overlay.selectPanel(key));
+    overlay.attachPanelSelector(selector);
+
+    overlay.loadPanels();
+  }
+
+  ensureOverlay();
+});