create-canary 0.1.0 → 0.2.0

package/README.md

@@ -1,26 +1,59 @@
 # create-canary
 
-The setup wizard for [canary](https://github.com/usecanary/canary) — an AI-agent QA toolkit that
-drives real browsers, records QA sessions (Playwright trace, video, network HAR, console), and
-renders self-contained verification reports.
+> The guided setup wizard for [Canary](https://github.com/usecanary/canary) — an AI-agent QA toolkit
+> that drives real browsers, records QA sessions (Playwright trace, video, network HAR, console), and
+> renders self-contained verification reports.
+
+[![npm](https://img.shields.io/npm/v/create-canary.svg)](https://www.npmjs.com/package/create-canary)
+[![license](https://img.shields.io/npm/l/create-canary.svg)](https://github.com/usecanary/canary)
+
+One command to get Canary, its browser runtime, and the agent integration set up — no flags to
+remember. Every step just shells out to the same published commands you could run by hand, so there's
+no magic and nothing bespoke to uninstall.
 
 ## Use
 
 ```bash
 npm create canary
-# or: npm init canary  ·  pnpm create canary  ·  yarn create canary
+# or:  npm init canary  ·  pnpm create canary  ·  yarn create canary
 ```
 
-The wizard installs the canary runtime into `~/.canary`, sets up the orchestrator CLI
-([`@usecanary/cli`](https://www.npmjs.com/package/@usecanary/cli)), and optionally wires up the
-agent skill so a coding agent can record sessions for you.
+You'll get a checklist (space toggles, enter confirms). Recommended items are pre-selected:
+
+| Step | Default | What it runs |
+| --- | --- | --- |
+| Install the `canary` command globally | ✓ | `npm i -g @usecanary/cli` |
+| Install the browser runtime (Chromium) | ✓ | `canary install` |
+| Install the agent skills (any tool) | ✓ | `npx skills add usecanary/canary` |
+| Install the Claude Code plugin (slash commands) | ✓ | `claude plugin marketplace add …` + `plugin install …` |
+| Also install `canary-browser` globally | — | `npm i -g @usecanary/browser` |
+| Also install the `canary-viewer` viewer globally | — | `npm i -g @usecanary/ui` |
+
+Installing the CLIs globally puts `canary`, `canary-browser`, and `canary-viewer` on your `PATH` so
+day-to-day use drops the `npx` prefix. If the Claude Code CLI isn't found, the wizard prints the
+in-app `/plugin …` commands to run instead.
+
+### Non-interactive
+
+In a pipe or CI (no TTY), the wizard prints the exact commands to run instead of prompting — safe to
+inspect before executing.
 
 ## After setup
 
 ```bash
-canary init                        # one-shot setup (runtime + agent skill)
-canary session start --name "checkout"
-npx @usecanary/ui                  # browse recorded sessions
+canary session start --name "checkout"   # start a recorded session (prints an id)
+canary run ./step.js --session <id> --step "open"
+canary session end <id>                  # -> ~/.canary/sessions/<id>/report.html
+canary-viewer                            # browse recorded sessions
 ```
 
+Using a coding agent? Try `/canary:verify` (plan QA for your changes) or `/canary:session` (record a
+flow) in Claude Code / Cursor / Codex. See `examples/` in the repo for runnable demos.
+
+## Related packages
+
+- [`@usecanary/cli`](https://www.npmjs.com/package/@usecanary/cli) — the `canary` session orchestrator.
+- [`@usecanary/browser`](https://www.npmjs.com/package/@usecanary/browser) — one-off automation engine.
+- [`@usecanary/ui`](https://www.npmjs.com/package/@usecanary/ui) — the `canary-viewer` session browser.
+
 MIT · [source](https://github.com/usecanary/canary)

package/dist/cli.js

@@ -36377,17 +36377,37 @@ function claudeAvailable() {
 function buildSteps() {
   const hasClaude = claudeAvailable();
   return [
+    {
+      id: "cli-global",
+      label: "Install the `canary` command globally (so you can skip npx)",
+      commands: [{ file: "npm", args: ["i", "-g", "@usecanary/cli"] }],
+      defaultSelected: true
+    },
     {
       id: "runtime",
       label: "Install the browser runtime (downloads Chromium)",
-      commands: [{ file: "npx", args: ["-y", "@usecanary/cli", "install"] }]
+      commands: [{ file: "npx", args: ["-y", "@usecanary/cli", "install"] }],
+      defaultSelected: true
+    },
+    {
+      id: "browser-global",
+      label: "Also install `canary-browser` globally (one-off automation)",
+      commands: [{ file: "npm", args: ["i", "-g", "@usecanary/browser"] }],
+      defaultSelected: false
+    },
+    {
+      id: "ui-global",
+      label: "Also install the session viewer `canary-viewer` globally",
+      commands: [{ file: "npm", args: ["i", "-g", "@usecanary/ui"] }],
+      defaultSelected: false
     },
     {
       id: "skills",
       label: "Install the agent skills (any tool \u2014 ~/.claude/skills, etc.)",
       commands: [
         { file: "npx", args: ["-y", "skills", "add", "usecanary/canary"] }
-      ]
+      ],
+      defaultSelected: true
     },
     {
       id: "plugin",
@@ -36402,7 +36422,8 @@ function buildSteps() {
           args: ["plugin", "install", "canary@canary-marketplace"]
         }
       ] : [],
-      manualHint: "/plugin marketplace add usecanary/canary   then   /plugin install canary@canary-marketplace"
+      manualHint: "/plugin marketplace add usecanary/canary   then   /plugin install canary@canary-marketplace",
+      defaultSelected: true
     }
   ];
 }
@@ -36426,7 +36447,7 @@ function SelectStep(props) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       MultiSelect,
       {
-        defaultValue: props.steps.map((s) => s.id),
+        defaultValue: props.steps.filter((s) => s.defaultSelected).map((s) => s.id),
         onSubmit: props.onSubmit,
         options: props.steps.map((s) => ({ label: s.label, value: s.id }))
       }
@@ -36439,9 +36460,17 @@ function printManual() {
       "",
       "canary setup \u2014 run these:",
       "",
-      "  npx @usecanary/cli install         # browser runtime (Chromium)",
+      "  npm i -g @usecanary/cli            # adds the `canary` command",
+      "  canary install                     # browser runtime (Chromium)",
       "  npx skills add usecanary/canary  # agent skills (any tool)",
-      "  npx @usecanary/ui                  # open the session viewer",
+      "",
+      "Optional:",
+      "  npm i -g @usecanary/browser        # canary-browser (one-off automation)",
+      "  npm i -g @usecanary/ui             # canary-viewer (session viewer)",
+      "",
+      "Then:",
+      "  canary session start --name checkout",
+      "  canary-viewer                      # browse recorded sessions",
       "",
       "Claude Code plugin:",
       "  /plugin marketplace add usecanary/canary",
@@ -36451,6 +36480,7 @@ function printManual() {
   );
 }
 async function runSelected(steps, selected) {
+  const cliGlobal = selected.includes("cli-global");
   for (const step of steps) {
     if (!selected.includes(step.id)) {
       continue;
@@ -36458,7 +36488,8 @@ async function runSelected(steps, selected) {
     process.stdout.write(`
 \u25B6 ${step.label}
 `);
-    if (step.commands.length === 0) {
+    const commands = step.id === "runtime" && cliGlobal ? [{ file: "canary", args: ["install"] }] : step.commands;
+    if (commands.length === 0) {
       if (step.manualHint) {
         process.stdout.write(`  ${step.manualHint}
 `);
@@ -36466,7 +36497,7 @@ async function runSelected(steps, selected) {
       continue;
     }
     let ok = true;
-    for (const cmd of step.commands) {
+    for (const cmd of commands) {
       const code = await runInherit(cmd);
       if (code !== 0) {
         ok = false;
@@ -36477,8 +36508,18 @@ async function runSelected(steps, selected) {
       ok ? "  \u2713 done\n" : "  \u2717 failed \u2014 you can re-run this step later\n"
     );
   }
+  const viewer = selected.includes("ui-global") ? "canary-viewer" : "npm i -g @usecanary/ui   # then: canary-viewer";
   process.stdout.write(
-    "\n\u2713 Setup complete.\n\n  Open the viewer:  npx @usecanary/ui\n  Demos:            see examples/ in the repo\n\n"
+    [
+      "",
+      "\u2713 Setup complete.",
+      "",
+      "  Record a session:  canary session start --name checkout",
+      `  Open the viewer:   ${viewer}`,
+      "  Demos:             see examples/ in the repo",
+      "",
+      ""
+    ].join("\n")
   );
 }
 async function main() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-canary",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "description": "Set up canary — browser automation + recorded QA sessions. Run `npm create canary`.",
   "license": "MIT",