@opengeni/react 5.0.5-canary.0 → 5.0.5-canary.1

package/src/plugin-discovery.tsx

@@ -0,0 +1,161 @@
+import { useEffect, useRef, useState } from "react";
+import type { PluginDiscoveryItem, PluginDiscoveryPage } from "@opengeni/sdk";
+export type PluginDiscoveryProps = {
+  client: {
+    discoverPlugins(
+      workspaceId: string,
+      options?: { query?: string; provider?: string; offset?: number },
+    ): Promise<PluginDiscoveryPage>;
+  };
+  workspaceId: string;
+  query: string;
+  onOpen: (item: PluginDiscoveryItem) => void;
+};
+export function PluginDiscovery(props: PluginDiscoveryProps) {
+  const [provider, setProvider] = useState("");
+  return (
+    <section className="og-plugin-discovery" 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>
+      </header>
+      <Results
+        key={`${props.workspaceId}:${props.query}:${provider}`}
+        {...props}
+        provider={provider}
+      />
+    </section>
+  );
+}
+function Results({
+  client,
+  workspaceId,
+  query,
+  provider,
+  onOpen,
+}: PluginDiscoveryProps & { provider: string }) {
+  const [items, setItems] = useState<PluginDiscoveryItem[]>([]);
+  const [offset, setOffset] = useState(0);
+  const [next, setNext] = useState<number | null>(null);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [retry, setRetry] = useState(0);
+  const sentinel = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+    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);
+              setLoading(false);
+            }
+          },
+        );
+      },
+      offset ? 0 : 200,
+    );
+    return () => {
+      active = false;
+      clearTimeout(timer);
+    };
+  }, [client, workspaceId, query, provider, offset, retry]);
+  useEffect(() => {
+    if (loading || error || next === null || !sentinel.current) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) setOffset(next);
+      },
+      { rootMargin: "200px" },
+    );
+    observer.observe(sentinel.current);
+    return () => observer.disconnect();
+  }, [loading, error, next]);
+  return (
+    <>
+      {!loading && !error ? (
+        <p role="status">
+          {total ? `${total} plugins` : "No matching plugins. Try another search or registry."}
+        </p>
+      ) : null}
+      <div className="og-plugin-discovery-grid">
+        {items.map((item) => (
+          <button
+            key={item.id}
+            className="og-plugin-discovery-row"
+            type="button"
+            onClick={() => onOpen(item)}
+          >
+            {item.logoUrl ? (
+              <img
+                src={item.logoUrl}
+                alt=""
+                loading="lazy"
+                onError={(event) => {
+                  event.currentTarget.style.display = "none";
+                }}
+              />
+            ) : 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}
+      {error ? (
+        <p role="alert">
+          Couldn’t load plugins.{" "}
+          <button type="button" onClick={() => setRetry((value) => value + 1)}>
+            Retry
+          </button>
+        </p>
+      ) : null}
+      <div ref={sentinel}>
+        {next !== null && !loading && !error ? (
+          <button className="og-plugin-more" type="button" onClick={() => setOffset(next)}>
+            Show more plugins
+          </button>
+        ) : null}
+      </div>
+    </>
+  );
+}

package/src/session-ui.ts

@@ -43,3 +43,6 @@ export type {
   SessionChromeSignalTone,
 } from "./components/session-chrome";
 export { SessionCommandsPanel } from "./components/session-commands-panel";
+export { StartupTimings } from "./timeline/startup-timings";
+export { useStartupDetails, setStartupDetails } from "./timeline/startup-preference";
+export type { GenieLoadingOptions } from "./timeline/genie-loading";

package/src/skill-discovery.tsx

@@ -0,0 +1,152 @@
+import { useEffect, useState } from "react";
+
+export type SkillDiscoveryItem = {
+  id: string;
+  name: string;
+  source: string;
+  installs: number;
+  url: string;
+};
+export type SkillDiscoveryPage = { items: SkillDiscoveryItem[]; nextCursor: null };
+export type SkillDiscoveryClient = {
+  searchPublicSkills(workspaceId: string, query: string): Promise<SkillDiscoveryPage>;
+};
+export type SkillDiscoveryProps = {
+  installedSkills?: readonly { name: string; repositoryUrl: string; sourceUrl: string }[];
+  client: SkillDiscoveryClient;
+  workspaceId: string;
+  query: string;
+  onImport: (url: string) => void;
+  canManage: boolean;
+  onSearch?: (() => void) | undefined;
+};
+
+/** Host-owned query and import flow; browse presentation is reusable independently. */
+export function SkillDiscovery(props: SkillDiscoveryProps) {
+  const query = props.query.trim();
+  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>
+      </header>
+      {!query && props.onSearch ? (
+        <button type="button" className="og-skill-discovery-search" onClick={props.onSearch}>
+          Search skills
+        </button>
+      ) : null}
+      <DiscoveryResults key={`${props.workspaceId}:${query}`} {...props} query={query} />
+    </section>
+  );
+}
+
+const EMPTY_INSTALLED_SKILLS: NonNullable<SkillDiscoveryProps["installedSkills"]> = [];
+
+function DiscoveryResults({
+  client,
+  workspaceId,
+  query,
+  canManage,
+  onImport,
+  installedSkills = EMPTY_INSTALLED_SKILLS,
+}: SkillDiscoveryProps) {
+  const [result, setResult] = useState<SkillDiscoveryPage | null>(null);
+  const [loading, setLoading] = useState(query.length >= 2);
+  const [error, setError] = useState(false);
+  const [retry, setRetry] = useState(0);
+  useEffect(() => {
+    let active = true;
+    setError(false);
+    if (query.length < 2) return;
+    setLoading(true);
+    let timer: ReturnType<typeof setTimeout>;
+    const search = async (attempt: number) => {
+      try {
+        const data = await client.searchPublicSkills(workspaceId, query);
+        if (!active) return;
+        setResult(data);
+        setLoading(false);
+      } catch (cause) {
+        if (!active) return;
+        const status =
+          typeof cause === "object" && cause !== null && "status" in cause
+            ? cause.status
+            : undefined;
+        const transient =
+          cause instanceof TypeError ||
+          (typeof status === "number" && status >= 500 && status <= 599);
+        if (attempt === 0 && transient) {
+          timer = setTimeout(() => void search(1), 750);
+          return;
+        }
+        setError(true);
+        setLoading(false);
+      }
+    };
+    timer = setTimeout(() => void search(0), 300);
+    return () => {
+      active = false;
+      clearTimeout(timer);
+    };
+  }, [client, workspaceId, query, retry]);
+  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>
+          );
+        })}
+      </div>
+      {loading ? <p role="status">Loading skills…</p> : null}
+      {error ? (
+        <div role="alert" className="og-skill-discovery-error">
+          Could not load skills.
+          <button type="button" onClick={() => setRetry((value) => value + 1)}>
+            Retry
+          </button>
+        </div>
+      ) : null}
+      {result && !result.items.length && !loading && !error ? (
+        <p role="status">No skills found. Try a different search.</p>
+      ) : null}
+    </div>
+  );
+}

