command_deck 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 05e42991e760e0f2cd8c5f77d013371c65093baa79ea95b5ae567cb3498384b3
-  data.tar.gz: 5aee49684b906f405277f8c24b1b42c47baf76a69318758fcb70bbf628eccb9b
+  metadata.gz: 2f79a2f12ff19b218e7b02e3269ebaff3a283bc3772cdedeaffe829a7e3c9adc
+  data.tar.gz: 0b76ee1ba7f39d8b3a8a781ec33aefe32efdd9e5b66edcfced9e9fc77ea8dcfb
 SHA512:
-  metadata.gz: 91677f4ec1316c0f39ba727346771555c59c01b56289152693a95464ed482e20a3ea34ac81c8522267190a60de8282786e673f2c6d9a247ef7210afa50c31f14
-  data.tar.gz: a8345037758fd71e689570738f6208b35c40d3bce20a02ea6cf3c77821889b4c54aed9384fbef20cdb045dac77bdc30b5b343d188505e7f49eb1fd481edd5aa2
+  metadata.gz: 64a99c105eb4dbce276c748aca3781dbe8f74e5bec7b7ab6073e141a7e7fceac5680bfc4e8f67f1aaac25e2642914ef4d6d7df7e0d0e597614836326f652ec25
+  data.tar.gz: d9ce128531b79674de1d8125995969bf8d4e12df619e7b03aa52a569760f204d7a38fcc28e5cdce5604d9ae8b43fe82e2867a3e972724ddebfe9f5d71b2750b4

data/CHANGELOG.md

@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## [0.1.2] - 2025-09-11
+
+### Added
+
+- Support for Turbolinks.
+- Copy to clipboard button for results.
+- Toggle results visibility button.
+- Refactor overlay.js into multiple files.
+
 ## [0.1.1] - 2025-09-10
 
 ### Fixed

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

@@ -324,6 +324,39 @@
   cursor: not-allowed;
 }
 
+/* ---------- Results Toolbar ---------- */
+#cd-result-wrap {
+  position: relative;
+  margin-top: 10px;
+  padding-top: 28px;
+  min-height: 28px;
+}
+
+.cd-result-toolbar {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  display: flex;
+  gap: 6px;
+  z-index: 1;
+}
+
+.cd-icon-btn {
+  border: 1px solid #ddd;
+  background: #f9f9f9;
+  border-radius: 6px;
+  padding: 2px 6px;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+}
+
+#command-deck-panel.cd-theme-dark .cd-icon-btn {
+  background: #111;
+  color: #eee;
+  border-color: #333;
+}
+
 #command-deck-output {
   white-space: pre-wrap;
   background: #0b102114;

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

@@ -8,6 +8,8 @@ export function onReady(fn) {
   }
   document.addEventListener('turbo:load', run);
   document.addEventListener('turbo:render', run);
+  document.addEventListener('turbolinks:load', run);
+  document.addEventListener('turbolinks:render', run);
   window.addEventListener('pageshow', run);
 }
 

data/lib/command_deck/assets/js/ui/overlay/action_form.js

