diff --git a/aa-index.h b/aa-index.h
new file mode 100644
index 0000000..fd624fa
--- /dev/null
+++ b/aa-index.h
@@ -0,0 +1,1348 @@
+#ifndef INDEX_H
+#define INDEX_H
+
+const char index_html[] PROGMEM = R"rawliteral(
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Byun CAN Logger v2.5</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 10px;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+            overflow: hidden;
+        }
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 20px;
+            text-align: center;
+        }
+        .header h1 { font-size: 1.8em; margin-bottom: 5px; }
+        .header p { opacity: 0.9; font-size: 0.9em; }
+        .nav {
+            background: #2c3e50;
+            padding: 10px;
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+        .nav a {
+            color: white;
+            text-decoration: none;
+            padding: 10px 15px;
+            border-radius: 5px;
+            transition: all 0.3s;
+            font-size: 0.9em;
+            white-space: nowrap;
+        }
+        .nav a:hover { background: #34495e; }
+        .nav a.active { background: #3498db; }
+        .content { padding: 15px; }
+        
+        /* PSRAM 상태 표시 (NEW) */
+        .psram-status {
+            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+            color: white;
+            padding: 10px 15px;
+            border-radius: 8px;
+            margin-bottom: 15px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            box-shadow: 0 3px 10px rgba(79, 172, 254, 0.3);
+        }
+        .psram-status-label {
+            font-size: 0.85em;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .psram-status-values {
+            display: flex;
+            gap: 15px;
+            align-items: center;
+        }
+        .psram-status-item {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+        }
+        .psram-status-item-label {
+            font-size: 0.7em;
+            opacity: 0.9;
+        }
+        .psram-status-value {
+            font-family: 'Courier New', monospace;
+            font-size: 1.2em;
+            font-weight: 700;
+        }
+        
+        /* 전력 경고 배너 */
+        .power-warning {
+            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
+            color: white;
+            padding: 12px 20px;
+            border-radius: 8px;
+            margin-bottom: 15px;
+            display: none;
+            align-items: center;
+            gap: 10px;
+            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
+            animation: pulse 2s ease-in-out infinite;
+        }
+        .power-warning.show { display: flex; }
+        .power-warning-icon { font-size: 1.5em; }
+        .power-warning-text { flex: 1; font-weight: 600; }
+        .power-voltage { 
+            font-family: 'Courier New', monospace; 
+            font-size: 1.2em; 
+            font-weight: 700;
+            background: rgba(255,255,255,0.2);
+            padding: 5px 12px;
+            border-radius: 5px;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.85; }
+        }
+        
+        /* 전력 상태 표시 */
+        .power-status {
+            background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
+            color: white;
+            padding: 10px 15px;
+            border-radius: 8px;
+            margin-bottom: 15px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            box-shadow: 0 3px 10px rgba(86, 171, 47, 0.3);
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+        .power-status.low {
+            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
+            box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3);
+        }
+        .power-status-label {
+            font-size: 0.85em;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .power-status-values {
+            display: flex;
+            gap: 15px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        .power-status-item {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+        }
+        .power-status-item-label {
+            font-size: 0.7em;
+            opacity: 0.9;
+        }
+        .power-status-value {
+            font-family: 'Courier New', monospace;
+            font-size: 1.2em;
+            font-weight: 700;
+        }
+        
+        /* 큐 상태 표시 - 2개 (CAN + Serial) */
+        .queue-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 10px;
+            margin-bottom: 15px;
+        }
+        .queue-status {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 10px 15px;
+            border-radius: 8px;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
+        }
+        .queue-status.warning {
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        }
+        .queue-status.critical {
+            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
+            animation: pulse 2s ease-in-out infinite;
+        }
+        .queue-info {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .queue-bar-container {
+            height: 20px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+            overflow: hidden;
+            position: relative;
+        }
+        .queue-bar {
+            height: 100%;
+            background: rgba(255, 255, 255, 0.8);
+            border-radius: 10px;
+            transition: width 0.3s ease;
+        }
+        .queue-text {
+            position: absolute;
+            width: 100%;
+            text-align: center;
+            line-height: 20px;
+            font-size: 0.75em;
+            font-weight: 700;
+            color: white;
+            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+        }
+        
+        .time-sync-banner {
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            color: white;
+            padding: 15px 20px;
+            border-radius: 10px;
+            margin-bottom: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 15px;
+            box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4);
+        }
+        .time-sync-info {
+            display: flex;
+            gap: 20px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        .time-info-item {
+            display: flex;
+            flex-direction: column;
+            gap: 3px;
+        }
+        .time-label {
+            font-size: 0.75em;
+            opacity: 0.9;
+            font-weight: 600;
+        }
+        .time-value {
+            font-family: 'Courier New', monospace;
+            font-size: 1.1em;
+            font-weight: 700;
+        }
+        .btn-time-sync {
+            background: white;
+            color: #f5576c;
+            padding: 12px 24px;
+            border: none;
+            border-radius: 8px;
+            font-size: 1em;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.3s;
+            white-space: nowrap;
+        }
+        .btn-time-sync:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+        }
+        
+        .status-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+        .status-card {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 15px;
+            border-radius: 10px;
+            text-align: center;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+            transition: all 0.3s;
+        }
+        .status-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+        }
+        .status-card h3 {
+            font-size: 0.75em;
+            opacity: 0.9;
+            margin-bottom: 8px;
+            letter-spacing: 1px;
+        }
+        .status-card .value {
+            font-size: 1.5em;
+            font-weight: 700;
+            font-family: 'Courier New', monospace;
+        }
+        .status-card.status-on {
+            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+        }
+        .status-card.status-off {
+            background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
+        }
+        
+        h2 {
+            color: #333;
+            margin: 20px 0 10px 0;
+            font-size: 1.3em;
+            border-bottom: 3px solid #667eea;
+            padding-bottom: 8px;
+        }
+        
+        .control-panel {
+            background: #f8f9fa;
+            padding: 15px;
+            border-radius: 10px;
+            margin-bottom: 20px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+        .control-row {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 10px;
+            flex-wrap: wrap;
+        }
+        .control-row:last-child {
+            margin-bottom: 0;
+        }
+        .control-row label {
+            font-weight: 600;
+            color: #333;
+            white-space: nowrap;
+        }
+        .control-row select {
+            padding: 8px 12px;
+            border: 2px solid #ddd;
+            border-radius: 5px;
+            font-size: 0.95em;
+            transition: all 0.3s;
+            background: white;
+        }
+        .control-row select:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+        .control-row button {
+            padding: 8px 16px;
+            border: none;
+            border-radius: 5px;
+            font-size: 0.95em;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+        .control-row button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        }
+        
+        .can-table-container {
+            overflow-x: auto;
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            min-width: 600px;
+        }
+        thead {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+        th {
+            padding: 12px 8px;
+            text-align: left;
+            font-weight: 600;
+            font-size: 0.85em;
+            letter-spacing: 0.5px;
+        }
+        td {
+            padding: 10px 8px;
+            border-bottom: 1px solid #eee;
+            font-size: 0.9em;
+        }
+        tr:hover {
+            background: #f8f9fa;
+        }
+        .mono {
+            font-family: 'Courier New', monospace;
+            font-weight: 500;
+        }
+        @keyframes flash {
+            0%, 100% { background-color: transparent; }
+            50% { background-color: #fff3cd; }
+        }
+        .flash-row {
+            animation: flash 0.3s ease-in-out;
+        }
+        
+        .file-list {
+            background: #f8f9fa;
+            border-radius: 10px;
+            padding: 15px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+        .file-item {
+            background: white;
+            border: 1px solid #e0e0e0;
+            padding: 12px;
+            margin-bottom: 10px;
+            border-radius: 8px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+            transition: all 0.3s;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+        .file-item:hover {
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            transform: translateY(-2px);
+        }
+        .file-item:last-child {
+            margin-bottom: 0;
+        }
+        .file-item.logging {
+            border: 2px solid #11998e;
+            background: linear-gradient(135deg, rgba(17, 153, 142, 0.05) 0%, rgba(56, 239, 125, 0.05) 100%);
+        }
+        .file-item.selected {
+            border: 2px solid #667eea;
+            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+        }
+        .file-checkbox {
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
+        }
+        .file-info {
+            flex: 1;
+            min-width: 200px;
+        }
+        .file-name {
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 4px;
+            font-family: 'Courier New', monospace;
+            font-size: 0.95em;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+        .file-comment {
+            font-size: 0.85em;
+            color: #666;
+            font-style: italic;
+            margin-top: 4px;
+        }
+        .file-size {
+            color: #666;
+            font-size: 0.85em;
+        }
+        .file-actions {
+            display: flex;
+            gap: 8px;
+        }
+        .logging-badge {
+            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+            color: white;
+            padding: 3px 8px;
+            border-radius: 4px;
+            font-size: 0.75em;
+            font-weight: 700;
+            letter-spacing: 0.5px;
+        }
+        .download-btn, .delete-btn, .comment-btn {
+            padding: 6px 12px;
+            border: none;
+            border-radius: 5px;
+            font-size: 0.85em;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+            white-space: nowrap;
+        }
+        .download-btn {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+        .download-btn:hover {
+            background: linear-gradient(135deg, #5568d3 0%, #66409e 100%);
+        }
+        .comment-btn {
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            color: white;
+        }
+        .comment-btn:hover {
+            background: linear-gradient(135deg, #e77fe8 0%, #e44459 100%);
+        }
+        .delete-btn {
+            background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
+            color: white;
+        }
+        .delete-btn:hover {
+            background: linear-gradient(135deg, #d32f3f 0%, #e53935 100%);
+        }
+        .delete-btn:disabled, .comment-btn:disabled {
+            background: #cccccc;
+            cursor: not-allowed;
+            opacity: 0.6;
+        }
+        
+        /* 모달 스타일 */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.5);
+        }
+        .modal-content {
+            background-color: white;
+            margin: 15% auto;
+            padding: 25px;
+            border-radius: 10px;
+            width: 90%;
+            max-width: 500px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+        }
+        .modal-header {
+            font-size: 1.3em;
+            font-weight: 700;
+            color: #333;
+            margin-bottom: 15px;
+        }
+        .modal-body {
+            margin-bottom: 20px;
+        }
+        .modal-body label {
+            display: block;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 8px;
+        }
+        .modal-body input, .modal-body textarea {
+            width: 100%;
+            padding: 10px;
+            border: 2px solid #ddd;
+            border-radius: 5px;
+            font-size: 1em;
+            font-family: inherit;
+        }
+        .modal-body input:focus, .modal-body textarea:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+        .modal-buttons {
+            display: flex;
+            gap: 10px;
+            justify-content: flex-end;
+        }
+        .modal-buttons button {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 5px;
+            font-size: 1em;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        .btn-modal-save {
+            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+            color: white;
+        }
+        .btn-modal-cancel {
+            background: #ddd;
+            color: #333;
+        }
+        
+        /* 파일 형식 선택 라디오 버튼 스타일 */
+        .format-selector {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            background: white;
+            padding: 8px 15px;
+            border-radius: 8px;
+            border: 2px solid #667eea;
+        }
+        
+        .format-selector label {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            cursor: pointer;
+            font-weight: 600;
+            color: #2c3e50;
+            font-size: 0.9em;
+            transition: all 0.3s;
+        }
+        
+        .format-selector label:hover {
+            color: #667eea;
+        }
+        
+        .format-selector input[type="radio"] {
+            width: 18px;
+            height: 18px;
+            cursor: pointer;
+            accent-color: #667eea;
+        }
+        
+        .format-info {
+            font-size: 0.75em;
+            color: #7f8c8d;
+            margin-left: 3px;
+        }
+        
+        @media (max-width: 768px) {
+            body { padding: 5px; }
+            .header h1 { font-size: 1.5em; }
+            .header p { font-size: 0.85em; }
+            .content { padding: 10px; }
+            .status-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
+            .status-card { padding: 10px; }
+            .status-card h3 { font-size: 0.7em; }
+            .status-card .value { font-size: 1.2em; }
+            h2 { font-size: 1.1em; }
+            .nav a { padding: 8px 12px; font-size: 0.85em; }
+            table { min-width: 400px; }
+            th, td { padding: 6px 4px; font-size: 0.75em; }
+            .queue-container { grid-template-columns: 1fr; }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🚗 Byun CAN Logger v2.5 PSRAM</h1>
+            <p>ESP32-S3 High Performance Edition - 1Mbps CAN + Serial Logger</p>
+        </div>
+        
+        <div class="nav">
+            <a href="/" class="active">📊 Monitor</a>
+            <a href="/transmit">📤 Transmit</a>
+            <a href="/graph">📈 Graph</a>
+            <a href="/graph-view">📊 Graph View</a>
+            <a href="/settings">⚙️ Settings</a>
+            <a href="/serial">📟 Serial</a>
+        </div>
+        
+        <div class="content">
+            <div class="time-sync-banner">
+                <div class="time-sync-info">
+                    <div class="time-info-item">
+                        <div class="time-label">CURRENT TIME</div>
+                        <div class="time-value" id="current-time">--:--:--</div>
+                    </div>
+                    <div class="time-info-item">
+                        <div class="time-label">CONNECTION</div>
+                        <div class="time-value" id="sync-status">연결 중...</div>
+                    </div>
+                </div>
+                <button class="btn-time-sync" onclick="syncTimeFromPhone()">📱 Sync from Phone</button>
+            </div>
+            
+            <!-- PSRAM 상태 표시 (NEW) -->
+            <div class="psram-status">
+                <div class="psram-status-label">
+                    <span>💾</span>
+                    <span>PSRAM STATUS</span>
+                </div>
+                <div class="psram-status-values">
+                    <div class="psram-status-item">
+                        <div class="psram-status-item-label">TOTAL</div>
+                        <div class="psram-status-value" id="psram-total">8192 KB</div>
+                    </div>
+                    <div class="psram-status-item">
+                        <div class="psram-status-item-label">FREE</div>
+                        <div class="psram-status-value" id="psram-free">---- KB</div>
+                    </div>
+                    <div class="psram-status-item">
+                        <div class="psram-status-item-label">USAGE</div>
+                        <div class="psram-status-value" id="psram-usage">---%</div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="power-status" id="power-status">
+                <div class="power-status-label">
+                    <span>⚡</span>
+                    <span>POWER STATUS</span>
+                </div>
+                <div class="power-status-values">
+                    <div class="power-status-item">
+                        <div class="power-status-item-label">CURRENT</div>
+                        <div class="power-status-value" id="voltage-current">-.--V</div>
+                    </div>
+                    <div class="power-status-item">
+                        <div class="power-status-item-label">MIN (1s)</div>
+                        <div class="power-status-value" id="voltage-min">-.--V</div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 큐 상태 표시 (CAN + Serial) -->
+            <div class="queue-container">
+                <div class="queue-status" id="can-queue-status">
+                    <div class="queue-info">
+                        <span style="font-size: 1.2em;">📦</span>
+                        <span style="font-weight: 700; font-size: 0.9em;">CAN QUEUE</span>
+                    </div>
+                    <div class="queue-bar-container">
+                        <div class="queue-bar" id="can-queue-bar" style="width: 0%;"></div>
+                        <div class="queue-text" id="can-queue-text">0 / 10000</div>
+                    </div>
+                </div>
+                
+                <div class="queue-status" id="serial-queue-status">
+                    <div class="queue-info">
+                        <span style="font-size: 1.2em;">📟</span>
+                        <span style="font-weight: 700; font-size: 0.9em;">SERIAL QUEUE</span>
+                    </div>
+                    <div class="queue-bar-container">
+                        <div class="queue-bar" id="serial-queue-bar" style="width: 0%;"></div>
+                        <div class="queue-text" id="serial-queue-text">0 / 2000</div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="status-grid">
+                <div class="status-card status-off" id="logging-status">
+                    <h3>CAN LOGGING</h3>
+                    <div class="value">OFF</div>
+                </div>
+                <div class="status-card status-off" id="serial-logging-status">
+                    <h3>SERIAL LOGGING</h3>
+                    <div class="value">OFF</div>
+                </div>
+                <div class="status-card status-off" id="sd-status">
+                    <h3>SD CARD</h3>
+                    <div class="value">NOT READY</div>
+                </div>
+                <div class="status-card">
+                    <h3>CAN MESSAGES</h3>
+                    <div class="value" id="msg-count">0</div>
+                </div>
+                <div class="status-card">
+                    <h3>CAN SPEED</h3>
+                    <div class="value" id="msg-speed">0/s</div>
+                </div>
+                <div class="status-card">
+                    <h3>CAN TX</h3>
+                    <div class="value" id="tx-count">0</div>
+                </div>
+                <div class="status-card status-off" id="time-sync-card">
+                    <h3>TIME SYNC</h3>
+                    <div class="value" id="sync-count">0</div>
+                </div>
+                <div class="status-card" id="mcp-mode-card">
+                    <h3>MCP MODE</h3>
+                    <div class="value" id="mcp-mode-display">NORMAL</div>
+                </div>
+            </div>
+            
+            <div class="control-panel">
+                <h2>Control Panel</h2>
+                <div class="control-row">
+                    <label for="can-speed">CAN Speed:</label>
+                    <select id="can-speed">
+                        <option value="0">125 Kbps</option>
+                        <option value="1">250 Kbps</option>
+                        <option value="2">500 Kbps</option>
+                        <option value="3" selected>1 Mbps</option>
+                    </select>
+                    <button onclick="setCanSpeed()">Apply</button>
+                    <span id="speed-status" style="color: #11998e; font-size: 0.85em; font-weight: 600;"></span>
+                </div>
+                <div class="control-row">
+                    <label for="mcp-mode">MCP2515 Mode:</label>
+                    <select id="mcp-mode">
+                        <option value="0" selected>Normal (TX/RX + ACK)</option>
+                        <option value="1">Listen-Only (RX only, no ACK)</option>
+                        <option value="2">Loopback (Self-test)</option>
+                        <option value="3">Transmit Only (TX auto-switch)</option>
+                    </select>
+                    <button onclick="setMcpMode()">Apply</button>
+                    <span id="mode-status" style="color: #11998e; font-size: 0.85em; font-weight: 600;"></span>
+                </div>
+                <div class="control-row">
+                    <label style="font-weight: 600; color: #333;">📁 CAN Format:</label>
+                    <div class="format-selector">
+                        <label>
+                            <input type="radio" name="can-format" value="bin" checked>
+                            <span>📦 BIN</span>
+                            <span class="format-info">(Fast)</span>
+                        </label>
+                        <label>
+                            <input type="radio" name="can-format" value="csv">
+                            <span>📄 CSV</span>
+                            <span class="format-info">(Excel)</span>
+                        </label>
+                    </div>
+                </div>
+                <div class="control-row">
+                    <button onclick="startLogging()" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">Start CAN Logging</button>
+                    <button onclick="stopLogging()" style="background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);">Stop CAN Logging</button>
+                    <button onclick="refreshFiles()">Refresh Files</button>
+                    <button onclick="clearMessages()">Clear Display</button>
+                </div>
+            </div>
+            
+            <h2>CAN Messages (Real-time by ID)</h2>
+            <div class="can-table-container">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>ID</th>
+                            <th>DLC</th>
+                            <th>Data</th>
+                            <th>Count</th>
+                            <th>Last Update</th>
+                        </tr>
+                    </thead>
+                    <tbody id="can-messages"></tbody>
+                </table>
+            </div>
+            
+            <h2>Log Files</h2>
+            <div class="control-row" style="margin-bottom: 10px;">
+                <button onclick="selectAllFiles()" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">Select All</button>
+                <button onclick="deselectAllFiles()" style="background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 100%);">Deselect All</button>
+                <button onclick="downloadSelectedFiles()" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">Download Selected</button>
+                <button onclick="deleteSelectedFiles()" style="background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);">Delete Selected</button>
+            </div>
+            <div class="file-list" id="file-list">
+                <p style="text-align: center; color: #666; font-size: 0.9em;">Loading...</p>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 커멘트 추가 모달 -->
+    <div id="commentModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">Add File Comment</div>
+            <div class="modal-body">
+                <label>File: <span id="comment-filename" style="font-family: 'Courier New', monospace;"></span></label>
+                <label for="comment-input" style="margin-top: 10px;">Comment:</label>
+                <textarea id="comment-input" rows="3" maxlength="128" placeholder="Enter description..."></textarea>
+            </div>
+            <div class="modal-buttons">
+                <button class="btn-modal-cancel" onclick="closeCommentModal()">Cancel</button>
+                <button class="btn-modal-save" onclick="saveComment()">Save</button>
+            </div>
+        </div>
+    </div>
+    
+    <script>
+        let ws;
+        let canMessages = {};
+        let messageOrder = [];
+        let lastMessageData = {};
+        let lastCanCounts = {};
+        const speedNames = {0: '125K', 1: '250K', 2: '500K', 3: '1M'};
+        const modeNames = {0: 'NORMAL', 1: 'LISTEN', 2: 'LOOPBACK', 3: 'TX-ONLY'};
+        let currentLoggingFile = '';
+        let currentSerialLoggingFile = '';
+        let commentingFile = '';
+        let hasInitialSync = false;
+        
+        function updateCurrentTime() {
+            const now = new Date();
+            const timeStr = now.toLocaleTimeString('ko-KR', {hour12: false});
+            document.getElementById('current-time').textContent = timeStr;
+        }
+        setInterval(updateCurrentTime, 1000);
+        updateCurrentTime();
+        
+        function syncTimeFromPhone() {
+            const now = new Date();
+            const timeData = {
+                cmd: 'syncTimeFromPhone',
+                year: now.getFullYear(),
+                month: now.getMonth() + 1,
+                day: now.getDate(),
+                hour: now.getHours(),
+                minute: now.getMinutes(),
+                second: now.getSeconds()
+            };
+            
+            if (ws && ws.readyState === WebSocket.OPEN) {
+                ws.send(JSON.stringify(timeData));
+                console.log('Time sync:', timeData);
+            }
+        }
+        
+        function initWebSocket() {
+            ws = new WebSocket('ws://' + window.location.hostname + ':81/');
+            
+            ws.onopen = function() {
+                console.log('WebSocket connected');
+                document.getElementById('sync-status').textContent = '연결됨';
+                document.getElementById('sync-status').style.color = '#38ef7d';
+                
+                if (!hasInitialSync) {
+                    setTimeout(syncTimeFromPhone, 500);
+                    hasInitialSync = true;
+                }
+            };
+            
+            ws.onclose = function() {
+                console.log('WebSocket disconnected');
+                document.getElementById('sync-status').textContent = '연결 끊김';
+                document.getElementById('sync-status').style.color = '#f45c43';
+                setTimeout(initWebSocket, 3000);
+            };
+            
+            ws.onerror = function(error) {
+                console.error('WebSocket error:', error);
+            };
+            
+            ws.onmessage = function(event) {
+                try {
+                    const data = JSON.parse(event.data);
+                    
+                    if (data.type === 'update') {
+                        updateStatus(data);
+                        if (data.messages && data.messages.length > 0) {
+                            updateCanMessages(data.messages);
+                        }
+                    } else if (data.type === 'files') {
+                        updateFileList(data.list);
+                    }
+                } catch (e) {
+                    console.error('Parse error:', e);
+                }
+            };
+        }
+        
+        function updateStatus(data) {
+            // CAN 로깅
+            const loggingCard = document.getElementById('logging-status');
+            if (data.logging) {
+                loggingCard.classList.add('status-on');
+                loggingCard.classList.remove('status-off');
+                loggingCard.querySelector('.value').textContent = 'ON';
+            } else {
+                loggingCard.classList.remove('status-on');
+                loggingCard.classList.add('status-off');
+                loggingCard.querySelector('.value').textContent = 'OFF';
+            }
+            
+            // Serial 로깅
+            const serialLoggingCard = document.getElementById('serial-logging-status');
+            if (data.serialLogging) {
+                serialLoggingCard.classList.add('status-on');
+                serialLoggingCard.classList.remove('status-off');
+                serialLoggingCard.querySelector('.value').textContent = 'ON';
+            } else {
+                serialLoggingCard.classList.remove('status-on');
+                serialLoggingCard.classList.add('status-off');
+                serialLoggingCard.querySelector('.value').textContent = 'OFF';
+            }
+            
+            // SD 카드
+            const sdCard = document.getElementById('sd-status');
+            if (data.sdReady) {
+                sdCard.classList.add('status-on');
+                sdCard.classList.remove('status-off');
+                sdCard.querySelector('.value').textContent = 'READY';
+            } else {
+                sdCard.classList.remove('status-on');
+                sdCard.classList.add('status-off');
+                sdCard.querySelector('.value').textContent = 'NO SD';
+            }
+            
+            // CAN Queue
+            const canQueueUsed = data.queueUsed || 0;
+            const canQueueMax = data.queueSize || 10000;
+            const canQueuePercent = (canQueueUsed / canQueueMax) * 100;
+            document.getElementById('can-queue-bar').style.width = canQueuePercent + '%';
+            document.getElementById('can-queue-text').textContent = canQueueUsed + ' / ' + canQueueMax;
+            
+            const canQueueStatus = document.getElementById('can-queue-status');
+            canQueueStatus.classList.remove('warning', 'critical');
+            if (canQueuePercent > 90) {
+                canQueueStatus.classList.add('critical');
+            } else if (canQueuePercent > 70) {
+                canQueueStatus.classList.add('warning');
+            }
+            
+            // Serial Queue
+            const serialQueueUsed = data.serialQueueUsed || 0;
+            const serialQueueMax = data.serialQueueSize || 2000;
+            const serialQueuePercent = (serialQueueUsed / serialQueueMax) * 100;
+            document.getElementById('serial-queue-bar').style.width = serialQueuePercent + '%';
+            document.getElementById('serial-queue-text').textContent = serialQueueUsed + ' / ' + serialQueueMax;
+            
+            const serialQueueStatus = document.getElementById('serial-queue-status');
+            serialQueueStatus.classList.remove('warning', 'critical');
+            if (serialQueuePercent > 90) {
+                serialQueueStatus.classList.add('critical');
+            } else if (serialQueuePercent > 70) {
+                serialQueueStatus.classList.add('warning');
+            }
+            
+            // PSRAM 상태 (NEW)
+            if (data.psramFree !== undefined) {
+                document.getElementById('psram-free').textContent = (data.psramFree / 1024).toFixed(0) + ' KB';
+                const psramTotal = 8192; // 8MB
+                const psramUsed = psramTotal - (data.psramFree / 1024);
+                const psramUsage = ((psramUsed / psramTotal) * 100).toFixed(1);
+                document.getElementById('psram-usage').textContent = psramUsage + '%';
+            }
+            
+            // 메시지 카운트
+            if (data.totalMsg !== undefined) {
+                document.getElementById('msg-count').textContent = data.totalMsg.toLocaleString();
+            }
+            if (data.msgPerSec !== undefined) {
+                document.getElementById('msg-speed').textContent = data.msgPerSec + '/s';
+            }
+            if (data.totalTx !== undefined) {
+                document.getElementById('tx-count').textContent = data.totalTx.toLocaleString();
+            }
+            
+            // 시간 동기화
+            const timeSyncCard = document.getElementById('time-sync-card');
+            if (data.timeSync) {
+                timeSyncCard.classList.add('status-on');
+                timeSyncCard.classList.remove('status-off');
+                document.getElementById('sync-count').textContent = data.syncCount || 0;
+            } else {
+                timeSyncCard.classList.remove('status-on');
+                timeSyncCard.classList.add('status-off');
+                document.getElementById('sync-count').textContent = '0';
+            }
+            
+            // MCP 모드
+            if (data.mcpMode !== undefined) {
+                document.getElementById('mcp-mode-display').textContent = modeNames[data.mcpMode];
+            }
+            
+            // 전압
+            if (data.voltage !== undefined) {
+                document.getElementById('voltage-current').textContent = data.voltage.toFixed(2) + 'V';
+            }
+            if (data.minVoltage !== undefined) {
+                document.getElementById('voltage-min').textContent = data.minVoltage.toFixed(2) + 'V';
+            }
+            if (data.lowVoltage) {
+                document.getElementById('power-status').classList.add('low');
+            } else {
+                document.getElementById('power-status').classList.remove('low');
+            }
+            
+            // 현재 파일
+            currentLoggingFile = data.currentFile || '';
+            currentSerialLoggingFile = data.currentSerialFile || '';
+        }
+        
+        function updateCanMessages(messages) {
+            let hasNewData = false;
+            
+            messages.forEach(msg => {
+                if (msg.count > 0) {
+                    const canId = msg.id.toString(16).toUpperCase();
+                    const prevCount = lastCanCounts[canId] || 0;
+                    
+                    if (msg.count > prevCount) {
+                        if (!canMessages[canId]) {
+                            messageOrder.push(canId);
+                        }
+                        
+                        let dataStr = '';
+                        if (msg.data && msg.data.length > 0) {
+                            dataStr = msg.data.map(b => b.toString(16).toUpperCase().padStart(2, '0')).join(' ');
+                        }
+                        
+                        canMessages[canId] = {
+                            timestamp: Date.now(),
+                            dlc: msg.dlc,
+                            data: dataStr,
+                            updateCount: msg.count
+                        };
+                        
+                        lastCanCounts[canId] = msg.count;
+                        hasNewData = true;
+                    }
+                }
+            });
+            
+            if (hasNewData) {
+                updateCanTable();
+            }
+        }
+        
+        function updateCanTable() {
+            const tbody = document.getElementById('can-messages');
+            const existingRows = new Map();
+            Array.from(tbody.rows).forEach(row => {
+                existingRows.set(row.dataset.canId, row);
+            });
+            
+            messageOrder.forEach(canId => {
+                const msg = canMessages[canId];
+                let row = existingRows.get(canId);
+                
+                let displayId = parseInt(canId, 16);
+                if (displayId & 0x80000000) {
+                    displayId = displayId & 0x1FFFFFFF;
+                }
+                const displayIdStr = '0x' + displayId.toString(16).toUpperCase().padStart(8, '0');
+                
+                const timeStr = new Date(msg.timestamp).toLocaleTimeString('ko-KR', {hour12: false});
+                
+                if (row) {
+                    row.cells[0].textContent = displayIdStr;
+                    row.cells[1].textContent = msg.dlc;
+                    row.cells[2].textContent = msg.data;
+                    row.cells[3].textContent = msg.updateCount;
+                    row.cells[4].textContent = timeStr;
+                    
+                    row.classList.add('flash-row');
+                    setTimeout(() => row.classList.remove('flash-row'), 300);
+                } else {
+                    row = tbody.insertRow();
+                    row.dataset.canId = canId;
+                    row.innerHTML = 
+                        '<td class="mono">' + displayIdStr + '</td>' +
+                        '<td>' + msg.dlc + '</td>' +
+                        '<td class="mono">' + msg.data + '</td>' +
+                        '<td>' + msg.updateCount + '</td>' +
+                        '<td>' + timeStr + '</td>';
+                    row.classList.add('flash-row');
+                    setTimeout(() => row.classList.remove('flash-row'), 300);
+                }
+            });
+        }
+        
+        function updateFileList(files) {
+            const fileList = document.getElementById('file-list');
+            
+            if (!files || files.length === 0) {
+                fileList.innerHTML = '<p style="text-align: center; color: #666;">No files</p>';
+                return;
+            }
+            
+            files.sort((a, b) => b.name.localeCompare(a.name));
+            
+            fileList.innerHTML = '';
+            files.forEach(file => {
+                const isCanLogging = (currentLoggingFile && file.name === currentLoggingFile);
+                const isSerialLogging = (currentSerialLoggingFile && file.name === currentSerialLoggingFile);
+                const isLogging = isCanLogging || isSerialLogging;
+                
+                const fileItem = document.createElement('div');
+                fileItem.className = 'file-item' + (isLogging ? ' logging' : '');
+                
+                let nameHtml = '<div class="file-name">' + file.name;
+                if (isCanLogging) {
+                    nameHtml += '<span class="logging-badge">CAN LOGGING</span>';
+                }
+                if (isSerialLogging) {
+                    nameHtml += '<span class="logging-badge" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">SERIAL LOGGING</span>';
+                }
+                nameHtml += '</div>';
+                
+                let commentHtml = '';
+                if (file.comment) {
+                    commentHtml = '<div class="file-comment">' + file.comment + '</div>';
+                }
+                
+                fileItem.innerHTML = 
+                    '<input type="checkbox" class="file-checkbox" data-filename="' + file.name + '" ' +
+                    (isLogging ? 'disabled' : '') + '>' +
+                    '<div class="file-info">' +
+                        nameHtml +
+                        '<div class="file-size">' + formatBytes(file.size) + '</div>' +
+                        commentHtml +
+                    '</div>' +
+                    '<div class="file-actions">' +
+                        '<button class="comment-btn" onclick="openCommentModal(\'' + file.name + '\')" ' + 
+                        (isLogging ? 'disabled' : '') + '>Comment</button>' +
+                        '<button class="download-btn" onclick="downloadFile(\'' + file.name + '\')">Download</button>' +
+                        '<button class="delete-btn" onclick="deleteFile(\'' + file.name + '\')" ' + 
+                        (isLogging ? 'disabled' : '') + '>Delete</button>' +
+                    '</div>';
+                fileList.appendChild(fileItem);
+            });
+        }
+        
+        function formatBytes(bytes) {
+            if (bytes < 1024) return bytes + ' B';
+            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
+            return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
+        }
+        
+        function setCanSpeed() {
+            const speed = document.getElementById('can-speed').value;
+            ws.send(JSON.stringify({cmd: 'setSpeed', speed: parseInt(speed)}));
+            console.log('CAN speed set:', speedNames[speed]);
+        }
+        
+        function setMcpMode() {
+            const mode = document.getElementById('mcp-mode').value;
+            ws.send(JSON.stringify({cmd: 'setMcpMode', mode: parseInt(mode)}));
+            console.log('MCP mode set:', modeNames[mode]);
+        }
+        
+        function startLogging() {
+            if (ws && ws.readyState === WebSocket.OPEN) {
+                let canFormat = 'bin';
+                const formatRadios = document.getElementsByName('can-format');
+                for (const radio of formatRadios) {
+                    if (radio.checked) {
+                        canFormat = radio.value;
+                        break;
+                    }
+                }
+                
+                ws.send(JSON.stringify({cmd: 'startLogging', format: canFormat}));
+                console.log('Start CAN logging:', canFormat);
+                setTimeout(refreshFiles, 1000);
+            }
+        }
+        
+        function stopLogging() {
+            if (ws && ws.readyState === WebSocket.OPEN) {
+                ws.send(JSON.stringify({cmd: 'stopLogging'}));
+                console.log('Stop CAN logging');
+                setTimeout(refreshFiles, 1000);
+            }
+        }
+        
+        function refreshFiles() {
+            if (ws && ws.readyState === WebSocket.OPEN) {
+                ws.send(JSON.stringify({cmd: 'getFiles'}));
+            }
+        }
+        
+        function clearMessages() {
+            canMessages = {};
+            messageOrder = [];
+            lastMessageData = {};
+            lastCanCounts = {};
+            document.getElementById('can-messages').innerHTML = '';
+        }
+        
+        function downloadFile(filename) {
+            window.location.href = '/download?file=' + encodeURIComponent(filename);
+        }
+        
+        function deleteFile(filename) {
+            if (!confirm('Delete "' + filename + '"?')) return;
+            if (ws && ws.readyState === WebSocket.OPEN) {
+                ws.send(JSON.stringify({cmd: 'deleteFile', filename: filename}));
+            }
+        }
+        
+        function openCommentModal(filename) {
+            commentingFile = filename;
+            document.getElementById('comment-filename').textContent = filename;
+            document.getElementById('comment-input').value = '';
+            document.getElementById('commentModal').style.display = 'block';
+        }
+        
+        function closeCommentModal() {
+            document.getElementById('commentModal').style.display = 'none';
+        }
+        
+        function saveComment() {
+            const comment = document.getElementById('comment-input').value.trim();
+            if (!comment) return alert('Enter comment');
+            
+            if (ws && ws.readyState === WebSocket.OPEN) {
+                ws.send(JSON.stringify({cmd: 'addComment', filename: commentingFile, comment: comment}));
+            }
+            closeCommentModal();
+        }
+        
+        function selectAllFiles() {
+            document.querySelectorAll('.file-checkbox:not(:disabled)').forEach(cb => {
+                cb.checked = true;
+                cb.closest('.file-item').classList.add('selected');
+            });
+        }
+        
+        function deselectAllFiles() {
+            document.querySelectorAll('.file-checkbox').forEach(cb => {
+                cb.checked = false;
+                cb.closest('.file-item').classList.remove('selected');
+            });
+        }
+        
+        function downloadSelectedFiles() {
+            const selected = Array.from(document.querySelectorAll('.file-checkbox:checked')).map(cb => cb.dataset.filename);
+            if (selected.length === 0) return alert('Select files');
+            
+            selected.forEach((filename, i) => {
+                setTimeout(() => downloadFile(filename), i * 500);
+            });
+        }
+        
+        function deleteSelectedFiles() {
+            const selected = Array.from(document.querySelectorAll('.file-checkbox:checked')).map(cb => cb.dataset.filename);
+            if (selected.length === 0) return alert('Select files');
+            if (!confirm('Delete ' + selected.length + ' files?')) return;
+            
+            selected.forEach(filename => {
+                if (ws && ws.readyState === WebSocket.OPEN) {
+                    ws.send(JSON.stringify({cmd: 'deleteFile', filename: filename}));
+                }
+            });
+            setTimeout(deselectAllFiles, 1000);
+        }
+        
+        window.onclick = function(event) {
+            if (event.target == document.getElementById('commentModal')) {
+                closeCommentModal();
+            }
+        }
+        
+        initWebSocket();
+        setTimeout(refreshFiles, 2000);
+    </script>
+</body>
+</html>
+)rawliteral";
+
+#endif
