| 1 | # Intercom — design hub v1 |
| 2 | |
| 3 | **Статус:** v1 hub для дизайнеров (не ADR) |
| 4 | **Аудитория:** UX, продукт, визуал; разработка — для согласования границ доменов. |
| 5 | **Дата:** 2026-05-19 |
| 6 | |
| 7 | **Родитель:** [CIDE Design Handbook §5.2](cide-design-handbook-v1.md#52-intercom-канал-темы-composer) · **Каталог design:** [README](README.md) |
| 8 | |
| 9 | Intercom пересекает **много доменов** (лента, composer, slash, вложения, редактор, команды, Skia, навигация по темам). Один «чатовый» макет не покрывает картину. Этот хаб задаёт **иерархию документов**, **порядок чтения** и **каталог референс-картинок** (что нарисовать и куда положить). |
| 10 | |
| 11 | !!! tip "Сначала прочитай" |
| 12 | 1. [intercom-ux-reference-slack-mattermost-v1.md](intercom-ux-reference-slack-mattermost-v1.md) — продуктовые границы и паттерны Slack/MM. |
| 13 | 2. Handbook [§2.6](cide-design-handbook-v1.md#26-команды-три-входа-репетиция-выступление-канал) (три входа) и [§2.7](cide-design-handbook-v1.md#27-анти-паттерны-сводка-чего-не-рисуем) (анти-паттерны). |
| 14 | 3. По домену ниже — макет + ADR только если споришь с инженерами. |
| 15 | |
| 16 | --- |
| 17 | |
| 18 | ## Зачем отдельный хаб (и почему «мелочи» важны) |
| 19 | |
| 20 | Один и тот же якорь на файл может означать **разное намерение**: |
| 21 | |
| 22 | | Намерение | Поверхность | Эффект в IDE | |
| 23 | |-----------|-------------|--------------| |
| 24 | | Payload агенту | `/attach selection`, `[M:…]`, реже path/lines | Смысл в UI; path+lines — resolve @ send в wire | |
| 25 | | Действие в редакторе | `/editor line …` | Select/delete в буфере | |
| 26 | | Открыть файл | `/file open` | Вкладка, без attach | |
| 27 | | Посмотреть контекст | Клик по chip в **ленте** | Open + scroll + **рамка** (не selection по умолчанию) | |
| 28 | | Править фрагмент | Shift+клик / настройка | Selection в редакторе | |
| 29 | |
| 30 | Если смешать их в одном affordance, ломаются и UX (случайное удаление), и контракт команд, и MCP. Дизайн здесь — **развести намерения визуально и в copy**, не только в коде. |
| 31 | |
| 32 | **Проектирование до макетов:** сложные домены (D4 attach, D6 клик по chip) выгодно **долго проговаривать** с агентом в том же IOP-контуре — снять ветвления, оформить ADR/playbook, потом рисовать PNG и кодировать MVP. IOP — [манифест](../iop-manifest-v1.md); Cascade — [use case §](../iop-manifest-v1.md#пример-экосистема-cascade); агент как спарринг — [philosophy §8](cascadeide-philosophy-v1.md#8-агент-как-партнёр-для-проектирования-до-кода). |
| 33 | |
| 34 | --- |
| 35 | |
| 36 | ## Карта документов (иерархия) |
| 37 | |
| 38 | ```text |
| 39 | docs/design/ |
| 40 | ├── cide-design-handbook-v1.md ← принципы кокпита, §2.6 три входа, §5.2 вход в Intercom |
| 41 | ├── intercom-design-hub-v1.md ← ВЫ ЗДЕСЬ: домены, макеты, порядок работы |
| 42 | ├── intercom-ux-reference-slack-mattermost-v1.md ← норматив UX-направления (черновик) |
| 43 | ├── ide-chrome-tokens-v1.md ← токены оболочки (AXAML chrome вокруг Skia) |
| 44 | └── cascadeide-philosophy-v1.md ← зачем Intercom = канал сессии |
| 45 | |
| 46 | docs/ui-ux/ |
| 47 | ├── cascade-ide-ui-layout-v1.md ← зоны PFD/Forward/MFD, имена контролов |
| 48 | └── concept-screens/intercom/ ← референс-PNG (см. § «Макеты») |
| 49 | |
| 50 | docs/adr/ (норматив для разработки — дизайнеру по необходимости) |
| 51 | ├── 0080 naming, multi-party, deep links (future) |
| 52 | ├── 0072 topic cards, overview/detail |
| 53 | ├── 0119 slash + autocomplete в composer |
| 54 | ├── 0120 Forward = редактор | Intercom |
| 55 | ├── 0123–0127 Skia chrome, spine, tabs, navigator |
| 56 | ├── 0124–0125 editor line, file open (≠ attach) |
| 57 | ├── 0116, 0045, 0096 сессия, event log, spine |
| 58 | ├── 0128-intercom-attachment-anchors-and-code-references.md ← норматив attach |
| 59 | ├── 0129-intercom-message-body-markdown-and-fenced-code.md ← fenced / MD в теле |
| 60 | └── intercom-ux-reference-slack-mattermost-v1.md ← playbook Slack/MM + attach UX |
| 61 | ``` |
| 62 | |
| 63 | --- |
| 64 | |
| 65 | ## Домены Intercom (что проектировать отдельно) |
| 66 | |
| 67 | Каждый домен — **отдельный макет / flow**; не склеивать в один экран «как Telegram». |
| 68 | |
| 69 | | # | Домен | Вопрос дизайна | Продукт / playbook | Норматив (ADR) | Референс-макет | |
| 70 | |---|--------|----------------|-------------------|----------------|----------------| |
| 71 | | **D1** | **Chrome & навигация** | Spine, вкладки тем, Navigator, back из detail | [intercom-ux-reference](intercom-ux-reference-slack-mattermost-v1.md) §навигация | [0072](../adr/0072-chat-topic-cards-intent-melody-keyboard-contract.md), [0127](../adr/0127-intercom-spine-and-topic-tabs-chrome-navigation.md) Proposed | `intercom-spine-tabs-navigator.png` | |
| 72 | | **D2** | **Лента (feed)** | Flat feed, роли human/agent/system, без balloon | [intercom-ux-reference](intercom-ux-reference-slack-mattermost-v1.md) §лента | [0057](../adr/0057-chat-surface-pipeline-adoption.md), [0123](../adr/0123-intercom-full-skia-surface-evolution.md) | `intercom-feed-flat-roles.png` | |
| 73 | | **D3** | **Composer** | Поле внизу, текст vs `/`, подсказки | [intercom-ux-reference](intercom-ux-reference-slack-mattermost-v1.md) §composer | [0119](../adr/0119-chat-slash-commands-intercom-surface.md) | `intercom-composer-slash-popup.png` | |
| 74 | | **D4** | **Вложения (attach)** | **Selection / `[M:…]` first**; path+lines — производные; whole-file для медиа | [intercom-ux-reference](intercom-ux-reference-slack-mattermost-v1.md) · [0128](../adr/0128-intercom-attachment-anchors-and-code-references.md) · [0130](../adr/0130-editor-agent-range-reveal-without-selection.md) · [0131](../adr/0131-editor-slash-select-code-by-bracket-reference.md) | [0124](../adr/0124-slash-parametric-editor-line-commands.md), [0125](../adr/0125-slash-workspace-file-commands-and-dynamic-completion.md), [0045](../adr/0045-agent-chat-persistence-event-log-and-projections.md) | `intercom-composer-chips-mid-sentence.png` | |
| 75 | | **D4b** | **Тело: fenced / MD** | Fenced `` ``` `` в ленте; полный MD — preview [0069](../adr/0069-markdown-preview-tool-surface-and-renderer-decoupling.md) | [0129](../adr/0129-intercom-message-body-markdown-and-fenced-code.md) | [0123](../adr/0123-intercom-full-skia-surface-evolution.md), [0069](../adr/0069-markdown-preview-tool-surface-and-renderer-decoupling.md) | mono strip в ленте | |
| 76 | | **D5** | **@ vs `[` vs slash** | `@` — люди; `[path]` и `/attach` — артефакты; не `@cc` | [intercom-ux-reference](intercom-ux-reference-slack-mattermost-v1.md) §упоминания | [0080](../adr/0080-intercom-naming-and-multi-party-channel-model.md) | `intercom-mention-vs-attach.png` | |
| 77 | | **D6** | **Мост в редактор** | Клик по chip: open + scroll + **рамка**; Shift → select | [intercom-ux-reference](intercom-ux-reference-slack-mattermost-v1.md) §клик | [0080 future](../adr/0080-intercom-naming-and-multi-party-channel-model.md#adr0080-future-modalities) | `intercom-click-reveal-frame-vs-select.png` | |
| 78 | | **D7** | **Три входа команд** | Палитра / Chord / slash — не дублировать мнемоники | [handbook §2.6](cide-design-handbook-v1.md#26-команды-три-входа-репетиция-выступление-канал) | [0013](../adr/0013-command-surface-and-discoverability.md), [0060](../adr/0060-keyboard-chord-stack-fms-tactical-strategic.md) | `intercom-three-surfaces-help.png` | |
| 79 | | **D8** | **Токены & Skia** | Типографика ленты, chip, status; не сырые hex | [ide-chrome-tokens-v1.md](ide-chrome-tokens-v1.md) | [0064](../adr/0064-deck-primitives-visual-language-render-layer-and-palette.md) | опираться на токены + D2–D4 | |
| 80 | | **D9** | **Forward fullscreen** | Редактор **или** Intercom на всю колонку | [handbook §3](cide-design-handbook-v1.md#3-зоны-внимания-pfd--forward--mfd) | [0120](../adr/0120-primary-work-surface-intercom-or-editor.md) Proposed | `intercom-forward-fullscreen.png` | |
| 81 | | **B** | **Внешний контур** | Slack/MM как бэкенд команды — не v1 IDE UI | [intercom-ux-reference](intercom-ux-reference-slack-mattermost-v1.md) слой B | [0080 §5](../adr/0080-intercom-naming-and-multi-party-channel-model.md#adr0080-p5) | вне scope макетов IDE v1 | |
| 82 | |
| 83 | **Сквозной принцип (для всех доменов):** [Dark cockpit](cide-design-handbook-v1.md#25-dark-cockpit-и-тревога-по-делу) — акцент редко; рамка на сообщении только для ошибки / блокера. |
| 84 | |
| 85 | --- |
| 86 | |
| 87 | ## Макеты и референс-картинки |
| 88 | |
| 89 | **Каталог файлов:** [`docs/ui-ux/concept-screens/intercom/`](../ui-ux/concept-screens/intercom/README.md) |
| 90 | |
| 91 | PNG — **не** скриншоты билда без пометки; в имени или README указывать **target state** и домен (D1–D9). |
| 92 | |
| 93 | ### Чеклист артефактов v1 (что нарисовать) |
| 94 | |
| 95 | | Приоритет | Файл (план) | Домен | Содержание кадра | |
| 96 | |-----------|-------------|--------|------------------| |
| 97 | | P0 | `intercom-feed-flat-roles.png` | D2 | 3–4 строки: human, agent, system; **без** пузырей; компактная system-строка | |
| 98 | | P0 | `intercom-composer-chips-mid-sentence.png` | D4 | Текст с **двумя chip** в середине фразы + slash popup `/attach file` | |
| 99 | | P0 | `intercom-click-reveal-frame-vs-select.png` | D6 | Split или два состояния: (a) рамка/gutter band, (b) Shift → selection | |
| 100 | | P1 | `intercom-composer-slash-popup.png` | D3 | `/` → иерархия; пример `/attach` vs `/file open` | |
| 101 | | P1 | `intercom-spine-tabs-navigator.png` | D1 | Spine + вкладки + navigator (target [0127](../adr/0127-intercom-spine-and-topic-tabs-chrome-navigation.md)) | |
| 102 | | P1 | `intercom-mention-vs-attach.png` | D5 | `@ivan` autocomplete **люди**; рядом copy «файл → /attach» | |
| 103 | | P2 | `intercom-forward-fullscreen.png` | D9 | Intercom на всю Forward vs редактор (переключение) | |
| 104 | | P2 | `intercom-three-surfaces-help.png` | D7 | Схема палитра / Chord / slash (можно diagram + мини UI) | |
| 105 | |
| 106 | ### Связь с существующими скринами |
| 107 | |
| 108 | Общий каталог concept-screens: [`../ui-ux/concept-screens/README.md`](../ui-ux/concept-screens/README.md). Старые «чат с пузырями» **не** использовать как эталон — см. [intercom-ux-reference](intercom-ux-reference-slack-mattermost-v1.md). |
| 109 | |
| 110 | --- |
| 111 | |
| 112 | ## Порядок работы дизайнера (итерации) |
| 113 | |
| 114 | | Этап | Домены | Результат | |
| 115 | |------|--------|-----------| |
| 116 | | **1. Словарь** | D5, D7 | Таблица «что пользователь думает» → какой вход; согласование с handbook §2 | |
| 117 | | **2. Лента + composer** | D2, D3 | Flat feed + slash popup; статусы system | |
| 118 | | **3. Attach + editor bridge** | D4, D6 | Chips, формы вложения, клик → рамка | |
| 119 | | **4. Навигация тем** | D1, D9 | Spine/tabs; fullscreen Forward | |
| 120 | | **5. Polish** | D8 | Токены, плотность, a11y фокуса | |
| 121 | |
| 122 | Параллельно с инженерами: не дублировать ADR в Figma — в макете **имена токенов** и ссылка на домен (D4 и т.д.). |
| 123 | |
| 124 | --- |
| 125 | |
| 126 | ## Мини-глоссарий (только Intercom) |
| 127 | |
| 128 | | Термин | Кратко | |
| 129 | |--------|--------| |
| 130 | | **Chip (вложение)** | Inline-токен в composer/ленте; хранит anchor (path, lines, shape) | |
| 131 | | **attachmentShape** | `whole-file` \| `text-range` \| `selection` | |
| 132 | | **Flat feed** | Строка = имя + время + текст; не messenger balloon | |
| 133 | | **Reveal (из ленты)** | Навигация к якорю с **рамкой**, без selection | |
| 134 | | **Slash namespace** | `/attach`, `/file`, `/editor`, `/build` — разные эффекты | |
| 135 | | **Spine** | Линия продуктовых тем «над чем работаем» | |
| 136 | |
| 137 | Полный глоссарий кокпита: [handbook §7](cide-design-handbook-v1.md#7-глоссарий-для-общего-языка-с-командой). |
| 138 | |
| 139 | --- |
| 140 | |
| 141 | ## Открытые продуктовые вопросы (трекинг) |
| 142 | |
| 143 | Сводка из [intercom-ux-reference](intercom-ux-reference-slack-mattermost-v1.md#открытые-вопросы-для-обсуждения) — дизайнер может вести решения здесь краткой таблицей «решение / дата»: |
| 144 | |
| 145 | - Реализация фаз [0128](../adr/0128-intercom-attachment-anchors-and-code-references.md) (schema 0045, reveal overlay) |
| 146 | - Fenced / MD в ленте — [0129](../adr/0129-intercom-message-body-markdown-and-fenced-code.md) |
| 147 | - `@file` inline — отложено (0128) |
| 148 | - Sidebar vs overview при [0120](../adr/0120-primary-work-surface-intercom-or-editor.md) |
| 149 | |
| 150 | --- |
| 151 | |
| 152 | ## История |
| 153 | |
| 154 | | Дата | Изменение | |
| 155 | |------|-----------| |
| 156 | | 2026-05-19 | v1 hub: домены D1–D9, иерархия доков, чеклист PNG | |
| 157 | | 2026-05-19 | Ссылка на [ADR 0128](../adr/0128-intercom-attachment-anchors-and-code-references.md), [0129](../adr/0129-intercom-message-body-markdown-and-fenced-code.md). | |
| 158 | |
| 159 | *Предложения по структуре — PR в `docs/design/intercom-design-hub-v1.md`.* |
| 160 | |