get basic mentions working

app/[leaflet_id]/publish/BskyPostEditorProsemirror.tsx

···
     const atMentionNode = schema.nodes.atMention.create({
       atURI: mention.uri,
       text,
-      ...(mention.type === "service_result" && mention.href
-        ? { href: mention.href }
-        : {}),
+      ...(mention.type === "service_result" && {
+        href: mention.href,
+        icon: mention.icon,
+      }),
     });
     tr.insert(from, atMentionNode);
   }

app/api/rpc/[command]/proxy_mention_search.ts

···
             uri: String(r.uri || ""),
             name: String(r.name || ""),
             href: r.href ? String(r.href) : undefined,
+            icon: r.icon ? String(r.icon) : undefined,
           })),
         },
       };

components/AtMentionLink.tsx

···
 export function AtMentionLink({
   atURI,
   href,
+  icon: iconUrl,
   children,
   className = "",
 }: {
   atURI: string;
   href?: string;
+  icon?: string;
   children: React.ReactNode;
   className?: string;
 }) {
   const { isPublication, isDocument } = classifyAtUri(atURI);
 
-  // Show publication icon if available
-  const icon =
-    isPublication || isDocument ? (
-      <img
-        src={`/api/pub_icon?at_uri=${encodeURIComponent(atURI)}`}
-        className="inline-block w-4 h-4 rounded-full mr-1 mt-[3px] align-text-top"
-        alt=""
-        width="20"
-        height="20"
-        loading="lazy"
-      />
-    ) : null;
+  // Show publication icon, or service-provided icon
+  const iconSrc =
+    isPublication || isDocument
+      ? `/api/pub_icon?at_uri=${encodeURIComponent(atURI)}`
+      : iconUrl ?? null;
+
+  const icon = iconSrc ? (
+    <img
+      src={iconSrc}
+      className="inline-block w-4 h-4 rounded-full mr-1 mt-[3px] align-text-top"
+      alt=""
+      width="20"
+      height="20"
+      loading="lazy"
+    />
+  ) : null;
 
   const linkHref = href || atUriToUrl(atURI);
 

components/Blocks/TextBlock/RenderYJSFragment.tsx

···
                   const atURI = node.getAttribute("atURI") || "";
                   const text = node.getAttribute("text") || "";
                   const href = node.getAttribute("href") || undefined;
+                  const icon = node.getAttribute("icon") || undefined;
                   return (
-                    <AtMentionLink key={index} atURI={atURI} href={href}>
+                    <AtMentionLink key={index} atURI={atURI} href={href} icon={icon}>
                       {text}
                     </AtMentionLink>
                   );

components/Blocks/TextBlock/schema.ts

···
         atURI: {},
         text: { default: "" },
         href: { default: undefined },
+        icon: { default: undefined },
       },
       group: "inline",
       inline: true,
···
               atURI: dom.getAttribute("data-at-uri"),
               text: dom.textContent || "",
               href: dom.getAttribute("data-href") || undefined,
+              icon: dom.getAttribute("data-icon") || undefined,
             };
           },
         },
···
         if (node.attrs.href) {
           attrs["data-href"] = node.attrs.href;
         }
+        if (node.attrs.icon) {
+          attrs["data-icon"] = node.attrs.icon;
+        }
 
