@opengeni/react 3.8.0-canary.0 → 4.0.1-canary.0

package/dist/timeline-annotations-dialog-6Q53N5FG.js

@@ -0,0 +1,262 @@
+import {
+  AnnotationAccentRow,
+  AnnotationNoteField,
+  AnnotationNotePreview,
+  AnnotationQuoteSourceButton
+} from "./chunk-5M6VTFJ5.js";
+import {
+  ANNOTATION_REVIEW_DIALOG_WIDTH_PX,
+  clampAnnotationDialogPlacement,
+  scrollAnnotationRowIntoList
+} from "./chunk-ZYRGEKWS.js";
+import {
+  annotationDisplayOrdinal,
+  cssEscapeAttribute
+} from "./chunk-NOSYBS2D.js";
+import {
+  usePortalTokenStyle
+} from "./chunk-VZTQ73XT.js";
+import "./chunk-22KP6LR5.js";
+
+// src/components/timeline-annotations-dialog.tsx
+import { XIcon } from "lucide-react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+function focusableElements(root) {
+  return [
+    ...root.querySelectorAll(
+      'button:not([disabled]),textarea:not([disabled]),input:not([disabled]),[href],[tabindex]:not([tabindex="-1"])'
+    )
+  ].filter((element) => element.tabIndex >= 0 && !element.closest("[inert]"));
+}
+function TimelineAnnotationsDialog({
+  annotations,
+  editable,
+  focusAnnotationId,
+  onFocusConsumed,
+  onUpdate,
+  onRemove,
+  onRevealSource,
+  triggerRef,
+  countLabel,
+  onDismiss
+}) {
+  const [unavailableId, setUnavailableId] = useState(null);
+  const [position, setPosition] = useState({ left: 12, top: 12, maxHeight: 0 });
+  const panelRef = useRef(null);
+  const headerRef = useRef(null);
+  const listRef = useRef(null);
+  const noteRefs = useRef(/* @__PURE__ */ new Map());
+  const portalStyle = usePortalTokenStyle(triggerRef.current);
+  const revealNote = (id) => {
+    const row = listRef.current?.querySelector(
+      `[data-og-annotation-id="${cssEscapeAttribute(id)}"]`
+    );
+    scrollAnnotationRowIntoList(listRef.current, row);
+    noteRefs.current.get(id)?.focus();
+  };
+  const commitNotes = (fromId) => {
+    const incomplete = annotations.filter((annotation) => {
+      const live = noteRefs.current.get(annotation.id);
+      return (live?.value ?? annotation.note).trim().length === 0;
+    });
+    if (incomplete.length === 0) {
+      onDismiss(true);
+      return;
+    }
+    const fromIndex = annotations.findIndex((annotation) => annotation.id === fromId);
+    const next = incomplete.find(
+      (item) => annotations.findIndex((annotation) => annotation.id === item.id) > fromIndex
+    ) ?? incomplete[0];
+    revealNote(next.id);
+  };
+  useLayoutEffect(() => {
+    const updatePosition = () => {
+      const rect = triggerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const contentHeight = (headerRef.current?.offsetHeight ?? 44) + (listRef.current?.scrollHeight ?? 200);
+      setPosition(
+        clampAnnotationDialogPlacement({
+          triggerLeft: rect.left,
+          triggerTop: rect.top,
+          triggerBottom: rect.bottom,
+          contentHeight,
+          viewportWidth: window.innerWidth,
+          viewportHeight: window.innerHeight,
+          panelWidth: ANNOTATION_REVIEW_DIALOG_WIDTH_PX
+        })
+      );
+    };
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [annotations, triggerRef]);
+  useLayoutEffect(() => {
+    if (!focusAnnotationId || position.maxHeight <= 0) return;
+    revealNote(focusAnnotationId);
+    const note = noteRefs.current.get(focusAnnotationId);
+    if (note && document.activeElement === note) onFocusConsumed?.();
+  }, [focusAnnotationId, onFocusConsumed, annotations.length, position.maxHeight]);
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        onDismiss(true);
+        return;
+      }
+      if (event.key !== "Tab" || !panelRef.current) return;
+      const focusable = focusableElements(panelRef.current);
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    const onPointerDown = (event) => {
+      if (!(event.target instanceof Node)) return;
+      if (panelRef.current?.contains(event.target) || triggerRef.current?.contains(event.target)) {
+        return;
+      }
+      onDismiss(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("pointerdown", onPointerDown);
+    if (!focusAnnotationId) {
+      window.setTimeout(() => {
+        if (document.activeElement === triggerRef.current) panelRef.current?.focus();
+      }, 0);
+    }
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [focusAnnotationId, onDismiss, triggerRef]);
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        tabIndex: -1,
+        "data-og-annotation-review": "",
+        style: {
+          left: position.left,
+          top: position.top,
+          maxHeight: position.maxHeight,
+          ...portalStyle
+        },
+        className: "og-root fixed z-[75] box-border flex w-[min(25rem,calc(100vw-1.5rem))] flex-col overflow-hidden rounded-og-lg border border-og-border bg-og-surface-1 text-og-fg shadow-xl outline-hidden",
+        "aria-label": editable ? "Edit quoted notes" : "Quoted notes",
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: headerRef,
+              "data-og-annotation-review-header": "",
+              className: "flex shrink-0 items-start justify-between gap-3 px-3 pt-3 pb-2",
+              children: [
+                /* @__PURE__ */ jsx("p", { className: "min-w-0 pt-0.5 text-og-sm font-medium text-og-fg-muted", children: countLabel }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "inline-flex size-8 shrink-0 items-center justify-center rounded-md border-0 bg-transparent text-og-fg-muted outline-hidden hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:size-11",
+                    "aria-label": "Close",
+                    onClick: () => onDismiss(true),
+                    children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5", "aria-hidden": "true" })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: listRef,
+              "data-og-annotation-review-list": "",
+              className: "grid min-h-0 flex-1 gap-2.5 overflow-x-hidden overflow-y-auto overscroll-contain px-3 pb-3",
+              children: annotations.map((annotation, index) => {
+                const ordinal = annotationDisplayOrdinal(annotation, index);
+                return /* @__PURE__ */ jsx(
+                  "section",
+                  {
+                    "data-og-annotation-id": annotation.id,
+                    "aria-label": `Annotation ${ordinal}`,
+                    children: /* @__PURE__ */ jsxs(AnnotationAccentRow, { children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                          /* @__PURE__ */ jsxs("p", { className: "mb-0.5 text-og-xs font-medium tabular-nums text-og-fg-subtle", children: [
+                            "Annotation ",
+                            ordinal
+                          ] }),
+                          /* @__PURE__ */ jsx(
+                            AnnotationQuoteSourceButton,
+                            {
+                              annotation,
+                              lines: 2,
+                              onRevealSource,
+                              onUnavailable: setUnavailableId
+                            }
+                          )
+                        ] }),
+                        editable && onRemove ? /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: "inline-flex size-7 shrink-0 items-center justify-center rounded-md border-0 bg-transparent text-og-fg-subtle outline-hidden hover:bg-og-surface-1 hover:text-og-status-failed focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:size-11",
+                            "aria-label": `Remove annotation ${ordinal}`,
+                            onClick: () => onRemove(annotation.id),
+                            children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5", "aria-hidden": "true" })
+                          }
+                        ) : null
+                      ] }),
+                      unavailableId === annotation.id ? /* @__PURE__ */ jsx("p", { role: "status", className: "text-og-xs text-og-status-waiting", children: "Source is outside the loaded timeline window." }) : null,
+                      editable && onUpdate ? /* @__PURE__ */ jsx(
+                        AnnotationNoteField,
+                        {
+                          annotation,
+                          inputRef: (node) => {
+                            if (node) noteRefs.current.set(annotation.id, node);
+                            else noteRefs.current.delete(annotation.id);
+                          },
+                          onUpdate,
+                          onCommit: () => commitNotes(annotation.id)
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        AnnotationNotePreview,
+                        {
+                          note: annotation.note,
+                          annotationId: annotation.id,
+                          ordinal
+                        }
+                      )
+                    ] })
+                  },
+                  annotation.id
+                );
+              })
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+var timeline_annotations_dialog_default = TimelineAnnotationsDialog;
+export {
+  TimelineAnnotationsDialog,
+  timeline_annotations_dialog_default as default
+};
+//# sourceMappingURL=timeline-annotations-dialog-6Q53N5FG.js.map

