import type { ClientModel, EffectiveSessionControl } from "@opengeni/sdk";
import {
  AppWindowIcon,
  ArrowUpIcon,
  ChevronDownIcon,
  FileIcon,
  ImageIcon,
  LoaderCircleIcon,
  PaperclipIcon,
  PauseIcon,
  PlayIcon,
  RotateCwIcon,
  SquareIcon,
  XIcon,
} from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import {
  cloneElement,
  createContext,
  forwardRef,
  useCallback,
  useContext,
  useEffect,
  useId,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
  type ButtonHTMLAttributes,
  type ChangeEvent,
  type ClipboardEvent,
  type ComponentPropsWithoutRef,
  type DragEvent,
  type KeyboardEvent,
  type ReactElement,
  type ReactNode,
  type Ref,
  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";
import type { UseFileAttachmentsResult } from "../hooks/use-file-attachments";
import {
  useSlashCommands,
  type ConfirmState,
  type SlashCommandContext,
} from "../hooks/use-slash-commands";
import { cn } from "../lib/cn";
import {
  ComposerFooterSignalProvider,
  useComposerFooterSignalState,
} from "../lib/composer-footer-signals";
import {
  ComposerResponsiveContext,
  type ResponsiveBasis,
} from "../lib/composer-responsive-context";
import { composerSubmissionErrorMessage } from "../lib/format";
import { defaultChatComposerMessages, type ChatComposerMessages } from "../composer-messages";
import { singleSendText } from "../messages/single-send";
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";
import { TooltipProvider } from "./tooltip";
import { useOpenGeniText } from "../messages/runtime";

export { OPEN_WORKSTREAM_CONTROL_EVENT };
export type { ResponsiveBasis } from "../lib/composer-responsive-context";

function ComposerTip({
  tip,
  children,
}: {
  tip: string;
  children: ReactElement<{ title?: string }>;
}) {
  if (!tip) return children;
  return cloneElement(children, { title: tip });
}

export type ComposerDelivery = Pick<
  ComposerState,
  | "value"
  | "setValue"
  | "send"
  | "sendToQueue"
  | "busySend"
  | "singleSend"
  | "alternateSend"
  | "sendAlternate"
  | "steer"
  | "sending"
  | "canSend"
  | "error"
  | "clearError"
  | "annotations"
  | "requestAnnotationReview"
>;

export type ComposerDraftState = Pick<
  ComposerState,
  | "draftConflict"
  | "draftSaving"
  | "resolveDraftConflict"
  | "restoredResources"
  | "removeRestoredResource"
>;

export type ComposerControlState = Pick<
  ComposerState,
  "pause" | "pausing" | "resume" | "resumeScope" | "resuming"
>;

export type ComposerControlLinks = {
  workspaceHref?: string | undefined;
  sessionHref?: ((sessionId: string) => string) | undefined;
};

export { defaultChatComposerMessages } from "../composer-messages";
export type { ChatComposerMessages } from "../composer-messages";

export type ComposerSubmitMode = "queue" | "steer";
export type ComposerSubmitBlocker =
  | "disabled"
  | "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;
  control?: ComposerControlState | undefined;
  effectiveControl?: EffectiveSessionControl | null | undefined;
  queuedAheadCount?: number | undefined;
  canControlWorkspace?: boolean | undefined;
  controlLinks?: ComposerControlLinks | undefined;
  disabled?: boolean | undefined;
  attachments?: UseFileAttachmentsResult | undefined;
  commands?: readonly SlashCommand[] | undefined;
  commandContext?: SlashCommandContext | undefined;
  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;
};

/**
 * Off-document mirror for shrink/steady measure. Measuring with
 * `height: auto` on the live `rows={1}` textarea collapses it for a layout
 * frame, expands the flex timeline sibling, and yanks tip-follow — the
 * multi-line typing flicker that stops only once the box is capped.
 */
let composerHeightMirror: HTMLTextAreaElement | null = null;

function measureComposerContentHeight(textarea: HTMLTextAreaElement): number {
  if (typeof document === "undefined") {
    return textarea.scrollHeight;
  }
  const width = textarea.clientWidth;
  if (width <= 0) {
    return textarea.offsetHeight;
  }

  let mirror = composerHeightMirror;
  if (!mirror) {
    mirror = document.createElement("textarea");
    mirror.setAttribute("aria-hidden", "true");
    mirror.tabIndex = -1;
    mirror.rows = 1;
    mirror.style.cssText =
      "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;
  }

  const style = getComputedStyle(textarea);
  mirror.style.width = `${width}px`;
  mirror.style.boxSizing = style.boxSizing;
  mirror.style.font = style.font;
  mirror.style.fontSize = style.fontSize;
  mirror.style.fontFamily = style.fontFamily;
  mirror.style.fontWeight = style.fontWeight;
  mirror.style.fontStyle = style.fontStyle;
  mirror.style.letterSpacing = style.letterSpacing;
  mirror.style.lineHeight = style.lineHeight;
  mirror.style.textTransform = style.textTransform;
  mirror.style.paddingTop = style.paddingTop;
  mirror.style.paddingRight = style.paddingRight;
  mirror.style.paddingBottom = style.paddingBottom;
  mirror.style.paddingLeft = style.paddingLeft;
  mirror.style.borderTopWidth = style.borderTopWidth;
  mirror.style.borderRightWidth = style.borderRightWidth;
  mirror.style.borderBottomWidth = style.borderBottomWidth;
  mirror.style.borderLeftWidth = style.borderLeftWidth;
  mirror.style.borderStyle = style.borderStyle;
  mirror.style.whiteSpace = style.whiteSpace;
  mirror.style.wordBreak = style.wordBreak;
  mirror.style.overflowWrap = style.overflowWrap;
  mirror.value = textarea.value;

  if (!mirror.isConnected) {
    document.documentElement.appendChild(mirror);
  }
  return mirror.scrollHeight;
}

/**
 * Autosize a composer textarea up to `maxPx`. Never writes intermediate
 * `height: auto` / `0` on the live element — only the final pixel height.
 *
 * `measure` is injectable for unit tests; production always uses the off-DOM
 * mirror so shrink/steady never collapses the laid-out box.
 */
export function applyComposerTextareaHeight(
  textarea: HTMLTextAreaElement,
  maxPx: number = 220,
  measure: (el: HTMLTextAreaElement) => number = measureComposerContentHeight,
): void {
  const before = textarea.offsetHeight;
  // Overflow: content taller than the box — scrollHeight is the needed size.
  // Fit/shrink: content fits (or box is oversized) — measure off-DOM.
  const nextPx = Math.min(
    textarea.scrollHeight > textarea.clientHeight + 1 ? textarea.scrollHeight : measure(textarea),
    maxPx,
  );
  if (Math.abs(nextPx - before) < 1) {
    return;
  }
  textarea.style.height = `${nextPx}px`;
}

/**
 * Headless interaction layer for a chat composer. It is the single owner of
 * delivery guards, keyboard routing, command interception, drag/drop, focus,
 * confirmation, and feedback state used by both the preset and primitives.
 */
