@opengeni/react 6.0.0-canary.1 → 6.1.0-canary.0

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,39 @@ export type PluginDiscoveryProps = {
   };
   workspaceId: string;
   query: string;
+  /** 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("");
   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" },
+            ].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 +64,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 +114,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 +123,7 @@ function Results({
     );
     observer.observe(sentinel.current);
     return () => observer.disconnect();
-  }, [loading, error, next]);
+  }, [loading, error, next, resultLimit]);
   return (
     <>
       {!loading && !error ? (
@@ -105,39 +132,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 +160,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/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>

package/src/timeline/projection.ts

@@ -129,10 +129,20 @@ function timelineAnnotationToolOutputText(output: unknown): string | null {
   return text.length > 0 ? text : null;
 }
 
-export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
+export function buildTimeline(
+  events: SessionEvent[],
+  options: { partialStart?: boolean } = {},
+): TimelineItem[] {
   const items: TimelineItem[] = [];
   const prescan = prescanTurnAnchors(events);
   const ordered = orderTimelineEvents(events, prescan);
+  // A bounded replay can begin halfway through a message (including inside an
+  // interactive fence). Never parse that suffix as a complete Markdown source.
+  // Keep the raw events available for pagination; a completed receipt restores
+  // the authoritative message without requiring an unbounded history fetch.
+  let completeHistoryPrefix = options.partialStart !== true;
+  const knownMessagePrefixTurns = new Set<string | null>();
+  const incompleteMessageKeys = new Set<string>();
   const pendingWaitOutcomeByTurn = new Map<string | null, PendingWaitOutcome>();
   const latestAgentResponseByTurn = new Map<string | null, TrackedAgentResponse>();
   const identifiedMessages = new Map<string, AgentMessageItem>();
@@ -299,6 +309,18 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
   for (const event of ordered) {
     const payload = asRecord(event.payload);
     const turnId = event.turnId ?? null;
+    if (event.type === "session.created") {
+      completeHistoryPrefix = true;
+    } else if (
+      event.type === "turn.started" ||
+      (event.type === "user.message" &&
+        payload.delivery !== "steer" &&
+        payload.routing !== "accepted_for_steering")
+    ) {
+      // Accepted Steer is visible before its replacement turn starts. It says
+      // nothing about the prefix of a still-streaming message from the old turn.
+      knownMessagePrefixTurns.add(turnId);
+    }
     startupEvent = event;
     startupTurnId = turnId;
     startupAttemptId =
@@ -415,6 +437,13 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
         }
         const messageId = stringValue(payload.messageId);
         const messageKey = messageId ? JSON.stringify([turnId, messageId]) : null;
+        if (
+          (!completeHistoryPrefix && !knownMessagePrefixTurns.has(turnId)) ||
+          (messageKey && incompleteMessageKeys.has(messageKey))
+        ) {
+          if (messageKey) incompleteMessageKeys.add(messageKey);
+          break;
+        }
         const identified = messageKey ? identifiedMessages.get(messageKey) : undefined;
         if (identified) {
           if (identified.annotationSource?.eventType !== "agent.message.completed") {
@@ -470,6 +499,7 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
       }
 
       case "agent.message.completed": {
+        knownMessagePrefixTurns.add(turnId);
         const text = stringValue(payload.text);
         const messageId = stringValue(payload.messageId);
         const messageKey = messageId ? JSON.stringify([turnId, messageId]) : null;

package/src/timeline/turn-summary.tsx

@@ -125,8 +125,8 @@ export type TurnSummaryProps = {
   items: ActivityItem[];
   /**
    * The settled verdict — or absent for a completed CLUSTER of a still-running
-   * turn, which folds neutrally: no verdict glyph (the turn has none yet), a
-   * quiet pulse dot in its place so alignment and the running feel both hold.
+   * turn, which folds neutrally. Only unfinished activity inside this summary
+   * animates; the parent turn may still be composing a response elsewhere.
    */
   outcome?: TurnOutcome | undefined;
   /** A short failure reason shown inline on a failed chip (never hidden). */
@@ -447,7 +447,7 @@ export function TurnSummary({
             />
             {/* Completion is the quiet default and needs no repeated glyph. Failed,
             cancelled, and still-running folds retain a visible state marker. */}
-            {outcome === "complete" || (liveHeader && !outcome) ? null : (
+            {outcome === "complete" || (!outcome && (liveHeader || context.settled)) ? null : (
               <span
                 className={cn(
                   "inline-flex shrink-0 items-center justify-center",

package/styles/compiled.css

@@ -1623,6 +1623,9 @@
 :where(.og-root).min-h-14,:where(.og-root) .min-h-14 {
     min-height: calc(var(--spacing) * 14);
   }
+:where(.og-root).min-h-32,:where(.og-root) .min-h-32 {
+    min-height: calc(var(--spacing) * 32);
+  }
 :where(.og-root).min-h-56,:where(.og-root) .min-h-56 {
     min-height: calc(var(--spacing) * 56);
   }
@@ -1785,6 +1788,9 @@
 :where(.og-root).max-w-md,:where(.og-root) .max-w-md {
     max-width: var(--container-md);
   }
+:where(.og-root).max-w-prose,:where(.og-root) .max-w-prose {
+    max-width: 65ch;
+  }
 :where(.og-root).max-w-sm,:where(.og-root) .max-w-sm {
     max-width: var(--container-sm);
   }
@@ -4173,6 +4179,11 @@
       padding-top: calc(var(--spacing) * 0);
     }
   }
+:where(.og-root).first\:pt-1,:where(.og-root) .first\:pt-1 {
+    &:first-child {
+      padding-top: calc(var(--spacing) * 1);
+    }
+  }
 :where(.og-root).first\:pl-0,:where(.og-root) .first\:pl-0 {
     &:first-child {
       padding-left: calc(var(--spacing) * 0);
@@ -5020,6 +5031,11 @@
       }
     }
   }
+:where(.og-root).motion-safe\:animate-spin,:where(.og-root) .motion-safe\:animate-spin {
+    @media (prefers-reduced-motion: no-preference) {
+      animation: og-spin 1s linear infinite;
+    }
+  }
 :where(.og-root).motion-reduce\:animate-none,:where(.og-root) .motion-reduce\:animate-none {
     @media (prefers-reduced-motion: reduce) {
       animation: none;
@@ -5544,6 +5560,17 @@
       color: var(--color-fg-muted);
     }
   }
+:where(.og-root).\[\&\+section\]\:border-t,:where(.og-root) .\[\&\+section\]\:border-t {
+    &+section {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 1px;
+    }
+  }
+:where(.og-root).\[\&\+section\]\:border-og-border,:where(.og-root) .\[\&\+section\]\:border-og-border {
+    &+section {
+      border-color: var(--og-color-border);
+    }
+  }
 :where(.og-root).\[\&\:\:-webkit-details-marker\]\:hidden,:where(.og-root) .\[\&\:\:-webkit-details-marker\]\:hidden {
     &::-webkit-details-marker {
       display: none;