@opengeni/react 3.3.2 → 3.4.0

package/src/components/composer.tsx

@@ -9,6 +9,7 @@ import {
   PauseIcon,
   PlayIcon,
   RotateCwIcon,
+  SquareIcon,
   XIcon,
 } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
@@ -36,6 +37,7 @@ import {
   type RefObject,
 } from "react";
 import { argHint, defaultCommands } from "../commands/registry";
+import { useErrorMessage } from "../lib/error-message";
 import type { Notice, SlashCommand } from "../commands/types";
 import type { ComposerState } from "../hooks/use-composer";
 import { shouldSteerOnKey, shouldSubmitOnKey } from "../hooks/use-composer";
@@ -50,7 +52,8 @@ import {
   ComposerResponsiveContext,
   type ResponsiveBasis,
 } from "../lib/composer-responsive-context";
-import { composerSubmissionErrorMessage, formatBytes, formatRelativeTime } from "../lib/format";
+import { composerSubmissionErrorMessage } from "../lib/format";
+import { defaultChatComposerMessages, type ChatComposerMessages } from "../composer-messages";
 import type { PickerModelRow } from "../model-policy";
 import { useLightboxOptional } from "../timeline/screenshot-lightbox";
 import { OPEN_WORKSTREAM_CONTROL_EVENT } from "../workstream-control-event";
@@ -74,7 +77,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<
@@ -96,138 +108,8 @@ export type ComposerControlLinks = {
   sessionHref?: ((sessionId: string) => string) | undefined;
 };
 
