.. τίτλος: STP/RSTP Convergence Simulator
.. γυμνοσάλιαγκας: stp-convergence-simulator
.. ημερομηνία: 26-03-2026 10:00:00 UTC
.. ετικέτες: networking, stp, rstp, spanning-tree, simulator, tool
.. κατηγορία: Εργαλεία
.. σύνδεσμος:
.. περιγραφή: Διαδραστικός προσομοιωτής σύγκλισης STP και RSTP - οπτικοποιήστε την εκλογή γέφυρας ρίζας, τις καταστάσεις θύρας και τις αλλαγές τοπολογίας με κινούμενα διαγράμματα
.. τύπος: κείμενο
<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">
══════════════════════════════ ══════════════════════════════
         HEADER / ΔΙΑΜΟΡΦΩΣΗ
    ══════════════════════════════ ══════════════════════════════
<div class="calc-header">
<h2>Προσομοιωτής σύγκλισης STP / RSTP</h2>
<p>Δημιουργήστε μια τοπολογία δικτύου, εκτελέστε STP ή RSTP και επιθεωρήστε την εκλογή γέφυρας ρίζας, τις καταστάσεις θύρας και το χρονοδιάγραμμα σύγκλισης.</p>
Επιλογέας λειτουργίας πρωτοκόλλου
<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>
Προσθήκη φόρμας διακόπτη
<div style="margin-top: 20px;">
<div style="color: white; font-weight: 600; font-size: 15px; margin-bottom: 10px;">Προσθήκη διακόπτη</div>
<div class="form-grid">
<div class="form-group">
<label for="swName">Εναλλαγή ονόματος</label>
<input id="swName" maxlength="20" placeholder="e.g. SW1" type="text"/>
</div>
<div class="form-group">
<label for="swPriority">Προτεραιότητα Γέφυρας</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 (προεπιλογή)</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 (τελευταίοι 4 εξαγωνικοί χαρακτήρες)</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()">+ Προσθήκη διακόπτη</button>
</div>
</div>
</div>
Προσθήκη φόρμας συνδέσμου
<div style="margin-top: 18px;">
<div style="color: white; font-weight: 600; font-size: 15px; margin-bottom: 10px;">Προσθήκη συνδέσμου</div>
<div class="form-grid">
<div class="form-group">
<label for="lkSrc">Διακόπτης πηγής</label>
<select id="lkSrc"></select>
</div>
<div class="form-group">
<label for="lkDst">Διακόπτης προορισμού</label>
<select id="lkDst"></select>
</div>
<div class="form-group">
<label for="lkCost">Κόστος διαδρομής</label>
<select id="lkCost">
<option value="2">2 (10 Gbps)</option>
<option value="4">4 (1 Gbps)</option>
<option selected="" value="19">19 (100 Mbps)</option>
<option value="100">100 (10 Mbps)</option>
<option value="250">250 (4 Mbps)</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()">+ Προσθήκη συνδέσμου</button>
</div>
</div>
</div>
Σενάριο αποτυχίας
<div style="margin-top: 18px;">
<div class="scenario-bar">
<label for="scenarioSelect">Σενάριο αποτυχίας:</label>
<select id="scenarioSelect">
<option value="">-- Κανένα (κανονική τοπολογία) --</option>
<option value="link_down">Σύνδεση κάτω (κατάργηση συνδέσμου)</option>
<option value="priority_change">Αλλαγή προτεραιότητας (κατώτερη προτεραιότητα ρίζας)</option>
<option value="new_switch">Προστέθηκε νέος διακόπτης</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;">Εφαρμόζω</button>
</div>
</div>
<button class="submit-btn" onclick="runSTP()">Εκτελέστε το STP Convergence</button>
<div class="help-text">
<strong>Ακρο:</strong>Προσθέστε τουλάχιστον 3 διακόπτες με περιττούς συνδέσμους (τρίγωνο ή δακτύλιο) για να δείτε μπλοκαρισμένες θύρες.
            Φορτώστε μια προεπιλογή με το κουμπί παρακάτω ή δημιουργήστε τη δική σας τοπολογία.</div>