export function useChatComposerController({
  delivery,
  draft,
  control,
  effectiveControl,
  queuedAheadCount = 0,
  canControlWorkspace = false,
  controlLinks,
  disabled = false,
  attachments,
  commands: commandsProp,
  commandContext,
  onClearView,
  onPaste,
  messages: messageOverrides,
  runControl = "pause",
  running = false,
}: UseChatComposerControllerOptions) {
  const t = useOpenGeniText();
  const commands = useMemo(() => commandsProp ?? defaultCommands(t), [commandsProp, t]);
  const formatError = useErrorMessage();
  const singleSend = delivery.singleSend === true;
  const messages = useMemo(
    () => ({
      ...defaultChatComposerMessages(singleSend ? singleSendText(t) : t),
      ...messageOverrides,
    }),
    [messageOverrides, singleSend, t],
  );
  const id = useId();
  const rootRef = useRef<HTMLDivElement | null>(null);
  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
  const pauseButtonRef = useRef<HTMLButtonElement | null>(null);
  const fileInputRef = useRef<HTMLInputElement | null>(null);
  const listboxId = useId();
  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);
  // Which control's submission is in flight, so only that control shows it.
  const [submittingMode, setSubmittingMode] = useState<ComposerSubmitMode | null>(null);
  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;
    return () => {
      mountedRef.current = false;
    };
  }, []);

  useEffect(() => {
    const openControl = (event: Event) => {
      const requestedId =
        event instanceof CustomEvent &&
        isRecord(event.detail) &&
        typeof event.detail.composerId === "string"
          ? event.detail.composerId
          : null;
      if (requestedId && requestedId !== id) return;
      if (!requestedId) {
        const roots = document.querySelectorAll("[data-og-composer-id]");
        if (roots.length > 1 && !rootRef.current?.contains(document.activeElement)) return;
      }
      textareaRef.current?.scrollIntoView({ block: "end", behavior: "smooth" });
      if (paused) {
        setControlDetailsOpen(true);
        return;
      }
      window.requestAnimationFrame(() => pauseButtonRef.current?.focus());
    };
    document.addEventListener(OPEN_WORKSTREAM_CONTROL_EVENT, openControl);
    return () => document.removeEventListener(OPEN_WORKSTREAM_CONTROL_EVENT, openControl);
  }, [id, paused]);

  const blockedByAttachment = attachments?.hasUnresolved === true;

  const [dragging, setDragging] = useState(false);
  const dragCarriesFiles = (event: { dataTransfer: DataTransfer | null }): boolean =>
    event.dataTransfer !== null && [...event.dataTransfer.types].includes("Files");
  const handleDragOver = useCallback(
    (event: DragEvent<HTMLDivElement>) => {
      if (!attachments || !dragCarriesFiles(event)) return;
      event.preventDefault();
      if (!disabled) setDragging(true);
    },
    [attachments, disabled],
  );
  const handleDragLeave = useCallback(
    (event: DragEvent<HTMLDivElement>) => {
      if (!attachments) return;
      if (event.currentTarget.contains(event.relatedTarget as Node | null)) return;
      setDragging(false);
    },
    [attachments],
  );
  const handleDrop = useCallback(
    (event: DragEvent<HTMLDivElement>) => {
      if (!attachments || !dragCarriesFiles(event)) return;
      event.preventDefault();
      setDragging(false);
      if (!disabled && event.dataTransfer.files.length > 0)
        attachments.addFiles(event.dataTransfer.files);
    },
    [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);
  const pendingConfirm = useRef<((confirmed: boolean) => void) | null>(null);

  const settleConfirmation = useCallback((confirmed: boolean) => {
    const resolve = pendingConfirm.current;
    pendingConfirm.current = null;
    setConfirmState(null);
    resolve?.(confirmed);
  }, []);

  useEffect(
    () => () => {
      pendingConfirm.current?.(false);
      pendingConfirm.current = null;
    },
    [],
  );

  // Autosize without collapsing the composer to 0 on every keystroke. The old
  // height→0→content pattern briefly expanded the timeline scroller and yanked
  // tip-follow while streams were live (pin/unpin flicker when typing fast).
  const resizeInputRafRef = useRef<number | null>(null);
  const resizeInput = useCallback(() => {
    if (resizeInputRafRef.current !== null) {
      return;
    }
    resizeInputRafRef.current = requestAnimationFrame(() => {
      resizeInputRafRef.current = null;
      const textarea = textareaRef.current;
      if (!textarea) {
        return;
      }
      applyComposerTextareaHeight(textarea, 220);
    });
  }, []);
  useEffect(() => resizeInput(), [resizeInput, visibleValue]);
  useEffect(
    () => () => {
      if (resizeInputRafRef.current !== null) {
        cancelAnimationFrame(resizeInputRafRef.current);
        resizeInputRafRef.current = null;
      }
    },
    [],
  );

  const handlers = useMemo(
    () => ({
      notice: (next: Notice) => {
        setNotice(next);
        delivery.clearError();
      },
      openHelp: () => setHelpOpen(true),
      clearView: () => {
        if (!onClearView) return false;
        onClearView();
        return true;
      },
      confirm: (command: SlashCommand) =>
        new Promise<boolean>((resolve) => {
          pendingConfirm.current?.(false);
          pendingConfirm.current = resolve;
          setConfirmState({ command, resolve: settleConfirmation });
        }),
    }),
    [delivery, onClearView, settleConfirmation],
  );

  const palette = useSlashCommands({
    commands,
    context: commandContext,
    handlers,
    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"
    : blockedByAttachment
      ? "attachment"
      : delivery.sending || submitting
        ? "sending"
        : commandDraftBlocked
          ? "command"
          : annotationsIncomplete
            ? "annotations"
            : delivery.canSend
              ? null
              : "empty";
  const canSubmit = submitBlocker === null;

  const submit = useCallback(
    async (mode: ComposerSubmitMode): Promise<boolean> => {
      if (commandDraftBlocked) {
        setNotice({ tone: "error", message: messages.slashCommandBlocked });
        delivery.clearError();
        return false;
      }
      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) return false;
      submittingRef.current = true;
      setSubmitting(true);
      setSubmittingMode(mode);
      try {
        if (resumesOnSend) return await delivery.steer();
        // With one Send, Cmd/Ctrl+Enter is just Send.
        if (mode !== "steer" || singleSend) return await delivery.send();
        // Cmd/Ctrl+Enter and the button beside Send send the other way:
        // Steer when Send queues, queue when Send steers.
        return delivery.sendAlternate ? await delivery.sendAlternate() : await delivery.steer();
      } finally {
        submittingRef.current = false;
        if (mountedRef.current) {
          setSubmitting(false);
          setSubmittingMode(null);
        }
      }
    },
    [
      annotationsIncomplete,
      blockedByAttachment,
      commandDraftBlocked,
      delivery,
      disabled,
      messages.annotationNotesRequired,
      messages.slashCommandBlocked,
      resumesOnSend,
      singleSend,
    ],
  );

  const handleKeyDown = useCallback(
    (event: KeyboardEvent<HTMLTextAreaElement>) => {
      if (paletteEnabled && paletteMounted && palette.onKeyDown(event)) return;
      if (!shouldSubmitOnKey(event)) return;
      event.preventDefault();
      void submit(shouldSteerOnKey(event) ? "steer" : "queue");
    },
    [palette, paletteEnabled, paletteMounted, submit],
  );
  const handlePaste = useCallback(
    (event: ClipboardEvent<HTMLTextAreaElement>) => {
      if (disabled) return;
      onPaste?.(event);
      attachments?.addFromPaste(event);
    },
    [attachments, disabled, onPaste],
  );
  const handleFileChange = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
      if (!disabled && event.target.files) attachments?.addFiles(event.target.files);
      event.target.value = "";
    },
    [attachments, disabled],
  );

  const helpCommands = useMemo(
    () =>
      commands.filter((command) => {
        if (command.permission && commandContext) {
          const permissions = commandContext.permissions;
          return (
            permissions.includes(command.permission) || permissions.includes("workspace:admin")
          );
        }
        return true;
      }),
    [commandContext, commands],
  );
  const activeNotice =
    notice ??
    (delivery.error
      ? {
          tone: "error" as const,
          message: /control changed|paused while/i.test(delivery.error.message)
            ? messages.controlChangedError
            : formatError(
                delivery.error,
                composerSubmissionErrorMessage(t, delivery.error) || messages.sendFailedError,
              ),
        }
      : null);
  useEffect(() => {
    if (notice?.tone !== "ok") return;
    const timer = window.setTimeout(
      () => setNotice((current) => (current === notice ? null : current)),
      2400,
    );
    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;
    controlOperationRef.current = true;
    try {
      await operation();
      return true;
    } finally {
      controlOperationRef.current = false;
    }
  }, []);

  const pause = useCallback(
    async (reason?: string): Promise<boolean> => {
      if (!control || control.pausing || control.resuming) return false;
      return await runControlOperation(() => control.pause(reason));
    },
    [control, runControlOperation],
  );
  const resume = useCallback(
    async (reason?: string): Promise<boolean> => {
      if (!control || control.pausing || control.resuming) return false;
      return await runControlOperation(() => control.resume(reason));
    },
    [control, runControlOperation],
  );
  const resumeScope = useCallback(
    async (option: EffectiveSessionControl["resumeOptions"][number]): Promise<boolean> => {
      if (!control || control.pausing || control.resuming) return false;
      return await runControlOperation(() => control.resumeScope(option));
    },
    [control, runControlOperation],
  );

  const stop = useCallback(async (): Promise<boolean> => {
    const stopped = await pause();
    if (stopped && mountedRef.current) setStoppedHere(true);
    return stopped;
  }, [pause]);

  return {
    id,
    rootRef,
    textareaRef,
    pauseButtonRef,
    fileInputRef,
    listboxId,
    effectiveControl,
    queuedAheadCount,
    canControlWorkspace,
    controlLinks,
    disabled,
    attachments,
    messages,
    sending: delivery.sending || submitting,
    error: delivery.error,
    clearError: delivery.clearError,
    hasDraftState: draft !== undefined,
    draftConflict: draft?.draftConflict ?? null,
    draftSaving: draft?.draftSaving ?? false,
    restoredResources: draft?.restoredResources ?? [],
    removeRestoredResource: draft?.removeRestoredResource,
    resolveDraftConflict: draft?.resolveDraftConflict,
    hasControl: control !== undefined,
    runControl,
    running,
    pausing: control?.pausing ?? false,
    resuming: control?.resuming ?? false,
    pause,
    stop,
    resume,
    resumeScope,
    paused,
    controlDetailsOpen,
    setControlDetailsOpen,
    paletteMounted,
    setPaletteMounted,
    dragging,
    handleDragOver,
    handleDragLeave,
    handleDrop,
    palette,
    paletteEnabled,
    commandDraftBlocked,
    confirmState,
    settleConfirmation,
    helpOpen,
    setHelpOpen,
    helpCommands,
    activeNotice,
    canSubmit,
    submitBlocker,
    submit,
    busySend: delivery.busySend ?? "queue",
    singleSend,
    alternateSend: delivery.sendAlternate ? (delivery.alternateSend ?? null) : null,
    submittingMode,
    handleKeyDown,
    handlePaste,
    handleFileChange,
    focusInput: () => textareaRef.current?.focus(),
    setValue: setComposerValue,
    value: visibleValue,
  };
}

