Add image gen and viz tools

Author: Sg312

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx

@@ -45,15 +45,25 @@ const TEXT_EDITABLE_EXTENSIONS = new Set([
 const IFRAME_PREVIEWABLE_MIME_TYPES = new Set(['application/pdf'])
 const IFRAME_PREVIEWABLE_EXTENSIONS = new Set(['pdf'])
 
-type FileCategory = 'text-editable' | 'iframe-previewable' | 'unsupported'
+const IMAGE_PREVIEWABLE_MIME_TYPES = new Set([
+  'image/png',
+  'image/jpeg',
+  'image/gif',
+  'image/webp',
+])
+const IMAGE_PREVIEWABLE_EXTENSIONS = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp'])
+
+type FileCategory = 'text-editable' | 'iframe-previewable' | 'image-previewable' | 'unsupported'
 
 function resolveFileCategory(mimeType: string | null, filename: string): FileCategory {
   if (mimeType && TEXT_EDITABLE_MIME_TYPES.has(mimeType)) return 'text-editable'
   if (mimeType && IFRAME_PREVIEWABLE_MIME_TYPES.has(mimeType)) return 'iframe-previewable'
+  if (mimeType && IMAGE_PREVIEWABLE_MIME_TYPES.has(mimeType)) return 'image-previewable'
 
   const ext = getFileExtension(filename)
   if (TEXT_EDITABLE_EXTENSIONS.has(ext)) return 'text-editable'
   if (IFRAME_PREVIEWABLE_EXTENSIONS.has(ext)) return 'iframe-previewable'
+  if (IMAGE_PREVIEWABLE_EXTENSIONS.has(ext)) return 'image-previewable'
 
   return 'unsupported'
 }
@@ -115,6 +125,10 @@ export function FileViewer({
     return <IframePreview file={file} />
   }
 
+  if (category === 'image-previewable') {
+    return <ImagePreview file={file} />
+  }
+
   return <UnsupportedPreview file={file} />
 }
 
@@ -265,6 +279,40 @@ function TextEditor({
   const isStreaming = streamingContent !== undefined
   const revealedContent = useStreamingText(content, isStreaming)
 
+  const textareaStuckRef = useRef(true)
+
+  useEffect(() => {
+    if (!isStreaming) return
+    textareaStuckRef.current = true
+
+    const el = textareaRef.current
+    if (!el) return
+
+    const onWheel = (e: WheelEvent) => {
+      if (e.deltaY < 0) textareaStuckRef.current = false
+    }
+
+    const onScroll = () => {
+      const dist = el.scrollHeight - el.scrollTop - el.clientHeight
+      if (dist <= 5) textareaStuckRef.current = true
+    }
+
+    el.addEventListener('wheel', onWheel, { passive: true })
+    el.addEventListener('scroll', onScroll, { passive: true })
+
+    return () => {
+      el.removeEventListener('wheel', onWheel)
+      el.removeEventListener('scroll', onScroll)
+    }
+  }, [isStreaming])
+
+  useEffect(() => {
+    if (!isStreaming || !textareaStuckRef.current) return
+    const el = textareaRef.current
+    if (!el) return
+    el.scrollTop = el.scrollHeight
+  }, [isStreaming, revealedContent])
+
   if (streamingContent === undefined) {
     if (isLoading) {
       return (
@@ -286,8 +334,11 @@ function TextEditor({
     }
   }
 
-  const showEditor = previewMode !== 'preview'
-  const showPreviewPane = previewMode !== 'editor'
+  const previewType = resolvePreviewType(file.type, file.name)
+  const isIframeRendered = previewType === 'html' || previewType === 'svg'
+  const effectiveMode = isStreaming && isIframeRendered ? 'editor' : previewMode
+  const showEditor = effectiveMode !== 'preview'
+  const showPreviewPane = effectiveMode !== 'editor'
 
   return (
     <div ref={containerRef} className='relative flex flex-1 overflow-hidden'>
@@ -351,6 +402,21 @@ function IframePreview({ file }: { file: WorkspaceFileRecord }) {
   )
 }
 
+function ImagePreview({ file }: { file: WorkspaceFileRecord }) {
+  const serveUrl = `/api/files/serve/${encodeURIComponent(file.key)}?context=workspace`
+
+  return (
+    <div className='flex flex-1 items-center justify-center overflow-auto bg-[var(--surface-1)] p-6'>
+      <img
+        src={serveUrl}
+        alt={file.name}
+        className='max-h-full max-w-full rounded-md object-contain'
+        loading='eager'
+      />
+    </div>
+  )
+}
+
 function UnsupportedPreview({ file }: { file: WorkspaceFileRecord }) {
   const ext = getFileExtension(file.name)
 

apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx

@@ -31,6 +31,16 @@ type MessageSegment = TextSegment | AgentGroupSegment | OptionsSegment | Stopped
 
 const SUBAGENT_KEYS = new Set(Object.keys(SUBAGENT_LABELS))
 
+/**
+ * Maps subagent names to the Mothership tool that dispatches them when the
+ * tool name differs from the subagent name (e.g. `workspace_file` → `file_write`).
+ * When a `subagent` block arrives, any trailing dispatch tool in the previous
+ * group is absorbed so it doesn't render as a separate Mothership entry.
+ */
+const SUBAGENT_DISPATCH_TOOLS: Record<string, string> = {
+  file_write: 'workspace_file',
+}
+
 function formatToolName(name: string): string {
   return name
     .replace(/_v\d+$/, '')
@@ -109,10 +119,22 @@ function parseBlocks(blocks: ContentBlock[]): MessageSegment[] {
       if (!block.content) continue
       const key = block.content
       if (group && group.agentName === key) continue
-      if (group) {
+
+      const dispatchToolName = SUBAGENT_DISPATCH_TOOLS[key]
+      if (group && dispatchToolName) {
+        const last = group.items[group.items.length - 1]
+        if (last?.type === 'tool' && last.data.toolName === dispatchToolName) {
+          group.items.pop()
+        }
+        if (group.items.length > 0) {
+          segments.push(group)
+        }
+        group = null
+      } else if (group) {
         segments.push(group)
         group = null
       }
+
       group = {
         type: 'agent_group',
         id: `agent-${key}-${i}`,

apps/sim/app/workspace/[workspaceId]/home/components/message-content/utils.ts

@@ -62,6 +62,7 @@ const TOOL_ICONS: Record<MothershipToolName | SubagentName | 'mothership', IconC
   fast_edit: Pencil,
   context_compaction: Asterisk,
   open_resource: Eye,
+  file_write: File,
 }
 
 export function getAgentIcon(name: string): IconComponent {

apps/sim/app/workspace/[workspaceId]/home/types.ts

@@ -122,6 +122,7 @@ export type SubagentName =
   | 'run'
   | 'agent'
   | 'job'
+  | 'file_write'
 
 export type ToolPhase =
   | 'workspace'
@@ -224,6 +225,7 @@ export const SUBAGENT_LABELS: Record<SubagentName, string> = {
   run: 'Run agent',
   agent: 'Agent manager',
   job: 'Job agent',
+  file_write: 'File Write',
 } as const
 
 export interface ToolUIMetadata {

apps/sim/lib/copilot/orchestrator/tool-executor/index.ts

@@ -741,6 +741,8 @@ const SERVER_TOOLS = new Set<string>([
   'workspace_file',
   'get_execution_summary',
   'get_job_logs',
+  'generate_visualization',
+  'generate_image',
 ])
 
 /**

apps/sim/lib/copilot/orchestrator/tool-executor/integration-tools.ts

@@ -27,6 +27,16 @@ import { resolveToolId } from '@/tools/utils'
 
 const logger = createLogger('CopilotIntegrationTools')
 
+function csvEscapeValue(value: unknown): string {
+  if (value === null || value === undefined) return ''
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value)
+  const str = String(value)
+  if (str.includes(',') || str.includes('"') || str.includes('\n') || str.includes('\r')) {
+    return `"${str.replace(/"/g, '""')}"`
+  }
+  return str
+}
+
 export async function executeIntegrationToolDirect(
   toolCall: ToolCallState,
   toolConfig: ToolConfig,
@@ -207,14 +217,14 @@ export async function executeIntegrationToolDirect(
             continue
           }
           const { rows } = await queryRows(tableId, workspaceId, { limit: 10000 }, 'sandbox-input')
-          const cols = (table.schema as { columns: Array<{ name: string }> }).columns.map(
-            (c) => c.name
-          )
-          const csvLines = [cols.join(',')]
+          const schema = table.schema as { columns: Array<{ name: string; type?: string }> }
+          const cols = schema.columns.map((c) => c.name)
+          const typeComment = `# types: ${schema.columns.map((c) => `${c.name}=${c.type || 'string'}`).join(', ')}`
+          const csvLines = [typeComment, cols.join(',')]
           for (const row of rows) {
             csvLines.push(
               cols
-                .map((c) => JSON.stringify((row.data as Record<string, unknown>)[c] ?? ''))
+                .map((c) => csvEscapeValue((row.data as Record<string, unknown>)[c]))
                 .join(',')
             )
           }

apps/sim/lib/copilot/resource-extraction.ts

@@ -11,6 +11,8 @@ const RESOURCE_TOOL_NAMES = new Set([
   'function_execute',
   'knowledge_base',
   'knowledge',
+  'generate_visualization',
+  'generate_image',
 ])
 
 export function isResourceToolName(toolName: string): boolean {
@@ -117,6 +119,20 @@ export function extractResourcesFromToolResult(
       return []
     }
 
+    case 'generate_visualization':
+    case 'generate_image': {
+      if (result.fileId) {
+        return [
+          {
+            type: 'file',
+            id: result.fileId as string,
+            title: (result.fileName as string) || 'Generated File',
+          },
+        ]
+      }
+      return []
+    }
+
     case 'create_workflow':
     case 'edit_workflow': {
       const workflowId =