noslopui 0.0.1 → 0.1.0

package/dist/commands/init.js

@@ -0,0 +1,129 @@
+// `noslopui init` — the whole setup, in one command.
+//
+//   detect the agent → sign in in the browser → write the MCP entry →
+//   install the skill → say what to do next
+//
+// Nothing here is silent: every file that gets written is named on screen,
+// with its backup, because this command edits configuration the user didn't
+// ask us to know about.
+import { spawn } from 'node:child_process';
+import { ApiError, mcpUrl, origin, startSignIn, waitForApproval, fetchSkill } from '../lib/api.js';
+import { adapterById, detectAdapters } from '../adapters/index.js';
+import { color, confirm, hint, interactive, machineLabel, maskKey, ok, say, step, warn } from '../lib/ui.js';
+import { ConfigUnreadableError } from '../lib/json-file.js';
+/** Best-effort: if it doesn't open, the URL is on screen anyway. */
+function openBrowser(url) {
+    const [command, args] = process.platform === 'win32'
+        ? ['cmd', ['/c', 'start', '', url]]
+        : process.platform === 'darwin'
+            ? ['open', [url]]
+            : ['xdg-open', [url]];
+    try {
+        const child = spawn(command, args, { stdio: 'ignore', detached: true });
+        child.on('error', () => { });
+        child.unref();
+    }
+    catch {
+        // Headless, locked down, or no desktop — the printed URL covers it.
+    }
+}
+async function chooseAdapters(options) {
+    if (options.agents?.length) {
+        const chosen = [];
+        for (const id of options.agents) {
+            const adapter = adapterById(id);
+            if (!adapter)
+                throw new Error(`Unknown agent "${id}". Supported: ${(await detectAdapters()).map((a) => a.id).join(', ') || 'claude-code'}.`);
+            chosen.push(adapter);
+        }
+        return chosen;
+    }
+    const detected = await detectAdapters();
+    if (!detected.length) {
+        throw new Error('No supported agent found on this machine. noslopUI sets up Claude Code today; install it first, or add the server by hand from https://noslopui.com/mcp.');
+    }
+    const chosen = [];
+    for (const adapter of detected) {
+        if (options.yes || !interactive()) {
+            chosen.push(adapter);
+        }
+        else if (await confirm(`Set up ${color.bold(adapter.label)}?`, true)) {
+            chosen.push(adapter);
+        }
+    }
+    if (!chosen.length)
+        throw new Error('Nothing selected, so nothing was changed.');
+    return chosen;
+}
+export async function init(options) {
+    say();
+    say(`${color.bold('noslopUI')} ${color.dim('— hand-crafted components and design systems for your agent')}`);
+    say();
+    const adapters = await chooseAdapters(options);
+    for (const adapter of adapters)
+        ok(`Found ${adapter.label}`);
+    // Either a key the user already has, or one issued through the browser.
+    let keys;
+    if (options.key) {
+        keys = adapters.map((a) => ({ agent: a.id, label: a.label, name: 'provided key', key: options.key }));
+        step('Using the key you passed with --key.');
+    }
+    else {
+        const machine = machineLabel();
+        const started = await startSignIn(machine, adapters.map((a) => a.id));
+        say();
+        step(`Approve this in your browser, signed in to noslopUI:`);
+        say();
+        say(`    ${color.bold(color.cyan(started.verificationUriComplete))}`);
+        say();
+        say(`    code ${color.bold(started.userCode)} · this machine is shown as "${machine}" · expires in ${Math.round(started.expiresIn / 60)} minutes`);
+        say();
+        if (options.browser !== false)
+            openBrowser(started.verificationUriComplete);
+        step('Waiting for approval…');
+        keys = await waitForApproval(started);
+        ok(`Approved. ${keys.length === 1 ? 'One key issued' : `${keys.length} keys issued`}.`);
+    }
+    say();
+    const restartNeeded = [];
+    for (const adapter of adapters) {
+        const issued = keys.find((k) => k.agent === adapter.id) ?? keys[0];
+        if (!issued)
+            throw new Error(`No key was issued for ${adapter.label}.`);
+        const result = await adapter.install({ url: mcpUrl(), key: issued.key });
+        ok(`${adapter.label}: ${result.replacedExisting ? 'updated' : 'added'} the noslopui server`);
+        hint(`config ${result.configPath}`);
+        if (result.backupPath)
+            hint(`backup ${result.backupPath}`);
+        hint(`key    ${maskKey(issued.key)} — named "${issued.name}" on your account`);
+        restartNeeded.push(adapter.label);
+        if (options.skill) {
+            const download = await fetchSkill();
+            const skill = await adapter.installSkill(download.markdown);
+            ok(`${adapter.label}: ${skill.changed ? 'installed' : 'already had'} the noslopUI skill`);
+            hint(`skill  ${skill.path}`);
+            if (download.source === 'bundled') {
+                warn('That skill came from this package, not the site — it may be behind. Run "npx noslopui update" when you are back online.');
+            }
+        }
+    }
+    say();
+    say(color.bold('Done. Two things:'));
+    say(`  1. Restart ${restartNeeded.join(' and ')} so it picks up the new server.`);
+    say(`  2. Try it: ${color.cyan('"build me a landing page for a coffee roastery"')}`);
+    say();
+    hint(`Revoke a key any time at ${origin()}/account?tab=mcp · check the setup with "npx noslopui doctor"`);
+    say();
+    return 0;
+}
+/** Turns the errors this command can hit into something worth reading. */
+export function explain(err) {
+    if (err instanceof ConfigUnreadableError) {
+        return `${err.message}\n  Fix or move that file, then run this again. Nothing was written.`;
+    }
+    if (err instanceof ApiError)
+        return err.message;
+    if (err instanceof Error)
+        return err.message;
+    return String(err);
+}

