From 2ea421990fb60b9ddd0f247a0bdf494bf942afe0 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 21 Sep 2025 12:42:28 +0000
Subject: [PATCH 1/6] Initial plan


From ea9bf4545a26917b67a6503b8ff995c585bbd9d2 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 21 Sep 2025 12:44:56 +0000
Subject: [PATCH 2/6] Initial plan for adding --graph-report feature

Co-authored-by: dreamquality <130073078+dreamquality@users.noreply.github.com>
---
 auto-detect-newman.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/auto-detect-newman.html b/auto-detect-newman.html
index d4d7d0e..42c36e0 100644
--- a/auto-detect-newman.html
+++ b/auto-detect-newman.html
@@ -384,7 +384,7 @@ <h1>Swagger Coverage Report</h1>
     &#128262; <!-- flashlight icon -->
   </button>
   <div class="meta-info">
-    <p><strong>Timestamp:</strong> 9/18/2025, 2:32:58 PM</p>
+    <p><strong>Timestamp:</strong> 9/21/2025, 12:44:21 PM</p>
     <p><strong>API Spec:</strong> Test API</p>
     
     <p><strong>Postman Collection:</strong> Test Newman Collection</p>

From 3f611e0da132a77179fbe18b030d81907a4ec526 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 21 Sep 2025 12:50:03 +0000
Subject: [PATCH 3/6] Add --graph-report CLI flag with D3.js graph
 visualization

Co-authored-by: dreamquality <130073078+dreamquality@users.noreply.github.com>
---
 auto-detect-newman.html   |   2 +-
 cli.js                    |  25 ++-
 lib/report.js             | 414 +++++++++++++++++++++++++++++++++++++-
 test/graph-report.test.js |  70 +++++++
 test/report.test.js       |  40 +++-
 5 files changed, 545 insertions(+), 6 deletions(-)
 create mode 100644 test/graph-report.test.js

diff --git a/auto-detect-newman.html b/auto-detect-newman.html
index 42c36e0..dde1dd8 100644
--- a/auto-detect-newman.html
+++ b/auto-detect-newman.html
@@ -384,7 +384,7 @@ <h1>Swagger Coverage Report</h1>
     &#128262; <!-- flashlight icon -->
   </button>
   <div class="meta-info">
-    <p><strong>Timestamp:</strong> 9/21/2025, 12:44:21 PM</p>
+    <p><strong>Timestamp:</strong> 9/21/2025, 12:48:06 PM</p>
     <p><strong>API Spec:</strong> Test API</p>
     
     <p><strong>Postman Collection:</strong> Test Newman Collection</p>
diff --git a/cli.js b/cli.js
index f877d4a..5300810 100755
--- a/cli.js
+++ b/cli.js
@@ -9,7 +9,7 @@ const { loadAndParseSpec, extractOperationsFromSpec } = require("./lib/swagger")
 const { loadPostmanCollection, extractRequestsFromPostman } = require("./lib/postman");
 const { loadNewmanReport, extractRequestsFromNewman } = require("./lib/newman");
 const { matchOperationsDetailed } = require("./lib/match");
-const { generateHtmlReport } = require("./lib/report");
+const { generateHtmlReport, generateGraphHtmlReport } = require("./lib/report");
 const { loadExcelSpec } = require("./lib/excel");
 const { loadAndParseProto, extractOperationsFromProto, isProtoFile } = require("./lib/grpc");
 const { loadAndParseGraphQL, extractOperationsFromGraphQL, isGraphQLFile } = require("./lib/graphql");
@@ -29,9 +29,10 @@ program
   .option("--strict-body", "Enable strict validation of requestBody (JSON)")
   .option("--output <file>", "HTML report output file", "coverage-report.html")
   .option("--newman", "Treat input file as Newman run report instead of Postman collection")
