Vibecode Skribbl

You are building a lean indie version of Skribbl.

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 =====
# Skribbl indie build

## Goal

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

## Scope

Spawn real shells as draggable nodes on a pan/zoom canvas, run a coding agent in each one, and watch several of them work side by side.

## 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:
- hook-driven agent status, so a blocked agent looks the same as an idle one
- session survival across restarts and crashes
- an accurate token meter, cache reads price nothing like input tokens
- a signed and notarized Mac build, so Gatekeeper blocks what you ship to anyone else

If those capabilities are essential, use claude-squad 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 me a canvas for running several coding agents at once, like Skribbl. Requirements:

- Electron plus React, with React Flow for the pan/zoom canvas and xterm.js plus
  node-pty for the terminals. No web version, this is a desktop app.
- Each node is a real shell in its own process, spawned with node-pty in a working
  directory I pick per node. Double click empty canvas to add one, and let me type in
  it exactly like a normal terminal.
- Node position, size, title and cwd persist to a JSON file in the Electron userData
  folder, restored on launch. The shells themselves do not survive, say so in the UI
  rather than pretending they do.
- Spawn each shell inside `tmux new-session -A -s <nodeId>` so a crashed window can
  reattach to the running agent instead of killing it. Budget real time for this, the
  reattach and scrollback restore is the fiddly part of the whole build.
- Drag from one node to another to draw a link, and store the links with a direction.
  Right click a link to delete it. Links are just recorded relationships for now, no
  message passing between agents.
- A top bar counting tokens per node, parsed from each agent CLI's own usage output.
  Keep input, output, cache write and cache read as four separate counters, never sum
  them into one number, a cache read costs about a tenth of an input token.
- Out of scope: multiplayer, cloud sync, code signing, and any status indicator you
  would have to infer by scraping terminal output. Guessing wrong there is worse than
  showing nothing.
- README with the node-pty rebuild step for your Electron version, which is the one
  thing that will break on a fresh machine.

## Required capabilities

- Node 20 and native build tools for node-pty
- A coding agent CLI already installed and authenticated
- tmux, if you want sessions to survive a restart

## 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 Skribbl.

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 =====
# Skribbl indie build

## Goal

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

## Scope

Spawn real shells as draggable nodes on a pan/zoom canvas, run a coding agent in each one, and watch several of them work side by side.

## 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:
- hook-driven agent status, so a blocked agent looks the same as an idle one
- session survival across restarts and crashes
- an accurate token meter, cache reads price nothing like input tokens
- a signed and notarized Mac build, so Gatekeeper blocks what you ship to anyone else

If those capabilities are essential, use claude-squad 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 me a canvas for running several coding agents at once, like Skribbl. Requirements:

- Electron plus React, with React Flow for the pan/zoom canvas and xterm.js plus
  node-pty for the terminals. No web version, this is a desktop app.
- Each node is a real shell in its own process, spawned with node-pty in a working
  directory I pick per node. Double click empty canvas to add one, and let me type in
  it exactly like a normal terminal.
- Node position, size, title and cwd persist to a JSON file in the Electron userData
  folder, restored on launch. The shells themselves do not survive, say so in the UI
  rather than pretending they do.
- Spawn each shell inside `tmux new-session -A -s <nodeId>` so a crashed window can
  reattach to the running agent instead of killing it. Budget real time for this, the
  reattach and scrollback restore is the fiddly part of the whole build.
- Drag from one node to another to draw a link, and store the links with a direction.
  Right click a link to delete it. Links are just recorded relationships for now, no
  message passing between agents.
- A top bar counting tokens per node, parsed from each agent CLI's own usage output.
  Keep input, output, cache write and cache read as four separate counters, never sum
  them into one number, a cache read costs about a tenth of an input token.
- Out of scope: multiplayer, cloud sync, code signing, and any status indicator you
  would have to infer by scraping terminal output. Guessing wrong there is worse than
  showing nothing.
- README with the node-pty rebuild step for your Electron version, which is the one
  thing that will break on a fresh machine.

## Required capabilities

- Node 20 and native build tools for node-pty
- A coding agent CLI already installed and authenticated
- tmux, if you want sessions to survive a restart

## 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 Skribbl.

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 =====
# Skribbl product brief

## Problem

The canvas is the easy half. React Flow plus xterm.js plus node-pty gets you panning, zooming and half a dozen live agent terminals in a weekend, and it is a genuinely nice way to watch a fleet work. The gaps are all in the boring layer underneath: knowing when an agent is actually blocked on you rather than just quiet, keeping sessions alive across a restart or a crash, and counting tokens accurately enough that the number can be trusted. Each of those is days of work on its own, and the weekend build reads as finished until the first agent silently dies behind a tab you were not looking at.

## Product outcome

Spawn real shells as draggable nodes on a pan/zoom canvas, run a coding agent in each one, and watch several of them work side by side.

## Target user

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

## Required capabilities

- Node 20 and native build tools for node-pty
- A coding agent CLI already installed and authenticated
- tmux, if you want sessions to survive a restart

## Explicit non-goals for v1

- hook-driven agent status, so a blocked agent looks the same as an idle one
- session survival across restarts and crashes
- an accurate token meter, cache reads price nothing like input tokens
- a signed and notarized Mac build, so Gatekeeper blocks what you ship to anyone else

## 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 me a canvas for running several coding agents at once, like Skribbl. Requirements:

- Electron plus React, with React Flow for the pan/zoom canvas and xterm.js plus
  node-pty for the terminals. No web version, this is a desktop app.
- Each node is a real shell in its own process, spawned with node-pty in a working
  directory I pick per node. Double click empty canvas to add one, and let me type in
  it exactly like a normal terminal.
