@opengeni/react 1.0.1 → 1.0.2-canary.37191796234001

package/src/skill-discovery.tsx

@@ -0,0 +1,208 @@
+import { useEffect, useState, type ReactNode } 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;
+  name: string;
+  source: string;
+  installs: number;
+  url: string;
+};
+export type SkillDiscoveryPage = { items: SkillDiscoveryItem[]; nextCursor: null };
+const discoveryCache = createDiscoveryCache<SkillDiscoveryPage>();
+
+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;
+  localSkills?: readonly {
+    id: string;
+    name: string;
+    description?: string;
+    status?: CapabilityCatalogStatus;
+    statusLabel?: string;
+    onOpen: () => void;
+  }[];
+  resultLimit?: number;
+  onShowMore?: () => void;
+  onSearch?: (() => void) | undefined;
+  /** Display name for a registry slug ("agent-browser" -> "Agent browser"). Defaults to the slug. */
+  formatName?: (name: string) => string;
+  /** The line under a remote skill ("From vercel-labs on skills.sh"). Defaults to the source. */
+  formatSource?: (source: string) => string;
+  /** The row tile. Defaults to a bare book glyph. */
+  icon?: ReactNode;
+};
+
+/** 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>{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 ? (
+        <p>Popular on skills.sh</p>
+      ) : query.length < 2 ? (
+        <p>Enter at least two characters to search skills.sh.</p>
+      ) : null}
+      <DiscoveryResults
+        key={`${props.workspaceId}:${discoveryQuery}`}
+        {...props}
+        query={discoveryQuery}
+      />
+    </section>
+  );
+}
+
+const keepText = (value: string) => value;
+const DEFAULT_ICON = <BookOpenIcon aria-hidden="true" />;
+const EMPTY_LOCAL_SKILLS: NonNullable<SkillDiscoveryProps["localSkills"]> = [];
+const EMPTY_INSTALLED_SKILLS: NonNullable<SkillDiscoveryProps["installedSkills"]> = [];
+
+function DiscoveryResults({
+  client,
+  workspaceId,
+  query,
+  canManage,
+  onImport,
+  resultLimit,
+  onShowMore,
+  localSkills = EMPTY_LOCAL_SKILLS,
+  installedSkills = EMPTY_INSTALLED_SKILLS,
+  formatName = keepText,
+  formatSource = keepText,
+  icon = DEFAULT_ICON,
+}: SkillDiscoveryProps) {
+  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;
+    const existing = discoveryCache.peek(client, cacheKey);
+    setLoading(!existing);
+    let timer: ReturnType<typeof setTimeout>;
+    const search = async (attempt: number) => {
+      try {
+        const data = await discoveryCache.read(client, cacheKey, () =>
+          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), existing ? 0 : 300);
+    return () => {
+      active = false;
+      clearTimeout(timer);
+    };
+  }, [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">
+        {localSkills.slice(0, resultLimit).map((skill) => (
+          <CapabilityCatalogRow
+            key={skill.id}
+            name={skill.name}
+            description={skill.description}
+            icon={icon}
+            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={formatName(skill.name)}
+                description={formatSource(skill.source)}
+                icon={icon}
+                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">
+          Could not load skills.
+          <button type="button" onClick={() => setRetry((value) => value + 1)}>
+            Retry
+          </button>
+        </div>
+      ) : null}
+      {result && !remoteSkills.length && !localSkills.length && !loading && !error ? (
+        <p role="status">{`No matches for “${query}”.`}</p>
+      ) : null}
+    </div>
+  );
+}

package/src/terminal.ts

@@ -0,0 +1,26 @@
+import {
+  registerSandboxTerminal,
+  type SandboxTerminalPeers,
+  type WorkbenchPeerLoader,
+} from "./lib/workbench-peers";
+
+export { SandboxTerminal } from "./components/sandbox-terminal";
+export type { SandboxTerminalProps, XtermTheme } from "./components/sandbox-terminal";
+export { registerSandboxTerminal } from "./lib/workbench-peers";
+
+async function loadTerminal(): Promise<SandboxTerminalPeers> {
+  const [{ Terminal }, { FitAddon }, { WebLinksAddon }] = await Promise.all([
+    import("@xterm/xterm"),
+    import("@xterm/addon-fit"),
+    import("@xterm/addon-web-links"),
+  ]);
+  return { Terminal, FitAddon, WebLinksAddon };
+}
+
+/** Opt in once on a terminal route; WebGL remains a separate optional import. */
+export function enableSandboxTerminal(options?: { webgl?: WorkbenchPeerLoader | undefined }): void {
+  const loadWebgl = options?.webgl;
+  registerSandboxTerminal(
+    loadWebgl ? async () => ({ ...(await loadTerminal()), loadWebgl }) : loadTerminal,
+  );
+}

