architect/_archive/2025-11-cleanup/platform-v2-cifra/archive/2025-11-10-redundant/FULL_PLATFORM_ARCHITECTURE.md

Полная архитектура платформы ЦИФРА

Версия: 1.0.0
Дата: 2025-11-10
Статус: Архитектурный дизайн


🎯 ВИДЕНИЕ

Платформа ЦИФРА = Операционная система для разработки

┌────────────────────────────────────────────────────┐
                   FRONTEND                         
  (Веб-интерфейс в браузере)                       
                                                    
  ┌──────────────┬──────────────┬──────────────┐   
    💬 ЧАТ        📄 ДОКУМЕНТЫ   📊 ДАШБОРД     
                                               
   Диалог с      Просмотр и    Состояние       
   платформой    редактирование│ системы         
                 PROJECT.md    Метрики         
   "Создай       ROADMAP.md    Агенты          
    проект X"    Markdown      Проекты         
  └──────────────┴──────────────┴──────────────┘   
└────────────────────────────────────────────────────┘
                       HTTP/WebSocket
┌────────────────────────────────────────────────────┐
                   BACKEND                          
  (API + Агенты на сервере)                        
                                                    
  ┌──────────────────────────────────────────┐     
    FastAPI / Flask                              
    - /api/chat (чат)                            
    - /api/projects (проекты)                    
    - /api/documents (документы)                 
    - /api/agents (агенты)                       
  └──────────────────────────────────────────┘     
                                                   
  ┌──────────────────────────────────────────┐     
    AgentAPI + Агенты                            
    - CentralAgent                               
    - DocumentAgent, CodeAgent, etc.             
  └──────────────────────────────────────────┘     
                                                   
  ┌──────────────────────────────────────────┐     
    Git + File System                            
    /opt/claude-workspace/                       
  └──────────────────────────────────────────┘     
└────────────────────────────────────────────────────┘

🏗️ АРХИТЕКТУРА

3 УРОВНЯ:

1. FRONTEND (Browser)
   
2. BACKEND (API Server)
   
3. CORE (Agents + Git)

💻 FRONTEND (Веб-интерфейс)

Компоненты:

1. ЧАТ (главный интерфейс)

┌─────────────────────────────────────────┐
│  Платформа ЦИФРА                        │
├─────────────────────────────────────────┤
│                                         │
│  🤖 Система:                            │
│  Привет! Что будем делать?              │
│                                         │
│  👤 Вы:                                 │
│  Создай проект analytics используя      │
│  шаблон streamlit-mvp-v1                │
│                                         │
│  🤖 Система:                            │
│  ⏳ Создаю проект...                    │
│  ├─ ProjectAgent: структура ✅          │
│  ├─ DocumentAgent: PROJECT.md ✅        │
│  ├─ CodeAgent: код скопирован ✅        │
│  └─ GitAgent: commit a1b2c3d ✅         │
│                                         │
│  ✅ Проект analytics создан!            │
│  [Открыть проект] [Запустить]           │
│                                         │
├─────────────────────────────────────────┤
│  💬 Введите команду...         [Отправить]│
└─────────────────────────────────────────┘

Функции:
- Диалог с платформой (как ChatGPT)
- Голосовой ввод (🎤 кнопка)
- История сессий
- Suggestions (подсказки команд)


2. ДОКУМЕНТЫ (редактор + навигация)

┌─────────────────────────────────────────┐
│  Проекты > marketplace > PROJECT.md     │
├─────────────────────────────────────────┤
│                                         │
│  📁 Проекты                             │
│    ├─ 📂 marketplace                    │
│    │   ├─ 📄 PROJECT.md          ← OPEN │
│    │   ├─ 📁 design/                    │
│    │   │   ├─ ROADMAP.md                │
│    │   │   └─ ARCHITECTURE.md           │
│    │   └─ 📁 management/                │
│    │       ├─ README.md                 │
│    │       └─ CHANGELOG.md              │
│    └─ 📂 analytics                      │
│                                         │
├─────────────────────────────────────────┤
│  РЕДАКТОР                    | PREVIEW  │
│                              |          │
│  ---                         | v1.0.0   │
│  version: 1.0.0              | active   │
│  status: active              |          │
│  ---                         |          │
│                              |          │
│  # Marketplace               | Marketplace│
│                              |          │
│  Описание...                 | Описание...│
│                              |          │
│  [Сохранить] [Отменить]      |          │
└─────────────────────────────────────────┘

