Детальный промпт для AI-агента

Создание «AI Browser Shell» — Специализированной Chromium-оболочки

Назначение этого документа: скопировать целиком и вставить в AI-агент
(Cursor, Claude, Gemini, Copilot Workspace и т.д.) как стартовую инструкцию
для пошаговой реализации проекта.

СИСТЕМНЫЙ ПРОМПТ (SYSTEM)

⎗

Ты — senior full-stack инженер и системный архитектор с глубокой экспертизой в:
- Сборка и кастомизация Chromium (GN/Ninja, C++ уровень chrome/browser/)
- Electron / Tauri для десктопных приложений
- Node.js / TypeScript бэкенд
- REST API интеграции (OpenAI-compatible, Anthropic, Google AI)
- Linux-администрирование (Debian, systemd, nginx)
- Удалённый доступ (Apache Guacamole, noVNC, X11)
- Безопасность (TLS, шифрование ключей, sandbox)

Ты работаешь поэтапно, каждый шаг подтверждаешь с пользователем перед переходом
к следующему. Код пишешь production-ready, с обработкой ошибок и комментариями.
Предпочитаешь TypeScript для нового кода, C++ только для модификаций ядра Chromium.

ОСНОВНОЙ ПРОМПТ (USER)

КОНТЕКСТ ПРОЕКТА

Мне нужно создать специализированную браузерную оболочку «AI Browser Shell» — кастомизированный Chromium-браузер, заточенный исключительно под работу с AI-агентами (Google Gemini, Anthropic Claude, DeepSeek). Это локальный инструмент в духе Cursor IDE, но в форм-факторе браузера, с удалённым доступом к серверу на минимизированной Debian.

Ключевая фича: перед отправкой запроса в AI, встроенный сервис переводит мой русскоязычный текст на английский — это экономит токены, т.к. кириллица потребляет в ~1.5-2x больше токенов чем латиница.

АРХИТЕКТУРА (следуй ей строго)

⎗

ПОЛЬЗОВАТЕЛЬ (RU-ввод)
       │
       ▼
┌─────────────────────────────────────────────┐
│         AI BROWSER SHELL (Chromium Fork)     │
│                                             │
│  [1] UI Layer ──► [2] Translation Engine    │
│                         │                   │
│                         ▼                   │
│                   [3] AI Router             │
│                    ┌────┼────┐              │
│                    ▼    ▼    ▼              │
│                 Gemini Claude DeepSeek      │
│                                             │
│  [4] Token Dashboard                        │
│  [5] Config & Key Manager                   │
└─────────────────────────────────────────────┘
       │
       ▼
┌─────────────────────────────────────────────┐
│  СЕРВЕР: Debian 12 Minimal + Guacamole      │
│  (удалённый доступ через HTML5)             │
└─────────────────────────────────────────────┘

ЗАДАНИЕ: ПОШАГОВАЯ РЕАЛИЗАЦИЯ

Реализуй проект в 4 фазах. После каждой фазы — контрольная точка.
Каждый файл сопровождай кратким комментарием о его назначении.

ФАЗА 1: ФУНДАМЕНТ — Chromium Fork + базовый UI

Цель: получить собирающийся кастомный Chromium с AI-sidebar.

Шаг 1.1 — Стратегический выбор базы

Предложи и обоснуй выбор между двумя подходами:

Подход	Описание
A) Полный форк Chromium	Клон chromium/chromium с GitHub, модификация на уровне C++, удаление компонентов, сборка через GN+Ninja
B) Electron/Tauri обёртка	Приложение поверх Chromium-рантайма, вся логика на TypeScript, быстрый старт

Для подхода A (основной):

Подготовь скрипт setup_build_env.sh для настройки сборочного окружения на Ubuntu/Debian
Создай конфиг GN args.gn с отключением: PDF viewer, media codecs (кроме базовых), Google sync, crash reporter, print preview, WebStore
Подготовь патч для добавления AI sidebar в chrome/browser/ui/views/side_panel/

Для подхода B (запасной / MVP):

Инициализируй Electron-проект с TypeScript

Структура:

⎗

