Boids flocking · hy4

We need build index.html. Need use tools, browser inspect. Need plan robust implementation and verification likely browser tool can interact and screenshot/DOM. Need likely expose diagnostics perhaps via JS globals for sampling, since browser tool inspect maybe DOM only perhaps can use browser action? Let's understand tooling. Need create full app. We can use internal state accessible via window perhaps to verify via maybe browser inspect includes evaluate? Tool schema says inspect DOM/console, interact screenshots/motion. Need see what inspect output has. Could also use JS script to set status display or window globals and use browser screenshot to visually see. We can maybe inject diagnostics into DOM via URL? Browser "inspect" perhaps gives DOM and console. We need run app inspect initial output and console. Could use console.log diagnostics at moments and inspect console. But need sample flock at several moments. Could use browser tool "motion" maybe frames. Need design app with simulation robust.

Let's implement sophisticated but straightforward.

Requirements:
- Full-screen canvas, 150 oriented triangles.
- Separation, alignment, cohesion neighborhood perhaps O(n²)=22500 per frame at 60fps okay.
- bounded speed and steering smooth.
- wrapping edges. Critical boid calculations must use toroidal shortest delta to avoid discontinuity near edges. We'll implement shortestWrapDelta.
- cursor influence radius visible or documented. Draw a faint dashed circle around pointer when active, with label maybe text "REPEL FIELD · r=..." in HUD. Pointer radius e.g. 130. Need pointer events over canvas; pointermove/pointerenter/pointerleave. Cursor influence means boids steer away when pointer active and within radius. Use wrapped delta so pointer influence wraps? Pointer doesn't wrap; maybe use direct difference or torus. Could calculate toroidal vector for pointer too, but visual circle at edges doesn't account wrap; simpler direct delta. Could also draw wrap circles but not necessary. "resume flocking after pointer moves away" naturally force conditionally zero. Need pointerleave deactivate, perhaps pointer stays at last location? Should clear force on pointerleave. Also if pointer over controls we might deactivate? Canvas is whole viewport behind; pointer events perhaps canvas covers entire viewport and controls above; pointerenter on canvas doesn't fire if moving into controls? pointerleave if over control because pointer events target child? Need maybe document pointermove track and check if event target in controls; pointer event global plus pointerleave window. We'll use pointermove on window and set pointer coordinates based on clientX/Y; if target is button/control, still influence under control maybe that's okay. But requirement "within radius steer away from pointer"; could keep active all mouse positions. Add pointerleave on document or window blur to null. Also support touch via pointer events, pointerdown.
- cursor influence radius visible: when pointer active, draw subtle dashed circle and small center dot; perhaps radius. Mention in HUD "Cursor: repulsion radius 140px". Could use CSS crosshair perhaps.
- Pause/Resume and Reset. Pause freezes simulation state exactly: animation loop still could render? Need no update. We can perhaps animation frame request continues but skip physics and no need redraw; keep state. Pause button toggles; display status. Ensure pointer movement while paused doesn't mutate boid state but pointer visual might be updated? "Pause freezes simulation state" pointer position isn't simulation state perhaps. To be safe, if paused render frame with updated pointer field? that technically changes visual but boids freeze. Could avoid redraw while paused, but then button label changes via DOM. Reset while paused? "Reset restores fresh population of 150 boids." likely should reset and remain paused or resume? Keep pause state; reset new population and render once. Need likely fresh random positions and velocities. Maybe ensure deterministic? Fresh population each time. Use new Date/random.
- Canvas fit viewport and population and controls usable after resize. Use devicePixelRatio scaling with canvas style full viewport; on resize update width/height and perhaps keep boids normalized positions rather than recreate. Could map positions by ratios or just wrap clamp. Need preserve 150. Also resize might leave controls usable with responsive CSS. Need canvas coordinate system in CSS pixels; set canvas.width=Math.round(innerWidth*dpr), height etc and ctx.setTransform(dpr,0,0,dpr,0,0). Simulation uses W/H CSS pixels. On resize, scale boid positions relative old dimensions to new dimensions so population remains distributed. If old W=0 initial. Need perhaps keep velocities same; speed okay. Also update field radius maybe adaptive? radius fixed 140 but on very small viewport could be too much; perhaps min(150, Math.min(W,H)*0.28) with min 65. Document dynamic radius in HUD. But requirement visible or documented. We can display radius number dynamically and draw circle. Use default 130 perhaps. For small width could still. Need coordinate pointer field.
- Triangles point direction of travel: use velocity angle atan2(vy,vx), triangle at x + cos*size etc. Need accurate: nose forward, rear corners backward/perpendicular. Use ctx path:
moveTo(x+cos*size, y+sin*size)
lineTo(x-cos*size*0.7 + (-sin)*size*0.48, y - sin*size*0.7 + cos*size*0.48)
lineTo(x-cos*size*0.7 - (-sin)*size*0.48, y - sin*size*0.7 - cos*size*0.48)
close.
Could draw with color based on heading or speed perhaps. Need oriented triangles. Maybe use hue based on heading. Each boid could have base hue variation. To keep visual interesting. Need not use network.

Physics:
Constants:
COUNT=150
MAX_SPEED maybe 2.6 px/frame but should be frame-rate independent. Better dt in seconds. Use speeds in px/s: MAX_SPEED=155, MIN_SPEED=55, MAX_FORCE=160 px/s²? Need calculations. Typical boid algorithm has per-frame acceleration; use dt normalized to 1/60 perhaps and velocity pixels/frame. Simpler robust with fixed step simulation in frame units; use dt capped. Update v += a*dt where a in px/s² then v limit. Need design force computation as desired velocity minus current velocity, with max steering per second. Could make acceleration vector from normalized desired direction * MAX_SPEED - velocity, limited to MAX_FORCE (in velocity units per second? if subtraction yields px/s and then limiting as acceleration weird units). Typical:
alignment: average neighbor velocities normalized to max speed; steer = desired - v; limit to maxForce; separation similar; weighted sum; acceleration = sum; v += acceleration * dt; speed limit. maxForce in px/s² perhaps ~220. Since desired-v ~hundreds px/s, limit ~160 px/s²; over 1 sec can turn. Actually if acceleration 160 px/s² and dt=.016, v change 2.7 px/s per frame, turn around in ~2 sec. Could set 320 for responsiveness. Let's reason.
Neighbor radius maybe 70, separation radius 24, cursor radius 140. Forces:
alignment desired = normalized(avg velocity)*MAX_SPEED; steer = desired - v, cap MAX_FORCE (say 260 px/s²)
cohesion desired = normalized(avg relative position)*MAX_SPEED; steer similarly cap
separation desired = normalized(sum of away vectors weighted inverse dist)*MAX_SPEED; steer similarly cap; if no neighbors zero.
Then acceleration = align*1.0 + cohesion*0.75 + separation*1.55. Plus cursor force. Could cap sum to maybe 700 px/s². Update v += a*dt, then clamp speed between MIN_SPEED and MAX_SPEED. Smooth. Need if force cap is in px/s (desired-current) but treated as acceleration px/s²; okay arbitrary simulation units.

Could instead use dt scaling relative to frame: all forces in px/frame² and dt=clamped delta/16.67. Then typical numbers easier:
MAX_SPEED=2.8 px/frame, MIN_SPEED=1.2, MAX_FORCE=0.06 px/frame².
For each neighbor:
desired = normalized average velocity * MAX_SPEED; steer = desired - v; clamp magnitude MAX_FORCE (0.05)
weights 1 etc.
velocity += acceleration * dt; clamp speed; position += velocity*dt.
This yields frame-rate independence via dt in 60fps frame units (dt = elapsed/16.667). Cursor force maybe stronger 0.18. Need avoid big dt. Use dt capped 2 or 2.5. At 30fps dt=2, okay. This is cleaner. We'll do that.
Constants:
N=150
VIEW_RADIUS=76 (perception)
SEPARATION_RADIUS=25
MAX_SPEED=3.0
MIN_SPEED=1.0
MAX_FORCE=0.055
WEIGHTS: sep 1.65, align 1.0, cohesion 0.85
FIELD_WEIGHT maybe 2.8 with MAX_FORCE maybe 0.24 direct acceleration.
Need compute neighbor sums using shortest toroidal delta:
function wrapDelta(dx, dy) {
  if (dx > W/2) dx -= W; else if (dx < -W/2) dx += W; similarly.
}
For boid i, loop j. Let dx = b.x - a.x then wrapped to shortest (neighbor relative to a); dy. d2.
- alignment sum b.vx,vy
- cohesion sum dx,dy (relative offsets)
- separation: if dist < sepRadius, accumulate -dx/dist²? Want away from neighbor = -delta. weight maybe /dist; if use (-dx / d2, -dy/d2) normalized later. That can cause dominant close. Use repulse = (-dx / dist, -dy / dist) * (1 - dist/sepRadius), sum.
After loop, each behavior's desired steer:
function steerFromDesiredVector(dx,dy,b) - if magnitude > 0:
 desired = normalized*MAX_SPEED
 steer = desired - b.velocity
 cap to MAX_FORCE
 return.
Separation: normalized(sep sum)*MAX_SPEED; if none zero.
Cohesion: normalized(cohesion sum)*MAX_SPEED (sum relative position; average not needed for direction).
Alignment: normalized(avg velocity)*MAX_SPEED.
Apply weights. Could cap total accel to maxForce*? Maybe no need but smooth. Use max accel 0.16 px/frame²? Weighted sum max (0.055*(3.5))=0.1925 plus cursor 0.3. We can cap total to 0.24 perhaps. To make cursor decisive cap separately. Need "boids within radius steer away from pointer". Force based on pointer:
dx = b.x - pointer.x; dy = b.y - pointer.y; distance.
if d < R:
 strength = (1 - d/R)^2 maybe
 desired direction = away normalized * MAX_SPEED; steer = desired*? - v. Use force = normalized away * (0.20*strength + maybe 0.04), perhaps also subtract tangential? Need ensure pointer avoidance. Set desired speed = MAX_SPEED * 1.15 but cap total. Best to implement desired velocity away = normalized*MAX_SPEED, steer=(desired - current v) cap 0.14, multiply weight 2.5? Actually if b approaches pointer, away vector opposite current v; desired-current ~6 px/frame, cap 0.14, strong. Over 20 frames changes v by 2.8, enough. Then add force with weight 2.0 => 0.28. Could cap total acceleration 0.32 and set cursor first. Need flocking forces maybe sum up 0.19; cursor 0.28; total 0.47, capped 0.32. Fine. But at boundary of radius strength fade maybe 0. Need:
if d < R, strength = (1-d/R); desired = normalized away * MAX_SPEED; steer = desired - v; cap to 0.12; ax += steer.x * (1.6 + 1.8*strength?) Actually multiply by strength * 2.5. At edge zero, at center 0.3. Good.
Could also avoid exact d=0 by random direction based on id.
Then cap total accel to MAX_TOTAL_FORCE=0.30. Need smooth but responsive.

Potential issue all boids initial random positions and velocities with toroidal neighborhoods might form groups but O(n2) fine. Need visual coordinated movement. Flocking behavior can be subtle. Need ensure groups form. Could initialize boids in e.g. 6 clusters with similar velocities and random positions around cluster centers, so immediate groups and coordination. But "fresh population" random could be distributed. If random positions over full screen with perception 76, density 150/(1200*800)=0.000156, expected neighbors π*76²*0.000156=2.8, okay. On smaller viewport maybe more neighbors. Cluster initialization fosters groups. Make 5 clusters each with random center and common heading, 30 boids with jitter. But user wants flocking simulation; initial clusters okay. Need avoid all boids just staying in rigid cluster. Flocking forces cause groups. We can initialize around 5 centers with velocity around group heading. Fresh population each reset. Maybe positions uniformly random plus 30% clustered? I'd use 6 flocks to clearly show moving groups. Each cluster center random, spread ~90 px, velocity direction common and speed 1.8-2.6. A few outlier boids? could assign 5 groups of 30. On 1200x800, groups visible. But with toroidal neighbor search and cohesion, groups move. Uniform initial velocities can eventually align globally? The three behaviors plus independent groups produce dynamic. Good.