Функции:
- Навигация по проектам (дерево файлов)
- Markdown редактор (WYSIWYG или split view)
- Live preview (предпросмотр)
- Git операции (commit, history)
- Поиск по документам


3. ДАШБОРД (обзор системы)

┌─────────────────────────────────────────┐
│  Платформа ЦИФРА — Дашборд              │
├─────────────────────────────────────────┤
│                                         │
│  📊 ПРОЕКТЫ                             │
│  ┌─────────────┬─────────────┐          │
│  │ marketplace │ analytics   │          │
│  │ v1.1.0      │ v0.1.0      │          │
│  │ ✅ Active   │ 🔄 Dev      │          │
│  └─────────────┴─────────────┘          │
│                                         │
│  🤖 АГЕНТЫ                              │
│  ┌────────────────────────────┐         │
│  │ DocumentAgent     ✅ Ready │         │
│  │ CodeAgent         ✅ Ready │         │
│  │ GitAgent          ✅ Ready │         │
│  │ ProjectAgent      🔄 Busy  │         │
│  └────────────────────────────┘         │
│                                         │
│  📈 МЕТРИКИ (7 дней)                    │
│  ┌────────────────────────────┐         │
│  │ Токенов: 150K (↓80% экономия)│       │
│  │ Коммитов: 25              │         │
│  │ Проектов создано: 3       │         │
│  └────────────────────────────┘         │
│                                         │
│  📝 ПОСЛЕДНИЕ СОБЫТИЯ                   │
│  • 14:30 - Создан проект analytics      │
│  • 13:15 - DocumentAgent: PROJECT.md ✅ │
│  • 12:00 - Git commit a1b2c3d          │
│                                         │
│  [Обновить]                             │
└─────────────────────────────────────────┘

Функции:
- Список проектов (карточки)
- Состояние агентов (работают/готовы)
- Метрики (токены, коммиты, производительность)
- Лента событий (что происходит)
- Графики (опционально)


Технологический стек FRONTEND:

ВАРИАНТ A: Streamlit (быстро, просто)

Технологии:
  - Streamlit (Python framework для дата-приложений)
  - Markdown рендеринг
  - st.chat_message для чата

Плюсы:
  ✅ Очень быстрая разработка (2-3 дня)
  ✅ Python (тот же язык что backend)
  ✅ Встроенные компоненты (charts, tables)

Минусы:
  ⚠️ Ограничения UI (не полностью кастомизируемый)
  ⚠️ Перезагрузка при каждом действии

Подходит: MVP (Фаза 0-1)

Пример Streamlit UI:

# frontend/app.py
import streamlit as st

st.title("🤖 Платформа ЦИФРА")

# Табы
tab1, tab2, tab3 = st.tabs(["💬 Чат", "📄 Документы", "📊 Дашборд"])

with tab1:
    # ЧАТ
    for message in st.session_state.messages:
        with st.chat_message(message["role"]):
            st.markdown(message["content"])

    if prompt := st.chat_input("Введите команду..."):
        # Отправить в backend
        response = requests.post("http://localhost:8000/api/chat",
                                json={"message": prompt})
        st.session_state.messages.append({"role": "user", "content": prompt})
        st.session_state.messages.append({"role": "assistant", "content": response.json()})

with tab2:
    # ДОКУМЕНТЫ
    col1, col2 = st.columns([1, 3])
    with col1:
        # Дерево файлов
        project = st.selectbox("Проект", ["marketplace", "analytics"])
        file = st.selectbox("Файл", ["PROJECT.md", "ROADMAP.md"])
    with col2:
        # Редактор
        content = st.text_area("Содержимое", height=500)
        if st.button("Сохранить"):
            # Сохранить через API

with tab3:
    # ДАШБОРД
    st.header("Проекты")
    col1, col2, col3 = st.columns(3)
    with col1:
        st.metric("Проектов", "3", "+1")
    with col2:
        st.metric("Агентов", "6", "0")
    with col3:
        st.metric("Токенов", "150K", "-80%")

