@baishuyun/ai-design 2.0.26 → 2.0.28

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @baishuyun/ai-design
 
+## 2.0.28
+
+### Patch Changes
+
+- fix tree entry
+- Updated dependencies
+  - @baishuyun/types@3.0.24
+  - @baishuyun/ai-feat-utils@2.0.26
+
+## 2.0.27
+
+### Patch Changes
+
+- update agent selector
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.25
+  - @baishuyun/types@3.0.23
+
 ## 2.0.26
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baishuyun/ai-design",
-  "version": "2.0.26",
+  "version": "2.0.28",
   "description": "AI 功能 UI 组件库 - 所有 AI 功能的 UI 表现唯一真相来源",
   "type": "module",
   "main": "src/index.ts",
@@ -60,8 +60,8 @@
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
     "zod": "^4.1.13",
-    "@baishuyun/types": "3.0.22",
-    "@baishuyun/ai-feat-utils": "2.0.24"
+    "@baishuyun/ai-feat-utils": "2.0.26",
+    "@baishuyun/types": "3.0.24"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -83,7 +83,7 @@
     "typescript": "^5.5.0",
     "vite": "^5.1.4",
     "vite-plugin-dts": "^4.5.4",
-    "@baishuyun/types": "3.0.22",
+    "@baishuyun/types": "3.0.24",
     "@baishuyun/tailwind-config": "3.0.9",
     "@baishuyun/typescript-config": "2.0.9"
   },

package/src/components/agent-helper/agent-helper-card/index.tsx

@@ -81,21 +81,11 @@ function useTriggerDescription(helper: IAgentHelper, formService?: IBsFormServic
   }
 }
 
