@flamingo-stack/openframe-frontend-core 0.0.442-snapshot.20260717134227 → 0.0.442

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.442-snapshot.20260717134227",
+  "version": "0.0.442",
   "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, Shield } from 'lucide-react'
+import { ChevronDown } from 'lucide-react'
 import { cn } from '../../utils/cn'
 import { ToolIcon } from '../tool-icon'
 import { Button } from '../ui/button'
@@ -34,110 +34,62 @@ 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 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)]">
+    <div className="bg-ods-bg border-b border-ods-border flex gap-4 items-center px-4 py-3">
       {/* Tool Icon */}
-      <div className="bg-ods-bg border border-ods-border rounded-md flex items-center justify-center w-8 h-8 shrink-0">
+      <div className="bg-ods-bg border border-ods-border rounded-md flex items-center justify-center w-8 h-8">
         <ToolIcon toolType={policy.toolName} size={16} />
       </div>
 
-      {/* Policy Info — on mobile the approval level stacks below the pattern */}
+      {/* Policy Info */}
       <div className="flex-1 flex flex-col min-w-0">
-        <p className="text-h4 text-ods-text-primary truncate" title={policy.name}>
+        <p className="text-h6 text-ods-text-primary truncate" title={policy.name}>
           {policy.name}
         </p>
-        <p
-          className="text-h6 text-ods-text-secondary truncate md:whitespace-normal md:break-all"
-          title={policy.commandPattern}
-        >
+        <p className="text-code text-ods-text-secondary break-all">
           {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 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>
+      {/* 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]" />
+      )}
     </div>
   )
 }
@@ -145,7 +97,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;
@@ -159,73 +111,93 @@ const useAnimatedHeight = (isExpanded: boolean) => {
 const CategorySection: React.FC<{
   category: PermissionCategory;
   editMode: boolean;
-  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;
+  onCategoryToggle: (categoryId: string) => void;
+  onGlobalPermissionChange: (categoryId: string, level: ApprovalLevel | undefined) => void;
   onPolicyPermissionChange: (categoryId: string, policyId: string, level: ApprovalLevel) => void;
-}> = ({
-  category,
-  editMode,
-  isExpanded,
-  bulkLevel,
-  onToggle,
-  onBulkLevelChange,
-  onPolicyPermissionChange
+}> = ({ 
+  category, 
+  editMode, 
+  onCategoryToggle, 
+  onGlobalPermissionChange, 
+  onPolicyPermissionChange 
 }) => {
-  const { contentRef, height } = useAnimatedHeight(isExpanded);
-  const handleBulkChange = (level: ApprovalLevel | undefined) => onBulkLevelChange(category.id, level)
-
+  const { contentRef, height } = useAnimatedHeight(category.isExpanded);
+  
   return (
     <>
       {/* Category Header */}
-      <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)}
+      <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)}
       >
         {/* Category Icon */}
-        <div className="bg-ods-bg border border-ods-border rounded-md flex items-center justify-center w-8 h-8 shrink-0">
+        <div className="bg-ods-bg border border-ods-border rounded-md flex items-center justify-center w-8 h-8">
           <div className="text-ods-text-secondary">
-            {category.icon ?? <Shield className="w-4 h-4" />}
+            {category.icon}
           </div>
         </div>
 
-        {/* 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 Info */}
+        <div className="flex-1 flex flex-col">
+          <p className="md:!text-sm font-medium text-ods-text-primary">
             {category.name}
           </p>
           <p className="text-h6 text-ods-text-secondary">
-            {category.policies.length} Configurations
+            {category.configurationsCount} 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 column (desktop only) */}
+        {/* Global Permission Dropdown */}
         {editMode ? (
-          <div className="hidden md:block shrink-0" onClick={(e) => e.stopPropagation()}>
-            <ApprovalLevelDropdown
-              value={bulkLevel}
-              onChange={handleBulkChange}
-              allowClear
-              triggerClassName="w-[256px]"
-              contentClassName="w-[256px]"
-            />
+          <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>
         ) : (
-          <div
-            className="hidden md:block px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] w-[256px] shrink-0"
+          <div 
+            className="px-3 py-2 w-[256px]" 
             onClick={(e) => e.stopPropagation()}
           />
         )}