ВАРИАНТ B: React/Vue (продвинутый, гибкий)

Технологии:
  Frontend:
    - React / Vue.js (UI framework)
    - TipTap / Editor.js (Markdown редактор)
    - Socket.IO (real-time чат)
    - Tailwind CSS (стили)

  Backend API:
    - FastAPI (Python)
    - WebSocket support

Плюсы:
  ✅ Полный контроль UI
  ✅ Real-time обновления (WebSocket)
  ✅ Лучший UX (без перезагрузок)
  ✅ Современный стек

Минусы:
  ⚠️ Дольше разработка (1-2 недели)
  ⚠️ Нужно знать JS/React
  ⚠️ Сложнее деплой

Подходит: Production (Фаза 2+)

Структура React приложения:

frontend/
├── src/
   ├── components/
      ├── Chat/
         ├── ChatWindow.jsx
         ├── MessageList.jsx
         └── ChatInput.jsx
      ├── Documents/
         ├── FileTree.jsx
         ├── MarkdownEditor.jsx
         └── Preview.jsx
      └── Dashboard/
          ├── ProjectCard.jsx
          ├── AgentStatus.jsx
          └── MetricsChart.jsx
   ├── pages/
      ├── ChatPage.jsx
      ├── DocumentsPage.jsx
      └── DashboardPage.jsx
   ├── api/
      └── client.js  # Axios для API вызовов
   └── App.jsx
├── package.json
└── vite.config.js

ВАРИАНТ C: Gradio (очень быстро, AI-ориентированный)

Технологии:
  - Gradio (Python framework для ML/AI интерфейсов)
  - Встроенный чат компонент

Плюсы:
  ✅ Самая быстрая разработка (1 день!)
  ✅ Встроенный чат (gr.ChatInterface)
  ✅ Идеально для AI/LLM приложений

Минусы:
  ⚠️ Ограниченная кастомизация
  ⚠️ Меньше контроля над UI

Подходит: Прототип (Фаза 0)

Пример Gradio:

import gradio as gr

def chat(message, history):
    # Отправить в CentralAgent
    response = central_agent.execute({"type": "chat", "message": message})
    return response

with gr.Blocks() as demo:
    gr.Markdown("# 🤖 Платформа ЦИФРА")

    with gr.Tab("💬 Чат"):
        gr.ChatInterface(chat)

    with gr.Tab("📄 Документы"):
        with gr.Row():
            project = gr.Dropdown(["marketplace", "analytics"])
            file = gr.Dropdown(["PROJECT.md", "ROADMAP.md"])
        editor = gr.Textbox(lines=20)
        save_btn = gr.Button("Сохранить")

    with gr.Tab("📊 Дашборд"):
        gr.Markdown("### Проекты")
        # ...

demo.launch(server_name="0.0.0.0", server_port=7860)

🔌 BACKEND (API Server)

API Endpoints:

# backend/api.py

from fastapi import FastAPI, WebSocket
from pydantic import BaseModel

app = FastAPI()

# ============ CHAT API ============

class ChatRequest(BaseModel):
    message: str
    session_id: str

@app.post("/api/chat")
async def chat(request: ChatRequest):
    """
    Чат с платформой

    Примеры:
    - "Создай проект analytics"
    - "Покажи состояние marketplace"
    - "Запусти тесты"
    """
    from platform.agents.central_agent import CentralAgent

    central = CentralAgent(workspace="/opt/claude-workspace")
    response = central.process_chat_message(request.message)

    return {
        "response": response['text'],
        "actions": response['actions'],  # Что было сделано
        "status": response['status']
    }

# WebSocket для real-time
@app.websocket("/ws/chat/{session_id}")
async def chat_websocket(websocket: WebSocket, session_id: str):
    await websocket.accept()
    while True:
        data = await websocket.receive_text()
        # Обработать сообщение
        response = central.process_chat_message(data)
        await websocket.send_json(response)

# ============ PROJECTS API ============

