diff --git a/ui/src/components/icons/InfoIcon.tsx b/ui/src/components/icons/InfoIcon.tsx new file mode 100644 index 00000000..cfc1115f --- /dev/null +++ b/ui/src/components/icons/InfoIcon.tsx @@ -0,0 +1,9 @@ +import React from 'react'; + +export default function InfoIcon(props: React.SVGProps) { + return ( + + + + ); +} diff --git a/ui/src/components/icons/ZapIcon.tsx b/ui/src/components/icons/ZapIcon.tsx new file mode 100644 index 00000000..862e3d68 --- /dev/null +++ b/ui/src/components/icons/ZapIcon.tsx @@ -0,0 +1,9 @@ +import React from 'react'; + +export default function ZapIcon(props: React.SVGProps) { + return ( + + + + ); +} diff --git a/ui/src/permissions/PermissionsDialog.tsx b/ui/src/permissions/PermissionsDialog.tsx new file mode 100644 index 00000000..968290fa --- /dev/null +++ b/ui/src/permissions/PermissionsDialog.tsx @@ -0,0 +1,2 @@ +import React from 'react'; + diff --git a/ui/src/permissions/WarningBanner.tsx b/ui/src/permissions/WarningBanner.tsx new file mode 100644 index 00000000..238a3912 --- /dev/null +++ b/ui/src/permissions/WarningBanner.tsx @@ -0,0 +1,17 @@ +import InfoIcon from '@/components/icons/InfoIcon'; +import ZapIcon from '@/components/icons/ZapIcon'; +import React from 'react'; + +/** + * A warning banner that conditionally appears at the bottom of the + * permissions dialog when the agent requests sensitive permissions. + */ +export default function WarningBanner({ count }: { count: number }) { + return ( +
+ +
{count} permissions may allow root system or identity access
+ +
+ ); +} diff --git a/ui/src/stories/WarningBanner.stories.ts b/ui/src/stories/WarningBanner.stories.ts new file mode 100644 index 00000000..6f0be1c9 --- /dev/null +++ b/ui/src/stories/WarningBanner.stories.ts @@ -0,0 +1,21 @@ +import WarningBanner from '@/permissions/WarningBanner'; +import type { Meta, StoryObj } from '@storybook/react'; + +const meta: Meta = { + title: 'Permissions/WarningBanner', + tags: ['autodocs'], + component: WarningBanner, + + parameters: { + layout: 'centered', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Three: Story = { + args: { + count: 3, + }, +};