package/src/timeline/activity-rail.tsx

@@ -1,5 +1,8 @@
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { GenieLoading } from "./genie-loading";
+import { useStartupDetails } from "./startup-preference";
 import { ArrowRightIcon, BotIcon, BrainCircuitIcon } from "lucide-react";
-import { lazy, Suspense, useLayoutEffect, useRef } from "react";
+import { lazy, Suspense, useLayoutEffect, useRef, useState } from "react";
 import { jsx as rowJsx, jsxs as rowJsxs } from "react/jsx-runtime";
 import { Markdown } from "../components/markdown";
 import { cn } from "../lib/cn";
@@ -28,6 +31,8 @@ const LazyPlatformActivityRow = lazy(() => import("./platform-activity-row"));
 
 export type ActivityRailProps = {
   items: ActivityItem[];
+  /** The owning turn remains active between individual phase receipts. */
+  startupActive?: boolean;
   /** Renderer registry for tool calls. Defaults to {@link defaultToolRegistry}. */
   toolRegistry?: ToolRegistry | undefined;
   /** Drill into a spawned worker session. */
@@ -60,6 +65,7 @@ function familyOf(item: ActivityItem): string {
 
 export function ActivityRail({
   items,
+  startupActive,
   toolRegistry = defaultToolRegistry,
   onOpenSession,
   onMemoryClick,
@@ -68,6 +74,37 @@ export function ActivityRail({
   bare,
   className,
 }: ActivityRailProps) {
+  const debug = useStartupDetails();
+  const reducedMotion = useReducedMotion();
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const phases = items.filter((item) => item.kind === "startup-phase");
+  // Empty reasoning envelopes can arrive before any visible model output.
+  const hasWork = items.some(
+    (item) =>
+      item.kind !== "startup-phase" && (item.kind !== "reasoning" || item.text.trim().length > 0),
+  );
+  const interrupted = phases.some(
+    (item) => item.status === "failed" || item.status === "cancelled",
+  );
+  const providerResponded = phases.some(
+    (item) => item.phase === "provider_first_byte" && item.status === "complete",
+  );
+  const preparing =
+    !hasWork &&
+    !interrupted &&
+    (startupActive ?? (!providerResponded && phases.some((item) => item.status === "running")));
+  const visibleItems =
+    debug || detailsOpen
+      ? items
+      : items.filter((item) =>
+          item.kind === "startup-phase"
+            ? item.status === "failed" || item.status === "cancelled"
+            : item.kind !== "reasoning" || item.text.trim().length > 0,
+        );
+  const startedAt = phases.reduce(
+    (first, item) => (item.startedAt < first ? item.startedAt : first),
+    phases[0]?.startedAt ?? "",
+  );
   const enterMounted = useEntranceAnimation();
   // Live gate: rails born during bulk capture enter=false forever; with a
   // seen-id map we still want later live appends to fade (ids gate remounts).
@@ -102,7 +139,7 @@ export function ActivityRail({
         // Rows sit TIGHT by default (gap-0.5) so a same-family run reads as one
         // calm cluster; a family change opens real breathing room (mt-3) below,
         // so a long rail reads as a few clusters, not a metronome of rows.
-        "flex flex-col gap-0.5",
+        "relative flex flex-col gap-0.5",
         !bare && "border-l-2 border-og-border pl-3 sm:pl-4",
         // Whole-rail enter: standalone rails only (no seen-id map). Inside
         // MessageTimeline, unknown ids take per-row enter — remounts stay quiet.
@@ -110,8 +147,42 @@ export function ActivityRail({
         className,
       )}
     >
-      {items.map((item, index) => {
-        const newFamily = index > 0 && familyOf(item) !== familyOf(items[index - 1]!);
+      <AnimatePresence initial={false}>
+        {preparing && !debug ? (
+          <motion.div
+            key="startup"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{
+              opacity: 0,
+              height: 0,
+              pointerEvents: "none",
+            }}
+            transition={{
+              height: { duration: reducedMotion ? 0 : 0.32, ease: [0.22, 1, 0.36, 1] },
+              opacity: { duration: reducedMotion ? 0 : 0.16 },
+            }}
+            style={{ overflow: "hidden" }}
+          >
+            <GenieLoading
+              startedAt={startedAt}
+              detailsOpen={detailsOpen}
+              onShowDetails={() => setDetailsOpen((open) => !open)}
+            />
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+      {detailsOpen && !debug && !preparing ? (
+        <button
+          type="button"
+          className="og-genie-details self-start"
+          onClick={() => setDetailsOpen(false)}
+        >
+          Hide startup details
+        </button>
+      ) : null}
+      {visibleItems.map((item, index) => {
+        const newFamily = index > 0 && familyOf(item) !== familyOf(visibleItems[index - 1]!);
         const row = renderActivity(
           item,
           toolRegistry,

package/src/timeline/genie-loading.tsx

@@ -0,0 +1,112 @@
+import { ThinkingOrb } from "thinking-orbs";
+import { useThemeType } from "../lib/use-theme-type";
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+
+export type GenieLoadingRenderProps = {
+  startedAt: string;
+  detailsOpen: boolean;
+  onShowDetails: () => void;
+};
+
+export type GenieLoadingOptions = {
+  /** Replace the visual while preserving SDK loading visibility and transitions. */
+  render?: (props: GenieLoadingRenderProps) => ReactNode;
+  phrases?: readonly string[];
+  /** Public options stay independent of the renderer's declaration layout. */
+  orb?: {
+    state?:
+      | "working"
+      | "searching"
+      | "solving"
+      | "listening"
+      | "connecting"
+      | "weaving"
+      | "composing"
+      | "breathing"
+      | "shaping";
+    size?: 64 | 20;
+    speed?: number;
+  };
+};
+export const GenieLoadingOptionsContext = createContext<GenieLoadingOptions | undefined>(undefined);
+
+const PHRASES = [
+  "Polishing the lamp…",
+  "Consulting the carpet…",
+  "Untangling wishes…",
+  "Summoning a little cleverness…",
+  "Checking the fine print on infinity…",
+  "Warming up the abracadabra…",
+  "Rearranging the stars…",
+  "Negotiating with the lamp…",
+  "Dusting off a thousand years…",
+  "Wishful thinking…",
+  "Decanting a little magic…",
+  "Finding the good stardust…",
+  "Fluffing the magic carpet…",
+  "Putting a wish into motion…",
+  "A little hocus. A little pocus…",
+];
+
+/** Decorative copy never substitutes for a failure or claims measurable progress. */
+export function GenieLoading({
+  startedAt,
+  onShowDetails,
+  detailsOpen = false,
+}: {
+  startedAt: string;
+  onShowDetails: () => void;
+  detailsOpen?: boolean;
+}) {
+  const options = useContext(GenieLoadingOptionsContext);
+  const phrases = options?.phrases?.length ? options.phrases : PHRASES;
+  const theme = useThemeType(undefined);
+  const [phrase, setPhrase] = useState(0);
+  const [showDetails, setShowDetails] = useState(false);
+  const [slow, setSlow] = useState(false);
+  useEffect(() => {
+    const update = () => {
+      setShowDetails(Date.now() - Date.parse(startedAt) >= 15_000);
+      setSlow(Date.now() - Date.parse(startedAt) >= 30_000);
+      if (!document.hidden) setPhrase(Math.floor(Math.random() * phrases.length));
+    };
+    update();
+    const timer = window.setInterval(update, 5_000);
+    return () => window.clearInterval(timer);
+  }, [startedAt, phrases]);
+  if (options?.render) return options.render({ startedAt, detailsOpen, onShowDetails });
+  return (
+    <div className="og-genie-loading">
+      <div
+        className="og-genie-orb"
+        aria-hidden="true"
+        style={{
+          width: options?.orb?.size ?? 64,
+          height: options?.orb?.size ?? 64,
+          flexBasis: options?.orb?.size ?? 64,
+        }}
+      >
+        <ThinkingOrb state="searching" size={64} theme={theme} speed={0.8} {...options?.orb} />
+      </div>
+      <div className="og-genie-copy">
+        <span className="sr-only" role="status">
+          {slow ? "Preparing your task. Taking longer than usual." : "Preparing your task."}
+        </span>
+        <span key={slow ? "slow" : phrase} className="og-genie-phrase" aria-hidden="true">
+          {slow ? "A little longer than usual…" : phrases[phrase % phrases.length]}
+        </span>
+        {showDetails || detailsOpen ? (
+          <button
+            type="button"
+            className="og-genie-details"
+            aria-expanded={detailsOpen}
+            onClick={onShowDetails}
+          >
+            {detailsOpen ? "Hide details" : "Behind the magic"}
+            <span aria-hidden="true"> ↗</span>
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/timeline/startup-preference.ts

@@ -0,0 +1,33 @@
+import { useSyncExternalStore } from "react";
+
+const KEY = "opengeni:startup-details:v1";
+const EVENT = "opengeni:startup-details-changed";
+let fallback = false;
+function snapshot() {
+  try {
+    return window.localStorage.getItem(KEY) === "true";
+  } catch {
+    return fallback;
+  }
+}
+function subscribe(listener: () => void) {
+  window.addEventListener(EVENT, listener);
+  window.addEventListener("storage", listener);
+  return () => {
+    window.removeEventListener(EVENT, listener);
+    window.removeEventListener("storage", listener);
+  };
+}
+export function setStartupDetails(value: boolean) {
+  fallback = value;
+  try {
+    window.localStorage.setItem(KEY, String(value));
+  } catch {
+    /* Private storage is optional. */
+  }
+  window.dispatchEvent(new Event(EVENT));
+}
+/** Presentation preference only. Startup evidence is always retained. */
+export function useStartupDetails() {
+  return useSyncExternalStore(subscribe, snapshot, () => false);
+}