@opengeni/react-native 4.2.1-canary.39593846423001 → 4.3.1

package/src/timeline/primitives.tsx

@@ -13,6 +13,7 @@ import Animated, {
 import { Icon, type NativeIconName } from "./icon";
 import { fontStyle, useNativeTimelineTheme, type NativeTimelineTheme } from "./theme";
 import { useOpenGeniText } from "@opengeni/react/messages";
+import type { ToolOutputPreview } from "@opengeni/react/session";
 
 /**
  * A reader opening or closing a disclosure owns the scroll position: the
@@ -160,6 +161,11 @@ export interface ActivityDisclosureProps {
   /** Compact reel rendering for the rolling status (no chevron, no body). */
   compact?: boolean | undefined;
   accessibilityLabel?: string | undefined;
+  /**
+   * Set while a tool row's output is a bounded preview: opening the row reads
+   * the exact output, and the body waits for it (or says it is a preview).
+   */
+  outputPreview?: ToolOutputPreview | null | undefined;
   children?: ReactNode | undefined;
 }
 
@@ -179,10 +185,19 @@ export function ActivityDisclosure({
   defaultOpen,
   compact,
   accessibilityLabel,
+  outputPreview,
   children,
 }: ActivityDisclosureProps) {
   const theme = useNativeTimelineTheme();
+  const t = useOpenGeniText();
   const [open, setOpen] = useState(defaultOpen ?? false);
+  // A previewed output reads its exact output when the row opens (once: a
+  // failed read waits for Retry).
+  const loadOutput = outputPreview?.load;
+  const outputPending = outputPreview?.state === "preview";
+  useEffect(() => {
+    if (open && outputPending && !compact) loadOutput?.();
+  }, [open, outputPending, loadOutput, compact]);
   const releaseFollow = useReleaseFollow();
   const iconTone = failed && iconToneProp === "muted" ? "failed" : iconToneProp;
   const chip =
@@ -327,7 +342,41 @@ export function ActivityDisclosure({
         {row}
       </Pressable>
       {open ? (
-        <View style={{ marginLeft: 28, marginTop: 6, marginBottom: 8, gap: 8 }}>{children}</View>
+        <View style={{ marginLeft: 28, marginTop: 6, marginBottom: 8, gap: 8 }}>
+          {outputPreview && loadOutput && outputPreview.state !== "error" ? (
+            // Never show a preview's body as if it were the whole output.
+            <BodyNote>{t("timeline.shared.loadingFullOutput")}</BodyNote>
+          ) : outputPreview ? (
+            <>
+              <View
+                style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 8 }}
+              >
+                <BodyNote>
+                  {loadOutput
+                    ? t("timeline.shared.outputPreviewFailed")
+                    : t("timeline.shared.outputPreviewOnly")}
+                </BodyNote>
+                {loadOutput ? (
+                  <Pressable accessibilityRole="button" onPress={loadOutput} hitSlop={8}>
+                    <Text
+                      style={{
+                        ...fontStyle(theme, 500),
+                        fontSize: theme.size.sm,
+                        lineHeight: 20,
+                        color: theme.colors["fg-muted"],
+                      }}
+                    >
+                      {t("timeline.shared.retryFullOutput")}
+                    </Text>
+                  </Pressable>
+                ) : null}
+              </View>
+              {children}
+            </>
+          ) : (
+            children
+          )}
+        </View>
       ) : null}
     </View>
   );

package/src/timeline/queue-dock.tsx

@@ -17,6 +17,7 @@ import { blendOver, withAlpha } from "./primitives";
 import { CompactSignalsContext } from "./session-signals";
 import { fontStyle, useNativeTimelineTheme } from "./theme";
 import { useNativeTimelineMessages } from "./messages";
