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

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

@@ -0,0 +1,412 @@
+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.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `type` | `"a" \| "i" \| "1" \| "A" \| "I" \| undefined` | no | — |  |
+| `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.ChainOfThoughtStep` — `ChainOfThoughtStepProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+Icon steps joined by connectors; the last step drops its line.
+
+Source: ChainOfThought/ChainOfThought.stories.tsx#Basic
+
+### Nested
+
+Steps with children toggle open; a nested chain can hold its own collapsible steps.
+
+Source: ChainOfThought/ChainOfThought.stories.tsx#Nested
+
+### SimpleRows
+
+`icon={null}` gives the Figma "Simple" row: no icon cell, no connector, 16px apart.
+
+Source: ChainOfThought/ChainOfThought.stories.tsx#SimpleRows
+
+### SimpleResult
+
+`metric` adds a right-aligned mono value — the Figma "Simple-result" row.
+
+Source: ChainOfThought/ChainOfThought.stories.tsx#SimpleResult
+
+### Working
+
+`status='running'` shimmers the label while the step is in progress.
+
+Source: ChainOfThought/ChainOfThought.stories.tsx#Working
+
+### Streaming
+
+A step that mounts as `running` fades in and settles 4px; the previous step's connector grows
+toward it; on `done` the shimmer fades into the plain label. Steps that mount `done` (history)
+appear instantly. All of it is off under `prefers-reduced-motion`.
+
+Source: ChainOfThought/ChainOfThought.stories.tsx#Streaming
+
+### ErrorStep
+
+`status='error'` tints the label and the type icon danger, for a step that failed. Word the
+label as a failure too (color alone is not enough); put the detail in the step's children.
+Not in Figma yet; pending design review.
+
+Source: ChainOfThought/ChainOfThought.stories.tsx#ErrorStep
+
+### WorkedSummary
+
+The whole run folded under one "Worked for …" step with the Activity icon.
+
+Source: ChainOfThought/ChainOfThought.stories.tsx#WorkedSummary
+
+### RichTextContent
+
+Nested content can be prose: paragraphs, bullets and inline code.
+
+Source: ChainOfThought/ChainOfThought.stories.tsx#RichTextContent
+
+### TypeIcons
+
+The recommended step-type → icon mapping. The app owns it; this is documentation only.
+
+Source: ChainOfThought/ChainOfThought.stories.tsx#TypeIcons
+
+### Controlled
+
+`open` + `onOpenChange` drive the step from outside.
+
+Source: ChainOfThought/ChainOfThought.stories.tsx#Controlled
+
+### Analytics
+
+`data-analytics-*` on a collapsible step lands on the row `<button>`, not the `<li>`.
+
+Source: ChainOfThought/ChainOfThought.stories.tsx#Analytics
+
+## Story sources
+
+### ChainOfThought/ChainOfThought.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import {
+  Activity,
+  BadgeCheck,
+  Bot,
+  Brain,
+  CircleDashed,
+  Database,
+  Download,
+  FilePlus,
+  FileText,
+  Filter,
+  GitBranch,
+  Globe,
+  Link,
+  ListChecks,
+  Pencil,
+  Plug,
+  Radar,
+  Search,
+  ShieldAlert,
+  Terminal,
+  Wrench,
+} from '../../icons';
+import { Button } from '../Button';
+import { InlineCodeSnippet } from '../CodeSnippet';
+import { ChainOfThought, ChainOfThoughtStep } from './index';
+
+const DESCRIPTION = [
+  '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.',
+].join(' ');
+
+const meta = {
+  title: 'AI/ChainOfThought',
+  component: ChainOfThought,
+  subcomponents: { ChainOfThoughtStep },
+  parameters: {
+    layout: 'padded',
+    docs: { description: { component: DESCRIPTION } },
+  },
+  decorators: [
+    Story => (
+      <div className='max-w-[400px]'>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ChainOfThought>;
+
+export default meta;
+
+/** Icon steps joined by connectors; the last step drops its line. */
+export const Basic: StoryFn<typeof meta> = () => (
+  <ChainOfThought data-testid='cot'>
+    <ChainOfThoughtStep icon={<Brain />} label='Thought for 5s' />
+    <ChainOfThoughtStep icon={<Search />} label='Searched for blocked requests' />
+    <ChainOfThoughtStep icon={<Database />} label='Queried attack events' />
+    <ChainOfThoughtStep icon={<FileText />} label='Read the policy for api.example.com' />
+  </ChainOfThought>
+);
+
+/** Steps with children toggle open; a nested chain can hold its own collapsible steps. */
+export const Nested: StoryFn<typeof meta> = () => (
+  <ChainOfThought data-testid='cot'>
+    <ChainOfThoughtStep icon={<Brain />} label='Thought for 5s' />
+    <ChainOfThoughtStep
+      icon={<Bot />}
+      label='Ran the triage subagent'
+      defaultOpen
+      data-testid='cot-subagent'
+    >
+      <ChainOfThought>
+        <ChainOfThoughtStep icon={<Search />} label='Searched for ABC' />
+        <ChainOfThoughtStep icon={<Wrench />} label='Called get_attacks' data-testid='cot-tool'>
+          <p>Returned 42 attacks over the last 24 hours.</p>
+        </ChainOfThoughtStep>
+        <ChainOfThoughtStep icon={<ListChecks />} label='Made a plan' />
+      </ChainOfThought>
+    </ChainOfThoughtStep>
+    <ChainOfThoughtStep
+      icon={<FilePlus />}
+      label='Created a rule draft'
+      data-testid='cot-collapsed'
+    >
+      <p>Draft rule blocks SQL injection on /api/v1/login.</p>
+    </ChainOfThoughtStep>
+  </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'>
+    <ChainOfThoughtStep icon={null} label='Checked 3 applications' />
+    <ChainOfThoughtStep icon={null} label='Compared rule sets' />
+    <ChainOfThoughtStep icon={null} label='Found 2 overlapping rules' />
+  </ChainOfThought>
+);
+
+/** `metric` adds a right-aligned mono value — the Figma "Simple-result" row. */
+export const SimpleResult: StoryFn<typeof meta> = () => (
+  <ChainOfThought data-testid='cot'>
+    <ChainOfThoughtStep icon={null} label='Scanned endpoints' metric='1,204' />
+    <ChainOfThoughtStep icon={null} label='Matched attacks' metric='42' />
+    <ChainOfThoughtStep icon={null} label='Elapsed' metric='3m 45s' />
+  </ChainOfThought>
+);
+
+/** `status='running'` shimmers the label while the step is in progress. */
+export const Working: StoryFn<typeof meta> = () => (
+  <ChainOfThought data-testid='cot'>
+    <ChainOfThoughtStep icon={<Search />} label='Searched for ABC' />
+    <ChainOfThoughtStep icon={<Globe />} label='Searching the web...' status='running' />
+  </ChainOfThought>
+);
+
+const HISTORY_STEPS = [
+  { icon: <Search />, label: 'Searched for ABC' },
+  { icon: <Globe />, label: 'Searched the web' },
+];
+
+const STREAMING_STEPS = [
+  { icon: <Brain />, label: 'Thinking...', done: 'Thought for 5s' },
+  {
+    icon: <Search />,
+    label: 'Searching for blocked requests...',
+    done: 'Searched for blocked requests',
+  },
+  { icon: <Database />, label: 'Querying attack events...', done: 'Queried attack events' },
+  { icon: <FilePlus />, label: 'Creating a rule draft...', done: 'Created a rule draft' },
+];
+
+/**
+ * A step that mounts as `running` fades in and settles 4px; the previous step's connector grows
+ * toward it; on `done` the shimmer fades into the plain label. Steps that mount `done` (history)
+ * appear instantly. All of it is off under `prefers-reduced-motion`.
+ */
+export const Streaming: StoryFn<typeof meta> = () => {
+  const [count, setCount] = useState(1);
+  const finished = count > STREAMING_STEPS.length;
+
+  const handleClick = () => {
+    setCount(count + 1);
+  };
+
+  return (
+    <div className='flex flex-col gap-12'>
+      <ChainOfThought data-testid='cot'>
+        {HISTORY_STEPS.map(step => (
+          <ChainOfThoughtStep key={step.label} icon={step.icon} label={step.label} />
+        ))}
+        {STREAMING_STEPS.slice(0, count).map((step, i) => {
+          const running = i === count - 1;
+          return (
+            <ChainOfThoughtStep
+              key={step.done}
+              icon={step.icon}
+              label={running ? step.label : step.done}
+              status={running ? 'running' : 'done'}
+            />
+          );
+        })}
+      </ChainOfThought>
+      <div>
+        <Button
+          variant='secondary'
+          color='neutral'
+          size='small'
+          disabled={finished}
+          onClick={handleClick}
+          data-testid='next-step'
+        >
+          {count === STREAMING_STEPS.length ? 'Finish' : 'Next step'}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * `status='error'` tints the label and the type icon danger, for a step that failed. Word the
+ * label as a failure too (color alone is not enough); put the detail in the step's children.
+ * Not in Figma yet; pending design review.
+ */
+export const ErrorStep: StoryFn<typeof meta> = () => (
+  <ChainOfThought data-testid='cot'>
+    <ChainOfThoughtStep icon={<Search />} label='Searched for ABC' />
+    <ChainOfThoughtStep
+      icon={<Plug />}
+      label='get_attacks failed'
+      status='error'
+      defaultOpen
+      data-testid='cot-error'
+    >
+      <p>Request failed: 503 Service Unavailable.</p>
+    </ChainOfThoughtStep>
+    <ChainOfThoughtStep icon={<Plug />} label='get_rules failed' status='error' />
+  </ChainOfThought>
+);
+
+/** The whole run folded under one "Worked for …" step with the Activity icon. */
+export const WorkedSummary: StoryFn<typeof meta> = () => (
+  <ChainOfThought data-testid='cot'>
+    <ChainOfThoughtStep
+      icon={<Activity />}
+      label='Worked for 3m 45s'
+      defaultOpen
+      data-testid='cot-summary'
+    >
+      <ChainOfThought>
+        <ChainOfThoughtStep icon={<Brain />} label='Thought for 5s' />
+        <ChainOfThoughtStep icon={<Terminal />} label='Ran wallarm-cli status' />
+        <ChainOfThoughtStep icon={<Radar />} label='Scanned 12 hosts' />
+        <ChainOfThoughtStep icon={<BadgeCheck />} label='Created a mitigation rule' />
+      </ChainOfThought>
+    </ChainOfThoughtStep>
+  </ChainOfThought>
+);
+
+/** Nested content can be prose: paragraphs, bullets and inline code. */
+export const RichTextContent: StoryFn<typeof meta> = () => (
+  <ChainOfThought data-testid='cot'>
+    <ChainOfThoughtStep icon={<Brain />} label='Thought for 12s' defaultOpen>
+      <p>
+        The user wants to know why requests to{' '}
+        <InlineCodeSnippet
+          code='/api/login'
+          copyable={false}
+          size='sm'
+          className='text-text-secondary'
+        />{' '}
+        were blocked.
+      </p>
+      <ul>
+        <li>Check recent attacks on that path.</li>
+        <li>Compare them with the active rules.</li>
+      </ul>
+      <p>Then suggest the narrowest rule change.</p>
+    </ChainOfThoughtStep>
+  </ChainOfThought>
+);
+
+/** The recommended step-type → icon mapping. The app owns it; this is documentation only. */
+export const TypeIcons: StoryFn<typeof meta> = () => (
+  <ChainOfThought data-testid='cot'>
+    <ChainOfThoughtStep icon={<Brain />} label='thinking' />
+    <ChainOfThoughtStep icon={<ListChecks />} label='plan' />
+    <ChainOfThoughtStep icon={<GitBranch />} label='decision' />
+    <ChainOfThoughtStep icon={<Bot />} label='subagent' />
+    <ChainOfThoughtStep icon={<Wrench />} label='tool' />
+    <ChainOfThoughtStep icon={<Terminal />} label='command' />
+    <ChainOfThoughtStep icon={<Globe />} label='web search' />
+    <ChainOfThoughtStep icon={<Search />} label='query' />
+    <ChainOfThoughtStep icon={<Database />} label='datastore' />
+    <ChainOfThoughtStep icon={<Plug />} label='api' />
+    <ChainOfThoughtStep icon={<FileText />} label='read' />
+    <ChainOfThoughtStep icon={<Download />} label='fetch' />
+    <ChainOfThoughtStep icon={<Filter />} label='filter' />
+    <ChainOfThoughtStep icon={<FilePlus />} label='create' />
+    <ChainOfThoughtStep icon={<Pencil />} label='edit' />
+    <ChainOfThoughtStep icon={<Link />} label='cite' />
+    <ChainOfThoughtStep icon={<ShieldAlert />} label='threat' />
+    <ChainOfThoughtStep icon={<Radar />} label='scan' />
+    <ChainOfThoughtStep icon={<CircleDashed />} label='pending / default' />
+    <ChainOfThoughtStep icon={<Activity />} label='summary' />
+    <ChainOfThoughtStep icon={<BadgeCheck />} label='"Created" example' />
+  </ChainOfThought>
+);
+
+/** `open` + `onOpenChange` drive the step from outside. */
+export const Controlled: StoryFn<typeof meta> = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className='flex flex-col gap-12'>
+      <ChainOfThought data-testid='cot'>
+        <ChainOfThoughtStep
+          icon={<Brain />}
+          label='Thought for 5s'
+          open={open}
+          onOpenChange={setOpen}
+        >
+          <p>Reasoning goes here.</p>
+        </ChainOfThoughtStep>
+      </ChainOfThought>
+      <code className='text-xs text-text-secondary'>open: {String(open)}</code>
+    </div>
+  );
+};
+
+/** `data-analytics-*` on a collapsible step lands on the row `<button>`, not the `<li>`. */
+export const Analytics: StoryFn<typeof meta> = () => (
+  <ChainOfThought data-testid='cot'>
+    <ChainOfThoughtStep
+      icon={<Brain />}
+      label='Thought for 5s'
+      data-analytics-id='COT_STEP_TOGGLE'
+      data-analytics-props='{"type":"thinking"}'
+    >
+      <p>Reasoning goes here.</p>
+    </ChainOfThoughtStep>
+  </ChainOfThought>
+);
+```

package/dist/project/components/ChainOfThought/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/ChainOfThought/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,n){let a,l;/**
+ * 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,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}}})();