feat(sandboxes): create a sandbox from the picker, and fix three UI papercuts

The Function block's sandbox field now pins a "Create Sandbox" row above its
options, matching the "Create Skill" / "Create Tool" rows it sits beside, so
authoring a package list no longer means leaving the workflow for Settings. The
row is declared by the field (`createAction`) rather than hardcoded by id;
block configs are read by the serializer and executor, so the name maps to a
modal in the picker rather than carrying a component.

Two things the modal has to get right. It seeds the new sandbox's language from
the sibling the list is scoped by, or a sandbox created off a JavaScript block
would land in the Python list and vanish. And the created option is held locally
until a real fetch carries it, or the field would sit on a raw uuid until
hydration answered.

Also:
- The Sandboxes icon was the Logs block's icon (`blocks/blocks/logs.ts`), in
  both the settings nav and the list rows. It is the Function block's now.
- "Default image (no extra packages)" claimed something untrue: E2B and Daytona
  base images both ship with packages installed.
- A new sandbox opened in Python while the Function block defaults to
  JavaScript. The test pins the two together rather than the literal.

Draft shape and helpers moved out of the editor component into `utils.ts` —
three consumers now, and it makes the defaults testable without a DOM.

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-create-modal.tsx

@@ -0,0 +1,181 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  ChipDropdown,
+  ChipModal,
+  ChipModalBody,
+  ChipModalError,
+  ChipModalField,
+  ChipModalFooter,
+  ChipModalHeader,
+} from '@sim/emcn'
+import { getErrorMessage } from '@sim/utils/errors'
+import { useParams } from 'next/navigation'
+import { canMutateWorkspaceSettingsSection } from '@/components/settings/navigation'
+import type { SandboxDependencyIssue } from '@/lib/api/contracts/sandboxes'
+import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
+import {
+  DEPENDENCY_PLACEHOLDERS,
+  emptyDraft,
+  extractIssues,
+  LANGUAGE_OPTIONS,
+  type SandboxDraft,
+  type SandboxLanguage,
+  toSubmittedLines,
+} from '@/app/workspace/[workspaceId]/settings/components/sandboxes/utils'
+import { type Sandbox, useCreateSandbox, useSandboxes } from '@/hooks/queries/sandboxes'
+
+const NOT_ENTITLED_MESSAGE = 'Sandboxes require an active Max plan.'
+const NOT_ADMIN_MESSAGE = 'Only workspace admins can create sandboxes.'
+
+interface SandboxCreateModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /**
+   * Seeds the language of the new sandbox. Pickers scope their list to one
+   * language, so without this a sandbox created from a JavaScript block could
+   * land in the Python list and never appear.
+   */
+  defaultLanguage?: SandboxLanguage
+  /** Receives the created sandbox so the caller can select it. */
+  onCreated?: (sandbox: Sandbox) => void
+}
+
+/**
+ * Creates a sandbox from wherever one is being picked, so authoring a package
+ * list never means leaving the workflow for Settings.
+ *
+ * Editing stays in Settings — this is deliberately create-only, matching the
+ * "Create Skill" / "Create Tool" rows it sits beside.
+ */
+export function SandboxCreateModal({
+  open,
+  onOpenChange,
+  defaultLanguage,
+  onCreated,
+}: SandboxCreateModalProps) {
+  const params = useParams()
+  const workspaceId = params.workspaceId as string
+
+  // Keyed off `open` so the list is not fetched by every mounted picker, only by
+  // one the user actually opened. It shares the picker's cache entry either way.
+  const { data } = useSandboxes(open ? workspaceId : undefined)
+  const permissions = useUserPermissionsContext()
+  const canAdmin = canMutateWorkspaceSettingsSection('sandboxes', permissions)
+  // Assume entitled until the list answers — a flash of the upgrade copy on a
+  // workspace that has it would be worse than a late, accurate one.
+  const entitled = data?.entitled ?? true
+
+  const createSandbox = useCreateSandbox()
+
+  const [draft, setDraft] = useState<SandboxDraft>(emptyDraft)
+  const [issues, setIssues] = useState<SandboxDependencyIssue[]>([])
+  const [error, setError] = useState<string | null>(null)
+
+  // The modal stays mounted for its exit animation, so each opening has to clear
+  // what the last one left behind.
+  const [wasOpen, setWasOpen] = useState(open)
+  if (wasOpen !== open) {
+    setWasOpen(open)
+    if (open) {
+      setDraft({ ...emptyDraft(), ...(defaultLanguage ? { language: defaultLanguage } : {}) })
+      setIssues([])
+      setError(null)
+    }
+  }
+
+  const blockedReason = !canAdmin ? NOT_ADMIN_MESSAGE : !entitled ? NOT_ENTITLED_MESSAGE : null
+  const saving = createSandbox.isPending
+  const disabled = saving || blockedReason !== null
+
+  const handleCreate = async () => {
+    setIssues([])
+    setError(null)
+    try {
+      const { sandbox } = await createSandbox.mutateAsync({
+        workspaceId,
+        name: draft.name.trim(),
+        language: draft.language,
+        dependencies: toSubmittedLines(draft.dependencies),
+      })
+      onCreated?.(sandbox)
+      onOpenChange(false)
+    } catch (caught) {
+      const lineIssues = extractIssues(caught)
+      if (lineIssues.length > 0) {
+        setIssues(lineIssues)
+        return
+      }
+      setError(getErrorMessage(caught, 'Failed to create sandbox'))
+    }
+  }
+
+  return (
+    <ChipModal open={open} onOpenChange={onOpenChange} srTitle='Create sandbox'>
+      <ChipModalHeader onClose={() => onOpenChange(false)}>Create sandbox</ChipModalHeader>
+
+      <ChipModalBody>
+        <ChipModalField
+          type='input'
+          title='Name'
+          value={draft.name}
+          onChange={(name) => setDraft((prev) => ({ ...prev, name }))}
+          placeholder='bigquery-etl'
+          maxLength={64}
+          autoComplete='off'
+          required
+          disabled={disabled}
+        />
+
+        <ChipModalField type='custom' title='Language'>
+          <ChipDropdown
+            value={draft.language}
+            onChange={(language) =>
+              setDraft((prev) => ({ ...prev, language: language as SandboxLanguage }))
+            }
+            options={LANGUAGE_OPTIONS.map((option) => ({
+              label: option.label,
+              value: option.value,
+            }))}
+            disabled={disabled}
+            aria-label='Language'
+          />
+        </ChipModalField>
+
+        <ChipModalField
+          type='textarea'
+          title='Dependencies'
+          value={draft.dependencies}
+          onChange={(dependencies) => setDraft((prev) => ({ ...prev, dependencies }))}
+          placeholder={DEPENDENCY_PLACEHOLDERS[draft.language]}
+          rows={8}
+          disabled={disabled}
+          hint='One per line. Version pins are optional.'
+          error={
+            issues.length > 0 ? (
+              <>
+                {issues.map((issue) => (
+                  <span key={issue.line} className='block'>
+                    Line {issue.line}: {issue.reason}
+                  </span>
+                ))}
+              </>
+            ) : undefined
+          }
+        />
+
+        <ChipModalError>{blockedReason ?? error}</ChipModalError>
+      </ChipModalBody>
+
+      <ChipModalFooter
+        onCancel={() => onOpenChange(false)}
+        primaryAction={{
+          label: saving ? 'Creating...' : 'Create',
+          onClick: () => void handleCreate(),
+          disabled: disabled || draft.name.trim().length === 0,
+        }}
+      />
+    </ChipModal>
+  )
+}

apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-editor.tsx

@@ -3,44 +3,15 @@
 import { useMemo, useState } from 'react'
 import { Chip, ChipDropdown, ChipInput, ChipTextarea, cn } from '@sim/emcn'
 import type { SandboxDependencyIssue } from '@/lib/api/contracts/sandboxes'
+import {
+  DEPENDENCY_PLACEHOLDERS,
+  LANGUAGE_OPTIONS,
+  type SandboxDraft,
+  type SandboxLanguage,
+} from '@/app/workspace/[workspaceId]/settings/components/sandboxes/utils'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import type { Sandbox } from '@/hooks/queries/sandboxes'
 
-const LANGUAGE_OPTIONS = [
-  { label: 'JavaScript', value: 'javascript' },
-  { label: 'Python', value: 'python' },
-] as const
-
-/**
- * Placeholders double as the format documentation, so they swap with the
- * language rather than describing one syntax for both.
- */
-const PLACEHOLDERS: Record<SandboxLanguage, string> = {
-  python: 'google-cloud-bigquery==3.25.0\npyairtable>=3.0\npandas',
-  javascript: 'axios@^1.7.0\n@aws-sdk/client-s3\nzod',
-}
-
-type SandboxLanguage = Sandbox['language']
-
-export interface SandboxDraft {
-  name: string
-  language: SandboxLanguage
-  /** Raw textarea contents — one dependency per line, comments allowed. */
-  dependencies: string
-}
-
-export function draftFromSandbox(sandbox: Sandbox): SandboxDraft {
-  return {
-    name: sandbox.name,
-    language: sandbox.language,
-    dependencies: sandbox.dependencies.join('\n'),
-  }
-}
-
-export function emptyDraft(): SandboxDraft {
-  return { name: '', language: 'python', dependencies: '' }
-}
-
 interface SandboxEditorProps {
   draft: SandboxDraft
   onChange: (draft: SandboxDraft) => void
@@ -101,7 +72,7 @@ export function SandboxEditor({
           <ChipTextarea
             value={draft.dependencies}
             onChange={(event) => onChange({ ...draft, dependencies: event.target.value })}
-            placeholder={PLACEHOLDERS[draft.language]}
+            placeholder={DEPENDENCY_PLACEHOLDERS[draft.language]}
             rows={8}
             disabled={disabled}
             error={issues.length > 0}

apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/sandboxes.tsx

@@ -2,26 +2,31 @@
 
 import { useCallback, useMemo, useState } from 'react'
 import { Chip, toast } from '@sim/emcn'
-import { ArrowLeft, ArrowRight, Library, Plus } from '@sim/emcn/icons'
+import { ArrowLeft, ArrowRight, Plus } from '@sim/emcn/icons'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useParams } from 'next/navigation'
 import { useQueryState } from 'nuqs'
+import { CodeIcon } from '@/components/icons'
 import { canMutateWorkspaceSettingsSection } from '@/components/settings/navigation'
 import type { SandboxDependencyIssue } from '@/lib/api/contracts/sandboxes'
 import { UnsavedChangesModal } from '@/app/workspace/[workspaceId]/components/credential-detail'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { RowActionsMenu } from '@/app/workspace/[workspaceId]/settings/components/row-actions-menu'
 import {
-  draftFromSandbox,
-  emptyDraft,
-  type SandboxDraft,
   SandboxEditor,
   SandboxStatus,
 } from '@/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-editor'
 import {
   sandboxIdParam,
   sandboxIdUrlKeys,
 } from '@/app/workspace/[workspaceId]/settings/components/sandboxes/search-params'
+import {
+  draftFromSandbox,
+  emptyDraft,
+  extractIssues,
+  type SandboxDraft,
+  toSubmittedLines,
+} from '@/app/workspace/[workspaceId]/settings/components/sandboxes/utils'
 import { saveDiscardActions } from '@/app/workspace/[workspaceId]/settings/components/save-discard-actions/save-discard-actions'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
@@ -38,16 +43,6 @@ import {
 } from '@/hooks/queries/sandboxes'
 import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
 
-/** Splits the textarea into one entry per row so a rejection keeps its line number. */
-function toSubmittedLines(dependencies: string): string[] {
-  return dependencies.split('\n')
-}
-
-function extractIssues(error: unknown): SandboxDependencyIssue[] {
-  const issues = (error as { body?: { issues?: SandboxDependencyIssue[] } })?.body?.issues
-  return Array.isArray(issues) ? issues : []
-}
-
 export function Sandboxes() {
   const params = useParams()
   const workspaceId = params.workspaceId as string
@@ -286,7 +281,7 @@ export function Sandboxes() {
             {filtered.map((sandbox) => (
               <SettingsResourceRow
                 key={sandbox.id}
-                icon={<Library />}
+                icon={<CodeIcon />}
                 title={
                   <button
                     type='button'

apps/sim/app/workspace/[workspaceId]/settings/components/sandboxes/utils.test.ts

@@ -0,0 +1,57 @@
+/**
+ * @vitest-environment node
+ */
+import { describe, expect, it } from 'vitest'
+import {
+  emptyDraft,
+  extractIssues,
+  LANGUAGE_OPTIONS,
+  toSubmittedLines,
+} from '@/app/workspace/[workspaceId]/settings/components/sandboxes/utils'
+import { FunctionBlock } from '@/blocks/blocks/function'
+
+const languageField = FunctionBlock.subBlocks.find((subBlock) => subBlock.id === 'language')
+const sandboxField = FunctionBlock.subBlocks.find((subBlock) => subBlock.id === 'sandboxId')
+
+describe('sandbox draft defaults', () => {
+  it('starts a new sandbox in the language the Function block itself defaults to', () => {
+    const blockDefault = typeof languageField?.value === 'function' ? languageField.value() : null
+    expect(blockDefault).toBe('javascript')
+    expect(emptyDraft().language).toBe(blockDefault)
+  })
+
+  it('offers languages in the Function block dropdown order', () => {
+    expect(LANGUAGE_OPTIONS.map((option) => option.value)).toEqual(
+      languageField?.options?.map((option) => (typeof option === 'string' ? option : option.id))
+    )
+  })
+
+  it('starts empty so nothing is submitted by accident', () => {
+    expect(emptyDraft()).toEqual({ name: '', language: 'javascript', dependencies: '' })
+  })
+})
+
+describe('sandbox picker create action', () => {
+  it('declares the inline create row the picker renders', () => {
+    expect(sandboxField?.createAction).toBe('sandbox')
+  })
+})
+
+describe('toSubmittedLines', () => {
+  it('keeps blank rows so a rejection can address the line the user typed on', () => {
+    expect(toSubmittedLines('axios\n\nzod')).toEqual(['axios', '', 'zod'])
+  })
+})
+
+describe('extractIssues', () => {
+  it('reads the per-line rejections off a failed save', () => {
+    const error = { body: { issues: [{ line: 2, reason: 'not a package name' }] } }
+    expect(extractIssues(error)).toEqual([{ line: 2, reason: 'not a package name' }])
+  })
+
+  it('returns nothing for an error that carries no issues', () => {
+    expect(extractIssues(new Error('network'))).toEqual([])
+    expect(extractIssues({ body: { issues: 'nope' } })).toEqual([])
+    expect(extractIssues(undefined)).toEqual([])
+  })
+})