@asteby/metacore-runtime-react 18.13.2 → 18.14.0

package/src/__tests__/permissions-context.test.tsx

@@ -0,0 +1,102 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+
+// Sin `globals: true` en vitest, RTL no auto-limpia entre tests.
+afterEach(cleanup)
+import {
+    PermissionsProvider,
+    useCan,
+    usePermissionsActive,
+    makeCan,
+    capabilityForActionKey,
+    modelCapability,
+} from '../permissions-context'
+
+function Probe({ capability }: { capability: string }) {
+    const can = useCan()
+    return <span data-testid="probe">{can(capability) ? 'allowed' : 'denied'}</span>
+}
+
+function ActiveProbe() {
+    const active = usePermissionsActive()
+    return <span data-testid="active">{active ? 'yes' : 'no'}</span>
+}
+
+describe('makeCan', () => {
+    it('isAdmin permite todo', () => {
+        const can = makeCan([], true)
+        expect(can('pos_orders.create')).toBe(true)
+        expect(can('cualquier.cosa')).toBe(true)
+    })
+
+    it('capability exacta en la lista → true; ausente → false', () => {
+        const can = makeCan(['pos_orders.index', 'general.work_after_hours'], false)
+        expect(can('pos_orders.index')).toBe(true)
+        expect(can('general.work_after_hours')).toBe(true)
+        expect(can('pos_orders.create')).toBe(false)
+    })
+
+    it('wildcard "*" permite todo', () => {
+        const can = makeCan(['*'], false)
+        expect(can('pos_orders.delete')).toBe(true)
+        expect(can('lo.que.sea')).toBe(true)
+    })
+})
+
+describe('useCan', () => {
+    it('sin provider → siempre true (comportamiento legacy, nada se oculta)', () => {
+        render(<Probe capability="pos_orders.create" />)
+        expect(screen.getByTestId('probe').textContent).toBe('allowed')
+    })
+
+    it('con provider no-admin: exacta permitida, resto denegado', () => {
+        render(
+            <PermissionsProvider permissions={['pos_orders.index']} isAdmin={false}>
+                <Probe capability="pos_orders.index" />
+            </PermissionsProvider>,
+        )
+        expect(screen.getByTestId('probe').textContent).toBe('allowed')
+
+        render(
+            <PermissionsProvider permissions={['pos_orders.index']} isAdmin={false}>
+                <Probe capability="pos_orders.create" />
+            </PermissionsProvider>,
+        )
+        expect(screen.getAllByTestId('probe')[1].textContent).toBe('denied')
+    })
+
+    it('con provider isAdmin → todo permitido', () => {
+        render(
+            <PermissionsProvider permissions={[]} isAdmin={true}>
+                <Probe capability="pos_orders.delete" />
+            </PermissionsProvider>,
+        )
+        expect(screen.getByTestId('probe').textContent).toBe('allowed')
+    })
+
+    it('usePermissionsActive refleja la presencia del provider', () => {
+        render(<ActiveProbe />)
+        expect(screen.getByTestId('active').textContent).toBe('no')
+        render(
+            <PermissionsProvider permissions={[]} isAdmin={false}>
+                <ActiveProbe />
+            </PermissionsProvider>,
+        )
+        expect(screen.getAllByTestId('active')[1].textContent).toBe('yes')
+    })
+})
+
+describe('capability mapping', () => {
+    it('view→index, edit→update, resto verbatim', () => {
+        expect(capabilityForActionKey('view')).toBe('index')
+        expect(capabilityForActionKey('edit')).toBe('update')
+        expect(capabilityForActionKey('delete')).toBe('delete')
+        expect(capabilityForActionKey('pagar')).toBe('pagar')
+    })
+
+    it('modelCapability lowercasea el modelo', () => {
+        expect(modelCapability('PosOrders', 'create')).toBe('posorders.create')
+        expect(modelCapability('pos_orders', 'edit')).toBe('pos_orders.update')
+    })
+})

package/src/__tests__/permissions-manager.test.tsx

