feat(widgets): add localhost:5001 to auto-approved widget domains

CLAUDE.md

@@ -2,6 +2,10 @@
 
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
+## Project Context
+
+This is a **HealthChat** fork of Element Web (a Matrix client built with React and TypeScript). HealthChat customizations are primarily configuration-based: custom branding, homeserver (matrix.healthchat.ch), SSO auto-redirect, and many advanced features disabled for a simplified UX. The `release/healthchat` branch is the main working branch; `master` tracks upstream.
+
 ## Prerequisites
 
 - Node.js >= 22.18
@@ -10,7 +14,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 ## Commands
 
 ### Setup
-- `yarn install` - Install dependencies
+- `yarn install` - Install dependencies (also runs `postinstall` which applies patches via patch-package)
 - Copy `config.sample.json` to `config.json` and configure (see docs/config.md)
 
 ### Development
@@ -32,12 +36,12 @@ sudo sysctl fs.inotify.max_user_instances=512
 - `yarn coverage` - Run tests with coverage reporting
 
 To run a single test file:
-- `yarn test path/to/test-file.test.ts`
+- `yarn test path/to/test-file-test.ts` (note: test files use `-test.ts` suffix, not `.test.ts`)
 - `yarn test:playwright path/to/e2e-test.ts`
 
 ### Code Quality
 - `yarn lint` - Run all linters (TypeScript, ESLint, Stylelint)
-- `yarn lint:js-fix` - Auto-fix ESLint issues
+- `yarn lint:js-fix` - Auto-fix ESLint issues (runs Prettier + ESLint)
 - `yarn lint:types` - TypeScript type checking only
 - `yarn lint:style` - Check CSS/PostCSS styles
 
@@ -48,8 +52,6 @@ To run a single test file:
 
 ## Architecture
 
-This is Element Web, a Matrix client built with React and TypeScript, customized as "HealthChat". Key architectural patterns:
-
 ### Component Structure
 The application follows a hierarchical component structure:
 - `MatrixChat` - Root component managing the entire application state
@@ -57,21 +59,26 @@ The application follows a hierarchical component structure:
 - `MainSplit` - Central room view with messages and input
 - `RightPanel` - Member list, room info, and contextual panels
 
-Components are organized in `/src/components/`:
-- `/structures/` - Major layout components
-- `/views/` - Reusable UI components grouped by function (auth, dialogs, messages, rooms, settings)
+Components are organized in `src/components/`:
+- `structures/` - Major layout components (use class components)
+- `views/` - Reusable UI components grouped by function (auth, dialogs, messages, rooms, settings)
+
+### Monorepo Structure
+- `packages/shared-components/` - Separate package (`@element-hq/web-shared-components`) with its own build (Vite), tests, and Storybook. Contains shared UI components (audio, avatar, composer, event-tiles, message-body).
 
 ### State Management
 Uses Flux architecture with:
-- Centralized dispatcher in `/src/dispatcher/`
-- Stores in `/src/stores/` as singletons (access via `FooStore.instance`)
+- Centralized dispatcher in `src/dispatcher/`
+- Stores in `src/stores/` as singletons (access via `FooStore.instance`)
 - Dispatch actions: `dis.dispatch({ action: Action.FOO, ...payload })` or `dis.fire(Action.FOO)` for action-only
 
 ### Styling
-- PostCSS files with `.pcss` extension
+- PostCSS files with `.pcss` extension, located in `res/css/` (not co-located with components)
+- CSS file must match component name: `res/css/views/rooms/_MessageTile.pcss` for `src/components/views/rooms/MessageTile.tsx`
 - BEM-like naming: `mx_ComponentName_element`
-- Component styles co-located with components (e.g., `_MessageTile.pcss`)
 - Theming via CSS custom properties
+- Use `$font` variables, not manual font sizes
+- Document z-index values, pixel adjustments with comments explaining why
 
 ### Matrix Integration
 - Uses `matrix-js-sdk` for all Matrix protocol operations
@@ -79,29 +86,36 @@ Uses Flux architecture with:
 - Room and event handling through SDK abstractions
 
 ### Module System
-Plugin architecture in `/src/modules/`:
+Plugin architecture in `src/modules/` and `module_system/`:
 - Allows runtime extension of functionality
 - Module API for registering custom components and handlers
+- Build step: `yarn build:module_system`
 
 ### Testing Patterns
-- Unit tests in `/test/unit-tests/` using Jest
-- E2E tests in `/playwright/e2e/` using Playwright
+- Unit tests in `test/unit-tests/` mirroring `src/` structure, using Jest
+- **Test file naming**: `*-test.[tj]s?(x)` (hyphenated, NOT `.test.ts`)
+- E2E tests in `playwright/e2e/` using Playwright with page object models in `playwright/pages/`
 - Mock Matrix client and SDK extensively in tests
-- Component tests via Storybook
+- Use `jest-matrix-react` for component rendering (NOT `@testing-library/react`)
+- Test convention: `describe("ComponentName", () => { it("should ...", () => { ... }); });`
 
 ### Important Conventions
-- TypeScript strict mode - always use explicit types
+- TypeScript strict mode - always use explicit types, describe types exhaustively
 - Functional components with hooks preferred over class components (except "structures" which use classes)
 - Translations use `_t()` function with hierarchical keys
-- 4-space indentation, 120 character line limit
+- 4-space indentation, 120 character line limit, double quotes, Prettier-formatted
 - Component files: UpperCamelCase, utilities: kebab-case
+- Use named exports, one component per file
 - Use `Optional<T>` type instead of truly optional parameters when callers should explicitly acknowledge missing values
 - CSS class names must be prefixed with `mx_` and match component name (e.g., `mx_RoomTile`)
 - Import matrix-js-sdk via `matrix-js-sdk/src/matrix` only (not `matrix-js-sdk` or `matrix-js-sdk/src`)
-- Use `jest-matrix-react` instead of `@testing-library/react` for component tests
 - No `React.forwardRef` - use ref props directly instead
 - Use UIStore for window dimensions instead of `window.innerHeight`/`window.innerWidth`
 - Use Media helper for MXC URL handling instead of direct `mxcUrlToHttp` calls
+- `eslint-ignore` / `@ts-ignore` must have a comment explaining why
+- Prefer async/await over promise chaining
+- Interfaces for object definitions, types for union/parameter-value-only declarations
+- Interface properties terminated with semicolons, not commas
 
 ### Linked Development with matrix-js-sdk
 For developing against local SDK changes: