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

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>
+    )
+  },
+}

package/src/types/permissions.ts

@@ -11,21 +11,24 @@ 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;
-  icon: React.ReactNode;
-  configurationsCount: number;
-  globalPermission?: ApprovalLevel;
-  isExpanded: boolean;
+  /** Optional leading icon; the panel falls back to a shield. */
+  icon?: React.ReactNode;
   policies: PermissionPolicy[];
 }
 
 export interface PolicyConfigurationPanelProps {
   categories: PermissionCategory[];
   editMode: boolean;
-  onCategoryToggle: (categoryId: string) => void;
-  onGlobalPermissionChange: (categoryId: string, level: ApprovalLevel | undefined) => void;
+  /** Change a single policy's approval level. `policyId` is the policy's `id`. */
   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,3 +166,42 @@ 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,6 +86,19 @@ 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[]
 }
 
 /**
@@ -158,9 +171,12 @@ 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; 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.
+ * 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.
  *
  * **401 self-heal:** when a registered adapter supplies `refresh`, a `401`
  * response triggers a single token refresh + retry of the same request
@@ -352,6 +368,14 @@ 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