@hiver/skills 1.0.1 → 1.0.3

package/collections/extension/skills/build-component/references/icons.md

@@ -0,0 +1,81 @@
+# Icons
+
+How to import from `@hiver/hiver-ui-kit`:
+
+```js
+import { brandIcons, icons } from '@hiver/hiver-ui-kit';
+// <brandIcons.Star />
+// <icons.AccountCircle />
+```
+
+## Resolution priority
+
+When a Figma design contains an icon, resolve it in this order:
+
+1. **User-provided SVG asset** — if the user supplied an `.svg` file, import it directly:
+   ```js
+   import iconName from 'path/to/icon.svg';
+   <img src={iconName} alt="description" />
+   ```
+2. **`brandIcons`** — Hiver-designed icons (see "Brand icon catalog" below).
+3. **`icons`** — curated MUI icons re-exported from hui-kit (see "MUI icon catalog" below).
+4. **`@mui/icons-material`** — **last resort only**, when the icon is not in the design system **and** the user has not provided an asset.
+5. **Never** import icons from FontAwesome, Heroicons, or any other third-party icon library.
+
+## How to match a Figma icon to a code name
+
+1. **Prefer the Figma layer/component name** if the design exposes one (e.g. a layer named `Brand/Star` → `brandIcons.Star`).
+2. **Otherwise, match visually** against the catalog sheets embedded below. Each icon is rendered with its exact export name underneath.
+3. The export name is what you use in code — including any typos preserved from the design system (see Notes).
+
+## Brand icon catalog (`brandIcons`)
+
+![Brand icons catalog](./icons/brand-icons.png)
+
+**Hiver Logo**
+- `Logo`
+
+**Brand icons** (box 20×20, live area 18×18, stroke 1.4)
+- `SharedMailbox`, `Analytics`, `EmailTemplates`, `Settings`, `HiverAlerts`, `Activity`, `AutoAssignment`, `Workload`, `Lable`, `Permalink`
+- `Star`, `Edit`, `Filters`, `HiverChat`, `AircallPhone`, `Aavatar`, `Unassigned`, `Mine`, `Team`, `Pending`
+- `Closed`, `Tags`, `Crown`, `Dashboard`, `DashboardInactive`, `SharedInboxNav`, `SharedInboxNavInactive`, `SharedLabel`, `SharedLabelInactive`, `KnowledgeBase`
+- `KnowledgeBaseInactive`, `Connector`, `ConnectorInactive`, `SettingsNav`, `SettingsNavInactive`, `UserRole`, `UserRoleInactive`
+
+**Activity icons** (box 20×20, live area 16×16, stroke 1.4)
+- `Status`, `Tag`, `Inbox`, `AlertTriangle`, `EnvelopeDownload`, `ActivityStar`, `EnvelopeUpload`, `Envelope`, `ActivityEdit`, `CloseCircle`, `CheckAction`, `UserCheck`
+
+**Settings icons** (box 24×24, live area 22×22, stroke 1.4)
+- `AdminPanel`, `Sliders`, `Compass`, `SwitchAccount`, `Gift`, `MessageCircle`, `LifeBuoy`
+
+## MUI icon catalog (`icons`)
+
+![MUI icons catalog](./icons/mui-icons.png)
+
+- `AccountCircle`, `Add`, `Alarm`, `Close`, `Phone`, `ArchiveOutlined`, `ArrowBack`, `ArrowBackIos`, `ArrowDropDown`, `ArrowDropUp`, `ArrowForward`
+- `ArrowOutward`, `CalendarToday`, `CalendarTodayOutlined`, `CalendarTodayOutlinedIcon`, `Cancel`, `CancelOutlined`, `CheckCircle`, `ChevronRightOutlined`, `CodeSharp`, `DeleteOutline`, `DownloadOutlined`
+- `DragIndicator`, `EditOutlined`, `Error`, `ErrorOutline`, `GroupsOutlined`, `InfoOutlined`, `LabelOutlined`, `Link`, `LockOutlined`, `MailOutlined`, `MicNone`
+- `MoreVert`, `NotificationsOutlined`, `OpenInNew`, `Pause`, `PersonOutline`, `PersonOutlined`, `PlayArrow`, `Public`, `Search`, `Settings`, `SettingsOutlined`
+- `StickyNote2Outlined`, `ThumbDownAlt`, `ThumbDownOffAlt`, `ThumbUpAlt`, `ThumbUpOffAlt`, `TimerOutlined`, `TrackChanges`, `UnarchiveOutlined`, `Voicemail`, `Warning`, `WarningAmber`
+- `ArrowRightAlt`, `Delete`, `Email`, `Favorite`
+
+## Notes — Figma → code gotchas
+
+- **Typos preserved in exports** — these match the Figma names, so map literally; do not auto-correct:
+  - `Lable` (not `Label`)
+  - `Aavatar` (not `Avatar`)
+- **`Edit` collision** — three similar icons:
+  - `brandIcons.Edit` — pen-on-paper brand icon (yellow accent)
+  - `brandIcons.ActivityEdit` — green envelope with a pen, activity style
+  - `icons.EditOutlined` — plain MUI outlined pencil
+- **`Settings` collision** — five similar names:
+  - `brandIcons.Settings`, `brandIcons.SettingsNav`, `brandIcons.SettingsNavInactive`
+  - `icons.Settings`, `icons.SettingsOutlined`
+  Pick by Figma category section and visual.
+- **`Star` collision**:
+  - `brandIcons.Star` — yellow filled brand star
+  - `brandIcons.ActivityStar` — purple activity star
+- **`Tag` vs `Tags`**:
+  - `brandIcons.Tags` — brand (plural, box 20×20 live 18×18)
+  - `brandIcons.Tag` — activity (singular, box 20×20 live 16×16)
+- **Inactive variants** — many brand icons have `*Inactive` siblings (`DashboardInactive`, `SharedInboxNavInactive`, `SharedLabelInactive`, `KnowledgeBaseInactive`, `ConnectorInactive`, `SettingsNavInactive`, `UserRoleInactive`). Use the inactive variant for the unselected/disabled state of a nav item.
+- **`UserCheck`** — present in `brandIcons` exports but not visible on the current Figma sheet. Use it if a design clearly needs it; otherwise prefer the activity-style icons documented above.