package/src/timeline/activity-rail.tsx

@@ -1,11 +1,18 @@
+import { KnowledgeReceiptRow } from "./knowledge-receipt";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { GenieLoading } from "./genie-loading";
+import { useStartupDetails } from "./startup-preference";
+import { ArrowRightIcon, BotIcon, BrainCircuitIcon, MessageSquareTextIcon } from "lucide-react";
 import {
-  ArrowRightIcon,
-  BotIcon,
-  BrainCircuitIcon,
-  BrainIcon,
-  SquareTerminalIcon,
-} from "lucide-react";
-import { lazy, Suspense, useLayoutEffect, useRef } from "react";
+  createContext,
+  lazy,
+  Suspense,
+  useContext,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import { jsx as rowJsx, jsxs as rowJsxs } from "react/jsx-runtime";
 import { Markdown } from "../components/markdown";
 import { cn } from "../lib/cn";
@@ -14,11 +21,18 @@ import { defaultToolRegistry } from "./tool-renderers";
 import { useEntranceAnimation, useEntranceAnimationLive } from "./entrance";
 import type { RetainedArtifactLoader, RetainedScreenshotLoader, ToolRegistry } from "./registry";
 import { useSeenActivityIds } from "./seen-activity-ids";
-import { BodyNote, PayloadBlock, ActivityDisclosure, ToolCallTruncationProvider } from "./shared";
+import {
+  BodyNote,
+  PayloadBlock,
+  ActivityDisclosure,
+  CompactActivityContext,
+  ToolCallTruncationProvider,
+} from "./shared";
 import { toolDisplayName } from "./tool-display-name";
-import type { ActivityItem, MemoryItem, ReasoningItem, SandboxItem, WorkerItem } from "./types";
+import type { ActivityItem, AgentMessageItem, MemoryItem, WorkerItem } from "./types";
 
 const LazyFleetDecisionRow = lazy(() => import("./fleet-decision-row"));