package/dist/commands/login.js

@@ -0,0 +1,26 @@
+// `noslopui login` — a fresh key for an agent that's already set up.
+//
+// The case this exists for: the key was revoked, or it belongs to the wrong
+// account. It swaps the key in place and leaves everything else — the skill,
+// the server entry's other fields, every other configured server — alone.
+import { init } from './init.js';
+import { ADAPTERS } from '../adapters/index.js';
+import { say, warn, hint } from '../lib/ui.js';
+export async function login(options) {
+    const configured = [];
+    for (const adapter of ADAPTERS) {
+        if (!(await adapter.detect()))
+            continue;
+        if ((await adapter.status()).installed)
+            configured.push(adapter.id);
+    }
+    if (!configured.length) {
+        say();
+        warn('No agent here has noslopUI set up yet.');
+        hint('Run "npx noslopui init" — it does the sign-in and the setup together.');
+        say();
+        return 1;
+    }
+    // Same path as init, minus the skill: this is only about the key.
+    return init({ ...options, agents: options.agents?.length ? options.agents : configured, skill: false });
+}

package/dist/commands/remove.js

@@ -0,0 +1,39 @@
+// `noslopui remove` — take our entry back out, leave everything else alone.
+//
+// Removing the config entry does NOT revoke the key: the key belongs to the
+// account, not to this machine, and someone removing a local config hasn't
+// asked us to change their account. We say where to revoke it instead.
+import { ADAPTERS } from '../adapters/index.js';
+import { origin } from '../lib/api.js';
+import { color, confirm, hint, ok, say, warn } from '../lib/ui.js';
+export async function remove(options) {
+    say();
+    let removedAnything = false;
+    for (const adapter of ADAPTERS) {
+        if (!(await adapter.detect()))
+            continue;
+        const status = await adapter.status();
+        if (!status.installed) {
+            say(`${color.dim('–')} ${adapter.label}: nothing to remove`);
+            continue;
+        }
+        if (!options.yes && !(await confirm(`Remove the noslopui server from ${color.bold(adapter.label)}?`, true))) {
+            say(`${color.dim('–')} ${adapter.label}: left alone`);
+            continue;
+        }
+        if (await adapter.uninstall()) {
+            ok(`${adapter.label}: removed the noslopui server (other servers untouched)`);
+            removedAnything = true;
+        }
+        if (options.skill && (await adapter.removeSkill())) {
+            ok(`${adapter.label}: removed the skill`);
+        }
+    }
+    say();
+    if (removedAnything) {
+        warn('Your API key still exists and still works.');
+        hint(`Revoke it at ${origin()}/account?tab=mcp if this machine should no longer have access.`);
+    }
+    say();
+    return 0;
+}

