@opengeni/react 0.57.0 → 1.0.2-canary.37191796234001

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,97 +171,113 @@ 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>
-          <PausedState />
-          <RestoredResources />
-          <Attachments />
-          {header}
-          {composer.annotations && composer.annotations.length > 0 ? (
-            <div className="px-3 pt-2 sm:px-4">
-              <TimelineAnnotationsChip
-                annotations={composer.annotations}
-                editable
-                focusAnnotationId={composer.annotationReviewTargetId}
-                onFocusConsumed={composer.clearAnnotationReviewTarget}
-                onUpdate={composer.updateAnnotation}
-                onRemove={composer.removeAnnotation}
-              />
-            </div>
-          ) : null}
-          <Input placeholder={placeholder} autoFocus={autoFocus} />
-          {controller.confirmState ? (
-            <Confirmation />
-          ) : (
-            <Footer
-              data-og-stack-actions={stackActions ? "" : undefined}
-              className={stackActions ? "max-sm:flex-nowrap sm:flex-wrap" : undefined}
-            >
-              <LayoutGroup id="og-composer-footer">
-                {hasControls ? (
-                  <Controls
-                    className={stackActions ? "min-w-0 max-sm:flex-1 sm:w-auto" : undefined}
-                  >
-                    {controlsLeading}
-                    <AttachButton className={attachButtonClassName} />
-                    {transcription ? (
-                      <ComposerTranscriptionControl
-                        {...transcription}
-                        suppressed={transcriptionSuppressed}
-                        className={[transcription.className, transcriptionClassName]
-                          .filter(Boolean)
-                          .join(" ")}
-                      />
-                    ) : null}
-                    {models ? (
-                      <motion.span
-                        layout
-                        transition={{ duration: 0.36, ease: [0.22, 1, 0.36, 1] }}
-                        className="inline-flex min-w-0"
-                      >
-                        <ModelPicker
-                          models={models}
-                          value={selectedModel}
-                          onChange={onSelectModel}
+    <>
+      <Root controller={controller} responsiveBasis={responsiveBasis} className={className}>
+        <Frame>
+          <CommandPalette />
+          <Surface className={surfaceClassName}>
+            <PausedState />
+            <RestoredResources />
+            <Attachments />
+            {header}
+            {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
+                  focusAnnotationId={composer.annotationReviewTargetId}
+                  onFocusConsumed={composer.clearAnnotationReviewTarget}
+                  onUpdate={composer.updateAnnotation}
+                  onRemove={composer.removeAnnotation}
+                  onCommit={controller.focusInput}
+                />
+              </div>
+            ) : null}
+            <Input {...inputProps} placeholder={placeholder} autoFocus={autoFocus} />
+            {controller.confirmState ? (
+              <Confirmation />
+            ) : footer !== undefined ? (
+              footer
+            ) : (
+              <Footer
+                data-og-stack-actions={stackActions ? "" : undefined}
+                className={stackActions ? "max-sm:flex-nowrap sm:flex-wrap" : undefined}
+              >
+                <LayoutGroup id="og-composer-footer">
+                  {hasControls ? (
+                    <Controls
+                      className={stackActions ? "min-w-0 max-sm:flex-1 sm:w-auto" : undefined}
+                    >
+                      {controlsLeading}
+                      <AttachButton className={attachButtonClassName} />
+                      {transcription ? (
+                        <ComposerTranscriptionControl
+                          {...transcription}
+                          suppressed={transcriptionSuppressed}
+                          className={[transcription.className, transcriptionClassName]
+                            .filter(Boolean)
+                            .join(" ")}
                         />
-                      </motion.span>
-                    ) : null}
-                    {controlsStart ? (
-                      <motion.span
-                        layout
-                        transition={{ duration: 0.36, ease: [0.22, 1, 0.36, 1] }}
-                        className="inline-flex min-w-0 items-center gap-1.5"
-                      >
-                        {controlsStart}
-                      </motion.span>
-                    ) : null}
-                  </Controls>
-                ) : (
-                  <Hint>{hint}</Hint>
-                )}
-                <Actions
-                  className={stackActions ? "max-sm:shrink-0 sm:w-auto sm:justify-end" : undefined}
-                >
-                  {actionsStart}
-                  <PauseButton />
-                  <SendButton />
-                </Actions>
-              </LayoutGroup>
-            </Footer>
-          )}
-        </Surface>
-      </Frame>
-      <Help />
-      <Status />
-    </Root>
+                      ) : null}
+                      {models ? (
+                        <motion.span
+                          layout
+                          transition={{ duration: 0.36, ease: [0.22, 1, 0.36, 1] }}
+                          className="inline-flex min-w-0"
+                        >
+                          <ModelPicker
+                            models={models}
+                            value={selectedModel}
+                            onChange={onSelectModel}
+                          />
+                        </motion.span>
+                      ) : null}
+                      {controlsStart ? (
+                        <motion.span
+                          layout
+                          transition={{ duration: 0.36, ease: [0.22, 1, 0.36, 1] }}
+                          className="inline-flex min-w-0 flex-1 items-center gap-1.5"
+                        >
+                          {controlsStart}
+                        </motion.span>
+                      ) : null}
+                    </Controls>
+                  ) : (
+                    <Hint>{hint}</Hint>
+                  )}
+                  <Actions
+                    className={
+                      stackActions ? "max-sm:shrink-0 sm:w-auto sm:justify-end" : undefined
+                    }
+                  >
+                    {actionsStart}
+                    <PauseButton />
+                    <StopButton />
+                    <SendButton />
+                  </Actions>
+                </LayoutGroup>
+              </Footer>
+            )}
+          </Surface>
+        </Frame>
+        <Help />
+        <Status />
+      </Root>
+    </>
   );
 }

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

@@ -0,0 +1,27 @@
+import type { MachineInputMember } from "../timeline/types";
+
+/** Source IDs are routing coordinates only for typed child updates, never parsed from prose. */
+export function ChildSessionLink({
+  kind,
+  sourceId,
+  onOpenSession,
+}: Pick<MachineInputMember, "kind" | "sourceId"> & {
+  onOpenSession?: ((sessionId: string) => void) | undefined;
+}) {
+  if (
+    !onOpenSession ||
+    !kind.startsWith("child_") ||
+    !/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(sourceId)
+  ) {
+    return null;
+  }
+  return (
+    <button
+      type="button"
+      onClick={() => onOpenSession(sourceId)}
+      className="mt-1 rounded-og-sm text-og-xs font-medium text-og-accent underline-offset-4 hover:underline 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,10 @@
+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="m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z" />
+    </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

@@ -248,6 +248,7 @@ export function ComposerTranscriptionControl({
                   >
                     <button
                       type="button"
+                      disabled={composer.disabled && !retrying}
                       onClick={() =>
                         savedTranscript
                           ? void transcription.insertSavedTranscript()
@@ -264,8 +265,8 @@ export function ComposerTranscriptionControl({
                       }
                       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 +281,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" />
@@ -347,8 +349,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" />