Ship v0.3 installable widget flow

Author: P4ND4907

README.md

@@ -10,6 +10,8 @@ Live app: <https://p4nd4907.github.io/panda-notes/>
 
 Widget demo: <https://p4nd4907.github.io/panda-notes/widget-demo.html>
 
+Install widget: <https://p4nd4907.github.io/panda-notes/install.html>
+
 Paid services: <https://p4nd4907.github.io/panda-notes/services.html>
 
 Private intake: <https://p4nd4907.github.io/panda-notes/private-intake.html>
@@ -22,7 +24,7 @@ Need it installed or cleaned up for you? Start with the [Panda Notes services pa
 
 - Testers capture the broken, confusing, missing, cramped, or slow part of a product while the target context is fresh.
 - Developers review a grouped repair queue with note evidence, role/tag filters, code hints, JSON exports, and issue drafts.
-- Teams keep the public tool free and local-first, then pay for setup sprints, feedback cleanup, or private integration when they want help.
+- Teams can self-host the MIT code, then pay for setup sprints, feedback cleanup, or private integration when they want it handled cleanly.
 
 ## Focus
 
@@ -40,7 +42,7 @@ Need it installed or cleaned up for you? Start with the [Panda Notes services pa
 - GitHub-ready issue draft copy/export with tester evidence, labels, target code, and test plan.
 - Repair prompt copy/export for handing a selected issue to Codex, ChatGPT, or another code assistant without adding secrets to the widget.
 - Developer packet copy/export and JSON import/export for moving notes between browsers or projects.
-- Alpha embeddable right-click widget at `/panda-notes-widget.js`.
+- v0.3 installable right-click widget at `/panda-notes-widget.js`, with optional launcher, hotkey, private-intake link, copied issue drafts, and target code hints.
 
 ## Can I Use It In My Project?
 
@@ -52,6 +54,7 @@ Current integration:
 - Import/export Panda Notes JSON between projects or browsers.
 - Copy developer packets and GitHub-ready issue drafts.
 - Add the alpha right-click widget to a project with one script tag.
+- Generate a paid-install snippet at <https://p4nd4907.github.io/panda-notes/install.html>.
 
 Alpha widget install:
 
@@ -62,7 +65,11 @@ Alpha widget install:
     project: "my-app",
     role: "beta",
     mode: "local",
-    contextMenu: true
+    contextMenu: true,
+    launcher: true,
+    hotkey: "ctrl+shift+p",
+    privateIntakeUrl: "https://p4nd4907.github.io/panda-notes/private-intake.html",
+    installPlan: "setup-sprint"
   });
 </script>
 ```

api/_lib/stripeWebhook.js

@@ -6,6 +6,13 @@ const acceptedEventTypes = new Set([
   'payment_intent.succeeded'
 ]);
 
+const offerLabels = {
+  'setup-sprint': 'Setup Sprint',
+  'developer-handoff': 'Developer Handoff Pack',
+  'private-integration': 'Private Integration',
+  'scope-needed': 'Scope Needed'
+};
+
 export function verifyStripeSignature(rawBody, signatureHeader, secret, toleranceSeconds = 300) {
   if (!signatureHeader || !secret) return false;
   const parts = Object.fromEntries(
@@ -34,29 +41,39 @@ export function shouldRecordStripeEvent(event) {
   return acceptedEventTypes.has(event?.type);
 }
 
-export function buildStripeIssue(event) {
+export function buildStripeIssue(event, options = {}) {
   const object = event?.data?.object || {};
   const payment = extractPaymentSummary(event);
+  const offerLabel = offerLabels[payment.offerKey] || 'Panda Notes Service';
+  const intakeLink = buildPaidIntakeUrl({
+    offerKey: payment.offerKey,
+    eventId: event.id,
+    email: payment.email,
+    paymentIntent: payment.paymentIntent
+  }, options.baseUrl || process.env.PANDA_NOTES_BASE_URL || 'https://p4nd4907.github.io/panda-notes/');
   const marker = `stripe-event-${event.id}`;
-  const title = `[Stripe Paid] ${payment.amountLabel} - ${payment.email || payment.customer || event.id}`;
+  const title = `[Stripe Paid] ${offerLabel} - ${payment.amountLabel} - ${payment.email || payment.customer || event.id}`;
   const body = [
     `<!-- ${marker} -->`,
     '# Panda Notes Stripe Confirmation',
     '',
     `Event ID: ${event.id}`,
     `Event type: ${event.type}`,
+    `Offer: ${offerLabel}`,
     `Created: ${event.created ? new Date(event.created * 1000).toISOString() : new Date().toISOString()}`,
     `Amount: ${payment.amountLabel}`,
     `Customer email: ${payment.email || 'Not provided'}`,
     `Customer ID: ${payment.customer || 'Not provided'}`,
     `Payment link: ${payment.paymentLink || 'Not provided'}`,
     `Checkout session: ${object.id || 'Not provided'}`,
     `Payment intent: ${payment.paymentIntent || 'Not provided'}`,
+    `Private intake link: ${intakeLink}`,
     '',
     '## Metadata',
     codeBlock(JSON.stringify(object.metadata || {}, null, 2)),
     '',
     '## Owner Checklist',
+    '- Send the private intake link to the customer if they did not already submit scope.',
     '- Match this payment to a private intake packet or public-safe GitHub request.',
     '- Add `payment-confirmed` to the matching work item.',
     '- Confirm scope and delivery date before work starts.'
@@ -66,7 +83,7 @@ export function buildStripeIssue(event) {
     marker,
     title,
     body,
-    labels: ['paid-service', 'payment-confirmed', 'stripe-deposit']
+    labels: ['paid-service', 'payment-confirmed', 'stripe-deposit', payment.offerKey].filter(Boolean)
   };
 }
 
@@ -75,17 +92,33 @@ export function extractPaymentSummary(event) {
   const amount = object.amount_total ?? object.amount_received ?? object.amount ?? 0;
   const currency = String(object.currency || 'usd').toUpperCase();
   const email = object.customer_details?.email || object.receipt_email || object.billing_details?.email || '';
+  const offerKey = normalizeOfferKey(object.metadata?.panda_notes_offer || object.metadata?.service || '');
   return {
     amount,
     amountLabel: formatAmount(amount, currency),
     currency,
     customer: typeof object.customer === 'string' ? object.customer : '',
     email,
+    offerKey,
     paymentIntent: typeof object.payment_intent === 'string' ? object.payment_intent : object.id || '',
     paymentLink: typeof object.payment_link === 'string' ? object.payment_link : ''
   };
 }
 
+export function buildPaidIntakeUrl({
+  offerKey = 'scope-needed',
+  eventId = '',
+  email = '',
+  paymentIntent = ''
+} = {}, baseUrl = 'https://p4nd4907.github.io/panda-notes/') {
+  const url = new URL('private-intake.html', withTrailingSlash(baseUrl));
+  url.searchParams.set('service', offerLabels[normalizeOfferKey(offerKey)] || 'Not sure yet');
+  if (eventId) url.searchParams.set('paymentReference', eventId);
+  if (email) url.searchParams.set('replyEmail', email);
+  if (paymentIntent) url.searchParams.set('stripePayment', paymentIntent);
+  return url.toString();
+}
+
 function formatAmount(amount, currency) {
   const major = Number(amount || 0) / 100;
   return `${major.toLocaleString('en-US', { style: 'currency', currency })} ${currency}`;
@@ -95,6 +128,15 @@ function codeBlock(value) {
   return ['```json', value, '```'].join('\n');
 }
 
+function normalizeOfferKey(value) {
+  const key = String(value || '').trim().toLowerCase();
+  return offerLabels[key] ? key : 'scope-needed';
+}
+
+function withTrailingSlash(value) {
+  return String(value || '').endsWith('/') ? String(value) : `${value}/`;
+}
+
 function secureCompareHex(a, b) {
   try {
     const left = Buffer.from(a, 'hex');

docs/EMBEDDING.md

@@ -2,11 +2,14 @@
 
 Panda Notes is MIT licensed, so teams may link to it, copy it, fork it, and adapt it for their own projects as long as the license notice stays with the software.
 
+Paid setup is available when a team wants Panda Notes installed, configured, and handed off without doing the integration work themselves.
+
 ## Current Integration
 
-Today, Panda Notes includes a standalone local-first console and an alpha right-click widget:
+Today, Panda Notes includes a standalone local-first console and a v0.3 right-click widget:
 
 - Send testers to the hosted app: <https://p4nd4907.github.io/panda-notes/>
+- Generate a paid-install snippet: <https://p4nd4907.github.io/panda-notes/install.html>
 - Try the widget demo: <https://p4nd4907.github.io/panda-notes/widget-demo.html>
 - Export notes as JSON from one browser and import them into another.
 - Copy a developer packet or GitHub-ready issue draft from the selected target issue.
@@ -25,7 +28,11 @@ Projects can load the widget during alpha or beta testing:
     project: "my-app",
     role: "beta",
     mode: "local",
-    contextMenu: true
+    contextMenu: true,
+    launcher: true,
+    hotkey: "ctrl+shift+p",
+    privateIntakeUrl: "https://p4nd4907.github.io/panda-notes/private-intake.html",
+    installPlan: "setup-sprint"
   });
 </script>
 ```