@app.get("/api/projects")
async def list_projects():
    """Список всех проектов"""
    import os
    projects_dir = "/opt/claude-workspace/projects"
    projects = []

    for name in os.listdir(projects_dir):
        # Читаем PROJECT.md
        project_md = f"{projects_dir}/{name}/PROJECT.md"
        metadata = parse_frontmatter(project_md)
        projects.append({
            "name": name,
            "version": metadata.get("version"),
            "status": metadata.get("status"),
            "created_at": metadata.get("created_at")
        })

    return {"projects": projects}

@app.get("/api/projects/{project_name}")
async def get_project(project_name: str):
    """Детали проекта"""
    # Возвращаем метаданные + структуру файлов
    pass

@app.post("/api/projects")
async def create_project(name: str, template: str):
    """Создать новый проект"""
    from platform.api.agent_api import AgentAPI

    api = AgentAPI("/opt/claude-workspace")
    result = api.call_agent("ProjectAgent", {
        "type": "create_project",
        "name": name,
        "template": template
    })

    return result

# ============ DOCUMENTS API ============

@app.get("/api/documents/{project_name}/{path:path}")
async def get_document(project_name: str, path: str):
    """Получить содержимое документа"""
    file_path = f"/opt/claude-workspace/projects/{project_name}/{path}"

    with open(file_path) as f:
        content = f.read()

    # Если Markdown с frontmatter
    if path.endswith('.md'):
        import frontmatter
        post = frontmatter.loads(content)
        return {
            "metadata": post.metadata,
            "content": post.content,
            "path": path
        }

    return {"content": content, "path": path}

@app.put("/api/documents/{project_name}/{path:path}")
async def update_document(project_name: str, path: str, content: str):
    """Обновить документ"""
    file_path = f"/opt/claude-workspace/projects/{project_name}/{path}"

    with open(file_path, 'w') as f:
        f.write(content)

    # Git commit
    from platform.api.agent_api import AgentAPI
    api = AgentAPI("/opt/claude-workspace")
    api.call_agent("GitAgent", {
        "type": "commit",
        "message": f"docs: обновлён {path}",
        "files": [file_path]
    })

    return {"status": "success"}

# ============ AGENTS API ============

@app.get("/api/agents")
async def list_agents():
    """Список агентов и их статус"""
    from platform.api.agent_api import AgentAPI

    api = AgentAPI("/opt/claude-workspace")
    agents = api.get_agents()

    return {
        "agents": [
            {
                "name": name,
                "status": "ready",  # or "busy"
                "tasks_completed": get_agent_stats(name)
            }
            for name in agents
        ]
    }

@app.post("/api/agents/{agent_name}/execute")
async def execute_agent(agent_name: str, task: dict):
    """Выполнить задачу агентом"""
    from platform.api.agent_api import AgentAPI

    api = AgentAPI("/opt/claude-workspace")
    result = api.call_agent(agent_name, task)

    return result

# ============ METRICS API ============

@app.get("/api/metrics")
async def get_metrics():
    """Метрики платформы"""
    # Читаем из platform/.claude/metrics/
    return {
        "tokens_used": 150000,
        "tokens_saved": 600000,
        "projects_count": 3,
        "commits_count": 25,
        "agents_active": 6
    }

# ============ GIT API ============

@app.get("/api/git/log")
async def git_log(limit: int = 10):
    """Git история"""
    import subprocess

    result = subprocess.run(
        ['git', 'log', f'--oneline', f'-{limit}'],
        cwd="/opt/claude-workspace",
        capture_output=True,
        text=True
    )

    commits = []
    for line in result.stdout.split('\n'):
        if line:
            hash, message = line.split(' ', 1)
            commits.append({"hash": hash, "message": message})

    return {"commits": commits}

@app.get("/api/git/status")
async def git_status():
    """Git статус"""
    # git status --porcelain
    pass

🖥️ СЕРВЕРНАЯ АРХИТЕКТУРА

Где что запускается:

СЕРВЕР 1: 91.218.142.168 (Control Plane)
├─ /opt/claude-workspace/          # Git репозиторий

├─ BACKEND (FastAPI)                # Порт 8000
  └─ uvicorn backend/api:app --port 8000

