astro-claw 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-claw",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Claude Code over Slack — your AI crew member. One command: npx astro-claw",
   "main": "index.js",
   "type": "module",

package/slack-setup.js

@@ -6,7 +6,7 @@
  */
 
 import puppeteer from "puppeteer-core";
-import { readFileSync } from "node:fs";
+import { readFileSync, writeFileSync, unlinkSync } from "node:fs";
 import { resolve, dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 import { execSync } from "node:child_process";
@@ -14,6 +14,30 @@ import { homedir } from "node:os";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const MANIFEST_PATH = resolve(__dirname, "slack-manifest.json");
+const ICON_PATH = resolve(__dirname, "astronaut-icon.png");
+
+// Create a tiny base64 icon for the browser banner
+function getIconDataUrl() {
+  try {
+    const tmpIcon = resolve(__dirname, ".banner-icon-tmp.png");
+    // Use sips (macOS) or convert to resize, fall back to full image
+    try {
+      execSync(`sips -z 48 48 "${ICON_PATH}" --out "${tmpIcon}" 2>/dev/null`, { stdio: "ignore" });
+    } catch {
+      try {
+        execSync(`convert "${ICON_PATH}" -resize 48x48 "${tmpIcon}" 2>/dev/null`, { stdio: "ignore" });
+      } catch {
+        // Use original (will be larger but still works)
+        return `data:image/png;base64,${readFileSync(ICON_PATH).toString("base64")}`;
+      }
+    }
+    const data = `data:image/png;base64,${readFileSync(tmpIcon).toString("base64")}`;
+    try { unlinkSync(tmpIcon); } catch {}
+    return data;
+  } catch {
+    return null;
+  }
+}
 
 // ─── Terminal Colors ────────────────────────────────────────────────
 const bold = (s) => `\x1b[1m${s}\x1b[0m`;
@@ -117,6 +141,49 @@ export default async function selfDrivingSlackSetup() {
 
     const page = (await browser.pages())[0] || await browser.newPage();
 
+    // ── Visual cue: inject banner on every page load ──
+    const iconDataUrl = getIconDataUrl();
+    const iconEl = iconDataUrl
+      ? `<img src="${iconDataUrl}" style="width: 22px; height: 22px; border-radius: 5px;" />`
+      : `<span style="font-size: 16px;">🤖</span>`;
+    const BANNER_CSS = `
+      position: fixed; top: 0; left: 0; right: 0; z-index: 2147483647;
+      height: 38px; display: flex; align-items: center; justify-content: center; gap: 10px;
+      background: linear-gradient(135deg, #6C5CE7, #A855F7);
+      color: #fff; font: 600 13px/1 -apple-system, BlinkMacSystemFont, sans-serif;
+      box-shadow: 0 2px 8px rgba(108, 92, 231, 0.4);
+      letter-spacing: 0.3px;
+    `;
+    const BANNER_HTML = `
+      <div id="astro-claw-banner" style="${BANNER_CSS}">
+        ${iconEl}
+        <span>Astro Claw is driving this browser</span>
+        <span style="opacity: 0.6; font-weight: 400; font-size: 11px; margin-left: 4px;">— do not close</span>
+      </div>
+    `;
+    const BODY_PADDING = `
+      if (!document.body.dataset.astroClaw) {
+        document.body.style.paddingTop = (parseFloat(getComputedStyle(document.body).paddingTop) + 36) + 'px';
+        document.body.dataset.astroClaw = '1';
+      }
+    `;
+    const injectBanner = async (p) => {
+      try {
+        await p.evaluate((html, bodyJs) => {
+          if (!document.getElementById('astro-claw-banner')) {
+            document.body.insertAdjacentHTML('beforeend', html);
+            eval(bodyJs);
+          }
+        }, BANNER_HTML, BODY_PADDING);
+      } catch {}
+    };
+
+    // Inject banner after every navigation and periodically
+    page.on('load', () => injectBanner(page));
+    page.on('domcontentloaded', () => injectBanner(page));
+    page.on('framenavigated', () => setTimeout(() => injectBanner(page), 500));
+    const bannerInterval = setInterval(() => injectBanner(page), 2000);
+
     // ── Step 1: Sign in to Slack (single tab, no interruptions) ──
     console.log(`    → Checking Slack login...`);
     await page.goto("https://api.slack.com/apps", { waitUntil: "networkidle2", timeout: 30000 });
@@ -509,6 +576,7 @@ export default async function selfDrivingSlackSetup() {
     }
 
     // ── Clean up ──
+    clearInterval(bannerInterval);
     await browser.close();
 
     // Return whatever we captured
@@ -524,6 +592,7 @@ export default async function selfDrivingSlackSetup() {
     return result;
   } catch (err) {
     console.log(`    ${WARN} Browser automation error: ${err.message}`);
+    clearInterval(bannerInterval);
     if (browser) await browser.close().catch(() => {});
     return null;
   }