server.py

#!/usr/bin/env python3
"""
🧠 INFATON Control Center v4.0
Универсальный инструмент разработки
Git + Files + Models + Chat | PWA | Порт 9090
"""

import subprocess
import json
import os
import time
import re
import mimetypes
from datetime import datetime
from http.server import HTTPServer, BaseHTTPRequestHandler
from urllib.parse import urlparse, parse_qs, unquote
import urllib.request

PORT = 9090
LMS_BIN = os.path.expanduser("~/.lmstudio/bin/lms")
AGENT_TARS_BIN = "/opt/homebrew/bin/agent-tars"
LM_STUDIO_URL = "http://localhost:1234/v1"
LM_STUDIO_KEY = "lm-studio"
PROJECT_ROOT = os.environ.get("PROJECT_ROOT", os.path.expanduser("~/Projects/my-project"))
LOG_FILE = os.path.expanduser("~/Projects/automation/agent-manager/logs/agents.log")
MAX_FILE_SIZE = 2 * 1024 * 1024  # 2MB limit for editor

WORKTREES = {
    # Add your projects here or use the UI to add them dynamically
    # Example:
    # "my-project": {"path": os.path.expanduser("~/Projects/my-project"), "branch": "main", "label": "My Project", "icon": "📁"},
}

# Allow adding custom projects via env or config
PROJECTS_FILE = os.path.expanduser("~/Projects/automation/control-panel/projects.json")

def load_projects():
    """Load additional projects from config file"""
    global WORKTREES
    if os.path.exists(PROJECTS_FILE):
        try:
            with open(PROJECTS_FILE) as f:
                extra = json.load(f)
            WORKTREES.update(extra)
        except: pass

def save_projects():
    """Save custom projects (non-default) to config"""
    defaults = {"main", "sso", "devtask", "tests"}
    custom = {k: v for k, v in WORKTREES.items() if k not in defaults}
    os.makedirs(os.path.dirname(PROJECTS_FILE), exist_ok=True)
    with open(PROJECTS_FILE, "w") as f:
        json.dump(custom, f, ensure_ascii=False, indent=2)

load_projects()

def ensure_dirs():
    os.makedirs(os.path.dirname(LOG_FILE), exist_ok=True)

def log_event(msg):
    ensure_dirs()
    ts = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    with open(LOG_FILE, "a") as f:
        f.write(f"[{ts}] {msg}\n")

# ═══════════════════════════════════════
# System functions
# ═══════════════════════════════════════
def run_cmd(cmd, timeout=10, cwd=None):
    try:
        env = os.environ.copy()
        env["PATH"] = os.path.expanduser("~/.lmstudio/bin") + ":/opt/homebrew/bin:" + os.path.expanduser("~/.local/bin:") + env.get("PATH", "")
        r = subprocess.run(cmd, shell=True, capture_output=True, text=True, timeout=timeout, env=env, cwd=cwd)
        return r.stdout.strip(), r.returncode
    except subprocess.TimeoutExpired:
        return "timeout", -1
    except Exception as e:
        return str(e), -1

def check_port(port):
    try:
        urllib.request.urlopen(f"http://localhost:{port}/", timeout=3)
        return True
    except:
        return False

# ═══════════════════════════════════════
# Model functions
# ═══════════════════════════════════════
def get_lm_models():
    try:
        req = urllib.request.urlopen(f"{LM_STUDIO_URL}/models", timeout=5)
        data = json.loads(req.read())
        return [{"id": m["id"], "owned_by": m.get("owned_by", "")} for m in data.get("data", [])]
    except:
        return []

def get_all_models():
    out, rc = run_cmd(f"{LMS_BIN} ls --json", timeout=15)
    models = []
    loaded_ids = [m["id"] for m in get_lm_models()]
    try:
        data = json.loads(out)
        for m in data:
            if m.get("type") == "embedding": continue
            mid = m.get("modelKey", "")
            models.append({
                "id": mid, "display": m.get("displayName", mid),
                "size_gb": round(m.get("sizeBytes", 0) / (1024**3), 1),
                "vision": m.get("vision", False), "params": m.get("paramsString", ""),
                "arch": m.get("architecture", ""), "ctx": m.get("maxContextLength", 0),
                "loaded": mid in loaded_ids,
            })
    except: pass
    return models

def unload_model(model_id):
    try:
        payload = json.dumps({"model": model_id}).encode()
        req = urllib.request.Request(f"{LM_STUDIO_URL}/models/unload",
            data=payload, headers={"Content-Type": "application/json"})
        urllib.request.urlopen(req, timeout=10)
        return True
    except:
        out, rc = run_cmd(f"{LMS_BIN} unload {model_id}", timeout=15)
        return rc == 0

def load_model(model_id):
    try:
        payload = json.dumps({"model": model_id}).encode()
        req = urllib.request.Request(f"{LM_STUDIO_URL}/models/load",
            data=payload, headers={"Content-Type": "application/json"})
        urllib.request.urlopen(req, timeout=30)
        return True
    except:
        out, rc = run_cmd(f"{LMS_BIN} load {model_id}", timeout=30)
        return rc == 0

# ═══════════════════════════════════════
# System info
# ═══════════════════════════════════════
def get_system_info():
    mem_out, _ = run_cmd("sysctl -n hw.memsize")
    total_gb = int(mem_out) / (1024**3) if mem_out.isdigit() else 64
    pressure_out, _ = run_cmd("sysctl -n kern.memorystatus_vm_pressure_level")
    pressure_map = {"0": "нет", "1": "низкое", "2": "среднее", "4": "высокое"}
    pressure = pressure_map.get(pressure_out.strip(), "—")
    vm_out, _ = run_cmd("vm_stat | head -5")
    used_gb = total_gb * 0.5
    try:
        pages = {}
        for line in vm_out.split("\n"):
            m = re.match(r'Pages (\w+):\s+(\d+)', line)
            if m: pages[m.group(1)] = int(m.group(2))
        page_size = 16384
        active = pages.get("active", 0) + pages.get("wired", 0) + pages.get("speculative", 0)
        used_gb = (active * page_size) / (1024**3)
    except: pass
    swap_out, _ = run_cmd("sysctl -n vm.swapusage")
    swap_used = "0"
    try:
        m = re.search(r'used\s*=\s*([\d.]+)M', swap_out)
        if m: swap_used = str(round(float(m.group(1)) / 1024, 1))
    except: pass
    return {"total": round(total_gb), "used": round(used_gb, 1), "pressure": pressure, "swap_used": swap_used}

# ═══════════════════════════════════════
# Services
# ═══════════════════════════════════════
SERVICES = [
    {"name": "LM Studio", "port": 1234, "url": "http://localhost:1234"},
    {"name": "Open WebUI", "port": 8080, "url": "http://localhost:8080"},
    {"name": "Agent TARS", "port": 8888, "url": "http://localhost:8888"},
    {"name": "Control Center", "port": 9090, "url": "http://localhost:9090"},
]

def get_services_status():
    result = []
    for s in SERVICES:
        running = True if s["port"] == PORT else check_port(s["port"])
        result.append({"name": s["name"], "port": s["port"], "url": s["url"], "running": running})
    return result

def get_lm_status():
    try:
        req = urllib.request.urlopen(f"{LM_STUDIO_URL}/models", timeout=5)
        data = json.loads(req.read())
        return {"running": True, "models": len(data.get("data", []))}
    except:
        return {"running": False, "models": 0}

# ═══════════════════════════════════════
# Agent/tmux functions
# ═══════════════════════════════════════
def get_worktree_status(name):
    wt = WORKTREES.get(name)
    if not wt or not os.path.exists(wt["path"]): return {"exists": False}
    try:
        r1 = subprocess.run(["git", "log", "--oneline", "-1"], cwd=wt["path"], capture_output=True, text=True, timeout=5)
        last_commit = r1.stdout.strip() if r1.returncode == 0 else "N/A"
        r2 = subprocess.run(["git", "status", "--porcelain"], cwd=wt["path"], capture_output=True, text=True, timeout=5)
        changes = len([l for l in r2.stdout.strip().split("\n") if l.strip()]) if r2.stdout.strip() else 0
        r3 = subprocess.run(["git", "rev-parse", "--abbrev-ref", "HEAD"], cwd=wt["path"], capture_output=True, text=True, timeout=5)
        actual_branch = r3.stdout.strip() if r3.returncode == 0 else wt["branch"]
        return {"exists": True, "branch": actual_branch, "path": wt["path"],
                "last_commit": last_commit, "uncommitted_changes": changes,
                "label": wt["label"], "icon": wt["icon"]}
    except Exception as e:
        return {"exists": True, "error": str(e)}

def get_worktrees():
    result = []
    for name, wt in WORKTREES.items():
        st = get_worktree_status(name)
        result.append({
            "id": name,
            "name": wt.get("label", name),
            "branch": st.get("branch", wt["branch"]),
            "path": wt["path"],
            "icon": wt.get("icon", "📁"),
            "status": f"⚡ {st.get('uncommitted_changes', 0)} changes" if st.get("uncommitted_changes", 0) > 0 else "✓ clean",
            "last_commit": st.get("last_commit", ""),
            "changes": st.get("uncommitted_changes", 0),
        })
    return result

def get_tmux_sessions():
    try:
        r = subprocess.run(["tmux", "list-sessions", "-F", "#{session_name}"],
                           capture_output=True, text=True, timeout=5)
        if r.returncode == 0:
            return [s.strip() for s in r.stdout.strip().split("\n") if s.strip()]
        return []
    except:
        return []

def get_tmux_logs(session):
    if not session: return "Выберите сессию"
    try:
        r = subprocess.run(["tmux", "capture-pane", "-t", session, "-p", "-S", "-50"],
                           capture_output=True, text=True, timeout=5)
        if r.returncode == 0: return r.stdout
        return f"Ошибка: {r.stderr}"
    except Exception as e:
        return f"Ошибка: {e}"

def start_agent(agent_type, worktree, model=None):
    wt = WORKTREES.get(worktree)
    if not wt: return {"ok": False, "error": f"Worktree {worktree} не найден"}
    model = model or "qwen2.5-coder-32b-instruct-4bit"
    if agent_type == "aider":
        cmd = f"aider --model openai/{model} --no-auto-commits --dark-mode"
    elif agent_type == "opencode":
        cmd = "opencode"
    elif agent_type == "smolagent":
        cmd = f"smolagent --model openai/{model}"
    else:
        return {"ok": False, "error": f"Неизвестный тип: {agent_type}"}
    try:
        env_str = f"export PATH=$HOME/.local/bin:/opt/homebrew/bin:$PATH && export OPENAI_API_BASE={LM_STUDIO_URL} && export OPENAI_API_KEY={LM_STUDIO_KEY} && cd {wt['path']} && {cmd}"
        r = subprocess.run(["tmux", "new-window", "-t", "agents", "-n", f"{agent_type}-{worktree}", "/bin/zsh", "-c", env_str],
                           capture_output=True, text=True, timeout=5)
        if r.returncode == 0:
            log_event(f"START: {agent_type} в {worktree} ({model})")
            return {"ok": True}
        return {"ok": False, "error": "tmux сессия 'agents' не найдена. Запустите start-agent-team.sh"}
    except Exception as e:
        return {"ok": False, "error": str(e)}

# ═══════════════════════════════════════
# Smart Chat with tool use (v4.1)
# ═══════════════════════════════════════
import platform
import socket

def _detect_intent(message):
    """Detect user intent from message"""
    msg = message.lower()
    
    # File search intent
    search_words = ['найди', 'найти', 'поиск', 'поищи', 'search', 'find', 'где ', 'покажи файл', 
                    'есть ли файл', 'документ', 'ищи', 'отыщи', 'locate', 'grep']
    file_words = ['файл', 'документ', 'file', 'doc', 'pdf', 'txt', 'папк', 'директори', 
                  'folder', 'каталог', 'проект', 'исходник', 'скрипт', '.py', '.ts', '.js', '.md']
    
    has_search = any(w in msg for w in search_words)
    has_file = any(w in msg for w in file_words)
    
    if has_search and has_file:
        return 'file_search'
    if has_search and not any(w in msg for w in ['инфо', 'что такое', 'как ', 'зачем', 'почему']):
        return 'file_search'
    
    # System info intent
    sys_words = ['диск', 'память', 'cpu', 'процессор', 'место', 'ram', 'систем', 'uptime', 
                 'температур', 'батаре', 'заряд', 'ip адрес', 'hostname', 'версия os']
    if any(w in msg for w in sys_words):
        return 'system_info'
    
    # Process intent
    proc_words = ['процесс', 'запущен', 'работает ли', 'порт', 'pid', 'kill', 'убить процесс',
                  'сервис', 'демон', 'слушает порт']
    if any(w in msg for w in proc_words):
        return 'process_info'
    
    return 'chat'

def _extract_search_query(message):
    """Extract what to search for from message"""
    msg = message.lower()
    # Remove command words
    for w in ['найди', 'найти', 'поиск', 'поищи', 'search', 'find', 'покажи', 'ищи', 'отыщи', 'locate',
              'на моем', 'на моём', 'моем', 'моём', 'ноутбуке', 'макбуке', 'macbook', 'компьютере',
              'все ', 'все\n', 'мне ', 'пожалуйста', 'документы', 'файлы', 'про ', 'о ', 'об ', 
              'в папке', 'в каталоге', 'в директории']:
        msg = msg.replace(w, ' ')
    # Clean up
    query = ' '.join(msg.split()).strip()
    # If nothing left, use original
    if len(query) < 2:
        # Try to extract quoted text or capitalized words
        import re
        caps = re.findall(r'[A-ZА-Я][a-zA-Zа-яА-Я0-9_-]+', message)
        if caps:
            query = ' '.join(caps)
        else:
            query = message
    return query

def _run_file_search(query, message):
    """Actually search files on the machine"""
    results = {}
    
    # 1. Spotlight search (macOS mdfind - fastest, searches content + filenames)
    mdfind_cmd = f"mdfind '{query}' 2>/dev/null | head -30"
    out, rc = run_cmd(mdfind_cmd, timeout=15)
    if rc == 0 and out:
        results['spotlight'] = [f for f in out.split('\n') if f.strip()]
    
    # 2. Filename search in common locations
    find_cmd = f"find ~/Projects ~/Documents ~/Desktop ~/Downloads -iname '*{query}*' -type f 2>/dev/null | head -20"
    out2, rc2 = run_cmd(find_cmd, timeout=10)
    if rc2 == 0 and out2:
        results['filenames'] = [f for f in out2.split('\n') if f.strip()]
    
    # 3. Content search in project files
    grep_cmd = f"grep -rl --include='*.md' --include='*.txt' --include='*.py' --include='*.ts' --include='*.tsx' --include='*.json' --include='*.yaml' --include='*.yml' --include='*.html' --include='*.css' '{query}' ~/Projects/ 2>/dev/null | head -20"
    out3, rc3 = run_cmd(grep_cmd, timeout=15)
    if rc3 == 0 and out3:
        results['content'] = [f for f in out3.split('\n') if f.strip()]
    
    return results

def _format_search_results(query, results):
    """Format search results as readable text"""
    total = sum(len(v) for v in results.values())
    if total == 0:
        return f"🔍 По запросу **\"{query}\"** ничего не найдено на этом компьютере.\n\nПопробуйте:\n- Другие ключевые слова\n- Проверить правописание\n- Поискать в конкретной папке через файловый менеджер (вкладка 📁)"
    
    lines = [f"🔍 Найдено **{total}** результатов по запросу **\"{query}\"**:\n"]
    
    # Spotlight results
    if results.get('spotlight'):
        lines.append("### 📂 Spotlight (macOS)")
        for f in results['spotlight'][:15]:
            # Shorten home path
            f_short = f.replace(os.path.expanduser('~'), '~')
            lines.append(f"- `{f_short}`")
    
    # Filename matches
    if results.get('filenames'):
        seen = set(results.get('spotlight', []))
        new_files = [f for f in results['filenames'] if f not in seen]
        if new_files:
            lines.append("\n### 📄 Совпадения по имени файла")
            for f in new_files[:10]:
                f_short = f.replace(os.path.expanduser('~'), '~')
                lines.append(f"- `{f_short}`")
    
    # Content matches
    if results.get('content'):
        seen = set(results.get('spotlight', []) + results.get('filenames', []))
        new_files = [f for f in results['content'] if f not in seen]
        if new_files:
            lines.append("\n### 🔎 Содержат текст в файле")
            for f in new_files[:10]:
                f_short = f.replace(os.path.expanduser('~'), '~')
                lines.append(f"- `{f_short}`")
    
    return '\n'.join(lines)