@@ -0,0 +1,187 @@
+import { el } from '../../core/dom.js';
+import { store } from '../../core/store.js';
+
+export class ActionForm {
+  constructor({ action, getCurrentPanelKey, actionsApi, onRunning, onResult, onAfterRun }) {
+    this.action = action;
+    this.getCurrentPanelKey = getCurrentPanelKey;
+    this.actionsApi = actionsApi;
+    this.onRunning = onRunning || (() => {});
+    this.onResult = onResult || (() => {});
+    this.onAfterRun = onAfterRun || (() => {});
+  }
+
+  mount(parentNode) {
+    const box = el('div', { class: 'cd-action' });
+    const title = el('div', { class: 'cd-action-title' }, [this.action.title]);
+    const form = el('div', { class: 'cd-form' });
+
+    box.appendChild(title);
+    box.appendChild(form);
+
+    const inputs = {};
+    const paramsMeta = {};
+
+    (this.action.params || []).forEach(p => {
+      const labelChildren = [p.label || p.name];
+      if (p.required === true) {
+        labelChildren.push(el('span', { class: 'cd-required', title: 'Required' }, ['*']));
+      }
+      const label = el('label', null, labelChildren);
+      let input;
+      if (p.type === 'boolean') {
+        input = el('input', { type: 'checkbox' });
+      } else if (p.type === 'integer') {
+        input = el('input', { type: 'number', step: '1' });
+      } else if (p.type === 'selector' || (p.choices && p.choices.length)) {
+        input = el('select');
+        if (p.include_blank) {
+          input.appendChild(el('option', { value: '' }, ['']));
+        }
+        (p.choices || []).forEach(ch => {
+          const attrs = { 'data-val': JSON.stringify(ch.value) };
+          if (ch.meta != null) attrs['data-meta'] = JSON.stringify(ch.meta);
+          const opt = el('option', attrs, [ch.label != null ? String(ch.label) : String(ch.value)]);
+          input.appendChild(opt);
+        });
+
+        const selKey = `sel:${this.getCurrentPanelKey() || ''}:${this.action.key}:${p.name}`;
+        const savedRaw = store.get(selKey);
+        if (savedRaw != null) {
+          let matched = false;
+          for (let i = 0; i < input.options.length; i++) {
+            const o = input.options[i];
+            const raw = o.getAttribute('data-val');
+            if (raw === savedRaw) {
+              input.selectedIndex = i;
+              matched = true;
+              break;
+            }
+          }
+          if (!matched && p.include_blank && savedRaw === '') {
+            for (let i = 0; i < input.options.length; i++) {
+              if (input.options[i].value === '') { input.selectedIndex = i; break; }
+            }
+          }
+        }
+      } else {
+        input = el('input', { type: 'text' });
+      }
+      if (p.required === true && input) {
+        input.setAttribute('aria-required', 'true');
+        input.setAttribute('required', '');
+      }
+      form.appendChild(label);
+      form.appendChild(input);
+
+      let hint;
+      if (input.tagName === 'SELECT') {
+        hint = el('div', { class: 'cd-param-hint' });
+        const updateHint = () => {
+          const sel = input.options[input.selectedIndex];
+          if (!sel) { hint.textContent = ''; return; }
+          const metaRaw = sel.getAttribute('data-meta');
+          if (!metaRaw) { hint.textContent = ''; return; }
+          try {
+            const meta = JSON.parse(metaRaw);
+            if (typeof meta.enabled === 'boolean') {
+              const status = meta.enabled ? 'ON' : 'OFF';
+              hint.textContent = 'Current: ';
+              const badge = el('span', { class: `cd-badge ${meta.enabled ? 'cd-on' : 'cd-off'}` }, [status]);
+              hint.appendChild(badge);
+            } else {
+              hint.textContent = '';
+            }
+          } catch(_) { hint.textContent = ''; }
+        };
+        input.addEventListener('change', () => {
+          const sel = input.options[input.selectedIndex];
+          const raw = sel ? sel.getAttribute('data-val') : '';
+          const selKey = `sel:${this.getCurrentPanelKey() || ''}:${this.action.key}:${p.name}`;
+          store.set(selKey, raw || '');
+          updateHint();
+          validate();
+        });
+        setTimeout(updateHint, 0);
+        form.appendChild(hint);
+      }
+
+      inputs[p.name] = input;
+      paramsMeta[p.name] = p;
+    });
+
+    const requiredParams = (this.action.params || []).filter(p => p.required === true);
+    const isFilled = (p) => {
+      const inp = inputs[p.name];
+      if (!inp) return false;
+      if (p.type === 'integer') return inp.value !== '';
+      if (p.type === 'selector' || (p.choices && p.choices.length)) {
+        if (p.include_blank) return inp.value !== '' && inp.selectedIndex > -1;
+        return inp.selectedIndex > -1;
+      }
+      if (p.type === 'boolean') return true;
+      return String(inp.value || '').trim() !== '';
+    };
+    const validate = () => {
+      const ok = requiredParams.every(isFilled);
+      const running = run.classList.contains('loading');
+      run.disabled = !ok || running;
+    };
+
+    const run = el('button', { class: 'cd-run', title: 'Run' }, ['\u25B6']);
+    run.addEventListener('click', () => {
+      if (run.disabled) return;
+      run.classList.add('loading');
+      run.setAttribute('aria-busy', 'true');
+      run.disabled = true;
+
+      const payload = {};
+      Object.keys(inputs).forEach(k => {
+        const inp = inputs[k];
+        const meta = paramsMeta[k] || {};
+        if (inp.tagName === 'SELECT') {
+          const sel = inp.options[inp.selectedIndex];
+          const raw = sel && sel.getAttribute('data-val');
+          const label = sel ? sel.textContent : '';
+          let value;
+          try { value = raw != null ? JSON.parse(raw) : inp.value; } catch(_) { value = inp.value; }
+
+          if (meta.return === 'label') {
+            payload[k] = label;
+          } else if (meta.return === 'both' || meta.return === 'object') {
+            payload[k] = { label: label, value: value };
+          } else {
+            payload[k] = value;
+          }
+
+          const selKey = `sel:${this.getCurrentPanelKey() || ''}:${this.action.key}:${k}`;
+          store.set(selKey, raw || '');
+        } else {
+          payload[k] = (inp.type === 'checkbox') ? !!inp.checked : inp.value;
+        }
+      });
+
+      this.onRunning();
+      this.actionsApi
+        .submit(this.action.key, payload)
+        .then((res) => { this.onResult(res); this.onAfterRun(); })
+        .catch((e) => this.onResult({ ok:false, error: String(e) }))
+        .finally(() => { run.classList.remove('loading'); run.removeAttribute('aria-busy'); validate(); });
+    });
+
+    const actionsRow = el('div', { class: 'cd-actions-row' });
+    actionsRow.appendChild(run);
+    form.appendChild(actionsRow);
+
+    // Hook up validation listeners
+    (this.action.params || []).forEach(p => {
+      const inp = inputs[p.name];
+      if (!inp) return;
+      const evt = (inp.tagName === 'SELECT' || inp.type === 'checkbox') ? 'change' : 'input';
+      inp.addEventListener(evt, validate);
+    });
+    validate();
+
+    parentNode.appendChild(box);
+  }
+}

