Vibecode Escourtly

You are building a lean indie version of Escourtly.

Create the following project files first, then implement the application by following them. Keep the files updated as decisions change. Do not collapse this into a single README or prompt.

===== README.md =====
# Escourtly indie build

## Goal

Build the smallest trustworthy replacement for the core Escourtly workflow for one developer or a tiny team.

## Scope

Record a DOM snapshot on each click with a browser extension, annotate the steps, and publish them as a clickable walkthrough at a public URL.

## Quick start

1. Install the documented dependencies.
2. Copy `.env.example` to `.env`.
3. Run the development command chosen during implementation.
4. Complete the acceptance checks in `BUILD_PLAN.md`.

## Honest limits

This build deliberately does not replace:
- capture fidelity on canvas, cross-origin iframes, shadow DOM and lazily loaded assets
- no-login share links and embeds that hold up under real traffic
- viewer funnel analytics and lead capture
- CRM sync to Salesforce, HubSpot and Pipedrive
- custom domains with certificates handled for you

If those capabilities are essential, use rrweb instead of pretending the gap is solved.

===== AGENTS.md =====
# Agent instructions

- Optimize for a working, understandable weekend build.
- Prefer the fewest moving parts that satisfy the brief.
- Do not invent cryptography, security guarantees, APIs, or compliance claims.
- Keep secrets out of source control and logs.
- Add focused tests for destructive, security-sensitive, and data-loss paths.
- Run the project checks before declaring the build complete.
- Record any deliberate shortcut in the README under "Tradeoffs".

===== BUILD_PLAN.md =====
# Build plan

## Original build brief

Build a personal replacement for Escourtly in an empty repository.
Use Next.js 15 with the App Router, TypeScript, Postgres via Drizzle, and rrweb; do not offer alternative stacks.
Ship two pieces: a Chrome MV3 extension that captures steps, and a web app that stores and replays them.
The core loop is: click through a product with the extension recording, capture each step as an rrweb DOM snapshot, annotate the steps, and publish a clickable walkthrough at a public URL.
In the extension, let the user start and stop a capture, and record one snapshot per click along with the click target.
Inline stylesheets, fonts and images into each snapshot so the replay renders without calling back to the origin site.
Mask input values and anything marked data-private by default, and show what is masked in the editor.
In the web app, show a step list with reorder, delete, and an editable title and description per step.
Generate a first draft of each step description from the snapshot with an LLM, and let the user overwrite it.
Render the replay as an interactive page: the snapshot is live HTML, with a hotspot on the recorded click target that advances to the next step.
Add a start overlay and a final call-to-action overlay with a configurable link.
Publish each walkthrough at a share URL that needs no login, plus an iframe embed snippet.
Count views, step completions and CTA clicks per walkthrough without any third-party analytics.
Store everything in your own Postgres and make JSON export straightforward.
Put secrets in .env, ship .env.example, and never commit credentials.
Include clear empty, loading, success, and recoverable error states.
Add input validation, safe slugs, and graceful handling of snapshots that fail to render.
Write focused tests for snapshot serialization and one end-to-end capture-to-replay path.
Create a README with setup, architecture, how to load the extension, data location, and backup steps.
Do not add billing, team accounts, or a hosted control plane.
Deliberately leave out custom domains and certificate management.
Deliberately leave out CRM integrations.
Deliberately leave out capture of canvas, video and cross-origin iframes, and document the limitation in the README.
Finish by running the tests and listing the exact commands used.

## Required capabilities

- Node and a Postgres database
- a Chrome MV3 extension build step
- an OpenAI/Anthropic API key for step descriptions
- somewhere to host the public demo pages

## Delivery order

1. Scaffold the smallest runnable application and document its commands.
2. Implement the primary data model and core workflow.
3. Add validation, safe failure states, and persistence.
4. Cover the critical path with automated tests.
5. Exercise a clean install from the README and fix every missing step.

## Done when

- A new user can go from clone to first successful workflow using only the README.
- The core workflow works without paid infrastructure unless the brief requires it.
- Tests cover the highest-risk behavior.
- Known limitations are explicit rather than hidden.

===== .env.example =====
# Copy to .env and document every variable when it is introduced.
# Never put real credentials in this file.

APP_ENV=development
# Add only values required by the selected implementation.

