@pennyfarthing/core 7.5.0 → 7.6.1

package/packages/core/dist/scripts/generate-spider.js

@@ -0,0 +1,338 @@
+/**
+ * OCEAN Spider Chart Generator
+ *
+ * Story 11-10: Build OCEAN spider chart generator (complement to Chernoff faces)
+ *
+ * Generates pentagon-shaped spider charts showing OCEAN personality profiles.
+ * Charts are unfilled (stroke only) to enable clean stacking for comparisons.
+ */
+import { readFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { parse as parseYaml } from 'yaml';
+import { findMonorepoRoot } from '../cli/utils/files.js';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+// Find monorepo root by walking up from current directory
+const projectRoot = findMonorepoRoot(__dirname);
+const themesDir = join(projectRoot, 'pennyfarthing-dist', 'personas', 'themes');
+/**
+ * Load OCEAN scores for a specific theme and agent
+ */
+export function loadThemeOcean(theme, agent) {
+    const themePath = join(themesDir, `${theme}.yaml`);
+    const content = readFileSync(themePath, 'utf-8');
+    const data = parseYaml(content);
+    const agents = data.agents;
+    if (!agents || !agents[agent]) {
+        return { O: 3, C: 3, E: 3, A: 3, N: 3 }; // Default neutral scores
+    }
+    const ocean = agents[agent].ocean;
+    return ocean || { O: 3, C: 3, E: 3, A: 3, N: 3 };
+}
+// Chart configuration
+const VIEW_SIZE = 200;
+const CENTER_X = VIEW_SIZE / 2;
+const CENTER_Y = VIEW_SIZE / 2 + 8; // Shifted down to balance top/bottom margins
+const OUTER_RADIUS = 70; // Leaves room for labels
+const LABEL_RADIUS = OUTER_RADIUS + 18;
+// OCEAN dimension order (clockwise from top)
+const DIMENSIONS = ['O', 'C', 'E', 'A', 'N'];
+const DIMENSION_LABELS = {
+    O: 'O',
+    C: 'C',
+    E: 'E',
+    A: 'A',
+    N: 'N',
+};
+// Role-specific colors (consistent across all charts for visual training)
+export const ROLE_COLORS = {
+    orchestrator: '#f59e0b', // Amber
+    sm: '#10b981', // Emerald
+    tea: '#ef4444', // Red
+    dev: '#3b82f6', // Blue
+    reviewer: '#8b5cf6', // Purple
+    architect: '#06b6d4', // Cyan
+    pm: '#ec4899', // Pink
+    'tech-writer': '#84cc16', // Lime
+    'ux-designer': '#f97316', // Orange
+    devops: '#6366f1', // Indigo
+};
+// Legacy overlay colors (for arbitrary comparisons)
+const OVERLAY_COLORS = [
+    '#2563eb', // Blue
+    '#dc2626', // Red
+    '#16a34a', // Green
+    '#9333ea', // Purple
+    '#ea580c', // Orange
+];
+// Background and styling (dark theme for consistent rendering)
+const BACKGROUND_COLOR = '#000000';
+const GRID_COLOR = '#374151';
+const AXIS_COLOR = '#4b5563';
+const LABEL_COLOR = '#e5e7eb';
+const DATA_STROKE_WIDTH = 2;
+const GRID_STROKE_WIDTH = 1;
+/**
+ * Calculate point on pentagon for given dimension and score
+ * @param dimensionIndex - Index 0-4 for O, C, E, A, N
+ * @param score - Score 1-5
+ * @param radius - Base radius to use
+ */
+function getPoint(dimensionIndex, score, radius) {
+    // Start from top (-90°), go clockwise
+    // Each vertex is 72° apart (360° / 5)
+    const angle = ((dimensionIndex * 72 - 90) * Math.PI) / 180;
+    // Map score 1-5 to 20%-100% of radius
+    const normalizedScore = 0.2 + ((score - 1) / 4) * 0.8;
+    const r = radius * normalizedScore;
+    return {
+        x: CENTER_X + r * Math.cos(angle),
+        y: CENTER_Y + r * Math.sin(angle),
+    };
+}
+/**
+ * Get vertex position (at full radius) for a dimension
+ */
+function getVertex(dimensionIndex) {
+    const angle = ((dimensionIndex * 72 - 90) * Math.PI) / 180;
+    return {
+        x: CENTER_X + OUTER_RADIUS * Math.cos(angle),
+        y: CENTER_Y + OUTER_RADIUS * Math.sin(angle),
+    };
+}
+/**
+ * Get label position (outside the pentagon)
+ */
+function getLabelPosition(dimensionIndex) {
+    const angle = ((dimensionIndex * 72 - 90) * Math.PI) / 180;
+    const x = CENTER_X + LABEL_RADIUS * Math.cos(angle);
+    const y = CENTER_Y + LABEL_RADIUS * Math.sin(angle);
+    // Text anchor depends on position
+    let anchor = 'middle';
+    if (dimensionIndex === 1 || dimensionIndex === 2)
+        anchor = 'start'; // Right side
+    if (dimensionIndex === 3 || dimensionIndex === 4)
+        anchor = 'end'; // Left side
+    return { x, y, anchor };
+}
+/**
+ * Generate grid pentagon at a specific scale
+ */
+function generateGridPolygon(scale) {
+    const points = DIMENSIONS.map((_, i) => {
+        const angle = ((i * 72 - 90) * Math.PI) / 180;
+        const r = OUTER_RADIUS * scale;
+        const x = CENTER_X + r * Math.cos(angle);
+        const y = CENTER_Y + r * Math.sin(angle);
+        return `${x.toFixed(1)},${y.toFixed(1)}`;
+    }).join(' ');
+    return `<polygon points="${points}" fill="none" stroke="${GRID_COLOR}" stroke-width="${GRID_STROKE_WIDTH}" />`;
+}
+/**
+ * Generate axis line from center to vertex
+ */
+function generateAxisLine(dimensionIndex) {
+    const vertex = getVertex(dimensionIndex);
+    return `<line x1="${CENTER_X}" y1="${CENTER_Y}" x2="${vertex.x.toFixed(1)}" y2="${vertex.y.toFixed(1)}" stroke="${AXIS_COLOR}" stroke-width="${GRID_STROKE_WIDTH}" />`;
+}
+/**
+ * Generate dimension label
+ */
+function generateLabel(dimensionIndex) {
+    const pos = getLabelPosition(dimensionIndex);
+    const label = DIMENSION_LABELS[DIMENSIONS[dimensionIndex]];
+    // Adjust y for vertical centering
+    const yOffset = dimensionIndex === 0 ? -4 : dimensionIndex === 2 || dimensionIndex === 3 ? 4 : 0;
+    return `<text x="${pos.x.toFixed(1)}" y="${(pos.y + yOffset).toFixed(1)}" text-anchor="${pos.anchor}" font-family="sans-serif" font-size="12" font-weight="bold" fill="${LABEL_COLOR}">${label}</text>`;
+}
+/**
+ * Generate data polygon from OCEAN scores
+ */
+function generateDataPolygon(ocean, color = '#2563eb', strokeWidth = DATA_STROKE_WIDTH) {
+    const points = DIMENSIONS.map((dim, i) => {
+        const point = getPoint(i, ocean[dim], OUTER_RADIUS);
+        return `${point.x.toFixed(1)},${point.y.toFixed(1)}`;
+    }).join(' ');
+    return `<polygon points="${points}" fill="none" stroke="${color}" stroke-width="${strokeWidth}" stroke-linejoin="round" />`;
+}
+/**
+ * Generate SVG spider chart from OCEAN scores
+ */
+export function generateSpiderFromOcean(ocean, color = '#2563eb') {
+    // Grid pentagons at 20%, 40%, 60%, 80%, 100%
+    const gridPolygons = [0.2, 0.4, 0.6, 0.8, 1.0]
+        .map((scale) => generateGridPolygon(scale))
+        .join('\n  ');
+    // Axis lines
+    const axisLines = DIMENSIONS.map((_, i) => generateAxisLine(i)).join('\n  ');
+    // Dimension labels
+    const labels = DIMENSIONS.map((_, i) => generateLabel(i)).join('\n  ');
+    // Data polygon
+    const dataPolygon = generateDataPolygon(ocean, color);
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${VIEW_SIZE} ${VIEW_SIZE}">
+  <!-- Background -->
+  <rect width="${VIEW_SIZE}" height="${VIEW_SIZE}" fill="${BACKGROUND_COLOR}" />
+
+  <!-- Grid -->
+  ${gridPolygons}
+
+  <!-- Axes -->
+  ${axisLines}
+
+  <!-- Data -->
+  ${dataPolygon}
+
+  <!-- Labels -->
+  ${labels}
+</svg>`;
+}
+/**
+ * Generate SVG spider chart from theme and agent
+ * Uses role-specific color for consistent visual training
+ */
+export function generateSpider(theme, agent) {
+    const ocean = loadThemeOcean(theme, agent);
+    const color = ROLE_COLORS[agent] || '#2563eb';
+    return generateSpiderFromOcean(ocean, color);
+}
+/**
+ * Format theme name for display
+ */
+function formatThemeName(theme) {
+    return theme
+        .split('-')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+}
+/**
+ * Generate legend item
+ */
+function generateLegendItem(index, label, color, yOffset) {
+    const x = 10;
+    const y = VIEW_SIZE - 10 - yOffset;
+    return `<rect x="${x}" y="${y - 8}" width="12" height="12" fill="none" stroke="${color}" stroke-width="2" />
+  <text x="${x + 16}" y="${y}" font-family="sans-serif" font-size="10" fill="${LABEL_COLOR}">${label}</text>`;
+}
+/**
+ * Generate overlay spider chart comparing multiple characters
+ */
+export function generateOverlaySpider(characters) {
+    // Grid pentagons
+    const gridPolygons = [0.2, 0.4, 0.6, 0.8, 1.0]
+        .map((scale) => generateGridPolygon(scale))
+        .join('\n  ');
+    // Axis lines
+    const axisLines = DIMENSIONS.map((_, i) => generateAxisLine(i)).join('\n  ');
+    // Dimension labels
+    const labels = DIMENSIONS.map((_, i) => generateLabel(i)).join('\n  ');
+    // Data polygons for each character
+    const dataPolygons = characters
+        .map((char, index) => {
+        const ocean = loadThemeOcean(char.theme, char.agent);
+        const color = OVERLAY_COLORS[index % OVERLAY_COLORS.length];
+        return generateDataPolygon(ocean, color);
+    })
+        .join('\n  ');
+    // Legend items
+    const legendItems = characters
+        .map((char, index) => {
+        const color = OVERLAY_COLORS[index % OVERLAY_COLORS.length];
+        const label = char.label || `${formatThemeName(char.theme)} (${char.agent})`;
+        const yOffset = (characters.length - 1 - index) * 16;
+        return generateLegendItem(index, label, color, yOffset);
+    })
+        .join('\n  ');
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${VIEW_SIZE} ${VIEW_SIZE}">
+  <!-- Background -->
+  <rect width="${VIEW_SIZE}" height="${VIEW_SIZE}" fill="${BACKGROUND_COLOR}" />
+
+  <!-- Grid -->
+  ${gridPolygons}
+
+  <!-- Axes -->
+  ${axisLines}
+
+  <!-- Data -->
+  ${dataPolygons}
+
+  <!-- Labels -->
+  ${labels}
+
+  <!-- Legend -->
+  ${legendItems}
+</svg>`;
+}
+// Agent order for team overlay (matches AGENTS in generate-all-spiders.ts)
+const TEAM_AGENTS = [
+    'orchestrator',
+    'sm',
+    'tea',
+    'dev',
+    'reviewer',
+    'architect',
+    'pm',
+    'tech-writer',
+    'ux-designer',
+    'devops',
+];
+// Human-readable agent names for legend (reserved for future use)
+const _AGENT_DISPLAY_NAMES = {
+    orchestrator: 'Orch',
+    sm: 'SM',
+    tea: 'TEA',
+    dev: 'Dev',
+    reviewer: 'Rev',
+    architect: 'Arch',
+    pm: 'PM',
+    'tech-writer': 'TW',
+    'ux-designer': 'UX',
+    devops: 'Ops',
+};
+// Tactical agents get emphasized (thicker stroke) in team overlays
+const TACTICAL_AGENTS = new Set(['sm', 'tea', 'dev', 'reviewer']);
+const TACTICAL_STROKE_WIDTH = 2.5;
+const STRATEGIC_STROKE_WIDTH = 1;
+/**
+ * Generate team overlay spider chart showing all 10 agents for a theme
+ * Uses role-specific colors for consistent visual training
+ */
+export function generateTeamOverlay(theme) {
+    // Grid pentagons
+    const gridPolygons = [0.2, 0.4, 0.6, 0.8, 1.0]
+        .map((scale) => generateGridPolygon(scale))
+        .join('\n  ');
+    // Axis lines
+    const axisLines = TEAM_AGENTS.slice(0, 5)
+        .map((_, i) => generateAxisLine(i))
+        .join('\n  ');
+    // Dimension labels
+    const labels = DIMENSIONS.map((_, i) => generateLabel(i)).join('\n  ');
+    // Data polygons for each agent (using role colors)
+    // Tactical agents (sm, tea, dev, reviewer) emphasized with thicker strokes
+    // Strategic/support agents de-emphasized with thinner strokes
+    const dataPolygons = TEAM_AGENTS.map((agent) => {
+        const ocean = loadThemeOcean(theme, agent);
+        const color = ROLE_COLORS[agent];
+        const strokeWidth = TACTICAL_AGENTS.has(agent) ? TACTICAL_STROKE_WIDTH : STRATEGIC_STROKE_WIDTH;
+        return generateDataPolygon(ocean, color, strokeWidth);
+    }).join('\n  ');
+    // Legend removed - color key is in markdown header
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${VIEW_SIZE} ${VIEW_SIZE}">
+  <!-- Background -->
+  <rect width="${VIEW_SIZE}" height="${VIEW_SIZE}" fill="${BACKGROUND_COLOR}" />
+
+  <!-- Grid -->
+  ${gridPolygons}
+
+  <!-- Axes -->
+  ${axisLines}
+
+  <!-- Data -->
+  ${dataPolygons}
+
+  <!-- Labels -->
+  ${labels}
+</svg>`;
+}
+//# sourceMappingURL=generate-spider.js.map

package/packages/core/dist/scripts/generate-spider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-spider.js","sourceRoot":"","sources":["../../src/scripts/generate-spider.ts"],"names":[],"mappings":"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"}

package/packages/core/dist/scripts/generate-spider.test.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Tests for Story 11-10: Build OCEAN Spider Chart Generator
+ *
+ * These tests verify:
+ * AC1: scripts/generate-spider.ts functional (module exists and exports work)
+ * AC2: Takes theme + agent as input, outputs SVG
+ * AC3: Spider charts clearly show all 5 OCEAN dimensions
+ * AC4: Overlay mode compares 2-3 characters on same chart
+ * AC5: SVGs render correctly in browsers and markdown (valid SVG structure)
+ *
+ * Run with: npm test
+ */
+export {};
+//# sourceMappingURL=generate-spider.test.d.ts.map

package/packages/core/dist/scripts/generate-spider.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-spider.test.d.ts","sourceRoot":"","sources":["../../src/scripts/generate-spider.test.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG"}

package/packages/core/dist/scripts/generate-spider.test.js

@@ -0,0 +1,271 @@
+/**
+ * Tests for Story 11-10: Build OCEAN Spider Chart Generator
+ *
+ * These tests verify:
+ * AC1: scripts/generate-spider.ts functional (module exists and exports work)
+ * AC2: Takes theme + agent as input, outputs SVG
+ * AC3: Spider charts clearly show all 5 OCEAN dimensions
+ * AC4: Overlay mode compares 2-3 characters on same chart
+ * AC5: SVGs render correctly in browsers and markdown (valid SVG structure)
+ *
+ * Run with: npm test
+ */
+import { describe, it } from 'node:test';
+import assert from 'node:assert';
+// ============================================================================
+// AC1: scripts/generate-spider.ts functional
+// ============================================================================
+describe('AC1: Spider Chart Module Exists and Exports', () => {
+    it('should export generateSpider function', async () => {
+        const module = await import('./generate-spider.js');
+        assert.ok(typeof module.generateSpider === 'function', 'generateSpider should be a function');
+    });
+    it('should export generateSpiderFromOcean function for direct OCEAN input', async () => {
+        const module = await import('./generate-spider.js');
+        assert.ok(typeof module.generateSpiderFromOcean === 'function', 'generateSpiderFromOcean should be a function');
+    });
+    it('should export generateOverlaySpider function for comparison mode', async () => {
+        const module = await import('./generate-spider.js');
+        assert.ok(typeof module.generateOverlaySpider === 'function', 'generateOverlaySpider should be a function');
+    });
+});
+// ============================================================================
+// AC2: Takes theme + agent as input, outputs SVG
+// ============================================================================
+describe('AC2: Theme + Agent Input -> SVG Output', () => {
+    it('should generate SVG string from theme and agent', async () => {
+        const { generateSpider } = await import('./generate-spider.js');
+        const svg = generateSpider('deadwood', 'sm');
+        assert.ok(typeof svg === 'string', 'Should return string');
+        assert.ok(svg.includes('<svg'), 'Should contain SVG opening tag');
+        assert.ok(svg.includes('</svg>'), 'Should contain SVG closing tag');
+    });
+    it('should work for all 10 agent roles', async () => {
+        const { generateSpider } = await import('./generate-spider.js');
+        const roles = [
+            'orchestrator',
+            'sm',
+            'tea',
+            'dev',
+            'reviewer',
+            'architect',
+            'pm',
+            'tech-writer',
+            'ux-designer',
+            'devops',
+        ];
+        for (const role of roles) {
+            const svg = generateSpider('deadwood', role);
+            assert.ok(svg.includes('<svg'), `Should generate SVG for ${role}`);
+        }
+    });
+    it('should throw ENOENT for non-existent theme', async () => {
+        const { generateSpider } = await import('./generate-spider.js');
+        assert.throws(() => generateSpider('nonexistent-theme', 'sm'), /ENOENT/, 'Should throw ENOENT for missing theme file');
+    });
+    it('should return default OCEAN scores for non-existent agent', async () => {
+        const { generateSpider } = await import('./generate-spider.js');
+        // Non-existent agents get default neutral scores (3,3,3,3,3) rather than error
+        const svg = generateSpider('deadwood', 'nonexistent-agent');
+        assert.ok(svg.includes('<svg'), 'Should generate SVG with default scores');
+    });
+    it('should accept OCEAN scores directly via generateSpiderFromOcean', async () => {
+        const { generateSpiderFromOcean } = await import('./generate-spider.js');
+        const svg = generateSpiderFromOcean({ O: 3, C: 4, E: 2, A: 5, N: 1 });
+        assert.ok(typeof svg === 'string', 'Should return string');
+        assert.ok(svg.includes('<svg'), 'Should contain SVG opening tag');
+    });
+});
+// ============================================================================
+// AC3: Spider charts clearly show all 5 OCEAN dimensions
+// ============================================================================
+describe('AC3: Pentagon Structure with 5 OCEAN Dimensions', () => {
+    it('should generate a polygon element for the data', async () => {
+        const { generateSpider } = await import('./generate-spider.js');
+        const svg = generateSpider('deadwood', 'sm');
+        assert.ok(svg.includes('<polygon') || svg.includes('<path'), 'Should contain polygon or path element for data shape');
+    });
+    it('should label all 5 OCEAN dimensions', async () => {
+        const { generateSpider } = await import('./generate-spider.js');
+        const svg = generateSpider('deadwood', 'sm');
+        // Check for dimension labels (as text elements or in comments)
+        const hasO = svg.includes('>O<') || svg.includes('"O"') || svg.includes('Openness');
+        const hasC = svg.includes('>C<') || svg.includes('"C"') || svg.includes('Conscientiousness');
+        const hasE = svg.includes('>E<') || svg.includes('"E"') || svg.includes('Extraversion');
+        const hasA = svg.includes('>A<') || svg.includes('"A"') || svg.includes('Agreeableness');
+        const hasN = svg.includes('>N<') || svg.includes('"N"') || svg.includes('Neuroticism');
+        assert.ok(hasO, 'Should label Openness dimension');
+        assert.ok(hasC, 'Should label Conscientiousness dimension');
+        assert.ok(hasE, 'Should label Extraversion dimension');
+        assert.ok(hasA, 'Should label Agreeableness dimension');
+        assert.ok(hasN, 'Should label Neuroticism dimension');
+    });
+    it('should include grid lines for reference (5 levels)', async () => {
+        const { generateSpider } = await import('./generate-spider.js');
+        const svg = generateSpider('deadwood', 'sm');
+        // Grid lines create concentric pentagons
+        // Count polygon/path elements - should have at least 5 for grid + 1 for data
+        const polygonCount = (svg.match(/<polygon/g) || []).length;
+        const pathCount = (svg.match(/<path/g) || []).length;
+        // Grid could be polygons or paths - at minimum should have grid structure
+        assert.ok(polygonCount >= 1 || pathCount >= 5, 'Should have grid lines (pentagons or paths for 5 levels)');
+    });
+    it('should have 5 axis lines from center to vertices', async () => {
+        const { generateSpider } = await import('./generate-spider.js');
+        const svg = generateSpider('deadwood', 'sm');
+        // Axis lines are typically <line> elements
+        const lineCount = (svg.match(/<line/g) || []).length;
+        assert.ok(lineCount >= 5, `Should have at least 5 axis lines, found ${lineCount}`);
+    });
+    it('should use unfilled polygon (stroke only, no fill)', async () => {
+        const { generateSpider } = await import('./generate-spider.js');
+        const svg = generateSpider('deadwood', 'sm');
+        // The data polygon should have fill="none" or no fill
+        // Looking for the data polygon specifically (not grid lines)
+        assert.ok(svg.includes('fill="none"') || !svg.includes('fill="'), 'Data polygon should be unfilled (stroke only)');
+    });
+    it('should map score 1 to 20% radius and score 5 to 100% radius', async () => {
+        const { generateSpiderFromOcean } = await import('./generate-spider.js');
+        // Generate with all 1s - polygon should be small (inner)
+        const small = generateSpiderFromOcean({ O: 1, C: 1, E: 1, A: 1, N: 1 });
+        // Generate with all 5s - polygon should be large (outer)
+        const large = generateSpiderFromOcean({ O: 5, C: 5, E: 5, A: 5, N: 5 });
+        // SVGs should be different (different polygon sizes)
+        assert.notStrictEqual(small, large, 'Score 1-1-1-1-1 and 5-5-5-5-5 should produce different polygons');
+    });
+});
+// ============================================================================
+// AC4: Overlay mode compares 2-3 characters on same chart
+// ============================================================================
+describe('AC4: Overlay Mode for Character Comparison', () => {
+    it('should accept array of theme+agent pairs for overlay', async () => {
+        const { generateOverlaySpider } = await import('./generate-spider.js');
+        const svg = generateOverlaySpider([
+            { theme: 'deadwood', agent: 'sm' },
+            { theme: 'firefly', agent: 'sm' },
+        ]);
+        assert.ok(typeof svg === 'string', 'Should return string');
+        assert.ok(svg.includes('<svg'), 'Should contain SVG');
+    });
+    it('should render 2 distinct polygons for 2 characters', async () => {
+        const { generateOverlaySpider } = await import('./generate-spider.js');
+        const svg = generateOverlaySpider([
+            { theme: 'deadwood', agent: 'sm' },
+            { theme: 'firefly', agent: 'sm' },
+        ]);
+        // Count data polygons (excluding grid)
+        // Grid lines typically have a specific class or lighter stroke
+        const polygonMatches = svg.match(/<polygon[^>]*>/g) || [];
+        const pathMatches = svg.match(/<path[^>]*d="M[^"]*"[^>]*>/g) || [];
+        // Should have at least 2 data shapes
+        assert.ok(polygonMatches.length >= 2 || pathMatches.length >= 2, 'Should have at least 2 data polygons for comparison');
+    });
+    it('should render 3 distinct polygons for 3 characters', async () => {
+        const { generateOverlaySpider } = await import('./generate-spider.js');
+        const svg = generateOverlaySpider([
+            { theme: 'deadwood', agent: 'sm' },
+            { theme: 'firefly', agent: 'sm' },
+            { theme: 'star-trek-tng', agent: 'sm' },
+        ]);
+        // Should have at least 3 data shapes
+        const polygonMatches = svg.match(/<polygon[^>]*>/g) || [];
+        const pathMatches = svg.match(/<path[^>]*d="M[^"]*"[^>]*>/g) || [];
+        assert.ok(polygonMatches.length >= 3 || pathMatches.length >= 3, 'Should have at least 3 data polygons for comparison');
+    });
+    it('should use different stroke colors for each character', async () => {
+        const { generateOverlaySpider } = await import('./generate-spider.js');
+        const svg = generateOverlaySpider([
+            { theme: 'deadwood', agent: 'sm' },
+            { theme: 'firefly', agent: 'sm' },
+        ]);
+        // Extract stroke colors - should find at least 2 different colors
+        const strokeColors = svg.match(/stroke="([^"]+)"/g) || [];
+        const uniqueColors = new Set(strokeColors);
+        assert.ok(uniqueColors.size >= 2, 'Should use different stroke colors for different characters');
+    });
+    it('should include legend identifying each character', async () => {
+        const { generateOverlaySpider } = await import('./generate-spider.js');
+        const svg = generateOverlaySpider([
+            { theme: 'deadwood', agent: 'sm' },
+            { theme: 'firefly', agent: 'sm' },
+        ]);
+        // Legend should include theme or character names
+        assert.ok(svg.includes('deadwood') || svg.includes('Deadwood') ||
+            svg.includes('firefly') || svg.includes('Firefly'), 'Should include legend with theme/character names');
+    });
+    it('should accept optional labels for overlay characters', async () => {
+        const { generateOverlaySpider } = await import('./generate-spider.js');
+        const svg = generateOverlaySpider([
+            { theme: 'deadwood', agent: 'sm', label: 'Al Swearengen' },
+            { theme: 'firefly', agent: 'sm', label: 'Mal Reynolds' },
+        ]);
+        assert.ok(svg.includes('Al Swearengen') || svg.includes('Mal Reynolds'), 'Should display custom labels when provided');
+    });
+});
+// ============================================================================
+// AC5: SVGs render correctly in browsers and markdown
+// ============================================================================
+describe('AC5: Valid SVG Structure', () => {
+    it('should include viewBox attribute for scaling', async () => {
+        const { generateSpider } = await import('./generate-spider.js');
+        const svg = generateSpider('deadwood', 'sm');
+        assert.ok(svg.includes('viewBox='), 'Should have viewBox attribute for proper scaling');
+    });
+    it('should include xmlns attribute for browser compatibility', async () => {
+        const { generateSpider } = await import('./generate-spider.js');
+        const svg = generateSpider('deadwood', 'sm');
+        assert.ok(svg.includes('xmlns="http://www.w3.org/2000/svg"'), 'Should have SVG xmlns for browser rendering');
+    });
+    it('should be well-formed XML', async () => {
+        const { generateSpider } = await import('./generate-spider.js');
+        const svg = generateSpider('deadwood', 'sm');
+        assert.ok(svg.startsWith('<svg'), 'Should start with <svg');
+        assert.ok(svg.endsWith('</svg>'), 'Should end with </svg>');
+    });
+    it('should use text elements for dimension labels', async () => {
+        const { generateSpider } = await import('./generate-spider.js');
+        const svg = generateSpider('deadwood', 'sm');
+        const textCount = (svg.match(/<text/g) || []).length;
+        assert.ok(textCount >= 5, `Should have at least 5 text elements for labels, found ${textCount}`);
+    });
+    it('should have consistent stroke styling', async () => {
+        const { generateSpider } = await import('./generate-spider.js');
+        const svg = generateSpider('deadwood', 'sm');
+        assert.ok(svg.includes('stroke='), 'Should use stroke for lines');
+        assert.ok(svg.includes('stroke-width'), 'Should specify stroke-width');
+    });
+    it('should use 200x200 viewBox like face generator', async () => {
+        const { generateSpider } = await import('./generate-spider.js');
+        const svg = generateSpider('deadwood', 'sm');
+        assert.ok(svg.includes('viewBox="0 0 200 200"'), 'Should use 200x200 viewBox for consistency with face generator');
+    });
+});
+// ============================================================================
+// Integration: Full Pipeline Test
+// ============================================================================
+describe('Integration: Spider Chart Generation Pipeline', () => {
+    it('should generate valid SVG for multiple themes', async () => {
+        const { generateSpider } = await import('./generate-spider.js');
+        const themes = ['deadwood', 'firefly', 'star-trek-tng', 'discworld'];
+        for (const theme of themes) {
+            const svg = generateSpider(theme, 'sm');
+            assert.ok(svg.includes('<svg') && svg.includes('</svg>'), `Should generate valid SVG for ${theme}`);
+        }
+    });
+    it('should produce visually different charts for different OCEAN profiles', async () => {
+        const { generateSpiderFromOcean } = await import('./generate-spider.js');
+        const introvert = generateSpiderFromOcean({ O: 4, C: 3, E: 1, A: 3, N: 2 });
+        const extravert = generateSpiderFromOcean({ O: 4, C: 3, E: 5, A: 3, N: 2 });
+        assert.notStrictEqual(introvert, extravert, 'Different E scores should produce different charts');
+    });
+    it('should work with overlay of same agent across themes', async () => {
+        const { generateOverlaySpider } = await import('./generate-spider.js');
+        const svg = generateOverlaySpider([
+            { theme: 'deadwood', agent: 'reviewer' },
+            { theme: 'firefly', agent: 'reviewer' },
+            { theme: 'star-trek-tng', agent: 'reviewer' },
+        ]);
+        assert.ok(svg.includes('<svg') && svg.includes('</svg>'), 'Should generate valid overlay SVG');
+    });
+});
+//# sourceMappingURL=generate-spider.test.js.map