freegate 0.6.17 → 0.6.18

package/README.md

@@ -29,7 +29,7 @@ is only yours — nobody else can connect to it, and you can't to theirs. Provid
 keys live in your local `.env`, history in local files. **No third-party server
 sees your keys or conversations.**
 
-![Freegate Dashboard](assets/dashboard.png)
+![Freegate Dashboard](assets/dashboard.gif)
 
 ## Features
 
@@ -43,9 +43,10 @@ sees your keys or conversations.**
 | 💰 **Free** | Free models only. The dashboard shows each provider's remaining limit. |
 | ⚡ **Smart routing** | Picks the fastest, most stable provider for every request. |
 | 🛡️ **Reliability** | Circuit breaker, request queue, auto-disable of dead providers, watchdog. |
-| 📊 **Dashboard** | Status, speed, limits, history, tokens, RPM chart, savings ($). RU/EN. |
+| 📊 **Dashboard** | Status, speed, limits, history, tokens, RPM chart, savings ($). RU/EN. **4 themes** (PolyCopy/Warm/Cosmic/Paper) — switcher in the header. |
 | 💾 **Disk cache** | Repeat prompts don't consume limits at all. |
-| 🎓 **Methodologist** | Agent answers like an engineer: plan→test→code (coding), stepwise (reasoning). Prompts customizable in `config.json`. |
+| 🎓 **Methodologist** | Agent answers like an engineer: plan→test→code (coding), stepwise (reasoning), like a frontend designer (design). Prompts customizable in `config.json`. |
+| 🌐 **Web search** | For question/answer it fetches current facts from the web (DuckDuckGo, keyless) — answers accurately instead of hallucinating. |
 | 🔌 **Compatible** | Any OpenAI client: opencode, Cursor, your scripts. |
 
 ![Freegate Models base](assets/dashboard-models.png)
@@ -134,15 +135,21 @@ to watch for new releases. The model manager runs every 6 hours.
 
 ### Methodologist (Productive Agent Layer)
 
-Freegate classifies the task (coding / reasoning / search / chat) and injects a
+Freegate classifies the task (coding / design / reasoning / search / chat) and injects a
 short system-prompt methodologist **without any client-side changes**. Any
 OpenAI-compatible client (opencode, Cursor, chat) gets engineer-grade answers:
 
 - **coding** — brief plan before code, a suggested test, where to verify.
+- **design** — bold aesthetic idea, distinctive fonts, cohesive palette via CSS variables, choreographed motion, responsive. Inspired by Anthropic `frontend-design`.
 - **reasoning** — reason stepwise, show assumptions.
 - **search** — short factual answer, don't invent sources.
 - **chat** — to the point, concise.
 
+A shared **"don't give up"** block is prepended to every category: if the model
+can't find a tool/file/skill where it expected one, it doesn't refuse — it looks
+for a workaround (reads files directly, checks node_modules, tries alternatives).
+This makes free models act resourcefully instead of ending with "I can't".
+
 The task category also nudges routing toward matching provider categories
 (`coding`→coding models, `reasoning`→reasoning models) without dropping fallback.
 Category distribution is visible on the dashboard and via

package/README.ru.md

@@ -28,7 +28,7 @@ Freegate крутится **на твоей машине** (`http://localhost:40
 провайдеров лежат в твоём локальном `.env`, история — в локальных файлах. **Ни
 один чужой сервер не видит твои ключи и переписки.**
 
-![Дашборд Freegate](assets/dashboard.png)
+![Дашборд Freegate](assets/dashboard.gif)
 
 ## Возможности
 
@@ -42,9 +42,10 @@ Freegate крутится **на твоей машине** (`http://localhost:40
 | 💰 **Бесплатно** | Только free-модели. Дашборд показывает остаток лимита каждого провайдера. |
 | ⚡ **Умный выбор** | Прокси сам находит самый быстрый и стабильный провайдер для каждого запроса. |
 | 🛡️ **Надёжность** | Circuit breaker, очередь запросов, автоотключение мёртвых провайдеров, watchdog. |
-| 📊 **Дашборд** | Статус, скорость, лимиты, история, токены, RPM-график, экономия ($). RU/EN. |
+| 📊 **Дашборд** | Статус, скорость, лимиты, история, токены, RPM-график, экономия ($). RU/EN. **4 темы** (PolyCopy/Тёплый/Космос/Бумага) — переключатель в шапке. |
 | 💾 **Кэш на диске** | Повторные промпты не тратят лимиты вообще. |
-| 🎓 **Методолог** | Агент отвечает как инженер: план→тест→код (coding), пошагово (reasoning). Промпты настраиваются в `config.json`. |
+| 🎓 **Методолог** | Агент отвечает как инженер: план→тест→код (coding), пошагово (reasoning), **как фронтенд-дизайнер** (design). Промпты настраиваются в `config.json`. |
+| 🌐 **Веб-поиск** | Для вопросов-поиска Freegate находит актуальные факты в интернете (DuckDuckGo, без ключа) — отвечает по существу, а не галлюцинирует. |
 | 🔌 **Совместимость** | Любой OpenAI-клиент: opencode, Cursor, ChatGPT-аналоги, твои скрипты. |
 
 ![База моделей Freegate](assets/dashboard-models.png)
@@ -63,7 +64,7 @@ npx freegate test        # проверить, что всё работает
 
 **Подключить к Cursor в 2 клика:** Cursor → Settings → Models → «OpenAI-compatible» → Base URL `http://localhost:4000/v1`, API Key = твой пароль.
 
-Дашборд: `http://localhost:4000/?key=твой_пароль`
+Дашборд: `http://localhost:4000/?key=твой_пароль`. Темы: `?theme=cosmic` или кнопка «Тема» в шапке; `npx freegate themes` — список.
 
 Или через Docker:
 
@@ -139,10 +140,17 @@ Freegate определяет тип задачи (кодинг / рассужд
 ответы как от опытного инженера:
 
 - **coding** — краткий план перед кодом, предложенный тест, где проверять.
+- **design** — смелая эстетическая идея, характерные шрифты, единая палитра через CSS-переменные, срежиссированные анимации, адаптив. По мотивам Anthropic `frontend-design`.
 - **reasoning** — рассуждать пошагово, показывать допущения.
 - **search** — короткий фактологичный ответ, не выдумывать источник.
 - **chat** — по существу и кратко.
 
+Ко всем категориям подмешивается общий блок **«не сдавайся»**: если модель не
+находит нужный инструмент/файл/скилл там, где ожидал — не отказывается, а ищет
+обходной путь (читает файлы напрямую, проверяет node_modules, пробует
+альтернативы). Вследствие этого free-модели ведут себя находчивее, а не
+заканчивают ответ «не могу».
+
 Дополнительно: категория задачи даёт буст моделям подходящей категории
 (`coding`→coding-модели, `reasoning`→reasoning-модели), не исключая fallback.
 Распределение категорий видно в дашборде и через

package/bin/freegate.js

@@ -185,6 +185,21 @@ WantedBy=default.target
   }
 } else if (cmd === 'dashboard') {
   console.log('Открой http://localhost:4000/ (запусти start сначала)');
+} else if (cmd === 'themes') {
+  console.log('🎨 Темы дашборда Freegate');
+  console.log('-----------------------------');
+  const themes = [
+    ['poly', 'PolyCopy — тёмный, фиолетовый акцент (по умолчанию)'],
+    ['warm', 'Тёплый — янтарный, уютный ламповый'],
+    ['cosmic', 'Космос — глубокий синий, мягкий голубой'],
+    ['paper', 'Бумага — светлый, инженерный чертёж'],
+  ];
+  for (const [id, desc] of themes) console.log('  ' + id.padEnd(8) + desc);
+  console.log('-----------------------------');
+  console.log('Как включить:');
+  console.log('  ?theme=cosmic   — открыть дашборд в теме вручную');
+  console.log('  Кнопка «Тема» в шапке дашборда — переключать по кругу');
+  console.log('  Памятка: `--theme` не нужен, тема хранится в localStorage браузера.');
 } else if (cmd === 'test') {
   const http = require('http');
   const base = `http://127.0.0.1:${process.env.PORT || 4000}`;

package/config.example.json

@@ -16,6 +16,12 @@
       "reasoning": "Рассуждай пошагово, показывай допущения, затем вывод."
     }
   },
