восстановлена работа после потери main.py из-за неудачного слияния основного проекта и веб морды.

2026-08-07 07:57:20 +03:00
parent 9deca9ab34
commit f6ca8552f6
16 changed files with 1923 additions and 1 deletions
@@ -0,0 +1,342 @@
+cat << 'EOF' > /home/puh/scud_orion_ai_v2/frontend/index.html
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SCUD Orion AI — Context Manager</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .fade-scroll-top {
+            mask-image: linear-gradient(to bottom, transparent 0%, black 14px);
+            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14px);
+        }
+        .no-scrollbar::-webkit-scrollbar {
+            display: none;
+        }
+        .no-scrollbar {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-800 h-screen flex flex-col font-sans">
+
+    <!-- Хедер -->
+    <header class="bg-white border-b border-slate-200 px-6 py-3 flex justify-between items-center shadow-sm">
+        <div class="flex items-center space-x-3">
+            <div class="bg-indigo-600 text-white p-2 rounded-lg">
+                <i class="fa-solid fa-brain text-lg"></i>
+            </div>
+            <div>
+                <h1 class="text-base font-bold leading-none text-slate-900">SCUD Orion AI</h1>
+                <span class="text-xs text-slate-500">Context & Task Manager</span>
+            </div>
+        </div>
+
+        <div class="flex items-center space-x-4">
+            <span class="flex items-center text-xs text-emerald-600 font-medium bg-emerald-50 px-2.5 py-1 rounded-full border border-emerald-200">
+                <span class="h-2 w-2 rounded-full bg-emerald-500 mr-1.5"></span> API Online
+            </span>
+            <button onclick="toggleDrawer()" class="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 px-3.5 py-1.5 rounded-lg text-xs font-semibold flex items-center gap-2 transition border border-indigo-200">
+                <i class="fa-solid fa-list-check text-indigo-600"></i>
+                <span>Реестр задач</span>
+                <span id="task-count-badge" class="bg-indigo-600 text-white text-[10px] px-1.5 py-0.2 rounded-full">0</span>
+            </button>
+        </div>
+    </header>
+
+    <!-- Основная зона чата -->
+    <main class="flex-1 flex flex-col max-w-4xl w-full mx-auto bg-white my-4 rounded-xl border border-slate-200 shadow-sm overflow-hidden relative">
+        <div id="chat-window" class="flex-1 p-6 overflow-y-auto space-y-4 bg-slate-50/50">
+            <!-- Стартовая плашка -->
+            <div class="bg-white border border-slate-200 rounded-xl p-4 max-w-2xl shadow-sm">
+                <p class="text-xs font-bold text-indigo-600 uppercase tracking-wider mb-1">
+                    <i class="fa-solid fa-robot mr-1"></i> ИИ-Ассистент
+                </p>
+                <p class="text-slate-700 text-sm leading-relaxed mb-3">
+                    Для вывода возможных команд управления локальными системами, спросите об этом в произвольном формате или нажмите на кнопку ниже.
+                </p>
+                <button onclick="requestHelp()" class="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 text-xs font-semibold px-3 py-1.5 rounded-lg border border-indigo-200 transition flex items-center gap-1.5">
+                    <i class="fa-solid fa-circle-question text-indigo-600"></i>
+                    <span>Показать варианты команд</span>
+                </button>
+            </div>
+        </div>
+
+        <!-- Поле ввода с авто-высотой -->
+        <div class="p-4 bg-white border-t border-slate-200 relative">
+            <form id="chat-form" onsubmit="sendMessage(event)" class="flex items-end gap-2">
+                <div class="flex-1 bg-slate-50 border border-slate-300 rounded-lg p-1 focus-within:border-indigo-600 focus-within:bg-white transition">
+                    <textarea id="user-input" rows="1" autocomplete="off" autocorrect="off" spellcheck="false"
+                        placeholder="Команда или вопрос (Shift+Enter — новая строка, ↑/↓ — история)..." 
+                        class="w-full bg-transparent text-slate-800 px-3 py-1.5 text-sm focus:outline-none resize-none overflow-y-auto max-h-[96px] leading-relaxed fade-scroll-top no-scrollbar"></textarea>
+                </div>
+                <button type="submit" id="send-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium px-5 h-[42px] rounded-lg text-sm transition flex items-center gap-2 shrink-0">
+                    <span>Отправить</span>
+                    <i class="fa-solid fa-paper-plane text-xs"></i>
+                </button>
+            </form>
+
+            <!-- Кнопка ниже правого нижнего угла диалога -->
+            <div class="flex justify-end mt-2">
+                <button onclick="requestHelp()" class="text-xs text-indigo-600 hover:text-indigo-800 font-semibold bg-indigo-50 hover:bg-indigo-100 px-3 py-1.5 rounded-lg border border-indigo-200 transition flex items-center gap-1.5 shadow-sm">
+                    <i class="fa-solid fa-circle-info"></i>
+                    <span>Помощь в общении</span>
+                </button>
+            </div>
+        </div>
+    </main>
+
+    <!-- Выезжающая справа панель (Drawer) -->
+    <div id="drawer-backdrop" onclick="toggleDrawer()" class="fixed inset-0 bg-slate-900/30 backdrop-blur-sm hidden transition-opacity z-40"></div>
+    
+    <aside id="task-drawer" class="fixed right-0 top-0 h-full w-[420px] bg-white border-l border-slate-200 shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out z-50 flex flex-col">
+        <div class="p-4 border-b border-slate-200 flex justify-between items-center bg-slate-50">
+            <h2 class="font-bold text-slate-800 flex items-center gap-2 text-sm">
+                <i class="fa-solid fa-list-check text-indigo-600"></i> Реестр задач
+            </h2>
+            <div class="flex items-center gap-2">
+                <button onclick="loadTasks()" class="text-xs text-slate-500 hover:text-indigo-600 transition p-1" title="Обновить">
+                    <i class="fa-solid fa-rotate-right"></i>
+                </button>
+                <button onclick="toggleDrawer()" class="text-slate-400 hover:text-slate-700 transition p-1">
+                    <i class="fa-solid fa-xmark text-lg"></i>
+                </button>
+            </div>
+        </div>
+
+        <div class="flex border-b border-slate-200 bg-white px-2 pt-2 text-xs font-medium text-slate-500 gap-1">
+            <button onclick="setFilter('ALL')" id="filter-ALL" class="px-3 py-1.5 rounded-t-lg border-b-2 border-indigo-600 text-indigo-600 font-bold">Все</button>
+            <button onclick="setFilter('IN_PROGRESS')" id="filter-IN_PROGRESS" class="px-3 py-1.5 rounded-t-lg border-b-2 border-transparent hover:text-slate-700">В работе</button>
+            <button onclick="setFilter('BACKLOG')" id="filter-BACKLOG" class="px-3 py-1.5 rounded-t-lg border-b-2 border-transparent hover:text-slate-700">Бэклог</button>
+            <button onclick="setFilter('COMPLETED')" id="filter-COMPLETED" class="px-3 py-1.5 rounded-t-lg border-b-2 border-transparent hover:text-slate-700">Завершено</button>
+        </div>
+
+        <div id="tasks-container" class="flex-1 overflow-y-auto p-4 space-y-3 bg-slate-50/50">
+            <div class="text-center text-slate-400 py-8 text-xs">Загрузка задач...</div>
+        </div>
+    </aside>
+
+    <script>
+        const API_TOKEN = "scud_secret_token_2026";
+        const SESSION_ID = "web_session_main";
+        const STORAGE_KEY = 'scud_chat_input_history';
+
+        let currentFilter = 'ALL';
+        let allTasks = [];
+        let inputHistory = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+        let historyIndex = -1;
+
+        const userInputEl = document.getElementById('user-input');
+
+        if (userInputEl) {
+            userInputEl.addEventListener('input', function() {
+                this.style.height = 'auto';
+                this.style.height = Math.min(this.scrollHeight, 96) + 'px';
+            });
+
+            userInputEl.addEventListener('keydown', function(e) {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    document.getElementById('chat-form').requestSubmit();
+                }
+                else if (e.key === 'ArrowUp') {
+                    if (inputHistory.length > 0 && historyIndex < inputHistory.length - 1) {
+                        e.preventDefault();
+                        if (historyIndex === -1) {
+                            this.dataset.draft = this.value;
+                        }
+                        historyIndex++;
+                        this.value = inputHistory[inputHistory.length - 1 - historyIndex];
+                        this.dispatchEvent(new Event('input'));
+                        setTimeout(() => this.setSelectionRange(this.value.length, this.value.length), 0);
+                    }
+                }
+                else if (e.key === 'ArrowDown') {
+                    if (historyIndex !== -1) {
+                        e.preventDefault();
+                        if (historyIndex > 0) {
+                            historyIndex--;
+                            this.value = inputHistory[inputHistory.length - 1 - historyIndex];
+                        } else {
+                            historyIndex = -1;
+                            this.value = this.dataset.draft || '';
+                        }
+                        this.dispatchEvent(new Event('input'));
+                        setTimeout(() => this.setSelectionRange(this.value.length, this.value.length), 0);
+                    }
+                }
+            });
+        }
+
+        function toggleDrawer() {
+            const drawer = document.getElementById('task-drawer');
+            const backdrop = document.getElementById('drawer-backdrop');
+            const isHidden = drawer.classList.contains('translate-x-full');
+            if (isHidden) {
+                drawer.classList.remove('translate-x-full');
+                backdrop.classList.remove('hidden');
+            } else {
+                drawer.classList.add('translate-x-full');
+                backdrop.classList.add('hidden');
+            }
+        }
+
+        function setFilter(status) {
+            currentFilter = status;
+            ['ALL', 'IN_PROGRESS', 'BACKLOG', 'COMPLETED'].forEach(f => {
+                const btn = document.getElementById(`filter-${f}`);
+                if (f === status) {
+                    btn.className = "px-3 py-1.5 rounded-t-lg border-b-2 border-indigo-600 text-indigo-600 font-bold";
+                } else {
+                    btn.className = "px-3 py-1.5 rounded-t-lg border-b-2 border-transparent hover:text-slate-700";
+                }
+            });
+            renderTasks();
+        }
+
+        async function loadTasks() {
+            try {
+                const res = await fetch('/api/v1/tasks', {
+                    headers: { 'Authorization': `Bearer ${API_TOKEN}` }
+                });
+                allTasks = await res.json();
+                document.getElementById('task-count-badge').innerText = allTasks.length;
+                renderTasks();
+            } catch (err) {
+                document.getElementById('tasks-container').innerHTML = `<div class="text-red-500 text-xs py-4 text-center">Ошибка загрузки задач</div>`;
+            }
+        }
+
+        function renderTasks() {
+            const container = document.getElementById('tasks-container');
+            const filtered = allTasks.filter(t => currentFilter === 'ALL' || t.status === currentFilter);
+
+            if (filtered.length === 0) {
+                container.innerHTML = `<div class="text-slate-400 text-xs py-8 text-center">Нет задач с выбранным фильтром</div>`;
+                return;
+            }
+
+            container.innerHTML = filtered.map(t => {
+                let statusBadge = 'bg-slate-100 text-slate-600 border-slate-200';
+                let cardBg = 'bg-white';
+                if (t.status === 'COMPLETED') {
+                    statusBadge = 'bg-emerald-50 text-emerald-700 border-emerald-300 font-semibold';
+                    cardBg = 'bg-emerald-50/20';
+                } else if (t.status === 'IN_PROGRESS') {
+                    statusBadge = 'bg-amber-50 text-amber-700 border-amber-300 font-bold';
+                    cardBg = 'bg-amber-50/20 border-amber-200';
+                }
+
+                let priorityBadge = 'text-slate-500 bg-slate-100 border-slate-200';
+                if (t.priority === 'HIGH') priorityBadge = 'text-red-700 bg-red-50 border-red-200 font-bold';
+
+                let dueDateHtml = '';
+                if (t.due_date) {
+                    dueDateHtml = `
+                        <div class="mt-2 text-[11px] text-amber-800 bg-amber-50 border border-amber-200 px-2 py-0.5 rounded-md flex items-center gap-1.5 w-fit font-medium">
+                            <i class="fa-solid fa-clock text-amber-600"></i>
+                            <span>Срок: ${t.due_date}</span>
+                        </div>
+                    `;
+                }
+
+                return `
+                    <div class="${cardBg} border border-slate-200 rounded-xl p-3.5 shadow-sm hover:shadow-md transition">
+                        <div class="flex justify-between items-center mb-1.5">
+                            <div class="flex items-center gap-1.5">
+                                <span class="font-mono text-xs font-bold text-slate-900 bg-slate-100 px-2 py-0.5 rounded border border-slate-200">${t.task_id}</span>
+                                <span class="text-[10px] uppercase px-1.5 py-0.5 rounded border ${priorityBadge}">${t.priority || 'HIGH'}</span>
+                            </div>
+                            <span class="text-[10px] uppercase px-2 py-0.5 rounded border ${statusBadge}">${t.status}</span>
+                        </div>
+                        <h3 class="text-xs font-semibold text-slate-800 mb-1 leading-snug">${t.title}</h3>
+                        <div class="text-[10px] text-slate-400 font-mono flex items-center gap-1">
+                            <i class="fa-solid fa-folder-closed text-slate-300"></i>
+                            <span>${t.module}</span>
+                        </div>
+                        ${dueDateHtml}
+                    </div>
+                `;
+            }).join('');
+        }
+
+        function requestHelp() {
+            const input = document.getElementById('user-input');
+            input.value = "Помощь в общении";
+            document.getElementById('chat-form').requestSubmit();
+        }
+
+        async function sendMessage(e) {
+            e.preventDefault();
+            const input = document.getElementById('user-input');
+            const chatWindow = document.getElementById('chat-window');
+            const sendBtn = document.getElementById('send-btn');
+            const text = input.value.trim();
+
+            if (!text) return;
+
+            if (inputHistory[inputHistory.length - 1] !== text) {
+                inputHistory.push(text);
+                if (inputHistory.length > 50) inputHistory.shift();
+                localStorage.setItem(STORAGE_KEY, JSON.stringify(inputHistory));
+            }
+            historyIndex = -1;
+
+            chatWindow.innerHTML += `
+                <div class="flex justify-end">
+                    <div class="bg-indigo-600 text-white rounded-xl px-4 py-2.5 max-w-2xl text-sm shadow-sm">
+                        ${text}
+                    </div>
+                </div>
+            `;
+            input.value = '';
+            input.style.height = 'auto';
+            chatWindow.scrollTop = chatWindow.scrollHeight;
+
+            sendBtn.disabled = true;
+            sendBtn.classList.add('opacity-50');
+
+            try {
+                const res = await fetch('/api/v1/chat', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${API_TOKEN}`
+                    },
+                    body: JSON.stringify({ session_id: SESSION_ID, message: text })
+                });
+
+                const data = await res.json();
+
+                chatWindow.innerHTML += `
+                    <div class="bg-white border border-slate-200 rounded-xl p-4 max-w-2xl shadow-sm">
+                        <p class="text-xs font-bold text-indigo-600 uppercase tracking-wider mb-1"><i class="fa-solid fa-robot mr-1"></i> ИИ-Ассистент</p>
+                        <p class="text-slate-700 text-sm whitespace-pre-wrap leading-relaxed">${data.reply}</p>
+                    </div>
+                `;
+                chatWindow.scrollTop = chatWindow.scrollHeight;
+                loadTasks();
+
+            } catch (err) {
+                chatWindow.innerHTML += `
+                    <div class="bg-red-50 border border-red-200 rounded-xl p-4 max-w-2xl text-red-700 text-sm">
+                        Ошибка связи с сервером API.
+                    </div>
+                `;
+            } finally {
+                sendBtn.disabled = false;
+                sendBtn.classList.remove('opacity-50');
+            }
+        }
+
+        loadTasks();
+    </script>
+</body>
+</html>
+EOF
+
+# Копируем файл в корень для совместимости с веб-сервером
+cp /home/puh/scud_orion_ai_v2/frontend/index.html /home/puh/scud_orion_ai_v2/index.html