@calo-design/cli 0.5.1 → 0.7.0

package/bin/cli.js

@@ -18,7 +18,9 @@ const path = require("node:path");
 const { cmdPush } = require("./mirror-push");
 const { cmdArtPush } = require("./art-push");
 const { cmdShare } = require("./share");
+const { cmdImage } = require("./imagegen");
 const { cmdLogin, cmdLogout, ensureLoggedIn, githubToken, reportEvent, ensureSession, loadSession, BROKER } = require("./login");
+const { cmdFeedback, cmdTasks } = require("./feedback");
 
 const ORG = "Calo-Design";
 const SKILL_REPO = `${ORG}/calo-design`;
@@ -771,10 +773,17 @@ function help() {
   ${c.dim("    push --slug x --title \"…\" --owner \"…\" --screenshot path  --dry-run  --direct")}
   ${c.dim("art push <dir>")}                            upload a bulk image set to the CDN + emit a remote-source manifest (login only)
   ${c.dim("    art push ./art/byo --set byo --manifest src/byo-art.ts  --dry-run  --force  --direct")}
+  ${c.dim("image \"<prompt>\"")}                          AI image generation via the broker (metered per user; login only)
+  ${c.dim("    image \"…\" --out hero.png --ref photo.jpg --model google/gemini-3-pro-image --json")}
+  ${c.dim("image usage")}                               your monthly image-generation metering (images + USD)
   ${c.dim("share")}                                     publish THIS web prototype (React/Vite/CRA/Next) to Cloudflare Pages → share link
   ${c.dim("    share --slug x --dir dist --build --project calo-prototypes  --dry-run")}
   ${c.dim("gallery")}                                   serve the @calo/design-system component gallery locally (live from the runtime)
   ${c.dim("    gallery --port 8091")}
+  ${c.dim("feedback [slug]")}                           feedback inbox for shared prototypes (open threads; --all, --json)
+  ${c.dim("    feedback new <slug> <text>   comment|resolve|reopen <threadId>   shot <slug> <png>")}
+  ${c.dim("tasks [slug]")}                              triaged work items (--status todo|in_progress|done|wontfix, --json)
+  ${c.dim("    tasks new <slug> <title> --from <threadId>   start|done|wontfix <id>   done <id> --version v9")}
 
   Login is required once before init; the session refreshes automatically.
   init always installs the skill and ensures the shared ds/flows runtime on your machine;
@@ -794,10 +803,13 @@ function help() {
     else if (cmd === "art" && args[1] === "push") await cmdArtPush(args.slice(2));
     else if (cmd === "art") throw new Error("unknown art command — did you mean `calo-design art push <dir>`?");
     else if (cmd === "share") await cmdShare(args.slice(1));
+    else if (cmd === "image") await cmdImage(args.slice(1));
     else if (cmd === "feed") await cmdFeed();
     else if (cmd === "insights") await cmdInsights();
     else if (cmd === "whoami") await cmdWhoami();
     else if (cmd === "gallery") await cmdGallery();
+    else if (cmd === "feedback") await cmdFeedback(args.slice(1));
+    else if (cmd === "tasks") await cmdTasks(args.slice(1));
     else help();
   } catch (err) {
     // Diagnostics go to stderr so stdout stays pure for machine callers (The Pass parses

package/bin/feedback.js

@@ -0,0 +1,193 @@
+"use strict";
+
+/**
+ * `calo-design feedback …` / `calo-design tasks …` — prototype feedback threads and
+ * triaged tasks, stored broker-side (calo-broker docs/feedback-plan.md).
+ *
+ * Triple duty: humans in the terminal, Claude working the task queue, and Design
+ * Kitchen shelling out with --json (same bridge pattern as `feed --json`). All calls
+ * ride the existing broker session (ensureSession → Bearer).
+ *
+ *   feedback [slug]                 inbox (open threads; --all for resolved too)
+ *   feedback new <slug> <text…>     plain thread (no pin)
+ *   feedback comment <threadId> <text…>
+ *   feedback resolve <threadId> | reopen <threadId>
+ *   feedback shot <slug> <file.png> upload a pin screenshot → prints URL
+ *   tasks [slug]                    list (--status todo|in_progress|done|wontfix)
+ *   tasks new <slug> <title…>       (--from <threadId> converts a thread, --body <text>)
+ *   tasks start|done|wontfix <id>   (done: --version <v> stamps closed_in_version)
+ */
+
+const fs = require("node:fs");
+const { ensureSession, BROKER } = require("./login");
+
+const c = { dim: (s) => `\x1b[2m${s}\x1b[0m`, b: (s) => `\x1b[1m${s}\x1b[0m`, g: (s) => `\x1b[32m${s}\x1b[0m`, y: (s) => `\x1b[33m${s}\x1b[0m` };
+const log = (s = "") => console.log(s);
+
+// Bounded fetch that speaks the broker's JSON envelope. GET+POST (login.js api() is
+// POST-only); --json callers get the raw response text so the bridge never re-encodes.
+async function call(method, pathname, { body, raw } = {}) {
+  const session = await ensureSession();
+  let res;
+  try {
+    res = await fetch(BROKER + pathname, {
+      method,
+      headers: {
+        authorization: `Bearer ${session}`,
+        ...(body !== undefined && !Buffer.isBuffer(body) ? { "content-type": "application/json" } : {}),
+        ...(Buffer.isBuffer(body) ? { "content-type": "image/png" } : {}),
+      },
+      body: body === undefined ? undefined : Buffer.isBuffer(body) ? body : JSON.stringify(body),
+      signal: AbortSignal.timeout(30000),
+    });
+  } catch (e) {
+    throw new Error(`can't reach the Calo broker at ${BROKER} (${e.message})`);
+  }
+  const text = await res.text();
+  let json;
+  try { json = text ? JSON.parse(text) : {}; } catch { json = { raw: text }; }
+  if (!res.ok) throw new Error(json.error || `${pathname} → HTTP ${res.status}`);
+  return raw ? text : json;
+}
+
+const flagVal = (args, name) => {
+  const i = args.indexOf(`--${name}`);
+  return i >= 0 && args[i + 1] && !args[i + 1].startsWith("--") ? args[i + 1] : undefined;
+};
+const stripFlags = (args) => args.filter((a, i, all) => !a.startsWith("--") && !(all[i - 1] || "").match(/^--(status|version|from|body|route|anchor|shot)$/));
+
+const ago = (ts) => {
+  const s = Math.max(1, Math.floor(Date.now() / 1000) - ts);
+  if (s < 3600) return `${Math.floor(s / 60)}m`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h`;
+  return `${Math.floor(s / 86400)}d`;
+};
+const short = (id) => id.slice(0, 8);
+// A thread's version is the deploy it was left on; slugs.last_version is current.
+const stale = (t) => t.version && t.current_version && t.version !== t.current_version;
+
+function printThread(t, { comments = false } = {}) {
+  const state = t.status === "resolved" ? c.g("✓ resolved") : c.y("● open");
+  const pin = t.anchor_json ? " 📌" : "";
+  const staleTag = stale(t) ? c.y(" [stale]") : "";
+  const task = t.task ? c.dim(`  → task ${short(t.task.id)} (${t.task.status})`) : "";
+  log(`${state}  ${c.b(t.slug)}${t.route ? c.dim(" " + t.route) : ""}${pin}${staleTag}  ${c.dim(short(t.id))}  ${c.dim(ago(t.created_at) + " ago")}${task}`);
+  const list = comments ? t.comments : t.comments.slice(0, 1);
+  for (const cm of list) {
+    const who = cm.kind === "system" ? c.dim("system") : cm.author.split("@")[0];
+    log(`    ${who}: ${cm.kind === "system" ? c.dim(cm.body) : cm.body}`);
+  }
+  if (!comments && t.comments.length > 1) log(c.dim(`    … ${t.comments.length - 1} more — calo-design feedback ${t.slug}`));
+}
+
+async function cmdFeedback(args = []) {
+  const json = args.includes("--json");
+  const sub = args[0] && !args[0].startsWith("--") ? args[0] : "";
+
+  if (sub === "new") {
+    const [slug, ...words] = stripFlags(args.slice(1));
+    const body = words.join(" ").trim();
+    if (!slug || !body) throw new Error("usage: calo-design feedback new <slug> <text…> [--shot <png>] [--anchor <json>] [--route <path>] [--version <v>]");
+    // Pin threads (Kitchen Review view): upload the frozen frame first, then attach
+    // its URL — /v1/feedback/thread only accepts screenshot URLs minted by /shot.
+    let screenshotUrl;
+    const shotFile = flagVal(args, "shot");
+    if (shotFile) {
+      const png = fs.readFileSync(shotFile);
+      const up = await call("POST", `/v1/feedback/shot?slug=${encodeURIComponent(slug)}`, { body: png });
+      screenshotUrl = up.url;
+    }
+    let anchor;
+    const anchorRaw = flagVal(args, "anchor");
+    if (anchorRaw) {
+      try { anchor = JSON.parse(anchorRaw); } catch { throw new Error("--anchor must be a JSON object"); }
+    }
+    const r = await call("POST", "/v1/feedback/thread", {
+      body: { slug, body, screenshotUrl, anchor, route: flagVal(args, "route"), version: flagVal(args, "version") },
+      raw: json,
+    });
+    if (json) return process.stdout.write(r + "\n");
+    log(`${c.g("✓")} thread ${short(r.thread.id)} opened on ${c.b(slug)}${screenshotUrl ? c.dim(" (with screenshot)") : ""}`);
+    return;
+  }
+
+  if (sub === "comment" || sub === "resolve" || sub === "reopen") {
+    const [threadId, ...words] = stripFlags(args.slice(1));
+    if (!threadId) throw new Error(`usage: calo-design feedback ${sub} <threadId>${sub === "comment" ? " <text…>" : ""}`);
+    const path = { comment: "/v1/feedback/comment", resolve: "/v1/feedback/resolve", reopen: "/v1/feedback/reopen" }[sub];
+    const body = sub === "comment" ? { threadId, body: words.join(" ").trim() } : { threadId };
+    if (sub === "comment" && !body.body) throw new Error("comment text required");
+    const r = await call("POST", path, { body, raw: json });
+    if (json) return process.stdout.write(r + "\n");
+    log(`${c.g("✓")} ${sub === "comment" ? "commented" : sub + "ed"}`);
+    return;
+  }
+
+  if (sub === "shot") {
+    const [slug, file] = stripFlags(args.slice(1));
+    if (!slug || !file) throw new Error("usage: calo-design feedback shot <slug> <file.png>");
+    const png = fs.readFileSync(file);
+    const r = await call("POST", `/v1/feedback/shot?slug=${encodeURIComponent(slug)}`, { body: png, raw: json });
+    if (json) return process.stdout.write(r + "\n");
+    log(`${c.g("✓")} ${r.url}`);
+    return;
+  }
+
+  // list: `feedback` (inbox: open everywhere) or `feedback <slug>` (--all incl. resolved)
+  const slug = sub || undefined;
+  const all = args.includes("--all");
+  const qs = new URLSearchParams();
+  if (slug) qs.set("slug", slug);
+  if (!all) qs.set("status", "open");
+  const r = await call("GET", `/v1/feedback?${qs}`, { raw: json });
+  if (json) return process.stdout.write(r + "\n");
+  const threads = r.threads;
+  if (!threads.length) return log(c.dim(slug ? `no ${all ? "" : "open "}feedback on ${slug}` : "inbox zero 🎉"));
+  log(c.b(`\n${threads.length} thread(s)${slug ? ` on ${slug}` : ""}${all ? "" : " (open)"}\n`));
+  for (const t of threads) printThread(t, { comments: !!slug });
+}
+
+async function cmdTasks(args = []) {
+  const json = args.includes("--json");
+  const sub = args[0] && !args[0].startsWith("--") ? args[0] : "";
+
+  if (sub === "new") {
+    const [slug, ...words] = stripFlags(args.slice(1));
+    const title = words.join(" ").trim();
+    if (!slug || !title) throw new Error("usage: calo-design tasks new <slug> <title…> [--from <threadId>] [--body <text>]");
+    const body = { slug, title, sourceThread: flagVal(args, "from"), body: flagVal(args, "body") };
+    const r = await call("POST", "/v1/tasks", { body, raw: json });
+    if (json) return process.stdout.write(r + "\n");
+    log(`${c.g("✓")} task ${short(r.task.id)}: ${r.task.title}${r.task.source_thread ? c.dim(` (from thread ${short(r.task.source_thread)})`) : ""}`);
+    return;
+  }
+
+  if (["start", "done", "wontfix"].includes(sub)) {
+    const [id] = stripFlags(args.slice(1));
+    if (!id) throw new Error(`usage: calo-design tasks ${sub} <id>`);
+    const status = sub === "start" ? "in_progress" : sub;
+    const body = { id, status, ...(sub === "done" && flagVal(args, "version") ? { closedInVersion: flagVal(args, "version") } : {}) };
+    const r = await call("POST", "/v1/tasks/update", { body, raw: json });
+    if (json) return process.stdout.write(r + "\n");
+    log(`${c.g("✓")} ${r.task.title} → ${c.b(r.task.status)}${r.task.closed_in_version ? c.dim(` (${r.task.closed_in_version})`) : ""}`);
+    if (sub === "done") log(c.dim("  source thread (if any) auto-resolved"));
+    return;
+  }
+
+  const slug = sub || undefined;
+  const qs = new URLSearchParams();
+  if (slug) qs.set("slug", slug);
+  const status = flagVal(args, "status");
+  if (status) qs.set("status", status);
+  const r = await call("GET", `/v1/tasks?${qs}`, { raw: json });
+  if (json) return process.stdout.write(r + "\n");
+  const list = r.tasks;
+  if (!list.length) return log(c.dim("no tasks" + (slug ? ` on ${slug}` : "")));
+  log(c.b(`\n${list.length} task(s)${slug ? ` on ${slug}` : ""}\n`));
+  const badge = { todo: c.y("○ todo"), in_progress: c.b("◐ in progress"), done: c.g("● done"), wontfix: c.dim("✕ wontfix") };
+  for (const t of list) {
+    log(`${badge[t.status] || t.status}  ${c.b(t.slug)}  ${t.title}  ${c.dim(short(t.id))}${t.source_thread ? c.dim(" ← " + short(t.source_thread)) : ""}${t.closed_in_version ? c.dim(" " + t.closed_in_version) : ""}`);
+  }
+}
+
+module.exports = { cmdFeedback, cmdTasks };

package/bin/imagegen.js

@@ -0,0 +1,171 @@
+"use strict";
+
+/**
+ * `calo-design image` — metered AI image generation through the Calo broker.
+ *
+ *   calo-design image "prompt"                  generate → writes ./<slug>.png, prints path + URL + cost
+ *   calo-design image "prompt" --out hero.png   choose the output path
+ *   calo-design image "prompt" --ref photo.jpg  reference/edit input (repeatable, ≤4)
+ *   calo-design image "prompt" --model <id>     pick an allowed model (default: broker's)
+ *   calo-design image usage                     your monthly metering (images + USD, caps)
+ *   --json on either form for machine callers (the design/marketing skills use this)
+ *
+ * The OpenRouter key lives on the broker only; identity is the normal CLI session,
+ * and the broker meters every generated image per user per month. The broker also
+ * mirrors each image to the CDN (content-hashed, immutable) and returns that URL —
+ * use it directly in prototypes; the local file is for creatives/mockups.
+ */
+
+const fs = require("node:fs");
+const path = require("node:path");
+const { ensureSession, BROKER } = require("./login");
+
+const c = { dim: (s) => `\x1b[2m${s}\x1b[0m`, b: (s) => `\x1b[1m${s}\x1b[0m`, g: (s) => `\x1b[32m${s}\x1b[0m` };
+const log = (s = "") => console.log(s);
+
+const MIMES = { ".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg", ".webp": "image/webp" };
+const EXTS = { "image/png": "png", "image/jpeg": "jpg", "image/webp": "webp" };
+
+// --flag value (both `--flag=v` and `--flag v`), collecting repeats.
+function flagAll(args, name) {
+  const out = [];
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === `--${name}` && args[i + 1] != null) out.push(args[++i]);
+    else if (args[i].startsWith(`--${name}=`)) out.push(args[i].split("=").slice(1).join("="));
+  }
+  return out;
+}
+const flag = (args, name) => flagAll(args, name)[0];
+
+async function apiGet(pathname, session) {
+  let res;
+  try {
+    res = await fetch(BROKER + pathname, {
+      headers: { authorization: `Bearer ${session}` },
+      signal: AbortSignal.timeout(15000),
+    });
+  } catch (e) {
+    throw new Error(`can't reach the Calo broker at ${BROKER} (${e.message})`);
+  }
+  const json = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(json.error || `${pathname} → HTTP ${res.status}`);
+  return json;
+}
+
+function refToDataUrl(file) {
+  const mime = MIMES[path.extname(file).toLowerCase()];
+  if (!mime) throw new Error(`--ref ${file}: must be a .png/.jpg/.jpeg/.webp file`);
+  let buf;
+  try {
+    buf = fs.readFileSync(file);
+  } catch {
+    throw new Error(`--ref ${file}: can't read file`);
+  }
+  if (buf.length > 6e6) throw new Error(`--ref ${file}: over 6 MB — resize it first`);
+  return `data:${mime};base64,${buf.toString("base64")}`;
+}
+
+// "A hero shot of a grain bowl!" → "a-hero-shot-of-a-grain"
+const promptSlug = (p) =>
+  p.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").split("-").slice(0, 5).join("-") || "image";
+
+// Unique output path: <base>.<ext>, <base>-2.<ext>, ... (never overwrite silently).
+function outPath(base, ext, taken) {
+  for (let n = 1; ; n++) {
+    const p = n === 1 ? `${base}.${ext}` : `${base}-${n}.${ext}`;
+    if (!taken.has(p) && !fs.existsSync(p)) {
+      taken.add(p);
+      return p;
+    }
+  }
+}
+
+const money = (v) => `$${(Number(v) || 0).toFixed(v >= 0.1 ? 2 : 4)}`;
+
+async function cmdImageUsage(jsonOut) {
+  const session = await ensureSession();
+  const u = await apiGet("/v1/imagegen/usage", session);
+  if (jsonOut) {
+    process.stdout.write("\n" + JSON.stringify(u) + "\n"); // own line — machine callers parse the last non-empty line
+    return;
+  }
+  const cur = u.months[u.month] || { images: 0, cost: 0, byModel: {} };
+  log(`${c.b(u.email)} — image generation for ${c.b(u.month)}`);
+  log(`  ${cur.images}/${u.limits.monthlyImages || "∞"} images · ${money(cur.cost)}/$${u.limits.monthlyCostUsd || "∞"}`);
+  for (const [m, v] of Object.entries(cur.byModel || {})) log(c.dim(`    ${m}: ${v.images} images · ${money(v.cost)}`));
+  log(c.dim(`  org this month: ${u.orgMonth.images} images · ${money(u.orgMonth.cost)} (budget $${u.limits.globalMonthlyCostUsd || "∞"})`));
+  const past = Object.keys(u.months).filter((m) => m !== u.month).sort().reverse();
+  for (const m of past.slice(0, 6)) log(c.dim(`  ${m}: ${u.months[m].images} images · ${money(u.months[m].cost)}`));
+  if (!u.configured) log(c.dim("  (generation currently disabled on the broker — no OPENROUTER_API_KEY)"));
+}
+
+async function cmdImage(args) {
+  const jsonOut = args.includes("--json");
+  if (args[0] === "usage") return cmdImageUsage(jsonOut);
+
+  // First positional = the prompt. Walk the args so a space-separated flag value
+  // (`--ref img.png`) is never mistaken for it.
+  const VALUE_FLAGS = new Set(["--out", "--model", "--ref"]);
+  let prompt;
+  for (let i = 0; i < args.length; i++) {
+    if (VALUE_FLAGS.has(args[i])) i++; // skip the flag's value
+    else if (!args[i].startsWith("--")) { prompt = args[i]; break; }
+  }
+  if (!prompt) {
+    throw new Error(
+      'usage: calo-design image "<prompt>" [--out file.png] [--ref img.png]... [--model id] [--json]\n  or:  calo-design image usage'
+    );
+  }
+  const refImages = flagAll(args, "ref").map(refToDataUrl);
+  const model = flag(args, "model");
+  const out = flag(args, "out");
+
+  const session = await ensureSession();
+  if (!jsonOut) log(c.dim(`Generating${model ? ` with ${model}` : ""}… (typically 10–30s)`));
+  let res;
+  try {
+    res = await fetch(BROKER + "/v1/imagegen", {
+      method: "POST",
+      headers: { "content-type": "application/json", authorization: `Bearer ${session}` },
+      body: JSON.stringify({ prompt, ...(model ? { model } : {}), ...(refImages.length ? { refImages } : {}) }),
+      signal: AbortSignal.timeout(180000),
+    });
+  } catch (e) {
+    throw new Error(`can't reach the Calo broker at ${BROKER} (${e.message})`);
+  }
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(data.error || `imagegen → HTTP ${res.status}`);
+
+  // Write files. --out names the first image exactly (extension from the actual
+  // mime wins over a mismatched one); extras and the no---out case get slug names.
+  const taken = new Set();
+  const files = [];
+  for (const [i, img] of data.images.entries()) {
+    const ext = EXTS[img.mime] || "png";
+    let file;
+    if (out && i === 0) {
+      const wanted = out.replace(/\.(png|jpe?g|webp)$/i, "");
+      file = outPath(wanted, ext, taken);
+    } else {
+      file = outPath(path.join(process.cwd(), promptSlug(prompt)), ext, taken);
+    }
+    fs.mkdirSync(path.dirname(path.resolve(file)), { recursive: true });
+    fs.writeFileSync(file, Buffer.from(img.b64, "base64"));
+    files.push({ file: path.resolve(file), url: img.url, mime: img.mime });
+  }
+
+  if (jsonOut) {
+    const { images: _images, ...rest } = data; // drop the base64 payload from machine output
+    process.stdout.write("\n" + JSON.stringify({ ...rest, files }) + "\n");
+    return;
+  }
+  for (const f of files) {
+    log(`${c.g("✓")} ${f.file}`);
+    if (f.url) log(c.dim(`  hosted: ${f.url}`));
+  }
+  if (data.text) log(c.dim(`  model note: ${data.text}`));
+  const u = data.usage;
+  log(c.dim(`  ${data.model} · this call ${money(data.cost)} · ${u.month}: ${u.images}/${u.limits.monthlyImages || "∞"} images, ${money(u.cost)}/$${u.limits.monthlyCostUsd || "∞"}`));
+}
+
+module.exports = { cmdImage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calo-design/cli",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "description": "One-line setup for Calo design tooling: logs in with your Calo email and installs the calo-design skill + design-system packages. No GitHub account needed.",
   "bin": {
     "calo-design": "bin/cli.js"