export type ChatComposerController = ReturnType<typeof useChatComposerController>;

const ComposerContext = createContext<ChatComposerController | null>(null);

function useComposerController(): ChatComposerController {
  const controller = useContext(ComposerContext);
  if (!controller) throw new Error("useChatComposer must be used inside <Composer.Root>");
  return controller;
}

export type ChatComposerContextValue = Pick<
  ChatComposerController,
  | "id"
  | "value"
  | "setValue"
  | "focusInput"
  | "submit"
  | "canSubmit"
  | "submitBlocker"
  | "disabled"
  | "sending"
  | "error"
  | "clearError"
  | "attachments"
  | "messages"
  | "effectiveControl"
  | "paused"
  | "hasControl"
  | "pausing"
  | "resuming"
  | "pause"
  | "resume"
  | "resumeScope"
>;

/** Read the nearest compound composer's safe accessory-facing state and actions. */
export function useChatComposer(): ChatComposerContextValue {
  return useComposerController();
}

function isRecord(value: unknown): value is Record<string, unknown> {
  return typeof value === "object" && value !== null;
}

export type ComposerRootProps = Omit<ComponentPropsWithoutRef<"div">, "children"> & {
  controller: ChatComposerController;
  children: ReactNode;
  /**
   * Measurement surface for responsive composer chrome. `viewport` preserves
   * the existing breakpoint behavior; `container` responds to this root's
   * inline size and also bounds composer-owned portalled menus to it.
   */
  responsiveBasis?: ResponsiveBasis | undefined;
};

export const Root = forwardRef<HTMLDivElement, ComposerRootProps>(function ComposerRoot(
  { controller, children, className, style, responsiveBasis = "viewport", ...props },
  forwardedRef,
) {
  const responsiveRootRef = useRef<HTMLDivElement | null>(null);
  const responsiveContext = useMemo(
    () => ({ responsiveBasis, rootRef: responsiveRootRef }),
    [responsiveBasis],
  );
  // Provider stays on Root so optional Radix tip surfaces (voice input) work.
  // Ordinary composer actions use native `title` via ComposerTip to avoid
  // pulling Popper into every tip hotspot.
  return (
    <ComposerContext.Provider value={controller}>
      <ComposerResponsiveContext.Provider value={responsiveContext}>
        <TooltipProvider delayDuration={300}>
          <div
            {...props}
            ref={mergeRefs(controller.rootRef, responsiveRootRef, forwardedRef)}
            data-og-composer-id={controller.id}
            data-og-responsive-basis={responsiveBasis}
            className={cn("og-root og-composer", className)}
            style={{ paddingBottom: "env(safe-area-inset-bottom)", ...style }}
          >
            {children}
            <ComposerAnnouncements />
          </div>
        </TooltipProvider>
      </ComposerResponsiveContext.Provider>
    </ComposerContext.Provider>
  );
});