@@ -0,0 +1,172 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+// Sin `globals: true` en vitest, RTL no auto-limpia entre tests.
+afterEach(cleanup)
+import {
+    PermissionsManager,
+    moduleActionCapability,
+    moduleCapabilities,
+    grantedCountForModule,
+    capabilitySetsEqual,
+    type PermissionsCatalog,
+    type RoleDef,
+} from '../permissions-manager'
+
+const catalog: PermissionsCatalog = {
+    modules: [
+        {
+            key: 'pos_orders',
+            label: 'Pedidos POS',
+            addon_key: 'pos',
+            addon_label: 'Punto de venta',
+            actions: [
+                { key: 'index', label: 'Listar', icon: 'List', kind: 'crud' },
+                { key: 'create', label: 'Crear', icon: 'Plus', kind: 'crud' },
+                { key: 'pagar', label: 'Pagar', icon: 'CreditCard', kind: 'custom' },
+            ],
+        },
+    ],
+    general: [
+        {
+            key: 'general.work_after_hours',
+            label: 'Trabajar fuera de horario',
+            description: 'Permite operar fuera del horario configurado.',
+        },
+    ],
+}
+
+const roles: RoleDef[] = [{ id: 'r1', name: 'cashier', label: 'Cajero', color: '#22c55e' }]
+
+function makeProps(overrides: Partial<Parameters<typeof PermissionsManager>[0]> = {}) {
+    return {
+        loadModules: vi.fn(async () => catalog),
+        loadRoles: vi.fn(async () => roles),
+        loadRolePermissions: vi.fn(async () => ['pos_orders.index']),
+        syncRolePermissions: vi.fn(async () => {}),
+        ...overrides,
+    }
+}
+
+describe('helpers puros', () => {
+    it('moduleActionCapability lowercasea el módulo', () => {
+        expect(moduleActionCapability('Pos_Orders', 'pagar')).toBe('pos_orders.pagar')
+    })
+
+    it('moduleCapabilities y grantedCountForModule', () => {
+        const mod = catalog.modules[0]
+        expect(moduleCapabilities(mod)).toEqual([
+            'pos_orders.index',
+            'pos_orders.create',
+            'pos_orders.pagar',
+        ])
+        expect(grantedCountForModule(new Set(['pos_orders.index', 'otra.cosa']), mod)).toBe(1)
+    })
+
+    it('capabilitySetsEqual', () => {
+        expect(capabilitySetsEqual(new Set(['a', 'b']), new Set(['b', 'a']))).toBe(true)
+        expect(capabilitySetsEqual(new Set(['a']), new Set(['a', 'b']))).toBe(false)
+    })
+})
+
+describe('PermissionsManager', () => {
+    it('renderiza catálogo con mocks, auto-selecciona rol y módulo, contador N/M', async () => {
+        const props = makeProps()
+        render(<PermissionsManager {...props} />)
+
+        // Auto-selección: primer rol + primer módulo, grid con las acciones.
+        expect(await screen.findByText('Acciones permitidas')).toBeTruthy()
+        expect(await screen.findByText('Pagar')).toBeTruthy()
+        expect(screen.getByText('1/3')).toBeTruthy()
+        expect(props.loadRolePermissions).toHaveBeenCalledWith('r1')
+
+        // Generales presentes con descripción.
+        expect(screen.getByText('Permisos Generales')).toBeTruthy()
+        expect(screen.getByText('Trabajar fuera de horario')).toBeTruthy()
+    })
+
+    it('marcar una acción + un general y guardar llama sync con el set completo correcto', async () => {
+        const props = makeProps()
+        render(<PermissionsManager {...props} />)
+        await screen.findByText('Pagar')
+
+        fireEvent.click(screen.getByRole('checkbox', { name: /Pagar/ }))
+        fireEvent.click(screen.getByRole('checkbox', { name: /Trabajar fuera de horario/ }))
+
+        // Dirty visible y guardar habilitado.
+        expect(screen.getByText('Cambios sin guardar')).toBeTruthy()
+        fireEvent.click(screen.getByRole('button', { name: /Guardar permisos/ }))
+
+        await waitFor(() =>
+            expect(props.syncRolePermissions).toHaveBeenCalledWith('r1', [
+                'general.work_after_hours',
+                'pos_orders.index',
+                'pos_orders.pagar',
+            ]),
+        )
+        // Tras guardar, baseline = draft → dirty desaparece.
+        await waitFor(() => expect(screen.queryByText('Cambios sin guardar')).toBeNull())
+    })
+
+    it('desmarcar una otorgada también entra al delta', async () => {
+        const props = makeProps()
+        render(<PermissionsManager {...props} />)
+        await screen.findByText('Pagar')
+
+        fireEvent.click(screen.getByRole('checkbox', { name: /Listar/ }))
+        fireEvent.click(screen.getByRole('button', { name: /Guardar permisos/ }))
+        await waitFor(() => expect(props.syncRolePermissions).toHaveBeenCalledWith('r1', []))
+    })
+
+    it('marcar todo / limpiar operan sobre el módulo activo', async () => {
+        const props = makeProps()
+        render(<PermissionsManager {...props} />)
+        await screen.findByText('Pagar')
+
+        fireEvent.click(screen.getByRole('button', { name: /Marcar todo/ }))
+        expect(screen.getByText('3/3')).toBeTruthy()
+
+        fireEvent.click(screen.getByRole('button', { name: /Guardar permisos/ }))
+        await waitFor(() =>
+            expect(props.syncRolePermissions).toHaveBeenCalledWith('r1', [
+                'pos_orders.create',
+                'pos_orders.index',
+                'pos_orders.pagar',
+            ]),
+        )
+
+        fireEvent.click(screen.getByRole('button', { name: /Limpiar/ }))
+        expect(screen.getByText('0/3')).toBeTruthy()
+    })
+
+    it('guardar deshabilitado sin cambios', async () => {
+        const props = makeProps()
+        render(<PermissionsManager {...props} />)
+        await screen.findByText('Pagar')
+        const save = screen.getByRole('button', { name: /Guardar permisos/ }) as HTMLButtonElement
+        expect(save.disabled).toBe(true)
+    })
+
+    it('oculta Nuevo rol / Editar / Eliminar cuando no hay mutators de rol', async () => {
+        const props = makeProps()
+        render(<PermissionsManager {...props} />)
+        await screen.findByText('Pagar')
+        expect(screen.queryByRole('button', { name: /Nuevo rol/ })).toBeNull()
+        expect(screen.queryByRole('button', { name: 'Editar rol' })).toBeNull()
+        expect(screen.queryByRole('button', { name: 'Eliminar rol' })).toBeNull()
+    })
+
+    it('muestra los CRUD de rol cuando los mutators existen', async () => {
+        const props = makeProps({
+            createRole: vi.fn(async () => {}),
+            updateRole: vi.fn(async () => {}),
+            deleteRole: vi.fn(async () => {}),
+        })
+        render(<PermissionsManager {...props} />)
+        await screen.findByText('Pagar')
+        expect(screen.getByRole('button', { name: /Nuevo rol/ })).toBeTruthy()
+        expect(screen.getByRole('button', { name: 'Editar rol' })).toBeTruthy()
+        expect(screen.getByRole('button', { name: 'Eliminar rol' })).toBeTruthy()
+    })
+})

