feat(ui): add archive/api data source switch

web/static/css/style.css

@@ -40,6 +40,35 @@ main {
 }
 
 /* Upload section */
+.source-switch {
+    display: inline-flex;
+    gap: 0.25rem;
+    background: #e9ecef;
+    border-radius: 8px;
+    padding: 0.25rem;
+    margin-bottom: 1rem;
+}
+
+.source-switch-btn {
+    border: none;
+    background: transparent;
+    color: #495057;
+    padding: 0.45rem 0.9rem;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+.source-switch-btn:hover {
+    background: #dee2e6;
+}
+
+.source-switch-btn.active {
+    background: #3498db;
+    color: #fff;
+}
+
 .upload-area {
     border: 2px dashed #ccc;
     border-radius: 8px;
@@ -74,6 +103,15 @@ main {
     color: #888;
 }
 
+.api-placeholder {
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 2rem;
+    text-align: center;
+    color: #555;
+}
+
 #upload-status {
     margin-top: 1rem;
     text-align: center;

web/static/js/app.js

@@ -1,12 +1,39 @@
 // LOGPile Frontend Application
 
 document.addEventListener('DOMContentLoaded', () => {
+    initSourceType();
     initUpload();
     initTabs();
     initFilters();
     loadParsersInfo();
 });
 
+let sourceType = 'archive';
+
+function initSourceType() {
+    const sourceButtons = document.querySelectorAll('.source-switch-btn');
+    sourceButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            setSourceType(button.dataset.sourceType);
+        });
+    });
+
+    setSourceType(sourceType);
+}
+
+function setSourceType(nextType) {
+    sourceType = nextType === 'api' ? 'api' : 'archive';
+
+    document.querySelectorAll('.source-switch-btn').forEach(button => {
+        button.classList.toggle('active', button.dataset.sourceType === sourceType);
+    });
+
+    const archiveContent = document.getElementById('archive-source-content');
+    const apiPlaceholder = document.getElementById('api-source-placeholder');
+    archiveContent.classList.toggle('hidden', sourceType !== 'archive');
+    apiPlaceholder.classList.toggle('hidden', sourceType !== 'api');
+}
+
 // Load and display available parsers
 async function loadParsersInfo() {
     try {