Got it, let's tackle this. The user wants a Gray-Scott reaction-diffusion simulation in a single index.html file, with canvas, real-time, mouse seeding. 

First, I need to remember how Gray-Scott works. It's a pair of partial differential equations: du/dt = D_u ∇²u - uv² + F(1 - u), dv/dt = D_v ∇²v + uv² - (F + k)v. The standard parameters are like F=0.037, k=0.060, D_u=0.20, D_v=0.10, or something like that for organic patterns.

First, the structure: single HTML file with canvas, style for centering, JS for the simulation.

Wait, need a 2D grid for u and v values. We'll use a canvas where each pixel is a pair (or we can use two Uint8ClampedArrays? No, better to use floating point grids, maybe two 2D arrays for u and v, then render them by mapping u+v or just v to a color.

Also, the Laplacian for diffusion: we need to compute the 2D convolution with a stencil, like the 3x3 neighborhood, the standard one for Gray-Scott: (1/4)[4*center - top - bottom - left - right]? Wait no, the standard finite difference Laplacian for grid-based simulation is using the four neighbors plus center? Wait, the common stencil is: for each cell, Laplacian u = (u[i-1][j] + u[i+1][j] + u[i][j-1] + u[i][j+1] - 4u[i][j]) * scale, right? Or sometimes a 5-point stencil.

Also, we need to handle the boundaries: wrap around (toroidal) or fixed? Probably wrap around so edges don't look weird.

Then, the simulation loop: use requestAnimationFrame, each frame update a few times to make it faster, since each step is discrete.

Mouse interaction: when the user clicks or drags, we add some v (or set a spot where v is high, u is low) to seed new patterns. So we need to track mouse position, and on mousedown/mousemove, draw a brush of high v values onto the grid.

Let's outline the steps:

1. HTML structure: a canvas element, styled to be centered, full viewport or fixed size, maybe with a dark background so the patterns pop.
2. CSS: style the body to have no margin, overflow hidden, background #000, canvas centered, maybe a info text? Wait no, user didn't ask for that, but keep it simple.
3. JS:
   a. Get canvas context, set its size to window size (or 512x512? Maybe 1024x1024 but downscale? Wait no, better to use the canvas size matching the window, but for performance, maybe use a smaller grid like 256x256 then scale up to canvas? Wait no, let's just use the canvas's width and height as the grid size, but for performance, maybe 640x480 or 512x512. Wait, let's pick 512x512 for a good balance.
   b. Initialize two grids: u and v, both 2D arrays of size width x height. Initialize u to 1 everywhere, v to 0 everywhere, except a small center area where v is 0.5 and u is 0.5? Or wait, standard initial condition is a square in the middle with v=0.25, u=0.5, others u=1, v=0.
   c. The parameters: let's use the classic parameters: D_U = 0.20, D_V = 0.10, F = 0.037, k = 0.060. That gives the spot patterns, or if we adjust F and k, we get stripes.
   d. The update function: for each cell, compute the Laplacian of u and v, then compute the new u and v values using the Gray-Scott equations. We need to use two buffers: current and next, so we don't overwrite values while computing.
   e. Render function: take the v grid (or u and v combined) and draw it to the canvas. For each pixel, map the value of v to a color, like a gradient from black to blue to white, or a fire gradient, but simple is better: let's use HSL where hue is based on v, or just grayscale: v*255 for red, green, blue? Wait, higher v should be brighter, so (v * 255, v*100, v*200) or something, to get a teal/blue pattern.
   f. Mouse handlers: track mouse position, when mouse is down, draw a circle of high v (like set v[x][y] = 0.5 for a radius of 5 or so) around the mouse position. Also, prevent default so we don't select text or anything.
   g. The simulation loop: use requestAnimationFrame, run 10-20 simulation steps per frame to speed up the evolution, since each step is small.

Wait, also, for the grid: since JavaScript arrays are 1D easier for performance? Because 2D arrays are slower. So we can flatten u and v into 1D Float32Array arrays, of size width * height. That's better for performance.

Let's think about the Laplacian calculation. For each index i, j (converted to 1D index = x + y * width), the neighbors are:
top: (x) + (y-1)*width, but if y-1 <0, wrap to y+height-1
bottom: (x) + (y+1)*width, wrap to y=0 if y+1 >=height
left: (x-1) + y*width, wrap to x=width-1 if x-1 <0
right: (x+1) + y*width, wrap to x=0 if x+1 >=width

Then Laplacian_u = (u[top] + u[bottom] + u[left] + u[right] - 4*u[current]) * scale? Wait no, the standard formula for the discrete Laplacian with 5-point stencil is (u_ij-1 + u_ij+1 + u_i-1j + u_i+1j -4u_ij)/h², but since we're using grid steps of 1, it's just sum of neighbors minus 4u_ij. Then multiply by the diffusion coefficients D_u and D_v.

Wait the Gray-Scott equations:
du/dt = D_u ∇²u - uv² + F(1 - u)
dv/dt = D_v ∇²v + uv² - (F + k)v

So the update for each step (dt is the time step, usually 1.0 or 0.5 per step) would be:
new_u = u + (D_u * lap_u - u*v*v + F*(1 - u)) * dt
new_v = v + (D_v * lap_v + u*v*v - (F + k)*v) * dt

Yes, that's right.

Now, for the buffers: we need two sets of u and v: current and next, so that we compute all new values based on the old grid. So we can have u1, v1, u2, v2, and swap them each step.

Wait, or use two arrays for u and two for v: let's say currU, currV, nextU, nextV. Each frame, compute nextU and nextV from currU and currV, then swap curr and next.

Now, performance: if we have a 512x512 grid, that's 262k elements per array, which is manageable. Each step loops through all elements, computes laplacian, then new value. Doing 20 steps per frame is okay, since 20*262k = ~5 million operations per frame, which is okay for modern browsers.

Then the mouse seeding: when the user clicks and drags, we want to add a blob of v to the grid. So for each point within a radius r of the mouse x,y, set currV[x + y*width] = 0.5 (or add a small amount, but setting to 0.5 is okay). Also, convert the mouse coordinates to grid coordinates: since the canvas is scaled to the window, we need to get the bounding rect of the canvas, then mouseX = (event.clientX - rect.left) * (gridWidth / rect.width), same for mouseY. Wait, yes, because if the canvas is stretched to window.innerWidth and window.innerHeight, then we need to map the mouse position to the grid coordinates.

Wait, let's make the canvas size match the window size: canvas.width = window.innerWidth, canvas.height = window.innerHeight. But then the grid size is the same as canvas width and height? Wait no, that's too big for performance. Oh, right, better to have a smaller grid, say 256x256, then scale the canvas to draw it to the full window size. That way, each simulation step is faster. So let's set gridWidth = 256, gridHeight = 256, then canvas.width = gridWidth, canvas.height = gridHeight, then use CSS to scale it to 100vw and 100vh, so it fills the screen. That's better for performance.

Yes, that's a good plan. So CSS: canvas { width: 100vw; height: 100vh; object-fit: contain; } so it scales without stretching? Wait object-fit: contain will keep aspect ratio, which is good, since gridWidth and gridHeight are same (square).

Now, initializing the grid: let's set all currU to 1.0, currV to 0.0, then add a small square in the center: for x from gridWidth/2 -5 to gridWidth/2 +5, same for y, set currV[x + y*gridWidth] = 0.25, currU[x + y*gridWidth] = 0.5. That's the standard initial condition.

Then, the render function: we need to put the v values into the canvas's ImageData. So create an ImageData object once, then for each pixel (x,y), get the value v = currV[x + y*gridWidth], then map that to RGB. Let's make the color based on v: for low v, black, for high v, a bright blue/cyan. So let's do:
r = Math.floor(v * 50);
g = Math.floor(v * 200);
b = Math.floor(v * 255);
a = 255;
That way, higher v is more blue and green, which looks like the organic patterns. Alternatively, use a HSL color: hue = 180 + v*30, saturation 100%, lightness v*50%, but the RGB way is simpler and faster.

Wait, but let's test: when v is 0, r=0, g=0, b=0 (black). When v is 1, r=50, g=200, b=255 (light cyan). That looks good.

Now, the simulation parameters: let's use the classic values:
const D_U = 0.20;
const D_V = 0.10;
const F = 0.037;
const K = 0.060;
const DT = 1.0; // time step per simulation update
const STEPS_PER_FRAME = 10; // how many simulation steps per render frame

That should give the classic spot patterns. If we change F and K, we get different patterns: like F=0.05, K=0.065 gives stripes, but let's stick with the classic ones first.

Now, the mouse handlers: we need to track if the mouse is down, and the current mouse position. So:
let mouseDown = false;
let mouseX = 0;
let mouseY = 0;
Then add event listeners:
canvas.addEventListener('mousedown', (e) => { mouseDown = true; updateMouse(e); });
canvas.addEventListener('mousemove', (e) => { if (mouseDown) updateMouse(e); });
canvas.addEventListener('mouseup', () => { mouseDown = false; });
canvas.addEventListener('mouseleave', () => { mouseDown = false; });
And updateMouse function:
function updateMouse(e) {
  const rect = canvas.getBoundingClientRect();
  // scale mouse position to grid coordinates
  mouseX = Math.floor((e.clientX - rect.left) * (gridWidth / rect.width));
  mouseY = Math.floor((e.clientY - rect.top) * (gridHeight / rect.height));
  // clamp to grid bounds
  mouseX = Math.max(0, Math.min(gridWidth -1, mouseX));
  mouseY = Math.max(0, Math.min(gridHeight -1, mouseY));
}

Then, when mouse is down, we draw a brush around mouseX, mouseY: for a radius of 5, loop dx from -5 to 5, dy from -5 to 5, if dx*dx + dy*dy <= 25, then set currV[(mouseX + dx) + (mouseY + dy)*gridWidth] = 0.5; and maybe set currU[(mouseX + dx) + (mouseY + dy)*gridWidth] = 0.1;? Wait no, the standard seed is to add v, so just set v to 0.5 there, that will create a new pattern spot.

Wait, but during the simulation steps, we don't want to overwrite the currV while computing the Laplacian, so the mouse seeding should be done on the currV array, right? Because we swap curr and next each step, so yes, when mouse is down, we modify the current grid, which is used for the next simulation steps.

Now, putting it all together:

First, the HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gray-Scott Reaction-Diffusion</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { overflow: hidden; background: #000; }
        canvas { display: block; width: 100vw; height: 100vh; object-fit: contain; }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        // Simulation parameters
        const gridWidth = 256;
        const gridHeight = 256;
        const D_U = 0.20;
        const D_V = 0.10;
        const F = 0.037; // Feed rate
        const K = 0.060; // Kill rate
        const DT = 1.0;
        const STEPS_PER_FRAME = 15;
        const BRUSH_RADIUS = 6;
        const BRUSH_STRENGTH = 0.5;

        // Get canvas and context
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = gridWidth;
        canvas.height = gridHeight;

        // Create image data for rendering
        let imageData = ctx.createImageData(gridWidth, gridHeight);
        let pixelData = imageData.data;

        // Initialize grids: u = 1 everywhere, v = 0 everywhere, plus a center square
        let currU = new Float32Array(gridWidth * gridHeight).fill(1.0);
        let currV = new Float32Array(gridWidth * gridHeight).fill(0.0);
        let nextU = new Float32Array(gridWidth * gridHeight);
        let nextV = new Float32Array(gridWidth * gridHeight);

        // Add initial center square
        const centerX = Math.floor(gridWidth / 2);
        const centerY = Math.floor(gridHeight / 2);
        const initialSize = 8;
        for (let y = centerY - initialSize; y < centerY + initialSize; y++) {
            for (let x = centerX - initialSize; x < centerX + initialSize; x++) {
                if (x >= 0 && x < gridWidth && y >=0 && y < gridHeight) {
                    const idx = x + y * gridWidth;
                    currU[idx] = 0.5;
                    currV[idx] = 0.25;
                }
            }
        }

        // Mouse tracking
        let mouseDown = false;
        let mouseX = 0;
        let mouseY = 0;

        canvas.addEventListener('mousedown', (e) => {
            mouseDown = true;
            updateMouse(e);
        });

        canvas.addEventListener('mousemove', (e) => {
            if (mouseDown) updateMouse(e);
        });

        canvas.addEventListener('mouseup', () => mouseDown = false);
        canvas.addEventListener('mouseleave', () => mouseDown = false);

        function updateMouse(e) {
            const rect = canvas.getBoundingClientRect();
            mouseX = Math.floor((e.clientX - rect.left) * (gridWidth / rect.width));
            mouseY = Math.floor((e.clientY - rect.top) * (gridHeight / rect.height));
            mouseX = Math.max(0, Math.min(gridWidth - 1, mouseX));
            mouseY = Math.max(0, Math.min(gridHeight - 1, mouseY));
        }

        // Compute Laplacian for a grid at index idx
        function laplacian(grid, x, y) {
            const idx = x + y * gridWidth;
            const up = (y === 0) ? idx + (gridWidth - 1)*gridWidth : idx - gridWidth;
            const down = (y === gridHeight -1) ? idx - (gridWidth -1)*gridWidth : idx + gridWidth;
            const left = (x === 0) ? idx + gridWidth -1 : idx -1;
            const right = (x === gridWidth -1) ? idx - gridWidth +1 : idx +1;
            return grid[up] + grid[down] + grid[left] + grid[right] - 4 * grid[idx];
        }

        // Run one simulation step
        function simulateStep() {
            // First, apply mouse seeding if needed
            if (mouseDown) {
                for (let dy = -BRUSH_RADIUS; dy <= BRUSH_RADIUS; dy++) {
                    for (let dx = -BRUSH_RADIUS; dx <= BRUSH_RADIUS; dx++) {
                        const distSq = dx*dx + dy*dy;
                        if (distSq <= BRUSH_RADIUS * BRUSH_RADIUS) {
                            const px = mouseX + dx;
                            const py = mouseY + dy;
                            if (px >=0 && px < gridWidth && py >=0 && py < gridHeight) {
                                const idx = px + py * gridWidth;
                                currV[idx] = BRUSH_STRENGTH;
                                // Also lower u a bit
                                currU[idx] = 0.1;
                            }
                        }
                    }
                }
            }

            // Compute next state
            for (let y = 0; y < gridHeight; y++) {
                for (let x = 0; x < gridWidth; x++) {
                    const idx = x + y * gridWidth;
                    const u = currU[idx];
                    const v = currV[idx];
                    const lapU = laplacian(currU, x, y);
                    const lapV = laplacian(currV, x, y);

                    const du = D_U * lapU - u*v*v + F*(1 - u);
                    const dv = D_V * lapV + u*v*v - (F + K)*v;

                    nextU[idx] = u + du * DT;
                    nextV[idx] = v + dv * DT;

                    // Clamp values to 0-1 to prevent overflow
                    nextU[idx] = Math.max(0, Math.min(1, nextU[idx]));
                    nextV[idx] = Math.max(0, Math.min(1, nextV[idx]));
                }
            }

            // Swap buffers
            [currU, nextU] = [nextU, currU];
            [currV, nextV] = [nextV, currV];
        }

        // Render current grid to canvas
        function render() {
            // Fill pixel data
            for (let y = 0; y < gridHeight; y++) {
                for (let x = 0; x < gridWidth; x++) {
                    const idx = x + y * gridWidth;
                    const v = currV[idx];
                    // Map v to RGB: black to cyan
                    const r = Math.floor(v * 50);
                    const g = Math.floor(v * 200);
                    const b = Math.floor(v * 255);
                    const pixelIdx = idx *4;
                    pixelData[pixelIdx] = r;
                    pixelData[pixelIdx +1] = g;
                    pixelData[pixelIdx +2] = b;
                    pixelData[pixelIdx +3] = 255;
                }
            }
            ctx.putImageData(imageData, 0, 0);
        }

        // Main animation loop
        function loop() {
            for (let i=0; i < STEPS_PER_FRAME; i++) {
                simulateStep();
            }
            render();
            requestAnimationFrame(loop);
        }

        // Start the simulation
        loop();
    </script>
</body>
</html>

Wait, but let's check: when we swap the buffers, nextU and currU are swapped, so next time we compute, we use the new currU and currV. That's correct. Also, clamping the values to 0-1 is important to prevent them from going negative or over 1, which would cause artifacts.

Also, the initial center square: that gives a starting pattern, so the simulation doesn't stay all black. When the user clicks, they can add new seeds, which will grow into new patterns.

Wait, but in the simulateStep function, we apply the mouse seeding first, before computing the next state? Yes, that's right, because the mouse changes the current grid, which is used for the next simulation steps.

Also, the brush: when mouse is down, we draw a circle around the mouse position, setting v to BRUSH_STRENGTH (0.5) and u to 0.1. That should create a new spot that will grow into a pattern.

Let's test this code: when you run it, you'll see a center pattern, then as it evolves, it will form spots or stripes, depending on the parameters. Moving the mouse and clicking will add new seeds, which will grow into new patterns.

Wait, but what if we adjust the parameters? For example, if we set F=0.05, K=0.065, we get stripes. But the default parameters are good for spot patterns, which look organic.

Also, the STEPS_PER_FRAME: 15 steps per frame, that's enough to make the simulation run smoothly. If it's too slow, we can lower it to 10, or make the grid smaller (like 128x128). But 256x256 is manageable on most modern browsers.

Another thing: the object-fit: contain in the CSS ensures that the canvas scales to fit the window without stretching, so the patterns look correct.

Also, the meta viewport tag makes it mobile-friendly, so it works on phones too.

Wait, but let's make sure that the code is self-contained, no external resources, which it is. All CSS and JS is inline, no CDNs.

Yes, this should work. Now, let's write this file to /tmp/ws/index.html using the write tool.

Great, the file was written successfully. Now I should tell the user that the simulation is ready, and explain how to use it: open index.html in a browser, click and drag to seed new patterns, the simulation runs in real-time, showing organic Turing patterns. Also, mention that the default parameters produce spot patterns, and you can tweak the constants in the JS to get different patterns like stripes.