- Node position, size, title and cwd persist to a JSON file in the Electron userData
  folder, restored on launch. The shells themselves do not survive, say so in the UI
  rather than pretending they do.
- Spawn each shell inside `tmux new-session -A -s <nodeId>` so a crashed window can
  reattach to the running agent instead of killing it. Budget real time for this, the
  reattach and scrollback restore is the fiddly part of the whole build.
- Drag from one node to another to draw a link, and store the links with a direction.
  Right click a link to delete it. Links are just recorded relationships for now, no
  message passing between agents.
- A top bar counting tokens per node, parsed from each agent CLI's own usage output.
  Keep input, output, cache write and cache read as four separate counters, never sum
  them into one number, a cache read costs about a tenth of an input token.
- Out of scope: multiplayer, cloud sync, code signing, and any status indicator you
  would have to infer by scraping terminal output. Guessing wrong there is worse than
  showing nothing.
- README with the node-pty rebuild step for your Electron version, which is the one
  thing that will break on a fresh machine.

## 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 Skribbl capabilities as implemented. The v1 non-goals in `PRODUCT.md` remain user-visible limitations until they are deliberately delivered.

# Skribbl indie build

## Goal

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

## Scope

Spawn real shells as draggable nodes on a pan/zoom canvas, run a coding agent in each one, and watch several of them work side by side.

## 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:
- hook-driven agent status, so a blocked agent looks the same as an idle one
- session survival across restarts and crashes
- an accurate token meter, cache reads price nothing like input tokens
- a signed and notarized Mac build, so Gatekeeper blocks what you ship to anyone else

If those capabilities are essential, use claude-squad 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 me a canvas for running several coding agents at once, like Skribbl. Requirements:

- Electron plus React, with React Flow for the pan/zoom canvas and xterm.js plus
  node-pty for the terminals. No web version, this is a desktop app.
- Each node is a real shell in its own process, spawned with node-pty in a working
  directory I pick per node. Double click empty canvas to add one, and let me type in
  it exactly like a normal terminal.
- Node position, size, title and cwd persist to a JSON file in the Electron userData
  folder, restored on launch. The shells themselves do not survive, say so in the UI
  rather than pretending they do.
- Spawn each shell inside `tmux new-session -A -s <nodeId>` so a crashed window can
  reattach to the running agent instead of killing it. Budget real time for this, the
  reattach and scrollback restore is the fiddly part of the whole build.
- Drag from one node to another to draw a link, and store the links with a direction.
  Right click a link to delete it. Links are just recorded relationships for now, no
  message passing between agents.
- A top bar counting tokens per node, parsed from each agent CLI's own usage output.
  Keep input, output, cache write and cache read as four separate counters, never sum
  them into one number, a cache read costs about a tenth of an input token.
- Out of scope: multiplayer, cloud sync, code signing, and any status indicator you
  would have to infer by scraping terminal output. Guessing wrong there is worse than
  showing nothing.
- README with the node-pty rebuild step for your Electron version, which is the one
  thing that will break on a fresh machine.

## Required capabilities

- Node 20 and native build tools for node-pty
- A coding agent CLI already installed and authenticated
- tmux, if you want sessions to survive a restart

## 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.

# Skribbl product brief

## Problem

The canvas is the easy half. React Flow plus xterm.js plus node-pty gets you panning, zooming and half a dozen live agent terminals in a weekend, and it is a genuinely nice way to watch a fleet work. The gaps are all in the boring layer underneath: knowing when an agent is actually blocked on you rather than just quiet, keeping sessions alive across a restart or a crash, and counting tokens accurately enough that the number can be trusted. Each of those is days of work on its own, and the weekend build reads as finished until the first agent silently dies behind a tab you were not looking at.

## Product outcome

Spawn real shells as draggable nodes on a pan/zoom canvas, run a coding agent in each one, and watch several of them work side by side.

## Target user

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

## Required capabilities

- Node 20 and native build tools for node-pty
- A coding agent CLI already installed and authenticated
- tmux, if you want sessions to survive a restart

## Explicit non-goals for v1

- hook-driven agent status, so a blocked agent looks the same as an idle one
- session survival across restarts and crashes
- an accurate token meter, cache reads price nothing like input tokens
- a signed and notarized Mac build, so Gatekeeper blocks what you ship to anyone else

## 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 me a canvas for running several coding agents at once, like Skribbl. Requirements:

- Electron plus React, with React Flow for the pan/zoom canvas and xterm.js plus
  node-pty for the terminals. No web version, this is a desktop app.
- Each node is a real shell in its own process, spawned with node-pty in a working
  directory I pick per node. Double click empty canvas to add one, and let me type in
  it exactly like a normal terminal.
- Node position, size, title and cwd persist to a JSON file in the Electron userData
  folder, restored on launch. The shells themselves do not survive, say so in the UI
  rather than pretending they do.
- Spawn each shell inside `tmux new-session -A -s <nodeId>` so a crashed window can
  reattach to the running agent instead of killing it. Budget real time for this, the
  reattach and scrollback restore is the fiddly part of the whole build.
- Drag from one node to another to draw a link, and store the links with a direction.
  Right click a link to delete it. Links are just recorded relationships for now, no
  message passing between agents.
- A top bar counting tokens per node, parsed from each agent CLI's own usage output.
  Keep input, output, cache write and cache read as four separate counters, never sum
  them into one number, a cache read costs about a tenth of an input token.
- Out of scope: multiplayer, cloud sync, code signing, and any status indicator you
  would have to infer by scraping terminal output. Guessing wrong there is worse than
  showing nothing.
- README with the node-pty rebuild step for your Electron version, which is the one
  thing that will break on a fresh machine.

## 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 Skribbl 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