package/collections/extension/skills/build-component/references/layout-and-structure.md

@@ -0,0 +1,8 @@
+# Layout and Structure
+
+- **Prefer `Stack` component** for flex layouts instead of raw flexbox CSS
+  - Use `Stack` with `direction="row"` or `direction="column"`
+  - Use `gap` prop for spacing between items
+  - Example: `<Stack direction="row" gap={2} alignItems="center">`
+- **Use `Box`** for simple container elements or when you need custom styling
+- use `sx` prop for component-specific styling

package/collections/extension/skills/build-component/references/state-management.md

@@ -0,0 +1,25 @@
+# State Management
+
+## Identifying State
+
+- **Connect dynamic elements to state**:
+  - User inputs (form fields, toggles, selections)
+  - Data that changes based on user interactions
+  - UI state (modals open/closed, tabs active, loading states)
+
+## State Implementation
+
+- **Use React hooks** for local component state:
+  - `useState` for simple state values
+  - `useReducer` for complex state with multiple sub-values
+  - `useMemo` for computed/derived values
+  - `useCallback` for memoized functions
+- **Add proper event handlers**:
+  - `onChange` handlers for inputs
+  - `onClick` handlers for buttons/actions
+  - `onSubmit` handlers for forms
+  - Ensure handlers update state appropriately
+- **Handle state updates correctly**:
+  - Use functional updates when state depends on previous state: `setCount(prev => prev + 1)`
+  - Batch related state updates when possible
+  - Clean up subscriptions/effects in `useEffect` cleanup functions

package/collections/extension/skills/build-component/references/ui-kit-and-styling.md

@@ -0,0 +1,13 @@
+# UI Kit and Styling
+
+- **Use `@hiver/hiver-ui-kit` package** for all UI components and styling
+  - This package uses Material-UI (MUI) internally, so follow MUI patterns
+  - Import components directly from `@hiver/hiver-ui-kit`: `import { Stack, Button, Typography, TextField, Select } from '@hiver/hiver-ui-kit'`
+- **Map Figma to design tokens**: Use [palette/README.md](../palette/README.md) for colors and [typography/README.md](../typography/README.md) for text styles so Figma specs map to the correct `theme.palette.*` and `<Typography variant="...">`.
+- **Analyze the Figma selection** to identify all required components:
+  - Form inputs: Use `TextField`, `Select`, `Checkbox`, `Radio`, etc.
+  - Typography: Use `Typography` with variants from the typography reference (e.g. `body1_regular`, `h2_medium`, `caption1_medium`)
+  - Layout: Use `Stack`, `Box`, `Grid` for layout structure
+  - Buttons: Use `Button` with appropriate variants (`contained`, `outlined`, `text`)
+  - Modals: Use `Modal`
+  - Other: `Tooltip`, `CircularProgress`, `IconButton`, etc.

package/collections/extension/skills/build-component/typography/README.md

@@ -0,0 +1,3 @@
+# Typography reference (`@hiver/hiver-ui-kit`)
+
+See [variants.md](variants.md) for all typography variants and Figma mapping.

package/collections/extension/skills/build-component/typography/variants.md

