@veolab/discoverylab 1.4.3 → 1.6.3

package/dist/infographic-GQAHEOAA.js

@@ -0,0 +1,183 @@
+import "./chunk-R5U7XKVJ.js";
+
+// src/core/export/infographic.ts
+import { existsSync, readFileSync, writeFileSync, mkdirSync, readdirSync, statSync } from "fs";
+import { join, dirname, extname } from "path";
+import { fileURLToPath } from "url";
+function findTemplate() {
+  const __dir = dirname(fileURLToPath(import.meta.url));
+  const possiblePaths = [
+    join(__dir, "infographic-template.html"),
+    join(__dir, "..", "export", "infographic-template.html"),
+    join(process.cwd(), "dist", "export", "infographic-template.html"),
+    join(process.cwd(), "src", "core", "export", "infographic-template.html")
+  ];
+  for (const p of possiblePaths) {
+    if (existsSync(p)) return p;
+  }
+  return null;
+}
+function imageToBase64(imagePath) {
+  if (!existsSync(imagePath)) return "";
+  const buffer = readFileSync(imagePath);
+  const ext = extname(imagePath).toLowerCase();
+  const mimeTypes = {
+    ".png": "image/png",
+    ".jpg": "image/jpeg",
+    ".jpeg": "image/jpeg",
+    ".webp": "image/webp",
+    ".gif": "image/gif"
+  };
+  const mime = mimeTypes[ext] || "image/png";
+  return `data:${mime};base64,${buffer.toString("base64")}`;
+}
+function stripMarkdown(text) {
+  return text.replace(/\*\*(.+?)\*\*/g, "$1").replace(/\*(.+?)\*/g, "$1").replace(/__(.+?)__/g, "$1").replace(/_(.+?)_/g, "$1").replace(/`(.+?)`/g, "$1").replace(/^#{1,3}\s+/gm, "").replace(/^-\s+/gm, "").replace(/^\d+\.\s+/gm, "").replace(/\[(.+?)\]\(.*?\)/g, "$1").trim();
+}
+function collectFrameImages(framesDir, videoPath, projectsDir, projectId) {
+  const imageExts = /\.(png|jpg|jpeg|webp|gif)$/i;
+  const dirs = [
+    framesDir,
+    ...videoPath ? [join(videoPath, "screenshots"), videoPath] : [],
+    ...projectsDir && projectId ? [
+      join(projectsDir, "maestro-recordings", projectId, "screenshots"),
+      join(projectsDir, "web-recordings", projectId, "screenshots")
+    ] : []
+  ];
+  for (const dir of dirs) {
+    if (!existsSync(dir) || !statSync(dir).isDirectory()) continue;
+    const files = readdirSync(dir).filter((f) => imageExts.test(f)).sort().map((f) => join(dir, f));
+    if (files.length > 0) return files;
+  }
+  return [];
+}
+function buildInfographicData(project, frameFiles, frameOcr, annotations) {
+  let flowSteps = [];
+  let uiElements = [];
+  if (project.aiSummary) {
+    const flowMatch = project.aiSummary.match(/## (?:User Flow|Likely User Flow)\n([\s\S]*?)(?=\n##|\n$|$)/);
+    if (flowMatch) {
+      flowSteps = (flowMatch[1].match(/^\d+\.\s+(.+)$/gm) || []).map((s) => s.replace(/^\d+\.\s+/, ""));
+    }
+    const uiMatch = project.aiSummary.match(/## (?:UI Elements Found|Key UI Elements)\n([\s\S]*?)(?=\n##|\n$|$)/);
+    if (uiMatch) {
+      uiElements = (uiMatch[1].match(/^-\s+(.+)$/gm) || []).map((s) => s.replace(/^-\s+/, ""));
+    }
+  }
+  const elementsPerFrame = Math.max(1, Math.ceil(uiElements.length / Math.max(frameFiles.length, 1)));
+  const hotspotColors = ["#818CF8", "#34D399", "#F59E0B", "#EC4899", "#06B6D4", "#8B5CF6"];
+  const hotspotPositions = [
+    { x: 50, y: 8 },
+    // top center (nav bar)
+    { x: 15, y: 30 },
+    // left middle
+    { x: 85, y: 30 },
+    // right middle
+    { x: 50, y: 50 },
+    // center
+    { x: 50, y: 85 },
+    // bottom center (tab bar)
+    { x: 15, y: 70 }
+    // bottom left
+  ];
+  const frames = frameFiles.map((filePath, i) => {
+    const rawStepName = annotations?.[i]?.label || flowSteps[i] || `Step ${i + 1}`;
+    const stepName = stripMarkdown(rawStepName);
+    const ocr = frameOcr[i]?.ocrText || "";
+    const rawDesc = flowSteps[i] || ocr.slice(0, 100) || `Screen ${i + 1}`;
+    const description = stripMarkdown(rawDesc);
+    const hotspots = [];
+    const startIdx = i * elementsPerFrame;
+    const frameElements = uiElements.slice(startIdx, startIdx + elementsPerFrame).slice(0, 4);
+    frameElements.forEach((el, j) => {
+      const cleanEl = stripMarkdown(el);
+      const pos = hotspotPositions[j % hotspotPositions.length];
+      hotspots.push({
+        id: String.fromCharCode(65 + j),
+        x_percent: pos.x,
+        y_percent: pos.y,
+        label: cleanEl.slice(0, 20),
+        title: cleanEl.slice(0, 40),
+        description: cleanEl,
+        color: hotspotColors[j % hotspotColors.length]
+      });
+    });
+    if (hotspots.length === 0 && ocr) {
+      const ocrWords = ocr.split(/\s+/).filter((w) => w.length > 3).slice(0, 3);
+      ocrWords.forEach((w, j) => {
+        const pos = hotspotPositions[j % hotspotPositions.length];
+        hotspots.push({
+          id: String.fromCharCode(65 + j),
+          x_percent: pos.x,
+          y_percent: pos.y,
+          label: w.slice(0, 15),
+          title: w,
+          description: `Text found: "${w}"`,
+          color: hotspotColors[j % hotspotColors.length]
+        });
+      });
+    }
+    return {
+      id: `frame-${i}`,
+      step_name: stepName,
+      description,
+      base64: imageToBase64(filePath),
+      baseline_status: "not_validated",
+      hotspots
+    };
+  });
+  return {
+    name: project.marketingTitle || project.name,
+    platform: project.platform || "unknown",
+    recorded_at: project.createdAt instanceof Date ? project.createdAt.toISOString() : typeof project.createdAt === "string" ? project.createdAt : (/* @__PURE__ */ new Date()).toISOString(),
+    frames
+  };
+}
+function generateInfographicHtmlString(data) {
+  const templatePath = findTemplate();
+  if (!templatePath) return null;
+  let html = readFileSync(templatePath, "utf-8");
+  html = html.replace("__TITLE__", data.name);
+  const dataJson = JSON.stringify(data);
+  html = html.replace(
+    "window.FLOW_DATA || { name: 'Flow', frames: [] }",
+    `window.FLOW_DATA || ${dataJson}`
+  );
+  return html;
+}
+function generateInfographicHtml(data, outputPath) {
+  try {
+    const templatePath = findTemplate();
+    if (!templatePath) {
+      return { success: false, error: "Infographic template not found" };
+    }
+    let html = readFileSync(templatePath, "utf-8");
+    html = html.replace("__TITLE__", data.name);
+    const dataJson = JSON.stringify(data);
+    html = html.replace(
+      "window.FLOW_DATA || { name: 'Flow', frames: [] }",
+      `window.FLOW_DATA || ${dataJson}`
+    );
+    const outDir = dirname(outputPath);
+    if (!existsSync(outDir)) mkdirSync(outDir, { recursive: true });
+    writeFileSync(outputPath, html, "utf-8");
+    const stat = statSync(outputPath);
+    return {
+      success: true,
+      outputPath,
+      size: stat.size,
+      frameCount: data.frames.length
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : String(error)
+    };
+  }
+}
+export {
+  buildInfographicData,
+  collectFrameImages,
+  generateInfographicHtml,
+  generateInfographicHtmlString
+};

package/dist/{server-CZPWQYOI.js → server-W3JQ5RG7.js}

@@ -3,7 +3,7 @@ import {
   getServerPort,
   startServer,
   stopServer
-} from "./chunk-D4FTLCKM.js";
+} from "./chunk-IVX2OSOJ.js";
 import "./chunk-34GGYFXX.js";
 import "./chunk-6GK5K6CS.js";
 import "./chunk-7R5YNOXE.js";

package/dist/{setup-6JJYKKBS.js → setup-F7MGEFIM.js}

@@ -2,10 +2,12 @@ import {
   setupCheckTool,
   setupInitTool,
   setupInstallTool,
+  setupReplayStatusTool,
   setupStatusTool,
   setupTools
-} from "./chunk-CUBQRT5L.js";
+} from "./chunk-HFN6BTVO.js";
 import "./chunk-XKX6NBHF.js";
+import "./chunk-GRU332L4.js";
 import "./chunk-6EGBXRDK.js";
 import "./chunk-YYOK2RF7.js";
 import "./chunk-R5U7XKVJ.js";
@@ -13,6 +15,7 @@ export {
   setupCheckTool,
   setupInitTool,
   setupInstallTool,
+  setupReplayStatusTool,
   setupStatusTool,
   setupTools
 };

package/dist/{tools-Q7OZO732.js → tools-VYFNRUS4.js}

@@ -107,16 +107,17 @@ import {
   uiStatusTool,
   uiTools,
   videoInfoTool
-} from "./chunk-HB3YPWF3.js";
+} from "./chunk-5AISGCS4.js";
+import "./chunk-34GGYFXX.js";
 import "./chunk-PMCXEA7J.js";
 import {
   setupCheckTool,
   setupInitTool,
+  setupReplayStatusTool,
   setupStatusTool,
   setupTools
-} from "./chunk-CUBQRT5L.js";
+} from "./chunk-HFN6BTVO.js";
 import "./chunk-XKX6NBHF.js";
