@veolab/discoverylab 1.4.4 → 1.6.5

package/dist/cli.js

@@ -11,6 +11,7 @@ import "./chunk-R5U7XKVJ.js";
 import { Command } from "commander";
 import chalk from "chalk";
 import open from "open";
+import { fileURLToPath } from "url";
 var program = new Command();
 var binName = process.argv[1]?.replace(/.*[\\/]/, "").replace(/\.[^.]+$/, "") === "applab" ? "applab" : "discoverylab";
 program.name(binName).description("AI-powered app testing & evidence generator - Claude Code Plugin").version(APP_VERSION);
@@ -389,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-QFNKZCOJ.js");
+    const { startServer } = await import("./server-C2NZM2RV.js");
     await startServer(port);
     console.log(chalk.green(`  Server running at http://localhost:${port}`));
     console.log(chalk.gray("  Press Ctrl+C to stop\n"));
@@ -404,7 +405,7 @@ program.command("serve").alias("server").description("Start the DiscoveryLab web
 program.command("setup").description("Check and configure DiscoveryLab dependencies").action(async () => {
   console.log(chalk.cyan("\n  DiscoveryLab Setup\n"));
   try {
-    const { setupStatusTool } = await import("./setup-6JJYKKBS.js");
+    const { setupStatusTool } = await import("./setup-SMN7FJNZ.js");
     const result = await setupStatusTool.handler({});
     if (result.isError) {
       console.error(chalk.red("  Setup check failed"));
@@ -454,41 +455,88 @@ program.command("init").description("Initialize DiscoveryLab data directories").
     process.exit(1);
   }
 });
-program.command("install").description("Install DiscoveryLab as Claude Code MCP server").action(async () => {
-  const { homedir } = await import("os");
-  const { existsSync, readFileSync, writeFileSync } = await import("fs");
-  const { join } = await import("path");
-  const claudeConfigPath = join(homedir(), ".claude.json");
+program.command("install").description("Install DiscoveryLab as MCP server for Claude Code and/or Claude Desktop").option("--target <target>", "Installation target: code, desktop, all (default: auto-detect)", "").action(async (opts) => {
+  const { homedir, platform } = await import("os");
+  const { existsSync, readFileSync, writeFileSync, mkdirSync } = await import("fs");
+  const { join, dirname } = await import("path");
+  const home = homedir();
+  const localMcpEntrypoint = fileURLToPath(new URL("./index.js", import.meta.url));
+  const mcpEntry = existsSync(localMcpEntrypoint) ? {
+    command: process.execPath,
+    args: [localMcpEntrypoint]
+  } : {
+    command: "npx",
+    args: ["-y", "@veolab/discoverylab@latest", "mcp"]
+  };
+  const targets = {
+    code: {
+      name: "Claude Code",
+      path: join(home, ".claude.json"),
+      restart: "Restart Claude Code to activate."
+    },
+    desktop: {
+      name: "Claude Desktop",
+      path: platform() === "win32" ? join(process.env.APPDATA || join(home, "AppData", "Roaming"), "Claude", "claude_desktop_config.json") : join(home, "Library", "Application Support", "Claude", "claude_desktop_config.json"),
+      restart: "Restart Claude Desktop to activate."
+    }
+  };
+  let selectedTargets = [];
+  const target = opts.target?.toLowerCase() || "";
+  if (target === "code") {
+    selectedTargets = ["code"];
+  } else if (target === "desktop") {
+    selectedTargets = ["desktop"];
+  } else if (target === "all") {
+    selectedTargets = ["code", "desktop"];
+  } else {
+    selectedTargets = ["code"];
+    const desktopDir = dirname(targets.desktop.path);
+    if (existsSync(desktopDir)) {
+      selectedTargets.push("desktop");
+    }
+  }
   console.log(chalk.cyan("\n  Installing DiscoveryLab MCP...\n"));
-  try {
-    let config = {};
-    if (existsSync(claudeConfigPath)) {
-      const content = readFileSync(claudeConfigPath, "utf-8");
-      config = JSON.parse(content);
+  let installed = 0;
+  for (const key of selectedTargets) {
+    const t = targets[key];
+    try {
+      const dir = dirname(t.path);
+      if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
+      let config = {};
+      if (existsSync(t.path)) {
+        const content = readFileSync(t.path, "utf-8");
+        try {
+          config = JSON.parse(content);
+        } catch {
+          config = {};
+        }
+      }
+      if (!config.mcpServers) config.mcpServers = {};
+      config.mcpServers.discoverylab = mcpEntry;
+      writeFileSync(t.path, JSON.stringify(config, null, 2));
+      console.log(chalk.green(`  \u2713 ${t.name} configured`));
+      console.log(chalk.gray(`    ${t.path}`));
+      installed++;
+    } catch (error) {
+      console.log(chalk.yellow(`  \u2717 ${t.name} skipped: ${error instanceof Error ? error.message : String(error)}`));
     }
-    if (!config.mcpServers) {
-      config.mcpServers = {};
+  }
+  console.log();
+  if (installed > 0) {
+    for (const key of selectedTargets) {
+      console.log(chalk.white(`  ${targets[key].restart}`));
     }
-    config.mcpServers.discoverylab = {
-      command: "npx",
-      args: ["-y", "@veolab/discoverylab@latest", "mcp"]
-    };
-    writeFileSync(claudeConfigPath, JSON.stringify(config, null, 2));
-    console.log(chalk.green("  \u2713 Added to ~/.claude.json"));
-    console.log();
-    console.log(chalk.white("  Restart Claude Code to activate."));
     console.log(chalk.gray("  Or run: discoverylab serve"));
-    console.log();
-  } catch (error) {
-    console.error(chalk.red(`  Failed to install: ${error}`));
-    process.exit(1);
+  } else {
+    console.log(chalk.red("  No targets configured."));
   }
+  console.log();
 });
 program.command("mcp").description("Run as MCP server (for Claude Code integration)").action(async () => {
   try {
     const { getDatabase } = await import("./db-5ECN3O7F.js");
     getDatabase();
-    const { mcpServer } = await import("./server-OVOACIOJ.js");
+    const { mcpServer } = await import("./server-WN6DCCUA.js");
     const {
       uiTools,
       projectTools,
@@ -502,7 +550,7 @@ program.command("mcp").description("Run as MCP server (for Claude Code integrati
       taskHubTools,
       esvpTools,
       knowledgeTools
-    } = await import("./tools-Q7OZO732.js");
+    } = await import("./tools-VXU3JEQP.js");
     mcpServer.registerTools([
       ...uiTools,
       ...projectTools,
@@ -540,6 +588,94 @@ program.command("info").description("Show version and configuration info").actio
     console.log();
   }
 });
+program.command("export").description("Export project in various formats").argument("<project-id>", "Project ID or slug").option("--format <format>", "Export format (infographic, applab, esvp)", "infographic").option("--output <path>", "Custom output path").option("--open", "Open file after generation").option("--compress", "Force image compression").option("--no-baseline", "Omit baseline info").action(async (projectId, opts) => {
+  try {
+    if (opts.format === "infographic") {
+      console.log(chalk.cyan(`
+  Exporting infographic for: ${projectId}
+`));
+      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 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()));
+      if (!project) {
+        console.log(chalk.red(`  Project not found: ${projectId}`));
+        console.log(chalk.gray("  Available projects:"));
+        for (const p of allProjects.slice(0, 10)) {
+          console.log(chalk.gray(`    ${p.id.slice(0, 12)} - ${p.marketingTitle || p.name}`));
+        }
+        return;
+      }
+      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 }));
+      }
+      console.log(chalk.green(`  \u2714 ${frameFiles.length} frames found`));
+      if (frameFiles.length === 0) {
+        console.log(chalk.red("  No frames found. Run analyzer first."));
+        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`);
+      const result = generateInfographicHtml(data, outputPath);
+      if (result.success) {
+        const sizeKb = ((result.size || 0) / 1024).toFixed(1);
+        console.log(chalk.green(`  \u2714 Exported: ${result.outputPath} (${sizeKb}KB, ${result.frameCount} frames)`));
+        if (opts.open) {
+          const { exec } = await import("child_process");
+          exec(`open "${result.outputPath}"`);
+        }
+      } else {
+        console.log(chalk.red(`  Export failed: ${result.error}`));
+      }
+    } else {
+      console.log(chalk.yellow(`  Format "${opts.format}" - use the web UI for applab/esvp exports.`));
+    }
+  } catch (error) {
+    console.log(chalk.red(`  Export failed: ${error instanceof Error ? error.message : String(error)}`));
+  }
+});
+program.command("import").description("Import a shared .applab project bundle").argument("<file>", "Path to .applab file").action(async (file) => {
+  try {
+    const { resolve } = await import("path");
+    const filePath = resolve(file);
+    console.log(chalk.cyan(`
+  Importing: ${filePath}
+`));
+    const { getDatabase, projects, frames: framesTable, DATA_DIR, FRAMES_DIR, PROJECTS_DIR } = await import("./db-5ECN3O7F.js");
+    const { importApplabBundle } = await import("./import-W2JEW254.js");
+    const db = getDatabase();
+    const result = await importApplabBundle(filePath, db, { projects, frames: framesTable }, {
+      dataDir: DATA_DIR,
+      framesDir: FRAMES_DIR,
+      projectsDir: PROJECTS_DIR
+    });
+    if (result.success) {
+      console.log(chalk.green(`  \u2714 Imported: ${result.projectName}`));
+      console.log(chalk.green(`  \u2714 ${result.frameCount} frames`));
+      console.log(chalk.gray(`  ID: ${result.projectId}
+`));
+    } else {
+      console.log(chalk.red(`  Import failed: ${result.error}
+`));
+    }
+  } catch (error) {
+    console.log(chalk.red(`  Import failed: ${error instanceof Error ? error.message : String(error)}
+`));
+  }
+});
 program.parse();
 if (!process.argv.slice(2).length) {
   program.outputHelp();

package/dist/export/infographic-template.html

@@ -0,0 +1,254 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<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; }
+  .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; }
+
+  /* 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; }
+  .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-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; }
+  .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%; }
+
+  .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; }
+</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>
+    <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>
+  </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>
+    <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>
+
+<script>
+const D = window.FLOW_DATA || { name: 'Flow', frames: [] };
+const F = D.frames || [];
+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() : '';
+
+// Create images
+const phone = document.getElementById('phone');
+F.forEach((f, i) => {
+  const img = document.createElement('img');
+  img.src = f.base64;
+  img.className = i === 0 ? 'in' : 'out';
+  img.dataset.i = 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.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.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));
+  updatePanel();
+  updateAnnotations();
+}
+
+function updatePanel() {
+  const f = F[cur]; if (!f) return;
+  document.getElementById('stepNum').textContent = `${cur+1} of ${F.length}`;
+  document.getElementById('stepTitle').textContent = f.step_name;
+  document.getElementById('stepDesc').textContent = f.description;
+
+  // 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.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>`;
+    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';
+}
+
+function updateAnnotations() {
+  const left = document.getElementById('annotsLeft');
+  const right = document.getElementById('annotsRight');
+  left.innerHTML = ''; right.innerHTML = '';
+
+  if (playing) {
+    left.classList.remove('show'); right.classList.remove('show');
+    return;
+  }
+  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>` : ''}
+    `;
+    container.appendChild(el);
+  });
+}
+
+function play() {
+  playing = true;
+  document.getElementById('playIco').style.display = 'none';
+  document.getElementById('pauseIco').style.display = '';
+  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);
+}
+
+function stop() {
+  playing = false; clearInterval(timer);
+  document.getElementById('playIco').style.display = '';
+  document.getElementById('pauseIco').style.display = 'none';
+  document.getElementById('statusText').textContent = 'paused';
+  updateAnnotations();
+}
+
+document.getElementById('playBtn').onclick = () => playing ? stop() : play();
+
+updatePanel();
+play();
+</script>
+</body>
+</html>

package/dist/import-W2JEW254.js

@@ -0,0 +1,180 @@
+import "./chunk-R5U7XKVJ.js";
+
+// src/core/export/import.ts
+import { existsSync, mkdirSync, readFileSync, cpSync, rmSync, readdirSync, statSync } from "fs";
+import { join, basename } from "path";
+import { execSync } from "child_process";
+import { randomUUID } from "crypto";
+function extractZip(zipPath, targetDir) {
+  mkdirSync(targetDir, { recursive: true });
+  if (process.platform === "darwin") {
+    try {
+      execSync(`ditto -xk "${zipPath}" "${targetDir}"`, { stdio: "pipe" });
+      return;
+    } catch {
+    }
+  }
+  execSync(`unzip -qo "${zipPath}" -d "${targetDir}"`, { stdio: "pipe" });
+}
+function findBundleRoot(extractDir) {
+  const entries = readdirSync(extractDir);
+  if (entries.length === 1) {
+    const candidate = join(extractDir, entries[0]);
+    if (statSync(candidate).isDirectory()) return candidate;
+  }
+  if (entries.includes("manifest.json")) return extractDir;
+  for (const entry of entries) {
+    const dir = join(extractDir, entry);
+    if (statSync(dir).isDirectory() && existsSync(join(dir, "manifest.json"))) {
+      return dir;
+    }
+  }
+  return extractDir;
+}
+async function importApplabBundle(zipPath, db, schema, paths) {
+  if (!existsSync(zipPath)) {
+    return { success: false, error: `File not found: ${zipPath}` };
+  }
+  const tempDir = join(paths.dataDir, ".import-temp-" + Date.now());
+  try {
+    extractZip(zipPath, tempDir);
+    const bundleRoot = findBundleRoot(tempDir);
+    const manifestPath = join(bundleRoot, "manifest.json");
+    if (!existsSync(manifestPath)) {
+      return { success: false, error: "Invalid .applab file: manifest.json not found" };
+    }
+    const manifest = JSON.parse(readFileSync(manifestPath, "utf-8"));
+    let projectData = {};
+    const projectJsonPath = join(bundleRoot, "metadata", "project.json");
+    if (existsSync(projectJsonPath)) {
+      projectData = JSON.parse(readFileSync(projectJsonPath, "utf-8"));
+    }
+    const projectId = manifest.id || projectData.id || randomUUID();
+    const projectName = manifest.name || projectData.name || basename(zipPath, ".applab");
+    const { eq } = await import("drizzle-orm");
+    const existing = await db.select().from(schema.projects).where(eq(schema.projects.id, projectId)).limit(1);
+    if (existing.length > 0) {
+      return { success: false, error: `Project already exists: ${projectName} (${projectId}). Delete it first to re-import.` };
+    }
+    let frameCount = 0;
+    const framesSourceDir = join(bundleRoot, "frames");
+    const framesTargetDir = join(paths.framesDir, projectId);
+    if (existsSync(framesSourceDir)) {
+      mkdirSync(framesTargetDir, { recursive: true });
+      cpSync(framesSourceDir, framesTargetDir, { recursive: true });
+      frameCount = readdirSync(framesTargetDir).filter((f) => /\.(png|jpg|jpeg|webp|gif)$/i.test(f)).length;
+    }
+    const projectTargetDir = join(paths.projectsDir, projectId);
+    mkdirSync(projectTargetDir, { recursive: true });
+    const mediaDir = join(bundleRoot, "media");
+    if (existsSync(mediaDir)) {
+      cpSync(mediaDir, projectTargetDir, { recursive: true });
+    }
+    const recordingDir = join(bundleRoot, "recording");
+    if (existsSync(recordingDir)) {
+      cpSync(recordingDir, projectTargetDir, { recursive: true });
+    }
+    let aiSummary = null;
+    let ocrText = null;
+    const aiPath = join(bundleRoot, "analysis", "app-intelligence.md");
+    const ocrPath = join(bundleRoot, "analysis", "ocr.txt");
+    if (existsSync(aiPath)) aiSummary = readFileSync(aiPath, "utf-8");
+    if (existsSync(ocrPath)) ocrText = readFileSync(ocrPath, "utf-8");
+    let taskHubLinks = null;
+    const linksPath = join(bundleRoot, "taskhub", "links.json");
+    if (existsSync(linksPath)) {
+      taskHubLinks = readFileSync(linksPath, "utf-8");
+    }
+    let videoPath = null;
+    const videoExts = [".mp4", ".mov", ".webm"];
+    for (const ext of videoExts) {
+      const files = readdirSync(projectTargetDir).filter((f) => f.endsWith(ext));
+      if (files.length > 0) {
+        videoPath = join(projectTargetDir, files[0]);
+        break;
+      }
+    }
+    if (!videoPath) videoPath = projectTargetDir;
+    let thumbnailPath = null;
+    if (frameCount > 0) {
+      const firstFrame = readdirSync(framesTargetDir).filter((f) => /\.(png|jpg|jpeg|webp)$/i.test(f)).sort()[0];
+      if (firstFrame) thumbnailPath = join(framesTargetDir, firstFrame);
+    }
+    const now = /* @__PURE__ */ new Date();
+    await db.insert(schema.projects).values({
+      id: projectId,
+      name: projectName,
+      marketingTitle: projectData.marketingTitle || projectName,
+      marketingDescription: projectData.marketingDescription || null,
+      videoPath,
+      thumbnailPath,
+      platform: manifest.platform || projectData.platform || null,
+      aiSummary,
+      ocrText,
+      ocrEngine: projectData.ocrEngine || null,
+      ocrConfidence: projectData.ocrConfidence || null,
+      frameCount,
+      duration: projectData.duration || null,
+      manualNotes: projectData.manualNotes || null,
+      tags: projectData.tags || null,
+      linkedTicket: projectData.linkedTicket || null,
+      linkedJiraUrl: projectData.linkedJiraUrl || null,
+      linkedNotionUrl: projectData.linkedNotionUrl || null,
+      linkedFigmaUrl: projectData.linkedFigmaUrl || null,
+      taskHubLinks,
+      taskRequirements: projectData.taskRequirements || null,
+      taskTestMap: projectData.taskTestMap || null,
+      status: aiSummary ? "analyzed" : "draft",
+      createdAt: projectData.createdAt ? new Date(projectData.createdAt) : now,
+      updatedAt: now
+    });
+    if (frameCount > 0) {
+      const frameFiles = readdirSync(framesTargetDir).filter((f) => /\.(png|jpg|jpeg|webp|gif)$/i.test(f)).sort();
+      let frameAnalysis = {};
+      const framesJsonPath = join(bundleRoot, "analysis", "frames.json");
+      if (existsSync(framesJsonPath)) {
+        try {
+          frameAnalysis = JSON.parse(readFileSync(framesJsonPath, "utf-8"));
+        } catch {
+        }
+      }
+      for (let i = 0; i < frameFiles.length; i++) {
+        const frameId = `${projectId}-frame-${i}`;
+        const framePath = join(framesTargetDir, frameFiles[i]);
+        const frameOcr = frameAnalysis[`frame-${i}`]?.ocrText || null;
+        await db.insert(schema.frames).values({
+          id: frameId,
+          projectId,
+          frameNumber: i,
+          timestamp: i,
+          // approximate
+          imagePath: framePath,
+          ocrText: frameOcr,
+          isKeyFrame: i === 0,
+          createdAt: now
+        });
+      }
+    }
+    return {
+      success: true,
+      projectId,
+      projectName,
+      frameCount
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : String(error)
+    };
+  } finally {
+    if (existsSync(tempDir)) {
+      try {
+        rmSync(tempDir, { recursive: true, force: true });
+      } catch {
+      }
+    }
+  }
+}
+export {
+  importApplabBundle
+};