Bring back the external API keys

Commit 0dbb13f removed the whole feature: the apikeys tab, the /ui/apikeys
routes, requireApiKey, the /api/v1 router, the ApiKey type, the better-sqlite3
dependency and UI_DB_FILE in the CLI and the installer. Only the untracked
awg-ui/API.md survived, so the README went on to claim there was no key-based
API at all.

Restores all of it: ui.db with the api_keys table, awgk_ key generation storing
only the SHA-256 and a display prefix, the JWT-guarded CRUD, and the /api/v1
router mounted before the JWT proxy on /api so the key auth is not swallowed.
The tab comes back as its own folder and the registry picks it up on its own.
UI_DB_FILE points at /etc/amnezia/amneziawg/ui.db, outside the install tree, so
reinstalling keeps the keys; a fresh install moves the old one aside with its
WAL sidecars.

better-sqlite3 takes the slot of jsonwebtoken, which arrived with the MA7
integration and has been unused since 068cab4 removed it.

One defect is not reproduced: the /api/v1 handlers called ctrl() without a
try/catch, and Express 4 does not catch async rejections, so a single request
with awg-ctrl down killed the panel process. They now answer 502 like proxy()
already did.

The API contract is documented in the README rather than linked: .gitignore
excludes every markdown but README.md, so awg-ui/API.md is not in the repo and
the link would break on a clone.

Checked against a running server: login, key create/list/delete, 400 on a bad
label, 401 without a JWT, "API key required" rather than "Unauthorized" on
/api/v1, "Invalid API key" for a deleted key, last_used updating, and all three
/api/v1 routes returning 502 with the process still alive.

awg-ui/src/tabs/apikeys/apikeys.css

