@opengeni/react 3.3.2 → 3.4.0

package/src/timeline/screenshot-lightbox.tsx

@@ -1,4 +1,4 @@
-import { DownloadIcon, XIcon } from "lucide-react";
+import { ChevronLeftIcon, ChevronRightIcon, DownloadIcon, XIcon } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import {
   createContext,
@@ -6,8 +6,10 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
   type ReactNode,
+  type RefObject,
 } from "react";
 import { Dialog } from "radix-ui";
 import { cn } from "../lib/cn";
@@ -41,10 +43,74 @@ type LightboxController = {
 export type LightboxControlLabels = {
   download?: string | undefined;
   close?: string | undefined;
+  previous?: string | undefined;
+  next?: string | undefined;
 };
 
 const LightboxContext = createContext<LightboxController | null>(null);
 
+/** One image the open lightbox can page to, resolved only when it is shown. */
+export type LightboxGalleryImage = {
+  src: string;
+  caption?: string | undefined;
+  label?: string | undefined;
+  /** Releases a source owned by this load, such as an object URL. */
+  release?: (() => void) | undefined;
+};
+
+export type LightboxGalleryEntry = {
+  /** Whether this entry currently resolves to an image; defaults to yes. */
+  isImage?: (() => Promise<boolean>) | undefined;
+  load: () => Promise<LightboxGalleryImage | null>;
+};
+
+type RegisteredGalleryEntry = {
+  element: HTMLElement;
+  entry: { current: LightboxGalleryEntry };
+};
+
+type LightboxGalleryRegistry = {
+  register: (item: RegisteredGalleryEntry) => () => void;
+};
+
+const LightboxGalleryContext = createContext<LightboxGalleryRegistry | null>(null);
+
+/** Images in one timeline page together; elsewhere the whole document does. */
+const GALLERY_ROOT_SELECTOR = "[data-og-timeline-scroller]";
+
+function isEditableTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  return (
+    target.isContentEditable ||
+    target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])') !==
+      null
+  );
+}
+
+/**
+ * Adds the element's image to the lightbox gallery so an open lightbox can page
+ * to it with the arrow controls, in document order. The entry is resolved only
+ * when it is shown, so deferred images that never scrolled into view still page.
+ * A lightbox opened from inside the element starts at this entry.
+ */
+export function useLightboxGalleryItem(
+  ref: RefObject<HTMLElement | null>,
+  entry: LightboxGalleryEntry | null,
+): void {
+  const registry = useContext(LightboxGalleryContext);
+  const latest = useRef(entry);
+  latest.current = entry;
+  const enabled = entry !== null;
+  useEffect(() => {
+    const element = ref.current;
+    if (!registry || !element || !enabled) return;
+    return registry.register({
+      element,
+      entry: latest as { current: LightboxGalleryEntry },
+    });
+  }, [registry, ref, enabled]);
+}
+
 /** Open the app-level screenshot lightbox. No-op outside a `LightboxProvider`. */
 export function useLightbox(): LightboxController {
   return useContext(LightboxContext) ?? NOOP;
@@ -107,12 +173,62 @@ function LightboxRoot({ children }: { children: ReactNode }) {
   const [tokenSource, setTokenSource] = useState<HTMLElement | null>(null);
   const sourceOwner = useMemo(() => createLightboxSourceOwner(), []);
   const portalStyle = usePortalTokenStyle(tokenSource);
+  const entries = useRef(new Set<RegisteredGalleryEntry>());
+  const [gallery, setGallery] = useState<{
+    items: RegisteredGalleryEntry[];
+    index: number;
+  } | null>(null);
+  // Fences stale gallery discovery and navigation after a newer open or step.
+  const generation = useRef(0);
+
+  const registry = useMemo<LightboxGalleryRegistry>(
+    () => ({
+      register(item) {
+        entries.current.add(item);
+        return () => {
+          entries.current.delete(item);
+        };
+      },
+    }),
+    [],
+  );
 
   const releaseCurrentSource = useCallback(() => {
     sourceOwner.release();
   }, [sourceOwner]);
 
-  useEffect(() => releaseCurrentSource, [releaseCurrentSource]);
+  // Unmount also fences in-flight discovery and paging, so a load that settles
+  // afterwards releases its own source instead of handing it to a dead owner.
+  useEffect(
+    () => () => {
+      generation.current++;
+      releaseCurrentSource();
+    },
+    [releaseCurrentSource],
+  );
+
+  const discoverGallery = useCallback((source: HTMLElement, token: number) => {
+    const root = source.closest(GALLERY_ROOT_SELECTOR) ?? source.ownerDocument.body;
+    const candidates = [...entries.current]
+      .filter((item) => item.element.isConnected && root.contains(item.element))
+      .sort((a, b) =>
+        a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1,
+      );
+    // The innermost entry holding the clicked image comes last in document order.
+    const current = candidates.filter((item) => item.element.contains(source)).pop();
+    if (!current) return;
+    void Promise.all(
+      candidates.map((item) =>
+        item === current
+          ? Promise.resolve(true)
+          : (item.entry.current.isImage?.() ?? Promise.resolve(true)).catch(() => false),
+      ),
+    ).then((images) => {
+      if (generation.current !== token) return;
+      const items = candidates.filter((_, index) => images[index]);
+      if (items.length > 1) setGallery({ items, index: items.indexOf(current) });
+    });
+  }, []);
 
   const open = useCallback(
     (
@@ -124,8 +240,10 @@ function LightboxRoot({ children }: { children: ReactNode }) {
       controlLabels?: LightboxControlLabels,
       releaseSource?: () => void,
     ) => {
+      const token = ++generation.current;
       sourceOwner.replace(releaseSource);
       setTokenSource(source ?? null);
+      setGallery(null);
       setState({
         src,
         label,
@@ -133,21 +251,74 @@ function LightboxRoot({ children }: { children: ReactNode }) {
         ...(downloadFilename ? { downloadFilename } : {}),
         ...(controlLabels ? { controlLabels } : {}),
       });
+      if (source) discoverGallery(source, token);
     },
-    [sourceOwner],
+    [sourceOwner, discoverGallery],
   );
 
   const close = useCallback(() => {
+    generation.current++;
     releaseCurrentSource();
     setState(null);
     setTokenSource(null);
+    setGallery(null);
   }, [releaseCurrentSource]);
 
+  const step = useCallback(
+    (delta: 1 | -1) => {
+      if (!gallery) return;
+      const token = ++generation.current;
+      const count = gallery.items.length;
+      void (async () => {
+        // Skip entries that no longer resolve, but never loop past the start.
+        for (let offset = 1; offset < count; offset++) {
+          const index = (((gallery.index + delta * offset) % count) + count) % count;
+          const image = await gallery.items[index]!.entry.current.load().catch(() => null);
+          if (generation.current !== token) {
+            image?.release?.();
+            return;
+          }
+          if (!image) continue;
+          sourceOwner.replace(image.release);
+          setGallery({ items: gallery.items, index });
+          setState((previous) =>
+            previous
+              ? {
+                  src: image.src,
+                  label: image.label ?? previous.label,
+                  ...(image.caption ? { caption: image.caption } : {}),
+                  ...(previous.controlLabels ? { controlLabels: previous.controlLabels } : {}),
+                }
+              : previous,
+          );
+          return;
+        }
+      })();
+    },
+    [gallery, sourceOwner],
+  );
+
+  const galleryOpen = state !== null && gallery !== null;
+  useEffect(() => {
+    if (!galleryOpen) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+      // Arrow keys typed into a field move its caret; they never page images.
+      if (isEditableTarget(event.target)) return;
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        event.preventDefault();
+        step(event.key === "ArrowLeft" ? -1 : 1);
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [galleryOpen, step]);
+
   const controller = useMemo<LightboxController>(() => ({ open }), [open]);
 
   return (
     <LightboxContext.Provider value={controller}>
-      {children}
+      <LightboxGalleryContext.Provider value={registry}>{children}</LightboxGalleryContext.Provider>
       <Dialog.Root open={state !== null} onOpenChange={(next) => !next && close()}>
         <AnimatePresence>
           {state !== null ? (
@@ -191,6 +362,13 @@ function LightboxRoot({ children }: { children: ReactNode }) {
                   <Dialog.Description className="sr-only">
                     {state.caption ?? `Expanded ${state.label.toLowerCase()}`}
                   </Dialog.Description>
+                  {gallery ? (
+                    <LightboxStepButton
+                      direction="previous"
+                      label={state.controlLabels?.previous ?? "Previous image"}
+                      onClick={() => step(-1)}
+                    />
+                  ) : null}
                   {/* The figure is one self-contained object: image, caption, and
                       its own close control. The close button anchors to a wrapper
                       sized to the IMAGE (w-fit), so it hugs the real top-right
@@ -210,7 +388,16 @@ function LightboxRoot({ children }: { children: ReactNode }) {
                         controlLabels={state.controlLabels}
                       />
                     </div>
-                    {state.caption ? (
+                    {gallery ? (
+                      <figcaption className="flex max-w-2xl flex-col items-center gap-1 text-center font-og-mono text-og-xs">
+                        {state.caption ? (
+                          <span className="text-white/55">{state.caption}</span>
+                        ) : null}
+                        <span className="tabular-nums text-white/35" aria-live="polite">
+                          {gallery.index + 1} of {gallery.items.length}
+                        </span>
+                      </figcaption>
+                    ) : state.caption ? (
                       <figcaption className="max-w-2xl text-center font-og-mono text-og-xs text-white/55">
                         {state.caption}
                       </figcaption>
@@ -220,6 +407,13 @@ function LightboxRoot({ children }: { children: ReactNode }) {
                       </figcaption>
                     )}
                   </figure>
+                  {gallery ? (
+                    <LightboxStepButton
+                      direction="next"
+                      label={state.controlLabels?.next ?? "Next image"}
+                      onClick={() => step(1)}
+                    />
+                  ) : null}
                 </motion.div>
               </Dialog.Content>
             </Dialog.Portal>
@@ -230,6 +424,35 @@ function LightboxRoot({ children }: { children: ReactNode }) {
   );
 }
 
+/** Pages the open lightbox to the neighboring gallery image, wrapping around. */
+function LightboxStepButton({
+  direction,
+  label,
+  onClick,
+}: {
+  direction: "previous" | "next";
+  label: string;
+  onClick: () => void;
+}) {
+  const Icon = direction === "previous" ? ChevronLeftIcon : ChevronRightIcon;
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={label}
+      className={cn(
+        "absolute top-1/2 z-10 inline-flex size-11 -translate-y-1/2 items-center justify-center rounded-full",
+        "border border-white/15 bg-black/60 text-white/70 backdrop-blur",
+        "transition-colors hover:border-white/30 hover:text-white",
+        "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-white/50",
+        direction === "previous" ? "left-3 sm:left-6" : "right-3 sm:right-6",
+      )}
+    >
+      <Icon className="size-5" />
+    </button>
+  );
+}
+
 /** @internal Exact controls rendered by an open screenshot lightbox. */
 export function ScreenshotLightboxControls({
   src,

package/src/timeline/session-usage-limit-row.tsx

@@ -0,0 +1,42 @@
+import { formatSessionUsageMicros } from "@opengeni/sdk/session-usage-limits";
+import { GaugeIcon } from "lucide-react";
+
+import { cn } from "../lib/cn";
+import { DEFAULT_SESSION_USAGE_LIMIT_LABELS } from "../usage/session-usage-limit";
+import { useEntranceAnimation } from "./entrance";
+import type { SessionUsageLimitStop } from "./types";
+
+/**
+ * A compact historical marker: the task's usage limit stopped further model
+ * requests here. One calm line with the amounts at the stop (the overshoot is
+ * kept, without implying only the final request caused it). The current
+ * state and the one recovery action live in the host's composer notice, so
+ * this row repeats neither. Never a credits or purchase remedy.
+ */
+export function SessionUsageLimitRow({ stop }: { stop: SessionUsageLimitStop }) {
+  const enter = useEntranceAnimation();
+  const labels = DEFAULT_SESSION_USAGE_LIMIT_LABELS;
+  const amount =
+    stop.usedMicros !== null && stop.limitMicros !== null
+      ? labels.usedOfLimit(
+          formatSessionUsageMicros(stop.usedMicros),
+          formatSessionUsageMicros(stop.limitMicros),
+        )
+      : null;
+  return (
+    <p
+      className={cn(
+        enter && "animate-og-enter",
+        "flex min-w-0 items-center gap-2 text-og-sm text-og-fg-muted",
+      )}
+      role="status"
+      data-og-session-usage-limit-stop=""
+    >
+      <GaugeIcon aria-hidden className="size-3.5 shrink-0 text-og-status-waiting" />
+      <span className="min-w-0">
+        <span className="font-medium text-og-fg">{labels.reachedTitle}</span>
+        {amount ? ` · ${amount}` : ""}
+      </span>
+    </p>
+  );
+}

package/src/timeline/shared.tsx

@@ -1,7 +1,9 @@
 import { CameraIcon, CameraOffIcon, ChevronRightIcon } from "lucide-react";
-import { createContext, useContext, useState, type ReactNode } from "react";
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+import { useTimelineSearchReveal } from "../components/timeline-search";
 import { cn } from "../lib/cn";
 import { stringifyPayload } from "../lib/format";
+import { SecretRefText } from "../components/secret-ref-chip";
 import { useForcedDefaultOpen } from "./disclosure-context";
 import { useLightboxOptional } from "./screenshot-lightbox";
 import type { ToolCallTruncation } from "./types";
@@ -55,6 +57,8 @@ export function ToolCallTruncationProvider({
 }
 
 export type ActivityDisclosureProps = {
+  /** Override the rolling preview; null keeps rapidly streaming details out of the header. */
+  compactPreview?: ReactNode;
   icon: ReactNode;
   /** Icon tint. Defaults to the muted foreground; renderers pass accent/failed. */
   iconTone?: "accent" | "failed" | "running" | "muted" | undefined;
@@ -116,6 +120,8 @@ const ICON_TONE: Record<NonNullable<ActivityDisclosureProps["iconTone"]>, string
  * inline media, and at most one right-gutter settle chip. Compact by default;
  * the body mounts only when expanded.
  */
+export const CompactActivityContext = createContext(false);
+
 export function ActivityDisclosure({
   icon,
   iconTone: iconToneProp = "muted",
@@ -123,6 +129,7 @@ export function ActivityDisclosure({
   titleMono,
   running,
   preview,
+  compactPreview,
   media,
   chip: chipProp,
   failed,
@@ -149,7 +156,26 @@ export function ActivityDisclosure({
   // absent in normal app usage, where the row starts collapsed.
   const forcedDefaultOpen = useForcedDefaultOpen();
   const [open, setOpen] = useState(defaultOpen ?? forcedDefaultOpen ?? false);
+  const searchReveal = useTimelineSearchReveal();
+  useEffect(() => {
+    if (searchReveal) setOpen(true);
+  }, [searchReveal]);
   const truncation = useContext(ToolCallTruncationContext);
+  const compact = useContext(CompactActivityContext);
+  if (compact)
+    return (
+      <span className="og-rolling-label">
+        <span className={cn("shrink-0", ICON_TONE[iconTone])}>{icon}</span>
+        <span className="og-command-reel">
+          <span className="og-reel-title">{title}</span>
+          {(compactPreview === undefined ? preview : compactPreview) ? (
+            <span className="og-reel-preview text-og-fg-subtle">
+              {compactPreview === undefined ? preview : compactPreview}
+            </span>
+          ) : null}
+        </span>
+      </span>
+    );
   const hasBody = expandable && (children != null || truncation != null);
 
   // The preview is detail-on-demand: it is suppressed once the row is open so a
@@ -189,20 +215,21 @@ export function ActivityDisclosure({
         <span className="size-3.5 shrink-0" />
       )}
       <span className={cn("shrink-0", ICON_TONE[iconTone])}>{icon}</span>
-      <span
-        className={cn(
-          "min-w-0 shrink truncate text-og-base font-medium",
-          titleMono && "font-og-mono text-og-sm font-normal",
-          running && "og-shimmer-text",
+      <span className={cn("og-command-reel", running && "og-command-reel-running")}>
+        <span
+          className={cn(
+            "min-w-0 shrink truncate text-og-base font-medium",
+            titleMono && "font-og-mono text-og-sm font-normal",
+          )}
+        >
+          {title}
+        </span>
+        {previewVisible && !media ? (
+          <span className="min-w-0 flex-1 truncate text-og-sm text-og-fg-subtle">{preview}</span>
+        ) : (
+          <span className="flex-1" />
         )}
-      >
-        {title}
       </span>
-      {previewVisible && !media ? (
-        <span className="min-w-0 flex-1 truncate text-og-sm text-og-fg-subtle">{preview}</span>
-      ) : (
-        <span className="flex-1" />
-      )}
       {/* The right gutter carries at most ONE signal: the media thumbnail, else a
           terse settle chip (hidden once expanded — the body owns the detail). */}
       {media && !open ? (
@@ -366,7 +393,7 @@ export function TermBlock({
           <span className="select-none text-og-status-idle">$</span>
           {command != null ? (
             <span className="min-w-0 flex-1 truncate font-og-mono text-og-sm text-og-fg-muted">
-              {command}
+              <SecretRefText text={command} />
             </span>
           ) : (
             <span className="flex-1" />
@@ -433,7 +460,7 @@ export function PayloadBlock({
           failed ? "text-og-status-failed" : "text-og-fg-muted",
         )}
       >
-        {text}
+        <SecretRefText text={text} />
       </pre>
     </div>
   );

package/src/timeline/startup-dispatch-details.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import type { Session } from "@opengeni/sdk";
+
+/** Live dispatch diagnostics belong to the current loading area, never history. */
+export function StartupDispatchDetails({ wait }: { wait: Session["dispatchWait"] }) {
+  const [now, setNow] = useState(Date.now);
+  useEffect(() => {
+    const timer = setInterval(() => setNow(Date.now()), 15_000);
+    return () => clearInterval(timer);
+  }, []);
+  const next = wait?.nextAttemptAt ? new Date(wait.nextAttemptAt) : null;
+  return (
+    <div className="text-og-xs text-og-fg-muted" data-og-startup-dispatch-details="">
+      <p>Your messages are saved. No agent turn is running yet.</p>
+      <p>
+        {wait?.state === "pending" && next
+          ? next.getTime() <= now
+            ? "Automatic start retry is due."
+            : `Automatic start retry at ${next.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })}.`
+          : wait?.state === "acknowledged"
+            ? "The start request was accepted; a worker has not started the turn yet."
+            : "Start confirmation is unavailable."}
+      </p>
+      {wait && wait.attempts > 0 ? (
+        <p>
+          {wait.attempts} dispatch attempt{wait.attempts === 1 ? "" : "s"}.
+        </p>
+      ) : null}
+      {wait?.lastError ? (
+        <p className="max-h-32 overflow-y-auto whitespace-pre-wrap break-words">
+          Last recorded dispatch error: {wait.lastError}
+        </p>
+      ) : null}
+    </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);
+}