perms: add SummaryRow + story

ui/.storybook/main.ts

@@ -1,6 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

ui/src/components/icons/ZapIcon.tsx

@@ -1,9 +1,21 @@
 import React from 'react';
 
-export default function ZapIcon(props: React.SVGProps<SVGSVGElement>) {
+type ZapIconProps = React.SVGProps<SVGSVGElement> & {
+  /**
+   * (optional) The color of the icon.
+   * Defaults to `white`.
+   */
+  color?: string;
+};
+
+export default function ZapIcon(props: ZapIconProps) {
   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"/>
+      <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={props.color ?? 'white'}/>
     </svg>
   );
 }

ui/src/permissions/PermissionsDialog.tsx

@@ -1,2 +1,5 @@
 import React from 'react';
 
+export default function PermissionsDialog() {
+  return <div>PermissionsDialog</div>;
+}

ui/src/permissions/SummaryRow.tsx

@@ -0,0 +1,45 @@
+import { Adjust } from '@/components/icons/Adjust';
+import ZapIcon from '@/components/icons/ZapIcon';
+import React from 'react';
+
+interface SummaryRowProps {
+  /**
+   * A description of the requested permission.
+   * Example: "Read your contacts"
+   */
+  description: string;
+  /**
+   * An optional warning message to display.
+   */
+  warning: string | null;
+  /**
+   * TODO: pass in the permission object and use
+   * a helper function to determine which icon based on the metadata.
+   */
+  // icon: string;
+}
+
+/**
+ * A row summarizing a requested permission.
+ * It has the description of the permission and an optional warning icon.
+ */
+export default function SummaryRow({ description, warning }: SummaryRowProps) {
+  return (
+    <div className='w-full flex justify-between content-center p-2 space-x-4'>
+      <div className='flex space-x-1'>
+        <div className='h-8 w-8 bg-gray-50 p-1.5'>
+          {/* TODO: placeholder icon */}
+          <Adjust />
+        </div>
+        <div className='flex flex-col justify-center text-sm font-medium text-gray-900'>
+          {description}
+        </div>
+      </div>
+      {warning ? (
+        <div className='flex flex-col justify-center'>
+          <ZapIcon color='#FF6240' />
+        </div>
+      ) : null}
+    </div>
+  )
+}

ui/src/permissions/WarningBanner.tsx

@@ -1,21 +1,26 @@
+import React from 'react';
+import { noop } from 'lodash';
 import InfoIcon from '@/components/icons/InfoIcon';
 import ZapIcon from '@/components/icons/ZapIcon';
-import React from 'react';
 
 interface WarningBannerProps {
   /**
    * The number of permissions that may allow root system or identity access.
    */
   count: number;
+  /**
+   * Optional click handler for the banner.
+   */
+  onClick?: () => void;
 }
 
 /**
  * A warning banner that conditionally appears at the bottom of the 
  * permissions dialog when the agent requests sensitive permissions.
  */
-export default function WarningBanner({ count }: WarningBannerProps) {
+export default function WarningBanner({ count, onClick = noop }: WarningBannerProps) {
   return (
-    <div className="flex content-center space-x-2 w-full rounded-lg bg-red-danger p-4">
+    <div onClick={onClick} className="flex content-center space-x-2 w-full rounded-lg bg-red-danger p-4 cursor-pointer">
       <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 />

ui/src/stories/SummaryRow.stories.tsx

@@ -0,0 +1,29 @@
+import SummaryRow from '@/permissions/SummaryRow';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof SummaryRow> = {
+  title: 'Permissions/SummaryRow',
+  tags: ['autodocs'],
+  component: SummaryRow,
+
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SummaryRow>;
+
+export const HasWarning: Story = {
+  args: {
+    description: 'Access network keys or passwords',
+    warning: 'This permission is dangerous',
+  },
+};
+
+export const NoWarning: Story = {
+  args: {
+    description: 'Send notifications',
+    warning: null,
+  },
+};