def _get_system_context(project_id=None):
    """Get current system context for LLM. Only include project info if project_id is given."""
    uname = platform.uname()
    home = os.path.expanduser('~')
    user = os.environ.get('USER', 'unknown')
    hostname = socket.gethostname()
    
    project_block = ""
    if project_id and project_id in WORKTREES:
        wt = WORKTREES[project_id]
        project_block = f"""
Активный проект: {wt.get('label', project_id)}
Путь: {wt['path']}
Ветка: {wt.get('branch', '?')}
Используй этот контекст при ответах о коде и структуре этого проекта."""
    
    return f"""Ты — ИИ-помощник в INFATON Control Center v4.1, работающий ЛОКАЛЬНО на компьютере пользователя.

Среда:
- ОС: {uname.system} {uname.release} ({uname.machine})
- Хост: {hostname}
- Пользователь: {user}
- Домашняя папка: {home}
{project_block}

Правила:
- Отвечай на русском, кратко и по делу
- Если вопрос про код — показывай примеры
- Ты работаешь ЛОКАЛЬНО, у тебя есть доступ к файлам через Control Center
- НЕ давай инструкции для Windows если система macOS и наоборот
- НЕ упоминай и не ссылайся на проекты пользователя, если он сам не спросил
- Если проект не выбран — ты универсальный помощник, не привязанный к конкретному проекту"""

def _get_system_info():
    """Gather system info for sys info requests"""
    parts = []
    
    # Memory
    out, _ = run_cmd("vm_stat | head -5; echo '---'; sysctl -n hw.memsize", timeout=5)
    parts.append(f"**Память:**\n```\n{out}\n```")
    
    # Disk
    out2, _ = run_cmd("df -h / | tail -1", timeout=5)
    parts.append(f"**Диск:**\n```\n{out2}\n```")
    
    # CPU
    out3, _ = run_cmd("sysctl -n machdep.cpu.brand_string 2>/dev/null || echo 'N/A'; echo 'Load:'; uptime", timeout=5)
    parts.append(f"**CPU:**\n```\n{out3}\n```")
    
    # Battery
    out4, _ = run_cmd("pmset -g batt 2>/dev/null | head -3", timeout=5)
    if out4:
        parts.append(f"**Батарея:**\n```\n{out4}\n```")
    
    # Network
    out5, _ = run_cmd("ifconfig en0 | grep 'inet ' | awk '{print $2}'; echo 'Tailscale:'; tailscale ip -4 2>/dev/null || echo 'N/A'", timeout=5)
    parts.append(f"**Сеть:**\n```\n{out5}\n```")
    
    return '\n\n'.join(parts)

def _get_process_info(message):
    """Get process/port info"""
    msg = message.lower()
    parts = []
    
    # Check for specific port
    import re
    port_match = re.search(r'порт[уе]?\s*(\d+)|port\s*(\d+)|:(\d+)', msg)
    if port_match:
        port = port_match.group(1) or port_match.group(2) or port_match.group(3)
        out, _ = run_cmd(f"lsof -i :{port} -P -n 2>/dev/null | head -10", timeout=5)
        parts.append(f"**Порт {port}:**\n```\n{out or 'Свободен'}\n```")
    
    # Top processes
    out2, _ = run_cmd("ps aux --sort=-%mem 2>/dev/null | head -10 || ps aux | head -10", timeout=5)
    parts.append(f"**Топ процессы:**\n```\n{out2}\n```")
    
    # Listening ports
    out3, _ = run_cmd("lsof -i -P -n 2>/dev/null | grep LISTEN | head -15", timeout=5)
    parts.append(f"**Открытые порты:**\n```\n{out3}\n```")
    
    return '\n\n'.join(parts)


def _extract_file_content(attachment):
    """Extract text content from attached file"""
    import base64, tempfile
    name = attachment.get('name', '')
    data_url = attachment.get('data', '')
    is_image = attachment.get('isImage', False)
    
    if is_image:
        return None, data_url  # Return as image for vision model
    
    # Decode base64 data
    try:
        # data:application/pdf;base64,XXXX
        if ',' in data_url:
            b64_data = data_url.split(',', 1)[1]
        else:
            b64_data = data_url
        raw = base64.b64decode(b64_data)
    except:
        return f"[Ошибка чтения файла {name}]", None
    
    ext = name.rsplit('.', 1)[-1].lower() if '.' in name else ''
    
    # Plain text files
    if ext in ('txt', 'md', 'json', 'py', 'ts', 'js', 'css', 'html', 'csv', 'log', 'yaml', 'yml', 'sh', 'bat'):
        try:
            return raw.decode('utf-8', errors='replace'), None
        except:
            return raw.decode('latin-1', errors='replace'), None
    
    # PDF — use macOS textutil or pdftotext
    if ext == 'pdf':
        with tempfile.NamedTemporaryFile(suffix='.pdf', delete=False) as tmp:
            tmp.write(raw)
            tmp_path = tmp.name
        # Try pdftotext first, then textutil
        out, rc = run_cmd(f"pdftotext '{tmp_path}' - 2>/dev/null || textutil -convert txt -stdout '{tmp_path}' 2>/dev/null", timeout=15)
        os.unlink(tmp_path)
        if out.strip():
            return out[:10000], None  # Limit to 10K chars
        return f"[PDF: не удалось извлечь текст из {name}]", None
    
    # DOCX — use textutil (macOS built-in)
    if ext in ('doc', 'docx'):
        with tempfile.NamedTemporaryFile(suffix=f'.{ext}', delete=False) as tmp:
            tmp.write(raw)
            tmp_path = tmp.name
        out, rc = run_cmd(f"textutil -convert txt -stdout '{tmp_path}' 2>/dev/null", timeout=15)
        os.unlink(tmp_path)
        if out.strip():
            return out[:10000], None
        return f"[DOCX: не удалось извлечь текст из {name}]", None
    
    # XLSX — use python3 inline
    if ext in ('xls', 'xlsx'):
        with tempfile.NamedTemporaryFile(suffix=f'.{ext}', delete=False) as tmp:
            tmp.write(raw)
            tmp_path = tmp.name
        # Try using python csv export
        out, rc = run_cmd(f"""python3 -c "
import csv, io, sys
try:
    import openpyxl
    wb = openpyxl.load_workbook('{tmp_path}', read_only=True, data_only=True)
    result = []
    for ws in wb.worksheets:
        result.append(f'=== Sheet: {{ws.title}} ===')
        for row in ws.iter_rows(max_row=200, values_only=True):
            result.append('\t'.join(str(c) if c is not None else '' for c in row))
    print('\n'.join(result[:500]))
except ImportError:
    print('[XLSX: openpyxl не установлен, установите: pip3 install openpyxl]')
except Exception as e:
    print(f'[XLSX ошибка: {{e}}]')
" 2>/dev/null""", timeout=15)
        os.unlink(tmp_path)
        if out.strip():
            return out[:10000], None
        return f"[XLSX: не удалось прочитать {name}]", None
    
    return f"[Формат .{ext} не поддерживается]", None

def quick_chat(message, model=None, project=None, attachments=None):
    """Enhanced chat with tool use and system context"""
    models = get_lm_models()
    if not model:
        model = models[0]["id"] if models else "qwen2.5-coder-32b-instruct-4bit"
    
    # Process file attachments
    extra_context = ""
    image_data = None
    if attachments:
        for att in attachments:
            text, img = _extract_file_content(att)
            if text:
                extra_context += f"\n\n--- Содержимое файла {att.get('name', '?')} ---\n{text}\n---"
            if img:
                image_data = img  # Use last image for vision
        if extra_context:
            message = message + extra_context
    
    intent = _detect_intent(message)
    
    # === File search: execute locally, then pass results to LLM ===
    if intent == 'file_search':
        query = _extract_search_query(message)
        results = _run_file_search(query, message)
        formatted = _format_search_results(query, results)
        
        # If we have results, ask LLM to summarize/comment
        if sum(len(v) for v in results.values()) > 0:
            try:
                context = f"Пользователь попросил: {message}\n\nРезультаты реального поиска на компьютере:\n{formatted}\n\nДай краткий комментарий к найденным файлам (1-2 предложения). Не повторяй список."
                payload = json.dumps({"model": model, "messages": [
                    {"role": "system", "content": _get_system_context(project)},
                    {"role": "user", "content": context}
                ], "temperature": 0.3, "max_tokens": 512, "stream": False}).encode()
                req = urllib.request.Request(f"{LM_STUDIO_URL}/chat/completions", data=payload,
                    headers={"Content-Type": "application/json", "Authorization": f"Bearer {LM_STUDIO_KEY}"})
                with urllib.request.urlopen(req, timeout=60) as resp:
                    comment = json.loads(resp.read())["choices"][0]["message"]["content"]
                return formatted + "\n\n---\n💬 " + comment
            except:
                return formatted
        else:
            return formatted
    
    # === System info: gather and return ===
    if intent == 'system_info':
        info = _get_system_info()
        return f"📊 **Информация о системе:**\n\n{info}"
    
    # === Process info ===
    if intent == 'process_info':
        info = _get_process_info(message)
        return f"⚙️ **Информация о процессах:**\n\n{info}"
    
    # === Regular chat with system context ===
    try:
        # Build messages with optional image
        user_msg = message
        if image_data and 'vl' in model.lower():
            # Vision model — send image inline
            messages = [
                {"role": "system", "content": _get_system_context(project)},
                {"role": "user", "content": [
                    {"type": "text", "text": message},
                    {"type": "image_url", "image_url": {"url": image_data}}
                ]}
            ]
        else:
            messages = [
                {"role": "system", "content": _get_system_context(project)},
                {"role": "user", "content": message}
            ]
        payload = json.dumps({"model": model, "messages": messages, "temperature": 0.3, "max_tokens": 2048, "stream": False}).encode()
        req = urllib.request.Request(f"{LM_STUDIO_URL}/chat/completions", data=payload,
            headers={"Content-Type": "application/json", "Authorization": f"Bearer {LM_STUDIO_KEY}"})
        with urllib.request.urlopen(req, timeout=120) as resp:
            return json.loads(resp.read())["choices"][0]["message"]["content"]
    except urllib.error.URLError as e:
        return f"⚠️ LM Studio недоступен: {e}\n\nПроверьте что LM Studio запущен на порту 1234."
    except Exception as e:
        return f"❌ Ошибка: {e}"


# ═══════════════════════════════════════
# GIT functions (NEW in v4)
# ═══════════════════════════════════════
def _resolve_wt_path(wt_id):
    """Resolve worktree path from ID or direct path"""
    if wt_id in WORKTREES:
        return WORKTREES[wt_id]["path"]
    # Try direct path
    if os.path.isdir(wt_id):
        return wt_id
    return None

def git_status_detailed(wt_id):
    """Full git status: branch, ahead/behind, files, last commits"""
    path = _resolve_wt_path(wt_id)
    if not path: return {"error": f"Project not found: {wt_id}"}
    
    # Current branch
    branch, _ = run_cmd("git rev-parse --abbrev-ref HEAD", cwd=path)
    # Status porcelain
    status_out, _ = run_cmd("git status --porcelain -u", cwd=path)
    files = []
    for line in status_out.split("\n"):
        if not line.strip(): continue
        st = line[:2]
        fname = line[3:]
        files.append({"status": st.strip(), "file": fname})
    # Ahead/behind
    ahead_behind, _ = run_cmd("git rev-list --left-right --count HEAD...@{upstream} 2>/dev/null || echo '0\t0'", cwd=path)
    parts = ahead_behind.split("\t")
    ahead = int(parts[0]) if len(parts) >= 2 else 0
    behind = int(parts[1]) if len(parts) >= 2 else 0
    # Last 5 commits
    log_out, _ = run_cmd('git log --oneline -5 --format="%h|%s|%an|%ar"', cwd=path)
    commits = []
    for line in log_out.split("\n"):
        if not line.strip(): continue
        p = line.split("|", 3)
        if len(p) >= 4:
            commits.append({"hash": p[0], "message": p[1], "author": p[2], "time": p[3]})
        elif len(p) >= 2:
            commits.append({"hash": p[0], "message": p[1], "author": "", "time": ""})
    # Remote URL
    remote, _ = run_cmd("git remote get-url origin 2>/dev/null", cwd=path)
    
    return {
        "branch": branch, "files": files, "ahead": ahead, "behind": behind,
        "commits": commits, "remote": remote, "path": path,
        "clean": len(files) == 0
    }

def git_pull(wt_id):
    path = _resolve_wt_path(wt_id)
    if not path: return {"ok": False, "error": "Project not found"}
    out, rc = run_cmd("git pull --rebase 2>&1", timeout=30, cwd=path)
    log_event(f"GIT PULL: {wt_id} → {'OK' if rc == 0 else 'FAIL'}")
    return {"ok": rc == 0, "output": out}

def git_push(wt_id):
    path = _resolve_wt_path(wt_id)
    if not path: return {"ok": False, "error": "Project not found"}
    out, rc = run_cmd("git push 2>&1", timeout=30, cwd=path)
    log_event(f"GIT PUSH: {wt_id} → {'OK' if rc == 0 else 'FAIL'}")
    return {"ok": rc == 0, "output": out}

def git_commit(wt_id, message, files=None):
    path = _resolve_wt_path(wt_id)
    if not path: return {"ok": False, "error": "Project not found"}
    if not message: return {"ok": False, "error": "Empty commit message"}
    if files:
        for f in files:
            run_cmd(f"git add {json.dumps(f)}", cwd=path)
    else:
        run_cmd("git add -A", cwd=path)
    out, rc = run_cmd(f'git commit -m {json.dumps(message)} 2>&1', timeout=15, cwd=path)
    log_event(f"GIT COMMIT: {wt_id} — {message[:50]}")
    return {"ok": rc == 0, "output": out}

def git_diff(wt_id, file_path=None):
    path = _resolve_wt_path(wt_id)
    if not path: return {"error": "Project not found"}
    if file_path:
        safe_file = file_path.replace("'", "\\'")
        out, _ = run_cmd(f"git diff -- '{safe_file}' 2>&1; git diff --cached -- '{safe_file}' 2>&1", cwd=path)
    else:
        out, _ = run_cmd("git diff 2>&1; git diff --cached 2>&1", cwd=path)
    return {"diff": out}

def git_checkout(wt_id, branch):
    path = _resolve_wt_path(wt_id)
    if not path: return {"ok": False, "error": "Project not found"}
    out, rc = run_cmd(f"git checkout {branch} 2>&1", timeout=15, cwd=path)
    return {"ok": rc == 0, "output": out}

def git_branches(wt_id):
    path = _resolve_wt_path(wt_id)
    if not path: return {"error": "Project not found"}
    out, _ = run_cmd("git branch -a --format='%(refname:short)|%(objectname:short)|%(committerdate:relative)'", cwd=path)
    branches = []
    current, _ = run_cmd("git rev-parse --abbrev-ref HEAD", cwd=path)
    for line in out.split("\n"):
        if not line.strip(): continue
        p = line.split("|", 2)
        branches.append({
            "name": p[0], "hash": p[1] if len(p) > 1 else "",
            "time": p[2] if len(p) > 2 else "",
            "current": p[0] == current
        })
    return {"branches": branches, "current": current}

def git_stash(wt_id, action="push", message=""):
    path = _resolve_wt_path(wt_id)
    if not path: return {"ok": False, "error": "Project not found"}
    if action == "push":
        cmd = f'git stash push -m {json.dumps(message or "WIP")} 2>&1'
    elif action == "pop":
        cmd = "git stash pop 2>&1"
    elif action == "list":
        cmd = "git stash list 2>&1"
    else:
        return {"ok": False, "error": f"Unknown stash action: {action}"}
    out, rc = run_cmd(cmd, cwd=path)
    return {"ok": rc == 0, "output": out}

# ═══════════════════════════════════════
# FILE functions (NEW in v4)
# ═══════════════════════════════════════
BINARY_EXTS = {'.png', '.jpg', '.jpeg', '.gif', '.ico', '.webp', '.svg', '.woff', '.woff2', '.ttf', '.eot',
               '.zip', '.gz', '.tar', '.pdf', '.mp4', '.mp3', '.wav', '.mov', '.avi',
               '.pyc', '.pyo', '.so', '.dylib', '.o', '.a', '.exe', '.dll'}
SKIP_DIRS = {'node_modules', '.next', '.build', '.git', '__pycache__', '.cache', 'dist', '.yarn', 'venv', '.venv'}