+const LazyPlatformActivityRow = lazy(() => import("./platform-activity-row"));
 
 /* ----------------------------------------------------------------------------
    Activity rail
@@ -33,6 +47,8 @@ const LazyFleetDecisionRow = lazy(() => import("./fleet-decision-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. */
@@ -65,6 +81,7 @@ function familyOf(item: ActivityItem): string {
 
 export function ActivityRail({
   items,
+  startupActive,
   toolRegistry = defaultToolRegistry,
   onOpenSession,
   onMemoryClick,
@@ -73,6 +90,38 @@ 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 responsePending = phases.some((item) => item.phase === "provider_first_byte");
+  const loading =
+    !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).
@@ -107,7 +156,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.
@@ -115,8 +164,43 @@ export function ActivityRail({
         className,
       )}
     >
-      {items.map((item, index) => {
-        const newFamily = index > 0 && familyOf(item) !== familyOf(items[index - 1]!);
+      <AnimatePresence initial={false}>
+        {loading && !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}
+              phase={responsePending ? "waiting" : "preparing"}
+              detailsOpen={detailsOpen}
+              onShowDetails={() => setDetailsOpen((open) => !open)}
+            />
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+      {detailsOpen && !debug && !loading ? (
+        <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,
@@ -129,6 +213,7 @@ export function ActivityRail({
           <div
             key={item.id}
             data-og-timeline-row-anchor=""
+            data-og-item={item.id}
             data-og-annotation-source-key={
               item.kind === "tool-call" ? item.annotationSource?.eventId : undefined
             }
@@ -142,12 +227,46 @@ export function ActivityRail({
   );
 }
 
+/**
+ * Host message renderer for progress notes inside a rail, so notes keep the
+ * host's links and formatting. Without one, notes render the library Markdown.
+ */
+export const ActivityNoteTextContext = createContext<
+  ((text: string, item: AgentMessageItem) => ReactNode) | null
+>(null);
+
+/**
+ * Assistant commentary folded into the rail: the agent's own words about the
+ * work, quieter than an answer and aligned with the step titles.
+ */
+function ActivityNoteRow({ item }: { item: AgentMessageItem }) {
+  const renderText = useContext(ActivityNoteTextContext);
+  if (!item.text.trim()) return null;
+  return (
+    <div className="flex items-start gap-2 px-1.5 py-1.5" data-og-activity-note="">
+      <span className="size-3.5 shrink-0" aria-hidden />
+      <MessageSquareTextIcon aria-hidden className="mt-1 size-3.5 shrink-0 text-og-fg-subtle" />
+      <div
+        className="min-w-0 flex-1 text-og-sm text-og-fg-muted"
+        data-og-search-item={item.id}
+        data-og-annotation-source-key={item.annotationSource?.eventId}
+      >
+        {renderText ? (
+          renderText(item.text, item)
+        ) : (
+          <Markdown streaming={item.streaming}>{item.text}</Markdown>
+        )}
+      </div>
+    </div>
+  );
+}
+
 /** A never-reachable guard: adding an `ActivityItem` kind is now a compile error. */
 function assertNever(item: never): never {
   throw new Error(`ActivityRail: unhandled activity item ${JSON.stringify(item)}`);
 }
 
-function renderActivity(
+export function renderActivity(
   item: ActivityItem,
   toolRegistry: ToolRegistry,
   onOpenSession: ((sessionId: string) => void) | undefined,
@@ -157,7 +276,22 @@ function renderActivity(
 ) {
   switch (item.kind) {
     case "reasoning":
-      return <ReasoningRow item={item} />;
+    case "sandbox":
+    case "startup-phase":
+      return (
+        <Suspense fallback={null}>
+          <LazyPlatformActivityRow
+            item={item}
+            d={ActivityDisclosure}
+            p={PayloadBlock}
+            t={toolDisplayName}
+            b={BotIcon}
+            m={Markdown}
+            j={rowJsx}
+            s={rowJsxs}
+          />
+        </Suspense>
+      );
     case "tool-call": {
       const Renderer = toolRegistry.resolve(item);
       return (
@@ -172,10 +306,20 @@ function renderActivity(
     }
     case "worker":
       return <WorkerRow item={item} onOpenSession={onOpenSession} />;
-    case "sandbox":
-      return <SandboxRow item={item} />;
+    case "knowledge":
+      return (
+        <KnowledgeReceiptRow
+          outcome={item.outcome}
+          entryId={item.entryId}
+          fileId={item.fileId}
+          title={item.filename}
+          source={Boolean(item.fileId)}
+        />
+      );
     case "memory":
       return <MemoryRow item={item} onMemoryClick={onMemoryClick} />;
+    case "agent-message":
+      return <ActivityNoteRow item={item} />;
     case "fleet-decision":
       return (
         <Suspense fallback={null}>
@@ -193,32 +337,6 @@ function renderActivity(
   }
 }
 
-function ReasoningRow({ item }: { item: ReasoningItem }) {
-  // Reasoning recedes: a dimmer, lighter-weight title so action rows lead and
-  // thought rows sit a half-step back in the hierarchy. Body uses the same
-  // GFM markdown path as agent messages — Codex reasoning often carries
-  // headings/lists/bold that were previously shown as raw plaintext.
-  return (
-    <ActivityDisclosure
-      icon={<BrainIcon className="size-3.5" />}
-      iconTone="muted"
-      title={
-        item.streaming ? (
-          "Thinking"
-        ) : (
-          <span className="font-normal italic text-og-fg-subtle">Thought</span>
-        )
-      }
-      running={item.streaming}
-      preview={truncate(item.text, 110)}
-    >
-      <div className="text-og-base leading-6 text-og-fg-muted [&_strong]:text-og-fg-muted">
-        <Markdown streaming={item.streaming}>{item.text}</Markdown>
-      </div>
-    </ActivityDisclosure>
-  );
-}
-
 /**
  * Human labels for the memory kinds, translated at the SDK boundary so a raw
  * enum slug never renders as UI. Kept local to the library (the app has its own
@@ -317,44 +435,6 @@ function MemoryRow({
   );
 }
 
-/**
- * A human title for a sandbox operation row. Named platform operations (the lazy
- * `sandbox.provision` first-establish that now runs mid-turn) read as calm,
- * status-aware English instead of a raw op id — the box coming up should look
- * like "Starting sandbox", never an unexplained long-running command. Unnamed /
- * unknown ops fall back to the generic id-to-words {@link toolDisplayName}.
- */
-function sandboxRowTitle(item: SandboxItem): string {
-  if (item.name === "sandbox.provision") {
-    if (item.status === "failed") return "Sandbox didn’t start";
-    if (item.status === "running") return "Starting sandbox";
-    if (item.origin === "resumed") return "Sandbox reattached";
-    if (item.origin === "restored") return "Sandbox restored";
-    if (item.origin === "created") return "Sandbox created";
-    return "Sandbox ready";
-  }
-  return toolDisplayName(item.name);
-}
-
-function SandboxRow({ item }: { item: SandboxItem }) {
-  return (
-    <ActivityDisclosure
-      icon={<SquareTerminalIcon className="size-3.5" />}
-      iconTone={
-        item.status === "failed" ? "failed" : item.status === "running" ? "running" : "muted"
-      }
-      title={sandboxRowTitle(item)}
-      running={item.status === "running"}
-      failed={item.status === "failed"}
-      cancelled={item.status === "cancelled"}
-      preview={item.command ?? undefined}
-    >
-      {item.command ? <PayloadBlock label="Command" value={item.command} /> : null}
-      {item.output ? <PayloadBlock label="Output" value={item.output} /> : null}
-    </ActivityDisclosure>
-  );
-}
-
 /** Spawned/messaged worker sessions get a first-class card, not a tool row. */
 function WorkerRow({
   item,
@@ -363,6 +443,7 @@ function WorkerRow({
   item: WorkerItem;
   onOpenSession?: ((sessionId: string) => void) | undefined;
 }) {
+  const compact = useContext(CompactActivityContext);
   const running = item.status === "running";
   const failed = item.status === "failed";
   const cancelled = item.status === "cancelled";
@@ -382,6 +463,16 @@ function WorkerRow({
           : cancelled
             ? "Worker interrupted"
             : "Worker messaged";
+  if (compact) {
+    return (
+      <ActivityDisclosure
+        icon={<BotIcon className="size-3.5" />}
+        title={title}
+        preview={item.prompt}
+        running={running}
+      />
+    );
+  }
   // A worker is a first-class actor but still a STEP on the rail — a borderless
   // row (no card), aligned to its sibling tool rows: the chevron column is an
   // empty spacer (a worker doesn't expand), then the bot glyph, then the title

package/src/timeline/allowance-exhausted-row.tsx

@@ -0,0 +1,86 @@
+import type { AllowanceExhaustedRefusal } from "@opengeni/sdk";
+import { GaugeIcon } from "lucide-react";
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import {
+  allowanceLabels,
+  allowanceResetSentence,
+  formatAllowanceInstant,
+  type AllowanceLabels,
+} from "../usage/allowance-copy";
+import { useEntranceAnimation } from "./entrance";
+
+/**
+ * Replace the built-in "usage limit reached" row. Return `undefined` to keep
+ * the default for this refusal (for example, only customize member limits).
+ */
+export type RenderAllowanceExhausted = (
+  refusal: AllowanceExhaustedRefusal,
+  context: { labels: AllowanceLabels; defaultRow: ReactNode },
+) => ReactNode | undefined;
+
+type AllowancePresentation = {
+  render: RenderAllowanceExhausted | undefined;
+  labels: AllowanceLabels;
+};
+
+const AllowancePresentationContext = createContext<AllowancePresentation>({
+  render: undefined,
+  labels: allowanceLabels(),
+});
+
+export function AllowancePresentationProvider({
+  render,
+  labels,
+  children,
+}: {
+  render: RenderAllowanceExhausted | undefined;
+  labels: Partial<AllowanceLabels> | undefined;
+  children: ReactNode;
+}) {
+  const value = useMemo(() => ({ render, labels: allowanceLabels(labels) }), [render, labels]);
+  return (
+    <AllowancePresentationContext.Provider value={value}>
+      {children}
+    </AllowancePresentationContext.Provider>
+  );
+}
+
+/**
+ * A usage ceiling stopped further work. Calm by design: nothing failed, the
+ * conversation is kept, and the row says who can raise the limit and when it
+ * resets. Never the server's prose or a member identifier.
+ */
+export function AllowanceExhaustedRow({ refusal }: { refusal: AllowanceExhaustedRefusal }) {
+  const { render, labels } = useContext(AllowancePresentationContext);
+  const enter = useEntranceAnimation();
+  const workspace = refusal.scope === "workspace";
+  const defaultRow = (
+    <div
+      className={cn(
+        enter && "animate-og-enter",
+        "flex items-start gap-2.5 rounded-og-md border border-og-status-waiting/35 bg-og-status-waiting/8 px-3.5 py-2.5 text-og-menu text-og-fg",
+      )}
+      role="status"
+      data-og-allowance-exhausted={refusal.scope}
+    >
+      <GaugeIcon aria-hidden className="mt-0.5 size-4 shrink-0 text-og-status-waiting" />
+      <div className="min-w-0 flex-1">
+        <p className="font-medium">
+          {workspace ? labels.workspaceLimitReachedTitle : labels.memberLimitReachedTitle}
+        </p>
+        <p className="mt-0.5 text-og-fg-muted">
+          {workspace ? labels.workspaceRemedy : labels.memberRemedy}{" "}
+          <span
+            title={refusal.resetsAt ? formatAllowanceInstant(refusal.resetsAt) : undefined}
+            className="whitespace-nowrap"
+          >
+            {allowanceResetSentence(labels, refusal.resetsAt)}
+          </span>
+        </p>
+      </div>
+    </div>
+  );
+  return <>{render?.(refusal, { labels, defaultRow }) ?? defaultRow}</>;
+}