@qwertybit/pr-preview 0.1.5 → 0.1.7

package/CHANGELOG.md

@@ -6,6 +6,25 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [0.1.7] — 2026-07-08
+
+### Added
+
+- **PR Preview for Teams early-access nudge** — when a recording finishes, a short
+  promo points to the early-access list (`pr-preview.com/#teams`). In the manual CLI
+  (`pr-preview run`) it prints as the final block with a clickable terminal link
+  (OSC 8, degrading to a plain URL where unsupported); in the `/record` skill flow it
+  rides along with the `finish_recording` output as a markdown link.
+
+## [0.1.6] — 2026-07-07
+
+### Changed
+
+- **Demo shown inline** — the README now embeds the demo directly at the top
+  (an inline `<video>` player on GitHub; the autoplaying GIF on npm, which can't
+  render video) instead of a separate "Watch in higher quality" link. Demo URLs
+  are version-pinned so the CDN/GitHub image proxy never serve a stale clip.
+
 ## [0.1.5] — 2026-07-07
 
 ### Changed
@@ -108,7 +127,8 @@ Initial release.
   CSP `frame-ancestors`) are stripped.
 - CLI: `pr-preview init`, `pr-preview record`, `pr-preview run`.
 
-[Unreleased]: https://github.com/QwertyBit-Ventures/pr-preview/compare/v0.1.5...HEAD
+[Unreleased]: https://github.com/QwertyBit-Ventures/pr-preview/compare/v0.1.6...HEAD
+[0.1.6]: https://github.com/QwertyBit-Ventures/pr-preview/compare/v0.1.5...v0.1.6
 [0.1.5]: https://github.com/QwertyBit-Ventures/pr-preview/compare/v0.1.4...v0.1.5
 [0.1.4]: https://github.com/QwertyBit-Ventures/pr-preview/compare/v0.1.0...v0.1.4
 [0.1.0]: https://github.com/QwertyBit-Ventures/pr-preview/releases/tag/v0.1.0

package/README.md

@@ -15,12 +15,13 @@
   <a href="https://pr-preview.com"><img src="https://img.shields.io/badge/website-pr--preview.com-635bff" alt="pr-preview.com" /></a>
 </p>
 
+<!-- GitHub renders this <video> as an inline player; npm strips it and falls back to the GIF below. -->
 <p align="center">
-  <img src="https://cdn.jsdelivr.net/npm/@qwertybit/pr-preview/assets/demo.gif" alt="PR Preview demo — a Claude Code prompt drives the app in Chrome and produces before/after videos" width="720" />
+  <video src="https://cdn.jsdelivr.net/npm/@qwertybit/pr-preview@0.1.6/assets/demo.mp4" width="720" controls autoplay muted loop playsinline></video>
 </p>
 
 <p align="center">
-  <a href="https://cdn.jsdelivr.net/npm/@qwertybit/pr-preview/assets/demo.mp4">▶ Watch in higher quality (MP4)</a>
+  <img src="https://cdn.jsdelivr.net/npm/@qwertybit/pr-preview@0.1.6/assets/demo.gif" alt="PR Preview demo — a Claude Code prompt drives the app in Chrome and produces before/after videos" width="720" />
 </p>
 
 **PR Preview** opens your app in a controlled Chrome window and records the journey you perform —

package/dist/cli/index.js

@@ -2560,6 +2560,31 @@ async function detectLocalApps(preferred) {
   return results.filter((r) => r !== null);
 }
 
