@julioventura/opensquad 0.1.17

package/skills/run-dashboard/scripts/serve.js

@@ -0,0 +1,135 @@
+import { createServer } from 'node:http';
+import { existsSync } from 'node:fs';
+import { readFile } from 'node:fs/promises';
+import { extname, join, normalize, resolve } from 'node:path';
+import process from 'node:process';
+import { writeDashboardFiles } from './generate.js';
+
+const DEFAULT_ARGS = {
+  runDir: '',
+  workspaceRoot: process.cwd(),
+  host: '127.0.0.1',
+  port: 4319,
+  templatePath: resolve(process.cwd(), 'skills', 'run-dashboard', 'templates', 'run-dashboard.template.html'),
+};
+
+function parseArgs(argv) {
+  const args = { ...DEFAULT_ARGS };
+
+  for (let index = 2; index < argv.length; index += 1) {
+    const current = argv[index];
+    if (current === '--run-dir' && index + 1 < argv.length) args.runDir = argv[++index];
+    else if (current === '--workspace-root' && index + 1 < argv.length) args.workspaceRoot = argv[++index];
+    else if (current === '--host' && index + 1 < argv.length) args.host = argv[++index];
+    else if (current === '--port' && index + 1 < argv.length) args.port = Number(argv[++index]);
+    else if (current === '--template-path' && index + 1 < argv.length) args.templatePath = argv[++index];
+  }
+
+  return args;
+}
+
+async function main() {
+  const args = parseArgs(process.argv);
+  if (!args.runDir) throw new Error('--run-dir is required');
+
+  const runDir = resolve(args.runDir);
+  const workspaceRoot = resolve(args.workspaceRoot);
+  const templatePath = resolve(args.templatePath);
+  const outputHtml = join(runDir, 'run-dashboard.html');
+  const outputJson = join(runDir, 'run-dashboard.data.json');
+
+  await writeDashboardFiles({
+    runDir,
+    workspaceRoot,
+    outputHtml,
+    outputJson,
+    templatePath,
+    refreshMetrics: true,
+  });
+
+  const server = createServer(async (request, response) => {
+    try {
+      const requestUrl = new URL(request.url || '/', `http://${request.headers.host || `${args.host}:${args.port}`}`);
+      const pathname = decodeURIComponent(requestUrl.pathname || '/');
+
+      if (request.method === 'POST' && pathname === '/__run_dashboard_refresh__') {
+        const { payload } = await writeDashboardFiles({
+          runDir,
+          workspaceRoot,
+          outputHtml,
+          outputJson,
+          templatePath,
+          refreshMetrics: true,
+        });
+        return sendJson(response, 200, payload);
+      }
+
+      if (request.method !== 'GET' && request.method !== 'HEAD') {
+        return sendJson(response, 405, { error: 'Method not allowed' });
+      }
+
+      let targetPath = pathname === '/' ? outputHtml : join(runDir, normalize(pathname));
+      if (pathname === '/run-dashboard.html') targetPath = outputHtml;
+      if (pathname === '/run-dashboard.data.json') targetPath = outputJson;
+
+      const resolvedTarget = resolve(targetPath);
+      const normalizedRunDir = process.platform === 'win32'
+        ? runDir.toLowerCase().replace(/\//g, '\\')
+        : runDir;
+      const normalizedTarget = process.platform === 'win32'
+        ? resolvedTarget.toLowerCase().replace(/\//g, '\\')
+        : resolvedTarget;
+      const safePrefix = `${normalizedRunDir}${process.platform === 'win32' ? '\\' : '/'}`;
+      const isInsideRunDir = normalizedTarget === normalizedRunDir || normalizedTarget.startsWith(safePrefix);
+
+      if (!isInsideRunDir) {
+        return sendJson(response, 403, { error: 'Forbidden path' });
+      }
+
+      if (!existsSync(resolvedTarget)) {
+        return sendJson(response, 404, { error: 'Not found' });
+      }
+
+      const content = await readFile(resolvedTarget);
+      const headers = {
+        'Content-Type': detectContentType(resolvedTarget),
+        'Cache-Control': 'no-store',
+      };
+
+      response.writeHead(200, headers);
+      if (request.method !== 'HEAD') response.end(content);
+      else response.end();
+    } catch (error) {
+      sendJson(response, 500, { error: error.message });
+    }
+  });
+
+  server.listen(args.port, args.host, () => {
+    console.log(`Run dashboard server ready at http://${args.host}:${args.port}`);
+    console.log(`Open http://${args.host}:${args.port}/run-dashboard.html`);
+  });
+}
+
+function detectContentType(filePath) {
+  const extension = extname(filePath).toLowerCase();
+  if (extension === '.html') return 'text/html; charset=utf-8';
+  if (extension === '.json') return 'application/json; charset=utf-8';
+  if (extension === '.md') return 'text/markdown; charset=utf-8';
+  if (extension === '.jpg' || extension === '.jpeg') return 'image/jpeg';
+  if (extension === '.png') return 'image/png';
+  if (extension === '.webp') return 'image/webp';
+  return 'application/octet-stream';
+}
+
+function sendJson(response, statusCode, payload) {
+  response.writeHead(statusCode, {
+    'Content-Type': 'application/json; charset=utf-8',
+    'Cache-Control': 'no-store',
+  });
+  response.end(JSON.stringify(payload));
+}
+
+main().catch((error) => {
+  console.error(`❌ ${error.message}`);
+  process.exit(1);
+});

package/skills/run-dashboard/templates/run-dashboard-simple.template.html

@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{SQUAD_NAME}} — Run Dashboard ({{RUN_ID}})</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;
+      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; }
+
+    /* ── Header ───────────────────────────────────── */
+    .header {
+      backdrop-filter: blur(16px); background: var(--panel);
+      border: 1px solid var(--panel-border); border-radius: var(--radius);
+      box-shadow: var(--shadow); padding: 28px 32px; position: relative; overflow: hidden;
+    }
+    .header::after {
+      content: ""; position: absolute; inset: 0; pointer-events: none;
+      background: linear-gradient(90deg, rgba(21,245,186,0.08), transparent 28%, rgba(0,194,255,0.08));
+    }
+    .header-inner { position: relative; z-index: 1; }
+    .eyebrow {
+      display: inline-flex; align-items: center; gap: 8px;
+      padding: 6px 12px; border-radius: 999px;
+      background: rgba(0,194,255,0.14); color: var(--accent-2);
+      font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
+    }
+    .header h1 { margin: 14px 0 6px; font-size: clamp(28px, 3.5vw, 48px); letter-spacing: -0.04em; }
+    .header .sub { color: var(--muted); font-size: 15px; margin: 0; }
+    .meta-row {
+      display: flex; flex-wrap: wrap; gap: 24px; margin-top: 18px;
+    }
+    .meta-item .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
+    .meta-item .value { font-size: 15px; font-weight: 700; margin-top: 2px; }
+    .status-badge {
+      display: inline-block; padding: 4px 12px; border-radius: 999px;
+      font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
+    }
+    .status-badge.ok { background: rgba(21,245,186,0.16); color: var(--accent); }
+    .status-badge.partial { background: rgba(255,184,77,0.16); color: var(--warn); }
+    .status-badge.fail { background: rgba(255,95,135,0.16); color: var(--danger); }
+
+    /* ── Cards ─────────────────────────────────────── */
+    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
+    .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-top: 18px; }
+    .card {
+      backdrop-filter: blur(16px); background: var(--panel);
+      border: 1px solid var(--panel-border); border-radius: var(--radius);
+      box-shadow: var(--shadow); padding: 22px 26px;
+    }
+    .card h3 {
+      margin: 0 0 14px; font-size: 16px; color: var(--accent-2);
+      border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 10px;
+      text-transform: uppercase; letter-spacing: 0.06em;
+    }
+    .card p, .card li { font-size: 14px; line-height: 1.65; color: var(--text); }
+    .card ul { padding-left: 18px; margin: 0; }
+    .card li { margin-bottom: 6px; }
+    .card a { color: var(--accent); text-decoration: none; font-weight: 600; }
+    .card a:hover { text-decoration: underline; }
+    .card .muted { color: var(--muted); font-size: 13px; }
+
+    /* ── Slides grid (4 per row) ───────────────────── */
+    .section-title {
+      margin: 28px 0 14px; font-size: 18px; letter-spacing: -0.02em;
+    }
+    .slides-grid {
+      display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
+    }
+    .slide-card {
+      border-radius: var(--radius-sm); overflow: hidden;
+      background: rgba(5,14,26,0.55); border: 1px solid rgba(30,64,175,0.35);
+      cursor: pointer; transition: transform 0.2s, border-color 0.2s;
+    }
+    .slide-card:hover { transform: translateY(-3px); border-color: var(--accent-2); }
+    .slide-card img { width: 100%; display: block; }
+    .slide-card .slide-label {
+      text-align: center; padding: 8px; font-size: 13px; font-weight: 700;
+      color: var(--accent-2); background: rgba(4,8,18,0.5);
+      border-top: 1px solid rgba(30,64,175,0.2);
+    }
+
+    /* ── Platform descriptions ─────────────────────── */
+    .desc-text {
+      font-size: 13px; line-height: 1.6; color: var(--muted);
+      white-space: pre-wrap; word-break: break-word;
+    }
+
+    /* ── Responsive ────────────────────────────────── */
+    @media (max-width: 1024px) {
+      .grid-2, .grid-3 { grid-template-columns: 1fr; }
+      .slides-grid { grid-template-columns: repeat(2, 1fr); }
+    }
+    @media (max-width: 640px) {
+      .slides-grid { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+<div class="shell">
+
+  <!-- ═══════════ HEADER ═══════════ -->
+  <section class="header">
+    <div class="header-inner">
+      <div class="eyebrow">DASHBOARD-RUN</div>
+      <h1 id="dash-title">{{SQUAD_LABEL}}</h1>
+      <p class="sub" id="dash-sub">Relatório final de execução</p>
+      <div class="meta-row">
+        <div class="meta-item"><div class="label">Squad</div><div class="value" id="m-squad">{{SQUAD_NAME}}</div></div>
+        <div class="meta-item"><div class="label">Run ID</div><div class="value" id="m-run">{{RUN_ID}}</div></div>
+        <div class="meta-item"><div class="label">Publicado em</div><div class="value" id="m-date">{{PUBLISH_DATE}}</div></div>
+        <div class="meta-item"><div class="label">Status</div><div class="value"><span class="status-badge ok" id="m-status">{{STATUS}}</span></div></div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ═══════════ ROW 1: Resumo + Publicações ═══════════ -->
+  <div class="grid-2">
+    <div class="card">
+      <h3>Resumo do Tema</h3>
+      <p><strong>Pauta:</strong> {{TOPIC}}</p>
+      <p><strong>Ângulo Editorial:</strong> {{ANGLE}}</p>
+      <p><strong>Tom:</strong> {{TONE}}</p>
+    </div>
+    <div class="card">
+      <h3>Publicações</h3>
+      <ul>
+        <li><strong>Instagram:</strong> <a href="{{IG_URL}}" target="_blank">{{IG_URL}}</a></li>
+        <li><strong>Facebook:</strong> <a href="{{FB_URL}}" target="_blank">{{FB_URL}}</a></li>
+        <li><strong>YouTube:</strong> <a href="{{YT_URL}}" target="_blank">{{YT_URL}}</a></li>
+        <li><strong>Newsletter:</strong> {{NEWSLETTER_STATUS}}</li>
+      </ul>
+    </div>
+  </div>
+
+  <!-- ═══════════ ROW 2: Legenda e Metadados ═══════════ -->
+  <div class="grid-2" style="margin-top: 18px;">
+    <div class="card" style="grid-column: 1 / -1;">
+      <h3>Legenda e Metadados</h3>
+      <p>{{CAPTION_FULL}}</p>
+      <p><strong>Hashtags:</strong> {{HASHTAGS}}</p>
+    </div>
+  </div>
+
+  <!-- ═══════════ CARROSSEL VISUAL ═══════════ -->
+  <h2 class="section-title">Carrossel Visual Produzido</h2>
+  <div class="slides-grid" id="slides-grid">
+    <!-- Populated by JS or statically -->
+  </div>
+
+  <!-- ═══════════ ROW 3: Descrições por plataforma ═══════════ -->
+  <div class="grid-3">
+    <div class="card">
+      <h3>Descrição — Instagram</h3>
+      <div class="desc-text" id="desc-ig">{{DESC_INSTAGRAM}}</div>
+    </div>
+    <div class="card">
+      <h3>Descrição — Facebook</h3>
+      <div class="desc-text" id="desc-fb">{{DESC_FACEBOOK}}</div>
+    </div>
+    <div class="card">
+      <h3>Descrição — YouTube</h3>
+      <div class="desc-text" id="desc-yt">{{DESC_YOUTUBE}}</div>
+    </div>
+  </div>
+
+</div>
+</body>
+</html>