2298d36bed
- Create Economist SubmissionTracking package correctly: * mainArticle = full blog post content * coverLetter = 216-word SIR— letter * Links to blog post via blogPostId - Archive 'Letter to The Economist' from blog posts (it's the cover letter) - Fix date display on article cards (use published_at) - Target publication already displaying via blue badge Database changes: - Make blogPostId optional in SubmissionTracking model - Economist package ID: 68fa85ae49d4900e7f2ecd83 - Le Monde package ID: 68fa2abd2e6acd5691932150 Next: Enhanced modal with tabs, validation, export 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
148 lines
7.8 KiB
XML
148 lines
7.8 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<svg width="600" height="600" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" id="interactive-arch-diagram">
|
|
<defs>
|
|
<!-- Central core gradient (shared with Passport - cyan to blue) -->
|
|
<radialGradient id="tractatusCoreInteractive">
|
|
<stop offset="0%" style="stop-color:#64ffda;stop-opacity:1" />
|
|
<stop offset="70%" style="stop-color:#448aff;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#0ea5e9;stop-opacity:1" />
|
|
</radialGradient>
|
|
|
|
<!-- Service-specific gradients (6 governance services) -->
|
|
<linearGradient id="serviceBoundaryInt" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#10b981;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="serviceInstructionInt" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#4f46e5;stop-opacity:1" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="serviceValidatorInt" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#8b5cf6;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#7c3aed;stop-opacity:1" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="servicePressureInt" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#f59e0b;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#d97706;stop-opacity:1" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="serviceMetacognitiveInt" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#ec4899;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#db2777;stop-opacity:1" />
|
|
</linearGradient>
|
|
|
|
<linearGradient id="serviceDeliberationInt" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#14b8a6;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#0d9488;stop-opacity:1" />
|
|
</linearGradient>
|
|
|
|
<filter id="dropShadowInt">
|
|
<feDropShadow dx="0" dy="4" stdDeviation="6" flood-opacity="0.3"/>
|
|
</filter>
|
|
|
|
<filter id="glow">
|
|
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Background -->
|
|
<rect width="600" height="600" fill="#f9fafb"/>
|
|
|
|
<!-- Orbital rings (subtle, static in interactive version) -->
|
|
<circle cx="300" cy="300" r="255" stroke="#64ffda" stroke-width="1" opacity="0.15" fill="none"/>
|
|
<circle cx="300" cy="300" r="210" stroke="#64ffda" stroke-width="1" opacity="0.25" fill="none"/>
|
|
<circle cx="300" cy="300" r="165" stroke="#64ffda" stroke-width="1" opacity="0.35" fill="none"/>
|
|
|
|
<!-- Connection lines (will be made interactive) -->
|
|
<g id="connection-lines">
|
|
<line id="conn-boundary" x1="300" y1="300" x2="300" y2="105" stroke="#10b981" stroke-width="3" opacity="0.3" class="connection-line"/>
|
|
<line id="conn-instruction" x1="300" y1="300" x2="468" y2="202.5" stroke="#6366f1" stroke-width="3" opacity="0.3" class="connection-line"/>
|
|
<line id="conn-validator" x1="300" y1="300" x2="468" y2="397.5" stroke="#8b5cf6" stroke-width="3" opacity="0.3" class="connection-line"/>
|
|
<line id="conn-pressure" x1="300" y1="300" x2="300" y2="495" stroke="#f59e0b" stroke-width="3" opacity="0.3" class="connection-line"/>
|
|
<line id="conn-metacognitive" x1="300" y1="300" x2="132" y2="397.5" stroke="#ec4899" stroke-width="3" opacity="0.3" class="connection-line"/>
|
|
<line id="conn-deliberation" x1="300" y1="300" x2="132" y2="202.5" stroke="#14b8a6" stroke-width="3" opacity="0.3" class="connection-line"/>
|
|
</g>
|
|
|
|
<!-- Service nodes (clickable) -->
|
|
<g id="service-nodes">
|
|
<!-- 1. BoundaryEnforcer (top) - Green -->
|
|
<g id="node-boundary" class="service-node" data-service="boundary" style="cursor: pointer;">
|
|
<circle cx="300" cy="105" r="45" fill="url(#serviceBoundaryInt)" filter="url(#dropShadowInt)" opacity="0.95"/>
|
|
<text x="300" y="115" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white">B</text>
|
|
<title>BoundaryEnforcer - Click for details</title>
|
|
</g>
|
|
|
|
<!-- 2. InstructionPersistenceClassifier (top-right) - Indigo -->
|
|
<g id="node-instruction" class="service-node" data-service="instruction" style="cursor: pointer;">
|
|
<circle cx="468" cy="202.5" r="45" fill="url(#serviceInstructionInt)" filter="url(#dropShadowInt)" opacity="0.95"/>
|
|
<text x="468" y="212.5" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white">I</text>
|
|
<title>InstructionPersistenceClassifier - Click for details</title>
|
|
</g>
|
|
|
|
<!-- 3. CrossReferenceValidator (bottom-right) - Purple -->
|
|
<g id="node-validator" class="service-node" data-service="validator" style="cursor: pointer;">
|
|
<circle cx="468" cy="397.5" r="45" fill="url(#serviceValidatorInt)" filter="url(#dropShadowInt)" opacity="0.95"/>
|
|
<text x="468" y="407.5" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white">V</text>
|
|
<title>CrossReferenceValidator - Click for details</title>
|
|
</g>
|
|
|
|
<!-- 4. ContextPressureMonitor (bottom) - Amber -->
|
|
<g id="node-pressure" class="service-node" data-service="pressure" style="cursor: pointer;">
|
|
<circle cx="300" cy="495" r="45" fill="url(#servicePressureInt)" filter="url(#dropShadowInt)" opacity="0.95"/>
|
|
<text x="300" y="505" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white">P</text>
|
|
<title>ContextPressureMonitor - Click for details</title>
|
|
</g>
|
|
|
|
<!-- 5. MetacognitiveVerifier (bottom-left) - Rose -->
|
|
<g id="node-metacognitive" class="service-node" data-service="metacognitive" style="cursor: pointer;">
|
|
<circle cx="132" cy="397.5" r="45" fill="url(#serviceMetacognitiveInt)" filter="url(#dropShadowInt)" opacity="0.95"/>
|
|
<text x="132" y="407.5" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white">M</text>
|
|
<title>MetacognitiveVerifier - Click for details</title>
|
|
</g>
|
|
|
|
<!-- 6. PluralisticDeliberationOrchestrator (top-left) - Teal -->
|
|
<g id="node-deliberation" class="service-node" data-service="deliberation" style="cursor: pointer;">
|
|
<circle cx="132" cy="202.5" r="45" fill="url(#serviceDeliberationInt)" filter="url(#dropShadowInt)" opacity="0.95"/>
|
|
<text x="132" y="212.5" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="white">D</text>
|
|
<title>PluralisticDeliberationOrchestrator - Click for details</title>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Central core (clickable) -->
|
|
<g id="central-core" class="service-node" data-service="overview" style="cursor: pointer;">
|
|
<circle cx="300" cy="300" r="85" fill="url(#tractatusCoreInteractive)" filter="url(#dropShadowInt)"/>
|
|
<circle cx="300" cy="300" r="68" fill="rgba(0,0,0,0.25)"/>
|
|
<text x="300" y="320" text-anchor="middle" font-family="Arial, sans-serif" font-size="64" font-weight="bold" fill="white" opacity="0.95">T</text>
|
|
<text x="300" y="345" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="white" opacity="0.8">Tractatus</text>
|
|
<title>Tractatus Core - Click to see how all services work together</title>
|
|
</g>
|
|
|
|
<style>
|
|
.service-node:hover circle {
|
|
filter: url(#dropShadowInt) url(#glow);
|
|
opacity: 1;
|
|
}
|
|
|
|
.service-node.active circle {
|
|
stroke: white;
|
|
stroke-width: 4;
|
|
filter: url(#dropShadowInt) url(#glow);
|
|
}
|
|
|
|
.connection-line {
|
|
transition: opacity 0.3s ease, stroke-width 0.3s ease;
|
|
}
|
|
|
|
.connection-line.active {
|
|
opacity: 0.8;
|
|
stroke-width: 5;
|
|
}
|
|
</style>
|
|
</svg>
|
