@opengeni/react 3.3.2 → 3.4.0

package/src/timeline/agent-row.tsx

@@ -0,0 +1,231 @@
+import { ArrowUpRightIcon, ChevronRightIcon } from "lucide-react";
+import { useContext, useState, type ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { useForcedDefaultOpen } from "./disclosure-context";
+import type { AgentTitleParts } from "./platform-activity-presentation";
+import { ActivityDisclosure, CompactActivityContext } from "./shared";
+
+/* ----------------------------------------------------------------------------
+   Agent row
+
+   One row for everything that crosses between agents: spawning one, messaging
+   one, and every update one sends back. It names the agent, previews what was
+   said, opens the full text in place, and deep-links to the agent's session.
+   It reuses the rail's row geometry (chevron, icon, title) so it reads as a
+   sibling of tool rows, and spends color only on failure.
+   -------------------------------------------------------------------------- */
+
+export type AgentRowProps = {
+  icon: ReactNode;
+  title: AgentTitleParts;
+  /** Quiet secondary text shown while collapsed. */
+  preview?: string | null | undefined;
+  /** Two lines suit inbound messages; spawns and messages use one. */
+  previewLines?: 1 | 2 | undefined;
+  /** Short trailing note after the title, e.g. "+2 earlier". */
+  meta?: string | null | undefined;
+  /** The agent session the row deep-links to. */
+  sessionId?: string | null | undefined;
+  onOpenSession?: ((sessionId: string) => void) | undefined;
+  running?: boolean | undefined;
+  failed?: boolean | undefined;
+  cancelled?: boolean | undefined;
+  /** Expanded body; the row is static when absent. */
+  children?: ReactNode | undefined;
+};
+
+export function AgentRow({
+  icon,
+  title,
+  preview,
+  previewLines = 1,
+  meta,
+  sessionId,
+  onOpenSession,
+  running,
+  failed,
+  cancelled,
+  children,
+}: AgentRowProps) {
+  const compact = useContext(CompactActivityContext);
+  const forcedDefaultOpen = useForcedDefaultOpen();
+  const [open, setOpen] = useState(forcedDefaultOpen ?? false);
+  if (compact) {
+    return (
+      <ActivityDisclosure
+        icon={icon}
+        title={title.text}
+        preview={preview ?? undefined}
+        running={running}
+        failed={failed}
+        cancelled={cancelled}
+      />
+    );
+  }
+  const hasBody = children != null;
+  const canOpen = Boolean(sessionId && onOpenSession);
+  const openLabel = title.name ? `Open ${title.name}` : "Open agent session";
+  const status = failed ? "failed" : cancelled ? "cancelled" : running ? "running" : undefined;
+
+  const inner = (
+    <>
+      {hasBody ? (
+        <ChevronRightIcon
+          aria-hidden
+          className="mt-[3px] size-3.5 shrink-0 text-og-fg-subtle transition-transform duration-[var(--_og-duration-disclose)] ease-og-in-out group-data-[state=open]/agent:rotate-90"
+        />
+      ) : (
+        <span className="size-3.5 shrink-0" aria-hidden />
+      )}
+      <span
+        aria-hidden
+        className={cn(
+          "mt-[3px] shrink-0 [&_svg]:size-3.5",
+          failed ? "text-og-status-failed" : "text-og-fg-subtle",
+        )}
+      >
+        {icon}
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="flex min-w-0 items-baseline gap-2">
+          <span
+            className={cn(
+              "min-w-0 truncate text-og-base leading-5",
+              running && "og-shimmer-text",
+              failed && "text-og-status-failed",
+            )}
+          >
+            {title.name ? (
+              <>
+                {title.before ? <span className="text-og-fg-muted">{title.before}</span> : null}
+                <span className={cn("font-medium", failed ? undefined : "text-og-fg")}>
+                  {title.name}
+                </span>
+                {title.after ? <span className="text-og-fg-muted">{title.after}</span> : null}
+              </>
+            ) : (
+              <span className={cn("font-medium", failed ? undefined : "text-og-fg")}>
+                {title.text}
+              </span>
+            )}
+          </span>
+          {meta ? (
+            <span className="shrink-0 text-og-xs text-og-fg-subtle tabular-nums">{meta}</span>
+          ) : null}
+        </span>
+        {preview && !open ? (
+          <span
+            data-og-agent-preview=""
+            className={cn(
+              "mt-0.5 block text-og-sm leading-5 text-og-fg-muted",
+              previewLines === 2 ? "line-clamp-2 break-words" : "truncate",
+            )}
+          >
+            {preview}
+          </span>
+        ) : null}
+      </span>
+      {failed ? (
+        <span className="inline-flex shrink-0 items-center gap-1.5 self-center font-og-mono text-og-xs leading-none text-og-status-failed">
+          <span className="size-1.5 rounded-full bg-og-status-failed" />
+          failed
+        </span>
+      ) : cancelled ? (
+        <span className="og-cancelled-chip shrink-0 self-center font-og-mono text-og-xs leading-none text-og-fg-subtle">
+          interrupted
+        </span>
+      ) : null}
+      {canOpen && sessionId && onOpenSession ? (
+        <button
+          type="button"
+          aria-label={openLabel}
+          title={openLabel}
+          onClick={(event) => {
+            event.stopPropagation();
+            onOpenSession(sessionId);
+          }}
+          onKeyDown={(event) => event.stopPropagation()}
+          className={cn(
+            "-my-0.5 inline-grid size-6 shrink-0 place-items-center rounded-og-sm text-og-fg-subtle",
+            "outline-hidden transition-colors duration-150 hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent",
+            "pointer-coarse:size-10",
+          )}
+        >
+          <ArrowUpRightIcon aria-hidden className="size-3.5" />
+        </button>
+      ) : null}
+    </>
+  );
+
+  const rowClass = cn(
+    "group/agent flex w-full min-w-0 items-start gap-2 rounded-og-sm px-1.5 py-1.5 text-left",
+    "pointer-coarse:min-h-11 pointer-coarse:py-2.5",
+  );
+
+  if (!hasBody) {
+    return (
+      <div data-og-agent-row="" data-status={status} className={rowClass}>
+        {inner}
+      </div>
+    );
+  }
+
+  // A div with button semantics (like ActivityDisclosure) so the open-session
+  // button can live inside the row without nesting native buttons.
+  return (
+    <div data-og-agent-row="" data-status={status}>
+      <div
+        role="button"
+        tabIndex={0}
+        aria-expanded={open}
+        data-state={open ? "open" : "closed"}
+        onClick={() => setOpen((previous) => !previous)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            setOpen((previous) => !previous);
+          }
+        }}
+        className={cn(
+          rowClass,
+          "cursor-pointer outline-hidden transition-colors duration-150 hover:bg-og-surface-1",
+          "focus-visible:ring-2 focus-visible:ring-og-accent",
+        )}
+      >
+        {inner}
+      </div>
+      {open ? (
+        <div className="mb-2 ml-[2.125rem] mr-1.5 mt-0.5 flex flex-col gap-2 border-l border-og-border pl-4 text-og-sm leading-6 text-og-fg animate-og-expand">
+          {children}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+/** Plain multi-line text for an expanded agent row. */
+export function AgentRowText({ children }: { children: string }) {
+  return <p className="whitespace-pre-wrap break-words">{children}</p>;
+}
+
+/** A labelled section inside an expanded agent row (Brief, Report, Evidence). */
+export function AgentRowSection({
+  label,
+  children,
+  muted,
+}: {
+  label: string;
+  children: string;
+  muted?: boolean | undefined;
+}) {
+  return (
+    <div className="min-w-0">
+      <p className="text-og-xs font-medium text-og-fg-subtle">{label}</p>
+      <p
+        className={cn("whitespace-pre-wrap break-words", muted ? "text-og-fg-muted" : "text-og-fg")}
+      >
+        {children}
+      </p>
+    </div>
+  );
+}

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}</>;
+}

package/src/timeline/compaction-copy.ts

@@ -0,0 +1,115 @@
+import type { ContextCompactionItem } from "./types";
+
+/** Headline for a compaction that could not produce a checkpoint. */
+export const COMPACTION_FAILURE_TITLE = "Couldn’t compact conversation history";
+
+/**
+ * Headline for a compaction cut short by its own attempt's cancellation (for
+ * example a worker restarting during a deploy). Not a failure: the recovered
+ * attempt checks again and compacts if the history still needs it.
+ */
+export const COMPACTION_INTERRUPTED_TITLE = "Compaction interrupted";
+
+/** Headline for a settled `skipped` compaction landmark. */
+export function compactionSkipTitle(reason: string | null): string {
+  return reason === "interrupted" ? COMPACTION_INTERRUPTED_TITLE : COMPACTION_FAILURE_TITLE;
+}
+
+/** Why a definitive provider rejection repeats; shown behind Details. */
+export const COMPACTION_REJECTION_NOTE =
+  "The provider rejects this request the same way until the conversation changes.";
+
+/**
+ * Subtitle for a settled compaction landmark. Kept short: a definitive provider
+ * rejection withholds the generic retry promise, names the one recovery step,
+ * and moves its identifiers behind Details ({@link compactionFailureDetails}).
+ */
+export function compactionSkipSubtitle(
+  reason: string | null,
+  providerRejection: ContextCompactionItem["providerRejection"] = null,
+): string {
+  switch (reason) {
+    case "no_history":
+      return "No active history to compact";
+    case "replacement_not_smaller":
+      return "Checkpoint would not reduce memory size";
+    case "replacement_exceeds_model_budget":
+      return "Checkpoint exceeds this model's context budget. Chat history is unchanged.";
+    case "replacement_unchanged":
+      return "Checkpoint made no progress";
+    case "interrupted":
+      return "It will retry if still needed. Chat history is unchanged.";
+    case "summarization_failed":
+      return providerRejection
+        ? "Chat history is unchanged. If your next message fails too, start a new session."
+        : "Request it again to retry. Chat history is unchanged.";
+    default:
+      return "Compaction was not needed. Chat history is unchanged.";
+  }
+}
+
+export type CompactionFailureDetails = {
+  /** One plain sentence on why it failed, when known. */
+  note: string | null;
+  /** Provider identifiers or the recorded error text, in display order. */
+  facts: Array<{ label: string; value: string }>;
+};
+
+/**
+ * Technical diagnostics for a failed compaction landmark, or null when it has
+ * none: a definitive provider rejection lists its content-free identifiers;
+ * any other failure shows the turn's recorded error text. Presentation only.
+ */
+export function compactionFailureDetails(
+  item: Pick<ContextCompactionItem, "phase" | "skipReason" | "providerRejection" | "failureDetail">,
+): CompactionFailureDetails | null {
+  if (item.phase !== "skipped" || item.skipReason !== "summarization_failed") return null;
+  const rejection = item.providerRejection;
+  if (!rejection) {
+    const recorded = item.failureDetail?.trim();
+    return recorded ? { note: null, facts: [{ label: "Error", value: recorded }] } : null;
+  }
+  const facts = [
+    {
+      label: "Response",
+      value: [`HTTP ${rejection.httpStatus}`, rejection.type, rejection.code]
+        .filter((part): part is string => Boolean(part))
+        .join(" · "),
+    },
+  ];
+  if (rejection.param) facts.push({ label: "Parameter", value: rejection.param });
+  if (rejection.requestId) facts.push({ label: "Request ID", value: rejection.requestId });
+  return { note: COMPACTION_REJECTION_NOTE, facts };
+}
+
+const COMPACTION_TURN_FAILURE_PREFIX = "compaction summarization failed:";
+
+/**
+ * Short chip copy for a turn's failure reason. A compaction failure records the
+ * raw provider text after a fixed prefix; the chip names the outcome instead
+ * and keeps the recorded text as `detail` (a hover title). Every other reason
+ * passes through unchanged.
+ */
+export function presentTurnFailureText(
+  failureText: string | null | undefined,
+): { summary: string; detail?: string } | null {
+  const text = failureText?.trim();
+  if (!text) return null;
+  if (text.toLowerCase().startsWith(COMPACTION_TURN_FAILURE_PREFIX)) {
+    return { summary: COMPACTION_FAILURE_TITLE, detail: text };
+  }
+  return { summary: text };
+}
+
+/** `HTTP 400 invalid_request_error, param input[3].encrypted_content`; identifiers only. */
+export function describeCompactionProviderRejection(
+  rejection: NonNullable<ContextCompactionItem["providerRejection"]>,
+): string {
+  const parts = [
+    `HTTP ${rejection.httpStatus}${rejection.type ? ` ${rejection.type}` : ""}${
+      rejection.code ? ` ${rejection.code}` : ""
+    }`,
+  ];
+  if (rejection.param) parts.push(`param ${rejection.param}`);
+  return parts.join(", ");
+}

package/src/timeline/fleet-decision-projection.ts

@@ -8,6 +8,7 @@ const FLEET_ACTUAL_REASONS = [
   "rotation",
   "active",
   "all_capped",
+  "allocator_disabled",
   "none",
 ] as const;
 const FLEET_SHADOW_OUTCOMES = ["selected", "paced", "none"] as const;
@@ -334,7 +335,7 @@ function fleetDecisionSemanticsAreConsistent(input: {
     input.actualOutcome === "selected"
       ? ["lease_reused", "pin", "rotation", "active"].includes(input.actualReason)
       : input.actualOutcome === "waiting"
-        ? input.actualReason === "all_capped"
+        ? ["all_capped", "allocator_disabled"].includes(input.actualReason)
         : input.actualReason === "none";
   const shadowConsistent =
     input.shadowOutcome === "selected"

package/src/timeline/fleet-decision-row.tsx

@@ -28,6 +28,7 @@ const FLEET_ACTUAL_REASON_LABEL: Record<FleetDecisionItem["actualReason"], strin
   rotation: "Rotated for capacity",
   active: "Used the active subscription",
   all_capped: "All observed subscriptions were capped",
+  allocator_disabled: "The policy-selected subscription was disabled for new allocations",
   none: "No production candidate was selected",
 };
 

package/src/timeline/focus-sequence.ts

@@ -0,0 +1,44 @@
+import type { TimelineGroup, TimelineItem } from "./types";
+
+/*
+ * Landing on a moment in a session: an inbox item or a phone notification
+ * points at the durable event that raised it, and the timeline opens on the
+ * row that holds that moment. Events that render no row of their own (an
+ * agent's notification, a goal change) land on the nearest row before them.
+ */
+
+function itemSequences(item: TimelineItem): number[] {
+  const sources =
+    item.sourceEvents ??
+    ("annotationSource" in item && item.annotationSource ? [item.annotationSource] : []);
+  return sources.map((source) => source.sequence);
+}
+
+/** Every durable event sequence a group renders, nested work included. */
+export function timelineGroupSequences(group: TimelineGroup): number[] {
+  if (group.kind === "item") return itemSequences(group.item);
+  if (group.kind === "turn") return group.groups.flatMap(timelineGroupSequences);
+  return [
+    ...group.items.flatMap((item) => itemSequences(item)),
+    ...(group.work?.details.flatMap(timelineGroupSequences) ?? []),
+  ];
+}
+
+/**
+ * The index of the group to land on for `sequence`: the group that holds it,
+ * else the last group that starts before it. -1 when every loaded group is
+ * later (the moment is in older history) or nothing is loaded.
+ */
+export function timelineGroupIndexAtSequence(
+  groups: readonly TimelineGroup[],
+  sequence: number,
+): number {
+  let landing = -1;
+  for (let index = 0; index < groups.length; index += 1) {
+    const sequences = timelineGroupSequences(groups[index]!);
+    if (sequences.length === 0) continue;
+    if (sequences.includes(sequence)) return index;
+    if (Math.min(...sequences) <= sequence) landing = index;
+  }
+  return landing;
+}

package/src/timeline/genie-copy.ts

@@ -0,0 +1,19 @@
+/** Decorative loading copy shared by every renderer of the preparing state. */
+export const GENIE_PREPARING_PHRASES: readonly string[] = [
+  "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…",
+];
+export const GENIE_WAITING_PHRASES: readonly string[] = ["Waiting for a response…"];

package/src/timeline/genie-loading.tsx

@@ -0,0 +1,143 @@
+import { ThinkingOrb } from "thinking-orbs";
+import { useThemeType } from "../lib/use-theme-type";
+import { GENIE_PREPARING_PHRASES, GENIE_WAITING_PHRASES } from "./genie-copy";
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+
+export type GenieLoadingRenderProps = {
+  startedAt: string;
+  phase: "preparing" | "waiting";
+  detailsOpen: boolean;
+  onShowDetails: () => void;
+};
+
+export type GenieLoadingOptions = {
+  /** Replace the visual while preserving SDK loading visibility and transitions. */
+  render?: (props: GenieLoadingRenderProps) => ReactNode;
+  phrases?: readonly string[];
+  /** Native copy overrides. Omitted messages retain the default English copy. */
+  messages?: {
+    status?: string;
+    slowStatus?: string;
+    slowText?: string;
+    showDetails?: string;
+    hideDetails?: string;
+  };
+  /** Public adapter options; the renderer dependency's declarations stay private. */
+  orb?: {
+    state?:
+      | "working"
+      | "searching"
+      | "solving"
+      | "listening"
+      | "connecting"
+      | "weaving"
+      | "composing"
+      | "breathing"
+      | "shaping";
+    size?: 64 | 20;
+    speed?: number;
+  };
+};
+export const GenieLoadingOptionsContext = createContext<GenieLoadingOptions | undefined>(undefined);
+
+/**
+ * Neutral defaults for conversations embedded in another product
+ * (`SessionConversation`, `OpenGeniChat`), which should not carry Opengeni's
+ * own playful copy. The Opengeni app keeps the defaults above.
+ */
+export const EMBEDDED_GENIE_LOADING = {
+  phrases: ["Thinking…"],
+  messages: { showDetails: "Show details" },
+} as const satisfies GenieLoadingOptions;
+
+/** Decorative copy never substitutes for a failure or claims measurable progress. */
+export function GenieLoading({
+  startedAt,
+  phase = "preparing",
+  onShowDetails,
+  detailsOpen = false,
+  notice,
+}: {
+  startedAt: string;
+  phase?: GenieLoadingRenderProps["phase"];
+  onShowDetails: () => void;
+  detailsOpen?: boolean;
+  /** An actionable startup problem takes precedence over decorative copy. */
+  notice?: string | undefined;
+}) {
+  const options = useContext(GenieLoadingOptionsContext);
+  const waiting = phase === "waiting";
+  const phrases = options?.phrases?.length
+    ? options.phrases
+    : waiting
+      ? GENIE_WAITING_PHRASES
+      : GENIE_PREPARING_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) >= 30_000);
+      setSlow(Date.now() - Date.parse(startedAt) >= 60_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 && !notice)
+    return options.render({ startedAt, phase, 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">
+          {notice ??
+            (slow
+              ? (options?.messages?.slowStatus ??
+                (waiting
+                  ? "Waiting for a response. Taking longer than usual."
+                  : "Preparing your task. Taking longer than usual."))
+              : (options?.messages?.status ??
+                (waiting ? "Waiting for a response." : "Preparing your task.")))}
+        </span>
+        <span
+          key={notice ?? (slow ? "slow" : phrase)}
+          className="og-genie-phrase"
+          style={notice ? { animation: "none" } : undefined}
+          aria-hidden="true"
+        >
+          {notice ??
+            (slow
+              ? (options?.messages?.slowText ??
+                (waiting ? "Still waiting for a response…" : "A little longer than usual…"))
+              : phrases[phrase % phrases.length])}
+        </span>
+        {showDetails || detailsOpen || notice ? (
+          <button
+            type="button"
+            className="og-genie-details"
+            aria-expanded={detailsOpen}
+            onClick={onShowDetails}
+          >
+            {detailsOpen
+              ? (options?.messages?.hideDetails ?? "Hide details")
+              : (options?.messages?.showDetails ?? (waiting ? "Show details" : "Behind the magic"))}
+            <span aria-hidden="true"> ↗</span>
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+}