-        // For publications and documents, show icon
-        if (isPublication || isDocument) {
+        // Show icon for publications/documents or service results
+        const iconSrc =
+          isPublication || isDocument
+            ? `/api/pub_icon?at_uri=${encodeURIComponent(node.attrs.atURI)}`
+            : node.attrs.icon ?? null;
+
+        if (iconSrc) {
           return [
             "span",
             attrs,
             [
               "img",
               {
-                src: `/api/pub_icon?at_uri=${encodeURIComponent(node.attrs.atURI)}`,
+                src: iconSrc,
                 class:
                   "inline-block w-4 h-4 rounded-full mt-[3px] mr-1 align-text-top",
                 alt: "",

components/Mention.tsx

···
                         }}
                         onMouseDown={(e) => e.preventDefault()}
                         name={result.name}
+                        icon={result.icon}
                         selected={index === suggestionIndex}
                       />
                     ) : (
···
 
 const ServiceSearchResult = (props: {
   name: string;
+  icon?: string;
   onClick: () => void;
   onMouseDown: (e: React.MouseEvent) => void;
   selected?: boolean;
 }) => {
   return (
     <Result
+      icon={
+        props.icon ? (
+          <img
+            src={props.icon}
+            alt=""
+            className="w-5 h-5 rounded-full shrink-0"
+          />
+        ) : undefined
+      }
       result={<div className="truncate w-full">{props.name}</div>}
       onClick={props.onClick}
       onMouseDown={props.onMouseDown}
···
       uri: string;
       name: string;
       href?: string;
+      icon?: string;
     };
 
 export type MentionScope =
···
 
   useEffect(() => {
     let stale = false;
-    // Only skip debounce for purely local operations (showing service list)
-    const delay =
-      !query && hasServices && scope.type === "default" ? 0 : 300;
+    // Default scope with services: show local filter instantly, debounce network fallback
+    if (hasServices && scope.type === "default") {
+      const filtered = allServices.filter((s) =>
+        s.type === "service"
+          ? s.name.toLowerCase().includes((query || "").toLowerCase())
+          : true,
+      );
+      setSuggestions(filtered);
+
+      // If local filter found matches, no need for network search
+      if (!query || filtered.length > 0) return;
+    }
 
     const handler = setTimeout(async () => {
       if (stale || !open) return;
 
-      if (!query && scope.type === "default") {
-        // No query: show services if available, otherwise clear (sync, no race)
-        setSuggestions(hasServices ? allServices : []);
-        return;
-      }
-
       let results: Array<Mention>;
 
       if (scope.type === "identities") {
···
           query: query || "",
           limit: 10,
         });
-        results = documents.result.documents.map((d) => ({
+        results = (documents?.result?.documents ?? []).map((d) => ({
           type: "post" as const,
           uri: d.uri,
           title: d.title,
···
           service_uri: scope.serviceUri,
           search: query || "",
         });
-        results = res.result.results.map(
-          (r: { uri: string; name: string; href?: string }) => ({
+        const items = res?.result?.results ?? [];
+        results = items.map(
+          (r: { uri: string; name: string; href?: string; icon?: string }) => ({
             type: "service_result" as const,
             uri: r.uri,
             name: r.name,
             href: r.href,
+            icon: r.icon,
           }),
         );
       } else if (hasServices) {
-        // Default scope with services: filter locally, fall back to identity search
-        const filtered = allServices.filter((s) =>
-          s.type === "service"
-            ? s.name.toLowerCase().includes((query || "").toLowerCase())
-            : true,
-        );
-        if (filtered.length > 0) {
-          results = filtered;
-        } else {
-          results = await searchIdentities(query || "", 10);
-        }
+        // Default scope with services: local filter showed no matches, fall back to identity search
+        results = await searchIdentities(query || "", 10);
       } else {
         // Default scope, no services: search people & publications together
         const [identities, publications] = await Promise.all([
···
       if (!stale) {
         setSuggestions(results);
       }
-    }, delay);
+    }, 300);
 
     return () => {
       stale = true;

lexicons/parts/page/mention/searchService.json

···
           "type": "string",
           "format": "uri",
           "description": "Optional web URL for the mentioned entity"
+        },
+        "icon": {
+          "type": "string",
+          "format": "uri",
+          "description": "Optional icon URL for the mentioned entity, displayed next to the mention"
         }
       }
     }

lexicons/src/mentionService.ts

···
           format: "uri",
           description: "Optional web URL for the mentioned entity",
         },
+        icon: {
+          type: "string",
+          format: "uri",
+          description:
+            "Optional icon URL for the mentioned entity, displayed next to the mention",
+        },
       },
     },
   },

mentions/services/wikipedia.ts

···
-type Result = { uri: string; name: string; href?: string };
+type Result = { uri: string; name: string; href?: string; icon?: string };
 
 export async function wikipedia(search: string, limit: number): Promise<Result[]> {
   if (!search.trim()) return [];
···
     uri: urls[i] || `https://en.wikipedia.org/wiki/${encodeURIComponent(title)}`,
     name: title,
     href: urls[i] || `https://en.wikipedia.org/wiki/${encodeURIComponent(title)}`,
+    icon: "https://en.wikipedia.org/static/apple-touch/wikipedia.png",
   }));
 }