diff --git a/docs/superpowers/plans/2026-10-15-issue-card-modal.md b/docs/superpowers/plans/2026-10-15-issue-card-modal.md
new file mode 100644
index 0000000..4fcebbd
--- /dev/null
+++ b/docs/superpowers/plans/2026-10-15-issue-card-modal.md
@@ -0,0 +1,1949 @@
+# issue-card-modal — карточка задачи окном, комментарии из Jira — план хаба
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** карточка задачи веб-приложения открывается модальным окном поверх списка «Задачи» и доски, с понятной
+раскладкой (состояние задачи в шапке, связи по смыслу, заметки в режиме чтения, комментарии из Jira со скрытием);
+хаб хранит комментарии, присланные агентом v10, и отдаёт их вместе с темами и статусами связанных задач.
+
+**Architecture:** хаб — таблица `issue_comment` (схема v3), запись в `mirror.apply_state`, проверка формы в
+`h_agent_state`, расширенный `mirror.get_issue`, комментарии в MCP `issue`. Веб — маршрут верхнего уровня
+`{path: "*", element: <Layout/>}`; `Layout` рисует страницы через `useRoutes(PAGE_ROUTES, pageLocation)` с явным адресом
+страницы под окном (`location.state.background`) и окно `<dialog>` (`IssueModal` → `IssueCard`) при адресе
+`/issues/:key`. Логика без React — в `issues/modal.ts` (состояние истории) и `issues/card.ts` (группы связей,
+просрочка).
+
+**Tech Stack:** Python 3.13 (uv), stdlib `sqlite3`/`http.server`, pytest; React 19 + TypeScript, React Router 8.4,
+TanStack Query 5, Vitest 5 + Testing Library (jsdom 29), Playwright.
+
+**Spec:** `openspec/changes/issue-card-modal/` — `proposal.md`, `design.md` (решения 5–26, R-1…R-5), `specs/`
+(`data-model`, `hub-api`, `mcp`, `web-app`; `agent` — для jira-agent, план
+`../jira-agent/.wt/agent-v10/docs/superpowers/plans/2026-10-15-agent-v10-comments.md`, исполняется отдельно и раньше).
+
+**Worktree:** `/Users/andrey.epifancev/projects/awp-ca/jira-hub/.wt/issue-modal`, ветка `feat/37-issue-card-modal`.
+Все команды — из корня worktree (фронт — из `web/`). Живой хаб :8790 и `~/.local/share/jira-hub` не трогать; ручные
+проверки — только тестовый хаб `bash web/scripts/test-hub.sh` (:8791).
+
+## Global Constraints
+
+- Схема базы — v3 (`db.SCHEMA_VERSION = 3`); таблица `issue_comment (key, comment_id, author, created, updated, body)`,
+  `PRIMARY KEY (key, comment_id)`.
+- Комментарии задачи заменяются присланными, только если у задачи в состоянии есть поле `comments` (список); без поля —
+  не трогаются.
+- Неверная форма `comments` в `POST /agent/state` — 422 `bad_state`, текст называет ключ задачи и поле; пачка не
+  применяется целиком.
+- `GET /issues/{key}`: `comments` новые сверху (`created` убыв., затем `comment_id` как число убыв.), `epic_summary`,
+  у связей `summary` и `status` связанной задачи или `null`. Прежние поля не меняются.
+- MCP `issue`: «комментарии (N):», 5 последних, текст до 300 символов с «…», «ещё M»; без комментариев — «комментариев нет».
+- Тексты интерфейса — дословно как в спеке: «Зависит от», «Блокирует», «Связана с», «Прочие», «начало», «завершение»,
+  «нет в зеркале», «связей нет», «развернуть»/«свернуть», «Комментарии (N)», «Скрыть»/«Показать», «комментариев нет»,
+  «Править», «Отмена», «Отменить правки заметки?», «Прочие поля», «Команды моста (N)», «команд по задаче не было»,
+  «просрочено», «Открыть в Jira ↗», «Закрыть», «Задачи <key> нет в зеркале хаба.», «Есть несохранённые правки заметки.
+  Уйти без сохранения?».
+- Описание сворачивается свыше 8 строк; выбор «скрыто» у комментариев — `localStorage["jira-hub-comments-hidden"] = "1"`.
+- Окно: до 1000 px шириной, до 90vh высотой; уже 700 px — на всю ширину; уже 900 px — одна колонка (заметки, связи,
+  описание, комментарии, прочие поля, команды).
+- Новых npm-зависимостей нет.
+- Тесты: `uv run pytest` и `cd web && npm test` — зелёными считается только весь набор; перед коммитом каждой задачи
+  фронта — `cd web && npm run lint && npx tsc -b`.
+- Коммиты на русском, трейлер `Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>`.
+
+## Review Focus
+
+1. Фоновая страница не пересоздаётся при открытии и закрытии окна (фильтры, догруженные порции, прокрутка) — Task 4, тест «фон не пересоздаётся».
+2. Перезагрузка страницы с открытым окном: под окном та же страница, закрытие возвращает на неё — Task 6, e2e «прямой адрес» и первый тест `issues.spec.ts` (reload).
+3. Esc при несохранённой заметке не закрывает окно молча — Task 4, тест «Esc с несохранённой заметкой спрашивает».
+4. Комментарий с пустым текстом или без автора не ломает карточку — Task 5, тест «комментарий без автора и текста».
+5. Связь на задачу вне зеркала и тип связи вне `link_types` — Task 3 (`groupLinks`) и Task 5 (отрисовка «нет в зеркале»).
+
+---
+
+### Task 1: Комментарии в зеркале и расширенная карточка в хабе
+
+**Модель исполнителя:** haiku (готовый код).
+
+**Files:**
+- Modify: `src/jira_hub/db.py` (`SCHEMA_VERSION`, `SCHEMA`, `MIGRATIONS`)
+- Modify: `src/jira_hub/mirror.py` (`apply_state`, `get_issue`, новая `check_comments`)
+- Test: `tests/test_db.py`, `tests/test_mirror.py`, `tests/test_e2e_hub.py:78`
+
+**Interfaces:**
+- Produces: `mirror.check_comments(issues: list[dict]) -> None` (бросает `ValueError("<ключ>: comments[<i>].<поле> — …")`);
+  `mirror.get_issue` → дополнительно `epic_summary: str | None`, `comments: list[{comment_id, author, created, updated,
+  body}]`, у `links_out`/`links_in` — `summary`, `status`.
+
+- [ ] **Step 1: Падающие тесты схемы**
+
+В `tests/test_db.py` в `test_connect_creates_schema` заменить множество таблиц и версию:
+
+```python
+    assert {"setting", "issue", "issue_link", "issue_comment", "issue_note", "batch", "command", "sync_run",
+            "agent_status"} <= names
+    assert conn.execute("SELECT value FROM setting WHERE key = 'schema_version'").fetchone()["value"] == "3"
+```
+
+Во всём файле `tests/test_db.py` строки `... .fetchone()["value"] == "2"` (миграция v1 и два соединения) заменить на
+`== "3"`. После `test_migrates_v1_with_backup` добавить:
+
+```python
+def test_migrates_v2_with_backup(tmp_path):
+    """База v2 (без issue_comment) с задачей и заметкой → v3: копия schema-v2, таблица комментариев пустая, данные на месте."""
+    path = tmp_path / "hub.sqlite"
+    conn = db.connect(path)
+    conn.execute("INSERT INTO issue(key, summary, fetched_at) VALUES ('A-1', 'Т', '2026-10-15T00:00:00+00:00')")
+    conn.execute("INSERT INTO issue_note(key, fact_status) VALUES ('A-1', 'В работе')")
+    conn.execute("DROP TABLE issue_comment")
+    conn.execute("UPDATE setting SET value = '2' WHERE key = 'schema_version'")
+    conn.close()
+    conn = db.connect(path)
+    assert conn.execute("SELECT value FROM setting WHERE key = 'schema_version'").fetchone()["value"] == "3"
+    assert conn.execute("SELECT COUNT(*) AS n FROM issue_comment").fetchone()["n"] == 0
+    assert conn.execute("SELECT summary FROM issue WHERE key = 'A-1'").fetchone()["summary"] == "Т"
+    assert conn.execute("SELECT fact_status FROM issue_note WHERE key = 'A-1'").fetchone()["fact_status"] == "В работе"
+    copies = list((tmp_path / "backups").glob("*-schema-v2.sqlite"))
+    assert len(copies) == 1
+    conn.close()
+```
+
+- [ ] **Step 2: Падающие тесты зеркала**
+
+В `tests/test_mirror.py` заменить ожидания связей (строки 30, 31, 38):
+
+```python
+    assert got["links_out"] == [{"target_key": "A-2", "link_type": "ASUPR_Связанные", "summary": "Тема A-2",
+                                 "status": "Ожидание разработки"}]
+    assert mirror.get_issue(conn, "A-2")["links_in"] == [{"source_key": "A-1", "link_type": "ASUPR_Связанные",
+                                                          "summary": "Новая тема", "status": "Ожидание разработки"}]
+```
+
+и в `test_links_from_other_source_survive` (строка 38):
+
+```python
+    assert mirror.get_issue(conn, "A-1")["links_in"] == [{"source_key": "A-2", "link_type": "ASUPR_Связанные",
+                                                          "summary": "Тема A-2", "status": "Ожидание разработки"}]
+```
+
+В конец файла добавить:
+
+```python
+def comment(cid, created="2026-10-14T12:00:00.000+0300", **over):
+    base = {"id": cid, "author": "Петров Пётр", "created": created, "updated": created, "body": f"текст {cid}"}
+    base.update(over)
+    return base
+
+
+def test_comments_replaced_and_kept_without_field(conn):
+    mirror.apply_state(conn, [issue("A-1", comments=[comment("101"), comment("102")])], [])
+    mirror.apply_state(conn, [issue("A-1", comments=[comment("102", body="новый текст")])], [])
+    got = mirror.get_issue(conn, "A-1")["comments"]
+    assert [(c["comment_id"], c["body"]) for c in got] == [("102", "новый текст")]
+    mirror.apply_state(conn, [issue("A-1", summary="Без поля comments")], [])     # агент до v10
+    assert [c["comment_id"] for c in mirror.get_issue(conn, "A-1")["comments"]] == ["102"]
+    mirror.apply_state(conn, [issue("A-1", comments=[])], [])
+    assert mirror.get_issue(conn, "A-1")["comments"] == []
+
+
+def test_comments_newest_first_and_shape(conn):
+    mirror.apply_state(conn, [issue("A-1", comments=[
+        comment("9", created="2026-10-14T10:00:00.000+0300"),
+        comment("10", created="2026-10-15T10:00:00.000+0300", author=None, body=None),
+        comment("11", created="2026-10-15T10:00:00.000+0300")])], [])
+    got = mirror.get_issue(conn, "A-1")["comments"]
+    assert [c["comment_id"] for c in got] == ["11", "10", "9"]           # то же время — по номеру, как число
+    assert got[1] == {"comment_id": "10", "author": None, "created": "2026-10-15T10:00:00.000+0300",
+                      "updated": "2026-10-15T10:00:00.000+0300", "body": ""}
+
+
+def test_issue_epic_summary_and_absent_link(conn):
+    mirror.apply_state(conn, [issue("A-1", epic_key="E-1"), issue("E-1", summary="Эпик свода", epic_key=None)],
+                       [{"source_key": "A-1", "target_key": "Z-9", "link_type": "ASUPR_Связанные"}])
+    got = mirror.get_issue(conn, "A-1")
+    assert got["epic_summary"] == "Эпик свода"
+    assert got["links_out"] == [{"target_key": "Z-9", "link_type": "ASUPR_Связанные", "summary": None, "status": None}]
+    assert mirror.get_issue(conn, "E-1")["epic_summary"] is None
+
+
+@pytest.mark.parametrize("bad, field", [
+    ("x", "comments"), (["x"], "comments[0]"), ([{"id": "", "body": "т"}], "comments[0].id"),
+    ([{"id": 5, "body": "т"}], "comments[0].id"), ([{"id": "5", "body": 42}], "comments[0].body"),
+    ([{"id": "5", "body": "т", "author": 7}], "comments[0].author"),
+    ([{"id": "5", "body": "т", "created": 1}], "comments[0].created"),
+    ([{"id": "5", "body": "т", "updated": []}], "comments[0].updated"),
+])
+def test_check_comments_rejects(bad, field):
+    with pytest.raises(ValueError) as e:
+        mirror.check_comments([issue("A-1"), issue("A-2", comments=bad)])
+    assert str(e.value).startswith(f"A-2: {field}")
+
+
+def test_check_comments_accepts_missing_and_valid():
+    mirror.check_comments([issue("A-1"), issue("A-2", comments=[comment("1"), comment("2", author=None, body="")])])
+```
+
+В `tests/test_e2e_hub.py` строку 78 заменить на:
+
+```python
+    links_in = client.get("/issues/A-1")["links_in"]
+    assert [(l["source_key"], l["link_type"]) for l in links_in] == [("A-90", "ASUPR_Связанные")]
+```
+
+- [ ] **Step 3: Тесты падают**
+
+Run: `uv run pytest tests/test_db.py tests/test_mirror.py -q`
+Expected: FAIL — `issue_comment` нет в таблицах, версия `"2"`, `KeyError: 'comments'`, `AttributeError: module
+'jira_hub.mirror' has no attribute 'check_comments'`.
+
+- [ ] **Step 4: Схема v3**
+
+В `src/jira_hub/db.py`: `SCHEMA_VERSION = 3`. В `SCHEMA` после индекса `ix_issue_link_target` добавить:
+
+```sql
+CREATE TABLE IF NOT EXISTS issue_comment (
+    key        TEXT NOT NULL,
+    comment_id TEXT NOT NULL,
+    author     TEXT,
+    created    TEXT,
+    updated    TEXT,
+    body       TEXT NOT NULL DEFAULT '',
+    PRIMARY KEY (key, comment_id)
+);
+```
+
+В `MIGRATIONS` добавить шаг (таблицу создаёт `SCHEMA` через `CREATE TABLE IF NOT EXISTS` до миграции; шаг нужен, чтобы
+цикл миграции дошёл до версии 3):
+
+```python
+    2: [],   # v2 → v3: issue_comment создаётся SCHEMA (CREATE TABLE IF NOT EXISTS), данных переносить не нужно
+```
+
+- [ ] **Step 5: Запись, проверка и чтение комментариев**
+
+В `src/jira_hub/mirror.py` заменить строку документации модуля на:
+
+```python
+"""Зеркало задач Jira (issue, issue_link, issue_comment) и служебные заметки (issue_note).
+Зеркало пишет только загрузка состояния от агента; заметки обновление зеркала не трогает."""
+```
+
+После `NOTE_FIELDS` добавить:
+
+```python
+def check_comments(issues) -> None:
+    """Форма поля comments у задач состояния (агент v10+); поле необязательно. Нарушение — ValueError с ключом и полем."""
+    for it in issues:
+        if "comments" not in it:
+            continue
+        key, lst = it.get("key"), it["comments"]
+        if not isinstance(lst, list):
+            raise ValueError(f"{key}: comments — список комментариев")
+        for n, c in enumerate(lst):
+            where = f"{key}: comments[{n}]"
+            if not isinstance(c, dict):
+                raise ValueError(f"{where} — объект комментария")
+            if not isinstance(c.get("id"), str) or not c["id"]:
+                raise ValueError(f"{where}.id — непустая строка")
+            if not isinstance(c.get("body"), str) and c.get("body") is not None:
+                raise ValueError(f"{where}.body — строка")
+            for f in ("author", "created", "updated"):
+                if c.get(f) is not None and not isinstance(c[f], str):
+                    raise ValueError(f"{where}.{f} — строка или null")
+```
+
+В `apply_state`, внутри цикла `for it in issues:` после `keys.append(it["key"])` добавить:
+
+```python
+            if isinstance(it.get("comments"), list):      # без поля (агент до v10) комментарии не трогаем
+                conn.execute("DELETE FROM issue_comment WHERE key = ?", (it["key"],))
+                conn.executemany(
+                    "INSERT OR REPLACE INTO issue_comment(key, comment_id, author, created, updated, body) "
+                    "VALUES (?, ?, ?, ?, ?, ?)",
+                    [(it["key"], c["id"], c.get("author"), c.get("created"), c.get("updated"), c.get("body") or "")
+                     for c in it["comments"]])
+```
+
+В `get_issue` заменить блок от `d["links_out"] = ...` до `d["note"] = get_note(conn, key)` на:
+
+```python
+    epic = conn.execute("SELECT summary FROM issue WHERE key = ?", (d["epic_key"],)).fetchone() if d.get("epic_key") else None
+    d["epic_summary"] = epic["summary"] if epic else None
+    d["links_out"] = [dict(r) for r in conn.execute(
+        "SELECT l.target_key, l.link_type, i.summary, i.status FROM issue_link l LEFT JOIN issue i ON i.key = l.target_key "
+        "WHERE l.source_key = ? ORDER BY l.link_type, l.target_key", (key,))]
+    d["links_in"] = [dict(r) for r in conn.execute(
+        "SELECT l.source_key, l.link_type, i.summary, i.status FROM issue_link l LEFT JOIN issue i ON i.key = l.source_key "
+        "WHERE l.target_key = ? ORDER BY l.link_type, l.source_key", (key,))]
+    d["comments"] = [dict(r) for r in conn.execute(
+        "SELECT comment_id, author, created, updated, body FROM issue_comment WHERE key = ? "
+        "ORDER BY created DESC, CAST(comment_id AS INTEGER) DESC, comment_id DESC", (key,))]
+    d["note"] = get_note(conn, key)
+```
+
+- [ ] **Step 6: Тесты проходят, весь набор зелёный**
+
+Run: `uv run pytest tests/test_db.py tests/test_mirror.py tests/test_e2e_hub.py -q`
+Expected: PASS.
+
+Run: `uv run pytest -q`
+Expected: все тесты зелёные, кроме `tests/test_api.py` строки 75 (ожидание `links_out` без `summary`) — его правит
+Task 2. Если упало что-то ещё — чинить в этой задаче.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add src/jira_hub/db.py src/jira_hub/mirror.py tests/test_db.py tests/test_mirror.py tests/test_e2e_hub.py
+git commit -m "feat(hub): комментарии задач в зеркале, схема v3; темы и статусы связанных в карточке (#37)
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>"
+```
+
+### Task 2: Проверка состояния от агента и комментарии в MCP
+
+**Модель исполнителя:** haiku (готовый код).
+
+**Files:**
+- Modify: `src/jira_hub/api.py` (`h_agent_state`)
+- Modify: `src/jira_hub/mcp_server.py` (`fmt_issue`)
+- Test: `tests/test_api.py`, `tests/test_mcp.py`
+
+**Interfaces:**
+- Consumes: Task 1 — `mirror.check_comments`, `comments`/`epic_summary`/`summary`/`status` в `get_issue`.
+- Produces: 422 `bad_state` у `POST /agent/state`; строки комментариев в `fmt_issue`.
+
+- [ ] **Step 1: Падающие тесты API**
+
+В `tests/test_api.py` строку 75 заменить на:
+
+```python
+    assert issue["links_out"] == [{"target_key": "B-1", "link_type": "ASUPR_Связанные", "summary": "Сосед", "status": None}]
+```
+
+В конец файла добавить:
+
+```python
+def test_agent_state_comments_validated_whole_batch(hub):
+    a, c = hub["agent"], hub["client"]
+    a.post("/agent/state", {"issues": [{"key": "X-1", "summary": "Икс", "labels": []}], "links": []})
+    with pytest.raises(HubError) as e:
+        a.post("/agent/state", {"issues": [{"key": "X-1", "summary": "Икс новый", "labels": []},
+                                           {"key": "Y-1", "summary": "Игрек", "labels": [],
+                                            "comments": [{"id": "7", "body": 42}]}], "links": []})
+    assert e.value.status == 422 and e.value.error == "bad_state"
+    assert "Y-1" in e.value.detail and "body" in e.value.detail
+    assert c.get("/issues/X-1")["summary"] == "Икс"                     # пачка не применена целиком
+    with pytest.raises(HubError) as e:
+        c.get("/issues/Y-1")
+    assert e.value.status == 404
+
+
+def test_issue_detail_with_comments(hub):
+    hub["agent"].post("/agent/state", {"issues": [
+        {"key": "A-1", "summary": "Схема", "labels": [], "epic_key": "E-1", "comments": [
+            {"id": "1", "author": "Петров Пётр", "created": "2026-10-14T12:00:00.000+0300", "updated": None, "body": "старый"},
+            {"id": "2", "author": None, "created": "2026-10-15T12:00:00.000+0300", "updated": None, "body": "новый"}]},
+        {"key": "E-1", "summary": "Эпик", "labels": []}], "links": []})
+    got = hub["client"].get("/issues/A-1")
+    assert [x["body"] for x in got["comments"]] == ["новый", "старый"]
+    assert got["epic_summary"] == "Эпик"
+```
+
+- [ ] **Step 2: Падающий тест MCP**
+
+В `tests/test_mcp.py` в конец файла добавить:
+
+```python
+def _detail(**over):
+    d = {"key": "A-1", "summary": "Т", "labels": [], "links_out": [], "links_in": [], "note": None, "commands": [],
+         "comments": [], "description": None}
+    d.update(over)
+    return d
+
+
+def test_fmt_issue_comments():
+    assert "комментариев нет" in mcp_server.fmt_issue(_detail())
+    comments = [{"comment_id": str(n), "author": f"Автор {n}", "created": f"2026-10-1{n}T12:00:00.000+0300",
+                 "updated": None, "body": ("д" * 500 if n == 7 else f"текст {n}\nстрока")} for n in range(7, 0, -1)]
+    text = mcp_server.fmt_issue(_detail(comments=comments))
+    assert "комментарии (7):" in text
+    assert "д" * 299 + "…" in text and "д" * 300 not in text          # самый новый — первым, обрезан до 300
+    assert "Автор 3" in text and "Автор 2" not in text               # 5 последних: 7…3
+    assert "ещё 2" in text
+    assert text.index("заметки:") < text.index("комментарии (7):") < text.index("команды:")
+    no_author = mcp_server.fmt_issue(_detail(comments=[{"comment_id": "1", "author": None, "created": None,
+                                                         "updated": None, "body": ""}]))
+    assert "комментарии (1):" in no_author and "ещё" not in no_author
+```
+
+- [ ] **Step 3: Тесты падают**
+
+Run: `uv run pytest tests/test_api.py tests/test_mcp.py -q`
+Expected: FAIL — 422 не возвращается (пачка применяется), в `fmt_issue` нет «комментариев нет».
+
+- [ ] **Step 4: Реализация**
+
+В `src/jira_hub/api.py` заменить `h_agent_state` целиком:
+
+```python
+def h_agent_state(hub, conn, m, q, body):
+    issues = body.get("issues") or []
+    try:
+        mirror.check_comments(issues)        # до записи: неверная пачка не применяется целиком
+    except ValueError as e:
+        raise ApiError(422, "bad_state", str(e))
+    with db.transaction(conn):
+        out = mirror.apply_state(conn, issues, body.get("links") or [], body.get("neighbor_keys") or [],
+                                 authoritative=queue.is_full_refresh(conn, body.get("command_id")))
+        if body.get("command_id"):
+            queue.record_state(conn, body["command_id"], out["issues"], out["links"])
+    return 200, out
+```
+
+В `src/jira_hub/mcp_server.py` в `fmt_issue` заменить строку `return "\n".join(head + ...` (две строки до конца
+функции) на:
+
+```python
+    comments = d.get("comments") or []
+    if comments:
+        shown = [f"  {_v(c.get('author'))} {_v(c.get('created'))}: {_cut(c.get('body'), 300)}" for c in comments[:5]]
+        cmts = [f"комментарии ({len(comments)}):"] + shown + ([f"  ещё {len(comments) - 5}"] if len(comments) > 5 else [])
+    else:
+        cmts = ["комментариев нет"]
+    return "\n".join(head + ["связи:"] + (links or ["  —"]) + ["заметки:"] + (notes or ["  —"]) + cmts
+                     + ["команды:"] + (cmds or ["  —"]) + ["описание:", d.get("description") or "—"])
+```
+
+- [ ] **Step 5: Весь набор зелёный**
+
+Run: `uv run pytest -q`
+Expected: все тесты зелёные.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/jira_hub/api.py src/jira_hub/mcp_server.py tests/test_api.py tests/test_mcp.py
+git commit -m "feat(hub): проверка комментариев в POST /agent/state (422 bad_state), комментарии в MCP issue (#37)
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>"
+```
+
+### Task 3: Данные карточки во фронте: типы, группы связей, просрочка, состояние окна
+
+**Модель исполнителя:** haiku (готовый код).
+
+**Files:**
+- Modify: `web/src/api/types.ts` (`IssueDetail`, новые `IssueLinkOut`, `IssueLinkIn`, `IssueComment`)
+- Create: `web/src/issues/card.ts`, `web/src/issues/card.test.ts`
+- Create: `web/src/issues/modal.ts`, `web/src/issues/modal.test.ts`
+- Create: `web/src/issues/commentsPref.ts`
+- Create: `web/src/test/issueFixtures.ts`
+- Modify: `web/src/test/setup.ts` (замена `showModal`/`close` для jsdom)
+- Modify: `web/src/issues/IssuePage.test.tsx` (фабрика из `issueFixtures.ts`)
+
+**Interfaces:**
+- Produces (`card.ts`): `type LinkGroupId = "depends" | "blocks" | "related" | "other"`;
+  `interface CardLink { key: string; summary: string | null; status: string | null; tag: string | null }`;
+  `groupLinks(d: Pick<IssueDetail, "links_out" | "links_in">, linkTypes: Record<string, string>): [LinkGroupId, string, CardLink[]][]`;
+  `factClass(fact: string | null | undefined, statusLabels: Record<string, string> | undefined): string | null`;
+  `isOverdue(due: string, fact: string | null | undefined, statusLabels: Record<string, string> | undefined, today: string): boolean`;
+  `todayISO(d?: Date): string`.
+- Produces (`modal.ts`): `interface Background { pathname: string; search: string }`;
+  `interface CardState { background: Background; depth: number; direct: boolean }`; `LIST_BACKGROUND`;
+  `BOARD_CARD_STATE: CardState`; `cardState(s: unknown): CardState | null`;
+  `openCardState(loc: { pathname: string; search: string; state: unknown }): CardState`.
+- Produces (`commentsPref.ts`): `useCommentsHidden(): [boolean, (hidden: boolean) => void]`, ключ `COMMENTS_HIDDEN_KEY`.
+- Produces (`test/issueFixtures.ts`): `note(over?)`, `issue(key, over?)` — `IssueDetail` для тестов.
+
+- [ ] **Step 1: Типы**
+
+В `web/src/api/types.ts` заменить `IssueDetail` на:
+
+```ts
+export interface IssueLinkOut { target_key: string; link_type: string; summary: string | null; status: string | null }
+export interface IssueLinkIn { source_key: string; link_type: string; summary: string | null; status: string | null }
+// комментарий задачи из Jira (зеркало хаба, агент v10+): текст и время — как в Jira
+export interface IssueComment { comment_id: string; author: string | null; created: string | null; updated: string | null; body: string }
+export interface IssueDetail extends IssueRow {
+  epic_summary: string | null;
+  links_out: IssueLinkOut[];
+  links_in: IssueLinkIn[];
+  note: Note | null;
+  commands: IssueCommand[];
+  comments: IssueComment[];
+}
+```
+
+- [ ] **Step 2: Общие тестовые данные и `<dialog>` в jsdom**
+
+Создать `web/src/test/issueFixtures.ts`:
+
+```ts
+import type { IssueDetail, Note } from "../api/types.ts";
+
+export const note = (over: Partial<Note> = {}): Note => ({
+  key: "AURORA-9001", fact_status: "В работе", work_kind: "разработка", done_text: "схема", rest_text: "API",
+  owner_note: null, updated_at: "2026-10-14T09:00:00+00:00", updated_by: "chat", ...over,
+});
+
+export const issue = (key: string, over: Partial<IssueDetail> = {}): IssueDetail => ({
+  key, id: "1", issue_type: "Задача", summary: `Тема ${key}`, description: "строка 1\nстрока 2", status: "В работе",
+  priority: "Высокий", assignee: "Иванов Иван Иванович", reporter: "me", duedate: null, planned_start: null,
+  planned_end: "2026-10-20", epic_key: "AURORA-9100", epic_summary: "Тестовый эпик", labels: ["kind-dev"],
+  sprint: "AWPCA_Спринт 2", created: null, jira_updated: null, fetched_at: "", neighbor: false,
+  links_out: [{ target_key: "AURORA-9002", link_type: "ASUPR_Блокер_Начала", summary: "API свода", status: "Новая" }],
+  links_in: [{ source_key: "AURORA-9003", link_type: "Duplicate", summary: "Макет экрана", status: "Готово" }],
+  note: note({ key }),
+  commands: [{ id: 5, batch_id: 2, type: "ensure_fields", status: "done", finished_at: "2026-10-14T09:00:00+00:00", error: null }],
+  comments: [],
+  ...over,
+});
+```
+
+В `web/src/issues/IssuePage.test.tsx` удалить локальные `const note = …` и `const issue = …` (строки 13–25) и добавить
+импорт `import { issue, note } from "../test/issueFixtures.ts";`.
+
+В `web/src/test/setup.ts` после импортов добавить:
+
+```ts
+// jsdom 29 не умеет showModal/close у <dialog>: открытость — атрибут open, как в браузере
+if (typeof HTMLDialogElement !== "undefined" && !HTMLDialogElement.prototype.showModal) {
+  HTMLDialogElement.prototype.showModal = function showModal(this: HTMLDialogElement) { this.setAttribute("open", ""); };
+  HTMLDialogElement.prototype.close = function close(this: HTMLDialogElement) { this.removeAttribute("open"); };
+}
+```
+
+- [ ] **Step 3: Падающие тесты логики**
+
+Создать `web/src/issues/card.test.ts`:
+
+```ts
+import { describe, expect, it } from "vitest";
+import settings from "../board/__fixtures__/settings.json";
+import { factClass, groupLinks, isOverdue, todayISO } from "./card.ts";
+
+const types = settings.link_types as Record<string, string>;
+const labels = { ...(settings.status_labels as Record<string, string>), "Снято": "fact-cancelled" };
+const out = (k: string, t: string, s: string | null = `Тема ${k}`, st: string | null = "В работе") => ({ target_key: k, link_type: t, summary: s, status: st });
+const inn = (k: string, t: string, s: string | null = `Тема ${k}`, st: string | null = "В работе") => ({ source_key: k, link_type: t, summary: s, status: st });
+
+describe("groupLinks", () => {
+  it("блокеры по направлению, связанные без повторов, прочие с направлением; порядок групп и ключей", () => {
+    const g = groupLinks({
+      links_out: [out("A-10", "ASUPR_Блокер_Завершения"), out("A-2", "ASUPR_Блокер_Начала"), out("A-5", "ASUPR_Связанные"),
+        out("A-7", "Duplicate")],
+      links_in: [inn("A-3", "ASUPR_Блокер_Начала"), inn("A-5", "ASUPR_Связанные"), inn("A-8", "Duplicate", null, null)],
+    }, types);
+    expect(g.map(([id, title]) => [id, title])).toEqual([["depends", "Зависит от"], ["blocks", "Блокирует"],
+      ["related", "Связана с"], ["other", "Прочие"]]);
+    expect(g[0][2]).toEqual([{ key: "A-3", summary: "Тема A-3", status: "В работе", tag: "начало" }]);
+    expect(g[1][2].map((l) => [l.key, l.tag])).toEqual([["A-2", "начало"], ["A-10", "завершение"]]);   // ключи как числа
+    expect(g[2][2].map((l) => l.key)).toEqual(["A-5"]);
+    expect(g[3][2]).toEqual([{ key: "A-7", summary: "Тема A-7", status: "В работе", tag: "→ Duplicate" },
+      { key: "A-8", summary: null, status: null, tag: "← Duplicate" }]);
+  });
+
+  it("пустые группы не возвращаются; без link_types всё — «Прочие» с именем Jira", () => {
+    expect(groupLinks({ links_out: [], links_in: [] }, types)).toEqual([]);
+    const g = groupLinks({ links_out: [out("A-2", "ASUPR_Блокер_Начала")], links_in: [] }, {});
+    expect(g).toEqual([["other", "Прочие", [{ key: "A-2", summary: "Тема A-2", status: "В работе", tag: "→ ASUPR_Блокер_Начала" }]]]);
+  });
+
+  it("логический тип из настроек вне трёх известных — «Прочие» с логическим именем", () => {
+    const g = groupLinks({ links_out: [out("A-2", "X_Дубль")], links_in: [] }, { ...types, "дублирует": "X_Дубль" });
+    expect(g[0][2][0].tag).toBe("→ дублирует");
+  });
+});
+
+describe("просрочка и класс статуса по факту", () => {
+  it("класс из status_labels", () => {
+    expect(factClass("Готово — закрыть", labels)).toBe("fact-done");
+    expect(factClass("свой статус", labels)).toBeNull();
+    expect(factClass(null, labels)).toBeNull();
+  });
+  it("срок раньше сегодня и не закрыта по факту — просрочено (R-2)", () => {
+    expect(isOverdue("2026-10-14", "В работе", labels, "2026-10-15")).toBe(true);
+    expect(isOverdue("2026-10-14", null, labels, "2026-10-15")).toBe(true);
+    expect(isOverdue("2026-10-15", "В работе", labels, "2026-10-15")).toBe(false);
+    expect(isOverdue("2026-10-14", "Готово — закрыть", labels, "2026-10-15")).toBe(false);
+    expect(isOverdue("2026-10-14", "Снято", labels, "2026-10-15")).toBe(false);
+    expect(isOverdue("", "В работе", labels, "2026-10-15")).toBe(false);
+  });
+  it("todayISO — местная дата YYYY-MM-DD", () => {
+    expect(todayISO(new Date(2026, 0, 5, 23, 30))).toBe("2026-01-05");
+  });
+});
+```
+
+Создать `web/src/issues/modal.test.ts`:
+
+```ts
+import { describe, expect, it } from "vitest";
+import { BOARD_CARD_STATE, cardState, LIST_BACKGROUND, openCardState } from "./modal.ts";
+
+describe("состояние окна в истории", () => {
+  it("со страницы — фон = адрес страницы, глубина 1", () => {
+    expect(openCardState({ pathname: "/issues", search: "?sprint=S", state: null }))
+      .toEqual({ background: { pathname: "/issues", search: "?sprint=S" }, depth: 1, direct: false });
+  });
+  it("из окна — тот же фон, глубина + 1, признак прямого адреса сохраняется", () => {
+    const s = { background: LIST_BACKGROUND, depth: 0, direct: true };
+    expect(openCardState({ pathname: "/issues/A-1", search: "", state: s })).toEqual({ background: LIST_BACKGROUND, depth: 1, direct: true });
+    expect(openCardState({ pathname: "/issues/A-2", search: "", state: BOARD_CARD_STATE }))
+      .toEqual({ background: { pathname: "/board", search: "" }, depth: 2, direct: false });
+  });
+  it("чужое или битое state — не состояние окна", () => {
+    expect(cardState(null)).toBeNull();
+    expect(cardState({ background: "/issues", depth: 1 })).toBeNull();
+    expect(cardState({ background: { pathname: "/issues", search: "" }, depth: "1" })).toBeNull();
+    expect(cardState({ background: { pathname: "/issues", search: "" }, depth: 1 }))
+      .toEqual({ background: { pathname: "/issues", search: "" }, depth: 1, direct: false });
+  });
+});
+```
+
+Run: `cd web && npx vitest run src/issues/card.test.ts src/issues/modal.test.ts`
+Expected: FAIL — `Failed to resolve import "./card.ts"` и `"./modal.ts"`.
+
+- [ ] **Step 4: Реализация логики**
+
+Создать `web/src/issues/card.ts`:
+
+```ts
+import type { IssueDetail } from "../api/types.ts";
+
+export type LinkGroupId = "depends" | "blocks" | "related" | "other";
+export interface CardLink { key: string; summary: string | null; status: string | null; tag: string | null }
+
+const GROUPS: [LinkGroupId, string][] = [["depends", "Зависит от"], ["blocks", "Блокирует"], ["related", "Связана с"], ["other", "Прочие"]];
+const BLOCK_TAGS: Record<string, string> = { "блокирует начало": "начало", "блокирует завершение": "завершение" };
+const byKey = (a: CardLink, b: CardLink) =>
+  a.key.localeCompare(b.key, "ru", { numeric: true }) || (a.tag ?? "").localeCompare(b.tag ?? "", "ru");
+
+// связи карточки по смыслу (design 17): логическое имя типа — из link_types настроек (имя типа Jira → логическое)
+export function groupLinks(d: Pick<IssueDetail, "links_out" | "links_in">, linkTypes: Record<string, string>): [LinkGroupId, string, CardLink[]][] {
+  const logical = new Map(Object.entries(linkTypes).map(([name, jira]) => [jira, name]));
+  const groups: Record<LinkGroupId, CardLink[]> = { depends: [], blocks: [], related: [], other: [] };
+  const add = (dir: "out" | "in", key: string, jiraType: string, summary: string | null, status: string | null) => {
+    const name = logical.get(jiraType);
+    if (name && BLOCK_TAGS[name]) groups[dir === "in" ? "depends" : "blocks"].push({ key, summary, status, tag: BLOCK_TAGS[name] });
+    else if (name === "связанные") { if (!groups.related.some((l) => l.key === key)) groups.related.push({ key, summary, status, tag: null }); }
+    else groups.other.push({ key, summary, status, tag: `${dir === "out" ? "→" : "←"} ${name ?? jiraType}` });
+  };
+  for (const l of d.links_out) add("out", l.target_key, l.link_type, l.summary, l.status);
+  for (const l of d.links_in) add("in", l.source_key, l.link_type, l.summary, l.status);
+  return GROUPS.filter(([id]) => groups[id].length).map(([id, title]) => [id, title, groups[id].sort(byKey)]);
+}
+
+const CLOSED_FACT = new Set(["fact-done", "fact-cancelled"]);
+export const factClass = (fact: string | null | undefined, statusLabels: Record<string, string> | undefined): string | null =>
+  (fact && statusLabels?.[fact]) || null;
+
+// R-2: просрочено — срок раньше сегодня, а статус по факту не «закрыт» (классы fact-done, fact-cancelled)
+export function isOverdue(due: string, fact: string | null | undefined, statusLabels: Record<string, string> | undefined, today: string): boolean {
+  if (!due || due >= today) return false;
+  const cls = factClass(fact, statusLabels);
+  return !(cls && CLOSED_FACT.has(cls));
+}
+
+export const todayISO = (d = new Date()): string =>
+  `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+```
+
+Создать `web/src/issues/modal.ts`:
+
+```ts
+// состояние окна карточки в записи истории (design 10–12): страница под окном, сколько записей заняли карточки
+// поверх неё, открыто ли окно прямым адресом
+export interface Background { pathname: string; search: string }
+export interface CardState { background: Background; depth: number; direct: boolean }
+
+export const LIST_BACKGROUND: Background = { pathname: "/issues", search: "" };
+// доска не хранит состояние в адресе: «ⓘ» всегда открывает окно поверх /board
+export const BOARD_CARD_STATE: CardState = { background: { pathname: "/board", search: "" }, depth: 1, direct: false };
+
+export function cardState(s: unknown): CardState | null {
+  const c = s as { background?: { pathname?: unknown; search?: unknown }; depth?: unknown; direct?: unknown } | null;
+  if (!c || typeof c !== "object" || !c.background || typeof c.background !== "object") return null;
+  const { pathname, search } = c.background;
+  if (typeof pathname !== "string" || typeof search !== "string" || typeof c.depth !== "number") return null;
+  return { background: { pathname, search }, depth: c.depth, direct: c.direct === true };
+}
+
+// state ссылки на карточку: со страницы — фон = её адрес, глубина 1; из окна — тот же фон, глубина + 1
+export function openCardState(loc: { pathname: string; search: string; state: unknown }): CardState {
+  const cur = cardState(loc.state);
+  return cur ? { ...cur, depth: cur.depth + 1 } : { background: { pathname: loc.pathname, search: loc.search }, depth: 1, direct: false };
+}
+```
+
+Создать `web/src/issues/commentsPref.ts`:
+
+```ts
+import { useState } from "react";
+
+// выбор «комментарии скрыты» — один на все карточки, в браузере (design 19); без localStorage — показаны
+export const COMMENTS_HIDDEN_KEY = "jira-hub-comments-hidden";
+const read = (): boolean => { try { return localStorage.getItem(COMMENTS_HIDDEN_KEY) === "1"; } catch { return false; } };
+
+export function useCommentsHidden(): [boolean, (hidden: boolean) => void] {
+  const [hidden, setHidden] = useState(read);
+  const set = (v: boolean) => {
+    setHidden(v);
+    try { if (v) localStorage.setItem(COMMENTS_HIDDEN_KEY, "1"); else localStorage.removeItem(COMMENTS_HIDDEN_KEY); }
+    catch { /* хранилище недоступно: выбор живёт до закрытия карточки */ }
+  };
+  return [hidden, set];
+}
+```
+
+- [ ] **Step 5: Тесты проходят, весь набор зелёный**
+
+Run: `cd web && npx vitest run src/issues/card.test.ts src/issues/modal.test.ts`
+Expected: PASS.
+
+Run: `cd web && npm test && npm run lint && npx tsc -b`
+Expected: все тесты зелёные (в том числе `IssuePage.test.tsx` с фабрикой из `issueFixtures.ts`), lint и tsc без ошибок.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add web/src/api/types.ts web/src/issues/card.ts web/src/issues/card.test.ts web/src/issues/modal.ts \
+  web/src/issues/modal.test.ts web/src/issues/commentsPref.ts web/src/test/issueFixtures.ts web/src/test/setup.ts \
+  web/src/issues/IssuePage.test.tsx
+git commit -m "feat(web): данные карточки — комментарии, группы связей, просрочка, состояние окна (#37)
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>"
+```
+
+### Task 4: Карточка окном поверх страницы
+
+**Модель исполнителя:** sonnet (интеграция с маршрутизатором).
+
+**Files:**
+- Create: `web/src/shell/pages.tsx` (`PAGE_ROUTES`)
+- Modify: `web/src/routes.tsx`
+- Modify: `web/src/shell/Layout.tsx`
+- Create: `web/src/issues/IssueModal.tsx`, `web/src/issues/IssueLink.tsx`
+- Rename: `web/src/issues/IssuePage.tsx` → `web/src/issues/IssueCard.tsx`; `web/src/issues/IssuePage.test.tsx` → `web/src/issues/IssueCard.test.tsx`
+- Modify: `web/src/issues/IssuesPage.tsx:66` (ключ — `IssueLink`), `web/src/board/components/Card.tsx:34-35` (ⓘ — `BOARD_CARD_STATE`)
+- Modify: `web/src/issues/issues.css` (окно)
+- Test: `web/src/issues/IssueModal.test.tsx`, `web/src/App.test.tsx`, `web/src/board/components/BoardCanvas.test.tsx:53` (если проверяет только `href` — без изменений)
+
+**Interfaces:**
+- Consumes: Task 3 — `cardState`, `openCardState`, `LIST_BACKGROUND`, `BOARD_CARD_STATE`, `issue()`/`note()`.
+- Produces: `IssueCard({ issueKey, onClose }: { issueKey: string; onClose: () => void })` (Task 5 переписывает его
+  содержимое, сигнатура та же); `IssueModal({ issueKey, onClose })`; `IssueLink({ issueKey, className?, children? })`;
+  `PAGE_ROUTES: RouteObject[]`; заголовок карточки — `<h2 id="issue-modal-title">`.
+
+- [ ] **Step 1: Перенос страницы карточки в компонент окна**
+
+```bash
+git mv web/src/issues/IssuePage.tsx web/src/issues/IssueCard.tsx
+git mv web/src/issues/IssuePage.test.tsx web/src/issues/IssueCard.test.tsx
+```
+
+В `web/src/issues/IssueCard.tsx`:
+- заменить `import { Link, useParams } from "react-router";` на `import { IssueLink } from "./IssueLink.tsx";`;
+- заменить `export function IssuePage() {` и строку `const { key = "" } = useParams();` на
+  `export function IssueCard({ issueKey: key, onClose }: { issueKey: string; onClose: () => void }) {`;
+- `data-testid="page-issue"` везде заменить на `data-testid="issue-card"`;
+- ветку 404 заменить на
+  `return <div className="issue" data-testid="issue-card"><p>Задачи {key} нет в зеркале хаба.</p><button className="btn" type="button" onClick={onClose}>Закрыть</button></div>;`;
+- строку `<p><Link to="/issues">← задачи</Link></p>` заменить на
+  `<p><button className="btn sm" type="button" aria-label="Закрыть" onClick={onClose}>✕</button></p>`;
+- `<h1>{i.key} · {i.summary}</h1>` заменить на `<h2 id="issue-modal-title">{i.key} · {i.summary}</h2>`;
+- в связях `<Link to={`/issues/${l.target_key}`}>{l.target_key}</Link>` → `<IssueLink issueKey={l.target_key} />`,
+  `<Link to={`/issues/${l.source_key}`}>{l.source_key}</Link>` → `<IssueLink issueKey={l.source_key} />`.
+
+В `web/src/issues/NoteForm.tsx` у блока подтверждения ухода `<div className="confirm" role="dialog">` заменить
+`role="dialog"` на `role="alertdialog"`: внутри окна `<dialog>` второй `role="dialog"` делает поиск окна
+(`getByRole("dialog")`) неоднозначным.
+
+Создать `web/src/issues/IssueLink.tsx`:
+
+```tsx
+import type { ReactNode } from "react";
+import { Link, useLocation } from "react-router";
+import { openCardState } from "./modal.ts";
+
+// ссылка на карточку задачи: открывает окно поверх текущей страницы (или меняет содержимое открытого окна)
+export function IssueLink({ issueKey, className, children }: { issueKey: string; className?: string; children?: ReactNode }) {
+  const loc = useLocation();
+  return <Link className={className} to={`/issues/${encodeURIComponent(issueKey)}`} state={openCardState(loc)}>{children ?? issueKey}</Link>;
+}
+```
+
+Создать `web/src/issues/IssueModal.tsx`:
+
+```tsx
+import { useEffect, useRef } from "react";
+import { ErrorBoundary } from "../shell/ErrorBoundary.tsx";
+import { IssueCard } from "./IssueCard.tsx";
+
+// окно карточки (design 13): <dialog> держит фокус и делает фон недоступным; Esc и щелчок по фону — onClose.
+// Сами окно не закрываем: оно исчезает вместе с адресом карточки. Если браузер закрыл его сам (Esc без активации
+// пользователя — cancel не отменяемый), открываем снова и просим закрытия по общему пути (блокировщик заметок).
+export function IssueModal({ issueKey, onClose }: { issueKey: string; onClose: () => void }) {
+  const ref = useRef<HTMLDialogElement>(null);
+  useEffect(() => {
+    const d = ref.current;
+    if (d && !d.open) d.showModal();
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";      // страница под окном не прокручивается
+    return () => { document.body.style.overflow = prev; };
+  }, []);
+  return (
+    <dialog ref={ref} className="issue-modal" aria-labelledby="issue-modal-title"
+      onCancel={(e) => { if (e.cancelable) { e.preventDefault(); onClose(); } }}
+      onClose={() => { const d = ref.current; if (d?.isConnected) { d.showModal(); onClose(); } }}
+      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
+      <ErrorBoundary key={issueKey}><IssueCard issueKey={issueKey} onClose={onClose} /></ErrorBoundary>
+    </dialog>
+  );
+}
+```
+
+- [ ] **Step 2: Маршруты и оболочка**
+
+Создать `web/src/shell/pages.tsx`:
+
+```tsx
+import { Navigate, type RouteObject } from "react-router";
+import { BoardPage } from "../board/BoardPage.tsx";
+import { IssuesPage } from "../issues/IssuesPage.tsx";
+import { NotFound } from "./NotFound.tsx";
+
+// страницы приложения; Layout рисует их по адресу страницы под окном карточки (design 10)
+export const PAGE_ROUTES: RouteObject[] = [
+  { path: "/", element: <Navigate to="/board" replace /> },
+  { path: "/board", element: <BoardPage /> },
+  { path: "/issues", element: <IssuesPage /> },
+  { path: "*", element: <NotFound /> },
+];
+```
+
+Заменить `web/src/routes.tsx` целиком:
+
+```tsx
+import type { RouteObject } from "react-router";
+import { Layout } from "./shell/Layout.tsx";
+
+// адреса относительно basename "/app": страницы и окно карточки рисует Layout (shell/pages.tsx, design 10)
+export const routes: RouteObject[] = [{ path: "*", element: <Layout /> }];
+```
+
+Заменить `web/src/shell/Layout.tsx` целиком:
+
+```tsx
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { Link, matchPath, useLocation, useNavigate, useRoutes } from "react-router";
+import { clearToken } from "../auth/token.ts";
+import { IssueModal } from "../issues/IssueModal.tsx";
+import { cardState, LIST_BACKGROUND } from "../issues/modal.ts";
+import { ErrorBoundary } from "./ErrorBoundary.tsx";
+import { PAGE_ROUTES } from "./pages.tsx";
+import "./shell.css";
+
+export function Layout() {
+  const qc = useQueryClient();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const issueKey = matchPath("/issues/:key", location.pathname)?.params.key ?? null;
+  const card = issueKey ? cardState(location.state) : null;
+  const bgPath = issueKey ? (card?.background ?? LIST_BACKGROUND).pathname : null;
+  const bgSearch = issueKey ? (card?.background ?? LIST_BACKGROUND).search : "";
+  // адрес страницы под окном; передаётся в useRoutes всегда (и без окна), чтобы дерево страницы не менялось при
+  // открытии окна и useSearchParams внутри неё видел её собственный адрес (design 10)
+  const bgLocation = useMemo(() => bgPath === null ? null : { pathname: bgPath, search: bgSearch, hash: "", state: null, key: "card-background" },
+    [bgPath, bgSearch]);
+  const pageLocation = bgLocation ?? location;
+  const page = useRoutes(PAGE_ROUTES, pageLocation);
+
+  // прямой адрес карточки: запись истории получает state окна поверх списка задач (design 11)
+  useEffect(() => {
+    if (issueKey && !card) {
+      void navigate(location.pathname + location.search, { replace: true, state: { background: LIST_BACKGROUND, depth: 0, direct: true } });
+    }
+  }, [issueKey, card, location.pathname, location.search, navigate]);
+
+  // закрытие (design 12): назад на depth записей; запись прямого адреса, на которую вернулись, заменяется списком
+  const closingDirect = useRef(false);
+  useEffect(() => {
+    if (closingDirect.current && card?.direct && card.depth === 0) {
+      closingDirect.current = false;
+      void navigate("/issues", { replace: true });
+    }
+  }, [card, navigate]);
+  const close = useCallback(() => {
+    if (!card || card.depth === 0) { void navigate("/issues", { replace: true }); return; }
+    closingDirect.current = card.direct;
+    void navigate(-card.depth);
+  }, [card, navigate]);
+
+  const at = pageLocation.pathname;
+  const tab = (to: string, label: string) => {
+    const active = at === to || at.startsWith(to + "/");
+    return <Link to={to} className={active ? "active" : undefined} aria-current={active ? "page" : undefined}>{label}</Link>;
+  };
+  return (
+    <>
+      <header className="appbar">
+        <span className="brand">Хаб Jira</span>
+        <nav>{tab("/board", "Доска")}{tab("/issues", "Задачи")}</nav>
+        <span className="spacer" />
+        <button type="button" className="link" onClick={() => { clearToken(); qc.clear(); }}>Сменить токен</button>
+      </header>
+      <main className="page">
+        <ErrorBoundary key={at}>{page}</ErrorBoundary>
+      </main>
+      {issueKey && <IssueModal issueKey={issueKey} onClose={close} />}
+    </>
+  );
+}
+```
+
+В `web/src/issues/IssuesPage.tsx`: импорт `Link` из `react-router` убрать (оставить `useSearchParams`), добавить
+`import { IssueLink } from "./IssueLink.tsx";`, в строке таблицы `<Link to={`/issues/${i.key}`}>{i.key}</Link>`
+заменить на `<IssueLink issueKey={i.key} />`.
+
+В `web/src/board/components/Card.tsx` добавить импорт `import { BOARD_CARD_STATE } from "../../issues/modal.ts";` и у
+ссылки «ⓘ» добавить атрибут `state={BOARD_CARD_STATE}` (после `to={`/issues/${n.key}`}`).
+
+В `web/src/issues/issues.css` добавить в конец:
+
+```css
+/* окно карточки задачи (design 13) */
+.issue-modal{width:min(1000px,calc(100vw - 32px));max-width:none;max-height:90vh;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);overflow:auto}
+.issue-modal::backdrop{background:rgb(0 0 0 / .45)}
+.issue-modal > .issue{padding:0 20px 20px}
+@media (max-width:700px){.issue-modal{width:100vw;max-width:100vw;height:100vh;max-height:100vh;margin:0;border-radius:0}}
+```
+
+- [ ] **Step 3: Падающие тесты окна**
+
+Создать `web/src/issues/IssueModal.test.tsx`:
+
+```tsx
+import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { createMemoryRouter } from "react-router";
+import { beforeEach, describe, expect, it } from "vitest";
+import { App } from "../App.tsx";
+import { setToken } from "../auth/token.ts";
+import board from "../board/__fixtures__/hub-basic.board.json";
+import settings from "../board/__fixtures__/settings.json";
+import { routes } from "../routes.tsx";
+import { json, mockFetch } from "../test/fetchMock.ts";
+import { issue } from "../test/issueFixtures.ts";
+
+const rows = board.issues.map((i) => ({ ...i, id: i.key, description: null, reporter: null, created: null, jira_updated: null, fetched_at: "" }));
+
+function hub() {
+  return mockFetch((_m, url) => {
+    const p = url.pathname;
+    if (p === "/settings") return json(200, settings);
+    if (p === "/board") return json(200, board);
+    if (p === "/issues") return json(200, { issues: rows });
+    if (p.startsWith("/issues/")) return json(200, issue(decodeURIComponent(p.slice("/issues/".length))));
+    if (p === "/batches") return json(200, { batches: [] });
+    return json(200, {});
+  });
+}
+const at = (entries: string[], index = entries.length - 1) =>
+  createMemoryRouter(routes, { initialEntries: entries, initialIndex: index, basename: "/app" });
+const dialog = () => screen.getByRole("dialog");
+
+describe("карточка окном", () => {
+  beforeEach(() => { setToken("tok"); hub(); });
+
+  it("из списка: окно поверх списка, фон не пересоздаётся, ✕ возвращает со старым фильтром, «назад» не открывает карточку", async () => {
+    const router = at(["/app/board", "/app/issues?sprint=AWPCA_Спринт 2"]);
+    render(<App router={router} />);
+    const table = await screen.findByRole("table");
+    expect(screen.getByLabelText("Спринт")).toHaveValue("AWPCA_Спринт 2");
+    await userEvent.click(await within(table).findByRole("link", { name: "AURORA-9002" }));
+    expect(router.state.location.pathname).toBe("/app/issues/AURORA-9002");
+    expect(await within(dialog()).findByRole("heading", { name: /AURORA-9002/ })).toBeInTheDocument();
+    expect(screen.getByRole("table")).toBe(table);                         // фон не пересоздаётся
+    expect(screen.getByLabelText("Спринт")).toHaveValue("AWPCA_Спринт 2");  // фильтр фона — из его адреса
+    expect(screen.getByRole("link", { name: "Задачи", exact: true })).toHaveClass("active");
+    await userEvent.click(within(dialog()).getByRole("button", { name: "Закрыть" }));
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+    expect(router.state.location.pathname).toBe("/app/issues");
+    expect(new URLSearchParams(router.state.location.search).get("sprint")).toBe("AWPCA_Спринт 2");
+    expect(screen.getByRole("table")).toBe(table);
+    await act(async () => { await router.navigate(-1); });
+    expect(router.state.location.pathname).toBe("/app/board");
+  });
+
+  it("переход по связи меняет окно, «назад» возвращает прежнюю карточку, Esc закрывает всё", async () => {
+    const router = at(["/app/issues"]);
+    render(<App router={router} />);
+    await userEvent.click(await screen.findByRole("link", { name: "AURORA-9001" }));
+    await userEvent.click(await within(dialog()).findByRole("link", { name: "AURORA-9002" }));
+    expect(await within(dialog()).findByRole("heading", { name: /AURORA-9002/ })).toBeInTheDocument();
+    await act(async () => { await router.navigate(-1); });
+    expect(await within(dialog()).findByRole("heading", { name: /AURORA-9001/ })).toBeInTheDocument();
+    await userEvent.click(within(dialog()).getByRole("link", { name: "AURORA-9002" }));
+    await within(dialog()).findByRole("heading", { name: /AURORA-9002/ });
+    fireEvent(dialog(), new Event("cancel", { cancelable: true }));
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+    expect(router.state.location.pathname).toBe("/app/issues");
+  });
+
+  it("щелчок по фону окна закрывает его", async () => {
+    const router = at(["/app/issues"]);
+    render(<App router={router} />);
+    await userEvent.click(await screen.findByRole("link", { name: "AURORA-9001" }));
+    await within(dialog()).findByRole("heading", { name: /AURORA-9001/ });
+    await userEvent.click(dialog());                                       // цель — сам <dialog>, не содержимое
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+    expect(router.state.location.pathname).toBe("/app/issues");
+  });
+
+  it("с доски: окно поверх доски, вкладка «Доска» активна, после закрытия доска та же", async () => {
+    const router = at(["/app/board"]);
+    render(<App router={router} />);
+    const ilink = await screen.findByRole("link", { name: "Открыть карточку AURORA-9001" });
+    const boardEl = screen.getByTestId("page-board");
+    await userEvent.click(ilink);
+    expect(await within(dialog()).findByRole("heading", { name: /AURORA-9001/ })).toBeInTheDocument();
+    expect(screen.getByTestId("page-board")).toBe(boardEl);
+    expect(screen.getByRole("link", { name: "Доска", exact: true })).toHaveClass("active");
+    await userEvent.click(within(dialog()).getByRole("button", { name: "Закрыть" }));
+    await waitFor(() => expect(router.state.location.pathname).toBe("/app/board"));
+    expect(screen.getByTestId("page-board")).toBe(boardEl);
+  });
+
+  it("прямой адрес: под окном список задач, ✕ ведёт в список заменой записи", async () => {
+    const router = at(["/app/board", "/app/issues/AURORA-9001"]);
+    render(<App router={router} />);
+    expect(await within(await screen.findByRole("dialog")).findByRole("heading", { name: /AURORA-9001/ })).toBeInTheDocument();
+    expect(await screen.findByTestId("page-issues")).toBeInTheDocument();
+    await waitFor(() => expect(router.state.location.state).toMatchObject({ depth: 0, direct: true }));
+    await userEvent.click(within(dialog()).getByRole("button", { name: "Закрыть" }));
+    await waitFor(() => expect(router.state.location.pathname).toBe("/app/issues"));
+    await act(async () => { await router.navigate(-1); });
+    expect(router.state.location.pathname).toBe("/app/board");             // не карточка
+  });
+
+  it("прямой адрес и переход по связи: закрытие возвращает в список, а не на первую карточку", async () => {
+    const router = at(["/app/issues/AURORA-9001"]);
+    render(<App router={router} />);
+    await userEvent.click(await within(await screen.findByRole("dialog")).findByRole("link", { name: "AURORA-9002" }));
+    await within(dialog()).findByRole("heading", { name: /AURORA-9002/ });
+    fireEvent(dialog(), new Event("cancel", { cancelable: true }));
+    await waitFor(() => expect(router.state.location.pathname).toBe("/app/issues"));
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  });
+
+  it("Esc с несохранённой заметкой спрашивает; «Остаться» оставляет окно с текстом", async () => {
+    const router = at(["/app/issues"]);
+    render(<App router={router} />);
+    await userEvent.click(await screen.findByRole("link", { name: "AURORA-9001" }));
+    const box = await within(dialog()).findByLabelText("Заметка владельца");
+    await userEvent.type(box, "черновик");
+    fireEvent(dialog(), new Event("cancel", { cancelable: true }));
+    expect(await within(dialog()).findByText("Есть несохранённые правки заметки. Уйти без сохранения?")).toBeInTheDocument();
+    await userEvent.click(within(dialog()).getByRole("button", { name: "Остаться" }));
+    expect(router.state.location.pathname).toBe("/app/issues/AURORA-9001");
+    expect(within(dialog()).getByLabelText("Заметка владельца")).toHaveValue("черновик");
+  });
+});
+```
+
+В `web/src/issues/IssueCard.test.tsx`:
+- импорт `import { IssuePage } from "./IssuePage.tsx";` заменить на `import { IssueCard } from "./IssueCard.tsx";` и
+  добавить `useNavigate, useParams` в импорт из `react-router`;
+- в `open()` маршрут `{ path: "/issues/:key", element: <IssuePage /> }` заменить на
+  `{ path: "/issues/:key", element: <CardAt /> }` и перед `open()` добавить:
+
+```tsx
+function CardAt() {
+  const { key = "" } = useParams();
+  const navigate = useNavigate();
+  return <IssueCard issueKey={key} onClose={() => void navigate("/board")} />;
+}
+```
+
+- тест «заголовок страницы — h1 (бренд в оболочке — span)» заменить на:
+
+```tsx
+  it("заголовок карточки — h2 с id для aria-labelledby окна", async () => {
+    mockFetch((_m, url) => url.pathname === "/settings" ? json(200, settings) : json(200, issue("AURORA-9001")));
+    open("/issues/AURORA-9001");
+    expect(await screen.findByRole("heading", { level: 2, name: /AURORA-9001/ })).toHaveAttribute("id", "issue-modal-title");
+  });
+```
+
+- тест «задачи нет в зеркале — сообщение и ссылка на список» заменить на:
+
+```tsx
+  it("задачи нет в зеркале — сообщение и «Закрыть»", async () => {
+    mockFetch((_m, url) => url.pathname === "/settings" ? json(200, settings) : json(404, { error: "not_found", detail: "issue" }));
+    const router = open("/issues/AURORA-1");
+    expect(await screen.findByText("Задачи AURORA-1 нет в зеркале хаба.")).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: "Закрыть" }));
+    expect(router.state.location.pathname).toBe("/board");
+  });
+```
+
+- тест «O-10: ссылка в ветке «задачи нет в зеркале» стоит внутри .issue (цвет темы)» удалить (ссылки в ветке 404 больше
+  нет; цвет ссылок `.issue a` проверяет Task 5).
+
+В `web/src/App.test.tsx` в тесте «неизвестный путь — «не найдено» со ссылками» ожидания не меняются (NotFound — в
+`PAGE_ROUTES`); если тест обращается к `Layout` напрямую — оставить импорт (`Layout` экспортируется по-прежнему).
+
+Run: `cd web && npx vitest run src/issues/IssueModal.test.tsx src/issues/IssueCard.test.tsx src/App.test.tsx`
+Expected до Step 2 — FAIL (нет `IssueModal`, `routes` без окна); после Step 1–2 — проверить следующим шагом.
+
+- [ ] **Step 4: Тесты проходят, весь набор зелёный**
+
+Run: `cd web && npx vitest run src/issues/IssueModal.test.tsx src/issues/IssueCard.test.tsx src/App.test.tsx`
+Expected: PASS.
+
+Run: `cd web && npm test && npm run lint && npx tsc -b`
+Expected: всё зелёное. `BoardCanvas.test.tsx` проверяет `href="/issues/AURORA-9001"` у «ⓘ» — `state` на `href` не влияет.
+
+Если `useRoutes` с явным адресом пересоздаёт страницу при открытии окна (тест «фон не пересоздаётся» падает на
+`toBe(table)`), это нарушение design 10: не обходить ключами `key`, а остановиться и описать наблюдение в отчёте.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add web/src/routes.tsx web/src/shell/Layout.tsx web/src/shell/pages.tsx web/src/issues web/src/board/components/Card.tsx \
+  web/src/App.test.tsx
+git commit -m "feat(web): карточка задачи окном поверх списка и доски (#37)
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>"
+```
+
+### Task 5: Раскладка карточки и заметки в режиме чтения
+
+**Модель исполнителя:** sonnet (вёрстка и перенос тестов).
+
+**Files:**
+- Modify: `web/src/issues/IssueCard.tsx` (полностью), `web/src/issues/NoteForm.tsx` (`onDone`, «Отмена»)
+- Create: `web/src/issues/Notes.tsx`
+- Modify: `web/src/issues/issues.css` (раскладка карточки)
+- Test: `web/src/issues/IssueCard.test.tsx`, `web/src/issues/IssueModal.test.tsx`
+
+**Interfaces:**
+- Consumes: Task 3 — `groupLinks`, `factClass`, `isOverdue`, `todayISO`, `useCommentsHidden`, `IssueComment`; Task 4 —
+  `IssueCard({ issueKey, onClose })`, `IssueLink`, `<h2 id="issue-modal-title">`.
+- Produces: `Notes({ issue }: { issue: IssueDetail })`; `NoteForm({ issue, onDone }: { issue: IssueDetail; onDone: () => void })`.
+
+- [ ] **Step 1: Падающие тесты раскладки**
+
+В `web/src/issues/IssueCard.test.tsx`:
+
+1) Тест «поля, описание с переносами, связи с подписями, команды» заменить на:
+
+```tsx
+  it("шапка: ключ, статусы, тема, исполнитель · срок · спринт · эпик по имени; ссылка в Jira", async () => {
+    mockFetch((_m, url) => url.pathname === "/settings" ? json(200, settings) : json(200, issue("AURORA-9001", { planned_end: "2020-01-10" })));
+    open("/issues/AURORA-9001");
+    expect(await screen.findByRole("heading", { level: 2, name: "Тема AURORA-9001" })).toBeInTheDocument();
+    const head = screen.getByTestId("issue-head");
+    expect(within(head).getByText("AURORA-9001")).toBeInTheDocument();
+    expect(within(head).getByText("В работе", { selector: ".badge.status" })).toBeInTheDocument();
+    expect(within(head).getByText("В работе", { selector: ".badge.fact" })).toHaveClass("fact-in-progress");
+    expect(within(head).getByTestId("issue-facts")).toHaveTextContent("Иванов Иван Иванович · срок 10.01 просрочено · AWPCA_Спринт 2 · эпик: Тестовый эпик");
+    expect(within(head).getByText("просрочено")).toHaveClass("overdue");
+    expect(screen.getByRole("link", { name: "Открыть в Jira ↗" })).toHaveAttribute("href", "https://sdlc.go.rshbank.ru/jira/browse/AURORA-9001");
+  });
+
+  it("связи по группам с темой и статусом; задача вне зеркала; прочий тип с направлением", async () => {
+    mockFetch((_m, url) => url.pathname === "/settings" ? json(200, settings) : json(200, issue("AURORA-9001", {
+      links_out: [{ target_key: "AURORA-9002", link_type: "ASUPR_Блокер_Начала", summary: "API свода", status: "Новая" },
+        { target_key: "lower-1", link_type: "ASUPR_Связанные", summary: null, status: null }],
+      links_in: [{ source_key: "AURORA-9003", link_type: "ASUPR_Блокер_Завершения", summary: "Макет экрана", status: "Готово" },
+        { source_key: "AURORA-9008", link_type: "Duplicate", summary: "Актуализация ТЗ", status: "В работе" }],
+    })));
+    open("/issues/AURORA-9001");
+    const depends = await screen.findByRole("group", { name: "Зависит от" });
+    expect(within(depends).getByRole("listitem")).toHaveTextContent("завершение AURORA-9003 Макет экрана Готово");
+    const blocks = screen.getByRole("group", { name: "Блокирует" });
+    expect(within(blocks).getByRole("link", { name: "AURORA-9002" })).toHaveAttribute("href", "/issues/AURORA-9002");
+    expect(within(blocks).getByRole("listitem")).toHaveTextContent("начало AURORA-9002 API свода Новая");
+    expect(within(screen.getByRole("group", { name: "Связана с" })).getByRole("listitem")).toHaveTextContent("lower-1 нет в зеркале");
+    expect(within(screen.getByRole("group", { name: "Прочие" })).getByRole("listitem")).toHaveTextContent("← Duplicate AURORA-9008");
+    expect(screen.getByRole("link", { name: "AURORA-9002" }).closest(".issue")).not.toBeNull();   // O-10: цвет темы
+  });
+
+  it("без связей — «связей нет»", async () => {
+    mockFetch((_m, url) => url.pathname === "/settings" ? json(200, settings) : json(200, issue("AURORA-9001", { links_out: [], links_in: [] })));
+    open("/issues/AURORA-9001");
+    expect(await screen.findByText("связей нет")).toBeInTheDocument();
+  });
+
+  it("описание свыше 8 строк свёрнуто, «развернуть»/«свернуть»; короткое — без кнопки", async () => {
+    const long = Array.from({ length: 10 }, (_, n) => `строка ${n + 1}`).join("\n");
+    mockFetch((_m, url) => url.pathname === "/settings" ? json(200, settings) : json(200, issue("AURORA-9001", { description: long })));
+    open("/issues/AURORA-9001");
+    const pre = await screen.findByText(long, { normalizer: (s) => s });
+    expect(pre).toHaveClass("description", "clamped");
+    await userEvent.click(screen.getByRole("button", { name: "развернуть" }));
+    expect(pre).not.toHaveClass("clamped");
+    await userEvent.click(screen.getByRole("button", { name: "свернуть" }));
+    expect(pre).toHaveClass("clamped");
+  });
+
+  it("короткое описание — без кнопки; нет описания — нет раздела", async () => {
+    let d: string | null = "строка 1\nстрока 2";
+    mockFetch((_m, url) => url.pathname === "/settings" ? json(200, settings) : json(200, issue("AURORA-9001", { description: d })));
+    open("/issues/AURORA-9001");
+    expect(await screen.findByText("строка 1\nстрока 2", { normalizer: (s) => s })).toHaveClass("description");
+    expect(screen.queryByRole("button", { name: "развернуть" })).toBeNull();
+    d = null;
+    cleanup();
+    open("/issues/AURORA-9001");
+    await screen.findByRole("heading", { level: 2 });
+    expect(screen.queryByRole("heading", { name: "Описание" })).toBeNull();
+  });
+
+  it("комментарии новые сверху; «Скрыть» запоминается для следующей карточки", async () => {
+    const comments = [
+      { comment_id: "2", author: "Петров Пётр", created: "2026-10-15T12:00:00.000+0300", updated: null, body: "новый\nвторая строка" },
+      { comment_id: "1", author: "Иванов Иван", created: "2026-10-14T12:00:00.000+0300", updated: null, body: "старый" }];
+    mockFetch((_m, url) => url.pathname === "/settings" ? json(200, settings) : json(200, issue("AURORA-9001", { comments })));
+    open("/issues/AURORA-9001");
+    expect(await screen.findByRole("heading", { name: "Комментарии (2)" })).toBeInTheDocument();
+    const items = within(screen.getByTestId("comments")).getAllByRole("listitem");
+    expect(items[0]).toHaveTextContent("Петров Пётр");
+    expect(within(items[0]).getByText("новый\nвторая строка", { normalizer: (s) => s })).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: "Скрыть" }));
+    expect(screen.queryByText("старый")).toBeNull();
+    expect(localStorage.getItem("jira-hub-comments-hidden")).toBe("1");
+    cleanup();
+    open("/issues/AURORA-9001");
+    expect(await screen.findByRole("button", { name: "Показать" })).toBeInTheDocument();
+    expect(screen.queryByText("старый")).toBeNull();
+  });
+
+  it("комментарий без автора и текста не ломает карточку; без комментариев — «комментариев нет»", async () => {
+    let comments = [{ comment_id: "1", author: null, created: null, updated: null, body: "" }];
+    mockFetch((_m, url) => url.pathname === "/settings" ? json(200, settings) : json(200, issue("AURORA-9001", { comments })));
+    open("/issues/AURORA-9001");
+    expect(await screen.findByRole("heading", { name: "Комментарии (1)" })).toBeInTheDocument();
+    expect(within(screen.getByTestId("comments")).getByRole("listitem")).toHaveTextContent("—");
+    comments = [];
+    cleanup();
+    open("/issues/AURORA-9001");
+    expect(await screen.findByText("комментариев нет")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Скрыть" })).toBeNull();
+  });
+
+  it("прочие поля и команды моста свёрнуты", async () => {
+    mockFetch((_m, url) => url.pathname === "/settings" ? json(200, settings) : json(200, issue("AURORA-9001")));
+    open("/issues/AURORA-9001");
+    const other = await screen.findByRole("region", { name: "Прочие поля" });
+    expect(other).toHaveTextContent("Приоритет");
+    expect(other).toHaveTextContent("Высокий");
+    const details = screen.getByText("Команды моста (1)").closest("details")!;
+    expect(details).not.toHaveAttribute("open");
+    expect(within(details).getByRole("cell", { name: "ensure_fields" })).toBeInTheDocument();
+  });
+```
+
+(в импорт из `@testing-library/react` добавить `cleanup` и `within`).
+
+2) Тест «O-11: задача без команд — текст вместо пустой таблицы» оставить, в нём ничего не менять.
+
+3) Тесты заметок — перед первым обращением к полю формы добавить щелчок «Править»:
+`await userEvent.click(await screen.findByRole("button", { name: "Править" }));` — в тестах «сохраняются только
+изменённые поля…», «422 — текст ошибки…», «уход с несохранёнными правками…», «ответ «Сохранить» после ухода…»,
+«T14.1…», «T14.3…». Дальше `findByLabelText(...)` остаётся. Ожидания после успешного сохранения в тесте «сохраняются
+только изменённые поля» заменить на:
+
+```tsx
+    await waitFor(() => expect(put).toEqual({ rest_text: "тесты", done_text: null, updated_by: "web" }));
+    expect(await screen.findByText(/изменено .*web/)).toBeInTheDocument();             // снова режим чтения
+    expect(screen.getByRole("button", { name: "Править" })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Сохранить" })).toBeNull();
+```
+
+В тесте «ответ «Сохранить» после ухода в другую карточку…» после перехода на AURORA-9002 последние три ожидания заменить
+на:
+
+```tsx
+    expect(screen.getByRole("heading", { name: /AURORA-9002/ })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Править" })).toBeInTheDocument();      // новая карточка — в режиме чтения
+    expect(screen.queryByText("черновик")).toBeNull();
+```
+
+В тесте «T14.1…» после `slowPut.resolve(...)` ожидания заменить на:
+
+```tsx
+    expect(await screen.findByText("раз")).toBeInTheDocument();                         // режим чтения с сохранённым
+```
+
+4) В `web/src/issues/IssueModal.test.tsx`, тест «Esc с несохранённой заметкой спрашивает…», перед строкой
+`const box = await within(dialog()).findByLabelText("Заметка владельца");` добавить
+`await userEvent.click(await within(dialog()).findByRole("button", { name: "Править" }));`.
+
+5) Добавить тесты режима чтения и «Отмены»:
+
+```tsx
+  it("заметки в режиме чтения: пустые — «—», время и автор; «Отмена» без правок — сразу", async () => {
+    mockFetch((_m, url) => url.pathname === "/settings" ? json(200, settings) : json(200, issue("AURORA-9001")));
+    open("/issues/AURORA-9001");
+    const view = await screen.findByRole("region", { name: "Служебные заметки" });
+    expect(view).toHaveTextContent("Сделано");
+    expect(view).toHaveTextContent("схема");
+    expect(within(view).getByText("Заметка владельца").nextElementSibling).toHaveTextContent("—");
+    expect(view).toHaveTextContent(/изменено .*chat/);
+    await userEvent.click(within(view).getByRole("button", { name: "Править" }));
+    await userEvent.click(screen.getByRole("button", { name: "Отмена" }));
+    expect(screen.getByRole("button", { name: "Править" })).toBeInTheDocument();
+  });
+
+  it("«Отмена» с правками спрашивает; «Отменить правки» возвращает чтение без изменений", async () => {
+    mockFetch((_m, url) => url.pathname === "/settings" ? json(200, settings) : json(200, issue("AURORA-9001")));
+    open("/issues/AURORA-9001");
+    await userEvent.click(await screen.findByRole("button", { name: "Править" }));
+    await userEvent.type(screen.getByLabelText("Заметка владельца"), "черновик");
+    await userEvent.click(screen.getByRole("button", { name: "Отмена" }));
+    expect(screen.getByText("Отменить правки заметки?")).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: "Продолжить правку" }));
+    expect(screen.getByLabelText("Заметка владельца")).toHaveValue("черновик");
+    await userEvent.click(screen.getByRole("button", { name: "Отмена" }));
+    await userEvent.click(screen.getByRole("button", { name: "Отменить правки" }));
+    expect(screen.getByRole("button", { name: "Править" })).toBeInTheDocument();
+    expect(screen.queryByText("черновик")).toBeNull();
+  });
+
+  it("заметки ещё нет — режим чтения с «—» и «Править»", async () => {
+    mockFetch((_m, url) => url.pathname === "/settings" ? json(200, settings) : json(200, issue("AURORA-9001", { note: null })));
+    open("/issues/AURORA-9001");
+    const view = await screen.findByRole("region", { name: "Служебные заметки" });
+    expect(within(view).getAllByText("—")).toHaveLength(5);
+    expect(within(view).getByRole("button", { name: "Править" })).toBeInTheDocument();
+  });
+```
+
+Run: `cd web && npx vitest run src/issues/IssueCard.test.tsx`
+Expected: FAIL — нет `issue-head`, групп связей, раздела «Комментарии», кнопки «Править».
+
+- [ ] **Step 2: Заметки: чтение и правка**
+
+Создать `web/src/issues/Notes.tsx`:
+
+```tsx
+import { useState } from "react";
+import type { IssueDetail, NoteField } from "../api/types.ts";
+import { fmtStamp } from "../board/model/util.ts";
+import { NoteForm } from "./NoteForm.tsx";
+
+const ROWS: [NoteField, string][] = [["work_kind", "Вид работы"], ["fact_status", "Статус по факту"], ["done_text", "Сделано"],
+  ["rest_text", "Осталось"], ["owner_note", "Заметка владельца"]];
+
+// служебные заметки (design 20): по умолчанию чтение, «Править» — форма; после сохранения или отмены — снова чтение
+export function Notes({ issue }: { issue: IssueDetail }) {
+  const [editing, setEditing] = useState(false);
+  if (editing) return <NoteForm issue={issue} onDone={() => setEditing(false)} />;
+  const n = issue.note;
+  return (
+    <section className="note view" aria-labelledby="notes-title">
+      <div className="sec-head">
+        <h3 id="notes-title">Служебные заметки</h3>
+        <button className="btn sm" type="button" onClick={() => setEditing(true)}>Править</button>
+      </div>
+      <dl className="fields">
+        {ROWS.map(([f, label]) => <div key={f}><dt>{label}</dt><dd>{n?.[f] || "—"}</dd></div>)}
+      </dl>
+      {n && <p className="hint">изменено {fmtStamp(n.updated_at)}, {n.updated_by}</p>}
+    </section>
+  );
+}
+```
+
+В `web/src/issues/NoteForm.tsx`:
+- в импорт из `react` добавить `useRef`;
+- сигнатуру заменить на `export function NoteForm({ issue, onDone }: { issue: IssueDetail; onDone: () => void }) {`;
+- после `const save = useSaveNote(issue.key);` добавить
+  `const [askCancel, setAskCancel] = useState(false);` и `const confirmRef = useRef<HTMLDivElement>(null);`;
+- после эффекта `beforeunload` добавить:
+
+```tsx
+  // подтверждение ухода может оказаться ниже видимой части окна — прокрутить к нему
+  useEffect(() => { if (blocker.state === "blocked") confirmRef.current?.scrollIntoView?.({ block: "nearest" }); }, [blocker.state]);
+```
+
+- `submit` заменить на:
+
+```tsx
+  const submit = () => save.mutate(changed, {
+    onSuccess: (note) => { const v = valuesOf(note); setInitial(v); setValues(v); onDone(); },
+  });
+```
+
+- строку `const saved = save.data ?? issue.note;` удалить;
+- `<form className="note" …>` заменить на `<form className="note" aria-labelledby="notes-title" …>`, а
+  `<h3>Служебные заметки</h3>` — на `<h3 id="notes-title">Служебные заметки</h3>`;
+- блок `<div className="row">…</div>` (кнопка «Сохранить» и строка «сохранено …») заменить на:
+
+```tsx
+      <div className="row">
+        <button className="btn" type="submit" disabled={!dirty || save.isPending}>Сохранить</button>
+        <button className="btn" type="button" disabled={save.isPending} onClick={() => (dirty ? setAskCancel(true) : onDone())}>Отмена</button>
+      </div>
+      {askCancel && (
+        <div className="confirm" role="alertdialog" aria-label="Отменить правки заметки?">
+          <span>Отменить правки заметки?</span>
+          <button className="btn" type="button" onClick={onDone}>Отменить правки</button>
+          <button className="btn" type="button" onClick={() => setAskCancel(false)}>Продолжить правку</button>
+        </div>
+      )}
+```
+
+- у блока подтверждения ухода `<div className="confirm" role="alertdialog">` (роль поменял Task 4) добавить
+  `ref={confirmRef}`.
+
+- [ ] **Step 3: Карточка**
+
+Заменить `web/src/issues/IssueCard.tsx` целиком:
+
+```tsx
+import { useLayoutEffect, useRef, useState } from "react";
+import { ApiError } from "../api/client.ts";
+import { useIssue, useSettings } from "../api/queries.ts";
+import type { IssueComment, IssueDetail } from "../api/types.ts";
+import { JIRA_URL } from "../board/constants.ts";
+import { fmtDate, fmtStamp } from "../board/model/util.ts";
+import { factClass, groupLinks, isOverdue, todayISO } from "./card.ts";
+import { useCommentsHidden } from "./commentsPref.ts";
+import { IssueLink } from "./IssueLink.tsx";
+import { Notes } from "./Notes.tsx";
+import { dueOf } from "./options.ts";
+import "./issues.css";
+
+const DESC_LINES = 8;
+
+export function IssueCard({ issueKey: key, onClose }: { issueKey: string; onClose: () => void }) {
+  const issue = useIssue(key);
+  const settings = useSettings();
+  const close = <button className="close" type="button" aria-label="Закрыть" onClick={onClose}>✕</button>;
+  if (issue.isPending) return <div className="issue" data-testid="issue-card"><div className="issue-head"><p className="hint">загрузка {key}…</p>{close}</div></div>;
+  if (issue.error instanceof ApiError && issue.error.status === 404) {
+    return <div className="issue" data-testid="issue-card"><p>Задачи {key} нет в зеркале хаба.</p><button className="btn" type="button" onClick={onClose}>Закрыть</button></div>;
+  }
+  if (issue.isError && !issue.data) {
+    return (
+      <div className="issue" data-testid="issue-card">
+        <p className="warn" role="alert">{issue.error.message}{" "}
+          <button className="btn sm" type="button" onClick={() => void issue.refetch()}>Повторить</button></p>
+        <button className="btn" type="button" onClick={onClose}>Закрыть</button>
+      </div>
+    );
+  }
+  const i = issue.data!;
+  const labels = settings.data?.status_labels as Record<string, string> | undefined;
+  const fact = i.note?.fact_status ?? null;
+  const cls = factClass(fact, labels);
+  const due = dueOf(i);
+  const facts = [
+    i.assignee && <span key="who">{i.assignee}</span>,
+    due && <span key="due">срок {fmtDate(due)}{isOverdue(due, fact, labels, todayISO()) && <> <span className="overdue">просрочено</span></>}</span>,
+    i.sprint && <span key="sprint">{i.sprint}</span>,
+    i.epic_key && <span key="epic">эпик: {i.epic_summary ?? i.epic_key}</span>,
+  ].filter(Boolean);
+  return (
+    <div className="issue" data-testid="issue-card">
+      <header className="issue-head" data-testid="issue-head">
+        <div className="row1">
+          <span className="key">{i.key}</span>
+          {i.status && <span className="badge status">{i.status}</span>}
+          {fact && <span className={"badge fact" + (cls ? " " + cls : "")}>{fact}</span>}
+          <span className="spacer" />
+          <a href={`${JIRA_URL}/browse/${i.key}`} target="_blank" rel="noopener">Открыть в Jira ↗</a>
+          {close}
+        </div>
+        <h2 id="issue-modal-title">{i.summary || i.key}</h2>
+        {facts.length > 0 && <p className="facts" data-testid="issue-facts">{facts.flatMap((f, n) => (n ? [" · ", f] : [f]))}</p>}
+        {issue.isError && (
+          <p className="warn" role="alert">{issue.error.message}{" "}
+            <button className="btn sm" type="button" onClick={() => void issue.refetch()}>Повторить</button></p>
+        )}
+      </header>
+      <div className="cols">
+        <div className="main">
+          <Links issue={i} linkTypes={(settings.data?.link_types ?? {}) as Record<string, string>} />
+          {i.description && <Description text={i.description} />}
+          <Comments items={i.comments ?? []} />
+        </div>
+        <div className="side">
+          <Notes key={i.key} issue={i} />
+          <OtherFields issue={i} />
+          <Commands issue={i} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Links({ issue, linkTypes }: { issue: IssueDetail; linkTypes: Record<string, string> }) {
+  const groups = groupLinks(issue, linkTypes);
+  return (
+    <section className="links-sec">
+      <h3>Связи</h3>
+      {!groups.length && <p className="hint">связей нет</p>}
+      {groups.map(([id, title, links]) => (
+        <div key={id} className="group" role="group" aria-labelledby={`links-${id}`}>
+          <h4 id={`links-${id}`}>{title}</h4>
+          <ul className="links">
+            {links.map((l) => (
+              <li key={id + l.key + (l.tag ?? "")}>
+                {l.tag && <><span className="tag">{l.tag}</span>{" "}</>}
+                <IssueLink issueKey={l.key} />{" "}
+                {l.summary === null && l.status === null
+                  ? <span className="sum absent">нет в зеркале</span>
+                  : <><span className="sum">{l.summary}</span>{l.status && <>{" "}<span className="badge status">{l.status}</span></>}</>}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </section>
+  );
+}
+
+function Description({ text }: { text: string }) {
+  const ref = useRef<HTMLPreElement>(null);
+  const [open, setOpen] = useState(false);
+  const [overflow, setOverflow] = useState(false);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (el && !open) setOverflow(el.scrollHeight > el.clientHeight + 1);
+  }, [text, open]);
+  const long = text.split("\n").length > DESC_LINES || overflow;
+  return (
+    <section>
+      <h3>Описание</h3>
+      <pre ref={ref} className={"description" + (open ? "" : " clamped")}>{text}</pre>
+      {(long || open) && <button className="link" type="button" onClick={() => setOpen(!open)}>{open ? "свернуть" : "развернуть"}</button>}
+    </section>
+  );
+}
+
+function Comments({ items }: { items: IssueComment[] }) {
+  const [hidden, setHidden] = useCommentsHidden();
+  return (
+    <section className="comments" data-testid="comments">
+      <div className="sec-head">
+        <h3>Комментарии ({items.length})</h3>
+        {items.length > 0 && <button className="link" type="button" onClick={() => setHidden(!hidden)}>{hidden ? "Показать" : "Скрыть"}</button>}
+      </div>
+      {!items.length && <p className="hint">комментариев нет</p>}
+      {items.length > 0 && !hidden && (
+        <ul>
+          {items.map((c) => (
+            <li key={c.comment_id}>
+              <div className="who">{c.author ?? "—"}{c.created ? `, ${fmtStamp(c.created)}` : ""}</div>
+              <pre className="body">{c.body}</pre>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}
+
+function OtherFields({ issue: i }: { issue: IssueDetail }) {
+  const rows: [string, string | null][] = [
+    ["Тип", i.issue_type], ["Приоритет", i.priority], ["Автор", i.reporter], ["Метки", i.labels.join(", ") || null],
+    ["Плановое начало", i.planned_start], ["Обновлена в Jira", i.jira_updated ? fmtStamp(i.jira_updated) : null],
+    ["Сосед по связям", i.neighbor ? "да" : null],
+  ];
+  return (
+    <section className="other" aria-labelledby="other-title">
+      <h3 id="other-title">Прочие поля</h3>
+      <dl className="fields">{rows.filter(([, v]) => v).map(([k, v]) => <div key={k}><dt>{k}</dt><dd>{v}</dd></div>)}</dl>
+    </section>
+  );
+}
+
+function Commands({ issue: i }: { issue: IssueDetail }) {
+  if (!i.commands.length) {
+    return <section className="commands"><h3>Команды моста</h3><p className="hint">команд по задаче не было</p></section>;
+  }
+  return (
+    <section className="commands">
+      <details>
+        <summary>Команды моста ({i.commands.length})</summary>
+        <table className="grid">
+          <thead><tr><th>Команда</th><th>Пакет</th><th>Тип</th><th>Статус</th><th>Завершена</th><th>Ошибка</th></tr></thead>
+          <tbody>{i.commands.map((c) => (
+            <tr key={c.id}><td>#{c.id}</td><td>#{c.batch_id}</td><td>{c.type}</td><td>{c.status}</td>
+              <td>{c.finished_at ? fmtStamp(c.finished_at) : ""}</td><td>{c.error}</td></tr>
+          ))}</tbody>
+        </table>
+      </details>
+    </section>
+  );
+}
+```
+
+Тест O-11 ищет `screen.queryByRole("columnheader", { name: "Команда" })` = `null` — при пустых командах таблицы нет.
+
+- [ ] **Step 4: Стили карточки**
+
+В `web/src/issues/issues.css` заменить строки от `.issue a{color:var(--accent)}` до
+`.issue .links{padding-left:18px}` включительно на:
+
+```css
+.issue a{color:var(--accent)}
+.issue-head{position:sticky;top:0;z-index:1;background:var(--bg);padding:14px 0 10px;border-bottom:1px solid var(--line);margin-bottom:14px}
+.issue-head .row1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.issue-head .key{font-family:var(--font-mono);font-size:13px;color:var(--muted)}
+.issue-head .spacer{flex:1 1 auto}
+.issue-head h2{margin:6px 0 4px;font-size:20px;line-height:1.3}
+.issue-head .facts{margin:0;color:var(--muted);font-size:14px}
+.issue .overdue{color:var(--p-crit);font-weight:600}
+.issue .close{font-size:18px;line-height:1;background:none;border:0;color:var(--muted);cursor:pointer;padding:4px 6px}
+.badge{display:inline-block;font-size:12px;line-height:18px;padding:0 8px;border-radius:9px;background:var(--soft);color:var(--fg);white-space:nowrap}
+.badge.fact{background:transparent;border:1px solid var(--accent);color:var(--accent)}
+.badge.fact.fact-done{border-color:var(--k-test);color:var(--k-test)}
+.badge.fact.fact-cancelled{border-color:var(--muted);color:var(--muted);text-decoration:line-through}
+.issue .cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
+.issue .side{display:flex;flex-direction:column;gap:16px;min-width:0}
+.issue .main{min-width:0}
+@media (max-width:900px){
+  .issue .cols{display:flex;flex-direction:column;gap:16px}
+  .issue .side{display:contents}
+  .issue .side .note{order:-1}
+  .issue .side .other{order:1}
+  .issue .side .commands{order:2}
+}
+.issue section{margin-bottom:18px}
+.issue h3{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 8px}
+.issue .sec-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
+.issue .group{margin:0 0 10px}
+.issue .group h4{font-size:13px;font-weight:600;margin:0 0 4px}
+.issue .links{list-style:none;margin:0;padding:0}
+.issue .links li{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:3px 0}
+.issue .links .tag{font-size:12px;color:var(--muted);min-width:76px}
+.issue .links .sum{flex:1 1 200px;min-width:0}
+.issue .links .absent{color:var(--muted);font-style:italic}
+.issue .description{white-space:pre-wrap;font:inherit;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px;margin:0 0 4px}
+.issue .description.clamped{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
+.issue .comments ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
+.issue .comments .who{font-size:12px;color:var(--muted);margin-bottom:2px}
+.issue .comments .body{white-space:pre-wrap;font:inherit;margin:0}
+.issue .fields{display:grid;grid-template-columns:1fr;gap:6px;margin:0}
+.issue .fields dt{font-size:12px;color:var(--muted)}
+.issue .fields dd{margin:0;white-space:pre-wrap}
+.issue .commands summary{cursor:pointer;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
+.issue .commands table{margin-top:8px;font-size:13px}
+```
+
+- [ ] **Step 5: Тесты проходят, весь набор зелёный**
+
+Run: `cd web && npx vitest run src/issues`
+Expected: PASS (`IssueCard.test.tsx`, `IssueModal.test.tsx`, `card.test.ts`, `modal.test.ts`, `IssuesPage.test.tsx`).
+
+Run: `cd web && npm test && npm run lint && npx tsc -b`
+Expected: всё зелёное.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add web/src/issues
+git commit -m "feat(web): раскладка карточки — шапка состояния, связи по смыслу, комментарии, заметки в режиме чтения (#37)
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>"
+```
+
+### Task 6: Тестовый хаб, e2e и документация
+
+**Модель исполнителя:** sonnet (e2e и проверка в браузере).
+
+**Files:**
+- Create: `web/scripts/seed-extras.json`
+- Modify: `web/scripts/seed-hub.py`
+- Modify: `web/e2e/issues.spec.ts`, `web/e2e/board.spec.ts:56-81`
+- Modify: `README.md` (раздел веб-приложения, строка 161), `ARCHITECTURE.md` (если описывает страницы `web/`)
+
+**Interfaces:**
+- Consumes: Tasks 1–5 (комментарии в зеркале, окно, раскладка).
+
+- [ ] **Step 1: Дополнения тестового хаба**
+
+Создать `web/scripts/seed-extras.json`:
+
+```json
+{
+  "issues": {
+    "AURORA-9001": {
+      "description": "Цель: схема свода для КФО.\nКонтекст: ТЗ 6.4.\nШаг 1 — таблицы.\nШаг 2 — связи.\nШаг 3 — индексы.\nШаг 4 — миграции.\nШаг 5 — проверки.\nШаг 6 — документация.\nШаг 7 — ревью.\nШаг 8 — выкатка.\nШаг 9 — приёмка.\nКонец описания.",
+      "comments": [
+        {"id": "501", "author": "Петров Пётр Петрович", "created": "2026-10-13T10:00:00.000+0300", "updated": "2026-10-13T10:00:00.000+0300", "body": "Первый комментарий e2e\nвторая строка"},
+        {"id": "502", "author": "Иванов Иван Иванович", "created": "2026-10-14T11:30:00.000+0300", "updated": "2026-10-14T12:00:00.000+0300", "body": "Схему согласовали с аналитиком."},
+        {"id": "503", "author": null, "created": "2026-10-15T09:15:00.000+0300", "updated": "2026-10-15T09:15:00.000+0300", "body": "[мост] служебный комментарий"}
+      ]
+    }
+  },
+  "commands": [
+    {"type": "ensure_fields", "params": {"key": "AURORA-9001", "fields": {"duedate": "2026-10-20"}}, "status": "done"},
+    {"type": "ensure_status", "params": {"key": "AURORA-9001", "status": "В работе"}, "status": "failed", "error": "нет перехода в «В работе»"}
+  ]
+}
+```
+
+В `web/scripts/seed-hub.py`:
+- в строку документации добавить предложение «Дополнения только для тестового хаба (описание, комментарии, команды) — из
+  seed-extras.json рядом со скриптом.»;
+- после `snap = json.loads(...)` добавить:
+
+```python
+extras_path = Path(__file__).with_name("seed-extras.json")
+extras = json.loads(extras_path.read_text(encoding="utf-8")) if extras_path.exists() else {}
+extra_issues = extras.get("issues", {})
+```
+
+- строку `issues = [...]` заменить на:
+
+```python
+issues = [{k: v for k, v in i.items() if k not in ("fact_status", "work_kind", "neighbor")} | {"id": i["key"]}
+          | extra_issues.get(i["key"], {}) for i in snap["issues"]]
+```
+
+- перед строкой `(paths.home() / "tokens.json").write_text(...)` добавить:
+
+```python
+if extras.get("commands"):        # завершённые команды по задачам — для раздела «Команды моста» карточки
+    with db.transaction(conn):
+        batch = conn.execute("INSERT INTO batch(title, author, created_at) VALUES ('Тестовые команды', 'seed', ?)",
+                             (db.now(),)).lastrowid
+        for seq, c in enumerate(extras["commands"], 1):
+            conn.execute("INSERT INTO command(batch_id, seq, type, params, status, finished_at, error) "
+                         "VALUES (?, ?, ?, ?, ?, ?, ?)",
+                         (batch, seq, c["type"], json.dumps(c["params"], ensure_ascii=False), c["status"], db.now(),
+                          c.get("error")))
+```
+
+Проверка: `JIRA_HUB_HOME=web/.e2e-hub bash web/scripts/test-hub.sh` в фоне, затем
+`curl -s -H "Authorization: Bearer $(python3 -c "import json;print(json.load(open('web/.e2e-hub/tokens.json'))['client'])")" http://127.0.0.1:8791/issues/AURORA-9001 | python3 -c "import json,sys;d=json.load(sys.stdin);print(len(d['comments']), len(d['commands']), d['description'].count(chr(10)))"`
+Expected: `3 2 11`. Остановить тестовый хаб.
+
+- [ ] **Step 2: e2e списка задач**
+
+Заменить `web/e2e/issues.spec.ts` целиком:
+
+```ts
+import { expect, test } from "@playwright/test";
+import { login } from "./hub.ts";
+
+test("фильтр → карточка окном → заметка сохраняется и переживает перезагрузку", async ({ page }) => {
+  await login(page, "/app/issues");
+  await page.getByLabel("Исполнитель").selectOption("Петров Пётр Петрович");
+  await expect(page).toHaveURL(/assignee=/);
+  await page.getByRole("link", { name: "AURORA-9002", exact: true }).click();
+  const d = page.getByRole("dialog");
+  await expect(d.getByRole("heading", { name: "API свода" })).toBeVisible();
+  await d.getByRole("button", { name: "Править" }).click();
+  await d.getByLabel("Осталось").fill("e2e: дописать тесты");
+  await d.getByRole("button", { name: "Сохранить" }).click();
+  await expect(d.getByText("e2e: дописать тесты")).toBeVisible();
+  await page.reload();
+  await expect(page.getByRole("dialog").getByText("e2e: дописать тесты")).toBeVisible();
+  await page.keyboard.press("Escape");
+  await expect(page.getByRole("dialog")).toHaveCount(0);
+  await expect(page).toHaveURL(/\/app\/issues\?assignee=/);
+  await expect(page.getByLabel("Исполнитель")).toHaveValue("Петров Пётр Петрович");
+});
+
+test("окно поверх списка: прокрутка списка на месте при открытии и после закрытия", async ({ page }) => {
+  await page.setViewportSize({ width: 1280, height: 320 });
+  await login(page, "/app/issues");
+  await expect(page.locator("table.grid tbody tr")).toHaveCount(10);
+  const y = await page.evaluate(() => { window.scrollTo(0, document.documentElement.scrollHeight); return window.scrollY; });
+  expect(y).toBeGreaterThan(50);
+  await page.locator("table.grid tbody tr").last().getByRole("link").click();
+  await expect(page.getByRole("dialog")).toBeVisible();
+  expect(await page.evaluate(() => window.scrollY)).toBe(y);
+  await page.keyboard.press("Escape");
+  await expect(page.getByRole("dialog")).toHaveCount(0);
+  expect(await page.evaluate(() => window.scrollY)).toBe(y);
+});
+
+test("переход по связи и «назад»; ✕ и щелчок по фону; после закрытия «назад» не открывает карточку", async ({ page }) => {
+  await login(page);                                                   // доска
+  await page.getByRole("link", { name: "Задачи", exact: true }).click();
+  await page.getByRole("link", { name: "AURORA-9001", exact: true }).click();
+  const d = page.getByRole("dialog");
+  await d.getByRole("link", { name: "AURORA-9002", exact: true }).click();
+  await expect(page).toHaveURL(/\/app\/issues\/AURORA-9002$/);
+  await expect(d.getByRole("heading", { name: "API свода" })).toBeVisible();
+  await page.goBack();
+  await expect(d.getByRole("heading", { name: "Схема свода" })).toBeVisible();
+  await d.getByRole("link", { name: "AURORA-9002", exact: true }).click();
+  await d.getByRole("button", { name: "Закрыть" }).click();
+  await expect(page).toHaveURL(/\/app\/issues$/);
+  await expect(page.getByRole("dialog")).toHaveCount(0);
+  await page.getByRole("link", { name: "AURORA-9003", exact: true }).click();
+  await expect(page.getByRole("dialog")).toBeVisible();
+  await page.mouse.click(5, 300);                                      // фон слева от окна
+  await expect(page.getByRole("dialog")).toHaveCount(0);
+  await page.goBack();
+  await expect(page).toHaveURL(/\/app\/board$/);
+  await expect(page.getByRole("dialog")).toHaveCount(0);
+});
+
+test("прямой адрес и перезагрузка: окно поверх списка, ✕ ведёт в список", async ({ page }) => {
+  await login(page, "/app/issues/AURORA-9001");
+  const d = page.getByRole("dialog");
+  await expect(d.getByRole("heading", { name: "Схема свода" })).toBeVisible();
+  await expect(page.getByTestId("page-issues")).toBeAttached();
+  await page.reload();
+  await expect(page.getByRole("dialog").getByRole("heading", { name: "Схема свода" })).toBeVisible();
+  await page.getByRole("dialog").getByRole("button", { name: "Закрыть" }).click();
+  await expect(page).toHaveURL(/\/app\/issues$/);
+  await expect(page.getByRole("dialog")).toHaveCount(0);
+});
+
+test("карточка: описание свёрнуто, комментарии новые сверху и скрываются с запоминанием, команды свёрнуты", async ({ page }) => {
+  await login(page, "/app/issues/AURORA-9001");
+  const d = page.getByRole("dialog");
+  await expect(d.getByRole("heading", { name: "Комментарии (3)" })).toBeVisible();
+  await expect(d.getByTestId("comments").getByRole("listitem").first()).toContainText("[мост] служебный комментарий");
+  await expect(d.getByRole("button", { name: "развернуть" })).toBeVisible();
+  await expect(d.getByText("Конец описания.")).toBeHidden();
+  await d.getByRole("button", { name: "развернуть" }).click();
+  await expect(d.getByText("Конец описания.")).toBeVisible();
+  await expect(d.getByRole("cell", { name: "ensure_fields" })).toBeHidden();
+  await d.getByText("Команды моста (2)").click();
+  await expect(d.getByRole("cell", { name: "ensure_fields" })).toBeVisible();
+  await d.getByRole("button", { name: "Скрыть" }).click();
+  await expect(d.getByText("Первый комментарий e2e")).toHaveCount(0);
+  await page.reload();
+  await expect(page.getByRole("dialog").getByRole("button", { name: "Показать" })).toBeVisible();
+  await expect(page.getByRole("dialog").getByText("Первый комментарий e2e")).toHaveCount(0);
+});
+
+test("несохранённая заметка: Esc спрашивает, «Остаться» оставляет окно, «Уйти» закрывает", async ({ page }) => {
+  await login(page, "/app/issues");
+  await page.getByRole("link", { name: "AURORA-9003", exact: true }).click();
+  const d = page.getByRole("dialog");
+  await d.getByRole("button", { name: "Править" }).click();
+  await d.getByLabel("Сделано").fill("черновик");
+  await page.keyboard.press("Escape");
+  await expect(d.getByText("Есть несохранённые правки заметки. Уйти без сохранения?")).toBeVisible();
+  await d.getByRole("button", { name: "Остаться" }).click();
+  await expect(d.getByLabel("Сделано")).toHaveValue("черновик");
+  await page.keyboard.press("Escape");
+  await d.getByRole("button", { name: "Уйти" }).click();
+  await expect(page.getByRole("dialog")).toHaveCount(0);
+  await expect(page).toHaveURL(/\/app\/issues$/);
+});
+
+test("узкий экран: окно на всю ширину, заметки выше связей, без горизонтальной прокрутки", async ({ page }) => {
+  await page.setViewportSize({ width: 600, height: 800 });
+  await login(page, "/app/issues/AURORA-9001");
+  const d = page.getByRole("dialog");
+  await expect(d.getByRole("heading", { name: "Схема свода" })).toBeVisible();
+  expect((await d.boundingBox())!.width).toBeGreaterThan(590);
+  const notesY = (await d.getByRole("heading", { name: "Служебные заметки" }).boundingBox())!.y;
+  const linksY = (await d.getByRole("heading", { name: "Связи", exact: true }).boundingBox())!.y;
+  expect(notesY).toBeLessThan(linksY);
+  expect(await d.evaluate((el) => el.scrollWidth <= el.clientWidth + 1)).toBe(true);
+});
+```
+
+- [ ] **Step 3: e2e доски**
+
+В `web/e2e/board.spec.ts` заменить тесты «ⓘ открывает карточку задачи в приложении» и «M-3: прокрутка доски после
+возврата из карточки задачи» на:
+
+```ts
+test("ⓘ открывает карточку окном поверх доски", async ({ page }) => {
+  await page.locator('.board .card[data-key="AURORA-9001"]').getByRole("link", { name: "Открыть карточку AURORA-9001" }).click();
+  await expect(page).toHaveURL(/\/app\/issues\/AURORA-9001$/);
+  await expect(page.getByRole("dialog").getByRole("heading", { name: "Схема свода" })).toBeVisible();
+  await expect(page.getByTestId("page-board")).toBeAttached();
+  await expect(page.getByRole("link", { name: "Доска", exact: true })).toHaveClass(/active/);
+});
+
+test("M-3: прокрутка и данные доски после окна карточки и после другого раздела", async ({ page }) => {
+  await page.setViewportSize({ width: 1600, height: 600 });
+  await expect(page.locator(".board .card[data-key]").first()).toBeVisible();
+  const y = await page.evaluate(() => { window.scrollTo(0, document.documentElement.scrollHeight); return window.scrollY; });
+  expect(y).toBeGreaterThan(100);
+  // реальный щелчок по ⓘ карточки, видимой в окне после прокрутки (иначе Playwright сам сдвинет страницу)
+  const key = await page.evaluate(() => {
+    const vh = window.innerHeight;
+    const a = [...document.querySelectorAll<HTMLElement>(".board .card[data-key] a.open-card")]
+      .find((e) => { const r = e.getBoundingClientRect(); return r.top > 200 && r.bottom < vh - 20; });
+    return a?.closest<HTMLElement>(".card")?.dataset.key ?? null;
+  });
+  expect(key).not.toBeNull();
+  let boardLoads = 0;
+  page.on("request", (r) => { if (new URL(r.url()).pathname === "/board") boardLoads++; });
+  await page.locator(`.board .card[data-key="${key}"] a.open-card`).click();
+  await expect(page.getByRole("dialog")).toBeVisible();
+  await page.keyboard.press("Escape");
+  await expect(page).toHaveURL(/\/app\/board$/);
+  expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(y - 2);
+  expect(boardLoads).toBe(0);                                          // доска не перезагружалась
+  await page.getByRole("link", { name: "Задачи", exact: true }).click();
+  await page.getByRole("link", { name: "Доска", exact: true }).click();
+  await expect.poll(() => page.evaluate(() => window.scrollY)).toBeGreaterThan(y - 2);
+});
+
+test("заметка из окна видна на доске под ним", async ({ page }) => {
+  await page.locator('.board .card[data-key="AURORA-9002"] a.open-card').click();
+  const d = page.getByRole("dialog");
+  await d.getByRole("button", { name: "Править" }).click();
+  await d.getByLabel("Вид работы").selectOption("тестирование");
+  await d.getByRole("button", { name: "Сохранить" }).click();
+  await expect(d.getByRole("button", { name: "Править" })).toBeVisible();
+  await page.keyboard.press("Escape");
+  await expect(page.locator('.board .card[data-key="AURORA-9002"] .kind')).toHaveText("тестирование");
+});
+```
+
+- [ ] **Step 4: Прогон e2e**
+
+Run: `cd web && npm run e2e`
+Expected: все тесты зелёные. Затем три прогона подряд: `cd web && for n in 1 2 3; do npm run e2e || break; done`
+Expected: три зелёных прогона (устойчивость). Падение — чинить причину, не добавлять ожидания «на всякий случай».
+
+- [ ] **Step 5: Документация**
+
+В `README.md` в строке со списком адресов (`Адреса: … карточка \`/app/issues/{key}\` …`) заменить фрагмент
+«карточка `/app/issues/{key}`» на «карточка `/app/issues/{key}` — окно поверх списка или доски (закрытие — ✕, Esc,
+щелчок по фону; прямой адрес открывает окно поверх списка задач)». В том же разделе, после абзаца про «Задачи», добавить
+абзац:
+
+```markdown
+Карточка задачи: в шапке — статус Jira, статус по факту, исполнитель, срок (просроченный — красным), спринт и эпик;
+связи сгруппированы «Зависит от» / «Блокирует» / «Связана с» / «Прочие» с темой и статусом связанной задачи;
+комментарии из Jira (агент v10+) новые сверху, «Скрыть» запоминается в браузере; заметки — режим чтения, «Править»
+открывает форму. Комментарии появляются после первого обновления из Jira агентом v10.
+```
+
+В `ARCHITECTURE.md`:
+- строку таблицы `| \`mirror\` | зеркало задач и связей, \`apply_state\`, заметки, фильтры, снимок доски \`board\` | \`db\` |`
+  заменить на `| \`mirror\` | зеркало задач, связей и комментариев, \`apply_state\` (с проверкой \`check_comments\`), заметки, фильтры, снимок доски \`board\` | \`db\` |`;
+- в абзаце про `web/` фрагмент «и «Задачи» (`/app/issues`, `/app/issues/{key}`).» заменить на «и «Задачи»
+  (`/app/issues`); карточка `/app/issues/{key}` — окно поверх страницы, с которой её открыли: `shell/Layout.tsx` рисует
+  страницу по адресу из `location.state.background` (`useRoutes` с явным адресом) и `issues/IssueModal.tsx` поверх неё.».
+
+- [ ] **Step 6: Полная проверка**
+
+Run: `make check`
+Expected: pytest и vitest зелёные, lint чистый.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add web/scripts/seed-extras.json web/scripts/seed-hub.py web/e2e README.md ARCHITECTURE.md
+git commit -m "test(web): e2e окна карточки, тестовый хаб с комментариями и командами; README (#37)
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>"
+```
+
+## После плана
+
+- Финальное ревью ветки (opus); ручной проход сценариев в браузере на тестовом хабе :8791 со скриншотами (делает
+  сессия, не контроллер).
+- PR в aep/jira-hub со ссылкой на #37 и на PR агента; merge — по команде владельца, после merge и публикации агента v10.
diff --git a/openspec/changes/issue-card-modal/design.md b/openspec/changes/issue-card-modal/design.md
index 961beeb..47aea88 100644
--- a/openspec/changes/issue-card-modal/design.md
+++ b/openspec/changes/issue-card-modal/design.md
@@ -44,8 +44,8 @@
 
 ### Хаб
 
-5. **Таблица `issue_comment`** `(key, comment_id, author, created, updated, body, PRIMARY KEY (key, comment_id))`, индекс
-   по `key`. Схема v3; миграция v2 → v3 создаёт таблицу (копия базы `schema-v2` — существующим механизмом).
+5. **Таблица `issue_comment`** `(key, comment_id, author, created, updated, body, PRIMARY KEY (key, comment_id))`; выборка
+   по `key` идёт по первичному ключу, отдельный индекс не нужен. Схема v3; миграция v2 → v3 создаёт таблицу (копия базы `schema-v2` — существующим механизмом).
 6. **Запись.** `apply_state`: для задачи с полем `comments` (список) комментарии этой задачи удаляются и вставляются
    присланные — в одной транзакции с задачей; задача без поля `comments` своих комментариев не теряет (агент до v10).
 7. **Проверка формы** в `h_agent_state` до записи: `comments` — список объектов; `id` — непустая строка; `body` — строка;
@@ -60,16 +60,27 @@
 ### Веб-приложение: окно
 
 10. **Фоновая страница.** Ссылки на карточку (ключ в списке, «ⓘ» на доске, связи в карточке) передают в
-    `location.state` `{background, depth}`: `background` — адрес страницы под окном (`pathname + search`), `depth` —
-    сколько карточек открыто поверх неё (1 при открытии со страницы, +1 при переходе по связи). `Layout` отрисовывает
-    маршрут `background` (если он есть), а при адресе `/issues/:key` — окно поверх него. Страница под окном не
-    пересоздаётся: её состояние (фильтры, загруженные порции, прокрутка, раскладка доски, опрос пакета) сохраняется.
-11. **Прямой адрес** `/app/issues/{key}` без `state` (новая вкладка, закладка, перезагрузка): под окном — список задач без
-    фильтров, `depth = 0`.
-12. **Закрытие** (✕, Esc, щелчок по фону): при `depth ≥ 1` — `navigate(-depth)`, браузер возвращается к фоновой
-    странице, и «назад» после закрытия ведёт на шаг раньше неё; при `depth = 0` — `navigate("/issues", {replace: true})`.
+    `location.state` `{background, depth, direct}`: `background` — адрес страницы под окном (`pathname + search`),
+    `depth` — сколько записей истории занято карточками поверх неё (1 при открытии со страницы, +1 при переходе по
+    связи), `direct` — окно открыто прямым адресом (переносится в переходы по связям). Маршрут верхнего уровня —
+    `{path: "*", element: <Layout/>}`; `Layout` всегда рисует страницы через `useRoutes(PAGE_ROUTES, pageLocation)` с
+    явным адресом: `background` при открытом окне, иначе текущий адрес. Явный адрес нужен всегда: так дерево
+    компонентов страницы не меняется при открытии окна (страница не пересоздаётся), а `useSearchParams`/`useLocation`
+    внутри фоновой страницы видят её собственный адрес, и фильтры списка не сбрасываются. Состояние страницы (фильтры,
+    загруженные порции, прокрутка, раскладка доски, опрос пакета) сохраняется. `ErrorBoundary` страницы получает ключ по
+    адресу страницы, у окна — свой.
+11. **Прямой адрес** `/app/issues/{key}` без `state` (новая вкладка, закладка): `Layout` заменяет запись истории тем же
+    адресом со `state = {background: /issues, depth: 0, direct: true}`; под окном — список задач без фильтров.
+    Перезагрузка страницы с открытым окном сохраняет `state` (браузер хранит его в записи истории).
+12. **Закрытие** (✕, Esc, щелчок по фону): `depth = 0` — `navigate("/issues", {replace: true})`; `depth ≥ 1` —
+    `navigate(-depth)`, браузер возвращается к записи страницы под окном, и «назад» после закрытия ведёт на шаг раньше
+    неё; если окно было открыто прямым адресом (`direct`), запись прямого адреса, на которую вернулись, заменяется на
+    `/issues` (`replace`). Закрытие проходит через блокировщик заметок (п. 14). Вкладки «Доска»/«Задачи» в шапке
+    подсвечиваются по адресу страницы под окном.
 13. **Элемент `<dialog>`** с `showModal()`: фокус удерживается в окне, фон недоступен, Esc вызывает `cancel` (обрабатываем
-    сами — закрытие по п. 12 с проверкой заметок). Щелчок по фону — щелчок по самому `<dialog>` вне области содержимого.
+    сами — закрытие по п. 12 с проверкой заметок; если `cancel` не отменяемый — браузер закрыл окно сам без активации
+    пользователя, — по событию `close` окно открывается снова и закрытие идёт тем же путём). Щелчок по фону — щелчок по
+    самому `<dialog>` вне области содержимого.
     Прокрутка страницы под окном на время открытия блокируется (`overflow: hidden` у `body`), содержимое окна
     прокручивается внутри, шапка окна закреплена. Ширина до 1000 px, высота до 90vh; на экранах уже 700 px — на всю
     ширину.
@@ -112,10 +123,11 @@
 
 ### Проверки
 
-25. **Тестовый хаб**: фикстура `hub-basic` дополняется у одной задачи описанием длиннее 8 строк, тремя комментариями и
-    двумя командами; у второй — входящими и исходящими связями всех групп, включая тип вне `link_types` и связь на
-    задачу вне зеркала. Эталоны доски от этого не меняются (комментарии и описание в модель доски не входят) — проверяется
-    golden-тестом.
+25. **Тестовый хаб**: `web/scripts/seed-extras.json` — дополнения к фикстуре доски только для тестового хаба: у AURORA-9001
+    описание длиннее 8 строк, три комментария и две команды (пакет автора `seed`, команды завершены). `seed-hub.py`
+    применяет их после фикстуры. Связи не добавляются (они меняют доску и её e2e); группа «Прочие» и связь на задачу вне
+    зеркала проверяются в vitest, а связь на задачу вне зеркала (`lower-1`) уже есть в фикстуре. Фикстура доски и её
+    golden-эталоны не меняются.
 26. **e2e** (Playwright на :8791): открытие из списка (фильтр и прокрутка списка после закрытия на месте), по «ⓘ» с доски
     (прокрутка и раскладка доски на месте), переход по связи и «назад», Esc / ✕ / фон, «назад» после закрытия не
     открывает карточку, прямой адрес и перезагрузка с открытым окном, подтверждение при несохранённой заметке, ширина