@@ -35,8 +42,8 @@ Expected tester flow:
 1. Tester right-clicks a target UI element.
 2. Panda Notes opens a small themed note popup.
 3. Tester picks a tag and writes what happened.
-4. The widget captures page, route, viewport, exact right-click point, element label, CSS path, and optional `data-component`.
-5. Notes remain local until the tester exports JSON or copies a handoff packet.
+4. The widget captures page, route, viewport, exact right-click point, element label, CSS selector/path, selected text, optional `data-component`, and optional code hints.
+5. Notes remain local until the tester exports JSON, copies a handoff packet, or copies a GitHub-ready issue draft.
 
 ## Suggested Markup
 
@@ -46,6 +53,8 @@ Apps that want better developer handoff should add stable hints to important con
 <button
   data-component="CheckoutSubmitButton"
   data-panda-target="Checkout submit"
+  data-panda-file="src/checkout/CheckoutSubmitButton.jsx"
+  data-panda-symbol="handleCheckoutSubmit"
 >
   Place order
 </button>
@@ -60,20 +69,28 @@ PandaNotes.init({
   project: "my-app",
   role: "alpha", // alpha, beta, or developer
   storageKey: "panda-notes-widget:my-app",
-  contextMenu: true
+  contextMenu: true,
+  launcher: true,
+  hotkey: "ctrl+shift+p",
+  privateIntakeUrl: "https://p4nd4907.github.io/panda-notes/private-intake.html",
+  installPlan: "setup-sprint"
 });
 
