c96ad31046
Major Features:
- Multi-project governance with Rule Manager web UI
- Project Manager for organizing governance across projects
- Variable substitution system (${VAR_NAME} in rules)
- Claude.md analyzer for instruction extraction
- Rule quality scoring and optimization
Admin UI Components:
- /admin/rule-manager.html - Full-featured rule management interface
- /admin/project-manager.html - Multi-project administration
- /admin/claude-md-migrator.html - Import rules from Claude.md files
- Dashboard enhancements for governance analytics
Backend Implementation:
- Controllers: projects, rules, variables
- Models: Project, VariableValue, enhanced GovernanceRule
- Routes: /api/projects, /api/rules with full CRUD
- Services: ClaudeMdAnalyzer, RuleOptimizer, VariableSubstitution
- Utilities: mongoose helpers
Documentation:
- User guides for Rule Manager and Projects
- Complete API documentation (PROJECTS_API, RULES_API)
- Phase 3 planning and architecture diagrams
- Test results and error analysis
- Coding best practices summary
Testing & Scripts:
- Integration tests for projects API
- Unit tests for variable substitution
- Database migration scripts
- Seed data generation
- Test token generator
Key Capabilities:
✅ UNIVERSAL scope rules apply across all projects
✅ PROJECT_SPECIFIC rules override for individual projects
✅ Variable substitution per-project (e.g., ${DB_PORT} → 27017)
✅ Real-time validation and quality scoring
✅ Advanced filtering and search
✅ Import from existing Claude.md files
Technical Details:
- MongoDB-backed governance persistence
- RESTful API with Express
- JWT authentication for admin endpoints
- CSP-compliant frontend (no inline handlers)
- Responsive Tailwind UI
This implements Phase 3 architecture as documented in planning docs.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
250 lines
11 KiB
HTML
250 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CLAUDE.md Migration Wizard - Tractatus Admin</title>
|
|
<link href="../css/tailwind.css" rel="stylesheet">
|
|
</head>
|
|
<body class="bg-gray-100">
|
|
<!-- Navigation -->
|
|
<nav class="bg-white shadow-sm border-b border-gray-200">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0 flex items-center">
|
|
<a href="/admin/dashboard.html" class="text-2xl font-bold text-indigo-600">Tractatus Admin</a>
|
|
</div>
|
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
|
|
<a href="/admin/dashboard.html" class="text-gray-700 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">
|
|
Dashboard
|
|
</a>
|
|
<a href="/admin/rule-manager.html" class="text-gray-700 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">
|
|
Rule Manager
|
|
</a>
|
|
<a href="/admin/claude-md-migrator.html" class="text-indigo-600 border-b-2 border-indigo-600 inline-flex items-center px-1 pt-1 text-sm font-medium">
|
|
CLAUDE.md Migration
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<button id="logout-btn" class="text-gray-700 hover:text-gray-900 text-sm font-medium">Logout</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
|
<!-- Header -->
|
|
<div class="mb-6">
|
|
<h1 class="text-3xl font-bold text-gray-900">CLAUDE.md Migration Wizard</h1>
|
|
<p class="mt-2 text-sm text-gray-600">
|
|
Analyze your CLAUDE.md file and migrate governance rules to the database with AI assistance
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Migration Steps -->
|
|
<div class="bg-white shadow rounded-lg overflow-hidden">
|
|
<!-- Step Indicator -->
|
|
<div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex-1">
|
|
<div class="flex items-center">
|
|
<div id="step-1-indicator" class="flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-full bg-indigo-600 text-white font-semibold">
|
|
1
|
|
</div>
|
|
<div class="ml-4">
|
|
<p id="step-1-title" class="text-sm font-medium text-gray-900">Upload CLAUDE.md</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="flex items-center">
|
|
<div class="flex-1 h-0.5 bg-gray-200"></div>
|
|
<div id="step-2-indicator" class="flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-full bg-gray-200 text-gray-500 font-semibold">
|
|
2
|
|
</div>
|
|
<div class="ml-4">
|
|
<p id="step-2-title" class="text-sm font-medium text-gray-500">Review Analysis</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="flex items-center">
|
|
<div class="flex-1 h-0.5 bg-gray-200"></div>
|
|
<div id="step-3-indicator" class="flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-full bg-gray-200 text-gray-500 font-semibold">
|
|
3
|
|
</div>
|
|
<div class="ml-4">
|
|
<p id="step-3-title" class="text-sm font-medium text-gray-500">Create Rules</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 1: Upload -->
|
|
<div id="step-1-content" class="px-6 py-8">
|
|
<div class="text-center">
|
|
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
|
|
</svg>
|
|
<h3 class="mt-2 text-sm font-medium text-gray-900">Upload CLAUDE.md</h3>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Select your CLAUDE.md file or paste the content below
|
|
</p>
|
|
<div class="mt-6">
|
|
<label for="file-upload" class="cursor-pointer inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
|
|
<svg class="-ml-1 mr-2 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
|
|
</svg>
|
|
Choose File
|
|
<input id="file-upload" name="file-upload" type="file" accept=".md" class="sr-only">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8">
|
|
<label for="claude-md-content" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Or paste content here:
|
|
</label>
|
|
<textarea
|
|
id="claude-md-content"
|
|
rows="12"
|
|
class="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 font-mono text-sm"
|
|
placeholder="# CLAUDE.md content here..."
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="mt-6 flex justify-end">
|
|
<button
|
|
id="analyze-btn"
|
|
class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"
|
|
>
|
|
Analyze CLAUDE.md
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2: Review Analysis (hidden by default) -->
|
|
<div id="step-2-content" class="hidden px-6 py-8">
|
|
<!-- Statistics -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
|
<div class="bg-blue-50 rounded-lg p-4">
|
|
<div class="text-sm font-medium text-blue-900">Total Statements</div>
|
|
<div id="stat-total" class="text-2xl font-bold text-blue-700">-</div>
|
|
</div>
|
|
<div class="bg-green-50 rounded-lg p-4">
|
|
<div class="text-sm font-medium text-green-900">High Quality</div>
|
|
<div id="stat-high-quality" class="text-2xl font-bold text-green-700">-</div>
|
|
</div>
|
|
<div class="bg-yellow-50 rounded-lg p-4">
|
|
<div class="text-sm font-medium text-yellow-900">Needs Clarification</div>
|
|
<div id="stat-needs-clarification" class="text-2xl font-bold text-yellow-700">-</div>
|
|
</div>
|
|
<div class="bg-red-50 rounded-lg p-4">
|
|
<div class="text-sm font-medium text-red-900">Too Nebulous</div>
|
|
<div id="stat-too-nebulous" class="text-2xl font-bold text-red-700">-</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="border-b border-gray-200">
|
|
<nav class="-mb-px flex space-x-8">
|
|
<button class="tab-btn active border-b-2 border-indigo-600 py-4 px-1 text-sm font-medium text-indigo-600" data-tab="high-quality">
|
|
High Quality
|
|
</button>
|
|
<button class="tab-btn border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="needs-clarification">
|
|
Needs Clarification
|
|
</button>
|
|
<button class="tab-btn border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="too-nebulous">
|
|
Too Nebulous
|
|
</button>
|
|
<button class="tab-btn border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="redundancies">
|
|
Redundancies
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div id="high-quality-tab" class="tab-content mt-6">
|
|
<p class="text-sm text-gray-600 mb-4">These rules can be auto-converted (all selected by default):</p>
|
|
<div id="high-quality-list" class="space-y-3">
|
|
<!-- High quality candidates will be inserted here -->
|
|
</div>
|
|
</div>
|
|
|
|
<div id="needs-clarification-tab" class="tab-content hidden mt-6">
|
|
<p class="text-sm text-gray-600 mb-4">These rules need review before conversion (unselected by default):</p>
|
|
<div id="needs-clarification-list" class="space-y-3">
|
|
<!-- Needs clarification candidates will be inserted here -->
|
|
</div>
|
|
</div>
|
|
|
|
<div id="too-nebulous-tab" class="tab-content hidden mt-6">
|
|
<p class="text-sm text-gray-600 mb-4">These statements are too vague and require manual rewrite:</p>
|
|
<div id="too-nebulous-list" class="space-y-3">
|
|
<!-- Too nebulous candidates will be inserted here -->
|
|
</div>
|
|
</div>
|
|
|
|
<div id="redundancies-tab" class="tab-content hidden mt-6">
|
|
<p class="text-sm text-gray-600 mb-4">Similar rules that should be merged:</p>
|
|
<div id="redundancies-list" class="space-y-4">
|
|
<!-- Redundancies will be inserted here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="mt-8 flex justify-between">
|
|
<button
|
|
id="back-to-upload-btn"
|
|
class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
|
|
>
|
|
Back to Upload
|
|
</button>
|
|
<button
|
|
id="create-rules-btn"
|
|
class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700"
|
|
>
|
|
Create Selected Rules
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3: Results (hidden by default) -->
|
|
<div id="step-3-content" class="hidden px-6 py-8">
|
|
<div class="text-center">
|
|
<svg class="mx-auto h-12 w-12 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<h3 class="mt-2 text-lg font-medium text-gray-900">Migration Complete!</h3>
|
|
<div id="results-summary" class="mt-4 text-sm text-gray-600">
|
|
<!-- Results will be inserted here -->
|
|
</div>
|
|
<div class="mt-8 flex justify-center space-x-4">
|
|
<a href="/admin/rule-manager.html" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
|
|
View Rules
|
|
</a>
|
|
<button
|
|
id="migrate-another-btn"
|
|
class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
|
|
>
|
|
Migrate Another File
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Toast Container -->
|
|
<div id="toast-container" class="fixed top-4 right-4 z-50"></div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="../js/admin/api.js"></script>
|
|
<script src="../js/admin/toast.js"></script>
|
|
<script src="../js/admin/claude-md-migrator.js"></script>
|
|
</body>
|
|
</html>
|