-export type ChatComposerMessages = {
-  messagePlaceholder: string;
-  pausedPlaceholder: string;
-  inputLabel: string;
-  keyboardHint: string;
-  slashCommandBlocked: string;
-  controlChangedError: string;
-  sendFailedError: string;
-  dropFiles: string;
-  attachFiles: string;
-  pauseAriaLabel: string;
-  pauseTitle: string;
-  sendMessageAriaLabel: string;
-  sendAndResumeAriaLabel: string;
-  sendTitle: string;
-  sendAndResumeTitle: string;
-  workspacePaused: string;
-  pausedHere: string;
-  parentBlocker: string;
-  narrowerPause: string;
-  pausedBy: (displayName: string) => string;
-  queuedAhead: (count: number) => string;
-  resumingAndSending: string;
-  nextMessageResumes: string;
-  resumeThisWorkstream: string;
-  resumeShort: string;
-  hidePauseDetails: string;
-  showPauseDetails: string;
-  pauseReasonsLabel: string;
-  pausedByLabel: string;
-  alsoPausedByLabel: string;
-  resumeWorkspace: string;
-  resumeFromSession: string;
-  sessionCanRun: string;
-  stillPausedBy: (displayName: string) => string;
-  restoredResourcesLabel: string;
-  restoredFile: (fileId: string) => string;
-  removeRestoredResource: (index: number) => string;
-  uploading: string;
-  uploadFailed: string;
-  previewAttachment: (name: string) => string;
-  attachmentPreviewLabel: string;
-  downloadAttachment: (name: string) => string;
-  closeAttachmentPreview: string;
-  retryAttachment: (name: string) => string;
-  retryUpload: string;
-  removeAttachment: (name: string) => string;
-  confirmCommand: (name: string) => string;
-  confirmDescription: (command: SlashCommand) => string;
-  cancel: string;
-  runCommand: (name: string) => string;
-  commands: string;
-  slashCommandsLabel: string;
-  modelLabel: string;
-  close: string;
-  danger: string;
-  draftConflict: string;
-  useOtherDraft: string;
-  keepMine: string;
-  savingDraft: string;
-  formatBytes: (bytes: number) => string;
-  formatRelativeTime: (changedAt: string) => string;
-};
-
-export const defaultChatComposerMessages: ChatComposerMessages = {
-  messagePlaceholder: "Message the agent…",
-  pausedPlaceholder: "Message the agent — it will wait in the queue…",
-  inputLabel: "Message the agent",
-  keyboardHint: "Enter to queue · Cmd/Ctrl+Enter to steer · Shift+Enter for a new line",
-  slashCommandBlocked:
-    "That's a slash command — press Enter in the command list to run it, or edit the line to send a message.",
-  controlChangedError:
-    "This workstream was paused while you were sending. Nothing was sent, and your draft is still here.",
-  sendFailedError: "Sending failed — your draft is still here. Try again.",
-  dropFiles: "Drop files to attach",
-  attachFiles: "Attach files",
-  pauseAriaLabel: "Pause this workstream",
-  pauseTitle: "Pause this workstream; queued prompts and approvals are preserved",
-  sendMessageAriaLabel: "Send message",
-  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",
-  workspacePaused: "Workspace paused",
-  pausedHere: "Paused here",
-  parentBlocker: "parent",
-  narrowerPause: "a narrower pause",
-  pausedBy: (displayName) => `Paused by ${displayName}`,
-  queuedAhead: (count) =>
-    `${count} waiting prompt${count === 1 ? "" : "s"}; your message joins the queue.`,
-  resumingAndSending: "Sending…",
-  nextMessageResumes: "Messages wait in the queue until you resume.",
-  resumeThisWorkstream: "Resume this workstream",
-  resumeShort: "Resume",
-  hidePauseDetails: "Hide pause details",
-  showPauseDetails: "Show pause details",
-  pauseReasonsLabel: "Reasons this workstream is paused",
-  pausedByLabel: "Paused by ",
-  alsoPausedByLabel: "Also paused by ",
-  resumeWorkspace: "Resume workspace",
-  resumeFromSession: "Resume from this session",
-  sessionCanRun: "This session will be able to run",
-  stillPausedBy: (displayName) => `Still paused by ${displayName}`,
-  restoredResourcesLabel: "Restored prompt resources",
-  restoredFile: (fileId) => `File ${fileId.slice(0, 8)}`,
-  removeRestoredResource: (index) => `Remove restored resource ${index + 1}`,
-  uploading: "Uploading",
-  uploadFailed: "Upload failed",
-  previewAttachment: (name) => `Preview ${name}`,
-  attachmentPreviewLabel: "Attachment preview",
-  downloadAttachment: (name) => `Download ${name}`,
-  closeAttachmentPreview: "Close",
-  retryAttachment: (name) => `Retry ${name}`,
-  retryUpload: "Retry upload",
-  removeAttachment: (name) => `Remove ${name}`,
-  confirmCommand: (name) => `Confirm /${name}`,
-  confirmDescription: (command) => `Run /${command.name}? ${command.description}`,
-  cancel: "Cancel",
-  runCommand: (name) => `Run /${name}`,
-  commands: "Commands",
-  slashCommandsLabel: "Slash commands",
-  modelLabel: "Model",
-  close: "Close",
-  danger: "danger",
-  draftConflict: "This draft changed in another tab. Your local draft is still here.",
-  useOtherDraft: "Use other draft",
-  keepMine: "Keep mine",
-  // Kept for embedder message overrides / back-compat. Routine autosave is
-  // silent — only draft conflicts surface under the composer.
-  savingDraft: "Saving draft…",
-  formatBytes,
-  formatRelativeTime,
-};
+export { defaultChatComposerMessages } from "../composer-messages";
+export type { ChatComposerMessages } from "../composer-messages";
 
 export type ComposerSubmitMode = "queue" | "steer";
 export type ComposerSubmitBlocker =
@@ -235,9 +117,21 @@ export type ComposerSubmitBlocker =
   | "attachment"
   | "sending"
   | "command"
+  | "annotations"
   | "empty"
   | null;
 
