# 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.