export type ComposerFrameProps = ComponentPropsWithoutRef<"div">;

export const Frame = forwardRef<HTMLDivElement, ComposerFrameProps>(function ComposerFrame(
  { className, ...props },
  ref,
) {
  return <div {...props} ref={ref} className={cn("relative", className)} />;
});

export type ComposerCommandPaletteProps = { className?: string | undefined };

export function CommandPalette({ className }: ComposerCommandPaletteProps) {
  const controller = useComposerController();
  const setPaletteMounted = controller.setPaletteMounted;
  useEffect(() => {
    setPaletteMounted(true);
    return () => setPaletteMounted(false);
  }, [setPaletteMounted]);
  if (!controller.paletteEnabled) return null;
  return (
    <div className={className}>
      <CommandPaletteView
        open={controller.palette.open && controller.confirmState === null}
        items={controller.palette.items}
        highlight={controller.palette.highlight}
        onHighlight={controller.palette.setHighlight}
        onRun={(index) => {
          controller.palette.setHighlight(index);
          void controller.palette.runAt(index);
        }}
        argHintText={controller.palette.activeArgHint}
        listboxId={controller.listboxId}
        label={controller.messages.slashCommandsLabel}
        dangerLabel={controller.messages.danger}
      />
    </div>
  );
}

type OwnedSurfaceProps = "onDragOver" | "onDragLeave" | "onDrop";
export type ComposerSurfaceProps = Omit<ComponentPropsWithoutRef<"div">, OwnedSurfaceProps>;

export const Surface = forwardRef<HTMLDivElement, ComposerSurfaceProps>(function ComposerSurface(
  { className, children, ...props },
  ref,
) {
  const controller = useComposerController();
  return (
    <div
      data-og-composer-surface=""
      {...props}
      ref={ref}
      onDragOver={controller.attachments ? controller.handleDragOver : undefined}
      onDragLeave={controller.attachments ? controller.handleDragLeave : undefined}
      onDrop={controller.attachments ? controller.handleDrop : undefined}
      className={cn(
        "relative rounded-og-lg border border-og-border/90 bg-og-surface-1 shadow-og-sm",
        "transition-[border-color,box-shadow] duration-200 ease-og-out",
        "focus-within:border-og-accent/50 focus-within:shadow-og-glow",
        controller.dragging && "border-dashed border-og-accent",
        className,
      )}
    >
      {controller.dragging ? (
        <div
          aria-hidden
          className={cn(
            "pointer-events-none absolute inset-0 z-10 flex items-center justify-center",
            "rounded-og-lg bg-og-surface-1/85 text-og-menu font-medium text-og-accent backdrop-blur-[1px]",
          )}
        >
          <span className="inline-flex items-center gap-2">
            <PaperclipIcon className="size-4" />
            {controller.messages.dropFiles}
          </span>
        </div>
      ) : null}
      {children}
    </div>
  );
});

export function PausedState() {
  const controller = useComposerController();
  if (!controller.paused || !controller.effectiveControl || !controller.hasControl) return null;
  return (
    <WorkstreamPausedStrip
      control={controller.effectiveControl}
      queuedAheadCount={controller.queuedAheadCount}
      open={controller.controlDetailsOpen}
      busy={controller.resuming}
      sending={controller.sending}
      canControlWorkspace={controller.canControlWorkspace}
      controlLinks={controller.controlLinks}
      messages={controller.messages}
      onOpenChange={controller.setControlDetailsOpen}
      onResume={() => void controller.resume()}
      onResumeOption={(option) => void controller.resumeScope(option)}
    />
  );
}

export function RestoredResources() {
  const controller = useComposerController();
  if (controller.restoredResources.length === 0 || !controller.removeRestoredResource) return null;
  return (
    <RestoredResourceChips
      resources={controller.restoredResources}
      messages={controller.messages}
      onRemove={controller.removeRestoredResource}
    />
  );
}

export function Attachments() {
  const controller = useComposerController();
  if (!controller.attachments || controller.attachments.attachments.length === 0) return null;
  return (
    <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}
    />
  );
}

type OwnedInputProps =
  | "value"
  | "defaultValue"
  | "onChange"
  | "onKeyDown"
  | "onPaste"
  | "disabled"
  | "aria-autocomplete"
  | "aria-controls"
  | "aria-activedescendant"
  | "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,
) {
  const controller = useComposerController();
  const autoFocusedRef = useRef(false);
  const paletteOpen =
    controller.paletteEnabled && controller.paletteMounted && controller.palette.open;

  // 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}
      ref={mergeRefs(controller.textareaRef, forwardedRef)}
      rows={rows}
      value={controller.value}
      onChange={(event) => controller.setValue(event.target.value)}
      onKeyDown={controller.handleKeyDown}
      onPaste={controller.handlePaste}
      placeholder={
        controller.paused && !controller.disabled
          ? controller.messages.pausedPlaceholder
          : (placeholder ?? controller.messages.messagePlaceholder)
      }
      disabled={controller.disabled}
      aria-label={ariaLabel ?? controller.messages.inputLabel}
      aria-keyshortcuts="Enter Meta+Enter Control+Enter Shift+Enter"
      aria-autocomplete={
        controller.paletteEnabled && controller.paletteMounted ? "list" : undefined
      }
      aria-controls={paletteOpen ? controller.listboxId : undefined}
      aria-activedescendant={
        paletteOpen ? `${controller.listboxId}-option-${controller.palette.highlight}` : undefined
      }
      className={cn(
        "og-composer-input block w-full resize-none bg-transparent px-3.5 pt-3 pb-1 text-og-composer md:px-4 md:text-og-composer-wide pointer-coarse:min-h-11",
        "text-og-fg placeholder:text-og-fg-subtle focus:outline-hidden focus-visible:outline-hidden",
        "disabled:cursor-not-allowed disabled:opacity-60",
        className,
      )}
    />
  );
});

export function Confirmation() {
  const controller = useComposerController();
  const command = controller.confirmState?.command;
  if (!command || !controller.confirmState) return null;
  return (
    <ConfirmBar
      command={command}
      messages={controller.messages}
      onCancel={() => controller.settleConfirmation(false)}
      onConfirm={() => controller.settleConfirmation(true)}
      returnFocusRef={controller.textareaRef}
    />
  );
}

export type ComposerFooterProps = ComponentPropsWithoutRef<"div">;