package/src/activity-diff.tsx

@@ -233,17 +233,25 @@ export const ActivityDiff: React.FC<ActivityDiffProps> = ({
                 <p className="text-sm text-muted-foreground italic">{event.summary}</p>
             )}
 
-            {/* Diff table */}
+            {/* Diff table. Created/deleted events carry a single snapshot — no
+                before/after pair — so they collapse to two columns (Campo +
+                Valor); a third placeholder column would force the value cell
+                to wrap onto its own row. Updated keeps Campo/Antes/Después. */}
             {displayedKeys.length > 0 && (
                 <div className="rounded-lg border border-border/60 overflow-hidden text-sm">
                     {/* Column headers */}
-                    <div className="grid grid-cols-[1fr_1fr_1fr] border-b border-border/40 bg-muted/40 px-3 py-1.5 text-xs font-medium text-muted-foreground">
-                        <span>Campo</span>
-                        {!isCreated && <span>{isDeleted ? 'Valor' : 'Antes'}</span>}
-                        {isCreated && <span></span>}
-                        {!isDeleted && <span>{isCreated ? 'Valor' : 'Después'}</span>}
-                        {isDeleted && <span></span>}
-                    </div>
+                    {isCreated || isDeleted ? (
+                        <div className="grid grid-cols-[1fr_2fr] border-b border-border/40 bg-muted/40 px-3 py-1.5 text-xs font-medium text-muted-foreground gap-x-2">
+                            <span>Campo</span>
+                            <span>{isDeleted ? 'Valor anterior' : 'Valor'}</span>
+                        </div>
+                    ) : (
+                        <div className="grid grid-cols-[1fr_1fr_1fr] border-b border-border/40 bg-muted/40 px-3 py-1.5 text-xs font-medium text-muted-foreground gap-x-2">
+                            <span>Campo</span>
+                            <span>Antes</span>
+                            <span>Después</span>
+                        </div>
+                    )}
 
                     {displayedKeys.map((key, idx) => {
                         const col = resolveColumn(key, columns)
@@ -265,14 +273,39 @@ export const ActivityDiff: React.FC<ActivityDiffProps> = ({
                             ? ROW_STYLE.created
                             : isDeleted
                               ? ROW_STYLE.deleted
-                              : isChanged
-                                ? {}
-                                : {}
+                              : {}
+
+                        // Single-snapshot row: label + one value cell, aligned
+                        // with the two-column header above.
+                        if (isCreated || isDeleted) {
+                            return (
+                                <div
+                                    key={key}
+                                    style={rowStyle}
+                                    className={cn(
+                                        'grid grid-cols-[1fr_2fr] items-start px-3 py-2 gap-x-2',
+                                        idx !== displayedKeys.length - 1 && 'border-b border-border/30',
+                                    )}
+                                >
+                                    <span className="text-xs font-medium text-foreground/70 pt-0.5 truncate" title={label}>
+                                        {label}
+                                    </span>
+                                    <span className="min-w-0">
+                                        <ActivityValueRenderer
+                                            value={isDeleted ? fromVal : toVal}
+                                            col={col}
+                                            timeZone={timeZone}
+                                            currency={currency}
+                                            locale={locale}
+                                        />
+                                    </span>
+                                </div>
+                            )
+                        }
 
                         return (
                             <div
                                 key={key}
-                                style={rowStyle}
                                 className={cn(
                                     'grid grid-cols-[1fr_1fr_1fr] items-start px-3 py-2 gap-x-2',
                                     idx !== displayedKeys.length - 1 && 'border-b border-border/30',
@@ -284,40 +317,32 @@ export const ActivityDiff: React.FC<ActivityDiffProps> = ({
                                     {label}
                                 </span>
 
-                                {/* Before value (or value for deleted/created) */}
-                                {!isCreated ? (
-                                    <span className={cn(isDeleted ? 'col-span-2' : '')}>
-                                        <ActivityValueRenderer
-                                            value={isDeleted ? fromVal : fromVal}
-                                            col={col}
-                                            timeZone={timeZone}
-                                            currency={currency}
-                                            locale={locale}
-                                        />
-                                    </span>
-                                ) : (
-                                    <span />
-                                )}
+                                {/* Before value */}
+                                <span className="min-w-0">
+                                    <ActivityValueRenderer
+                                        value={fromVal}
+                                        col={col}
+                                        timeZone={timeZone}
+                                        currency={currency}
+                                        locale={locale}
+                                    />
+                                </span>
 
                                 {/* After value */}
-                                {!isDeleted ? (
-                                    <span className={cn(isCreated ? 'col-span-2' : '')}>
-                                        {isChanged && variant === 'updated' && (
-                                            <span className="inline-flex items-center gap-1 align-middle mr-1">
-                                                <ArrowRight className="h-3 w-3 text-muted-foreground/50 shrink-0" />
-                                            </span>
-                                        )}
-                                        <ActivityValueRenderer
-                                            value={isCreated ? toVal : toVal}
-                                            col={col}
-                                            timeZone={timeZone}
-                                            currency={currency}
-                                            locale={locale}
-                                        />
-                                    </span>
-                                ) : (
-                                    <span />
-                                )}
+                                <span className="min-w-0">
+                                    {isChanged && variant === 'updated' && (
+                                        <span className="inline-flex items-center gap-1 align-middle mr-1">
+                                            <ArrowRight className="h-3 w-3 text-muted-foreground/50 shrink-0" />
+                                        </span>
+                                    )}
+                                    <ActivityValueRenderer
+                                        value={toVal}
+                                        col={col}
+                                        timeZone={timeZone}
+                                        currency={currency}
+                                        locale={locale}
+                                    />
+                                </span>
                             </div>
                         )
                     })}

package/src/dynamic-crud-page.tsx

@@ -37,6 +37,7 @@ import { ExportDialog } from './dialogs/export'
 import { ImportDialog } from './dialogs/import'
 import { getModelExtension } from './model-extension-registry'
 import { ModelActionToolbar } from './model-action-toolbar'
+import { useCan, modelCapability } from './permissions-context'
 import type { TableMetadata } from './types'
 
 export interface DynamicCRUDPageStrings {
@@ -165,9 +166,13 @@ export function DynamicCRUDPage(props: DynamicCRUDPageProps) {
     // showing one in the page chrome is just visual duplication. Apps that
     // want it back can pass `hideRefresh={false}`.
     const effectiveHideRefresh = hideRefresh ?? ext?.hideRefresh ?? true
-    const showCreate = enableCRUD && !effectiveHideCreate
-    const showImport = enableCRUD && !effectiveHideImport
-    const showExport = !effectiveHideExport
+    // Capability gating — no-op unless the host mounts <PermissionsProvider>
+    // (useCan defaults to always-true), in which case create/export/import
+    // require `lowercase(model).create|export|import`.
+    const can = useCan()
+    const showCreate = enableCRUD && !effectiveHideCreate && can(modelCapability(model, 'create'))
+    const showImport = enableCRUD && !effectiveHideImport && can(modelCapability(model, 'import'))
+    const showExport = !effectiveHideExport && can(modelCapability(model, 'export'))
     const showRefresh = !effectiveHideRefresh
 
     const handleRefresh = useCallback(() => {

package/src/dynamic-table.tsx

@@ -71,6 +71,7 @@ import { OptionsContext } from './options-context'
 import { ActionModalDispatcher } from './action-modal-dispatcher'
 import type { TableMetadata, ApiResponse, ActionMetadata } from './types'
 import { getSearchableColumnKeys } from './column-visibility'
+import { useCan, usePermissionsActive, gateTableMetadata } from './permissions-context'
 import { DynamicRecordDialog } from './dialogs/dynamic-record'
 import { ExportDialog } from './dialogs/export'
 import { ImportDialog } from './dialogs/import'
@@ -369,6 +370,18 @@ export function DynamicTable({
         [metadata],
     )
 
+    // Permission gating — only active when the host mounts <PermissionsProvider>.
+    // Without it `viewMetadata === metadata` and nothing changes (everything
+    // stays visible, exactly the legacy behaviour). With it, export/import
+    // buttons and row actions (incl. the implicit View/Edit/Delete trio) are
+    // filtered by `can(lowercase(model).<action>)`.
+    const can = useCan()
+    const permissionsActive = usePermissionsActive()
+    const viewMetadata = useMemo(() => {
+        if (!metadata || !permissionsActive) return metadata
+        return gateTableMetadata(metadata, model, can, (key, fallback) => t(key, { defaultValue: fallback }))
+    }, [metadata, permissionsActive, can, model, t])
+
     const buildFilterParams = useCallback(() => {
         const params: Record<string, any> = {}
         if (sorting.length > 0) {
@@ -640,19 +653,19 @@ export function DynamicTable({
     }, [metadata, filterOptionsMap, dynamicFilters, handleDynamicFilterChange])
 
     const columns = useMemo(() => {
-        if (!metadata) return []
+        if (!viewMetadata) return []
         // Row-action column only renders per-row actions. Table-level placements
         // ("table"/"create") are surfaced by <ModelActionToolbar> at the page
         // level, so strip them here to avoid a meaningless per-row button.
-        const rowMetadata = metadata.actions?.some((a) => a.placement === 'table' || a.placement === 'create')
-            ? { ...metadata, actions: metadata.actions.filter((a) => !a.placement || a.placement === 'row') }
-            : metadata
+        const rowMetadata = viewMetadata.actions?.some((a) => a.placement === 'table' || a.placement === 'create')
+            ? { ...viewMetadata, actions: viewMetadata.actions.filter((a) => !a.placement || a.placement === 'row') }
+            : viewMetadata
         const baseColumns = getDynamicColumns(rowMetadata, handleInternalAction, t, i18n.language, columnFilterConfigs, timeZone, currency)
         const filteredBase = baseColumns.filter((col: ColumnDef<any>) => !hiddenColumns.includes(col.id as string))
         const actionsCol = filteredBase.find((c: ColumnDef<any>) => c.id === 'actions')
         const otherCols = filteredBase.filter((c: ColumnDef<any>) => c.id !== 'actions')
         return [...otherCols, ...extraColumns, ...(actionsCol ? [actionsCol] : [])]
-    }, [metadata, handleInternalAction, hiddenColumns, extraColumns, t, i18n.language, columnFilterConfigs, getDynamicColumns, timeZone, currency])
+    }, [viewMetadata, handleInternalAction, hiddenColumns, extraColumns, t, i18n.language, columnFilterConfigs, getDynamicColumns, timeZone, currency])
 
     const filters = useMemo(() => [], [])
 
@@ -745,12 +758,12 @@ export function DynamicTable({
                         onBulkDelete={() => setShowBulkDeleteConfirm(true)}
                         extraActions={
                             <>
-                                {metadata.canExport && (
+                                {viewMetadata?.canExport && (
                                     <Button variant="outline" size="sm" className="h-8" onClick={() => setExportOpen(true)}>
                                         <Download className="h-4 w-4 mr-1" /> Exportar
                                     </Button>
                                 )}
-                                {metadata.canImport && (
+                                {viewMetadata?.canImport && (
                                     <Button variant="outline" size="sm" className="h-8" onClick={() => setImportOpen(true)}>
                                         <Upload className="h-4 w-4 mr-1" /> Importar
                                     </Button>
@@ -997,10 +1010,10 @@ export function DynamicTable({
                 onSaved={handleRefresh}
             />
 
-            {metadata.canExport && (
+            {viewMetadata?.canExport && (
                 <ExportDialog open={exportOpen} onOpenChange={setExportOpen} model={model} metadata={metadata} currentFilters={buildFilterParams()} hasActiveFilters={hasActiveFilters} />
             )}
-            {metadata.canImport && (
+            {viewMetadata?.canImport && (
                 <ImportDialog open={importOpen} onOpenChange={setImportOpen} model={model} metadata={metadata} onImported={handleRefresh} />
             )}
             {actionModal.action && (

package/src/index.ts

@@ -28,6 +28,32 @@ export {
 } from './addon-layout-context'
 export * from './slot'
 export * from './capability-gate'
+export {
+    PermissionsProvider,
+    useCan,
+    usePermissionsActive,
+    makeCan,
+    capabilityForActionKey,
+    modelCapability,
+    gateTableMetadata,
+    type CanFn,
+    type PermissionsProviderProps,
+} from './permissions-context'
+export {
+    PermissionsManager,
+    moduleActionCapability,
+    moduleCapabilities,
+    grantedCountForModule,
+    capabilitySetsEqual,
+    defaultActionIcon,
+    type PermissionsManagerProps,
+    type PermissionsCatalog,
+    type PermissionModuleDef,
+    type PermissionActionDef,
+    type GeneralPermissionDef,
+    type RoleDef,
+    type RoleInput,
+} from './permissions-manager'
 export * from './org-runtime-context'
 export * from './org-runtime-provider'
 export * from './navigation-builder'

package/src/model-action-toolbar.tsx

@@ -23,6 +23,7 @@ import { useApi } from './api-context'
 import { useMetadataCache } from './metadata-cache'
 import { DynamicIcon } from './dynamic-icon'
 import { ActionModalDispatcher } from './action-modal-dispatcher'
+import { useCan, modelCapability } from './permissions-context'
 import type { ActionDefinition, ActionMetadata, TableMetadata } from './types'
 
 export type ActionPlacement = 'row' | 'table' | 'create'
@@ -108,7 +109,14 @@ export function ModelActionToolbar({
     onChange,
     className,
 }: ModelActionToolbarProps) {
-    const surfaced = useModelActions(model, placements, actions)
+    const all = useModelActions(model, placements, actions)
+    // Capability gating — always-true without a <PermissionsProvider>. Custom
+    // table/create actions map onto `lowercase(model).<action_key>`.
+    const can = useCan()
+    const surfaced = useMemo(
+        () => all.filter((a) => can(modelCapability(model, a.key))),
+        [all, can, model],
+    )
     const [active, setActive] = useState<ActionMetadata | null>(null)
     const dataEndpoint = endpoint ?? `/data/${model}/me`