fix(chat): bound preview work and preserve readable tables

Author: waleedlatif1

apps/sim/app/api/link-preview/route.test.ts

@@ -0,0 +1,50 @@
+/** @vitest-environment node */
+import { NextRequest } from 'next/server'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({
+  fetch: vi.fn(),
+  get: vi.fn(),
+  set: vi.fn(),
+}))
+vi.mock('@/lib/auth', () => ({ getSession: async () => ({ user: { id: 'test-user' } }) }))
+vi.mock('@/lib/core/rate-limiter/route-helpers', () => ({
+  enforceUserRateLimit: async () => null,
+}))
+vi.mock('@/lib/api/server', () => ({
+  parseRequest: async () => ({
+    success: true,
+    data: { query: { url: 'https://example.com/guide' } },
+  }),
+}))
+vi.mock('@/lib/core/config/redis', () => ({ getRedisClient: () => mocks }))
+vi.mock('@/lib/core/network/context.server', () => ({
+  runWithOutboundOrganization: (_organization: null, run: () => unknown) => run(),
+}))
+vi.mock('@/lib/core/utils/with-route-handler', () => ({
+  withRouteHandler: (handler: unknown) => handler,
+}))
+vi.mock('@/lib/link-preview/fetch-preview', () => ({ fetchLinkPreview: mocks.fetch }))
+
+import { GET } from '@/app/api/link-preview/route'
+
+const complete = { title: 'Guide', description: null, siteName: null }
+
+describe('link preview cache lifetime', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.get.mockResolvedValue(null)
+    mocks.set.mockResolvedValue('OK')
+  })
+
+  it.each([
+    { preview: { ...complete, imageRetryable: true }, ttl: 60 },
+    { preview: complete, ttl: 24 * 60 * 60 },
+    { preview: null, ttl: 60 * 60 },
+  ])('caches $preview for $ttl seconds', async ({ preview, ttl }) => {
+    mocks.fetch.mockResolvedValue(preview)
+    const response = await GET(new NextRequest('https://example.com/api/link-preview'))
+    expect(await response.json()).toEqual({ preview })
+    expect(mocks.set).toHaveBeenCalledWith(expect.any(String), JSON.stringify(preview), 'EX', ttl)
+  })
+})

apps/sim/app/api/link-preview/route.ts

@@ -17,6 +17,7 @@ const logger = createLogger('LinkPreviewAPI')
 
 const CACHE_TTL_SECONDS = 24 * 60 * 60
 const NEGATIVE_CACHE_TTL_SECONDS = 60 * 60