export const Footer = forwardRef<HTMLDivElement, ComposerFooterProps>(function ComposerFooter(
  { className, children, ...props },
  ref,
) {
  const signals = useComposerFooterSignalState();
  return (
    <div
      {...props}
      {...signals.attributes}
      ref={ref}
      className={cn(
        "og-composer-footer flex items-end gap-1.5 px-2 pb-2 pt-0.5 sm:px-2.5 sm:pb-2.5",
        // Mobile: one control row — never wrap into a second toolbar line.
        "max-sm:flex-nowrap max-sm:items-center max-sm:gap-1",
        className,
      )}
    >
      <ComposerFooterSignalProvider value={signals.report}>{children}</ComposerFooterSignalProvider>
    </div>
  );
});

export type ComposerControlsProps = ComponentPropsWithoutRef<"span">;

export const Controls = forwardRef<HTMLSpanElement, ComposerControlsProps>(
  function ComposerControls({ className, ...props }, ref) {
    return (
      <span
        {...props}
        ref={ref}
        className={cn(
          "og-composer-controls flex min-w-0 flex-1 flex-wrap items-center gap-1.5",
          // 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,
        )}
      />
    );
  },
);

export type ComposerHintProps = ComponentPropsWithoutRef<"span">;

export const Hint = forwardRef<HTMLSpanElement, ComposerHintProps>(function ComposerHint(
  { className, children, ...props },
  ref,
) {
  const controller = useComposerController();
  return (
    <span
      {...props}
      ref={ref}
      className={cn(
        "og-composer-hint min-w-0 flex-1 px-1.5 text-og-xs text-og-fg-subtle max-sm:hidden",
        className,
      )}
    >
      {children ?? controller.messages.keyboardHint}
    </span>
  );
});

export type ComposerActionsProps = ComponentPropsWithoutRef<"span">;

export const Actions = forwardRef<HTMLSpanElement, ComposerActionsProps>(function ComposerActions(
  { className, ...props },
  ref,
) {
  return (
    <span
      {...props}
      ref={ref}
      className={cn(
        "og-composer-actions ml-auto flex shrink-0 items-center gap-1.5",
        "max-sm:flex-nowrap max-sm:gap-0.5",
        className,
      )}
    />
  );
});

type OwnedButtonProps = "type" | "onClick" | "disabled";
export type ComposerAttachButtonProps = Omit<
  ButtonHTMLAttributes<HTMLButtonElement>,
  OwnedButtonProps
> & {
  accept?: string | undefined;
  multiple?: boolean | undefined;
};

export const AttachButton = forwardRef<HTMLButtonElement, ComposerAttachButtonProps>(
  function ComposerAttachButton(
    { accept, multiple = true, className, "aria-label": ariaLabel, title, children, ...props },
    ref,
  ) {
    const controller = useComposerController();
    if (!controller.attachments) return null;
    const tip = title ?? controller.messages.attachFiles;
    return (
      <>
        <input
          ref={controller.fileInputRef}
          type="file"
          accept={accept}
          multiple={multiple}
          data-og-composer-attach
          className="hidden"
          onChange={controller.handleFileChange}
        />
        <ComposerTip tip={tip}>
          <button
            {...props}
            ref={ref}
            type="button"
            disabled={controller.disabled}
            onClick={() => controller.fileInputRef.current?.click()}
            aria-label={ariaLabel ?? tip}
            className={cn(
              "inline-flex size-8 items-center justify-center rounded-og-md",
              "text-og-fg-muted transition-colors duration-150 hover:bg-og-surface-2 hover:text-og-fg",
              "disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:size-11",
              className,
            )}
          >
            {children ?? <PaperclipIcon className="size-4" />}
          </button>
        </ComposerTip>
      </>
    );
  },
);

export type ComposerModelPickerProps = {
  models?: ClientModel[] | undefined;
  /** Catalog-backed rows preferred over legacy provider-grouped models. */
  rows?: PickerModelRow[] | undefined;
  value?: string | undefined;
  onChange?: ((modelId: string) => void) | undefined;
  label?: string | undefined;
  className?: string | undefined;
  /** Filter to Codex models for remote_v2-locked sessions. */
  codexOnly?: boolean | undefined;
};

export function ModelPicker({
  models,
  rows,
  value,
  onChange,
  label,
  className,
  codexOnly,
}: ComposerModelPickerProps) {
  const controller = useComposerController();
  return (
    <ModelPickerView
      models={models}
      rows={rows}
      value={value}
      onChange={(modelId) => onChange?.(modelId)}
      disabled={controller.disabled}
      label={label ?? controller.messages.modelLabel}
      className={className}
      codexOnly={codexOnly}
    />
  );
}

export type ComposerPauseButtonProps = Omit<
  ButtonHTMLAttributes<HTMLButtonElement>,
  OwnedButtonProps
>;

