index.html

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>LOCKCODE — документация</title>
<style>
:root{
  color-scheme:dark;
  --bg:#161616;--panel:#1c1c1c;--code:#202020;--line:#2e2e2e;
  --text:#d4d4d4;--muted:#8a8a8a;--head:#f0f0f0;--accent:#bdbdbd;--hover:#262626;
  --side:248px;--rail:56px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 16px);scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

#side{position:fixed;top:env(safe-area-inset-top,0px);bottom:env(safe-area-inset-bottom,0px);left:0;width:var(--side);
  background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;
  transition:width .18s ease;overflow:hidden;z-index:5}
body.collapsed #side{width:var(--rail)}
.brand{display:flex;align-items:center;gap:10px;height:52px;padding:0 17px;border-bottom:1px solid var(--line);color:var(--head);font-weight:600;letter-spacing:.04em;white-space:nowrap}
nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px}
nav a{display:flex;align-items:center;gap:12px;height:38px;padding:0 10px;border-radius:6px;color:var(--muted);text-decoration:none;white-space:nowrap}
nav a:hover{background:var(--hover);color:var(--text)}
nav a.on{background:var(--hover);color:var(--head)}
#tog{display:flex;align-items:center;gap:12px;height:44px;margin:0;padding:0 18px;border:0;border-top:1px solid var(--line);
  background:none;color:var(--muted);font:inherit;cursor:pointer;white-space:nowrap;text-align:left}
#tog:hover{color:var(--text);background:var(--hover)}
#tog svg{transition:transform .18s ease}
body.collapsed #tog svg{transform:rotate(180deg)}
body.collapsed .brand span,body.collapsed nav a span,body.collapsed #tog span{display:none}
body.collapsed .brand,body.collapsed #tog{justify-content:center;padding:0}
body.collapsed nav a{justify-content:center;padding:0}

main{margin-left:var(--side);padding:40px 32px 80px;transition:margin-left .18s ease}
body.collapsed main{margin-left:var(--rail)}
.wrap{max-width:760px;margin:0 auto}
h1{margin:0 0 8px;font-size:30px;color:var(--head);letter-spacing:.02em}
h2{margin:0 0 14px;padding-top:6px;font-size:21px;color:var(--head);display:flex;align-items:center;gap:10px}
h2 svg{color:var(--muted)}
section{padding:28px 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0;padding-top:0}
p{margin:0 0 12px}
.lead{color:var(--muted);font-size:16px}
a{color:var(--accent)}
code{font:13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--code);border:1px solid var(--line);border-radius:4px;padding:1px 5px}