def list_files(base_path, rel_path=""):
    """List directory contents with git status indicators"""
    full = os.path.join(base_path, rel_path) if rel_path else base_path
    if not os.path.isdir(full): return {"error": "Not a directory"}
    
    # Get git status for this directory
    git_status = {}
    try:
        out, rc = run_cmd("git status --porcelain -u", cwd=base_path)
        if rc == 0:
            for line in out.split("\n"):
                if not line.strip(): continue
                st = line[:2].strip()
                fname = line[3:]
                git_status[fname] = st
    except: pass

    items = []
    try:
        entries = sorted(os.listdir(full), key=lambda x: (not os.path.isdir(os.path.join(full, x)), x.lower()))
    except PermissionError:
        return {"error": "Permission denied"}
    
    for entry in entries:
        if entry.startswith('.') and entry not in ('.env', '.gitignore', '.eslintrc.json', '.prettierrc'):
            continue
        if entry in SKIP_DIRS: continue
        fpath = os.path.join(full, entry)
        rpath = os.path.join(rel_path, entry) if rel_path else entry
        is_dir = os.path.isdir(fpath)
        git_st = ""
        if is_dir:
            # Check if any file inside has git changes
            for gf, gs in git_status.items():
                if gf.startswith(rpath + "/"):
                    git_st = "M"
                    break
        else:
            git_st = git_status.get(rpath, "")
        
        item = {"name": entry, "path": rpath, "is_dir": is_dir, "git_status": git_st}
        if not is_dir:
            try:
                item["size"] = os.path.getsize(fpath)
            except: item["size"] = 0
            _, ext = os.path.splitext(entry)
            item["ext"] = ext.lower()
            item["binary"] = ext.lower() in BINARY_EXTS
        items.append(item)
    return {"items": items, "path": rel_path, "base": base_path}

def read_file(base_path, rel_path):
    """Read file contents for editor"""
    full = os.path.join(base_path, rel_path)
    if not os.path.isfile(full): return {"error": "File not found"}
    try:
        size = os.path.getsize(full)
        if size > MAX_FILE_SIZE:
            return {"error": f"File too large: {size} bytes (max {MAX_FILE_SIZE})"}
        _, ext = os.path.splitext(full)
        if ext.lower() in BINARY_EXTS:
            return {"error": "Binary file, cannot edit"}
        with open(full, 'r', errors='replace') as f:
            content = f.read()
        return {"content": content, "path": rel_path, "size": size, "ext": ext.lower()}
    except Exception as e:
        return {"error": str(e)}

def write_file(base_path, rel_path, content):
    """Save file from editor"""
    full = os.path.join(base_path, rel_path)
    if not full.startswith(base_path):
        return {"ok": False, "error": "Path traversal blocked"}
    try:
        os.makedirs(os.path.dirname(full), exist_ok=True)
        with open(full, 'w') as f:
            f.write(content)
        return {"ok": True, "size": len(content)}
    except Exception as e:
        return {"ok": False, "error": str(e)}

def create_item(base_path, rel_path, is_dir=False):
    """Create file or directory"""
    full = os.path.join(base_path, rel_path)
    try:
        if is_dir:
            os.makedirs(full, exist_ok=True)
        else:
            os.makedirs(os.path.dirname(full), exist_ok=True)
            with open(full, 'w') as f: pass
        return {"ok": True}
    except Exception as e:
        return {"ok": False, "error": str(e)}

def delete_item(base_path, rel_path):
    """Delete file or directory"""
    full = os.path.join(base_path, rel_path)
    if not full.startswith(base_path):
        return {"ok": False, "error": "Path traversal blocked"}
    try:
        if os.path.isdir(full):
            import shutil
            shutil.rmtree(full)
        else:
            os.remove(full)
        return {"ok": True}
    except Exception as e:
        return {"ok": False, "error": str(e)}

def search_files(base_path, query, max_results=50):
    """Search in files using grep"""
    try:
        safe_q = query.replace("'", "\\'")
        out, rc = run_cmd(
            f"grep -rn --include='*.py' --include='*.ts' --include='*.tsx' --include='*.js' --include='*.jsx' --include='*.json' --include='*.css' --include='*.html' --include='*.md' --include='*.yaml' --include='*.yml' --include='*.prisma' --include='*.env' -l '{safe_q}' . 2>/dev/null | head -{max_results}",
            timeout=15, cwd=base_path
        )
        files = [f.lstrip('./') for f in out.split("\n") if f.strip()]
        # Get matches with context
        results = []
        for fpath in files[:20]:
            out2, _ = run_cmd(f"grep -n '{safe_q}' '{fpath}' 2>/dev/null | head -5", cwd=base_path)
            matches = []
            for line in out2.split("\n"):
                if ":" in line:
                    ln, txt = line.split(":", 1)
                    matches.append({"line": int(ln) if ln.isdigit() else 0, "text": txt[:200]})
            results.append({"file": fpath, "matches": matches})
        return {"results": results, "total": len(files)}
    except Exception as e:
        return {"error": str(e)}

# ═══════════════════════════════════════
# Project management (NEW in v4)
# ═══════════════════════════════════════
def add_project(key, path, label, icon="📁"):
    """Add a new project to the panel"""
    if not os.path.isdir(path):
        return {"ok": False, "error": f"Directory not found: {path}"}
    # Detect branch
    branch_out, rc = run_cmd("git rev-parse --abbrev-ref HEAD 2>/dev/null", cwd=path)
    branch = branch_out if rc == 0 else "—"
    WORKTREES[key] = {"path": path, "branch": branch, "label": label, "icon": icon}
    save_projects()
    return {"ok": True}

def remove_project(key):
    defaults = {"main", "sso", "devtask", "tests"}
    if key in defaults:
        return {"ok": False, "error": "Cannot remove default project"}
    if key in WORKTREES:
        del WORKTREES[key]
        save_projects()
        return {"ok": True}
    return {"ok": False, "error": "Project not found"}


# ═══════════════════════════════════════
# PWA Assets
# ═══════════════════════════════════════
MANIFEST_JSON = json.dumps({
    "name": "INFATON Control Center",
    "short_name": "INFATON CC",
    "description": "Универсальный инструмент разработки",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#0d1017",
    "theme_color": "#7c3aed",
    "orientation": "any",
    "icons": [
        {"src": "/icon-192.svg", "sizes": "192x192", "type": "image/svg+xml"},
        {"src": "/icon-512.svg", "sizes": "512x512", "type": "image/svg+xml"}
    ]
})

ICON_SVG = """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:#6366f1"/><stop offset="100%" style="stop-color:#a855f7"/></linearGradient></defs>
<rect width="512" height="512" rx="96" fill="url(#g)"/>
<text x="256" y="320" text-anchor="middle" font-size="280" fill="white" font-family="system-ui">🧠</text>
</svg>"""

SW_JS = """
const CACHE = 'infaton-cc-v4';
const PRECACHE = ['/', '/manifest.json'];
self.addEventListener('install', e => { e.waitUntil(caches.open(CACHE).then(c => c.addAll(PRECACHE))); self.skipWaiting(); });
self.addEventListener('activate', e => { e.waitUntil(caches.keys().then(ks => Promise.all(ks.filter(k => k !== CACHE).map(k => caches.delete(k))))); });
self.addEventListener('fetch', e => {
  if (e.request.url.includes('/api')) return;
  e.respondWith(fetch(e.request).then(r => { const c = r.clone(); caches.open(CACHE).then(cache => cache.put(e.request, c)); return r; }).catch(() => caches.match(e.request)));
});
"""

