@pega/sdk 0.0.3 → 0.0.5

package/templates/react-sdk-reference/{.cursor/rules/skills/widget-skills/SummaryItem.mdrules → .ai-common/skills/widget-skills/SummaryItem.md}

@@ -1,8 +1,3 @@
----
-description: Widget component skill: SummaryItem
-alwaysApply: false
----
-
 # Skill: SummaryItem
 
 Individual item card for displaying an attachment, file, or link with an icon, name, metadata, and an actions menu. Also covers `SummaryList` — the container that renders multiple `SummaryItem` cards.
@@ -27,16 +22,82 @@ Individual item card for displaying an attachment, file, or link with an icon, n
 
 ---
 
+## Component Skeletons
+
+### SummaryItem
+
+```typescript
+import { useState } from 'react';
+import { Utils } from '../../helpers/utils';
+import type { PConnProps } from '@pega/sdk-react';
+import './SummaryItem.css';
+
+interface SummaryItemProps extends PConnProps {
+  menuIconOverride$: string;
+  menuIconOverrideAction$: any;
+  arItems$: any;
+}
+
+export default function SummaryItem(props: SummaryItemProps) {
+  let { menuIconOverride$ } = props;
+  const item = props.arItems$;
+  const imagePath = Utils.getIconPath(Utils.getSDKStaticConentUrl());
+  const srcImg = `${imagePath}${item.visual.icon}.svg`;
+  const [anchorEl, setAnchorEl] = useState(null);
+  if (menuIconOverride$) menuIconOverride$ = Utils.getImageSrc(menuIconOverride$, Utils.getSDKStaticConentUrl());
+
+  return (
+    <div className="psdk-utility-card">
+      <div className="psdk-utility-card-icon"><img src={srcImg} /></div>
+      <div className="psdk-utility-card-main">
+        {item.primary.type !== 'URL'
+          ? <div className="primary-label">{item.primary.name}</div>
+          : <button className="link-button">{item.primary.name}</button>}
+        {item.secondary.text && <div style={{ color: item.secondary.error ? 'red' : undefined }}>{item.secondary.text}</div>}
+      </div>
+      <div className="psdk-utility-action">
+        {menuIconOverride$
+          ? <button onClick={() => props.menuIconOverrideAction$(item)}><img src={menuIconOverride$} /></button>
+          : <IconButton onClick={e => setAnchorEl(e.currentTarget)}><MoreVertIcon /></IconButton>}
+        {!menuIconOverride$ && <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)}>
+          {item.actions?.map(opt => <MenuItem key={opt.id} onClick={opt.onClick}>{opt.text}</MenuItem>)}
+        </Menu>}
+      </div>
+    </div>
+  );
+}
+```
+
+### SummaryList
+
+```typescript
+import { getComponentFromRegistry } from '@pega/sdk-react';
+
+export default function SummaryList(props) {
+  const SummaryItem = getComponentFromRegistry('SummaryItem');
+  const { arItems$, menuIconOverride$ = '', menuIconOverrideAction$ } = props;
+  return (
+    <div>
+      {arItems$.map(file => (
+        <SummaryItem key={file.id} arItems$={file}
+          menuIconOverride$={menuIconOverride$}
+          menuIconOverrideAction$={menuIconOverrideAction$} />
+      ))}
+    </div>
+  );
+}
+```
+
 ## SummaryItem
 
 ### Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `arItems$` | `object` | Yes | A single item object (see Item Structure below) |
-| `menuIconOverride$` | `string` | No | If provided, replaces the standard actions menu with a single direct-action icon button |
-| `menuIconOverrideAction$` | `function` | No | Callback invoked when the override icon button is clicked |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                      | Type       | Required | Description                                                                             |
+| ------------------------- | ---------- | -------- | --------------------------------------------------------------------------------------- |
+| `arItems$`                | `object`   | Yes      | A single item object (see Item Structure below)                                         |
+| `menuIconOverride$`       | `string`   | No       | If provided, replaces the standard actions menu with a single direct-action icon button |
+| `menuIconOverrideAction$` | `function` | No       | Callback invoked when the override icon button is clicked                               |
+| `getPConnect`             | `function` | Yes      | PConnect getter                                                                         |
 
 ### Item Structure (`arItems$`)
 
