@opengeni/react 0.48.0 → 0.57.0

package/src/components/session-chrome.tsx

@@ -272,6 +272,14 @@ export function SessionChrome({
       queuedTurns: currentTurnId ? turns.filter((turn) => turn.id !== currentTurnId) : turns,
     };
   }, [composerSteering, queue.pendingByTurn, turns]);
+  const stoppingKind =
+    composer?.stoppingAttempt ??
+    (queue.stoppingPreviousAttempt
+      ? queue.effectiveControl?.state === "paused"
+        ? "current"
+        : "previous"
+      : null);
+  const stopping = stoppingKind !== null;
   const canMutateQueue = !readOnly && composer !== undefined;
 
   const liveGoal =
@@ -307,14 +315,18 @@ export function SessionChrome({
         icon: <InboxIcon className="size-3" />,
       });
     }
-    if (steering) {
+    if (steering || stopping) {
       rows.push({
         id: "steering",
-        label: "Changing direction…",
-        detail: steering.text,
-        tone: "accent",
+        label: stopping
+          ? stoppingKind === "current"
+            ? "Stopping current work…"
+            : "Stopping previous work…"
+          : "Changing direction…",
+        ...(steering?.text ? { detail: steering.text } : {}),
+        tone: stopping ? "waiting" : "accent",
         icon:
-          steering.phase === "submitting" ? (
+          steering?.phase === "submitting" || stopping ? (
             <Loader2Icon className="size-3 animate-og-spin" />
           ) : (
             <ZapIcon className="size-3" />
@@ -379,7 +391,17 @@ export function SessionChrome({
       });
     }
     return rows;
-  }, [agentsSignal, elapsed, goalState, incoming, queuedTurns, record, steering]);
+  }, [
+    agentsSignal,
+    elapsed,
+    goalState,
+    incoming,
+    queuedTurns,
+    record,
+    steering,
+    stopping,
+    stoppingKind,
+  ]);
 
   const [activeUncontrolled, setActiveUncontrolled] = useState<SessionChromeSignalId | null>(
     defaultActive,
@@ -479,8 +501,12 @@ export function SessionChrome({
   const panelBody =
     active === "incoming" ? (
       <IncomingPanel inputs={incoming} onDismiss={onDismissIncoming} />
-    ) : active === "steering" && steering ? (
-      <SteeringPanel phase={steering.phase} text={steering.text} />
+    ) : active === "steering" && (steering || stopping) ? (
+      <SteeringPanel
+        phase={stopping ? "stopping" : (steering?.phase ?? "accepted")}
+        stoppingKind={stoppingKind}
+        text={steering?.text}
+      />
     ) : active === "queue" ? (
       <QueuePanel
         turns={queuedTurns}
@@ -762,7 +788,15 @@ function IncomingPanel({
   );
 }
 
-function SteeringPanel({ phase, text }: { phase: "submitting" | "accepted"; text: string }) {
+function SteeringPanel({
+  phase,
+  stoppingKind,
+  text,
+}: {
+  phase: "submitting" | "accepted" | "stopping";
+  stoppingKind?: "current" | "previous" | null | undefined;
+  text?: string | undefined;
+}) {
   return (
     <div
       className="flex items-start gap-2 rounded-og-sm px-1.5 py-1"
@@ -771,18 +805,24 @@ function SteeringPanel({ phase, text }: { phase: "submitting" | "accepted"; text
       data-og-session-chrome-panel="steering"
     >
       <span className="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-og-accent-soft text-og-accent">
-        {phase === "submitting" ? (
+        {phase === "submitting" || phase === "stopping" ? (
           <Loader2Icon className="size-3 animate-og-spin" aria-hidden="true" />
         ) : (
           <ZapIcon className="size-3" aria-hidden="true" />
         )}
       </span>
       <div className="min-w-0">
-        <p className="truncate text-og-xs font-medium leading-4 text-og-fg">{text}</p>
-        <p className="mt-0.5 text-[10px] leading-4 text-og-fg-muted">
+        {text ? (
+          <p className="truncate text-og-xs font-medium leading-4 text-og-fg">{text}</p>
+        ) : null}
+        <p className={cn(text && "mt-0.5", "text-[10px] leading-4 text-og-fg-muted")}>
           {phase === "submitting"
             ? "Sending your latest direction…"
-            : "Direction accepted. The agent will continue from it."}
+            : phase === "stopping"
+              ? stoppingKind === "previous"
+                ? "Direction saved. Waiting for the previous command to stop safely."
+                : "Waiting for the current command to stop safely."
+              : "Direction accepted. The agent will continue from it."}
         </p>
       </div>
     </div>

package/src/components/timeline-annotation-selection.tsx

@@ -0,0 +1,221 @@
+import type { DraftTimelineAnnotation } from "@opengeni/sdk";
+import { useEffect, useRef, useState, type RefObject } from "react";
+import { createPortal } from "react-dom";
+import type { TimelineAnnotationSourceDescriptor } from "../timeline";
+
+type SelectionCandidate = {
+  annotation: DraftTimelineAnnotation;
+  left: number;
+  top: number;
+  keyboard: boolean;
+};
+
+const INTERACTIVE_SELECTOR =
+  'a,button,input,textarea,select,summary,[role="button"],[contenteditable="true"],[tabindex]:not([tabindex="-1"])';
+const SOURCE_CONTEXT_BYTES = 160;
+const MAX_QUOTE_BYTES = 16 * 1024;
+
+function utf8Prefix(value: string, maxBytes: number): string {
+  let output = "";
+  let bytes = 0;
+  for (const character of value) {
+    const next = new TextEncoder().encode(character).byteLength;
+    if (bytes + next > maxBytes) break;
+    output += character;
+    bytes += next;
+  }
+  return output;
+}
+
+function utf8Suffix(value: string, maxBytes: number): string {
+  let output = "";
+  let bytes = 0;
+  for (const character of [...value].reverse()) {
+    const next = new TextEncoder().encode(character).byteLength;
+    if (bytes + next > maxBytes) break;
+    output = character + output;
+    bytes += next;
+  }
+  return output;
+}
+
+function selectionElement(node: Node | null): Element | null {
+  return node instanceof Element ? node : (node?.parentElement ?? null);
+}
+
+function containingSource(node: Node | null): HTMLElement | null {
+  const element = selectionElement(node);
+  const source = element?.closest("[data-og-annotation-source-key]");
+  return source instanceof HTMLElement ? source : null;
+}
+
+function isInteractiveSelection(node: Node | null, boundary: HTMLElement): boolean {
+  const element = selectionElement(node);
+  const interactive = element?.closest(INTERACTIVE_SELECTOR);
+  return interactive instanceof Element && boundary.contains(interactive);
+}
+
+function occurrenceOffsets(text: string, quote: string): number[] {
+  const offsets: number[] = [];
+  let cursor = 0;
+  while (cursor <= text.length - quote.length) {
+    const offset = text.indexOf(quote, cursor);
+    if (offset < 0) break;
+    offsets.push(offset);
+    cursor = offset + 1;
+  }
+  return offsets;
+}
+
+function selectedOccurrence(boundary: HTMLElement, range: Range, quote: string): number {
+  try {
+    const prefix = range.cloneRange();
+    prefix.selectNodeContents(boundary);
+    prefix.setEnd(range.startContainer, range.startOffset);
+    return occurrenceOffsets(prefix.toString(), quote).length;
+  } catch {
+    return 0;
+  }
+}
+
+function annotationId(): string {
+  if (typeof globalThis.crypto?.randomUUID === "function") {
+    return globalThis.crypto.randomUUID();
+  }
+  return `annotation-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+}
+
+function buildCandidate(
+  root: HTMLElement,
+  sources: ReadonlyMap<string, TimelineAnnotationSourceDescriptor>,
+  keyboard: boolean,
+): SelectionCandidate | null {
+  const selection = document.getSelection();
+  if (!selection || selection.rangeCount !== 1 || selection.isCollapsed) return null;
+  const range = selection.getRangeAt(0);
+  const startBoundary = containingSource(range.startContainer);
+  const endBoundary = containingSource(range.endContainer);
+  if (!startBoundary || startBoundary !== endBoundary || !root.contains(startBoundary)) return null;
+  if (
+    isInteractiveSelection(range.startContainer, startBoundary) ||
+    isInteractiveSelection(range.endContainer, startBoundary)
+  ) {
+    return null;
+  }
+  const sourceKey = startBoundary.dataset.ogAnnotationSourceKey;
+  const source = sourceKey ? sources.get(sourceKey) : undefined;
+  const quote = selection.toString();
+  if (
+    !source ||
+    quote.trim().length === 0 ||
+    new TextEncoder().encode(quote).byteLength > MAX_QUOTE_BYTES
+  ) {
+    return null;
+  }
+  const sourceOffsets = occurrenceOffsets(source.text, quote);
+  if (sourceOffsets.length === 0) return null;
+  const occurrence = selectedOccurrence(startBoundary, range, quote);
+  const startOffset = sourceOffsets[Math.min(occurrence, sourceOffsets.length - 1)]!;
+  const endOffset = startOffset + quote.length;
+  const rect = range.getBoundingClientRect();
+  if (rect.width === 0 && rect.height === 0) return null;
+  return {
+    annotation: {
+      id: annotationId(),
+      quote,
+      note: "",
+      source: {
+        kind: source.kind,
+        eventId: source.eventId,
+        eventType: source.eventType,
+        sequence: source.sequence,
+        turnId: source.turnId,
+        startOffset,
+        endOffset,
+        contextBefore: utf8Suffix(source.text.slice(0, startOffset), SOURCE_CONTEXT_BYTES),
+        contextAfter: utf8Prefix(source.text.slice(endOffset), SOURCE_CONTEXT_BYTES),
+        ...(source.label ? { label: source.label } : {}),
+      },
+    },
+    left: Math.min(Math.max(12, rect.left + rect.width / 2), window.innerWidth - 12),
+    top: rect.bottom + 48 <= window.innerHeight ? rect.bottom + 8 : Math.max(12, rect.top - 40),
+    keyboard,
+  };
+}
+
+export function TimelineAnnotationSelection({
+  rootRef,
+  sources,
+  onAnnotate,
+}: {
+  rootRef: RefObject<HTMLElement | null>;
+  sources: ReadonlyMap<string, TimelineAnnotationSourceDescriptor>;
+  onAnnotate?: ((annotation: DraftTimelineAnnotation) => void) | undefined;
+}) {
+  const [candidate, setCandidate] = useState<SelectionCandidate | null>(null);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root || !onAnnotate) {
+      setCandidate(null);
+      return;
+    }
+    const update = (keyboard: boolean) => {
+      setCandidate(buildCandidate(root, sources, keyboard));
+    };
+    const onPointerUp = () => window.setTimeout(() => update(false), 0);
+    const onKeyUp = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setCandidate(null);
+        return;
+      }
+      window.setTimeout(() => update(true), 0);
+    };
+    const onPointerDown = (event: PointerEvent) => {
+      if (
+        candidate &&
+        !(event.target instanceof Node && buttonRef.current?.contains(event.target))
+      ) {
+        setCandidate(null);
+      }
+    };
+    const onDocumentKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setCandidate(null);
+    };
+    root.addEventListener("pointerup", onPointerUp);
+    root.addEventListener("keyup", onKeyUp);
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onDocumentKeyDown);
+    return () => {
+      root.removeEventListener("pointerup", onPointerUp);
+      root.removeEventListener("keyup", onKeyUp);
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onDocumentKeyDown);
+    };
+  }, [candidate, onAnnotate, rootRef, sources]);
+
+  useEffect(() => {
+    if (candidate?.keyboard) buttonRef.current?.focus();
+  }, [candidate]);
+
+  if (!candidate || !onAnnotate || typeof document === "undefined") return null;
+  return createPortal(
+    <button
+      ref={buttonRef}
+      type="button"
+      style={{ left: candidate.left, top: candidate.top }}
+      className="og-root fixed z-[80] -translate-x-1/2 rounded-full border border-og-border bg-og-surface-1 px-3 py-1.5 text-og-sm font-medium text-og-fg shadow-lg outline-hidden transition hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:min-h-[44px]"
+      onClick={() => {
+        onAnnotate(candidate.annotation);
+        document.getSelection()?.removeAllRanges();
+        setCandidate(null);
+      }}
+    >
+      Annotate
+    </button>,
+    document.body,
+  );
+}
+
+export default TimelineAnnotationSelection;

package/src/components/timeline-annotations-dialog.tsx

@@ -0,0 +1,213 @@
+import type { TimelineAnnotationSource } from "@opengeni/sdk";
+import { useEffect, useLayoutEffect, useRef, useState, type RefObject } from "react";
+import { createPortal } from "react-dom";
+import type { TimelineAnnotationLike } from "./timeline-annotations";
+
+function cssEscapeAttribute(value: string): string {
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") return CSS.escape(value);
+  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+
+function revealLoadedSource(source: TimelineAnnotationSource): boolean {
+  if (typeof document === "undefined") return false;
+  const element = document.querySelector(
+    `[data-og-annotation-source-key="${cssEscapeAttribute(source.eventId)}"]`,
+  );
+  if (!(element instanceof HTMLElement)) return false;
+  element.scrollIntoView({ block: "center", behavior: "smooth" });
+  element.animate?.(
+    [
+      { outline: "2px solid color-mix(in srgb, currentColor 55%, transparent)" },
+      { outline: "2px solid transparent" },
+    ],
+    { duration: 1600, easing: "ease-out" },
+  );
+  return true;
+}
+
+function sourceLabel(annotation: TimelineAnnotationLike): string {
+  if (annotation.source.label) return annotation.source.label;
+  switch (annotation.source.kind) {
+    case "user_message":
+      return "User message";
+    case "assistant_message":
+      return "Assistant message";
+    case "tool_output":
+      return "Tool output";
+  }
+}
+
+export function TimelineAnnotationsDialog({
+  annotations,
+  editable,
+  focusAnnotationId,
+  onFocusConsumed,
+  onUpdate,
+  onRemove,
+  onRevealSource,
+  triggerRef,
+  countLabel,
+  onDismiss,
+}: {
+  annotations: readonly TimelineAnnotationLike[];
+  editable: boolean;
+  focusAnnotationId?: string | null | undefined;
+  onFocusConsumed?: (() => void) | undefined;
+  onUpdate?: ((id: string, note: string) => void) | undefined;
+  onRemove?: ((id: string) => void) | undefined;
+  onRevealSource?: ((source: TimelineAnnotationSource) => boolean) | undefined;
+  triggerRef: RefObject<HTMLButtonElement | null>;
+  countLabel: string;
+  onDismiss: (restoreFocus: boolean) => void;
+}) {
+  const [unavailableId, setUnavailableId] = useState<string | null>(null);
+  const [position, setPosition] = useState({ left: 12, top: 12, above: false });
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  const noteRefs = useRef(new Map<string, HTMLTextAreaElement>());
+
+  useLayoutEffect(() => {
+    if (!focusAnnotationId) return;
+    const note = noteRefs.current.get(focusAnnotationId);
+    note?.focus();
+    if (note && document.activeElement === note) onFocusConsumed?.();
+  }, [focusAnnotationId, onFocusConsumed]);
+
+  useEffect(() => {
+    const updatePosition = () => {
+      const rect = triggerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const panelWidth = Math.min(400, window.innerWidth - 24);
+      const left = Math.min(
+        Math.max(12, rect.left),
+        Math.max(12, window.innerWidth - panelWidth - 12),
+      );
+      const above = rect.top > Math.min(360, window.innerHeight * 0.55);
+      setPosition({ left, top: above ? rect.top - 8 : rect.bottom + 8, above });
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onDismiss(true);
+    };
+    const onPointerDown = (event: PointerEvent) => {
+      if (!(event.target instanceof Node)) return;
+      if (panelRef.current?.contains(event.target) || triggerRef.current?.contains(event.target)) {
+        return;
+      }
+      onDismiss(false);
+    };
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("pointerdown", onPointerDown);
+    if (!focusAnnotationId) {
+      window.setTimeout(() => {
+        if (document.activeElement === triggerRef.current) panelRef.current?.focus();
+      }, 0);
+    }
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [focusAnnotationId, onDismiss, triggerRef]);
+
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    <div
+      ref={panelRef}
+      role="dialog"
+      tabIndex={-1}
+      style={{
+        left: position.left,
+        top: position.top,
+        transform: position.above ? "translateY(-100%)" : undefined,
+      }}
+      className="og-root fixed z-[75] box-border max-h-[min(32rem,70vh)] w-[min(25rem,calc(100vw-1.5rem))] overflow-y-auto rounded-og-lg border border-og-border bg-og-surface-1 p-3 text-og-fg shadow-xl outline-hidden"
+      aria-label={editable ? "Review timeline annotations" : "Timeline annotations"}
+    >
+      <div className="mb-2 flex items-center justify-between gap-3">
+        <div>
+          <p className="text-og-sm font-semibold">{countLabel}</p>
+          <p className="text-og-xs text-og-fg-subtle">
+            {editable ? "Add a note for each quoted source." : "Sent with this message."}
+          </p>
+        </div>
+        <button
+          type="button"
+          className="rounded-md border-0 bg-transparent px-2 py-1 text-og-xs text-og-fg outline-hidden hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:min-h-[44px]"
+          onClick={() => onDismiss(true)}
+        >
+          Close
+        </button>
+      </div>
+      <div className="grid gap-2.5">
+        {annotations.map((annotation, index) => (
+          <section
+            key={annotation.id}
+            className="rounded-og-md border border-og-border bg-og-surface-2/60 p-2.5"
+            aria-label={`Annotation ${index + 1}`}
+          >
+            <div className="flex items-center justify-between gap-2">
+              <button
+                type="button"
+                className="truncate rounded border-0 bg-transparent text-left text-og-xs font-medium text-og-fg-muted underline-offset-2 outline-hidden hover:text-og-fg hover:underline focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:min-h-[44px]"
+                onClick={() => {
+                  const revealed =
+                    onRevealSource?.(annotation.source) ?? revealLoadedSource(annotation.source);
+                  setUnavailableId(revealed ? null : annotation.id);
+                }}
+              >
+                {sourceLabel(annotation)} · view source
+              </button>
+              {editable && onRemove ? (
+                <button
+                  type="button"
+                  className="shrink-0 rounded border-0 bg-transparent p-1 text-og-fg-subtle outline-hidden hover:bg-og-surface-1 hover:text-og-status-failed focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:size-[44px]"
+                  aria-label={`Remove annotation ${index + 1}`}
+                  onClick={() => onRemove(annotation.id)}
+                >
+                  <span aria-hidden="true" className="text-og-md leading-none">
+                    ×
+                  </span>
+                </button>
+              ) : null}
+            </div>
+            {unavailableId === annotation.id ? (
+              <p role="status" className="mt-1 text-og-xs text-og-status-waiting">
+                Source is outside the loaded timeline window.
+              </p>
+            ) : null}
+            <blockquote className="mt-2 max-h-28 overflow-auto whitespace-pre-wrap border-l-2 border-og-border pl-2 text-og-sm leading-5 text-og-fg-muted">
+              {annotation.quote}
+            </blockquote>
+            {editable && onUpdate ? (
+              <label className="mt-2 block text-og-xs font-medium text-og-fg-muted">
+                Note
+                <textarea
+                  ref={(node) => {
+                    if (node) noteRefs.current.set(annotation.id, node);
+                    else noteRefs.current.delete(annotation.id);
+                  }}
+                  value={annotation.note}
+                  rows={2}
+                  maxLength={2048}
+                  placeholder="What should the agent do with this?"
+                  className="mt-1 w-full resize-y rounded-og-sm border border-og-border bg-og-surface-1 px-2.5 py-2 text-og-sm leading-5 text-og-fg outline-hidden placeholder:text-og-fg-subtle focus:border-og-accent focus:ring-1 focus:ring-og-accent"
+                  onInput={(event) => onUpdate(annotation.id, event.currentTarget.value)}
+                />
+              </label>
+            ) : annotation.note ? (
+              <p className="mt-2 whitespace-pre-wrap text-og-sm leading-5 text-og-fg">
+                {annotation.note}
+              </p>
+            ) : null}
+          </section>
+        ))}
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+export default TimelineAnnotationsDialog;

package/src/components/timeline-annotations.tsx

@@ -0,0 +1,84 @@
+import type {
+  DraftTimelineAnnotation,
+  TimelineAnnotation,
+  TimelineAnnotationSource,
+} from "@opengeni/sdk";
+import { Suspense, lazy, useRef, useState } from "react";
+import { cn } from "../lib/cn";
+
+export type TimelineAnnotationLike = DraftTimelineAnnotation | TimelineAnnotation;
+
+const TimelineAnnotationsDialog = lazy(() => import("./timeline-annotations-dialog"));
+
+export function TimelineAnnotationsChip({
+  annotations,
+  editable = false,
+  focusAnnotationId,
+  onFocusConsumed,
+  onUpdate,
+  onRemove,
+  onRevealSource,
+  className,
+}: {
+  annotations: readonly TimelineAnnotationLike[];
+  editable?: boolean | undefined;
+  focusAnnotationId?: string | null | undefined;
+  onFocusConsumed?: (() => void) | undefined;
+  onUpdate?: ((id: string, note: string) => void) | undefined;
+  onRemove?: ((id: string) => void) | undefined;
+  onRevealSource?: ((source: TimelineAnnotationSource) => boolean) | undefined;
+  className?: string | undefined;
+}) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+
+  if (annotations.length === 0) return null;
+  const focusRequested = Boolean(
+    focusAnnotationId && annotations.some((item) => item.id === focusAnnotationId),
+  );
+  const visible = open || focusRequested;
+  const countLabel = `${annotations.length} ${annotations.length === 1 ? "annotation" : "annotations"}`;
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        className={cn(
+          "inline-flex min-h-8 items-center gap-1.5 rounded-full border border-og-border bg-og-surface-1 px-2.5 py-1 text-og-sm font-medium text-og-fg-muted outline-hidden transition hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:min-h-[44px]",
+          className,
+        )}
+        aria-label={`Review ${countLabel}`}
+        aria-haspopup="dialog"
+        aria-expanded={visible}
+        onClick={() => setOpen((current) => !current)}
+      >
+        {countLabel}
+      </button>
+      {visible ? (
+        <Suspense fallback={null}>
+          <TimelineAnnotationsDialog
+            annotations={annotations}
+            editable={editable}
+            focusAnnotationId={focusAnnotationId}
+            onFocusConsumed={() => {
+              setOpen(true);
+              onFocusConsumed?.();
+            }}
+            onUpdate={onUpdate}
+            onRemove={onRemove}
+            onRevealSource={onRevealSource}
+            triggerRef={triggerRef}
+            countLabel={countLabel}
+            onDismiss={(restoreFocus) => {
+              setOpen(false);
+              if (restoreFocus) triggerRef.current?.focus();
+            }}
+          />
+        </Suspense>
+      ) : null}
+    </>
+  );
+}
+
+export default TimelineAnnotationsChip;