@@ -0,0 +1,77 @@
+/*
+Copyright (c) 2026 Ivan Vasilev
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+/* Стили вкладки «API-ключи». Общая дизайн-система — в App.css. */
+
+/* Открытый API-ключ (показывается один раз при создании) */
+.apikey-value {
+    font-family: var(--mono);
+    font-size: 13px;
+    color: var(--on-surface);
+    background: var(--surface-container);
+    border: 1px solid var(--outline-variant);
+    border-radius: 12px;
+    padding: 12px 14px;
+    width: 100%;
+    word-break: break-all;
+    user-select: all;
+}
+
+.apikey-cards-list { display: none; flex-direction: column; gap: 12px; }
+
+.apikey-count { font-size: 12px; color: var(--neutral-text); }
+.apikey-empty {
+    font-size: 14px;
+    color: var(--neutral-text);
+    text-align: center;
+    padding: 48px 0;
+}
+.apikey-card {
+    background: var(--surface-bright);
+    border: 1px solid var(--outline-variant);
+    border-radius: var(--r-card);
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.apikey-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+.apikey-card-title {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    min-width: 0;
+}
+.apikey-card-num   { font-size: 12px; color: var(--neutral-dot); flex-shrink: 0; }
+.apikey-card-label {
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--on-surface);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.apikey-card-prefix {
+    font-family: var(--mono);
+    font-size: 13px;
+    color: var(--neutral-text);
+    word-break: break-all;
+}
+.apikey-card-meta {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    font-size: 12px;
+    color: var(--neutral-text);
+}
+
+@media (max-width: 640px) {
+    .apikey-cards-list { display: flex; }
+}

awg-ui/src/tabs/apikeys/index.tsx

@@ -0,0 +1,148 @@
+// Copyright (c) 2026 Ivan Vasilev
+// This source code is licensed under the MIT license found in the
+// LICENSE file in the root directory of this source tree.
+import { useState, useEffect, useCallback } from 'react';
+import { apiFetch, copyText, timeAgo, type ApiKey, type PageProps } from '../../lib/shared';
+import { IcoPlus, IcoTrash, IcoCopy } from '../../components/icons';
+import './apikeys.css';
+
+// Вкладка «API-ключи»: ключи внешнего API (/api/v1). Открытый ключ показывается
+// один раз при создании (в БД хранится только хэш). Сервер-бар сверху рендерит App.
+//   TODO multi-server: сейчас сервер один (server_id = 0). Когда появится список
+//   серверов — ключ будет привязываться к выбранному в сервер-баре.
+export default function ApiKeysPage({ token, showMsg }: PageProps) {
+    const [keys, setKeys]       = useState<ApiKey[]>([]);
+    const [label, setLabel]     = useState('');
+    const [created, setCreated] = useState<{ label: string; key: string } | null>(null);
+
+    const load = useCallback(async () => {
+        try {
+            const data = await apiFetch('GET', '/ui/apikeys', token);
+            setKeys(data.keys ?? []);
+        } catch {
+            showMsg('Ошибка загрузки ключей');
+        }
+    }, [token, showMsg]);
+
+    const createKey = useCallback(async () => {
+        if (!label.trim()) return;
+        const r = await apiFetch('POST', '/ui/apikeys', token, { label: label.trim(), server_id: 0 });
+        if (r.error) { showMsg(r.error); return; }
+        setLabel('');
+        setCreated({ label: r.label, key: r.key });
+        await load();
+    }, [label, token, load, showMsg]);
+
+    const deleteKey = useCallback(async (id: number, lbl: string) => {
+        if (!confirm('Удалить ключ «' + lbl + '»? Клиенты с ним потеряют доступ.')) return;
+        await apiFetch('DELETE', '/ui/apikeys/' + id, token);
+        showMsg('Ключ удалён: ' + lbl);
+        await load();
+    }, [token, load, showMsg]);
+
+    useEffect(() => { if (token) load(); }, [token, load]);
+
+    return (
+        <>
+            {/* Сервер-бар сверху рендерит App; к выбранному в нём серверу и привязывается ключ.
+                TODO multi-server: server_id берётся из выбранной карточки (пока 0). */}
+            <div className="toolbar">
+                <input
+                    className="field"
+                    placeholder="Метка ключа (напр. ci-bot)"
+                    value={label}
+                    onChange={e => setLabel(e.target.value)}
+                    onKeyDown={e => e.key === 'Enter' && createKey()}
+                />
+                <div className="toolbar-btns">
+                    <button className="btn btn--primary" onClick={createKey}>
+                        <IcoPlus /> Создать ключ
+                    </button>
+                </div>
+            </div>
+
+            <div className="table-card">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>#</th>
+                            <th>Метка</th>
+                            <th>Ключ</th>
+                            <th>Создан</th>
+                            <th>Последний раз</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {keys.length === 0 ? (
+                            <tr><td colSpan={6} className="empty">Нет ключей</td></tr>
+                        ) : keys.map((k, i) => (
+                            <tr key={k.id}>
+                                <td className="td-num">{i + 1}</td>
+                                <td>{k.label}</td>
+                                <td className="td-mono">{k.prefix}</td>
+                                <td>{new Date(k.created_at * 1000).toLocaleDateString()}</td>
+                                <td>{k.last_used ? timeAgo(k.last_used) + ' назад' : 'никогда'}</td>
+                                <td className="td-actions">
+                                    <div className="actions">
+                                        <button
+                                            className="btn-icon btn-icon--danger"
+                                            title="Удалить ключ"
+                                            onClick={() => deleteKey(k.id, k.label)}
+                                        ><IcoTrash /></button>
+                                    </div>
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+
+            {/* Мобильный вид: таблица скрыта (.table-card), ключи — карточками */}
+            <div className="apikey-cards-list">
+                <p className="apikey-count">{keys.length} ключей</p>
+                {keys.length === 0 ? (
+                    <p className="apikey-empty">Нет ключей</p>
+                ) : keys.map((k, i) => (
+                    <div className="apikey-card" key={k.id}>
+                        <div className="apikey-card-header">
+                            <div className="apikey-card-title">
+                                <span className="apikey-card-num">#{i + 1}</span>
+                                <span className="apikey-card-label">{k.label}</span>
+                            </div>
+                            <button
+                                className="btn btn--danger btn--sq"
+                                aria-label="Удалить ключ"
+                                onClick={() => deleteKey(k.id, k.label)}
+                            ><IcoTrash /></button>
+                        </div>
+                        <code className="apikey-card-prefix">{k.prefix}</code>
+                        <div className="apikey-card-meta">
+                            <span>Создан {new Date(k.created_at * 1000).toLocaleDateString()}</span>
+                            <span>{k.last_used ? timeAgo(k.last_used) + ' назад' : 'не использован'}</span>
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {created && (
+                <div className="qr-backdrop" onClick={() => setCreated(null)}>
+                    <div className="qr-card" onClick={e => e.stopPropagation()}>
+                        <p className="qr-name">Ключ «{created.label}» создан</p>
+                        <p className="qr-hint">
+                            Скопируй ключ сейчас — он показывается один раз и больше не будет доступен.
+                        </p>
+                        <code className="apikey-value">{created.key}</code>
+                        <div className="qr-actions">
+                            <button className="btn btn--primary" onClick={async () => {
+                                await copyText(created.key);
+                                showMsg('Ключ скопирован');
+                            }}><IcoCopy /> Скопировать</button>
+                            <button className="btn btn--tonal" onClick={() => setCreated(null)}>Закрыть</button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+}

awg-ui/src/tabs/apikeys/metadata.json

@@ -0,0 +1,6 @@
+{
+  "id": "apikeys",
+  "label": "API-ключи",
+  "icon": "key",
+  "order": 2
+}