@remixmate/cli 0.9.26 → 0.9.27

package/skills/web-read/skill.json

@@ -0,0 +1,131 @@
+{
+  "name": "web-read",
+  "toolName": "web_read",
+  "tier": "tool",
+  "category": "consuming",
+  "title": "Web Page Reader",
+  "description": "Open any URL in a headless browser (Playwright Python) and return the page's MAIN TEXT — title, headings, paragraphs, lists, code blocks and tables — as Markdown, plain text, or structured JSON. Boilerplate (nav / sidebar / comments / ads / footer) is stripped by a Readability-style pass, and JS-rendered pages work because a real browser runs the page. This is the tool to use whenever you need to KNOW WHAT A PAGE SAYS: summarizing an article, pulling source material for a script, reading a README or docs page, checking what a link contains. It returns text, not pictures — for a screenshot (png/jpg) use web_screenshot, for a recording (mp4/webm) use web_record. Output is capped by max_chars (default 20000) and truncated on a block boundary; pass an `output` path to keep the full text on disk.",
+  "auth": "none",
+  "envVars": [
+    "WEB_CAPTURE_BROWSER",
+    "WEB_CAPTURE_ALLOW_PRIVATE_HOSTS",
+    "PLAYWRIGHT_BROWSERS_PATH"
+  ],
+  "entry": {
+    "type": "python",
+    "scriptPath": "../web-screenshot/scripts/read_page.py"
+  },
+  "parameters": {
+    "type": "object",
+    "properties": {
+      "url": {
+        "type": "string",
+        "description": "Target page URL (http/https). Private / loopback / link-local addresses are refused unless WEB_CAPTURE_ALLOW_PRIVATE_HOSTS=1."
+      },
+      "format": {
+        "type": "string",
+        "enum": ["markdown", "text", "json"],
+        "description": "markdown (default: keeps headings, lists, code fences, tables) | text (plain) | json (structured blocks + metadata, not truncated)"
+      },
+      "max_chars": {
+        "type": "number",
+        "description": "Cap on the printed text, cut at a block boundary with an explicit [truncated] notice (default 20000, 0 = unlimited). Raise it when you need the whole document; a very long page will otherwise fill your context."
+      },
+      "selector": {
+        "type": "string",
+        "description": "Read only inside this CSS selector. Leave empty to auto-detect the article container — only reach for this when the auto-detected container was wrong."
+      },
+      "include_links": {
+        "type": "boolean",
+        "description": "Keep hyperlinks as [text](url) instead of plain text. Useful when you need to follow links from the page."
+      },
+      "include_images": {
+        "type": "boolean",
+        "description": "Keep images as ![alt](src). Useful for harvesting illustration URLs out of an article."
+      },
+      "output": {
+        "type": "string",
+        "description": "Also write the FULL (untruncated) text to this local path. stdout still respects max_chars — use this when a long page must be kept for later steps."
+      },
+      "settle_ms": {
+        "type": "number",
+        "description": "Extra wait before extracting, in ms. Raise for pages that render content late."
+      },
+      "wait_for_selector": {
+        "type": "string",
+        "description": "Wait for this CSS selector before extracting (the reliable fix for JS-rendered content)"
+      },
+      "wait_for_timeout": {
+        "type": "number",
+        "description": "Fixed wait before extracting, in ms"
+      },
+      "device": {
+        "type": "string",
+        "description": "Device emulation name, e.g. 'iPhone 15 Pro' — some sites serve a leaner page to mobile"
+      },
+      "viewport": {
+        "type": "string",
+        "description": "Viewport as 'width,height', e.g. '1280,800'"
+      },
+      "color_scheme": {
+        "type": "string",
+        "enum": ["light", "dark", "no-preference"],
+        "description": "Emulate prefers-color-scheme"
+      },
+      "user_agent": {
+        "type": "string",
+        "description": "Override the User-Agent (try this when a site blocks headless browsers)"
+      },
+      "timeout": {
+        "type": "number",
+        "description": "Global Playwright action timeout in ms"
+      },
+      "ignore_https_errors": {
+        "type": "boolean",
+        "description": "Ignore HTTPS certificate errors"
+      },
+      "storage_state": {
+        "type": "string",
+        "description": "Path to a Playwright storageState JSON file (logged-in session)"
+      },
+      "cookies": {
+        "type": "string",
+        "description": "Playwright cookies as a JSON string or a path to a JSON file (top level is an array)"
+      },
+      "browser": {
+        "type": "string",
+        "enum": ["chromium", "firefox", "webkit"],
+        "description": "Browser engine (default chromium)"
+      },
+      "quiet": {
+        "type": "boolean",
+        "description": "Suppress the extraction diagnostics on stderr"
+      }
+    },
+    "required": ["url"]
+  },
+  "ui": {
+    "primary": ["url", "format", "max_chars"],
+    "advanced": [
+      "selector",
+      "include_links",
+      "include_images",
+      "wait_for_selector",
+      "settle_ms",
+      "device",
+      "viewport",
+      "color_scheme",
+      "timeout"
+    ],
+    "hidden": [
+      "output",
+      "quiet",
+      "user_agent",
+      "ignore_https_errors",
+      "storage_state",
+      "cookies",
+      "browser",
+      "wait_for_timeout"
+    ]
+  }
+}

