@opengeni/react 0.28.2 → 0.32.1

package/src/hooks/use-voice-input.ts

@@ -0,0 +1,232 @@
+import type { ClientVoiceInputConfig, OpenGeniClient } from "@opengeni/sdk";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { appendFinalTranscript } from "./use-transcription";
+
+export type VoiceInputStatus =
+  | "idle"
+  | "requesting-permission"
+  | "recording"
+  | "transcribing"
+  | "error";
+
+export type UseVoiceInputOptions = {
+  client: Pick<OpenGeniClient, "transcribeAudio"> | null;
+  workspaceId: string;
+  capability: ClientVoiceInputConfig | null;
+  enabled: boolean;
+  value: string;
+  setValue: (value: string) => void;
+  focusInput: () => void;
+  disabled?: boolean | undefined;
+};
+
+export type UseVoiceInputResult = {
+  status: VoiceInputStatus;
+  error: string | null;
+  available: boolean;
+  /** Live mic stream while recording; null once stopped/cancelled. */
+  stream: MediaStream | null;
+  start: () => Promise<boolean>;
+  /** Stop capture and immediately upload/transcribe into the draft (no Send). */
+  stop: () => void;
+  /** Discard the in-flight recording or transcription; Escape also cancels. */
+  cancel: () => void;
+};
+
+const MIME_PREFERENCES = ["audio/webm;codecs=opus", "audio/mp4", "audio/ogg;codecs=opus"];
+
+export function useVoiceInput({
+  client,
+  workspaceId,
+  capability,
+  enabled,
+  value,
+  setValue,
+  focusInput,
+  disabled = false,
+}: UseVoiceInputOptions): UseVoiceInputResult {
+  const [status, setStatus] = useState<VoiceInputStatus>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [stream, setStream] = useState<MediaStream | null>(null);
+  const generationRef = useRef(0);
+  const recorderRef = useRef<MediaRecorder | null>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const controllerRef = useRef<AbortController | null>(null);
+  const valueRef = useRef(value);
+  valueRef.current = value;
+
+  const clearRuntime = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = null;
+    streamRef.current?.getTracks().forEach((track) => track.stop());
+    streamRef.current = null;
+    recorderRef.current = null;
+    setStream(null);
+  }, []);
+
+  const cancel = useCallback(() => {
+    generationRef.current += 1;
+    controllerRef.current?.abort();
+    controllerRef.current = null;
+    const recorder = recorderRef.current;
+    clearRuntime();
+    if (recorder && recorder.state !== "inactive") recorder.stop();
+    setStatus("idle");
+    setError(null);
+    focusInput();
+  }, [clearRuntime, focusInput]);
+
+  const stop = () => {
+    const recorder = recorderRef.current;
+    if (!recorder || recorder.state === "inactive") return;
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = null;
+    setStatus("transcribing");
+    recorder.stop();
+  };
+
+  const start = async (): Promise<boolean> => {
+    if (
+      disabled ||
+      !client ||
+      !enabled ||
+      !capability?.available ||
+      status === "requesting-permission" ||
+      status === "recording" ||
+      status === "transcribing" ||
+      !navigator.mediaDevices?.getUserMedia ||
+      typeof MediaRecorder === "undefined"
+    ) {
+      return false;
+    }
+    const voiceClient = client;
+    const generation = ++generationRef.current;
+    setStatus("requesting-permission");
+    setError(null);
+    try {
+      const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      if (generation !== generationRef.current) {
+        mediaStream.getTracks().forEach((track) => track.stop());
+        return false;
+      }
+      const mimeType = chooseMimeType(capability.acceptedMimeTypes);
+      const recorder = new MediaRecorder(mediaStream, mimeType ? { mimeType } : undefined);
+      const chunks: BlobPart[] = [];
+      const startedAt = Date.now();
+      streamRef.current = mediaStream;
+      recorderRef.current = recorder;
+      setStream(mediaStream);
+      recorder.ondataavailable = (event) => {
+        if (event.data.size > 0) chunks.push(event.data);
+      };
+      recorder.onstop = () => {
+        clearRuntime();
+        if (generation !== generationRef.current) return;
+        const audio = new Blob(chunks, { type: recorder.mimeType || mimeType || "audio/webm" });
+        if (audio.size === 0) {
+          setStatus("error");
+          setError("invalid_audio");
+          return;
+        }
+        const controller = new AbortController();
+        controllerRef.current = controller;
+        void voiceClient
+          .transcribeAudio(workspaceId, {
+            audio,
+            mimeType: audio.type,
+            durationSeconds: Math.max(0, (Date.now() - startedAt) / 1000),
+            signal: controller.signal,
+          })
+          .then((response) => {
+            if (generation !== generationRef.current || controller.signal.aborted) return;
+            const next = appendFinalTranscript(valueRef.current, response.text);
+            if (next !== valueRef.current) {
+              valueRef.current = next;
+              setValue(next);
+            }
+            setStatus("idle");
+            focusInput();
+          })
+          .catch((reason: unknown) => {
+            if (generation !== generationRef.current || controller.signal.aborted) return;
+            setStatus("error");
+            setError(errorCode(reason));
+          })
+          .finally(() => {
+            if (controllerRef.current === controller) controllerRef.current = null;
+          });
+      };
+      recorder.start();
+      setStatus("recording");
+      timerRef.current = setTimeout(
+        () => stop(),
+        Math.min(capability.maxDurationSeconds, 60) * 1000,
+      );
+      return true;
+    } catch (reason) {
+      if (generation !== generationRef.current) return false;
+      clearRuntime();
+      setStatus("error");
+      setError(errorCode(reason));
+      return false;
+    }
+  };
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && status !== "idle") {
+        event.preventDefault();
+        cancel();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [cancel, status]);
+
+  useEffect(
+    () => () => {
+      generationRef.current += 1;
+      controllerRef.current?.abort();
+      const recorder = recorderRef.current;
+      clearRuntime();
+      if (recorder && recorder.state !== "inactive") recorder.stop();
+    },
+    [clearRuntime],
+  );
+
+  return {
+    status,
+    error,
+    available: Boolean(capability?.available && enabled && !disabled),
+    stream,
+    start,
+    stop,
+    cancel,
+  };
+}
+
+function chooseMimeType(accepted: string[]): string | undefined {
+  const normalized = accepted.map((value) => value.trim().toLowerCase());
+  return MIME_PREFERENCES.find((mimeType) => {
+    const bare = mimeType.split(";")[0] ?? mimeType;
+    const allowed =
+      normalized.includes(mimeType) ||
+      normalized.includes(bare) ||
+      normalized.some((candidate) => candidate.split(";")[0] === bare);
+    return (
+      allowed &&
+      (typeof MediaRecorder.isTypeSupported !== "function" ||
+        MediaRecorder.isTypeSupported(mimeType))
+    );
+  });
+}
+
+function errorCode(error: unknown): string {
+  if (error && typeof error === "object" && "code" in error && typeof error.code === "string") {
+    return error.code;
+  }
+  if (error instanceof DOMException && error.name === "NotAllowedError") return "permission_denied";
+  if (error instanceof DOMException && error.name === "NotSupportedError") return "not_supported";
+  return "unknown";
+}