HTML_PAGE = r"""<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0d1017">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/icon-192.svg">
<title>INFATON Control Center</title>
<style>
/* ═══ CSS Variables ═══ */
:root{
  --bg-0:#0d1017;--bg-1:#131721;--bg-2:#1a1f2e;--bg-3:#222738;
  --tx-0:#e6e6e6;--tx-1:#a0a8c0;--tx-2:#6b7394;
  --accent:#7c3aed;--accent2:#a855f7;--green:#22c55e;--red:#ef4444;--yellow:#eab308;--blue:#3b82f6;
  --mono:'SF Mono','Fira Code','JetBrains Mono',monospace;
  --sans:'Inter',-apple-system,system-ui,sans-serif;
  --radius:10px;--glass:rgba(255,255,255,0.04);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);background:var(--bg-0);color:var(--tx-0);overflow-x:hidden;min-height:100vh}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg-1)}
::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:3px}

/* ═══ Layout ═══ */
.app{display:flex;height:100vh;overflow:hidden}
.sidebar{width:52px;background:var(--bg-1);border-right:1px solid var(--bg-3);display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:2px;flex-shrink:0;z-index:50}
.sidebar .logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px;cursor:pointer}
.sidebar .nav-btn{width:40px;height:40px;border-radius:8px;border:none;background:transparent;color:var(--tx-2);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.sidebar .nav-btn:hover{background:var(--glass);color:var(--tx-1)}
.sidebar .nav-btn.active{background:var(--accent);color:#fff}
.sidebar .spacer{flex:1}
.sidebar .nav-btn.bottom{font-size:14px}

.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{height:40px;background:var(--bg-1);border-bottom:1px solid var(--bg-3);display:flex;align-items:center;padding:0 16px;gap:12px;flex-shrink:0}
.topbar .title{font-size:13px;font-weight:600;color:var(--tx-0)}
.topbar .breadcrumb{font-size:12px;color:var(--tx-2);font-family:var(--mono)}
.topbar .spacer{flex:1}
.topbar .badge{font-size:11px;padding:2px 8px;border-radius:10px;background:var(--accent);color:#fff}

.content{flex:1;overflow:auto;padding:0}
.tab-content{display:none;height:100%;overflow:auto}
.tab-content.active{display:flex;flex-direction:column}

/* ═══ Panel Tab ═══ */
.panel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:16px}
.svc-card{background:var(--bg-2);border:1px solid var(--bg-3);border-radius:var(--radius);padding:14px;transition:all .2s;cursor:pointer}
.svc-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.svc-card .top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.svc-card .dot{width:10px;height:10px;border-radius:50%}
.svc-card .dot.on{background:var(--green);box-shadow:0 0 8px var(--green)}
.svc-card .dot.off{background:var(--red);box-shadow:0 0 8px var(--red)}
.svc-card .name{font-size:14px;font-weight:600}
.svc-card .port{font-size:12px;color:var(--tx-2);font-family:var(--mono)}
.svc-card .url{font-size:11px;color:var(--tx-2);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.info-bar{display:flex;gap:16px;padding:0 16px 12px;flex-wrap:wrap;align-items:center}
.info-chip{font-size:12px;padding:4px 12px;border-radius:16px;background:var(--bg-2);border:1px solid var(--bg-3);color:var(--tx-1);display:flex;align-items:center;gap:6px}
.info-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--green)}

.ram-bar{flex:1;min-width:200px;max-width:400px;height:22px;background:var(--bg-2);border-radius:11px;overflow:hidden;border:1px solid var(--bg-3);position:relative}
.ram-bar .fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:11px;transition:width .5s}
.ram-bar .label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}

/* ═══ Models section ═══ */
.models-section{padding:16px}
.model-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.model-card{background:var(--bg-2);border:1px solid var(--bg-3);border-radius:var(--radius);padding:12px;display:flex;align-items:center;gap:10px}
.model-card .icon{font-size:24px}
.model-card .info{flex:1;min-width:0}
.model-card .mname{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.model-card .meta{font-size:11px;color:var(--tx-2);display:flex;gap:8px}
.model-card .actions{display:flex;gap:4px}

/* ═══ Projects Tab ═══ */
.projects-layout{display:flex;height:100%;overflow:hidden}
.project-sidebar{width:260px;background:var(--bg-1);border-right:1px solid var(--bg-3);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.project-sidebar .header{padding:10px 12px;border-bottom:1px solid var(--bg-3);display:flex;align-items:center;gap:8px}
.project-sidebar .header h3{font-size:13px;font-weight:600;flex:1}
.project-list{flex:1;overflow-y:auto;padding:4px}
.project-item{padding:8px 12px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13px;transition:all .15s;border:1px solid transparent}
.project-item:hover{background:var(--glass)}
.project-item.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.project-item .icon{font-size:16px}
.project-item .info{flex:1;min-width:0}
.project-item .pname{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-item .branch{font-size:11px;color:var(--tx-2);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-item.active .branch{color:rgba(255,255,255,.7)}
.project-item .changes{font-size:11px;padding:1px 6px;border-radius:8px;background:var(--yellow);color:#000;font-weight:600;flex-shrink:0}
.project-item.active .changes{background:rgba(255,255,255,.3);color:#fff}

/* ═══ Git Panel ═══ */
.git-panel{background:var(--bg-1);border-bottom:1px solid var(--bg-3);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.git-actions{display:flex;gap:6px;flex-wrap:wrap}
.git-btn{font-size:12px;padding:5px 12px;border-radius:6px;border:1px solid var(--bg-3);background:var(--bg-2);color:var(--tx-0);cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .15s;font-family:var(--sans)}
.git-btn:hover{border-color:var(--accent);background:var(--bg-3)}
.git-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.git-btn.primary:hover{background:var(--accent2)}
.git-btn.danger{border-color:var(--red);color:var(--red)}
.git-btn.danger:hover{background:var(--red);color:#fff}
.git-info{font-size:12px;color:var(--tx-2);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.git-info .ahead{color:var(--green)}
.git-info .behind{color:var(--yellow)}

/* ═══ File Tree ═══ */
.file-area{flex:1;display:flex;overflow:hidden}
.file-tree{width:260px;background:var(--bg-1);border-right:1px solid var(--bg-3);overflow-y:auto;flex-shrink:0}
.file-tree .tree-header{padding:8px 12px;border-bottom:1px solid var(--bg-3);display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--tx-1)}
.file-tree .tree-header input{flex:1;background:var(--bg-2);border:1px solid var(--bg-3);border-radius:4px;padding:4px 8px;color:var(--tx-0);font-size:12px;font-family:var(--sans);outline:none}
.file-tree .tree-header input:focus{border-color:var(--accent)}
.tree-items{padding:4px 0}
.tree-item{padding:3px 8px 3px;cursor:pointer;display:flex;align-items:center;gap:4px;font-size:13px;transition:background .1s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:2px solid transparent}
.tree-item:hover{background:var(--glass)}
.tree-item.active{background:rgba(124,58,237,.15);border-left-color:var(--accent);color:#fff}
.tree-item .icon{font-size:14px;flex-shrink:0;width:18px;text-align:center}
.tree-item .fname{flex:1;overflow:hidden;text-overflow:ellipsis}
.tree-item .git-st{font-size:10px;font-weight:700;flex-shrink:0;width:14px;text-align:center}
.tree-item .git-st.M{color:var(--yellow)}
.tree-item .git-st.A{color:var(--green)}
.tree-item .git-st.D{color:var(--red)}
.tree-item .git-st.U{color:var(--red)}
.tree-item .fsize{font-size:10px;color:var(--tx-2);flex-shrink:0}

/* ═══ Editor ═══ */
.editor-area{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-0)}
.editor-tabs{display:flex;background:var(--bg-1);border-bottom:1px solid var(--bg-3);overflow-x:auto;flex-shrink:0}
.editor-tab{padding:6px 14px;font-size:12px;color:var(--tx-2);cursor:pointer;border-right:1px solid var(--bg-3);display:flex;align-items:center;gap:6px;white-space:nowrap;transition:all .15s;border-bottom:2px solid transparent}
.editor-tab:hover{background:var(--glass);color:var(--tx-0)}
.editor-tab.active{color:var(--tx-0);background:var(--bg-0);border-bottom-color:var(--accent)}
.editor-tab .close{font-size:14px;opacity:.5;cursor:pointer;margin-left:4px}
.editor-tab .close:hover{opacity:1;color:var(--red)}
.editor-tab .modified{width:6px;height:6px;border-radius:50%;background:var(--yellow)}

.editor-wrapper{flex:1;position:relative;overflow:hidden}
.editor-container{position:absolute;inset:0;display:flex}
.line-numbers{padding:8px 4px 8px 8px;background:var(--bg-1);color:var(--tx-2);font-family:var(--mono);font-size:13px;line-height:1.6;text-align:right;user-select:none;overflow:hidden;min-width:48px;border-right:1px solid var(--bg-3)}
.code-editor{flex:1;padding:8px 12px;background:var(--bg-0);color:var(--tx-0);font-family:var(--mono);font-size:13px;line-height:1.6;border:none;outline:none;resize:none;overflow:auto;white-space:pre;tab-size:2}

.editor-statusbar{height:24px;background:var(--bg-1);border-top:1px solid var(--bg-3);display:flex;align-items:center;padding:0 12px;gap:16px;font-size:11px;color:var(--tx-2);flex-shrink:0}
.editor-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--tx-2);font-size:14px;flex-direction:column;gap:8px}
.editor-empty .icon{font-size:48px;opacity:.3}

/* ═══ Search Panel ═══ */
.search-panel{padding:12px;background:var(--bg-1);border-bottom:1px solid var(--bg-3)}
.search-panel input{width:100%;background:var(--bg-2);border:1px solid var(--bg-3);border-radius:6px;padding:6px 10px;color:var(--tx-0);font-size:13px;outline:none;font-family:var(--sans)}
.search-panel input:focus{border-color:var(--accent)}
.search-results{padding:8px;overflow-y:auto;max-height:300px}
.search-result{padding:6px 8px;border-radius:4px;cursor:pointer;font-size:12px;border-bottom:1px solid var(--bg-3)}
.search-result:hover{background:var(--glass)}
.search-result .file{color:var(--accent);font-weight:600}
.search-result .match{color:var(--tx-1);font-family:var(--mono);font-size:11px}
.search-result .line-num{color:var(--yellow);margin-right:4px}

/* ═══ Agents Tab ═══ */
.agents-content{padding:16px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}
.agent-section{background:var(--bg-2);border:1px solid var(--bg-3);border-radius:var(--radius);overflow:hidden}
.agent-section .section-header{padding:10px 14px;background:var(--bg-1);display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;border-bottom:1px solid var(--bg-3)}

/* Start agent form */
.agent-form{padding:14px;display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.agent-form .field{display:flex;flex-direction:column;gap:4px}
.agent-form .field label{font-size:11px;color:var(--tx-2);text-transform:uppercase;letter-spacing:.5px}
.agent-form select,.agent-form input,.agent-form textarea{background:var(--bg-1);border:1px solid var(--bg-3);border-radius:6px;padding:6px 10px;color:var(--tx-0);font-size:13px;font-family:var(--sans);outline:none}
.agent-form select:focus,.agent-form input:focus,.agent-form textarea:focus{border-color:var(--accent)}

/* ═══ Chat ═══ */
.chat-box{display:flex;flex-direction:column;overflow:hidden}
.chat-header{padding:10px 14px;background:var(--bg-1);display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;border-bottom:1px solid var(--bg-3)}
.chat-header .model-chip{margin-left:auto;font-size:11px;padding:2px 8px;border-radius:8px;background:var(--accent);color:#fff;font-family:var(--mono)}
.chat-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;min-height:200px;max-height:50vh}
.msg{display:flex;gap:10px;max-width:85%}
.msg.user{flex-direction:row-reverse;align-self:flex-end}
.msg .avatar{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.msg.user .avatar{background:var(--accent)}
.msg.ai .avatar{background:var(--bg-3)}
.msg .bubble{padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.5;position:relative;word-break:break-word}
.msg.user .bubble{background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.msg.ai .bubble{background:var(--bg-2);border:1px solid var(--bg-3);border-bottom-left-radius:4px}
.msg .bubble pre{background:var(--bg-0);border:1px solid var(--bg-3);border-radius:6px;padding:8px;margin:6px 0;overflow-x:auto;font-family:var(--mono);font-size:12px}
.msg .bubble code{font-family:var(--mono);font-size:12px;background:rgba(0,0,0,.3);padding:1px 4px;border-radius:3px}
.msg .time{font-size:10px;color:var(--tx-2);margin-top:4px}
.chat-input{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--bg-3);background:var(--bg-1)}
.chat-input textarea{flex:1;background:var(--bg-2);border:1px solid var(--bg-3);border-radius:8px;padding:8px 12px;color:var(--tx-0);font-size:13px;outline:none;font-family:var(--sans);resize:none;min-height:calc(5 * 1.6em);max-height:calc(10 * 1.6em);overflow-y:auto;line-height:1.6}
.chat-input textarea:focus{border-color:var(--accent)}
.chat-input button{width:36px;height:36px;border-radius:8px;border:none;background:var(--accent);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.chat-input button:hover{background:var(--accent2)}

/* ═══ Terminal Logs ═══ */
.log-box{background:#0a0a0a;border-radius:8px;overflow:hidden;border:1px solid var(--bg-3)}
.log-header{padding:8px 12px;background:var(--bg-1);display:flex;align-items:center;gap:8px;font-size:13px;border-bottom:1px solid var(--bg-3)}
.log-dots{display:flex;gap:6px}
.log-dots span{width:12px;height:12px;border-radius:50%}
.log-dots .r{background:#ff5f56}.log-dots .y{background:#ffbd2e}.log-dots .g{background:#27c93f}
.log-output{padding:10px;font-family:var(--mono);font-size:12px;line-height:1.5;color:#22c55e;min-height:calc(5 * 1.6em);max-height:calc(10 * 1.6em);overflow-y:auto;white-space:pre-wrap}

/* ═══ Help Tab Enhanced ═══ */
.help-content{padding:16px;overflow-y:auto}
.help-section-title{font-size:16px;font-weight:700;margin:20px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--bg-3);color:var(--accent);display:flex;align-items:center;gap:8px}
.help-section-title:first-child{margin-top:0}
.scenario{background:var(--bg-2);border:1px solid var(--bg-3);border-radius:var(--radius);margin-bottom:8px;overflow:hidden}
.scenario .sc-header{padding:12px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:14px;transition:background .15s}
.scenario .sc-header:hover{background:var(--glass)}
.scenario .sc-header .arrow{color:var(--tx-2);transition:transform .2s;font-size:12px}
.scenario .sc-header .arrow.open{transform:rotate(90deg)}
.scenario .sc-body{padding:0 14px 14px;font-size:13px;line-height:1.7;color:var(--tx-1);display:none}
.scenario .sc-body.open{display:block}
.scenario .sc-body code{background:var(--bg-0);padding:1px 6px;border-radius:3px;font-family:var(--mono);font-size:12px;color:var(--green)}
.scenario .sc-body a{color:var(--accent);text-decoration:none}
.scenario .sc-body a:hover{text-decoration:underline}
.scenario .sc-body ul{margin:6px 0 6px 18px}
.scenario .sc-body ol{margin:6px 0 6px 18px}
.scenario .sc-body li{margin-bottom:4px}
.scenario .sc-body h4{color:var(--tx-0);font-size:13px;font-weight:600;margin:10px 0 6px}
.scenario .sc-body table{width:100%;border-collapse:collapse;margin:8px 0;font-size:12px}
.scenario .sc-body table th{text-align:left;padding:6px 8px;background:var(--bg-0);color:var(--tx-0);border:1px solid var(--bg-3);font-weight:600}
.scenario .sc-body table td{padding:6px 8px;border:1px solid var(--bg-3)}
.scenario .sc-body .tip{background:rgba(124,58,237,.1);border-left:3px solid var(--accent);padding:8px 12px;border-radius:0 6px 6px 0;margin:8px 0;font-size:12px}
.scenario .sc-body .warn{background:rgba(234,179,8,.1);border-left:3px solid var(--yellow);padding:8px 12px;border-radius:0 6px 6px 0;margin:8px 0;font-size:12px}
.scenario .sc-body .cmd{background:var(--bg-0);border:1px solid var(--bg-3);border-radius:6px;padding:8px 12px;margin:6px 0;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--green);overflow-x:auto;white-space:pre}
.scenario .sc-body .kbd{display:inline-block;background:var(--bg-0);border:1px solid var(--bg-3);border-radius:4px;padding:1px 6px;font-family:var(--mono);font-size:11px;color:var(--tx-0);box-shadow:0 1px 0 var(--bg-3)}

/* ═══ Modal ═══ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:1000;display:none;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal{background:var(--bg-2);border:1px solid var(--bg-3);border-radius:12px;padding:20px;min-width:400px;max-width:560px;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal h3{font-size:16px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.modal .field{margin-bottom:12px}
.modal .field label{display:block;font-size:12px;color:var(--tx-2);margin-bottom:4px}
.modal .field input,.modal .field select,.modal .field textarea{width:100%;background:var(--bg-1);border:1px solid var(--bg-3);border-radius:6px;padding:8px 10px;color:var(--tx-0);font-size:13px;outline:none;font-family:var(--sans)}
.modal .field textarea{min-height:60px;resize:vertical;font-family:var(--mono)}
.modal .field input:focus,.modal .field textarea:focus{border-color:var(--accent)}
.modal .btns{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.modal .btn{padding:7px 16px;border-radius:6px;border:1px solid var(--bg-3);background:var(--bg-3);color:var(--tx-0);font-size:13px;cursor:pointer;font-family:var(--sans)}
.modal .btn:hover{border-color:var(--tx-2)}
.modal .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.modal .btn.primary:hover{background:var(--accent2)}

/* ═══ Toast ═══ */
.toast{position:fixed;bottom:20px;right:20px;padding:10px 18px;border-radius:8px;font-size:13px;color:#fff;z-index:2000;animation:slideIn .3s;max-width:400px}
.toast.success{background:var(--green)}
.toast.error{background:var(--red)}
.toast.info{background:var(--blue)}
@keyframes slideIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ═══ Diff View ═══ */
.diff-view{font-family:var(--mono);font-size:12px;line-height:1.6;padding:8px;overflow:auto;background:#0a0a0a;max-height:400px}
.diff-view .add{color:var(--green);background:rgba(34,197,94,.08)}
.diff-view .del{color:var(--red);background:rgba(239,68,68,.08)}
.diff-view .hunk{color:var(--blue);font-weight:600;margin-top:4px}
.diff-view .ctx{color:var(--tx-2)}

/* ═══ Utility ═══ */
.hidden{display:none!important}
.flex{display:flex}.flex-1{flex:1}.gap-8{gap:8px}
.text-center{text-align:center}
.loading{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-icon{background:none;border:none;color:var(--tx-2);cursor:pointer;padding:4px;border-radius:4px;font-size:16px}
.btn-icon:hover{background:var(--glass);color:var(--tx-0)}
</style>
</head>
<body>
<div class="app">
  <!-- Sidebar Navigation -->
  <nav class="sidebar">
    <div class="logo" title="INFATON Control Center">🧠</div>
    <button class="nav-btn active" data-tab="panel" title="Панель">🎛</button>
    <button class="nav-btn" data-tab="projects" title="Проекты">📁</button>
    <button class="nav-btn" data-tab="agents" title="Агенты">🤖</button>
    <button class="nav-btn" data-tab="help" title="Справка">📚</button>
    <div class="spacer"></div>
    <button class="nav-btn bottom" onclick="addProjectModal()" title="Добавить проект">➕</button>
    <button class="nav-btn bottom" id="pwa-install" title="Установить PWA" style="display:none">📲</button>
  </nav>

  <div class="main">
    <!-- Top Bar -->
    <div class="topbar">
      <span class="title">INFATON Control Center</span>
      <span class="breadcrumb" id="topbar-breadcrumb">v4.0</span>
      <div class="spacer"></div>
      <span class="badge" id="topbar-status">—</span>
    </div>

    <!-- Tab: Panel -->
    <div class="tab-content active" id="tab-panel">
      <div style="padding:16px 16px 8px"><h3 style="font-size:15px;font-weight:600;margin-bottom:4px">🎛 Сервисы</h3></div>
      <div class="panel-grid" id="services-grid"></div>
      <div class="info-bar" id="info-bar"></div>
      <div class="models-section">
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
          <h3 style="font-size:15px;font-weight:600">🤖 Модели</h3>
          <button class="git-btn" onclick="refreshModels()">🔄 Обновить</button>
        </div>
        <div class="model-grid" id="models-grid"></div>
      </div>
    </div>

    <!-- Tab: Projects -->
    <div class="tab-content" id="tab-projects">
      <div class="projects-layout">
        <!-- Left: Project list -->
        <div class="project-sidebar">
          <div class="header">
            <h3>📂 Проекты</h3>
            <button class="btn-icon" onclick="addProjectModal()" title="Добавить проект">➕</button>
            <button class="btn-icon" onclick="refreshProjects()" title="Обновить">🔄</button>
          </div>
          <div class="project-list" id="project-list"></div>
        </div>
        <!-- Middle: Git + File tree -->
        <div style="display:flex;flex-direction:column;width:260px;flex-shrink:0;border-right:1px solid var(--bg-3)">
          <div class="git-panel" id="git-panel">
            <div class="git-info" id="git-info">Выберите проект</div>
            <div class="git-actions" id="git-actions"></div>
          </div>
          <div class="file-tree" style="flex:1;overflow-y:auto">
            <div class="tree-header">
              <input id="file-filter" placeholder="Фильтр файлов..." oninput="filterFiles()">
              <button class="btn-icon" onclick="refreshFiles()" title="Обновить">🔄</button>
            </div>
            <div class="tree-items" id="file-tree"></div>
          </div>
        </div>
        <!-- Right: Editor -->
        <div class="editor-area">
          <div class="editor-tabs" id="editor-tabs"></div>
          <div class="editor-wrapper">
            <div class="editor-container" id="editor-container">
              <div class="editor-empty" id="editor-empty">
                <div class="icon">📝</div>
                <div>Выберите файл для редактирования</div>
                <div style="font-size:12px;color:var(--tx-2)">Ctrl+S — сохранить | Ctrl+P — поиск файлов</div>
              </div>
            </div>
          </div>
          <div class="editor-statusbar" id="editor-statusbar">
            <span id="sb-lang">—</span>
            <span id="sb-lines">—</span>
            <span id="sb-size">—</span>
            <div style="flex:1"></div>
            <span id="sb-cursor">Ln 1, Col 1</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Tab: Agents -->
    <div class="tab-content" id="tab-agents">
      <div class="agents-content">
        <!-- Start Agent -->
        <div class="agent-section">
          <div class="section-header">🤖 Запуск AI-агента</div>
          <div class="agent-form">
            <div class="field"><label>Worktree</label><select id="agent-wt"></select></div>
            <div class="field"><label>Агент</label>
              <select id="agent-type"><option value="aider">⚡ Aider</option><option value="opencode">🔧 OpenCode</option><option value="smolagent">🧠 SmoLAgent</option></select>
            </div>
            <div class="field" style="flex:1"><label>Задание (необязательно)</label>
              <textarea id="agent-task" rows="2" placeholder="Опишите задачу для агента..." style="width:100%"></textarea>
            </div>
            <button class="git-btn primary" onclick="startAgent()">▶ Запустить</button>
          </div>
        </div>

        <!-- Quick Chat -->
        <div class="agent-section chat-box">
          <div class="chat-header">
            💬 Quick Chat
            <span class="model-chip" id="chat-model">—</span>
            <button class="btn-icon" onclick="clearChat()" title="Очистить">🗑</button>
          </div>
          <div class="chat-messages" id="chat-messages"></div>
          <div id="chat-attachments" style="display:none;padding:6px 14px;border-top:1px solid var(--bg-3);display:flex;flex-wrap:wrap;gap:6px"></div>
          <div class="chat-input" style="flex-direction:column;gap:6px">
            <div style="display:flex;gap:8px;width:100%;align-items:flex-end">
              <textarea id="chat-input" rows="3" placeholder="Введите сообщение... (Shift+Enter — новая строка)" onkeydown="chatKeyHandler(event)" oninput="autoGrowTextarea(this)"></textarea>
              <div style="display:flex;flex-direction:column;gap:4px">
                <button onclick="document.getElementById('chat-file-input').click()" title="Прикрепить файл" style="width:36px;height:36px;border-radius:8px;border:none;background:var(--bg-3);color:var(--tx-1);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center">📎</button>
                <button onclick="sendChat()" title="Отправить" style="width:36px;height:36px;border-radius:8px;border:none;background:var(--accent);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center">⬆</button>
              </div>
            </div>
            <input type="file" id="chat-file-input" style="display:none" accept=".txt,.md,.json,.py,.ts,.js,.csv,.log,.pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.webp,.bmp" multiple onchange="handleFileAttach(event)">
          </div>
        </div>

        <!-- Logs -->
        <div class="agent-section log-box">
          <div class="log-header">
            <div class="log-dots"><span class="r"></span><span class="y"></span><span class="g"></span></div>
            <span>💻 Логи агентов</span>
            <div style="flex:1"></div>
            <select id="log-session" style="background:var(--bg-2);border:1px solid var(--bg-3);border-radius:4px;padding:2px 6px;color:var(--tx-0);font-size:12px">
              <option value="">tmux-сессия...</option>
            </select>
            <button class="btn-icon" onclick="refreshLogs()">🔄</button>
            <label style="font-size:11px;color:var(--tx-2);display:flex;align-items:center;gap:4px">
              <input type="checkbox" id="log-auto" checked> auto
            </label>
          </div>
          <div class="log-output" id="log-output">Выберите tmux-сессию и нажмите 🔄</div>
        </div>
      </div>
    </div>

    <!-- Tab: Help -->
    <div class="tab-content" id="tab-help">
      <div class="help-content" id="help-content"></div>
    </div>
  </div>
</div>

<!-- Modals -->
<div class="modal-overlay" id="modal-commit">
  <div class="modal">
    <h3>📝 Git Commit</h3>
    <div class="field"><label>Сообщение коммита</label><input id="commit-msg" placeholder="feat: описание изменений"></div>
    <div class="field"><label>Файлы (пусто = все)</label><div id="commit-files" style="max-height:200px;overflow-y:auto;font-size:12px"></div></div>
    <div class="btns">
      <button class="btn" onclick="closeModal('modal-commit')">Отмена</button>
      <button class="btn primary" onclick="doCommit()">Commit</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="modal-add-project">
  <div class="modal">
    <h3>➕ Добавить проект</h3>
    <div class="field"><label>Ключ (латиница)</label><input id="proj-key" placeholder="my-project"></div>
    <div class="field"><label>Путь на диске</label><input id="proj-path" placeholder="~/Projects/my-project"></div>
    <div class="field"><label>Название</label><input id="proj-label" placeholder="Мой проект"></div>
    <div class="field"><label>Иконка</label><input id="proj-icon" value="📁" style="width:60px"></div>
    <div class="btns">
      <button class="btn" onclick="closeModal('modal-add-project')">Отмена</button>
      <button class="btn primary" onclick="doAddProject()">Добавить</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="modal-diff">
  <div class="modal" style="min-width:600px;max-width:800px">
    <h3>📊 Git Diff <span id="diff-filename" style="font-family:var(--mono);font-size:13px;color:var(--tx-2)"></span></h3>
    <div class="diff-view" id="diff-content"></div>
    <div class="btns"><button class="btn" onclick="closeModal('modal-diff')">Закрыть</button></div>
  </div>
</div>

<div id="toast-container"></div>
<script>
// ═══════════════════════════════════════
// State
// ═══════════════════════════════════════
let currentProject = null;  // worktree key
let currentPath = '';       // relative path in file tree
let openTabs = [];          // [{path, content, modified, name}]
let activeTab = null;       // index in openTabs
let chatHistory = [];
let autoRefreshLogs = null;

const SCENARIOS = [
  // ═══ РАЗДЕЛ 1: НАЧАЛО РАБОТЫ ═══
  {section: "🏁 Начало работы", items: [
    {title:"🚀 Быстрый старт — первый запуск", body:`
<ol>
<li><b>Запустить все AI-сервисы</b> одной командой:
<div class="cmd">~/Projects/automation/start-ai-services.sh</div>
Скрипт автоматически проверяет и запускает:
<ul><li>LM Studio API (порт 1234)</li><li>Open WebUI (порт 8080)</li><li>Agent TARS (порт 8888)</li><li>Control Center (порт 9090)</li></ul>
</li>
<li><b>Проверить статус</b> — перейти на вкладку <b>🎛 Панель</b>:
<ul><li>Все индикаторы должны быть зелёными (4/4)</li><li>RAM: проверьте текущую нагрузку памяти</li><li>В секции «Модели» — должна быть хотя бы одна loaded ✅</li></ul>
</li>
<li><b>Начать работу</b> — перейти на вкладку <b>📁 Проекты</b>:
<ul><li>Выбрать проект из списка слева</li><li>Открыть файлы в редакторе</li><li>Использовать Git для синхронизации</li></ul>
</li>
</ol>
<div class="tip">💡 Если LM Studio не запускается автоматически — запустите приложение LM Studio вручную через Launchpad, загрузите модель, затем повторите скрипт.</div>
`},

    {title:"⚙️ Архитектура системы", body:`
<h4>Компоненты</h4>
<table>
<tr><th>Компонент</th><th>Порт</th><th>Назначение</th></tr>
<tr><td>LM Studio</td><td>1234</td><td>Локальный LLM-сервер, OpenAI-совместимый API</td></tr>
<tr><td>Open WebUI</td><td>8080</td><td>Веб-интерфейс для чатов с моделями</td></tr>
<tr><td>Agent TARS</td><td>8888</td><td>Автономный AI-агент с браузером</td></tr>
<tr><td>Control Center</td><td>9090</td><td>Эта панель — единый интерфейс управления</td></tr>
</table>
<h4>Структура файлов</h4>
<div class="cmd">~/Projects/
├── your-project/         # 📁 Ваш проект (добавьте через UI)
└── automation/
    ├── control-panel/
    │   └── server.py     # Этот сервер
    ├── start-ai-services.sh
    ├── start-agent-team.sh
    └── mac-agent.py</div>
<h4>Технологический стек</h4>
<ul>
<li><b>Оборудование</b>: Apple Silicon Mac (рекомендуется M1 Pro и выше)</li>
<li><b>LLM</b>: Qwen3 VL 32B (vision), Qwen 2.5 Coder 32B</li>
<li><b>Фреймворк</b>: Next.js, Prisma ORM, PostgreSQL</li>
<li><b>AI-агенты</b>: Aider, OpenCode, SmoLAgent</li>
</ul>
`},
  ]},

  // ═══ РАЗДЕЛ 2: РАБОТА С ПРОЕКТАМИ ═══
  {section: "📁 Работа с проектами", items: [
    {title:"📂 Управление проектами", body:`
<h4>Проекты</h4>
<p>Проекты добавляются через интерфейс (кнопка ➕) или файл <code>projects.json</code>. 
При первом запуске список пуст — добавьте свои проекты.</p>
<table>
<tr><th>Поле</th><th>Описание</th><th>Пример</th></tr>
<tr><td>Ключ</td><td>Уникальный ID (латиница)</td><td><code>my-project</code></td></tr>
<tr><td>Путь</td><td>Полный путь на диске</td><td><code>~/Projects/my-project</code></td></tr>
<tr><td>Ветка</td><td>Git-ветка по умолчанию</td><td><code>main</code></td></tr>
<tr><td>Иконка</td><td>Любой эмодзи</td><td>📁 🔧 💼</td></tr>
</table>

<h4>Добавить новый проект</h4>
<ol>
<li>Нажмите <b>➕</b> в sidebar или в шапке списка проектов</li>
<li>Заполните форму:
<ul>
<li><b>Ключ</b> — уникальное имя (латиница, без пробелов): <code>my-project</code></li>
<li><b>Путь</b> — полный путь к папке на MacBook: <code>~/Projects/my-project</code></li>
<li><b>Название</b> — отображаемое имя: <code>Мой проект</code></li>
<li><b>Иконка</b> — любой эмодзи: 📁, 🔧, 💼, 🎮</li>
</ul>
</li>
<li>Нажмите «Добавить» — проект появится в списке</li>
</ol>
<div class="tip">💡 Добавленные проекты сохраняются в <code>~/Projects/automation/control-panel/projects.json</code> и переживают перезапуск сервера.</div>
<div class="warn">⚠️ Проект должен быть Git-репозиторием для работы Git-функций. Если нет — файловый менеджер и редактор всё равно будут работать.</div>
`},

    {title:"📄 Файловый менеджер", body:`
<h4>Навигация</h4>
<ul>
<li><b>Клик на папку</b> — открыть содержимое</li>
<li><b>⬆ ..</b> — подняться на уровень выше</li>
<li><b>Фильтр</b> — поле ввода над деревом, мгновенный поиск по имени</li>
<li><b>🔄</b> — обновить список файлов</li>
</ul>

<h4>Иконки типов файлов</h4>
<table>
<tr><th>Иконка</th><th>Расширения</th><th>Тип</th></tr>
<tr><td>🐍</td><td>.py</td><td>Python</td></tr>
<tr><td>🔷</td><td>.ts</td><td>TypeScript</td></tr>
<tr><td>⚛</td><td>.tsx, .jsx</td><td>React компоненты</td></tr>
<tr><td>🟨</td><td>.js</td><td>JavaScript</td></tr>
<tr><td>📋</td><td>.json</td><td>JSON данные</td></tr>
<tr><td>🎨</td><td>.css</td><td>Стили CSS</td></tr>
<tr><td>🌐</td><td>.html</td><td>HTML страницы</td></tr>
<tr><td>📝</td><td>.md</td><td>Markdown документация</td></tr>
<tr><td>⚙</td><td>.yaml, .yml, .toml</td><td>Конфигурации</td></tr>
<tr><td>💎</td><td>.prisma</td><td>Prisma Schema</td></tr>
<tr><td>🔒</td><td>.env</td><td>Переменные окружения</td></tr>
<tr><td>🖥</td><td>.sh</td><td>Shell скрипты</td></tr>
<tr><td>🗃</td><td>.sql</td><td>SQL запросы</td></tr>
</table>

<h4>Git-статусы в дереве файлов</h4>
<ul>
<li><b style="color:var(--yellow)">M</b> — модифицирован (modified)</li>
<li><b style="color:var(--green)">A</b> — добавлен (added/staged)</li>
<li><b style="color:var(--red)">D</b> — удалён (deleted)</li>
<li><b style="color:var(--red)">??</b> — неотслеживаемый (untracked)</li>
<li><b style="color:var(--yellow)">●</b> у папки — есть изменения внутри</li>
</ul>
<div class="tip">💡 Скрытые папки автоматически фильтруются: <code>node_modules</code>, <code>.next</code>, <code>.git</code>, <code>__pycache__</code>, <code>.cache</code></div>
`},

    {title:"✏️ Редактор кода", body:`
<h4>Основные функции</h4>
<ul>
<li><b>Открытие файла</b> — клик в файловом дереве</li>
<li><b>Мультитабы</b> — множество файлов одновременно, переключение кликом</li>
<li><b>Индикатор изменений</b> — жёлтая точка <b style="color:var(--yellow)">●</b> на табе, если файл изменён</li>
<li><b>Закрытие таба</b> — <b>×</b> справа (спросит подтверждение если есть изменения)</li>
<li><b>Номера строк</b> — синхронизированная прокрутка с кодом</li>
<li><b>Tab</b> — вставка 2 пробела (мягкий таб)</li>
</ul>

<h4>Статусбар</h4>
<ul>
<li><b>Язык</b> — определяется по расширению файла (Python, TypeScript, JSON...)</li>
<li><b>Строки</b> — количество строк в файле</li>
<li><b>Размер</b> — размер файла в B/K/M</li>
<li><b>Позиция</b> — Ln (строка), Col (колонка) курсора</li>
</ul>

<h4>Ограничения</h4>
<ul>
<li>Максимальный размер файла: <b>2 МБ</b> (для больших используйте терминал)</li>
<li>Бинарные файлы (.png, .jpg, .pdf, .zip) — не открываются</li>
<li>Подсветка синтаксиса — базовая (без AST-парсинга)</li>
</ul>
<div class="tip">💡 Для серьёзного рефакторинга используйте <b>AI-агенты</b> (Aider, OpenCode) — они работают с проектом в терминале с полной поддержкой LSP.</div>
`},
  ]},

  // ═══ РАЗДЕЛ 3: GIT ═══
  {section: "🔀 Git и контроль версий", items: [
    {title:"🔀 Git операции — обзор", body:`
<h4>Панель Git</h4>
<p>При выборе проекта в верхней части отображается Git-панель с информацией:</p>
<ul>
<li><b>⑂ ветка</b> — текущая активная ветка</li>
<li><b>↑ ahead</b> — сколько коммитов впереди remote (зелёный)</li>
<li><b>↓ behind</b> — сколько коммитов отстаёте от remote (жёлтый)</li>
<li><b>файлов изменено</b> — количество uncommitted файлов</li>
<li><b>remote URL</b> — адрес удалённого репозитория</li>
</ul>

<h4>Кнопки операций</h4>
<table>
<tr><th>Кнопка</th><th>Команда Git</th><th>Описание</th></tr>
<tr><td>⬇ Pull</td><td><code>git pull --rebase</code></td><td>Получить изменения с remote, перебазировать</td></tr>
<tr><td>⬆ Push</td><td><code>git push</code></td><td>Отправить коммиты в remote</td></tr>
<tr><td>📝 Commit</td><td><code>git add + git commit</code></td><td>Зафиксировать изменения (модальное окно)</td></tr>
<tr><td>📊 Diff</td><td><code>git diff</code></td><td>Просмотр всех изменений</td></tr>
<tr><td>📦 Stash</td><td><code>git stash push</code></td><td>Сохранить изменения во временное хранилище</td></tr>
<tr><td>📤 Pop</td><td><code>git stash pop</code></td><td>Восстановить из stash</td></tr>
<tr><td>🔀 Branches</td><td><code>git branch -a</code></td><td>Список веток, переключение</td></tr>
</table>
`},

    {title:"📝 Commit — пошагово", body:`
<ol>
<li>Нажмите <b>📝 Commit</b> в Git-панели</li>
<li>В модальном окне отображается список <b>всех изменённых файлов</b> с чекбоксами:
<ul>
<li>По умолчанию все файлы выбраны</li>
<li>Снимите галочку с файлов, которые не хотите коммитить</li>
<li>Статусы файлов: <b style="color:var(--yellow)">M</b> modified, <b style="color:var(--green)">A</b> added, <b style="color:var(--red)">D</b> deleted, <b>??</b> new</li>
</ul>
</li>
<li>Введите <b>сообщение коммита</b>. Рекомендуемый формат:
<div class="cmd">feat: добавлена авторизация SSO через ADFS
fix: исправлена валидация email в форме регистрации
docs: обновлена документация API Bridge
refactor: оптимизация запросов к БД в модуле задач
test: добавлены E2E тесты для модуля верификации</div>
</li>
<li>Нажмите <b>Commit</b> — выполнится <code>git add</code> для выбранных файлов + <code>git commit</code></li>
</ol>
<div class="warn">⚠️ Пустые файлы (все галочки сняты) → коммит всех файлов (<code>git add -A</code>). Если файлы не выбраны, а сообщение пустое — ошибка.</div>
`},

    {title:"📊 Diff и Branches", body:`
<h4>Просмотр изменений (Diff)</h4>
<ul>
<li>Нажмите <b>📊 Diff</b> — откроется модальное окно с diff всех файлов</li>
<li>Подсветка: <b style="color:var(--green)">+ добавленные строки</b>, <b style="color:var(--red)">- удалённые строки</b></li>
<li>Заголовки чанков <b style="color:var(--blue)">@@...@@</b> показывают номера строк</li>
</ul>

<h4>Управление ветками (Branches)</h4>
<ul>
<li>Нажмите <b>🔀 Branches</b> — откроется список всех веток (локальных и remote)</li>
<li>Для каждой ветки: имя, хэш последнего коммита, время</li>
<li><b>● текущая</b> / ○ другие</li>
<li>Клик по ветке → <code>git checkout</code> → переключение</li>
</ul>

<h4>Stash — временное хранилище</h4>
<ul>
<li><b>📦 Stash</b> → <code>git stash push -m "WIP"</code> — сохранить все изменения</li>
<li><b>📤 Pop</b> → <code>git stash pop</code> — восстановить последний stash</li>
<li>Удобно для переключения между задачами без коммита</li>
</ul>
`},

    {title:"🔄 Типовой workflow разработки", body:`
<h4>Сценарий: работа над задачей</h4>
<ol>
<li><b>Открыть проект</b> — выбрать нужный worktree (напр. SSO)</li>
<li><b>⬇ Pull</b> — получить последние изменения</li>
<li><b>Редактировать файлы</b> — открыть в редакторе, внести правки</li>
<li><b>Ctrl+S</b> — сохранить каждый файл</li>
<li><b>📊 Diff</b> — проверить свои изменения</li>
<li><b>📝 Commit</b> — зафиксировать с осмысленным сообщением</li>
<li><b>⬆ Push</b> — отправить в remote-репозиторий</li>
</ol>

<h4>Сценарий: срочное переключение</h4>
<ol>
<li>Работаете в SSO, нужно срочно править master</li>
<li><b>📦 Stash</b> — сохранить текущие изменения</li>
<li>Выбрать проект «Главный (master)»</li>
<li>Сделать исправление → Commit → Push</li>
<li>Вернуться в SSO → <b>📤 Pop</b> — восстановить изменения</li>
</ol>

<h4>Сценарий: merge ветки в master</h4>
<div class="cmd"># В терминале на MacBook:
cd ~/Projects/your-project
git merge --no-ff feature/your-branch -m "merge: feature в master"
git push</div>
<div class="tip">💡 Merge пока доступен только из терминала. В будущей версии будет кнопка Merge прямо в интерфейсе.</div>
`},
  ]},

  // ═══ РАЗДЕЛ 4: AI И МОДЕЛИ ═══
  {section: "🤖 AI-инструменты", items: [
    {title:"🧠 Управление моделями LM Studio", body:`
<h4>Вкладка «Панель» → секция «Модели»</h4>
<ul>
<li><b>✅ loaded</b> — модель загружена в память, готова к работе</li>
<li><b>⚪ available</b> — модель скачана, но не загружена</li>
<li><b>Загрузить</b> — загрузить модель в VRAM/RAM (кнопка на карточке)</li>
<li><b>Выгрузить</b> — освободить память</li>
</ul>

<h4>Рекомендуемые модели</h4>
<table>
<tr><th>Модель</th><th>Размер</th><th>Назначение</th></tr>
<tr><td>Qwen3 VL 32B</td><td>~18 GB</td><td>Vision + Code — основная рабочая модель</td></tr>
<tr><td>Qwen 2.5 Coder 32B</td><td>~18 GB</td><td>Программирование — для AI-агентов</td></tr>
<tr><td>DeepSeek R1 0528</td><td>~18 GB</td><td>Рассуждения, сложные задачи</td></tr>
</table>

<div class="warn">⚠️ M4 Max (64 GB) может держать 1-2 больших модели одновременно. Следите за RAM на панели — если > 85%, выгрузите ненужные модели.</div>

<h4>API endpoint</h4>
<div class="cmd">http://localhost:1234/v1</div>
<p>Совместим с OpenAI API: <code>/v1/models</code>, <code>/v1/chat/completions</code>.<br>
API Key: <code>lm-studio</code> (фиктивный, авторизация не требуется).</p>
`},

    {title:"⚡ AI-агенты (Aider, OpenCode, SmoLAgent)", body:`
<h4>Типы агентов</h4>
<table>
<tr><th>Агент</th><th>Назначение</th><th>Особенности</th></tr>
<tr><td>⚡ Aider</td><td>Автоматическое редактирование кода</td><td>Понимает Git, создаёт коммиты, работает с контекстом проекта</td></tr>
<tr><td>🔧 OpenCode</td><td>Интерактивная разработка</td><td>CLI-интерфейс, подсветка, авто-дополнение</td></tr>
<tr><td>🧠 SmoLAgent</td><td>Мульти-модальный агент</td><td>Работа с изображениями, анализ, цепочки рассуждений</td></tr>
</table>

<h4>Запуск агента</h4>
<ol>
<li>Перейдите на вкладку <b>🤖 Агенты</b></li>
<li>Выберите <b>Worktree</b> (в каком проекте работать)</li>
<li>Выберите <b>Агент</b> (Aider / OpenCode / SmoLAgent)</li>
<li>Опционально: введите <b>Задание</b> (описание задачи)</li>
<li>Нажмите <b>▶ Запустить</b></li>
</ol>
<p>Агент откроется в новом окне tmux-сессии <code>agents</code>.</p>

<h4>Agent Team — 4 агента параллельно</h4>
<div class="cmd">~/Projects/automation/start-agent-team.sh</div>
<p>Создаёт tmux-сессию с 4 панелями:</p>
<div class="cmd">┌──────────────┬──────────────┐
│ 🔐 SSO       │ 📋 DevTask   │
│ (aider)      │ (aider)      │
├──────────────┼──────────────┤
│ 🧪 Тесты     │ 📊 Главный   │
│ (opencode)   │ (monitor)    │
└──────────────┴──────────────┘</div>
<p>Управление tmux:</p>
<ul>
<li><code>tmux attach -t agents</code> — подключиться к сессии</li>
<li><span class="kbd">Ctrl+B</span> затем <span class="kbd">стрелки</span> — переключение панелей</li>
<li><span class="kbd">Ctrl+B</span> затем <span class="kbd">D</span> — отключиться (сессия продолжает работать)</li>
<li><span class="kbd">Ctrl+B</span> затем <span class="kbd">Z</span> — развернуть/свернуть панель</li>
</ul>
`},

    {title:"💬 Quick Chat — чат с моделью", body:`
<h4>Использование</h4>
<ul>
<li>Находится на вкладке <b>🤖 Агенты</b></li>
<li>Использует модель, загруженную в LM Studio</li>
<li>Модель отображается в чипе справа (напр. <code>qwen/qwen3-vl-32b</code>)</li>
<li>Поддерживает Markdown в ответах: <b>жирный</b>, <code>код</code>, блоки кода</li>
</ul>

<h4>Примеры использования</h4>
<ul>
<li>«Как реализовать OIDC авторизацию в Next.js?»</li>
<li>«Напиши Prisma миграцию для таблицы Tasks»</li>
<li>«Объясни как работает этот код: [вставить код]»</li>
<li>«Найди баг в функции calculateTotal()»</li>
<li>«Напиши тест на Playwright для страницы логина»</li>
</ul>

<h4>Системный промпт</h4>
<p>Модель настроена как <b>помощник разработчика</b>: отвечает на русском, показывает примеры кода, кратко и по существу. Max tokens: 2048.</p>

<div class="tip">💡 Кнопка 🗑 очищает историю чата. Для длинных диалогов используйте Open WebUI (порт 8080) — там полная история.</div>
`},
  ]},

  // ═══ РАЗДЕЛ 5: МОНИТОРИНГ ═══
  {section: "🎛 Мониторинг и сервисы", items: [
    {title:"🎛 Панель мониторинга", body:`
<h4>Карточки сервисов</h4>
<ul>
<li><b style="color:var(--green)">● зелёный</b> — сервис работает</li>
<li><b style="color:var(--red)">● красный</b> — сервис не отвечает</li>
<li>Клик по карточке — открыть URL сервиса в новой вкладке</li>
</ul>

<h4>RAM Bar</h4>
<ul>
<li>Общая память: 64 GB (M4 Max unified memory)</li>
<li>Цвет: фиолетовый градиент, процент загрузки</li>
<li>Swap: объём swap-файла (должен быть 0)</li>
<li>Давление памяти: нет / низкое / среднее / <b style="color:var(--red)">высокое</b></li>
</ul>
<div class="warn">⚠️ При давлении «среднее» или выше — выгрузите неиспользуемые модели. При «высокое» — система начнёт тормозить.</div>

<h4>Автообновление</h4>
<p>Данные панели обновляются при каждом переключении на вкладку. Для принудительного обновления — нажмите 🔄 рядом с моделями.</p>
`},

    {title:"💻 Логи агентов (терминал)", body:`
<h4>Просмотр логов</h4>
<ol>
<li>На вкладке <b>🤖 Агенты</b> — секция «Логи агентов»</li>
<li>В dropdown выберите <b>tmux-сессию</b> (напр. <code>agents</code>)</li>
<li>Нажмите <b>🔄</b> — загрузятся последние 50 строк из окна tmux</li>
<li>Флажок <b>auto</b> — автообновление каждые 5 секунд</li>
</ol>

<h4>Стиль терминала</h4>
<ul>
<li>Зелёный текст на чёрном фоне</li>
<li>Моноширинный шрифт (SF Mono / JetBrains Mono)</li>
<li>Точки macOS (🔴🟡🟢) в заголовке</li>
<li>Min-height: 10 строк, max: 15 строк, auto-scroll</li>
</ul>

<div class="tip">💡 Для полноценной работы с tmux используйте терминал: <code>tmux attach -t agents</code></div>
`},
  ]},

  // ═══ РАЗДЕЛ 6: ПРОЕКТ DST ERP ═══
  {section: "🏗 Ваш проект (настройте)", items: [
    {title:"🏢 Интеграция с веб-проектом", body:`
<h4>Примерная структура Next.js проекта</h4>
<p>Control Center может управлять кодом любого веб-проекта. Добавьте путь к проекту через UI.</p>
<table>
<tr><th>Модуль</th><th>Путь</th><th>Назначение</th></tr>
<tr><td>Авторизация</td><td><code>lib/auth.ts</code></td><td>NextAuth, OIDC, credentials</td></tr>
<tr><td>База данных</td><td><code>prisma/schema.prisma</code></td><td>Модели данных</td></tr>
<tr><td>API</td><td><code>app/api/</code></td><td>REST API-маршруты</td></tr>
<tr><td>Email</td><td><code>lib/email.ts</code></td><td>Отправка уведомлений</td></tr>
</table>
`},

{title:"🔐 SSO и авторизация", body:`
<h4>Поддерживаемые провайдеры</h4>
<ul>
<li><b>OIDC (OpenID Connect)</b> — универсальный стандарт</li>
<li><b>ADFS (Active Directory)</b> — корпоративная авторизация Microsoft</li>
<li><b>Google SSO</b> — вход через Google аккаунт</li>
<li><b>Credentials</b> — email + пароль</li>
</ul>
<p>Настройка SSO выполняется через файлы <code>lib/auth.ts</code> и <code>lib/sso-settings.ts</code> вашего веб-проекта.</p>
`},
  ]},

  // ═══ РАЗДЕЛ 7: НАСТРОЙКА И ОБСЛУЖИВАНИЕ ═══
  {section: "🔧 Настройка и обслуживание", items: [
    {title:"📱 PWA — установка как приложение", body:`
<h4>Установка</h4>
<ol>
<li>Нажмите <b>📲</b> внизу sidebar</li>
<li>Или в Chrome: <b>Меню → Установить приложение</b></li>
<li>На iPhone/iPad: Safari → <b>Поделиться → На экран «Домой»</b></li>
</ol>

<h4>Возможности PWA</h4>
<ul>
<li><b>Standalone-режим</b> — работает как нативное приложение (без адресной строки)</li>
<li><b>Кэширование</b> — статика кэшируется для быстрой загрузки</li>
<li><b>Offline</b> — интерфейс доступен оффлайн (данные при подключении)</li>
<li><b>Поддержка</b>: MacBook, iPad, iPhone, Android</li>
</ul>
`},

    {title:"⌨️ Горячие клавиши", body:`
<h4>Глобальные</h4>
<table>
<tr><th>Комбинация</th><th>Действие</th></tr>
<tr><td><span class="kbd">Ctrl+S</span> / <span class="kbd">⌘+S</span></td><td>Сохранить текущий файл в редакторе</td></tr>
<tr><td><span class="kbd">Ctrl+P</span> / <span class="kbd">⌘+P</span></td><td>Поиск по содержимому файлов в проекте</td></tr>
<tr><td><span class="kbd">Escape</span></td><td>Закрыть модальное окно</td></tr>
<tr><td><span class="kbd">Enter</span></td><td>Отправить сообщение в Quick Chat</td></tr>
</table>

<h4>В редакторе</h4>
<table>
<tr><th>Комбинация</th><th>Действие</th></tr>
<tr><td><span class="kbd">Tab</span></td><td>Вставить 2 пробела (мягкий таб)</td></tr>
<tr><td>Клик в коде</td><td>Обновить позицию курсора в статусбаре</td></tr>
</table>

<h4>Терминал (tmux)</h4>
<table>
<tr><th>Комбинация</th><th>Действие</th></tr>
<tr><td><span class="kbd">Ctrl+B</span> <span class="kbd">D</span></td><td>Отключиться от сессии (не убивает)</td></tr>
<tr><td><span class="kbd">Ctrl+B</span> <span class="kbd">↑↓←→</span></td><td>Переключение между панелями</td></tr>
<tr><td><span class="kbd">Ctrl+B</span> <span class="kbd">Z</span></td><td>Развернуть / свернуть панель</td></tr>
<tr><td><span class="kbd">Ctrl+B</span> <span class="kbd">[</span></td><td>Режим прокрутки (q — выход)</td></tr>
</table>
`},

    {title:"🛠 Устранение проблем", body:`
<h4>Сервис не запускается</h4>
<ul>
<li>Проверьте, не занят ли порт: <code>lsof -i :порт</code></li>
<li>Убить процесс: <code>kill -9 $(lsof -ti:порт)</code></li>
<li>Перезапустить все: <code>~/Projects/automation/start-ai-services.sh</code></li>
</ul>

<h4>LM Studio не отвечает</h4>
<ul>
<li>Откройте приложение LM Studio вручную</li>
<li>Загрузите модель (Qwen3 VL 32B рекомендуется)</li>
<li>Проверьте API: <code>curl http://localhost:1234/v1/models</code></li>
</ul>

<h4>Git ошибки</h4>
<ul>
<li><b>Push rejected</b> — сначала сделайте Pull</li>
<li><b>Merge conflict</b> — откройте конфликтные файлы в редакторе, разрешите, затем Commit</li>
<li><b>Detached HEAD</b> — переключитесь на ветку через Branches</li>
</ul>

<h4>Нехватка памяти</h4>
<ul>
<li>Выгрузите ненужные модели (панель «Модели»)</li>
<li>Закройте Agent TARS если не используете</li>
<li>Следите за Swap — должен быть 0</li>
</ul>

<h4>Перезапуск Control Center</h4>
<div class="cmd"># На MacBook в терминале:
lsof -ti:9090 | xargs kill -9
cd ~/Projects/automation/control-panel
python3 server.py &</div>

<h4>Логи сервера</h4>
<div class="cmd">cat /tmp/cc.log                # Логи Control Center
cat /tmp/open-webui.log        # Логи Open WebUI
cat /tmp/agent-tars.log        # Логи Agent TARS
~/Projects/automation/agent-manager/logs/agents.log  # Логи агентов</div>
`},
  ]},
];

// ═══════════════════════════════════════
// Navigation
// ═══════════════════════════════════════
document.querySelectorAll('.nav-btn[data-tab]').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.nav-btn[data-tab]').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
    document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
    if (btn.dataset.tab === 'projects' && !currentProject) {
      loadProjects();
    }
  });
});

// ═══════════════════════════════════════
// API helper
// ═══════════════════════════════════════
async function api(action, params = {}) {
  const qs = new URLSearchParams({action, ...params}).toString();
  const r = await fetch('/api?' + qs);
  return r.json();
}
async function apiPost(action, body = {}) {
  const r = await fetch('/api?action=' + action, {
    method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(body)
  });
  return r.json();
}

function toast(msg, type = 'info') {
  const d = document.createElement('div');
  d.className = 'toast ' + type;
  d.textContent = msg;
  document.getElementById('toast-container').appendChild(d);
  setTimeout(() => d.remove(), 4000);
}

function closeModal(id) { document.getElementById(id).classList.remove('show'); }
function showModal(id) { document.getElementById(id).classList.add('show'); }

// ═══════════════════════════════════════
// Panel Tab
// ═══════════════════════════════════════
async function loadPanel() {
  const [svc, sys, lm] = await Promise.all([
    api('status'), api('sysinfo'), api('lm_status')
  ]);
  
  // Services
  const grid = document.getElementById('services-grid');
  grid.innerHTML = (svc.services || []).map(s => `
    <div class="svc-card" onclick="window.open('${s.url}','_blank')">
      <div class="top">
        <div class="dot ${s.running ? 'on' : 'off'}"></div>
        <span class="name">${s.name}</span>
        <span class="port">:${s.port}</span>
      </div>
      <div class="url">${s.url}</div>
    </div>
  `).join('');

  // Info bar
  const mem = sys.memory || {};
  const pct = mem.total ? ((mem.used / mem.total) * 100).toFixed(1) : 0;
  const active = (svc.services || []).filter(s => s.running).length;
  document.getElementById('info-bar').innerHTML = `
    <div class="info-chip"><div class="dot"></div> ${active}/${(svc.services||[]).length} сервисов</div>
    <div class="info-chip">💾 Swap: ${mem.swap_used || '0'} GB</div>
    <div class="info-chip">⚡ Давление: ${mem.pressure || '—'}</div>
    <div class="ram-bar"><div class="fill" style="width:${pct}%"></div>
      <div class="label">RAM ${mem.used || '?'}/${mem.total || '?'} GB (${pct}%)</div></div>
  `;
  document.getElementById('topbar-status').textContent = `${active}/${(svc.services||[]).length} ✓`;
  
  refreshModels();
}

async function refreshModels() {
  const data = await api('all_models');
  const models = data.models || [];
  const grid = document.getElementById('models-grid');
  if (models.length === 0) {
    // Show loaded models from /v1/models
    const lm = await api('models');
    const loaded = lm.models || [];
    grid.innerHTML = loaded.map(m => `
      <div class="model-card">
        <div class="icon">🧠</div>
        <div class="info"><div class="mname">${m.id}</div><div class="meta"><span>loaded ✅</span></div></div>
      </div>
    `).join('') || '<div style="color:var(--tx-2);font-size:13px">Нет загруженных моделей</div>';
    return;
  }
  grid.innerHTML = models.map(m => `
    <div class="model-card">
      <div class="icon">${m.vision ? '👁' : '🧠'}</div>
      <div class="info">
        <div class="mname" title="${m.id}">${m.display || m.id}</div>
        <div class="meta">
          <span>${m.size_gb} GB</span>
          ${m.params ? `<span>${m.params}</span>` : ''}
          <span>${m.loaded ? '✅ loaded' : '⚪ available'}</span>
        </div>
      </div>
      <div class="actions">
        ${m.loaded
          ? `<button class="git-btn danger" onclick="unloadModel('${m.id}')">Выгрузить</button>`
          : `<button class="git-btn primary" onclick="loadModel('${m.id}')">Загрузить</button>`
        }
      </div>
    </div>
  `).join('');
}

async function unloadModel(id) {
  toast('Выгрузка модели...', 'info');
  const r = await api('unload_model', {model: id});
  toast(r.ok ? 'Модель выгружена' : 'Ошибка', r.ok ? 'success' : 'error');
  refreshModels();
}
async function loadModel(id) {
  toast('Загрузка модели...', 'info');
  const r = await api('load_model', {model: id});
  toast(r.ok ? 'Модель загружена' : 'Ошибка', r.ok ? 'success' : 'error');
  refreshModels();
}

// ═══════════════════════════════════════
// Projects Tab
// ═══════════════════════════════════════
async function loadProjects() {
  const data = await api('worktrees');
  const list = document.getElementById('project-list');
  const wts = data.worktrees || [];
  list.innerHTML = wts.map(w => `
    <div class="project-item ${currentProject === w.id ? 'active' : ''}" onclick="selectProject('${w.id}')">
      <span class="icon">${w.icon}</span>
      <div class="info">
        <div class="pname">${w.name}</div>
        <div class="branch">⑂ ${w.branch}</div>
      </div>
      ${w.changes > 0 ? `<span class="changes">${w.changes}</span>` : ''}
    </div>
  `).join('');
  
  // Populate agent worktree dropdown
  const sel = document.getElementById('agent-wt');
  sel.innerHTML = wts.map(w => `<option value="${w.path}">${w.icon} ${w.name}</option>`).join('');
}
function refreshProjects() { loadProjects(); }

async function selectProject(id) {
  currentProject = id;
  currentPath = '';
  loadProjects();
  loadGitPanel();
  loadFileTree();
  // Update breadcrumb
  const data = await api('worktrees');
  const wt = (data.worktrees || []).find(w => w.id === id);
  if (wt) document.getElementById('topbar-breadcrumb').textContent = wt.path;
}

async function loadGitPanel() {
  if (!currentProject) return;
  const data = await apiPost('git_status', {wt: currentProject});
  const info = document.getElementById('git-info');
  const actions = document.getElementById('git-actions');
  
  if (data.error) { info.textContent = data.error; actions.innerHTML = ''; return; }
  
  info.innerHTML = `
    <span>⑂ <b>${data.branch}</b></span>
    ${data.ahead > 0 ? `<span class="ahead">↑${data.ahead}</span>` : ''}
    ${data.behind > 0 ? `<span class="behind">↓${data.behind}</span>` : ''}
    <span>${data.files.length} файлов изменено</span>
    ${data.remote ? `<span style="font-family:var(--mono);font-size:11px">${data.remote.split('/').pop()}</span>` : ''}
  `;
  
  actions.innerHTML = `
    <button class="git-btn" onclick="gitPull()">⬇ Pull</button>
    <button class="git-btn" onclick="gitPush()">⬆ Push</button>
    <button class="git-btn primary" onclick="showCommitModal()">📝 Commit</button>
    <button class="git-btn" onclick="showDiff()">📊 Diff</button>
    <button class="git-btn" onclick="gitStash('push')">📦 Stash</button>
    <button class="git-btn" onclick="gitStash('pop')">📤 Pop</button>
    <button class="git-btn" onclick="showBranches()">🔀 Branches</button>
  `;
}

async function gitPull() {
  toast('git pull...', 'info');
  const r = await apiPost('git_pull', {wt: currentProject});
  toast(r.ok ? 'Pull OK' : `Pull failed: ${r.output}`, r.ok ? 'success' : 'error');
  loadGitPanel(); loadProjects();
}
async function gitPush() {
  toast('git push...', 'info');
  const r = await apiPost('git_push', {wt: currentProject});
  toast(r.ok ? 'Push OK' : `Push failed: ${r.output}`, r.ok ? 'success' : 'error');
  loadGitPanel();
}
async function showCommitModal() {
  const data = await apiPost('git_status', {wt: currentProject});
  const files = data.files || [];
  document.getElementById('commit-files').innerHTML = files.map(f =>
    `<label style="display:flex;align-items:center;gap:6px;padding:2px 0"><input type="checkbox" value="${f.file}" checked><span class="git-st ${f.status}">${f.status}</span> ${f.file}</label>`
  ).join('') || '<div style="color:var(--tx-2)">Нет изменённых файлов</div>';
  document.getElementById('commit-msg').value = '';
  showModal('modal-commit');
}
async function doCommit() {
  const msg = document.getElementById('commit-msg').value.trim();
  if (!msg) { toast('Введите сообщение коммита', 'error'); return; }
  const checked = [...document.querySelectorAll('#commit-files input:checked')].map(i => i.value);
  const r = await apiPost('git_commit', {wt: currentProject, message: msg, files: checked.length > 0 ? checked : null});
  closeModal('modal-commit');
  toast(r.ok ? 'Commit OK' : `Commit failed: ${r.output}`, r.ok ? 'success' : 'error');
  loadGitPanel(); loadProjects();
}
async function showDiff(file) {
  const r = await apiPost('git_diff', {wt: currentProject, file: file || null});
  const diff = r.diff || 'Нет изменений';
  document.getElementById('diff-filename').textContent = file || 'все файлы';
  document.getElementById('diff-content').innerHTML = diff.split('\n').map(l => {
    if (l.startsWith('+') && !l.startsWith('+++')) return `<div class="add">${esc(l)}</div>`;
    if (l.startsWith('-') && !l.startsWith('---')) return `<div class="del">${esc(l)}</div>`;
    if (l.startsWith('@@')) return `<div class="hunk">${esc(l)}</div>`;
    return `<div class="ctx">${esc(l)}</div>`;
  }).join('');
  showModal('modal-diff');
}
async function gitStash(action) {
  const r = await apiPost('git_stash', {wt: currentProject, action});
  toast(r.ok ? `Stash ${action} OK` : r.output, r.ok ? 'success' : 'error');
  loadGitPanel(); loadFileTree();
}
async function showBranches() {
  const r = await apiPost('git_branches', {wt: currentProject});
  const branches = r.branches || [];
  const html = branches.map(b => `
    <div style="padding:4px 0;display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer" 
         onclick="switchBranch('${b.name}')" class="${b.current ? 'active' : ''}">
      <span>${b.current ? '●' : '○'}</span>
      <span style="font-family:var(--mono);flex:1">${b.name}</span>
      <span style="font-size:11px;color:var(--tx-2)">${b.hash}</span>
      <span style="font-size:11px;color:var(--tx-2)">${b.time}</span>
    </div>
  `).join('');
  document.getElementById('diff-filename').textContent = 'Ветки';
  document.getElementById('diff-content').innerHTML = `<div style="color:var(--tx-0)">${html}</div>`;
  showModal('modal-diff');
}
async function switchBranch(name) {
  const r = await apiPost('git_checkout', {wt: currentProject, branch: name});
  closeModal('modal-diff');
  toast(r.ok ? `Branch: ${name}` : r.output, r.ok ? 'success' : 'error');
  loadGitPanel(); loadFileTree(); loadProjects();
}
// ═══════════════════════════════════════
// File Tree
// ═══════════════════════════════════════
async function loadFileTree(path) {
  if (!currentProject) return;
  if (path !== undefined) currentPath = path;
  const r = await apiPost('list_files', {wt: currentProject, path: currentPath});
  if (r.error) { toast(r.error, 'error'); return; }
  
  const tree = document.getElementById('file-tree');
  let html = '';
  
  // Parent dir link
  if (currentPath) {
    const parent = currentPath.split('/').slice(0, -1).join('/');
    html += `<div class="tree-item" onclick="loadFileTree('${parent}')"><span class="icon">⬆</span><span class="fname">..</span></div>`;
  }
  
  for (const item of r.items || []) {
    const indent = '';
    if (item.is_dir) {
      html += `<div class="tree-item" onclick="loadFileTree('${item.path}')">
        <span class="icon">📁</span><span class="fname">${item.name}</span>
        ${item.git_status ? `<span class="git-st M">●</span>` : ''}
      </div>`;
    } else {
      const active = activeTab !== null && openTabs[activeTab] && openTabs[activeTab].path === item.path;
      html += `<div class="tree-item ${active ? 'active' : ''}" onclick="openFile('${item.path}')">
        <span class="icon">${fileIcon(item.ext)}</span>
        <span class="fname">${item.name}</span>
        ${item.git_status ? `<span class="git-st ${item.git_status}">${item.git_status}</span>` : ''}
        <span class="fsize">${formatSize(item.size)}</span>
      </div>`;
    }
  }
  tree.innerHTML = html;
}

function fileIcon(ext) {
  const map = {'.py':'🐍','.ts':'🔷','.tsx':'⚛','.js':'🟨','.jsx':'⚛','.json':'📋','.css':'🎨',
    '.html':'🌐','.md':'📝','.yaml':'⚙','.yml':'⚙','.prisma':'💎','.env':'🔒','.sh':'🖥',
    '.sql':'🗃','.xml':'📄','.svg':'🖼','.txt':'📄','.toml':'⚙','.cfg':'⚙','.ini':'⚙',
    '.rs':'🦀','.go':'🐹','.java':'☕','.c':'🔧','.cpp':'🔧','.h':'📎','.rb':'💎'};
  return map[ext] || '📄';
}

function formatSize(bytes) {
  if (!bytes) return '';
  if (bytes < 1024) return bytes + 'B';
  if (bytes < 1024*1024) return (bytes/1024).toFixed(1) + 'K';
  return (bytes/1024/1024).toFixed(1) + 'M';
}

function filterFiles() {
  const q = document.getElementById('file-filter').value.toLowerCase();
  document.querySelectorAll('#file-tree .tree-item').forEach(item => {
    const name = item.querySelector('.fname')?.textContent.toLowerCase() || '';
    item.style.display = !q || name.includes(q) ? '' : 'none';
  });
}

async function refreshFiles() { loadFileTree(); }

// ═══════════════════════════════════════
// Editor
// ═══════════════════════════════════════
async function openFile(relPath) {
  // Check if already open
  const existing = openTabs.findIndex(t => t.path === relPath);
  if (existing !== -1) { activateTab(existing); return; }
  
  const r = await apiPost('read_file', {wt: currentProject, path: relPath});
  if (r.error) { toast(r.error, 'error'); return; }
  
  const name = relPath.split('/').pop();
  openTabs.push({path: relPath, content: r.content, original: r.content, modified: false, name, ext: r.ext, size: r.size});
  activateTab(openTabs.length - 1);
}

function activateTab(idx) {
  if (idx < 0 || idx >= openTabs.length) return;
  activeTab = idx;
  renderTabs();
  renderEditor();
  // Highlight in tree
  document.querySelectorAll('#file-tree .tree-item').forEach(item => {
    const fname = item.querySelector('.fname')?.textContent;
    item.classList.toggle('active', fname === openTabs[idx].name);
  });
}

function renderTabs() {
  const el = document.getElementById('editor-tabs');
  el.innerHTML = openTabs.map((tab, i) => `
    <div class="editor-tab ${i === activeTab ? 'active' : ''}" onclick="activateTab(${i})">
      <span>${fileIcon(tab.ext)} ${tab.name}</span>
      ${tab.modified ? '<span class="modified"></span>' : ''}
      <span class="close" onclick="event.stopPropagation();closeTab(${i})">×</span>
    </div>
  `).join('');
}

function renderEditor() {
  const container = document.getElementById('editor-container');
  const empty = document.getElementById('editor-empty');
  
  if (activeTab === null || !openTabs[activeTab]) {
    container.innerHTML = `<div class="editor-empty" id="editor-empty"><div class="icon">📝</div><div>Выберите файл для редактирования</div><div style="font-size:12px;color:var(--tx-2)">Ctrl+S — сохранить</div></div>`;
    return;
  }
  
  const tab = openTabs[activeTab];
  const lines = tab.content.split('\n');
  const lineNums = lines.map((_, i) => i + 1).join('\n');
  
  container.innerHTML = `
    <div class="line-numbers" id="line-nums">${lineNums}</div>
    <textarea class="code-editor" id="code-editor" spellcheck="false">${esc(tab.content)}</textarea>
  `;
  
  const editor = document.getElementById('code-editor');
  const lineEl = document.getElementById('line-nums');
  
  editor.addEventListener('input', () => {
    tab.content = editor.value;
    tab.modified = tab.content !== tab.original;
    renderTabs();
    updateLineNumbers();
    updateStatusBar();
  });
  
  editor.addEventListener('scroll', () => {
    lineEl.scrollTop = editor.scrollTop;
  });
  
  editor.addEventListener('keydown', (e) => {
    // Tab key
    if (e.key === 'Tab') {
      e.preventDefault();
      const start = editor.selectionStart;
      const end = editor.selectionEnd;
      editor.value = editor.value.substring(0, start) + '  ' + editor.value.substring(end);
      editor.selectionStart = editor.selectionEnd = start + 2;
      tab.content = editor.value;
      tab.modified = tab.content !== tab.original;
      renderTabs();
    }
  });
  
  editor.addEventListener('click', updateStatusBar);
  editor.addEventListener('keyup', updateStatusBar);
  
  updateStatusBar();
  updateLangDisplay();
}

function updateLineNumbers() {
  const editor = document.getElementById('code-editor');
  const lineEl = document.getElementById('line-nums');
  if (!editor || !lineEl) return;
  const lines = editor.value.split('\n');
  lineEl.textContent = lines.map((_, i) => i + 1).join('\n');
}

function updateStatusBar() {
  if (activeTab === null || !openTabs[activeTab]) return;
  const tab = openTabs[activeTab];
  const editor = document.getElementById('code-editor');
  if (!editor) return;
  const pos = editor.selectionStart;
  const text = editor.value.substring(0, pos);
  const line = text.split('\n').length;
  const col = pos - text.lastIndexOf('\n');
  document.getElementById('sb-cursor').textContent = `Ln ${line}, Col ${col}`;
  document.getElementById('sb-lines').textContent = `${editor.value.split('\n').length} строк`;
  document.getElementById('sb-size').textContent = formatSize(new Blob([editor.value]).size);
}

function updateLangDisplay() {
  if (activeTab === null || !openTabs[activeTab]) return;
  const ext = openTabs[activeTab].ext;
  const langs = {'.py':'Python','.ts':'TypeScript','.tsx':'TSX/React','.js':'JavaScript','.jsx':'JSX/React',
    '.json':'JSON','.css':'CSS','.html':'HTML','.md':'Markdown','.yaml':'YAML','.yml':'YAML',
    '.prisma':'Prisma','.env':'Env','.sh':'Shell','.sql':'SQL'};
  document.getElementById('sb-lang').textContent = langs[ext] || ext || '—';
}

function closeTab(idx) {
  if (openTabs[idx].modified) {
    if (!confirm(`Файл ${openTabs[idx].name} изменён. Закрыть без сохранения?`)) return;
  }
  openTabs.splice(idx, 1);
  if (activeTab >= openTabs.length) activeTab = openTabs.length - 1;
  if (openTabs.length === 0) activeTab = null;
  renderTabs();
  renderEditor();
}

async function saveCurrentFile() {
  if (activeTab === null || !openTabs[activeTab]) return;
  const tab = openTabs[activeTab];
  const r = await apiPost('save_file', {wt: currentProject, path: tab.path, content: tab.content});
  if (r.ok) {
    tab.original = tab.content;
    tab.modified = false;
    renderTabs();
    toast(`Сохранено: ${tab.name}`, 'success');
  } else {
    toast(`Ошибка: ${r.error}`, 'error');
  }
}

// ═══════════════════════════════════════
// Search
// ═══════════════════════════════════════
async function searchInProject(query) {
  if (!currentProject || !query) return;
  const r = await apiPost('search_files', {wt: currentProject, query});
  if (r.error) { toast(r.error, 'error'); return; }
  const results = r.results || [];
  // Show in file tree area
  const tree = document.getElementById('file-tree');
  tree.innerHTML = `<div style="padding:8px;font-size:12px;color:var(--tx-2)">${r.total} файлов найдено</div>` +
    results.map(res => `
      <div style="padding:4px 8px">
        <div class="tree-item" onclick="openFile('${res.file}')" style="color:var(--accent);font-weight:600">📄 ${res.file}</div>
        ${res.matches.map(m => `
          <div style="padding:2px 24px;font-size:11px;font-family:var(--mono);color:var(--tx-1);cursor:pointer" onclick="openFileAtLine('${res.file}',${m.line})">
            <span style="color:var(--yellow)">${m.line}:</span> ${esc(m.text)}
          </div>
        `).join('')}
      </div>
    `).join('');
}

async function openFileAtLine(path, line) {
  await openFile(path);
  // Try to scroll to line
  setTimeout(() => {
    const editor = document.getElementById('code-editor');
    if (!editor) return;
    const lines = editor.value.split('\n');
    let pos = 0;
    for (let i = 0; i < Math.min(line - 1, lines.length); i++) pos += lines[i].length + 1;
    editor.selectionStart = editor.selectionEnd = pos;
    editor.focus();
    // Scroll
    const lineHeight = 20.8; // ~13px * 1.6
    editor.scrollTop = Math.max(0, (line - 5) * lineHeight);
  }, 100);
}

// ═══════════════════════════════════════
// Project management
// ═══════════════════════════════════════
function addProjectModal() { showModal('modal-add-project'); }

async function doAddProject() {
  const key = document.getElementById('proj-key').value.trim();
  const path = document.getElementById('proj-path').value.trim();
  const label = document.getElementById('proj-label').value.trim();
  const icon = document.getElementById('proj-icon').value.trim() || '📁';
  if (!key || !path || !label) { toast('Заполните все поля', 'error'); return; }
  const r = await apiPost('add_project', {key, path, label, icon});
  closeModal('modal-add-project');
  if (r.ok) { toast('Проект добавлен', 'success'); loadProjects(); }
  else toast(r.error, 'error');
}

// ═══════════════════════════════════════
// Agents Tab
// ═══════════════════════════════════════
async function startAgent() {
  const wt = document.getElementById('agent-wt').value;
  const agent = document.getElementById('agent-type').value;
  const task = document.getElementById('agent-task').value;
  toast(`Запуск ${agent}...`, 'info');
  const r = await apiPost('start_agent', {worktree: wt, agent, task});
  toast(r.ok ? `Агент ${agent} запущен` : r.error, r.ok ? 'success' : 'error');
}

// ═══════════════════════════════════════
// Chat
// ═══════════════════════════════════════
function renderChat() {
  const el = document.getElementById('chat-messages');
  el.innerHTML = chatHistory.map(m => `
    <div class="msg ${m.role}">
      <div class="avatar">${m.role === 'user' ? '🧑' : '🤖'}</div>
      <div>
        <div class="bubble">${formatMessage(m.content)}</div>
        <div class="time">${m.time}</div>
      </div>
    </div>
  `).join('');
  el.scrollTop = el.scrollHeight;
}

function formatMessage(text) {
  // Simple markdown: code blocks, inline code, bold
  text = esc(text);
  text = text.replace(/```(\w*)\n([\s\S]*?)```/g, '<pre><code>$2</code></pre>');
  text = text.replace(/`([^`]+)`/g, '<code>$1</code>');
  text = text.replace(/\*\*([^*]+)\*\*/g, '<b>$1</b>');
  return text;
}

let chatAttachments = []; // [{name, type, data}]

function chatKeyHandler(e) {
  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendChat(); }
}
function autoGrowTextarea(el) {
  el.style.height = 'auto';
  const maxH = parseFloat(getComputedStyle(el).lineHeight) * 10;
  el.style.height = Math.min(el.scrollHeight, maxH) + 'px';
}

function handleFileAttach(e) {
  const files = Array.from(e.target.files || []);
  files.forEach(file => {
    const reader = new FileReader();
    const isImage = file.type.startsWith('image/');
    reader.onload = () => {
      chatAttachments.push({name: file.name, type: file.type, size: file.size, data: reader.result, isImage});
      renderAttachments();
    };
    if (isImage) reader.readAsDataURL(file);
    else reader.readAsDataURL(file); // base64 for all
  });
  e.target.value = '';
}

function renderAttachments() {
  const el = document.getElementById('chat-attachments');
  if (!chatAttachments.length) { el.style.display = 'none'; return; }
  el.style.display = 'flex';
  el.innerHTML = chatAttachments.map((a, i) => {
    const icon = a.isImage ? '🖼' : a.name.endsWith('.pdf') ? '📕' : a.name.match(/\.docx?$/) ? '📘' : a.name.match(/\.xlsx?$/) ? '📗' : '📄';
    const preview = a.isImage ? `<img src="${a.data}" style="width:40px;height:40px;object-fit:cover;border-radius:4px">` : `<span style="font-size:20px">${icon}</span>`;
    return `<div style="display:flex;align-items:center;gap:4px;background:var(--bg-2);padding:4px 8px;border-radius:6px;font-size:12px">
      ${preview}<span style="max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${a.name}</span>
      <span style="cursor:pointer;opacity:0.5" onclick="chatAttachments.splice(${i},1);renderAttachments()">✕</span>
    </div>`;
  }).join('');
}

async function sendChat() {
  const input = document.getElementById('chat-input');
  const msg = input.value.trim();
  if (!msg && !chatAttachments.length) return;
  
  // Build message with attachments
  let fullMsg = msg;
  const attachData = [];
  if (chatAttachments.length) {
    chatAttachments.forEach(a => {
      attachData.push({name: a.name, type: a.type, size: a.size, data: a.data, isImage: a.isImage});
    });
  }
  
  input.value = '';
  input.style.height = 'auto';
  const attachNames = chatAttachments.map(a => a.name);
  chatAttachments = [];
  renderAttachments();
  
  const now = new Date().toLocaleTimeString('ru', {hour:'2-digit', minute:'2-digit'});
  const userContent = attachNames.length ? msg + '\n📎 ' + attachNames.join(', ') : msg;
  chatHistory.push({role: 'user', content: userContent, time: now});
  renderChat();
  
  // Show typing indicator
  chatHistory.push({role: 'ai', content: '⏳ Думаю...', time: '', typing: true});
  renderChat();
  
  const payload = {message: fullMsg, project: currentProject || null};
  if (attachData.length) payload.attachments = attachData;
  
  const r = await apiPost('chat', payload);
  // Remove typing indicator
  chatHistory = chatHistory.filter(m => !m.typing);
  const reply = r.reply || r.error || 'Нет ответа';
  chatHistory.push({role: 'ai', content: reply, time: new Date().toLocaleTimeString('ru', {hour:'2-digit', minute:'2-digit'})});
  renderChat();
}
function clearChat() { chatHistory = []; chatAttachments = []; renderAttachments(); renderChat(); }

// ═══════════════════════════════════════
// Logs
// ═══════════════════════════════════════
async function loadSessions() {
  const data = await api('agents');
  const sel = document.getElementById('log-session');
  const sessions = data.sessions || [];
  sel.innerHTML = '<option value="">tmux-сессия...</option>' +
    sessions.map(s => `<option value="${s}">${s}</option>`).join('');
}

async function refreshLogs() {
  const session = document.getElementById('log-session').value;
  if (!session) { document.getElementById('log-output').textContent = 'Выберите tmux-сессию и нажмите 🔄'; return; }
  const data = await api('logs', {session});
  document.getElementById('log-output').textContent = data.output || 'Пусто';
  const el = document.getElementById('log-output');
  el.scrollTop = el.scrollHeight;
}

// ═══════════════════════════════════════
// Help
// ═══════════════════════════════════════
function renderHelp() {
  let html = '';
  let idx = 0;
  for (const group of SCENARIOS) {
    html += `<div class="help-section-title">${group.section}</div>`;
    for (const s of group.items) {
      html += `
        <div class="scenario">
          <div class="sc-header" onclick="toggleScenario(${idx})">
            <span class="arrow" id="arrow-${idx}">▶</span>
            <span>${s.title}</span>
          </div>
          <div class="sc-body" id="sc-body-${idx}">${s.body}</div>
        </div>`;
      idx++;
    }
  }
  document.getElementById('help-content').innerHTML = html;
}
function toggleScenario(i) {
  const body = document.getElementById('sc-body-' + i);
  const arrow = document.getElementById('arrow-' + i);
  const open = body.classList.toggle('open');
  arrow.classList.toggle('open', open);
}

// ═══════════════════════════════════════
// Keyboard shortcuts
// ═══════════════════════════════════════
document.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault();
    saveCurrentFile();
  }
  if ((e.ctrlKey || e.metaKey) && e.key === 'p') {
    e.preventDefault();
    const q = prompt('Поиск в проекте:');
    if (q) searchInProject(q);
  }
  if (e.key === 'Escape') {
    document.querySelectorAll('.modal-overlay.show').forEach(m => m.classList.remove('show'));
  }
});

// ═══════════════════════════════════════
// Utilities
// ═══════════════════════════════════════
function esc(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }

// ═══════════════════════════════════════
// PWA Install
// ═══════════════════════════════════════
let deferredPrompt;
window.addEventListener('beforeinstallprompt', e => { e.preventDefault(); deferredPrompt = e; document.getElementById('pwa-install').style.display = 'flex'; });
document.getElementById('pwa-install').addEventListener('click', () => { if(deferredPrompt){deferredPrompt.prompt();} });

// ═══════════════════════════════════════
// Chat model display
// ═══════════════════════════════════════
async function updateChatModel() {
  const models = await api('models');
  const m = (models.models || [])[0];
  document.getElementById('chat-model').textContent = m ? m.id : 'нет модели';
}

// ═══════════════════════════════════════
// Auto-refresh logs
// ═══════════════════════════════════════
setInterval(() => {
  if (document.getElementById('log-auto')?.checked && document.getElementById('log-session')?.value) {
    refreshLogs();
  }
}, 5000);

// ═══════════════════════════════════════
// Init
// ═══════════════════════════════════════
loadPanel();
loadProjects();
loadSessions();
renderHelp();
updateChatModel();

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'); }
</script>
</body>
</html>
"""


