@opengeni/react 7.1.0 → 7.1.2-canary.36079201993001

package/dist/interaction.js

@@ -7,7 +7,7 @@ import {
   useBrowserSession,
   useBrowserSessions,
   useSiteAuthConnections
-} from "./chunk-UQS7BGNQ.js";
+} from "./chunk-ETA37UZ7.js";
 import {
   ComputerViewer,
   useComputerFrameStream,

package/dist/session-ui.js

@@ -19,22 +19,22 @@ import {
   setStartupDetails,
   useStartupDetails,
   userMessageLikelyNeedsDisclosure
-} from "./chunk-ZC2DK5SC.js";
+} from "./chunk-AWIX4UAC.js";
 import "./chunk-GEN54DU5.js";
 import "./chunk-GBPCZH3Y.js";
 import "./chunk-ZYRGEKWS.js";
 import "./chunk-WYWRYUNQ.js";
 import {
   createOlderHistoryLoadReceipt
-} from "./chunk-VI7HELBI.js";
+} from "./chunk-SJ5HE4ZA.js";
 import "./chunk-PAJU5KKL.js";
-import "./chunk-4ACTWOOW.js";
+import "./chunk-6N3AZUOV.js";
 import "./chunk-3LL47F4U.js";
 import "./chunk-AKOMC3VO.js";
 import "./chunk-IOLPHOF4.js";
 import "./chunk-KZ73RL76.js";
 import "./chunk-NEXLLTP4.js";
-import "./chunk-SHRCATV6.js";
+import "./chunk-7J4DUR3E.js";
 import "./chunk-2VHARTBL.js";
 import "./chunk-BRM6FVZA.js";
 import "./chunk-VZTQ73XT.js";

package/dist/session.js

