.. หัวข้อ: CLI Output Parser & Health Analyzer
.. slug: cli-output-parser
.. วันที่: 02-02-2026 14:00:00 UTC
.. แท็ก: ระบบเครือข่าย, การแก้ไขปัญหา, parser, เครื่องวิเคราะห์, เครื่องมือ
..หมวดหมู่ : เครื่องมือ
.. ลิงค์:
.. คำอธิบาย: แยกวิเคราะห์และวิเคราะห์เอาต์พุต CLI ของอุปกรณ์เครือข่ายสำหรับการประเมินสภาพของผู้จำหน่ายหลายราย
.. ประเภท: ข้อความ
<style>
    * {
        box-sizing: border-box;
    }

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

        .calc-header {
            margin-bottom: 30px;
            padding: 25px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 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;
        }

        .input-section {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .section-title {
            margin-top: 0;
            margin-bottom: 20px;
            color: #333;
            border-left: 5px solid #667eea;
            padding-left: 15px;
            font-size: 20px;
        }

        .vendor-selector {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }

        .vendor-btn {
            padding: 10px 20px;
            border: 2px solid #667eea;
            background: white;
            color: #667eea;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

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

        .vendor-btn.active {
            background: #667eea;
            color: white;
        }

        .command-suggestions {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .command-suggestions h3 {
            margin-bottom: 15px;
            color: #333;
        }

        .command-chips {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .command-chip {
            background: white;
            border: 1px solid #dee2e6;
            padding: 8px 16px;
            border-radius: 20px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
            color: inherit;
        }

        .command-chip:hover {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .command-chip:focus {
            outline: none;
            background: #667eea;
            color: white;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
        }

        .command-chip:active {
            transform: scale(0.98);
        }

        .input-area {
            margin-bottom: 20px;
        }

        .input-area label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: #333;
        }

        #cliInput {
            width: 100%;
            min-height: 300px;
            padding: 15px;
            border: 2px solid #ced4da;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            resize: vertical;
            transition: all 0.3s ease;
        }

        #cliInput:focus {
            outline: none;
            border-color: #4CAF50;
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
        }

        .button-group {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
        }

        .btn {
            padding: 12px 30px;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            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.3);
        }

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

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

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

        .results-section {
            display: none;
        }

        .results-section.active {
            display: block;
        }

        .summary-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .summary-card {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            border-left: 5px solid #667eea;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .summary-card.warning {
            border-left-color: #ffc107;
        }

        .summary-card.error {
            border-left-color: #dc3545;
        }

        .summary-card.success {
            border-left-color: #4CAF50;
        }

        .summary-card h3 {
            font-size: 14px;
            color: #6c757d;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .summary-card .value {
            font-size: 32px;
            font-weight: bold;
            color: #333;
        }

        .chassis-visualization {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .chassis-visualization h3 {
            margin-top: 0;
            margin-bottom: 20px;
            color: #333;
            border-left: 5px solid #667eea;
            padding-left: 15px;
            font-size: 20px;
        }

        .chassis-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .slot-row {
            background: white;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 15px;
        }

        .slot-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #dee2e6;
        }

        .slot-title {
            font-weight: bold;
            font-size: 16px;
        }

        .slot-stats {
            font-size: 14px;
            color: #6c757d;
        }

        .ports-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
            gap: 8px;
        }

        .port-box {
            background: #4CAF50;
            color: white;
            padding: 8px;
            border-radius: 6px;
            text-align: center;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }

        .port-box:hover {
            transform: scale(1.1);
            z-index: 10;
        }

        .port-box.warning {
            background: #ffc107;
            color: #000;
        }

        .port-box.error {
            background: #dc3545;
        }

        .port-box.disabled {
            background: #6c757d;
        }

        .port-box.down {
            background: #adb5bd;
        }

        .port-tooltip {
            display: none;
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 100;
            margin-bottom: 5px;
        }

        .port-box:hover .port-tooltip {
            display: block;
        }

        .interface-table {
            margin-top: 30px;
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .interface-table h3 {
            margin-top: 0;
            margin-bottom: 20px;
            color: #333;
            border-left: 5px solid #667eea;
            padding-left: 15px;
            font-size: 20px;
        }

        .interface-table table {
            width: 100%;
            border-collapse: collapse;
            background: white;
        }

        .interface-table th {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            padding: 12px;
            text-align: left;
            font-weight: 600;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .interface-table td {
            padding: 12px;
            border-bottom: 1px solid #dee2e6;
        }

        .interface-table tr:hover {
            background: #f8f9fa;
        }

        .status-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }

        .status-up {
            background: #d4edda;
            color: #155724;
        }

        .status-down {
            background: #f8d7da;
            color: #721c24;
        }

        .status-admin-down {
            background: #d6d8db;
            color: #383d41;
        }

        .error-count {
            color: #dc3545;
            font-weight: bold;
        }

        .filter-controls {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .filter-controls select,
        .filter-controls input {
            padding: 8px 12px;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            font-size: 14px;
        }

        .legend {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            margin-bottom: 20px;
            padding: 15px;
            background: white;
            border-radius: 8px;
        }

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

        .legend-box {
            width: 20px;
            height: 20px;
            border-radius: 4px;
        }

        .export-section {
            margin-top: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .export-section h3 {
            margin-bottom: 15px;
        }

        /* Three-Step Onboarding Wizard */
        .onboarding-wizard {
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }

        .wizard-steps {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            position: relative;
        }

        .wizard-steps::before {
            content: '';
            position: absolute;
            top: 20px;
            left: 60px;
            right: 60px;
            height: 2px;
            background: #dee2e6;
            z-index: 0;
        }

        .wizard-step {
            flex: 1;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .step-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #dee2e6;
            color: #6c757d;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .wizard-step.active .step-circle {
            background: #667eea;
            color: white;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
        }

        .wizard-step.completed .step-circle {
            background: #4CAF50;
            color: white;
        }

        .wizard-step.completed .step-circle::before {
            content: '✓';
        }

        .step-label {
            font-size: 14px;
            color: #6c757d;
        }

        .wizard-step.active .step-label {
            color: #667eea;
            font-weight: 600;
        }

        .wizard-step.completed .step-label {
            color: #4CAF50;
        }

        .wizard-content {
            min-height: 200px;
        }

        .wizard-section {
            display: none;
        }

        .wizard-section.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }

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

        .wizard-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #dee2e6;
        }

        .sample-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .sample-card {
            background: #f8f9fa;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .sample-card:hover {
            border-color: #667eea;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
        }

        .sample-card:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
        }

        .sample-card img {
            width: 48px;
            height: 48px;
            margin-bottom: 10px;
        }

        .sample-card h4 {
            margin: 10px 0 5px;
            color: #333;
            font-size: 16px;
        }

        .sample-card p {
            color: #666;
            font-size: 13px;
            margin: 0;
        }

        .input-method-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .method-card {
            background: #f8f9fa;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 30px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .method-card:hover {
            border-color: #667eea;
            transform: translateY(-2px);
        }

        .method-card:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
        }

        .method-card.selected {
            border-color: #667eea;
            background: rgba(102, 126, 234, 0.05);
        }

        .method-icon {
            font-size: 48px;
            margin-bottom: 15px;
        }

        .method-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
        }

        .method-desc {
            font-size: 14px;
            color: #666;
        }

        /* Progressive Disclosure */
        .collapsible-section {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            margin-bottom: 20px;
            background: white;
        }

        .accordion-header {
            padding: 15px 20px;
            background: #f8f9fa;
            border-radius: 8px 8px 0 0;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background 0.2s ease;
        }

        .accordion-header:hover {
            background: #e9ecef;
        }

        .accordion-header h3 {
            margin: 0;
            font-size: 18px;
            color: #333;
        }

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

        .section-header h3 {
            margin: 0;
            font-size: 18px;
        }

        .toggle-indicator {
            font-size: 20px;
            transition: transform 0.3s ease;
            color: #667eea;
        }

        .toggle-indicator.open {
            transform: rotate(180deg);
        }

        .section-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .section-content.open {
            max-height: 5000px;
            padding: 20px;
        }

        .health-score-prominent {
            background: white;
            border: 2px solid #dee2e6;
            border-radius: 12px;
            padding: 30px;
            text-align: center;
            margin-bottom: 30px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .health-score-prominent h3 {
            margin-top: 0;
            margin-bottom: 15px;
            color: #333;
        }

        .health-interpretation {
            margin-top: 15px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            font-size: 14px;
            color: #666;
        }

        .view-details-btn {
            margin-top: 15px;
            padding: 10px 20px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: background 0.2s ease;
        }

        .view-details-btn:hover {
            background: #5568d3;
        }

        .view-details-btn:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
        }

        @media (max-width: 768px) {
            .header h1 {
                font-size: 1.8em;
            }

            .summary-cards {
                grid-template-columns: 1fr;
            }

            .ports-grid {
                grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
            }

            /* Minimum touch target size for mobile accessibility */
            .btn, button, .command-chip, .vendor-btn {
                min-height: 44px;
                min-width: 44px;
            }
        }

        .health-score {
            font-size: 48px;
            font-weight: bold;
            text-align: center;
            margin: 20px 0;
        }

        .health-score.excellent {
            color: #4CAF50;
        }

        .health-score.good {
            color: #5cb85c;
        }

        .health-score.fair {
            color: #ffc107;
        }

        .health-score.poor {
            color: #fd7e14;
        }

        .health-score.critical {
            color: #dc3545;
        }

        .transceiver-info {
            margin-top: 30px;
        }

        .transceiver-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 15px;
        }

        .transceiver-card {
            background: white;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 15px;
        }

        .transceiver-card.warning {
            border-color: #ffc107;
            background: #fff8e1;
        }

        .transceiver-card.error {
            border-color: #dc3545;
            background: #ffebee;
        }

        .optical-power {
            display: flex;
            justify-content: space-between;
            margin: 10px 0;
            font-size: 14px;
        }

        .optical-power .label {
            color: #6c757d;
        }

        .optical-power .value {
            font-weight: bold;
        }

        /* Missing classes previously provided by external stylesheet */
        .how-to-use {
            border-left: 4px solid #bee5eb;
            background: #f0f8ff;
            border-radius: 8px;
            margin-bottom: 20px;
            overflow: hidden;
        }

        .how-to-use-header {
            display: flex;
            justify-content: space-between;
            padding: 12px 15px;
            cursor: pointer;
            font-weight: 600;
            color: #333;
            user-select: none;
        }

        .how-to-use-header:hover {
            background: rgba(0,0,0,0.04);
        }

        .how-to-use-content {
            padding: 0 15px 15px;
            display: none;
        }

        .toggle-icon {
            font-size: 14px;
            color: #667eea;
        }

        .alert {
            padding: 12px 16px;
            border-radius: 6px;
            margin-bottom: 15px;
        }

        .alert-info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }

        .alert-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .session-controls {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 15px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 6px;
        }

        .session-status {
            font-size: 13px;
            color: #6c757d;
        }

        .btn-small {
            padding: 6px 12px;
            font-size: 13px;
        }

        .tooltip-trigger {
            display: inline-block;
            width: 18px;
            height: 18px;
            background: #667eea;
            color: white;
            border-radius: 50%;
            text-align: center;
            font-size: 12px;
            cursor: help;
            margin-left: 5px;
            line-height: 18px;
            vertical-align: middle;
        }
    </style>