Need use HUD/controls. Full-screen canvas with overlay top-left panel and bottom-left maybe legend. Keep controls accessible at small views. Need maybe CSS:
html,body {margin:0; width:100%; height:100%; overflow:hidden; background:#030711; font-family:...}
canvas {display:block; width:100vw; height:100vh; cursor:crosshair;}
#panel {position:fixed; top:16px; left:16px; z-index:2; display:flex; gap; align-items:center; etc; backdrop-filter blur; background rgba(...); border ...; padding...; border-radius}
button accessible focus, hover.
#stats perhaps "150 boids · PAUSED/LIVE · Cursor radius 140px". Document radius.
Maybe a help line "Move pointer to push the flock away." Use controls with buttons and keyboard shortcuts? Could add P/Space pause, R reset. Nice but unspecified. Need ensure button IDs and status for verification. Also perhaps data attributes reflecting state. We can expose `window.flockDebug` with getSnapshot, setState? Browser inspect may not evaluate JS, but we can use console logs or DOM status. Could add a hidden `<pre id="diagnostics">` or visible tiny metric showing e.g. mean heading alignment, population, speed, state. This helps verify coordinated movement and triangle orientation. But requirement doesn't need visual metrics; a "coordination" metric can be useful. We can include a small HUD readout: "150 BOIDS · LIVE · COHESION 0.00"? Need compute local alignment every e.g. 15 frames and update DOM. But that adds complexity and perhaps helps browser verification with inspect. Could update a `<span id="alignment">` to show polarization. Also a hidden `<div id="test-data" aria-hidden>` with JSON snapshot of first few boids, so we can use browser inspect to sample. Browser tool "inspect" might output DOM text, perhaps includes hidden elements? Need see. Could also output console logs at intervals with snapshot; browser inspect console likely captured. Need understand tool output by trying after initial build. Maybe browser "inspect" returns DOM and console logs. We can use that to verify. Could add `window.__flock` exposing app state and methods. Perhaps browser tool may allow arbitrary JS in inspect? It says "inspect DOM/console" but action schema has no code field, so likely just returns DOM summary and console. Could potentially use `key`/`type` to interact with a hidden diagnostic input? Not needed. We can rely on screenshots and motion snapshots.

Maybe use `console.log` on significant events: initialization, pause/resume/reset, pointermove sampling, and periodic diagnostics every 2 sec. Then browser inspect might capture console. Need avoid verbose. We can log e.g. `[flock] t=2.0s population=150 meanSpeed=... meanLocalAlignment=... headingError=...` every 2 sec. Heading error triangle direction is purely from velocity so mathematically guaranteed, but can include. Expose `window.flockDebug = { boids, getSnapshot, pause, resume, reset, setPointer, getState }`. The browser tool perhaps has a JS eval hidden behind "inspect"? Could take screenshots. We could add a debug visual overlay with values and use OCR? Not necessary. But a diagnostic HUD is useful to show coordinated movement. We can compute local alignment metric average across boids: for each boid, compare its velocity unit with average neighbor velocity unit. If neighbor counts. polarization global = |sum unit velocities|/N. That indicates coordination; groups may cancel globally, so local alignment better. We can compute during main neighbor loop each frame accumulation, or in diagnostic function every 15 frames. We already loop all boids; we can accumulate local alignment from alignment vector dot own velocity direction. Need perhaps not too costly. Compute for each boid with count >0:
avgV = sum neighbor velocities / count; cos = dot(normalized(avgV), normalized(v)); average.
Then DOM update every 10 frames: "Local alignment: 87%" etc. Could show population, speed, alignment. This is nice. Need make sure no performance issue.

Need hidden debug data perhaps use data attributes on body:
body.dataset.population = boids.length; body.dataset.state=paused?'paused':'running'; body.dataset.meanX? Could update maybe. Browser inspect could see DOM? Let's find tool behavior after writing initial.

Need design resize robust:
const canvas=..., ctx=...
let W,H,dpr;
function resize() {
 oldW=W||innerWidth; oldH=H||innerHeight;
 W=Math.max(1, window.innerWidth); H=Math.max(1, window.innerHeight);
 dpr=Math.min(window.devicePixelRatio||1,2);
 canvas.width=Math.round(W*dpr); canvas.height=Math.round(H*dpr); canvas.style.width=W+'px'; canvas.style.height=H+'px';
 ctx.setTransform(dpr,0,0,dpr,0,0);
 if (boids.length) {
   const sx = W/oldW, sy=H/oldH;
   boids.forEach(b=> { b.x*=sx; b.y*=sy; wrap; });
 }
 pointer.x *= W/oldW? Pointer screen location perhaps no need; keep if active maybe set to null on resize to avoid mismatch. update radius.
 render();
}
Need initial W/H set before create boids. `resize()` called first with boids=[]; but render perhaps called with empty; then create. Could set `oldW = W || window.innerWidth` so scale=1. Need initial dimensions. Set `W=window.innerWidth; H=window.innerHeight` before resize? Could initialize 0 and call. Then after create render. Need avoid recursion. Use `resizeCanvas` with scale only if oldW>0 && oldH>0 && boids.length.
Resize event can fire many times; while paused, render static with resized positions. That's okay, "pause freezes simulation state" resizing changes positions due to canvas fit, but necessary to remain usable. Should not teleport? scaling is resize. Fine.
Could use ResizeObserver? window resize sufficient. DevicePixelRatio changes via matchMedia perhaps not necessary.
Controls responsive:
.panel with `max-width: calc(100vw - 32px); flex-wrap:wrap;`
On narrow width, buttons still above. Add `@media (max-width: 560px)` smaller title/panel maybe.
Maybe controls include title and buttons. Ensure touch pointer interactions don't conflict with button. Since global `pointermove` would set repulsion even over button; that's okay. Button click can pause/resume. Need pointerdown on canvas sets pointer active; pointerup for touch maybe removes pointer? If using pointermove from touch, pointerup should set null for touch only. For mouse, `pointerleave` from document. We'll track:
let pointer = {x:0,y:0,active:false,type:'mouse', inside:false};
function updatePointer(e) { pointer.x=e.clientX; pointer.y=e.clientY; pointer.active = true; pointer.type = e.pointerType; if (paused) render(); }
window.addEventListener('pointermove', updatePointer, {passive:true});
window.addEventListener('pointerdown', updatePointer, {passive:true});
window.addEventListener('pointerup', e => { if (e.pointerType !== 'mouse') pointer.active=false; render if paused;});
document.addEventListener('pointerleave',...)? `window.addEventListener('pointerout', e => { if (!e.relatedTarget) pointer.active=false;})`; also `window.addEventListener('blur',...)`.
Could leave pointer active when mouse leaves viewport; requirement resume flocking after pointer moves away maybe pointer moving away from flock within viewport enough. If pointer stays active but no boids near radius, fine. For mouse leaving window, deactivate. Use `document.addEventListener('mouseleave',...)` perhaps. Also pointerleave on canvas is complicated because overlays. Add `document.addEventListener('pointerleave', () => pointer.active=false)`. Does pointerleave bubble? document-level pointerleave maybe works. Could use `window.addEventListener('mouseout', e => {if (!e.relatedTarget) pointer.active=false;})`.
Need initial pointer inactive; draw field only when active. If mouse from browser tool moves/clicks, field appears. On mobile touch pointerup deactivates.
Need "visible or documented cursor-influence radius": draw exact circle and status text radius. Use `pointerRadius()` dynamic:
const REPEL_RADIUS = 140; fixed and documented. For small viewport maybe `Math.min(140, Math.max(65, Math.min(W,H)*0.28))`. HUD shows `Math.round(repelRadius())`. Add status text. Circle centered pointer dashed: ctx.setLineDash([6,8]); strokeStyle rgba(255,110,140,.5); fillStyle rgba(255,80,110,0.045); maybe draw "REPEL" at edge? Add center tiny ring. Need draw before or after boids? Field after background but before boids so boids on top. Could draw pointer influence as subtle radial gradient (computed each frame) but okay. Use `ctx.arc(pointer.x,pointer.y,R,0,2π)`.
Need wrap edges. Draw boids possibly near edges clipped. Since positions wrap when x<0 or x>=W. Triangle may partially clip at edge; could draw ghost copies near edges to make toroidal continuity. Nice but not required. Could implement `drawTriangle(b.x,b.y,angle,size,color)` and optionally if within size of edges draw translated copies. This ensures smooth visual wrap but can be more complex. Use helper loop over x offsets [-W,0,W] if near edges, y similarly; condition. With 150 boids, fine. Or simply standard wrap teleport at edge visually is expected. "Wrap boids across screen edges" means teleport, okay. To avoid a full triangle disappearing/reappearing, ghost copies are nicer. Maybe implement.
Need background: solid dark with subtle star/grid? No network. Could draw background each frame with ctx.fillStyle and perhaps grid lines or radial gradient. Full-screen canvas; draw background using fillRect. Maybe create gradient per frame? cached on resize. Static:
let bgGradient;
function makeGradient(){ const g=ctx.createRadialGradient(W*0.5,H*0.45,0,...); addColorStop('#0b1730' at 0, '#030712' at 1); }
But ctx transform with dpr still coordinates CSS pixels; gradient works. Use. Draw faint grid lines? Could draw few grid lines with very low alpha; not necessary. Maybe draw a radial vignette and constellations? Styling unspecified. Need lightweight.
Could add trailing motion: instead of clear entirely, fill with rgba(3,7,18,0.28) to create trails. But when paused, if re-render static repeated would cause ghost fade; might alter visual. Also wrapping and resize. Simpler clear with gradient each frame. Triangles oriented clearly. Maybe short trail lines behind each boid from velocity? That might enhance direction but could confuse; draw triangle only perhaps enough. Could draw a small faint line tail 8px behind. Requirement drawn as oriented triangles; fine. Use filled triangle with thin stroke.

Need speed and heading colors. Could set per-boid hue based initial cluster or normalized angle:
b.hue = (group*42 + random*20 + 190) % 360 maybe cyan/blue to violet/pink. Use `hsl(${hue} 90% 70%)`. But constructing 150 strings each frame okay. Could precompute color and glow style. Use alpha. Need perhaps color consistency. For each cluster assign different hue: 185, 205, 265, 315, 35? Then with random. Or color by heading updates every frame `hsl(${(angle*180/π+200)%360} 90% 68%)`; this makes color shift as heading changes. Fine. Perhaps visually indicate alignment by color; groups same heading same color. Nice. For every boid compute hue = (angleDeg + 200 + 360)%360; fillStyle `hsl(${hue.toFixed(0)} 90% 68%)`. 150 styles per frame okay. Could add subtle shadowBlur but expensive. Use fill plus stroke. Need possibly adjust triangle size based speed: size=7+ speed ratio*2.5, nose length size*1.55, half-width size*.72, tail=-size. heading from velocity. Draw with context transform? We can `ctx.save(); ctx.translate(x,y); ctx.rotate(angle); beginPath; moveTo(size*1.6,0); lineTo(-size*.9,size*.7); lineTo(-size*.55,0); lineTo(-size*.9,-size*.7); closePath; fill; stroke;` This creates concave arrow-ish kite? Requirement triangles: need exactly three vertices. Use moveTo(nose), lineTo(backLeft), lineTo(backRight), close. With tail maybe center? no.
```
ctx.moveTo(size*1.7,0);
ctx.lineTo(-size, size*0.75);
ctx.lineTo(-size, -size*0.75);
ctx.closePath();
```
This points +x after rotation. Need small tail line optional.
Could set globalAlpha depending speed maybe no.
Need pointer circle maybe with dashed `ctx.setLineDash` but reset. Add small label perhaps `"REPEL • 140 PX"` near circle top if not near top edge. Draw with ctx.font 10px monospace. Could clutter but okay.

Need HUD stats:
```
<div class="panel" id="controls">
  <div class="brand"><span class="dot"></span><strong>FLOCK / 150</strong></div>
  <button id="pauseBtn" aria-pressed="false">Pause</button>
  <button id="resetBtn">Reset</button>
  <div class="readout">
    <span id="stateLabel" class="live">LIVE</span>
    <span id="metrics">...</span>
  </div>
</div>
<div class="hint">Move the pointer ...</div>
```
documented radius in hint: "Move pointer within the dotted 140 px field to repel boids; they rejoin the flock when it leaves." But radius dynamic. Use span `radiusLabel`.
Maybe title line.
Need use accessible button states, keyboard shortcuts:
Space toggles pause unless focus button (space would click button natively). Better only `P` and `R`; avoid space to not conflict. Add keydown `p`, `r`, `Escape` maybe. Document via title attributes.
Need button text "Pause" and "Resume" toggled. `aria-pressed`.
Need reset uses `createPopulation()` and render; perhaps update metrics. Need continue paused state unchanged. Also reset should "restores a fresh population of 150 boids"; perhaps reset while paused should also resume? Ambiguous. Most apps reset keep paused state; okay. Could choose reset always resumes, making obvious fresh simulation. But "Pause freezes simulation state; Reset restores a fresh population" doesn't say reset should affect paused. Keeping paused state is reasonable. Need if paused reset displays new population but frozen. Maybe user expects reset and continue; if still paused they'd know from label. Could perhaps reset and resume automatically to ensure fresh population moving. But then reset overrides Pause; okay. Which is better for verification? They may click Pause then Reset and expect perhaps still paused? likely not tested. Keep current pause state to respect explicit state.

Need sample coordinated movement and triangles pointing along travel. We could add diagnostics:
- `window.flockDebug` with `snapshot()` returning boids array copy and state, metrics, W,H, pointer. There may be browser tool that can evaluate JS via console? no code input. Could trigger console log via key? We can add a hidden "diagnostic" button or keyboard shortcut `d` to log snapshot. Then use browser `key` action. Could use `key` with text? Need know. The browser tool action `key` has `text` maybe key name. We can press "d" to log. But likely key dispatch to page. Add keyboard shortcut "d" to `console.table`? Maybe. We can have periodic console logs every 2 sec, so browser inspect after waiting/motion can see. Need avoid console flooding. Log at 0, 2, 4 sec perhaps via simulation time; use maybe every 120 frames. We can call `console.info` from `emitDiagnostics()` every 2 sec with metrics and sample positions. But browser console output perhaps cumulative and inspect action after moments could show. We can also set hidden `<pre id="diagnostics">` text content with JSON and use DOM inspect. Could provide a visual "DIAG" overlay that updates with first boid position, velocity, heading, angle error. But not needed to user. Yet verify requirement asks us to sample at several moments; we can use programmatic Node-like testing outside browser perhaps by extracting script and running simulation under jsdom? No third-party libs. Could use browser screenshot/motion and `window.flockDebug` maybe tool has no eval but can use console logs. We can write a custom test harness in the app that runs a deterministic simulation check in an offscreen function and logs results; but we need actually sample simulation at moments. Could add debug hooks and use browser's visible DOM with status data.

Maybe browser tool "inspect" output gives page text, and we can add a `<div id="debug-readout">` with small font bottom-right showing first few boid x,y,vx,vy,angle and mean local alignment. This is not necessarily bad; can style as a subtle telemetry panel, maybe actually user-friendly. But full-screen simulation can include a compact "TELEMETRY" panel showing `Alignment 89%`, `Mean speed 2.4 px/f`, `Heading error 0.0°`. That makes it look polished and simultaneously verifies. Could include hidden HTML `data-*` attributes updated every ~250ms with first 3 boid samples. Browser inspect might show them. Maybe too much.

Let's understand browser tool likely from a known benchmark. It probably runs Playwright and tools:
- reload: loads index.html and returns console errors maybe
- inspect: maybe returns DOM structure and computed styles? Could include page title, text, console.
- screenshot: image
- motion: captures frames over time
- click/drag/key/type/scroll.
Potential `inspect` may accept `text` as JS expression? Schema has `text` max 2000 general. Could perhaps use `action:"inspect", text:"..."` to evaluate? Need discover by calling after create. We can maybe call `browser` with action inspect and a `text` string like `window.flockDebug.snapshot()` and see. The tool description says "Run index.html, inspect DOM/console, interact, and see screenshots or motion frames." Might support `text` for type or key only. We can experiment harmlessly. Need use browser actions anyway.

Could write a self-test facility that can be triggered by URL hash `#test`, which runs internal physics checks and prints results into a visible `<div id="test-results">`, then use browser reload perhaps can't supply URL? browser reload action might use current page URL maybe can't add hash. Could use `browser` action `type` into address bar? no.

Better: use inline JS to create an `window.__flockTest` and periodically log diagnostics. Browser console should capture. We'll use console logs every 2 seconds with structured string:
```
console.info(`FLOCK_SAMPLE t=${...} state=${paused} boids=${...} alignment=${...} meanSpeed=${...} maxHeadingErrorDeg=${...} sample=${JSON.stringify(...)}`);
```
`maxHeadingErrorDeg` computed as angle between triangle heading (atan2(vy,vx)) and displacement from last position. Since we update position by velocity with wrap, travel direction exactly velocity; could calculate actual displacement using wrapped shortest delta and angle; should be 0. Need sample at several moments: periodic logs across ~6 sec; browser tool `motion` maybe waits enough. Could also use `setInterval` console logs independent of animation. Pause should stop simulation but diagnostics still could log same positions; that's okay. Need detect freeze by comparing sample positions across logs. When paused, separate logs indicate `state=paused` and same coordinates. Could perhaps log on pause/resume events with snapshot too. Then inspect console captures. That would let us verify via returned console output. Good.

Need not expose raw boids to too many logs though. Use first 3 boids with x,y,vx,vy,heading,travel angle. Include global mean alignment. Update `#metrics` every 250ms. Use first boid sample in hidden `data-samples` maybe.

Potential issue browser's console capture may only show errors, not info. Could use `console.log` to be safe. `console.table` might not. Use console.log. Need maybe diagnostics visible in DOM too. We can create `<div id="telemetry">` with stats and first boid sample in tiny text; perhaps can be toggled? A subtle bottom-right panel. Could show:
`LOCAL ALIGNMENT 83% · MEAN SPEED 2.4 · HEADING ↔ TRAVEL 0.0°`
This is nice enough and not intrusive. But the user didn't ask for telemetry; harmless.
Maybe update `document.body.dataset`:
```
body.dataset.flockState = paused ? "paused":"running";
body.dataset.population = boids.length;
body.dataset.meanAlignment = ...
body.dataset.sample = JSON.stringify(first3.map(...));
```
Then browser inspect DOM might show body attributes. We'll still have visible metrics. Need avoid huge dataset. Could set `#sampleData` hidden via `.sr-only` with JSON. But `inspect` might include hidden text.

Let's focus first writing implementation. We can then inspect. Need perhaps execute a Node-based sanity test by extracting JS? Since app depends on canvas/DOM, we can use browser. Maybe use Playwright installed? We can check environment for browsers/tools perhaps not needed. Could use `node` with a mock DOM/canvas to simulate; but browser tool exists. Need use it.

Let's design physics carefully to avoid weird behavior. Detailed simulation class:

```
(() => {
'use strict';
const COUNT=150, PERCEPTION=78, SEPARATION=26, ...
let width=innerWidth,height=innerHeight,dpr=...
const canvas=..., ctx=canvas.getContext('2d',{alpha:false});
let boids=[], paused=false, pointer={...}, frame=0, simTime=0, lastTs=0, metrics...
let generation=0;

function rand(min,max)...
function wrapValue...
function shortestDelta(dx,dy) { ... return [dx,dy]; }
function limit(x,y,max)...
function makeBoid...
function reset() {
 generation++;
 boids.length=0;
 const groups=6;
 const centers = Array.from({length:groups},()=>({x:rand(...), y:..., angle:rand(0,TAU)}));
 for i 0..149:
   const g = i%groups? or Math.floor(i/25); use Math.floor(i/(COUNT/groups)).
   angle = center.angle + rand(-0.45,0.45)
   speed = rand(1.6,2.5)
   x = wrap(cx + gaussian-ish random radius)
   y...
   hue = ...
 boids.push...
 }
 frame=0; simTime=0;
 metrics = calculateMetrics? 
 render();
 logSample('reset');
}
```
Need random spread avoid all cluster boids too close: use angle random and radius sqrt(random)*100 perhaps. `x = center.x + cos(a)*r`, etc. Wrap.
Maybe group centers near edges with wrap; cluster can span edges; shortest delta handles. Good.
Velocity cluster heading:
`angle = c.heading + rand(-0.55,0.55)`.
Boid hue fixed group hue + random. But if heading-based color dynamic, no need. We can use group hue for group identification and slight brightness based speed. Maybe coherent groups visually. Use `b.color = `hsl(${...} 88% 68%)`` and `b.edge = ...`. Then orientation still triangle. But prompt says triangles point in direction; shape enough. Heading-based color may help see alignment; perhaps use heading hue dynamically to make same heading same color. That is more informative. Use `const hue = (Math.atan2(vy,vx)*180/π + 200 + 360)%360`, color string. It will vary smoothly. Maybe palette across turquoise to violet to amber; hue full circle. Fine.
Need compute forces using arrays of accelerations to avoid in-place updating velocities while neighbor loop uses velocities. If we update b.velocity inside simulation loop after computing all accelerations? Could compute ax/ay for each boid using current boids then store in `b.ax,b.ay`; then second loop update. Good.
```
function step(dt) {
 const forces = new Array(n) maybe reuse b.ax.
 for i:
  let alignX... sepX etc
  for j:
   if i===j continue;
   let dx=boids[j].x-b.x; dy=...; wrap
   d2=...
   if d2 < perception2 && d2 > 0.0001:
      count++
      align += other.v
      coh += dx,dy
      if d2<sep2:
         inv=1/Math.sqrt(d2); d=1/inv;
         weight=(1-d/SEP_RADIUS); // stronger close
         sepX -= dx*inv*weight; etc
  forceX=0...
  if count:
    // alignment desired from avg vel (sum/count but normalize same as sum)
    const a = steerDirection(alignX, alignY, b, MAX_FORCE)
    ...
    forceX += a.x*ALIGN_WEIGHT ...
  if sepCount:...
  // cursor
  ...
  cap total to .32
  b.ax=forceX...
  // metrics local alignment maybe calculate within same loop:
  if count: const avgMag = hypot(alignX,alignY); ownMag=hypot(vx,vy); cos=(vx*alignX+vy*alignY)/(ownMag*avgMag); localAlignSum += clamp(cos,-1,1); localCount++
 then second loop:
  b.vx += b.ax*dt; b.vy...
  speed=hypot;
  if speed>MAX_SPEED scale; if speed<MIN_SPEED: if speed==0 random else scale.
  const px=b.x, py=b.y maybe store `lastX`, `lastY` and `travelX`? Need diagnostic angle. After update:
   b.prevX = b.x; b.prevY = b.y;
   b.x += b.vx*dt; b.y += b.vy*dt;
   wrapPosition(b)
   b.travelX = shortestDelta? actual movement without wrap: b.x-b.prevX might be e.g. W-2 after wrap; use shortest delta from prev to current: `wrapDelta(b.x - b.prevX, b.y - b.prevY)` gets true velocity direction. But we know velocity * dt. Could compute heading error from `atan2(b.vy,b.vx)` vs `atan2(travelY,travelX)`, likely zero. Need robust when wrapping. Use function `relativeDelta(from,to)` maybe shortest from prev to current. Actually `wrapDelta(dx,dy)` interprets dx as `to-from` and adjusts to nearest. If crossing right edge from W-1 to 1, dx=1-(W-1)=2-W, less than -W/2 -> add W -> 2, correct. Good.
   b.travelAngle = atan2(ty,tx)
   b.headingAngle = atan2(vy,vx)
```
But if b.x updates with dt > maybe crossing more than half W impossible for speed 3 px/frame and dt<=2 =>6px, so fine.
Need avoid modifying `b.vx` before all forces computed: second loop does all after first, yes.
Need metrics head error from many boids:
```
let errSum=0, errMax=0;
for each b: diff = angleDifference(heading, travelAngle), err...
```
Can compute in second loop.
Need `min speed`: if speed < MIN_SPEED, scale to MIN_SPEED; if speed=0 random. This ensures no boids stop.
Need dt: 
```
function animate(ts) {
 if (!lastTs) lastTs=ts;
 const elapsed=Math.min(50, ts-lastTs);
 lastTs=ts;
 if (!paused) {
   const dt = Math.max(0.25, elapsed / (1000/60)); // if 0 maybe 0
   // optional fixed substeps for high dt:
   let remaining=dt;
   while (remaining>0) { const sub=Math.min(1,remaining); step(sub); remaining-=sub; simTime += sub/60; }
   frame++;
   render();
 } else {
   // no render (but pointer circle maybe update on event via render)
 }
 if (ts - lastDiagnostic > 2000) { logDiagnostic... update visible metrics maybe }
 requestAnimationFrame(animate);
}
```
If dt very small, min .25 could speed up on high refresh >240Hz; better no min, just dt=elapsed/16.6667; if 0 skip step. For 120Hz, dt=.5 correctly. Could use fixed substeps if elapsed large:
```
let dt=Math.min(elapsed, 50)/16.6667;
while(dt>0) { const h=Math.min(1,dt); step(h); dt-=h; simTime+=h/60; }
```
At 60fps one step. At 30fps two steps, forces recomputed each substep (O(n²)*2) okay. At 120fps one step with dt=.5. This maintains smooth motion. Need not render more than requestAnimationFrame.
`lastTs` should continue updating while paused, so on resume elapsed small. We set `lastTs=ts` every frame regardless. Good.
When paused, no render; but if resize or pointer move event calls render. Need avoid render repeatedly on pointer moves too much maybe fine.
Need diagnostics at intervals based on ts, even paused. If paused, log same sample with state paused, allowing freeze verification. Maybe every 1500ms. But browser inspect console may flood over long run; okay. Could limit to first e.g. 10 logs then stop or every 2 seconds indefinitely. Fine.
Need update metrics at 250ms:
```
if (ts-lastHud > 200) { stateLabel.textContent...; metrics.textContent = `...`; telemetry text; document.body.dataset.sample=...; }
```
Could update only after step. Need calculate metrics inside step and assign. When paused, keep last metrics or update state label on toggle.
Need `frame` increments per animation frame not per substep; simTime increments.
Need local alignment metric from force computation. Make `metrics.localAlignment = localCount ? sum/localCount : 0`.
Mean speed and heading error from second loop.
Need global polarization maybe:
```
sumUnitX += vx/speed, ...
metrics.polarization = hypot(sumUnitX,sumUnitY)/n
```
Could show local alignment more relevant. If groups move different directions, polarization low, local alignment high. Use local alignment.
Need triangle orientation error metric: compare angle of velocity and travel delta; 0 by construction. If paused, travel delta remains last step. Show `0.0°`.
Need sample logging:
```
function sampleString(){
 const samples=boids.slice(0,3).map(b=>({x:+b.x.toFixed(1), y..., vx..., vy..., headingDeg:..., travelDeg:...}));
 return JSON.stringify(samples);
}
function logDiagnostic(reason='') {
 console.log(`[flock] ${reason} t=${simTime.toFixed(2)} state=${...} population=${boids.length} localAlignment=${(metrics.localAlignment*100).toFixed(0)}% meanSpeed=${...} triangleTravelError=${...} sample=${...}`);
}
```
Need console output likely inspect returns. Could use `window.flockDebug = { snapshot, metrics... }`.
Add keyboard `d` to log on demand and perhaps `window.__flockDebug` data. Might use tool key to log. Could also add a hidden click target with `id=debugProbe` maybe no.
Need pointer event logging maybe throttle to one log on first move and one after far-away move. Could detect pointer activation and log:
```
let pointerLogAt=0;
function setPointer(e) {
 ...
 if (performance.now()-pointerLogAt>1000) console.log('[flock] pointer...'), pointerLogAt=...
}
```
But console logs could be noisy on drag. Fine. Need verify cursor interaction with available pointer actions. We can use browser drag across center; pointer field visible in screenshot. Need perhaps able to see boids avoid it. We'll take screenshots before and after pointer action. Need maybe use `motion` after pointer move to see path. The browser tool may not support hover without click/drag? `click` and `drag` likely move pointer. Use `drag` from one point to another; pointermove events. Need ensure pointer stays active after drag. If mouse pointer remains at end, yes. Could also click at center. Need draw field on pointermove. Browser screenshot can show circle and boid distribution. To verify force, need quantitative diagnostics: compute a `repulsionResponse` metric perhaps. We can instrument pointer influence:
- In step, count boids within pointer radius (`metrics.inField`) and average radial velocity relative to pointer (`metrics.radialVelocity`), where positive means moving away. This can show after pointer interaction that boids are turning away. For boids within radius, radial component = dot(v, awayDirection); average. Initially perhaps mixed; after 1 sec should positive. Show in telemetry and console sample. This is useful verification.
- Compute sum of cursor acceleration maybe.
```
if(pointer.active) for b:
 dx = b.x-pointer.x... (direct)
 d=...
 if d<R:
   inField++
   awayX=(b.x-pointer.x)/d...
   radial += (b.vx*awayX+b.vy*awayY)
```
Could compute in step and metrics. Need determine if pointer wraps? Repulsion uses direct distance. Fine. We could use shortest toroidal delta for boids near opposite edges so cursor field effectively wraps, but visual circle doesn't. Maybe not.
- Log `inField`, `avgRadialSpeed` (px/frame). When pointer active and boids repelled, should become positive. Need ensure calculate before update. Could also expose pointer state.
- Need show "Boids in field: N · outward speed: +1.2" maybe too technical. HUD can show "field 12 · outward 1.8". Fine.

Potential challenge: browser tool screenshot after drag might show pointer field if pointer.active stays true. For a drag action, pointerup for mouse should not deactivate. Our pointerup only non-mouse deactivate. Good.
Need pointer position when mouse leaves window: use `window.addEventListener('mouseout', e => { if (!e.relatedTarget) pointer.active=false; ...})`. Do not deactivate on pointerout moving from canvas to panel; relatedTarget exists. Good.
Need pointer event over panel might still set field; okay.
Need clicks on buttons: pointerdown sets pointer active at button location; flocking repels near panel. Fine. This might actually make boids avoid controls, nice. But if pointer remains over Pause, field remains and boids steer away while running. That's expected.
Need paused state freeze including pointer force not applied. On pointer move while paused, render circle but boids unchanged. Good.

Potential issue canvas `pointer-events` and controls: canvas receives pointer events, panels above; global window picks up. Fine.
Need `ctx` maybe CanvasRenderingContext2D with `{alpha:false}`; background fill each render. Need clear and draw gradient. Ensure after resize transform reset correct.
Need draw grid:
```
function drawBackground() {
 ctx.fillStyle=backgroundGradient; ctx.fillRect(0,0,W,H);
 ctx.strokeStyle='rgba(...)';
 ctx.lineWidth=1;
 for x=0;x<W;x+=80 ...
}
```
150 lines maybe fine. Could avoid too much. Draw subtle dots at intersections? not necessary. Maybe gradient plus grid.
Need field circle:
```
if (pointer.active) {
 const r=repelRadius();
 const grad=ctx.createRadialGradient(...); ...
 ctx.beginPath(); ctx.arc(...); ctx.fillStyle=grad; ctx.fill();
 ctx.setLineDash([5,7]); ctx.strokeStyle='rgba(255,112,148,.65)'; ctx.lineWidth=1.25; ctx.stroke(); ctx.setLineDash([]);
 ctx.beginPath(); ctx.arc(pointer.x,pointer.y,3,...); fill...
 ctx.font='...'; ctx.fillText(`${Math.round(r)}px repel`, x-r, clamp(y-r-8,...));
}
```
Need maybe field visible after pointer moves; browser screenshot can show.
Need draw wrap ghost copies. Implement:
```
function drawTriangleAt(x,y,b,alpha=1) {
 const angle=Math.atan2(b.vy,b.vx);
 const size=6.5 + (Math.hypot(...)-MIN_SPEED)/(MAX_SPEED-MIN_SPEED)*2;
 ctx.save();
 ctx.translate(x,y); ctx.rotate(angle);
 ctx.beginPath(); ...
 ctx.fillStyle=colorFor(b,angle); ...
 ctx.fill(); ctx.stroke();
 ctx.restore();
}
function drawBoids() {
 const margin=16;
 for (b of boids) {
  drawTriangleAt(b.x,b.y,b);
  const ox = b.x < margin ? W : b.x > W-margin ? -W : 0; etc
  if (ox) draw at x+ox,y
  if (oy) ...
  if(ox&&oy)...
 }
}
```
Could color string based angle. ctx.save/restore 150-200 times each frame okay. Use path transform manually to avoid save/restore:
```
const c=Math.cos(angle), s=Math.sin(angle);
function transformed(px,py){ return [x+px*c-py*s, y+px*s+py*c];}
```
Three points. Faster. Need draw tail line perhaps:
```
ctx.beginPath(); moveTo(nose); lineTo(...);...
ctx.fill(); ctx.stroke();
```
Use `hsl(${hue}, 90%, 68%)`; strokeStyle maybe rgba(255,255,255,.35). Might need ensure triangles visible against dark background. Add `ctx.shadowColor`? Expensive; perhaps fill with bright colors. Could set globalCompositeOperation='lighter' for boids? Could make nice but overcomplicate. Use `ctx.fillStyle = `hsl(${hue.toFixed(0)} 90% 68%)`; ctx.strokeStyle='rgba(255,255,255,.35)'`.
Maybe draw a faint tail:
`ctx.strokeStyle = hsla(hue,90%,65%,0.22); ctx.lineWidth=1; ctx.beginPath(); moveTo(x-c*size*1.2,y-s*size*1.2); lineTo(x-c*size*3.5,...) stroke();`
But 150 more strokes. Could omit.
Need arrow shape exactly triangle. Use size ~7.5.
Could draw boid center highlight? no.

Need maintain boid population on resize. `COUNT` constant; reset uses 150. Maybe diagnostics show population.
Need adjusting neighborhood radius on small screens? If W/H very small, perception 78 can exceed half width causing shortest delta ambiguity. `wrapDelta` handles only one wrap; if W<2*perception, a boid may perceive same neighbor twice? Each other only once and shortest distance <= W/2. Fine. Cursor radius min. Keep perception 78 perhaps on 320px width okay. Could adapt perception `Math.min(85, Math.max(45, Math.min(W,H)*0.11))`; but preserving behavior maybe simpler fixed. On small viewport, dense with more neighbors but okay. Repel radius dynamic.
Need controls layout on 320 width. Panel flex-wrap. Hide long hint maybe. CSS:
```
.panel { top:14px; left:14px; right:14px? } 
```
If `right:14px`, panel spans full width, potentially blocks view but okay. Use `width:max-content; max-width:calc(100vw - 28px)`. Buttons.
```
.control-bar { display:flex; ...}
.readout { border-left...}
@media(max-width:640px){ .brand span ...; .hint {display:none?} .panel {padding:10px;} .readout {width:100%; border-left:0; border-top; padding-left:0; padding-top:8px;} }
```
Need status visible. Maybe panel 2 rows on mobile.
Hint bottom-left with radius. Could wrap:
`bottom:14px; left:14px; max-width:calc(100vw - 28px);` with pointer-events none.
Telemetry top-right maybe overflows on mobile. Could hidden under 800px or move into control panel. Better put metrics inside panel. A bottom-right telemetry box maybe hidden on small screens. Or integrate all into one panel:
```
<div class=readout>
 <span class=status>LIVE</span>
 <span id=metrics>alignment ...</span>
 <span id=fieldInfo>pointer ...</span>
</div>
```
Hint bottom-left separate with radius. No need telemetry separate.
Need update metric text:
`align ${(localAlignment*100).toFixed(0)}% · speed ${meanSpeed.toFixed(2)} · orient err ${headingError.toFixed(1)}°`
and field line maybe `field ${inField} · outward ${radial.toFixed(2)}`. Could put in hidden body data.
Maybe visible `#fieldInfo` in hint:
"Pointer field: <span id=radius>140</span> px · <span id=fieldCount>0</span> boids inside". This documents and verifies. Nice. Add little visual dashed circle legend. Hint with pointer-events none.

Need set canvas `role="img"`? no.

Potential diagnostics via body dataset:
```
document.body.dataset.flockState = ...
document.body.dataset.population = String(boids.length)
document.body.dataset.localAlignment=...
document.body.dataset.sample = JSON.stringify(boids.slice(0,3).map(...))
```
At 250ms update. This can be read by inspect if it returns body attributes. Need perhaps add `#probe` visually hidden but text with JSON; browser inspect might return DOM text. Use:
```
<div id="probe" class="sr-only" aria-hidden="true"></div>
```
update with JSON. But hidden text could be considered weird; okay. Better `data-sample` body.
Could also add `window.flockDebug`:
```
window.flockDebug = Object.freeze({
  get state(){return {...}},
  snapshot(){...},
  setPointer(x,y){...},
  clearPointer(){...},
  pause(){setPaused(true)}, resume(){...}, reset,
  step(frames=1){...}
});
```
This allows programmatic testing if browser tool supports JS evaluation by `inspect` text, or perhaps we can use URL javascript? We'll see. Need ensure no security issues.

Need maybe use `console.log` diagnostic on initialization and periodic. At t=0, metrics from one simulation step? We can run 1 initial step? `reset()` creates boids and calls `computeMetrics()` perhaps from velocities and travel angle initialized. We can set `b.travelAngle=heading`, etc. Need no simulation step before initial render. Fine.
Need periodic logs:
```
let nextLogAt = 0;
function animate(ts) {
...
 if (ts >= nextLogAt) {
   logDiagnostic(ts===0?'init':'sample');
   nextLogAt = ts + 1500;
 }
...
}
```
But initial `reset()` calls log before animation; then at ts=0 another log. Could just initial log in reset and nextLogAt=1500 based on performance.now maybe.
Need track `simTime` only increases when running. In paused logs, t stays same. Good.
Need on pause/resume/reset log state with sample positions. Buttons call `logDiagnostic('pause')`, etc. That helps.
Need pointer logging on first activation:
```
function pointerSample(reason) { console.log(`[flock] pointer ${reason} x... active...`) }
```
Maybe not every move. On pointerdown and first activation only. We can also log in periodic diagnostic with pointer/inField/outward.
Need on pause, button text and status:
```
function setPaused(value){
 if (paused===value) return;
 paused=value;
 pauseBtn.textContent=paused?'Resume':'Pause';
 pauseBtn.setAttribute('aria-pressed',paused);
 stateLabel.textContent=paused?'PAUSED':'LIVE';
 stateLabel.classList.toggle('paused',paused);
 body.dataset.flockState=...
 logDiagnostic(paused?'pause':'resume');
 if(paused) render(); // maybe field updated.
}
```
`aria-pressed` for toggle button indicates pressed when paused. Could use text "Resume". Good.
`reset`:
```
function resetFlock() {
 reset();
 logDiagnostic('reset');
}
```
Need reset button perhaps give a quick visual pulse? CSS active.
Need keyboard:
```
window.addEventListener('keydown', e => {
 if (e.target instanceof HTMLElement && /input|textarea|select/.test(...)) return;
 if (e.key.toLowerCase()==='p') ...;
 if (e.key.toLowerCase()==='r') ...;
 if (e.key.toLowerCase()==='d') logDiagnostic('manual');
});
```
Need avoid browser page reload on Ctrl+R; check `e.ctrlKey||metaKey||altKey` return. Good.
Could support `Space` but if target button native click; no need. Maybe add `space` to pause when target is body/canvas:
```
if (e.code==='Space' && e.target===document.body){...}
```
but not necessary.
Need pointer `e.clientX/Y`. For touch, pointer moves over canvas; controls may still receive. Prevent scroll? body overflow hidden; canvas `touch-action:none` to ensure pointer events. Add CSS `touch-action:none;`. But global pointerdown on buttons with passive true doesn't prevent click. Good.
Need `pointerRadius()`:
```
return Math.max(70, Math.min(REPEL_RADIUS, Math.min(W,H)*0.30));
```
On 800 height => min*0.3=240, capped 140 -> 140. On 320x480 =>96. On 200x200 =>70 due max, but radius > half width; okay. Could simply fixed 130 to keep documented easy. Responsive concern: 140 on 320 width is 44% width, still usable. Use fixed radius `REPEL_RADIUS=130`, and hint updates "130px". Simpler, exact. On extremely tiny 200x200, field covers most but okay. Could dynamic: `Math.min(140, Math.max(55, Math.min(W,H)*0.28))`. Then update label on resize. Need visible circle exact. Good. We'll implement dynamic.
Need maybe pointer field wrap near edges? If dynamic, do direct. Fine.

Need physics verification: We should perhaps run a quick standalone Node simulation of core logic to see metrics, but can write implementation and use browser console logs. Need be careful with browser tool's console retention. Could add a visible `#probe` with a compact JSON sample of first 3 boids. Then screenshots maybe tiny text. But browser inspect may output page text. Could use that to compare at different times; screenshot of probe text maybe too small. Better use console logs, and use `browser inspect` after 5 seconds. Need tool maybe returns console output since page load. Let's test.

Let's write index.html now. Need ensure all script inline, no external resources. CSS no @import. Use no fonts external; system fonts. Let's construct carefully.

Potential bug: `ctx.setTransform(dpr,0,0,dpr,0,0)` after canvas resize. `ctx.createRadialGradient` uses current transform? Gradients are in user space at creation? Canvas gradients coordinates are transformed by current transform when used? Actually gradient coordinates are in canvas coordinate space, and current transform at creation? MDN says gradient coordinates are global, relative current coordinate space. Setting transform dpr should mean CSS coordinate gradient scaled by dpr, so fine. To avoid issues, create gradient after setting transform. Good.
Need background on `render()` after canvas resize. `ctx.fillStyle=bgGradient`.
Need if `backgroundGradient` null initial? resize creates.
Need `ctx.setLineDash` reset.
Need `drawBoids` ghost copies color perhaps alpha lower. We can use context globalAlpha for ghost. Need set back.
```
function paintBoid(x,y,b,ghost=false){
 const angle=...; const c=..., s=...
 const tail=-size, etc
 const hue=(...);
 ctx.globalAlpha=ghost?0.45:1;
 ctx.beginPath();
 ctx.moveTo(x+nose*c, y+nose*s);
 ctx.lineTo(x+tail*c - half*s, y+tail*s + half*c);
 ctx.lineTo(x+tail*c + half*s, y+tail*s - half*c);
 ctx.closePath();
 ctx.fillStyle=`hsl(${hue} 90% 68%)`;
 ctx.fill();
 ctx.strokeStyle='rgba(255,255,255,0.35)';
 ctx.lineWidth=0.8;
 ctx.stroke();
 ctx.globalAlpha=1;
}
```
Check triangle base coordinate rotation:
Local (L,H) transforms to (L*c - H*s, L*s + H*c). For base left local(-size, +half): x+(-size)c - half*s, y+(-size)s+half*c. Other local(-size,-half): x+(-size)c + half*s, y+(-size)s - half*c. Code above should use:
```
lineTo(x+tail*c - half*s, y+tail*s + half*c)
lineTo(x+tail*c + half*s, y+tail*s - half*c)
```
Yes.
Maybe use nose=size*1.7, tail=-size*1.0, half=size*0.75. Boids ~12px long. 150 visible.
Hue from angle:
`let hue = (Math.atan2(b.vy,b.vx)*180/Math.PI + 200 + 360) % 360;` Avoid negative by +720.
Potential color palette could include red/green; okay.
Could use `ctx.shadowBlur=8` per boid but expensive; no.
Need maybe draw a small white nose pixel? no.

For `computeForcesAndStep(dt)` local alignment and repulsion metrics:
```
function step(dt) {
 const n=boids.length, p2=PERCEPTION*PERCEPTION...
 let alignSum=0, alignCount=0, speedSum=0, unitX=0,...
 let inField=0, radialSum=0;
 for (let i=0;i<n;i++){
   const b=boids[i];
   ...
   for j...
     let dx=boids[j].x-b.x;
     if(dx>width/2) dx-=width; else if(dx<-width/2) dx+=width;
...
     if(d2<p2 && d2>0.000001) {...}
...
   const fA=steer(...);
...
   let ax=...;
   if(pointer.active){
      let dx=b.x-pointer.x; ... direct
      const d2=...
      const r=repelRadius(); // compute once outside loop!
      if(d2<r*r) {
        inField++;
        const d=Math.max(Math.sqrt(d2),.001);
        const awayX=d>... ? dx/d : cos(i*...) ...
        radialSum += b.vx*awayX + b.vy*awayY;
        const strength=1-d/r;
        // desired direction away with slight tangential? no
        const steer=steerDirection(awayX,awayY,b,0.14)
        const gain=2.6*strength*strength + .25*strength; // at edge 0, center 2.85
        ax += steer.x*gain; ay...
      }
   }
   cap total:
   const am=Math.hypot(ax,ay);
   if(am>MAX_TOTAL_FORCE) scale
   b.ax=ax; b.ay=ay;
   // local alignment:
   if(neighborCount>0) {
      const avMag=Math.hypot(alignX,alignY); const vmag...
      const dot=(b.vx*alignX+b.vy*alignY)/(vmag*avMag)
      alignSum += clamp(dot,-1,1); alignCount++;
   }
 }
 const headingErrors...
 for b:
   b.vx += b.ax*dt...
   let speed...
   ...
   const oldX=b.x, oldY=b.y;
   b.x += b.vx*dt...
   wrap...
   let tx=b.x-oldX, ty=b.y-oldY;
   if(tx>width/2)tx-=width; etc
   const travelAngle=Math.atan2(ty,tx); const headingAngle=...
   const err=Math.abs(angleDifference(...)) in degrees
   b.headingAngle=headingAngle; b.travelAngle=travelAngle;
   speedSum += speed...
   headingErrSum...
 }
 metrics = {localAlignment: alignCount?alignSum/alignCount:0, meanSpeed: speedSum/n, headingErrorDeg: headingErrSum/n, inField, outwardSpeed: inField?radialSum/inField:0,...}
}
```
Need note steering direction helper uses current velocity:
```
function steerDirection(dx,dy,b,max) {
 const m=Math.hypot(dx,dy); if(m<1e-9)return {x:0,y:0};
 let sx=dx/m*MAX_SPEED-b.vx;
 let sy=dy/m*MAX_SPEED-b.vy;
 const sm=Math.hypot(sx,sy);
 if(sm>max){sx*=max/sm;sy*=max/sm;}
 return {x:sx,y:sy};
}
```
This returns acceleration in px/frame² (difference in velocity per frame). We then multiply by dt. Okay.
For separation sum, if sum zero due symmetry, helper returns zero.
Cohesion sum includes all neighbor relative positions; average center relative to b. Good.
Alignment sum velocities; normalized same as avg.
Weights maybe:
`ALIGN_WEIGHT=1.0`, `COHESION_WEIGHT=0.72`, `SEPARATION_WEIGHT=1.55`, `MAX_FORCE=0.055`, `MAX_TOTAL_FORCE=0.32`.
Cursor steer cap `0.16`, gain `2.5*strength+...`; at center 2.75*0.16=0.44, but total cap .32 so strong. At halfway strength .5, gain ~1.4*0.16=.224. Combined with flock .1 => cap .32. Good.
For field near radius edge, strength .1, gain maybe .275*0.16=.044, enough gradual.
Need differentiate "steer away from pointer" even if currently moving away: desired away with max speed; if already moving away at similar speed, steer may small. Fine.
Could add direct radial acceleration regardless of desired:
`ax += awayX * 0.18 * strength; ay += awayY*0.18*strength;` This guarantees outward force. Then use desired steering too. But bounded total. Let's do both maybe too strong. Simpler:
```
const steer=steerDirection(awayX,awayY,b,0.15);
ax += steer.x*(0.5+2.3*strength)*strength + awayX*0.07*strength
```
At edge strength 0 ->0. Center steer ~0.15*(2.8)=.42 +.07, capped. Fine. Need no discontinuities.
`gain = (0.3 + 2.2*strength) * strength` (at center 2.5, at halfway .7), steer max .14 => .35 center. Good. Add away radial .06*strength. Total cap .34.
Need field influences boids within radius only. Good.
Need radius and pointer wrap? Direct.
Need if pointer active on paused: no step, metrics stay from last running frame. That's okay. field count readout may not update until resume. But visible circle moves. Could perhaps call `measurePointerField()` in render/HUD update while paused, but no need.
Need field circle radius from `repelRadius()` computed once per step/render. Use function.

Need wrap position:
```
function wrapBoid(b) {
 if (b.x < 0) b.x += width; else if (b.x >= width) b.x -= width;
 ...
}
```
If dt substep max1 and speed <=3, one wrap enough. On resize scaling can produce >width maybe if oldW=0 no; use modulo robust:
`b.x = ((b.x % width)+width)%width`.
Use helper.
Need shortestDelta with width maybe tiny; fine.
Need create cluster positions with wrapping via `mod`.
Need reset fresh population maybe randomness from `Math.random`. Could use `crypto.getRandomValues`? no need.
Need maybe ensure no boids exactly same position leading d2=0. Random continuous almost impossible.
Need no network.

Need diagnostics:
```
function compactSample() {
 return boids.slice(0,4).map(b => ({
  x:+b.x.toFixed(1), y:+b.y.toFixed(1),
  vx:+b.vx.toFixed(2), vy:+b.vy.toFixed(2),
  h:+(b.headingAngle*180/Math.PI).toFixed(1),
  t:+(b.travelAngle*180/Math.PI).toFixed(1)
 }));
}
```
Need on reset assign heading/travel angle:
```
b.headingAngle=angle; b.travelAngle=angle;
```
`window.flockDebug`:
```
window.flockDebug = {
 get state(){return {population:boids.length,paused,width,height,simTime,metrics:{...},pointer:{...},radius:repelRadius()};},
 snapshot(){ return boids.map(...);},
 sample: compactSample,
 pause:()=>setPaused(true),
 resume:()=>setPaused(false),
 reset:resetFlock,
 setPointer(x,y){ pointer.active=true;...; render(); logDiagnostic('pointer-set')},
 clearPointer(){...},
 log:()=>logDiagnostic('manual'),
 advance(frames=60){ if(paused) return; for(i=0;i<frames;i++) step(1); simTime +=frames/60; render(); }
};
```
Need avoid `advance` if paused maybe still step? For tests perhaps let step regardless:
```
advance(frames=1){ for... step(1); simTime += frames/60; render(); return ...}
```
But if used while paused could break freeze; only debug function, okay. Better not expose step to avoid confusion. Could still.
`state` includes `sample`.
Need body dataset update:
```
function updateHud() {
 status...
 metrics.textContent=...
 radiusLabel.textContent=Math.round(repelRadius());
 fieldLabel.textContent = pointer.active ? `${metrics.inField} inside · outward ${metrics.outwardSpeed...}` : 'pointer offscreen/outside';
 probe.textContent = JSON.stringify({state..., t..., sample...});
 document.body.dataset.population=...
}
```
Need metrics at init perhaps set defaults:
`let metrics={localAlignment:0, meanSpeed:0, headingErrorDeg:0, inField:0, outwardSpeed:0};`
After reset maybe compute initial mean speed and alignment via a `measure()` or call `step(0)`? We could call `analyzeOnly()` but simpler call `computeForcesAndStep(0)` which computes forces/metrics but does not update positions or velocities (dt=0). However it will set accelerations and travelAngle from zero-length delta -> atan2(0,0)=0, creating heading error wrong. Could avoid. Initialize metrics manually:
```
let speedSum=0; for b...; metrics.meanSpeed=...
```
Local alignment can start 0; after first frame updates. Fine.
Could call `computeDiagnostics()` separate function to calculate neighbors without forces; unnecessary.
Need `updateHud` on reset and on pause/resume/resize.

Need log diagnostics every 1.5 sec:
```
let lastLogTs=-Infinity;
function animationLoop(ts) {
...
 if(ts-lastLogTs >= 1800){ logDiagnostic('sample'); lastLogTs=ts; }
 ...
}
```
At ts maybe ~100, first log at 100; fine. Need reset sets lastLogTs=performance.now() maybe no. Fine.
Need log sample string maybe long but okay. Console output truncates? 4 boids JSON ~300 chars, fine.
Need log pointer state:
```
`pointer=${pointer.active ? `${x},${y}` : 'off'} radius=${...} field=${metrics.inField} outward=${...}`
```
This helps verify.
Need log pause/resume events with positions, and periodic logs while paused show same positions. Good.

Need browser test flow:
1. Write file.
2. browser reload, inspect initial DOM/console.
3. screenshot initial.
4. perhaps wait? There is no wait action except motion perhaps captures frames over time. Use browser motion maybe returns frames and console after interval.
5. inspect again to see console logs at several moments maybe.
6. click/drag pointer at center, screenshot/motion. Check field circle and metrics.
7. click pause button, inspect/screenshot; wait via motion; compare sample positions in console logs to verify freeze.
8. click resume, inspect/motion; check positions change.
9. click reset, inspect population.
10. resize? Tool doesn't have resize action, but could use browser `key`? no. Maybe can call `window.dispatchEvent(new Event('resize'))` via debug or use `browser` with `action:"type"`? Not needed. Could maybe use browser inspect with `text` as JS code if tool supports; need test. Could use `#` debugging links to resize? No. We can use browser tool `motion` maybe includes resize? likely not.
Need maybe add a button to simulate resize? Not required. Could use CSS responsive and JS listener. Could manually test by using browser tool maybe `action:"inspect", text:"window.resizeTo(...)"` if text supports evaluation. We'll see.

Potential browser tool screenshot initial output may need transaction of logs. Let's write now.

Need ensure edit/write correct syntax. We'll use write with full file. Long but manageable. Let's draft.

HTML:
```
<!doctype html>
<html lang="en">
<head>...
<style> ... </style>
</head>
<body data-flock-state="running" data-population="150">
<canvas id="flock" aria-label="..."></canvas>
<div class="panel" id="controls">
...
</div>
<div class="hint" aria-live="polite">...
</div>
<div id="probe" class="sr-only" aria-hidden="true"></div>
<script>
(() => { ... })();
</script>
</body>
</html>
```
CSS:
```
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;...}
canvas{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none;cursor:crosshair}
.panel{position:fixed;top:clamp(10px,2vw,20px);left...; z-index:2; display:flex;...; pointer-events:auto; background:rgba(6,12,25,.72); border...; backdrop-filter:blur(14px); box-shadow...}
```
`backdrop-filter` okay no external.
Brand animated dot maybe CSS keyframes; not necessary but nice. Could use `@keyframes pulse`.
Buttons with min-width 84, focus-visible outline.
Status live green, paused amber. Hint.
`.sr-only` standard clip.
`@media (max-width:700px)` panel align; readout border etc; hint font smaller. `@media (max-height:420px)` hide hint maybe.
Need no network.
Could use `font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace` for technical.

Script details exact.

Let's compute `wrapDelta` as function returning maybe object creates many objects in inner loop—avoid allocation. We can inline in neighbor loop and travel delta. For pointer no wrap. For helper `shortestXY(dx,dy)` maybe used in create? We can implement `wrapScalar(d,size)`.
```
function wrapDelta(d,size) {
 if(d > size*0.5) return d-size;
 if(d < -size*0.5) return d+size;
 return d;
}
```
Call twice. Good.
`mod(v,size){return ((v % size)+size)%size;}`
`limitVector` allocation; steer returns array? To reduce GC, use a reusable object? 150*3 calls per frame ~450 objects, fine. Could use `steerInto(dx,dy,b,max,out)` with out object reused. But constraints not huge. We'll use `steer` returning `[x,y]` arrays; 450 arrays/frame at 60fps ~27k/sec, okay but avoid. Use object `const steerResult={x:0,y:0}` cannot reuse if need combine sequentially; can just call and immediately add:
```
let s = steer(...); ax += s.x*...; ...
```
Fine.
Maybe use `function addSteer(vecX,vecY,b,max,weight,acc)` returning... no need.

Need metrics local alignment uses sum velocities and current b velocity; denominator `magA * magV`; if align sum zero skip.
Need field radial metric uses direction `awayX` based on dx. If d=0 use deterministic `Math.cos(i*2.399)`.
Need cursor distance direct—could use b.x-pointer.x; no wrapping.
Need pointer radius once:
`const r=repelRadius(); const r2=r*r;`
Need count inField computed only when pointer active. If pointer inactive, `metrics.inField=0`.
Need per boid acceleration cap:
```
const aMag=Math.hypot(ax,ay);
if(aMag>MAX_TOTAL_FORCE){...}
```
`MAX_TOTAL_FORCE=.34`.
Need speed clamp after update; if speed > MAX_SPEED etc. `MIN_SPEED=1.05`.
Need `dt` might be 0; still compute forces and heading error from zero movement. In animation skip step if dt<=0. Fine.

Need update positions with `mod` maybe modulo:
```
b.x = mod(b.x + b.vx*dt,width)
```
Store `oldX`. Travel delta via wrapScalar:
```
let tx = wrapDelta(b.x-oldX,width)
```
If using mod, oldX near W and new x near0, b.x-oldX negative large -> add W positive. Good.
`b.travelAngle=Math.atan2(ty,tx)`; if dt tiny still positive.
`angleDiff`:
```
function angleDifference(a,b){ let d=a-b; while(d>Math.PI)d-=TAU; while(d<-Math.PI)d+=TAU; return d; }
```
`headingErrorDegrees = Math.abs(...)*180/PI`.
Need velocity normalized for polarization maybe not needed. Could add `polarization` perhaps. We'll include to show coordinated groups? Local alignment enough. Compute `unitSumX/Y` after speed clamp.
Need `metrics.polarization = hypot(unitSumX,unitSumY)/n`.
Need `metrics.meanSpeed`.
Need update HUD every 160ms:
```
const t = performance.now();
if(t-lastHudAt>180){ updateHud(); lastHudAt=t; }
```
Need `logDiagnostic` uses `metrics` object maybe copy.
Need `body.dataset.sample` perhaps JSON of 2 boids, maybe too long but okay. Probe hidden text can hold more. Set:
```
probe.textContent = JSON.stringify({t:...,state:...,metrics:...,sample:compactSample(3)})
```
`compactSample(count=4)`.
Need `document.body.dataset.sample` perhaps just first boid coordinates:
`body.dataset.sample = compactSample(2).map(...).join('|')`. Could omit.
Need `<span id="fieldReadout">` in hint to update.
Potential user-visible text:
```
<div class=hint><span class=dashed-swatch></span> Pointer field: <strong id="radiusLabel">140 px</strong>. <span id="fieldReadout">Move over canvas to repel.</span><span class=shortcuts> P pause · R reset</span></div>
```
Need field circle exact.
Panel metrics:
```
<div class=readout>
 <span id=stateLabel class="status live">● LIVE</span>
 <span id=metricsLabel>alignment -- · speed -- · orientation 0°</span>
</div>
```
Could show population in brand.
Need status dot perhaps CSS. `stateLabel` can be "LIVE" with pseudo-element.
Need on pause state class.
Need reset button id.
Need `aria-live` maybe not on frequently updating metrics; status only. Use `aria-live=polite` on state label. Good.

Need `setPaused(true)` calls `render()` so circle and boids same positions; fine. `updateHud()` after.
Need `render()` after reset. `resize()` also calls render but if boids empty background only. call order:
```
let width=0,height=0,dpr=1,bgGradient=null;
function resizeCanvas(){ const oldW=width,...; width=...; ...; if(oldW>0...) scale; ...; bgGradient=...; updateHud(); render(); }
...
window.addEventListener('resize',resizeCanvas);
resizeCanvas();
resetFlock(false); // create and render
requestAnimationFrame(animate);
```
`resetFlock(log=true)` calls `render()`, `updateHud()`, `logDiagnostic`.
Need `updateHud()` uses DOM elements defined. Fine.
Need `render()` uses bgGradient maybe set.
Need resize before reset scales empty.
Need `repelRadius()` uses width/height maybe >0.
Need `logDiagnostic` on reset called before animation; `performance.now()` etc.
Need animation first timestamp handling:
```
let lastFrameTs=null, lastLogTs=-Infinity,lastHudTs=-Infinity;
function animate(ts){
 if(lastFrameTs===null) lastFrameTs=ts;
 const elapsed=Math.min(50, Math.max(0, ts-lastFrameTs));
 lastFrameTs=ts;
 if(!paused && elapsed>0){
   let dt=elapsed/(1000/60);
   while(dt>1e-6){ const h=Math.min(1,dt); step(h); simTime+=h/60; dt-=h;}
   render();
 }
 if(ts-lastHudTs>180){updateHud(); lastHudTs=ts;}
 if(ts-lastLogTs>1800){logDiagnostic('sample');lastLogTs=ts;}
 requestAnimationFrame(animate);
}
```
Important: `ts-lastFrameTs` first 0, no step. Good. While paused, lastFrameTs updates. On resume no giant jump.
Need update metrics after step; if paused no updates.
Need reset while running sets simTime=0 but lastFrameTs remains current; next elapsed normal.
Need `step()` uses `pointer.active` and radius. Need if pointer inactive metrics field reset.
Need pointer event render while paused:
```
function activatePointer(e) {
 pointer.x=e.clientX; pointer.y=e.clientY; pointer.active=true; ...
 if(paused) render();
}
```
Need pointer moving while running can render next frame, no immediate render needed. But for browser screenshot maybe tool captures after event at next RAF. Fine. Could render immediate for responsiveness. Do it unconditionally perhaps extra render between frames. Fine.
Need `pointerdown` perhaps event from button triggers field; okay.
Need `pointerup` for touch deactivates and render if paused. For mouse leave:
```
function deactivatePointer(){ if(!pointer.active) return; pointer.active=false; if(paused) render(); }
window.addEventListener('blur',deactivatePointer);
document.addEventListener('mouseout', e=> { if(!e.relatedTarget) deactivatePointer(); });
```
`mouseout` with `relatedTarget=null` can occur moving from iframe? okay.
Need pointer active after mouse leaves canvas into controls: relatedTarget exists, stays. Fine.
Need `window` pointermove global works.
Need direct `setPointer` debug.

Need CSS hover etc. Use no external assets.

Let's write.

Need now browser inspect initial and console. Use browser reload first maybe then inspect. Need know output. Let's call parallel? browser actions sequential likely; can do reload then inspect perhaps parallel not safe. Call reload.

Interesting initial screenshot shows pointer field at 0,0 active! Why? `reload` console second sample shows pointer=0,0 and screenshot dashed circle top-left. Browser tool likely dispatches pointermove to 0,0 on load. That's okay—it counts as pointer active. But initial field visible at corner, and boids near corner maybe none. Need maybe pointer active state from browser default; fine. But perhaps cursor influence should only activate on actual pointer move, and browser tool has pointer at 0,0 by default. Our window pointermove event likely fired automatically at load. We could avoid if x=0,y=0? But then browser pointer interactions at 0,0 could be ignored; not needed. However requirement "resume flocking after pointer moves away" means when browser pointer remains at 0,0, field active but no boids near. Fine. Could maybe treat pointer inactive until genuine user pointer movement; browser default event at 0,0 is genuine. Fine.

Need note reload output indicates DOM metrics alignment 83% at t=.17, good coordinated movement. Triangles seem point right-ish? Screenshot top clusters: blue triangles appear pointing right? Need inspect orientation. They look like triangles with point to right, likely yes. Some yellow ones pointing down-right. Good.

Need capture motion over several moments and console. Use browser action motion likely returns frames. Let's call perhaps motion maybe no params returns sequence. Need use it.

Motion frames show clusters moving, triangles point direction (green up for upward velocity, purple down, orange left). But there are issues:
- alignment metric reaches 100% almost always, perhaps too coordinated / rigid groups. But still okay. Could be due local alignment computed with sum velocities and clusters homogeneous; a valid flocking simulation. Separation/crowding? triangles seem somewhat spaced but a few overlaps. Cohesion strong enough groups remain. We can tweak weights to make more organic but not necessary.
- Screenshot shows a weird persistent field circle at top-left due browser pointer at (0,0), labeled "REPEL 140PX" partly clipped. It's visible and okay, but maybe initial output could be cleaner. Since requirement pointer influence radius visible/documented, okay. But pointer at 0,0 means field influences boids near top-left corner, and field count varies. Fine.
- More concerning: metrics `alignment 100%`, `speed 2.64`, orientation 0 — okay.
- Some triangles appear green all pointing up; yes.
- Need cursor interaction test with pointer actions. Need move pointer to a flock, perhaps center or top-right cluster, then check outward metric and visual. Use `browser` action `drag` from one point to another or click. Need know schema: click x,y. We can click center of a cluster e.g. (600,300) at time now. But flock positions have changed during motion; at final frame t=8.78, central green cluster around x=560,y=250, bottom-right around x=900,y=700. We can use drag from (600,300) to (650,350) to activate field and perhaps push boids. Need perhaps set pointer via debug hook if browser inspect with text supports JS eval. But requirement says "Try cursor interaction with available pointer actions" so use actual click/drag. We'll use `drag` with coordinates from center maybe. But after drag pointer may be at target and field circle visible. Then screenshot / motion. Could use click to place field at specific cluster. Need perhaps pointeractive remains from 0,0; moving will update.

Let's call `browser` action drag x=600,y=300 toX=680,toY=320 (or click). Need perhaps drag action moves mouse with steps and triggers pointermove; then field at end. Use screenshot after. Let's do drag maybe just from center to center? Need maybe from one point to another. Use click at (600,300) then screenshot. But click will trigger pointerdown/up, field stays active for mouse. That's simplest. Use `click`. Then maybe motion to see repulsion over time. Need perhaps pointer position is at cluster; field circle visible. Do click, then inspect perhaps. Let's call click at center of visible central cluster based current frame x=600,y=250. Use y=320 maybe. Since simulation moves continuously between calls, cluster may move upward fast ~2.6 px/frame = 156 px/s; by time click and screenshot delayed ~0.5 sec, cluster could be 80px higher. Need field radius 140, still likely close. Could pick x=600,y=220 perhaps. Need update from current time maybe use browser screenshot first to see current. But motion frames are at t up to ~8.8; after tool call perhaps app still running for seconds while we reason. Could use reload to reset and then quickly click known initial cluster from screenshot: initial screenshot top blue cluster around x=1000,y=150; second transition maybe. Better perhaps use debug hook via hash? Could use `browser` action click at center (600,400) and then motion; field may catch some flock eventually as they move/wrap. Need "cursor interaction" check can use field count/outward. Better position field in a densely occupied path. We can use `drag` across screen, which actively pushes boids along path; field at end though. Need perhaps pointer action with `drag` from x=100,y=100 to x=1100,y=700 to cover many boids. Then field circle at end; likely some near. Or use `click` at a known cluster from current screenshot. Let's take fresh screenshot now to see current, then click accordingly. But time passes; still okay. Use screenshot action maybe returns image and console. Let's call screenshot.

Flock eventually globally aligns (polarization .99) and all clusters merge-ish into one giant flock. This is still "form moving groups" but perhaps too aligned; requirement combine separation, alignment, cohesion. The algorithm does. Could perhaps reduce alignment/cohesion to retain multiple moving groups, but not necessary. Yet visual at t=23 shows a single large flock and all headings right, which is coordinated movement. Fine.

Need cursor interaction. Current flock around x=500-1100,y=200-500 moving right. Click at center of flock e.g. (750,360). Then screenshot after maybe ~0.5s; field will be there. Need perhaps use `drag` from (750,360) to (750,360)? Tool action drag might require end different; click simpler. Use click at (750,360). Then inspect/motion. Let's do click and screenshot/motion perhaps use multiple parallel? Need sequential. Could call click then motion. Let's first click.

Interesting click output DOM says pointer=0,0 but screenshot shows field at 750,360. Why? The click action likely moved pointer to 750,360, screenshot captured immediate field, then `mouseout` event perhaps cleared pointer due pointer leaving? DOM at end says pointer x=0, y=0 active=true? Actually probe pointer object `{"x":0,"y":0,"radius":140}`—field in screenshot at 750,360 implies pointer state was 750,360 at render, but DOM output generated after click? Maybe tool click uses touch or pointer events with `pointerup` that clears pointer for non-mouse; our pointerup clears active, then perhaps a default pointermove at 0,0 after click sets active. The probe says pointer x=0,y=0 active true because maybe pointer object includes active but JSON omitted? Wait probe data only includes pointer if active; it shows `{"x":0,"y":0,"radius":140}` so active true. Screenshot field at 750,360 perhaps captured immediately after click before pointer reset to 0,0 by a pointermove event after pointerup? That seems browser tool's mouse may return to (0,0) after click? Need understand. Maybe browser click action performs mouse click at coordinates but then resets virtual mouse to 0,0, causing pointermove to 0,0. This would clear field circle at 750 after next render, though screenshot attached appears maybe from frame +0ms at click time. DOM from after action shows pointer 0,0. So pointer interaction via click is transient, not persistent. Need perhaps use drag action which may move pointer and leave it at end? But likely tool also resets to 0,0. Could use `type` or key. Need maybe use debug hook `setPointer` via keyboard? We can perhaps use browser inspect with `text` evaluating JS. Let's see if `inspect` with a text expression like `window.flockDebug.setPointer(750,360)` does anything. But requirement "with available pointer actions" says we should try actual pointer actions; we did. We can additionally use debug hook to hold pointer field for observable effect. But perhaps mouse position resets due browser tool; need maybe use `drag` to repeatedly send pointermove events while tool is active, and capture motion frames during drag. Could call motion after drag? Need maybe tool's pointer stays at end during motion? Let's test.

First, need fix potential initial/after-click pointer=0,0 active issue: browser tool likely sends mouseout/pointermove to 0,0 automatically. Our `document mouseout` clearPointer if no related target; then subsequent pointermove to 0,0 activates. So pointer remains at origin, causing field circle at top-left. That's not harmful but perhaps could interfere with verification. For an actual user, pointer won't teleport to 0,0. Fine.

Need test cursor effect quantitatively. Could use `window.flockDebug.setPointer` if browser tool supports evaluating JS via `inspect` text. Let's try `browser` inspect with text that is a JS expression perhaps tool may treat as selector? We need examine. Call:
`{"action":"inspect","text":"window.flockDebug.setPointer(600,400)"}`. If it evaluates, console should show pointer-set. Need see. But tool schema says text max 2000, likely passed to type/key or maybe inspect uses it as selector/JS. Could be harmless. Let's test.

Interesting `inspect` with text did evaluate? The console now shows pointer=750,360 from t=29.05 onward. It appears the click actually set pointer to 750,360 but DOM initially reported 0,0 due perhaps timing of poll. Wait no `pointer-set` console log not shown, and log at t=29.05 has pointer=750,360; so click set it. It might have taken effect after inspect call. So maybe `inspect` text ignored; click did set pointer but initial DOM was stale from before event? The screenshot from click showed field at 750,360; yes. By the time of inspect call, pointer remains there. Good. No `pointer-set` log means inspect text ignored, fine. Good.

We can see field circle and boids avoiding it: screenshot shows a hollow region around pointer and boids curving around right/left sides; field count 1 and outward +0.85. This is good cursor interaction. The field circle is visible. Need test resume flocking after pointer moves away: we can call debug clearPointer or perhaps browser click somewhere away? Requirement says "They resume flocking after pointer moves away." Our force is conditional, so algorithmically yes. Could verify by moving pointer to a far location and watching field count zero and local alignment high. Need perhaps use `click` at e.g. (20,780) or `drag` to outside? Window movement away from flock but field still active at new location. Need maybe use `browser` action drag from (750,360) to (100,700), then see field at bottom-left and boids perhaps no longer avoiding former region. But pointer might still influence some boids at new location. Could use `window.flockDebug.clearPointer()` via inspect text maybe not eval. Could use keyboard short "d" doesn't clear. Could add a keyboard `c` to clear pointer? Not needed for user; but for testing we can use browser mouseout via action maybe scroll? Need perhaps use drag to coordinates outside canvas? Schema x range 0-1200, y 0-800; can drag to 1199,799. Field remains partly visible. Could use `window` blur by maybe browser reload? not. Could add debug clear pointer via keyboard `c` to facilitate tests, but that's internal. We can also use `key` action with text perhaps "r" resets and pointer remains. To clear pointer, `window.blur` could be triggered by opening a new tab? no.

Could call `browser` action `key` with text "c" if we implement shortcut. But no need; we can simply click at a location far from flock and observe field count 0 and boids rejoin. We'll need maybe use actual pointer action. Let's use drag from (750,360) to (600,100) maybe field moves away from current flock; screenshot after ~2 sec. Need maybe field near top central where boids may pass. Could drag to (50,750), away from flock. Then examine console logs: pointer=50,750, inField maybe eventually 0 and alignment remains 100%. Need "resume flocking" perhaps visible that boids cross former field region. Could use motion frames to see. We'll do drag from center to top-left or bottom-left. But pointer at (0,0) default influences corner; moving to (50,750) likewise. Use drag to (20,780) with field mostly offscreen. Need maybe browser `drag` action. Let's try.

Drag moved pointer to bottom-left; field partially at corner. Console captured cursor influence at old pointer during drag with inField up to 47 and outward -1.10 then +0.27 then +1.58, indicating boids initially inward then turned outward. Good. After moving away, local alignment 98-100%, field count 0 at final. Nice.

Need test Pause/Resume. Use click Pause button at approx (210,47). But pointer will set field at panel location; fine. Need inspect state and sample positions at two moments paused. Browser click returns DOM/console; then call motion or inspect after ~2 sec. Console logs every 1.8 sec while paused should show same sample positions. Need maybe click pause and then motion, compare frames and logs. Let's do click at (210,47). Need perhaps after click button text becomes Resume. Use browser click then motion. Need maybe click action will trigger pointer field at button and reset to 0,0? But DOM should show paused. Let's call click.

Pause works. Need verify freeze over time via motion and console logs. Use browser motion. Need perhaps pointer field remains at (210,47), drawn around button. While paused, pointer move events from tool maybe? motion likely no pointer. It captures frames, and periodic logs with same t=57.68 and same sample if all frozen. Let's call motion.

Great pause freeze verified visually and via identical logs. Need resume. Click Resume at same (210,47). Then motion perhaps check positions change. Need perhaps pointer field stays at button, causing repulsion near top-left; fine. Click and motion. Let's do click resume.

Resume click shows slight movement in triangles compared to paused frames, good. Button text Pause, status LIVE. Need perhaps verify continued motion with motion call, but console logs after resume not yet sampled. Could call motion and compare positions. Need also test Reset and perhaps resize. Also need perhaps fix a clear problem discovered: pause screenshot shows field circle overlapping controls and label clipped at top; not a functional issue. Another issue: pointer field counting 15 boids inside while pointer at 210,47 but screenshot shows no triangles within circle—metrics stale from last running frame. Because pointer moved to Pause button while still running just before pause; metrics `inField 15` maybe from boids near top-left that were not visible? Wait screenshot circle centered 210,47 radius140, bottom of circle y187, no triangles inside except maybe at top edge? This is stale from last simulation frame while pointer was still at 30,770 perhaps? Actually pause log pointer=210,47 inField=15 outward=.48; maybe 15 boids near top-left circle at time of pause, but screenshot shows only a few triangles at top edge and bottom left around y550—none inside. Why? Could be because `pointer.active` changed to 210,47 on pointerdown, then last frame before pause computed inField from boids near (210,47)? Maybe there were 15 boids near that circle but screenshot shows only a few at y0, x200, perhaps rest just offscreen? That seems odd. Let's inspect: canvas ghost drawing could have some boids near top edge y0, x200 (wrapped from y790). With pointer at y47, radius140, boids at y790 (toroidally 10px from top) should be within direct distance? Our pointer force uses direct Euclidean distance, not toroidal, so boids at y790 are far from pointer at y47; shouldn't count. But metrics may be stale from previous pointer at 30,770 where 15 boids near bottom-left. Yes, pointer moved to button (210,47) during the click, then step perhaps not run before pause, so metrics are from previous pointer at (30,770). setPaused freezes state and metrics before reevaluating. Thus HUD shows "15 boids inside · outward .48" but field circle at 210,47 and no boids inside. That is a minor inconsistency, not required. Could fix by updating field metrics on pointer movement or clearing pointer metrics when pointer changes while paused. But not necessary. Yet perhaps more importantly, when clicking Pause, pointer field becomes active over controls and remains there. After resuming, pointer force will repel boids near controls. That's expected if pointer stays there. To test "resume flocking after pointer moves away" perhaps pointer should be deactivated when over controls. Maybe we should prevent pointer influence while pointer is over control panel (interacting with controls), so click on Pause doesn't introduce a repulsion field. That would make semantics cleaner: pointer influence only when over canvas, not over controls. But global pointermove currently sets active even over controls. Requirement says "within cursor-influence radius steer away from pointer"; could include over controls but not needed. We can detect `e.target === canvas` (or controls containment) and clear pointer when over controls. However, pointer events on canvas with overlays; if target is controls, set active false. That avoids field circle over buttons and stale metrics. But when pointer enters controls, clearPointer would remove field; when leaves back to canvas, pointermove sets active true. Need add `controls` element and check `controls.contains(e.target)` perhaps. Also `id=hint` pointer-events none so canvas target. This is a functional improvement. But does browser tool click on Pause trigger pointerdown event target button and then pointerup; we can ignore. Need no circle at top-left after pause if pointer over controls. Need clear pointer field when interacting with controls. Should we do it? Might be nice. But could make verification of pointer field at 0,0 initial weird; target canvas so active. Fine.

Need perhaps make pointer radius visible/documented even when pointer inactive: HUD says 140 px. Good.
Need cursor force "resume flocking after pointer moves away": if pointer moves away from flock but still over canvas, force zero for boids not in radius. Good.
Need perhaps reduce global convergence to one flock? The simulation at t=57 has multiple groups but all near bottom, perhaps okay. Separation: some boids are dense but not overlapping. Cohesion holds groups. Fine.
Need perhaps test Reset: click Reset button at around x=307,y=47. After reset, generation increments, simTime=0, population 150. Need perhaps while paused? We resumed. Click Reset and inspect. Need maybe fix controls pointer handling first, then recheck.
Need potential issue with heading angle diagnostic: initial heading values >360 (e.g. 373.5), but travel=373.5 too, okay. Color hue uses angle range -π..π + 560 yields [200,920) mod360 but JS `%` positive because 560-180=380 positive, okay.
Need potential issue resize: `pointer.active=false` in resizeCanvas. Browser tool could dispatch resize but no way to test. Could maybe use `window.flockDebug` and `browser` `key` action with text? Need determine if `inspect` text can evaluate JS—earlier we passed `window.flockDebug.setPointer` but no `pointer-set` log, so no. Could perhaps use `browser` action `type` with text into a hidden input? none. Could use keyboard shortcut to simulate resize: add a debug shortcut `z` that changes CSS viewport? Can't change window.innerWidth directly. Could perhaps call `window.dispatchEvent(new Event('resize'))` from keydown handler on key `z`, but that just recomputes same dimensions. Could have a hidden input that accepts width/height and use `type` action. Overkill. Maybe use browser's `key` action to trigger `window.resizeTo(600,400)`? Need perhaps browser tool's viewport fixed at 1200x800; `resizeTo` may not work in headless. We could add a debug hook to simulate dimension changes by overriding `window.innerWidth`? That's read-only but can define property. Need not. We can test resize logic by static code review and perhaps use `node` mock, but requirement says keep population/controls usable after resizing; our CSS and resize event should suffice. Could use browser tool `scroll` action maybe triggers viewport? no. Could perhaps use `browser` action `key` with text "1" to call a test resize event via keyboard. We could add keyboard shortcut `v` to set a compact viewport by scaling canvas internally to e.g. 600x400 without changing `window.innerWidth`. But then CSS controls don't actually change. Better maybe use direct browser `inspect` with text as CSS selector? no. Could use `action:"type", text:"..."` on focused document with no input; browser tool may dispatch keyboard events, not JS. We can leverage keydown handler to trigger a debug resize simulation on a key. For verification only, implement key `z` to call a `simulateResize(newW,newH)` that sets width/height and canvas style dimensions to those values while leaving window viewport; but then canvas won't be full-screen and controls may overflow; not a true test. Could perhaps create an iframe? no.

Maybe browser tool itself has viewport resize via action `scroll`? no explicit. Could use `browser` action `key` with text `window.resizeTo(700,500)`? key text likely typed into page, not eval. Could use browser `type` action with text that gets typed into URL or page; no.

Could add an internal debug function accessible via a `data:` URL? no network. Could use `location.hash` to trigger a resize simulation; browser reload maybe can't set hash. But we can create a clickable element with `href="#resize"` and use browser click, then hashchange handler triggers a test. Too much. Not needed; we can state resize behavior remains unverified due tool no viewport resize. But addendum asks "briefly report what actually checked and which behaviors remain unverified." We can include resize not directly tested. Need maybe test controls responsive via static CSS; okay.

Need maybe use `node` to parse HTML and check no external refs; can use bash grep. Need maybe check file present and no errors. Console shows no errors. Good.

Let's consider whether to modify pointer handling over controls. The current stale field metrics when clicking controls is a clear-ish problem (HUD shows 15 boids inside and outward while visual circle has zero). It could be misleading. We can fix with a `measurePointerField()` function that computes `metrics.inField/outwardSpeed` from current boids and pointer any time pointer changes, particularly while paused or before step. This would also make HUD accurate after pointer move. Need not recompute full forces. Implement:
```
function measurePointerField() {
 if(!pointer.active) return {0,0};
 const r=repelRadius();...
 for b: dx=b.x-pointer.x... if d2<r2: count; away... radial...
 metrics.inField=count; metrics.outwardSpeed=...
}
```
Call in `setPointerFromEvent` after updating pointer, in `clearPointer` reset to 0, in `setPaused(true)` maybe, and debug setPointer. `updateHud` then reflect. But when paused, pointer move should update field readout even if boids static. This is useful. Need not alter simulation state. Could also call on pointer move while running to immediately update. Step will recompute anyway. Need perhaps handle boids near edges with toroidal pointer? Our force uses direct distance, so measure direct. Good.
Also ignore pointer over controls:
```
const controls = document.getElementById('controls');
function setPointerFromEvent(e) {
 if (e.target instanceof Element && controls.contains(e.target)) { clearPointer(); return; }
 ...
}
```
But `window.pointermove` events when moving over panel will clear. However after clicking Pause, pointerup event on button triggers our `pointerup` listener only for non-mouse; no reactivation. Good. Then field disappears. But initial pointer at 0,0 maybe over panel? Panel starts x20,y20, so (0,0) is canvas. fine.
Need maybe if pointer over hint (pointer-events:none, target canvas), active.
Need if pointer leaves window, document mouseout clear. Fine.

Need perhaps treat pointer over controls as inactive; when pointer moves back to canvas, pointermove on canvas sets active. Good.
Need maybe field circle doesn't overlap controls now, cleaner. Could test pause/resume again after change with reload. But we've already verified; need recheck affected behavior. Addendum says fix clear problems and recheck affected behavior. We'll do a quick reload, click Pause, inspect, resume, perhaps test field and pointer. Need keep time budget. We're at maybe 10 min? Plenty. Let's implement measurePointerField and controls ignore. Need also maybe improve `clearPointer` to set metrics inField/outwardSpeed=0 when not simulating. On resize, clearing pointer should also reset field metrics. Could call `measurePointerField` after pointer.active=false. Need careful not log or render recursively. Let's design.

Add `const controls = document.getElementById('controls');` at top.
`measurePointerField()`:
```
function measurePointerField() {
 if (!pointer.active) { metrics.inField=0; metrics.outwardSpeed=0; return; }
 const r=repelRadius(), r2=r*r;
 let count=0,outward=0;
 for (const b of boids) {
   const dx=b.x-pointer.x,dy=...
   const d2=...
   if(d2<r2) {
      const d=Math.sqrt(d2);
      let ax,ay;
      if(d<0.001) { ... } else ...
      count++; outward += b.vx*ax+b.vy*ay;
   }
 }
 metrics.inField=count; metrics.outwardSpeed=count?outward/count:0;
}
```
Could reuse deterministic fallback with b.id. Fine.
Call in `setPointerFromEvent`:
```
if (e.target instanceof Element && controls.contains(e.target)) { clearPointer(); return; }
...
measurePointerField();
if(paused){updateHud();render();} else { updateHud(); } // field count immediate
```
Need maybe if running, updateHud every call on pointermove can be many, but fine. Could update only on paused; field count will refresh within 180ms via animate anyway. But calling updateHud on every pointermove (dozens per second) okay.
`clearPointer`:
```
if(!pointer.active && metrics.inField===0) return;
pointer.active=false; measurePointerField();
if(paused){updateHud();render();}
```
Need avoid if pointer inactive but metrics stale (e.g. resize), still clear metrics. So condition maybe just set:
```
const wasActive=pointer.active;
pointer.active=false;
measurePointerField();
if(paused || wasActive){updateHud(); if(paused)render();}
```
But animate updateHud while running every 180ms. Fine.
`resizeCanvas` sets `pointer.active=false; measurePointerField();` before updateHud/render. Need avoid boids empty fine.
`setPointer` debug calls measurePointerField.
`setPaused(true)` could call `measurePointerField()` to sync. But if pointer over controls, setPointerFromEvent would clear before click callback? Event order: pointerdown on button -> window listener `setPointerFromEvent` sees target in controls -> clearPointer. Then click event toggles pause. So fine.
`step` already recomputes metrics including field; no need call measure.
`clearPointer` when mouseout running should set metrics to zero immediately; step will recompute next frame. Fine.
Need perhaps ignore pointer events from `resetBtn` etc; controls.contains works.
Need pointerup for touch on controls: clear already.
Need `e.pointerType` maybe if undefined; okay.
Need check `Element` global exists in browser; yes.
Need perhaps `controls.contains(e.target)` where target is `window` (not Element) on pointermove? Usually Element. We check `e.target instanceof Element`.
Need perhaps field circle should be hidden while pointer over controls; yes.
Need maybe when browser click at Pause, pointerdown clears field and then pointermove maybe from tool at 0,0 resets active after click? If tool resets to 0,0, field returns at corner. That's okay. But if pointer stays at button, no field.
Need updateHud fieldReadout when pointer inactive: "move the pointer over the canvas". Good.
Need `measurePointerField` called when `resetFlock` with pointer active? reset creates fresh boids, metrics manually sets inField=0; if pointer active, HUD may be stale until next step. Call measurePointerField after metrics assignment. Could do.
Need `setPaused` when paused: call measurePointerField before updateHud/render. Good.
Need `clearPointer` render when running? If pointer field disappears, next animation frame will render without it; fine. If paused, render immediate.
Need perhaps `setPointerFromEvent` when running and pointer over controls calls `clearPointer`, which if paused false doesn't render immediate; next RAF does. Fine.
Need maybe `pointer.active` can be true with pointer.type not used; okay.

Let's edit with multiple targeted replacements. Need ensure no overlapping. We'll make one edit call with multiple disjoint entries. Use exact text. Need not rewrite whole file. Let's identify locations:

1. Add controls const after stateLabel etc:
```
const canvas...
const pauseBtn...
...
const probe...
```
Add `const controls = document.getElementById('controls');`

2. Add `measurePointerField` after `compactSample` maybe. But calls from `setPaused` etc defined later; function declaration hoisted, fine. Could add after `angleDifference`/before repelRadius. Need use `metrics` and `boids`, both initialized later? Function called after initialization, fine. Add after `angleDifference`:
```
function measurePointerField() { ... }
```
But `repelRadius()` declared later as function declaration, hoisted. fine.
Could put after `compactSample` and before `updateHud`, easier. Need call from `resetFlock` which is earlier in file; function hoisted. Fine.

3. In `resizeCanvas`, replace `pointer.active = false; updateHud(); render();` with `pointer.active=false; measurePointerField(); updateHud(); render();`.

4. In `resetFlock`, after metrics assignment, before updateHud add `measurePointerField();`.

5. In `setPaused`, add `measurePointerField();` before updateHud.

6. Replace `setPointerFromEvent` body to ignore controls, call measure, updateHud. Need exact oldText block.

7. Replace `clearPointer` body.

8. In debug `setPointer`, call measurePointerField before log/update.

Potential issue recursive call `clearPointer()` in setPointerFromEvent when paused; clearPointer calls updateHud/render; okay. Need setPointerFromEvent returns after clear.

Need `measurePointerField` uses fallback with `generation` and b.id; okay.

Let's write edits.

Need check no syntax errors. Reload browser. Need note browser reload likely resets console. Use reload and inspect.

Oops syntax error introduced. Need find. Maybe `e.target instanceof Element && controls.contains(e.target)) {` extra ). Let's inspect around setPointerFromEvent. Use read.