Προκαθορισμένες τοπολογίες
<div style="display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;">
<button class="btn btn-secondary btn-sm" onclick="loadPreset('triangle')">Φόρτωση: Τρίγωνο</button>
<button class="btn btn-secondary btn-sm" onclick="loadPreset('ring4')">Φόρτωση: 4-δακτύλιος διακόπτη</button>
<button class="btn btn-secondary btn-sm" onclick="loadPreset('star')">Φόρτωση: Αστέρι</button>
<button class="btn btn-secondary btn-sm" onclick="loadPreset('mesh')">Φόρτωση: Mesh (6 SW)</button>
<button class="btn btn-danger btn-sm" onclick="clearTopology()">Εκκαθάριση όλων</button>
</div>
</div>/.calc-header
══════════════════════════════ ══════════════════════════════
         ΤΡΕΧΟΥΣΑ ΤΟΠΟΛΟΓΙΑ ΚΑΤΑΛΟΓΟΣ
    ══════════════════════════════ ══════════════════════════════
<div class="result-section show" id="topologyListSection">
<div class="section-header blue">
<h3>Τρέχουσα Τοπολογία</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;">Διακόπτες</div>
<ul class="switch-list" id="switchList">
<li style="color:#888; font-size:13px; padding:6px 0;">Δεν έχουν προστεθεί ακόμη διακόπτες.</li>
</ul>
</div>
<div>
<div style="font-weight:600; margin-bottom:8px; color:#E65100;">Εδαφος διά παιγνίδι γκολφ</div>
<ul class="link-list" id="linkList">
<li style="color:#888; font-size:13px; padding:6px 0;">Δεν έχουν προστεθεί ακόμα σύνδεσμοι.</li>
</ul>
</div>
</div>
<div class="msg msg-error" id="topoError" style="display:none;"></div>
</div>
</div>
══════════════════════════════ ══════════════════════════════
         ΟΠΤΙΚΟΠΟΙΗΣΗ ΤΟΠΟΛΟΓΙΑΣ
    ══════════════════════════════ ══════════════════════════════
<div class="result-section" id="vizSection">
<div class="section-header blue">
<h3>Διάγραμμα Τοπολογίας</h3>
</div>
<div class="section-content" style="padding:15px;">
<div id="cy-container">
<div id="cy"></div>
</div>
Θρύλος
<div class="legend" style="margin-top:12px;">
<div class="legend-item"><div class="legend-dot" style="background:#FFC107;"></div>Root Bridge</div>
<div class="legend-item"><div class="legend-dot" style="background:#4CAF50;"></div>Λιμάνι προώθησης</div>
<div class="legend-item"><div class="legend-dot" style="background:#f44336;"></div>Θύρα αποκλεισμού / απόρριψης</div>
<div class="legend-item"><div class="legend-dot" style="background:#2196F3;"></div>Θύρα ρίζας</div>
<div class="legend-item"><div class="legend-dot" style="background:#9C27B0;"></div>Καθορισμένο Λιμάνι</div>
<div class="legend-item" style="font-size:12px; color:#888;">Διακεκομμένη γραμμή = αποκλεισμένος σύνδεσμος</div>
</div>
</div>
</div>
══════════════════════════════ ══════════════════════════════
         ΕΚΛΟΓΗ ΡΙΖΙΚΗΣ ΓΕΦΥΡΑΣ
    ══════════════════════════════ ══════════════════════════════
<div class="result-section" id="rootSection">
<div class="section-header">
<h3>Εκλογή Root Bridge</h3>
</div>
<div class="section-content" id="rootContent"></div>
</div>
══════════════════════════════ ══════════════════════════════
         ΠΟΛΙΤΕΙΑ
    ══════════════════════════════ ══════════════════════════════
<div class="result-section" id="portSection">
<div class="section-header">
<h3>Λιμενικά κράτη</h3>
</div>
<div class="section-content" id="portContent"></div>
</div>
══════════════════════════════ ══════════════════════════════
         ΕΠΙΘΕΩΡΗΤΗΣ BPDU
    ══════════════════════════════ ══════════════════════════════
<div class="result-section" id="bpduSection">
<div class="section-header orange">
<h3>Επιθεωρητής BPDU</h3>
</div>
<div class="section-content" id="bpduContent"></div>
</div>
══════════════════════════════ ══════════════════════════════
         ΧΡΟΝΟΔΙΑΓΡΑΜΜΑ ΣΥΓΚΛΙΣΗΣ
    ══════════════════════════════ ══════════════════════════════
