@opengeni/react 0.36.1 → 0.40.0

package/src/components/session-chrome.tsx

@@ -18,6 +18,7 @@
  * | `--og-session-chrome-chip-pad-x` / `--og-session-chrome-chip-gap` | Chip padding / rail gap |
  * | `--og-session-chrome-rail-pad` | Outer rail inset |
  * | `--og-session-chrome-panel-pad-x` / `-y` | Expanded panel padding |
+ * | `--og-session-chrome-panel-max-height` | Cap for expanded body (scrolls inside) |
  * | `--og-session-chrome-duration` / `--og-session-chrome-ease` | Expand + pill motion |
  * | `--og-session-chrome-crossfade-duration` | Segment content opacity crossfade |
  * | `--og-session-chrome-row-hover` | Inbox / queue row hover wash |
@@ -32,6 +33,7 @@
  */
 import type { SessionGoal, SessionPendingInputPreview, SessionTurn } from "@opengeni/sdk";
 import {
+  AudioLinesIcon,
   ArrowDownIcon,
   ArrowUpIcon,
   BotIcon,
@@ -64,7 +66,7 @@ import { cn } from "../lib/cn";
 import { requestQueueDraftEdit } from "./queue-draft-policy";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
 
-export type SessionChromeSignalId = "incoming" | "queue" | "goal" | "agents";
+export type SessionChromeSignalId = "incoming" | "steering" | "queue" | "goal" | "agents";
 
 export type SessionChromeSignalTone = "neutral" | "accent" | "waiting" | "running";
 
@@ -105,6 +107,11 @@ type GoalPillState =
   | "invariant_broken"
   | "completed";
 
+type QueuedTurnPresentation = {
+  kind: "prompt" | "realtime_voice" | "realtime_voice_handoff";
+  text: string;
+};
+
 const GOAL_LABEL: Record<GoalPillState, string> = {
   pursuing: "Pursuing",
   scheduled: "Scheduled",
@@ -115,6 +122,28 @@ const GOAL_LABEL: Record<GoalPillState, string> = {
   completed: "Done",
 };
 
+function queuedTurnPresentation(turn: SessionTurn): QueuedTurnPresentation {
+  const realtimeDelegation = objectValue(turn.metadata.realtimeDelegation);
+  const inputTranscript = realtimeDelegation?.inputTranscript;
+  if (typeof inputTranscript === "string" && inputTranscript.trim()) {
+    return { kind: "realtime_voice", text: inputTranscript.trim() };
+  }
+  if (objectValue(turn.metadata.realtimeTailFlush)) {
+    return { kind: "realtime_voice_handoff", text: "Remaining voice context" };
+  }
+  return { kind: "prompt", text: turn.prompt };
+}
+
+function isSteeringTurn(turn: SessionTurn): boolean {
+  return turn.metadata.delivery === "steer";
+}
+
+function objectValue(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === "object" && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null;
+}
+
 /** Select pill state from the goal's authoritative continuation projection. */
 export function sessionChromeGoalPillState(
   goalStatus: "active" | "paused" | "completed",
@@ -215,6 +244,34 @@ export function SessionChrome({
   const record = goal?.goal ?? null;
   const incoming = queue.pendingInputs;
   const turns = queue.queue;
+  const composerSteering = composer?.steering ?? null;
+  const { steering, queuedTurns } = useMemo(() => {
+    const pendingQueueSteer =
+      turns.find((turn) => queue.pendingByTurn[turn.id] === "steer") ?? null;
+    const durableQueueSteer =
+      !pendingQueueSteer && turns[0] && isSteeringTurn(turns[0]) ? turns[0] : null;
+    const currentSteering =
+      composerSteering?.phase === "submitting"
+        ? composerSteering
+        : pendingQueueSteer
+          ? {
+              phase: "submitting" as const,
+              text: queuedTurnPresentation(pendingQueueSteer).text,
+              turnId: pendingQueueSteer.id,
+            }
+          : durableQueueSteer
+            ? {
+                phase: "accepted" as const,
+                text: queuedTurnPresentation(durableQueueSteer).text,
+                turnId: durableQueueSteer.id,
+              }
+            : composerSteering;
+    const currentTurnId = currentSteering?.turnId ?? null;
+    return {
+      steering: currentSteering,
+      queuedTurns: currentTurnId ? turns.filter((turn) => turn.id !== currentTurnId) : turns,
+    };
+  }, [composerSteering, queue.pendingByTurn, turns]);
   const canMutateQueue = !readOnly && composer !== undefined;
 
   const liveGoal =
@@ -250,14 +307,44 @@ export function SessionChrome({
         icon: <InboxIcon className="size-3" />,
       });
     }
-    if (turns.length > 0) {
-      const detail = turns[0]?.prompt;
+    if (steering) {
+      rows.push({
+        id: "steering",
+        label: "Changing direction…",
+        detail: steering.text,
+        tone: "accent",
+        icon:
+          steering.phase === "submitting" ? (
+            <Loader2Icon className="size-3 animate-og-spin" />
+          ) : (
+            <ZapIcon className="size-3" />
+          ),
+      });
+    }
+    if (queuedTurns.length > 0) {
+      const presentations = queuedTurns.map(queuedTurnPresentation);
+      const first = presentations[0];
+      const allVoiceRequests = presentations.every(({ kind }) => kind === "realtime_voice");
+      const onlyVoiceHandoff =
+        presentations.length === 1 && first?.kind === "realtime_voice_handoff";
+      const voiceOnly = allVoiceRequests || onlyVoiceHandoff;
+      const detail = first?.text;
       rows.push({
         id: "queue",
-        label: `${turns.length} queued prompt${turns.length === 1 ? "" : "s"}`,
+        label: allVoiceRequests
+          ? queuedTurns.length === 1
+            ? "Voice request queued"
+            : `${queuedTurns.length} voice requests queued`
+          : onlyVoiceHandoff
+            ? "Voice handoff queued"
+            : `${queuedTurns.length} queued prompt${queuedTurns.length === 1 ? "" : "s"}`,
         ...(detail ? { detail } : {}),
         tone: "neutral",
-        icon: <ListOrderedIcon className="size-3" />,
+        icon: voiceOnly ? (
+          <AudioLinesIcon className="size-3" />
+        ) : (
+          <ListOrderedIcon className="size-3" />
+        ),
       });
     }
     if (record && goalState) {
@@ -292,7 +379,7 @@ export function SessionChrome({
       });
     }
     return rows;
-  }, [agentsSignal, elapsed, goalState, incoming, record, turns]);
+  }, [agentsSignal, elapsed, goalState, incoming, queuedTurns, record, steering]);
 
   const [activeUncontrolled, setActiveUncontrolled] = useState<SessionChromeSignalId | null>(
     defaultActive,
@@ -320,10 +407,10 @@ export function SessionChrome({
 
   useEffect(() => {
     if (active !== "queue" || !replaceDraftFor) return;
-    if (!turns.some((turn) => turn.id === replaceDraftFor)) {
+    if (!queuedTurns.some((turn) => turn.id === replaceDraftFor)) {
       setReplaceDraftFor(null);
     }
-  }, [active, replaceDraftFor, turns]);
+  }, [active, queuedTurns, replaceDraftFor]);
 
   useEffect(() => {
     const rail = railRef.current;
@@ -363,7 +450,7 @@ export function SessionChrome({
     const node = panelBodyRef.current;
     if (!node) return;
     setPanelHeight(node.offsetHeight);
-  }, [open, active, incoming, turns, record, goalState, agentsPanel, agentsSignal]);
+  }, [open, active, incoming, queuedTurns, record, goalState, agentsPanel, agentsSignal, steering]);
 
   useEffect(() => {
     if (!open) return;
@@ -385,9 +472,11 @@ export function SessionChrome({
   const panelBody =
     active === "incoming" ? (
       <IncomingPanel inputs={incoming} onDismiss={onDismissIncoming} />
+    ) : active === "steering" && steering ? (
+      <SteeringPanel phase={steering.phase} text={steering.text} />
     ) : active === "queue" ? (
       <QueuePanel
-        turns={turns}
+        turns={queuedTurns}
         readOnly={!canMutateQueue}
         mutationFor={queue.mutationFor}
         replaceDraftFor={replaceDraftFor}
@@ -576,8 +665,9 @@ export function SessionChrome({
           >
             <div
               ref={panelBodyRef}
-              className="relative border-t border-og-border/50"
+              className="relative overflow-y-auto overscroll-contain border-t border-og-border/50"
               style={{
+                maxHeight: "var(--og-session-chrome-panel-max-height)",
                 paddingInline: "var(--og-session-chrome-panel-pad-x)",
                 paddingBlock: "var(--og-session-chrome-panel-pad-y)",
               }}
@@ -661,6 +751,33 @@ function IncomingPanel({
   );
 }
 
+function SteeringPanel({ phase, text }: { phase: "submitting" | "accepted"; text: string }) {
+  return (
+    <div
+      className="flex items-start gap-2 rounded-og-sm px-1.5 py-1"
+      role="status"
+      aria-live="polite"
+      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" ? (
+          <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">
+          {phase === "submitting"
+            ? "Sending your latest direction…"
+            : "Direction accepted. The agent will continue from it."}
+        </p>
+      </div>
+    </div>
+  );
+}
+
 function QueuePanel({
   turns,
   readOnly,
@@ -691,6 +808,8 @@ function QueuePanel({
       data-og-session-chrome-panel="queue"
     >
       {turns.map((turn, index) => {
+        const presentation = queuedTurnPresentation(turn);
+        const voice = presentation.kind !== "prompt";
         const pending = mutationFor(turn.id);
         const beforeUp = index > 0 ? (turns[index - 1]?.id ?? null) : null;
         const beforeDown = index < turns.length - 1 ? (turns[index + 2]?.id ?? null) : null;
@@ -703,11 +822,18 @@ function QueuePanel({
             className="group flex flex-col gap-1 rounded-og-sm px-1.5 py-1 transition-colors hover:bg-[var(--og-session-chrome-row-hover)]"
           >
             <div className="flex items-start gap-1.5">
-              <span className="mt-px shrink-0 font-og-mono text-[10px] leading-4 text-og-fg-subtle">
-                {index + 1}
-              </span>
+              {voice ? (
+                <AudioLinesIcon
+                  aria-hidden="true"
+                  className="mt-0.5 size-3 shrink-0 text-og-accent"
+                />
+              ) : (
+                <span className="mt-px shrink-0 font-og-mono text-[10px] leading-4 text-og-fg-subtle">
+                  {index + 1}
+                </span>
+              )}
               <p className="min-w-0 flex-1 truncate text-og-xs leading-4 text-og-fg">
-                {turn.prompt}
+                {presentation.text}
               </p>
               {showActions ? (
                 <div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 max-sm:opacity-100">

package/src/components/tip-follow.ts

@@ -81,6 +81,13 @@ export const TIP_FOLLOW_VELOCITY_ARM_DEBT_PX = 72;
 export const TIP_FOLLOW_VELOCITY_DECAY_MS = _t(180);
 /** Reader-up pixels above clamp budget that count as leaving the tip. */
 export const TIP_FOLLOW_READER_UP_EPS_PX = 2;
+/**
+ * Browsers snap scrollTop writes to device pixels (whole px at dpr 1). A DOM
+ * position within this window of the camera's own fractional position is that
+ * quantization echo, not external motion — keep the fraction so sub-pixel
+ * settle steps accumulate. Anything larger (clamp, user, glue) re-bases.
+ */
+export const TIP_FOLLOW_QUANTIZE_WINDOW_PX = 1;
 
 /** Test-only override for scrollend feature detection (`null` = probe DOM). */
 let scrollEndSupportOverride: boolean | null = null;
@@ -122,11 +129,20 @@ export type TipFollowState = {
   hotUntil: number;
   lastTs: number;
   lastHeight: number;
+  /** Last observed scroller clientHeight — viewport shrink heats like tip growth. */
+  lastClientHeight: number;
   lastGrowthAt: number;
   /** EMA of recent height growth (px/s); nudges τ / ceiling under bursts. */
   growthVelocity: number;
   /** Camera velocity toward tip (px/s). Smoothed — never jumps with debt. */
   scrollVelocity: number;
+  /**
+   * Fractional camera position. The DOM quantizes scrollTop to device pixels,
+   * so settle steps under 1px would be discarded every frame if the camera
+   * re-based on the DOM — it then parks 20-50px short of the tip forever.
+   * `null` = no fraction in flight; adopt the DOM position.
+   */
+  cameraTop: number | null;
 };
 
 export type TipFollowStepInput = {
@@ -150,9 +166,11 @@ export function createTipFollowState(): TipFollowState {
     hotUntil: 0,
     lastTs: 0,
     lastHeight: 0,
+    lastClientHeight: 0,
     lastGrowthAt: 0,
     growthVelocity: 0,
     scrollVelocity: 0,
+    cameraTop: null,
   };
 }
 
@@ -162,6 +180,7 @@ export function tipFollowCancel(state: TipFollowState): TipFollowState {
     running: false,
     lastTs: 0,
     scrollVelocity: 0,
+    cameraTop: null,
   };
 }
 
@@ -196,6 +215,49 @@ export function tipFollowNoteGrowth(
   };
 }
 
+/**
+ * Record scroller viewport height. A shrink (composer / SessionChrome /
+ * window) raises tip debt (`scrollHeight - clientHeight`) without growing
+ * content — the same debt content-growth would create. Heat the camera so
+ * catch-up does not fall into cold soft-settle (~42px/s) and leave the tip
+ * parked under the chrome.
+ */
+export function tipFollowNoteViewportShrink(
+  state: TipFollowState,
+  clientHeight: number,
+  now: number,
+): TipFollowState {
+  const previous = state.lastClientHeight;
+  if (previous <= 0) {
+    return { ...state, lastClientHeight: clientHeight };
+  }
+  const shrink = previous - clientHeight;
+  if (shrink <= 0) {
+    return { ...state, lastClientHeight: clientHeight };
+  }
+  if (shrink <= TIP_FOLLOW_SHRINK_EPS_PX) {
+    // Sub-eps shrink: HOLD the baseline (deadband with memory). An animated
+    // chrome/composer ease-out delivers many ≤eps frames; adopting each one
+    // leaked the whole tail into cold debt with no glue and no heat.
+    return state;
+  }
+  const dt = state.lastGrowthAt > 0 ? now - state.lastGrowthAt : 0;
+  let growthVelocity = state.growthVelocity;
+  if (dt > 0) {
+    const instant = (shrink / dt) * 1000;
+    growthVelocity = growthVelocity * 0.65 + instant * 0.35;
+  } else {
+    growthVelocity = Math.max(growthVelocity, shrink * (1000 / TIP_FOLLOW_HOT_IDLE_MS));
+  }
+  return {
+    ...state,
+    lastClientHeight: clientHeight,
+    lastGrowthAt: now,
+    growthVelocity,
+    hotUntil: now + TIP_FOLLOW_HOT_IDLE_MS,
+  };
+}
+
 /**
  * Adaptive τ: small debt → calm; large debt / armed velocity → catch-up.
  * While hot, floor urgency so live streams are not stuck on calm τ.
@@ -376,6 +438,29 @@ export function tipFollowCompensateShrink(
   return Math.max(0, Math.min(maxScroll, scrollTop - delta));
 }
 
+/**
+ * Viewport shrank (SessionChrome / composer / window). maxScroll rises by ≈Δc;
+ * keep the same tip distance: scrollTop += Δc. Without this, pinned follow only
+ * sees new tip debt and soft-settles under the chrome.
+ */
+export function tipFollowCompensateViewportShrink(
+  scrollTop: number,
+  previousClientHeight: number,
+  nextClientHeight: number,
+  scrollHeight: number,
+  epsPx: number = TIP_FOLLOW_SHRINK_EPS_PX,
+): number {
+  if (previousClientHeight <= 0) {
+    return scrollTop;
+  }
+  const shrink = previousClientHeight - nextClientHeight;
+  if (shrink <= epsPx) {
+    return scrollTop;
+  }
+  const maxScroll = Math.max(0, scrollHeight - nextClientHeight);
+  return Math.max(0, Math.min(maxScroll, scrollTop + shrink));
+}
+
 /**
  * One camera step. Shell schedules the next rAF while `result.state.running`.
  */
@@ -385,12 +470,39 @@ export function tipFollowStep(
 ): TipFollowStepResult {
   const { scrollTop, scrollHeight, clientHeight, now, pinned, reducedMotion, revealed } = input;
   const previousHeight = state.lastHeight;
+  const previousClient = state.lastClientHeight;
   const frameGrowth =
     previousHeight > 0 && scrollHeight > previousHeight ? scrollHeight - previousHeight : 0;
-  const grew = frameGrowth > 0;
+  const frameViewportShrink =
+    previousClient > 0 && clientHeight < previousClient - TIP_FOLLOW_SHRINK_EPS_PX
+      ? previousClient - clientHeight
+      : 0;
+  const grew = frameGrowth > 0 || frameViewportShrink > 0;
   let noted = tipFollowNoteGrowth(state, scrollHeight, now);
+  noted = tipFollowNoteViewportShrink(noted, clientHeight, now);
+  // Sub-device-pixel writes are floored by the engine: a DOM position within
+  // the quantization window of our own fractional camera is the echo of our
+  // last write, not external motion — keep the fraction so settle steps
+  // accumulate. Larger disagreement (clamp / reader / snap) re-bases.
+  let cameraTop = scrollTop;
+  if (
+    state.cameraTop !== null &&
+    Math.abs(state.cameraTop - scrollTop) <= TIP_FOLLOW_QUANTIZE_WINDOW_PX
+  ) {
+    cameraTop = state.cameraTop;
+  }
+  // Chrome/composer dock: tip-glue before ease so debt from ΔclientHeight is
+  // not left for cold soft-settle (content still under the new bar).
+  if (pinned && frameViewportShrink > 0) {
+    cameraTop = tipFollowCompensateViewportShrink(
+      cameraTop,
+      previousClient,
+      clientHeight,
+      scrollHeight,
+    );
+  }
   const target = targetScrollTop(scrollHeight, clientHeight);
-  const debt = target - scrollTop;
+  const debt = target - cameraTop;
   const hot = now < noted.hotUntil;
   const settling = !hot && Math.abs(debt) < TIP_FOLLOW_CATCHUP_DEBT_PX;
 
@@ -426,7 +538,7 @@ export function tipFollowStep(
 
   if (Math.abs(debt) <= 0.75) {
     return {
-      scrollTop: Math.abs(debt) > 0 ? target : scrollTop,
+      scrollTop: Math.abs(debt) > 0 ? target : cameraTop,
       state: {
         ...tipFollowCancel(noted),
         growthVelocity: hot ? noted.growthVelocity : 0,
@@ -445,13 +557,19 @@ export function tipFollowStep(
   let scrollVelocity =
     (noted.scrollVelocity ?? 0) + (desiredVel - (noted.scrollVelocity ?? 0)) * velAlpha;
 
-  const maxStep = tipFollowMaxStepPx(debt, noted.growthVelocity, dt, frameGrowth, hot);
+  const maxStep = tipFollowMaxStepPx(
+    debt,
+    noted.growthVelocity,
+    dt,
+    frameGrowth + frameViewportShrink,
+    hot,
+  );
   const maxVel = maxStep / dtSec;
   if (Math.abs(scrollVelocity) > maxVel) {
     scrollVelocity = Math.sign(scrollVelocity) * maxVel;
   }
 
-  let next = scrollTop + scrollVelocity * dtSec;
+  let next = cameraTop + scrollVelocity * dtSec;
   // Never overshoot the tip — stop and kill velocity on arrival.
   if (debt > 0 && next >= target - 0.35) {
     next = target;
@@ -462,13 +580,16 @@ export function tipFollowStep(
   }
   next = Math.max(0, next);
 
+  const running = Math.abs(target - next) > 0.35 || Math.abs(scrollVelocity) > 1;
   return {
     scrollTop: next,
     state: {
       ...noted,
       scrollVelocity,
-      running: Math.abs(target - next) > 0.35 || Math.abs(scrollVelocity) > 1,
+      running,
       lastTs: now,
+      // Carry the fraction the DOM will floor away; drop it once landed.
+      cameraTop: running ? next : null,
     },
   };
 }

package/src/composer.ts

@@ -4,6 +4,19 @@
  * `import * as Composer from "@opengeni/react/composer"`.
  */
 export { OPEN_WORKSTREAM_CONTROL_EVENT } from "./workstream-control-event";
+export {
+  BillingClassMark,
+  ModelPolicyPicker,
+  ModelPolicyPickerMenu,
+  PickerAnimatedPage,
+  PickerBackHeader,
+  PickerNavRow,
+  defaultModelPolicyPickerMessages,
+} from "./components/model-policy-picker";
+export type {
+  ModelPolicyPickerMessages,
+  ModelPolicyPickerProps,
+} from "./components/model-policy-picker";
 export {
   Actions,
   AttachButton,