export const PauseButton = forwardRef<HTMLButtonElement, ComposerPauseButtonProps>(
  function ComposerPauseButton(
    { className, "aria-label": ariaLabel, title, children, ...props },
    ref,
  ) {
    const controller = useComposerController();
    if (
      controller.runControl !== "pause" ||
      !controller.effectiveControl ||
      controller.paused ||
      !controller.hasControl
    )
      return null;
    const busy = controller.pausing || controller.resuming;
    const tip = title ?? controller.messages.pauseTitle;
    // On a narrow composer, Send and its Queue/Steer choice need the room
    // while there is a draft, so Pause steps aside until it is sent or
    // cleared, as the phone app's single trailing control does.
    const yieldsToDraft = controller.submitBlocker !== "empty";
    return (
      <ComposerTip tip={tip}>
        <button
          data-analytics-action="pause"
          {...props}
          ref={mergeRefs(controller.pauseButtonRef, ref)}
          type="button"
          onClick={() => void controller.pause()}
          disabled={busy}
          aria-label={ariaLabel ?? controller.messages.pauseAriaLabel}
          className={cn(
            "inline-flex size-8 items-center justify-center rounded-og-md border border-og-border pointer-coarse:size-11",
            "bg-og-surface-2 text-og-fg-muted transition-colors duration-150",
            "hover:border-og-status-waiting/50 hover:text-og-status-waiting",
            "disabled:opacity-50",
            yieldsToDraft && "og-composer-pause-yields max-sm:hidden",
            className,
          )}
        >
          {children ??
            (busy ? (
              <LoaderCircleIcon className="size-3.5 animate-og-spin" />
            ) : (
              <PauseIcon className="size-3.5 fill-current" />
            ))}
        </button>
      </ComposerTip>
    );
  },
);

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 t = useOpenGeniText();
    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 ?? t("composer.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
>;

export type ComposerAlternateSendButtonProps = ComposerSendButtonProps;

/**
 * The other way to send while the agent works, beside Send: Steer when Send
 * queues, Queue when Send steers. It appears once there is something to send,
 * so touch users (who have no Cmd/Ctrl+Enter) always have both choices.
 * It is shown exactly when Send takes its busy path (`alternateSend`), and
 * keeps its word on every width; on narrow composers Pause steps aside while
 * there is a draft to make room, as on phones.
 */
export const AlternateSendButton = forwardRef<HTMLButtonElement, ComposerAlternateSendButtonProps>(
  function ComposerAlternateSendButton(
    { className, "aria-label": ariaLabel, title, children, ...props },
    ref,
  ) {
    const t = useOpenGeniText();
    const controller = useComposerController();
    if (
      controller.alternateSend === null ||
      controller.paused ||
      controller.submitBlocker === "empty" ||
      controller.submitBlocker === "disabled"
    )
      return null;
    const queues = controller.alternateSend === "queue";
    const label = queues
      ? (controller.messages.queueLabel ?? t("composerMessages.queue"))
      : (controller.messages.steerLabel ?? t("composerMessages.steer"));
    const tip =
      title ??
      (controller.submitBlocker === "annotations"
        ? controller.messages.annotationNotesRequired
        : queues
          ? (controller.messages.queueTitle ?? t("composerMessages.queueRunsAfterCurrentWork"))
          : (controller.messages.steerTitle ?? t("composerMessages.steerReadsItSoon")));
    const inFlight = controller.sending && controller.submittingMode === "steer";
    return (
      <ComposerTip tip={tip}>
        <button
          data-analytics-action={queues ? "queue" : "steer"}
          data-og-composer-alternate-send=""
          {...props}
          ref={ref}
          type="button"
          onClick={(event) => {
            // This button goes away once the draft is sent. Return keyboard
            // and screen-reader focus to the message box instead of the page.
            const hadFocus = event.currentTarget === document.activeElement;
            void controller.submit("steer").then((sent) => {
              if (sent && hadFocus) controller.focusInput();
            });
          }}
          disabled={!controller.canSubmit}
          aria-label={ariaLabel ?? label}
          aria-keyshortcuts="Meta+Enter Control+Enter"
          className={cn(
            "inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded-og-md px-2.5 pointer-coarse:h-11 pointer-coarse:px-3.5",
            "border border-og-border bg-og-surface-1 text-og-control font-medium text-og-fg",
            "transition-[background-color,transform,opacity] duration-150 ease-og-spring",
            "hover:bg-og-surface-2 active:scale-95",
            "disabled:cursor-not-allowed disabled:opacity-50",
            className,
          )}
        >
          {children ??
            (inFlight ? (
              <>
                <LoaderCircleIcon aria-hidden="true" className="size-3.5 animate-og-spin" />
                <span>{label}</span>
              </>
            ) : (
              label
            ))}
        </button>
      </ComposerTip>
    );
  },
);

export const SendButton = forwardRef<HTMLButtonElement, ComposerSendButtonProps>(
  function ComposerSendButton(
    { className, "aria-label": ariaLabel, title, children, ...props },
    ref,
  ) {
    const controller = useComposerController();
    const tip =
      title ??
      (controller.submitBlocker === "annotations"
        ? controller.messages.annotationNotesRequired
        : controller.paused
          ? controller.messages.sendAndResumeTitle
          : controller.busySend === "steer"
            ? (controller.messages.steerSendTitle ?? controller.messages.sendTitle)
            : controller.messages.sendTitle);
    return (
      <ComposerTip tip={tip}>
        <button
          data-analytics-action="send"
          {...props}
          ref={ref}
          type="button"
          onClick={(event) => {
            // Send is disabled once the draft is sent; keep keyboard and
            // screen-reader focus in the message box.
            const hadFocus = event.currentTarget === document.activeElement;
            void controller.submit("queue").then((sent) => {
              if (sent && hadFocus) controller.focusInput();
            });
          }}
          disabled={!controller.canSubmit}
          data-og-tip={tip}
          aria-label={
            ariaLabel ??
            (controller.paused
              ? controller.messages.sendAndResumeAriaLabel
              : controller.messages.sendMessageAriaLabel)
          }
          className={cn(
            "inline-flex size-8 items-center justify-center rounded-og-md pointer-coarse:size-11",
            "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-primary-hover active:scale-95",
            "disabled:cursor-not-allowed disabled:opacity-50",
            className,
          )}
        >
          {children ??
            (controller.sending && controller.submittingMode !== "steer" ? (
              <LoaderCircleIcon className="size-4 animate-og-spin" />
            ) : (
              <ArrowUpIcon className="size-4" />
            ))}
        </button>
      </ComposerTip>
    );
  },
);

export function Help() {
  const controller = useComposerController();
  return (
    <AnimatePresence>
      {controller.helpOpen ? (
        <HelpPanel
          commands={controller.helpCommands}
          messages={controller.messages}
          onClose={() => controller.setHelpOpen(false)}
        />
      ) : null}
    </AnimatePresence>
  );
}

export function Status() {
  const controller = useComposerController();
  return (
    <>
      <AnimatePresence>
        {controller.activeNotice ? (
          <motion.p
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            className={cn(
              "overflow-hidden px-1 pt-1.5 text-og-control",
              controller.activeNotice.tone === "ok" ? "text-og-fg-muted" : "text-og-status-failed",
            )}
          >
            {controller.activeNotice.message}
          </motion.p>
        ) : null}
      </AnimatePresence>
      {controller.draftConflict ? (
        <div className="mt-1.5 flex flex-wrap items-center gap-2 px-1 text-og-xs text-og-status-failed">
          <span className="min-w-0 flex-1">{controller.messages.draftConflict}</span>
          <button
            type="button"
            className="underline underline-offset-2"
            onClick={() => void controller.resolveDraftConflict?.("use_remote")}
          >
            {controller.messages.useOtherDraft}
          </button>
          <button
            type="button"
            className="font-medium underline underline-offset-2"
            onClick={() => void controller.resolveDraftConflict?.("keep_mine")}
          >
            {controller.messages.keepMine}
          </button>
        </div>
      ) : null}
    </>
  );
}

function ComposerAnnouncements() {
  const controller = useComposerController();
  return (
    <div className="sr-only">
      {controller.activeNotice ? (
        <p role={controller.activeNotice.tone === "error" ? "alert" : "status"}>
          {controller.activeNotice.message}
        </p>
      ) : null}
      {controller.draftConflict ? <p role="alert">{controller.messages.draftConflict}</p> : null}
    </div>
  );
}

function mergeRefs<T>(...refs: Array<Ref<T> | undefined>): (node: T | null) => void {
  return (node) => {
    for (const ref of refs) {
      if (typeof ref === "function") ref(node);
      else if (ref) ref.current = node;
    }
  };
}

function WorkstreamPausedStrip({
  control,
  queuedAheadCount,
  open,
  busy,
  sending,
  canControlWorkspace,
  controlLinks,
  messages,
  onOpenChange,
  onResume,
  onResumeOption,
}: {
  control: EffectiveSessionControl;
  queuedAheadCount: number;
  open: boolean;
  busy: boolean;
  sending: boolean;
  canControlWorkspace: boolean;
  controlLinks: ComposerControlLinks | undefined;
  messages: ChatComposerMessages;
  onOpenChange: (open: boolean) => void;
  onResume: () => void;
  onResumeOption: (option: EffectiveSessionControl["resumeOptions"][number]) => void;
}) {
  const blocker = control.primaryBlocker;
  const cause =
    blocker?.kind === "workspace"
      ? messages.workspacePaused
      : control.directState === "paused"
        ? messages.pausedHere
        : messages.pausedBy(blocker?.displayName ?? messages.parentBlocker);
  const primary = control.resumeOptions.find((option) => option.scope === "selected");
  const broaderOptions = control.resumeOptions.filter(
    (option) =>
      option !== primary &&
      option.scope !== "selected" &&
      (option.scope !== "workspace" || canControlWorkspace),
  );
  return (
    <div className="border-b border-og-status-waiting/25 bg-og-status-waiting/[0.07]">
      <div className="flex min-w-0 items-center gap-2 px-3 py-2">
        <PauseIcon className="size-3.5 shrink-0 text-og-status-waiting" />
        <button
          type="button"
          className="min-w-0 flex-1 text-left"
          onClick={() => onOpenChange(!open)}
          aria-expanded={open}
        >
          <span className="block truncate text-og-xs font-medium text-og-fg">{cause}</span>
          <span className="block truncate text-[11px] text-og-fg-muted">
            {queuedAheadCount > 0
              ? messages.queuedAhead(queuedAheadCount)
              : sending
                ? messages.resumingAndSending
                : messages.nextMessageResumes}
          </span>
        </button>
        <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-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}
        >
          {busy ? (
            <LoaderCircleIcon className="size-3.5 animate-og-spin" />
          ) : (
            <PlayIcon className="size-3.5 fill-current" />
          )}
          <span className="og-composer-resume-label-long hidden min-[400px]:inline">
            {messages.resumeThisWorkstream}
          </span>
          <span className="og-composer-resume-label-short min-[400px]:hidden">
            {messages.resumeShort}
          </span>
        </button>
        <button
          type="button"
          className="inline-flex size-8 shrink-0 items-center justify-center rounded-og-md text-og-fg-muted hover:bg-og-surface-2 pointer-coarse:size-11"
          onClick={() => onOpenChange(!open)}
          aria-label={open ? messages.hidePauseDetails : messages.showPauseDetails}
        >
          <ChevronDownIcon className={cn("size-3.5 transition-transform", open && "rotate-180")} />
        </button>
      </div>
      {open ? (
        <div className="border-t border-og-status-waiting/20 px-3 pb-3 pt-2">
          <ul className="grid gap-2" aria-label={messages.pauseReasonsLabel}>
            {control.blockers.map((entry, index) => (
              <li
                key={`${entry.kind}-${entry.sessionId ?? "workspace"}-${entry.revision}`}
                className="text-og-xs"
              >
                <span className="font-medium text-og-fg">
                  {index === 0 ? messages.pausedByLabel : messages.alsoPausedByLabel}
                </span>
                {blockerHref(entry, controlLinks) ? (
                  <a
                    href={blockerHref(entry, controlLinks)}
                    className="font-medium text-og-fg underline decoration-og-border-strong underline-offset-2 hover:text-og-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-ring/40"
                  >
                    {entry.displayName}
                  </a>
                ) : (
                  <span className="font-medium text-og-fg">{entry.displayName}</span>
                )}
                {entry.reason ? <span className="text-og-fg-muted"> · {entry.reason}</span> : null}
                {entry.actor ? <span className="text-og-fg-subtle"> · {entry.actor}</span> : null}
                {entry.changedAt ? (
                  <span className="text-og-fg-subtle">
                    {" "}
                    · {messages.formatRelativeTime(entry.changedAt)}
                  </span>
                ) : null}
              </li>
            ))}
          </ul>
          {broaderOptions.length > 0 ? (
            <div className="mt-2 flex flex-wrap gap-1.5">
              {broaderOptions.map((option) => (
                <ComposerTip
                  key={`${option.scope}-${option.targetId ?? "selected"}`}
                  tip={option.impactCopy}
                >
                  <button
                    type="button"
                    disabled={busy}
                    onClick={() => onResumeOption(option)}
                    className="rounded-og-md border border-og-border bg-og-surface-1 px-2 py-1 text-og-xs text-og-fg-muted hover:bg-og-surface-2 hover:text-og-fg pointer-coarse:min-h-10"
                  >
                    <span className="block font-medium">
                      {option.scope === "workspace"
                        ? messages.resumeWorkspace
                        : messages.resumeFromSession}
                    </span>
                    <span className="block text-[10px] text-og-fg-subtle">
                      {option.selectedStateAfter === "active"
                        ? messages.sessionCanRun
                        : messages.stillPausedBy(
                            option.remainingPrimaryBlocker?.displayName ?? messages.narrowerPause,
                          )}
                    </span>
                  </button>
                </ComposerTip>
              ))}
            </div>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}

function blockerHref(
  blocker: EffectiveSessionControl["blockers"][number],
  links: ComposerControlLinks | undefined,
): string | undefined {
  if (blocker.kind === "workspace") return links?.workspaceHref;
  return blocker.sessionId ? links?.sessionHref?.(blocker.sessionId) : undefined;
}

function RestoredResourceChips({
  resources,
  messages,
  onRemove,
}: {
  resources: ComposerState["restoredResources"];
  messages: ChatComposerMessages;
  onRemove: (index: number) => void;
}) {
  return (
    <div
      className="flex flex-wrap gap-1.5 border-b border-og-border px-3 py-2"
      aria-label={messages.restoredResourcesLabel}
    >
      {resources.map((resource, index) => (
        <span
          key={`${resource.kind}-${resource.kind === "file" ? resource.fileId : resource.uri}`}
          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-og-md border border-og-border bg-og-surface-2 px-2 py-1 text-og-xs text-og-fg-muted"
        >
          <FileIcon className="size-3 shrink-0" />
          <span className="truncate">
            {resource.kind === "file" ? messages.restoredFile(resource.fileId) : resource.uri}
          </span>
          <button
            type="button"
            className="shrink-0 hover:text-og-fg"
            onClick={() => onRemove(index)}
            aria-label={messages.removeRestoredResource(index)}
          >
            <XIcon className="size-3" />
          </button>
        </span>
      ))}
    </div>
  );
}

function ConfirmBar({
  command,
  messages,
  onCancel,
  onConfirm,
  returnFocusRef,
}: {
  command: SlashCommand;
  messages: ChatComposerMessages;
  onCancel: () => void;
  onConfirm: () => void;
  returnFocusRef?: RefObject<HTMLTextAreaElement | null> | undefined;
}) {
  const confirmRef = useRef<HTMLButtonElement | null>(null);
  const descriptionId = useId();
  useEffect(() => {
    const returnTo = returnFocusRef?.current ?? null;
    confirmRef.current?.focus();
    return () => returnTo?.focus();
  }, [returnFocusRef]);
  return (
    <div
      role="alertdialog"
      aria-label={messages.confirmCommand(command.name)}
      aria-describedby={descriptionId}
      data-testid="danger-confirm"
      onKeyDown={(event) => {
        if (event.key === "Escape") {
          event.preventDefault();
          event.stopPropagation();
          onCancel();
        }
      }}
      className="flex items-end justify-between gap-2 px-2.5 pb-2.5 pt-1"
    >
      <span id={descriptionId} className="min-w-0 flex-1 px-1.5 text-og-sm text-og-status-failed">
        {messages.confirmDescription(command)}
      </span>
      <span className="flex shrink-0 items-center gap-1.5">
        <button
          type="button"
          onClick={onCancel}
          className="rounded-og-md border border-og-border bg-og-surface-2 px-2.5 py-1 text-og-sm text-og-fg-muted hover:bg-og-surface-3 pointer-coarse:min-h-11"
        >
          {messages.cancel}
        </button>
        <button
          ref={confirmRef}
          type="button"
          onClick={onConfirm}
          className="rounded-og-md border border-og-status-failed/50 bg-og-status-failed/15 px-2.5 py-1 text-og-sm text-og-status-failed hover:bg-og-status-failed/25 pointer-coarse:min-h-11"
        >
          {messages.runCommand(command.name)}
        </button>
      </span>
    </div>
  );
}

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 t = useOpenGeniText();
  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 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 appShot = attachment.appShot;
        const statusText = previewFailed
          ? (messages.previewUnavailable ?? t("composer.previewUnavailable"))
          : attachment.status === "uploading"
            ? messages.uploading
            : failed
              ? attachment.error || messages.uploadFailed
              : appShot
                ? t("composer.appShotSummary", { app: appShot.app })
                : messages.formatBytes(attachment.sizeBytes);
        // An app-shot reads as the window it shows: its title first, then the
        // app, with a wider thumbnail so the window is recognizable.
        const displayName = appShot ? appShot.title.trim() || appShot.app : attachment.name;
        const thumbSize = appShot ? "h-10 w-16" : "size-8";
        return (
          <div
            key={attachment.id}
            data-app-shot={appShot ? "" : undefined}
            className={cn(
              "flex min-w-0 items-center gap-2 rounded-og-md border px-2 py-1.5 text-og-sm",
              // A captured window arrives from outside the page: let it settle in.
              appShot && "animate-og-enter",
              failed
                ? cn(
                    "border-og-status-failed/40 bg-og-status-failed/10",
                    secureContextRequired
                      ? "max-w-full items-start sm:max-w-[32rem]"
                      : appShot
                        ? "max-w-[320px]"
                        : "max-w-[240px]",
                  )
                : cn(
                    "border-og-border bg-og-surface-2",
                    appShot ? "max-w-[320px]" : "max-w-[240px]",
                  ),
            )}
          >
            {lightbox && (thumb || canLoadPreview) ? (
              <button
                type="button"
                className={cn(
                  thumbSize,
                  "shrink-0 overflow-hidden rounded outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent",
                  appShot && "border border-og-border bg-og-surface-1",
                  !thumb && "flex items-center justify-center disabled:cursor-wait",
                )}
                aria-label={messages.previewAttachment(displayName)}
                aria-busy={previewLoading || undefined}
                disabled={previewLoading}
                onClick={(event) =>
                  void openPreview(attachment, event.currentTarget, canLoadPreview)
                }
              >
                {thumb ? (
                  <img
                    src={thumb}
                    alt=""
                    onError={onThumbError}
                    className={cn(
                      "h-full w-full object-cover transition-opacity hover:opacity-80",
                      appShot && "object-top",
                    )}
                  />
                ) : previewLoading ? (
                  <LoaderCircleIcon className="size-4 animate-og-spin text-og-fg-muted" />
                ) : (
                  <ImageIcon className="size-4 text-og-fg-muted" />
                )}
              </button>
            ) : thumb ? (
              <img
                src={thumb}
                alt=""
                onError={onThumbError}
                className={cn(thumbSize, "shrink-0 rounded object-cover", appShot && "object-top")}
              />
            ) : attachment.contentType.startsWith("image/") ? (
              <ImageIcon className="size-4 shrink-0 text-og-fg-muted" />
            ) : (
              <FileIcon className="size-4 shrink-0 text-og-fg-muted" />
            )}
            <div className="min-w-0 flex-1">
              <div className="truncate font-medium text-og-fg">{displayName}</div>
              {appShot && !failed && !previewFailed && attachment.status !== "uploading" ? (
                <ComposerTip
                  tip={
                    appShot.text?.trim()
                      ? t("composer.appShotTextIncluded")
                      : t("composer.appShotNoText")
                  }
                >
                  <div className="flex min-w-0 items-center gap-1 text-og-xs text-og-fg-subtle">
                    <AppWindowIcon aria-hidden className="size-3 shrink-0" />
                    <span className="truncate">{statusText}</span>
                  </div>
                </ComposerTip>
              ) : 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>
              ) : (
                <div className="truncate text-og-xs text-og-fg-subtle">{statusText}</div>
              )}
            </div>
            {attachment.status === "uploading" ? (
              <LoaderCircleIcon className="size-3.5 shrink-0 animate-og-spin" />
            ) : null}
            {failed && !secureContextRequired && onRetry ? (
              <ComposerTip tip={messages.retryUpload}>
                <button
                  type="button"
                  onClick={() => onRetry(attachment.id)}
                  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(displayName)}
                >
                  <RotateCwIcon className="size-3.5" />
                </button>
              </ComposerTip>
            ) : null}
            <button
              type="button"
              onClick={() => onRemove(attachment.id)}
              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(displayName)}
            >
              <XIcon className="size-3.5" />
            </button>
          </div>
        );
      })}
    </div>
  );
}

