@opengeni/react 3.3.2 → 3.4.0

package/src/components/chat-composer.tsx

@@ -1,6 +1,12 @@
 import type { ClientModel, EffectiveSessionControl } from "@opengeni/sdk";
 import { LayoutGroup, motion } from "motion/react";
-import type { ClipboardEvent, ReactNode } from "react";
+import {
+  useImperativeHandle,
+  type ClipboardEvent,
+  type ComponentProps,
+  type ReactNode,
+  type Ref,
+} from "react";
 import type { SlashCommand } from "../commands/types";
 import type { ComposerState } from "../hooks/use-composer";
 import type { UseFileAttachmentsResult } from "../hooks/use-file-attachments";
@@ -25,10 +31,12 @@ import {
   Root,
   SendButton,
   Status,
+  StopButton,
   Surface,
   useChatComposerController,
   type ChatComposerMessages,
   type ComposerControlLinks,
+  type ComposerRunControl,
   type ResponsiveBasis,
 } from "./composer";
 import {
@@ -41,6 +49,14 @@ export { OPEN_WORKSTREAM_CONTROL_EVENT };
 
 export type ChatComposerProps = {
   composer: ComposerState;
+  /** Replace only the normal footer, inside the shared composer context.
+   * Confirmation, drafts, annotations and attachments remain native. */
+  footer?: ReactNode;
+  focusRef?: Ref<{ focusInput: () => void }>;
+  inputProps?: ComponentProps<typeof Input> & {
+    [attribute: `data-${string}`]: string | number | boolean | undefined;
+  };
+  surfaceClassName?: string;
   /**
    * Measurement surface for responsive chrome. Defaults to the historical
    * viewport breakpoints; opt into `container` for narrow embedded panels.
@@ -89,6 +105,14 @@ export type ChatComposerProps = {
   onClearView?: (() => void) | undefined;
   /** Partial overrides for all composer-owned visible and accessible copy. */
   messages?: Partial<ChatComposerMessages> | undefined;
+  /**
+   * Run control: `pause` (default) shows the workstream Pause control and
+   * paused strip; `stop` shows Stop only while `running`, and the next message
+   * continues a stopped conversation; `none` shows neither.
+   */
+  runControl?: ComposerRunControl | undefined;
+  /** A response is in progress (drives the Stop control). */
+  running?: boolean | undefined;
 };
 
 /**
@@ -125,6 +149,12 @@ export function ChatComposer({
   commandContext,
   onClearView,
   messages,
+  footer,
+  focusRef,
+  inputProps,
+  surfaceClassName,
+  runControl,
+  running,
 }: ChatComposerProps) {
   const controller = useChatComposerController({
     delivery: composer,
@@ -141,24 +171,32 @@ export function ChatComposer({
     onClearView,
     onPaste,
     messages,
+    runControl,
+    running,
   });
   const hasControls = Boolean(
     attachments || models || controlsLeading || controlsStart || transcription,
   );
   const stackActions = hasControls && Boolean(actionsStart);
+  useImperativeHandle(focusRef, () => ({ focusInput: controller.focusInput }), [
+    controller.focusInput,
+  ]);
 
   return (
     <>
       <Root controller={controller} responsiveBasis={responsiveBasis} className={className}>
         <Frame>
           <CommandPalette />
-          <Surface>
+          <Surface className={surfaceClassName}>
             <PausedState />
             <RestoredResources />
             <Attachments />
             {header}
-            {composer.annotations && composer.annotations.length > 0 ? (
-              <div className="px-3 pt-2 sm:px-4">
+            {composer.annotations &&
+            composer.annotations.length > 0 &&
+            composer.updateAnnotation &&
+            composer.removeAnnotation ? (
+              <div className="px-3.5 pt-2 md:px-4">
                 <TimelineAnnotationsChip
                   annotations={composer.annotations}
                   editable
@@ -166,12 +204,15 @@ export function ChatComposer({
                   onFocusConsumed={composer.clearAnnotationReviewTarget}
                   onUpdate={composer.updateAnnotation}
                   onRemove={composer.removeAnnotation}
+                  onCommit={controller.focusInput}
                 />
               </div>
             ) : null}
-            <Input placeholder={placeholder} autoFocus={autoFocus} />
+            <Input {...inputProps} placeholder={placeholder} autoFocus={autoFocus} />
             {controller.confirmState ? (
               <Confirmation />
+            ) : footer !== undefined ? (
+              footer
             ) : (
               <Footer
                 data-og-stack-actions={stackActions ? "" : undefined}
@@ -226,6 +267,7 @@ export function ChatComposer({
                   >
                     {actionsStart}
                     <PauseButton />
+                    <StopButton />
                     <SendButton />
                   </Actions>
                 </LayoutGroup>

package/src/components/child-session-link.tsx

@@ -0,0 +1,36 @@
+import { isSessionId } from "../timeline/agent-identity";
+import type { MachineInputMember } from "../timeline/types";
+
+/**
+ * Source IDs are routing coordinates only for typed agent updates (child
+ * lifecycle notices, agent messages, and agent directions), never parsed from
+ * prose.
+ */
+export function ChildSessionLink({
+  kind,
+  sourceId,
+  onOpenSession,
+}: Pick<MachineInputMember, "kind" | "sourceId"> & {
+  onOpenSession?: ((sessionId: string) => void) | undefined;
+}) {
+  if (
+    !onOpenSession ||
+    !(
+      kind.startsWith("child_") ||
+      kind === "agent_message" ||
+      kind === "agent_steer_instruction"
+    ) ||
+    !isSessionId(sourceId)
+  ) {
+    return null;
+  }
+  return (
+    <button
+      type="button"
+      onClick={() => onOpenSession(sourceId)}
+      className="mt-1 rounded-og-sm text-og-xs font-medium og-link focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-og-accent"
+    >
+      View session
+    </button>
+  );
+}

package/src/components/claude-mark.tsx

@@ -0,0 +1,11 @@
+import { CLAUDE_MARK_PATH } from "../model-mark-paths";
+import type { SVGProps } from "react";
+
+/** ClaudeMark: Simple Icons, CC0; https://github.com/simple-icons/simple-icons */
+export function ClaudeMark(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
+      <path d={CLAUDE_MARK_PATH} />
+    </svg>
+  );
+}

