zefiro 0.8.1 → 0.9.0

package/dist/cli-6qr9gvkp.js

@@ -0,0 +1,508 @@
+// src/browser/url-tracker.ts
+var SKIP_EXTENSIONS = new Set([
+  ".pdf",
+  ".zip",
+  ".csv",
+  ".xlsx",
+  ".xls",
+  ".doc",
+  ".docx",
+  ".png",
+  ".jpg",
+  ".jpeg",
+  ".gif",
+  ".svg",
+  ".ico",
+  ".webp",
+  ".mp3",
+  ".mp4",
+  ".wav",
+  ".avi",
+  ".mov"
+]);
+var SKIP_PATTERNS = [
+  /\/logout/i,
+  /\/signout/i,
+  /\/api\//i,
+  /\/auth\/callback/i,
+  /\/oauth/i,
+  /javascript:/i,
+  /mailto:/i,
+  /tel:/i,
+  /#$/
+];
+function normalizeUrl(url, baseUrl) {
+  try {
+    const resolved = new URL(url, baseUrl);
+    resolved.hash = "";
+    let normalized = resolved.href;
+    if (normalized.endsWith("/") && resolved.pathname !== "/") {
+      normalized = normalized.slice(0, -1);
+    }
+    return normalized;
+  } catch {
+    return url;
+  }
+}
+function shouldVisit(url, baseUrl, excludePatterns, visited) {
+  try {
+    const parsed = new URL(url);
+    const base = new URL(baseUrl);
+    if (parsed.origin !== base.origin)
+      return false;
+    const normalized = normalizeUrl(url, baseUrl);
+    if (visited.has(normalized))
+      return false;
+    const ext = parsed.pathname.match(/\.\w+$/)?.[0]?.toLowerCase();
+    if (ext && SKIP_EXTENSIONS.has(ext))
+      return false;
+    for (const pattern of SKIP_PATTERNS) {
+      if (pattern.test(url))
+        return false;
+    }
+    for (const pattern of excludePatterns) {
+      try {
+        if (new RegExp(pattern).test(url))
+          return false;
+      } catch {
+        if (url.includes(pattern))
+          return false;
+      }
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+function extractHrefsFromElements(elements) {
+  return elements.filter((el) => el.role === "link").map((el) => el.ref);
+}
+function urlToSlug(url, baseUrl) {
+  try {
+    const parsed = new URL(url, baseUrl);
+    const path = parsed.pathname;
+    if (path === "/" || path === "")
+      return "home";
+    return path.replace(/^\/|\/$/g, "").replace(/\//g, "-").replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-").toLowerCase();
+  } catch {
+    return "unknown";
+  }
+}
+function buildTopology(pages) {
+  const root = { path: "/", slug: "root", title: "Application", children: [] };
+  const nodeMap = new Map;
+  nodeMap.set("/", root);
+  const sortedPages = Array.from(pages.values()).filter((p) => p.status === "visited").sort((a, b) => a.depth - b.depth);
+  for (const page of sortedPages) {
+    const segments = page.path.replace(/^\/|\/$/g, "").split("/").filter(Boolean);
+    const node = {
+      path: page.path,
+      slug: page.slug,
+      title: page.title || page.slug,
+      children: []
+    };
+    let parentPath = "/";
+    if (segments.length > 1) {
+      parentPath = "/" + segments.slice(0, -1).join("/");
+    }
+    const parent = nodeMap.get(parentPath) ?? root;
+    parent.children.push(node);
+    nodeMap.set(page.path, node);
+  }
+  return root.children;
+}
+function topologyToAscii(nodes, prefix = "") {
+  const lines = [];
+  for (let i = 0;i < nodes.length; i++) {
+    const isLast = i === nodes.length - 1;
+    const connector = isLast ? "└── " : "├── ";
+    const childPrefix = isLast ? "    " : "│   ";
+    lines.push(`${prefix}${connector}${nodes[i].path} — ${nodes[i].title}`);
+    if (nodes[i].children.length > 0) {
+      lines.push(topologyToAscii(nodes[i].children, prefix + childPrefix));
+    }
+  }
+  return lines.join(`
+`);
+}
+
+// src/browser/report.ts
+function generateSectionMarkdown(page, relatedPages, annotations) {
+  const analysis = page.analysis;
+  const lines = [];
+  const name = analysis?.pageName ?? page.title ?? page.slug;
+  lines.push(`# ${name} (\`${page.path}\`)`);
+  lines.push("");
+  if (analysis?.description) {
+    lines.push(`> ${analysis.description}`);
+    lines.push("");
+  }
+  lines.push(`**Route:** \`${page.path}\``);
+  if (analysis?.navigation?.tabs?.length) {
+    lines.push(`**Tabs:** ${analysis.navigation.tabs.join(", ")}`);
+  }
+  lines.push("");
+  lines.push("---");
+  lines.push("");
+  lines.push(`![${name}](../screenshots/${page.slug}/01-default.png)`);
+  lines.push("");
+  if (analysis?.sections) {
+    for (const section of analysis.sections) {
+      lines.push(`## ${section.name}`);
+      lines.push("");
+      if (section.elements?.length) {
+        const hasRequired = section.elements.some((e) => e.required !== undefined);
+        if (hasRequired) {
+          lines.push("| Field | Type | Required | Description |");
+          lines.push("|-------|------|----------|-------------|");
+          for (const el of section.elements) {
+            lines.push(`| ${el.name} | ${el.type} | ${el.required ? "Yes" : "No"} | ${el.description} |`);
+          }
+        } else {
+          lines.push("| Control | Type | Description |");
+          lines.push("|---------|------|-------------|");
+          for (const el of section.elements) {
+            lines.push(`| ${el.name} | ${el.type} | ${el.description} |`);
+          }
+        }
+        lines.push("");
+      }
+      if (section.tableColumns?.length) {
+        lines.push("### Table Columns");
+        lines.push("");
+        lines.push("| Column | Sortable | Description |");
+        lines.push("|--------|----------|-------------|");
+        for (const col of section.tableColumns) {
+          lines.push(`| ${col.name} | ${col.sortable ? "Yes" : "No"} | ${col.description} |`);
+        }
+        lines.push("");
+      }
+      lines.push("---");
+      lines.push("");
+    }
+  }
+  if (analysis?.actions?.length) {
+    lines.push("## Available Actions");
+    lines.push("");
+    for (const action of analysis.actions) {
+      lines.push(`- ${action}`);
+    }
+    lines.push("");
+  }
+  if (analysis?.observations?.length) {
+    lines.push("## Key Behaviors");
+    lines.push("");
+    for (const obs of analysis.observations) {
+      lines.push(`- ${obs}`);
+    }
+    lines.push("");
+  }
+  const related = relatedPages.filter((p) => p.slug !== page.slug);
+  if (related.length > 0) {
+    lines.push("## Related Pages");
+    lines.push("");
+    for (const rp of related) {
+      lines.push(`- [${rp.name}](./${rp.slug}.md)`);
+    }
+    lines.push("");
+  }
+  if (annotations?.length) {
+    lines.push("## Annotations (voice)");
+    lines.push("");
+    for (const ann of annotations) {
+      lines.push(`- "${ann.text}" — ${ann.timestamp}`);
+    }
+    lines.push("");
+  }
+  return lines.join(`
+`);
+}
+function generateReadme(state) {
+  const lines = [];
+  const visited = Array.from(state.pages.values()).filter((p) => p.status === "visited");
+  const errors = Array.from(state.pages.values()).filter((p) => p.status === "error");
+  lines.push("# Application Map");
+  lines.push("");
+  lines.push(`> **Scan Date:** ${new Date(state.startedAt).toISOString().split("T")[0]}`);
+  lines.push(`> **URL:** \`${state.baseUrl}\``);
+  lines.push(`> **Pages Explored:** ${visited.length}`);
+  lines.push("");
+  lines.push("---");
+  lines.push("");
+  lines.push("## Application Structure");
+  lines.push("");
+  lines.push("```");
+  lines.push(`Application (${state.baseUrl})`);
+  if (state.topology.length > 0) {
+    lines.push(topologyToAscii(state.topology));
+  }
+  lines.push("```");
+  lines.push("");
+  lines.push("---");
+  lines.push("");
+  lines.push("## Section Reports");
+  lines.push("");
+  lines.push("| Section | Report | Screenshots |");
+  lines.push("|---------|--------|-------------|");
+  for (const page of visited) {
+    const name = page.analysis?.pageName ?? page.title ?? page.slug;
+    lines.push(`| ${name} | [${page.slug}.md](./sections/${page.slug}.md) | [screenshots/${page.slug}/](./screenshots/${page.slug}/) |`);
+  }
+  lines.push("");
+  lines.push("---");
+  lines.push("");
+  lines.push("## Route Map");
+  lines.push("");
+  lines.push("| Route | Section | Elements | Links |");
+  lines.push("|-------|---------|----------|-------|");
+  for (const page of visited) {
+    const name = page.analysis?.pageName ?? page.title ?? page.slug;
+    lines.push(`| \`${page.path}\` | ${name} | ${page.elements.length} | ${page.outgoingLinks.length} |`);
+  }
+  lines.push("");
+  if (errors.length > 0) {
+    lines.push("---");
+    lines.push("");
+    lines.push("## Errors");
+    lines.push("");
+    for (const page of errors) {
+      lines.push(`- \`${page.url}\`: ${page.error}`);
+    }
+    lines.push("");
+  }
+  lines.push("---");
+  lines.push("");
+  lines.push("## Screenshot Inventory");
+  lines.push("");
+  lines.push(`| Section | Count |`);
+  lines.push(`|---------|-------|`);
+  let total = 0;
+  for (const page of visited) {
+    lines.push(`| ${page.analysis?.pageName ?? page.slug} | 1 |`);
+    total++;
+  }
+  lines.push(`| **Total** | **${total}** |`);
+  lines.push("");
+  return lines.join(`
+`);
+}
+function generateIndexHtml(state) {
+  const visited = Array.from(state.pages.values()).filter((p) => p.status === "visited");
+  const screensData = {};
+  for (const page of visited) {
+    const name = page.analysis?.pageName ?? page.title ?? page.slug;
+    screensData[page.slug] = [{
+      src: page.screenshot,
+      label: name,
+      desc: page.analysis?.description ?? `Page at ${page.path}`
+    }];
+  }
+  const sidebarItems = visited.map((page) => {
+    const name = page.analysis?.pageName ?? page.title ?? page.slug;
+    return `<div class="sidebar-item${visited[0] === page ? " active" : ""}" data-section="${page.slug}" onclick="showSection('${page.slug}')">
+      <span class="icon">\uD83D\uDCC4</span>${name}<span class="count">1</span>
+    </div>`;
+  }).join(`
+      `);
+  const sections = visited.map((page) => {
+    const name = page.analysis?.pageName ?? page.title ?? page.slug;
+    const isFirst = visited[0] === page;
+    return `<div id="sec-${page.slug}" class="flow-section${isFirst ? " active" : ""}">
+      <div class="flow-title">${name}</div>
+      <div class="flow-subtitle">${page.analysis?.description ?? ""}</div>
+      <div class="flow-route">${page.path}</div>
+      <div class="flow-row">
+        <div class="flow-card" onclick="openLightbox('${page.slug}', 0)">
+          <div class="card-thumb" style="background-image:url('${page.screenshot}')">
+            <span class="tag tag-page">Page</span>
+          </div>
+          <div class="card-body">
+            <div class="card-label">${name}</div>
+            <div class="card-desc">${page.analysis?.description ?? ""}</div>
+          </div>
+        </div>
+      </div>
+    </div>`;
+  }).join(`
+    `);
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Application Map</title>
+<style>
+  :root {
+    --bg: #0f1117;
+    --surface: #1a1d27;
+    --surface2: #242837;
+    --border: #2e3348;
+    --text: #e1e4ed;
+    --text-dim: #8b90a5;
+    --accent: #6366f1;
+    --accent-glow: rgba(99,102,241,0.25);
+    --green: #22c55e;
+    --amber: #f59e0b;
+    --red: #ef4444;
+    --cyan: #06b6d4;
+    --pink: #ec4899;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    background: var(--bg); color: var(--text);
+    overflow: hidden; height: 100vh;
+  }
+  .topbar {
+    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+    height: 56px; background: var(--surface);
+    border-bottom: 1px solid var(--border);
+    display: flex; align-items: center; padding: 0 24px; gap: 16px;
+  }
+  .topbar h1 { font-size: 16px; font-weight: 600; }
+  .topbar .badge {
+    font-size: 11px; padding: 3px 10px; border-radius: 20px;
+    background: var(--accent); color: #fff; font-weight: 500;
+  }
+  .topbar .sep { flex: 1; }
+  .main { display: flex; height: 100vh; padding-top: 56px; }
+  .sidebar {
+    width: 260px; min-width: 260px;
+    background: var(--surface); border-right: 1px solid var(--border);
+    overflow-y: auto; padding: 16px 0;
+  }
+  .sidebar-item {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 20px; border-radius: 8px; cursor: pointer;
+    font-size: 13px; color: var(--text-dim); margin: 0 8px 2px;
+  }
+  .sidebar-item:hover { background: var(--surface2); color: var(--text); }
+  .sidebar-item.active { background: var(--accent-glow); color: var(--accent); font-weight: 500; }
+  .sidebar-item .icon { font-size: 16px; width: 20px; text-align: center; }
+  .sidebar-item .count {
+    margin-left: auto; font-size: 11px; background: var(--surface2);
+    padding: 1px 7px; border-radius: 10px; color: var(--text-dim);
+  }
+  .canvas-area { flex: 1; overflow: hidden; }
+  .canvas-scroll { width: 100%; height: 100%; overflow: auto; padding: 40px; }
+  .flow-section { display: none; }
+  .flow-section.active { display: block; }
+  .flow-title { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
+  .flow-subtitle { font-size: 14px; color: var(--text-dim); margin-bottom: 8px; }
+  .flow-route {
+    display: inline-block; font-size: 12px; font-family: monospace;
+    background: var(--surface2); padding: 3px 10px; border-radius: 6px;
+    color: var(--text-dim); margin-bottom: 24px;
+  }
+  .flow-row { display: flex; gap: 16px; flex-wrap: wrap; }
+  .flow-card {
+    width: 320px; background: var(--surface); border: 1px solid var(--border);
+    border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color 0.15s;
+  }
+  .flow-card:hover { border-color: var(--accent); }
+  .card-thumb {
+    height: 180px; background-size: cover; background-position: top center;
+    position: relative;
+  }
+  .tag {
+    position: absolute; top: 8px; right: 8px;
+    font-size: 10px; padding: 2px 8px; border-radius: 4px;
+    font-weight: 600; text-transform: uppercase;
+  }
+  .tag-page { background: var(--accent); color: #fff; }
+  .tag-modal { background: var(--pink); color: #fff; }
+  .tag-action { background: var(--amber); color: #000; }
+  .card-body { padding: 12px 16px; }
+  .card-label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
+  .card-desc { font-size: 12px; color: var(--text-dim); }
+  /* Lightbox */
+  .lightbox {
+    display: none; position: fixed; inset: 0; z-index: 200;
+    background: rgba(0,0,0,0.9); align-items: center; justify-content: center;
+  }
+  .lightbox.open { display: flex; }
+  .lightbox img { max-width: 90vw; max-height: 80vh; border-radius: 8px; }
+  .lb-caption {
+    position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%);
+    text-align: center; color: var(--text);
+  }
+  .lb-counter { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
+  .lb-label { font-size: 16px; font-weight: 600; }
+  .lb-close {
+    position: fixed; top: 20px; right: 24px; font-size: 24px;
+    color: var(--text-dim); cursor: pointer; z-index: 201;
+  }
+  .lb-nav {
+    position: fixed; top: 50%; font-size: 32px; color: var(--text-dim);
+    cursor: pointer; padding: 20px; z-index: 201;
+  }
+  .lb-prev { left: 10px; }
+  .lb-next { right: 10px; }
+</style>
+</head>
+<body>
+  <div class="topbar">
+    <h1>Application Map</h1>
+    <span class="badge">Zefiro</span>
+    <span class="sep"></span>
+    <span style="font-size:12px;color:var(--text-dim)">${visited.length} pages</span>
+  </div>
+  <div class="main">
+    <div class="sidebar">
+      ${sidebarItems}
+    </div>
+    <div class="canvas-area">
+      <div class="canvas-scroll">
+        ${sections}
+      </div>
+    </div>
+  </div>
+  <div class="lightbox" id="lightbox" onclick="if(event.target===this)closeLightbox()">
+    <span class="lb-close" onclick="closeLightbox()">✕</span>
+    <span class="lb-nav lb-prev" onclick="navLightbox(-1)">‹</span>
+    <img id="lb-img" src="" alt="">
+    <span class="lb-nav lb-next" onclick="navLightbox(1)">›</span>
+    <div class="lb-caption">
+      <div class="lb-counter" id="lb-counter"></div>
+      <div class="lb-label" id="lb-label"></div>
+    </div>
+  </div>
+  <script>
+    const screens = ${JSON.stringify(screensData, null, 2)};
+    let lbSection = null, lbIndex = 0;
+    function showSection(slug) {
+      document.querySelectorAll('.flow-section').forEach(s => s.classList.remove('active'));
+      document.querySelectorAll('.sidebar-item').forEach(s => s.classList.remove('active'));
+      const sec = document.getElementById('sec-' + slug);
+      if (sec) sec.classList.add('active');
+      const item = document.querySelector('[data-section="' + slug + '"]');
+      if (item) item.classList.add('active');
+    }
+    function openLightbox(section, index) {
+      lbSection = section; lbIndex = index;
+      const items = screens[section] || [];
+      if (!items[index]) return;
+      document.getElementById('lb-img').src = items[index].src;
+      document.getElementById('lb-label').textContent = items[index].label;
+      document.getElementById('lb-counter').textContent = (index + 1) + ' / ' + items.length;
+      document.getElementById('lightbox').classList.add('open');
+    }
+    function closeLightbox() {
+      document.getElementById('lightbox').classList.remove('open');
+    }
+    function navLightbox(dir) {
+      const items = screens[lbSection] || [];
+      lbIndex = (lbIndex + dir + items.length) % items.length;
+      openLightbox(lbSection, lbIndex);
+    }
+    document.addEventListener('keydown', e => {
+      if (e.key === 'Escape') closeLightbox();
+      if (e.key === 'ArrowLeft') navLightbox(-1);
+      if (e.key === 'ArrowRight') navLightbox(1);
+    });
+  </script>
+</body>
+</html>`;
+}
+
+export { normalizeUrl, shouldVisit, extractHrefsFromElements, urlToSlug, buildTopology, generateSectionMarkdown, generateReadme, generateIndexHtml };