clickroom 0.2.0 → 0.3.0

package/README.md

@@ -102,9 +102,15 @@ In a review, the project name in the toolbar is a switcher with the same list. `
 
 On clickroom.dev every team has a workspace at its own address, `<workspace>.clickroom.dev`, with its own people, projects, comments and builds. Each review is at `<workspace>.clickroom.dev/<project>`.
 
-- **Signing up:** on clickroom.dev, *Start a workspace* signs you in with your email address (a link, or Google) and asks for a name and an address. You're its owner and signed in there right away.
+- **The quickest start:** `npx clickroom` in a project's folder, nothing set up. It opens clickroom.dev, where you sign in (Google, or a link by email). New people name their workspace there, filled in for them (`olga@acme.com` → *Acme*, `acme.clickroom.dev`; a personal address → *Olga's workspace*); people with a workspace pick it. That one click connects the computer. The browser lands on the workspace's setup page, which opens v1 when the terminal has pushed it.
+- **Signing up:** on clickroom.dev, *Start a workspace* signs you in with your email address (a link, or Google). Someone without a workspace goes straight to step 1, its name and address (filled in the same way). The rest of the setup is at `<workspace>.clickroom.dev/welcome`.
+  Step 2, share your first prototype: one command in the project's folder, `npx clickroom --workspace <slug>`. The first run opens the site to connect the computer (one click), then builds the project and pushes v1. The page ticks off when the computer connects and when v1 arrives.
+
+  Teammates and clients are invited later, from the dashboard.
+
+  Until the owner finishes or skips the setup, the dashboard offers to continue it. Teammates land on the same page from their invite, with only the install-and-connect step.
 - **Your workspaces:** clickroom.dev lists every workspace your address is in, as an owner, teammate or client. *Open* signs you in there. Each workspace's dashboard has *Switch* next to its name.
-- **Sharing from a computer:** `clickroom login <workspace>`, then `clickroom` in a project. Builds are uploaded. Live dev servers (the relay) belong to the first workspace only.
+- **Sharing from a computer:** `npx clickroom --workspace <workspace>` in a project's folder: it connects the computer the first time, then shares the project. `clickroom login <workspace>` only connects. Builds are uploaded. Live dev servers (the relay) belong to the first workspace only.
 - **Separate by design:** a sign-in, a CLI key or a share link of one workspace opens nothing in another, even for a project with the same name (`test/workspaces.test.js`). The admin key and the Slack webhook belong to the first workspace.
 
 How it's set up:
@@ -146,12 +152,12 @@ Teammates share their own builds with you through your clickroom (for example cl
 
 ```sh
 npm install -g clickroom
-clickroom login              # opens clickroom in the browser: approve this computer
+clickroom login              # opens clickroom in the browser: sign in, approve this computer
 cd ~/code/their-app
 clickroom                    # builds it, uploads it as v1; p pushes the next version
 ```
 
-- **`clickroom login`** asks clickroom for a login and opens a page where they approve this computer. They sign in from their invite there, as a teammate. Clients can't connect the command. The page and the terminal show the same code to compare.
+- **`clickroom login`** asks clickroom for a login and opens a page where they approve this computer. They sign in there with the address they were invited with, and pick the workspace if they're in several (`clickroom login acme` goes straight to acme). Clients can't connect the command. The page and the terminal show the same code to compare.
   - The terminal then gets a key of its own in `~/.clickroom/credentials.json` (readable only by them). It lasts 90 days from its last use.
   - `clickroom logout` ends it. *Revoke* on the People panel ends it as well, along with their browser sign-ins.
   - `clickroom login https://other.example` connects to another clickroom server; `clickroom whoami` shows who's connected.

package/bin/clickroom.js

