@pega/sdk 0.0.5 → 0.0.7

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

@@ -2,7 +2,7 @@
 
 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.
+> **Prerequisite skill:** [`widget-components.md`](../widget-components.md) — covers architecture, inputs interface, data-fetching patterns, and registration conventions common to ALL widget components.
 
 ---
 
@@ -12,84 +12,48 @@ Renders a file attachment control within a Pega form. Users can upload one or mu
 
 ## Pega Metadata
 
-- **Registration key:** `Attachment` (in `component-map.ts`)
+- **Registration key:** `Attachment` (registered in the project's component map)
 - **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                                                              |
-
-## Component Skeleton
+- **Extends:** the project's base component interface (with `value` typed as `any` instead of the standard string value)
+
+## Inputs
+
+| Input              | 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 base interface) | 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                                                              |
+
+## Implementation Structure
 
 This is a complex form-field widget (~400 lines). Key structural outline:
 
-```typescript
-import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { validateMaxSize } from '../../helpers/attachmentShared';
-import { clearFieldErrorMessages, deleteAttachments, getIconFromFileType, insertAttachments,
-  useDeepMemo, useFileDownload, validateFileExtension } from './AttachmentUtils';
-import type { PConnFieldProps } from '@pega/sdk-react';
-import './Attachment.css';
-
-interface AttachmentProps extends Omit<PConnFieldProps, 'value'> {
-  value: any; allowMultiple: boolean | string; extensions: string;
-  editMode: string; isTableFormatter: boolean;
-}
-
-export default function Attachment(props: AttachmentProps) {
-  const { value, getPConnect, label, validatemessage, extensions, displayMode, helperText, editMode, isTableFormatter } = props;
-  let { required, disabled, allowMultiple } = props;
-  // Coerce string booleans
-  [required, disabled, allowMultiple] = [required, disabled, allowMultiple].map(
-    p => p === true || (typeof p === 'string' && p === 'true')
-  );
-  const pConn = getPConnect();
-  const actionSequencer = useMemo(() => PCore.getActionsSequencer(), []);
-  const contextName = pConn.getContextName();
-
-  // 1. Normalize attachment data (old vs new format)
-  const { attachments, isOldAttachment } = PCore.getAttachmentUtils().prepareAttachmentData(value);
-  // 2. Set reference list
-  let valueRef = (pConn.getStateProps() as any).value;
-  pConn.setReferenceList(`.${valueRef}`);
-
-  // 3. State: files array, error tracking, upload toggle
-  const [files, setFiles] = useState(attachments);
-  const [toggleUploadBegin, setToggleUploadBegin] = useState(false);
-
-  // 4. deleteFile — removes from state, calls deleteAttachments, deregisters sequencer
-  // 5. onFileAdded — validates extension + size, adds to files, sets toggleUploadBegin
-  // 6. uploadFiles — registerBlockingAction, uploadAttachment per file, insertAttachments on success
-  // 7. useEffect: trigger uploadFiles when toggleUploadBegin changes
-  // 8. useEffect: subscribe to ASSIGNMENT_SUBMISSION for state override
-
-  // 9. Render: label + upload button + validation message + file list with progress/delete
-  return (
-    <div className="file-upload-container">
-      <label>{label}</label>
-      {/* Upload button (hidden input + styled button) */}
-      {/* Validation/helper text */}
-      {/* File list: icon + name + meta + progress + delete button */}
-    </div>
-  );
-}
-```
-
-> **Key patterns:** Action sequencer blocking (`registerBlockingAction`/`deRegisterBlockingAction`), `prepareAttachmentData` normalization, per-file progress tracking, `insertAttachments`/`deleteAttachments` helpers for Redux state.
+**Module Setup:** The component requires local state, lifecycle effects, cached callbacks, memoized computations, and instance references. It depends on `validateMaxSize` from the project's attachment helpers, as well as `clearFieldErrorMessages`, `deleteAttachments`, `getIconFromFileType`, `insertAttachments`, a deep-memo utility, a file-download utility, and `validateFileExtension` from the component's own utility module. The component's inputs interface extends the project's base component interface (with `value` as `any`) plus `allowMultiple` (boolean or string), `extensions` (string), `editMode` (string), and `isTableFormatter` (boolean).
+
+**Main Component Logic** — steps in order:
+
+1. Receive `value`, `getPConnect`, `label`, `validatemessage`, `extensions`, `displayMode`, `helperText`, `editMode`, and `isTableFormatter` from inputs; also receive `required`, `disabled`, and `allowMultiple` as mutable locals. Coerce each of `required`, `disabled`, and `allowMultiple` to a real boolean (true when the value is literally `true` or the string `'true'`), since these may arrive as string booleans.
+2. Call `getPConnect()` into `pConn`; store `actionSequencer = PCore.getActionsSequencer()` via a memoized computation (no dependencies); resolve `contextName = pConn.getContextName()`.
+3. **Normalize attachment data** (old vs. new format): call `PCore.getAttachmentUtils().prepareAttachmentData(value)` to get `{ attachments, isOldAttachment }`.
+4. **Set the reference list**: read `valueRef` from `(pConn.getStateProps() as any).value`, then call `pConn.setReferenceList('.' + valueRef)`.
+5. Declare local state: `files` (array, initialized from `attachments`) and `toggleUploadBegin` (boolean, default `false`).
+6. Define `deleteFile`: removes the file from local state, calls `deleteAttachments`, and deregisters it from the action sequencer.
+7. Define `onFileAdded`: validates the file's extension and size, adds it to `files`, and sets `toggleUploadBegin`.
+8. Define `uploadFiles`: registers a blocking action via the sequencer, uploads each file via `uploadAttachment`, and calls `insertAttachments` on success.
+9. In a lifecycle effect keyed on `toggleUploadBegin`, trigger `uploadFiles` when it changes.
+10. In another lifecycle effect, subscribe to the `ASSIGNMENT_SUBMISSION` event for state override (block submission while uploads are pending).
+11. **Render**: a container element with the field `label`, an upload button (hidden native file input plus a styled button), validation/helper text, and the file list — each row showing an icon, name, metadata, upload progress, and a delete button.
+
+> **Key patterns:** Action sequencer blocking (`registerBlockingAction`/`deRegisterBlockingAction`), `prepareAttachmentData` normalization, per-file progress tracking, `insertAttachments`/`deleteAttachments` helpers for state management.
 
 ## Behavioral Contract
 