data/lib/command_deck/assets/js/ui/overlay/actions_view.js

@@ -0,0 +1,32 @@
+import { ActionForm } from './action_form.js';
+
+export class ActionsView {
+  constructor({ getCurrentPanelKey, actionsApi, onRunning, onResult, onAfterRun }) {
+    this.getCurrentPanelKey = getCurrentPanelKey;
+    this.actionsApi = actionsApi;
+    this.onRunning = onRunning || (() => {});
+    this.onResult = onResult || (() => {});
+    this.onAfterRun = onAfterRun || (() => {});
+    this.container = null;
+  }
+
+  mount(container) {
+    this.container = container;
+  }
+
+  setActions(actions) {
+    if (!this.container) return;
+    this.container.textContent = '';
+    (actions || []).forEach(action => {
+      const form = new ActionForm({
+        action,
+        getCurrentPanelKey: this.getCurrentPanelKey,
+        actionsApi: this.actionsApi,
+        onRunning: this.onRunning,
+        onResult: this.onResult,
+        onAfterRun: this.onAfterRun
+      });
+      form.mount(this.container);
+    });
+  }
+}

data/lib/command_deck/assets/js/ui/overlay/header_view.js

@@ -0,0 +1,23 @@
+import { el } from '../../core/dom.js';
+
+export class HeaderView {
+  constructor() {
+    this.el = el('div', { id: 'cd-header' });
+    this.titleEl = el('h4', null, ['Command Deck']);
+    this.rightEl = el('div', { id: 'cd-header-right' });
+    this.el.appendChild(this.titleEl);
+    this.el.appendChild(this.rightEl);
+  }
+
+  mount(parent) {
+    parent.appendChild(this.el);
+  }
+
+  setTitle(text) {
+    this.titleEl.textContent = text;
+  }
+
+  getRightContainer() {
+    return this.rightEl;
+  }
+}

data/lib/command_deck/assets/js/ui/{position_manager.js → overlay/position_manager.js}

@@ -1,4 +1,4 @@
-import { store } from '../core/store.js';
+import { store } from '../../core/store.js';
 
 const POSITIONS = ['tl','tr','bl','br'];
 

data/lib/command_deck/assets/js/ui/overlay/result_view.js

