icdev 1.0.0__py3-none-any.whl

icdev/tools/dashboard/templates/wizard.html

@@ -0,0 +1,539 @@
+{% extends "base.html" %}
+{% block title %}Getting Started - ICDEV Dashboard{% endblock %}
+
+{% block content %}
+<div class="page-header">
+    <div class="breadcrumbs">
+        <a href="/">Home</a>
+        <span class="separator">/</span>
+        <span class="current">Getting Started</span>
+    </div>
+    <h1>Getting Started</h1>
+    <p class="subtitle">Answer 4 quick questions and we'll recommend the best path for you</p>
+</div>
+
+<div class="wizard-container">
+    <!-- Progress dots -->
+    <div class="wizard-progress" id="wizard-progress">
+        <div class="wizard-progress-dot active" data-step="0"></div>
+        <div class="wizard-progress-dot" data-step="1"></div>
+        <div class="wizard-progress-dot" data-step="2"></div>
+        <div class="wizard-progress-dot" data-step="3"></div>
+        <div class="wizard-progress-dot" data-step="4"></div>
+        <div class="wizard-progress-dot" data-step="5"></div>
+    </div>
+
+    <!-- Step 1: Goal -->
+    <div class="wizard-step active" id="wizard-step-0">
+        <div class="wizard-question">What are you trying to do?</div>
+        <div class="wizard-options">
+            <div class="wizard-option" data-value="build" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x1F528;</span>
+                <div class="wizard-option-title">Build a New Application</div>
+                <div class="wizard-option-desc">Start a new project from scratch with compliance built in</div>
+            </div>
+            <div class="wizard-option" data-value="modernize" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x1F504;</span>
+                <div class="wizard-option-title">Modernize a Legacy App</div>
+                <div class="wizard-option-desc">Migrate an existing system to modern architecture</div>
+            </div>
+            <div class="wizard-option" data-value="comply" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x1F6E1;</span>
+                <div class="wizard-option-title">Get ATO / Compliance</div>
+                <div class="wizard-option-desc">Generate security artifacts and pass compliance gates</div>
+            </div>
+            <div class="wizard-option" data-value="requirements" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x1F4CB;</span>
+                <div class="wizard-option-title">Capture Requirements</div>
+                <div class="wizard-option-desc">Gather and structure requirements from stakeholders</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Step 2: Role -->
+    <div class="wizard-step" id="wizard-step-1">
+        <div class="wizard-question">What is your role?</div>
+        <div class="wizard-options">
+            <div class="wizard-option" data-value="pm" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x1F4CA;</span>
+                <div class="wizard-option-title">Program Manager</div>
+                <div class="wizard-option-desc">I manage timelines, budgets, and stakeholders</div>
+            </div>
+            <div class="wizard-option" data-value="developer" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x1F4BB;</span>
+                <div class="wizard-option-title">Developer / Architect</div>
+                <div class="wizard-option-desc">I write code and design systems</div>
+            </div>
+            <div class="wizard-option" data-value="isso" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x1F510;</span>
+                <div class="wizard-option-title">ISSO / Security Officer</div>
+                <div class="wizard-option-desc">I manage security and compliance</div>
+            </div>
+            <div class="wizard-option" data-value="co" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x1F4DD;</span>
+                <div class="wizard-option-title">Contracting Officer</div>
+                <div class="wizard-option-desc">I manage contracts and vendor requirements</div>
+            </div>
+            <div class="wizard-option" data-value="analyst" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x1F50D;</span>
+                <div class="wizard-option-title">Analyst</div>
+                <div class="wizard-option-desc">I research data, requirements, and threats</div>
+            </div>
+            <div class="wizard-option" data-value="solutions_architect" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x1F3D7;</span>
+                <div class="wizard-option-title">Solutions Architect</div>
+                <div class="wizard-option-desc">I design technical solutions and architectures</div>
+            </div>
+            <div class="wizard-option" data-value="sales_engineer" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x1F4E1;</span>
+                <div class="wizard-option-title">Sales Engineer</div>
+                <div class="wizard-option-desc">I demo capabilities and support proposals</div>
+            </div>
+            <div class="wizard-option" data-value="innovator" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x1F4A1;</span>
+                <div class="wizard-option-title">Innovator</div>
+                <div class="wizard-option-desc">I explore emerging tech and prototype ideas</div>
+            </div>
+            <div class="wizard-option" data-value="biz_dev" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x1F91D;</span>
+                <div class="wizard-option-title">Business Development</div>
+                <div class="wizard-option-desc">I identify opportunities and grow partnerships</div>
+            </div>
+            <div class="wizard-option" data-value="custom" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x270D;</span>
+                <div class="wizard-option-title">Custom Role</div>
+                <div class="wizard-option-desc">Define your own role and persona</div>
+            </div>
+        </div>
+        <!-- Custom role input (hidden until "Custom" selected) -->
+        <div id="custom-role-form" style="display:none; margin-top:16px;">
+            <div style="margin-bottom:8px;">
+                <label for="custom-role-name" style="font-weight:600; display:block; margin-bottom:4px;">Role Name</label>
+                <input type="text" id="custom-role-name" placeholder="e.g., Logistics Officer"
+                       style="width:100%; padding:8px 12px; border:1px solid var(--border-color); border-radius:6px; background:var(--bg-primary); color:var(--text-primary);">
+            </div>
+            <div>
+                <label for="custom-role-desc" style="font-weight:600; display:block; margin-bottom:4px;">What do you do?</label>
+                <input type="text" id="custom-role-desc" placeholder="e.g., I manage supply chain operations and vendor logistics"
+                       style="width:100%; padding:8px 12px; border:1px solid var(--border-color); border-radius:6px; background:var(--bg-primary); color:var(--text-primary);">
+            </div>
+        </div>
+    </div>
+
+    <!-- Step 3: Classification -->
+    <div class="wizard-step" id="wizard-step-2">
+        <div class="wizard-question">What classification level?</div>
+        <div class="wizard-options">
+            <div class="wizard-option" data-value="il2" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x1F310;</span>
+                <div class="wizard-option-title">IL2 &mdash; Public</div>
+                <div class="wizard-option-desc">Non-sensitive data, commercial cloud OK</div>
+            </div>
+            <div class="wizard-option" data-value="il4" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x1F512;</span>
+                <div class="wizard-option-title">IL4 &mdash; CUI (GovCloud)</div>
+                <div class="wizard-option-desc">Controlled Unclassified Information in AWS GovCloud</div>
+            </div>
+            <div class="wizard-option" data-value="il5" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x1F510;</span>
+                <div class="wizard-option-title">IL5 &mdash; CUI (Dedicated)</div>
+                <div class="wizard-option-desc">CUI requiring dedicated GovCloud infrastructure</div>
+            </div>
+            <div class="wizard-option" data-value="il6" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x1F6D1;</span>
+                <div class="wizard-option-title">IL6 &mdash; SECRET</div>
+                <div class="wizard-option-desc">Classified data requiring SIPR network and air-gapped systems</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Step 4: Compliance Frameworks -->
+    <div class="wizard-step" id="wizard-step-3">
+        <div class="wizard-question">Which compliance frameworks apply?</div>
+        <p style="color: var(--text-secondary); margin-bottom:16px; font-size:0.9rem;">
+            Auto-suggested based on your classification level. Check additional frameworks as needed.
+        </p>
+        <div class="wizard-frameworks" id="wizard-frameworks">
+            <!-- Populated by JS based on classification selection -->
+        </div>
+    </div>
+
+    <!-- Step 5: Development Standards (Phase 34) -->
+    <div class="wizard-step" id="wizard-step-4">
+        <div class="wizard-question">How should we set up your development standards?</div>
+        <p style="color: var(--text-secondary); margin-bottom:16px; font-size:0.9rem;">
+            Choose how to configure coding conventions, tooling preferences, and quality standards.
+        </p>
+        <div class="wizard-options">
+            <div class="wizard-option" data-value="template_recommended" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x1F4CB;</span>
+                <div class="wizard-option-title">Use recommended standards</div>
+                <div class="wizard-option-desc">Apply the recommended template based on your sector and compliance needs</div>
+            </div>
+            <div class="wizard-option" data-value="scan_codebase" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x1F50D;</span>
+                <div class="wizard-option-title">Scan my existing codebase</div>
+                <div class="wizard-option-desc">Auto-detect standards from an existing repository (advisory — you review before applying)</div>
+            </div>
+            <div class="wizard-option" data-value="skip_profile" onclick="ICDEV.wizardSelect(this)">
+                <span class="wizard-option-icon">&#x23ED;</span>
+                <div class="wizard-option-title">Skip for now</div>
+                <div class="wizard-option-desc">Configure development standards later via the Dev Profiles page</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Step 6: Results -->
+    <div class="wizard-step" id="wizard-step-5">
+        <div class="wizard-result" id="wizard-result">
+            <!-- Populated by JS -->
+        </div>
+    </div>
+
+    <!-- Navigation -->
+    <div class="wizard-nav" id="wizard-nav">
+        <button class="btn btn-secondary" id="wizard-back" onclick="ICDEV.wizardBack()" style="visibility: hidden;">
+            &larr; Back
+        </button>
+        <span id="wizard-step-label" class="text-muted">Step 1 of 5</span>
+        <button class="btn btn-primary" id="wizard-next" onclick="ICDEV.wizardNext()" disabled>
+            Next &rarr;
+        </button>
+    </div>
+</div>
+
+{% endblock %}
+
+{% block scripts %}
+<script>
+(function() {
+    var state = { step: 0, answers: [null, null, null, null, null] };
+    var TOTAL_STEPS = 5;
+
+    // Framework definitions
+    var FRAMEWORKS = {
+        fedramp_moderate: { name: "FedRAMP Moderate", desc: "Federal cloud authorization — Moderate baseline" },
+        fedramp_high: { name: "FedRAMP High", desc: "Federal cloud authorization — High baseline" },
+        cmmc_l2: { name: "CMMC Level 2", desc: "Cybersecurity Maturity Model — Advanced" },
+        cmmc_l3: { name: "CMMC Level 3", desc: "Cybersecurity Maturity Model — Expert" },
+        nist_800_171: { name: "NIST 800-171", desc: "CUI protection (DFARS)" },
+        nist_800_207: { name: "NIST 800-207 (ZTA)", desc: "Zero Trust Architecture" },
+        cnssi_1253: { name: "CNSSI 1253", desc: "Classified system overlay" },
+        hipaa: { name: "HIPAA", desc: "Healthcare data protection" },
+        pci_dss: { name: "PCI DSS v4.0", desc: "Payment card data security" },
+        cjis: { name: "CJIS", desc: "Criminal justice information" },
+        soc2: { name: "SOC 2 Type II", desc: "Trust services criteria" },
+        iso_27001: { name: "ISO 27001:2022", desc: "Information security management" },
+        hitrust: { name: "HITRUST CSF", desc: "Health information trust" }
+    };
+
+    // Auto-suggest mapping per IL level
+    var IL_FRAMEWORKS = {
+        il2: ["fedramp_moderate"],
+        il4: ["fedramp_moderate", "cmmc_l2", "nist_800_171"],
+        il5: ["fedramp_high", "cmmc_l2", "nist_800_171", "nist_800_207"],
+        il6: ["fedramp_high", "cmmc_l3", "cnssi_1253", "nist_800_207"]
+    };
+
+    var PATHS = {
+        build_developer: {
+            name: "Build & Ship",
+            desc: "Full development pipeline with compliance baked in from the start.",
+            steps: [
+                { title: "Create Project", desc: "Initialize with compliance scaffolding", cmd: "/icdev-init" },
+                { title: "Write Tests First", desc: "Generate test cases from requirements", cmd: "/icdev-build (RED phase)" },
+                { title: "Build Code", desc: "TDD: write code to pass tests", cmd: "/icdev-build (GREEN phase)" },
+                { title: "Security Scan", desc: "SAST, dependency audit, secrets", cmd: "/icdev-secure" },
+                { title: "Generate ATO Artifacts", desc: "SSP, POA&M, STIG, SBOM", cmd: "/icdev-comply" },
+                { title: "Deploy", desc: "Generate IaC and CI/CD pipeline", cmd: "/icdev-deploy" }
+            ]
+        },
+        build_pm: {
+            name: "Requirements to Build",
+            desc: "Start by capturing requirements, then hand off to development team.",
+            steps: [
+                { title: "Capture Requirements", desc: "AI-guided intake conversation", cmd: "/icdev-intake" },
+                { title: "Review & Approve", desc: "Score readiness, detect gaps", cmd: "readiness_scorer.py" },
+                { title: "Generate COAs", desc: "3 options: speed, balanced, comprehensive", cmd: "/icdev-simulate" },
+                { title: "Approve & Decompose", desc: "SAFe epics, features, stories", cmd: "decomposition_engine.py" },
+                { title: "Hand Off to Dev Team", desc: "Push to Jira/GitLab", cmd: "/icdev-integrate" }
+            ]
+        },
+        comply_isso: {
+            name: "Quick ATO Package",
+            desc: "Generate the minimum required ATO artifacts for your project.",
+            steps: [
+                { title: "Categorize System", desc: "FIPS 199 security categorization", cmd: "fips199_categorizer.py" },
+                { title: "Validate Requirements", desc: "Check all 17 FIPS 200 security areas", cmd: "fips200_validator.py" },
+                { title: "Generate SSP", desc: "System Security Plan", cmd: "/icdev-comply" },
+                { title: "Create POA&M", desc: "Document gaps with fix deadlines", cmd: "poam_generator.py" },
+                { title: "STIG Check", desc: "Security technical compliance", cmd: "stig_checker.py" },
+                { title: "Generate SBOM", desc: "Software inventory", cmd: "sbom_generator.py" }
+            ]
+        },
+        comply_developer: {
+            name: "Build with Compliance",
+            desc: "Build your application with security compliance integrated from day one.",
+            steps: [
+                { title: "Create Project", desc: "Scaffolding includes compliance templates", cmd: "/icdev-init" },
+                { title: "Build with TDD", desc: "Tests include security scenarios", cmd: "/icdev-build" },
+                { title: "Run Security Scans", desc: "SAST + dependency audit", cmd: "/icdev-secure" },
+                { title: "Generate Artifacts", desc: "SSP, POA&M, STIG, SBOM", cmd: "/icdev-comply" },
+                { title: "ATO Assessment", desc: "FedRAMP + CMMC readiness", cmd: "fedramp_assessor.py" }
+            ]
+        },
+        modernize: {
+            name: "Modernize Legacy App",
+            desc: "Analyze, assess, and migrate your legacy application to modern architecture.",
+            steps: [
+                { title: "Analyze Legacy Code", desc: "Scan codebase for complexity", cmd: "/icdev-modernize" },
+                { title: "UI Analysis", desc: "Analyze screenshots for complexity", cmd: "ui_analyzer.py" },
+                { title: "7R Assessment", desc: "Score migration strategies", cmd: "seven_r_assessor.py" },
+                { title: "Create Migration Plan", desc: "Strangler fig or big bang", cmd: "migration_code_generator.py" },
+                { title: "Generate Code", desc: "Modernized code output", cmd: "/icdev-modernize --generate" },
+                { title: "Validate Compliance", desc: "Ensure ATO maintained", cmd: "compliance_bridge.py" }
+            ]
+        },
+        requirements: {
+            name: "Requirements to Approval",
+            desc: "AI-guided conversation to capture, analyze, and approve requirements.",
+            steps: [
+                { title: "Start Intake Session", desc: "AI-guided Q&A conversation", cmd: "/icdev-intake" },
+                { title: "Upload Documents", desc: "SOW, CDD, CONOPS extraction", cmd: "document_extractor.py" },
+                { title: "Detect Gaps", desc: "Find missing requirements", cmd: "gap_detector.py" },
+                { title: "Score Readiness", desc: "5-dimension readiness check", cmd: "readiness_scorer.py" },
+                { title: "Decompose Work", desc: "Epics, features, stories", cmd: "decomposition_engine.py" },
+                { title: "Generate COAs", desc: "3 cost/schedule options", cmd: "/icdev-simulate" },
+                { title: "Submit for Approval", desc: "Route to reviewers", cmd: "/icdev-integrate" }
+            ]
+        }
+    };
+
+    function getPath(goal, role) {
+        var r = (typeof role === "object") ? "developer" : role;
+        if (goal === "modernize") return PATHS.modernize;
+        if (goal === "requirements") return PATHS.requirements;
+        if (goal === "comply" && r === "isso") return PATHS.comply_isso;
+        if (goal === "comply") return PATHS.comply_developer;
+        var pmRoles = ["pm", "co", "sales_engineer", "biz_dev"];
+        if (goal === "build" && pmRoles.indexOf(r) !== -1) return PATHS.build_pm;
+        return PATHS.build_developer;
+    }
+
+    window.ICDEV = window.ICDEV || {};
+
+    ICDEV.wizardSelect = function(el) {
+        var siblings = el.parentNode.querySelectorAll(".wizard-option");
+        for (var i = 0; i < siblings.length; i++) siblings[i].classList.remove("selected");
+        el.classList.add("selected");
+        var val = el.getAttribute("data-value");
+
+        // Handle custom role
+        if (state.step === 1) {
+            var customForm = document.getElementById("custom-role-form");
+            if (val === "custom") {
+                customForm.style.display = "block";
+                state.answers[1] = { custom: true, name: "", description: "" };
+            } else {
+                customForm.style.display = "none";
+                state.answers[1] = val;
+            }
+        } else {
+            state.answers[state.step] = val;
+        }
+
+        document.getElementById("wizard-next").disabled = false;
+    };
+
+    // Update custom role fields on input
+    function wireCustomRoleInputs() {
+        var nameInput = document.getElementById("custom-role-name");
+        var descInput = document.getElementById("custom-role-desc");
+        if (nameInput) {
+            nameInput.addEventListener("input", function() {
+                if (typeof state.answers[1] === "object") {
+                    state.answers[1].name = nameInput.value.trim();
+                    // Enable next only if both fields have content
+                    document.getElementById("wizard-next").disabled =
+                        !nameInput.value.trim() || !descInput.value.trim();
+                }
+            });
+        }
+        if (descInput) {
+            descInput.addEventListener("input", function() {
+                if (typeof state.answers[1] === "object") {
+                    state.answers[1].description = descInput.value.trim();
+                    document.getElementById("wizard-next").disabled =
+                        !nameInput.value.trim() || !descInput.value.trim();
+                }
+            });
+        }
+    }
+
+    ICDEV.wizardNext = function() {
+        // When leaving Step 3 (classification), populate Step 4 (frameworks)
+        if (state.step === 2) {
+            populateFrameworks(state.answers[2]);
+        }
+        if (state.step >= TOTAL_STEPS - 1) {
+            showResult();
+            state.step = TOTAL_STEPS;
+            updateUI();
+            return;
+        }
+        state.step++;
+        updateUI();
+    };
+
+    ICDEV.wizardBack = function() {
+        if (state.step <= 0) return;
+        state.step--;
+        updateUI();
+    };
+
+    function populateFrameworks(classification) {
+        var container = document.getElementById("wizard-frameworks");
+        var suggested = IL_FRAMEWORKS[classification] || [];
+        var html = "";
+
+        // Suggested frameworks section
+        html += '<div style="margin-bottom:12px; font-weight:600; color:var(--text-secondary);">Recommended for ' + classification.toUpperCase() + '</div>';
+
+        var allIds = Object.keys(FRAMEWORKS);
+        for (var i = 0; i < allIds.length; i++) {
+            var id = allIds[i];
+            var fw = FRAMEWORKS[id];
+            var isSuggested = suggested.indexOf(id) !== -1;
+            var checked = isSuggested ? " checked" : "";
+
+            if (i > 0 && !isSuggested && suggested.indexOf(allIds[i - 1]) !== -1) {
+                html += '<div style="margin:16px 0 12px; font-weight:600; color:var(--text-secondary); border-top:1px solid var(--border-color); padding-top:12px;">Additional Frameworks</div>';
+            }
+
+            html += '<label class="framework-checkbox' + (isSuggested ? ' suggested' : '') + '">';
+            html += '<input type="checkbox" value="' + id + '"' + checked + ' onchange="ICDEV.wizardFrameworkChange()">';
+            html += '<span class="framework-name">' + fw.name + '</span>';
+            html += '<span class="framework-desc">' + fw.desc + '</span>';
+            html += '</label>';
+        }
+        container.innerHTML = html;
+
+        // Set initial framework selection
+        updateFrameworkAnswer();
+    }
+
+    ICDEV.wizardFrameworkChange = function() {
+        updateFrameworkAnswer();
+    };
+
+    function updateFrameworkAnswer() {
+        var checks = document.querySelectorAll("#wizard-frameworks input[type=checkbox]:checked");
+        var selected = [];
+        for (var i = 0; i < checks.length; i++) selected.push(checks[i].value);
+        state.answers[3] = selected;
+        // Frameworks step is always valid (even with 0 selected)
+        document.getElementById("wizard-next").disabled = false;
+    }
+
+    function updateUI() {
+        var steps = document.querySelectorAll(".wizard-step");
+        for (var i = 0; i < steps.length; i++) {
+            steps[i].classList.toggle("active", i === state.step);
+        }
+        var dots = document.querySelectorAll(".wizard-progress-dot");
+        for (var j = 0; j < dots.length; j++) {
+            dots[j].classList.remove("active", "completed");
+            if (j < state.step) dots[j].classList.add("completed");
+            if (j === state.step) dots[j].classList.add("active");
+        }
+        var backBtn = document.getElementById("wizard-back");
+        var nextBtn = document.getElementById("wizard-next");
+        var label = document.getElementById("wizard-step-label");
+        var nav = document.getElementById("wizard-nav");
+
+        backBtn.style.visibility = state.step > 0 ? "visible" : "hidden";
+
+        if (state.step >= TOTAL_STEPS) {
+            nav.style.display = "none";
+        } else {
+            nav.style.display = "flex";
+            // Framework step is always ready
+            if (state.step === 3) {
+                nextBtn.disabled = false;
+            } else if (state.step === 1 && typeof state.answers[1] === "object") {
+                // Custom role: need both name and desc
+                var n = document.getElementById("custom-role-name");
+                var d = document.getElementById("custom-role-desc");
+                nextBtn.disabled = !(n && n.value.trim() && d && d.value.trim());
+            } else {
+                nextBtn.disabled = !state.answers[state.step];
+            }
+            nextBtn.textContent = state.step === (TOTAL_STEPS - 1) ? "See Recommendation \u2192" : "Next \u2192";
+            label.textContent = "Step " + (state.step + 1) + " of " + TOTAL_STEPS;
+        }
+    }
+
+    function showResult() {
+        var roleVal = state.answers[1];
+        var roleParam = (typeof roleVal === "object") ? "custom" : roleVal;
+        var path = getPath(state.answers[0], roleVal);
+        var frameworks = state.answers[3] || [];
+
+        var chatUrl = "/chat?goal=" + encodeURIComponent(state.answers[0])
+            + "&role=" + encodeURIComponent(roleParam)
+            + "&classification=" + encodeURIComponent(state.answers[2])
+            + "&frameworks=" + encodeURIComponent(frameworks.join(","));
+
+        // Add custom role params if applicable
+        if (typeof roleVal === "object" && roleVal.custom) {
+            chatUrl += "&custom_role_name=" + encodeURIComponent(roleVal.name || "");
+            chatUrl += "&custom_role_desc=" + encodeURIComponent(roleVal.description || "");
+        }
+
+        var html = '<h2>Recommended Path</h2>';
+        html += '<div class="recommended-path">' + path.name + '</div>';
+        html += '<p style="color: var(--text-secondary); margin-bottom: 20px;">' + path.desc + '</p>';
+
+        // Show selected persona
+        var personaLabel = roleParam;
+        if (typeof roleVal === "object" && roleVal.name) personaLabel = roleVal.name;
+        html += '<p style="color: var(--accent-blue); margin-bottom: 8px;"><strong>Your Persona:</strong> ' + personaLabel + '</p>';
+
+        // Show selected frameworks
+        if (frameworks.length > 0) {
+            html += '<p style="margin-bottom: 16px;"><strong>Compliance:</strong> ';
+            for (var f = 0; f < frameworks.length; f++) {
+                var fw = FRAMEWORKS[frameworks[f]];
+                if (fw) html += '<span class="framework-tag">' + fw.name + '</span> ';
+            }
+            html += '</p>';
+        }
+
+        html += '<div class="path-steps">';
+        for (var i = 0; i < path.steps.length; i++) {
+            var s = path.steps[i];
+            html += '<div class="path-step">';
+            html += '<div class="step-number">' + (i + 1) + '</div>';
+            html += '<div class="step-text"><strong>' + s.title + '</strong>';
+            html += '<span>' + s.desc + '</span>';
+            html += '<br><code style="font-size:0.75rem; margin-top:4px; display:inline-block;">' + s.cmd + '</code>';
+            html += '</div></div>';
+        }
+        html += '</div>';
+        html += '<div style="margin-top:24px;">';
+        html += '<a href="' + chatUrl + '" class="btn btn-primary btn-lg">Start Requirements Chat &rarr;</a> ';
+        html += '<a href="/quick-paths" class="btn btn-secondary">View All Quick Paths</a> ';
+        html += '<button class="btn btn-secondary" onclick="location.reload()">Start Over</button>';
+        html += '</div>';
+        document.getElementById("wizard-result").innerHTML = html;
+    }
+
+    // Wire custom role inputs after DOM ready
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", wireCustomRoleInputs);
+    } else {
+        wireCustomRoleInputs();
+    }
+})();
+</script>
+{% endblock %}