asks"></div>
        </div>

        <div class="tasks-section">
            <div class="section-header">
                <div class="status-dot started"></div>
                <h2 class="section-title started">🟡 Начали (Started)</h2>
            </div>
            <div class="tasks-list" id="started-tasks"></div>
        </div>

        <div class="tasks-section">
            <div class="section-header">
                <div class="status-dot backlog"></div>
                <h2 class="section-title backlog">⚪ Бэклог (Backlog)</h2>
            </div>
            <div class="tasks-list" id="backlog-tasks"></div>
        </div>

        <div class="tasks-section">
            <div class="section-header">
                <div class="status-dot done"></div>
                <h2 class="section-title done">✅ Завершено (Done)</h2>
            </div>
            <div class="tasks-list" id="done-tasks"></div>
        </div>

        <div class="chart-container">
            <h2 class="chart-title">📊 Расход токенов по задачам</h2>
            <div id="token-usage-chart"></div>
        </div>

        <footer>
            <p>&copy; 2026 Instahit Dashboard. Все права не защищены.</p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const updateTimeElement = document.getElementById('update-time');
            const totalTokensElement = document.querySelector('.stats-grid .stat-card:nth-child(1) .stat-value');
            const activeTasksElement = document.querySelector('.stats-grid .stat-card:nth-child(2) .stat-value');
            const inProgressTasksElement = document.querySelector('.stats-grid .stat-card:nth-child(3) .stat-value');
            const doneTasksElement = document.querySelector('.stats-grid .stat-card:nth-child(4) .stat-value');

            const inProgressList = document.getElementById('in-progress-tasks');
            const startedList = document.getElementById('started-tasks');
            const backlogList = document.getElementById('backlog-tasks');
            const doneList = document.getElementById('done-tasks');
            const tokenUsageChart = document.getElementById('token-usage-chart');

            const renderDashboard = (tasksData) => {
                inProgressList.innerHTML = '';
                startedList.innerHTML = '';
                backlogList.innerHTML = '';
                doneList.innerHTML = '';
                tokenUsageChart.innerHTML = '';

                let totalTokens = 0;
                let activeTasksCount = 0;
                let inProgressCount = 0;
                let doneCount = 0;
                const tokenUsage = {};

                tasksData.forEach(task => {
                    const taskId = task['ID'];
                    const taskName = task['Задача'];
                    const status = task['Статус'];
                    const tokens = parseFloat(task['Токены'].replace('~', '').replace('k', '')) * 1000 || 0;
                    const created = task['Создана'];
                    const updated = task['Обновлена'];

                    totalTokens += tokens;
                    tokenUsage[taskName] = (tokenUsage[taskName] || 0) + tokens;

                    const taskCard = `
                        <div class="task-card ${status}">
                            <div class="task-info">
                                <div class="task-id">${taskId}</div>
                                <div class="task-name">${taskName}</div>
                            </div>
                            <div class="task-meta">
                                <span>Создана: ${created}</span>
                                <span>Обновлена: ${updated}</span>
                            </div>
                            <div class="task-tokens">~${(tokens / 1000).toFixed(1)}k</div>
                        </div>
                    `;

                    if (status === 'in-progress') {
                        inProgressList.innerHTML += taskCard;
                        inProgressCount++;
                        activeTasksCount++;
                    } else if (status === 'started') {
                        startedList.innerHTML += taskCard;
                        activeTasksCount++;
                    } else if (status === 'backlog') {
                        backlogList.innerHTML += taskCard;
                    } else if (status === 'done') {
                        doneList.innerHTML += taskCard;
                        doneCount++;
                    }
                });

                totalTokensElement.innerHTML = `${(totalTokens / 1000).toFixed(1)}<span class="stat-unit">k</span>`;
                activeTasksElement.innerHTML = activeTasksCount;
                inProgressTasksElement.innerHTML = inProgressCount;
                doneTasksElement.innerHTML = doneCount;
                updateTimeElement.innerText = new Date().toLocaleString('ru-RU', { dateStyle: 'short', timeStyle: 'short' });

                // Render token usage chart
                const maxTokens = Math.max(...Object.values(tokenUsage));
                for (const taskName in tokenUsage) {
                    const tokens = tokenUsage[taskName];
                    const percentage = (tokens / maxTokens) * 100;
                    tokenUsageChart.innerHTML += `
                        <div class="token-bar">
                            <div class="bar-label">${taskName}</div>
                            <div class="bar-track">
                                <div class="bar-fill" style="width: ${percentage}%;"></div>
                            </div>
                            <div class="bar-value">~${(tokens / 1000).toFixed(1)}k</div>
                        </div>
                    `;
                }
            };

            const fetchTasks = async () => {
                try {
                    const response = await fetch('TASKS.md'); // Assuming TASKS.md is accessible via HTTP
                    const text = await response.text();
                    const lines = text.split('\n').filter(line => line.trim() !== '' && !line.startsWith('#') && !line.startsWith('|'));

                    if (lines.length > 0) {
                        // Simple parsing assuming consistent markdown table format
                        // Skip header and separator lines from TASKS.md
                        const tasks = lines.map(line => {
                            const parts = line.split('|').map(p => p.trim()).filter(p => p !== '');
                            return {
                                'ID': parts[0],
                                'Задача': parts[1],
                                'Статус': parts[2],
                                'Токены': parts[3],
                                'Создана': parts[4],
                                'Обновлена': parts[5]
                            };
                        });
                        renderDashboard(tasks);
                    } else {
                        console.log("No tasks found in TASKS.md");
                    }
                } catch (error) {
                    console.error('Error fetching TASKS.md:', error);
                }
            };

            fetchTasks();
            setInterval(fetchTasks, 30000); // Refresh every 30 seconds
        });
    </script>
</body>
</html>