-import "./chunk-34GGYFXX.js";
 import "./chunk-7R5YNOXE.js";
 import "./chunk-3ERJNXYM.js";
 import "./chunk-LB3RNE3O.js";
@@ -217,6 +218,7 @@ export {
   projectTools,
   setupCheckTool,
   setupInitTool,
+  setupReplayStatusTool,
   setupStatusTool,
   setupTools,
   startRecordingTool,

package/dist/visualizations/app-flow-map.html

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>App Flow Map</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    background: #1a1a2e;
+    color: #e0e0e0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    min-height: 100vh;
+    padding: 32px;
+    overflow-x: hidden;
+  }
+  .map { max-width: 900px; margin: 0 auto; }
+  .map-header {
+    text-align: center; margin-bottom: 36px;
+    opacity: 0; animation: fadeIn 0.6s 0.1s forwards;
+  }
+  .map-header h1 { font-size: 24px; font-weight: 700; color: #fff; }
+  .map-header p { font-size: 13px; color: rgba(255,255,255,0.45); margin-top: 6px; }
+  @keyframes fadeIn { to { opacity: 1; } }
+  @keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
+
+  /* Phase blocks */
+  .phase {
+    border-radius: 16px;
+    padding: 20px;
+    margin-bottom: 0;
+    opacity: 0;
+    animation: slideUp 0.5s forwards;
+    position: relative;
+  }
+  .phase-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 4px; }
+  .phase-desc { font-size: 12px; opacity: 0.6; margin-bottom: 14px; }
+
+  /* Phase color themes */
+  .phase-0 { background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.25); }
+  .phase-0 .phase-title { color: #86efac; }
+  .phase-1 { background: rgba(99, 102, 241, 0.12); border: 1px solid rgba(99, 102, 241, 0.25); }
+  .phase-1 .phase-title { color: #a5b4fc; }
+  .phase-2 { background: rgba(234, 179, 8, 0.12); border: 1px solid rgba(234, 179, 8, 0.25); }
+  .phase-2 .phase-title { color: #fde047; }
+  .phase-3 { background: rgba(236, 72, 153, 0.12); border: 1px solid rgba(236, 72, 153, 0.25); }
+  .phase-3 .phase-title { color: #f9a8d4; }
+  .phase-4 { background: rgba(14, 165, 233, 0.12); border: 1px solid rgba(14, 165, 233, 0.25); }
+  .phase-4 .phase-title { color: #7dd3fc; }
+
+  /* Screen cards inside phases */
+  .phase-screens {
+    display: flex; gap: 10px; overflow-x: auto; padding: 4px 0;
+  }
+  .screen-card {
+    flex-shrink: 0;
+    background: rgba(255,255,255,0.06);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: 10px;
+    padding: 8px;
+    min-width: 130px;
+    max-width: 160px;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .screen-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
+  }
+  .screen-card-img {
+    width: 100%; height: 180px;
+    border-radius: 6px; overflow: hidden;
+    background: #000; margin-bottom: 6px;
+  }
+  .screen-card-img img { width: 100%; height: 100%; object-fit: contain; }
+  .screen-card-label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.85); }
+  .screen-card-detail { font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 2px; }
+
+  /* Arrow connector between phases */
+  .arrow-connector {
+    display: flex; align-items: center; justify-content: center;
+    height: 40px;
+    opacity: 0; animation: fadeIn 0.3s forwards;
+  }
+  .arrow-connector svg {
+    stroke: rgba(255,255,255,0.2); fill: none; stroke-width: 2;
+  }
+
+  /* Insight callout */
+  .insight {
+    margin-top: 6px; padding: 8px 12px;
+    background: rgba(255,255,255,0.04);
+    border-left: 3px solid rgba(255,255,255,0.15);
+    border-radius: 0 8px 8px 0;
+    font-size: 11px; color: rgba(255,255,255,0.55);
+    line-height: 1.5;
+  }
+
+  .footer {
+    text-align: center; margin-top: 32px;
+    font-size: 10px; color: rgba(255,255,255,0.2);
+  }
+  .model-label {
+    position: fixed; bottom: 10px; right: 14px;
+    font-size: 9px; color: rgba(255,255,255,0.2);
+    background: rgba(0,0,0,0.3);
+    padding: 2px 8px; border-radius: 4px;
+  }
+</style>
+</head>
+<body>
+<div class="map">
+  <div class="map-header">
+    <h1 id="mapTitle">App Flow Map</h1>
+    <p id="mapSubtitle"></p>
+  </div>
+  <div id="mapContent"></div>
+  <div class="footer" id="mapFooter">Generated by DiscoveryLab</div>
+  <div class="model-label" id="modelLabel"></div>
+</div>
+<script>
+  const DATA = window.__VISUALIZATION_DATA__ || {};
+  const phases = DATA.phases || [];
+
+  if (DATA.title) document.getElementById('mapTitle').textContent = DATA.title;
+  if (DATA.subtitle) document.getElementById('mapSubtitle').textContent = DATA.subtitle;
+  if (DATA.providerName) document.getElementById('modelLabel').textContent = DATA.providerName;
+
+  const container = document.getElementById('mapContent');
+  let animDelay = 0.3;
+
+  phases.forEach((phase, phaseIdx) => {
+    // Arrow between phases
+    if (phaseIdx > 0) {
+      const arrow = document.createElement('div');
+      arrow.className = 'arrow-connector';
+      arrow.style.animationDelay = animDelay + 's';
+      arrow.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 5v14M5 12l7 7 7-7" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+      container.appendChild(arrow);
+      animDelay += 0.15;
+    }
+
+    const phaseEl = document.createElement('div');
+    phaseEl.className = `phase phase-${phaseIdx % 5}`;
+    phaseEl.style.animationDelay = animDelay + 's';
+
+    let html = `
+      <div class="phase-title">${phase.title || 'Phase ' + (phaseIdx + 1)}</div>
+      <div class="phase-desc">${phase.description || ''}</div>
+    `;
+
+    // Screen cards
+    if (phase.screens && phase.screens.length > 0) {
+      html += '<div class="phase-screens">';
+      phase.screens.forEach(screen => {
+        html += `
+          <div class="screen-card">
+            ${screen.imageUrl ? `<div class="screen-card-img"><img src="${screen.imageUrl}" alt="" loading="lazy"></div>` : ''}
+            <div class="screen-card-label">${screen.label || ''}</div>
+            ${screen.detail ? `<div class="screen-card-detail">${screen.detail}</div>` : ''}
+          </div>
+        `;
+      });
+      html += '</div>';
+    }
+
+    // Insight
+    if (phase.insight) {
+      html += `<div class="insight">${phase.insight}</div>`;
+    }
+
+    phaseEl.innerHTML = html;
+    container.appendChild(phaseEl);
+    animDelay += 0.3;
+  });
+</script>
+</body>
+</html>

package/dist/visualizations/device-showcase.html

@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Device Showcase</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    background: linear-gradient(135deg, #0c0c1d, #1e1e3f, #0c0c1d);
+    color: #fff;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    min-height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  .header { text-align: center; margin-bottom: 32px; z-index: 10; }
+  .header h1 { font-size: 28px; font-weight: 700; }
+  .header p { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 4px; }
+  .carousel-wrapper {
+    perspective: 1200px;
+    width: 100%;
+    max-width: 800px;
+    height: 500px;
+    position: relative;
+  }
+  .carousel {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transform-style: preserve-3d;
+    animation: spin 20s linear infinite;
+    animation-play-state: running;
+  }
+  .carousel:hover { animation-play-state: paused; }
+  @keyframes spin { to { transform: rotateY(360deg); } }
+  .device {
+    position: absolute;
+    width: 200px;
+    left: 50%;
+    top: 50%;
+    margin-left: -100px;
+    margin-top: -200px;
+    transform-style: preserve-3d;
+    transition: transform 0.5s, box-shadow 0.5s;
+  }
+  .device-frame {
+    background: #111;
+    border-radius: 24px;
+    padding: 8px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
+    border: 1px solid rgba(255,255,255,0.08);
+  }
+  .device-screen {
+    border-radius: 16px;
+    overflow: hidden;
+    background: #000;
+  }
+  .device-screen img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+  .device-label {
+    text-align: center;
+    font-size: 11px;
+    color: rgba(255,255,255,0.5);
+    margin-top: 12px;
+  }
+  .glow {
+    position: absolute;
+    width: 300px; height: 300px;
+    background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
+    top: 50%; left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+  .footer {
+    position: fixed; bottom: 16px;
+    font-size: 11px; color: rgba(255,255,255,0.25);
+  }
+  .nav-dots {
+    display: flex; gap: 8px; margin-top: 24px; z-index: 10;
+  }
+  .nav-dot {
+    width: 8px; height: 8px; border-radius: 50%;
+    background: rgba(255,255,255,0.2);
+    cursor: pointer;
+    transition: background 0.3s;
+  }
+  .nav-dot.active { background: #6366f1; }
+</style>
+</head>
+<body>
+<div class="header">
+  <h1 id="vizTitle">Device Showcase</h1>
+  <p id="vizSubtitle"></p>
+</div>
+<div class="carousel-wrapper">
+  <div class="glow"></div>
+  <div class="carousel" id="carousel"></div>
+</div>
+<div class="nav-dots" id="navDots"></div>
+<div class="footer" id="vizFooter">Generated by DiscoveryLab</div>
+<script>
+  const DATA = window.__VISUALIZATION_DATA__ || {};
+  const screens = DATA.screens || [];
+
+  if (DATA.title) document.getElementById('vizTitle').textContent = DATA.title;
+  if (DATA.subtitle) document.getElementById('vizSubtitle').textContent = DATA.subtitle;
+
+  const carousel = document.getElementById('carousel');
+  const dotsContainer = document.getElementById('navDots');
+  const n = screens.length || 1;
+  const angleStep = 360 / n;
+  const radius = Math.max(250, n * 60);
+
+  screens.forEach((screen, i) => {
+    const angle = angleStep * i;
+    const device = document.createElement('div');
+    device.className = 'device';
+    device.style.transform = `rotateY(${angle}deg) translateZ(${radius}px)`;
+    device.innerHTML = `
+      <div class="device-frame">
+        <div class="device-screen">
+          <img src="${screen.imageUrl}" alt="Screen ${i + 1}" loading="lazy">
+        </div>
+      </div>
+      <div class="device-label">${screen.label || `Screen ${i + 1}`}</div>
+    `;
+    carousel.appendChild(device);
+
+    const dot = document.createElement('div');
+    dot.className = `nav-dot ${i === 0 ? 'active' : ''}`;
+    dot.addEventListener('click', () => {
+      carousel.style.animation = 'none';
+      carousel.offsetHeight; // reflow
+      carousel.style.transform = `rotateY(${-angle}deg)`;
+      carousel.style.transition = 'transform 0.8s ease';
+      dotsContainer.querySelectorAll('.nav-dot').forEach(d => d.classList.remove('active'));
+      dot.classList.add('active');
+    });
+    dotsContainer.appendChild(dot);
+  });
+</script>
+</body>
+</html>