@flamingo-stack/openframe-frontend-core 0.0.442 → 0.0.443

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.442",
+  "version": "0.0.443",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/features/policy-configuration-panel.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 import { useRef, useEffect, useState } from 'react'
-import { ChevronDown } from 'lucide-react'
+import { ChevronDown, Shield } from 'lucide-react'
 import { cn } from '../../utils/cn'
 import { ToolIcon } from '../tool-icon'
 import { Button } from '../ui/button'
@@ -34,62 +34,110 @@ const getApprovalLevelLabel = (level: ApprovalLevel | undefined, editMode: boole
   return option?.label || level
 }
 
+const ApprovalLevelDropdown: React.FC<{
+  value: ApprovalLevel | undefined;
+  onChange: (level: ApprovalLevel | undefined) => void;
+  /** Adds the "Clear Global Permission" item (category bulk dropdown). */
+  allowClear?: boolean;
+  triggerClassName?: string;
+  contentClassName?: string;
+}> = ({ value, onChange, allowClear = false, triggerClassName, contentClassName }) => (
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>
+      <Button
+        variant="outline"
+        rightIcon={<ChevronDown className="h-6 w-6 text-ods-text-secondary" />}
+        className={cn(
+          "!text-h6 bg-ods-card border border-ods-border rounded-md flex gap-[var(--spacing-system-xsf)] items-center justify-between !px-[var(--spacing-system-xsf)] py-[var(--spacing-system-xsf)] hover:bg-ods-bg-hover transition-colors h-auto",
+          value ? "text-ods-text-primary" : "text-ods-text-secondary",
+          triggerClassName
+        )}
+      >
+        {getApprovalLevelLabel(value, true)}
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end" className={contentClassName}>
+      {allowClear && (
+        <DropdownMenuItem onClick={() => onChange(undefined)} className="text-h6">
+          Clear Global Permission
+        </DropdownMenuItem>
+      )}
+      {approvalLevelOptions.map(option => (
+        <DropdownMenuItem
+          key={option.value}
+          onClick={() => onChange(option.value)}
+          className="text-h6"
+        >
+          {option.label}
+        </DropdownMenuItem>
+      ))}
+    </DropdownMenuContent>
+  </DropdownMenu>
+)
+
 const PolicyRow: React.FC<{
   policy: PermissionPolicy;
   categoryId: string;
   editMode: boolean;
   onPermissionChange: (categoryId: string, policyId: string, level: ApprovalLevel) => void;
 }> = ({ policy, categoryId, editMode, onPermissionChange }) => {
+  const handleChange = (level: ApprovalLevel | undefined) => {
+    if (level) onPermissionChange(categoryId, policy.id, level)
+  }
+
   return (
-    <div className="bg-ods-bg border-b border-ods-border flex gap-4 items-center px-4 py-3">
+    <div className="bg-ods-bg border-b last:border-b-0 border-ods-border flex gap-[var(--spacing-system-m)] items-start md:items-center px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)]">
       {/* Tool Icon */}
-      <div className="bg-ods-bg border border-ods-border rounded-md flex items-center justify-center w-8 h-8">
+      <div className="bg-ods-bg border border-ods-border rounded-md flex items-center justify-center w-8 h-8 shrink-0">
         <ToolIcon toolType={policy.toolName} size={16} />
       </div>
 
-      {/* Policy Info */}
+      {/* Policy Info — on mobile the approval level stacks below the pattern */}
       <div className="flex-1 flex flex-col min-w-0">
-        <p className="text-h6 text-ods-text-primary truncate" title={policy.name}>
+        <p className="text-h4 text-ods-text-primary truncate" title={policy.name}>
           {policy.name}
         </p>
-        <p className="text-code text-ods-text-secondary break-all">
+        <p
+          className="text-h6 text-ods-text-secondary truncate md:whitespace-normal md:break-all"
+          title={policy.commandPattern}
+        >
           {policy.commandPattern}
         </p>
+        {editMode ? (
+          <div className="md:hidden mt-[var(--spacing-system-xsf)]">
+            <ApprovalLevelDropdown
+              value={policy.approvalLevel}
+              onChange={handleChange}
+              triggerClassName="w-full"
+              contentClassName="w-[180px]"
+            />
+          </div>
+        ) : policy.approvalLevel ? (
+          <span className="md:hidden text-h4 text-ods-text-primary">
+            {getApprovalLevelLabel(policy.approvalLevel)}
+          </span>
+        ) : null}
       </div>
 
-      {/* Approval Level Dropdown */}
-      {editMode ? (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button 
-              variant="outline"
-              rightIcon={<ChevronDown className="h-6 w-6 text-ods-text-secondary" />}
-              className="md:!text-sm bg-ods-card border border-ods-border rounded-md flex gap-2 items-center justify-between !px-2 py-2 w-[180px] hover:bg-ods-bg-hover transition-colors text-ods-text-primary h-auto"
-            >
-              {getApprovalLevelLabel(policy.approvalLevel, editMode)}
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-[180px]">
-            {approvalLevelOptions.map(option => (
-              <DropdownMenuItem
-                key={option.value}
-                onClick={() => onPermissionChange(categoryId, policy.id, option.value)}
-                className="text-h6"
-              >
-                {option.label}
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      ) : policy.approvalLevel ? (
-        <div className="px-3 py-2 w-[180px]">
-          <span className="text-h6 text-ods-text-primary">
-            {getApprovalLevelLabel(policy.approvalLevel, editMode)}
-          </span>
-        </div>
-      ) : (
-        <div className="px-3 py-2 w-[180px]" />
-      )}
+      {/* Approval Level column (desktop only) */}
+      <div className="hidden md:block shrink-0">
+        {editMode ? (
+          <ApprovalLevelDropdown
+            value={policy.approvalLevel}
+            onChange={handleChange}
+            triggerClassName="w-[180px]"
+            contentClassName="w-[180px]"
+          />
+        ) : (
+          <div className="px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] w-[180px]">
+            {policy.approvalLevel && (
+              <span className="text-h4 text-ods-text-primary">
+                {getApprovalLevelLabel(policy.approvalLevel)}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
     </div>
   )
 }
@@ -97,7 +145,7 @@ const PolicyRow: React.FC<{
 const useAnimatedHeight = (isExpanded: boolean) => {
   const [height, setHeight] = useState<number | 'auto'>(0);
   const contentRef = useRef<HTMLDivElement>(null);
-  
+
   useEffect(() => {
     if (contentRef.current) {
       const contentHeight = contentRef.current.scrollHeight;
@@ -111,93 +159,73 @@ const useAnimatedHeight = (isExpanded: boolean) => {
 const CategorySection: React.FC<{
   category: PermissionCategory;
   editMode: boolean;
-  onCategoryToggle: (categoryId: string) => void;
-  onGlobalPermissionChange: (categoryId: string, level: ApprovalLevel | undefined) => void;
+  isExpanded: boolean;
+  /** Last bulk level applied to this category (display-only, edit mode). */
+  bulkLevel: ApprovalLevel | undefined;
+  onToggle: (categoryId: string) => void;
+  onBulkLevelChange: (categoryId: string, level: ApprovalLevel | undefined) => void;
   onPolicyPermissionChange: (categoryId: string, policyId: string, level: ApprovalLevel) => void;
-}> = ({ 
-  category, 
-  editMode, 
-  onCategoryToggle, 
-  onGlobalPermissionChange, 
-  onPolicyPermissionChange 
+}> = ({
+  category,
+  editMode,
+  isExpanded,
+  bulkLevel,
+  onToggle,
+  onBulkLevelChange,
+  onPolicyPermissionChange
 }) => {
-  const { contentRef, height } = useAnimatedHeight(category.isExpanded);
-  
+  const { contentRef, height } = useAnimatedHeight(isExpanded);
+  const handleBulkChange = (level: ApprovalLevel | undefined) => onBulkLevelChange(category.id, level)
+
   return (
     <>
       {/* Category Header */}
-      <div 
-        className="bg-ods-card border-t border-ods-border flex gap-4 items-center pl-4 pr-2 py-3 cursor-pointer hover:bg-ods-bg-hover transition-colors"
-        onClick={() => onCategoryToggle(category.id)}
+      <div
+        className="bg-ods-card border-t first:border-t-0 border-ods-border flex gap-[var(--spacing-system-m)] items-center pl-[var(--spacing-system-m)] pr-[var(--spacing-system-xsf)] py-[var(--spacing-system-s)] cursor-pointer hover:bg-ods-bg-hover transition-colors"
+        onClick={() => onToggle(category.id)}
       >
         {/* Category Icon */}
-        <div className="bg-ods-bg border border-ods-border rounded-md flex items-center justify-center w-8 h-8">
+        <div className="bg-ods-bg border border-ods-border rounded-md flex items-center justify-center w-8 h-8 shrink-0">
           <div className="text-ods-text-secondary">
-            {category.icon}
+            {category.icon ?? <Shield className="w-4 h-4" />}
           </div>
         </div>
 
-        {/* Category Info */}
-        <div className="flex-1 flex flex-col">
-          <p className="md:!text-sm font-medium text-ods-text-primary">
+        {/* Category Info — on mobile the bulk dropdown stacks below the count */}
+        <div className="flex-1 flex flex-col min-w-0">
+          <p className="text-h4 text-ods-text-primary truncate" title={category.name}>
             {category.name}
           </p>
           <p className="text-h6 text-ods-text-secondary">
-            {category.configurationsCount} Configurations
+            {category.policies.length} Configurations
           </p>
+          {editMode && (
+            <div className="md:hidden mt-[var(--spacing-system-xsf)]" onClick={(e) => e.stopPropagation()}>
+              <ApprovalLevelDropdown
+                value={bulkLevel}
+                onChange={handleBulkChange}
+                allowClear
+                triggerClassName="w-full"
+                contentClassName="w-[256px]"
+              />
+            </div>
+          )}
         </div>
 
-        {/* Global Permission Dropdown */}
+        {/* Global Permission column (desktop only) */}
         {editMode ? (
-          <div onClick={(e) => e.stopPropagation()}>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="outline"
-                  rightIcon={<ChevronDown className="h-6 w-6 text-ods-text-secondary" />}
-                  className="md:!text-sm bg-ods-card border border-ods-border rounded-md flex gap-2 items-center justify-between !px-2 py-2 w-[256px] hover:bg-ods-bg-hover transition-colors h-auto"
-                >
-                  <span className={cn(
-                    "md:!text-sm font-medium",
-                    category.globalPermission 
-                      ? "text-ods-text-primary" 
-                      : "text-ods-text-secondary"
-                  )}>
-                    {getApprovalLevelLabel(category.globalPermission, editMode)}
-                  </span>
-                </Button>
-              </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-[256px]">
-              <DropdownMenuItem
-                onClick={() => onGlobalPermissionChange(category.id, undefined)}
-                className="md:!text-sm"
-              >
-                Clear Global Permission
-              </DropdownMenuItem>
-              {approvalLevelOptions.map(option => (
-                <DropdownMenuItem
-                  key={option.value}
-                  onClick={() => onGlobalPermissionChange(category.id, option.value)}
-                  className="md:!text-sm"
-                >
-                  {option.label}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
-          </div>
-        ) : category.globalPermission ? (
-          <div 
-            className="px-3 py-2 w-[256px]"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <span className="md:!text-sm font-medium text-ods-text-primary">
-              {getApprovalLevelLabel(category.globalPermission, editMode)}
-            </span>
+          <div className="hidden md:block shrink-0" onClick={(e) => e.stopPropagation()}>
+            <ApprovalLevelDropdown
+              value={bulkLevel}
+              onChange={handleBulkChange}
+              allowClear
+              triggerClassName="w-[256px]"
+              contentClassName="w-[256px]"
+            />
           </div>
         ) : (
-          <div 
-            className="px-3 py-2 w-[256px]" 
+          <div
+            className="hidden md:block px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] w-[256px] shrink-0"
             onClick={(e) => e.stopPropagation()}
           />
         )}
@@ -208,32 +236,32 @@ const CategorySection: React.FC<{
           variant="transparent"
           onClick={(e) => {
             e.stopPropagation();
-            onCategoryToggle(category.id);
+            onToggle(category.id);
           }}
-          leftIcon={<ChevronDown 
+          leftIcon={<ChevronDown
             className={cn(
               "h-6 w-6 text-ods-text-primary transition-transform duration-300",
-              category.isExpanded && "rotate-180"
-            )} 
+              isExpanded && "rotate-180"
+            )}
           />}
-          className="rounded-md h-auto w-auto"
-          aria-label={category.isExpanded ? "Collapse" : "Expand"}
+          className="rounded-md h-auto w-auto shrink-0"
+          aria-label={isExpanded ? "Collapse" : "Expand"}
         />
       </div>
 
       {/* Policies List */}
-      <div 
+      <div
         ref={contentRef}
-        style={{ 
+        style={{
           height: height === 'auto' ? 'auto' : `${height}px`,
           transition: 'height 300ms ease-in-out, opacity 300ms ease-in-out'
         }}
         className={cn(
           "overflow-hidden",
-          category.isExpanded ? "opacity-100" : "opacity-0"
+          isExpanded ? "opacity-100" : "opacity-0"
         )}
       >
-        <div className="px-4 pb-4 pt-0">
+        <div className="px-[var(--spacing-system-mf)] pb-[var(--spacing-system-mf)] pt-0">
           <div className="border border-ods-border rounded-md overflow-hidden">
             {category.policies.map((policy) => (
               <PolicyRow
@@ -251,14 +279,47 @@ const CategorySection: React.FC<{
   )
 }
 
+/**
+ * Grouped list of permission categories with per-policy approval dropdowns.
+ * Presentation state — which categories are expanded and the last bulk level
+ * picked per category — lives inside the panel, so callers pass pure data and
+ * background data refreshes never collapse the user's view. Bulk selections
+ * reset when `editMode` changes.
+ *
+ * Responsive: below `md` the approval level / dropdowns stack inside the text
+ * column (per the ODS mobile design); at `md+` they render as fixed-width
+ * right-hand columns.
+ */
 export const PolicyConfigurationPanel: React.FC<PolicyConfigurationPanelProps> = ({
   categories,
   editMode,
-  onCategoryToggle,
-  onGlobalPermissionChange,
   onPolicyPermissionChange,
+  onCategoryPermissionChange,
   className
 }) => {
+  const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(new Set())
+  const [bulkLevels, setBulkLevels] = useState<Record<string, ApprovalLevel | undefined>>({})
+
+  useEffect(() => {
+    setBulkLevels({})
+  }, [editMode])
+
+  const handleToggle = (categoryId: string) => {
+    setExpandedIds(prev => {
+      const next = new Set(prev)
+      if (next.has(categoryId)) next.delete(categoryId)
+      else next.add(categoryId)
+      return next
+    })
+  }
+
+  const handleBulkLevelChange = (categoryId: string, level: ApprovalLevel | undefined) => {
+    setBulkLevels(prev => ({ ...prev, [categoryId]: level }))
+    if (level) {
+      onCategoryPermissionChange(categoryId, level)
+    }
+  }
+
   return (
     <div className={cn(
       "bg-ods-card border border-ods-border rounded-md overflow-hidden",
@@ -269,8 +330,10 @@ export const PolicyConfigurationPanel: React.FC<PolicyConfigurationPanelProps> =
           key={category.id}
           category={category}
           editMode={editMode}
-          onCategoryToggle={onCategoryToggle}
-          onGlobalPermissionChange={onGlobalPermissionChange}
+          isExpanded={expandedIds.has(category.id)}
+          bulkLevel={bulkLevels[category.id]}
+          onToggle={handleToggle}
+          onBulkLevelChange={handleBulkLevelChange}
           onPolicyPermissionChange={onPolicyPermissionChange}
         />
       ))}
@@ -278,4 +341,4 @@ export const PolicyConfigurationPanel: React.FC<PolicyConfigurationPanelProps> =
   )
 }
 
-PolicyConfigurationPanel.displayName = 'PolicyConfigurationPanel'
+PolicyConfigurationPanel.displayName = 'PolicyConfigurationPanel'

package/src/stories/PolicyConfigurationPanel.stories.tsx

@@ -0,0 +1,254 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { useState } from 'react'
+import { fn } from 'storybook/test'
+import { PolicyConfigurationPanel } from '../components/features/policy-configuration-panel'
+import type { ApprovalLevel, PermissionCategory } from '../types/permissions'
+
+const meta = {
+  title: 'Features/PolicyConfigurationPanel',
+  component: PolicyConfigurationPanel,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Grouped list of AI guardrails permission categories with per-policy approval dropdowns. ' +
+          'Categories are pure data — the panel owns its presentation state internally: which categories ' +
+          'are expanded and the last bulk level picked per category (bulk selections reset when `editMode` ' +
+          'changes). In edit mode each category header offers a bulk "global permission" dropdown that ' +
+          'fires `onCategoryPermissionChange`; each policy row fires `onPolicyPermissionChange`. ' +
+          'Used by the OpenFrame AI Settings → Guardrails tab.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    editMode: { control: 'boolean' },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: '960px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof PolicyConfigurationPanel>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const deviceCategories: PermissionCategory[] = [
+  {
+    id: 'device-actions',
+    name: 'Device Actions',
+    policies: [
+      {
+        id: 'OPENFRAME_RMM:DEVICE_REBOOT',
+        naturalKey: 'OPENFRAME_RMM:DEVICE_REBOOT',
+        name: 'Reboot Device',
+        commandPattern: 'device.reboot --id {deviceId}',
+        toolName: 'OPENFRAME_RMM',
+        approvalLevel: 'ASK_USER',
+      },
+      {
+        id: 'FLEET_MDM:DEVICE_LOCK',
+        naturalKey: 'FLEET_MDM:DEVICE_LOCK',
+        name: 'Lock Device',
+        commandPattern: 'fleet mdm lock --host {hostId}',
+        toolName: 'FLEET_MDM',
+        approvalLevel: 'ASK_TECHNICIAN',
+      },
+      {
+        id: 'FLEET_MDM:DEVICE_WIPE',
+        naturalKey: 'FLEET_MDM:DEVICE_WIPE',
+        name: 'Wipe Device',
+        commandPattern: 'fleet mdm wipe --host {hostId}',
+        toolName: 'FLEET_MDM',
+        approvalLevel: 'DENY',
+      },
+    ],
+  },
+  {
+    id: 'remote-access',
+    name: 'Remote Access',
+    policies: [
+      {
+        id: 'MESHCENTRAL:REMOTE_SHELL',
+        naturalKey: 'MESHCENTRAL:REMOTE_SHELL',
+        name: 'Open Remote Shell',
+        commandPattern: 'mesh.shell --node {nodeId}',
+        toolName: 'MESHCENTRAL',
+        approvalLevel: 'ASK_TECHNICIAN',
+      },
+      {
+        id: 'MESHCENTRAL:FILE_TRANSFER',
+        naturalKey: 'MESHCENTRAL:FILE_TRANSFER',
+        name: 'Transfer Files',
+        commandPattern: 'mesh.files --node {nodeId} --upload|--download',
+        toolName: 'MESHCENTRAL',
+        approvalLevel: 'DENY',
+      },
+    ],
+  },
+  {
+    id: 'scripts-automation',
+    name: 'Scripts & Automation',
+    policies: [
+      {
+        id: 'OPENFRAME_RMM:RUN_POWERSHELL',
+        naturalKey: 'OPENFRAME_RMM:RUN_POWERSHELL',
+        name: 'Run PowerShell Script',
+        commandPattern: 'powershell -ExecutionPolicy Bypass -File {script}',
+        toolName: 'OPENFRAME_RMM',
+        approvalLevel: 'ASK_USER',
+      },
+      {
+        id: 'OPENFRAME_RMM:RUN_BASH',
+        naturalKey: 'OPENFRAME_RMM:RUN_BASH',
+        name: 'Run Bash Script',
+        commandPattern: 'bash -c {script}',
+        toolName: 'OPENFRAME_RMM',
+        approvalLevel: 'ASK_USER',
+      },
+    ],
+  },
+]
+
+const dataCategories: PermissionCategory[] = [
+  {
+    id: 'data-read',
+    name: 'Read Access',
+    policies: [
+      {
+        id: 'OSQUERY:QUERY_INVENTORY',
+        naturalKey: 'OSQUERY:QUERY_INVENTORY',
+        name: 'Query Device Inventory',
+        commandPattern: 'SELECT * FROM system_info;',
+        toolName: 'OSQUERY',
+        approvalLevel: 'ALLOW',
+      },
+      {
+        id: 'SYSTEM:READ_LOGS',
+        naturalKey: 'SYSTEM:READ_LOGS',
+        name: 'Read System Logs',
+        commandPattern: 'logs.read --stream {stream} --since {ts}',
+        toolName: 'SYSTEM',
+        approvalLevel: 'ALLOW',
+      },
+    ],
+  },
+]
+
+/** Applies a level to one policy; mirrors what the guardrails editor hook does. */
+const applyPolicyLevel = (
+  categories: PermissionCategory[],
+  categoryId: string,
+  policyId: string,
+  level: ApprovalLevel,
+): PermissionCategory[] =>
+  categories.map(category =>
+    category.id !== categoryId
+      ? category
+      : {
+          ...category,
+          policies: category.policies.map(policy =>
+            policy.id === policyId ? { ...policy, approvalLevel: level } : policy,
+          ),
+        },
+  )
+
+/** Bulk-applies a level to every policy in a category. */
+const applyCategoryLevel = (
+  categories: PermissionCategory[],
+  categoryId: string,
+  level: ApprovalLevel,
+): PermissionCategory[] =>
+  categories.map(category =>
+    category.id !== categoryId
+      ? category
+      : { ...category, policies: category.policies.map(policy => ({ ...policy, approvalLevel: level })) },
+  )
+
+/** Read-only view: approval levels render as text, no bulk dropdowns. */
+export const ReadOnly: Story = {
+  args: {
+    categories: deviceCategories,
+    editMode: false,
+    onPolicyPermissionChange: fn(),
+    onCategoryPermissionChange: fn(),
+  },
+}
+
+/**
+ * Interactive edit mode: per-policy dropdowns plus a bulk "global permission"
+ * dropdown per category header. The wrapper applies changes back into the
+ * category data the same way the OpenFrame guardrails editor does.
+ */
+export const EditMode: Story = {
+  args: {
+    categories: deviceCategories,
+    editMode: true,
+    onPolicyPermissionChange: fn(),
+    onCategoryPermissionChange: fn(),
+  },
+  render: args => {
+    const [categories, setCategories] = useState(args.categories)
+
+    return (
+      <PolicyConfigurationPanel
+        {...args}
+        categories={categories}
+        onPolicyPermissionChange={(categoryId, policyId, level) => {
+          args.onPolicyPermissionChange(categoryId, policyId, level)
+          setCategories(prev => applyPolicyLevel(prev, categoryId, policyId, level))
+        }}
+        onCategoryPermissionChange={(categoryId, level) => {
+          args.onCategoryPermissionChange(categoryId, level)
+          setCategories(prev => applyCategoryLevel(prev, categoryId, level))
+        }}
+      />
+    )
+  },
+}
+
+/**
+ * How the guardrails tab composes the panel: one panel per policy group, each
+ * under a small secondary heading.
+ */
+export const GroupedPolicySections: Story = {
+  args: {
+    categories: deviceCategories,
+    editMode: true,
+    onPolicyPermissionChange: fn(),
+    onCategoryPermissionChange: fn(),
+  },
+  render: args => {
+    const [groups, setGroups] = useState<Record<string, PermissionCategory[]>>({
+      'Device Management': deviceCategories,
+      'Data Access': dataCategories,
+    })
+
+    const updateGroup = (groupName: string, next: (categories: PermissionCategory[]) => PermissionCategory[]) =>
+      setGroups(prev => ({ ...prev, [groupName]: next(prev[groupName]) }))
+
+    return (
+      <div className="flex flex-col gap-[var(--spacing-system-l)]">
+        {Object.entries(groups).map(([groupName, categories]) => (
+          <div key={groupName} className="flex flex-col gap-[var(--spacing-system-xxs)]">
+            <p className="text-h5 text-ods-text-secondary truncate">{groupName}</p>
+            <PolicyConfigurationPanel
+              categories={categories}
+              editMode={args.editMode}
+              onPolicyPermissionChange={(categoryId, policyId, level) =>
+                updateGroup(groupName, categories => applyPolicyLevel(categories, categoryId, policyId, level))
+              }
+              onCategoryPermissionChange={(categoryId, level) =>
+                updateGroup(groupName, categories => applyCategoryLevel(categories, categoryId, level))
+              }
+            />
+          </div>
+        ))}
+      </div>
+    )
+  },
+}