.. titel: STP/RSTP-convergentiesimulator
.. naaktslak: stp-convergentie-simulator
.. datum: 26-03-2026 10:00:00 UTC
.. tags: netwerken, stp, rstp, spanning-tree, simulator, tool
.. categorie: Gereedschap
.. link:
.. beschrijving: Interactieve STP- en RSTP-convergentiesimulator - visualiseer rootbridge-verkiezing, poortstatussen en topologieveranderingen met geanimeerde diagrammen
.. typ: tekst
<style>
    * {
        box-sizing: border-box;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 0;
    }

    .calc-container {
        max-width: 900px;
        margin: 20px auto;
        padding: 20px;
    }

    /* ── Header ── */
    .calc-header {
        margin-bottom: 30px;
        padding: 25px;
        background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        color: white;
    }

    .calc-header h2 {
        margin-top: 0;
        color: white;
        font-size: 28px;
        margin-bottom: 10px;
    }

    .calc-header p {
        margin: 10px 0 20px 0;
        opacity: 0.95;
        font-size: 15px;
    }

    /* ── Form controls inside header ── */
    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin-top: 20px;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .form-group label {
        font-weight: 600;
        font-size: 14px;
        color: white;
    }

    .form-group input,
    .form-group select {
        padding: 12px;
        font-size: 15px;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 6px;
        background: rgba(255,255,255,0.95);
        transition: all 0.3s ease;
        font-family: 'Courier New', monospace;
    }

    .form-group input:focus,
    .form-group select:focus {
        outline: none;
        border-color: #4CAF50;
        background: white;
        box-shadow: 0 0 0 3px rgba(76,175,80,0.15);
    }

    .form-group select {
        cursor: pointer;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    /* ── Buttons ── */
    .btn {
        padding: 12px 24px;
        font-size: 15px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .btn-primary {
        background: #4CAF50;
        color: white;
    }

    .btn-primary:hover {
        background: #45a049;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.25);
    }

    .btn-primary:active {
        background: #3d8b40;
        transform: translateY(0);
    }

    .btn-secondary {
        background: rgba(255,255,255,0.2);
        color: white;
        border: 2px solid rgba(255,255,255,0.4);
    }

    .btn-secondary:hover {
        background: rgba(255,255,255,0.3);
        transform: translateY(-1px);
    }

    .btn-danger {
        background: #f44336;
        color: white;
    }

    .btn-danger:hover {
        background: #d32f2f;
        transform: translateY(-1px);
    }

    .btn-sm {
        padding: 6px 14px;
        font-size: 13px;
    }

    .submit-btn {
        padding: 14px 35px;
        font-size: 16px;
        background: #4CAF50;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        margin-top: 15px;
        width: 100%;
    }

    .submit-btn:hover {
        background: #45a049;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    .submit-btn:active {
        background: #3d8b40;
        transform: translateY(0);
    }

    /* ── Result sections ── */
    .result-section {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-top: 20px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        display: none;
    }

    .result-section.show {
        display: block;
    }

    .result-section:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .section-header {
        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
        color: white;
        padding: 15px 20px;
    }

    .section-header h3 {
        margin: 0;
        font-size: 18px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .section-header.blue {
        background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    }

    .section-header.orange {
        background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
    }

    .section-header.purple {
        background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
    }

    .section-content {
        padding: 20px;
        background: #fafafa;
    }

    .data-row {
        display: flex;
        margin: 10px 0;
        padding: 10px;
        background: white;
        border-radius: 4px;
        border-left: 3px solid #4CAF50;
        align-items: flex-start;
    }

    .data-label {
        font-weight: bold;
        color: #555;
        min-width: 200px;
        flex-shrink: 0;
        font-size: 14px;
        padding-top: 1px;
    }

    .data-value {
        color: #333;
        font-family: 'Courier New', monospace;
        word-break: break-word;
        font-size: 15px;
    }

    .data-value.highlight {
        color: #1976D2;
        font-weight: bold;
        font-size: 18px;
    }

    /* ── Help text ── */
    .help-text {
        margin-top: 15px;
        font-size: 14px;
        color: rgba(255,255,255,0.9);
        background: rgba(0,0,0,0.1);
        padding: 10px 15px;
        border-radius: 4px;
    }

    .help-text strong {
        color: white;
    }

    /* ── Topology canvas area ── */
    #cy-container {
        width: 100%;
        height: 380px;
        background: #1a2332;
        border-radius: 8px;
        border: 2px solid #2d3d52;
        position: relative;
        overflow: hidden;
    }

    #cy {
        width: 100%;
        height: 100%;
    }

    /* ── Switch list ── */
    .switch-list,
    .link-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .switch-item,
    .link-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        background: white;
        border-radius: 5px;
        margin-bottom: 6px;
        border-left: 4px solid #2196F3;
        font-size: 14px;
        flex-wrap: wrap;
    }

    .switch-item .sw-id {
        font-family: 'Courier New', monospace;
        font-weight: bold;
        color: #1976D2;
        min-width: 40px;
    }

    .switch-item .sw-name {
        flex: 1;
        font-weight: 600;
    }

    .switch-item .sw-priority,
    .switch-item .sw-mac {
        font-family: 'Courier New', monospace;
        font-size: 13px;
        color: #666;
    }

    .link-item {
        border-left-color: #FF9800;
    }

    .link-item .lk-label {
        flex: 1;
        font-family: 'Courier New', monospace;
        font-size: 13px;
    }

    .tag {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: bold;
    }

    .tag-root    { background: #FFF3CD; color: #856404; }
    .tag-fwd     { background: #D4EDDA; color: #155724; }
    .tag-blk     { background: #F8D7DA; color: #721C24; }
    .tag-disc    { background: #D1ECF1; color: #0C5460; }
    .tag-lrn     { background: #CCE5FF; color: #004085; }
    .tag-edge    { background: #E2D9F3; color: #491F8A; }

    /* ── Port state table ── */
    .port-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
        margin-top: 8px;
    }

    .port-table th {
        background: #E3F2FD;
        color: #1565C0;
        padding: 8px 12px;
        text-align: left;
        font-weight: 600;
        border-bottom: 2px solid #BBDEFB;
    }

    .port-table td {
        padding: 7px 12px;
        border-bottom: 1px solid #f0f0f0;
        font-family: 'Courier New', monospace;
        font-size: 13px;
    }

    .port-table tr:last-child td {
        border-bottom: none;
    }

    .port-table tr:nth-child(even) td {
        background: #f8f9fa;
    }

    /* ── Timeline ── */
    .timeline {
        position: relative;
        padding-left: 28px;
    }

    .timeline::before {
        content: '';
        position: absolute;
        left: 8px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #BBDEFB;
    }

    .timeline-event {
        position: relative;
        margin-bottom: 12px;
        background: white;
        border-radius: 6px;
        padding: 10px 14px;
        border: 1px solid #e8e8e8;
        font-size: 13px;
    }

    .timeline-event::before {
        content: '';
        position: absolute;
        left: -24px;
        top: 12px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #2196F3;
        border: 2px solid white;
        box-shadow: 0 0 0 2px #2196F3;
    }

    .timeline-event.root-election::before  { background: #FFC107; box-shadow: 0 0 0 2px #FFC107; }
    .timeline-event.port-change::before    { background: #4CAF50; box-shadow: 0 0 0 2px #4CAF50; }
    .timeline-event.port-blocked::before   { background: #f44336; box-shadow: 0 0 0 2px #f44336; }
    .timeline-event.convergence::before    { background: #9C27B0; box-shadow: 0 0 0 2px #9C27B0; }

    .timeline-event .te-time {
        font-weight: bold;
        color: #1976D2;
        font-family: 'Courier New', monospace;
        margin-right: 8px;
    }

    .timeline-event .te-desc {
        color: #333;
    }

    /* ── BPDU Inspector ── */
    .bpdu-panel {
        background: #0d1117;
        border-radius: 6px;
        padding: 15px;
        font-family: 'Courier New', monospace;
        font-size: 13px;
        color: #79c0ff;
        max-height: 300px;
        overflow-y: auto;
    }

    .bpdu-row {
        display: flex;
        gap: 8px;
        margin-bottom: 3px;
        line-height: 1.5;
    }

    .bpdu-field {
        color: #d2a8ff;
        min-width: 180px;
        flex-shrink: 0;
    }

    .bpdu-val {
        color: #a5f3fc;
    }

    .bpdu-val.root { color: #fbbf24; }
    .bpdu-val.bridge { color: #86efac; }

    /* ── Scenario selector ── */
    .scenario-bar {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    .scenario-bar label {
        font-weight: 600;
        font-size: 14px;
        color: white;
    }

    .scenario-bar select {
        padding: 8px 12px;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 6px;
        background: rgba(255,255,255,0.95);
        font-size: 14px;
        cursor: pointer;
        flex: 1;
        min-width: 200px;
    }

    /* ── Legend ── */
    .legend {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 8px;
        font-size: 13px;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .legend-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    /* ── Inline error / info messages ── */
    .msg {
        padding: 10px 14px;
        border-radius: 6px;
        font-size: 14px;
        margin-top: 8px;
    }

    .msg-error {
        background: #FFEBEE;
        color: #C62828;
        border-left: 4px solid #f44336;
    }

    .msg-info {
        background: #E3F2FD;
        color: #1565C0;
        border-left: 4px solid #2196F3;
    }

    .msg-success {
        background: #E8F5E9;
        color: #1B5E20;
        border-left: 4px solid #4CAF50;
    }

    /* ── STP concept panel ── */
    .concept-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .concept-card {
        background: white;
        border-radius: 6px;
        padding: 14px;
        border-top: 3px solid #2196F3;
        font-size: 13px;
    }

    .concept-card h4 {
        margin: 0 0 6px 0;
        color: #1976D2;
        font-size: 14px;
    }

    .concept-card p {
        margin: 0;
        color: #555;
        line-height: 1.5;
    }

    .concept-card.rstp {
        border-top-color: #9C27B0;
    }

    .concept-card.rstp h4 {
        color: #7B1FA2;
    }

    /* ── Mode toggle ── */
    .mode-toggle {
        display: flex;
        gap: 0;
        margin-top: 15px;
        background: rgba(0,0,0,0.15);
        border-radius: 6px;
        padding: 4px;
    }

    .mode-btn {
        flex: 1;
        padding: 8px 16px;
        border: none;
        background: transparent;
        color: rgba(255,255,255,0.7);
        cursor: pointer;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 600;
        transition: all 0.2s ease;
    }

    .mode-btn.active {
        background: white;
        color: #1976D2;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

    /* ── Pulse animation for root bridge ── */
    @keyframes rootPulse {
        0%   { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
        70%  { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
        100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
    }

    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .fade-in-up {
        animation: fadeInUp 0.35s ease both;
    }

    /* ── Responsive ── */
    @media (max-width: 768px) {
        .form-grid {
            grid-template-columns: 1fr;
        }

        .data-row {
            flex-direction: column;
        }

        .data-label {
            margin-bottom: 4px;
            min-width: auto;
        }

        .concept-grid {
            grid-template-columns: 1fr;
        }

        #cy-container {
            height: 280px;
        }

        .port-table {
            font-size: 12px;
        }

        .port-table th,
        .port-table td {
            padding: 6px 8px;
        }

        .mode-btn {
            padding: 8px 8px;
            font-size: 13px;
        }

        .scenario-bar {
            flex-direction: column;
            align-items: stretch;
        }

        .scenario-bar label {
            display: block;
        }
    }

    @media (max-width: 480px) {
        .calc-header {
            padding: 18px;
        }

        .calc-header h2 {
            font-size: 22px;
        }

        .switch-item,
        .link-item {
            flex-wrap: wrap;
        }
    }
</style>
<div class="calc-container">
═════════════════════════════ ══════════════════════════════
         KOP / CONFIGURATIE
    ═════════════════════════════ ══════════════════════════════
<div class="calc-header">
<h2>STP / RSTP-convergentiesimulator</h2>
<p>Bouw een netwerktopologie, voer STP of RSTP uit en inspecteer rootbridge-verkiezing, poortstatussen en convergentietijdlijn.</p>
Keuzeschakelaar protocolmodus
<div aria-label="Protocol mode" class="mode-toggle" role="group">
<button class="mode-btn active" id="btnSTP" onclick="setMode('STP')">STP (802.1D)</button>
<button class="mode-btn" id="btnRSTP" onclick="setMode('RSTP')">RSTP (802,1w)</button>
</div>
Schakelformulier toevoegen
<div style="margin-top: 20px;">
<div style="color: white; font-weight: 600; font-size: 15px; margin-bottom: 10px;">Schakelaar toevoegen</div>
<div class="form-grid">
<div class="form-group">
<label for="swName">Naam wijzigen</label>
<input id="swName" maxlength="20" placeholder="e.g. SW1" type="text"/>
</div>
<div class="form-group">
<label for="swPriority">Brugprioriteit</label>
<select id="swPriority">
<option value="4096">4096</option>
<option value="8192">8192</option>
<option value="12288">12288</option>
<option value="16384">16384</option>
<option value="20480">20480</option>
<option value="24576">24576</option>
<option value="28672">28672</option>
<option selected="" value="32768">32768 (standaard)</option>
<option value="36864">36864</option>
<option value="40960">40960</option>
<option value="45056">45056</option>
<option value="49152">49152</option>
<option value="53248">53248</option>
<option value="57344">57344</option>
<option value="61440">61440</option>
</select>
</div>
<div class="form-group">
<label for="swMac">MAC-adres (laatste 4 hexadecimale tekens)</label>
<input id="swMac" maxlength="4" pattern="[0-9a-fA-F]{0,4}" placeholder="auto" type="text"/>
</div>
<div class="form-group" style="justify-content: flex-end;">
<label> </label>
<button class="btn btn-secondary" onclick="addSwitch()">+ Schakelaar toevoegen</button>
</div>
</div>
</div>
Linkformulier toevoegen
<div style="margin-top: 18px;">
<div style="color: white; font-weight: 600; font-size: 15px; margin-bottom: 10px;">Koppeling toevoegen</div>
<div class="form-grid">
<div class="form-group">
<label for="lkSrc">Bronschakelaar</label>
<select id="lkSrc"></select>
</div>
<div class="form-group">
<label for="lkDst">Bestemmingsschakelaar</label>
<select id="lkDst"></select>
</div>
<div class="form-group">
<label for="lkCost">Padkosten</label>
<select id="lkCost">
<option value="2">2 (10 Gbps)</option>
<option value="4">4 (1 Gbps)</option>
<option selected="" value="19">19 (100Mbps)</option>
<option value="100">100 (10 Mbps)</option>
<option value="250">250 (4Mbps)</option>
<option value="1000">1000 (1,5 Mbps)</option>
</select>
</div>
<div class="form-group" style="justify-content: flex-end;">
<label> </label>
<button class="btn btn-secondary" onclick="addLink()">+ Link toevoegen</button>
</div>
</div>
</div>
Mislukkingsscenario
<div style="margin-top: 18px;">
<div class="scenario-bar">
<label for="scenarioSelect">Mislukkingsscenario:</label>
<select id="scenarioSelect">
<option value="">-- Geen (normale topologie) --</option>
<option value="link_down">Link omlaag (verwijder een link)</option>
<option value="priority_change">Prioriteitswijziging (lagere hoofdprioriteit)</option>
<option value="new_switch">Nieuwe schakelaar toegevoegd</option>
</select>
<select id="scenarioTarget" style="display:none; flex:1; min-width:150px; padding:8px 12px; border:2px solid rgba(255,255,255,0.3); border-radius:6px; background:rgba(255,255,255,0.95); font-size:14px;"></select>
<button class="btn btn-secondary" id="scenarioApplyBtn" onclick="applyScenario()" style="display:none;">Toepassen</button>
</div>
</div>
<button class="submit-btn" onclick="runSTP()">Voer STP-convergentie uit</button>
<div class="help-text">
<strong>Tip:</strong>Voeg minimaal 3 switches toe met redundante links (driehoek of ring) om geblokkeerde poorten te zien.
            Laad een preset met de onderstaande knop of bouw uw eigen topologie.</div>
Vooraf ingestelde topologieën
<div style="display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;">
<button class="btn btn-secondary btn-sm" onclick="loadPreset('triangle')">Belasting: Driehoek</button>
<button class="btn btn-secondary btn-sm" onclick="loadPreset('ring4')">Belasting: Ring met 4 schakelaars</button>
<button class="btn btn-secondary btn-sm" onclick="loadPreset('star')">Lading: ster</button>
<button class="btn btn-secondary btn-sm" onclick="loadPreset('mesh')">Belasting: gaas (6 SW)</button>
<button class="btn btn-danger btn-sm" onclick="clearTopology()">Alles wissen</button>
</div>
</div>/.calc-header
═════════════════════════════ ══════════════════════════════
         HUIDIGE TOPOLOGIELIJST
    ═════════════════════════════ ══════════════════════════════
<div class="result-section show" id="topologyListSection">
<div class="section-header blue">
<h3>Huidige topologie</h3>
</div>
<div class="section-content">
<div style="display:grid; grid-template-columns:1fr 1fr; gap:15px;">
<div>
<div style="font-weight:600; margin-bottom:8px; color:#1976D2;">Schakelaars</div>
<ul class="switch-list" id="switchList">
<li style="color:#888; font-size:13px; padding:6px 0;">Er zijn nog geen schakelaars toegevoegd.</li>
</ul>
</div>
<div>
<div style="font-weight:600; margin-bottom:8px; color:#E65100;">Koppelingen</div>
<ul class="link-list" id="linkList">
<li style="color:#888; font-size:13px; padding:6px 0;">Er zijn nog geen links toegevoegd.</li>
</ul>
</div>
</div>
<div class="msg msg-error" id="topoError" style="display:none;"></div>
</div>
</div>
═════════════════════════════ ══════════════════════════════
         TOPOLOGIE VISUALISATIE
    ═════════════════════════════ ══════════════════════════════
<div class="result-section" id="vizSection">
<div class="section-header blue">
<h3>Topologiediagram</h3>
</div>
<div class="section-content" style="padding:15px;">
<div id="cy-container">
<div id="cy"></div>
</div>
Legende
<div class="legend" style="margin-top:12px;">
<div class="legend-item"><div class="legend-dot" style="background:#FFC107;"></div>Wortelbrug</div>
<div class="legend-item"><div class="legend-dot" style="background:#4CAF50;"></div>Doorstuurpoort</div>
<div class="legend-item"><div class="legend-dot" style="background:#f44336;"></div>Poort blokkeren/weggooien</div>
<div class="legend-item"><div class="legend-dot" style="background:#2196F3;"></div>Root-poort</div>
<div class="legend-item"><div class="legend-dot" style="background:#9C27B0;"></div>Aangewezen haven</div>
<div class="legend-item" style="font-size:12px; color:#888;">Onderbroken lijn = geblokkeerde link</div>
</div>
</div>
</div>
═════════════════════════════ ══════════════════════════════
         WORTELBRUG VERKIEZING
    ═════════════════════════════ ══════════════════════════════
<div class="result-section" id="rootSection">
<div class="section-header">
<h3>Rootbridge-verkiezing</h3>
</div>
<div class="section-content" id="rootContent"></div>
</div>
═════════════════════════════ ══════════════════════════════
         HAVENSTATEN
    ═════════════════════════════ ══════════════════════════════
<div class="result-section" id="portSection">
<div class="section-header">
<h3>Havenstaten</h3>
</div>
<div class="section-content" id="portContent"></div>
</div>
═════════════════════════════ ══════════════════════════════
         BPDU-INSPECTEUR
    ═════════════════════════════ ══════════════════════════════
<div class="result-section" id="bpduSection">
<div class="section-header orange">
<h3>BPDU-inspecteur</h3>
</div>
<div class="section-content" id="bpduContent"></div>
</div>
═════════════════════════════ ══════════════════════════════
         CONVERGENTIE TIJDLIJN
    ═════════════════════════════ ══════════════════════════════
<div class="result-section" id="timelineSection">
<div class="section-header purple">
<h3>Convergentie tijdlijn</h3>
</div>
<div class="section-content" id="timelineContent"></div>
</div>
═════════════════════════════ ══════════════════════════════
         STP-CONCEPTEN
    ═════════════════════════════ ══════════════════════════════
<div class="result-section show" id="conceptSection">
<div class="section-header" style="background:linear-gradient(135deg,#546E7A 0%,#37474F 100%);">
<h3>STP / RSTP-concepten</h3>
</div>
<div class="section-content">
<div class="concept-grid">
<div class="concept-card">
<h4>Rootbridge-verkiezing</h4>
<p>De schakelaar met de laagste Bridge-ID wint. Bridge-ID = Prioriteit (standaard 32768) + MAC-adres. Banden op prioriteit gaan naar een numeriek lagere MAC. Slechts één rootbridge per VLAN.</p>
</div>
<div class="concept-card">
<h4>Root-poort</h4>
<p>Elke niet-rootswitch kiest één rootpoort: de poort met de laagste cumulatieve padkosten naar de rootbridge. De banden worden verbroken door de Bridge-ID van de buurman en vervolgens door de poort-ID.</p>
</div>
<div class="concept-card">
<h4>Aangewezen haven</h4>
<p>Elk netwerksegment heeft precies één aangewezen poort: de poort die het beste (laagste kosten) pad naar de root biedt. Alle poorten op de rootbridge zijn aangewezen.</p>
</div>
<div class="concept-card">
<h4>Geblokkeerde/verwijderende poorten</h4>
<p>Elke poort die noch een rootpoort, noch een aangewezen poort is, wordt geblokkeerd (STP) of verwijderd (RSTP). Deze breken Layer-2-lussen terwijl een lusvrije topologie behouden blijft.</p>
</div>
<div class="concept-card rstp">
<h4>RSTP (802.1w) Edge-poorten</h4>
<p>RSTP-randpoorten maken verbinding met eindhosts, niet met andere switches. Ze schakelen onmiddellijk over naar Doorsturen (geen luister-/leervertraging), wat overeenkomt met de PortFast-functie van STP.</p>
</div>
<div class="concept-card rstp">
<h4>RSTP-convergentiesnelheid</h4>
<p>STP-convergentie duurt 30-50 seconden (15 seconden luisteren + 15 seconden leren per poort). RSTP maakt gebruik van een voorstel/overeenkomst-handshake, die in minder dan 2 seconden per hop samenkomt.</p>
</div>
<div class="concept-card">
<h4>Padkosten (IEEE 802.1D)</h4>
<p>10 Gbps = 2, 1 Gbps = 4, 100 Mbps = 19, 10 Mbps = 100, 1,5 Mbps = 1000. Lagere kosten = voorkeurspad. Rootbridge adverteert met kosten 0; elke hop voegt zijn havenkosten toe.</p>
</div>
<div class="concept-card">
<h4>BPDU (Bridge Protocol-gegevenseenheid)</h4>
<p>BPDU's bevatten: Root Bridge ID, Root Path Cost, Sender Bridge ID, Port ID en timers. Rootbridge genereert elke Hello Time (2s) BPDU's. Andere bruggen geven ze door via aangewezen havens.</p>
</div>
</div>
</div>
</div>
</div>/.calc-container
Cytoscape.js CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.29.2/cytoscape.min.js"></script>
<script>
/* ================================================================
   STP / RSTP CONVERGENCE SIMULATOR
   Implements:
     - Root bridge election (priority + MAC)
     - Root port selection (lowest cost to root)
     - Designated port selection per link segment
     - Blocking / Discarding port identification
     - Convergence timeline with STP vs RSTP timing
     - Cytoscape.js visualization
     - Preset topologies and failure scenarios
   ================================================================ */

'use strict';

/* ── Global State ─────────────────────────────────────────────── */
let stpMode = 'STP';  // 'STP' | 'RSTP'

/** @type {{ id: string, name: string, priority: number, mac: string }[]} */
let switches = [];

/** @type {{ id: string, source: string, target: string, cost: number, disabled: boolean }[]} */
let links = [];

let lastResult = null;   // STP computation result
let cyInstance = null;   // Cytoscape instance
let swCounter = 0;       // Auto-increment for switch IDs

/* ── Utility ──────────────────────────────────────────────────── */

/**
 * Parse a hex MAC string (4-12 chars) to a comparable integer.
 * We only need relative ordering, so we use the last 48 bits.
 * @param {string} mac
 * @returns {number}
 */
function macToInt(mac) {
    // Pad to 12 hex chars
    const padded = mac.toLowerCase().padStart(12, '0');
    // Use Number() on the full hex; for 12 hex digits this fits in a JS float safely up to 2^53
    return parseInt(padded, 16);
}

/**
 * Format a MAC address from a compact 12-char hex string.
 * @param {string} mac
 * @returns {string}
 */
function formatMac(mac) {
    const padded = mac.toLowerCase().padStart(12, '0');
    return padded.match(/.{2}/g).join(':');
}

/**
 * Generate a random 4-hex-char suffix for a switch MAC.
 * @returns {string}
 */
function randomMacSuffix() {
    return Math.floor(Math.random() * 0x10000).toString(16).padStart(4, '0');
}

/**
 * Build a full 12-char MAC from a 4-char suffix.
 * Prefix is deterministic (aa:bb:cc) so that root bridge election is predictable
 * for preset topologies.
 * @param {string} suffix  4 hex chars
 * @returns {string}
 */
function buildMac(suffix) {
    return 'aabbcc' + suffix.toLowerCase().padStart(4, '0');
}

/**
 * Bridge ID for comparison: [priority, macInt].
 * Lower Bridge ID wins the election.
 * @param {{ priority: number, mac: string }} sw
 * @returns {[number, number]}
 */
function bridgeId(sw) {
    return [sw.priority, macToInt(sw.mac)];
}

/**
 * Compare two Bridge IDs.
 * @returns {-1|0|1}
 */
function compareBridgeId(a, b) {
    if (a[0] !== b[0]) return a[0] < b[0] ? -1 : 1;
    if (a[1] !== b[1]) return a[1] < b[1] ? -1 : 1;
    return 0;
}

/* ── Mode toggle ──────────────────────────────────────────────── */
function setMode(mode) {
    stpMode = mode;
    document.getElementById('btnSTP').classList.toggle('active',  mode === 'STP');
    document.getElementById('btnRSTP').classList.toggle('active', mode === 'RSTP');
}

/* ── Switch management ────────────────────────────────────────── */
function addSwitch() {
    const nameInput = document.getElementById('swName');
    const priorityInput = document.getElementById('swPriority');
    const macInput = document.getElementById('swMac');

    const name = nameInput.value.trim() || `SW${swCounter + 1}`;
    const priority = parseInt(priorityInput.value, 10);
    const macSuffix = macInput.value.trim() || randomMacSuffix();

    // Validate MAC suffix (0–4 hex chars)
    if (!/^[0-9a-fA-F]{0,4}$/.test(macInput.value.trim()) && macInput.value.trim() !== '') {
        showTopoError('MAC suffix must be 0–4 hex characters (e.g. "00a1").');
        return;
    }

    // Detect duplicate name
    if (switches.find(s => s.name.toLowerCase() === name.toLowerCase())) {
        showTopoError(`A switch named "${name}" already exists. Choose a different name.`);
        return;
    }

    swCounter++;
    const id = `sw${swCounter}`;
    const mac = buildMac(macSuffix);

    switches.push({ id, name, priority, mac });

    // Reset fields
    nameInput.value = '';
    macInput.value = '';
    priorityInput.value = '32768';

    clearTopoError();
    renderTopologyList();
    updateLinkSelectors();
}

function removeSwitch(id) {
    switches = switches.filter(s => s.id !== id);
    // Remove all links that referenced this switch
    links = links.filter(l => l.source !== id && l.target !== id);
    renderTopologyList();
    updateLinkSelectors();
    hideResults();
}

/* ── Link management ──────────────────────────────────────────── */
function addLink() {
    const src = document.getElementById('lkSrc').value;
    const dst = document.getElementById('lkDst').value;
    const cost = parseInt(document.getElementById('lkCost').value, 10);

    if (!src || !dst) {
        showTopoError('Add at least 2 switches before adding a link.');
        return;
    }
    if (src === dst) {
        showTopoError('Source and destination must be different switches.');
        return;
    }

    // Prevent duplicate links
    const dupLink = links.find(l =>
        (l.source === src && l.target === dst) ||
        (l.source === dst && l.target === src)
    );
    if (dupLink) {
        showTopoError('A link between these two switches already exists.');
        return;
    }

    const id = `lk${links.length + 1}_${src}_${dst}`;
    links.push({ id, source: src, target: dst, cost, disabled: false });

    clearTopoError();
    renderTopologyList();
    hideResults();
}

function removeLink(id) {
    links = links.filter(l => l.id !== id);
    renderTopologyList();
    hideResults();
}

/* ── Render topology list ─────────────────────────────────────── */
function renderTopologyList() {
    const swListEl  = document.getElementById('switchList');
    const lkListEl  = document.getElementById('linkList');

    // Switches
    if (switches.length === 0) {
        swListEl.innerHTML = '<li style="color:#888; font-size:13px; padding:6px 0;">No switches added yet.</li>';
    } else {
        swListEl.innerHTML = switches.map(sw => `
            <li class="switch-item">
                <span class="sw-id">${sw.id}</span>
                <span class="sw-name">${escHtml(sw.name)}</span>
                <span class="sw-priority">P:${sw.priority}</span>
                <span class="sw-mac">${formatMac(sw.mac)}</span>
                <button class="btn btn-danger btn-sm" onclick="removeSwitch('${sw.id}')" aria-label="Remove ${escHtml(sw.name)}">x</button>
            </li>
        `).join('');
    }

    // Links
    if (links.length === 0) {
        lkListEl.innerHTML = '<li style="color:#888; font-size:13px; padding:6px 0;">No links added yet.</li>';
    } else {
        lkListEl.innerHTML = links.map(lk => {
            const srcSw = switches.find(s => s.id === lk.source);
            const dstSw = switches.find(s => s.id === lk.target);
            const srcName = srcSw ? srcSw.name : lk.source;
            const dstName = dstSw ? dstSw.name : lk.target;
            return `
                <li class="link-item${lk.disabled ? ' disabled-link' : ''}">
                    <span class="lk-label">${escHtml(srcName)} &harr; ${escHtml(dstName)} (cost ${lk.cost}${lk.disabled ? ', DISABLED' : ''})</span>
                    <button class="btn btn-danger btn-sm" onclick="removeLink('${lk.id}')" aria-label="Remove link">x</button>
                </li>
            `;
        }).join('');
    }
}

function updateLinkSelectors() {
    const srcEl = document.getElementById('lkSrc');
    const dstEl = document.getElementById('lkDst');
    const opts = switches.map(sw => `<option value="${sw.id}">${escHtml(sw.name)}</option>`).join('');
    srcEl.innerHTML = opts || '<option value="">-- no switches --</option>';
    dstEl.innerHTML = opts || '<option value="">-- no switches --</option>';

    // Default dst to second switch to reduce friction
    if (switches.length >= 2) {
        dstEl.value = switches[1].id;
    }
}

/* ── Scenario handling ────────────────────────────────────────── */
document.getElementById('scenarioSelect').addEventListener('change', function () {
    const val = this.value;
    const targetEl = document.getElementById('scenarioTarget');
    const applyBtn = document.getElementById('scenarioApplyBtn');

    if (!val) {
        targetEl.style.display = 'none';
        applyBtn.style.display = 'none';
        return;
    }

    targetEl.style.display = 'block';
    applyBtn.style.display = 'block';

    if (val === 'link_down') {
        targetEl.innerHTML = links.filter(l => !l.disabled).map(lk => {
            const src = switches.find(s => s.id === lk.source);
            const dst = switches.find(s => s.id === lk.target);
            return `<option value="${lk.id}">${src ? src.name : lk.source} ↔ ${dst ? dst.name : lk.target}</option>`;
        }).join('') || '<option value="">No links available</option>';
    } else if (val === 'priority_change') {
        targetEl.innerHTML = switches.map(sw =>
            `<option value="${sw.id}">${escHtml(sw.name)} (currently ${sw.priority})</option>`
        ).join('') || '<option value="">No switches available</option>';
    } else if (val === 'new_switch') {
        targetEl.innerHTML = '<option value="auto">Auto-generate new switch</option>';
    }
});

function applyScenario() {
    const scenario = document.getElementById('scenarioSelect').value;
    const targetId  = document.getElementById('scenarioTarget').value;

    if (scenario === 'link_down') {
        const lk = links.find(l => l.id === targetId);
        if (lk) {
            lk.disabled = true;
            renderTopologyList();
            hideResults();
        }
    } else if (scenario === 'priority_change') {
        const sw = switches.find(s => s.id === targetId);
        if (sw) {
            sw.priority = 4096; // Give this switch the lowest priority → becomes root
            renderTopologyList();
            hideResults();
        }
    } else if (scenario === 'new_switch') {
        swCounter++;
        const id = `sw${swCounter}`;
        const mac = buildMac(randomMacSuffix());
        switches.push({ id, name: `SW${swCounter}`, priority: 32768, mac });

        // Auto-connect to last existing switch
        if (switches.length >= 2) {
            const prev = switches[switches.length - 2];
            links.push({ id: `lk${links.length + 1}_${prev.id}_${id}`, source: prev.id, target: id, cost: 19, disabled: false });
        }

        renderTopologyList();
        updateLinkSelectors();
        hideResults();
    }

    // Refresh scenario target options after applying
    document.getElementById('scenarioSelect').dispatchEvent(new Event('change'));
}

/* ── Preset topologies ────────────────────────────────────────── */
function clearTopology() {
    switches = [];
    links = [];
    swCounter = 0;
    lastResult = null;

    renderTopologyList();
    updateLinkSelectors();
    hideResults();

    if (cyInstance) {
        cyInstance.destroy();
        cyInstance = null;
    }
}

function loadPreset(name) {
    clearTopology();

    const presets = {
        // Classic 3-switch ring with one blocked port
        triangle: {
            switches: [
                { name: 'SW1', priority: 32768, mac: '0001' },
                { name: 'SW2', priority: 32768, mac: '0002' },
                { name: 'SW3', priority: 32768, mac: '0003' },
            ],
            links: [
                { src: 0, dst: 1, cost: 19 },
                { src: 1, dst: 2, cost: 19 },
                { src: 0, dst: 2, cost: 19 },
            ]
        },
        // 4-switch ring — two redundant paths exist
        ring4: {
            switches: [
                { name: 'Core1',  priority: 4096,  mac: '0001' },
                { name: 'Dist1',  priority: 32768, mac: '0002' },
                { name: 'Access1',priority: 32768, mac: '0003' },
                { name: 'Access2',priority: 32768, mac: '0004' },
            ],
            links: [
                { src: 0, dst: 1, cost: 4  },
                { src: 1, dst: 2, cost: 19 },
                { src: 2, dst: 3, cost: 19 },
                { src: 3, dst: 0, cost: 4  },
                { src: 1, dst: 3, cost: 19 },
            ]
        },
        // Star — root in the center, no loops
        star: {
            switches: [
                { name: 'Core',  priority: 4096,  mac: '0001' },
                { name: 'SW-A',  priority: 32768, mac: '00a0' },
                { name: 'SW-B',  priority: 32768, mac: '00b0' },
                { name: 'SW-C',  priority: 32768, mac: '00c0' },
                { name: 'SW-D',  priority: 32768, mac: '00d0' },
            ],
            links: [
                { src: 0, dst: 1, cost: 4  },
                { src: 0, dst: 2, cost: 4  },
                { src: 0, dst: 3, cost: 19 },
                { src: 0, dst: 4, cost: 19 },
            ]
        },
        // Full mesh of 6 switches — multiple blocked ports
        mesh: {
            switches: [
                { name: 'SW1', priority: 4096,  mac: '0001' },
                { name: 'SW2', priority: 32768, mac: '0002' },
                { name: 'SW3', priority: 32768, mac: '0003' },
                { name: 'SW4', priority: 32768, mac: '0004' },
                { name: 'SW5', priority: 32768, mac: '0005' },
                { name: 'SW6', priority: 32768, mac: '0006' },
            ],
            links: [
                { src: 0, dst: 1, cost: 4  },
                { src: 0, dst: 2, cost: 4  },
                { src: 0, dst: 3, cost: 19 },
                { src: 1, dst: 2, cost: 19 },
                { src: 1, dst: 4, cost: 19 },
                { src: 2, dst: 5, cost: 19 },
                { src: 3, dst: 4, cost: 19 },
                { src: 4, dst: 5, cost: 19 },
                { src: 3, dst: 5, cost: 19 },
            ]
        }
    };

    const preset = presets[name];
    if (!preset) return;

    preset.switches.forEach(sw => {
        swCounter++;
        const id = `sw${swCounter}`;
        switches.push({ id, name: sw.name, priority: sw.priority, mac: buildMac(sw.mac) });
    });

    preset.links.forEach((lk, i) => {
        const srcSw = switches[lk.src];
        const dstSw = switches[lk.dst];
        links.push({
            id: `lk${i + 1}_${srcSw.id}_${dstSw.id}`,
            source: srcSw.id,
            target: dstSw.id,
            cost: lk.cost,
            disabled: false
        });
    });

    clearTopoError();
    renderTopologyList();
    updateLinkSelectors();
}

/* ── STP Algorithm ────────────────────────────────────────────── */

/**
 * Run the full STP/RSTP algorithm on the current topology.
 * Returns a result object with root, portStates, convergenceTimeline, bpdus.
 */
function computeSTP() {
    const activeSwitches = switches;
    const activeLinks = links.filter(l => !l.disabled);

    if (activeSwitches.length < 2) {
        return { error: 'Add at least 2 switches to run STP.' };
    }

    // Step 1: Root bridge election — lowest Bridge ID wins
    let root = activeSwitches[0];
    for (let i = 1; i < activeSwitches.length; i++) {
        if (compareBridgeId(bridgeId(activeSwitches[i]), bridgeId(root)) < 0) {
            root = activeSwitches[i];
        }
    }

    // Step 2: Dijkstra — compute lowest cost path from every switch to root
    //   costToRoot[switchId] = { cost: number, via: linkId | null }
    const costToRoot = {};
    activeSwitches.forEach(sw => costToRoot[sw.id] = { cost: Infinity, via: null, nextHop: null });
    costToRoot[root.id] = { cost: 0, via: null, nextHop: null };

    // Simple Dijkstra over adjacency list
    const visited = new Set();
    const queue = [{ id: root.id, cost: 0 }];

    while (queue.length > 0) {
        // Pop lowest cost
        queue.sort((a, b) => a.cost - b.cost);
        const { id: current, cost: currentCost } = queue.shift();

        if (visited.has(current)) continue;
        visited.add(current);

        // Expand neighbors through active links
        for (const lk of activeLinks) {
            let neighbor = null;
            if (lk.source === current) neighbor = lk.target;
            else if (lk.target === current) neighbor = lk.source;
            if (!neighbor) continue;

            const newCost = currentCost + lk.cost;
            if (newCost < costToRoot[neighbor].cost) {
                costToRoot[neighbor].cost = newCost;
                costToRoot[neighbor].via = lk.id;
                costToRoot[neighbor].nextHop = current;
                queue.push({ id: neighbor, cost: newCost });
            }
        }
    }

    // Step 3: Assign port roles
    // portRoles: Map of { portKey → role }
    //   portKey = `${linkId}:${switchId}` (each end of a link is a separate "port")
    //   roles: 'root' | 'designated' | 'blocking' | 'discarding' (RSTP) | 'edge'
    const portRoles  = {};   // portKey → role
    const portStates = {};   // portKey → state (STP state machine)

    // Helper: portKey for one end of a link
    const portKey = (linkId, switchId) => `${linkId}:${switchId}`;

    // Mark root bridge's ports — all are designated
    for (const lk of activeLinks) {
        if (lk.source === root.id) {
            portRoles[portKey(lk.id, root.id)] = 'designated';
        }
        if (lk.target === root.id) {
            portRoles[portKey(lk.id, root.id)] = 'designated';
        }
    }

    // For every non-root switch, mark its Root Port
    for (const sw of activeSwitches) {
        if (sw.id === root.id) continue;

        const viaLink = costToRoot[sw.id].via;
        if (viaLink) {
            portRoles[portKey(viaLink, sw.id)] = 'root';
        }
    }

    // For each link that doesn't already have both ends assigned,
    // determine Designated Port on each segment:
    //   The Designated Port is the end whose switch has the lowest cost to root.
    //   Ties broken by sender Bridge ID.
    for (const lk of activeLinks) {
        const srcKey = portKey(lk.id, lk.source);
        const dstKey = portKey(lk.id, lk.target);

        const srcSw = activeSwitches.find(s => s.id === lk.source);
        const dstSw = activeSwitches.find(s => s.id === lk.target);

        if (!srcSw || !dstSw) continue;

        const srcRole = portRoles[srcKey];
        const dstRole = portRoles[dstKey];

        // If one end is root port, the other end must be designated
        if (srcRole === 'root' && !dstRole) {
            portRoles[dstKey] = 'designated';
        } else if (dstRole === 'root' && !srcRole) {
            portRoles[srcKey] = 'designated';
        } else if (!srcRole && !dstRole) {
            // Neither end is root — pick designated by lowest cost to root
            const srcCost = costToRoot[lk.source].cost;
            const dstCost = costToRoot[lk.target].cost;

            let designatedOnSrc;
            if (srcCost < dstCost) {
                designatedOnSrc = true;
            } else if (dstCost < srcCost) {
                designatedOnSrc = false;
            } else {
                // Tie on cost — use Bridge ID to break
                designatedOnSrc = compareBridgeId(bridgeId(srcSw), bridgeId(dstSw)) < 0;
            }

            if (designatedOnSrc) {
                portRoles[srcKey] = 'designated';
                portRoles[dstKey] = 'blocking';
            } else {
                portRoles[dstKey] = 'designated';
                portRoles[srcKey] = 'blocking';
            }
        }

        // Fallback: both ends assigned (e.g., both designated from previous pass) — block the higher-cost one
        if (portRoles[srcKey] === 'designated' && portRoles[dstKey] === 'designated') {
            const srcCost = costToRoot[lk.source].cost;
            const dstCost = costToRoot[lk.target].cost;
            if (srcCost < dstCost) {
                portRoles[dstKey] = 'blocking';
            } else if (dstCost < srcCost) {
                portRoles[srcKey] = 'blocking';
            } else {
                // Tie — block higher Bridge ID
                if (compareBridgeId(bridgeId(srcSw), bridgeId(dstSw)) > 0) {
                    portRoles[srcKey] = 'blocking';
                } else {
                    portRoles[dstKey] = 'blocking';
                }
            }
        }
    }

    // Step 4: Map port roles to STP/RSTP states
    for (const [key, role] of Object.entries(portRoles)) {
        if (stpMode === 'RSTP') {
            // RSTP: discarding | learning | forwarding
            switch (role) {
                case 'root':        portStates[key] = 'forwarding';  break;
                case 'designated':  portStates[key] = 'forwarding';  break;
                case 'blocking':    portStates[key] = 'discarding';  break;
                default:            portStates[key] = 'discarding';
            }
        } else {
            // STP: blocking | listening | learning | forwarding
            switch (role) {
                case 'root':        portStates[key] = 'forwarding';  break;
                case 'designated':  portStates[key] = 'forwarding';  break;
                case 'blocking':    portStates[key] = 'blocking';    break;
                default:            portStates[key] = 'blocking';
            }
        }
    }

    // Step 5: Build BPDU details (what root's BPDU looks like, and what each switch relays)
    const bpdus = activeSwitches.map(sw => {
        const isRoot = sw.id === root.id;
        return {
            sender: sw,
            isRoot,
            rootBridgeId: { priority: root.priority, mac: root.mac },
            rootPathCost: costToRoot[sw.id].cost,
            senderBridgeId: { priority: sw.priority, mac: sw.mac },
            helloTime: 2,
            maxAge: 20,
            forwardDelay: stpMode === 'RSTP' ? 0 : 15,
        };
    });

    // Step 6: Build convergence timeline
    const timeline = buildConvergenceTimeline(root, activeSwitches, activeLinks, portRoles, costToRoot);

    return {
        root,
        costToRoot,
        portRoles,
        portStates,
        bpdus,
        timeline,
        activeLinks,
    };
}

/**
 * Generate a convergence timeline for STP or RSTP.
 * Returns an array of { time, type, description } events.
 */
function buildConvergenceTimeline(root, activeSwitches, activeLinks, portRoles, costToRoot) {
    const events = [];
    const isRSTP = stpMode === 'RSTP';

    // T=0: Topology discovered — all ports start in blocking/discarding
    events.push({ time: 0,    type: 'init',         description: 'Topology discovered. All ports initialized to ' + (isRSTP ? 'Discarding' : 'Blocking') + '.' });

    // T=0: Root bridge election
    events.push({ time: 0,    type: 'root-election', description: `Root bridge elected: ${root.name} (Priority ${root.priority}, MAC ${formatMac(root.mac)}).` });

    if (isRSTP) {
        // RSTP: Proposal/Agreement handshake — 1–3 seconds per hop
        const maxHops = Math.max(...activeSwitches.map(sw => {
            // Estimate hop count from root based on cost
            if (sw.id === root.id) return 0;
            const lk = activeLinks.find(l => l.id === costToRoot[sw.id].via);
            return lk ? 1 : 0; // simplified: each switch is at most 1–N hops
        }), 0);

        events.push({ time: 0,    type: 'port-change',  description: `Root bridge ${root.name}: All ports transition to Forwarding (Designated).` });
        events.push({ time: 1,    type: 'port-change',  description: 'RSTP Proposal/Agreement handshake begins on all point-to-point links.' });
        events.push({ time: 1,    type: 'port-change',  description: 'Root Ports on non-root switches transition to Forwarding (Agreement received).' });

        // Show each blocked port
        const blockingPorts = Object.entries(portRoles).filter(([,role]) => role === 'blocking');
        if (blockingPorts.length > 0) {
            events.push({ time: 1, type: 'port-blocked', description: `${blockingPorts.length} port(s) remain Discarding (alternate/backup ports).` });
        }

        events.push({ time: 2,    type: 'convergence',  description: `RSTP convergence COMPLETE. Total time: ~2 seconds (vs ~${activeSwitches.length * 15 + 15}s for STP).` });

    } else {
        // STP: Classic 50-second convergence
        events.push({ time: 0,    type: 'port-change',  description: `Root bridge ${root.name}: All ports immediately enter Forwarding state.` });
        events.push({ time: 2,    type: 'port-change',  description: 'Root bridge begins sending Hello BPDUs every 2 seconds.' });
        events.push({ time: 2,    type: 'port-change',  description: 'Non-root switches receive BPDUs, elect Root Ports, begin Listening state.' });

        // Mark blocked ports
        const blockingPorts = Object.entries(portRoles).filter(([,role]) => role === 'blocking');
        events.push({ time: 2,    type: 'port-blocked',  description: `${blockingPorts.length} port(s) identified as redundant, transition to Blocking state.` });

        // Listening → Learning (15 seconds)
        events.push({ time: 2,    type: 'port-change',  description: 'Designated Ports enter Listening state (15-second Forward Delay starts).' });
        events.push({ time: 17,   type: 'port-change',  description: 'Listening → Learning: ports now populate MAC address tables (another 15-second delay).' });

        // Learning → Forwarding (another 15 seconds)
        events.push({ time: 32,   type: 'port-change',  description: 'Learning → Forwarding: Designated and Root Ports begin forwarding frames.' });
        events.push({ time: 32,   type: 'convergence',  description: `STP convergence COMPLETE. Total time: ~32 seconds (compare: RSTP ~2 seconds).` });
    }

    return events.sort((a, b) => a.time - b.time);
}

/* ── Run and display ──────────────────────────────────────────── */
function runSTP() {
    clearTopoError();

    if (switches.length < 2) {
        showTopoError('Add at least 2 switches before running STP.');
        return;
    }
    if (links.filter(l => !l.disabled).length < 1) {
        showTopoError('Add at least 1 active link between switches.');
        return;
    }

    const result = computeSTP();
    if (result.error) {
        showTopoError(result.error);
        return;
    }

    lastResult = result;

    renderVisualization(result);
    renderRootSection(result);
    renderPortSection(result);
    renderBpduSection(result);
    renderTimelineSection(result);

    // Scroll to visualization
    document.getElementById('vizSection').scrollIntoView({ behavior: 'smooth', block: 'start' });
}

/* ── Visualization (Cytoscape.js) ────────────────────────────── */
function renderVisualization(result) {
    const { root, portRoles, activeLinks } = result;

    const cyNodes = switches.map(sw => {
        const isRoot = sw.id === root.id;
        return {
            data: {
                id: sw.id,
                label: sw.name + (isRoot ? '\n[ROOT]' : ''),
                isRoot,
                priority: sw.priority,
                mac: formatMac(sw.mac),
            }
        };
    });

    // Build edges, annotating each with the port roles of both ends
    const cyEdges = links.map(lk => {
        const srcKey = `${lk.id}:${lk.source}`;
        const dstKey = `${lk.id}:${lk.target}`;
        const srcRole = portRoles[srcKey] || 'unknown';
        const dstRole = portRoles[dstKey] || 'unknown';
        const isBlocked = lk.disabled || srcRole === 'blocking' || dstRole === 'blocking' ||
                          srcRole === 'discarding' || dstRole === 'discarding';
        return {
            data: {
                id: lk.id,
                source: lk.source,
                target: lk.target,
                label: `cost ${lk.cost}`,
                srcRole,
                dstRole,
                isBlocked,
                disabled: lk.disabled,
            }
        };
    });

    // Destroy previous instance
    if (cyInstance) {
        cyInstance.destroy();
        cyInstance = null;
    }

    // Build Cytoscape stylesheet
    const cyStyle = [
        {
            selector: 'node',
            style: {
                'background-color':   '#1565C0',
                'label':              'data(label)',
                'color':              '#ffffff',
                'text-valign':        'center',
                'text-halign':        'center',
                'font-size':          '11px',
                'font-family':        'Segoe UI, Tahoma, sans-serif',
                'width':              '70px',
                'height':             '70px',
                'shape':              'rectangle',
                'border-width':       '2px',
                'border-color':       '#90CAF9',
                'text-wrap':          'wrap',
                'text-max-width':     '65px',
                'padding':            '10px',
            }
        },
        {
            selector: 'node[?isRoot]',
            style: {
                'background-color': '#F57F17',
                'border-color':     '#FFD600',
                'border-width':     '3px',
                'font-weight':      'bold',
            }
        },
        {
            selector: 'edge',
            style: {
                'line-color':         '#4FC3F7',
                'target-arrow-color': '#4FC3F7',
                'width':              '2px',
                'label':              'data(label)',
                'font-size':          '10px',
                'color':              '#B0BEC5',
                'text-background-color': '#1a2332',
                'text-background-opacity': 0.8,
                'text-background-padding': '2px',
                'curve-style':        'bezier',
            }
        },
        {
            selector: 'edge[?isBlocked]',
            style: {
                'line-style':    'dashed',
                'line-color':    '#ef5350',
                'opacity':       '0.6',
                'width':         '1.5px',
            }
        },
        {
            selector: 'edge[?disabled]',
            style: {
                'line-style':    'dotted',
                'line-color':    '#555',
                'opacity':       '0.35',
            }
        }
    ];

    // Pick layout based on switch count
    const layoutName = switches.length <= 6 ? 'circle' : 'cose';

    try {
        cyInstance = window.cytoscape({
            container: document.getElementById('cy'),
            elements: { nodes: cyNodes, edges: cyEdges },
            style: cyStyle,
            layout: {
                name: layoutName,
                padding: 40,
                animate: false,
            },
            userZoomingEnabled: true,
            userPanningEnabled: true,
            boxSelectionEnabled: false,
            autoungrabify: false,
        });

        // Show tooltip on node click
        cyInstance.on('tap', 'node', function (evt) {
            const sw = evt.target.data();
            const swData = switches.find(s => s.id === sw.id);
            if (!swData || !lastResult) return;

            const myLinks = links.filter(l => l.source === sw.id || l.target === sw.id);
            const portInfo = myLinks.map(lk => {
                const key = `${lk.id}:${sw.id}`;
                const role  = lastResult.portRoles[key]  || 'n/a';
                const state = lastResult.portStates[key] || 'n/a';
                const peer  = switches.find(s => s.id === (lk.source === sw.id ? lk.target : lk.source));
                return `Port to ${peer ? peer.name : '?'}: ${role} / ${state}`;
            }).join('\n');

            alert(`${swData.name}\nPriority: ${swData.priority}\nMAC: ${formatMac(swData.mac)}\n\n${portInfo}`);
        });

    } catch (e) {
        console.error('Cytoscape render error:', e);
    }

    showSection('vizSection');
}

/* ── Root bridge section ──────────────────────────────────────── */
function renderRootSection(result) {
    const { root, costToRoot, activeLinks } = result;

    // Sort candidates by Bridge ID for the election table
    const candidates = [...switches].sort((a, b) => compareBridgeId(bridgeId(a), bridgeId(b)));

    const rows = candidates.map((sw, idx) => {
        const isRoot = sw.id === root.id;
        const cost   = costToRoot[sw.id] ? costToRoot[sw.id].cost : '?';
        return `
        <tr>
            <td>${escHtml(sw.name)}</td>
            <td>${sw.priority}</td>
            <td>${formatMac(sw.mac)}</td>
            <td>${sw.priority + ' + ' + formatMac(sw.mac)}</td>
            <td>${cost === 0 ? '0 (root)' : cost}</td>
            <td>${isRoot ? '<span class="tag tag-root">ROOT BRIDGE</span>' : (idx === 0 ? '' : '')}</td>
        </tr>`;
    }).join('');

    const html = `
        <div class="data-row">
            <div class="data-label">Root Bridge</div>
            <div class="data-value highlight">${escHtml(root.name)}</div>
        </div>
        <div class="data-row">
            <div class="data-label">Bridge Priority</div>
            <div class="data-value">${root.priority}</div>
        </div>
        <div class="data-row">
            <div class="data-label">MAC Address</div>
            <div class="data-value">${formatMac(root.mac)}</div>
        </div>
        <div class="data-row">
            <div class="data-label">Bridge ID</div>
            <div class="data-value">${root.priority}.${formatMac(root.mac)}</div>
        </div>
        <div class="data-row">
            <div class="data-label">Active Links</div>
            <div class="data-value">${activeLinks.length} (${links.filter(l => l.disabled).length} disabled)</div>
        </div>
        <div style="margin-top:16px; font-weight:600; color:#1B5E20; font-size:14px; margin-bottom:8px;">Election Ranking (all candidates)</div>
        <div style="overflow-x:auto;">
            <table class="port-table">
                <thead>
                    <tr>
                        <th>Switch</th>
                        <th>Priority</th>
                        <th>MAC</th>
                        <th>Bridge ID</th>
                        <th>Cost to Root</th>
                        <th>Result</th>
                    </tr>
                </thead>
                <tbody>${rows}</tbody>
            </table>
        </div>
        <div class="msg msg-info" style="margin-top:12px;">
            <strong>Why ${escHtml(root.name)} won:</strong> It has the lowest Bridge ID (Priority ${root.priority} + MAC ${formatMac(root.mac)}).
            Ties on priority are broken by numerically lower MAC address.
        </div>
    `;

    document.getElementById('rootContent').innerHTML = html;
    showSection('rootSection');
}

/* ── Port states section ──────────────────────────────────────── */
function renderPortSection(result) {
    const { portRoles, portStates, activeLinks } = result;

    const rows = [];

    for (const sw of switches) {
        const myLinks = activeLinks.filter(l => l.source === sw.id || l.target === sw.id);
        if (myLinks.length === 0) {
            rows.push(`
            <tr>
                <td>${escHtml(sw.name)}</td>
                <td>—</td>
                <td><span class="tag tag-disc">no active links</span></td>
                <td><span class="tag tag-disc">discarding</span></td>
            </tr>`);
            continue;
        }

        for (const lk of myLinks) {
            const peer = switches.find(s => s.id === (lk.source === sw.id ? lk.target : lk.source));
            const key   = `${lk.id}:${sw.id}`;
            const role  = portRoles[key]  || 'unknown';
            const state = portStates[key] || 'unknown';

            const roleTag  = tagForRole(role);
            const stateTag = tagForState(state);

            rows.push(`
            <tr>
                <td>${escHtml(sw.name)}</td>
                <td>to ${escHtml(peer ? peer.name : '?')} (cost ${lk.cost})</td>
                <td>${roleTag}</td>
                <td>${stateTag}</td>
            </tr>`);
        }
    }

    // Also show disabled links
    const disabledLinks = links.filter(l => l.disabled);
    for (const lk of disabledLinks) {
        const srcSw = switches.find(s => s.id === lk.source);
        const dstSw = switches.find(s => s.id === lk.target);
        rows.push(`
        <tr>
            <td>${escHtml(srcSw ? srcSw.name : lk.source)}</td>
            <td>to ${escHtml(dstSw ? dstSw.name : lk.target)} [LINK DOWN]</td>
            <td><span class="tag tag-disc">disabled</span></td>
            <td><span class="tag tag-disc">disabled</span></td>
        </tr>`);
    }

    const blockCount = Object.values(portRoles).filter(r => r === 'blocking').length;
    const fwdCount   = Object.values(portRoles).filter(r => r === 'designated' || r === 'root').length;

    const html = `
        <div style="display:flex; gap:15px; flex-wrap:wrap; margin-bottom:16px;">
            <div class="msg msg-success" style="flex:1; min-width:150px; margin:0;">
                <strong>${fwdCount}</strong> ports forwarding
            </div>
            <div class="msg msg-error" style="flex:1; min-width:150px; margin:0;">
                <strong>${blockCount}</strong> port(s) ${stpMode === 'RSTP' ? 'discarding (alternate)' : 'blocking (redundant)'}
            </div>
        </div>
        <div style="overflow-x:auto;">
            <table class="port-table">
                <thead>
                    <tr>
                        <th>Switch</th>
                        <th>Port (Link)</th>
                        <th>Role</th>
                        <th>State (${stpMode})</th>
                    </tr>
                </thead>
                <tbody>${rows.join('')}</tbody>
            </table>
        </div>
    `;

    document.getElementById('portContent').innerHTML = html;
    showSection('portSection');
}

function tagForRole(role) {
    switch (role) {
        case 'root':        return '<span class="tag tag-fwd">Root</span>';
        case 'designated':  return '<span class="tag" style="background:#E8EAF6;color:#283593;">Designated</span>';
        case 'blocking':    return '<span class="tag tag-blk">Blocking</span>';
        case 'discarding':  return '<span class="tag tag-disc">Discarding</span>';
        default:            return `<span class="tag">${escHtml(role)}</span>`;
    }
}

function tagForState(state) {
    switch (state) {
        case 'forwarding':  return '<span class="tag tag-fwd">Forwarding</span>';
        case 'blocking':    return '<span class="tag tag-blk">Blocking</span>';
        case 'discarding':  return '<span class="tag tag-disc">Discarding</span>';
        case 'listening':   return '<span class="tag tag-lrn">Listening</span>';
        case 'learning':    return '<span class="tag tag-lrn">Learning</span>';
        case 'disabled':    return '<span class="tag" style="background:#eee;color:#666;">Disabled</span>';
        default:            return `<span class="tag">${escHtml(state)}</span>`;
    }
}

/* ── BPDU Inspector ───────────────────────────────────────────── */
function renderBpduSection(result) {
    const { bpdus } = result;

    // Show the root's BPDU first, then one sample from each non-root switch
    const rootBpdu = bpdus.find(b => b.isRoot);
    const nonRootBpdus = bpdus.filter(b => !b.isRoot);

    let html = '';

    if (rootBpdu) {
        html += `<div style="font-weight:600; color:#E65100; margin-bottom:8px; font-size:14px;">Root Bridge BPDU (${escHtml(rootBpdu.sender.name)} → all Designated Ports)</div>`;
        html += renderBpduBlock(rootBpdu, true);
    }

    if (nonRootBpdus.length > 0) {
        html += `<div style="font-weight:600; color:#37474F; margin-top:16px; margin-bottom:8px; font-size:14px;">Non-Root Switch BPDUs (relayed on Designated Ports)</div>`;
        html += nonRootBpdus.map(b => renderBpduBlock(b, false)).join('');
    }

    document.getElementById('bpduContent').innerHTML = html;
    showSection('bpduSection');
}

function renderBpduBlock(bpdu, isRoot) {
    const rootId  = `${bpdu.rootBridgeId.priority}.${formatMac(bpdu.rootBridgeId.mac)}`;
    const sendId  = `${bpdu.senderBridgeId.priority}.${formatMac(bpdu.senderBridgeId.mac)}`;
    const flagByte = isRoot ? '0x3C (TC+TCA)' : '0x00';
    const msgAge  = isRoot ? '0' : '(increments per hop)';

    return `
    <div class="bpdu-panel" style="margin-bottom:12px;">
        <div class="bpdu-row"><span class="bpdu-field">Sender:</span>          <span class="bpdu-val bridge">${escHtml(bpdu.sender.name)}</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Protocol ID:</span>     <span class="bpdu-val">0x0000 (802.1D)</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Version:</span>         <span class="bpdu-val">${stpMode === 'RSTP' ? '0x02 (RSTP)' : '0x00 (STP)'}</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Type:</span>            <span class="bpdu-val">${stpMode === 'RSTP' ? '0x02 (RST BPDU)' : '0x00 (Config BPDU)'}</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Flags:</span>           <span class="bpdu-val">${flagByte}</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Root Bridge ID:</span>  <span class="bpdu-val root">${rootId}</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Root Path Cost:</span>  <span class="bpdu-val root">${bpdu.rootPathCost}</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Sender Bridge ID:</span><span class="bpdu-val bridge">${sendId}</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Port ID:</span>         <span class="bpdu-val">0x8001</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Message Age:</span>     <span class="bpdu-val">${msgAge}</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Max Age:</span>         <span class="bpdu-val">${bpdu.maxAge}s</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Hello Time:</span>      <span class="bpdu-val">${bpdu.helloTime}s</span></div>
        <div class="bpdu-row"><span class="bpdu-field">Forward Delay:</span>   <span class="bpdu-val">${bpdu.forwardDelay}s${bpdu.forwardDelay === 0 ? ' (RSTP skips Listening/Learning)' : ''}</span></div>
    </div>`;
}

/* ── Timeline section ─────────────────────────────────────────── */
function renderTimelineSection(result) {
    const { timeline } = result;

    const timeUnit = stpMode === 'RSTP' ? 's' : 's';

    const events = timeline.map(ev => {
        let cssClass = '';
        if (ev.type === 'root-election') cssClass = 'root-election';
        else if (ev.type === 'port-change') cssClass = 'port-change';
        else if (ev.type === 'port-blocked') cssClass = 'port-blocked';
        else if (ev.type === 'convergence') cssClass = 'convergence';

        return `
        <div class="timeline-event ${cssClass} fade-in-up">
            <span class="te-time">T+${ev.time}${timeUnit}</span>
            <span class="te-desc">${escHtml(ev.description)}</span>
        </div>`;
    }).join('');

    const convergenceTime = stpMode === 'RSTP' ? '~2 seconds' : '~32 seconds';
    const comparison      = stpMode === 'RSTP'
        ? 'RSTP is ~16x faster than STP for this topology.'
        : 'RSTP (802.1w) would converge this same topology in ~2 seconds.';

    const html = `
        <div class="msg msg-info" style="margin-bottom:16px;">
            <strong>${stpMode} convergence time:</strong> ${convergenceTime}. ${comparison}
        </div>
        <div class="timeline">${events}</div>
    `;

    document.getElementById('timelineContent').innerHTML = html;
    showSection('timelineSection');
}

/* ── Helpers ──────────────────────────────────────────────────── */
function showSection(id) {
    const el = document.getElementById(id);
    if (el) el.classList.add('show', 'fade-in-up');
}

function hideResults() {
    ['vizSection', 'rootSection', 'portSection', 'bpduSection', 'timelineSection'].forEach(id => {
        const el = document.getElementById(id);
        if (el) el.classList.remove('show', 'fade-in-up');
    });
    if (cyInstance) {
        cyInstance.destroy();
        cyInstance = null;
    }
}

function showTopoError(msg) {
    const el = document.getElementById('topoError');
    el.textContent = msg;
    el.style.display = 'block';
}

function clearTopoError() {
    const el = document.getElementById('topoError');
    el.style.display = 'none';
    el.textContent = '';
}

/**
 * Safe HTML escaping for user-supplied strings.
 * @param {string} str
 * @returns {string}
 */
function escHtml(str) {
    const d = document.createElement('div');
    d.appendChild(document.createTextNode(String(str)));
    return d.innerHTML;
}

/* ── Initialise with a default topology ──────────────────────── */
(function init() {
    loadPreset('triangle');
    // Automatically run STP so users see results immediately
    // (deferred until DOM is ready)
    setTimeout(() => {
        runSTP();
    }, 200);
}());
</script>