refactor(favicon): one site icon for the Platform and the legacy app

Favicon moves to components/favicon/favicon.tsx as a Platform host module
(platformHostModules), drops the legacy EMCN cn import that kept it out of
the Platform's seam closure, and owns its glyph-sized appearance in its own
CSS module; legacy Tailwind classes still win from the later layer.

- Links and table cells render Favicon with the globe fallback; LinkIcon,
  CellFavicon (a second miss LRU) and their .favicon CSS are deleted.
  links.ts exposes linkHost, the tables barrel siteHost, not a built src.
- The browser agent icon and browser tab icon render Favicon instead of
  their own img + per-instance failure state, so they share the miss cache.
- siteHost (lib/favicon/url.ts) replaces externalLinkHostname,
  browserTabHostname and the inline host parsing in links, cells and the
  browser agent icon.
- check:source-conventions gains favicon-url: outside the favicon owners,
  no /api/favicon or third-party icon service string, and no import of
  faviconSrc or the favicon contract.

Author: waleedlatif1

apps/sim/app/(product)/_components/links-page/link-icon.tsx

@@ -22,12 +22,6 @@
   flex: 1 1 var(--spacing-128);
   min-inline-size: 0;
 }
-.favicon {
-  flex: none;
-  inline-size: var(--spacing-16);
-  block-size: var(--spacing-16);
-  border-radius: var(--radius-2);
-}
 .nameCell {
   display: grid;
   flex: 1;

apps/sim/app/(product)/_components/links-page/links-page.module.css

@@ -13,14 +13,14 @@ import { OverflowText } from '@sim/emcn/overflow-text'
 import type { LoadMoreState } from '@sim/emcn/scroll-area/use-load-more'
 import { SearchField } from '@sim/emcn/search-field'
 import { FailureNotice } from '@sim/emcn/status'
+import { Favicon } from '@/components/favicon/favicon'
 import { LinkEditor } from '@/app/(product)/_components/links-page/link-editor'
-import { LinkIcon } from '@/app/(product)/_components/links-page/link-icon'
 import styles from '@/app/(product)/_components/links-page/links-page.module.css'
 import { SectionToolbar } from '@/app/(product)/_components/settings-parts/settings-parts'
 import { useMinuteClock } from '@/platform/lib/data/clock'
 import {
   type LinkRecord,
-  linkFaviconSrc,
+  linkHost,
   openChromeStore,
   openLink,
   useLinksHosted,
@@ -158,7 +158,7 @@ const LinksTable = memo(function LinksTable({
         },
         cells: {
           name: (
-            <TableLabel leading={<LinkIcon src={linkFaviconSrc(link)} />}>
+            <TableLabel leading={<Favicon host={linkHost(link)} fallback={<Icon name='I041' />} />}>
               <span className={styles.nameCell}>
                 <OverflowText text={link.name}>{link.name}</OverflowText>
                 <LinkSummary link={link} updated={updated} />

apps/sim/app/(product)/_components/links-page/links-page.tsx

@@ -1,13 +1,13 @@
 'use client'
 
-import { type ReactElement, useEffect, useReducer, useRef, useState } from 'react'
+import { type ReactElement, useEffect, useRef, useState } from 'react'
 import { Checkbox } from '@sim/emcn/checkbox'
 import { Icon } from '@sim/emcn/icon'
 import { StatusTag, StatusText } from '@sim/emcn/status'
 import { Tooltip } from '@sim/emcn/tooltip'
-import { LRUCache } from 'lru-cache'
 import Link from 'next/link'
 import { parse } from 'tldts'
+import { Favicon } from '@/components/favicon/favicon'
 import { workspacePath } from '@/lib/navigation/paths'
 import { resolveSelectOptions } from '@/app/(product)/_components/workspace/tables/select-field/select-field'
 import { InlineEditor } from '@/app/(product)/_components/workspace/tables/table-grid/inline-editors'
@@ -16,10 +16,10 @@ import { useKnowledgeBasesQuery } from '@/platform/lib/data/knowledge'
 import {
   columnTypeOf,
   type DisplayColumn,
-  faviconSrc,
   type RowExecutionMetadata,
   type SaveReason,
   type SelectOption,
+  siteHost,
   storageToDisplay,
   type TimezoneState,
   useTablesList,
@@ -187,12 +187,8 @@ function extractUrlInfo(text: string): { href: string; domain: string } | null {
   const trimmed = text.trim()
   if (!trimmed) return null
   if (/^https?:\/\//i.test(trimmed)) {
-    try {
-      const url = new URL(trimmed)
-      return { href: trimmed, domain: url.hostname }
-    } catch {
-      return null
-    }
+    const domain = siteHost(trimmed)
+    return domain ? { href: trimmed, domain } : null
   }
   if (BARE_DOMAIN_RE.test(trimmed)) {
     const parsed = parse(trimmed)
@@ -430,7 +426,7 @@ function CellRender({ kind, isEditing }: CellRenderProps): ReactElement | null {
     case 'url':
       return (
         <span className={styles.linkCell} data-hidden={hidden}>
-          <CellFavicon host={kind.domain} />
+          <Favicon host={kind.domain} fallback={<Icon name='I041' />} />
           <a
             href={kind.href}
             target='_blank'
@@ -494,30 +490,6 @@ function StatusCell({ label, intent, tip, hidden }: StatusCellProps) {
   return tip ? <Tooltip label={tip}>{tag}</Tooltip> : tag
 }
 
-/**
- * Hosts whose icon failed recently, so a remounted cell renders the globe at once instead of an
- * empty slot. An entry lasts only as long as the favicon route retries an outage.
- */
-const knownFaviconMisses = new LRUCache<string, true>({ max: 500, ttl: 5 * 60 * 1000 })
-
-function CellFavicon({ host }: { host: string }) {
-  const [, rerender] = useReducer((failures: number) => failures + 1, 0)
-  if (knownFaviconMisses.has(host)) return <Icon name='I041' />
-  return (
-    <img
-      src={faviconSrc(host)}
-      alt=''
-      loading='lazy'
-      decoding='async'
-      className={styles.favicon}
-      onError={() => {
-        knownFaviconMisses.set(host, true)
-        rerender()
-      }}
-    />
-  )
-}
-
 const FALLBACK_LABEL: Record<SimResourceType, string> = {
   workflow: 'Workflow',
   table: 'Table',

apps/sim/app/(product)/_components/workspace/tables/table-grid/cell-render.tsx

@@ -229,12 +229,6 @@
 .link:hover {
   color: var(--ui-secondary);
 }
-.favicon {
-  flex: none;
-  inline-size: var(--spacing-12);
-  block-size: var(--spacing-12);
-  border-radius: var(--radius-2);
-}
 .statusCell {
   display: inline-flex;
   min-inline-size: 0;

apps/sim/app/(product)/_components/workspace/tables/table-grid/table-grid.module.css

@@ -0,0 +1,10 @@
+/* A site icon is a glyph: it takes the glyph size and leading slot of the icon it stands in for. */
+@layer components {
+  .icon {
+    display: inline-block;
+    flex: none;
+    inline-size: var(--ui-glyph-size);
+    block-size: var(--ui-glyph-size);
+    border-radius: var(--radius-2);
+  }
+}

apps/sim/components/favicon/favicon.module.css

@@ -0,0 +1,43 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { Favicon } from '@/components/favicon/favicon'
+
+const fallback = <svg data-fallback='' />
+
+describe('Favicon', () => {
+  let container: HTMLDivElement
+  let root: Root
+
+  beforeEach(() => {
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    container = document.createElement('div')
+    root = createRoot(container)
+  })
+
+  afterEach(() => act(() => root.unmount()))
+
+  it('renders the fallback at once for every later icon of a host whose icon failed', () => {
+    act(() => root.render(<Favicon host='no-icon.example' fallback={fallback} />))
+    const failed = container.querySelector('img')
+    expect(failed).not.toBeNull()
+    act(() => failed?.dispatchEvent(new Event('error')))
+    expect(container.querySelector('img')).toBeNull()
+
+    act(() =>
+      root.render(
+        <>
+          <Favicon key='other-surface' host='no-icon.example' fallback={fallback} />
+          <Favicon host='has-icon.example' fallback={fallback} />
+        </>
+      )
+    )
+    expect(container.querySelectorAll('[data-fallback]')).toHaveLength(1)
+    expect(
+      [...container.querySelectorAll('img')].map((image) => image.getAttribute('src'))
+    ).toEqual(['/api/favicon?host=has-icon.example'])
+  })
+})

apps/sim/components/favicon/favicon.test.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { type ReactNode, useReducer } from 'react'
-import { cn } from '@sim/emcn-legacy'
 import { LRUCache } from 'lru-cache'
+import styles from '@/components/favicon/favicon.module.css'
 import { faviconSrc } from '@/lib/favicon/url'
 
 /**
@@ -14,20 +14,23 @@ import { faviconSrc } from '@/lib/favicon/url'
 const knownMisses = new LRUCache<string, true>({ max: 500, ttl: 5 * 60 * 1000 })
 
 interface FaviconProps {
-  /** The site's hostname; without one the fallback renders. */
+  /** The site's hostname (`siteHost` from `@/lib/favicon/url`); without one the fallback renders. */
   host: string | null | undefined
   /** Rendered when there is no host, or when neither the host nor a parent domain has an icon. */
   fallback: ReactNode
-  /** Sizing for the icon; the fallback carries its own. */
+  /**
+   * Utility classes from a legacy (Tailwind) caller; they win over the glyph size, being a later
+   * layer. Platform callers pass none and the icon takes the glyph size of the slot it fills.
+   */
   className?: string
   /** Reports the image painted, including one the browser had ready before hydration. */
   onLoad?: () => void
 }
 
 /**
  * A site's icon, served by Sim's favicon route: the browser never contacts a third party, a
- * private tenant shows its platform's icon, and a site with none renders `fallback` instead
- * of a provider's placeholder.
+ * private tenant shows its platform's icon, and a site with none renders `fallback` instead of a
+ * provider's placeholder. The Platform and the legacy app both render site icons only through it.
  */
 export function Favicon({ host, fallback, className, onLoad }: FaviconProps) {
   const [, rerender] = useReducer((failures: number) => failures + 1, 0)
@@ -41,7 +44,7 @@ export function Favicon({ host, fallback, className, onLoad }: FaviconProps) {
       alt=''
       loading='lazy'
       decoding='async'
-      className={cn('rounded-sm', className)}
+      className={className ? `${styles.icon} ${className}` : styles.icon}
       onLoad={onLoad}
       onError={() => {
         knownMisses.set(host, true)

apps/sim/components/favicon.tsx apps/sim/components/favicon/favicon.tsxapps/sim/components/favicon.tsx renamed to apps/sim/components/favicon/favicon.tsx

@@ -7,7 +7,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import type { AgentGroupItem } from '@/components/mothership-chat/message-content/components/agent-group/agent-group-view'
 import {
   BrowserAgentIcon,
-  getBrowserAgentFaviconUrl,
+  getBrowserAgentPageHost,
 } from '@/components/mothership-chat/message-content/components/agent-group/browser-agent-icon'
 import type { ToolCallData } from '@/lib/mothership/chat/types'
 import { useBrowserSessionStore } from '@/stores/browser-session/store'
@@ -46,10 +46,10 @@ function tool(overrides: Partial<ToolCallData> = {}): AgentGroupItem {
   }
 }
 
-describe('getBrowserAgentFaviconUrl', () => {
+describe('getBrowserAgentPageHost', () => {
   it('keeps only the observed hostname, never credentials, port, path, or query', () => {
     expect(
-      getBrowserAgentFaviconUrl([
+      getBrowserAgentPageHost([
         tool({
           result: {
             success: true,
@@ -59,12 +59,12 @@ describe('getBrowserAgentFaviconUrl', () => {
           },
         }),
       ])
-    ).toBe('/api/favicon?host=example.com')
+    ).toBe('example.com')
   })
 
   it('ignores URLs from other tools and nested agent runs', () => {
     expect(
-      getBrowserAgentFaviconUrl([
+      getBrowserAgentPageHost([
         tool(),
         tool({
           toolName: 'browser_read_text',
@@ -87,7 +87,7 @@ describe('getBrowserAgentFaviconUrl', () => {
           },
         },
       ])
-    ).toBe('/api/favicon?host=example.com')
+    ).toBe('example.com')
   })
 })