package/src/components/code-editor.tsx

@@ -8,8 +8,10 @@ import {
   useMemo,
   useRef,
   useState,
+  useSyncExternalStore,
 } from "react";
 import { cn } from "../lib/cn";
+import { codeEditorPeers, type CodeEditorLanguage } from "../lib/workbench-peers";
 
 // --- Lazy CodeMirror surface ----------------------------------------------
 //
@@ -42,19 +44,8 @@ type EditorBundle = {
   languageExtension: unknown | null;
 };
 
-/** Language grammar loaders, keyed by the extension class we infer from the path. */
-const LANGUAGE_LOADERS: Record<string, () => Promise<unknown>> = {
-  javascript: async () =>
-    (await import("@codemirror/lang-javascript")).javascript({ jsx: true, typescript: true }),
-  json: async () => (await import("@codemirror/lang-json")).json(),
-  python: async () => (await import("@codemirror/lang-python")).python(),
-  markdown: async () => (await import("@codemirror/lang-markdown")).markdown(),
-  css: async () => (await import("@codemirror/lang-css")).css(),
-  html: async () => (await import("@codemirror/lang-html")).html(),
-};
-
 /** Map a filename to a grammar key (or null for plain text — still fully editable). */
-export function languageForPath(path: string): keyof typeof LANGUAGE_LOADERS | null {
+export function languageForPath(path: string): string | null {
   const name = path.split("/").pop() ?? path;
   const ext = name.includes(".") ? (name.split(".").pop() ?? "").toLowerCase() : "";
   switch (ext) {
@@ -182,6 +173,11 @@ export function CodeEditor({
 }: CodeEditorProps) {
   const [failed, setFailed] = useState(false);
   const [bundle, setBundle] = useState<EditorBundle | null>(null);
+  const peerRevision = useSyncExternalStore(
+    codeEditorPeers.subscribe,
+    codeEditorPeers.revision,
+    codeEditorPeers.revision,
+  );
 
   // The live buffer and its compare-and-swap baseline are one state value so a
   // remote refresh cannot update one without the other.
@@ -233,12 +229,13 @@ export function CodeEditor({
 
   // Resolve the lazy bundle (editor + keymap/Prec helpers + language grammar)
   // once, re-resolving the grammar when the file's language class changes.
-  const langKey = useMemo(() => languageForPath(path), [path]);
+  const langKey = useMemo(() => languageForPath(path) as CodeEditorLanguage | null, [path]);
   useEffect(() => {
     let cancelled = false;
     void (async () => {
       try {
-        const cmMod = (await import("@uiw/react-codemirror")) as unknown as {
+        const peers = await codeEditorPeers.load();
+        const cmMod = peers.module as {
           default: ReactCodeMirrorComponent;
           keymap: { of: (binds: unknown[]) => unknown };
           Prec: { highest: (ext: unknown) => unknown };
@@ -248,7 +245,7 @@ export function CodeEditor({
         let languageExtension: unknown | null = null;
         if (langKey) {
           try {
-            languageExtension = (await LANGUAGE_LOADERS[langKey]?.()) ?? null;
+            languageExtension = (await peers.languages?.[langKey]?.()) ?? null;
           } catch {
             languageExtension = null;
           }
@@ -283,7 +280,7 @@ export function CodeEditor({
     return () => {
       cancelled = true;
     };
-  }, [langKey]);
+  }, [langKey, peerRevision]);
 
   // Keep the freshest save closure reachable from the (stable) keymap binding.
   const saveRef = useRef<() => void>(() => {});

package/src/components/composer-transcription-control.tsx

@@ -1,3 +1,7 @@
+import {
+  COMPOSER_VOICE_INPUT_START_EVENT,
+  composerVoiceEventScope,
+} from "../composer-voice-events";
 import type {
   ClientVoiceInputConfig,
   OpenGeniClient,
@@ -35,6 +39,10 @@ export type ComposerTranscriptionMessages = {
   stop: string;
   cancel: string;
   retry: string;
+  /** Transcribe a recording that was stopped without transcribing or recovered. */
+  transcribeSaved: string;
+  /** Shown near the automatic stop; `{seconds}` is replaced. */
+  timeRemaining: string;
   pauseRetrying: string;
   requestingPermission: string;
   recording: string;
@@ -50,6 +58,9 @@ export type ComposerTranscriptionMessages = {
   errorPermissionDenied: string;
   errorNotSupported: string;
   errorUnavailable: string;
+  errorInsufficientCredits: string;
+  errorAllowanceExhausted: string;
+  errorPolicyBlocked: string;
   errorTooLarge: string;
   errorInvalidAudio: string;
   errorStorageUnavailable: string;
@@ -61,28 +72,34 @@ export type ComposerTranscriptionMessages = {
 const defaultMessages: ComposerTranscriptionMessages = {
   start: "Start voice input",
   stop: "Stop and transcribe",
-  cancel: "Cancel recording",
+  cancel: "Stop without transcribing",
   retry: "Retry voice input",
+  transcribeSaved: "Transcribe saved recording",
+  timeRemaining: "Stops and transcribes in {seconds}s",
   pauseRetrying: "Pause automatic retry",
   requestingPermission: "Requesting microphone…",
-  recording: "Recording. Press Escape to cancel.",
+  recording: "Recording. Press Escape to stop without transcribing.",
   saving: "Saving audio locally…",
   transcribing: "Transcribing…",
-  retrying: "Recording saved. Retrying automatically…",
-  recovered: "Recording recovered and saved locally.",
-  recoveredTranscript: "Transcript saved locally. Check your draft before inserting.",
+  retrying: "Saved. Retrying transcription…",
+  recovered: "Recording saved on this device.",
+  recoveredTranscript: "Transcript saved. Insert it into your draft?",
   insertRecoveredTranscript: "Insert saved transcript",
   discardRecovered: "Discard saved recording",
   unavailableDisabled: "Voice input is unavailable while the composer is disabled.",
   unavailable: "Voice input is unavailable for this workspace.",
-  errorPermissionDenied: "Microphone permission was denied. Your draft was not changed.",
+  errorPermissionDenied: "Microphone access is blocked. Allow it in site settings, then try again.",
   errorNotSupported: "Voice input is not supported on this device.",
   errorUnavailable: "Voice input is not configured.",
+  errorInsufficientCredits:
+    "Voice input needs credits. Recording saved; retry after adding credits.",
+  errorAllowanceExhausted: "Usage limit reached. Recording saved for later.",
+  errorPolicyBlocked: "Voice input isn't allowed for this account or workspace.",
   errorTooLarge: "Recording is too large. Try a shorter message.",
   errorInvalidAudio: "The recording could not be read. Try again.",
   errorStorageUnavailable: "Voice input stopped because audio could not be saved safely.",
-  errorRetryable: "Recording is saved locally. Retry transcription when ready.",
-  errorHandoffUncertain: "Transcript is saved. Check your draft before inserting it again.",
+  errorRetryable: "Saved. Transcription failed, retry when ready.",
+  errorHandoffUncertain: "Transcript saved. Check your draft before inserting again.",
   errorUnknown: "Voice input could not start. Try again.",
 };
 
@@ -146,12 +163,18 @@ export function ComposerTranscriptionControl({
   const capturing = status === "requesting-permission" || status === "recording";
 
   const cancelTranscription = transcription.cancel;
+  const discardTranscription = transcription.discard;
+  const hasRecoverableRecording = transcription.hasRecoverableRecording;
   useEffect(() => {
     if (!suppressed) return;
     if (status === "recording" || status === "requesting-permission") {
       cancelTranscription();
+    } else if (status === "error" && !hasRecoverableRecording) {
+      // Live voice took over: a stale start error (nothing saved) would only
+      // duplicate whatever live voice reports next to it.
+      void discardTranscription();
     }
-  }, [cancelTranscription, status, suppressed]);
+  }, [cancelTranscription, discardTranscription, hasRecoverableRecording, status, suppressed]);
   const active = capturing || status === "saving" || status === "transcribing";
   const recoverable =
     transcription.hasRecoverableRecording &&
@@ -187,11 +210,22 @@ export function ComposerTranscriptionControl({
                     ? (errorMessage ?? messages.errorUnknown)
                     : unavailableMessage;
 
+  const recoveredLabel = savedTranscript
+    ? (errorMessage ?? messages.recoveredTranscript)
+    : retrying
+      ? messages.retrying
+      : status === "error"
+        ? (errorMessage ?? messages.errorRetryable)
+        : messages.recovered;
+
   function start(event: MouseEvent<HTMLButtonElement>) {
     if (unavailableMessage) {
       event.preventDefault();
       return;
     }
+    composerVoiceEventScope(event.currentTarget)?.dispatchEvent(
+      new Event(COMPOSER_VOICE_INPUT_START_EVENT),
+    );
     void transcription.start();
   }
 
@@ -213,6 +247,9 @@ export function ComposerTranscriptionControl({
           )}
           data-transcription-status={status}
           data-transcription-capturing={capturing ? "" : undefined}
+          data-transcription-attention={
+            !capturing && (recoverable || (status === "error" && errorMessage)) ? "" : undefined
+          }
         >
           <span className="inline-flex min-w-0 items-center gap-1.5">
             <AnimatePresence mode="popLayout" initial={false}>
@@ -228,14 +265,11 @@ export function ComposerTranscriptionControl({
                     "bg-og-surface-2/70 pl-2 pr-1 pointer-coarse:h-11",
                   )}
                 >
-                  <span className="og-transcription-recovered-label max-w-44 truncate text-og-xs text-og-fg-muted max-sm:max-w-28">
-                    {savedTranscript
-                      ? (errorMessage ?? messages.recoveredTranscript)
-                      : retrying
-                        ? messages.retrying
-                        : status === "error"
-                          ? (errorMessage ?? messages.errorRetryable)
-                          : messages.recovered}
+                  <span
+                    title={recoveredLabel}
+                    className="og-transcription-recovered-label max-w-56 line-clamp-2 text-og-xs leading-tight text-og-fg-muted max-sm:max-w-32"
+                  >
+                    {recoveredLabel}
                   </span>
                   <Tip
                     tip={
@@ -243,11 +277,14 @@ export function ComposerTranscriptionControl({
                         ? messages.insertRecoveredTranscript
                         : retrying
                           ? messages.pauseRetrying
-                          : messages.retry
+                          : status === "recovered"
+                            ? messages.transcribeSaved
+                            : messages.retry
                     }
                   >
                     <button
                       type="button"
+                      disabled={composer.disabled && !retrying}
                       onClick={() =>
                         savedTranscript
                           ? void transcription.insertSavedTranscript()
@@ -260,12 +297,14 @@ export function ComposerTranscriptionControl({
                           ? messages.insertRecoveredTranscript
                           : retrying
                             ? messages.pauseRetrying
-                            : messages.retry
+                            : status === "recovered"
+                              ? messages.transcribeSaved
+                              : messages.retry
                       }
                       className={cn(
                         "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm",
-                        "bg-og-fg text-og-bg transition-colors duration-150 motion-reduce:transition-none",
-                        "hover:bg-og-fg-muted pointer-coarse:size-11",
+                        "border border-og-primary-border bg-og-primary text-og-primary-fg hover:bg-og-primary-hover transition-colors duration-150 motion-reduce:transition-none",
+                        "disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:size-11",
                       )}
                     >
                       {savedTranscript ? (
@@ -280,12 +319,13 @@ export function ComposerTranscriptionControl({
                   <Tip tip={messages.discardRecovered}>
                     <button
                       type="button"
+                      disabled={composer.disabled}
                       onClick={() => void transcription.discard()}
                       aria-label={messages.discardRecovered}
                       className={cn(
                         "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm",
                         "text-og-fg-muted transition-colors duration-150 motion-reduce:transition-none",
-                        "hover:bg-og-surface-3 hover:text-og-status-failed pointer-coarse:size-11",
+                        "hover:bg-og-surface-3 hover:text-og-status-failed disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:size-11",
                       )}
                     >
                       <Trash2Icon className="size-3.5" />
@@ -321,6 +361,13 @@ export function ComposerTranscriptionControl({
                         stream={status === "recording" ? transcription.stream : null}
                         mode={status === "recording" ? "recording" : "transcribing"}
                       />
+                      {status === "recording" && transcription.recordingStartedAt !== null ? (
+                        <RecordingClock
+                          startedAt={transcription.recordingStartedAt}
+                          maxSeconds={transcription.maxRecordingSeconds}
+                          remainingLabel={messages.timeRemaining}
+                        />
+                      ) : null}
                     </span>
                   )}
                   {status === "recording" ? (
@@ -347,8 +394,8 @@ export function ComposerTranscriptionControl({
                           aria-label={messages.stop}
                           className={cn(
                             "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm",
-                            "bg-og-fg text-og-bg transition-colors duration-150 motion-reduce:transition-none",
-                            "hover:bg-og-fg-muted pointer-coarse:size-11",
+                            "border border-og-primary-border bg-og-primary text-og-primary-fg hover:bg-og-primary-hover",
+                            "transition-colors duration-150 motion-reduce:transition-none pointer-coarse:size-11",
                           )}
                         >
                           <SquareIcon className="size-2.5 fill-current" />
@@ -392,14 +439,22 @@ export function ComposerTranscriptionControl({
               )}
             </AnimatePresence>
             {status === "error" && errorMessage && !recoverable ? (
-              <Tip tip={errorMessage}>
-                <span
-                  aria-hidden="true"
-                  className="og-transcription-error-label max-w-40 truncate text-og-xs text-og-status-failed max-sm:max-w-24"
-                >
+              // Nothing is saved in this state, so dismissing loses no speech.
+              <button
+                type="button"
+                title={errorMessage}
+                aria-label={`Dismiss: ${errorMessage}`}
+                onClick={() => void transcription.discard()}
+                className={cn(
+                  "inline-flex min-w-0 items-center gap-1 rounded-og-sm text-left outline-hidden",
+                  "text-og-status-failed focus-visible:ring-2 focus-visible:ring-og-accent/45",
+                )}
+              >
+                <span className="og-transcription-error-label max-w-56 line-clamp-2 text-og-xs leading-tight max-sm:max-w-32">
                   {errorMessage}
                 </span>
-              </Tip>
+                <XIcon className="size-3 shrink-0 opacity-70" aria-hidden />
+              </button>
             ) : null}
             <span
               className="sr-only"
@@ -415,6 +470,42 @@ export function ComposerTranscriptionControl({
   );
 }
 
+/** Elapsed dictation time; warns before the automatic stop-and-transcribe. */
+function RecordingClock({
+  startedAt,
+  maxSeconds,
+  remainingLabel,
+}: {
+  startedAt: number;
+  maxSeconds: number | null;
+  remainingLabel: string;
+}) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const timer = setInterval(() => setNow(Date.now()), 500);
+    return () => clearInterval(timer);
+  }, []);
+  const elapsed = Math.max(0, Math.floor((now - startedAt) / 1_000));
+  const remaining = maxSeconds === null ? null : Math.max(0, maxSeconds - elapsed);
+  const warn = remaining !== null && remaining <= 15;
+  const label = `${Math.floor(elapsed / 60)}:${String(elapsed % 60).padStart(2, "0")}`;
+  return (
+    <span
+      data-recording-clock
+      title={warn ? remainingLabel.replace("{seconds}", String(remaining)) : undefined}
+      className={cn(
+        "min-w-[2.25rem] text-right text-og-xs tabular-nums",
+        warn ? "font-medium text-og-status-failed" : "text-og-fg-muted",
+      )}
+    >
+      {label}
+      {warn ? (
+        <span className="sr-only">{remainingLabel.replace("{seconds}", String(remaining))}</span>
+      ) : null}
+    </span>
+  );
+}
+
 function VoiceWaveform({
   stream,
   mode,
@@ -516,6 +607,13 @@ function restingLevels(count: number): number[] {
 
 function transcriptionErrorMessage(code: string, messages: ComposerTranscriptionMessages): string {
   switch (code) {
+    case "insufficient_credits":
+      return messages.errorInsufficientCredits;
+    case "allowance_exhausted":
+    case "monthly_model_cost_limit":
+      return messages.errorAllowanceExhausted;
+    case "policy_blocked":
+      return messages.errorPolicyBlocked;
     case "permission_denied":
       return messages.errorPermissionDenied;
     case "not_supported":