You are building a lean indie version of Escourtly.

Create the following project files first, then implement the application by following them. Keep the files updated as decisions change. Do not collapse this into a single README or prompt.

===== README.md =====
# Escourtly indie build

## Goal

Build the smallest trustworthy replacement for the core Escourtly workflow for one developer or a tiny team.

## Scope

Record a DOM snapshot on each click with a browser extension, annotate the steps, and publish them as a clickable walkthrough at a public URL.

## Quick start

1. Install the documented dependencies.
2. Copy `.env.example` to `.env`.
3. Run the development command chosen during implementation.
4. Complete the acceptance checks in `BUILD_PLAN.md`.

## Honest limits

This build deliberately does not replace:
- capture fidelity on canvas, cross-origin iframes, shadow DOM and lazily loaded assets
- no-login share links and embeds that hold up under real traffic
- viewer funnel analytics and lead capture
- CRM sync to Salesforce, HubSpot and Pipedrive
- custom domains with certificates handled for you

If those capabilities are essential, use rrweb instead of pretending the gap is solved.

===== AGENTS.md =====
# Agent instructions

- Optimize for a working, understandable weekend build.
- Prefer the fewest moving parts that satisfy the brief.
- Do not invent cryptography, security guarantees, APIs, or compliance claims.
- Keep secrets out of source control and logs.
- Add focused tests for destructive, security-sensitive, and data-loss paths.
- Run the project checks before declaring the build complete.
- Record any deliberate shortcut in the README under "Tradeoffs".

===== BUILD_PLAN.md =====
# Build plan

## Original build brief

Build a personal replacement for Escourtly in an empty repository.
Use Next.js 15 with the App Router, TypeScript, Postgres via Drizzle, and rrweb; do not offer alternative stacks.
Ship two pieces: a Chrome MV3 extension that captures steps, and a web app that stores and replays them.
The core loop is: click through a product with the extension recording, capture each step as an rrweb DOM snapshot, annotate the steps, and publish a clickable walkthrough at a public URL.
In the extension, let the user start and stop a capture, and record one snapshot per click along with the click target.
Inline stylesheets, fonts and images into each snapshot so the replay renders without calling back to the origin site.
Mask input values and anything marked data-private by default, and show what is masked in the editor.
In the web app, show a step list with reorder, delete, and an editable title and description per step.
Generate a first draft of each step description from the snapshot with an LLM, and let the user overwrite it.
Render the replay as an interactive page: the snapshot is live HTML, with a hotspot on the recorded click target that advances to the next step.
Add a start overlay and a final call-to-action overlay with a configurable link.
Publish each walkthrough at a share URL that needs no login, plus an iframe embed snippet.
Count views, step completions and CTA clicks per walkthrough without any third-party analytics.
Store everything in your own Postgres and make JSON export straightforward.
Put secrets in .env, ship .env.example, and never commit credentials.
Include clear empty, loading, success, and recoverable error states.
Add input validation, safe slugs, and graceful handling of snapshots that fail to render.
Write focused tests for snapshot serialization and one end-to-end capture-to-replay path.
Create a README with setup, architecture, how to load the extension, data location, and backup steps.
Do not add billing, team accounts, or a hosted control plane.
Deliberately leave out custom domains and certificate management.
Deliberately leave out CRM integrations.
Deliberately leave out capture of canvas, video and cross-origin iframes, and document the limitation in the README.
Finish by running the tests and listing the exact commands used.

## Required capabilities

- Node and a Postgres database
- a Chrome MV3 extension build step
- an OpenAI/Anthropic API key for step descriptions
- somewhere to host the public demo pages

## Delivery order

1. Scaffold the smallest runnable application and document its commands.
2. Implement the primary data model and core workflow.
3. Add validation, safe failure states, and persistence.
4. Cover the critical path with automated tests.
5. Exercise a clean install from the README and fix every missing step.

## Done when

- A new user can go from clone to first successful workflow using only the README.
- The core workflow works without paid infrastructure unless the brief requires it.
- Tests cover the highest-risk behavior.
- Known limitations are explicit rather than hidden.

===== .env.example =====
# Copy to .env and document every variable when it is introduced.
# Never put real credentials in this file.

APP_ENV=development
# Add only values required by the selected implementation.

