We need respond by creating index.html in current directory. Need inspect directory? Need load d3.min.js with plain script src="d3.min.js". Need single self-contained file with CSS style and JS script inline, but load pre-provided d3. Need no external resources. Need implement interactive force-directed graph ~40 nodes clusters, draggable, hover highlighting neighbors, zoom/pan. Need maybe use D3 global. Need write file. Need maybe read d3? Not necessary but maybe check file exists. Need create index.html. Need maybe use bash ls.

Need write index.html. Need ensure uses d3.min.js script. Since no external. Need maybe include all inline. Need about 40 nodes in several clusters. Let's design.

HTML with viewport, instructions. SVG with defs arrow marker? CSS. JS:
const nodes = [
 {id:'A1', label:'Alice', cluster:'Design'}, ...
Need 40 nodes in maybe 4 clusters of 10 each: Design, Frontend, Backend, Data. Links within clusters and across. Need force simulation d3.forceSimulation(nodes).force('link', d3.forceLink(links).id(d=>d.id).distance(d=> cluster? 70 : 110)).strength(0.7).force('charge', d3.forceManyBody().strength(-320)).force('center', d3.forceCenter(width/2,height/2)).force('collide', d3.forceCollide(32)).alphaDecay(0.035).on tick update positions.

Drag: dragstarted, dragged, dragended. On drag, if not active, active = d; if active === d, active.x=d.x, active.y=d.y; else active.x += dx/d3.pointer(event, svg.node()).x? Actually d3.drag event sourceEvent. Use d.x += event.dx; d.y += event.dy. Need update positions.

Zoom/pan: d3.zoom().scaleExtent([0.2,5]).on('zoom', event => svg.attr('transform', event.transform)). But if svg has group transform? Better:
const svg = d3.select("svg");
const viewport = svg.append("g").attr("class","viewport");
const linkLayer = viewport.append("g")...
const nodeLayer = viewport.append("g")...
zoom listener: viewport.attr("transform", event.transform).
But dragging nodes: d3.drag on nodes; event.dx/dy in SVG coordinate unaffected by transform? It may be in screen coords, but drag behavior uses screen? D3 drag dx/dy are in screen space, not transform? Actually drag events are transformed? Hmm. If viewport has transform, d3.drag uses event.sourceEvent.clientX and transforms? It probably uses screen coords? It may be okay but node positions in data coordinate; dx/dy in screen units, not world units; if zoomed, drag speed changes. Alternative set drag on svg with pointer events and compute dx/dy via pointer in data coords. But d3.drag on nodes can use dx/dy; if viewport transform, dx/dy in screen pixels, not world. Could compensate by inverse transform: dx = event.dx / event.transform.k, dy = event.dy / event.transform.k. But d3.drag event has transform only on zoom listener? Drag event doesn't include transform. Could use svg.node().__zoom? D3 zoom stores on g? If zoom applied to viewport, __zoom on viewport node. event.sourceEvent? We can define function dragMoved(event,d) { const transform = viewport.node().__zoom; event.dx /= transform ? transform.k : 1; event.dy /= transform ? transform.k : 1; d.x += event.dx; d.y += event.dy; }.

Need hover highlighting neighbors. On node mouseover: set related = set with node and neighbors; set opacity and radius maybe. On mousemove update radius; on mouseout reset. Need maybe also click select? Not necessary. Need draggable nodes. Need zoom/pan.

Need maybe labels? 40 labels can clutter. Maybe include title and show labels on hover. Could render node circles with labels maybe hidden by opacity. Need interactive. Use title.

Need maybe generate sample nodes/links inline. The user asked "Define sample nodes and links inline." We can manually define. Could generate from clusters? "Define sample nodes and links inline" probably okay if nodes and links arrays inline. Need about 40 nodes. We'll manually create arrays. Maybe use helper addNode and addLink? That still inline. Better manual arrays.

Need produce index.html present. Need maybe include d3 script before inline script. Need no external resources.

Need maybe ensure no separate css/js files. The d3 script is external but pre-provided.

Need maybe use "module"? no. Use global d3. Need maybe fallback if d3 missing? no.

Need maybe no network requests. d3 script src local.

Need maybe set width/height. Responsive. Use ResizeObserver? Could update width/height on resize. Need no external.

Let's draft robust code.

Need maybe use d3.forceLink with links object. Need ensure links with source/target references? If using strings, d3.forceLink resolves id. After simulation, links source/target objects. But if render before, okay.

Need CSS: body margin 0 overflow hidden background #0f172a; #graph width 100vw height 100vh; .link stroke etc. .node stroke #e5e7eb; .node text pointer-events none. .muted etc. .hint.

Need JS:
const svg = d3.select("svg");
const defs = svg.append("defs");
defs.append("filter") etc.

const width = () => window.innerWidth; const height = () => window.innerHeight;
const zoomBehavior = d3.zoom()
 .scaleExtent([0.15, 6])
 .on("zoom", (event) => {
   viewport.attr("transform", event.transform);
 });
svg.call(zoomBehavior);

Need d3.zoom default events on svg. If viewport has transform, wheel event scroll? okay.

Need nodes:
clusters = [
 {name:"Design", color:"#7c3aed", nodes:[
 {id:"d1", label:"Maya Chen", role:"Design Lead"}, ...
]}
]
But links need references. Could define all nodes and links arrays. Maybe easier:
const clusters = [...]
const nodes = clusters.flatMap(c => c.items.map((item, i)=>({...item, cluster:c.name, color:c.color})));
const links = [];
function addLink(a,b,weight=1){ links.push({source:a,target:b,weight}); }
...
This is inline. User said sample nodes and links inline; yes.

Need maybe node id with cluster prefix. Use "d1" etc. Could use source: "d1" target: "d2".

Need cluster generation:
const clusterData = [
 {name:"Design", color:"#8b5cf6", items:[
 {id:"d1", label:"Maya Chen"}, ...
]},
 ...
];
const nodes = clusterData.flatMap...
const links = [];
function addLink(source,target,weight=1) { links.push({source,target,weight}); }
clusterData.forEach(cluster => {
 const ids = cluster.items.map(n=>n.id);
 for (let i=0; i<ids.length; i++) addLink(ids[i], ids[(i+1)%ids.length], 1.5); // ring
 for (let i=0; i<ids.length; i++) for (let j=i+2; j<ids.length; j++) addLink(ids[i], ids[j], 0.55); // internal sparse
});
const cross = [
 ["d1","f1",1.3], ...
];
cross.forEach(([s,t,w])=>addLink(s,t,w));
Maybe "about 40 nodes" exactly 40 (4 clusters x10). Good.

Need maybe links not duplicate? Could include. Fine.

Need simulation:
const simulation = d3.forceSimulation(nodes)
 .force("link", d3.forceLink(links).id(d=>d.id).distance(d=>115 - d.weight*12).strength(d=>0.45 + d.weight*0.12))
 .force("charge", d3.forceManyBody().strength(d => -260 + d.weight*15? Wait d is node no weight? link d in forceManyBody is node, not link. Use -330))
 .force("collision", d3.forceCollide(34).strength(0.8))
 .force("center", d3.forceCenter(width()/2,height()/2))
 .on("tick", ticked);
Need link.distance accepts d link; okay.

Need update:
function updatePositions() {
 link.attr("x1", d=>d.source.x).attr("y1",...).attr("x2",...).attr("y2",...).attr("stroke-width", d=>1.2 + d.weight*0.45);
 node.attr("cx", d=>d.x).attr("cy",d=>d.y);
 linkLabel? maybe not.
}
Need labels:
const label = node.append("title")? Actually title should be child of circle? Titles on g. Use node.append("title").text(d=>`${d.label} (${d.cluster})`);
const labelText = node.append("text").attr("class","node-label").attr("x",12).attr("y",4).text(d=>d.label);
Maybe labels hidden? .node-label {opacity:0.0; fill:#e5e7eb; font-size:11px; paint-order:stroke; stroke:#0f172a; stroke-width:3px; stroke-linejoin:round;}
On hover label opacity 1.

Need node radius maybe 11; on hover 16; selected maybe.

Need hover:
const related = new Set();
let hoverTimer;
function setHover(d) {
 related.clear(); related.add(d);
 const neighbors = new Set(d3.linkedNodes? Hmm D3 v7 has d3.linkedNodes(link, node) returns neighbors for link. But we can compute:
 const linksFor = links.filter(l => l.source.id === d.id || l.target.id === d.id);
 linksFor.forEach(l => { const a = typeof l.source === 'string'? l.source : l.source.id; ... });
 related.add(...);
 });
 node.classed("related", n => related.has(n.id)).classed("dimmed", n => !related.has(n.id));
 node.attr("r", n => related.has(n.id) ? 15 : 10);
 label.attr("opacity", n=> related.has(n.id)?1:0);
}
Need d3.linkedNodes? Could use d3.linkedNodes(links,d) in D3 v7? It returns set? Let's check. D3 v7 includes d3.linkedNodes(links,node) and linkedLinks. But to avoid version issues, implement.
function neighborsOf(d) {
 const ids = new Set([d.id]);
 links.forEach(l => {
   const s = typeof l.source === "string" ? l.source : l.source.id;
   const t = typeof l.target === "string" ? l.target : l.target.id;
   if (s === d.id) ids.add(t);
   if (t === d.id) ids.add(s);
 });
 return ids;
}
Then update:
const hoverSet = neighborsOf(d);
node.classed("is-related", n => hoverSet.has(n.id)).classed("is-muted", n => !hoverSet.has(n.id));
node.attr("r", n => hoverSet.has(n.id) ? 15 : 10);
link.classed("is-related", l => hoverSet.has(sourceId(l)) && hoverSet.has(targetId(l))).classed("is-muted", l=> !(...));
link.attr("stroke-width", d=> hoverSet.has(s) && hoverSet.has(t) ? 3.2 + d.weight*0.8 : 1.2 + d.weight*0.35);
Maybe if only one? Since hoverSet includes neighbors and self, any incident link both endpoints in set. Good.
Need mouseout:
node.on("mouseout", () => {
 related.clear();
 node.classed(...).attr("r", 10);
 link.classed(...).attr("stroke-width", d=>1.2 + d.weight*0.35);
 label.attr("opacity", 0);
});
Need maybe use pointerenter/leave? mouse events okay.

Need drag:
const drag = d3.drag()
 .on("start", function(event,d) {
   if (!event.active) simulation.alphaTarget(0.3).restart();
   d.fx = d.x; d.fy = d.y;
 })
 .on("drag", function(event,d) {
   const k = viewport.node().__zoom?.k || 1;
   d.fx = d.x + event.dx / k;
   d.fy = d.y + event.dy / k;
 })
 .on("end", function(event,d) {
   if (!event.active) simulation.alphaTarget(0);
   d.fx = null; d.fy = null;
 });
node.call(drag);

Need if node is dragged, simulation alphaTarget restarts. Good.

Need maybe add "Reset view" button? optional. Could include clear.

Need maybe display cluster legend. Use CSS? Could add legend in HTML. But not necessary. Maybe helpful. Need maybe single page. Could include top-left panel with instructions and cluster legend. Inline.

Need maybe if no d3 loaded, show error. But user said loaded. Could include:
if (!window.d3) { document.body.innerHTML = '<div...>D3 failed to load.</div>'; }
But d3 script loads before inline; if fails, script still runs. Fine.

Need maybe "About 40 nodes" exactly 40. Good.

Need maybe no external resources. Use local d3.

Need maybe use `script src="d3.min.js"` exactly. Good.

Need maybe current directory /tmp/ws. Write file.

Need maybe verify file exists.