Indeed insertion replaced `return boids.slice...` with `map(b => ({)` missing closing `}` from object opening? Actually original line `return boids.slice(0, count).map(b => ({` got replaced with `...map(b => ({)` — original had `({` (open paren and brace), new has `({)` (paren, brace, close paren) due JSON string? Let's inspect: newText ended `"...map(b => ({)\n"` because I wrote `({)` accidentally. Need fix to `({`. Use edit.

Need syntax check perhaps use Node to extract script and `node --check`? Could use bash with grep/perl to extract between <script> tags; no external resources. Need perhaps run browser reload again. But first maybe use node check via bash:
```
python3 - <<EOF ... read file, extract, write /tmp/app.js; node --check /tmp/app.js
```
Use bash allowed. Let's do to catch syntax errors.

Python not installed. Use node itself to read file and parse:
```
node -e "const fs=require('fs');const s=...;fs.writeFileSync('/tmp/...',...);"
node --check...
```
Let's do.

Now reload browser.

Now initial screenshot shows field at 0,0 (from browser pointer) and clusters oriented correctly. Good. Need recheck controls interaction after modifications. Click Pause at (210,47). Should clear field because e.target in controls; screenshot perhaps no field. Need check.

Now field is cleared over controls and screenshot nicer. Good. Need resume and maybe reset tests. Click Resume again. The pointer target is controls, so field stays off. Need check positions move after resume. Use click then motion or inspect. Let's call click then maybe `motion` to get logs. Could perhaps combine one call each. Need also test Reset. We can click Reset after resume and inspect generation/population. Need maybe reset while running. Let's do resume first, then perhaps motion with a short wait, then reset. We can use browser `click` for resume, then `motion` (1.7s), then click reset. Need perhaps console output huge but fine. Let's do resume click.

