npm - invos - Versions diffs - 1.0.0 - Mend

invos 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (346) hide show

package/kit/.agents/skills/instagram-carrossel/references/publish.md ADDED Viewed

@@ -0,0 +1,48 @@
+# Publish Instagram (subdoc de instagram-carrossel)
+**Não é skill separada.** Carregar só se user disser “publica/pode postar” e houver `.env`.
+## Default no INVOS (sem erro se faltar API)
+**Não é obrigatório.** O skill `instagram-carrossel` termina com pack em `conteudo/carrosseis/` +
+```text
+⚠️ Sua vez: subir PNGs no Instagram + colar caption.txt
+```
+Só use publish automático se:
+1. User disse **“publica” / “pode postar”**
+2. `.env` tem as variáveis (nunca commitar)
+3. Conta Instagram **Business** + Página Facebook
+## Env (local only)
+```bash
+# .env (gitignore)
+INSTAGRAM_ACCESS_TOKEN=
+INSTAGRAM_USER_ID=
+IMGBB_API_KEY=
+```
+## Script
+```bash
+node --env-file=.env .agents/skills/instagram-carrossel/scripts/publish.js \
+  --images "path/slide-01.png,path/slide-02.png" \
+  --caption "legenda..."
+# dry-run:
+#   ... --dry-run
+```
+Imagens: JPEG/PNG conforme o script; preferir 2–10 slides. Caption max 2200 chars.
+## Setup token (resumo)
+Ver Meta Graph API Explorer: permissões `instagram_content_publish`, `instagram_basic`, `pages_read_engagement`.
+User ID: Page → `instagram_business_account.id`.
+Token longa duração (~60 dias).
+## Se faltar chave / script falhar
+Reportar erro real → manter handoff humano. **Nunca** inventar permalink de post.

package/kit/.agents/skills/instagram-carrossel/references/render-png.md ADDED Viewed

