v0.5.76: posthog improvements, readme updates

Next.js rewrites can strip request bodies for large payloads (1MB+),
causing 400 errors from CloudFront. PostHog session recordings require
up to 64MB per message. Moving the proxy to middleware ensures proper
body passthrough.

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

README.md

@@ -172,31 +172,6 @@ Key environment variables for self-hosted deployments. See [`.env.example`](apps
 | `API_ENCRYPTION_KEY` | Yes | Encrypts API keys (`openssl rand -hex 32`) |
 | `COPILOT_API_KEY` | No | API key from sim.ai for Copilot features |
 
-## Troubleshooting
-
-### Ollama models not showing in dropdown (Docker)
-
-If you're running Ollama on your host machine and Sim in Docker, change `OLLAMA_URL` from `localhost` to `host.docker.internal`:
-
-```bash
-OLLAMA_URL=http://host.docker.internal:11434 docker compose -f docker-compose.prod.yml up -d
-```
-
-See [Using an External Ollama Instance](#using-an-external-ollama-instance) for details.
-
-### Database connection issues
-
-Ensure PostgreSQL has the pgvector extension installed. When using Docker, wait for the database to be healthy before running migrations.
-
-### Port conflicts
-
-If ports 3000, 3002, or 5432 are in use, configure alternatives:
-
-```bash
-# Custom ports
-NEXT_PUBLIC_APP_URL=http://localhost:3100 POSTGRES_PORT=5433 docker compose up -d
-```
-
 ## Tech Stack
 
 - **Framework**: [Next.js](https://nextjs.org/) (App Router)

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { createElement, useCallback, useEffect, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { ExternalLink, Users } from 'lucide-react'
 import { Button, Combobox } from '@/components/emcn/components'
@@ -203,7 +203,7 @@ export function CredentialSelector({
     if (!baseProviderConfig) {
       return <ExternalLink className='h-3 w-3' />
     }
-    return baseProviderConfig.icon({ className: 'h-3 w-3' })
+    return createElement(baseProviderConfig.icon, { className: 'h-3 w-3' })
   }, [])
 
   const getProviderName = useCallback((providerName: OAuthProvider) => {

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { createElement, useCallback, useEffect, useMemo, useState } from 'react'
 import { ExternalLink } from 'lucide-react'
 import { Button, Combobox } from '@/components/emcn/components'
 import {
@@ -22,7 +22,7 @@ const getProviderIcon = (providerName: OAuthProvider) => {
   if (!baseProviderConfig) {
     return <ExternalLink className='h-3 w-3' />
   }
-  return baseProviderConfig.icon({ className: 'h-3 w-3' })
+  return createElement(baseProviderConfig.icon, { className: 'h-3 w-3' })
 }
 
 const getProviderName = (providerName: OAuthProvider) => {

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/integrations/integrations.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { createElement, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { Check, ChevronDown, ExternalLink, Search } from 'lucide-react'
 import { useRouter, useSearchParams } from 'next/navigation'
@@ -339,9 +339,7 @@ export function Integrations({ onOpenChange, registerCloseHandler }: Integration
                     >
                       <div className='flex items-center gap-[12px]'>
                         <div className='flex h-9 w-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-[6px] bg-[var(--surface-5)]'>
-                          {typeof service.icon === 'function'
+                          {createElement(service.icon, { className: 'h-4 w-4' })}
-                            ? service.icon({ className: 'h-4 w-4' })
-                            : service.icon}
                         </div>
                         <div className='flex flex-col justify-center gap-[1px]'>
                           <span className='font-medium text-[14px]'>{service.name}</span>

apps/sim/next.config.ts

@@ -325,18 +325,6 @@ const nextConfig: NextConfig = {
 
     return redirects
   },
-  async rewrites() {
-    return [
-      {
-        source: '/ingest/static/:path*',
-        destination: 'https://us-assets.i.posthog.com/static/:path*',
-      },
-      {
-        source: '/ingest/:path*',
-        destination: 'https://us.i.posthog.com/:path*',
-      },
-    ]
-  },
 }
 
 export default nextConfig

apps/sim/proxy.ts

@@ -134,6 +134,24 @@ function handleSecurityFiltering(request: NextRequest): NextResponse | null {
 export async function proxy(request: NextRequest) {
   const url = request.nextUrl
 
+  if (url.pathname.startsWith('/ingest/')) {
+    const hostname = url.pathname.startsWith('/ingest/static/')
+      ? 'us-assets.i.posthog.com'
+      : 'us.i.posthog.com'
+
+    const targetPath = url.pathname.replace(/^\/ingest/, '')
+    const targetUrl = `https://${hostname}${targetPath}${url.search}`
+
+    return NextResponse.rewrite(new URL(targetUrl), {
+      request: {
+        headers: new Headers({
+          ...Object.fromEntries(request.headers),
+          host: hostname,
+        }),
+      },
+    })
+  }
+
   const sessionCookie = getSessionCookie(request)
   const hasActiveSession = isAuthDisabled || !!sessionCookie
 
@@ -195,6 +213,7 @@ export async function proxy(request: NextRequest) {
 
 export const config = {
   matcher: [
+    '/ingest/:path*', // PostHog proxy for session recording
     '/', // Root path for self-hosted redirect logic
     '/terms', // Whitelabel terms redirect
     '/privacy', // Whitelabel privacy redirect