@nordbyte/nordrelay-auto-updater 0.1.0

package/src/render-panel.js

@@ -0,0 +1,446 @@
+import { attr, badge, escapeHtml, formatAge, formatDuration, metric, statusForCount, table, truncate } from "./format.js";
+
+const HISTORY_RANGE = "24h";
+
+export function renderDashboardPanel(input = {}, context = {}, settings = {}) {
+  const aggregate = input.aggregate && typeof input.aggregate === "object" ? input.aggregate : {};
+  const results = Array.isArray(aggregate.results) ? aggregate.results : [];
+  const nodes = normalizeNodes(results, context);
+  const selectedNodeKey = selectedNode(nodes, input.selectedNodeKey);
+  const selectedTab = normalizeTab(input.selectedTab);
+  const selected = nodes.find((item) => item.key === selectedNodeKey) || nodes[0];
+  return `<div class="stack" data-auto-updater-panel data-selected-node-key="${attr(selectedNodeKey)}" data-selected-tab="${attr(selectedTab)}">
+    <div class="section-header">
+      <div>
+        <h1>Auto Updater <small>- ${escapeHtml(nodes.length)} node${nodes.length === 1 ? "" : "s"}</small></h1>
+        <small>OS package-manager and global npm version checks with explicit update actions.</small>
+      </div>
+      <div class="row">
+        <button type="button" class="secondary mini-button" data-refresh-updates>Refresh</button>
+      </div>
+    </div>
+    <div class="panel compact-panel">
+      <div class="row">
+        <label class="mini-control"><span>Filter packages</span><input type="search" data-package-filter placeholder="package, manager, status"></label>
+        <label class="checkbox"><input type="checkbox" data-outdated-only> Outdated only</label>
+      </div>
+    </div>
+    ${renderComparison(nodes, selectedNodeKey)}
+    ${selected ? renderNodeDetail(selected, selectedTab) : '<div class="empty-state">No update data available.</div>'}
+  </div>`;
+}
+
+function normalizeNodes(results, context) {
+  const fallback = [{ node: context.runtime || { name: "Local node", platform: "local" }, ok: false, error: "No aggregate data available." }];
+  return (results.length ? results : fallback).map((item, index) => {
+    const output = item.result?.output && typeof item.result.output === "object" ? item.result.output : {};
+    const panelData = output.panelData && typeof output.panelData === "object"
+      ? output.panelData
+      : output.snapshot
+        ? { snapshot: output.snapshot }
+        : null;
+    const snapshot = panelData?.snapshot || null;
+    const node = item.node || snapshot?.node || {};
+    const key = String(node.id || node.name || `node-${index + 1}`);
+    return {
+      key,
+      ok: item.ok !== false && Boolean(snapshot),
+      error: item.error || item.result?.stderr || "",
+      node: {
+        id: key,
+        name: String(node.name || node.id || `Node ${index + 1}`),
+        platform: String(node.platform || ""),
+      },
+      snapshot,
+      history: panelData?.history || [],
+      automation: panelData?.automation || { rules: [] },
+      storage: panelData?.storage || null,
+      settings: panelData?.settings || {},
+    };
+  }).sort((left, right) => updateRisk(right) - updateRisk(left) || left.node.name.localeCompare(right.node.name));
+}
+
+function selectedNode(nodes, requested) {
+  const text = String(requested || "");
+  return nodes.some((item) => item.key === text) ? text : nodes[0]?.key || "";
+}
+
+function normalizeTab(value) {
+  const tab = String(value || "").toLowerCase();
+  return ["overview", "os", "npm", "history", "diagnostics"].includes(tab) ? tab : "overview";
+}
+
+function renderComparison(nodes, selectedNodeKey) {
+  const rows = nodes.map((item) => {
+    const snapshot = item.snapshot;
+    const selected = item.key === selectedNodeKey ? " selected" : "";
+    if (!item.ok || !snapshot) {
+      return `<tr class="${selected}" data-auto-updater-node-row data-node-key="${attr(item.key)}"><td><button type="button" class="monitor-node-select" data-auto-updater-node="${attr(item.key)}">${escapeHtml(item.node.name)}</button></td><td colspan="6">${badge("unavailable", "failed")} ${escapeHtml(item.error || "Plugin not installed or no data available.")}</td></tr>`;
+    }
+    return `<tr class="${selected}" data-auto-updater-node-row data-node-key="${attr(item.key)}">
+      <td><button type="button" class="monitor-node-select" data-auto-updater-node="${attr(item.key)}">${escapeHtml(item.node.name)}</button></td>
+      <td>${escapeHtml(item.node.platform || "-")}</td>
+      <td>${badge(snapshot.os.updateCount, statusForCount(snapshot.os.updateCount))}</td>
+      <td>${badge(snapshot.npm.outdatedCount, statusForCount(snapshot.npm.outdatedCount))}</td>
+      <td>${escapeHtml(snapshot.npm.packageCount)}</td>
+      <td title="${attr(snapshot.checkedAt)}">${escapeHtml(formatAge(snapshot.checkedAt))}</td>
+      <td>${snapshot.errors.length ? badge(`${snapshot.errors.length} warnings`, "warning") : badge("ok", "enabled")}</td>
+    </tr>`;
+  });
+  return `<section class="panel monitor-comparison-panel auto-updater-comparison-panel">
+    <div class="section-header"><h2>Node comparison</h2><small>Nodes without this plugin enabled are skipped or shown unavailable.</small></div>
+    ${table(["Node", "Platform", "OS updates", "npm outdated", "npm packages", "Checked", "Status"], rows)}
+  </section>`;
+}
+
+function renderNodeDetail(item, selectedTab) {
+  const tabButtons = [
+    ["overview", "Overview"],
+    ["os", "OS Updates"],
+    ["npm", "npm Packages"],
+    ["history", "History"],
+    ["diagnostics", "Diagnostics"],
+  ].map(([id, label]) => `<button type="button" class="${id === selectedTab ? "active" : ""}" data-auto-updater-tab="${attr(id)}">${escapeHtml(label)}</button>`).join("");
+  return `<section class="panel monitor-node-panel auto-updater-node-panel">
+    <div class="section-header"><h2>${escapeHtml(item.node.name)} <small>${escapeHtml(item.node.platform || "")}</small></h2></div>
+    <div class="section-tabs" role="tablist">${tabButtons}</div>
+    <div class="callout" data-action-result hidden></div>
+    <div class="stack plugin-tab-content">
+      ${selectedTab === "overview" ? renderOverview(item) : ""}
+      ${selectedTab === "os" ? renderOsUpdates(item) : ""}
+      ${selectedTab === "npm" ? renderNpmPackages(item) : ""}
+      ${selectedTab === "history" ? renderHistory(item) : ""}
+      ${selectedTab === "diagnostics" ? renderDiagnostics(item) : ""}
+    </div>
+  </section>`;
+}
+
+function renderOverview(item) {
+  const snapshot = item.snapshot;
+  if (!snapshot) return `<div class="empty-state">${escapeHtml(item.error || "No snapshot available.")}</div>`;
+  const managers = [...new Set((snapshot.os.updates || []).map((update) => update.manager).filter(Boolean))].join(", ") || "none";
+  return `<div class="metrics-grid">
+    ${metric("OS updates", snapshot.os.updateCount, managers, statusForCount(snapshot.os.updateCount))}
+    ${metric("npm outdated", snapshot.npm.outdatedCount, `${snapshot.npm.packageCount} packages`, statusForCount(snapshot.npm.outdatedCount))}
+    ${metric("Last checked", formatAge(snapshot.checkedAt), snapshot.checkedAt)}
+    ${metric("Duration", formatDuration(snapshot.durationMs), `${snapshot.errors.length} warning(s)`, snapshot.errors.length ? "warn" : "ok")}
+  </div>
+  ${snapshot.errors.length ? `<div class="callout warn">${escapeHtml(snapshot.errors.map((error) => `${error.area || ""} ${error.manager || ""}: ${error.error || ""}`).join(" | "))}</div>` : ""}`;
+}
+
+function renderOsUpdates(item) {
+  const updates = item.snapshot?.os?.updates || [];
+  const rows = updates.map((update) => `<tr data-package-row data-package-text="${attr([update.manager, update.name, update.current, update.latest, update.source].join(" ").toLowerCase())}" data-outdated="true">
+    <td><input type="checkbox" data-os-update data-manager="${attr(update.manager || "")}" data-package="${attr(update.name || "")}" aria-label="Select ${attr(update.name || "OS update")}"></td>
+    <td>${escapeHtml(update.manager || "-")}</td>
+    <td><span class="truncate-cell" title="${attr(update.name)}">${escapeHtml(truncate(update.name, 80))}</span></td>
+    <td>${escapeHtml(update.current || "-")}</td>
+    <td>${escapeHtml(update.latest || "-")}</td>
+    <td><span class="truncate-cell" title="${attr(update.source)}">${escapeHtml(truncate(update.source, 120))}</span></td>
+  </tr>`);
+  return `<div class="row table-toolbar">
+    <button type="button" class="secondary mini-button" data-select-all-os>Select all</button>
+    <button type="button" class="secondary mini-button" data-update-os-selected>Update selected</button>
+    <button type="button" class="secondary mini-button" data-update-os-all>Update all</button>
+  </div>${table(["", "Manager", "Package", "Current", "Latest", "Source"], rows, "No OS updates found.")}`;
+}
+
+function renderNpmPackages(item) {
+  const packages = item.snapshot?.npm?.packages || [];
+  const rules = npmRuleMap(item);
+  const rows = packages.map((pkg) => {
+    const rule = rules.get(String(pkg.name || "")) || {};
+    return `<tr data-package-row data-package-text="${attr([pkg.name, pkg.current, pkg.wanted, pkg.latest, pkg.status, pkg.location].join(" ").toLowerCase())}" data-outdated="${pkg.status === "outdated" ? "true" : "false"}">
+    <td><input type="checkbox" data-npm-package data-package="${attr(pkg.name || "")}" data-outdated="${pkg.status === "outdated" ? "true" : "false"}" aria-label="Select ${attr(pkg.name || "npm package")}"></td>
+    <td><span class="truncate-cell" title="${attr(pkg.name)}">${escapeHtml(truncate(pkg.name, 90))}</span></td>
+    <td>${escapeHtml(pkg.current || "-")}</td>
+    <td>${escapeHtml(pkg.wanted || "-")}</td>
+    <td>${escapeHtml(pkg.latest || "-")}</td>
+    <td>${npmStatusBadge(pkg.status)}</td>
+    <td><span class="truncate-cell" title="${attr(pkg.location)}">${escapeHtml(truncate(pkg.location, 120))}</span></td>
+    <td><div class="data-table-actions"><button type="button" class="secondary mini-button" data-open-npm-auto="${attr(pkg.name || "")}" data-auto-enabled="${rule.enabled ? "true" : "false"}" data-auto-interval-value="${attr(Number(rule.intervalValue) || 24)}" data-auto-interval-unit="${attr(String(rule.intervalUnit || "hours"))}" data-auto-install-latest="${rule.installLatest ? "true" : "false"}" data-auto-last-status="${attr(autoRuleStatus(rule))}" data-auto-last-message="${attr(rule.lastMessage || "")}">Auto</button><button type="button" class="secondary mini-button" data-update-npm-package="${attr(pkg.name || "")}">Update</button><button type="button" class="danger mini-button" data-uninstall-npm="${attr(pkg.name || "")}">Delete</button></div></td>
+  </tr>`;
+  });
+  return `<div class="row table-toolbar">
+    <button type="button" class="secondary mini-button" data-select-all-npm>Select all</button>
+    <button type="button" class="secondary mini-button" data-update-npm-selected>Update selected</button>
+    <button type="button" class="secondary mini-button" data-update-npm-all>Update all outdated</button>
+  </div>${table(["", "Package", "Installed", "Wanted", "Latest", "Status", "Location", "Actions"], rows, "No global npm packages found.")}${renderNpmAutoModal()}`;
+}
+
+function npmStatusBadge(status) {
+  const text = String(status || "unknown");
+  if (text === "outdated") return badge("outdated", "failed");
+  if (text === "latest") return badge("latest", "enabled");
+  return badge(text, "disabled");
+}
+
+function npmRuleMap(item) {
+  const map = new Map();
+  for (const rule of item.automation?.rules || []) {
+    map.set(String(rule.name || ""), rule);
+  }
+  return map;
+}
+
+function autoRuleStatus(rule = {}) {
+  return rule.lastStatus ? `${rule.lastStatus}${rule.lastCheckedAt ? ` · ${formatAge(rule.lastCheckedAt)}` : ""}` : "not configured";
+}
+
+function renderNpmAutoModal() {
+  return `<div class="auto-updater-modal" data-npm-auto-modal hidden>
+    <div class="auto-updater-modal-backdrop" data-close-npm-auto></div>
+    <div class="panel auto-updater-modal-panel" role="dialog" aria-modal="true" aria-labelledby="autoUpdaterNpmAutoTitle">
+      <div class="section-header">
+        <div>
+          <h3 id="autoUpdaterNpmAutoTitle">Auto install</h3>
+          <small data-npm-auto-modal-package></small>
+        </div>
+        <button type="button" class="secondary mini-button" data-close-npm-auto>Close</button>
+      </div>
+      <div class="stack auto-updater-modal-body">
+        <label class="checkbox"><input type="checkbox" data-npm-auto-modal-enabled> <span>Enable automatic global install checks for this package</span></label>
+        <label class="mini-control"><span>Check interval</span><span class="npm-auto-interval"><input type="number" min="1" max="365" value="24" data-npm-auto-modal-interval aria-label="Auto install interval"><select data-npm-auto-modal-unit aria-label="Auto install interval unit"><option value="hours">hours</option><option value="days">days</option></select></span></label>
+        <label class="checkbox"><input type="checkbox" data-npm-auto-modal-latest> <span>Install even when already latest</span></label>
+        <div class="callout" data-npm-auto-modal-status></div>
+        <div class="row">
+          <button type="button" data-save-npm-auto-modal>Save</button>
+          <button type="button" class="secondary" data-close-npm-auto>Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>`;
+}
+
+function renderHistory(item) {
+  const rows = (item.history || []).map((row) => `<tr>
+    <td title="${attr(row.checkedAt)}">${escapeHtml(formatAge(row.checkedAt))}</td>
+    <td>${escapeHtml(row.osUpdateCount)}</td>
+    <td>${escapeHtml(row.npmOutdatedCount)}</td>
+    <td>${escapeHtml(row.npmPackageCount)}</td>
+    <td>${escapeHtml(formatDuration(row.durationMs))}</td>
+    <td>${row.errors?.length ? badge(row.errors.length, "warning") : badge("ok", "enabled")}</td>
+  </tr>`);
+  return `<div class="section-header auto-updater-history-header"><h3>History <small>${escapeHtml(HISTORY_RANGE)}</small></h3></div>${table(["Checked", "OS updates", "npm outdated", "npm packages", "Duration", "Status"], rows, "No history yet.")}`;
+}
+
+function renderDiagnostics(item) {
+  const snapshot = item.snapshot;
+  const rows = [
+    ["Storage snapshots", item.storage?.snapshots ?? "-"],
+    ["Storage integrity", item.storage?.integrity ?? "-"],
+    ["Storage size", item.storage?.sizeBytes ?? "-"],
+    ["OS supported", snapshot?.os?.supported ? "yes" : "no"],
+    ["npm supported", snapshot?.npm?.supported ? "yes" : "no"],
+    ["Errors", snapshot?.errors?.length ?? 0],
+  ].map(([key, value]) => `<tr><td>${escapeHtml(key)}</td><td>${escapeHtml(value)}</td></tr>`);
+  return table(["Metric", "Value"], rows);
+}
+
+function updateRisk(item) {
+  const snapshot = item.snapshot;
+  if (!snapshot) return -1;
+  return Number(snapshot.os?.updateCount || 0) + Number(snapshot.npm?.outdatedCount || 0);
+}
+
+export function dashboardPanelScript() {
+  return `
+const root = api.root.querySelector('[data-auto-updater-panel]') || api.root;
+function state(extra = {}) {
+  return {
+    selectedNodeKey: root.dataset.selectedNodeKey || '',
+    selectedTab: root.dataset.selectedTab || 'overview',
+    ...extra,
+  };
+}
+function reload(extra = {}) {
+  api.reload(state(extra));
+}
+function actionTargetPeerId() {
+  return root.dataset.selectedNodeKey || 'local';
+}
+function selectedOsUpdates(all = false) {
+  return Array.from(root.querySelectorAll('[data-os-update]'))
+    .filter((input) => all || input.checked)
+    .map((input) => ({ manager: input.dataset.manager || '', name: input.dataset.package || '' }))
+    .filter((item) => item.manager && item.name);
+}
+function selectedNpmPackages(all = false, outdatedOnly = false) {
+  return Array.from(root.querySelectorAll('[data-npm-package]'))
+    .filter((input) => (all || input.checked) && (!outdatedOnly || input.dataset.outdated === 'true'))
+    .map((input) => input.dataset.package || '')
+    .filter(Boolean);
+}
+function setActionBusy(busy) {
+  root.querySelectorAll('[data-update-os-selected],[data-update-os-all],[data-update-npm-selected],[data-update-npm-all],[data-update-npm-package],[data-uninstall-npm],[data-save-npm-auto-modal]').forEach((button) => {
+    button.disabled = busy;
+  });
+}
+function showActionResult(result, label) {
+  const target = root.querySelector('[data-action-result]');
+  if (!target) return;
+  const action = result && result.output && result.output.action ? result.output.action : result && result.action ? result.action : null;
+  const ok = action ? action.ok !== false : result && result.ok !== false;
+  const failed = action && Array.isArray(action.results) ? action.results.filter((item) => item && item.ok === false).length : 0;
+  const completedAt = action && action.completedAt ? action.completedAt : new Date().toISOString();
+  target.hidden = false;
+  target.classList.toggle('warn', !ok);
+  target.textContent = label + (ok ? ' completed' : ' failed') + (failed ? ' (' + failed + ' failed command' + (failed === 1 ? '' : 's') + ')' : '') + ' at ' + completedAt;
+}
+async function runPackageAction(command, input, label) {
+  if (!api.invokeCommand) {
+    api.toast('This NordRelay build cannot run plugin commands from panels.', { duration: 6000 });
+    return;
+  }
+  setActionBusy(true);
+  try {
+    const result = await api.invokeCommand(command, input, { peerId: actionTargetPeerId(), timeoutMs: 600000 });
+    showActionResult(result, label);
+    api.toast(label + ' started/completed', { duration: 5000 });
+    reload({ force: true });
+  } catch (error) {
+    const message = error && error.message ? error.message : String(error || 'Action failed');
+    const target = root.querySelector('[data-action-result]');
+    if (target) {
+      target.hidden = false;
+      target.classList.add('warn');
+      target.textContent = label + ' failed: ' + message;
+    }
+    api.toast(message, { duration: 8000 });
+  } finally {
+    setActionBusy(false);
+  }
+}
+function applyPackageFilter() {
+  const query = String(root.querySelector('[data-package-filter]')?.value || '').trim().toLowerCase();
+  const outdatedOnly = Boolean(root.querySelector('[data-outdated-only]')?.checked);
+  root.querySelectorAll('[data-package-row]').forEach((row) => {
+    const matchesQuery = !query || String(row.dataset.packageText || '').includes(query);
+    const matchesStatus = !outdatedOnly || row.dataset.outdated === 'true';
+    row.hidden = !(matchesQuery && matchesStatus);
+  });
+}
+root.querySelectorAll('[data-auto-updater-node]').forEach((button) => button.addEventListener('click', () => reload({ selectedNodeKey: button.dataset.autoUpdaterNode || '' })));
+root.querySelectorAll('[data-auto-updater-tab]').forEach((button) => button.addEventListener('click', () => reload({ selectedTab: button.dataset.autoUpdaterTab || 'overview' })));
+root.querySelector('[data-refresh-updates]')?.addEventListener('click', () => reload({ force: true }));
+root.querySelector('[data-package-filter]')?.addEventListener('input', applyPackageFilter);
+root.querySelector('[data-outdated-only]')?.addEventListener('change', applyPackageFilter);
+root.querySelector('[data-select-all-os]')?.addEventListener('click', () => {
+  const choices = Array.from(root.querySelectorAll('[data-os-update]'));
+  const checked = choices.some((input) => !input.checked);
+  choices.forEach((input) => { input.checked = checked; });
+});
+root.querySelector('[data-select-all-npm]')?.addEventListener('click', () => {
+  const choices = Array.from(root.querySelectorAll('[data-npm-package]'));
+  const checked = choices.some((input) => !input.checked);
+  choices.forEach((input) => { input.checked = checked; });
+});
+root.querySelector('[data-update-os-selected]')?.addEventListener('click', () => {
+  const packages = selectedOsUpdates(false);
+  if (!packages.length) {
+    api.toast('Select at least one OS update.', { duration: 5000 });
+    return;
+  }
+  if (confirm('Update ' + packages.length + ' selected OS package' + (packages.length === 1 ? '' : 's') + '?')) {
+    runPackageAction('update-os', { packages }, 'OS update');
+  }
+});
+root.querySelector('[data-update-os-all]')?.addEventListener('click', () => {
+  const packages = selectedOsUpdates(true);
+  if (!packages.length) {
+    api.toast('No OS updates are available.', { duration: 5000 });
+    return;
+  }
+  if (confirm('Update all ' + packages.length + ' listed OS package' + (packages.length === 1 ? '' : 's') + '?')) {
+    runPackageAction('update-os', { packages }, 'OS update');
+  }
+});
+root.querySelector('[data-update-npm-selected]')?.addEventListener('click', () => {
+  const packages = selectedNpmPackages(false);
+  if (!packages.length) {
+    api.toast('Select at least one npm package.', { duration: 5000 });
+    return;
+  }
+  if (confirm('Update ' + packages.length + ' selected npm package' + (packages.length === 1 ? '' : 's') + '?')) {
+    runPackageAction('update-npm', { packages }, 'npm update');
+  }
+});
+root.querySelector('[data-update-npm-all]')?.addEventListener('click', () => {
+  const packages = selectedNpmPackages(true, true);
+  if (!packages.length) {
+    api.toast('No outdated npm packages are available.', { duration: 5000 });
+    return;
+  }
+  if (confirm('Update all ' + packages.length + ' outdated npm package' + (packages.length === 1 ? '' : 's') + '?')) {
+    runPackageAction('update-npm', { packages }, 'npm update');
+  }
+});
+root.querySelectorAll('[data-update-npm-package]').forEach((button) => button.addEventListener('click', () => {
+  const name = button.dataset.updateNpmPackage || '';
+  if (!name) return;
+  if (confirm('Update global npm package "' + name + '"?')) {
+    runPackageAction('update-npm', { packages: [name] }, 'npm update');
+  }
+}));
+function closeNpmAutoModal() {
+  const modal = root.querySelector('[data-npm-auto-modal]');
+  if (modal) modal.hidden = true;
+}
+root.querySelectorAll('[data-close-npm-auto]').forEach((button) => button.addEventListener('click', closeNpmAutoModal));
+root.querySelectorAll('[data-open-npm-auto]').forEach((button) => button.addEventListener('click', () => {
+  const modal = root.querySelector('[data-npm-auto-modal]');
+  if (!modal) return;
+  const name = button.dataset.openNpmAuto || '';
+  modal.dataset.package = name;
+  modal.querySelector('[data-npm-auto-modal-package]').textContent = name;
+  modal.querySelector('[data-npm-auto-modal-enabled]').checked = button.dataset.autoEnabled === 'true';
+  modal.querySelector('[data-npm-auto-modal-interval]').value = button.dataset.autoIntervalValue || '24';
+  modal.querySelector('[data-npm-auto-modal-unit]').value = button.dataset.autoIntervalUnit || 'hours';
+  modal.querySelector('[data-npm-auto-modal-latest]').checked = button.dataset.autoInstallLatest === 'true';
+  const status = button.dataset.autoLastStatus || 'not configured';
+  const message = button.dataset.autoLastMessage || status;
+  const statusEl = modal.querySelector('[data-npm-auto-modal-status]');
+  statusEl.textContent = 'Status: ' + status;
+  statusEl.title = message;
+  modal.hidden = false;
+}));
+root.querySelector('[data-save-npm-auto-modal]')?.addEventListener('click', () => {
+  const modal = root.querySelector('[data-npm-auto-modal]');
+  const name = modal?.dataset.package || '';
+  if (!name) return;
+  const enabled = Boolean(modal.querySelector('[data-npm-auto-modal-enabled]')?.checked);
+  const intervalValue = Math.max(1, Number(modal.querySelector('[data-npm-auto-modal-interval]')?.value) || 24);
+  const intervalUnit = modal.querySelector('[data-npm-auto-modal-unit]')?.value || 'hours';
+  const installLatest = Boolean(modal.querySelector('[data-npm-auto-modal-latest]')?.checked);
+  runPackageAction('configure-npm-auto', { package: name, enabled, intervalValue, intervalUnit, installLatest }, 'npm auto install settings');
+});
+root.querySelectorAll('[data-uninstall-npm]').forEach((button) => button.addEventListener('click', () => {
+  const name = button.dataset.uninstallNpm || '';
+  if (!name) return;
+  if (confirm('Uninstall global npm package "' + name + '"?')) {
+    runPackageAction('uninstall-npm', { packages: [name] }, 'npm uninstall');
+  }
+}));
+`;
+}
+
+export function dashboardPanelStyles() {
+  return `
+[data-auto-updater-panel] .section-tabs{margin-bottom:10px}
+[data-auto-updater-panel] .plugin-tab-content{gap:10px}
+[data-auto-updater-panel] .table-toolbar{margin-bottom:0}
+[data-auto-updater-panel] .table-toolbar+.data-table-wrap{margin-top:2px}
+[data-auto-updater-panel] .auto-updater-history-header{margin-bottom:0}
+[data-auto-updater-panel] .auto-updater-history-header+.data-table-wrap{margin-top:2px}
+[data-auto-updater-panel] .auto-updater-history-header h3{margin-bottom:0}
+[data-auto-updater-panel] .data-table-actions{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
+[data-auto-updater-panel] .auto-updater-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px}
+[data-auto-updater-panel] .auto-updater-modal[hidden]{display:none}
+[data-auto-updater-panel] .auto-updater-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.42)}
+[data-auto-updater-panel] .auto-updater-modal-panel{position:relative;z-index:1;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto}
+[data-auto-updater-panel] .auto-updater-modal-body{gap:12px}
+[data-auto-updater-panel] .npm-auto-interval{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
+[data-auto-updater-panel] .npm-auto-interval input{width:58px}
+[data-auto-updater-panel] .npm-auto-interval select{width:auto;min-width:84px}
+`;
+}