@@ -0,0 +1,147 @@
+# Render PNG (subdoc de instagram-carrossel)
+**Não é skill separada.** Carregar só quando o user pedir PNG/export ou o passo de render do squad full.
+Renderiza HTML/CSS em PNG (Chrome headless padrão INVOS; Playwright opcional).
+## Quando usar
+Gerar slides de carrossel, gráficos sociais, qualquer HTML self-contained → PNG.
+## Ordem de render (obrigatória)
+1. **Chrome/Chromium headless** (padrão INVOS — sem MCP)
+2. Playwright MCP se o harness tiver
+3. Se nada existir: deixe HTML + instrução “abrir no browser / print” e **não** finja PNG
+### Core Workflow
+1. **Generate HTML** — arquivo self-contained (CSS inline, Google Fonts via `@import` ok).
+2. **Save HTML** — ex.:
+   `.agents/squads/instagram-carrossel/output/slides/slide-01.html`
+   e espelho em `conteudo/carrosseis/$SLUG/slides/`.
+3. **Start HTTP server** na pasta dos HTML:
+   ```bash
+   python3 -m http.server 8765 --directory "OUTPUT_DIR" &
+   for i in $(seq 1 30); do curl -s http://localhost:8765 >/dev/null 2>&1 && break || sleep 0.1; done
+   ```
+4. **Render com Chrome headless** (macOS path padrão):
+   ```bash
+   CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
+   # Linux: google-chrome || chromium
+   W=1080 H=1350   # INVOS default 4:5; squad legado pode pedir 1440
+   "$CHROME" --headless=new --no-sandbox --disable-gpu --hide-scrollbars \
+     --window-size=${W},${H} \
+     --screenshot="OUTPUT_DIR/rendered/slide-01.png" \
+     --virtual-time-budget=4000 \
+     "http://localhost:8765/slide-01.html"
+   ```
+5. **Verify** — inspecionar PNG; re-render se quebrar.
+6. **Stop server**:
+   ```bash
+   pkill -f "http.server 8765" 2>/dev/null || true
+   ```
+### Viewport Presets (width x height)
+Use these standard dimensions:
+- Instagram Post: 1080 x 1080
+- Instagram Carousel: 1080 x 1440
+- Instagram Story/Reel: 1080 x 1920
+- Facebook Post: 1200 x 630
+- Twitter/X Post: 1200 x 675
+- LinkedIn Post: 1200 x 627
+- YouTube Thumbnail: 1280 x 720
+- Custom: as specified by the squad
+### HTML Template Guidelines
+The HTML you generate MUST:
+- Be self-contained (inline CSS, no external dependencies)
+- Use web-safe fonts OR Google Fonts via `@import`
+- Embed images as absolute paths or base64 data URIs
+- Set exact body dimensions matching the viewport
+- Use `margin: 0; padding: 0; overflow: hidden` on body
+- Account for device pixel ratio if high-res needed
+Example minimal structure:
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { width: 1080px; height: 1440px; overflow: hidden; }
+    /* ... your design ... */
+  </style>
+</head>
+<body>
+  <!-- Your content -->
+</body>
+</html>
+```
+### Batch Rendering (Carousels/Multi-slide)
+For multi-image outputs like carousels:
+1. Generate one HTML file per slide
+2. Start the HTTP server **once** before the batch (step 3 of Core Workflow)
+3. Render each slide sequentially (step 4 repeated per slide)
+4. Stop the HTTP server **once** after all slides are done (step 6 of Core Workflow)
+5. Name output files with zero-padded numbers: slide-01.png, slide-02.png, slide-03.png
+6. Keep all slides at the same viewport dimensions
+### Best Practices
+- Always verify the first rendered image before batch rendering
+- Use CSS Grid/Flexbox for layout -- most reliable across renderers
+- Avoid animations/transitions (static screenshot only)
+- For rounded corners on images, use CSS `border-radius` + `overflow`
+- For emoji rendering, rely on system fonts (Windows: Segoe UI Emoji)
+- Test text overflow -- ensure no content is clipped unexpectedly
+- Keep HTML files alongside output PNGs for easy re-rendering
+### Typography & Readability Rules
+Text must be legible in the target platform's smallest viewing context (mobile feed for social platforms). Text inside linked or embedded image files (JPG, PNG, base64 assets) is decorative and exempt. All HTML text nodes and inline SVG text are subject to these rules.
+These are HARD minimums -- never go below them for readable text.
+#### Minimum Font Sizes by Platform
+| Text Role        | Instagram Post/Carousel | Instagram Story/Reel | LinkedIn/Facebook | YouTube Thumb |
+|------------------|------------------------|----------------------|-------------------|---------------|
+| Hero / Display   | 58px                   | 56px                 | 40px              | 60px          |
+| Heading          | 43px                   | 42px                 | 32px              | 36px          |
+| Body / Bullets   | 34px                   | 32px                 | 24px              | 36px          |
+| Caption / Footer | 24px                   | 20px                 | 20px              | 32px          |
+**Universal rule**: No text element meant to be read may use a font size smaller than 20px, on any platform.
+#### Font Weight
+- Body text and above: use font-weight 500+ (medium/semibold/bold)
+- Caption text: font-weight 500+ strongly recommended; 400 only with explicit high-contrast background (4.5:1 ratio minimum)
+- Avoid thin/light weights (100-300) for any readable text
+#### Verification Checklist
+Before calling `browser_take_screenshot`, scan your HTML and confirm:
+- All text elements use explicit px sizes (not em/rem that could resolve smaller)
+- No heading is below the Heading minimum for the target platform
+- No body/bullet text is below the Body minimum
+- No footer or metadata text is below the Caption minimum
+- No readable text uses font-weight below 500 (caption at 400 only with 4.5:1 contrast background)
+## Available operations
+- **Render HTML to PNG** -- Convert self-contained HTML/CSS into a pixel-perfect screenshot
+- **Batch Render** -- Render multiple slides/pages sequentially for carousels and multi-image content
+- **Viewport Resize** -- Set precise viewport dimensions for any target platform
+- **Quality Verification** -- Visually inspect rendered output and re-render if needed

package/kit/.agents/skills/instagram-carrossel/scripts/publish.js ADDED Viewed

@@ -0,0 +1,165 @@
+#!/usr/bin/env node
+// Instagram Carousel Publisher
+// Usage: node --env-file=.env publish.js --images "slide1.jpg,slide2.jpg" --caption "..." [--dry-run]
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+// ── Argument parsing ──────────────────────────────────────────
+export function parseArgs(argv) {
+  const args = { images: [], caption: '', dryRun: false };
+  for (let i = 2; i < argv.length; i++) {
+    if (argv[i] === '--images') {
+      if (i + 1 < argv.length) args.images = argv[++i].split(',').map(s => s.trim());
+    }
+    else if (argv[i] === '--caption') {
+      if (i + 1 < argv.length) args.caption = argv[++i];
+    }
+    else if (argv[i] === '--dry-run') args.dryRun = true;
+  }
+  return args;
+}
+// ── Image upload (imgBB) ──────────────────────────────────────
+export async function uploadToImgBB(imagePath, apiKey) {
+  const absolutePath = resolve(imagePath);
+  const fileBuffer = readFileSync(absolutePath);
+  const base64Image = fileBuffer.toString('base64');
+  const form = new FormData();
+  form.append('key', apiKey);
+  form.append('image', base64Image);
+  const res = await fetch('https://api.imgbb.com/1/upload', {
+    method: 'POST',
+    body: form,
+  });
+  if (!res.ok) throw new Error(`imgBB upload failed [${res.status}]: ${await res.text()}`);
+  const json = await res.json();
+  if (!json.success) throw new Error(`imgBB upload failed: ${JSON.stringify(json)}`);
+  return json.data.url;
+}
+// ── Instagram Graph API ───────────────────────────────────────
+const IG_BASE = 'https://graph.facebook.com/v21.0';
+export async function createChildContainer(userId, imageUrl, accessToken) {
+  const params = new URLSearchParams({
+    image_url: imageUrl,
+    is_carousel_item: 'true',
+    access_token: accessToken,
+  });
+  const res = await fetch(`${IG_BASE}/${userId}/media?${params}`, { method: 'POST' });
+  if (!res.ok) throw new Error(`createChildContainer failed [${res.status}]: ${await res.text()}`);
+  return (await res.json()).id;
+}
+export async function getContainerStatus(containerId, accessToken) {
+  const params = new URLSearchParams({ fields: 'status_code', access_token: accessToken });
+  const res = await fetch(`${IG_BASE}/${containerId}?${params}`);
+  if (!res.ok) throw new Error(`getContainerStatus failed [${res.status}]: ${await res.text()}`);
+  return (await res.json()).status_code;
+}
+export async function pollUntilFinished(containerId, accessToken, timeoutMs = 60_000, intervalMs = 3_000) {
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    const status = await getContainerStatus(containerId, accessToken);
+    if (status === 'FINISHED') return;
+    if (status === 'ERROR') throw new Error(`Container ${containerId} entered ERROR state`);
+    await new Promise(r => setTimeout(r, intervalMs));
+  }
+  throw new Error(`Container ${containerId} timed out after ${timeoutMs}ms`);
+}
+export async function createCarouselContainer(userId, childIds, caption, accessToken) {
+  const params = new URLSearchParams({
+    media_type: 'CAROUSEL',
+    children: childIds.join(','),
+    caption,
+    access_token: accessToken,
+  });
+  const res = await fetch(`${IG_BASE}/${userId}/media?${params}`, { method: 'POST' });
+  if (!res.ok) throw new Error(`createCarouselContainer failed [${res.status}]: ${await res.text()}`);
+  return (await res.json()).id;
+}
+export async function publishMedia(userId, containerId, accessToken) {
+  const params = new URLSearchParams({ creation_id: containerId, access_token: accessToken });
+  const res = await fetch(`${IG_BASE}/${userId}/media_publish?${params}`, { method: 'POST' });
+  if (!res.ok) throw new Error(`publishMedia failed [${res.status}]: ${await res.text()}`);
+  return (await res.json()).id;
+}
+export async function getPermalink(mediaId, accessToken) {
+  const params = new URLSearchParams({ fields: 'permalink', access_token: accessToken });
+  const res = await fetch(`${IG_BASE}/${mediaId}?${params}`);
+  if (!res.ok) return null; // non-fatal — just skip the URL display
+  const json = await res.json();
+  return json.permalink ?? null;
+}
+// ── Main ──────────────────────────────────────────────────────
+async function main() {
+  const { images, caption, dryRun } = parseArgs(process.argv);
+  if (!images.length) throw new Error('--images is required (e.g. --images "slide1.jpg,slide2.jpg")');
+  if (!caption) throw new Error('--caption is required');
+  if (images.length < 2 || images.length > 10) {
+    throw new Error(`Instagram carousels require 2–10 images (got ${images.length})`);
+  }
+  if (caption.length > 2200) {
+    throw new Error(`Caption exceeds Instagram's 2200-character limit (got ${caption.length})`);
+  }
+  const { INSTAGRAM_ACCESS_TOKEN, INSTAGRAM_USER_ID, IMGBB_API_KEY } = process.env;
+  if (!INSTAGRAM_ACCESS_TOKEN) throw new Error('INSTAGRAM_ACCESS_TOKEN is not set in environment');
+  if (!INSTAGRAM_USER_ID) throw new Error('INSTAGRAM_USER_ID is not set in environment');
+  if (!IMGBB_API_KEY) throw new Error('IMGBB_API_KEY is not set in environment. Get one at https://api.imgbb.com/');
+  console.log(`📸 Uploading ${images.length} image(s) to imgBB...`);
+  const imageUrls = await Promise.all(images.map(p => uploadToImgBB(p, IMGBB_API_KEY)));
+  imageUrls.forEach((url, i) => console.log(`   [${i + 1}] ${url}`));
+  console.log('\n📦 Creating Instagram media containers...');
+  const childIds = await Promise.all(
+    imageUrls.map(url => createChildContainer(INSTAGRAM_USER_ID, url, INSTAGRAM_ACCESS_TOKEN))
+  );
+  console.log(`   Container IDs: ${childIds.join(', ')}`);
+  console.log('\n⏳ Waiting for containers to finish processing...');
+  await Promise.all(childIds.map(id => pollUntilFinished(id, INSTAGRAM_ACCESS_TOKEN)));
+  console.log('   All containers ready.');
+  console.log('\n🎠 Creating carousel container...');
+  const carouselId = await createCarouselContainer(
+    INSTAGRAM_USER_ID, childIds, caption, INSTAGRAM_ACCESS_TOKEN
+  );
+  await pollUntilFinished(carouselId, INSTAGRAM_ACCESS_TOKEN);
+  console.log(`   Carousel container ID: ${carouselId}`);
+  if (dryRun) {
+    console.log('\n✅ DRY RUN complete — skipping final publish call.');
+    console.log(`   Carousel container ready: ${carouselId}`);
+    return;
+  }
+  console.log('\n🚀 Publishing to Instagram...');
+  const postId = await publishMedia(INSTAGRAM_USER_ID, carouselId, INSTAGRAM_ACCESS_TOKEN);
+  const permalink = await getPermalink(postId, INSTAGRAM_ACCESS_TOKEN);
+  console.log(`\n✅ Published successfully!`);
+  console.log(`   Post ID: ${postId}`);
+  if (permalink) console.log(`   URL: ${permalink}`);
+}
+// Run only when executed directly (not when imported for tests)
+const isMain = process.argv[1] === fileURLToPath(import.meta.url);
+if (isMain) {
+  main().catch(err => {
+    console.error(`\n❌ ${err.message}`);
+    process.exit(1);
+  });
+}