@opengeni/react 0.37.0 → 0.40.0

package/src/components/model-policy-picker.tsx

@@ -452,6 +452,11 @@ export function ModelPolicyPickerMenu(
         <p className="px-2.5 pt-1 pb-1 text-xs font-medium tracking-wide text-og-fg-subtle uppercase">
           {messages.thinking}
         </p>
+        {focusModel.catalog.capabilities?.inputModalities.includes("image") === false ? (
+          <p className="px-2.5 pb-1.5 text-xs leading-relaxed text-og-fg-subtle">
+            Unsupported attachments stay in the session but are hidden from this model.
+          </p>
+        ) : null}
         <div className="flex flex-col gap-0.5">
           {effortOptionsForModel(focusModel.catalog).map((effort) => {
             const selected = activeModel && effort === props.effort;
@@ -540,7 +545,7 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
           disabled={props.disabled}
           aria-label={messages.label}
           className={cn(
-            "inline-flex h-8 max-w-64 items-center gap-1 rounded-full border border-transparent px-2.5 text-xs text-og-fg-muted outline-none transition-colors hover:border-og-border hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50",
+            "inline-flex h-8 max-w-64 items-center gap-1 rounded-full border border-transparent px-2.5 text-xs text-og-fg-muted outline-none transition-colors hover:border-og-border hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50 max-sm:h-7 max-sm:max-w-[9rem] max-sm:px-2",
             props.className,
           )}
         >
@@ -552,10 +557,10 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
             className="text-og-fg"
           />
           <span className="truncate font-medium text-og-fg">{selected?.label ?? props.model}</span>
-          <span>{labelReasoningEffort(props.effort)}</span>
+          <span className="max-sm:hidden">{labelReasoningEffort(props.effort)}</span>
           {props.latencyMode === "fast" ? (
             <ZapIcon
-              className="size-3.5 shrink-0 text-og-fg"
+              className="size-3.5 shrink-0 fill-current stroke-current text-og-fg"
               aria-label={messages.fast}
               data-testid="model-picker-fast-icon"
             />

package/src/components/sandbox-files.tsx

@@ -382,7 +382,7 @@ function WakeButton({ children, onClick }: { children: ReactNode; onClick: () =>
     <button
       type="button"
       onClick={onClick}
-      className="mt-1 inline-flex min-h-11 items-center justify-center rounded-og-md bg-og-accent px-3 py-2 text-og-sm font-medium text-og-on-accent shadow-sm transition-colors hover:bg-og-accent-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent focus-visible:ring-offset-2 focus-visible:ring-offset-og-bg"
+      className="mt-1 inline-flex min-h-11 items-center justify-center rounded-og-md bg-og-accent-deep px-3 py-2 text-og-sm font-medium text-og-accent-fg shadow-sm transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent focus-visible:ring-offset-2 focus-visible:ring-offset-og-bg"
     >
       {children}
     </button>

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 |
@@ -664,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)",
               }}

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/hooks/use-composer.ts

@@ -1,12 +1,13 @@
-import type {
-  ComposerDraft,
-  EffectiveControlResumeOption,
-  EffectiveSessionControl,
-  OpenGeniApiError,
-  ResourceRef,
-  SaveComposerDraftRequest,
-  SendMessageInput,
-  SessionEvent,
+import {
+  DEFAULT_FILE_RESOURCE_MOUNT_ROOT,
+  type ComposerDraft,
+  type EffectiveControlResumeOption,
+  type EffectiveSessionControl,
+  type OpenGeniApiError,
+  type ResourceRef,
+  type SaveComposerDraftRequest,
+  type SendMessageInput,
+  type SessionEvent,
 } from "@opengeni/sdk";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { useEmbeddedSession, type EmbeddedSessionClientOverride } from "../session-context";
@@ -537,13 +538,15 @@ export function useComposer(
             replaceLocal ||
             (!localWasDirtyAtStart && localAtStart === localEditRevision.current)
           ) {
-            // Model/effort ride in sendExtras (outside localEditRevision). If
+            // Model/effort/latency ride in sendExtras (outside
+            // localEditRevision). If
             // the picker changed during this fetch, skip onDraftApplied so a
-            // stale server model/effort cannot undo the operator's pick.
+            // stale server policy cannot undo the operator's pick.
             const extrasNow = resolveSendExtras(sendExtrasRef.current);
             const pickerChangedDuringFetch =
               extrasNow.model !== extrasAtStart.model ||
-              extrasNow.reasoningEffort !== extrasAtStart.reasoningEffort;
+              extrasNow.reasoningEffort !== extrasAtStart.reasoningEffort ||
+              extrasNow.latencyMode !== extrasAtStart.latencyMode;
             valueRef.current = fetched.text;
             restoredResourcesRef.current = fetched.resources;
             lastSavedSignature.current = draftSignature(draftPayload(fetched));
@@ -1442,7 +1445,7 @@ function mergeResources(base: ResourceRef[], additions: ResourceRef[]): Resource
     // different duplicate counts after server normalization.
     const key =
       resource.kind === "file"
-        ? `file:${resource.fileId}\u0000${resource.mountPath ?? `files/${resource.fileId}`}`
+        ? `file:${resource.fileId}\u0000${resource.mountPath ?? `${DEFAULT_FILE_RESOURCE_MOUNT_ROOT}/${resource.fileId}`}`
         : JSON.stringify(resource);
     if (seen.has(key)) return false;
     seen.add(key);

package/src/index.ts

@@ -256,6 +256,8 @@ export type {
   HumanInputFormMessages,
   HumanInputFormProps,
 } from "./components/human-input-form";
+export { HumanInputSurface } from "./components/human-input-surface";
+export type { HumanInputSurfaceProps } from "./components/human-input-surface";
 
 // Timeline projection
 export {
@@ -445,6 +447,8 @@ export { SandboxTerminal } from "./components/sandbox-terminal";
 export type { SandboxTerminalProps, XtermTheme } from "./components/sandbox-terminal";
 export { FileBrowser } from "./components/file-browser";
 export type { FileBrowserProps } from "./components/file-browser";
+export { WorkbenchChanges } from "./components/workbench-changes";
+export type { WorkbenchChangesProps } from "./components/workbench-changes";
 export { DiffView } from "./components/diff-view";
 export type { DiffViewProps, DiffTheme } from "./components/diff-view";
 export { PierreDiff } from "./components/pierre-diff";

package/src/realtime/dropdown-menu.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { ChevronRightIcon } from "lucide-react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn";
+
+function DropdownMenu(props: ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuTrigger(props: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub(props: ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean }) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+};