fix(wand): stop markdown code fences landing in generated code

apps/sim/app/api/wand/route.ts

@@ -328,6 +328,13 @@ export const POST = withRouteHandler(async (req: NextRequest) => {
         '\n\nIMPORTANT: Return ONLY the raw cron expression (e.g., "0 9 * * 1-5"). Do NOT wrap it in markdown code blocks, backticks, or quotes. Do NOT include any explanation or text before or after the expression.'
     }
 
+    // Both the JavaScript and Python function-body prompts share this type, so
+    // the reinforcement stays language-neutral.
+    if (generationType === 'javascript-function-body') {
+      finalSystemPrompt +=
+        '\n\nIMPORTANT: Return ONLY the raw function body. Do NOT wrap it in markdown code blocks (no ```javascript, no ```python, no ```). Do NOT include any explanation before or after the code.'
+    }
+
     if (generationType === 'json-object') {
       finalSystemPrompt +=
         '\n\nIMPORTANT: Return ONLY the raw JSON object. Do NOT wrap it in markdown code blocks (no ```json or ```). Do NOT include any explanation or text before or after the JSON. The response must start with { and end with }.'

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

@@ -67,9 +67,32 @@ IMPORTANT FORMATTING RULES:
 1. Reference Environment Variables: Use the exact syntax {{VARIABLE_NAME}}. Do NOT wrap it in quotes.
 2. Reference Input Parameters/Workflow Variables: Use the exact syntax <variable_name>. Do NOT wrap it in quotes.
 3. Function Body ONLY: Do NOT include the function signature (e.g., 'def my_func(...)') or surrounding braces. Return the final value with 'return'.
-4. Imports: You may add imports as needed (standard library or pip-installed packages) without comments.
+4. Imports: The Python standard library is always available. Third-party packages are available ONLY when the block has a sandbox selected — the sandbox's package list is appended below when one is. Never import a package that is not on that list.
 5. No Markdown: Do NOT include backticks, code fences, or any markdown.
-6. Clarity: Write clean, readable Python code.`
+6. Clarity: Write clean, readable Python code.
+7. No Explanations: Output the raw Python code only — no prose before or after it.
+
+Example Scenario:
+User Prompt: "Fetch user data from an API. Use the User ID passed in as 'userId' and an API Key stored as the 'SERVICE_API_KEY' environment variable."
+
+Generated Code:
+import json
+import urllib.error
+import urllib.request
+
+user_id = <userId>  # Correct: accessing an input parameter without quotes
+api_key = {{SERVICE_API_KEY}}  # Correct: accessing an environment variable without quotes
+url = f"https://api.example.com/users/{user_id}"
+
+request = urllib.request.Request(url, headers={"Authorization": f"Bearer {api_key}"})
+
+try:
+    with urllib.request.urlopen(request) as response:
+        # Return the fetched data, which becomes the block's output
+        return json.loads(response.read().decode())
+except urllib.error.HTTPError as error:
+    # Raising marks the block execution as failed
+    raise Exception(f"API request failed with status {error.code}: {error.read().decode()}")`
 
 /**
  * Line height constant for consistent rendering.
@@ -330,6 +353,9 @@ export const Code = memo(function Code({
       tableId: typeof tableIdValue === 'string' ? tableIdValue : null,
       sandboxId: typeof sandboxIdValue === 'string' ? sandboxIdValue : null,
     },
+    // Keyed off the same value that swaps the prompt below, so history from the
+    // previous language cannot steer the next generation back to it.
+    historyResetKey: typeof languageValue === 'string' ? languageValue : undefined,
     onStreamStart: () => handleStreamStartRef.current?.(),
     onStreamChunk: (chunk: string) => handleStreamChunkRef.current?.(chunk),
     onGeneratedContent: (content: string) => handleGeneratedContentRef.current?.(content),

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-wand.ts

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useLayoutEffect, useRef, useState } from 'react'
 import { toast } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { filterUndefined } from '@sim/utils/object'
@@ -8,6 +8,7 @@ import { requestRaw } from '@/lib/api/client'
 import { isApiClientError } from '@/lib/api/client/errors'
 import { wandGenerateStreamContract } from '@/lib/api/contracts'
 import { readSSEStream } from '@/lib/core/utils/sse'
+import { shouldStripCodeFences, stripCodeFences } from '@/lib/wand/strip-code-fences'
 import type { GenerationType } from '@/blocks/types'
 import { subscriptionKeys } from '@/hooks/queries/subscription'
 import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
@@ -100,20 +101,26 @@ interface UseWandProps {
   wandConfig?: WandConfig
   currentValue?: string
   contextParams?: WandContextParams
+  /**
+   * Clears the conversation history whenever this value changes. Pass anything
+   * that invalidates prior turns — a Function block switching language rewrites
+   * `wandConfig.prompt`, but replayed history would keep steering the model back
+   * to the previous language.
+   */
+  historyResetKey?: string
   onGeneratedContent: (content: string) => void
   onStreamChunk?: (chunk: string) => void
   onStreamStart?: () => void
-  onGenerationComplete?: (prompt: string, generatedContent: string) => void
 }
 
 export function useWand({
   wandConfig,
   currentValue,
   contextParams,
+  historyResetKey,
   onGeneratedContent,
   onStreamChunk,
   onStreamStart,
-  onGenerationComplete,
 }: UseWandProps) {
   const queryClient = useQueryClient()
   const { navigateToSettings } = useSettingsNavigation()
@@ -127,6 +134,35 @@ export function useWand({
 
   const [conversationHistory, setConversationHistory] = useState<ChatMessage[]>([])
 
+  /**
+   * Adjusted during render rather than in an effect so a generation started in
+   * the same commit as the change can never send the stale history. History is
+   * already empty on mount, so seeding the tracker with the current key
+   * correctly makes the first render a no-op.
+   */
+  const [prevHistoryResetKey, setPrevHistoryResetKey] = useState(historyResetKey)
+  const [historyEpoch, setHistoryEpoch] = useState(0)
+  if (prevHistoryResetKey !== historyResetKey) {
+    setPrevHistoryResetKey(historyResetKey)
+    setConversationHistory([])
+    setHistoryEpoch((epoch) => epoch + 1)
+  }
+
+  /**
+   * Mirrors {@link historyEpoch} for the in-flight request to read on completion.
+   * A request that started before a reset must not append its turn to the fresh
+   * history — its prompt and reply belong to the superseded context.
+   *
+   * Synced in a layout effect, not a passive one: passive effects flush in a later
+   * task, so a request settling between the reset's commit and that flush would
+   * still read the old epoch and append anyway. Layout effects run synchronously
+   * during commit, before any promise continuation can observe the ref.
+   */
+  const historyEpochRef = useRef(historyEpoch)
+  useLayoutEffect(() => {
+    historyEpochRef.current = historyEpoch
+  }, [historyEpoch])
+
   const abortControllerRef = useRef<AbortController | null>(null)
 
   const showPromptInline = useCallback(() => {
@@ -171,6 +207,9 @@ export function useWand({
       setError(null)
       setPromptInputValue('')
 
+      /** The context this request belongs to; a reset while it streams retires it. */
+      const startedHistoryEpoch = historyEpochRef.current
+
       abortControllerRef.current = new AbortController()
 
       if (onStreamStart) {
@@ -224,25 +263,37 @@ export function useWand({
           signal: abortControllerRef.current?.signal,
         })
 
-        if (accumulatedContent) {
-          onGeneratedContent(accumulatedContent)
-
-          if (wandConfig?.maintainHistory) {
+        /**
+         * Sanitized once the full response is known, then written back over the
+         * streamed text. Doing it per-chunk would mean guessing whether a
+         * trailing backtick run opens a fence or is part of the code, so the
+         * editor may briefly show a fence that the final value does not.
+         */
+        const generatedContent = shouldStripCodeFences(wandConfig?.generationType)
+          ? stripCodeFences(accumulatedContent)
+          : accumulatedContent
+
+        if (generatedContent) {
+          onGeneratedContent(generatedContent)
+
+          /**
+           * The sanitized form goes into history so a single fenced reply cannot
+           * become the in-context example for every later turn. Skipped entirely
+           * when a reset retired this request's context mid-flight.
+           */
+          if (wandConfig?.maintainHistory && historyEpochRef.current === startedHistoryEpoch) {
             setConversationHistory((prev) => [
               ...prev,
               { role: 'user', content: currentPrompt },
-              { role: 'assistant', content: accumulatedContent },
+              { role: 'assistant', content: generatedContent },
             ])
           }
-
-          if (onGenerationComplete) {
-            onGenerationComplete(currentPrompt, accumulatedContent)
-          }
         }
 
         logger.debug('Wand generation completed', {
           prompt,
-          contentLength: accumulatedContent.length,
+          contentLength: generatedContent.length,
+          strippedFences: generatedContent !== accumulatedContent,
         })
 
         setTimeout(() => {
@@ -282,7 +333,6 @@ export function useWand({
       onGeneratedContent,
       onStreamChunk,
       onStreamStart,
-      onGenerationComplete,
       queryClient,
       contextParams?.tableId,
       contextParams?.sandboxId,

apps/sim/lib/wand/strip-code-fences.test.ts

@@ -0,0 +1,110 @@
+/**
+ * @vitest-environment node
+ */
+import { describe, expect, it } from 'vitest'
+import { shouldStripCodeFences, stripCodeFences } from '@/lib/wand/strip-code-fences'
+
+describe('stripCodeFences', () => {
+  it('leaves unfenced code untouched', () => {
+    const code = 'const total = <a> + <b>;\nreturn total;'
+    expect(stripCodeFences(code)).toBe(code)
+  })
+
+  it('unwraps a fully wrapped response', () => {
+    expect(stripCodeFences('```python\nresult = <num1> + <num2>\nreturn result\n```')).toBe(
+      'result = <num1> + <num2>\nreturn result'
+    )
+  })
+
+  it('unwraps a response with no closing fence', () => {
+    expect(stripCodeFences('```javascript\nconst x = 1;\nreturn x;')).toBe(
+      'const x = 1;\nreturn x;'
+    )
+  })
+
+  it('unwraps an untagged fence', () => {
+    expect(stripCodeFences('```\nreturn 1;\n```')).toBe('return 1;')
+  })
+
+  it('tolerates leading whitespace before the opening fence', () => {
+    expect(stripCodeFences('\n  ```python\nreturn 1\n```')).toBe('return 1')
+  })
+
+  it('preserves indentation inside the fence', () => {
+    const fenced = '```python\nif <flag>:\n    return "yes"\nreturn "no"\n```'
+    expect(stripCodeFences(fenced)).toBe('if <flag>:\n    return "yes"\nreturn "no"')
+  })
+
+  it('preserves fence lines embedded inside the fenced body', () => {
+    const fenced = '```javascript\nconst md = `\n```\nhello\n```\n`;\nreturn md;\n```'
+    expect(stripCodeFences(fenced)).toBe('const md = `\n```\nhello\n```\n`;\nreturn md;')
+  })
+
+  it('keeps every line when a body with nested fences is truncated mid-response', () => {
+    const truncated = '```javascript\nconst md = `\n```\nhello\n`;\nreturn md;'
+    expect(stripCodeFences(truncated)).toBe('const md = `\n```\nhello\n`;\nreturn md;')
+  })
+
+  it('treats a trailing bare fence as the closer even when the body was truncated at one', () => {
+    // Irreducibly ambiguous: a trailing bare fence closes the wrapper in every
+    // well-formed response, and is content only when generation stopped exactly
+    // at an embedded delimiter. Declining to strip it would leave a stray fence
+    // in the common case, which is the bug this util exists to fix.
+    expect(stripCodeFences('```javascript\nconst md = `\n```')).toBe('const md = `')
+  })
+
+  it('preserves a fenced docstring inside a Python body', () => {
+    const fenced = '```python\ntemplate = """\n```sql\nSELECT 1\n```\n"""\nreturn template\n```'
+    expect(stripCodeFences(fenced)).toBe(
+      'template = """\n```sql\nSELECT 1\n```\n"""\nreturn template'
+    )
+  })
+
+  it('keeps everything between the outer delimiters for a multi-block answer', () => {
+    // Prose survives rather than risk dropping code between two delimiters that
+    // may be a nested literal instead of a block boundary.
+    const fenced = '```js\nconst a = 1;\n```\nThen send it:\n```js\nreturn a;\n```'
+    expect(stripCodeFences(fenced)).toBe('const a = 1;\n```\nThen send it:\n```js\nreturn a;')
+  })
+
+  it('does not touch code that merely contains a fence later', () => {
+    const code = 'const doc = `\n```json\n{"a":1}\n```\n`;\nreturn doc;'
+    expect(stripCodeFences(code)).toBe(code)
+  })
+
+  it('returns the original when stripping would leave nothing', () => {
+    const empty = '```python\n```'
+    expect(stripCodeFences(empty)).toBe(empty)
+  })
+
+  it('is idempotent', () => {
+    const once = stripCodeFences('```python\nreturn <x>\n```')
+    expect(stripCodeFences(once)).toBe(once)
+  })
+
+  it('handles an empty string', () => {
+    expect(stripCodeFences('')).toBe('')
+  })
+})
+
+describe('shouldStripCodeFences', () => {
+  it('strips for code and structured value types', () => {
+    expect(shouldStripCodeFences('javascript-function-body')).toBe(true)
+    expect(shouldStripCodeFences('custom-tool-schema')).toBe(true)
+    expect(shouldStripCodeFences('json-object')).toBe(true)
+    expect(shouldStripCodeFences('cron-expression')).toBe(true)
+  })
+
+  it('does not strip free-form prose', () => {
+    expect(shouldStripCodeFences('system-prompt')).toBe(false)
+  })
+
+  it('does not strip when no generation type is declared', () => {
+    expect(shouldStripCodeFences(undefined)).toBe(false)
+    expect(shouldStripCodeFences('')).toBe(false)
+  })
+
+  it('does not strip an unrecognized type', () => {
+    expect(shouldStripCodeFences('something-new')).toBe(false)
+  })
+})