@@ -236,32 +208,32 @@ const CategorySection: React.FC<{
           variant="transparent"
           onClick={(e) => {
             e.stopPropagation();
-            onToggle(category.id);
+            onCategoryToggle(category.id);
           }}
-          leftIcon={<ChevronDown
+          leftIcon={<ChevronDown 
             className={cn(
               "h-6 w-6 text-ods-text-primary transition-transform duration-300",
-              isExpanded && "rotate-180"
-            )}
+              category.isExpanded && "rotate-180"
+            )} 
           />}
-          className="rounded-md h-auto w-auto shrink-0"
-          aria-label={isExpanded ? "Collapse" : "Expand"}
+          className="rounded-md h-auto w-auto"
+          aria-label={category.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",
-          isExpanded ? "opacity-100" : "opacity-0"
+          category.isExpanded ? "opacity-100" : "opacity-0"
         )}
       >
-        <div className="px-[var(--spacing-system-mf)] pb-[var(--spacing-system-mf)] pt-0">
+        <div className="px-4 pb-4 pt-0">
           <div className="border border-ods-border rounded-md overflow-hidden">
             {category.policies.map((policy) => (
               <PolicyRow
@@ -279,47 +251,14 @@ 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",
@@ -330,10 +269,8 @@ export const PolicyConfigurationPanel: React.FC<PolicyConfigurationPanelProps> =
           key={category.id}
           category={category}
           editMode={editMode}
-          isExpanded={expandedIds.has(category.id)}
-          bulkLevel={bulkLevels[category.id]}
-          onToggle={handleToggle}
-          onBulkLevelChange={handleBulkLevelChange}
+          onCategoryToggle={onCategoryToggle}
+          onGlobalPermissionChange={onGlobalPermissionChange}
           onPolicyPermissionChange={onPolicyPermissionChange}
         />
       ))}
@@ -341,4 +278,4 @@ export const PolicyConfigurationPanel: React.FC<PolicyConfigurationPanelProps> =
   )
 }
 
-PolicyConfigurationPanel.displayName = 'PolicyConfigurationPanel'
+PolicyConfigurationPanel.displayName = 'PolicyConfigurationPanel'

package/src/types/permissions.ts

@@ -11,24 +11,21 @@ export interface PermissionPolicy {
   approvalLevel: ApprovalLevel;
 }
 
-/**
- * Pure data describing one permission category. Presentation state (expansion,
- * bulk-selection display) is owned by PolicyConfigurationPanel itself.
- */
 export interface PermissionCategory {
   id: string;
   name: string;
-  /** Optional leading icon; the panel falls back to a shield. */
-  icon?: React.ReactNode;
+  icon: React.ReactNode;
+  configurationsCount: number;
+  globalPermission?: ApprovalLevel;
+  isExpanded: boolean;
   policies: PermissionPolicy[];
 }
 
 export interface PolicyConfigurationPanelProps {
   categories: PermissionCategory[];
   editMode: boolean;
-  /** Change a single policy's approval level. `policyId` is the policy's `id`. */
+  onCategoryToggle: (categoryId: string) => void;
+  onGlobalPermissionChange: (categoryId: string, level: ApprovalLevel | undefined) => void;
   onPolicyPermissionChange: (categoryId: string, policyId: string, level: ApprovalLevel) => void;
-  /** Bulk-apply an approval level to every policy in a category. */
-  onCategoryPermissionChange: (categoryId: string, level: ApprovalLevel) => void;
   className?: string;
-}
+}

package/src/utils/__tests__/embed-authed-fetch.test.ts

@@ -166,42 +166,3 @@ describe('embedAuthedFetch 401 self-heal (adapter.refresh)', () => {
     expect(fetchSpy).toHaveBeenCalledTimes(1)
   })
 })