+// src/branding.ts
+import pc2 from "picocolors";
+var TEAMS_URL = "https://pr-preview.com/#teams";
+function osc8(url, label) {
+  return `\x1B]8;;${url}\x1B\\${label}\x1B]8;;\x1B\\`;
+}
+function isInteractive() {
+  return Boolean(process.stdout.isTTY) && process.env.TERM !== "dumb";
+}
+function teamsPromoTerminal() {
+  const link = isInteractive() ? osc8(TEAMS_URL, TEAMS_URL) : TEAMS_URL;
+  return [
+    `${pc2.magenta("\u2605")} ${pc2.bold("Love it? PR Preview for Teams is coming")} \u2014`,
+    pc2.dim("  hosted clips, team reviews & sharing."),
+    `  Join the early-access list \u2192 ${pc2.cyan(link)}`
+  ].join("\n");
+}
+function teamsPromoMarkdown() {
+  return `\u{1F49C} Enjoying this? **PR Preview for Teams** \u2014 hosted clips, team reviews & sharing \u2014 is coming soon. [Join the early-access list \u2192](${TEAMS_URL})`;
+}
+function printTeamsPromo() {
+  console.log();
+  console.log(teamsPromoTerminal());
+}
+
 // src/mcp/server.ts
 function urlAsk(found, hasConfig) {
   const lines = ["No URL was specified \u2014 I won't guess which app to record."];
@@ -2711,7 +2736,9 @@ ${snapshot}${SNAPSHOT_HINT}`);
           `Recording complete. Output:
 ${rel.map((r) => `  - ${r}`).join("\n")}${note}
 
-Drag the file into your PR description to embed it, or commit it and open the PR.`
+Drag the file into your PR description to embed it, or commit it and open the PR.
+
+` + teamsPromoMarkdown()
         );
       } catch (e) {
         return fail(e);
@@ -2777,7 +2804,7 @@ async function mcpCommand(repoRoot) {
 
 // src/cli/commands/record.ts
 import path16 from "path";
-import pc2 from "picocolors";
+import pc3 from "picocolors";
 
 // src/recorder/journey.ts
 import { readFile as readFile5, writeFile as writeFile4, mkdir as mkdir5 } from "fs/promises";
@@ -2831,7 +2858,7 @@ async function recordCommand(repoRoot, opts) {
     const boot = await bootstrap(repoRoot, config, "record");
     await boot.startApp("after", repoRoot);
     await boot.openBrowser("after");
-    log.info(`Harness open at ${pc2.bold(boot.harness.url)}`);
+    log.info(`Harness open at ${pc3.bold(boot.harness.url)}`);
     log.step("Click Record in the sidebar, perform the journey, then Confirm.");
     const steps = await boot.session.recordUntilConfirmed();
     if (steps.length === 0) {
@@ -2854,7 +2881,7 @@ async function recordCommand(repoRoot, opts) {
 // src/cli/commands/run.ts
 import { existsSync as existsSync10 } from "fs";
 import path17 from "path";
-import pc3 from "picocolors";
+import pc4 from "picocolors";
 
 // src/cli/util/openPath.ts
 import { spawn as spawn4 } from "child_process";
@@ -2937,7 +2964,7 @@ async function runCommand(repoRoot, opts) {
       );
     }
     const base = await detectBase(repoRoot, opts.base ?? config.baseBranch);
-    log.info(`PR base: ${pc3.bold(base.ref)} (${base.sha.slice(0, 10)}, via ${base.source})`);
+    log.info(`PR base: ${pc4.bold(base.ref)} (${base.sha.slice(0, 10)}, via ${base.source})`);
     if (await tryGit(repoRoot, ["status", "--porcelain"])) {
       log.info("Heads up: the AFTER clip captures your working tree, including uncommitted changes.");
     }
@@ -2964,7 +2991,7 @@ async function runCommand(repoRoot, opts) {
     boot.session.setBranches(base.ref, currentBranch);
     const beforeServer = await boot.startApp("before", worktree.dir);
     await boot.openBrowser("before");
-    log.info(`Harness open at ${pc3.bold(boot.harness.url)}`);
+    log.info(`Harness open at ${pc4.bold(boot.harness.url)}`);
     log.step(`Record the journey on BEFORE (${base.ref}), then Confirm in the sidebar.`);
     await boot.session.promptResetChoice();
     const beforeSteps = await boot.session.recordUntilConfirmed();
@@ -3011,11 +3038,12 @@ async function runCommand(repoRoot, opts) {
       outputs: { before: before.paths[0], after: after.paths[0] }
     });
     console.log();
-    log.success(pc3.bold("Done \u2014 drag these into your PR description:"));
+    log.success(pc4.bold("Done \u2014 drag these into your PR description:"));
     for (const p of [...before.paths, ...after.paths]) {
       log.step(path17.relative(repoRoot, p));
     }
     revealFiles([...before.paths, ...after.paths], outDir);
+    printTeamsPromo();
   } finally {
     await runCleanups();
   }
@@ -3027,12 +3055,12 @@ async function runSingleClip(repoRoot, config, outDir, opts) {
     const branch = await branchName(repoRoot, "app");
     let server;
     if (opts.url) {
-      log.info(`Using your running app at ${pc3.bold(opts.url)} (single clip).`);
+      log.info(`Using your running app at ${pc4.bold(opts.url)} (single clip).`);
     } else {
       server = await boot.startApp("before", repoRoot);
     }
     await boot.openBrowser("before");
-    log.info(`Harness open at ${pc3.bold(boot.harness.url)}`);
+    log.info(`Harness open at ${pc4.bold(boot.harness.url)}`);
     log.step(`Record the journey, then Confirm to save the clip.`);
     await boot.session.promptResetChoice();
     const steps = await boot.session.recordUntilConfirmed();
@@ -3053,22 +3081,23 @@ async function runSingleClip(repoRoot, config, outDir, opts) {
     boot.session.setPhase("done");
     boot.harness.bus.send({ type: "DONE", outputs: { before: clip.paths[0] } });
     console.log();
-    log.success(pc3.bold("Done \u2014 your clip:"));
+    log.success(pc4.bold("Done \u2014 your clip:"));
     for (const p of clip.paths) log.step(path17.relative(repoRoot, p));
     revealFiles(clip.paths, outDir);
+    printTeamsPromo();
   } finally {
     await runCleanups();
   }
 }
 async function runWithExternalApp(repoRoot, config, outDir, opts) {
-  log.info(`Using your running app at ${pc3.bold(opts.url)} (no dev server managed).`);
+  log.info(`Using your running app at ${pc4.bold(opts.url)} (no dev server managed).`);
   try {
     const boot = await bootstrap(repoRoot, config, "run", { fixedUrl: opts.url });
     boot.session.setPasses(2);
     const beforeBranch = await branchName(repoRoot, "before");
     boot.session.setBranches(beforeBranch, "your PR branch");
     await boot.openBrowser("before");
-    log.info(`Harness open at ${pc3.bold(boot.harness.url)}`);
+    log.info(`Harness open at ${pc4.bold(boot.harness.url)}`);
     log.step(`Record the journey on your app (currently ${beforeBranch}), then Confirm.`);
     await boot.session.promptResetChoice();
     const beforeSteps = await boot.session.recordUntilConfirmed();
@@ -3084,7 +3113,7 @@ async function runWithExternalApp(repoRoot, config, outDir, opts) {
       { branch: beforeBranch, baseBranch: beforeBranch, timestamp }
     );
     log.success(`${before.paths.map((p) => path17.basename(p)).join(" + ")} (${before.frameCount} frames)`);
-    log.info(pc3.bold("\u2192 Switch your app to the PR branch and restart it on the same URL, then Continue in the harness."));
+    log.info(pc4.bold("\u2192 Switch your app to the PR branch and restart it on the same URL, then Continue in the harness."));
     boot.harness.bus.send({
       type: "MANUAL_PAUSE",
       stepId: null,
@@ -3113,9 +3142,10 @@ async function runWithExternalApp(repoRoot, config, outDir, opts) {
     boot.session.setPhase("done");
     boot.harness.bus.send({ type: "DONE", outputs: { before: before.paths[0], after: after.paths[0] } });
     console.log();
-    log.success(pc3.bold("Done \u2014 drag these into your PR description:"));
+    log.success(pc4.bold("Done \u2014 drag these into your PR description:"));
     for (const p of [...before.paths, ...after.paths]) log.step(path17.relative(repoRoot, p));
     revealFiles([...before.paths, ...after.paths], outDir);
+    printTeamsPromo();
   } finally {
     await runCleanups();
   }