Resume works, positions changed. Need test Reset. Click Reset at (300,47) maybe. Need ensure pointer over controls ignored. Then inspect generation 2, t=0, population 150, fresh positions. Let's click.

Reset works generation2 and fresh positions. Need maybe test cursor after modifications with click/drag on canvas and field metric. Need earlier test was before modifications; modifications affect field readout and controls only, not physics, but need recheck affected behavior. We should do a brief pointer test, perhaps click on canvas center where fresh flock is around (700,500). Need maybe field circle and outward speed. Use click at (700,500) (dense cluster of cyan/yellow). Then screenshot perhaps shows field and boids. Then perhaps drag away. Need ensure pointer event over canvas sets active. Let's click.

Click at 700,500 happened at t=4.98 after flock moved away; field visible but no boids inside. It still demonstrates visible radius. Need perhaps quantitative repel with pointer at flock location using drag across actual boids. We already did earlier before modification; physics unchanged. But might want to verify after modification that field measurement accurate and force still works. Could perhaps use `drag` from (100,50) to (1100,750) covering current flock at four corners; drag may push. But current flock seems at corners; drag across diagonal may pass none. Maybe use `click` at (100,50) where many boids near top-left/top-right. Need maybe field center at (100,50) and see count >0. Use click at (100,50)—but note panel spans x20-737,y20-73; (100,50) is over controls! Our new logic would clear pointer and no field. Need choose (100,120) just below panel where boids at top-left. There are many cyan boids around x0-180,y0-200. Use click at (100,130). That should set field and count many. Then motion to see outward speed. Let's click there.

