Версия: 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/ │ │
│ └──────────────────────────────────────────┘ │
└────────────────────────────────────────────────────┘
1. FRONTEND (Browser)
↓
2. BACKEND (API Server)
↓
3. CORE (Agents + Git)
┌─────────────────────────────────────────┐
│ Платформа ЦИФРА │
├─────────────────────────────────────────┤
│ │
│ 🤖 Система: │
│ Привет! Что будем делать? │
│ │
│ 👤 Вы: │
│ Создай проект analytics используя │
│ шаблон streamlit-mvp-v1 │
│ │
│ 🤖 Система: │
│ ⏳ Создаю проект... │
│ ├─ ProjectAgent: структура ✅ │
│ ├─ DocumentAgent: PROJECT.md ✅ │
│ ├─ CodeAgent: код скопирован ✅ │
│ └─ GitAgent: commit a1b2c3d ✅ │
│ │
│ ✅ Проект analytics создан! │
│ [Открыть проект] [Запустить] │
│ │
├─────────────────────────────────────────┤
│ 💬 Введите команду... [Отправить]│
└─────────────────────────────────────────┘
Функции:
- Диалог с платформой (как ChatGPT)
- Голосовой ввод (🎤 кнопка)
- История сессий
- Suggestions (подсказки команд)
┌─────────────────────────────────────────┐
│ Проекты > 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)
- Поиск по документам
┌─────────────────────────────────────────┐
│ Платформа ЦИФРА — Дашборд │
├─────────────────────────────────────────┤
│ │
│ 📊 ПРОЕКТЫ │
│ ┌─────────────┬─────────────┐ │
│ │ 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 │
│ │
│ [Обновить] │
└─────────────────────────────────────────┘
Функции:
- Список проектов (карточки)
- Состояние агентов (работают/готовы)
- Метрики (токены, коммиты, производительность)
- Лента событий (что происходит)
- Графики (опционально)
Технологии:
- 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%")
Технологии:
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
Технологии:
- 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.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 (установлен локально)
│ └─ Расширение 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 работает КАК БУДТО файлы локальные, но они на сервере!
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!
# На сервере
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
# На сервере
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
# /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
Frontend: Gradio или простой Streamlit
- 1 файл app.py
- Чат через gr.ChatInterface или st.chat_message
- Минимальный дашборд
Backend: Прямой вызов агентов (без FastAPI)
- Streamlit вызывает агентов напрямую
- Без отдельного API сервера
Время: 1-2 дня
Цель: Проверить концепцию
Frontend: Streamlit с табами
- Чат
- Документы (просмотр)
- Дашборд
Backend: FastAPI (базовое API)
- /api/chat
- /api/projects
- /api/documents (read-only)
Время: 3-5 дней
Цель: Работающая система
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/)
└─ Вся платформа в одном репозитории
СЕЙЧАС (Фаза 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 час)?