improvement(agent): align permission controls with shared components

Author: j15z

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/usage-control.tsx

@@ -1,4 +1,4 @@
-import { Combobox, cn, Label, Tooltip } from '@sim/emcn'
+import { Button, ChipCombobox, cn, Label, Tooltip } from '@sim/emcn'
 import { ArrowLeftRight } from '@sim/emcn/icons'
 import type { CanonicalMode } from '@/lib/workflows/subblocks/visibility'
 import type { StoredTool } from '@/lib/workflows/tool-input/types'
@@ -55,9 +55,11 @@ export function ToolUsageControl({
         <Label>Permission Mode</Label>
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
-            <button
+            <Button
               type='button'
-              className='flex size-[12px] shrink-0 cursor-pointer items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
+              variant='ghost'
+              size='icon'
+              className='shrink-0'
               onClick={onModeToggle}
               disabled={disabled}
               aria-label={toggleLabel}
@@ -70,7 +72,7 @@ export function ToolUsageControl({
                     : 'text-[var(--text-secondary)]'
                 )}
               />
-            </button>
+            </Button>
           </Tooltip.Trigger>
           <Tooltip.Content side='top'>{toggleLabel}</Tooltip.Content>
         </Tooltip.Root>
@@ -91,7 +93,7 @@ export function ToolUsageControl({
           workflowSearchValuePath={[toolIndex, 'usageControlExpression']}
         />
       ) : (
-        <Combobox
+        <ChipCombobox
           options={MODE_OPTIONS.map((option) => ({
             ...option,
             disabled: option.value === 'force' && !supportsForce,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx

@@ -1014,18 +1014,18 @@ export const ToolInput = memo(function ToolInput({
     [isPreview, disabled, selectedTools, setStoreValue]
   )
 
-  const handleUsageControlExpressionChange = useCallback(
-    (toolIndex: number, usageControlExpression: string) => {
-      if (isPreview || disabled) return
+  const handleUsageControlExpressionChange = (
+    toolIndex: number,
+    usageControlExpression: string
+  ) => {
+    if (isPreview || disabled) return
 
-      setStoreValue(
-        selectedTools.map((tool, index) =>
-          index === toolIndex ? { ...tool, usageControlExpression } : tool
-        )
+    setStoreValue(
+      selectedTools.map((tool, index) =>
+        index === toolIndex ? { ...tool, usageControlExpression } : tool
       )
-    },
-    [isPreview, disabled, selectedTools, setStoreValue]
-  )
+    )
+  }
 
   const [localExpanded, setLocalExpanded] = useState<Record<number, boolean>>({})