Got it, let's tackle this. First, the user wants a single-page index.html with D3 force graph, 40 nodes in clusters, draggable, hover highlight, zoom/pan, all self-contained, using the local d3.min.js.

First, I need to create the HTML structure: a container for the SVG, style it to take full viewport, then the script tags: first d3.min.js, then the custom script.

Wait, first, let's outline the steps:

1. Basic HTML boilerplate: doctype, html, head with style tag, body with a div for the graph.
2. Style the graph container to be full width/height, no margins, etc.
3. Include the local d3.min.js as <script src="d3.min.js"></script>
4. Write the D3 code in a script tag:
   a. Set up the SVG with zoom behavior.
   b. Create a force simulation with many-body, link forces, etc.
   c. Define sample nodes and links: let's make 4 clusters, say 10 nodes each? Wait 4*10=40 perfect. Each cluster has nodes connected to a central hub? Or just clustered by having their initial positions near each other, plus links within clusters?
   Wait, better: create 4 cluster centers, then each cluster has 9 other nodes connected to the center, so total 4*(1+9)=40 nodes. Then links between each node and their cluster center. That will make clear clusters.
   d. Add drag behavior to nodes.
   e. Hover highlighting: when hovering a node, highlight it and its connected links/neighbors, fade others.
   f. Zoom/pan functionality using d3.zoom().
   g. Render the links and nodes, add labels maybe?
5. Make sure all is self-contained, no external resources.

Wait first, let's check the current directory: /tmp/ws, and d3.min.js is present. So the script tag will be <script src="d3.min.js"></script>.

Let's draft the code:

First the HTML head:
<style>
body { margin: 0; padding: 0; }
.graph-container { width: 100vw; height: 100vh; }
.node { stroke: #fff; stroke-width: 1.5px; }
.node:hover { cursor: grab; }
.node.dragging { cursor: grabbing; }
.link { stroke: #999; stroke-opacity: 0.6; }
.highlighted { stroke: #ff0; stroke-width: 3px; }
.link.highlighted { stroke-opacity: 1; stroke: #ff0; }
.faded { opacity: 0.2; }
.label { font-size: 12px; pointer-events: none; fill: #000; }
</style>

Then the body:
<div class="graph-container"></div>

Then the script:
First, wait, D3 v7? Because d3.min.js is the current one. Let's structure the script:

Wait, let's set up the simulation:

const width = window.innerWidth;
const height = window.innerHeight;

const svg = d3.select(".graph-container")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .call(d3.zoom().on("zoom", (event) => {
    g.attr("transform", event.transform);
  }));

const g = svg.append("g");

// Create clusters: 4 clusters, each with a center
const clusterCount = 4;
const nodesPerCluster = 10;
const totalNodes = clusterCount * nodesPerCluster;
const clusters = Array.from({length: clusterCount}, (_, i) => ({
  x: (width / (clusterCount + 1)) * (i + 1),
  y: height / 2
}));

// Create nodes: each cluster has nodes around its center
const nodes = [];
for (let c = 0; c < clusterCount; c++) {
  const cluster = clusters[c];
  // Add the cluster center node
  nodes.push({id: `cluster-${c}-center`, group: c});
  // Add 9 other nodes in the cluster
  for (let n = 1; n < nodesPerCluster; n++) {
    const angle = (Math.PI * 2 * n) / (nodesPerCluster -1);
    const radius = 50 + Math.random() * 30;
    nodes.push({
      id: `node-${c}-${n}`,
      group: c,
      x: cluster.x + Math.cos(angle) * radius,
      y: cluster.y + Math.sin(angle) * radius
    });
  }
}

// Create links: each non-center node connected to its cluster center
const links = [];
for (let c = 0; c < clusterCount; c++) {
  const centerId = `cluster-${c}-center`;
  for (let n = 1; n < nodesPerCluster; n++) {
    const nodeId = `node-${c}-${n}`;
    links.push({
      source: centerId,
      target: nodeId,
      value: 1
    });
  }
}

// Color scale for clusters
const color = d3.scaleOrdinal(d3.schemeCategory10);

// Create link elements
const link = g.append("g")
  .selectAll("line")
  .data(links)
  .join("line")
  .attr("class", "link")
  .attr("stroke-width", d => Math.sqrt(d.value) * 2);

// Create node elements and labels
const node = g.append("g")
  .selectAll("circle")
  .data(nodes)
  .join("circle")
  .attr("class", "node")
  .attr("r", 8)
  .attr("fill", d => color(d.group))
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));

const label = g.append("g")
  .selectAll("text")
  .data(nodes)
  .join("text")
  .attr("class", "label")
  .text(d => d.id.split('-')[1]) // Show cluster number for simplicity
  .attr("dx", 12)
  .attr("dy", 4);

// Set up force simulation
const simulation = d3.forceSimulation(nodes)
  .force("link", d3.forceLink(links).id(d => d.id).distance(100))
  .force("charge", d3.forceManyBody().strength(-300))
  .force("center", d3.forceCenter(width / 2, height / 2))
  .force("collision", d3.forceCollide().radius(12));

// Update positions on tick
simulation.on("tick", () => {
  link
    .attr("x1", d => d.source.x)
    .attr("y1", d => d.source.y)
    .attr("x2", d => d.target.x)
    .attr("y2", d => d.target.y);

  node
    .attr("cx", d => d.x)
    .attr("cy", d => d.y);

  label
    .attr("x", d => d.x)
    .attr("y", d => d.y);
});

// Drag handlers
function dragstarted(event, d) {
  if (!event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
  node.classed("dragging", dragged => dragged === d);
}

function dragged(event, d) {
  d.fx = event.x;
  d.fy = event.y;
}

function dragended(event, d) {
  if (!event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
  node.classed("dragging", false);
}

// Hover highlighting
node.on("mouseover", (event, d) => {
  // Highlight this node and connected links
  const connectedNodes = new Set([d.id]);
  links.forEach(l => {
    if (l.source.id === d.id || l.target.id === d.id) {
      connectedNodes.add(l.source.id);
      connectedNodes.add(l.target.id);
    }
  });

  // Fade unconnected nodes and links
  node.classed("faded", n => !connectedNodes.has(n.id));
  link.classed("faded", l => !(l.source.id === d.id || l.target.id === d.id));
  // Highlight current node and links
  node.classed("highlighted", n => n.id === d.id);
  link.classed("highlighted", l => l.source.id === d.id || l.target.id === d.id);
})
.on("mouseout", () => {
  // Reset all classes
  node.classed("faded highlighted", false);
  link.classed("faded highlighted", false);
});

Wait, also, need to handle window resize? Maybe add a resize listener to adjust the svg size. But maybe optional, but good to have.

Also, make sure that the d3 library is loaded correctly. Since we're using local d3.min.js, the script tag will load it.

Now, put all together into index.html. Let's write the full file:

Wait, let's check: all CSS is in <style>, JS in <script> tags, inline, no external resources. The d3.min.js is present, so src="d3.min.js" is correct.

Wait, also, in D3 v7, the force simulation uses event.transform correctly? Yes, the zoom handler uses event.transform for g.attr("transform", event.transform).

Also, the drag handlers: in D3 v7, the drag event passes (event, d) instead of (d, event), which I have correct here.

Let's adjust the color scale: d3.schemeCategory10 has 10 colors, which is more than enough for 4 clusters.

Also, the nodes: 4 clusters, 10 each, total 40, perfect.

Wait, let's count: cluster 0 has center +9 nodes =10, cluster1 same, cluster2, cluster3: 4*10=40, yes.

Links: each non-center node connects to cluster center, so 9 per cluster, 4*9=36 links, that's fine.

The hover functionality: when you hover a node, it highlights itself and its connected links, fades others. That's what the mouseover handler does: collects all connected nodes, then fades the rest.

Draggable nodes: yes, the drag call on the node selection, with dragstarted, dragged, dragended functions that set fx and fy, which the simulation uses.

Zoom/pan: the svg calls d3.zoom, and the g group is transformed on zoom.

Now, let's write the full index.html file, combining all this.

Wait, also, add a resize handler to update the svg width and height when the window resizes:

window.addEventListener('resize', () => {
  const newWidth = window.innerWidth;
  const newHeight = window.innerHeight;
  svg.attr('width', newWidth).attr('height', newHeight);
  simulation.force('center', d3.forceCenter(newWidth / 2, newHeight / 2)).restart();
});

That's a nice touch.

Now, let's put all together into the index.html file. Let's write the full code:

Wait, let's start:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Force-Directed Graph</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: sans-serif;
    }
    .graph-container {
      width: 100vw;
      height: 100vh;
    }
    .node {
      stroke: #fff;
      stroke-width: 1.5px;
      cursor: grab;
    }
    .node.dragging {
      cursor: grabbing;
    }
    .link {
      stroke: #999;
      stroke-opacity: 0.6;
      stroke-width: 2px;
    }
    .highlighted {
      stroke: #ff7f0e;
      stroke-width: 3px;
    }
    .link.highlighted {
      stroke-opacity: 1;
      stroke: #ff7f0e;
    }
    .faded {
      opacity: 0.15;
    }
    .label {
      font-size: 12px;
      pointer-events: none;
      fill: #333;
      text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
    }
  </style>
</head>
<body>
  <div class="graph-container"></div>

  <script src="d3.min.js"></script>
  <script>
    // Initialize graph dimensions
    const container = d3.select(".graph-container");
    let width = window.innerWidth;
    let height = window.innerHeight;

    // Create SVG and zoomable group
    const svg = container
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .call(d3.zoom().on("zoom", (event) => {
        graphGroup.attr("transform", event.transform);
      }));

    const graphGroup = svg.append("g");

    // Generate 4 clusters with ~10 nodes each (total 40 nodes)
    const clusterCount = 4;
    const nodesPerCluster = 10;
    const totalNodes = clusterCount * nodesPerCluster;

    // Create cluster center positions
    const clusterCenters = Array.from({ length: clusterCount }, (_, i) => ({
      x: (width / (clusterCount + 1)) * (i + 1),
      y: height / 2 + (Math.random() - 0.5) * 100
    }));

    // Generate nodes
    const nodes = [];
    for (let clusterIdx = 0; clusterIdx < clusterCount; clusterIdx++) {
      const center = clusterCenters[clusterIdx];
      // Add cluster center node
      nodes.push({
        id: `cluster-${clusterIdx}-center`,
        group: clusterIdx
      });
      // Add peripheral nodes around the center
      for (let nodeIdx = 1; nodeIdx < nodesPerCluster; nodeIdx++) {
        const angle = (Math.PI * 2 * nodeIdx) / (nodesPerCluster - 1);
        const radius = 40 + Math.random() * 30;
        nodes.push({
          id: `node-${clusterIdx}-${nodeIdx}`,
          group: clusterIdx,
          x: center.x + Math.cos(angle) * radius,
          y: center.y + Math.sin(angle) * radius
        });
      }
    }

    // Generate links: each peripheral node connected to its cluster center
    const links = [];
    for (let clusterIdx = 0; clusterIdx < clusterCount; clusterIdx++) {
      const centerId = `cluster-${clusterIdx}-center`;
      for (let nodeIdx = 1; nodeIdx < nodesPerCluster; nodeIdx++) {
        const nodeId = `node-${clusterIdx}-${nodeIdx}`;
        links.push({
          source: centerId,
          target: nodeId,
          value: 1
        });
      }
    }

    // Color scale for clusters
    const colorScale = d3.scaleOrdinal(d3.schemeCategory10);

    // Create link elements
    const linkElements = graphGroup.append("g")
      .selectAll("line")
      .data(links)
      .join("line")
      .attr("class", "link");

    // Create node circles
    const nodeElements = graphGroup.append("g")
      .selectAll("circle")
      .data(nodes)
      .join("circle")
      .attr("class", "node")
      .attr("r", 8)
      .attr("fill", d => colorScale(d.group))
      .call(d3.drag()
        .on("start", dragStarted)
        .on("drag", dragged)
        .on("end", dragEnded));

    // Create node labels
    const labelElements = graphGroup.append("g")
      .selectAll("text")
      .data(nodes)
      .join("text")
      .attr("class", "label")
      .text(d => {
        // Simplify label: show cluster number for center nodes, node index otherwise
        return d.id.includes("center") ? `C${d.group}` : `N${d.group}.${d.id.split('-')[2]}`;
      })
      .attr("dx", 12)
      .attr("dy", 4);

    // Set up force simulation
    const simulation = d3.forceSimulation(nodes)
      .force("link", d3.forceLink(links).id(d => d.id).distance(120))
      .force("charge", d3.forceManyBody().strength(-400))
      .force("center", d3.forceCenter(width / 2, height / 2))
      .force("collision", d3.forceCollide().radius(14));

    // Update positions on simulation tick
    simulation.on("tick", () => {
      linkElements
        .attr("x1", d => d.source.x)
        .attr("y1", d => d.source.y)
        .attr("x2", d => d.target.x)
        .attr("y2", d => d.target.y);

      nodeElements
        .attr("cx", d => d.x)
        .attr("cy", d => d.y);

      labelElements
        .attr("x", d => d.x)
        .attr("y", d => d.y);
    });

    // Drag event handlers
    function dragStarted(event, d) {
      if (!event.active) simulation.alphaTarget(0.3).restart();
      d.fx = d.x;
      d.fy = d.y;
      nodeElements.classed("dragging", node => node === d);
    }

    function dragged(event, d) {
      d.fx = event.x;
      d.fy = event.y;
    }

    function dragEnded(event, d) {
      if (!event.active) simulation.alphaTarget(0);
      d.fx = null;
      d.fy = null;
      nodeElements.classed("dragging", false);
    }

    // Hover highlight functionality
    nodeElements.on("mouseover", (event, d) => {
      // Collect all connected nodes and links
      const connectedIds = new Set([d.id]);
      links.forEach(link => {
        const sourceId = typeof link.source === "object" ? link.source.id : link.source;
        const targetId = typeof link.target === "object" ? link.target.id : link.target;
        if (sourceId === d.id || targetId === d.id) {
          connectedIds.add(sourceId);
          connectedIds.add(targetId);
        }
      });

      // Update classes for highlighting/fading
      nodeElements.classed("faded", node => !connectedIds.has(node.id));
      linkElements.classed("faded", link => {
        const s = typeof link.source === "object" ? link.source.id : link.source;
        const t = typeof link.target === "object" ? link.target.id : link.target;
        return !(s === d.id || t === d.id);
      });
      nodeElements.classed("highlighted", node => node.id === d.id);
      linkElements.classed("highlighted", link => {
        const s = typeof link.source === "object" ? link.source.id : link.source;
        const t = typeof link.target === "object" ? link.target.id : link.target;
        return s === d.id || t === d.id;
      });
    })
    .on("mouseout", () => {
      // Reset all highlight/fade classes
      nodeElements.classed("faded highlighted", false);
      linkElements.classed("faded highlighted", false);
    });

    // Handle window resize
    window.addEventListener("resize", () => {
      width = window.innerWidth;
      height = window.innerHeight;
      svg.attr("width", width).attr("height", height);
      simulation.force("center", d3.forceCenter(width / 2, height / 2)).restart();
    });
  </script>
</body>
</html>

Wait, that's better. I fixed the link source/target checking, because in D3, sometimes the source and target are objects or strings depending on the simulation state. So added checks for typeof link.source === "object" to get the id.

Also, the labels are simplified: C0, C1, etc. for cluster centers, and N0.1, N0.2, etc. for the peripheral nodes. That's easy to read.

Also, added text shadow to the labels so they're readable over the nodes and links.

The collision force prevents nodes from overlapping, which is nice.

The zoom/pan works, drag works, hover highlights neighbors, 40 nodes total, 4 clusters.

Now, I need to write this file to /tmp/ws/index.html. Let's use the write tool.

Great, the file was written successfully. Now let's verify that everything is correct: the index.html has all the required features:

1. Self-contained single file, CSS in style tag, JS in script tags, uses local d3.min.js.
2. 40 nodes total: 4 clusters ×10 nodes each (1 center +9 peripherals per cluster).
3. Draggable nodes: yes, the drag handlers are set up.
4. Hover highlighting: when you hover a node, it and its connected links are highlighted, others are faded.
5. Zoom/pan: the svg has d3.zoom behavior attached.
6. Cluster coloring using d3's schemeCategory10.
7. Responsive to window resize.
8. Labels for nodes showing cluster and node number.

All the requirements are met. Now I can confirm that the app is ready to run.