@@ -0,0 +1,139 @@
+# Typography reference (`@hiver/hiver-ui-kit`)
+
+Map Figma text styles to `<Typography variant="...">`. Match by fontSize + fontWeight (regular 400, medium 500, semiBold 600, bold 700).
+
+**Font families:**
+- Legacy variants (`h1_*`–`h5_*`, `body0_5_*`–`body4_*`, `caption1_*`, `caption2_*`, `overline_medium`, `overline_semiBold`, `buttonLarge`/`buttonMedium`/`buttonSmall`, `chip`) use **Open Sans**.
+- 2026 tokens (`body_lg_*`–`body_xs_*`, `heading_lg_*`–`heading_sm_*`, `display_lg_*`/`display_md_*`, `caption_regular`/`caption_medium`, `overline_regular`) use **Inter**.
+
+## Heading variants
+
+| Variant | fontSize | fontWeight | lineHeight | letterSpacing | Figma match |
+|---------|----------|------------|------------|---------------|-------------|
+| `h1_medium` | 20 | 500 | 28px | -0.16px | Large title |
+| `h1_semiBold` | 20 | 600 | 28px | -0.16px | |
+| `h1_bold` | 20 | 700 | 28px | -0.16px | |
+| `h2_regular` | 16 | 400 | 21px | -0.16px | Section title |
+| `h2_medium` | 16 | 500 | 21px | -0.16px | |
+| `h2_semiBold` | 16 | 600 | 21px | -0.16px | |
+| `h2_5_regular` | 15 | 400 | 18px | -0.16px | |
+| `h2_5_medium` | 15 | 500 | 18px | -0.16px | |
+| `h2_5_semiBold` | 15 | 600 | 18px | -0.16px | |
+| `h3_regular` | 14 | 400 | 18px | 0 | Subsection |
+| `h3_medium` | 14 | 500 | 18px | 0 | |
+| `h3_semiBold` | 14 | 600 | 18px | 0 | |
+| `h4_regular` | 13 | 400 | 16px | 0 | |
+| `h4_medium` | 13 | 500 | 16px | 0 | |
+| `h4_semiBold` | 13 | 600 | 16px | 0 | |
+| `h5_regular` | 12 | 400 | 14px | -0.12px | Small heading |
+| `h5_medium` | 12 | 500 | 14px | -0.12px | |
+| `h5_semiBold` | 12 | 600 | 14px | -0.12px | |
+| `h5_bold` | 12 | 700 | 14px | -0.12px | |
+
+## Body variants
+
+| Variant | fontSize | fontWeight | lineHeight | letterSpacing |
+|---------|----------|------------|------------|---------------|
+| `body0_5_regular` | 16 | 400 | 22px | 0 |
+| `body0_5_medium` | 16 | 500 | 22px | 0 |
+| `body0_5_semiBold` | 16 | 600 | 22px | 0 |
+| `body1_regular` | 14 | 400 | 21px | 0 |
+| `body1_medium` | 14 | 500 | 21px | 0.25px |
+| `body1_semiBold` | 14 | 600 | 21px | 0 |
+| `body2_regular` | 13 | 400 | 18px | 0 |
+| `body2_medium` | 13 | 500 | 18px | 0 |
+| `body2_semiBold` | 13 | 600 | 18px | 0 |
+| `body3_regular` | 12 | 400 | 14px | 0 |
+| `body3_medium` | 12 | 500 | 14px | 0 |
+| `body3_semiBold` | 12 | 600 | 14px | 0 |
+| `body4_regular` | 11 | 400 | 12px | 0 |
+| `body4_medium` | 11 | 500 | 12px | 0 |
+| `body4_semiBold` | 11 | 600 | 12px | 0 |
+
+## Caption & overline
+
+| Variant | fontSize | fontWeight | lineHeight | letterSpacing | Notes |
+|---------|----------|------------|------------|---------------|-------|
+| `caption1_regular` | 12 | 400 | 16px | 0.25px | |
+| `caption1_medium` | 12 | 500 | 16px | 0.25px | |
+| `caption1_semiBold` | 12 | 600 | 16px | 0.25px | |
+| `caption2_regular` | 11 | 400 | 14px | 0.20px | |
+| `caption2_medium` | 11 | 500 | 14px | 0.20px | |
+| `caption2_semiBold` | 11 | 600 | 14px | 0.20px | |
+| `overline_medium` | 11 | 500 | 18px | 0 | UPPERCASE |
+| `overline_semiBold` | 11 | 600 | 18px | 0 | UPPERCASE |
+
+## Button & chip
+
+| Variant | fontSize | fontWeight | lineHeight | letterSpacing |
+|---------|----------|------------|------------|---------------|
+| `buttonLarge` | 14 | 500 | 28px | 0.2px |
+| `buttonMedium` | 13 | 500 | 24px | 0.2px |
+| `buttonSmall` | 12 | 500 | 20px | 0.4px |
+| `chip` | 12 | 500 | 12px | 0.4px |
+
+## Typography 2026 tokens (Inter)
+
+Canonical 2026 design tokens. Use these for new UI built against the 2026 design system. Font family is **Inter**.
+
+### Display
+
+| Variant | fontSize | fontWeight | lineHeight | letterSpacing |
+|---------|----------|------------|------------|---------------|
+| `display_lg_semiBold` | 28 | 600 | 36px | 0.01em |
+| `display_lg_bold` | 28 | 700 | 36px | 0.01em |
+| `display_md_semiBold` | 24 | 600 | 32px | 0.01em |
+| `display_md_bold` | 24 | 700 | 32px | 0.01em |
+
+### Heading
+
+| Variant | fontSize | fontWeight | lineHeight | letterSpacing |
+|---------|----------|------------|------------|---------------|
+| `heading_lg_medium` | 20 | 500 | 28px | -0.005em |
+| `heading_lg_semiBold` | 20 | 600 | 28px | -0.005em |
+| `heading_md_medium` | 18 | 500 | 28px | -0.005em |
+| `heading_md_semiBold` | 18 | 600 | 28px | -0.005em |
+| `heading_sm_medium` | 16 | 500 | 22px | -0.005em |
+| `heading_sm_semiBold` | 16 | 600 | 22px | -0.005em |
+
+### Body
+
+| Variant | fontSize | fontWeight | lineHeight | letterSpacing |
+|---------|----------|------------|------------|---------------|
+| `body_lg_regular` | 16 | 400 | 24px | -0.005em |
+| `body_lg_medium` | 16 | 500 | 24px | -0.005em |
+| `body_lg_semiBold` | 16 | 600 | 24px | -0.005em |
+| `body_md_regular` | 14 | 400 | 20px | -0.005em |
+| `body_md_medium` | 14 | 500 | 20px | -0.005em |
+| `body_md_semiBold` | 14 | 600 | 20px | -0.005em |
+| `body_sm_regular` | 13 | 400 | 19px | -0.005em |
+| `body_sm_medium` | 13 | 500 | 19px | -0.005em |
+| `body_sm_semiBold` | 13 | 600 | 19px | -0.005em |
+| `body_xs_regular` | 12 | 400 | 18px | -0.005em |
+| `body_xs_medium` | 12 | 500 | 18px | -0.005em |
+| `body_xs_semiBold` | 12 | 600 | 18px | -0.005em |
+
+### Caption & overline (2026)
+
+| Variant | fontSize | fontWeight | lineHeight | letterSpacing | Notes |
+|---------|----------|------------|------------|---------------|-------|
+| `caption_regular` | 12 | 400 | 14px | 0.01em | |
+| `caption_medium` | 12 | 500 | 14px | 0.01em | |
+| `overline_regular` | 12 | 400 | 14px | 0.01em | UPPERCASE |
+
+> Note: a 2026 `overline_medium` token also exists in the theme (Inter, 12 / 500 / 14px / 0.01em / UPPERCASE) and shares its name with the legacy Open Sans `overline_medium` (11 / 500 / 18px). The 2026 spread is applied after the legacy block, so the Inter version wins at runtime — use accordingly.
+
+## Usage
+
+```jsx
+<Typography variant="h2_medium">Section title</Typography>
+<Typography variant="body1_regular">Body text</Typography>
+<Typography variant="caption1_medium" color="text.secondary">Caption</Typography>
+
+// 2026 tokens
+<Typography variant="heading_lg_semiBold">Page title</Typography>
+<Typography variant="body_md_regular">Body text</Typography>
+<Typography variant="display_lg_bold">Hero</Typography>
+```
+
+**Figma → variant:** Compare Figma text style fontSize and weight (Regular/Medium/Semi Bold/Bold) to the tables above and pick the closest match. For new 2026 designs, prefer the Inter tokens.

