diff --git a/packages/contact-center/ui-logging/ai-docs/AGENTS.md b/packages/contact-center/ui-logging/ai-docs/AGENTS.md
new file mode 100644
index 000000000..555b19255
--- /dev/null
+++ b/packages/contact-center/ui-logging/ai-docs/AGENTS.md
@@ -0,0 +1,260 @@
+# UI Logging - Metrics Tracking Utility
+
+## AI Agent Routing (Do Not Start Here)
+
+If you are an AI assistant or tool reading this file **as your first entry point**, do **not** start your reasoning or code generation workflow from here.
+
+- **Primary entrypoint:** Always begin with the **nearest parent** contact-center AI docs `AGENTS.md` (for example, the root `ai-docs/AGENTS.md` at the repository root).
+- **Process:**
+  - Load and follow the instructions and templates in that parent `AGENTS.md`.
+  - Only after a parent `AGENTS.md` explicitly routes you to this file should you treat this document as package-specific guidance.
+- **Never** skip the parent `AGENTS.md` even if the user prompt directly mentions this specific package or file.
+
+Once you have gone through the parent `AGENTS.md` and been routed here, you can use the rest of this file as the authoritative reference for the `@webex/cc-ui-logging` package.
+
+## Overview
+
+UI Logging is a lightweight utility package that provides logging and metrics tracking capabilities for contact center widgets. It includes a Higher-Order Component (HOC) called `withMetrics` that automatically tracks widget lifecycle events, and a `logMetrics` function for custom event logging.
+
+**Package:** `@webex/cc-ui-logging`
+
+**Version:** See [package.json](../package.json)
+
+---
+
+## Why and What is This Package Used For?
+
+### Purpose
+
+The UI Logging package enables observability and monitoring for contact center widgets. It:
+
+- **Tracks widget lifecycle** - Automatically logs mount, unmount, and updates
+- **Provides HOC wrapper** - Easy integration with minimal code changes
+- **Logs to store logger** - Integrates with existing logging infrastructure
+- **Supports custom metrics** - Log custom events with additional context
+- **[WIP]Optimizes re-renders** - Includes shallow props comparison for performance
+
+### Key Capabilities
+
+- **withMetrics HOC**: Wraps components to auto-track lifecycle events
+- **logMetrics Function**: Manually log custom events
+- **havePropsChanged Utility**: Shallow comparison to prevent unnecessary re-renders
+- **Type-Safe**: Full TypeScript support with WidgetMetrics type
+- **Store Integration**: Uses store.logger for centralized logging
+
+---
+
+## Examples and Use Cases
+
+### Getting Started
+
+#### Basic HOC Usage
+
+```typescript
+import { withMetrics } from '@webex/cc-ui-logging';
+import MyWidget from './MyWidget';
+
+// Wrap your widget with metrics tracking
+const MyWidgetWithMetrics = withMetrics(MyWidget, 'MyWidget');
+
+// Use the wrapped component
+function App() {
+  return <MyWidgetWithMetrics prop1="value" />;
+}
+
+// Automatically logs:
+// - WIDGET_MOUNTED when component mounts
+// - WIDGET_UNMOUNTED when component unmounts
+```
+
+### Common Use Cases
+
+#### 1. Tracking Widget Lifecycle
+
+```typescript
+import { withMetrics } from '@webex/cc-ui-logging';
+import { StationLogin } from '@webex/cc-widget';
+
+// Automatically tracks mount/unmount
+const StationLoginWithMetrics = withMetrics(
+  StationLogin,
+  'StationLogin'
+);
+
+// When used in app:
+<StationLoginWithMetrics />
+
+// Logs on mount:
+// {
+//   widgetName: 'StationLogin',
+//   event: 'WIDGET_MOUNTED',
+//   timestamp: 1700000000000
+// }
+
+// Logs on unmount:
+// {
+//   widgetName: 'StationLogin',
+//   event: 'WIDGET_UNMOUNTED',
+//   timestamp: 1700000100000
+// }
+```
+
+### Integration Patterns
+
+#### With Widget Components
+
+```typescript
+import { withMetrics } from '@webex/cc-ui-logging';
+import { observer } from 'mobx-react-lite';
+import { UserStateComponent } from '@webex/cc-components';
+import store from '@webex/cc-store';
+
+// 1. Create internal component
+const UserStateInternal = observer(({ onStateChange }) => {
+  const props = {
+    idleCodes: store.idleCodes,
+    currentState: store.currentState,
+    setAgentStatus: (code) => store.setCurrentState(code),
+    onStateChange,
+  };
+
+  return <UserStateComponent {...props} />;
+});
+
+// 2. Wrap with metrics HOC
+const UserState = withMetrics(UserStateInternal, 'UserState');
+
+export { UserState };
+```
+
+#### With Error Boundaries
+
+````typescript
+import { withMetrics } from '@webex/cc-ui-logging';
+import { ErrorBoundary } from 'react-error-boundary';
+
+const UserStateInternal = observer(({ onStateChange }) => {
+  const props = {
+    idleCodes: store.idleCodes,
+    currentState: store.currentState,
+    setAgentStatus: (code) => store.setCurrentState(code),
+    onStateChange,
+  };
+
+  return <UserStateComponent {...props} />;
+});
+
+function Widget(props) {
+  const handleError = (error: Error) => {
+    // Log error via metrics
+  };
+
+  return (
+    <ErrorBoundary onError={handleError}>
+      <UserStateInternal {...props} />
+    </ErrorBoundary>
+  );
+}
+---
+
+## Dependencies
+
+**Note:** For exact versions, see [package.json](../package.json)
+
+### Runtime Dependencies
+
+| Package           | Purpose                            |
+| ----------------- | ---------------------------------- |
+| `@webex/cc-store` | Access to store.logger for logging |
+
+### Peer Dependencies
+
+| Package     | Purpose                   |
+| ----------- | ------------------------- |
+| `react`     | React framework (for HOC) |
+| `react-dom` | React DOM (for HOC)       |
+
+### Development Dependencies
+
+Key development tools (see [package.json](../package.json) for versions):
+
+- TypeScript
+- Jest (testing)
+- Webpack (bundling)
+
+---
+
+## API Reference
+
+### withMetrics HOC
+
+```typescript
+function withMetrics<P extends object>(
+  Component: React.ComponentType<P>,
+  widgetName: string
+): React.MemoExoticComponent<React.FC<P>>;
+````
+
+**Parameters:**
+
+- `Component` - React component to wrap
+- `widgetName` - Name for metric identification
+
+**Returns:** Memoized component with automatic metrics tracking
+
+**Behavior:**
+
+- Wraps component with React.memo
+- Logs WIDGET_MOUNTED on mount
+- Logs WIDGET_UNMOUNTED on unmount
+
+---
+
+### logMetrics Function
+
+```typescript
+function logMetrics(metric: WidgetMetrics): void;
+
+type WidgetMetrics = {
+  widgetName: string;
+  event: 'WIDGET_MOUNTED' | 'ERROR' | 'WIDGET_UNMOUNTED' | 'PROPS_UPDATED';
+  props?: Record<string, any>;
+  timestamp: number;
+  additionalContext?: Record<string, any>;
+};
+```
+
+**Parameters:**
+
+- `metric.widgetName` - Widget identifier
+- `metric.event` - Event type
+- `metric.props` - Optional widget props snapshot
+- `metric.timestamp` - Unix timestamp
+- `metric.additionalContext` - Optional additional data
+
+**Behavior:**
+
+- Checks if `store.logger` exists
+- Logs warning if no logger available
+- Calls `store.logger.log()` with formatted JSON
+
+---
+
+## Installation
+
+```bash
+# Install as dependency
+yarn add @webex/cc-widget
+
+# Used internally by widgets, usually not directly installed
+```
+
+---
+
+## Additional Resources
+
+For detailed HOC implementation, metrics flow, and performance optimization, see [architecture.md](./architecture.md).
+
+---
+
+_Last Updated: 2025-11-26_
diff --git a/packages/contact-center/ui-logging/ai-docs/ARCHITECTURE.md b/packages/contact-center/ui-logging/ai-docs/ARCHITECTURE.md
new file mode 100644
index 000000000..5e9267fc8
--- /dev/null
+++ b/packages/contact-center/ui-logging/ai-docs/ARCHITECTURE.md
@@ -0,0 +1,408 @@
+# UI Logging - Architecture
+
+## Component Overview
+
+UI Logging is a utility package that provides logging and metrics tracking through a Higher-Order Component (HOC) pattern and direct logging functions. It integrates with the store's logger to provide centralized metrics collection.
+
+### Module Table
+
+| Module              | File                   | Exports                                                  | Purpose                                  | Dependencies         |
+| ------------------- | ---------------------- | -------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| **withMetrics HOC** | `src/withMetrics.tsx`  | `withMetrics` (default)                                  | Wraps components with lifecycle tracking | React, metricsLogger |
+| **metricsLogger**   | `src/metricsLogger.ts` | `logMetrics`, `havePropsChanged`, `WidgetMetrics` (type) | Logging functions and utilities          | @webex/cc-store      |
+| **Package Entry**   | `src/index.ts`         | All exports                                              | Main package export                      | Both modules above   |
+
+### File Structure
+
+```
+ui-logging/
+├── src/
+│   ├── index.ts                # Package exports
+│   ├── metricsLogger.ts        # Logging functions
+│   └── withMetrics.tsx         # HOC implementation
+├── tests/
+│   ├── metricsLogger.test.ts   # Logger tests
+│   └── withMetrics.test.tsx    # HOC tests
+├── dist/
+│   ├── index.js                # Build output
+│   └── types/
+│       ├── metricsLogger.d.ts
+│       └── withMetrics.d.ts
+├── package.json
+├── tsconfig.json
+└── webpack.config.js
+```
+
+---
+
+## Data Flows
+
+### Metrics Logging Flow
+
+```mermaid
+graph LR
+    subgraph "Widget/Component"
+        Component[React Component]
+        Event[User Event/Lifecycle]
+    end
+
+    subgraph "UI Logging"
+        HOC[withMetrics HOC]
+        LogFn[logMetrics Function]
+    end
+
+    subgraph "Store"
+        Logger[store.logger]
+    end
+
+    subgraph "Backend/Console"
+        Output[Log Output]
+    end
+
+    Component -->|Wrapped by| HOC
+    HOC -->|Mount/Unmount| LogFn
+    Event -->|Custom logging| LogFn
+    LogFn -->|JSON metrics| Logger
+    Logger -->|Formatted logs| Output
+
+    style HOC fill:#e1f5ff
+    style LogFn fill:#ffe1e1
+    style Logger fill:#fff4e1
+```
+
+### HOC Lifecycle Flow
+
+```mermaid
+sequenceDiagram
+    participant App as Application
+    participant HOC as withMetrics HOC
+    participant Component as Wrapped Component
+    participant Logger as logMetrics
+    participant Store as store.logger
+
+    App->>HOC: Render withMetrics(Component)
+    activate HOC
+
+    HOC->>HOC: useEffect (mount)
+    HOC->>Logger: logMetrics({event: 'WIDGET_MOUNTED'})
+    activate Logger
+    Logger->>Store: Check store.logger exists
+    alt Logger exists
+        Logger->>Store: logger.log(metrics)
+        Store-->>Logger: Logged
+    else No logger
+        Logger->>Logger: console.warn('No logger found')
+    end
+    deactivate Logger
+
+    HOC->>Component: Render with props
+    activate Component
+    Component-->>HOC: Rendered
+    deactivate Component
+
+    HOC-->>App: Rendered widget
+    deactivate HOC
+
+    Note over App,Store: Component unmounts
+
+    App->>HOC: Unmount
+    activate HOC
+    HOC->>HOC: useEffect cleanup
+    HOC->>Logger: logMetrics({event: 'WIDGET_UNMOUNTED'})
+    activate Logger
+    Logger->>Store: logger.log(metrics)
+    Store-->>Logger: Logged
+    deactivate Logger
+    deactivate HOC
+```
+
+---
+
+## Implementation Details
+
+### withMetrics HOC
+
+**File:** `src/withMetrics.tsx`
+
+The HOC wraps components to track lifecycle events:
+
+```typescript
+export default function withMetrics<P extends object>(
+  Component: any,
+  widgetName: string
+) {
+  return React.memo(
+    (props: P) => {
+      // Track mount and unmount
+      useEffect(() => {
+        logMetrics({
+          widgetName,
+          event: 'WIDGET_MOUNTED',
+          timestamp: Date.now(),
+        });
+
+        return () => {
+          logMetrics({
+            widgetName,
+            event: 'WIDGET_UNMOUNTED',
+            timestamp: Date.now(),
+          });
+        };
+      }, []);
+
+      return <Component {...props} />;
+    }
+  );
+}
+```
+
+**Key Features:**
+
+- Uses `React.memo` for performance optimization
+- Custom props comparison via `havePropsChanged`
+- Single `useEffect` with cleanup for lifecycle tracking
+- Props passed through transparently
+
+---
+
+### logMetrics Function
+
+**File:** `src/metricsLogger.ts`
+
+Logs metrics to store.logger:
+
+```typescript
+export const logMetrics = (metric: WidgetMetrics) => {
+  if (!store.logger) {
+    console.warn('CC-Widgets: UI Metrics: No logger found');
+    return;
+  }
+  store.logger.log(`CC-Widgets: UI Metrics: ${JSON.stringify(metric, null, 2)}`, {
+    module: 'metricsLogger.tsx',
+    method: 'logMetrics',
+  });
+};
+```
+
+**Behavior:**
+
+- Checks for `store.logger` existence
+- Warns to console if logger missing (doesn't throw)
+- Formats metrics as JSON string
+- Includes module/method context
+
+## Metrics Events
+
+### Event Types
+
+| Event              | When Fired                   | Use Case                                |
+| ------------------ | ---------------------------- | --------------------------------------- |
+| `WIDGET_MOUNTED`   | Component mounted to DOM     | Track widget usage, initialization time |
+| `WIDGET_UNMOUNTED` | Component unmounted from DOM | Track session duration, cleanup         |
+| `ERROR`            | Error occurred               | Track failures, debug issues            |
+| `PROPS_UPDATED`    | Props changed (future)       | Track configuration changes             |
+
+### Metrics Data Structure
+
+```typescript
+type WidgetMetrics = {
+  widgetName: string; // e.g., 'StationLogin'
+  event: string; // e.g., 'WIDGET_MOUNTED'
+  timestamp: number; // Unix timestampdata
+};
+```
+
+**Example Logged Metric:**
+
+```json
+{
+  "widgetName": "StationLogin",
+  "event": "WIDGET_MOUNTED",
+  "timestamp": 1700000000000
+}
+```
+
+---
+
+## Store Integration
+
+### Logger Dependency
+
+The package relies on `store.logger` being initialized:
+
+```typescript
+// store.logger must be set before using ui-logging
+import store from '@webex/cc-store';
+
+store.setLogger({
+  log: (...args) => console.log(...args),
+  error: (...args) => console.error(...args),
+  warn: (...args) => console.warn(...args),
+  info: (...args) => console.info(...args),
+});
+
+// Now logMetrics will work
+logMetrics({ ... });
+```
+
+**Graceful Degradation:**
+
+- If `store.logger` is undefined, logs warning to console
+- Does NOT throw error (allows widgets to work without logger)
+
+---
+
+## Troubleshooting Guide
+
+### Common Issues
+
+#### 1. Metrics Not Logging
+
+**Symptoms:**
+
+- No metrics appearing in logs
+- Silent failures
+
+**Possible Causes:**
+
+- `store.logger` not initialized
+- Logger object missing methods
+
+**Solutions:**
+
+```typescript
+// Check if logger exists
+import store from '@webex/cc-store';
+console.log('Logger exists:', store.logger !== undefined);
+
+// Set logger if missing
+store.setLogger({
+  log: console.log,
+  error: console.error,
+  warn: console.warn,
+  info: console.info,
+});
+
+// Verify logging works
+import {logMetrics} from '@webex/cc-ui-logging';
+logMetrics({
+  widgetName: 'Test',
+  event: 'WIDGET_MOUNTED',
+  timestamp: Date.now(),
+});
+```
+
+#### 2. Component Re-rendering Too Often
+
+**Symptoms:**
+
+- Component re-renders on every parent update
+- Performance degradation
+
+**Possible Causes:**
+
+- Passing new object/function references
+
+**Solutions:**
+
+```typescript
+// Ensure stable prop references
+import { useCallback, useMemo } from 'react';
+
+const Parent = () => {
+  // ✅ Memoized callback
+  const handleChange = useCallback(() => {}, []);
+
+  // ✅ Memoized object
+  const config = useMemo(() => ({ option: 'value' }), []);
+
+  return <WidgetWithMetrics onChange={handleChange} config={config} />;
+};
+
+// ❌ Avoid inline functions/objects
+<WidgetWithMetrics
+  onChange={() => {}}        // New function every render
+  config={{ option: 'value' }}  // New object every render
+/>
+```
+
+#### 3. TypeScript Type Errors
+
+**Symptoms:**
+
+- Type errors with WidgetMetrics
+- Event type not recognized
+
+**Possible Causes:**
+
+- Using incorrect event type
+- Missing type import
+
+**Solutions:**
+
+```typescript
+// Import type
+import type {WidgetMetrics} from '@webex/cc-ui-logging';
+
+// Use correct event types
+const metric: WidgetMetrics = {
+  widgetName: 'MyWidget',
+  event: 'WIDGET_MOUNTED', // Must be one of the allowed event types
+  timestamp: Date.now(),
+};
+
+// For custom events, use WIDGET_MOUNTED with additionalContext
+const customMetric: WidgetMetrics = {
+  widgetName: 'MyWidget',
+  event: 'WIDGET_MOUNTED',
+  timestamp: Date.now(),
+};
+```
+
+#### 4. HOC Not Tracking Unmount
+
+**Symptoms:**
+
+- WIDGET_MOUNTED logged
+- WIDGET_UNMOUNTED never logged
+
+**Possible Causes:**
+
+- Component never unmounted
+- Cleanup function not running
+- Page refreshed before unmount
+
+**Solutions:**
+
+```typescript
+// Verify component actually unmounts
+useEffect(() => {
+  console.log('Component mounted');
+
+  return () => {
+    console.log('Component cleanup'); // Should see this
+  };
+}, []);
+
+// For navigation/page changes
+window.addEventListener('beforeunload', () => {
+  // Log before page unload
+  logMetrics({
+    widgetName: 'MyWidget',
+    event: 'WIDGET_UNMOUNTED',
+    timestamp: Date.now(),
+  });
+});
+```
+
+---
+
+## Related Documentation
+
+- [Agent Documentation](./agent.md) - Usage examples and API
+- [React Patterns](../../../../ai-docs/patterns/react-patterns.md) - HOC patterns
+- [CC Store Documentation](../../store/ai-docs/agent.md) - Logger configuration
+
+---
+
+_Last Updated: 2025-11-26_