@wallarm-org/claude-design 0.0.0-stage → 4.8.0

package/dist/project/components/ApprovalCard/README.md

@@ -0,0 +1,353 @@
+Asks the user to approve an action Wally wants to take — a tool call, a config change — before it runs. While `status` is `pending` the card shows its children (`ApprovalCardContent` and `ApprovalCardActions`); once the app sets `approved` or `rejected`, the children are replaced by a one-line status, so the buttons need no gating of their own. The card has no outer margins or horizontal padding: the panel gutter (`ChatBody` / `ChatFooter`) places it, whether it sits inline in the conversation or docked above the input. Buttons are plain DS components composed by the app, which also owns loading — disable them while the request is in flight.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `status` | `"pending" \| "approved" \| "rejected"` | no | `pending` | Pending shows `children` (content + actions); resolved states replace them with a status row. |
+| `caption` | `ReactNode` | no | `Requires your approval` | Shown above the card in every state. Pass `null` to hide it. |
+| `approved-label` | `ReactNode` | no | `Approved` |  |
+| `rejected-label` | `ReactNode` | no | `Rejected` |  |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.ApprovalCardActions` — `ApprovalCardActionsProps` in the declaration bundle.
+- `WallarmDS.ApprovalCardContent` — `ApprovalCardContentProps` in the declaration bundle.
+
+## Stories
+
+### Pending
+
+The default ask: what Wally wants to do, then the split approve button and Reject.
+
+Source: ApprovalCard/ApprovalCard.stories.tsx#Pending
+
+### PendingLongText
+
+Long text wraps, and unbroken strings such as URLs break rather than overflow the card.
+
+Source: ApprovalCard/ApprovalCard.stories.tsx#PendingLongText
+
+### PendingWithCodeSnippet
+
+Arguments the user should read verbatim go in a `CodeSnippet`, 8px under the text.
+
+Source: ApprovalCard/ApprovalCard.stories.tsx#PendingWithCodeSnippet
+
+### AllowOnceMenu
+
+The chevron half of the split button opens the narrower "Allow once" option.
+
+Source: ApprovalCard/ApprovalCard.stories.tsx#AllowOnceMenu
+
+### Loading
+
+There is no loading variant: while the decision is being sent, the app disables its own buttons.
+
+Source: ApprovalCard/ApprovalCard.stories.tsx#Loading
+
+### Approved
+
+After approval the content and buttons collapse into a status row; the caption stays. The
+children are kept on purpose: the app renders the same tree and only flips `status`.
+
+Source: ApprovalCard/ApprovalCard.stories.tsx#Approved
+
+### Rejected
+
+The rejected status row. `rejectedLabel` (like `approvedLabel` and `caption`) is a prop, so
+the app can say what was rejected.
+
+Source: ApprovalCard/ApprovalCard.stories.tsx#Rejected
+
+### Analytics
+
+Analytics attributes go on the composed DS buttons themselves — the card adds no seam of
+its own, so each `data-analytics-id` lands on the real `<button>`.
+
+Source: ApprovalCard/ApprovalCard.stories.tsx#Analytics
+
+## Story sources
+
+### ApprovalCard/ApprovalCard.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { ChevronDown } from '../../icons';
+import { Button } from '../Button';
+import { CodeSnippetCode, CodeSnippetContent, CodeSnippetRoot } from '../CodeSnippet';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../DropdownMenu';
+import { SplitButton } from '../SplitButton';
+import { ApprovalCard, ApprovalCardActions, ApprovalCardContent } from '.';
+
+const DESCRIPTION = [
+  'Asks the user to approve an action Wally wants to take — a tool call, a config change — before it runs.',
+  'While `status` is `pending` the card shows its children (`ApprovalCardContent` and `ApprovalCardActions`); once the app sets `approved` or `rejected`, the children are replaced by a one-line status, so the buttons need no gating of their own.',
+  'The card has no outer margins or horizontal padding: the panel gutter (`ChatBody` / `ChatFooter`) places it, whether it sits inline in the conversation or docked above the input.',
+  'Buttons are plain DS components composed by the app, which also owns loading — disable them while the request is in flight.',
+].join(' ');
+
+const meta = {
+  title: 'AI/ApprovalCard',
+  component: ApprovalCard,
+  subcomponents: { ApprovalCardContent, ApprovalCardActions },
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+  decorators: [
+    Story => (
+      <div className='w-[440px]'>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ApprovalCard>;
+
+export default meta;
+
+/** The default ask: what Wally wants to do, then the split approve button and Reject. */
+export const Pending: StoryFn<typeof meta> = () => (
+  <ApprovalCard data-testid='approval-card'>
+    <ApprovalCardContent>Add 203.0.113.42 to the denylist on all applications</ApprovalCardContent>
+    <ApprovalCardActions>
+      <DropdownMenu positioning={{ placement: 'bottom-end' }}>
+        <SplitButton>
+          <Button>Always allow in this session</Button>
+          <DropdownMenuTrigger asChild>
+            <Button aria-label='More approval options' data-testid='approval-card-more'>
+              <ChevronDown />
+            </Button>
+          </DropdownMenuTrigger>
+        </SplitButton>
+        <DropdownMenuContent>
+          <DropdownMenuItem data-testid='approval-card-allow-once'>Allow once</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Button variant='secondary' color='neutral'>
+        Reject
+      </Button>
+    </ApprovalCardActions>
+  </ApprovalCard>
+);
+
+/** Long text wraps, and unbroken strings such as URLs break rather than overflow the card. */
+export const PendingLongText: StoryFn<typeof meta> = () => (
+  <ApprovalCard data-testid='approval-card'>
+    <ApprovalCardContent>
+      Disable the rule "Block SQL injection attempts" for the application "Payments API" and
+      redeploy the policy to every node in the eu-west-1 cluster. Affected endpoint:
+      https://payments.example.com/api/v2/transactions/refunds/batch-processing/callbacks
+    </ApprovalCardContent>
+    <ApprovalCardActions>
+      <DropdownMenu positioning={{ placement: 'bottom-end' }}>
+        <SplitButton>
+          <Button>Always allow in this session</Button>
+          <DropdownMenuTrigger asChild>
+            <Button aria-label='More approval options' data-testid='approval-card-more'>
+              <ChevronDown />
+            </Button>
+          </DropdownMenuTrigger>
+        </SplitButton>
+        <DropdownMenuContent>
+          <DropdownMenuItem data-testid='approval-card-allow-once'>Allow once</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Button variant='secondary' color='neutral'>
+        Reject
+      </Button>
+    </ApprovalCardActions>
+  </ApprovalCard>
+);
+
+/** Arguments the user should read verbatim go in a `CodeSnippet`, 8px under the text. */
+export const PendingWithCodeSnippet: StoryFn<typeof meta> = () => (
+  <ApprovalCard data-testid='approval-card'>
+    <ApprovalCardContent>
+      <p>Run this command on the node:</p>
+      <CodeSnippetRoot
+        code='wallarm-cli rules disable --id 4021 --app payments-api'
+        language='bash'
+      >
+        <CodeSnippetContent>
+          <CodeSnippetCode />
+        </CodeSnippetContent>
+      </CodeSnippetRoot>
+    </ApprovalCardContent>
+    <ApprovalCardActions>
+      <DropdownMenu positioning={{ placement: 'bottom-end' }}>
+        <SplitButton>
+          <Button>Always allow in this session</Button>
+          <DropdownMenuTrigger asChild>
+            <Button aria-label='More approval options' data-testid='approval-card-more'>
+              <ChevronDown />
+            </Button>
+          </DropdownMenuTrigger>
+        </SplitButton>
+        <DropdownMenuContent>
+          <DropdownMenuItem data-testid='approval-card-allow-once'>Allow once</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Button variant='secondary' color='neutral'>
+        Reject
+      </Button>
+    </ApprovalCardActions>
+  </ApprovalCard>
+);
+
+/** The chevron half of the split button opens the narrower "Allow once" option. */
+export const AllowOnceMenu: StoryFn<typeof meta> = () => (
+  <ApprovalCard data-testid='approval-card'>
+    <ApprovalCardContent>Add 203.0.113.42 to the denylist on all applications</ApprovalCardContent>
+    <ApprovalCardActions>
+      <DropdownMenu positioning={{ placement: 'bottom-end' }} defaultOpen>
+        <SplitButton>
+          <Button>Always allow in this session</Button>
+          <DropdownMenuTrigger asChild>
+            <Button aria-label='More approval options' data-testid='approval-card-more'>
+              <ChevronDown />
+            </Button>
+          </DropdownMenuTrigger>
+        </SplitButton>
+        <DropdownMenuContent>
+          <DropdownMenuItem data-testid='approval-card-allow-once'>Allow once</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Button variant='secondary' color='neutral'>
+        Reject
+      </Button>
+    </ApprovalCardActions>
+  </ApprovalCard>
+);
+
+/** There is no loading variant: while the decision is being sent, the app disables its own buttons. */
+export const Loading: StoryFn<typeof meta> = () => (
+  <ApprovalCard data-testid='approval-card'>
+    <ApprovalCardContent>Add 203.0.113.42 to the denylist on all applications</ApprovalCardContent>
+    <ApprovalCardActions>
+      <DropdownMenu positioning={{ placement: 'bottom-end' }}>
+        <SplitButton>
+          <Button disabled>Always allow in this session</Button>
+          <DropdownMenuTrigger asChild>
+            <Button aria-label='More approval options' data-testid='approval-card-more' disabled>
+              <ChevronDown />
+            </Button>
+          </DropdownMenuTrigger>
+        </SplitButton>
+        <DropdownMenuContent>
+          <DropdownMenuItem data-testid='approval-card-allow-once'>Allow once</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Button variant='secondary' color='neutral' disabled>
+        Reject
+      </Button>
+    </ApprovalCardActions>
+  </ApprovalCard>
+);
+
+/**
+ * After approval the content and buttons collapse into a status row; the caption stays. The
+ * children are kept on purpose: the app renders the same tree and only flips `status`.
+ */
+export const Approved: StoryFn<typeof meta> = () => (
+  <ApprovalCard data-testid='approval-card' status='approved'>
+    <ApprovalCardContent>Add 203.0.113.42 to the denylist on all applications</ApprovalCardContent>
+    <ApprovalCardActions>
+      <DropdownMenu positioning={{ placement: 'bottom-end' }}>
+        <SplitButton>
+          <Button>Always allow in this session</Button>
+          <DropdownMenuTrigger asChild>
+            <Button aria-label='More approval options'>
+              <ChevronDown />
+            </Button>
+          </DropdownMenuTrigger>
+        </SplitButton>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Allow once</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Button variant='secondary' color='neutral'>
+        Reject
+      </Button>
+    </ApprovalCardActions>
+  </ApprovalCard>
+);
+
+/**
+ * The rejected status row. `rejectedLabel` (like `approvedLabel` and `caption`) is a prop, so
+ * the app can say what was rejected.
+ */
+export const Rejected: StoryFn<typeof meta> = () => (
+  <ApprovalCard
+    data-testid='approval-card'
+    status='rejected'
+    rejectedLabel='Denylist change rejected'
+  >
+    <ApprovalCardContent>Add 203.0.113.42 to the denylist on all applications</ApprovalCardContent>
+    <ApprovalCardActions>
+      <DropdownMenu positioning={{ placement: 'bottom-end' }}>
+        <SplitButton>
+          <Button>Always allow in this session</Button>
+          <DropdownMenuTrigger asChild>
+            <Button aria-label='More approval options'>
+              <ChevronDown />
+            </Button>
+          </DropdownMenuTrigger>
+        </SplitButton>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Allow once</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Button variant='secondary' color='neutral'>
+        Reject
+      </Button>
+    </ApprovalCardActions>
+  </ApprovalCard>
+);
+
+/**
+ * Analytics attributes go on the composed DS buttons themselves — the card adds no seam of
+ * its own, so each `data-analytics-id` lands on the real `<button>`.
+ */
+export const Analytics: StoryFn<typeof meta> = () => (
+  <ApprovalCard data-testid='approval-card' data-analytics-id='AI_APPROVAL_CARD'>
+    <ApprovalCardContent>Add 203.0.113.42 to the denylist on all applications</ApprovalCardContent>
+    <ApprovalCardActions>
+      <DropdownMenu positioning={{ placement: 'bottom-end' }}>
+        <SplitButton>
+          <Button data-analytics-id='AI_APPROVAL_ALLOW_SESSION'>
+            Always allow in this session
+          </Button>
+          <DropdownMenuTrigger asChild>
+            <Button aria-label='More approval options' data-analytics-id='AI_APPROVAL_MORE'>
+              <ChevronDown />
+            </Button>
+          </DropdownMenuTrigger>
+        </SplitButton>
+        <DropdownMenuContent>
+          <DropdownMenuItem data-analytics-id='AI_APPROVAL_ALLOW_ONCE'>Allow once</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Button variant='secondary' color='neutral' data-analytics-id='AI_APPROVAL_REJECT'>
+        Reject
+      </Button>
+    </ApprovalCardActions>
+  </ApprovalCard>
+);
+```