function HelpPanel({
  commands,
  messages,
  onClose,
}: {
  commands: readonly SlashCommand[];
  messages: ChatComposerMessages;
  onClose: () => void;
}) {
  return (
    <motion.div
      initial={{ opacity: 0, height: 0 }}
      animate={{ opacity: 1, height: "auto" }}
      exit={{ opacity: 0, height: 0 }}
      className="mt-2 overflow-hidden rounded-og-lg border border-og-border bg-og-surface-2"
    >
      <div className="flex items-center justify-between border-b border-og-border px-3 py-1.5">
        <span className="text-og-sm font-medium text-og-fg">{messages.commands}</span>
        <button
          type="button"
          onClick={onClose}
          className="text-og-xs text-og-fg-subtle hover:text-og-fg"
        >
          {messages.close}
        </button>
      </div>
      <ul className="py-1">
        {commands.map((command) => {
          const hint = argHint(command.args);
          return (
            <li key={command.name} className="flex items-baseline gap-2 px-3 py-1">
              <span className="font-mono text-og-sm text-og-accent">
                /{command.name}
                {hint ? <span className="ml-1 text-og-fg-subtle">{hint}</span> : null}
              </span>
              <span className="text-og-sm text-og-fg-muted">{command.description}</span>
              {command.danger ? (
                <span className="ml-auto rounded-og-xs bg-og-status-failed/15 px-1 text-og-xs uppercase tracking-wide text-og-status-failed">
                  {messages.danger}
                </span>
              ) : null}
            </li>
          );
        })}
      </ul>
    </motion.div>
  );
}