You are building a production product version of Escourtly.

Create the following project files first, then implement the application by following them. Keep the files updated as decisions change. Do not collapse this into a single README or prompt.

===== PRODUCT.md =====
# Escourtly product brief

## Problem

The core loop is a weekend build on top of rrweb: snapshot the DOM on each click, inline the assets, and replay the snapshots as a clickable walkthrough. What takes the project from a demo to something you would put in front of a prospect is capture fidelity · real apps are full of canvas, cross-origin iframes, shadow DOM and lazily loaded assets, and every one of them is a separate fix. Past that sit the parts that are infrastructure rather than features: no-login share links and embeds that stay up, custom domains with certificates, funnel analytics, and CRM sync. Build it for your own product and one sitting gets you a long way. Build it to replace the subscription and you have signed up for the edge cases.

## Product outcome

Record a DOM snapshot on each click with a browser extension, annotate the steps, and publish them as a clickable walkthrough at a public URL.

## Target user

A serious builder who needs a maintainable product foundation rather than a one-off demo.

## Required capabilities

- Node and a Postgres database
- a Chrome MV3 extension build step
- an OpenAI/Anthropic API key for step descriptions
- somewhere to host the public demo pages

## Explicit non-goals for v1

- capture fidelity on canvas, cross-origin iframes, shadow DOM and lazily loaded assets
- no-login share links and embeds that hold up under real traffic
- viewer funnel analytics and lead capture
- CRM sync to Salesforce, HubSpot and Pipedrive
- custom domains with certificates handled for you

## Success criteria

- The primary workflow is measurable end to end.
- Setup is reproducible in a clean environment.
- Failure, recovery, and support paths are documented.
- Product claims match what the implementation actually guarantees.

===== ARCHITECTURE.md =====
# Architecture

## Starting brief

Build a personal replacement for Escourtly in an empty repository.
Use Next.js 15 with the App Router, TypeScript, Postgres via Drizzle, and rrweb; do not offer alternative stacks.
Ship two pieces: a Chrome MV3 extension that captures steps, and a web app that stores and replays them.
The core loop is: click through a product with the extension recording, capture each step as an rrweb DOM snapshot, annotate the steps, and publish a clickable walkthrough at a public URL.
In the extension, let the user start and stop a capture, and record one snapshot per click along with the click target.
Inline stylesheets, fonts and images into each snapshot so the replay renders without calling back to the origin site.
Mask input values and anything marked data-private by default, and show what is masked in the editor.
In the web app, show a step list with reorder, delete, and an editable title and description per step.
Generate a first draft of each step description from the snapshot with an LLM, and let the user overwrite it.
Render the replay as an interactive page: the snapshot is live HTML, with a hotspot on the recorded click target that advances to the next step.
Add a start overlay and a final call-to-action overlay with a configurable link.
Publish each walkthrough at a share URL that needs no login, plus an iframe embed snippet.
Count views, step completions and CTA clicks per walkthrough without any third-party analytics.
Store everything in your own Postgres and make JSON export straightforward.
Put secrets in .env, ship .env.example, and never commit credentials.
Include clear empty, loading, success, and recoverable error states.
Add input validation, safe slugs, and graceful handling of snapshots that fail to render.
Write focused tests for snapshot serialization and one end-to-end capture-to-replay path.
Create a README with setup, architecture, how to load the extension, data location, and backup steps.
Do not add billing, team accounts, or a hosted control plane.
Deliberately leave out custom domains and certificate management.
Deliberately leave out CRM integrations.
Deliberately leave out capture of canvas, video and cross-origin iframes, and document the limitation in the README.
Finish by running the tests and listing the exact commands used.

## Boundaries

Separate the product into replaceable modules for interface, application logic, persistence, external integrations, and operational concerns. Keep domain logic independent from delivery frameworks and vendors.

## Production baseline

- Configuration: validated at startup with safe local defaults where possible.
- Security: least privilege, input validation, secret redaction, rate limits on abuse-prone paths, and no invented security primitives.
- Data: explicit schema and migrations, transactional writes where integrity matters, backup and restore instructions.
- Integrations: adapters around third-party providers, idempotent webhook or job processing, bounded retries, and timeouts.
- Observability: structured logs with request or operation IDs, an error-tracking hook, and health/readiness checks where a server exists.
- Quality: unit tests for domain rules, integration tests at module boundaries, and one end-to-end critical-path test.