package/collections/extension/skills/ci-cd/SKILL.md

@@ -0,0 +1,67 @@
+---
+name: ci-cd
+description: Complete knowledge of the Hiver Chrome Extension CI/CD pipelines across Dev, Pre-prod, and Production. Covers all pipeline files, dependency chains, and downstream impact of changes. Use when modifying CI/CD pipelines, adding build outputs, changing build commands, adding env vars, updating S3 targets, debugging pipeline failures, or any task involving GitHub Actions, CodeBuild buildspecs, Docker build scripts, or deployment scripts.
+---
+
+# Hiver Extension CI/CD
+
+## Pipeline Map
+
+```
+Dev (PR on qa-* branch)
+  1. GitHub Action:   .github/workflows/Dev-Extension-Build.yml
+  2. CodeBuild (PR create): ci-cd/buddy/buildspec-create-v3.yaml
+  3. CodeBuild (PR merge):  ci-cd/buddy/buildspec-merge-v3.yaml
+
+Pre-Production (manual trigger)
+  4. GitHub Action:   .github/workflows/Pre-production.yaml
+
+Production
+  5a. CodeBuild:      codebuild/extension-buildspec.yml
+  5b. CodeBuild:      codebuild/webstore-buildspec-v3.yaml
+```
+
+## Modification Guides
+
+### Adding a new JS bundle output file
+Touches **all three environments** — update in 4 places:
+1. `docker/v3/build_dev_extension.sh` — add `mv` to rename from `dist/` output name to final name
+2. `.github/workflows/Pre-production.yaml` — add explicit `cp` in "Prepare extension package" step
+3. `deployment/PushBundleToS3.py` — add entry to `BUNDLE_NAMES` dict; update `validate_upload()` count
+4. `deployment/webstore-deployment/pushBundlesToExtensionPackage.py` — add file to CDN fetch list
+
+> Pre-prod uses manual per-file `cp` (not a dict), making it the most fragile env when new files are added.
+
+### Changing a build command (backbone or React)
+Each environment has its own copy — update all three:
+- Dev: `Dev-Extension-Build.yml`
+- Pre-prod: `Pre-production.yaml`
+- Production: `codebuild/extension-buildspec.yml`
+
+### Adding an env var
+| Layer | Where to add |
+|-------|-------------|
+| GH Actions | top-level `env:` block or step-level `env:` |
+| CodeBuild | `env.variables:` in the buildspec YAML |
+| Docker build-time | `--build-arg` in the `.sh` script **AND** `ARG` in `Dockerfile.v3` |
+| Docker runtime | `-e KEY=VALUE` in `docker run` command in `buildspec-merge-v3.yaml` |
+
+### Changing S3 targets
+| Env | File to change |
+|-----|---------------|
+| Dev | `docker/v3/zip_extension.sh` |
+| Pre-prod | `Pre-production.yaml` — "Create zip file" step |
+| Production bundles | `deployment/PushBundleToS3.py` |
+| Production webstore | `codebuild/webstore-buildspec-v3.yaml` |
+
+### Gainsight changes
+Update **both** scripts — `codebuild/gainsight_update.sh` (pre-prod + prod) and `updateGainsight.sh` (dev + prod). Production runs both.
+
+## Reference files
+
+**Load lazily — only read a reference file when you need it. Do NOT read all files upfront.**
+
+| Topic | File | When to load |
+|-------|------|--------------|
+| Full file registry (all pipeline files with descriptions) | [references/file-registry.md](references/file-registry.md) | When you need to identify which file to edit |
+| Bundle renaming map, failure patterns, key constants | [references/bundle-and-troubleshooting.md](references/bundle-and-troubleshooting.md) | When debugging failures or working with bundle names |