<div class="calc-container">
<div class="calc-header">
<h2>ตัวแยกวิเคราะห์เอาท์พุต CLI และตัววิเคราะห์สุขภาพ</h2>
<p>การประเมินสภาพและการแสดงภาพอุปกรณ์เครือข่ายผู้จำหน่ายหลายราย แยกวิเคราะห์เอาต์พุต CLI จากอุปกรณ์ Cisco, Aruba, Juniper, Broadcom SONiC, Dell, Fortigate และ Palo Alto</p>
</div>
การควบคุมเซสชัน
<div class="session-controls" id="sessionControls" style="display: none;">
<span class="session-status" id="sessionStatus">ไม่ได้บันทึก</span>
<button class="btn btn-small btn-secondary" onclick="clearSession()">ล้างข้อมูลที่บันทึกไว้</button>
</div>
คืนค่าแบนเนอร์
<div class="alert alert-info" id="restoreBanner" style="display: none;">
<strong>พบเซสชั่นที่แล้ว!</strong>
<button class="btn btn-small btn-primary" onclick="restoreSession()" style="margin: 0 10px;">คืนค่า</button>
<button class="btn btn-small btn-secondary" onclick="dismissRestore()">เริ่มต้นใหม่</button>
</div>
วิธีการใช้งานแผงควบคุม
<div class="how-to-use">
<div class="how-to-use-header">
<span>วิธีใช้เครื่องมือนี้</span>
<span class="toggle-icon">▼</span>
</div>
<div class="how-to-use-content">
<ul>
<li><strong>เลือกผู้ขาย:</strong>เลือกผู้จำหน่ายอุปกรณ์ของคุณหรือใช้การตรวจจับอัตโนมัติเพื่อระบุตัวตนอัตโนมัติ</li>
<li><strong>โหลดตัวอย่าง:</strong>คลิกเมนูแบบเลื่อนลงข้อมูลตัวอย่างเพื่อดูตัวอย่างผลลัพธ์สำหรับผู้จำหน่ายต่างๆ</li>
<li><strong>วางเอาต์พุต:</strong>คัดลอกเอาต์พุต CLI จากอุปกรณ์ของคุณและวางลงในพื้นที่ข้อความ</li>
<li><strong>วิเคราะห์:</strong>คลิก "วิเคราะห์ผลลัพธ์" เพื่อแยกวิเคราะห์ข้อมูลและสร้างข้อมูลเชิงลึกด้านสุขภาพ</li>
<li><strong>ข้อมูลเชิงลึกของรีวิว:</strong>ตรวจสอบแผง Health Insights เพื่อดูคำแนะนำที่นำไปปฏิบัติได้</li>
<li><strong>ส่งออก:</strong>บันทึกผลลัพธ์เป็น JSON, CSV หรือรายงานข้อความเพื่อใช้เป็นเอกสารประกอบ</li>
</ul>
</div>
</div>
วิซาร์ดการเริ่มต้นใช้งานสามขั้นตอน
<div class="onboarding-wizard" id="onboardingWizard">
<div class="wizard-steps">
<div class="wizard-step active" data-step="1">
<div class="step-circle">1</div>
<div class="step-label">เลือกผู้จัดจำหน่าย</div>
</div>
<div class="wizard-step" data-step="2">
<div class="step-circle">2</div>
<div class="step-label">เลือกอินพุต</div>
</div>
<div class="wizard-step" data-step="3">
<div class="step-circle">3</div>
<div class="step-label">วิเคราะห์</div>
</div>
</div>
<div class="wizard-content">
ขั้นตอนที่ 1: เลือกผู้ขาย
<div class="wizard-section active" id="wizardStep1">
<h3 style="text-align: center; margin-bottom: 10px;">ขั้นตอนที่ 1: เลือกผู้จำหน่ายเครือข่ายของคุณ</h3>
<p style="text-align: center; color: #666; margin-bottom: 30px;">เลือกผู้จำหน่ายสำหรับอุปกรณ์เครือข่ายของคุณ หรือให้เราตรวจหาอัตโนมัติ</p>
<div class="vendor-selector" style="justify-content: center;">
<button class="vendor-btn wizard-vendor-btn active" data-vendor="auto" onclick="selectWizardVendor('auto')">ตรวจจับอัตโนมัติ</button>
<button class="vendor-btn wizard-vendor-btn" data-vendor="cisco" onclick="selectWizardVendor('cisco')">ซิสโก้</button>
<button class="vendor-btn wizard-vendor-btn" data-vendor="aruba" onclick="selectWizardVendor('aruba')">อารูบา</button>
<button class="vendor-btn wizard-vendor-btn" data-vendor="juniper" onclick="selectWizardVendor('juniper')">จูนิเปอร์</button>
<button class="vendor-btn wizard-vendor-btn" data-vendor="sonic" onclick="selectWizardVendor('sonic')">โซนิคซี</button>
<button class="vendor-btn wizard-vendor-btn" data-vendor="dell" onclick="selectWizardVendor('dell')">เดลล์</button>
<button class="vendor-btn wizard-vendor-btn" data-vendor="fortigate" onclick="selectWizardVendor('fortigate')">เสริมกำลัง</button>
<button class="vendor-btn wizard-vendor-btn" data-vendor="paloalto" onclick="selectWizardVendor('paloalto')">ปาโล อัลโต</button>
</div>
</div>
ขั้นตอนที่ 2: เลือกวิธีการป้อนข้อมูล
<div class="wizard-section" id="wizardStep2">
<h3 style="text-align: center; margin-bottom: 10px;">ขั้นตอนที่ 2: เลือกวิธีการป้อนข้อมูล</h3>
<p style="text-align: center; color: #666; margin-bottom: 30px;">วางเอาต์พุต CLI ของคุณเองหรือสำรวจด้วยข้อมูลตัวอย่าง</p>
<div class="input-method-cards">
<button aria-label="Paste your own CLI output" class="method-card" onclick="selectInputMethod('paste')">
<div class="method-icon">📋</div>
<div class="method-title">วางเอาต์พุต CLI</div>
<div class="method-desc">คัดลอกเอาต์พุตจากอุปกรณ์เครือข่ายของคุณแล้ววางที่นี่</div>
</button>
<button aria-label="Load sample data to explore" class="method-card" onclick="selectInputMethod('sample')">
<div class="method-icon">🔬</div>
<div class="method-title">โหลดข้อมูลตัวอย่าง</div>
<div class="method-desc">สำรวจด้วยตัวอย่างผลลัพธ์จากผู้ขายต่างๆ</div>
</button>
</div>
แกลเลอรีตัวอย่าง (แสดงเมื่อเลือกตัวอย่าง)
<div id="sampleGallery" style="display: none; margin-top: 30px;">
<h4 style="text-align: center; margin-bottom: 20px;">เลือกตัวอย่าง</h4>
<div class="sample-gallery">
<button aria-label="Load Cisco interfaces sample" class="sample-card" onclick="loadWizardSample('cisco-show-int')">
<div style="font-size: 36px;">🔷</div>
<h4>อินเทอร์เฟซของซิสโก้</h4>
<p>แสดงอินเทอร์เฟซเอาต์พุต</p>
</button>
<button aria-label="Load Cisco version sample" class="sample-card" onclick="loadWizardSample('cisco-show-version')">
<div style="font-size: 36px;">🔷</div>
<h4>เวอร์ชันของซิสโก้</h4>
<p>แสดงเอาต์พุตเวอร์ชัน</p>
</button>
<button aria-label="Load Aruba interfaces sample" class="sample-card" onclick="loadWizardSample('aruba-show-int-brief')">
<div style="font-size: 36px;">🟠</div>
<h4>อินเทอร์เฟซของอารูบา</h4>
<p>แสดงอินเทอร์เฟซโดยย่อ</p>
</button>
<button aria-label="Load Juniper interfaces sample" class="sample-card" onclick="loadWizardSample('juniper-show-int-terse')">
<div style="font-size: 36px;">🟢</div>
<h4>อินเทอร์เฟซของจูนิเปอร์</h4>
<p>แสดงอินเทอร์เฟซสั้น ๆ</p>
</button>
</div>
</div>
พื้นที่วาง (แสดงเมื่อเลือกการวาง)
<div id="pasteArea" style="display: none; margin-top: 30px;">
<textarea id="wizardTextarea" placeholder="Paste CLI output here..." style="width: 100%; height: 200px; padding: 15px; border: 2px solid #ced4da; border-radius: 8px; font-family: 'Courier New', monospace; font-size: 13px;"></textarea>
</div>
</div>
ขั้นตอนที่ 3: วิเคราะห์
<div class="wizard-section" id="wizardStep3">
<h3 style="text-align: center; margin-bottom: 10px;">ขั้นตอนที่ 3: วิเคราะห์ผลลัพธ์</h3>
<p style="text-align: center; color: #666; margin-bottom: 30px;">ตรวจสอบการเลือกของคุณและเริ่มการวิเคราะห์</p>
<div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
<p><strong>ผู้ขาย:</strong> <span id="wizardSelectedVendor">ตรวจจับอัตโนมัติ</span></p>
<p><strong>วิธีการป้อนข้อมูล:</strong> <span id="wizardSelectedMethod">ไม่ได้เลือก</span></p>
<p><strong>พร้อม:</strong> <span id="wizardReadyStatus">❌ ทำตามขั้นตอนที่ 2 ให้เสร็จสิ้น</span></p>
</div>
</div>
</div>
<div class="wizard-buttons">
<button class="btn btn-secondary" id="wizardBackBtn" onclick="wizardPrevStep()" style="display: none;">← ย้อนกลับ</button>
<div></div>
<button class="btn btn-primary" id="wizardNextBtn" onclick="wizardNextStep()">ถัดไป →</button>
</div>
</div>
ส่วนอินพุต
<div class="input-section" id="mainInputSection" style="display: none;">
<h3 class="section-title">เลือกผู้ขาย &amp; วางเอาต์พุต CLI</h3>
ตัวเลือกข้อมูลตัวอย่าง (คุณสมบัติ P0)
<div style="margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px;">
<label style="display: block; margin-bottom: 10px; font-weight: 600;">โหลดข้อมูลตัวอย่าง:<span class="tooltip-trigger" data-tooltip="See example CLI outputs for each vendor to understand the format.">?</span>
</label>
<select id="sampleSelect" onchange="loadSample(this.value)" style="width: 100%; max-width: 400px; padding: 10px; border: 2px solid #ced4da; border-radius: 6px;">
<option value="">-- เลือกตัวอย่าง --</option>
<option value="cisco-show-int">Cisco: แสดงอินเทอร์เฟซ</option>
<option value="cisco-show-version">Cisco: แสดงเวอร์ชัน</option>
<option value="aruba-show-int-brief">Aruba: แสดงอินเทอร์เฟซโดยย่อ</option>
<option value="juniper-show-int-terse">Juniper: แสดงอินเทอร์เฟซสั้น ๆ</option>
<option value="sonic-show-int-status">SONiC: แสดงสถานะอินเทอร์เฟซ</option>
</select>
</div>
ป้ายการตรวจจับผู้ขาย (คุณสมบัติ P0)
<div class="alert alert-success" id="detectedVendor" style="display: none; margin-bottom: 20px;">✓ ตรวจพบ:<strong id="detectedVendorName">ซิสโก้ ไอโอเอส</strong>- สั่งการ:<strong id="detectedCommand">แสดงอินเทอร์เฟซ</strong>
</div>
<div class="vendor-selector">
<button class="vendor-btn active" data-vendor="auto">ตรวจจับอัตโนมัติ</button>
<button class="vendor-btn" data-vendor="cisco">ซิสโก้</button>
<button class="vendor-btn" data-vendor="aruba">อารูบา</button>
<button class="vendor-btn" data-vendor="juniper">จูนิเปอร์</button>
<button class="vendor-btn" data-vendor="sonic">โซนิคซี</button>
<button class="vendor-btn" data-vendor="dell">เดลล์</button>
<button class="vendor-btn" data-vendor="fortigate">เสริมกำลัง</button>
<button class="vendor-btn" data-vendor="paloalto">ปาโล อัลโต</button>
</div>
<div class="command-suggestions">
<h3>คำสั่งที่แนะนำ (คลิกเพื่อคัดลอก):</h3>
<div aria-label="Command suggestions" class="command-chips" id="commandChips" role="group">
<button aria-label="Copy command: show version" class="command-chip" data-command="show version">แสดงเวอร์ชัน</button>
<button aria-label="Copy command: show interfaces" class="command-chip" data-command="show interfaces">แสดงอินเทอร์เฟซ</button>
<button aria-label="Copy command: show interfaces status" class="command-chip" data-command="show interfaces status">แสดงสถานะอินเทอร์เฟซ</button>
<button aria-label="Copy command: show interfaces transceiver" class="command-chip" data-command="show interfaces transceiver">แสดงตัวรับส่งสัญญาณอินเทอร์เฟซ</button>
<button aria-label="Copy command: show platform" class="command-chip" data-command="show platform">แพลตฟอร์มการแสดง</button>
<button aria-label="Copy command: show environment" class="command-chip" data-command="show environment">แสดงสภาพแวดล้อม</button>
<button aria-label="Copy command: show interfaces counters errors" class="command-chip" data-command="show interfaces counters errors">แสดงอินเทอร์เฟซที่เคาน์เตอร์ข้อผิดพลาด</button>
</div>
</div>
<div class="input-area">
<label for="cliInput">วางเอาต์พุต CLI ที่นี่:</label>
<textarea id="cliInput" placeholder="Paste output from 'show interfaces', 'show version', 'show platform', etc.

