@cometchat/skills 4.4.2 → 5.0.0

package/skills/cometchat-angular-v5-features/references/host-composed-extensions.md

@@ -0,0 +1,85 @@
+# Host-composed extensions — send, fetch, render
+
+10 of the 17 dashboard extensions render **no kit affordance at all**. Enabling one in the dashboard changes nothing visible — you send through the generic `CometChat.callExtension()`, fetch the same way, and render the result yourself. This file is the full send→fetch→render pattern for `pin-message` and `save-message`; the other 8 host-composed extensions follow the same three-call shape against their own `docs_topic` page.
+
+## 1. Send
+```ts
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+
+// exact slug, endpoint and payload are on the extension's own docs page
+await CometChat.callExtension('pin-message', 'POST', 'v1/pin', { msgId, receiverType });
+```
+
+## 2. Fetch
+```ts
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+
+async function fetchPinned(receiverType: string, receiverId: string) {
+  const url = `v1/fetch?receiverType=${receiverType}&receiver=${receiverId}`;
+  // The 4th param is `data?: Object` — optional, no `| null` in its type. The docs'
+  // own JS example passes `null` for a GET with no body; that fails strict TS. Omit
+  // the argument instead (verified against the installed SDK's callExtension signature).
+  return CometChat.callExtension('pin-message', 'GET', url);
+  // response: { pinnedMessages: [...] } — per the extension's docs page
+}
+```
+
+> **The docs show only `{ pinnedMessages: [] }` / `{ savedMessages: [] }` — never the shape of one ENTRY in that array.** Both `/fundamentals/pin-message` and `/fundamentals/save-message` stop exactly at the point that matters for rendering. This is a genuine **DOCS GAP** (recorded `AUDIT-145`, owner: docs) — do not silently guess a field name and present it as fact. **Log the raw response once in the running app** (`console.log(response)`) to see the real entry shape before writing render code against it.
+
+## 3. Render — go through `getMessageDetails()`, not the raw JSON directly
+The response is **plain JSON from an HTTP call**, not an SDK message instance — it does not have `.getText()` or any other SDK method on it. Whatever ID field the entry carries (send it a `msgId` when pinning, so the fetched entry almost certainly carries an identifier back — confirm the exact key from the logged response), resolve it into a real, typed message through the SDK's own lookup:
+
+```ts
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+
+// static getMessageDetails(messageId: string | any):
+//   Promise<TextMessage | MediaMessage | CustomMessage | InteractiveMessage | BaseMessage>
+// Verified in the angular-v5 catalog — this IS the documented, type-safe path from an
+// id to a real message instance. Never assume the raw extension entry exposes .getText()
+// itself; only an SDK-constructed message instance does.
+async function labelForPinnedEntry(entry: any) {
+  const message = await CometChat.getMessageDetails(entry.msgId ?? entry.messageId ?? entry.id);
+  // instanceof narrows the union cleanly — .getText() only exists on TextMessage,
+  // so guard it rather than assuming every pinned/saved message is text.
+  return message instanceof CometChat.TextMessage
+    ? message.getText()
+    : message.getCategory();   // non-text (media/custom/interactive): show the category, not invented text
+}
+```
+
+Render each entry as its own row (a "Saved messages" / "Pinned messages" panel) — there is no kit component for this list; it is your own `*ngFor`.
+
+## 4. Integrating a per-message action — pin/unpin, not a bolted-on button
+For an action that acts ON an existing message (pin, save, star), do **not** add a separate, unstyled control below the kit's own context menu — `<cometchat-message-list>` has a real input for exactly this, so your action gets the kit's own icon slot and styling instead of looking like an unrelated append:
+
+```ts
+import { CometChatActionsIcon } from '@cometchat/chat-uikit-angular';
+
+class ChatComponent {
+  // A single shared option — CometChatActionsIcon is a STATIC array entry, so every
+  // message's context menu shows the SAME title/icon. onClick(id) receives the
+  // clicked message's numeric id; branch inside it if the label needs to differ
+  // (e.g. check whether `id` is already pinned before deciding what to do).
+  readonly pinOption = new CometChatActionsIcon({
+    id: 'pin-toggle',
+    title: 'Pin message',
+    iconURL: 'data:image/svg+xml;base64,…',   // supply your own — the kit ships no pin icon asset
+    onClick: (id: number) => this.togglePin(id),
+  });
+
+  togglePin(id: number) { /* your pin/unpin logic */ }
+}
+```
+```html
+<cometchat-message-list [user]="activeUser()" [additionalOptions]="[pinOption]"></cometchat-message-list>
+```
+> **Known limitation, stated plainly rather than glossed over:** because `additionalOptions` is one static array shared by every message, you cannot show "Pin message" on an unpinned message and "Unpin message" on a pinned one through this input alone — every message's menu displays the identical entry. The workable pattern is a single, generically-labelled toggle (`"Pin / Unpin"`) whose shared `onClick(id)` checks the message's current pinned state and acts accordingly, or a visually different affordance elsewhere in the bubble driven by `MessageBubbleConfigService.setBubbleView()`'s `statusInfoView` slot (`references/custom-messages.md` §3) for messages you already know are pinned. Verified against the installed 5.1.0 kit: `additionalOptions: CometChatActionsIcon[]`, `CometChatActionsIcon`'s constructor takes `{ id, title, iconURL, onClick: (id: number) => void }`.
+
+## The 10 host-composed extensions
+`pin-message` · `save-message` · `message-shortcuts` · `voice-transcription` · `rich-media-preview` · `gifs` · `reminders` · `url-shortener` · `disappearing-messages` · `support-integrations`
+
+> **Do not conclude a feature "does not exist" because the kit has no component and the SDK has no named method for it.** Extensions are reached through the generic `CometChat.callExtension()` — there is no `pinMessage()` to grep for. Searching `node_modules` for one will find nothing, and that is expected for the SEND/FETCH calls. Reading source **is** correct for the ONE thing the docs genuinely omit here — the response entry shape — but log the running app's response first; don't reverse-engineer it from the SDK's `.d.ts`, which describes the SDK's own classes, not this extension's ad-hoc REST payload.
+
+Each entry in `features.angular-v5.json` carries its own `docs_topic`; `needs_stitching: true` marks all 10.
+
+> **`docs_topic` is a PATH, not a URL.** Prefix it with `DOCS_BASE` from `cometchat-angular-v5-core/references/docs-map.md`, then append `.md`: `{DOCS_BASE}` + `/fundamentals/pin-message` + `.md`. Do **not** hardcode `https://www.cometchat.com/docs/...` — `DOCS_BASE` may point at a preview while a docs change is in flight, and a hardcoded production URL silently reads the pre-change page.

