Skribbl

WORKING SLICE
Build an Electron canvas with React Flow nodes containing xterm.js terminals backed by node-pty. Start only user-selected commands in approved working directories, resize terminals correctly and save the workspace layout.

Build this scoped Skribbl-inspired workflow with a documented data model and visible failure states.

Architecture
- Electron and React with React Flow for the workspace canvas.
- xterm.js and node-pty in the Electron main process; versioned JSON workspace layout and a tightly validated preload IPC bridge.

Prerequisites and limits
Node, the Electron build toolchain and node-pty built for the selected Electron version. Start with one local shell; tmux is optional only on a supported host.
Outside this release: Agent coordination, code isolation and automatic conflict resolution are separate responsibilities.

Data model and correctness
canvas nodes, PTY sessions, working directories, selected agent commands, process states and layout snapshots
Invariant: The renderer has no direct shell or filesystem access; each IPC request is validated and closing a node handles its process explicitly.
Track PTY identity separately from canvas layout. Explicitly stop or detach a session on close; reconnect only to sessions whose ownership is verified.

Security and privacy
Enable context isolation and sandbox the renderer. The preload bridge exposes only typed terminal operations, never arbitrary filesystem or child-process primitives.

Recovery and export
Export layout and permitted command definitions without secrets or terminal scrollback by default. Reopening layout restores positions but requires explicit action before starting commands.

Implementation order
1. Phase 1 — Scope and fixtures. Implement this bounded workflow: Build an Electron canvas with React Flow nodes containing xterm.js terminals backed by node-pty. Start only user-selected commands in approved working directories, resize terminals correctly and save the workspace layout. Record prerequisites, select representative user-owned fixtures and document the unsupported features: Agent coordination, code isolation and automatic conflict resolution are separate responsibilities.
2. Phase 2 — Durable model. Model canvas nodes, PTY sessions, working directories, selected agent commands, process states and layout snapshots Add migrations or a versioned document format, explicit validation, stable IDs and a visible import-error report. Preserve this rule: The renderer has no direct shell or filesystem access; each IPC request is validated and closing a node handles its process explicitly.
3. Phase 3 — Complete the first useful path. Implement the workflow's input, review and output interface, with clear controls and explicit empty/error states. Track PTY identity separately from canvas layout. Explicitly stop or detach a session on close; reconnect only to sessions whose ownership is verified.
4. Phase 4 — Permissions and integration failure. Enable context isolation and sandbox the renderer. The preload bridge exposes only typed terminal operations, never arbitrary filesystem or child-process primitives. Request integration credentials and permissions only for the enabled feature; show a disconnected state instead of mock results.
5. Phase 5 — Portable handoff. Export layout and permitted command definitions without secrets or terminal scrollback by default. Reopening layout restores positions but requires explicit action before starting commands. Include setup, operating limits, fixture walkthrough and shutdown/restart instructions in the README.
6. Phase 6 — Acceptance scenarios. Resize a terminal without corrupting its columns, stop a selected process and preserve other nodes; reopening a layout does not silently restart commands. Repeat the workflow after restart and with a denied permission or unavailable dependency; show recoverable failure rather than a success placeholder.

Acceptance
Resize a terminal without corrupting its columns, stop a selected process and preserve other nodes; reopening a layout does not silently restart commands.
Use real source data or clearly labeled fixtures. Explain unsupported input and provider failures; do not fabricate analytics, delivery receipts, accuracy claims or security guarantees.

