@spark-apps/quickpeek 1.2.3 → 1.2.5

package/README.md

@@ -1,8 +1,7 @@
 [license-link]: ./LICENSE
 [privacy-link]: ./PRIVACY.md
 [discord-link]: https://discord.gg/mAjHWE3mSp
-[stars-link]: ../../stargazers
-[issues-link]: ../../issues
+[coffee-link]: https://buymeacoffee.com/spark88
 
 <div align="center">
 
@@ -15,7 +14,8 @@
 [![npm](https://img.shields.io/npm/v/@spark-apps/quickpeek?style=flat-square&logo=npm&logoColor=white&color=crimson)](https://www.npmjs.com/package/@spark-apps/quickpeek)
 [![MIT](https://img.shields.io/badge/License-MIT-blueviolet?style=flat-square)][license-link]
 [![Discord](https://img.shields.io/badge/Discord-Join-5865F2?style=flat-square&logo=discord&logoColor=white)][discord-link]
-[![GitHub Stars](https://img.shields.io/github/stars/muammar-yacoob/quickpeek?style=flat-square)][stars-link]
+
+[![Listed on Sellular](https://sellular.online/badge/quickpeek.svg)](https://sellular.online/badge/quickpeek/go)
 
 </div>
 
@@ -23,18 +23,37 @@
 
 ## Quick Start
 
+Nothing to install:
+
+```bash
+npx @spark-apps/quickpeek https://your-app.com
+```
+
+Or install it for repeat use:
+
 ```bash
 npm install -g @spark-apps/quickpeek
 qp localhost:3000
 ```
 
-**Requirements:** [ffmpeg](https://ffmpeg.org/download.html), [Groq API key](https://console.groq.com/keys) (free)
+**Requirements:** [ffmpeg](https://ffmpeg.org/download.html). Nothing else. The AI
+runs through QuickPeek's hosted relay, so there is no API key to get.
+
+**Free tier:** 5 videos on an unconfirmed email, then 10 a day once you confirm
+it. No card either way. The CLI asks for an address on the first run because the
+AI planner runs on our servers and is metered per account; over
+[MCP](#mcp-server) no account is needed at all, because your own model does the
+writing. A free video of 20 seconds or under comes out clean; a longer free video
+carries a QuickPeek watermark. The hosted web recorder at quickpeek.co is
+deliberately different: there, free videos are capped at 20 seconds and are
+always watermarked. [docs/plans-and-pricing.md](docs/plans-and-pricing.md) sets
+the two side by side.
 
 ## Features
 
 | Feature | Description |
 |---------|-------------|
-| **AI Planning** | Groq AI analyzes your app and generates demo steps |
+| **AI Planning** | AI analyzes your app and generates demo steps |
 | **Script Mode** | Provide your own narration script, AI maps it to UI actions |
 | **Capture Mode** | Record your own interactions → replayable plan.json |
 | **Voice Over** | Free Edge TTS narration in 60+ languages |
@@ -45,13 +64,13 @@ qp localhost:3000
 
 ## Examples
 
-### Basic — AI generates the plan
+### Basic: AI generates the plan
 
 ```bash
 qp localhost:3000
 ```
 
-### Script mode — you write the narration
+### Script mode: you write the narration
 
 ```bash
 qp localhost:3000 --script narration.txt
@@ -61,12 +80,12 @@ Script file format (one caption per line, `#` for comments):
 
 ```
 # My app demo
-We start on the dashboard — your main workspace.
+We start on the dashboard, your main workspace.
 Let's search for a customer by typing their name.
 Click the result to open their profile.
 ```
 
-### Capture mode — record your own interactions
+### Capture mode: record your own interactions
 
 ```bash
 qp capture localhost:3000
@@ -175,6 +194,40 @@ Edit `demo/plan.json` to customize your demo. Each step uses one of these action
 
 **Target shortcuts:** For buttons and links, use simplified text like `"download"` or `"extract frame"` instead of CSS selectors.
 
+## MCP Server
+
+QuickPeek ships an MCP server (`quickpeek-mcp`) so an AI agent can record a demo
+directly, with no shelling out to the CLI.
+
+```bash
+claude mcp add quickpeek -- npx -y --package=@spark-apps/quickpeek quickpeek-mcp
+```
+
+Or add it by hand, for any MCP client:
+
+```json
+{
+  "mcpServers": {
+    "quickpeek": {
+      "command": "npx",
+      "args": ["-y", "--package=@spark-apps/quickpeek", "quickpeek-mcp"]
+    }
+  }
+}
+```
+
+Published on the [official MCP registry](https://registry.modelcontextprotocol.io)
+as `co.quickpeek/quickpeek`.
+
+**9 tools:** `generate_demo`, `generate_demo_from_script`, `list_demos`,
+`get_demo_config`, `list_voices`, `open_in_editor`, `check_account`, and the
+`start_auth` / `finish_auth` pair for recording an app you have to log into.
+
+The server never calls an AI itself. It hands the planning and narration prompts
+back to you, the calling model, and takes your answer as a parameter, so a demo
+costs you no QuickPeek quota and no second-rate model. That is also why this path
+needs no account at all for the first 5 videos, where the CLI asks for an email.
+
 ## Output
 
 | File | Description |
@@ -188,12 +241,10 @@ Edit `demo/plan.json` to customize your demo. Each step uses one of these action
 
 ## 🌱 Support & Contributions
 
-⭐ **Star the repo** & I power up like Mario 🍄  
 ☕ **Devs run on coffee** - [Buy me one?][coffee-link]  
-💖 **Sponsor** [Your support][stars-link] helps maintain and improve the tool<br>
 💰 **Crypto tips welcome** - [Tip in crypto](https://tip.md/muammar-yacoob)  
-🤝 **Contributions are welcome** - [🍴 Fork][fork-link], improve, PR!  
-🎥 **Need help?** <img src="https://img.icons8.com/color/20/youtube-play.png" alt="YouTube" width="20" height="20" style="vertical-align: middle;"> [Setup Tutorial][vid-link] • <img src="https://img.icons8.com/color/20/discord--v2.png" alt="Discord" width="20" height="20" style="vertical-align: middle;"> [Join Discord][discord-link]
+🎬 **See it work** - [Watch a demo](https://www.youtube.com/shorts/HaibrNvJknY)  
+🐛 **Found a bug or want a feature?** <img src="https://img.icons8.com/color/20/discord--v2.png" alt="Discord" width="20" height="20" style="vertical-align: middle;"> [Join Discord][discord-link] - the repo is private, so Discord is the way in.
 
 <div align="center">
 

package/dist/assets/music/manifest.json

@@ -0,0 +1,32 @@
+{
+  "_comment": "Every track here must be CC0 / public domain: QuickPeek redistributes these inside the published package, so any attribution or share-alike condition would propagate to every user of the tool. Record provenance for anything added. Sourced from VidLet's vetted set (assets/music), same artist, same licence.",
+  "tracks": [
+    {
+      "file": "calm-drifting-piano.mp3",
+      "title": "Drifting Piano",
+      "artist": "HoliznaCC0",
+      "license": "CC0 1.0 Universal",
+      "source": "https://freemusicarchive.org/music/holiznacc0/background-music",
+      "mood": "calm",
+      "duration": 110.473
+    },
+    {
+      "file": "upbeat-spring-on-the-horizon.mp3",
+      "title": "Spring On The Horizon",
+      "artist": "HoliznaCC0",
+      "license": "CC0 1.0 Universal",
+      "source": "https://freemusicarchive.org/music/holiznacc0/background-music",
+      "mood": "corporate",
+      "duration": 91.777
+    },
+    {
+      "file": "lofi-roof-tops.mp3",
+      "title": "Roof Tops",
+      "artist": "HoliznaCC0",
+      "license": "CC0 1.0 Universal",
+      "source": "https://freemusicarchive.org/music/holiznacc0/summer-air-lo-fi",
+      "mood": "lofi",
+      "duration": 214.441
+    }
+  ]
+}

package/dist/highlight.css

@@ -6,10 +6,11 @@
   pointer-events: none;
 }
 
-[data-qp-highlight] {
-  position: relative !important;
-  z-index: 999999 !important;
-  outline: 3px solid #ffd700 !important;
-  outline-offset: 2px !important;
-  border-radius: 8px !important;
-}
+/*
+ * The ring itself is drawn as a body-level element by applyHighlight, sized
+ * to the target's card rather than to the words inside it. Styling the target
+ * element directly is deliberately NOT done any more: an ancestor with
+ * overflow:hidden clipped it away on exactly the card lists it was meant for,
+ * and where it did survive it drew a second ring on top of the floating one,
+ * which is what made the highlight look thick and cramped.
+ */