package/src/index.ts

@@ -49,6 +49,13 @@ export {
   FILE_ONLY_MESSAGE_TEXT,
 } from "./hooks/use-composer";
 export type { ComposerSendExtras, ComposerState, UseComposerOptions } from "./hooks/use-composer";
+export { useVoiceInput } from "./hooks/use-voice-input";
+export type {
+  UseVoiceInputOptions,
+  UseVoiceInputResult,
+  VoiceInputStatus,
+} from "./hooks/use-voice-input";
+export { COMPOSER_PAYMENT_REQUIRED_MESSAGE, composerSubmissionErrorMessage } from "./lib/format";
 export {
   INITIAL_TRANSCRIPTION_CONTROL_STATE,
   appendFinalTranscript,
@@ -74,8 +81,25 @@ export type {
   UseTurnQueueOptions,
   UseTurnQueueResult,
 } from "./hooks/use-turn-queue";
+export {
+  useLastStartedTurnPolicy,
+  isLastStartedTurnPolicyEvent,
+} from "./hooks/use-last-started-turn-policy";
+export type {
+  LastStartedTurnPolicy,
+  UseLastStartedTurnPolicyOptions,
+  UseLastStartedTurnPolicyResult,
+} from "./hooks/use-last-started-turn-policy";
 export { QueueSurface } from "./components/queue-surface";
 export type { QueueSurfaceProps } from "./components/queue-surface";
+export { SessionChrome, sessionChromeGoalPillState } from "./components/session-chrome";
+export type {
+  SessionChromeAgentsSignal,
+  SessionChromeProps,
+  SessionChromeSignalId,
+  SessionChromeSignalTone,
+} from "./components/session-chrome";
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip";
 export { OPEN_WORKSTREAM_CONTROL_EVENT } from "./components/chat-composer";
 export { useGoal, isGoalEvent } from "./hooks/use-goal";
 export type { UseGoalOptions, UseGoalResult } from "./hooks/use-goal";
@@ -131,10 +155,12 @@ export { useWorkspaces } from "./hooks/use-workspaces";
 export type { UseWorkspacesOptions, UseWorkspacesResult } from "./hooks/use-workspaces";
 export { useBillingUsage } from "./hooks/use-billing-usage";
 export type { UseBillingUsageOptions, UseBillingUsageResult } from "./hooks/use-billing-usage";
-export { useAvailableModels } from "./hooks/use-available-models";
+export { useAvailableModels, useWorkspaceModelCatalog } from "./hooks/use-available-models";
 export type {
   UseAvailableModelsOptions,
   UseAvailableModelsResult,
+  UseWorkspaceModelCatalogOptions,
+  UseWorkspaceModelCatalogResult,
 } from "./hooks/use-available-models";
 
 // Sandbox surfacing (Phase 5): capability negotiation + terminal/files/diff/desktop
@@ -244,7 +270,10 @@ export type {
   ActivityItem,
   AgentMessageItem,
   AuthNeededItem,
+  ContextCompactionItem,
   GoalItem,
+  MachineInputBatchItem,
+  MachineInputMember,
   NoticeItem,
   ReasoningItem,
   SandboxItem,
@@ -364,9 +393,28 @@ export { defaultChatComposerMessages } from "./components/composer";
 export type { ChatComposerMessages } from "./components/composer";
 export { ModelPicker } from "./components/model-picker";
 export type { ModelPickerProps } from "./components/model-picker";
+export {
+  advancedSourceSummary,
+  availabilityReasonLabel,
+  billingClassForModel,
+  billingClassLabel,
+  coerceReasoningEffortForModel,
+  defaultEffortForModel,
+  effortOptionsForModel,
+  findPickerRow,
+  groupPickerRowsByBillingClass,
+  labelLatencyMode,
+  payerSummaryForModel,
+  projectPickerRows,
+  runnableLatencyModesForModel,
+  sortPickerRows,
+} from "./model-policy";
+export type { LatencyModeId, PickerBillingClass, PickerModelRow } from "./model-policy";
 export { MessageTimeline, TimelineRow } from "./components/message-timeline";
 export type { MessageTimelineProps } from "./components/message-timeline";
 export { Markdown } from "./components/markdown";
+export { CopyButton, CopyHoverFrame } from "./components/copy-button";
+export { copyTextToClipboard, tableElementToTsv } from "./lib/clipboard";
 export type { MarkdownProps } from "./components/markdown";
 export { SessionStatus, StatusDot, SESSION_STATUS_META } from "./components/session-status";
 export type {

package/src/lib/clipboard.ts

@@ -0,0 +1,58 @@
+/**
+ * Copy plain text to the clipboard. Prefers the async Clipboard API; falls
+ * back to a short-lived textarea for older embeds / denied permissions.
+ */
+export async function copyTextToClipboard(text: string): Promise<boolean> {
+  const value = text.replace(/\u00a0/g, " ");
+  if (value.length === 0) {
+    return false;
+  }
+  try {
+    if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(value);
+      return true;
+    }
+  } catch {
+    // Fall through to execCommand path.
+  }
+  if (typeof document === "undefined") {
+    return false;
+  }
+  try {
+    const area = document.createElement("textarea");
+    area.value = value;
+    area.setAttribute("readonly", "");
+    area.style.position = "fixed";
+    area.style.left = "-9999px";
+    area.style.top = "0";
+    document.body.appendChild(area);
+    area.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(area);
+    return ok;
+  } catch {
+    return false;
+  }
+}
+
+/** Serialize an HTML table to tab-separated values (spreadsheet-friendly). */
+export function tableElementToTsv(table: HTMLTableElement | null | undefined): string {
+  if (!table) {
+    return "";
+  }
+  const rows = Array.from(table.querySelectorAll("tr"));
+  return rows
+    .map((row) =>
+      Array.from(row.querySelectorAll("th,td"))
+        .map((cell) => {
+          const raw = (cell.textContent ?? "").replace(/\s+/g, " ").trim();
+          if (/[\t\n"]/.test(raw)) {
+            return `"${raw.replace(/"/g, '""')}"`;
+          }
+          return raw;
+        })
+        .join("\t"),
+    )
+    .filter((line) => line.length > 0)
+    .join("\n");
+}

package/src/lib/format.ts

@@ -1,3 +1,5 @@
+import { OpenGeniApiError } from "@opengeni/sdk";
+
 /** Compact relative time: "now", "42s", "7m", "3h", "2d", then a date. */
 export function formatRelativeTime(iso: string, now: Date = new Date()): string {
   const then = new Date(iso).getTime();
@@ -93,6 +95,22 @@ export function tryParseJson(text: string): unknown {
 export const CREDIT_EXHAUSTION_MESSAGE =
   "Out of OpenGeni credits — this workspace's balance is empty. Add credits to continue; the conversation is preserved.";
 
+/**
+ * Actionable composer copy for an edge rejection before a turn is accepted.
+ * Unlike an in-flight credit exhaustion, this path has not consumed the
+ * actor-private draft or any finalized attachment.
+ */
+export const COMPOSER_PAYMENT_REQUIRED_MESSAGE =
+  "This turn requires OpenGeni managed credits, but the account balance is empty. Add credits or choose a connected Codex subscription model, then retry. Your draft and attachments are preserved.";
+
+export function composerSubmissionErrorMessage(error: Error): string {
+  return error instanceof OpenGeniApiError &&
+    error.status === 402 &&
+    error.code === "payment_required"
+    ? COMPOSER_PAYMENT_REQUIRED_MESSAGE
+    : error.message;
+}
+
 /**
  * Does this failure/completion payload (or raw error string) mean the
  * workspace ran out of OpenGeni credits? Matches the engine's

package/src/lib/motion-inspect.ts

@@ -0,0 +1,5 @@
+/**
+ * TEMP eyeball scale for vertical motion (tip-follow, settle fold, CSS).
+ * Set back to `1` before landing — not a product knob.
+ */
+export const MOTION_INSPECT_SCALE = 1;

package/src/lib/motion.ts

@@ -0,0 +1,80 @@
+import { flushSync } from "react-dom";
+
+/**
+ * Live `prefers-reduced-motion` check for JS-driven motion (scroll glides,
+ * streaming word reveals). CSS animations are already neutralized globally in
+ * styles/index.css; this lets the imperative paths skip their work entirely.
+ */
+let query: MediaQueryList | null | undefined;
+
+export function prefersReducedMotion(): boolean {
+  if (query === undefined) {
+    query =
+      typeof window !== "undefined" && typeof window.matchMedia === "function"
+        ? window.matchMedia("(prefers-reduced-motion: reduce)")
+        : null;
+  }
+  return query?.matches ?? false;
+}
+
+/** Test seam: forget the cached MediaQueryList so a stubbed matchMedia applies. */
+export function resetReducedMotionCache(): void {
+  query = undefined;
+}
+
+type ViewTransitionResult = { finished: Promise<void> };
+type ViewTransitionCallback = () => void;
+type ViewTransitionOptions = {
+  update: ViewTransitionCallback;
+  types?: string[];
+};
+type ViewTransitionStarter = {
+  (callback: ViewTransitionCallback): ViewTransitionResult;
+  (options: ViewTransitionOptions): ViewTransitionResult;
+};
+
+/** Active VT type for markdown crystallize — scoped CSS, not a full-page blink. */
+export const MARKDOWN_CRYSTALLIZE_VT_TYPE = "og-md-crystallize";
+
+/**
+ * Run a DOM update inside the browser View Transition API when available.
+ * Snapshots the before/after paint and cross-fades (or custom CSS morphs)
+ * between them — the platform "morph" primitive React's experimental
+ * `<ViewTransition>` wraps. Falls back to a synchronous update.
+ */
+export function runViewTransition(update: () => void, options?: { types?: string[] }): void {
+  if (prefersReducedMotion()) {
+    update();
+    return;
+  }
+  const doc = typeof document !== "undefined" ? document : null;
+  const start = doc
+    ? ((doc as Document & { startViewTransition?: ViewTransitionStarter }).startViewTransition ??
+      null)
+    : null;
+  if (typeof start !== "function") {
+    update();
+    return;
+  }
+  const types = options?.types;
+  if (types && types.length > 0) {
+    try {
+      Reflect.apply(start, doc, [
+        {
+          update: () => {
+            flushSync(update);
+          },
+          types,
+        },
+      ]);
+      return;
+    } catch {
+      // Older engines only accept the callback form.
+    }
+  }
+  Reflect.apply(start, doc, [
+    () => {
+      flushSync(update);
+    },
+  ]);
+}