We need respond by creating index.html in /tmp/ws self-contained no external. Need inspect maybe empty. Need use tools. We need build single-page web app full-screen canvas Mandelbrot smooth color gradient click-drag pan wheel zoom. Need maybe include UI? User just asks render. Need deliver code in index.html. Need maybe use bash ls? We can write file. Need ensure full-screen canvas, smooth gradient, interactions. Need maybe no external. Need maybe include instructions overlay. Need code robust.

Need think implementation. Single HTML with CSS in style, JS script. Use canvas full viewport. Render Mandelbrot set. Smooth coloring. Pan by drag, zoom wheel centered on mouse. Maybe high-DPI. Need performance. We can implement requestAnimationFrame, cancel previous? Need avoid massive work. Canvas full-screen. Initial view maybe x [-2.5,1.5], y [-1.5,1.5]. Iterations maybe 256/384 based on zoom. Smooth coloring formula: c = x + iy. For z_{n+1}=z^2+c, if |z|>4, escape time n. Smooth color: μ = n + 1 - log2(log|z|) where |z| = sqrt(re^2+im^2). Color gradient maybe HSL over hue. Smooth color gradient. Need maybe set background. Use offscreen canvas? Full-screen canvas rendering directly maybe okay. Need progressive? Simpler.

Need implement robust resize. Need maintain view scale: x range = width/scale? Let's define state.center = {x,y}, scale = xUnitsPerPixel. On render, for each pixel compute complex = center + (px - w/2)*scale + i((py - h/2)*scale). Zoom factor: scale *= exp(-deltaY*0.001) for wheel up (deltaY negative) zoom in. Pan: center.x += dx*scale, center.y -= dy*scale? If drag right, canvas content moves right, center should move left? Let's verify: complex at screen px = center + (px - cx)*scale. Drag right dx positive, to make image move right, point under cursor should be same after drag: newCenter + (px - dx - cx)*newScale = oldCenter + (px-cx)*scale. newCenter = oldCenter + dx*scale (for y? newCenter.y + (py-dy-cy)*scale = oldCenter.y+(py-cy)*scale -> newCenter.y=oldCenter.y+dy*scale? Since y screen down but complex y up, dragging down should move image down? The center complex y should increase or decrease? If pan down, we want view move down (more negative y). Formula with screen y down and complex y up: y_complex = center.y + (py - h/2)*scale. Drag down dy positive: newCenter.y + (py-dy-cy)*scale = oldCenter.y + (py-cy)*scale -> newCenter.y = oldCenter.y + dy*scale. That increases y, which visually moves image down? Suppose feature at center.y=0 appears center. Drag down, newCenter.y=+0.001, feature complex y=0 appears at py = h/2 - 0.001/scale (above), so image moved up, not down. Maybe sign wrong? Let's derive: Dragging canvas content should follow pointer. If user drags right, content moves right. Center should move left (complex x decreases) or right? Suppose feature at center x=0. After dragging right, feature should be at pointer x + dx. Need newCenter.x such that newCenter.x + (px+dx - w/2)*scale = oldCenter.x + (px-w/2)*scale. newCenter.x = oldCenter.x - dx*scale. So center moves left for drag right. My previous formula with new px = old px - dx? If pointer after drag is old px + dx. Need newCenter.x = oldCenter.x - dx*scale. For y, pointer after drag down dy positive; feature should move down screen, complex y decreases. newCenter.y + (py+dy - h/2)*scale = oldCenter.y+(py-h/2)*scale -> newCenter.y = oldCenter.y - dy*scale. So center.y decreases. Thus pan center.x -= dx*scale, center.y += dy*scale? Wait if drag down, center.y -= positive. So center.y -= dy*scale. In JS y complex = center.y + (py-h/2)*scale. Drag down -> center.y -= dy*scale -> feature appears lower. Good. So pan: center.x -= dx*scale, center.y -= dy*scale? Actually center.y decreases; formula center.y -= dy*scale. center.x -= dx*scale. Good.

Need maybe include double-click zoom? Not asked. Could include reset? Not necessary but maybe helpful. Need maybe overlay small instructions. Full-screen canvas.

Need maybe implement color gradient. Use HSL interpolation or color palette. Smooth gradient on Mandelbrot set. Could map smooth iteration to hue 0..1, saturation 85%, lightness 45-75%, alpha maybe 255. For interior black/dark purple. Maybe outside set color. Need "smooth color gradient" perhaps use continuous hue. We can create palette array maybe 1024 colors for speed, HSL to RGB. Use smooth iteration. For each pixel compute smooth iteration, if finite and < maxIterations, map to palette. For interior use dark. Need maybe use typed arrays.

Potential issue render at full screen with 4k and max iterations 384 too slow. But okay maybe with cancel. We can adapt iterations based on scale and pixel count. Need maybe render progressive? User expects. We can implement renderFrame with requestAnimationFrame, max iterations maybe 256 + log zoom. For high zoom, dynamic.

Need maybe implement "smooth color gradient" exactly. Color formula:
let re2 = z.re*z.re, im2 = z.im*z.im;
let n=0; while (n<maxIter && re2+im2 <= 4) { z.im = 2*z.re*z.im + c.im; z.re = re2 - im2 + c.re; re2 = z.re*z.re; im2 = z.im*z.im; n++; }
if n < maxIter:
  let mag = Math.sqrt(re2+im2);
  let nu = n + 1 - Math.log(Math.log(mag))/Math.LN2;
  let t = (nu / maxIter) % 1? If smooth iteration grows unbounded near boundary, no need modulo? We want gradient repeated. Use hue = (nu * 0.002?) maybe modulo. For outside set, hue = (nu * 0.006) % 1? If t >1, use t%1. But if maxIter=300, smooth nu ranges 0..300. t = (nu / maxIter) maybe 0..1, no repeats. But gradient from dark to bright maybe. Smooth color gradient could be HSL hue = nu*0.006 %1. Need consistent.

Mandelbrot color often uses smooth iteration modulo. Let's do:
let smooth = n + 1 - Math.log(log(absZ))/ln2;
let t = smooth * 0.005; // wraps.
let hue = (t % 1 + 1) % 1;
let sat = 0.85;
let light = 0.45 + 0.25 * Math.sin(Math.PI * hue); // banding? Actually smooth.
Maybe use HSL -> RGB. But HSL with lightness sin causes dark in middle. Maybe use palette.

Could generate palette with 1024 entries:
for i 0..1023:
  t = i/1023;
  hue = t; // rainbow
  lightness = 0.35 + 0.25 * Math.sin(Math.PI*t);
  rgb = hslToRgb(hue, 0.95, lightness)
  store r,g,b.
Then colorIndex = Math.floor((smooth * 0.006) % 1024). For interior black.

Need maybe use canvas.getContext('2d', {alpha:false}); create ImageData.

Need maybe avoid rendering while dragging? We can render on mouseup. But user may want smooth. We can use renderSoon. Implement renderPending flag. On pointerdown set dragging and render maybe no. On pointermove update center and scheduleRender. On wheel preventDefault update scale and schedule. On resize schedule. render cancels previous if not need? Could use let renderId=0; render() increments id; inside maybe setTimeout? Simpler:
let renderQueued=false;
function scheduleRender() { if (!renderQueued) { renderQueued=true; requestAnimationFrame(render); } }
function render() {
 renderQueued=false;
 const id=++renderToken;
 // direct render synchronous; if token changed during render? no async. 
}
During render if wheel/drag events update state and scheduleRender; after render completes, renderQueued maybe true, next frame. Good.

Could maybe throttle while dragging to one frame per pointermove. Fine.

Need maybe support touch? User says mouse wheel; but pointer drag works.

Need maybe handle CSS full-screen. Canvas display block width/height 100vw/vh, touch-action none. Need body overflow hidden. Need overlay.

Need maybe include "Click and drag to pan • Wheel to zoom • Double-click to reset" maybe double-click not asked but okay. Need not conflict.

Need maybe code. Need write file. Maybe include meta viewport. Need maybe robust.

Need maybe test by opening? Could run node? Not needed. But maybe use bash to write. Need maybe no external resources. We can use write. Need maybe ensure index.html present. Could maybe use bash ls. Let's write.

Need maybe inspect file maybe line issue. There is bug in zoomAt: state.width is in device pixels, rect width CSS pixels. I use px CSS but state.width device pixels. Need fix. Need maintain pixel coords? Use canvas CSS size vs internal. For coordinate conversion should use state.width / dpr. I used state.width/2/state.dpr yes, but px computed CSS. Good. But in zoomAt, state.width/2/state.dpr = CSS half width. fine. In render, state.width internal. Good.

Potential bug: ctx.createImageData(w,h) with w/h device pixels. Good.

Potential bug: desynchronized not supported? okay.

Potential bug: smooth formula if mag <=1? At first iteration mag can be <1, log(log(mag)) negative? Actually log(mag)<0, log of negative invalid. For Mandelbrot escape, first time |z| > 2 (since condition <=4, after update if >2). So mag >2, log positive. Good.

Potential issue colorIndex Math.floor((smooth*0.007)%paletteSize). smooth max 900 -> 6.3, modulo 1024 yields 6.3, not wrapping across palette. That's not gradient repeated; colorIndex only 0..6, i.e. first few colors. Need fix. We want smooth color gradient. Use colorIndex = Math.floor((smooth * 0.007) % paletteSize) is wrong because smooth*0.007 not modulo 1; to wrap, need t = (smooth * 0.007) % 1; colorIndex = Math.floor(t * paletteSize). Let's edit. Also maybe smooth*0.007 period 142 iterations. Good. Need maybe use factor clamp. Need maybe issue with maxIterations choose 220 + sqrt(area)*0.035 for 1920*1080 2M sqrt=1440*0.035=50, total 270. Fine. Zoom up to 900. Good.

Need maybe improve pan sign. I need verify pan formula. I wrote state.center.x -= dx*scale; center.y -= dy*scale. Earlier derivation: drag right dx positive center.x decreases, yes. Drag down center.y decreases, yes. Good.

Need maybe high DPI resizes. Good.

Need maybe bug in wheel: state.scale max 3.2, min 1e-10. Good.

Need maybe if canvas context null? Not necessary.

Need edit.

Need maybe run check maybe `ls -l index.html` and maybe maybe grep? Use bash.