package/skills/web-screenshot/scripts/_media_screenshot/__init__.py

@@ -6,12 +6,14 @@ package is implementation detail.
 from __future__ import annotations
 
 from . import cli_args, scenes, template, trim
+from .reader import do_read
 from .recording import do_record
 from .screenshot import do_screenshot
 from .storyboard import do_storyboard
 
 __all__ = [
     "cli_args",
+    "do_read",
     "do_record",
     "do_screenshot",
     "do_storyboard",

package/skills/web-screenshot/scripts/_media_screenshot/js/extract_article.js

@@ -0,0 +1,373 @@
+// Extract a page's main readable content as an ordered list of typed blocks.
+// Injected via page.evaluate(js_loader.load("extract_article"), cfg).
+//
+// A compact Readability-style pass: strip chrome, score paragraph density to
+// pick the content container, then walk it in document order. It returns
+// structured blocks rather than a formatted string so that every output format
+// (markdown / plain text / json) is a pure function of one single extraction —
+// the alternative, formatting in the page and re-parsing in Python, loses the
+// block boundaries that make truncation land somewhere readable.
+//
+// Runs against the live DOM and mutates it (junk removal). That is safe here:
+// the page is headless and thrown away immediately after this call.
+(cfg) => {
+  const opts = cfg || {};
+  const wantLinks = !!opts.includeLinks;
+  const wantImages = !!opts.includeImages;
+  const inlineMarkdown = opts.inline === 'markdown';
+
+  const squash = (s) => (s || '').replace(/\s+/g, ' ').trim();
+  const rawLen = (el) => squash(el.textContent).length;
+
+  // ── metadata (read before junk removal strips the <head> siblings) ────────
+  const meta = (sel, attr) => {
+    const el = document.querySelector(sel);
+    if (!el) return '';
+    return squash(attr ? el.getAttribute(attr) : el.textContent);
+  };
+  const metadata = {
+    title:
+      meta('meta[property="og:title"]', 'content') ||
+      meta('meta[name="twitter:title"]', 'content') ||
+      squash(document.title) ||
+      meta('h1'),
+    byline:
+      meta('meta[name="author"]', 'content') ||
+      meta('meta[property="article:author"]', 'content') ||
+      meta('[rel="author"]'),
+    siteName: meta('meta[property="og:site_name"]', 'content'),
+    publishedTime:
+      meta('meta[property="article:published_time"]', 'content') ||
+      meta('time[datetime]', 'datetime'),
+    description:
+      meta('meta[name="description"]', 'content') ||
+      meta('meta[property="og:description"]', 'content'),
+    lang: squash(document.documentElement.getAttribute('lang') || ''),
+    url: location.href,
+  };
+
+  const bodyCharCount = rawLen(document.body);
+
+  // ── 1. strip boilerplate (structural only, see below) ────────────────────
+  const JUNK_TAGS = [
+    'script', 'style', 'noscript', 'template', 'svg', 'canvas', 'iframe',
+    'form', 'button', 'select', 'textarea', 'nav', 'aside', 'footer',
+    '[aria-hidden="true"]', '[hidden]', '[role="navigation"]', '[role="banner"]',
+    '[role="complementary"]', '[role="search"]', '[role="dialog"]',
+  ].join(',');
+
+  // Matched against class + id, on "words" delimited by -, _ or space.
+  const JUNK_WORDS =
+    /(^|[-_\s])(comments?|disqus|sidebar|side-?bar|related|recommend(ed|ations?)?|advert(isement)?|ads?|adsbygoogle|banner|breadcrumbs?|share|sharing|social|subscribe|newsletter|popup|modal|overlay|cookie|toolbar|pagination|pager|footer|masthead|menu|promo|sponsor|widget|skip-link|back-to-top)($|[-_\s])/i;
+
+  const isJunkClass = (el) => {
+    const tokens = `${el.className || ''} ${el.id || ''}`;
+    return typeof tokens === 'string' && JUNK_WORDS.test(tokens);
+  };
+
+  document.querySelectorAll(JUNK_TAGS).forEach((el) => {
+    try { el.remove(); } catch (e) { /* already detached */ }
+  });
+
+  // Class-based junk is NOT removed here — only scored down in step 2 and
+  // pruned inside the winner in step 3. Removing it up front looks tidier and
+  // is how this first went wrong: Tencent Cloud's whole page wrapper carries
+  // `show-ad`, the `ads?` rule matched it, and the extractor deleted the entire
+  // article before it had a chance to score anything. A class name is a hint
+  // about a subtree's role, never grounds for deleting an ancestor of the text
+  // we came for.
+
+  // ── 2. pick the content container ────────────────────────────────────────
+  const linkDensity = (el) => {
+    const total = rawLen(el);
+    if (!total) return 1;
+    let linked = 0;
+    el.querySelectorAll('a').forEach((a) => { linked += rawLen(a); });
+    return Math.min(1, linked / total);
+  };
+
+  const tagBonus = (el) => {
+    const tag = el.tagName;
+    if (isJunkClass(el)) return 0.2;
+    if (tag === 'ARTICLE' || tag === 'MAIN') return 1.5;
+    const tokens = `${el.className || ''} ${el.id || ''}`;
+    if (typeof tokens === 'string' &&
+        /(^|[-_\s])(article|post|content|entry|markdown-body|rich_media|story|body)($|[-_\s])/i.test(tokens)) {
+      return 1.25;
+    }
+    return 1;
+  };
+
+  let container = null;
+  let containerReason = '';
+
+  if (opts.selector) {
+    container = document.querySelector(opts.selector);
+    if (!container) {
+      return { error: 'selector-not-found', selector: opts.selector, metadata };
+    }
+    containerReason = `selector:${opts.selector}`;
+  } else {
+    // Readability's scoring:每个够长的段落给自己父/祖父/曾祖父记分（1/2、1/3 衰减），
+    // 所以赢家是"段落最密集的那层"，而不是 <body>——<body> 拿不到直接段落的分。
+    const scores = new Map();
+    const add = (el, amount) => {
+      if (!el || el.nodeType !== 1 || el === document.body ||
+          el === document.documentElement) return;
+      scores.set(el, (scores.get(el) || 0) + amount);
+    };
+    document.querySelectorAll('p, pre, blockquote, li, td, h2, h3').forEach((node) => {
+      const text = squash(node.textContent);
+      if (text.length < 25) return;
+      const commas = (text.match(/[,，、.。;；]/g) || []).length;
+      let s = 1 + Math.min(text.length / 100, 3) + Math.min(commas, 3);
+      // 列表项 / 单元格常常是导航或目录，给一半权重。
+      if (node.tagName === 'LI' || node.tagName === 'TD') s *= 0.5;
+      const p = node.parentElement;
+      const gp = p && p.parentElement;
+      const ggp = gp && gp.parentElement;
+      add(p, s);
+      add(gp, s / 2);
+      add(ggp, s / 3);
+    });
+
+    let bestScore = 0;
+    scores.forEach((s, el) => {
+      const adjusted = s * (1 - linkDensity(el)) * tagBonus(el);
+      if (adjusted > bestScore) { bestScore = adjusted; container = el; }
+    });
+    containerReason = container ? `scored:${bestScore.toFixed(1)}` : 'fallback:body';
+
+    // 赢家常常只是正文里**最密的那一层**，而不是正文本身：docs.python.org 上
+    // 打分赢家是 `section#text`（第 3.1.2 节），它上面还有三节同级内容。所以向上
+    // 合并兄弟小节，直到父层开始引入噪音（体量暴涨或链接占比变高）为止。
+    let guard = 0;
+    while (container && container.parentElement &&
+           container.parentElement !== document.body &&
+           container.parentElement !== document.documentElement &&
+           guard++ < 8) {
+      const parent = container.parentElement;
+      if (isJunkClass(parent)) break;
+      const tooSmall = rawLen(container) < 200;
+      const growth = rawLen(parent) / Math.max(rawLen(container), 1);
+      if (!tooSmall && (growth > 3 || linkDensity(parent) > 0.3)) break;
+      container = parent;
+      containerReason += '+up';
+    }
+    if (!container) container = document.body;
+  }
+
+  // ── 3. prune junk *inside* the winner, then walk it into blocks ──────────
+  // Safe by construction: a descendant can never be the container, and the
+  // 40% rule keeps a mislabelled wrapper (the `show-ad` case, one level down)
+  // from taking the article with it.
+  const containerChars = rawLen(container) || 1;
+  Array.prototype.slice.call(container.querySelectorAll('div,section,ul,ol,span,header,p,figure'))
+    .forEach((el) => {
+      if (!container.contains(el) || el === container) return;
+      if (!isJunkClass(el)) return;
+      if (rawLen(el) / containerChars > 0.4) return;
+      try { el.remove(); } catch (e) { /* already detached */ }
+    });
+
+  const describe = (el) => {
+    if (!el || !el.tagName) return '';
+    const id = el.id ? `#${el.id}` : '';
+    const cls = typeof el.className === 'string' && el.className.trim()
+      ? `.${el.className.trim().split(/\s+/).slice(0, 2).join('.')}`
+      : '';
+    return `${el.tagName.toLowerCase()}${id}${cls}`;
+  };
+
+  // Inline serializer — the only place that knows about markdown syntax.
+  const inline = (node) => {
+    let out = '';
+    node.childNodes.forEach((child) => {
+      if (child.nodeType === 3) { out += child.nodeValue; return; }
+      if (child.nodeType !== 1) return;
+      const tag = child.tagName;
+      if (tag === 'BR') { out += ' '; return; }
+      if (tag === 'IMG') {
+        if (wantImages) {
+          const alt = squash(child.getAttribute('alt'));
+          const src = child.currentSrc || child.src ||
+            child.getAttribute('data-src') || '';
+          if (src) out += `![${alt}](${src})`;
+        }
+        return;
+      }
+      const inner = inline(child);
+      if (!inner.trim()) return;
+      if (tag === 'A' && wantLinks) {
+        const href = child.href || child.getAttribute('href') || '';
+        out += href ? `[${inner}](${href})` : inner;
+        return;
+      }
+      if (!inlineMarkdown) { out += inner; return; }
+      if (tag === 'CODE' || tag === 'KBD' || tag === 'SAMP') out += `\`${inner}\``;
+      else if (tag === 'STRONG' || tag === 'B') out += `**${inner}**`;
+      else if (tag === 'EM' || tag === 'I') out += `*${inner}*`;
+      else if (tag === 'DEL' || tag === 'S') out += `~~${inner}~~`;
+      else out += inner;
+    });
+    return out;
+  };
+
+  const text = (node) => squash(inline(node));
+
+  const listItems = (el, depth) => {
+    const items = [];
+    Array.prototype.forEach.call(el.children, (li) => {
+      if (li.tagName !== 'LI') return;
+      // Nested lists are flattened with an indent prefix rather than nested
+      // structures — every consumer here renders to flat text anyway.
+      const nested = li.querySelector(':scope > ul, :scope > ol');
+      const own = squash(
+        Array.prototype.filter
+          .call(li.childNodes, (n) => n !== nested)
+          .map((n) => (n.nodeType === 1 ? inline(n) : n.nodeValue || ''))
+          .join(''),
+      );
+      if (own) items.push({ depth, text: own });
+      if (nested && depth < 3) items.push(...listItems(nested, depth + 1));
+    });
+    return items;
+  };
+
+  const EMIT = new Set([
+    'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P', 'PRE', 'BLOCKQUOTE',
+    'UL', 'OL', 'TABLE', 'FIGURE', 'IMG', 'HR', 'DL',
+  ]);
+  const SKIP_DESCEND = new Set(['PRE', 'TABLE', 'UL', 'OL', 'FIGURE', 'DL']);
+
+  const blocks = [];
+  const push = (block) => {
+    if (!block) return;
+    const prev = blocks[blocks.length - 1];
+    // 同一段文字在页面里出现两次（懒加载占位 + 真身）时只留一份。
+    if (prev && prev.type === block.type && prev.text && prev.text === block.text) return;
+    blocks.push(block);
+  };
+
+  const emit = (el) => {
+    const tag = el.tagName;
+    if (/^H[1-6]$/.test(tag)) {
+      const t = text(el);
+      if (t) push({ type: 'heading', level: Number(tag[1]), text: t });
+      return;
+    }
+    if (tag === 'P') {
+      const t = text(el);
+      if (t) push({ type: 'paragraph', text: t });
+      return;
+    }
+    if (tag === 'PRE') {
+      const code = el.querySelector('code') || el;
+      const cls = `${el.className || ''} ${code.className || ''}`;
+      const m = typeof cls === 'string' ? cls.match(/(?:language|lang|highlight)[-_](\w+)/i) : null;
+      const body = (code.innerText || code.textContent || '').replace(/\s+$/, '');
+      if (body.trim()) push({ type: 'code', lang: m ? m[1].toLowerCase() : '', text: body });
+      return;
+    }
+    if (tag === 'BLOCKQUOTE') {
+      const t = text(el);
+      if (t) push({ type: 'quote', text: t });
+      return;
+    }
+    if (tag === 'UL' || tag === 'OL') {
+      const items = listItems(el, 0);
+      if (items.length) push({ type: 'list', ordered: tag === 'OL', items });
+      return;
+    }
+    if (tag === 'DL') {
+      const items = [];
+      Array.prototype.forEach.call(el.children, (child) => {
+        const t = text(child);
+        if (!t) return;
+        items.push({ depth: child.tagName === 'DD' ? 1 : 0, text: t });
+      });
+      if (items.length) push({ type: 'list', ordered: false, items });
+      return;
+    }
+    if (tag === 'TABLE') {
+      const rows = [];
+      el.querySelectorAll('tr').forEach((tr) => {
+        const cells = [];
+        tr.querySelectorAll('th,td').forEach((cell) => cells.push(text(cell)));
+        if (cells.some((c) => c)) rows.push(cells);
+      });
+      if (rows.length) push({ type: 'table', rows });
+      return;
+    }
+    if (tag === 'FIGURE') {
+      const img = el.querySelector('img');
+      const cap = el.querySelector('figcaption');
+      const caption = cap ? text(cap) : '';
+      if (wantImages && img) {
+        const src = img.currentSrc || img.src || img.getAttribute('data-src') || '';
+        if (src) push({ type: 'image', src, alt: squash(img.getAttribute('alt')), caption });
+        return;
+      }
+      if (caption) push({ type: 'paragraph', text: caption });
+      return;
+    }
+    if (tag === 'IMG') {
+      if (!wantImages) return;
+      const src = el.currentSrc || el.src || el.getAttribute('data-src') || '';
+      if (src) push({ type: 'image', src, alt: squash(el.getAttribute('alt')), caption: '' });
+      return;
+    }
+    if (tag === 'HR') push({ type: 'rule' });
+  };
+
+  // 直接挂在容器上、没有被 <p> 包起来的裸文本（老网页很常见）也要收；
+  // 用 buffer 在遇到下一个块级元素或本层结束时冲刷成一个段落。
+  const walk = (el, depth) => {
+    if (depth > 24) return;
+    let buffer = '';
+    const flush = () => {
+      const t = squash(buffer);
+      buffer = '';
+      if (t.length >= 2) push({ type: 'paragraph', text: t });
+    };
+    el.childNodes.forEach((child) => {
+      if (child.nodeType === 3) { buffer += child.nodeValue; return; }
+      if (child.nodeType !== 1) return;
+      const tag = child.tagName;
+      if (EMIT.has(tag)) {
+        flush();
+        emit(child);
+        return;
+      }
+      if (SKIP_DESCEND.has(tag)) return;
+      if (tag === 'BR') { buffer += ' '; return; }
+      // Inline-level element sitting between block siblings: keep its text in
+      // the running buffer instead of dropping it on the floor.
+      if (['A', 'SPAN', 'CODE', 'STRONG', 'B', 'EM', 'I', 'SMALL', 'LABEL', 'TIME',
+           'SUP', 'SUB', 'MARK', 'ABBR', 'CITE', 'Q', 'DEL', 'S', 'U'].includes(tag)) {
+        buffer += inline(child);
+        return;
+      }
+      flush();
+      walk(child, depth + 1);
+    });
+    flush();
+  };
+
+  walk(container, 0);
+
+  const charCount = blocks.reduce((n, b) => {
+    if (b.type === 'list') return n + b.items.reduce((m, i) => m + i.text.length, 0);
+    if (b.type === 'table') return n + b.rows.reduce((m, r) => m + r.join('').length, 0);
+    return n + (b.text || '').length;
+  }, 0);
+
+  return {
+    metadata,
+    blocks,
+    container: describe(container),
+    containerReason,
+    charCount,
+    bodyCharCount,
+  };
+}