## Decision records

For each major dependency, document why it was chosen, its failure mode, and how it can be replaced. Do not introduce infrastructure until a requirement justifies it.

===== AGENTS.md =====
# Agent instructions

- Read `PRODUCT.md` and `ARCHITECTURE.md` before changing code.
- Implement milestone by milestone; keep each change reviewable and leave the application runnable.
- Treat authentication, payments, encryption, imports, webhooks, and destructive actions as high-risk boundaries when present.
- Never invent cryptography or silently weaken a requirement to make a test pass.
- Use provider interfaces for external services and deterministic fakes in tests.
- Add migrations and rollback or recovery notes for persistent data changes.
- Log useful operational context without credentials, tokens, passwords, or personal data.
- Update documentation and run all checks before completing a milestone.

===== MILESTONES.md =====
# Delivery milestones

## M0 — Decisions and scaffold

- Confirm the runtime, persistence model, threat boundaries, and deployment target.
- Create a reproducible local environment and continuous checks.

## M1 — Core workflow

- Implement the smallest end-to-end product path with validation and tests.
- Keep integrations behind interfaces.

## M2 — Trust layer

- Add secure failure behavior, recovery paths, audit-relevant events, and data safeguards.
- Test abuse cases and destructive operations.

## M3 — Operability

- Add structured logs, error reporting hooks, health signals, backup/restore documentation, and deployment configuration.

## M4 — Release gate

- Run a clean-install test, critical-path end-to-end test, dependency review, and documented rollback exercise.
- Compare the shipped behavior with `PRODUCT.md` and publish remaining limitations.

===== OPERATIONS.md =====
# Operations

## Before release

- Validate configuration and secrets at startup.
- Define backup, restore, and rollback procedures and test them.
- Document logs, error tracking, health signals, and alert ownership.
- Set dependency update and vulnerability review expectations.

## Incident checklist

1. Contain the issue without destroying evidence or user data.
2. Record the timeline and affected scope.
3. Rotate exposed secrets and revoke compromised sessions or credentials.
4. Restore from a verified source when needed.
5. Document the root cause, remediation, and regression test.

## Launch constraint

Do not market omitted Escourtly capabilities as implemented. The v1 non-goals in `PRODUCT.md` remain user-visible limitations until they are deliberately delivered.

# Escourtly indie build

## Goal

Build the smallest trustworthy replacement for the core Escourtly workflow for one developer or a tiny team.

## Scope

Record a DOM snapshot on each click with a browser extension, annotate the steps, and publish them as a clickable walkthrough at a public URL.

## Quick start

1. Install the documented dependencies.
2. Copy `.env.example` to `.env`.
3. Run the development command chosen during implementation.
4. Complete the acceptance checks in `BUILD_PLAN.md`.

## Honest limits

This build deliberately does not replace:
- capture fidelity on canvas, cross-origin iframes, shadow DOM and lazily loaded assets
- no-login share links and embeds that hold up under real traffic
- viewer funnel analytics and lead capture
- CRM sync to Salesforce, HubSpot and Pipedrive
- custom domains with certificates handled for you

If those capabilities are essential, use rrweb instead of pretending the gap is solved.

# Agent instructions

- Optimize for a working, understandable weekend build.
- Prefer the fewest moving parts that satisfy the brief.
- Do not invent cryptography, security guarantees, APIs, or compliance claims.
- Keep secrets out of source control and logs.
- Add focused tests for destructive, security-sensitive, and data-loss paths.
- Run the project checks before declaring the build complete.
- Record any deliberate shortcut in the README under "Tradeoffs".

# Build plan

## Original build brief

