pointer-feedback 0.1.2 → 0.1.4

package/dist/cli.js

@@ -15,7 +15,7 @@ var init_build_constants = __esm({
   "src/build-constants.ts"() {
     "use strict";
     BUILD_DEFAULT_SERVER = true ? "https://api.pointer.moamen.work" : "https://api.pointer.moamen.work";
-    BUILD_CLI_VERSION = true ? "0.1.2" : "0.0.0-dev";
+    BUILD_CLI_VERSION = true ? "0.1.4" : "0.0.0-dev";
   }
 });
 
@@ -866,27 +866,62 @@ var init_deployed = __esm({
 
 // src/prompt.ts
 import * as readline from "node:readline/promises";
+import { emitKeypressEvents } from "node:readline";
 import { Writable } from "node:stream";
+function assertInteractive() {
+  if (process.stdin.isTTY)
+    return;
+  console.error(
+    "\x1B[31mThis command is interactive, but stdin is not a terminal.\x1B[0m\nPiped input, CI, and some editor-embedded shells have no TTY, so there is no way to ask you anything.\n\nEither run it in a real terminal, or pass every answer as a flag:\n  npx -y pointer-feedback init --server <url> --key ptr_... --project <key> --environment local --yes\n\nRun 'npx -y pointer-feedback init --help' for the full list of flags."
+  );
+  process.exit(2);
+}
+var muted = false;
+var gatedStdout = new Writable({
+  write(chunk, encoding, callback) {
+    if (!muted)
+      process.stdout.write(chunk, encoding);
+    callback();
+  }
+});
+var shared = null;
+function iface() {
+  if (!shared) {
+    shared = readline.createInterface({
+      input: process.stdin,
+      output: gatedStdout,
+      terminal: true
+    });
+    shared.on("SIGINT", () => {
+      process.stdout.write("\n");
+      process.exit(130);
+    });
+  }
+  return shared;
+}
+function closePrompts() {
+  shared?.close();
+  shared = null;
+}
 async function ask(question, options = {}) {
-  let muted = false;
-  const mutableStdout = new Writable({
-    write: function(chunk, encoding, callback) {
-      if (!muted)
-        process.stdout.write(chunk, encoding);
-      callback();
-    }
-  });
-  const rl = readline.createInterface({
-    input: process.stdin,
-    output: mutableStdout,
-    terminal: true
-  });
+  assertInteractive();
+  const rl = iface();
   const displayQuestion = options.default ? `${question} [${options.default}]: ` : `${question}: `;
   while (true) {
-    process.stdout.write(displayQuestion);
+    const pending = rl.question(displayQuestion);
     if (options.secret)
       muted = true;
-    const answer = await rl.question("");
+    let answer;
+    try {
+      answer = await pending;
+    } catch (err) {
+      muted = false;
+      if (err?.code === "ABORT_ERR") {
+        process.stdout.write("\nCancelled \u2014 nothing was written.\n");
+        process.exit(130);
+      }
+      throw err;
+    }
     muted = false;
     if (options.secret)
       process.stdout.write("\n");
@@ -898,35 +933,96 @@ async function ask(question, options = {}) {
         continue;
       }
     }
-    rl.close();
     return finalAnswer;
   }
 }
+async function menu(question, items, cursorStart, opts) {
+  assertInteractive();
+  const rl = iface();
+  const selected = opts.selected ?? /* @__PURE__ */ new Set();
+  let cursor = Math.max(0, Math.min(cursorStart, items.length - 1));
+  const hint = opts.hint ?? (opts.multi ? "\x1B[2m  \u2191/\u2193 move \xB7 space toggle \xB7 a all \xB7 enter confirm\x1B[0m" : "\x1B[2m  \u2191/\u2193 move \xB7 enter select\x1B[0m");
+  const render = (first) => {
+    if (!first)
+      process.stdout.write(`\x1B[${items.length + 1}A`);
+    process.stdout.write("\x1B[0J");
+    process.stdout.write(`${hint}
+`);
+    items.forEach((item, i) => {
+      const pointer = i === cursor ? "\x1B[36m\u276F\x1B[0m" : " ";
+      const box = opts.multi ? selected.has(i) ? "\x1B[36m[x]\x1B[0m " : "[ ] " : "";
+      const label = i === cursor ? `\x1B[36m${item}\x1B[0m` : item;
+      process.stdout.write(`${pointer} ${box}${label}
+`);
+    });
+  };
+  console.log(question);
+  rl.pause();
+  emitKeypressEvents(process.stdin);
+  const wasRaw = process.stdin.isRaw ?? false;
+  if (process.stdin.setRawMode)
+    process.stdin.setRawMode(true);
+  process.stdin.resume();
+  render(true);
+  try {
+    return await new Promise((resolve4) => {
+      const onKey = (_str, key) => {
+        if (key.ctrl && key.name === "c") {
+          cleanup();
+          process.stdout.write("\n");
+          process.exit(130);
+        }
+        if (key.name === "up" || key.name === "k") {
+          cursor = (cursor - 1 + items.length) % items.length;
+          render(false);
+        } else if (key.name === "down" || key.name === "j") {
+          cursor = (cursor + 1) % items.length;
+          render(false);
+        } else if (opts.multi && (key.name === "space" || key.sequence === " ")) {
+          selected.has(cursor) ? selected.delete(cursor) : selected.add(cursor);
+          render(false);
+        } else if (opts.multi && key.name === "a") {
+          if (selected.size === items.length)
+            selected.clear();
+          else
+            items.forEach((_, i) => selected.add(i));
+          render(false);
+        } else if (key.name === "return" || key.name === "enter") {
+          if (opts.multi && selected.size === 0) {
+            selected.add(cursor);
+          }
+          cleanup();
+          resolve4(opts.multi ? [...selected].sort((a, b) => a - b) : [cursor]);
+        }
+      };
+      const cleanup = () => {
+        process.stdin.off("keypress", onKey);
+        if (process.stdin.setRawMode)
+          process.stdin.setRawMode(wasRaw);
+      };
+      process.stdin.on("keypress", onKey);
+    });
+  } finally {
+    if (process.stdin.setRawMode)
+      process.stdin.setRawMode(wasRaw);
+    rl.resume();
+  }
+}
 async function select(question, items, defaultItem) {
-  const rl = readline.createInterface({
-    input: process.stdin,
-    output: process.stdout,
-    terminal: true
+  const start = defaultItem ? Math.max(0, items.indexOf(defaultItem)) : 0;
+  const [chosen] = await menu(question, items, start, {});
+  return items[chosen];
+}
+async function multiSelect(question, items, defaults = []) {
+  const selected = /* @__PURE__ */ new Set();
+  defaults.forEach((d) => {
+    const i = items.indexOf(d);
+    if (i >= 0)
+      selected.add(i);
   });
-  const defaultLabel = defaultItem ? ` [${defaultItem}]` : "";
-  console.log(`${question}${defaultLabel}`);
-  items.forEach((item, i) => {
-    console.log(`  ${i + 1}) ${item}`);
-  });
-  while (true) {
-    const answer = await rl.question("> ");
-    const finalAnswer = answer.trim() || defaultItem || items[0];
-    const asNum = parseInt(finalAnswer, 10);
-    if (!isNaN(asNum) && asNum >= 1 && asNum <= items.length) {
-      rl.close();
-      return items[asNum - 1];
-    }
-    if (items.includes(finalAnswer)) {
-      rl.close();
-      return finalAnswer;
-    }
-    console.log("\x1B[31mInvalid selection\x1B[0m");
-  }
+  const start = selected.size ? Math.min(...selected) : 0;
+  const chosen = await menu(question, items, start, { selected, multi: true });
+  return chosen.map((i) => items[i]);
 }
 
 // src/commands/init.ts
@@ -1148,6 +1244,8 @@ async function injectStatic(cwd2, htmlPath, cfg) {
   const pinnedProps = cfg.pin ? `
     s.integrity = '${cfg.pin.integrity}';
     s.crossOrigin = 'anonymous';` : "";
+  const pinnedAttrs = cfg.pin ? ` integrity="${cfg.pin.integrity}" crossorigin="anonymous"` : "";
+  const multiEnv = (cfg.environments?.length ?? 0) > 1 || Object.keys(cfg.envMap ?? {}).length > 0;
   const block = cfg.envGuarded ? `<!-- pointer-feedback:start -->
 <script>
   if (
@@ -1158,19 +1256,61 @@ async function injectStatic(cwd2, htmlPath, cfg) {
     s.src = '%VITE_POINTER_SERVER%/pointer.js${pinnedSrc}';${pinnedProps}
     s.defer = true;
     document.head.appendChild(s);
-    var el = document.createElement('pointer-feedback');
-    el.setAttribute('project', '%VITE_POINTER_PROJECT%');
-    el.setAttribute('server', '%VITE_POINTER_SERVER%');
-    el.setAttribute('environment', '%VITE_POINTER_ENV%');
-    el.setAttribute('source-attr', 'data-component-source');
-    document.body.appendChild(el);
+    // Deferred until the body exists. Injected just above </body> this is already true, but the
+    // block gets copied into other files by hand, and inside <head> document.body is null \u2014
+    // "Cannot read properties of null (reading 'appendChild')", and nothing mounts.
+    var mount = function () {
+      if (document.querySelector('pointer-feedback')) return;
+      var el = document.createElement('pointer-feedback');
+      el.setAttribute('project', '%VITE_POINTER_PROJECT%');
+      el.setAttribute('server', '%VITE_POINTER_SERVER%');
+      el.setAttribute('environment', '%VITE_POINTER_ENV%');
+      el.setAttribute('source-attr', 'data-component-source');
+      document.body.appendChild(el);
+    };
+    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', mount);
+    else mount();
   }
 </script>
-<!-- pointer-feedback:end -->` : cfg.pin ? `<!-- pointer-feedback:start -->
-<script src="${cfg.server}/pointer.js?v=${cfg.pin.version}" integrity="${cfg.pin.integrity}" crossorigin="anonymous" defer></script>
-<pointer-feedback project="${cfg.key}" server="${cfg.server}" environment="${cfg.environment}" source-attr="data-component-source"></pointer-feedback>
-<!-- pointer-feedback:end -->` : `<!-- pointer-feedback:start -->
-<script src="${cfg.server}/pointer.js" defer></script>
+<!-- pointer-feedback:end -->` : multiEnv ? (
+    // One file, several environments.
+    //
+    // The single-environment form writes environment="local" into the markup, which is right
+    // until the same index.html is built for staging and production too — then every comment
+    // from every deployment is tagged `local` and nothing can tell them apart. This form
+    // resolves the environment from the page's own origin at runtime, using the URLs already
+    // registered against the project, so one committed file is correct everywhere.
+    `<!-- pointer-feedback:start -->
+<script${pinnedAttrs} src="${cfg.server}/pointer.js${pinnedSrc}" defer></script>
+<script>
+  (function () {
+    var ORIGINS = ${JSON.stringify(cfg.envMap ?? {})};
+    var FALLBACK = '${cfg.environment}';
+    function pointerEnv() {
+      if (ORIGINS[location.origin]) return ORIGINS[location.origin];
+      // A dev server's port changes more often than anyone updates a URL list, so localhost is
+      // recognised by host rather than by exact origin.
+      if (/^(localhost|127\\.0\\.0\\.1|\\[::1\\])$/.test(location.hostname)) return 'local';
+      return FALLBACK;
+    }
+    function mount() {
+      if (document.querySelector('pointer-feedback')) return;
+      var el = document.createElement('pointer-feedback');
+      el.setAttribute('project', '${cfg.key}');
+      el.setAttribute('server', '${cfg.server}');
+      el.setAttribute('environment', pointerEnv());
+      el.setAttribute('source-attr', 'data-component-source');
+      document.body.appendChild(el);
+    }
+    // document.body is null while the parser is still in <head>. Waiting for DOMContentLoaded
+    // makes the snippet work wherever it is pasted, instead of only just above </body>.
+    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', mount);
+    else mount();
+  })();
+</script>
+<!-- pointer-feedback:end -->`
+  ) : `<!-- pointer-feedback:start -->
+<script${pinnedAttrs} src="${cfg.server}/pointer.js${pinnedSrc}" defer></script>
 <pointer-feedback project="${cfg.key}" server="${cfg.server}" environment="${cfg.environment}" source-attr="data-component-source"></pointer-feedback>
 <!-- pointer-feedback:end -->`;
   const re = /<!-- pointer-feedback:start -->[\s\S]*?<!-- pointer-feedback:end -->/;
@@ -1522,7 +1662,7 @@ async function runInitChecks(cwd2, overrides = {}, cliVersion = "0.0.0") {
       checks.push({ id: "project", status: "warn", message: `Could not list projects: ${err?.message ?? err}` });
     }
   }
-  checks.push(await widgetCheck(cwd2));
+  checks.push(await widgetCheck(cwd2, config));
   if (serverReachable) {
     try {
       const res = await fetchWithTimeout(`${server}/pointer.js`, 3e3);
@@ -1565,9 +1705,9 @@ async function runInitChecks(cwd2, overrides = {}, cliVersion = "0.0.0") {
   }
   return checks;
 }
-async function widgetCheck(cwd2) {
+async function widgetCheck(cwd2, config = {}) {
   const detection = await detectStack(cwd2).catch(() => null);
-  const candidates = [detection?.htmlPath, "index.html", "public/index.html", "src/index.html"].filter(Boolean);
+  const candidates = [config.htmlPath, detection?.htmlPath, "index.html", "public/index.html", "src/index.html"].filter(Boolean);
   for (const rel of candidates) {
     try {
       const html = await fs7.readFile(join7(cwd2, rel), "utf8");
@@ -2415,6 +2555,20 @@ async function initCommand(cwd2, options = {}) {
   }
   await writeCredentials(cwd2, key);
   await upsertGitignore(cwd2, product);
+  const appInfo = await detectStack(cwd2);
+  const canInject = appInfo.kind === "vite" || appInfo.kind === "static" || !!options["html"];
+  if (!isJson && !isYes) {
+    console.log(`
+Stack: ${appInfo.kind}${appInfo.evidence.length ? ` (${appInfo.evidence.join(", ")})` : ""}`);
+    if (!canInject && !options["no-inject"]) {
+      console.log(
+        `\x1B[33mHeads up:\x1B[0m automatic widget injection isn't supported for ${appInfo.kind} yet.
+Everything else still applies \u2014 the questions below set up your project, key and skills,
+and the pointer-init skill uses them to mount the widget for you afterwards.
+`
+      );
+    }
+  }
   let project = options["project"];
   let create = options["create"];
   let finalProjectKey = project || "";
@@ -2470,28 +2624,74 @@ async function initCommand(cwd2, options = {}) {
       }
     }
   }
-  let env = options["environment"] || "local";
+  const ALL_ENVS = ["local", "staging", "production"];
+  let envs = String(options["environment"] ?? "").split(",").map((e) => e.trim()).filter(Boolean);
+  const badEnv = envs.find((e) => !ALL_ENVS.includes(e));
+  if (badEnv) {
+    console.error(`Unknown environment "${badEnv}". Valid values: ${ALL_ENVS.join(", ")}.`);
+    process.exit(2);
+  }
   if (!isYes && !options["environment"]) {
-    env = await select("Environment", ["local", "staging", "production"], env);
+    envs = await multiSelect("Which environments does this codebase run in?", ALL_ENVS, ["local"]);
+  }
+  if (envs.length === 0)
+    envs = ["local"];
+  const env = ALL_ENVS.filter((e) => envs.includes(e))[0] ?? "local";
+  const projectRow = await api(server, "/api/admin/projects", { token }).then((rows) => rows.find((p) => p.key === finalProjectKey)).catch(() => null);
+  if (projectRow?.id) {
+    const activation = {};
+    if (envs.includes("local") && !projectRow.isActiveLocal)
+      activation["isActiveLocal"] = true;
+    if (envs.includes("staging") && !projectRow.isActiveStaging)
+      activation["isActiveStaging"] = true;
+    if (envs.includes("production") && !projectRow.isActiveProduction)
+      activation["isActiveProduction"] = true;
+    if (Object.keys(activation).length) {
+      try {
+        await api(server, `/api/admin/projects/${projectRow.id}`, {
+          method: "PATCH",
+          body: activation,
+          token
+        });
+      } catch (err) {
+        if (!isJson) {
+          console.error(
+            `Note: could not activate ${Object.keys(activation).length} environment(s) for this project (${err?.message ?? err}). An admin can switch them on in the dashboard.`
+          );
+        }
+      }
+    }
+  }
+  const envMap = {};
+  if (projectRow?.id && envs.length > 1) {
+    try {
+      const [urls, environments] = await Promise.all([
+        api(server, `/api/admin/projects/${projectRow.id}/app-urls`, { token }),
+        api(server, "/api/admin/environments", { token })
+      ]);
+      const nameById = new Map((environments ?? []).map((e) => [e.id, String(e.name ?? "").toLowerCase()]));
+      for (const row of urls ?? []) {
+        const name = nameById.get(row.appEnvironmentId);
+        if (!name || !row.url || !envs.includes(name))
+          continue;
+        try {
+          envMap[new URL(row.url).origin] = name;
+        } catch {
+        }
+      }
+    } catch {
+    }
   }
-  const appInfo = await detectStack(cwd2);
   let appUrl = options["app-url"];
   let noAppUrl = options["no-app-url"];
   let source = "";
   if (!noAppUrl && !appUrl) {
     const detected = await detectAppUrl(cwd2, appInfo.kind, env);
     source = detected.source;
-    if (!isYes) {
-      const displayDefault = detected.url ? detected.url : "";
-      const ans = await ask(`Where does this app run in ${env}?`, { default: displayDefault });
-      appUrl = ans || void 0;
-    } else {
-      appUrl = detected.url || void 0;
-    }
-  }
-  if (appUrl && env !== "local") {
+    appUrl = detected.url || void 0;
   }
   let tool = options["tool"];
+  let tools = tool ? [tool] : [];
   if (!tool) {
     if (process.env.CLAUDECODE || process.env.CLAUDE_CODE_ENTRYPOINT)
       tool = "claude-code";
@@ -2506,9 +2706,20 @@ async function initCommand(cwd2, options = {}) {
     else
       tool = isYes ? "other" : "claude-code";
     if (!isYes && !options["tool"]) {
-      tool = await select("AI tool", ["claude-code", "cursor", "windsurf", "opencode", "antigravity", "other"], tool);
+      const ALL = "all of them";
+      const catalogue = ["claude-code", "cursor", "windsurf", "opencode", "antigravity", "other"];
+      const picked = await multiSelect(
+        "Which AI tools work in this repo?",
+        [ALL, ...catalogue],
+        [tool]
+      );
+      tools = picked.includes(ALL) ? catalogue : picked;
+      tool = tools[0] ?? tool;
     }
   }
+  if (tools.length === 0)
+    tools = [tool];
+  closePrompts();
   if (!isJson)
     console.log(`Detecting your stack... -> ${appInfo.kind} (${appInfo.evidence.join(", ")})`);
   let injected = false;
@@ -2533,13 +2744,27 @@ async function initCommand(cwd2, options = {}) {
     }
   }
   if (!options["no-inject"]) {
-    if (appInfo.kind === "vite") {
+    const explicitHtml = options["html"];
+    if (explicitHtml && appInfo.kind !== "vite") {
+      const htmlPath = await injectStatic(cwd2, explicitHtml, {
+        server,
+        key: finalProjectKey,
+        environment: env,
+        pin,
+        envMap,
+        environments: envs
+      });
+      filesMod = [htmlPath];
+      injected = true;
+      if (!isJson)
+        console.log(`Injected widget into ${htmlPath}`);
+    } else if (appInfo.kind === "vite") {
       filesMod = await injectVite(cwd2, { server, key: finalProjectKey, environment: env, pin }, options["html"]);
       injected = true;
       if (!isJson)
         console.log(`Injected widget into ${filesMod.join(", ")}`);
     } else if (appInfo.kind === "static") {
-      const htmlPath = await injectStatic(cwd2, options["html"], { server, key: finalProjectKey, environment: env, pin });
+      const htmlPath = await injectStatic(cwd2, options["html"], { server, key: finalProjectKey, environment: env, pin, envMap, environments: envs });
       filesMod = [htmlPath];
       injected = true;
       if (!isJson)
@@ -2547,18 +2772,23 @@ async function initCommand(cwd2, options = {}) {
     } else if (appInfo.kind !== "unknown") {
       routedToSkill = true;
       if (!isJson) {
-        console.log(`\u2139 ${appInfo.kind} detected \u2014 automatic injection isn't supported for this stack yet.
-  The pointer-init skill was installed for ${tool}. Run it and it will mount the widget for you:
+        console.log(`\u2139 ${appInfo.kind} detected \u2014 there's no single entry point to inject into automatically.
+  If you know the file, name it and re-run \u2014 that always wins over detection:
+    npx -y pointer-feedback init --html path/to/index.html
+  Otherwise the pointer-init skill was installed for ${tool}; run it and it will mount the widget:
     claude -> /pointer-init (or @pointer-init for cursor)
-  Config is already saved in .pointer/config.json, so the skill won't ask for the key or project again.`);
+  Config is already saved in .pointer/config.json, so neither will ask for the key or project again.`);
       }
     }
   }
   if (!options["no-skills"]) {
     if (!isJson)
-      console.log("Installing AI skills");
+      console.log(`Installing AI skills for ${tools.join(", ")}`);
     const skillsDir = options["skills-dir"];
-    const installed = await installSkills(server, tool, cwd2, skillsDir);
+    const installed = [];
+    for (const t of tools) {
+      installed.push(...await installSkills(server, t, cwd2, t === tool ? skillsDir : void 0));
+    }
     filesMod.push(...installed);
     skillFiles = installed.filter((f) => f.includes("SKILL.md") || f.endsWith(".md"));
   }
@@ -2584,7 +2814,8 @@ async function initCommand(cwd2, options = {}) {
   }
   const mergedStack = mergeStack(stackMeta, serverStackResponse?.data ?? serverStackResponse, noDesign ? null : designBlock);
   await writeStackFile(cwd2, mergedStack);
-  await writeConfig(cwd2, { server, project: finalProjectKey, environment: env, aiTool: tool, skillsDir: options["skills-dir"], cliVersion: BUILD_CLI_VERSION });
+  const injectedHtml = injected ? filesMod.find((f) => f.toLowerCase().endsWith(".html"))?.replace(`${cwd2}/`, "") : void 0;
+  await writeConfig(cwd2, { server, project: finalProjectKey, environment: env, aiTool: tool, skillsDir: options["skills-dir"], cliVersion: BUILD_CLI_VERSION, htmlPath: injectedHtml, environments: envs.length > 1 ? envs : void 0 });
   filesMod.push(".pointer/config.json");
   filesMod.push(".pointer/credentials.env");
   filesMod.push(".gitignore");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pointer-feedback",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Click-to-comment feedback for your web app: install the widget, then turn pending comments into AI apply prompts.",
   "type": "module",
   "license": "MIT",