@@ -97,25 +61,17 @@ export default function Attachment(props: AttachmentProps) {
 
 Pega has two attachment data formats — detect which one is in use:
 
-**Old format (annotation-based):**
-
-```typescript
-value = { pxResults: [...], pyAttachCount: N }
-```
-
-**New standard format:**
+**Old format (annotation-based):** `value` is an object shaped like `{ pxResults: [...], pyAttachCount: N }`.
 
-```typescript
-value = [{ ID, name, mimeType, category, ... }]  // array
-```
+**New standard format:** `value` is an array of attachment objects, each shaped like `{ ID, name, mimeType, category, ... }`.
 
 Call `PCore.getAttachmentUtils().prepareAttachmentData(value)` to normalize both formats into a unified `FileObject[]` array.
 
 ### File Validation
 
-On file selection (via `<input type='file'>`):
+On file selection (via a file-picker control):
 
-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.
+1. **Extension check:** Compare selected file's extension against the `extensions` input (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.
 
@@ -123,7 +79,7 @@ On file selection (via `<input type='file'>`):
 
 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.
+3. On progress: update per-file `progress` value (0–100) in local 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])`.
@@ -170,7 +126,7 @@ Compressed display for use inside a table cell. Show attachment count and a smal
 ## 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.
+- Upload progress: track per-file progress in a map of `fileId → number` in local state.
 - `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.
@@ -178,30 +134,28 @@ Compressed display for use inside a table cell. Show attachment count and a smal
 
 ## Dependencies
 
-- `AttachmentUtils.ts` — `validateExtension`, `validateSize`, `getFileTypeIcon`, `buildDownloadURL`, error handling helpers
-- `Attachment.types.ts` — `FileObject`, `AttachmentLinks`, `PageInstructionOptions` type definitions
+- The project's attachment utility module — `validateExtension`, `validateSize`, `getFileTypeIcon`, `buildDownloadURL`, error handling helpers
+- The project's attachment type definitions — `FileObject`, `AttachmentLinks`, `PageInstructionOptions`
 - `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
+- A file-download utility — 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.
+When implementing in a specific design system, map the following:
 
-| 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          |
+- **File input / drop zone:** A clickable upload area (optionally supporting drag-and-drop) backed by a hidden native file input. The design system's file-picker or upload component can replace the custom drop zone, but the hidden native input pattern works universally.
+- **Progress indicator:** A linear progress bar (determinate, 0–100) shown per-file during upload. Use the design system's linear progress component or a CSS-based bar.
+- **File list:** A vertical list of uploaded file rows. Each row contains: a file-type icon, the file name, file size metadata, the progress indicator (during upload), and a delete action button. Use the design system's list component or simple styled rows.
+- **Error text:** Validation or upload error messages displayed below the control in an error color.
+- **Helper text:** Secondary descriptive text below the control.
 
-When implementing in a specific design system:
+Implementation notes:
 
 - 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`

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