<div class="result-section" id="timelineSection">
<div class="section-header purple">
<h3>Χρονοδιάγραμμα σύγκλισης</h3>
</div>
<div class="section-content" id="timelineContent"></div>
</div>
══════════════════════════════ ══════════════════════════════
         ΕΝΝΟΙΕΣ STP
    ══════════════════════════════ ══════════════════════════════
<div class="result-section show" id="conceptSection">
<div class="section-header" style="background:linear-gradient(135deg,#546E7A 0%,#37474F 100%);">
<h3>Έννοιες STP / RSTP</h3>
</div>
<div class="section-content">
<div class="concept-grid">
<div class="concept-card">
<h4>Εκλογή Root Bridge</h4>
<p>Ο διακόπτης με το χαμηλότερο Bridge ID κερδίζει. Bridge ID = Priority (προεπιλογή 32768) + διεύθυνση MAC. Οι δεσμοί προτεραιότητας πηγαίνουν σε αριθμητικά χαμηλότερο MAC. Μόνο μία γέφυρα ρίζας ανά VLAN.</p>
</div>
<div class="concept-card">
<h4>Θύρα ρίζας</h4>
<p>Κάθε μεταγωγέας χωρίς ρίζα επιλέγει μία θύρα ρίζας — τη θύρα με το χαμηλότερο αθροιστικό κόστος διαδρομής προς τη γέφυρα ρίζας. Οι δεσμοί διακόπτονται από το αναγνωριστικό γειτονικής γέφυρας και μετά το αναγνωριστικό θύρας.</p>
</div>
<div class="concept-card">
<h4>Καθορισμένο Λιμάνι</h4>
<p>Κάθε τμήμα δικτύου έχει ακριβώς μια Προσδιορισμένη θύρα — τη θύρα που προσφέρει την καλύτερη (χαμηλού κόστους) διαδρομή προς τη ρίζα. Όλες οι θύρες στη γέφυρα ρίζας έχουν καθοριστεί.</p>
</div>
<div class="concept-card">
<h4>Αποκλεισμένες / Απόρριψη θυρών</h4>
<p>Οποιαδήποτε θύρα δεν είναι ούτε ρίζα ούτε καθορισμένη θύρα μπλοκάρεται (STP) ή απορρίπτεται (RSTP). Αυτά διακόπτουν τους βρόχους Layer-2 διατηρώντας μια τοπολογία χωρίς βρόχο.</p>
</div>
<div class="concept-card rstp">
<h4>Θύρες άκρων RSTP (802.1w).</h4>
<p>Οι θύρες άκρων RSTP συνδέονται με τερματικούς κεντρικούς υπολογιστές και όχι με άλλους διακόπτες. Μεταβαίνουν αμέσως στο Forwarding (χωρίς καθυστέρηση ακρόασης/μάθησης), που ισοδυναμεί με τη δυνατότητα PortFast του STP.</p>
</div>
<div class="concept-card rstp">
<h4>Ταχύτητα σύγκλισης RSTP</h4>
<p>Η σύγκλιση STP διαρκεί 30–50 δευτερόλεπτα (Listening 15s + Learning 15s ανά θύρα). Το RSTP χρησιμοποιεί μια χειραψία Πρότασης/Συμφωνίας, που συγκλίνει σε λιγότερο από 2 δευτερόλεπτα ανά άλμα.</p>
</div>
<div class="concept-card">
<h4>Κόστος διαδρομής (IEEE 802.1D)</h4>
<p>10 Gbps = 2, 1 Gbps = 4, 100 Mbps = 19, 10 Mbps = 100, 1,5 Mbps = 1000. Χαμηλότερο κόστος = προτιμώμενη διαδρομή. Root bridge διαφημίζει κόστος 0? κάθε hop προσθέτει το κόστος του λιμανιού του.</p>
</div>
<div class="concept-card">
<h4>BPDU (Μονάδα δεδομένων πρωτοκόλλου γέφυρας)</h4>
<p>Τα BPDU φέρουν: Root Bridge ID, Root Path Cost, Sender Bridge ID, Port ID και χρονοδιακόπτες. Το Root Bridge δημιουργεί BPDU κάθε Hello Time (2 δευτερόλεπτα). Άλλες γέφυρες τα αναμεταδίδουν εξερχόμενα σε καθορισμένα λιμάνια.</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>