-
-describe('embedAuthedFetch adapter.allowedOrigins (native-shell cross-origin sanction)', () => {
-  const originalFetch = globalThis.fetch
-
-  beforeEach(() => {
-    globalThis.fetch = vi.fn(async () => new Response('ok')) as typeof fetch
-    // Production mode so these tests exercise the real guard, not the
-    // dev-mode warn-and-allow hatch.
-    vi.stubEnv('NODE_ENV', 'production')
-  })
-  afterEach(() => {
-    globalThis.fetch = originalFetch
-    setEmbedAuthAdapter(null)
-    vi.unstubAllEnvs()
-    vi.restoreAllMocks()
-  })
-
-  it('allows a cross-origin URL whose exact origin the adapter sanctions', async () => {
-    setEmbedAuthAdapter({ allowedOrigins: ['https://gateway.example'] })
-    await expect(embedAuthedFetch('https://gateway.example/content/api/faqs')).resolves.toBeDefined()
-  })
-
-  it('still rejects origins outside the allowlist', () => {
-    setEmbedAuthAdapter({ allowedOrigins: ['https://gateway.example'] })
-    expect(() => embedAuthedFetch('https://evil.com/x')).toThrow(/cross-origin/i)
-  })
-
-  it('does not treat an allowlisted origin as a prefix (suffix-domain spoof rejected)', () => {
-    setEmbedAuthAdapter({ allowedOrigins: ['https://gateway.example'] })
-    expect(() => embedAuthedFetch('https://gateway.example.evil.com/x')).toThrow(/cross-origin/i)
-  })
-
-  it('cannot allowlist non-http(s) schemes (protocol check runs first)', () => {
-    // `javascript:` URLs have origin 'null'; even a (misguided) 'null' entry
-    // must not get past the protocol gate.
-    setEmbedAuthAdapter({ allowedOrigins: ['null'] })
-    expect(() => embedAuthedFetch('javascript:alert(1)')).toThrow(/non-http\(s\)/i)
-  })
-})

package/src/utils/embed-authed-fetch.ts

@@ -86,19 +86,6 @@ export interface EmbedAuthAdapter {
    * host's own auth layer, not to this fetch wrapper.
    */
   refresh?: () => Promise<boolean>
-  /**
-   * Exact extra origins (`scheme://host[:port]`, as produced by `URL.origin`)
-   * the same-origin guard additionally accepts. The guard normally rejects
-   * every cross-origin URL in production — but native-shell hosts serve the
-   * page from a local pseudo-origin (`capacitor://localhost`,
-   * `tauri://localhost`) with NO server behind it, so the gateway their
-   * bearer already belongs to is unavoidably cross-origin. Listing it here
-   * is the host's explicit sanction to send the adapter's credentials there.
-   * Compared AFTER the http(s)-protocol check, so non-http(s) schemes can
-   * never be allowlisted. Omit (or leave empty) everywhere else — same-origin
-   * remains the rule, this is the narrow exception.
-   */
-  allowedOrigins?: string[]
 }
 
 /**
@@ -171,12 +158,9 @@ export function hasEmbedAuthAdapter(): boolean {
  *
  * **Cross-origin defense:** the wrapper assumes a same-origin `/api/…`
  * relative URL. Absolute URLs are accepted only when their origin matches
- * the current window's origin — or appears in the registered adapter's
- * `allowedOrigins` (the native-shell hatch; see that field's doc) — and
- * cross-origin URLs otherwise throw before the bearer leaves the page.
- * This is a defense-in-depth guard for future call sites — outside the
- * allowlisted-shell case there is no legitimate cross-origin use of this
- * fetch wrapper.
+ * the current window's origin; cross-origin URLs throw before the bearer
+ * leaves the page. This is a defense-in-depth guard for future call sites
+ * — there is no legitimate cross-origin use of this fetch wrapper.
  *
  * **401 self-heal:** when a registered adapter supplies `refresh`, a `401`
  * response triggers a single token refresh + retry of the same request
@@ -368,14 +352,6 @@ function assertSameOrigin(url: string): void {
     )
   }
   if (target.origin !== pageOrigin) {
-    // Host-sanctioned cross-origin target (`EmbedAuthAdapter.allowedOrigins`).
-    // Native shells serve the page from a local pseudo-origin with no server
-    // behind it, so their gateway — the same backend the host already trusts
-    // with this bearer — is unavoidably cross-origin. Exact `URL.origin`
-    // match, and only reachable for http(s) targets (checked above).
-    if (getRegisteredAuthAdapter()?.allowedOrigins?.includes(target.origin)) {
-      return
-    }
     // Dev-mode escape hatch — embedded apps (e.g. openframe-frontend)
     // run on a different origin from their gateway during local dev,
     // and forcing a Next.js `rewrites()` workaround is more error-prone