npm - aios-core - Versions diffs - 4.2.13 → 4.2.15 - Mend

aios-core 4.2.13 → 4.2.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (95) hide show

package/.aios-core/core/code-intel/helpers/dev-helper.js +206 -0
package/.aios-core/core/registry/registry-schema.json +166 -166
package/.aios-core/core/synapse/diagnostics/collectors/hook-collector.js +3 -3
package/.aios-core/data/entity-registry.yaml +27 -0
package/.aios-core/development/scripts/approval-workflow.js +642 -642
package/.aios-core/development/scripts/backup-manager.js +606 -606
package/.aios-core/development/scripts/branch-manager.js +389 -389
package/.aios-core/development/scripts/code-quality-improver.js +1311 -1311
package/.aios-core/development/scripts/commit-message-generator.js +849 -849
package/.aios-core/development/scripts/conflict-resolver.js +674 -674
package/.aios-core/development/scripts/dependency-analyzer.js +637 -637
package/.aios-core/development/scripts/diff-generator.js +351 -351
package/.aios-core/development/scripts/elicitation-engine.js +384 -384
package/.aios-core/development/scripts/elicitation-session-manager.js +299 -299
package/.aios-core/development/scripts/git-wrapper.js +461 -461
package/.aios-core/development/scripts/manifest-preview.js +244 -244
package/.aios-core/development/scripts/metrics-tracker.js +775 -775
package/.aios-core/development/scripts/modification-validator.js +554 -554
package/.aios-core/development/scripts/pattern-learner.js +1224 -1224
package/.aios-core/development/scripts/performance-analyzer.js +757 -757
package/.aios-core/development/scripts/refactoring-suggester.js +1138 -1138
package/.aios-core/development/scripts/rollback-handler.js +530 -530
package/.aios-core/development/scripts/security-checker.js +358 -358
package/.aios-core/development/scripts/template-engine.js +239 -239
package/.aios-core/development/scripts/template-validator.js +278 -278
package/.aios-core/development/scripts/test-generator.js +843 -843
package/.aios-core/development/scripts/transaction-manager.js +589 -589
package/.aios-core/development/scripts/usage-tracker.js +673 -673
package/.aios-core/development/scripts/validate-filenames.js +226 -226
package/.aios-core/development/scripts/version-tracker.js +526 -526
package/.aios-core/development/scripts/yaml-validator.js +396 -396
package/.aios-core/development/tasks/build-autonomous.md +10 -4
package/.aios-core/development/tasks/create-service.md +23 -0
package/.aios-core/development/tasks/dev-develop-story.md +12 -6
package/.aios-core/development/tasks/dev-suggest-refactoring.md +7 -1
package/.aios-core/development/tasks/publish-npm.md +3 -3
package/.aios-core/hooks/unified/README.md +1 -1
package/.aios-core/install-manifest.yaml +65 -61
package/.aios-core/manifests/schema/manifest-schema.json +190 -190
package/.aios-core/product/templates/component-react-tmpl.tsx +98 -98
package/.aios-core/product/templates/engine/schemas/adr.schema.json +102 -102
package/.aios-core/product/templates/engine/schemas/dbdr.schema.json +205 -205
package/.aios-core/product/templates/engine/schemas/epic.schema.json +175 -175
package/.aios-core/product/templates/engine/schemas/pmdr.schema.json +175 -175
package/.aios-core/product/templates/engine/schemas/prd-v2.schema.json +300 -300
package/.aios-core/product/templates/engine/schemas/prd.schema.json +152 -152
package/.aios-core/product/templates/engine/schemas/story.schema.json +222 -222
package/.aios-core/product/templates/engine/schemas/task.schema.json +154 -154
package/.aios-core/product/templates/eslintrc-security.json +32 -32
package/.aios-core/product/templates/github-actions-cd.yml +212 -212
package/.aios-core/product/templates/github-actions-ci.yml +172 -172
package/.aios-core/product/templates/shock-report-tmpl.html +502 -502
package/.aios-core/product/templates/token-exports-css-tmpl.css +240 -240
package/.aios-core/quality/schemas/quality-metrics.schema.json +233 -233
package/.aios-core/scripts/migrate-framework-docs.sh +300 -300
package/README.en.md +747 -0
package/README.md +4 -2
package/bin/aios.js +7 -4
package/package.json +1 -1
package/packages/aios-pro-cli/src/recover.js +1 -1
package/packages/installer/src/wizard/ide-config-generator.js +6 -6
package/packages/installer/src/wizard/pro-setup.js +3 -3
package/pro/license/degradation.js +220 -220
package/pro/license/errors.js +450 -450
package/pro/license/feature-gate.js +354 -354
package/pro/license/index.js +181 -181
package/pro/license/license-cache.js +523 -523
package/pro/license/license-crypto.js +303 -303
package/scripts/package-synapse.js +5 -5
package/scripts/validate-package-completeness.js +3 -3
package/.aios-core/.session/current-session.json +0 -14
package/.aios-core/data/registry-update-log.jsonl +0 -191
package/.aios-core/docs/SHARD-TRANSLATION-GUIDE.md +0 -335
package/.aios-core/docs/component-creation-guide.md +0 -458
package/.aios-core/docs/session-update-pattern.md +0 -307
package/.aios-core/docs/standards/AIOS-FRAMEWORK-MASTER.md +0 -1963
package/.aios-core/docs/standards/AIOS-LIVRO-DE-OURO-V2.1-SUMMARY.md +0 -1190
package/.aios-core/docs/standards/AIOS-LIVRO-DE-OURO-V2.1.md +0 -439
package/.aios-core/docs/standards/AIOS-LIVRO-DE-OURO.md +0 -5398
package/.aios-core/docs/standards/V3-ARCHITECTURAL-DECISIONS.md +0 -523
package/.aios-core/docs/template-syntax.md +0 -267
package/.aios-core/docs/troubleshooting-guide.md +0 -625
package/.aios-core/infrastructure/tests/utilities-audit-results.json +0 -501
package/.aios-core/manifests/agents.csv +0 -29
package/.aios-core/manifests/tasks.csv +0 -198
package/.aios-core/manifests/workers.csv +0 -204
package/.claude/rules/agent-authority.md +0 -105
package/.claude/rules/coderabbit-integration.md +0 -93
package/.claude/rules/ids-principles.md +0 -112
package/.claude/rules/story-lifecycle.md +0 -139
package/.claude/rules/workflow-execution.md +0 -150
package/scripts/glue/README.md +0 -355
package/scripts/glue/compose-agent-prompt.cjs +0 -362
/package/.claude/hooks/{precompact-session-digest.js → precompact-session-digest.cjs} +0 -0
/package/.claude/hooks/{synapse-engine.js → synapse-engine.cjs} +0 -0

