Sistema de Prompt do Gerador de Widgets HTWind

Widget Summary - Built a premium, single-file HTWind widget that monitors Windows system health: CPU, memory, disk, and uptime. - Uses PowerShell to query live system metrics with a safe, read-only script and robust JSON parsing. - Includes a polished dashboard UI with status cards, a refresh control, and clear loading/error/empty states. - Implements defensive error handling with layered messaging and a retry action for recoverable failures. - Designed for narrow desktop surfaces with responsive layout and accessibility-first interactions. Design Rationale The visual identity uses a dark, high-contrast palette with accent-colored status cards to convey system health at a glance. Typography is compact and legible, with subtle elevation and motion to feel premium without distracting. The layout prioritizes scannability: header with refresh control, metric cards in a grid, and a footer for status and last-updated time. Error states are styled as dedicated banners with actionable retry, keeping the widget usable under failure. Implementation ```html System Health Monitor :root { --bg: #0f1115; --surface: #1a1d24; --surface-hover: #22262e; --border: #2a2f3a; --text: #e8eaed; --text-muted: #9aa0a6; --accent: #4f8cff; --accent-hover: #3b78e0; --ok: #34a853; --warn: #fbbc04; --error: #ea4335; --radius: 12px; --radius-sm: 8px; --spacing: 12px; --spacing-lg: 20px; --font: 'Segoe UI', system-ui, sans-serif; --shadow: 0 2px 8px rgba(0, 0, 0, 0.3); --transition: 150ms ease; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; padding: var(--spacing-lg); min-width: 280px; } .widget { display: flex; flex-direction: column; gap: var(--spacing-lg); } .header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing); } .header h1 { font-size: 16px; font-weight: 600; letter-spacing: 0.3px; } .refresh-btn { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; transition: background var(--transition), border-color var(--transition); } .refresh-btn:hover { background: var(--surface-hover); border-color: var(--accent); } .refresh-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .refresh-btn:disabled { opacity: 0.6; cursor: not-allowed; } .refresh-btn .icon { font-size: 14px; line-height: 1; } .refresh-btn.loading .icon { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--spacing); } .metric-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--spacing); display: flex; flex-direction: column; gap: 4px; transition: border-color var(--transition); } .metric-card:hover { border-color: var(--accent); } .metric-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .metric-value { font-size: 24px; font-weight: 600; line-height: 1.2; } .metric-detail { font-size: 12px; color: var(--text-muted); } .metric-card.ok .metric-value { color: var(--ok); } .metric-card.warn .metric-value { color: var(--warn); } .metric-card.error .metric-value { color: var(--error); } .status-banner { padding: var(--spacing); border-radius: var(--radius); border: 1px solid var(--border); display: flex; align-items: center; gap: var(--spacing); font-size: 13px; } .status-banner.info { background: rgba(79, 140, 255, 0.1); border-color: var(--accent); } .status-banner.ok { background: rgba(52, 168, 83, 0.1); border-color: var(--ok); } .status-banner.warn { background: rgba(251, 188, 4, 0.1); border-color: var(--warn); } .status-banner.error { background: rgba(234, 67, 53, 0.1); border-color: var(--error); } .status-banner .status-icon { font-size: 18px; flex-shrink: 0; } .status-banner .status-content { flex: 1; display: flex; flex-direction: column; gap: 2px; } .status-banner .status-title { font-weight: 600; } .status-banner .status-detail { color: var(--text-muted); font-size: 12px; } .status-banner .retry-btn { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; transition: background var(--transition); } .status-banner .retry-btn:hover { background: var(--surface-hover); } .status-banner .retry-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .footer { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: var(--spacing); } .footer .error-detail { color: var(--error); cursor: pointer; text-decoration: underline; } .footer .error-detail:hover { color: var(--error); opacity: 0.8; } .hidden { display: none !important; } @media (max-width: 320px) { body { padding: var(--spacing); } .metrics-grid { grid-template-columns: 1fr 1fr; } .metric-value { font-size: 20px; } } System Health ↻ Refresh CPU -- Loading... Memory -- Loading... Disk (C:) -- Loading... Uptime -- Loading... ℹ️ Loading system metrics... Please wait Retry Last updated: -- Details (function () { 'use strict'; // --- Utility helpers --- function pick(obj, camelKey, pascalKey) { if (!obj) return undefined; return obj[camelKey] !== undefined ? obj[camelKey] : obj[pascalKey]; } function escapeForSingleQuotedPs(value) { if (value === undefined || value === null) return "''"; return String(value).replace(/'/g, "''"); } function setStatus(message, tone) { const banner = document.getElementById('statusBanner'); const title = document.getElementById('statusTitle'); const detail = document.getElementById('statusDetail'); const retryBtn = document.getElementById('retryBtn'); banner.className = 'status-banner ' + (tone || 'info'); title.textContent = message; if (tone === 'error') { detail.textContent = 'An error occurred while fetching system metrics.'; retryBtn.classList.remove('hidden'); } else if (tone === 'ok') { detail.textContent = 'System metrics updated successfully.'; retryBtn.classList.add('hidden'); } else if (tone === 'warn') { detail.textContent = 'Some metrics may be incomplete.'; retryBtn.classList.add('hidden'); } else { detail.textContent = 'Please wait while we fetch the latest data.'; retryBtn.classList.add('hidden'); } } async function runPs(script, parseJson = false, timeoutMs = 10000, maxOutputChars = 50000) { if (!window.HTWind || typeof window.HTWind.invoke !== 'function') { throw new Error('HTWind host bridge is not available.'); } const response = await window.HTWind.invoke('powershell.exec', { script: script, timeoutMs: timeoutMs, maxOutputChars: maxOutputChars, shell: 'powershell' }); if (pick(response, 'timedOut', 'TimedOut')) { throw new Error('Command timed out. Please try again.'); } const exitCode = pick(response, 'exitCode', 'ExitCode'); if (exitCode !== 0) { const stderr = pick(response, 'error', 'Error') || 'Unknown error'; throw new Error('Command failed with exit code ' + exitCode + ': ' + stderr); } const output = pick(response, 'output', 'Output') || ''; const outputTruncated = pick(response, 'outputTruncated', 'OutputTruncated'); if (outputTruncated) { console.warn('Output was truncated by the host bridge.'); } if (parseJson) { if (!output.trim()) { return {}; } try { return JSON.parse(output); } catch (e) { throw new Error('Failed to parse JSON response: ' + e.message); } } return output; } // --- Widget logic --- const refreshBtn = document.getElementById('refreshBtn'); const retryBtn = document.getElementById('retryBtn'); const errorDetail = document.getElementById('errorDetail'); const lastUpdated = document.getElementById('lastUpdated'); let lastError = null; let isFetching = false; const PS_SCRIPT = ` $ProgressPreference = 'SilentlyContinue' $ErrorActionPreference = 'Stop' & { $cpu = (Get-Counter '\\Processor(_Total)\\% Processor Time' -SampleInterval 1 -MaxSamples 1).CounterSamples[0].CookedValue $os = Get-CimInstance Win32_OperatingSystem $totalMem = $os.TotalVisibleMemorySize * 1KB $freeMem = $os.FreePhysicalMemory * 1KB $usedMem = $totalMem - $freeMem $memPercent = [math]::Round(($usedMem / $totalMem) * 100, 1) $disk = Get-CimInstance Win32_LogicalDisk -Filter "DeviceID='C:'" $diskTotal = $disk.Size $diskFree = $disk.FreeSpace $diskUsed = $diskTotal - $diskFree $diskPercent = [math]::Round(($diskUsed / $diskTotal) * 100, 1) $uptime = (Get-Date) - $os.LastBootUpTime $result = [PSCustomObject]@{ cpuPercent = [math]::Round($cpu, 1) memPercent = $memPercent memUsedGB = [math]::Round($usedMem / 1GB, 1) memTotalGB = [math]::Round($totalMem / 1GB, 1) diskPercent = $diskPercent diskUsedGB = [math]::Round($diskUsed / 1GB, 1) diskTotalGB = [math]::Round($diskTotal / 1GB, 1) uptimeDays = [math]::Floor($uptime.TotalDays) uptimeHours = $uptime.Hours uptimeMinutes = $uptime.Minutes } $result | ConvertTo-Json -Depth 4 -Compress } `; function formatUptime(days, hours, minutes) { const parts = []; if (days > 0) parts.push(days + 'd'); if (hours > 0) parts.push(hours + 'h'); if (minutes > 0) parts.push(minutes + 'm'); return parts.join(' ') || '0m'; } function setMetricValue(id, value, detail, tone) { const card = document.getElementById(id); const valueEl = card.querySelector('.metric-value'); const detailEl = card.querySelector('.metric-detail'); valueEl.textContent = value; detailEl.textContent = detail; card.className = 'metric-card ' + (tone || ''); } function renderMetrics(data) { const cpuTone = data.cpuPercent > 90 ? 'error' : data.cpuPercent > 70 ? 'warn' : 'ok'; const memTone = data.memPercent > 90 ? 'error' : data.memPercent > 70 ? 'warn' : 'ok'; const diskTone = data.diskPercent > 90 ? 'error' : data.diskPercent > 70 ? 'warn' : 'ok'; setMetricValue('cpuCard', data.cpuPercent + '%', 'Usage', cpuTone); setMetricValue('memoryCard', data.memPercent + '%', data.memUsedGB + ' GB / ' + data.memTotalGB + ' GB', memTone); setMetricValue('diskCard', data.diskPercent + '%', data.diskUsedGB + ' GB / ' + data.diskTotalGB + ' GB', diskTone); setMetricValue('uptimeCard', formatUptime(data.uptimeDays, data.uptimeHours, data.uptimeMinutes), 'Since boot', 'ok'); } async function fetchMetrics() { if (isFetching) return; isFetching = true; refreshBtn.disabled = true; refreshBtn.classList.add('loading'); errorDetail.classList.add('hidden'); lastError = null; setStatus('Loading system metrics...', 'info'); try { const data = await runPs(PS_SCRIPT, true, 15000, 30000); renderMetrics(data); const now = new Date(); lastUpdated.textContent = 'Last updated: ' + now.toLocaleTimeString(); setStatus('System metrics updated', 'ok'); } catch (err) { lastError = err; setStatus('Failed to load metrics', 'error'); errorDetail.classList.remove('hidden'); console.error('System health fetch error:', err); } finally { isFetching = false; refreshBtn.disabled = false; refreshBtn.classList.remove('loading'); } } function showErrorDetails() { if (!lastError) return; const detail = document.getElementById('statusDetail'); detail.textContent = lastError.message; setStatus('Error details', 'error'); } // --- Event wiring --- refreshBtn.addEventListener('click', fetchMetrics); retryBtn.addEventListener('click', fetchMetrics); errorDetail.addEventListener('click', showErrorDetails); errorDetail.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); showErrorDetails(); } }); // --- Initial load --- fetchMetrics(); })(); ``` PowerShell Notes - The script is read-only and queries CPU, memory, disk, and uptime via `Get-Counter` and `Get-CimInstance`. - Sets `$ProgressPreference='SilentlyContinue'` and `$ErrorActionPreference='Stop'` for reliability, wrapped in `& { ... }`. - Returns a single JSON object via `ConvertTo-Json -Depth 4 -Compress` for safe parsing. - Timeout set to 15 seconds; non-zero exit codes and timeouts surface as user-friendly errors with retry. - All values are rounded to one decimal place to keep payload small and avoid truncation. Customization Tips - Adjust the CPU sample interval by changing `-SampleInterval 1` in the script (e.g., `2` for a 2-second sample). - Change the disk drive by replacing `"DeviceID='C:'"` with another letter (e.g., `"DeviceID='D:'"`). - Modify the refresh cadence by adding a `setInterval(fetchMetrics, 30000)` call for 30-second auto-refresh. - Tweak the color palette by editing the CSS variables in `:root` (e.g., `--accent`, `--bg`, `--surface`). - Add more metrics (e.g., network, GPU) by extending the PowerShell object and adding new cards in the grid.

Sistema de Prompt do Gerador de Widgets HTWind

Conteúdo do PromptSalvar

Uso

Referências

Discussão