├─ FRONTEND (Streamlit/React)      # Порт 3000
  ├─ Streamlit: streamlit run frontend/app.py --server.port 3000
  └─ React: npm run dev (Vite на порту 3000)

├─ АГЕНТЫ (Python процессы)
  └─ Работают внутри FastAPI (по запросу)

└─ GIT                             # Файловая система
   └─ /opt/claude-workspace/.git

Доступ:

Frontend:  http://91.218.142.168:3000  (браузер)
Backend:   http://91.218.142.168:8000  (API)
Workspace: /opt/claude-workspace        (файлы)

VS Code — куда ставить:

ОТВЕТ: На ВАШЕ устройство (компьютер/ноутбук), НЕ на сервер!

ВАШ КОМПЬЮТЕР
├─ VS Code (установлен локально)
│  └─ Расширение Remote-SSH
│     └─ Подключается к серверу через SSH
│        └─ Редактирует файлы НАПРЯМУЮ на сервере
│
↓ SSH
│
СЕРВЕР 91.218.142.168
└─ /opt/claude-workspace/  ← VS Code работает с этими файлами

Как это работает:
1. Вы устанавливаете VS Code на свой компьютер (Windows/Mac/Linux)
2. Устанавливаете расширение Remote-SSH
3. Подключаетесь к серверу: root@91.218.142.168
4. VS Code НАПРЯМУЮ работает с файлами на сервере
5. Все изменения сразу на сервере!

НЕ нужно:
- ❌ Устанавливать VS Code на сервер
- ❌ Качать файлы на компьютер
- ❌ Загружать обратно на сервер

VS Code работает КАК БУДТО файлы локальные, но они на сервере!


🚀 ПОЛНЫЙ WORKFLOW

Как всё работает вместе:

1. ВЫ открываете браузер
   
   http://91.218.142.168:3000
   
2. FRONTEND (Streamlit/React)
   ├─ Показывает интерфейс
   ├─ Чат, документы, дашборд
   └─ Вы пишете: "Создай проект analytics"
   
3. HTTP запрос  BACKEND
   
   POST http://localhost:8000/api/chat
   body: {"message": "Создай проект analytics"}
   
4. BACKEND (FastAPI)
   ├─ Получает запрос
   ├─ Вызывает CentralAgent
   └─ CentralAgent  ProjectAgent  DocumentAgent  GitAgent
   
5. АГЕНТЫ выполняют
   ├─ Создают файлы в /opt/claude-workspace/projects/analytics/
   ├─ Git commit
   └─ Возвращают результат
   
6. BACKEND  FRONTEND
   
   {"status": "success", "message": "Проект создан"}
   
7. FRONTEND показывает
    Проект analytics создан!
   [Открыть проект]
   
8. ВЫ кликаете "Открыть проект"
   
9. FRONTEND  BACKEND
   
   GET /api/documents/analytics/PROJECT.md
   
10. BACKEND читает файл  FRONTEND
    
11. FRONTEND показывает редактор с содержимым

ОДНОВРЕМЕННО:

ВЫ в VS Code на своём компьютере:
   ├─ Видите те же файлы
   ├─ Можете редактировать
   └─ Git commit через UI

Всё синхронизировано через Git!

📦 УСТАНОВКА И ЗАПУСК

Шаг 1: Backend (FastAPI)

# На сервере
cd /opt/claude-workspace

# Создать структуру
mkdir -p backend

# Создать файл
cat > backend/api.py << 'EOF'
# (код API из примера выше)
EOF

# Установить зависимости
pip install fastapi uvicorn websockets

# Запустить
uvicorn backend.api:app --host 0.0.0.0 --port 8000 --reload

# Или как сервис (systemd)
cat > /etc/systemd/system/cifra-backend.service << 'EOF'
[Unit]
Description=CIFRA Platform Backend
After=network.target

[Service]
Type=simple
User=root
WorkingDirectory=/opt/claude-workspace
ExecStart=/usr/bin/python3 -m uvicorn backend.api:app --host 0.0.0.0 --port 8000
Restart=always

[Install]
WantedBy=multi-user.target
EOF

systemctl enable cifra-backend
systemctl start cifra-backend

Шаг 2: Frontend (Streamlit — быстрый вариант)

