@bikdotai/bik-component-library 0.0.865-beta.2 → 0.0.865-beta.4

package/dist/cjs/components/agent-builder/AgentBuilder.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"AgentBuilder.styled.js","sources":["../../../../src/components/agent-builder/AgentBuilder.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\n\n// Shared look for the 24×24 transparent icon buttons (add / row-menu / close).\nconst iconActionButton = css`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\tbackground: transparent;\n\t}\n`;\n\nexport const BuilderRoot = styled.div.attrs({ className: 'bik-builder-root' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\twidth: 100%;\n\tmin-height: 0;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const TopBar = styled.div.attrs({ className: 'bik-top-bar' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\theight: 56px;\n\tpadding: 12px 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const TopBarSide = styled.div.attrs({ className: 'bik-top-bar-side' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const BackButton = styled.button.attrs({ className: 'bik-back-button' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 28px;\n\theight: 28px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nexport const Main = styled.div.attrs({ className: 'bik-main' })`\n\tdisplay: flex;\n\tflex: 1;\n\tmin-height: 0;\n`;\n\nexport const Rail = styled.div.attrs({ className: 'bik-rail' })`\n\twidth: 234px;\n\tflex-shrink: 0;\n\tborder-right: 1px solid ${COLORS.stroke.primary};\n\tpadding: 16px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const Content = styled.div.attrs({ className: 'bik-content' })`\n\tflex: 1;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding: 16px;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const ContentCard = styled.div.attrs({ className: 'bik-content-card' })`\n\tflex: 1;\n\tmin-height: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow: hidden;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\tbox-sizing: border-box;\n`;\n\n// Scrollable step body inside the card; the footer stays pinned below it.\nexport const StepScroll = styled.div.attrs({ className: 'bik-step-scroll' })`\n\tflex: 1;\n\tmin-height: 0;\n\toverflow-y: auto;\n`;\n\nexport const Footer = styled.div.attrs({ className: 'bik-footer' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmin-height: 56px;\n\tpadding: 12px 16px;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n\tbox-shadow: 0px -2px 12px 0px #0000000a;\n`;\n\nexport const FooterHint = styled.div.attrs({ className: 'bik-footer-hint' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n`;\n\nexport const FooterActions = styled.div.attrs({\n\tclassName: 'bik-footer-actions',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\n// ── Step rail items ─────────────────────────────────────────────────────────\n\nexport const RailList = styled.div.attrs({ className: 'bik-rail-list' })`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nexport const RailItem = styled.button.attrs({ className: 'bik-rail-item' })`\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 8px;\n\t/* Bottom padding leaves room for the connector down to the next badge. */\n\tpadding: 0 0 24px;\n\tborder: none;\n\tbackground: transparent;\n\tcursor: pointer;\n\ttext-align: left;\n\twidth: 100%;\n\n\t&:last-child {\n\t\tpadding-bottom: 0;\n\t}\n\n\t&:disabled {\n\t\tcursor: default;\n\t}\n\n\t/* Dashed connector line between consecutive step badges (centered on the badge). */\n\t&:not(:last-child)::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 9px;\n\t\ttop: 20px;\n\t\twidth: 0;\n\t\theight: 24px;\n\t\tborder-left: 1px dashed #e0e0e0;\n\t\tpointer-events: none;\n\t}\n`;\n\nexport const StepBadge = styled.div.attrs({ className: 'bik-step-badge' })<{\n\tstate: 'active' | 'complete' | 'inactive';\n}>`\n\twidth: 20px;\n\theight: 20px;\n\tflex-shrink: 0;\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-family: Inter;\n\tfont-size: 10px;\n\tfont-weight: 400;\n\tline-height: 12px;\n\tbackground: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.background.inverseLight\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.background.brandLight\n\t\t\t: COLORS.background.base};\n\tcolor: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.surface.standard\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.background.inverseLight\n\t\t\t: COLORS.content.secondary};\n`;\n\n// ── Shared step pieces ──────────────────────────────────────────────────────\n\nexport const SectionHeaderWrap = styled.div.attrs({\n\tclassName: 'bik-section-header-wrap',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tpadding: 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n`;\n\nexport const SectionBodyWrap = styled.div.attrs({\n\tclassName: 'bik-section-header-wrap',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 16px;\n\tpadding: 16px;\n`;\n\nexport const FieldBlock = styled.div.attrs({ className: 'bik-field-block' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nexport const FieldLabelRow = styled.div.attrs({\n\tclassName: 'bik-field-label-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n`;\n\n// ── Labelled text area ──────────────────────────────────────────────────────\n\nexport const AiTextAreaShell = styled.div.attrs({\n\tclassName: 'bik-ai-text-area-shell',\n})<{\n\tfocused?: boolean;\n\tminHeight?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tborder: 1px solid\n\t\t${(p) => (p.focused ? COLORS.stroke.brand : COLORS.stroke.primary)};\n\tborder-radius: 4px;\n\tpadding: 8px 12px;\n\tgap: 8px;\n\tmin-height: ${(p) => p.minHeight ?? '120px'};\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const AiTextAreaInput = styled.textarea.attrs({\n\tclassName: 'bik-ai-text-area-input',\n})`\n\tflex: 1;\n\tborder: none;\n\toutline: none;\n\tresize: none;\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.primary};\n\tbackground: transparent;\n\tmin-height: 60px;\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n`;\n\n// ── Radio card (Step 2 / Step 4 option cards) ───────────────────────────────\n\nexport const CardRow = styled.div.attrs({ className: 'bik-card-row' })`\n\tdisplay: flex;\n\tgap: 12px;\n`;\n\nexport const RadioCard = styled.button.attrs({ className: 'bik-radio-card' })<{\n\tselected?: boolean;\n}>`\n\tflex: 1;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 12px;\n\tpadding: 16px;\n\tborder: 1px solid\n\t\t${(p) => (p.selected ? BASE_COLORS.brand['800'] : COLORS.stroke.primary)};\n\tbackground: ${(p) =>\n\t\tp.selected ? COLORS.background.brandLight : COLORS.surface.standard};\n\tborder-radius: 8px;\n\tcursor: pointer;\n\ttext-align: left;\n\twidth: 100%;\n`;\n\nexport const RadioCardText = styled.div.attrs({\n\tclassName: 'bik-radio-card-text',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n`;\n\n// ── Intent chips (Step 2) ───────────────────────────────────────────────────\n\nexport const ChipWrap = styled.div.attrs({ className: 'bik-chip-wrap' })`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const AddChipButton = styled.button.attrs({\n\tclassName: 'bik-add-chip-button',\n})`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 4px 8px;\n\tborder: 1px dashed ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: transparent;\n\tcursor: pointer;\n`;\n\n// ── Step 3 two-column layout + tool / sub-agent rows ────────────────────────\n\n// Fills the scroll area so the step header + grow-body chain reaches the footer.\nexport const Step3Root = styled.div.attrs({\n\tclassName: 'bik-agent-step bik-agent-step--response',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 100%;\n`;\n\nexport const Step3Grid = styled.div.attrs({ className: 'bik-step3-grid' })<{\n\t$grow?: boolean;\n}>`\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) 1px 360px;\n\t/* Single row that fills the grid's height, so the divider spans the full\n\t   height (down to the footer) rather than stopping at the taller column. */\n\tgrid-template-rows: 1fr;\n\tflex: 1;\n\tmin-height: 0;\n\n\t@media (max-width: 1100px) {\n\t\tgrid-template-columns: 1fr;\n\t\tgrid-template-rows: auto;\n\t}\n\n\t/* Fill the remaining card height so a full-height child (e.g. the Step 3\n\t   column divider) can stretch all the way down to the footer. */\n\t${(p) =>\n\t\tp.$grow &&\n\t\tcss`\n\t\t\tflex: 1;\n\t\t\tmin-height: 0;\n\t\t`}\n`;\n\n// Vertical rule between the main column and the side (tools / sub-agents) column;\n// hidden once the grid collapses to a single column.\nexport const Step3Divider = styled.div.attrs({\n\tclassName: 'bik-step3-divider',\n})`\n\twidth: 1px;\n\talign-self: stretch;\n\tbackground: ${COLORS.stroke.primary};\n\n\t@media (max-width: 1100px) {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const SideSection = styled.div.attrs({ className: 'bik-side-section' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nexport const SideSectionHeader = styled.div.attrs({\n\tclassName: 'bik-side-section-header',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n`;\n\nexport const AddIconButton = styled.button.attrs({\n\tclassName: 'bik-add-icon-button',\n})`\n\t${iconActionButton}\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n`;\n\n// Empty-state tool-source picker (e.g. Manifest / Shopify buttons).\nexport const SourceButtonRow = styled.div.attrs({\n\tclassName: 'bik-source-button-row',\n})`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 8px;\n`;\n\nexport const SourceButton = styled.button.attrs({\n\tclassName: 'bik-source-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 6px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: ${COLORS.surface.standard};\n\tcursor: pointer;\n\theight: 28px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nexport const SelectableRow = styled.div.attrs({\n\tclassName: 'bik-selectable-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 8px 12px;\n\t/* Fixed 48px rows regardless of the (variably-sized) leading source icon.\n\t   box-sizing pins the height across hosts with differing resets; flex-shrink:0\n\t   + min-height stop a height-constrained flex column (the merchant side panel)\n\t   from squashing the rows — Storybook has room, so it looked fine there. */\n\tmin-height: 48px;\n\tbox-sizing: border-box;\n\tflex-shrink: 0;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tmin-width: 0;\n\toverflow: hidden;\n\n\t/* Leading icon (e.g. tool source) keeps its size; the label takes the rest. */\n\t& > svg {\n\t\tflex-shrink: 0;\n\t}\n`;\n\nexport const RowText = styled.div.attrs({ className: 'bik-row-text' })`\n\tflex: 1;\n\tmin-width: 0;\n\toverflow: hidden;\n\n\t/* Truncate the label to one line with an ellipsis. */\n\t& > * {\n\t\tdisplay: block;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n`;\n\n/* Label + trailing verification shield on one row. */\nexport const RowLabel = styled.div.attrs({ className: 'bik-row-label' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tmin-width: 0;\n\tflex: 1;\n\n\t/* Shrink the label to its text so the shield sits just after it, rather than\n\t   RowText's default flex: 1 filling the row and pushing the shield to the end. */\n\t& .bik-row-text {\n\t\tflex: 0 1 auto;\n\t}\n`;\n\nexport const RowRemoveButton = styled.button.attrs({\n\tclassName: 'bik-row-remove-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n`;\n\n// ── Per-row actions (always-visible edit / delete icon buttons) ───────────────\n\nexport const RowActions = styled.div.attrs({ className: 'bik-row-actions' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tflex-shrink: 0;\n`;\n\n// Vertical separator between the edit and delete icon buttons.\nexport const RowActionDivider = styled.span.attrs({\n\tclassName: 'bik-row-action-divider',\n})`\n\twidth: 1px;\n\talign-self: stretch;\n\tmargin: 4px 0;\n\tbackground: ${COLORS.stroke.primary};\n`;\n\nexport const RowMenuButton = styled.button.attrs({\n\tclassName: 'bik-row-menu-button',\n})`\n\t${iconActionButton}\n`;\n\nexport const DraftButtonScope = styled.div.attrs({\n\tclassName: 'bik-draft-button-scope',\n})`\n\tdisplay: flex;\n\tflex: 1;\n\n\tbutton {\n\t\tborder-color: ${BASE_COLORS.brand['800']};\n\t}\n\tbutton .text {\n\t\tcolor: ${BASE_COLORS.brand['800']};\n\t}\n`;\n\n// ── Go-live modal ───────────────────────────────────────────────────────────\n\nexport const ModalBody = styled.div.attrs({ className: 'bik-modal-body' })`\n\tpadding: 24px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tgap: 16px;\n\ttext-align: center;\n`;\n\nexport const ModalIcon = styled.div.attrs({ className: 'bik-modal-icon' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const ModalActions = styled.div.attrs({\n\tclassName: 'bik-modal-actions',\n})`\n\tdisplay: flex;\n\tgap: 12px;\n\twidth: 100%;\n\t/* Every action shares the row equally. Each action MUST be its own flex\n\t   wrapper (a plain <div style=\"display:flex\">, or DraftButtonScope) rather\n\t   than a bare Button: on hover the Button relocates its padding into an\n\t   inner container, and as the flex item itself that changes its resolved\n\t   width — the button visibly grows/shrinks. Wrapped, the div is the sized\n\t   track (flex:1) and the Button grows to fill it, absorbing the padding\n\t   move so the width stays put. */\n\t> * {\n\t\tflex: 1;\n\t}\n`;\n\n/** Inline action row inside a rich field (e.g. \"Improve with AI\"). */\nexport const FieldActionRow = styled.div.attrs({\n\tclassName: 'bik-field-action-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n"],"names":["iconActionButton","css","COLORS","BuilderRoot","styled","TopBar","TopBarSide","BackButton","Main","Rail","Content","ContentCard","StepScroll","Footer","FooterHint","FooterActions","RailList","RailItem","StepBadge","p","SectionHeaderWrap","SectionBodyWrap","FieldBlock","FieldLabelRow","AiTextAreaShell","AiTextAreaInput","CardRow","RadioCard","BASE_COLORS","RadioCardText","ChipWrap","Step3Root","Step3Grid","Step3Divider","SideSection","SideSectionHeader","AddIconButton","SourceButtonRow","SourceButton","SelectableRow","RowText","RowLabel","RowActions","RowActionDivider","RowMenuButton","DraftButtonScope","ModalBody","ModalIcon","ModalActions"],"mappings":"0NAIMA,EAAmBC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,gBAaTC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUzBC,EAAcC,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,mBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAM9DF,EAAAA,OAAO,QAAQ,QAAQ;AAAA,EAGzBG,EAASD,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,cAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAMvCF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,EAIpCI,EAAaF,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,mBAAoB;AAAA;AAAA;AAAA;AAAA,EAM/DG,EAAaH,EAAAA,QAAO,OAAO,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAa9DF,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAIzBM,EAAOJ,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,WAAY;AAAA;AAAA;AAAA;AAAA,EAMjDK,EAAOL,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,WAAY;AAAA;AAAA;AAAA,2BAGnCF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA,eAGjCA,EAAAA,OAAO,QAAQ,QAAQ;AAAA,EAGzBQ,EAAUN,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,cAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQrDF,EAAAA,OAAO,QAAQ,QAAQ;AAAA,EAGzBS,EAAcP,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,mBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMxDF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA,EAM7BU,EAAaR,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA,EAM9DS,EAAST,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMzCF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA,EAKjCY,EAAaV,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA,EAM9DW,EAAgBX,EAAAA,QAAO,IAAI,MAAM,CAC7C,UAAW,oBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAQYY,EAAWZ,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,gBAAiB;AAAA;AAAA;AAAA,EAK1Da,EAAWb,EAAAA,QAAO,OAAO,MAAM,CAAE,UAAW,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkC7Dc,EAAYd,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAczDe,GACdA,EAAE,QAAU,WACTjB,EAAAA,OAAO,WAAW,aAClBiB,EAAE,QAAU,SACZjB,SAAO,WAAW,WAClBA,EAAAA,OAAO,WAAW,IAAI;AAAA,UAChBiB,GACTA,EAAE,QAAU,WACTjB,EAAAA,OAAO,QAAQ,SACfiB,EAAE,QAAU,SACZjB,SAAO,WAAW,aAClBA,EAAAA,OAAO,QAAQ,SAAS;AAAA,EAKhBkB,EAAoBhB,EAAAA,QAAO,IAAI,MAAM,CACjD,UAAW,yBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,4BAK2BF,EAAAA,OAAO,OAAO,OAAO;AAAA,EAGpCmB,EAAkBjB,EAAAA,QAAO,IAAI,MAAM,CAC/C,UAAW,yBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAOYkB,EAAalB,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA,EAM9DmB,EAAgBnB,EAAAA,QAAO,IAAI,MAAM,CAC7C,UAAW,qBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAQYoB,EAAkBpB,EAAAA,QAAO,IAAI,MAAM,CAC/C,UAAW,wBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,IAOIe,GAAOA,EAAE,QAAUjB,EAAAA,OAAO,OAAO,MAAQA,EAAAA,OAAO,OAAO,OAAQ;AAAA;AAAA;AAAA;AAAA,eAIpDiB,GAAMA,EAAE,WAAa,OAAO;AAAA,eAC7BjB,EAAAA,OAAO,QAAQ,QAAQ;AAAA,EAGzBuB,EAAkBrB,EAAAA,QAAO,SAAS,MAAM,CACpD,UAAW,wBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQSF,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,WAKrBA,EAAAA,OAAO,QAAQ,WAAW;AAAA;AAAA,EAMxBwB,EAAUtB,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,eAAgB;AAAA;AAAA;AAAA,EAKxDuB,EAAYvB,EAAAA,QAAO,OAAO,MAAM,CAAE,UAAW,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASvEe,GAAOA,EAAE,SAAWS,EAAAA,YAAY,MAAM,GAAK,EAAI1B,EAAAA,OAAO,OAAO,OAAQ;AAAA,eAC1DiB,GACdA,EAAE,SAAWjB,EAAAA,OAAO,WAAW,WAAaA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAOxD2B,EAAgBzB,EAAAA,QAAO,IAAI,MAAM,CAC7C,UAAW,qBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAQY0B,EAAW1B,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,EAO1CA,EAAAA,QAAO,OAAO,MAAM,CAChD,UAAW,qBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKqBF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,EASpC,MAAM6B,EAAY3B,EAAAA,QAAO,IAAI,MAAM,CACzC,UAAW,yCACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAMY4B,EAAY5B,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkBrEe,GACFA,EAAE,OACFlB,EAAAA;AAAAA;AAAAA;AAAAA,GAGC;AAAA,EAKUgC,EAAe7B,EAAAA,QAAO,IAAI,MAAM,CAC5C,UAAW,mBACZ,CAAC;AAAA;AAAA;AAAA,eAGcF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAOvBgC,EAAc9B,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,mBAAoB;AAAA;AAAA;AAAA;AAAA,EAMhE+B,EAAoB/B,EAAAA,QAAO,IAAI,MAAM,CACjD,UAAW,yBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAMYgC,EAAgBhC,EAAAA,QAAO,OAAO,MAAM,CAChD,UAAW,qBACZ,CAAC;AAAA,GACEJ,CAAgB;AAAA,eACJE,EAAAA,OAAO,QAAQ,QAAQ;AAAA,qBACjBA,EAAAA,OAAO,OAAO,OAAO;AAAA,EAI7BmC,EAAkBjC,EAAAA,QAAO,IAAI,MAAM,CAC/C,UAAW,uBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAMYkC,EAAelC,EAAAA,QAAO,OAAO,MAAM,CAC/C,UAAW,mBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKoBF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,eAE3BA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKtBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAIzBqC,EAAgBnC,EAAAA,QAAO,IAAI,MAAM,CAC7C,UAAW,oBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAYoBF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAW7BsC,EAAUpC,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,eAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAexDqC,EAAWrC,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcxCA,EAAAA,QAAO,OAAO,MAAM,CAClD,UAAW,uBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYM,MAAMsC,EAAatC,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ9DuC,EAAmBvC,EAAAA,QAAO,KAAK,MAAM,CACjD,UAAW,wBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,eAIcF,EAAAA,OAAO,OAAO,OAAO;AAAA,EAGvB0C,EAAgBxC,EAAAA,QAAO,OAAO,MAAM,CAChD,UAAW,qBACZ,CAAC;AAAA,GACEJ,CAAgB;AAAA,EAGN6C,EAAmBzC,EAAAA,QAAO,IAAI,MAAM,CAChD,UAAW,wBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKiBwB,EAAAA,YAAY,MAAM,GAAK,CAAC;AAAA;AAAA;AAAA,WAG/BA,EAAAA,YAAY,MAAM,GAAK,CAAC;AAAA;AAAA,EAMtBkB,EAAY1C,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS5D2C,EAAY3C,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,iBAAkB;AAAA;AAAA;AAAA;AAAA,EAM5D4C,EAAe5C,EAAAA,QAAO,IAAI,MAAM,CAC5C,UAAW,mBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiB6BA,EAAAA,QAAO,IAAI,MAAM,CAC9C,UAAW,sBACZ,CAAC;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"AgentBuilder.styled.js","sources":["../../../../src/components/agent-builder/AgentBuilder.styled.tsx"],"sourcesContent":["import type React from 'react';\nimport styled, { css } from 'styled-components';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\n\n// Shared look for the 24×24 transparent icon buttons (add / row-menu / close).\nconst iconActionButton = css`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t\tbackground: transparent;\n\t}\n`;\n\nexport const BuilderRoot = styled.div.attrs({ className: 'bik-builder-root' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\twidth: 100%;\n\tmin-height: 0;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const TopBar = styled.div.attrs({ className: 'bik-top-bar' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\theight: 56px;\n\tpadding: 12px 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const TopBarSide = styled.div.attrs({ className: 'bik-top-bar-side' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const BackButton = styled.button.attrs({ className: 'bik-back-button' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 28px;\n\theight: 28px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tborder-radius: 4px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nexport const Main = styled.div.attrs({ className: 'bik-main' })`\n\tdisplay: flex;\n\tflex: 1;\n\tmin-height: 0;\n`;\n\nexport const Rail = styled.div.attrs({ className: 'bik-rail' })`\n\twidth: 234px;\n\tflex-shrink: 0;\n\tborder-right: 1px solid ${COLORS.stroke.primary};\n\tpadding: 16px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const Content = styled.div.attrs({ className: 'bik-content' })`\n\tflex: 1;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: hidden;\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding: 16px;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const ContentCard = styled.div.attrs({ className: 'bik-content-card' })`\n\tflex: 1;\n\tmin-height: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow: hidden;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\tbox-sizing: border-box;\n`;\n\n// Scrollable step body inside the card; the footer stays pinned below it.\nexport const StepScroll = styled.div.attrs({ className: 'bik-step-scroll' })`\n\tflex: 1;\n\tmin-height: 0;\n\toverflow-y: auto;\n`;\n\nexport const Footer = styled.div.attrs({ className: 'bik-footer' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmin-height: 56px;\n\tpadding: 12px 16px;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n\tbox-shadow: 0px -2px 12px 0px #0000000a;\n`;\n\nexport const FooterHint = styled.div.attrs({ className: 'bik-footer-hint' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n`;\n\nexport const FooterActions = styled.div.attrs({\n\tclassName: 'bik-footer-actions',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\n// ── Step rail items ─────────────────────────────────────────────────────────\n\nexport const RailList = styled.div.attrs({ className: 'bik-rail-list' })`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nexport const RailItem = styled.button.attrs({ className: 'bik-rail-item' })`\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 8px;\n\t/* Bottom padding leaves room for the connector down to the next badge. */\n\tpadding: 0 0 24px;\n\tborder: none;\n\tbackground: transparent;\n\tcursor: pointer;\n\ttext-align: left;\n\twidth: 100%;\n\n\t&:last-child {\n\t\tpadding-bottom: 0;\n\t}\n\n\t&:disabled {\n\t\tcursor: default;\n\t}\n\n\t/* Dashed connector line between consecutive step badges (centered on the badge). */\n\t&:not(:last-child)::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 9px;\n\t\ttop: 20px;\n\t\twidth: 0;\n\t\theight: 24px;\n\t\tborder-left: 1px dashed #e0e0e0;\n\t\tpointer-events: none;\n\t}\n`;\n\nexport const StepBadge = styled.div.attrs({ className: 'bik-step-badge' })<{\n\tstate: 'active' | 'complete' | 'inactive';\n}>`\n\twidth: 20px;\n\theight: 20px;\n\tflex-shrink: 0;\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-family: Inter;\n\tfont-size: 10px;\n\tfont-weight: 400;\n\tline-height: 12px;\n\tbackground: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.background.inverseLight\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.background.brandLight\n\t\t\t: COLORS.background.base};\n\tcolor: ${(p) =>\n\t\tp.state === 'complete'\n\t\t\t? COLORS.surface.standard\n\t\t\t: p.state === 'active'\n\t\t\t? COLORS.background.inverseLight\n\t\t\t: COLORS.content.secondary};\n`;\n\n// ── Shared step pieces ──────────────────────────────────────────────────────\n\nexport const SectionHeaderWrap = styled.div.attrs({\n\tclassName: 'bik-section-header-wrap',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tpadding: 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n`;\n\nexport const SectionBodyWrap = styled.div.attrs({\n\tclassName: 'bik-section-header-wrap',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 16px;\n\tpadding: 16px;\n`;\n\nexport const FieldBlock = styled.div.attrs({ className: 'bik-field-block' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nexport const FieldLabelRow = styled.div.attrs({\n\tclassName: 'bik-field-label-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n`;\n\n// ── Labelled text area ──────────────────────────────────────────────────────\n\nexport const AiTextAreaShell = styled.div.attrs({\n\tclassName: 'bik-ai-text-area-shell',\n})<{\n\tfocused?: boolean;\n\tminHeight?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tborder: 1px solid\n\t\t${(p) => (p.focused ? COLORS.stroke.brand : COLORS.stroke.primary)};\n\tborder-radius: 4px;\n\tpadding: 8px 12px;\n\tgap: 8px;\n\tmin-height: ${(p) => p.minHeight ?? '120px'};\n\tbackground: ${COLORS.surface.standard};\n`;\n\nexport const AiTextAreaInput = styled.textarea.attrs({\n\tclassName: 'bik-ai-text-area-input',\n})`\n\tflex: 1;\n\tborder: none;\n\toutline: none;\n\tresize: none;\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.primary};\n\tbackground: transparent;\n\tmin-height: 60px;\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n`;\n\n// ── Radio card (Step 2 / Step 4 option cards) ───────────────────────────────\n\nexport const CardRow = styled.div.attrs({ className: 'bik-card-row' })`\n\tdisplay: flex;\n\tgap: 12px;\n`;\n\nexport const RadioCard = styled.button.attrs({ className: 'bik-radio-card' })<{\n\tselected?: boolean;\n}>`\n\tflex: 1;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 12px;\n\tpadding: 16px;\n\tborder: 1px solid\n\t\t${(p) => (p.selected ? BASE_COLORS.brand['800'] : COLORS.stroke.primary)};\n\tbackground: ${(p) =>\n\t\tp.selected ? COLORS.background.brandLight : COLORS.surface.standard};\n\tborder-radius: 8px;\n\tcursor: pointer;\n\ttext-align: left;\n\twidth: 100%;\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\tbackground: ${COLORS.surface.subdued};\n\t\tborder-color: ${COLORS.stroke.primary};\n\t}\n`;\n\nexport const RadioCardText = styled.div.attrs({\n\tclassName: 'bik-radio-card-text',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n`;\n\n// ── Intent chips (Step 2) ───────────────────────────────────────────────────\n\nexport const ChipWrap = styled.div.attrs({ className: 'bik-chip-wrap' })`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const AddChipButton = styled.button.attrs({\n\tclassName: 'bik-add-chip-button',\n})`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 4px 8px;\n\tborder: 1px dashed ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: transparent;\n\tcursor: pointer;\n`;\n\n// ── Step 3 two-column layout + tool / sub-agent rows ────────────────────────\n\n// Fills the scroll area so the step header + grow-body chain reaches the footer.\nexport const Step3Root = styled.div.attrs({\n\tclassName: 'bik-agent-step bik-agent-step--response',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 100%;\n`;\n\nexport const Step3Grid = styled.div.attrs({ className: 'bik-step3-grid' })<{\n\t$grow?: boolean;\n}>`\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) 1px 360px;\n\t/* Single row that fills the grid's height, so the divider spans the full\n\t   height (down to the footer) rather than stopping at the taller column. */\n\tgrid-template-rows: 1fr;\n\tflex: 1;\n\tmin-height: 0;\n\n\t@media (max-width: 1100px) {\n\t\tgrid-template-columns: 1fr;\n\t\tgrid-template-rows: auto;\n\t}\n\n\t/* Fill the remaining card height so a full-height child (e.g. the Step 3\n\t   column divider) can stretch all the way down to the footer. */\n\t${(p) =>\n\t\tp.$grow &&\n\t\tcss`\n\t\t\tflex: 1;\n\t\t\tmin-height: 0;\n\t\t`}\n`;\n\n// Vertical rule between the main column and the side (tools / sub-agents) column;\n// hidden once the grid collapses to a single column.\nexport const Step3Divider = styled.div.attrs({\n\tclassName: 'bik-step3-divider',\n})`\n\twidth: 1px;\n\talign-self: stretch;\n\tbackground: ${COLORS.stroke.primary};\n\n\t@media (max-width: 1100px) {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const SideSection = styled.div.attrs({ className: 'bik-side-section' })`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nexport const SideSectionHeader = styled.div.attrs({\n\tclassName: 'bik-side-section-header',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n`;\n\nexport const AddIconButton = styled.button.attrs({\n\tclassName: 'bik-add-icon-button',\n})`\n\t${iconActionButton}\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n`;\n\n// Empty-state tool-source picker (e.g. Manifest / Shopify buttons).\nexport const SourceButtonRow = styled.div.attrs({\n\tclassName: 'bik-source-button-row',\n})`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 8px;\n`;\n\nexport const SourceButton = styled.button.attrs({\n\tclassName: 'bik-source-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 6px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbackground: ${COLORS.surface.standard};\n\tcursor: pointer;\n\theight: 28px;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\nexport const SelectableRow = styled.div.attrs({\n\tclassName: 'bik-selectable-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 8px 12px;\n\t/* Fixed 48px rows regardless of the (variably-sized) leading source icon.\n\t   box-sizing pins the height across hosts with differing resets; flex-shrink:0\n\t   + min-height stop a height-constrained flex column (the merchant side panel)\n\t   from squashing the rows — Storybook has room, so it looked fine there. */\n\tmin-height: 48px;\n\tbox-sizing: border-box;\n\tflex-shrink: 0;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tmin-width: 0;\n\toverflow: hidden;\n\n\t/* Leading icon (e.g. tool source) keeps its size; the label takes the rest. */\n\t& > svg {\n\t\tflex-shrink: 0;\n\t}\n`;\n\nexport const RowText = styled.div.attrs({ className: 'bik-row-text' })`\n\tflex: 1;\n\tmin-width: 0;\n\toverflow: hidden;\n\n\t/* Truncate the label to one line with an ellipsis. */\n\t& > * {\n\t\tdisplay: block;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n`;\n\n/* Label + trailing verification shield on one row. */\nexport const RowLabel = styled.div.attrs({ className: 'bik-row-label' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tmin-width: 0;\n\tflex: 1;\n\n\t/* Shrink the label to its text so the shield sits just after it, rather than\n\t   RowText's default flex: 1 filling the row and pushing the shield to the end. */\n\t& .bik-row-text {\n\t\tflex: 0 1 auto;\n\t}\n`;\n\nexport const RowRemoveButton = styled.button.attrs({\n\tclassName: 'bik-row-remove-button',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n`;\n\n// ── Per-row actions (always-visible edit / delete icon buttons) ───────────────\n\nexport const RowActions = styled.div.attrs({ className: 'bik-row-actions' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tflex-shrink: 0;\n`;\n\n// Vertical separator between the edit and delete icon buttons.\nexport const RowActionDivider = styled.span.attrs({\n\tclassName: 'bik-row-action-divider',\n})`\n\twidth: 1px;\n\talign-self: stretch;\n\tmargin: 4px 0;\n\tbackground: ${COLORS.stroke.primary};\n`;\n\nexport const RowMenuButton = styled.button.attrs({\n\tclassName: 'bik-row-menu-button',\n})`\n\t${iconActionButton}\n`;\n\nexport const DraftButtonScope = styled.div.attrs({\n\tclassName: 'bik-draft-button-scope',\n})`\n\tdisplay: flex;\n\tflex: 1;\n\n\tbutton {\n\t\tborder-color: ${BASE_COLORS.brand['800']};\n\t}\n\tbutton .text {\n\t\tcolor: ${BASE_COLORS.brand['800']};\n\t}\n`;\n\n// ── Go-live modal ───────────────────────────────────────────────────────────\n\nexport const ModalBody = styled.div.attrs({ className: 'bik-modal-body' })`\n\tpadding: 24px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tgap: 16px;\n\ttext-align: center;\n`;\n\nexport const ModalIcon = styled.div.attrs({ className: 'bik-modal-icon' })`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n`;\n\n/**\n * The go-live SUCCESS dialog's natural height, which every state of\n * `AgentStateModal` is pinned to so the card doesn't resize as a publish moves\n * loading → error, or loading → success (a different dialog at the same size).\n *\n * 24 + 24 padding + 64 icon + 8 gap + 28 title (TitleMedium 20/28) + 8 gap\n * + 48 body (BodyPrimary 16/24, two lines at this width) + 24 gap\n * + 40 action row (medium Button: 10px padding + 20px line-height) = 268.\n *\n * Deliberately NOT on `ModalBody`: DiscardModal and RequireVerificationModal share\n * it and are not part of this sequence.\n */\nexport const AGENT_STATE_MODAL_MIN_HEIGHT = 268;\n\n/** `ModalBody` pinned to the height above. The body itself is NOT centred — that\n * floats the action row in the middle of the card. The hero takes the slack instead\n * (see `AgentStateModalHero`), so the actions stay at the bottom, above the body's\n * own 24px padding. */\nexport const AgentStateModalBody = styled(ModalBody)`\n\tmin-height: ${AGENT_STATE_MODAL_MIN_HEIGHT}px;\n`;\n\n/** Badge + title + message. Grows into whatever height the pinned card has spare and\n * centres itself there, which is what keeps the actions pinned to the bottom. */\nexport const AgentStateModalHero = styled.div`\n\tflex: 1;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const ModalActions = styled.div.attrs({\n\tclassName: 'bik-modal-actions',\n})`\n\tdisplay: flex;\n\tgap: 12px;\n\twidth: 100%;\n\t/* Every action shares the row equally. Each action MUST be its own flex\n\t   wrapper (a plain <div style=\"display:flex\">, or DraftButtonScope) rather\n\t   than a bare Button: on hover the Button relocates its padding into an\n\t   inner container, and as the flex item itself that changes its resolved\n\t   width — the button visibly grows/shrinks. Wrapped, the div is the sized\n\t   track (flex:1) and the Button grows to fill it, absorbing the padding\n\t   move so the width stays put. */\n\t> * {\n\t\tflex: 1;\n\t}\n`;\n\n/** Inline action row inside a rich field (e.g. \"Improve with AI\"). */\nexport const FieldActionRow = styled.div.attrs({\n\tclassName: 'bik-field-action-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\n// ── Step 1 \"Channels to activate it on\" ────────────────────────────────\n\nexport const ChannelsSectionRoot = styled.div.attrs({\n\tclassName: 'bik-channels-section',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\n/** \"Channel management\" / \"Smart agent handover\" — a text link, not a Button. */\nexport const ChannelsLink = styled.button.attrs({\n\tclassName: 'bik-channels-link',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tborder: none;\n\tbackground: transparent;\n\tpadding: 0;\n\tcursor: pointer;\n\tcolor: ${COLORS.background.inverseLight};\n\tfont-size: 12px;\n\tline-height: 16px;\n\tfont-weight: 400;\n\twhite-space: nowrap;\n\n\t&:hover {\n\t\ttext-decoration: underline;\n\t}\n`;\n\n/** One channel's card. */\nexport const ChannelCard = styled.div.attrs({\n\tclassName: 'bik-channel-card',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-start;\n\twidth: 100%;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\toverflow: hidden;\n`;\n\nexport const ChannelRow = styled.div.attrs({ className: 'bik-channel-row' })`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 12px;\n\twidth: 100%;\n\t/* 12 + 24 + 12 — every child is pinned to the 24px band so the row can't\n\t   drift taller than the design's 48px. */\n\tmin-height: 48px;\n\tbox-sizing: border-box;\n`;\n\nexport const ChannelRowMain = styled.div.attrs({\n\tclassName: 'bik-channel-row-main',\n})`\n\tdisplay: flex;\n\tflex: 1 0 0;\n\tmin-width: 0;\n\talign-items: center;\n\tgap: 8px;\n\theight: 24px;\n`;\n\n/** Label + glyph. Fixed-width so every card's chips start on the same column. */\nexport const ChannelIdentity = styled.div.attrs({\n\tclassName: 'bik-channel-identity',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tflex: 1 0 0;\n\tmin-width: 0;\n`;\n\n/** Tinted 24×24 square holding the 16px brand glyph. */\nexport const ChannelGlyph = styled.div.attrs({\n\tclassName: 'bik-channel-glyph',\n})<{ tint: string }>`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-shrink: 0;\n\twidth: 24px;\n\theight: 24px;\n\tborder-radius: 4.8px;\n\tbackground: ${(props) => props.tint};\n\toverflow: hidden;\n`;\n\n/** The account chips. Wraps rather than overflowing when a store has many. */\nexport const ChannelChips = styled.div.attrs({\n\tclassName: 'bik-channel-chips',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tflex-shrink: 0;\n\n\t/* Figma's tag-regular is 24px tall, but Tag's \"regular\" variant floors at\n\t   26px — which pushes the 48px row to 50px. Pin the wrapper back to 24\n\t   (Tag's own \\`height\\` prop only reaches its inner container). The second\n\t   selector catches a Tag sitting inside a ChipTooltipTarget. */\n\t> *,\n\t> span > * {\n\t\tmin-height: 24px;\n\t}\n`;\n\n/**\n * Hover target for a chip's tooltip.\n *\n * Tippy attaches a ref to its child to use as the trigger, but `Tag` is a plain\n * function component with no `forwardRef` — so wrapping a Tag directly gives\n * Tippy no DOM node and the tooltip silently never opens. This span is the node\n * it can hold on to. (`IconButton` wraps its disabled tooltip the same way.)\n */\nexport const ChipTooltipTarget = styled.span.attrs({\n\tclassName: 'bik-chip-tooltip-target',\n})`\n\tdisplay: inline-flex;\n\talign-items: center;\n`;\n\n/** Scrollable account list inside the picker modal. */\nexport const ChannelPickerList = styled.div.attrs({\n\tclassName: 'bik-channel-picker-list',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\twidth: 100%;\n\tmax-height: 280px;\n\toverflow-y: auto;\n`;\n\nexport const ChannelPickerRow = styled.div.attrs({\n\tclassName: 'bik-channel-picker-row',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\twidth: 100%;\n\tpadding: 4px;\n\tborder-radius: 4px;\n\tbox-sizing: border-box;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\n/**\n * Glyph + account name inside a picker row. Figma wraps these in their own\n * `px-4` group, so the checkbox sits 12px from the glyph but the glyph sits 8px\n * from the label.\n */\nexport const ChannelPickerAccount = styled.div.attrs({\n\tclassName: 'bik-channel-picker-account',\n})`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tmin-width: 0;\n\theight: 32px;\n\tpadding: 0 4px;\n`;\n\nexport const ChannelPickerBody = styled.div.attrs({\n\tclassName: 'bik-channel-picker-body',\n})`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\twidth: 100%;\n\t/* Figma indents the body 8px inside the modal's own 24px gutter, so the list\n\t   sits at 32px while the title stays at 24px. StyledModal's body has no\n\t   gutter of its own, so both live here. */\n\tpadding: 0 32px;\n\tbox-sizing: border-box;\n`;\n\n/**\n * Figma reserves a 24×24 slot for a checkbox (an 18px box inset by 3px), but the\n * library's CheckBox renders the bare 18px box. Without this the checkbox column\n * — and everything after it — sits 3px tight against the design. Passed as\n * CheckBox's `style`, which lands on its container.\n */\nexport const CHECKBOX_SLOT: React.CSSProperties = {\n\twidth: 24,\n\theight: 24,\n\tjustifyContent: 'center',\n};\n"],"names":["iconActionButton","css","COLORS","BuilderRoot","styled","TopBar","TopBarSide","BackButton","Main","Rail","Content","ContentCard","StepScroll","Footer","FooterHint","FooterActions","RailList","RailItem","StepBadge","p","SectionHeaderWrap","SectionBodyWrap","FieldBlock","FieldLabelRow","AiTextAreaShell","AiTextAreaInput","CardRow","RadioCard","BASE_COLORS","RadioCardText","ChipWrap","Step3Root","Step3Grid","Step3Divider","SideSection","SideSectionHeader","AddIconButton","SourceButtonRow","SourceButton","SelectableRow","RowText","RowLabel","RowActions","RowActionDivider","RowMenuButton","DraftButtonScope","ModalBody","ModalIcon","AGENT_STATE_MODAL_MIN_HEIGHT","AgentStateModalBody","AgentStateModalHero","ModalActions","ChannelsSectionRoot","ChannelsLink","ChannelCard","ChannelRow","ChannelRowMain","ChannelIdentity","ChannelGlyph","props","ChannelChips","ChipTooltipTarget","ChannelPickerList","ChannelPickerRow","ChannelPickerAccount","ChannelPickerBody","CHECKBOX_SLOT"],"mappings":"0NAKMA,EAAmBC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,gBAaTC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUzBC,EAAcC,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,mBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAM9DF,EAAAA,OAAO,QAAQ,QAAQ;AAAA,EAGzBG,EAASD,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,cAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAMvCF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,EAIpCI,EAAaF,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,mBAAoB;AAAA;AAAA;AAAA;AAAA,EAM/DG,EAAaH,EAAAA,QAAO,OAAO,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAa9DF,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAIzBM,EAAOJ,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,WAAY;AAAA;AAAA;AAAA;AAAA,EAMjDK,EAAOL,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,WAAY;AAAA;AAAA;AAAA,2BAGnCF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA,eAGjCA,EAAAA,OAAO,QAAQ,QAAQ;AAAA,EAGzBQ,EAAUN,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,cAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQrDF,EAAAA,OAAO,QAAQ,QAAQ;AAAA,EAGzBS,EAAcP,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,mBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMxDF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA,EAM7BU,EAAaR,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA,EAM9DS,EAAST,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,aAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMzCF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA,EAKjCY,EAAaV,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA,EAM9DW,EAAgBX,EAAAA,QAAO,IAAI,MAAM,CAC7C,UAAW,oBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAQYY,EAAWZ,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,gBAAiB;AAAA;AAAA;AAAA,EAK1Da,EAAWb,EAAAA,QAAO,OAAO,MAAM,CAAE,UAAW,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkC7Dc,EAAYd,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAczDe,GACdA,EAAE,QAAU,WACTjB,EAAAA,OAAO,WAAW,aAClBiB,EAAE,QAAU,SACZjB,SAAO,WAAW,WAClBA,EAAAA,OAAO,WAAW,IAAI;AAAA,UAChBiB,GACTA,EAAE,QAAU,WACTjB,EAAAA,OAAO,QAAQ,SACfiB,EAAE,QAAU,SACZjB,SAAO,WAAW,aAClBA,EAAAA,OAAO,QAAQ,SAAS;AAAA,EAKhBkB,EAAoBhB,EAAAA,QAAO,IAAI,MAAM,CACjD,UAAW,yBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,4BAK2BF,EAAAA,OAAO,OAAO,OAAO;AAAA,EAGpCmB,EAAkBjB,EAAAA,QAAO,IAAI,MAAM,CAC/C,UAAW,yBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAOYkB,EAAalB,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA,EAM9DmB,EAAgBnB,EAAAA,QAAO,IAAI,MAAM,CAC7C,UAAW,qBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAQYoB,EAAkBpB,EAAAA,QAAO,IAAI,MAAM,CAC/C,UAAW,wBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,IAOIe,GAAOA,EAAE,QAAUjB,EAAAA,OAAO,OAAO,MAAQA,EAAAA,OAAO,OAAO,OAAQ;AAAA;AAAA;AAAA;AAAA,eAIpDiB,GAAMA,EAAE,WAAa,OAAO;AAAA,eAC7BjB,EAAAA,OAAO,QAAQ,QAAQ;AAAA,EAGzBuB,EAAkBrB,EAAAA,QAAO,SAAS,MAAM,CACpD,UAAW,wBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQSF,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,WAKrBA,EAAAA,OAAO,QAAQ,WAAW;AAAA;AAAA,EAMxBwB,EAAUtB,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,eAAgB;AAAA;AAAA;AAAA,EAKxDuB,EAAYvB,EAAAA,QAAO,OAAO,MAAM,CAAE,UAAW,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASvEe,GAAOA,EAAE,SAAWS,EAAAA,YAAY,MAAM,GAAK,EAAI1B,EAAAA,OAAO,OAAO,OAAQ;AAAA,eAC1DiB,GACdA,EAAE,SAAWjB,EAAAA,OAAO,WAAW,WAAaA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAQrDA,EAAAA,OAAO,QAAQ,OAAO;AAAA,kBACpBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,EAI1B2B,EAAgBzB,EAAAA,QAAO,IAAI,MAAM,CAC7C,UAAW,qBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAQY0B,EAAW1B,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,EAO1CA,EAAAA,QAAO,OAAO,MAAM,CAChD,UAAW,qBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKqBF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,EASpC,MAAM6B,EAAY3B,EAAAA,QAAO,IAAI,MAAM,CACzC,UAAW,yCACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAMY4B,EAAY5B,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkBrEe,GACFA,EAAE,OACFlB,EAAAA;AAAAA;AAAAA;AAAAA,GAGC;AAAA,EAKUgC,EAAe7B,EAAAA,QAAO,IAAI,MAAM,CAC5C,UAAW,mBACZ,CAAC;AAAA;AAAA;AAAA,eAGcF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAOvBgC,EAAc9B,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,mBAAoB;AAAA;AAAA;AAAA;AAAA,EAMhE+B,EAAoB/B,EAAAA,QAAO,IAAI,MAAM,CACjD,UAAW,yBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAMYgC,EAAgBhC,EAAAA,QAAO,OAAO,MAAM,CAChD,UAAW,qBACZ,CAAC;AAAA,GACEJ,CAAgB;AAAA,eACJE,EAAAA,OAAO,QAAQ,QAAQ;AAAA,qBACjBA,EAAAA,OAAO,OAAO,OAAO;AAAA,EAI7BmC,EAAkBjC,EAAAA,QAAO,IAAI,MAAM,CAC/C,UAAW,uBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAMYkC,EAAelC,EAAAA,QAAO,OAAO,MAAM,CAC/C,UAAW,mBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKoBF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,eAE3BA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKtBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAIzBqC,EAAgBnC,EAAAA,QAAO,IAAI,MAAM,CAC7C,UAAW,oBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAYoBF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAW7BsC,EAAUpC,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,eAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAexDqC,EAAWrC,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcxCA,EAAAA,QAAO,OAAO,MAAM,CAClD,UAAW,uBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYM,MAAMsC,EAAatC,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ9DuC,EAAmBvC,EAAAA,QAAO,KAAK,MAAM,CACjD,UAAW,wBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,eAIcF,EAAAA,OAAO,OAAO,OAAO;AAAA,EAGvB0C,EAAgBxC,EAAAA,QAAO,OAAO,MAAM,CAChD,UAAW,qBACZ,CAAC;AAAA,GACEJ,CAAgB;AAAA,EAGN6C,EAAmBzC,EAAAA,QAAO,IAAI,MAAM,CAChD,UAAW,wBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKiBwB,EAAAA,YAAY,MAAM,GAAK,CAAC;AAAA;AAAA;AAAA,WAG/BA,EAAAA,YAAY,MAAM,GAAK,CAAC;AAAA;AAAA,EAMtBkB,EAAY1C,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS5D2C,EAAY3C,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,iBAAkB;AAAA;AAAA;AAAA;AAAA,EAkB5D4C,EAA+B,IAM/BC,EAAsB7C,EAAAA,QAAO0C,CAAS;AAAA,eACpCE,CAA4B;AAAA,EAK9BE,EAAsB9C,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU7B+C,EAAe/C,EAAAA,QAAO,IAAI,MAAM,CAC5C,UAAW,mBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiB6BA,EAAAA,QAAO,IAAI,MAAM,CAC9C,UAAW,sBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAQM,MAAMgD,EAAsBhD,EAAAA,QAAO,IAAI,MAAM,CACnD,UAAW,sBACZ,CAAC;AAAA;AAAA;AAAA;AAAA,EAOYiD,EAAejD,EAAAA,QAAO,OAAO,MAAM,CAC/C,UAAW,mBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQSF,EAAAA,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY3BoD,GAAclD,EAAAA,QAAO,IAAI,MAAM,CAC3C,UAAW,kBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAKcF,EAAAA,OAAO,QAAQ,QAAQ;AAAA,qBACjBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA,EAK7BqD,GAAanD,EAAAA,QAAO,IAAI,MAAM,CAAE,UAAW,kBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY9DoD,GAAiBpD,EAAAA,QAAO,IAAI,MAAM,CAC9C,UAAW,sBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUYqD,GAAkBrD,EAAAA,QAAO,IAAI,MAAM,CAC/C,UAAW,sBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASYsD,GAAetD,EAAAA,QAAO,IAAI,MAAM,CAC5C,UAAW,mBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQeuD,GAAUA,EAAM,IAAI;AAAA;AAAA,EAKvBC,GAAexD,EAAAA,QAAO,IAAI,MAAM,CAC5C,UAAW,mBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBYyD,GAAoBzD,EAAAA,QAAO,KAAK,MAAM,CAClD,UAAW,yBACZ,CAAC;AAAA;AAAA;AAAA,EAMY0D,GAAoB1D,EAAAA,QAAO,IAAI,MAAM,CACjD,UAAW,yBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASY2D,GAAmB3D,EAAAA,QAAO,IAAI,MAAM,CAChD,UAAW,wBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAUeF,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EASzB8D,GAAuB5D,EAAAA,QAAO,IAAI,MAAM,CACpD,UAAW,4BACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASY6D,GAAoB7D,EAAAA,QAAO,IAAI,MAAM,CACjD,UAAW,yBACZ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBY8D,GAAqC,CACjD,MAAO,GACP,OAAQ,GACR,eAAgB,QACjB"}