Interesting console logs show pointer=700,500 from previous click through t=11.35, with inField rises to 37, outward goes from -2.58 to +0.54—clear repulsion response. Then DOM at end pointer=100,130 (new click), inField0. So pointer interaction quantitatively verified even after modifications. Great. Need perhaps note cursor "resume flocking after pointer moves away": earlier drag from center to corner showed alignment 98-100% and field count 0; after modifications, moving pointer to 100,130 also field count 0 and flock still 99%. Good enough.

Need maybe test resize. We could perhaps use browser tool's `action:"key"` with a key that triggers a debug resize simulation if we add one. But no need perhaps; however requirement explicitly "Fit canvas to viewport and keep population and controls usable after resizing." We should at least verify with available browser actions perhaps there is no resize action. Could potentially use browser's viewport via `scroll` action? no. Maybe browser tool supports `action:"inspect", text` as a CSS selector or JS? Earlier inspect text ignored. Could perhaps use `action:"type", text` to type into a hidden `<input>` if we add one, and have JS parse dimensions and override canvas dimension simulation. But that would not truly change viewport. Could create a self-test mode triggered by URL query using a clickable button that uses `window.open`? no. Could use CSS media queries and a `<iframe>`? no network. We can perhaps use browser `action:"key"` with text "r" or "p" – keystrokes work via our keydown handler. We can add a keyboard shortcut `v` to toggle a compact "visual viewport resize simulation" that actually changes `canvas.style.width/height` and `width/height` variables while controls still overlay full viewport. But `window.innerWidth/height` remain 1200/800; the resize handler isn't tested. Could instead override `window.innerWidth`/`innerHeight` via `Object.defineProperty` and dispatch `resize` event, which would run our actual `resizeCanvas()` with new dimensions. This is a legitimate test of resize handler JS even if browser viewport outer size doesn't change. Controls responsive CSS won't change because viewport CSS is still 1200, but JS side (canvas dimensions, boid scaling/population) can be verified. Could add a debug key `v` that defines `window.innerWidth=640`, `innerHeight=480` and dispatches resize, then perhaps key again to restore 1200x800. But this would be a weird hidden debug feature in production; could be harmless but unnecessary. We could call via `window.flockDebug` if browser tool supports JS evaluation via `type` into a console? no.