# На сервере
cd /opt/claude-workspace

# Создать структуру
mkdir -p frontend

# Создать файл
cat > frontend/app.py << 'EOF'
# (код Streamlit из примера выше)
EOF

# Установить
pip install streamlit requests

# Запустить
streamlit run frontend/app.py --server.port 3000 --server.address 0.0.0.0

# Или как сервис
cat > /etc/systemd/system/cifra-frontend.service << 'EOF'
[Unit]
Description=CIFRA Platform Frontend
After=network.target cifra-backend.service

[Service]
Type=simple
User=root
WorkingDirectory=/opt/claude-workspace
ExecStart=/usr/bin/python3 -m streamlit run frontend/app.py --server.port 3000 --server.address 0.0.0.0
Restart=always

[Install]
WantedBy=multi-user.target
EOF

systemctl enable cifra-frontend
systemctl start cifra-frontend

Шаг 3: Nginx (обратный прокси)

# /etc/nginx/sites-available/cifra

server {
    listen 80;
    server_name 91.218.142.168;

    # Frontend
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
    }

    # Backend API
    location /api/ {
        proxy_pass http://localhost:8000;
        proxy_set_header Host $host;
    }

    # WebSocket для чата
    location /ws/ {
        proxy_pass http://localhost:8000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}
# Активировать
ln -s /etc/nginx/sites-available/cifra /etc/nginx/sites-enabled/
nginx -t
systemctl reload nginx

Теперь доступно:

http://91.218.142.168/ → Frontend (Streamlit)
http://91.218.142.168/api/ → Backend API

📊 РЕКОМЕНДАЦИЯ ПО ЭТАПАМ

ФАЗА 0 (Сейчас — Прототип за 1-2 дня):

Frontend: Gradio или простой Streamlit
  - 1 файл app.py
  - Чат через gr.ChatInterface или st.chat_message
  - Минимальный дашборд

Backend: Прямой вызов агентов (без FastAPI)
  - Streamlit вызывает агентов напрямую
  - Без отдельного API сервера

Время: 1-2 дня
Цель: Проверить концепцию

ФАЗА 1 (MVP — 3-5 дней):

Frontend: Streamlit с табами
  - Чат
  - Документы (просмотр)
  - Дашборд

Backend: FastAPI (базовое API)
  - /api/chat
  - /api/projects
  - /api/documents (read-only)

Время: 3-5 дней
Цель: Работающая система

ФАЗА 2 (Production — 1-2 недели):

Frontend: React + TipTap
  - Полноценный UI
  - Real-time чат (WebSocket)
  - Редактирование документов
  - Графики метрик

Backend: FastAPI + WebSocket
  - Полное API
  - Авторизация (JWT)
  - WebSocket для real-time

Время: 1-2 недели
Цель: Production-ready

✅ ИТОГО

Полная система:

FRONTEND (браузер)
├─ Чат (диалог с платформой)
├─ Документы (редактор Markdown)
└─ Дашборд (состояние системы)
     HTTP/WebSocket
BACKEND (FastAPI на порту 8000)
├─ API endpoints
└─ Вызовы агентов
    
АГЕНТЫ (Python классы)
├─ CentralAgent, DocumentAgent, etc.
└─ Работают с файлами
    
GIT (/opt/claude-workspace/)
└─ Вся платформа в одном репозитории

VS Code:

Рекомендация:

СЕЙЧАС (Фаза 0):
- Streamlit frontend (1 день)
- Прямой вызов агентов
- Простой UI

ПОТОМ (Фаза 1-2):
- FastAPI backend
- React frontend
- Production UI

Версия: 1.0.0
Дата: 2025-11-10

❓ ВАШИ ВОПРОСЫ?

Q1: Понятна архитектура (frontend + backend + agents)?
Q2: Какой вариант frontend хотите?
- A) Gradio (быстро, 1 день)
- B) Streamlit (средне, 2-3 дня)
- C) React (долго, 1-2 недели)
Q3: Начинаем с простого (Gradio/Streamlit) или сразу делать production (React)?
Q4: VS Code понятно где ставить (на ваш компьютер)?
Q5: Сделать прототип прямо сейчас (за 1 час)?