+  .option("--graph-report", "Generate a separate graph schema HTML report showing API test coverage with nodes and edges")
   .action(async (apiFiles, postmanFile, options) => {
     try {
-      const { verbose, strictQuery, strictBody, output, newman } = options;
+      const { verbose, strictQuery, strictBody, output, newman, graphReport } = options;
 
       // Parse comma-separated API files
       const files = apiFiles.includes(',') ? 
@@ -217,6 +218,26 @@ program
 
       fs.writeFileSync(path.resolve(output), html, "utf8");
       console.log(`\nHTML report saved to: ${output}`);
+
+      // 8. Generate graph report if requested
+      if (graphReport) {
+        const graphOutputFile = output.replace(/\.html?$/i, '-graph.html');
+        const graphHtml = generateGraphHtmlReport({
+          coverage,
+          coverageItems,
+          meta: {
+            timestamp: new Date().toLocaleString(),
+            specName: combinedSpecName,
+            postmanCollectionName: collectionName,
+            undocumentedRequests,
+            apiCount: files.length,
+            apiNames: allSpecNames
+          },
+        });
+
+        fs.writeFileSync(path.resolve(graphOutputFile), graphHtml, "utf8");
+        console.log(`Graph report saved to: ${graphOutputFile}`);
+      }
     } catch (err) {
       console.error("Error:", err.message);
       process.exit(1);
diff --git a/lib/report.js b/lib/report.js
index a91076e..17b6344 100644
--- a/lib/report.js
+++ b/lib/report.js
@@ -1069,5 +1069,415 @@ function generateHtmlReport({ coverage, coverageItems, meta }) {
   return html;
 }
 
-// Export the function
-module.exports = { generateHtmlReport };
+/**
+ * generateGraphHtmlReport - generates a graph visualization of API coverage
+ * using D3.js to show nodes (endpoints) and edges (dependencies) with color coding
+ */
+function generateGraphHtmlReport({ coverage, coverageItems, meta }) {
+  const { timestamp, specName, postmanCollectionName, apiCount = 1, apiNames = [] } = meta;
+  
+  // Prepare graph data structure
+  const nodes = [];
+  const links = [];
+  const nodeMap = new Map();
+  let nodeId = 0;
+
+  // Create nodes for each operation
+  coverageItems.forEach((item, index) => {
+    const id = `node-${nodeId++}`;
+    const status = item.unmatched ? 'not-covered' : 
+                  (item.matchedRequests && item.matchedRequests.length > 0 ? 'covered' : 'partial');
+    
+    const node = {
+      id,
+      name: item.name || `${item.method} ${item.path}`,
+      method: item.method,
+      path: item.path,
+      status,
+      apiName: item.apiName || '',
+      coverage: item.unmatched ? 0 : 100,
+      group: item.tags && item.tags.length > 0 ? item.tags[0] : 'default'
+    };
+    
+    nodes.push(node);
+    nodeMap.set(`${item.method}-${item.path}`, node);
+  });
+
+  // Create edges based on path relationships (simple heuristic)
+  for (let i = 0; i < nodes.length; i++) {
+    for (let j = i + 1; j < nodes.length; j++) {
+      const nodeA = nodes[i];
+      const nodeB = nodes[j];
+      
+      // Create links between nodes that share similar paths or are in the same group
+      if (nodeA.group === nodeB.group && nodeA.group !== 'default') {
+        links.push({
+          source: nodeA.id,
+          target: nodeB.id,
+          type: 'same-group'
+        });
+      } else if (nodeA.path.includes(nodeB.path) || nodeB.path.includes(nodeA.path)) {
+        links.push({
+          source: nodeA.id,
+          target: nodeB.id,
+          type: 'path-related'
+        });
+      }
+    }
+  }
+
+  const graphDataJson = JSON.stringify({ nodes, links });
+
+  const html = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>API Coverage Graph Report</title>
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+  <style>
+    body {
+      margin: 0;
+      font-family: 'Roboto', sans-serif;
+      background-color: #fafafa;
+      color: #212121;
+    }
+    
+    header {
+      padding: 16px;
+      background-color: #ffffff;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      text-align: center;
+    }
+    
+    h1 {
+      margin: 0 0 8px 0;
+      font-size: 1.8rem;
+      color: #6200ee;
+    }
+    
+    .meta-info {
+      font-size: 0.9em;
+      opacity: 0.8;
+      margin-bottom: 16px;
+    }
+    
+    .controls {
+      text-align: center;
+      padding: 16px;
+      background-color: #ffffff;
+      border-bottom: 1px solid #e0e0e0;
+    }
+    
+    .legend {
+      display: inline-block;
+      margin: 0 20px;
+    }
+    
+    .legend-item {
+      display: inline-block;
+      margin: 0 10px;
+      font-size: 0.9em;
+    }
+    
+    .legend-color {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      margin-right: 5px;
+      vertical-align: middle;
+    }
+    
+    .covered { background-color: #4caf50; }
+    .partial { background-color: #ff9800; }
+    .not-covered { background-color: #f44336; }
+    
+    #graph-container {
+      width: 100%;
+      height: calc(100vh - 200px);
+      min-height: 600px;
+      background-color: #ffffff;
+      position: relative;
+    }
+    
+    .node {
+      cursor: pointer;
+      stroke: #333;
+      stroke-width: 2px;
+    }
+    
+    .node.covered {
+      fill: #4caf50;
+    }
+    
+    .node.partial {
+      fill: #ff9800;
+    }
+    
+    .node.not-covered {
+      fill: #f44336;
+    }
+    
+    .link {
+      stroke: #999;
+      stroke-opacity: 0.6;
+      stroke-width: 2px;
+    }
+    
+    .link.same-group {
+      stroke: #6200ee;
+      stroke-width: 3px;
+    }
+    
+    .link.path-related {
+      stroke: #2196f3;
+      stroke-dasharray: 5,5;
+    }
+    
+    .node-label {
+      font-size: 12px;
+      text-anchor: middle;
+      pointer-events: none;
+      fill: #333;
+    }
+    
+    .tooltip {
+      position: absolute;
+      background-color: rgba(0, 0, 0, 0.8);
+      color: white;
+      padding: 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      pointer-events: none;
+      z-index: 100;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    
+    .zoom-controls {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      z-index: 10;
+    }
+    
+    .zoom-btn {
+      display: block;
+      width: 40px;
+      height: 40px;
+      margin: 5px 0;
+      background-color: #6200ee;
+      color: white;
+      border: none;
+      border-radius: 50%;
+      cursor: pointer;
+      font-size: 18px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    }
+    
+    .zoom-btn:hover {
+      background-color: #7c4dff;
+    }
+    
+    footer {
+      text-align: center;
+      padding: 16px;
+      background-color: #f5f5f5;
+      border-top: 1px solid #e0e0e0;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>API Coverage Graph Report</h1>
+    <div class="meta-info">
+      <p><strong>Timestamp:</strong> ${timestamp}</p>
+      <p><strong>API Spec${apiCount > 1 ? 's' : ''}:</strong> ${specName}</p>
+      ${apiCount > 1 ? `<p><strong>Individual APIs:</strong> ${apiNames.join(', ')}</p>` : ''}
+      <p><strong>Postman Collection:</strong> ${postmanCollectionName}</p>
+      <p><strong>Overall Coverage:</strong> ${coverage.toFixed(2)}%</p>
+    </div>
+  </header>
+  
+  <div class="controls">
+    <div class="legend">
+      <h3 style="margin: 0 0 10px 0;">Coverage Status</h3>
+      <div class="legend-item">
+        <span class="legend-color covered"></span>
+        <span>Covered (${coverageItems.filter(item => !item.unmatched && item.matchedRequests && item.matchedRequests.length > 0).length})</span>
+      </div>
+      <div class="legend-item">
+        <span class="legend-color partial"></span>
+        <span>Partial (${coverageItems.filter(item => !item.unmatched && (!item.matchedRequests || item.matchedRequests.length === 0)).length})</span>
+      </div>
+      <div class="legend-item">
+        <span class="legend-color not-covered"></span>
+        <span>Not Covered (${coverageItems.filter(item => item.unmatched).length})</span>
+      </div>
+    </div>
+  </div>
+  
+  <div id="graph-container">
+    <div class="zoom-controls">
+      <button class="zoom-btn" onclick="zoomIn()">+</button>
+      <button class="zoom-btn" onclick="zoomOut()">−</button>
+      <button class="zoom-btn" onclick="resetZoom()">⌂</button>
+    </div>
+    <div class="tooltip" id="tooltip"></div>
+  </div>
+  
+  <footer>
+    <p>Generated by swagger-coverage-cli - Graph visualization shows API endpoints as nodes with coverage status color coding</p>
+  </footer>
+
+  <script>
+    // Graph data
+    const graphData = ${graphDataJson};
+    
+    // Set up SVG
+    const container = d3.select('#graph-container');
+    const containerNode = container.node();
+    const width = containerNode.clientWidth;
+    const height = containerNode.clientHeight;
+    
+    const svg = container.append('svg')
+      .attr('width', width)
+      .attr('height', height);
+    
+    const g = svg.append('g');
+    
+    // Set up zoom behavior
+    const zoom = d3.zoom()
+      .scaleExtent([0.1, 3])
+      .on('zoom', (event) => {
+        g.attr('transform', event.transform);
+      });
+    
+    svg.call(zoom);
+    
+    // Set up force simulation
+    const simulation = d3.forceSimulation(graphData.nodes)
+      .force('link', d3.forceLink(graphData.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(30));
+    
+    // Create links
+    const link = g.append('g')
+      .selectAll('line')
+      .data(graphData.links)
+      .enter().append('line')
+      .attr('class', d => \`link \${d.type}\`);
+    
+    // Create nodes
+    const node = g.append('g')
+      .selectAll('circle')
+      .data(graphData.nodes)
+      .enter().append('circle')
+      .attr('class', d => \`node \${d.status}\`)
+      .attr('r', 20)
+      .call(d3.drag()
+        .on('start', dragstarted)
+        .on('drag', dragged)
+        .on('end', dragended))
+      .on('mouseover', showTooltip)
+      .on('mouseout', hideTooltip);
+    
+    // Add labels
+    const label = g.append('g')
+      .selectAll('text')
+      .data(graphData.nodes)
+      .enter().append('text')
+      .attr('class', 'node-label')
+      .text(d => d.method)
+      .attr('dy', 5);
+    
+    // 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 functions
+    function dragstarted(event, d) {
+      if (!event.active) simulation.alphaTarget(0.3).restart();
+      d.fx = d.x;
+      d.fy = d.y;
+    }
+    
+    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;
+    }
+    
+    // Tooltip functions
+    function showTooltip(event, d) {
+      const tooltip = d3.select('#tooltip');
+      tooltip
+        .style('opacity', 1)
+        .style('left', (event.pageX + 10) + 'px')
+        .style('top', (event.pageY + 10) + 'px')
+        .html(\`
+          <strong>\${d.name}</strong><br/>
+          Method: \${d.method}<br/>
+          Path: \${d.path}<br/>
+          Status: \${d.status.replace('-', ' ')}<br/>
+          \${d.apiName ? \`API: \${d.apiName}<br/>\` : ''}
+          Group: \${d.group}
+        \`);
+    }
+    
+    function hideTooltip() {
+      d3.select('#tooltip').style('opacity', 0);
+    }
+    
+    // Zoom controls
+    function zoomIn() {
+      svg.transition().call(zoom.scaleBy, 1.5);
+    }
+    
+    function zoomOut() {
+      svg.transition().call(zoom.scaleBy, 1 / 1.5);
+    }
+    
+    function resetZoom() {
+      svg.transition().call(zoom.transform, d3.zoomIdentity);
+    }
+    
+    // Handle window resize
+    window.addEventListener('resize', () => {
+      const newWidth = containerNode.clientWidth;
+      const newHeight = containerNode.clientHeight;
+      svg.attr('width', newWidth).attr('height', newHeight);
+      simulation.force('center', d3.forceCenter(newWidth / 2, newHeight / 2));
+      simulation.alpha(0.3).restart();
+    });
+  </script>
+</body>
+</html>
+`;
+
+  return html;
+}
+
+// Export the functions
+module.exports = { generateHtmlReport, generateGraphHtmlReport };
diff --git a/test/graph-report.test.js b/test/graph-report.test.js
new file mode 100644
index 0000000..13c91da
--- /dev/null
+++ b/test/graph-report.test.js
@@ -0,0 +1,70 @@
+const { exec } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+describe('Graph Report Integration', () => {
+  const testApiFile = path.join(__dirname, 'fixtures', 'sample-api.yaml');
+  const testCollectionFile = path.join(__dirname, 'fixtures', 'test-collection.json');
+  const outputFile = path.join(__dirname, '..', 'tmp', 'test-graph-report.html');
+  const graphOutputFile = path.join(__dirname, '..', 'tmp', 'test-graph-report-graph.html');
+
+  beforeAll(() => {
+    // Ensure tmp directory exists
+    const tmpDir = path.dirname(outputFile);
+    if (!fs.existsSync(tmpDir)) {
+      fs.mkdirSync(tmpDir, { recursive: true });
+    }
+  });
+
+  afterEach(() => {
+    // Clean up generated files
+    if (fs.existsSync(outputFile)) {
+      fs.unlinkSync(outputFile);
+    }
+    if (fs.existsSync(graphOutputFile)) {
+      fs.unlinkSync(graphOutputFile);
+    }
+  });
+
+  test('CLI should generate graph report when --graph-report flag is used', (done) => {
+    const command = `node cli.js --graph-report --output ${outputFile} ${testApiFile} ${testCollectionFile}`;
+    
+    exec(command, { cwd: path.join(__dirname, '..') }, (error, stdout, stderr) => {
+      expect(error).toBeNull();
+      expect(stderr).toBe('');
+      expect(stdout).toContain('HTML report saved to');
+      expect(stdout).toContain('Graph report saved to');
+      
+      // Check that both files were created
+      expect(fs.existsSync(outputFile)).toBe(true);
+      expect(fs.existsSync(graphOutputFile)).toBe(true);
+      
+      // Check content of graph report
+      const graphContent = fs.readFileSync(graphOutputFile, 'utf8');
+      expect(graphContent).toContain('API Coverage Graph Report');
+      expect(graphContent).toContain('d3js.org');
+      expect(graphContent).toContain('Coverage Status');
+      expect(graphContent).toContain('graph-container');
+      expect(graphContent).toContain('forceSimulation');
+      
+      done();
+    });
+  });
+
+  test('CLI should NOT generate graph report when --graph-report flag is not used', (done) => {
+    const command = `node cli.js --output ${outputFile} ${testApiFile} ${testCollectionFile}`;
+    
+    exec(command, { cwd: path.join(__dirname, '..') }, (error, stdout, stderr) => {
+      expect(error).toBeNull();
+      expect(stderr).toBe('');
+      expect(stdout).toContain('HTML report saved to');
+      expect(stdout).not.toContain('Graph report saved to');
+      
+      // Check that only regular report was created
+      expect(fs.existsSync(outputFile)).toBe(true);
+      expect(fs.existsSync(graphOutputFile)).toBe(false);
+      
+      done();
+    });
+  });
+});
\ No newline at end of file
diff --git a/test/report.test.js b/test/report.test.js
index 2f360e3..7df527b 100644
--- a/test/report.test.js
+++ b/test/report.test.js
@@ -1,4 +1,4 @@
-const { generateHtmlReport } = require('../lib/report');
+const { generateHtmlReport, generateGraphHtmlReport } = require('../lib/report');
 
 describe('Report Module', () => {
   test('generateHtmlReport should return HTML string', () => {
@@ -16,4 +16,42 @@ describe('Report Module', () => {
     expect(html).toContain('<html');
     expect(html).toContain('Swagger Coverage Report');
   });
+
+  test('generateGraphHtmlReport should return HTML string with graph visualization', () => {
+    const input = {
+      coverage: 75,
+      coverageItems: [
+        {
+          method: 'GET',
+          path: '/users',
+          name: 'getUsers',
+          unmatched: false,
+          matchedRequests: [{ name: 'Get Users Test' }],
+          tags: ['users']
+        },
+        {
+          method: 'POST',
+          path: '/users',
+          name: 'createUser',
+          unmatched: true,
+          matchedRequests: [],
+          tags: ['users']
+        }
+      ],
+      meta: {
+        timestamp: '2023-10-10 10:00:00',
+        specName: 'Test API',
+        postmanCollectionName: 'Test Collection',
+        apiCount: 1,
+        apiNames: ['Test API']
+      }
+    };
+    const html = generateGraphHtmlReport(input);
+    expect(typeof html).toBe('string');
+    expect(html).toContain('<html');
+    expect(html).toContain('API Coverage Graph Report');
+    expect(html).toContain('d3js.org');
+    expect(html).toContain('Coverage Status');
+    expect(html).toContain('75.00%');
+  });
 });
\ No newline at end of file

From 0ee53419c3198f4322afecd2a3b06c062ed9fe63 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 21 Sep 2025 12:51:21 +0000
Subject: [PATCH 4/6] Complete implementation of --graph-report feature with
 comprehensive testing

Co-authored-by: dreamquality <130073078+dreamquality@users.noreply.github.com>
---
 auto-detect-newman.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/auto-detect-newman.html b/auto-detect-newman.html
index dde1dd8..925dcfc 100644
--- a/auto-detect-newman.html
+++ b/auto-detect-newman.html
@@ -384,7 +384,7 @@ <h1>Swagger Coverage Report</h1>
     &#128262; <!-- flashlight icon -->
   </button>
   <div class="meta-info">
-    <p><strong>Timestamp:</strong> 9/21/2025, 12:48:06 PM</p>
+    <p><strong>Timestamp:</strong> 9/21/2025, 12:50:58 PM</p>
     <p><strong>API Spec:</strong> Test API</p>
     
     <p><strong>Postman Collection:</strong> Test Newman Collection</p>

From 2581ebfe8e72d50695c59e70daf55e5fa8c853ab Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 21 Sep 2025 19:36:19 +0000
Subject: [PATCH 5/6] Improve graph schema to expandable tree structure with
 hierarchical organization

Co-authored-by: dreamquality <130073078+dreamquality@users.noreply.github.com>
---
 auto-detect-newman.html   |   2 +-
 lib/report.js             | 547 +++++++++++++++++++++++++-------------
 test/graph-report.test.js |   6 +-
 test/report.test.js       |   2 +-
 4 files changed, 367 insertions(+), 190 deletions(-)

diff --git a/auto-detect-newman.html b/auto-detect-newman.html
index 925dcfc..6b3008c 100644
--- a/auto-detect-newman.html
+++ b/auto-detect-newman.html
@@ -384,7 +384,7 @@ <h1>Swagger Coverage Report</h1>
     &#128262; <!-- flashlight icon -->
   </button>
   <div class="meta-info">
-    <p><strong>Timestamp:</strong> 9/21/2025, 12:50:58 PM</p>
+    <p><strong>Timestamp:</strong> 9/21/2025, 7:35:43 PM</p>
     <p><strong>API Spec:</strong> Test API</p>
     
     <p><strong>Postman Collection:</strong> Test Newman Collection</p>
diff --git a/lib/report.js b/lib/report.js
index 17b6344..335b8fb 100644
--- a/lib/report.js
+++ b/lib/report.js
@@ -1070,63 +1070,106 @@ function generateHtmlReport({ coverage, coverageItems, meta }) {
 }
 
 /**
- * generateGraphHtmlReport - generates a graph visualization of API coverage
- * using D3.js to show nodes (endpoints) and edges (dependencies) with color coding
+ * generateGraphHtmlReport - generates an expandable tree visualization of API coverage
+ * using D3.js to show hierarchical structure with expandable nodes and color coding
  */
 function generateGraphHtmlReport({ coverage, coverageItems, meta }) {
   const { timestamp, specName, postmanCollectionName, apiCount = 1, apiNames = [] } = meta;
   
-  // Prepare graph data structure
-  const nodes = [];
-  const links = [];
-  const nodeMap = new Map();
-  let nodeId = 0;
-
-  // Create nodes for each operation
-  coverageItems.forEach((item, index) => {
-    const id = `node-${nodeId++}`;
-    const status = item.unmatched ? 'not-covered' : 
-                  (item.matchedRequests && item.matchedRequests.length > 0 ? 'covered' : 'partial');
-    
-    const node = {
-      id,
-      name: item.name || `${item.method} ${item.path}`,
-      method: item.method,
-      path: item.path,
-      status,
-      apiName: item.apiName || '',
-      coverage: item.unmatched ? 0 : 100,
-      group: item.tags && item.tags.length > 0 ? item.tags[0] : 'default'
+  // Create hierarchical tree structure
+  function buildHierarchy(items) {
+    const root = {
+      name: 'API Coverage',
+      children: [],
+      type: 'root',
+      status: 'root'
     };
-    
-    nodes.push(node);
-    nodeMap.set(`${item.method}-${item.path}`, node);
-  });
-
-  // Create edges based on path relationships (simple heuristic)
-  for (let i = 0; i < nodes.length; i++) {
-    for (let j = i + 1; j < nodes.length; j++) {
-      const nodeA = nodes[i];
-      const nodeB = nodes[j];
-      
-      // Create links between nodes that share similar paths or are in the same group
-      if (nodeA.group === nodeB.group && nodeA.group !== 'default') {
-        links.push({
-          source: nodeA.id,
-          target: nodeB.id,
-          type: 'same-group'
+
+    // Group by API name first (if multiple APIs)
+    const apiGroups = {};
+    items.forEach(item => {
+      const apiName = item.apiName || 'Main API';
+      if (!apiGroups[apiName]) {
+        apiGroups[apiName] = [];
+      }
+      apiGroups[apiName].push(item);
+    });
+
+    Object.keys(apiGroups).forEach(apiName => {
+      const apiNode = {
+        name: apiName,
+        children: [],
+        type: 'api',
+        status: 'group'
+      };
+
+      // Group by tags within each API
+      const tagGroups = {};
+      apiGroups[apiName].forEach(item => {
+        const tag = (item.tags && item.tags.length > 0) ? item.tags[0] : 'General';
+        if (!tagGroups[tag]) {
+          tagGroups[tag] = [];
+        }
+        tagGroups[tag].push(item);
+      });
+
+      Object.keys(tagGroups).forEach(tag => {
+        const tagNode = {
+          name: tag,
+          children: [],
+          type: 'tag',
+          status: 'group'
+        };
+
+        // Group by base path within each tag
+        const pathGroups = {};
+        tagGroups[tag].forEach(item => {
+          const basePath = item.path.split('/').slice(0, 3).join('/') || '/';
+          if (!pathGroups[basePath]) {
+            pathGroups[basePath] = [];
+          }
+          pathGroups[basePath].push(item);
         });
-      } else if (nodeA.path.includes(nodeB.path) || nodeB.path.includes(nodeA.path)) {
-        links.push({
-          source: nodeA.id,
-          target: nodeB.id,
-          type: 'path-related'
+
+        Object.keys(pathGroups).forEach(basePath => {
+          const pathNode = {
+            name: basePath,
+            children: [],
+            type: 'path',
+            status: 'group'
+          };
+
+          // Add individual endpoints
+          pathGroups[basePath].forEach(item => {
+            const status = item.unmatched ? 'not-covered' : 
+                          (item.matchedRequests && item.matchedRequests.length > 0 ? 'covered' : 'partial');
+            
+            pathNode.children.push({
+              name: `${item.method} ${item.path}`,
+              method: item.method,
+              path: item.path,
+              status,
+              type: 'endpoint',
+              coverage: item.unmatched ? 0 : 100,
+              matchedRequests: item.matchedRequests || [],
+              operationName: item.name
+            });
+          });
+
+          tagNode.children.push(pathNode);
         });
-      }
-    }
+
+        apiNode.children.push(tagNode);
+      });
+
+      root.children.push(apiNode);
+    });
+
+    return root;
   }
 
-  const graphDataJson = JSON.stringify({ nodes, links });
+  const treeData = buildHierarchy(coverageItems);
+  const treeDataJson = JSON.stringify(treeData);
 
   const html = `
 <!DOCTYPE html>
@@ -1134,7 +1177,7 @@ function generateGraphHtmlReport({ coverage, coverageItems, meta }) {
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>API Coverage Graph Report</title>
+  <title>API Coverage Tree Report</title>
   <script src="https://d3js.org/d3.v7.min.js"></script>
   <style>
     body {
@@ -1170,6 +1213,25 @@ function generateGraphHtmlReport({ coverage, coverageItems, meta }) {
       border-bottom: 1px solid #e0e0e0;
     }
     
+    .tree-controls {
+      margin-bottom: 10px;
+    }
+    
+    .tree-btn {
+      margin: 0 5px;
+      padding: 8px 16px;
+      background-color: #6200ee;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+    
+    .tree-btn:hover {
+      background-color: #7c4dff;
+    }
+    
     .legend {
       display: inline-block;
       margin: 0 20px;
@@ -1193,54 +1255,69 @@ function generateGraphHtmlReport({ coverage, coverageItems, meta }) {
     .covered { background-color: #4caf50; }
     .partial { background-color: #ff9800; }
     .not-covered { background-color: #f44336; }
+    .group { background-color: #2196f3; }
+    .root { background-color: #9c27b0; }
     
-    #graph-container {
+    #tree-container {
       width: 100%;
-      height: calc(100vh - 200px);
+      height: calc(100vh - 250px);
       min-height: 600px;
       background-color: #ffffff;
       position: relative;
+      overflow: auto;
     }
     
-    .node {
+    .node-circle {
       cursor: pointer;
       stroke: #333;
       stroke-width: 2px;
     }
     
-    .node.covered {
+    .node-circle.covered {
       fill: #4caf50;
     }
     
-    .node.partial {
+    .node-circle.partial {
       fill: #ff9800;
     }
     
-    .node.not-covered {
+    .node-circle.not-covered {
       fill: #f44336;
     }
     
+    .node-circle.group {
+      fill: #2196f3;
+    }
+    
+    .node-circle.root {
+      fill: #9c27b0;
+    }
+    
     .link {
-      stroke: #999;
-      stroke-opacity: 0.6;
+      fill: none;
+      stroke: #666;
       stroke-width: 2px;
     }
     
-    .link.same-group {
-      stroke: #6200ee;
-      stroke-width: 3px;
+    .node-text {
+      font-size: 12px;
+      font-family: 'Roboto', sans-serif;
+      cursor: pointer;
+      user-select: none;
     }
     
-    .link.path-related {
-      stroke: #2196f3;
-      stroke-dasharray: 5,5;
+    .node-text.endpoint {
+      font-size: 11px;
+      font-weight: normal;
     }
     
-    .node-label {
-      font-size: 12px;
-      text-anchor: middle;
-      pointer-events: none;
-      fill: #333;
+    .node-text.group {
+      font-weight: bold;
+    }
+    
+    .node-text.root {
+      font-weight: bold;
+      font-size: 14px;
     }
     
     .tooltip {
@@ -1256,29 +1333,13 @@ function generateGraphHtmlReport({ coverage, coverageItems, meta }) {
       transition: opacity 0.3s;
     }
     
-    .zoom-controls {
-      position: absolute;
-      top: 20px;
-      right: 20px;
-      z-index: 10;
-    }
-    
-    .zoom-btn {
-      display: block;
-      width: 40px;
-      height: 40px;
-      margin: 5px 0;
-      background-color: #6200ee;
-      color: white;
-      border: none;
-      border-radius: 50%;
-      cursor: pointer;
-      font-size: 18px;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-    }
-    
-    .zoom-btn:hover {
-      background-color: #7c4dff;
+    .expand-symbol {
+      font-size: 12px;
+      font-weight: bold;
+      fill: #333;
+      text-anchor: middle;
+      dominant-baseline: central;
+      pointer-events: none;
     }
     
     footer {
@@ -1291,7 +1352,7 @@ function generateGraphHtmlReport({ coverage, coverageItems, meta }) {
 </head>
 <body>
   <header>
-    <h1>API Coverage Graph Report</h1>
+    <h1>API Coverage Tree Report</h1>
     <div class="meta-info">
       <p><strong>Timestamp:</strong> ${timestamp}</p>
       <p><strong>API Spec${apiCount > 1 ? 's' : ''}:</strong> ${specName}</p>
@@ -1302,6 +1363,11 @@ function generateGraphHtmlReport({ coverage, coverageItems, meta }) {
   </header>
   
   <div class="controls">
+    <div class="tree-controls">
+      <button class="tree-btn" onclick="expandAll()">Expand All</button>
+      <button class="tree-btn" onclick="collapseAll()">Collapse All</button>
+      <button class="tree-btn" onclick="centerTree()">Center View</button>
+    </div>
     <div class="legend">
       <h3 style="margin: 0 0 10px 0;">Coverage Status</h3>
       <div class="legend-item">
@@ -1316,150 +1382,261 @@ function generateGraphHtmlReport({ coverage, coverageItems, meta }) {
         <span class="legend-color not-covered"></span>
         <span>Not Covered (${coverageItems.filter(item => item.unmatched).length})</span>
       </div>
+      <div class="legend-item">
+        <span class="legend-color group"></span>
+        <span>Groups</span>
+      </div>
     </div>
   </div>
   
-  <div id="graph-container">
-    <div class="zoom-controls">
-      <button class="zoom-btn" onclick="zoomIn()">+</button>
-      <button class="zoom-btn" onclick="zoomOut()">−</button>
-      <button class="zoom-btn" onclick="resetZoom()">⌂</button>
-    </div>
+  <div id="tree-container">
     <div class="tooltip" id="tooltip"></div>
   </div>
   
   <footer>
-    <p>Generated by swagger-coverage-cli - Graph visualization shows API endpoints as nodes with coverage status color coding</p>
+    <p>Generated by swagger-coverage-cli - Expandable tree visualization shows API endpoints hierarchically with coverage status color coding</p>
   </footer>
 
   <script>
-    // Graph data
-    const graphData = ${graphDataJson};
+    // Tree data
+    const treeData = ${treeDataJson};
     
-    // Set up SVG
-    const container = d3.select('#graph-container');
+    // Set up dimensions and margins
+    const margin = { top: 20, right: 120, bottom: 20, left: 120 };
+    const container = d3.select('#tree-container');
     const containerNode = container.node();
-    const width = containerNode.clientWidth;
-    const height = containerNode.clientHeight;
+    const width = containerNode.clientWidth - margin.left - margin.right;
+    const height = containerNode.clientHeight - margin.top - margin.bottom;
     
+    // Create SVG
     const svg = container.append('svg')
-      .attr('width', width)
-      .attr('height', height);
+      .attr('width', containerNode.clientWidth)
+      .attr('height', containerNode.clientHeight);
     
-    const g = svg.append('g');
+    const g = svg.append('g')
+      .attr('transform', \`translate(\${margin.left},\${margin.top})\`);
     
     // Set up zoom behavior
     const zoom = d3.zoom()
       .scaleExtent([0.1, 3])
       .on('zoom', (event) => {
-        g.attr('transform', event.transform);
+        g.attr('transform', \`translate(\${event.transform.x + margin.left},\${event.transform.y + margin.top}) scale(\${event.transform.k})\`);
       });
     
     svg.call(zoom);
     
-    // Set up force simulation
-    const simulation = d3.forceSimulation(graphData.nodes)
-      .force('link', d3.forceLink(graphData.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(30));
+    // Create tree layout
+    const tree = d3.tree().size([height, width]);
     
-    // Create links
-    const link = g.append('g')
-      .selectAll('line')
-      .data(graphData.links)
-      .enter().append('line')
-      .attr('class', d => \`link \${d.type}\`);
+    let i = 0;
+    const duration = 500;
     
-    // Create nodes
-    const node = g.append('g')
-      .selectAll('circle')
-      .data(graphData.nodes)
-      .enter().append('circle')
-      .attr('class', d => \`node \${d.status}\`)
-      .attr('r', 20)
-      .call(d3.drag()
-        .on('start', dragstarted)
-        .on('drag', dragged)
-        .on('end', dragended))
-      .on('mouseover', showTooltip)
-      .on('mouseout', hideTooltip);
+    // Initialize the tree
+    const root = d3.hierarchy(treeData, d => d.children);
+    root.x0 = height / 2;
+    root.y0 = 0;
     
-    // Add labels
-    const label = g.append('g')
-      .selectAll('text')
-      .data(graphData.nodes)
-      .enter().append('text')
-      .attr('class', 'node-label')
-      .text(d => d.method)
-      .attr('dy', 5);
+    // Collapse all children initially except root
+    function collapse(d) {
+      if (d.children) {
+        d._children = d.children;
+        d._children.forEach(collapse);
+        d.children = null;
+      }
+    }
     
-    // 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);
+    root.children.forEach(collapse);
+    
+    update(root);
+    
+    function update(source) {
+      // Compute the new tree layout
+      const treeData = tree(root);
+      const nodes = treeData.descendants();
+      const links = treeData.descendants().slice(1);
       
-      node
-        .attr('cx', d => d.x)
-        .attr('cy', d => d.y);
+      // Normalize for fixed-depth
+      nodes.forEach(d => { d.y = d.depth * 180; });
       
-      label
-        .attr('x', d => d.x)
-        .attr('y', d => d.y);
-    });
-    
-    // Drag functions
-    function dragstarted(event, d) {
-      if (!event.active) simulation.alphaTarget(0.3).restart();
-      d.fx = d.x;
-      d.fy = d.y;
+      // Update the nodes
+      const node = g.selectAll('g.node')
+        .data(nodes, d => d.id || (d.id = ++i));
+      
+      // Enter any new nodes at the parent's previous position
+      const nodeEnter = node.enter().append('g')
+        .attr('class', 'node')
+        .attr('transform', d => \`translate(\${source.y0},\${source.x0})\`)
+        .on('click', click);
+      
+      // Add circles for the nodes
+      nodeEnter.append('circle')
+        .attr('class', d => \`node-circle \${d.data.status}\`)
+        .attr('r', 1e-6)
+        .on('mouseover', showTooltip)
+        .on('mouseout', hideTooltip);
+      
+      // Add expand/collapse symbol
+      nodeEnter.append('text')
+        .attr('class', 'expand-symbol')
+        .attr('dy', '0.35em')
+        .text(d => d._children ? '+' : (d.children ? '−' : ''));
+      
+      // Add labels for the nodes
+      nodeEnter.append('text')
+        .attr('class', d => \`node-text \${d.data.type}\`)
+        .attr('dy', '0.35em')
+        .attr('x', d => d.children || d._children ? -13 : 13)
+        .attr('text-anchor', d => d.children || d._children ? 'end' : 'start')
+        .text(d => d.data.name);
+      
+      // Transition nodes to their new position
+      const nodeUpdate = nodeEnter.merge(node);
+      
+      nodeUpdate.transition()
+        .duration(duration)
+        .attr('transform', d => \`translate(\${d.y},\${d.x})\`);
+      
+      nodeUpdate.select('circle.node-circle')
+        .attr('r', d => {
+          if (d.data.type === 'root') return 12;
+          if (d.data.type === 'endpoint') return 8;
+          return 10;
+        })
+        .attr('class', d => \`node-circle \${d.data.status}\`);
+      
+      nodeUpdate.select('text.expand-symbol')
+        .text(d => d._children ? '+' : (d.children ? '−' : ''));
+      
+      // Remove any exiting nodes
+      const nodeExit = node.exit().transition()
+        .duration(duration)
+        .attr('transform', d => \`translate(\${source.y},\${source.x})\`)
+        .remove();
+      
+      nodeExit.select('circle')
+        .attr('r', 1e-6);
+      
+      nodeExit.select('text')
+        .style('fill-opacity', 1e-6);
+      
+      // Update the links
+      const link = g.selectAll('path.link')
+        .data(links, d => d.id);
+      
+      // Enter any new links at the parent's previous position
+      const linkEnter = link.enter().insert('path', 'g')
+        .attr('class', 'link')
+        .attr('d', d => {
+          const o = { x: source.x0, y: source.y0 };
+          return diagonal(o, o);
+        });
+      
+      // Transition links to their new position
+      const linkUpdate = linkEnter.merge(link);
+      
+      linkUpdate.transition()
+        .duration(duration)
+        .attr('d', d => diagonal(d, d.parent));
+      
+      // Remove any exiting links
+      const linkExit = link.exit().transition()
+        .duration(duration)
+        .attr('d', d => {
+          const o = { x: source.x, y: source.y };
+          return diagonal(o, o);
+        })
+        .remove();
+      
+      // Store the old positions for transition
+      nodes.forEach(d => {
+        d.x0 = d.x;
+        d.y0 = d.y;
+      });
     }
     
-    function dragged(event, d) {
-      d.fx = event.x;
-      d.fy = event.y;
+    // Creates a curved (diagonal) path from parent to the child nodes
+    function diagonal(s, d) {
+      const path = \`M \${s.y} \${s.x}
+        C \${(s.y + d.y) / 2} \${s.x},
+          \${(s.y + d.y) / 2} \${d.x},
+          \${d.y} \${d.x}\`;
+      return path;
     }
     
-    function dragended(event, d) {
-      if (!event.active) simulation.alphaTarget(0);
-      d.fx = null;
-      d.fy = null;
+    // Toggle children on click
+    function click(event, d) {
+      if (d.children) {
+        d._children = d.children;
+        d.children = null;
+      } else {
+        d.children = d._children;
+        d._children = null;
+      }
+      update(d);
     }
     
     // Tooltip functions
     function showTooltip(event, d) {
       const tooltip = d3.select('#tooltip');
+      let content = \`<strong>\${d.data.name}</strong><br/>\`;
+      
+      if (d.data.type === 'endpoint') {
+        content += \`Method: \${d.data.method}<br/>\`;
+        content += \`Path: \${d.data.path}<br/>\`;
+        content += \`Status: \${d.data.status.replace('-', ' ')}<br/>\`;
+        if (d.data.operationName) {
+          content += \`Operation: \${d.data.operationName}<br/>\`;
+        }
+        if (d.data.matchedRequests && d.data.matchedRequests.length > 0) {
+          content += \`Tests: \${d.data.matchedRequests.length}<br/>\`;
+        }
+      } else {
+        content += \`Type: \${d.data.type}<br/>\`;
+        const childCount = (d.children || d._children || []).length;
+        if (childCount > 0) {
+          content += \`Children: \${childCount}<br/>\`;
+        }
+      }
+      
       tooltip
         .style('opacity', 1)
         .style('left', (event.pageX + 10) + 'px')
         .style('top', (event.pageY + 10) + 'px')
-        .html(\`
-          <strong>\${d.name}</strong><br/>
-          Method: \${d.method}<br/>
-          Path: \${d.path}<br/>
-          Status: \${d.status.replace('-', ' ')}<br/>
-          \${d.apiName ? \`API: \${d.apiName}<br/>\` : ''}
-          Group: \${d.group}
-        \`);
+        .html(content);
     }
     
     function hideTooltip() {
       d3.select('#tooltip').style('opacity', 0);
     }
     
-    // Zoom controls
-    function zoomIn() {
-      svg.transition().call(zoom.scaleBy, 1.5);
+    // Control functions
+    function expandAll() {
+      function expand(d) {
+        if (d._children) {
+          d.children = d._children;
+          d._children = null;
+        }
+        if (d.children) {
+          d.children.forEach(expand);
+        }
+      }
+      expand(root);
+      update(root);
     }
     
-    function zoomOut() {
-      svg.transition().call(zoom.scaleBy, 1 / 1.5);
+    function collapseAll() {
+      function collapse(d) {
+        if (d.children) {
+          d._children = d.children;
+          d._children.forEach(collapse);
+          d.children = null;
+        }
+      }
+      root.children.forEach(collapse);
+      update(root);
     }
     
-    function resetZoom() {
+    function centerTree() {
       svg.transition().call(zoom.transform, d3.zoomIdentity);
     }
     
@@ -1468,8 +1645,8 @@ function generateGraphHtmlReport({ coverage, coverageItems, meta }) {
       const newWidth = containerNode.clientWidth;
       const newHeight = containerNode.clientHeight;
       svg.attr('width', newWidth).attr('height', newHeight);
-      simulation.force('center', d3.forceCenter(newWidth / 2, newHeight / 2));
-      simulation.alpha(0.3).restart();
+      tree.size([newHeight - margin.top - margin.bottom, newWidth - margin.left - margin.right]);
+      update(root);
     });
   </script>
 </body>
diff --git a/test/graph-report.test.js b/test/graph-report.test.js
index 13c91da..ae166af 100644
--- a/test/graph-report.test.js
+++ b/test/graph-report.test.js
@@ -41,11 +41,11 @@ describe('Graph Report Integration', () => {
       
       // Check content of graph report
       const graphContent = fs.readFileSync(graphOutputFile, 'utf8');
-      expect(graphContent).toContain('API Coverage Graph Report');
+      expect(graphContent).toContain('API Coverage Tree Report');
       expect(graphContent).toContain('d3js.org');
       expect(graphContent).toContain('Coverage Status');
-      expect(graphContent).toContain('graph-container');
-      expect(graphContent).toContain('forceSimulation');
+      expect(graphContent).toContain('tree-container');
+      expect(graphContent).toContain('expandAll');
       
       done();
     });
diff --git a/test/report.test.js b/test/report.test.js
index 7df527b..cd054de 100644
--- a/test/report.test.js
+++ b/test/report.test.js
@@ -49,7 +49,7 @@ describe('Report Module', () => {
     const html = generateGraphHtmlReport(input);
     expect(typeof html).toBe('string');
     expect(html).toContain('<html');
-    expect(html).toContain('API Coverage Graph Report');
+    expect(html).toContain('API Coverage Tree Report');
     expect(html).toContain('d3js.org');
     expect(html).toContain('Coverage Status');
     expect(html).toContain('75.00%');

From ea7be7f9ad9154d3ebde16638db44929d1e97793 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 21 Sep 2025 19:50:06 +0000
Subject: [PATCH 6/6] Improve readability and UX with modern CSS-only tree
 visualization

Co-authored-by: dreamquality <130073078+dreamquality@users.noreply.github.com>
---
 auto-detect-newman.html   |   2 +-
 current-tree.html         | 480 +++++++++++++++++++++++++
 lib/report.js             | 718 +++++++++++++++++++++-----------------
 test/graph-report.test.js |   2 +-
 test/report.test.js       |   2 +-
 5 files changed, 872 insertions(+), 332 deletions(-)
 create mode 100644 current-tree.html

diff --git a/auto-detect-newman.html b/auto-detect-newman.html
index 6b3008c..a6da7d7 100644
--- a/auto-detect-newman.html
+++ b/auto-detect-newman.html
@@ -384,7 +384,7 @@ <h1>Swagger Coverage Report</h1>
     &#128262; <!-- flashlight icon -->
   </button>
   <div class="meta-info">
-    <p><strong>Timestamp:</strong> 9/21/2025, 7:35:43 PM</p>
+    <p><strong>Timestamp:</strong> 9/21/2025, 7:49:24 PM</p>
     <p><strong>API Spec:</strong> Test API</p>
     
     <p><strong>Postman Collection:</strong> Test Newman Collection</p>
diff --git a/current-tree.html b/current-tree.html
new file mode 100644
index 0000000..09e70ec
--- /dev/null
+++ b/current-tree.html
@@ -0,0 +1,480 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>API Coverage Tree Report</title>
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+  <style>
+    body {
+      margin: 0;
+      font-family: 'Roboto', sans-serif;
+      background-color: #fafafa;
+      color: #212121;
+    }
+    
+    header {
+      padding: 16px;
+      background-color: #ffffff;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      text-align: center;
+    }
+    
+    h1 {
+      margin: 0 0 8px 0;
+      font-size: 1.8rem;
+      color: #6200ee;
+    }
+    
+    .meta-info {
+      font-size: 0.9em;
+      opacity: 0.8;
+      margin-bottom: 16px;
+    }
+    
+    .controls {
+      text-align: center;
+      padding: 16px;
+      background-color: #ffffff;
+      border-bottom: 1px solid #e0e0e0;
+    }
+    
+    .tree-controls {
+      margin-bottom: 10px;
+    }
+    
+    .tree-btn {
+      margin: 0 5px;
+      padding: 8px 16px;
+      background-color: #6200ee;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+    
+    .tree-btn:hover {
+      background-color: #7c4dff;
+    }
+    
+    .legend {
+      display: inline-block;
+      margin: 0 20px;
+    }
+    
+    .legend-item {
+      display: inline-block;
+      margin: 0 10px;
+      font-size: 0.9em;
+    }
+    
+    .legend-color {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      margin-right: 5px;
+      vertical-align: middle;
+    }
+    
+    .covered { background-color: #4caf50; }
+    .partial { background-color: #ff9800; }
+    .not-covered { background-color: #f44336; }
+    .group { background-color: #2196f3; }
+    .root { background-color: #9c27b0; }
+    
+    #tree-container {
+      width: 100%;
+      height: calc(100vh - 250px);
+      min-height: 600px;
+      background-color: #ffffff;
+      position: relative;
+      overflow: auto;
+    }
+    
+    .node-circle {
+      cursor: pointer;
+      stroke: #333;
+      stroke-width: 2px;
+    }
+    
+    .node-circle.covered {
+      fill: #4caf50;
+    }
+    
+    .node-circle.partial {
+      fill: #ff9800;
+    }
+    
+    .node-circle.not-covered {
+      fill: #f44336;
+    }
+    
+    .node-circle.group {
+      fill: #2196f3;
+    }
+    
+    .node-circle.root {
+      fill: #9c27b0;
+    }
+    
+    .link {
+      fill: none;
+      stroke: #666;
+      stroke-width: 2px;
+    }
+    
+    .node-text {
+      font-size: 12px;
+      font-family: 'Roboto', sans-serif;
+      cursor: pointer;
+      user-select: none;
+    }
+    
+    .node-text.endpoint {
+      font-size: 11px;
+      font-weight: normal;
+    }
+    
+    .node-text.group {
+      font-weight: bold;
+    }
+    
+    .node-text.root {
+      font-weight: bold;
+      font-size: 14px;
+    }
+    
+    .tooltip {
+      position: absolute;
+      background-color: rgba(0, 0, 0, 0.8);
+      color: white;
+      padding: 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      pointer-events: none;
+      z-index: 100;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    
+    .expand-symbol {
+      font-size: 12px;
+      font-weight: bold;
+      fill: #333;
+      text-anchor: middle;
+      dominant-baseline: central;
+      pointer-events: none;
+    }
+    
+    footer {
+      text-align: center;
+      padding: 16px;
+      background-color: #f5f5f5;
+      border-top: 1px solid #e0e0e0;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>API Coverage Tree Report</h1>
+    <div class="meta-info">
+      <p><strong>Timestamp:</strong> 9/21/2025, 7:43:34 PM</p>
+      <p><strong>API Spec:</strong> Sample API for Newman Demo</p>
+      
+      <p><strong>Postman Collection:</strong> Comprehensive Test Collection</p>
+      <p><strong>Overall Coverage:</strong> 16.67%</p>
+    </div>
+  </header>
+  
+  <div class="controls">
+    <div class="tree-controls">
+      <button class="tree-btn" onclick="expandAll()">Expand All</button>
+      <button class="tree-btn" onclick="collapseAll()">Collapse All</button>
+      <button class="tree-btn" onclick="centerTree()">Center View</button>
+    </div>
+    <div class="legend">
+      <h3 style="margin: 0 0 10px 0;">Coverage Status</h3>
+      <div class="legend-item">
+        <span class="legend-color covered"></span>
+        <span>Covered (3)</span>
+      </div>
+      <div class="legend-item">
+        <span class="legend-color partial"></span>
+        <span>Partial (0)</span>
+      </div>
+      <div class="legend-item">
+        <span class="legend-color not-covered"></span>
+        <span>Not Covered (15)</span>
+      </div>
+      <div class="legend-item">
+        <span class="legend-color group"></span>
+        <span>Groups</span>
+      </div>
+    </div>
+  </div>
+  
+  <div id="tree-container">
+    <div class="tooltip" id="tooltip"></div>
+  </div>
+  
+  <footer>
+    <p>Generated by swagger-coverage-cli - Expandable tree visualization shows API endpoints hierarchically with coverage status color coding</p>
+  </footer>
+
+  <script>
+    // Tree data
+    const treeData = {"name":"API Coverage","children":[{"name":"Sample API for Newman Demo","children":[{"name":"Users","children":[{"name":"/users","children":[{"name":"GET /users","method":"GET","path":"/users","status":"covered","type":"endpoint","coverage":100,"matchedRequests":[{"name":"Get All Users","rawUrl":"{{baseUrl}}/users?limit=10&offset=0","method":"GET","testedStatusCodes":["200"],"testScripts":"pm.test('Status code is 200', function () {\n    pm.response.to.have.status(200);\n});\n\npm.test('Response is an array', function () {\n    pm.response.to.be.json;\n    pm.expect(pm.response.json()).to.be.an('array');\n});","confidence":0.8999999999999999}],"operationName":"getUsers"},{"name":"GET /users","method":"GET","path":"/users","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"getUsers"},{"name":"GET /users","method":"GET","path":"/users","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"getUsers"},{"name":"POST /users","method":"POST","path":"/users","status":"covered","type":"endpoint","coverage":100,"matchedRequests":[{"name":"Create User","rawUrl":"{{baseUrl}}/users","method":"POST","testedStatusCodes":["201"],"testScripts":"pm.test('Status code is 201', function () {\n    pm.response.to.have.status(201);\n});\n\npm.test('User created successfully', function () {\n    const responseJson = pm.response.json();\n    pm.expect(responseJson).to.have.property('id');\n    pm.expect(responseJson.email).to.eql('john.doe@example.com');\n});","confidence":0.8999999999999999}],"operationName":"createUser"},{"name":"POST /users","method":"POST","path":"/users","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"createUser"},{"name":"POST /users","method":"POST","path":"/users","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"createUser"}],"type":"path","status":"group"},{"name":"/users/{id}","children":[{"name":"GET /users/{id}","method":"GET","path":"/users/{id}","status":"covered","type":"endpoint","coverage":100,"matchedRequests":[{"name":"Get User by ID","rawUrl":"{{baseUrl}}/users/{{userId}}","method":"GET","testedStatusCodes":["200"],"testScripts":"pm.test('Status code is 200', function () {\n    pm.response.to.have.status(200);\n});\n\npm.test('User has required properties', function () {\n    const user = pm.response.json();\n    pm.expect(user).to.have.property('id');\n    pm.expect(user).to.have.property('email');\n    pm.expect(user).to.have.property('firstName');\n    pm.expect(user).to.have.property('lastName');\n});","confidence":0.8999999999999999}],"operationName":"getUserById"},{"name":"GET /users/{id}","method":"GET","path":"/users/{id}","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"getUserById"},{"name":"GET /users/{id}","method":"GET","path":"/users/{id}","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"getUserById"},{"name":"PATCH /users/{id}","method":"PATCH","path":"/users/{id}","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"updateUser"},{"name":"PATCH /users/{id}","method":"PATCH","path":"/users/{id}","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"updateUser"},{"name":"PATCH /users/{id}","method":"PATCH","path":"/users/{id}","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"updateUser"},{"name":"DELETE /users/{id}","method":"DELETE","path":"/users/{id}","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"deleteUser"},{"name":"DELETE /users/{id}","method":"DELETE","path":"/users/{id}","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"deleteUser"},{"name":"DELETE /users/{id}","method":"DELETE","path":"/users/{id}","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"deleteUser"}],"type":"path","status":"group"}],"type":"tag","status":"group"},{"name":"Admin","children":[{"name":"/admin/users","children":[{"name":"GET /admin/users","method":"GET","path":"/admin/users","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"getAdminUsers"},{"name":"GET /admin/users","method":"GET","path":"/admin/users","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"getAdminUsers"},{"name":"GET /admin/users","method":"GET","path":"/admin/users","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"getAdminUsers"}],"type":"path","status":"group"}],"type":"tag","status":"group"}],"type":"api","status":"group"}],"type":"root","status":"root"};
+    
+    // Set up dimensions and margins
+    const margin = { top: 20, right: 120, bottom: 20, left: 120 };
+    const container = d3.select('#tree-container');
+    const containerNode = container.node();
+    const width = containerNode.clientWidth - margin.left - margin.right;
+    const height = containerNode.clientHeight - margin.top - margin.bottom;
+    
+    // Create SVG
+    const svg = container.append('svg')
+      .attr('width', containerNode.clientWidth)
+      .attr('height', containerNode.clientHeight);
+    
+    const g = svg.append('g')
+      .attr('transform', `translate(${margin.left},${margin.top})`);
+    
+    // Set up zoom behavior
+    const zoom = d3.zoom()
+      .scaleExtent([0.1, 3])
+      .on('zoom', (event) => {
+        g.attr('transform', `translate(${event.transform.x + margin.left},${event.transform.y + margin.top}) scale(${event.transform.k})`);
+      });
+    
+    svg.call(zoom);
+    
+    // Create tree layout
+    const tree = d3.tree().size([height, width]);
+    
+    let i = 0;
+    const duration = 500;
+    
+    // Initialize the tree
+    const root = d3.hierarchy(treeData, d => d.children);
+    root.x0 = height / 2;
+    root.y0 = 0;
+    
+    // Collapse all children initially except root
+    function collapse(d) {
+      if (d.children) {
+        d._children = d.children;
+        d._children.forEach(collapse);
+        d.children = null;
+      }
+    }
+    
+    root.children.forEach(collapse);
+    
+    update(root);
+    
+    function update(source) {
+      // Compute the new tree layout
+      const treeData = tree(root);
+      const nodes = treeData.descendants();
+      const links = treeData.descendants().slice(1);
+      
+      // Normalize for fixed-depth
+      nodes.forEach(d => { d.y = d.depth * 180; });
+      
+      // Update the nodes
+      const node = g.selectAll('g.node')
+        .data(nodes, d => d.id || (d.id = ++i));
+      
+      // Enter any new nodes at the parent's previous position
+      const nodeEnter = node.enter().append('g')
+        .attr('class', 'node')
+        .attr('transform', d => `translate(${source.y0},${source.x0})`)
+        .on('click', click);
+      
+      // Add circles for the nodes
+      nodeEnter.append('circle')
+        .attr('class', d => `node-circle ${d.data.status}`)
+        .attr('r', 1e-6)
+        .on('mouseover', showTooltip)
+        .on('mouseout', hideTooltip);
+      
+      // Add expand/collapse symbol
+      nodeEnter.append('text')
+        .attr('class', 'expand-symbol')
+        .attr('dy', '0.35em')
+        .text(d => d._children ? '+' : (d.children ? '−' : ''));
+      
+      // Add labels for the nodes
+      nodeEnter.append('text')
+        .attr('class', d => `node-text ${d.data.type}`)
+        .attr('dy', '0.35em')
+        .attr('x', d => d.children || d._children ? -13 : 13)
+        .attr('text-anchor', d => d.children || d._children ? 'end' : 'start')
+        .text(d => d.data.name);
+      
+      // Transition nodes to their new position
+      const nodeUpdate = nodeEnter.merge(node);
+      
+      nodeUpdate.transition()
+        .duration(duration)
+        .attr('transform', d => `translate(${d.y},${d.x})`);
+      
+      nodeUpdate.select('circle.node-circle')
+        .attr('r', d => {
+          if (d.data.type === 'root') return 12;
+          if (d.data.type === 'endpoint') return 8;
+          return 10;
+        })
+        .attr('class', d => `node-circle ${d.data.status}`);
+      
+      nodeUpdate.select('text.expand-symbol')
+        .text(d => d._children ? '+' : (d.children ? '−' : ''));
+      
+      // Remove any exiting nodes
+      const nodeExit = node.exit().transition()
+        .duration(duration)
+        .attr('transform', d => `translate(${source.y},${source.x})`)
+        .remove();
+      
+      nodeExit.select('circle')
+        .attr('r', 1e-6);
+      
+      nodeExit.select('text')
+        .style('fill-opacity', 1e-6);
+      
+      // Update the links
+      const link = g.selectAll('path.link')
+        .data(links, d => d.id);
+      
+      // Enter any new links at the parent's previous position
+      const linkEnter = link.enter().insert('path', 'g')
+        .attr('class', 'link')
+        .attr('d', d => {
+          const o = { x: source.x0, y: source.y0 };
+          return diagonal(o, o);
+        });
+      
+      // Transition links to their new position
+      const linkUpdate = linkEnter.merge(link);
+      
+      linkUpdate.transition()
+        .duration(duration)
+        .attr('d', d => diagonal(d, d.parent));
+      
+      // Remove any exiting links
+      const linkExit = link.exit().transition()
+        .duration(duration)
+        .attr('d', d => {
+          const o = { x: source.x, y: source.y };
+          return diagonal(o, o);
+        })
+        .remove();
+      
+      // Store the old positions for transition
+      nodes.forEach(d => {
+        d.x0 = d.x;
+        d.y0 = d.y;
+      });
+    }
+    
+    // Creates a curved (diagonal) path from parent to the child nodes
+    function diagonal(s, d) {
+      const path = `M ${s.y} ${s.x}
+        C ${(s.y + d.y) / 2} ${s.x},
+          ${(s.y + d.y) / 2} ${d.x},
+          ${d.y} ${d.x}`;
+      return path;
+    }
+    
+    // Toggle children on click
+    function click(event, d) {
+      if (d.children) {
+        d._children = d.children;
+        d.children = null;
+      } else {
+        d.children = d._children;
+        d._children = null;
+      }
+      update(d);
+    }
+    
+    // Tooltip functions
+    function showTooltip(event, d) {
+      const tooltip = d3.select('#tooltip');
+      let content = `<strong>${d.data.name}</strong><br/>`;
+      
+      if (d.data.type === 'endpoint') {
+        content += `Method: ${d.data.method}<br/>`;
+        content += `Path: ${d.data.path}<br/>`;
+        content += `Status: ${d.data.status.replace('-', ' ')}<br/>`;
+        if (d.data.operationName) {
+          content += `Operation: ${d.data.operationName}<br/>`;
+        }
+        if (d.data.matchedRequests && d.data.matchedRequests.length > 0) {
+          content += `Tests: ${d.data.matchedRequests.length}<br/>`;
+        }
+      } else {
+        content += `Type: ${d.data.type}<br/>`;
+        const childCount = (d.children || d._children || []).length;
+        if (childCount > 0) {
+          content += `Children: ${childCount}<br/>`;
+        }
+      }
+      
+      tooltip
+        .style('opacity', 1)
+        .style('left', (event.pageX + 10) + 'px')
+        .style('top', (event.pageY + 10) + 'px')
+        .html(content);
+    }
+    
+    function hideTooltip() {
+      d3.select('#tooltip').style('opacity', 0);
+    }
+    
+    // Control functions
+    function expandAll() {
+      function expand(d) {
+        if (d._children) {
+          d.children = d._children;
+          d._children = null;
+        }
+        if (d.children) {
+          d.children.forEach(expand);
+        }
+      }
+      expand(root);
+      update(root);
+    }
+    
+    function collapseAll() {
+      function collapse(d) {
+        if (d.children) {
+          d._children = d.children;
+          d._children.forEach(collapse);
+          d.children = null;
+        }
+      }
+      root.children.forEach(collapse);
+      update(root);
+    }
+    
+    function centerTree() {
+      svg.transition().call(zoom.transform, d3.zoomIdentity);
+    }
+    
+    // Handle window resize
+    window.addEventListener('resize', () => {
+      const newWidth = containerNode.clientWidth;
+      const newHeight = containerNode.clientHeight;
+      svg.attr('width', newWidth).attr('height', newHeight);
+      tree.size([newHeight - margin.top - margin.bottom, newWidth - margin.left - margin.right]);
+      update(root);
+    });
+  </script>
+</body>
+</html>
diff --git a/lib/report.js b/lib/report.js
index 335b8fb..bcc03b7 100644
--- a/lib/report.js
+++ b/lib/report.js
@@ -1178,175 +1178,326 @@ function generateGraphHtmlReport({ coverage, coverageItems, meta }) {
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>API Coverage Tree Report</title>
-  <script src="https://d3js.org/d3.v7.min.js"></script>
   <style>
+    * {
+      box-sizing: border-box;
+    }
+    
     body {
       margin: 0;
-      font-family: 'Roboto', sans-serif;
-      background-color: #fafafa;
-      color: #212121;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+      background-color: #f8fafc;
+      color: #334155;
+      line-height: 1.6;
     }
     
     header {
-      padding: 16px;
-      background-color: #ffffff;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      padding: 24px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
       text-align: center;
+      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
     }
     
     h1 {
-      margin: 0 0 8px 0;
-      font-size: 1.8rem;
-      color: #6200ee;
+      margin: 0 0 16px 0;
+      font-size: 2rem;
+      font-weight: 700;
+      text-shadow: 0 2px 4px rgba(0,0,0,0.2);
     }
     
     .meta-info {
-      font-size: 0.9em;
-      opacity: 0.8;
-      margin-bottom: 16px;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 16px;
+      max-width: 1000px;
+      margin: 0 auto;
+      font-size: 0.95em;
+    }
+    
+    .meta-card {
+      background: rgba(255,255,255,0.1);
+      padding: 12px 16px;
+      border-radius: 8px;
+      backdrop-filter: blur(10px);
+    }
+    
+    .meta-label {
+      font-weight: 600;
+      opacity: 0.9;
+      margin-bottom: 4px;
+    }
+    
+    .meta-value {
+      font-size: 1.1em;
+      font-weight: 700;
+    }
+    
+    .coverage-highlight {
+      font-size: 1.3em;
+      color: #fbbf24;
     }
     
     .controls {
-      text-align: center;
-      padding: 16px;
-      background-color: #ffffff;
-      border-bottom: 1px solid #e0e0e0;
+      background: white;
+      padding: 20px;
+      border-bottom: 1px solid #e2e8f0;
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
     }
     
     .tree-controls {
-      margin-bottom: 10px;
+      text-align: center;
+      margin-bottom: 16px;
     }
     
     .tree-btn {
-      margin: 0 5px;
-      padding: 8px 16px;
-      background-color: #6200ee;
+      margin: 0 8px;
+      padding: 10px 20px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       color: white;
       border: none;
-      border-radius: 4px;
+      border-radius: 25px;
       cursor: pointer;
       font-size: 14px;
+      font-weight: 600;
+      transition: all 0.3s ease;
+      box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
     }
     
     .tree-btn:hover {
-      background-color: #7c4dff;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
     }
     
     .legend {
-      display: inline-block;
-      margin: 0 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 24px;
+    }
+    
+    .legend h3 {
+      margin: 0;
+      color: #475569;
+      font-weight: 600;
     }
     
     .legend-item {
-      display: inline-block;
-      margin: 0 10px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
       font-size: 0.9em;
+      font-weight: 500;
     }
     
     .legend-color {
-      display: inline-block;
-      width: 20px;
-      height: 20px;
+      width: 16px;
+      height: 16px;
       border-radius: 50%;
-      margin-right: 5px;
-      vertical-align: middle;
+      border: 2px solid white;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     }
     
-    .covered { background-color: #4caf50; }
-    .partial { background-color: #ff9800; }
-    .not-covered { background-color: #f44336; }
-    .group { background-color: #2196f3; }
-    .root { background-color: #9c27b0; }
+    .covered { background-color: #10b981; }
+    .partial { background-color: #f59e0b; }
+    .not-covered { background-color: #ef4444; }
+    .group { background-color: #3b82f6; }
     
-    #tree-container {
-      width: 100%;
-      height: calc(100vh - 250px);
-      min-height: 600px;
-      background-color: #ffffff;
-      position: relative;
-      overflow: auto;
+    .main-content {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 24px;
     }
     
-    .node-circle {
-      cursor: pointer;
-      stroke: #333;
-      stroke-width: 2px;
+    .tree-container {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+      overflow: hidden;
     }
     
-    .node-circle.covered {
-      fill: #4caf50;
+    .tree-node {
+      border-bottom: 1px solid #f1f5f9;
     }
     
-    .node-circle.partial {
-      fill: #ff9800;
+    .tree-node:last-child {
+      border-bottom: none;
     }
     
-    .node-circle.not-covered {
-      fill: #f44336;
+    .node-header {
+      padding: 16px 20px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      transition: all 0.2s ease;
+      user-select: none;
     }
     
-    .node-circle.group {
-      fill: #2196f3;
+    .node-header:hover {
+      background-color: #f8fafc;
     }
     
-    .node-circle.root {
-      fill: #9c27b0;
+    .node-icon {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-weight: bold;
+      font-size: 12px;
+      flex-shrink: 0;
     }
     
-    .link {
-      fill: none;
-      stroke: #666;
-      stroke-width: 2px;
+    .expand-icon {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      background: #e2e8f0;
+      color: #475569;
+      font-size: 14px;
+      transition: all 0.2s ease;
+      flex-shrink: 0;
     }
     
-    .node-text {
-      font-size: 12px;
-      font-family: 'Roboto', sans-serif;
-      cursor: pointer;
-      user-select: none;
+    .expand-icon.expanded {
+      background: #3b82f6;
+      color: white;
+      transform: rotate(90deg);
     }
     
-    .node-text.endpoint {
-      font-size: 11px;
-      font-weight: normal;
+    .node-content {
+      flex: 1;
+      min-width: 0;
     }
     
-    .node-text.group {
-      font-weight: bold;
+    .node-title {
+      font-weight: 600;
+      font-size: 1rem;
+      color: #1e293b;
+      margin-bottom: 2px;
     }
     
-    .node-text.root {
-      font-weight: bold;
-      font-size: 14px;
+    .node-subtitle {
+      font-size: 0.85em;
+      color: #64748b;
     }
     
-    .tooltip {
-      position: absolute;
-      background-color: rgba(0, 0, 0, 0.8);
+    .node-stats {
+      display: flex;
+      gap: 16px;
+      margin-left: auto;
+      flex-shrink: 0;
+    }
+    
+    .stat-badge {
+      padding: 4px 8px;
+      border-radius: 12px;
+      font-size: 0.75em;
+      font-weight: 600;
       color: white;
-      padding: 8px;
+    }
+    
+    .children {
+      background: #f8fafc;
+      border-left: 3px solid #e2e8f0;
+      margin-left: 20px;
+      display: none;
+    }
+    
+    .children.expanded {
+      display: block;
+    }
+    
+    .endpoint {
+      padding: 12px 20px;
+      border-bottom: 1px solid #e2e8f0;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    
+    .endpoint:last-child {
+      border-bottom: none;
+    }
+    
+    .method-badge {
+      padding: 4px 8px;
       border-radius: 4px;
-      font-size: 12px;
-      pointer-events: none;
-      z-index: 100;
-      opacity: 0;
-      transition: opacity 0.3s;
+      font-size: 0.75em;
+      font-weight: 700;
+      text-transform: uppercase;
+      min-width: 50px;
+      text-align: center;
     }
     
-    .expand-symbol {
-      font-size: 12px;
-      font-weight: bold;
-      fill: #333;
-      text-anchor: middle;
-      dominant-baseline: central;
-      pointer-events: none;
+    .method-get { background: #10b981; color: white; }
+    .method-post { background: #3b82f6; color: white; }
+    .method-put { background: #f59e0b; color: white; }
+    .method-patch { background: #8b5cf6; color: white; }
+    .method-delete { background: #ef4444; color: white; }
+    
+    .endpoint-path {
+      font-family: 'Monaco', 'Consolas', monospace;
+      flex: 1;
+      font-size: 0.9em;
+      color: #475569;
+    }
+    
+    .endpoint-status {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+    
+    .test-count {
+      font-size: 0.8em;
+      color: #64748b;
+      background: #e2e8f0;
+      padding: 2px 6px;
+      border-radius: 10px;
     }
     
     footer {
       text-align: center;
-      padding: 16px;
-      background-color: #f5f5f5;
-      border-top: 1px solid #e0e0e0;
+      padding: 24px;
+      background: #f1f5f9;
+      color: #64748b;
+      font-size: 0.9em;
+      margin-top: 40px;
+    }
+    
+    @media (max-width: 768px) {
+      .meta-info {
+        grid-template-columns: 1fr;
+        text-align: left;
+      }
+      
+      .legend {
+        justify-content: flex-start;
+        gap: 16px;
+      }
+      
+      .tree-btn {
+        margin: 4px;
+        padding: 8px 16px;
+        font-size: 13px;
+      }
+      
+      .node-stats {
+        flex-direction: column;
+        gap: 4px;
+      }
     }
   </style>
 </head>
@@ -1354,22 +1505,35 @@ function generateGraphHtmlReport({ coverage, coverageItems, meta }) {
   <header>
     <h1>API Coverage Tree Report</h1>
     <div class="meta-info">
-      <p><strong>Timestamp:</strong> ${timestamp}</p>
-      <p><strong>API Spec${apiCount > 1 ? 's' : ''}:</strong> ${specName}</p>
-      ${apiCount > 1 ? `<p><strong>Individual APIs:</strong> ${apiNames.join(', ')}</p>` : ''}
-      <p><strong>Postman Collection:</strong> ${postmanCollectionName}</p>
-      <p><strong>Overall Coverage:</strong> ${coverage.toFixed(2)}%</p>
+      <div class="meta-card">
+        <div class="meta-label">Generated</div>
+        <div class="meta-value">${timestamp}</div>
+      </div>
+      <div class="meta-card">
+        <div class="meta-label">API Spec${apiCount > 1 ? 's' : ''}</div>
+        <div class="meta-value">${specName}</div>
+      </div>
+      <div class="meta-card">
+        <div class="meta-label">Test Collection</div>
+        <div class="meta-value">${postmanCollectionName}</div>
+      </div>
+      <div class="meta-card">
+        <div class="meta-label">Coverage</div>
+        <div class="meta-value coverage-highlight">${coverage.toFixed(2)}%</div>
+      </div>
     </div>
   </header>
   
   <div class="controls">
     <div class="tree-controls">
-      <button class="tree-btn" onclick="expandAll()">Expand All</button>
-      <button class="tree-btn" onclick="collapseAll()">Collapse All</button>
-      <button class="tree-btn" onclick="centerTree()">Center View</button>
+      <button class="tree-btn" onclick="expandAll()">📖 Expand All</button>
+      <button class="tree-btn" onclick="collapseAll()">📚 Collapse All</button>
+      <button class="tree-btn" onclick="showOnlyCovered()">✅ Show Covered</button>
+      <button class="tree-btn" onclick="showOnlyUncovered()">❌ Show Uncovered</button>
+      <button class="tree-btn" onclick="showAll()">👀 Show All</button>
     </div>
     <div class="legend">
-      <h3 style="margin: 0 0 10px 0;">Coverage Status</h3>
+      <h3>Coverage Status:</h3>
       <div class="legend-item">
         <span class="legend-color covered"></span>
         <span>Covered (${coverageItems.filter(item => !item.unmatched && item.matchedRequests && item.matchedRequests.length > 0).length})</span>
@@ -1389,264 +1553,160 @@ function generateGraphHtmlReport({ coverage, coverageItems, meta }) {
     </div>
   </div>
   
-  <div id="tree-container">
-    <div class="tooltip" id="tooltip"></div>
+  <div class="main-content">
+    <div class="tree-container" id="tree-container">
+      <!-- Tree will be generated here -->
+    </div>
   </div>
   
   <footer>
-    <p>Generated by swagger-coverage-cli - Expandable tree visualization shows API endpoints hierarchically with coverage status color coding</p>
+    <p>Generated by swagger-coverage-cli - Interactive tree visualization shows API endpoints hierarchically with coverage status</p>
   </footer>
 
   <script>
     // Tree data
     const treeData = ${treeDataJson};
     
-    // Set up dimensions and margins
-    const margin = { top: 20, right: 120, bottom: 20, left: 120 };
-    const container = d3.select('#tree-container');
-    const containerNode = container.node();
-    const width = containerNode.clientWidth - margin.left - margin.right;
-    const height = containerNode.clientHeight - margin.top - margin.bottom;
-    
-    // Create SVG
-    const svg = container.append('svg')
-      .attr('width', containerNode.clientWidth)
-      .attr('height', containerNode.clientHeight);
-    
-    const g = svg.append('g')
-      .attr('transform', \`translate(\${margin.left},\${margin.top})\`);
-    
-    // Set up zoom behavior
-    const zoom = d3.zoom()
-      .scaleExtent([0.1, 3])
-      .on('zoom', (event) => {
-        g.attr('transform', \`translate(\${event.transform.x + margin.left},\${event.transform.y + margin.top}) scale(\${event.transform.k})\`);
-      });
-    
-    svg.call(zoom);
-    
-    // Create tree layout
-    const tree = d3.tree().size([height, width]);
-    
-    let i = 0;
-    const duration = 500;
-    
-    // Initialize the tree
-    const root = d3.hierarchy(treeData, d => d.children);
-    root.x0 = height / 2;
-    root.y0 = 0;
-    
-    // Collapse all children initially except root
-    function collapse(d) {
-      if (d.children) {
-        d._children = d.children;
-        d._children.forEach(collapse);
-        d.children = null;
-      }
+    function renderTree() {
+      const container = document.getElementById('tree-container');
+      container.innerHTML = renderNode(treeData, 0);
     }
     
-    root.children.forEach(collapse);
-    
-    update(root);
-    
-    function update(source) {
-      // Compute the new tree layout
-      const treeData = tree(root);
-      const nodes = treeData.descendants();
-      const links = treeData.descendants().slice(1);
-      
-      // Normalize for fixed-depth
-      nodes.forEach(d => { d.y = d.depth * 180; });
-      
-      // Update the nodes
-      const node = g.selectAll('g.node')
-        .data(nodes, d => d.id || (d.id = ++i));
-      
-      // Enter any new nodes at the parent's previous position
-      const nodeEnter = node.enter().append('g')
-        .attr('class', 'node')
-        .attr('transform', d => \`translate(\${source.y0},\${source.x0})\`)
-        .on('click', click);
+    function renderNode(node, level) {
+      const isEndpoint = node.type === 'endpoint';
+      const hasChildren = node.children && node.children.length > 0;
+      const statusClass = node.status || 'group';
       
-      // Add circles for the nodes
-      nodeEnter.append('circle')
-        .attr('class', d => \`node-circle \${d.data.status}\`)
-        .attr('r', 1e-6)
-        .on('mouseover', showTooltip)
-        .on('mouseout', hideTooltip);
+      let html = '';
       
-      // Add expand/collapse symbol
-      nodeEnter.append('text')
-        .attr('class', 'expand-symbol')
-        .attr('dy', '0.35em')
-        .text(d => d._children ? '+' : (d.children ? '−' : ''));
-      
-      // Add labels for the nodes
-      nodeEnter.append('text')
-        .attr('class', d => \`node-text \${d.data.type}\`)
-        .attr('dy', '0.35em')
-        .attr('x', d => d.children || d._children ? -13 : 13)
-        .attr('text-anchor', d => d.children || d._children ? 'end' : 'start')
-        .text(d => d.data.name);
-      
-      // Transition nodes to their new position
-      const nodeUpdate = nodeEnter.merge(node);
-      
-      nodeUpdate.transition()
-        .duration(duration)
-        .attr('transform', d => \`translate(\${d.y},\${d.x})\`);
-      
-      nodeUpdate.select('circle.node-circle')
-        .attr('r', d => {
-          if (d.data.type === 'root') return 12;
-          if (d.data.type === 'endpoint') return 8;
-          return 10;
-        })
-        .attr('class', d => \`node-circle \${d.data.status}\`);
-      
-      nodeUpdate.select('text.expand-symbol')
-        .text(d => d._children ? '+' : (d.children ? '−' : ''));
-      
-      // Remove any exiting nodes
-      const nodeExit = node.exit().transition()
-        .duration(duration)
-        .attr('transform', d => \`translate(\${source.y},\${source.x})\`)
-        .remove();
-      
-      nodeExit.select('circle')
-        .attr('r', 1e-6);
-      
-      nodeExit.select('text')
-        .style('fill-opacity', 1e-6);
-      
-      // Update the links
-      const link = g.selectAll('path.link')
-        .data(links, d => d.id);
-      
-      // Enter any new links at the parent's previous position
-      const linkEnter = link.enter().insert('path', 'g')
-        .attr('class', 'link')
-        .attr('d', d => {
-          const o = { x: source.x0, y: source.y0 };
-          return diagonal(o, o);
-        });
-      
-      // Transition links to their new position
-      const linkUpdate = linkEnter.merge(link);
-      
-      linkUpdate.transition()
-        .duration(duration)
-        .attr('d', d => diagonal(d, d.parent));
-      
-      // Remove any exiting links
-      const linkExit = link.exit().transition()
-        .duration(duration)
-        .attr('d', d => {
-          const o = { x: source.x, y: source.y };
-          return diagonal(o, o);
-        })
-        .remove();
+      if (isEndpoint) {
+        // Render endpoint
+        const testCount = node.matchedRequests ? node.matchedRequests.length : 0;
+        html += \`
+          <div class="endpoint" data-status="\${statusClass}">
+            <span class="method-badge method-\${node.method.toLowerCase()}">\${node.method}</span>
+            <span class="endpoint-path">\${node.path}</span>
+            <span class="endpoint-status \${statusClass}"></span>
+            \${testCount > 0 ? \`<span class="test-count">\${testCount} test\${testCount !== 1 ? 's' : ''}</span>\` : ''}
+          </div>
+        \`;
+      } else {
+        // Render group node
+        const childrenCount = hasChildren ? node.children.length : 0;
+        const coveredChildren = hasChildren ? 
+          node.children.filter(child => {
+            if (child.type === 'endpoint') {
+              return child.status === 'covered';
+            } else if (child.children) {
+              return child.children.some(grandchild => grandchild.status === 'covered');
+            }
+            return false;
+          }).length : 0;
+        
+        const nodeId = \`node-\${Math.random().toString(36).substr(2, 9)}\`;
+        
+        html += \`
+          <div class="tree-node">
+            <div class="node-header" onclick="toggleNode('\${nodeId}')">
+              \${hasChildren ? \`<div class="expand-icon" id="icon-\${nodeId}">▶</div>\` : '<div style="width: 20px;"></div>'}
+              <div class="node-icon \${statusClass}">\${getNodeIcon(node.type)}</div>
+              <div class="node-content">
+                <div class="node-title">\${node.name}</div>
+                \${childrenCount > 0 ? \`<div class="node-subtitle">\${childrenCount} item\${childrenCount !== 1 ? 's' : ''}\${coveredChildren > 0 ? \` • \${coveredChildren} covered\` : ''}</div>\` : ''}
+              </div>
+              \${childrenCount > 0 ? \`<div class="node-stats">
+                <span class="stat-badge covered">\${coveredChildren}</span>
+                <span class="stat-badge not-covered">\${childrenCount - coveredChildren}</span>
+              </div>\` : ''}
+            </div>
+            \${hasChildren ? \`<div class="children" id="children-\${nodeId}">\${node.children.map(child => renderNode(child, level + 1)).join('')}</div>\` : ''}
+          </div>
+        \`;
+      }
       
-      // Store the old positions for transition
-      nodes.forEach(d => {
-        d.x0 = d.x;
-        d.y0 = d.y;
-      });
+      return html;
     }
     
-    // Creates a curved (diagonal) path from parent to the child nodes
-    function diagonal(s, d) {
-      const path = \`M \${s.y} \${s.x}
-        C \${(s.y + d.y) / 2} \${s.x},
-          \${(s.y + d.y) / 2} \${d.x},
-          \${d.y} \${d.x}\`;
-      return path;
-    }
-    
-    // Toggle children on click
-    function click(event, d) {
-      if (d.children) {
-        d._children = d.children;
-        d.children = null;
-      } else {
-        d.children = d._children;
-        d._children = null;
+    function getNodeIcon(type) {
+      switch(type) {
+        case 'root': return '🌳';
+        case 'api': return '🔗';
+        case 'tag': return '🏷️';
+        case 'path': return '📁';
+        default: return '📄';
       }
-      update(d);
     }
     
-    // Tooltip functions
-    function showTooltip(event, d) {
-      const tooltip = d3.select('#tooltip');
-      let content = \`<strong>\${d.data.name}</strong><br/>\`;
+    function toggleNode(nodeId) {
+      const children = document.getElementById(\`children-\${nodeId}\`);
+      const icon = document.getElementById(\`icon-\${nodeId}\`);
       
-      if (d.data.type === 'endpoint') {
-        content += \`Method: \${d.data.method}<br/>\`;
-        content += \`Path: \${d.data.path}<br/>\`;
-        content += \`Status: \${d.data.status.replace('-', ' ')}<br/>\`;
-        if (d.data.operationName) {
-          content += \`Operation: \${d.data.operationName}<br/>\`;
-        }
-        if (d.data.matchedRequests && d.data.matchedRequests.length > 0) {
-          content += \`Tests: \${d.data.matchedRequests.length}<br/>\`;
-        }
-      } else {
-        content += \`Type: \${d.data.type}<br/>\`;
-        const childCount = (d.children || d._children || []).length;
-        if (childCount > 0) {
-          content += \`Children: \${childCount}<br/>\`;
+      if (children && icon) {
+        const isExpanded = children.classList.contains('expanded');
+        
+        if (isExpanded) {
+          children.classList.remove('expanded');
+          icon.classList.remove('expanded');
+          icon.textContent = '▶';
+        } else {
+          children.classList.add('expanded');
+          icon.classList.add('expanded');
+          icon.textContent = '▼';
         }
       }
-      
-      tooltip
-        .style('opacity', 1)
-        .style('left', (event.pageX + 10) + 'px')
-        .style('top', (event.pageY + 10) + 'px')
-        .html(content);
-    }
-    
-    function hideTooltip() {
-      d3.select('#tooltip').style('opacity', 0);
     }
     
-    // Control functions
     function expandAll() {
-      function expand(d) {
-        if (d._children) {
-          d.children = d._children;
-          d._children = null;
-        }
-        if (d.children) {
-          d.children.forEach(expand);
-        }
-      }
-      expand(root);
-      update(root);
+      document.querySelectorAll('.children').forEach(el => {
+        el.classList.add('expanded');
+      });
+      document.querySelectorAll('.expand-icon').forEach(el => {
+        el.classList.add('expanded');
+        el.textContent = '▼';
+      });
     }
     
     function collapseAll() {
-      function collapse(d) {
-        if (d.children) {
-          d._children = d.children;
-          d._children.forEach(collapse);
-          d.children = null;
-        }
-      }
-      root.children.forEach(collapse);
-      update(root);
+      document.querySelectorAll('.children').forEach(el => {
+        el.classList.remove('expanded');
+      });
+      document.querySelectorAll('.expand-icon').forEach(el => {
+        el.classList.remove('expanded');
+        el.textContent = '▶';
+      });
+    }
+    
+    function showOnlyCovered() {
+      document.querySelectorAll('.endpoint').forEach(el => {
+        const status = el.getAttribute('data-status');
+        el.style.display = status === 'covered' ? 'flex' : 'none';
+      });
     }
     
-    function centerTree() {
-      svg.transition().call(zoom.transform, d3.zoomIdentity);
+    function showOnlyUncovered() {
+      document.querySelectorAll('.endpoint').forEach(el => {
+        const status = el.getAttribute('data-status');
+        el.style.display = status === 'not-covered' ? 'flex' : 'none';
+      });
     }
     
-    // Handle window resize
-    window.addEventListener('resize', () => {
-      const newWidth = containerNode.clientWidth;
-      const newHeight = containerNode.clientHeight;
-      svg.attr('width', newWidth).attr('height', newHeight);
-      tree.size([newHeight - margin.top - margin.bottom, newWidth - margin.left - margin.right]);
-      update(root);
+    function showAll() {
+      document.querySelectorAll('.endpoint').forEach(el => {
+        el.style.display = 'flex';
+      });
+    }
+    
+    // Initialize the tree
+    document.addEventListener('DOMContentLoaded', function() {
+      renderTree();
+      // Expand the first level by default
+      document.querySelectorAll('.tree-node > .children').forEach(el => {
+        el.classList.add('expanded');
+      });
+      document.querySelectorAll('.tree-node > .node-header .expand-icon').forEach(el => {
+        el.classList.add('expanded');
+        el.textContent = '▼';
+      });
     });
   </script>
 </body>
diff --git a/test/graph-report.test.js b/test/graph-report.test.js
index ae166af..3da7c9b 100644
--- a/test/graph-report.test.js
+++ b/test/graph-report.test.js
@@ -42,10 +42,10 @@ describe('Graph Report Integration', () => {
       // Check content of graph report
       const graphContent = fs.readFileSync(graphOutputFile, 'utf8');
       expect(graphContent).toContain('API Coverage Tree Report');
-      expect(graphContent).toContain('d3js.org');
       expect(graphContent).toContain('Coverage Status');
       expect(graphContent).toContain('tree-container');
       expect(graphContent).toContain('expandAll');
+      expect(graphContent).toContain('renderTree');
       
       done();
     });
diff --git a/test/report.test.js b/test/report.test.js
index cd054de..8420e02 100644
--- a/test/report.test.js
+++ b/test/report.test.js
@@ -50,7 +50,7 @@ describe('Report Module', () => {
     expect(typeof html).toBe('string');
     expect(html).toContain('<html');
     expect(html).toContain('API Coverage Tree Report');
-    expect(html).toContain('d3js.org');
+    expect(html).toContain('renderTree');
     expect(html).toContain('Coverage Status');
     expect(html).toContain('75.00%');
   });