package/collections/extension/skills/ci-cd/references/bundle-and-troubleshooting.md

@@ -0,0 +1,50 @@
+# Bundle Renaming Map & Troubleshooting
+
+## Bundle Renaming Map
+
+| `dist/` filename | Final name in extension package |
+|------------------|--------------------------------|
+| `bundle.js` | `gx_combined.js` |
+| `bundle.expanded.js` | `gx_combined.expanded.js` |
+| `bundle.react.prod.js` | `gx_react_combined.js` |
+| `bundle.react.prod.js.map` | `gx_react_combined.js.map` |
+| `bundle.react.prod.expanded.js` | `gx_react_combined.expanded.js` |
+| `src/css/hiver_extension.css` | `hiver_extension.css` |
+
+Renaming layer per env:
+- **Dev:** `docker/v3/build_dev_extension.sh` (`mv` commands)
+- **Pre-prod:** manual `cp` with new name in `Pre-production.yaml`
+- **Production:** `deployment/PushBundleToS3.py` `BUNDLE_NAMES` dict (`os.rename`)
+
+---
+
+## Common Failure Patterns
+
+| Symptom | Root cause | Where to check |
+|---------|-----------|----------------|
+| Dev zip upload skipped | Neither `CODEBUILD_BUILD_ID` nor `GITHUB_RUN_ID` is set | `docker/v3/zip_extension.sh` env detection block |
+| Bundle count validation fails (prod) | New file added to build but not registered in push script | `BUNDLE_NAMES` + `validate_upload()` in `PushBundleToS3.py` |
+| `APP_ENV` empty in create buildspec | Deployer has no available buddy env to assign | Check `alloc_result.txt` output, deployer capacity |
+| Yarn install fails | NPM token missing | `scripts/setup-npm-token.sh` + `EXT_NPM_TOKEN` secret |
+| PHP config fails | `codebuild/decrypted_key.yaml` missing/malformed | File + `config/configManager.php` paths |
+| Docker build arg missing inside image | Arg not passed via `--build-arg` | `.sh` docker build command + `Dockerfile.v3` `ARG` declaration |
+| Wrong `APP_ENV` in dev extension | Expected — NAMESPACE in dev is injected by `buddy download-extension` CLI, not CI | `docker/v3/replace_env.sh` |
+
+---
+
+## Key Constants
+
+| Constant | Value |
+|----------|-------|
+| Dev S3 bucket | `landing-codebuld` |
+| Pre-prod S3 bucket | `pre-prod-extension` |
+| Webstore staging bucket | `testextension/test` |
+| Gainsight CDN S3 | `hivercdn` |
+| Pre-prod `APP_ENV` | `v2master` (hardcoded) |
+| Merge pipeline `APP_ENV` | `dev` (hardcoded in `docker run`) |
+| ECR service name | `extension` |
+| Dockerfile | `Dockerfile.v3` |
+| Deployer base URL | `https://deployer.hiver.space` |
+| Buddy CI URL | `http://buddy-ci.hiver.space` |
+| Production version increment | `+0.1` per build |
+| Chrome Web Store action var | `WEB_STORE_ACTION` (`update_and_publish` / `publish` / default=update only) |

