fix: list the job token toggle with the other step and flow settings

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014FHGE3ynoAu6yrgeg4kLwL

frontend/src/lib/components/JobTokenScopesSetting.svelte

@@ -8,9 +8,12 @@
 		/** `null`/`undefined`: the job token has the full permissions of the identity it runs as. */
 		value: string[] | null | undefined
 		kind: 'script' | 'flow' | 'step'
+		/** Match the toggles listed around it. */
+		size?: 'xs' | 'sm'
+		textClass?: string
 	}
 
-	let { value = $bindable(), kind }: Props = $props()
+	let { value = $bindable(), kind, size = 'sm', textClass }: Props = $props()
 
 	const OIDC_ONLY = ['oidc:write']
 
@@ -36,7 +39,8 @@
 
 <div class="flex flex-col gap-2">
 	<Toggle
-		size="sm"
+		{size}
+		{textClass}
 		checked={value != null}
 		on:change={() => {
 			if (value != null) {
@@ -45,7 +49,13 @@
 				setMode('oidc_only')
 			}
 		}}
-		options={{ right: 'Restrict the job token' }}
+		options={{
+			right: 'Restrict the job token',
+			rightTooltip:
+				"Limit what the WM_TOKEN of this " +
+				kind +
+				"'s jobs can do through the API, e.g. only mint an OIDC token. Use it for code that handles untrusted input, such as AI agents."
+		}}
 	/>
 	{#if value != null}
 		<ToggleButtonGroup selected={mode} onSelected={(v) => setMode(v)}>

frontend/src/lib/components/ScriptBuilder.svelte

@@ -2069,13 +2069,6 @@
 										</div>
 									</Section>
 									<Section label="Job token">
-										{#snippet header()}
-											<Tooltip>
-												Restrict what the token of this script's jobs (WM_TOKEN) can do through the
-												API, e.g. only mint an OIDC token. Use it for scripts that run untrusted
-												input, such as AI agents.
-											</Tooltip>
-										{/snippet}
 										<JobTokenScopesSetting bind:value={script.job_token_scopes} kind="script" />
 									</Section>
 									<Section

frontend/src/lib/components/flows/content/FlowRunSettings.svelte

@@ -342,6 +342,15 @@
 				</div>
 			{/if}
 
+			<div data-setting="job-token">
+				<JobTokenScopesSetting
+					bind:value={flowModule.job_token_scopes}
+					kind="step"
+					size="xs"
+					textClass="text-xs font-normal text-primary"
+				/>
+			</div>
+
 			{#if loopSubset}
 				<div data-setting="mock">
 					<FlowModuleMock bind:flowModule />
@@ -383,8 +392,4 @@
 			{/if}
 		</section>
 	{/if}
-	<section class="flex flex-col gap-3" data-setting="job-token">
-		{@render sectionHeader('Job token')}
-		<JobTokenScopesSetting bind:value={flowModule.job_token_scopes} kind="step" />
-	</section>
 </div>

frontend/src/lib/components/flows/content/FlowSettings.svelte

@@ -460,10 +460,12 @@
 					}}
 				/>
 
-				<div class="flex flex-col gap-1">
-					<span class="text-xs font-medium text-emphasis">Job token</span>
-					<JobTokenScopesSetting bind:value={flowStore.val.job_token_scopes} kind="flow" />
-				</div>
+				<JobTokenScopesSetting
+					bind:value={flowStore.val.job_token_scopes}
+					kind="flow"
+					size="xs"
+					textClass="font-medium"
+				/>
 
 				<!-- On behalf of last editor section -->
 				<span class="inline-flex gap-2">