Enhance SourceFavicon component to support optional sourceUrl prop and improve favicon retrieval logic. Update ToolExplorer styles for better layout management based on sidebar visibility.

Author: RhysSullivan

executor/apps/web/src/components/tools/add/source/dialog-sections.tsx

@@ -1,5 +1,4 @@
 import { ChevronRight, Plus } from "lucide-react";
-import Image from "next/image";
 import { Streamdown } from "streamdown";
 import type { ReactNode } from "react";
 import { Button } from "@/components/ui/button";
@@ -20,6 +19,7 @@ import {
   type SourceCatalogSort,
   type SourceType,
 } from "./dialog-helpers";
+import { SourceFavicon } from "../../source-favicon";
 
 export function CatalogViewSection({
   catalogQuery,
@@ -86,15 +86,18 @@ export function CatalogViewSection({
             key={item.id}
             className="w-full max-w-full overflow-hidden flex items-start gap-2 px-2 py-2 rounded-md border border-border/50"
           >
-            {item.logoUrl && (
-              <Image
+            {item.logoUrl ? (
+              <img
                 src={item.logoUrl}
                 alt=""
-                width={20}
-                height={20}
                 className="w-5 h-5 rounded shrink-0 mt-0.5 object-contain"
-                loading="lazy"
-                unoptimized
+              />
+            ) : (
+              <SourceFavicon
+                sourceUrl={item.originUrl || item.specUrl}
+                fallbackType={item.sourceType ?? "openapi"}
+                iconClassName="h-5 w-5 text-muted-foreground"
+                imageClassName="w-5 h-5 rounded object-contain"
               />
             )}
             <div className="flex-1 min-w-0 w-0 overflow-hidden">

executor/apps/web/src/components/tools/explorer.tsx

@@ -380,7 +380,7 @@ export function ToolExplorer({
       <div
         className={cn(
           "flex-1 min-w-0 flex flex-col",
-          "pl-0",
+          showSourceSidebar ? "pl-2 lg:pl-3" : "pl-0",
         )}
       >
         <ToolExplorerToolbar

executor/apps/web/src/components/tools/source-favicon.tsx

@@ -4,10 +4,11 @@ import { useEffect, useState } from "react";
 import { Layers, Globe, Server } from "lucide-react";
 import Image from "next/image";
 import type { ToolSourceRecord } from "@/lib/types";
-import { getSourceFavicon } from "@/lib/tools/source-helpers";
+import { getSourceFavicon, getSourceFaviconUrl } from "@/lib/tools/source-helpers";
 
 interface SourceFaviconProps {
-  source: ToolSourceRecord;
+  source?: ToolSourceRecord;
+  sourceUrl?: string;
   iconClassName?: string;
   imageClassName?: string;
   imageSize?: number;
@@ -26,20 +27,26 @@ function DefaultSourceIcon({ type, className }: { type: ToolSourceRecord["type"]
 
 export function SourceFavicon({
   source,
+  sourceUrl,
   iconClassName = "h-4 w-4 text-muted-foreground",
   imageClassName,
   imageSize = 20,
   fallbackType,
 }: SourceFaviconProps) {
-  const sourceFavicon = getSourceFavicon(source);
+  const sourceFavicon = sourceUrl
+    ? getSourceFaviconUrl(sourceUrl)
+    : source
+      ? getSourceFavicon(source)
+      : null;
   const [failed, setFailed] = useState(false);
 
   useEffect(() => {
     setFailed(false);
   }, [sourceFavicon]);
 
   if (!sourceFavicon || failed) {
-    return <DefaultSourceIcon type={fallbackType ?? source.type} className={iconClassName} />;
+    const sourceType = fallbackType ?? source?.type ?? "openapi";
+    return <DefaultSourceIcon type={sourceType} className={iconClassName} />;
   }
 
   return (

executor/apps/web/src/lib/tools/source-helpers.ts

@@ -16,7 +16,7 @@ const RAW_HOSTS = new Set([
   "raw.github.com",
 ]);
 
-function faviconForUrl(url: string | undefined | null): string | null {
+export function getSourceFaviconUrl(url: string | undefined | null): string | null {
   if (!url) return null;
   try {
     const hostname = new URL(url).hostname;
@@ -62,7 +62,7 @@ function sourceFaviconSourceUrl(source: ToolSourceRecord): string | null {
 
 export function getSourceFavicon(source: ToolSourceRecord): string | null {
   const sourceUrl = sourceFaviconSourceUrl(source);
-  return sourceUrl ? faviconForUrl(sourceUrl) : null;
+  return sourceUrl ? getSourceFaviconUrl(sourceUrl) : null;
 }
 
 export function sourceEndpointLabel(source: ToolSourceRecord): string {