@nuniapp/cli 0.1.0

package/README.md

@@ -0,0 +1,41 @@
+# @nuniapp/cli
+
+Sets up [Nuni](https://nuni.praveenjuge.com) in any project.
+
+```sh
+npx @nuniapp/cli init           # new project ID + install steps for your framework
+npx @nuniapp/cli init --json    # the same, machine-readable (for agents)
+npx @nuniapp/cli prompt         # the ready-made prompt for your coding agent
+npx @nuniapp/cli id             # just a new project ID
+```
+
+`init` does not edit your files. It detects your framework (Next.js, React, Vue, Nuxt, SvelteKit, Astro, Angular, plain HTML and more) and package manager, and prints exactly what to add and where.
+
+## Agent prompt
+
+<!-- prompt:start -->
+
+```text
+Add Nuni (pinned comments on the live site) to this project.
+
+Get a project ID by running: npx @nuniapp/cli@latest init (it prints the ID and the exact snippet for this framework).
+
+Steps:
+1. Detect the framework and package manager.
+2. If the app uses React (Next.js, Vite, Remix, React Router, TanStack Start, etc.):
+   - Install @nuniapp/react.
+   - Render <Nuni project="PROJECT_ID" /> once, globally, in the root layout or app entry (for Next.js App Router: app/layout.tsx, inside <body>). It is already a client component.
+3. Otherwise, if there is a bundler (Vue, Svelte, Astro, Angular, etc.):
+   - Install @nuniapp/widget.
+   - Call init({ project: "PROJECT_ID" }) once on the client, in the app entry or root layout. import { init } from "@nuniapp/widget".
+4. If there is no bundler (plain HTML, WordPress, Webflow): add this before </body> on every page:
+   <script src="https://cdn.jsdelivr.net/npm/@nuniapp/widget@0/dist/nuni.global.js" data-project="PROJECT_ID" defer></script>
+5. Commit the project ID directly in the code. It is public, not a secret. Do not put it in an env var.
+6. Do not add Nuni to server-only code, and do not load it more than once.
+7. If the site sends a Content-Security-Policy, allow connect-src https://*.convex.cloud wss://*.convex.cloud https://*.convex.site (and script-src cdn.jsdelivr.net for the script tag).
+8. Start the dev server, open the site, and confirm the Nuni button appears in the bottom-right corner.
+
+Docs: https://nuni.praveenjuge.com/quickstart
+```
+
+<!-- prompt:end -->

package/dist/index.mjs

@@ -0,0 +1,393 @@
+#!/usr/bin/env node
+import { join, resolve } from "node:path";
+import { parseArgs } from "node:util";
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+//#region ../shared/src/id.ts
+const ALPHABET = "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz";
+const ID_LENGTH = 22;
+const PREFIX = "nuni_";
+const PROJECT_ID_PATTERN = new RegExp(`^${PREFIX}[${ALPHABET}]{${ID_LENGTH}}$`);
+/** Random base58 string using the platform CSPRNG (browser, Node, Convex). */
+function randomBase58(length) {
+	const bytes = new Uint8Array(length);
+	crypto.getRandomValues(bytes);
+	let out = "";
+	for (const byte of bytes) {
+		let b = byte;
+		while (b >= 232) {
+			const retry = /* @__PURE__ */ new Uint8Array(1);
+			crypto.getRandomValues(retry);
+			b = retry[0];
+		}
+		out += ALPHABET[b % 58];
+	}
+	return out;
+}
+/** Public project identifier, safe to commit into source code. */
+function generateProjectId() {
+	return PREFIX + randomBase58(ID_LENGTH);
+}
+function isProjectId(value) {
+	return typeof value === "string" && PROJECT_ID_PATTERN.test(value);
+}
+//#endregion
+//#region ../shared/src/prompt.ts
+const PACKAGES = {
+	widget: "@nuniapp/widget",
+	react: "@nuniapp/react",
+	cli: "@nuniapp/cli"
+};
+const CDN_URL = "https://cdn.jsdelivr.net/npm/@nuniapp/widget@0/dist/nuni.global.js";
+const DOCS_URL = "https://nuni.praveenjuge.com";
+/**
+* The prompt a developer pastes into Codex, Claude Code, Cursor, etc.
+* Single source of truth for the docs site, CLI and READMEs.
+*/
+function buildAgentPrompt(options = {}) {
+	return `Add Nuni (pinned comments on the live site) to this project.
+
+${options.projectId ? `Use this Nuni project ID: ${options.projectId}` : `Get a project ID by running: npx ${PACKAGES.cli}@latest init (it prints the ID and the exact snippet for this framework).`}
+
+Steps:
+1. Detect the framework and package manager.
+2. If the app uses React (Next.js, Vite, Remix, React Router, TanStack Start, etc.):
+   - Install ${PACKAGES.react}.
+   - Render <Nuni project="PROJECT_ID" /> once, globally, in the root layout or app entry (for Next.js App Router: app/layout.tsx, inside <body>). It is already a client component.
+3. Otherwise, if there is a bundler (Vue, Svelte, Astro, Angular, etc.):
+   - Install ${PACKAGES.widget}.
+   - Call init({ project: "PROJECT_ID" }) once on the client, in the app entry or root layout. import { init } from "${PACKAGES.widget}".
+4. If there is no bundler (plain HTML, WordPress, Webflow): add this before </body> on every page:
+   <script src="${CDN_URL}" data-project="PROJECT_ID" defer><\/script>
+5. Commit the project ID directly in the code. It is public, not a secret. Do not put it in an env var.
+6. Do not add Nuni to server-only code, and do not load it more than once.
+7. If the site sends a Content-Security-Policy, allow connect-src https://*.convex.cloud wss://*.convex.cloud https://*.convex.site (and script-src cdn.jsdelivr.net for the script tag).
+8. Start the dev server, open the site, and confirm the Nuni button appears in the bottom-right corner.
+
+Docs: ${DOCS_URL}/quickstart`;
+}
+//#endregion
+//#region src/detect.ts
+function readPackage(cwd) {
+	try {
+		return JSON.parse(readFileSync(join(cwd, "package.json"), "utf8"));
+	} catch {
+		return null;
+	}
+}
+function first(cwd, candidates, fallback) {
+	return candidates.find((c) => existsSync(join(cwd, c))) ?? fallback;
+}
+function detectPackageManager(cwd) {
+	if (existsSync(join(cwd, "bun.lock")) || existsSync(join(cwd, "bun.lockb"))) return "bun";
+	if (existsSync(join(cwd, "pnpm-lock.yaml"))) return "pnpm";
+	if (existsSync(join(cwd, "yarn.lock"))) return "yarn";
+	return "npm";
+}
+function installCommand(pm, pkg) {
+	switch (pm) {
+		case "bun": return `bun add ${pkg}`;
+		case "pnpm": return `pnpm add ${pkg}`;
+		case "yarn": return `yarn add ${pkg}`;
+		default: return `npm install ${pkg}`;
+	}
+}
+function detectFramework(cwd) {
+	const pkg = readPackage(cwd);
+	if (!pkg) return {
+		id: "html",
+		name: "Static HTML",
+		kind: "script",
+		file: existsSync(join(cwd, "index.html")) ? "index.html" : readdirSync(cwd).find((f) => f.endsWith(".html")) ?? "index.html"
+	};
+	const deps = {
+		...pkg.dependencies,
+		...pkg.devDependencies
+	};
+	const has = (name) => name in deps;
+	if (has("next")) {
+		const app = first(cwd, [
+			"app/layout.tsx",
+			"src/app/layout.tsx",
+			"app/layout.jsx",
+			"src/app/layout.jsx",
+			"app/layout.js",
+			"src/app/layout.js"
+		], "");
+		if (app) return {
+			id: "next-app",
+			name: "Next.js (App Router)",
+			kind: "react",
+			file: app
+		};
+		const pages = first(cwd, [
+			"pages/_app.tsx",
+			"src/pages/_app.tsx",
+			"pages/_app.jsx",
+			"src/pages/_app.jsx",
+			"pages/_app.js"
+		], "");
+		if (pages) return {
+			id: "next-pages",
+			name: "Next.js (Pages Router)",
+			kind: "react",
+			file: pages
+		};
+		return {
+			id: "next-app",
+			name: "Next.js",
+			kind: "react",
+			file: "app/layout.tsx"
+		};
+	}
+	if (has("@tanstack/react-start")) return {
+		id: "tanstack-start",
+		name: "TanStack Start",
+		kind: "react",
+		file: first(cwd, ["src/routes/__root.tsx", "app/routes/__root.tsx"], "src/routes/__root.tsx")
+	};
+	if (has("@remix-run/react") || has("react-router") || has("@react-router/dev")) return {
+		id: "react-router",
+		name: "React Router / Remix",
+		kind: "react",
+		file: first(cwd, ["app/root.tsx", "app/root.jsx"], "app/root.tsx")
+	};
+	if (has("gatsby")) return {
+		id: "gatsby",
+		name: "Gatsby",
+		kind: "react",
+		file: first(cwd, ["gatsby-browser.tsx", "gatsby-browser.js"], "gatsby-browser.tsx")
+	};
+	if (has("nuxt")) return {
+		id: "nuxt",
+		name: "Nuxt",
+		kind: "vanilla",
+		file: "plugins/nuni.client.ts"
+	};
+	if (has("@sveltejs/kit")) return {
+		id: "sveltekit",
+		name: "SvelteKit",
+		kind: "vanilla",
+		file: "src/routes/+layout.svelte"
+	};
+	if (has("astro")) return {
+		id: "astro",
+		name: "Astro",
+		kind: "vanilla",
+		file: first(cwd, ["src/layouts/Layout.astro", "src/layouts/BaseLayout.astro"], "src/layouts/Layout.astro")
+	};
+	if (has("@angular/core")) return {
+		id: "angular",
+		name: "Angular",
+		kind: "vanilla",
+		file: "src/main.ts"
+	};
+	if (has("vue")) return {
+		id: "vue",
+		name: "Vue",
+		kind: "vanilla",
+		file: first(cwd, ["src/main.ts", "src/main.js"], "src/main.ts")
+	};
+	if (has("svelte")) return {
+		id: "svelte",
+		name: "Svelte",
+		kind: "vanilla",
+		file: first(cwd, ["src/main.ts", "src/main.js"], "src/main.ts")
+	};
+	if (has("react")) return {
+		id: "react",
+		name: "React",
+		kind: "react",
+		file: first(cwd, [
+			"src/main.tsx",
+			"src/main.jsx",
+			"src/index.tsx",
+			"src/index.jsx",
+			"src/App.tsx"
+		], "src/main.tsx")
+	};
+	return {
+		id: "vanilla",
+		name: "JavaScript app",
+		kind: "vanilla",
+		file: first(cwd, [
+			"src/main.ts",
+			"src/main.js",
+			"src/index.ts",
+			"src/index.js"
+		], "src/main.ts")
+	};
+}
+//#endregion
+//#region src/snippets.ts
+function packageFor(framework) {
+	if (framework.kind === "react") return PACKAGES.react;
+	if (framework.kind === "vanilla") return PACKAGES.widget;
+	return null;
+}
+function snippetFor(framework, projectId) {
+	const react = `import { Nuni } from "${PACKAGES.react}"`;
+	switch (framework.id) {
+		case "next-app": return `${react}
+
+// Inside <body>, once:
+<Nuni project="${projectId}" />`;
+		case "next-pages": return `${react}
+
+export default function App({ Component, pageProps }) {
+  return (
+    <>
+      <Component {...pageProps} />
+      <Nuni project="${projectId}" />
+    </>
+  )
+}`;
+		case "gatsby": return `${react}
+
+export const wrapRootElement = ({ element }) => (
+  <>
+    {element}
+    <Nuni project="${projectId}" />
+  </>
+)`;
+		case "nuxt": return `import { init } from "${PACKAGES.widget}"
+
+export default defineNuxtPlugin(() => {
+  init({ project: "${projectId}" })
+})`;
+		case "sveltekit": return `<script>
+  import { onMount } from "svelte"
+  import { init } from "${PACKAGES.widget}"
+
+  onMount(() => init({ project: "${projectId}" }).destroy)
+<\/script>
+
+<slot />`;
+		case "astro": return `<!-- In your base layout, before </body> -->
+<script>
+  import { init } from "${PACKAGES.widget}"
+  init({ project: "${projectId}" })
+<\/script>`;
+		case "html": return `<!-- Before </body> on every page -->
+<script src="${CDN_URL}" data-project="${projectId}" defer><\/script>`;
+		default:
+			if (framework.kind === "react") return `${react}
+
+// Render once next to your app's root component:
+<Nuni project="${projectId}" />`;
+			return `import { init } from "${PACKAGES.widget}"
+
+// Once, on the client:
+init({ project: "${projectId}" })`;
+	}
+}
+//#endregion
+//#region src/cli.ts
+const VERSION = "0.1.0";
+const HELP = `nuni ${VERSION}: pinned comments on your live site
+
+Usage
+  npx @nuniapp/cli init [--id <project-id>] [--cwd <dir>] [--json]
+  npx @nuniapp/cli prompt [--id <project-id>]
+  npx @nuniapp/cli id
+
+Commands
+  init     Generate a project ID and print the install steps for this project
+  prompt   Print the ready-made prompt for Codex, Claude Code, Cursor, etc.
+  id       Print a new project ID
+
+Docs: ${DOCS_URL}`;
+const bold = (s) => process.stdout.isTTY ? `\x1b[1m${s}\x1b[22m` : s;
+const dim = (s) => process.stdout.isTTY ? `\x1b[2m${s}\x1b[22m` : s;
+function run(argv) {
+	const { values, positionals } = parseArgs({
+		args: argv,
+		allowPositionals: true,
+		options: {
+			id: { type: "string" },
+			cwd: { type: "string" },
+			json: {
+				type: "boolean",
+				default: false
+			},
+			help: {
+				type: "boolean",
+				short: "h",
+				default: false
+			},
+			version: {
+				type: "boolean",
+				short: "v",
+				default: false
+			}
+		}
+	});
+	const command = positionals[0] ?? "init";
+	if (values.version) {
+		console.log(VERSION);
+		return 0;
+	}
+	if (values.help || command === "help") {
+		console.log(HELP);
+		return 0;
+	}
+	if (values.id && !isProjectId(values.id)) {
+		console.error(`"${values.id}" is not a valid Nuni project ID (expected nuni_ followed by 22 characters).`);
+		return 1;
+	}
+	const projectId = values.id ?? generateProjectId();
+	if (command === "id") {
+		console.log(projectId);
+		return 0;
+	}
+	if (command === "prompt") {
+		console.log(buildAgentPrompt({ projectId }));
+		return 0;
+	}
+	if (command !== "init") {
+		console.error(`Unknown command "${command}".\n\n${HELP}`);
+		return 1;
+	}
+	const cwd = resolve(values.cwd ?? process.cwd());
+	const framework = detectFramework(cwd);
+	const pm = detectPackageManager(cwd);
+	const pkg = packageFor(framework);
+	const install = pkg ? installCommand(pm, pkg) : null;
+	const snippet = snippetFor(framework, projectId);
+	if (values.json) {
+		console.log(JSON.stringify({
+			projectId,
+			framework: framework.name,
+			frameworkId: framework.id,
+			file: framework.file,
+			package: pkg,
+			install,
+			snippet
+		}, null, 2));
+		return 0;
+	}
+	console.log(`
+${bold("Nuni")} ${dim(`v${VERSION}`)}
+
+${bold("Project ID")}   ${projectId}
+${dim("Public, safe to commit. Keep using this same ID on every environment.")}
+
+${bold("Detected")}     ${framework.name}${pkg ? ` (${pm})` : ""}
+${install ? `\n${bold("1. Install")}\n   ${install}\n` : ""}
+${bold(`${install ? "2" : "1"}. Add it once, globally`)} ${dim(`(${framework.file})`)}
+
+${snippet.split("\n").map((line) => `   ${line}`).join("\n")}
+
+${bold(`${install ? "3" : "2"}. Open the site`)}
+   Start the dev server. A Nuni button appears in the bottom-right corner.
+   Press C, click anything, leave a comment. No account needed.
+
+${bold("Own this site?")} Open the Nuni panel and choose "Claim Nuni" to sign in with GitHub.
+${dim(`Docs: ${DOCS_URL}`)}
+`);
+	return 0;
+}
+//#endregion
+//#region src/index.ts
+process.exitCode = run(process.argv.slice(2));
+//#endregion
+export {};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@nuniapp/cli",
+  "version": "0.1.0",
+  "description": "Set up Nuni in any project: generates a project ID and prints the install snippet.",
+  "license": "MIT",
+  "type": "module",
+  "homepage": "https://nuni.praveenjuge.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/praveenjuge/nuni.git",
+    "directory": "packages/cli"
+  },
+  "bin": {
+    "nuni": "./dist/index.mjs"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "lint": "eslint .",
+    "typecheck": "tsc",
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "@nuni/eslint-config": "workspace:*",
+    "@nuni/shared": "workspace:*",
+    "@nuni/tsconfig": "workspace:*",
+    "@types/node": "^22",
+    "eslint": "^10.11.0",
+    "tsdown": "^0.23.0",
+    "typescript": "^5.9.3",
+    "vitest": "^5.0.2"
+  }
+}