@wallarm-org/claude-design 4.13.0 → 4.15.0

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

@@ -9,4 +9,4 @@ var e={vD(e,t,a){let r,n;/**
  * @nolint
  * @preventMunge
  * @preserve-invariant-messages
- */var l,i,o=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,p=(e,t,a,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let n of d(t))u.call(e,n)||n===a||c(e,n,{get:()=>t[n],enumerable:!(r=s(t,n))||r.enumerable});return e},h={},f={$dispatcherGuard:()=>N,$makeReadOnly:()=>M,$reset:()=>k,$structuralCheck:()=>z,c:()=>$,clearRenderCounterRegistry:()=>x,renderCounterRegistry:()=>D,useRenderCounter:()=>O};for(var y in f)c(h,y,{get:f[y],enumerable:!0});e.exports=p(c({},"__esModule",{value:!0}),h);var v=(n=null!=(r=a("C"))?o(m(r)):{},p(r&&r.__esModule?n:c(n,"default",{value:r,enumerable:!0}),r)),{useRef:g,useEffect:w,isValidElement:b}=v,_=null!=(l=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:v.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,S=Symbol.for("react.memo_cache_sentinel"),$="function"==typeof(null==(i=v.__COMPILER_RUNTIME)?void 0:i.c)?v.__COMPILER_RUNTIME.c:function(e){return v.useMemo(()=>{let t=Array(e);for(let a=0;a<e;a++)t[a]=S;return t[S]=!0,t},[])},R={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{R[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 E=null;function A(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}R.useMemoCache=e=>{if(null!=E)return E.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function N(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&(E=t),t===R)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.");A(R)}else if(1===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&(E=null),A(e)}else if(2===e)C.push(t),A(E);else if(3===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");A(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function k(e){for(let t=0;t<e.length;t++)e[t]=S}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function x(){for(let e of D.values())e.forEach(e=>{e.count=0})}function O(e){let t=g(null);null!=t.current&&(t.current.count+=1),w(()=>{if(null==t.current){let a,r={count:0};null==(a=D.get(e))&&(a=new Set,D.set(e,a)),a.add(r),t.current=r}return()=>{var a;let r;null!==t.current&&(a=t.current,null!=(r=D.get(e))&&r.delete(a))}})}var W=new Set;function z(e,t,a,r,n,l){function i(e,t,i,o){let c=`${r}:${l} [${n}] ${a}${i} changed from ${e} to ${t} at depth ${o}`;W.has(c)||(W.add(c),console.error(c))}!function e(t,a,r,n){if(!(n>2)){if(t!==a)if(typeof t!=typeof a)i(`type ${typeof t}`,`type ${typeof a}`,r,n);else if("object"==typeof t){let l=Array.isArray(t),o=Array.isArray(a);if(null===t&&null!==a)i("null",`type ${typeof a}`,r,n);else if(null===a)i(`type ${typeof t}`,"null",r,n);else if(t instanceof Map)if(a instanceof Map)if(t.size!==a.size)i(`Map instance with size ${t.size}`,`Map instance with size ${a.size}`,r,n);else for(let[l,o]of t)a.has(l)?e(o,a.get(l),`${r}.get(${l})`,n+1):i(`Map instance with key ${l}`,`Map instance without key ${l}`,r,n);else i("Map instance","other value",r,n);else if(a instanceof Map)i("other value","Map instance",r,n);else if(t instanceof Set)if(a instanceof Set)if(t.size!==a.size)i(`Set instance with size ${t.size}`,`Set instance with size ${a.size}`,r,n);else for(let e of a)t.has(e)||i(`Set instance without element ${e}`,`Set instance with element ${e}`,r,n);else i("Set instance","other value",r,n);else if(a instanceof Set)i("other value","Set instance",r,n);else if(l||o)if(l!==o)i(`type ${l?"array":"object"}`,`type ${o?"array":"object"}`,r,n);else if(t.length!==a.length)i(`array with length ${t.length}`,`array with length ${a.length}`,r,n);else for(let l=0;l<t.length;l++)e(t[l],a[l],`${r}[${l}]`,n+1);else if(b(t)||b(a))b(t)!==b(a)?i(`type ${b(t)?"React element":"object"}`,`type ${b(a)?"React element":"object"}`,r,n):t.type!==a.type?i(`React element of type ${t.type}`,`React element of type ${a.type}`,r,n):e(t.props,a.props,`[props of ${r}]`,n+1);else{for(let e in a)e in t||i(`object without key ${e}`,`object with key ${e}`,r,n);for(let l in t)l in a?e(t[l],a[l],`${r}.${l}`,n+1):i(`object with key ${l}`,`object without key ${l}`,r,n)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(a)?isNaN(t)!==isNaN(a)&&i(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(a)?"NaN":"non-NaN value"}`,r,n):t!==a&&i(t,a,r,n)}}}(e,t,"",0)}},p(e,t,a){let r=new WeakMap,n=new WeakMap;function l(e,t,a){let l=t,i=a;if("object"==typeof l&&null!==l&&"$$typeof"in l&&l.$$typeof===Symbol.for("react.context")&&"Provider"in l&&(l=l.Provider),"function"==typeof l&&null!=i.ref&&!l.prototype?.isReactComponent){let t=l,a=r.get(e);a||(a=new WeakMap,r.set(e,a));let n=a.get(t);n||((n=e.forwardRef((e,a)=>t({...e,ref:a}))).displayName=t.displayName??t.name,a.set(t,n)),l=n}if("string"==typeof l&&"boolean"==typeof i.inert&&((i={...i}).inert?i.inert="":delete i.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in i&&(i={...i,[t]:i[e]},delete i[e]);return"string"==typeof l&&null!=i.ref&&(l=function(e,t){let a=n.get(e);a||(a=new Map,n.set(e,a));let r=a.get(t);if(r)return r;let l=e.forwardRef((a,r)=>{let n=e.useRef(null);if(!n.current||n.current.original!==r){let e;n.current={original:r,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof r){let a=r(t);e="function"==typeof a?a:void 0}else r&&(r.current=t)}}}return e.createElement(t,{...a,ref:n.current.callback})});return l.displayName=`CanvasHost(${t})`,a.set(t,l),l}(e,l)),{type:l,props:i}}function i(e){let t=(t,a,r)=>{let n=l(e,t,a??{});return e.createElement(n.type,void 0===r?n.props:{...n.props,key:r})};return{jsx:t,jsxs:(t,a,r)=>{let n=l(e,t,a??{}),{children:i,...o}=n.props;return e.createElement(n.type,void 0===r?o:{...o,key:r},...Array.isArray(i)?i:[i])},jsxDEV:t,Fragment:e.Fragment}}function o(e){return{...e,createElement:(t,a,...r)=>{let n=l(e,t,a??{});return e.createElement(n.type,n.props,...r)},cloneElement:(t,a,...r)=>{let n=e.cloneElement(t,a??void 0,...r),i=n.ref,o=l(e,n.type,{...n.props,ref:i});return o.type===n.type&&"string"!=typeof n.type?n:e.createElement(o.type,{...o.props,key:n.key})}}}a.d(t,{MA:()=>i,YJ:()=>o})},C(e,t,a){a.r(t);let r=(0,a("p").YJ)(window.React),{Children:n,Component:l,Fragment:i,Profiler:o,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:u,cloneElement:p,createContext:h,createElement:f,createFactory:y,createRef:v,forwardRef:g,isValidElement:w,lazy:b,memo:_,startTransition:S,unstable_act:$,useCallback:R,useContext:E,useDebugValue:A,useDeferredValue:C,useEffect:N,useId:k,useImperativeHandle:M,useInsertionEffect:D,useLayoutEffect:x,useMemo:O,useReducer:W,useRef:z,useState:T,useSyncExternalStore:j,useTransition:I,version:P,use:L}=r;a.d(t,{},{Children:n,Component:l,Fragment:i,Profiler:o,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:u,cloneElement:p,createContext:h,createElement:f,createFactory:y,createRef:v,default:r,forwardRef:g,isValidElement:w,lazy:b,memo:_,startTransition:S,unstable_act:$,use:L,useCallback:R,useContext:E,useDebugValue:A,useDeferredValue:C,useEffect:N,useId:k,useImperativeHandle:M,useInsertionEffect:D,useLayoutEffect:x,useMemo:O,useReducer:W,useRef:z,useState:T,useSyncExternalStore:j,useTransition:I,version:P})}},t={};function a(r){var n=t[r];if(void 0!==n)return n.exports;var l=t[r]={exports:{}};return e[r](l,l.exports,a),l.exports}a.d=(e,t,r)=>{var n=(t,r)=>{for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,[r]:t[n]})};n(t,"get"),n(r,"value")},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.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:n}=(0,a("p").MA)(window.React);var l=a("vD"),i=a("C");let o=window.WallarmDS.Icons.Activity,c=window.WallarmDS.Icons.RefreshCcw,s=window.WallarmDS.Icons.Trash2,d=window.WallarmDS.Button,m=window.WallarmDS.FieldDescription,u=window.WallarmDS.FieldLabel,p=window.WallarmDS.FileUpload,h=window.WallarmDS.FileUploadError,f=window.WallarmDS.FileUploadTrigger,y=window.WallarmDS.useFilePreviewUrl,v=window.WallarmDS.Loader,g=window.WallarmDS.HStack,w=window.WallarmDS.VStack,b=window.WallarmDS.Avatar,_=window.WallarmDS.AvatarContent,S=window.WallarmDS.AvatarDescription,$=window.WallarmDS.AvatarFallback,R=window.WallarmDS.AvatarImage,E=window.WallarmDS.AvatarName,A=window.WallarmDS.AvatarOverlay,C=`data:image/svg+xml;utf8,${encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' fill='#8ec5fc'/><circle cx='32' cy='26' r='12' fill='#f6d5b8'/><rect x='14' y='42' width='36' height='22' rx='11' fill='#4b6cb7'/></svg>")}`,N="image/png,image/jpeg,image/webp",k={title:"Data Display/Avatar",component:b,parameters:{layout:"centered",docs:{description:{component:"A person's photo on a rounded plate, falling back to initials or an icon while it loads, when it fails, or when there is none. It is decorative beside a visible name; standing alone, give it `aria-label` so it reads as an image. Add `AvatarContent` with `AvatarName` (and an optional `AvatarDescription`) for the user item: plate and name in one row. To let people change it, make the avatar the `FileUploadTrigger` (`asChild`) and give it `as='button'` — picking only previews, and your form uploads."}}},argTypes:{size:{control:"select",options:["sm","md","lg"]}}},M=["sm","md","lg"],D=e=>{let t,a,r,n=(0,l.c)(5),[o,c]=(0,i.useState)(e);n[0]===Symbol.for("react.memo_cache_sentinel")?(t=[],n[0]=t):t=n[0];let[s,d]=(0,i.useState)(t),m=y(s[0]);n[1]===Symbol.for("react.memo_cache_sentinel")?(a=()=>{c(void 0),d([])},n[1]=a):a=n[1];let u=a,p=m??o;return n[2]!==s||n[3]!==p?(r={src:p,files:s,setFiles:d,remove:u},n[2]=s,n[3]=p,n[4]=r):r=n[4],r};function x(a){return t(g,{gap:12,align:"center","data-testid":`avatar-${a}`,children:[t(b,{size:a,"data-testid":`avatar-${a}-photo`,children:[e(R,{src:C}),e($,{name:"Ada Lovelace"})]}),e(b,{size:a,"data-testid":`avatar-${a}-initials`,children:e($,{name:"Ada Lovelace"})}),e(b,{size:a,"data-testid":`avatar-${a}-icon`,children:e($,{})}),t(g,{gap:12,align:"center","data-frame-style":"branded",children:[t(b,{size:a,"data-testid":`avatar-${a}-branded-photo`,children:[e(R,{src:C}),e($,{name:"Ada Lovelace"})]}),e(b,{size:a,"data-testid":`avatar-${a}-branded-initials`,children:e($,{name:"Ada Lovelace"})}),e(b,{size:a,"data-testid":`avatar-${a}-branded-icon`,children:e($,{})})]}),e("span",{className:"sb-annotation",children:a})]},a)}function O(a){return t(w,{gap:8,align:"start","data-testid":`avatar-${a}`,children:[t(b,{size:a,"data-testid":`avatar-${a}-photo`,children:[e(R,{src:C}),e($,{name:"Artem Miskevich"}),e(_,{children:e(E,{children:"Artem Miskevich"})})]}),t(b,{size:a,"data-testid":`avatar-${a}-initials`,children:[e($,{name:"Artem Miskevich"}),e(_,{children:e(E,{children:"Artem Miskevich"})})]}),e("div",{"data-frame-style":"branded",children:t(b,{size:a,"data-testid":`avatar-${a}-branded`,children:[e($,{name:"Artem Miskevich"}),e(_,{children:e(E,{children:"Artem Miskevich"})})]})}),e("div",{className:"w-120",children:t(b,{size:a,"data-testid":`avatar-${a}-truncated`,children:[e($,{name:"Maximilian Alexander-Montgomery"}),e(_,{children:e(E,{children:"Maximilian Alexander-Montgomery"})})]})})]},a)}let W=[{name:"Basic",story:a=>{let r,n,i,o=(0,l.c)(4);return o[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(R,{src:C}),n=e($,{name:"Ada Lovelace"}),o[0]=r,o[1]=n):(r=o[0],n=o[1]),o[2]!==a?(i=t(b,{"data-testid":"avatar",...a,children:[r,n]}),o[2]=a,o[3]=i):i=o[3],i},meta:k},{name:"Sizes",story:()=>{let t,a=(0,l.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(w,{gap:16,align:"start","data-testid":"avatar",children:M.map(x)}),a[0]=t):t=a[0],t},meta:k},{name:"WithName",story:()=>{let t,a,r=(0,l.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=["sm","md"],r[0]=t):t=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(w,{gap:16,align:"start","data-testid":"avatar",children:t.map(O)}),r[1]=a):a=r[1],a},meta:k},{name:"WithDescription",story:()=>{let a,r,n,i,o,c,s,d=(0,l.c)(7);return d[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(R,{src:C}),r=e($,{name:"Artem Miskevich"}),d[0]=a,d[1]=r):(a=d[0],r=d[1]),d[2]===Symbol.for("react.memo_cache_sentinel")?(n=t(b,{"data-testid":"avatar-photo",children:[a,r,t(_,{children:[e(E,{children:"Artem Miskevich"}),e(S,{children:"admin@wallarm.com"})]})]}),d[2]=n):n=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(i=e($,{name:"Artem Miskevich"}),d[3]=i):i=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(o=t(b,{size:"md","data-testid":"avatar-md",children:[i,t(_,{children:[e(E,{children:"Artem Miskevich"}),e(S,{children:"admin@wallarm.com"})]})]}),d[4]=o):o=d[4],d[5]===Symbol.for("react.memo_cache_sentinel")?(c=e($,{}),d[5]=c):c=d[5],d[6]===Symbol.for("react.memo_cache_sentinel")?(s=t(w,{gap:16,align:"start","data-testid":"avatar",children:[n,o,e("div",{className:"w-160",children:t(b,{"data-testid":"avatar-truncated",children:[c,t(_,{children:[e(E,{children:"Maximilian Alexander-Montgomery"}),e(S,{children:"maximilian.alexander-montgomery@wallarm.com"})]})]})})]}),d[6]=s):s=d[6],s},meta:k},{name:"Fallback",story:()=>{let a,r,n,i,o=(0,l.c)(4);return o[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(b,{children:e($,{name:"Grace Hopper"})}),o[0]=a):a=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(b,{children:e($,{})}),o[1]=r):r=o[1],o[2]===Symbol.for("react.memo_cache_sentinel")?(n=t(b,{"data-testid":"avatar-broken-initials",children:[e(R,{src:"/does-not-exist.png"}),e($,{name:"Alan Turing"})]}),o[2]=n):n=o[2],o[3]===Symbol.for("react.memo_cache_sentinel")?(i=t(g,{gap:12,align:"center","data-testid":"avatar",children:[a,r,n,t(b,{"data-testid":"avatar-broken-icon",children:[e(R,{src:"/does-not-exist.png"}),e($,{})]})]}),o[3]=i):i=o[3],i},meta:k},{name:"CustomIcon",story:()=>{let t,a=(0,l.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(b,{"data-testid":"avatar",children:e($,{icon:o})}),a[0]=t):t=a[0],t},meta:k},{name:"Branded",story:()=>{let a,r,n,i=(0,l.c)(3);return i[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(b,{children:e($,{})}),i[0]=a):a=i[0],i[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(b,{children:e($,{name:"Ada Lovelace"})}),i[1]=r):r=i[1],i[2]===Symbol.for("react.memo_cache_sentinel")?(n=t(g,{gap:12,align:"center","data-frame-style":"branded","data-testid":"avatar",children:[a,r,t(b,{"data-testid":"avatar-branded-photo",children:[e(R,{src:C}),e($,{})]})]}),i[2]=n):n=i[2],n},meta:k},{name:"ClickToUpload",story:()=>{let a,r,n,i,o,c,s=(0,l.c)(11),{src:d,files:m,setFiles:u}=D();return s[0]!==d?(a=e(R,{src:d}),s[0]=d,s[1]=a):a=s[1],s[2]===Symbol.for("react.memo_cache_sentinel")?(r=e($,{}),n=e(A,{}),s[2]=r,s[3]=n):(r=s[2],n=s[3]),s[4]!==a?(i=e(f,{asChild:!0,"data-analytics-id":"AVATAR_CHANGE",children:t(b,{as:"button","aria-label":"Change avatar",children:[a,r,n]})}),s[4]=a,s[5]=i):i=s[5],s[6]===Symbol.for("react.memo_cache_sentinel")?(o=e(h,{}),s[6]=o):o=s[6],s[7]!==m||s[8]!==u||s[9]!==i?(c=t(p,{"data-testid":"avatar-upload",accept:N,maxFileSize:524288,value:m,onValueChange:u,children:[i,o]}),s[7]=m,s[8]=u,s[9]=i,s[10]=c):c=s[10],c},meta:k},{name:"WithActions",story:()=>{let a,r,n,i,o,y,v,_,S,E=(0,l.c)(18),{src:A,files:k,setFiles:M,remove:x}=D(C);return E[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(w,{gap:0,align:"start",children:[e(u,{children:"Avatar"}),e(m,{children:"PNG, JPEG, or WebP · up to 512 KB"})]}),E[0]=a):a=E[0],E[1]!==x||E[2]!==A?(r=A&&e(d,{variant:"ghost",color:"neutral",size:"small","aria-label":"Remove avatar","data-testid":"avatar-remove",onClick:x,children:e(s,{})}),E[1]=x,E[2]=A,E[3]=r):r=E[3],E[4]===Symbol.for("react.memo_cache_sentinel")?(n=e(f,{variant:"ghost",color:"neutral",size:"small","aria-label":"Replace avatar",children:e(c,{})}),E[4]=n):n=E[4],E[5]!==A?(i=e(R,{src:A}),E[5]=A,E[6]=i):i=E[6],E[7]===Symbol.for("react.memo_cache_sentinel")?(o=e($,{}),E[7]=o):o=E[7],E[8]!==i?(y=t(b,{"data-testid":"avatar",children:[i,o]}),E[8]=i,E[9]=y):y=E[9],E[10]!==r||E[11]!==y?(v=t(g,{gap:12,align:"center",className:"w-[480px] justify-between",children:[a,t(g,{gap:12,align:"center",children:[r,n,y]})]}),E[10]=r,E[11]=y,E[12]=v):v=E[12],E[13]===Symbol.for("react.memo_cache_sentinel")?(_=e(h,{}),E[13]=_):_=E[13],E[14]!==k||E[15]!==M||E[16]!==v?(S=t(p,{"data-testid":"avatar-upload",accept:N,maxFileSize:524288,value:k,onValueChange:M,children:[v,_]}),E[14]=k,E[15]=M,E[16]=v,E[17]=S):S=E[17],S},meta:k},{name:"Uploading",story:()=>{let a,r,n,i=(0,l.c)(3);return i[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(R,{src:C}),r=e($,{}),i[0]=a,i[1]=r):(a=i[0],r=i[1]),i[2]===Symbol.for("react.memo_cache_sentinel")?(n=e(p,{"data-testid":"avatar-upload",accept:N,children:e(f,{asChild:!0,disabled:!0,children:t(b,{as:"button","aria-label":"Change avatar","aria-busy":!0,children:[a,r,e(A,{visible:!0,children:e(v,{size:"md"})})]})})}),i[2]=n):n=i[2],n},meta:k}];function z({entry:e}){let{story:t,meta:a}=e,r={...a.args,...t.args},n="function"==typeof t||t.$$typeof?t:t.render||a.render||a.component,l=()=>i.default.createElement(n,r),o={args:r,globals:{theme:"light"},parameters:{...a.parameters,...t.parameters},viewMode:"story"};for(let e of[...a.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,o)}return i.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},i.default.createElement("h2",{className:"text-sm mb-12"},e.name),i.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(i.default.createElement(window.WallarmDS.Root,null,W.map((e,t)=>i.default.createElement(z,{key:t,entry:e})))),t}}})();
+ */var l,i,o=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,h=(e,t,a,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let n of d(t))u.call(e,n)||n===a||c(e,n,{get:()=>t[n],enumerable:!(r=s(t,n))||r.enumerable});return e},f={},p={$dispatcherGuard:()=>k,$makeReadOnly:()=>M,$reset:()=>N,$structuralCheck:()=>W,c:()=>A,clearRenderCounterRegistry:()=>x,renderCounterRegistry:()=>D,useRenderCounter:()=>O};for(var y in p)c(f,y,{get:p[y],enumerable:!0});e.exports=h(c({},"__esModule",{value:!0}),f);var v=(n=null!=(r=a("C"))?o(m(r)):{},h(r&&r.__esModule?n:c(n,"default",{value:r,enumerable:!0}),r)),{useRef:g,useEffect:_,isValidElement:w}=v,b=null!=(l=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:v.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,S=Symbol.for("react.memo_cache_sentinel"),A="function"==typeof(null==(i=v.__COMPILER_RUNTIME)?void 0:i.c)?v.__COMPILER_RUNTIME.c:function(e){return v.useMemo(()=>{let t=Array(e);for(let a=0;a<e;a++)t[a]=S;return t[S]=!0,t},[])},$={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{$[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 R=null;function E(e){return b.ReactCurrentDispatcher.current=e,b.ReactCurrentDispatcher.current}$.useMemoCache=e=>{if(null!=R)return R.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function k(e){let t=b.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&(R=t),t===$)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($)}else if(1===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&(R=null),E(e)}else if(2===e)C.push(t),E(R);else if(3===e){let e=C.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 N(e){for(let t=0;t<e.length;t++)e[t]=S}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function x(){for(let e of D.values())e.forEach(e=>{e.count=0})}function O(e){let t=g(null);null!=t.current&&(t.current.count+=1),_(()=>{if(null==t.current){let a,r={count:0};null==(a=D.get(e))&&(a=new Set,D.set(e,a)),a.add(r),t.current=r}return()=>{var a;let r;null!==t.current&&(a=t.current,null!=(r=D.get(e))&&r.delete(a))}})}var z=new Set;function W(e,t,a,r,n,l){function i(e,t,i,o){let c=`${r}:${l} [${n}] ${a}${i} changed from ${e} to ${t} at depth ${o}`;z.has(c)||(z.add(c),console.error(c))}!function e(t,a,r,n){if(!(n>2)){if(t!==a)if(typeof t!=typeof a)i(`type ${typeof t}`,`type ${typeof a}`,r,n);else if("object"==typeof t){let l=Array.isArray(t),o=Array.isArray(a);if(null===t&&null!==a)i("null",`type ${typeof a}`,r,n);else if(null===a)i(`type ${typeof t}`,"null",r,n);else if(t instanceof Map)if(a instanceof Map)if(t.size!==a.size)i(`Map instance with size ${t.size}`,`Map instance with size ${a.size}`,r,n);else for(let[l,o]of t)a.has(l)?e(o,a.get(l),`${r}.get(${l})`,n+1):i(`Map instance with key ${l}`,`Map instance without key ${l}`,r,n);else i("Map instance","other value",r,n);else if(a instanceof Map)i("other value","Map instance",r,n);else if(t instanceof Set)if(a instanceof Set)if(t.size!==a.size)i(`Set instance with size ${t.size}`,`Set instance with size ${a.size}`,r,n);else for(let e of a)t.has(e)||i(`Set instance without element ${e}`,`Set instance with element ${e}`,r,n);else i("Set instance","other value",r,n);else if(a instanceof Set)i("other value","Set instance",r,n);else if(l||o)if(l!==o)i(`type ${l?"array":"object"}`,`type ${o?"array":"object"}`,r,n);else if(t.length!==a.length)i(`array with length ${t.length}`,`array with length ${a.length}`,r,n);else for(let l=0;l<t.length;l++)e(t[l],a[l],`${r}[${l}]`,n+1);else if(w(t)||w(a))w(t)!==w(a)?i(`type ${w(t)?"React element":"object"}`,`type ${w(a)?"React element":"object"}`,r,n):t.type!==a.type?i(`React element of type ${t.type}`,`React element of type ${a.type}`,r,n):e(t.props,a.props,`[props of ${r}]`,n+1);else{for(let e in a)e in t||i(`object without key ${e}`,`object with key ${e}`,r,n);for(let l in t)l in a?e(t[l],a[l],`${r}.${l}`,n+1):i(`object with key ${l}`,`object without key ${l}`,r,n)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(a)?isNaN(t)!==isNaN(a)&&i(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(a)?"NaN":"non-NaN value"}`,r,n):t!==a&&i(t,a,r,n)}}}(e,t,"",0)}},p(e,t,a){let r=new WeakMap,n=new WeakMap;function l(e,t,a){let l=t,i=a;if("object"==typeof l&&null!==l&&"$$typeof"in l&&l.$$typeof===Symbol.for("react.context")&&"Provider"in l&&(l=l.Provider),"function"==typeof l&&null!=i.ref&&!l.prototype?.isReactComponent){let t=l,a=r.get(e);a||(a=new WeakMap,r.set(e,a));let n=a.get(t);n||((n=e.forwardRef((e,a)=>t({...e,ref:a}))).displayName=t.displayName??t.name,a.set(t,n)),l=n}if("string"==typeof l&&"boolean"==typeof i.inert&&((i={...i}).inert?i.inert="":delete i.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in i&&(i={...i,[t]:i[e]},delete i[e]);return"string"==typeof l&&null!=i.ref&&(l=function(e,t){let a=n.get(e);a||(a=new Map,n.set(e,a));let r=a.get(t);if(r)return r;let l=e.forwardRef((a,r)=>{let n=e.useRef(null);if(!n.current||n.current.original!==r){let e;n.current={original:r,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof r){let a=r(t);e="function"==typeof a?a:void 0}else r&&(r.current=t)}}}return e.createElement(t,{...a,ref:n.current.callback})});return l.displayName=`CanvasHost(${t})`,a.set(t,l),l}(e,l)),{type:l,props:i}}function i(e){let t=(t,a,r)=>{let n=l(e,t,a??{});return e.createElement(n.type,void 0===r?n.props:{...n.props,key:r})};return{jsx:t,jsxs:(t,a,r)=>{let n=l(e,t,a??{}),{children:i,...o}=n.props;return e.createElement(n.type,void 0===r?o:{...o,key:r},...Array.isArray(i)?i:[i])},jsxDEV:t,Fragment:e.Fragment}}function o(e){return{...e,createElement:(t,a,...r)=>{let n=l(e,t,a??{});return e.createElement(n.type,n.props,...r)},cloneElement:(t,a,...r)=>{let n=e.cloneElement(t,a??void 0,...r),i=n.ref,o=l(e,n.type,{...n.props,ref:i});return o.type===n.type&&"string"!=typeof n.type?n:e.createElement(o.type,{...o.props,key:n.key})}}}a.d(t,{MA:()=>i,YJ:()=>o})},C(e,t,a){a.r(t);let r=(0,a("p").YJ)(window.React),{Children:n,Component:l,Fragment:i,Profiler:o,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:u,cloneElement:h,createContext:f,createElement:p,createFactory:y,createRef:v,forwardRef:g,isValidElement:_,lazy:w,memo:b,startTransition:S,unstable_act:A,useCallback:$,useContext:R,useDebugValue:E,useDeferredValue:C,useEffect:k,useId:N,useImperativeHandle:M,useInsertionEffect:D,useLayoutEffect:x,useMemo:O,useReducer:z,useRef:W,useState:I,useSyncExternalStore:T,useTransition:j,version:P,use:L}=r;a.d(t,{},{Children:n,Component:l,Fragment:i,Profiler:o,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:u,cloneElement:h,createContext:f,createElement:p,createFactory:y,createRef:v,default:r,forwardRef:g,isValidElement:_,lazy:w,memo:b,startTransition:S,unstable_act:A,use:L,useCallback:$,useContext:R,useDebugValue:E,useDeferredValue:C,useEffect:k,useId:N,useImperativeHandle:M,useInsertionEffect:D,useLayoutEffect:x,useMemo:O,useReducer:z,useRef:W,useState:I,useSyncExternalStore:T,useTransition:j,version:P})}},t={};function a(r){var n=t[r];if(void 0!==n)return n.exports;var l=t[r]={exports:{}};return e[r](l,l.exports,a),l.exports}a.d=(e,t,r)=>{var n=(t,r)=>{for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,[r]:t[n]})};n(t,"get"),n(r,"value")},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.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:n}=(0,a("p").MA)(window.React);var l=a("vD"),i=a("C");let o=window.WallarmDS.Icons.Activity,c=window.WallarmDS.Icons.RefreshCcw,s=window.WallarmDS.Icons.Trash2,d=window.WallarmDS.Button,m=window.WallarmDS.FieldDescription,u=window.WallarmDS.FieldLabel,h=window.WallarmDS.FileUpload,f=window.WallarmDS.FileUploadError,p=window.WallarmDS.FileUploadTrigger,y=window.WallarmDS.useFilePreviewUrl,v=window.WallarmDS.Loader,g=window.WallarmDS.HStack,_=window.WallarmDS.VStack,w=window.WallarmDS.AgentItem,b=window.WallarmDS.Avatar,S=window.WallarmDS.AvatarContent,A=window.WallarmDS.AvatarDescription,$=window.WallarmDS.AvatarFallback,R=window.WallarmDS.AvatarImage,E=window.WallarmDS.AvatarName,C=window.WallarmDS.AvatarOverlay,k=`data:image/svg+xml;utf8,${encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' fill='#8ec5fc'/><circle cx='32' cy='26' r='12' fill='#f6d5b8'/><rect x='14' y='42' width='36' height='22' rx='11' fill='#4b6cb7'/></svg>")}`,N="image/png,image/jpeg,image/webp",M={title:"Data Display/Avatar",component:b,parameters:{layout:"centered",docs:{description:{component:"A person's photo on a rounded plate, falling back to initials or an icon while it loads, when it fails, or when there is none. It is decorative beside a visible name; standing alone, give it `aria-label` so it reads as an image. Add `AvatarContent` with `AvatarName` (and an optional `AvatarDescription`) for the user item: plate and name in one row. An AI agent takes `AgentItem` instead of `Avatar`: its character, with no plate, before the same `AvatarContent`. To let people change it, make the avatar the `FileUploadTrigger` (`asChild`) and give it `as='button'` — picking only previews, and your form uploads."}}},argTypes:{size:{control:"select",options:["sm","md","lg"]}}},D=["sm","md","lg"],x=e=>{let t,a,r,n=(0,l.c)(5),[o,c]=(0,i.useState)(e);n[0]===Symbol.for("react.memo_cache_sentinel")?(t=[],n[0]=t):t=n[0];let[s,d]=(0,i.useState)(t),m=y(s[0]);n[1]===Symbol.for("react.memo_cache_sentinel")?(a=()=>{c(void 0),d([])},n[1]=a):a=n[1];let u=a,h=m??o;return n[2]!==s||n[3]!==h?(r={src:h,files:s,setFiles:d,remove:u},n[2]=s,n[3]=h,n[4]=r):r=n[4],r};function O(a){return t(g,{gap:12,align:"center","data-testid":`avatar-${a}`,children:[t(b,{size:a,"data-testid":`avatar-${a}-photo`,children:[e(R,{src:k}),e($,{name:"Ada Lovelace"})]}),e(b,{size:a,"data-testid":`avatar-${a}-initials`,children:e($,{name:"Ada Lovelace"})}),e(b,{size:a,"data-testid":`avatar-${a}-icon`,children:e($,{})}),t(g,{gap:12,align:"center","data-frame-style":"branded",children:[t(b,{size:a,"data-testid":`avatar-${a}-branded-photo`,children:[e(R,{src:k}),e($,{name:"Ada Lovelace"})]}),e(b,{size:a,"data-testid":`avatar-${a}-branded-initials`,children:e($,{name:"Ada Lovelace"})}),e(b,{size:a,"data-testid":`avatar-${a}-branded-icon`,children:e($,{})})]}),e("span",{className:"sb-annotation",children:a})]},a)}function z(a){return t(_,{gap:8,align:"start","data-testid":`avatar-${a}`,children:[t(b,{size:a,"data-testid":`avatar-${a}-photo`,children:[e(R,{src:k}),e($,{name:"Artem Miskevich"}),e(S,{children:e(E,{children:"Artem Miskevich"})})]}),t(b,{size:a,"data-testid":`avatar-${a}-initials`,children:[e($,{name:"Artem Miskevich"}),e(S,{children:e(E,{children:"Artem Miskevich"})})]}),e("div",{"data-frame-style":"branded",children:t(b,{size:a,"data-testid":`avatar-${a}-branded`,children:[e($,{name:"Artem Miskevich"}),e(S,{children:e(E,{children:"Artem Miskevich"})})]})}),e("div",{className:"w-120",children:t(b,{size:a,"data-testid":`avatar-${a}-truncated`,children:[e($,{name:"Maximilian Alexander-Montgomery"}),e(S,{children:e(E,{children:"Maximilian Alexander-Montgomery"})})]})})]},a)}function W(t){return e(w,{agent:"radar",size:t,"data-testid":`avatar-agent-${t}`,children:e(S,{children:e(E,{children:"Radar"})})},t)}let I=[{name:"Basic",story:a=>{let r,n,i,o=(0,l.c)(4);return o[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(R,{src:k}),n=e($,{name:"Ada Lovelace"}),o[0]=r,o[1]=n):(r=o[0],n=o[1]),o[2]!==a?(i=t(b,{"data-testid":"avatar",...a,children:[r,n]}),o[2]=a,o[3]=i):i=o[3],i},meta:M},{name:"Sizes",story:()=>{let t,a=(0,l.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(_,{gap:16,align:"start","data-testid":"avatar",children:D.map(O)}),a[0]=t):t=a[0],t},meta:M},{name:"WithName",story:()=>{let t,a,r=(0,l.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=["sm","md"],r[0]=t):t=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(_,{gap:16,align:"start","data-testid":"avatar",children:t.map(z)}),r[1]=a):a=r[1],a},meta:M},{name:"WithDescription",story:()=>{let a,r,n,i,o,c,s,d=(0,l.c)(7);return d[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(R,{src:k}),r=e($,{name:"Artem Miskevich"}),d[0]=a,d[1]=r):(a=d[0],r=d[1]),d[2]===Symbol.for("react.memo_cache_sentinel")?(n=t(b,{"data-testid":"avatar-photo",children:[a,r,t(S,{children:[e(E,{children:"Artem Miskevich"}),e(A,{children:"admin@wallarm.com"})]})]}),d[2]=n):n=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(i=e($,{name:"Artem Miskevich"}),d[3]=i):i=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(o=t(b,{size:"md","data-testid":"avatar-md",children:[i,t(S,{children:[e(E,{children:"Artem Miskevich"}),e(A,{children:"admin@wallarm.com"})]})]}),d[4]=o):o=d[4],d[5]===Symbol.for("react.memo_cache_sentinel")?(c=e($,{}),d[5]=c):c=d[5],d[6]===Symbol.for("react.memo_cache_sentinel")?(s=t(_,{gap:16,align:"start","data-testid":"avatar",children:[n,o,e("div",{className:"w-160",children:t(b,{"data-testid":"avatar-truncated",children:[c,t(S,{children:[e(E,{children:"Maximilian Alexander-Montgomery"}),e(A,{children:"maximilian.alexander-montgomery@wallarm.com"})]})]})})]}),d[6]=s):s=d[6],s},meta:M},{name:"Agent",story:()=>{let a,r,n,i,o,c,s=(0,l.c)(6);return s[0]===Symbol.for("react.memo_cache_sentinel")?(a=e($,{name:"Artem Miskevich"}),s[0]=a):a=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(b,{size:"sm","data-testid":"avatar-person",children:[a,e(S,{children:e(E,{children:"Artem Miskevich"})})]}),n=[20,24,16],s[1]=r,s[2]=n):(r=s[1],n=s[2]),s[3]===Symbol.for("react.memo_cache_sentinel")?(i=n.map(W),s[3]=i):i=s[3],s[4]===Symbol.for("react.memo_cache_sentinel")?(o=e(w,{agent:"sift","data-testid":"avatar-agent-description",children:t(S,{children:[e(E,{children:"Sift"}),e(A,{children:"False Positives Analyzer"})]})}),s[4]=o):o=s[4],s[5]===Symbol.for("react.memo_cache_sentinel")?(c=t(_,{gap:16,align:"start","data-testid":"avatar",children:[r,i,o,e("div",{className:"w-120",children:e(w,{agent:"acquit","data-testid":"avatar-agent-truncated",children:e(S,{children:e(E,{children:"Acquit, the false positive resolver"})})})})]}),s[5]=c):c=s[5],c},meta:M},{name:"Fallback",story:()=>{let a,r,n,i,o=(0,l.c)(4);return o[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(b,{children:e($,{name:"Grace Hopper"})}),o[0]=a):a=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(b,{children:e($,{})}),o[1]=r):r=o[1],o[2]===Symbol.for("react.memo_cache_sentinel")?(n=t(b,{"data-testid":"avatar-broken-initials",children:[e(R,{src:"/does-not-exist.png"}),e($,{name:"Alan Turing"})]}),o[2]=n):n=o[2],o[3]===Symbol.for("react.memo_cache_sentinel")?(i=t(g,{gap:12,align:"center","data-testid":"avatar",children:[a,r,n,t(b,{"data-testid":"avatar-broken-icon",children:[e(R,{src:"/does-not-exist.png"}),e($,{})]})]}),o[3]=i):i=o[3],i},meta:M},{name:"CustomIcon",story:()=>{let t,a=(0,l.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(b,{"data-testid":"avatar",children:e($,{icon:o})}),a[0]=t):t=a[0],t},meta:M},{name:"Branded",story:()=>{let a,r,n,i=(0,l.c)(3);return i[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(b,{children:e($,{})}),i[0]=a):a=i[0],i[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(b,{children:e($,{name:"Ada Lovelace"})}),i[1]=r):r=i[1],i[2]===Symbol.for("react.memo_cache_sentinel")?(n=t(g,{gap:12,align:"center","data-frame-style":"branded","data-testid":"avatar",children:[a,r,t(b,{"data-testid":"avatar-branded-photo",children:[e(R,{src:k}),e($,{})]})]}),i[2]=n):n=i[2],n},meta:M},{name:"ClickToUpload",story:()=>{let a,r,n,i,o,c,s=(0,l.c)(11),{src:d,files:m,setFiles:u}=x();return s[0]!==d?(a=e(R,{src:d}),s[0]=d,s[1]=a):a=s[1],s[2]===Symbol.for("react.memo_cache_sentinel")?(r=e($,{}),n=e(C,{}),s[2]=r,s[3]=n):(r=s[2],n=s[3]),s[4]!==a?(i=e(p,{asChild:!0,"data-analytics-id":"AVATAR_CHANGE",children:t(b,{as:"button","aria-label":"Change avatar",children:[a,r,n]})}),s[4]=a,s[5]=i):i=s[5],s[6]===Symbol.for("react.memo_cache_sentinel")?(o=e(f,{}),s[6]=o):o=s[6],s[7]!==m||s[8]!==u||s[9]!==i?(c=t(h,{"data-testid":"avatar-upload",accept:N,maxFileSize:524288,value:m,onValueChange:u,children:[i,o]}),s[7]=m,s[8]=u,s[9]=i,s[10]=c):c=s[10],c},meta:M},{name:"WithActions",story:()=>{let a,r,n,i,o,y,v,w,S,A=(0,l.c)(18),{src:E,files:C,setFiles:M,remove:D}=x(k);return A[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(_,{gap:0,align:"start",children:[e(u,{children:"Avatar"}),e(m,{children:"PNG, JPEG, or WebP · up to 512 KB"})]}),A[0]=a):a=A[0],A[1]!==D||A[2]!==E?(r=E&&e(d,{variant:"ghost",color:"neutral",size:"small","aria-label":"Remove avatar","data-testid":"avatar-remove",onClick:D,children:e(s,{})}),A[1]=D,A[2]=E,A[3]=r):r=A[3],A[4]===Symbol.for("react.memo_cache_sentinel")?(n=e(p,{variant:"ghost",color:"neutral",size:"small","aria-label":"Replace avatar",children:e(c,{})}),A[4]=n):n=A[4],A[5]!==E?(i=e(R,{src:E}),A[5]=E,A[6]=i):i=A[6],A[7]===Symbol.for("react.memo_cache_sentinel")?(o=e($,{}),A[7]=o):o=A[7],A[8]!==i?(y=t(b,{"data-testid":"avatar",children:[i,o]}),A[8]=i,A[9]=y):y=A[9],A[10]!==r||A[11]!==y?(v=t(g,{gap:12,align:"center",className:"w-[480px] justify-between",children:[a,t(g,{gap:12,align:"center",children:[r,n,y]})]}),A[10]=r,A[11]=y,A[12]=v):v=A[12],A[13]===Symbol.for("react.memo_cache_sentinel")?(w=e(f,{}),A[13]=w):w=A[13],A[14]!==C||A[15]!==M||A[16]!==v?(S=t(h,{"data-testid":"avatar-upload",accept:N,maxFileSize:524288,value:C,onValueChange:M,children:[v,w]}),A[14]=C,A[15]=M,A[16]=v,A[17]=S):S=A[17],S},meta:M},{name:"Uploading",story:()=>{let a,r,n,i=(0,l.c)(3);return i[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(R,{src:k}),r=e($,{}),i[0]=a,i[1]=r):(a=i[0],r=i[1]),i[2]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{"data-testid":"avatar-upload",accept:N,children:e(p,{asChild:!0,disabled:!0,children:t(b,{as:"button","aria-label":"Change avatar","aria-busy":!0,children:[a,r,e(C,{visible:!0,children:e(v,{size:"md"})})]})})}),i[2]=n):n=i[2],n},meta:M}];function T({entry:e}){let{story:t,meta:a}=e,r={...a.args,...t.args},n="function"==typeof t||t.$$typeof?t:t.render||a.render||a.component,l=()=>i.default.createElement(n,r),o={args:r,globals:{theme:"light"},parameters:{...a.parameters,...t.parameters},viewMode:"story"};for(let e of[...a.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,o)}return i.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},i.default.createElement("h2",{className:"text-sm mb-12"},e.name),i.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(i.default.createElement(window.WallarmDS.Root,null,I.map((e,t)=>i.default.createElement(T,{key:t,entry:e})))),t}}})();

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

@@ -35,6 +35,13 @@ Steps with children toggle open; a nested chain can hold its own collapsible ste
 
 Source: ChainOfThought/ChainOfThought.stories.tsx#Nested
 
+### WithAgent
+
+A sub-agent step shows the sub-agent's 16px `AgentGlyph` in the `icon` slot when the agent is known, a custom
+agent its `defaultLook(uid)`; the label names it. `Bot` stays the fallback for an unknown agent.
+
+Source: ChainOfThought/ChainOfThought.stories.tsx#WithAgent
+
 ### SimpleRows
 
 `icon={null}` gives the Figma "Simple" row: no icon cell, no connector, 16px apart.
@@ -129,6 +136,7 @@ import {
   Terminal,
   Wrench,
 } from '../../icons';
+import { AgentGlyph, defaultLook } from '../AgentGlyph';
 import { Button } from '../Button';
 import { InlineCodeSnippet } from '../CodeSnippet';
 import { ChainOfThought, ChainOfThoughtStep } from './index';
@@ -197,6 +205,36 @@ export const Nested: StoryFn<typeof meta> = () => (
   </ChainOfThought>
 );
 
+/**
+ * A sub-agent step shows the sub-agent's 16px `AgentGlyph` in the `icon` slot when the agent is known, a custom
+ * agent its `defaultLook(uid)`; the label names it. `Bot` stays the fallback for an unknown agent.
+ */
+export const WithAgent: StoryFn<typeof meta> = () => (
+  <ChainOfThought data-testid='cot'>
+    <ChainOfThoughtStep icon={<Brain />} label='Thought for 5s' />
+    <ChainOfThoughtStep
+      icon={<AgentGlyph agent='radar' size={16} />}
+      label='Ran Radar, Attack Anomaly Investigator'
+      defaultOpen
+      data-testid='cot-agent'
+    >
+      <ChainOfThought>
+        <ChainOfThoughtStep icon={<Search />} label='Searched for anomalous requests' />
+        <ChainOfThoughtStep icon={<Wrench />} label='Called get_attacks' />
+      </ChainOfThought>
+    </ChainOfThoughtStep>
+    <ChainOfThoughtStep
+      icon={<AgentGlyph agent='sift' size={16} />}
+      label='Ran Sift, False Positives Analyzer'
+    />
+    <ChainOfThoughtStep
+      icon={<AgentGlyph look={defaultLook('agent-7f3a')} size={16} />}
+      label='Ran Tune'
+    />
+    <ChainOfThoughtStep icon={<Bot />} label='Ran an unknown subagent' />
+  </ChainOfThought>
+);
+
 /** `icon={null}` gives the Figma "Simple" row: no icon cell, no connector, 16px apart. */
 export const SimpleRows: StoryFn<typeof meta> = () => (
   <ChainOfThought data-testid='cot'>

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

@@ -9,4 +9,4 @@ var e={vD(e,t,n){let a,l;/**
  * @nolint
  * @preventMunge
  * @preserve-invariant-messages
- */var o,r,c=Object.create,i=Object.defineProperty,s=Object.getOwnPropertyDescriptor,m=Object.getOwnPropertyNames,d=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,h=(e,t,n,a)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of m(t))u.call(e,l)||l===n||i(e,l,{get:()=>t[l],enumerable:!(a=s(t,l))||a.enumerable});return e},f={},p={$dispatcherGuard:()=>D,$makeReadOnly:()=>O,$reset:()=>N,$structuralCheck:()=>M,c:()=>C,clearRenderCounterRegistry:()=>I,renderCounterRegistry:()=>T,useRenderCounter:()=>x};for(var y in p)i(f,y,{get:p[y],enumerable:!0});e.exports=h(i({},"__esModule",{value:!0}),f);var b=(l=null!=(a=n("C"))?c(d(a)):{},h(a&&a.__esModule?l:i(l,"default",{value:a,enumerable:!0}),a)),{useRef:_,useEffect:S,isValidElement:w}=b,g=null!=(o=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:b.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,R=Symbol.for("react.memo_cache_sentinel"),C="function"==typeof(null==(r=b.__COMPILER_RUNTIME)?void 0:r.c)?b.__COMPILER_RUNTIME.c:function(e){return b.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=R;return t[R]=!0,t},[])},v={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{v[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 E=null;function k(e){return g.ReactCurrentDispatcher.current=e,g.ReactCurrentDispatcher.current}v.useMemoCache=e=>{if(null!=E)return E.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var $=[];function D(e){let t=g.ReactCurrentDispatcher.current;if(0===e){if($.push(t),1===$.length&&(E=t),t===v)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.");k(v)}else if(1===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===$.length&&(E=null),k(e)}else if(2===e)$.push(t),k(E);else if(3===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");k(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function N(e){for(let t=0;t<e.length;t++)e[t]=R}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var T=new Map;function I(){for(let e of T.values())e.forEach(e=>{e.count=0})}function x(e){let t=_(null);null!=t.current&&(t.current.count+=1),S(()=>{if(null==t.current){let n,a={count:0};null==(n=T.get(e))&&(n=new Set,T.set(e,n)),n.add(a),t.current=a}return()=>{var n;let a;null!==t.current&&(n=t.current,null!=(a=T.get(e))&&a.delete(n))}})}var W=new Set;function M(e,t,n,a,l,o){function r(e,t,r,c){let i=`${a}:${o} [${l}] ${n}${r} changed from ${e} to ${t} at depth ${c}`;W.has(i)||(W.add(i),console.error(i))}!function e(t,n,a,l){if(!(l>2)){if(t!==n)if(typeof t!=typeof n)r(`type ${typeof t}`,`type ${typeof n}`,a,l);else if("object"==typeof t){let o=Array.isArray(t),c=Array.isArray(n);if(null===t&&null!==n)r("null",`type ${typeof n}`,a,l);else if(null===n)r(`type ${typeof t}`,"null",a,l);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)r(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,a,l);else for(let[o,c]of t)n.has(o)?e(c,n.get(o),`${a}.get(${o})`,l+1):r(`Map instance with key ${o}`,`Map instance without key ${o}`,a,l);else r("Map instance","other value",a,l);else if(n instanceof Map)r("other value","Map instance",a,l);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)r(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,a,l);else for(let e of n)t.has(e)||r(`Set instance without element ${e}`,`Set instance with element ${e}`,a,l);else r("Set instance","other value",a,l);else if(n instanceof Set)r("other value","Set instance",a,l);else if(o||c)if(o!==c)r(`type ${o?"array":"object"}`,`type ${c?"array":"object"}`,a,l);else if(t.length!==n.length)r(`array with length ${t.length}`,`array with length ${n.length}`,a,l);else for(let o=0;o<t.length;o++)e(t[o],n[o],`${a}[${o}]`,l+1);else if(w(t)||w(n))w(t)!==w(n)?r(`type ${w(t)?"React element":"object"}`,`type ${w(n)?"React element":"object"}`,a,l):t.type!==n.type?r(`React element of type ${t.type}`,`React element of type ${n.type}`,a,l):e(t.props,n.props,`[props of ${a}]`,l+1);else{for(let e in n)e in t||r(`object without key ${e}`,`object with key ${e}`,a,l);for(let o in t)o in n?e(t[o],n[o],`${a}.${o}`,l+1):r(`object with key ${o}`,`object without key ${o}`,a,l)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&r(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,a,l):t!==n&&r(t,n,a,l)}}}(e,t,"",0)}},p(e,t,n){let a=new WeakMap,l=new WeakMap;function o(e,t,n){let o=t,r=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!=r.ref&&!o.prototype?.isReactComponent){let t=o,n=a.get(e);n||(n=new WeakMap,a.set(e,n));let l=n.get(t);l||((l=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,l)),o=l}if("string"==typeof o&&"boolean"==typeof r.inert&&((r={...r}).inert?r.inert="":delete r.inert),"string"==typeof o)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in r&&(r={...r,[t]:r[e]},delete r[e]);return"string"==typeof o&&null!=r.ref&&(o=function(e,t){let n=l.get(e);n||(n=new Map,l.set(e,n));let a=n.get(t);if(a)return a;let o=e.forwardRef((n,a)=>{let l=e.useRef(null);if(!l.current||l.current.original!==a){let e;l.current={original:a,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof a){let n=a(t);e="function"==typeof n?n:void 0}else a&&(a.current=t)}}}return e.createElement(t,{...n,ref:l.current.callback})});return o.displayName=`CanvasHost(${t})`,n.set(t,o),o}(e,o)),{type:o,props:r}}function r(e){let t=(t,n,a)=>{let l=o(e,t,n??{});return e.createElement(l.type,void 0===a?l.props:{...l.props,key:a})};return{jsx:t,jsxs:(t,n,a)=>{let l=o(e,t,n??{}),{children:r,...c}=l.props;return e.createElement(l.type,void 0===a?c:{...c,key:a},...Array.isArray(r)?r:[r])},jsxDEV:t,Fragment:e.Fragment}}function c(e){return{...e,createElement:(t,n,...a)=>{let l=o(e,t,n??{});return e.createElement(l.type,l.props,...a)},cloneElement:(t,n,...a)=>{let l=e.cloneElement(t,n??void 0,...a),r=l.ref,c=o(e,l.type,{...l.props,ref:r});return c.type===l.type&&"string"!=typeof l.type?l:e.createElement(c.type,{...c.props,key:l.key})}}}n.d(t,{MA:()=>r,YJ:()=>c})},C(e,t,n){n.r(t);let a=(0,n("p").YJ)(window.React),{Children:l,Component:o,Fragment:r,Profiler:c,PureComponent:i,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:u,cloneElement:h,createContext:f,createElement:p,createFactory:y,createRef:b,forwardRef:_,isValidElement:S,lazy:w,memo:g,startTransition:R,unstable_act:C,useCallback:v,useContext:E,useDebugValue:k,useDeferredValue:$,useEffect:D,useId:N,useImperativeHandle:O,useInsertionEffect:T,useLayoutEffect:I,useMemo:x,useReducer:W,useRef:M,useState:A,useSyncExternalStore:j,useTransition:P,version:L,use:z}=a;n.d(t,{},{Children:l,Component:o,Fragment:r,Profiler:c,PureComponent:i,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:u,cloneElement:h,createContext:f,createElement:p,createFactory:y,createRef:b,default:a,forwardRef:_,isValidElement:S,lazy:w,memo:g,startTransition:R,unstable_act:C,use:z,useCallback:v,useContext:E,useDebugValue:k,useDeferredValue:$,useEffect:D,useId:N,useImperativeHandle:O,useInsertionEffect:T,useLayoutEffect:I,useMemo:x,useReducer:W,useRef:M,useState:A,useSyncExternalStore:j,useTransition:P,version:L})}},t={};function n(a){var l=t[a];if(void 0!==l)return l.exports;var o=t[a]={exports:{}};return e[a](o,o.exports,n),o.exports}n.d=(e,t,a)=>{var l=(t,a)=>{for(var l in t)n.o(t,l)&&!n.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,[a]:t[l]})};l(t,"get"),l(a,"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:a,Fragment:l}=(0,n("p").MA)(window.React);var o=n("vD"),r=n("C");let c=window.WallarmDS.Icons.Activity,i=window.WallarmDS.Icons.BadgeCheck,s=window.WallarmDS.Icons.Bot,m=window.WallarmDS.Icons.Brain,d=window.WallarmDS.Icons.CircleDashed,u=window.WallarmDS.Icons.Database,h=window.WallarmDS.Icons.Download,f=window.WallarmDS.Icons.FilePlus,p=window.WallarmDS.Icons.FileText,y=window.WallarmDS.Icons.Filter,b=window.WallarmDS.Icons.GitBranch,_=window.WallarmDS.Icons.Globe,S=window.WallarmDS.Icons.Link,w=window.WallarmDS.Icons.ListChecks,g=window.WallarmDS.Icons.Pencil,R=window.WallarmDS.Icons.Plug,C=window.WallarmDS.Icons.Radar,v=window.WallarmDS.Icons.Search,E=window.WallarmDS.Icons.ShieldAlert,k=window.WallarmDS.Icons.Terminal,$=window.WallarmDS.Icons.Wrench,D=window.WallarmDS.Button,N=window.WallarmDS.InlineCodeSnippet,O=window.WallarmDS.ChainOfThought,T=window.WallarmDS.ChainOfThoughtStep,I={title:"AI/ChainOfThought",component:O,subcomponents:{ChainOfThoughtStep:T},parameters:{layout:"padded",docs:{description:{component:"A read-only log of what Wally did while answering — searches, tool calls, its own reasoning — so the user can see how it got there without the steps crowding the answer. Each `ChainOfThoughtStep` is one line: a type icon, a label and an optional right-aligned metric, joined to the next step by a thin connector. A step with children becomes a collapsible trigger, and children can be another `ChainOfThought`, so runs nest as deep as the agent did. The app owns the mapping from step type to icon (see **Type Icons**); the DS only draws the row."}}},decorators:[t=>e("div",{className:"max-w-[400px]",children:e(t,{})})]},x=[{icon:e(v,{}),label:"Searched for ABC"},{icon:e(_,{}),label:"Searched the web"}],W=[{icon:e(m,{}),label:"Thinking...",done:"Thought for 5s"},{icon:e(v,{}),label:"Searching for blocked requests...",done:"Searched for blocked requests"},{icon:e(u,{}),label:"Querying attack events...",done:"Queried attack events"},{icon:e(f,{}),label:"Creating a rule draft...",done:"Created a rule draft"}];function M(t){return e(T,{icon:t.icon,label:t.label},t.label)}let A=[{name:"Basic",story:()=>{let n,a,l,r,c=(0,o.c)(4);return c[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(T,{icon:e(m,{}),label:"Thought for 5s"}),c[0]=n):n=c[0],c[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(T,{icon:e(v,{}),label:"Searched for blocked requests"}),c[1]=a):a=c[1],c[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(T,{icon:e(u,{}),label:"Queried attack events"}),c[2]=l):l=c[2],c[3]===Symbol.for("react.memo_cache_sentinel")?(r=t(O,{"data-testid":"cot",children:[n,a,l,e(T,{icon:e(p,{}),label:"Read the policy for api.example.com"})]}),c[3]=r):r=c[3],r},meta:I},{name:"Nested",story:()=>{let n,a,l,r,c,i,d,u,h=(0,o.c)(8);return h[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(T,{icon:e(m,{}),label:"Thought for 5s"}),h[0]=n):n=h[0],h[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(s,{}),h[1]=a):a=h[1],h[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(T,{icon:e(v,{}),label:"Searched for ABC"}),h[2]=l):l=h[2],h[3]===Symbol.for("react.memo_cache_sentinel")?(r=e($,{}),h[3]=r):r=h[3],h[4]===Symbol.for("react.memo_cache_sentinel")?(c=e(T,{icon:r,label:"Called get_attacks","data-testid":"cot-tool",children:e("p",{children:"Returned 42 attacks over the last 24 hours."})}),h[4]=c):c=h[4],h[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(T,{icon:a,label:"Ran the triage subagent",defaultOpen:!0,"data-testid":"cot-subagent",children:t(O,{children:[l,c,e(T,{icon:e(w,{}),label:"Made a plan"})]})}),h[5]=i):i=h[5],h[6]===Symbol.for("react.memo_cache_sentinel")?(d=e(f,{}),h[6]=d):d=h[6],h[7]===Symbol.for("react.memo_cache_sentinel")?(u=t(O,{"data-testid":"cot",children:[n,i,e(T,{icon:d,label:"Created a rule draft","data-testid":"cot-collapsed",children:e("p",{children:"Draft rule blocks SQL injection on /api/v1/login."})})]}),h[7]=u):u=h[7],u},meta:I},{name:"SimpleRows",story:()=>{let n,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(O,{"data-testid":"cot",children:[e(T,{icon:null,label:"Checked 3 applications"}),e(T,{icon:null,label:"Compared rule sets"}),e(T,{icon:null,label:"Found 2 overlapping rules"})]}),a[0]=n):n=a[0],n},meta:I},{name:"SimpleResult",story:()=>{let n,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(O,{"data-testid":"cot",children:[e(T,{icon:null,label:"Scanned endpoints",metric:"1,204"}),e(T,{icon:null,label:"Matched attacks",metric:"42"}),e(T,{icon:null,label:"Elapsed",metric:"3m 45s"})]}),a[0]=n):n=a[0],n},meta:I},{name:"Working",story:()=>{let n,a,l=(0,o.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(T,{icon:e(v,{}),label:"Searched for ABC"}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(a=t(O,{"data-testid":"cot",children:[n,e(T,{icon:e(_,{}),label:"Searching the web...",status:"running"})]}),l[1]=a):a=l[1],a},meta:I},{name:"Streaming",story:()=>{let n,a,l,c,i,s,m=(0,o.c)(14),[d,u]=(0,r.useState)(1),h=d>W.length;m[0]!==d?(n=()=>{u(d+1)},m[0]=d,m[1]=n):n=m[1];let f=n;m[2]===Symbol.for("react.memo_cache_sentinel")?(a=x.map(M),m[2]=a):a=m[2],m[3]!==d?(l=W.slice(0,d).map((t,n)=>{let a=n===d-1;return e(T,{icon:t.icon,label:a?t.label:t.done,status:a?"running":"done"},t.done)}),m[3]=d,m[4]=l):l=m[4],m[5]!==l?(c=t(O,{"data-testid":"cot",children:[a,l]}),m[5]=l,m[6]=c):c=m[6];let p=d===W.length?"Finish":"Next step";return m[7]!==h||m[8]!==f||m[9]!==p?(i=e("div",{children:e(D,{variant:"secondary",color:"neutral",size:"small",disabled:h,onClick:f,"data-testid":"next-step",children:p})}),m[7]=h,m[8]=f,m[9]=p,m[10]=i):i=m[10],m[11]!==c||m[12]!==i?(s=t("div",{className:"flex flex-col gap-12",children:[c,i]}),m[11]=c,m[12]=i,m[13]=s):s=m[13],s},meta:I},{name:"ErrorStep",story:()=>{let n,a,l,r,c=(0,o.c)(4);return c[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(T,{icon:e(v,{}),label:"Searched for ABC"}),c[0]=n):n=c[0],c[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(R,{}),c[1]=a):a=c[1],c[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(T,{icon:a,label:"get_attacks failed",status:"error",defaultOpen:!0,"data-testid":"cot-error",children:e("p",{children:"Request failed: 503 Service Unavailable."})}),c[2]=l):l=c[2],c[3]===Symbol.for("react.memo_cache_sentinel")?(r=t(O,{"data-testid":"cot",children:[n,l,e(T,{icon:e(R,{}),label:"get_rules failed",status:"error"})]}),c[3]=r):r=c[3],r},meta:I},{name:"WorkedSummary",story:()=>{let n,a,l,r,s,d=(0,o.c)(5);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(c,{}),d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(T,{icon:e(m,{}),label:"Thought for 5s"}),d[1]=a):a=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(T,{icon:e(k,{}),label:"Ran wallarm-cli status"}),d[2]=l):l=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(r=e(T,{icon:e(C,{}),label:"Scanned 12 hosts"}),d[3]=r):r=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(s=e(O,{"data-testid":"cot",children:e(T,{icon:n,label:"Worked for 3m 45s",defaultOpen:!0,"data-testid":"cot-summary",children:t(O,{children:[a,l,r,e(T,{icon:e(i,{}),label:"Created a mitigation rule"})]})})}),d[4]=s):s=d[4],s},meta:I},{name:"RichTextContent",story:()=>{let n,a,l=(0,o.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(m,{}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(O,{"data-testid":"cot",children:t(T,{icon:n,label:"Thought for 12s",defaultOpen:!0,children:[t("p",{children:["The user wants to know why requests to"," ",e(N,{code:"/api/login",copyable:!1,size:"sm",className:"text-text-secondary"})," ","were blocked."]}),t("ul",{children:[e("li",{children:"Check recent attacks on that path."}),e("li",{children:"Compare them with the active rules."})]}),e("p",{children:"Then suggest the narrowest rule change."})]})}),l[1]=a):a=l[1],a},meta:I},{name:"TypeIcons",story:()=>{let n,a,l,r,D,N,I,x,W,M,A,j,P,L,z,B,F,U,q,G,V,Y=(0,o.c)(21);return Y[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(T,{icon:e(m,{}),label:"thinking"}),Y[0]=n):n=Y[0],Y[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(T,{icon:e(w,{}),label:"plan"}),Y[1]=a):a=Y[1],Y[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(T,{icon:e(b,{}),label:"decision"}),Y[2]=l):l=Y[2],Y[3]===Symbol.for("react.memo_cache_sentinel")?(r=e(T,{icon:e(s,{}),label:"subagent"}),Y[3]=r):r=Y[3],Y[4]===Symbol.for("react.memo_cache_sentinel")?(D=e(T,{icon:e($,{}),label:"tool"}),Y[4]=D):D=Y[4],Y[5]===Symbol.for("react.memo_cache_sentinel")?(N=e(T,{icon:e(k,{}),label:"command"}),Y[5]=N):N=Y[5],Y[6]===Symbol.for("react.memo_cache_sentinel")?(I=e(T,{icon:e(_,{}),label:"web search"}),Y[6]=I):I=Y[6],Y[7]===Symbol.for("react.memo_cache_sentinel")?(x=e(T,{icon:e(v,{}),label:"query"}),Y[7]=x):x=Y[7],Y[8]===Symbol.for("react.memo_cache_sentinel")?(W=e(T,{icon:e(u,{}),label:"datastore"}),Y[8]=W):W=Y[8],Y[9]===Symbol.for("react.memo_cache_sentinel")?(M=e(T,{icon:e(R,{}),label:"api"}),Y[9]=M):M=Y[9],Y[10]===Symbol.for("react.memo_cache_sentinel")?(A=e(T,{icon:e(p,{}),label:"read"}),Y[10]=A):A=Y[10],Y[11]===Symbol.for("react.memo_cache_sentinel")?(j=e(T,{icon:e(h,{}),label:"fetch"}),Y[11]=j):j=Y[11],Y[12]===Symbol.for("react.memo_cache_sentinel")?(P=e(T,{icon:e(y,{}),label:"filter"}),Y[12]=P):P=Y[12],Y[13]===Symbol.for("react.memo_cache_sentinel")?(L=e(T,{icon:e(f,{}),label:"create"}),Y[13]=L):L=Y[13],Y[14]===Symbol.for("react.memo_cache_sentinel")?(z=e(T,{icon:e(g,{}),label:"edit"}),Y[14]=z):z=Y[14],Y[15]===Symbol.for("react.memo_cache_sentinel")?(B=e(T,{icon:e(S,{}),label:"cite"}),Y[15]=B):B=Y[15],Y[16]===Symbol.for("react.memo_cache_sentinel")?(F=e(T,{icon:e(E,{}),label:"threat"}),Y[16]=F):F=Y[16],Y[17]===Symbol.for("react.memo_cache_sentinel")?(U=e(T,{icon:e(C,{}),label:"scan"}),Y[17]=U):U=Y[17],Y[18]===Symbol.for("react.memo_cache_sentinel")?(q=e(T,{icon:e(d,{}),label:"pending / default"}),Y[18]=q):q=Y[18],Y[19]===Symbol.for("react.memo_cache_sentinel")?(G=e(T,{icon:e(c,{}),label:"summary"}),Y[19]=G):G=Y[19],Y[20]===Symbol.for("react.memo_cache_sentinel")?(V=t(O,{"data-testid":"cot",children:[n,a,l,r,D,N,I,x,W,M,A,j,P,L,z,B,F,U,q,G,e(T,{icon:e(i,{}),label:'"Created" example'})]}),Y[20]=V):V=Y[20],V},meta:I},{name:"Controlled",story:()=>{let n,a,l,c,i,s=(0,o.c)(9),[d,u]=(0,r.useState)(!1);s[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(m,{}),s[0]=n):n=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(a=e("p",{children:"Reasoning goes here."}),s[1]=a):a=s[1],s[2]!==d?(l=e(O,{"data-testid":"cot",children:e(T,{icon:n,label:"Thought for 5s",open:d,onOpenChange:u,children:a})}),s[2]=d,s[3]=l):l=s[3];let h=String(d);return s[4]!==h?(c=t("code",{className:"text-xs text-text-secondary",children:["open: ",h]}),s[4]=h,s[5]=c):c=s[5],s[6]!==l||s[7]!==c?(i=t("div",{className:"flex flex-col gap-12",children:[l,c]}),s[6]=l,s[7]=c,s[8]=i):i=s[8],i},meta:I},{name:"Analytics",story:()=>{let t,n,a=(0,o.c)(2);return a[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(m,{}),a[0]=t):t=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(O,{"data-testid":"cot",children:e(T,{icon:t,label:"Thought for 5s","data-analytics-id":"COT_STEP_TOGGLE","data-analytics-props":'{"type":"thinking"}',children:e("p",{children:"Reasoning goes here."})})}),a[1]=n):n=a[1],n},meta:I}];function j({entry:e}){let{story:t,meta:n}=e,a={...n.args,...t.args},l="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,o=()=>r.default.createElement(l,a),c={args:a,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,c)}return r.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},r.default.createElement("h2",{className:"text-sm mb-12"},e.name),r.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(r.default.createElement(window.WallarmDS.Root,null,A.map((e,t)=>r.default.createElement(j,{key:t,entry:e})))),t}}})();
+ */var o,r,c=Object.create,i=Object.defineProperty,s=Object.getOwnPropertyDescriptor,m=Object.getOwnPropertyNames,d=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,h=(e,t,n,a)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of m(t))u.call(e,l)||l===n||i(e,l,{get:()=>t[l],enumerable:!(a=s(t,l))||a.enumerable});return e},f={},p={$dispatcherGuard:()=>D,$makeReadOnly:()=>O,$reset:()=>N,$structuralCheck:()=>M,c:()=>v,clearRenderCounterRegistry:()=>I,renderCounterRegistry:()=>T,useRenderCounter:()=>W};for(var y in p)i(f,y,{get:p[y],enumerable:!0});e.exports=h(i({},"__esModule",{value:!0}),f);var b=(l=null!=(a=n("C"))?c(d(a)):{},h(a&&a.__esModule?l:i(l,"default",{value:a,enumerable:!0}),a)),{useRef:_,useEffect:S,isValidElement:w}=b,g=null!=(o=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:b.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,R=Symbol.for("react.memo_cache_sentinel"),v="function"==typeof(null==(r=b.__COMPILER_RUNTIME)?void 0:r.c)?b.__COMPILER_RUNTIME.c:function(e){return b.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=R;return t[R]=!0,t},[])},C={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{C[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 E=null;function k(e){return g.ReactCurrentDispatcher.current=e,g.ReactCurrentDispatcher.current}C.useMemoCache=e=>{if(null!=E)return E.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var $=[];function D(e){let t=g.ReactCurrentDispatcher.current;if(0===e){if($.push(t),1===$.length&&(E=t),t===C)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.");k(C)}else if(1===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===$.length&&(E=null),k(e)}else if(2===e)$.push(t),k(E);else if(3===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");k(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function N(e){for(let t=0;t<e.length;t++)e[t]=R}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var T=new Map;function I(){for(let e of T.values())e.forEach(e=>{e.count=0})}function W(e){let t=_(null);null!=t.current&&(t.current.count+=1),S(()=>{if(null==t.current){let n,a={count:0};null==(n=T.get(e))&&(n=new Set,T.set(e,n)),n.add(a),t.current=a}return()=>{var n;let a;null!==t.current&&(n=t.current,null!=(a=T.get(e))&&a.delete(n))}})}var x=new Set;function M(e,t,n,a,l,o){function r(e,t,r,c){let i=`${a}:${o} [${l}] ${n}${r} changed from ${e} to ${t} at depth ${c}`;x.has(i)||(x.add(i),console.error(i))}!function e(t,n,a,l){if(!(l>2)){if(t!==n)if(typeof t!=typeof n)r(`type ${typeof t}`,`type ${typeof n}`,a,l);else if("object"==typeof t){let o=Array.isArray(t),c=Array.isArray(n);if(null===t&&null!==n)r("null",`type ${typeof n}`,a,l);else if(null===n)r(`type ${typeof t}`,"null",a,l);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)r(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,a,l);else for(let[o,c]of t)n.has(o)?e(c,n.get(o),`${a}.get(${o})`,l+1):r(`Map instance with key ${o}`,`Map instance without key ${o}`,a,l);else r("Map instance","other value",a,l);else if(n instanceof Map)r("other value","Map instance",a,l);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)r(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,a,l);else for(let e of n)t.has(e)||r(`Set instance without element ${e}`,`Set instance with element ${e}`,a,l);else r("Set instance","other value",a,l);else if(n instanceof Set)r("other value","Set instance",a,l);else if(o||c)if(o!==c)r(`type ${o?"array":"object"}`,`type ${c?"array":"object"}`,a,l);else if(t.length!==n.length)r(`array with length ${t.length}`,`array with length ${n.length}`,a,l);else for(let o=0;o<t.length;o++)e(t[o],n[o],`${a}[${o}]`,l+1);else if(w(t)||w(n))w(t)!==w(n)?r(`type ${w(t)?"React element":"object"}`,`type ${w(n)?"React element":"object"}`,a,l):t.type!==n.type?r(`React element of type ${t.type}`,`React element of type ${n.type}`,a,l):e(t.props,n.props,`[props of ${a}]`,l+1);else{for(let e in n)e in t||r(`object without key ${e}`,`object with key ${e}`,a,l);for(let o in t)o in n?e(t[o],n[o],`${a}.${o}`,l+1):r(`object with key ${o}`,`object without key ${o}`,a,l)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&r(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,a,l):t!==n&&r(t,n,a,l)}}}(e,t,"",0)}},p(e,t,n){let a=new WeakMap,l=new WeakMap;function o(e,t,n){let o=t,r=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!=r.ref&&!o.prototype?.isReactComponent){let t=o,n=a.get(e);n||(n=new WeakMap,a.set(e,n));let l=n.get(t);l||((l=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,l)),o=l}if("string"==typeof o&&"boolean"==typeof r.inert&&((r={...r}).inert?r.inert="":delete r.inert),"string"==typeof o)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in r&&(r={...r,[t]:r[e]},delete r[e]);return"string"==typeof o&&null!=r.ref&&(o=function(e,t){let n=l.get(e);n||(n=new Map,l.set(e,n));let a=n.get(t);if(a)return a;let o=e.forwardRef((n,a)=>{let l=e.useRef(null);if(!l.current||l.current.original!==a){let e;l.current={original:a,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof a){let n=a(t);e="function"==typeof n?n:void 0}else a&&(a.current=t)}}}return e.createElement(t,{...n,ref:l.current.callback})});return o.displayName=`CanvasHost(${t})`,n.set(t,o),o}(e,o)),{type:o,props:r}}function r(e){let t=(t,n,a)=>{let l=o(e,t,n??{});return e.createElement(l.type,void 0===a?l.props:{...l.props,key:a})};return{jsx:t,jsxs:(t,n,a)=>{let l=o(e,t,n??{}),{children:r,...c}=l.props;return e.createElement(l.type,void 0===a?c:{...c,key:a},...Array.isArray(r)?r:[r])},jsxDEV:t,Fragment:e.Fragment}}function c(e){return{...e,createElement:(t,n,...a)=>{let l=o(e,t,n??{});return e.createElement(l.type,l.props,...a)},cloneElement:(t,n,...a)=>{let l=e.cloneElement(t,n??void 0,...a),r=l.ref,c=o(e,l.type,{...l.props,ref:r});return c.type===l.type&&"string"!=typeof l.type?l:e.createElement(c.type,{...c.props,key:l.key})}}}n.d(t,{MA:()=>r,YJ:()=>c})},C(e,t,n){n.r(t);let a=(0,n("p").YJ)(window.React),{Children:l,Component:o,Fragment:r,Profiler:c,PureComponent:i,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:u,cloneElement:h,createContext:f,createElement:p,createFactory:y,createRef:b,forwardRef:_,isValidElement:S,lazy:w,memo:g,startTransition:R,unstable_act:v,useCallback:C,useContext:E,useDebugValue:k,useDeferredValue:$,useEffect:D,useId:N,useImperativeHandle:O,useInsertionEffect:T,useLayoutEffect:I,useMemo:W,useReducer:x,useRef:M,useState:A,useSyncExternalStore:j,useTransition:P,version:z,use:L}=a;n.d(t,{},{Children:l,Component:o,Fragment:r,Profiler:c,PureComponent:i,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:u,cloneElement:h,createContext:f,createElement:p,createFactory:y,createRef:b,default:a,forwardRef:_,isValidElement:S,lazy:w,memo:g,startTransition:R,unstable_act:v,use:L,useCallback:C,useContext:E,useDebugValue:k,useDeferredValue:$,useEffect:D,useId:N,useImperativeHandle:O,useInsertionEffect:T,useLayoutEffect:I,useMemo:W,useReducer:x,useRef:M,useState:A,useSyncExternalStore:j,useTransition:P,version:z})}},t={};function n(a){var l=t[a];if(void 0!==l)return l.exports;var o=t[a]={exports:{}};return e[a](o,o.exports,n),o.exports}n.d=(e,t,a)=>{var l=(t,a)=>{for(var l in t)n.o(t,l)&&!n.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,[a]:t[l]})};l(t,"get"),l(a,"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:a,Fragment:l}=(0,n("p").MA)(window.React);var o=n("vD"),r=n("C");let c=window.WallarmDS.Icons.Activity,i=window.WallarmDS.Icons.BadgeCheck,s=window.WallarmDS.Icons.Bot,m=window.WallarmDS.Icons.Brain,d=window.WallarmDS.Icons.CircleDashed,u=window.WallarmDS.Icons.Database,h=window.WallarmDS.Icons.Download,f=window.WallarmDS.Icons.FilePlus,p=window.WallarmDS.Icons.FileText,y=window.WallarmDS.Icons.Filter,b=window.WallarmDS.Icons.GitBranch,_=window.WallarmDS.Icons.Globe,S=window.WallarmDS.Icons.Link,w=window.WallarmDS.Icons.ListChecks,g=window.WallarmDS.Icons.Pencil,R=window.WallarmDS.Icons.Plug,v=window.WallarmDS.Icons.Radar,C=window.WallarmDS.Icons.Search,E=window.WallarmDS.Icons.ShieldAlert,k=window.WallarmDS.Icons.Terminal,$=window.WallarmDS.Icons.Wrench,D=window.WallarmDS.AgentGlyph,N=window.WallarmDS.defaultLook,O=window.WallarmDS.Button,T=window.WallarmDS.InlineCodeSnippet,I=window.WallarmDS.ChainOfThought,W=window.WallarmDS.ChainOfThoughtStep,x={title:"AI/ChainOfThought",component:I,subcomponents:{ChainOfThoughtStep:W},parameters:{layout:"padded",docs:{description:{component:"A read-only log of what Wally did while answering — searches, tool calls, its own reasoning — so the user can see how it got there without the steps crowding the answer. Each `ChainOfThoughtStep` is one line: a type icon, a label and an optional right-aligned metric, joined to the next step by a thin connector. A step with children becomes a collapsible trigger, and children can be another `ChainOfThought`, so runs nest as deep as the agent did. The app owns the mapping from step type to icon (see **Type Icons**); the DS only draws the row."}}},decorators:[t=>e("div",{className:"max-w-[400px]",children:e(t,{})})]},M=[{icon:e(C,{}),label:"Searched for ABC"},{icon:e(_,{}),label:"Searched the web"}],A=[{icon:e(m,{}),label:"Thinking...",done:"Thought for 5s"},{icon:e(C,{}),label:"Searching for blocked requests...",done:"Searched for blocked requests"},{icon:e(u,{}),label:"Querying attack events...",done:"Queried attack events"},{icon:e(f,{}),label:"Creating a rule draft...",done:"Created a rule draft"}];function j(t){return e(W,{icon:t.icon,label:t.label},t.label)}let P=[{name:"Basic",story:()=>{let n,a,l,r,c=(0,o.c)(4);return c[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(W,{icon:e(m,{}),label:"Thought for 5s"}),c[0]=n):n=c[0],c[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(W,{icon:e(C,{}),label:"Searched for blocked requests"}),c[1]=a):a=c[1],c[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(W,{icon:e(u,{}),label:"Queried attack events"}),c[2]=l):l=c[2],c[3]===Symbol.for("react.memo_cache_sentinel")?(r=t(I,{"data-testid":"cot",children:[n,a,l,e(W,{icon:e(p,{}),label:"Read the policy for api.example.com"})]}),c[3]=r):r=c[3],r},meta:x},{name:"Nested",story:()=>{let n,a,l,r,c,i,d,u,h=(0,o.c)(8);return h[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(W,{icon:e(m,{}),label:"Thought for 5s"}),h[0]=n):n=h[0],h[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(s,{}),h[1]=a):a=h[1],h[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(W,{icon:e(C,{}),label:"Searched for ABC"}),h[2]=l):l=h[2],h[3]===Symbol.for("react.memo_cache_sentinel")?(r=e($,{}),h[3]=r):r=h[3],h[4]===Symbol.for("react.memo_cache_sentinel")?(c=e(W,{icon:r,label:"Called get_attacks","data-testid":"cot-tool",children:e("p",{children:"Returned 42 attacks over the last 24 hours."})}),h[4]=c):c=h[4],h[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(W,{icon:a,label:"Ran the triage subagent",defaultOpen:!0,"data-testid":"cot-subagent",children:t(I,{children:[l,c,e(W,{icon:e(w,{}),label:"Made a plan"})]})}),h[5]=i):i=h[5],h[6]===Symbol.for("react.memo_cache_sentinel")?(d=e(f,{}),h[6]=d):d=h[6],h[7]===Symbol.for("react.memo_cache_sentinel")?(u=t(I,{"data-testid":"cot",children:[n,i,e(W,{icon:d,label:"Created a rule draft","data-testid":"cot-collapsed",children:e("p",{children:"Draft rule blocks SQL injection on /api/v1/login."})})]}),h[7]=u):u=h[7],u},meta:x},{name:"WithAgent",story:()=>{let n,a,l,r,c,i,d,u=(0,o.c)(7);return u[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(W,{icon:e(m,{}),label:"Thought for 5s"}),u[0]=n):n=u[0],u[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(D,{agent:"radar",size:16}),u[1]=a):a=u[1],u[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(W,{icon:e(C,{}),label:"Searched for anomalous requests"}),u[2]=l):l=u[2],u[3]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{icon:a,label:"Ran Radar, Attack Anomaly Investigator",defaultOpen:!0,"data-testid":"cot-agent",children:t(I,{children:[l,e(W,{icon:e($,{}),label:"Called get_attacks"})]})}),u[3]=r):r=u[3],u[4]===Symbol.for("react.memo_cache_sentinel")?(c=e(W,{icon:e(D,{agent:"sift",size:16}),label:"Ran Sift, False Positives Analyzer"}),u[4]=c):c=u[4],u[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(W,{icon:e(D,{look:N("agent-7f3a"),size:16}),label:"Ran Tune"}),u[5]=i):i=u[5],u[6]===Symbol.for("react.memo_cache_sentinel")?(d=t(I,{"data-testid":"cot",children:[n,r,c,i,e(W,{icon:e(s,{}),label:"Ran an unknown subagent"})]}),u[6]=d):d=u[6],d},meta:x},{name:"SimpleRows",story:()=>{let n,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(I,{"data-testid":"cot",children:[e(W,{icon:null,label:"Checked 3 applications"}),e(W,{icon:null,label:"Compared rule sets"}),e(W,{icon:null,label:"Found 2 overlapping rules"})]}),a[0]=n):n=a[0],n},meta:x},{name:"SimpleResult",story:()=>{let n,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(I,{"data-testid":"cot",children:[e(W,{icon:null,label:"Scanned endpoints",metric:"1,204"}),e(W,{icon:null,label:"Matched attacks",metric:"42"}),e(W,{icon:null,label:"Elapsed",metric:"3m 45s"})]}),a[0]=n):n=a[0],n},meta:x},{name:"Working",story:()=>{let n,a,l=(0,o.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(W,{icon:e(C,{}),label:"Searched for ABC"}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(a=t(I,{"data-testid":"cot",children:[n,e(W,{icon:e(_,{}),label:"Searching the web...",status:"running"})]}),l[1]=a):a=l[1],a},meta:x},{name:"Streaming",story:()=>{let n,a,l,c,i,s,m=(0,o.c)(14),[d,u]=(0,r.useState)(1),h=d>A.length;m[0]!==d?(n=()=>{u(d+1)},m[0]=d,m[1]=n):n=m[1];let f=n;m[2]===Symbol.for("react.memo_cache_sentinel")?(a=M.map(j),m[2]=a):a=m[2],m[3]!==d?(l=A.slice(0,d).map((t,n)=>{let a=n===d-1;return e(W,{icon:t.icon,label:a?t.label:t.done,status:a?"running":"done"},t.done)}),m[3]=d,m[4]=l):l=m[4],m[5]!==l?(c=t(I,{"data-testid":"cot",children:[a,l]}),m[5]=l,m[6]=c):c=m[6];let p=d===A.length?"Finish":"Next step";return m[7]!==h||m[8]!==f||m[9]!==p?(i=e("div",{children:e(O,{variant:"secondary",color:"neutral",size:"small",disabled:h,onClick:f,"data-testid":"next-step",children:p})}),m[7]=h,m[8]=f,m[9]=p,m[10]=i):i=m[10],m[11]!==c||m[12]!==i?(s=t("div",{className:"flex flex-col gap-12",children:[c,i]}),m[11]=c,m[12]=i,m[13]=s):s=m[13],s},meta:x},{name:"ErrorStep",story:()=>{let n,a,l,r,c=(0,o.c)(4);return c[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(W,{icon:e(C,{}),label:"Searched for ABC"}),c[0]=n):n=c[0],c[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(R,{}),c[1]=a):a=c[1],c[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(W,{icon:a,label:"get_attacks failed",status:"error",defaultOpen:!0,"data-testid":"cot-error",children:e("p",{children:"Request failed: 503 Service Unavailable."})}),c[2]=l):l=c[2],c[3]===Symbol.for("react.memo_cache_sentinel")?(r=t(I,{"data-testid":"cot",children:[n,l,e(W,{icon:e(R,{}),label:"get_rules failed",status:"error"})]}),c[3]=r):r=c[3],r},meta:x},{name:"WorkedSummary",story:()=>{let n,a,l,r,s,d=(0,o.c)(5);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(c,{}),d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(W,{icon:e(m,{}),label:"Thought for 5s"}),d[1]=a):a=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(W,{icon:e(k,{}),label:"Ran wallarm-cli status"}),d[2]=l):l=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{icon:e(v,{}),label:"Scanned 12 hosts"}),d[3]=r):r=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(s=e(I,{"data-testid":"cot",children:e(W,{icon:n,label:"Worked for 3m 45s",defaultOpen:!0,"data-testid":"cot-summary",children:t(I,{children:[a,l,r,e(W,{icon:e(i,{}),label:"Created a mitigation rule"})]})})}),d[4]=s):s=d[4],s},meta:x},{name:"RichTextContent",story:()=>{let n,a,l=(0,o.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(m,{}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(I,{"data-testid":"cot",children:t(W,{icon:n,label:"Thought for 12s",defaultOpen:!0,children:[t("p",{children:["The user wants to know why requests to"," ",e(T,{code:"/api/login",copyable:!1,size:"sm",className:"text-text-secondary"})," ","were blocked."]}),t("ul",{children:[e("li",{children:"Check recent attacks on that path."}),e("li",{children:"Compare them with the active rules."})]}),e("p",{children:"Then suggest the narrowest rule change."})]})}),l[1]=a):a=l[1],a},meta:x},{name:"TypeIcons",story:()=>{let n,a,l,r,D,N,O,T,x,M,A,j,P,z,L,F,B,U,q,G,V,Y=(0,o.c)(21);return Y[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(W,{icon:e(m,{}),label:"thinking"}),Y[0]=n):n=Y[0],Y[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(W,{icon:e(w,{}),label:"plan"}),Y[1]=a):a=Y[1],Y[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(W,{icon:e(b,{}),label:"decision"}),Y[2]=l):l=Y[2],Y[3]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{icon:e(s,{}),label:"subagent"}),Y[3]=r):r=Y[3],Y[4]===Symbol.for("react.memo_cache_sentinel")?(D=e(W,{icon:e($,{}),label:"tool"}),Y[4]=D):D=Y[4],Y[5]===Symbol.for("react.memo_cache_sentinel")?(N=e(W,{icon:e(k,{}),label:"command"}),Y[5]=N):N=Y[5],Y[6]===Symbol.for("react.memo_cache_sentinel")?(O=e(W,{icon:e(_,{}),label:"web search"}),Y[6]=O):O=Y[6],Y[7]===Symbol.for("react.memo_cache_sentinel")?(T=e(W,{icon:e(C,{}),label:"query"}),Y[7]=T):T=Y[7],Y[8]===Symbol.for("react.memo_cache_sentinel")?(x=e(W,{icon:e(u,{}),label:"datastore"}),Y[8]=x):x=Y[8],Y[9]===Symbol.for("react.memo_cache_sentinel")?(M=e(W,{icon:e(R,{}),label:"api"}),Y[9]=M):M=Y[9],Y[10]===Symbol.for("react.memo_cache_sentinel")?(A=e(W,{icon:e(p,{}),label:"read"}),Y[10]=A):A=Y[10],Y[11]===Symbol.for("react.memo_cache_sentinel")?(j=e(W,{icon:e(h,{}),label:"fetch"}),Y[11]=j):j=Y[11],Y[12]===Symbol.for("react.memo_cache_sentinel")?(P=e(W,{icon:e(y,{}),label:"filter"}),Y[12]=P):P=Y[12],Y[13]===Symbol.for("react.memo_cache_sentinel")?(z=e(W,{icon:e(f,{}),label:"create"}),Y[13]=z):z=Y[13],Y[14]===Symbol.for("react.memo_cache_sentinel")?(L=e(W,{icon:e(g,{}),label:"edit"}),Y[14]=L):L=Y[14],Y[15]===Symbol.for("react.memo_cache_sentinel")?(F=e(W,{icon:e(S,{}),label:"cite"}),Y[15]=F):F=Y[15],Y[16]===Symbol.for("react.memo_cache_sentinel")?(B=e(W,{icon:e(E,{}),label:"threat"}),Y[16]=B):B=Y[16],Y[17]===Symbol.for("react.memo_cache_sentinel")?(U=e(W,{icon:e(v,{}),label:"scan"}),Y[17]=U):U=Y[17],Y[18]===Symbol.for("react.memo_cache_sentinel")?(q=e(W,{icon:e(d,{}),label:"pending / default"}),Y[18]=q):q=Y[18],Y[19]===Symbol.for("react.memo_cache_sentinel")?(G=e(W,{icon:e(c,{}),label:"summary"}),Y[19]=G):G=Y[19],Y[20]===Symbol.for("react.memo_cache_sentinel")?(V=t(I,{"data-testid":"cot",children:[n,a,l,r,D,N,O,T,x,M,A,j,P,z,L,F,B,U,q,G,e(W,{icon:e(i,{}),label:'"Created" example'})]}),Y[20]=V):V=Y[20],V},meta:x},{name:"Controlled",story:()=>{let n,a,l,c,i,s=(0,o.c)(9),[d,u]=(0,r.useState)(!1);s[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(m,{}),s[0]=n):n=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(a=e("p",{children:"Reasoning goes here."}),s[1]=a):a=s[1],s[2]!==d?(l=e(I,{"data-testid":"cot",children:e(W,{icon:n,label:"Thought for 5s",open:d,onOpenChange:u,children:a})}),s[2]=d,s[3]=l):l=s[3];let h=String(d);return s[4]!==h?(c=t("code",{className:"text-xs text-text-secondary",children:["open: ",h]}),s[4]=h,s[5]=c):c=s[5],s[6]!==l||s[7]!==c?(i=t("div",{className:"flex flex-col gap-12",children:[l,c]}),s[6]=l,s[7]=c,s[8]=i):i=s[8],i},meta:x},{name:"Analytics",story:()=>{let t,n,a=(0,o.c)(2);return a[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(m,{}),a[0]=t):t=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(I,{"data-testid":"cot",children:e(W,{icon:t,label:"Thought for 5s","data-analytics-id":"COT_STEP_TOGGLE","data-analytics-props":'{"type":"thinking"}',children:e("p",{children:"Reasoning goes here."})})}),a[1]=n):n=a[1],n},meta:x}];function z({entry:e}){let{story:t,meta:n}=e,a={...n.args,...t.args},l="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,o=()=>r.default.createElement(l,a),c={args:a,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,c)}return r.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},r.default.createElement("h2",{className:"text-sm mb-12"},e.name),r.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(r.default.createElement(window.WallarmDS.Root,null,P.map((e,t)=>r.default.createElement(z,{key:t,entry:e})))),t}}})();

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

@@ -77,7 +77,7 @@ Source: Chat/Chat.stories.tsx#Analytics
 
 ### Trigger
 
-The app-header button that opens the panel (Figma 101:1034): the Wally mascot in a ghost small
+The app-header button that opens the panel (Figma 101:1034): the 24 px Wally glyph in a ghost small
 `Button`, with an "Ask Wally" tooltip that doubles as its accessible name (`label`).
 
 Source: Chat/Chat.stories.tsx#Trigger
@@ -577,7 +577,7 @@ export const Analytics: StoryFn<typeof meta> = () => (
 );
 
 /**
- * The app-header button that opens the panel (Figma 101:1034): the Wally mascot in a ghost small
+ * The app-header button that opens the panel (Figma 101:1034): the 24 px Wally glyph in a ghost small
  * `Button`, with an "Ask Wally" tooltip that doubles as its accessible name (`label`).
  */
 export const Trigger: StoryFn<typeof meta> = () => <ChatTrigger data-testid='chat-trigger' />;

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

@@ -58,6 +58,13 @@ rather than after it. `DrawerHeader` stacks the two, keeping the close button ri
 
 Source: Drawer/Drawer.stories.tsx#WithDescription
 
+### WithAgent
+
+Agents as actors in the header: the meta line names who found and who last changed the item with `AgentItem`
+(20 px glyph beside the text-sm name, no plate), composed in `DrawerDescription` like any other inline content.
+
+Source: Drawer/Drawer.stories.tsx#WithAgent
+
 ### WithFooterLeftActions
 
 A left-aligned secondary action, separated from the committing pair on the right.
@@ -168,6 +175,8 @@ import { createListCollection } from '@ark-ui/react/collection';
 import type { Meta, StoryFn } from 'storybook-react-rsbuild';
 import { PanelRight } from '../../icons';
 import { Attribute, AttributeLabel, AttributeValue } from '../Attribute';
+import { AgentItem, AvatarContent, AvatarName } from '../Avatar';
+import { Badge } from '../Badge';
 import { Button } from '../Button';
 import {
   Dialog,
@@ -374,6 +383,70 @@ export const WithDescription: StoryFn<DrawerProps> = () => {
   );
 };
 
+/**
+ * Agents as actors in the header: the meta line names who found and who last changed the item with `AgentItem`
+ * (20 px glyph beside the text-sm name, no plate), composed in `DrawerDescription` like any other inline content.
+ */
+export const WithAgent: StoryFn<DrawerProps> = () => (
+  <Drawer width={DRAWER_SIZES.medium} data-testid='agent-drawer'>
+    <DrawerTrigger asChild>
+      <Button variant='outline' color='neutral'>
+        Open Agent Drawer
+      </Button>
+    </DrawerTrigger>
+
+    <DrawerContent>
+      <DrawerHeader>
+        <DrawerTitle>
+          Attack spike{' '}
+          <span className='font-mono font-normal text-text-secondary'>
+            GET shop.acme.internal/search
+          </span>
+        </DrawerTitle>
+        <DrawerDescription>
+          <HStack
+            gap={8}
+            align='center'
+            wrap='wrap'
+            className='mt-4'
+            data-testid='agent-drawer-meta'
+          >
+            <Badge color='amber' type='outline'>
+              Needs approval
+            </Badge>
+            <span aria-hidden='true'>·</span>
+            <Text size='sm' weight='medium' color='primary'>
+              Malicious anomaly
+            </Text>
+            <span aria-hidden='true'>·</span>
+            {/* AgentItem is inline: it sits on the text line, so the comma follows the name as in a sentence */}
+            <Text size='sm' color='secondary'>
+              Found by{' '}
+              <AgentItem agent='radar' data-testid='agent-drawer-found-by'>
+                <AvatarContent>
+                  <AvatarName className='font-medium'>Radar</AvatarName>
+                </AvatarContent>
+              </AgentItem>
+              , updated by{' '}
+              <AgentItem agent='sift' data-testid='agent-drawer-updated-by'>
+                <AvatarContent>
+                  <AvatarName className='font-medium'>Sift</AvatarName>
+                </AvatarContent>
+              </AgentItem>{' '}
+              <Text asChild size='sm' decoration='dashed'>
+                <span>5 min ago</span>
+              </Text>
+            </Text>
+          </HStack>
+        </DrawerDescription>
+      </DrawerHeader>
+      <DrawerBody>
+        <ContentPlaceholder fillHeight />
+      </DrawerBody>
+    </DrawerContent>
+  </Drawer>
+);
+
 /**
  * A left-aligned secondary action, separated from the committing pair on the right.
  */