Sistema de Prompt para el Generador de Widgets HTWind

Widget Summary - Built a compact, premium PowerShell command runner widget with a dark glass aesthetic and clear status/error states. - Includes a command input area with history (up to 8 entries), quick-run buttons for common safe commands, and a live output console. - Implements full host bridge safety: timeout handling, stderr capture, truncation detection, and JSON parsing mode. - Provides a confirmation modal for any command containing mutating keywords (kill, remove, delete, stop, restart, etc.). - Designed for narrow desktop widths (~300px) with responsive layout and keyboard-first operation. Design Rationale The widget uses a dark, layered "terminal glass" identity: deep slate background, subtle cyan/amber accents, and monospace output. The header is compact with a pulsing "ready" indicator. The command input is the hero element, with a history dropdown and quick-action chips for zero-typing execution. Output is rendered in a scrollable console with ANSI-free plain text, color-coded by severity. Error states use a dedicated banner with retry action, not raw text dumps. Motion is limited to a soft fade/slide on state changes to avoid distraction. Implementation ```html PS Runner :root { --bg: #0d1117; --surface: #161b22; --surface-2: #1f2630; --border: #2d333b; --text: #e6edf3; --text-dim: #8b949e; --accent: #58a6ff; --accent-soft: rgba(88, 166, 255, 0.15); --ok: #3fb950; --warn: #d29922; --error: #f85149; --radius: 8px; --radius-sm: 4px; --font-mono: 'Cascadia Code', 'Consolas', 'Courier New', monospace; --font-ui: 'Segoe UI', system-ui, sans-serif; --shadow: 0 4px 16px rgba(0,0,0,0.4); --transition: 0.18s ease; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 14px; line-height: 1.5; padding: 12px; min-height: 100vh; display: flex; flex-direction: column; gap: 12px; } /* Header */ .header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .header-title { font-size: 15px; font-weight: 600; letter-spacing: 0.3px; display: flex; align-items: center; gap: 8px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); transition: background var(--transition), box-shadow var(--transition); } .status-dot.busy { background: var(--warn); box-shadow: 0 0 6px var(--warn); animation: pulse 1.2s infinite; } .status-dot.error { background: var(--error); box-shadow: 0 0 6px var(--error); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .header-status { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); } /* Input area */ .input-row { display: flex; gap: 8px; align-items: center; } .input-wrapper { flex: 1; position: relative; } #cmdInput { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font-mono); font-size: 13px; padding: 10px 12px; outline: none; transition: border-color var(--transition), box-shadow var(--transition); } #cmdInput:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } #cmdInput::placeholder { color: var(--text-dim); } .history-btn { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-dim); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: background var(--transition), color var(--transition), border-color var(--transition); flex-shrink: 0; } .history-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--accent); } .history-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .history-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 10; max-height: 180px; overflow-y: auto; display: none; } .history-dropdown.open { display: block; } .history-item { padding: 8px 12px; font-family: var(--font-mono); font-size: 12px; cursor: pointer; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background var(--transition); } .history-item:last-child { border-bottom: none; } .history-item:hover { background: var(--surface-2); } .history-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* Quick actions */ .quick-row { display: flex; gap: 6px; flex-wrap: wrap; } .quick-btn { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); font-family: var(--font-mono); font-size: 11px; padding: 4px 10px; cursor: pointer; transition: all var(--transition); } .quick-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--accent); } .quick-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Run button */ .run-btn { background: var(--accent); border: none; border-radius: var(--radius); color: #0d1117; font-weight: 600; font-size: 13px; padding: 10px 20px; cursor: pointer; transition: background var(--transition), transform var(--transition), opacity var(--transition); flex-shrink: 0; } .run-btn:hover { background: #79b8ff; } .run-btn:active { transform: scale(0.97); } .run-btn:disabled { opacity: 0.5; cursor: not-allowed; } .run-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } /* Output console */ .output-console { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; min-height: 120px; max-height: 320px; overflow-y: auto; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; flex: 1; } .output-console:empty::before { content: 'Output will appear here...'; color: var(--text-dim); font-style: italic; } .output-line { padding: 2px 0; } .output-line.info { color: var(--text); } .output-line.ok { color: var(--ok); } .output-line.warn { color: var(--warn); } .output-line.error { color: var(--error); } /* Status bar */ .status-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-dim); min-height: 20px; } .status-message { display: flex; align-items: center; gap: 6px; flex: 1; } .status-message.info { color: var(--text-dim); } .status-message.ok { color: var(--ok); } .status-message.warn { color: var(--warn); } .status-message.error { color: var(--error); } .retry-btn { background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); font-size: 11px; padding: 2px 8px; cursor: pointer; transition: all var(--transition); } .retry-btn:hover { border-color: var(--accent); color: var(--accent); } .retry-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Confirmation modal */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; pointer-events: none; transition: opacity var(--transition); } .modal-overlay.open { opacity: 1; pointer-events: auto; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; max-width: 360px; width: 90%; } .modal-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--warn); } .modal-desc { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; word-break: break-word; } .modal-actions { display: flex; gap: 8px; justify-content: flex-end; } .modal-btn { padding: 6px 14px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); transition: all var(--transition); } .modal-btn:hover { border-color: var(--accent); } .modal-btn.danger { background: var(--error); border-color: var(--error); color: white; } .modal-btn.danger:hover { background: #ff6b61; } .modal-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } @media (max-width: 360px) { body { padding: 8px; } .run-btn { padding: 10px 14px; } .quick-btn { font-size: 10px; padding: 3px 8px; } } PS Runner Ready ⌄ Run Get-Date Top 5 CPU Services Get-Location Ready Retry Confirm Action Cancel Run Anyway (function() { 'use strict'; // DOM refs const cmdInput = document.getElementById('cmdInput'); const runBtn = document.getElementById('runBtn'); const historyBtn = document.getElementById('historyBtn'); const historyDropdown = document.getElementById('historyDropdown'); const outputConsole = document.getElementById('outputConsole'); const statusMessage = document.getElementById('statusMessage'); const statusDot = document.getElementById('statusDot'); const headerStatus = document.getElementById('headerStatus'); const retryBtn = document.getElementById('retryBtn'); const confirmModal = document.getElementById('confirmModal'); const modalDesc = document.getElementById('modalDesc'); const modalCancel = document.getElementById('modalCancel'); const modalConfirm = document.getElementById('modalConfirm'); // State let history = []; let lastCommand = ''; let isRunning = false; let pendingCommand = null; let lastError = null; // Mutating keywords for confirmation const MUTATING_PATTERN = /\b(kill|stop|remove|delete|rm|del|clear|format|set|write|new-item|remove-item|restart|shutdown|disable|enable)\b/i; // --- Helpers --- function pick(obj, camelKey, pascalKey) { if (!obj) return undefined; return obj[camelKey] !== undefined ? obj[camelKey] : obj[pascalKey]; } function escapeForSingleQuotedPs(value) { return String(value).replace(/'/g, "''"); } function setStatus(message, tone = 'info') { statusMessage.textContent = message; statusMessage.className = 'status-message ' + tone; statusDot.className = 'status-dot' + (tone === 'busy' ? ' busy' : tone === 'error' ? ' error' : ''); headerStatus.textContent = tone === 'busy' ? 'Running...' : tone === 'error' ? 'Error' : tone === 'ok' ? 'Success' : 'Ready'; } function appendOutput(text, tone = 'info') { if (!text) return; const line = document.createElement('div'); line.className = 'output-line ' + tone; line.textContent = text; outputConsole.appendChild(line); outputConsole.scrollTop = outputConsole.scrollHeight; } function clearOutput() { outputConsole.innerHTML = ''; } function showRetry(show) { retryBtn.style.display = show ? 'inline-block' : 'none'; } // --- History --- function loadHistory() { try { const saved = localStorage.getItem('psRunnerHistory'); if (saved) history = JSON.parse(saved); } catch (e) { history = []; } if (!Array.isArray(history)) history = []; } function saveHistory() { try { localStorage.setItem('psRunnerHistory', JSON.stringify(history.slice(0, 8))); } catch (e) { // ignore storage errors } } function addToHistory(cmd) { if (!cmd || !cmd.trim()) return; history = history.filter(h => h !== cmd); history.unshift(cmd); if (history.length > 8) history = history.slice(0, 8); saveHistory(); } function renderHistory() { historyDropdown.innerHTML = ''; if (history.length === 0) { const empty = document.createElement('div'); empty.className = 'history-item'; empty.textContent = 'No history yet'; empty.style.cursor = 'default'; historyDropdown.appendChild(empty); return; } history.forEach(cmd => { const item = document.createElement('div'); item.className = 'history-item'; item.textContent = cmd; item.tabIndex = 0; item.setAttribute('role', 'option'); item.addEventListener('click', () => { cmdInput.value = cmd; closeHistory(); cmdInput.focus(); }); item.addEventListener('keydown', (e) => { if (e.key === 'Enter') { cmdInput.value = cmd; closeHistory(); cmdInput.focus(); } }); historyDropdown.appendChild(item); }); } function toggleHistory() { if (historyDropdown.classList.contains('open')) { closeHistory(); } else { renderHistory(); historyDropdown.classList.add('open'); } } function closeHistory() { historyDropdown.classList.remove('open'); } // --- PowerShell execution --- async function runPs(script, parseJson = false, timeoutMs = 10000, maxOutputChars = 50000) { if (!window.HTWind || typeof window.HTWind.invoke !== 'function') { throw new Error('HTWind bridge not available'); } const response = await window.HTWind.invoke('powershell.exec', { script, timeoutMs, maxOutputChars, shell: 'powershell', workingDirectory: undefined }); const timedOut = pick(response, 'timedOut', 'TimedOut'); const exitCode = pick(response, 'exitCode', 'ExitCode'); const output = pick(response, 'output', 'Output') || ''; const error = pick(response, 'error', 'Error') || ''; const outputTruncated = pick(response, 'outputTruncated', 'OutputTruncated'); const errorTruncated = pick(response, 'errorTruncated', 'ErrorTruncated'); if (timedOut) { throw new Error('Command timed out. Try a shorter command or increase timeout.'); } if (exitCode !== 0) { const errMsg = error || output || 'Unknown error'; throw new Error('Command failed (exit ' + exitCode + '): ' + errMsg.slice(0, 500)); } if (outputTruncated || errorTruncated) { appendOutput('⚠ Output truncated - showing partial results', 'warn'); } if (parseJson) { if (!output.trim()) return {}; try { return JSON.parse(output); } catch (e) { throw new Error('Failed to parse JSON output: ' + e.message); } } return output; } // --- Command execution flow --- function buildScript(command) { const escaped = escapeForSingleQuotedPs(command); return [ "$ProgressPreference='SilentlyContinue'", "$ErrorActionPreference='Stop'", "& { " + escaped + " }" ].join('\n'); } function isMutating(command) { return MUTATING_PATTERN.test(command); } async function executeCommand(command, skipConfirm = false) { if (isRunning) return; if (!command || !command.trim()) { setStatus('Please enter a command', 'warn'); return; } // Confirmation for mutating commands if (isMutating(command) && !skipConfirm) { pendingCommand = command; modalDesc.textContent = 'This command may modify system state: "' + command + '". Continue?'; confirmModal.classList.add('open'); modalConfirm.focus(); return; } isRunning = true; lastCommand = command; lastError = null; runBtn.disabled = true; showRetry(false); clearOutput(); addToHistory(command); setStatus('Running...', 'busy'); appendOutput('> ' + command, 'info'); const script = buildScript(command); try { const output = await runPs(script, false, 10000, 50000); if (output && output.trim()) { appendOutput(output, 'ok'); } else { appendOutput('(No output)', 'info'); } setStatus('Completed', 'ok'); } catch (err) { lastError = err; appendOutput('Error: ' + err.message, 'error'); setStatus('Failed', 'error'); showRetry(true); } finally { isRunning = false; runBtn.disabled = false; } } // --- Event wiring --- runBtn.addEventListener('click', () => { executeCommand(cmdInput.value.trim()); }); cmdInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); executeCommand(cmdInput.value.trim()); } if (e.key === 'Escape') { closeHistory(); cmdInput.blur(); } }); historyBtn.addEventListener('click', (e) => { e.stopPropagation(); toggleHistory(); }); document.addEventListener('click', (e) => { if (!historyDropdown.contains(e.target) && e.target !== historyBtn) { closeHistory(); } }); // Quick buttons document.querySelectorAll('.quick-btn').forEach(btn => { btn.addEventListener('click', () => { executeCommand(btn.dataset.cmd); }); }); // Retry retryBtn.addEventListener('click', () => { if (lastCommand) { executeCommand(lastCommand); } }); // Modal modalCancel.addEventListener('click', () => { confirmModal.classList.remove('open'); pendingCommand = null; cmdInput.focus(); }); modalConfirm.addEventListener('click', () => { confirmModal.classList.remove('open'); if (pendingCommand) { const cmd = pendingCommand; pendingCommand = null; executeCommand(cmd, true); } }); // Close modal on overlay click confirmModal.addEventListener('click', (e) => { if (e.target === confirmModal) { confirmModal.classList.remove('open'); pendingCommand = null; } }); // Init loadHistory(); cmdInput.focus(); })(); ``` PowerShell Notes - All commands are wrapped with `$ProgressPreference='SilentlyContinue'` and `$ErrorActionPreference='Stop'` to ensure deterministic behavior. - User input is escaped for single-quoted PowerShell literals (`'` → `''`) before embedding, preventing injection. - Default timeout is 10 seconds; non-zero exit codes and timeouts surface as user-friendly errors with a Retry action. - Mutating commands (kill, remove, delete, etc.) trigger a confirmation modal before execution. - Output truncation is detected and reported; stderr is captured and shown on failure. Customization Tips - **Palette**: Edit CSS variables in `:root` (e.g., `--accent`, `--bg`, `--error`) to match your theme. - **Quick commands**: Modify the `data-cmd` attributes on `.quick-btn` elements to add/remove shortcuts. - **Timeout**: Adjust the `timeoutMs` parameter in the `runPs` call (currently 10000 ms) for longer-running commands. - **History size**: Change the `slice(0, 8)` limit in `saveHistory()` and `addToHistory()` to store more/fewer entries. - **Confirmation sensitivity**: Edit the `MUTATING_PATTERN` regex to include/exclude keywords that trigger the confirmation modal.

Sistema de Prompt para el Generador de Widgets HTWind

Contenido del PromptGuardar

Uso

Referencias

Discusión