Build a personal replacement for Escourtly in an empty repository.
Use Next.js 15 with the App Router, TypeScript, Postgres via Drizzle, and rrweb; do not offer alternative stacks.
Ship two pieces: a Chrome MV3 extension that captures steps, and a web app that stores and replays them.
The core loop is: click through a product with the extension recording, capture each step as an rrweb DOM snapshot, annotate the steps, and publish a clickable walkthrough at a public URL.
In the extension, let the user start and stop a capture, and record one snapshot per click along with the click target.
Inline stylesheets, fonts and images into each snapshot so the replay renders without calling back to the origin site.
Mask input values and anything marked data-private by default, and show what is masked in the editor.
In the web app, show a step list with reorder, delete, and an editable title and description per step.
Generate a first draft of each step description from the snapshot with an LLM, and let the user overwrite it.
Render the replay as an interactive page: the snapshot is live HTML, with a hotspot on the recorded click target that advances to the next step.
Add a start overlay and a final call-to-action overlay with a configurable link.
Publish each walkthrough at a share URL that needs no login, plus an iframe embed snippet.
Count views, step completions and CTA clicks per walkthrough without any third-party analytics.
Store everything in your own Postgres and make JSON export straightforward.
Put secrets in .env, ship .env.example, and never commit credentials.
Include clear empty, loading, success, and recoverable error states.
Add input validation, safe slugs, and graceful handling of snapshots that fail to render.
Write focused tests for snapshot serialization and one end-to-end capture-to-replay path.
Create a README with setup, architecture, how to load the extension, data location, and backup steps.
Do not add billing, team accounts, or a hosted control plane.
Deliberately leave out custom domains and certificate management.
Deliberately leave out CRM integrations.
Deliberately leave out capture of canvas, video and cross-origin iframes, and document the limitation in the README.
Finish by running the tests and listing the exact commands used.

## Required capabilities

- Node and a Postgres database
- a Chrome MV3 extension build step
- an OpenAI/Anthropic API key for step descriptions
- somewhere to host the public demo pages

## Delivery order

1. Scaffold the smallest runnable application and document its commands.
2. Implement the primary data model and core workflow.
3. Add validation, safe failure states, and persistence.
4. Cover the critical path with automated tests.
5. Exercise a clean install from the README and fix every missing step.

## Done when

- A new user can go from clone to first successful workflow using only the README.
- The core workflow works without paid infrastructure unless the brief requires it.
- Tests cover the highest-risk behavior.
- Known limitations are explicit rather than hidden.

# Copy to .env and document every variable when it is introduced.
# Never put real credentials in this file.

APP_ENV=development
# Add only values required by the selected implementation.

# Escourtly product brief

## Problem

The core loop is a weekend build on top of rrweb: snapshot the DOM on each click, inline the assets, and replay the snapshots as a clickable walkthrough. What takes the project from a demo to something you would put in front of a prospect is capture fidelity · real apps are full of canvas, cross-origin iframes, shadow DOM and lazily loaded assets, and every one of them is a separate fix. Past that sit the parts that are infrastructure rather than features: no-login share links and embeds that stay up, custom domains with certificates, funnel analytics, and CRM sync. Build it for your own product and one sitting gets you a long way. Build it to replace the subscription and you have signed up for the edge cases.

## Product outcome

Record a DOM snapshot on each click with a browser extension, annotate the steps, and publish them as a clickable walkthrough at a public URL.

## Target user

A serious builder who needs a maintainable product foundation rather than a one-off demo.

## Required capabilities

- Node and a Postgres database
- a Chrome MV3 extension build step
- an OpenAI/Anthropic API key for step descriptions
- somewhere to host the public demo pages

## Explicit non-goals for v1

- capture fidelity on canvas, cross-origin iframes, shadow DOM and lazily loaded assets
- no-login share links and embeds that hold up under real traffic
- viewer funnel analytics and lead capture
- CRM sync to Salesforce, HubSpot and Pipedrive
- custom domains with certificates handled for you

## Success criteria

- The primary workflow is measurable end to end.
- Setup is reproducible in a clean environment.
- Failure, recovery, and support paths are documented.
- Product claims match what the implementation actually guarantees.

# Architecture

## Starting brief

