@pega/sdk 0.0.5 → 0.0.7

package/templates/react-sdk-reference/.ai-common/skills/template-skills/CaseViewActionsMenu.md

@@ -8,212 +8,87 @@ Case actions dropdown menu. Renders an "Actions" button that opens a menu of loc
 
 ## Component Purpose
 
-Renders a button that opens a dropdown menu containing all available case actions. Distinguishes between local actions (UI flow) and process actions (server-side), invoking the appropriate API for each. Shows a Snackbar toast on process action error.
+Renders a button that opens a dropdown menu containing all available case actions. Distinguishes between local actions (UI flow) and process actions (server-side), invoking the appropriate API for each. Shows a toast notification on process action error.
 
 ## Pega Metadata
 
-- **Registration key:** `CaseViewActionsMenu` (in `component-map.ts`)
+- **Registration key:** `CaseViewActionsMenu` (in the project's component map)
 - **Category:** Page template — action menu
-- **Extends:** `PConnProps`
+- **Extends:** the project's base component interface
 
-## Props
+## Inputs
 
-| Prop             | Type       | Required | Description                                    |
-| ---------------- | ---------- | -------- | ---------------------------------------------- |
-| `localActions`   | `array`    | No       | Array of `{ ID, name }` local action objects   |
-| `processActions` | `array`    | No       | Array of `{ ID, name }` process action objects |
-| `caseTypeID`     | `string`   | Yes      | Case type identifier for label localization    |
-| `caseTypeName`   | `string`   | Yes      | Case type display name for label localization  |
-| `getPConnect`    | `function` | Yes      | PConnect getter                                |
+| Name                 | Type       | Required | Description                                    |
+| -------------------- | ---------- | -------- | ---------------------------------------------- |
+| `availableActions`   | `array`    | No       | Array of `{ ID, name }` local action objects   |
+| `availableProcesses` | `array`    | No       | Array of `{ ID, name }` process action objects |
+| `caseTypeID`         | `string`   | Yes      | Case type identifier for label localization    |
+| `caseTypeName`       | `string`   | Yes      | Case type display name for label localization  |
+| `getPConnect`        | `function` | Yes      | PConnect getter                                |
 
-## Component Skeleton
+## Implementation Structure
 
 > ⚠️ **CRITICAL — USE THE PROJECT'S DESIGN SYSTEM for the trigger button and menu items.**
 >
-> Check `package.json` for the installed design system. Use its button component (ghost/text variant) for the "Actions…" trigger. Use its menu/dropdown if available, otherwise use a positioned `<ul>/<li>` list with CSS.
+> Check `package.json` for the installed design system. Use its button component (ghost/text variant) for the "Actions…" trigger. Use its menu/dropdown if available, otherwise use a positioned list with CSS.
 >
-> Examples of known design systems (check `package.json` for actual installed DS):
+> When implementing in a specific design system, map the following: the trigger button should use a text or ghost variant button from the installed library; the menu should use the library's dropdown/menu component if available; the toast notification should use the library's snackbar or toast primitive. When no design system is installed, use plain styled elements with a positioned list dropdown.
 >
-> | DS                 | Trigger Button                    | Menu Items                             |
-> | ------------------ | --------------------------------- | -------------------------------------- |
-> | `@carbon/react`    | `<Button kind="ghost" size="sm">` | `<ul>/<li>` with CSS or `OverflowMenu` |
-> | `@mui/material`    | `<Button variant="text">`         | `<Menu>` + `<MenuItem>`                |
-> | `antd`             | `<Button type="link">`            | `<Dropdown>` + `<Menu>`                |
-> | `@chakra-ui/react` | `<Button variant="ghost">`        | `<Menu>` + `<MenuItem>`                |
-> | None / CSS-only    | `<button>` with styled class      | `<ul>/<li>` with CSS                   |
+> ❌ **NEVER** use unstyled HTML elements when a design system is installed.
 >
-> ❌ **NEVER** use unstyled HTML `<button>` elements when a DS is installed.
->
-> The dropdown MUST include click-outside-to-close behavior via a `useRef` + `mousedown` listener.
-
-```typescript
-import { useState, useRef, useEffect } from 'react';
-import type { PConnProps } from '@pega/sdk-react';
-// Import your DS button here — e.g.:
-// import { Button } from '@carbon/react';
-// import { Button } from '@mui/material';
-import './CaseViewActionsMenu.css';
-
-interface CaseViewActionsMenuProps extends PConnProps {
-  availableActions?: any[];
-  availableProcesses?: any[];
-  caseTypeID?: string;
-  caseTypeName?: string;
-}
-
-export default function CaseViewActionsMenu(props: CaseViewActionsMenuProps) {
-  const { getPConnect, availableActions = [], availableProcesses = [], caseTypeID = '', caseTypeName = '' } = props;
-  const thePConn = getPConnect();
-  const [open, setOpen] = useState(false);
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  // Click-outside-to-close — MANDATORY
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
-        setOpen(false);
-      }
-    }
-    if (open) document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [open]);
-
-  // Local action click — openLocalAction with modal container
-  function handleActionClick(action: any) {
-    (thePConn.getActionsApi() as any).openLocalAction(action.ID, {
-      ...action, containerName: 'modal', type: 'express',
-    });
-    setOpen(false);
-  }
-
-  // Process action click — openProcessAction
-  function handleProcessClick(process: any) {
-    (thePConn.getActionsApi() as any).openProcessAction(process.ID, { ...process });
-    setOpen(false);
-  }
-
-  const hasItems = availableActions.length > 0 || availableProcesses.length > 0;
-  if (!hasItems) return null;
-
-  return (
-    <div className='psdk-actions-menu' ref={menuRef}>
-      {/* Use the installed DS button component (ghost/text variant) — NOT plain <button> */}
-      <DSButton
-        variant='ghost'
-        size='sm'
-        onClick={() => setOpen(!open)}
-        aria-haspopup='true'
-        aria-expanded={open}
-      >
-        Actions&hellip;
-      </DSButton>
-      {open && (
-        <ul className='psdk-actions-menu-dropdown' role='menu'>
-          {availableActions.map((action: any) => (
-            <li className='psdk-actions-menu-item' role='menuitem'
-              key={action.ID} onClick={() => handleActionClick(action)}
-              onKeyDown={(e) => { if (e.key === 'Enter') handleActionClick(action); }}
-              tabIndex={0}>{action.name}</li>
-          ))}
-          {availableActions.length > 0 && availableProcesses.length > 0 && (
-            <li className='psdk-actions-menu-divider' role='separator' />
-          )}
-          {availableProcesses.map((process: any) => (
-            <li className='psdk-actions-menu-item' role='menuitem'
-              key={process.ID} onClick={() => handleProcessClick(process)}
-              onKeyDown={(e) => { if (e.key === 'Enter') handleProcessClick(process); }}
-              tabIndex={0}>{process.name}</li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-}
-```
-
-### Required CSS file (`CaseViewActionsMenu.css`)
-
-The following CSS MUST be created alongside the component:
-
-```css
-.psdk-actions-menu {
-  position: relative;
-  display: inline-block;
-}
-/* No trigger button CSS needed — the DS button component handles its own styling */
-.psdk-actions-menu-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 1000;
-  min-width: 160px;
-  background: #fff;
-  border-radius: 4px;
-  box-shadow:
-    0 2px 8px rgba(0, 0, 0, 0.15),
-    0 1px 3px rgba(0, 0, 0, 0.1);
-  padding: 0.25rem 0;
-  margin: 0;
-  list-style: none;
-}
-.psdk-actions-menu-item {
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  color: #161616;
-  cursor: pointer;
-}
-.psdk-actions-menu-item:hover {
-  background-color: #e5e5e5;
-}
-.psdk-actions-menu-item:focus-visible {
-  outline: 2px solid #0f62fe;
-  outline-offset: -2px;
-}
-.psdk-actions-menu-divider {
-  border-top: 1px solid #e0e0e0;
-  margin: 0.25rem 0;
-}
-```
+> The dropdown MUST include click-outside-to-close behavior via an instance reference on the container plus a `mousedown` document listener.
+
+**Module Setup:** The component needs local state (for menu open/closed and toast visibility), an instance reference (for click-outside detection), a lifecycle effect (for registering/cleaning up the outside-click listener), the project's base component interface, the installed design system's button component, and companion styles.
+
+**Main Component Logic** — steps in order:
+
+1. Receive inputs: `getPConnect`, `availableActions` (default `[]`), `availableProcesses` (default `[]`), `caseTypeID` (default `''`), and `caseTypeName` (default `''`); call `getPConnect()` once into `thePConn`. Declare local state `open` (boolean, default `false`) and an instance reference for the menu container element.
+2. **Click-outside-to-close (mandatory):** in a lifecycle effect keyed on `open`, register a `mousedown` document listener while `open` is true that closes the menu when the click target falls outside the container reference; clean up the listener on unmount or when `open` changes.
+3. Define `handleActionClick(action)`: call `thePConn.getActionsApi().openLocalAction(action.ID, { ...action, containerName: 'modal', type: 'express' })`, then close the menu.
+4. Define `handleProcessClick(process)`: call `thePConn.getActionsApi().openProcessAction(process.ID, { ...process })` as a promise; on rejection show a toast with `"${process.name} Submit failed!"`; then close the menu.
+5. Compute `hasItems = availableActions.length > 0 || availableProcesses.length > 0`; render nothing when there are no items.
+6. Render a `psdk-actions-menu` container (attached to the instance reference) containing: the installed design system's button (ghost/text variant) labeled "Actions…", with `aria-haspopup="true"`, `aria-expanded` bound to `open`, and an `onClick` that toggles `open`; and, when `open` is true, a `psdk-actions-menu-dropdown` list (`role="menu"`) listing each `availableActions` entry as a `psdk-actions-menu-item` item (`role="menuitem"`, keyed by `action.ID`, showing the localized `action.name`, wired to `handleActionClick` on click and Enter keydown, with `tabIndex={0}`), followed by a `psdk-actions-menu-divider` separator when both action groups are non-empty, followed by each `availableProcesses` entry rendered the same way but wired to `handleProcessClick`.
+
+### Required companion styles (`CaseViewActionsMenu.css`)
+
+Create this file alongside the component with the following rules: `.psdk-actions-menu` is `position: relative; display: inline-block` (no trigger-button CSS needed since the DS button handles its own styling); `.psdk-actions-menu-dropdown` is absolutely positioned below the trigger (`top: 100%; left: 0`), with `z-index: 1000`, `min-width: 160px`, white background, `4px` border radius, a two-layer drop shadow, `0.25rem 0` padding, no margin, and no list bullets; `.psdk-actions-menu-item` has `0.5rem 1rem` padding, `0.875rem` font size, dark text color, and a pointer cursor, with a light-gray hover background and a visible focus outline (`2px solid`, `-2px` offset) on `:focus-visible`; `.psdk-actions-menu-divider` is a thin top border with `0.25rem 0` margin.
 
 ## Behavioral Contract
 
 ### Button Label
 
-- Localized via `PCore.getLocaleUtils().getLocaleValue('Actions', 'CaseView', 'Actions')`.
+- Localized via `PCore.getLocaleUtils().getLocaleValue('Actions...', 'CaseView')`.
 - Rendered as an outlined/secondary button with a dropdown indicator icon.
 
 ### Menu Items
 
 The menu combines:
 
-1. **Local actions** — each item triggers `getPConnect().getActionsApi().openLocalAction(action.ID, { caseID: getPConnect().getCaseInfo().getID() })`.
-2. **Process actions** — each item triggers `getPConnect().getActionsApi().openProcessAction(action.ID, { ... })`.
+1. **Local actions** — each item triggers `getPConnect().getActionsApi().openLocalAction(action.ID, { ...action, containerName: 'modal', type: 'express' })`.
+2. **Process actions** — each item triggers `getPConnect().getActionsApi().openProcessAction(process.ID, { ...process })`.
 
 If both groups exist, render a divider between them.
 
 ### Localized Action Labels
 
-For localized case type context:
-
-```
-localeKey = `${caseTypeID}!CASE!${caseTypeName.toUpperCase()}`
-```
+For localized case type context, build a `localeKey` string as `${caseTypeID}!CASE!${caseTypeName}`.toUpperCase().
 
-Action name localization: `PCore.getLocaleUtils().getLocaleValue(action.name, localeKey, action.name)`.
+Action name localization: `PCore.getLocaleUtils().getLocaleValue(action.name, '', localeKey)`.
 
 ### Process Action Error Handling
 
-1. On process action click, wrap in `try/catch`.
-2. On error: show Snackbar toast with the error message.
-3. Snackbar auto-hides after 3000ms.
+1. On process action click, invoke the API as a promise.
+2. On rejection: show a toast notification with `"${process.name} Submit failed!"`.
+3. Toast auto-hides after 3000ms.
+4. Toast should include a close/dismiss button.
 
 ### Menu State
 
-- `open` boolean state controls menu visibility.
-- A `useRef<HTMLDivElement>` wraps the entire menu container.
-- On `open === true`, add a `mousedown` document listener to detect clicks outside the `ref` and close.
+- `open` boolean local state controls menu visibility.
+- An instance reference wraps the entire menu container.
+- On `open === true`, add a `mousedown` document listener to detect clicks outside the container reference and close.
 - Remove the listener on cleanup or when `open` becomes false.
-- **DO NOT** use `anchorEl` pattern unless the design system provides a `Menu` component (like MUI). For CSS-only, use the `open` boolean + absolute positioning.
+- **DO NOT** use an anchor-element pattern unless the design system provides a dedicated menu component. For CSS-only, use the `open` boolean + absolute positioning.
 
 ## Visual Specifications
 
@@ -221,7 +96,7 @@ Action name localization: `PCore.getLocaleUtils().getLocaleValue(action.name, lo
 
 | Property | Value                           |
 | -------- | ------------------------------- |
-| Label    | Localized `"Actions"`           |
+| Label    | Localized `"Actions..."`        |
 | Variant  | Outlined or secondary           |
 | Icon     | Dropdown chevron or expand_more |
 
@@ -240,43 +115,43 @@ Action name localization: `PCore.getLocaleUtils().getLocaleValue(action.name, lo
 - Menu item: `padding: 8px 16px; cursor: pointer`. Hover: `background: var(--hover-bg)`.
 - Divider: `border-top: 1px solid var(--divider-color); margin: 4px 0`.
 
-### Snackbar Toast
+### Toast Notification
 
 | Property  | Value                         |
 | --------- | ----------------------------- |
 | Position  | Bottom-center or bottom-right |
 | Auto-hide | 3000ms                        |
 | Severity  | Error (red)                   |
+| Dismiss   | Close button                  |
 
 ## Edge Cases & Special Logic
 
-- If both `localActions` and `processActions` are empty, the "Actions" button may be hidden or disabled.
+- If both `availableActions` and `availableProcesses` are empty, render nothing (return null).
 - `caseTypeName.toUpperCase()` — guard against `undefined`/`null` values.
-- Process action errors may include HTML — sanitize before displaying in the Snackbar message.
+- Process action errors may include HTML — sanitize before displaying in the toast message.
 - Menu should close on any item click (both local and process).
 
 ## Dependencies
 
 - `PCore.getLocaleUtils().getLocaleValue()` — label localization
-- `PConnectComponent` from `@pega/sdk-react`
-- MUI: `<Button>`, `<Menu>`, `<MenuItem>`, `<Divider>`, `<Snackbar>`
+- `getPConnect().getActionsApi()` — local action and process action invocation
+- The project's base component interface
+- The installed design system's button, menu, and toast components (check `package.json`)
 
 ## Design System Mapping
 
 **UI control type:** Dropdown action menu with button trigger and toast error notification.
 
-Listed design systems are examples only.
+When implementing in a specific design system, map the following:
 
-| Design System      | Button                                 | Menu                 | Toast                         |
-| ------------------ | -------------------------------------- | -------------------- | ----------------------------- |
-| Default (CSS only) | `<button>` + custom dropdown           | `<ul>/<li>` with CSS | Custom toast overlay          |
-| MUI                | `<Button>` + `<Menu>/<MenuItem>`       | MUI Menu             | `<Snackbar>/<Alert>`          |
-| Ant Design         | `<Dropdown menu={{ items }}>`          | Ant Dropdown         | `message.error()`             |
-| Chakra UI          | `<Menu>/<MenuButton>/<MenuList>`       | Chakra Menu          | `useToast()`                  |
-| Shadcn/ui          | `<DropdownMenu>/<DropdownMenuTrigger>` | Shadcn DropdownMenu  | `<Toaster>` + `toast.error()` |
+- **Trigger button:** Use the design system's text or ghost-variant button. The button label is the localized "Actions..." string. It must support `aria-haspopup` and `aria-expanded` attributes.
+- **Menu/Dropdown:** Use the design system's menu or dropdown primitive if available. If none exists, use a positioned list with CSS and manual open/close logic. Items must support click handlers and keyboard activation (Enter key).
+- **Divider:** Use the design system's divider or separator between the local actions group and the process actions group.
+- **Toast notification:** Use the design system's snackbar or toast component to surface process action errors. Must auto-hide after 3000ms and include a dismiss/close button.
+- **Click-outside-to-close:** If the design system's menu handles this natively, rely on that. Otherwise implement manually with an instance reference and a document `mousedown` listener.
 
-When implementing in a specific design system:
+Key constraints regardless of design system:
 
 - Local vs process action distinction must be preserved — they call different APIs
-- Localized labels via `localeKey = ${caseTypeID}!CASE!${caseTypeName.toUpperCase()}`
+- Localized labels via `localeKey = ${caseTypeID}!CASE!${caseTypeName}`.toUpperCase()
 - Process action errors must be surfaced via a dismissible toast

package/templates/react-sdk-reference/.ai-common/skills/template-skills/Confirmation.md

@@ -15,13 +15,13 @@ Case confirmation template. Renders the post-submission confirmation view with a
 > 1. `PCore.getContainerUtils().getActiveContainerItemName(getPConnect().getTarget())` — gets active container item
 > 2. `PCore.getContainerUtils().getContainerItemData(target, activeItemID)` — gets root info for close event
 > 3. `PCore.getPubSubUtils().publish(CONSTS.PUB_SUB_EVENTS.CASE_EVENTS.CLOSE_CONFIRM_VIEW, rootInfo)` — proper close event with payload
-> 4. `getComponentFromRegistry('Details')` — for rendering case details in confirmation
+> 4. Look up the `'Details'` component from the project's component registry — for rendering case details in confirmation
 > 5. `getToDoAssignments(getPConnect())` — from `PCore.getSDKUtils().getSDKContainerUtils()`
 > 6. Check `showDetails` before rendering Details component
 >
 > **Minimum Implementation Checklist:**
 >
-> - [ ] `PCore.getContainerUtils()` used for close event (NOT a simple `setShowConfirmView(false)`)
+> - [ ] `PCore.getContainerUtils()` used for close event (NOT a simple toggle of local state)
 > - [ ] `rootInfo` passed to `CLOSE_CONFIRM_VIEW` pub/sub event
 > - [ ] Details component rendered when `showDetails` is true
 > - [ ] ToDo component rendered with `getToDoAssignments` when `showTasks` is true
@@ -35,111 +35,64 @@ Displayed after a case or assignment is submitted. Shows the confirmation view (
 
 ## Pega Metadata
 
-- **Registration key:** `Confirmation` (in `component-map.ts`)
+- **Registration key:** `Confirmation` (in the project's component map)
 - **Category:** Page template — confirmation
-- **Extends:** `PConnProps`
-
-## Props
-
-| Prop          | Type          | Required | Description                                                                   |
-| ------------- | ------------- | -------- | ----------------------------------------------------------------------------- |
-| `children`    | `ReactNode[]` | Yes      | Region children: `[0]` = ToDo region, `[1]` = Details region (when available) |
-| `getPConnect` | `function`    | Yes      | PConnect getter                                                               |
-
-## Component Skeleton
-
-```typescript
-import { type PropsWithChildren, useState } from 'react';
-import { getComponentFromRegistry } from '@pega/sdk-react';
-import type { PConnProps } from '@pega/sdk-react';
-
-interface ConfirmationProps extends PConnProps {
-  datasource: { source: any };
-  label: string;
-  showLabel: boolean;
-  showTasks: boolean;
-}
-
-export default function Confirmation(props: PropsWithChildren<ConfirmationProps>) {
-  const ToDo = getComponentFromRegistry('Todo'); // NOTE: 'Todo' not 'ToDo'
-  const Details = getComponentFromRegistry('Details');
-
-  const CONSTS = PCore.getConstants();
-  const [showConfirmView, setShowConfirmView] = useState(true);
-  const { showTasks, getPConnect, showLabel, label } = props;
-
-  // 1. Get active container + root info
-  const activeContainerItemID = PCore.getContainerUtils()
-    .getActiveContainerItemName(getPConnect().getTarget() || '');
-  const rootInfo = PCore.getContainerUtils()
-    .getContainerItemData(getPConnect().getTarget(), activeContainerItemID);
-
-  // 2. Get todo assignments
-  const { getToDoAssignments } = PCore.getSDKUtils().getSDKContainerUtils();
-  const toDoList = getToDoAssignments(getPConnect());
-
-  // 3. Done button handler
-  const onConfirmViewClose = () => {
-    setShowConfirmView(false);
-    PCore.getPubSubUtils().publish(
-      PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CLOSE_CONFIRM_VIEW, rootInfo
-    );
-  };
-
-  // 4. Show details check
-  const showDetails = props.children?.[0]?.props?.getPConnect()?.getChildren()?.length > 0;
-
-  // 5. Render: confirm view OR todo view
-  if (showConfirmView) {
-    return (
-      <Card>
-        <h2>{showLabel ? label : ''}</h2>
-        {showDetails && <Details {...props} showLabel={false} />}
-        {showTasks && toDoList?.length > 0 && (
-          <ToDo datasource={{ source: toDoList }} getPConnect={getPConnect}
-            type={CONSTS.TODO} headerText="Open Tasks" isConfirm />
-        )}
-        <DoneButton onClick={onConfirmViewClose}>Done</DoneButton>
-      </Card>
-    );
-  }
-  return toDoList?.length > 0 ? (
-    <Card>
-      <ToDo datasource={{ source: toDoList }} getPConnect={getPConnect}
-        type={CONSTS.TODO} headerText="Tasks" isConfirm />
-    </Card>
-  ) : null;
-}
-```
+- **Extends:** the project's base component interface
+
+## Inputs
+
+| Input         | Type               | Required | Description                                                                   |
+| ------------- | ------------------ | -------- | ----------------------------------------------------------------------------- |
+| `children`    | child element list | Yes      | Region children: `[0]` = ToDo region, `[1]` = Details region (when available) |
+| `getPConnect` | function           | Yes      | PConnect getter                                                               |
+| `datasource`  | object             | No       | Shape `{ source: any }` — what's-next data source                             |
+| `label`       | string             | No       | Confirmation heading text                                                     |
+| `showLabel`   | boolean            | No       | Whether to render the heading label                                           |
+| `showTasks`   | boolean            | No       | Whether to render outstanding ToDo assignments                                |
+
+## Implementation Structure
+
+**Module Setup:** This component needs the project's base component interface for typing, the project's component registry for retrieving `ToDo` and `Details` dynamically, and a local state primitive for tracking the confirm-view toggle. Define a companion styles block with padding and margin (1 spacing unit on all sides) applied to the card wrapper.
+
+**Main Component Logic** — steps in order:
+
+1. Retrieve `ToDo` from the project's component registry using the key `'Todo'` (note the capitalization — not `'ToDo'`), and `Details` similarly using `'Details'`.
+2. Set `CONSTS = PCore.getConstants()`; declare local state `showConfirmView` initialized to `true`; receive inputs `showTasks`, `getPConnect`, `showLabel`, and `label`.
+3. Get the active container and root info: `activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(getPConnect().getTarget() || '')`, then `rootInfo = PCore.getContainerUtils().getContainerItemData(getPConnect().getTarget(), activeContainerItemID)`.
+4. Get pending ToDo assignments: destructure `getToDoAssignments` from `PCore.getSDKUtils().getSDKContainerUtils()`, then call `toDoList = getToDoAssignments(getPConnect())`.
+5. Define the Done-button handler `onConfirmViewClose`: set `showConfirmView` to `false`, then publish `PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CLOSE_CONFIRM_VIEW, rootInfo)`.
+6. Compute `showDetails` by checking whether the first child's nested PConnect has children: `children?.[0]` → get its `getPConnect()` → call `getChildren()` → check `length > 0`.
+7. **Render — confirm view:** if `showConfirmView` is true, render a card container (with companion styles) containing: a heading with the label (when `showLabel` is true); the Details component (with `showLabel` set to false) when `showDetails` is true; the ToDo component (with `datasource: { source: toDoList }`, `getPConnect`, `type: CONSTS.TODO`, `headerText: "Open Tasks"`, `isConfirm: true`) when `showTasks` is true and `toDoList` is non-empty; and a primary Done button aligned to the end, wired to `onConfirmViewClose`.
+8. **Render — post-close:** otherwise, if `toDoList` is non-empty, render a card container containing just the ToDo component (same inputs as above but `headerText: "Tasks"`); if `toDoList` is empty, render nothing.
 
 ## Behavioral Contract
 
 ### State
 
-- `showConfirmView`: boolean, initially `true`.
+- `showConfirmView`: boolean local state, initially `true`.
 - `toDoAssignments`: array from `getToDoAssignments(getPConnect())` — pending assignments.
 
 ### Done Button Click
 
-1. Call `getPConnect().getContainerManager().closeContainerItem(getPConnect().getContainerName())`.
-2. OR call `PCore.getContainerUtils().getActiveContainerItemName(getPConnect().getContainerName())`.
-3. Check remaining `toDoAssignments`.
-4. If assignments remain: `setShowConfirmView(false)` — show ToDo view instead.
-5. If no assignments remain: publish `PCore.getPubSubUtils().publish(CLOSE_CONFIRM_VIEW, {})`.
+1. Set `showConfirmView` local state to `false`.
+2. Publish `PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CLOSE_CONFIRM_VIEW, rootInfo)`.
+3. The `rootInfo` payload is derived from `PCore.getContainerUtils().getContainerItemData(target, activeContainerItemID)` — this is mandatory for correct container closure.
 
 ### Show Details
 
-- `showDetails`: `children.length > 1` — true when a Details region is present.
+- `showDetails`: true when the first child region's PConnect has children (i.e., there is content to display in the Details area).
 
-### Render: Confirm View (`showConfirmView === true`)
+### Render: Confirm View (showConfirmView is true)
 
-1. Confirmation message header (localized `"Your submission is confirmed"` or equivalent).
-2. If `showDetails`: render `children[1]` (Details region) using `createElement(PConnectComponent, ...)`.
-3. Done button (`localized "Done"`) — triggers done click handler above.
+1. Confirmation heading label (when `showLabel` is true).
+2. If `showDetails`: render the Details component retrieved from the project's component registry with `showLabel` set to false, passing the current component's inputs.
+3. If `showTasks` and `toDoList` is non-empty: render the ToDo component with `datasource: { source: toDoList }`, `type: CONSTS.TODO`, `headerText: "Open Tasks"`, `isConfirm: true`.
+4. Done button (primary action) — triggers `onConfirmViewClose`.
 
-### Render: ToDo View (`showConfirmView === false`)
+### Render: Post-Close View (showConfirmView is false)
 
-- Render `children[0]` (ToDo region) using `createElement(PConnectComponent, ...)`.
+- If `toDoList` is non-empty: render a card with the ToDo component (`headerText: "Tasks"`, same core inputs).
+- If `toDoList` is empty: render nothing.
 
 ## Visual Specifications
 
@@ -147,52 +100,50 @@ export default function Confirmation(props: PropsWithChildren<ConfirmationProps>
 
 | Element             | Description                                   |
 | ------------------- | --------------------------------------------- |
-| Confirmation header | Success icon + heading text                   |
+| Confirmation header | Heading text (label) when showLabel is true   |
 | Details section     | Optional — rendered below confirmation header |
-| Done button         | Primary button, bottom of the form            |
+| Done button         | Primary button, aligned to end of the form    |
 
 **CSS-only implementation notes:**
 
-- Confirm view: `display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 2rem`.
-- Success icon: large checkmark or success indicator, centered.
-- Confirmation heading: `font-size: 1.5rem; font-weight: 600; text-align: center`.
-- Done button: `align-self: flex-end` or centered.
+- Card wrapper: padding and margin of 1 spacing unit on all sides.
+- Done button container: `display: flex; justify-content: flex-end`.
+- Confirmation heading: rendered as a level-2 heading element.
 
 ### ToDo View
 
-- Full-width ToDo region rendered in place of confirmation.
+- Full-width ToDo region rendered in place of confirmation inside a card wrapper.
 - No additional wrapping — render the region directly.
 
 ## Edge Cases & Special Logic
 
-- `getToDoAssignments(getPConnect())` — returns empty array if no assignments remain; triggers close publish immediately.
-- `children[1]` may not exist — always check `showDetails` before rendering.
+- `getToDoAssignments(getPConnect())` — returns empty array if no assignments remain; when empty in post-close state, renders nothing.
+- The first child region may not have Details content — always check `showDetails` before rendering the Details component.
 - `CLOSE_CONFIRM_VIEW` is a PubSub constant — ensure it matches the consuming container's subscription key.
 - The confirmation view should not be navigable backward — Done is the only exit.
+- The ToDo registry key is `'Todo'` (capital T, lowercase odo) — this is the ConstellationJS Engine convention.
 
 ## Dependencies
 
-- `getToDoAssignments` from `../../helpers/case-utils` (or equivalent)
-- `PCore.getPubSubUtils().publish()` — for CLOSE_CONFIRM_VIEW event
-- `PCore.getContainerUtils()` — for container item management
-- `PConnectComponent` from `@pega/sdk-react`
+- The project's component registry — for retrieving `'Todo'` and `'Details'` components dynamically at runtime
+- `PCore.getSDKUtils().getSDKContainerUtils().getToDoAssignments` — for retrieving pending assignments
+- `PCore.getPubSubUtils().publish()` — for the CLOSE_CONFIRM_VIEW event
+- `PCore.getContainerUtils()` — for container item management (active item name + container item data)
+- `PCore.getConstants()` — for PubSub event keys and TODO type constant
 
 ## Design System Mapping
 
 **UI control type:** Post-submission confirmation page with done action and optional todo view.
 
-Listed design systems are examples only.
+When implementing in a specific design system, map the following:
 
-| Design System      | Success Indicator              | Done Button                    | Layout                                        |
-| ------------------ | ------------------------------ | ------------------------------ | --------------------------------------------- |
-| Default (CSS only) | CSS checkmark SVG              | `<button class='primary'>`     | Centered flexbox column                       |
-| MUI                | `<CheckCircleIcon>`            | `<Button variant='contained'>` | `<Box display='flex' flexDirection='column'>` |
-| Ant Design         | `<Result status='success'>`    | `<Button type='primary'>`      | Ant Result component                          |
-| Chakra UI          | `<CheckCircleIcon>` + `<Text>` | `<Button colorScheme='blue'>`  | `<VStack>`                                    |
-| Shadcn/ui          | Custom icon + `<h2>`           | `<Button>`                     | Tailwind centered div                         |
+- **Card wrapper:** Use the design system's card or surface container component with standard padding/margin.
+- **Done button:** Use the design system's primary action button component.
+- **Heading:** Use a level-2 heading or the design system's title typography component.
+- **Layout:** A vertical flex column layout containing heading, optional details, optional todo list, and the done button at the end.
 
-When implementing in a specific design system:
+Implementation constraints regardless of design system:
 
-- Done button must check remaining `toDoAssignments` before deciding whether to show ToDo view or close
-- `CLOSE_CONFIRM_VIEW` publish must happen only after confirming no assignments remain
-- `showDetails` check must guard `children[1]` access
+- Done button must trigger `onConfirmViewClose` which both toggles local state and publishes the `CLOSE_CONFIRM_VIEW` event with `rootInfo`
+- `showDetails` check must guard Details component rendering
+- ToDo component receives `isConfirm: true` to signal it is rendered within a confirmation context