-function buildAgentInfo(agentName?: string, agentIcon?: string): IAgentInfo | undefined {
-  if (!agentName && !agentIcon) {
-    return undefined;
-  }
-  return {
-    id: '',
-    name: agentName || '',
-    icon: agentIcon || '',
-  };
-}
-
 export interface AgentHelperCardProps {
   helper: IAgentHelper;
   agentName?: string;
   agentIcon?: string;
+  getAgent: (agentId: string) => IAgentInfo | undefined;
   className?: string;
   onEnabledChange?: (enabled: boolean) => void;
   onViewLogs?: () => void;
@@ -108,18 +98,17 @@ export interface AgentHelperCardProps {
 
 export const AgentHelperCard = ({
   helper,
-  agentName,
-  agentIcon,
   className,
   onEnabledChange,
   onViewLogs,
   onEdit,
+  getAgent,
   onCopy,
   onDelete,
   formService,
 }: AgentHelperCardProps) => {
   const description = useTriggerDescription(helper, formService);
-  const agent = buildAgentInfo(agentName, agentIcon);
+  const agent = getAgent(helper.agentId);
 
   return (
     <div

package/src/components/agent-helper/agent-helper-card-list/index.tsx

@@ -1,12 +1,13 @@
 import { cn } from '../../../lib/utils';
 import { AgentHelperCard } from '../agent-helper-card';
-import type { IAgentHelper, IBsFormService } from '@baishuyun/types';
+import type { IAgentHelper, IAgentInfo, IBsFormService } from '@baishuyun/types';
 
 export interface AgentHelperCardListProps {
   items: Array<IAgentHelper>;
   className?: string;
   getAgentName?: (agentId: string) => string | undefined;
   getAgentIcon?: (agentId: string) => string | undefined;
+  getAgent: (agentId: string) => (IAgentInfo | undefined);
   onEnabledChange?: (helperId: string, enabled: boolean) => void;
   onViewLogs?: (helperId: string) => void;
   onEdit?: (helperId: string) => void;
@@ -18,8 +19,7 @@ export interface AgentHelperCardListProps {
 export const AgentHelperCardList = ({
   items,
   className,
-  getAgentName,
-  getAgentIcon,
+  getAgent,
   onEnabledChange,
   onViewLogs,
   onEdit,
@@ -39,8 +39,7 @@ export const AgentHelperCardList = ({
           formService={formService}
           key={helper.id}
           helper={helper}
-          agentName={getAgentName?.(helper.agentId)}
-          agentIcon={getAgentIcon?.(helper.agentId)}
+          getAgent={getAgent}
           className="w-[335px] shrink-0"
           onEnabledChange={
             onEnabledChange

package/src/components/agent-scroll-selector.tsx

@@ -145,9 +145,14 @@ const setTriggerRef = useCallback((node: HTMLButtonElement | null) => {
     </>
   );
 
+  const s = showSlider ? slider : null;
+  if (!s && !agents.length) {
+    return null;
+  }
+
   return (
     <div className={cn('flex items-center gap-2.5 w-fit max-w-full min-w-0', className)}>
-      {showSlider ? slider : null}
+      {s}
       {agents.length > 0 && (
         <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
           <PopoverTrigger asChild>
@@ -155,7 +160,7 @@ const setTriggerRef = useCallback((node: HTMLButtonElement | null) => {
               ref={setTriggerRef}
               type="button"
               className={cn(
-                'flex items-center gap-[6px] shrink-0 h-[34px]',
+                'flex items-center gap-[6px] shrink-0 h-[34px] w-[34px]',
                 'px-[10px] py-[5px] rounded-[4px]',
                 'text-[14px] text-[#121111] leading-[normal]',
                 'hover:bg-[#EFF0F6]',
@@ -166,7 +171,7 @@ const setTriggerRef = useCallback((node: HTMLButtonElement | null) => {
               )}
             >
               <MenuLinesIcon />
-              <span>技能</span>
+              {/* <span>技能</span> */}
             </button>
           </PopoverTrigger>
           <PopoverContent

package/src/components/agent-select.tsx

@@ -10,6 +10,7 @@ export interface AgentSelectProps {
   agents: Array<AgentSelectAgent>;
   showAllItems?: boolean;
   showSearch?: boolean;
+  className?: string;
   activeAgent?: { id: string } | null;
   onSelect: (agent: AgentSelectAgent) => void | Promise<void>;
 }
@@ -25,6 +26,7 @@ export const AgentSelect = ({
   activeAgent,
   onSelect,
   showAllItems,
+  className,
 }: AgentSelectProps) => {
   const [searchQuery, setSearchQuery] = useState('');
 
@@ -56,7 +58,7 @@ export const AgentSelect = ({
   })
 
   return (
-    <div className="flex flex-col">
+    <div className={classNames('flex flex-col', 'rounded-[4px]', className)}>
       {showSearch && (
         <div className="px-1.5 pt-1 pb-0.5">
           <div className="flex h-7.5 items-center gap-1.5 rounded-[4px] bg-white px-2.5 py-1.25 border border-[#E0E0E0]">

package/src/components/bs-entry-select/bs-entry-select.tsx

@@ -9,10 +9,10 @@ import {
 import { createPortal } from 'react-dom';
 import { cn } from '../../lib/utils';
 import { transCls } from '../../const/ui';
-import { ScrollSlider } from './scroll-slider';
+import { FlatNode, ScrollSlider } from './scroll-slider';
 import { EntryPopover } from './entry-popover';
-import { buildEntryTreeFromAliasMap } from './build-tree';
-import type { BsEntrySelectProps, BsEntrySelectChangeResult } from './types';
+import { buildEntryTreeFromAliasMap, buildFlowCenterTree } from './build-tree';
+import type { BsEntrySelectProps, BsEntrySelectChangeResult, EntryTreeItem } from './types';
 import { MenuLinesIcon } from '../bs-icons';
 import { useSelectPopoverPosition } from '../../hooks/use-select-popover-position';
 
@@ -163,7 +163,27 @@ export const BsEntrySelect = forwardRef<HTMLDivElement, BsEntrySelectProps>(
 
     const currentAppTree = useMemo(() => {
       if (!currentAppId || !appDetails[currentAppId]) return [];
-      return buildEntryTreeFromAliasMap(appDetails[currentAppId], searchQuery);
+
+      const showFlowCenter = (appDetails[currentAppId ?? '']?.isFlow ?? false);
+
+      const flowCenterNodes: FlatNode[] = [];
+
+      // Flow center — first tab in tabs mode for flow-type apps
+      if (showFlowCenter) {
+        const flowTree = buildFlowCenterTree();
+        flowCenterNodes.push(
+          ...flowTree.map((node) => ({
+            node,
+            appId: currentAppId ?? '',
+            section: 'current' as const,
+          })),
+        );
+      }
+
+      const flowCenterItems: EntryTreeItem[] = flowCenterNodes.map(n => n.node);
+      const result = buildEntryTreeFromAliasMap(appDetails[currentAppId], searchQuery);
+
+      return flowCenterItems.concat(result);
     }, [
       appDetails,
       currentAppId,

package/src/components/bs-entry-select/build-tree.ts

@@ -1,5 +1,6 @@
 import type { IAppDetail, IEntryAliasItem, IEntryDetail, IEntryRef } from '@baishuyun/types';
 import type { EntryTreeItem, BsEntrySelectChangeResult } from './types';
+import { FLOW_CENTER_GROUP_ID, FLOW_CENTER_ENTRIES } from './types';
 import { FormSelectItem } from '../agent-helper/form-select';
 
 export const DEPTH_PADDING: Record<number, string> = {
@@ -110,6 +111,7 @@ export function buildEntryTreeFromAliasMap(
   for (const rootId of rootParents) {
     result.push(...buildRecursive(rootId, 0));
   }
+
   return result;
 }
 
@@ -213,3 +215,51 @@ export function findSelected(
   }
   return null;
 }
+
+/** Create a virtual IEntryDetail for a flow center entry */
+export function createFlowEntryDetail(entryId: string, name: string): IEntryDetail {
+  return {
+    _id: `${FLOW_CENTER_GROUP_ID}_${entryId}`,
+    entryId,
+    hasCoop: false,
+    hasFlow: true,
+    icon: 0,
+    isEvent: false,
+    isFavorite: false,
+    name,
+    parent: FLOW_CENTER_GROUP_ID,
+    seq: 0,
+    type: 'flow',
+  };
+}
+
+/** Build the synthetic "流程中心" group tree with 4 flow entries */
+export function buildFlowCenterTree(): EntryTreeItem[] {
+  const children: EntryTreeItem[] = FLOW_CENTER_ENTRIES.map((item) => ({
+    // Use entryId directly as the node id so selected-state matching
+    // (selectedEntryId === node.id) works like real entries
+    id: item.entryId,
+    name: item.name,
+    icon: 0,
+    iconClass: `sdk-icon ${item.iconClass} text-[#0265ff]`,
+    type: 'flow',
+    children: [],
+    // depth 0: the group popover renders these as a flat list — no tree indent
+    depth: 0,
+    isSelectable: true,
+    entry: createFlowEntryDetail(item.entryId, item.name),
+  }));
+
+  const groupNode: EntryTreeItem = {
+    id: FLOW_CENTER_GROUP_ID,
+    name: '流程中心',
+    icon: 0,
+    type: 'group',
+    depth: 0,
+    isSelectable: false,
+    entry: null,
+    children,
+  };
+
+  return [groupNode];
+}

package/src/components/bs-entry-select/entry-item.tsx

@@ -28,9 +28,11 @@ export function EntryItem({
       <span className="flex items-center gap-[6px] min-w-0 flex-1">
         <i
           className={
-            item.entry
-              ? getEntryIconClass(item.entry)
-              : 'node-icon icon-bsy-form icon-new-bsy-form-25'
+            item.iconClass
+              ? item.iconClass
+              : item.entry
+                ? getEntryIconClass(item.entry)
+                : 'node-icon icon-bsy-form icon-new-bsy-form-25'
           }
           style={{ fontSize: 16, lineHeight: 1 }}
         />

package/src/components/bs-entry-select/scroll-slider.tsx

@@ -4,16 +4,18 @@ import {
   useEffect,
   useCallback,
   useMemo,
+  Fragment,
 } from 'react';
 import { createPortal } from 'react-dom';
 import { cn } from '../../lib/utils';
 import { transCls } from '../../const/ui';
 import { IconBtn } from '../icon-btn';
-import { LeftArrowIcon, SolidArrowDownIcon } from '../bs-icons';
+import { LeftArrowIcon, SolidArrowDownIcon, DividerIcon } from '../bs-icons';
 import {
   buildEntryTreeFromAliasMap,
   getEntryIconClass,
   filterTreeBySearch,
+  buildFlowCenterTree,
 } from './build-tree';
 import { SearchInput } from './search-input';
 import { TreeItemNode } from './tree-item-node';
@@ -30,7 +32,7 @@ const ChevronRightIcon = ({ size }: { size?: number }) => (
   <SolidArrowDownIcon className="-rotate-90" size={size} />
 );
 
-interface FlatNode {
+export interface FlatNode {
   node: EntryTreeItem;
   appId: string;
   section: 'current' | 'other';
@@ -73,10 +75,27 @@ export function ScrollSlider({
     { estimatedHeight: 340 },
   );
 
+  const hoverCloseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   const isTabs = variant === 'tabs';
+  const showFlowCenter = isTabs && (appDetails[currentAppId ?? '']?.isFlow ?? false);
 
   // Build first-level nodes from all apps (no search filter)
   const flatNodes = useMemo<FlatNode[]>(() => {
+    const flowCenterNodes: FlatNode[] = [];
+
+    // Flow center — first tab in tabs mode for flow-type apps
+    if (showFlowCenter) {
+      const flowTree = buildFlowCenterTree();
+      flowCenterNodes.push(
+        ...flowTree.map((node) => ({
+          node,
+          appId: currentAppId ?? '',
+          section: 'current' as const,
+        })),
+      );
+    }
+
     const appIds = Object.keys(appDetails);
     const currentFirst: FlatNode[] = [];
     const otherNodes: FlatNode[] = [];
@@ -93,12 +112,13 @@ export function ScrollSlider({
       }
     }
 
-    const merged = [...currentFirst, ...otherNodes];
-    return showCurrentAppEntriesOnly ? currentFirst : merged;
+    const merged = [...flowCenterNodes, ...currentFirst, ...otherNodes];
+    return showCurrentAppEntriesOnly ? [...flowCenterNodes, ...currentFirst] : merged;
   }, [
     appDetails,
     currentAppId,
     showCurrentAppEntriesOnly,
+    showFlowCenter,
     Object.keys(appDetails)
       .map((id) => (appDetails[id]?.entryList?.length ?? 0))
       .join(','),
@@ -110,6 +130,17 @@ export function ScrollSlider({
     return filterTreeBySearch(activeGroup.node.children, groupSearchQuery);
   }, [activeGroup, groupSearchQuery]);
 
+  // Map from group pill node ID → FlatNode, for native hover delegation
+  const groupFlatNodeById = useMemo(() => {
+    const map = new Map<string, FlatNode>();
+    for (const fn of flatNodes) {
+      if (!fn.node.isSelectable) {
+        map.set(fn.node.id, fn);
+      }
+    }
+    return map;
+  }, [flatNodes]);
+
   const checkScroll = useCallback(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -163,9 +194,52 @@ export function ScrollSlider({
         ) as HTMLElement | null;
       }
     }
-    if (pill) {
-      pill.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
-    }
+    if (!pill) return;
+
+    const container = scrollRef.current;
+    const PAD = 12; // matches scrollPaddingInline, covers corner flares
+    const start = performance.now();
+    let rafId = 0;
+
+    // Ease toward the pill with the target recomputed EVERY frame. A one-shot
+    // scrollIntoView({behavior: 'smooth'}) computes its destination upfront —
+    // the selection triggers a host navigation whose follow-up layout changes
+    // (content reload, arrow show/hide) shift the container mid-animation and
+    // the pill lands clipped. Live recomputation keeps this one continuous
+    // ease-out motion that always converges, with no visible second jump.
+    const step = () => {
+      const containerRect = container.getBoundingClientRect();
+      const pillRect = pill.getBoundingClientRect();
+      let delta = 0;
+      if (pillRect.left < containerRect.left + PAD) {
+        delta = pillRect.left - containerRect.left - PAD;
+      } else if (pillRect.right > containerRect.right - PAD) {
+        delta = pillRect.right - containerRect.right + PAD;
+      }
+      if (Math.abs(delta) < 1) return; // arrived
+      container.scrollLeft += delta * 0.3;
+      if (performance.now() - start < 600) {
+        rafId = requestAnimationFrame(step);
+      }
+    };
+    rafId = requestAnimationFrame(step);
+
+    // Stop animating if the user takes over scrolling
+    const cancelOnUserScroll = () => cancelAnimationFrame(rafId);
+    container.addEventListener('wheel', cancelOnUserScroll, {
+      once: true,
+      passive: true,
+    });
+    container.addEventListener('touchstart', cancelOnUserScroll, {
+      once: true,
+      passive: true,
+    });
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      container.removeEventListener('wheel', cancelOnUserScroll);
+      container.removeEventListener('touchstart', cancelOnUserScroll);
+    };
   }, [selectedEntryId, descendantToGroupId]);
 
   useEffect(() => {
@@ -195,46 +269,168 @@ export function ScrollSlider({
     activeGroupIdRef.current = null;
     setActiveGroup(null);
     setGroupSearchQuery('');
+    if (hoverCloseTimerRef.current) {
+      clearTimeout(hoverCloseTimerRef.current);
+      hoverCloseTimerRef.current = null;
+    }
   }, []);
 
-  const openGroupPopover = useCallback((flatNode: FlatNode, event: React.MouseEvent) => {
-    event.stopPropagation();
-    if (activeGroup?.node.id === flatNode.node.id) {
-      activeGroupIdRef.current = null;
-      setActiveGroup(null);
-      setGroupSearchQuery('');
-      return;
+  const cancelCloseTimer = useCallback(() => {
+    if (hoverCloseTimerRef.current) {
+      clearTimeout(hoverCloseTimerRef.current);
+      hoverCloseTimerRef.current = null;
     }
-    setGroupSearchQuery('');
-    activeGroupIdRef.current = flatNode.node.id;
-    setActiveGroup(flatNode);
-
-    // Check Shadow DOM portal
-    const triggerEl = groupPillRefs.current.get(flatNode.node.id);
-    if (triggerEl) {
-      const rootNode = triggerEl.getRootNode();
-      if (rootNode instanceof ShadowRoot) {
-        const existing = rootNode.querySelector<HTMLElement>(
-          '[data-bs-entry-select-group-portal]',
-        );
-        if (existing) {
-          setGroupPortalContainer(existing);
+  }, []);
+
+  // Delayed close — cancelled when the mouse re-enters the pill or popover.
+  // The :hover guard prevents closing when a transient leave fired but the
+  // cursor is still over the pill or popover (e.g. layout-shift artifacts).
+  const scheduleClosePopover = useCallback(() => {
+    cancelCloseTimer();
+    hoverCloseTimerRef.current = setTimeout(() => {
+      const pillEl = activeGroupIdRef.current
+        ? groupPillRefs.current.get(activeGroupIdRef.current)
+        : null;
+      if (pillEl?.matches(':hover') || popoverRef.current?.matches(':hover')) {
+        return;
+      }
+      closeGroupPopover();
+    }, 200);
+  }, [cancelCloseTimer, closeGroupPopover]);
+
+  // Core open logic shared by click and hover paths
+  const openGroupPopoverCore = useCallback(
+    (flatNode: FlatNode) => {
+      // Clear any pending close timer
+      cancelCloseTimer();
+
+      // Skip if already open for this group (hover keeps it open)
+      if (activeGroup?.node.id === flatNode.node.id) return;
+
+      setGroupSearchQuery('');
+      activeGroupIdRef.current = flatNode.node.id;
+      setActiveGroup(flatNode);
+
+      // Check Shadow DOM portal
+      const triggerEl = groupPillRefs.current.get(flatNode.node.id);
+      if (triggerEl) {
+        const rootNode = triggerEl.getRootNode();
+        if (rootNode instanceof ShadowRoot) {
+          const existing = rootNode.querySelector<HTMLElement>(
+            '[data-bs-entry-select-group-portal]',
+          );
+          if (existing) {
+            setGroupPortalContainer(existing);
+          } else {
+            const container = document.createElement('div');
+            container.setAttribute('data-bs-entry-select-group-portal', 'true');
+            rootNode.appendChild(container);
+            setGroupPortalContainer(container);
+          }
         } else {
-          const container = document.createElement('div');
-          container.setAttribute('data-bs-entry-select-group-portal', 'true');
-          rootNode.appendChild(container);
-          setGroupPortalContainer(container);
+          setGroupPortalContainer(null);
         }
-      } else {
-        setGroupPortalContainer(null);
       }
-    }
 
-    // Position the popover after the next frame
-    requestAnimationFrame(() => {
+      // Position synchronously — the pill is already mounted, so its rect is
+      // available immediately. Batching this with setActiveGroup ensures the
+      // popover mounts at the correct position in the same commit; a deferred
+      // (rAF) position would render one frame in-flow at the end of the body,
+      // shifting layout and firing a spurious mouseleave on the pill.
       updatePopoverPosition();
-    });
-  }, [activeGroup, updatePopoverPosition]);
+    },
+    [activeGroup, cancelCloseTimer, updatePopoverPosition],
+  );
+
+  const openGroupPopover = useCallback(
+    (flatNode: FlatNode, event: React.MouseEvent) => {
+      event.stopPropagation();
+      if (activeGroup?.node.id === flatNode.node.id) {
+        activeGroupIdRef.current = null;
+        setActiveGroup(null);
+        setGroupSearchQuery('');
+        return;
+      }
+      openGroupPopoverCore(flatNode);
+    },
+    [activeGroup, openGroupPopoverCore],
+  );
+
+  // Hover handlers for tabs mode.
+  //
+  // NOTE: these are driven by NATIVE mouseover/mouseout listeners (attached in
+  // the effects below), not React's onMouseEnter/onMouseLeave. React's
+  // synthetic enter/leave events do not fire when the pointer crosses from
+  // light DOM into a shadow root — which is exactly what happens when the
+  // mouse enters a tab from the host content area below the tab bar.
+  const handleNativeOver = useCallback(
+    (e: MouseEvent) => {
+      const t = e.target as HTMLElement | null;
+      if (!t) return;
+      if (popoverRef.current?.contains(t)) {
+        cancelCloseTimer();
+        return;
+      }
+      const pillEl = t.closest?.('[data-entry-id]') as HTMLElement | null;
+      const flatNode = pillEl
+        ? groupFlatNodeById.get(pillEl.getAttribute('data-entry-id') ?? '')
+        : undefined;
+      if (flatNode) {
+        cancelCloseTimer();
+        openGroupPopoverCore(flatNode);
+      } else {
+        // Hovering a leaf pill or empty slider area — close any open group popover
+        scheduleClosePopover();
+      }
+    },
+    [cancelCloseTimer, groupFlatNodeById, openGroupPopoverCore, scheduleClosePopover],
+  );
+
+  const handleNativeOut = useCallback(
+    (e: MouseEvent) => {
+      const to = e.relatedTarget as HTMLElement | null;
+      if (to && scrollRef.current?.contains(to)) return;
+      if (to && popoverRef.current?.contains(to)) return;
+      scheduleClosePopover();
+    },
+    [scheduleClosePopover],
+  );
+
+  // Keep latest handlers in refs so listeners stay attached across re-renders
+  const handleNativeOverRef = useRef(handleNativeOver);
+  const handleNativeOutRef = useRef(handleNativeOut);
+  useEffect(() => {
+    handleNativeOverRef.current = handleNativeOver;
+    handleNativeOutRef.current = handleNativeOut;
+  });
+
+  // Native hover listeners on the scroll container (delegated to group pills)
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el || !isTabs) return;
+    const over = (e: MouseEvent) => handleNativeOverRef.current(e);
+    const out = (e: MouseEvent) => handleNativeOutRef.current(e);
+    el.addEventListener('mouseover', over);
+    el.addEventListener('mouseout', out);
+    return () => {
+      el.removeEventListener('mouseover', over);
+      el.removeEventListener('mouseout', out);
+    };
+  }, [isTabs]);
+
+  // Native hover listeners on the group popover (rendered in a portal subtree)
+  useEffect(() => {
+    const pop = popoverRef.current;
+    if (!isTabs || !activeGroup || !pop) return;
+    const over = (e: MouseEvent) => handleNativeOverRef.current(e);
+    const out = (e: MouseEvent) => handleNativeOutRef.current(e);
+    pop.addEventListener('mouseover', over);
+    pop.addEventListener('mouseout', out);
+    return () => {
+      pop.removeEventListener('mouseover', over);
+      pop.removeEventListener('mouseout', out);
+    };
+  }, [isTabs, activeGroup]);
 
   const handleGroupPopoverSelect = useCallback(
     (result: BsEntrySelectChangeResult) => {
@@ -302,19 +498,53 @@ export function ScrollSlider({
 
       <div
         ref={scrollRef}
+        // scroll-padding: scrollIntoView aligns pills this far from the
+        // container edge, keeping the selected tab's outward corner flares
+        // (protruding 9px) fully visible instead of clipped
+        style={isTabs ? { scrollPaddingInline: 12 } : undefined}
         className={cn(
           'flex-1 overflow-x-auto scrollbar-hide flex min-w-0',
           isTabs
-            ? 'items-end gap-0 overflow-y-hidden border-b-[#e0e0e0] before:content-[""] before:absolute before:bottom-[0px] before:left-[-200px] before:right-0 before:h-[1px] before:w-[100vw] before:bg-[#e0e0e0] h-full'
+            // px compensates -mx: keeps pills at the same visual position
+            // while letting bottom corner flares paint without being clipped
+            ? 'items-end gap-0 overflow-y-hidden px-[10px] -mx-[10px] border-b-[#e0e0e0] before:content-[""] before:absolute before:bottom-[0px] before:left-[-200px] before:right-0 before:h-[1px] before:w-[200vw] before:bg-[#e0e0e0] h-full'
             : 'items-center gap-2.5',
         )}
       >
-        {flatNodes.map((flatNode) => {
+        {flatNodes.map((flatNode, index) => {
           const { node, appId, section } = flatNode;
           const isLeaf = node.isSelectable;
           const isSelected = isLeaf && selectedEntryId === node.id;
-          const isGroupActive = activeGroup?.node.id === node.id
-            || node?.children.findIndex(c => c.id === selectedEntryId) >= 0;
+          // Active tab styling applies only when a descendant entry is
+          // selected — hovering/clicking to open the popover must NOT make
+          // the group look active (that would show two active tabs at once)
+          const isGroupActive = node?.children.findIndex(c => c.id === selectedEntryId) >= 0;
+          // Popover-open is a separate, transient state — drives the chevron
+          const isGroupPopoverOpen = activeGroup?.node.id === node.id;
+
+          // Divider between inactive tabs: always rendered in tabs mode so
+          // the strip width never shifts on selection change — only its
+          // visibility toggles (hidden next to the active tab, which has
+          // its own borders)
+          const isNodeActive = (fn: FlatNode | null): boolean => {
+            if (!fn) return false;
+            return fn.node.isSelectable
+              ? selectedEntryId === fn.node.id
+              : fn.node.children.findIndex((c) => c.id === selectedEntryId) >= 0;
+          };
+          const dividerVisible =
+            !isNodeActive(flatNode) && !isNodeActive(flatNodes[index - 1]);
+          const divider = isTabs && index > 0 ? (
+            <span
+              aria-hidden
+              className={cn(
+                'self-center shrink-0 flex items-center justify-center w-[1px]',
+                !dividerVisible && 'invisible',
+              )}
+            >
+              <DividerIcon />
+            </span>
+          ) : null;
 
           const setPillRef = (el: HTMLButtonElement | null) => {
             if (el) {
@@ -326,8 +556,9 @@ export function ScrollSlider({
 
           if (isLeaf) {
             return (
-              <button
-                key={node.id}
+              <Fragment key={node.id}>
+                {divider}
+                <button
                 data-entry-id={node.id}
                 type="button"
                 onClick={() => {
@@ -336,65 +567,197 @@ export function ScrollSlider({
                   }
                 }}
                 className={cn(
-                  'flex items-center gap-[6px] shrink-0 max-w-[240px]',
+                  'flex items-center shrink-0 max-w-[240px]',
                   transCls,
                   isTabs
                     ? [
-                        'px-[16px] py-[8px] relative z-10 border-b-none h-full',
-                        isSelected
-                          ? 'border-r border-t border-l border-[#e0e0e0] bg-[#f6f7fa] text-[#0265FF] rounded-t-[10px] rounded-b-none '
-                          : 'text-[#030303] hover:bg-[#F0F6FF] rounded-t-[8px]',
+                        // Button stays h-full so text keeps its Y position;
+                        // the visual tab box is the decorative span below
+                        'group px-[10px] py-[8px] relative z-10 h-full',
+                        isSelected ? 'text-[#0265FF]' : 'text-[#030303]',
                       ]
                     : [
-                        'px-[10px] py-[7px] rounded-[4px]',
+                        'px-[10px] py-[7px] rounded-[4px] gap-[6px]',
                         isSelected
                           ? 'border border-[#F0F6FF] bg-[#F0F6FF] text-[#0265FF]'
                           : 'border border-[#E0E0E0] text-[#030303] hover:bg-[#F0F6FF]',
                       ],
                 )}
               >
-                <i
-                  className={
-                    node.entry
-                      ? getEntryIconClass(node.entry)
-                      : 'node-icon icon-bsy-form icon-new-bsy-form-25'
-                  }
-                  style={{ fontSize: 16, lineHeight: 1 }}
-                />
-                <span className="text-[14px] leading-[normal] truncate">
-                  {node.name}
+                {/* Visual tab box — side borders stop 10px above the bar so
+                    the concave corner arcs can continue them; transparent
+                    borders when unselected (decorative only, no layout shift).
+                    No transCls here: the fill strip and corner flares below
+                    appear/disappear instantly on selection change, so this
+                    box must switch instantly too — otherwise its fading
+                    background leaves a ghost image on the deselected tab */}
+                {isTabs && (
+                  <span
+                    aria-hidden
+                    className={cn(
+                      'pointer-events-none absolute inset-x-0 top-[6px] bottom-[10px] border-r border-t border-l border-b-none rounded-t-[10px] rounded-b-none',
+                      isSelected
+                        ? 'border-[#e0e0e0] bg-[#f6f7fa]'
+                        : 'border-transparent',
+                    )}
+                  />
+                )}
+                {isTabs && isSelected && (
+                  <>
+                    {/* Fill below the tab body — covers the bar line under the tab */}
+                    <span
+                      aria-hidden
+                      className="pointer-events-none absolute inset-x-0 bottom-0 h-[10px] bg-[#f6f7fa]"
+                    />
+                    {/* Concave corner flares. The square is shifted 1px
+                        inward (left/right-[-9px]) so the full border ring —
+                        including its tangent junctions with the side border
+                        (vertical tangent) and the bar line (horizontal
+                        tangent) — fits inside the element and paints above
+                        the bottom fill strip */}
+                    <span
+                      aria-hidden
+                      className="pointer-events-none absolute left-[-9px] bottom-0 w-[10px] h-[10px]"
+                      style={{
+                        background:
+                          'radial-gradient(circle at 0% 0%, transparent 9px, #e0e0e0 9px, #e0e0e0 10px, #f6f7fa 10px)',
+                      }}
+                    />
+                    <span
+                      aria-hidden
+                      className="pointer-events-none absolute right-[-9px] bottom-0 w-[10px] h-[10px]"
+                      style={{
+                        background:
+                          'radial-gradient(circle at 100% 0%, transparent 9px, #e0e0e0 9px, #e0e0e0 10px, #f6f7fa 10px)',
+                      }}
+                    />
+                  </>
+                )}
+                {/* In tabs mode, hover highlights only this icon+text chip —
+                    the tab background itself stays unchanged. No transCls:
+                    on selection the hover bg must clear instantly, otherwise
+                    it fades out slowly and leaves a chip-shaped ghost on the
+                    newly selected tab */}
+                <span
+                  className={cn(
+                    'flex items-center gap-[6px] min-w-0',
+                    isTabs &&
+                      cn(
+                        'relative rounded-[6px] px-[20px] py-[6px]',
+                        !isSelected && 'group-hover:bg-[#F0F6FF]',
+                      ),
+                  )}
+                >
+                  <i
+                    className={
+                      node.iconClass
+                        ? node.iconClass
+                        : node.entry
+                          ? getEntryIconClass(node.entry)
+                          : 'node-icon icon-bsy-form icon-new-bsy-form-25'
+                    }
+                    style={{ fontSize: 16, lineHeight: 1 }}
+                  />
+                  <span className="text-[14px] leading-[normal] truncate">
+                    {node.name}
+                  </span>
                 </span>
               </button>
+              </Fragment>
             );
           }
 
           // Group pill (has descendants)
           return (
+            <Fragment key={node.id}>
+              {divider}
             <button
-              key={node.id}
               data-entry-id={node.id}
               ref={setPillRef}
               type="button"
-              onClick={(e) => openGroupPopover(flatNode, e)}
+              {...(!isTabs
+                ? {
+                    onClick: (e: React.MouseEvent) => openGroupPopover(flatNode, e),
+                  }
+                : {})}
               className={cn(
-                'flex items-center gap-[10px] shrink-0 max-w-[240px]',
+                'flex items-center shrink-0 max-w-[240px]',
                 transCls,
                 isTabs
                   ? [
-                      'px-[16px] py-[8px] relative z-10 h-full',
-                      isGroupActive
-                          ? 'border-r border-t border-l border-[#e0e0e0] bg-[#f6f7fa] text-[#0265FF] rounded-t-[10px] rounded-b-none '
-                          : 'text-[#030303] hover:bg-[#F0F6FF] rounded-t-[8px]',
+                      // Button stays h-full so text keeps its Y position;
+                      // the visual tab box is the decorative span below
+                      'group gap-[4px] px-[10px] py-[8px] relative z-10 h-full',
+                      isGroupActive ? 'text-[#0265FF]' : 'text-[#030303]',
                     ]
                   : [
-                      'px-[10px] py-[7px] rounded-[4px]',
+                      'gap-[10px] px-[10px] py-[7px] rounded-[4px]',
                       isGroupActive
                         ? 'border border-[#0265FF] text-[#030303]'
                         : 'border border-[#E0E0E0] text-[#030303] hover:bg-[#F0F6FF]',
                     ],
               )}
             >
-              <span className="flex items-center gap-[6px] min-w-0 flex-1">
+              {/* Visual tab box — side borders stop 10px above the bar so
+                  the concave corner arcs can continue them; transparent
+                  borders when inactive (decorative only, no layout shift) */}
+              {isTabs && (
+                <span
+                  aria-hidden
+                  className={cn(
+                    'pointer-events-none absolute inset-x-0 top-[6px] bottom-[10px] border-r border-t border-l border-b-none rounded-t-[10px] rounded-b-none',
+                    isGroupActive
+                      ? 'border-[#e0e0e0] bg-[#f6f7fa]'
+                      : 'border-transparent',
+                  )}
+                />
+              )}
+              {isTabs && isGroupActive && (
+                <>
+                  {/* Fill below the tab body — covers the bar line under the tab */}
+                  <span
+                    aria-hidden
+                    className="pointer-events-none absolute inset-x-0 bottom-0 h-[10px] bg-[#f6f7fa]"
+                  />
+                  {/* Concave corner flares. The square is shifted 1px
+                      inward (left/right-[-9px]) so the full border ring —
+                      including its tangent junctions with the side border
+                      (vertical tangent) and the bar line (horizontal
+                      tangent) — fits inside the element and paints above
+                      the bottom fill strip */}
+                  <span
+                    aria-hidden
+                    className="pointer-events-none absolute left-[-9px] bottom-0 w-[10px] h-[10px]"
+                    style={{
+                      background:
+                        'radial-gradient(circle at 0% 0%, transparent 9px, #e0e0e0 9px, #e0e0e0 10px, #f6f7fa 10px)',
+                    }}
+                  />
+                  <span
+                    aria-hidden
+                    className="pointer-events-none absolute right-[-9px] bottom-0 w-[10px] h-[10px]"
+                    style={{
+                      background:
+                        'radial-gradient(circle at 100% 0%, transparent 9px, #e0e0e0 9px, #e0e0e0 10px, #f6f7fa 10px)',
+                    }}
+                  />
+                </>
+              )}
+              {/* In tabs mode, hover highlights only this icon+text chip —
+                  the tab background itself stays unchanged. No transCls:
+                  on activation the hover bg must clear instantly, otherwise
+                  it fades out slowly and leaves a chip-shaped ghost on the
+                  newly activated tab */}
+              <span
+                className={cn(
+                  'flex items-center gap-[6px] min-w-0 flex-1',
+                  isTabs &&
+                    cn(
+                      'relative rounded-[6px] px-[20px] py-[6px]',
+                      !isGroupActive && 'group-hover:bg-[#F0F6FF]',
+                    ),
+                )}
+              >
                 <i
                   className="icon-bsy-folder-close"
                   style={{ fontSize: 16, lineHeight: 1 }}
@@ -405,14 +768,15 @@ export function ScrollSlider({
               </span>
               <span
                 className={cn(
-                  'shrink-0 flex items-center justify-center w-[16px] h-[16px] text-[#666666]',
+                  'relative shrink-0 flex items-center justify-center w-[16px] h-[16px] text-[#666666]',
                   transCls,
-                  isGroupActive && 'rotate-90',
+                  isGroupPopoverOpen && 'rotate-90',
                 )}
               >
                 <ChevronRightIcon size={16} />
               </span>
             </button>
+            </Fragment>
           );
         })}
       </div>
@@ -463,6 +827,14 @@ export function ScrollSlider({
                 transCls,
               )}
             >
+              {/* Transparent hover bridges: keep the mouse "inside" the popover
+                  while crossing the gap between pill and popover */}
+              {isTabs && (
+                <>
+                  <div className="absolute left-0 right-0 -top-[6px] h-[6px]" />
+                  <div className="absolute left-0 right-0 -bottom-[6px] h-[6px]" />
+                </>
+              )}
               <SearchInput
                 placeholder='搜索表单名称'
                 value={groupSearchQuery}

package/src/components/bs-entry-select/types.ts

@@ -6,6 +6,16 @@ export interface BsEntrySelectChangeResult {
   section: 'current' | 'other';
 }
 
+/** Flow center — synthetic group tab for flow-type apps in tabs mode */
+export const FLOW_CENTER_GROUP_ID = '__flow_center__';
+
+export const FLOW_CENTER_ENTRIES = [
+  { entryId: 'todo', name: '待办任务', iconClass: 'icon-new-bsy-todo' },
+  { entryId: 'cc', name: '抄送我的', iconClass: 'icon-new-bsy-cc' },
+  { entryId: 'transactors', name: '我处理的', iconClass: 'icon-new-bsy-transactors' },
+  { entryId: 'create', name: '我发起的', iconClass: 'icon-new-bsy-create' },
+] as const;
+
 export type BsEntrySelectSliderVariant = 'default' | 'tabs';
 
 export interface BsEntrySelectProps {
@@ -31,4 +41,6 @@ export interface EntryTreeItem {
   depth: number;
   isSelectable: boolean;
   entry: IEntryDetail | null;
+  /** Optional custom icon CSS class — used for synthetic entries like flow center */
+  iconClass?: string;
 }

package/src/components/fake-bot-msg.tsx

@@ -17,7 +17,7 @@ export const FakeBotMessage = ({
       <div>
         <MessageContent
           className={cn(
-            'w-fit wrap-break-words rounded-2 bg-transparent px-0 py-0 text-left',
+            'wrap-break-words rounded-2 bg-transparent px-0 py-0 text-left w-full',
             className
           )}
           data-testid="message-content"

package/src/components/fields-previewer.tsx

@@ -203,8 +203,8 @@ export const FieldsPreviewer = forwardRef<HTMLDivElement, FieldsPreviewerProps>(
         <AbsFullscreenGradientBg
           zIndex={zIndex}
           padding={isFields ? p : 0}
-          disableGradient={fullscreen || !isFields}
-          bgColor={isFields ? '#fff' : '#F5F7FA'}
+          disableGradient
+          bgColor="#f6f7fa"
           ref={setAbsContainer}
         >
           {fullscreen ? contentJsx : content}

package/src/components/icons/empty-agent-icon.tsx

@@ -0,0 +1,94 @@
+export const EmptyAgentIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="155" height="97" viewBox="0 0 155 97" fill="none">
+  <mask id="mask0_33687_60435" style={{maskType: 'alpha'}} maskUnits="userSpaceOnUse" x="0" y="71" width="155" height="19">
+    <rect x="0.6875" y="71.3262" width="153.628" height="17.8319" fill="white"/>
+  </mask>
+  <g mask="url(#mask0_33687_60435)">
+    <ellipse cx="77.5017" cy="85.9947" rx="76.8142" ry="14.6686" fill="url(#paint0_linear_33687_60435)"/>
+  </g>
+  <ellipse cx="123.117" cy="60.3534" rx="6.51549" ry="8.91593" fill="url(#paint1_linear_33687_60435)"/>
+  <path d="M122.891 79.2946V52.6367L123.672 79.2946H122.891Z" fill="#D5DDF4"/>
+  <path d="M123.003 67.5213L118.875 63.7448L123.003 66.2995V67.5213Z" fill="#D5DDF4"/>
+  <path d="M125.011 59.7461L123.003 61.9676V62.7451L125.011 59.7461Z" fill="#D5DDF4"/>
+  <path d="M123.016 78.6367L103.15 79.296H123.016V78.6367Z" fill="url(#paint2_linear_33687_60435)"/>
+  <ellipse cx="38.4748" cy="66.1104" rx="3.77212" ry="4.80088" transform="rotate(-4.32208 38.4748 66.1104)" fill="url(#paint3_linear_33687_60435)"/>
+  <path d="M39.065 75.831L38.1016 63.084L38.1402 75.7356L39.065 75.831Z" fill="#D5DDF4"/>
+  <path d="M38.5854 70.1526L40.4091 68.2122L38.5415 69.5727L38.5854 70.1526Z" fill="#D5DDF4"/>
+  <path d="M37.3534 66.5346L38.3862 67.5168L38.414 67.8858L37.3534 66.5346Z" fill="#D5DDF4"/>
+  <path d="M38.9297 75.1816L17.0783 77.329L38.9794 75.839L38.9297 75.1816Z" fill="url(#paint4_linear_33687_60435)"/>
+  <path d="M96.0119 69.9553L100.847 50.027C101.266 48.3002 99.9583 46.6367 98.1814 46.6367H55.7188L59.1062 69.9553H96.0119Z" fill="#90ACF8"/>
+  <path d="M96.0119 69.9553L100.847 50.027C101.266 48.3002 99.9583 46.6367 98.1814 46.6367H55.7188L59.1062 69.9553H96.0119Z" fill="#90ACF8" fill-opacity="0.2"/>
+  <rect x="76.3438" y="32.0664" width="24.0044" height="28.9571" rx="1.37168" transform="rotate(14.142 76.3438 32.0664)" fill="url(#paint5_linear_33687_60435)" fill-opacity="0.2"/>
+  <rect x="68.1953" y="38.3086" width="23.6252" height="23.6724" rx="1.37168" transform="rotate(14.142 68.1953 38.3086)" fill="#90ACF8" fill-opacity="0.2"/>
+  <g filter="url(#filter3_d_33687_60435)">
+    <path d="M56.6096 69.7845L53.8535 42.3508C53.7521 41.3412 54.5448 40.4648 55.5595 40.4648H62.7559C63.2633 40.4648 63.7446 40.6895 64.0703 41.0785L66.468 43.941C66.9893 44.5633 67.7593 44.9228 68.5711 44.9228H92.1169C93.0009 44.9228 93.7401 45.595 93.8238 46.4752L96.0078 69.4508C96.1035 70.4573 95.3119 71.3277 94.3009 71.3277H58.3156C57.435 71.3277 56.6976 70.6606 56.6096 69.7845Z" fill="#F0F4FE"/>
+  </g>
+  <path d="M56.6096 69.7845L53.8535 42.3508C53.7521 41.3412 54.5448 40.4648 55.5595 40.4648H62.7559C63.2633 40.4648 63.7446 40.6895 64.0703 41.0785L66.468 43.941C66.9893 44.5633 67.7593 44.9228 68.5711 44.9228H92.1169C93.0009 44.9228 93.7401 45.595 93.8238 46.4752L96.0078 69.4508C96.1035 70.4573 95.3119 71.3277 94.3009 71.3277H58.3156C57.435 71.3277 56.6976 70.6606 56.6096 69.7845Z" fill="#F0F4FE" fill-opacity="0.2"/>
+  <mask id="mask1_33687_60435" style={{maskType: 'alpha'}} maskUnits="userSpaceOnUse" x="53" y="40" width="44" height="32">
+    <path d="M56.6096 69.7845L53.8535 42.3508C53.7521 41.3412 54.5448 40.4648 55.5595 40.4648H62.7559C63.2633 40.4648 63.7446 40.6895 64.0703 41.0785L66.468 43.941C66.9893 44.5633 67.7593 44.9228 68.5711 44.9228H92.1169C93.0009 44.9228 93.7401 45.595 93.8238 46.4752L96.0078 69.4508C96.1035 70.4573 95.3119 71.3277 94.3009 71.3277H58.3156C57.435 71.3277 56.6976 70.6606 56.6096 69.7845Z" fill="#F0F4FE"/>
+  </mask>
+  <g mask="url(#mask1_33687_60435)">
+    <g filter="url(#filter5_f_33687_60435)">
+      <circle cx="59.322" cy="40.8084" r="15.4314" fill="#B9FAFF"/>
+    </g>
+  </g>
+  <rect x="61.7266" y="53.4961" width="18.5177" height="2.74336" rx="0.685841" fill="#CEDCF6"/>
+  <rect x="62.4062" y="60.3555" width="11.6593" height="2.74336" rx="0.685841" fill="#CEDCF6"/>
+  <path d="M59.0767 34.0097C58.2476 33.5999 56.7207 33.7515 56.7207 33.7515C56.7207 33.7515 57.5181 35.3518 58.4504 35.8866C59.2981 36.3729 60.9114 36.3533 60.9114 36.3533C60.9114 36.3533 60.1207 34.5257 59.0767 34.0097Z" fill="url(#paint6_linear_33687_60435)"/>
+  <path d="M63.2906 34.3064C63.3572 33.7574 62.9649 32.928 62.9649 32.928C62.9649 32.928 62.2156 33.698 62.0988 34.3302C61.9925 34.905 62.3271 35.8094 62.3271 35.8094C62.3271 35.8094 63.2067 34.9976 63.2906 34.3064Z" fill="url(#paint7_linear_33687_60435)"/>
+  <path d="M108.994 42.7749C110.54 41.9201 111.955 39.3643 111.955 39.3643C111.955 39.3643 108.562 38.8796 106.707 39.7606C105.02 40.5616 103.304 43.1097 103.304 43.1097C103.304 43.1097 107.048 43.851 108.994 42.7749Z" fill="url(#paint8_linear_33687_60435)"/>
+  <defs>
+    <filter id="filter3_d_33687_60435" x="53.8457" y="40.4648" width="46.285" height="34.9783" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="2.05752" dy="2.05752"/>
+      <feGaussianBlur stdDeviation="1.02876"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.564706 0 0 0 0 0.67451 0 0 0 0 0.972549 0 0 0 0.2 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_33687_60435"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_33687_60435" result="shape"/>
+    </filter>
+    <filter id="filter5_f_33687_60435" x="-0.00318146" y="-18.5169" width="118.651" height="118.651" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="21.9469" result="effect1_foregroundBlur_33687_60435"/>
+    </filter>
+    <linearGradient id="paint0_linear_33687_60435" x1="77.5017" y1="71.3262" x2="77.5017" y2="86.1595" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E6EEFF"/>
+      <stop offset="1" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_33687_60435" x1="123.117" y1="51.4375" x2="123.117" y2="69.2694" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E7EFFF"/>
+      <stop offset="1" stop-color="#F3F7FD"/>
+    </linearGradient>
+    <linearGradient id="paint2_linear_33687_60435" x1="123.016" y1="78.9663" x2="103.15" y2="78.9663" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D5DDF4"/>
+      <stop offset="1" stop-color="#EDF2FF"/>
+    </linearGradient>
+    <linearGradient id="paint3_linear_33687_60435" x1="38.4748" y1="61.3095" x2="38.4748" y2="70.9113" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E7EFFF"/>
+      <stop offset="1" stop-color="#F3F7FD"/>
+    </linearGradient>
+    <linearGradient id="paint4_linear_33687_60435" x1="38.8078" y1="75.3561" x2="17.0534" y2="77.0003" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D5DDF4"/>
+      <stop offset="1" stop-color="#EDF2FF"/>
+    </linearGradient>
+    <linearGradient id="paint5_linear_33687_60435" x1="88.346" y1="32.0664" x2="88.346" y2="61.0235" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E5FFFF"/>
+      <stop offset="1" stop-color="#90ACF8"/>
+    </linearGradient>
+    <linearGradient id="paint6_linear_33687_60435" x1="58.5152" y1="35.9539" x2="59.1557" y2="34.0174" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#DBE6FF"/>
+      <stop offset="1" stop-color="#F1F5FF"/>
+    </linearGradient>
+    <linearGradient id="paint7_linear_33687_60435" x1="62.0735" y1="34.3802" x2="63.3021" y2="34.3556" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#DBE6FF"/>
+      <stop offset="1" stop-color="#F1F5FF"/>
+    </linearGradient>
+    <linearGradient id="paint8_linear_33687_60435" x1="106.53" y1="39.7891" x2="108.875" y2="42.9064" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#DBE6FF"/>
+      <stop offset="1" stop-color="#F1F5FF"/>
+    </linearGradient>
+  </defs>
+</svg>
+)

package/src/components/output-config-editor.tsx

@@ -105,6 +105,7 @@ function findFieldByName(fields: OutputFieldOption[], fieldName: string): Output
 const VALID_TYPE_MAP: Partial<Record<FieldType, Set<FieldType>>> = {
   'text': new Set(['text', 'textarea']),
   'number': new Set(['text', 'textarea']),
+  'radio': new Set(['radio', 'radiogroup']),
 }
 
 const EMPTY_SET = new Set();

package/src/index.ts

@@ -20,6 +20,7 @@ export type { FormIconOption, LegacySlotRenderer } from './types';
 
 // Icons
 export { CalendarIcon } from './components/icons/calendar-icon';
+export { EmptyAgentIcon } from './components/icons/empty-agent-icon';
 
 // UI primitives (shadcn)
 export * from './components/ui/button';