@@ -2,119 +2,61 @@
 
 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.
+> **Prerequisite skill:** [`widget-components.md`](../widget-components.md) — covers architecture, the base component 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.
+Renders a table of case events sourced from the `D_pyWorkHistory` data page. Shows when each event happened (`pxTimeCreated`), what happened (`pyMessageKey`), and who performed it (`pyPerformer`). Uses a deep-equality utility to skip unnecessary re-renders when data has not changed.
 
 ## Pega Metadata
 
-- **Registration key:** `CaseHistory` (in `component-map.ts`)
+- **Registration key:** `CaseHistory` (in the project's component map)
 - **Category:** Widget — case data display
-- **Extends:** `PConnProps`
+- **Extends:** the project's base component interface
 
-## Props
+## Inputs
 
-| Prop          | Type       | Required | Description                                           |
+| Input         | Type       | Required | Description                                           |
 | ------------- | ---------- | -------- | ----------------------------------------------------- |
 | `getPConnect` | `function` | Yes      | PConnect getter — used to resolve case ID and context |
 
-## Component Skeleton
-
-```typescript
-import { useEffect, useRef, useState } from 'react';
-import isDeepEqual from 'fast-deep-equal/react';
-import { Utils } from '../../helpers/utils';
-import type { PConnProps } from '@pega/sdk-react';
-
-interface CaseHistoryProps extends PConnProps {}
-
-export default function CaseHistory(props: CaseHistoryProps) {
-  const { getPConnect } = props;
-  const thePConn = getPConnect();
-  const rowData = useRef([]);
-  const [waitingForData, setWaitingForData] = useState(true);
-
-  const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, '');
-  const context = thePConn.getContextName();
-
-  const displayedColumns = [
-    { label: thePConn.getLocalizedValue('Date', '', ''), type: 'DateTime', fieldName: 'pxTimeCreated' },
-    { label: thePConn.getLocalizedValue('Description', '', ''), type: 'TextInput', fieldName: 'pyMessageKey' },
-    { label: thePConn.getLocalizedValue('Performed by', '', ''), type: 'TextInput', fieldName: 'pyPerformer' },
-  ];
-
-  // 1. Fetch D_pyWorkHistory on mount
-  useEffect(() => {
-    let active = true;
-    PCore.getDataApiUtils().getData('D_pyWorkHistory',
-      { dataViewParameters: [{ CaseInstanceKey: caseID }] }, context
-    ).then((historyJSON: any) => {
-      if (active) {
-        computeRowData(historyJSON.data.data);
-        setWaitingForData(false);
-      }
-    });
-    return () => { active = false; };
-  }, []);
-
-  // 2. computeRowData — format dates, use isDeepEqual to prevent unnecessary updates
-  function computeRowData(rows) {
-    const theRowData = rows.map(row => displayedColumns.map(col =>
-      col.type === 'DateTime' ? Utils.generateDateTime(row[col.fieldName], 'DateTime-Short') : row[col.fieldName]
-    ));
-    if (!isDeepEqual(theRowData, rowData.current)) rowData.current = theRowData;
-  }
-
-  // 3. Render: Table with 3 columns, '---' for missing values
-  return (
-    <TableContainer>
-      <Table>
-        <TableHead><TableRow>{displayedColumns.map(col => <TableCell key={col.fieldName}>{col.label}</TableCell>)}</TableRow></TableHead>
-        <TableBody>
-          {rowData.current.map((row, i) => (
-            <TableRow key={i}>{row.map((cell, j) => <TableCell key={j}>{cell || '---'}</TableCell>)}</TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
-}
-```
-
-No additional custom props. All data is fetched internally.
+## Implementation Structure
+
+**Module Setup:** Requires local state, an instance reference, and a lifecycle effect. Also needs a deep-equality utility and the project's SDK utility helpers for date formatting. The component interface extends the project's base component interface (no additional custom inputs).
+
+**Main Component Logic** — steps in order:
+
+1. Receive `getPConnect` from inputs; call it once into `thePConn`. Declare a `rowData` instance reference (initialized to an empty array) and a `waitingForData` local state boolean (default `true`).
+2. Resolve `caseID` via `thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, '')` and `context` via `thePConn.getContextName()`.
+3. Build a `displayedColumns` array of three column descriptors, each with a localized `label` (via `thePConn.getLocalizedValue`), a `type`, and a `fieldName`: Date (`'DateTime'`, `pxTimeCreated`), Description (`'TextInput'`, `pyMessageKey`), and Performed by (`'TextInput'`, `pyPerformer`).
+4. **Fetch `D_pyWorkHistory` on mount** — in a lifecycle effect that runs once on initialization, using a guard flag to prevent post-teardown state updates: call `PCore.getDataApiUtils().getData('D_pyWorkHistory', { dataViewParameters: [{ CaseInstanceKey: caseID }] }, context)`; on resolution, when still active, call `computeRowData` with `historyJSON.data.data` and set `waitingForData` to `false`. In the teardown callback, set the guard flag to `false` so the state setter is never called after the component is destroyed.
+5. Define `computeRowData(rows)`: map each row to an array of cell values, one per `displayedColumns` entry — formatting `DateTime`-type columns through the SDK utility helper `generateDateTime(row[col.fieldName], 'DateTime-Short')` and passing other column values through as-is. Compare the resulting `theRowData` against the current `rowData` instance reference using the deep-equality utility, and only update the instance reference when the data has actually changed (this avoids unnecessary re-renders).
+6. **Render** a table with three columns and `'---'` as the placeholder for missing or falsy cell values. The header row renders one cell per `displayedColumns` entry (using its `label`). The body renders one row per entry in the `rowData` instance reference, with one cell per value (falling back to `'---'` when the value is falsy).
+
+No additional custom inputs. 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
-)
-```
+On mount, fetch history from the `D_pyWorkHistory` data page by calling `PCore.getDataApiUtils().getData('D_pyWorkHistory', { dataViewParameters: [{ CaseInstanceKey: caseID }] }, 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 `[]`.
+- `caseID` = `thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, '')`.
+- `context` = `thePConn.getContextName()`.
+- Store result in a `rowData` instance reference.
+- On error or empty response, `rowData` 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.
+Use a deep-equality utility to compare new row data with the previous value — only update the stored data if it 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.
+- **Date column:** Format `pxTimeCreated` using the SDK date formatting utility (e.g., `generateDateTime(row.pxTimeCreated, 'DateTime-Short')`).
 - **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.
@@ -123,51 +65,26 @@ For each history row, map:
 
 ### Table Layout
 
-| Column      | Field                           | Width |
-| ----------- | ------------------------------- | ----- |
-| Date        | `pyUpdatedDateTime` (formatted) | ~25%  |
-| Description | `pyMessageKey`                  | ~50%  |
-| Performer   | `pyPerformer`                   | ~25%  |
-
-**CSS-only implementation notes:**
+| Column       | Field                       | Width |
+| ------------ | --------------------------- | ----- |
+| Date         | `pxTimeCreated` (formatted) | ~25%  |
+| Description  | `pyMessageKey`              | ~50%  |
+| Performed by | `pyPerformer`               | ~25%  |
 
-- 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.
+The table header cells should have a distinct background color, bold text, and 1px solid borders. Body cells should have 1px solid borders in a silver/neutral tone. Missing-value placeholders (`"---"`) should be visually subdued. Use the design system's table component for consistent styling. No pagination in the reference implementation — all rows are 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.
+- `pxTimeCreated` format varies — always run it through the SDK date formatting utility 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.
+- The lifecycle effect teardown callback sets a guard flag to prevent calling state setters after component destruction, avoiding framework warnings about unmounted state updates.
 
 ## Dependencies
 
 - `PCore.getDataApiUtils().getData()` — fetches `D_pyWorkHistory` data page
-- `fast-deep-equal/react` — prevents unnecessary re-renders
+- A deep-equality utility — prevents unnecessary re-renders by comparing row data before updating
 - `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
+- The project's SDK utility helpers — for date formatting (`generateDateTime`)
+- The design system's table component (container, header, body, row, and cell elements)