+const RETRYABLE_CACHE_TTL_SECONDS = 60
 const CACHE_KEY_PREFIX = 'link-preview:v2:'
 
 export const GET = withRouteHandler(async (request: NextRequest) => {
@@ -62,7 +63,11 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
   }
 
   if (redis) {
-    const ttl = preview ? CACHE_TTL_SECONDS : NEGATIVE_CACHE_TTL_SECONDS
+    const ttl = preview?.imageRetryable
+      ? RETRYABLE_CACHE_TTL_SECONDS
+      : preview
+        ? CACHE_TTL_SECONDS
+        : NEGATIVE_CACHE_TTL_SECONDS
     try {
       await redis.set(cacheKey, JSON.stringify(preview), 'EX', ttl)
     } catch (error) {

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/editor-lifecycle.test.tsx

@@ -31,6 +31,7 @@ vi.mock('next/navigation', () => ({
   usePathname: () => '/workspace/workspace-1/files',
   useRouter: () => ({ push: vi.fn() }),
 }))
+vi.mock('@/app/_styles/fonts/inter/inter', () => ({ inter: { variable: 'test-inter-variable' } }))
 vi.mock('@/lib/auth/auth-client', () => ({ useSession: () => ({ data: null, isPending: false }) }))
 vi.mock('@/hooks/queries/workspace-files', () => ({
   useUploadWorkspaceFile: () => ({ mutateAsync: uploadFile }),

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

@@ -25,6 +25,7 @@ import {
 } from '@/lib/mothership/chat/selection-context'
 import type { FileDownloadSource } from '@/lib/uploads/client/download'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
+import { inter } from '@/app/_styles/fonts/inter/inter'
 import { FindBar } from '@/app/workspace/[workspaceId]/components/find-bar/find-bar'
 import { FileSaveConflict } from '@/app/workspace/[workspaceId]/files/components/file-viewer/file-save-conflict'
 import { PreviewLoadingFrame } from '@/app/workspace/[workspaceId]/files/components/file-viewer/preview-shared'
@@ -118,8 +119,10 @@ function warnRichMarkdownPasteLimit(reason?: 'paste' | 'formatting') {
  * {@link ReadOnlyPlaceholder} render into, so the two are geometrically identical and the placeholder →
  * live swap never reflows. Shared as one constant to keep them in lockstep.
  */
-const EDITOR_SURFACE_CLASS =
-  'mx-auto flex w-full max-w-[48rem] flex-1 flex-col px-8 py-6 selection:bg-[var(--selection-bg)] selection:text-[var(--text-primary)] dark:selection:bg-[var(--selection-dark)] dark:selection:text-white'
+const EDITOR_SURFACE_CLASS = cn(
+  'mx-auto flex w-full max-w-[48rem] flex-1 flex-col px-8 py-6 selection:bg-[var(--selection-bg)] selection:text-[var(--text-primary)] dark:selection:bg-[var(--selection-dark)] dark:selection:text-white',
+  inter.variable
+)
 
 /** ProseMirror block positions do not correspond to markdown source line numbers. */
 function buildEditorSelectionContext(

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

@@ -282,20 +282,29 @@ interface TableCellContentProps extends ExtraProps {
 
 function TableCellContent({ children, node }: TableCellContentProps) {
   if (hasInteractiveTableContent(node)) {
-    return <div className='whitespace-normal [overflow-wrap:anywhere]'>{children}</div>
+    return (
+      <div className='min-w-[160px] max-w-[320px] whitespace-normal [overflow-wrap:anywhere]'>
+        {children}
+      </div>
+    )
   }
   return (
-    <OverflowText label={extractTextContent(children)} className='[&_code]:whitespace-nowrap'>
-      {children}
-    </OverflowText>
+    <span className='inline-block max-w-full align-middle'>
+      <OverflowText
+        label={extractTextContent(children)}
+        className='[&_code]:whitespace-nowrap [@media(hover:hover)]:max-w-[320px]'
+      >
+        {children}
+      </OverflowText>
+    </span>
   )
 }
 
 const MARKDOWN_COMPONENTS = {
   table({ children }: { children?: React.ReactNode }) {
     return (
       <div className='not-prose my-4 w-full overflow-x-auto [&_strong]:font-semibold'>
-        <table className='w-full table-fixed border-collapse [&_tbody_tr:last-child_td]:border-b-0'>
+        <table className='min-w-full table-auto border-collapse [&_tbody_tr:last-child_td]:border-b-0'>
           {children}
         </table>
       </div>

apps/sim/hooks/queries/link-preview.test.tsx

@@ -0,0 +1,62 @@
+/** @vitest-environment jsdom */
+import { act } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { requestMock } = vi.hoisted(() => ({ requestMock: vi.fn() }))
+vi.mock('@/lib/api/client/request', () => ({ requestJson: requestMock }))
+
+import { linkPreviewKeys, useLinkPreview } from '@/hooks/queries/link-preview'
+
+const URL = 'https://example.com/guide'
+const complete = { title: 'Guide', description: null, siteName: null }
+let client: QueryClient
+let container: HTMLDivElement
+let root: Root
+
+function Preview() {
+  useLinkPreview(URL)
+  return null
+}
+
+beforeEach(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  requestMock.mockReset().mockResolvedValue({ preview: complete })
+  client = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+  client.clear()
+})
+
+describe('link preview freshness', () => {
+  it.each([true, false])(
+    'retries a one-minute-old preview only when its image is retryable: %s',
+    async (retryable) => {
+      client.setQueryData(
+        linkPreviewKeys.detail(URL),
+        { preview: { ...complete, ...(retryable ? { imageRetryable: true } : {}) } },
+        { updatedAt: Date.now() - 61_000 }
+      )
+      await act(async () => {
+        root.render(
+          <QueryClientProvider client={client}>
+            <Preview />
+          </QueryClientProvider>
+        )
+      })
+      expect(requestMock).toHaveBeenCalledTimes(retryable ? 1 : 0)
+      if (retryable) {
+        expect(requestMock).toHaveBeenCalledWith(expect.anything(), {
+          query: { url: URL },
+          signal: expect.any(AbortSignal),
+        })
+      }
+    }
+  )
+})

apps/sim/hooks/queries/link-preview.ts

@@ -4,6 +4,7 @@ import { getLinkPreviewContract, type LinkPreviewResponse } from '@/lib/api/cont
 
 /** Previews are near-immutable page metadata; the server also caches for 24h. */
 export const LINK_PREVIEW_STALE_TIME = 60 * 60 * 1000
+export const LINK_PREVIEW_RETRY_STALE_TIME = 60 * 1000
 
 export const linkPreviewKeys = {
   all: ['link-preview'] as const,
@@ -18,15 +19,18 @@ async function fetchLinkPreview(url: string, signal?: AbortSignal): Promise<Link
 /**
  * OG metadata for an external URL, fetched through the SSRF-hardened
  * `/api/link-preview` proxy. Mounted by the source preview on hover or focus; results are long-lived
- * (client staleTime + 24h server-side Redis cache) and failures are not
- * retried.
+ * (client staleTime + 24h server-side Redis cache). A deferred thumbnail becomes stale after
+ * one minute so a later hover can retry; there is no background polling.
  */
 export function useLinkPreview(url?: string) {
   return useQuery({
     queryKey: linkPreviewKeys.detail(url),
     queryFn: ({ signal }) => fetchLinkPreview(url as string, signal),
     enabled: Boolean(url),
-    staleTime: LINK_PREVIEW_STALE_TIME,
+    staleTime: (query) =>
+      query.state.data?.preview?.imageRetryable
+        ? LINK_PREVIEW_RETRY_STALE_TIME
+        : LINK_PREVIEW_STALE_TIME,
     retry: false,
   })
 }

apps/sim/lib/api/contracts/link-preview.ts

@@ -21,6 +21,12 @@ export const linkPreviewResponseSchema = z.object({
         .max(180_000)
         .regex(/^data:image\/webp;base64,[A-Za-z0-9+/=]+$/)
         .optional(),
+      imageRetryable: z
+        .literal(true)
+        .describe(
+          'The optional image was deferred or temporarily unavailable; retry on later intent.'
+        )
+        .optional(),
     })
     .nullable(),
 })

apps/sim/lib/core/security/egress/validate.ts

@@ -45,6 +45,8 @@ export type EgressValidationResult = EgressValidationSuccess | EgressValidationF
 export interface EgressValidationOptions {
   /** Omit destination-derived values from logs when the URL contains protected context. */
   logDetails?: boolean
+  /** Cancels DNS validation before a guarded connection can begin. */
+  signal?: AbortSignal
 }
 
 type EgressDenial = Extract<EgressDecision, { allowed: false }>
@@ -77,6 +79,7 @@ export async function validateEgressUrl(
   profile: EgressProfile,
   options: EgressValidationOptions = {}
 ): Promise<EgressValidationResult> {
+  options.signal?.throwIfAborted()
   if (!url || typeof url !== 'string') {
     return { isValid: false, error: `${paramName} is required and must be a string` }
   }
@@ -113,8 +116,9 @@ export async function validateEgressUrl(
 
   let addresses: string[]
   try {
-    addresses = (await resolveHostAddresses(host)).addresses
+    addresses = (await resolveHostAddresses(host, { signal: options.signal })).addresses
   } catch (error) {
+    options.signal?.throwIfAborted()
     logger.warn(
       'DNS lookup failed',
       options.logDetails === false

apps/sim/lib/core/security/input-validation.server.test.ts

@@ -26,7 +26,10 @@ vi.mock('@/lib/core/config/env-flags', () => ({
   getProxyUrl: () => undefined,
 }))
 
-import { validateUrlWithDNS } from '@/lib/core/security/input-validation.server'
+import {
+  secureFetchWithValidation,
+  validateUrlWithDNS,
+} from '@/lib/core/security/input-validation.server'
 
 /**
  * Shapes a resolver answer the way `resolveHostAddresses` does, including its
@@ -141,4 +144,25 @@ describe('validateUrlWithDNS address classification', () => {
     })
     expect(JSON.stringify(mockWarn.mock.calls)).not.toContain('credential-host-canary')
   })
+
+  it('forwards fetch cancellation through DNS preflight without treating it as a resolver failure', async () => {
+    const controller = new AbortController()
+    mockResolve.mockImplementationOnce(
+      (_host, options) =>
+        new Promise((_, reject) => {
+          options.signal.addEventListener('abort', () => reject(options.signal.reason), {
+            once: true,
+          })
+        })
+    )
+    const pending = secureFetchWithValidation('https://example.com/preview', {
+      profile: 'contentFetch',
+      signal: controller.signal,
+    })
+    const rejection = expect(pending).rejects.toThrow('Preview deadline')
+    controller.abort(new Error('Preview deadline'))
+    await rejection
+    expect(mockResolve).toHaveBeenCalledWith('example.com', { signal: controller.signal })
+    expect(mockWarn).not.toHaveBeenCalled()
+  })
 })