@@ -7,11 +7,12 @@ import { call } from '../cli/client.js';
 
 const HELP = `clickroom: multiplayer review for locally built prototypes
 
-On a teammate's computer
-  clickroom login <workspace> connect this computer to your team's workspace (acme → acme.clickroom.dev):
-                              approve it in the browser where you're signed in from your invite
-  clickroom                   then, in a project: builds it, uploads it as v1 and keeps the session open
-                              (p pushes the next version). The team sees it on the dashboard.
+Share a project with your workspace
+  npx clickroom               in a project: the first time it opens clickroom.dev to connect this
+                              computer (sign in, pick or name your workspace), then builds the project,
+                              uploads it as v1 and keeps the session open (p pushes the next version)
+  npx clickroom --workspace acme   the same, straight to acme.clickroom.dev
+  clickroom login [workspace] only connect; then run clickroom in a project
   clickroom logout | whoami
 
 Share the project you're in (run inside any project folder)
@@ -80,6 +81,7 @@ const { values: opts, positionals } = parseArgs({
     build: { type: 'string' },
     live: { type: 'boolean' },
     'no-open': { type: 'boolean' },
+    workspace: { type: 'string', short: 'w' },
     print: { type: 'boolean' },
     'no-comments': { type: 'boolean' },
     'no-questions': { type: 'boolean' },

package/cli/login.js

@@ -6,15 +6,46 @@ import { bold, dim } from './dev.js';
 export const DEFAULT_URL = 'https://clickroom.dev';
 
 // `clickroom login [workspace|url]`: connects this computer to a clickroom workspace as you
-// ("acme" means https://acme.clickroom.dev). It opens a page in your browser (where you're signed
-// in from your invite) to approve this computer, then keeps a key of its own in
-// ~/.clickroom/credentials.json.
+// ("acme" means https://acme.clickroom.dev; none: clickroom.dev asks). It opens a page in your
+// browser to approve this computer, then keeps a key of its own in ~/.clickroom/credentials.json.
+// "acme" → https://acme.clickroom.dev; a URL stays as it is.
+export function workspaceUrl(arg) {
+  if (/^[a-z][a-z0-9-]{1,19}$/.test(arg)) return `https://${arg}.${new URL(DEFAULT_URL).hostname}`;
+  return String(arg).replace(/\/$/, '');
+}
+
 export async function login(arg) {
-  if (arg && /^[a-z][a-z0-9-]{1,19}$/.test(arg)) arg = `https://${arg}.${new URL(DEFAULT_URL).hostname}`;
-  const url = (arg || process.env.CLICKROOM_URL || credentials()?.url || DEFAULT_URL).replace(/\/$/, '');
+  if (arg) arg = workspaceUrl(arg);
+  const known = arg || process.env.CLICKROOM_URL || credentials()?.url;
+  // No workspace given (and none from before): clickroom.dev asks in the browser, where you sign
+  // in and pick yours, or name a new one.
+  if (!known) return connect();
+  const url = known.replace(/\/$/, '');
   if (!/^https?:\/\//.test(url)) throw new Error('usage: clickroom login <workspace>   (or a URL: clickroom login https://acme.clickroom.dev)');
   if (adminToken() && !process.env.CLICKROOM_TOKEN) console.log(dim('  This computer has the admin key (.dev.vars), which the clickroom command uses first.'));
-  const res = await fetch(`${url}/__ps/api/cli-login`, {
+  const start = await begin(`${url}/__ps/api/cli-login`, url);
+  console.log(`\n  Approve this computer in your browser:\n  ${bold(start.url)}\n`);
+  console.log(`  Check that the page shows ${bold(start.code)}.`);
+  console.log(dim('  Not signed in there? Sign in with the email address you were invited with.\n'));
+  openUrl(start.url);
+  const d = await wait(`${url}/__ps/api/cli-login/poll`, start);
+  done(url, d);
+}
+
+// The first `npx clickroom` on a computer: started on clickroom.dev, approved in the browser
+// (signing in with Google is most of it), connected to the workspace picked or made there.
+async function connect() {
+  const auth = (process.env.CLICKROOM_AUTH_URL || DEFAULT_URL).replace(/\/$/, '');
+  const start = await begin(`${auth}/__ps/api/connect`, auth);
+  console.log(`\n  Opening clickroom in your browser to connect this computer:\n  ${bold(start.url)}\n`);
+  console.log(dim(`  Sign in there (new here? you name your workspace next). It shows ${start.code}.\n`));
+  openUrl(start.url);
+  const d = await wait(`${auth}/__ps/api/connect/poll`, start);
+  done(d.url.replace(/\/$/, ''), d);
+}
+
+async function begin(endpoint, url) {
+  const res = await fetch(endpoint, {
     method: 'POST',
     headers: { 'content-type': 'application/json' },
     body: JSON.stringify({ label: `${os.userInfo().username} on ${os.hostname().replace(/\.local$/, '')}` }),
@@ -22,16 +53,14 @@ export async function login(arg) {
   if (!res) throw new Error(`Can't reach ${url}.`);
   const start = await res.json().catch(() => ({}));
   if (!res.ok) throw new Error(start.error || `${url} answered ${res.status}`);
+  return start;
+}
 
-  console.log(`\n  Approve this computer in your browser:\n  ${bold(start.url)}\n`);
-  console.log(`  Check that the page shows ${bold(start.code)}.`);
-  console.log(dim('  Not signed in there? Sign in with the email address you were invited with.\n'));
-  openUrl(start.url);
-
+async function wait(endpoint, start) {
   const until = Date.now() + start.expiresIn * 1000;
   while (Date.now() < until) {
     await new Promise((r) => setTimeout(r, 2000));
-    const r = await fetch(`${url}/__ps/api/cli-login/poll`, {
+    const r = await fetch(endpoint, {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
       body: JSON.stringify({ poll: start.poll }),
@@ -39,14 +68,14 @@ export async function login(arg) {
     if (!r?.ok) continue;
     const d = await r.json();
     if (d.status === 'expired') break;
-    if (d.status === 'approved') {
-      saveCredentials({ url, token: d.token, name: d.me.name, email: d.me.email || null, at: new Date().toISOString() });
-      console.log(`${bold('✔')} Signed in to ${url} as ${bold(d.me.name)}${d.me.email ? ` (${d.me.email})` : ''}.`);
-      console.log(dim('  Run `clickroom` in a project to share it.'));
-      return;
-    }
+    if (d.status === 'approved') return d;
   }
-  throw new Error('The approval link expired. Run `clickroom login` again.');
+  throw new Error('The approval link expired. Run it again.');
+}
+
+function done(url, d) {
+  saveCredentials({ url, token: d.token, name: d.me.name, email: d.me.email || null, at: new Date().toISOString() });
+  console.log(`${bold('✔')} Connected to ${bold(url.replace(/^https?:\/\//, ''))} as ${bold(d.me.name)}${d.me.email ? ` (${d.me.email})` : ''}.`);
 }
 
 export async function logout() {

package/cli/share.js

@@ -2,7 +2,7 @@ import fs from 'node:fs';
 import readline from 'node:readline';
 import { spawn } from 'node:child_process';
 import path from 'node:path';
-import { readLocal, writeLocal, copyBuild, cloudUrl, baseUrl, isTeammate, adminToken, ROOT } from './config.js';
+import { readLocal, writeLocal, copyBuild, cloudUrl, baseUrl, isTeammate, adminToken, credentials, ROOT } from './config.js';
 import { call, isUp, signinLink } from './client.js';
 import { projectRoot, projectName, parseTarget, detectTarget } from './detect.js';
 import { startServer, bold, dim } from './dev.js';
@@ -26,10 +26,18 @@ export async function share(arg, opts) {
   const port = Number(opts.port || cfg.port || 8787);
   // In cloud mode comments, versions and links live on the deployed worker; this Mac only
   // relays Live views and API calls (the local server, usually the background service).
+  // Not connected to a workspace yet (`npx clickroom` in a fresh project): connect first (signing in
+  // in the browser; --workspace acme skips picking it there), then share, in the same run.
+  const hasServer = fs.existsSync(path.join(ROOT, 'node_modules', '.bin', 'wrangler'));
+  if (!opts.local && !adminToken() && !process.env.CLICKROOM_TOKEN) {
+    const { login, workspaceUrl } = await import('./login.js');
+    const want = opts.workspace ? workspaceUrl(opts.workspace) : null;
+    if (want ? credentials()?.url !== want : !credentials() && !hasServer) await login(opts.workspace);
+  }
   // A teammate's computer (`clickroom login`): their builds go to the team's clickroom server.
   const teammate = isTeammate() && !opts.local;
-  if (!teammate && !adminToken() && !fs.existsSync(path.join(ROOT, 'node_modules', '.bin', 'wrangler'))) {
-    throw new Error('Not signed in. Run `clickroom login` first (it opens clickroom in your browser).');
+  if (!teammate && !adminToken() && !hasServer) {
+    throw new Error('Not connected to a workspace. Run `npx clickroom` (it opens clickroom in your browser).');
   }
   const cloud = opts.local ? null : cloudUrl();
   if (!cloud) process.env.CLICKROOM_URL = `http://localhost:${port}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clickroom",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Share prototype builds for review: pins, region comments, threads, versions, and agent hand-off (MCP). Teammates push builds to their team’s clickroom with `clickroom login`.",
   "type": "module",
   "bin": {