package/.aios-core/product/templates/shock-report-tmpl.html CHANGED Viewed

@@ -1,502 +1,502 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Design System Shock Report - {{PROJECT_NAME}}</title>
-    <style>
-        /* Self-contained CSS - zero external dependencies */
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            line-height: 1.6;
-            color: #1a1a1a;
-            background: #f5f5f5;
-            padding: 20px;
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            background: white;
-            padding: 40px;
-            border-radius: 8px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-        }
-        h1 {
-            font-size: 2.5rem;
-            margin-bottom: 10px;
-            color: #dc2626;
-        }
-        h2 {
-            font-size: 1.8rem;
-            margin: 40px 0 20px;
-            padding-bottom: 10px;
-            border-bottom: 3px solid #dc2626;
-        }
-        h3 {
-            font-size: 1.3rem;
-            margin: 30px 0 15px;
-            color: #374151;
-        }
-        .subtitle {
-            font-size: 1.2rem;
-            color: #6b7280;
-            margin-bottom: 30px;
-        }
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 20px;
-            margin: 30px 0;
-        }
-        .stat-card {
-            padding: 20px;
-            background: #fef2f2;
-            border-left: 4px solid #dc2626;
-            border-radius: 4px;
-        }
-        .stat-card.good {
-            background: #f0fdf4;
-            border-left-color: #16a34a;
-        }
-        .stat-label {
-            font-size: 0.9rem;
-            color: #6b7280;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-        }
-        .stat-value {
-            font-size: 2.5rem;
-            font-weight: bold;
-            color: #dc2626;
-            margin: 10px 0;
-        }
-        .stat-card.good .stat-value {
-            color: #16a34a;
-        }
-        .stat-detail {
-            font-size: 0.95rem;
-            color: #4b5563;
-        }
-        .horror-show {
-            background: #fef2f2;
-            padding: 30px;
-            border-radius: 8px;
-            margin: 30px 0;
-        }
-        .pattern-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-            gap: 15px;
-            margin: 20px 0;
-        }
-        .pattern-item {
-            padding: 15px;
-            background: white;
-            border: 2px solid #e5e7eb;
-            border-radius: 4px;
-            text-align: center;
-            font-size: 0.85rem;
-        }
-        .pattern-preview {
-            width: 100%;
-            height: 40px;
-            margin-bottom: 10px;
-            border-radius: 4px;
-        }
-        .consolidation-preview {
-            background: #f0fdf4;
-            padding: 30px;
-            border-radius: 8px;
-            margin: 30px 0;
-        }
-        .comparison {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 30px;
-            margin: 20px 0;
-            font-size: 1.5rem;
-        }
-        .comparison .before {
-            color: #dc2626;
-            font-weight: bold;
-        }
-        .comparison .after {
-            color: #16a34a;
-            font-weight: bold;
-        }
-        .comparison .arrow {
-            font-size: 2rem;
-            color: #6b7280;
-        }
-        .roi-calculator {
-            background: #eff6ff;
-            padding: 30px;
-            border-radius: 8px;
-            margin: 30px 0;
-        }
-        .cost-row {
-            display: flex;
-            justify-content: space-between;
-            padding: 15px;
-            border-bottom: 1px solid #e5e7eb;
-        }
-        .cost-row:last-child {
-            border-bottom: none;
-            font-weight: bold;
-            font-size: 1.2rem;
-        }
-        .cost-label {
-            color: #4b5563;
-        }
-        .cost-value {
-            color: #1e40af;
-            font-weight: 600;
-        }
-        .cost-row:last-child .cost-value {
-            color: #16a34a;
-            font-size: 1.5rem;
-        }
-        .timeline {
-            margin: 30px 0;
-        }
-        .timeline-item {
-            display: flex;
-            gap: 20px;
-            margin-bottom: 20px;
-        }
-        .timeline-marker {
-            flex-shrink: 0;
-            width: 40px;
-            height: 40px;
-            background: #dc2626;
-            color: white;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: bold;
-        }
-        .timeline-marker.complete {
-            background: #16a34a;
-        }
-        .timeline-content {
-            flex: 1;
-            padding: 10px 0;
-        }
-        .timeline-title {
-            font-weight: 600;
-            margin-bottom: 5px;
-        }
-        .timeline-desc {
-            color: #6b7280;
-            font-size: 0.9rem;
-        }
-        .chart {
-            width: 100%;
-            height: 300px;
-            margin: 30px 0;
-            position: relative;
-        }
-        .chart-bar {
-            position: absolute;
-            bottom: 0;
-            width: 45%;
-            background: linear-gradient(to top, #dc2626, #f87171);
-            border-radius: 4px 4px 0 0;
-            transition: height 0.3s;
-        }
-        .chart-bar.before {
-            left: 5%;
-        }
-        .chart-bar.after {
-            right: 5%;
-            background: linear-gradient(to top, #16a34a, #4ade80);
-        }
-        .chart-label {
-            position: absolute;
-            bottom: -30px;
-            width: 100%;
-            text-align: center;
-            font-weight: 600;
-        }
-        .chart-value {
-            position: absolute;
-            top: -30px;
-            width: 100%;
-            text-align: center;
-            font-weight: bold;
-            font-size: 1.2rem;
-        }
-        @media print {
-            body {
-                background: white;
-                padding: 0;
-            }
-            .container {
-                box-shadow: none;
-            }
-        }
-        @media (max-width: 768px) {
-            .container {
-                padding: 20px;
-            }
-            h1 {
-                font-size: 1.8rem;
-            }
-            .stats-grid {
-                grid-template-columns: 1fr;
-            }
-            .comparison {
-                flex-direction: column;
-                gap: 10px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <!-- Header -->
-        <h1>🔍 Design System Shock Report</h1>
-        <p class="subtitle">Let me show you the horror show you've created</p>
-        <p><strong>Project:</strong> {{PROJECT_NAME}}<br>
-        <strong>Scanned:</strong> {{SCAN_DATE}}<br>
-        <strong>Path:</strong> {{SCAN_PATH}}<br>
-        <strong>Files Analyzed:</strong> {{TOTAL_FILES}}</p>
-        <!-- Executive Summary Stats -->
-        <h2>📊 Executive Summary</h2>
-        <div class="stats-grid">
-            <div class="stat-card">
-                <div class="stat-label">Unique Patterns Found</div>
-                <div class="stat-value">{{TOTAL_PATTERNS}}</div>
-                <div class="stat-detail">Across {{PATTERN_CATEGORIES}} categories</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-label">Total Usage Instances</div>
-                <div class="stat-value">{{TOTAL_INSTANCES}}</div>
-                <div class="stat-detail">{{REDUNDANCY_FACTOR}}x redundancy factor</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-label">Monthly Waste</div>
-                <div class="stat-value">${{MONTHLY_WASTE}}</div>
-                <div class="stat-detail">${{ANNUAL_WASTE}}/year in maintenance</div>
-            </div>
-            <div class="stat-card good">
-                <div class="stat-label">Potential Savings</div>
-                <div class="stat-value">${{ANNUAL_SAVINGS}}</div>
-                <div class="stat-detail">After consolidation</div>
-            </div>
-        </div>
-        <!-- Horror Show Section -->
-        <h2>😱 The Horror Show</h2>
-        <div class="horror-show">
-            <h3>{{PATTERN_TYPE_1}} Variations ({{PATTERN_COUNT_1}} unique)</h3>
-            <p>You have {{PATTERN_COUNT_1}} different {{PATTERN_TYPE_1}} implementations when you should have {{CONSOLIDATED_COUNT_1}}.</p>
-            <div class="pattern-grid">
-                {{#EACH_PATTERN_1}}
-                <div class="pattern-item">
-                    <div class="pattern-preview" style="background: {{PATTERN_COLOR}}; {{PATTERN_STYLE}}"></div>
-                    <div>{{PATTERN_NAME}}</div>
-                    <div style="color: #6b7280; font-size: 0.75rem;">Used {{USAGE_COUNT}} times</div>
-                </div>
-                {{/EACH_PATTERN_1}}
-            </div>
-            <h3 style="margin-top: 40px;">{{PATTERN_TYPE_2}} Variations ({{PATTERN_COUNT_2}} unique)</h3>
-            <p>{{PATTERN_COUNT_2}} different colors detected. Industry standard: 10-15 tokens.</p>
-            <div class="pattern-grid">
-                {{#EACH_PATTERN_2}}
-                <div class="pattern-item">
-                    <div class="pattern-preview" style="background: {{COLOR_VALUE}};"></div>
-                    <div>{{COLOR_HEX}}</div>
-                    <div style="color: #6b7280; font-size: 0.75rem;">{{USAGE_PERCENTAGE}}% usage</div>
-                </div>
-                {{/EACH_PATTERN_2}}
-            </div>
-        </div>
-        <!-- Consolidation Preview -->
-        <h2>✨ Consolidated Future State</h2>
-        <div class="consolidation-preview">
-            <h3>What Your System Should Look Like</h3>
-            <div class="comparison">
-                <span class="before">{{TOTAL_PATTERNS}} patterns</span>
-                <span class="arrow">→</span>
-                <span class="after">{{CONSOLIDATED_PATTERNS}} patterns</span>
-            </div>
-            <div class="comparison">
-                <span style="font-size: 1.2rem;">Reduction: <strong style="color: #16a34a;">{{REDUCTION_PERCENTAGE}}%</strong></span>
-            </div>
-            <div class="chart">
-                <div class="chart-bar before" style="height: {{BEFORE_HEIGHT}}%;">
-                    <div class="chart-value">{{TOTAL_PATTERNS}}</div>
-                    <div class="chart-label">Before</div>
-                </div>
-                <div class="chart-bar after" style="height: {{AFTER_HEIGHT}}%;">
-                    <div class="chart-value">{{CONSOLIDATED_PATTERNS}}</div>
-                    <div class="chart-label">After</div>
-                </div>
-            </div>
-            <h3 style="margin-top: 40px;">Recommended Minimal Set</h3>
-            <div class="pattern-grid">
-                {{#EACH_CONSOLIDATED_PATTERN}}
-                <div class="pattern-item" style="border-color: #16a34a;">
-                    <div class="pattern-preview" style="{{CONSOLIDATED_STYLE}}"></div>
-                    <div><strong>{{CONSOLIDATED_NAME}}</strong></div>
-                    <div style="color: #16a34a; font-size: 0.75rem;">Replaces {{REPLACES_COUNT}} variations</div>
-                </div>
-                {{/EACH_CONSOLIDATED_PATTERN}}
-            </div>
-        </div>
-        <!-- ROI Calculator -->
-        <h2>💰 Cost Analysis & ROI</h2>
-        <div class="roi-calculator">
-            <h3>Monthly Maintenance Costs</h3>
-            <div class="cost-row">
-                <span class="cost-label">Current: {{TOTAL_PATTERNS}} patterns × {{HOURS_PER_PATTERN}}h/month × ${{HOURLY_RATE}}/hour</span>
-                <span class="cost-value">${{MONTHLY_COST_BEFORE}}</span>
-            </div>
-            <div class="cost-row">
-                <span class="cost-label">After: {{CONSOLIDATED_PATTERNS}} patterns × {{HOURS_PER_PATTERN}}h/month × ${{HOURLY_RATE}}/hour</span>
-                <span class="cost-value">${{MONTHLY_COST_AFTER}}</span>
-            </div>
-            <div class="cost-row">
-                <span class="cost-label">Monthly Savings</span>
-                <span class="cost-value">${{MONTHLY_SAVINGS}}</span>
-            </div>
-            <h3 style="margin-top: 30px;">Annual Projection</h3>
-            <div class="cost-row">
-                <span class="cost-label">Annual Maintenance Waste (Current)</span>
-                <span class="cost-value">${{ANNUAL_WASTE}}</span>
-            </div>
-            <div class="cost-row">
-                <span class="cost-label">Annual Maintenance Cost (After)</span>
-                <span class="cost-value">${{ANNUAL_COST_AFTER}}</span>
-            </div>
-            <div class="cost-row">
-                <span class="cost-label">Implementation Investment</span>
-                <span class="cost-value">${{IMPLEMENTATION_COST}}</span>
-            </div>
-            <div class="cost-row">
-                <span class="cost-label">Annual Savings</span>
-                <span class="cost-value">${{ANNUAL_SAVINGS}}</span>
-            </div>
-            <h3 style="margin-top: 30px;">ROI Metrics</h3>
-            <div class="cost-row">
-                <span class="cost-label">ROI Ratio</span>
-                <span class="cost-value">{{ROI_RATIO}}x</span>
-            </div>
-            <div class="cost-row">
-                <span class="cost-label">Breakeven Timeline</span>
-                <span class="cost-value">{{BREAKEVEN_DAYS}} days</span>
-            </div>
-            <div class="cost-row">
-                <span class="cost-label">3-Year Total Savings</span>
-                <span class="cost-value">${{THREE_YEAR_SAVINGS}}</span>
-            </div>
-        </div>
-        <!-- Migration Timeline -->
-        <h2>🗓️ Estimated Migration Timeline</h2>
-        <div class="timeline">
-            <div class="timeline-item">
-                <div class="timeline-marker">1</div>
-                <div class="timeline-content">
-                    <div class="timeline-title">Phase 1: Foundation ({{PHASE_1_DURATION}})</div>
-                    <div class="timeline-desc">Deploy token system, no visual changes. Zero risk.</div>
-                </div>
-            </div>
-            <div class="timeline-item">
-                <div class="timeline-marker">2</div>
-                <div class="timeline-content">
-                    <div class="timeline-title">Phase 2: High-Impact Patterns ({{PHASE_2_DURATION}})</div>
-                    <div class="timeline-desc">Replace top 3 most-used components. Immediate ROI.</div>
-                </div>
-            </div>
-            <div class="timeline-item">
-                <div class="timeline-marker">3</div>
-                <div class="timeline-content">
-                    <div class="timeline-title">Phase 3: Long-Tail Cleanup ({{PHASE_3_DURATION}})</div>
-                    <div class="timeline-desc">Consolidate remaining patterns. Medium risk.</div>
-                </div>
-            </div>
-            <div class="timeline-item">
-                <div class="timeline-marker">4</div>
-                <div class="timeline-content">
-                    <div class="timeline-title">Phase 4: Enforcement ({{PHASE_4_DURATION}})</div>
-                    <div class="timeline-desc">CI/CD validation prevents regression. Low risk.</div>
-                </div>
-            </div>
-        </div>
-        <div style="background: #eff6ff; padding: 20px; border-radius: 8px; margin-top: 30px;">
-            <p style="font-size: 1.1rem;"><strong>Total Estimated Timeline:</strong> {{TOTAL_DURATION}}</p>
-            <p style="color: #6b7280; margin-top: 10px;">Phased approach minimizes disruption. Each phase completes independently.</p>
-        </div>
-        <!-- Footer -->
-        <div style="margin-top: 60px; padding-top: 30px; border-top: 2px solid #e5e7eb; color: #6b7280; font-size: 0.9rem;">
-            <p><strong>Generated by Brad (Design System Architect)</strong></p>
-            <p>🤖 Generated with <a href="https://claude.com/claude-code" style="color: #2563eb;">Claude Code</a></p>
-            <p>For questions about this report, activate Brad: <code>*agent design-system</code></p>
-        </div>
-    </div>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Design System Shock Report - {{PROJECT_NAME}}</title>
+    <style>
+        /* Self-contained CSS - zero external dependencies */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            line-height: 1.6;
+            color: #1a1a1a;
+            background: #f5f5f5;
+            padding: 20px;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: white;
+            padding: 40px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+        h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            color: #dc2626;
+        }
+        h2 {
+            font-size: 1.8rem;
+            margin: 40px 0 20px;
+            padding-bottom: 10px;
+            border-bottom: 3px solid #dc2626;
+        }
+        h3 {
+            font-size: 1.3rem;
+            margin: 30px 0 15px;
+            color: #374151;
+        }
+        .subtitle {
+            font-size: 1.2rem;
+            color: #6b7280;
+            margin-bottom: 30px;
+        }
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+            margin: 30px 0;
+        }
+        .stat-card {
+            padding: 20px;
+            background: #fef2f2;
+            border-left: 4px solid #dc2626;
+            border-radius: 4px;
+        }
+        .stat-card.good {
+            background: #f0fdf4;
+            border-left-color: #16a34a;
+        }
+        .stat-label {
+            font-size: 0.9rem;
+            color: #6b7280;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+        .stat-value {
+            font-size: 2.5rem;
+            font-weight: bold;
+            color: #dc2626;
+            margin: 10px 0;
+        }
+        .stat-card.good .stat-value {
+            color: #16a34a;
+        }
+        .stat-detail {
+            font-size: 0.95rem;
+            color: #4b5563;
+        }
+        .horror-show {
+            background: #fef2f2;
+            padding: 30px;
+            border-radius: 8px;
+            margin: 30px 0;
+        }
+        .pattern-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            gap: 15px;
+            margin: 20px 0;
+        }
+        .pattern-item {
+            padding: 15px;
+            background: white;
+            border: 2px solid #e5e7eb;
+            border-radius: 4px;
+            text-align: center;
+            font-size: 0.85rem;
+        }
+        .pattern-preview {
+            width: 100%;
+            height: 40px;
+            margin-bottom: 10px;
+            border-radius: 4px;
+        }
+        .consolidation-preview {
+            background: #f0fdf4;
+            padding: 30px;
+            border-radius: 8px;
+            margin: 30px 0;
+        }
+        .comparison {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 30px;
+            margin: 20px 0;
+            font-size: 1.5rem;
+        }
+        .comparison .before {
+            color: #dc2626;
+            font-weight: bold;
+        }
+        .comparison .after {
+            color: #16a34a;
+            font-weight: bold;
+        }
+        .comparison .arrow {
+            font-size: 2rem;
+            color: #6b7280;
+        }
+        .roi-calculator {
+            background: #eff6ff;
+            padding: 30px;
+            border-radius: 8px;
+            margin: 30px 0;
+        }
+        .cost-row {
+            display: flex;
+            justify-content: space-between;
+            padding: 15px;
+            border-bottom: 1px solid #e5e7eb;
+        }
+        .cost-row:last-child {
+            border-bottom: none;
+            font-weight: bold;
+            font-size: 1.2rem;
+        }
+        .cost-label {
+            color: #4b5563;
+        }
+        .cost-value {
+            color: #1e40af;
+            font-weight: 600;
+        }
+        .cost-row:last-child .cost-value {
+            color: #16a34a;
+            font-size: 1.5rem;
+        }
+        .timeline {
+            margin: 30px 0;
+        }
+        .timeline-item {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+        .timeline-marker {
+            flex-shrink: 0;
+            width: 40px;
+            height: 40px;
+            background: #dc2626;
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+        }
+        .timeline-marker.complete {
+            background: #16a34a;
+        }
+        .timeline-content {
+            flex: 1;
+            padding: 10px 0;
+        }
+        .timeline-title {
+            font-weight: 600;
+            margin-bottom: 5px;
+        }
+        .timeline-desc {
+            color: #6b7280;
+            font-size: 0.9rem;
+        }
+        .chart {
+            width: 100%;
+            height: 300px;
+            margin: 30px 0;
+            position: relative;
+        }
+        .chart-bar {
+            position: absolute;
+            bottom: 0;
+            width: 45%;
+            background: linear-gradient(to top, #dc2626, #f87171);
+            border-radius: 4px 4px 0 0;
+            transition: height 0.3s;
+        }
+        .chart-bar.before {
+            left: 5%;
+        }
+        .chart-bar.after {
+            right: 5%;
+            background: linear-gradient(to top, #16a34a, #4ade80);
+        }
+        .chart-label {
+            position: absolute;
+            bottom: -30px;
+            width: 100%;
+            text-align: center;
+            font-weight: 600;
+        }
+        .chart-value {
+            position: absolute;
+            top: -30px;
+            width: 100%;
+            text-align: center;
+            font-weight: bold;
+            font-size: 1.2rem;
+        }
+        @media print {
+            body {
+                background: white;
+                padding: 0;
+            }
+            .container {
+                box-shadow: none;
+            }
+        }
+        @media (max-width: 768px) {
+            .container {
+                padding: 20px;
+            }
+            h1 {
+                font-size: 1.8rem;
+            }
+            .stats-grid {
+                grid-template-columns: 1fr;
+            }
+            .comparison {
+                flex-direction: column;
+                gap: 10px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- Header -->
+        <h1>🔍 Design System Shock Report</h1>
+        <p class="subtitle">Let me show you the horror show you've created</p>
+        <p><strong>Project:</strong> {{PROJECT_NAME}}<br>
+        <strong>Scanned:</strong> {{SCAN_DATE}}<br>
+        <strong>Path:</strong> {{SCAN_PATH}}<br>
+        <strong>Files Analyzed:</strong> {{TOTAL_FILES}}</p>
+        <!-- Executive Summary Stats -->
+        <h2>📊 Executive Summary</h2>
+        <div class="stats-grid">
+            <div class="stat-card">
+                <div class="stat-label">Unique Patterns Found</div>
+                <div class="stat-value">{{TOTAL_PATTERNS}}</div>
+                <div class="stat-detail">Across {{PATTERN_CATEGORIES}} categories</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-label">Total Usage Instances</div>
+                <div class="stat-value">{{TOTAL_INSTANCES}}</div>
+                <div class="stat-detail">{{REDUNDANCY_FACTOR}}x redundancy factor</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-label">Monthly Waste</div>
+                <div class="stat-value">${{MONTHLY_WASTE}}</div>
+                <div class="stat-detail">${{ANNUAL_WASTE}}/year in maintenance</div>
+            </div>
+            <div class="stat-card good">
+                <div class="stat-label">Potential Savings</div>
+                <div class="stat-value">${{ANNUAL_SAVINGS}}</div>
+                <div class="stat-detail">After consolidation</div>
+            </div>
+        </div>
+        <!-- Horror Show Section -->
+        <h2>😱 The Horror Show</h2>
+        <div class="horror-show">
+            <h3>{{PATTERN_TYPE_1}} Variations ({{PATTERN_COUNT_1}} unique)</h3>
+            <p>You have {{PATTERN_COUNT_1}} different {{PATTERN_TYPE_1}} implementations when you should have {{CONSOLIDATED_COUNT_1}}.</p>
+            <div class="pattern-grid">
+                {{#EACH_PATTERN_1}}
+                <div class="pattern-item">
+                    <div class="pattern-preview" style="background: {{PATTERN_COLOR}}; {{PATTERN_STYLE}}"></div>
+                    <div>{{PATTERN_NAME}}</div>
+                    <div style="color: #6b7280; font-size: 0.75rem;">Used {{USAGE_COUNT}} times</div>
+                </div>
+                {{/EACH_PATTERN_1}}
+            </div>
+            <h3 style="margin-top: 40px;">{{PATTERN_TYPE_2}} Variations ({{PATTERN_COUNT_2}} unique)</h3>
+            <p>{{PATTERN_COUNT_2}} different colors detected. Industry standard: 10-15 tokens.</p>
+            <div class="pattern-grid">
+                {{#EACH_PATTERN_2}}
+                <div class="pattern-item">
+                    <div class="pattern-preview" style="background: {{COLOR_VALUE}};"></div>
+                    <div>{{COLOR_HEX}}</div>
+                    <div style="color: #6b7280; font-size: 0.75rem;">{{USAGE_PERCENTAGE}}% usage</div>
+                </div>
+                {{/EACH_PATTERN_2}}
+            </div>
+        </div>
+        <!-- Consolidation Preview -->
+        <h2>✨ Consolidated Future State</h2>
+        <div class="consolidation-preview">
+            <h3>What Your System Should Look Like</h3>
+            <div class="comparison">
+                <span class="before">{{TOTAL_PATTERNS}} patterns</span>
+                <span class="arrow">→</span>
+                <span class="after">{{CONSOLIDATED_PATTERNS}} patterns</span>
+            </div>
+            <div class="comparison">
+                <span style="font-size: 1.2rem;">Reduction: <strong style="color: #16a34a;">{{REDUCTION_PERCENTAGE}}%</strong></span>
+            </div>
+            <div class="chart">
+                <div class="chart-bar before" style="height: {{BEFORE_HEIGHT}}%;">
+                    <div class="chart-value">{{TOTAL_PATTERNS}}</div>
+                    <div class="chart-label">Before</div>
+                </div>
+                <div class="chart-bar after" style="height: {{AFTER_HEIGHT}}%;">
+                    <div class="chart-value">{{CONSOLIDATED_PATTERNS}}</div>
+                    <div class="chart-label">After</div>
+                </div>
+            </div>
+            <h3 style="margin-top: 40px;">Recommended Minimal Set</h3>
+            <div class="pattern-grid">
+                {{#EACH_CONSOLIDATED_PATTERN}}
+                <div class="pattern-item" style="border-color: #16a34a;">
+                    <div class="pattern-preview" style="{{CONSOLIDATED_STYLE}}"></div>
+                    <div><strong>{{CONSOLIDATED_NAME}}</strong></div>
+                    <div style="color: #16a34a; font-size: 0.75rem;">Replaces {{REPLACES_COUNT}} variations</div>
+                </div>
+                {{/EACH_CONSOLIDATED_PATTERN}}
+            </div>
+        </div>
+        <!-- ROI Calculator -->
+        <h2>💰 Cost Analysis & ROI</h2>
+        <div class="roi-calculator">
+            <h3>Monthly Maintenance Costs</h3>
+            <div class="cost-row">
+                <span class="cost-label">Current: {{TOTAL_PATTERNS}} patterns × {{HOURS_PER_PATTERN}}h/month × ${{HOURLY_RATE}}/hour</span>
+                <span class="cost-value">${{MONTHLY_COST_BEFORE}}</span>
+            </div>
+            <div class="cost-row">
+                <span class="cost-label">After: {{CONSOLIDATED_PATTERNS}} patterns × {{HOURS_PER_PATTERN}}h/month × ${{HOURLY_RATE}}/hour</span>
+                <span class="cost-value">${{MONTHLY_COST_AFTER}}</span>
+            </div>
+            <div class="cost-row">
+                <span class="cost-label">Monthly Savings</span>
+                <span class="cost-value">${{MONTHLY_SAVINGS}}</span>
+            </div>
+            <h3 style="margin-top: 30px;">Annual Projection</h3>
+            <div class="cost-row">
+                <span class="cost-label">Annual Maintenance Waste (Current)</span>
+                <span class="cost-value">${{ANNUAL_WASTE}}</span>
+            </div>
+            <div class="cost-row">
+                <span class="cost-label">Annual Maintenance Cost (After)</span>
+                <span class="cost-value">${{ANNUAL_COST_AFTER}}</span>
+            </div>
+            <div class="cost-row">
+                <span class="cost-label">Implementation Investment</span>
+                <span class="cost-value">${{IMPLEMENTATION_COST}}</span>
+            </div>
+            <div class="cost-row">
+                <span class="cost-label">Annual Savings</span>
+                <span class="cost-value">${{ANNUAL_SAVINGS}}</span>
+            </div>
+            <h3 style="margin-top: 30px;">ROI Metrics</h3>
+            <div class="cost-row">
+                <span class="cost-label">ROI Ratio</span>
+                <span class="cost-value">{{ROI_RATIO}}x</span>
+            </div>
+            <div class="cost-row">
+                <span class="cost-label">Breakeven Timeline</span>
+                <span class="cost-value">{{BREAKEVEN_DAYS}} days</span>
+            </div>
+            <div class="cost-row">
+                <span class="cost-label">3-Year Total Savings</span>
+                <span class="cost-value">${{THREE_YEAR_SAVINGS}}</span>
+            </div>
+        </div>
+        <!-- Migration Timeline -->
+        <h2>🗓️ Estimated Migration Timeline</h2>
+        <div class="timeline">
+            <div class="timeline-item">
+                <div class="timeline-marker">1</div>
+                <div class="timeline-content">
+                    <div class="timeline-title">Phase 1: Foundation ({{PHASE_1_DURATION}})</div>
+                    <div class="timeline-desc">Deploy token system, no visual changes. Zero risk.</div>
+                </div>
+            </div>
+            <div class="timeline-item">
+                <div class="timeline-marker">2</div>
+                <div class="timeline-content">
+                    <div class="timeline-title">Phase 2: High-Impact Patterns ({{PHASE_2_DURATION}})</div>
+                    <div class="timeline-desc">Replace top 3 most-used components. Immediate ROI.</div>
+                </div>
+            </div>
+            <div class="timeline-item">
+                <div class="timeline-marker">3</div>
+                <div class="timeline-content">
+                    <div class="timeline-title">Phase 3: Long-Tail Cleanup ({{PHASE_3_DURATION}})</div>
+                    <div class="timeline-desc">Consolidate remaining patterns. Medium risk.</div>
+                </div>
+            </div>
+            <div class="timeline-item">
+                <div class="timeline-marker">4</div>
+                <div class="timeline-content">
+                    <div class="timeline-title">Phase 4: Enforcement ({{PHASE_4_DURATION}})</div>
+                    <div class="timeline-desc">CI/CD validation prevents regression. Low risk.</div>
+                </div>
+            </div>
+        </div>
+        <div style="background: #eff6ff; padding: 20px; border-radius: 8px; margin-top: 30px;">
+            <p style="font-size: 1.1rem;"><strong>Total Estimated Timeline:</strong> {{TOTAL_DURATION}}</p>
+            <p style="color: #6b7280; margin-top: 10px;">Phased approach minimizes disruption. Each phase completes independently.</p>
+        </div>
+        <!-- Footer -->
+        <div style="margin-top: 60px; padding-top: 30px; border-top: 2px solid #e5e7eb; color: #6b7280; font-size: 0.9rem;">
+            <p><strong>Generated by Brad (Design System Architect)</strong></p>
+            <p>🤖 Generated with <a href="https://claude.com/claude-code" style="color: #2563eb;">Claude Code</a></p>
+            <p>For questions about this report, activate Brad: <code>*agent design-system</code></p>
+        </div>
+    </div>
+</body>
+</html>