+  "websearch": {
+    "enabled": true,
+    "limit": 5,
+    "timeout": 8000,
+    "queryMinChars": 6
+  },
   "providers": {
     "or-nemotron-550b": {
       "endpoint": "https://openrouter.ai/api/v1/chat/completions",

package/lib/contextstats.js

@@ -40,7 +40,7 @@ function emptyBucket(hour, provider) {
     status429: 0,
     statusOther: 0,
     sysShareSum: 0,
-    tasks: { coding: 0, reasoning: 0, search: 0, chat: 0 },
+    tasks: { coding: 0, reasoning: 0, search: 0, chat: 0, design: 0 },
   };
 }
 
@@ -163,7 +163,7 @@ class ContextStats {
     let sysShareRequests = 0;
     const providers = {};
     let taskTotal = 0;
-    const tasks = { coding: 0, reasoning: 0, search: 0, chat: 0 };
+    const tasks = { coding: 0, reasoning: 0, search: 0, chat: 0, design: 0 };
 
     for (const b of this.buckets.values()) {
       if (b.ts < cutoff) continue;

package/lib/dashboard.js

@@ -8,166 +8,296 @@ const HTML = `<!DOCTYPE html>
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%2300d4ff'/%3E%3C/svg%3E">
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23e8b553'/%3E%3C/svg%3E">
   <title>Freegate — Панель управления</title>
-  <style>
+    <style>
+    /* ── Aesthetic: современный тёмный админ-дашборд (в стиле PolyCopy) ── */
     :root {
-      --bg: #0d1117; --panel: #161b22; --panel2: #1c2330; --border: #232a3d;
-      --accent: #00d4ff; --ok: #00ff88; --warn: #ffaa00; --err: #ff4444;
-      --text: #e6e6e6; --muted: #8b949e;
+      --bg: #0d0d0f; --panel: #141416; --panel2: #1b1b1e; --border: #26262a;
+      --accent: #7c5cff; --accent-dim: #9d8bff; --accent-ink: #c9beff;
+      --ok: #4ade80; --warn: #fbbf24; --err: #f87171;
+      --text: #ececef; --muted: #9a9aa2;
+      --radius: 12px; --radius-sm: 8px;
+      /* тоновые полупрозрачные акценты (для мульти-тем) */
+      --t-log: rgba(124,92,255,.18); --t-glow: rgba(124,92,255,.2);
+      --t-row: rgba(124,92,255,.03); --t-chip: rgba(124,92,255,.16);
+      --t-bg-ok: rgba(74,222,128,.12); --t-bd-ok: rgba(74,222,128,.35); --t-dot-ok: rgba(74,222,128,.18);
+      --t-bg-warn: rgba(251,191,36,.12); --t-bd-warn: rgba(251,191,36,.4);
+      --t-bg-err: rgba(248,113,113,.12); --t-bd-err: rgba(248,113,113,.4);
+      --t-bg-muted: rgba(154,154,162,.14); --t-bg-muted2: rgba(154,154,162,.1);
+    }
+    body[data-theme="warm"] {
+      --bg: #131006; --panel: #1a1510; --panel2: #211c13; --border: #372e1c;
+      --accent: #e8b553; --accent-dim: #c8983f; --accent-ink: #ffd58a;
+      --ok: #8fbf6a; --warn: #e0a449; --err: #d97b6c;
+      --text: #e8dcc0; --muted: #8a7d5f;
+      --t-log: rgba(232,181,83,.18); --t-glow: rgba(232,181,83,.2);
+      --t-row: rgba(232,181,83,.03); --t-chip: rgba(232,181,83,.16);
+      --t-bg-ok: rgba(143,191,106,.12); --t-bd-ok: rgba(143,191,106,.35); --t-dot-ok: rgba(143,191,106,.18);
+      --t-bg-warn: rgba(224,164,73,.12); --t-bd-warn: rgba(224,164,73,.4);
+      --t-bg-err: rgba(217,123,108,.12); --t-bd-err: rgba(217,123,108,.4);
+      --t-bg-muted: rgba(154,143,117,.14); --t-bg-muted2: rgba(154,143,117,.1);
+    }
+    body[data-theme="cosmic"] {
+      --bg: #0a1018; --panel: #0f1720; --panel2: #141e29; --border: #1f2d3c;
+      --accent: #6fb6e0; --accent-dim: #4f8fb5; --accent-ink: #a9d8f5;
+      --ok: #6fbfa0; --warn: #d9b06a; --err: #d97b7b;
+      --text: #d7e2e8; --muted: #5d6d7d;
+      --t-log: rgba(111,182,224,.18); --t-glow: rgba(111,182,224,.2);
+      --t-row: rgba(111,182,224,.03); --t-chip: rgba(111,182,224,.16);
+      --t-bg-ok: rgba(111,191,160,.12); --t-bd-ok: rgba(111,191,160,.35); --t-dot-ok: rgba(111,191,160,.18);
+      --t-bg-warn: rgba(217,176,106,.12); --t-bd-warn: rgba(217,176,106,.4);
+      --t-bg-err: rgba(217,123,123,.12); --t-bd-err: rgba(217,123,123,.4);
+      --t-bg-muted: rgba(122,134,147,.14); --t-bg-muted2: rgba(122,134,147,.1);
+    }
+    body[data-theme="paper"] {
+      --bg: #f4f5f7; --panel: #ffffff; --panel2: #eef1f5; --border: #d7dce3;
+      --accent: #1f3a5f; --accent-dim: #2c5282; --accent-ink: #1f3a5f;
+      --ok: #2e7d52; --warn: #b26a00; --err: #c0392b;
+      --text: #1c2733; --muted: #6b7683;
+      --t-log: rgba(31,58,95,.18); --t-glow: rgba(31,58,95,.2);
+      --t-row: rgba(31,58,95,.03); --t-chip: rgba(31,58,95,.12);
+      --t-bg-ok: rgba(46,125,82,.1); --t-bd-ok: rgba(46,125,82,.35); --t-dot-ok: rgba(46,125,82,.18);
+      --t-bg-warn: rgba(178,106,0,.1); --t-bd-warn: rgba(178,106,0,.4);
+      --t-bg-err: rgba(192,57,43,.1); --t-bd-err: rgba(192,57,43,.4);
+      --t-bg-muted: rgba(107,118,131,.14); --t-bg-muted2: rgba(107,118,131,.1);
     }
     * { margin: 0; padding: 0; box-sizing: border-box; }
-    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace; background: var(--bg); color: var(--text); padding-bottom: 40px; }
-
-    /* ── Sticky KPI-полоска ── */
-    #topbar { position: sticky; top: 0; z-index: 10; background: rgba(13,17,23,.95); backdrop-filter: blur(6px);
-      border-bottom: 1px solid var(--border); padding: 12px 20px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
-    .brand { font-size: 17px; font-weight: bold; color: var(--accent); display: flex; align-items: center; gap: 8px; margin-right: 8px; }
-    .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--muted); }
-    .dot.ok { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
-    .dot.bad { background: var(--err); box-shadow: 0 0 6px var(--err); }
-    .kpi { display: flex; flex-wrap: wrap; gap: 8px; }
-    .kpi-chip { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; font-size: 12px; }
-    .kpi-chip b { color: var(--accent); font-size: 13px; margin-left: 6px; }
-    .kpi-chip.warn b { color: var(--warn); }
-    .kpi-chip.err b { color: var(--err); }
-
-    /* ── Табы ── */
-    #tabs { display: flex; gap: 6px; padding: 12px 20px 0; flex-wrap: wrap; }
-    .tab { padding: 9px 18px; border-radius: 8px 8px 0 0; cursor: pointer; background: var(--panel);
-      color: var(--muted); border: 1px solid var(--border); border-bottom: none; font-size: 13px; user-select: none; }
-    .tab.active { color: var(--accent); background: var(--panel2); border-color: var(--accent); }
-    .tab:hover { color: var(--text); }
-
-    main { padding: 0 20px; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      background: var(--bg); color: var(--text); padding-bottom: 40px;
+      -webkit-font-smoothing: antialiased; }
+    a { color: inherit; text-decoration: none; }
+
+    /* ── Раскладка: сайдбар + контент ── */
+    .layout { display: flex; min-height: 100vh; }
+    #sidebar { width: 240px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--border);
+      position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 20px 14px; }
+    .side-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 0 6px; }
+    .side-logo { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); display: grid; place-items: center;
+      color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 0 0 3px var(--t-log); }
+    .side-brand .name { font-weight: 700; font-size: 16px; letter-spacing: .2px; }
+    .side-brand .name span { color: var(--muted); font-weight: 600; }
+
+    /* Сайдбар-навигация */
+    #tabs { display: flex; flex-direction: column; gap: 3px; }
+    .tab { padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; color: var(--muted);
+      font-size: 13.5px; font-weight: 500; user-select: none; transition: all .15s ease; display: flex; align-items: center; gap: 10px;
+      border: none; background: none; text-align: left; position: relative; }
+    .tab::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: .6; flex-shrink: 0; }
+    .tab:hover { color: var(--text); background: var(--panel2); }
+    .tab.active { color: var(--accent-ink); background: var(--panel2); }
+    .tab.active::before { background: var(--accent); opacity: 1; box-shadow: 0 0 0 3px var(--t-glow); }
+
+    .side-foot { margin-top: auto; padding: 12px 6px 2px; border-top: 1px solid var(--border); }
+    .side-user { display: flex; align-items: center; gap: 10px; padding: 8px 6px; }
+    .side-avatar { width: 30px; height: 30px; border-radius: 8px; background: var(--panel2); display: grid; place-items: center;
+      color: var(--accent-dim); font-weight: 700; font-size: 13px; border: 1px solid var(--border); }
+    .side-user .info .role { font-size: 11px; color: var(--muted); }
+    .side-user .info .email { font-size: 12.5px; font-weight: 600; }
+
+    /* ── Контент ── */
+    #main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+    #topbar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px);
+      border-bottom: 1px solid var(--border); padding: 14px 28px; display: flex; align-items: center; gap: 14px; }
+    .brand { font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 9px; }
+    .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--muted); }
+    .dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--t-dot-ok); }
+    .dot.bad { background: var(--err); box-shadow: 0 0 0 3px var(--t-bd-err); }
+
+    .lang-switch { margin-left: auto; display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--border);
+      border-radius: 999px; padding: 3px; }
+    .lang-btn { padding: 5px 14px; border-radius: 999px; background: transparent; border: none;
+      color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
+    .lang-btn.active { color: #fff; background: var(--accent); }
+    .lang-btn:hover:not(.active) { color: var(--text); }
+
+    /* ── Переключатель темы ── */
+    .theme-switch { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid var(--border);
+      background: var(--panel); border-radius: 999px; }
+    .theme-swatch { width: 14px; height: 14px; border-radius: 4px; }
+    .theme-btn { padding: 4px 14px; border-radius: 999px; background: transparent; border: none;
+      color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
+    .theme-btn:hover { color: var(--text); }
+
+    /* ── Главный заголовок ── */
+    #page-head { padding: 26px 28px 0; }
+    #page-head .crumb { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
+    #page-head h1 { font-size: 20px; font-weight: 700; }
+    #page-head .sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
+
+    /* ── KPI-карточки (крупные метрики) ── */
+    #kpiBar { padding: 20px 28px 4px; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
+    .kpi-chip { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 16px 13px; }
+    .kpi-label { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
+    .kpi-chip b { display: block; color: var(--text); font-size: 24px; font-weight: 700; margin-top: 8px; letter-spacing: -.5px; }
+    .kpi-chip.warn b { color: var(--warn); } .kpi-chip.err b { color: var(--err); }
+    .kpi-chip.warn, .kpi-chip.err { border-color: var(--t-bd-warn); }
+    .kpi-chip.err { border-color: var(--t-bd-err); }
+
+    /* ── Панели: общий перенос заголовка KPI полоски стал частью content ── */
+    main { padding: 0 28px; }
     .panel { display: none; padding-top: 16px; }
     .panel.active { display: block; }
 
-    /* ── Переключатель языка ── */
-    .lang-switch { margin-left: auto; display: flex; gap: 4px; }
-    .lang-btn { padding: 5px 11px; border-radius: 6px; background: var(--panel); border: 1px solid var(--border);
-      color: var(--muted); font-size: 11px; font-weight: bold; cursor: pointer; }
-    .lang-btn.active { color: var(--accent); border-color: var(--accent); }
-    .lang-btn:hover { color: var(--text); }
-
     /* ── Карточки/сетки ── */
-    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
-    .card { background: var(--panel); border-radius: 10px; padding: 16px 18px; border: 1px solid var(--border); }
-    .card h2 { color: var(--accent); font-size: 12px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .5px; }
-    .stat { display: flex; justify-content: space-between; margin-bottom: 7px; gap: 10px; }
-    .stat-label { color: var(--muted); }
-    .stat-value { color: #fff; font-weight: bold; text-align: right; }
+    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
+    .card { background: var(--panel); border-radius: var(--radius); padding: 18px 20px; border: 1px solid var(--border); }
+    .card h2 { color: var(--muted); font-size: 11px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .8px;
+      display: flex; align-items: center; gap: 8px; font-weight: 600; }
+    .card h2::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
+    .stat { display: flex; justify-content: space-between; margin-bottom: 8px; gap: 10px; }
+    .stat-label { color: var(--muted); font-size: 13px; }
+    .stat-value { color: var(--text); font-weight: 600; text-align: right; font-size: 13px; }
 
     /* ── Алерты ── */
     #alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
-    .alert { padding: 10px 14px; border-radius: 8px; font-size: 13px; border: 1px solid; }
-    .alert.err { background: rgba(255,68,68,.08); border-color: var(--err); color: #ffb3b3; }
-    .alert.warn { background: rgba(255,170,0,.07); border-color: var(--warn); color: #ffd999; }
-    .alert.ok { background: rgba(0,255,136,.06); border-color: var(--ok); color: #b3ffd9; }
+    .alert { padding: 11px 16px; border-radius: var(--radius-sm); font-size: 13px; border: 1px solid; background: var(--panel); }
+    .alert.err { border-color: var(--t-bd-err); color: #fbc4c4; }
+    .alert.warn { border-color: var(--t-bd-warn); color: #fde9b8; }
+    .alert.ok { border-color: var(--t-bd-ok); color: #b7efcd; }
 
     /* ── Тулбар: поиск + фильтры ── */
     .toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
-    .search { flex: 1; min-width: 200px; max-width: 340px; padding: 8px 12px; border-radius: 8px;
-      border: 1px solid var(--border); background: var(--panel); color: #fff; font-size: 13px; outline: none; }
+    .search { flex: 1; min-width: 180px; max-width: 320px; padding: 10px 14px; border-radius: var(--radius-sm);
+      border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 13px; outline: none;
+      transition: border-color .15s ease; }
     .search:focus { border-color: var(--accent); }
-    select.filter { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
-      background: var(--panel); color: var(--text); font-size: 12px; outline: none; cursor: pointer; }
+    select.filter { padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
+      background: var(--panel); color: var(--text); font-size: 13px; outline: none; cursor: pointer; }
     .chips { display: flex; gap: 6px; flex-wrap: wrap; }
-    .chip { padding: 6px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border);
-      color: var(--muted); font-size: 12px; cursor: pointer; user-select: none; }
-    .chip.active { color: var(--accent); border-color: var(--accent); }
+    .chip { padding: 8px 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border);
+      color: var(--muted); font-size: 12.5px; cursor: pointer; user-select: none; transition: all .15s ease; }
+    .chip.active { color: #fff; border-color: var(--accent); background: var(--t-chip); }
+    .chip:hover { color: var(--text); }
     .count-hint { color: var(--muted); font-size: 12px; margin-left: auto; }
 
     /* ── Таблицы ── */
-    .table-wrap { overflow-x: auto; background: var(--panel); border-radius: 10px; border: 1px solid var(--border); }
+    .table-wrap { overflow-x: auto; background: var(--panel); border-radius: var(--radius); border: 1px solid var(--border); }
     table { width: 100%; border-collapse: collapse; min-width: 640px; }
-    th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px; white-space: nowrap; }
-    th { color: var(--accent); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; cursor: pointer; user-select: none; }
-    th:hover { color: #fff; }
-    th .arr { font-size: 9px; margin-left: 3px; }
+    th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; white-space: nowrap; }
+    th { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; cursor: pointer; user-select: none; font-weight: 600; }
+    th:hover { color: var(--text); }
+    th .arr { font-size: 9px; margin-left: 4px; }
     td { color: var(--text); }
-    tr:hover td { background: rgba(0,212,255,.03); }
-    .badge { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: bold; display: inline-block; }
-    .badge.up, .badge.active { background: rgba(0,255,136,.12); color: var(--ok); }
-    .badge.ratelimited { background: rgba(255,170,0,.12); color: var(--warn); }
-    .badge.error, .badge.dead { background: rgba(255,68,68,.12); color: var(--err); }
-    .badge.unknown, .badge.untested { background: rgba(139,148,158,.15); color: var(--muted); }
-    .badge.disabled, .badge.user-disabled { background: rgba(139,148,158,.1); color: var(--muted); }
-    .limit-bar { width: 110px; height: 6px; background: var(--panel2); border-radius: 4px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 7px; }
+    tbody tr:last-child td { border-bottom: none; }
+    tr:hover td { background: var(--t-row); }
+    .badge { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; display: inline-block; }
+    .badge.up, .badge.active { background: var(--t-bg-ok); color: var(--ok); }
+    .badge.ratelimited { background: var(--t-bg-warn); color: var(--warn); }
+    .badge.error, .badge.dead { background: var(--t-bg-err); color: var(--err); }
+    .badge.unknown, .badge.untested { background: var(--t-bg-muted); color: var(--muted); }
+    .badge.disabled, .badge.user-disabled { background: var(--t-bg-muted2); color: var(--muted); }
+    .limit-bar { width: 110px; height: 6px; background: var(--panel2); border-radius: 4px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 8px; }
     .limit-fill { height: 100%; border-radius: 4px; }
-    .score { font-weight: bold; color: var(--accent); }
-    .mono { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; }
+    .score { font-weight: 700; color: var(--text); }
+    .mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; }
 
     /* ── Действия над моделями ── */
     .model-actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
-    .mini-btn { padding: 4px 9px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel2);
-      color: var(--text); font-size: 11px; cursor: pointer; }
-    .mini-btn:hover { border-color: var(--accent); color: var(--accent); }
+    .mini-btn { padding: 6px 11px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--panel2);
+      color: var(--text); font-size: 12px; cursor: pointer; transition: all .15s ease; font-weight: 500; }
+    .mini-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
     .mini-btn.off { color: var(--warn); }
 
     /* ── Рекомендации ── */
-    .rec { font-size: 12px; margin-bottom: 7px; line-height: 1.5; }
-    .rec-badge { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: bold; margin-right: 6px; }
-    .rec-badge.ok { background: rgba(0,255,136,.12); color: var(--ok); }
-    .rec-badge.warn { background: rgba(255,170,0,.12); color: var(--warn); }
-    .rec-badge { background: rgba(139,148,158,.15); color: var(--muted); }
+    .rec { font-size: 12.5px; margin-bottom: 7px; line-height: 1.6; }
+    .rec-badge { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; margin-right: 6px; }
+    .rec-badge.ok { background: var(--t-bg-ok); color: var(--ok); }
+    .rec-badge.warn { background: var(--t-bg-warn); color: var(--warn); }
+    .rec-badge { background: var(--t-bg-muted); color: var(--muted); }
 
     /* ── Экономия ── */
-    .savings .savings-usd { color: var(--ok); font-size: 24px; }
+    .savings .savings-usd { color: var(--ok); font-size: 28px; font-weight: 700; letter-spacing: -.5px; }
 
-    canvas { width: 100%; height: 160px; background: var(--panel); border-radius: 10px; border: 1px solid var(--border); }
-    .refresh { color: var(--muted); font-size: 11px; margin-top: 14px; }
-    .task-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 12px; }
-    .task-bar .name { width: 90px; color: var(--muted); }
+    canvas { width: 100%; height: 180px; background: var(--panel); border-radius: var(--radius); border: 1px solid var(--border); }
+    .refresh { color: var(--muted); font-size: 12px; margin-top: 14px; }
+    .task-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
+    .task-bar .name { width: 90px; color: var(--muted); text-transform: capitalize; }
     .task-bar .bar { flex: 1; height: 8px; background: var(--panel2); border-radius: 5px; overflow: hidden; }
-    .task-bar .fill { height: 100%; background: var(--accent); border-radius: 5px; }
-    .task-bar .num { width: 74px; text-align: right; }
+    .task-bar .fill { height: 100%; border-radius: 5px; }
+    .task-bar .num { width: 84px; text-align: right; color: var(--muted); }
 
     /* ── Setup ── */
     .setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
-    .key-card { background: var(--panel); border-radius: 10px; padding: 16px; border: 1px solid var(--border); }
-    .key-card h3 { color: var(--accent); font-size: 14px; margin-bottom: 8px; }
-    .key-card .desc { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
-    .key-card ol { color: #aaa; font-size: 11px; padding-left: 18px; margin-bottom: 10px; }
+    .key-card { background: var(--panel); border-radius: var(--radius); padding: 18px 20px; border: 1px solid var(--border); }
+    .key-card h3 { color: var(--text); font-size: 15px; margin-bottom: 6px; font-weight: 700; }
+    .key-card .desc { color: var(--muted); font-size: 12.5px; margin-bottom: 10px; line-height: 1.5; }
+    .key-card ol { color: var(--muted); font-size: 12px; padding-left: 18px; margin-bottom: 10px; }
     .key-card li { margin-bottom: 4px; }
-    .key-card a { color: var(--accent); text-decoration: none; }
+    .key-card a { color: var(--accent-dim); }
     .key-input-row { display: flex; gap: 8px; align-items: center; }
-    .key-input { flex: 1; padding: 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: #fff; font-size: 12px; font-family: monospace; }
-    .btn { padding: 8px 14px; border-radius: 6px; border: none; cursor: pointer; font-size: 12px; font-weight: bold; }
-    .btn-validate { background: var(--panel2); color: var(--accent); }
-    .btn-save { background: var(--accent); color: #000; }
-    .btn-test-all { background: var(--panel2); color: var(--ok); }
-    .status-ok { color: var(--ok); font-size: 11px; }
-    .status-err { color: var(--err); font-size: 11px; }
-    .status-wait { color: var(--muted); font-size: 11px; }
+    .key-input { flex: 1; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px; font-family: monospace; }
+    .btn { padding: 10px 16px; border-radius: var(--radius-sm); border: none; cursor: pointer; font-size: 13px; font-weight: 600; transition: all .15s ease; }
+    .btn-validate { background: var(--panel2); color: var(--text); border: 1px solid var(--border); }
+    .btn-validate:hover { border-color: var(--accent); color: var(--accent-ink); }
+    .btn-save { background: var(--accent); color: #fff; }
+    .btn-save:hover { filter: brightness(1.08); }
+    .btn-test-all { background: var(--panel2); color: var(--ok); border: 1px solid var(--border); }
+    .status-ok { color: var(--ok); font-size: 12px; }
+    .status-err { color: var(--err); font-size: 12px; }
+    .status-wait { color: var(--muted); font-size: 12px; }
     .hidden { display: none; }
 
+    @media (max-width: 900px) {
+      #sidebar { width: 64px; padding: 20px 8px; }
+      .side-brand .name, .tab .label, .side-user .info { display: none; }
+      .tab { justify-content: center; }
+      .side-user { justify-content: center; }
+    }
     @media (max-width: 640px) {
-      #topbar { padding: 10px 12px; }
-      main, #tabs { padding-left: 12px; padding-right: 12px; }
-      .kpi-chip { font-size: 11px; padding: 5px 9px; }
+      #topbar, #page-head, main, #kpiBar { padding-left: 16px; padding-right: 16px; }
+      .kpi-chip b { font-size: 20px; }
     }
   </style>
 </head>
 <body>
-  <header id="topbar">
-    <div class="brand"><span id="statusDot" class="dot"></span>Freegate</div>
-    <div class="kpi" id="kpiBar"></div>
-    <div class="lang-switch">
-      <button class="lang-btn" data-lang="ru" onclick="setLang('ru')">RU</button>
-      <button class="lang-btn" data-lang="en" onclick="setLang('en')">EN</button>
-    </div>
-  </header>
+  <div class="layout">
+    <aside id="sidebar">
+      <div class="side-brand">
+        <div class="side-logo">F</div>
+        <div class="name">free<strong>gate</strong></div>
+      </div>
+
+      <nav id="tabs">
+        <div class="tab active" data-i18n="tabOverview" onclick="showTab('overview')"></div>
+        <div class="tab" data-i18n="tabProviders" onclick="showTab('providers')"></div>
+        <div class="tab" data-i18n="tabModels" onclick="showTab('models')"></div>
+        <div class="tab" data-i18n="tabContext" onclick="showTab('context')"></div>
+        <div class="tab" data-i18n="tabSetup" onclick="showTab('setup')"></div>
+      </nav>
+
+      <div class="side-foot">
+        <div class="side-user">
+          <div class="side-avatar">F</div>
+          <div class="info">
+            <div class="email">Freegate</div>
+            <div class="role">Admin</div>
+          </div>
+        </div>
+      </div>
+    </aside>
 
-  <nav id="tabs">
-    <div class="tab active" data-i18n="tabOverview" onclick="showTab('overview')"></div>
-    <div class="tab" data-i18n="tabProviders" onclick="showTab('providers')"></div>
-    <div class="tab" data-i18n="tabModels" onclick="showTab('models')"></div>
-    <div class="tab" data-i18n="tabContext" onclick="showTab('context')"></div>
-    <div class="tab" data-i18n="tabSetup" onclick="showTab('setup')"></div>
-  </nav>
+    <div id="main">
+      <header id="topbar">
+        <div class="brand"><span id="statusDot" class="dot"></span>Панель управления</div>
+        <div class="theme-switch" title="">
+          <button class="theme-btn" id="themeBtn" onclick="cycleTheme()"></button>
+        </div>
+        <div class="lang-switch">
+          <button class="lang-btn" data-lang="ru" onclick="setLang('ru')">RU</button>
+          <button class="lang-btn" data-lang="en" onclick="setLang('en')">EN</button>
+        </div>
+      </header>
+
+      <div id="page-head">
+        <div class="crumb" data-i18n="crumb"></div>
+        <h1 data-i18n="pageTitle"></h1>
+        <div class="sub" data-i18n="pageSub"></div>
+      </div>
+
+      <div class="kpi" id="kpiBar"></div>
 
-  <main>
+      <main>
     <!-- ═══ ОБЗОР ═══ -->
     <section id="panel-overview" class="panel active">
       <div id="alerts"></div>
@@ -235,9 +365,11 @@ const HTML = `<!DOCTYPE html>
       </div>
       <div id="setup-grid" class="setup-grid" data-i18n="loading"></div>
     </section>
-  </main>
+      </main>
 
-  <div class="refresh" style="padding: 0 20px;" data-i18n="autoRefresh"></div>
+      <div class="refresh" style="padding: 0 28px;" data-i18n="autoRefresh"></div>
+    </div>
+  </div>
 
   <script>
     // Carry the ?key= param from the dashboard URL to API calls
@@ -251,6 +383,7 @@ const HTML = `<!DOCTYPE html>
       ru: {
         tabOverview: 'Обзор', tabProviders: 'Провайдеры', tabModels: 'Модели',
         tabContext: 'Контекст', tabSetup: 'Настройки (ключи)',
+        crumb: 'Админ', pageTitle: 'Панель управления', pageSub: 'Мониторинг и управление Freegate',
         kpiProviders: 'Провайдеры', kpiRequests: 'Запросы', kpiRpm: 'RPM', kpiCache: 'Кэш',
         kpiToday: 'Успех сегодня', kpiLimit: 'Лимит', kpiModels: 'Модели', kpiUptime: 'Аптайм',
         cardSavings: 'Экономия (против платных API)', savings: 'Сэкономлено', tokens: 'токенов',
@@ -287,6 +420,7 @@ const HTML = `<!DOCTYPE html>
       en: {
         tabOverview: 'Overview', tabProviders: 'Providers', tabModels: 'Models',
         tabContext: 'Context', tabSetup: 'Settings (keys)',
+        crumb: 'Admin', pageTitle: 'Control Panel', pageSub: 'Freegate monitoring & management',
         kpiProviders: 'Providers', kpiRequests: 'Requests', kpiRpm: 'RPM', kpiCache: 'Cache',
         kpiToday: 'Success today', kpiLimit: 'Limit', kpiModels: 'Models', kpiUptime: 'Uptime',
         cardSavings: 'Savings (vs paid APIs)', savings: 'Saved', tokens: 'tokens',
@@ -331,6 +465,28 @@ const HTML = `<!DOCTYPE html>
       btns.forEach(function (b) { b.classList.toggle('active', b.getAttribute('data-lang') === _lang); });
     }
 
+    // ── темы: data-theme на body + переключатель ──
+    var THEME_LABELS = { poly: 'PolyCopy', warm: 'Тёплый', cosmic: 'Космос', paper: 'Бумага' };
+    var THEME_ORDER = ['poly', 'warm', 'cosmic', 'paper'];
+    var _theme = 'poly';
+    function applyTheme() {
+      document.body.setAttribute('data-theme', _theme);
+      var btn = document.getElementById('themeBtn');
+      if (btn) btn.textContent = (_lang === 'en' ? 'Theme' : 'Тема') + ': ' + (THEME_LABELS[_theme] || _theme);
+    }
+    function cycleTheme() {
+      var i = THEME_ORDER.indexOf(_theme);
+      _theme = THEME_ORDER[(i + 1) % THEME_ORDER.length];
+      localStorage.setItem('fg_theme', _theme);
+      applyTheme();
+    }
+    function setTheme(name) {
+      if (THEME_ORDER.indexOf(name) < 0) name = 'poly';
+      _theme = name; localStorage.setItem('fg_theme', name); applyTheme();
+    }
+    _theme = (new URLSearchParams(location.search).get('theme')) || localStorage.getItem('fg_theme') || 'poly';
+    if (THEME_ORDER.indexOf(_theme) < 0) _theme = 'poly';
+
     // ── состояние клиента ──
     var _health = {}, _limits = {}, _cache = null, _pool = {}, _statsData = null, _ctxSummary = null;
     var _rpmData = [], _recent = [];
@@ -349,6 +505,8 @@ const HTML = `<!DOCTYPE html>
       });
       document.querySelectorAll('.panel').forEach(function (p) { p.classList.remove('active'); });
       document.getElementById('panel-' + tab).classList.add('active');
+      // Шаринг вкладки по хэшу (#models и т.д.)
+      if (location.hash !== '#' + tab) { try { history.replaceState(null, '', '#' + tab); } catch (e) {} }
       if (tab === 'setup' && !_setupData) loadSetup();
       if (tab === 'models') fetchModels();
     }
@@ -410,22 +568,22 @@ const HTML = `<!DOCTYPE html>
         if (p > riskPct) { riskPct = p; riskKey = lk; }
       }
       var html = '';
-      html += '<div class="kpi-chip">' + t('kpiProviders') + '<b>' + up + '/' + total + '</b></div>';
-      html += '<div class="kpi-chip">' + t('kpiRequests') + '<b>' + (_statsData ? _statsData.total_requests : 0) + '</b></div>';
-      html += '<div class="kpi-chip">' + t('kpiRpm') + '<b>' + rpm + '</b></div>';
-      html += '<div class="kpi-chip">' + t('kpiCache') + '<b>' + cacheRate + '%</b></div>';
+      html += '<div class="kpi-chip"><span class="kpi-label">' + t('kpiProviders') + '</span><b>' + up + '/' + total + '</b></div>';
+      html += '<div class="kpi-chip"><span class="kpi-label">' + t('kpiRequests') + '</span><b>' + (_statsData ? _statsData.total_requests : 0) + '</b></div>';
+      html += '<div class="kpi-chip"><span class="kpi-label">' + t('kpiRpm') + '</span><b>' + rpm + '</b></div>';
+      html += '<div class="kpi-chip"><span class="kpi-label">' + t('kpiCache') + '</span><b>' + cacheRate + '%</b></div>';
       // Успех сегодня — главная метрика ценности. Зелёная при высоком, жёлтая/красная при деградации.
       if (_statsData && _statsData.today) {
         var td = _statsData.today;
         var tbCls = td.successRate >= 80 ? '' : td.successRate >= 50 ? ' warn' : ' err';
-        html += '<div class="kpi-chip' + tbCls + '">' + t('kpiToday') + '<b>' + td.successRate + '%</b></div>';
+        html += '<div class="kpi-chip' + tbCls + '"><span class="kpi-label">' + t('kpiToday') + '</span><b>' + td.successRate + '%</b></div>';
       }
       if (riskKey) {
         var cls = riskPct > 90 ? ' err' : riskPct > 60 ? ' warn' : '';
-        html += '<div class="kpi-chip' + cls + '">' + t('kpiLimit') + ': ' + esc(riskKey) + '<b>' + riskPct + '%</b></div>';
+        html += '<div class="kpi-chip' + cls + '"><span class="kpi-label">' + t('kpiLimit') + ': ' + esc(riskKey) + '</span><b>' + riskPct + '%</b></div>';
       }
-      if (_modelStats) html += '<div class="kpi-chip">' + t('kpiModels') + '<b>' + (_modelStats.byStatus.active || 0) + '/' + _modelStats.total + '</b></div>';
-      html += '<div class="kpi-chip">' + t('kpiUptime') + '<b>' + fmtUptime(_statsData ? _statsData.uptime_seconds : 0) + '</b></div>';
+      if (_modelStats) html += '<div class="kpi-chip"><span class="kpi-label">' + t('kpiModels') + '</span><b>' + (_modelStats.byStatus.active || 0) + '/' + _modelStats.total + '</b></div>';
+      html += '<div class="kpi-chip"><span class="kpi-label">' + t('kpiUptime') + '</span><b>' + fmtUptime(_statsData ? _statsData.uptime_seconds : 0) + '</b></div>';
       document.getElementById('kpiBar').innerHTML = html;
       var dot = document.getElementById('statusDot');
       dot.className = 'dot ' + (up > 0 ? 'ok' : 'bad');
@@ -499,7 +657,7 @@ const HTML = `<!DOCTYPE html>
       var w = canvas.width, h = canvas.height, padL = 34, padB = 16, padT = 8;
       ctx.clearRect(0, 0, w, h);
       ctx.font = '10px monospace';
-      ctx.fillStyle = '#8b949e';
+      ctx.fillStyle = '#5d6d7d';
       var max = 1;
       for (var i = 0; i < rpmData.length; i++) if (rpmData[i].count > max) max = rpmData[i].count;
       // сетка: 4 линии
@@ -510,8 +668,9 @@ const HTML = `<!DOCTYPE html>
         ctx.fillText(String(Math.round(max * g / 4)), 4, gy + 3);
       }
       if (!rpmData || rpmData.length === 0) { ctx.fillText('нет данных', padL + 10, h / 2); return; }
-      ctx.strokeStyle = '#00d4ff';
+      ctx.strokeStyle = '#e8b553';
       ctx.lineWidth = 2;
+      ctx.shadowColor = '#e8b553'; ctx.shadowBlur = 4;
       ctx.beginPath();
       var step = (w - padL - 4) / Math.max(rpmData.length - 1, 1);
       rpmData.forEach(function (r, i) {
@@ -520,6 +679,15 @@ const HTML = `<!DOCTYPE html>
         if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
       });
       ctx.stroke();
