@opengeni/react 6.1.0 → 7.0.0-canary.35585322809001

package/src/plugin-discovery.tsx

@@ -1,5 +1,13 @@
+import { createDiscoveryCache } from "./discovery-cache";
 import { useEffect, useRef, useState } from "react";
 import type { PluginDiscoveryItem, PluginDiscoveryPage } from "@opengeni/sdk";
+import { BoxesIcon } from "lucide-react";
+import { CapabilityCatalogRow } from "./capability-catalog-row";
+import { ConnectionLogo } from "./connection-logo";
+
+const discoveryCache = createDiscoveryCache<PluginDiscoveryPage>();
+const EMPTY_INSTALLED_IDS: ReadonlySet<string> = new Set();
+
 export type PluginDiscoveryProps = {
   client: {
     discoverPlugins(
@@ -9,30 +17,43 @@ export type PluginDiscoveryProps = {
   };
   workspaceId: string;
   query: string;
+  /** Initially selected registry. Users can still switch registries or browse all. */
+  defaultProvider?: "" | "openai" | "anthropic";
+  /** Discovery identities already installed in the current workspace. */
+  installedIds?: ReadonlySet<string>;
+  resultLimit?: number;
+  onShowMore?: () => void;
   onOpen: (item: PluginDiscoveryItem) => void;
 };
 export function PluginDiscovery(props: PluginDiscoveryProps) {
-  const [provider, setProvider] = useState("");
+  const [provider, setProvider] = useState(props.defaultProvider ?? "");
   return (
-    <section className="og-plugin-discovery" aria-label="Discover plugins">
+    <section
+      className={`og-plugin-discovery ${props.resultLimit ? "og-catalog-overview" : ""}`}
+      aria-label="Discover plugins"
+    >
       <header>
-        <h3>Browse plugins</h3>
-        <div className="og-plugin-filters" role="group" aria-label="Plugin registry">
-          {[
-            { value: "", label: "All" },
-            { value: "openai", label: "OpenAI plugin registry" },
-            { value: "anthropic", label: "Anthropic plugin registry" },
-          ].map((option) => (
-            <button
-              key={option.value}
-              type="button"
-              aria-pressed={provider === option.value}
-              onClick={() => setProvider(option.value)}
-            >
-              {option.label}
-            </button>
-          ))}
-        </div>
+        <h3>{props.resultLimit ? "Plugins" : "Browse plugins"}</h3>
+        {!props.resultLimit ? (
+          <div className="og-plugin-filters" role="group" aria-label="Plugin registry">
+            {(
+              [
+                { value: "", label: "All" },
+                { value: "openai", label: "OpenAI plugin registry" },
+                { value: "anthropic", label: "Anthropic plugin registry" },
+              ] as const
+            ).map((option) => (
+              <button
+                key={option.value}
+                type="button"
+                aria-pressed={provider === option.value}
+                onClick={() => setProvider(option.value)}
+              >
+                {option.label}
+              </button>
+            ))}
+          </div>
+        ) : null}
       </header>
       <Results
         key={`${props.workspaceId}:${props.query}:${provider}`}
@@ -47,39 +68,49 @@ function Results({
   workspaceId,
   query,
   provider,
+  installedIds = EMPTY_INSTALLED_IDS,
   onOpen,
+  resultLimit,
+  onShowMore,
 }: PluginDiscoveryProps & { provider: string }) {
-  const [items, setItems] = useState<PluginDiscoveryItem[]>([]);
+  const initial = discoveryCache.peek(client, JSON.stringify([workspaceId, query, provider, 0]));
+  const [items, setItems] = useState<PluginDiscoveryItem[]>(initial?.items ?? []);
   const [offset, setOffset] = useState(0);
-  const [next, setNext] = useState<number | null>(null);
-  const [total, setTotal] = useState(0);
-  const [loading, setLoading] = useState(true);
+  const [next, setNext] = useState<number | null>(initial?.nextOffset ?? null);
+  const [total, setTotal] = useState(initial?.total ?? 0);
+  const [loading, setLoading] = useState(!initial);
   const [error, setError] = useState(false);
   const [retry, setRetry] = useState(0);
   const sentinel = useRef<HTMLDivElement>(null);
   useEffect(() => {
     let active = true;
-    setLoading(true);
+    const cacheKey = JSON.stringify([workspaceId, query, provider, offset]);
+    const cached = discoveryCache.peek(client, cacheKey);
+    setLoading(!cached);
     setError(false);
     const timer = setTimeout(
       () => {
-        void client.discoverPlugins(workspaceId, { query, provider, offset }).then(
-          (page) => {
-            if (!active) return;
-            setItems((previous) => (offset ? [...previous, ...page.items] : page.items));
-            setTotal(page.total);
-            setNext(page.nextOffset);
-            setLoading(false);
-          },
-          () => {
-            if (active) {
-              setError(true);
+        void discoveryCache
+          .read(client, cacheKey, () =>
+            client.discoverPlugins(workspaceId, { query, provider, offset }),
+          )
+          .then(
+            (page) => {
+              if (!active) return;
+              setItems((previous) => (offset ? [...previous, ...page.items] : page.items));
+              setTotal(page.total);
+              setNext(page.nextOffset);
               setLoading(false);
-            }
-          },
-        );
+            },
+            () => {
+              if (active) {
+                setError(true);
+                setLoading(false);
+              }
+            },
+          );
       },
-      offset ? 0 : 200,
+      cached || offset ? 0 : 200,
     );
     return () => {
       active = false;
@@ -87,7 +118,7 @@ function Results({
     };
   }, [client, workspaceId, query, provider, offset, retry]);
   useEffect(() => {
-    if (loading || error || next === null || !sentinel.current) return;
+    if (resultLimit || loading || error || next === null || !sentinel.current) return;
     const observer = new IntersectionObserver(
       (entries) => {
         if (entries.some((entry) => entry.isIntersecting)) setOffset(next);
@@ -96,7 +127,7 @@ function Results({
     );
     observer.observe(sentinel.current);
     return () => observer.disconnect();
-  }, [loading, error, next]);
+  }, [loading, error, next, resultLimit]);
   return (
     <>
       {!loading && !error ? (
@@ -105,39 +136,23 @@ function Results({
         </p>
       ) : null}
       <div className="og-plugin-discovery-grid">
-        {items.map((item) => (
-          <button
+        {items.slice(0, resultLimit).map((item) => (
+          <CapabilityCatalogRow
             key={item.id}
-            className="og-plugin-discovery-row"
-            type="button"
-            onClick={() => onOpen(item)}
-          >
-            {item.logoUrl ? (
-              <img
+            data-plugin-id={item.id}
+            name={item.displayName.replace(/-/g, " ")}
+            description={item.description}
+            status={installedIds.has(item.id) ? "added" : "available"}
+            statusLabel={installedIds.has(item.id) ? "Installed" : "Available to install"}
+            onOpen={() => onOpen(item)}
+            icon={
+              <ConnectionLogo
                 src={item.logoUrl}
-                alt=""
-                loading="lazy"
-                onError={(event) => {
-                  event.currentTarget.style.display = "none";
-                }}
+                name={item.displayName}
+                fallback={<BoxesIcon aria-hidden="true" />}
               />
-            ) : null}
-            <span className="og-plugin-copy">
-              <span className="og-plugin-title">
-                <strong>{item.displayName.replace(/-/g, " ")}</strong>
-                <small>
-                  {item.provider === "openai"
-                    ? "OpenAI plugin registry"
-                    : "Anthropic plugin registry"}
-                </small>
-              </span>
-              <span className="og-plugin-description">{item.description}</span>
-              {item.category ? <span className="og-plugin-category">{item.category}</span> : null}
-            </span>
-            <span className="og-plugin-open" aria-hidden="true">
-              ›
-            </span>
-          </button>
+            }
+          />
         ))}
       </div>
       {loading ? <p role="status">Loading plugins…</p> : null}
@@ -149,8 +164,13 @@ function Results({
           </button>
         </p>
       ) : null}
+      {resultLimit && !loading && !error && total > resultLimit ? (
+        <button className="og-catalog-more" type="button" onClick={onShowMore}>
+          View all plugins
+        </button>
+      ) : null}
       <div ref={sentinel}>
-        {next !== null && !loading && !error ? (
+        {!resultLimit && next !== null && !loading && !error ? (
           <button className="og-plugin-more" type="button" onClick={() => setOffset(next)}>
             Show more plugins
           </button>

package/src/realtime/realtime-control.tsx

@@ -1105,16 +1105,14 @@ export function RealtimeVoiceModelPanel(props: {
 
   return (
     <div className="flex min-h-0 flex-1 flex-col" data-testid="realtime-voice-model-panel">
-      <div className="flex shrink-0 items-start gap-1 px-2 pt-1 pb-1.5">
+      <div className="flex min-h-10 shrink-0 items-center gap-2 border-b border-og-border px-2 pb-2">
         {props.leading}
-        <div className="min-w-0">
-          <div className="text-og-menu font-medium text-og-fg">Voice model</div>
-          <p className="mt-0.5 text-og-control text-og-fg-subtle">
-            Used when you start a voice conversation.
-          </p>
-        </div>
+        <div className="min-w-0 flex-1 text-og-menu font-medium text-og-fg">Voice model</div>
       </div>
-      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-1.5 pb-1.5">
+      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-2">
+        <p className="mb-3 text-og-control text-og-fg-muted">
+          Used when you start a voice conversation.
+        </p>
         <RealtimeModelPickerMenu
           models={props.models}
           selectedModel={props.selectedModel}

package/src/session-auth-recommendation.ts

@@ -0,0 +1,48 @@
+import type { AuthNeededItem } from "./timeline/types";
+import type { CapabilityCatalogItem } from "@opengeni/sdk";
+
+/** Recovery events identify runtime servers/connections, while recommendation
+ * events already carry a catalog id. Never guess among same-domain accounts. */
+export function sessionAuthRecommendation(
+  item: AuthNeededItem,
+  catalog: CapabilityCatalogItem[],
+): AuthNeededItem | undefined {
+  if (
+    item.authoritySource === "host" ||
+    item.reason === "unsupported_auth" ||
+    item.reason === "resource_scope_unavailable"
+  )
+    return undefined;
+  if (item.capability) return item;
+  const recoveryServerId = item.canonicalServerId ?? item.serverId;
+  const matches = catalog.filter(
+    (candidate) =>
+      (recoveryServerId !== null &&
+        candidate.runtime.mcpServerId === recoveryServerId &&
+        recoveryServerId !== "opengeni") ||
+      (item.connectionId !== null && candidate.connectionRef?.connectionId === item.connectionId),
+  );
+  if (matches.length !== 1) return undefined;
+  const entry = matches[0]!;
+  const personalAccess = item.reason === "personal_authority_unavailable";
+  if (
+    personalAccess &&
+    ((item.connectionSubjectScope ?? entry.connectionRef?.subjectScope) !== "subject" ||
+      entry.connectionRef?.authoritySource === "host")
+  )
+    return undefined;
+  return {
+    ...item,
+    capability: {
+      id: entry.id,
+      name: entry.name,
+      kind: entry.kind,
+      source: entry.source,
+      action: "connect",
+      rationale: personalAccess
+        ? "Review permission to use your personal account in this conversation."
+        : "Reconnect this integration to use its tools in this conversation.",
+      requiredVariables: [],
+    },
+  };
+}

package/src/session-capability-policy.ts

@@ -0,0 +1,83 @@
+import type { FirstPartyMcpToolName, CapabilityCatalogItem } from "@opengeni/sdk";
+import type { OpenGeniBrowserClient as OpenGeniClient } from "@opengeni/sdk/browser";
+
+/** Catalog tool discovery may be lazy; selecting the installed server does not
+ * require its individual tool inventory to have been fetched. */
+export function sessionCapabilityTools(item: CapabilityCatalogItem) {
+  const serverId = item.kind === "mcp" ? item.runtime?.mcpServerId : undefined;
+  return serverId && !item.tools.some((tool) => tool.kind === "mcp" && tool.id === serverId)
+    ? [...item.tools, { kind: "mcp" as const, id: serverId }]
+    : item.tools;
+}
+
+/** A connection never resets the human's existing tool selection. Default-mode
+ * sessions discover newly enabled servers at admission; explicit/inherited
+ * policies add only this reviewed capability, with the existing CAS fence. */
+export async function attachSessionCapability(
+  client: OpenGeniClient,
+  workspaceId: string,
+  sessionId: string,
+  item: CapabilityCatalogItem,
+  stillCurrent: () => boolean = () => true,
+): Promise<void> {
+  const tools = sessionCapabilityTools(item);
+  if (item.kind === "skill" || tools.length === 0) return;
+  if (!stillCurrent()) throw new Error("Connection setup was interrupted.");
+  const session = await client.getSession(workspaceId, sessionId);
+  if (!stillCurrent()) throw new Error("Connection setup was interrupted.");
+  // Session.tools includes mandatory runtime servers, which must never be
+  // echoed into the human's explicit selection.
+  let existing = session.tools.filter(
+    (tool) => !session.effectiveToolPolicy?.mandatoryIds?.includes(tool.id),
+  );
+  if (session.toolPolicy.mode === "workspace_default") {
+    const policy = session.effectiveToolPolicy;
+    if (!policy || policy.idsTruncated)
+      throw new Error(
+        "Connected, but the full session tool selection could not be read. Review the Tools picker before continuing.",
+      );
+    // A workspace may choose a restricted default instead of all enabled servers.
+    // Preserve that exact selection if this connection needs an explicit addition.
+    // selectedIds contains only explicit additions, and is normally empty for
+    // automatic selection. Compare against the resolved defaults instead.
+    existing = policy.effectiveIds
+      .filter((id) => !policy.mandatoryIds.includes(id))
+      .map((id) => ({ kind: "mcp" as const, id }));
+  }
+  const additions = tools.filter(
+    (tool) => !existing.some((current) => current.kind === tool.kind && current.id === tool.id),
+  );
+  const recommended = Array.isArray(item.metadata?.firstPartyMcpTools)
+    ? (item.metadata.firstPartyMcpTools.filter(
+        (name): name is string => typeof name === "string",
+      ) as FirstPartyMcpToolName[])
+    : [];
+  const firstParty = [...new Set([...session.firstPartyMcpTools, ...recommended])];
+  if (additions.length === 0 && firstParty.length === session.firstPartyMcpTools.length) return;
+  await client.updateSessionToolPolicy(workspaceId, sessionId, {
+    mode: "explicit",
+    tools: [...existing, ...additions],
+    firstPartyMcpTools: firstParty,
+    expectedVersion: session.toolPolicyVersion,
+  });
+}
+
+/** Native OAuth callbacks have already saved the provider connection. Finish
+ * the separate, version-fenced session tool selection before reporting success. */
+export async function completeSessionCapabilityOAuth(
+  client: OpenGeniClient,
+  workspaceId: string,
+  sessionId: string,
+  capabilityId: string | null,
+): Promise<void> {
+  if (!capabilityId)
+    throw new Error(
+      "The authorized integration could not be identified. Review its connection card to finish setup.",
+    );
+  const connected = (await client.listCapabilities(workspaceId)).items.find(
+    (item) => item.id === capabilityId,
+  );
+  if (!connected?.enabled)
+    throw new Error("The connection was authorized, but enabling its tools could not be verified.");
+  await attachSessionCapability(client, workspaceId, sessionId, connected);
+}

package/src/session-ui.ts

@@ -13,6 +13,7 @@ export type { ApprovalSurfaceProps, ApprovalSurfaceMessages } from "./components
 export type { HumanInputSurfaceProps } from "./components/human-input-surface";
 export { MessageTimeline, TimelineRow } from "./components/message-timeline";
 export type { MessageTimelineProps } from "./components/message-timeline";
+export type { TimelineSearchTarget } from "./components/timeline-search";
 export { createOlderHistoryLoadReceipt } from "./older-history";
 export type { OlderHistoryLoader, OlderHistoryLoadReceipt } from "./older-history";
 export { UserMessageBody, userMessageLikelyNeedsDisclosure } from "./components/user-message-body";
@@ -46,6 +47,7 @@ export type {
   SessionChromeSignalTone,
 } from "./components/session-chrome";
 export { SessionCommandsPanel } from "./components/session-commands-panel";
+export { SessionCommands } from "./components/session-commands";
 
 export { KnowledgeActivityProvider } from "./timeline/knowledge-receipt";
 export type { KnowledgeActivityActions } from "./timeline/knowledge-receipt";

package/src/session.ts

@@ -23,6 +23,7 @@ export type {
   EmbeddedSessionClientOverride as ClientOverride,
 } from "./session-context";
 export { createEmbeddedSessionClient } from "./embedded-session-client";
+export { conversationTimeline } from "./conversation-timeline";
 export type {
   ComposerDraftMapContext,
   CreateEmbeddedSessionClientOptions,

package/src/skill-discovery.tsx

@@ -1,4 +1,7 @@
 import { useEffect, useState } from "react";
+import { createDiscoveryCache } from "./discovery-cache";
+import { BookOpenIcon } from "lucide-react";
+import { CapabilityCatalogRow, type CapabilityCatalogStatus } from "./capability-catalog-row";
 
 export type SkillDiscoveryItem = {
   id: string;
@@ -8,6 +11,8 @@ export type SkillDiscoveryItem = {
   url: string;
 };
 export type SkillDiscoveryPage = { items: SkillDiscoveryItem[]; nextCursor: null };
+const discoveryCache = createDiscoveryCache<SkillDiscoveryPage>();
+
 export type SkillDiscoveryClient = {
   searchPublicSkills(workspaceId: string, query: string): Promise<SkillDiscoveryPage>;
 };
@@ -18,35 +23,53 @@ export type SkillDiscoveryProps = {
   query: string;
   onImport: (url: string) => void;
   canManage: boolean;
+  localSkills?: readonly {
+    id: string;
+    name: string;
+    description?: string;
+    status?: CapabilityCatalogStatus;
+    statusLabel?: string;
+    onOpen: () => void;
+  }[];
+  resultLimit?: number;
+  onShowMore?: () => void;
   onSearch?: (() => void) | undefined;
 };
 
 /** Host-owned query and import flow; browse presentation is reusable independently. */
 export function SkillDiscovery(props: SkillDiscoveryProps) {
   const query = props.query.trim();
+  const discoveryQuery = query || "agent";
   return (
     <section className="og-skill-discovery" aria-label="Discover skills">
       <header>
-        <h3>Discover skills</h3>
-        <a
-          href="https://skills.sh/"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="og-skill-discovery-browse"
-        >
-          Browse skills.sh ↗
-        </a>
+        <h3>{props.resultLimit ? "Skills" : query ? "Search skills" : "Browse skills"}</h3>
+        {!props.resultLimit ? (
+          <a
+            href="https://skills.sh/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="og-skill-discovery-browse"
+          >
+            Browse skills.sh ↗
+          </a>
+        ) : null}
       </header>
-      {!query && props.onSearch ? (
-        <button type="button" className="og-skill-discovery-search" onClick={props.onSearch}>
-          Search skills
-        </button>
+      {!query ? (
+        <p>Agent skills from skills.sh. Search above for another topic.</p>
+      ) : query.length < 2 ? (
+        <p>Enter at least two characters to search skills.sh.</p>
       ) : null}
-      <DiscoveryResults key={`${props.workspaceId}:${query}`} {...props} query={query} />
+      <DiscoveryResults
+        key={`${props.workspaceId}:${discoveryQuery}`}
+        {...props}
+        query={discoveryQuery}
+      />
     </section>
   );
 }
 
+const EMPTY_LOCAL_SKILLS: NonNullable<SkillDiscoveryProps["localSkills"]> = [];
 const EMPTY_INSTALLED_SKILLS: NonNullable<SkillDiscoveryProps["installedSkills"]> = [];
 
 function DiscoveryResults({
@@ -55,21 +78,29 @@ function DiscoveryResults({
   query,
   canManage,
   onImport,
+  resultLimit,
+  onShowMore,
+  localSkills = EMPTY_LOCAL_SKILLS,
   installedSkills = EMPTY_INSTALLED_SKILLS,
 }: SkillDiscoveryProps) {
-  const [result, setResult] = useState<SkillDiscoveryPage | null>(null);
-  const [loading, setLoading] = useState(query.length >= 2);
+  const cacheKey = JSON.stringify([workspaceId, query]);
+  const cached = discoveryCache.peek(client, cacheKey);
+  const [result, setResult] = useState<SkillDiscoveryPage | null>(cached ?? null);
+  const [loading, setLoading] = useState(query.length >= 2 && !cached);
   const [error, setError] = useState(false);
   const [retry, setRetry] = useState(0);
   useEffect(() => {
     let active = true;
     setError(false);
     if (query.length < 2) return;
-    setLoading(true);
+    const existing = discoveryCache.peek(client, cacheKey);
+    setLoading(!existing);
     let timer: ReturnType<typeof setTimeout>;
     const search = async (attempt: number) => {
       try {
-        const data = await client.searchPublicSkills(workspaceId, query);
+        const data = await discoveryCache.read(client, cacheKey, () =>
+          client.searchPublicSkills(workspaceId, query),
+        );
         if (!active) return;
         setResult(data);
         setLoading(false);
@@ -90,51 +121,65 @@ function DiscoveryResults({
         setLoading(false);
       }
     };
-    timer = setTimeout(() => void search(0), 300);
+    timer = setTimeout(() => void search(0), existing ? 0 : 300);
     return () => {
       active = false;
       clearTimeout(timer);
     };
-  }, [client, workspaceId, query, retry]);
+  }, [client, workspaceId, query, cacheKey, retry]);
+  const remoteSkills =
+    result?.items.filter(
+      (skill) =>
+        !localSkills.some((local) => local.name.toLowerCase() === skill.name.toLowerCase()),
+    ) ?? [];
   return (
     <div aria-busy={loading}>
       <div className="og-skill-discovery-grid">
-        {result?.items.map((skill) => {
-          const installed = installedSkills.some(
-            (entry) =>
-              entry.sourceUrl.replace(/\/$/, "").toLowerCase() === skill.url.toLowerCase() ||
-              (entry.repositoryUrl.replace(/\/$/, "").toLowerCase() ===
-                `https://github.com/${skill.source}`.toLowerCase() &&
-                entry.name.toLowerCase() === skill.name.toLowerCase()),
-          );
-          return (
-            <button
-              key={skill.id}
-              type="button"
-              className="og-skill-discovery-item"
-              disabled={!canManage}
-              onClick={() => onImport(skill.url)}
-            >
-              <span className="og-skill-discovery-copy">
-                <strong>{skill.name}</strong>
-                <span>{skill.source}</span>
-                <small>{skill.installs.toLocaleString()} installs</small>
-              </span>
-              <span className="og-skill-discovery-action">
-                {installed ? (
-                  <>
-                    <span aria-hidden="true">✓ </span>Installed
-                  </>
-                ) : !canManage ? (
-                  "Admin required"
-                ) : (
-                  "Preview →"
-                )}
-              </span>
-            </button>
-          );
-        })}
+        {localSkills.slice(0, resultLimit).map((skill) => (
+          <CapabilityCatalogRow
+            key={skill.id}
+            name={skill.name}
+            description={skill.description}
+            icon={<BookOpenIcon aria-hidden="true" />}
+            status={skill.status ?? "added"}
+            statusLabel={skill.statusLabel}
+            onOpen={skill.onOpen}
+          />
+        ))}
+        {remoteSkills
+          .slice(
+            0,
+            resultLimit === undefined ? undefined : Math.max(0, resultLimit - localSkills.length),
+          )
+          .map((skill) => {
+            const installed = installedSkills.some(
+              (entry) =>
+                entry.sourceUrl.replace(/\/$/, "").toLowerCase() === skill.url.toLowerCase() ||
+                (entry.repositoryUrl.replace(/\/$/, "").toLowerCase() ===
+                  `https://github.com/${skill.source}`.toLowerCase() &&
+                  entry.name.toLowerCase() === skill.name.toLowerCase()),
+            );
+            return (
+              <CapabilityCatalogRow
+                key={skill.id}
+                disabled={!canManage}
+                name={skill.name}
+                description={skill.source}
+                icon={<BookOpenIcon aria-hidden="true" />}
+                status={!canManage ? "unavailable" : installed ? "added" : "available"}
+                statusLabel={
+                  !canManage ? "Admin required" : installed ? "Installed" : "Available to add"
+                }
+                onOpen={() => onImport(skill.url)}
+              />
+            );
+          })}
       </div>
+      {resultLimit && remoteSkills.length + localSkills.length > resultLimit && !loading ? (
+        <button className="og-catalog-more" type="button" onClick={onShowMore}>
+          View all skills
+        </button>
+      ) : null}
       {loading ? <p role="status">Loading skills…</p> : null}
       {error ? (
         <div role="alert" className="og-skill-discovery-error">
@@ -144,7 +189,7 @@ function DiscoveryResults({
           </button>
         </div>
       ) : null}
-      {result && !result.items.length && !loading && !error ? (
+      {result && !remoteSkills.length && !localSkills.length && !loading && !error ? (
         <p role="status">No skills found. Try a different search.</p>
       ) : null}
     </div>