@pega/sdk 0.0.4 → 0.0.6

package/templates/react-sdk-reference/.claude/skills/widget-components.md

@@ -1,260 +0,0 @@
-# Skill: Widget Components
-
-Create or replace widget components in the react-sdk-reference application. Widgets are self-contained UI blocks that fetch their own data from Pega APIs (data pages, case info) and render interactive features (ToDo lists, attachments, case history, etc.).
-
----
-
-## Architecture Overview
-
-```
-src/components/widget/<ComponentName>/
-├── <ComponentName>.tsx      # Component implementation
-├── index.tsx                # Re-export (if present)
-├── <ComponentName>.css      # Styles (optional)
-├── <ComponentName>Utils.ts  # Widget-specific utilities (optional)
-├── <ComponentName>.types.ts # Type definitions (optional)
-└── config-ext.json          # Metadata (optional)
-```
-
----
-
-## Props Interface
-
-Widget components extend `PConnProps`:
-
-```typescript
-import type { PConnProps } from '../../../types/PConnProps';
-
-interface MyWidgetProps extends PConnProps {
-  // Widget-specific props provided by the platform
-  datasource?: any;
-  headerText?: string;
-  context?: string;
-}
-```
-
-Some widgets extend `PConnFieldProps` when they behave like form fields (e.g., Attachment):
-
-```typescript
-import type { PConnFieldProps } from '../../../types/PConnProps';
-
-interface AttachmentProps extends Omit<PConnFieldProps, 'value'> {
-  value: any; // Attachment list (not a string)
-  allowMultiple: boolean;
-  extensions: string;
-}
-```
-
----
-
-## Implementation Pattern
-
-### Data-Fetching Widget
-
-Widgets typically fetch data from Pega data pages on mount. This pattern is design-system agnostic. The `// [DS RENDER]` section must be replaced with your design system's presentation primitives (card, list, table, etc.) — see "Design System Adaptation" below.
-
-```typescript
-import { useState, useEffect } from 'react';
-// Import your design system components here:
-// e.g. import { Card, List } from 'antd';
-// e.g. import { Card, UnorderedList } from '@chakra-ui/react';
-import type { PConnProps } from '@pega/sdk-react';
-
-interface MyWidgetProps extends PConnProps {
-  datasource?: any;
-  headerText?: string;
-}
-
-export default function MyWidget(props: MyWidgetProps) {
-  const { getPConnect, datasource, headerText = 'My Widget' } = props;
-  const pConn = getPConnect();
-
-  const [data, setData] = useState<any[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  // 1. Fetch data from a Pega data page on mount
-  // This block is always the same regardless of design system
-  useEffect(() => {
-    const context = pConn.getContextName();
-    PCore.getDataPageUtils()
-      .getDataAsync(
-        datasource?.source,  // Data page name (e.g., 'D_WorkList')
-        context,
-        {},                  // Parameters
-        { pageNumber: 1, pageSize: 10 },
-        { select: [{ field: 'pyID' }, { field: 'pyLabel' }] },
-        { invalidateCache: true }
-      )
-      .then(response => {
-        setData(Array.isArray(response?.data) ? response.data : []);
-        setLoading(false);
-      })
-      .catch(() => setLoading(false));
-  }, []);
-
-  // 2. Loading state — replace with your DS loading indicator if available
-  if (loading) return <div>Loading...</div>;
-
-  // 3. [DS RENDER] — replace with your design system's card/list/table primitives
-  // See "Design System Adaptation" section below for guidance
-  return (
-    <YourDesignSystemCard>
-      <YourDesignSystemCardHeader title={headerText} />
-      <YourDesignSystemCardContent>
-        <YourDesignSystemList>
-          {data.map((item, i) => (
-            <YourDesignSystemListItem key={i}>{item.pyLabel}</YourDesignSystemListItem>
-          ))}
-        </YourDesignSystemList>
-      </YourDesignSystemCardContent>
-    </YourDesignSystemCard>
-  );
-}
-```
-
----
-
-## Design System Adaptation
-
-The PCore data-fetching logic (all `PCore.*` calls) is always identical regardless of design system. Only the `// [DS RENDER]` section changes.
-
-**1. Check the component-specific skill file** — `.claude/skills/widget-skills/<ComponentName>.md` contains a **Design System Mapping** table where available. Use it as a starting point.
-
-**2. If the chosen design system is not listed** — use the component purpose description to identify the appropriate DS primitives (card, list, table, button, badge, etc.).
-
-**3. Discover the API from installed packages** — confirm component names and props from `.d.ts` before writing JSX:
-
-```bash
-find node_modules/<ds-package> -name "*.d.ts" | xargs grep -l "Card\|List\|Table" | head -5
-grep -A 30 "interface.*Props" <path-to-file>
-```
-
-**4. Common widget UI primitive mapping:**
-
-| Widget pattern       | Typical DS equivalent                           |
-| -------------------- | ----------------------------------------------- |
-| Container with title | `Card` + header/title prop, or `Panel`, `Box`   |
-| Item list            | `List`, `UnorderedList`, or `Table` rows        |
-| Loading indicator    | `Spinner`, `Skeleton`, `Loading`                |
-| Action button        | `Button` with `onClick`                         |
-| Status badge         | `Badge`, `Tag`, `Chip`                          |
-| Empty state          | DS empty/placeholder component or plain `<div>` |
-
-**5. Icons** — if the DS has a companion icon package, read its exports before using any icon name. Never guess icon names.
-
----
-
-### Action Widget (opens assignments/cases)
-
-```typescript
-function openAssignment(assignment) {
-  const { classname, ID } = assignment;
-  const context = getPConnect().getContextName();
-  const options = { containerName: 'primary', channelName: '' };
-
-  PCore.getMashupApi().openAssignment(ID, classname, options);
-}
-
-function createCase(caseType) {
-  PCore.getMashupApi().createCase(caseType, PCore.getConstants().APP.APP);
-}
-```
-
----
-
-## Common Pega APIs Used in Widgets
-
-### Data Pages
-
-```typescript
-// Fetch list data
-PCore.getDataPageUtils().getDataAsync(dataPageName, context, params, paging, query, options);
-
-// Get page data (single record)
-PCore.getDataPageUtils().getPageDataAsync(dataPageName, context, params);
-```
-
-### Case Info
-
-```typescript
-const pConn = getPConnect();
-const caseKey = pConn.getCaseInfo().getKey();
-const caseID = pConn.getCaseInfo().getID();
-const caseName = pConn.getCaseInfo().getName();
-```
-
-### Attachments
-
-```typescript
-PCore.getAttachmentUtils().prepareAttachmentData(value);
-PCore.getAttachmentUtils().uploadAttachment(file, onProgress, errorHandler, context);
-PCore.getAttachmentUtils().downloadAttachment(attachmentID, context);
-```
-
-### Actions
-
-```typescript
-const actionsApi = pConn.getActionsApi();
-actionsApi.updateFieldValue(propName, value);
-actionsApi.triggerFieldChange(propName, value);
-actionsApi.openLocalAction(actionName, options);
-```
-
-### Container Management
-
-```typescript
-const containerManager = pConn.getContainerManager();
-containerManager.addContainerItem({
-  semanticURL,
-  key,
-  flowName,
-  caseViewMode,
-  resourceType,
-  data,
-});
-```
-
----
-
-## Registration
-
-Register widgets in `src/components/component-map.ts`:
-
-```typescript
-import MyWidget from './widget/MyWidget';
-
-// In getSampleComponentMap():
-{
-  ...sdkComponents,
-  MyWidget,  // Key must match the Pega component name
-}
-```
-
----
-
-## Existing Widget Components
-
-| Component       | Description                 | Key APIs                                                            |
-| --------------- | --------------------------- | ------------------------------------------------------------------- |
-| AppAnnouncement | System-wide announcements   | `PCore.getMessagingServiceUtils()`                                  |
-| Attachment      | File upload/download        | `PCore.getAttachmentUtils()`                                        |
-| CaseHistory     | Case audit trail            | `PCore.getDataPageUtils()`                                          |
-| FileUtility     | File management utility     | `PCore.getAttachmentUtils()`                                        |
-| Followers       | Case followers list         | `PCore.getDataPageUtils()`                                          |
-| QuickCreate     | Quick case creation buttons | `PCore.getMashupApi().createCase()`                                 |
-| SummaryItem     | Single summary card         | Props from parent                                                   |
-| SummaryList     | List of summary cards       | Props from parent                                                   |
-| ToDo            | Assignment worklist         | `PCore.getDataPageUtils()`, `PCore.getMashupApi().openAssignment()` |
-
----
-
-## Key Conventions
-
-1. **Default export** — `export default function WidgetName`.
-2. **Self-contained data** — Widgets fetch their own data (don't rely on parent passing data down).
-3. **Loading states** — Always handle loading/error states when fetching data.
-4. **PCore globals** — Access `PCore` directly (declared globally by `@pega/pcore-pconnect-typedefs`).
-5. **Localization** — Use `pConn.getLocalizationService()` for translated strings when available.
-6. **Context** — Use `pConn.getContextName()` as the context parameter for data page calls.
-7. **Card layout** — Widgets typically render inside MUI `Card` with `CardHeader` and `CardContent`.
-8. **Action handling** — Use `PCore.getMashupApi()` for case/assignment operations, `actionsApi` for field updates.

package/templates/react-sdk-reference/.claude/skills/widget-skills/AppAnnouncement.md

@@ -1,84 +0,0 @@
-# Skill: AppAnnouncement
-
-Card-based announcement widget. Displays a system-wide or application announcement with an optional bullet list of items and a "See what's new" external link button.
-
-> **Prerequisite skill:** [`widget-components.md`](../widget-components.md) — covers architecture, props interface, data-fetching patterns, and registration conventions common to ALL widget components.
-
----
-
-## Component Purpose
-
-Renders an announcement card with a heading, description text, optional bullet list of items sourced from a `datasource` prop, and an optional external link button. Styled with a left accent border to visually distinguish it from other cards.
-
-## Pega Metadata
-
-- **Registration key:** `AppAnnouncement` (in `component-map.ts`)
-- **Category:** Widget — informational display
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop           | Type       | Required | Description                                                            |
-| -------------- | ---------- | -------- | ---------------------------------------------------------------------- |
-| `header`       | `string`   | No       | Announcement card title                                                |
-| `description`  | `string`   | No       | Announcement body text                                                 |
-| `datasource`   | `object`   | No       | Data source object — `datasource.source` is an array of item objects   |
-| `whatsnewlink` | `string`   | No       | URL for the "See what's new" button; if absent, button is not rendered |
-| `getPConnect`  | `function` | Yes      | PConnect getter                                                        |
-
-## Behavioral Contract
-
-1. **Item list extraction:** If `datasource` is provided and `datasource.source` is a non-empty array, extract item names and render them as a bullet list. Each array item is expected to have a `name` property.
-2. **Button:** If `whatsnewlink` is non-empty, render a button labeled `"See what's new"` (or localized equivalent). On click, open the URL in a new browser tab (`window.open(whatsnewlink, '_blank')`).
-3. **Description:** Render the `description` string as plain text below the header.
-4. **No data fetching:** This widget is purely prop-driven — it does not call any PCore data APIs.
-
-## Visual Specifications
-
-### Card Layout
-
-| Element                 | Position                                |
-| ----------------------- | --------------------------------------- |
-| Left accent border      | 6px solid, primary light color          |
-| Card header             | `header` prop as title                  |
-| Card content            | Description text + optional bullet list |
-| "See what's new" button | Below description / bullet list         |
-
-**CSS-only implementation notes:**
-
-- Card: `border-left: 6px solid var(--app-primary-light-color); border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.12)`.
-- Card header: `padding: 12px 16px; font-weight: 600`.
-- Card content: `padding: 0 16px 16px`.
-- Bullet list: `padding-left: 1.5rem; margin: 0.5rem 0`.
-- "See what's new" button: `margin-top: 0.75rem; text-transform: none`.
-
-## Edge Cases & Special Logic
-
-- `datasource` may be `undefined` or `datasource.source` may be an empty array — in both cases, render no bullet list (not even an empty `<ul>`).
-- `whatsnewlink` may be an empty string — treat the same as absent (no button rendered).
-- `header` and `description` may both be absent — render the card with empty/placeholder content without crashing.
-- Item objects in `datasource.source` are expected to have `name` — guard against items where `name` is `undefined`.
-
-## Dependencies
-
-- MUI: `<Card>`, `<CardHeader>`, `<CardContent>`, `<Typography>`, `<Button>`
-
-## Design System Mapping
-
-**UI control type:** Announcement / informational card with bullet list and external link.
-
-Listed design systems are examples only.
-
-| Design System      | Card                                        | Bullet List                   | Button                     |
-| ------------------ | ------------------------------------------- | ----------------------------- | -------------------------- |
-| Default (CSS only) | `<div>` with left border + box-shadow       | `<ul>/<li>`                   | `<button>` opening new tab |
-| MUI                | `<Card>` + `<CardHeader>` + `<CardContent>` | `<List>/<ListItem>` or `<ul>` | `<Button>`                 |
-| Ant Design         | `<Card>` with `title` prop                  | `<ul>/<li>`                   | `<Button>`                 |
-| Chakra UI          | `<Card>` + `<CardHeader>` + `<CardBody>`    | `<UnorderedList>/<ListItem>`  | `<Button>`                 |
-| Shadcn/ui          | `<Card>` + `<CardHeader>` + `<CardContent>` | `<ul>/<li>`                   | `<Button>`                 |
-
-When implementing in a specific design system:
-
-- Left accent border is a key visual identifier — implement it via CSS or the design system's border utilities
-- "See what's new" must open in a new tab (`target='_blank'` + `rel='noopener noreferrer'`)
-- The widget is entirely prop-driven — no data fetching needed

package/templates/react-sdk-reference/.claude/skills/widget-skills/Attachment.md

@@ -1,151 +0,0 @@
-# Skill: Attachment
-
-File upload/download widget for case attachments. Behaves like a form field — binds to a case attachment property, supports multiple files, validates extensions and size, tracks upload progress, and blocks form submission during active uploads.
-
-> **Prerequisite skill:** [`widget-components.md`](../widget-components.md) — covers architecture, props interface, data-fetching patterns, and registration conventions common to ALL widget components.
-
----
-
-## Component Purpose
-
-Renders a file attachment control within a Pega form. Users can upload one or multiple files, download existing attachments, and delete attachments. The widget validates file extensions and enforces a maximum size from environment config. Upload progress is shown per-file. Form submission is blocked while uploads are in progress via the action sequencer.
-
-## Pega Metadata
-
-- **Registration key:** `Attachment` (in `component-map.ts`)
-- **Category:** Widget — form field (file input)
-- **Extends:** `Omit<PConnFieldProps, 'value'>` (uses `value: any` instead of the standard string value)
-
-## Props
-
-| Prop               | Type                | Required                   | Description                                                                  |
-| ------------------ | ------------------- | -------------------------- | ---------------------------------------------------------------------------- |
-| `value`            | `any`               | Yes                        | Attachment list or single attachment object (from Pega property)             |
-| `allowMultiple`    | `boolean \| string` | No                         | Whether multiple files can be attached. Default `false`                      |
-| `extensions`       | `string`            | No                         | Comma-separated list of allowed file extensions (e.g., `".pdf,.doc,.jpg"`)   |
-| `editMode`         | `string`            | No                         | `"tableRows"` for inline table edit mode (special multi-attachment handling) |
-| `isTableFormatter` | `boolean`           | No                         | Whether this widget is used inside a table formatter                         |
-| `label`            | `string`            | Yes (from PConnFieldProps) | Field label                                                                  |
-| `required`         | `boolean`           | No                         | Whether a file is required                                                   |
-| `disabled`         | `boolean`           | No                         | Whether the control is disabled                                              |
-| `displayMode`      | `string`            | No                         | `"DISPLAY_ONLY"` for read-only rendering                                     |
-| `validatemessage`  | `string`            | No                         | Validation error message to display                                          |
-| `helperText`       | `string`            | No                         | Helper text shown below the control                                          |
-| `getPConnect`      | `function`          | Yes                        | PConnect getter                                                              |
-
-## Behavioral Contract
-
-### Attachment Format Detection
-
-Pega has two attachment data formats — detect which one is in use:
-
-**Old format (annotation-based):**
-
-```typescript
-value = { pxResults: [...], pyAttachCount: N }
-```
-
-**New standard format:**
-
-```typescript
-value = [{ ID, name, mimeType, category, ... }]  // array
-```
-
-Call `PCore.getAttachmentUtils().prepareAttachmentData(value)` to normalize both formats into a unified `FileObject[]` array.
-
-### File Validation
-
-On file selection (via `<input type='file'>`):
-
-1. **Extension check:** Compare selected file's extension against `extensions` prop (split by comma). If not allowed, add an error to the file and do not upload.
-2. **Size check:** Compare file size against `PCore.getEnvironmentInfo().getMaxAttachmentSize()` (in bytes). If too large, add a size error.
-3. Valid files proceed to upload.
-
-### Upload Flow
-
-1. Call `PCore.getActionsSequencer().addAction('attachment_upload_' + fileId)` — blocks form submission.
-2. Call `PCore.getAttachmentUtils().uploadAttachment(file, onProgress, onError, context)`.
-3. On progress: update per-file `progress` value (0–100) in state.
-4. On success: add the returned attachment metadata to the local file list; update the Pega property via `pConn.setReferenceList(newAttachmentList)`.
-5. Call `PCore.getActionsSequencer().removeAction('attachment_upload_' + fileId)` — unblocks form submission.
-6. On error: set file error state; call `PCore.getMessageManager().addMessages([errorMessage])`.
-
-### Download
-
-Call `PCore.getAttachmentUtils().downloadAttachment(attachmentID, context)` — triggers browser file download.
-
-### Delete
-
-Remove the attachment from the local list and update `pConn.setReferenceList(updatedList)`. Do not call a separate delete API in the reference implementation — deletion is committed on form save.
-
-### Pub-Sub: Assignment Submission
-
-Subscribe to `PCore.getPubSubUtils().subscribe(BEFORE_ASSIGNMENT_SUBMIT, handleBeforeSubmit, 'Attachment')`. In `handleBeforeSubmit`, validate that no uploads are still in progress.
-
-### Read-Only Mode (`displayMode === 'DISPLAY_ONLY'`)
-
-Render a list of existing attachments as download links. No upload controls shown.
-
-### Inline Table Edit Mode (`editMode === 'tableRows'`)
-
-Compressed display for use inside a table cell. Show attachment count and a small upload button. Clicking opens a minimal upload dialog.
-
-## Visual Specifications
-
-| Element                   | Description                                                                           |
-| ------------------------- | ------------------------------------------------------------------------------------- |
-| Label                     | Standard field label above the control                                                |
-| Drop zone / Upload button | Clickable area to select files; optionally supports drag-and-drop                     |
-| File list                 | Each uploaded file: icon + name + size + progress bar (during upload) + delete button |
-| Error state               | Red error text below the control for invalid files or upload failures                 |
-| Helper text               | Secondary text below the control                                                      |
-
-**CSS-only implementation notes:**
-
-- Drop zone: `border: 2px dashed var(--border-color); border-radius: 4px; padding: 1rem; text-align: center; cursor: pointer`.
-- Drop zone hover: `border-color: var(--app-primary-color); background: var(--hover-bg)`.
-- File row: `display: flex; align-items: center; gap: 0.5rem; padding: 4px 0`.
-- Progress bar: `height: 4px; background: var(--app-primary-color); border-radius: 2px; transition: width 0.2s`.
-- Error text: `color: var(--error-color); font-size: 0.75rem; margin-top: 4px`.
-- Delete button: `color: var(--error-color)`.
-
-## Edge Cases & Special Logic
-
-- `allowMultiple` may be a string `"true"` / `"false"` or a boolean — always coerce: `allowMultiple === true || allowMultiple === 'true'`.
-- Upload progress: track per-file progress in a `Map<fileId, number>` state object.
-- `isTableFormatter`: when `true`, hide the label and reduce padding for compact table display.
-- Concurrent uploads: multiple files may upload simultaneously — the sequencer action must be keyed per-file.
-- Max size: call `PCore.getEnvironmentInfo().getMaxAttachmentSize()` at validation time (not at mount) — size config may be dynamic.
-- `extensions` may be empty string — if empty, allow all file types.
-
-## Dependencies
-
-- `AttachmentUtils.ts` — `validateExtension`, `validateSize`, `getFileTypeIcon`, `buildDownloadURL`, error handling helpers
-- `Attachment.types.ts` — `FileObject`, `AttachmentLinks`, `PageInstructionOptions` type definitions
-- `PCore.getAttachmentUtils()` — upload, download, prepareAttachmentData
-- `PCore.getActionsSequencer()` — block/unblock form submission during upload
-- `PCore.getEnvironmentInfo()` — max attachment size
-- `PCore.getMessageManager()` — error message display
-- `PCore.getPubSubUtils()` — before-submit subscription
-- `downloadjs` library — browser file download trigger
-
-## Design System Mapping
-
-**UI control type:** File upload form field with progress tracking, validation, and attachment list.
-
-Listed design systems are examples only.
-
-| Design System      | File Input                                         | Progress                        | File List                 |
-| ------------------ | -------------------------------------------------- | ------------------------------- | ------------------------- |
-| Default (CSS only) | `<input type='file'>` + custom styled drop zone    | `<progress>` element or CSS bar | `<ul>/<li>` rows          |
-| MUI                | Custom styled `<Box>` drop zone + hidden `<input>` | `<LinearProgress>`              | `<List>/<ListItem>`       |
-| Ant Design         | `<Upload dragger>`                                 | `<Progress>`                    | Built-in upload file list |
-| Chakra UI          | Custom `<Box>` with `useDropzone`                  | `<Progress>`                    | `<VStack>` rows           |
-| Shadcn/ui          | Custom drop zone                                   | Custom CSS progress bar         | `<ul>/<li>` rows          |
-
-When implementing in a specific design system:
-
-- Action sequencer blocking (`addAction`/`removeAction`) is mandatory — do not skip it; form submission must be blocked during uploads
-- Detect and normalize both old and new attachment formats via `prepareAttachmentData`
-- `allowMultiple` coercion (string vs boolean) is required
-- Extension and size validation must happen client-side before calling the upload API

package/templates/react-sdk-reference/.claude/skills/widget-skills/CaseHistory.md

@@ -1,110 +0,0 @@
-# Skill: CaseHistory
-
-Case history widget. Fetches and displays the full audit trail for the current case in a table with Date, Description, and Performer columns.
-
-> **Prerequisite skill:** [`widget-components.md`](../widget-components.md) — covers architecture, props interface, data-fetching patterns, and registration conventions common to ALL widget components.
-
----
-
-## Component Purpose
-
-Renders a table of case events sourced from the `D_pyWorkHistory` data page. Shows when each event happened (`pyUpdatedDateTime`), what happened (`pyMessageKey`), and who performed it (`pyPerformer`). Uses `fast-deep-equal` to skip unnecessary re-renders when data has not changed.
-
-## Pega Metadata
-
-- **Registration key:** `CaseHistory` (in `component-map.ts`)
-- **Category:** Widget — case data display
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop          | Type       | Required | Description                                           |
-| ------------- | ---------- | -------- | ----------------------------------------------------- |
-| `getPConnect` | `function` | Yes      | PConnect getter — used to resolve case ID and context |
-
-No additional custom props. All data is fetched internally.
-
-## Behavioral Contract
-
-### Data Fetch
-
-On mount, fetch history from the `D_pyWorkHistory` data page:
-
-```
-PCore.getDataApiUtils().getData(
-  'D_pyWorkHistory',
-  { pyCaseInsKey: caseKey },
-  context
-)
-```
-
-- `caseKey` = `pConn.getCaseInfo().getKey()` (the fully-qualified case key).
-- `context` = `pConn.getContextName()`.
-- Store result in `historyData` state array.
-- On error or empty response, `historyData` stays as `[]`.
-
-### Re-render Optimization
-
-Use `fast-deep-equal/react` to compare new `historyData` with previous value — only call `setHistoryData` if the data has actually changed. This prevents unnecessary re-renders caused by reference inequality.
-
-### Data Transformation
-
-For each history row, map:
-
-- **Date column:** Format `pyUpdatedDateTime` using the SDK date formatter (e.g., `formatDateTime(row.pyUpdatedDateTime)`) or display as-is.
-- **Description column:** `row.pyMessageKey` — the localized event description string.
-- **Performer column:** `row.pyPerformer` — the operator who performed the action.
-- Missing values: display `"---"` for any undefined/null field.
-
-## Visual Specifications
-
-### Table Layout
-
-| Column      | Field                           | Width |
-| ----------- | ------------------------------- | ----- |
-| Date        | `pyUpdatedDateTime` (formatted) | ~25%  |
-| Description | `pyMessageKey`                  | ~50%  |
-| Performer   | `pyPerformer`                   | ~25%  |
-
-**CSS-only implementation notes:**
-
-- Table container: `width: 100%; overflow-x: auto`.
-- Table: `border-collapse: collapse; width: 100%`.
-- Header cells: `background: var(--table-header-bg); font-weight: 600; padding: 8px 12px; border-bottom: 2px solid var(--divider-color)`.
-- Body cells: `padding: 8px 12px; border-bottom: 1px solid var(--divider-color)`.
-- Missing value placeholder `"---"`: `color: var(--secondary-text-color)`.
-- No pagination in the reference implementation — all rows shown.
-
-## Edge Cases & Special Logic
-
-- `D_pyWorkHistory` may return an empty array for cases with no history events — render an empty table body (or an empty-state message like `"No history available"`).
-- `pyUpdatedDateTime` format varies — always run it through the SDK date formatter before display.
-- `pyMessageKey` may be a locale key — resolve it via `PCore.getLocaleUtils().getLocaleValue()` if a localized string is required.
-- The widget has no pagination — for cases with very long history, the table may become very tall. Consider adding pagination if needed.
-
-## Dependencies
-
-- `PCore.getDataApiUtils().getData()` — fetches `D_pyWorkHistory` data page
-- `fast-deep-equal/react` — prevents unnecessary re-renders
-- `PCore.getConstants().CASE_INFO.CASE_INFO_ID` — resolves case ID constant
-- MUI: `<Table>`, `<TableBody>`, `<TableCell>`, `<TableContainer>`, `<TableHead>`, `<TableRow>`
-
-## Design System Mapping
-
-**UI control type:** Read-only case audit table with 3 columns.
-
-Listed design systems are examples only.
-
-| Design System      | Table                                                                             |
-| ------------------ | --------------------------------------------------------------------------------- |
-| Default (CSS only) | `<table>/<thead>/<tbody>/<tr>/<td>`                                               |
-| MUI                | `<TableContainer>` + `<Table>` + `<TableHead>/<TableBody>/<TableRow>/<TableCell>` |
-| Ant Design         | `<Table dataSource={historyData} columns={...}>`                                  |
-| Chakra UI          | `<Table>` + `<Thead>/<Tbody>/<Tr>/<Th>/<Td>`                                      |
-| Shadcn/ui          | `<Table>` + `<TableHeader>/<TableBody>/<TableRow>/<TableHead>/<TableCell>`        |
-
-When implementing in a specific design system:
-
-- `fast-deep-equal` comparison is a performance optimization — include it to avoid redundant renders on re-subscription
-- Data page name `D_pyWorkHistory` is fixed — do not make it configurable
-- Missing field fallback `"---"` should be consistent across all three columns