Example Cisco output:
GigabitEthernet1/0/1 is up, line protocol is up (connected)
  Hardware is Gigabit Ethernet, address is 0000.0c9f.f001
  ...

Or paste multiple command outputs together. The parser will automatically detect the vendor and command type."></textarea>
</div>
<div class="button-group">
<button class="btn btn-primary" id="analyzeBtn" style="width: 100%;">วิเคราะห์ผลลัพธ์</button>
<button class="btn btn-secondary" id="clearBtn">ชัดเจน</button>
<button class="btn btn-secondary" id="loadSampleBtn">โหลดข้อมูลตัวอย่าง</button>
</div>
</div>
ส่วนผลลัพธ์
<div aria-atomic="false" aria-live="polite" class="results-section" id="resultsSection" style="display: none;">
คะแนนสุขภาพที่โดดเด่น (มองเห็นได้เสมอ)
<div class="health-score-prominent">
<h3>คะแนนความสมบูรณ์ของเครือข่ายโดยรวม</h3>
<div aria-label="Health score value" class="health-score" id="healthScore">--</div>
<div class="health-interpretation" id="healthInterpretation">การวิเคราะห์จะปรากฏที่นี่หลังจากแยกวิเคราะห์เอาต์พุต CLI</div>
</div>
ส่วนสรุปที่ยุบได้
<div class="collapsible-section">
<div aria-controls="summarySection" aria-expanded="false" class="accordion-header" onclick="toggleSection('summarySection')" role="button">
<h3>สรุปอินเทอร์เฟซ</h3>
<span class="toggle-indicator" id="summaryToggle">▼</span>
</div>
<div class="section-content" id="summarySection">
<div aria-label="Interface summary statistics" class="summary-cards" id="summaryCards" role="region"></div>
</div>
</div>
การแสดงภาพแชสซีแบบพับได้
<div class="collapsible-section">
<div aria-controls="chassisSection" aria-expanded="false" class="accordion-header" onclick="toggleSection('chassisSection')" role="button">
<h3>การแสดงภาพแชสซี</h3>
<span class="toggle-indicator" id="chassisToggle">▼</span>
</div>
<div class="section-content" id="chassisSection">
<div aria-label="Visual representation of chassis and interface status" class="chassis-visualization" id="chassisViz" role="region">
<h3>การแสดงภาพแชสซี</h3>
<div class="legend" id="legend">
<div class="legend-item">
<div class="legend-box" style="background: #4CAF50;"></div>
<span>✓ สุขภาพดี (ขึ้น ไม่มีข้อผิดพลาด)</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #ffc107;"></div>
<span>⚠ คำเตือน (ข้อผิดพลาดเล็กน้อย)</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #dc3545;"></div>
<span>✗ สำคัญ (ข้อผิดพลาดหลัก)</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #adb5bd;"></div>
<span>- ลง</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #6c757d;"></div>
<span>⊗ แอดมินลง</span>
</div>
</div>
<div class="chassis-container" id="chassisContainer"></div>
</div>
</div>
</div>
ตารางอินเทอร์เฟซแบบพับได้
<div class="collapsible-section">
<div aria-controls="interfaceSection" aria-expanded="false" class="accordion-header" onclick="toggleSection('interfaceSection')" role="button">
<h3>ตารางรายละเอียดอินเทอร์เฟซ</h3>
<span class="toggle-indicator" id="interfaceToggle">▼</span>
</div>
<div class="section-content" id="interfaceSection">
<div class="interface-table">
<h3>รายละเอียดอินเทอร์เฟซ</h3>
<div class="filter-controls">
<select id="filterStatus">
<option value="all">สถานะทั้งหมด</option>
<option value="up">ขึ้นเท่านั้น</option>
<option value="down">ลงเท่านั้น</option>
<option value="errors">ด้วยข้อผิดพลาด</option>
</select>
<select id="filterSlot">
<option value="all">สล็อตทั้งหมด</option>
</select>
<input id="filterSearch" placeholder="Search interface name..." type="text"/>
</div>
<div style="overflow-x: auto;">
<table id="interfaceTable">
<thead>
<tr>
<th>อินเทอร์เฟซ</th>
<th>สถานะ</th>
<th>ความเร็ว/ดูเพล็กซ์</th>
<th>ข้อผิดพลาดในการป้อนข้อมูล</th>
<th>ข้อผิดพลาดเอาต์พุต</th>
<th>ซีอาร์ซี</th>
<th>หยด</th>
<th>การชนกัน</th>
</tr>
</thead>
<tbody id="interfaceTableBody"></tbody>
</table>
</div>
</div>
</div>
</div>
ข้อมูลเครื่องรับส่งสัญญาณ
<div class="transceiver-info" id="transceiverInfo" style="display: none;">
<h2 style="margin-bottom: 15px;">ข้อมูลเครื่องรับส่งสัญญาณ</h2>
<div class="transceiver-grid" id="transceiverGrid"></div>
</div>
ส่วนการส่งออก
<div class="export-section">
<h3>ส่งออกผลลัพธ์</h3>
<div class="button-group">
<button class="btn btn-primary" id="exportJsonBtn">ส่งออก JSON</button>
<button class="btn btn-primary" id="exportCsvBtn">ส่งออก CSV</button>
<button class="btn btn-primary" id="exportReportBtn">รายงานการส่งออก (ข้อความ)</button>
</div>
</div>
</div>
</div>

<script>
        // Global state
        let currentVendor = 'auto';
        let parsedData = null;
        let wizardState = {
            currentStep: 1,
            vendor: 'auto',
            inputMethod: null,
            sampleData: null,
            pasteData: null
        };

        // Wizard Navigation Functions
        function wizardNextStep() {
            if (wizardState.currentStep === 1) {
                // Move to step 2
                showWizardStep(2);
            } else if (wizardState.currentStep === 2) {
                // Check if input method is selected
                if (!wizardState.inputMethod) {
                    alert('Please select an input method (Paste or Sample)');
                    return;
                }
                // Move to step 3
                updateWizardSummary();
                showWizardStep(3);
            } else if (wizardState.currentStep === 3) {
                // Complete wizard and show main interface
                completeWizard();
            }
        }

        function wizardPrevStep() {
            if (wizardState.currentStep > 1) {
                showWizardStep(wizardState.currentStep - 1);
            }
        }

        function showWizardStep(step) {
            // Update step indicators
            document.querySelectorAll('.wizard-step').forEach(el => {
                const stepNum = parseInt(el.dataset.step);
                el.classList.remove('active', 'completed');
                if (stepNum === step) {
                    el.classList.add('active');
                } else if (stepNum < step) {
                    el.classList.add('completed');
                }
            });

            // Show/hide sections
            document.querySelectorAll('.wizard-section').forEach(el => {
                el.classList.remove('active');
            });
            document.getElementById(`wizardStep${step}`).classList.add('active');

            // Update buttons
            const backBtn = document.getElementById('wizardBackBtn');
            const nextBtn = document.getElementById('wizardNextBtn');

            backBtn.style.display = step > 1 ? 'block' : 'none';
            nextBtn.textContent = step === 3 ? 'Analyze Output' : 'Next →';

            wizardState.currentStep = step;
        }

        function selectWizardVendor(vendor) {
            wizardState.vendor = vendor;
            currentVendor = vendor;

            // Update button states
            document.querySelectorAll('.wizard-vendor-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.closest('.vendor-btn').classList.add('active');
        }

        function selectInputMethod(method) {
            wizardState.inputMethod = method;

            // Update visual state
            document.querySelectorAll('.method-card').forEach(card => {
                card.classList.remove('selected');
            });
            event.target.closest('.method-card').classList.add('selected');

            // Show appropriate interface
            const sampleGallery = document.getElementById('sampleGallery');
            const pasteArea = document.getElementById('pasteArea');

            if (method === 'sample') {
                sampleGallery.style.display = 'block';
                pasteArea.style.display = 'none';
            } else {
                sampleGallery.style.display = 'none';
                pasteArea.style.display = 'block';
            }
        }

        function loadWizardSample(sampleId) {
            wizardState.sampleData = sampleId;
            // Visual feedback
            document.querySelectorAll('.sample-card').forEach(card => {
                card.style.borderColor = '#dee2e6';
            });
            event.target.closest('.sample-card').style.borderColor = '#667eea';
        }

        function updateWizardSummary() {
            document.getElementById('wizardSelectedVendor').textContent =
                wizardState.vendor === 'auto' ? 'Auto-Detect' : wizardState.vendor.charAt(0).toUpperCase() + wizardState.vendor.slice(1);
            document.getElementById('wizardSelectedMethod').textContent =
                wizardState.inputMethod === 'sample' ? 'Sample Data' : 'Paste CLI Output';

            const isReady = wizardState.inputMethod &&
                           (wizardState.inputMethod === 'paste' ? document.getElementById('wizardTextarea').value.trim() : wizardState.sampleData);

            document.getElementById('wizardReadyStatus').innerHTML = isReady ? '✅ Ready to analyze' : '❌ Complete Step 2';
        }

        function completeWizard() {
            // Hide wizard, show main interface
            document.getElementById('onboardingWizard').style.display = 'none';
            document.getElementById('mainInputSection').style.display = 'block';

            // Set vendor
            currentVendor = wizardState.vendor;
            document.querySelectorAll('.vendor-btn').forEach(btn => {
                btn.classList.remove('active');
                if (btn.dataset.vendor === currentVendor) {
                    btn.classList.add('active');
                }
            });

            // Load sample or paste data
            if (wizardState.inputMethod === 'sample' && wizardState.sampleData) {
                loadSample(wizardState.sampleData);
                // Auto-analyze
                setTimeout(() => {
                    document.getElementById('analyzeBtn').click();
                }, 500);
            } else if (wizardState.inputMethod === 'paste') {
                const pasteData = document.getElementById('wizardTextarea').value;
                document.getElementById('cliInput').value = pasteData;
                // Auto-analyze if there's data
                if (pasteData.trim()) {
                    setTimeout(() => {
                        document.getElementById('analyzeBtn').click();
                    }, 500);
                }
            }

            // Scroll to results
            setTimeout(() => {
                document.getElementById('resultsSection').scrollIntoView({ behavior: 'smooth' });
            }, 1000);
        }

        // Progressive Disclosure Functions
        function toggleSection(sectionId) {
            const content = document.getElementById(sectionId);
            const toggle = document.getElementById(sectionId.replace('Section', 'Toggle'));
            const header = content.previousElementSibling;

            const isOpen = content.classList.contains('open');

            if (isOpen) {
                content.classList.remove('open');
                toggle.classList.remove('open');
                header.setAttribute('aria-expanded', 'false');
            } else {
                content.classList.add('open');
                toggle.classList.add('open');
                header.setAttribute('aria-expanded', 'true');
            }
        }

        function updateHealthInterpretation(score, healthyPorts, warningPorts, errorPorts, downPorts, errorInterfaces, warningInterfaces) {
            errorInterfaces = errorInterfaces || [];
            warningInterfaces = warningInterfaces || [];

            const interpretation = document.getElementById('healthInterpretation');
            const scoreEl = document.getElementById('healthScore');

            let statusText = '';
            let recommendations = [];

            // Always surface issues regardless of score — a 96 with errors is not "all clear"
            if (errorPorts > 0) {
                var intfList = errorInterfaces.length > 0 ? ': ' + errorInterfaces.join(', ') : '';
                recommendations.push(errorPorts + ' port(s) with significant errors — investigate immediately' + intfList);
            }
            if (warningPorts > 0) {
                var warnList = warningInterfaces.length > 0 ? ': ' + warningInterfaces.join(', ') : '';
                recommendations.push(warningPorts + ' port(s) with minor errors — monitor closely' + warnList);
            }

            var hasIssues = recommendations.length > 0;

            if (score >= 95 && !hasIssues) {
                statusText = '✅ Excellent — Network is in great shape';
            } else if (score >= 95) {
                statusText = '⚠ High score but issues detected — do not ignore';
                // Change the score circle border to amber so it doesn't look all-green
                if (scoreEl) {
                    scoreEl.className = 'health-score fair';
                }
            } else if (score >= 85) {
                statusText = '✓ Good — Network is healthy with minor issues';
            } else if (score >= 70) {
                statusText = '⚠ Fair — Issues detected, attention needed';
            } else if (score >= 50) {
                statusText = '⚠ Poor — Multiple issues requiring immediate attention';
                recommendations.push('Review network configuration and cabling');
            } else {
                statusText = '✗ Critical — Serious network health issues detected';
                recommendations.push(downPorts + ' port(s) are down');
                recommendations.push('Immediate troubleshooting required');
            }

            var html = '<strong>' + statusText + '</strong>';
            if (recommendations.length > 0) {
                html += '<ul style="margin: 10px 0 0 0; padding-left: 20px; text-align: left;">';
                recommendations.forEach(function(rec) {
                    html += '<li>' + rec + '</li>';
                });
                html += '</ul>';
            }

            interpretation.innerHTML = html;
        }

        // How-to-use collapsible panel toggle
        const howToUseHeader = document.querySelector('.how-to-use-header');
        if (howToUseHeader) {
            howToUseHeader.addEventListener('click', function() {
                const content = this.nextElementSibling;
                const icon = this.querySelector('.toggle-icon');
                if (!content.style.display || content.style.display === 'none') {
                    content.style.display = 'block';
                    if (icon) icon.textContent = '▲';
                } else {
                    content.style.display = 'none';
                    if (icon) icon.textContent = '▼';
                }
            });
        }

        // Vendor button handlers
        document.querySelectorAll('.vendor-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.vendor-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                currentVendor = this.dataset.vendor;
                updateCommandSuggestions(currentVendor);
            });
        });

        // Command chip handlers (copy to clipboard)
        document.querySelectorAll('.command-chip').forEach(chip => {
            chip.addEventListener('click', function() {
                const command = this.dataset.command;
                navigator.clipboard.writeText(command).then(() => {
                    const originalText = this.textContent;
                    this.textContent = '✓ Copied!';
                    setTimeout(() => {
                        this.textContent = originalText;
                    }, 2000);
                });
            });
        });

        // Update command suggestions based on vendor
        function updateCommandSuggestions(vendor) {
            const commandsDiv = document.getElementById('commandChips');
            let commands = [];

            switch(vendor) {
                case 'cisco':
                    commands = [
                        'show version',
                        'show interfaces',
                        'show interfaces status',
                        'show interfaces transceiver',
                        'show platform',
                        'show environment',
                        'show interfaces counters errors'
                    ];
                    break;
                case 'aruba':
                    commands = [
                        'show version',
                        'show interfaces',
                        'show interfaces brief',
                        'show interfaces transceiver',
                        'show system',
                        'show environment'
                    ];
                    break;
                case 'juniper':
                    commands = [
                        'show version',
                        'show interfaces',
                        'show interfaces terse',
                        'show interfaces diagnostics optics',
                        'show chassis hardware',
                        'show chassis environment'
                    ];
                    break;
                case 'sonic':
                    commands = [
                        'show version',
                        'show interface status',
                        'show interface counters',
                        'show interface transceiver dom',
                        'show platform environment'
                    ];
                    break;
                case 'dell':
                    commands = [
                        'show version',
                        'show interfaces',
                        'show interfaces status',
                        'show interfaces transceiver',
                        'show system'
                    ];
                    break;
                case 'fortigate':
                    commands = [
                        'get system status',
                        'get hardware nic',
                        'diagnose hardware deviceinfo nic',
                        'diagnose hardware sysinfo'
                    ];
                    break;
                case 'paloalto':
                    commands = [
                        'show system info',
                        'show interface all',
                        'show interface hardware'
                    ];
                    break;
                default:
                    commands = [
                        'show version',
                        'show interfaces',
                        'show interfaces status',
                        'show interfaces transceiver',
                        'show platform',
                        'show environment'
                    ];
            }

            commandsDiv.innerHTML = commands.map(cmd =>
                `<button class="command-chip" data-command="${cmd}" aria-label="Copy command: ${cmd}">${cmd}</button>`
            ).join('');

            // Re-attach click handlers
            document.querySelectorAll('.command-chip').forEach(chip => {
                chip.addEventListener('click', function() {
                    const command = this.dataset.command;
                    navigator.clipboard.writeText(command).then(() => {
                        const originalText = this.textContent;
                        this.textContent = '✓ Copied!';
                        setTimeout(() => {
                            this.textContent = originalText;
                        }, 2000);
                    });
                });
            });
        }

        // Analyze button handler
        document.getElementById('analyzeBtn').addEventListener('click', function() {
            const input = document.getElementById('cliInput').value.trim();
            if (!input) {
                alert('Please paste CLI output first');
                return;
            }

            // Parse the input
            parsedData = parseCliOutput(input, currentVendor);

            // Display results
            displayResults(parsedData);

            // Show results section
            document.getElementById('resultsSection').style.display = 'block';

            // Scroll to results
            setTimeout(() => {
                document.getElementById('resultsSection').scrollIntoView({ behavior: 'smooth' });
            }, 100);
        });

        // Clear button handler
        document.getElementById('clearBtn').addEventListener('click', function() {
            document.getElementById('cliInput').value = '';
            document.getElementById('resultsSection').style.display = 'none';
            parsedData = null;
        });

        // Load sample data
        document.getElementById('loadSampleBtn').addEventListener('click', function() {
            const sampleData = generateSampleData();
            document.getElementById('cliInput').value = sampleData;
        });

        // Main parsing function
        function parseCliOutput(input, vendor) {
            // Auto-detect vendor if set to auto
            if (vendor === 'auto') {
                vendor = detectVendor(input);
            }

            const data = {
                vendor: vendor,
                interfaces: [],
                transceivers: [],
                chassis: {},
                metadata: {
                    hostname: '',
                    model: '',
                    version: '',
                    serial: ''
                }
            };

            // Parse based on vendor
            switch(vendor) {
                case 'cisco':
                    parseCisco(input, data);
                    break;
                case 'aruba':
                    parseAruba(input, data);
                    break;
                case 'juniper':
                    parseJuniper(input, data);
                    break;
                case 'sonic':
                    parseSonic(input, data);
                    break;
                case 'dell':
                    parseDell(input, data);
                    break;
                case 'fortigate':
                    parseFortigate(input, data);
                    break;
                case 'paloalto':
                    parsePaloAlto(input, data);
                    break;
                default:
                    parseCisco(input, data); // Fallback to Cisco
            }

            // Organize interfaces by chassis/slot/port
            organizeInterfacesByChassis(data);

            // Calculate health metrics
            calculateHealthMetrics(data);

            return data;
        }

        // Vendor detection
        function detectVendor(input) {
            const lowerInput = input.toLowerCase();

            if (lowerInput.includes('cisco') ||
                lowerInput.match(/gigabitethernet|tengigabitethernet|fastethernet/)) {
                return 'cisco';
            }
            if (lowerInput.includes('aruba') || lowerInput.includes('arubaos')) {
                return 'aruba';
            }
            if (lowerInput.includes('junos') || lowerInput.match(/ge-\d+\/\d+\/\d+/)) {
                return 'juniper';
            }
            if (lowerInput.includes('sonic') || lowerInput.includes('broadcom') ||
                lowerInput.match(/software version\s*:/) || lowerInput.includes('hwsku') ||
                lowerInput.includes('enterprise sonic distribution')) {
                return 'sonic';
            }
            if (lowerInput.includes('dell') || lowerInput.includes('force10')) {
                return 'dell';
            }
            if (lowerInput.includes('fortigate') || lowerInput.includes('fortios')) {
                return 'fortigate';
            }
            if (lowerInput.includes('palo alto') || lowerInput.includes('pan-os')) {
                return 'paloalto';
            }

            return 'cisco'; // Default fallback
        }

        // Cisco parser
        function parseCisco(input, data) {
            const lines = input.split('\n');
            let currentInterface = null;

            for (let i = 0; i < lines.length; i++) {
                const line = lines[i];

                // Parse hostname from prompt
                const hostnameMatch = line.match(/^(\S+)#/);
                if (hostnameMatch && !data.metadata.hostname) {
                    data.metadata.hostname = hostnameMatch[1];
                }

                // Parse version info
                if (line.includes('Cisco IOS')) {
                    const versionMatch = line.match(/Version\s+([^\s,]+)/);
                    if (versionMatch) data.metadata.version = versionMatch[1];
                }

                // Parse model
                if (line.match(/cisco\s+(\S+)\s+\(/i)) {
                    const modelMatch = line.match(/cisco\s+(\S+)\s+\(/i);
                    if (modelMatch) data.metadata.model = modelMatch[1];
                }

                // Parse interface status line
                // Format: GigabitEthernet1/0/1 is up, line protocol is up
                const intfStatusMatch = line.match(/^(\S+)\s+is\s+(up|down|admin\s+down|administratively\s+down)/i);
                if (intfStatusMatch) {
                    currentInterface = {
                        name: intfStatusMatch[1],
                        status: intfStatusMatch[2].toLowerCase().replace('administratively ', 'admin-'),
                        lineProtocol: line.match(/line\s+protocol\s+is\s+(up|down)/i)?.[1] || 'unknown',
                        inputErrors: 0,
                        outputErrors: 0,
                        crc: 0,
                        drops: 0,
                        collisions: 0,
                        speed: '',
                        duplex: '',
                        description: ''
                    };
                    data.interfaces.push(currentInterface);
                }

                // Parse interface counters
                if (currentInterface && line.trim()) {
                    // Input errors
                    const inputErrorsMatch = line.match(/(\d+)\s+input\s+errors/i);
                    if (inputErrorsMatch) currentInterface.inputErrors = parseInt(inputErrorsMatch[1]);

                    // Output errors
                    const outputErrorsMatch = line.match(/(\d+)\s+output\s+errors/i);
                    if (outputErrorsMatch) currentInterface.outputErrors = parseInt(outputErrorsMatch[1]);

                    // CRC errors
                    const crcMatch = line.match(/(\d+)\s+CRC/i);
                    if (crcMatch) currentInterface.crc = parseInt(crcMatch[1]);

                    // Drops
                    const dropsMatch = line.match(/(\d+)\s+(?:input|output)?\s*drops/i);
                    if (dropsMatch) currentInterface.drops += parseInt(dropsMatch[1]);

                    // Collisions
                    const collisionsMatch = line.match(/(\d+)\s+collisions/i);
                    if (collisionsMatch) currentInterface.collisions = parseInt(collisionsMatch[1]);

                    // Speed/Duplex
                    const speedMatch = line.match(/(\d+[MG]b\/s)[,\s]/i);
                    if (speedMatch) currentInterface.speed = speedMatch[1];

                    const duplexMatch = line.match(/(full|half|auto)-duplex/i);
                    if (duplexMatch) currentInterface.duplex = duplexMatch[1];

                    // Description
                    const descMatch = line.match(/Description:\s*(.+)$/i);
                    if (descMatch) currentInterface.description = descMatch[1].trim();
                }

                // Parse transceiver info
                if (line.match(/transceiver|sfp|temperature|tx power|rx power/i)) {
                    parseTransceiverLine(line, data);
                }
            }
        }

        // Aruba parser
        function parseAruba(input, data) {
            const lines = input.split('\n');
            let currentInterface = null;

            for (let line of lines) {
                // Aruba interface format varies by OS version
                // Format: 1/1/1  Up    10GbE    Full
                const intfMatch = line.match(/^(\d+\/\d+\/\d+)\s+(Up|Down|Disabled)/i);
                if (intfMatch) {
                    currentInterface = {
                        name: intfMatch[1],
                        status: intfMatch[2].toLowerCase(),
                        lineProtocol: intfMatch[2].toLowerCase(),
                        inputErrors: 0,
                        outputErrors: 0,
                        crc: 0,
                        drops: 0,
                        collisions: 0,
                        speed: '',
                        duplex: '',
                        description: ''
                    };

                    // Try to parse speed/duplex from same line
                    const speedMatch = line.match(/(\d+[MG]bE?)/i);
                    if (speedMatch) currentInterface.speed = speedMatch[1];

                    const duplexMatch = line.match(/(Full|Half)/i);
                    if (duplexMatch) currentInterface.duplex = duplexMatch[1];

                    data.interfaces.push(currentInterface);
                }
            }
        }

        // Juniper parser
        function parseJuniper(input, data) {
            const lines = input.split('\n');

            for (let line of lines) {
                // Juniper format: ge-0/0/0    up    up
                const intfMatch = line.match(/^([\w-]+\/\d+\/\d+\/\d+|[\w-]+\/\d+\/\d+)\s+(up|down)/i);
                if (intfMatch) {
                    const intf = {
                        name: intfMatch[1],
                        status: intfMatch[2].toLowerCase(),
                        lineProtocol: 'up',
                        inputErrors: 0,
                        outputErrors: 0,
                        crc: 0,
                        drops: 0,
                        collisions: 0,
                        speed: '',
                        duplex: '',
                        description: ''
                    };

                    // Parse additional info from line
                    const parts = line.split(/\s+/);
                    if (parts[2]) intf.lineProtocol = parts[2].toLowerCase();

                    data.interfaces.push(intf);
                }
            }
        }

        // SONiC parser — supports Broadcom SONiC 4.x panel-port naming (Eth1/X)
        function parseSonic(input, data) {
            const lines = input.split('\n');

            // Section state tracking
            let inVersionSection = false;
            let inStatusSection = false;
            let inCountersSection = false;
            let inTransceiverSection = false;

            // Transceiver block state
            let currentTransceiver = null;
            let inChannelMonitor = false;
            let inModuleMonitor = false;

            // Counter lookup: interface name -> counter object for later merging
            const counterMap = {};

            for (let i = 0; i < lines.length; i++) {
                const line = lines[i];
                const trimmed = line.trim();

                // --- Hostname detection from shell prompt ---
                if (!data.metadata.hostname) {
                    const promptMatch = line.match(/^([\w][\w.\-:]+)#\s/);
                    if (promptMatch) {
                        data.metadata.hostname = promptMatch[1];
                    }
                }

                // --- Section detection from shell prompt lines ---
                if (line.match(/^[\w][\w.\-:]+#\s*show\s+version/i)) {
                    inVersionSection = true;
                    inStatusSection = false;
                    inCountersSection = false;
                    inTransceiverSection = false;
                    if (currentTransceiver && currentTransceiver.identifier) {
                        data.transceivers.push(currentTransceiver);
                    }
                    currentTransceiver = null;
                    continue;
                }
                if (line.match(/^[\w][\w.\-:]+#\s*show\s+interfaces?\s+status/i)) {
                    inStatusSection = true;
                    inVersionSection = false;
                    inCountersSection = false;
                    inTransceiverSection = false;
                    if (currentTransceiver && currentTransceiver.identifier) {
                        data.transceivers.push(currentTransceiver);
                    }
                    currentTransceiver = null;
                    continue;
                }
                if (line.match(/^[\w][\w.\-:]+#\s*show\s+interfaces?\s+counters/i)) {
                    inCountersSection = true;
                    inStatusSection = false;
                    inVersionSection = false;
                    inTransceiverSection = false;
                    if (currentTransceiver && currentTransceiver.identifier) {
                        data.transceivers.push(currentTransceiver);
                    }
                    currentTransceiver = null;
                    continue;
                }
                if (line.match(/^[\w][\w.\-:]+#\s*show\s+interfaces?\s+transceiver/i)) {
                    inTransceiverSection = true;
                    inStatusSection = false;
                    inVersionSection = false;
                    inCountersSection = false;
                    continue;
                }
                // Any other prompt line ends current section
                if (line.match(/^[\w][\w.\-:]+#\s*\S/)) {
                    if (currentTransceiver && currentTransceiver.identifier) {
                        data.transceivers.push(currentTransceiver);
                    }
                    currentTransceiver = null;
                    inVersionSection = false;
                    inStatusSection = false;
                    inCountersSection = false;
                    inTransceiverSection = false;
                    continue;
                }

                // ======== SHOW VERSION ========
                if (inVersionSection) {
                    const versionMatch = line.match(/^Software Version\s*:\s*(.+)/i);
                    if (versionMatch) data.metadata.version = versionMatch[1].trim();

                    const hwskuMatch = line.match(/^HwSKU\s*:\s*(.+)/i);
                    if (hwskuMatch) data.metadata.model = hwskuMatch[1].trim();

                    const serialMatch = line.match(/^Serial Number\s*:\s*(.+)/i);
                    if (serialMatch) data.metadata.serial = serialMatch[1].trim();

                    const platformMatch = line.match(/^Platform\s*:\s*(.+)/i);
                    if (platformMatch && !data.metadata.platform) {
                        data.metadata.platform = platformMatch[1].trim();
                    }
                    continue;
                }

                // ======== SHOW INTERFACE STATUS ========
                if (inStatusSection) {
                    // Skip separator and header lines
                    if (trimmed.match(/^-{5,}$/) || trimmed.match(/^Name\s+Description/i)) continue;
                    if (!trimmed) continue;

                    // Parse: Name  Description  Oper  Reason  AutoNeg  Speed  MTU  AlternateName
                    // Use 2+ spaces as column delimiter (SONiC space-padded table format)
                    const statusMatch = line.match(/^(Eth\d+\/\d+(?:\/\d+)?|PortChannel\d+)\s{2,}/i);
                    if (statusMatch) {
                        const name = statusMatch[1];
                        const cols = trimmed.split(/\s{2,}/);
                        // cols[0]=name, cols[1]=description, cols[2]=oper, cols[3]=reason,
                        // cols[4]=autoneg, cols[5]=speed, cols[6]=mtu, cols[7]=altname
                        const oper = (cols[2] || '').toLowerCase();
                        const reason = (cols[3] || '').toLowerCase();
                        const speedRaw = cols[5] || '';
                        const mtu = cols[6] || '';
                        const description = (cols[1] || '').trim();

                        let status = oper; // 'up' or 'down'
                        if (reason === 'admin-down') status = 'admin-down';

                        // Format speed from Mbps integer (e.g. 25000 -> 25G, 100000 -> 100G)
                        let speed = '';
                        const speedNum = parseInt(speedRaw);
                        if (!isNaN(speedNum) && speedNum > 0) {
                            speed = speedNum >= 1000 ? `${speedNum / 1000}G` : `${speedNum}M`;
                        }

                        const intf = {
                            name: name,
                            status: status,
                            lineProtocol: status,
                            reason: reason,
                            inputErrors: 0,
                            outputErrors: 0,
                            crc: 0,
                            drops: 0,
                            collisions: 0,
                            rxOk: 0,
                            txOk: 0,
                            speed: speed,
                            mtu: mtu,
                            duplex: '',
                            description: description === '-' ? '' : description
                        };
                        data.interfaces.push(intf);
                    }
                    continue;
                }

                // ======== SHOW INTERFACE COUNTERS ========
                if (inCountersSection) {
                    // Skip header/separator lines
                    if (trimmed.match(/^-{5,}$/) || trimmed.match(/^Interface\s+State/i)) continue;
                    if (!trimmed) continue;

                    // Format: Eth1/1  U  rxOk  rxErr  rxDrp  rxOversize  txOk  txErr  txDrp  txOversize
                    const counterMatch = line.match(
                        /^(Eth\d+\/\d+(?:\/\d+)?|PortChannel\d+)\s+(U|D)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)/i
                    );
                    if (counterMatch) {
                        counterMap[counterMatch[1]] = {
                            state: counterMatch[2].toUpperCase() === 'U' ? 'up' : 'down',
                            rxOk: parseInt(counterMatch[3]),
                            rxErr: parseInt(counterMatch[4]),
                            rxDrp: parseInt(counterMatch[5]),
                            txOk: parseInt(counterMatch[7]),
                            txErr: parseInt(counterMatch[8]),
                            txDrp: parseInt(counterMatch[9])
                        };
                    }
                    continue;
                }

                // ======== SHOW INTERFACE TRANSCEIVER DOM ========
                if (inTransceiverSection) {
                    // Port header: "Port 1/1" or "Port 1/55/1"
                    const portMatch = trimmed.match(/^Port\s+(\d+\/\d+(?:\/\d+)?)\s*$/i);
                    if (portMatch) {
                        if (currentTransceiver && currentTransceiver.identifier) {
                            data.transceivers.push(currentTransceiver);
                        }
                        // Map "Port 1/1" -> interface name "Eth1/1"
                        currentTransceiver = {
                            port: 'Eth' + portMatch[1],
                            portLabel: 'Port ' + portMatch[1],
                            identifier: null,
                            vendorName: '',
                            vendorPart: '',
                            wavelength: '',
                            temperature: null,
                            vcc: null,
                            rxPower: null,
                            txBias: null,
                            txPower: null,
                            domSupported: true
                        };
                        inChannelMonitor = false;
                        inModuleMonitor = false;
                        continue;
                    }

                    if (currentTransceiver) {
                        if (trimmed === 'None detected') {
                            // Skip ports with no transceiver installed
                            currentTransceiver = null;
                            continue;
                        }
                        if (trimmed === 'DOM is not supported') {
                            currentTransceiver.domSupported = false;
                            data.transceivers.push(currentTransceiver);
                            currentTransceiver = null;
                            continue;
                        }

                        // Dashed separator lines inside transceiver block — skip
                        if (trimmed.match(/^-{5,}$/)) continue;

                        // Section context: ChannelMonitorValues / ModuleMonitorValues / ThresholdValues
                        if (trimmed === 'ChannelMonitorValues:') {
                            inChannelMonitor = true;
                            inModuleMonitor = false;
                            continue;
                        }
                        if (trimmed === 'ModuleMonitorValues:') {
                            inModuleMonitor = true;
                            inChannelMonitor = false;
                            continue;
                        }
                        if (trimmed.match(/ThresholdValues:/)) {
                            inChannelMonitor = false;
                            inModuleMonitor = false;
                            continue;
                        }

                        // Key: Value pairs
                        const kvMatch = trimmed.match(/^(\w[\w\s]+?)\s*:\s*(.+)$/);
                        if (kvMatch) {
                            const key = kvMatch[1].trim();
                            const val = kvMatch[2].trim();
                            switch (key) {
                                case 'Identifier':   currentTransceiver.identifier = val; break;
                                case 'Vendor Name':  currentTransceiver.vendorName = val; break;
                                case 'Vendor Part':  currentTransceiver.vendorPart = val; break;
                                case 'Wavelength':   currentTransceiver.wavelength = val; break;
                                case 'Temperature':
                                    if (inModuleMonitor || inChannelMonitor) {
                                        currentTransceiver.temperature = parseFloat(val);
                                    }
                                    break;
                                case 'Vcc':         currentTransceiver.vcc = parseFloat(val); break;
                                case 'Rx1Power':    currentTransceiver.rxPower = parseFloat(val); break;
                                case 'Tx1Power':    currentTransceiver.txPower = parseFloat(val); break;
                                case 'Tx1Bias':     currentTransceiver.txBias = parseFloat(val); break;
                            }
                        }
                    }
                    continue;
                }
            }

            // Push last transceiver block if still pending
            if (currentTransceiver && currentTransceiver.identifier) {
                data.transceivers.push(currentTransceiver);
            }

            // Merge counter data into interface objects matched by name
            data.interfaces.forEach(intf => {
                const c = counterMap[intf.name];
                if (c) {
                    intf.inputErrors = c.rxErr;
                    intf.outputErrors = c.txErr;
                    intf.drops = c.rxDrp + c.txDrp;
                    intf.rxOk = c.rxOk;
                    intf.txOk = c.txOk;
                }
            });
        }

        // Dell parser
        function parseDell(input, data) {
            // Similar to Cisco but with slight variations
            parseCisco(input, data); // Reuse Cisco parser as base
        }

        // Fortigate parser
        function parseFortigate(input, data) {
            const lines = input.split('\n');

            for (let line of lines) {
                // Fortigate format varies
                const intfMatch = line.match(/^(port\d+|wan\d+|lan\d+|internal)\s+(\d+[MG])/i);
                if (intfMatch) {
                    const intf = {
                        name: intfMatch[1],
                        status: 'up', // Need to determine from context
                        lineProtocol: 'up',
                        inputErrors: 0,
                        outputErrors: 0,
                        crc: 0,
                        drops: 0,
                        collisions: 0,
                        speed: intfMatch[2],
                        duplex: '',
                        description: ''
                    };
                    data.interfaces.push(intf);
                }
            }
        }

        // Palo Alto parser
        function parsePaloAlto(input, data) {
            const lines = input.split('\n');

            for (let line of lines) {
                // Palo Alto format
                const intfMatch = line.match(/^(ethernet\d+\/\d+)\s+(\d+[MG])/i);
                if (intfMatch) {
                    const intf = {
                        name: intfMatch[1],
                        status: 'up',
                        lineProtocol: 'up',
                        inputErrors: 0,
                        outputErrors: 0,
                        crc: 0,
                        drops: 0,
                        collisions: 0,
                        speed: intfMatch[2],
                        duplex: '',
                        description: ''
                    };
                    data.interfaces.push(intf);
                }
            }
        }

        // Parse transceiver information
        function parseTransceiverLine(line, data) {
            // This is a simplified parser - expand based on needs
            const tempMatch = line.match(/(\d+\.?\d*)\s*C\s+temperature/i);
            const txMatch = line.match(/TX.*?(-?\d+\.?\d*)\s*dBm/i);
            const rxMatch = line.match(/RX.*?(-?\d+\.?\d*)\s*dBm/i);

            if (tempMatch || txMatch || rxMatch) {
                // Add transceiver data
            }
        }

        // Organize interfaces by chassis/slot/port
        function organizeInterfacesByChassis(data) {
            data.chassis = {};

            data.interfaces.forEach(intf => {
                const parsed = parseInterfaceName(intf.name);
                if (!parsed) return;

                const slotKey = `${parsed.chassis}/${parsed.slot}`;

                if (!data.chassis[slotKey]) {
                    data.chassis[slotKey] = {
                        chassis: parsed.chassis,
                        slot: parsed.slot,
                        ports: []
                    };
                }

                data.chassis[slotKey].ports.push({
                    port: parsed.port,
                    interface: intf
                });
            });

            // Sort ports within each slot
            Object.values(data.chassis).forEach(slot => {
                slot.ports.sort((a, b) => a.port - b.port);
            });
        }

        // Parse interface name to extract chassis/slot/port
        function parseInterfaceName(name) {
            // Skip non-physical interfaces
            const skipPatterns = [
                /^vlan/i,
                /^loopback/i,
                /^tunnel/i,
                /^port-channel/i,
                /^portchannel/i,
                /^po\d+$/i,
                /^ae\d+$/i,
                /^lag\d+$/i,
                /^bvi/i,
                /^irb/i,
                /^bridge/i,
                /^null/i,
                /^management$/i,
                /^mgmt$/i
            ];

            for (let pattern of skipPatterns) {
                if (pattern.test(name)) {
                    return null; // Exclude from chassis visualization
                }
            }

            // Cisco format: GigabitEthernet1/0/1, TenGigabitEthernet1/1/1
            let match = name.match(/(\w+)(\d+)\/(\d+)\/(\d+)/);
            if (match) {
                return {
                    type: match[1],
                    chassis: parseInt(match[2]),
                    slot: parseInt(match[3]),
                    port: parseInt(match[4])
                };
            }

            // Aruba format: 1/1/1
            match = name.match(/^(\d+)\/(\d+)\/(\d+)$/);
            if (match) {
                return {
                    type: 'Port',
                    chassis: parseInt(match[1]),
                    slot: parseInt(match[2]),
                    port: parseInt(match[3])
                };
            }

            // Juniper format: ge-0/0/0, xe-1/2/3
            match = name.match(/([xg]e)-(\d+)\/(\d+)\/(\d+)/i);
            if (match) {
                return {
                    type: match[1],
                    chassis: parseInt(match[2]),
                    slot: parseInt(match[3]),
                    port: parseInt(match[4])
                };
            }

            // SONiC panel-port format: Eth1/1, Eth1/55/1 (breakout sub-port)
            match = name.match(/^Eth(\d+)\/(\d+)(?:\/(\d+))?$/i);
            if (match) {
                const chassis = parseInt(match[1]);
                const panelPort = parseInt(match[2]);
                const subPort = match[3] ? parseInt(match[3]) : 0;
                if (subPort > 0) {
                    // Breakout: group under the parent panel port as slot
                    return { type: 'Eth', chassis: chassis, slot: panelPort, port: subPort };
                }
                return { type: 'Eth', chassis: chassis, slot: 0, port: panelPort };
            }

            // SONiC legacy format: Ethernet0
            match = name.match(/^Ethernet(\d+)$/i);
            if (match) {
                const portNum = parseInt(match[1]);
                return {
                    type: 'Ethernet',
                    chassis: 0,
                    slot: Math.floor(portNum / 48), // Assume 48 ports per slot
                    port: (portNum % 48)
                };
            }

            // Fortigate format: port1, port2
            match = name.match(/^port(\d+)$/i);
            if (match) {
                const portNum = parseInt(match[1]);
                return {
                    type: 'Port',
                    chassis: 0,
                    slot: Math.floor((portNum - 1) / 24),
                    port: ((portNum - 1) % 24) + 1
                };
            }

            // Palo Alto format: ethernet1/1
            match = name.match(/^ethernet(\d+)\/(\d+)$/i);
            if (match) {
                return {
                    type: 'Ethernet',
                    chassis: 0,
                    slot: parseInt(match[1]),
                    port: parseInt(match[2])
                };
            }

            // Dell/Generic format: Te 1/0/1
            match = name.match(/^(?:Te|Gi|Fo|Eth)\s*(\d+)\/(\d+)\/(\d+)$/i);
            if (match) {
                return {
                    type: 'Port',
                    chassis: parseInt(match[1]),
                    slot: parseInt(match[2]),
                    port: parseInt(match[3])
                };
            }

            // Fallback: exclude from chassis view
            return null;
        }

        // Calculate health metrics with proper error rate analysis
        function calculateHealthMetrics(data) {
            let totalPorts = data.interfaces.length;
            let healthyPorts = 0;
            let warningPorts = 0;
            let errorPorts = 0;
            let downPorts = 0;
            let unknownPorts = 0;
            let errorInterfaces = [];
            let warningInterfaces = [];

            data.interfaces.forEach(intf => {
                const totalErrors = intf.inputErrors + intf.outputErrors + intf.crc + intf.drops;
                const totalPackets = (intf.inputPackets || 0) + (intf.outputPackets || 0);

                // Calculate error rate if we have packet counts
                let errorRate = 0;
                if (totalPackets > 0) {
                    errorRate = (totalErrors / totalPackets) * 100;
                }

                // Classify interface health
                if (intf.status === 'down' || intf.status === 'admin-down') {
                    downPorts++;
                } else if (totalPackets === 0 && totalErrors === 0) {
                    // Interface up but no traffic - consider healthy
                    healthyPorts++;
                } else if (totalPackets > 0) {
                    // We have packet counts - use error rate
                    if (errorRate < 0.01) {
                        healthyPorts++; // < 0.01% error rate
                    } else if (errorRate < 0.1) {
                        warningPorts++;
                        warningInterfaces.push(intf.name);
                    } else {
                        errorPorts++;
                        errorInterfaces.push(intf.name);
                    }
                } else {
                    // No packet counts - use absolute error thresholds
                    if (totalErrors === 0) {
                        healthyPorts++;
                    } else if (totalErrors < 1000) {
                        warningPorts++;
                        warningInterfaces.push(intf.name);
                    } else {
                        errorPorts++;
                        errorInterfaces.push(intf.name);
                    }
                }
            });

            // Calculate health score (0-100)
            // Only count interfaces that are administratively up
            const activeInterfaceCount = totalPorts - downPorts;
            const healthScore = activeInterfaceCount > 0
                ? Math.round((healthyPorts / activeInterfaceCount) * 100) || 0
                : 0;

            data.healthMetrics = {
                totalPorts,
                healthyPorts,
                warningPorts,
                errorPorts,
                downPorts,
                healthScore,
                errorInterfaces: errorInterfaces,
                warningInterfaces: warningInterfaces
            };
        }

        // Display results
        function displayResults(data) {
            displaySummaryCards(data);
            displayHealthScore(data);
            displayChassisVisualization(data);
            displayInterfaceTable(data);

            if (data.transceivers.length > 0) {
                displayTransceiverInfo(data);
            }
        }

        // Display summary cards
        function displaySummaryCards(data) {
            const container = document.getElementById('summaryCards');
            const metrics = data.healthMetrics;

            container.innerHTML = `
                <div class="summary-card success">
                    <h3>Healthy Ports</h3>
                    <div class="value">${metrics.healthyPorts}</div>
                </div>
                <div class="summary-card warning">
                    <h3>Warning Ports</h3>
                    <div class="value">${metrics.warningPorts}</div>
                </div>
                <div class="summary-card error">
                    <h3>Error Ports</h3>
                    <div class="value">${metrics.errorPorts}</div>
                </div>
                <div class="summary-card">
                    <h3>Down Ports</h3>
                    <div class="value">${metrics.downPorts}</div>
                </div>
                <div class="summary-card">
                    <h3>Total Ports</h3>
                    <div class="value">${metrics.totalPorts}</div>
                </div>
            `;
        }

        // Display health score
        function displayHealthScore(data) {
            const scoreElement = document.getElementById('healthScore');
            const score = data.healthMetrics.healthScore;

            scoreElement.className = 'health-score';

            let statusIcon = '';
            let statusText = '';
            if (score >= 95) {
                scoreElement.classList.add('excellent');
                statusIcon = '✓';
                statusText = 'Excellent';
            } else if (score >= 85) {
                scoreElement.classList.add('good');
                statusIcon = '✓';
                statusText = 'Good';
            } else if (score >= 70) {
                scoreElement.classList.add('fair');
                statusIcon = '⚠';
                statusText = 'Fair';
            } else if (score >= 50) {
                scoreElement.classList.add('poor');
                statusIcon = '⚠';
                statusText = 'Poor';
            } else {
                scoreElement.classList.add('critical');
                statusIcon = '✗';
                statusText = 'Critical';
            }

            scoreElement.innerHTML = `${statusIcon} ${score}<br><span style="font-size: 18px; opacity: 0.8;">${statusText}</span>`;

            // Update health interpretation
            const metrics = data.healthMetrics;
            updateHealthInterpretation(
                score,
                metrics.healthyPorts,
                metrics.warningPorts,
                metrics.errorPorts,
                metrics.downPorts,
                metrics.errorInterfaces,
                metrics.warningInterfaces
            );
        }

        // Display chassis visualization
        function displayChassisVisualization(data) {
            const container = document.getElementById('chassisContainer');
            container.innerHTML = '';

            // Sort slots
            const slots = Object.keys(data.chassis).sort();

            if (slots.length === 0) {
                container.innerHTML = '<p>No chassis information available. Interfaces may not follow standard naming convention.</p>';
                return;
            }

            slots.forEach(slotKey => {
                const slot = data.chassis[slotKey];
                const slotDiv = document.createElement('div');
                slotDiv.className = 'slot-row';

                // Calculate stats for this slot
                const stats = {
                    total: slot.ports.length,
                    up: 0,
                    down: 0,
                    errors: 0,
                    warnings: 0
                };

                slot.ports.forEach(port => {
                    const intf = port.interface;
                    if (intf.status === 'up') stats.up++;
                    else if (intf.status === 'down') stats.down++;

                    const totalErrors = intf.inputErrors + intf.outputErrors + intf.crc + intf.drops;
                    if (totalErrors >= 100) stats.errors++;
                    else if (totalErrors > 0) stats.warnings++;
                });

                slotDiv.innerHTML = `
                    <div class="slot-header">
                        <div class="slot-title">Chassis ${slot.chassis} / Slot ${slot.slot}</div>
                        <div class="slot-stats">
                            ${stats.total} ports |
                            ${stats.up} up |
                            ${stats.down} down |
                            ${stats.errors} errors |
                            ${stats.warnings} warnings
                        </div>
                    </div>
                    <div class="ports-grid" id="slot-${slotKey}"></div>
                `;

                container.appendChild(slotDiv);

                // Add ports
                const portsGrid = document.getElementById(`slot-${slotKey}`);
                slot.ports.forEach(port => {
                    const intf = port.interface;
                    const totalErrors = intf.inputErrors + intf.outputErrors + intf.crc + intf.drops;

                    let statusClass = 'error';
                    if (intf.status === 'admin-down') statusClass = 'disabled';
                    else if (intf.status === 'down') statusClass = 'down';
                    else if (totalErrors === 0) statusClass = '';
                    else if (totalErrors < 100) statusClass = 'warning';

                    const portBox = document.createElement('div');
                    portBox.className = `port-box ${statusClass}`;
                    portBox.innerHTML = `
                        ${port.port}
                        <div class="port-tooltip">
                            ${intf.name}<br>
                            Status: ${intf.status}<br>
                            Errors: ${totalErrors}<br>
                            ${intf.speed ? `Speed: ${intf.speed}<br>` : ''}
                            ${intf.description ? `Desc: ${intf.description}` : ''}
                        </div>
                    `;
                    portsGrid.appendChild(portBox);
                });
            });
        }

        // Display interface table
        function displayInterfaceTable(data) {
            const tbody = document.getElementById('interfaceTableBody');
            tbody.innerHTML = '';

            // Populate slot filter
            const slotFilter = document.getElementById('filterSlot');
            const slots = [...new Set(data.interfaces.map(intf => {
                const parsed = parseInterfaceName(intf.name);
                return parsed ? `${parsed.chassis}/${parsed.slot}` : '0/0';
            }))].sort();

            slotFilter.innerHTML = '<option value="all">All Slots</option>' +
                slots.map(slot => `<option value="${slot}">Slot ${slot}</option>`).join('');

            // Display all interfaces initially
            displayFilteredInterfaces(data.interfaces);

            // Attach filter handlers
            document.getElementById('filterStatus').addEventListener('change', () => filterInterfaces(data));
            document.getElementById('filterSlot').addEventListener('change', () => filterInterfaces(data));
            document.getElementById('filterSearch').addEventListener('input', () => filterInterfaces(data));
        }

        // Display filtered interfaces
        function displayFilteredInterfaces(interfaces) {
            const tbody = document.getElementById('interfaceTableBody');
            tbody.innerHTML = '';

            interfaces.forEach(intf => {
                const totalErrors = intf.inputErrors + intf.outputErrors + intf.crc + intf.drops;

                let statusClass = 'status-up';
                if (intf.status.includes('down')) {
                    statusClass = intf.status === 'admin-down' ? 'status-admin-down' : 'status-down';
                }

                const row = document.createElement('tr');
                row.innerHTML = `
                    <td><strong>${intf.name}</strong>${intf.description ? `<br><small>${intf.description}</small>` : ''}</td>
                    <td><span class="status-badge ${statusClass}">${intf.status}</span></td>
                    <td>${intf.speed}${intf.duplex ? ` / ${intf.duplex}` : ''}</td>
                    <td class="${intf.inputErrors > 0 ? 'error-count' : ''}">${intf.inputErrors}</td>
                    <td class="${intf.outputErrors > 0 ? 'error-count' : ''}">${intf.outputErrors}</td>
                    <td class="${intf.crc > 0 ? 'error-count' : ''}">${intf.crc}</td>
                    <td class="${intf.drops > 0 ? 'error-count' : ''}">${intf.drops}</td>
                    <td class="${intf.collisions > 0 ? 'error-count' : ''}">${intf.collisions}</td>
                `;
                tbody.appendChild(row);
            });
        }

        // Filter interfaces
        function filterInterfaces(data) {
            const statusFilter = document.getElementById('filterStatus').value;
            const slotFilter = document.getElementById('filterSlot').value;
            const searchFilter = document.getElementById('filterSearch').value.toLowerCase();

            let filtered = data.interfaces.filter(intf => {
                // Status filter
                if (statusFilter !== 'all') {
                    if (statusFilter === 'up' && intf.status !== 'up') return false;
                    if (statusFilter === 'down' && !intf.status.includes('down')) return false;
                    if (statusFilter === 'errors') {
                        const totalErrors = intf.inputErrors + intf.outputErrors + intf.crc + intf.drops;
                        if (totalErrors === 0) return false;
                    }
                }

                // Slot filter
                if (slotFilter !== 'all') {
                    const parsed = parseInterfaceName(intf.name);
                    if (!parsed) return false;
                    const slot = `${parsed.chassis}/${parsed.slot}`;
                    if (slot !== slotFilter) return false;
                }

                // Search filter
                if (searchFilter && !intf.name.toLowerCase().includes(searchFilter)) {
                    return false;
                }

                return true;
            });

            displayFilteredInterfaces(filtered);
        }

        // Display transceiver info
        function displayTransceiverInfo(data) {
            const section = document.getElementById('transceiverInfo');
            const grid = document.getElementById('transceiverGrid');
            section.style.display = 'block';
            grid.innerHTML = '';

            data.transceivers.forEach(trans => {
                const card = document.createElement('div');

                // Classify card by optical Rx power thresholds
                const rxPowerLow = trans.rxPower !== null && trans.rxPower < -15;
                const rxPowerVeryLow = trans.rxPower !== null && trans.rxPower < -30;
                let cardClass = 'transceiver-card';
                if (rxPowerVeryLow) cardClass += ' error';
                else if (rxPowerLow) cardClass += ' warning';
                card.className = cardClass;

                // Build DOM section based on available data
                let domHtml = '';
                if (trans.domSupported === false) {
                    domHtml = '<p style="color:#666;font-style:italic;margin:8px 0 0">DOM not supported</p>';
                } else if (!trans.identifier) {
                    domHtml = '<p style="color:#666;font-style:italic;margin:8px 0 0">No data</p>';
                } else {
                    const rxColor = rxPowerVeryLow ? '#dc3545' : rxPowerLow ? '#e6a817' : '#2d7a2d';
                    domHtml = `
                        <table style="width:100%;font-size:12px;border-collapse:collapse">
                            <tr>
                                <td style="padding:3px 0;color:#555">Rx Power</td>
                                <td style="padding:3px 0;text-align:right;font-weight:600;color:${rxColor}">
                                    ${trans.rxPower !== null ? trans.rxPower.toFixed(2) + ' dBm' : 'N/A'}
                                </td>
                            </tr>
                            <tr>
                                <td style="padding:3px 0;color:#555">Tx Power</td>
                                <td style="padding:3px 0;text-align:right;font-weight:600">
                                    ${trans.txPower !== null ? trans.txPower.toFixed(2) + ' dBm' : 'N/A'}
                                </td>
                            </tr>
                            <tr>
                                <td style="padding:3px 0;color:#555">Tx Bias</td>
                                <td style="padding:3px 0;text-align:right;font-weight:600">
                                    ${trans.txBias !== null ? trans.txBias.toFixed(2) + ' mA' : 'N/A'}
                                </td>
                            </tr>
                            <tr>
                                <td style="padding:3px 0;color:#555">Temperature</td>
                                <td style="padding:3px 0;text-align:right;font-weight:600">
                                    ${trans.temperature !== null ? trans.temperature.toFixed(1) + ' \u00b0C' : 'N/A'}
                                </td>
                            </tr>
                            ${trans.vcc !== null ? `<tr>
                                <td style="padding:3px 0;color:#555">Vcc</td>
                                <td style="padding:3px 0;text-align:right;font-weight:600">${trans.vcc.toFixed(3)} V</td>
                            </tr>` : ''}
                        </table>
                    `;
                }

                card.innerHTML = `
                    <div style="font-size:14px;font-weight:bold;margin:0 0 6px">${trans.portLabel || trans.port}</div>
                    ${trans.identifier ? `<div style="font-size:11px;color:#555;margin-bottom:4px">${trans.identifier}</div>` : ''}
                    ${trans.vendorName || trans.vendorPart ? `<div style="font-size:11px;color:#444;margin-bottom:4px">${trans.vendorName} ${trans.vendorPart}</div>` : ''}
                    ${trans.wavelength ? `<div style="font-size:11px;color:#666;margin-bottom:8px">\u03bb ${trans.wavelength}</div>` : ''}
                    ${domHtml}
                `;
                grid.appendChild(card);
            });
        }

        // Export functions
        document.getElementById('exportJsonBtn').addEventListener('click', function() {
            if (!parsedData) return;
            const json = JSON.stringify(parsedData, null, 2);
            downloadFile(json, 'network-analysis.json', 'application/json');
        });

        document.getElementById('exportCsvBtn').addEventListener('click', function() {
            if (!parsedData) return;
            let csv = 'Interface,Status,Speed,Duplex,Input Errors,Output Errors,CRC,Drops,Collisions\n';
            parsedData.interfaces.forEach(intf => {
                csv += `${intf.name},${intf.status},${intf.speed},${intf.duplex},${intf.inputErrors},${intf.outputErrors},${intf.crc},${intf.drops},${intf.collisions}\n`;
            });
            downloadFile(csv, 'network-analysis.csv', 'text/csv');
        });

        document.getElementById('exportReportBtn').addEventListener('click', function() {
            if (!parsedData) return;
            let report = `Network Health Analysis Report\n`;
            report += `Generated: ${new Date().toLocaleString()}\n`;
            report += `Vendor: ${parsedData.vendor}\n`;
            report += `Hostname: ${parsedData.metadata.hostname}\n`;
            report += `\n=== Summary ===\n`;
            report += `Total Ports: ${parsedData.healthMetrics.totalPorts}\n`;
            report += `Healthy: ${parsedData.healthMetrics.healthyPorts}\n`;
            report += `Warnings: ${parsedData.healthMetrics.warningPorts}\n`;
            report += `Errors: ${parsedData.healthMetrics.errorPorts}\n`;
            report += `Down: ${parsedData.healthMetrics.downPorts}\n`;
            report += `Health Score: ${parsedData.healthMetrics.healthScore}/100\n`;
            report += `\n=== Interfaces with Errors ===\n`;
            parsedData.interfaces.forEach(intf => {
                const total = intf.inputErrors + intf.outputErrors + intf.crc + intf.drops;
                if (total > 0) {
                    report += `${intf.name}: ${total} total errors (In: ${intf.inputErrors}, Out: ${intf.outputErrors}, CRC: ${intf.crc}, Drops: ${intf.drops})\n`;
                }
            });
            downloadFile(report, 'network-analysis.txt', 'text/plain');
        });

        function downloadFile(content, filename, mimeType) {
            const blob = new Blob([content], { type: mimeType });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }

        // Generate sample data for testing
        function generateSampleData() {
            let sample = `Router# show interfaces
GigabitEthernet1/0/1 is up, line protocol is up (connected)
  Hardware is Gigabit Ethernet, address is 0000.0c9f.f001
  Description: Uplink to Core
  Internet address is 10.0.1.1/30
  MTU 1500 bytes, BW 1000000 Kbit/sec, DLY 10 usec,
     reliability 255/255, txload 1/255, rxload 1/255
  Encapsulation ARPA, loopback not set
  Keepalive set (10 sec)
  Full-duplex, 1000Mb/s, media type is 10/100/1000BaseTX
  input flow-control is off, output flow-control is unsupported
  ARP type: ARPA, ARP Timeout 04:00:00
  Last input 00:00:01, output 00:00:00, output hang never
  Last clearing of "show interface" counters never
  Input queue: 0/75/0/0 (size/max/drops/flushes); Total output drops: 0
  Queueing strategy: fifo
  Output queue: 0/40 (size/max)
  5 minute input rate 1000 bits/sec, 2 packets/sec
  5 minute output rate 2000 bits/sec, 3 packets/sec
     1234567 packets input, 98765432 bytes, 0 no buffer
     Received 1234 broadcasts (0 IP multicasts)
     0 runts, 0 giants, 0 throttles
     0 input errors, 0 CRC, 0 frame, 0 overrun, 0 ignored
     0 watchdog, 123 multicast, 0 pause input
     0 input packets with dribble condition detected
     2345678 packets output, 123456789 bytes, 0 underruns
     0 output errors, 0 collisions, 1 interface resets
     0 unknown protocol drops
     0 babbles, 0 late collision, 0 deferred
     0 lost carrier, 0 no carrier, 0 pause output
     0 output buffer failures, 0 output buffers swapped out

GigabitEthernet1/0/2 is up, line protocol is up (connected)
  Hardware is Gigabit Ethernet, address is 0000.0c9f.f002
  Description: Server VLAN
  MTU 1500 bytes, BW 1000000 Kbit/sec
  Full-duplex, 1000Mb/s
     1000 packets input, 50000 bytes
     5 input errors, 2 CRC, 3 frame, 0 overrun, 0 ignored
     2000 packets output, 100000 bytes
     10 output errors, 5 collisions

GigabitEthernet1/0/3 is down, line protocol is down (notconnect)
  Hardware is Gigabit Ethernet, address is 0000.0c9f.f003
     0 packets input, 0 bytes
     0 input errors, 0 CRC, 0 frame, 0 overrun, 0 ignored
     0 packets output, 0 bytes
     0 output errors, 0 collisions

`;

            // Add more interfaces for realistic testing
            for (let slot = 0; slot <= 2; slot++) {
                for (let port = 1; port <= 48; port++) {
                    const hasErrors = Math.random() > 0.9;
                    const isDown = Math.random() > 0.95;
                    const status = isDown ? 'down' : 'up';
                    const inputErrors = hasErrors ? Math.floor(Math.random() * 500) : 0;
                    const crc = hasErrors ? Math.floor(Math.random() * 50) : 0;

                    sample += `
GigabitEthernet1/${slot}/${port} is ${status}, line protocol is ${status}
  Hardware is Gigabit Ethernet
  Full-duplex, 1000Mb/s
     ${Math.floor(Math.random() * 1000000)} packets input
     ${inputErrors} input errors, ${crc} CRC, 0 frame
     ${Math.floor(Math.random() * 1000000)} packets output
     ${hasErrors ? Math.floor(Math.random() * 100) : 0} output errors
`;
                }
            }

            return sample;
        }
    </script>