feat(tables): clickable URL cells with favicons using tldts

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render.tsx

@@ -1,29 +1,14 @@
 'use client'
 
 import type React from 'react'
+import { parse } from 'tldts'
 import { Badge, Checkbox, Tooltip } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import type { RowExecutionMetadata } from '@/lib/table'
 import { StatusBadge } from '@/app/workspace/[workspaceId]/logs/utils'
 import { storageToDisplay } from '../../../utils'
 import type { DisplayColumn } from '../types'
 
-/**
- * Discriminated union describing every shape a table cell can take.
- *
- * Workflow-output cells follow a status state machine: they always render
- * *something* (a value, a status pill, or a dash), driven by the combination
- * of `executions[groupId]` state and dep satisfaction. Plain (non-workflow)
- * cells just render the typed value or empty.
- *
- * `'empty'` is the universal fallback used by both workflow cells (no exec,
- * no value, no waiting) and plain cells (null/undefined value).
- *
- * Adding a new cell appearance is a three-step mechanical change: add a
- * variant here, pick it in `resolveCellRender`, render it in `CellRender`.
- * TypeScript's exhaustiveness check on the renderer's `switch` (the
- * unreachable default) flags any branch you forgot.
- */
 export type CellRenderKind =
   // Workflow-output cells
   | { kind: 'value'; text: string }
@@ -47,20 +32,9 @@ interface ResolveCellRenderInput {
   value: unknown
   exec: RowExecutionMetadata | undefined
   column: DisplayColumn
-  /** Empty / undefined → not waiting; non-empty → render the Waiting pill. */
   waitingOnLabels: string[] | undefined
 }
 