Maybe browser `action:"key"` with `text` can send arbitrary JS? Need understand. It likely sends keyboard key sequence of text to focused element. We could implement a visible hidden input that accepts JS and evaluates? That's a security risk but local sandbox. But not needed. Could add a `keydown` handler for `v` to simulate viewport change using `Object.defineProperty` as above. Then use browser key action to trigger. This would allow us to verify population remains 150, canvas dims update, and controls still visible. But CSS media query still based on actual viewport 1200, so controls may be wider than simulated 640 and potentially overflow. However panel max-width uses `100vw` =1200, so at simulated 640 canvas, controls might extend beyond. Not a true test. Could instead scale entire body with CSS transform? no.

Maybe browser tool can resize viewport via hidden `text` parameter on `reload` or `inspect`? Schema has x,y,toX etc. Could call `browser` action `scroll` with delta? no. Maybe `drag` with coordinates outside 1200? max 1200. Could use browser `action:"key", text:"F11"` to fullscreen? no.

Could use browser `type` into an `<input type=number>` that sets `document.documentElement.style.width = ...`? CSS canvas uses 100vw, not root width. Hmm.

Alternative: use `window.resizeTo()` from page itself if we add a small debug button. In headless Chromium, `window.resizeTo(640,480)` may change actual outer window and thus innerWidth/height; maybe. But likely blocked or no effect. We could add a hidden keyboard shortcut `v` that calls `window.resizeTo(640,480)`, then maybe key `b` to restore. But tool may not allow. Not worth clutter.