+      ctx.shadowBlur = 0;
+      // неоновая заливка под линией
+      ctx.lineTo(w - 4, h - padB);
+      ctx.lineTo(padL, h - padB);
+      ctx.closePath();
+      var grad = ctx.createLinearGradient(0, padT, 0, h - padB);
+      grad.addColorStop(0, 'rgba(232,181,83,.20)'); grad.addColorStop(1, 'rgba(232,181,83,0)');
+      ctx.fillStyle = grad;
+      ctx.fill();
       ctx.fillText('-60м', padL, h - 3);
       ctx.fillText('сейчас', w - 44, h - 3);
     }
@@ -735,7 +903,7 @@ const HTML = `<!DOCTYPE html>
       // категории задач — прогресс-бары
       var bars = '';
       if (sum.tasks && sum.taskTotal > 0) {
-        var colors = { coding: '#00d4ff', reasoning: '#b388ff', search: '#00ff88', chat: '#ffaa00' };
+        var colors = { coding: '#e8b553', reasoning: '#c9a0f0', search: '#7cc4e8', chat: '#e0a449', design: '#ec8fae' };
         for (var tk in sum.tasks) {
           var n = sum.tasks[tk];
           if (n <= 0) continue;
@@ -825,9 +993,13 @@ const HTML = `<!DOCTYPE html>
     }
 
     applyLang();