package/collections/extension/skills/ci-cd/references/file-registry.md

@@ -0,0 +1,28 @@
+# CI/CD Full File Registry
+
+## GitHub Actions
+- `.github/workflows/Dev-Extension-Build.yml` — Dev build on `qa-*` PR events
+- `.github/workflows/Pre-production.yaml` — Manual pre-prod build
+
+## CodeBuild Buildspecs
+- `ci-cd/buddy/buildspec-create-v3.yaml` — PR create: buddy env assign + Docker build + ECR push
+- `ci-cd/buddy/buildspec-merge-v3.yaml` — PR merge: builds `:latest` Docker image, runs container
+- `codebuild/extension-buildspec.yml` — Production: full JS build, pushes bundles to CDN S3
+- `codebuild/webstore-buildspec-v3.yaml` — Production: packages zip, publishes to Chrome Web Store
+
+## Docker / Bash Scripts
+- `ci-cd/buddy/build_docker_image_dev_v3.sh` — Builds image tagged `${GITHUB_SHA}`, notifies deployer
+- `ci-cd/buddy/build_docker_image_latest.sh` — Builds image tagged `:latest` + resolved SHA
+- `docker/v3/build_dev_extension.sh` — Assembles dev extension folder, renames bundles
+- `docker/v3/replace_env.sh` — Injects `APP_ENV`/`NAMESPACE` placeholders via `sed`
+- `docker/v3/zip_extension.sh` — Zips extension, uploads to S3 `landing-codebuld`
+- `codebuild/gainsight_update.sh` — Downloads Gainsight JS, pushes to `s3://hivercdn`
+
+## Python Deployment Scripts
+- `deployment/GetNextbundleVersion.py` — Reads S3 for latest version, increments +0.1, writes `version.txt`
+- `deployment/PushBundleToS3.py` — Renames + uploads bundles/CSS to CDN S3, validates count, updates DB
+- `deployment/webstore-deployment/pushBundlesToExtensionPackage.py` — Fetches bundles from CDN into extension folder
+- `deployment/webstore-deployment/updateItemInStore.py` — Update without publish
+- `deployment/webstore-deployment/publishItemToStore.py` — Publish only
+- `deployment/webstore-deployment/updateAndPublishItemToStore.py` — Update + publish
+- `deployment/webstore-deployment/updateChromeStoreReleaseInfo.py` — Writes release info to DB

package/collections/extension/skills/connect-api/SKILL.md

@@ -0,0 +1,23 @@
+---
+name: connect-api
+description: API integration rules for React Query, custom hooks, and Hiver fetchers. Use when connecting to APIs, creating data-fetching or mutation hooks, or working with React Query and service utilities.
+---
+
+# Connect API
+
+When integrating APIs, use React Query for data and mutations, put hooks in a `hooks` folder, and use the correct fetcher from `react-extn/src/utils`. Define query keys in `constants/queries.js`.
+
+## Reference files
+
+**Load lazily — only read a reference file when you are about to perform that specific task. Do NOT read all files upfront.**
+
+| Topic | File | When to load |
+|-------|------|--------------|
+| Hook organization | [references/hook-organization.md](references/hook-organization.md) | Before creating a new hook file |
+| React Query (queries & mutations) | [references/react-query-usage.md](references/react-query-usage.md) | Before writing useQuery/useMutation |
+| Query key management | [references/query-keys.md](references/query-keys.md) | Before defining query keys |
+| Data fetcher selection | [references/data-fetchers.md](references/data-fetchers.md) | Before choosing a fetcher utility |
+| API call structure | [references/api-call-structure.md](references/api-call-structure.md) | Before writing the fetch call body |
+| URL and method placeholders | [references/url-placeholders.md](references/url-placeholders.md) | Only when constructing dynamic URLs |
+| Error handling | [references/error-handling.md](references/error-handling.md) | Only when adding error/loading states |
+| Best practices | [references/best-practices.md](references/best-practices.md) | Only when uncertain about a pattern |