package/dist/timeline-annotations-dialog-6Q53N5FG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/timeline-annotations-dialog.tsx"],"sourcesContent":["import type { TimelineAnnotationSource } from \"@opengeni/sdk\";\nimport { XIcon } from \"lucide-react\";\nimport { useEffect, useLayoutEffect, useRef, useState, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { usePortalTokenStyle } from \"../lib/use-portal-token-style\";\nimport {\n  AnnotationAccentRow,\n  AnnotationNoteField,\n  AnnotationNotePreview,\n  AnnotationQuoteSourceButton,\n  type TimelineAnnotationLike,\n} from \"./timeline-annotation-chrome\";\nimport {\n  ANNOTATION_REVIEW_DIALOG_WIDTH_PX,\n  clampAnnotationDialogPlacement,\n  scrollAnnotationRowIntoList,\n} from \"./timeline-annotation-layout\";\nimport { annotationDisplayOrdinal, cssEscapeAttribute } from \"./timeline-annotation-shared\";\n\nfunction focusableElements(root: HTMLElement): HTMLElement[] {\n  return [\n    ...root.querySelectorAll<HTMLElement>(\n      'button:not([disabled]),textarea:not([disabled]),input:not([disabled]),[href],[tabindex]:not([tabindex=\"-1\"])',\n    ),\n  ].filter((element) => element.tabIndex >= 0 && !element.closest(\"[inert]\"));\n}\n\nexport function TimelineAnnotationsDialog({\n  annotations,\n  editable,\n  focusAnnotationId,\n  onFocusConsumed,\n  onUpdate,\n  onRemove,\n  onRevealSource,\n  triggerRef,\n  countLabel,\n  onDismiss,\n}: {\n  annotations: readonly TimelineAnnotationLike[];\n  editable: boolean;\n  focusAnnotationId?: string | null | undefined;\n  onFocusConsumed?: (() => void) | undefined;\n  onUpdate?: ((id: string, note: string) => void) | undefined;\n  onRemove?: ((id: string) => void) | undefined;\n  onRevealSource?: ((source: TimelineAnnotationSource) => boolean) | undefined;\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  countLabel: string;\n  onDismiss: (restoreFocus: boolean) => void;\n}) {\n  const [unavailableId, setUnavailableId] = useState<string | null>(null);\n  const [position, setPosition] = useState({ left: 12, top: 12, maxHeight: 0 });\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  const headerRef = useRef<HTMLDivElement | null>(null);\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const noteRefs = useRef(new Map<string, HTMLTextAreaElement>());\n  const portalStyle = usePortalTokenStyle(triggerRef.current);\n  const revealNote = (id: string) => {\n    const row = listRef.current?.querySelector<HTMLElement>(\n      `[data-og-annotation-id=\"${cssEscapeAttribute(id)}\"]`,\n    );\n    scrollAnnotationRowIntoList(listRef.current, row);\n    noteRefs.current.get(id)?.focus();\n  };\n\n  const commitNotes = (fromId: string) => {\n    const incomplete = annotations.filter((annotation) => {\n      const live = noteRefs.current.get(annotation.id);\n      return (live?.value ?? annotation.note).trim().length === 0;\n    });\n    if (incomplete.length === 0) {\n      onDismiss(true);\n      return;\n    }\n    const fromIndex = annotations.findIndex((annotation) => annotation.id === fromId);\n    const next =\n      incomplete.find(\n        (item) => annotations.findIndex((annotation) => annotation.id === item.id) > fromIndex,\n      ) ?? incomplete[0]!;\n    revealNote(next.id);\n  };\n\n  useLayoutEffect(() => {\n    const updatePosition = () => {\n      const rect = triggerRef.current?.getBoundingClientRect();\n      if (!rect) return;\n      const contentHeight =\n        (headerRef.current?.offsetHeight ?? 44) + (listRef.current?.scrollHeight ?? 200);\n      setPosition(\n        clampAnnotationDialogPlacement({\n          triggerLeft: rect.left,\n          triggerTop: rect.top,\n          triggerBottom: rect.bottom,\n          contentHeight,\n          viewportWidth: window.innerWidth,\n          viewportHeight: window.innerHeight,\n          panelWidth: ANNOTATION_REVIEW_DIALOG_WIDTH_PX,\n        }),\n      );\n    };\n    updatePosition();\n    window.addEventListener(\"resize\", updatePosition);\n    window.addEventListener(\"scroll\", updatePosition, true);\n    return () => {\n      window.removeEventListener(\"resize\", updatePosition);\n      window.removeEventListener(\"scroll\", updatePosition, true);\n    };\n  }, [annotations, triggerRef]);\n\n  useLayoutEffect(() => {\n    if (!focusAnnotationId || position.maxHeight <= 0) return;\n    revealNote(focusAnnotationId);\n    const note = noteRefs.current.get(focusAnnotationId);\n    if (note && document.activeElement === note) onFocusConsumed?.();\n  }, [focusAnnotationId, onFocusConsumed, annotations.length, position.maxHeight]);\n\n  useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        event.stopPropagation();\n        onDismiss(true);\n        return;\n      }\n      if (event.key !== \"Tab\" || !panelRef.current) return;\n      const focusable = focusableElements(panelRef.current);\n      if (focusable.length === 0) return;\n      const first = focusable[0]!;\n      const last = focusable[focusable.length - 1]!;\n      if (event.shiftKey && document.activeElement === first) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && document.activeElement === last) {\n        event.preventDefault();\n        first.focus();\n      }\n    };\n    const onPointerDown = (event: PointerEvent) => {\n      if (!(event.target instanceof Node)) return;\n      if (panelRef.current?.contains(event.target) || triggerRef.current?.contains(event.target)) {\n        return;\n      }\n      onDismiss(false);\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    if (!focusAnnotationId) {\n      window.setTimeout(() => {\n        if (document.activeElement === triggerRef.current) panelRef.current?.focus();\n      }, 0);\n    }\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n      document.removeEventListener(\"pointerdown\", onPointerDown);\n    };\n  }, [focusAnnotationId, onDismiss, triggerRef]);\n\n  if (typeof document === \"undefined\") return null;\n  return createPortal(\n    <div\n      ref={panelRef}\n      role=\"dialog\"\n      tabIndex={-1}\n      data-og-annotation-review=\"\"\n      style={{\n        left: position.left,\n        top: position.top,\n        maxHeight: position.maxHeight,\n        ...portalStyle,\n      }}\n      className=\"og-root fixed z-[75] box-border flex w-[min(25rem,calc(100vw-1.5rem))] flex-col overflow-hidden rounded-og-lg border border-og-border bg-og-surface-1 text-og-fg shadow-xl outline-hidden\"\n      aria-label={editable ? \"Edit quoted notes\" : \"Quoted notes\"}\n    >\n      <div\n        ref={headerRef}\n        data-og-annotation-review-header=\"\"\n        className=\"flex shrink-0 items-start justify-between gap-3 px-3 pt-3 pb-2\"\n      >\n        <p className=\"min-w-0 pt-0.5 text-og-sm font-medium text-og-fg-muted\">{countLabel}</p>\n        <button\n          type=\"button\"\n          className=\"inline-flex size-8 shrink-0 items-center justify-center rounded-md border-0 bg-transparent text-og-fg-muted outline-hidden hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:size-11\"\n          aria-label=\"Close\"\n          onClick={() => onDismiss(true)}\n        >\n          <XIcon className=\"size-3.5\" aria-hidden=\"true\" />\n        </button>\n      </div>\n      <div\n        ref={listRef}\n        data-og-annotation-review-list=\"\"\n        className=\"grid min-h-0 flex-1 gap-2.5 overflow-x-hidden overflow-y-auto overscroll-contain px-3 pb-3\"\n      >\n        {annotations.map((annotation, index) => {\n          const ordinal = annotationDisplayOrdinal(annotation, index);\n          return (\n            <section\n              key={annotation.id}\n              data-og-annotation-id={annotation.id}\n              aria-label={`Annotation ${ordinal}`}\n            >\n              <AnnotationAccentRow>\n                <div className=\"flex items-start gap-1\">\n                  <div className=\"min-w-0 flex-1\">\n                    <p className=\"mb-0.5 text-og-xs font-medium tabular-nums text-og-fg-subtle\">\n                      Annotation {ordinal}\n                    </p>\n                    <AnnotationQuoteSourceButton\n                      annotation={annotation}\n                      lines={2}\n                      onRevealSource={onRevealSource}\n                      onUnavailable={setUnavailableId}\n                    />\n                  </div>\n                  {editable && onRemove ? (\n                    <button\n                      type=\"button\"\n                      className=\"inline-flex size-7 shrink-0 items-center justify-center rounded-md border-0 bg-transparent text-og-fg-subtle outline-hidden hover:bg-og-surface-1 hover:text-og-status-failed focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:size-11\"\n                      aria-label={`Remove annotation ${ordinal}`}\n                      onClick={() => onRemove(annotation.id)}\n                    >\n                      <XIcon className=\"size-3.5\" aria-hidden=\"true\" />\n                    </button>\n                  ) : null}\n                </div>\n                {unavailableId === annotation.id ? (\n                  <p role=\"status\" className=\"text-og-xs text-og-status-waiting\">\n                    Source is outside the loaded timeline window.\n                  </p>\n                ) : null}\n                {editable && onUpdate ? (\n                  <AnnotationNoteField\n                    annotation={annotation}\n                    inputRef={(node) => {\n                      if (node) noteRefs.current.set(annotation.id, node);\n                      else noteRefs.current.delete(annotation.id);\n                    }}\n                    onUpdate={onUpdate}\n                    onCommit={() => commitNotes(annotation.id)}\n                  />\n                ) : (\n                  <AnnotationNotePreview\n                    note={annotation.note}\n                    annotationId={annotation.id}\n                    ordinal={ordinal}\n                  />\n                )}\n              </AnnotationAccentRow>\n            </section>\n          );\n        })}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n\nexport default TimelineAnnotationsDialog;\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "3.8.0-canary.0",
+  "version": "4.0.1-canary.0",
   "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": {
@@ -78,10 +78,6 @@
       "types": "./dist/clipboard.d.ts",
       "import": "./dist/clipboard.js"
     },
