@opengeni/react 1.0.1 → 1.0.2-canary.37202341988001

package/src/components/composer.tsx

@@ -9,6 +9,7 @@ import {
   PauseIcon,
   PlayIcon,
   RotateCwIcon,
+  SquareIcon,
   XIcon,
 } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
@@ -20,6 +21,7 @@ import {
   useContext,
   useEffect,
   useId,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -35,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";
@@ -51,6 +54,7 @@ import {
 } from "../lib/composer-responsive-context";
 import { composerSubmissionErrorMessage, formatBytes, formatRelativeTime } from "../lib/format";
 import type { PickerModelRow } from "../model-policy";
+import { useLightboxOptional } from "../timeline/screenshot-lightbox";
 import { OPEN_WORKSTREAM_CONTROL_EVENT } from "../workstream-control-event";
 import { CommandPalette as CommandPaletteView } from "./command-palette";
 import { ModelPicker as ModelPickerView } from "./model-picker";
@@ -72,7 +76,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<
@@ -106,10 +119,14 @@ export type ChatComposerMessages = {
   attachFiles: string;
   pauseAriaLabel: string;
   pauseTitle: string;
+  /** Stop control shown while a response runs (`runControl="stop"`). */
+  stopAriaLabel?: string | undefined;
+  stopTitle?: string | undefined;
   sendMessageAriaLabel: string;
   sendAndResumeAriaLabel: string;
   sendTitle: string;
   sendAndResumeTitle: string;
+  annotationNotesRequired: string;
   workspacePaused: string;
   pausedHere: string;
   parentBlocker: string;
@@ -134,6 +151,11 @@ export type ChatComposerMessages = {
   removeRestoredResource: (index: number) => string;
   uploading: string;
   uploadFailed: string;
+  previewAttachment: (name: string) => string;
+  previewUnavailable?: string | undefined;
+  attachmentPreviewLabel: string;
+  downloadAttachment: (name: string) => string;
+  closeAttachmentPreview: string;
   retryAttachment: (name: string) => string;
   retryUpload: string;
   removeAttachment: (name: string) => string;
@@ -156,9 +178,11 @@ export type ChatComposerMessages = {
 
 export const defaultChatComposerMessages: ChatComposerMessages = {
   messagePlaceholder: "Message the agent…",
-  pausedPlaceholder: "Sending will resume this workstream…",
+  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",
+  // Shortcuts live in the send button's title; the footer stays quiet unless
+  // the host supplies its own hint.
+  keyboardHint: "",
   slashCommandBlocked:
     "That's a slash command — press Enter in the command list to run it, or edit the line to send a message.",
   controlChangedError:
@@ -168,19 +192,22 @@ export const defaultChatComposerMessages: ChatComposerMessages = {
   attachFiles: "Attach files",
   pauseAriaLabel: "Pause this workstream",
   pauseTitle: "Pause this workstream; queued prompts and approvals are preserved",
+  stopAriaLabel: "Stop",
+  stopTitle: "Stop the response",
   sendMessageAriaLabel: "Send message",
-  sendAndResumeAriaLabel: "Send and resume",
+  sendAndResumeAriaLabel: "Add message to queue",
   sendTitle: "Queue message (Enter); steer with Cmd/Ctrl+Enter",
-  sendAndResumeTitle: "Send & resume (Enter); Steer & resume 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",
   narrowerPause: "a narrower pause",
   pausedBy: (displayName) => `Paused by ${displayName}`,
   queuedAhead: (count) =>
-    `Send & resume queues behind ${count} waiting prompt${count === 1 ? "" : "s"}.`,
-  resumingAndSending: "Resuming and sending…",
-  nextMessageResumes: "Your next message resumes this workstream automatically.",
+    `${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",
@@ -197,6 +224,11 @@ export const defaultChatComposerMessages: ChatComposerMessages = {
   removeRestoredResource: (index) => `Remove restored resource ${index + 1}`,
   uploading: "Uploading",
   uploadFailed: "Upload failed",
+  previewAttachment: (name) => `Preview ${name}`,
+  previewUnavailable: "Preview unavailable",
+  attachmentPreviewLabel: "Attachment preview",
+  downloadAttachment: (name) => `Download ${name}`,
+  closeAttachmentPreview: "Close",
   retryAttachment: (name) => `Retry ${name}`,
   retryUpload: "Retry upload",
   removeAttachment: (name) => `Remove ${name}`,
@@ -225,9 +257,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;
@@ -243,6 +287,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;
 };
 
 /**
@@ -269,7 +317,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;
   }
 
@@ -349,7 +397,10 @@ export function useChatComposerController({
   onClearView,
   onPaste,
   messages: messageOverrides,
+  runControl = "pause",
+  running = false,
 }: UseChatComposerControllerOptions) {
+  const formatError = useErrorMessage();
   const messages = useMemo(
     () => ({ ...defaultChatComposerMessages, ...messageOverrides }),
     [messageOverrides],
@@ -360,13 +411,55 @@ 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);
   const submittingRef = useRef(false);
   const controlOperationRef = useRef(false);
+  const deliveryValue = delivery.value;
+  const setDeliveryValue = delivery.setValue;
   const mountedRef = useRef(true);
+  const deliveredValueRef = useRef(deliveryValue);
+  const liveValueRef = useRef(deliveryValue);
+  const [renderedValue, setRenderedValue] = useState(deliveryValue);
+  const deliveryChanged = deliveryValue !== deliveredValueRef.current;
+  if (deliveryChanged) {
+    deliveredValueRef.current = deliveryValue;
+    liveValueRef.current = deliveryValue;
+  }
+  const setComposerValue = useCallback(
+    (next: string) => {
+      liveValueRef.current = next;
+      setRenderedValue(next);
+      setDeliveryValue(next);
+    },
+    [setDeliveryValue],
+  );
+  const visibleValue = deliveryChanged ? deliveryValue : renderedValue;
+
+  useLayoutEffect(() => {
+    if (renderedValue !== liveValueRef.current) {
+      setRenderedValue(liveValueRef.current);
+    }
+  }, [deliveryValue, renderedValue]);
 
   useEffect(() => {
     mountedRef.current = true;
@@ -400,7 +493,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 =>
@@ -409,9 +501,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>) => {
@@ -426,11 +518,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);
@@ -468,7 +565,7 @@ export function useChatComposerController({
       applyComposerTextareaHeight(textarea, 220);
     });
   }, []);
-  useEffect(() => resizeInput(), [delivery.value, resizeInput]);
+  useEffect(() => resizeInput(), [resizeInput, visibleValue]);
   useEffect(
     () => () => {
       if (resizeInputRafRef.current !== null) {
@@ -505,11 +602,14 @@ export function useChatComposerController({
     commands,
     context: commandContext,
     handlers,
-    value: delivery.value,
-    setValue: delivery.setValue,
+    value: visibleValue,
+    setValue: setComposerValue,
   });
   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"
@@ -519,9 +619,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(
@@ -533,23 +635,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,
     ],
   );
 
@@ -564,17 +674,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(
@@ -597,7 +708,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(() => {
@@ -608,6 +722,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;
@@ -642,6 +762,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,
@@ -666,9 +792,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,
@@ -696,8 +825,8 @@ export function useChatComposerController({
     handlePaste,
     handleFileChange,
     focusInput: () => textareaRef.current?.focus(),
-    setValue: delivery.setValue,
-    value: delivery.value,
+    setValue: setComposerValue,
+    value: visibleValue,
   };
 }
 
@@ -909,8 +1038,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}
     />
   );
 }
@@ -928,6 +1060,26 @@ type OwnedInputProps =
   | "aria-keyshortcuts";
 export type ComposerInputProps = Omit<ComponentPropsWithoutRef<"textarea">, OwnedInputProps>;
 
+const EDITING_FOCUS_SELECTOR =
+  'input, textarea, select, [contenteditable="true"], [role="textbox"]';
+const POPUP_FOCUS_SELECTOR =
+  '[role="menu"], [role="menubar"], [role="listbox"], [role="dialog"], [role="alertdialog"]';
+
+/**
+ * Initial focus is a convenience, not authority to move focus the person has
+ * placed elsewhere. It yields to a field they started editing and to an open
+ * menu, listbox, or dialog that does not contain the composer: moving focus
+ * behind a non-modal popup dismisses it, and a modal surface owns focus until
+ * it closes.
+ */
+function focusBelongsElsewhere(textarea: HTMLTextAreaElement): boolean {
+  const active = textarea.ownerDocument.activeElement;
+  if (!active || active === textarea) return false;
+  if (active.closest(EDITING_FOCUS_SELECTOR)) return true;
+  const popup = active.closest(POPUP_FOCUS_SELECTOR);
+  return popup !== null && !popup.contains(textarea);
+}
+
 export const Input = forwardRef<HTMLTextAreaElement, ComposerInputProps>(function ComposerInput(
   { rows = 1, placeholder, className, "aria-label": ariaLabel, autoFocus = false, ...props },
   forwardedRef,
@@ -937,14 +1089,17 @@ export const Input = forwardRef<HTMLTextAreaElement, ComposerInputProps>(functio
   const paletteOpen =
     controller.paletteEnabled && controller.paletteMounted && controller.palette.open;
 
-  // Native autoFocus loses when the textarea mounts disabled (create-session draft
-  // hydrate). Retry once the controller becomes interactive.
+  // Focus once the controller is interactive. The textarea can mount disabled
+  // (create-session draft hydrate), and the route can finish loading after the
+  // person has already moved on, so this deliberately does not use the native
+  // autoFocus attribute: that would take focus at mount without the guard.
   useEffect(() => {
     if (!autoFocus || controller.disabled || autoFocusedRef.current) return;
     const frame = window.requestAnimationFrame(() => {
       const textarea = controller.textareaRef.current;
       if (!textarea || textarea.disabled) return;
       autoFocusedRef.current = true;
+      if (focusBelongsElsewhere(textarea)) return;
       textarea.focus();
     });
     return () => window.cancelAnimationFrame(frame);
@@ -965,7 +1120,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={
@@ -1176,12 +1330,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"
@@ -1208,6 +1369,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
@@ -1221,10 +1438,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"
@@ -1239,10 +1461,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,
           )}
         >
@@ -1399,7 +1621,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}
         >
@@ -1599,20 +1821,88 @@ 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);
+
+  useEffect(() => () => previewRequest.current?.abort(), [onLoadPreview]);
+
+  async function openPreview(
+    attachment: UseFileAttachmentsResult["attachments"][number],
+    source: HTMLButtonElement,
+    canLoadPreview: boolean,
+  ) {
+    previewRequest.current?.abort();
+    const attachmentId = attachment.id;
+    const releaseSource = onRetainPreview(attachmentId);
+    let src = attachment.previewUrl;
+    if (!releaseSource && 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 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
@@ -1621,13 +1911,44 @@ 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 && (attachment.previewUrl || canLoadPreview) ? (
+              <button
+                type="button"
+                className={cn(
+                  "size-8 shrink-0 overflow-hidden rounded outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent",
+                  !attachment.previewUrl && "flex items-center justify-center disabled:cursor-wait",
+                )}
+                aria-label={messages.previewAttachment(attachment.name)}
+                aria-busy={previewLoading || undefined}
+                disabled={previewLoading}
+                onClick={(event) =>
+                  void openPreview(attachment, event.currentTarget, canLoadPreview)
+                }
+              >
+                {attachment.previewUrl ? (
+                  <img
+                    src={attachment.previewUrl}
+                    alt=""
+                    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 ? (
               <img
                 src={attachment.previewUrl}
                 alt=""
@@ -1640,7 +1961,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>
@@ -1651,12 +1976,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" />
@@ -1666,7 +1992,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" />