Build a personal replacement for Escourtly in an empty repository.
Use Next.js 15 with the App Router, TypeScript, Postgres via Drizzle, and rrweb; do not offer alternative stacks.
Ship two pieces: a Chrome MV3 extension that captures steps, and a web app that stores and replays them.
The core loop is: click through a product with the extension recording, capture each step as an rrweb DOM snapshot, annotate the steps, and publish a clickable walkthrough at a public URL.
In the extension, let the user start and stop a capture, and record one snapshot per click along with the click target.
Inline stylesheets, fonts and images into each snapshot so the replay renders without calling back to the origin site.
Mask input values and anything marked data-private by default, and show what is masked in the editor.
In the web app, show a step list with reorder, delete, and an editable title and description per step.
Generate a first draft of each step description from the snapshot with an LLM, and let the user overwrite it.
Render the replay as an interactive page: the snapshot is live HTML, with a hotspot on the recorded click target that advances to the next step.
Add a start overlay and a final call-to-action overlay with a configurable link.
Publish each walkthrough at a share URL that needs no login, plus an iframe embed snippet.
Count views, step completions and CTA clicks per walkthrough without any third-party analytics.
Store everything in your own Postgres and make JSON export straightforward.
Put secrets in .env, ship .env.example, and never commit credentials.
Include clear empty, loading, success, and recoverable error states.
Add input validation, safe slugs, and graceful handling of snapshots that fail to render.
Write focused tests for snapshot serialization and one end-to-end capture-to-replay path.
Create a README with setup, architecture, how to load the extension, data location, and backup steps.
Do not add billing, team accounts, or a hosted control plane.
Deliberately leave out custom domains and certificate management.
Deliberately leave out CRM integrations.
Deliberately leave out capture of canvas, video and cross-origin iframes, and document the limitation in the README.
Finish by running the tests and listing the exact commands used.

## Boundaries

Separate the product into replaceable modules for interface, application logic, persistence, external integrations, and operational concerns. Keep domain logic independent from delivery frameworks and vendors.

## Production baseline

- Configuration: validated at startup with safe local defaults where possible.
- Security: least privilege, input validation, secret redaction, rate limits on abuse-prone paths, and no invented security primitives.
- Data: explicit schema and migrations, transactional writes where integrity matters, backup and restore instructions.
- Integrations: adapters around third-party providers, idempotent webhook or job processing, bounded retries, and timeouts.
- Observability: structured logs with request or operation IDs, an error-tracking hook, and health/readiness checks where a server exists.
- Quality: unit tests for domain rules, integration tests at module boundaries, and one end-to-end critical-path test.

## Decision records

For each major dependency, document why it was chosen, its failure mode, and how it can be replaced. Do not introduce infrastructure until a requirement justifies it.

# Agent instructions

- Read `PRODUCT.md` and `ARCHITECTURE.md` before changing code.
- Implement milestone by milestone; keep each change reviewable and leave the application runnable.
- Treat authentication, payments, encryption, imports, webhooks, and destructive actions as high-risk boundaries when present.
- Never invent cryptography or silently weaken a requirement to make a test pass.
- Use provider interfaces for external services and deterministic fakes in tests.
- Add migrations and rollback or recovery notes for persistent data changes.
- Log useful operational context without credentials, tokens, passwords, or personal data.
- Update documentation and run all checks before completing a milestone.

# Delivery milestones

## M0 — Decisions and scaffold

- Confirm the runtime, persistence model, threat boundaries, and deployment target.
- Create a reproducible local environment and continuous checks.

## M1 — Core workflow

- Implement the smallest end-to-end product path with validation and tests.
- Keep integrations behind interfaces.

## M2 — Trust layer

- Add secure failure behavior, recovery paths, audit-relevant events, and data safeguards.
- Test abuse cases and destructive operations.

## M3 — Operability

- Add structured logs, error reporting hooks, health signals, backup/restore documentation, and deployment configuration.

## M4 — Release gate

- Run a clean-install test, critical-path end-to-end test, dependency review, and documented rollback exercise.
- Compare the shipped behavior with `PRODUCT.md` and publish remaining limitations.

# Operations

## Before release

- Validate configuration and secrets at startup.
- Define backup, restore, and rollback procedures and test them.
- Document logs, error tracking, health signals, and alert ownership.
- Set dependency update and vulnerability review expectations.

## Incident checklist

1. Contain the issue without destroying evidence or user data.
2. Record the timeline and affected scope.
3. Rotate exposed secrets and revoke compromised sessions or credentials.
4. Restore from a verified source when needed.
5. Document the root cause, remediation, and regression test.

## Launch constraint

Do not market omitted Escourtly capabilities as implemented. The v1 non-goals in `PRODUCT.md` remain user-visible limitations until they are deliberately delivered.

$ choose a build depth, inspect the files, then open the complete pack in your agent