refactor(web_api): fix import paths, modularize routers and decompose agent pipeline

modules/web_api/static/js/tasks.js

@@ -1,6 +1,20 @@
+/**
+===============================================================================
+FILE: modules/web_api/static/js/tasks.js
+ROLE: Управление боковой панелью задач (Drawer), фильтрация и рендеринг карточек.
+
+AI-CONTEXT-ANCHORS:
+  - ANCHOR[DRAWER_TOGGLE]: Открытие и закрытие выезжающей панели.
+  - ANCHOR[TASKS_FILTER]: Фильтрация списка (ALL, IN_PROGRESS, BACKLOG, COMPLETED).
+  - ANCHOR[TASKS_LOAD_FETCH]: Асинхронная загрузка задач через /api/v1/tasks.
+  - ANCHOR[TASKS_RENDER_DOM]: Генерация HTML-карточек в боковом меню.
+===============================================================================
+*/
+
 let currentFilter = 'ALL';
 let allTasks = [];
 
+// --- [SECTION 1: DRAWER TOGGLE] --- # ANCHOR[DRAWER_TOGGLE]
 function toggleDrawer() {
     if (typeof IS_GUEST !== 'undefined' && IS_GUEST) return;
     const drawer = document.getElementById("task-drawer");
@@ -18,6 +32,7 @@ function toggleDrawer() {
     }
 }
 
+// --- [SECTION 2: FILTER CONTROL] --- # ANCHOR[TASKS_FILTER]
 function setFilter(status) {
     currentFilter = status;
     ["ALL", "IN_PROGRESS", "BACKLOG", "COMPLETED"].forEach(f => {
@@ -31,6 +46,7 @@ function setFilter(status) {
     renderTasks();
 }
 
+// --- [SECTION 3: ASYNC DATA FETCH] --- # ANCHOR[TASKS_LOAD_FETCH]
 async function loadTasks() {
     const badge = document.getElementById("task-count-badge");
     const container = document.getElementById("tasks-container");
@@ -62,7 +78,6 @@ async function loadTasks() {
 
         const data = await res.json();
 
-        // Гибкое определение структуры данных (массив или объект с ключом tasks)
         if (Array.isArray(data)) {
             allTasks = data;
         } else if (data && Array.isArray(data.tasks)) {
@@ -88,6 +103,7 @@ async function loadTasks() {
     }
 }
 
+// --- [SECTION 4: DOM RENDERING] --- # ANCHOR[TASKS_RENDER_DOM]
 function renderTasks() {
     const container = document.getElementById("tasks-container");
     if (!container) return;
@@ -105,13 +121,16 @@ function renderTasks() {
 
     container.innerHTML = filtered.map(t => {
         let statusBadge = "bg-slate-100 text-slate-600 border-slate-200";
+        let statusLabel = "В планах";
         let cardBg = "bg-white";
         
         if (t.status === "COMPLETED") {
             statusBadge = "bg-emerald-50 text-emerald-700 border-emerald-300 font-semibold";
+            statusLabel = "Завершено";
             cardBg = "bg-emerald-50/20";
         } else if (t.status === "IN_PROGRESS") {
             statusBadge = "bg-amber-50 text-amber-700 border-amber-300 font-bold";
+            statusLabel = "В работе";
             cardBg = "bg-amber-50/20 border-amber-200";
         }
 
@@ -131,7 +150,7 @@ function renderTasks() {
                         <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 || t.id || 'TASK'}</span>
                         <span class="text-[10px] uppercase px-1.5 py-0.5 rounded border ${priorityBadge}">${t.priority || 'MEDIUM'}</span>
                     </div>
-                    <span class="text-[10px] uppercase px-2 py-0.5 rounded border ${statusBadge}">${t.status || 'BACKLOG'}</span>
+                    <span class="text-[10px] uppercase px-2 py-0.5 rounded border ${statusBadge}">${statusLabel}</span>
                 </div>
                 <h3 class="text-xs font-semibold text-slate-800 mb-1 leading-snug">${t.title || t.description || ''}</h3>
                 <div class="text-[10px] text-slate-400 font-mono flex items-center gap-1">
@@ -142,4 +161,4 @@ function renderTasks() {
             </div>
         `;
     }).join("");
-}
+}