npm - @julioventura/opensquad - Versions diffs - 0.1.17 - Mend

@julioventura/opensquad 0.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (247) hide show

package/skills/run-dashboard/templates/run-dashboard.template.html ADDED Viewed

@@ -0,0 +1,1164 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>DASHBOARD-RUN</title>
+  <style>
+    :root {
+      --bg: #08111f;
+      --panel: rgba(11, 24, 42, 0.82);
+      --panel-border: rgba(0, 221, 255, 0.18);
+      --accent: #15f5ba;
+      --accent-2: #00c2ff;
+      --warn: #ffb84d;
+      --danger: #ff5f87;
+      --text: #eef7ff;
+      --muted: #9ab3c9;
+      --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
+      --radius: 24px;
+      --radius-sm: 16px;
+      --grid-gap: 18px;
+      font-family: "Segoe UI", Arial, sans-serif;
+    }
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      margin: 0;
+      min-height: 100vh;
+      color: var(--text);
+      background:
+        radial-gradient(circle at top left, rgba(0, 194, 255, 0.22), transparent 32%),
+        radial-gradient(circle at top right, rgba(21, 245, 186, 0.12), transparent 28%),
+        linear-gradient(180deg, #07111d 0%, #040812 100%);
+    }
+    .shell {
+      width: min(1440px, calc(100vw - 32px));
+      margin: 20px auto 36px;
+    }
+    .hero,
+    .panel {
+      backdrop-filter: blur(16px);
+      background: var(--panel);
+      border: 1px solid var(--panel-border);
+      border-radius: var(--radius);
+      box-shadow: var(--shadow);
+    }
+    .hero {
+      padding: 24px;
+      overflow: hidden;
+      position: relative;
+    }
+    .hero::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(90deg, rgba(21, 245, 186, 0.08), transparent 28%, rgba(0, 194, 255, 0.08));
+      pointer-events: none;
+    }
+    .hero-top {
+      display: flex;
+      gap: 18px;
+      justify-content: space-between;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      position: relative;
+      z-index: 1;
+    }
+    .eyebrow {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border-radius: 999px;
+      background: rgba(0, 194, 255, 0.14);
+      color: var(--accent-2);
+      font-size: 13px;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      font-weight: 700;
+    }
+    h1 {
+      margin: 14px 0 10px;
+      font-size: clamp(32px, 4vw, 58px);
+      line-height: 0.98;
+      letter-spacing: -0.04em;
+    }
+    .subtitle {
+      margin: 0;
+      max-width: 860px;
+      color: var(--muted);
+      font-size: 16px;
+      line-height: 1.5;
+    }
+    .hero-badges {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-top: 16px;
+      position: relative;
+      z-index: 1;
+    }
+    .hero-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border-radius: 999px;
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      background: rgba(255, 184, 77, 0.14);
+      color: var(--warn);
+      border: 1px solid rgba(255, 184, 77, 0.18);
+    }
+    .hero-meta {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(140px, 1fr));
+      gap: 14px;
+      margin-top: 22px;
+      position: relative;
+      z-index: 1;
+    }
+    .meta-card {
+      padding: 14px 16px;
+      border-radius: 18px;
+      background: rgba(5, 14, 26, 0.56);
+      border: 1px solid rgba(255, 255, 255, 0.05);
+    }
+    .meta-card .label,
+    .panel .label {
+      color: var(--muted);
+      font-size: 12px;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .meta-card .value {
+      margin-top: 8px;
+      font-size: 20px;
+      font-weight: 700;
+    }
+    .controls {
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+    }
+    button,
+    .action-link {
+      appearance: none;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      background: linear-gradient(180deg, rgba(0, 194, 255, 0.16), rgba(0, 194, 255, 0.05));
+      color: var(--text);
+      border-radius: 999px;
+      padding: 11px 16px;
+      font-size: 14px;
+      font-weight: 700;
+      cursor: pointer;
+      text-decoration: none;
+      transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
+    }
+    button:hover,
+    .action-link:hover {
+      transform: translateY(-1px);
+      border-color: rgba(21, 245, 186, 0.3);
+      background: linear-gradient(180deg, rgba(21, 245, 186, 0.18), rgba(0, 194, 255, 0.08));
+    }
+    .dashboard-grid {
+      display: grid;
+      grid-template-columns: 1.3fr 0.95fr;
+      gap: var(--grid-gap);
+      margin-top: 18px;
+    }
+    .column {
+      display: grid;
+      gap: var(--grid-gap);
+    }
+    .panel {
+      padding: 18px;
+    }
+    .panel h2 {
+      margin: 0 0 14px;
+      font-size: 18px;
+      letter-spacing: -0.02em;
+    }
+    .status-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border-radius: 999px;
+      font-size: 13px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+    }
+    .status-chip.published,
+    .status-chip.completed,
+    .status-chip.approved {
+      background: rgba(21, 245, 186, 0.14);
+      color: var(--accent);
+    }
+    .status-chip.partial,
+    .status-chip.warning {
+      background: rgba(255, 184, 77, 0.14);
+      color: var(--warn);
+    }
+    .status-chip.failed,
+    .status-chip.blocked,
+    .status-chip.error {
+      background: rgba(255, 95, 135, 0.14);
+      color: var(--danger);
+    }
+    .checklist {
+      display: grid;
+      gap: 12px;
+    }
+    .checklist-item,
+    .channel-card,
+    .metric-card,
+    .artifact-card,
+    .error-item {
+      border-radius: var(--radius-sm);
+      padding: 14px 16px;
+      background: rgba(5, 14, 26, 0.55);
+      border: 1px solid rgba(255, 255, 255, 0.05);
+    }
+    .checklist-item {
+      display: grid;
+      grid-template-columns: 26px 1fr auto;
+      gap: 12px;
+      align-items: start;
+    }
+    .marker {
+      width: 26px;
+      height: 26px;
+      border-radius: 999px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 13px;
+      font-weight: 800;
+      background: rgba(255, 255, 255, 0.08);
+      color: var(--text);
+    }
+    .marker.ok {
+      background: rgba(21, 245, 186, 0.18);
+      color: var(--accent);
+    }
+    .marker.warn {
+      background: rgba(255, 184, 77, 0.18);
+      color: var(--warn);
+    }
+    .marker.err {
+      background: rgba(255, 95, 135, 0.18);
+      color: var(--danger);
+    }
+    .item-title,
+    .channel-title,
+    .metric-title {
+      font-size: 15px;
+      font-weight: 700;
+    }
+    .item-desc,
+    .channel-meta,
+    .metric-meta,
+    .artifact-meta,
+    .error-meta,
+    .empty-state {
+      margin-top: 6px;
+      color: var(--muted);
+      font-size: 13px;
+      line-height: 1.45;
+    }
+    .channels,
+    .previews,
+    .metrics,
+    .artifacts,
+    .errors {
+      display: grid;
+      gap: 12px;
+    }
+    .preview-grid {
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+      gap: 12px;
+    }
+    @media (max-width: 1024px) {
+      .preview-grid {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+    @media (max-width: 640px) {
+      .preview-grid {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+    .preview-card {
+      border-radius: var(--radius-sm);
+      overflow: hidden;
+      background: rgba(5, 14, 26, 0.55);
+      border: 1px solid rgba(255, 255, 255, 0.05);
+    }
+    .preview-media {
+      aspect-ratio: 16 / 9;
+      background: linear-gradient(180deg, rgba(0, 194, 255, 0.14), rgba(5, 14, 26, 0.9));
+      overflow: hidden;
+    }
+    .preview-media img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+    .preview-body {
+      padding: 14px 16px;
+    }
+    .preview-title {
+      font-size: 15px;
+      font-weight: 700;
+    }
+    .preview-headline {
+      margin-top: 8px;
+      font-size: 18px;
+      line-height: 1.2;
+      letter-spacing: -0.02em;
+      font-weight: 800;
+      color: var(--text);
+    }
+    .preview-meta {
+      margin-top: 6px;
+      color: var(--muted);
+      font-size: 13px;
+      line-height: 1.45;
+    }
+    .preview-cta {
+      margin-top: 10px;
+      padding-top: 10px;
+      border-top: 1px solid rgba(255, 255, 255, 0.06);
+      color: var(--accent);
+      font-size: 12px;
+      line-height: 1.45;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      font-weight: 700;
+    }
+    .channel-header,
+    .metric-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+    }
+    .channel-actions,
+    .artifact-actions {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      margin-top: 12px;
+    }
+    .metric-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 12px;
+    }
+    .metric-value {
+      margin-top: 8px;
+      font-size: 28px;
+      font-weight: 800;
+      letter-spacing: -0.04em;
+    }
+    .metric-unit {
+      color: var(--muted);
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+    .footer-note {
+      margin-top: 18px;
+      color: var(--muted);
+      font-size: 12px;
+      line-height: 1.6;
+    }
+    /* Collapsible Panels */
+    .panel.collapsible .collapsible-trigger {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+      user-select: none;
+      margin: 0;
+    }
+    .panel.collapsible .collapsible-trigger::after {
+      content: "";
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-right: 2px solid var(--muted);
+      border-bottom: 2px solid var(--muted);
+      transform: rotate(45deg);
+      transition: transform 0.2s ease, border-color 0.2s ease;
+      margin-right: 4px;
+    }
+    .panel.collapsible .collapsible-trigger:hover::after {
+      border-color: var(--accent);
+    }
+    .panel.collapsible.collapsed .collapsible-trigger::after {
+      transform: rotate(-45deg);
+    }
+    .panel.collapsible.collapsed h2 {
+      margin-bottom: 0;
+    }
+    .panel.collapsible.collapsed .collapsible-content {
+      display: none;
+    }
+    /* Slide Preview Styling */
+    .preview-card.slide-preview {
+      border: 1px solid #1e40af;
+      border-radius: var(--radius-sm);
+      overflow: hidden;
+      background: rgba(5, 14, 26, 0.55);
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      transition: transform 0.2s ease, border-color 0.2s ease;
+    }
+    .preview-card.slide-preview:hover {
+      transform: translateY(-2px);
+      border-color: var(--accent-2);
+    }
+    .preview-card.slide-preview .preview-media {
+      aspect-ratio: auto;
+      height: auto;
+      background: transparent;
+    }
+    .preview-card.slide-preview .preview-media img {
+      width: 100%;
+      height: auto;
+      object-fit: contain;
+      display: block;
+    }
+    .slide-preview-body {
+      padding: 10px 14px;
+      text-align: center;
+      background: rgba(4, 8, 18, 0.5);
+      /* 50% transparency dark background */
+      border-top: 1px solid rgba(30, 64, 175, 0.2);
+    }
+    .preview-label {
+      font-size: 15px;
+      font-weight: 700;
+      color: #1e40af;
+    }
+    .preview-card.slide-preview-placeholder {
+      border: 1px dashed rgba(30, 64, 175, 0.45);
+      border-radius: var(--radius-sm);
+      overflow: hidden;
+      background: rgba(5, 14, 26, 0.2);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      aspect-ratio: 16 / 9;
+      pointer-events: none;
+    }
+    /* Modal Premium Styling */
+    .modal {
+      display: none;
+      position: fixed;
+      z-index: 1000;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      background-color: rgba(4, 8, 18, 0.92);
+      backdrop-filter: blur(12px);
+      align-items: center;
+      justify-content: center;
+    }
+    .modal-content {
+      position: relative;
+      width: 80%;
+      max-width: 1200px;
+      height: 80vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    .modal-content img {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      border-radius: var(--radius-sm);
+      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+      border: 1px solid #1e40af;
+    }
+    .modal-label {
+      margin-top: 15px;
+      color: #1e40af;
+      font-size: 18px;
+      font-weight: 700;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+    }
+    .modal-close {
+      position: absolute;
+      top: 24px;
+      right: 32px;
+      color: var(--muted);
+      font-size: 38px;
+      font-weight: bold;
+      cursor: pointer;
+      transition: color 0.2s;
+      z-index: 1010;
+    }
+    .modal-close:hover {
+      color: var(--danger);
+    }
+    .modal-prev,
+    .modal-next {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      background: rgba(11, 24, 42, 0.7);
+      border: 1px solid var(--panel-border);
+      color: var(--text);
+      font-size: 28px;
+      padding: 16px 20px;
+      cursor: pointer;
+      border-radius: 50%;
+      user-select: none;
+      transition: background 0.2s, border-color 0.2s, transform 0.2s;
+      z-index: 1010;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 60px;
+      height: 60px;
+    }
+    .modal-prev:hover,
+    .modal-next:hover {
+      background: var(--accent-2);
+      color: #040812;
+      border-color: var(--accent-2);
+    }
+    .modal-prev {
+      left: 40px;
+    }
+    .modal-next {
+      right: 40px;
+    }
+    @media (max-width: 768px) {
+      .modal-content {
+        width: 95%;
+      }
+      .modal-prev {
+        left: 10px;
+      }
+      .modal-next {
+        right: 10px;
+      }
+      .modal-prev,
+      .modal-next {
+        width: 48px;
+        height: 48px;
+        font-size: 20px;
+      }
+    }
+    /* Hero Preview Section (Inside Hero container) */
+    .hero-preview {
+      margin-top: 28px;
+      padding-top: 24px;
+      border-top: 1px solid var(--panel-border);
+      position: relative;
+      z-index: 1;
+    }
+    .hero-preview h2 {
+      margin: 0 0 14px;
+      font-size: 18px;
+      letter-spacing: -0.02em;
+    }
+    @media (max-width: 1120px) {
+      .dashboard-grid {
+        grid-template-columns: 1fr;
+      }
+      .hero-meta {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
+    @media (max-width: 720px) {
+      .shell {
+        width: min(100vw - 18px, 100%);
+        margin: 10px auto 24px;
+      }
+      .hero,
+      .panel {
+        border-radius: 20px;
+        padding: 16px;
+      }
+      .hero-meta,
+      .metric-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+    @media (max-width: 500px) {
+      .preview-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="shell">
+    <section class="hero">
+      <div class="hero-meta">
+        <div class="meta-card">
+          <div class="label">Squad</div>
+          <div class="value" id="meta-squad">-</div>
+        </div>
+        <div class="meta-card">
+          <div class="label">Run ID</div>
+          <div class="value" id="meta-run-id">-</div>
+        </div>
+        <div class="meta-card">
+          <div class="label">Status</div>
+          <div class="value"><span class="status-chip" id="meta-status">Unknown</span></div>
+        </div>
+        <div class="meta-card">
+          <div class="label">Última atualização</div>
+          <div class="value" id="meta-updated-at">-</div>
+        </div>
+      </div>
+      <div class="hero-top">
+        <div>
+          <div class="eyebrow">DASHBOARD-RUN</div>
+          <h1 id="hero-title">DASHBOARD-RUN</h1>
+          <p class="subtitle" id="hero-subtitle">Resumo operacional, publicações, checklist, artefatos e sinais de
+            execução.</p>
+          <div class="hero-badges" id="hero-badges"></div>
+        </div>
+        <div class="controls">
+          <button id="refresh-button" type="button">Refresh Data</button>
+          <button id="reload-button" type="button">Reload Page</button>
+        </div>
+      </div>
+      <!-- Preview Visual inside DASHBOARD-RUN hero section -->
+      <div class="hero-preview">
+        <h2>Preview Visual</h2>
+        <div class="previews" id="previews"></div>
+      </div>
+    </section>
+    <div class="dashboard-grid">
+      <div class="column">
+        <section class="panel">
+          <h2>Postagens e Destinos</h2>
+          <div class="channels" id="channels"></div>
+        </section>
+        <section class="panel collapsible collapsed">
+          <h2 class="collapsible-trigger">Artefatos</h2>
+          <div class="collapsible-content">
+            <div class="artifacts" id="artifacts"></div>
+          </div>
+        </section>
+      </div>
+      <div class="column">
+        <section class="panel collapsible collapsed">
+          <h2 class="collapsible-trigger">Sinais e Métricas</h2>
+          <div class="collapsible-content">
+            <div class="metrics" id="metrics"></div>
+            <div class="footer-note" id="metrics-note"></div>
+          </div>
+        </section>
+        <section class="panel collapsible collapsed">
+          <h2 class="collapsible-trigger">Checklist do Run</h2>
+          <div class="collapsible-content">
+            <div class="checklist" id="checklist"></div>
+          </div>
+        </section>
+        <section class="panel collapsible collapsed" id="panel-errors">
+          <h2 class="collapsible-trigger">Erros e Problemas</h2>
+          <div class="collapsible-content">
+            <div class="errors" id="errors"></div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+  <!-- Slide Zoom Modal -->
+  <div id="slide-modal" class="modal">
+    <span class="modal-close">&times;</span>
+    <div class="modal-content">
+      <img id="modal-img" src="" alt="Slide">
+      <div id="modal-label" class="modal-label"></div>
+    </div>
+    <button class="modal-prev" id="modal-prev-btn" type="button">&#10094;</button>
+    <button class="modal-next" id="modal-next-btn" type="button">&#10095;</button>
+  </div>
+  <script id="run-dashboard-bootstrap" type="application/json">__RUN_DASHBOARD_BOOTSTRAP__</script>
+  <script>
+    const dashboardDataPath = '__RUN_DASHBOARD_JSON_PATH__';
+    let currentModalSlides = [];
+    let currentModalIndex = 0;
+    function isFileMode() {
+      return window.location.protocol === 'file:';
+    }
+    function readEmbeddedData() {
+      const node = document.getElementById('run-dashboard-bootstrap');
+      try { return JSON.parse(node.textContent); } catch { return null; }
+    }
+    function escapeHtml(value) {
+      return String(value ?? '')
+        .replaceAll('&', '&amp;')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;')
+        .replaceAll("'", '&#39;');
+    }
+    function formatDate(dateStr) {
+      if (!dateStr || dateStr === '-') return '-';
+      try {
+        const d = new Date(dateStr);
+        if (isNaN(d.getTime())) return dateStr;
+        const pad = (num) => String(num).padStart(2, '0');
+        const day = pad(d.getDate());
+        const month = pad(d.getMonth() + 1);
+        const year = d.getFullYear();
+        const hours = pad(d.getHours());
+        const minutes = pad(d.getMinutes());
+        return `${day}/${month}/${year} ${hours}:${minutes}`;
+      } catch {
+        return dateStr;
+      }
+    }
+    function statusClass(status) {
+      const normalized = String(status || 'unknown').toLowerCase();
+      if (['published', 'completed', 'approved', 'success'].includes(normalized)) return 'published';
+      if (['partial', 'warning'].includes(normalized)) return 'partial';
+      if (['failed', 'blocked', 'error'].includes(normalized)) return 'failed';
+      return 'warning';
+    }
+    function markerClass(status) {
+      const normalized = String(status || '').toLowerCase();
+      if (['ok', 'done', 'success', 'approved', 'published', 'yes'].includes(normalized)) return 'ok';
+      if (['warn', 'warning', 'partial', 'pending'].includes(normalized)) return 'warn';
+      return 'err';
+    }
+    function renderList(containerId, items, renderer, emptyLabel) {
+      const container = document.getElementById(containerId);
+      if (!items || items.length === 0) {
+        container.innerHTML = `<div class="empty-state">${escapeHtml(emptyLabel)}</div>`;
+        return;
+      }
+      container.innerHTML = items.map(renderer).join('');
+    }
+    function render(data) {
+      document.title = `${data.squad || 'DASHBOARD-RUN'} — ${data.runId || 'DASHBOARD-RUN'}`;
+      document.getElementById('hero-title').textContent = data.title || 'DASHBOARD-RUN';
+      document.getElementById('hero-subtitle').textContent = data.subtitle || 'Resumo operacional da execução';
+      document.getElementById('meta-squad').textContent = data.squad || '-';
+      document.getElementById('meta-run-id').textContent = data.runId || '-';
+      document.getElementById('meta-updated-at').textContent = formatDate(data.lastRefreshedAt || data.updatedAt || '-');
+      renderHeroBadges(data);
+      const statusNode = document.getElementById('meta-status');
+      statusNode.textContent = data.status || 'unknown';
+      statusNode.className = `status-chip ${statusClass(data.status)}`;
+      renderList('checklist', data.checklist, (item) => `
+        <div class="checklist-item">
+          <div class="marker ${markerClass(item.status)}">${escapeHtml(item.icon || '•')}</div>
+          <div>
+            <div class="item-title">${escapeHtml(item.title)}</div>
+            <div class="item-desc">${escapeHtml(item.description || '')}</div>
+          </div>
+          <div><span class="status-chip ${statusClass(item.badge || item.status)}">${escapeHtml(item.badgeLabel || item.status || 'n/a')}</span></div>
+        </div>`, 'Nenhum item de checklist disponível.');
+      renderList('channels', data.channels, (channel) => `
+        <div class="channel-card">
+          <div class="channel-header">
+            <div>
+              <div class="channel-title">${escapeHtml(channel.name)}</div>
+              <div class="channel-meta">${escapeHtml(channel.summary || '')}</div>
+            </div>
+            <span class="status-chip ${statusClass(channel.status)}">${escapeHtml(channel.status || 'unknown')}</span>
+          </div>
+          <div class="channel-actions">
+            ${(channel.links || []).map((link) => `<a class="action-link" href="${escapeHtml(link.href)}" target="_blank" rel="noreferrer">${escapeHtml(link.label)}</a>`).join('')}
+          </div>
+        </div>`, 'Nenhuma publicação registrada para esta run.');
+      renderList('artifacts', data.artifacts, (artifact) => `
+        <div class="artifact-card">
+          <div class="channel-title">${escapeHtml(artifact.label)}</div>
+          <div class="artifact-meta">${escapeHtml(artifact.path || '')}</div>
+          <div class="artifact-actions">
+            ${artifact.href ? `<a class="action-link" href="${escapeHtml(artifact.href)}" target="_blank" rel="noreferrer">Open</a>` : ''}
+          </div>
+        </div>`, 'Nenhum artefato registrado.');
+      const slidePreviews = (data.previews || []).filter((p) => p.type === 'slide');
+      currentModalSlides = slidePreviews;
+      const showLabels = slidePreviews.length >= 11;
+      renderList('previews', slidePreviews.length > 0 ? [{ items: slidePreviews }] : [], (group) => {
+        let cardsHtml = group.items.map((preview, idx) => `
+          <div class="preview-card slide-preview" data-index="${idx}" style="cursor: pointer;">
+            <div class="preview-media">
+              ${preview.src ? `<img src="${escapeHtml(preview.src)}" alt="${escapeHtml(preview.label)}">` : ''}
+            </div>
+            ${showLabels ? `
+              <div class="preview-body slide-preview-body">
+                <div class="preview-label">${escapeHtml(preview.label)}</div>
+              </div>
+            ` : ''}
+          </div>`).join('');
+        if (group.items.length < 6) {
+          const placeholdersCount = 6 - group.items.length;
+          for (let i = 0; i < placeholdersCount; i++) {
+            cardsHtml += `
+              <div class="preview-card slide-preview-placeholder">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" style="opacity: 0.15;">
+                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                  <line x1="9" y1="17" x2="15" y2="17"></line>
+                  <line x1="12" y1="17" x2="12" y2="21"></line>
+                </svg>
+              </div>`;
+          }
+        }
+        return `
+          <div class="preview-grid">
+            ${cardsHtml}
+          </div>`;
+      }, 'Nenhum preview visual disponível.');
+      renderList('metrics', data.metrics, (group) => `
+        <div class="metric-card">
+          <div class="metric-header">
+            <div>
+              <div class="metric-title">${escapeHtml(group.label)}</div>
+              <div class="metric-meta">${escapeHtml(group.description || '')}</div>
+            </div>
+            <span class="status-chip ${statusClass(group.status)}">${escapeHtml(group.status || 'snapshot')}</span>
+          </div>
+          <div class="metric-grid">
+            ${(group.values || []).map((entry) => `
+              <div class="metric-card">
+                <div class="label">${escapeHtml(entry.label)}</div>
+                <div class="metric-value">${escapeHtml(entry.value ?? 'N/A')}</div>
+                <div class="metric-unit">${escapeHtml(entry.unit || 'snapshot')}</div>
+              </div>`).join('')}
+          </div>
+        </div>`, 'Nenhuma métrica disponível.');
+      renderList('errors', data.errors, (entry) => `
+        <div class="error-item">
+          <div class="channel-header">
+            <div class="channel-title">${escapeHtml(entry.title || 'Ocorrência')}</div>
+            <span class="status-chip ${statusClass(entry.status || 'warning')}">${escapeHtml(entry.status || 'warning')}</span>
+          </div>
+          <div class="error-meta">${escapeHtml(entry.message || '')}</div>
+        </div>`, 'Nenhum erro relevante registrado nesta run.');
+      // Toggle collapsed state for Erros e Problemas dynamically based on data availability
+      const errorsPanel = document.getElementById('panel-errors');
+      if (errorsPanel) {
+        if (data.errors && data.errors.length > 0) {
+          errorsPanel.classList.remove('collapsed');
+        } else {
+          errorsPanel.classList.add('collapsed');
+        }
+      }
+      const fileModeNote = isFileMode()
+        ? ' Modo arquivo local ativo: este DASHBOARD 2 usa o snapshot embutido e links relativos, sem depender de servidor para abrir.'
+        : '';
+      document.getElementById('metrics-note').textContent = `${data.metricsNote || ''}${fileModeNote}`.trim();
+    }
+    function renderHeroBadges(data) {
+      const badges = [];
+      if (data.runContext?.isLegacyOutputRoot) badges.push('Legacy Snapshot');
+      if (data.metrics && data.metrics.length > 0) badges.push('Live Metrics Snapshot');
+      // if (!data.metrics || data.metrics.length === 0) badges.push('Offline Metrics');
+      if (isFileMode()) badges.push('File Mode');
+      const container = document.getElementById('hero-badges');
+      container.innerHTML = badges.map((badge) => `<div class="hero-badge">${escapeHtml(badge)}</div>`).join('');
+    }
+    async function refreshData() {
+      if (isRefreshBusy()) return;
+      setRefreshBusy(true);
+      if (isFileMode()) {
+        render(readEmbeddedData() || {});
+        setRefreshBusy(false);
+        return;
+      }
+      if (!dashboardDataPath || dashboardDataPath === '__RUN_DASHBOARD_JSON_PATH__') {
+        render(readEmbeddedData() || {});
+        setRefreshBusy(false);
+        return;
+      }
+      try {
+        const liveResponse = await fetch('__run_dashboard_refresh__', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+        });
+        if (liveResponse.ok) {
+          const payload = await liveResponse.json();
+          render(payload);
+          setRefreshBusy(false);
+          return;
+        }
+      } catch {
+      }
+      try {
+        const response = await fetch(`${dashboardDataPath}?ts=${Date.now()}`, { cache: 'no-store' });
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        const payload = await response.json();
+        render(payload);
+      } catch {
+        render(readEmbeddedData() || {});
+      } finally {
+        setRefreshBusy(false);
+      }
+    }
+    function isRefreshBusy() {
+      return document.getElementById('refresh-button').dataset.busy === 'true';
+    }
+    function setRefreshBusy(isBusy) {
+      const button = document.getElementById('refresh-button');
+      button.dataset.busy = isBusy ? 'true' : 'false';
+      button.disabled = Boolean(isBusy);
+      button.textContent = isBusy ? 'Refreshing...' : 'Refresh Data';
+    }
+    function configureStaticMode() {
+      if (!isFileMode()) return;
+      const button = document.getElementById('refresh-button');
+      button.disabled = false;
+      button.dataset.busy = 'false';
+      button.textContent = 'Reload Embedded Snapshot';
+      button.title = 'Modo arquivo local: recarrega apenas o snapshot embutido neste HTML.';
+    }
+    document.getElementById('refresh-button').addEventListener('click', () => { refreshData(); });
+    document.getElementById('reload-button').addEventListener('click', () => {
+      if (isFileMode()) {
+        window.location.reload();
+      } else {
+        const url = new URL(window.location.href);
+        url.searchParams.set('ts', Date.now().toString());
+        window.location.href = url.toString();
+      }
+    });
+    // Collapsible panels toggle logic
+    document.querySelectorAll('.panel.collapsible .collapsible-trigger').forEach((trigger) => {
+      trigger.addEventListener('click', () => {
+        trigger.closest('.panel').classList.toggle('collapsed');
+      });
+    });
+    // Modal Functions
+    function openModal(index) {
+      currentModalIndex = index;
+      const modal = document.getElementById('slide-modal');
+      const modalImg = document.getElementById('modal-img');
+      const modalLabel = document.getElementById('modal-label');
+      const slide = currentModalSlides[currentModalIndex];
+      if (slide) {
+        modalImg.src = slide.src;
+        modalLabel.textContent = slide.label;
+        modal.style.display = 'flex';
+      }
+    }
+    function closeModal() {
+      document.getElementById('slide-modal').style.display = 'none';
+    }
+    function nextSlide() {
+      if (currentModalSlides.length === 0) return;
+      currentModalIndex = (currentModalIndex + 1) % currentModalSlides.length;
+      openModal(currentModalIndex);
+    }
+    function prevSlide() {
+      if (currentModalSlides.length === 0) return;
+      currentModalIndex = (currentModalIndex - 1 + currentModalSlides.length) % currentModalSlides.length;
+      openModal(currentModalIndex);
+    }
+    // Modal Events Setup
+    const modal = document.getElementById('slide-modal');
+    if (modal) {
+      document.querySelector('.modal-close').addEventListener('click', closeModal);
+      document.getElementById('modal-prev-btn').addEventListener('click', (e) => {
+        e.stopPropagation();
+        prevSlide();
+      });
+      document.getElementById('modal-next-btn').addEventListener('click', (e) => {
+        e.stopPropagation();
+        nextSlide();
+      });
+      modal.addEventListener('click', (e) => {
+        if (e.target === modal || e.target.classList.contains('modal-content')) {
+          closeModal();
+        }
+      });
+    }
+    // Bind click on previews to open modal
+    document.getElementById('previews').addEventListener('click', (e) => {
+      const card = e.target.closest('.slide-preview');
+      if (card) {
+        const index = parseInt(card.dataset.index, 10);
+        if (!isNaN(index)) {
+          openModal(index);
+        }
+      }
+    });
+    // Keyboard navigation
+    document.addEventListener('keydown', (e) => {
+      const modalEl = document.getElementById('slide-modal');
+      if (modalEl && modalEl.style.display === 'flex') {
+        if (e.key === 'ArrowRight') {
+          nextSlide();
+        } else if (e.key === 'ArrowLeft') {
+          prevSlide();
+        } else if (e.key === 'Escape') {
+          closeModal();
+        }
+      }
+    });
+    configureStaticMode();
+    render(readEmbeddedData() || {});
+  </script>
+</body>
+</html>