ai-browser-shell/
├── src/
│   ├── main/              # Electron main process
│   │   ├── main.ts
│   │   ├── ipc-handlers.ts
│   │   └── tray.ts
│   ├── renderer/          # UI (React/Svelte/Vanilla)
│   │   ├── App.tsx
│   │   ├── components/
│   │   │   ├── Sidebar.tsx        # AI чат-панель
│   │   │   ├── ProviderSwitch.tsx # Переключатель AI
│   │   │   ├── ChatMessage.tsx    # Сообщение в чате
│   │   │   ├── TokenCounter.tsx   # Счётчик токенов
│   │   │   └── Settings.tsx       # Настройки
│   │   └── styles/
│   ├── services/
│   │   ├── translation/   # Модуль перевода
│   │   ├── providers/     # AI-адаптеры
│   │   ├── storage/       # Хранилище (SQLite)
│   │   └── config/        # Конфигурация
│   └── shared/            # Общие типы и утилиты
│       └── types.ts
├── assets/
├── scripts/               # Скрипты сборки/деплоя
├── config/
│   └── default.json       # Конфигурация по умолчанию
├── package.json
├── tsconfig.json
├── electron-builder.yml
└── README.md

Шаг 1.2 — Базовый UI (AI Sidebar)

Создай главное окно со следующей компоновкой:

⎗
✓
┌─────────────────────────────────────────────────────────────┐
│ [◄] [►] [↻]  [URL bar .........................]  [⚙]  [AI]│  ← Toolbar
├────────────────────────────────────────────┬────────────────┤
│                                            │  AI SIDEBAR    │
│                                            │                │
│           WEB CONTENT AREA                 │ ┌────────────┐ │
│                                            │ │ [Gemini ▼] │ │
│           (основной браузер)               │ ├────────────┤ │
│                                            │ │            │ │
│                                            │ │  Чат с AI  │ │
│                                            │ │  (история  │ │
│                                            │ │  сообщений)│ │
│                                            │ │            │ │
│                                            │ │            │ │
│                                            │ ├────────────┤ │
│                                            │ │ [RU→EN: ON]│ │
│                                            │ │ Tokens: 245│ │
│                                            │ ├────────────┤ │
│                                            │ │ [Ваш текст]│ │
│                                            │ │ [  >>>>  ] │ │
│                                            │ └────────────┘ │
└────────────────────────────────────────────┴────────────────┘

Требования к sidebar:

Ширина: 380px по умолчанию, resizable
Тёмная тема (фон: #1e1e2e, текст: #cdd6f4, акцент: #89b4fa)
Dropdown вверху для выбора провайдера: Gemini / Claude / DeepSeek
Область чата: markdown-рендеринг, подсветка кода (highlight.js или shiki)
Статусная строка: индикатор перевода ON/OFF, счётчик токенов
Поле ввода: textarea с автовысотой, отправка по Ctrl+Enter
Кнопка отправки

ФАЗА 2: TRANSLATION ENGINE + AI ADAPTERS

Цель: рабочий пайплайн: ввод RU → перевод EN → отправка в AI → получение ответа.

Шаг 2.1 — Translation Engine

Реализуй модуль src/services/translation/ со следующей логикой:

⎗
✓
// Требуемый интерфейс
interface TranslationEngine {
  translate(text: string, from: string, to: string): Promise<string>;
  detectLanguage(text: string): Promise<string>;
  isEnabled(): boolean;
  getStats(): { cached: number; translated: number; saved_tokens: number };
}

Логика работы:

Получить текст от пользователя
Определить язык (detectLanguage):
- Если уже EN → пропустить перевод, отправить как есть
- Если RU → перевести
КРИТИЧНО: НЕ переводить содержимое блоков кода (...), inline-код (...), URL-адреса и имена переменных/функций
Перевести через бэкенд (приоритет):
- Проверить LRU-кэш (макс. 10,000 записей)
- Если нет в кэше → вызвать API перевода
- Сохранить в кэш
Вернуть переведённый текст

Бэкенды перевода (реализуй все три, переключаемые в конфиге):

⎗
✓
// Бэкенд 1: LibreTranslate (self-hosted, рекомендуемый)
// POST http://localhost:5000/translate
// { q: "текст", source: "ru", target: "en" }

// Бэкенд 2: Google Translate free endpoint
// GET https://translate.googleapis.com/translate_a/single
//   ?client=gtx&sl=ru&tl=en&dt=t&q=текст

// Бэкенд 3: Google Cloud Translation API (платный)
// POST https://translation.googleapis.com/language/translate/v2
// Authorization: Bearer API_KEY

Fallback-логика: LibreTranslate → Google Free → Google Paid.
При ошибке — отправить оригинальный текст без перевода (не блокировать пользователя).

Шаг 2.2 — AI Provider Adapters

Реализуй src/services/providers/ с единым интерфейсом:

⎗
✓
interface AIProvider {
  readonly name: string;
  readonly id: 'gemini' | 'claude' | 'deepseek';

  sendMessage(params: {
    message: string;
    systemPrompt?: string;
    history?: ChatMessage[];
    options?: ModelOptions;
  }): AsyncGenerator<string>;  // streaming через yield

  countTokens(text: string): Promise<number>;
  validateKey(): Promise<boolean>;
  getModels(): Promise<ModelInfo[]>;
}

interface ModelOptions {
  model?: string;
  temperature?: number;     // 0.0 - 2.0
  maxTokens?: number;       // макс. токенов в ответе
  topP?: number;
}

interface ChatMessage {
  role: 'user' | 'assistant' | 'system';
  content: string;
  timestamp: number;
  tokens?: number;
  originalLang?: string;    // 'ru' если был переведён
  originalText?: string;    // оригинал до перевода
}

Реализуй три адаптера:

Адаптер Gemini:

⎗
✓
Endpoint: https://generativelanguage.googleapis.com/v1beta/models/{model}:streamGenerateContent
Auth: ?key=API_KEY
Модели: gemini-2.0-flash (default), gemini-2.0-pro
Streaming: SSE (server-sent events)

Адаптер Claude:

⎗
✓
Endpoint: https://api.anthropic.com/v1/messages
Auth: x-api-key header
Модели: claude-sonnet-4-6 (default), claude-haiku-4-5
Streaming: SSE с event: content_block_delta
Обязательные headers: anthropic-version: 2023-06-01

Адаптер DeepSeek:

⎗
✓
Endpoint: https://api.deepseek.com/v1/chat/completions
Auth: Bearer token (OpenAI-compatible)
Модели: deepseek-chat (default), deepseek-reasoner
Streaming: SSE (OpenAI-совместимый формат)

Шаг 2.3 — Полный пайплайн (связка перевода и AI)

Свяжи всё в единый flow внутри src/services/chat-pipeline.ts:

⎗

userInput(RU)
  │
  ├─► translationEngine.detectLanguage()
  │     └─► "ru" ──► translationEngine.translate(text, "ru", "en")
  │                    └─► translatedText(EN)
  │
  ├─► tokenCounter.count(translatedText)
  │     └─► обновить UI: "Tokens: XXX"
  │
  ├─► selectedProvider.sendMessage({ message: translatedText, ... })
  │     └─► streaming chunks ──► рендерить в UI посимвольно
  │
  ├─► tokenCounter.count(fullResponse)
  │     └─► обновить UI: "Tokens: XXX (total session: YYYY)"
  │
  └─► [опционально] translationEngine.translate(response, "en", "ru")
        └─► показать перевод ответа

ФАЗА 3: ХРАНИЛИЩЕ, БЕЗОПАСНОСТЬ, DASHBOARD

Цель: персистентность данных, безопасное хранение ключей, статистика.

Шаг 3.1 — SQLite хранилище

База данных ~/.ai-browser-shell/data.db:

⎗
✓
-- Таблица сессий (диалогов)
CREATE TABLE sessions (
    id          TEXT PRIMARY KEY,           -- UUID
    provider    TEXT NOT NULL,              -- 'gemini' | 'claude' | 'deepseek'
    model       TEXT NOT NULL,
    title       TEXT,                       -- автогенерация из первого сообщения
    created_at  INTEGER NOT NULL,           -- unix timestamp
    updated_at  INTEGER NOT NULL
);

-- Таблица сообщений
CREATE TABLE messages (
    id              TEXT PRIMARY KEY,
    session_id      TEXT NOT NULL REFERENCES sessions(id),
    role            TEXT NOT NULL,           -- 'user' | 'assistant' | 'system'
    content         TEXT NOT NULL,           -- текст (EN, отправленный в AI)
    original_text   TEXT,                    -- оригинал (RU, до перевода)
    tokens_in       INTEGER DEFAULT 0,
    tokens_out      INTEGER DEFAULT 0,
    created_at      INTEGER NOT NULL
);

-- Таблица статистики токенов
CREATE TABLE token_stats (
    id          INTEGER PRIMARY KEY AUTOINCREMENT,
    provider    TEXT NOT NULL,
    model       TEXT NOT NULL,
    tokens_in   INTEGER NOT NULL,
    tokens_out  INTEGER NOT NULL,
    estimated_cost_usd REAL,                -- примерная стоимость
    date        TEXT NOT NULL                -- 'YYYY-MM-DD'
);

-- Кэш переводов
CREATE TABLE translation_cache (
    hash        TEXT PRIMARY KEY,            -- SHA-256 от source_text
    source_text TEXT NOT NULL,
    translated  TEXT NOT NULL,
    source_lang TEXT NOT NULL,
    target_lang TEXT NOT NULL,
    used_at     INTEGER NOT NULL             -- для LRU-эвикции
);

Шаг 3.2 — Шифрование API-ключей

Реализуй src/services/storage/keychain.ts:

Используй keytar (npm) для хранения ключей в OS keyring (Windows Credential Vault / macOS Keychain / Linux Secret Service)
Fallback: AES-256-GCM шифрование файла ~/.ai-browser-shell/keys.enc с мастер-паролем
НИКОГДА не хранить ключи в plaintext
При первом запуске — запросить у пользователя API-ключи через UI-мастер настройки

Шаг 3.3 — Token Dashboard (New Tab Page)

При открытии новой вкладки показывать dashboard:

⎗

┌──────────────────────────────────────────────────────────────────┐
│                    AI Browser Shell Dashboard                     │
├──────────────────────────────────────────────────────────────────┤
│                                                                  │
│  ┌─ Сегодня ──────────┐  ┌─ Всего ───────────┐  ┌─ Экономия ─┐│
│  │  Запросов: 47       │  │  Запросов: 1,284   │  │  Токенов   ││
│  │  Токенов: 12,450    │  │  Токенов: 342,100  │  │  сэкономле-││
│  │  ~$0.18             │  │  ~$4.80            │  │  но за счёт││
│  └─────────────────────┘  └────────────────────┘  │  перевода: ││
│                                                   │  ~98,400   ││
│  ┌─ Использование по провайдерам (за 7 дней) ───┐ │  (~$1.40)  ││
│  │                                               │ └───────────┘│
│  │  Claude   ████████████████████░░░  68%        │              │
│  │  Gemini   ██████░░░░░░░░░░░░░░░░  24%        │              │
│  │  DeepSeek ██░░░░░░░░░░░░░░░░░░░░   8%        │              │
│  │                                               │              │
│  └───────────────────────────────────────────────┘              │
│                                                                  │
│  ┌─ Последние сессии ────────────────────────────────────────┐  │
│  │  ● "Рефакторинг auth модуля"    Claude    2 часа назад    │  │
│  │  ● "SQL оптимизация запросов"   Gemini    5 часов назад   │  │
│  │  ● "Код ревью API endpoints"    DeepSeek  вчера           │  │
│  └───────────────────────────────────────────────────────────┘  │
│                                                                  │
│                    [Начать новый чат]                             │
└──────────────────────────────────────────────────────────────────┘

ФАЗА 4: УДАЛЁННЫЙ ДОСТУП + ДЕПЛОЙ НА DEBIAN

Цель: развернуть всё на минималистичном Debian-сервере с HTML5-доступом.

Шаг 4.1 — Скрипт подготовки Debian

Создай scripts/setup-debian-server.sh:

⎗
✓
#!/bin/bash
# Назначение: превращение чистого Debian 12 в минимальный рабочий сервер
# для AI Browser Shell с удалённым доступом
#
# Запуск: sudo bash setup-debian-server.sh

# --- Этапы: ---
# 1. Обновление системы
# 2. Установка минимального GUI (Xfce4 core / Openbox)
# 3. Установка X11, dbus, fonts
# 4. Установка и настройка Nginx (reverse proxy + SSL)
# 5. Установка Apache Guacamole (Docker compose)
# 6. Установка Node.js (LTS) для AI Browser Shell бэкенда
# 7. Установка AI Browser Shell
# 8. Настройка автозапуска (systemd service)
# 9. Настройка firewall (ufw: 22, 80, 443)
# 10. Установка fail2ban
# 11. Удаление/отключение лишнего: bluetooth, cups, avahi, snap
# 12. Генерация SSL-сертификата (Let's Encrypt / self-signed)

Шаг 4.2 — Docker Compose для Guacamole

Создай deploy/docker-compose.yml:

⎗
✓
# Apache Guacamole — HTML5 удалённый десктоп
# Позволяет подключаться к серверу через обычный браузер
# без установки VNC/RDP клиента
#
# Компоненты:
#   guacd    — сервер-демон (протоколы VNC/RDP/SSH)
#   guacamole — веб-приложение (tomcat)
#   postgres  — хранилище пользователей и подключений
#   nginx     — reverse proxy + SSL termination

Шаг 4.3 — Systemd сервис

Создай deploy/ai-browser-shell.service:

Автозапуск приложения при старте системы
Перезапуск при падении (Restart=on-failure)
Запуск от непривилегированного пользователя
Ограничение ресурсов через cgroups (MemoryMax=2G)

Шаг 4.4 — Nginx конфигурация

Создай deploy/nginx/ai-shell.conf:

HTTPS на 443 (SSL cert от Let's Encrypt)
Проксирование /guacamole/ → Guacamole на :8080
Проксирование /api/ → внутренний API на :3000 (если есть)
WebSocket support для Guacamole
Security headers (HSTS, CSP, X-Frame-Options)

КОНФИГУРАЦИЯ ПО УМОЛЧАНИЮ

Используй эту структуру для файла config/default.json:

⎗
✓
{
  "app": {
    "name": "AI Browser Shell",
    "version": "1.0.0",
    "theme": "dark",
    "language": "ru",
    "sidebar_width": 380,
    "sidebar_position": "right"
  },
  "translation": {
    "enabled": true,
    "source_lang": "auto",
    "target_lang": "en",
    "translate_responses": false,
    "skip_code_blocks": true,
    "backend_priority": ["libretranslate", "google_free", "google_cloud"],
    "cache_max_entries": 10000,
    "libretranslate": {
      "url": "http://localhost:5000"
    }
  },
  "providers": {
    "default": "claude",
    "gemini": {
      "model": "gemini-2.0-flash",
      "max_tokens": 8192,
      "temperature": 0.7
    },
    "claude": {
      "model": "claude-sonnet-4-6",
      "max_tokens": 8192,
      "temperature": 0.7
    },
    "deepseek": {
      "model": "deepseek-chat",
      "max_tokens": 8192,
      "temperature": 0.7
    }
  },
  "shortcuts": {
    "send_message": "Ctrl+Enter",
    "switch_provider": "Ctrl+Shift+P",
    "toggle_sidebar": "Ctrl+B",
    "new_session": "Ctrl+Shift+N",
    "toggle_translation": "Ctrl+Shift+T"
  }
}

ТРЕБОВАНИЯ К КАЧЕСТВУ КОДА

TypeScript strict mode — никаких any, все типы явные
Обработка ошибок — каждый внешний вызов (API, файлы, сеть) обёрнут в try/catch с информативными сообщениями
Логирование — winston или pino, уровни: error/warn/info/debug, ротация логов
Тесты — unit-тесты для translation engine и provider adapters (vitest / jest)
Без хардкода — все конфигурируемые параметры в config/default.json
Graceful degradation — если перевод недоступен → отправлять оригинал; если провайдер недоступен → показать ошибку, предложить переключиться

ВАЖНЫЕ ОГРАНИЧЕНИЯ

НЕ использовать платные API без явного подтверждения пользователя
НЕ хранить API-ключи в plaintext нигде (ни в коде, ни в конфигах, ни в логах)
НЕ отправлять телеметрию или аналитику куда-либо
НЕ включать автообновления без согласия пользователя
НЕ делать лишних сетевых запросов (кэшировать агрессивно)
Весь код — open-source ready (MIT лицензия, без проприетарных зависимостей)

ПОРЯДОК ДЕЙСТВИЙ

Начни реализацию в таком порядке:

⎗

[1] Выбор подхода (Chromium fork vs Electron) — обоснуй
         │
         ▼
[2] Инициализация проекта, структура, package.json, tsconfig
         │
         ▼
[3] UI: главное окно + sidebar (без логики, только вёрстка)
         │
         ▼
[4] Translation Engine (все 3 бэкенда + кэш + skip code blocks)
         │
         ▼
[5] AI Adapters (Gemini → Claude → DeepSeek) + streaming
         │
         ▼
[6] Связка pipeline: ввод → перевод → AI → отображение
         │
         ▼
[7] SQLite хранилище + история сессий
         │
         ▼
[8] Шифрование ключей (keytar / AES fallback)
         │
         ▼
[9] Token Dashboard (New Tab Page)
         │
         ▼
[10] Скрипт деплоя на Debian + Guacamole + Nginx + systemd
         │
         ▼
[11] Тестирование и документация

На каждом шаге:

Покажи план файлов, которые будешь создавать/менять
Напиши код
Объясни, как тестировать этот шаг
Дождись моего подтверждения перед переходом к следующему шагу

Начинай с шага [1].