+/**
+ * How the composer offers run control.
+ * - `pause`: the workstream Pause control and paused-state strip (default; the
+ *   Opengeni console).
+ * - `stop`: a Stop control only while a response runs. Stopping pauses this
+ *   conversation; the next message continues it, so people never see a paused
+ *   state they have to resume. Pauses applied elsewhere still show.
+ * - `none`: no run control.
+ */
+export type ComposerRunControl = "pause" | "stop" | "none";
+
 export type UseChatComposerControllerOptions = {
   delivery: ComposerDelivery;
   draft?: ComposerDraftState | undefined;
@@ -253,6 +147,10 @@ export type UseChatComposerControllerOptions = {
   onClearView?: (() => void) | undefined;
   onPaste?: ((event: ClipboardEvent<HTMLTextAreaElement>) => void) | undefined;
   messages?: Partial<ChatComposerMessages> | undefined;
+  /** Run control presentation. Defaults to `pause`. */
+  runControl?: ComposerRunControl | undefined;
+  /** A response is in progress; shows the Stop control under `runControl="stop"`. */
+  running?: boolean | undefined;
 };
 
 /**
@@ -279,7 +177,7 @@ function measureComposerContentHeight(textarea: HTMLTextAreaElement): number {
     mirror.tabIndex = -1;
     mirror.rows = 1;
     mirror.style.cssText =
-      "position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;height:auto;min-height:0;max-height:none;overflow:hidden;z-index:-1;";
+      "position:fixed;top:0;left:-100000px;visibility:hidden;pointer-events:none;height:auto;min-height:0;max-height:none;overflow:hidden;z-index:-1;";
     composerHeightMirror = mirror;
   }
 
@@ -359,7 +257,10 @@ export function useChatComposerController({
   onClearView,
   onPaste,
   messages: messageOverrides,
+  runControl = "pause",
+  running = false,
 }: UseChatComposerControllerOptions) {
+  const formatError = useErrorMessage();
   const messages = useMemo(
     () => ({ ...defaultChatComposerMessages, ...messageOverrides }),
     [messageOverrides],
@@ -370,7 +271,24 @@ export function useChatComposerController({
   const pauseButtonRef = useRef<HTMLButtonElement | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const listboxId = useId();
-  const paused = effectiveControl?.state === "paused";
+  const controlPaused = effectiveControl?.state === "paused";
+  // Set when this composer's Stop paused the conversation; cleared once it runs
+  // again. Pauses from anyone or anywhere else are never reinterpreted.
+  const [stoppedHere, setStoppedHere] = useState(false);
+  useEffect(() => {
+    if (!controlPaused) setStoppedHere(false);
+  }, [controlPaused]);
+  // Under Stop, the stopped response is not a state to manage: hide it and let
+  // the next message continue (a Steer resumes a paused branch). It applies
+  // only to this conversation's own pause with nothing queued behind it.
+  const resumesOnSend =
+    runControl === "stop" &&
+    stoppedHere &&
+    controlPaused &&
+    effectiveControl?.directState === "paused" &&
+    effectiveControl.additionalBlockerCount === 0 &&
+    queuedAheadCount === 0;
+  const paused = controlPaused && !resumesOnSend;
   const [controlDetailsOpen, setControlDetailsOpen] = useState(false);
   const [paletteMounted, setPaletteMounted] = useState(false);
   const [submitting, setSubmitting] = useState(false);
@@ -435,7 +353,6 @@ export function useChatComposerController({
   }, [id, paused]);
 
   const blockedByAttachment = attachments?.hasUnresolved === true;
-  const hasReadyAttachment = (attachments?.readyResources.length ?? 0) > 0;
 
   const [dragging, setDragging] = useState(false);
   const dragCarriesFiles = (event: { dataTransfer: DataTransfer | null }): boolean =>
@@ -444,9 +361,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>) => {
@@ -461,11 +378,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);
@@ -545,6 +467,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"
@@ -554,9 +479,11 @@ export function useChatComposerController({
         ? "sending"
         : commandDraftBlocked
           ? "command"
-          : delivery.canSend || hasReadyAttachment
-            ? null
-            : "empty";
+          : annotationsIncomplete
+            ? "annotations"
+            : delivery.canSend
+              ? null
+              : "empty";
   const canSubmit = submitBlocker === null;
 
   const submit = useCallback(
@@ -568,23 +495,31 @@ export function useChatComposerController({
       }
       if (disabled || blockedByAttachment || delivery.sending || submittingRef.current)
         return false;
-      if (!delivery.canSend && !hasReadyAttachment) return false;
+      if (annotationsIncomplete) {
+        setNotice({ tone: "error", message: messages.annotationNotesRequired });
+        delivery.clearError();
+        delivery.requestAnnotationReview?.();
+        return false;
+      }
+      if (!delivery.canSend) return false;
       submittingRef.current = true;
       setSubmitting(true);
       try {
-        return mode === "steer" ? await delivery.steer() : await delivery.send();
+        return mode === "steer" || resumesOnSend ? await delivery.steer() : await delivery.send();
       } finally {
         submittingRef.current = false;
         if (mountedRef.current) setSubmitting(false);
       }
     },
     [
+      annotationsIncomplete,
       blockedByAttachment,
       commandDraftBlocked,
       delivery,
       disabled,
-      hasReadyAttachment,
+      messages.annotationNotesRequired,
       messages.slashCommandBlocked,
+      resumesOnSend,
     ],
   );
 
@@ -599,17 +534,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(
@@ -632,7 +568,10 @@ export function useChatComposerController({
           tone: "error" as const,
           message: /control changed|paused while/i.test(delivery.error.message)
             ? messages.controlChangedError
-            : composerSubmissionErrorMessage(delivery.error) || messages.sendFailedError,
+            : formatError(
+                delivery.error,
+                composerSubmissionErrorMessage(delivery.error) || messages.sendFailedError,
+              ),
         }
       : null);
   useEffect(() => {
@@ -643,6 +582,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;
@@ -677,6 +622,12 @@ export function useChatComposerController({
     [control, runControlOperation],
   );
 
+  const stop = useCallback(async (): Promise<boolean> => {
+    const stopped = await pause();
+    if (stopped && mountedRef.current) setStoppedHere(true);
+    return stopped;
+  }, [pause]);
+
   return {
     id,
     rootRef,
@@ -701,9 +652,12 @@ export function useChatComposerController({
     removeRestoredResource: draft?.removeRestoredResource,
     resolveDraftConflict: draft?.resolveDraftConflict,
     hasControl: control !== undefined,
+    runControl,
+    running,
     pausing: control?.pausing ?? false,
     resuming: control?.resuming ?? false,
     pause,
+    stop,
     resume,
     resumeScope,
     paused,
@@ -873,6 +827,7 @@ export const Surface = forwardRef<HTMLDivElement, ComposerSurfaceProps>(function
   const controller = useComposerController();
   return (
     <div
+      data-og-composer-surface=""
       {...props}
       ref={ref}
       onDragOver={controller.attachments ? controller.handleDragOver : undefined}
@@ -944,9 +899,11 @@ 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}
+      onLoadPreview={controller.attachments.loadPreview}
     />
   );
 }
@@ -964,6 +921,31 @@ 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);
+  if (popup) return !popup.contains(textarea);
+  // A dismissed popup can restore a button or link while draft hydration is
+  // still pending. Its focus remains intentional after the popup disappears.
+  return (
+    active !== textarea.ownerDocument.body && active !== textarea.ownerDocument.documentElement
+  );
+}
+
 export const Input = forwardRef<HTMLTextAreaElement, ComposerInputProps>(function ComposerInput(
   { rows = 1, placeholder, className, "aria-label": ariaLabel, autoFocus = false, ...props },
   forwardedRef,
@@ -973,19 +955,45 @@ 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;
+      if (focusBelongsElsewhere(textarea)) return;
       textarea.focus();
     });
     return () => window.cancelAnimationFrame(frame);
   }, [autoFocus, controller.disabled, controller.textareaRef]);
 
+  // Text rewraps when the box gets narrower or wider (panel resize, viewport
+  // change), so refit the height on width changes, not only on edits.
+  useEffect(() => {
+    const textarea = controller.textareaRef.current;
+    if (!textarea || typeof ResizeObserver === "undefined") return;
+    let width = textarea.clientWidth;
+    let frame: number | null = null;
+    const observer = new ResizeObserver(() => {
+      if (textarea.clientWidth === width) return;
+      width = textarea.clientWidth;
+      if (frame !== null) return;
+      frame = window.requestAnimationFrame(() => {
+        frame = null;
+        applyComposerTextareaHeight(textarea, 220);
+      });
+    });
+    observer.observe(textarea);
+    return () => {
+      observer.disconnect();
+      if (frame !== null) window.cancelAnimationFrame(frame);
+    };
+  }, [controller.textareaRef]);
+
   return (
     <textarea
       {...props}
@@ -1001,7 +1009,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={
@@ -1066,7 +1073,9 @@ export const Controls = forwardRef<HTMLSpanElement, ComposerControlsProps>(
         ref={ref}
         className={cn(
           "og-composer-controls flex min-w-0 flex-1 flex-wrap items-center gap-1.5",
-          "max-sm:flex-nowrap max-sm:gap-1",
+          // Phone: 44px touch targets already space themselves; tight gaps leave
+          // the model pill room for its name.
+          "max-sm:flex-nowrap max-sm:gap-0.5",
           className,
         )}
       />
@@ -1107,7 +1116,7 @@ export const Actions = forwardRef<HTMLSpanElement, ComposerActionsProps>(functio
       ref={ref}
       className={cn(
         "og-composer-actions ml-auto flex shrink-0 items-center gap-1.5",
-        "max-sm:flex-nowrap max-sm:gap-1",
+        "max-sm:flex-nowrap max-sm:gap-0.5",
         className,
       )}
     />
@@ -1212,12 +1221,19 @@ export const PauseButton = forwardRef<HTMLButtonElement, ComposerPauseButtonProp
     ref,
   ) {
     const controller = useComposerController();
-    if (!controller.effectiveControl || controller.paused || !controller.hasControl) return null;
+    if (
+      controller.runControl !== "pause" ||
+      !controller.effectiveControl ||
+      controller.paused ||
+      !controller.hasControl
+    )
+      return null;
     const busy = controller.pausing || controller.resuming;
     const tip = title ?? controller.messages.pauseTitle;
     return (
       <ComposerTip tip={tip}>
         <button
+          data-analytics-action="pause"
           {...props}
           ref={mergeRefs(controller.pauseButtonRef, ref)}
           type="button"
@@ -1244,6 +1260,62 @@ export const PauseButton = forwardRef<HTMLButtonElement, ComposerPauseButtonProp
   },
 );
 
+export type ComposerStopButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  OwnedButtonProps
+>;
+
+/**
+ * Stop the running response. Rendered only under `runControl="stop"` while a
+ * response runs; stopping pauses this conversation and the next message
+ * continues it.
+ */
+export const StopButton = forwardRef<HTMLButtonElement, ComposerStopButtonProps>(
+  function ComposerStopButton(
+    { className, "aria-label": ariaLabel, title, children, ...props },
+    ref,
+  ) {
+    const controller = useComposerController();
+    if (
+      controller.runControl !== "stop" ||
+      !controller.running ||
+      !controller.hasControl ||
+      controller.effectiveControl?.state === "paused"
+    )
+      return null;
+    const busy = controller.pausing;
+    const label = ariaLabel ?? controller.messages.stopAriaLabel ?? "Stop";
+    const tip = title ?? controller.messages.stopTitle ?? label;
+    return (
+      <ComposerTip tip={tip}>
+        <button
+          data-analytics-action="stop"
+          data-og-composer-stop=""
+          {...props}
+          ref={ref}
+          type="button"
+          onClick={() => void controller.stop()}
+          disabled={busy}
+          aria-label={label}
+          className={cn(
+            "inline-flex size-8 items-center justify-center rounded-og-md border border-og-border pointer-coarse:size-11",
+            "bg-og-surface-1 text-og-fg transition-colors duration-150",
+            "hover:bg-og-surface-2 disabled:opacity-50",
+            className,
+          )}
+        >
+          {children ??
+            (busy ? (
+              <LoaderCircleIcon className="size-3.5 animate-og-spin" />
+            ) : (
+              <SquareIcon className="size-3 fill-current" />
+            ))}
+        </button>
+      </ComposerTip>
+    );
+  },
+);
+
 export type ComposerSendButtonProps = Omit<
   ButtonHTMLAttributes<HTMLButtonElement>,
   OwnedButtonProps
@@ -1257,10 +1329,15 @@ 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
+          data-analytics-action="send"
           {...props}
           ref={ref}
           type="button"
@@ -1275,10 +1352,10 @@ export const SendButton = forwardRef<HTMLButtonElement, ComposerSendButtonProps>
           }
           className={cn(
             "inline-flex size-8 items-center justify-center rounded-og-md pointer-coarse:size-11",
-            "bg-og-accent text-og-accent-fg shadow-og-sm",
+            "border border-og-primary-border bg-og-primary text-og-primary-fg",
             "transition-[background-color,transform,opacity] duration-150 ease-og-spring",
-            "hover:bg-og-accent-strong active:scale-95",
-            "disabled:cursor-not-allowed disabled:bg-og-surface-3 disabled:text-og-fg-subtle disabled:shadow-none",
+            "hover:bg-og-primary-hover active:scale-95",
+            "disabled:cursor-not-allowed disabled:opacity-50",
             className,
           )}
         >