@@ -0,0 +1,67 @@
+import { el, jsonPretty } from '../../core/dom.js';
+import { store } from '../../core/store.js';
+
+export class ResultView {
+  constructor() {
+    this.wrap = el('div', { id: 'cd-result-wrap' });
+    this.toolbar = el('div', { class: 'cd-result-toolbar' });
+    this.copyBtn = el('button', { class: 'cd-icon-btn', id: 'cd-copy-result', title: 'Copy result' }, ['📋']);
+    this.toggleBtn = el('button', { class: 'cd-icon-btn', id: 'cd-toggle-result', title: 'Hide results' }, ['▾']);
+    this.pre = el('pre', { id: 'command-deck-output' });
+
+    this.toolbar.appendChild(this.copyBtn);
+    this.toolbar.appendChild(this.toggleBtn);
+    this.wrap.appendChild(this.toolbar);
+    this.wrap.appendChild(this.pre);
+
+    this.toggleBtn.addEventListener('click', () => {
+      const visible = this.pre.style.display === 'none' ? false : true;
+      this.setVisible(!visible);
+    });
+
+    this.copyBtn.addEventListener('click', async () => {
+      const text = this.pre.textContent || '';
+      try {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          await navigator.clipboard.writeText(text);
+        } else {
+          const ta = document.createElement('textarea');
+          ta.value = text;
+          ta.style.position = 'fixed';
+          ta.style.opacity = '0';
+          document.body.appendChild(ta);
+          ta.select();
+          document.execCommand('copy');
+          document.body.removeChild(ta);
+        }
+        const prev = this.copyBtn.textContent;
+        this.copyBtn.textContent = '✓';
+        setTimeout(() => { this.copyBtn.textContent = prev; }, 1000);
+      } catch(_) { /* ignore */ }
+    });
+
+    const initialVis = store.get('results-visible', '1') !== '0';
+    this.setVisible(initialVis);
+  }
+
+  mount(parentNode) {
+    parentNode.appendChild(this.wrap);
+  }
+
+  setVisible(show) {
+    this.pre.style.display = show ? 'block' : 'none';
+    this.toggleBtn.textContent = show ? '▾' : '▸';
+    this.toggleBtn.setAttribute('title', show ? 'Hide results' : 'Show results');
+    store.set('results-visible', show ? '1' : '0');
+  }
+
+  setRunning() {
+    this.setVisible(true);
+    this.pre.textContent = 'Running...';
+  }
+
+  setResult(obj) {
+    this.setVisible(true);
+    this.pre.textContent = jsonPretty(obj);
+  }
+}

data/lib/command_deck/assets/js/ui/overlay/tabs_view.js

@@ -0,0 +1,41 @@
+import { el } from '../../core/dom.js';
+
+export class TabsView {
+  constructor(onSelect) {
+    this.onSelect = onSelect;
+    this.root = el('div', { id: 'cd-tabs-wrap' });
+    this.buttons = [];
+    this.currentIndex = 0;
+    this.tabs = [];
+  }
+
+  mount(container) {
+    container.appendChild(this.root);
+  }
+
+  setTabs(tabs, selectedIndex = 0) {
+    this.tabs = tabs || [];
+    this.root.textContent = '';
+    this.buttons = [];
+    this.currentIndex = selectedIndex || 0;
+
+    this.tabs.forEach((tab, i) => {
+      const btn = el('button', { class: 'cd-tab-btn' }, [tab.title]);
+      btn.addEventListener('click', () => {
+        this.currentIndex = i;
+        this.onSelect && this.onSelect(this.tabs[i], i);
+      });
+      this.root.appendChild(btn);
+      this.buttons.push(btn);
+    });
+
+    // Trigger initial selection
+    if (this.tabs[this.currentIndex]) {
+      this.onSelect && this.onSelect(this.tabs[this.currentIndex], this.currentIndex);
+    }
+  }
+
+  setActiveIndex(i) {
+    this.currentIndex = i;
+  }
+}

data/lib/command_deck/assets/js/ui/{theme_manager.js → overlay/theme_manager.js}