package/dist/cjs/components/agent-builder/components/AgentStateModal.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("../../../assets/icons/errorIcon.svg.js"),j=require("../../spinner/Spinner.js"),r=require("../../TypographyStyle.js"),l=require("../../../constants/Theme.js"),n=require("../AgentBuilder.styled.js"),S=require("../../modals/styledModal.js"),d=require("../../button/Button.js"),m=({open:a,state:c,title:x,message:u,primaryButton:t,secondaryButton:i,loadingImageUrl:o,onClose:h,zIndex:g})=>{if(!a)return null;const s=c==="loading",y=s?null:i??t;return e.jsx(S.StyledModal,{"data-test":"agent-state-modal",open:!0,onClose:h,width:"520px",zIndex:g,hideCrossButton:s,closeOnOutsideClick:!s,closeOnEscapeKey:!s,children:e.jsxs(n.AgentStateModalBody,{style:{gap:"24px"},children:[e.jsxs(n.AgentStateModalHero,{children:[e.jsx(n.ModalIcon,{children:s?o?e.jsx("img",{src:o,alt:"",width:64,height:64}):e.jsx(j.Spinner,{size:"large",color:l.COLORS.stroke.brand}):e.jsx(p.default,{width:64,height:64})}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px"},children:[e.jsx(r.TitleMedium,{color:l.COLORS.content.primary,children:x}),e.jsx(r.BodyPrimary,{color:l.COLORS.content.secondary,style:{whiteSpace:"pre-line"},children:u})]})]}),y&&e.jsxs(n.ModalActions,{children:[i&&e.jsx("div",{style:{display:"flex"},children:e.jsx(d.Button,{"data-test":"agent-state-secondary",buttonType:"secondary",size:"medium",matchParentWidth:!0,buttonText:i.text,isLoading:i.isLoading,onClick:i.onClick})}),t&&e.jsx("div",{style:{display:"flex"},children:e.jsx(d.Button,{"data-test":"agent-state-primary",buttonType:"primary",size:"medium",matchParentWidth:!0,buttonText:t.text,isLoading:t.isLoading,onClick:t.onClick})})]})]})})};exports.AgentStateModal=m;
+//# sourceMappingURL=AgentStateModal.js.map

package/dist/cjs/components/agent-builder/components/AgentStateModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentStateModal.js","sources":["../../../../../src/components/agent-builder/components/AgentStateModal.tsx"],"sourcesContent":["import ErrorIcon from '@src/assets/icons/errorIcon.svg';\nimport React from 'react';\nimport { Button } from '@src/components/button';\nimport { StyledModal } from '@src/components/modals';\nimport { Spinner } from '@src/components/spinner/Spinner';\nimport { BodyPrimary, TitleMedium } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAgentStateModalBody,\n\tAgentStateModalHero,\n\tModalActions,\n\tModalIcon,\n} from '../AgentBuilder.styled';\n\nexport type AgentModalState = 'loading' | 'error';\n\ninterface AgentStateAction {\n\ttext: string;\n\tonClick: () => void;\n\tisLoading?: boolean;\n}\n\ninterface AgentStateModalProps {\n\topen: boolean;\n\t/** `loading` while the write is in flight, `error` once it came back badly. */\n\tstate: AgentModalState;\n\t/** Heading, e.g. \"Agent couldn't go live\". Comes from the caller — on `error` the\n\t * server owns this copy, so the builder never composes it. */\n\ttitle: string;\n\t/** Body copy. Line breaks are preserved, so a caller can pass one line per reason\n\t * (e.g. per conflicting intent) without markup. */\n\tmessage: string;\n\t/** Right-hand action, e.g. \"Try again\", or the step to fix when the caller knows\n\t * one (\"Go to When it steps in\"). */\n\tprimaryButton?: AgentStateAction;\n\t/** Left-hand action, e.g. \"Go back to editing\". */\n\tsecondaryButton?: AgentStateAction;\n\t/** 64px image for the `loading` badge — pass the host's loader asset to match its\n\t * other dialogs. Falls back to `Spinner`, so the library needs no remote asset. */\n\tloadingImageUrl?: string;\n\t/** Cross button / outside click. Always available, so a message-only dialog is\n\t * still dismissible with no actions at all. Not offered while `loading`. */\n\tonClose: () => void;\n\tzIndex?: number;\n}\n\n/**\n * What's happening to a save or publish: in flight, or failed. Sibling of\n * `GoLiveModal` — same hero layout (badge, title, body, actions), and the actions sit\n * inside the body for the same reason (see GoLiveModal). Every state is pinned to\n * `AGENT_STATE_MODAL_MIN_HEIGHT`, the go-live success height, so the card doesn't\n * resize as one state replaces another.\n *\n * Deliberately copy-free: title, message and button labels all come from the caller,\n * because the server owns the wording of the failure it just reported.\n *\n * Both buttons are optional, so one component covers every shape — two actions, one,\n * or message-only. That last one is for a failure with nothing to offer: no step to\n * send the merchant to and nothing a retry would change. `loading` never renders\n * actions or a cross, since there is nothing to decide yet.\n */\nexport const AgentStateModal: React.FC<AgentStateModalProps> = ({\n\topen,\n\tstate,\n\ttitle,\n\tmessage,\n\tprimaryButton,\n\tsecondaryButton,\n\tloadingImageUrl,\n\tonClose,\n\tzIndex,\n}) => {\n\tif (!open) {\n\t\treturn null;\n\t}\n\n\tconst isLoading = state === 'loading';\n\tconst actions = isLoading ? null : secondaryButton ?? primaryButton;\n\n\treturn (\n\t\t<StyledModal\n\t\t\tdata-test=\"agent-state-modal\"\n\t\t\topen\n\t\t\tonClose={onClose}\n\t\t\twidth=\"520px\"\n\t\t\tzIndex={zIndex}\n\t\t\thideCrossButton={isLoading}\n\t\t\tcloseOnOutsideClick={!isLoading}\n\t\t\tcloseOnEscapeKey={!isLoading}\n\t\t>\n\t\t\t<AgentStateModalBody style={{ gap: '24px' }}>\n\t\t\t\t<AgentStateModalHero>\n\t\t\t\t\t<ModalIcon>\n\t\t\t\t\t\t{isLoading ? (\n\t\t\t\t\t\t\tloadingImageUrl ? (\n\t\t\t\t\t\t\t\t<img src={loadingImageUrl} alt=\"\" width={64} height={64} />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<Spinner size=\"large\" color={COLORS.stroke.brand} />\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ErrorIcon width={64} height={64} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ModalIcon>\n\n\t\t\t\t\t<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n\t\t\t\t\t\t<TitleMedium color={COLORS.content.primary}>{title}</TitleMedium>\n\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\tstyle={{ whiteSpace: 'pre-line' }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{message}\n\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t</div>\n\t\t\t\t</AgentStateModalHero>\n\n\t\t\t\t{actions && (\n\t\t\t\t\t<ModalActions>\n\t\t\t\t\t\t{secondaryButton && (\n\t\t\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdata-test=\"agent-state-secondary\"\n\t\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\tbuttonText={secondaryButton.text}\n\t\t\t\t\t\t\t\t\tisLoading={secondaryButton.isLoading}\n\t\t\t\t\t\t\t\t\tonClick={secondaryButton.onClick}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{primaryButton && (\n\t\t\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdata-test=\"agent-state-primary\"\n\t\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\tbuttonText={primaryButton.text}\n\t\t\t\t\t\t\t\t\tisLoading={primaryButton.isLoading}\n\t\t\t\t\t\t\t\t\tonClick={primaryButton.onClick}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ModalActions>\n\t\t\t\t)}\n\t\t\t</AgentStateModalBody>\n\t\t</StyledModal>\n\t);\n};\n"],"names":["AgentStateModal","open","state","title","message","primaryButton","secondaryButton","loadingImageUrl","onClose","zIndex","isLoading","actions","jsx","StyledModal","AgentStateModalBody","jsxs","AgentStateModalHero","ModalIcon","Spinner","COLORS","ErrorIcon","TitleMedium","BodyPrimary","ModalActions","Button"],"mappings":"kZA6DaA,EAAkD,CAAC,CAC/D,KAAAC,EACA,MAAAC,EACA,MAAAC,EACA,QAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,QAAAC,EACA,OAAAC,CACD,IAAM,CACL,GAAI,CAACR,EACJ,OAAO,KAGR,MAAMS,EAAYR,IAAU,UACtBS,EAAUD,EAAY,KAAOJ,GAAmBD,EAEtD,OACCO,EAAAA,IAACC,EAAAA,YAAA,CACA,YAAU,oBACV,KAAI,GACJ,QAAAL,EACA,MAAM,QACN,OAAAC,EACA,gBAAiBC,EACjB,oBAAqB,CAACA,EACtB,iBAAkB,CAACA,EAEnB,gBAACI,EAAAA,oBAAA,CAAoB,MAAO,CAAE,IAAK,QAClC,SAAA,CAAAC,OAACC,EAAAA,oBAAA,CACA,SAAA,CAAAJ,EAAAA,IAACK,EAAAA,UAAA,CACC,SAAAP,EACAH,EACCK,EAAAA,IAAC,MAAA,CAAI,IAAKL,EAAiB,IAAI,GAAG,MAAO,GAAI,OAAQ,GAAI,EAEzDK,EAAAA,IAACM,EAAAA,QAAA,CAAQ,KAAK,QAAQ,MAAOC,EAAAA,OAAO,OAAO,KAAA,CAAO,EAGnDP,EAAAA,IAACQ,EAAAA,QAAA,CAAU,MAAO,GAAI,OAAQ,GAAI,EAEpC,EAEAL,EAAAA,KAAC,MAAA,CAAI,MAAO,CAAE,QAAS,OAAQ,cAAe,SAAU,IAAK,KAAA,EAC5D,SAAA,CAAAH,MAACS,EAAAA,YAAA,CAAY,MAAOF,EAAAA,OAAO,QAAQ,QAAU,SAAAhB,EAAM,EACnDS,EAAAA,IAACU,EAAAA,YAAA,CACA,MAAOH,EAAAA,OAAO,QAAQ,UACtB,MAAO,CAAE,WAAY,UAAA,EAEpB,SAAAf,CAAA,CAAA,CACF,CAAA,CACD,CAAA,EACD,EAECO,UACCY,eAAA,CACC,SAAA,CAAAjB,SACC,MAAA,CAAI,MAAO,CAAE,QAAS,QACtB,SAAAM,EAAAA,IAACY,EAAAA,OAAA,CACA,YAAU,wBACV,WAAW,YACX,KAAK,SACL,iBAAgB,GAChB,WAAYlB,EAAgB,KAC5B,UAAWA,EAAgB,UAC3B,QAASA,EAAgB,OAAA,CAAA,EAE3B,EAEAD,GACAO,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,QAAS,QACtB,SAAAA,EAAAA,IAACY,EAAAA,OAAA,CACA,YAAU,sBACV,WAAW,UACX,KAAK,SACL,iBAAgB,GAChB,WAAYnB,EAAc,KAC1B,UAAWA,EAAc,UACzB,QAASA,EAAc,OAAA,CAAA,CACxB,CACD,CAAA,CAAA,CAEF,CAAA,CAAA,CAEF,CAAA,CAAA,CAGH"}

package/dist/cjs/components/agent-builder/components/ChannelSelectModal.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("../../../assets/icons/RedirectToNew.svg.js"),x=require("react"),i=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),a=require("../AgentBuilder.styled.js"),g=require("../constants/channels.js"),f=require("../../modals/styledModal.js"),T=require("../../checkBox/CheckBox.js"),k=require("../../tag/Tag.js"),p=({channel:n,selectedIds:c,onClose:s,onApply:S,onManageChannels:d})=>{const[h,u]=x.useState(c);if(x.useEffect(()=>{n&&u(c)},[n]),!n)return null;const{Icon:y,tint:m,accountsNoun:o}=g.channelPresentation(n.type,n.label),C=t=>u(l=>l.includes(t)?l.filter(b=>b!==t):[...l,t]);return e.jsx(f.StyledModal,{"data-test":"agent-channel-select-modal",open:!0,onClose:s,width:"640px",headingTitle:"Select channels to activate",headingSubtitle:`Select the ${o} on which you need this agent enabled on.`,modalHeaderStyles:{padding:"24px",boxSizing:"border-box"},modalBodyStyles:{boxSizing:"border-box"},footerContainerStyle:{padding:"20px 24px",boxSizing:"border-box"},footerLeftCustomElement:d?e.jsxs(a.ChannelsLink,{"data-test":"agent-channel-management-link",type:"button",onClick:d,style:{fontSize:14,lineHeight:"20px",fontWeight:600},children:["Channel management",e.jsx(j.default,{width:16,height:16})]}):void 0,secondaryButton:{"data-test":"agent-channel-cancel",buttonType:"tertiaryGray",size:"small",buttonText:"Cancel",onClick:s},primaryButton:{"data-test":"agent-channel-apply",buttonType:"primary",size:"small",buttonText:"Apply",onClick:()=>S(h)},children:e.jsxs(a.ChannelPickerBody,{children:[e.jsx(i.BodySecondary,{color:r.COLORS.content.secondary,children:`Select from available ${o}`}),e.jsxs(a.ChannelPickerList,{children:[n.accounts.map(t=>{const l=g.isAccountDisconnected(t);return e.jsxs(a.ChannelPickerRow,{"data-test":`agent-channel-account-${t.channelId}`,children:[e.jsx(T.CheckBox,{isChecked:h.includes(t.channelId),ariaLabel:t.channelName,value:t.channelId,onValueChange:()=>C(t.channelId),style:a.CHECKBOX_SLOT}),e.jsxs(a.ChannelPickerAccount,{children:[e.jsx(a.ChannelGlyph,{tint:m,children:y&&e.jsx(y,{size:16})}),e.jsx(i.TitleSmall,{color:r.COLORS.content.primary,children:t.channelName}),l&&e.jsx(k.Tag,{tagText:"Disconnected",type:"negative",variant:"regular",height:20,padding:"2px 8px"})]})]},t.channelId)}),n.accounts.length===0&&e.jsx(i.BodySecondary,{color:r.COLORS.content.placeholder,children:`No ${o} are connected to this store yet.`})]})]})})};p.displayName="ChannelSelectModal";exports.ChannelSelectModal=p;
+//# sourceMappingURL=ChannelSelectModal.js.map

package/dist/cjs/components/agent-builder/components/ChannelSelectModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelSelectModal.js","sources":["../../../../../src/components/agent-builder/components/ChannelSelectModal.tsx"],"sourcesContent":["import RedirectIcon from '@src/assets/icons/RedirectToNew.svg';\nimport React, { useEffect, useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox';\nimport { StyledModal } from '@src/components/modals';\nimport { Tag } from '@src/components/tag';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type { AgentChannel } from '../AgentBuilder.model';\nimport {\n\tChannelGlyph,\n\tChannelPickerAccount,\n\tChannelPickerBody,\n\tChannelPickerList,\n\tChannelPickerRow,\n\tChannelsLink,\n\tCHECKBOX_SLOT,\n} from '../AgentBuilder.styled';\nimport {\n\tchannelPresentation,\n\tisAccountDisconnected,\n} from '../constants/channels';\n\ninterface ChannelSelectModalProps {\n\t/** The channel being edited. `null` closes the modal. */\n\tchannel: AgentChannel | null;\n\t/** Currently activated backend channel ids for this channel. */\n\tselectedIds: string[];\n\tonClose: () => void;\n\t/** Apply — commits the draft selection as backend channel ids. */\n\tonApply: (channelIds: string[]) => void;\n\t/** Footer \"Channel management\" link. Omit to hide it. */\n\tonManageChannels?: () => void;\n}\n\n/**\n * Per-channel account picker, opened from a channel row's edit button.\n *\n * The selection is a LOCAL draft until Apply — the design gives the merchant a\n * Cancel, so toggling here must not reach the agent value until they commit.\n *\n * A disconnected account stays selectable and stays selected: the merchant may\n * be mid-reconnect, and quietly removing it from their agent would hide the\n * problem rather than surface it. It's labelled instead, and the row it came\n * from carries the alert.\n */\nexport const ChannelSelectModal: React.FC<ChannelSelectModalProps> = ({\n\tchannel,\n\tselectedIds,\n\tonClose,\n\tonApply,\n\tonManageChannels,\n}) => {\n\tconst [draft, setDraft] = useState<string[]>(selectedIds);\n\n\t// Re-seed whenever the modal opens (or reopens for a different channel), so a\n\t// cancelled edit doesn't leak into the next one.\n\tuseEffect(() => {\n\t\tif (channel) {\n\t\t\tsetDraft(selectedIds);\n\t\t}\n\t\t// `selectedIds` is intentionally read only at open time — the draft owns it\n\t\t// from then until Apply.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [channel]);\n\n\tif (!channel) {\n\t\treturn null;\n\t}\n\n\tconst { Icon, tint, accountsNoun } = channelPresentation(\n\t\tchannel.type,\n\t\tchannel.label,\n\t);\n\n\tconst toggle = (channelId: string) =>\n\t\tsetDraft((prev) =>\n\t\t\tprev.includes(channelId)\n\t\t\t\t? prev.filter((id) => id !== channelId)\n\t\t\t\t: [...prev, channelId],\n\t\t);\n\n\treturn (\n\t\t<StyledModal\n\t\t\tdata-test=\"agent-channel-select-modal\"\n\t\t\topen\n\t\t\tonClose={onClose}\n\t\t\twidth=\"640px\"\n\t\t\theadingTitle=\"Select channels to activate\"\n\t\t\theadingSubtitle={`Select the ${accountsNoun} on which you need this agent enabled on.`}\n\t\t\t// This repo has no global `box-sizing: border-box`, so StyledModal's\n\t\t\t// `width: 100%` + 24px side padding resolves to 688px inside its 640px\n\t\t\t// `overflow: hidden` wrapper — clipping the right 48px, and with it the\n\t\t\t// primary button. Border-box on each section is the fix that doesn't\n\t\t\t// touch the shared modal.\n\t\t\tmodalHeaderStyles={{ padding: '24px', boxSizing: 'border-box' }}\n\t\t\tmodalBodyStyles={{ boxSizing: 'border-box' }}\n\t\t\tfooterContainerStyle={{ padding: '20px 24px', boxSizing: 'border-box' }}\n\t\t\tfooterLeftCustomElement={\n\t\t\t\tonManageChannels ? (\n\t\t\t\t\t<ChannelsLink\n\t\t\t\t\t\tdata-test=\"agent-channel-management-link\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={onManageChannels}\n\t\t\t\t\t\tstyle={{ fontSize: 14, lineHeight: '20px', fontWeight: 600 }}\n\t\t\t\t\t>\n\t\t\t\t\t\tChannel management\n\t\t\t\t\t\t<RedirectIcon width={16} height={16} />\n\t\t\t\t\t</ChannelsLink>\n\t\t\t\t) : undefined\n\t\t\t}\n\t\t\tsecondaryButton={{\n\t\t\t\t'data-test': 'agent-channel-cancel',\n\t\t\t\tbuttonType: 'tertiaryGray',\n\t\t\t\tsize: 'small',\n\t\t\t\tbuttonText: 'Cancel',\n\t\t\t\tonClick: onClose,\n\t\t\t}}\n\t\t\tprimaryButton={{\n\t\t\t\t'data-test': 'agent-channel-apply',\n\t\t\t\tbuttonType: 'primary',\n\t\t\t\tsize: 'small',\n\t\t\t\tbuttonText: 'Apply',\n\t\t\t\tonClick: () => onApply(draft),\n\t\t\t}}\n\t\t>\n\t\t\t<ChannelPickerBody>\n\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t{`Select from available ${accountsNoun}`}\n\t\t\t\t</BodySecondary>\n\n\t\t\t\t<ChannelPickerList>\n\t\t\t\t\t{channel.accounts.map((account) => {\n\t\t\t\t\t\tconst disconnected = isAccountDisconnected(account);\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ChannelPickerRow\n\t\t\t\t\t\t\t\tkey={account.channelId}\n\t\t\t\t\t\t\t\tdata-test={`agent-channel-account-${account.channelId}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<CheckBox\n\t\t\t\t\t\t\t\t\tisChecked={draft.includes(account.channelId)}\n\t\t\t\t\t\t\t\t\tariaLabel={account.channelName}\n\t\t\t\t\t\t\t\t\tvalue={account.channelId}\n\t\t\t\t\t\t\t\t\tonValueChange={() => toggle(account.channelId)}\n\t\t\t\t\t\t\t\t\tstyle={CHECKBOX_SLOT}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<ChannelPickerAccount>\n\t\t\t\t\t\t\t\t\t<ChannelGlyph tint={tint}>\n\t\t\t\t\t\t\t\t\t\t{Icon && <Icon size={16} />}\n\t\t\t\t\t\t\t\t\t</ChannelGlyph>\n\t\t\t\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t\t{account.channelName}\n\t\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t\t\t{disconnected && (\n\t\t\t\t\t\t\t\t\t\t// NOT `size=\"small\"`: that renders through BodyTiny, which\n\t\t\t\t\t\t\t\t\t\t// is 10px AND has no font-family, so it falls back to the\n\t\t\t\t\t\t\t\t\t\t// browser serif. The default reads as 12px Inter — Figma's\n\t\t\t\t\t\t\t\t\t\t// body-caption, same as every other chip.\n\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\ttagText=\"Disconnected\"\n\t\t\t\t\t\t\t\t\t\t\ttype=\"negative\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\t\t\t\tpadding=\"2px 8px\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</ChannelPickerAccount>\n\t\t\t\t\t\t\t</ChannelPickerRow>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\n\t\t\t\t\t{channel.accounts.length === 0 && (\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t{`No ${accountsNoun} are connected to this store yet.`}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</ChannelPickerList>\n\t\t\t</ChannelPickerBody>\n\t\t</StyledModal>\n\t);\n};\n\nChannelSelectModal.displayName = 'ChannelSelectModal';\n\nexport type { ChannelSelectModalProps };\n"],"names":["ChannelSelectModal","channel","selectedIds","onClose","onApply","onManageChannels","draft","setDraft","useState","useEffect","Icon","tint","accountsNoun","channelPresentation","toggle","channelId","prev","id","jsx","StyledModal","jsxs","ChannelsLink","RedirectIcon","ChannelPickerBody","BodySecondary","COLORS","ChannelPickerList","account","disconnected","isAccountDisconnected","ChannelPickerRow","CheckBox","CHECKBOX_SLOT","ChannelPickerAccount","ChannelGlyph","TitleSmall","Tag"],"mappings":"2cA6CaA,EAAwD,CAAC,CACrE,QAAAC,EACA,YAAAC,EACA,QAAAC,EACA,QAAAC,EACA,iBAAAC,CACD,IAAM,CACL,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAAmBN,CAAW,EAaxD,GATAO,EAAAA,UAAU,IAAM,CACXR,GACHM,EAASL,CAAW,CAKtB,EAAG,CAACD,CAAO,CAAC,EAER,CAACA,EACJ,OAAO,KAGR,KAAM,CAAE,KAAAS,EAAM,KAAAC,EAAM,aAAAC,CAAA,EAAiBC,EAAAA,oBACpCZ,EAAQ,KACRA,EAAQ,KAAA,EAGHa,EAAUC,GACfR,EAAUS,GACTA,EAAK,SAASD,CAAS,EACpBC,EAAK,OAAQC,GAAOA,IAAOF,CAAS,EACpC,CAAC,GAAGC,EAAMD,CAAS,CAAA,EAGxB,OACCG,EAAAA,IAACC,EAAAA,YAAA,CACA,YAAU,6BACV,KAAI,GACJ,QAAAhB,EACA,MAAM,QACN,aAAa,8BACb,gBAAiB,cAAcS,CAAY,4CAM3C,kBAAmB,CAAE,QAAS,OAAQ,UAAW,YAAA,EACjD,gBAAiB,CAAE,UAAW,YAAA,EAC9B,qBAAsB,CAAE,QAAS,YAAa,UAAW,YAAA,EACzD,wBACCP,EACCe,EAAAA,KAACC,EAAAA,aAAA,CACA,YAAU,gCACV,KAAK,SACL,QAAShB,EACT,MAAO,CAAE,SAAU,GAAI,WAAY,OAAQ,WAAY,GAAA,EACvD,SAAA,CAAA,qBAEAa,EAAAA,IAACI,EAAAA,QAAA,CAAa,MAAO,GAAI,OAAQ,EAAA,CAAI,CAAA,CAAA,CAAA,EAEnC,OAEL,gBAAiB,CAChB,YAAa,uBACb,WAAY,eACZ,KAAM,QACN,WAAY,SACZ,QAASnB,CAAA,EAEV,cAAe,CACd,YAAa,sBACb,WAAY,UACZ,KAAM,QACN,WAAY,QACZ,QAAS,IAAMC,EAAQE,CAAK,CAAA,EAG7B,gBAACiB,oBAAA,CACA,SAAA,CAAAL,EAAAA,IAACM,EAAAA,eAAc,MAAOC,EAAAA,OAAO,QAAQ,UACnC,SAAA,yBAAyBb,CAAY,EAAA,CACvC,SAECc,EAAAA,kBAAA,CACC,SAAA,CAAAzB,EAAQ,SAAS,IAAK0B,GAAY,CAClC,MAAMC,EAAeC,EAAAA,sBAAsBF,CAAO,EAClD,OACCP,EAAAA,KAACU,EAAAA,iBAAA,CAEA,YAAW,yBAAyBH,EAAQ,SAAS,GAErD,SAAA,CAAAT,EAAAA,IAACa,EAAAA,SAAA,CACA,UAAWzB,EAAM,SAASqB,EAAQ,SAAS,EAC3C,UAAWA,EAAQ,YACnB,MAAOA,EAAQ,UACf,cAAe,IAAMb,EAAOa,EAAQ,SAAS,EAC7C,MAAOK,EAAAA,aAAA,CAAA,SAEPC,EAAAA,qBAAA,CACA,SAAA,CAAAf,EAAAA,IAACgB,EAAAA,cAAa,KAAAvB,EACZ,SAAAD,SAASA,EAAA,CAAK,KAAM,GAAI,CAAA,CAC1B,QACCyB,EAAAA,WAAA,CAAW,MAAOV,EAAAA,OAAO,QAAQ,QAChC,WAAQ,YACV,EACCG,GAKAV,EAAAA,IAACkB,EAAAA,IAAA,CACA,QAAQ,eACR,KAAK,WACL,QAAQ,UACR,OAAQ,GACR,QAAQ,SAAA,CAAA,CACT,CAAA,CAEF,CAAA,CAAA,EA9BKT,EAAQ,SAAA,CAiChB,CAAC,EAEA1B,EAAQ,SAAS,SAAW,GAC5BiB,EAAAA,IAACM,EAAAA,cAAA,CAAc,MAAOC,EAAAA,OAAO,QAAQ,YACnC,SAAA,MAAMb,CAAY,mCAAA,CACpB,CAAA,CAAA,CAEF,CAAA,CAAA,CACD,CAAA,CAAA,CAGH,EAEAZ,EAAmB,YAAc"}

package/dist/cjs/components/agent-builder/components/ChannelsSection.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),A=require("../../../assets/icons/edit.svg.js"),B=require("../../../assets/icons/errorInfo.svg.js"),T=require("react"),f=require("../../TypographyStyle.js"),b=require("../../../constants/Theme.js"),a=require("../AgentBuilder.styled.js"),u=require("../constants/channels.js"),M=require("../context/AgentBuilderContext.js"),$=require("./ChannelSelectModal.js"),O=require("../../checkBox/CheckBox.js"),m=require("../../tooltips/Tooltip.js"),x=require("../../tag/Tag.js"),R=require("../../icon-button/IconButton.js"),S=3,w=n=>[...n.filter(u.isAccountDisconnected),...n.filter(i=>!u.isAccountDisconnected(i))],I=()=>{const{value:n,updateField:i,availableChannels:c,onManageChannels:g}=M.useAgentBuilderContext(),[s,r]=T.useState(null),p=T.useMemo(()=>{const t=new Map;return(n.channels??[]).forEach(o=>t.set(o.type,o.channelIds)),t},[n.channels]);if(!c||c.length===0)return null;const C=(t,o)=>{const d=(n.channels??[]).filter(y=>y.type!==t);i("channels",o.length>0?[...d,{type:t,channelIds:o}]:d)},l=c.find(t=>t.type===s)??null;return e.jsxs(a.ChannelsSectionRoot,{children:[e.jsx(f.TitleSmall,{color:b.COLORS.content.primary,children:"Channels to activate it on"}),c.map(t=>e.jsx(L,{channel:t,selectedIds:p.get(t.type)??[],onSelectionChange:o=>C(t.type,o),onEdit:()=>r(t.type)},String(t.type))),e.jsx($.ChannelSelectModal,{channel:l,selectedIds:l?p.get(l.type)??[]:[],onClose:()=>r(null),onApply:t=>{l&&C(l.type,t),r(null)},onManageChannels:g&&l?()=>g(l.type):void 0})]})};I.displayName="ChannelsSection";const L=({channel:n,selectedIds:i,onSelectionChange:c,onEdit:g})=>{const{label:s,Icon:r,tint:p,accountsNoun:C}=u.channelPresentation(n.type,n.label),l=n.accounts.length===0,t=u.selectedAccounts(n,i),o=!l&&t.length===n.accounts.length,d=t.length>0&&!o,y=w(t.length>0?t:n.accounts),q=y.slice(0,S),j=y.slice(S),v=()=>c(o?[]:n.accounts.map(h=>h.channelId));return e.jsx(a.ChannelCard,{"data-test":`agent-channel-${n.type}`,role:"group","aria-label":s,children:e.jsxs(a.ChannelRow,{children:[e.jsxs(a.ChannelRowMain,{children:[e.jsx(O.CheckBox,{isChecked:o||d,isPartiallyChecked:d,isDisabled:l,ariaLabel:s,onValueChange:v,style:a.CHECKBOX_SLOT}),e.jsxs(a.ChannelIdentity,{children:[e.jsx(a.ChannelGlyph,{tint:p,children:r&&e.jsx(r,{size:16})}),e.jsx(f.TitleSmall,{color:b.COLORS.content.primary,children:s})]}),e.jsx(a.ChannelChips,{children:l?e.jsx(m.Tooltip,{body:`No ${C} are connected to this store yet. Connect one from channel management to activate this agent on ${s}.`,placement:"top",children:e.jsx(a.ChipTooltipTarget,{children:e.jsx(x.Tag,{tagText:"Disabled",type:"neutral",variant:"regular",height:24,cursor:"default"})})}):e.jsxs(e.Fragment,{children:[q.map(h=>e.jsx(N,{account:h,channelLabel:s},h.channelId)),j.length>0&&e.jsx(m.Tooltip,{body:j.map(h=>h.channelName).join(", "),placement:"top",children:e.jsx(a.ChipTooltipTarget,{children:e.jsx(x.Tag,{tagText:`+${j.length}`,type:"purple",variant:"regular",height:24,cursor:"default"})})})]})})]}),e.jsx(R.IconButton,{"data-test":`agent-channel-${n.type}-edit`,"aria-label":`Edit ${s} channels`,Icon:A.default,size:"xs",iconPadding:4,disabled:l,onClick:g})]})})},N=({account:n,channelLabel:i})=>u.isAccountDisconnected(n)?e.jsx(m.Tooltip,{body:`${n.channelName} is disconnected. This agent won't run on it until you reconnect it from ${i} channel management.`,placement:"top",children:e.jsx(a.ChipTooltipTarget,{children:e.jsx(x.Tag,{tagText:n.channelName,type:"negative",variant:"regular",height:24,LeadingIcon:B.default,leadingIconId:`channel-error-${n.channelId}`,cursor:"default"})})}):e.jsx(x.Tag,{tagText:n.channelName,type:"purple",variant:"regular",height:24});exports.ChannelsSection=I;
+//# sourceMappingURL=ChannelsSection.js.map

package/dist/cjs/components/agent-builder/components/ChannelsSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelsSection.js","sources":["../../../../../src/components/agent-builder/components/ChannelsSection.tsx"],"sourcesContent":["import EditIcon from '@src/assets/icons/edit.svg';\nimport ErrorInfoIcon from '@src/assets/icons/errorInfo.svg';\nimport React, { useMemo, useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox';\nimport { IconButton } from '@src/components/icon-button';\nimport { Tag } from '@src/components/tag';\nimport { Tooltip } from '@src/components/tooltips';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type {\n\tAgentChannel,\n\tAgentChannelAccount,\n\tAgentChannelType,\n} from '../AgentBuilder.model';\nimport {\n\tChannelCard,\n\tChannelChips,\n\tChannelGlyph,\n\tChannelIdentity,\n\tChannelRow,\n\tChannelRowMain,\n\tChannelsSectionRoot,\n\tCHECKBOX_SLOT,\n\tChipTooltipTarget,\n} from '../AgentBuilder.styled';\nimport {\n\tchannelPresentation,\n\tisAccountDisconnected,\n\tselectedAccounts,\n} from '../constants/channels';\nimport { useAgentBuilderContext } from '../context/AgentBuilderContext';\nimport { ChannelSelectModal } from './ChannelSelectModal';\n\n/**\n * How many account chips a row shows before collapsing the rest into \"+N\". The\n * design draws three; without a cap a store with a dozen numbers pushes the row\n * well past its 48px height.\n */\nconst MAX_VISIBLE_CHIPS = 3;\n\n/**\n * Chips for a row: disconnected accounts first so a cap can never hide the very\n * thing the merchant needs to act on, then the rest in their original order.\n */\nconst chipOrder = (accounts: AgentChannelAccount[]): AgentChannelAccount[] => [\n\t...accounts.filter(isAccountDisconnected),\n\t...accounts.filter((a) => !isAccountDisconnected(a)),\n];\n\n/**\n * Step 1's \"Channels to activate it on\" — one card per connected channel, each\n * with a select-all checkbox, the accounts it covers as chips, and an edit\n * button that opens the per-account picker.\n *\n * Renders nothing when the consumer passes no `availableChannels`, so a host\n * that hasn't wired channels up yet sees the step exactly as it was.\n */\nexport const ChannelsSection: React.FC = () => {\n\tconst { value, updateField, availableChannels, onManageChannels } =\n\t\tuseAgentBuilderContext();\n\n\t// Which channel's picker is open (by type); null = closed.\n\tconst [editingType, setEditingType] = useState<AgentChannelType | null>(null);\n\n\t// Selection is stored as a list; index it once so each row is a lookup.\n\tconst selectionByType = useMemo(() => {\n\t\tconst map = new Map<AgentChannelType, string[]>();\n\t\t(value.channels ?? []).forEach((c) => map.set(c.type, c.channelIds));\n\t\treturn map;\n\t}, [value.channels]);\n\n\tif (!availableChannels || availableChannels.length === 0) {\n\t\treturn null;\n\t}\n\n\tconst setSelection = (type: AgentChannelType, channelIds: string[]) => {\n\t\tconst rest = (value.channels ?? []).filter((c) => c.type !== type);\n\t\t// An empty selection drops the channel entirely rather than persisting a\n\t\t// `{ type, channelIds: [] }` no-op the backend would have to filter out.\n\t\tupdateField(\n\t\t\t'channels',\n\t\t\tchannelIds.length > 0 ? [...rest, { type, channelIds }] : rest,\n\t\t);\n\t};\n\n\tconst editingChannel =\n\t\tavailableChannels.find((c) => c.type === editingType) ?? null;\n\n\treturn (\n\t\t<ChannelsSectionRoot>\n\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\tChannels to activate it on\n\t\t\t</TitleSmall>\n\n\t\t\t{availableChannels.map((channel) => (\n\t\t\t\t<ChannelCardRow\n\t\t\t\t\tkey={String(channel.type)}\n\t\t\t\t\tchannel={channel}\n\t\t\t\t\tselectedIds={selectionByType.get(channel.type) ?? []}\n\t\t\t\t\tonSelectionChange={(ids) => setSelection(channel.type, ids)}\n\t\t\t\t\tonEdit={() => setEditingType(channel.type)}\n\t\t\t\t/>\n\t\t\t))}\n\n\t\t\t<ChannelSelectModal\n\t\t\t\tchannel={editingChannel}\n\t\t\t\tselectedIds={\n\t\t\t\t\teditingChannel ? selectionByType.get(editingChannel.type) ?? [] : []\n\t\t\t\t}\n\t\t\t\tonClose={() => setEditingType(null)}\n\t\t\t\tonApply={(ids) => {\n\t\t\t\t\tif (editingChannel) {\n\t\t\t\t\t\tsetSelection(editingChannel.type, ids);\n\t\t\t\t\t}\n\t\t\t\t\tsetEditingType(null);\n\t\t\t\t}}\n\t\t\t\tonManageChannels={\n\t\t\t\t\tonManageChannels && editingChannel\n\t\t\t\t\t\t? () => onManageChannels(editingChannel.type)\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t/>\n\t\t</ChannelsSectionRoot>\n\t);\n};\n\nChannelsSection.displayName = 'ChannelsSection';\n\ninterface ChannelCardRowProps {\n\tchannel: AgentChannel;\n\tselectedIds: string[];\n\tonSelectionChange: (channelIds: string[]) => void;\n\tonEdit: () => void;\n}\n\nconst ChannelCardRow: React.FC<ChannelCardRowProps> = ({\n\tchannel,\n\tselectedIds,\n\tonSelectionChange,\n\tonEdit,\n}) => {\n\tconst { label, Icon, tint, accountsNoun } = channelPresentation(\n\t\tchannel.type,\n\t\tchannel.label,\n\t);\n\n\t/**\n\t * Zero state — the store supports this channel but has nothing connected\n\t * under it. Nothing on the row is actionable, so the checkbox and the edit\n\t * button are both inert and a \"Disabled\" chip stands in for the accounts.\n\t */\n\tconst isUnavailable = channel.accounts.length === 0;\n\n\tconst selected = selectedAccounts(channel, selectedIds);\n\tconst allSelected =\n\t\t!isUnavailable && selected.length === channel.accounts.length;\n\tconst someSelected = selected.length > 0 && !allSelected;\n\n\t// With nothing picked yet the row shows the store's inventory — that's the\n\t// state the design draws, and it tells the merchant what's on offer. Once\n\t// they've picked, the chips narrow to what the agent actually runs on.\n\tconst shown = chipOrder(selected.length > 0 ? selected : channel.accounts);\n\tconst visible = shown.slice(0, MAX_VISIBLE_CHIPS);\n\tconst overflow = shown.slice(MAX_VISIBLE_CHIPS);\n\n\tconst toggleAll = () =>\n\t\tonSelectionChange(\n\t\t\tallSelected ? [] : channel.accounts.map((a) => a.channelId),\n\t\t);\n\n\treturn (\n\t\t<ChannelCard\n\t\t\tdata-test={`agent-channel-${channel.type}`}\n\t\t\t// A card groups a channel's checkbox, chips and edit button; naming the\n\t\t\t// group lets assistive tech (and tests) address one channel at a time.\n\t\t\trole=\"group\"\n\t\t\taria-label={label}\n\t\t>\n\t\t\t<ChannelRow>\n\t\t\t\t<ChannelRowMain>\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tisChecked={allSelected || someSelected}\n\t\t\t\t\t\tisPartiallyChecked={someSelected}\n\t\t\t\t\t\tisDisabled={isUnavailable}\n\t\t\t\t\t\tariaLabel={label}\n\t\t\t\t\t\tonValueChange={toggleAll}\n\t\t\t\t\t\tstyle={CHECKBOX_SLOT}\n\t\t\t\t\t/>\n\t\t\t\t\t<ChannelIdentity>\n\t\t\t\t\t\t<ChannelGlyph tint={tint}>\n\t\t\t\t\t\t\t{Icon && <Icon size={16} />}\n\t\t\t\t\t\t</ChannelGlyph>\n\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>\n\t\t\t\t\t</ChannelIdentity>\n\n\t\t\t\t\t<ChannelChips>\n\t\t\t\t\t\t{isUnavailable ? (\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tbody={`No ${accountsNoun} are connected to this store yet. Connect one from channel management to activate this agent on ${label}.`}\n\t\t\t\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ChipTooltipTarget>\n\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\ttagText=\"Disabled\"\n\t\t\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\t\t\t\tcursor=\"default\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</ChipTooltipTarget>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{visible.map((account) => (\n\t\t\t\t\t\t\t\t\t<AccountChip\n\t\t\t\t\t\t\t\t\t\tkey={account.channelId}\n\t\t\t\t\t\t\t\t\t\taccount={account}\n\t\t\t\t\t\t\t\t\t\tchannelLabel={label}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t{overflow.length > 0 && (\n\t\t\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\t\t\tbody={overflow.map((a) => a.channelName).join(', ')}\n\t\t\t\t\t\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<ChipTooltipTarget>\n\t\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\t\ttagText={`+${overflow.length}`}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"purple\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t\t\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\t\t\t\t\t\tcursor=\"default\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</ChipTooltipTarget>\n\t\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ChannelChips>\n\t\t\t\t</ChannelRowMain>\n\n\t\t\t\t<IconButton\n\t\t\t\t\tdata-test={`agent-channel-${channel.type}-edit`}\n\t\t\t\t\taria-label={`Edit ${label} channels`}\n\t\t\t\t\tIcon={EditIcon}\n\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\ticonPadding={4}\n\t\t\t\t\tdisabled={isUnavailable}\n\t\t\t\t\tonClick={onEdit}\n\t\t\t\t/>\n\t\t\t</ChannelRow>\n\t\t</ChannelCard>\n\t);\n};\n\n/**\n * One account chip. A healthy account reads as a brand chip; a disconnected one\n * turns negative and gains the error glyph.\n *\n * The tooltip is NOT in the design — but a bare red chip tells the merchant\n * something is broken and nothing about what to do, so it names the account and\n * the fix.\n */\nconst AccountChip: React.FC<{\n\taccount: AgentChannelAccount;\n\tchannelLabel: string;\n}> = ({ account, channelLabel }) => {\n\tif (!isAccountDisconnected(account)) {\n\t\treturn (\n\t\t\t<Tag\n\t\t\t\ttagText={account.channelName}\n\t\t\t\ttype=\"purple\"\n\t\t\t\tvariant=\"regular\"\n\t\t\t\theight={24}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Tooltip\n\t\t\tbody={`${account.channelName} is disconnected. This agent won't run on it until you reconnect it from ${channelLabel} channel management.`}\n\t\t\tplacement=\"top\"\n\t\t>\n\t\t\t<ChipTooltipTarget>\n\t\t\t\t<Tag\n\t\t\t\t\ttagText={account.channelName}\n\t\t\t\t\ttype=\"negative\"\n\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t\theight={24}\n\t\t\t\t\tLeadingIcon={ErrorInfoIcon}\n\t\t\t\t\t// Tag doesn't spread rest props, so `data-test` would be dropped —\n\t\t\t\t\t// `leadingIconId` is the one hook it does put on the DOM, which gives\n\t\t\t\t\t// the error glyph a stable handle for tests and e2e.\n\t\t\t\t\tleadingIconId={`channel-error-${account.channelId}`}\n\t\t\t\t\tcursor=\"default\"\n\t\t\t\t/>\n\t\t\t</ChipTooltipTarget>\n\t\t</Tooltip>\n\t);\n};\n"],"names":["MAX_VISIBLE_CHIPS","chipOrder","accounts","isAccountDisconnected","a","ChannelsSection","value","updateField","availableChannels","onManageChannels","useAgentBuilderContext","editingType","setEditingType","useState","selectionByType","useMemo","map","c","setSelection","type","channelIds","rest","editingChannel","ChannelsSectionRoot","jsx","TitleSmall","COLORS","channel","ChannelCardRow","ids","ChannelSelectModal","selectedIds","onSelectionChange","onEdit","label","Icon","tint","accountsNoun","channelPresentation","isUnavailable","selected","selectedAccounts","allSelected","someSelected","shown","visible","overflow","toggleAll","ChannelCard","ChannelRow","jsxs","ChannelRowMain","CheckBox","CHECKBOX_SLOT","ChannelIdentity","ChannelGlyph","ChannelChips","Tooltip","ChipTooltipTarget","Tag","Fragment","account","AccountChip","IconButton","EditIcon","channelLabel","ErrorInfoIcon"],"mappings":"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"}

package/dist/cjs/components/agent-builder/components/CreateSubAgentPanel.js

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),Le=require("styled-components"),de=require("../../../utils/arrayUtils.js"),X=require("../../../constants/Theme.js"),De=require("../constants/charLimits.js"),c=require("../constants/tools.js"),g=require("../utils/mentionSerialization.js"),f=require("../utils/sourceIcons.js"),Ne=require("../utils/toolActions.js"),Ke=require("./ConfigToolPanel.js"),Z=require("./DrawerHeaderText.js"),pe=require("./MentionEditor.js"),Pe=require("./RestApiToolPanel.js"),Be=require("./SelectableListSection.js"),Ge=require("../../side-modal/SideModal.js"),Ue=require("../../input/Input.js"),ze=require("../../toaster/Toaster.js"),He=u=>u&&typeof u=="object"&&"default"in u?u:{default:u},Fe=He(Le),We=1e3,J=1002,me=(u,S)=>{const i=u??[];return i.some(d=>d.id===S.id)?i.map(d=>d.id===S.id?S:d):[...i,S]},ge=Fe.default.button`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),De=require("styled-components"),de=require("../../../utils/arrayUtils.js"),Z=require("../../../constants/Theme.js"),Ne=require("../constants/charLimits.js"),c=require("../constants/tools.js"),g=require("../utils/mentionSerialization.js"),f=require("../utils/sourceIcons.js"),Ke=require("../utils/toolActions.js"),Le=require("./ConfigToolPanel.js"),J=require("./DrawerHeaderText.js"),me=require("./MentionEditor.js"),Pe=require("./RestApiToolPanel.js"),Be=require("./SelectableListSection.js"),Ge=require("../../side-modal/SideModal.js"),Ue=require("../../input/Input.js"),ze=require("../../toaster/Toaster.js"),He=u=>u&&typeof u=="object"&&"default"in u?u:{default:u},Fe=He(De),We=1e3,Q=1002,pe=(u,S)=>{const i=u??[];return i.some(d=>d.id===S.id)?i.map(d=>d.id===S.id?S:d):[...i,S]},ge=Fe.default.button`
 	align-self: flex-start;
-	border: 1px solid ${X.COLORS.stroke.primary};
-	color: ${X.COLORS.content.primary};
-	background: ${X.COLORS.surface.standard};
+	border: 1px solid ${Z.COLORS.stroke.primary};
+	color: ${Z.COLORS.content.primary};
+	background: ${Z.COLORS.surface.standard};
 	border-radius: 8px;
 	padding: 6px 12px;
 	font-size: 13px;
@@ -14,5 +14,5 @@
 		cursor: default;
 		opacity: 0.6;
 	}
-`,$e=({onClose:u,onSave:S,availableTools:i,onImprove:d,onImproveToolInstructions:Q,configToolTemplates:V,integrationStatus:A,onConnectIntegration:v,title:ee="Create sub-agent",initial:h,existingNames:fe=[],appLabel:te="Manifest",charLimits:T=De.AGENT_CHAR_LIMITS,variablesData:k})=>{const[M,Se]=n.useState(h?.name??""),[b,_]=n.useState(h?.instructions??""),[C,w]=n.useState(h?.guardrail??""),[j,E]=n.useState(h?.tools??[]),[m,L]=n.useState(h?.configTools??[]),[p,D]=n.useState(h?.restApiTools??[]),[l,y]=n.useState(null),O=n.useRef(0),[oe,ne]=n.useState(!1),[he,N]=n.useState(0),[ye,K]=n.useState(0),[x,se]=n.useState(null),P=n.useMemo(()=>[...g.buildAgentMentionItems(i,[],te),...g.buildCustomToolMentionItems(m,p)],[i,te,m,p]),q=n.useRef({}),B=n.useRef("instructions"),Te=n.useCallback(e=>{q.current.instructions=e??void 0},[]),be=n.useCallback(e=>{q.current.guardrail=e??void 0},[]),Ce=n.useCallback(()=>{B.current="instructions"},[]),xe=n.useCallback(()=>{B.current="guardrail"},[]),re=n.useRef(new Set);re.current=new Set([...m,...p].map(e=>e.id));const ie=n.useCallback((e,t)=>{e==="tool"&&!re.current.has(t)&&E(o=>de.addUnique(o,t))},[]),I=n.useCallback((e,t,o)=>{(q.current[B.current]??q.current.instructions)?.("tool",e,t,o)},[]),G=n.useCallback(e=>{O.current+=1,y({key:O.current,kind:"restapi",initialRest:e})},[]),U=n.useCallback((e,t)=>{O.current+=1,y({key:O.current,kind:"config",toolKey:e,initialConfig:t})},[]),Ie=n.useCallback(e=>{const t=c.CONFIG_TOOL_SOURCES[e];t?U(t):G()},[U,G]),Re=n.useCallback(e=>{const t=!p.some(o=>o.id===e.id);D(o=>me(o,e)),t&&I(e.id,g.restApiMentionItem(e).label,c.ToolSource.RestApi),y(null)},[p,I]),Ae=n.useCallback(e=>{const t=!m.some(o=>o.id===e.id);if(L(o=>me(o,e)),t){const o=e.tool_key==="send_slack_message"?c.ToolSource.Slack:c.ToolSource.EmailHandover;I(e.id,g.configToolMentionItem(e).label,o)}y(null)},[m,I]),[z,H]=n.useState(null),F=n.useRef(null),ae=n.useRef(0),ve=e=>{const t=i.find(s=>s.tool_id===e)?.display_name??p.find(s=>s.id===e)?.name??"Tool",o=`{{tool:${e}}}`,a=s=>s.split(o).join("");F.current={instructions:b,guardrail:C,tools:j,configTools:m,restApiTools:p},_(s=>a(s)),w(s=>a(s)),E(s=>s.filter(R=>R!==e)),L(s=>s.filter(R=>R.id!==e)),D(s=>s.filter(R=>R.id!==e)),N(s=>s+1),K(s=>s+1),ae.current+=1,H({id:ae.current,message:`Tool "${t}" removed`})},ke=()=>{const e=F.current;e&&(_(e.instructions),w(e.guardrail),E(e.tools),L(e.configTools),D(e.restApiTools),N(t=>t+1),K(t=>t+1),F.current=null),H(null)},W=M.trim(),$=W.length>0&&fe.some(e=>e.trim().toLowerCase()===W.toLowerCase()),le=W.length>0&&!$&&(b.trim().length>0||C.trim().length>0),_e=j.map(e=>{const t=i.find(o=>o.tool_id===e);return t?{id:e,label:t.display_name,icon:f.sourceIcon(t.source??c.ToolSource.Manifest),authRequired:t.auth_required}:null}).filter(e=>e!==null),we=p.map(e=>({id:e.id,label:g.restApiToolName(e),icon:f.SOURCE_ICONS[c.ToolSource.RestApi],onConfigure:()=>G(e)})),Ee=m.map(e=>({id:e.id,label:g.configToolName(e),icon:f.SOURCE_ICONS[e.tool_key==="send_slack_message"?c.ToolSource.Slack:c.ToolSource.EmailHandover],onConfigure:()=>U(e.tool_key,e)})),Oe=[..._e,...we,...Ee],Y=Ne.buildToolActions(V,Ie,A,v),ce=l?.kind==="config"&&l.toolKey?V?.[l.toolKey]:void 0,qe=i.map(e=>({label:e.display_name,value:e.tool_id,leadingIcon:f.renderSourceIcon(f.sourceIcon(e.source??c.ToolSource.Manifest))??void 0})),Me=(()=>{const e=[],t=new Map;return i.forEach(o=>{const a=o.source??c.ToolSource.Manifest;t.has(a)||(t.set(a,[]),e.push(a)),t.get(a)?.push({label:o.display_name,value:o.tool_id,leadingIcon:f.renderSourceIcon(f.sourceIcon(o.source??c.ToolSource.Manifest))??void 0})}),e.map(o=>({source:o,label:g.toolSourceLabel(o),options:t.get(o)??[],connected:A?.[o],onConnect:()=>v?.(o)}))})(),je=async()=>{if(!le||oe)return;const e=S({name:M.trim(),instructions:b,guardrail:C,tools:j,configTools:m,restApiTools:p});if(e&&typeof e.then=="function"){ne(!0);try{await e}finally{ne(!1)}}},ue=async e=>{if(!(!d||x)){se(e);try{const o=await d(e,e==="instructions"?b:C);e==="instructions"?(_(o),N(a=>a+1)):(w(o),K(a=>a+1))}finally{se(null)}}};return r.jsxs(r.Fragment,{children:[r.jsxs(Ge.SideModal,{header:ee,closeOnEscapeKey:!1,zIndex:We,headerCustomComponent:r.jsx(Z.DrawerHeaderText,{title:ee,subtitle:"Each sub-agent handles one piece of the job. Use @ in the main instructions to call them."}),width:"421px",headerStyle:Z.DRAWER_HEADER_STYLE,bodyStyle:Z.DRAWER_BODY_STYLE,onClose:u,saveButtonProps:{"data-test":"subagent-save",buttonText:"Save",buttonType:"primary",size:"small",disabled:!le,isLoading:oe,onClick:je},cancelButtonProps:{"data-test":"subagent-cancel",buttonText:"Cancel",buttonType:"tertiaryGray",size:"small",onClick:u},children:[r.jsx(Ue.Input,{"data-test":"subagent-name",labelText:"Agent name",labelTextBold:!0,placeholder:"Enter agent name",value:M,maxCharLimit:T.name,maxCharLimitPosition:"TOP",maxCharStyle:{fontSize:12,lineHeight:"16px"},state:$?"invalid":void 0,errorMessage:$?"A sub-agent with this name already exists":void 0,onChangeText:Se}),r.jsx(pe.MentionEditor,{"data-test":"subagent-instructions",label:"Instructions",value:b,onChange:_,maxLength:T.instructions,placeholder:"Write the steps in plain English. The agent will follow them exactly. The more specific you are, the better it performs.",minHeight:"160px",resetKey:`instr-${he}`,mentionItems:P,tools:i,toolActions:Y,variablesData:k,addDataButton:!0,integrationStatus:A,onConnectIntegration:v,onMentionSelect:ie,onFocus:Ce,registerInsert:Te,action:d?r.jsx(ge,{type:"button","data-test":"subagent-improve-instructions",disabled:x!==null,onClick:()=>ue("instructions"),children:x==="instructions"?"Improving…":"Improve with AI"}):void 0}),r.jsx(pe.MentionEditor,{"data-test":"subagent-guardrail",label:"Guardrails",value:C,onChange:w,maxLength:T.guardrail,placeholder:"e.g. Never discuss competitor pricing. Always stay within the cancellation policy. Do not process refunds above ₹10,000 without human approval.",minHeight:"160px",resetKey:`guard-${ye}`,mentionItems:P,tools:i,toolActions:Y,variablesData:k,addDataButton:!0,integrationStatus:A,onConnectIntegration:v,onMentionSelect:ie,onFocus:xe,registerInsert:be,action:d?r.jsx(ge,{type:"button","data-test":"subagent-improve-guardrail",disabled:x!==null,onClick:()=>ue("guardrail"),children:x==="guardrail"?"Improving…":"Improve with AI"}):void 0}),r.jsx(Be.SelectableListSection,{title:"Tools this agent can use",dataTestPrefix:"subagent-tools",items:Oe,addableOptions:qe,sourceGroups:Me,mentionItems:P,actionSources:Y,emptyText:"No tools added yet.",pickerOpensUp:!0,onAdd:e=>{I(e),E(t=>de.addUnique(t,e))},onRemove:ve,confirmDelete:{noun:"tool",zIndex:J+1}})]}),l?.kind==="restapi"&&r.jsx(Pe.RestApiToolPanel,{initial:l.initialRest,charLimits:T,variablesData:k,onImprove:Q,onClose:()=>y(null),onSave:Re,zIndex:J},l.key),l?.kind==="config"&&l.toolKey&&ce&&r.jsx(Ke.ConfigToolPanel,{toolKey:l.toolKey,template:ce,initial:l.initialConfig,charLimits:T,variablesData:k,onImprove:Q,onClose:()=>y(null),onSave:Ae,zIndex:J},l.key),z&&r.jsx(ze.Toaster,{text:z.message,type:"info",position:"top-right",autoClose:5e3,hideCloseButton:!0,buttonProps:{buttonText:"Undo",showButton:!0,onButtonClick:()=>(ke(),{})},onCloseToast:()=>H(null)},z.id)]})};exports.CreateSubAgentPanel=$e;
+`,$e=({onClose:u,onSave:S,availableTools:i,onImprove:d,onImproveToolInstructions:V,configToolTemplates:ee,integrationStatus:v,onConnectIntegration:k,title:te="Create sub-agent",initial:h,existingNames:fe=[],appLabel:y="Manifest",charLimits:C=Ne.AGENT_CHAR_LIMITS,variablesData:_})=>{const[j,Se]=n.useState(h?.name??""),[b,w]=n.useState(h?.instructions??""),[x,E]=n.useState(h?.guardrail??""),[D,O]=n.useState(h?.tools??[]),[p,N]=n.useState(h?.configTools??[]),[m,K]=n.useState(h?.restApiTools??[]),[l,T]=n.useState(null),q=n.useRef(0),[oe,ne]=n.useState(!1),[he,L]=n.useState(0),[ye,P]=n.useState(0),[I,se]=n.useState(null),B=n.useMemo(()=>[...g.buildAgentMentionItems(i,[],y),...g.buildCustomToolMentionItems(p,m)],[i,y,p,m]),M=n.useRef({}),G=n.useRef("instructions"),Te=n.useCallback(e=>{M.current.instructions=e??void 0},[]),Ce=n.useCallback(e=>{M.current.guardrail=e??void 0},[]),be=n.useCallback(()=>{G.current="instructions"},[]),xe=n.useCallback(()=>{G.current="guardrail"},[]),re=n.useRef(new Set);re.current=new Set([...p,...m].map(e=>e.id));const ie=n.useCallback((e,t)=>{e==="tool"&&!re.current.has(t)&&O(o=>de.addUnique(o,t))},[]),R=n.useCallback((e,t,o)=>{(M.current[G.current]??M.current.instructions)?.("tool",e,t,o)},[]),U=n.useCallback(e=>{q.current+=1,T({key:q.current,kind:"restapi",initialRest:e})},[]),z=n.useCallback((e,t)=>{q.current+=1,T({key:q.current,kind:"config",toolKey:e,initialConfig:t})},[]),Ie=n.useCallback(e=>{const t=c.CONFIG_TOOL_SOURCES[e];t?z(t):U()},[z,U]),Re=n.useCallback(e=>{const t=!m.some(o=>o.id===e.id);K(o=>pe(o,e)),t&&R(e.id,g.restApiMentionItem(e).label,c.ToolSource.RestApi),T(null)},[m,R]),Ae=n.useCallback(e=>{const t=!p.some(o=>o.id===e.id);if(N(o=>pe(o,e)),t){const o=e.tool_key==="send_slack_message"?c.ToolSource.Slack:c.ToolSource.EmailHandover;R(e.id,g.configToolMentionItem(e).label,o)}T(null)},[p,R]),[H,F]=n.useState(null),W=n.useRef(null),ae=n.useRef(0),ve=e=>{const t=i.find(s=>s.tool_id===e)?.display_name??m.find(s=>s.id===e)?.name??"Tool",o=`{{tool:${e}}}`,a=s=>s.split(o).join("");W.current={instructions:b,guardrail:x,tools:D,configTools:p,restApiTools:m},w(s=>a(s)),E(s=>a(s)),O(s=>s.filter(A=>A!==e)),N(s=>s.filter(A=>A.id!==e)),K(s=>s.filter(A=>A.id!==e)),L(s=>s+1),P(s=>s+1),ae.current+=1,F({id:ae.current,message:`Tool "${t}" removed`})},ke=()=>{const e=W.current;e&&(w(e.instructions),E(e.guardrail),O(e.tools),N(e.configTools),K(e.restApiTools),L(t=>t+1),P(t=>t+1),W.current=null),F(null)},$=j.trim(),Y=$.length>0&&fe.some(e=>e.trim().toLowerCase()===$.toLowerCase()),le=$.length>0&&!Y&&(b.trim().length>0||x.trim().length>0),_e=D.map(e=>{const t=i.find(o=>o.tool_id===e);return t?{id:e,label:t.display_name,icon:f.sourceIcon(t.source??c.ToolSource.Manifest),authRequired:t.auth_required}:null}).filter(e=>e!==null),we=m.map(e=>({id:e.id,label:g.restApiToolName(e),icon:f.SOURCE_ICONS[c.ToolSource.RestApi],onConfigure:()=>U(e)})),Ee=p.map(e=>({id:e.id,label:g.configToolName(e),icon:f.SOURCE_ICONS[e.tool_key==="send_slack_message"?c.ToolSource.Slack:c.ToolSource.EmailHandover],onConfigure:()=>z(e.tool_key,e)})),Oe=[..._e,...we,...Ee],X=Ke.buildToolActions(ee,Ie,v,k),ce=l?.kind==="config"&&l.toolKey?ee?.[l.toolKey]:void 0,qe=i.map(e=>({label:e.display_name,value:e.tool_id,leadingIcon:f.renderSourceIcon(f.sourceIcon(e.source??c.ToolSource.Manifest))??void 0})),Me=(()=>{const e=[],t=new Map;return i.forEach(o=>{const a=o.source??c.ToolSource.Manifest;t.has(a)||(t.set(a,[]),e.push(a)),t.get(a)?.push({label:o.display_name,value:o.tool_id,leadingIcon:f.renderSourceIcon(f.sourceIcon(o.source??c.ToolSource.Manifest))??void 0})}),e.map(o=>({source:o,label:g.toolSourceLabel(o,y),options:t.get(o)??[],connected:v?.[o],onConnect:()=>k?.(o)}))})(),je=async()=>{if(!le||oe)return;const e=S({name:j.trim(),instructions:b,guardrail:x,tools:D,configTools:p,restApiTools:m});if(e&&typeof e.then=="function"){ne(!0);try{await e}finally{ne(!1)}}},ue=async e=>{if(!(!d||I)){se(e);try{const o=await d(e,e==="instructions"?b:x);e==="instructions"?(w(o),L(a=>a+1)):(E(o),P(a=>a+1))}finally{se(null)}}};return r.jsxs(r.Fragment,{children:[r.jsxs(Ge.SideModal,{header:te,closeOnEscapeKey:!1,zIndex:We,headerCustomComponent:r.jsx(J.DrawerHeaderText,{title:te,subtitle:"Each sub-agent handles one piece of the job. Use @ in the main instructions to call them."}),width:"421px",headerStyle:J.DRAWER_HEADER_STYLE,bodyStyle:J.DRAWER_BODY_STYLE,onClose:u,saveButtonProps:{"data-test":"subagent-save",buttonText:"Save",buttonType:"primary",size:"small",disabled:!le,isLoading:oe,onClick:je},cancelButtonProps:{"data-test":"subagent-cancel",buttonText:"Cancel",buttonType:"tertiaryGray",size:"small",onClick:u},children:[r.jsx(Ue.Input,{"data-test":"subagent-name",labelText:"Agent name",labelTextBold:!0,placeholder:"Enter agent name",value:j,maxCharLimit:C.name,maxCharLimitPosition:"TOP",maxCharStyle:{fontSize:12,lineHeight:"16px"},state:Y?"invalid":void 0,errorMessage:Y?"A sub-agent with this name already exists":void 0,onChangeText:Se}),r.jsx(me.MentionEditor,{"data-test":"subagent-instructions",label:"Instructions",value:b,onChange:w,maxLength:C.instructions,placeholder:"Write the steps in plain English. The agent will follow them exactly. The more specific you are, the better it performs.",minHeight:"160px",resetKey:`instr-${he}`,mentionItems:B,tools:i,toolActions:X,variablesData:_,addDataButton:!0,integrationStatus:v,appLabel:y,onConnectIntegration:k,onMentionSelect:ie,onFocus:be,registerInsert:Te,action:d?r.jsx(ge,{type:"button","data-test":"subagent-improve-instructions",disabled:I!==null,onClick:()=>ue("instructions"),children:I==="instructions"?"Improving…":"Improve with AI"}):void 0}),r.jsx(me.MentionEditor,{"data-test":"subagent-guardrail",label:"Guardrails",value:x,onChange:E,maxLength:C.guardrail,placeholder:"e.g. Never discuss competitor pricing. Always stay within the cancellation policy. Do not process refunds above ₹10,000 without human approval.",minHeight:"160px",resetKey:`guard-${ye}`,mentionItems:B,tools:i,toolActions:X,variablesData:_,addDataButton:!0,integrationStatus:v,appLabel:y,onConnectIntegration:k,onMentionSelect:ie,onFocus:xe,registerInsert:Ce,action:d?r.jsx(ge,{type:"button","data-test":"subagent-improve-guardrail",disabled:I!==null,onClick:()=>ue("guardrail"),children:I==="guardrail"?"Improving…":"Improve with AI"}):void 0}),r.jsx(Be.SelectableListSection,{title:"Tools this agent can use",dataTestPrefix:"subagent-tools",items:Oe,addableOptions:qe,sourceGroups:Me,mentionItems:B,actionSources:X,emptyText:"No tools added yet.",appLabel:y,pickerOpensUp:!0,onAdd:e=>{R(e),O(t=>de.addUnique(t,e))},onRemove:ve,confirmDelete:{noun:"tool",zIndex:Q+1}})]}),l?.kind==="restapi"&&r.jsx(Pe.RestApiToolPanel,{initial:l.initialRest,charLimits:C,variablesData:_,onImprove:V,onClose:()=>T(null),onSave:Re,zIndex:Q},l.key),l?.kind==="config"&&l.toolKey&&ce&&r.jsx(Le.ConfigToolPanel,{toolKey:l.toolKey,template:ce,initial:l.initialConfig,charLimits:C,variablesData:_,onImprove:V,onClose:()=>T(null),onSave:Ae,zIndex:Q},l.key),H&&r.jsx(ze.Toaster,{text:H.message,type:"info",position:"top-right",autoClose:5e3,hideCloseButton:!0,buttonProps:{buttonText:"Undo",showButton:!0,onButtonClick:()=>(ke(),{})},onCloseToast:()=>F(null)},H.id)]})};exports.CreateSubAgentPanel=$e;
 //# sourceMappingURL=CreateSubAgentPanel.js.map

package/dist/cjs/components/agent-builder/components/CreateSubAgentPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreateSubAgentPanel.js","sources":["../../../../../src/components/agent-builder/components/CreateSubAgentPanel.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input';\nimport { SideModal } from '@src/components/side-modal';\nimport { Toaster } from '@src/components/toaster';\nimport { addUnique } from '@src/utils/arrayUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport type { VariableListInterfaceV3 } from '../../variable-picker-v3/model';\nimport {\n\tAgentTool,\n\tConfigToolConfig,\n\tConfigToolKey,\n\tParamsBlob,\n\tRestApiToolConfig,\n\tSubAgentDraft,\n} from '../AgentBuilder.model';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport type { AgentCharLimits } from '../constants/charLimits';\nimport { CONFIG_TOOL_SOURCES, ToolSource } from '../constants/tools';\nimport {\n\tbuildAgentMentionItems,\n\tbuildCustomToolMentionItems,\n\tconfigToolMentionItem,\n\tconfigToolName,\n\trestApiMentionItem,\n\trestApiToolName,\n\ttoolSourceLabel,\n} from '../utils/mentionSerialization';\nimport {\n\trenderSourceIcon,\n\tSOURCE_ICONS,\n\tsourceIcon,\n} from '../utils/sourceIcons';\nimport { buildToolActions } from '../utils/toolActions';\nimport { ConfigToolPanel } from './ConfigToolPanel';\nimport {\n\tDRAWER_BODY_STYLE,\n\tDRAWER_HEADER_STYLE,\n\tDrawerHeaderText,\n} from './DrawerHeaderText';\nimport { MentionEditor } from './MentionEditor';\nimport { RestApiToolPanel } from './RestApiToolPanel';\nimport {\n\tSelectableItem,\n\tSelectableListSection,\n\tSourceGroup,\n} from './SelectableListSection';\n\n/**\n * The sub-agent drawer sits above the main builder; its own tool drawers\n * (Rest API / email / Slack) stack one level higher so they open ON TOP of it\n * rather than behind (SideModal defaults to z-index 10).\n */\nconst SUBAGENT_ZINDEX = 1000;\nconst TOOL_DRAWER_ZINDEX = 1002;\n\n/** Upsert an item by id (replace when present, append otherwise). */\nconst upsertById = <T extends { id: string }>(\n\tlist: T[] | undefined,\n\titem: T,\n): T[] => {\n\tconst arr = list ?? [];\n\treturn arr.some((x) => x.id === item.id)\n\t\t? arr.map((x) => (x.id === item.id ? item : x))\n\t\t: [...arr, item];\n};\n\n/** Config-tool / Rest API drawer state; `key` remounts fresh per open. */\ninterface ToolDrawerState {\n\tkey: number;\n\tkind: 'restapi' | 'config';\n\ttoolKey?: ConfigToolKey;\n\tinitialRest?: RestApiToolConfig;\n\tinitialConfig?: ConfigToolConfig;\n}\n\n/** Inline \"Improve with AI\" action rendered below a mention editor. */\nconst ImproveButton = styled.button`\n\talign-self: flex-start;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tcolor: ${COLORS.content.primary};\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 8px;\n\tpadding: 6px 12px;\n\tfont-size: 13px;\n\tline-height: 1.1;\n\tfont-weight: 600;\n\tcursor: pointer;\n\n\t&:disabled {\n\t\tcursor: default;\n\t\topacity: 0.6;\n\t}\n`;\n\ntype InsertFn = (\n\tkind: 'tool' | 'subagent',\n\tid: string,\n\tlabel?: string,\n\tsource?: string,\n) => void;\n\ninterface CreateSubAgentPanelProps {\n\tonClose: () => void;\n\t/** Persist the draft. The drawer shows a loader while the returned promise is pending. */\n\tonSave: (draft: SubAgentDraft) => void | Promise<void>;\n\tavailableTools: AgentTool[];\n\t/** Optional \"Improve with AI\" for instructions / guardrails. Omit to hide the buttons. */\n\tonImprove?: (\n\t\tkind: 'instructions' | 'guardrail',\n\t\ttext: string,\n\t) => Promise<string>;\n\t/** Optional \"Improve with AI\" for the Rest API / config-tool drawers. */\n\tonImproveToolInstructions?: (text: string) => Promise<string>;\n\t/**\n\t * Backend templates (email / Slack) that drive the shared config-tool drawer.\n\t * Each present key enables its tool action in this drawer; absent → hidden.\n\t * Same prop the main builder gets — sub-agents can add the same tools.\n\t */\n\tconfigToolTemplates?: Partial<Record<ConfigToolKey, ParamsBlob>>;\n\t/**\n\t * Per-source integration connection state (today: Slack). A source mapped to\n\t * `false` shows a \"Connect\" affordance instead of drilling into its tools —\n\t * same gating the main builder's Step 3 tool section gets.\n\t */\n\tintegrationStatus?: Partial<Record<ToolSource, boolean>>;\n\t/** Open the consumer's connect flow for an unconnected integration source. */\n\tonConnectIntegration?: (source: ToolSource) => void;\n\t/** Header title — \"Create sub-agent\" (default) or \"Edit sub-agent\". */\n\ttitle?: string;\n\t/** Initial values, e.g. when configuring an existing sub-agent. */\n\tinitial?: SubAgentDraft;\n\t/**\n\t * Names of the other sub-agents already on this agent (exclude the one being\n\t * edited). Blocks saving a duplicate name — the LLM references sub-agents by it.\n\t */\n\texistingNames?: string[];\n\t/** Tool-source fallback label for chips (host app). */\n\tappLabel?: string;\n\t/** Resolved character limits (defaults to {@link AGENT_CHAR_LIMITS}). */\n\tcharLimits?: AgentCharLimits;\n\t/** Variable catalog for the editors' `@` picker \"Variables\" view. */\n\tvariablesData?: VariableListInterfaceV3[];\n}\n\n/**\n * Right-side drawer for creating / editing a sub-agent (name, instructions,\n * guardrails, tools). Instructions & Guardrails are `@`-mention editors (tools\n * only — sub-agents can't nest); adding a tool from the list inserts it at the\n * last-focused field's cursor. Mount it fresh per open (key it) so `initial`\n * seeds the draft.\n */\nexport const CreateSubAgentPanel: React.FC<CreateSubAgentPanelProps> = ({\n\tonClose,\n\tonSave,\n\tavailableTools,\n\tonImprove,\n\tonImproveToolInstructions,\n\tconfigToolTemplates,\n\tintegrationStatus,\n\tonConnectIntegration,\n\ttitle = 'Create sub-agent',\n\tinitial,\n\texistingNames = [],\n\tappLabel = 'Manifest',\n\tcharLimits = AGENT_CHAR_LIMITS,\n\tvariablesData,\n}) => {\n\tconst [name, setName] = useState(initial?.name ?? '');\n\tconst [instructions, setInstructions] = useState(initial?.instructions ?? '');\n\tconst [guardrail, setGuardrail] = useState(initial?.guardrail ?? '');\n\tconst [tools, setTools] = useState<string[]>(initial?.tools ?? []);\n\t// Inline-configured tools owned by this sub-agent (same drawers as the main\n\t// agent). Local to the drawer; flow to the consumer via the saved draft.\n\tconst [configTools, setConfigTools] = useState<ConfigToolConfig[]>(\n\t\tinitial?.configTools ?? [],\n\t);\n\tconst [restApiTools, setRestApiTools] = useState<RestApiToolConfig[]>(\n\t\tinitial?.restApiTools ?? [],\n\t);\n\tconst [toolDrawer, setToolDrawer] = useState<ToolDrawerState | null>(null);\n\tconst toolDrawerKeyRef = useRef(0);\n\tconst [saving, setSaving] = useState(false);\n\t// Bumped to remount a field after its text is replaced (e.g. by Improve).\n\tconst [instrKey, setInstrKey] = useState(0);\n\tconst [guardKey, setGuardKey] = useState(0);\n\tconst [improving, setImproving] = useState<\n\t\t'instructions' | 'guardrail' | null\n\t>(null);\n\n\t// Tools-only mention list (sub-agents can't reference other sub-agents), PLUS\n\t// this drawer's inline custom tools so their `{{tool:<id>}}` tokens rehydrate\n\t// as chips on remount (they aren't in `availableTools`).\n\tconst mentionItems = useMemo(\n\t\t() => [\n\t\t\t...buildAgentMentionItems(availableTools, [], appLabel),\n\t\t\t...buildCustomToolMentionItems(configTools, restApiTools),\n\t\t],\n\t\t[availableTools, appLabel, configTools, restApiTools],\n\t);\n\n\t// Per-field insert + focus registry, so the Tools list inserts a chip into the\n\t// last-focused editor at its cursor.\n\tconst insertersRef = useRef<\n\t\tPartial<Record<'instructions' | 'guardrail', InsertFn>>\n\t>({});\n\tconst lastFocusedRef = useRef<'instructions' | 'guardrail'>('instructions');\n\tconst registerInstr = useCallback((fn: InsertFn | null) => {\n\t\tinsertersRef.current.instructions = fn ?? undefined;\n\t}, []);\n\tconst registerGuard = useCallback((fn: InsertFn | null) => {\n\t\tinsertersRef.current.guardrail = fn ?? undefined;\n\t}, []);\n\tconst focusInstr = useCallback(() => {\n\t\tlastFocusedRef.current = 'instructions';\n\t}, []);\n\tconst focusGuard = useCallback(() => {\n\t\tlastFocusedRef.current = 'guardrail';\n\t}, []);\n\t// Latest custom-tool ids, readable from the mount-captured `@` onSelect handler\n\t// (BikEditor captures it once) — mirrors the context's valueRef trick.\n\tconst customToolIdsRef = useRef<Set<string>>(new Set());\n\tcustomToolIdsRef.current = new Set(\n\t\t[...configTools, ...restApiTools].map((t) => t.id),\n\t);\n\tconst addToolMention = useCallback(\n\t\t(kind: 'tool' | 'subagent', id: string) => {\n\t\t\t// Only catalog tool ids belong in `tools`; custom tools (Rest API / email /\n\t\t\t// Slack) track themselves on their own lists. Picking an existing custom\n\t\t\t// tool from `@` must not leak its id in as a bogus native ref.\n\t\t\tif (kind === 'tool' && !customToolIdsRef.current.has(id)) {\n\t\t\t\tsetTools((prev) => addUnique(prev, id));\n\t\t\t}\n\t\t},\n\t\t[],\n\t);\n\tconst insertToolAtCursor = useCallback(\n\t\t(id: string, label?: string, source?: string) => {\n\t\t\tconst target =\n\t\t\t\tinsertersRef.current[lastFocusedRef.current] ??\n\t\t\t\tinsertersRef.current.instructions;\n\t\t\ttarget?.('tool', id, label, source);\n\t\t},\n\t\t[],\n\t);\n\n\t// Rest API (bespoke) + shared config-tool (email / Slack) drawers, same as the\n\t// main builder's Step 3 — here backed by the drawer's local state.\n\t// ponytail: mirrors Step3HowItResponds; kept local rather than sharing a hook\n\t// because Step3 is context-backed and this drawer is local-state.\n\tconst openRestApi = useCallback((tool?: RestApiToolConfig) => {\n\t\ttoolDrawerKeyRef.current += 1;\n\t\tsetToolDrawer({\n\t\t\tkey: toolDrawerKeyRef.current,\n\t\t\tkind: 'restapi',\n\t\t\tinitialRest: tool,\n\t\t});\n\t}, []);\n\tconst openConfigTool = useCallback(\n\t\t(toolKey: ConfigToolKey, tool?: ConfigToolConfig) => {\n\t\t\ttoolDrawerKeyRef.current += 1;\n\t\t\tsetToolDrawer({\n\t\t\t\tkey: toolDrawerKeyRef.current,\n\t\t\t\tkind: 'config',\n\t\t\t\ttoolKey,\n\t\t\t\tinitialConfig: tool,\n\t\t\t});\n\t\t},\n\t\t[],\n\t);\n\tconst openToolAction = useCallback(\n\t\t(source: ToolSource) => {\n\t\t\tconst toolKey = CONFIG_TOOL_SOURCES[source];\n\t\t\tif (toolKey) {\n\t\t\t\topenConfigTool(toolKey);\n\t\t\t} else {\n\t\t\t\topenRestApi();\n\t\t\t}\n\t\t},\n\t\t[openConfigTool, openRestApi],\n\t);\n\tconst handleSaveRestApi = useCallback(\n\t\t(tool: RestApiToolConfig) => {\n\t\t\tconst isNew = !restApiTools.some((t) => t.id === tool.id);\n\t\t\tsetRestApiTools((prev) => upsertById(prev, tool));\n\t\t\t// Drop a reference chip at the cursor on creation (edits keep the chip).\n\t\t\t// Pass the source so the fresh chip shows its icon (not yet in the list).\n\t\t\tif (isNew) {\n\t\t\t\tinsertToolAtCursor(\n\t\t\t\t\ttool.id,\n\t\t\t\t\trestApiMentionItem(tool).label,\n\t\t\t\t\tToolSource.RestApi,\n\t\t\t\t);\n\t\t\t}\n\t\t\tsetToolDrawer(null);\n\t\t},\n\t\t[restApiTools, insertToolAtCursor],\n\t);\n\tconst handleSaveConfigTool = useCallback(\n\t\t(tool: ConfigToolConfig) => {\n\t\t\tconst isNew = !configTools.some((t) => t.id === tool.id);\n\t\t\tsetConfigTools((prev) => upsertById(prev, tool));\n\t\t\tif (isNew) {\n\t\t\t\tconst source =\n\t\t\t\t\ttool.tool_key === 'send_slack_message'\n\t\t\t\t\t\t? ToolSource.Slack\n\t\t\t\t\t\t: ToolSource.EmailHandover;\n\t\t\t\tinsertToolAtCursor(tool.id, configToolMentionItem(tool).label, source);\n\t\t\t}\n\t\t\tsetToolDrawer(null);\n\t\t},\n\t\t[configTools, insertToolAtCursor],\n\t);\n\n\t// Local undo toast for tool removal (drawer state isn't in AgentValue).\n\tconst [undo, setUndo] = useState<{ id: number; message: string } | null>(\n\t\tnull,\n\t);\n\tconst undoSnapshotRef = useRef<{\n\t\tinstructions: string;\n\t\tguardrail: string;\n\t\ttools: string[];\n\t\tconfigTools: ConfigToolConfig[];\n\t\trestApiTools: RestApiToolConfig[];\n\t} | null>(null);\n\tconst undoIdRef = useRef(0);\n\n\t// Remove ANY tool by id: strip its `{{tool:<id>}}` tokens, remount the fields,\n\t// and drop it from whichever list holds it (catalog `tools` or an inline\n\t// custom-tool list). One undo restores all of it.\n\tconst removeTool = (id: string) => {\n\t\tconst label =\n\t\t\tavailableTools.find((t) => t.tool_id === id)?.display_name ??\n\t\t\trestApiTools.find((t) => t.id === id)?.name ??\n\t\t\t'Tool';\n\t\t// The token stores the tool id (a tool's id is its tool_id).\n\t\tconst token = `{{tool:${id}}}`;\n\t\tconst strip = (text: string) => text.split(token).join('');\n\t\tundoSnapshotRef.current = {\n\t\t\tinstructions,\n\t\t\tguardrail,\n\t\t\ttools,\n\t\t\tconfigTools,\n\t\t\trestApiTools,\n\t\t};\n\t\tsetInstructions((prev) => strip(prev));\n\t\tsetGuardrail((prev) => strip(prev));\n\t\tsetTools((prev) => prev.filter((t) => t !== id));\n\t\tsetConfigTools((prev) => prev.filter((t) => t.id !== id));\n\t\tsetRestApiTools((prev) => prev.filter((t) => t.id !== id));\n\t\tsetInstrKey((k) => k + 1);\n\t\tsetGuardKey((k) => k + 1);\n\t\tundoIdRef.current += 1;\n\t\tsetUndo({ id: undoIdRef.current, message: `Tool \"${label}\" removed` });\n\t};\n\n\tconst undoRemove = () => {\n\t\tconst snap = undoSnapshotRef.current;\n\t\tif (snap) {\n\t\t\tsetInstructions(snap.instructions);\n\t\t\tsetGuardrail(snap.guardrail);\n\t\t\tsetTools(snap.tools);\n\t\t\tsetConfigTools(snap.configTools);\n\t\t\tsetRestApiTools(snap.restApiTools);\n\t\t\tsetInstrKey((k) => k + 1);\n\t\t\tsetGuardKey((k) => k + 1);\n\t\t\tundoSnapshotRef.current = null;\n\t\t}\n\t\tsetUndo(null);\n\t};\n\n\tconst nameTrimmed = name.trim();\n\t// Case-insensitive: two sub-agents on the same agent can't share a name (the\n\t// LLM references them by it) — mirrors the Rest API tool-name check.\n\tconst isDuplicateName =\n\t\tnameTrimmed.length > 0 &&\n\t\texistingNames.some(\n\t\t\t(n) => n.trim().toLowerCase() === nameTrimmed.toLowerCase(),\n\t\t);\n\tconst canSave =\n\t\tnameTrimmed.length > 0 &&\n\t\t!isDuplicateName &&\n\t\t(instructions.trim().length > 0 || guardrail.trim().length > 0);\n\n\tconst toolItems: SelectableItem[] = tools\n\t\t.map((id): SelectableItem | null => {\n\t\t\tconst tool = availableTools.find((t) => t.tool_id === id);\n\t\t\treturn tool\n\t\t\t\t? {\n\t\t\t\t\t\tid,\n\t\t\t\t\t\tlabel: tool.display_name,\n\t\t\t\t\t\ticon: sourceIcon(tool.source ?? ToolSource.Manifest),\n\t\t\t\t\t\t// Shield flags a tool that needs customer verification, same as\n\t\t\t\t\t\t// the main builder's Step 3 tool rows.\n\t\t\t\t\t\tauthRequired: tool.auth_required,\n\t\t\t\t  }\n\t\t\t\t: null;\n\t\t})\n\t\t.filter((x): x is SelectableItem => x !== null);\n\n\t// Inline-configured tools (Rest API + email / Slack) render as rows in the same\n\t// list, each with its own Configure (edit) action that reopens its drawer.\n\tconst restApiItems: SelectableItem[] = restApiTools.map((t) => ({\n\t\tid: t.id,\n\t\tlabel: restApiToolName(t),\n\t\ticon: SOURCE_ICONS[ToolSource.RestApi],\n\t\tonConfigure: () => openRestApi(t),\n\t}));\n\tconst configToolItems: SelectableItem[] = configTools.map((t) => ({\n\t\tid: t.id,\n\t\tlabel: configToolName(t),\n\t\ticon: SOURCE_ICONS[\n\t\t\tt.tool_key === 'send_slack_message'\n\t\t\t\t? ToolSource.Slack\n\t\t\t\t: ToolSource.EmailHandover\n\t\t],\n\t\tonConfigure: () => openConfigTool(t.tool_key, t),\n\t}));\n\tconst allToolItems: SelectableItem[] = [\n\t\t...toolItems,\n\t\t...restApiItems,\n\t\t...configToolItems,\n\t];\n\n\t// Built-in tool actions (Rest API / email / Slack); the shared email / Slack\n\t// forms appear only when their backend template was provided. Integration\n\t// state drives the \"Connect\" affordance, same as the main builder's Step 3.\n\tconst toolActionSources = buildToolActions(\n\t\tconfigToolTemplates,\n\t\topenToolAction,\n\t\tintegrationStatus,\n\t\tonConnectIntegration,\n\t);\n\n\tconst openConfigTemplate =\n\t\ttoolDrawer?.kind === 'config' && toolDrawer.toolKey\n\t\t\t? configToolTemplates?.[toolDrawer.toolKey]\n\t\t\t: undefined;\n\n\t// Offer all tools (re-add allowed); the chip list stays deduped. Icon left of\n\t// the name, no description.\n\tconst toolOptions: SingleOption[] = availableTools.map((t) => ({\n\t\tlabel: t.display_name,\n\t\tvalue: t.tool_id,\n\t\tleadingIcon:\n\t\t\trenderSourceIcon(sourceIcon(t.source ?? ToolSource.Manifest)) ??\n\t\t\tundefined,\n\t}));\n\n\t// Group tools by source (Manifest / Shopify / …) so the empty state shows the\n\t// same per-source buttons as the main builder's side panel.\n\tconst toolSourceGroups: SourceGroup[] = (() => {\n\t\tconst order: string[] = [];\n\t\tconst bySource = new Map<string, SingleOption[]>();\n\t\tavailableTools.forEach((t) => {\n\t\t\tconst src = t.source ?? ToolSource.Manifest;\n\t\t\tif (!bySource.has(src)) {\n\t\t\t\tbySource.set(src, []);\n\t\t\t\torder.push(src);\n\t\t\t}\n\t\t\tbySource.get(src)?.push({\n\t\t\t\tlabel: t.display_name,\n\t\t\t\tvalue: t.tool_id,\n\t\t\t\tleadingIcon:\n\t\t\t\t\trenderSourceIcon(sourceIcon(t.source ?? ToolSource.Manifest)) ??\n\t\t\t\t\tundefined,\n\t\t\t});\n\t\t});\n\t\treturn order.map((src) => ({\n\t\t\tsource: src,\n\t\t\tlabel: toolSourceLabel(src),\n\t\t\toptions: bySource.get(src) ?? [],\n\t\t\t// Not connected → the source button opens the connect flow instead of\n\t\t\t// its tool list (mirrors Step 3's tool section).\n\t\t\tconnected: integrationStatus?.[src as ToolSource],\n\t\t\tonConnect: () => onConnectIntegration?.(src as ToolSource),\n\t\t}));\n\t})();\n\n\tconst handleSave = async () => {\n\t\tif (!canSave || saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst result = onSave({\n\t\t\tname: name.trim(),\n\t\t\tinstructions,\n\t\t\tguardrail,\n\t\t\ttools,\n\t\t\tconfigTools,\n\t\t\trestApiTools,\n\t\t});\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetSaving(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetSaving(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleImprove = async (kind: 'instructions' | 'guardrail') => {\n\t\tif (!onImprove || improving) {\n\t\t\treturn;\n\t\t}\n\t\tsetImproving(kind);\n\t\ttry {\n\t\t\tconst current = kind === 'instructions' ? instructions : guardrail;\n\t\t\tconst improved = await onImprove(kind, current);\n\t\t\tif (kind === 'instructions') {\n\t\t\t\tsetInstructions(improved);\n\t\t\t\tsetInstrKey((k) => k + 1);\n\t\t\t} else {\n\t\t\t\tsetGuardrail(improved);\n\t\t\t\tsetGuardKey((k) => k + 1);\n\t\t\t}\n\t\t} finally {\n\t\t\tsetImproving(null);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SideModal\n\t\t\t\theader={title}\n\t\t\t\tcloseOnEscapeKey={false}\n\t\t\t\tzIndex={SUBAGENT_ZINDEX}\n\t\t\t\theaderCustomComponent={\n\t\t\t\t\t<DrawerHeaderText\n\t\t\t\t\t\ttitle={title}\n\t\t\t\t\t\tsubtitle=\"Each sub-agent handles one piece of the job. Use @ in the main instructions to call them.\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\twidth=\"421px\"\n\t\t\t\theaderStyle={DRAWER_HEADER_STYLE}\n\t\t\t\tbodyStyle={DRAWER_BODY_STYLE}\n\t\t\t\tonClose={onClose}\n\t\t\t\tsaveButtonProps={{\n\t\t\t\t\t'data-test': 'subagent-save',\n\t\t\t\t\tbuttonText: 'Save',\n\t\t\t\t\tbuttonType: 'primary',\n\t\t\t\t\tsize: 'small',\n\t\t\t\t\tdisabled: !canSave,\n\t\t\t\t\tisLoading: saving,\n\t\t\t\t\tonClick: handleSave,\n\t\t\t\t}}\n\t\t\t\tcancelButtonProps={{\n\t\t\t\t\t'data-test': 'subagent-cancel',\n\t\t\t\t\tbuttonText: 'Cancel',\n\t\t\t\t\tbuttonType: 'tertiaryGray',\n\t\t\t\t\tsize: 'small',\n\t\t\t\t\tonClick: onClose,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Input\n\t\t\t\t\tdata-test=\"subagent-name\"\n\t\t\t\t\tlabelText=\"Agent name\"\n\t\t\t\t\tlabelTextBold\n\t\t\t\t\tplaceholder=\"Enter agent name\"\n\t\t\t\t\tvalue={name}\n\t\t\t\t\tmaxCharLimit={charLimits.name}\n\t\t\t\t\tmaxCharLimitPosition=\"TOP\"\n\t\t\t\t\tmaxCharStyle={{ fontSize: 12, lineHeight: '16px' }}\n\t\t\t\t\tstate={isDuplicateName ? 'invalid' : undefined}\n\t\t\t\t\terrorMessage={\n\t\t\t\t\t\tisDuplicateName\n\t\t\t\t\t\t\t? 'A sub-agent with this name already exists'\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tonChangeText={setName}\n\t\t\t\t/>\n\n\t\t\t\t<MentionEditor\n\t\t\t\t\tdata-test=\"subagent-instructions\"\n\t\t\t\t\tlabel=\"Instructions\"\n\t\t\t\t\tvalue={instructions}\n\t\t\t\t\tonChange={setInstructions}\n\t\t\t\t\tmaxLength={charLimits.instructions}\n\t\t\t\t\tplaceholder=\"Write the steps in plain English. The agent will follow them exactly. The more specific you are, the better it performs.\"\n\t\t\t\t\tminHeight=\"160px\"\n\t\t\t\t\tresetKey={`instr-${instrKey}`}\n\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\ttools={availableTools}\n\t\t\t\t\ttoolActions={toolActionSources}\n\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\taddDataButton\n\t\t\t\t\tintegrationStatus={integrationStatus}\n\t\t\t\t\tonConnectIntegration={onConnectIntegration}\n\t\t\t\t\tonMentionSelect={addToolMention}\n\t\t\t\t\tonFocus={focusInstr}\n\t\t\t\t\tregisterInsert={registerInstr}\n\t\t\t\t\taction={\n\t\t\t\t\t\tonImprove ? (\n\t\t\t\t\t\t\t<ImproveButton\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tdata-test=\"subagent-improve-instructions\"\n\t\t\t\t\t\t\t\tdisabled={improving !== null}\n\t\t\t\t\t\t\t\tonClick={() => handleImprove('instructions')}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{improving === 'instructions'\n\t\t\t\t\t\t\t\t\t? 'Improving…'\n\t\t\t\t\t\t\t\t\t: 'Improve with AI'}\n\t\t\t\t\t\t\t</ImproveButton>\n\t\t\t\t\t\t) : undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\n\t\t\t\t<MentionEditor\n\t\t\t\t\tdata-test=\"subagent-guardrail\"\n\t\t\t\t\tlabel=\"Guardrails\"\n\t\t\t\t\tvalue={guardrail}\n\t\t\t\t\tonChange={setGuardrail}\n\t\t\t\t\tmaxLength={charLimits.guardrail}\n\t\t\t\t\tplaceholder=\"e.g. Never discuss competitor pricing. Always stay within the cancellation policy. Do not process refunds above ₹10,000 without human approval.\"\n\t\t\t\t\tminHeight=\"160px\"\n\t\t\t\t\tresetKey={`guard-${guardKey}`}\n\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\ttools={availableTools}\n\t\t\t\t\ttoolActions={toolActionSources}\n\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\taddDataButton\n\t\t\t\t\tintegrationStatus={integrationStatus}\n\t\t\t\t\tonConnectIntegration={onConnectIntegration}\n\t\t\t\t\tonMentionSelect={addToolMention}\n\t\t\t\t\tonFocus={focusGuard}\n\t\t\t\t\tregisterInsert={registerGuard}\n\t\t\t\t\taction={\n\t\t\t\t\t\tonImprove ? (\n\t\t\t\t\t\t\t<ImproveButton\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tdata-test=\"subagent-improve-guardrail\"\n\t\t\t\t\t\t\t\tdisabled={improving !== null}\n\t\t\t\t\t\t\t\tonClick={() => handleImprove('guardrail')}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{improving === 'guardrail' ? 'Improving…' : 'Improve with AI'}\n\t\t\t\t\t\t\t</ImproveButton>\n\t\t\t\t\t\t) : undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\n\t\t\t\t<SelectableListSection\n\t\t\t\t\ttitle=\"Tools this agent can use\"\n\t\t\t\t\tdataTestPrefix=\"subagent-tools\"\n\t\t\t\t\titems={allToolItems}\n\t\t\t\t\taddableOptions={toolOptions}\n\t\t\t\t\tsourceGroups={toolSourceGroups}\n\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\tactionSources={toolActionSources}\n\t\t\t\t\temptyText=\"No tools added yet.\"\n\t\t\t\t\tpickerOpensUp\n\t\t\t\t\tonAdd={(id) => {\n\t\t\t\t\t\tinsertToolAtCursor(id);\n\t\t\t\t\t\tsetTools((prev) => addUnique(prev, id));\n\t\t\t\t\t}}\n\t\t\t\t\tonRemove={removeTool}\n\t\t\t\t\tconfirmDelete={{ noun: 'tool', zIndex: TOOL_DRAWER_ZINDEX + 1 }}\n\t\t\t\t/>\n\t\t\t</SideModal>\n\n\t\t\t{toolDrawer?.kind === 'restapi' && (\n\t\t\t\t<RestApiToolPanel\n\t\t\t\t\tkey={toolDrawer.key}\n\t\t\t\t\tinitial={toolDrawer.initialRest}\n\t\t\t\t\tcharLimits={charLimits}\n\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\tonImprove={onImproveToolInstructions}\n\t\t\t\t\tonClose={() => setToolDrawer(null)}\n\t\t\t\t\tonSave={handleSaveRestApi}\n\t\t\t\t\tzIndex={TOOL_DRAWER_ZINDEX}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{toolDrawer?.kind === 'config' &&\n\t\t\t\ttoolDrawer.toolKey &&\n\t\t\t\topenConfigTemplate && (\n\t\t\t\t\t<ConfigToolPanel\n\t\t\t\t\t\tkey={toolDrawer.key}\n\t\t\t\t\t\ttoolKey={toolDrawer.toolKey}\n\t\t\t\t\t\ttemplate={openConfigTemplate}\n\t\t\t\t\t\tinitial={toolDrawer.initialConfig}\n\t\t\t\t\t\tcharLimits={charLimits}\n\t\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\t\tonImprove={onImproveToolInstructions}\n\t\t\t\t\t\tonClose={() => setToolDrawer(null)}\n\t\t\t\t\t\tonSave={handleSaveConfigTool}\n\t\t\t\t\t\tzIndex={TOOL_DRAWER_ZINDEX}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t{undo && (\n\t\t\t\t<Toaster\n\t\t\t\t\tkey={undo.id}\n\t\t\t\t\ttext={undo.message}\n\t\t\t\t\ttype=\"info\"\n\t\t\t\t\tposition=\"top-right\"\n\t\t\t\t\tautoClose={5000}\n\t\t\t\t\thideCloseButton\n\t\t\t\t\tbuttonProps={{\n\t\t\t\t\t\tbuttonText: 'Undo',\n\t\t\t\t\t\tshowButton: true,\n\t\t\t\t\t\tonButtonClick: () => {\n\t\t\t\t\t\t\tundoRemove();\n\t\t\t\t\t\t\treturn {} as Record<string, never>;\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tonCloseToast={() => setUndo(null)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["SUBAGENT_ZINDEX","TOOL_DRAWER_ZINDEX","upsertById","list","item","arr","x","ImproveButton","styled","COLORS","CreateSubAgentPanel","onClose","onSave","availableTools","onImprove","onImproveToolInstructions","configToolTemplates","integrationStatus","onConnectIntegration","title","initial","existingNames","appLabel","charLimits","AGENT_CHAR_LIMITS","variablesData","name","setName","useState","instructions","setInstructions","guardrail","setGuardrail","tools","setTools","configTools","setConfigTools","restApiTools","setRestApiTools","toolDrawer","setToolDrawer","toolDrawerKeyRef","useRef","saving","setSaving","instrKey","setInstrKey","guardKey","setGuardKey","improving","setImproving","mentionItems","useMemo","buildAgentMentionItems","buildCustomToolMentionItems","insertersRef","lastFocusedRef","registerInstr","useCallback","fn","registerGuard","focusInstr","focusGuard","customToolIdsRef","t","addToolMention","kind","id","prev","addUnique","insertToolAtCursor","label","source","openRestApi","tool","openConfigTool","toolKey","openToolAction","CONFIG_TOOL_SOURCES","handleSaveRestApi","isNew","restApiMentionItem","ToolSource","handleSaveConfigTool","configToolMentionItem","undo","setUndo","undoSnapshotRef","undoIdRef","removeTool","token","strip","text","k","undoRemove","snap","nameTrimmed","isDuplicateName","n","canSave","toolItems","sourceIcon","restApiItems","restApiToolName","SOURCE_ICONS","configToolItems","configToolName","allToolItems","toolActionSources","buildToolActions","openConfigTemplate","toolOptions","renderSourceIcon","toolSourceGroups","order","bySource","src","toolSourceLabel","handleSave","result","handleImprove","improved","jsxs","Fragment","SideModal","jsx","DrawerHeaderText","DRAWER_HEADER_STYLE","DRAWER_BODY_STYLE","Input","MentionEditor","SelectableListSection","RestApiToolPanel","ConfigToolPanel","Toaster"],"mappings":"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"}
+{"version":3,"file":"CreateSubAgentPanel.js","sources":["../../../../../src/components/agent-builder/components/CreateSubAgentPanel.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input';\nimport { SideModal } from '@src/components/side-modal';\nimport { Toaster } from '@src/components/toaster';\nimport { addUnique } from '@src/utils/arrayUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport type { VariableListInterfaceV3 } from '../../variable-picker-v3/model';\nimport {\n\tAgentTool,\n\tConfigToolConfig,\n\tConfigToolKey,\n\tParamsBlob,\n\tRestApiToolConfig,\n\tSubAgentDraft,\n} from '../AgentBuilder.model';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport type { AgentCharLimits } from '../constants/charLimits';\nimport { CONFIG_TOOL_SOURCES, ToolSource } from '../constants/tools';\nimport {\n\tbuildAgentMentionItems,\n\tbuildCustomToolMentionItems,\n\tconfigToolMentionItem,\n\tconfigToolName,\n\trestApiMentionItem,\n\trestApiToolName,\n\ttoolSourceLabel,\n} from '../utils/mentionSerialization';\nimport {\n\trenderSourceIcon,\n\tSOURCE_ICONS,\n\tsourceIcon,\n} from '../utils/sourceIcons';\nimport { buildToolActions } from '../utils/toolActions';\nimport { ConfigToolPanel } from './ConfigToolPanel';\nimport {\n\tDRAWER_BODY_STYLE,\n\tDRAWER_HEADER_STYLE,\n\tDrawerHeaderText,\n} from './DrawerHeaderText';\nimport { MentionEditor } from './MentionEditor';\nimport { RestApiToolPanel } from './RestApiToolPanel';\nimport {\n\tSelectableItem,\n\tSelectableListSection,\n\tSourceGroup,\n} from './SelectableListSection';\n\n/**\n * The sub-agent drawer sits above the main builder; its own tool drawers\n * (Rest API / email / Slack) stack one level higher so they open ON TOP of it\n * rather than behind (SideModal defaults to z-index 10).\n */\nconst SUBAGENT_ZINDEX = 1000;\nconst TOOL_DRAWER_ZINDEX = 1002;\n\n/** Upsert an item by id (replace when present, append otherwise). */\nconst upsertById = <T extends { id: string }>(\n\tlist: T[] | undefined,\n\titem: T,\n): T[] => {\n\tconst arr = list ?? [];\n\treturn arr.some((x) => x.id === item.id)\n\t\t? arr.map((x) => (x.id === item.id ? item : x))\n\t\t: [...arr, item];\n};\n\n/** Config-tool / Rest API drawer state; `key` remounts fresh per open. */\ninterface ToolDrawerState {\n\tkey: number;\n\tkind: 'restapi' | 'config';\n\ttoolKey?: ConfigToolKey;\n\tinitialRest?: RestApiToolConfig;\n\tinitialConfig?: ConfigToolConfig;\n}\n\n/** Inline \"Improve with AI\" action rendered below a mention editor. */\nconst ImproveButton = styled.button`\n\talign-self: flex-start;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tcolor: ${COLORS.content.primary};\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 8px;\n\tpadding: 6px 12px;\n\tfont-size: 13px;\n\tline-height: 1.1;\n\tfont-weight: 600;\n\tcursor: pointer;\n\n\t&:disabled {\n\t\tcursor: default;\n\t\topacity: 0.6;\n\t}\n`;\n\ntype InsertFn = (\n\tkind: 'tool' | 'subagent',\n\tid: string,\n\tlabel?: string,\n\tsource?: string,\n) => void;\n\ninterface CreateSubAgentPanelProps {\n\tonClose: () => void;\n\t/** Persist the draft. The drawer shows a loader while the returned promise is pending. */\n\tonSave: (draft: SubAgentDraft) => void | Promise<void>;\n\tavailableTools: AgentTool[];\n\t/** Optional \"Improve with AI\" for instructions / guardrails. Omit to hide the buttons. */\n\tonImprove?: (\n\t\tkind: 'instructions' | 'guardrail',\n\t\ttext: string,\n\t) => Promise<string>;\n\t/** Optional \"Improve with AI\" for the Rest API / config-tool drawers. */\n\tonImproveToolInstructions?: (text: string) => Promise<string>;\n\t/**\n\t * Backend templates (email / Slack) that drive the shared config-tool drawer.\n\t * Each present key enables its tool action in this drawer; absent → hidden.\n\t * Same prop the main builder gets — sub-agents can add the same tools.\n\t */\n\tconfigToolTemplates?: Partial<Record<ConfigToolKey, ParamsBlob>>;\n\t/**\n\t * Per-source integration connection state (today: Slack). A source mapped to\n\t * `false` shows a \"Connect\" affordance instead of drilling into its tools —\n\t * same gating the main builder's Step 3 tool section gets.\n\t */\n\tintegrationStatus?: Partial<Record<ToolSource, boolean>>;\n\t/** Open the consumer's connect flow for an unconnected integration source. */\n\tonConnectIntegration?: (source: ToolSource) => void;\n\t/** Header title — \"Create sub-agent\" (default) or \"Edit sub-agent\". */\n\ttitle?: string;\n\t/** Initial values, e.g. when configuring an existing sub-agent. */\n\tinitial?: SubAgentDraft;\n\t/**\n\t * Names of the other sub-agents already on this agent (exclude the one being\n\t * edited). Blocks saving a duplicate name — the LLM references sub-agents by it.\n\t */\n\texistingNames?: string[];\n\t/** Tool-source fallback label for chips (host app). */\n\tappLabel?: string;\n\t/** Resolved character limits (defaults to {@link AGENT_CHAR_LIMITS}). */\n\tcharLimits?: AgentCharLimits;\n\t/** Variable catalog for the editors' `@` picker \"Variables\" view. */\n\tvariablesData?: VariableListInterfaceV3[];\n}\n\n/**\n * Right-side drawer for creating / editing a sub-agent (name, instructions,\n * guardrails, tools). Instructions & Guardrails are `@`-mention editors (tools\n * only — sub-agents can't nest); adding a tool from the list inserts it at the\n * last-focused field's cursor. Mount it fresh per open (key it) so `initial`\n * seeds the draft.\n */\nexport const CreateSubAgentPanel: React.FC<CreateSubAgentPanelProps> = ({\n\tonClose,\n\tonSave,\n\tavailableTools,\n\tonImprove,\n\tonImproveToolInstructions,\n\tconfigToolTemplates,\n\tintegrationStatus,\n\tonConnectIntegration,\n\ttitle = 'Create sub-agent',\n\tinitial,\n\texistingNames = [],\n\tappLabel = 'Manifest',\n\tcharLimits = AGENT_CHAR_LIMITS,\n\tvariablesData,\n}) => {\n\tconst [name, setName] = useState(initial?.name ?? '');\n\tconst [instructions, setInstructions] = useState(initial?.instructions ?? '');\n\tconst [guardrail, setGuardrail] = useState(initial?.guardrail ?? '');\n\tconst [tools, setTools] = useState<string[]>(initial?.tools ?? []);\n\t// Inline-configured tools owned by this sub-agent (same drawers as the main\n\t// agent). Local to the drawer; flow to the consumer via the saved draft.\n\tconst [configTools, setConfigTools] = useState<ConfigToolConfig[]>(\n\t\tinitial?.configTools ?? [],\n\t);\n\tconst [restApiTools, setRestApiTools] = useState<RestApiToolConfig[]>(\n\t\tinitial?.restApiTools ?? [],\n\t);\n\tconst [toolDrawer, setToolDrawer] = useState<ToolDrawerState | null>(null);\n\tconst toolDrawerKeyRef = useRef(0);\n\tconst [saving, setSaving] = useState(false);\n\t// Bumped to remount a field after its text is replaced (e.g. by Improve).\n\tconst [instrKey, setInstrKey] = useState(0);\n\tconst [guardKey, setGuardKey] = useState(0);\n\tconst [improving, setImproving] = useState<\n\t\t'instructions' | 'guardrail' | null\n\t>(null);\n\n\t// Tools-only mention list (sub-agents can't reference other sub-agents), PLUS\n\t// this drawer's inline custom tools so their `{{tool:<id>}}` tokens rehydrate\n\t// as chips on remount (they aren't in `availableTools`).\n\tconst mentionItems = useMemo(\n\t\t() => [\n\t\t\t...buildAgentMentionItems(availableTools, [], appLabel),\n\t\t\t...buildCustomToolMentionItems(configTools, restApiTools),\n\t\t],\n\t\t[availableTools, appLabel, configTools, restApiTools],\n\t);\n\n\t// Per-field insert + focus registry, so the Tools list inserts a chip into the\n\t// last-focused editor at its cursor.\n\tconst insertersRef = useRef<\n\t\tPartial<Record<'instructions' | 'guardrail', InsertFn>>\n\t>({});\n\tconst lastFocusedRef = useRef<'instructions' | 'guardrail'>('instructions');\n\tconst registerInstr = useCallback((fn: InsertFn | null) => {\n\t\tinsertersRef.current.instructions = fn ?? undefined;\n\t}, []);\n\tconst registerGuard = useCallback((fn: InsertFn | null) => {\n\t\tinsertersRef.current.guardrail = fn ?? undefined;\n\t}, []);\n\tconst focusInstr = useCallback(() => {\n\t\tlastFocusedRef.current = 'instructions';\n\t}, []);\n\tconst focusGuard = useCallback(() => {\n\t\tlastFocusedRef.current = 'guardrail';\n\t}, []);\n\t// Latest custom-tool ids, readable from the mount-captured `@` onSelect handler\n\t// (BikEditor captures it once) — mirrors the context's valueRef trick.\n\tconst customToolIdsRef = useRef<Set<string>>(new Set());\n\tcustomToolIdsRef.current = new Set(\n\t\t[...configTools, ...restApiTools].map((t) => t.id),\n\t);\n\tconst addToolMention = useCallback(\n\t\t(kind: 'tool' | 'subagent', id: string) => {\n\t\t\t// Only catalog tool ids belong in `tools`; custom tools (Rest API / email /\n\t\t\t// Slack) track themselves on their own lists. Picking an existing custom\n\t\t\t// tool from `@` must not leak its id in as a bogus native ref.\n\t\t\tif (kind === 'tool' && !customToolIdsRef.current.has(id)) {\n\t\t\t\tsetTools((prev) => addUnique(prev, id));\n\t\t\t}\n\t\t},\n\t\t[],\n\t);\n\tconst insertToolAtCursor = useCallback(\n\t\t(id: string, label?: string, source?: string) => {\n\t\t\tconst target =\n\t\t\t\tinsertersRef.current[lastFocusedRef.current] ??\n\t\t\t\tinsertersRef.current.instructions;\n\t\t\ttarget?.('tool', id, label, source);\n\t\t},\n\t\t[],\n\t);\n\n\t// Rest API (bespoke) + shared config-tool (email / Slack) drawers, same as the\n\t// main builder's Step 3 — here backed by the drawer's local state.\n\t// ponytail: mirrors Step3HowItResponds; kept local rather than sharing a hook\n\t// because Step3 is context-backed and this drawer is local-state.\n\tconst openRestApi = useCallback((tool?: RestApiToolConfig) => {\n\t\ttoolDrawerKeyRef.current += 1;\n\t\tsetToolDrawer({\n\t\t\tkey: toolDrawerKeyRef.current,\n\t\t\tkind: 'restapi',\n\t\t\tinitialRest: tool,\n\t\t});\n\t}, []);\n\tconst openConfigTool = useCallback(\n\t\t(toolKey: ConfigToolKey, tool?: ConfigToolConfig) => {\n\t\t\ttoolDrawerKeyRef.current += 1;\n\t\t\tsetToolDrawer({\n\t\t\t\tkey: toolDrawerKeyRef.current,\n\t\t\t\tkind: 'config',\n\t\t\t\ttoolKey,\n\t\t\t\tinitialConfig: tool,\n\t\t\t});\n\t\t},\n\t\t[],\n\t);\n\tconst openToolAction = useCallback(\n\t\t(source: ToolSource) => {\n\t\t\tconst toolKey = CONFIG_TOOL_SOURCES[source];\n\t\t\tif (toolKey) {\n\t\t\t\topenConfigTool(toolKey);\n\t\t\t} else {\n\t\t\t\topenRestApi();\n\t\t\t}\n\t\t},\n\t\t[openConfigTool, openRestApi],\n\t);\n\tconst handleSaveRestApi = useCallback(\n\t\t(tool: RestApiToolConfig) => {\n\t\t\tconst isNew = !restApiTools.some((t) => t.id === tool.id);\n\t\t\tsetRestApiTools((prev) => upsertById(prev, tool));\n\t\t\t// Drop a reference chip at the cursor on creation (edits keep the chip).\n\t\t\t// Pass the source so the fresh chip shows its icon (not yet in the list).\n\t\t\tif (isNew) {\n\t\t\t\tinsertToolAtCursor(\n\t\t\t\t\ttool.id,\n\t\t\t\t\trestApiMentionItem(tool).label,\n\t\t\t\t\tToolSource.RestApi,\n\t\t\t\t);\n\t\t\t}\n\t\t\tsetToolDrawer(null);\n\t\t},\n\t\t[restApiTools, insertToolAtCursor],\n\t);\n\tconst handleSaveConfigTool = useCallback(\n\t\t(tool: ConfigToolConfig) => {\n\t\t\tconst isNew = !configTools.some((t) => t.id === tool.id);\n\t\t\tsetConfigTools((prev) => upsertById(prev, tool));\n\t\t\tif (isNew) {\n\t\t\t\tconst source =\n\t\t\t\t\ttool.tool_key === 'send_slack_message'\n\t\t\t\t\t\t? ToolSource.Slack\n\t\t\t\t\t\t: ToolSource.EmailHandover;\n\t\t\t\tinsertToolAtCursor(tool.id, configToolMentionItem(tool).label, source);\n\t\t\t}\n\t\t\tsetToolDrawer(null);\n\t\t},\n\t\t[configTools, insertToolAtCursor],\n\t);\n\n\t// Local undo toast for tool removal (drawer state isn't in AgentValue).\n\tconst [undo, setUndo] = useState<{ id: number; message: string } | null>(\n\t\tnull,\n\t);\n\tconst undoSnapshotRef = useRef<{\n\t\tinstructions: string;\n\t\tguardrail: string;\n\t\ttools: string[];\n\t\tconfigTools: ConfigToolConfig[];\n\t\trestApiTools: RestApiToolConfig[];\n\t} | null>(null);\n\tconst undoIdRef = useRef(0);\n\n\t// Remove ANY tool by id: strip its `{{tool:<id>}}` tokens, remount the fields,\n\t// and drop it from whichever list holds it (catalog `tools` or an inline\n\t// custom-tool list). One undo restores all of it.\n\tconst removeTool = (id: string) => {\n\t\tconst label =\n\t\t\tavailableTools.find((t) => t.tool_id === id)?.display_name ??\n\t\t\trestApiTools.find((t) => t.id === id)?.name ??\n\t\t\t'Tool';\n\t\t// The token stores the tool id (a tool's id is its tool_id).\n\t\tconst token = `{{tool:${id}}}`;\n\t\tconst strip = (text: string) => text.split(token).join('');\n\t\tundoSnapshotRef.current = {\n\t\t\tinstructions,\n\t\t\tguardrail,\n\t\t\ttools,\n\t\t\tconfigTools,\n\t\t\trestApiTools,\n\t\t};\n\t\tsetInstructions((prev) => strip(prev));\n\t\tsetGuardrail((prev) => strip(prev));\n\t\tsetTools((prev) => prev.filter((t) => t !== id));\n\t\tsetConfigTools((prev) => prev.filter((t) => t.id !== id));\n\t\tsetRestApiTools((prev) => prev.filter((t) => t.id !== id));\n\t\tsetInstrKey((k) => k + 1);\n\t\tsetGuardKey((k) => k + 1);\n\t\tundoIdRef.current += 1;\n\t\tsetUndo({ id: undoIdRef.current, message: `Tool \"${label}\" removed` });\n\t};\n\n\tconst undoRemove = () => {\n\t\tconst snap = undoSnapshotRef.current;\n\t\tif (snap) {\n\t\t\tsetInstructions(snap.instructions);\n\t\t\tsetGuardrail(snap.guardrail);\n\t\t\tsetTools(snap.tools);\n\t\t\tsetConfigTools(snap.configTools);\n\t\t\tsetRestApiTools(snap.restApiTools);\n\t\t\tsetInstrKey((k) => k + 1);\n\t\t\tsetGuardKey((k) => k + 1);\n\t\t\tundoSnapshotRef.current = null;\n\t\t}\n\t\tsetUndo(null);\n\t};\n\n\tconst nameTrimmed = name.trim();\n\t// Case-insensitive: two sub-agents on the same agent can't share a name (the\n\t// LLM references them by it) — mirrors the Rest API tool-name check.\n\tconst isDuplicateName =\n\t\tnameTrimmed.length > 0 &&\n\t\texistingNames.some(\n\t\t\t(n) => n.trim().toLowerCase() === nameTrimmed.toLowerCase(),\n\t\t);\n\tconst canSave =\n\t\tnameTrimmed.length > 0 &&\n\t\t!isDuplicateName &&\n\t\t(instructions.trim().length > 0 || guardrail.trim().length > 0);\n\n\tconst toolItems: SelectableItem[] = tools\n\t\t.map((id): SelectableItem | null => {\n\t\t\tconst tool = availableTools.find((t) => t.tool_id === id);\n\t\t\treturn tool\n\t\t\t\t? {\n\t\t\t\t\t\tid,\n\t\t\t\t\t\tlabel: tool.display_name,\n\t\t\t\t\t\ticon: sourceIcon(tool.source ?? ToolSource.Manifest),\n\t\t\t\t\t\t// Shield flags a tool that needs customer verification, same as\n\t\t\t\t\t\t// the main builder's Step 3 tool rows.\n\t\t\t\t\t\tauthRequired: tool.auth_required,\n\t\t\t\t  }\n\t\t\t\t: null;\n\t\t})\n\t\t.filter((x): x is SelectableItem => x !== null);\n\n\t// Inline-configured tools (Rest API + email / Slack) render as rows in the same\n\t// list, each with its own Configure (edit) action that reopens its drawer.\n\tconst restApiItems: SelectableItem[] = restApiTools.map((t) => ({\n\t\tid: t.id,\n\t\tlabel: restApiToolName(t),\n\t\ticon: SOURCE_ICONS[ToolSource.RestApi],\n\t\tonConfigure: () => openRestApi(t),\n\t}));\n\tconst configToolItems: SelectableItem[] = configTools.map((t) => ({\n\t\tid: t.id,\n\t\tlabel: configToolName(t),\n\t\ticon: SOURCE_ICONS[\n\t\t\tt.tool_key === 'send_slack_message'\n\t\t\t\t? ToolSource.Slack\n\t\t\t\t: ToolSource.EmailHandover\n\t\t],\n\t\tonConfigure: () => openConfigTool(t.tool_key, t),\n\t}));\n\tconst allToolItems: SelectableItem[] = [\n\t\t...toolItems,\n\t\t...restApiItems,\n\t\t...configToolItems,\n\t];\n\n\t// Built-in tool actions (Rest API / email / Slack); the shared email / Slack\n\t// forms appear only when their backend template was provided. Integration\n\t// state drives the \"Connect\" affordance, same as the main builder's Step 3.\n\tconst toolActionSources = buildToolActions(\n\t\tconfigToolTemplates,\n\t\topenToolAction,\n\t\tintegrationStatus,\n\t\tonConnectIntegration,\n\t);\n\n\tconst openConfigTemplate =\n\t\ttoolDrawer?.kind === 'config' && toolDrawer.toolKey\n\t\t\t? configToolTemplates?.[toolDrawer.toolKey]\n\t\t\t: undefined;\n\n\t// Offer all tools (re-add allowed); the chip list stays deduped. Icon left of\n\t// the name, no description.\n\tconst toolOptions: SingleOption[] = availableTools.map((t) => ({\n\t\tlabel: t.display_name,\n\t\tvalue: t.tool_id,\n\t\tleadingIcon:\n\t\t\trenderSourceIcon(sourceIcon(t.source ?? ToolSource.Manifest)) ??\n\t\t\tundefined,\n\t}));\n\n\t// Group tools by source (Manifest / Shopify / …) so the empty state shows the\n\t// same per-source buttons as the main builder's side panel.\n\tconst toolSourceGroups: SourceGroup[] = (() => {\n\t\tconst order: string[] = [];\n\t\tconst bySource = new Map<string, SingleOption[]>();\n\t\tavailableTools.forEach((t) => {\n\t\t\tconst src = t.source ?? ToolSource.Manifest;\n\t\t\tif (!bySource.has(src)) {\n\t\t\t\tbySource.set(src, []);\n\t\t\t\torder.push(src);\n\t\t\t}\n\t\t\tbySource.get(src)?.push({\n\t\t\t\tlabel: t.display_name,\n\t\t\t\tvalue: t.tool_id,\n\t\t\t\tleadingIcon:\n\t\t\t\t\trenderSourceIcon(sourceIcon(t.source ?? ToolSource.Manifest)) ??\n\t\t\t\t\tundefined,\n\t\t\t});\n\t\t});\n\t\treturn order.map((src) => ({\n\t\t\tsource: src,\n\t\t\tlabel: toolSourceLabel(src, appLabel),\n\t\t\toptions: bySource.get(src) ?? [],\n\t\t\t// Not connected → the source button opens the connect flow instead of\n\t\t\t// its tool list (mirrors Step 3's tool section).\n\t\t\tconnected: integrationStatus?.[src as ToolSource],\n\t\t\tonConnect: () => onConnectIntegration?.(src as ToolSource),\n\t\t}));\n\t})();\n\n\tconst handleSave = async () => {\n\t\tif (!canSave || saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst result = onSave({\n\t\t\tname: name.trim(),\n\t\t\tinstructions,\n\t\t\tguardrail,\n\t\t\ttools,\n\t\t\tconfigTools,\n\t\t\trestApiTools,\n\t\t});\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetSaving(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetSaving(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleImprove = async (kind: 'instructions' | 'guardrail') => {\n\t\tif (!onImprove || improving) {\n\t\t\treturn;\n\t\t}\n\t\tsetImproving(kind);\n\t\ttry {\n\t\t\tconst current = kind === 'instructions' ? instructions : guardrail;\n\t\t\tconst improved = await onImprove(kind, current);\n\t\t\tif (kind === 'instructions') {\n\t\t\t\tsetInstructions(improved);\n\t\t\t\tsetInstrKey((k) => k + 1);\n\t\t\t} else {\n\t\t\t\tsetGuardrail(improved);\n\t\t\t\tsetGuardKey((k) => k + 1);\n\t\t\t}\n\t\t} finally {\n\t\t\tsetImproving(null);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SideModal\n\t\t\t\theader={title}\n\t\t\t\tcloseOnEscapeKey={false}\n\t\t\t\tzIndex={SUBAGENT_ZINDEX}\n\t\t\t\theaderCustomComponent={\n\t\t\t\t\t<DrawerHeaderText\n\t\t\t\t\t\ttitle={title}\n\t\t\t\t\t\tsubtitle=\"Each sub-agent handles one piece of the job. Use @ in the main instructions to call them.\"\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\twidth=\"421px\"\n\t\t\t\theaderStyle={DRAWER_HEADER_STYLE}\n\t\t\t\tbodyStyle={DRAWER_BODY_STYLE}\n\t\t\t\tonClose={onClose}\n\t\t\t\tsaveButtonProps={{\n\t\t\t\t\t'data-test': 'subagent-save',\n\t\t\t\t\tbuttonText: 'Save',\n\t\t\t\t\tbuttonType: 'primary',\n\t\t\t\t\tsize: 'small',\n\t\t\t\t\tdisabled: !canSave,\n\t\t\t\t\tisLoading: saving,\n\t\t\t\t\tonClick: handleSave,\n\t\t\t\t}}\n\t\t\t\tcancelButtonProps={{\n\t\t\t\t\t'data-test': 'subagent-cancel',\n\t\t\t\t\tbuttonText: 'Cancel',\n\t\t\t\t\tbuttonType: 'tertiaryGray',\n\t\t\t\t\tsize: 'small',\n\t\t\t\t\tonClick: onClose,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Input\n\t\t\t\t\tdata-test=\"subagent-name\"\n\t\t\t\t\tlabelText=\"Agent name\"\n\t\t\t\t\tlabelTextBold\n\t\t\t\t\tplaceholder=\"Enter agent name\"\n\t\t\t\t\tvalue={name}\n\t\t\t\t\tmaxCharLimit={charLimits.name}\n\t\t\t\t\tmaxCharLimitPosition=\"TOP\"\n\t\t\t\t\tmaxCharStyle={{ fontSize: 12, lineHeight: '16px' }}\n\t\t\t\t\tstate={isDuplicateName ? 'invalid' : undefined}\n\t\t\t\t\terrorMessage={\n\t\t\t\t\t\tisDuplicateName\n\t\t\t\t\t\t\t? 'A sub-agent with this name already exists'\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tonChangeText={setName}\n\t\t\t\t/>\n\n\t\t\t\t<MentionEditor\n\t\t\t\t\tdata-test=\"subagent-instructions\"\n\t\t\t\t\tlabel=\"Instructions\"\n\t\t\t\t\tvalue={instructions}\n\t\t\t\t\tonChange={setInstructions}\n\t\t\t\t\tmaxLength={charLimits.instructions}\n\t\t\t\t\tplaceholder=\"Write the steps in plain English. The agent will follow them exactly. The more specific you are, the better it performs.\"\n\t\t\t\t\tminHeight=\"160px\"\n\t\t\t\t\tresetKey={`instr-${instrKey}`}\n\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\ttools={availableTools}\n\t\t\t\t\ttoolActions={toolActionSources}\n\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\taddDataButton\n\t\t\t\t\tintegrationStatus={integrationStatus}\n\t\t\t\t\tappLabel={appLabel}\n\t\t\t\t\tonConnectIntegration={onConnectIntegration}\n\t\t\t\t\tonMentionSelect={addToolMention}\n\t\t\t\t\tonFocus={focusInstr}\n\t\t\t\t\tregisterInsert={registerInstr}\n\t\t\t\t\taction={\n\t\t\t\t\t\tonImprove ? (\n\t\t\t\t\t\t\t<ImproveButton\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tdata-test=\"subagent-improve-instructions\"\n\t\t\t\t\t\t\t\tdisabled={improving !== null}\n\t\t\t\t\t\t\t\tonClick={() => handleImprove('instructions')}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{improving === 'instructions'\n\t\t\t\t\t\t\t\t\t? 'Improving…'\n\t\t\t\t\t\t\t\t\t: 'Improve with AI'}\n\t\t\t\t\t\t\t</ImproveButton>\n\t\t\t\t\t\t) : undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\n\t\t\t\t<MentionEditor\n\t\t\t\t\tdata-test=\"subagent-guardrail\"\n\t\t\t\t\tlabel=\"Guardrails\"\n\t\t\t\t\tvalue={guardrail}\n\t\t\t\t\tonChange={setGuardrail}\n\t\t\t\t\tmaxLength={charLimits.guardrail}\n\t\t\t\t\tplaceholder=\"e.g. Never discuss competitor pricing. Always stay within the cancellation policy. Do not process refunds above ₹10,000 without human approval.\"\n\t\t\t\t\tminHeight=\"160px\"\n\t\t\t\t\tresetKey={`guard-${guardKey}`}\n\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\ttools={availableTools}\n\t\t\t\t\ttoolActions={toolActionSources}\n\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\taddDataButton\n\t\t\t\t\tintegrationStatus={integrationStatus}\n\t\t\t\t\tappLabel={appLabel}\n\t\t\t\t\tonConnectIntegration={onConnectIntegration}\n\t\t\t\t\tonMentionSelect={addToolMention}\n\t\t\t\t\tonFocus={focusGuard}\n\t\t\t\t\tregisterInsert={registerGuard}\n\t\t\t\t\taction={\n\t\t\t\t\t\tonImprove ? (\n\t\t\t\t\t\t\t<ImproveButton\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tdata-test=\"subagent-improve-guardrail\"\n\t\t\t\t\t\t\t\tdisabled={improving !== null}\n\t\t\t\t\t\t\t\tonClick={() => handleImprove('guardrail')}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{improving === 'guardrail' ? 'Improving…' : 'Improve with AI'}\n\t\t\t\t\t\t\t</ImproveButton>\n\t\t\t\t\t\t) : undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\n\t\t\t\t<SelectableListSection\n\t\t\t\t\ttitle=\"Tools this agent can use\"\n\t\t\t\t\tdataTestPrefix=\"subagent-tools\"\n\t\t\t\t\titems={allToolItems}\n\t\t\t\t\taddableOptions={toolOptions}\n\t\t\t\t\tsourceGroups={toolSourceGroups}\n\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\tactionSources={toolActionSources}\n\t\t\t\t\temptyText=\"No tools added yet.\"\n\t\t\t\t\tappLabel={appLabel}\n\t\t\t\t\tpickerOpensUp\n\t\t\t\t\tonAdd={(id) => {\n\t\t\t\t\t\tinsertToolAtCursor(id);\n\t\t\t\t\t\tsetTools((prev) => addUnique(prev, id));\n\t\t\t\t\t}}\n\t\t\t\t\tonRemove={removeTool}\n\t\t\t\t\tconfirmDelete={{ noun: 'tool', zIndex: TOOL_DRAWER_ZINDEX + 1 }}\n\t\t\t\t/>\n\t\t\t</SideModal>\n\n\t\t\t{toolDrawer?.kind === 'restapi' && (\n\t\t\t\t<RestApiToolPanel\n\t\t\t\t\tkey={toolDrawer.key}\n\t\t\t\t\tinitial={toolDrawer.initialRest}\n\t\t\t\t\tcharLimits={charLimits}\n\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\tonImprove={onImproveToolInstructions}\n\t\t\t\t\tonClose={() => setToolDrawer(null)}\n\t\t\t\t\tonSave={handleSaveRestApi}\n\t\t\t\t\tzIndex={TOOL_DRAWER_ZINDEX}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{toolDrawer?.kind === 'config' &&\n\t\t\t\ttoolDrawer.toolKey &&\n\t\t\t\topenConfigTemplate && (\n\t\t\t\t\t<ConfigToolPanel\n\t\t\t\t\t\tkey={toolDrawer.key}\n\t\t\t\t\t\ttoolKey={toolDrawer.toolKey}\n\t\t\t\t\t\ttemplate={openConfigTemplate}\n\t\t\t\t\t\tinitial={toolDrawer.initialConfig}\n\t\t\t\t\t\tcharLimits={charLimits}\n\t\t\t\t\t\tvariablesData={variablesData}\n\t\t\t\t\t\tonImprove={onImproveToolInstructions}\n\t\t\t\t\t\tonClose={() => setToolDrawer(null)}\n\t\t\t\t\t\tonSave={handleSaveConfigTool}\n\t\t\t\t\t\tzIndex={TOOL_DRAWER_ZINDEX}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t{undo && (\n\t\t\t\t<Toaster\n\t\t\t\t\tkey={undo.id}\n\t\t\t\t\ttext={undo.message}\n\t\t\t\t\ttype=\"info\"\n\t\t\t\t\tposition=\"top-right\"\n\t\t\t\t\tautoClose={5000}\n\t\t\t\t\thideCloseButton\n\t\t\t\t\tbuttonProps={{\n\t\t\t\t\t\tbuttonText: 'Undo',\n\t\t\t\t\t\tshowButton: true,\n\t\t\t\t\t\tonButtonClick: () => {\n\t\t\t\t\t\t\tundoRemove();\n\t\t\t\t\t\t\treturn {} as Record<string, never>;\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tonCloseToast={() => setUndo(null)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["SUBAGENT_ZINDEX","TOOL_DRAWER_ZINDEX","upsertById","list","item","arr","x","ImproveButton","styled","COLORS","CreateSubAgentPanel","onClose","onSave","availableTools","onImprove","onImproveToolInstructions","configToolTemplates","integrationStatus","onConnectIntegration","title","initial","existingNames","appLabel","charLimits","AGENT_CHAR_LIMITS","variablesData","name","setName","useState","instructions","setInstructions","guardrail","setGuardrail","tools","setTools","configTools","setConfigTools","restApiTools","setRestApiTools","toolDrawer","setToolDrawer","toolDrawerKeyRef","useRef","saving","setSaving","instrKey","setInstrKey","guardKey","setGuardKey","improving","setImproving","mentionItems","useMemo","buildAgentMentionItems","buildCustomToolMentionItems","insertersRef","lastFocusedRef","registerInstr","useCallback","fn","registerGuard","focusInstr","focusGuard","customToolIdsRef","t","addToolMention","kind","id","prev","addUnique","insertToolAtCursor","label","source","openRestApi","tool","openConfigTool","toolKey","openToolAction","CONFIG_TOOL_SOURCES","handleSaveRestApi","isNew","restApiMentionItem","ToolSource","handleSaveConfigTool","configToolMentionItem","undo","setUndo","undoSnapshotRef","undoIdRef","removeTool","token","strip","text","k","undoRemove","snap","nameTrimmed","isDuplicateName","n","canSave","toolItems","sourceIcon","restApiItems","restApiToolName","SOURCE_ICONS","configToolItems","configToolName","allToolItems","toolActionSources","buildToolActions","openConfigTemplate","toolOptions","renderSourceIcon","toolSourceGroups","order","bySource","src","toolSourceLabel","handleSave","result","handleImprove","improved","jsxs","Fragment","SideModal","jsx","DrawerHeaderText","DRAWER_HEADER_STYLE","DRAWER_BODY_STYLE","Input","MentionEditor","SelectableListSection","RestApiToolPanel","ConfigToolPanel","Toaster"],"mappings":"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"}

package/dist/cjs/components/agent-builder/components/MentionEditor.js

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),R=require("styled-components"),E=require("../../TypographyStyle.js"),H=require("../../../constants/Theme.js"),U=require("../../add-variableV2/AddDataPill.js"),S=require("../AgentBuilder.styled.js"),W=require("../constants/editorStyle.js"),c=require("../utils/mentionSerialization.js"),O=require("../utils/sourceIcons.js"),X=require("./MentionPicker.js"),Z=require("../../../editor/BikEditor.js"),ee=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},te=ee(R),ne=n=>n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\r?\n/g,"<br>"),re=({label:n,value:s,onChange:P,maxLength:u,placeholder:$,minHeight:v="200px",resetKey:B,mentionItems:l,tools:_,onMentionSelect:A,onFocus:D,registerInsert:d,onCreateSubAgent:y,toolActions:m,integrationStatus:L,onConnectIntegration:F,variablesData:f,addDataButton:V,action:N,...w})=>{const i=r.useRef(null),[I,C]=r.useState(s.length),[T,M]=r.useState(!1),h=(f?.length??0)>0,z=l.length===0&&(m?.length??0)===0&&!y&&h,G=r.useCallback(e=>{const t=c.variableTokenName(e.actualValue);i.current?.insertInlineContent(`${c.buildMentionHtml(t,`{{${t}}}`,"variable")}&nbsp;`)},[]),p=r.useRef(s.length),J=r.useCallback(({text:e})=>{if(!e)return!1;const t=i.current,b=t?.getSelectedText().length??0,a=u-(p.current-b);return e.length<=a?!1:(a<=0||t?.insertContent(ne(e.slice(0,a))),!0)},[u]),q=r.useCallback((e,t,b,a)=>{const x=i.current;if(!x)return;const j=l.find(k=>String(k.id)===String(t)&&k.meta?.kind===e),Y=b??j?.label??t,Q=a??j?.meta?.source;x.insertInlineContent(`${c.buildMentionHtml(String(t),Y,e,Q)}&nbsp;`)},[l]);r.useEffect(()=>{if(d)return d(q),()=>d(null)},[d,q]);const g=`${B??""}:${h?"v1":"v0"}`,K=r.useMemo(()=>c.instructionsToEditorHtml(s,[...l,...c.buildVariableMentionItems(f)]),[g]);return r.useEffect(()=>{C(s.length),p.current=s.length},[g]),o.jsxs(S.FieldBlock,{children:[o.jsxs(S.FieldLabelRow,{children:[o.jsx(E.TitleSmall,{color:H.COLORS.content.primary,children:n}),o.jsxs(E.BodyCaption,{color:H.COLORS.content.secondary,children:[I,"/",u]})]}),o.jsxs(oe,{minHeight:v,focused:T,$atHint:h,style:{position:"relative"},"data-test":w["data-test"],children:[o.jsx(Z.BikEditor,{ref:i,initialContent:K,placeholder:$,characterLimit:u,characterLimitHard:!0,onPaste:J,minHeight:"120px",maxHeight:"320px",style:{border:"none"},editorStyle:W.AGENT_EDITOR_STYLE,onFocus:()=>{M(!0),D?.()},onBlur:()=>M(!1),mentions:{agents:l,removeTriggerOnDismiss:!0,renderChipIcon:e=>O.renderSourceIcon(O.sourceIcon(e??void 0),-6),renderDropdown:e=>o.jsx(X.MentionPicker,{...e,onCreateSubAgent:y,toolActions:m,integrationStatus:L,onConnectIntegration:F,variablesData:f,onSelectVariable:G}),onSelect:e=>{const t=e.meta?.kind;(t==="tool"||t==="subagent")&&A?.(t,String(e.id))}},onChange:e=>{C(e.characterCount),p.current=e.characterCount;const t=i.current?.getJSON()??null;P(c.editorDocToInstructions(t,_))}},g),N,V&&T&&o.jsx(U.AddDataPill,{"data-test":"mention-add-data",label:z?"Add variable":void 0,onOpen:()=>i.current?.actions.openMentionMenu("@")})]})]})},oe=te.default(S.AiTextAreaShell)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),R=require("styled-components"),E=require("../../TypographyStyle.js"),H=require("../../../constants/Theme.js"),W=require("../../add-variableV2/AddDataPill.js"),S=require("../AgentBuilder.styled.js"),X=require("../constants/editorStyle.js"),c=require("../utils/mentionSerialization.js"),O=require("../utils/sourceIcons.js"),Z=require("./MentionPicker.js"),ee=require("../../../editor/BikEditor.js"),te=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},ne=te(R),re=n=>n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\r?\n/g,"<br>"),oe=({label:n,value:s,onChange:P,maxLength:u,placeholder:$,minHeight:v="200px",resetKey:B,mentionItems:l,tools:_,onMentionSelect:A,onFocus:D,registerInsert:d,onCreateSubAgent:y,toolActions:m,integrationStatus:L,onConnectIntegration:F,appLabel:V,variablesData:f,addDataButton:N,action:w,...I})=>{const i=r.useRef(null),[z,C]=r.useState(s.length),[T,M]=r.useState(!1),h=(f?.length??0)>0,G=l.length===0&&(m?.length??0)===0&&!y&&h,J=r.useCallback(e=>{const t=c.variableTokenName(e.actualValue);i.current?.insertInlineContent(`${c.buildMentionHtml(t,`{{${t}}}`,"variable")}&nbsp;`)},[]),p=r.useRef(s.length),K=r.useCallback(({text:e})=>{if(!e)return!1;const t=i.current,b=t?.getSelectedText().length??0,a=u-(p.current-b);return e.length<=a?!1:(a<=0||t?.insertContent(re(e.slice(0,a))),!0)},[u]),q=r.useCallback((e,t,b,a)=>{const x=i.current;if(!x)return;const j=l.find(k=>String(k.id)===String(t)&&k.meta?.kind===e),Q=b??j?.label??t,U=a??j?.meta?.source;x.insertInlineContent(`${c.buildMentionHtml(String(t),Q,e,U)}&nbsp;`)},[l]);r.useEffect(()=>{if(d)return d(q),()=>d(null)},[d,q]);const g=`${B??""}:${h?"v1":"v0"}`,Y=r.useMemo(()=>c.instructionsToEditorHtml(s,[...l,...c.buildVariableMentionItems(f)]),[g]);return r.useEffect(()=>{C(s.length),p.current=s.length},[g]),o.jsxs(S.FieldBlock,{children:[o.jsxs(S.FieldLabelRow,{children:[o.jsx(E.TitleSmall,{color:H.COLORS.content.primary,children:n}),o.jsxs(E.BodyCaption,{color:H.COLORS.content.secondary,children:[z,"/",u]})]}),o.jsxs(ie,{minHeight:v,focused:T,$atHint:h,style:{position:"relative"},"data-test":I["data-test"],children:[o.jsx(ee.BikEditor,{ref:i,initialContent:Y,placeholder:$,characterLimit:u,characterLimitHard:!0,onPaste:K,minHeight:"120px",maxHeight:"320px",style:{border:"none"},editorStyle:X.AGENT_EDITOR_STYLE,onFocus:()=>{M(!0),D?.()},onBlur:()=>M(!1),mentions:{agents:l,removeTriggerOnDismiss:!0,renderChipIcon:e=>O.renderSourceIcon(O.sourceIcon(e??void 0),-6),renderDropdown:e=>o.jsx(Z.MentionPicker,{...e,onCreateSubAgent:y,toolActions:m,integrationStatus:L,appLabel:V,onConnectIntegration:F,variablesData:f,onSelectVariable:J}),onSelect:e=>{const t=e.meta?.kind;(t==="tool"||t==="subagent")&&A?.(t,String(e.id))}},onChange:e=>{C(e.characterCount),p.current=e.characterCount;const t=i.current?.getJSON()??null;P(c.editorDocToInstructions(t,_))}},g),w,N&&T&&o.jsx(W.AddDataPill,{"data-test":"mention-add-data",label:G?"Add variable":void 0,onOpen:()=>i.current?.actions.openMentionMenu("@")})]})]})},ie=ne.default(S.AiTextAreaShell)`
 	${n=>n.$atHint&&R.css`
 			.ProseMirror.ProseMirror-focused p.is-editor-empty:first-child::before {
 				content: 'Enter text, type @ to add variable';
 			}
 		`}
-`;exports.MentionEditor=re;
+`;exports.MentionEditor=oe;
 //# sourceMappingURL=MentionEditor.js.map