Optional agent guidance
Optional external skill: [vercel-composition-patterns](https://github.com/vercel-labs/agent-skills/blob/main/skills/composition-patterns/SKILL.md) — Design reusable React components with composition, context and explicit component variants. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Optional external skill: [sharp-edges](https://github.com/trailofbits/skills/blob/main/plugins/sharp-edges/skills/sharp-edges/SKILL.md) — Review security-sensitive APIs and configuration for dangerous defaults and easy-to-misuse interfaces. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Project rule — data model: canvas nodes, PTY sessions, working directories, selected agent commands, process states and layout snapshots
Project rule — preserve this invariant: The renderer has no direct shell or filesystem access; each IPC request is validated and closing a node handles its process explicitly.
Project rule — acceptance evidence: Resize a terminal without corrupting its columns, stop a selected process and preserve other nodes; reopening a layout does not silently restart commands.

# AGENTS.md — Build guide for Skribbl

## Project scope
Build an Electron canvas with React Flow nodes containing xterm.js terminals backed by node-pty. Start only user-selected commands in approved working directories, resize terminals correctly and save the workspace layout.

Catalogue verdict: kinda. 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.
Use the implementation prompt below to define the deliverable. Complete each phase's acceptance checks before extending the scope.

## Working agreement
- Inspect the repository and its existing instructions before choosing paths, dependencies or commands. Keep one coherent stack and explain changes to the proposed architecture.
- Plan a vertical slice that accepts a real input and produces the useful output described below. Persist only the state the prompt calls for; respect memory-only and upstream-managed workflows. Use fixtures only when they are clearly labelled.
- After scaffolding, document the actual install, development, check and build commands in README and keep them synchronized with the package or project manifest. Do not report commands as successful unless they ran.
- Work in small steps. At handoff, list implemented flows, checks actually performed, remaining blockers, and any credentials or provider setup the owner must supply.
- Do not publish, spend money, contact customers, delete source data or run irreversible migrations without the project owner's authorization.

## Prerequisites
- Node, the Electron build toolchain and node-pty built for the selected Electron version. Start with one local shell; tmux is optional only on a supported host.
- Implementation components: Electron and React with React Flow for the workspace canvas. xterm.js and node-pty in the Electron main process; versioned JSON workspace layout and a tightly validated preload IPC bridge.
- Scope boundary: Agent coordination, code isolation and automatic conflict resolution are separate responsibilities.

## Stack and architecture
- Electron and React with React Flow for the workspace canvas.
- xterm.js and node-pty in the Electron main process; versioned JSON workspace layout and a tightly validated preload IPC bridge.
- Domain model: canvas nodes, PTY sessions, working directories, selected agent commands, process states and layout snapshots

## Security and data integrity
- Enable context isolation and sandbox the renderer. The preload bridge exposes only typed terminal operations, never arbitrary filesystem or child-process primitives.
- Correctness boundary: The renderer has no direct shell or filesystem access; each IPC request is validated and closing a node handles its process explicitly.
- Track PTY identity separately from canvas layout. Explicitly stop or detach a session on close; reconnect only to sessions whose ownership is verified.
- Export layout and permitted command definitions without secrets or terminal scrollback by default. Reopening layout restores positions but requires explicit action before starting commands.

## Agent implementation rules
- Project rule — data model: canvas nodes, PTY sessions, working directories, selected agent commands, process states and layout snapshots
- Project rule — preserve this invariant: The renderer has no direct shell or filesystem access; each IPC request is validated and closing a node handles its process explicitly.
- Project rule — acceptance evidence: Resize a terminal without corrupting its columns, stop a selected process and preserve other nodes; reopening a layout does not silently restart commands.

## Optional agent skills and references
- Optional external skill: [vercel-composition-patterns](https://github.com/vercel-labs/agent-skills/blob/main/skills/composition-patterns/SKILL.md) — Design reusable React components with composition, context and explicit component variants. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
- Optional external skill: [sharp-edges](https://github.com/trailofbits/skills/blob/main/plugins/sharp-edges/skills/sharp-edges/SKILL.md) — Review security-sensitive APIs and configuration for dangerous defaults and easy-to-misuse interfaces. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.

Read the linked SKILL.md and its dependencies before adding a skill. Select only the skills matching this project's runtime and task; their documentation does not supply API access, credentials or approval to perform external actions. Pin the reviewed revision where the tool supports it. Follow the chosen agent's documented project-level installation mechanism.

## Distribution ideas
These are optional planning notes. Obtain the owner's approval before publishing or contacting anyone.
- Demonstrate the actual Skribbl-inspired workflow with owned or clearly labeled sample data: Build an Electron canvas with React Flow nodes containing xterm.js terminals backed by node-pty. Start only user-selected commands in approved working directories, resize terminals correctly and save the workspace layout.
- Publish a reproducible walkthrough with this observable result: Resize a terminal without corrupting its columns, stop a selected process and preserve other nodes; reopening a layout does not silently restart commands.
- Explain who can operate this scoped tool, its setup and ongoing costs, and these remaining product gaps: Agent coordination, code isolation and automatic conflict resolution are separate responsibilities. Avoid guaranteed savings, performance scores or implied endorsement.

## Engineering roadmap
1. Phase 1 — Scope and fixtures. Implement this bounded workflow: Build an Electron canvas with React Flow nodes containing xterm.js terminals backed by node-pty. Start only user-selected commands in approved working directories, resize terminals correctly and save the workspace layout. Record prerequisites, select representative user-owned fixtures and document the unsupported features: Agent coordination, code isolation and automatic conflict resolution are separate responsibilities.
2. Phase 2 — Durable model. Model canvas nodes, PTY sessions, working directories, selected agent commands, process states and layout snapshots Add migrations or a versioned document format, explicit validation, stable IDs and a visible import-error report. Preserve this rule: The renderer has no direct shell or filesystem access; each IPC request is validated and closing a node handles its process explicitly.
3. Phase 3 — Complete the first useful path. Implement the workflow's input, review and output interface, with clear controls and explicit empty/error states. Track PTY identity separately from canvas layout. Explicitly stop or detach a session on close; reconnect only to sessions whose ownership is verified.
4. Phase 4 — Permissions and integration failure. Enable context isolation and sandbox the renderer. The preload bridge exposes only typed terminal operations, never arbitrary filesystem or child-process primitives. Request integration credentials and permissions only for the enabled feature; show a disconnected state instead of mock results.
5. Phase 5 — Portable handoff. Export layout and permitted command definitions without secrets or terminal scrollback by default. Reopening layout restores positions but requires explicit action before starting commands. Include setup, operating limits, fixture walkthrough and shutdown/restart instructions in the README.
6. Phase 6 — Acceptance scenarios. Resize a terminal without corrupting its columns, stop a selected process and preserve other nodes; reopening a layout does not silently restart commands. Repeat the workflow after restart and with a denied permission or unavailable dependency; show recoverable failure rather than a success placeholder.

## Paid-product capabilities outside this build
- 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

## Implementation prompt
WORKING SLICE
Build an Electron canvas with React Flow nodes containing xterm.js terminals backed by node-pty. Start only user-selected commands in approved working directories, resize terminals correctly and save the workspace layout.

Build this scoped Skribbl-inspired workflow with a documented data model and visible failure states.

Architecture
- Electron and React with React Flow for the workspace canvas.
- xterm.js and node-pty in the Electron main process; versioned JSON workspace layout and a tightly validated preload IPC bridge.

Prerequisites and limits
Node, the Electron build toolchain and node-pty built for the selected Electron version. Start with one local shell; tmux is optional only on a supported host.
Outside this release: Agent coordination, code isolation and automatic conflict resolution are separate responsibilities.

Data model and correctness
canvas nodes, PTY sessions, working directories, selected agent commands, process states and layout snapshots
Invariant: The renderer has no direct shell or filesystem access; each IPC request is validated and closing a node handles its process explicitly.
Track PTY identity separately from canvas layout. Explicitly stop or detach a session on close; reconnect only to sessions whose ownership is verified.

Security and privacy
Enable context isolation and sandbox the renderer. The preload bridge exposes only typed terminal operations, never arbitrary filesystem or child-process primitives.

Recovery and export
Export layout and permitted command definitions without secrets or terminal scrollback by default. Reopening layout restores positions but requires explicit action before starting commands.

Implementation order
1. Phase 1 — Scope and fixtures. Implement this bounded workflow: Build an Electron canvas with React Flow nodes containing xterm.js terminals backed by node-pty. Start only user-selected commands in approved working directories, resize terminals correctly and save the workspace layout. Record prerequisites, select representative user-owned fixtures and document the unsupported features: Agent coordination, code isolation and automatic conflict resolution are separate responsibilities.
2. Phase 2 — Durable model. Model canvas nodes, PTY sessions, working directories, selected agent commands, process states and layout snapshots Add migrations or a versioned document format, explicit validation, stable IDs and a visible import-error report. Preserve this rule: The renderer has no direct shell or filesystem access; each IPC request is validated and closing a node handles its process explicitly.
3. Phase 3 — Complete the first useful path. Implement the workflow's input, review and output interface, with clear controls and explicit empty/error states. Track PTY identity separately from canvas layout. Explicitly stop or detach a session on close; reconnect only to sessions whose ownership is verified.
4. Phase 4 — Permissions and integration failure. Enable context isolation and sandbox the renderer. The preload bridge exposes only typed terminal operations, never arbitrary filesystem or child-process primitives. Request integration credentials and permissions only for the enabled feature; show a disconnected state instead of mock results.
5. Phase 5 — Portable handoff. Export layout and permitted command definitions without secrets or terminal scrollback by default. Reopening layout restores positions but requires explicit action before starting commands. Include setup, operating limits, fixture walkthrough and shutdown/restart instructions in the README.
6. Phase 6 — Acceptance scenarios. Resize a terminal without corrupting its columns, stop a selected process and preserve other nodes; reopening a layout does not silently restart commands. Repeat the workflow after restart and with a denied permission or unavailable dependency; show recoverable failure rather than a success placeholder.

Acceptance
Resize a terminal without corrupting its columns, stop a selected process and preserve other nodes; reopening a layout does not silently restart commands.
Use real source data or clearly labeled fixtures. Explain unsupported input and provider failures; do not fabricate analytics, delivery receipts, accuracy claims or security guarantees.

Optional agent guidance
Optional external skill: [vercel-composition-patterns](https://github.com/vercel-labs/agent-skills/blob/main/skills/composition-patterns/SKILL.md) — Design reusable React components with composition, context and explicit component variants. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Optional external skill: [sharp-edges](https://github.com/trailofbits/skills/blob/main/plugins/sharp-edges/skills/sharp-edges/SKILL.md) — Review security-sensitive APIs and configuration for dangerous defaults and easy-to-misuse interfaces. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Project rule — data model: canvas nodes, PTY sessions, working directories, selected agent commands, process states and layout snapshots
Project rule — preserve this invariant: The renderer has no direct shell or filesystem access; each IPC request is validated and closing a node handles its process explicitly.
Project rule — acceptance evidence: Resize a terminal without corrupting its columns, stop a selected process and preserve other nodes; reopening a layout does not silently restart commands.

## Completion evidence
Demonstrate the prompt's acceptance scenarios against the scoped workflow. Include setup from a clean checkout and failure recovery. Check persistence across restart and export/restore only for the state the prompt says to store; for memory-only tools, confirm that temporary content is discarded as specified. Record actual results and remaining limitations. A detailed plan alone does not establish a working replacement.