-    "./chat": {
-      "types": "./dist/chat.tsx",
-      "import": "./dist/chat.tsx"
-    },
     "./styles.css": {
       "types": "./styles/index.d.ts",
       "style": "./styles/index.css",
@@ -124,7 +120,7 @@
     "@dnd-kit/utilities": "3.2.2",
     "@fontsource-variable/noto-sans-arabic": "5.2.10",
     "@fontsource-variable/noto-sans-jp": "5.2.10",
-    "@opengeni/sdk": "^3.8.0-canary.0",
+    "@opengeni/sdk": "^4.0.1-canary.0",
     "clsx": "^2.1.1",
     "dequal": "2.0.3",
     "lucide-react": "^1.8.0",

package/src/components/chat-composer.tsx

@@ -157,8 +157,11 @@ export function ChatComposer({
             <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

package/src/components/composer.tsx

@@ -74,7 +74,16 @@ function ComposerTip({
 
 export type ComposerDelivery = Pick<
   ComposerState,
-  "value" | "setValue" | "send" | "steer" | "sending" | "canSend" | "error" | "clearError"
+  | "value"
+  | "setValue"
+  | "send"
+  | "steer"
+  | "sending"
+  | "canSend"
+  | "error"
+  | "clearError"
+  | "annotations"
+  | "requestAnnotationReview"
 >;
 
 export type ComposerDraftState = Pick<
@@ -112,6 +121,7 @@ export type ChatComposerMessages = {
   sendAndResumeAriaLabel: string;
   sendTitle: string;
   sendAndResumeTitle: string;
+  annotationNotesRequired: string;
   workspacePaused: string;
   pausedHere: string;
   parentBlocker: string;
@@ -179,6 +189,7 @@ export const defaultChatComposerMessages: ChatComposerMessages = {
   sendAndResumeAriaLabel: "Add message to queue",
   sendTitle: "Queue message (Enter); steer with Cmd/Ctrl+Enter",
   sendAndResumeTitle: "Add to queue (Enter); steer now with Cmd/Ctrl+Enter",
+  annotationNotesRequired: "Add a note to each quote before sending.",
   workspacePaused: "Workspace paused",
   pausedHere: "Paused here",
   parentBlocker: "parent",
@@ -237,6 +248,7 @@ export type ComposerSubmitBlocker =
   | "attachment"
   | "sending"
   | "command"
+  | "annotations"
   | "empty"
   | null;
 
@@ -547,6 +559,9 @@ export function useChatComposerController({
   });
   const paletteEnabled = commandContext !== undefined;
   const commandDraftBlocked = paletteEnabled && palette.isCommandDraft;
+  const annotationsIncomplete = (delivery.annotations ?? []).some(
+    (annotation) => annotation.note.trim().length === 0,
+  );
 
   const submitBlocker: ComposerSubmitBlocker = disabled
     ? "disabled"
@@ -556,9 +571,11 @@ export function useChatComposerController({
         ? "sending"
         : commandDraftBlocked
           ? "command"
-          : delivery.canSend || hasReadyAttachment
-            ? null
-            : "empty";
+          : annotationsIncomplete
+            ? "annotations"
+            : delivery.canSend || hasReadyAttachment
+              ? null
+              : "empty";
   const canSubmit = submitBlocker === null;
 
   const submit = useCallback(
@@ -570,6 +587,12 @@ export function useChatComposerController({
       }
       if (disabled || blockedByAttachment || delivery.sending || submittingRef.current)
         return false;
+      if (annotationsIncomplete) {
+        setNotice({ tone: "error", message: messages.annotationNotesRequired });
+        delivery.clearError();
+        delivery.requestAnnotationReview?.();
+        return false;
+      }
       if (!delivery.canSend && !hasReadyAttachment) return false;
       submittingRef.current = true;
       setSubmitting(true);
@@ -581,11 +604,13 @@ export function useChatComposerController({
       }
     },
     [
+      annotationsIncomplete,
       blockedByAttachment,
       commandDraftBlocked,
       delivery,
       disabled,
       hasReadyAttachment,
+      messages.annotationNotesRequired,
       messages.slashCommandBlocked,
     ],
   );
@@ -645,6 +670,12 @@ export function useChatComposerController({
     );
     return () => window.clearTimeout(timer);
   }, [notice]);
+  useEffect(() => {
+    if (annotationsIncomplete) return;
+    setNotice((current) =>
+      current?.message === messages.annotationNotesRequired ? null : current,
+    );
+  }, [annotationsIncomplete, messages.annotationNotesRequired]);
 
   const runControlOperation = useCallback(async (operation: () => Promise<void>) => {
     if (controlOperationRef.current) return false;
@@ -1260,7 +1291,11 @@ export const SendButton = forwardRef<HTMLButtonElement, ComposerSendButtonProps>
     const controller = useComposerController();
     const tip =
       title ??
-      (controller.paused ? controller.messages.sendAndResumeTitle : controller.messages.sendTitle);
+      (controller.submitBlocker === "annotations"
+        ? controller.messages.annotationNotesRequired
+        : controller.paused
+          ? controller.messages.sendAndResumeTitle
+          : controller.messages.sendTitle);
     return (
       <ComposerTip tip={tip}>
         <button

package/src/components/copy-button.tsx

@@ -140,6 +140,7 @@ export function CopyHoverFrame({
       {children}
       {/* Sit under the body — top-right overlay collided with the first line. */}
       <div
+        data-og-annotation-chrome=""
         className={cn(
           "mt-1 flex h-7 items-center gap-1.5",
           align === "end" ? "justify-end" : "justify-start",