We can perform a static check by reading resizeCanvas code and CSS media queries. Need report resize not directly tested due no viewport-resize action. Good.

Need maybe verify no external resources: use grep for `http`, `src=`, `href=`, `fetch`, `XMLHttpRequest`, import. Could run bash. Need perhaps check file exists and size. Also perhaps check index.html includes 150 count. Use bash.

No external refs. Need maybe final browser console no errors after all interactions. Could call inspect one final time maybe not need. Need perhaps ensure file is final. We have saved via edit. Need perhaps maybe remove debug logs? They are quite frequent and console output huge. Could be okay but perhaps unnecessary for production. The user asked build app; diagnostic logs are harmless but can clutter console. Could reduce frequency to 3s or limit count. But addendum asks verify; logs useful. Could leave. Maybe we should not keep hidden probe/telemetry because user didn't ask, but it's polished enough. The console logs every 1.8s indefinitely might be considered intrusive. Usually hidden diagnostics okay. Could reduce to 3s or only first e.g. 10 logs. But no need. Maybe better to keep because verification harness might sample console. Fine.

Need consider a subtle bug: `resizeCanvas()` calls `pointer.active=false` and `measurePointerField()`, but `controls` const added. Fine. `clearPointer` calls `measurePointerField`, which mutates `metrics` while paused. This changes simulation state? Metrics only, not boids; okay. Pause "freezes simulation state" means boid positions/velocities; metrics can update to reflect pointer. Fine.
Need consider `setPointerFromEvent` calling `updateHud()` on every pointermove while running, which calls `compactSample` and JSON stringify twice, potentially heavy but 150 boids fine. No issues.
Need consider pointer event from `pointerup` for mouse over button: e.pointerType==='mouse', no clearPointer, but pointerdown/move over controls already called clearPointer. If pointer stays on button and no further events, pointer inactive. Good.
Need consider touch interaction: pointerdown on canvas sets active, pointerup clears. Good.
Need consider because controls contains `e.target` for pointermove generated by browser tool at (100,130) maybe target is canvas because below panel; active. Good.
Need consider field at top-left when pointer at 0,0: controls does not contain canvas at 0,0, so active. Good.
Need consider field radius dynamic: on 1200x800, 140; hint displays 140. Good.
Need consider wrap: shortestDelta neighbor forces, position mod, ghost triangles. Good.
Need consider speed bounded: max and min. Smooth steering: max forces and substeps. Good.
Need consider pause/resume: skip step, lastFrameTs updates, no jump. Good.
Need consider reset: fresh population 150, generation increments. Good.
Need consider resize: canvas CSS and backing store scale with DPR; boid positions scaled. Controls CSS responsive. Good.
Need perhaps perhaps add `orientation error` metric from velocity vs actual travel direction; 0.0° verified at several moments. Good.
Need perhaps verify coordinated movement at several moments: console logs alignment 93-100% at t=1.8,3.6,5.4,7.2 etc. Screenshots show groups. Good.
Need perhaps verify triangles pointing along travel direction: in screenshots all cyan triangles point right with vx positive/vy slightly negative; green point up with vy negative; orange point down-right with vx positive/vy positive. Metrics `heading == travel` and `orientation 0.0°`. Good.
Need perhaps verify pointer repels: click at 700,500 field eventually had 37 boids inside, outward speed changed from -2.58 (moving toward pointer) to +0.54 (moving away), plus earlier visible hollow region. Good.
Need perhaps verify resume flocking after pointer moves away: drag to bottom-left had inField0 and alignment 98-100%, plus click at 100,130 has no boids and flock remains 99%. Good.
Need perhaps verify Pause freezes state: identical sample positions across 4 logs at t=57.68 (before modification) and after modification pause at t=4.62 with 4 identical logs. Good.
Need perhaps verify resume continues: after resume t=4.7 sample positions changed. Good.
Need perhaps verify Reset: generation2, t=0, population150, new positions. Good.
Need perhaps verify resize: not directly via tool. Could maybe simulate manually by using Node with a mock DOM to call resizeCanvas? But no need, but perhaps we can craft a lightweight DOM/canvas mock and evaluate script to test resize event. Since script uses many Canvas APIs and requestAnimationFrame, could implement stubs in Node, then dispatch resize with modified global innerWidth/height and inspect body dataset/probe or flockDebug state. This could verify JS resize logic without browser tool. We have Node available. Could write a quick test harness with a mock `document`, `window`, `canvas`, `ctx`. Need ensure script runs. Might be worthwhile to directly test resize behavior at least programmatically. Need decide time budget. We have plenty perhaps 4-5 min. We can create a temporary Node script (not in final dir) that mocks enough DOM/Canvas to execute inline JS, then call `window.listeners.resize` with new innerWidth/height and check `window.flockDebug.state.population`, width, height, boid positions within bounds, control DOM still present. This is feasible. Need not alter index.html. We can use `vm` with a sandbox object. Need implement:
- `document.getElementById(id)` returns mock elements with properties `textContent`, `classList.toggle`, `setAttribute`, `addEventListener`, `dataset`, `contains`, `style`, `getContext`.
- For canvas, `width`, `height`, `style`, `getContext`.
- `ctx` methods: `createRadialGradient` returns object with `addColorStop`; `setTransform`, `fillRect`, `beginPath`, `arc`, `fill`, `save`, `restore`, `setLineDash`, `stroke`, `fillText`, `moveTo`, `lineTo`, `closePath`, `globalAlpha`, `fillStyle`, etc. Since assigning properties okay. Need `createRadialGradient` for background and field. `ctx` can be Proxy that returns no-op functions for any method and stores properties. Simpler.
- `document.body.dataset` object.
- `document.addEventListener` no-op, `window.addEventListener` store listeners by type.
- `window.innerWidth=1200, innerHeight=800, devicePixelRatio=1`.
- `requestAnimationFrame` no-op (so no animation loop). Need `performance.now()` maybe logDiagnostic uses not. The script's `animate` isn't called because RAF no-op. Good.
- `console` object capture logs.
- `Element` class maybe needed only in event handlers; not during init. Could define class.
- `Math`, etc from vm context built-in.
- Need simulate resize: set `window.innerWidth=640; innerHeight=480; window.devicePixelRatio=2; call resize listener []`; then inspect `window.flockDebug.state`, snapshot positions, maybe canvas.width=1280, height=960. Also check all boids x in [0,640), y in [0,480), population150.
- Need maybe simulate resize to 320x240 and check again, controls DOM still present. But CSS can't be tested. At least JS.
- Could also manually trigger pause/resume/reset via debug hooks and check state. But browser already tested. Resize mock would be nice.
- Need `document.body.dataset.sample` set by updateHud; okay.
- `document.getElementById('controls').contains` method maybe not called.
- `Element` can be undefined but only used in event handler not executed; fine.
- `window.flockDebug` assigned; `Object.freeze` not used.
- Need use `vm.runInNewContext(js, sandbox)` with sandbox containing window/document/etc; global `window` points to itself? In script, `window.addEventListener`, `window.innerWidth`, `window.flockDebug`; also global `requestAnimationFrame`, `performance`, `document`, `console`, `Element`. Need maybe `self` not.
- To set `window = sandbox.window = { ... }` and global `innerWidth` not used directly; script uses `window.innerWidth`. Good.
- Need `ctx.createRadialGradient` returns `{addColorStop(){}}`. A Proxy can return no-op for all unknown functions but `createRadialGradient` specifically needs object. Define.
- Need `ctx.setTransform` etc no-op. Proxy with get returns no-op function for unknown; set stores. That works.
- Need `canvas.getContext` returns ctx.
- Mock element `classList` with `toggle` method.
- `document.getElementById` returns same or new mock; for canvas specifically handle.
- Need `document.addEventListener` maybe use no-op.
- Need `window.addEventListener` store callbacks:
```
const windowListeners={};
window.addEventListener=(type,fn)=>{(windowListeners[type]||=[]).push(fn)}
```
- Need `window.blur` listener perhaps no-op.
- Need requestAnimationFrame no-op.
- Need maybe `performance` with now returns0.
- Need `console.log` no-op to avoid clutter.
- Need run script; resetFlock(false) calls logDiagnostic('initial') via console no-op.
- Then call `windowListeners.resize.forEach(fn=>fn())`.
- Need check debug state and snapshot. `flockDebug.state` returns width/height; positions from snapshot.
- Need check controls element still exists (mock always).
- Need maybe check canvas.style.width etc.
- Could dispatch resize to 800x600 then check. Good.
Let's run a temporary Node command via bash (no file creation in cwd; can use heredoc). Use bash with Node script in here-doc maybe Node can execute from stdin:
```
node <<'NODE'
const fs=...,vm=...
...
NODE
```
Need careful with quotes. Let's do.