@@ -1,4 +1,4 @@
-import { store } from '../core/store.js';
+import { store } from '../../core/store.js';
 
 export class ThemeManager {
   constructor(toggle, panel) {

data/lib/command_deck/assets/js/ui/overlay.js

@@ -1,7 +1,11 @@
-import { el, jsonPretty } from '../core/dom.js';
+import { el } from '../core/dom.js';
 import { store } from '../core/store.js';
-import { PositionManager } from './position_manager.js';
-import { ThemeManager } from './theme_manager.js';
+import { PositionManager } from './overlay/position_manager.js';
+import { ThemeManager } from './overlay/theme_manager.js';
+import { ResultView } from './overlay/result_view.js';
+import { ActionsView } from './overlay/actions_view.js';
+import { HeaderView } from './overlay/header_view.js';
+import { TabsView } from './overlay/tabs_view.js';
 
 export class Overlay {
   constructor({ mount, panelsApi, actionsApi }) {
@@ -12,7 +16,6 @@ export class Overlay {
   }
 
   refreshCurrentTab() {
-    // Re-fetch panels and re-render current panel/tab without changing selection
     this.panelsApi.fetchPanels().then((data) => {
       const panels = (data && data.panels) || [];
       this.panels = panels;
@@ -26,27 +29,31 @@ export class Overlay {
 
   init() {
     if (this._loaded) return; this._loaded = true;
-    // Root pieces
     this.toggle = el('div', { id: 'command-deck-toggle', title: 'Command Deck' }, ['CD']);
     this.panel  = el('div', { id: 'command-deck-panel', style: { display: 'none' } });
-    // Keep these nodes across Turbo Drive navigations
     this.toggle.setAttribute('data-turbo-permanent', '');
     this.panel.setAttribute('data-turbo-permanent', '');
+    this.toggle.setAttribute('data-turbolinks-permanent', '');
+    this.panel.setAttribute('data-turbolinks-permanent', '');
 
-    const headerWrap = el('div', { id: 'cd-header' });
-    const title = el('h4', null, ['Command Deck']);
-    headerWrap.appendChild(title);
-    const headerRight = el('div', { id: 'cd-header-right' });
-    headerWrap.appendChild(headerRight);
-
-    this.tabsWrap = el('div', { id: 'cd-tabs-wrap' });
+    this.headerView = new HeaderView();
+    this.tabsView = new TabsView((tab, i) => { this.currentTabIndex = i; this.renderActions(tab); });
     this.actionsWrap = el('div', { id: 'cd-actions-wrap' });
-    this.resultPre = el('pre', { id: 'command-deck-output' });
+    this.resultView = new ResultView();
+    this.actionsView = new ActionsView({
+      getCurrentPanelKey: () => this.currentPanelKey,
+      actionsApi: this.actionsApi,
+      onRunning: () => this.resultView.setRunning(),
+      onResult: (res) => this.resultView.setResult(res),
+      onAfterRun: () => this.refreshCurrentTab()
+    });
 
-    this.panel.appendChild(headerWrap);
-    this.panel.appendChild(this.tabsWrap);
+    this.headerView.mount(this.panel);
+    this.tabsView.mount(this.panel);
     this.panel.appendChild(this.actionsWrap);
-    this.panel.appendChild(this.resultPre);
+    this.resultView.mount(this.panel);
+
+    this.actionsView.mount(this.actionsWrap);
 
     document.body.appendChild(this.toggle);
     document.body.appendChild(this.panel);
@@ -63,7 +70,6 @@ export class Overlay {
   }
 
   attachSettings(dropdown) {
-    // Append settings into right side of header
     const headerRight = this.panel.querySelector('#cd-header-right');
     dropdown.mount(headerRight);
     if (this.theme) dropdown.setTheme && dropdown.setTheme(this.theme.load());
@@ -80,14 +86,15 @@ export class Overlay {
   }
 
   setPanels(data) {
-    this.tabsWrap.textContent = '';
+    if (this.tabsView && this.tabsView.root) this.tabsView.root.textContent = '';
     this.actionsWrap.textContent = '';
     this.panels = (data && data.panels) || [];
     if (!this.panels.length) {
-      this.tabsWrap.appendChild(el('div', null, ['No panels defined. Add files under app/command_deck/**/*.rb']))
+      if (this.tabsView && this.tabsView.root) {
+        this.tabsView.root.appendChild(el('div', null, ['No panels defined. Add files under app/command_deck/**/*.rb']))
+      }
       return;
     }
-    // Initialize selector
     if (this.panelSelector) {
       this.panelSelector.setPanels(this.panels);
     }
@@ -110,196 +117,13 @@ export class Overlay {
   }
 
   renderTabs(panel, selectedIndex = 0) {
-    this.tabsWrap.textContent = '';
+    if (this.tabsView && this.tabsView.root) this.tabsView.root.textContent = '';
     this.actionsWrap.textContent = '';
     this.currentTabIndex = selectedIndex;
-    (panel.tabs || []).forEach((tab, i) => {
-      const btn = el('button', { class: 'cd-tab-btn' }, [tab.title]);
-      btn.addEventListener('click', () => { this.currentTabIndex = i; this.renderActions(tab); });
-      this.tabsWrap.appendChild(btn);
-      if (i === selectedIndex) this.renderActions(tab);
-    });
+    this.tabsView.setTabs((panel && panel.tabs) || [], selectedIndex);
   }
 
   renderActions(tab) {
-    this.actionsWrap.textContent = '';
-    (tab.actions || []).forEach(action => {
-      const box = el('div', { class: 'cd-action' });
-      box.appendChild(el('div', { class: 'cd-action-title' }, [action.title]));
-      const form = el('div', { class: 'cd-form' });
-
-      const inputs = {};
-      const paramsMeta = {};
-      (action.params || []).forEach(p => {
-        const labelChildren = [p.label || p.name];
-        if (p.required === true) {
-          labelChildren.push(el('span', { class: 'cd-required', title: 'Required' }, ['*']));
-        }
-        const label = el('label', null, labelChildren);
-        let input;
-        if (p.type === 'boolean') {
-          input = el('input', { type: 'checkbox' });
-        } else if (p.type === 'integer') {
-          input = el('input', { type: 'number', step: '1' });
-        } else if (p.type === 'selector' || (p.choices && p.choices.length)) {
-          input = el('select');
-          if (p.include_blank) {
-            input.appendChild(el('option', { value: '' }, ['']));
-          }
-          (p.choices || []).forEach(ch => {
-            const attrs = { 'data-val': JSON.stringify(ch.value) };
-            if (ch.meta != null) attrs['data-meta'] = JSON.stringify(ch.meta);
-            const opt = el('option', attrs, [ch.label != null ? String(ch.label) : String(ch.value)]);
-            input.appendChild(opt);
-          });
-
-          // Restore last selection (per panel/action/param)
-          const selKey = `sel:${this.currentPanelKey || ''}:${action.key}:${p.name}`;
-          const savedRaw = store.get(selKey);
-          if (savedRaw != null) {
-            let matched = false;
-            for (let i = 0; i < input.options.length; i++) {
-              const o = input.options[i];
-              const raw = o.getAttribute('data-val');
-              if (raw === savedRaw) {
-                input.selectedIndex = i;
-                matched = true;
-                break;
-              }
-            }
-            if (!matched && p.include_blank && savedRaw === '') {
-              for (let i = 0; i < input.options.length; i++) {
-                if (input.options[i].value === '') { input.selectedIndex = i; break; }
-              }
-            }
-          }
-        } else {
-          input = el('input', { type: 'text' });
-        }
-        if (p.required === true && input) {
-          input.setAttribute('aria-required', 'true');
-          input.setAttribute('required', '');
-        }
-        form.appendChild(label);
-        form.appendChild(input);
-
-        // Optional hint below inputs (used for selector current value display)
-        let hint;
-        if (input.tagName === 'SELECT') {
-          hint = el('div', { class: 'cd-param-hint' });
-          const updateHint = () => {
-            const sel = input.options[input.selectedIndex];
-            if (!sel) { hint.textContent = ''; return; }
-            const metaRaw = sel.getAttribute('data-meta');
-            if (!metaRaw) { hint.textContent = ''; return; }
-            try {
-              const meta = JSON.parse(metaRaw);
-              if (typeof meta.enabled === 'boolean') {
-                const status = meta.enabled ? 'ON' : 'OFF';
-                hint.textContent = 'Current: ';
-                const badge = el('span', { class: `cd-badge ${meta.enabled ? 'cd-on' : 'cd-off'}` }, [status]);
-                hint.appendChild(badge);
-              } else {
-                hint.textContent = '';
-              }
-            } catch(_) { hint.textContent = ''; }
-          };
-          input.addEventListener('change', () => {
-            // Persist selection
-            const sel = input.options[input.selectedIndex];
-            const raw = sel ? sel.getAttribute('data-val') : '';
-            const selKey = `sel:${this.currentPanelKey || ''}:${action.key}:${p.name}`;
-            store.set(selKey, raw || '');
-            updateHint();
-            validate();
-          });
-          // Initialize after options are appended
-          setTimeout(updateHint, 0);
-          form.appendChild(hint);
-        }
-
-        inputs[p.name] = input;
-        paramsMeta[p.name] = p;
-      });
-
-      // Validation helpers
-      const requiredParams = (action.params || []).filter(p => p.required === true);
-      const isFilled = (p) => {
-        const inp = inputs[p.name];
-        if (!inp) return false;
-        if (p.type === 'integer') return inp.value !== '';
-        if (p.type === 'selector' || (p.choices && p.choices.length)) {
-          if (p.include_blank) return inp.value !== '' && inp.selectedIndex > -1;
-          return inp.selectedIndex > -1; // any selection counts
-        }
-        if (p.type === 'boolean') return true; // checkbox always provides a value
-        // string or others
-        return String(inp.value || '').trim() !== '';
-      };
-      const validate = () => {
-        const ok = requiredParams.every(isFilled);
-        const running = run.classList.contains('loading');
-        run.disabled = !ok || running;
-      };
-
-      const run = el('button', { class: 'cd-run', title: 'Run' }, ['\u25B6']); // ▶
-      run.addEventListener('click', () => {
-        if (run.disabled) return;
-        run.classList.add('loading');
-        run.setAttribute('aria-busy', 'true');
-        run.disabled = true;
-        const payload = {};
-        Object.keys(inputs).forEach(k => {
-          const inp = inputs[k];
-          const meta = paramsMeta[k] || {};
-          if (inp.tagName === 'SELECT') {
-            const sel = inp.options[inp.selectedIndex];
-            const raw = sel && sel.getAttribute('data-val');
-            const label = sel ? sel.textContent : '';
-            let value;
-            try { value = raw != null ? JSON.parse(raw) : inp.value; } catch(_) { value = inp.value; }
-
-            if (meta.return === 'label') {
-              payload[k] = label;
-            } else if (meta.return === 'both' || meta.return === 'object') {
-              payload[k] = { label: label, value: value };
-            } else {
-              payload[k] = value; // default: value
-            }
-
-            // Persist selection on run as well
-            const selKey = `sel:${this.currentPanelKey || ''}:${action.key}:${k}`;
-            store.set(selKey, raw || '');
-          } else {
-            payload[k] = (inp.type === 'checkbox') ? !!inp.checked : inp.value;
-          }
-        });
-        this.setRunning();
-        this.actionsApi
-          .submit(action.key, payload)
-          .then((res) => { this.setResult(res); this.refreshCurrentTab(); })
-          .catch((e) => this.setResult({ ok:false, error: String(e) }))
-          .finally(() => { run.classList.remove('loading'); run.removeAttribute('aria-busy'); validate(); });
-      });
-      const actionsRow = el('div', { class: 'cd-actions-row' });
-      actionsRow.appendChild(run);
-      form.appendChild(actionsRow);
-
-      box.appendChild(form);
-      this.actionsWrap.appendChild(box);
-
-      // Hook up validation listeners
-      (action.params || []).forEach(p => {
-        const inp = inputs[p.name];
-        if (!inp) return;
-        const evt = (inp.tagName === 'SELECT' || inp.type === 'checkbox') ? 'change' : 'input';
-        inp.addEventListener(evt, validate);
-      });
-      // Initial state
-      validate();
-    });
+    this.actionsView.setActions((tab && tab.actions) || []);
   }
-
-  setRunning(){ this.resultPre.textContent = 'Running...'; }
-  setResult(obj){ this.resultPre.textContent = jsonPretty(obj); }
 }

data/lib/command_deck/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module CommandDeck
-  VERSION = "0.1.1"
+  VERSION = "0.1.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: command_deck
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - crowrojas
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2025-09-10 00:00:00.000000000 Z
+date: 2025-09-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -65,10 +65,15 @@ files:
 - lib/command_deck/assets/js/core/store.js
 - lib/command_deck/assets/js/main.js
 - lib/command_deck/assets/js/ui/overlay.js
+- lib/command_deck/assets/js/ui/overlay/action_form.js
+- lib/command_deck/assets/js/ui/overlay/actions_view.js
+- lib/command_deck/assets/js/ui/overlay/header_view.js
+- lib/command_deck/assets/js/ui/overlay/position_manager.js
+- lib/command_deck/assets/js/ui/overlay/result_view.js
+- lib/command_deck/assets/js/ui/overlay/tabs_view.js
+- lib/command_deck/assets/js/ui/overlay/theme_manager.js
 - lib/command_deck/assets/js/ui/panel_selector.js
-- lib/command_deck/assets/js/ui/position_manager.js
 - lib/command_deck/assets/js/ui/settings_dropdown.js
-- lib/command_deck/assets/js/ui/theme_manager.js
 - lib/command_deck/engine.rb
 - lib/command_deck/executor.rb
 - lib/command_deck/injector.rb