package/skills/cometchat-angular-v5-migration/SKILL.md

@@ -0,0 +1,40 @@
+---
+name: cometchat-angular-v5-migration
+description: "Upgrade an Angular app from CometChat UI Kit v4 → v5 (`@cometchat/chat-uikit-angular` ^4 → ^5). Reads the repo's CometChat usage, applies the breaking-change map (deps, composite components removed, bare→Component renames, CometChatThemeService → CSS variables, event inputs → Outputs, DataSource → composition, localization renames), fetches the exhaustive guide, and verifies the build. Triggers: 'upgrade my v4 uikit to v5', 'migrate cometchat angular v4 to v5', 'upgrade @cometchat/chat-uikit-angular to v5', 'cometchat angular v4 to v5', 'bump cometchat angular uikit'."
+license: "MIT"
+compatibility: "Angular 17-21; FROM @cometchat/chat-uikit-angular ^4 (4.3.36) → ^5 (5.1.0–5.2.0 verified); @cometchat/chat-sdk-javascript ^4.1.13 (peer); @cometchat/cards-angular ^1.0.0 (new peer, undocumented in the official guide); @cometchat/uikit-elements/-resources/-shared removed"
+metadata:
+  author: "CometChat"
+  version: "1.0.0"
+  tags: "cometchat angular migration upgrade v4 v5 uikit"
+---
+
+> **Ground truth:** migrates an Angular app **FROM `@cometchat/chat-uikit-angular@4` TO `@5`**. v5 target symbols are catalog-verified vs installed 5.1.0; the v4→v5 breaking-change map is BAKED in `references/migration-guide.md` (distilled from the official "Upgrading From V4" guide + a real v4.3.36→v5.1.0 export diff — 146 genuine removals, 33 bare→`Component` renames, kept separate). The exhaustive per-component prop table is FETCHED from `cometchat-angular-v5-components/references/catalog.md` + the docs `.md` twins. **APPEND/transform the user's code — never wipe it; work on a branch and confirm before bulk edits** (`RULES.md`).
+
+## Companion skills (read first)
+- `cometchat-angular-v5-core` — the v5 init/login/render the migrated app lands on. This skill ASSUMES it.
+- `cometchat-angular-v5-components` — the v5 component catalog (the target names + real inputs/outputs).
+- `cometchat-angular-v5-placement` — how to rebuild a v4 composite from v5 modules (§2 of the migration guide points here per composite).
+
+## Use this skill when
+"upgrade my v4 UI Kit to v5", "migrate CometChat Angular v4→v5", "bump `@cometchat/chat-uikit-angular` to v5". Precondition: the project currently has `@cometchat/chat-uikit-angular@4`.
+
+## Migration workflow (BAKED)
+1. **Detect the starting point.** Confirm `package.json` has `@cometchat/chat-uikit-angular@4` (already `@5` → STOP, nothing to migrate). Note whether the app uses composite components (`…WithMessages`/`…WithDetails`), `CometChatThemeService`, `*Style` inputs, `DataSource`/`ChatConfigurator`, or custom localization keys — each drives a later step. **Work on a branch; transform in place, never delete the user's code.**
+2. **Update dependencies.** `npm install @cometchat/chat-uikit-angular@5 @cometchat/chat-sdk-javascript@^4.1.13 @cometchat/cards-angular@^1.0.0` then `npm uninstall @cometchat/uikit-elements @cometchat/uikit-resources @cometchat/uikit-shared`. `@cometchat/cards-angular` is a genuine new 5.1.0 peer the official guide never mentions — install it or the build fails on a missing peer, not a CometChat error.
+3. **Scan the repo for v4 usage.** Grep for every symbol in `references/migration-guide.md` §2 (composites, no-equivalent standalones, `DataSource`/decorators, the ~35 `*Style` objects) and §2b (the 33 bare-name renames) — produce the concrete change list before editing anything. A bare name is not automatically "removed"; check §2b first.
+4. **Apply the breaking-change map** (`references/migration-guide.md`): §2/§2b symbol removals + renames, §3 theming (`CometChatThemeService` + `*Style` → CSS variables + the real `ThemeService`, **not** the official guide's own hand-rolled `matchMedia` example — see the warning in §3), §4 event-input → Output rename, §5 `DataSource`/`ChatConfigurator` → `MessageBubbleConfigService` or "nothing, it's auto-rendered," §6 drop `CUSTOM_ELEMENTS_SCHEMA` + convert to standalone, §7 optional `ChatStateService` adoption, §8 localization method renames.
+   **The baked map is a closed list, not a prop reference — FETCH the rest** (`RULES.md` § Fetch discipline; **never** `node_modules/**/*.d.ts`), routed from `cometchat-angular-v5-core/references/docs-map.md`: the **official guide** `{DOCS_BASE}/ui-kit/angular/customization/migration-guide.md` for anything the map omits; a **component's** exact inputs/outputs/slots from its own `.md` twin (Angular has no `migration-property-changes` page — there is no single prop-diff table); an **SDK method** for a capability with no v5 component (`{SDK_DOCS_BASE}/sdk/javascript/groups-overview.md` et al.) — that is where the host-composed group surfaces in step 5 come from.
+5. **Rebuild every composite from modules.** v5 has no composite components at all — `CometChatConversationsWithMessages` etc. must become a hand-stitched surface. Use `cometchat-angular-v5-placement/references/core-surface.md` (1:1) or `combined-app.md` (tabbed) as the target shape, not a literal prop-for-prop port — the composite's *configuration options* (which v4 had many of) don't exist in v5; its *behavior* is what you're reproducing.
+6. **Verify.** Build/typecheck passes; NO v4 symbols remain (grep `references/migration-guide.md` §2's full list); every kit component is in its consumer's `imports: []`; the app renders after init→login resolves (`cometchat-angular-v5-core/references/lifecycle.md`). Reuse `cometchat-angular-v5-core` "Verify it works".
+
+## Common pitfalls (BAKED)
+- **Porting the official guide's own theming example.** It shows a hand-rolled `matchMedia` listener for OS-follow — that predates the real v5 mechanism. `ThemeService.initFromPreference()` already does this; don't reintroduce v4-era manual theme-tracking code (§3).
+- **Treating a bare v4 name as removed when it's only renamed.** Check §2b (33 bare→`Component` renames) before concluding a component is gone — most "missing" names are one word away from their v5 form.
+- **Missing `@cometchat/cards-angular`.** Genuinely undocumented in the official migration guide; the install fails on a peer-dependency error that looks unrelated to the migration.
+- **Forgetting `imports: []` after dropping `CUSTOM_ELEMENTS_SCHEMA`.** v4's schema tolerated unregistered elements; v5's standalone components render **nothing, silently** if omitted from `imports: []` — the single most common v5 failure mode, and migrated code is exactly where it's missed (`cometchat-angular-v5-core/SKILL.md`).
+- **Rebuilding a composite as a literal prop-for-prop port.** v4 composites had large configuration surfaces (`*Style` objects, callback inputs) with no v5 equivalent — port the *behavior*, not the *configuration*, using `cometchat-angular-v5-placement`'s real recipes as the target.
+- **Assuming every `DataSourceDecorator` needs `MessageBubbleConfigService`.** Some were registering a *built-in extension* (polls, stickers, translation) — v5 auto-renders most of those once enabled in the dashboard, with nothing to register (`cometchat-angular-v5-features/SKILL.md`; verify against `needs_stitching` in `features.angular-v5.json`, never assume).
+
+## Verify it works
+Build/typecheck is green; a repo-wide grep finds NO §2 v4 symbols (composites, `CometChatThemeService`, `DataSource`/`ChatConfigurator`, any `*Style` object, any bare §2b name unqualified); every kit component is in `imports: []`; the app renders once init→login resolves; migrated theming follows the OS via `ThemeService`, not a leftover `matchMedia` listener. Full per-component prop reference: `cometchat-angular-v5-components/references/catalog.md` + the docs `.md` twins.

package/skills/cometchat-angular-v5-migration/references/migration-guide.md

@@ -0,0 +1,165 @@
+# migration-guide — CometChat Angular UI Kit v4 → v5 (BAKED breaking-change map)
+
+Distilled from the official "Upgrading From V4" guide (`ui-kit/angular/customization/migration-guide`) and a real **v4.3.36 → v5.1.0 export diff** (v4 installed and catalogued the same way as v5 — `exports-only+members`). v4 names appear in tables/prose (they no longer exist in v5); v5 code is the target.
+
+> **This map is the BAKED half. FETCH the other half — do not substitute the installed bundle for it.**
+> This file is deliberately a *closed list*: what was removed, what was renamed, what replaces each concept. It is **not** a prop reference and does not try to be. For anything it does not name, fetch — never read `node_modules/**/*.d.ts` and never answer from memory (`RULES.md` § Fetch discipline):
+> - **The official guide itself**, for the narrative/checklist view and anything this map omits: `{DOCS_BASE}/ui-kit/angular/customization/migration-guide.md` (route: `cometchat-angular-v5-core/references/docs-map.md`). Read it as a cross-check, **not** as the theming source — see the §3 warning.
+> - **A v5 component's exact inputs/outputs/view slots** → that component's own `.md` twin (docs-map "Component docs"). Angular has **no** `migration-property-changes` page like React's, so per-component props come from the component pages — there is no single prop-diff table to fetch.
+> - **A capability with no v5 component** (the host-composed group surfaces: create/join/add-members/banned-members/transfer-ownership) → the **SDK docs**, `{SDK_DOCS_BASE}/sdk/javascript/groups-overview.md` and siblings (docs-map "SDK docs"). Every `CometChat.*` group/user method signature lives there.
+>
+> A v4 name absent from §2/§2b is **not** proven gone — check the v5 catalog (`cometchat-angular-v5-components/references/catalog.md`) and the component docs before telling anyone a feature was dropped.
+
+## 0. What actually changed
+v5 is a rewrite: v4's composite ("WithMessages"/"WithDetails") components and web-component substrate are gone, replaced by small modular standalone Angular components you stitch together — the same shape of break React went through at v6→v7. Six real breaks: (1) shared deps + `CUSTOM_ELEMENTS_SCHEMA`, (2) composite components removed (build the surface from modules — `cometchat-angular-v5-placement`), (3) `CometChatThemeService`/`*Style` objects → CSS variables, (4) event inputs → `@Output()` EventEmitters (the `on` prefix drops), (5) `DataSource`/`ChatConfigurator`/extension decorators → direct composition + `MessageBubbleConfigService` (`cometchat-angular-v5-features/references/custom-messages.md`), (6) a handful of `CometChatLocalize` method renames. Plus: adopt `ChatStateService` (optional but recommended) instead of repeating `[user]`/`[group]` on every component.
+
+## 1. Dependencies
+```bash
+npm install @cometchat/chat-uikit-angular@5 @cometchat/chat-sdk-javascript@^4.1.13
+npm uninstall @cometchat/uikit-elements @cometchat/uikit-resources @cometchat/uikit-shared
+```
+| Package | v4 | v5 |
+|---|---|---|
+| `@cometchat/chat-uikit-angular` | `^4.x` | `^5.0.0` (5.1.0 verified) |
+| `@cometchat/chat-sdk-javascript` | `^4.x` | `^4.1.13` (peer) |
+| `@cometchat/uikit-elements` / `-resources` / `-shared` | required (web-component substrate shared across React/Angular/Vue) | **removed** — v5 is pure Angular standalone components |
+| `@cometchat/cards-angular` | — | **new peer**, `^1.0.0` — required by 5.1.0, absent from the v4→v5 guide (a tracked docs gap, `cometchat-angular-v5-core/SKILL.md`) |
+| Angular | v4-kit-compatible range | `>=17.0.0 <22.0.0` (verified 5.1.0; 22 hard-fails `npm install` today) |
+
+## 2. Symbol removals — verified vs a real v4.3.36 → v5.1.0 EXPORT diff
+> **146 v4 public exports have no v5 form under either name.** A separate 33 are **not removed** — only renamed, bare → `…Component` suffix (§2b). Don't grep-and-panic on a bare name before checking §2b first.
+
+**Composite components — no v5 replacement; compose from modules instead.**
+
+> **Which target shape? The v4 SOURCE decides, not preference: port to `core-surface.md` unless the v4 screen actually rendered a tab bar.** Verified against installed **4.3.36**: `cometchat-tabs` appears in exactly **one** v4 component — `CometChatContacts` — and **no composite renders an app-level tab bar**. `CometChatConversationsWithMessages` renders `cometchat-conversations` (sidebar) + `cometchat-messages` (pane) + `cometchat-contacts` (the "start conversation" **overlay**); the only tabs in that screen are Users/Groups *inside* the overlay (`CometChatContacts.tabVisibility` defaults to `TabsVisibility.usersAndGroups` — `cometchat-contacts.component.mjs:33`), which is a picker, not an app-level selector.
+> So **every** rebuilt composite lands on `core-surface.md`. `combined-app.md` (the tabbed selector) is a **grow target — added only when the user asks**, per `cometchat-angular-v5-core/SKILL.md`'s core-vs-grow rule. Porting a composite straight onto the tabbed app invents a navigation level the v4 app never had.
+> When the user *does* ask for tabs, build against the documented reference layout: `{DOCS_BASE}/ui-kit/angular/angular-tab-based-chat.md` (`@switch (activeTab)` over `ChatStateService`, left sidebar) — routed from `cometchat-angular-v5-core/references/docs-map.md` § Reference layouts. That page's own tab set is **one example** (Chats · Call Logs · Users), not the definitive list; `combined-app.md` ships four (chats · users · groups · calls). Compose the tabs the app needs.
+
+(`cometchat-angular-v5-placement/references/core-surface.md` for the 1:1 pattern, `combined-app.md` only on request):
+
+| v4 composite | Build in v5 from |
+|---|---|
+| `CometChatConversationsWithMessages` | `CometChatConversationsComponent` + `CometChatMessageHeaderComponent` + `CometChatMessageListComponent` + `CometChatMessageComposerComponent`, stitched via `(itemClick)` or `ChatStateService` |
+| `CometChatUsersWithMessages` / `CometChatGroupsWithMessages` | `CometChatUsersComponent` / `CometChatGroupsComponent` + the same message-pane trio |
+| `CometChatMessages` | The message-pane trio alone (no list) |
+| `CometChatThreadedMessages` | `CometChatThreadHeaderComponent` + a second `CometChatMessageListComponent` bound to `[parentMessageId]` (`cometchat-angular-v5-placement/SKILL.md` "Threaded Messages") |
+| `CometChatCallLogsWithDetails` | `CometChatCallLogsComponent` + your own detail panel (`cometchat-angular-v5-calls`) |
+| `CometChatDetails` | Compose your own — header + `CometChatGroupMembersComponent` for a group (`cometchat-angular-v5-placement/references/combined-app.md` "Details panel") |
+
+**Standalone v4 components with NO v5 equivalent at all — the feature must be rebuilt, not renamed:**
+`CometChatContacts` · `CometChatTransferOwnership` · `CometChatUserMemberWrapper` · `CometChatAddMembers` · `CometChatBannedMembers` (v5: `<cometchat-group-members>`'s built-in ban/unban view — `cometchat-angular-v5-components/references/host-composed.md`) · `CometChatCreateGroup` · `CometChatJoinGroup` (both host-composed in v5 — no kit component; same file) · `CometChatDocumentBubble` (v5 keeps only `CometChatFileBubble` for documents) · `CometChatCallLogDetails` / `-History` / `-Participants` / `-Recordings` (no v5 call-log detail sub-components at all — `cometchat-angular-v5-calls` for what v5 does ship).
+
+**Customization-layer classes removed — the whole v4 decorator/DataSource pattern is gone:**
+`DataSource`, `DataSourceDecorator`, `ChatConfigurator`, `ExtensionsDataSource`, `AIExtensionDataSource`, and one `*Decorator`/`*Extension` pair per built-in extension (`PollsExtensionDecorator`, `StickersExtensionDecorator`, `MessageTranslationExtensionDecorator`, `LinkPreviewExtensionDecorator`, `ImageModerationExtensionDecorator`, `TextModeratorExtensionDecorator`, `ThumbnailGenerationExtensionDecorator`, `CollaborativeDocumentExtensionDecorator`, `CollaborativeWhiteBoardExtensionDecorator`, `CallingExtensionDecorator`, `AIAssistBotDecorator`, `AIConversationStarterDecorator`, `AIConversationSummaryDecorator`, `AISmartRepliesExtensionDecorator`, and their non-`Decorator` counterparts). **v5 replacement depends on what the decorator did:** a custom message type → `MessageBubbleConfigService.setBubbleView()` (`cometchat-angular-v5-features/references/custom-messages.md`); a built-in extension (polls, stickers, translation, …) → nothing to register at all, most are auto-rendered once enabled in the dashboard (`cometchat-angular-v5-features/SKILL.md`'s classify table — verify against `needs_stitching` in `features.angular-v5.json`, never assume).
+
+**`*Style` config-object inputs — an entire category, not individually deprecated.** Every per-component style object (`AvatarStyle`, `BadgeStyle`, `ButtonGroupStyle`, `CallscreenStyle`, `CardStyle`, `CheckboxStyle`, `ConfirmDialogStyle`, `ConversationsStyle`, `CreateGroupStyle`, `DateStyle`, `DocumentBubbleStyle`, `DropdownStyle`, `EmojiKeyboardStyle`, `FileBubbleStyle`, `FullScreenViewerStyle`, `IconStyle`, `ImageBubbleStyle`, `InputStyle`, `JoinGroupStyle`, `LabelStyle`, `ListItemStyle`, `LoaderStyle`, `MediaRecorderStyle`, `MenuListStyle`, `MessageInputStyle`, `ModalStyle`, `PanelStyle`, `PopoverStyle`, `PreviewStyle`, `QuickViewStyle`, `RadioButtonStyle`, `ReceiptStyle`, `SearchInputStyle`, `SingleSelectStyle`, `TextBubbleStyle`, `TextInputStyle`, `ThumbnailGenerationExtensionStyle` — ~35 total) is **removed**. Do not hunt for a v5 renamed form; there isn't one. Delete the input and its object, then set the same values via CSS variables (§3).
+
+**Small v4 UI atoms/primitives with no direct v5 export** (were public in v4, are internal to their host component in v5, OR have a differently-shaped v5 counterpart worth checking against the catalog before assuming gone): `CometChatIcon`, `CometChatLabel`, `CometChatInput`, `CometChatTextInput`, `CometChatSearchInput`, `CometChatDropdown`, `CometChatSingleSelect`, `CometChatModal`, `CometChatPanel`, `CometChatLoader`, `CometChatDivider`, `CometChatBackdrop`, `CometChatDraggable`, `CometChatQuickView`, `CometChatPreview`, `CometChatStatusIndicator`, `CometChatMenuList`, `CometChatList`, `CometChatReceipt`, `CometChatMessageInput`, `CometChatCard`. If one of these was load-bearing in the v4 app, check `cometchat-angular-v5-components/references/catalog.md` for a same-purpose v5 atom (`CometChatButtonComponent`, `CometChatAvatarComponent`, `CometChatDateComponent`, `CometChatPopoverComponent`, `CometChatCheckboxComponent`, `CometChatListItemComponent` cover several of these) before concluding the feature is gone.
+
+## 2b. Renames — bare v4 name → `…Component` suffix, SAME component (33)
+Not a removal. v4 exported the bare class name directly; v5's export always carries the `Component` suffix (the bare form is internal-only — `cometchat-angular-v5-core/SKILL.md` "Class name ≠ selector ≠ docs title"). Mechanical `sed`-safe rename, one for one:
+
+`CometChatConversations` · `CometChatUsers` · `CometChatGroups` · `CometChatGroupMembers` · `CometChatMessageHeader` · `CometChatMessageList` · `CometChatMessageComposer` · `CometChatMessageBubble` · `CometChatMessageInformation` · `CometChatIncomingCall` · `CometChatOutgoingCall` · `CometChatOngoingCall` · `CometChatCallButtons` · `CometChatCallLogs` · `CometChatAvatar` · `CometChatButton` · `CometChatCheckbox` · `CometChatRadioButton` · `CometChatDate` · `CometChatPopover` · `CometChatContextMenu` · `CometChatActionSheet` · `CometChatConfirmDialog` · `CometChatChangeScope` · `CometChatFullScreenViewer` · `CometChatEmojiKeyboard` · `CometChatMediaRecorder` · `CometChatListItem` · `CometChatTextBubble` · `CometChatImageBubble` · `CometChatVideoBubble` · `CometChatAudioBubble` · `CometChatFileBubble`
+
+Each rename adds the `Component` suffix to both the import and every usage site — e.g. `import { CometChatConversations } from '@cometchat/chat-uikit-angular'` becomes `import { CometChatConversationsComponent } from '@cometchat/chat-uikit-angular'`. Selectors are unaffected (kebab-case, unrelated to the class name).
+
+## 2c. One rename outside the pattern — theming's entry point
+`CometChatThemeService` (v4) → **`ThemeService`** (v5, `CometChat` prefix dropped — the one exception to §2b's suffix rule, because the whole theming *mechanism* changed too, not just the export name). See §3.
+
+## 3. Theming — `CometChatThemeService` + `*Style` objects → CSS variables + `ThemeService`
+v4 injected `CometChatThemeService` and called `theme.palette.setPrimary(...)`/`setMode(...)`; per-component `*Style` inputs (§2) covered everything CSS couldn't. v5 removes BOTH mechanisms — theming is CSS variables, full stop:
+```css
+/* styles.css */
+@import '@cometchat/chat-uikit-angular/styles/css-variables.css';
+
+.cometchat {
+  --cometchat-primary-color: #f76808;
+  --cometchat-neutral-color-300: #ffffff;
+}
+@media (prefers-color-scheme: dark) {
+  .cometchat {
+    --cometchat-primary-color: #f76808;
+    --cometchat-neutral-color-300: #311502;
+  }
+}
+```
+> ⚠️ **The official migration guide's own OS-theme-follow example is a hand-rolled `matchMedia` listener — do not port it.** That recipe predates the real v5 mechanism. `ThemeService` (verified against the installed 5.1.0 kit) already does this natively: `initFromPreference()` reads `prefers-color-scheme` on construction and keeps its own `matchMedia` listener live; `setTheme('dark' | 'light')` / `toggleTheme()` set it manually. It writes `data-theme` on `<html>` through Angular's `DOCUMENT` token — SSR-safe. Use it instead of migrating the guide's own snippet (`cometchat-angular-v5-core/references/theming.md`, `cometchat-angular-v5-customization/SKILL.md`). **Known kit divergence, not this pack's error:** `ThemeService`'s own docstrings additionally claim it persists a manual choice to `localStorage` — it does not (`AUDIT-143`, owner uikit). Don't port v4 persistence logic expecting v5's service to already do it.
+
+## 4. Event inputs → `@Output()` EventEmitters, `on` prefix dropped
+| v4 (callback input) | v5 (`@Output()`) |
+|---|---|
+| `[onItemClick]="handler"` | `(itemClick)="handler($event)"` |
+| `[onSelect]="handler"` | `(select)="handler($event)"` |
+| `[onError]="handler"` | `(error)="handler($event)"` |
+| `[onBack]="handler"` | `(backClick)="handler()"` |
+| `[onThreadRepliesClick]="handler"` | `(threadRepliesClick)="handler($event)"` |
+Mechanical per call site — drop `on`, lower-case the first letter after, move from `[ ]` to `( )`, add `($event)` if the v4 handler took an argument. **Verify the exact v5 output name against `cometchat-angular-v5-components/SKILL.md`'s per-component table before assuming a 1:1 drop-the-prefix match** — a few renamed further (`onBack` → `backClick`, not `back`).
+
+## 5. `DataSource`/`ChatConfigurator` → direct composition
+```diff
+- class MyDecorator extends DataSourceDecorator { getTextMessageBubble() { /* … */ } }
+- ChatConfigurator.enable(new MyDecorator());
+```
+```ts
+import { MessageBubbleConfigService } from '@cometchat/chat-uikit-angular';
+import { TemplateRef, inject } from '@angular/core';
+
+class ChatComponent {
+  private bubbleConfig = inject(MessageBubbleConfigService);
+  myBubble!: TemplateRef<unknown>;
+
+  registerBubble() {
+    // v5: register a template against the message TYPE_CATEGORY key — see
+    // custom-messages.md for send/fetch/render and the {type}_{category} key-format trap.
+    this.bubbleConfig.setBubbleView('order_update_custom', { contentView: this.myBubble });
+  }
+}
+```
+Full pattern — including the local-echo requirement raw SDK sends need (`publishMessageSent`) and the `{type}_{category}` key rule: `cometchat-angular-v5-features/references/custom-messages.md`.
+
+## 6. Shared web-component packages removed — pure standalone components now
+```diff
+- import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+- import "@cometchat/uikit-elements";   // side-effect import
+- @NgModule({ imports: [CometChatConversations], schemas: [CUSTOM_ELEMENTS_SCHEMA] })
+```
+```ts
+// v5: standalone, no schema, no side-effect import, full type safety
+import { Component } from '@angular/core';
+import { CometChatConversationsComponent } from '@cometchat/chat-uikit-angular';
+
+@Component({ standalone: true, imports: [CometChatConversationsComponent], template: `<cometchat-conversations></cometchat-conversations>` })
+export class ChatComponent {}
+```
+Every component must be in the consuming component's `imports: []` or it renders nothing, silently — the #1 v5 failure mode (`cometchat-angular-v5-core/SKILL.md`).
+
+## 7. State management — `ChatStateService` (optional, recommended)
+v4 repeated `[user]`/`[group]` on every component. v5's `ChatStateService` (verified: `setActiveUser`/`setActiveGroup`/`setActiveConversation`/`activeUser`/`activeGroup`/`activeConversation` signals/`clearActiveChat`) centralizes it — set once, every subscribed component reacts. Explicit `[user]`/`[group]` props still work and take priority when passed, so this is additive, not required. Full pattern: `cometchat-angular-v5-placement/references/core-surface.md`.
+
+## 8. Localization — method renames, not a new system
+Both majors use `CometChatLocalize`; the class survives, some methods don't:
+
+| v4 method | v5 method |
+|---|---|
+| `CometChatLocalize.setLocale("hi")` | `CometChatLocalize.setCurrentLanguage("hi")` |
+| `CometChatLocalize.getLocale()` | `CometChatLocalize.getCurrentLanguage()` |
+| `CometChatLocalize.init()` | not needed — auto-initializes |
+
+v5 adds a `translate` pipe (`{{ 'SEND_MESSAGE' | translate }}`) and expands to 19 languages (from 12). Verified in the angular-v5 catalog: `setCurrentLanguage`/`getCurrentLanguage` exist, `setLocale` does not.
+
+## Quick migration checklist
+- [ ] `npm install @cometchat/chat-uikit-angular@5 @cometchat/chat-sdk-javascript@^4.1.13 @cometchat/cards-angular@^1.0.0` (the last is an undocumented new 5.1.0 peer — see §1)
+- [ ] `npm uninstall @cometchat/uikit-elements @cometchat/uikit-resources @cometchat/uikit-shared`
+- [ ] Remove `CUSTOM_ELEMENTS_SCHEMA` + any `import "@cometchat/uikit-elements"` side-effect import
+- [ ] Convert to standalone components; every kit component in `imports: []` (§6)
+- [ ] Rebuild every composite (`…WithMessages`, `…WithDetails`, `CometChatThreadedMessages`) from modules (§2)
+- [ ] Grep for the 33 §2b bare names → add `Component` suffix
+- [ ] Grep for `CometChatThemeService` → `ThemeService`, migrate to CSS variables + `initFromPreference()` (§3) — not the guide's own `matchMedia` example
+- [ ] Delete every `*Style` input + object (§2), replace with CSS variable overrides
+- [ ] Grep for `[onXxx]` inputs → `(xxx)` outputs (§4)
+- [ ] Grep for `DataSource`/`DataSourceDecorator`/`ChatConfigurator`/`*Extension(Decorator)` → `MessageBubbleConfigService` or "nothing, it's auto-rendered" per §5
+- [ ] Optionally adopt `ChatStateService` (§7)
+- [ ] Grep for `setLocale`/`getLocale`/`CometChatLocalize.init()` → §8 renames
+- [ ] Build/typecheck green; grep confirms **zero** §2 names remain; app renders after `init→login`
+
+> **For anything not listed above, FETCH — do not guess and do not read the installed bundle.** The official guide (`{DOCS_BASE}/ui-kit/angular/customization/migration-guide.md`), the target component's `.md` twin, or the SDK page for a host-composed capability — all routed from `cometchat-angular-v5-core/references/docs-map.md`. Do NOT infer a v4→v5 mapping from `node_modules/**/*.d.ts`: the bundle tells you a symbol's *shape*, never whether it is the *sanctioned* replacement, and a `declare class` that isn't publicly exported reads identically to one that is (`CometChatSoundManager`, AUDIT-152).

package/skills/cometchat-angular-v5-patterns/SKILL.md

@@ -0,0 +1,107 @@
+---
+name: cometchat-angular-v5-patterns
+description: "Angular project-shape glue for CometChat — Angular CLI vs Nx, standalone vs NgModule, environment file wiring, SSR/Angular Universal, lazy routes, and RxJS/signals state patterns. Triggers: 'add cometchat to my nx workspace', 'ngmodule not standalone', 'angular universal ssr', 'lazy load the chat route', 'window is not defined'."
+license: "MIT"
+compatibility: "@cometchat/chat-uikit-angular ^5 (5.1.0–5.2.0 verified); Angular 17-21; CLI or Nx"
+metadata:
+  author: "CometChat"
+  version: "1.0.0"
+  tags: "cometchat angular patterns v5 nx ssr universal ngmodule standalone lazy rxjs signals"
+---
+
+> **Ground truth:** this skill is Angular PROJECT-SHAPE glue — CLI vs Nx, standalone vs NgModule, `environment.ts`, SSR, lazy routes. CometChat API surface belongs to `cometchat-angular-v5-core`; fetch any symbol via `cometchat-angular-v5-core/references/docs-map.md`. Where the Angular UI Kit docs genuinely do not cover a shape (SSR / Angular Universal), this file says so explicitly and marks the guidance as the pack's own — absence from the guide is never silently presented as documented.
+
+## Companion skills (read first)
+- `cometchat-angular-v5-core` — install, credentials, `init→login→render`. Assumed.
+- `cometchat-angular-v5-placement` — routing a chat page.
+
+## Use this skill when
+The blocker is the **project shape**, not CometChat: a monorepo, NgModules, SSR, or where config lives.
+
+## Detect the shape first
+| Signal | Shape | Deltas |
+| --- | --- | --- |
+| `nx.json` present | **Nx workspace** | env files, project-level `styles`, path aliases |
+| `angular.json` + `src/main.ts` | **Angular CLI** | the default; core's recipe applies as-is |
+| `app.module.ts` present | **NgModule** app | components go in `imports:` of the module |
+| `server.ts` / `@angular/ssr` | **SSR / Universal** | browser-only guards, see below |
+
+## NgModule instead of standalone
+The kit's components are standalone, which means an NgModule app imports them into the module's `imports` array — the same array, a different file:
+```ts
+// app.module.ts
+import { NgModule } from '@angular/core';
+import { CometChatConversationsComponent, CometChatMessageListComponent } from '@cometchat/chat-uikit-angular';
+import { ChatComponent } from './chat/chat.component';   // YOUR (non-standalone) component
+
+@NgModule({
+  declarations: [ChatComponent],
+  imports: [CometChatConversationsComponent, CometChatMessageListComponent],
+})
+export class AppModule {}
+```
+Do not add them to `declarations` — they are not yours to declare, and Angular will error. Init moves from `main.ts` into an `APP_INITIALIZER` provider on the module.
+
+## Nx workspaces
+Three things move:
+- **Environment files** live under the app project, e.g. `apps/<app>/src/environments/environment.ts`. `fileReplacements` go in that project's `project.json`, not a root `angular.json`.
+- **The kit stylesheet** is registered in the app project's build `styles` array with a workspace-root-relative path: `node_modules/@cometchat/chat-uikit-angular/styles/css-variables.css`.
+- **Shared wrapper libs** may re-export the kit's components; a lib that re-exports must also list them in its own `imports`, or consumers get the silent no-render.
+
+Nx does not change the CometChat API at all — only where config lives.
+
+## SSR / Angular Universal
+The kit is a browser client. The SDK touches `window`, `localStorage` and WebSockets, none of which exist on the server.
+
+```ts
+import { Component, inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
+import { environment } from '../environments/environment';
+
+@Component({ selector: 'app-root', standalone: true, template: '<router-outlet />' })
+export class AppComponent {
+  constructor() {
+    if (isPlatformBrowser(inject(PLATFORM_ID))) {
+      const { appId, region, authKey } = environment.cometchat;
+      // init only in the browser — on the server this throws "window is not defined"
+      CometChatUIKit.initFromSettings({
+        appId, region,
+        credentials: { authKey },
+        chatSDK: { presenceSubscription: { type: 'ALL_USERS' } },
+      });
+    }
+  }
+}
+```
+Rules:
+- Guard **every** init/login call with `isPlatformBrowser`.
+- Render chat components client-side only (`@defer` on hydration, or an `*ngIf` on a browser flag). Server-rendering them produces markup that immediately mismatches.
+- `ThemeService` is already SSR-safe — it writes `data-theme` through the `DOCUMENT` token rather than touching `document` directly.
+- Do not attempt to prerender a chat route; there is nothing meaningful to prerender.
+
+> **Not in the docs.** The Angular UI Kit docs do not cover SSR / Angular Universal. The guards above are derived from what the SDK touches (`window`, `localStorage`, WebSockets) and are the pack's own guidance — absence from the guide is not a signal that they are unnecessary.
+
+## Lazy-loading the chat route
+```ts
+{ path: 'chat', loadComponent: () => import('./chat/chat.component').then(m => m.ChatComponent) }
+```
+Lazy loading the route is fine and recommended — the kit is large. Init still happens once at bootstrap, **not** in the lazy chunk, or the first navigation pays for it and a second navigation re-runs it.
+
+## State — signals or RxJS, one of them
+`ChatStateService` exposes both (`activeUser` signal, `activeUser$` observable). Pick one style per component and stay in it; mixing produces two update paths for the same value.
+
+- Signals in templates: no subscription, no teardown, no `async` pipe.
+- Observables when composing with other streams: always `takeUntil(destroy$)` in `ngOnDestroy`.
+
+Never mirror either into your own field — see `placement`'s "two sources of truth" pitfall.
+
+## Common pitfalls
+1. **Kit components in `declarations`** → Angular error; they belong in `imports`.
+2. **Unguarded init under SSR** → `window is not defined` at build or first request.
+3. **Init inside a lazy chunk** → runs late, or twice.
+4. **Nx: env/styles edited at the workspace root** → silently no effect; they belong to the app project.
+5. **Signals and observables for the same value** → two update paths, drifting UI.
+
+## Verify it works
+`ng build` (and `ng build --ssr` where applicable) passes · chat renders in the browser · no `window is not defined` on the server · navigating to the lazy route once initialises once · config resolves in every configuration you build.

package/skills/cometchat-angular-v5-placement/SKILL.md

@@ -0,0 +1,133 @@
+---
+name: cometchat-angular-v5-placement
+description: "Where CometChat components go in an Angular app — the chat shell layout, thread and details panels, search, routing a chat page, and the mobile one-pane fallback. Triggers: 'add a chat page', 'put chat in my dashboard', 'conversation list beside messages', 'open a thread panel', 'chat route', 'make chat responsive'."
+license: "MIT"
+compatibility: "@cometchat/chat-uikit-angular ^5 (5.1.0–5.2.0 verified); Angular 17-21"
+metadata:
+  author: "CometChat"
+  version: "1.0.0"
+  tags: "cometchat angular placement v5 layout routing panels responsive shell"
+---
+
+> **Ground truth:** `@cometchat/chat-uikit-angular@5` (5.1.0–5.2.0 verified). Uses only components in the `angular-v5` catalog. The layouts here are built FROM the live task guides — `{DOCS_BASE}/ui-kit/angular/guides/new-chat.md`, `/guides/group-chat.md`, `/guides/threaded-messages.md`, `/guides/search-messages.md`, plus `/angular-conversation`, `/angular-one-to-one-chat`, `/angular-tab-based-chat` and `/api-reference/chat-state-service.md`; base + paths in `cometchat-angular-v5-core/references/docs-map.md`. Fetch layout-specific inputs from the component's `.md` twin rather than reading the installed bundle. **APPEND to the user's app — additive only** (`RULES.md`).
+
+## Companion skills (read first)
+- `cometchat-angular-v5-core` — install, credentials, `init→login→render`, and `references/layout.md` for the sizing rules this skill assumes.
+- `cometchat-angular-v5-components` — which component to use and its real inputs/outputs.
+
+## Use this skill when
+Deciding **where** chat lives: a dedicated route, a panel inside an existing dashboard, a widget, or the full multi-pane app.
+
+## Pick a placement
+| Ask | Placement | Recipe |
+| --- | --- | --- |
+| "add chat to my app" (unscoped) | **Core surface** — list + message pane, thread and search as panels | `references/core-surface.md` |
+| "the whole chat app" — users, groups, calls, details | **Combined app** — tabbed selector + panels | `references/combined-app.md` |
+| "chat inside my dashboard" | Embed the core surface in an existing layout slot | below |
+| "a support widget" | Single conversation — header + list + composer, no list pane | below |
+
+Default to the **core surface** for an unscoped request. Grow to the combined app only when asked.
+
+## Active item — use ChatStateService, not your own field
+Angular ships an injectable source of truth for the active chat. It exposes **signals** and **observables**; prefer signals in templates. This is what satisfies "the selected row is visually reflected" and makes panel-close round-trip correctly.
+
+```ts
+import { Component, computed, inject } from '@angular/core';
+import { CometChat } from '@cometchat/chat-sdk-javascript';
+import { ChatStateService, CometChatUIKitConstants } from '@cometchat/chat-uikit-angular';
+
+@Component({ selector: 'app-chat-shell', standalone: true, template: '' })
+export class ChatShellComponent {
+  readonly chatState = inject(ChatStateService);
+  // The service's signals are `T | null`, but the kit's inputs are optional
+  // (`T | undefined`) — bind the raw signal and Angular's strict template check
+  // rejects it. Normalise once, here.
+  readonly activeUser = computed(() => this.chatState.activeUser() ?? undefined);
+  readonly activeGroup = computed(() => this.chatState.activeGroup() ?? undefined);
+
+  // (itemClick) emits a Conversation — resolve the subject, then branch on its TYPE.
+  // A Conversation has no getGuid(), so duck-typing routes groups into the user slot
+  // and the message pane throws "getUid is not a function". See references/core-surface.md.
+  open(conversation: CometChat.Conversation) {
+    const subject = conversation.getConversationWith();
+    if (conversation.getConversationType() === CometChatUIKitConstants.MessageReceiverType.group) {
+      this.chatState.setActiveGroup(subject as CometChat.Group);
+    } else {
+      this.chatState.setActiveUser(subject as CometChat.User);
+    }
+  }
+  closeChat() { this.chatState.clearActiveChat(); }
+}
+```
+Available: `activeUser` `activeGroup` `activeConversation` (signals) · `activeUser$` `activeGroup$` `activeConversation$` (observables) · `setActiveUser/Group/Conversation` · `getActiveChatEntity()` · `clearActiveChat()`.
+
+Keeping a separate `selected` field alongside this is how the two drift and the list stops highlighting the open conversation.
+
+## Panels are columns, not overlays
+Thread, user/group details and search are **additional columns in the same flex shell**. Opening one must not resize or remount the message list, and closing must return to the exact prior layout.
+
+```html
+<div class="cc-shell">
+  <aside class="cc-side"><!-- list --></aside>
+  <main class="cc-main"><!-- header · list · composer --></main>
+  <aside class="cc-panel" *ngIf="threadParent()"><!-- thread --></aside>
+</div>
+```
+```css
+.cc-shell { display: flex; height: 100dvh; width: 100%; min-height: 0; overflow: hidden; }
+.cc-side  { width: 320px; min-height: 0; overflow: hidden; }
+.cc-main  { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
+.cc-panel { width: 360px; min-height: 0; overflow: hidden; border-left: 1px solid var(--cometchat-border-color-default); }
+```
+`min-height: 0` on every column is required — see core's `references/layout.md`.
+
+## Routing a chat page
+```ts
+// app.routes.ts
+import { Routes } from '@angular/router';
+export const routes: Routes = [
+  { path: 'chat', loadComponent: () => import('./chat/chat.component').then(m => m.ChatComponent) },
+  { path: 'chat/:uid', loadComponent: () => import('./chat/chat.component').then(m => m.ChatComponent) },
+];
+```
+Two rules:
+1. **Do not re-init CometChat per route.** Init happens once at bootstrap (core). A route guard may await login, never re-init.
+2. **Tear down on leave.** Every subscription in the chat component needs `takeUntil(destroy$)` in `ngOnDestroy`, or navigating away leaks listeners that keep firing.
+
+Reading `:uid` into the active chat belongs in the component's `ngOnInit`, resolved through `ChatStateService`.
+
+## Embedding in an existing dashboard
+Give the host slot a resolved height and let the shell fill it — do **not** put the kit inside a container sized by its content.
+```css
+.dashboard-chat-slot { height: calc(100dvh - var(--app-header-height)); min-height: 0; display: flex; }
+```
+If the surrounding app uses `transform` or `filter` on an ancestor, the height chain breaks — core's `layout.md` covers why.
+
+## Mobile — one pane at a time (mandatory for any multi-pane layout)
+Below ~768px show the list **or** the conversation, never both.
+```html
+<div class="cc-shell">
+  <aside class="cc-side" [hidden]="isMobile() && hasActiveChat()"><!-- list --></aside>
+  <main class="cc-main" [hidden]="isMobile() && !hasActiveChat()"><!-- message pane --></main>
+</div>
+```
+Drive `[hidden]` from the same `ChatStateService` state as the message components, and give the mobile conversation view a back control that calls `clearActiveChat()`. A multi-pane layout squeezed onto a phone is a defect, not a style choice.
+
+## Common pitfalls
+1. **Two sources of truth** — a local `selected` field plus `ChatStateService`. They drift; the list stops highlighting.
+2. **Panels as overlays** — thread rendered over the list instead of beside it, so closing does not restore layout.
+3. **Re-initialising per route** — init belongs at bootstrap, once.
+4. **No teardown on navigate** — leaked listeners keep firing against a destroyed view.
+5. **Unsized embed slot** — the kit collapses to zero height inside a content-sized container.
+6. **Both panes on mobile** — unusable at 375px.
+
+## Verify it works
+Clicking a conversation opens it AND highlights the row · opening a thread does not resize the message list · closing returns to the exact prior layout · navigating away and back does not duplicate messages · at 375px only one pane is visible with a working back control · no console errors.
+
+## Explain what you built (REQUIRED close)
+Tell the developer what changed, naming the files: the layout you built — which panes exist, and how the mobile one-pane fallback behaves. Flag anything dev-only as dev-only, and say what you did **not** touch — this is additive.
+
+**Then offer these THREE options as a SELECTABLE choice and WAIT for the pick — never auto-continue (`RULES.md` §19):**
+1. **Add another feature** → a feature from `features.angular-v5.json`, or growing the surface — users/groups tabs, a details panel, calling. **Never offer an `auto` entry** (reactions, mentions, receipts, typing, media) — those are core in v5 and already on.
+2. **Customize theming** → `cometchat-angular-v5-customization`.
+3. **Test it manually** → do nothing further; hand back so the user runs it.