<!-- source-hash: 07366ff5d32cd4e46e8c63c7d6ad677c -->
A React panel component for managing permission policies grouped by category, supporting per-policy and bulk approval level configuration with expand/collapse animations and responsive layout.

## Key Components

- **`PolicyConfigurationPanel`** — Main exported component. Renders grouped permission categories with collapsible policy lists. Manages expand/collapse state and bulk approval levels internally.
- **`CategorySection`** — Collapsible category header with an optional bulk approval dropdown and a list of `PolicyRow` items. Uses `useCollapsible` for animated expand/collapse.
- **`PolicyRow`** — Renders a single permission policy with its tool icon, name, command pattern, and an approval level selector.
- **`ApprovalLevelDropdown`** — Reusable dropdown for selecting an `ApprovalLevel` (`ALLOW`, `ASK_USER`, `ASK_TECHNICIAN`, `DENY`). Supports an optional "Clear Global Permission" option for category-level bulk selectors.
- **`approvalLevelLabels`** — Display label map for each `ApprovalLevel` value.

## Usage Example

```typescript
import { PolicyConfigurationPanel } from './policy-configuration-panel'
import { PermissionCategory, ApprovalLevel } from '../../types/permissions'

const categories: PermissionCategory[] = [
  {
    id: 'network',
    name: 'Network Tools',
    policies: [
      {
        id: 'ping',
        name: 'Ping',
        toolName: 'ping',
        commandPattern: 'ping *',
        approvalLevel: 'ALLOW',
      },
    ],
  },
]

function SettingsPage() {
  const handlePolicyChange = (
    categoryId: string,
    policyId: string,
    level: ApprovalLevel
  ) => {
    console.log('Policy changed:', { categoryId, policyId, level })
  }

  const handleCategoryChange = (categoryId: string, level: ApprovalLevel) => {
    console.log('Bulk category change:', { categoryId, level })
  }

  return (
    <PolicyConfigurationPanel
      categories={categories}
      editMode={true}
      onPolicyPermissionChange={handlePolicyChange}
      onCategoryPermissionChange={handleCategoryChange}
    />
  )
}
```

> **Note:** Bulk approval selections reset automatically when `editMode` toggles. Expand/collapse state is preserved across data refreshes since it lives inside the panel.

**Source:** [`policy-configuration-panel.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/policy-configuration-panel.tsx)