aiseo-audit 1.0.0 → 1.1.0

package/dist/cli.js

@@ -27,7 +27,7 @@ var import_commander = require("commander");
 
 // src/modules/analyzer/constants.ts
 var DOMAIN_SIGNAL_TIMEOUT_CAP = 5e3;
-var VERSION = true ? "1.0.0" : "0.0.0";
+var VERSION = true ? "1.1.0" : "0.0.0";
 
 // src/modules/fetcher/constants.ts
 var MAX_RESPONSE_SIZE = 10 * 1024 * 1024;
@@ -1998,43 +1998,70 @@ function buildGaugeSvg(score, size = "small") {
     </svg>`;
 }
 function buildMultiSegmentGauge(overallScore, grade, totalPoints, maxPoints, categories) {
-  const radius = 56;
-  const circumference = 2 * Math.PI * radius;
-  const strokeWidth = 10;
-  const gapDeg = 1;
-  const totalGapDeg = gapDeg * categories.length;
-  const availableDeg = 360 - totalGapDeg;
+  const radius = 80;
+  const strokeWidth = 14;
+  const pad2 = 8;
+  const size = (radius + strokeWidth / 2 + pad2) * 2;
+  const cx = size / 2;
+  const cy = size / 2;
+  const circ = 2 * Math.PI * radius;
   const textColor = scoreTextColorHex(overallScore);
-  const segments = [];
-  let currentAngle = -90;
+  const trackCircle = `<circle cx="${cx}" cy="${cy}" r="${radius}" fill="none" stroke="#e8e8e8" stroke-width="${strokeWidth}"/>`;
+  const arcs = [];
+  let consumed = 0;
+  let segIdx = 0;
   for (const cat of categories) {
-    const segmentDeg = maxPoints > 0 ? cat.maxScore / maxPoints * availableDeg : 0;
-    const segmentCirc = segmentDeg / 360 * circumference;
-    const fillRatio = cat.maxScore > 0 ? cat.score / cat.maxScore : 0;
-    const filledCirc = segmentCirc * fillRatio;
-    const catPct = cat.maxScore > 0 ? Math.round(fillRatio * 100) : 0;
+    const catDeg = maxPoints > 0 ? cat.score / maxPoints * 360 : 0;
+    if (catDeg < 0.1) {
+      consumed += catDeg;
+      continue;
+    }
+    const catPct = cat.maxScore > 0 ? Math.round(cat.score / cat.maxScore * 100) : 0;
     const color = scoreColorHex(catPct);
-    segments.push(
-      `<circle cx="60" cy="60" r="${radius}" fill="none" stroke="#e8e8e8" stroke-width="${strokeWidth}"
-        stroke-dasharray="${segmentCirc} ${circumference - segmentCirc}"
-        transform="rotate(${currentAngle} 60 60)"/>`
+    const arcLen = catDeg / 360 * circ;
+    const offset = circ * 0.25 - consumed / 360 * circ;
+    const catName = escapeHtml(cat.name);
+    const idx = segIdx;
+    arcs.push(
+      `<circle cx="${cx}" cy="${cy}" r="${radius}" fill="none"
+        stroke="${color}" stroke-width="${strokeWidth}"
+        stroke-dasharray="${arcLen.toFixed(2)} ${(circ - arcLen).toFixed(2)}"
+        stroke-dashoffset="${offset.toFixed(2)}"
+        class="seg-arc" data-idx="${idx}"
+        onmouseenter="document.getElementById('seg-pop-${idx}').style.display='flex'"
+        onmouseleave="document.getElementById('seg-pop-${idx}').style.display='none'"/>`
     );
-    if (filledCirc > 0) {
-      segments.push(
-        `<circle cx="60" cy="60" r="${radius}" fill="none" stroke="${color}" stroke-width="${strokeWidth}"
-          stroke-dasharray="${filledCirc} ${circumference - filledCirc}"
-          transform="rotate(${currentAngle} 60 60)"/>`
-      );
-    }
-    currentAngle += segmentDeg + gapDeg;
+    consumed += catDeg;
+    const divRad = consumed / 360 * 2 * Math.PI - Math.PI / 2;
+    const half = strokeWidth / 2 + 1;
+    const dx = Math.cos(divRad);
+    const dy = Math.sin(divRad);
+    arcs.push(
+      `<line x1="${(cx + (radius - half) * dx).toFixed(2)}" y1="${(cy + (radius - half) * dy).toFixed(2)}"
+        x2="${(cx + (radius + half) * dx).toFixed(2)}" y2="${(cy + (radius + half) * dy).toFixed(2)}"
+        stroke="#fff" stroke-width="2" pointer-events="none"/>`
+    );
+    segIdx++;
   }
+  const popovers = categories.filter((cat) => cat.score > 0).map((cat, i) => {
+    const catPct = cat.maxScore > 0 ? Math.round(cat.score / cat.maxScore * 100) : 0;
+    const color = scoreColorHex(catPct);
+    return `<div id="seg-pop-${i}" class="seg-popover">
+        <span class="seg-popover-dot" style="background:${color}"></span>
+        <span class="seg-popover-name">${escapeHtml(cat.name)}</span>
+        <span class="seg-popover-score">${catPct}%</span>
+        <span class="seg-popover-pts">${cat.score}/${cat.maxScore} pts</span>
+      </div>`;
+  }).join("");
   return `<div class="overall-gauge-wrap">
-    <svg class="gauge" viewBox="0 0 120 120" width="160" height="160">
-      ${segments.join("\n      ")}
-      <text x="60" y="54" text-anchor="middle" font-size="36" font-weight="700" fill="${textColor}">${overallScore}</text>
-      <text x="60" y="70" text-anchor="middle" font-size="12" font-weight="600" fill="${textColor}">${escapeHtml(grade)}</text>
-      <text x="60" y="84" text-anchor="middle" font-size="9" fill="#999">${totalPoints}/${maxPoints} pts</text>
+    <svg class="gauge" viewBox="0 0 ${size} ${size}" width="${size}" height="${size}">
+      ${trackCircle}
+      ${arcs.join("\n      ")}
+      <text x="${cx}" y="${cy - 8}" text-anchor="middle" font-size="40" font-weight="700" fill="${textColor}">${overallScore}</text>
+      <text x="${cx}" y="${cy + 14}" text-anchor="middle" font-size="14" font-weight="600" fill="${textColor}">${escapeHtml(grade)}</text>
+      <text x="${cx}" y="${cy + 30}" text-anchor="middle" font-size="11" fill="#999">${totalPoints}/${maxPoints} pts</text>
     </svg>
+    <div class="seg-popovers">${popovers}</div>
     <div class="score-scale">
       <span class="scale-fail">0-49</span>
       <span class="scale-average">50-89</span>
@@ -2222,15 +2249,57 @@ body {
   display: flex;
   align-items: center;
   flex-direction: column;
-  padding: 24px 0 20px;
+  padding: 32px 0 24px;
   border-bottom: 1px solid var(--border);
 }
 .overall-gauge-wrap {
   display: flex;
   flex-direction: column;
   align-items: center;
+  position: relative;
+}
+.overall-gauge-wrap .gauge {
+  display: block;
+  overflow: visible;
+}
+.seg-arc {
+  cursor: pointer;
+  transition: stroke-width 0.15s ease, filter 0.15s ease;
+}
+.seg-arc:hover {
+  stroke-width: 20;
+  filter: brightness(1.1);
+}
+
+/* Segment popovers */
+.seg-popovers {
+  position: relative;
+  min-height: 36px;
+  display: flex;
+  justify-content: center;
+  margin-top: 4px;
+}
+.seg-popover {
+  display: none;
+  align-items: center;
+  gap: 8px;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 14px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  font-size: 13px;
+  white-space: nowrap;
+}
+.seg-popover-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
 }
