@kendoo.agentdesk/agentdesk 0.4.0 → 0.4.3

package/bin/agentdesk.mjs

@@ -2,6 +2,27 @@
 
 // AgentDesk CLI — AI team orchestrator
 
+import { readFileSync } from "fs";
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const pkg = JSON.parse(readFileSync(join(__dirname, "../package.json"), "utf-8"));
+
+// Non-blocking update check — runs in background, never delays startup
+(async () => {
+  try {
+    const res = await fetch(`https://registry.npmjs.org/${pkg.name}/latest`, { signal: AbortSignal.timeout(3000) });
+    if (!res.ok) return;
+    const { version } = await res.json();
+    if (version !== pkg.version) {
+      console.log(`\n  Update available: ${pkg.version} → ${version}`);
+      console.log(`  Run: npm i -g ${pkg.name}\n`);
+    }
+  } catch {}
+})();
+
 const args = process.argv.slice(2);
 const command = args[0];
 

package/cli/agents.mjs

@@ -7,7 +7,7 @@ export const BUILT_IN_AGENTS = {
     description: "facilitates discussion, clarifies requirements, keeps the team focused, evaluates team performance at the end",
     groundRules: "Jane resolves disagreements and keeps the discussion productive. She NEVER reads code, runs tools, or inspects files — that's the developer and auditor's job. She focuses on requirements, user impact, scope, and coordination.",
     brainstorm: { tag: "SAY", focus: "facilitation, question, or summary" },
-    planning: "Requirements Summary (what we're building, acceptance criteria, scope boundaries)",
+    planning: "Requirements Summary (what we're building, acceptance criteria, scope boundaries). If this task involves UI changes, Jane declares it a UI task and tells Luna to define screenshot requirements.",
     execution: {
       step: "Jane wraps up",
       tasks: [
@@ -68,7 +68,9 @@ export const BUILT_IN_AGENTS = {
         "Read EVERY file the developer changed.",
         "Check calculations, edge cases, error handling.",
         "Run linter and build.",
+        "If this is a UI task, capture screenshots following Luna's screenshot plan (see SCREENSHOTS section in prompt).",
         "If ALL criteria pass, push and create PR: `gh pr create --title \"...\" --body \"...\"`",
+        "Post screenshots to the task tracker as a separate comment (not inside badge blocks).",
         "Approve the PR if clean.",
       ],
       order: 4,
@@ -100,7 +102,7 @@ export const BUILT_IN_AGENTS = {
     groundRules: "Luna must review any UI changes for visual consistency, spacing, color harmony, accessibility (contrast, focus states), and intuitive interaction flow. She references specific components, screenshots, or design patterns.",
     codePrinciple: "Reviews all UI changes for visual hierarchy, whitespace balance, color consistency, typography, responsive behavior, and accessibility (WCAG). Pushes back on cluttered layouts, inconsistent spacing, poor contrast, or confusing interaction flows. Proposes specific CSS/styling improvements with exact values.",
     brainstorm: { tag: "THINK", focus: "UX/UI impact, visual consistency, interaction patterns, accessibility" },
-    planning: "UX Review (visual impact, layout concerns, accessibility checklist, interaction improvements)",
+    planning: "UX Review (visual impact, layout concerns, accessibility checklist, interaction improvements). For UI tasks: define which pages/views need screenshots and whether desktop, mobile, or both are relevant.",
     execution: {
       step: "Luna reviews UI changes (if applicable)",
       tasks: [
@@ -109,6 +111,7 @@ export const BUILT_IN_AGENTS = {
         "Verify accessibility: contrast ratios, focus states, keyboard navigation, screen reader labels.",
         "Check responsive behavior and interaction flow.",
         "If issues found, propose specific fixes (exact CSS values, spacing, colors). The developer implements them before proceeding.",
+        "Define the screenshot plan: which pages/routes to capture and which viewports (desktop, mobile, or both). Hand this plan to Bart.",
         "Skip this step if the task has no UI impact.",
       ],
       order: 2.1,

package/cli/screenshot.mjs

@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+
+// Lightweight screenshot utility — used by agents to capture UI changes
+// Usage: node cli/screenshot.mjs <url> [--out <dir>] [--viewports desktop,mobile]
+//
+// Requires puppeteer — installed on demand via dynamic import if not present.
+// Outputs file paths of captured screenshots.
+
+import { mkdirSync, existsSync } from "fs";
+import { join } from "path";
+
+const VIEWPORTS = {
+  desktop: { width: 1280, height: 800, label: "desktop" },
+  mobile: { width: 375, height: 812, label: "mobile", isMobile: true },
+};
+
+function parseArgs(argv) {
+  const args = argv.slice(2);
+  const result = { url: null, out: "screenshots", viewports: ["desktop", "mobile"] };
+
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === "--out" && args[i + 1]) result.out = args[++i];
+    else if (args[i] === "--viewports" && args[i + 1]) result.viewports = args[++i].split(",");
+    else if (!args[i].startsWith("-")) result.url = args[i];
+  }
+
+  return result;
+}
+
+async function loadPuppeteer() {
+  try {
+    return await import("puppeteer");
+  } catch {
+    console.log("Installing puppeteer...");
+    const { execSync } = await import("child_process");
+    execSync("npm install --no-save puppeteer", { stdio: "inherit" });
+    return await import("puppeteer");
+  }
+}
+
+async function main() {
+  const { url, out, viewports } = parseArgs(process.argv);
+
+  if (!url) {
+    console.error("Usage: node cli/screenshot.mjs <url> [--out <dir>] [--viewports desktop,mobile]");
+    process.exit(1);
+  }
+
+  const puppeteer = await loadPuppeteer();
+  const browser = await puppeteer.default.launch({ headless: "new" });
+  const outDir = join(process.cwd(), out);
+  if (!existsSync(outDir)) mkdirSync(outDir, { recursive: true });
+
+  const files = [];
+
+  for (const vp of viewports) {
+    const config = VIEWPORTS[vp];
+    if (!config) {
+      console.warn(`Unknown viewport "${vp}" — skipping`);
+      continue;
+    }
+
+    const page = await browser.newPage();
+    await page.setViewport({ width: config.width, height: config.height });
+    if (config.isMobile) {
+      await page.emulate(puppeteer.default.devices["iPhone 13"]);
+    }
+
+    await page.goto(url, { waitUntil: "networkidle0", timeout: 30000 });
+    // Wait a bit for animations to settle
+    await new Promise(r => setTimeout(r, 1000));
+
+    const filename = `${config.label}-${Date.now()}.png`;
+    const filepath = join(outDir, filename);
+    await page.screenshot({ path: filepath, fullPage: true });
+    files.push(filepath);
+    console.log(`Captured ${config.label}: ${filepath}`);
+    await page.close();
+  }
+
+  await browser.close();
+
+  // Print paths for agents to use
+  console.log("\nScreenshot files:");
+  for (const f of files) console.log(f);
+}
+
+main().catch(err => {
+  console.error("Screenshot failed:", err.message);
+  process.exit(1);
+});

package/cli/team.mjs

@@ -139,8 +139,7 @@ export async function runTeam(taskId, opts = {}) {
   const projectEnv = loadDotEnv(cwd);
   const apiKey = projectEnv.AGENTDESK_API_KEY || process.env.AGENTDESK_API_KEY || getStoredApiKey() || null;
   const agentdeskServer = process.env.AGENTDESK_SERVER || "https://agentdesk.live";
-  const baseUrl = process.env.AGENTDESK_URL || "wss://agentdesk.live/ws/agent";
-  const AGENTDESK_URL = apiKey ? `${baseUrl}?api_key=${apiKey}` : baseUrl;
+  const AGENTDESK_URL = process.env.AGENTDESK_URL || "wss://agentdesk.live/ws/agent";
   const sessionId = `${taskId}-${randomUUID().slice(0, 8)}`;
   const inboxUrl = `${agentdeskServer}/api/sessions/${sessionId}/inbox`;
 
@@ -177,33 +176,40 @@ export async function runTeam(taskId, opts = {}) {
   try {
     vizWs = new WebSocket(AGENTDESK_URL);
     vizWs.on("open", () => {
-      vizConnected = true;
-      console.log("AgentDesk: connected");
-      vizSend({
-        type: "session:start",
-        taskId,
-        taskLink,
-        title: description || taskId,
-        project: project.name || null,
-        sessionNumber: 1,
-        agents: ["Jane", "Dennis", "Bart", "Vera", "Sam", "Luna", "Mark"],
-      });
-      while (vizQueue.length > 0 && vizWs.readyState === WebSocket.OPEN) {
-        vizWs.send(vizQueue.shift());
+      // Authenticate via first message (proxy-safe — query params can be stripped)
+      if (apiKey) {
+        vizWs.send(JSON.stringify({ type: "auth", apiKey }));
+      }
+    });
+    vizWs.on("message", (raw) => {
+      let msg;
+      try { msg = JSON.parse(raw.toString()); } catch { return; }
+      if (msg.type === "auth:ok") {
+        vizConnected = true;
+        console.log("AgentDesk: connected");
+        vizSend({
+          type: "session:start",
+          taskId,
+          taskLink,
+          title: description || taskId,
+          project: project.name || null,
+          sessionNumber: 1,
+          agents: ["Jane", "Dennis", "Bart", "Vera", "Sam", "Luna", "Mark"],
+        });
+        while (vizQueue.length > 0 && vizWs.readyState === WebSocket.OPEN) {
+          vizWs.send(vizQueue.shift());
+        }
+      } else if (msg.type === "auth:error") {
+        console.log("AgentDesk: authentication failed — run 'agentdesk login'");
+        vizConnected = false;
       }
     });
     vizWs.on("error", () => { vizConnected = false; });
     vizWs.on("close", (code) => {
       vizConnected = false;
-      if (code === 1006 && !vizConnected) {
-        console.log("AgentDesk: not connected — run 'agentdesk login' to authenticate");
-      }
-    });
-    vizWs.on("unexpected-response", (_req, res) => {
-      if (res.statusCode === 401) {
+      if (code === 4001) {
         console.log("AgentDesk: authentication required — run 'agentdesk login'");
       }
-      vizConnected = false;
     });
   } catch {
     // AgentDesk not running

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kendoo.agentdesk/agentdesk",
-  "version": "0.4.0",
+  "version": "0.4.3",
   "description": "AI team orchestrator for Claude Code — run collaborative agent sessions from your terminal",
   "type": "module",
   "bin": {

package/prompts/team.md

@@ -110,6 +110,55 @@ Use log level tags in agent statements to classify the type of communication:
   ---
   ```
 
+## SCREENSHOTS
+
+When a task involves UI changes, the team MUST capture screenshots of the affected views. This is not optional for UI tasks.
+
+**Roles:**
+- **Jane** identifies during PLANNING whether this is a UI task (any visual changes to components, pages, layouts, or styles).
+- **Luna** defines the screenshot plan during her review step: which pages/routes to capture and which viewports (desktop, mobile, or both — based on what's relevant to the change).
+- **Bart** executes the screenshot plan during his review step, after all code changes are finalized.
+
+**How to capture screenshots:**
+
+1. Start the dev server in the background:
+   ```bash
+   echo "Starting dev server for screenshots..."
+   npm run dev &
+   DEV_PID=$!
+   sleep 5  # Wait for server to start
+   ```
+
+2. Take screenshots using the agentdesk screenshot utility:
+   ```bash
+   # Desktop + mobile (default)
+   node node_modules/@kendoo.agentdesk/agentdesk/cli/screenshot.mjs http://localhost:3000/affected-route --out screenshots
+
+   # Desktop only
+   node node_modules/@kendoo.agentdesk/agentdesk/cli/screenshot.mjs http://localhost:3000/route --viewports desktop
+
+   # Mobile only
+   node node_modules/@kendoo.agentdesk/agentdesk/cli/screenshot.mjs http://localhost:3000/route --viewports mobile
+   ```
+
+   If the utility is not available, use a manual approach:
+   ```bash
+   npx --yes puppeteer-cli screenshot http://localhost:3000/route --viewport 1280x800 --output desktop.png
+   npx --yes puppeteer-cli screenshot http://localhost:3000/route --viewport 375x812 --output mobile.png
+   ```
+
+3. Stop the dev server when done:
+   ```bash
+   kill $DEV_PID 2>/dev/null
+   ```
+
+4. Upload screenshots to the task tracker and post them as a separate comment (see STRICT RULES above for format).
+
+**When to capture:**
+- After ALL code changes, reviews, and fixes are complete (during Bart's review step)
+- Before creating the PR
+- Only capture the pages/views that were actually affected by the changes
+
 {{#LINEAR}}
 ## LINEAR INTEGRATION