.cb{position:relative;margin:0 0 14px;background:var(--code);border:1px solid var(--line);border-radius:6px}
.cb pre{margin:0;padding:12px 52px 12px 14px;overflow-x:auto;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--text)}
.cb pre code{background:none;border:0;padding:0;font:inherit}
.cp{position:absolute;top:6px;right:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:5px;background:none;color:var(--muted);cursor:pointer}
.cp:hover{background:var(--hover);border-color:var(--line);color:var(--text)}
.cp.ok{color:#9ec59e}
.cp .ck{display:none}.cp.ok .ck{display:block}.cp.ok .cc{display:none}

.tw{overflow-x:auto;margin:0 0 14px;border:1px solid var(--line);border-radius:6px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:500;background:var(--panel)}
tr:last-child td{border-bottom:0}
td:first-child{white-space:nowrap}
td code{background:none;border:0;padding:0}
ol,ul{margin:0 0 12px;padding-left:22px}
li{margin:3px 0}
.note{border-left:2px solid #4a4a4a;padding:4px 14px;color:var(--muted);margin:0 0 14px}
.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.links a{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--text)}
.links a:hover{background:var(--hover)}
@media(max-width:700px){main{padding:24px 16px 60px}}
</style>
</head>
<body class="collapsed">

<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<defs>
<symbol id="i-lock" viewBox="0 0 24 24"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></symbol>
<symbol id="i-book" viewBox="0 0 24 24"><path d="M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z"/><path d="M4 21V5"/></symbol>
<symbol id="i-down" viewBox="0 0 24 24"><path d="M12 4v11"/><path d="m7 11 5 5 5-5"/><path d="M5 20h14"/></symbol>
<symbol id="i-play" viewBox="0 0 24 24"><path d="M7 4.5v15l12-7.5z"/></symbol>
<symbol id="i-term" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="m7 9 3 3-3 3"/><path d="M13 15h4"/></symbol>
<symbol id="i-chip" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2"/><path d="M9 2v4M15 2v4M9 18v4M15 18v4M2 9h4M2 15h4M18 9h4M18 15h4"/></symbol>
<symbol id="i-file" viewBox="0 0 24 24"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></symbol>
<symbol id="i-warn" viewBox="0 0 24 24"><path d="M12 3 2 20h20z"/><path d="M12 10v4"/><path d="M12 17.5v.5"/></symbol>
<symbol id="i-link" viewBox="0 0 24 24"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></symbol>
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3 5 6v5c0 4.5 3 8 7 10 4-2 7-5.5 7-10V6z"/><path d="m9 12 2 2 4-4"/></symbol>
<symbol id="i-copy" viewBox="0 0 24 24"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6a2 2 0 0 1 2-2h9"/></symbol>
<symbol id="i-check" viewBox="0 0 24 24"><path d="m5 12.5 4.5 4.5L19 7.5"/></symbol>
<symbol id="i-chev" viewBox="0 0 24 24"><path d="m14 7-5 5 5 5"/></symbol>
</defs>
</svg>

<aside id="side">
  <div class="brand"><svg class="i"><use href="#i-lock"/></svg><span>LOCKCODE</span></div>
  <nav id="nav">
    <a href="#overview" title="Обзор"><svg class="i"><use href="#i-book"/></svg><span>Обзор</span></a>
    <a href="#install" title="Установка"><svg class="i"><use href="#i-down"/></svg><span>Установка</span></a>
    <a href="#start" title="Первый запуск"><svg class="i"><use href="#i-play"/></svg><span>Первый запуск</span></a>
    <a href="#commands" title="Команды"><svg class="i"><use href="#i-term"/></svg><span>Команды</span></a>
    <a href="#providers" title="Провайдеры"><svg class="i"><use href="#i-chip"/></svg><span>Провайдеры</span></a>
    <a href="#config" title="Конфиг"><svg class="i"><use href="#i-file"/></svg><span>Конфиг</span></a>
    <a href="#license" title="Лицензия"><svg class="i"><use href="#i-shield"/></svg><span>Лицензия</span></a>
    <a href="#links" title="Ссылки"><svg class="i"><use href="#i-link"/></svg><span>Ссылки</span></a>
  </nav>
  <button id="tog" type="button" aria-label="Свернуть или развернуть список разделов"><svg class="i"><use href="#i-chev"/></svg><span>Свернуть</span></button>
</aside>

<main>
<div class="wrap">

<section id="overview">
  <h1>LOCKCODE</h1>
  <p class="lead">Терминальный AI-агент в стиле opencode: пиксельный логотип, карточка сессии, промпт и слэш-команды. Запросы уходят напрямую к провайдеру по OpenAI-совместимому API — без прокси и посредников.</p>
  <p>Пакет: <code>@zapl/lockcode</code>. Имя команды в терминале — <code>lockcode</code>.</p>
</section>

<section id="install">
  <h2><svg class="i"><use href="#i-down"/></svg>Установка</h2>
  <p>Требуется Node.js 14 или новее. Глобальная установка:</p>
  <div class="cb"><pre><code>npm install -g @zapl/lockcode</code></pre><button class="cp" type="button" aria-label="Копировать"><svg class="i cc"><use href="#i-copy"/></svg><svg class="i ck"><use href="#i-check"/></svg></button></div>
  <p>Запуск из любой директории:</p>
  <div class="cb"><pre><code>lockcode</code></pre><button class="cp" type="button" aria-label="Копировать"><svg class="i cc"><use href="#i-copy"/></svg><svg class="i ck"><use href="#i-check"/></svg></button></div>
  <p>Без глобальной установки:</p>
  <div class="cb"><pre><code>npx @zapl/lockcode</code></pre><button class="cp" type="button" aria-label="Копировать"><svg class="i cc"><use href="#i-copy"/></svg><svg class="i ck"><use href="#i-check"/></svg></button></div>
</section>

<section id="start">
  <h2><svg class="i"><use href="#i-play"/></svg>Первый запуск</h2>
  <ol>
    <li>Введите в терминал команду <code>lockcode</code>.</li>
    <li>Введите <code>/add</code> — провайдер, название модели, API-ключ.</li>
    <li>Напишите сообщение обычным текстом.</li>
  </ol>
  <div class="cb"><pre><code>/add</code></pre><button class="cp" type="button" aria-label="Копировать"><svg class="i cc"><use href="#i-copy"/></svg><svg class="i ck"><use href="#i-check"/></svg></button></div>
  <p>Ключ хранится локально в конфиге LOCKCODE и уходит только выбранному провайдеру.</p>
  <p>Пример сессии:</p>
  <div class="cb"><pre><code>User: Что такое GPT?

AI: GPT (Generative Pre-trained Transformer) — это тип нейросетевой
архитектуры и семейство языковых моделей, которые генерируют и понимают
текст.

Ключевые моменты:
• Генеративная: создаёт новый текст (ответы, код, статьи), а не только
  классифицирует готовый.
• Предобученная: сначала обучается на огромном массиве текстов, усваивая
  закономерности языка и факты.
• Transformer: использует архитектуру «трансформер» с механизмом внимания
  (attention) для учёта контекста в длинных последовательностях.
• Токены и вероятности: текст разбивается на токены; модель предсказывает
  следующий токен по вероятности, повторяя это шаг за шагом.
• Инструкции и RLHF: после предобучения дообучают на инструкциях и с
  помощью обратной связи от людей (RLHF), чтобы ответы были полезнее и
  безопаснее.
• Контекстное окно: модель «видит» ограниченный объём токенов диалога; всё
  за пределами окна забывается в рамках сессии.
• Сильные стороны: связная речь, программирование, суммаризация,
  объяснение сложных тем простым языком.
• Ограничения: возможны галлюцинации (ложные, но правдоподобные
  утверждения), зависимость от данных обучения, нет «понимания» как у
  человека, знания ограничены датой обучения.

Если нужно, могу привести примеры, где GPT особенно полезен, или объяснить
разницу между версиями (например, GPT-3.5, GPT-4) простыми словами.
──────────────────────────────────────────────────────────────────────────
DeepSeek V4.1 : 322 токенов</code></pre><button class="cp" type="button" aria-label="Копировать"><svg class="i cc"><use href="#i-copy"/></svg><svg class="i ck"><use href="#i-check"/></svg></button></div>
</section>

<section id="commands">
  <h2><svg class="i"><use href="#i-term"/></svg>Команды</h2>
  <p>Слэш-команды вводятся прямо в промпте.</p>
  <div class="tw"><table>
    <tr><th>Команда</th><th>Действие</th></tr>
    <tr><td><code>/help</code></td><td>Список вспомогательных команд</td></tr>
    <tr><td><code>/mode</code></td><td>Выбрать режим работы модели</td></tr>
    <tr><td><code>/modeagent</code></td><td>Выбрать режим работы агента</td></tr>
    <tr><td><code>/submodels</code></td><td>Модели провайдера и переключение</td></tr>
    <tr><td><code>/server</code></td><td>Общий прокси вместо локального ключа</td></tr>
    <tr><td><code>/models</code></td><td>Список доступных моделей</td></tr>
    <tr><td><code>/add</code></td><td>Добавить модель по API</td></tr>
    <tr><td><code>/model &lt;имя&gt;</code></td><td>Выбрать модель</td></tr>
    <tr><td><code>/model -del &lt;имя&gt;</code></td><td>Удалить модель из списка</td></tr>
    <tr><td><code>/chat</code></td><td>Выбрать чат из списка</td></tr>
    <tr><td><code>/cleanmemory</code></td><td>Очистить память</td></tr>
    <tr><td><code>/connectors</code></td><td>Доступ к сервисам</td></tr>
    <tr><td><code>/keyfile</code></td><td>Взять ключ из сервера</td></tr>
    <tr><td><code>/limits</code></td><td>Узнать лимиты моделей</td></tr>
    <tr><td><code>/folder</code></td><td>Сменить рабочую директорию</td></tr>
    <tr><td><code>/lang</code></td><td>Сменить язык</td></tr>
    <tr><td><code>/clear</code></td><td>Очистить строку состояния</td></tr>
    <tr><td><code>/exit</code></td><td>Завершить работу</td></tr>
  </table></div>
  <p>Примеры:</p>
  <div class="cb"><pre><code>/model deepseek-chat</code></pre><button class="cp" type="button" aria-label="Копировать"><svg class="i cc"><use href="#i-copy"/></svg><svg class="i ck"><use href="#i-check"/></svg></button></div>
  <div class="cb"><pre><code>/model -del deepseek-chat</code></pre><button class="cp" type="button" aria-label="Копировать"><svg class="i cc"><use href="#i-copy"/></svg><svg class="i ck"><use href="#i-check"/></svg></button></div>
  <p>Клавиши: <code>Ctrl+C</code> — выход, <code>↑</code> / <code>↓</code> — история ввода.</p>
</section>

<section id="providers">
  <h2><svg class="i"><use href="#i-chip"/></svg>Провайдеры</h2>
  <p>Поддерживаются OpenAI-совместимые API: OpenRouter, DeepSeek, OpenAI, Mistral, Gemini, GigaChat, а также любой свой эндпоинт через пункт <code>Custom</code>.</p>
  <p>Для <code>Custom</code> нужен базовый URL вида:</p>
  <div class="cb"><pre><code>https://host/v1</code></pre><button class="cp" type="button" aria-label="Копировать"><svg class="i cc"><use href="#i-copy"/></svg><svg class="i ck"><use href="#i-check"/></svg></button></div>
</section>

<section id="config">
  <h2><svg class="i"><use href="#i-file"/></svg>Где лежит конфиг</h2>
  <div class="tw"><table>
    <tr><th>ОС</th><th>Путь</th></tr>
    <tr><td>Windows</td><td><code>%APPDATA%\lockcode-nodejs\Config\config.json</code></td></tr>
    <tr><td>macOS</td><td><code>~/Library/Application Support/lockcode-nodejs/Config/config.json</code></td></tr>
    <tr><td>Linux</td><td><code>~/.config/lockcode-nodejs/config.json</code></td></tr>
  </table></div>
  <p>Linux:</p>
  <div class="cb"><pre><code>~/.config/lockcode-nodejs/config.json</code></pre><button class="cp" type="button" aria-label="Копировать"><svg class="i cc"><use href="#i-copy"/></svg><svg class="i ck"><use href="#i-check"/></svg></button></div>
  <p class="note">Ключи лежат в этом файле открытым текстом — не выкладывайте его в репозиторий.</p>
</section>

<section id="license">
  <h2><svg class="i"><use href="#i-shield"/></svg>Лицензия</h2>
  <p>MIT — см. <a href="https://github.com/ZAPL-corp/lockcode/blob/main/LICENSE" target="_blank" rel="noopener">LICENSE</a>.</p>
</section>

<section id="links">
  <h2><svg class="i"><use href="#i-link"/></svg>Ссылки</h2>
  <div class="links">
    <a href="https://github.com/ZAPL-corp/lockcode" target="_blank" rel="noopener"><svg class="i"><use href="#i-link"/></svg>GitHub</a>
    <a href="https://www.npmjs.com/package/@zapl/lockcode" target="_blank" rel="noopener"><svg class="i"><use href="#i-link"/></svg>npm</a>
    <a href="https://lockcode.pages.dev" target="_blank" rel="noopener"><svg class="i"><use href="#i-link"/></svg>Cloudflare Pages</a>
    <a href="https://zapl-corp.github.io/lockcode/" target="_blank" rel="noopener"><svg class="i"><use href="#i-link"/></svg>GitHub Pages</a>
  </div>
</section>

</div>
</main>

<script>
(function(){
  var body=document.body,label=document.querySelector('#tog span');
  function setC(c){body.classList.toggle('collapsed',c);label.textContent=c?'Развернуть':'Свернуть';}
  var saved=null;try{saved=localStorage.getItem('lc-side');}catch(e){}
  setC(saved?saved==='1':window.innerWidth<900);
  document.getElementById('tog').onclick=function(){
    var c=!body.classList.contains('collapsed');setC(c);
    try{localStorage.setItem('lc-side',c?'1':'0');}catch(e){}
  };

  document.querySelectorAll('.cp').forEach(function(b){
    b.onclick=function(){
      var t=b.parentNode.querySelector('code').innerText;
      function done(){b.classList.add('ok');setTimeout(function(){b.classList.remove('ok');},1400);}
      function fb(){var a=document.createElement('textarea');a.value=t;a.style.position='fixed';a.style.opacity='0';document.body.appendChild(a);a.select();try{document.execCommand('copy');done();}catch(e){}document.body.removeChild(a);}
      if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(t).then(done,fb);}else{fb();}
    };
  });

  var links=[].slice.call(document.querySelectorAll('#nav a'));
  var secs=links.map(function(a){return document.querySelector(a.getAttribute('href'));});
  function spy(){
    var y=window.scrollY+120,cur=0;
    secs.forEach(function(s,i){if(s.offsetTop<=y)cur=i;});
    if(window.innerHeight+window.scrollY>=document.body.scrollHeight-4)cur=secs.length-1;
    links.forEach(function(a,i){a.classList.toggle('on',i===cur);});
  }
  window.addEventListener('scroll',spy,{passive:true});spy();
})();
</script>
</body>
</html>