package/dist/project/components/ApprovalCard/preview.html

@@ -0,0 +1,2 @@
+<!-- @dsCard group="AI" height=480 -->
+<!doctype html><html><head><meta charset="utf-8"></head><body><div id="preview"></div><script src="./stories.js"></script><script>window.WallarmPreview.mount(document.getElementById('preview'));</script></body></html>

package/dist/project/components/ApprovalCard/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,n){let r,a;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var o,l,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,h=(e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of d(t))m.call(e,a)||a===n||c(e,a,{get:()=>t[a],enumerable:!(r=s(t,a))||r.enumerable});return e},u={},f={$dispatcherGuard:()=>M,$makeReadOnly:()=>N,$reset:()=>O,$structuralCheck:()=>I,c:()=>R,clearRenderCounterRegistry:()=>j,renderCounterRegistry:()=>D,useRenderCounter:()=>k};for(var y in f)c(u,y,{get:f[y],enumerable:!0});e.exports=h(c({},"__esModule",{value:!0}),u);var _=(a=null!=(r=n("C"))?i(p(r)):{},h(r&&r.__esModule?a:c(a,"default",{value:r,enumerable:!0}),r)),{useRef:w,useEffect:b,isValidElement:S}=_,v=null!=(o=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,g=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(l=_.__COMPILER_RUNTIME)?void 0:l.c)?_.__COMPILER_RUNTIME.c:function(e){return _.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=g;return t[g]=!0,t},[])},A={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{A[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var C=null;function E(e){return v.ReactCurrentDispatcher.current=e,v.ReactCurrentDispatcher.current}A.useMemoCache=e=>{if(null!=C)return C.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var $=[];function M(e){let t=v.ReactCurrentDispatcher.current;if(0===e){if($.push(t),1===$.length&&(C=t),t===A)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");E(A)}else if(1===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===$.length&&(C=null),E(e)}else if(2===e)$.push(t),E(C);else if(3===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");E(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function O(e){for(let t=0;t<e.length;t++)e[t]=g}function N(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function j(){for(let e of D.values())e.forEach(e=>{e.count=0})}function k(e){let t=w(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let n,r={count:0};null==(n=D.get(e))&&(n=new Set,D.set(e,n)),n.add(r),t.current=r}return()=>{var n;let r;null!==t.current&&(n=t.current,null!=(r=D.get(e))&&r.delete(n))}})}var P=new Set;function I(e,t,n,r,a,o){function l(e,t,l,i){let c=`${r}:${o} [${a}] ${n}${l} changed from ${e} to ${t} at depth ${i}`;P.has(c)||(P.add(c),console.error(c))}!function e(t,n,r,a){if(!(a>2)){if(t!==n)if(typeof t!=typeof n)l(`type ${typeof t}`,`type ${typeof n}`,r,a);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(n);if(null===t&&null!==n)l("null",`type ${typeof n}`,r,a);else if(null===n)l(`type ${typeof t}`,"null",r,a);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)l(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,r,a);else for(let[o,i]of t)n.has(o)?e(i,n.get(o),`${r}.get(${o})`,a+1):l(`Map instance with key ${o}`,`Map instance without key ${o}`,r,a);else l("Map instance","other value",r,a);else if(n instanceof Map)l("other value","Map instance",r,a);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)l(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,r,a);else for(let e of n)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,r,a);else l("Set instance","other value",r,a);else if(n instanceof Set)l("other value","Set instance",r,a);else if(o||i)if(o!==i)l(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,r,a);else if(t.length!==n.length)l(`array with length ${t.length}`,`array with length ${n.length}`,r,a);else for(let o=0;o<t.length;o++)e(t[o],n[o],`${r}[${o}]`,a+1);else if(S(t)||S(n))S(t)!==S(n)?l(`type ${S(t)?"React element":"object"}`,`type ${S(n)?"React element":"object"}`,r,a):t.type!==n.type?l(`React element of type ${t.type}`,`React element of type ${n.type}`,r,a):e(t.props,n.props,`[props of ${r}]`,a+1);else{for(let e in n)e in t||l(`object without key ${e}`,`object with key ${e}`,r,a);for(let o in t)o in n?e(t[o],n[o],`${r}.${o}`,a+1):l(`object with key ${o}`,`object without key ${o}`,r,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&l(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,r,a):t!==n&&l(t,n,r,a)}}}(e,t,"",0)}},p(e,t,n){let r=new WeakMap,a=new WeakMap;function o(e,t,n){let o=t,l=n;if("object"==typeof o&&null!==o&&"$$typeof"in o&&o.$$typeof===Symbol.for("react.context")&&"Provider"in o&&(o=o.Provider),"function"==typeof o&&null!=l.ref&&!o.prototype?.isReactComponent){let t=o,n=r.get(e);n||(n=new WeakMap,r.set(e,n));let a=n.get(t);a||((a=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,a)),o=a}if("string"==typeof o&&"boolean"==typeof l.inert&&((l={...l}).inert?l.inert="":delete l.inert),"string"==typeof o)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in l&&(l={...l,[t]:l[e]},delete l[e]);return"string"==typeof o&&null!=l.ref&&(o=function(e,t){let n=a.get(e);n||(n=new Map,a.set(e,n));let r=n.get(t);if(r)return r;let o=e.forwardRef((n,r)=>{let a=e.useRef(null);if(!a.current||a.current.original!==r){let e;a.current={original:r,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof r){let n=r(t);e="function"==typeof n?n:void 0}else r&&(r.current=t)}}}return e.createElement(t,{...n,ref:a.current.callback})});return o.displayName=`CanvasHost(${t})`,n.set(t,o),o}(e,o)),{type:o,props:l}}function l(e){let t=(t,n,r)=>{let a=o(e,t,n??{});return e.createElement(a.type,void 0===r?a.props:{...a.props,key:r})};return{jsx:t,jsxs:(t,n,r)=>{let a=o(e,t,n??{}),{children:l,...i}=a.props;return e.createElement(a.type,void 0===r?i:{...i,key:r},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,n,...r)=>{let a=o(e,t,n??{});return e.createElement(a.type,a.props,...r)},cloneElement:(t,n,...r)=>{let a=e.cloneElement(t,n??void 0,...r),l=a.ref,i=o(e,a.type,{...a.props,ref:l});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}n.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,n){n.r(t);let r=(0,n("p").YJ)(window.React),{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:m,cloneElement:h,createContext:u,createElement:f,createFactory:y,createRef:_,forwardRef:w,isValidElement:b,lazy:S,memo:v,startTransition:g,unstable_act:R,useCallback:A,useContext:C,useDebugValue:E,useDeferredValue:$,useEffect:M,useId:O,useImperativeHandle:N,useInsertionEffect:D,useLayoutEffect:j,useMemo:k,useReducer:P,useRef:I,useState:W,useSyncExternalStore:L,useTransition:T,version:x,use:z}=r;n.d(t,{},{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:m,cloneElement:h,createContext:u,createElement:f,createFactory:y,createRef:_,default:r,forwardRef:w,isValidElement:b,lazy:S,memo:v,startTransition:g,unstable_act:R,use:z,useCallback:A,useContext:C,useDebugValue:E,useDeferredValue:$,useEffect:M,useId:O,useImperativeHandle:N,useInsertionEffect:D,useLayoutEffect:j,useMemo:k,useReducer:P,useRef:I,useState:W,useSyncExternalStore:L,useTransition:T,version:x})}},t={};function n(r){var a=t[r];if(void 0!==a)return a.exports;var o=t[r]={exports:{}};return e[r](o,o.exports,n),o.exports}n.d=(e,t,r)=>{var a=(t,r)=>{for(var a in t)n.o(t,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[r]:t[a]})};a(t,"get"),a(r,"value")},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:r,Fragment:a}=(0,n("p").MA)(window.React);var o=n("vD");let l=window.WallarmDS.Icons.ChevronDown,i=window.WallarmDS.Button,c=window.WallarmDS.CodeSnippetCode,s=window.WallarmDS.CodeSnippetContent,d=window.WallarmDS.CodeSnippetRoot,p=window.WallarmDS.DropdownMenu,m=window.WallarmDS.DropdownMenuContent,h=window.WallarmDS.DropdownMenuItem,u=window.WallarmDS.DropdownMenuTrigger,f=window.WallarmDS.SplitButton,y=window.WallarmDS.ApprovalCard,_=window.WallarmDS.ApprovalCardActions,w=window.WallarmDS.ApprovalCardContent,b={title:"AI/ApprovalCard",component:y,subcomponents:{ApprovalCardContent:w,ApprovalCardActions:_},parameters:{layout:"centered",docs:{description:{component:"Asks the user to approve an action Wally wants to take — a tool call, a config change — before it runs. While `status` is `pending` the card shows its children (`ApprovalCardContent` and `ApprovalCardActions`); once the app sets `approved` or `rejected`, the children are replaced by a one-line status, so the buttons need no gating of their own. The card has no outer margins or horizontal padding: the panel gutter (`ChatBody` / `ChatFooter`) places it, whether it sits inline in the conversation or docked above the input. Buttons are plain DS components composed by the app, which also owns loading — disable them while the request is in flight."}}},decorators:[t=>e("div",{className:"w-[440px]",children:e(t,{})})]};var S=n("C");let v=[{name:"Pending",story:()=>{let n,r,a,c,s,d=(0,o.c)(5);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(w,{children:"Add 203.0.113.42 to the denylist on all applications"}),d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(r={placement:"bottom-end"},d[1]=r):r=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(i,{children:"Always allow in this session"}),d[2]=a):a=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(f,{children:[a,e(u,{asChild:!0,children:e(i,{"aria-label":"More approval options","data-testid":"approval-card-more",children:e(l,{})})})]}),d[3]=c):c=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(s=t(y,{"data-testid":"approval-card",children:[n,t(_,{children:[t(p,{positioning:r,children:[c,e(m,{children:e(h,{"data-testid":"approval-card-allow-once",children:"Allow once"})})]}),e(i,{variant:"secondary",color:"neutral",children:"Reject"})]})]}),d[4]=s):s=d[4],s},meta:b},{name:"PendingLongText",story:()=>{let n,r,a,c,s,d=(0,o.c)(5);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(w,{children:'Disable the rule "Block SQL injection attempts" for the application "Payments API" and redeploy the policy to every node in the eu-west-1 cluster. Affected endpoint: https://payments.example.com/api/v2/transactions/refunds/batch-processing/callbacks'}),d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(r={placement:"bottom-end"},d[1]=r):r=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(i,{children:"Always allow in this session"}),d[2]=a):a=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(f,{children:[a,e(u,{asChild:!0,children:e(i,{"aria-label":"More approval options","data-testid":"approval-card-more",children:e(l,{})})})]}),d[3]=c):c=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(s=t(y,{"data-testid":"approval-card",children:[n,t(_,{children:[t(p,{positioning:r,children:[c,e(m,{children:e(h,{"data-testid":"approval-card-allow-once",children:"Allow once"})})]}),e(i,{variant:"secondary",color:"neutral",children:"Reject"})]})]}),d[4]=s):s=d[4],s},meta:b},{name:"PendingWithCodeSnippet",story:()=>{let n,r,a,b,S,v,g=(0,o.c)(6);return g[0]===Symbol.for("react.memo_cache_sentinel")?(n=e("p",{children:"Run this command on the node:"}),g[0]=n):n=g[0],g[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(w,{children:[n,e(d,{code:"wallarm-cli rules disable --id 4021 --app payments-api",language:"bash",children:e(s,{children:e(c,{})})})]}),g[1]=r):r=g[1],g[2]===Symbol.for("react.memo_cache_sentinel")?(a={placement:"bottom-end"},g[2]=a):a=g[2],g[3]===Symbol.for("react.memo_cache_sentinel")?(b=e(i,{children:"Always allow in this session"}),g[3]=b):b=g[3],g[4]===Symbol.for("react.memo_cache_sentinel")?(S=t(f,{children:[b,e(u,{asChild:!0,children:e(i,{"aria-label":"More approval options","data-testid":"approval-card-more",children:e(l,{})})})]}),g[4]=S):S=g[4],g[5]===Symbol.for("react.memo_cache_sentinel")?(v=t(y,{"data-testid":"approval-card",children:[r,t(_,{children:[t(p,{positioning:a,children:[S,e(m,{children:e(h,{"data-testid":"approval-card-allow-once",children:"Allow once"})})]}),e(i,{variant:"secondary",color:"neutral",children:"Reject"})]})]}),g[5]=v):v=g[5],v},meta:b},{name:"AllowOnceMenu",story:()=>{let n,r,a,c,s,d=(0,o.c)(5);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(w,{children:"Add 203.0.113.42 to the denylist on all applications"}),d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(r={placement:"bottom-end"},d[1]=r):r=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(i,{children:"Always allow in this session"}),d[2]=a):a=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(f,{children:[a,e(u,{asChild:!0,children:e(i,{"aria-label":"More approval options","data-testid":"approval-card-more",children:e(l,{})})})]}),d[3]=c):c=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(s=t(y,{"data-testid":"approval-card",children:[n,t(_,{children:[t(p,{positioning:r,defaultOpen:!0,children:[c,e(m,{children:e(h,{"data-testid":"approval-card-allow-once",children:"Allow once"})})]}),e(i,{variant:"secondary",color:"neutral",children:"Reject"})]})]}),d[4]=s):s=d[4],s},meta:b},{name:"Loading",story:()=>{let n,r,a,c,s,d=(0,o.c)(5);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(w,{children:"Add 203.0.113.42 to the denylist on all applications"}),d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(r={placement:"bottom-end"},d[1]=r):r=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(i,{disabled:!0,children:"Always allow in this session"}),d[2]=a):a=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(f,{children:[a,e(u,{asChild:!0,children:e(i,{"aria-label":"More approval options","data-testid":"approval-card-more",disabled:!0,children:e(l,{})})})]}),d[3]=c):c=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(s=t(y,{"data-testid":"approval-card",children:[n,t(_,{children:[t(p,{positioning:r,children:[c,e(m,{children:e(h,{"data-testid":"approval-card-allow-once",children:"Allow once"})})]}),e(i,{variant:"secondary",color:"neutral",disabled:!0,children:"Reject"})]})]}),d[4]=s):s=d[4],s},meta:b},{name:"Approved",story:()=>{let n,r,a,c,s,d=(0,o.c)(5);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(w,{children:"Add 203.0.113.42 to the denylist on all applications"}),d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(r={placement:"bottom-end"},d[1]=r):r=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(i,{children:"Always allow in this session"}),d[2]=a):a=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(f,{children:[a,e(u,{asChild:!0,children:e(i,{"aria-label":"More approval options",children:e(l,{})})})]}),d[3]=c):c=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(s=t(y,{"data-testid":"approval-card",status:"approved",children:[n,t(_,{children:[t(p,{positioning:r,children:[c,e(m,{children:e(h,{children:"Allow once"})})]}),e(i,{variant:"secondary",color:"neutral",children:"Reject"})]})]}),d[4]=s):s=d[4],s},meta:b},{name:"Rejected",story:()=>{let n,r,a,c,s,d=(0,o.c)(5);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(w,{children:"Add 203.0.113.42 to the denylist on all applications"}),d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(r={placement:"bottom-end"},d[1]=r):r=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(i,{children:"Always allow in this session"}),d[2]=a):a=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(f,{children:[a,e(u,{asChild:!0,children:e(i,{"aria-label":"More approval options",children:e(l,{})})})]}),d[3]=c):c=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(s=t(y,{"data-testid":"approval-card",status:"rejected",rejectedLabel:"Denylist change rejected",children:[n,t(_,{children:[t(p,{positioning:r,children:[c,e(m,{children:e(h,{children:"Allow once"})})]}),e(i,{variant:"secondary",color:"neutral",children:"Reject"})]})]}),d[4]=s):s=d[4],s},meta:b},{name:"Analytics",story:()=>{let n,r,a,c,s,d=(0,o.c)(5);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(w,{children:"Add 203.0.113.42 to the denylist on all applications"}),d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(r={placement:"bottom-end"},d[1]=r):r=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(i,{"data-analytics-id":"AI_APPROVAL_ALLOW_SESSION",children:"Always allow in this session"}),d[2]=a):a=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(f,{children:[a,e(u,{asChild:!0,children:e(i,{"aria-label":"More approval options","data-analytics-id":"AI_APPROVAL_MORE",children:e(l,{})})})]}),d[3]=c):c=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(s=t(y,{"data-testid":"approval-card","data-analytics-id":"AI_APPROVAL_CARD",children:[n,t(_,{children:[t(p,{positioning:r,children:[c,e(m,{children:e(h,{"data-analytics-id":"AI_APPROVAL_ALLOW_ONCE",children:"Allow once"})})]}),e(i,{variant:"secondary",color:"neutral","data-analytics-id":"AI_APPROVAL_REJECT",children:"Reject"})]})]}),d[4]=s):s=d[4],s},meta:b}];function g({entry:e}){let{story:t,meta:n}=e,r={...n.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,o=()=>S.default.createElement(a,r),l={args:r,globals:{theme:"light"},parameters:{...n.parameters,...t.parameters},viewMode:"story"};for(let e of[...n.decorators||[],...t.decorators||[]].reverse()){let t=o;o=()=>e(t,l)}return S.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},S.default.createElement("h2",{className:"text-sm mb-12"},e.name),S.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(S.default.createElement(window.WallarmDS.Root,null,v.map((e,t)=>S.default.createElement(g,{key:t,entry:e})))),t}}})();