@opengeni/react-native 4.5.0 → 4.6.1

package/dist/timeline/session-list.d.ts

@@ -25,10 +25,18 @@ export interface SessionRowProps {
     onTogglePin?: (() => void) | undefined;
     /** The workspace the chat lives in, when it is not the one on screen (search results). */
     workspaceName?: string | undefined;
+    /**
+     * A word the person must act on (a sub-agent that failed, is stuck, needs
+     * them or is paused). It replaces the last-update time and sets the dot's tone.
+     */
+    attention?: {
+        word: string;
+        tone: "failed" | "waiting";
+    } | null | undefined;
     now?: Date | undefined;
 }
 /** One recent-session row, as the web home canvas renders it. */
-export declare function SessionRow({ session, models, onPress, onTogglePin, workspaceName, now, }: SessionRowProps): import("react").JSX.Element;
+export declare function SessionRow({ session, models, onPress, onTogglePin, workspaceName, attention, now, }: SessionRowProps): import("react").JSX.Element;
 /** A small-caps section label (web: text-2xs semibold uppercase tracking-wider). */
 export declare function SectionLabel({ children }: {
     children: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react-native",
-  "version": "4.5.0",
+  "version": "4.6.1",
   "description": "React Native and Expo kit for Opengeni agents: the native session timeline, composer adapters, voice dictation, and realtime voice calls (CallKit) on the same SDK controllers as the web.",
   "license": "Apache-2.0",
   "repository": {
@@ -68,9 +68,9 @@
     "prepublishOnly": "bash ../../scripts/prepublish-guard"
   },
   "dependencies": {
-    "@opengeni/contracts": "4.5.0",
-    "@opengeni/react": "4.5.0",
-    "@opengeni/sdk": "4.5.0",
+    "@opengeni/contracts": "4.6.1",
+    "@opengeni/react": "4.6.1",
+    "@opengeni/sdk": "4.6.1",
     "thinking-orbs": "^0.3.1"
   },
   "peerDependencies": {

package/src/timeline/session-list.tsx

@@ -132,6 +132,11 @@ export interface SessionRowProps {
   onTogglePin?: (() => void) | undefined;
   /** The workspace the chat lives in, when it is not the one on screen (search results). */
   workspaceName?: string | undefined;
+  /**
+   * A word the person must act on (a sub-agent that failed, is stuck, needs
+   * them or is paused). It replaces the last-update time and sets the dot's tone.
+   */
+  attention?: { word: string; tone: "failed" | "waiting" } | null | undefined;
   now?: Date | undefined;
 }
 
@@ -142,6 +147,7 @@ export function SessionRow({
   onPress,
   onTogglePin,
   workspaceName,
+  attention,
   now,
 }: SessionRowProps) {
   const theme = useNativeTimelineTheme();
@@ -150,7 +156,8 @@ export function SessionRow({
   const t = useOpenGeniText();
   const rows = useMemo(() => projectClientModelRows(t, [...models]), [t, models]);
   const title = sessionDisplayTitle(session);
-  const status = recentSessionStatus(session);
+  const recent = recentSessionStatus(session);
+  const status = attention ? { tone: attention.tone, pulse: false } : recent;
   const model = recentSessionModelPresentation(session.model, rows);
   const repo = sessionRepoLabel(session);
   const meta = [model.label, repo].filter(Boolean).join(" · ");
@@ -186,6 +193,7 @@ export function SessionRow({
     <Pressable
       accessibilityRole="button"
       accessibilityLabel={[title, pinned ? m.pinned : null, workspaceName ?? null]
+        .concat(attention ? [attention.word] : [])
         .filter(Boolean)
         .join(", ")}
       accessibilityActions={onTogglePin ? [{ name: "pin", label: pinLabel }] : undefined}
@@ -241,14 +249,18 @@ export function SessionRow({
         {pinned ? <Icon name="pin" size={11} color={c["fg-subtle"]} /> : null}
         <Text
           style={{
-            ...fontStyle(theme, 400),
+            ...fontStyle(theme, attention ? 500 : 400),
             fontSize: 11,
             lineHeight: 16,
-            color: c["fg-subtle"],
+            color: attention
+              ? attention.tone === "failed"
+                ? c["status-failed"]
+                : c["status-waiting"]
+              : c["fg-subtle"],
             fontVariant: ["tabular-nums"],
           }}
         >
-          {relativeTimeLabel(t, session.updatedAt, now)}
+          {attention ? attention.word : relativeTimeLabel(t, session.updatedAt, now)}
         </Text>
       </View>
     </Pressable>

package/src/timeline/session-signals.tsx

@@ -1,6 +1,10 @@
 import type { ClientModel, LineageNode, SessionBackgroundCommand } from "@opengeni/sdk";
 import type { UseGoalResult } from "@opengeni/react/session";
-import { sessionAgentsSignal, sessionGoalStateLabel } from "@opengeni/react/session-agents-model";
+import {
+  sessionAgentAttention,
+  sessionAgentsSignal,
+  sessionGoalStateLabel,
+} from "@opengeni/react/session-agents-model";
 import { useOpenGeniText } from "@opengeni/react/messages";
 import { createContext, useContext, useState, type ReactNode } from "react";
 import { ActivityIndicator, Pressable, ScrollView, Text, View, type TextStyle } from "react-native";
@@ -94,29 +98,17 @@ export function SessionSignals(props: {
       <BottomSheet open={open === "agents"} onClose={close} accessibilityLabel={m.agents}>
         <SheetTitle>{m.agents}</SheetTitle>
         <ScrollView style={{ paddingHorizontal: 12 }}>
+          {/* Newest first, as the server lists them and the sidebar orders chats. */}
           {props.agents.map((node) => (
-            <View key={node.session.id}>
-              <SessionRow
-                session={node.session}
-                models={props.models ?? []}
-                onPress={() => {
-                  close();
-                  props.onOpenSession?.(node.session.id);
-                }}
-              />
-              {node.children.map((child) => (
-                <View key={child.session.id} style={{ paddingLeft: 18 }}>
-                  <SessionRow
-                    session={child.session}
-                    models={props.models ?? []}
-                    onPress={() => {
-                      close();
-                      props.onOpenSession?.(child.session.id);
-                    }}
-                  />
-                </View>
-              ))}
-            </View>
+            <AgentNode
+              key={node.session.id}
+              node={node}
+              models={props.models ?? []}
+              onOpen={(sessionId) => {
+                close();
+                props.onOpenSession?.(sessionId);
+              }}
+            />
           ))}
         </ScrollView>
       </BottomSheet>
@@ -171,6 +163,80 @@ function Chip(props: {
   );
 }
 
+/**
+ * One sub-agent, as the web agents panel lists it: its status, title, model and
+ * last update, or the word to act on (Needs you · 10h, Failed, Stuck, Paused).
+ * Its own agents fold under it behind a count, one level deep like the web.
+ */
+function AgentNode(props: {
+  node: LineageNode;
+  models: readonly ClientModel[];
+  onOpen: (sessionId: string) => void;
+  nested?: boolean | undefined;
+}) {
+  const t = useOpenGeniText();
+  const theme = useNativeTimelineTheme();
+  const c = theme.colors;
+  const [expanded, setExpanded] = useState(false);
+  const { session, children } = props.node;
+  const paused = session.status !== "cancelled" && session.effectiveControl.state !== "active";
+  const attention = sessionAgentAttention(t, session, paused);
+  const count = children.length;
+  return (
+    <View style={props.nested ? { paddingLeft: 18 } : undefined}>
+      <SessionRow
+        session={session}
+        models={props.models}
+        attention={attention}
+        onPress={() => props.onOpen(session.id)}
+      />
+      {count > 0 && !props.nested ? (
+        <>
+          <Pressable
+            accessibilityRole="button"
+            accessibilityState={{ expanded }}
+            accessibilityLabel={t("counts.agents", { count })}
+            onPress={() => setExpanded((value) => !value)}
+            hitSlop={{ top: 6, bottom: 6 }}
+            style={({ pressed }) => ({
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 4,
+              alignSelf: "flex-start",
+              marginLeft: 24,
+              marginBottom: 6,
+              paddingHorizontal: 8,
+              paddingVertical: 4,
+              borderRadius: theme.radius.md,
+              backgroundColor: pressed ? c.hover : "transparent",
+            })}
+          >
+            <Icon
+              name={expanded ? "chevron-down" : "chevron-right"}
+              size={12}
+              color={c["fg-subtle"]}
+            />
+            <Text style={{ ...fontStyle(theme, 500), fontSize: 12, color: c["fg-muted"] }}>
+              {t("counts.agents", { count })}
+            </Text>
+          </Pressable>
+          {expanded
+            ? children.map((child) => (
+                <AgentNode
+                  key={child.session.id}
+                  node={child}
+                  models={props.models}
+                  onOpen={props.onOpen}
+                  nested
+                />
+              ))
+            : null}
+        </>
+      ) : null}
+    </View>
+  );
+}
+
 function SheetTitle({ children }: { children: string }) {
   const theme = useNativeTimelineTheme();
   return (