+PandaNotes.openForTarget(document.querySelector('[data-panda-target]'), { x: 320, y: 240 });
 PandaNotes.getNotes();
 PandaNotes.exportNotes();
 PandaNotes.destroy();
 ```
 
 The exported JSON is compatible with the standalone console import flow.
 
+## Paid Install Checklist
+
+For a setup sprint, send the app URL, the target flows, tester roles, preferred delivery window, and whether the widget should use only right-click, the launcher button, the hotkey, or all three. Keep credentials and private files out of public GitHub issues; use the private intake page for scope and move secrets only through the agreed private channel.
+
 ## Still To Strengthen
 
 - Optional screenshot or DOM snapshot hook for projects that opt in.
-- Optional GitHub issue draft handoff from captured notes.
 - Import helper that sends widget JSON directly into the standalone console.
 - More browser coverage around cross-origin app shells and shadow DOM targets.
 - No hidden telemetry remains the default.

docs/STRIPE.md

@@ -12,6 +12,8 @@ Create three one-time deposit links:
 
 The public Services page reads `public/stripe-links.json`. If a Stripe URL is present for an offer, its button goes to Stripe checkout. If a Stripe URL is blank, the button falls back to the matching GitHub intake form.
 
+Generated Payment Links redirect buyers back to Panda Notes after checkout. The current automation routes buyers to the private intake path so the paid customer can submit service, payment reference, reply email, scope, deadline, project URL, and delivery context without posting private details to public GitHub issues.
+
 ## Dashboard Setup
 
 1. Open Stripe Dashboard Payment Links.
@@ -70,7 +72,7 @@ Never commit `sk_test_...` or `sk_live_...` keys. `.env` and `.env.local` are ig
 
 ## Webhook Confirmation
 
-Panda Notes includes a serverless webhook at `/api/stripe-webhook`. It verifies Stripe's `Stripe-Signature` header with `STRIPE_WEBHOOK_SECRET`, ignores unrelated event types, and creates a private `payment-confirmed` issue in the private intake repo for successful checkout events.
+Panda Notes includes a serverless webhook at `/api/stripe-webhook`. It verifies Stripe's `Stripe-Signature` header with `STRIPE_WEBHOOK_SECRET`, ignores unrelated event types, and creates a private `payment-confirmed` issue in the private intake repo for successful checkout events. The private issue includes the matched offer, amount, customer email when Stripe provides it, and a ready-to-send private intake link.
 
 Do not expose the webhook signing secret in GitHub Pages, public issues, or committed files.
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "panda-notes",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "private": false,
   "description": "Standalone developer and alpha/beta tester feedback console.",
   "author": "P4ND4907",