@veolab/discoverylab 1.6.5 → 1.6.6

package/dist/{chunk-V6RREMYD.js → chunk-XDUFCPOC.js}

@@ -5235,6 +5235,56 @@ function normalizePersistedLocalESVPServerUrl(serverUrl, connectionMode) {
 function resolvePersistedLocalESVPServerUrl(serverUrl, esvp) {
   return normalizePersistedLocalESVPServerUrl(serverUrl, "local") || resolveProjectESVPServerUrl(esvp) || LOCAL_ESVP_SERVER_URL;
 }
+function cloneJsonRecord(value) {
+  if (!value) return value;
+  try {
+    return JSON.parse(JSON.stringify(value));
+  } catch {
+    return value;
+  }
+}
+function detachPortableESVPForExport(esvp, snapshotAttached = false) {
+  if (!esvp) {
+    return { value: null, detached: false };
+  }
+  const cloned = cloneJsonRecord(esvp) || {};
+  const connectionMode = typeof cloned.connectionMode === "string" ? cloned.connectionMode.trim().toLowerCase() : "";
+  const serverUrl = typeof cloned.serverUrl === "string" ? cloned.serverUrl.trim() : "";
+  const shouldDetach = connectionMode === "local" || !serverUrl;
+  if (!shouldDetach) {
+    return { value: cloned, detached: false };
+  }
+  cloned.currentSessionId = null;
+  cloned.serverUrl = null;
+  cloned.detachedForExport = true;
+  cloned.snapshotAttached = snapshotAttached;
+  if (cloned.network && typeof cloned.network === "object") {
+    const network = cloned.network;
+    network.sourceSessionId = null;
+    network.activeCaptureSessionId = null;
+    network.detachedForExport = true;
+  }
+  if (cloned.validation && typeof cloned.validation === "object") {
+    const validation = cloned.validation;
+    validation.sourceSessionId = null;
+    validation.replaySessionId = null;
+    validation.detachedForExport = true;
+  }
+  return { value: cloned, detached: true };
+}
+function detachPortableSessionDataForExport(sessionData, detachedEsvp, detached = false) {
+  if (!sessionData) return null;
+  const cloned = cloneJsonRecord(sessionData) || {};
+  if (detached) {
+    cloned.esvp = detachedEsvp;
+    if (cloned.networkCapture && typeof cloned.networkCapture === "object") {
+      const networkCapture = cloned.networkCapture;
+      networkCapture.sessionId = null;
+      networkCapture.detachedForExport = true;
+    }
+  }
+  return cloned;
+}
 function isESVPReplayValidationSupported(result) {
   if (!result) return true;
   if (result.supported === false) return false;
@@ -5394,6 +5444,14 @@ app.post("/api/export", async (c) => {
             };
           }
         }
+        const detachedEsvpResult = detachPortableESVPForExport(esvp, !!esvpSnapshot);
+        const exportedESVP = detachedEsvpResult.value;
+        const exportedSessionData = detachPortableSessionDataForExport(
+          sessionData,
+          exportedESVP,
+          detachedEsvpResult.detached
+        );
+        const exportedESVPSessionId = detachedEsvpResult.detached ? null : esvpSessionId;
         const packagedProject = {
           ...normalizedProject,
           videoPath: null,
@@ -5433,13 +5491,13 @@ app.post("/api/export", async (c) => {
             recordingFolder: recordingIncluded,
             networkEntries: networkEntries.length,
             exportArtifacts: exportArtifactCount,
-            esvpSessionId: esvpSessionId || null
+            esvpSessionId: exportedESVPSessionId || null
           }
         });
         writeExportJson(join6(bundleRoot, "metadata", "project.json"), packagedProject);
         writeExportJson(join6(bundleRoot, "metadata", "exports.json"), exportRecords);
-        if (sessionData) {
-          writeExportJson(join6(bundleRoot, "metadata", "session.json"), sessionData);
+        if (exportedSessionData) {
+          writeExportJson(join6(bundleRoot, "metadata", "session.json"), exportedSessionData);
         }
         if (rawProject.taskHubLinks) {
           writeExportJson(join6(bundleRoot, "taskhub", "links.json"), normalizedProject.taskHubLinks);
@@ -5465,8 +5523,8 @@ app.post("/api/export", async (c) => {
         if (networkCapture) {
           writeExportJson(join6(bundleRoot, "network", "capture.json"), networkCapture);
         }
-        if (esvp) {
-          writeExportJson(join6(bundleRoot, "network", "esvp.json"), esvp);
+        if (exportedESVP) {
+          writeExportJson(join6(bundleRoot, "network", "esvp.json"), exportedESVP);
         }
         if (esvpSnapshot) {
           writeExportJson(join6(bundleRoot, "esvp", "snapshot.json"), esvpSnapshot);
@@ -5984,27 +6042,54 @@ app.post("/api/export/infographic", async (c) => {
     const [project] = await db.select().from(projects).where(eq(projects.id, projectId)).limit(1);
     if (!project) return c.json({ error: "Project not found" }, 404);
     const { FRAMES_DIR: fDir, EXPORTS_DIR: eDir, PROJECTS_DIR: pDir } = await import("./db-5ECN3O7F.js");
-    const { collectFrameImages, buildInfographicData, generateInfographicHtml } = await import("./infographic-GQAHEOAA.js");
+    const { buildInfographicData, generateInfographicHtml, resolveInfographicFrameInputs } = await import("./infographic-OSDIJM5M.js");
     const dbFrames = await db.select().from(frames).where(eq(frames.projectId, projectId)).orderBy(frames.frameNumber).limit(20);
-    let frameFiles;
-    let frameOcr;
-    if (dbFrames.length > 0) {
-      frameFiles = dbFrames.map((f) => f.imagePath);
-      frameOcr = dbFrames;
-    } else {
-      frameFiles = collectFrameImages(join6(fDir, projectId), project.videoPath, pDir, projectId);
-      frameOcr = frameFiles.map(() => ({ ocrText: null }));
-    }
-    if (frameFiles.length === 0) {
-      return c.json({ error: "No frames found. Run analyzer first." }, 400);
+    const resolvedFrames = resolveInfographicFrameInputs(
+      dbFrames,
+      join6(fDir, projectId),
+      project.videoPath,
+      pDir,
+      projectId
+    );
+    if (resolvedFrames.frameFiles.length === 0) {
+      return c.json({
+        error: resolvedFrames.candidateCount > 0 ? "No readable frames found for infographic export." : "No frames found. Run analyzer first.",
+        debug: {
+          frameCandidates: resolvedFrames.candidateCount,
+          validFrames: 0,
+          source: resolvedFrames.source,
+          invalidFrames: resolvedFrames.invalidFrames.slice(0, 5)
+        }
+      }, 400);
     }
     const cached = annotationCache.get(projectId);
     const annotations = cached?.steps?.map((s) => ({ label: s }));
-    const data = buildInfographicData(project, frameFiles, frameOcr, annotations);
+    const data = buildInfographicData(project, resolvedFrames.frameFiles, resolvedFrames.frameOcr, annotations);
+    if (data.frames.length === 0) {
+      return c.json({
+        error: "Infographic export produced no embeddable frames.",
+        debug: {
+          frameCandidates: resolvedFrames.candidateCount,
+          validFrames: resolvedFrames.frameFiles.length,
+          source: resolvedFrames.source,
+          invalidFrames: resolvedFrames.invalidFrames.slice(0, 5)
+        }
+      }, 400);
+    }
     const slug = (project.marketingTitle || project.name || projectId).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 40);
     const outputPath = join6(eDir, `${slug}-infographic.html`);
     const result = generateInfographicHtml(data, outputPath);
-    if (!result.success) return c.json({ error: result.error }, 500);
+    if (!result.success) {
+      return c.json({
+        error: result.error,
+        debug: {
+          frameCandidates: resolvedFrames.candidateCount,
+          validFrames: resolvedFrames.frameFiles.length,
+          source: resolvedFrames.source,
+          invalidFrames: resolvedFrames.invalidFrames.slice(0, 5)
+        }
+      }, 500);
+    }
     if (open) {
       const { exec: exec2 } = await import("child_process");
       exec2(`open "${result.outputPath}"`);

package/dist/{chunk-Q7Q3A2ZI.js → chunk-YFF3M76J.js}

@@ -3789,29 +3789,25 @@ var exportInfographicTool = {
     try {
       const { projects: projectsTable, frames: framesTable, FRAMES_DIR, PROJECTS_DIR: PROJECTS_DIR3 } = await import("./db-5ECN3O7F.js");
       const { eq: eq4 } = await import("drizzle-orm");
-      const { collectFrameImages, buildInfographicData, generateInfographicHtml } = await import("./infographic-GQAHEOAA.js");
+      const { buildInfographicData, generateInfographicHtml, resolveInfographicFrameInputs } = await import("./infographic-OSDIJM5M.js");
       const db = getDatabase();
       const [project] = await db.select().from(projectsTable).where(eq4(projectsTable.id, params.projectId)).limit(1);
       if (!project) return createErrorResult(`Project not found: ${params.projectId}`);
       const dbFrames = await db.select().from(framesTable).where(eq4(framesTable.projectId, project.id)).orderBy(framesTable.frameNumber).limit(20);
-      let frameFiles;
-      let frameOcr;
-      if (dbFrames.length > 0) {
-        frameFiles = dbFrames.map((f) => f.imagePath);
-        frameOcr = dbFrames;
-      } else {
-        frameFiles = collectFrameImages(
-          path5.join(FRAMES_DIR, project.id),
-          project.videoPath,
-          PROJECTS_DIR3,
-          project.id
-        );
-        frameOcr = frameFiles.map(() => ({ ocrText: null }));
+      const resolvedFrames = resolveInfographicFrameInputs(
+        dbFrames,
+        path5.join(FRAMES_DIR, project.id),
+        project.videoPath,
+        PROJECTS_DIR3,
+        project.id
+      );
+      if (resolvedFrames.frameFiles.length === 0) {
+        return createErrorResult(`No readable frames found for infographic export. Checked ${resolvedFrames.candidateCount} candidate(s) from ${resolvedFrames.source}.`);
       }
-      if (frameFiles.length === 0) {
-        return createErrorResult("No frames found. Run analyzer first.");
+      const data = buildInfographicData(project, resolvedFrames.frameFiles, resolvedFrames.frameOcr);
+      if (data.frames.length === 0) {
+        return createErrorResult("Infographic export produced no embeddable frames.");
       }
-      const data = buildInfographicData(project, frameFiles, frameOcr);
       const slug = (project.marketingTitle || project.name || project.id).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 40);
       const outputFilePath = params.outputPath ? path5.join(params.outputPath, `${slug}-infographic.html`) : path5.join(EXPORTS_DIR, `${slug}-infographic.html`);
       const result = generateInfographicHtml(data, outputFilePath);
@@ -7231,21 +7227,21 @@ var knowledgeOpenTool = {
       const { FRAMES_DIR, PROJECTS_DIR: PROJECTS_DIR3 } = await import("./db-5ECN3O7F.js");
       const { join: join12 } = await import("path");
       const dbFrames = await db.select().from(frames).where(eq4(frames.projectId, project.id)).orderBy(frames.frameNumber).limit(15);
-      let frameFiles;
-      let frameOcr;
-      if (dbFrames.length > 0) {
-        frameFiles = dbFrames.map((f) => f.imagePath);
-        frameOcr = dbFrames;
-      } else {
-        const { collectFrameImages } = await import("./infographic-GQAHEOAA.js");
-        frameFiles = collectFrameImages(join12(FRAMES_DIR, project.id), project.videoPath, PROJECTS_DIR3, project.id);
-        frameOcr = frameFiles.map(() => ({ ocrText: null }));
+      const { resolveInfographicFrameInputs, buildInfographicData, generateInfographicHtmlString } = await import("./infographic-OSDIJM5M.js");
+      const resolvedFrames = resolveInfographicFrameInputs(
+        dbFrames,
+        join12(FRAMES_DIR, project.id),
+        project.videoPath,
+        PROJECTS_DIR3,
+        project.id
+      );
+      if (resolvedFrames.frameFiles.length === 0) {
+        return createTextResult(`Project "${project.marketingTitle || project.name}" has no readable frames. Run the analyzer again, then try again.`);
       }
-      if (frameFiles.length === 0) {
-        return createTextResult(`Project "${project.marketingTitle || project.name}" has no frames. Run the analyzer first, then try again.`);
+      const data = buildInfographicData(project, resolvedFrames.frameFiles, resolvedFrames.frameOcr);
+      if (data.frames.length === 0) {
+        return createErrorResult(`Project "${project.marketingTitle || project.name}" did not produce embeddable infographic frames.`);
       }
-      const { buildInfographicData, generateInfographicHtmlString } = await import("./infographic-GQAHEOAA.js");
-      const data = buildInfographicData(project, frameFiles, frameOcr);
       const html = generateInfographicHtmlString(data);
       if (!html) {
         return createErrorResult("Failed to generate infographic HTML (template not found)");
@@ -7273,7 +7269,7 @@ var knowledgeOpenTool = {
         structuredContent: {
           projectId: project.id,
           name: project.marketingTitle || project.name,
-          frameCount: frameFiles.length,
+          frameCount: resolvedFrames.frameFiles.length,
           platform: project.platform || "unknown"
         },
         _meta: {

package/dist/cli.js

@@ -390,7 +390,7 @@ program.command("serve").alias("server").description("Start the DiscoveryLab web
   console.log(chalk.cyan("\n  DiscoveryLab"));
   console.log(chalk.gray("  AI-powered app testing & evidence generator\n"));
   try {
-    const { startServer } = await import("./server-C2NZM2RV.js");
+    const { startServer } = await import("./server-GXNAKM4H.js");
     await startServer(port);
     console.log(chalk.green(`  Server running at http://localhost:${port}`));
     console.log(chalk.gray("  Press Ctrl+C to stop\n"));
@@ -550,7 +550,7 @@ program.command("mcp").description("Run as MCP server (for Claude Code integrati
       taskHubTools,
       esvpTools,
       knowledgeTools
-    } = await import("./tools-VXU3JEQP.js");
+    } = await import("./tools-6BTUMR3G.js");
     mcpServer.registerTools([
       ...uiTools,
       ...projectTools,
@@ -597,7 +597,7 @@ program.command("export").description("Export project in various formats").argum
       const { join: pathJoin } = await import("path");
       const { getDatabase, projects, frames: framesTable, FRAMES_DIR, EXPORTS_DIR, PROJECTS_DIR } = await import("./db-5ECN3O7F.js");
       const { eq } = await import("drizzle-orm");
-      const { collectFrameImages, buildInfographicData, generateInfographicHtml } = await import("./infographic-GQAHEOAA.js");
+      const { buildInfographicData, generateInfographicHtml, resolveInfographicFrameInputs } = await import("./infographic-OSDIJM5M.js");
       const db = getDatabase();
       const allProjects = await db.select().from(projects);
       const project = allProjects.find((p) => p.id === projectId || p.id.startsWith(projectId) || p.name.toLowerCase().includes(projectId.toLowerCase()));
@@ -611,21 +611,27 @@ program.command("export").description("Export project in various formats").argum
       }
       console.log(chalk.green(`  \u2714 Found project: ${project.marketingTitle || project.name}`));
       const dbFrames = await db.select().from(framesTable).where(eq(framesTable.projectId, project.id)).orderBy(framesTable.frameNumber).limit(20);
-      let frameFiles;
-      let frameOcr;
-      if (dbFrames.length > 0) {
-        frameFiles = dbFrames.map((f) => f.imagePath);
-        frameOcr = dbFrames;
-      } else {
-        frameFiles = collectFrameImages(pathJoin(FRAMES_DIR, project.id), project.videoPath, PROJECTS_DIR, project.id);
-        frameOcr = frameFiles.map(() => ({ ocrText: null }));
+      const resolvedFrames = resolveInfographicFrameInputs(
+        dbFrames,
+        pathJoin(FRAMES_DIR, project.id),
+        project.videoPath,
+        PROJECTS_DIR,
+        project.id
+      );
+      console.log(
+        chalk.green(
+          `  \u2714 ${resolvedFrames.frameFiles.length} readable frames found` + (resolvedFrames.candidateCount > 0 ? ` (from ${resolvedFrames.candidateCount} candidates via ${resolvedFrames.source})` : "")
+        )
+      );
+      if (resolvedFrames.frameFiles.length === 0) {
+        console.log(chalk.red("  No readable frames found. Run analyzer first or refresh project screenshots."));
+        return;
       }
-      console.log(chalk.green(`  \u2714 ${frameFiles.length} frames found`));
-      if (frameFiles.length === 0) {
-        console.log(chalk.red("  No frames found. Run analyzer first."));
+      const data = buildInfographicData(project, resolvedFrames.frameFiles, resolvedFrames.frameOcr);
+      if (data.frames.length === 0) {
+        console.log(chalk.red("  Export failed: infographic payload did not produce embeddable frames."));
         return;
       }
-      const data = buildInfographicData(project, frameFiles, frameOcr);
       console.log(chalk.green(`  \u2714 ${project.aiSummary ? "AI analysis loaded" : "No analysis (basic labels)"}`));
       const slug = (project.marketingTitle || project.name || project.id).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 40);
       const outputPath = opts.output ? pathJoin(opts.output, `${slug}-infographic.html`) : pathJoin(EXPORTS_DIR, `${slug}-infographic.html`);

package/dist/export/infographic-template.html

@@ -6,128 +6,379 @@
 <title>__TITLE__</title>
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
-  :root { --accent: #6366f1; --bg: #0f0f17; --bg2: #16161f; --bg3: #1e1e2a; --text: #e4e4e7; --muted: #71717a; --ok: #22c55e; --warn: #eab308; }
-  body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; min-height: 100vh; overflow-x: hidden; }
-
-  /* Header */
-  .header { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,0.05); }
-  .header-left { display: flex; align-items: center; gap: 12px; }
-  .header-title { font-size: 16px; font-weight: 700; }
-  .header-platform { font-size: 10px; padding: 2px 8px; background: rgba(99,102,241,0.12); color: var(--accent); border-radius: 10px; }
-  .header-date { font-size: 11px; color: var(--muted); }
-
-  /* Step chips */
-  .chips { display: flex; gap: 4px; padding: 10px 24px; overflow-x: auto; scrollbar-width: none; }
+  :root {
+    --accent: #6366f1;
+    --bg: #0f0f17;
+    --bg2: #16161f;
+    --bg3: #1e1e2a;
+    --text: #e4e4e7;
+    --muted: #71717a;
+    --ok: #22c55e;
+    --warn: #eab308;
+    --header-h: 56px;
+    --chips-h: 48px;
+    --glass-bg: linear-gradient(180deg, rgba(22,22,31,0.82), rgba(22,22,31,0.62));
+    --glass-border: rgba(255,255,255,0.09);
+  }
+  body {
+    background: radial-gradient(circle at top, rgba(99,102,241,0.16), transparent 24%), var(--bg);
+    color: var(--text);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+    min-height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .viewer-shell {
+    display: grid;
+    min-height: 100vh;
+    grid-template-rows: auto auto 1fr auto;
+  }
+
+  /* ── Header ── */
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    min-height: var(--header-h);
+    padding: 10px 22px;
+    border-bottom: 1px solid var(--glass-border);
+    position: sticky;
+    top: 0;
+    z-index: 30;
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px) saturate(1.35);
+    -webkit-backdrop-filter: blur(20px) saturate(1.35);
+  }
+  .header-left, .header-right {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+  .header-title { font-size: 15px; font-weight: 700; }
+  .header-platform {
+    font-size: 10px;
+    padding: 2px 8px;
+    background: rgba(99,102,241,0.12);
+    color: #aeb2ff;
+    border-radius: 10px;
+  }
+  .header-date, .header-step { font-size: 11px; color: var(--muted); }
+
+  /* ── Chips ── */
+  .chips {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-height: var(--chips-h);
+    padding: 6px 20px 8px;
+    overflow-x: auto;
+    scrollbar-width: none;
+    position: sticky;
+    top: var(--header-h);
+    z-index: 25;
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px) saturate(1.35);
+    -webkit-backdrop-filter: blur(20px) saturate(1.35);
+    border-bottom: 1px solid rgba(255,255,255,0.04);
+  }
   .chips::-webkit-scrollbar { display: none; }
-  .chip { font-size: 10px; padding: 4px 12px; border-radius: 16px; background: var(--bg2); border: 1px solid rgba(255,255,255,0.06); cursor: pointer; white-space: nowrap; transition: all 0.25s; color: var(--muted); font-weight: 500; }
-  .chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
-  .chip:hover:not(.active) { border-color: rgba(255,255,255,0.15); }
-
-  /* Main layout */
-  .main { display: grid; grid-template-columns: 1fr 300px; height: calc(100vh - 100px); overflow: hidden; }
-  @media (max-width: 768px) { .main { grid-template-columns: 1fr; } .panel { border-left: none; border-top: 1px solid rgba(255,255,255,0.05); max-height: 200px; } }
-
-  /* Viewer */
-  .viewer { display: flex; align-items: center; justify-content: center; position: relative; padding: 20px; }
-  .device-area { position: relative; display: flex; align-items: center; }
-  .phone { width: 320px; background: #000; border-radius: 28px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,0.5); border: 1.5px solid rgba(255,255,255,0.06); position: relative; }
-  .phone img { width: 100%; display: block; transition: opacity 0.35s ease; }
-  .phone img.out { opacity: 0; position: absolute; top: 0; left: 0; }
-  .phone img.in { opacity: 1; position: relative; }
+  .chip {
+    white-space: nowrap;
+    font-size: 10px;
+    padding: 5px 12px;
+    border-radius: 999px;
+    background: var(--bg2);
+    border: 1px solid rgba(255,255,255,0.06);
+    color: var(--muted);
+    cursor: pointer;
+    transition: all 120ms ease;
+    font-weight: 500;
+    flex-shrink: 0;
+  }
+  .chip.active { background: var(--accent); color: #fff; border-color: transparent; }
 
-  /* Side annotations (appear when paused) */
-  .side-annots { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; opacity: 0; transition: opacity 0.35s; pointer-events: none; width: 160px; }
+  /* ── Main Layout ── */
+  .main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 340px;
+    min-height: 0;
+    align-items: start;
+  }
+
+  /* ── Viewer (device area) ── */
+  .viewer {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    position: relative;
+    padding: 24px 28px 200px;
+    min-height: calc(100vh - var(--header-h) - var(--chips-h));
+  }
+  .device-wrapper {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 12px;
+    width: 100%;
+    max-width: 740px;
+    margin: 0 auto;
+  }
+
+  /* ── Side Annotations ── */
+  .side-annots {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 160px;
+    flex-shrink: 0;
+    opacity: 0;
+    transition: opacity 200ms ease;
+    pointer-events: none;
+    padding-top: 20px;
+  }
   .side-annots.show { opacity: 1; pointer-events: auto; }
-  .side-annots.left { right: calc(100% + 16px); }
-  .side-annots.right { left: calc(100% + 16px); }
-  .side-annot { padding: 8px 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; position: relative; }
-  .side-annot::before { content: ''; position: absolute; top: 50%; width: 12px; height: 1px; background: rgba(255,255,255,0.15); }
-  .side-annots.left .side-annot::before { right: -13px; }
-  .side-annots.right .side-annot::before { left: -13px; }
+  .side-annot {
+    padding: 8px 10px;
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 10px;
+  }
   .side-annot-title { font-size: 10px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 5px; }
   .side-annot-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
-  .side-annot-desc { font-size: 9px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
-
-  /* Controls */
-  .controls { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); padding: 6px 14px; border-radius: 20px; }
-  .play-btn { width: 28px; height: 28px; border-radius: 50%; background: transparent; border: 1.5px solid rgba(255,255,255,0.3); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
-  .play-btn:hover { border-color: var(--accent); color: var(--accent); }
-  .dots { display: flex; gap: 5px; }
-  .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.15); cursor: pointer; transition: all 0.25s; }
-  .dot.active { background: var(--accent); width: 16px; border-radius: 3px; }
-  .status-text { font-size: 9px; color: rgba(255,255,255,0.35); }
-
-  /* Panel */
-  .panel { padding: 16px; border-left: 1px solid rgba(255,255,255,0.05); overflow-y: auto; background: var(--bg2); display: flex; flex-direction: column; gap: 16px; }
-  .panel-section { }
-  .panel-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); margin-bottom: 6px; }
-  .step-number { font-size: 11px; color: var(--accent); font-weight: 700; margin-bottom: 2px; }
-  .step-title { font-size: 14px; font-weight: 600; line-height: 1.3; }
-  .step-desc { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
-
-  /* Annotation cards in panel */
-  .annot-cards { display: flex; flex-direction: column; gap: 6px; }
-  .annot-card { padding: 8px 10px; background: var(--bg3); border-radius: 8px; border-left: 3px solid var(--accent); cursor: pointer; transition: all 0.2s; }
+  .side-annot-desc { font-size: 9px; line-height: 1.4; color: var(--muted); margin-top: 2px; }
+
+  /* ── Device frame ── */
+  .device-center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0;
+    flex: 1;
+    min-width: 0;
+    max-width: 380px;
+  }
+  .phone {
+    width: 100%;
+    max-width: 340px;
+    background: #000;
+    border-radius: 32px;
+    overflow: hidden;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
+    position: relative;
+  }
+  .phone img {
+    width: 100%;
+    display: block;
+    aspect-ratio: 9 / 19.5;
+    object-fit: cover;
+    object-position: top center;
+    background: #000;
+    transition: opacity 0.35s ease;
+  }
+  .phone img.out { opacity: 0; position: absolute; top: 0; left: 0; }
+  .phone img.in { opacity: 1; position: relative; }
+
+  /* ── Floating Play/Pause (Liquid Glass) ── */
+  .fab-controls {
+    position: fixed;
+    left: 16px;
+    bottom: 220px;
+    z-index: 40;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 8px;
+    border-radius: 20px;
+    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
+    border: 1px solid rgba(255,255,255,0.14);
+    backdrop-filter: blur(24px) saturate(1.4);
+    -webkit-backdrop-filter: blur(24px) saturate(1.4);
+    box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.1);
+  }
+  .fab-btn {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: rgba(99,102,241,0.2);
+    border: 1.5px solid rgba(255,255,255,0.18);
+    color: var(--text);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+  }
+  .fab-btn:hover { background: var(--accent); border-color: var(--accent); }
+  .fab-dots {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    align-items: center;
+  }
+  .fab-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: rgba(255,255,255,0.18);
+    cursor: pointer;
+    transition: all 0.25s;
+  }
+  .fab-dot.active { background: var(--accent); height: 14px; border-radius: 3px; }
+  .fab-status {
+    font-size: 8px;
+    color: rgba(255,255,255,0.45);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    writing-mode: vertical-lr;
+    text-orientation: mixed;
+    transform: rotate(180deg);
+  }
+
+  /* ── Right Panel ── */
+  .panel {
+    padding: 18px 16px 200px;
+    border-left: 1px solid rgba(255,255,255,0.05);
+    overflow-y: auto;
+    background: var(--bg2);
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    min-height: calc(100vh - var(--header-h) - var(--chips-h));
+    position: sticky;
+    top: calc(var(--header-h) + var(--chips-h));
+    max-height: calc(100vh - var(--header-h) - var(--chips-h));
+  }
+  .panel-section { display: grid; gap: 6px; }
+  .panel-label {
+    font-size: 9px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--muted);
+  }
+  .project-summary, .step-desc { font-size: 12px; color: var(--muted); line-height: 1.55; }
+  .step-number { font-size: 11px; color: #aeb2ff; font-weight: 700; }
+  .step-title { font-size: 15px; font-weight: 700; line-height: 1.25; }
+  .annot-cards { display: flex; flex-direction: column; gap: 8px; }
+  .annot-card {
+    padding: 8px 10px;
+    background: var(--bg3);
+    border-radius: 10px;
+    border-left: 3px solid var(--accent);
+    transition: all 0.2s;
+  }
   .annot-card:hover { background: rgba(99,102,241,0.08); }
   .annot-card-title { font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
   .annot-card-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
   .annot-card-desc { font-size: 10px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
-
-  .baseline-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 10px; border-radius: 12px; background: rgba(113,113,122,0.1); color: var(--muted); }
-  .baseline-badge.ok { background: rgba(34,197,94,0.1); color: var(--ok); }
-  .baseline-badge.warn { background: rgba(234,179,8,0.1); color: var(--warn); }
-  .bl-dot { width: 5px; height: 5px; border-radius: 50%; }
-
+  .baseline-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    width: fit-content;
+    font-size: 11px;
+    padding: 4px 10px;
+    border-radius: 999px;
+    background: rgba(113,113,122,0.1);
+    color: var(--muted);
+  }
+  .baseline-badge.ok { background: rgba(34,197,94,0.12); color: var(--ok); }
+  .baseline-badge.warn { background: rgba(234,179,8,0.12); color: var(--warn); }
+  .bl-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
   .footer { text-align: center; padding: 6px; font-size: 8px; color: rgba(255,255,255,0.12); }
 
-  /* Transitions */
-  @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
-  .fade-in { animation: fadeIn 0.3s ease forwards; }
+  /* ── Responsive ── */
+  @media (max-width: 980px) {
+    .main { grid-template-columns: 1fr; }
+    .panel {
+      border-left: none;
+      border-top: 1px solid rgba(255,255,255,0.05);
+      position: static;
+      max-height: none;
+      min-height: auto;
+      padding-bottom: 200px;
+    }
+    .viewer { padding: 20px 16px 40px; }
+    .side-annots { width: 130px; }
+    .fab-controls { left: 12px; bottom: 200px; }
+  }
+  @media (max-width: 720px) {
+    .viewer { padding: 16px 12px 40px; }
+    .phone { max-width: 280px; border-radius: 26px; }
+    .side-annots { display: none; }
+    .chips { top: var(--header-h); }
+    .panel { min-height: auto; padding-bottom: 200px; }
+    .device-wrapper { max-width: 320px; }
+    .fab-controls { left: 8px; bottom: 180px; padding: 8px 6px; border-radius: 16px; }
+    .fab-btn { width: 32px; height: 32px; }
+  }
+  @media (max-width: 480px) {
+    .header { padding: 8px 14px; }
+    .header-title { font-size: 13px; }
+    .chips { padding: 6px 14px; }
+    .phone { max-width: 240px; border-radius: 22px; }
+  }
 </style>
 </head>
 <body>
-<div class="header">
-  <div class="header-left">
-    <div class="header-title" id="title"></div>
-    <div class="header-platform" id="platform"></div>
-  </div>
-  <div class="header-date" id="date"></div>
-</div>
-<div class="chips" id="chips"></div>
-<div class="main">
-  <div class="viewer">
-    <div class="device-area" id="deviceArea" style="position: relative;">
-      <div class="side-annots left" id="annotsLeft"></div>
-      <div class="phone" id="phone"></div>
-      <div class="side-annots right" id="annotsRight"></div>
+<div class="viewer-shell">
+  <div class="header">
+    <div class="header-left">
+      <div class="header-title" id="title"></div>
+      <div class="header-platform" id="platform"></div>
     </div>
-    <div class="controls">
-      <button class="play-btn" id="playBtn">
-        <svg id="playIco" width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 21"/></svg>
-        <svg id="pauseIco" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="display:none"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
-      </button>
-      <div class="dots" id="dots"></div>
-      <div class="status-text" id="statusText">playing</div>
+    <div class="header-right">
+      <div class="header-step" id="headerStep"></div>
+      <div class="header-date" id="date"></div>
     </div>
   </div>
-  <div class="panel">
-    <div class="panel-section">
-      <div class="panel-label">Step</div>
-      <div class="step-number" id="stepNum"></div>
-      <div class="step-title" id="stepTitle"></div>
-      <div class="step-desc" id="stepDesc"></div>
-    </div>
-    <div class="panel-section">
-      <div class="panel-label">Annotations</div>
-      <div class="annot-cards" id="annotCards"></div>
+  <div class="chips" id="chips"></div>
+  <div class="main">
+    <div class="viewer">
+      <div class="device-wrapper">
+        <div class="side-annots left" id="annotsLeft"></div>
+        <div class="device-center">
+          <div class="phone" id="phone"></div>
+        </div>
+        <div class="side-annots right" id="annotsRight"></div>
+      </div>
     </div>
-    <div class="panel-section">
-      <div class="panel-label">Baseline</div>
-      <div class="baseline-badge" id="blBadge"><div class="bl-dot"></div><span></span></div>
+    <div class="panel">
+      <div class="panel-section">
+        <div class="panel-label">Project</div>
+        <div class="project-summary" id="projectSummary"></div>
+      </div>
+      <div class="panel-section">
+        <div class="panel-label">Step</div>
+        <div class="step-number" id="stepNum"></div>
+        <div class="step-title" id="stepTitle"></div>
+        <div class="step-desc" id="stepDesc"></div>
+      </div>
+      <div class="panel-section">
+        <div class="panel-label">Annotations</div>
+        <div class="annot-cards" id="annotCards"></div>
+      </div>
+      <div class="panel-section">
+        <div class="panel-label">Baseline</div>
+        <div class="baseline-badge" id="blBadge"><div class="bl-dot"></div><span></span></div>
+      </div>
     </div>
   </div>
+  <div class="footer">Generated by DiscoveryLab</div>
+</div>
+
+<!-- Floating Liquid Glass Controls -->
+<div class="fab-controls" id="fabControls">
+  <button class="fab-btn" id="playBtn" title="Play / Pause">
+    <svg id="playIco" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="display:none"><polygon points="7 3 21 12 7 21"/></svg>
+    <svg id="pauseIco" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
+  </button>
+  <div class="fab-dots" id="dots"></div>
+  <div class="fab-status" id="statusText">playing</div>
 </div>
-<div class="footer">Generated by DiscoveryLab</div>
 
 <script>
 const D = window.FLOW_DATA || { name: 'Flow', frames: [] };
@@ -137,8 +388,8 @@ let cur = 0, playing = true, timer = null;
 document.getElementById('title').textContent = D.name || 'App Flow';
 document.getElementById('platform').textContent = D.platform || '';
 document.getElementById('date').textContent = D.recorded_at ? new Date(D.recorded_at).toLocaleDateString() : '';
+document.getElementById('projectSummary').textContent = D.overview || 'Captured flow ready for review inside Claude Desktop.';
 
-// Create images
 const phone = document.getElementById('phone');
 F.forEach((f, i) => {
   const img = document.createElement('img');
@@ -148,57 +399,63 @@ F.forEach((f, i) => {
   phone.appendChild(img);
 });
 
-// Chips
 const chips = document.getElementById('chips');
 F.forEach((f, i) => {
   const c = document.createElement('div');
-  c.className = `chip ${i===0?'active':''}`;
-  c.textContent = `${i+1}. ${f.step_name}`;
+  c.className = 'chip' + (i === 0 ? ' active' : '');
+  c.textContent = (i + 1) + '. ' + f.step_name;
   c.onclick = () => { go(i); stop(); };
   chips.appendChild(c);
 });
 
-// Dots
 const dots = document.getElementById('dots');
 F.forEach((_, i) => {
   const d = document.createElement('div');
-  d.className = `dot ${i===0?'active':''}`;
+  d.className = 'fab-dot' + (i === 0 ? ' active' : '');
   d.onclick = () => { go(i); stop(); };
   dots.appendChild(d);
 });
 
 function go(i) {
   cur = i;
-  phone.querySelectorAll('img').forEach((img, j) => { img.className = j===i?'in':'out'; });
-  chips.querySelectorAll('.chip').forEach((c, j) => c.classList.toggle('active', j===i));
-  dots.querySelectorAll('.dot').forEach((d, j) => d.classList.toggle('active', j===i));
+  phone.querySelectorAll('img').forEach((img, j) => { img.className = j === i ? 'in' : 'out'; });
+  chips.querySelectorAll('.chip').forEach((c, j) => c.classList.toggle('active', j === i));
+  dots.querySelectorAll('.fab-dot').forEach((d, j) => d.classList.toggle('active', j === i));
+  // Auto-scroll active chip into view
+  const activeChip = chips.querySelector('.chip.active');
+  if (activeChip) activeChip.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
   updatePanel();
   updateAnnotations();
 }
 
 function updatePanel() {
   const f = F[cur]; if (!f) return;
-  document.getElementById('stepNum').textContent = `${cur+1} of ${F.length}`;
+  document.getElementById('stepNum').textContent = (cur + 1) + ' of ' + F.length;
   document.getElementById('stepTitle').textContent = f.step_name;
   document.getElementById('stepDesc').textContent = f.description;
+  document.getElementById('headerStep').textContent = 'Step ' + (cur + 1) + ' / ' + F.length;
 
-  // Annotation cards
   const cards = document.getElementById('annotCards');
   cards.innerHTML = '';
   (f.hotspots || []).forEach(h => {
     const card = document.createElement('div');
-    card.className = 'annot-card fade-in';
+    card.className = 'annot-card';
     card.style.borderLeftColor = h.color;
-    card.innerHTML = `<div class="annot-card-title"><div class="annot-card-dot" style="background:${h.color}"></div>${h.title}</div><div class="annot-card-desc">${h.description}</div>`;
+    card.innerHTML = '<div class="annot-card-title"><div class="annot-card-dot" style="background:' + h.color + '"></div>' + escHtml(h.title) + '</div><div class="annot-card-desc">' + escHtml(h.description) + '</div>';
     cards.appendChild(card);
   });
 
-  // Baseline
   const bl = document.getElementById('blBadge');
   const s = f.baseline_status || 'not_validated';
-  bl.className = `baseline-badge ${s==='ok'?'ok':s==='changed'?'warn':''}`;
-  bl.querySelector('.bl-dot').style.background = s==='ok'?'var(--ok)':s==='changed'?'var(--warn)':'var(--muted)';
-  bl.querySelector('span').textContent = s==='ok'?'Validated':s==='changed'?'Changed':'No baseline';
+  bl.className = 'baseline-badge ' + (s === 'ok' ? 'ok' : s === 'changed' ? 'warn' : '');
+  bl.querySelector('.bl-dot').style.background = s === 'ok' ? 'var(--ok)' : s === 'changed' ? 'var(--warn)' : 'var(--muted)';
+  bl.querySelector('span').textContent = s === 'ok' ? 'Validated' : s === 'changed' ? 'Changed' : 'No baseline';
+}
+
+function escHtml(s) {
+  const el = document.createElement('span');
+  el.textContent = s;
+  return el.innerHTML;
 }
 
 function updateAnnotations() {
@@ -213,16 +470,21 @@ function updateAnnotations() {
   left.classList.add('show'); right.classList.add('show');
 
   const f = F[cur]; if (!f?.hotspots?.length) return;
-
   f.hotspots.forEach((h, j) => {
     const container = j % 2 === 0 ? left : right;
     const el = document.createElement('div');
-    el.className = 'side-annot fade-in';
-    el.style.animationDelay = (j * 0.1) + 's';
-    el.innerHTML = `
-      <div class="side-annot-title"><div class="side-annot-dot" style="background:${h.color}"></div>${h.label}</div>
-      ${h.description !== h.label ? `<div class="side-annot-desc">${h.description.slice(0, 60)}</div>` : ''}
-    `;
+    el.className = 'side-annot';
+    const titleDiv = document.createElement('div');
+    titleDiv.className = 'side-annot-title';
+    titleDiv.innerHTML = '<div class="side-annot-dot" style="background:' + h.color + '"></div>';
+    titleDiv.appendChild(document.createTextNode(h.label));
+    el.appendChild(titleDiv);
+    if (h.description !== h.label) {
+      const descDiv = document.createElement('div');
+      descDiv.className = 'side-annot-desc';
+      descDiv.textContent = h.description.slice(0, 72);
+      el.appendChild(descDiv);
+    }
     container.appendChild(el);
   });
 }
@@ -234,11 +496,14 @@ function play() {
   document.getElementById('statusText').textContent = 'playing';
   document.getElementById('annotsLeft').classList.remove('show');
   document.getElementById('annotsRight').classList.remove('show');
-  timer = setInterval(() => { cur = (cur+1)%F.length; go(cur); }, 2200);
+  clearInterval(timer);
+  if (F.length < 2) return;
+  timer = setInterval(() => { cur = (cur + 1) % F.length; go(cur); }, 2200);
 }
 
 function stop() {
-  playing = false; clearInterval(timer);
+  playing = false;
+  clearInterval(timer);
   document.getElementById('playIco').style.display = '';
   document.getElementById('pauseIco').style.display = 'none';
   document.getElementById('statusText').textContent = 'paused';
@@ -246,7 +511,6 @@ function stop() {
 }
 
 document.getElementById('playBtn').onclick = () => playing ? stop() : play();
-
 updatePanel();
 play();
 </script>

package/dist/index.html

@@ -22505,10 +22505,13 @@ appId: ${platform === 'ios' ? 'com.apple.Preferences' : 'com.android.settings'}
                     const sizeKb = ((data.size || 0) / 1024).toFixed(1);
                     showToast(`Infographic exported (${sizeKb}KB, ${data.frameCount} frames)`, 'success');
                 } else {
-                    showToast(data.error || 'Export failed', 'error');
+                    const debugHint = data.debug && Number.isFinite(data.debug.frameCandidates) && Number.isFinite(data.debug.validFrames)
+                        ? ` (${data.debug.validFrames}/${data.debug.frameCandidates} readable frames${data.debug.source ? `, ${data.debug.source}` : ''})`
+                        : '';
+                    showToast((data.error || 'Export failed') + debugHint, 'error');
                 }
             } catch (err) {
-                showToast('Export failed', 'error');
+                showToast(err?.message || 'Export failed', 'error');
             }
         }
 

package/dist/index.js

@@ -2,7 +2,7 @@
 import {
   startServer,
   stopServer
-} from "./chunk-V6RREMYD.js";
+} from "./chunk-XDUFCPOC.js";
 import {
   analyzeTools,
   canvasTools,
@@ -16,7 +16,7 @@ import {
   templateTools,
   testingTools,
   uiTools
-} from "./chunk-Q7Q3A2ZI.js";
+} from "./chunk-YFF3M76J.js";
 import "./chunk-34GGYFXX.js";
 import "./chunk-PMCXEA7J.js";
 import {

package/dist/{infographic-GQAHEOAA.js → infographic-OSDIJM5M.js}

@@ -18,18 +18,22 @@ function findTemplate() {
   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")}`;
+  try {
+    if (!existsSync(imagePath) || !statSync(imagePath).isFile()) 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")}`;
+  } catch {
+    return "";
+  }
 }
 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();
@@ -51,7 +55,92 @@ function collectFrameImages(framesDir, videoPath, projectsDir, projectId) {
   }
   return [];
 }
+function validateFrameInputs(frameFiles, frameOcr) {
+  const validFrameFiles = [];
+  const validFrameOcr = [];
+  const dataUrls = [];
+  const invalidFrames = [];
+  frameFiles.forEach((filePath, index) => {
+    if (!filePath || !existsSync(filePath)) {
+      invalidFrames.push({ path: filePath || `frame-${index + 1}`, reason: "missing" });
+      return;
+    }
+    let stats;
+    try {
+      stats = statSync(filePath);
+    } catch {
+      invalidFrames.push({ path: filePath, reason: "unreadable" });
+      return;
+    }
+    if (!stats.isFile()) {
+      invalidFrames.push({ path: filePath, reason: "not_file" });
+      return;
+    }
+    const dataUrl = imageToBase64(filePath);
+    if (!dataUrl) {
+      invalidFrames.push({ path: filePath, reason: "unreadable" });
+      return;
+    }
+    validFrameFiles.push(filePath);
+    validFrameOcr.push(frameOcr[index] || { ocrText: null });
+    dataUrls.push(dataUrl);
+  });
+  return {
+    frameFiles: validFrameFiles,
+    frameOcr: validFrameOcr,
+    dataUrls,
+    invalidFrames
+  };
+}
+function resolveInfographicFrameInputs(dbFrames, framesDir, videoPath, projectsDir, projectId) {
+  if (dbFrames.length > 0) {
+    const dbValidation = validateFrameInputs(
+      dbFrames.map((frame) => frame.imagePath),
+      dbFrames.map((frame) => ({ ocrText: frame.ocrText ?? null }))
+    );
+    if (dbValidation.frameFiles.length > 0) {
+      return {
+        ...dbValidation,
+        source: "db",
+        candidateCount: dbFrames.length
+      };
+    }
+    const fallbackFrameFiles2 = collectFrameImages(framesDir, videoPath, projectsDir, projectId);
+    const fallbackValidation2 = validateFrameInputs(
+      fallbackFrameFiles2,
+      fallbackFrameFiles2.map(() => ({ ocrText: null }))
+    );
+    if (fallbackValidation2.frameFiles.length > 0) {
+      return {
+        ...fallbackValidation2,
+        invalidFrames: [...dbValidation.invalidFrames, ...fallbackValidation2.invalidFrames],
+        source: "filesystem",
+        candidateCount: dbFrames.length + fallbackFrameFiles2.length
+      };
+    }
+    return {
+      ...fallbackValidation2,
+      invalidFrames: [...dbValidation.invalidFrames, ...fallbackValidation2.invalidFrames],
+      source: "none",
+      candidateCount: dbFrames.length + fallbackFrameFiles2.length
+    };
+  }
+  const fallbackFrameFiles = collectFrameImages(framesDir, videoPath, projectsDir, projectId);
+  const fallbackValidation = validateFrameInputs(
+    fallbackFrameFiles,
+    fallbackFrameFiles.map(() => ({ ocrText: null }))
+  );
+  return {
+    ...fallbackValidation,
+    source: fallbackValidation.frameFiles.length > 0 ? "filesystem" : "none",
+    candidateCount: fallbackFrameFiles.length
+  };
+}
 function buildInfographicData(project, frameFiles, frameOcr, annotations) {
+  const validatedFrames = validateFrameInputs(frameFiles, frameOcr);
+  const usableFrameFiles = validatedFrames.frameFiles;
+  const usableFrameOcr = validatedFrames.frameOcr;
+  const dataUrls = validatedFrames.dataUrls;
   let flowSteps = [];
   let uiElements = [];
   if (project.aiSummary) {
@@ -64,7 +153,18 @@ function buildInfographicData(project, frameFiles, frameOcr, annotations) {
       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)));
+  let overview = "";
+  if (project.aiSummary) {
+    const overviewMatch = project.aiSummary.match(/## (?:App Overview|Page \/ App Overview|Overview|Summary)\n([\s\S]*?)(?=\n##|\n$|$)/);
+    if (overviewMatch) {
+      const overviewBody = overviewMatch[1].split(/\n\s*\n/).map((chunk) => chunk.trim()).filter(Boolean)[0] || overviewMatch[1];
+      overview = stripMarkdown(overviewBody).slice(0, 240);
+    }
+  }
+  if (!overview && project.marketingDescription) {
+    overview = stripMarkdown(project.marketingDescription).slice(0, 240);
+  }
+  const elementsPerFrame = Math.max(1, Math.ceil(uiElements.length / Math.max(usableFrameFiles.length, 1)));
   const hotspotColors = ["#818CF8", "#34D399", "#F59E0B", "#EC4899", "#06B6D4", "#8B5CF6"];
   const hotspotPositions = [
     { x: 50, y: 8 },
@@ -80,10 +180,10 @@ function buildInfographicData(project, frameFiles, frameOcr, annotations) {
     { x: 15, y: 70 }
     // bottom left
   ];
-  const frames = frameFiles.map((filePath, i) => {
+  const frames = usableFrameFiles.map((filePath, i) => {
     const rawStepName = annotations?.[i]?.label || flowSteps[i] || `Step ${i + 1}`;
     const stepName = stripMarkdown(rawStepName);
-    const ocr = frameOcr[i]?.ocrText || "";
+    const ocr = usableFrameOcr[i]?.ocrText || "";
     const rawDesc = flowSteps[i] || ocr.slice(0, 100) || `Screen ${i + 1}`;
     const description = stripMarkdown(rawDesc);
     const hotspots = [];
@@ -121,7 +221,7 @@ function buildInfographicData(project, frameFiles, frameOcr, annotations) {
       id: `frame-${i}`,
       step_name: stepName,
       description,
-      base64: imageToBase64(filePath),
+      base64: dataUrls[i] || imageToBase64(filePath),
       baseline_status: "not_validated",
       hotspots
     };
@@ -130,6 +230,7 @@ function buildInfographicData(project, frameFiles, frameOcr, annotations) {
     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(),
+    overview,
     frames
   };
 }
@@ -179,5 +280,6 @@ export {
   buildInfographicData,
   collectFrameImages,
   generateInfographicHtml,
-  generateInfographicHtmlString
+  generateInfographicHtmlString,
+  resolveInfographicFrameInputs
 };

package/dist/{server-C2NZM2RV.js → server-GXNAKM4H.js}

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

package/dist/{tools-VXU3JEQP.js → tools-6BTUMR3G.js}

@@ -107,7 +107,7 @@ import {
   uiStatusTool,
   uiTools,
   videoInfoTool
-} from "./chunk-Q7Q3A2ZI.js";
+} from "./chunk-YFF3M76J.js";
 import "./chunk-34GGYFXX.js";
 import "./chunk-PMCXEA7J.js";
 import {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veolab/discoverylab",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "description": "AI-powered app testing & evidence generator - Claude Code Plugin",
   "type": "module",
   "main": "dist/index.js",
@@ -70,7 +70,7 @@
   "claude-plugin": {
     "name": "DiscoveryLab",
     "description": "AI-powered app testing & evidence generator",
-    "version": "1.6.5",
+    "version": "1.6.6",
     "tools": [
       "dlab.capture.screen",
       "dlab.capture.emulator",