diff --git a/lightrag/api/webui_depricated/static/__init__.py b/lightrag/api/webui_depricated/static/__init__.py
deleted file mode 100644
index e69de29b..00000000
diff --git a/lightrag/api/webui_depricated/static/css/__init__.py b/lightrag/api/webui_depricated/static/css/__init__.py
deleted file mode 100644
index e69de29b..00000000
diff --git a/lightrag/api/webui_depricated/static/css/graph.css b/lightrag/api/webui_depricated/static/css/graph.css
deleted file mode 100644
index 4b76a5c8..00000000
--- a/lightrag/api/webui_depricated/static/css/graph.css
+++ /dev/null
@@ -1,86 +0,0 @@
-/* css/lightrag.css */
-
-/*Modal box style*/
-.modal {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-}
-
-.modal-content {
-    background-color: var(--surface);
-    padding: 1.5rem;
-    border-radius: 8px;
-    width: 80%;
-    max-width: 1200px;
-    box-shadow: var(--shadow);
-}
-
-.modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1rem;
-}
-
-.modal-body {
-    margin-bottom: 1rem;
-}
-
-.modal-footer {
-    text-align: right;
-}
-
-.btn-close {
-    background: none;
-    border: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    color: var(--text-secondary);
-}
-
-.btn-close:hover {
-    color: var(--text-primary);
-}
-
-/* graph style */
-.node {
-    cursor: pointer;
-    fill: var(--primary);
-    stroke: var(--surface);
-    stroke-width: 2px;
-}
-
-.node:hover {
-    fill: var(--secondary);
-}
-
-.link {
-    stroke: var(--text-secondary);
-    stroke-width: 2px;
-}
-
-.label {
-    font-size: 12px;
-    fill: var(--text-primary);
-    pointer-events: none;
-}
-
-/* edge style */
-.link {
-    stroke: #999;
-    stroke-width: 2px;
-    stroke-opacity: 0.8;
-}
-
-/* Arrow color matches edge color */
-#arrow path {
-    fill: #999 !important;
-}
diff --git a/lightrag/api/webui_depricated/static/css/lightrag.css b/lightrag/api/webui_depricated/static/css/lightrag.css
deleted file mode 100644
index d7d822dd..00000000
--- a/lightrag/api/webui_depricated/static/css/lightrag.css
+++ /dev/null
@@ -1,385 +0,0 @@
-
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
-
-body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-    line-height: 1.6;
-    background-color: var(--background);
-    color: var(--text-primary);
-}
-
-/* main container */
-.app-container {
-    max-width: 1600px;
-    margin: 0 auto;
-    padding: 2rem;
-    display: grid;
-    grid-template-columns: 240px 1fr;
-    gap: 2rem;
-    min-height: 100vh;
-}
-
-/* Navigation sidebar */
-.nav-panel {
-    position: sticky;
-    top: 2rem;
-    height: fit-content;
-    background: var(--surface);
-    border-radius: 12px;
-    padding: 1.5rem;
-    box-shadow: var(--shadow);
-}
-
-.nav-title {
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: var(--primary);
-    padding-bottom: 1rem;
-    margin-bottom: 1rem;
-    border-bottom: 1px solid var(--border);
-}
-
-/* Main content area */
-.main-content {
-    display: grid;
-    gap: 1.5rem;
-    align-content: start;
-}
-
-/* Card based module */
-.card {
-    background: var(--surface);
-    border-radius: 12px;
-    padding: 1.5rem;
-    box-shadow: var(--shadow);
-    transition: transform 0.2s ease;
-}
-
-.card:hover {
-    transform: translateY(-2px);
-}
-
-.card-title {
-    font-size: 1.125rem;
-    font-weight: 600;
-    margin-bottom: 1rem;
-    color: var(--primary);
-}
-
-/* File upload area */
-.file-dropzone {
-    border: 2px dashed var(--border);
-    border-radius: 8px;
-    padding: 2rem;
-    text-align: center;
-    transition: all 0.3s ease;
-    background: rgba(241, 245, 249, 0.5);
-}
-
-.file-dropzone.active {
-    border-color: var(--primary);
-    background: rgba(79, 70, 229, 0.05);
-}
-
-
-.btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 8px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.btn-primary {
-    background: var(--primary);
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #4338CA;
-}
-
-.btn-secondary {
-    background: var(--secondary);
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #059669;
-}
-
-.input-field {
-    width: 100%;
-    padding: 0.875rem;
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    font-size: 1rem;
-    transition: border-color 0.2s ease;
-}
-
-.input-field:focus {
-    outline: none;
-    border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
-}
-
-
-@media (max-width: 768px) {
-    .app-container {
-        grid-template-columns: 1fr;
-        padding: 1rem;
-    }
-
-    .nav-panel {
-        position: static;
-        margin-bottom: 1.5rem;
-    }
-
-    .btn.active {
-        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
-        transform: translateY(1px);
-    }
-}
-
-.toast {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    padding: 12px 24px;
-    border-radius: 8px;
-    background: var(--surface);
-    box-shadow: var(--shadow);
-    z-index: 1000;
-}
-
-.toast.success {
-    background: var(--secondary);
-    color: white;
-}
-
-.toast.error {
-    background: #EF4444;
-    color: white;
-}
-
-.loading {
-    position: relative;
-    opacity: 0.6;
-}
-
-.loading::after {
-    content: "···";
-    animation: loading 1s infinite;
-}
-
-@keyframes loading {
-    0% {
-        content: "·";
-    }
-    33% {
-        content: "··";
-    }
-    66% {
-        content: "···";
-    }
-}
-
-.text-upload-form {
-    display: grid;
-    gap: 1.5rem;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 0.5rem;
-    color: var(--text-primary);
-    font-weight: 500;
-}
-
-.action-bar {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin-top: 1rem;
-}
-
-.status-indicator {
-    padding: 0.5rem 1rem;
-    border-radius: 6px;
-    font-size: 0.9em;
-    transition: all 0.3s ease;
-}
-
-.status-indicator.success {
-    background: var(--secondary);
-    color: white;
-}
-
-.status-indicator.error {
-    background: #ef4444;
-    color: white;
-}
-
-.status-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 1.5rem;
-    margin-top: 1rem;
-}
-
-.status-card {
-    background: var(--surface);
-    border-radius: 12px;
-    padding: 1.5rem;
-    box-shadow: var(--shadow);
-}
-
-.status-header {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    margin-bottom: 1rem;
-}
-
-.status-icon {
-    font-size: 1.5rem;
-    color: var(--primary);
-}
-
-.progress-container {
-    margin-top: 1rem;
-}
-
-.progress-labels {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 0.5rem;
-    font-size: 0.875rem;
-    color: var(--text-secondary);
-}
-
-.config-list {
-    display: grid;
-    grid-template-columns: max-content 1fr;
-    gap: 0.75rem 1.5rem;
-    margin-top: 1rem;
-}
-
-.config-list dt {
-    font-weight: 500;
-    color: var(--text-secondary);
-}
-
-.config-list dd {
-    margin: 0;
-    color: var(--text-primary);
-}
-
-.directory-list {
-    margin-top: 1rem;
-}
-
-.directory-item {
-    display: flex;
-    gap: 0.5rem;
-    margin-bottom: 0.5rem;
-}
-
-.directory-label {
-    font-weight: 500;
-    color: var(--text-secondary);
-    flex-shrink: 0;
-}
-
-.directory-path {
-    color: var(--text-primary);
-    word-break: break-all;
-}
-
-.status-badge {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    border-radius: 20px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    margin-top: 1rem;
-}
-
-.health-status .status-badge {
-    background: rgba(16, 185, 129, 0.1);
-    color: #10B981;
-    border: 1px solid rgba(16, 185, 129, 0.2);
-}
-
-.status-badge.loading {
-    background: rgba(79, 70, 229, 0.1);
-    color: var(--primary);
-}
-
-.status-badge.error {
-    background: rgba(239, 68, 68, 0.1);
-    color: #EF4444;
-}
-
-.label-container {
-    max-height: 60vh;
-    overflow-y: auto;
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    padding: 1rem;
-}
-
-.label-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.75rem;
-    margin-bottom: 0.5rem;
-    background: var(--surface);
-    border-radius: 6px;
-    box-shadow: var(--shadow);
-}
-
-.label-item:hover {
-    transform: translateX(4px);
-    transition: transform 0.2s ease;
-}
-
-.label-actions {
-    display: flex;
-    gap: 0.5rem;
-}
-
-.toast {
-    position: fixed;
-    bottom: 2rem;
-    left: 50%;
-    transform: translateX(-50%);
-    padding: 0.75rem 1.5rem;
-    border-radius: 999px;
-    font-size: 0.9rem;
-    z-index: 1000;
-}
-
-.toast-success {
-    background: var(--secondary);
-    color: white;
-}
-
-.toast-info {
-    background: var(--primary);
-    color: white;
-}
-
-.toast-error {
-    background: #EF4444;
-    color: white;
-}
diff --git a/lightrag/api/webui_depricated/static/index.html b/lightrag/api/webui_depricated/static/index.html
deleted file mode 100644
index 01c2e0c8..00000000
--- a/lightrag/api/webui_depricated/static/index.html
+++ /dev/null
@@ -1,291 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>LightRAG</title>
-    <style>
-        :root {
-            --primary: #4F46E5;
-            --secondary: #10B981;
-            --background: #F8FAFC;
-            --surface: #FFFFFF;
-            --text-primary: #1E293B;
-            --text-secondary: #64748B;
-            --border: #E2E8F0;
-            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-        }
-    </style>
-    <link rel="stylesheet" type="text/css" href="css/lightrag.css">
-    <link rel="stylesheet" type="text/css" href="css/graph.css">
-</head>
-<body>
-<div class="app-container">
-    <nav class="nav-panel">
-        <h2 class="nav-title">LightRAG</h2>
-        <div class="nav-menu">
-            <button class="btn btn-primary" style="width: 100%; margin-bottom: 1rem;"
-                    onclick="showSection('documents')">
-                📁 DOC MANAGE
-            </button>
-            <button class="btn btn-primary" style="width: 100%; margin-bottom: 1rem;"
-                    onclick="showSection('text-upload')">
-                📝 TEXT UPLOAD
-            </button>
-
-            <button class="btn btn-primary" style="width: 100%; margin-bottom: 1rem;" onclick="showSection('query')">
-                🔍 GRAPH SEARCH
-            </button>
-            <button class="btn btn-primary" style="width: 100%; margin-bottom: 1rem;"
-                    onclick="showSection('label-management'); loadLabels()">
-                🏷️ GRAPH MANAGE
-            </button>
-            <button class="btn btn-secondary" style="width: 100%;" onclick="showSection('status')">
-                📊 SYSTEM STATUS
-            </button>
-
-        </div>
-    </nav>
-
-    <main class="main-content">
-        <section id="documents" class="card">
-            <h3 class="card-title">DOC MANAGE</h3>
-            <div class="file-dropzone" id="dropzone">
-                <input type="file" id="fileInput" hidden multiple>
-                <p>Drap file</p>
-                <button class="btn btn-primary" onclick="document.getElementById('fileInput').click()">
-                    📤 select file
-                </button>
-                <div class="file-list" style="margin-top: 1rem;"></div>
-                <div class="status-indicator" id="fileUploadStatus"></div>
-            </div>
-        </section>
-
-        <section id="text-upload" class="card" style="display: none;">
-            <h3 class="card-title">TEXT UPLOAD</h3>
-            <div class="text-upload-form">
-                <div class="form-group">
-                    <label for="textDescription">Title（optional）</label>
-                    <input
-                            type="text"
-                            id="textDescription"
-                            class="input-field"
-                            placeholder="Please enter a text title..."
-                    >
-                </div>
-                <div class="form-group">
-                    <label for="textContent">TEXT CONTENT</label>
-                    <textarea
-                            id="textContent"
-                            class="input-field"
-                            placeholder="lease enter a text content..."
-                            rows="8"
-                            required
-                    ></textarea>
-                </div>
-                <div class="action-bar">
-                    <button class="btn btn-primary" onclick="handleTextUpload()">
-                        📤 submit
-                    </button>
-                    <div class="status-indicator" id="textUploadStatus"></div>
-                </div>
-            </div>
-        </section>
-
-        <section id="label-management" class="card" style="display: none;">
-            <h3 class="card-title">GRAPH MANAGE(neo4j)</h3>
-            <div class="action-bar" style="margin-bottom: 1rem;">
-                <button class="btn btn-secondary" onclick="refreshLabels()">
-                    🔄 refresh
-                </button>
-            </div>
-            <div id="label-list" class="label-container">
-            </div>
-        </section>
-
-        <!-- search -->
-        <section id="query" class="card" style="display: none;">
-            <h3 class="card-title">SEARCH API</h3>
-            <select class="input-field" style="margin-bottom: 1rem;">
-                <option value="local">local search</option>
-                <option value="global">global search</option>
-                <option value="native">native search</option>
-                <option value="hybrid">hybrid search</option>
-                <option value="mix">mix search</option>
-            </select>
-            <textarea
-                    class="input-field"
-                    placeholder="enter your content..."
-                    style="height: 120px; resize: vertical;"
-            ></textarea>
-            <div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
-                <button class="btn btn-primary">🔍 searching</button>
-                <label class="btn btn-secondary">
-                    <input type="checkbox" style="margin-right: 0.5rem;">stream modal
-                </label>
-            </div>
-            <div class="results"
-                 style="margin-top: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 8px;"></div>
-        </section>
-
-
-        <section id="status" class="card" style="display: none;">
-            <h3 class="card-title">System Status</h3>
-            <div class="status-grid">
-                <div class="status-card health-status">
-                    <div class="status-header">
-                        <i class="status-icon fas fa-heartbeat"></i>
-                        <h4>HEATH STATUS</h4>
-                    </div>
-                    <div class="status-badge" id="healthStatus">checking...</div>
-                </div>
-
-                <!-- 存储状态 -->
-                <div class="status-card storage-status">
-                    <div class="status-header">
-                        <i class="status-icon fas fa-database"></i>
-                        <h4>Storage status</h4>
-                    </div>
-                    <div class="progress-container">
-                        <progress value="0" max="100" id="storageProgress"></progress>
-                        <div class="progress-labels">
-                            <span id="indexedFiles">Indexed files：0</span>
-                            <span id="storageUsage">Use ratio：0%</span>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="status-card model-config">
-                    <div class="status-header">
-                        <i class="status-icon fas fa-brain"></i>
-                        <h4>LLM configuration</h4>
-                    </div>
-                    <dl class="config-list">
-                        <dt>LLM MODEL</dt>
-                        <dd id="llmModel">Loading...</dd>
-
-                        <dt>Embedded model</dt>
-                        <dd id="embedModel">Loading...</dd>
-
-                        <dt>Max token</dt>
-                        <dd id="maxTokens">0</dd>
-                    </dl>
-                </div>
-
-                <div class="status-card directory-info">
-                    <div class="status-header">
-                        <i class="status-icon fas fa-folder-open"></i>
-                        <h4>Catalog information</h4>
-                    </div>
-                    <div class="directory-list">
-                        <div class="directory-item">
-                            <span class="directory-label">Work directory：</span>
-                            <span class="directory-path" id="workingDir"></span>
-                        </div>
-                        <div class="directory-item">
-                            <span class="directory-label">Input directory：</span>
-                            <span class="directory-path" id="inputDir"></span>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="status-card directory-info">
-                    <div class="status-header">
-                        <i class="status-icon fas fa-folder-open"></i>
-                        <h4>Store information</h4>
-                    </div>
-                    <div class="directory-list">
-                        <div class="directory-item">
-                            <span class="directory-label">kv_storage：</span>
-                            <span class="directory-path" id="kv_storage"></span>
-                        </div>
-                        <div class="directory-item">
-                            <span class="directory-label">doc_status_storage：</span>
-                            <span class="directory-path" id="doc_status_storage"></span>
-                        </div>
-                        <div class="directory-item">
-                            <span class="directory-label">graph_storage：</span>
-                            <span class="directory-path" id="graph_storage"></span>
-                        </div>
-                        <div class="directory-item">
-                            <span class="directory-label">vector_storage：</span>
-                            <span class="directory-path" id="vector_storage"></span>
-                        </div>
-                    </div>
-                </div>
-
-            </div>
-        </section>
-    </main>
-</div>
-<div id="graph-modal" class="modal">
-    <div class="modal-content">
-        <div class="modal-header">
-            <h3 id="graph-title">GRAPH MANAGE</h3>
-            <button class="btn btn-close" onclick="closeGraphModal()">&times;</button>
-        </div>
-        <div class="modal-body">
-            <div id="graph-container">
-                <svg id="graph-svg" width="100%" height="600px">
-                </svg>
-            </div>
-        </div>
-        <div class="modal-footer">
-            <button class="btn btn-secondary" onclick="closeGraphModal()">SHUT DOWN</button>
-        </div>
-        <div class="resize-handle"></div>
-
-    </div>
-</div>
-<script>
-    const dropzone = document.getElementById('dropzone');
-
-    dropzone.addEventListener('dragover', (e) => {
-        e.preventDefault();
-        dropzone.classList.add('active');
-    });
-
-    dropzone.addEventListener('dragleave', () => {
-        dropzone.classList.remove('active');
-    });
-
-    dropzone.addEventListener('drop', (e) => {
-        e.preventDefault();
-        dropzone.classList.remove('active');
-        const files = e.dataTransfer.files;
-        handleFiles(files);
-    });
-
-    function handleFiles(files) {
-        console.log('selected file:', files);
-    }
-
-    function showSection(sectionId) {
-        // Hide all content blocks
-        const sections = document.querySelectorAll('.main-content .card');
-        sections.forEach(section => {
-            section.style.display = 'none';
-        });
-
-        //  Display target block
-        const targetSection = document.getElementById(sectionId);
-        if (targetSection) {
-            targetSection.style.display = 'block';
-        }
-
-        // Update button activation status (optional)
-        const buttons = document.querySelectorAll('.nav-menu button');
-        buttons.forEach(button => {
-            button.classList.remove('active');
-        });
-        event.target.classList.add('active');
-    }
-
-    // Initialize the display document management module
-    showSection('documents');
-</script>
-<script src="./js/lightrag.js"></script>
-<script src="./js/graph.js"></script>
-<script src="https://d3js.org/d3.v7.min.js"></script>
-</body>
-</html>
diff --git a/lightrag/api/webui_depricated/static/js/__init__.py b/lightrag/api/webui_depricated/static/js/__init__.py
deleted file mode 100644
index e69de29b..00000000
diff --git a/lightrag/api/webui_depricated/static/js/lightrag.js b/lightrag/api/webui_depricated/static/js/lightrag.js
deleted file mode 100644
index 8fc26f7a..00000000
--- a/lightrag/api/webui_depricated/static/js/lightrag.js
+++ /dev/null
@@ -1,500 +0,0 @@
-// lightrag.js
-// init
-function initializeApp() {
-    setupFileUpload();
-    setupQueryHandler();
-    setupSectionObserver();
-    updateFileList();
-    // textarea count
-    const textArea = document.getElementById('textContent');
-    if (textArea) {
-        const charCount = document.createElement('div');
-        charCount.className = 'char-count';
-        textArea.parentNode.appendChild(charCount);
-
-        textArea.addEventListener('input', () => {
-            const count = textArea.value.length;
-            charCount.textContent = `input ${count} character`;
-            charCount.style.color = count > 10000 ? '#ef4444' : 'var (--text-secondary)'
-        });
-    }
-}
-
-// api request
-async function apiRequest(endpoint, method = 'GET', body = null) {
-    const options = {
-        method,
-        headers: {
-            'Content-Type': 'application/json'
-        }
-    };
-
-    if (body) {
-        options.body = JSON.stringify(body);
-    }
-
-    try {
-        const response = await fetch(`${endpoint}`, options);
-        if (!response.ok) {
-            throw new Error(`request failed: ${response.status}`);
-        }
-        return response.json();
-    } catch (error) {
-        console.error('API REQUEST ERROR:', error);
-        showToast(error.message, 'error');
-        throw error;
-    }
-}
-
-async function handleTextUpload() {
-    const description = document.getElementById('textDescription').value;
-    const content = document.getElementById('textContent').value.trim();
-    const statusDiv = document.getElementById('textUploadStatus');
-
-    //  clear status tip
-    statusDiv.className = 'status-indicator';
-    statusDiv.textContent = '';
-
-    //  input valid
-    if (!content) {
-        showStatus('error', 'TEXT CONTENT NOT NULL', statusDiv);
-        return;
-    }
-
-    try {
-        showStatus('loading', 'UPLOADING...', statusDiv);
-
-        const payload = {
-            text: content,
-            ...(description && {description})
-        };
-
-        const response = await fetch(`/documents/text`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(payload)
-        });
-
-        if (!response.ok) {
-            const errorData = await response.json();
-            throw new Error(errorData.detail || 'UPLOAD FAILED');
-        }
-
-        const result = await response.json();
-
-        showStatus('success', `✅ ${result.message} (documents: ${result.document_count})`, statusDiv);
-
-
-        document.getElementById('textContent').value = '';
-
-        //  update file list
-        updateFileList();
-
-    } catch (error) {
-        showStatus('error', `❌ ERROR: ${error.message}`, statusDiv);
-        console.error('FILE UPLOAD FAILED:', error);
-    }
-}
-
-function showStatus(type, message, container) {
-    container.textContent = message;
-    container.className = `status-indicator ${type}`;
-
-    //auto clear success status
-    if (type === 'success') {
-        setTimeout(() => {
-            container.textContent = '';
-            container.className = 'status-indicator';
-        }, 5000);
-    }
-}
-
-// upload file
-function setupFileUpload() {
-    const dropzone = document.getElementById('dropzone');
-    const fileInput = document.getElementById('fileInput');
-
-
-    // Drag and drop event handling
-    dropzone.addEventListener('dragover', (e) => {
-        e.preventDefault();
-        dropzone.classList.add('active');
-    });
-
-    dropzone.addEventListener('dragleave', () => {
-        dropzone.classList.remove('active');
-    });
-
-    dropzone.addEventListener('drop', async (e) => {
-        e.preventDefault();
-        dropzone.classList.remove('active');
-        await handleFiles(e.dataTransfer.files);
-    });
-
-
-    fileInput.addEventListener('change', async (e) => {
-        await handleFiles(e.target.files);
-    });
-}
-
-async function handleFiles(files) {
-    const formData = new FormData();
-    for (const file of files) {
-        formData.append('file', file);
-    }
-    const statusDiv = document.getElementById('fileUploadStatus');
-
-
-    statusDiv.className = 'status-indicator';
-    statusDiv.textContent = '';
-    try {
-        showStatus('loading', 'UPLOADING...', statusDiv);
-        const response = await fetch(`/documents/upload`, {
-            method: 'POST',
-            body: formData
-        });
-        const result = await response.json();
-        showStatus('success', `✅ ${result.message} `, statusDiv);
-        updateFileList();
-    } catch (error) {
-        showToast(error.message, 'error');
-    }
-}
-
-
-async function updateFileList() {
-    const fileList = document.querySelector('.file-list');
-    try {
-        const status = await apiRequest('/health');
-        fileList.innerHTML = `
-            <div>INDEXED FILE: ${status.indexed_files_count}</div>
-        `;
-    } catch (error) {
-        fileList.innerHTML = 'UNABLE TO OBTAIN FILE LIST';
-    }
-}
-
-// Intelligent retrieval processing
-function setupQueryHandler() {
-    document.querySelector('#query .btn-primary').addEventListener('click', handleQuery);
-}
-
-async function handleQuery() {
-    const queryInput = document.querySelector('#query textarea');
-    const modeSelect = document.querySelector('#query select');
-    const streamCheckbox = document.querySelector('#query input[type="checkbox"]');
-    const resultsDiv = document.querySelector('#query .results');
-
-    const payload = {
-        query: queryInput.value,
-        mode: modeSelect.value,
-        stream: streamCheckbox.checked
-    };
-
-    resultsDiv.innerHTML = '<div class="loading">SEARCHING...</div>';
-
-    try {
-        if (payload.stream) {
-            await handleStreamingQuery(payload, resultsDiv);
-        } else {
-            const result = await apiRequest('/query', 'POST', payload);
-            resultsDiv.innerHTML = `<div class="result">${result.response}</div>`;
-        }
-    } catch (error) {
-        resultsDiv.innerHTML = `<div class="error">SEARCH FAILED: ${error.message}</div>`;
-    }
-}
-
-// handle stream api
-async function handleStreamingQuery(payload, resultsDiv) {
-    try {
-        const response = await fetch(`/query/stream`, {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify(payload)
-        });
-
-
-        const contentType = response.headers.get('Content-Type') || '';
-        const validTypes = ['application/x-ndjson', 'application/json'];
-        if (!validTypes.some(t => contentType.includes(t))) {
-            throw new Error(`INVALID CONTENT TYPE: ${contentType}`);
-        }
-
-        const reader = response.body.getReader();
-        const decoder = new TextDecoder('utf-8');
-        let buffer = '';
-
-        resultsDiv.innerHTML = '';
-
-        while (true) {
-            const {done, value} = await reader.read();
-            if (done) break;
-
-            buffer += decoder.decode(value, {stream: true});
-
-            //  Split by line break (NDJSON format requirement)
-            let lineEndIndex;
-            while ((lineEndIndex = buffer.indexOf('\n')) >= 0) {
-                const line = buffer.slice(0, lineEndIndex).trim();
-                buffer = buffer.slice(lineEndIndex + 1);
-
-                if (!line) continue;
-
-                try {
-                    const data = JSON.parse(line);
-
-                    if (data.response) {
-                        resultsDiv.innerHTML += data.response;
-                        resultsDiv.scrollTop = resultsDiv.scrollHeight;
-                    }
-
-                    if (data.error) {
-                        resultsDiv.innerHTML += `<div class="error">${data.error}</div>`;
-                    }
-                } catch (error) {
-                    console.error('JSON PARSING FAILED:', {
-                        error,
-                        rawLine: line,
-                        bufferRemaining: buffer
-                    });
-                }
-            }
-        }
-
-        // Process remaining data
-        if (buffer.trim()) {
-            try {
-                const data = JSON.parse(buffer.trim());
-                if (data.response) {
-                    resultsDiv.innerHTML += data.response;
-                }
-            } catch (error) {
-                console.error('TAIL DATA PARSING FAILED:', error);
-            }
-        }
-
-    } catch (error) {
-        resultsDiv.innerHTML = `<div class="error">REQUEST FAILED: ${error.message}</div>`;
-    }
-}
-
-
-// Knowledge Q&A Processing
-function setupChatHandler() {
-    const sendButton = document.querySelector('#chat button');
-    const chatInput = document.querySelector('#chat input');
-
-    sendButton.addEventListener('click', () => handleChat(chatInput));
-    chatInput.addEventListener('keypress', (e) => {
-        if (e.key === 'Enter') handleChat(chatInput);
-    });
-}
-
-async function handleChat(chatInput) {
-    const chatHistory = document.querySelector('#chat .chat-history');
-
-
-    const userMessage = document.createElement('div');
-    userMessage.className = 'message user';
-    userMessage.textContent = chatInput.value;
-    chatHistory.appendChild(userMessage);
-
-
-    const botMessage = document.createElement('div');
-    botMessage.className = 'message bot loading';
-    botMessage.textContent = 'THINKING...';
-    chatHistory.appendChild(botMessage);
-    chatHistory.scrollTop = chatHistory.scrollHeight;
-
-    try {
-        const response = await fetch(`/api/chat`, {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({
-                messages: [{role: "user", content: chatInput.value}],
-                stream: true
-            })
-        });
-
-        const reader = response.body.getReader();
-        const decoder = new TextDecoder();
-        botMessage.classList.remove('loading');
-        botMessage.textContent = '';
-
-        while (true) {
-            const {done, value} = await reader.read();
-            if (done) break;
-
-            const chunk = decoder.decode(value);
-            const data = JSON.parse(chunk);
-            botMessage.textContent += data.message?.content || '';
-            chatHistory.scrollTop = chatHistory.scrollHeight;
-        }
-    } catch (error) {
-        botMessage.textContent = `ERROR: ${error.message}`;
-        botMessage.classList.add('error');
-    }
-
-    chatInput.value = '';
-}
-
-// system status update
-async function updateSystemStatus() {
-    const statusElements = {
-        health: document.getElementById('healthStatus'),
-        storageProgress: document.getElementById('storageProgress'),
-        indexedFiles: document.getElementById('indexedFiles'),
-        storageUsage: document.getElementById('storageUsage'),
-        llmModel: document.getElementById('llmModel'),
-        embedModel: document.getElementById('embedModel'),
-        maxTokens: document.getElementById('maxTokens'),
-        workingDir: document.getElementById('workingDir'),
-        inputDir: document.getElementById('inputDir'),
-        kv_storage: document.getElementById("kv_storage"),
-        doc_status_storage: document.getElementById("doc_status_storage"),
-        graph_storage: document.getElementById("graph_storage"),
-        vector_storage: document.getElementById("vector_storage")
-    };
-
-    try {
-        const status = await apiRequest('/health');
-
-        //  heath status
-        statusElements.health.className = 'status-badge';
-        statusElements.health.textContent = status.status === 'healthy' ?
-            '✅ Healthy operation in progress' : '⚠️ Service exception';
-
-        //  kv status
-        const progressValue = Math.min(Math.round((status.indexed_files_count / 1000) * 100), 100);
-        statusElements.storageProgress.value = progressValue;
-        statusElements.indexedFiles.textContent = `INDEXED FILES：${status.indexed_files_count}`;
-        statusElements.storageUsage.textContent = `USE PERCENT：${progressValue}%`;
-
-        //  model state
-        statusElements.llmModel.textContent = `${status.configuration.llm_model} (${status.configuration.llm_binding})`;
-        statusElements.embedModel.textContent = `${status.configuration.embedding_model} (${status.configuration.embedding_binding})`;
-        statusElements.maxTokens.textContent = status.configuration.max_tokens.toLocaleString();
-
-        //  dir msg
-        statusElements.workingDir.textContent = status.working_directory;
-        statusElements.inputDir.textContent = status.input_directory;
-
-        // stack msg
-        statusElements.kv_storage.textContent = status.configuration.kv_storage;
-        statusElements.doc_status_storage.textContent = status.configuration.doc_status_storage;
-        statusElements.graph_storage.textContent = status.configuration.graph_storage;
-        statusElements.vector_storage.textContent = status.configuration.vector_storage
-
-    } catch (error) {
-        statusElements.health.className = 'status-badge error';
-        statusElements.health.textContent = '❌GET STATUS FAILED';
-        statusElements.storageProgress.value = 0;
-        statusElements.indexedFiles.textContent = 'INDEXED FILES：GET FAILED';
-        console.error('STATUS UPDATE FAILED:', error);
-    }
-}
-
-
-//  Area switching monitoring
-function setupSectionObserver() {
-    const observer = new MutationObserver(mutations => {
-        mutations.forEach(mutation => {
-            if (mutation.attributeName === 'style') {
-                const isVisible = mutation.target.style.display !== 'none';
-                if (isVisible && mutation.target.id === 'status') {
-                    updateSystemStatus();
-                }
-            }
-        });
-    });
-
-    document.querySelectorAll('.card').forEach(section => {
-        observer.observe(section, {attributes: true});
-    });
-}
-
-// Display prompt information
-function showToast(message, type = 'info') {
-    const toast = document.createElement('div');
-    toast.className = `toast ${type}`;
-    toast.textContent = message;
-    document.body.appendChild(toast);
-
-    setTimeout(() => {
-        toast.remove();
-    }, 3000);
-}
-
-
-// Dynamically load tag list
-async function loadLabels() {
-    try {
-        const response = await fetch('/graph/label/list');
-        const labels = await response.json();
-        renderLabels(labels);
-    } catch (error) {
-        console.error('DYNAMICALLY LOAD TAG LIST FAILED:', error);
-    }
-}
-
-async function loadGraph(label) {
-    try {
-        // render label list
-        openGraphModal(label)
-    } catch (error) {
-        console.error('LOADING LABEL FAILED:', error);
-
-
-        const labelList = document.getElementById("label-list");
-        labelList.innerHTML = `
-            <div class="error-message">
-                LOADING ERROR: ${error.message}
-            </div>
-        `;
-    }
-}
-
-// render graph label list
-function renderLabels(labels) {
-    const container = document.getElementById('label-list');
-    container.innerHTML = labels.map(label => `
-        <div class="label-item">
-            <span style="font-weight: 500; color: var(--text-primary);">
-                ${label}
-            </span>
-            <div class="label-actions">
-                <button class="btn btn-primary"
-                        onclick="handleLabelAction('${label}')">
-                    📋 graph
-                </button>
-            </div>
-        </div>
-    `).join('');
-}
-
-
-function handleLabelAction(label) {
-    loadGraph(label)
-}
-
-
-function refreshLabels() {
-    showToast('LOADING GRAPH LABELS...', 'info');
-    loadLabels();
-}
-
-function showToast(message, type = 'info') {
-    const toast = document.createElement('div');
-    toast.className = `toast toast-${type}`;
-    toast.textContent = message;
-    document.body.appendChild(toast);
-
-    setTimeout(() => {
-        toast.remove();
-    }, 3000);
-}
-
-document.addEventListener('DOMContentLoaded', initializeApp);