+import type { NativeAnnotationLike } from "./annotations";
 
 /* ----------------------------------------------------------------------------
    The web session-chrome queue dock above the composer: a "N queued · Steer"
@@ -40,12 +41,15 @@ export function QueueDock({
   queue,
   composer,
   onComposerFocus,
+  onReviewAnnotations,
   leading,
   singleSend = false,
 }: {
   queue: TurnQueue;
   composer?: QueueDockComposer | undefined;
   onComposerFocus?: (() => void) | undefined;
+  /** Show a waiting message's quotes and notes. */
+  onReviewAnnotations?: ((annotations: readonly NativeAnnotationLike[]) => void) | undefined;
   /** Chips sharing the queue chip's row (goal, agents, commands). */
   leading?: ReactNode;
   /** One Send and nothing to choose: no Steer on waiting messages. */
@@ -215,6 +219,38 @@ export function QueueDock({
                   >
                     {label}
                   </Text>
+                  {annotationCount > 0 && onReviewAnnotations ? (
+                    <Pressable
+                      accessibilityRole="button"
+                      accessibilityLabel={t("timelineAnnotations.reviewCountlabel", {
+                        countLabel: t("counts.annotations", { count: annotationCount }),
+                      })}
+                      hitSlop={8}
+                      onPress={() => onReviewAnnotations(turn.annotations ?? [])}
+                      style={({ pressed }) => ({
+                        flexDirection: "row",
+                        alignItems: "center",
+                        gap: 3,
+                        height: 22,
+                        paddingHorizontal: 7,
+                        borderRadius: 11,
+                        backgroundColor: c["accent-soft"],
+                        opacity: pressed ? 0.6 : 1,
+                      })}
+                    >
+                      <Icon name="quote" size={10} color={c["fg-muted"]} />
+                      <Text
+                        style={{
+                          ...fontStyle(theme, 500),
+                          fontSize: 11,
+                          color: c["fg-muted"],
+                          fontVariant: ["tabular-nums"],
+                        }}
+                      >
+                        {annotationCount}
+                      </Text>
+                    </Pressable>
+                  ) : null}
                   {turns.length > 1 ? (
                     <>
                       <RowAction

package/src/timeline/session-screen.tsx

@@ -13,7 +13,16 @@ import {
   type ComponentRef,
   type ReactNode,
 } from "react";
-import { ActivityIndicator, Image, Pressable, Text, View, type TextInput } from "react-native";
+import {
+  ActivityIndicator,
+  Alert,
+  Image,
+  Pressable,
+  Text,
+  View,
+  type TextInput,
+} from "react-native";
+import { annotationHasNote } from "@opengeni/react/timeline-model";
 import {
   defaultChatComposerMessages,
   type ChatComposerMessages,
@@ -33,6 +42,12 @@ import {
 } from "./decisions";
 import { NativeMessageAttachments } from "./message-attachments";
 import { QueueDock } from "./queue-dock";
+import {
+  AnnotationsChip,
+  AnnotationsSheet,
+  type AnnotationReveal,
+  type NativeAnnotationLike,
+} from "./annotations";
 import { SessionCommandsList, SessionSignals } from "./session-signals";
 import type { ClientModel, OpenGeniClient, SessionBackgroundCommand } from "@opengeni/sdk";
 import { MessageTimeline, type NativeMessageTimelineProps } from "./message-timeline";
@@ -156,9 +171,29 @@ function SessionScreenBody({
   ...timelineProps
 }: Omit<NativeSessionScreenProps, "timelineMessages">) {
   const theme = useNativeTimelineTheme();
+  const t = useOpenGeniText();
   const m = useNativeTimelineMessages();
   const { composer, queue, humanInput, approvals, control, attachments } = controller;
   const composerInput = useRef<ComponentRef<typeof TextInput>>(null);
+  const annotationReveal = useRef<AnnotationReveal | null>(null);
+  const draftAnnotations = composer.annotations ?? [];
+  const annotationsIncomplete = draftAnnotations.some(
+    (annotation) => annotation.note.trim().length === 0,
+  );
+  const reviewTargetId = composer.annotationReviewTargetId ?? null;
+  const [reviewOpen, setReviewOpen] = useState(false);
+  // A new quote, a marker tap or a send with an empty note opens its note.
+  useEffect(() => {
+    if (reviewTargetId) setReviewOpen(true);
+  }, [reviewTargetId]);
+  const closeReview = useCallback(() => {
+    setReviewOpen(false);
+    composer.clearAnnotationReviewTarget?.();
+  }, [composer]);
+  const [queuedReview, setQueuedReview] = useState<readonly NativeAnnotationLike[] | null>(null);
+  // Each send brings the conversation back to its latest row.
+  const [followLatestSignal, setFollowLatestSignal] = useState(0);
+  const followLatest = useCallback(() => setFollowLatestSignal((value) => value + 1), []);
   // The composer floats over the conversation; its occupied height insets the timeline.
   const [composerHeight, setComposerHeight] = useState(120);
   const items = useMemo(
@@ -201,6 +236,11 @@ function SessionScreenBody({
     <View style={{ flex: 1, backgroundColor: theme.colors.bg }}>
       {topBar}
       <MessageTimeline
+        onAnnotate={composer.addAnnotation}
+        draftAnnotations={composer.annotations}
+        onDraftAnnotationSelect={composer.requestAnnotationReview}
+        annotationRevealRef={annotationReveal}
+        followLatestSignal={followLatestSignal}
         {...timelineProps}
         hasOlder={controller.hasOlder}
         loadingOlder={controller.loadingOlder}
@@ -276,14 +316,31 @@ function SessionScreenBody({
         onActionFeedback: composerSlots?.onActionFeedback,
         value: composer.value,
         onChangeText: composer.setValue,
-        onSend: () => void composer.send(),
+        // A quote without its note cannot be sent: Send opens that note instead
+        // of staying disabled with no reason given.
+        onSend: () => {
+          if (annotationsIncomplete) composer.requestAnnotationReview?.();
+          else {
+            followLatest();
+            void composer.send();
+          }
+        },
         // The other choice beside Send while the agent works: Queue when
         // Send steers, Steer when Send queues.
         alternateSend: composer.alternateSend ?? null,
         ...(composer.sendAlternate
-          ? { onAlternateSend: () => void composer.sendAlternate?.() }
+          ? {
+              onAlternateSend: () => {
+                if (annotationsIncomplete) {
+                  composer.requestAnnotationReview?.();
+                  return;
+                }
+                followLatest();
+                void composer.sendAlternate?.();
+              },
+            }
           : {}),
-        canSend: composer.canSend && !busy,
+        canSend: (composer.canSend || (annotationsIncomplete && !composer.sending)) && !busy,
         sending: composer.sending,
         running: controller.runActive,
         paused: paused,
@@ -311,6 +368,44 @@ function SessionScreenBody({
           <>
             {composerSlots?.header}
             <AttachmentChips attachments={attachments} />
+            {draftAnnotations.length > 0 && composer.removeAnnotation ? (
+              <View style={{ paddingHorizontal: 12, paddingTop: 10 }}>
+                <AnnotationsChip
+                  annotations={draftAnnotations}
+                  onPress={() => composer.requestAnnotationReview?.()}
+                  onClear={() => {
+                    const removeAll = () => {
+                      for (const annotation of draftAnnotations) {
+                        composer.removeAnnotation?.(annotation.id);
+                      }
+                    };
+                    // Bare quotes go at once; written notes are worth one confirm,
+                    // since the × sits right beside the chip.
+                    if (!draftAnnotations.some((item) => annotationHasNote(item.note))) {
+                      removeAll();
+                      return;
+                    }
+                    Alert.alert(
+                      t("native.timeline.annotations.removeAllTitle", {
+                        count: draftAnnotations.length,
+                      }),
+                      t("native.timeline.annotations.removeAllMessage", {
+                        count: draftAnnotations.filter((item) => annotationHasNote(item.note))
+                          .length,
+                      }),
+                      [
+                        { text: t("native.timeline.annotations.cancel"), style: "cancel" },
+                        {
+                          text: t("native.timeline.annotations.removeAllConfirm"),
+                          style: "destructive",
+                          onPress: removeAll,
+                        },
+                      ],
+                    );
+                  }}
+                />
+              </View>
+            ) : null}
           </>
         ),
         above: (
@@ -320,6 +415,7 @@ function SessionScreenBody({
               composer={composer}
               singleSend={composer.singleSend === true}
               onComposerFocus={() => composerInput.current?.focus()}
+              onReviewAnnotations={setQueuedReview}
               leading={
                 <SessionSignals
                   goal={controller.goal}
@@ -354,6 +450,28 @@ function SessionScreenBody({
           </>
         ),
       })}
+      <AnnotationsSheet
+        open={reviewOpen}
+        onClose={closeReview}
+        annotations={draftAnnotations}
+        editable={Boolean(composer.updateAnnotation)}
+        focusId={reviewTargetId}
+        onFocusConsumed={composer.clearAnnotationReviewTarget}
+        onUpdate={composer.updateAnnotation}
+        onRemove={composer.removeAnnotation}
+        onReveal={(source, quote) => annotationReveal.current?.(source, quote) ?? false}
+        onCommit={() => {
+          closeReview();
+          setTimeout(() => composerInput.current?.focus(), 250);
+        }}
+      />
+      <AnnotationsSheet
+        open={queuedReview !== null}
+        onClose={() => setQueuedReview(null)}
+        annotations={queuedReview ?? []}
+        editable={false}
+        onReveal={(source, quote) => annotationReveal.current?.(source, quote) ?? false}
+      />
     </View>
   );
 }

package/src/timeline/sheet.tsx

@@ -6,7 +6,6 @@ import {
   KeyboardAvoidingView,
   Modal,
   PanResponder,
-  Platform,
   Pressable,
   View,
   useWindowDimensions,
@@ -96,7 +95,9 @@ export function BottomSheet(props: {
       onRequestClose={props.onClose}
     >
       <KeyboardAvoidingView
-        behavior={Platform.OS === "ios" ? "padding" : undefined}
+        // Edge-to-edge Android doesn't resize a modal's window for the
+        // keyboard either, so the sheet lifts itself on both platforms.
+        behavior="padding"
         style={{ flex: 1, justifyContent: "flex-end" }}
       >
         <Animated.View

package/src/timeline/text-selection.ts

@@ -0,0 +1,115 @@
+import type { DraftTimelineAnnotation } from "@opengeni/sdk";
+import type { TimelineAnnotationSourceDescriptor } from "@opengeni/react/session";
+import { annotationFromSelection } from "@opengeni/react/timeline-model";
+import { useOpenGeniText } from "@opengeni/react/messages";
+import { useEffect, useRef } from "react";
+import { Platform } from "react-native";
+
+/**
+ * Text selection inside timeline messages. A message body sits in a view with
+ * this test id prefix plus its annotation source key (empty when it cannot be
+ * annotated). On iOS the package's native module then gives its text the
+ * system selection (handles, Copy, Look Up, Share) instead of React Native's
+ * whole-paragraph Copy; on both platforms it adds Add note to the selection
+ * menu when a host takes annotations.
+ */
+export const ANNOTATION_SOURCE_TEST_ID_PREFIX = "og-annotation-source:";
+
+export function annotationSourceTestId(sourceKey: string | undefined): string {
+  return `${ANNOTATION_SOURCE_TEST_ID_PREFIX}${sourceKey ?? ""}`;
+}
+
+type AnnotateEvent = { sourceKey: string; quote: string; before: string; after: string };
+
+export type QuoteBox = { x: number; y: number; width: number; height: number };
+
+/**
+ * Where a quote is drawn in its source view: the end of its last glyph, the
+ * top of that line's text, and a text box for each line it spans.
+ */
+export type QuoteAnchor = { x: number; top: number; boxes: QuoteBox[] };
+
+export type QuoteAnchorQuery = { quote: string; before: string; after: string };
+
+type TextSelectionModule = {
+  addListener(
+    eventName: "onAnnotate",
+    listener: (event: AnnotateEvent) => void,
+  ): { remove(): void };
+  setAnnotateTitle(title: string | null): void;
+  quoteAnchors?(
+    sourceKey: string,
+    queries: QuoteAnchorQuery[],
+  ): Promise<({ x?: number; top?: number; rects?: number[] } | null)[]>;
+};
+
+function textSelectionModule(): TextSelectionModule | null {
+  if (Platform.OS !== "ios" && Platform.OS !== "android") return null;
+  const registry = (globalThis as { expo?: { modules?: Record<string, unknown> } }).expo?.modules;
+  const module = registry?.OpenGeniTextSelection as TextSelectionModule | undefined;
+  return module && typeof module.addListener === "function" ? module : null;
+}
+
+/** Whether this build can turn a text selection into an annotation. */
+export function nativeTextAnnotationAvailable(): boolean {
+  return textSelectionModule() !== null;
+}
+
+/**
+ * Measures where each quote ends inside the source drawn for `sourceKey`;
+ * null for a quote that is not drawn there (or without native measuring).
+ */
+export async function measureQuoteAnchors(
+  sourceKey: string,
+  queries: QuoteAnchorQuery[],
+): Promise<(QuoteAnchor | null)[]> {
+  const module = textSelectionModule();
+  if (!module?.quoteAnchors || queries.length === 0) return queries.map(() => null);
+  try {
+    const anchors = await module.quoteAnchors(sourceKey, queries);
+    return queries.map((_, index) => {
+      const anchor = anchors[index];
+      if (typeof anchor?.x !== "number" || typeof anchor.top !== "number") return null;
+      const flat = anchor.rects ?? [];
+      const boxes: QuoteBox[] = [];
+      for (let at = 0; at + 3 < flat.length; at += 4) {
+        boxes.push({ x: flat[at]!, y: flat[at + 1]!, width: flat[at + 2]!, height: flat[at + 3]! });
+      }
+      return { x: anchor.x, top: anchor.top, boxes };
+    });
+  } catch {
+    return queries.map(() => null);
+  }
+}
+
+/**
+ * Turns Add note on a selection into a draft annotation for `onAnnotate`.
+ * `sources` maps each message's annotation source key to its source.
+ */
+export function useNativeTextAnnotation(
+  sources: ReadonlyMap<string, TimelineAnnotationSourceDescriptor>,
+  onAnnotate: ((annotation: DraftTimelineAnnotation) => void) | undefined,
+): void {
+  const t = useOpenGeniText();
+  const latest = useRef({ sources, onAnnotate });
+  latest.current = { sources, onAnnotate };
+  const enabled = Boolean(onAnnotate);
+  const title = t("timelineAnnotationSelection.addNote");
+  useEffect(() => {
+    const module = textSelectionModule();
+    if (!module || !enabled) return;
+    // Add note shows while some timeline listens (the module tracks listeners).
+    module.setAnnotateTitle(title);
+    const subscription = module.addListener("onAnnotate", (event) => {
+      const source = latest.current.sources.get(event.sourceKey);
+      if (!source) return;
+      const annotation = annotationFromSelection(source, {
+        text: event.quote,
+        textBefore: event.before,
+        textAfter: event.after,
+      });
+      if (annotation) latest.current.onAnnotate?.(annotation);
+    });
+    return () => subscription.remove();
+  }, [enabled, title]);
+}