package/dist/commands/update.js

@@ -0,0 +1,42 @@
+// `noslopui update` — refresh what's already installed, without touching auth.
+//
+// In practice that means the skill: it's served from noslopui.com and changes
+// as the workflow improves, while the config entry only changes if the server
+// URL does. Nothing here needs a sign-in, so an expired trial or a revoked key
+// doesn't block it.
+import { fetchSkill, mcpUrl } from '../lib/api.js';
+import { ADAPTERS } from '../adapters/index.js';
+import { color, hint, ok, say, warn } from '../lib/ui.js';
+export async function update() {
+    say();
+    let touched = false;
+    let markdown = null;
+    for (const adapter of ADAPTERS) {
+        if (!(await adapter.detect()))
+            continue;
+        const status = await adapter.status();
+        if (!status.installed) {
+            say(`${color.dim('–')} ${adapter.label}: not set up, nothing to update`);
+            continue;
+        }
+        if (status.url !== mcpUrl()) {
+            warn(`${adapter.label}: configured for ${status.url}, not ${mcpUrl()}.`);
+            hint('Run "npx noslopui init" to move it — that needs a key, so it is not done here.');
+        }
+        markdown ??= (await fetchSkill()).markdown;
+        const skill = await adapter.installSkill(markdown);
+        if (skill.changed) {
+            ok(`${adapter.label}: skill updated`);
+            hint(skill.path);
+            touched = true;
+        }
+        else {
+            ok(`${adapter.label}: skill already current`);
+        }
+    }
+    say();
+    if (touched)
+        say(`Restart your agent to pick up the new workflow.`);
+    say();
+    return 0;
+}

package/dist/index.js

@@ -0,0 +1,115 @@
+#!/usr/bin/env node
+// noslopui — connect a coding agent to noslopUI.
+//
+// Argument parsing is by hand and stays that way: a tool people run with
+// `npx` should download in one tick, and a CLI-argument library is a
+// dependency you wait for before anything happens.
+import { init, explain } from './commands/init.js';
+import { doctor } from './commands/doctor.js';
+import { remove } from './commands/remove.js';
+import { update } from './commands/update.js';
+import { login } from './commands/login.js';
+import { color, fail, say } from './lib/ui.js';
+import { origin } from './lib/api.js';
+import { CLI_VERSION as VERSION } from './lib/version.js';
+function usage() {
+    say(`
+${color.bold('noslopui')} — hand-crafted UI components and design systems, in your agent.
+
+${color.bold('Usage')}
+  npx noslopui <command> [options]
+
+${color.bold('Commands')}
+  init        Set up an agent: sign in, add the MCP server, install the skill
+  doctor      Check what is set up and what is wrong with it
+  login       Get a fresh key for an agent that is already set up
+  update      Re-download the skill for agents that are set up
+  remove      Take the noslopUI server back out (never touches other servers)
+
+${color.bold('Options')}
+  --agent <id>     Set up a specific agent instead of detecting (claude-code)
+  --no-skill       Do not install the skill (init)
+  --no-browser     Do not open a browser; print the URL instead (init, login)
+  --skill          Also remove the skill (remove)
+  --key <key>      Use a key you already have instead of signing in (init, login)
+  -y, --yes        Take the default answer for every question
+  -h, --help       Show this
+  -v, --version    Show the version
+
+${color.dim(`Server: ${origin()} · set NOSLOPUI_ORIGIN to point somewhere else.`)}
+`);
+}
+function parse(argv) {
+    const parsed = { command: '', agents: [], skill: null, yes: false, browser: true, help: false, version: false };
+    for (let i = 0; i < argv.length; i++) {
+        const arg = argv[i];
+        if (arg === '--help' || arg === '-h')
+            parsed.help = true;
+        else if (arg === '--version' || arg === '-v')
+            parsed.version = true;
+        else if (arg === '--yes' || arg === '-y')
+            parsed.yes = true;
+        else if (arg === '--no-skill')
+            parsed.skill = false;
+        else if (arg === '--no-browser')
+            parsed.browser = false;
+        else if (arg === '--skill')
+            parsed.skill = true;
+        else if (arg === '--agent')
+            parsed.agents.push(String(argv[++i] ?? ''));
+        else if (arg.startsWith('--agent='))
+            parsed.agents.push(arg.slice('--agent='.length));
+        else if (arg === '--key')
+            parsed.key = String(argv[++i] ?? '');
+        else if (arg.startsWith('--key='))
+            parsed.key = arg.slice('--key='.length);
+        else if (!arg.startsWith('-') && !parsed.command)
+            parsed.command = arg;
+        else
+            throw new Error(`Unknown option "${arg}". Run "npx noslopui --help".`);
+    }
+    parsed.agents = parsed.agents.filter(Boolean);
+    return parsed;
+}
+async function main() {
+    const args = parse(process.argv.slice(2));
+    if (args.version) {
+        say(VERSION);
+        return 0;
+    }
+    if (args.help || !args.command) {
+        usage();
+        return args.command ? 0 : 1;
+    }
+    switch (args.command) {
+        case 'init':
+            return init({ agents: args.agents, skill: args.skill !== false, yes: args.yes, browser: args.browser, ...(args.key ? { key: args.key } : {}) });
+        case 'doctor':
+            return doctor();
+        case 'login':
+            return login({ agents: args.agents, yes: args.yes, browser: args.browser, ...(args.key ? { key: args.key } : {}) });
+        case 'update':
+            return update();
+        case 'remove':
+            return remove({ yes: args.yes, skill: args.skill === true });
+        default:
+            fail(`Unknown command "${args.command}".`);
+            usage();
+            return 1;
+    }
+}
+// `process.exitCode`, never `process.exit()`. Forcing an exit while a fetch
+// socket is still closing trips a libuv assertion on Windows
+// ("Assertion failed: !(handle->flags & UV_HANDLE_CLOSING)"), which prints an
+// alarming crash after a run that actually succeeded. Setting the code and
+// letting the loop drain is both correct and quiet.
+main()
+    .then((code) => {
+    process.exitCode = code;
+})
+    .catch((err) => {
+    say();
+    fail(explain(err));
+    say();
+    process.exitCode = 1;
+});