@@ -87,14 +148,15 @@ Individual item card for displaying an attachment, file, or link with an icon, n
                                     [Actions button (⋮ or override)]
 ```
 
-| Element | Description |
-|---------|-------------|
-| File icon | Left side, fixed size (~36px square) |
-| Name | Bold, truncated with ellipsis if too long |
-| Metadata | Smaller, secondary-color text |
+| Element        | Description                                   |
+| -------------- | --------------------------------------------- |
+| File icon      | Left side, fixed size (~36px square)          |
+| Name           | Bold, truncated with ellipsis if too long     |
+| Metadata       | Smaller, secondary-color text                 |
 | Actions button | Right side, `<MoreVertIcon>` or override icon |
 
 **CSS-only implementation notes:**
+
 - Row: `display: flex; align-items: center; gap: 0.75rem; padding: 8px 0`.
 - File icon: `width: 36px; height: 36px; flex-shrink: 0`.
 - Content area: `flex: 1; min-width: 0` (prevents text overflow).
@@ -117,12 +179,12 @@ Individual item card for displaying an attachment, file, or link with an icon, n
 
 ### Props
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `arItems$` | `any[]` | Yes | Array of item objects (same shape as `SummaryItem`'s `arItems$`) |
-| `menuIconOverride$` | `string` | No | Passed to every `SummaryItem` |
-| `menuIconOverrideAction$` | `any` | No | Passed to every `SummaryItem` |
-| `getPConnect` | `function` | Yes | PConnect getter |
+| Prop                      | Type       | Required | Description                                                      |
+| ------------------------- | ---------- | -------- | ---------------------------------------------------------------- |
+| `arItems$`                | `any[]`    | Yes      | Array of item objects (same shape as `SummaryItem`'s `arItems$`) |
+| `menuIconOverride$`       | `string`   | No       | Passed to every `SummaryItem`                                    |
+| `menuIconOverrideAction$` | `any`      | No       | Passed to every `SummaryItem`                                    |
+| `getPConnect`             | `function` | Yes      | PConnect getter                                                  |
 
 ### Behavioral Contract
 
@@ -157,15 +219,16 @@ No state, no data fetching — purely a mapping wrapper.
 
 Listed design systems are examples only.
 
-| Design System | Row Layout | Action Menu |
-|---|---|---|
-| Default (CSS only) | `<div>` flexbox row | `<button>` + custom dropdown |
-| MUI | `<ListItem>` or `<Box display='flex'>` | `<IconButton>` + `<Menu>/<MenuItem>` |
-| Ant Design | `<List.Item>` | `<Dropdown menu={{ items }}>` |
-| Chakra UI | `<HStack>` | `<Menu>/<MenuButton>/<MenuList>` |
-| Shadcn/ui | `<div>` flexbox | `<DropdownMenu>` |
+| Design System      | Row Layout                             | Action Menu                          |
+| ------------------ | -------------------------------------- | ------------------------------------ |
+| Default (CSS only) | `<div>` flexbox row                    | `<button>` + custom dropdown         |
+| MUI                | `<ListItem>` or `<Box display='flex'>` | `<IconButton>` + `<Menu>/<MenuItem>` |
+| Ant Design         | `<List.Item>`                          | `<Dropdown menu={{ items }}>`        |
+| Chakra UI          | `<HStack>`                             | `<Menu>/<MenuButton>/<MenuList>`     |
+| Shadcn/ui          | `<div>` flexbox                        | `<DropdownMenu>`                     |
 
 When implementing in a specific design system:
+
 - `menuIconOverride$` completely replaces the standard `⋮` menu — check for it before rendering the actions area
 - `type === 'URL'` must render the name as a clickable link (not plain text)
 - `secondary.error` is a boolean — apply error styling to the `secondary.text` when `true`

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

@@ -0,0 +1,492 @@
+# Skill: ToDo
+
+Assignment worklist widget. Displays the current user's pending assignments with expand/collapse, click-to-open, priority indicators, badge counts, responsive layout, and snackbar error notifications.
+
+> **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 compact to-do / worklist panel showing the user's pending assignments. Shows the top 3 items by default with a "Show more" / "Show less" toggle. Supports two modes: `worklist` (personal workbasket) and `todo` (case-level assignments). Clicking an item opens the assignment. A badge in the card header shows the total count.
+
+## Pega Metadata
+
+- **Registration key:** `Todo` (note: lowercase `o` in the key; file is `ToDo.tsx`)
+- **Category:** Widget — assignment / action
+- **Extends:** `PConnProps`
+
+## Props
+
+| Prop           | Type       | Required | Description                                                                                        |
+| -------------- | ---------- | -------- | -------------------------------------------------------------------------------------------------- |
+| `datasource`   | `any`      | No       | Array of assignments passed directly (used in `todo` type). If provided, skips the data page fetch |
+| `myWorkList`   | `any`      | No       | Work list config object `{ datapage: string, fields: [...] }` — for `worklist` type                |
+| `caseInfoID`   | `string`   | No       | Case ID to filter assignments (used in `todo` type)                                                |
+| `headerText`   | `string`   | No       | Widget title. Default: `"To do"`                                                                   |
+| `itemKey`      | `string`   | No       | Field key (reserved, currently unused)                                                             |
+| `showTodoList` | `boolean`  | No       | Whether to show the assignment list. Default `true`                                                |
+| `type`         | `string`   | No       | `'worklist'` (personal work) or `'todo'` (case-level). Default `'worklist'`                        |
+| `context`      | `string`   | No       | Context name for API calls. Falls back to `pConn.getContextName()`                                 |
+| `isConfirm`    | `boolean`  | No       | Confirmation mode — adjusts rendering for post-submit confirmation view                            |
+| `getPConnect`  | `function` | Yes      | PConnect getter                                                                                    |
+
+## Component Skeleton
+
+```typescript
+import { useCallback, useEffect, useState } from 'react';
+import { Utils } from '../../helpers/utils';
+import type { PConnProps } from '@pega/sdk-react';
+import './ToDo.css';
+
+interface ToDoProps extends PConnProps {
+  datasource?: any; myWorkList?: any; caseInfoID?: string;
+  headerText?: string; showTodoList?: boolean; type?: string;
+  context?: string; isConfirm?: boolean;
+}
+
+export default function ToDo(props: ToDoProps) {
+  const {
+    getPConnect, context, datasource = [], headerText = 'To do',
+    showTodoList = true, myWorkList = {}, type = 'worklist', isConfirm = false,
+  } = props;
+  const CONSTS = PCore.getConstants();
+  const thePConn = getPConnect();
+  const currentUser = PCore.getEnvironmentInfo().getOperatorName() ?? '';
+  const currentUserInitials = Utils.getInitials(currentUser);
+
+  // 1. Data: derive assignments from props OR fetch
+  const assignmentsSource = Array.isArray(datasource) ? datasource : Array.isArray(datasource?.source) ? datasource.source : Array.isArray(myWorkList?.source) ? myWorkList.source : null;
+  const [fetchedAssignments, setFetchedAssignments] = useState([]);
+
+  // 2. Only fetch for WORKLIST type — TODO type gets data from props directly
+  useEffect(() => {
+    if (type === CONSTS.WORKLIST && myWorkList?.datapage && !assignmentsSource?.length) {
+      PCore.getDataPageUtils().getDataAsync(myWorkList.datapage, context || pConn.getContextName(), ...)
+        .then(response => setFetchedAssignments(response?.data || []));
+    }
+  }, [type, myWorkList?.datapage, context]);
+
+  // Use prop data if available, otherwise use fetched data
+  const assignments = assignmentsSource?.length ? assignmentsSource : fetchedAssignments;
+
+  // 3. clickGo — openAssignment with container options
+  //    IMPORTANT: assignment ID field differs by type!
+  const CONSTS = PCore.getConstants();
+  const getAssignmentId = (assignment) => type === CONSTS.TODO ? assignment.ID : assignment.id;
+
+  function clickGo(assignment) {
+    const id = getAssignmentId(assignment);
+    let classname = assignment.classname || '';
+    if (!classname) classname = thePConn.getCaseInfo().getClassName();
+    const sTarget = thePConn.getContainerName() || '';
+    const options: any = { containerName: sTarget || CONSTS.APP.APP, channelName: '' };
+    if (sTarget === 'workarea') { options.isActionFromToDoList = true; options.target = ''; options.context = null; options.isChild = assignment.isChild; }
+    else { options.isActionFromToDoList = false; options.target = sTarget; }
+    thePConn.getActionsApi().openAssignment(id, classname, options)
+      .catch(() => { setSnackbarMessage('Submit failed!'); setShowSnackbar(true); });
+  }
+
+  // 4. Show more/less toggle
+  function _showMore() { setBShowMore(false); /* fetch all or setAssignments(full list) */ }
+  function _showLess() { setBShowMore(true); setAssignments(a => a.slice(0, 3)); }
+
+  // 5. Render: WORKLIST and TODO have DIFFERENT render structures
+  //    See the two render paths below — they MUST be separate.
+}
+```
+
+> ⚠️ **CRITICAL — WORKLIST AND TODO RENDER DIFFERENTLY**
+>
+> The component MUST have **two separate render paths** based on `type`:
+>
+> **WORKLIST mode** (homepage — `type === CONSTS.WORKLIST`):
+>
+> - Header: avatar circle (initials) + title + count badge **immediately next to title** (no flex spacer)
+> - Show only first 3 items by default (`bShowMore ? assignments.slice(0, 3) : assignments`)
+> - Each row: name (bold) + subtitle "In {caseName} {caseId} • {status} • Urgency {priority}" + Chevron icon
+> - "Show more" fetches all from data page; "Show less" slices back to 3
+>
+> **TODO mode** (case view — `type === CONSTS.TODO`):
+>
+> - Header: title + count badge (NO avatar in header)
+> - Each row: avatar circle + name (bold) + "In {caseId} • Urgency {priority}" + Chevron icon
+> - `isConfirm` mode: render without card wrapper, hide chevron when `canPerform === false`
+>
+> ❌ **NEVER** use a single render path for both modes.
+> ❌ **NEVER** use `flex: 1` on the title — it pushes the badge to the far right.
+
+> ⚠️ **CRITICAL — USE THE PROJECT'S DESIGN SYSTEM**
+>
+> Check `package.json` for the installed design system and use its components:
+>
+> | If installed DS is... | Card/Tile                | Badge/Count                 | Chevron Icon                              | Button                   |
+> | --------------------- | ------------------------ | --------------------------- | ----------------------------------------- | ------------------------ |
+> | `@carbon/react`       | `Tile`                   | `Tag type='blue' size='sm'` | `ChevronRight` from `@carbon/react/icons` | `Button kind='ghost'`    |
+> | `@mui/material`       | `Card` + `CardHeader`    | `Badge`                     | `ArrowForwardIosOutlinedIcon`             | `Button`                 |
+> | `antd`                | `Card`                   | `Badge count={N}`           | `RightOutlined`                           | `Button type='link'`     |
+> | `@chakra-ui/react`    | `Card`                   | `Badge`                     | `ChevronRightIcon`                        | `Button variant='ghost'` |
+> | None / CSS-only       | `<div>` with card styles | `<span>` with badge CSS     | `›` character                             | `<button>`               |
+>
+> ❌ **NEVER** use plain `<button>` with inline styles for assignment rows.
+> ❌ **NEVER** use text `›` when a DS chevron icon is available.
+
+### WORKLIST Render Path (complete JSX)
+
+```tsx
+// ─── WORKLIST MODE (homepage) ───
+if (type === CONSTS.WORKLIST) {
+  return (
+    <Card className="psdk-todo">
+      {showTodoList && (
+        <div className="psdk-todo-header">
+          <Avatar>{currentUserInitials}</Avatar>
+          <h4 className="psdk-todo-title">{headerText}</h4>
+          <Badge>{getCount()}</Badge> {/* Badge IMMEDIATELY next to title */}
+        </div>
+      )}
+      <List>
+        {(bShowMore ? assignments.slice(0, 3) : assignments).map((assignment) => (
+          <ListItem
+            key={getAssignmentId(assignment)}
+            onClick={() => clickGo(assignment)}
+            disabled={assignment.canPerform === false}
+          >
+            <div>
+              <strong>{getAssignmentName(assignment)}</strong>
+              <span>
+                In {assignment.name} {getDisplayId(assignment)} • {assignment.status} • Urgency{' '}
+                {getPriority(assignment)}
+              </span>
+            </div>
+            <ChevronRightIcon />
+          </ListItem>
+        ))}
+      </List>
+      {getCount() > 3 &&
+        (bShowMore ? (
+          <Button onClick={handleShowMore}>Show more</Button>
+        ) : (
+          <Button onClick={handleShowLess}>Show less</Button>
+        ))}
+    </Card>
+  );
+}
+```
+
+### TODO Render Path (complete JSX)
+
+```tsx
+// ─── TODO MODE (case view) ───
+const todoContent = (
+  <>
+    {showTodoList && (
+      <div className="psdk-todo-header">
+        <h4 className="psdk-todo-title">{headerText}</h4>
+        <Badge>{assignments.length}</Badge>
+      </div>
+    )}
+    <List>
+      {assignments.map((assignment) => (
+        <ListItem
+          key={getAssignmentId(assignment)}
+          onClick={() => clickGo(assignment)}
+          disabled={assignment.canPerform === false}
+        >
+          <Avatar>{currentUserInitials}</Avatar>
+          <div>
+            <strong>{getAssignmentName(assignment)}</strong>
+            <span>
+              In {getDisplayId(assignment)} • Urgency {getPriority(assignment)}
+            </span>
+          </div>
+          {(!isConfirm || canPerform) && <ChevronRightIcon />}
+        </ListItem>
+      ))}
+      {assignments.length === 0 && showTodoList && <p>You're all caught up!</p>}
+    </List>
+  </>
+);
+if (isConfirm) return <div>{todoContent}</div>;
+return <Card>{todoContent}</Card>;
+```
+
+### Required CSS (create `ToDo.css`)
+
+```css
+.psdk-todo {
+  padding: 1rem;
+}
+.psdk-todo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+.psdk-todo-title {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 500;
+}
+/* Do NOT use flex: 1 on title — badge must sit immediately next to text */
+.psdk-todo-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: #c6c6c6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+.psdk-todo-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid #e0e0e0;
+  cursor: pointer;
+}
+.psdk-todo-row:hover {
+  background: #f4f4f4;
+}
+.psdk-todo-row--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+```
+
+## Behavioral Contract
+
+### Data Source Resolution
+
+**`type === 'todo'` (case-level):**
+
+- Use `datasource` prop directly (array of assignment objects).
+- `caseInfoID` is used to scope the assignments.
+
+**`type === 'worklist'` (personal work):**
+
+- Fetch from `myWorkList.datapage` (e.g., `D_WorkList`) via:
+  ```
+  PCore.getDataPageUtils().getDataAsync(
+    myWorkList.datapage,
+    context,
+    {},
+    { pageNumber: 1, pageSize: 50 },
+    { select: myWorkList.fields },
+    { invalidateCache: true }
+  )
+  ```
+- Map the response to assignment objects.
+
+### Top 3 + Show More
+
+- `showCount` state: default `3`.
+- Render only `assignments.slice(0, showCount)`.
+- If `assignments.length > 3`:
+  - Show a `"Show more"` button → sets `showCount = assignments.length`.
+  - When expanded: show `"Show less"` button → sets `showCount = 3`.
+
+### Badge Count
+
+- Render a `<Badge badgeContent={assignments.length}>` on the card header or alongside the title.
+- Badge shows the total count of assignments, not the currently-visible count.
+
+### Open Assignment
+
+On item click:
+
+> ⚠️ **CRITICAL — Assignment ID field differs by type:**
+>
+> - `type === CONSTS.TODO` → use `assignment.ID` (uppercase)
+> - `type === 'worklist'` → use `assignment.id` (lowercase)
+>
+> Using the wrong casing will pass `undefined` and produce "assignmentID is required parameter" error.
+
+```typescript
+const CONSTS = PCore.getConstants();
+const getAssignmentId = (assignment) => (type === CONSTS.TODO ? assignment.ID : assignment.id);
+
+function clickGo(assignment) {
+  const id = getAssignmentId(assignment);
+  let classname = assignment.classname || '';
+  if (!classname) classname = pConn.getCaseInfo().getClassName(); // fallback
+  const sTarget = pConn.getContainerName() || '';
+  const options: any = { containerName: sTarget || PCore.getConstants().APP.APP, channelName: '' };
+  if (sTarget === 'workarea') {
+    options.isActionFromToDoList = true;
+    options.target = '';
+    options.context = null;
+    options.isChild = assignment.isChild;
+  } else {
+    options.isActionFromToDoList = false;
+    options.target = sTarget;
+  }
+  pConn.getActionsApi().openAssignment(id, classname, options);
+}
+```
+
+### Assignment Item Rendering
+
+> ⚠️ **Worklist vs TODO have DIFFERENT field names and display formats.**
+
+#### Helper functions (MUST include):
+
+```typescript
+const CONSTS = PCore.getConstants();
+const getAssignmentId = (assignment) => (type === CONSTS.TODO ? assignment.ID : assignment.id);
+const getDisplayId = (assignment) => {
+  const refKey = assignment.value || assignment.ID || assignment.id || '';
+  if (assignment.value) return refKey.substring(refKey.lastIndexOf(' ') + 1);
+  const parts = refKey.split('!')[0]?.split(' ');
+  return parts?.[2] || parts?.[parts.length - 1] || refKey;
+};
+const getPriority = (assignment) => (type === CONSTS.TODO ? assignment.urgency : assignment.priority);
+```
+
+#### Data source:
+
+- **TODO type** (`type === CONSTS.TODO`): data from `datasource.source` prop (synchronous, do NOT fetch)
+- **WORKLIST type** (`type === CONSTS.WORKLIST`): data fetched from `myWorkList.datapage` via `getDataAsync`
+
+Use prop data directly when available (`assignmentsSource`), only fetch for WORKLIST when no prop data exists.
+
+#### Field names by type:
+
+| Field            | WORKLIST (`assignment.xxx`)            | TODO (`assignment.xxx`)                |
+| ---------------- | -------------------------------------- | -------------------------------------- |
+| Assignment ID    | `id` (lowercase)                       | `ID` (uppercase)                       |
+| Step/task name   | `stepName` or `name`                   | `name` or `stepName`                   |
+| Case type label  | `name`                                 | —                                      |
+| Case ID          | extract from `id` via `getDisplayId()` | extract from `ID` via `getDisplayId()` |
+| Status           | `status`                               | —                                      |
+| Priority/Urgency | `priority`                             | `urgency`                              |
+| Class name       | `classname`                            | `classname`                            |
+
+#### Display format per item:
+
+- **WORKLIST:** `"In {assignment.name} {getDisplayId(assignment)} • {assignment.status} • Urgency {getPriority(assignment)}"`
+- **TODO:** `"In {getDisplayId(assignment)} • Urgency {getPriority(assignment)}"`
+
+#### Each item renders:
+
+- **Avatar:** Circle with operator initials
+- **Name (bold):** `assignment.stepName || assignment.name` (the task/step name)
+- **Subtitle:** The format string above (WORKLIST or TODO format)
+- **Chevron:** Right-pointing arrow `›` indicating clickable
+
+#### `showTodoList` behavior:
+
+- Items should ALWAYS render when `assignments.length > 0` — do NOT gate by `showTodoList`
+- Only show "You're all caught up" empty state when `showTodoList === true && assignments.length === 0`
+
+### Responsive Layout
+
+Use `useMediaQuery(theme.breakpoints.down('sm'))` (MUI) to detect mobile:
+
+- **Desktop:** Show avatar, name, status, priority, and arrow in a horizontal row.
+- **Mobile:** Stack or truncate elements for narrow display.
+
+### `canPerform` Permission Check
+
+If an assignment has `canPerform === false`, render it as non-clickable (greyed out, no onClick handler).
+
+### Snackbar Error
+
+- On `openAssignment` failure, catch the error and show a `<Snackbar>` with the error message.
+- Auto-hide after 3000ms.
+- `<IconButton>` (`<CloseIcon>`) to manually dismiss.
+
+### Operator Avatar Initials
+
+Extract initials from `PCore.getEnvironmentInfo().getOperatorName()`:
+
+```typescript
+const initials = operatorName
+  .split(' ')
+  .map((w) => w[0])
+  .join('')
+  .substring(0, 2)
+  .toUpperCase();
+```
+
+## Visual Specifications
+
+### Card Layout
+
+| Element               | Description                                         |
+| --------------------- | --------------------------------------------------- |
+| Card header           | `headerText` (default `"To do"`) + badge with count |
+| Assignment rows       | Up to `showCount` items                             |
+| Show more/less button | Below the last visible item                         |
+
+### Assignment Row
+
+| Element            | Desktop   | Mobile          |
+| ------------------ | --------- | --------------- |
+| Avatar circle      | Shown     | Shown           |
+| Task name          | Full text | Truncated       |
+| Status badge       | Shown     | Hidden or small |
+| Priority indicator | Shown     | Simplified      |
+| Arrow icon         | Shown     | Shown           |
+
+**CSS-only implementation notes:**
+
+- Card: standard card layout.
+- Assignment row: `display: flex; align-items: center; gap: 0.75rem; padding: 10px 0; cursor: pointer; border-bottom: 1px solid var(--divider-color)`.
+- Avatar: `width: 36px; height: 36px; border-radius: 50%; background: var(--avatar-bg); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 600`.
+- Status badge: `padding: 2px 6px; border-radius: 10px; font-size: 0.75rem; background: var(--status-bg-color)`.
+- Priority: `font-size: 0.75rem; color: var(--secondary-text-color)`.
+- Arrow: `margin-left: auto; color: var(--secondary-text-color)`.
+- Non-clickable (canPerform=false): `opacity: 0.5; cursor: not-allowed`.
+- Show more button: `width: 100%; text-align: center; padding: 8px; color: var(--app-primary-color)`.
+
+## Edge Cases & Special Logic
+
+- `type` defaults to `'worklist'` — handle the fallback gracefully if `type` is undefined.
+- `datasource` prop vs fetch: if `datasource` is provided (non-empty), skip the data page fetch entirely.
+- `myWorkList` may be undefined for `todo` type — do not attempt a fetch if it's missing.
+- `showTodoList === false` — render only the card header (with badge count) and hide the list body.
+- `isConfirm === true` — used in the Confirmation template context; may adjust layout to hide certain elements (e.g., hide status badge, show simpler view).
+- Empty assignments — show a `"No tasks"` or `"You're all caught up!"` empty state message.
+- `canPerform` check: if `false`, disable click and show cursor `not-allowed`. Do not open the assignment.
+- Container name fallback: `pConn.getContainerName() || PCore.getConstants().APP.APP` — always provide a container name to `openAssignment`.
+
+## Dependencies
+
+- `PCore.getDataPageUtils().getDataAsync()` — worklist data page fetch
+- `PCore.getEnvironmentInfo()` — operator name for avatar initials
+- `PCore.getConstants()` — CASE_INFO, WORK_BASKET, TODO, APP constants
+- `PCore.getLocaleUtils()` — assignment label localization
+- `pConn.getActionsApi().openAssignment()` — opens the selected assignment
+- MUI: `<Card>`, `<CardContent>`, `<CardHeader>`, `<Avatar>`, `<Typography>`, `<Badge>`, `<List>`, `<ListItem>`, `<ListItemText>`, `<Button>`, `<Snackbar>`, `<IconButton>`, `useMediaQuery`, `useTheme`
+- MUI Icons: `<CloseIcon>`, `<ArrowForwardIosOutlinedIcon>`
+
+## Design System Mapping
+
+**UI control type:** Assignment worklist widget with expand/collapse, click-to-open, badge count, and error toast.
+
+Listed design systems are examples only.
+
+| Design System      | Card                      | List                | Badge               | Snackbar                      |
+| ------------------ | ------------------------- | ------------------- | ------------------- | ----------------------------- |
+| Default (CSS only) | `<div>` card              | `<ul>/<li>`         | CSS counter badge   | Custom toast overlay          |
+| MUI                | `<Card>` + `<CardHeader>` | `<List>/<ListItem>` | `<Badge>`           | `<Snackbar>/<Alert>`          |
+| Ant Design         | `<Card>`                  | `<List>`            | `<Badge count={N}>` | `message.error()`             |
+| Chakra UI          | `<Card>`                  | `<VStack>`          | `<Badge>`           | `useToast()`                  |
+| Shadcn/ui          | `<Card>`                  | `<ul>/<li>`         | Custom badge        | `<Toaster>` + `toast.error()` |
+
+When implementing in a specific design system:
+
+- **ALWAYS check `package.json`** to identify the installed design system BEFORE writing render code
+- Import and use the DS's card/badge/icon/button components — do NOT fall back to plain HTML
+- **WORKLIST and TODO MUST have separate render paths** — they have different header layouts and subtitle formats
+- **Badge/count MUST sit immediately next to the title** — do NOT use `flex: 1` on the title or push badge to far right
+- Show top 3 items by default — `bShowMore ? assignments.slice(0, 3) : assignments` controls the slice
+- Use the DS's chevron/arrow icon (not text `›`) for the row action indicator
+- `canPerform === false` must make the row non-clickable — check this before calling `openAssignment`
+- `type === 'worklist'` fetches from a data page; `type === 'todo'` uses the `datasource` prop — both paths must be implemented
+- Operator initials for the avatar must be derived from `PCore.getEnvironmentInfo().getOperatorName()`

package/templates/react-sdk-reference/index.html

@@ -27,10 +27,7 @@
   </head>
   <body>
     <div id="outlet" style="width: 100%"></div>
-    <script
-      src="node_modules/@pega/constellationjs/dist/constellation-core-web.js"
-      type="text/javascript"
-    ></script>
+    <script src="node_modules/@pega/constellationjs/dist/constellation-core-web.js" type="text/javascript"></script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>