package/collections/extension/skills/connect-api/references/api-call-structure.md

@@ -0,0 +1,84 @@
+# API Call Structure
+
+## For Modern Auth Fetchers (HiverNewAuthCall based)
+
+- **Use async/await pattern** with error handling that returns `[data, null]` or `[null, error]`:
+  - Applies to: `AiBifrostAuth`, `CustomFieldsService`, `AutomationService`, `HiverSlaNewAuth`, `CsatNewAuthCall`, `TagBifrostAuth`, `HiverIntegrationBifrostAuth`, `HiverChatBifrostAuth`, `HiverNotesAxios`, `OutOfOfficeService`, `CustomerPortalApiService`, `HiverNotifCall`
+  ```javascript
+  import { AiBifrostAuth } from "../../../../utils/AiNewAuth";
+  // OR any other modern auth fetcher
+  
+  const fetchData = async (param) => {
+    try {
+      const response = await AiBifrostAuth({
+        url: `/v1/endpoint?param=${param}`,
+        method: "GET", // or "POST", "PUT", "PATCH", "DELETE"
+        data: {}, // For POST/PUT/PATCH
+      });
+      return [response.data, null];
+    } catch (err) {
+      return [null, err.message];
+    }
+  };
+  ```
+
+## For createAxios based Fetchers
+
+- **Use async/await pattern** with error handling:
+  - Applies to: `AiAxios`, `HiverCustomerPortalAxios`
+  ```javascript
+  import { AiAxios } from "../../../../utils/AiAxios";
+  
+  const fetchData = async (param) => {
+    try {
+      const response = await AiAxios({
+        url: `/v1/endpoint?param=${param}`,
+        method: "GET", // or "POST", "PUT", "PATCH", "DELETE"
+        data: {}, // For POST/PUT/PATCH
+      });
+      return [response.data, null];
+    } catch (err) {
+      return [null, err.message];
+    }
+  };
+  ```
+
+## For Legacy HiverAxios
+
+- **Use async/await with try/catch**:
+  ```javascript
+  import { HiverAxios } from "h-extension-common";
+  
+  const fetchData = async (payload) => {
+    try {
+      const response = await HiverAxios({
+        url: `/api/endpoint`,
+        type: "GET", // or "POST", "PUT", "DELETE" - Note: uses "type" not "method"
+        params: payload, // Request body/params
+      });
+      return [response.data, null];
+    } catch (err) {
+      return [null, err.message];
+    }
+  };
+  ```
+
+## For HiverAnalyticsAxios
+
+- **Use async/await with try/catch**:
+  ```javascript
+  import { HiverAnalyticsAxios } from "../../../../utils/HiverAnalyticsAxios";
+  
+  const fetchData = async (payload) => {
+    try {
+      const response = await HiverAnalyticsAxios({
+        url: `/api/endpoint`,
+        type: "GET", // or "POST", "PUT", "PATCH", "DELETE"
+        params: payload, // Request body/params
+      });
+      return [response.parsedBody, null]; // Note: HiverAnalyticsAxios returns parsedBody
+    } catch (err) {
+      return [null, err.message];
+    }
+  };
+  ```

package/collections/extension/skills/connect-api/references/best-practices.md

@@ -0,0 +1,10 @@
+# Best Practices
+
+- **Keep API functions pure** - separate API logic from React Query hooks
+- **Use TypeScript types** if the project uses TypeScript
+- **Add JSDoc comments** for complex hooks explaining parameters and return values
+- **Handle loading states** using `isLoading`, `isFetching` from React Query
+- **Handle error states** using `isError`, `error` from React Query
+- **Use `enabled` option** for conditional queries
+- **Use `refetchOnMount`, `refetchOnWindowFocus`** options when needed
+- **Export query keys** from hook files for use in other components

package/collections/extension/skills/connect-api/references/data-fetchers.md

