feat(agent): add variable permission modes behind a feature flag

Author: j15z

apps/sim/.env.example

@@ -203,6 +203,7 @@ CRON_SECRET=your_cron_secret # Use `openssl rand -hex 32` to generate. Authentic
 # FORKING_ENABLED=                                                # Workspace forks
 # CREDENTIAL_GROUPS=                                              # Enterprise managed OAuth collections
 # TABLE_ROW_TTL=                                                  # Table TTL columns and expired-row cleanup
+# AGENT_TOOL_PERMISSION_MODE=false                                # Variable-capable agent tool Permission Mode editor
 # KNOWLEDGE_MEMBER_ACCESS=                                        # Per-member knowledge connectors and hybrid-by-default retrieval
 # ORGANIZATIONS_ENABLED= / NEXT_PUBLIC_ORGANIZATIONS_ENABLED=     # Organizations only
 

apps/sim/app/workspace/[workspaceId]/layout.tsx

@@ -3,6 +3,7 @@ import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
 import { getSession } from '@/lib/auth'
 import { getActiveOrganizationId } from '@/lib/auth/session-response'
+import { isFeatureEnabled } from '@/lib/core/config/feature-flags'
 import { isTableRowTtlEnabled } from '@/lib/table/ttl-availability'
 import { getQueryClient } from '@/app/_shell/providers/get-query-client'
 import { ImpersonationBanner } from '@/app/workspace/[workspaceId]/components/impersonation-banner'
@@ -46,25 +47,32 @@ export default async function WorkspaceLayout({
   }
 
   const activeOrganizationId = getActiveOrganizationId(session)
-  const [cookieStore, initialOrgSettings, , tableRowTtlEnabled] = await Promise.all([
-    cookies(),
-    hostContext.hostOrganizationId
-      ? getOrgWhitelabelSettings(hostContext.hostOrganizationId)
-      : Promise.resolve(null),
-    prefetchWorkspaceSidebar(
-      queryClient,
-      workspaceId,
-      session.user.id,
-      hostContext,
-      activeOrganizationId
-    ),
-    isTableRowTtlEnabled(),
-  ])
+  const [cookieStore, initialOrgSettings, , tableRowTtlEnabled, agentToolPermissionModeEnabled] =
+    await Promise.all([
+      cookies(),
+      hostContext.hostOrganizationId
+        ? getOrgWhitelabelSettings(hostContext.hostOrganizationId)
+        : Promise.resolve(null),
+      prefetchWorkspaceSidebar(
+        queryClient,
+        workspaceId,
+        session.user.id,
+        hostContext,
+        activeOrganizationId
+      ),
+      isTableRowTtlEnabled(),
+      isFeatureEnabled('agent-tool-permission-mode'),
+    ])
   const initialSidebarCollapsed = cookieStore.get('sidebar_collapsed')?.value === '1'
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <FeatureFlagsProvider flags={{ 'table-row-ttl': tableRowTtlEnabled }}>
+      <FeatureFlagsProvider
+        flags={{
+          'table-row-ttl': tableRowTtlEnabled,
+          'agent-tool-permission-mode': agentToolPermissionModeEnabled,
+        }}
+      >
         <WorkspaceHostProvider workspaceId={workspaceId} initialContext={hostContext}>
           <BrandingProvider
             hostOrganizationId={hostContext.hostOrganizationId}

apps/sim/app/workspace/[workspaceId]/providers/feature-flags-provider.tsx

@@ -3,6 +3,7 @@
 import { createContext, type ReactNode, useContext } from 'react'
 
 export interface WorkspaceFeatureFlags {
+  'agent-tool-permission-mode': boolean
   'table-row-ttl': boolean
 }
 

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

@@ -0,0 +1,91 @@
+import { Combobox, Label } from '@sim/emcn'
+import type { CanonicalMode } from '@/lib/workflows/subblocks/visibility'
+import type { StoredTool } from '@/lib/workflows/tool-input/types'
+import { CanonicalModeToggle } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/canonical-mode-toggle'
+import { ShortInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input'
+
+interface ToolUsageControlProps {
+  blockId: string
+  aggregateSubBlockId: string
+  toolIndex: number
+  tool: StoredTool
+  mode: CanonicalMode
+  supportsForce: boolean
+  disabled: boolean
+  onFixedChange: (value: NonNullable<StoredTool['usageControl']>) => void
+  onExpressionChange: (value: string) => void
+  onModeToggle: () => void
+}
+
+const MODE_OPTIONS = [
+  {
+    value: 'auto',
+    label: 'Auto',
+    suffixElement: <span className='text-[var(--text-tertiary)]'>(model decides)</span>,
+  },
+  {
+    value: 'force',
+    label: 'Force',
+    suffixElement: <span className='text-[var(--text-tertiary)]'>(always use)</span>,
+  },
+  {
+    value: 'none',
+    label: 'None',
+    suffixElement: <span className='text-[var(--text-tertiary)]'>(disable tool)</span>,
+  },
+] as const
+
+export function ToolUsageControl({
+  blockId,
+  aggregateSubBlockId,
+  toolIndex,
+  tool,
+  mode,
+  supportsForce,
+  disabled,
+  onFixedChange,
+  onExpressionChange,
+  onModeToggle,
+}: ToolUsageControlProps) {
+  return (
+    <div className='subblock-content flex w-full min-w-0 flex-col gap-2.5'>
+      <div className='flex items-center justify-between gap-1.5 pl-0.5'>
+        <Label>Permission Mode</Label>
+        <CanonicalModeToggle mode={mode} disabled={disabled} onToggle={onModeToggle} />
+      </div>
+      {mode === 'advanced' ? (
+        <ShortInput
+          blockId={blockId}
+          subBlockId={aggregateSubBlockId}
+          config={{
+            id: 'usageControlExpression',
+            title: 'Permission Mode',
+            type: 'short-input',
+          }}
+          value={tool.usageControlExpression ?? ''}
+          onChange={onExpressionChange}
+          placeholder='"auto", "force", or "none"'
+          disabled={disabled}
+          workflowSearchValuePath={[toolIndex, 'usageControlExpression']}
+        />
+      ) : (
+        <Combobox
+          options={MODE_OPTIONS.map((option) => ({
+            ...option,
+            disabled: option.value === 'force' && !supportsForce,
+            suffixElement:
+              option.value === 'force' && !supportsForce ? (
+                <span className='text-[var(--text-tertiary)]'>(not supported by model)</span>
+              ) : (
+                option.suffixElement
+              ),
+            onSelect: () => onFixedChange(option.value),
+          }))}
+          value={tool.usageControl ?? 'auto'}
+          disabled={disabled}
+          aria-label='Permission Mode'
+        />
+      )}
+    </div>
+  )
+}