+    applyTheme();
     refresh();
     setInterval(refresh, 5000);
     setInterval(function () { _modelsFetchedAt = 0; fetchModels(); }, 30000);
+    // Открыть запрошенную вкладку из хэша (#models, #providers, ...)
+    var initial = (location.hash || '').replace('#', '');
+    if (initial && _tabByKey[initial]) showTab(initial);
     // модели: подгружаем рекомендации один раз после первой загрузки
     var _isEn = _lang === 'en';
   </script>

package/lib/methodology.js

@@ -26,8 +26,28 @@ const METHODOLOGIES = {
     'Методолог (chat): отвечай по существу и кратко, по-русски.',
     'Если просят код или план — переключись на соответствующий стиль.',
   ].join('\n'),
+  design: [
+    'Методолог (design): перед кодом — определи смелую эстетическую идею. Не делай «generic AI-шаблон».',
+    'Выбери тон: минимализм / максимализм / ретро-футуризм / лакшери / брутализм / мягкий пастельный и т.д. — и держись его.',
+    'Типографика: подбери характерные шрифты (не Arial/Inter/Roboto), связка display + body.',
+    'Цвет: единая палитра через CSS-переменные, доминанта + резкий акцент.',
+    'Движение: одна хорошо срежиссированная загрузка (staggered reveals) и микро-взаимодействия; приоритет CSS-only.',
+    'Композиция и фон: асимметрия, наложение, негативное пространство, текстуры/градиенты/шум — вместо плоских заливок.',
+    'Реализуй рабочий код (HTML/CSS/JS, React, Vue). Адаптив mobile-first, доступность (контраст, aria).',
+    'Каждый дизайн — разный. Не повторяйся между проектами и не ходи в Space Grotesk по умолчанию.',
+  ].join('\n'),
 };
 
