newos4: floating-ui-designer v3 — repair 12 escape-mangled JS sites, rebuild 344-cmd registry (124->344), quoting/import/preset UX fixes; add Node harness + registry generator; floating-ui skill JSON de-piped

1 files changed, 290 insertions, 0 deletions

diff --git a/downloads/floatimg-buttons.html b/downloads/floatimg-buttons.html
new file mode 100644
index 0000000..317dd42
--- /dev/null
+++ b/downloads/floatimg-buttons.html
@@ -0,0 +1,290 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Floating Buttons Setup</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      min-height: 100vh;
+      padding: 40px 20px;
+      color: #fff;
+    }
+    .container { max-width: 640px; margin: 0 auto; }
+    h1 { text-align: center; margin-bottom: 10px; font-size: 1.8em; }
+    h2 { margin: 35px 0 15px; font-size: 1.2em; color: #90EE90; }
+    .subtitle { text-align: center; color: #888; margin-bottom: 30px; }
+
+    .card {
+      background: rgba(255,255,255,0.1);
+      border: 1px solid transparent;
+      border-radius: 12px;
+      padding: 18px 20px;
+      margin-bottom: 12px;
+      cursor: pointer;
+      transition: background 0.2s;
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      user-select: none;
+    }
+    .card:hover { background: rgba(255,255,255,0.18); }
+    .card:active { transform: scale(0.98); }
+    .card.copied { background: rgba(76,175,80,0.35); border-color: #4CAF50; }
+
+    .emoji { font-size: 1.8em; width: 50px; text-align: center; }
+    .info { flex: 1; min-width: 0; }
+    .label { font-size: 1.1em; font-weight: bold; margin-bottom: 5px; }
+    .cmd {
+      font-family: monospace;
+      background: rgba(0,0,0,0.35);
+      padding: 8px 12px;
+      border-radius: 6px;
+      font-size: 0.82em;
+      color: #90EE90;
+      word-break: break-all;
+      white-space: pre-wrap;
+    }
+    .copy-icon { font-size: 1.3em; opacity: 0.4; }
+    .card:hover .copy-icon { opacity: 1; }
+
+    .btn-wide {
+      background: #4CAF50;
+      color: white;
+      border: none;
+      padding: 14px 30px;
+      border-radius: 8px;
+      font-size: 1.05em;
+      cursor: pointer;
+      width: 100%;
+      margin-top: 15px;
+      transition: background 0.2s;
+    }
+    .btn-wide:hover { background: #45a049; }
+    .btn-wide:active { transform: scale(0.98); }
+
+    .note {
+      background: rgba(255,193,7,0.12);
+      border-left: 4px solid #FFC107;
+      padding: 14px 18px;
+      border-radius: 0 8px 8px 0;
+      margin: 20px 0;
+      font-size: 0.92em;
+      color: #ffe082;
+    }
+
+    .preview {
+      background: rgba(0,0,0,0.25);
+      border-radius: 12px;
+      padding: 20px;
+      margin-bottom: 25px;
+      text-align: center;
+    }
+    .preview-label { color: #888; margin-bottom: 14px; font-size: 0.9em; }
+    .preview-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
+    .preview-btn {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border: none;
+      padding: 10px 16px;
+      border-radius: 8px;
+      font-size: 1.25em;
+    }
+
+    .toast {
+      position: fixed;
+      bottom: 30px;
+      left: 50%;
+      transform: translateX(-50%) translateY(120px);
+      background: #4CAF50;
+      color: white;
+      padding: 12px 24px;
+      border-radius: 8px;
+      font-weight: bold;
+      transition: transform 0.3s;
+      z-index: 1000;
+    }
+    .toast.show { transform: translateX(-50%) translateY(0); }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>👆 Floating Buttons Setup</h1>
+    <p class="subtitle">Click a card to copy the command &nbsp;·&nbsp; paste it in the WebX11 terminal</p>
+
+    <div class="preview">
+      <div class="preview-label">Preview</div>
+      <div class="preview-btns" id="previewBtns"></div>
+    </div>
+
+    <div class="note">
+      ⚠️ <b>Note:</b> <code>clipboard-history</code> is <b>not</b> a real command in this system —
+      that's why the 📋 button did nothing. It was replaced below with real, verified commands.
+    </div>
+
+    <h2>✅ Your Buttons (all verified working)</h2>
+    <div id="cardsMain"></div>
+    <button class="btn-wide" id="btnCopyMain">📋 Copy All Main Commands</button>
+
+    <h2>💡 More Examples (all verified working)</h2>
+    <div id="cardsMore"></div>
+    <button class="btn-wide" id="btnCopyMore">📋 Copy All Example Commands</button>
+  </div>
+
+  <div class="toast" id="toast">Copied!</div>
+
+  <script>
+    // ── All commands below were verified against the system command list ──
+
+    var MAIN_BUTTONS = [
+      { emoji: '🆕', label: 'New Session',
+        cmd: 'floating-add btn new-session "🆕" new-session' },
+      { emoji: '✅', label: 'AI Allow',
+        cmd: 'floating-add btn ai-allow "✅" ai-allow' },
+      { emoji: '⚙️', label: 'AI Config (confirm-timeout 0)',
+        cmd: 'floating-add btn config-timeout "⚙️" ai-config confirm-timeout 0' },
+      { emoji: '🌐', label: 'WebDAV Browser',
+        cmd: 'floating-add btn webdav-btn "🌐" webdav-browser' },
+      { emoji: '📊', label: 'System Status',
+        cmd: 'floating-add btn status-btn "📊" status' }
+    ];
+
+    var MORE_BUTTONS = [
+      { emoji: '🩺', label: 'Health Check',
+        cmd: 'floating-add btn health-btn "🩺" health-check' },
+      { emoji: '🧹', label: 'Clear AI Context',
+        cmd: 'floating-add btn ai-clear-btn "🧹" ai-clear' },
+      { emoji: '⏹️', label: 'Stop AI Task',
+        cmd: 'floating-add btn ai-stop-btn "⏹️" ai-stop' },
+      { emoji: '🧠', label: 'Memory Usage',
+        cmd: 'floating-add btn mem-btn "🧠" mem' },
+      { emoji: '📦', label: 'List Modules',
+        cmd: 'floating-add btn modules-btn "📦" modules' },
+      { emoji: '🎨', label: 'Change Theme',
+        cmd: 'floating-add btn theme-btn "🎨" theme' },
+      { emoji: '💬', label: 'Chat Mode',
+        cmd: 'floating-add btn chat-btn "💬" chat' },
+      { emoji: '👥', label: 'List Agents',
+        cmd: 'floating-add btn agents-btn "👥" agent-list' },
+      { emoji: '🗂️', label: 'Kanban Board',
+        cmd: 'floating-add btn kanban-btn "🗂️" kanban' },
+      { emoji: '🔐', label: 'WebDAV Status',
+        cmd: 'floating-add btn webdav-status-btn "🔐" webdav-status' },
+      { emoji: '🧪', label: 'Run System Doctor',
+        cmd: 'floating-add btn doctor-btn "🧪" doctor' },
+      { emoji: '⏰', label: 'System Uptime',
+        cmd: 'floating-add btn uptime-btn "⏰" uptime' }
+    ];
+
+    // ── Copy helpers (robust: clipboard API first, textarea fallback second) ──
+
+    function fallbackCopy(text) {
+      var ta = document.createElement('textarea');
+      ta.value = text;
+      ta.setAttribute('readonly', '');
+      ta.style.position = 'fixed';
+      ta.style.left = '-9999px';
+      ta.style.top = '0';
+      document.body.appendChild(ta);
+      ta.focus();
+      ta.select();
+      var ok = false;
+      try { ok = document.execCommand('copy'); } catch (e) { ok = false; }
+      document.body.removeChild(ta);
+      return ok;
+    }
+
+    function copyText(text) {
+      return new Promise(function (resolve) {
+        if (navigator.clipboard && window.isSecureContext) {
+          navigator.clipboard.writeText(text).then(
+            function () { resolve(true); },
+            function () { resolve(fallbackCopy(text)); }
+          );
+        } else {
+          resolve(fallbackCopy(text));
+        }
+      });
+    }
+
+    function showToast(msg) {
+      var toast = document.getElementById('toast');
+      toast.textContent = msg;
+      toast.classList.add('show');
+      setTimeout(function () { toast.classList.remove('show'); }, 2000);
+    }
+
+    function copyCard(el, cmd) {
+      copyText(cmd).then(function (ok) {
+        if (ok) {
+          el.classList.add('copied');
+          showToast('Copied! Paste in terminal');
+          setTimeout(function () { el.classList.remove('copied'); }, 1500);
+        } else {
+          showToast('Copy failed — select the command text manually');
+        }
+      });
+    }
+
+    // ── Render cards from data (no inline onclick — avoids quote-escaping bugs) ──
+
+    function renderCards(containerId, list) {
+      var host = document.getElementById(containerId);
+      list.forEach(function (b) {
+        var card = document.createElement('div');
+        card.className = 'card';
+
+        var emoji = document.createElement('div');
+        emoji.className = 'emoji';
+        emoji.textContent = b.emoji;
+
+        var info = document.createElement('div');
+        info.className = 'info';
+        var label = document.createElement('div');
+        label.className = 'label';
+        label.textContent = b.label;
+        var cmd = document.createElement('div');
+        cmd.className = 'cmd';
+        cmd.textContent = b.cmd;   // textContent → no HTML escaping issues
+        info.appendChild(label);
+        info.appendChild(cmd);
+
+        var icon = document.createElement('div');
+        icon.className = 'copy-icon';
+        icon.textContent = '📋';
+
+        card.appendChild(emoji);
+        card.appendChild(info);
+        card.appendChild(icon);
+
+        card.addEventListener('click', function () { copyCard(card, b.cmd); });
+        host.appendChild(card);
+      });
+    }
+
+    renderCards('cardsMain', MAIN_BUTTONS);
+    renderCards('cardsMore', MORE_BUTTONS);
+
+    // Preview strip
+    var preview = document.getElementById('previewBtns');
+    MAIN_BUTTONS.forEach(function (b) {
+      var pb = document.createElement('div');
+      pb.className = 'preview-btn';
+      pb.textContent = b.emoji;
+      preview.appendChild(pb);
+    });
+
+    // Copy-all buttons
+    document.getElementById('btnCopyMain').addEventListener('click', function () {
+      copyText(MAIN_BUTTONS.map(function (b) { return b.cmd; }).join('\n'))
+        .then(function () { showToast('All main commands copied!'); });
+    });
+    document.getElementById('btnCopyMore').addEventListener('click', function () {
+      copyText(MORE_BUTTONS.map(function (b) { return b.cmd; }).join('\n'))
+        .then(function () { showToast('All example commands copied!'); });
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file