@opengeni/react 4.2.1-canary.39642758903001 → 4.3.1

package/src/app/routes/sessions-index.tsx

@@ -105,6 +105,9 @@ import {
   DropdownMenuTrigger,
 } from "../../ui/dropdown-menu";
 import { Notice } from "../../ui/notice";
+import { CreditRefusalNotice } from "../components/credits/credit-refusal-notice";
+import { coveredModelChoice, creditRefusalGap, freeCreditGap } from "../lib/free-credit-gap";
+import { isPaymentRequiredError } from "../lib/model-access";
 import { isTransientServiceFailure, OPENGENI_UPDATING_NOTICE } from "../lib/transient-retry";
 import { useConnectionAccounts } from "../components/capabilities/use-connection-accounts";
 import { StatusDot } from "../../ui/status-dot";
@@ -613,6 +616,12 @@ function SessionsIndexRouteContent({
   const [usageLimitDraft, setUsageLimitDraft] =
     useState<SessionUsageLimitDraft>(NO_SESSION_USAGE_LIMIT);
   const [usageLimitSendBlocked, setUsageLimitSendBlocked] = useState(false);
+  // The API refused to start this chat because no credit pays for its model.
+  const [createCreditRefusal, setCreateCreditRefusal] = useState<{
+    workspaceId: string;
+    model: string;
+    message: string;
+  } | null>(null);
   const [createdSessionAuthority, setCreatedSessionAuthority] =
     useState<CreatedSessionRouteAuthority | null>(null);
   const composerRegionRef = useRef<HTMLDivElement | null>(null);
@@ -945,6 +954,39 @@ function SessionsIndexRouteContent({
       draft.visibility === "private" &&
       tenancyCapabilities?.canCreatePrivate !== true);
   const selectedPolicyRow = findPickerRow(modelCatalog.rows, context.model);
+  // A refused start names its model until the next start or a dismissal; before
+  // any Send, an uncovered model with free credit left for others does the same.
+  const refusedCreate =
+    createCreditRefusal?.workspaceId === workspaceId ? createCreditRefusal : null;
+  const creditCoverageOptions = {
+    selectedModel: context.model,
+    preferredModel: modelCatalog.defaultSelection?.model,
+  };
+  const creditGap = refusedCreate
+    ? creditRefusalGap(modelCatalog.rows, refusedCreate.model, creditCoverageOptions)
+    : freeCreditGap(modelCatalog.rows, context.model, creditCoverageOptions);
+  const noteCreditRefusal = (error: Error, request: { model?: string | undefined }): boolean => {
+    if (!isPaymentRequiredError(error)) return false;
+    setCreateCreditRefusal({
+      workspaceId,
+      model: request.model ?? context.model,
+      message: error.message,
+    });
+    // Re-read funding so the notice and picker name what the credit covers now.
+    void modelCatalog.refresh();
+    return true;
+  };
+  const chooseCoveredModel = (id: string) => {
+    const row = findPickerRow(modelCatalog.rows, id);
+    const choice = row
+      ? coveredModelChoice(row, context.reasoningEffort, context.latencyMode)
+      : null;
+    if (!choice) return;
+    setModelProvided(true);
+    context.setModel(choice.model);
+    context.setReasoningEffort(choice.effort);
+    if (choice.latencyMode !== null) context.setLatencyMode(choice.latencyMode);
+  };
   const newSessionPolicyValid = Boolean(
     selectedPolicyRow?.selectable &&
     effortOptionsForModel(selectedPolicyRow.catalog).includes(context.reasoningEffort) &&
@@ -1196,7 +1238,11 @@ function SessionsIndexRouteContent({
                       outcomeUnknown = uncertain;
                       recoverPersonalResourceAttachment(error, request);
                       // A brief outage shows the updating notice, not a toast.
-                      return draftConflict || newSessionDraft.reportUnavailable(error);
+                      return (
+                        draftConflict ||
+                        newSessionDraft.reportUnavailable(error) ||
+                        noteCreditRefusal(error, request)
+                      );
                     },
                   },
                 );
@@ -1206,6 +1252,7 @@ function SessionsIndexRouteContent({
                   return null;
                 }
                 setUsageLimitDraft(NO_SESSION_USAGE_LIMIT);
+                setCreateCreditRefusal(null);
                 setUsageLimitSendBlocked(false);
                 return {
                   sessionId: created.id,
@@ -1270,7 +1317,11 @@ function SessionsIndexRouteContent({
                     // A brief outage shows the updating notice, not a toast.
                     // An unconfirmed create keeps its idempotency key, so the
                     // person's next Send cannot start a second session.
-                    return draftConflict || newSessionDraft.reportUnavailable(error);
+                    return (
+                      draftConflict ||
+                      newSessionDraft.reportUnavailable(error) ||
+                      noteCreditRefusal(error, request)
+                    );
                   },
                 },
               );
@@ -1281,6 +1332,7 @@ function SessionsIndexRouteContent({
               }
               // The limit belongs to the chat just created; the next starts with none.
               setUsageLimitDraft(NO_SESSION_USAGE_LIMIT);
+              setCreateCreditRefusal(null);
               setUsageLimitSendBlocked(false);
               return {
                 sessionId: created.id,
@@ -1607,8 +1659,35 @@ function SessionsIndexRouteContent({
           </div>
         ) : null}
 
-        {modelUsesCredits(selectedPolicyRow?.catalog) &&
-        hasAccountPermission(context.accessContext, workspace?.accountId ?? "", "billing:read") ? (
+        {creditGap ? (
+          <div className="mt-6">
+            <CreditRefusalNotice
+              gap={creditGap}
+              message={refusedCreate?.message}
+              workspaceId={workspaceId}
+              canBuyCredits={
+                context.clientConfig.billingMode === "stripe" &&
+                hasAccountPermission(
+                  context.accessContext,
+                  workspace?.accountId ?? "",
+                  "billing:manage",
+                )
+              }
+              canConnectModel={hasWorkspacePermission(
+                context.accessContext,
+                workspaceId,
+                "connections:write",
+              )}
+              onChooseModel={busy ? undefined : chooseCoveredModel}
+              {...(refusedCreate ? { onDismiss: () => setCreateCreditRefusal(null) } : {})}
+            />
+          </div>
+        ) : modelUsesCredits(selectedPolicyRow?.catalog) &&
+          hasAccountPermission(
+            context.accessContext,
+            workspace?.accountId ?? "",
+            "billing:read",
+          ) ? (
           <div className="mt-6">
             <Suspense fallback={null}>
               <EmptyCreditsNotice

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

@@ -5,10 +5,10 @@ import { createPortal } from "react-dom";
 import { usePortalContainer } from "../ui/portal-container";
 import { usePortalTokenStyle } from "../lib/use-portal-token-style";
 import type { TimelineAnnotationSourceDescriptor } from "../timeline";
+import { annotationFromSelection } from "../timeline/annotation-model";
 import {
   clipRangeToSource,
   matchingQuoteInSource,
-  occurrenceOffsets,
   quoteOccurrenceIndex,
   truncateAnnotationQuote,
   visibleClientRect,
@@ -23,35 +23,9 @@ type SelectionCandidate = {
 };
 
 const CONTROL_SELECTOR = "button,input,textarea,select,summary,[contenteditable='true']";
-const SOURCE_CONTEXT_BYTES = 160;
-const MAX_QUOTE_BYTES = 16 * 1024;
 const POPOVER_WIDTH = 280;
 const POPOVER_HEIGHT = 64;
 
-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);
 }
@@ -79,13 +53,6 @@ function isWhollyInsideControl(range: Range, boundary: HTMLElement): boolean {
   );
 }
 
-function annotationId(): string {
-  if (typeof globalThis.crypto?.randomUUID === "function") {
-    return globalThis.crypto.randomUUID();
-  }
-  return `annotation-${Date.now()}-${Math.random().toString(16).slice(2)}`;
-}
-
 function clamp(value: number, min: number, max: number): number {
   return Math.min(Math.max(value, min), max);
 }
@@ -113,41 +80,19 @@ function buildCandidate(
   if (!clipped) return null;
   const sourceKey = startBoundary.dataset.ogAnnotationSourceKey;
   const source = sourceKey ? sources.get(sourceKey) : undefined;
+  if (!source) return null;
   const rawQuote = clipped.toString();
-  const quote = (source ? matchingQuoteInSource(source.text, rawQuote) : null) ?? rawQuote;
-  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 = quoteOccurrenceIndex(startBoundary, clipped, quote);
-  const startOffset = sourceOffsets[Math.min(occurrence, sourceOffsets.length - 1)]!;
-  const endOffset = startOffset + quote.length;
+  const quote = matchingQuoteInSource(source.text, rawQuote) ?? rawQuote;
+  const annotation = annotationFromSelection(source, {
+    text: quote,
+    occurrence: quoteOccurrenceIndex(startBoundary, clipped, quote),
+  });
+  if (!annotation) return null;
   const rect = visibleClientRect(range) ?? visibleClientRect(clipped);
   if (!rect) return null;
   const position = popoverPosition(rect);
   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 } : {}),
-      },
-    },
+    annotation,
     left: position.left,
     top: position.top,
     keyboard,

package/src/components/timeline-annotation-shared.ts

@@ -1,20 +1,18 @@
 import type { TimelineAnnotationSource } from "@opengeni/sdk";
 import { type OpenGeniText } from "../messages/runtime";
+import { occurrenceOffsets } from "../timeline/annotation-model";
+
+export {
+  annotationDisplayOrdinal,
+  annotationHasNote,
+  matchingQuoteInSource,
+  occurrenceOffsets,
+  truncateAnnotationQuote,
+} from "../timeline/annotation-model";
 
 export const ANNOTATION_CHROME_SELECTOR =
   "[data-og-annotation-chrome], [data-og-annotation-badge], [data-og-annotation-popover]";
 
-export function annotationHasNote(note: string): boolean {
-  return note.trim().length > 0;
-}
-
-export function annotationDisplayOrdinal(
-  annotation: { readonly id?: string; readonly ordinal?: number | undefined },
-  index: number,
-): number {
-  return typeof annotation.ordinal === "number" ? annotation.ordinal : index + 1;
-}
-
 export function sourceKindLabel(t: OpenGeniText, kind: TimelineAnnotationSource["kind"]): string {
   switch (kind) {
     case "user_message":
@@ -30,12 +28,6 @@ export function annotationSourceLabel(t: OpenGeniText, source: TimelineAnnotatio
   return source.label?.trim() || sourceKindLabel(t, source.kind);
 }
 
-export function truncateAnnotationQuote(quote: string, maxChars = 160): string {
-  const normalized = quote.replace(/\s+/g, " ").trim();
-  if (normalized.length <= maxChars) return normalized;
-  return `${normalized.slice(0, Math.max(0, maxChars - 1)).trimEnd()}…`;
-}
-
 export function cssEscapeAttribute(value: string): string {
   if (typeof CSS !== "undefined" && typeof CSS.escape === "function") return CSS.escape(value);
   return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
@@ -46,46 +38,6 @@ export function isAnnotationChromeNode(node: Node | null): boolean {
   return Boolean(element?.closest(ANNOTATION_CHROME_SELECTOR));
 }
 
-export function occurrenceOffsets(text: string, quote: string): number[] {
-  if (!quote) return [];
-  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 uniqueNonEmpty(values: string[]): string[] {
-  const seen = new Set<string>();
-  const out: string[] = [];
-  for (const value of values) {
-    if (!value || seen.has(value)) continue;
-    seen.add(value);
-    out.push(value);
-  }
-  return out;
-}
-
-export function matchingQuoteInSource(sourceText: string, quote: string): string | null {
-  for (const candidate of uniqueNonEmpty([quote, quote.trim()])) {
-    if (sourceText.includes(candidate)) return candidate;
-  }
-  const trimmed = quote.trim();
-  for (let length = trimmed.length; length >= 8; length--) {
-    const slice = trimmed.slice(0, length);
-    if (sourceText.includes(slice)) return slice;
-  }
-  for (let start = 1; start <= trimmed.length - 8; start++) {
-    const slice = trimmed.slice(start);
-    if (sourceText.includes(slice)) return slice;
-  }
-  return null;
-}
-
 type AnnotatableSpan = {
   node: Text;
   start: number;

package/src/hooks/page-wake.ts

@@ -0,0 +1,80 @@
+/**
+ * Notices when the page wakes from a suspension it could not observe: a
+ * laptop sleep, a frozen tab, or a network that came back. Live streams on a
+ * page that slept usually died with it, while the hidden-tab signal never
+ * fired (or its grace timer could not run), so they would otherwise wait for
+ * a heartbeat timeout before reconnecting.
+ *
+ * Detection: a light timer compares wall-clock time between ticks (timers do
+ * not run while the machine sleeps, but the wall clock moves on), checked
+ * again when the page becomes visible, plus the `online`, `resume` (Page
+ * Lifecycle) and bfcache `pageshow` events. One shared detector serves every
+ * subscriber and stops with the last one.
+ */
+
+/** How often the wall clock is sampled while anyone listens. */
+export const PAGE_WAKE_CHECK_INTERVAL_MS = 2_000;
+/** A tick this long after the previous one means the page was suspended. */
+export const PAGE_WAKE_GAP_MS = 15_000;
+
+type PageWakeListener = () => void;
+
+const listeners = new Set<PageWakeListener>();
+let stopDetector: (() => void) | null = null;
+
+/** Call `listener` on every detected wake; returns the unsubscribe. */
+export function subscribePageWake(listener: PageWakeListener): () => void {
+  listeners.add(listener);
+  stopDetector ??= startDetector();
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0 && stopDetector) {
+      stopDetector();
+      stopDetector = null;
+    }
+  };
+}
+
+function emitPageWake(): void {
+  for (const listener of [...listeners]) {
+    try {
+      listener();
+    } catch {
+      // One subscriber cannot keep the others asleep.
+    }
+  }
+}
+
+function startDetector(): () => void {
+  if (typeof window === "undefined" || typeof document === "undefined") return () => {};
+  let lastTick = Date.now();
+  const check = () => {
+    const now = Date.now();
+    const elapsed = now - lastTick;
+    lastTick = now;
+    if (elapsed > PAGE_WAKE_GAP_MS) emitPageWake();
+  };
+  const onVisibility = () => {
+    if (document.visibilityState !== "hidden") check();
+  };
+  const onPageShow = (event: Event) => {
+    lastTick = Date.now();
+    if ((event as PageTransitionEvent).persisted) emitPageWake();
+  };
+  const onResume = () => {
+    lastTick = Date.now();
+    emitPageWake();
+  };
+  const timer = setInterval(check, PAGE_WAKE_CHECK_INTERVAL_MS);
+  document.addEventListener("visibilitychange", onVisibility);
+  document.addEventListener("resume", onResume);
+  window.addEventListener("pageshow", onPageShow);
+  window.addEventListener("online", onResume);
+  return () => {
+    clearInterval(timer);
+    document.removeEventListener("visibilitychange", onVisibility);
+    document.removeEventListener("resume", onResume);
+    window.removeEventListener("pageshow", onPageShow);
+    window.removeEventListener("online", onResume);
+  };
+}