+// Общий блок «поведение»: прививает модели сверхспособности — не сдаваться, а
+// искать обходной путь, как DeepSeek. Применяется ко всем категориям независимо
+// от переопределения промптов (config.methodology.prompts).
+const BEHAVIOR = [
+  'Поведение (не сдавайся): если не находишь нужный инструмент/файл/скилл там, где ожидал —',
+  'не говори «не могу». Ищи обходной путь: читай файлы с диска напрямую (cat), проверь node_modules,',
+  'посмотри доступные инструменты, попробуй альтернативу. Сначала попробуй — потом решай.',
+  'Если всё же не выходит — одной строкой: что искал, где, и что предлагаешь сделать.',
+].join('\n');
+
 function getMethodology(category, options) {
   const opts = options || {};
   const prompts = (opts.prompts && typeof opts.prompts === 'object') ? opts.prompts : {};
@@ -63,8 +83,9 @@ function injectMethodology(messages, category, options) {
   }
 
   const copy = messages.slice();
-  copy.splice(insertAt, 0, { role: 'system', content: text });
+  const full = text + '\n\n' + BEHAVIOR;
+  copy.splice(insertAt, 0, { role: 'system', content: full });
   return copy;
 }
 
-module.exports = { getMethodology, injectMethodology, enabledByDefault, METHODOLOGIES };
+module.exports = { getMethodology, injectMethodology, enabledByDefault, METHODOLOGIES, BEHAVIOR };

