@opengeni/react 7.1.0 → 7.1.2-canary.36199476632001

package/src/components/composer.tsx

@@ -457,9 +457,9 @@ export function useChatComposerController({
     (event: DragEvent<HTMLDivElement>) => {
       if (!attachments || !dragCarriesFiles(event)) return;
       event.preventDefault();
-      setDragging(true);
+      if (!disabled) setDragging(true);
     },
-    [attachments],
+    [attachments, disabled],
   );
   const handleDragLeave = useCallback(
     (event: DragEvent<HTMLDivElement>) => {
@@ -474,11 +474,16 @@ export function useChatComposerController({
       if (!attachments || !dragCarriesFiles(event)) return;
       event.preventDefault();
       setDragging(false);
-      if (event.dataTransfer.files.length > 0) attachments.addFiles(event.dataTransfer.files);
+      if (!disabled && event.dataTransfer.files.length > 0)
+        attachments.addFiles(event.dataTransfer.files);
     },
-    [attachments],
+    [attachments, disabled],
   );
 
+  useEffect(() => {
+    if (disabled) setDragging(false);
+  }, [disabled]);
+
   const [notice, setNotice] = useState<Notice | null>(null);
   const [helpOpen, setHelpOpen] = useState(false);
   const [confirmState, setConfirmState] = useState<ConfirmState>(null);
@@ -624,17 +629,18 @@ export function useChatComposerController({
   );
   const handlePaste = useCallback(
     (event: ClipboardEvent<HTMLTextAreaElement>) => {
+      if (disabled) return;
       onPaste?.(event);
       attachments?.addFromPaste(event);
     },
-    [attachments, onPaste],
+    [attachments, disabled, onPaste],
   );
   const handleFileChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
-      if (event.target.files) attachments?.addFiles(event.target.files);
+      if (!disabled && event.target.files) attachments?.addFiles(event.target.files);
       event.target.value = "";
     },
-    [attachments],
+    [attachments, disabled],
   );
 
   const helpCommands = useMemo(
@@ -975,6 +981,7 @@ export function Attachments() {
     <AttachmentChips
       attachments={controller.attachments.attachments}
       messages={controller.messages}
+      disabled={controller.disabled}
       onRemove={controller.attachments.remove}
       onRetry={controller.attachments.retry}
       onRetainPreview={controller.attachments.retainPreview}
@@ -996,6 +1003,26 @@ type OwnedInputProps =
   | "aria-keyshortcuts";
 export type ComposerInputProps = Omit<ComponentPropsWithoutRef<"textarea">, OwnedInputProps>;
 
+const EDITING_FOCUS_SELECTOR =
+  'input, textarea, select, [contenteditable="true"], [role="textbox"]';
+const POPUP_FOCUS_SELECTOR =
+  '[role="menu"], [role="menubar"], [role="listbox"], [role="dialog"], [role="alertdialog"]';
+
+/**
+ * Initial focus is a convenience, not authority to move focus the person has
+ * placed elsewhere. It yields to a field they started editing and to an open
+ * menu, listbox, or dialog that does not contain the composer: moving focus
+ * behind a non-modal popup dismisses it, and a modal surface owns focus until
+ * it closes.
+ */
+function focusBelongsElsewhere(textarea: HTMLTextAreaElement): boolean {
+  const active = textarea.ownerDocument.activeElement;
+  if (!active || active === textarea) return false;
+  if (active.closest(EDITING_FOCUS_SELECTOR)) return true;
+  const popup = active.closest(POPUP_FOCUS_SELECTOR);
+  return popup !== null && !popup.contains(textarea);
+}
+
 export const Input = forwardRef<HTMLTextAreaElement, ComposerInputProps>(function ComposerInput(
   { rows = 1, placeholder, className, "aria-label": ariaLabel, autoFocus = false, ...props },
   forwardedRef,
@@ -1005,22 +1032,17 @@ export const Input = forwardRef<HTMLTextAreaElement, ComposerInputProps>(functio
   const paletteOpen =
     controller.paletteEnabled && controller.paletteMounted && controller.palette.open;
 
-  // Native autoFocus loses when the textarea mounts disabled (create-session draft
-  // hydrate). Retry once the controller becomes interactive.
+  // Focus once the controller is interactive. The textarea can mount disabled
+  // (create-session draft hydrate), and the route can finish loading after the
+  // person has already moved on, so this deliberately does not use the native
+  // autoFocus attribute: that would take focus at mount without the guard.
   useEffect(() => {
     if (!autoFocus || controller.disabled || autoFocusedRef.current) return;
     const frame = window.requestAnimationFrame(() => {
       const textarea = controller.textareaRef.current;
       if (!textarea || textarea.disabled) return;
       autoFocusedRef.current = true;
-      // Draft hydration may finish after the user has started editing another
-      // field. Initial focus is a convenience, not authority to take their caret.
-      const active = textarea.ownerDocument.activeElement;
-      if (
-        active !== textarea &&
-        active?.closest('input, textarea, select, [contenteditable="true"], [role="textbox"]')
-      )
-        return;
+      if (focusBelongsElsewhere(textarea)) return;
       textarea.focus();
     });
     return () => window.cancelAnimationFrame(frame);
@@ -1041,7 +1063,6 @@ export const Input = forwardRef<HTMLTextAreaElement, ComposerInputProps>(functio
           : (placeholder ?? controller.messages.messagePlaceholder)
       }
       disabled={controller.disabled}
-      autoFocus={autoFocus && !controller.disabled}
       aria-label={ariaLabel ?? controller.messages.inputLabel}
       aria-keyshortcuts="Enter Meta+Enter Control+Enter Shift+Enter"
       aria-autocomplete={
@@ -1679,6 +1700,7 @@ function ConfirmBar({
 function AttachmentChips({
   attachments,
   messages,
+  disabled,
   onRemove,
   onRetry,
   onRetainPreview,
@@ -1686,6 +1708,7 @@ function AttachmentChips({
 }: {
   attachments: UseFileAttachmentsResult["attachments"];
   messages: ChatComposerMessages;
+  disabled: boolean;
   onRemove: (id: string) => void;
   onRetry?: ((id: string) => void) | undefined;
   onRetainPreview: UseFileAttachmentsResult["retainPreview"];
@@ -1837,7 +1860,8 @@ function AttachmentChips({
                 <button
                   type="button"
                   onClick={() => onRetry(attachment.id)}
-                  className="shrink-0 rounded-og-xs p-1 text-og-fg-muted hover:bg-og-surface-1 hover:text-og-fg pointer-coarse:size-10"
+                  disabled={disabled}
+                  className="shrink-0 rounded-og-xs p-1 text-og-fg-muted hover:bg-og-surface-1 hover:text-og-fg disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:size-10"
                   aria-label={messages.retryAttachment(attachment.name)}
                 >
                   <RotateCwIcon className="size-3.5" />
@@ -1847,7 +1871,8 @@ function AttachmentChips({
             <button
               type="button"
               onClick={() => onRemove(attachment.id)}
-              className="shrink-0 rounded-og-xs p-1 text-og-fg-muted hover:bg-og-surface-1 hover:text-og-fg pointer-coarse:size-10"
+              disabled={disabled}
+              className="shrink-0 rounded-og-xs p-1 text-og-fg-muted hover:bg-og-surface-1 hover:text-og-fg disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:size-10"
               aria-label={messages.removeAttachment(attachment.name)}
             >
               <XIcon className="size-3.5" />

package/src/components/markdown.tsx

@@ -53,6 +53,7 @@ const InteractiveContext = createContext<{
   streaming?: boolean | undefined;
   render?: (block: MarkdownInteractiveBlock) => ReactNode;
   renderImage?: (image: { src: string; alt: string }) => ReactNode;
+  suppressImages?: boolean;
 }>({ source: "" });
 
 export type MarkdownProps = {
@@ -61,6 +62,8 @@ export type MarkdownProps = {
   /** Reveals a bounded source excerpt; closing Find retains it until explicit restore. */
   searchTarget?: TimelineSearchTarget | null | undefined;
   renderImage?: ((image: { src: string; alt: string }) => ReactNode) | undefined;
+  /** Show alt text without loading image URLs (e.g. in search previews). */
+  suppressImages?: boolean | undefined;
   /** Host opt-in for assistant-authored interactive fences. */
   renderInteractiveBlock?: ((block: MarkdownInteractiveBlock) => ReactNode) | undefined;
   children: string;
@@ -399,7 +402,9 @@ export function retainedImageId(src: string): string | null {
   );
 }
 function MarkdownImage({ src, alt }: ComponentPropsWithoutRef<"img">) {
-  const { renderImage } = useContext(InteractiveContext);
+  const { renderImage, suppressImages } = useContext(InteractiveContext);
+  if (suppressImages)
+    return <span data-og-image-placeholder="">{alt || "Image"} (preview unavailable)</span>;
   if (!src) return <span>{alt ?? "Image unavailable"}</span>;
   if (retainedImageId(src))
     return renderImage ? (
@@ -592,6 +597,7 @@ function MarkdownImpl({
   onSandboxFile,
   renderInteractiveBlock,
   renderImage,
+  suppressImages,
 }: MarkdownProps) {
   // Tip-ink engine for THIS body: created on the first streaming render, kept
   // through a short linger after the stream ends (so the last age window can
@@ -692,8 +698,9 @@ function MarkdownImpl({
       streaming,
       ...(renderInteractiveBlock ? { render: renderInteractiveBlock } : {}),
       ...(renderImage ? { renderImage } : {}),
+      ...(suppressImages ? { suppressImages } : {}),
     }),
-    [children, streaming, renderInteractiveBlock, renderImage],
+    [children, streaming, renderInteractiveBlock, renderImage, suppressImages],
   );
 
   // `min-w-0` lets the prose shrink inside flex parents (message bubbles) so

package/src/components/sandbox-workspace.tsx

@@ -843,6 +843,7 @@ export function useSandboxWorkspaceTabs(
               // start BrowserViewer—the lazy panel is still unmounted until the
               // user/agent first visits it.
               enabled={workspaceVisible}
+              active={resolvedActiveTab === WORKBENCH_TAB_BROWSER}
               onNotify={onNotify}
               initialBrowserSessionId={initialBrowserSessionId}
               onBrowserSessionIdChange={onBrowserSessionIdChange}

package/src/components/session-capability-frame.tsx

@@ -12,7 +12,11 @@ export type SessionCapabilityFrameProps = {
   skill: boolean;
   expanded: boolean;
   complete: boolean;
+  /** Completion copy must reflect the provider's actual scope of access. */
+  completeLabel?: string;
   actionLabel: string;
+  /** Direct navigation actions should not announce a dialog on the card. */
+  opensDialog?: boolean;
   note: string;
   onOpen(): void;
   onClose(): void;
@@ -48,7 +52,9 @@ export function SessionCapabilityFrame({
   skill,
   expanded,
   complete,
+  completeLabel,
   actionLabel,
+  opensDialog = true,
   note,
   onOpen,
   onClose,
@@ -90,7 +96,8 @@ export function SessionCapabilityFrame({
         </div>
         {complete ? (
           <p role="status" className="og-session-capability-copy">
-            {skill ? "Installed · Workspace" : "Connected · Available in this conversation"}
+            {completeLabel ??
+              (skill ? "Installed · Workspace" : "Connected · Available in this conversation")}
           </p>
         ) : (
           <>
@@ -104,8 +111,9 @@ export function SessionCapabilityFrame({
                 ref={buttonRef}
                 type="button"
                 onClick={onOpen}
-                aria-haspopup="dialog"
-                aria-expanded={expanded}
+                disabled={busy}
+                aria-haspopup={opensDialog ? "dialog" : undefined}
+                aria-expanded={opensDialog ? expanded : undefined}
               >
                 {actionLabel}
               </button>