ui: add Permissions WarningBanner

ui/src/components/icons/InfoIcon.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function InfoIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M0 10.5C0 16.0228 4.47715 20.5 10 20.5C15.5228 20.5 20 16.0228 20 10.5C20 4.97715 15.5228 0.5 10 0.5C4.47715 0.5 0 4.97715 0 10.5ZM2 10.5C2 14.9183 5.58172 18.5 10 18.5C14.4183 18.5 18 14.9183 18 10.5C18 6.08172 14.4183 2.5 10 2.5C5.58172 2.5 2 6.08172 2 10.5ZM9.71654 10.547V15.5H11.6275V9.052H7.11654V10.547H9.71654ZM9.67754 7.726C9.92021 7.934 10.2235 8.038 10.5875 8.038C10.9602 8.038 11.2635 7.934 11.4975 7.726C11.7402 7.50933 11.8615 7.22767 11.8615 6.881C11.8615 6.52567 11.7402 6.23967 11.4975 6.023C11.2635 5.79767 10.9602 5.685 10.5875 5.685C10.2235 5.685 9.92021 5.79767 9.67754 6.023C9.43487 6.23967 9.31354 6.52567 9.31354 6.881C9.31354 7.22767 9.43487 7.50933 9.67754 7.726Z" fill="white"/>
+    </svg>
+  );
+}

ui/src/components/icons/ZapIcon.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function ZapIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M9 18.5C4.02944 18.5 0 14.4706 0 9.5C0 4.52944 4.02944 0.5 9 0.5C13.9706 0.5 18 4.52944 18 9.5C18 14.4706 13.9706 18.5 9 18.5ZM9.00199 4.5C9.48462 4.5 9.87276 4.89709 9.86175 5.37961L9.74851 10.3413C9.73923 10.7478 9.40697 11.0726 9.00027 11.0726C8.59337 11.0726 8.26102 10.7475 8.25202 10.3407L8.14221 5.37901C8.13154 4.89672 8.51958 4.5 9.00199 4.5ZM10 12.9089C9.99545 13.4635 9.53637 13.9089 9.00002 13.9089C8.44548 13.9089 7.99549 13.4635 8.00003 12.9089C7.99549 12.3635 8.44548 11.9181 9.00002 11.9181C9.53637 11.9181 9.99545 12.3635 10 12.9089Z" fill="white"/>
+    </svg>
+  );
+}

ui/src/permissions/PermissionsDialog.tsx

@@ -0,0 +1,2 @@
+import React from 'react';
+

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 (
+    <div className="flex content-center space-x-2 w-full rounded-lg bg-red-danger p-4">
+      <ZapIcon />
+      <div className="text-white dark:text-black font-semibold text-md leading-4 flex flex-col justify-center">{count} permissions may allow root system or identity access</div>
+      <InfoIcon />
+    </div>
+  );
+}

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<typeof WarningBanner> = {
+  title: 'Permissions/WarningBanner',
+  tags: ['autodocs'],
+  component: WarningBanner,
+
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof WarningBanner>;
+
+export const Three: Story = {
+  args: {
+    count: 3,
+  },
+};