package/lib/taskclassify.js

@@ -21,7 +21,33 @@ const REASONING_HINTS = [
 const SEARCH_HINTS = [
   'что такое', 'найди', 'где находится', 'как называется', 'что означает',
   'объясни термин', 'find', 'search', 'lookup', 'что за', 'кто такой',
+  'как работает', 'как настроить', 'как установить', 'как использовать',
+  'расскажи про', 'расскажи о', 'про что', 'где скачать', 'где найти',
+  'найди информацию', 'поиск', 'что значит', 'в чем разница', 'как сделать',
 ];
+// Слова, начинающие СОБСТВЕННО поиск/объяснение термина — перехватывают раньше
+// reasoning, чтобы «что означает X» не уходило в «рассуждай пошагово».
+const SEARCH_PREFIX_RE = /^(что (такое|значит|означает)|расскажи|объясни|как|где|кто|найди)\b/i;
+
+// Frontend-дизайн: интерфейсы, вёрстка, UI/UX, макеты, лендинги, компоненты.
+// Ловим ДО coding, т.к. «сверстай компонент» — это дизайн-задача, а не просто код.
+const DESIGN_HINTS = [
+  'лендинг', 'landing', 'интерфейс', 'ui', 'ux', 'верстк', 'вёрстк', 'макет',
+  'фронтенд', 'frontend', 'front-end', 'hero', 'кнопку', 'кнопки', 'форма',
+  'форму', 'навбар', 'sidebar', 'карточк', 'галере', 'модал', 'адаптив',
+  'дизайн', 'шрифт', 'типограф', 'анимац', 'палитр', 'тёмн тем', 'светл тем',
+  'стили', 'tailwind', 'css', 'scss', 'jsx', 'компонент', 'страниц', 'элемент',
+  'секци', 'блок', 'визуал', 'красив', 'глянц', 'presentation', 'постер',
+];
+// Явный фронтенд-сигнал: просят UI-штуку, но это не про логику/бэкенд.
+const DESIGN_UI_RE = /(сверста|нарису|создай|сделай|оформи|дизайн)\b.*(интерфейс|лендинг|верстк|вёрстк|страниц|компонент|ui|ux|form|макет|сайт|иконк|кнопк)/i;
+const DESIGN_TECH_RE = /\b(react|vue|svelte|tailwind|css|scss|jsx|html|figma)\b/i;
+// Вопрос/запрос о дизайне (не задача-создание): «что ты знаешь про дизайн»,
+// «расскажи про минимакс дизайн» — это поиск фактов, а не создание UI.
+// Иначе слово «дизайн» уводит запрос в методолог-дизайнер, и модель отвечает
+// про стиль/минимализм вместо запрошенного предмета (MiniMax-нейросеть и т.п.).
+// ВАЖНО: без \b после кириллицы — \b в JS не видит кириллические слова.
+const DESIGN_QUERY_RE = /^(что (ты )?(знаешь|такое|такая|такой)|расскажи|опиши|найди инфу|что значит|как называется|кто такой).*(дизайн|ui|ux|верстк|вёрстк|лендинг)/i;
 
 function lastUserText(messages) {
   if (!Array.isArray(messages)) return '';
@@ -39,6 +65,19 @@ function classify(messages) {
   const text = lastUserText(messages).trim();
   if (!text) return 'chat';
   const lower = text.toLowerCase();
+  // Вопрос о дизайне («что ты знаешь про дизайн») — это ПОИСК, а не задача
+  // создания UI. Ловим раньше design, иначе слово «дизайн» уводит модель в
+  // методолог-дизайнер и она отвечает про стиль вместо запрошенного предмета.
+  if (DESIGN_QUERY_RE.test(text)) return 'search';
+  // Frontend-дизайн: показываем UI-запросы как design, а не coding — агент
+  // отвечает как дизайнер (продуманный UI/UX), а не «просто код».
+  if (DESIGN_UI_RE.test(text)) return 'design';
+  if (DESIGN_TECH_RE.test(text) && /(свёрст|верстк|вёрстк|интерфейс|страниц|компонент|лендинг|ui|ux|макет)/i.test(text)) return 'design';
+  // Явные UI-сущности без глагола создания — тоже дизайн-работа («карточка
+  // товара», «навбар», «модалка»).
+  if (/(сверста|нарису|сделай|создай|оформи|добавь|допили|поправь)\b/i.test(text) &&
+      /(верстк|вёрстк|интерфейс|лендинг|карточк|кнопк|форму|навбар|модал|адаптив|компонент|блок|секци|страниц|бокс|панел)/i.test(text)) return 'design';
+  if (DESIGN_HINTS.some(h => h !== 'дизайн' && lower.includes(h))) return 'design';
 
   // Код — сильный сигнал: читаем/пишем код, чиним, рефакторим.
   if (looksLikeCode(messages)) return 'coding';
@@ -46,13 +85,15 @@ function classify(messages) {
   if (/[a-zA-Z_$][\w$]*\s*\(/.test(text) && /=>|\{|;|return|\.\w+\(/.test(text)) return 'coding';
   if (CODING_HINTS.some(h => lower.includes(h))) return 'coding';
 
+  // Поиск/объяснение термина — сильный сигнал, ловим ДО reasoning (иначе
+  // «что означает аннотация» уходит в «рассуждай пошагово», а это краткий факт).
+  if (SEARCH_PREFIX_RE.test(text)) return 'search';
+  if (SEARCH_HINTS.some(h => lower.includes(h))) return 'search';
+
   // Рассуждения — числа, подсчёт, объяснение причин.
   if (/\d/.test(text) && /[+\-*/%]|сколько|посчитай|рассчитай/.test(lower)) return 'reasoning';
   if (REASONING_HINTS.some(h => lower.includes(h))) return 'reasoning';
 
-  // Поиск — спрашивают, что это такое, где найти.
-  if (SEARCH_HINTS.some(h => lower.includes(h))) return 'search';
-
   return 'chat';
 }
 

package/lib/websearch.js

@@ -0,0 +1,75 @@
+// lib/websearch.js — веб-поиск для search-задач (бесплатно, без ключа).
+// Используется, чтобы Freegate находил факты вместо галлюцинаций («что такое
+// минимакс дизайн» → реальные данные о MiniMax, а не «минимализм»).
+// Источник: DuckDuckGo HTML (без API-ключа). Вся сеть через injectable fetchImpl.
+// parseDdg() — парсер HTML; search() — обёртка с таймаутом и защитой от сбоев.
+
+const DDG_URL = 'https://html.duckduckgo.com/html/';
+
+const isObject = (v) => v && typeof v === 'object';
+
+// Декодирует URL, обфусцированный DDG (//duckduckgo.com/l/?uddg=<enc>&rut=..).
+function decodeUrl(raw) {
+  if (!raw) return '';
+  if (!raw.includes('uddg=')) return raw;
+  try {
+    const m = raw.match(/[?&]uddg=([^&]+)/);
+    if (!m) return raw;
+    return decodeURIComponent(m[1]);
+  } catch {
+    return raw;
+  }
+}
+
+// Извлекает блоки результатов: title, url, snippet.
+function parseDdg(html) {
+  const out = [];
+  if (!html || typeof html !== 'string') return out;
+  // Каждый результат — блок с result__a (заголовок+ссылка) и опц. result__snippet.
+  const blocks = html.split('class="result results_links').slice(1);
+  for (const b of blocks) {
+    const titleM = b.match(/class="result__a"[^>]*>([^<]+)</);
+    const hrefM = b.match(/class="result__a"[^>]*href="([^"]+)"/);
+    const snipM = b.match(/class="result__snippet"[^>]*>([\s\S]*?)<\/a>/);
+    if (!titleM) continue;
+    const title = titleM[1].replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').trim();
+    const url = decodeUrl(hrefM ? hrefM[1] : '');
+    const snippet = snipM
+      ? snipM[1].replace(/<[^>]+>/g, '').replace(/&amp;/g, '&').replace(/\.\.\./g, '').trim()
+      : '';
+    if (title && url) out.push({ title, url, snippet: snippet.slice(0, 300) });
+  }
+  return out;
+}
+
+// Поиск. Возвращает [{title,url,snippet}]; при любой ошибке — [] (не бросает).
+async function search(query, { fetchImpl, limit = 5, timeout = 8000 } = {}) {
+  if (!fetchImpl || !query) return [];
+  // DDG предпочитает '+' для пробелов (encodeURIComponent даёт %20 → может вернуть
+  // anti-bot 202 без результатов). Кодируем, затем пробелы → '+'.
+  const p = encodeURIComponent(query).replace(/%20/g, '+');
+  const url = DDG_URL + '?q=' + p;
+  try {
+    const controller = typeof AbortController !== 'undefined' ? new AbortController() : null;
+    const timer = controller ? setTimeout(() => controller.abort(), timeout) : null;
+    const res = await fetchImpl(url, {
+      headers: { 'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120 Safari/537.36' },
+      signal: controller ? controller.signal : undefined,
+    });
+    if (timer) clearTimeout(timer);
+    if (!res || !res.ok) return [];
+    const html = await res.text();
+    return parseDdg(html).slice(0, limit);
+  } catch {
+    return [];
+  }
+}
+
+// Собирает контекст для промпта: заголовки + ссылки + сниппеты.
+function toContext(results, query) {
+  if (!Array.isArray(results) || results.length === 0) return '';
+  const lines = results.map((r, i) => `${i + 1}. ${r.title} — ${r.url}${r.snippet ? ' | ' + r.snippet : ''}`);
+  return 'Актуальные данные из веб-поиска («' + query + '»):\n' + lines.join('\n');
+}
+
+module.exports = { DDG_URL, decodeUrl, parseDdg, search, toContext, isObject };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "freegate",
-  "version": "0.6.17",
+  "version": "0.6.18",
   "description": "Free multi-provider LLM gateway with automatic failover. One OpenAI-compatible endpoint routes to 25 free models (Groq, Mistral, Gemini, NIM, OpenRouter, ZAI, Cerebras, DeepSeek). Never pay for LLMs.",
   "license": "MIT",
   "bin": {

package/server.js

@@ -9,6 +9,7 @@ const { checkRateLimit } = require('./lib/rateLimit');
 const { handleDashboard } = require('./lib/dashboard');
 const { acquire, stats: poolStats } = require('./lib/pool');
 const { aggregateSavings } = require('./lib/economics');
+const websearch = require('./lib/websearch');
 const { stripThink, cleanDelta, cleanMessage, fixReasoningMessage, isTooShort, MIN_ANSWER_LEN } = require('./lib/clean');
 const { classifyComplexity, maybeUpgradeTier, classifyVisionComplexity, needsWindowUpgrade } = require('./lib/routing');
 const { bucket, pick: banditPick, isTransientLimit } = require('./lib/bandit');
@@ -42,7 +43,10 @@ const warmed = warmBanditPriors(
 );
 if (warmed > 0) logger.info('Warmed bandit priors', { warmed });
 
-const cache = new LRUCache(500, 3600000, false, true); // 4th arg: semantic normalize ON
+// Диск-кэш: повторы промптов не жгут free-лимиты. TTL 24ч (чаты/агенты часто
+// переотправляют одинаковые запросы — ретраи, повторные вопросы; дневной кэш
+// снимает лишнюю нагрузку). Семантический normalize ON (4-й арг).
+const cache = new LRUCache(500, 24 * 3600 * 1000, false, true);
 require('./lib/cache')._activeCache = cache;
 
 // Load config (with fallback so a corrupt config never crashes the server)
@@ -95,6 +99,15 @@ const METHODOLOGY_CONFIG = Object.assign(
   (config.methodology && typeof config.methodology === 'object') ? config.methodology : {}
 );
 
+// --- Веб-поиск для search-задач ---
+// Бесплатный поиск фактов (DuckDuckGo, без ключа) для запросов-поиска, чтобы
+// модель не галлюцинировала («что такое минимакс дизайн» → реальная инфа про
+// MiniMax, а не «минимализм»). Только для search-задач. Сбои не ломают запрос.
+const WEBSEARCH_CONFIG = Object.assign(
+  { enabled: true, limit: 5, timeout: 8000, queryMinChars: 6 },
+  (config.websearch && typeof config.websearch === 'object') ? config.websearch : {}
+);
+
 // --- Самообновляющаяся база моделей (Model Discovery Engine) ---
 // Планировщик живёт внутри сервера: работает «всегда» у всех пользователей
 // пакета без cron/launchd. config.modelManager.enabled=false отключает.
@@ -456,6 +469,35 @@ async function handleChatCompletion(req, res, body) {
     }
   }
 
+  // --- Веб-поиск для search-задач ---
+  // Нашли факты из интернета (DuckDuckGo, без ключа) и подмешали как контекст,
+  // чтобы модель отвечала по существу, а не галлюцинировала. Только search.
+  // Любой сбой (нет сети/таймаут/пусто) = просто пропускаем, запрос идёт как есть.
+  let searchContext = '';
+  if (WEBSEARCH_CONFIG.enabled && (taskCategory === 'search' || taskCategory === 'chat')) {
+    try {
+      const userTexts = (body.messages || [])
+        .filter(m => m && m.role === 'user' && typeof m.content === 'string')
+        .map(m => m.content.trim());
+      const query = userTexts[userTexts.length - 1] || '';
+      if (query.length >= WEBSEARCH_CONFIG.queryMinChars) {
+        const results = await websearch.search(query, {
+          fetchImpl: (url, opts) => fetch(url, opts),
+          limit: WEBSEARCH_CONFIG.limit,
+          timeout: WEBSEARCH_CONFIG.timeout,
+        });
+        if (results.length > 0) {
+          searchContext = websearch.toContext(results, query);
+          measure.websearch = true;
+          body.messages.push({ role: 'system', content: searchContext });
+          logger.info('Websearch', { query: query.slice(0, 80), results: results.length });
+        }
+      }
+    } catch (err) {
+      logger.error('Websearch error', { message: err.message });
+    }
+  }
+
   // Replays a previously cached completion (exact or semantic hit), preserving
   // the stream/non-stream shape the client asked for.
   function serveCached(res, cached, isStreaming) {
@@ -578,12 +620,19 @@ async function handleChatCompletion(req, res, body) {
         // не исключая fallback. coding→coding, reasoning→reasoning, chat/search→general.
         const cat = provider.category || 'general';
         if (taskCategory === 'coding' && cat === 'coding') weight *= 1.5;
+        else if (taskCategory === 'design' && cat === 'coding') weight *= 1.6;
         else if (taskCategory === 'reasoning' && cat === 'reasoning') weight *= 1.5;
         else if ((taskCategory === 'chat' || taskCategory === 'search') && cat === 'general') weight *= 1.2;
+        // Дизайн — это UI-код: визуальные рекомендации идут от coding-моделей.
+        else if (taskCategory === 'design' && cat === 'reasoning') weight *= 0.4;
         // Простой факт/поиск не должен «думать вслух» на reasoning-модели:
         // это дорого по лимитам и даёт размышления вместо краткого ответа.
         if ((taskCategory === 'chat' || taskCategory === 'search') && cat === 'reasoning') weight *= 0.15;
         else if ((taskCategory === 'chat' || taskCategory === 'search') && cat === 'vision') weight *= 0.3;
+        // Поиск фактов — не кодинг-задача: codestral (coding) на вопросе
+        // «что такое минимакс дизайн» выдаёт рассуждение про «минимализм».
+        // Отдаём search на general-модели (minimax/small), а не на кодеров.
+        if (taskCategory === 'search' && cat === 'coding') weight *= 0.3;
         const dailyLimit = provider.dailyLimit || 0;
         // Провайдер, исчерпавший дневной лимит (попал в пул лишь как крайний
         // резерв, когда живы все выгорели), — сильно штрафуем, чтобы выбрать
@@ -634,13 +683,19 @@ async function handleChatCompletion(req, res, body) {
     const tLimit = (getStats().dailyUsage?.[targetProviderKey]?.[today]) || 0;
     const tCap = PROVIDERS[targetProviderKey].dailyLimit || 0;
     const targetBurned = tHealth?.status === 'ratelimited' || (tCap > 0 && tLimit >= tCap * 0.9);
-    if (!targetBurned) {
+    // Кодинг-target (codestral) не подходит для поиска фактов: на вопросе
+    // «что такое минимакс дизайн» он отвечает «минимализм», а не про нейросеть.
+    // Для search/chat-задач НЕ ставим кодинг-модель первой — пусть выберётся
+    // general-модель (minimax/small), которая отвечает по существу.
+    const targetIsCoding = (PROVIDERS[targetProviderKey].category || '') === 'coding';
+    const targetMismatch = (taskCategory === 'search' || taskCategory === 'chat') && targetIsCoding;
+    if (!targetBurned && !targetMismatch) {
       enabledProviders = [
         [targetProviderKey, PROVIDERS[targetProviderKey]],
         ...enabledProviders.filter(([k]) => k !== targetProviderKey),
       ];
     } else {
-      logger.info('Target-first skip', { key: targetProviderKey, status: tHealth?.status, used: tLimit, cap: tCap });
+      logger.info('Target-first skip', { key: targetProviderKey, status: tHealth?.status, used: tLimit, cap: tCap, mismatch: targetMismatch });
     }
   }