<!-- source-hash: 26e88f6d6986aabc12b20690300de3c7 -->
Storybook stories for the `PolicyConfigurationPanel` component, demonstrating AI guardrails permission configuration UI in read-only and interactive edit modes.

## Key Components

| Export | Description |
|---|---|
| `ReadOnly` | Panel in view-only mode — approval levels rendered as static text, no dropdowns |
| `EditMode` | Interactive story with per-policy and bulk category approval dropdowns; state updates mirror the OpenFrame guardrails editor hook |
| `GroupedPolicySections` | Composes multiple `PolicyConfigurationPanel` instances under labeled group headings (e.g., "Device Management", "Data Access") |
| `applyPolicyLevel` | Helper that immutably updates a single policy's `ApprovalLevel` within a category list |
| `applyCategoryLevel` | Helper that bulk-applies an `ApprovalLevel` to every policy in a given category |

**Sample fixture data** covers three device-action categories (`Device Actions`, `Remote Access`, `Scripts & Automation`) and one data-access category (`Read Access`), referencing tools such as `OPENFRAME_RMM`, `FLEET_MDM`, `MESHCENTRAL`, and `OSQUERY`.

## Usage Example

```typescript
// Replicate the EditMode story locally
import { useState } from 'react'
import { PolicyConfigurationPanel } from '../components/features/policy-configuration-panel'
import type { ApprovalLevel, PermissionCategory } from '../types/permissions'

function GuardrailsTab({ categories }: { categories: PermissionCategory[] }) {
  const [cats, setCats] = useState(categories)

  return (
    <PolicyConfigurationPanel
      categories={cats}
      editMode={true}
      onPolicyPermissionChange={(categoryId, policyId, level) =>
        setCats(prev =>
          prev.map(c =>
            c.id !== categoryId ? c : {
              ...c,
              policies: c.policies.map(p =>
                p.id === policyId ? { ...p, approvalLevel: level } : p
              ),
            }
          )
        )
      }
      onCategoryPermissionChange={(categoryId, level) =>
        setCats(prev =>
          prev.map(c =>
            c.id !== categoryId ? c : {
              ...c,
              policies: c.policies.map(p => ({ ...p, approvalLevel: level })),
            }
          )
        )
      }
    />
  )
}
```

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