@@ -0,0 +1,52 @@
+# Data Fetcher Selection
+
+- **All data fetcher utilities are located in `react-extn/src/utils`**
+- **Use the appropriate fetcher** based on the service you're working with:
+
+## Modern Auth Fetchers (HiverNewAuthCall based)
+
+These use `method` (GET, POST, PUT, PATCH, DELETE) and return promises:
+
+| Fetcher | Use Case | Service | Import Path |
+|---------|----------|---------|-------------|
+| `AiBifrostAuth` | AI service endpoints | AI Service | `../../../../utils/AiNewAuth` |
+| `CustomFieldsService` | Custom fields operations | Custom Fields Service | `../../../../utils/CustomFieldsService` |
+| `AutomationService` | Automation workflows | Automations Service | `../../../../utils/AutomationService` |
+| `HiverSlaNewAuth` | SLA management | SLA Service | `../../../../utils/slaNewAuth` |
+| `CsatNewAuthCall` | CSAT surveys | CSAT Service | `../../../../utils/csatNewAuth` |
+| `TagBifrostAuth` | Tag operations | Tags Service | `../../../../utils/tagNewAuth` |
+| `HiverIntegrationBifrostAuth` | Integration endpoints | Integration Service | `../../../../utils/integrationNewAuth` |
+| `HiverChatBifrostAuth` | Chat/channels operations | Channels Service | `../../../../utils/chatNewAuth` |
+| `HiverNotesAxios` | Notes operations | Notes Service | `../../../../utils/HiverNotesNewAuth` |
+| `OutOfOfficeService` | Schedule management | Schedule Service | `../../../../utils/OutOfOfficeService` |
+| `CustomerPortalApiService` | Customer portal | Customer Portal Service | `../../../../utils/CustomerPortalApiService` |
+| `HiverNotifCall` | Notifications | Notifications Service | `../../../../utils/notificationAuthCall` |
+
+**Usage pattern for modern auth fetchers:**
+```javascript
+import { AiBifrostAuth } from "../../../../utils/AiNewAuth";
+// OR
+import { CustomFieldsService } from "../../../../utils/CustomFieldsService";
+
+const response = await AiBifrostAuth({
+  url: `/v1/endpoint`,
+  method: "GET", // or "POST", "PUT", "PATCH", "DELETE"
+  data: {}, // For POST/PUT/PATCH
+});
+```
+
+## createAxios based Fetchers
+
+These use `method` and return promises:
+
+| Fetcher | Use Case | Service | Import Path |
+|---------|----------|---------|-------------|
+| `AiAxios` | AI service (legacy) | AI Service | `../../../../utils/AiAxios` |
+| `HiverCustomerPortalAxios` | Customer portal (legacy) | Customer Portal Service | `../../../../utils/CustomerPortalAxios` |
+
+## Legacy/Custom Fetchers
+
+| Fetcher | Use Case | Service | Import Path |
+|---------|----------|---------|-------------|
+| `HiverAxios` | Legacy API calls | Default Hiver API | `h-extension-common` |
+| `HiverAnalyticsAxios` | Analytics data | Analytics Service | `../../../../utils/HiverAnalyticsAxios` |

package/collections/extension/skills/connect-api/references/error-handling.md

@@ -0,0 +1,34 @@
+# Error Handling
+
+- **Handle errors in mutation hooks**:
+  ```javascript
+  import { useSnackbar } from "../../../../common";
+  import { theme } from "@hiver/hiver-ui-kit";
+  
+  const showSnackbar = useSnackbar();
+  
+  // In mutation onSuccess handler
+  onSuccess: (response) => {
+    const [result, error] = response;
+    if (error) {
+      showSnackbar({
+        message: error || "Operation failed",
+        background: theme.palette.red.primary,
+      });
+      return;
+    }
+    // Handle success...
+  },
+  
+  // In mutation onError handler (for unexpected errors)
+  onError: (error, variables, context) => {
+    showSnackbar({
+      message: error.message || "Operation failed",
+      background: theme.palette.red.primary,
+    });
+    // Rollback optimistic updates if needed
+    if (context?.previousData) {
+      queryClient.setQueryData([API_QUERIES.resource], context.previousData);
+    }
+  }
+  ```

package/collections/extension/skills/connect-api/references/hook-organization.md

@@ -0,0 +1,11 @@
+# Hook Organization
+
+- **Always create separate custom hooks** for querying and mutating server data
+- **Place hooks in a `hooks` folder** within the module/component directory
+  - Example structure: `react-extn/src/AiCopilot/Pages/Chat/hooks/` or `react-extn/src/AiCopilot/Pages/Tags/hooks/`
+- **Naming convention**:
+  - Query hooks: `useGet[ResourceName].js` (e.g., `useGetChatList.js`, `useGetSuggestedTags.js`)
+  - Mutation hooks: `use[Action][ResourceName].js` (e.g., `useSendChatMessage.js`, `useApplyTags.js`)
+- **Reference examples**:
+  - `react-extn/src/AiCopilot/Pages/Chat/hooks/useGetChatList.js`
+  - `react-extn/src/AiCopilot/Pages/Tags/hooks/useGetSuggestedTags.js`