HTWind Widget Generator System Prompt

Widget Summary - A compact, premium Windows service manager widget with a dark glass aesthetic. - Lists Windows services with name, display name, status, and start type. - Supports Start, Stop, and Restart actions with confirmation for mutating operations. - Real-time status updates with loading, error, and empty states. - Keyboard-accessible controls with visible focus states and ARIA labels.

Design Rationale The widget uses a dark glassmorphism theme with subtle gradients and a refined color palette. The layout is optimized for narrow desktop surfaces, with a clear header, a scrollable service list, and a status footer. Actions are visually distinct with color-coded buttons (green for start, red for stop, amber for restart) and require explicit confirmation for destructive operations. The design balances density with readability, ensuring the widget remains usable at 300px width.

Implementation ```html Service Manager :root { --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-card: rgba(30, 41, 59, 0.8); --bg-hover: rgba(51, 65, 85, 0.6); --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; --accent: #38bdf8; --accent-hover: #0ea5e9; --success: #4ade80; --warning: #fbbf24; --error: #f87171; --border: rgba(148, 163, 184, 0.2); --radius: 8px; --radius-sm: 4px; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); --font-mono: 'Cascadia Code', 'Consolas', monospace; --font-sans: 'Segoe UI', system-ui, sans-serif; --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 24px; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: var(--font-sans); background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; display: flex; flex-direction: column; padding: var(--spacing-md); font-size: 13px; line-height: 1.5; }

.widget-container { display: flex; flex-direction: column; gap: var(--spacing-md); flex: 1; min-width: 280px; max-width: 480px; margin: 0 auto; width: 100%; }

.header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md) var(--spacing-lg); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(8px); }

.header-title { font-size: 15px; font-weight: 600; letter-spacing: 0.5px; display: flex; align-items: center; gap: var(--spacing-sm); }

.header-title svg { width: 18px; height: 18px; fill: var(--accent); }

.refresh-btn { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; display: flex; align-items: center; gap: var(--spacing-xs); transition: all 0.2s ease; }

.refresh-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--accent); }

.refresh-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.refresh-btn svg { width: 14px; height: 14px; fill: currentColor; }

.refresh-btn.loading svg { animation: spin 1s linear infinite; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.status-bar { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-sm); font-size: 12px; display: flex; align-items: center; gap: var(--spacing-sm); min-height: 32px; transition: all 0.3s ease; }

.status-bar.info { background: rgba(56, 189, 248, 0.1); color: var(--accent); border: 1px solid rgba(56, 189, 248, 0.2); }

.status-bar.ok { background: rgba(74, 222, 128, 0.1); color: var(--success); border: 1px solid rgba(74, 222, 128, 0.2); }

.status-bar.warn { background: rgba(251, 191, 36, 0.1); color: var(--warning); border: 1px solid rgba(251, 191, 36, 0.2); }

.status-bar.error { background: rgba(248, 113, 113, 0.1); color: var(--error); border: 1px solid rgba(248, 113, 113, 0.2); }

.status-bar .status-icon { width: 14px; height: 14px; flex-shrink: 0; }

.status-bar .status-icon svg { width: 100%; height: 100%; fill: currentColor; }

.service-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-xs); max-height: 400px; min-height: 200px; }

.service-list::-webkit-scrollbar { width: 6px; }

.service-list::-webkit-scrollbar-track { background: transparent; }

.service-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.service-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--spacing-md); transition: all 0.2s ease; }

.service-item:hover { background: var(--bg-hover); border-color: var(--accent); }

.service-item-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); }

.service-name { font-weight: 600; font-size: 13px; word-break: break-all; }

.service-status { font-size: 11px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; }

.service-status.running { background: rgba(74, 222, 128, 0.15); color: var(--success); }

.service-status.stopped { background: rgba(248, 113, 113, 0.15); color: var(--error); }

.service-status.unknown { background: rgba(148, 163, 184, 0.15); color: var(--text-secondary); }

.service-details { display: flex; gap: var(--spacing-md); font-size: 11px; color: var(--text-secondary); margin-bottom: var(--spacing-sm); }

.service-details span { display: flex; align-items: center; gap: 4px; }

.service-actions { display: flex; gap: var(--spacing-xs); flex-wrap: wrap; }

.action-btn { padding: 4px 12px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: 11px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; background: transparent; color: var(--text-secondary); }

.action-btn:hover:not(:disabled) { transform: translateY(-1px); }

.action-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.action-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.action-btn.start { border-color: rgba(74, 222, 128, 0.3); color: var(--success); }

.action-btn.start:hover:not(:disabled) { background: rgba(74, 222, 128, 0.1); border-color: var(--success); }

.action-btn.stop { border-color: rgba(248, 113, 113, 0.3); color: var(--error); }

.action-btn.stop:hover:not(:disabled) { background: rgba(248, 113, 113, 0.1); border-color: var(--error); }

.action-btn.restart { border-color: rgba(251, 191, 36, 0.3); color: var(--warning); }

.action-btn.restart:hover:not(:disabled) { background: rgba(251, 191, 36, 0.1); border-color: var(--warning); }

.empty-state { text-align: center; padding: var(--spacing-xl); color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); }

.empty-state svg { width: 48px; height: 48px; fill: var(--text-muted); opacity: 0.5; }

.error-details { margin-top: var(--spacing-sm); padding: var(--spacing-sm); background: rgba(248, 113, 113, 0.05); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); max-height: 100px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; }

.confirmation-dialog { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px); }

.confirmation-content { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--spacing-xl); max-width: 320px; width: 90%; box-shadow: var(--shadow); }

.confirmation-content h3 { margin-bottom: var(--spacing-md); font-size: 14px; }

.confirmation-content p { margin-bottom: var(--spacing-lg); color: var(--text-secondary); font-size: 12px; }

.confirmation-actions { display: flex; gap: var(--spacing-sm); justify-content: flex-end; }

.confirm-btn { padding: 6px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: 12px; cursor: pointer; transition: all 0.2s ease; }

.confirm-btn:hover { background: var(--bg-hover); }

.confirm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.confirm-btn.danger { background: var(--error); color: white; border-color: var(--error); }

.confirm-btn.danger:hover { background: #dc2626; }

.hidden { display: none !important; }

.loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.8); display: flex; align-items: center; justify-content: center; z-index: 999; backdrop-filter: blur(2px); }

.loading-spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }

@media (max-width: 320px) { body { padding: var(--spacing-xs); } .service-actions { flex-direction: column; } .action-btn { width: 100%; } } Service Manager Refresh

Ready to load services

No services loaded

Click Refresh to load Windows services

Confirm Action Are you sure?

Cancel Confirm

// Utility 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') { const statusBar = document.getElementById('statusBar'); const statusText = document.getElementById('statusText'); statusBar.className = 'status-bar ' + tone; statusText.textContent = message; }

async function runPs(script, parseJson = false, timeoutMs = 10000, maxOutputChars = 50000) { if (!window.HTWind || !window.HTWind.invoke) { throw new Error('HTWind host bridge not available'); }

const response = await window.HTWind.invoke('powershell.exec', { script, timeoutMs, maxOutputChars, shell: 'powershell' });

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 after ' + timeoutMs + 'ms'); }

if (exitCode !== 0) { const errorMsg = error || output || 'Unknown error'; throw new Error('Command failed with exit code ' + exitCode + ': ' + errorMsg); }

if (outputTruncated || errorTruncated) { setStatus('Output was 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 response: ' + e.message); } }

return output; }

// State management let services = []; let isLoading = false; let pendingAction = null;

// DOM elements const serviceList = document.getElementById('serviceList'); const emptyState = document.getElementById('emptyState'); const refreshBtn = document.getElementById('refreshBtn'); const loadingOverlay = document.getElementById('loadingOverlay'); const confirmationDialog = document.getElementById('confirmationDialog'); const confirmTitle = document.getElementById('confirmTitle'); const confirmMessage = document.getElementById('confirmMessage'); const confirmOk = document.getElementById('confirmOk'); const confirmCancel = document.getElementById('confirmCancel');

// Load services async function loadServices() { if (isLoading) return; isLoading = true; refreshBtn.disabled = true; refreshBtn.classList.add('loading'); loadingOverlay.classList.remove('hidden'); setStatus('Loading services...', 'info');

const script = ` $ProgressPreference = 'SilentlyContinue' $ErrorActionPreference = 'Stop' & { Get-Service | Select-Object Name, DisplayName, Status, StartType | ConvertTo-Json -Depth 4 -Compress } `;

try { const data = await runPs(script, true, 15000, 100000); services = Array.isArray(data) ? data : (data ? [data] : []); renderServices(); setStatus('Loaded ' + services.length + ' services', 'ok'); } catch (error) { setStatus('Failed to load services', 'error'); renderError(error); } finally { isLoading = false; refreshBtn.disabled = false; refreshBtn.classList.remove('loading'); loadingOverlay.classList.add('hidden'); } }

// Render services function renderServices() { serviceList.innerHTML = ''; if (services.length === 0) { emptyState.classList.remove('hidden'); return; }

emptyState.classList.add('hidden');

services.forEach(service => { const item = document.createElement('div'); item.className = 'service-item'; item.setAttribute('role', 'listitem');

const statusClass = service.Status === 'Running' ? 'running' : service.Status === 'Stopped' ? 'stopped' : 'unknown';

item.innerHTML = ` ${escapeHtml(service.Name)} ${escapeHtml(service.Status || 'Unknown')} ${escapeHtml(service.DisplayName || 'N/A')} ${escapeHtml(service.StartType || 'N/A')} Start Stop Restart `;

serviceList.appendChild(item); });

// Attach event listeners serviceList.querySelectorAll('.action-btn').forEach(btn => { btn.addEventListener('click', handleActionClick); }); }

// Handle action button clicks function handleActionClick(event) { const btn = event.target; const action = btn.dataset.action; const serviceName = btn.dataset.service; const service = services.find(s => s.Name === serviceName);

if (!service) return;

const actionLabels = { start: 'Start', stop: 'Stop', restart: 'Restart' };

const actionMessages = { start: `Start service "${serviceName}"?`, stop: `Stop service "${serviceName}"? This may interrupt dependent services.`, restart: `Restart service "${serviceName}"?` };

pendingAction = { action, serviceName }; confirmTitle.textContent = actionLabels[action] + ' Service'; confirmMessage.textContent = actionMessages[action]; confirmationDialog.classList.remove('hidden'); confirmOk.focus(); }

// Execute service action async function executeServiceAction(action, serviceName) { loadingOverlay.classList.remove('hidden'); setStatus(`${action.charAt(0).toUpperCase() + action.slice(1)}ing service "${serviceName}"...`, 'info');

const script = ` $ProgressPreference = 'SilentlyContinue' $ErrorActionPreference = 'Stop' & { $service = Get-Service -Name '${escapeForSingleQuotedPs(serviceName)}' -ErrorAction Stop switch ('${action}') { 'start' { Start-Service -Name $service.Name -ErrorAction Stop } 'stop' { Stop-Service -Name $service.Name -Force -ErrorAction Stop } 'restart' { Restart-Service -Name $service.Name -Force -ErrorAction Stop } } $service.Refresh() [PSCustomObject]@{ Name = $service.Name Status = $service.Status.ToString() } | ConvertTo-Json -Compress } `;

try { const result = await runPs(script, true, 30000, 10000); setStatus(`Service "${serviceName}" ${action}ed successfully`, 'ok'); await loadServices(); } catch (error) { setStatus(`Failed to ${action} service "${serviceName}"`, 'error'); renderError(error); } finally { loadingOverlay.classList.add('hidden'); } }

// Render error state function renderError(error) { const errorDiv = document.createElement('div'); errorDiv.className = 'service-item'; errorDiv.innerHTML = ` ⚠ Error Occurred ${escapeHtml(error.message || 'Unknown error')} Retry `; serviceList.innerHTML = ''; serviceList.appendChild(errorDiv); }

// Escape HTML function escapeHtml(str) { const div = document.createElement('div'); div.textContent = str; return div.innerHTML; }

function escapeAttr(str) { return escapeHtml(str).replace(/"/g, '"'); }

// Event listeners refreshBtn.addEventListener('click', loadServices);

confirmOk.addEventListener('click', () => { if (pendingAction) { confirmationDialog.classList.add('hidden'); executeServiceAction(pendingAction.action, pendingAction.serviceName); pendingAction = null; } });

confirmCancel.addEventListener('click', () => { confirmationDialog.classList.add('hidden'); pendingAction = null; });

// Close confirmation on Escape document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !confirmationDialog.classList.contains('hidden')) { confirmationDialog.classList.add('hidden'); pendingAction = null; } });

// Initial load loadServices(); ```

PowerShell Notes - All scripts set `$ProgressPreference='SilentlyContinue'` and `$ErrorActionPreference='Stop'` for consistent behavior. - Service actions (start/stop/restart) are wrapped in a confirmation dialog to prevent accidental mutations. - Timeout set to 30 seconds for service operations (which can be slow) and 15 seconds for listing services. - Service names are escaped using single-quote doubling (`''`) before embedding in PowerShell scripts. - JSON output is parsed safely with error handling for malformed responses.

Customization Tips - **Palette**: Edit CSS variables in `:root` to change colors (e.g., `--accent`, `--success`, `--error`). - **Refresh cadence**: Modify the `timeoutMs` parameter in `loadServices()` or add a `setInterval` for auto-refresh. - **Service scope**: Change the `Get-Service` query to filter services (e.g., `-Name 'Win*'` or `-DisplayName '*SQL*'`). - **Action behavior**: Adjust the confirmation messages or add additional actions (e.g., "Pause" or "Resume") by extending the switch statement in the PowerShell script.

HTWind Widget Generator System Prompt

Prompt-InhaltSpeichern

Verwendung

Referenzen

Diskussion