diff --git a/.github/instructions/bridge.instructions.md b/.github/instructions/bridge.instructions.md
new file mode 100644
index 00000000..d7a0651e
--- /dev/null
+++ b/.github/instructions/bridge.instructions.md
@@ -0,0 +1,131 @@
+---
+applyTo: "packages/angular-sdk-components/src/lib/_bridge/**"
+description: "Use when modifying the PConnect bridge layer. Covers AngularPConnectService flow, SdkComponentMap, ComponentMapperComponent, and Redux store subscription patterns."
+---
+# PConnect Bridge Architecture
+
+This directory is the SDK's integration layer that maps the PConnect component tree (provided by `@pega/constellationjs`) to Angular SDK components. The engine decides **what** to render; this bridge decides **how** to render it.
+
+`@pega/constellationjs` provides: `PCore` (global API), `PConnect` (per-component API), and the Redux store (`PCore.getStore()`). The bridge consumes these to wire SDK components into the engine's component tree.
+
+## Files
+
+| File | Responsibility |
+|------|---------------|
+| `angular-pconnect.ts` | Injectable service that manages store subscriptions, component registration, prop comparison, action wiring, and form field lifecycle |
+| `component-mapper/component-mapper.component.ts` | Dynamic component renderer — resolves component names to Angular component classes and creates them via `ViewContainerRef` |
+| `helpers/sdk_component_map.ts` | Singleton component registry — maps names to Angular component classes |
+| `helpers/sdk-pega-component-map.ts` | Pega-provided component registry (master map of all SDK components) |
+
+## How AngularPConnectService Works
+
+1. **Store subscription**: `subscribeToStore()` subscribes to `PCore.getStore()` with a wrapped callback that fires `onStateChange()` on the component
+2. **Component registration**: `registerAndSubscribeComponent()` assigns a unique componentID, subscribes to the store, processes actions, registers form field, and returns an `AngularPConnectData` object with `compID`, `unsubscribeFn`, `validateMessage`, and `actions`
+3. **Prop comparison**: `shouldComponentUpdate()` resolves current config props via `getComponentProps()`, deep-compares against previous props using `fast-deep-equal`, and returns `true` if the component should re-render
+4. **Action wiring**: `processActions()` sets up `onChange` → `changeHandler` and `onBlur` → `eventHandler` on the PConnect node via `setAction()` (only for editable fields)
+5. **Form field lifecycle**: `addFormField()` on registration, `removeFormField()` + context tree node removal on unsubscribe
+6. **Validation**: Updates `angularPConnectData.validateMessage` from resolved props and triggers error/spinner messaging
+
+```
+Component ngOnInit()
+ → registerAndSubscribeComponent(this, this.onStateChange)
+ → processActions() sets onChange/onBlur
+ → subscribeToStore() registers Redux listener
+ → addFormField() registers in engine's form context
+ → returns { compID, unsubscribeFn, validateMessage, actions }
+
+Store changes → onStateChange() callback
+ → checkAndUpdate()
+ → shouldComponentUpdate(this)
+ → getComponentProps() resolves configProps + additionalProps
+ → deep compare against previous props
+ → updates componentPropsArr[compID]
+ → updates validateMessage
+ → returns true/false
+ → if true → updateSelf() (component-specific rendering logic)
+
+Component ngOnDestroy()
+ → unsubscribeFn()
+ → removeFormField()
+ → removeFieldNode/removeViewNode from context tree
+ → store.unsubscribe()
+```
+
+### Key exports from angular-pconnect.ts
+- `AngularPConnectService` — injectable service (`providedIn: 'root'`)
+- `AngularPConnectData` — interface for the data returned by registration: `{ compID, unsubscribeFn, validateMessage, actions }`
+
+### AngularPConnectService method summary
+- **`registerAndSubscribeComponent(inComp, inCallback)`** — Main entry point: registers component, subscribes to store, wires actions, returns `AngularPConnectData`
+- **`shouldComponentUpdate(inComp)`** — Returns `true` if props changed (component should re-render)
+- **`getComponentID(inComp)`** — Returns the component's unique bridge ID
+- **`getComponentProp(inComp, propName)`** — Returns a specific resolved prop value
+- **`getCurrentCompleteProps(inComp)`** — Returns all current resolved props
+- **`changeHandler(inComp, event)`** — Delegates to `pConn$.getActionsApi().changeHandler()`
+- **`eventHandler(inComp, event)`** — Delegates to `pConn$.getActionsApi().eventHandler()`
+- **`getStore()`** — Returns `PCore.getStore()` (cached)
+- **`getState()`** — Returns current Redux state
+
+## ComponentMapperComponent (component-mapper/)
+
+Dynamic component renderer that creates Angular components at runtime:
+
+1. **Resolution**: `getComponentFromMap(name)` looks up the component class from the registry
+2. **Creation**: `ViewContainerRef.createComponent(component)` dynamically instantiates it
+3. **Input binding**: `bindInputProps()` iterates over `props` object and calls `componentRef.setInput(key, value)` for each
+4. **Output binding**: `bindOutputEvents()` subscribes to component `@Output()` EventEmitters
+5. **Change detection**: `ngOnChanges()` reloads on name change, rebinds inputs on prop changes
+6. **Error fallback**: If component not found, renders `ErrorBoundaryComponent`
+
+```html
+
+
+
+```
+
+### Inputs
+- `name` — Component name as registered in the component map (e.g., `'TextInput'`, `'CaseView'`)
+- `props` — Object of inputs to pass to the dynamically created component
+- `errorMsg` — Error message for ErrorBoundary fallback
+- `outputEvents` — Object mapping output event names to callback functions
+- `parent` — Parent component reference (required when `outputEvents` is provided)
+
+## SdkComponentMap (helpers/sdk_component_map.ts)
+
+Singleton pattern with two component maps:
+
+| Map | Source | Priority |
+|-----|--------|----------|
+| `localComponentMap` | `sdk-local-component-map.ts` | **Checked first** — consumer-side overrides |
+| `pegaProvidedComponentMap` | `sdk-pega-component-map.ts` | Fallback — SDK's master component registry |
+
+### Initialization
+```typescript
+// Called once during app startup (in FullPortal/Embedded component)
+const theMap = await getSdkComponentMap(localSdkComponentMap);
+```
+
+### Component Lookup
+```typescript
+// Used by ComponentMapperComponent to resolve each component name
+const Component = getComponentFromMap('TextInput');
+// Resolution order: localComponentMap → pegaProvidedComponentMap → ErrorBoundary
+```
+
+### Key exports
+- `SdkComponentMap` — The singleton instance (available after initialization)
+- `getSdkComponentMap(localMap)` — Async factory; creates and initializes the singleton
+- `getComponentFromMap(name)` — Synchronous lookup; returns Angular component class or ErrorBoundary
+
+## Rules for Modifying Bridge Code
+
+- **Do NOT create a separate Redux store** — `PCore.getStore()` IS the store
+- **Do NOT bypass `ComponentMapperComponent`** for rendering PConnect-driven children — always use ``
+- **Do NOT bypass `AngularPConnectService`** for state management — all components must register/subscribe through it
+- **Component map priority is intentional** — local always overrides Pega-provided
+- **The bridge does NOT contain business logic** — it's purely a mapping/wiring/lifecycle layer
+- **`SdkComponentMap` is a singleton** — only one instance exists per app lifecycle
+- **Form field lifecycle is critical** — `addFormField` on init and `removeFormField` + context tree cleanup on destroy prevents 400 errors from stale field references
+- **The `shouldComponentUpdate` deep comparison is intentional for performance** — do not replace with simple reference equality
+- **`forwardRef(() => ComponentMapperComponent)`** is required in component imports to avoid circular dependencies
+- **The `processActions` binding only applies to editable fields** — `isEditable()` guards this
diff --git a/.github/instructions/build-scripts.instructions.md b/.github/instructions/build-scripts.instructions.md
new file mode 100644
index 00000000..7d72b549
--- /dev/null
+++ b/.github/instructions/build-scripts.instructions.md
@@ -0,0 +1,148 @@
+---
+applyTo: "scripts/**,angular.json,tsconfig*.json,packages/angular-sdk-components/ng-package.json"
+description: "Use when modifying build scripts, Angular workspace config, or TypeScript config. Covers build pipeline flow, script purposes, and packaging."
+---
+# Build Scripts
+
+Node.js automation scripts for building and packaging the Angular SDK.
+
+## Scripts Overview
+
+| Script | When Called | Purpose |
+|--------|------------|---------|
+| `build-overrides.js` | `build-overrides` | Generates the `@pega/angular-sdk-overrides` package by copying components from `_components/` and rewriting relative imports to `@pega/angular-sdk-components` |
+| `compress-with-assets.mjs` | `compress-angularsdk` (prod build) | Brotli + gzip compresses all JS, CSS, HTML files in `dist/` |
+| `copy-map.js` | `build-angular-sdk-components` | Copies `sdk-local-component-map.ts` from package source to `dist/angular-sdk-components/` |
+| `copy-npm-assets-to-components.js` | `build-angular-sdk-components` | Copies SECURITY.md, LICENSE, doc/ to `dist/angular-sdk-components/` |
+| `copy-npm-assets-to-overrides.js` | `postbuild-overrides` | Copies SECURITY.md, LICENSE to `packages/angular-sdk-overrides/` |
+| `copy-file.js` | — | Generic file copy utility used by other scripts |
+| `extra-webpack.config.js` | Angular CLI build (via `@angular-builders/custom-webpack`) | Copies OAuth `auth.html` and `authDone.js` from `@pega/auth` into `dist/` |
+| `update-dependencies.js` | `create_and_install_sdk_packages` | Builds both packages, creates `.tgz` files, and installs them into the `angular-sdk` consumer repo |
+| `playwright-message.js` | `pretest` (before E2E) | Prints "Running in headless mode" info message |
+
+## Build Pipeline Flow
+
+### `npm run build-angular-sdk-components` (Library package build)
+```
+1. ng build angular-sdk-components
+ → ng-packagr reads ng-package.json
+ → entry file: src/public-api.ts
+ → output: dist/angular-sdk-components/
+2. node scripts/copy-map.js
+ → copies sdk-local-component-map.ts to dist/
+3. node scripts/copy-npm-assets-to-components.js
+ → copies SECURITY.md, LICENSE, doc/ to dist/
+```
+
+### `npm run build:dev` (Development app build)
+```
+parallel (run-p):
+ - lint (eslint + prettier)
+ - build-angularsdk:
+ 1. shx rm -rf ./dist
+ 2. ng build --configuration development angular-test-app
+ 3. copy-index → copies index.html to portal.html, fullportal.html,
+ embedded.html, mashup.html, simpleportal.html
+ 4. make-mashup-dir → creates dist/constellation/prerequisite/
+ and dist/constellation/assets/icons/
+```
+
+### `npm run build:prod` (Production app build)
+```
+parallel (run-p):
+ - lint (eslint + prettier)
+ - prod-build-angularsdk:
+ 1. shx rm -rf ./dist
+ 2. ng build --configuration production angular-test-app
+ 3. copy-index → copies index.html to route-specific HTML files
+ 4. make-mashup-dir → creates mashup directory structure
+ 5. compress-angularsdk → brotli + gzip all JS/CSS/HTML in dist/
+```
+
+### `npm run build-overrides` (Override package build)
+```
+prebuild-overrides:
+ 1. shx rm -rf ./packages/angular-sdk-overrides/lib
+ 2. shx cp -r ./packages/angular-sdk-components/src/lib/_components
+ → packages/angular-sdk-overrides/lib
+
+build-overrides:
+ 3. node scripts/build-overrides.js
+ → recursively processes all .ts files in overrides/lib/
+ → rewrites relative imports (../) to '@pega/angular-sdk-components'
+
+postbuild-overrides:
+ 4. node scripts/copy-npm-assets-to-overrides.js
+ → copies SECURITY.md, LICENSE
+```
+
+### `npm run build-sdk` (TypeScript compilation)
+```
+prebuild-sdk:
+ 1. delete-tsbuildinfo → removes stale .tsbuildinfo files
+ 2. clear-lib → rm -rf projects/angular-test-app/lib
+ 3. clear-overrides → rm -rf packages/angular-sdk-overrides/lib
+
+build-sdk:
+ 4. ngc -p tsconfig.build.json → Angular compiler (TypeScript + templates)
+```
+
+### `npm run create_and_install_sdk_packages` (Cross-repo install)
+```
+1. Prompts for angular-sdk project path
+2. Builds angular-sdk-components (ng build)
+3. Creates .tgz via npm pack
+4. Copies .tgz to angular-sdk project
+5. Installs it via npm install
+6. Repeats for angular-sdk-overrides
+```
+
+## build-overrides.js Details
+
+This script makes the overrides package consumable as a separate npm package:
+1. Components are already copied from `src/lib/_components/` into `packages/angular-sdk-overrides/lib/` (by `prebuild-overrides`)
+2. The script recursively scans all `.ts` files in the overrides directory
+3. For each file, it finds `import` statements with relative paths (`../`)
+4. Rewrites those paths to `@pega/angular-sdk-components` so the overrides package depends on the published SDK package rather than relative file paths
+
+Example transform:
+```typescript
+// Before (relative path in source)
+import { FieldBase } from '../../field.base';
+// After (package reference in overrides)
+import { FieldBase } from '@pega/angular-sdk-components';
+```
+
+## Angular-Specific Build Details
+
+### ng-packagr (Library builds)
+The component library uses **ng-packagr** (not Webpack) for building:
+- Config: `packages/angular-sdk-components/ng-package.json`
+- Entry point: `src/public-api.ts` — all public exports must be listed here
+- Output: `dist/angular-sdk-components/` (FESM bundles + typings)
+- Builder: `@angular-devkit/build-angular:ng-packagr` (configured in `angular.json`)
+
+### Angular CLI (App builds)
+The test app uses Angular CLI with `@angular-builders/custom-webpack`:
+- Extends standard Angular build with `extra-webpack.config.js`
+- The custom webpack config only adds `CopyWebpackPlugin` for OAuth auth files
+- Dev server: `ng serve --port 3500`
+- Two Angular projects in workspace: `angular-sdk-components` (library) and `angular-test-app` (application)
+
+### Key differences from the React build
+| Concern | React | Angular |
+|---------|-------|---------|
+| Library bundler | TypeScript compiler (`tsc`) | ng-packagr (FESM bundles) |
+| App bundler | Webpack | Angular CLI (esbuild/webpack) |
+| Export generation | `build-exports.js` auto-generates | Manual — `public-api.ts` must be edited |
+| Component map transform | `edit-pega-components-map-in-lib.js` | Not needed (ng-packagr handles re-exports) |
+
+## Key Points
+
+- Scripts are Node.js (CommonJS, `require`) — not TypeScript (except `compress-with-assets.mjs` which is ESM)
+- `shx` is used in npm scripts for cross-platform shell commands (cp, rm, mkdir)
+- The override build copies source `.ts` files, not compiled output — customers modify TypeScript directly
+- Do NOT edit files in `dist/` manually — they are regenerated by builds
+- `public-api.ts` is the sole entry point for the library — if a component isn't exported there, it won't be in the package
+- `angular.json` defines both projects — changes to build config go there, not in scripts
+- The `copy-index` step creates route-specific HTML files so the Angular router works when accessed directly (e.g., `/portal`, `/embedded`)
diff --git a/.github/instructions/components.instructions.md b/.github/instructions/components.instructions.md
new file mode 100644
index 00000000..c9f31621
--- /dev/null
+++ b/.github/instructions/components.instructions.md
@@ -0,0 +1,379 @@
+---
+applyTo: "packages/angular-sdk-components/src/lib/_components/**"
+description: "Use when creating, modifying, or reviewing SDK components. Covers component structure per subtype (field, template, widget, infra, designSystemExtension), PConnFieldProps interface, Angular Material design system, and rendering rules."
+---
+# Components
+
+Angular SDK component reference implementation using Angular Material. Components are organized into five subtypes, each with distinct patterns.
+
+## Subtypes at a Glance
+
+| Subtype | Uses AngularPConnect | Uses `pConn$` | Base Class | Pattern |
+|---------|---------------------|---------------|------------|---------|
+| `field/` | Always | Always | `FieldBase` | Input controls — typed Props extending `PConnFieldProps`, use `handleEvent` for value propagation |
+| `template/` | Most | Always | `FormTemplateBase` or `DetailsTemplateBase` | Layout shells — render children via `` |
+| `widget/` | Most | Always | None (direct inject) | Self-contained data views — fetch own data via `PCore` APIs |
+| `infra/` | Most | Always | None | Container/orchestration plumbing — manage case flow, assignment lifecycle |
+| `designSystemExtension/` | None | Rarely | None | Presentational — receive data as `@Input()`, minimal PConnect dependency |
+
+---
+
+## Field Components (`field/`)
+
+Form input controls. Every field follows the same data-flow pattern.
+
+### Structure
+```
+text-input/
+├── text-input.component.ts # Component class
+├── text-input.component.html # Template
+├── text-input.component.scss # Styles
+└── (optional) text-input.component.spec.ts
+```
+
+### Pattern
+
+All field components:
+1. **Extend `FieldBase`** — provides `ngOnInit`/`ngOnDestroy` lifecycle, store subscription, form control registration
+2. **Declare a Props interface** extending `PConnFieldProps` (or `Omit` for non-string values like Checkbox)
+3. **Override `updateSelf()`** — resolves config props, updates common properties, sets component-specific values
+4. **Propagate values** via `handleEvent(actionsApi, 'changeNblur', propName, value)` from `_helpers/event-util.ts`
+5. **Handle display modes**: `DISPLAY_ONLY` and `STACKED_LARGE_VAL` — delegate to ``
+6. **Use Angular Material** modules for rendering (MatFormField, MatInput, MatSelect, MatCheckbox, etc.)
+7. **Import `ComponentMapperComponent`** via `forwardRef(() => ComponentMapperComponent)` for display mode rendering
+
+### Value propagation — two patterns
+
+**Text-input fields** (TextInput, TextArea, Email, URL, Integer) — buffer locally, propagate on blur:
+```
+User types → fieldOnChange() clears error messages
+ → User blurs → fieldOnBlur() calls handleEvent(actionsApi, 'changeNblur', propName, value)
+```
+
+**Selection fields** (Checkbox, Dropdown, RadioButtons, Date, Time, AutoComplete, Phone, Currency, Decimal, Percentage) — propagate immediately on change:
+```
+User selects → fieldOnChange() calls handleEvent(actionsApi, 'changeNblur', propName, value) directly
+```
+
+Both patterns use `handleEvent` with `'changeNblur'` which calls both `updateFieldValue` and `triggerFieldChange`. The difference is the trigger point: blur for free-text input (to avoid re-rendering on every keystroke), immediate for selection (where the value is final).
+
+### Canonical field component structure
+
+```typescript
+import { Component, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+import { FieldBase } from '../field.base';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
+import { handleEvent } from '../../../_helpers/event-util';
+import { PConnFieldProps } from '../../../_types/PConnProps.interface';
+
+interface TextInputProps extends PConnFieldProps {
+ fieldMetadata?: any;
+}
+
+@Component({
+ selector: 'app-text-input',
+ templateUrl: './text-input.component.html',
+ styleUrls: ['./text-input.component.scss'],
+ imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule,
+ forwardRef(() => ComponentMapperComponent)]
+})
+export class TextInputComponent extends FieldBase {
+ configProps$: TextInputProps;
+
+ override updateSelf(): void {
+ this.configProps$ = this.pConn$.resolveConfigProps(
+ this.pConn$.getConfigProps()
+ ) as TextInputProps;
+ this.updateComponentCommonProperties(this.configProps$);
+ this.value$ = this.configProps$.value;
+ }
+
+ fieldOnChange(event: any) {
+ if (event.target.value.toString() !== (this.value$ ?? '').toString()) {
+ this.pConn$.clearErrorMessages({ property: this.propName });
+ }
+ }
+
+ fieldOnBlur(event: any) {
+ if (event.target.value.toString() !== (this.value$ ?? '').toString()) {
+ handleEvent(this.actionsApi, 'changeNblur', this.propName, event.target.value);
+ }
+ }
+}
+```
+
+### FieldBase provides (inherited by all field components)
+- `pConn$` and `formGroup$` `@Input()` properties
+- `angularPConnect` service injection (store subscription)
+- `fieldControl` — reactive form control
+- `value$`, `label$`, `bVisible$`, `bRequired$`, `bReadonly$`, `bDisabled$`, `displayMode$`, `helperText`, `placeholder`, `testId`
+- `updateComponentCommonProperties(configProps)` — extracts common props and updates booleans
+- `actionsApi` — from `pConn$.getActionsApi()`
+- `propName` — from `pConn$.getStateProps().value`
+
+### Exceptions
+- **CancelAlert** — modal dialog, not a standard field
+- **Group, EmbeddedDataMulti, ScalarList** — field containers managing child fields rather than single values
+- **Checkbox** — uses `Omit` since value is boolean
+
+---
+
+## Template Components (`template/`)
+
+Page and form layouts that render child components from the PConnect tree.
+
+### Structure
+```
+one-column/
+├── one-column.component.ts
+├── one-column.component.html
+├── one-column.component.scss
+```
+
+### Base classes
+
+| Base | Used by | Provides |
+|------|---------|----------|
+| `FormTemplateBase` | Form templates (DefaultForm, OneColumn, TwoColumn, NarrowWideForm) | `pConn$`, `angularPConnectData`, `ngOnDestroy` cleanup |
+| `DetailsTemplateBase` | Details templates (Details, DetailsOneColumn, DetailsTwoColumn) | Full bridge lifecycle (register, subscribe, checkAndUpdate) |
+
+### Rendering pattern — `` with children
+
+Templates get children via `pConn$.getChildren()` and render them dynamically:
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### Key patterns
+- Templates check child metadata type (`Region`, `View`, `reference`, `CaseCreateStage`) to determine which component to render
+- `formGroup$` is always passed down to children (form context propagation)
+- Form templates typically don't subscribe to the store — they just read children and render
+- Details templates subscribe to the store (via `DetailsTemplateBase`) because they need to react to prop changes (e.g., displayMode changes)
+
+### Template categories
+| Category | Examples | Store Subscription |
+|----------|---------|-------------------|
+| Form layouts | DefaultForm, OneColumn, TwoColumn, NarrowWideForm | No (extends `FormTemplateBase`) |
+| Detail layouts | Details, DetailsOneColumn, DetailsTwoColumn | Yes (extends `DetailsTemplateBase`) |
+| Page layouts | OneColumnPage, TwoColumnPage, BannerPage | Varies |
+| Data templates | CaseView, ListView, SimpleTable | Yes (direct inject) |
+
+---
+
+## Widget Components (`widget/`)
+
+Self-contained functional widgets that fetch and display their own data.
+
+### Structure
+```
+case-history/
+├── case-history.component.ts
+├── case-history.component.html
+├── case-history.component.scss
+```
+
+### Pattern
+
+Widgets inject `AngularPConnectService` directly or just use `pConn$` APIs:
+1. **Fetch their own data** using `PCore.getDataApiUtils().getData()` or `pConn$.getValue()`
+2. **Manage loading states** with component properties (`waitingForData`, etc.)
+3. **Render tables, lists, or cards** using Angular Material Table, Card, List
+4. **Don't propagate values** — they display information, not capture input
+5. **Declare their own Props interface** (not extending `PConnFieldProps`)
+
+### Example (CaseHistory)
+```typescript
+interface CaseHistoryProps { label?: string; }
+
+export class CaseHistoryComponent implements OnInit {
+ @Input() pConn$: typeof PConnect;
+ configProps$: CaseHistoryProps;
+ repeatList$: MatTableDataSource;
+
+ ngOnInit(): void {
+ const caseID = this.pConn$.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
+ PCore.getDataApiUtils().getData(dataViewName, params, context)
+ .then(data => { this.repeatList$ = new MatTableDataSource(data); });
+ }
+}
+```
+
+### Widget components
+- **CaseHistory** — case event timeline (MatTable)
+- **Todo** — work queue with task lists
+- **Attachment / FileUtility** — file upload/download
+- **FeedContainer** — Pulse/activity feed
+- **ListUtility** — general-purpose list display
+- **QuickCreate** — quick case creation widget
+- **AppAnnouncement** — system announcements
+- **Utility** — generic utility container
+
+---
+
+## Infrastructure Components (`infra/`)
+
+Container and orchestration components managing case flow, routing, and layout plumbing.
+
+### Structure
+```
+infra/
+├── action-buttons/ # Submit/cancel buttons
+├── assignment/ # Assignment lifecycle wrapper
+├── assignment-card/ # Individual assignment rendering
+├── Containers/ # Sub-directory with container types:
+│ ├── flow-container/ # Case flow orchestration (CRITICAL)
+│ ├── hybrid-view-container/
+│ ├── modal-view-container/
+│ ├── preview-view-container/
+│ └── view-container/ # Routed view container (CRITICAL)
+├── dashboard-filter/ # Dashboard filter controls
+├── defer-load/ # Lazy-loaded component wrapper
+├── error-boundary/ # Error fallback display
+├── multi-step/ # Multi-step form navigation
+├── navbar/ # Top navigation bar
+├── reference/ # Reference component resolver
+├── region/ # Passthrough child renderer
+├── root-container/ # Root rendering container
+├── stages/ # Case stages display
+└── view/ # View renderer with template resolution (CRITICAL)
+```
+
+### Pattern
+
+Infra has **no single pattern** — each is specialized plumbing:
+- **Region** — simplest: renders children, no store subscription
+- **View** — critical orchestrator: resolves template names, evaluates visibility, sets page titles, handles form/page/modal contexts
+- **FlowContainer** — manages case assignment lifecycle, renders assignment cards, handles navigation between steps
+- **Containers** can be modified but require extra vigilance: changes must be backward compatible and well-tested. These affect the entire rendering pipeline.
+
+### ⚠️ WARNING on infra/Containers and infra/view
+
+These files contain comments like:
+> WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect. You may override Material components within this component if needed, but do not modify any container-related logic.
+
+Respect this boundary: modify presentation (Material components) if needed, but do NOT change container orchestration logic.
+
+---
+
+## Design System Extension Components (`designSystemExtension/`)
+
+Presentational UI components with minimal or no PConnect dependency.
+
+### Structure
+```
+alert-banner/
+├── alert-banner.component.ts
+├── alert-banner.component.html
+├── alert-banner.component.scss
+```
+
+### Pattern
+
+DSE components:
+1. **Do NOT extend FieldBase or template bases** — standalone components with simple `@Input()` props
+2. **Rarely use `AngularPConnectService`** — no store subscription in most cases
+3. **Are consumed by other components** — fields and templates render them via ``
+4. **Use Angular Material** for visual rendering
+
+### Key DSE components and their consumers
+- **FieldGroup** — labeled, collapsible field container (used by Details templates)
+- **AlertBanner** — alert messages with severity variants
+- **Banner** — hero banner with background image
+- **CaseCreateStage** — case creation stage indicator
+- **MaterialCaseSummary** — case summary display
+- **MaterialDetails / MaterialDetailsFields** — read-only detail rendering
+- **MaterialSummaryItem / MaterialSummaryList** — summary list items
+- **MaterialUtility** — utility container wrapper
+- **MaterialVerticalTabs** — vertical tab layout
+- **Operator** — operator info display
+- **Pulse** — activity feed display
+- **RichTextEditor** — TinyMCE wrapper
+- **WssQuickCreate** — workspace quick-create UI
+
+---
+
+## Creating a New Component
+
+### Field component
+1. Create folder: `field//`
+2. Create `.component.ts` — extend `FieldBase`, declare Props interface extending `PConnFieldProps`
+3. Create `.component.html` and `.component.scss`
+4. Export from `public-api.ts`
+5. Register in `sdk-pega-component-map.ts` (import + add to map object)
+
+### Template component
+1. Create folder: `template//`
+2. Extend `FormTemplateBase` or `DetailsTemplateBase`
+3. Render children via ``
+4. Export from `public-api.ts` + register in `sdk-pega-component-map.ts`
+
+### Widget component
+1. Create folder: `widget//`
+2. Inject services, declare Props interface, fetch data in `ngOnInit`
+3. Export from `public-api.ts` + register in `sdk-pega-component-map.ts`
+
+### For all components
+- Use `app-` selector prefix
+- Import `CommonModule` + relevant Material modules directly (standalone)
+- Import `ComponentMapperComponent` via `forwardRef(() => ComponentMapperComponent)` if rendering children
+- Use `$` suffix for template-bound properties, `b` prefix for booleans
+
+---
+
+## Angular Material Design System
+
+All components use **Angular Material** with **SCSS** for styling.
+
+| Package | Use for |
+|---------|---------|
+| `@angular/material` | Core components (MatFormField, MatInput, MatButton, MatSelect, MatTable, MatToolbar, MatMenu) |
+| `@angular/cdk` | CDK utilities (overlay, drag-drop, virtual scroll) |
+| `@angular/material-experimental` | Experimental Material components |
+| `@angular/material-moment-adapter` | Moment.js adapter for datepicker (legacy) |
+| `@danielmoncada/angular-datetime-picker` | Extended datetime picker |
+| `ngx-currency` | Currency input formatting |
+| `mat-tel-input` | Phone number input with country codes |
+| `@tinymce/tinymce-angular` | Rich text editor |
+
+### Theming
+- Light/dark modes controlled by `sdk-config.json` → `theme` property
+- Applied via `document.body.classList.add(theme)` during app initialization
+- SCSS files use Angular Material theming mixins
+
+---
+
+## Helpers (`_helpers/`)
+
+| File | Use for |
+|------|---------|
+| `event-util.ts` | `handleEvent(actions, 'changeNblur', propName, value)` — field value propagation |
+| `utils.ts` | `Utils` service — date formatting, boolean conversion, HTML decode, general utilities |
+| `case-utils.ts` | Case-level operations and status |
+| `common.ts` | Locale/timezone helpers, `getLocale()`, `getCurrentTimezone()` |
+| `currency-utils.ts` | Currency formatting utilities |
+| `date-format-utils.ts` | Date/time formatting across locales |
+| `field-group-utils.ts` | Field group layout and rendering |
+| `filter-utils.ts` | Dashboard filter operations |
+| `instructions-utils.ts` | Case/assignment instructions |
+| `object-utils.ts` | Object reference helpers |
+| `template-utils.ts` | `getAllFields()` for template field extraction |
+| `createstage-utils.ts` | Case creation stage utilities |
+| `tab-utils.ts` | Tab management utilities |
+| `versionHelpers.ts` | `compareSdkPCoreVersions()` — SDK/PCore version comparison |
+| `formatters/` | Value formatters for display mode (currency, date, etc.) |
diff --git a/.github/instructions/testing.instructions.md b/.github/instructions/testing.instructions.md
new file mode 100644
index 00000000..7c5c15e1
--- /dev/null
+++ b/.github/instructions/testing.instructions.md
@@ -0,0 +1,189 @@
+---
+applyTo: "projects/angular-test-app/tests/**,**/*.spec.*,**/*.test.*"
+description: "Use when writing or modifying tests. Covers Karma/Jasmine unit tests, Playwright E2E setup, test credentials, helpers, and configuration."
+---
+# Testing
+
+This project uses Karma/Jasmine for unit tests and Playwright for end-to-end tests.
+
+## Structure
+
+```
+projects/angular-test-app/tests/
+├── common.js # Shared Playwright helpers (launchPortal, login, date utils, Material selectors)
+├── config.js # Test environment config (URLs, credentials, viewport settings)
+└── e2e/ # Playwright E2E tests
+ ├── MediaCo/ # MediaCo sample app tests
+ │ ├── portal.spec.js # Full portal workflow
+ │ └── embedded.spec.js # Embedded/mashup workflow
+ └── DigV2/ # DigV2 application tests
+ ├── ComplexFields/ # Complex field scenarios
+ ├── FormFields/ # Form field tests
+ ├── LandingPages/ # Landing page tests
+ ├── Localization/ # Locale tests
+ ├── NewComplexFields/ # Additional complex fields
+ ├── Process/ # Case process flow tests
+ ├── SelfService/ # Self-service portal tests
+ └── ViewTemplates/ # View template tests
+
+packages/angular-sdk-components/src/lib/
+├── angular-sdk-components.component.spec.ts # Root component unit test
+├── angular-sdk-components.service.spec.ts # Root service unit test
+└── _bridge/
+ └── angular-pconnect.service.spec.ts # Bridge service unit test
+```
+
+## Unit Tests (Karma/Jasmine)
+
+### Running
+```bash
+ng test angular-sdk-components # Run library unit tests
+```
+
+### Configuration
+- Karma config: `packages/angular-sdk-components/tsconfig.spec.json`
+- Framework: Jasmine with Karma runner
+- Browser: Chrome (karma-chrome-launcher)
+- Coverage: karma-coverage reporter
+
+### Writing Unit Tests
+- Place spec files alongside the component: `component-name.component.spec.ts`
+- Use `TestBed.configureTestingModule()` for component setup
+- Use `ComponentFixture` for component interaction
+- Mock `PCore` and `pConn$` — components always expect these runtime globals
+
+### Example
+```typescript
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TextInputComponent } from './text-input.component';
+
+describe('TextInputComponent', () => {
+ let component: TextInputComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ imports: [TextInputComponent] // standalone component
+ });
+ fixture = TestBed.createComponent(TextInputComponent);
+ component = fixture.componentInstance;
+ // Must mock pConn$ before detectChanges
+ component.pConn$ = mockPConnect;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
+```
+
+## E2E Tests (Playwright)
+
+### Prerequisites
+1. App must be running: `npm run start-dev` (serves at http://localhost:3500)
+2. Pega Infinity server must be accessible at the URL in `sdk-config.json`
+3. Test users must exist on the Infinity server
+
+### Running
+```bash
+npm test # Chromium, MediaCo portal + embedded (headless)
+npm run test:headed # Same but with visible browser
+npx playwright test --debug # Debug mode (step through)
+npm run test-report # View last test report
+```
+
+### Test Credentials (config.js)
+
+| App | Role | Username | Password |
+|-----|------|----------|----------|
+| MediaCo | Representative | `rep@mediaco` | `pega` |
+| MediaCo | Manager | `manager@mediaco` | `pega` |
+| MediaCo | Technician | `tech@mediaco` | `pega` |
+| MediaCo | Admin | `admin@mediaco` | `pega` |
+| DigV2 | User | `user.digv2` | `pega` |
+| DigV2 | Localized User | `localization@DigV2` | `pega` |
+
+### Configuration (config.js)
+- `baseUrl`: `http://localhost:3500/portal`
+- `baseEmbedUrl`: `http://localhost:3500/embedded`
+- Viewport: 1920x1080 (config.js), overridden to 1720x1080 in common.js helpers
+- Default timeout: 60s
+- Headless by default
+- SlowMo: 120ms (config.js), 200ms (playwright.config.js `launchOptions`)
+
+### Shared Helpers (common.js)
+
+| Function | Purpose |
+|----------|---------|
+| `launchPortal({ page })` | Navigate to portal URL, set viewport to 1720x1080 |
+| `launchEmbedded({ page })` | Navigate to embedded URL, set viewport to 1720x1080 |
+| `launchSelfServicePortal({ page })` | Navigate to self-service portal with `?portal=DigV2SelfService` |
+| `login(username, password, page)` | Fill login form (`#txtUserID`, `#txtPassword`) and submit |
+| `createCase(caseTypeName, page)` | Click create button and select case type from list |
+| `getFormattedDate(date)` | Format date as `MM/DD/YYYY` |
+| `getFutureDate()` | Get date 2 days from now (formatted) |
+| `selectDateFromPicker(page, day, month, year)` | Navigate Angular Material datepicker: open → select year → month → day |
+| `selectCategory(category, page)` | Select from category `mat-select` dropdown |
+| `selectSubCategory(subCategory, page)` | Select from sub-category `mat-select` dropdown |
+| `verifyHomePage(page)` | Assert announcements banner and worklist are visible |
+| `fillTextInput(page, testID, text)` | Fill an input by `data-test-id` attribute |
+
+### Playwright Config (playwright.config.js)
+- Test directory: `projects/angular-test-app/tests`
+- Test timeout: 240 seconds (120s × 2)
+- Assertion timeout: 50 seconds
+- Action timeout: 50 seconds
+- Trace: on first retry
+- Retries: 2 on CI, 0 locally
+- Ignored tests: `ManyToMany.spec.js`, `Localization.spec.js`
+- Report: HTML output to `tests/playwright-report/`
+
+### Writing E2E Tests
+
+Tests follow the **login → navigate → interact → assert** pattern:
+
+```javascript
+const { test, expect } = require('@playwright/test');
+const config = require('../../config');
+const common = require('../../common');
+
+test.beforeEach(async ({ page }) => {
+ await page.setViewportSize({ width: 1920, height: 1080 });
+ await page.goto(config.config.baseUrl, { waitUntil: 'networkidle' });
+});
+
+test('should create a case', async ({ page }) => {
+ await common.login(config.config.apps.mediaCo.rep.username,
+ config.config.apps.mediaCo.rep.password, page);
+ await common.verifyHomePage(page);
+ await common.createCase('New Service', page);
+ // Interact with form fields...
+});
+```
+
+### Angular Material-Specific Selectors
+
+When writing E2E tests for this Angular SDK, use Material-specific selectors:
+
+| Element | Selector Pattern |
+|---------|-----------------|
+| Text input | `input[data-test-id="..."]` |
+| Mat-select dropdown | `mat-select[data-test-id="..."]` → click → `mat-option:has-text("...")` |
+| Mat-radio button | `mat-radio-button:has-text("...") input[type="radio"]` |
+| Mat-card selection | `mat-card:has-text("...")` |
+| Mat-datepicker | `button[aria-label="Open calendar"]` → navigate year/month → `[aria-label="..."]` |
+| Submit button | `button:has-text("submit")` |
+| Mat-autocomplete | `input[data-test-id="..."]` → type → `mat-option:has-text("...")` |
+
+### Key Differences from React E2E Tests
+
+| Concern | React | Angular |
+|---------|-------|---------|
+| Dev server port | 3502 | 3500 |
+| Dropdown selectors | MUI `role="option"` | `mat-option:has-text("...")` |
+| Radio buttons | MUI `role="radio"` | `mat-radio-button:has-text("...") input[type="radio"]` |
+| Select/Combobox | MUI `role="combobox"` | `mat-select[data-test-id="..."]` |
+| Date picker | MUI DatePicker API | `selectDateFromPicker()` helper with Material calendar navigation |
+| Card selection | MUI Card click | `mat-card:has-text("...")` |
+| Create case | Button click | `mat-list-item[id="create-case-button"]` → `mat-list-item[id="case-list-item"]` |
diff --git a/.github/skills/speckit-analyze/SKILL.md b/.github/skills/speckit-analyze/SKILL.md
new file mode 100644
index 00000000..8b2016db
--- /dev/null
+++ b/.github/skills/speckit-analyze/SKILL.md
@@ -0,0 +1,259 @@
+---
+name: "speckit-analyze"
+description: "Perform a non-destructive cross-artifact consistency and quality analysis across spec.md, plan.md, and tasks.md after task generation."
+compatibility: "Requires spec-kit project structure with .specify/ directory"
+metadata:
+ author: "github-spec-kit"
+ source: "templates/commands/analyze.md"
+---
+
+
+## User Input
+
+```text
+$ARGUMENTS
+```
+
+You **MUST** consider the user input before proceeding (if not empty).
+
+## Pre-Execution Checks
+
+**Check for extension hooks (before analysis)**:
+- Check if `.specify/extensions.yml` exists in the project root.
+- If it exists, read it and look for entries under the `hooks.before_analyze` key
+- If the YAML cannot be parsed or is invalid, skip hook checking silently and continue normally
+- Filter out hooks where `enabled` is explicitly `false`. Treat hooks without an `enabled` field as enabled by default.
+- For each remaining hook, do **not** attempt to interpret or evaluate hook `condition` expressions:
+ - If the hook has no `condition` field, or it is null/empty, treat the hook as executable
+ - If the hook defines a non-empty `condition`, skip the hook and leave condition evaluation to the HookExecutor implementation
+- When constructing command invocations from hook command names, replace dots (`.`) with hyphens (`-`). For example, `speckit.git.commit` → `/speckit-git-commit`.
+- For each executable hook, output the following based on its `optional` flag:
+ - **Optional hook** (`optional: true`):
+ ```
+ ## Extension Hooks
+
+ **Optional Pre-Hook**: {extension}
+ Command: `/{command}`
+ Description: {description}
+
+ Prompt: {prompt}
+ To execute: `/{command}`
+ ```
+ - **Mandatory hook** (`optional: false`):
+ ```
+ ## Extension Hooks
+
+ **Automatic Pre-Hook**: {extension}
+ Executing: `/{command}`
+ EXECUTE_COMMAND: {command}
+
+ Wait for the result of the hook command before proceeding to the Goal.
+ ```
+ After emitting the block above you MUST actually invoke the hook and wait for it to finish before continuing. Run it the same way you would run the command yourself in this agent/session (the invocation may differ from the literal `{command}` id shown above, e.g. a skills-mode agent runs it as `/skill:speckit-...` or `$speckit-...`). Emitting the block alone does not run the hook.
+- If no hooks are registered or `.specify/extensions.yml` does not exist, skip silently
+
+## Goal
+
+Identify inconsistencies, duplications, ambiguities, and underspecified items across the three core artifacts (`spec.md`, `plan.md`, `tasks.md`) before implementation. This command MUST run only after `/speckit-tasks` has successfully produced a complete `tasks.md`.
+
+## Operating Constraints
+
+**STRICTLY READ-ONLY**: Do **not** modify any files. Output a structured analysis report. Offer an optional remediation plan (user must explicitly approve before any follow-up editing commands would be invoked manually).
+
+**Constitution Authority**: The project constitution (`.specify/memory/constitution.md`) is **non-negotiable** within this analysis scope. Constitution conflicts are automatically CRITICAL and require adjustment of the spec, plan, or tasks—not dilution, reinterpretation, or silent ignoring of the principle. If a principle itself needs to change, that must occur in a separate, explicit constitution update outside `/speckit-analyze`.
+
+## Execution Steps
+
+### 1. Initialize Analysis Context
+
+Run `.specify/scripts/bash/check-prerequisites.sh --json --require-tasks --include-tasks` once from repo root and parse JSON for FEATURE_DIR and AVAILABLE_DOCS. Derive absolute paths:
+
+- SPEC = FEATURE_DIR/spec.md
+- PLAN = FEATURE_DIR/plan.md
+- TASKS = FEATURE_DIR/tasks.md
+
+Abort with an error message if any required file is missing (instruct the user to run missing prerequisite command).
+For single quotes in args like "I'm Groot", use escape syntax: e.g 'I'\''m Groot' (or double-quote if possible: "I'm Groot").
+
+### 2. Load Artifacts (Progressive Disclosure)
+
+Load only the minimal necessary context from each artifact:
+
+**From spec.md:**
+
+- Overview/Context
+- Functional Requirements
+- Success Criteria (measurable outcomes — e.g., performance, security, availability, user success, business impact)
+- User Stories
+- Edge Cases (if present)
+
+**From plan.md:**
+
+- Architecture/stack choices
+- Data Model references
+- Phases
+- Technical constraints
+
+**From tasks.md:**
+
+- Task IDs
+- Descriptions
+- Phase grouping
+- Parallel markers [P]
+- Referenced file paths
+
+**From constitution:**
+
+- Load `.specify/memory/constitution.md` for principle validation
+
+### 3. Build Semantic Models
+
+Create internal representations (do not include raw artifacts in output):
+
+- **Requirements inventory**: For each Functional Requirement (FR-###) and Success Criterion (SC-###), record a stable key. Use the explicit FR-/SC- identifier as the primary key when present, and optionally also derive an imperative-phrase slug for readability (e.g., "User can upload file" → `user-can-upload-file`). Include only Success Criteria items that require buildable work (e.g., load-testing infrastructure, security audit tooling), and exclude post-launch outcome metrics and business KPIs (e.g., "Reduce support tickets by 50%").
+- **User story/action inventory**: Discrete user actions with acceptance criteria
+- **Task coverage mapping**: Map each task to one or more requirements or stories (inference by keyword / explicit reference patterns like IDs or key phrases)
+- **Constitution rule set**: Extract principle names and MUST/SHOULD normative statements
+
+### 4. Detection Passes (Token-Efficient Analysis)
+
+Focus on high-signal findings. Limit to 50 findings total; aggregate remainder in overflow summary.
+
+#### A. Duplication Detection
+
+- Identify near-duplicate requirements
+- Mark lower-quality phrasing for consolidation
+
+#### B. Ambiguity Detection
+
+- Flag vague adjectives (fast, scalable, secure, intuitive, robust) lacking measurable criteria
+- Flag unresolved placeholders (TODO, TKTK, ???, ``, etc.)
+
+#### C. Underspecification
+
+- Requirements with verbs but missing object or measurable outcome
+- User stories missing acceptance criteria alignment
+- Tasks referencing files or components not defined in spec/plan
+
+#### D. Constitution Alignment
+
+- Any requirement or plan element conflicting with a MUST principle
+- Missing mandated sections or quality gates from constitution
+
+#### E. Coverage Gaps
+
+- Requirements with zero associated tasks
+- Tasks with no mapped requirement/story
+- Success Criteria requiring buildable work (performance, security, availability) not reflected in tasks
+
+#### F. Inconsistency
+
+- Terminology drift (same concept named differently across files)
+- Data entities referenced in plan but absent in spec (or vice versa)
+- Task ordering contradictions (e.g., integration tasks before foundational setup tasks without dependency note)
+- Conflicting requirements (e.g., one requires Next.js while other specifies Vue)
+
+### 5. Severity Assignment
+
+Use this heuristic to prioritize findings:
+
+- **CRITICAL**: Violates constitution MUST, missing core spec artifact, or requirement with zero coverage that blocks baseline functionality
+- **HIGH**: Duplicate or conflicting requirement, ambiguous security/performance attribute, untestable acceptance criterion
+- **MEDIUM**: Terminology drift, missing non-functional task coverage, underspecified edge case
+- **LOW**: Style/wording improvements, minor redundancy not affecting execution order
+
+### 6. Produce Compact Analysis Report
+
+Output a Markdown report (no file writes) with the following structure:
+
+## Specification Analysis Report
+
+| ID | Category | Severity | Location(s) | Summary | Recommendation |
+|----|----------|----------|-------------|---------|----------------|
+| A1 | Duplication | HIGH | spec.md:L120-134 | Two similar requirements ... | Merge phrasing; keep clearer version |
+
+(Add one row per finding; generate stable IDs prefixed by category initial.)
+
+**Coverage Summary Table:**
+
+| Requirement Key | Has Task? | Task IDs | Notes |
+|-----------------|-----------|----------|-------|
+
+**Constitution Alignment Issues:** (if any)
+
+**Unmapped Tasks:** (if any)
+
+**Metrics:**
+
+- Total Requirements
+- Total Tasks
+- Coverage % (requirements with >=1 task)
+- Ambiguity Count
+- Duplication Count
+- Critical Issues Count
+
+### 7. Provide Next Actions
+
+At end of report, output a concise Next Actions block:
+
+- If CRITICAL issues exist: Recommend resolving before `/speckit-implement`
+- If only LOW/MEDIUM: User may proceed, but provide improvement suggestions
+- Provide explicit command suggestions: e.g., "Run /speckit-specify with refinement", "Run /speckit-plan to adjust architecture", "Manually edit tasks.md to add coverage for 'performance-metrics'"
+
+### 8. Offer Remediation
+
+Ask the user: "Would you like me to suggest concrete remediation edits for the top N issues?" (Do NOT apply them automatically.)
+
+### 9. Check for extension hooks
+
+After reporting, check if `.specify/extensions.yml` exists in the project root.
+- If it exists, read it and look for entries under the `hooks.after_analyze` key
+- If the YAML cannot be parsed or is invalid, skip hook checking silently and continue normally
+- Filter out hooks where `enabled` is explicitly `false`. Treat hooks without an `enabled` field as enabled by default.
+- For each remaining hook, do **not** attempt to interpret or evaluate hook `condition` expressions:
+ - If the hook has no `condition` field, or it is null/empty, treat the hook as executable
+ - If the hook defines a non-empty `condition`, skip the hook and leave condition evaluation to the HookExecutor implementation
+- When constructing command invocations from hook command names, replace dots (`.`) with hyphens (`-`). For example, `speckit.git.commit` → `/speckit-git-commit`.
+- For each executable hook, output the following based on its `optional` flag:
+ - **Optional hook** (`optional: true`):
+ ```
+ ## Extension Hooks
+
+ **Optional Hook**: {extension}
+ Command: `/{command}`
+ Description: {description}
+
+ Prompt: {prompt}
+ To execute: `/{command}`
+ ```
+ - **Mandatory hook** (`optional: false`):
+ ```
+ ## Extension Hooks
+
+ **Automatic Hook**: {extension}
+ Executing: `/{command}`
+ EXECUTE_COMMAND: {command}
+ ```
+ After emitting the block above you MUST actually invoke the hook and wait for it to finish before continuing. Run it the same way you would run the command yourself in this agent/session (the invocation may differ from the literal `{command}` id shown above, e.g. a skills-mode agent runs it as `/skill:speckit-...` or `$speckit-...`). Emitting the block alone does not run the hook.
+- If no hooks are registered or `.specify/extensions.yml` does not exist, skip silently
+
+## Operating Principles
+
+### Context Efficiency
+
+- **Minimal high-signal tokens**: Focus on actionable findings, not exhaustive documentation
+- **Progressive disclosure**: Load artifacts incrementally; don't dump all content into analysis
+- **Token-efficient output**: Limit findings table to 50 rows; summarize overflow
+- **Deterministic results**: Rerunning without changes should produce consistent IDs and counts
+
+### Analysis Guidelines
+
+- **NEVER modify files** (this is read-only analysis)
+- **NEVER hallucinate missing sections** (if absent, report them accurately)
+- **Prioritize constitution violations** (these are always CRITICAL)
+- **Use examples over exhaustive rules** (cite specific instances, not generic patterns)
+- **Report zero issues gracefully** (emit success report with coverage statistics)
+
+## Context
+
+$ARGUMENTS
diff --git a/.github/skills/speckit-checklist/SKILL.md b/.github/skills/speckit-checklist/SKILL.md
new file mode 100644
index 00000000..5d28650f
--- /dev/null
+++ b/.github/skills/speckit-checklist/SKILL.md
@@ -0,0 +1,373 @@
+---
+name: "speckit-checklist"
+description: "Generate a custom checklist for the current feature based on user requirements."
+compatibility: "Requires spec-kit project structure with .specify/ directory"
+metadata:
+ author: "github-spec-kit"
+ source: "templates/commands/checklist.md"
+---
+
+
+## Checklist Purpose: "Unit Tests for English"
+
+**CRITICAL CONCEPT**: Checklists are **UNIT TESTS FOR REQUIREMENTS WRITING** - they validate the quality, clarity, and completeness of requirements in a given domain.
+
+**NOT for verification/testing**:
+
+- ❌ NOT "Verify the button clicks correctly"
+- ❌ NOT "Test error handling works"
+- ❌ NOT "Confirm the API returns 200"
+- ❌ NOT checking if code/implementation matches the spec
+
+**FOR requirements quality validation**:
+
+- ✅ "Are visual hierarchy requirements defined for all card types?" (completeness)
+- ✅ "Is 'prominent display' quantified with specific sizing/positioning?" (clarity)
+- ✅ "Are hover state requirements consistent across all interactive elements?" (consistency)
+- ✅ "Are accessibility requirements defined for keyboard navigation?" (coverage)
+- ✅ "Does the spec define what happens when logo image fails to load?" (edge cases)
+
+**Metaphor**: If your spec is code written in English, the checklist is its unit test suite. You're testing whether the requirements are well-written, complete, unambiguous, and ready for implementation - NOT whether the implementation works.
+
+## User Input
+
+```text
+$ARGUMENTS
+```
+
+You **MUST** consider the user input before proceeding (if not empty).
+
+## Pre-Execution Checks
+
+**Check for extension hooks (before checklist generation)**:
+- Check if `.specify/extensions.yml` exists in the project root.
+- If it exists, read it and look for entries under the `hooks.before_checklist` key
+- If the YAML cannot be parsed or is invalid, skip hook checking silently and continue normally
+- Filter out hooks where `enabled` is explicitly `false`. Treat hooks without an `enabled` field as enabled by default.
+- For each remaining hook, do **not** attempt to interpret or evaluate hook `condition` expressions:
+ - If the hook has no `condition` field, or it is null/empty, treat the hook as executable
+ - If the hook defines a non-empty `condition`, skip the hook and leave condition evaluation to the HookExecutor implementation
+- When constructing command invocations from hook command names, replace dots (`.`) with hyphens (`-`). For example, `speckit.git.commit` → `/speckit-git-commit`.
+- For each executable hook, output the following based on its `optional` flag:
+ - **Optional hook** (`optional: true`):
+ ```
+ ## Extension Hooks
+
+ **Optional Pre-Hook**: {extension}
+ Command: `/{command}`
+ Description: {description}
+
+ Prompt: {prompt}
+ To execute: `/{command}`
+ ```
+ - **Mandatory hook** (`optional: false`):
+ ```
+ ## Extension Hooks
+
+ **Automatic Pre-Hook**: {extension}
+ Executing: `/{command}`
+ EXECUTE_COMMAND: {command}
+
+ Wait for the result of the hook command before proceeding to the Execution Steps.
+ ```
+ After emitting the block above you MUST actually invoke the hook and wait for it to finish before continuing. Run it the same way you would run the command yourself in this agent/session (the invocation may differ from the literal `{command}` id shown above, e.g. a skills-mode agent runs it as `/skill:speckit-...` or `$speckit-...`). Emitting the block alone does not run the hook.
+- If no hooks are registered or `.specify/extensions.yml` does not exist, skip silently
+
+## Execution Steps
+
+1. **Setup**: Run `.specify/scripts/bash/check-prerequisites.sh --json` from repo root and parse JSON for FEATURE_DIR and AVAILABLE_DOCS list.
+ - All file paths must be absolute.
+ - For single quotes in args like "I'm Groot", use escape syntax: e.g 'I'\''m Groot' (or double-quote if possible: "I'm Groot").
+
+2. **IF EXISTS**: Load `.specify/memory/constitution.md` for project principles and governance constraints.
+
+3. **Clarify intent (dynamic)**: Derive up to THREE initial contextual clarifying questions (no pre-baked catalog). They MUST:
+ - Be generated from the user's phrasing + extracted signals from spec/plan/tasks
+ - Only ask about information that materially changes checklist content
+ - Be skipped individually if already unambiguous in `$ARGUMENTS`
+ - Prefer precision over breadth
+
+ Generation algorithm:
+ 1. Extract signals: feature domain keywords (e.g., auth, latency, UX, API), risk indicators ("critical", "must", "compliance"), stakeholder hints ("QA", "review", "security team"), and explicit deliverables ("a11y", "rollback", "contracts").
+ 2. Cluster signals into candidate focus areas (max 4) ranked by relevance.
+ 3. Identify probable audience & timing (author, reviewer, QA, release) if not explicit.
+ 4. Detect missing dimensions: scope breadth, depth/rigor, risk emphasis, exclusion boundaries, measurable acceptance criteria.
+ 5. Formulate questions chosen from these archetypes:
+ - Scope refinement (e.g., "Should this include integration touchpoints with X and Y or stay limited to local module correctness?")
+ - Risk prioritization (e.g., "Which of these potential risk areas should receive mandatory gating checks?")
+ - Depth calibration (e.g., "Is this a lightweight pre-commit sanity list or a formal release gate?")
+ - Audience framing (e.g., "Will this be used by the author only or peers during PR review?")
+ - Boundary exclusion (e.g., "Should we explicitly exclude performance tuning items this round?")
+ - Scenario class gap (e.g., "No recovery flows detected—are rollback / partial failure paths in scope?")
+
+ Question formatting rules:
+ - If presenting options, generate a compact table with columns: Option | Candidate | Why It Matters
+ - Limit to A–E options maximum; omit table if a free-form answer is clearer
+ - Never ask the user to restate what they already said
+ - Avoid speculative categories (no hallucination). If uncertain, ask explicitly: "Confirm whether X belongs in scope."
+
+ Defaults when interaction impossible:
+ - Depth: Standard
+ - Audience: Reviewer (PR) if code-related; Author otherwise
+ - Focus: Top 2 relevance clusters
+
+ Output the questions (label Q1/Q2/Q3). After answers: if ≥2 scenario classes (Alternate / Exception / Recovery / Non-Functional domain) remain unclear, you MAY ask up to TWO more targeted follow‑ups (Q4/Q5) with a one-line justification each (e.g., "Unresolved recovery path risk"). Do not exceed five total questions. Skip escalation if user explicitly declines more.
+
+4. **Understand user request**: Combine `$ARGUMENTS` + clarifying answers:
+ - Derive checklist theme (e.g., security, review, deploy, ux)
+ - Consolidate explicit must-have items mentioned by user
+ - Map focus selections to category scaffolding
+ - Infer any missing context from spec/plan/tasks (do NOT hallucinate)
+
+5. **Load feature context**: Read from FEATURE_DIR:
+ - spec.md: Feature requirements and scope
+ - plan.md (if exists): Technical details, dependencies
+ - tasks.md (if exists): Implementation tasks
+
+ **Context Loading Strategy**:
+ - Load only necessary portions relevant to active focus areas (avoid full-file dumping)
+ - Prefer summarizing long sections into concise scenario/requirement bullets
+ - Use progressive disclosure: add follow-on retrieval only if gaps detected
+ - If source docs are large, generate interim summary items instead of embedding raw text
+
+6. **Generate checklist** - Create "Unit Tests for Requirements":
+ - Create `FEATURE_DIR/checklists/` directory if it doesn't exist
+ - Generate unique checklist filename:
+ - Use short, descriptive name based on domain (e.g., `ux.md`, `api.md`, `security.md`)
+ - Format: `[domain].md`
+ - File handling behavior:
+ - If file does NOT exist: Create new file and number items starting from CHK001
+ - If file exists: Append new items to existing file, continuing from the last CHK ID (e.g., if last item is CHK015, start new items at CHK016)
+ - Never delete or replace existing checklist content - always preserve and append
+
+ **CORE PRINCIPLE - Test the Requirements, Not the Implementation**:
+ Every checklist item MUST evaluate the REQUIREMENTS THEMSELVES for:
+ - **Completeness**: Are all necessary requirements present?
+ - **Clarity**: Are requirements unambiguous and specific?
+ - **Consistency**: Do requirements align with each other?
+ - **Measurability**: Can requirements be objectively verified?
+ - **Coverage**: Are all scenarios/edge cases addressed?
+
+ **Category Structure** - Group items by requirement quality dimensions:
+ - **Requirement Completeness** (Are all necessary requirements documented?)
+ - **Requirement Clarity** (Are requirements specific and unambiguous?)
+ - **Requirement Consistency** (Do requirements align without conflicts?)
+ - **Acceptance Criteria Quality** (Are success criteria measurable?)
+ - **Scenario Coverage** (Are all flows/cases addressed?)
+ - **Edge Case Coverage** (Are boundary conditions defined?)
+ - **Non-Functional Requirements** (Performance, Security, Accessibility, etc. - are they specified?)
+ - **Dependencies & Assumptions** (Are they documented and validated?)
+ - **Ambiguities & Conflicts** (What needs clarification?)
+
+ **HOW TO WRITE CHECKLIST ITEMS - "Unit Tests for English"**:
+
+ ❌ **WRONG** (Testing implementation):
+ - "Verify landing page displays 3 episode cards"
+ - "Test hover states work on desktop"
+ - "Confirm logo click navigates home"
+
+ ✅ **CORRECT** (Testing requirements quality):
+ - "Are the exact number and layout of featured episodes specified?" [Completeness]
+ - "Is 'prominent display' quantified with specific sizing/positioning?" [Clarity]
+ - "Are hover state requirements consistent across all interactive elements?" [Consistency]
+ - "Are keyboard navigation requirements defined for all interactive UI?" [Coverage]
+ - "Is the fallback behavior specified when logo image fails to load?" [Edge Cases]
+ - "Are loading states defined for asynchronous episode data?" [Completeness]
+ - "Does the spec define visual hierarchy for competing UI elements?" [Clarity]
+
+ **ITEM STRUCTURE**:
+ Each item should follow this pattern:
+ - Question format asking about requirement quality
+ - Focus on what's WRITTEN (or not written) in the spec/plan
+ - Include quality dimension in brackets [Completeness/Clarity/Consistency/etc.]
+ - Reference spec section `[Spec §X.Y]` when checking existing requirements
+ - Use `[Gap]` marker when checking for missing requirements
+
+ **EXAMPLES BY QUALITY DIMENSION**:
+
+ Completeness:
+ - "Are error handling requirements defined for all API failure modes? [Gap]"
+ - "Are accessibility requirements specified for all interactive elements? [Completeness]"
+ - "Are mobile breakpoint requirements defined for responsive layouts? [Gap]"
+
+ Clarity:
+ - "Is 'fast loading' quantified with specific timing thresholds? [Clarity, Spec §NFR-2]"
+ - "Are 'related episodes' selection criteria explicitly defined? [Clarity, Spec §FR-5]"
+ - "Is 'prominent' defined with measurable visual properties? [Ambiguity, Spec §FR-4]"
+
+ Consistency:
+ - "Do navigation requirements align across all pages? [Consistency, Spec §FR-10]"
+ - "Are card component requirements consistent between landing and detail pages? [Consistency]"
+
+ Coverage:
+ - "Are requirements defined for zero-state scenarios (no episodes)? [Coverage, Edge Case]"
+ - "Are concurrent user interaction scenarios addressed? [Coverage, Gap]"
+ - "Are requirements specified for partial data loading failures? [Coverage, Exception Flow]"
+
+ Measurability:
+ - "Are visual hierarchy requirements measurable/testable? [Acceptance Criteria, Spec §FR-1]"
+ - "Can 'balanced visual weight' be objectively verified? [Measurability, Spec §FR-2]"
+
+ **Scenario Classification & Coverage** (Requirements Quality Focus):
+ - Check if requirements exist for: Primary, Alternate, Exception/Error, Recovery, Non-Functional scenarios
+ - For each scenario class, ask: "Are [scenario type] requirements complete, clear, and consistent?"
+ - If scenario class missing: "Are [scenario type] requirements intentionally excluded or missing? [Gap]"
+ - Include resilience/rollback when state mutation occurs: "Are rollback requirements defined for migration failures? [Gap]"
+
+ **Traceability Requirements**:
+ - MINIMUM: ≥80% of items MUST include at least one traceability reference
+ - Each item should reference: spec section `[Spec §X.Y]`, or use markers: `[Gap]`, `[Ambiguity]`, `[Conflict]`, `[Assumption]`
+ - If no ID system exists: "Is a requirement & acceptance criteria ID scheme established? [Traceability]"
+
+ **Surface & Resolve Issues** (Requirements Quality Problems):
+ Ask questions about the requirements themselves:
+ - Ambiguities: "Is the term 'fast' quantified with specific metrics? [Ambiguity, Spec §NFR-1]"
+ - Conflicts: "Do navigation requirements conflict between §FR-10 and §FR-10a? [Conflict]"
+ - Assumptions: "Is the assumption of 'always available podcast API' validated? [Assumption]"
+ - Dependencies: "Are external podcast API requirements documented? [Dependency, Gap]"
+ - Missing definitions: "Is 'visual hierarchy' defined with measurable criteria? [Gap]"
+
+ **Content Consolidation**:
+ - Soft cap: If raw candidate items > 40, prioritize by risk/impact
+ - Merge near-duplicates checking the same requirement aspect
+ - If >5 low-impact edge cases, create one item: "Are edge cases X, Y, Z addressed in requirements? [Coverage]"
+
+ **🚫 ABSOLUTELY PROHIBITED** - These make it an implementation test, not a requirements test:
+ - ❌ Any item starting with "Verify", "Test", "Confirm", "Check" + implementation behavior
+ - ❌ References to code execution, user actions, system behavior
+ - ❌ "Displays correctly", "works properly", "functions as expected"
+ - ❌ "Click", "navigate", "render", "load", "execute"
+ - ❌ Test cases, test plans, QA procedures
+ - ❌ Implementation details (frameworks, APIs, algorithms)
+
+ **✅ REQUIRED PATTERNS** - These test requirements quality:
+ - ✅ "Are [requirement type] defined/specified/documented for [scenario]?"
+ - ✅ "Is [vague term] quantified/clarified with specific criteria?"
+ - ✅ "Are requirements consistent between [section A] and [section B]?"
+ - ✅ "Can [requirement] be objectively measured/verified?"
+ - ✅ "Are [edge cases/scenarios] addressed in requirements?"
+ - ✅ "Does the spec define [missing aspect]?"
+
+7. **Structure Reference**: Generate the checklist following the canonical template in `.specify/templates/checklist-template.md` for title, meta section, category headings, and ID formatting. If template is unavailable, use: H1 title, purpose/created meta lines, `##` category sections containing `- [ ] CHK### ` lines with globally incrementing IDs starting at CHK001.
+
+8. **Report**: Output full path to checklist file, item count, and summarize whether the run created a new file or appended to an existing one. Summarize:
+ - Focus areas selected
+ - Depth level
+ - Actor/timing
+ - Any explicit user-specified must-have items incorporated
+
+**Important**: Each `/speckit-checklist` command invocation uses a short, descriptive checklist filename and either creates a new file or appends to an existing one. This allows:
+
+- Multiple checklists of different types (e.g., `ux.md`, `test.md`, `security.md`)
+- Simple, memorable filenames that indicate checklist purpose
+- Easy identification and navigation in the `checklists/` folder
+
+To avoid clutter, use descriptive types and clean up obsolete checklists when done.
+
+## Example Checklist Types & Sample Items
+
+**UX Requirements Quality:** `ux.md`
+
+Sample items (testing the requirements, NOT the implementation):
+
+- "Are visual hierarchy requirements defined with measurable criteria? [Clarity, Spec §FR-1]"
+- "Is the number and positioning of UI elements explicitly specified? [Completeness, Spec §FR-1]"
+- "Are interaction state requirements (hover, focus, active) consistently defined? [Consistency]"
+- "Are accessibility requirements specified for all interactive elements? [Coverage, Gap]"
+- "Is fallback behavior defined when images fail to load? [Edge Case, Gap]"
+- "Can 'prominent display' be objectively measured? [Measurability, Spec §FR-4]"
+
+**API Requirements Quality:** `api.md`
+
+Sample items:
+
+- "Are error response formats specified for all failure scenarios? [Completeness]"
+- "Are rate limiting requirements quantified with specific thresholds? [Clarity]"
+- "Are authentication requirements consistent across all endpoints? [Consistency]"
+- "Are retry/timeout requirements defined for external dependencies? [Coverage, Gap]"
+- "Is versioning strategy documented in requirements? [Gap]"
+
+**Performance Requirements Quality:** `performance.md`
+
+Sample items:
+
+- "Are performance requirements quantified with specific metrics? [Clarity]"
+- "Are performance targets defined for all critical user journeys? [Coverage]"
+- "Are performance requirements under different load conditions specified? [Completeness]"
+- "Can performance requirements be objectively measured? [Measurability]"
+- "Are degradation requirements defined for high-load scenarios? [Edge Case, Gap]"
+
+**Security Requirements Quality:** `security.md`
+
+Sample items:
+
+- "Are authentication requirements specified for all protected resources? [Coverage]"
+- "Are data protection requirements defined for sensitive information? [Completeness]"
+- "Is the threat model documented and requirements aligned to it? [Traceability]"
+- "Are security requirements consistent with compliance obligations? [Consistency]"
+- "Are security failure/breach response requirements defined? [Gap, Exception Flow]"
+
+## Anti-Examples: What NOT To Do
+
+**❌ WRONG - These test implementation, not requirements:**
+
+```markdown
+- [ ] CHK001 - Verify landing page displays 3 episode cards [Spec §FR-001]
+- [ ] CHK002 - Test hover states work correctly on desktop [Spec §FR-003]
+- [ ] CHK003 - Confirm logo click navigates to home page [Spec §FR-010]
+- [ ] CHK004 - Check that related episodes section shows 3-5 items [Spec §FR-005]
+```
+
+**✅ CORRECT - These test requirements quality:**
+
+```markdown
+- [ ] CHK001 - Are the number and layout of featured episodes explicitly specified? [Completeness, Spec §FR-001]
+- [ ] CHK002 - Are hover state requirements consistently defined for all interactive elements? [Consistency, Spec §FR-003]
+- [ ] CHK003 - Are navigation requirements clear for all clickable brand elements? [Clarity, Spec §FR-010]
+- [ ] CHK004 - Is the selection criteria for related episodes documented? [Gap, Spec §FR-005]
+- [ ] CHK005 - Are loading state requirements defined for asynchronous episode data? [Gap]
+- [ ] CHK006 - Can "visual hierarchy" requirements be objectively measured? [Measurability, Spec §FR-001]
+```
+
+**Key Differences:**
+
+- Wrong: Tests if the system works correctly
+- Correct: Tests if the requirements are written correctly
+- Wrong: Verification of behavior
+- Correct: Validation of requirement quality
+- Wrong: "Does it do X?"
+- Correct: "Is X clearly specified?"
+
+## Post-Execution Checks
+
+**Check for extension hooks (after checklist generation)**:
+Check if `.specify/extensions.yml` exists in the project root.
+- If it exists, read it and look for entries under the `hooks.after_checklist` key
+- If the YAML cannot be parsed or is invalid, skip hook checking silently and continue normally
+- Filter out hooks where `enabled` is explicitly `false`. Treat hooks without an `enabled` field as enabled by default.
+- For each remaining hook, do **not** attempt to interpret or evaluate hook `condition` expressions:
+ - If the hook has no `condition` field, or it is null/empty, treat the hook as executable
+ - If the hook defines a non-empty `condition`, skip the hook and leave condition evaluation to the HookExecutor implementation
+- When constructing command invocations from hook command names, replace dots (`.`) with hyphens (`-`). For example, `speckit.git.commit` → `/speckit-git-commit`.
+- For each executable hook, output the following based on its `optional` flag:
+ - **Optional hook** (`optional: true`):
+ ```
+ ## Extension Hooks
+
+ **Optional Hook**: {extension}
+ Command: `/{command}`
+ Description: {description}
+
+ Prompt: {prompt}
+ To execute: `/{command}`
+ ```
+ - **Mandatory hook** (`optional: false`):
+ ```
+ ## Extension Hooks
+
+ **Automatic Hook**: {extension}
+ Executing: `/{command}`
+ EXECUTE_COMMAND: {command}
+ ```
+ After emitting the block above you MUST actually invoke the hook and wait for it to finish before continuing. Run it the same way you would run the command yourself in this agent/session (the invocation may differ from the literal `{command}` id shown above, e.g. a skills-mode agent runs it as `/skill:speckit-...` or `$speckit-...`). Emitting the block alone does not run the hook.
+- If no hooks are registered or `.specify/extensions.yml` does not exist, skip silently
diff --git a/.github/skills/speckit-clarify/SKILL.md b/.github/skills/speckit-clarify/SKILL.md
new file mode 100644
index 00000000..b445bda4
--- /dev/null
+++ b/.github/skills/speckit-clarify/SKILL.md
@@ -0,0 +1,291 @@
+---
+name: "speckit-clarify"
+description: "Identify underspecified areas in the current feature spec by asking up to 5 highly targeted clarification questions and encoding answers back into the spec."
+compatibility: "Requires spec-kit project structure with .specify/ directory"
+metadata:
+ author: "github-spec-kit"
+ source: "templates/commands/clarify.md"
+---
+
+
+## User Input
+
+```text
+$ARGUMENTS
+```
+
+You **MUST** consider the user input before proceeding (if not empty).
+
+## Pre-Execution Checks
+
+**Check for extension hooks (before clarification)**:
+- Check if `.specify/extensions.yml` exists in the project root.
+- If it exists, read it and look for entries under the `hooks.before_clarify` key
+- If the YAML cannot be parsed or is invalid, skip hook checking silently and continue normally
+- Filter out hooks where `enabled` is explicitly `false`. Treat hooks without an `enabled` field as enabled by default.
+- For each remaining hook, do **not** attempt to interpret or evaluate hook `condition` expressions:
+ - If the hook has no `condition` field, or it is null/empty, treat the hook as executable
+ - If the hook defines a non-empty `condition`, skip the hook and leave condition evaluation to the HookExecutor implementation
+- When constructing command invocations from hook command names, replace dots (`.`) with hyphens (`-`). For example, `speckit.git.commit` → `/speckit-git-commit`.
+- For each executable hook, output the following based on its `optional` flag:
+ - **Optional hook** (`optional: true`):
+ ```
+ ## Extension Hooks
+
+ **Optional Pre-Hook**: {extension}
+ Command: `/{command}`
+ Description: {description}
+
+ Prompt: {prompt}
+ To execute: `/{command}`
+ ```
+ - **Mandatory hook** (`optional: false`):
+ ```
+ ## Extension Hooks
+
+ **Automatic Pre-Hook**: {extension}
+ Executing: `/{command}`
+ EXECUTE_COMMAND: {command}
+
+ Wait for the result of the hook command before proceeding to the Outline.
+ ```
+ After emitting the block above you MUST actually invoke the hook and wait for it to finish before continuing. Run it the same way you would run the command yourself in this agent/session (the invocation may differ from the literal `{command}` id shown above, e.g. a skills-mode agent runs it as `/skill:speckit-...` or `$speckit-...`). Emitting the block alone does not run the hook.
+- If no hooks are registered or `.specify/extensions.yml` does not exist, skip silently
+
+## Outline
+
+Goal: Detect and reduce ambiguity or missing decision points in the active feature specification and record the clarifications directly in the spec file.
+
+Note: This clarification workflow is expected to run (and be completed) BEFORE invoking `/speckit-plan`. If the user explicitly states they are skipping clarification (e.g., exploratory spike), you may proceed, but must warn that downstream rework risk increases.
+
+Execution steps:
+
+1. Run `.specify/scripts/bash/check-prerequisites.sh --json --paths-only` from repo root **once** (combined `--json --paths-only` mode / `-Json -PathsOnly`). Parse minimal JSON payload fields:
+ - `FEATURE_DIR`
+ - `FEATURE_SPEC`
+ - (Optionally capture `IMPL_PLAN`, `TASKS` for future chained flows.)
+ - If JSON parsing fails, abort and instruct user to re-run `/speckit-specify` or verify feature branch environment.
+ - For single quotes in args like "I'm Groot", use escape syntax: e.g 'I'\''m Groot' (or double-quote if possible: "I'm Groot").
+
+2. **IF EXISTS**: Load `.specify/memory/constitution.md` for project principles and governance constraints.
+
+3. Load the current spec file. Perform a structured ambiguity & coverage scan using this taxonomy. For each category, mark status: Clear / Partial / Missing. Produce an internal coverage map used for prioritization (do not output raw map unless no questions will be asked).
+
+ Functional Scope & Behavior:
+ - Core user goals & success criteria
+ - Explicit out-of-scope declarations
+ - User roles / personas differentiation
+
+ Domain & Data Model:
+ - Entities, attributes, relationships
+ - Identity & uniqueness rules
+ - Lifecycle/state transitions
+ - Data volume / scale assumptions
+
+ Interaction & UX Flow:
+ - Critical user journeys / sequences
+ - Error/empty/loading states
+ - Accessibility or localization notes
+
+ Non-Functional Quality Attributes:
+ - Performance (latency, throughput targets)
+ - Scalability (horizontal/vertical, limits)
+ - Reliability & availability (uptime, recovery expectations)
+ - Observability (logging, metrics, tracing signals)
+ - Security & privacy (authN/Z, data protection, threat assumptions)
+ - Compliance / regulatory constraints (if any)
+
+ Integration & External Dependencies:
+ - External services/APIs and failure modes
+ - Data import/export formats
+ - Protocol/versioning assumptions
+
+ Edge Cases & Failure Handling:
+ - Negative scenarios
+ - Rate limiting / throttling
+ - Conflict resolution (e.g., concurrent edits)
+
+ Constraints & Tradeoffs:
+ - Technical constraints (language, storage, hosting)
+ - Explicit tradeoffs or rejected alternatives
+
+ Terminology & Consistency:
+ - Canonical glossary terms
+ - Avoided synonyms / deprecated terms
+
+ Completion Signals:
+ - Acceptance criteria testability
+ - Measurable Definition of Done style indicators
+
+ Misc / Placeholders:
+ - TODO markers / unresolved decisions
+ - Ambiguous adjectives ("robust", "intuitive") lacking quantification
+
+ For each category with Partial or Missing status, add a candidate question opportunity unless:
+ - Clarification would not materially change implementation or validation strategy
+ - Information is better deferred to planning phase (note internally)
+
+4. Generate (internally) a prioritized queue of candidate clarification questions (maximum 5). Do NOT output them all at once. Apply these constraints:
+ - Maximum of 5 total questions across the whole session.
+ - Each question must be answerable with EITHER:
+ - A short multiple‑choice selection (2–5 distinct, mutually exclusive options), OR
+ - A one-word / short‑phrase answer (explicitly constrain: "Answer in <=5 words").
+ - Only include questions whose answers materially impact architecture, data modeling, task decomposition, test design, UX behavior, operational readiness, or compliance validation.
+ - Ensure category coverage balance: attempt to cover the highest impact unresolved categories first; avoid asking two low-impact questions when a single high-impact area (e.g., security posture) is unresolved.
+ - Exclude questions already answered, trivial stylistic preferences, or plan-level execution details (unless blocking correctness).
+ - Favor clarifications that reduce downstream rework risk or prevent misaligned acceptance tests.
+ - If more than 5 categories remain unresolved, select the top 5 by (Impact * Uncertainty) heuristic.
+
+5. Sequential questioning loop (interactive):
+ - Present EXACTLY ONE question at a time.
+ - **Question writing quality (applies to every question, MC or short-answer):**
+ - Lead with `**Question:**` followed by a full interrogative that ends with `?`. The question text before the `?` must make sense on its own.
+ - NEVER use a topic label, section heading, or requirement id as the question itself. For example, `Acceptance device/runtime matrix (FR-023)` is INVALID — it is a label, not a question.
+ - After the `?`, the only permitted suffix is an optional parenthesized requirement/question id. Exact format: `**Question:** ?` or `**Question:** ? (FR-023)`. Never put the id before the `?`, and never use the id (alone or with a topic label) as the whole prompt.
+ - Immediately after the question line, add one plain-language "Why it matters" sentence (the stake for acceptance or shipping) before the recommendation/options.
+ - Use everyday wording; introduce jargon only if defined in the same sentence. Self-check: a reader who does not know Spec Kit must be able to answer from the Question line alone. Terse is fine; cryptic labels are not.
+ - For multiple‑choice questions:
+ - **Analyze all options** and determine the **most suitable option** based on:
+ - Best practices for the project type
+ - Common patterns in similar implementations
+ - Risk reduction (security, performance, maintainability)
+ - Alignment with any explicit project goals or constraints visible in the spec
+ - Present your **recommended option prominently** at the top with clear reasoning (1-2 sentences explaining why this is the best choice).
+ - Format as: `**Recommended:** Option [X] - `
+ - Then render all options as a Markdown table:
+
+ | Option | Description |
+ |--------|-------------|
+ | A |