package/dist/lib/api.js

@@ -0,0 +1,164 @@
+// Talking to noslopui.com: the device-code sign-in, and a health probe for
+// `doctor`. Everything here is plain fetch against documented endpoints.
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { CLI_VERSION } from './version.js';
+export const DEFAULT_ORIGIN = 'https://noslopui.com';
+/**
+ * Identify ourselves on every request. A tool that talks to a server should
+ * say what it is: it makes our own logs readable, and it gives anything
+ * sitting in front of the server (a CDN, a bot filter) something honest to
+ * recognise instead of a bare runtime default.
+ */
+export const USER_AGENT = `noslopui-cli/${CLI_VERSION} (+https://github.com/noslopUI/cli)`;
+/** Overridable so the flow can be exercised against a local server in tests. */
+export const origin = () => (process.env.NOSLOPUI_ORIGIN || DEFAULT_ORIGIN).replace(/\/$/, '');
+export const mcpUrl = () => `${origin()}/api/mcp`;
+export class ApiError extends Error {
+    status;
+    constructor(message, status) {
+        super(message);
+        this.status = status;
+        this.name = 'ApiError';
+    }
+}
+async function post(path, body) {
+    let res;
+    try {
+        res = await fetch(`${origin()}${path}`, {
+            method: 'POST',
+            headers: { 'content-type': 'application/json', 'user-agent': USER_AGENT },
+            body: JSON.stringify(body),
+        });
+    }
+    catch (err) {
+        throw new ApiError(`Could not reach ${origin()}. Check your connection, then run the command again.`);
+    }
+    const text = await res.text();
+    let json = null;
+    try {
+        json = JSON.parse(text);
+    }
+    catch {
+        // A proxy or captive portal answering instead of us.
+        throw new ApiError(`${origin()} returned something that isn't JSON (HTTP ${res.status}).`, res.status);
+    }
+    return { status: res.status, json };
+}
+export async function startSignIn(clientName, agents) {
+    const { status, json } = await post('/api/cli/auth/start', { clientName, agents });
+    if (status !== 201)
+        throw new ApiError(json?.message ?? `Sign-in could not be started (HTTP ${status}).`, status);
+    return json;
+}
+/** One poll. Everything that isn't "keep waiting" is thrown, with the server's own wording. */
+export async function pollSignIn(deviceCode) {
+    const { status, json } = await post('/api/cli/auth/poll', { deviceCode });
+    if (status === 200 && json?.status === 'approved')
+        return { done: true, keys: json.keys };
+    if (status === 200)
+        return { done: false }; // pending, or told to slow down
+    throw new ApiError(json?.message ?? `Sign-in failed (HTTP ${status}).`, status);
+}
+/**
+ * Waits for the browser half to finish. Polls on the interval the server asked
+ * for, and gives up when the code the user is looking at has expired.
+ */
+export async function waitForApproval(started, onTick) {
+    const deadline = Date.now() + started.expiresIn * 1000;
+    const intervalMs = Math.max(1, started.interval) * 1000;
+    while (Date.now() < deadline) {
+        await new Promise((r) => setTimeout(r, intervalMs));
+        const outcome = await pollSignIn(started.deviceCode);
+        if (outcome.done)
+            return outcome.keys;
+        onTick?.(Math.max(0, Math.round((deadline - Date.now()) / 1000)));
+    }
+    throw new ApiError('The code expired before it was approved. Run the command again to get a new one.');
+}
+/**
+ * `doctor`'s probe: can we reach the MCP server, and does this key still work?
+ * Uses list_collections because it's the one gated tool that costs the account
+ * nothing — no trial clock, no fair-use count.
+ */
+export async function checkServer(key) {
+    let res;
+    const headers = {
+        'content-type': 'application/json',
+        accept: 'application/json, text/event-stream',
+        'mcp-protocol-version': '2025-06-18',
+        'user-agent': USER_AGENT,
+    };
+    if (key)
+        headers.authorization = `Bearer ${key}`;
+    try {
+        res = await fetch(mcpUrl(), {
+            method: 'POST',
+            headers,
+            body: JSON.stringify({
+                jsonrpc: '2.0',
+                id: 1,
+                method: key ? 'tools/call' : 'tools/list',
+                params: key ? { name: 'list_collections', arguments: {} } : {},
+            }),
+        });
+    }
+    catch {
+        return { reachable: false, detail: `Could not reach ${mcpUrl()}.` };
+    }
+    if (!res.ok)
+        return { reachable: false, detail: `${mcpUrl()} answered HTTP ${res.status}.` };
+    const text = await res.text();
+    const line = text.split(/\r?\n/).filter((l) => l.startsWith('data: ')).pop();
+    let json = null;
+    try {
+        json = JSON.parse(line ? line.slice(6) : text);
+    }
+    catch {
+        return { reachable: false, detail: 'The server answered with something unreadable.' };
+    }
+    if (!key)
+        return { reachable: true, detail: `${(json?.result?.tools ?? []).length} tools available.` };
+    const isError = json?.result?.isError === true;
+    const body = json?.result?.content?.[0]?.text ?? '';
+    if (isError) {
+        // The server writes these for an agent to relay; they're already the right
+        // words for a person, so pass them through rather than inventing our own.
+        return { reachable: true, detail: 'Server reachable.', keyState: 'rejected', keyDetail: body.split('. ')[0] };
+    }
+    return { reachable: true, detail: 'Server reachable.', keyState: 'ok', keyDetail: 'Key accepted.' };
+}
+/**
+ * The workflow file. Fetched from the site, because the site is where it's
+ * assembled — the same text the MCP server sends as its instructions, so the
+ * two can never disagree.
+ *
+ * The copy shipped in this package is a fallback for an unreachable site, not
+ * an equal: it's only as fresh as the last publish, so the caller says so.
+ */
+export async function fetchSkill() {
+    try {
+        const res = await fetch(`${origin()}/skill/SKILL.md`, { headers: { 'user-agent': USER_AGENT } });
+        if (res.ok) {
+            const text = await res.text();
+            if (text.startsWith('---'))
+                return { markdown: text, source: 'server' };
+        }
+    }
+    catch {
+        // Fall through to the bundled copy.
+    }
+    const bundled = bundledSkill();
+    if (bundled)
+        return { markdown: bundled, source: 'bundled' };
+    throw new ApiError(`Could not download the skill from ${origin()}, and this package has no copy to fall back on.`);
+}
+function bundledSkill() {
+    try {
+        // dist/lib/api.js → the package root.
+        return readFileSync(fileURLToPath(new URL('../../SKILL.md', import.meta.url)), 'utf8');
+    }
+    catch {
+        return null;
+    }
+}

package/dist/lib/json-file.js

@@ -0,0 +1,98 @@
+// Reading and writing a config file that belongs to somebody else.
+//
+// The rules this file exists to enforce, in order of how badly they'd hurt:
+//
+//   1. If the file doesn't parse, STOP. Never overwrite a config we couldn't
+//      read — `~/.claude.json` carries onboarding state, project history and
+//      every other MCP server the user has set up. Rewriting it from scratch
+//      because we couldn't parse it would be the worst thing this tool could
+//      possibly do.
+//   2. Back up before the first write, and tell the user where the backup is.
+//   3. Merge. Only our own key changes; every sibling is written back exactly
+//      as it was read.
+//   4. Write atomically — a temp file in the same directory, then rename — so
+//      a crash or a full disk can't leave a half-written config behind.
+import { copyFileSync, existsSync, mkdirSync, readFileSync, renameSync, writeFileSync, unlinkSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+export class ConfigUnreadableError extends Error {
+    path;
+    cause_;
+    constructor(path, cause_) {
+        super(`${path} is not valid JSON, so it was left untouched.`);
+        this.path = path;
+        this.cause_ = cause_;
+        this.name = 'ConfigUnreadableError';
+    }
+}
+/** Reads a JSON object, or `null` when the file simply isn't there yet. */
+export function readJsonFile(path) {
+    if (!existsSync(path))
+        return null;
+    let raw;
+    try {
+        raw = readFileSync(path, 'utf8');
+    }
+    catch (err) {
+        throw new ConfigUnreadableError(path, err);
+    }
+    if (!raw.trim())
+        return {};
+    let parsed;
+    try {
+        parsed = JSON.parse(raw);
+    }
+    catch (err) {
+        throw new ConfigUnreadableError(path, err);
+    }
+    if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+        throw new ConfigUnreadableError(path, new Error('top level is not an object'));
+    }
+    return parsed;
+}
+/**
+ * A timestamped copy beside the original: `.claude.json.noslopui-backup-<ts>`.
+ * Beside it rather than in a temp directory so the user can find it without
+ * being told twice, and timestamped so a second run can't clobber the first
+ * backup — which would defeat the point of having one.
+ */
+export function backupFile(path) {
+    if (!existsSync(path))
+        return null;
+    const stamp = new Date().toISOString().replace(/[:.]/g, '-');
+    const backup = `${path}.noslopui-backup-${stamp}`;
+    copyFileSync(path, backup);
+    return backup;
+}
+/** Write via a temp file in the same directory, then rename over the target. */
+export function writeJsonFile(path, value, { indent = 2 } = {}) {
+    const dir = dirname(path);
+    mkdirSync(dir, { recursive: true });
+    const temp = join(dir, `.noslopui-write-${process.pid}-${Date.now()}.tmp`);
+    try {
+        writeFileSync(temp, `${JSON.stringify(value, null, indent)}\n`, 'utf8');
+        renameSync(temp, path);
+    }
+    catch (err) {
+        try {
+            if (existsSync(temp))
+                unlinkSync(temp);
+        }
+        catch {
+            // The rename is what matters; a stray temp file is not worth a second error.
+        }
+        throw err;
+    }
+}
+/** Indentation of an existing file, so we write it back the way we found it. */
+export function detectIndent(path) {
+    try {
+        const raw = readFileSync(path, 'utf8');
+        const match = raw.match(/\n(\s+)"/);
+        if (match?.[1] && !match[1].includes('\t'))
+            return match[1].length;
+    }
+    catch {
+        // Not worth failing a write over; fall through to the default.
+    }
+    return 2;
+}