@@ -29,7 +29,7 @@ import {
   useSession,
   useSessionEvents,
   useTurnQueue
-} from "./chunk-VI7HELBI.js";
+} from "./chunk-SJ5HE4ZA.js";
 import {
   FILE_ONLY_MESSAGE_TEXT,
   composeSendInput,

package/dist/timeline/types.d.ts

@@ -375,6 +375,8 @@ export type AuthNeededItem = {
     authorizationUrl: string | null;
     /** Agent-selected catalog recommendation. The host still owns authorization. */
     capability?: NonNullable<ToolAuthNeededPayload["capability"]> | null | undefined;
+    /** Human-reviewed custom integration proposal. Never treated as catalog authority. */
+    setupRequest?: ToolAuthNeededPayload["setupRequest"] | null | undefined;
     occurredAt: string;
 };
 export type TurnOutcome = "complete" | "failed" | "cancelled";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "7.1.0",
+  "version": "7.1.2-canary.36079201993001",
   "description": "React hooks and styled components for OpenGeni: live session streaming, chat composer, message timeline, session status, and fleet views — token-themed (CSS variables), dark-first, built on Tailwind v4 + Radix + Motion.",
   "license": "Apache-2.0",
   "repository": {
@@ -133,8 +133,8 @@
     "@dnd-kit/utilities": "3.2.2",
     "@fontsource-variable/noto-sans-arabic": "5.2.10",
     "@fontsource-variable/noto-sans-jp": "5.2.10",
-    "@opengeni/connect": "^0.3.0",
-    "@opengeni/sdk": "^7.1.0",
+    "@opengeni/connect": "^0.3.0-canary.36079201993001",
+    "@opengeni/sdk": "^7.1.1-canary.36079201993001",
     "clsx": "^2.1.1",
     "dequal": "2.0.3",
     "lucide-react": "^1.8.0",

package/src/components/artifacts/artifact-surface.tsx

@@ -13,6 +13,8 @@ export type ArtifactModality = "spreadsheet" | "document" | "presentation";
 export type ArtifactSurfaceProps = {
   modality: ArtifactModality;
   title: string;
+  /** An embedding host may already provide the artifact title and navigation. */
+  showHeader?: boolean | undefined;
   subtitle?: ReactNode | undefined;
   actions?: ReactNode | undefined;
   children: ReactNode;
@@ -46,6 +48,7 @@ function ModalityIcon({ modality }: { modality: ArtifactModality }) {
 export function ArtifactSurface({
   modality,
   title,
+  showHeader = true,
   subtitle,
   actions,
   children,
@@ -63,25 +66,42 @@ export function ArtifactSurface({
         className,
       )}
     >
-      <header className="flex min-h-11 shrink-0 items-center gap-2 border-b border-og-border bg-og-surface-2 px-3">
-        <span
-          aria-hidden
-          className="grid size-7 shrink-0 place-items-center rounded-og-sm bg-og-surface-3 text-og-fg-muted"
-        >
-          <ModalityIcon modality={modality} />
-        </span>
-        <div className="min-w-0 flex-1">
-          <h2 className="truncate text-og-base font-medium text-og-fg">{title}</h2>
-          {subtitle ? <div className="truncate text-og-xs text-og-fg-muted">{subtitle}</div> : null}
-        </div>
-        {busy ? (
-          <LoaderCircleIcon
-            aria-label="Updating artifact"
-            className="size-4 shrink-0 animate-spin text-og-fg-muted"
-          />
-        ) : null}
-        {actions ? <div className="flex shrink-0 items-center gap-1">{actions}</div> : null}
-      </header>
+      {showHeader ? (
+        <header className="flex min-h-11 shrink-0 items-center gap-2 border-b border-og-border bg-og-surface-2 px-3">
+          <span
+            aria-hidden
+            className="grid size-7 shrink-0 place-items-center rounded-og-sm bg-og-surface-3 text-og-fg-muted"
+          >
+            <ModalityIcon modality={modality} />
+          </span>
+          <div className="min-w-0 flex-1">
+            <h2 className="truncate text-og-base font-medium text-og-fg">{title}</h2>
+            {subtitle ? (
+              <div className="truncate text-og-xs text-og-fg-muted">{subtitle}</div>
+            ) : null}
+          </div>
+          {busy ? (
+            <LoaderCircleIcon
+              aria-label="Updating artifact"
+              className="size-4 shrink-0 animate-spin text-og-fg-muted"
+            />
+          ) : null}
+          {actions ? <div className="flex shrink-0 items-center gap-1">{actions}</div> : null}
+        </header>
+      ) : (
+        <>
+          {typeof subtitle === "string" || typeof subtitle === "number" ? (
+            <span role="status" className="sr-only">
+              {subtitle}
+            </span>
+          ) : null}
+          {actions ? (
+            <div className="flex shrink-0 items-center justify-end gap-1 border-b border-og-border px-3 py-1">
+              {actions}
+            </div>
+          ) : null}
+        </>
+      )}
 
       <div className="min-h-0 min-w-0 flex-1">{children}</div>
 

package/src/components/artifacts/document-editor.tsx

@@ -204,6 +204,7 @@ export type DocumentProjectionArtifactSurfaceProps = Omit<
   "ariaLabel" | "className"
 > & {
   title: string;
+  showHeader?: boolean | undefined;
   subtitle?: ReactNode | undefined;
   busy?: boolean | undefined;
   className?: string | undefined;
@@ -212,6 +213,7 @@ export type DocumentProjectionArtifactSurfaceProps = Omit<
 
 export type DocumentArtifactSurfaceProps = Omit<DocumentEditorProps, "ariaLabel" | "className"> & {
   title: string;
+  showHeader?: boolean | undefined;
   subtitle?: ReactNode | undefined;
   busy?: boolean | undefined;
   className?: string | undefined;
@@ -907,10 +909,27 @@ function DocumentEditorCore({
             </div>
           </div>
         ) : (
-          <div className="relative min-w-full" style={{ height: axis.total }}>
+          <div
+            className="relative min-w-full"
+            style={{
+              height: axis.total,
+              minWidth:
+                layout === "paginated"
+                  ? pages.reduce(
+                      (width, page) =>
+                        Math.max(
+                          width,
+                          page.page.widthPt * POINT_TO_CSS_PIXEL * page.renderScale + 32,
+                        ),
+                      0,
+                    )
+                  : undefined,
+            }}
+          >
             {mountedIndexes.map((pageIndex) => {
               const page = pages[pageIndex]!;
               const top = axis.offsets[pageIndex]!;
+              const pageWidth = page.page.widthPt * POINT_TO_CSS_PIXEL * page.renderScale;
               return (
                 <article
                   key={page.key}
@@ -923,19 +942,23 @@ function DocumentEditorCore({
                   className={cn(
                     "absolute overflow-hidden",
                     layout === "paginated"
-                      ? "left-1/2 -translate-x-1/2 border shadow-og-sm"
+                      ? "border shadow-og-sm"
                       : "left-0 right-0 border-b border-og-border bg-og-surface-1 text-og-fg",
                   )}
                   style={{
                     top,
+                    // Center against the visible viewport, not the shared width
+                    // reserved for the widest section in this document.
+                    left:
+                      layout === "paginated"
+                        ? Math.max(16, (measuredViewport.width - pageWidth) / 2)
+                        : undefined,
                     color: layout === "paginated" ? "#171717" : undefined,
                     backgroundColor: layout === "paginated" ? "#fff" : undefined,
                     borderColor: layout === "paginated" ? "#0000001a" : undefined,
-                    width:
-                      layout === "paginated"
-                        ? page.page.widthPt * POINT_TO_CSS_PIXEL * page.renderScale
-                        : undefined,
+                    width: layout === "paginated" ? pageWidth : undefined,
                     height: page.height,
+                    containerType: layout === "continuous" ? "inline-size" : undefined,
                   }}
                 >
                   <MeasuredPageBody
@@ -998,6 +1021,7 @@ function DocumentEditorCore({
 export function DocumentArtifactSurface({
   document,
   title,
+  showHeader,
   subtitle,
   busy,
   className,
@@ -1008,6 +1032,7 @@ export function DocumentArtifactSurface({
     <ArtifactSurface
       modality="document"
       title={title}
+      showHeader={showHeader}
       subtitle={subtitle}
       busy={busy}
       className={className}
@@ -1026,6 +1051,7 @@ export function DocumentArtifactSurface({
 export function DocumentProjectionArtifactSurface({
   projection,
   title,
+  showHeader,
   subtitle,
   busy,
   className,
@@ -1036,6 +1062,7 @@ export function DocumentProjectionArtifactSurface({
     <ArtifactSurface
       modality="document"
       title={title}
+      showHeader={showHeader}
       subtitle={subtitle}
       busy={busy}
       className={className}
@@ -1382,11 +1409,12 @@ function DocumentTableView({
   viewBlockId: string;
 }) {
   const columnWidths = table.style.columnWidthsPt;
+  const headerColor = tableHeaderTextColor(table.style.headerFill);
   return (
     <div
       data-og-document-block={viewBlockId}
       data-og-block-kind="table"
-      className="overflow-x-auto py-2"
+      className="w-full max-w-full overflow-x-auto py-2"
     >
       <table
         className="w-full border-collapse text-left"
@@ -1422,6 +1450,8 @@ function DocumentTableView({
                     style={{
                       borderColor: table.style.borderColor ?? "#d1d5db",
                       background: header ? (table.style.headerFill ?? "#f3f4f6") : undefined,
+                      // An explicitly colored run still owns its authored text style.
+                      color: header ? headerColor : undefined,
                       padding: `${table.style.cellPaddingPt ?? 6}pt`,
                     }}
                   >
@@ -1443,6 +1473,42 @@ function DocumentTableView({
   );
 }
 
+/** Choose a theme-independent header color only when both light and dark backdrops allow one. */
+function tableHeaderTextColor(fill: string | undefined): string | undefined {
+  if (!fill) return "#171717";
+  const hex = /^#([\da-f]{3}|[\da-f]{6}|[\da-f]{8})$/i.exec(fill)?.[1];
+  if (!hex) return undefined;
+  const channels =
+    hex.length === 3
+      ? [...hex].map((digit) => Number.parseInt(digit + digit, 16))
+      : [0, 2, 4].map((index) => Number.parseInt(hex.slice(index, index + 2), 16));
+  const alpha = hex.length === 8 ? Number.parseInt(hex.slice(6), 16) / 255 : 1;
+  const luminanceOn = (backdrop: number) => {
+    const linear = channels.map((channel) => {
+      const normalized = (channel * alpha + backdrop * (1 - alpha)) / 255;
+      return normalized <= 0.04045 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+    });
+    return linear[0]! * 0.2126 + linear[1]! * 0.7152 + linear[2]! * 0.0722;
+  };
+  // A paginated page is white; a continuous page follows its theme. For alpha
+  // fills, choose a fixed foreground only if it contrasts on both extremes.
+  const backdrops = alpha < 1 ? [luminanceOn(0), luminanceOn(255)] : [luminanceOn(255)];
+  const darkTextLuminance = ((23 / 255 + 0.055) / 1.055) ** 2.4;
+  const whiteContrast = Math.min(...backdrops.map((value) => 1.05 / (value + 0.05)));
+  const darkContrast = Math.min(
+    ...backdrops.map(
+      (value) =>
+        (Math.max(value, darkTextLuminance) + 0.05) / (Math.min(value, darkTextLuminance) + 0.05),
+    ),
+  );
+  if (Math.max(whiteContrast, darkContrast) < 4.5) {
+    // Opaque midtones need pure black where the softer #171717 cannot meet
+    // normal-text contrast. Translucent fills inherit the theme's text color.
+    return alpha < 1 ? undefined : "#000";
+  }
+  return whiteContrast > darkContrast ? "#fff" : "#171717";
+}
+
 function ToolbarButton({
   label,
   shortcut,
@@ -1633,7 +1699,9 @@ function responsiveDocumentPageScale(
 ): number {
   if (viewportWidth <= 0) return 1;
   const naturalWidth = page.widthPt * POINT_TO_CSS_PIXEL;
-  return Math.min(1, Math.max(0.1, (viewportWidth - 32) / naturalWidth));
+  // Below this scale the page text becomes too small to read in a narrow dock.
+  // The viewport can pan horizontally without changing the chosen layout.
+  return Math.min(1, Math.max(0.75, (viewportWidth - 32) / naturalWidth));
 }
 
 function pageContentStyle(
@@ -1642,7 +1710,7 @@ function pageContentStyle(
 ): CSSProperties {
   if (layout === "continuous") {
     return {
-      padding: "24px clamp(24px, 8vw, 96px)",
+      padding: "24px clamp(12px, 4cqw, 72px)",
     };
   }
   return {

package/src/components/artifacts/editable-document.tsx

@@ -70,6 +70,7 @@ type DocumentCommandState = {
 export function EditableDocumentArtifactSurface({
   session,
   title,
+  showHeader,
   subtitle,
   readOnly = false,
   onCommit,
@@ -260,6 +261,7 @@ export function EditableDocumentArtifactSurface({
     <DocumentProjectionArtifactSurface
       {...surfaceProps}
       title={title}
+      showHeader={showHeader}
       subtitle={
         subtitle ??
         `${projection.blocks.length} block${projection.blocks.length === 1 ? "" : "s"}${writable ? "" : " · Read only"}`
@@ -274,6 +276,7 @@ export function EditableDocumentArtifactSurface({
     <ArtifactSurface
       modality="document"
       title={title}
+      showHeader={showHeader}
       subtitle={subtitle ?? status}
       busy={!accessRevoked && !state.error}
       className={surfaceProps.className}

package/src/components/artifacts/editable-presentation.tsx

@@ -89,6 +89,7 @@ type PresentationProjectionState = {
 export function EditablePresentationArtifactSurface({
   session,
   title = "Presentation",
+  showHeader,
   subtitle,
   readOnly = false,
   onCommit,
@@ -266,6 +267,7 @@ export function EditablePresentationArtifactSurface({
     <PresentationProjectionArtifactSurface
       {...surfaceProps}
       title={title}
+      showHeader={showHeader}
       subtitle={
         subtitle ??
         `${projection.slides.length} slide${projection.slides.length === 1 ? "" : "s"}${writable ? "" : " · Read only"}`
@@ -280,6 +282,7 @@ export function EditablePresentationArtifactSurface({
     <ArtifactSurface
       modality="presentation"
       title={title}
+      showHeader={showHeader}
       subtitle={subtitle ?? status}
       actions={surfaceProps.actions}
       busy={!accessRevoked && !state.error}

package/src/components/artifacts/editable-spreadsheet.tsx

@@ -62,6 +62,7 @@ export type EditableSpreadsheetArtifactSurfaceProps = Omit<
   "metadataRevision" | "sheet"
 > & {
   title?: string | undefined;
+  showHeader?: boolean | undefined;
   subtitle?: ReactNode | undefined;
   actions?: ReactNode | undefined;
   initialSheetId?: string | undefined;
@@ -311,6 +312,7 @@ export function EditableSpreadsheetGrid({
 export function EditableSpreadsheetArtifactSurface({
   session,
   title = "Workbook",
+  showHeader,
   subtitle,
   actions,
   initialSheetId,
@@ -392,6 +394,7 @@ export function EditableSpreadsheetArtifactSurface({
     <ArtifactSurface
       modality="spreadsheet"
       title={title}
+      showHeader={showHeader}
       subtitle={
         subtitle ??
         (accessRevoked

package/src/components/artifacts/presentation-editor.tsx

@@ -334,6 +334,7 @@ export type PresentationProjectionEditorProps = Omit<
 
 export type PresentationProjectionArtifactSurfaceProps = PresentationProjectionEditorProps & {
   title?: string | undefined;
+  showHeader?: boolean | undefined;
   subtitle?: ReactNode | undefined;
   actions?: ReactNode | undefined;
   busy?: boolean | undefined;
@@ -360,6 +361,7 @@ export type PresentationEditorProps = {
 
 export type PresentationArtifactSurfaceProps = PresentationEditorProps & {
   title?: string | undefined;
+  showHeader?: boolean | undefined;
   subtitle?: ReactNode | undefined;
   actions?: ReactNode | undefined;
   busy?: boolean | undefined;
@@ -1819,6 +1821,7 @@ function PresentationEditorCore({
 export function PresentationArtifactSurface({
   presentation,
   title = "Presentation",
+  showHeader,
   subtitle,
   actions,
   busy,
@@ -1830,6 +1833,7 @@ export function PresentationArtifactSurface({
     <ArtifactSurface
       modality="presentation"
       title={title}
+      showHeader={showHeader}
       subtitle={subtitle ?? `${count} slide${count === 1 ? "" : "s"}`}
       actions={actions}
       busy={busy}
@@ -1844,6 +1848,7 @@ export function PresentationArtifactSurface({
 export function PresentationProjectionArtifactSurface({
   projection,
   title = "Presentation",
+  showHeader,
   subtitle,
   actions,
   busy,
@@ -1855,6 +1860,7 @@ export function PresentationProjectionArtifactSurface({
     <ArtifactSurface
       modality="presentation"
       title={title}
+      showHeader={showHeader}
       subtitle={subtitle ?? `${count} slide${count === 1 ? "" : "s"}`}
       actions={actions}
       busy={busy}

package/src/components/browser-viewer.tsx

@@ -82,6 +82,9 @@ export type BrowserViewerProps = EmbeddedBrowserInteractionClientOverride & {
   /** The selected OpenGeni agent/session. Peer BrowserSessions stay discoverable. */
   sessionId: string;
   enabled?: boolean | undefined;
+  /** Whether the Browser tab is selected. Keeps the mounted media stream warm
+   * while pausing semantic reads behind other dock tabs. */
+  active?: boolean | undefined;
   className?: string | undefined;
   onNotify?: ((notification: BrowserViewerNotification) => void) | undefined;
   /** Tests/demos only. Production uses the browser's native WebSocket. */
@@ -139,6 +142,7 @@ type BrowserDiagnosticsView = {
 export function BrowserViewer({
   sessionId,
   enabled = true,
+  active = true,
   className,
   onNotify,
   webSocketFactory,
@@ -287,6 +291,7 @@ export function BrowserViewer({
   );
   const controllerReady = selectedRegistrySession?.lifecycle === "active";
   const resumeSession = registry.resume;
+  const [hasLiveFrame, setHasLiveFrame] = useState(false);
 
   const wakeBrowser = useCallback(
     async (session: BrowserSession, retry = false): Promise<void> => {
@@ -337,17 +342,14 @@ export function BrowserViewer({
       setResumeAttempt((visible) =>
         visible?.sessionId === selectedRegistrySession.id ? null : visible,
       );
-      return;
-    }
-    if (selectedRegistrySession.lifecycle === "suspended") {
-      void wakeBrowser(selectedRegistrySession);
     }
-  }, [selectedRegistrySession, wakeBrowser]);
+  }, [selectedRegistrySession]);
 
   const browser = useBrowserSession({
     ...override,
     browserSessionId: selection?.sessionId ?? null,
     enabled: enabled && selection !== null && controllerReady,
+    semanticObservationEnabled: active && !hasLiveFrame,
   });
   useEffect(() => {
     if (!isSourcePlacementChangedError(browser.error, "browser_session")) return;
@@ -413,6 +415,10 @@ export function BrowserViewer({
   )
     ? frames.frame
     : null;
+  const frameIsLive = frames.state === "live" && displayedFrame !== null;
+  useEffect(() => {
+    setHasLiveFrame(frameIsLive);
+  }, [frameIsLive]);
   const supportsLiveFrames = browser.session?.capabilities.liveFrames === true;
   const displayConnectionState = supportsLiveFrames
     ? frames.state === "live" && !displayedFrame

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()
@@ -265,7 +266,7 @@ 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",
+                        "hover:bg-og-fg-muted 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" />

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}
@@ -1679,6 +1686,7 @@ function ConfirmBar({
 function AttachmentChips({
   attachments,
   messages,
+  disabled,
   onRemove,
   onRetry,
   onRetainPreview,
@@ -1686,6 +1694,7 @@ function AttachmentChips({
 }: {
   attachments: UseFileAttachmentsResult["attachments"];
   messages: ChatComposerMessages;
+  disabled: boolean;
   onRemove: (id: string) => void;
   onRetry?: ((id: string) => void) | undefined;
   onRetainPreview: UseFileAttachmentsResult["retainPreview"];
@@ -1837,7 +1846,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 +1857,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" />