# ═══════════════════════════════════════════════════════
#  HTTP Handler
# ═══════════════════════════════════════════════════════
class Handler(BaseHTTPRequestHandler):
    def log_message(self, fmt, *args):
        pass  # silent

    def _send(self, code, ctype, body):
        if isinstance(body, str):
            body = body.encode()
        self.send_response(code)
        self.send_header('Content-Type', ctype)
        self.send_header('Content-Length', len(body))
        self.send_header('Access-Control-Allow-Origin', '*')
        self.end_headers()
        self.wfile.write(body)

    def _json(self, obj, code=200):
        self._send(code, 'application/json', json.dumps(obj, ensure_ascii=False))

    def do_GET(self):
        path = self.path.split('?')[0]

        # PWA assets
        if path == '/manifest.json':
            return self._send(200, 'application/manifest+json', MANIFEST_JSON)
        if path == '/sw.js':
            return self._send(200, 'application/javascript', SW_JS)
        if path in ('/icon-192.svg', '/icon-512.svg'):
            return self._send(200, 'image/svg+xml', ICON_SVG)

        # API
        if path == '/api':
            return self.handle_api()

        # Main page
        self._send(200, 'text/html', HTML_PAGE)

    def do_POST(self):
        if self.path.startswith('/api'):
            return self.handle_api_post()
        self._send(404, 'text/plain', 'Not Found')

    def handle_api(self):
        qs = parse_qs(urlparse(self.path).query)
        action = qs.get('action', [''])[0]

        if action == 'status':
            return self._json({"services": get_services_status()})
        if action == 'models':
            return self._json({"models": get_lm_models()})
        if action == 'all_models':
            return self._json({"models": get_all_models()})
        if action == 'sysinfo':
            return self._json({"memory": get_system_info()})
        if action == 'lm_status':
            return self._json({"status": get_lm_status()})
        if action == 'worktrees':
            return self._json({"worktrees": get_worktrees()})
        if action == 'agents':
            return self._json({"sessions": get_tmux_sessions()})
        if action == 'logs':
            session = qs.get('session', [''])[0]
            return self._json({"output": get_tmux_logs(session)})
        if action == 'unload_model':
            model = qs.get('model', [''])[0]
            return self._json({"ok": unload_model(model)})
        if action == 'load_model':
            model = qs.get('model', [''])[0]
            return self._json({"ok": load_model(model)})

        self._json({"error": "Unknown action"}, 400)

    def handle_api_post(self):
        qs = parse_qs(urlparse(self.path).query)
        action = qs.get('action', [''])[0]

        length = int(self.headers.get('Content-Length', 0))
        body = json.loads(self.rfile.read(length)) if length > 0 else {}

        # Git operations
        if action == 'git_status':
            return self._json(git_status_detailed(body.get('wt', '')))
        if action == 'git_pull':
            return self._json(git_pull(body.get('wt', '')))
        if action == 'git_push':
            return self._json(git_push(body.get('wt', '')))
        if action == 'git_commit':
            return self._json(git_commit(body.get('wt', ''), body.get('message', ''), body.get('files')))
        if action == 'git_diff':
            return self._json(git_diff(body.get('wt', ''), body.get('file')))
        if action == 'git_checkout':
            return self._json(git_checkout(body.get('wt', ''), body.get('branch', '')))
        if action == 'git_branches':
            return self._json(git_branches(body.get('wt', '')))
        if action == 'git_stash':
            return self._json(git_stash(body.get('wt', ''), body.get('action', 'push'), body.get('message', '')))

        # File operations
        if action == 'list_files':
            wt_path = _resolve_wt_path(body.get('wt', ''))
            if not wt_path:
                return self._json({"error": "Project not found"})
            return self._json(list_files(wt_path, body.get('path', '')))
        if action == 'read_file':
            wt_path = _resolve_wt_path(body.get('wt', ''))
            if not wt_path:
                return self._json({"error": "Project not found"})
            return self._json(read_file(wt_path, body.get('path', '')))
        if action == 'save_file':
            wt_path = _resolve_wt_path(body.get('wt', ''))
            if not wt_path:
                return self._json({"error": "Project not found"})
            return self._json(write_file(wt_path, body.get('path', ''), body.get('content', '')))
        if action == 'create_item':
            wt_path = _resolve_wt_path(body.get('wt', ''))
            if not wt_path:
                return self._json({"error": "Project not found"})
            return self._json(create_item(wt_path, body.get('path', ''), body.get('is_dir', False)))
        if action == 'delete_item':
            wt_path = _resolve_wt_path(body.get('wt', ''))
            if not wt_path:
                return self._json({"error": "Project not found"})
            return self._json(delete_item(wt_path, body.get('path', '')))
        if action == 'search_files':
            wt_path = _resolve_wt_path(body.get('wt', ''))
            if not wt_path:
                return self._json({"error": "Project not found"})
            return self._json(search_files(wt_path, body.get('query', '')))

        # Project management
        if action == 'add_project':
            return self._json(add_project(body.get('key',''), body.get('path',''), body.get('label',''), body.get('icon','📁')))
        if action == 'remove_project':
            return self._json(remove_project(body.get('key', '')))

        # Agent & Chat
        if action == 'start_agent':
            wt_path = body.get('worktree', '')
            agent = body.get('agent', 'aider')
            task = body.get('task', '')
            wt_name = None
            for name, wt in WORKTREES.items():
                if wt["path"] == wt_path:
                    wt_name = name
                    break
            if not wt_name:
                return self._json({"ok": False, "error": f"Worktree not found: {wt_path}"})
            return self._json(start_agent(agent, wt_name))
        if action == 'chat':
            reply = quick_chat(body.get('message', ''), model=body.get('model'), project=body.get('project'), attachments=body.get('attachments'))
            if isinstance(reply, str):
                return self._json({"reply": reply})
            return self._json(reply)

        self._json({"error": "Unknown action"}, 400)


# ═══════════════════════════════════════════════════════
#  Main
# ═══════════════════════════════════════════════════════
def main():
    port = int(os.environ.get('PORT', PORT))
    server = HTTPServer(('0.0.0.0', port), Handler)
    print(f"🧠 INFATON Control Center v4.0 → http://0.0.0.0:{port}")
    try:
        server.serve_forever()
    except KeyboardInterrupt:
        print("\n🛑 Shutdown")
        server.server_close()

if __name__ == '__main__':
    main()