-.overall-gauge-wrap .gauge { display: block; }
+.seg-popover-name { font-weight: 600; }
+.seg-popover-score { font-weight: 700; }
+.seg-popover-pts { color: var(--text-secondary); }
 
 /* Score scale legend */
 .score-scale {

package/dist/cli.mjs

@@ -3,7 +3,7 @@ import { Command } from "commander";
 
 // src/modules/analyzer/constants.ts
 var DOMAIN_SIGNAL_TIMEOUT_CAP = 5e3;
-var VERSION = true ? "1.0.0" : "0.0.0";
+var VERSION = true ? "1.1.0" : "0.0.0";
 
 // src/modules/fetcher/constants.ts
 var MAX_RESPONSE_SIZE = 10 * 1024 * 1024;
@@ -1974,43 +1974,70 @@ function buildGaugeSvg(score, size = "small") {
     </svg>`;
 }
 function buildMultiSegmentGauge(overallScore, grade, totalPoints, maxPoints, categories) {
-  const radius = 56;
-  const circumference = 2 * Math.PI * radius;
-  const strokeWidth = 10;
-  const gapDeg = 1;
-  const totalGapDeg = gapDeg * categories.length;
-  const availableDeg = 360 - totalGapDeg;
+  const radius = 80;
+  const strokeWidth = 14;
+  const pad2 = 8;
+  const size = (radius + strokeWidth / 2 + pad2) * 2;
+  const cx = size / 2;
+  const cy = size / 2;
+  const circ = 2 * Math.PI * radius;
   const textColor = scoreTextColorHex(overallScore);
-  const segments = [];
-  let currentAngle = -90;
+  const trackCircle = `<circle cx="${cx}" cy="${cy}" r="${radius}" fill="none" stroke="#e8e8e8" stroke-width="${strokeWidth}"/>`;
+  const arcs = [];
+  let consumed = 0;
+  let segIdx = 0;
   for (const cat of categories) {
-    const segmentDeg = maxPoints > 0 ? cat.maxScore / maxPoints * availableDeg : 0;
-    const segmentCirc = segmentDeg / 360 * circumference;
-    const fillRatio = cat.maxScore > 0 ? cat.score / cat.maxScore : 0;
-    const filledCirc = segmentCirc * fillRatio;
-    const catPct = cat.maxScore > 0 ? Math.round(fillRatio * 100) : 0;
+    const catDeg = maxPoints > 0 ? cat.score / maxPoints * 360 : 0;
+    if (catDeg < 0.1) {
+      consumed += catDeg;
+      continue;
+    }
+    const catPct = cat.maxScore > 0 ? Math.round(cat.score / cat.maxScore * 100) : 0;
     const color = scoreColorHex(catPct);
-    segments.push(
-      `<circle cx="60" cy="60" r="${radius}" fill="none" stroke="#e8e8e8" stroke-width="${strokeWidth}"
-        stroke-dasharray="${segmentCirc} ${circumference - segmentCirc}"
-        transform="rotate(${currentAngle} 60 60)"/>`
+    const arcLen = catDeg / 360 * circ;
+    const offset = circ * 0.25 - consumed / 360 * circ;
+    const catName = escapeHtml(cat.name);
+    const idx = segIdx;
+    arcs.push(
+      `<circle cx="${cx}" cy="${cy}" r="${radius}" fill="none"
+        stroke="${color}" stroke-width="${strokeWidth}"
+        stroke-dasharray="${arcLen.toFixed(2)} ${(circ - arcLen).toFixed(2)}"
+        stroke-dashoffset="${offset.toFixed(2)}"
+        class="seg-arc" data-idx="${idx}"
+        onmouseenter="document.getElementById('seg-pop-${idx}').style.display='flex'"
+        onmouseleave="document.getElementById('seg-pop-${idx}').style.display='none'"/>`
     );
-    if (filledCirc > 0) {
-      segments.push(
-        `<circle cx="60" cy="60" r="${radius}" fill="none" stroke="${color}" stroke-width="${strokeWidth}"
-          stroke-dasharray="${filledCirc} ${circumference - filledCirc}"
-          transform="rotate(${currentAngle} 60 60)"/>`
-      );
-    }
-    currentAngle += segmentDeg + gapDeg;
+    consumed += catDeg;
+    const divRad = consumed / 360 * 2 * Math.PI - Math.PI / 2;
+    const half = strokeWidth / 2 + 1;
+    const dx = Math.cos(divRad);
+    const dy = Math.sin(divRad);
+    arcs.push(
+      `<line x1="${(cx + (radius - half) * dx).toFixed(2)}" y1="${(cy + (radius - half) * dy).toFixed(2)}"
+        x2="${(cx + (radius + half) * dx).toFixed(2)}" y2="${(cy + (radius + half) * dy).toFixed(2)}"
+        stroke="#fff" stroke-width="2" pointer-events="none"/>`
+    );
+    segIdx++;
   }
+  const popovers = categories.filter((cat) => cat.score > 0).map((cat, i) => {
+    const catPct = cat.maxScore > 0 ? Math.round(cat.score / cat.maxScore * 100) : 0;
+    const color = scoreColorHex(catPct);
+    return `<div id="seg-pop-${i}" class="seg-popover">
+        <span class="seg-popover-dot" style="background:${color}"></span>
+        <span class="seg-popover-name">${escapeHtml(cat.name)}</span>
+        <span class="seg-popover-score">${catPct}%</span>
+        <span class="seg-popover-pts">${cat.score}/${cat.maxScore} pts</span>
+      </div>`;
+  }).join("");
   return `<div class="overall-gauge-wrap">
-    <svg class="gauge" viewBox="0 0 120 120" width="160" height="160">
-      ${segments.join("\n      ")}
-      <text x="60" y="54" text-anchor="middle" font-size="36" font-weight="700" fill="${textColor}">${overallScore}</text>
-      <text x="60" y="70" text-anchor="middle" font-size="12" font-weight="600" fill="${textColor}">${escapeHtml(grade)}</text>
-      <text x="60" y="84" text-anchor="middle" font-size="9" fill="#999">${totalPoints}/${maxPoints} pts</text>
+    <svg class="gauge" viewBox="0 0 ${size} ${size}" width="${size}" height="${size}">
+      ${trackCircle}
+      ${arcs.join("\n      ")}
+      <text x="${cx}" y="${cy - 8}" text-anchor="middle" font-size="40" font-weight="700" fill="${textColor}">${overallScore}</text>
+      <text x="${cx}" y="${cy + 14}" text-anchor="middle" font-size="14" font-weight="600" fill="${textColor}">${escapeHtml(grade)}</text>
+      <text x="${cx}" y="${cy + 30}" text-anchor="middle" font-size="11" fill="#999">${totalPoints}/${maxPoints} pts</text>
     </svg>
+    <div class="seg-popovers">${popovers}</div>
     <div class="score-scale">
       <span class="scale-fail">0-49</span>
       <span class="scale-average">50-89</span>
@@ -2198,15 +2225,57 @@ body {
   display: flex;
   align-items: center;
   flex-direction: column;
-  padding: 24px 0 20px;
+  padding: 32px 0 24px;
   border-bottom: 1px solid var(--border);
 }
 .overall-gauge-wrap {
   display: flex;
   flex-direction: column;
   align-items: center;
+  position: relative;
+}
+.overall-gauge-wrap .gauge {
+  display: block;
+  overflow: visible;
+}
+.seg-arc {
+  cursor: pointer;
+  transition: stroke-width 0.15s ease, filter 0.15s ease;
+}
+.seg-arc:hover {
+  stroke-width: 20;
+  filter: brightness(1.1);
+}
+
+/* Segment popovers */
+.seg-popovers {
+  position: relative;
+  min-height: 36px;
+  display: flex;
+  justify-content: center;
+  margin-top: 4px;
+}
+.seg-popover {
+  display: none;
+  align-items: center;
+  gap: 8px;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 14px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  font-size: 13px;
+  white-space: nowrap;
+}
+.seg-popover-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
 }
-.overall-gauge-wrap .gauge { display: block; }
+.seg-popover-name { font-weight: 600; }
+.seg-popover-score { font-weight: 700; }
+.seg-popover-pts { color: var(--text-secondary); }
 
 /* Score scale legend */
 .score-scale {

package/dist/index.js

@@ -1440,7 +1440,7 @@ var import_zod = require("zod");
 
 // src/modules/analyzer/constants.ts
 var DOMAIN_SIGNAL_TIMEOUT_CAP = 5e3;
-var VERSION = true ? "1.0.0" : "0.0.0";
+var VERSION = true ? "1.1.0" : "0.0.0";
 
 // src/modules/fetcher/schema.ts
 var FetchOptionsSchema = import_zod.z.object({
@@ -1999,43 +1999,70 @@ function buildGaugeSvg(score, size = "small") {
     </svg>`;
 }
 function buildMultiSegmentGauge(overallScore, grade, totalPoints, maxPoints, categories) {
-  const radius = 56;
-  const circumference = 2 * Math.PI * radius;
-  const strokeWidth = 10;
-  const gapDeg = 1;
-  const totalGapDeg = gapDeg * categories.length;
-  const availableDeg = 360 - totalGapDeg;
+  const radius = 80;
+  const strokeWidth = 14;
+  const pad2 = 8;
+  const size = (radius + strokeWidth / 2 + pad2) * 2;
+  const cx = size / 2;
+  const cy = size / 2;
+  const circ = 2 * Math.PI * radius;
   const textColor = scoreTextColorHex(overallScore);
-  const segments = [];
-  let currentAngle = -90;
+  const trackCircle = `<circle cx="${cx}" cy="${cy}" r="${radius}" fill="none" stroke="#e8e8e8" stroke-width="${strokeWidth}"/>`;
+  const arcs = [];
+  let consumed = 0;
+  let segIdx = 0;
   for (const cat of categories) {
-    const segmentDeg = maxPoints > 0 ? cat.maxScore / maxPoints * availableDeg : 0;
-    const segmentCirc = segmentDeg / 360 * circumference;
-    const fillRatio = cat.maxScore > 0 ? cat.score / cat.maxScore : 0;
-    const filledCirc = segmentCirc * fillRatio;
-    const catPct = cat.maxScore > 0 ? Math.round(fillRatio * 100) : 0;
+    const catDeg = maxPoints > 0 ? cat.score / maxPoints * 360 : 0;
+    if (catDeg < 0.1) {
+      consumed += catDeg;
+      continue;
+    }
+    const catPct = cat.maxScore > 0 ? Math.round(cat.score / cat.maxScore * 100) : 0;
     const color = scoreColorHex(catPct);
-    segments.push(
-      `<circle cx="60" cy="60" r="${radius}" fill="none" stroke="#e8e8e8" stroke-width="${strokeWidth}"
-        stroke-dasharray="${segmentCirc} ${circumference - segmentCirc}"
-        transform="rotate(${currentAngle} 60 60)"/>`
+    const arcLen = catDeg / 360 * circ;
+    const offset = circ * 0.25 - consumed / 360 * circ;
+    const catName = escapeHtml(cat.name);
+    const idx = segIdx;
+    arcs.push(
+      `<circle cx="${cx}" cy="${cy}" r="${radius}" fill="none"
+        stroke="${color}" stroke-width="${strokeWidth}"
+        stroke-dasharray="${arcLen.toFixed(2)} ${(circ - arcLen).toFixed(2)}"
+        stroke-dashoffset="${offset.toFixed(2)}"
+        class="seg-arc" data-idx="${idx}"
+        onmouseenter="document.getElementById('seg-pop-${idx}').style.display='flex'"
+        onmouseleave="document.getElementById('seg-pop-${idx}').style.display='none'"/>`
     );
-    if (filledCirc > 0) {
-      segments.push(
-        `<circle cx="60" cy="60" r="${radius}" fill="none" stroke="${color}" stroke-width="${strokeWidth}"
-          stroke-dasharray="${filledCirc} ${circumference - filledCirc}"
-          transform="rotate(${currentAngle} 60 60)"/>`
-      );
-    }
-    currentAngle += segmentDeg + gapDeg;
+    consumed += catDeg;
+    const divRad = consumed / 360 * 2 * Math.PI - Math.PI / 2;
+    const half = strokeWidth / 2 + 1;
+    const dx = Math.cos(divRad);
+    const dy = Math.sin(divRad);
+    arcs.push(
+      `<line x1="${(cx + (radius - half) * dx).toFixed(2)}" y1="${(cy + (radius - half) * dy).toFixed(2)}"
+        x2="${(cx + (radius + half) * dx).toFixed(2)}" y2="${(cy + (radius + half) * dy).toFixed(2)}"
+        stroke="#fff" stroke-width="2" pointer-events="none"/>`
+    );
+    segIdx++;
   }
+  const popovers = categories.filter((cat) => cat.score > 0).map((cat, i) => {
+    const catPct = cat.maxScore > 0 ? Math.round(cat.score / cat.maxScore * 100) : 0;
+    const color = scoreColorHex(catPct);
+    return `<div id="seg-pop-${i}" class="seg-popover">
+        <span class="seg-popover-dot" style="background:${color}"></span>
+        <span class="seg-popover-name">${escapeHtml(cat.name)}</span>
+        <span class="seg-popover-score">${catPct}%</span>
+        <span class="seg-popover-pts">${cat.score}/${cat.maxScore} pts</span>
+      </div>`;
+  }).join("");
   return `<div class="overall-gauge-wrap">
-    <svg class="gauge" viewBox="0 0 120 120" width="160" height="160">
-      ${segments.join("\n      ")}
-      <text x="60" y="54" text-anchor="middle" font-size="36" font-weight="700" fill="${textColor}">${overallScore}</text>
-      <text x="60" y="70" text-anchor="middle" font-size="12" font-weight="600" fill="${textColor}">${escapeHtml(grade)}</text>
-      <text x="60" y="84" text-anchor="middle" font-size="9" fill="#999">${totalPoints}/${maxPoints} pts</text>
+    <svg class="gauge" viewBox="0 0 ${size} ${size}" width="${size}" height="${size}">
+      ${trackCircle}
+      ${arcs.join("\n      ")}
+      <text x="${cx}" y="${cy - 8}" text-anchor="middle" font-size="40" font-weight="700" fill="${textColor}">${overallScore}</text>
+      <text x="${cx}" y="${cy + 14}" text-anchor="middle" font-size="14" font-weight="600" fill="${textColor}">${escapeHtml(grade)}</text>
+      <text x="${cx}" y="${cy + 30}" text-anchor="middle" font-size="11" fill="#999">${totalPoints}/${maxPoints} pts</text>
     </svg>
+    <div class="seg-popovers">${popovers}</div>
     <div class="score-scale">
       <span class="scale-fail">0-49</span>
       <span class="scale-average">50-89</span>
@@ -2223,15 +2250,57 @@ body {
   display: flex;
   align-items: center;
   flex-direction: column;
-  padding: 24px 0 20px;
+  padding: 32px 0 24px;
   border-bottom: 1px solid var(--border);
 }
 .overall-gauge-wrap {
   display: flex;
   flex-direction: column;
   align-items: center;
+  position: relative;
+}
+.overall-gauge-wrap .gauge {
+  display: block;
+  overflow: visible;
+}
+.seg-arc {
+  cursor: pointer;
+  transition: stroke-width 0.15s ease, filter 0.15s ease;
+}
+.seg-arc:hover {
+  stroke-width: 20;
+  filter: brightness(1.1);
+}
+
+/* Segment popovers */
+.seg-popovers {
+  position: relative;
+  min-height: 36px;
+  display: flex;
+  justify-content: center;
+  margin-top: 4px;
+}
+.seg-popover {
+  display: none;
+  align-items: center;
+  gap: 8px;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 14px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  font-size: 13px;
+  white-space: nowrap;
+}
+.seg-popover-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
 }
-.overall-gauge-wrap .gauge { display: block; }
+.seg-popover-name { font-weight: 600; }
+.seg-popover-score { font-weight: 700; }
+.seg-popover-pts { color: var(--text-secondary); }
 
 /* Score scale legend */
 .score-scale {

package/dist/index.mjs

@@ -1402,7 +1402,7 @@ import { z } from "zod";
 
 // src/modules/analyzer/constants.ts
 var DOMAIN_SIGNAL_TIMEOUT_CAP = 5e3;
-var VERSION = true ? "1.0.0" : "0.0.0";
+var VERSION = true ? "1.1.0" : "0.0.0";
 
 // src/modules/fetcher/schema.ts
 var FetchOptionsSchema = z.object({
@@ -1961,43 +1961,70 @@ function buildGaugeSvg(score, size = "small") {
     </svg>`;
 }
 function buildMultiSegmentGauge(overallScore, grade, totalPoints, maxPoints, categories) {
-  const radius = 56;
-  const circumference = 2 * Math.PI * radius;
-  const strokeWidth = 10;
-  const gapDeg = 1;
-  const totalGapDeg = gapDeg * categories.length;
-  const availableDeg = 360 - totalGapDeg;
+  const radius = 80;
+  const strokeWidth = 14;
+  const pad2 = 8;
+  const size = (radius + strokeWidth / 2 + pad2) * 2;
+  const cx = size / 2;
+  const cy = size / 2;
+  const circ = 2 * Math.PI * radius;
   const textColor = scoreTextColorHex(overallScore);
-  const segments = [];
-  let currentAngle = -90;
+  const trackCircle = `<circle cx="${cx}" cy="${cy}" r="${radius}" fill="none" stroke="#e8e8e8" stroke-width="${strokeWidth}"/>`;
+  const arcs = [];
+  let consumed = 0;
+  let segIdx = 0;
   for (const cat of categories) {
-    const segmentDeg = maxPoints > 0 ? cat.maxScore / maxPoints * availableDeg : 0;
-    const segmentCirc = segmentDeg / 360 * circumference;
-    const fillRatio = cat.maxScore > 0 ? cat.score / cat.maxScore : 0;
-    const filledCirc = segmentCirc * fillRatio;
-    const catPct = cat.maxScore > 0 ? Math.round(fillRatio * 100) : 0;
+    const catDeg = maxPoints > 0 ? cat.score / maxPoints * 360 : 0;
+    if (catDeg < 0.1) {
+      consumed += catDeg;
+      continue;
+    }
+    const catPct = cat.maxScore > 0 ? Math.round(cat.score / cat.maxScore * 100) : 0;
     const color = scoreColorHex(catPct);
-    segments.push(
-      `<circle cx="60" cy="60" r="${radius}" fill="none" stroke="#e8e8e8" stroke-width="${strokeWidth}"
-        stroke-dasharray="${segmentCirc} ${circumference - segmentCirc}"
-        transform="rotate(${currentAngle} 60 60)"/>`
+    const arcLen = catDeg / 360 * circ;
+    const offset = circ * 0.25 - consumed / 360 * circ;
+    const catName = escapeHtml(cat.name);
+    const idx = segIdx;
+    arcs.push(
+      `<circle cx="${cx}" cy="${cy}" r="${radius}" fill="none"
+        stroke="${color}" stroke-width="${strokeWidth}"
+        stroke-dasharray="${arcLen.toFixed(2)} ${(circ - arcLen).toFixed(2)}"
+        stroke-dashoffset="${offset.toFixed(2)}"
+        class="seg-arc" data-idx="${idx}"
+        onmouseenter="document.getElementById('seg-pop-${idx}').style.display='flex'"
+        onmouseleave="document.getElementById('seg-pop-${idx}').style.display='none'"/>`
     );
-    if (filledCirc > 0) {
-      segments.push(
-        `<circle cx="60" cy="60" r="${radius}" fill="none" stroke="${color}" stroke-width="${strokeWidth}"
-          stroke-dasharray="${filledCirc} ${circumference - filledCirc}"
-          transform="rotate(${currentAngle} 60 60)"/>`
-      );
-    }
-    currentAngle += segmentDeg + gapDeg;
+    consumed += catDeg;
+    const divRad = consumed / 360 * 2 * Math.PI - Math.PI / 2;
+    const half = strokeWidth / 2 + 1;
+    const dx = Math.cos(divRad);
+    const dy = Math.sin(divRad);
+    arcs.push(
+      `<line x1="${(cx + (radius - half) * dx).toFixed(2)}" y1="${(cy + (radius - half) * dy).toFixed(2)}"
+        x2="${(cx + (radius + half) * dx).toFixed(2)}" y2="${(cy + (radius + half) * dy).toFixed(2)}"
+        stroke="#fff" stroke-width="2" pointer-events="none"/>`
+    );
+    segIdx++;
   }
+  const popovers = categories.filter((cat) => cat.score > 0).map((cat, i) => {
+    const catPct = cat.maxScore > 0 ? Math.round(cat.score / cat.maxScore * 100) : 0;
+    const color = scoreColorHex(catPct);
+    return `<div id="seg-pop-${i}" class="seg-popover">
+        <span class="seg-popover-dot" style="background:${color}"></span>
+        <span class="seg-popover-name">${escapeHtml(cat.name)}</span>
+        <span class="seg-popover-score">${catPct}%</span>
+        <span class="seg-popover-pts">${cat.score}/${cat.maxScore} pts</span>
+      </div>`;
+  }).join("");
   return `<div class="overall-gauge-wrap">
-    <svg class="gauge" viewBox="0 0 120 120" width="160" height="160">
-      ${segments.join("\n      ")}
-      <text x="60" y="54" text-anchor="middle" font-size="36" font-weight="700" fill="${textColor}">${overallScore}</text>
-      <text x="60" y="70" text-anchor="middle" font-size="12" font-weight="600" fill="${textColor}">${escapeHtml(grade)}</text>
-      <text x="60" y="84" text-anchor="middle" font-size="9" fill="#999">${totalPoints}/${maxPoints} pts</text>
+    <svg class="gauge" viewBox="0 0 ${size} ${size}" width="${size}" height="${size}">
+      ${trackCircle}
+      ${arcs.join("\n      ")}
+      <text x="${cx}" y="${cy - 8}" text-anchor="middle" font-size="40" font-weight="700" fill="${textColor}">${overallScore}</text>
+      <text x="${cx}" y="${cy + 14}" text-anchor="middle" font-size="14" font-weight="600" fill="${textColor}">${escapeHtml(grade)}</text>
+      <text x="${cx}" y="${cy + 30}" text-anchor="middle" font-size="11" fill="#999">${totalPoints}/${maxPoints} pts</text>
     </svg>
+    <div class="seg-popovers">${popovers}</div>
     <div class="score-scale">
       <span class="scale-fail">0-49</span>
       <span class="scale-average">50-89</span>
@@ -2185,15 +2212,57 @@ body {
   display: flex;
   align-items: center;
   flex-direction: column;
-  padding: 24px 0 20px;
+  padding: 32px 0 24px;
   border-bottom: 1px solid var(--border);
 }
 .overall-gauge-wrap {
   display: flex;
   flex-direction: column;
   align-items: center;
+  position: relative;
+}
+.overall-gauge-wrap .gauge {
+  display: block;
+  overflow: visible;
+}
+.seg-arc {
+  cursor: pointer;
+  transition: stroke-width 0.15s ease, filter 0.15s ease;
+}
+.seg-arc:hover {
+  stroke-width: 20;
+  filter: brightness(1.1);
+}
+
+/* Segment popovers */
+.seg-popovers {
+  position: relative;
+  min-height: 36px;
+  display: flex;
+  justify-content: center;
+  margin-top: 4px;
+}
+.seg-popover {
+  display: none;
+  align-items: center;
+  gap: 8px;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 14px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  font-size: 13px;
+  white-space: nowrap;
+}
+.seg-popover-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
 }
-.overall-gauge-wrap .gauge { display: block; }
+.seg-popover-name { font-weight: 600; }
+.seg-popover-score { font-weight: 700; }
+.seg-popover-pts { color: var(--text-secondary); }
 
 /* Score scale legend */
 .score-scale {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aiseo-audit",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Lighthouse for AI SEO. Audit any webpage for AI search readiness. 7 categories, 30+ factors, research-backed scoring. Deterministic, engine-agnostic, zero API keys.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",