-/**
- * Decide which `CellRenderKind` to render for a cell. Pure — easily
- * unit-testable in isolation, no JSX involved.
- *
- * Order matters for workflow cells: block-error wins over a value (the user
- * cares about the failure), value wins over running/queued (we have data
- * already), and the running/queued branch deliberately collapses pre-enqueue
- * `pending` and post-enqueue `queued` into one `Queued` pill so the cell
- * doesn't flicker as the row transitions from one to the other.
- */
 export function resolveCellRender({
   value,
   exec,
@@ -77,31 +51,20 @@ export function resolveCellRender({
 
     if (blockError) return { kind: 'block-error' }
 
-    // Active re-run of THIS column wins over its prior value — the value is
-    // about to be overwritten and the user should see the cell is changing.
     const inFlight =
       exec?.status === 'running' || exec?.status === 'queued' || exec?.status === 'pending'
     if (inFlight && blockRunning) return { kind: 'running' }
 
-    // Value wins over `pending-upstream`: once this column's output has
-    // landed, the cell is done from the user's perspective — even if the
-    // group is still running other blocks downstream. Without this, mid-run
-    // partial-write events (`status: 'running'` carrying outputs but tagging
-    // a different block as running) would flip a finished column back to the
-    // amber Pending pill until the terminal `completed` event arrives.
+    // Value wins over pending-upstream: a finished column stays finished even
+    // while other blocks in the group are still running.
     if (!isNull) return { kind: 'value', text: stringifyValue(value) }
 
     if (inFlight && !(groupHasBlockErrors && !blockRunning)) {
       if (exec?.status === 'queued' || exec?.status === 'pending') return { kind: 'queued' }
-      // `running` with this block not in `runningBlockIds` and no value yet =
-      // upstream block still going; surface as the amber Pending pill.
       return { kind: 'pending-upstream' }
     }
 
-    // Waiting wins over a stale terminal state: if deps are unmet right now,
-    // the prior `cancelled` / `error` is informational at best — the cell
-    // can't actually run until the user fills the missing input. Surface the
-    // actionable state instead of the stale one.
+    // Waiting wins over a stale terminal status — show the actionable state.
     if (waitingOnLabels && waitingOnLabels.length > 0) {
       return { kind: 'waiting', labels: waitingOnLabels }
     }
@@ -129,91 +92,32 @@ function stringifyValue(value: unknown): string {
   return JSON.stringify(value)
 }
 
-/** Matches bare hostnames: `microsoft.com`, `www.linkedin.com`, `sub.domain.co.uk` */
 const BARE_DOMAIN_RE = /^([a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$/
 
-/**
- * File extensions that are also valid TLDs but should never be treated as URLs.
- * Without this, strings like `config.json` or `readme.md` would resolve as domains.
- */
-const FILE_EXTENSION_TLDS = new Set([
-  'txt',
-  'json',
-  'yaml',
-  'yml',
-  'xml',
-  'html',
-  'htm',
-  'css',
-  'js',
-  'ts',
-  'tsx',
-  'jsx',
-  'md',
-  'mdx',
-  'csv',
-  'pdf',
-  'doc',
-  'docx',
-  'xls',
-  'xlsx',
-  'ppt',
-  'pptx',
-  'zip',
-  'gz',
-  'tar',
-  'rar',
-  'png',
-  'jpg',
-  'jpeg',
-  'gif',
-  'svg',
-  'webp',
-  'mp4',
-  'mp3',
-  'wav',
-  'mov',
-  'py',
-  'rb',
-  'go',
-  'rs',
-  'sh',
-  'bat',
-  'log',
-  'env',
-])
-
 function extractUrlInfo(text: string): { href: string; domain: string } | null {
-  if (!text) return null
-  if (/^https?:\/\//i.test(text)) {
+  const trimmed = text.trim()
+  if (!trimmed) return null
+  if (/^https?:\/\//i.test(trimmed)) {
     try {
-      const url = new URL(text)
-      return { href: text, domain: url.hostname }
+      const url = new URL(trimmed)
+      return { href: trimmed, domain: url.hostname }
     } catch {
       return null
     }
   }
-  if (BARE_DOMAIN_RE.test(text)) {
-    const tld = text.split('.').pop()?.toLowerCase() ?? ''
-    if (FILE_EXTENSION_TLDS.has(tld)) return null
-    return { href: `https://${text}`, domain: text }
+  if (BARE_DOMAIN_RE.test(trimmed)) {
+    const parsed = parse(trimmed)
+    if (!parsed.isIcann) return null
+    return { href: `https://${trimmed}`, domain: trimmed }
   }
   return null
 }
 
 interface CellRenderProps {
   kind: CellRenderKind
-  /** When true the static content sits underneath the InlineEditor overlay
-   *  and should be visually hidden (but kept in flow to preserve cell size). */
   isEditing: boolean
 }
 
-/**
- * Pure renderer: takes a `CellRenderKind` and returns the JSX. No business
- * logic — adding a new cell appearance means adding a new `case` here. The
- * exhaustiveness check on the `switch` (the unreachable default) flags any
- * variant you forgot to handle.
- */
 export function CellRender({ kind, isEditing }: CellRenderProps): React.ReactElement | null {
   switch (kind.kind) {
     case 'value':
@@ -320,7 +224,7 @@ export function CellRender({ kind, isEditing }: CellRenderProps): React.ReactEle
       return (
         <span className={cn('flex min-w-0 items-center gap-1.5', isEditing && 'invisible')}>
           <img
-            src={`https://www.google.com/s2/favicons?domain=${kind.domain}&sz=16`}
+            src={`https://www.google.com/s2/favicons?domain=${encodeURIComponent(kind.domain)}&sz=16`}
             alt=''
             width={12}
             height={12}
@@ -333,8 +237,12 @@ export function CellRender({ kind, isEditing }: CellRenderProps): React.ReactEle
             href={kind.href}
             target='_blank'
             rel='noopener noreferrer'
-            className='min-w-0 overflow-clip text-ellipsis text-[var(--text-primary)] underline underline-offset-2 hover:opacity-70'
+            className={cn(
+              'min-w-0 overflow-clip text-ellipsis text-[var(--text-primary)] underline underline-offset-2 hover:opacity-70',
+              isEditing && 'pointer-events-none'
+            )}
             onClick={(e) => e.stopPropagation()}
+            onDoubleClick={(e) => e.stopPropagation()}
           >
             {kind.text}
           </a>
@@ -357,20 +265,12 @@ export function CellRender({ kind, isEditing }: CellRenderProps): React.ReactEle
       return null
 
     default: {
-      // Exhaustiveness guard: TypeScript flags this branch if a new
-      // `CellRenderKind` variant is added without a matching `case` above.
       const _exhaustive: never = kind
       return _exhaustive
     }
   }
 }
 
-/**
- * Workflow-output cells are hand-editable; while editing, the static content
- * must stay in flow (so the cell doesn't collapse) but be visually hidden so
- * the InlineEditor overlay shows through. Plain wrapper around any non-text
- * variant.
- */
 function Wrap({ isEditing, children }: { isEditing: boolean; children: React.ReactNode }) {
   if (!isEditing) return <>{children}</>
   return <div className='invisible'>{children}</div>

apps/sim/package.json

@@ -195,6 +195,7 @@
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "three": "0.177.0",
+    "tldts": "7.0.30",
     "twilio": "5.9.0",
     "unified": "11.0.5",
     "unpdf": "1.4.0",