@@ -1435,7 +1512,7 @@ function WorkstreamPausedStrip({
         <button
           type="button"
           aria-label={messages.resumeThisWorkstream}
-          className="inline-flex min-h-8 shrink-0 items-center gap-1.5 rounded-og-md border border-og-status-waiting/35 bg-og-surface-1 px-2.5 text-og-xs font-medium text-og-fg hover:bg-og-surface-2 pointer-coarse:min-h-11"
+          className="inline-flex min-h-8 shrink-0 items-center gap-1.5 rounded-og-md border border-og-primary-border bg-og-primary px-2.5 text-og-xs font-medium text-og-primary-fg hover:bg-og-primary-hover disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:min-h-11"
           disabled={busy}
           onClick={onResume}
         >
@@ -1635,23 +1712,143 @@ function ConfirmBar({
 function AttachmentChips({
   attachments,
   messages,
+  disabled,
   onRemove,
   onRetry,
   onRetainPreview,
+  onLoadPreview,
 }: {
   attachments: UseFileAttachmentsResult["attachments"];
   messages: ChatComposerMessages;
+  disabled: boolean;
   onRemove: (id: string) => void;
   onRetry?: ((id: string) => void) | undefined;
   onRetainPreview: UseFileAttachmentsResult["retainPreview"];
+  onLoadPreview: UseFileAttachmentsResult["loadPreview"];
 }) {
   const lightbox = useLightboxOptional();
+  const previewRequest = useRef<AbortController | null>(null);
+  const [previewLoadingId, setPreviewLoadingId] = useState<string | null>(null);
+  const [previewErrorId, setPreviewErrorId] = useState<string | null>(null);
+  // Thumbnails always show: an uploaded image without a live local preview (a
+  // restored draft, a revoked or broken object URL) loads its stored copy.
+  const [storedThumbs, setStoredThumbs] = useState<Record<string, string>>({});
+  const [brokenLocal, setBrokenLocal] = useState<ReadonlySet<string>>(() => new Set());
+  const thumbRequests = useRef<Map<string, AbortController>>(new Map());
+  const localPreview = (attachment: UseFileAttachmentsResult["attachments"][number]) =>
+    attachment.previewUrl && !brokenLocal.has(attachment.id) ? attachment.previewUrl : undefined;
+
+  useEffect(() => {
+    if (!onLoadPreview) return;
+    for (const attachment of attachments) {
+      const id = attachment.id;
+      if (
+        attachment.status !== "ready" ||
+        !attachment.file ||
+        !attachment.contentType.startsWith("image/") ||
+        (attachment.previewUrl && !brokenLocal.has(id)) ||
+        storedThumbs[id] ||
+        thumbRequests.current.has(id)
+      ) {
+        continue;
+      }
+      const controller = new AbortController();
+      thumbRequests.current.set(id, controller);
+      void onLoadPreview(id, controller.signal)
+        .then((url) => {
+          if (url && !controller.signal.aborted) {
+            setStoredThumbs((current) => ({ ...current, [id]: url }));
+          }
+        })
+        .catch(() => undefined)
+        .finally(() => {
+          if (thumbRequests.current.get(id) === controller) thumbRequests.current.delete(id);
+        });
+    }
+  }, [attachments, brokenLocal, onLoadPreview, storedThumbs]);
+  useEffect(() => {
+    const requests = thumbRequests.current;
+    return () => {
+      for (const controller of requests.values()) controller.abort();
+      requests.clear();
+    };
+  }, []);
+
+  useEffect(() => () => previewRequest.current?.abort(), [onLoadPreview]);
+
+  async function openPreview(
+    attachment: UseFileAttachmentsResult["attachments"][number],
+    source: HTMLButtonElement,
+    canLoadPreview: boolean,
+  ) {
+    previewRequest.current?.abort();
+    const attachmentId = attachment.id;
+    const local = localPreview(attachment);
+    const releaseSource = local ? onRetainPreview(attachmentId) : undefined;
+    let src = local ?? storedThumbs[attachmentId];
+    // An unretained local URL may already be revoked: prefer the stored copy.
+    if (!releaseSource && canLoadPreview) src = storedThumbs[attachmentId];
+    if (!src && canLoadPreview) {
+      const controller = new AbortController();
+      previewRequest.current = controller;
+      setPreviewLoadingId(attachmentId);
+      setPreviewErrorId(null);
+      try {
+        src = await onLoadPreview!(attachmentId, controller.signal);
+        if (controller.signal.aborted) return;
+        if (!src) {
+          setPreviewErrorId(attachmentId);
+          return;
+        }
+      } catch {
+        if (!controller.signal.aborted) setPreviewErrorId(attachmentId);
+        return;
+      } finally {
+        if (previewRequest.current === controller) {
+          setPreviewLoadingId(null);
+        }
+      }
+    }
+    lightbox!.open(
+      src!,
+      attachment.name,
+      source,
+      messages.attachmentPreviewLabel,
+      attachment.name,
+      {
+        download: messages.downloadAttachment(attachment.name),
+        close: messages.closeAttachmentPreview,
+      },
+      releaseSource,
+    );
+  }
+
   return (
     <div className="flex flex-wrap gap-2 px-3 py-2">
       {attachments.map((attachment) => {
         const failed = attachment.status === "failed";
-        const statusText =
-          attachment.status === "uploading"
+        const secureContextRequired = attachment.errorCode === "secure_context_required";
+        const previewFailed = previewErrorId === attachment.id;
+        const previewLoading = previewLoadingId === attachment.id;
+        const local = localPreview(attachment);
+        const thumb = local ?? storedThumbs[attachment.id];
+        // A local object URL that fails (revoked, unreadable) falls back to the stored copy.
+        const onThumbError = local
+          ? () =>
+              setBrokenLocal((current) =>
+                current.has(attachment.id) ? current : new Set(current).add(attachment.id),
+              )
+          : undefined;
+        const canLoadPreview = Boolean(
+          lightbox &&
+          onLoadPreview &&
+          attachment.status === "ready" &&
+          attachment.file &&
+          attachment.contentType.startsWith("image/"),
+        );
+        const statusText = previewFailed
+          ? (messages.previewUnavailable ?? "Preview unavailable")
+          : attachment.status === "uploading"
             ? messages.uploading
             : failed
               ? attachment.error || messages.uploadFailed
@@ -1660,43 +1857,49 @@ function AttachmentChips({
           <div
             key={attachment.id}
             className={cn(
-              "flex min-w-0 max-w-[240px] items-center gap-2 rounded-og-md border px-2 py-1.5 text-og-sm",
+              "flex min-w-0 items-center gap-2 rounded-og-md border px-2 py-1.5 text-og-sm",
               failed
-                ? "border-og-status-failed/40 bg-og-status-failed/10"
-                : "border-og-border bg-og-surface-2",
+                ? cn(
+                    "border-og-status-failed/40 bg-og-status-failed/10",
+                    secureContextRequired
+                      ? "max-w-full items-start sm:max-w-[32rem]"
+                      : "max-w-[240px]",
+                  )
+                : "max-w-[240px] border-og-border bg-og-surface-2",
             )}
           >
-            {attachment.previewUrl && lightbox ? (
+            {lightbox && (thumb || canLoadPreview) ? (
               <button
                 type="button"
-                className="size-8 shrink-0 overflow-hidden rounded outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent"
+                className={cn(
+                  "size-8 shrink-0 overflow-hidden rounded outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent",
+                  !thumb && "flex items-center justify-center disabled:cursor-wait",
+                )}
                 aria-label={messages.previewAttachment(attachment.name)}
-                onClick={(event) => {
-                  const releasePreview = onRetainPreview(attachment.id);
-                  lightbox.open(
-                    attachment.previewUrl!,
-                    attachment.name,
-                    event.currentTarget,
-                    messages.attachmentPreviewLabel,
-                    attachment.name,
-                    {
-                      download: messages.downloadAttachment(attachment.name),
-                      close: messages.closeAttachmentPreview,
-                    },
-                    releasePreview,
-                  );
-                }}
+                aria-busy={previewLoading || undefined}
+                disabled={previewLoading}
+                onClick={(event) =>
+                  void openPreview(attachment, event.currentTarget, canLoadPreview)
+                }
               >
-                <img
-                  src={attachment.previewUrl}
-                  alt=""
-                  className="h-full w-full object-cover transition-opacity hover:opacity-80"
-                />
+                {thumb ? (
+                  <img
+                    src={thumb}
+                    alt=""
+                    onError={onThumbError}
+                    className="h-full w-full object-cover transition-opacity hover:opacity-80"
+                  />
+                ) : previewLoading ? (
+                  <LoaderCircleIcon className="size-4 animate-og-spin text-og-fg-muted" />
+                ) : (
+                  <ImageIcon className="size-4 text-og-fg-muted" />
+                )}
               </button>
-            ) : attachment.previewUrl ? (
+            ) : thumb ? (
               <img
-                src={attachment.previewUrl}
+                src={thumb}
                 alt=""
+                onError={onThumbError}
                 className="size-8 shrink-0 rounded object-cover"
               />
             ) : attachment.contentType.startsWith("image/") ? (
@@ -1706,7 +1909,11 @@ function AttachmentChips({
             )}
             <div className="min-w-0 flex-1">
               <div className="truncate font-medium text-og-fg">{attachment.name}</div>
-              {failed ? (
+              {secureContextRequired ? (
+                <div className="break-words text-og-xs leading-4 text-og-status-failed">
+                  {statusText}
+                </div>
+              ) : failed || previewFailed ? (
                 <ComposerTip tip={statusText}>
                   <div className="truncate text-og-xs text-og-status-failed">{statusText}</div>
                 </ComposerTip>
@@ -1717,12 +1924,13 @@ function AttachmentChips({
             {attachment.status === "uploading" ? (
               <LoaderCircleIcon className="size-3.5 shrink-0 animate-og-spin" />
             ) : null}
-            {failed && onRetry ? (
+            {failed && !secureContextRequired && onRetry ? (
               <ComposerTip tip={messages.retryUpload}>
                 <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" />
@@ -1732,7 +1940,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" />