Этап 2: чат 1:1 — устройства, очередь, SSE, шифрование сообщений

Сервер: регистрация устройств и X-Device, hub с одним потоком на устройство,
очередь per-device с фан-аутом без эха отправителю, POST /api/messages
с проверками в порядке protocol.md, ACK, SSE с воспроизведением очереди,
ready и пингом раз в 20 секунд, контакты в обе стороны при первом сообщении,
лимит 30 сообщений в минуту.

Клиент: ULID, ключ 1:1 из ECDH через HKDF, шифрование конверта с AAD,
sync.js как единственный писатель в IndexedDB, ACK строго после записи,
список чатов, экран чата по эталону, разделители дат и «новые»,
pending и failed с повтором, полоса «нет соединения».

ADR-033: у неотправленного есть текст отказа — clock_skew стало видно.
ADR-034: входящее с известным id не перезаписывает запись. Собеседник знает
открытый id конверта и подменял им чужое сообщение в чужой истории — вплоть
до стирания своего присланного, чего «удалить у всех не существует» не допускает.
ADR-035: один поток событий на браузерный профиль (locks + BroadcastChannel):
две вкладки отбирали поток друг у друга и оставались без живой доставки.
ADR-036: повтор отправки сохраняет ULID, пока он в пределах окна часов, —
иначе потерянный ответ давал у собеседника два сообщения вместо одного.

Приёмка на боевом сервере: два аккаунта, пять устройств, живая доставка,
копия на второе устройство, очередь офлайн-устройству, ACK, подмена from
игнорируется, чужой deviceId и запрос без Origin отбиваются, плейнтекста
в базе и WAL ноль вхождений.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015DbCjVfTFq4ZFG8juD45YJ

web/js/ui/shell.js

@@ -1,19 +1,22 @@
 // Каркас: сайдбар со списком чатов и место под экран — docs/ui.md, «Каркас»
-// и «Список чатов». Чаты появятся на этапе 2, секции пока пустые.
+// и «Список чатов».
 
 import { el, mark } from "./dom.js";
+import { mount } from "./chats.js";
 
-// frame отдаёт корень и место под экран. screen — что показывать
-// на мобильном, где виден один экран за раз: "list" или "screen".
-export function frame(ctx, screen) {
+// frame отдаёт корень, место под экран и отписку списка чатов.
+// screen — что показывать на мобильном, где виден один экран за раз:
+// "list" или "screen". active — чат, который сейчас открыт.
+export function frame(ctx, screen, active = null) {
   const root = el("div", "shell");
   root.dataset.screen = screen;
   const main = el("main", "main");
-  root.append(side(ctx), main);
-  return { root, main };
+  const { nav, dispose } = side(ctx, active);
+  root.append(nav, main);
+  return { root, main, dispose };
 }
 
-function side(ctx) {
+function side(ctx, active) {
   const nav = el("nav", "side");
 
   const brand = el("div", "brand");
@@ -21,9 +24,11 @@ function side(ctx) {
   nav.append(brand);
 
   const list = el("div", "list");
-  for (const title of ["каналы", "личные"]) {
-    list.append(el("h2", "section", title), el("ul", "items"));
-  }
+  const add = el("button", "item item--new", "+ новый чат");
+  add.type = "button";
+  add.addEventListener("click", () => ctx.go("#/new"));
+  const items = el("div");
+  list.append(add, items);
   nav.append(list);
 
   const me = el("button", "me");
@@ -34,5 +39,5 @@ function side(ctx) {
   me.addEventListener("click", () => ctx.go("#/settings"));
   nav.append(me);
 
-  return nav;
+  return { nav, dispose: mount(items, ctx, active) };
 }