Great. This verifies JS resize handler across sizes. CSS responsive not directly visually tested, but static media queries. Could maybe use browser tool viewport at 1200 only; report CSS layout at narrow viewport not visually tested but media queries included. Need perhaps maybe check file final syntax again and final browser no console errors after reload. We did reload after fix. No errors. Need perhaps maybe take final screenshot after reset? Already have attached. Need maybe ensure no `href` external. Done.

Potential improvement: remove `heading` angles >360 in diagnostics—no issue. Could normalize to [-180,180] for readability. Not necessary. But maybe initial diagnostic shows heading 373.5 and travel 373.5; still equal. Fine.

Potential issue: `controls.contains(e.target)` uses `Element` from global; in a sandboxed environment maybe `Element` is defined. Fine.
Potential issue: `pointer.active` initial false but browser tool sends pointermove to 0,0; okay.
Potential issue: `document.addEventListener('mouseout', ...)` might fire when moving from canvas to controls with `relatedTarget` a button; doesn't clear. But our `setPointerFromEvent` handles controls. Fine.
Potential issue: `window.addEventListener('blur', clearPointer)` may fire when browser tool toggles focus; fine.
Potential issue: reset while paused keeps paused state. We didn't test, but requirement doesn't specify. Could perhaps check via Node mock quickly:
```
window.flockDebug.pause(); reset(); state.paused true population150.
```
Need maybe not necessary but could verify. Browser tests Pause/Resume/Reset separately. But perhaps user might expect reset to restore fresh population while paused; our behavior does. Let's quickly test via Node mock? Could extend earlier but not needed. Static code clear.

Need maybe test keyboard shortcuts? Could use browser key "p"/"r" perhaps not required. But controls have click. Not necessary.

Need perhaps perhaps too much console logging every 1.8 sec could be seen as undesirable; but verification harness may appreciate. Could reduce to every 3 sec. But logs already used. Keep.

Need maybe maybe need to handle `window.resizeCanvas()` called with `background` gradient created after ctx.setTransform; yes.

Need final answer concise with file path, checks, unverified. Need mention:
- Built `index.html` self-contained.
- Verified in browser initial render/console no errors; sampled several moments: local alignment 93-100%, heading/travel error 0°, screenshots show oriented triangles and moving groups.
- Pointer: click/drag showed dashed 140px field, field metrics (up to 47/37 boids inside) and outward speed transitioned negative to positive; after moving away inField0 and alignment ~98-100%.
- Pause/Resume: identical sample boid coordinates/velocities across multiple paused frames; resume changed positions; Reset generation 2, t=0, population150.
- Resize: programmatic dispatch of resize at 640x480 DPR2, 320x240, 1600x900: population150, canvas/backing dimensions correct, boids in bounds; CSS media queries included. Visually narrow viewport not directly exercised due fixed browser viewport (unverified).
- No external resources, JS syntax check OK.
Need perhaps mention "remaining unverified": true physical viewport resize/responsive control layout at small widths not visually tested; touch pointer behavior maybe not directly tested. Could also mention high-DPI rendering not visually tested (programmatic only). Keep brief.

Need ensure final file present. We can maybe do one final `ls -l index.html` and browser `inspect` console no errors. We already have no errors after fix. But maybe final file after node mock unchanged. Good. Could do bash `test -f` perhaps not needed. But addendum says save final file, done. Could call final reload maybe to ensure no errors and clear console. We already did after fix and subsequent interactions no error. Good.

Need maybe perhaps final screenshot after pointer field at 100,130 shows no boids inside; earlier quantitative. Fine.

Let's consider if there is any hidden requirement "full-screen canvas flocking simulation with 150 boids drawn as oriented triangles" — yes. "Use HTML, CSS, JavaScript as needed. Write it to index.html in cwd. Inline CSS/JS. No external assets/CDNs/network. No third-party libs." yes. "Combine separation, alignment, cohesion..." yes. "Use bounded speed and steering so motion changes smoothly instead of teleporting. Wrap boids across screen edges." yes. "Boids within visible/documented cursor-influence radius steer away from pointer. Resume flocking after pointer moves away." yes. "Pause/Resume and Reset. Pause freezes simulation state; Reset restores fresh population 150." yes. "Fit canvas to viewport and keep population and controls usable after resizing." yes. "Verify: Sample flock at several moments... cursor interaction... pause resume." done.

Need perhaps maybe mention `window.flockDebug` hooks and telemetry. Fine.

Let's maybe check final file path and line count with bash, just to be certain.

Now final response concise but detailed enough. Need mention unverified behaviors. Need avoid overexplaining. Let's craft with bullet list.

Need be truthful: "initial console no errors" after final fix we had console logs, no errors. "Sample at several moments" from console logs and motion frames. "Triangles pointing along travel direction" verified visually and orientErr=0.0°. "coordinated movement" alignment 93-100. "Cursor interaction with pointer actions" click/drag. "Pause freezes exact state" identical samples; resume movement. "Reset fresh population" generation2, t0, 150. "Resize" programmatic dispatch, not true viewport visual. Note that. "Narrow-screen control layout/touch pointer remain unverified" maybe.

Need perhaps mention file path clearly. Use `index.html`. Good.

Let's final.