import {
  At,
  ArrowUp,
  ArrowClockwise,
  CaretDown,
  Check,
  CheckCircle,
  Circle,
  Lightbulb,
  ListChecks,
  Microphone,
  MicrophoneSlash,
  Paperclip,
  PencilSimple,
  Stop,
  Trash,
  WarningCircle,
  X,
} from "@phosphor-icons/react";
import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
import { cn } from "../../lib/cn";
import {
  fieldNote,
  matchesAcceptedFileTypes,
  UploadPreviewChip,
  type FieldMeta,
  type UploadPreviewItem,
} from "./shared";

export type AIInputCapability = {
  description?: string;
  label: string;
  value: string;
};

export type AIInputSubmitPayload = {
  capability?: string;
  files: File[];
  model?: string;
  prompt: string;
  task?: string;
};

export type AIInputModel = {
  description?: string;
  label: string;
  value: string;
};

export type AIInputMention = {
  description?: string;
  icon?: ReactNode;
  id: string;
  kind?: string;
  label: string;
  trigger?: string;
  value?: string;
};

export type AIInputTask = {
  detail?: string;
  description?: string;
  icon?: ReactNode;
  id: string;
  label?: string;
  status?: "pending" | "in_progress" | "completed" | "failed";
  title?: string;
};

export type AIInputQueueItem = {
  capability?: string;
  id: string;
  label?: string;
  model?: string;
  prompt: string;
  status?: "queued" | "steering";
};

export type AIInputQuestionOption = {
  description?: string;
  id: string;
  label: string;
};

export type AIInputQuestionType = "single-choice" | "multi-choice" | "long-text" | "text";

export type AIInputQuestion = {
  allowCustomAnswer?: boolean;
  description?: string;
  id: string;
  otherLabel?: string;
  options?: AIInputQuestionOption[];
  prompt: string;
  type?: AIInputQuestionType;
};

export type AIInputQuestionAnswer = {
  questionId: string;
  selectedOptions?: AIInputQuestionOption[];
  type: AIInputQuestionType;
  value: string | string[];
};

export type AIInputCompactAction = {
  disabled?: boolean;
  label: string;
  leadingIcon?: ReactNode;
  onClick: () => void;
};

type SpeechRecognitionLike = {
  abort: () => void;
  onend: (() => void) | null;
  onerror: ((event: { error?: string }) => void) | null;
  onresult: ((event: { results: ArrayLike<ArrayLike<{ transcript: string }>> }) => void) | null;
  start: () => void;
};

export type AIInputProps = FieldMeta & {
  acceptedFileTypes?: string[];
  capabilities?: AIInputCapability[];
  className?: string;
  defaultCapability?: string;
  defaultValue?: string;
  disabled?: boolean;
  loading?: boolean;
  maxFiles?: number;
  maxRows?: number;
  mainTrailingAction?: AIInputCompactAction;
  showAttachments?: boolean;
  mentions?: AIInputMention[];
  models?: AIInputModel[];
  minRows?: number;
  model?: string;
  multiple?: boolean;
  onCapabilityChange?: (value: string) => void;
  onChange?: (value: string) => void;
  onMentionSearch?: (query: string, trigger: string) => AIInputMention[];
  onMentionSelect?: (mention: AIInputMention) => void;
  mentionHighlightClassName?: string;
  renderMention?: (mention: AIInputMention, token: string) => ReactNode;
  onModelChange?: (value: string) => void;
  onNarrationCompleted?: (text: string) => void;
  onTap?: () => void;
  onQueueItemRemove?: (item: AIInputQueueItem) => void;
  onQueueItemEdit?: (item: AIInputQueueItem) => void;
  onQueueItemSelect?: (item: AIInputQueueItem) => void;
  onQueueSubmit?: (payload: AIInputSubmitPayload) => void;
  onForceSteer?: (payload: AIInputSubmitPayload) => void;
  onQuestionAnswer?: (answer: AIInputQuestionAnswer, question: AIInputQuestion) => void;
  onQuestionDismiss?: (question: AIInputQuestion) => void;
  onStop?: () => void;
  onRetry?: () => void;
  queue?: AIInputQueueItem[];
  queueEnabled?: boolean;
  onSubmit?: (payload: AIInputSubmitPayload) => void;
  tasks?: AIInputTask[];
  defaultTask?: string;
  onTaskChange?: (value: string) => void;
  onVoiceClick?: () => void;
  onVoiceTranscript?: (transcript: string) => void;
  placeholder?: string;
  preTrailingActions?: AIInputCompactAction[];
  showCapabilitySelector?: boolean;
  showClear?: boolean;
  showMentions?: boolean;
  showModels?: boolean;
  showQueue?: boolean;
  showTaskProgress?: boolean;
  showTasks?: boolean;
  showVoiceButton?: boolean;
  question?: AIInputQuestion;
  showMarkdownPreview?: boolean;
  streamError?: string;
  voiceToText?: boolean;
  submitLabel?: string;
  value?: string;
  variant?: "default" | "compact";
};

function clampRows(value: number | undefined, fallback: number, minimum: number) {
  return Math.max(minimum, Math.round(value ?? fallback));
}

function isTaskProgressItem(task: AIInputTask) {
  return Boolean(task.title || task.detail || task.status);
}

function taskStatusLabel(status: AIInputTask["status"]) {
  if (status === "in_progress") return "In progress";
  if (status === "completed") return "Complete";
  if (status === "failed") return "Failed";
  return "Pending";
}

function TaskProgressList({
  tasks,
  expanded,
  onToggle,
}: {
  tasks: AIInputTask[];
  expanded: boolean;
  onToggle: () => void;
}) {
  if (tasks.length === 0) return null;

  const completeCount = tasks.filter((task) => task.status === "completed").length;
  return (
    <div className="mb-2 rounded-[var(--uhuru-radius-md)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-muted)] p-2" role="region" aria-label="Tasks">
      <button
        aria-expanded={expanded}
        className="flex w-full items-center justify-between gap-3 rounded-[var(--uhuru-radius-sm)] px-1 py-1 text-left text-xs text-[var(--uhuru-text-secondary)] hover:text-[var(--uhuru-text-primary)]"
        onClick={onToggle}
        type="button"
      >
        <span className="flex min-w-0 items-center gap-1.5">
          <ListChecks aria-hidden="true" size={15} />
          <span className="truncate font-medium">Tasks</span>
        </span>
        <span className="shrink-0 text-[var(--uhuru-text-tertiary)]">
          {completeCount}/{tasks.length} complete
        </span>
      </button>
      {expanded ? (
        <div className="mt-1 space-y-1 border-t border-[var(--uhuru-border-subtle)] pt-1" role="list">
          {tasks.map((task) => {
            const status = task.status ?? "pending";
            const title = task.title ?? task.label ?? task.id;
            const detail = task.detail ?? task.description;
            const StatusIcon = status === "completed" ? CheckCircle : status === "failed" ? WarningCircle : status === "in_progress" ? ArrowClockwise : Circle;
            return (
              <div className="flex min-w-0 items-start gap-2 rounded-[var(--uhuru-radius-sm)] px-1 py-1.5" key={task.id} role="listitem">
                <StatusIcon
                  aria-hidden="true"
                  className={cn(
                    "mt-0.5 shrink-0",
                    status === "completed" ? "text-[var(--uhuru-success-text)]" : status === "failed" ? "text-[var(--uhuru-error-text)]" : status === "in_progress" ? "animate-spin text-[var(--uhuru-accent-strong)]" : "text-[var(--uhuru-text-tertiary)]",
                  )}
                  size={15}
                  weight={status === "completed" ? "fill" : "regular"}
                />
                <span className="min-w-0 flex-1">
                  <span className="block truncate text-xs font-medium text-[var(--uhuru-text-primary)]">{title}</span>
                  {detail ? <span className="mt-0.5 block text-xs leading-4 text-[var(--uhuru-text-secondary)]">{detail}</span> : null}
                </span>
                <span className="shrink-0 text-[0.6875rem] text-[var(--uhuru-text-tertiary)]">{taskStatusLabel(status)}</span>
              </div>
            );
          })}
        </div>
      ) : null}
    </div>
  );
}

function renderHighlightedPrompt(
  value: string,
  mentions: AIInputMention[],
  className: string,
  renderMention?: (mention: AIInputMention, token: string) => ReactNode,
) {
  const tokens = /(^|\s)([@#/])([\w-]+)/g;
  const output: ReactNode[] = [];
  let cursor = 0;
  let match: RegExpExecArray | null;
  let index = 0;

  while ((match = tokens.exec(value))) {
    const prefix = match[1] ?? "";
    const trigger = match[2] ?? "";
    const token = match[3] ?? "";
    const mention = mentions.find((item) =>
      (item.trigger ?? trigger) === trigger &&
      (item.value ?? item.label).toLowerCase() === token.toLowerCase(),
    );
    if (!mention) continue;

    const start = match.index;
    output.push(value.slice(cursor, start));
    output.push(prefix);
    output.push(
      renderMention?.(mention, `${trigger}${token}`) ?? (
        <span className={cn("rounded bg-[var(--uhuru-accent-subtle)] text-[var(--uhuru-accent-strong)] [box-decoration-break:clone]", className)} key={`${mention.id}-${index}`}>
          {trigger}{token}
        </span>
      ),
    );
    cursor = start + match[0].length;
    index += 1;
  }

  output.push(value.slice(cursor));
  return output;
}

function renderInlinePrompt(value: string, mentions: AIInputMention[], mentionClassName: string, renderMention?: (mention: AIInputMention, token: string) => ReactNode) {
  const parts = value.split(/(\*\*[^*]+\*\*|`[^`]+`|[@#/][\w-]+)/g).filter(Boolean);
  return parts.map((part, index) => {
    if (part.startsWith("**") && part.endsWith("**")) return <strong key={index}>{part.slice(2, -2)}</strong>;
    if (part.startsWith("`") && part.endsWith("`")) return <code className="rounded bg-[var(--uhuru-surface-muted)] px-1" key={index}>{part.slice(1, -1)}</code>;
    const match = part.match(/^([@#/])([\w-]+)$/);
    const mention = match ? mentions.find((item) => (item.trigger ?? match[1]) === match[1] && (item.value ?? item.label).toLowerCase() === match[2].toLowerCase()) : undefined;
    if (mention && match) return renderMention?.(mention, part) ?? <span className={cn("rounded bg-[var(--uhuru-accent-subtle)] text-[var(--uhuru-accent-strong)]", mentionClassName)} key={`${mention.id}-${index}`}>{part}</span>;
    return part;
  });
}

export function AIInput({
  acceptedFileTypes,
  capabilities = [
    { label: "Ask", value: "ask" },
    { label: "Summarize", value: "summarize" },
    { label: "Extract", value: "extract" },
  ],
  className,
  defaultCapability,
  defaultValue,
  disabled,
  error,
  hint,
  label,
  loading,
  mainTrailingAction,
  maxFiles = 6,
  maxRows = 6,
  showAttachments = true,
  mentions = [],
  models = [
    { label: "Auto", value: "auto", description: "Uhuru chooses the best available model." },
    { label: "Fast", value: "fast", description: "Prioritizes speed for simple tasks." },
    { label: "Quality", value: "quality", description: "Prioritizes deeper reasoning and quality." },
  ],
  minRows = 2,
  model,
  multiple = true,
  onCapabilityChange,
  onChange,
  onMentionSearch,
  onMentionSelect,
  mentionHighlightClassName = "",
  renderMention,
  onModelChange,
  onNarrationCompleted,
  onTap,
  onQueueItemRemove,
  onQueueItemEdit,
  onQueueItemSelect,
  onQueueSubmit,
  onForceSteer,
  onQuestionAnswer,
  onQuestionDismiss,
  onRetry,
  onStop,
  onSubmit,
  queue = [],
  queueEnabled = false,
  tasks = [],
  defaultTask,
  onTaskChange,
  onVoiceClick,
  onVoiceTranscript,
  placeholder = "Ask Uhuru AI anything...",
  preTrailingActions = [],
  showCapabilitySelector = false,
  showClear = true,
  showMentions = true,
  showModels = true,
  showQueue = true,
  showTaskProgress = true,
  showTasks = true,
  showVoiceButton = false,
  question,
  showMarkdownPreview = false,
  streamError,
  submitLabel = "Send",
  value,
  variant = "default",
  voiceToText = false,
}: AIInputProps) {
  const generatedId = useId();
  const fieldId = `${generatedId}-prompt`;
  const hintId = hint ? `${generatedId}-hint` : undefined;
  const errorId = `${generatedId}-error`;
  const inputRef = useRef<HTMLInputElement>(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const highlightRef = useRef<HTMLDivElement>(null);
  const popoverRootRef = useRef<HTMLDivElement>(null);
  const filesRef = useRef<UploadPreviewItem[]>([]);
  const controlledValue = value;
  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
  const [dragActive, setDragActive] = useState(false);
  const [selectedCapability, setSelectedCapability] = useState(
    defaultCapability ?? capabilities[0]?.value ?? "",
  );
  const [selectedModel, setSelectedModel] = useState(model ?? "auto");
  const [selectedTask, setSelectedTask] = useState(defaultTask ?? tasks[0]?.id ?? "");
  const [capabilityOpen, setCapabilityOpen] = useState(false);
  const [modelOpen, setModelOpen] = useState(false);
  const [taskOpen, setTaskOpen] = useState(false);
  const [voiceActive, setVoiceActive] = useState(false);
  const [voiceError, setVoiceError] = useState<string | undefined>();
  const [dismissedError, setDismissedError] = useState<string | undefined>();
  const [dismissedStreamError, setDismissedStreamError] = useState<string | undefined>();
  const recognitionRef = useRef<SpeechRecognitionLike | null>(null);
  const [mentionMatches, setMentionMatches] = useState<AIInputMention[]>([]);
  const [mentionOpen, setMentionOpen] = useState(false);
  const [mentionIndex, setMentionIndex] = useState(0);
  const [mentionRange, setMentionRange] = useState<{ end: number; start: number; trigger: string } | null>(null);
  const [questionDraft, setQuestionDraft] = useState<string | string[]>("");
  const [questionOther, setQuestionOther] = useState(false);
  const [files, setFiles] = useState<UploadPreviewItem[]>([]);
  const [internalError, setInternalError] = useState<string | undefined>();
  const [taskProgressExpanded, setTaskProgressExpanded] = useState(true);
  const prompt = controlledValue ?? internalValue;
  const activeCapability = capabilities.find((item) => item.value === selectedCapability) ?? capabilities[0];
  const activeModel = models.find((item) => item.value === selectedModel) ?? models[0];
  const questionType = question?.type ?? (question?.options?.length ? "single-choice" : "text");
  const taskProgressTasks = tasks.filter(isTaskProgressItem);

  useEffect(() => {
    const handlePointerDown = (event: PointerEvent) => {
      if (!(event.target instanceof Node) || popoverRootRef.current?.contains(event.target)) return;
      setCapabilityOpen(false);
      setModelOpen(false);
      setTaskOpen(false);
      setMentionOpen(false);
    };

    document.addEventListener("pointerdown", handlePointerDown);
    return () => document.removeEventListener("pointerdown", handlePointerDown);
  }, []);

  useEffect(() => {
    setQuestionDraft(questionType === "multi-choice" ? [] : "");
    setQuestionOther(false);
  }, [question?.id, questionType]);

  const questionOptions = question
    ? [...(question.options ?? []), ...(question.allowCustomAnswer && (questionType === "single-choice" || questionType === "multi-choice") ? [{ id: "__other__", label: question.otherLabel ?? "Other" }] : [])]
    : [];
  const activeTask = tasks.find((item) => item.id === selectedTask) ?? tasks[0];
  const resolvedAccept = acceptedFileTypes?.join(",");
  const resolvedError = error ?? internalError;
  const resolvedStreamError = streamError ?? voiceError;
  const visibleError = resolvedError === dismissedError ? undefined : resolvedError;
  const visibleStreamError = resolvedStreamError === dismissedStreamError ? undefined : resolvedStreamError;
  const hasContent = Boolean(prompt.trim() || files.length);
  const canComposeWhileLoading = Boolean(loading && (queueEnabled || onQueueSubmit || onForceSteer));
  const resolvedMinRows = clampRows(minRows, 2, 1);
  const resolvedMaxRows = Math.max(resolvedMinRows, clampRows(maxRows, 6, resolvedMinRows));

  useEffect(() => {
    setDismissedError(undefined);
  }, [resolvedError]);

  useEffect(() => {
    setDismissedStreamError(undefined);
  }, [resolvedStreamError]);

  useEffect(() => {
    filesRef.current = files;
  }, [files]);

  useEffect(() => {
    return () => {
      filesRef.current.forEach((file) => {
        if (file.url) URL.revokeObjectURL(file.url);
      });
    };
  }, []);

  useEffect(() => () => recognitionRef.current?.abort(), []);

  useEffect(() => {
    const textarea = textareaRef.current;
    if (!textarea) return;

    textarea.style.height = "auto";
    const lineHeight = Number.parseFloat(getComputedStyle(textarea).lineHeight) || 24;
    const minHeight = lineHeight * resolvedMinRows;
    const maxHeight = lineHeight * resolvedMaxRows;
    textarea.style.height = `${Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight)}px`;
    textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden";
  }, [prompt, resolvedMaxRows, resolvedMinRows]);

  function updateMentionSuggestions(nextValue: string, caret: number) {
    const beforeCaret = nextValue.slice(0, caret);
    const match = beforeCaret.match(/(?:^|\s)([@#/])([\w-]*)$/);
    if (!match) {
      setMentionOpen(false);
      setMentionMatches([]);
      setMentionRange(null);
      return;
    }

    const trigger = match[1];
    const query = match[2].toLowerCase();
    const tokenStart = caret - match[0].length + (match[0].startsWith(" ") ? 1 : 0);
    const matches = (onMentionSearch
      ? onMentionSearch(query, trigger)
      : mentions.filter((mention) => {
          const triggerMatches = !mention.trigger || mention.trigger === trigger;
          return triggerMatches && `${mention.label} ${mention.kind ?? ""}`.toLowerCase().includes(query);
        })).slice(0, 8);

    setMentionMatches(matches);
    setMentionRange({ end: caret, start: tokenStart, trigger });
    setMentionIndex(0);
    setMentionOpen(matches.length > 0);
  }

  function updatePrompt(nextValue: string) {
    if (controlledValue === undefined) setInternalValue(nextValue);
    onChange?.(nextValue);
    if (internalError) setInternalError(undefined);
  }

  function startVoiceInput() {
    if (disabled || (loading && !canComposeWhileLoading)) return;
    if (voiceActive) {
      recognitionRef.current?.abort();
      setVoiceActive(false);
      return;
    }
    if (!voiceToText) {
      onVoiceClick?.();
      return;
    }

    const speechWindow = window as typeof window & { SpeechRecognition?: new () => SpeechRecognitionLike; webkitSpeechRecognition?: new () => SpeechRecognitionLike };
    const Recognition = speechWindow.SpeechRecognition ?? speechWindow.webkitSpeechRecognition;
    if (!Recognition) {
      setVoiceError("Voice input is not supported in this browser.");
      return;
    }

    const recognition = new Recognition();
    recognitionRef.current = recognition;
    recognition.onresult = (event) => {
      const transcript = Array.from(event.results).map((result) => result[0]?.transcript ?? "").join(" ").trim();
      if (transcript) {
        updatePrompt(`${prompt}${prompt.trim() ? " " : ""}${transcript}`);
        onVoiceTranscript?.(transcript);
        onNarrationCompleted?.(transcript);
      }
    };
    recognition.onerror = (event) => {
      setVoiceError(event.error ? `Voice input failed: ${event.error}.` : "Voice input failed. Try again.");
      setVoiceActive(false);
    };
    recognition.onend = () => setVoiceActive(false);
    setVoiceError(undefined);
    setVoiceActive(true);
    recognition.start();
  }

  function selectMention(mention: AIInputMention) {
    if (!mentionRange) return;
    const before = prompt.slice(0, mentionRange.start);
    const after = prompt.slice(mentionRange.end);
    const nextValue = `${before}${mentionRange.trigger}${mention.value ?? mention.label} ${after}`;
    updatePrompt(nextValue);
    setMentionOpen(false);
    setMentionMatches([]);
    onMentionSelect?.(mention);
    requestAnimationFrame(() => {
      const caret = before.length + mentionRange.trigger.length + (mention.value ?? mention.label).length + 1;
      textareaRef.current?.focus();
      textareaRef.current?.setSelectionRange(caret, caret);
    });
  }

  function selectTask(task: AIInputTask) {
    setSelectedTask(task.id);
    onTaskChange?.(task.id);
    setTaskOpen(false);
  }

  function handleFiles(fileList: FileList | null) {
    if (!fileList || fileList.length === 0 || disabled || (loading && !canComposeWhileLoading)) return;

    const nextFiles = Array.from(fileList);
    const normalizedFiles = multiple ? nextFiles : nextFiles.slice(0, 1);
    if (normalizedFiles.length > maxFiles) {
      setInternalError(`You can attach at most ${maxFiles} file${maxFiles === 1 ? "" : "s"}.`);
      return;
    }

    const invalidFile = normalizedFiles.find((file) => !matchesAcceptedFileTypes(file, acceptedFileTypes));
    if (invalidFile) {
      setInternalError(`"${invalidFile.name}" is not an allowed file type.`);
      return;
    }

    setFiles((current) => {
      const existing = multiple ? current : [];
      const incoming = normalizedFiles.map((file) => ({
        file,
        name: file.name,
        size: file.size,
        type: file.type,
        url: file.type.startsWith("image/") || file.type === "application/pdf"
          ? URL.createObjectURL(file)
          : undefined,
      }));
      if (existing.length + incoming.length > maxFiles) {
        incoming.forEach((file) => {
          if (file.url) URL.revokeObjectURL(file.url);
        });
        setInternalError(`You can attach at most ${maxFiles} file${maxFiles === 1 ? "" : "s"} total.`);
        return current;
      }
      if (!multiple) {
        current.forEach((file) => {
          if (file.url) URL.revokeObjectURL(file.url);
        });
      }
      return [...existing, ...incoming];
    });
    if (multiple) setInternalError(undefined);
  }

  function removeFile(index: number) {
    setFiles((current) => {
      const removed = current[index];
      if (removed?.url) URL.revokeObjectURL(removed.url);
      return current.filter((_, itemIndex) => itemIndex !== index);
    });
  }

  function clearComposer() {
    updatePrompt("");
    setFiles((current) => {
      current.forEach((file) => {
        if (file.url) URL.revokeObjectURL(file.url);
      });
      return [];
    });
    setInternalError(undefined);
  }

  function answerQuestion(value: string | string[], selectedOptions?: AIInputQuestionOption[]) {
    if (!question || !onQuestionAnswer) return;
    onQuestionAnswer({ questionId: question.id, selectedOptions, type: questionType, value }, question);
  }

  function selectQuestionOption(option: AIInputQuestionOption) {
    if (option.id === "__other__") {
      setQuestionOther(true);
      setQuestionDraft(questionType === "multi-choice" ? [] : "");
      return;
    }
    if (questionType === "multi-choice") {
      const current = Array.isArray(questionDraft) ? questionDraft : [];
      setQuestionDraft(current.includes(option.id) ? current.filter((id) => id !== option.id) : [...current, option.id]);
      return;
    }
    setQuestionDraft(option.id);
  }

  function submitQuestionDraft() {
    const value = questionDraft;
    if (Array.isArray(value) && value.length === 0 && !questionOther) return;
    if (typeof value === "string" && !value.trim()) return;
    const selectedOptions = questionType === "multi-choice" && Array.isArray(value)
      ? question?.options?.filter((option) => value.includes(option.id))
      : questionType === "single-choice" && typeof value === "string"
        ? question?.options?.filter((option) => option.id === value)
        : undefined;
    answerQuestion(value, selectedOptions);
  }

  function handleSubmit() {
    if (disabled) return;

    const normalizedPrompt = prompt.trim();
    if (!normalizedPrompt && files.length === 0) {
      setInternalError("Add a prompt or attach at least one file.");
      return;
    }

    setInternalError(undefined);
    const payload = {
      capability: selectedCapability || undefined,
      files: files.map((file) => file.file).filter(Boolean) as File[],
      model: selectedModel || undefined,
      prompt: normalizedPrompt,
      task: selectedTask || undefined,
    };
    if (loading) {
      onQueueSubmit?.(payload);
      if (onQueueSubmit) clearComposer();
      return;
    }
    onSubmit?.(payload);
    clearComposer();
  }

  function forceSteer() {
    if (!onForceSteer || !hasContent) return;
    onForceSteer({
      capability: selectedCapability || undefined,
      files: files.map((file) => file.file).filter(Boolean) as File[],
      model: selectedModel || undefined,
      prompt: prompt.trim(),
      task: selectedTask || undefined,
    });
    clearComposer();
  }

  function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
    if (mentionOpen && mentionMatches.length > 0) {
      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
        event.preventDefault();
        setMentionIndex((current) => (event.key === "ArrowDown"
          ? (current + 1) % mentionMatches.length
          : (current - 1 + mentionMatches.length) % mentionMatches.length));
        return;
      }
      if (event.key === "Enter" && !event.shiftKey) {
        event.preventDefault();
        selectMention(mentionMatches[mentionIndex]);
        return;
      }
      if (event.key === "Escape") {
        event.preventDefault();
        setMentionOpen(false);
        return;
      }
    }
    if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return;
    event.preventDefault();
    handleSubmit();
  }

  function selectCapability(capability: AIInputCapability) {
    setSelectedCapability(capability.value);
    onCapabilityChange?.(capability.value);
    setCapabilityOpen(false);
  }

  function selectModel(nextModel: AIInputModel) {
    setSelectedModel(nextModel.value);
    onModelChange?.(nextModel.value);
    setModelOpen(false);
  }

  const compactInput = (
    <textarea
      aria-describedby={[visibleError ? errorId : hintId].filter(Boolean).join(" ") || undefined}
      aria-label={label ? undefined : "AI prompt"}
      className="min-h-10 max-h-32 min-w-0 flex-1 resize-none overflow-y-auto border-0 bg-transparent px-1 py-2 text-sm leading-6 text-[var(--uhuru-text-primary)] outline-none placeholder:text-[var(--uhuru-text-tertiary)]"
      disabled={disabled || (loading && !canComposeWhileLoading)}
      id={fieldId}
      onChange={(event) => updatePrompt(event.target.value)}
      onKeyDown={handleKeyDown}
      placeholder={dragActive ? "Drop files to add context." : placeholder}
      ref={textareaRef}
      rows={1}
      value={prompt}
    />
  );

  if (variant === "compact") {
    const compactActions = preTrailingActions.slice(0, 2);
    const compactIsTyping = Boolean(prompt.trim());
    const compactSendAction = {
      disabled: Boolean(loading && !canComposeWhileLoading),
      label: submitLabel,
      leadingIcon: <ArrowUp aria-hidden="true" size={18} weight="bold" />,
      onClick: handleSubmit,
    };
    return (
      <div aria-busy={loading} className={cn("flex w-full flex-col gap-2", className)} ref={popoverRootRef}>
        {label ? <label className="text-sm font-medium text-[var(--uhuru-text-primary)]" htmlFor={fieldId}>{label}</label> : null}
        {showTaskProgress && taskProgressTasks.length > 0 ? (
          <TaskProgressList
            expanded={taskProgressExpanded}
            onToggle={() => setTaskProgressExpanded((current) => !current)}
            tasks={taskProgressTasks}
          />
        ) : null}
        <form
          aria-label={label ?? "AI prompt"}
          className={cn(
            "relative flex min-h-14 w-full items-center gap-1 rounded-[var(--uhuru-radius-full)] border bg-[var(--uhuru-surface-default)] px-2 py-1.5 shadow-[var(--uhuru-shadow-sm)] transition-[border-radius,box-shadow]",
            compactIsTyping ? "rounded-[var(--uhuru-radius-lg)]" : "",
            visibleError
              ? "border-[var(--uhuru-error-border)] ring-1 ring-[var(--uhuru-error-border)]"
              : dragActive
                ? "border-[var(--uhuru-border-accent)] ring-1 ring-[var(--uhuru-border-accent)]"
                : "border-[var(--uhuru-border-default)]",
            "focus-within:border-[var(--uhuru-border-accent)] focus-within:ring-1 focus-within:ring-[var(--uhuru-border-accent)]",
            disabled ? "opacity-60" : "",
          )}
          onClick={onTap}
          onDragEnter={(event) => {
            event.preventDefault();
            if (!disabled && !loading) setDragActive(true);
          }}
          onDragLeave={(event) => {
            event.preventDefault();
            if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setDragActive(false);
          }}
          onDragOver={(event) => {
            event.preventDefault();
            if (!disabled && !loading) setDragActive(true);
          }}
          onDrop={(event) => {
            event.preventDefault();
            setDragActive(false);
            handleFiles(event.dataTransfer.files);
          }}
          onSubmit={(event) => {
            event.preventDefault();
            handleSubmit();
          }}
        >
          {showAttachments ? (
            <button
              aria-label="Attach files"
              className="grid h-10 w-10 shrink-0 place-items-center rounded-[var(--uhuru-radius-full)] text-[var(--uhuru-text-secondary)] transition-colors hover:bg-[var(--uhuru-surface-muted)] hover:text-[var(--uhuru-text-primary)]"
              disabled={disabled || (loading && !canComposeWhileLoading)}
              onClick={(event) => {
                event.stopPropagation();
                inputRef.current?.click();
              }}
              title={resolvedAccept ? `Attach files (${resolvedAccept})` : "Attach files"}
              type="button"
            >
              <Paperclip aria-hidden="true" size={20} weight="regular" />
            </button>
          ) : null}
          {question ? null : compactInput}
          <div className="flex shrink-0 items-center gap-1">
            {!compactIsTyping && compactActions.map((action) => (
              <button
                aria-label={action.label}
                className="inline-flex h-10 max-w-36 items-center justify-center gap-1.5 rounded-[var(--uhuru-radius-full)] px-2.5 text-sm font-medium text-[var(--uhuru-text-secondary)] transition-colors hover:bg-[var(--uhuru-surface-muted)] hover:text-[var(--uhuru-text-primary)] disabled:cursor-not-allowed disabled:opacity-50"
                disabled={disabled || action.disabled}
                key={action.label}
                onClick={(event) => {
                  event.stopPropagation();
                  action.onClick();
                }}
                title={action.label}
                type="button"
              >
                {action.leadingIcon ? <span aria-hidden="true" className="grid place-items-center">{action.leadingIcon}</span> : null}
                <span className="hidden sm:inline">{action.label}</span>
              </button>
            ))}
            {compactIsTyping ? (
              <button
                aria-label={compactSendAction.label}
                className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-[var(--uhuru-radius-full)] bg-[var(--uhuru-action-primary)] text-[var(--uhuru-text-inverse)] transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
                disabled={disabled || compactSendAction.disabled}
                onClick={(event) => {
                  event.stopPropagation();
                  compactSendAction.onClick();
                }}
                title={compactSendAction.label}
                type="button"
              >
                {compactSendAction.leadingIcon}
              </button>
            ) : mainTrailingAction ? (
              <button
                className="inline-flex h-10 max-w-44 items-center justify-center gap-2 rounded-[var(--uhuru-radius-full)] bg-[var(--uhuru-surface-muted)] px-3.5 text-sm font-medium text-[var(--uhuru-text-primary)] transition-colors hover:bg-[var(--uhuru-surface-elevated)] disabled:cursor-not-allowed disabled:opacity-50"
                disabled={disabled || mainTrailingAction.disabled}
                onClick={(event) => {
                  event.stopPropagation();
                  mainTrailingAction.onClick();
                }}
                type="button"
              >
                {mainTrailingAction.leadingIcon ? <span aria-hidden="true" className="grid place-items-center">{mainTrailingAction.leadingIcon}</span> : null}
                <span className="truncate">{mainTrailingAction.label}</span>
              </button>
            ) : null}
          </div>
          <input
            accept={resolvedAccept}
            className="sr-only"
            multiple={multiple}
            onChange={(event) => {
              handleFiles(event.target.files);
              event.target.value = "";
            }}
            ref={inputRef}
            type="file"
          />
        </form>
        {files.length > 0 ? (
          <div className="flex min-w-0 max-w-full flex-wrap gap-1.5 px-2">
            {files.map((file, index) => <UploadPreviewChip file={file} index={index} key={`${file.name}-${index}`} onRemove={removeFile} />)}
          </div>
        ) : null}
        {visibleError ? fieldNote(visibleError, undefined, undefined, errorId, () => setDismissedError(visibleError)) : null}
        {fieldNote(undefined, hint, hintId)}
      </div>
    );
  }

  return (
    <div
      aria-busy={loading}
      className={cn("flex w-full flex-col gap-2", className)}
      ref={popoverRootRef}
    >
      {label ? <label className="text-sm font-medium text-[var(--uhuru-text-primary)]" htmlFor={fieldId}>{label}</label> : null}
      <form
        aria-label={label ?? "AI prompt"}
          className={cn(
            "relative rounded-[min(var(--uhuru-radius-lg),1.125rem)] border bg-[var(--uhuru-surface-default)] p-2 shadow-[var(--uhuru-shadow-sm)] transition-colors",
            visibleError
            ? "border-[var(--uhuru-error-border)] ring-1 ring-[var(--uhuru-error-border)]"
            : dragActive
              ? "border-[var(--uhuru-border-accent)] ring-1 ring-[var(--uhuru-border-accent)]"
              : "border-[var(--uhuru-border-default)]",
          "focus-within:border-[var(--uhuru-border-accent)] focus-within:ring-1 focus-within:ring-[var(--uhuru-border-accent)]",
          disabled ? "opacity-60" : "",
        )}
        onDragEnter={(event) => {
          event.preventDefault();
          if (!disabled && !loading) setDragActive(true);
        }}
        onDragLeave={(event) => {
          event.preventDefault();
          if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setDragActive(false);
        }}
        onDragOver={(event) => {
          event.preventDefault();
          if (!disabled && !loading) setDragActive(true);
        }}
        onDrop={(event) => {
          event.preventDefault();
          setDragActive(false);
          handleFiles(event.dataTransfer.files);
        }}
        onSubmit={(event) => {
          event.preventDefault();
          handleSubmit();
        }}
      >
        {showTaskProgress && taskProgressTasks.length > 0 ? (
          <TaskProgressList
            expanded={taskProgressExpanded}
            onToggle={() => setTaskProgressExpanded((current) => !current)}
            tasks={taskProgressTasks}
          />
        ) : null}
        {showQueue && queueEnabled && queue.length > 0 ? (
          <div className="mb-1 space-y-1 border-b border-[var(--uhuru-border-subtle)] pb-2">
            <div className="flex items-center gap-1 px-1 text-[0.6875rem] font-medium uppercase tracking-[0.12em] text-[var(--uhuru-text-tertiary)]">
              <ListChecks size={14} />
              <span>Queued for steering</span>
            </div>
            {queue.map((item) => (
              <div className="flex min-w-0 items-center gap-2 rounded-[var(--uhuru-radius-sm)] bg-[var(--uhuru-surface-muted)] px-2 py-1.5 text-xs" key={item.id}>
                <button className="min-w-0 flex-1 truncate text-left text-[var(--uhuru-text-secondary)] hover:text-[var(--uhuru-text-primary)]" onClick={() => onQueueItemSelect?.(item)} title={item.prompt} type="button">
                  {item.label ?? item.prompt}
                </button>
                <span className="shrink-0 text-[var(--uhuru-text-tertiary)]">{item.status ?? "queued"}</span>
                <div className="flex shrink-0 items-center gap-0.5">
                  {onQueueItemEdit ? <button aria-label={`Edit queued item ${item.label ?? item.prompt}`} className="grid h-6 w-6 place-items-center rounded text-[var(--uhuru-text-tertiary)] hover:bg-[var(--uhuru-surface-default)] hover:text-[var(--uhuru-text-primary)]" onClick={() => onQueueItemEdit(item)} title="Edit queued item" type="button"><PencilSimple size={13} /></button> : null}
                  <button aria-label={`Remove queued item ${item.label ?? item.prompt}`} className="grid h-6 w-6 place-items-center rounded text-[var(--uhuru-text-tertiary)] hover:bg-[var(--uhuru-surface-default)] hover:text-[var(--uhuru-text-primary)]" onClick={() => onQueueItemRemove?.(item)} title="Remove queued item" type="button"><Trash size={14} /></button>
                </div>
              </div>
            ))}
          </div>
        ) : null}
        {visibleStreamError ? (
          <div className="mb-1 flex items-center gap-2 rounded-[var(--uhuru-radius-sm)] border border-[var(--uhuru-error-border)] bg-[var(--uhuru-error-bg)] px-2.5 py-2 text-xs text-[var(--uhuru-error-text)]" role="alert">
            <WarningCircle className="shrink-0" size={15} />
            <span className="min-w-0 flex-1">{visibleStreamError}</span>
            {onRetry ? <button className="inline-flex shrink-0 items-center gap-1 font-medium underline underline-offset-2" onClick={onRetry} type="button"><ArrowClockwise size={14} />Retry</button> : null}
            <button aria-label="Dismiss error" className="grid h-6 w-6 shrink-0 place-items-center rounded-[var(--uhuru-radius-sm)] hover:bg-[var(--uhuru-error-border)]/20" onClick={() => setDismissedStreamError(visibleStreamError)} title="Dismiss error" type="button"><X aria-hidden="true" size={14} weight="bold" /></button>
          </div>
        ) : null}
        {question ? (
          <div className="mb-2 rounded-[var(--uhuru-radius-md)] bg-[var(--uhuru-surface-muted)] p-3" role="group" aria-label="Question from assistant">
            <div className="flex items-start gap-2">
              <div className="min-w-0 flex-1">
                <p className="m-0 text-sm font-medium text-[var(--uhuru-text-primary)]">{question.prompt}</p>
                {question.description ? <p className="m-0 mt-1 text-xs text-[var(--uhuru-text-secondary)]">{question.description}</p> : null}
              </div>
              {onQuestionDismiss ? <button aria-label="Dismiss question" className="text-xs text-[var(--uhuru-text-tertiary)] hover:text-[var(--uhuru-text-primary)]" onClick={() => onQuestionDismiss(question)} type="button">Dismiss</button> : null}
            </div>
            {questionOptions.length ? <div className="mt-2 flex flex-wrap gap-1.5">{questionOptions.map((option) => {
              const selected = option.id === "__other__" ? questionOther : questionType === "multi-choice" ? Array.isArray(questionDraft) && questionDraft.includes(option.id) : questionDraft === option.id;
              return <button aria-pressed={selected} className={cn("inline-flex items-center gap-1.5 rounded-[var(--uhuru-radius-sm)] border px-2.5 py-1.5 text-xs transition-colors", selected ? "border-[var(--uhuru-border-accent)] bg-[var(--uhuru-accent-subtle)] text-[var(--uhuru-accent-strong)]" : "border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] text-[var(--uhuru-text-secondary)] hover:border-[var(--uhuru-border-accent)] hover:text-[var(--uhuru-text-primary)]")} key={option.id} onClick={() => selectQuestionOption(option)} type="button">{selected ? <CheckCircle aria-hidden="true" size={15} weight="fill" /> : <Circle aria-hidden="true" size={15} />}{option.label}</button>;
            })}</div> : null}
            {(questionType === "text" || questionType === "long-text" || questionOther) ? <textarea autoFocus={questionType === "long-text"} className="mt-2 min-h-9 w-full resize-y rounded-[var(--uhuru-radius-sm)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] px-2.5 py-2 text-sm outline-none focus:border-[var(--uhuru-border-accent)]" onChange={(event) => setQuestionDraft(event.target.value)} placeholder={questionType === "long-text" ? "Write your answer..." : "Type your answer..."} rows={questionType === "long-text" ? 4 : 1} value={typeof questionDraft === "string" ? questionDraft : ""} /> : null}
            {(questionType === "single-choice" || questionType === "multi-choice" || questionType === "long-text" || questionType === "text" || questionOther) ? <div className="mt-2 flex justify-end"><button className="rounded-[var(--uhuru-radius-sm)] bg-[var(--uhuru-action-primary)] px-3 py-1.5 text-xs font-medium text-[var(--uhuru-text-inverse)] disabled:cursor-not-allowed disabled:opacity-50" disabled={(Array.isArray(questionDraft) && questionDraft.length === 0 && !questionOther) || (typeof questionDraft === "string" && !questionDraft.trim())} onClick={submitQuestionDraft} type="button">Answer</button></div> : null}
          </div>
        ) : null}
        {!question ? <div className="relative">
          {prompt && (showMentions || showMarkdownPreview) ? (
            <div aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden whitespace-pre-wrap break-words px-1 py-1.5 text-sm leading-5 text-[var(--uhuru-text-primary)]" ref={highlightRef}>
              {showMarkdownPreview ? renderInlinePrompt(prompt, mentions, mentionHighlightClassName, renderMention) : renderHighlightedPrompt(prompt, mentions, mentionHighlightClassName, renderMention)}
            </div>
          ) : null}
          <textarea
            aria-describedby={[visibleError ? errorId : hintId].filter(Boolean).join(" ") || undefined}
            aria-label={label ? undefined : "AI prompt"}
            className={cn("relative block min-h-0 w-full resize-none border-0 bg-transparent px-1 py-1.5 text-sm leading-5 outline-none placeholder:text-[var(--uhuru-text-tertiary)]", prompt && (showMentions || showMarkdownPreview) ? "text-transparent caret-[var(--uhuru-text-primary)]" : "text-[var(--uhuru-text-primary)]")}
            disabled={disabled || (loading && !canComposeWhileLoading)}
            id={fieldId}
            onChange={(event) => {
              updatePrompt(event.target.value);
              if (showMentions) updateMentionSuggestions(event.target.value, event.target.selectionStart);
            }}
            onKeyDown={handleKeyDown}
            onScroll={(event) => {
              if (highlightRef.current) {
                highlightRef.current.scrollTop = event.currentTarget.scrollTop;
                highlightRef.current.scrollLeft = event.currentTarget.scrollLeft;
              }
            }}
            placeholder={dragActive ? "Drop files to add context." : placeholder}
            ref={textareaRef}
            rows={resolvedMinRows}
            value={prompt}
          />
        </div> : null}

        {showMentions && mentionOpen ? (
          <div className="absolute bottom-[calc(100%-4.5rem)] left-2 z-[85] w-[min(22rem,calc(100%-1rem))] overflow-hidden rounded-[var(--uhuru-radius-md)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] p-1 shadow-[var(--uhuru-shadow-lg)]" role="listbox">
            <div className="px-2 py-1 text-[0.6875rem] font-medium uppercase tracking-[0.12em] text-[var(--uhuru-text-tertiary)]">Mention context</div>
            {mentionMatches.map((mention, index) => (
              <button
                aria-selected={index === mentionIndex}
                className={cn("flex w-full items-start gap-2 rounded-[var(--uhuru-radius-sm)] px-2 py-2 text-left text-sm", index === mentionIndex ? "bg-[var(--uhuru-surface-muted)]" : "hover:bg-[var(--uhuru-surface-muted)]")}
                key={mention.id}
                onMouseDown={(event) => event.preventDefault()}
                onClick={() => selectMention(mention)}
                role="option"
                type="button"
              >
                <span className="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-[var(--uhuru-surface-muted)] text-[var(--uhuru-text-secondary)]">{mention.icon ?? <At size={14} />}</span>
                <span className="min-w-0">
                  <span className="block truncate text-[var(--uhuru-text-primary)]">{mention.label}</span>
                  {mention.description || mention.kind ? <span className="block truncate text-xs text-[var(--uhuru-text-tertiary)]">{mention.description ?? mention.kind}</span> : null}
                </span>
              </button>
            ))}
          </div>
        ) : null}

        {files.length > 0 ? (
          <div className="flex min-w-0 max-w-full flex-wrap gap-1.5 border-t border-[var(--uhuru-border-subtle)] px-1 pt-1.5">
            {files.map((file, index) => (
              <div key={`${file.name}-${index}`}>
                <UploadPreviewChip file={file} index={index} onRemove={removeFile} />
              </div>
            ))}
          </div>
        ) : null}

        <div className="mt-1 flex items-center justify-between gap-2 border-t border-[var(--uhuru-border-subtle)] pt-2.5">
          <div className="flex min-w-0 items-center gap-1">
            {showAttachments ? <button
              aria-label="Attach files"
              className="grid h-8 w-8 shrink-0 place-items-center rounded-[var(--uhuru-radius-sm)] text-[var(--uhuru-text-secondary)] transition-colors hover:bg-[var(--uhuru-surface-muted)] hover:text-[var(--uhuru-text-primary)]"
              disabled={disabled || (loading && !canComposeWhileLoading)}
              onClick={() => inputRef.current?.click()}
              title={resolvedAccept ? `Attach files (${resolvedAccept})` : "Attach files"}
              type="button"
            >
              <Paperclip aria-hidden="true" size={19} weight="regular" />
            </button> : null}
            {showCapabilitySelector && capabilities.length > 0 ? (
              <div className="relative">
                <button
                  aria-expanded={capabilityOpen}
                  aria-haspopup="menu"
                  className="inline-flex h-8 max-w-40 items-center gap-1 rounded-[var(--uhuru-radius-sm)] px-2 text-sm text-[var(--uhuru-text-secondary)] transition-colors hover:bg-[var(--uhuru-surface-muted)] hover:text-[var(--uhuru-text-primary)]"
                  onClick={() => {
                    setCapabilityOpen((current) => !current);
                    setModelOpen(false);
                  }}
                  type="button"
                >
                  <span className="truncate">{activeCapability?.label ?? "Ask"}</span>
                  <CaretDown aria-hidden="true" className="shrink-0" size={14} />
                </button>
                {capabilityOpen ? (
                  <div className="absolute bottom-[calc(100%+0.5rem)] left-0 z-[80] min-w-48 overflow-hidden rounded-[var(--uhuru-radius-md)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] p-1 shadow-[var(--uhuru-shadow-lg)]">
                    {capabilities.map((capability) => (
                      <button
                        className="flex w-full items-start gap-2 rounded-[var(--uhuru-radius-sm)] px-3 py-2 text-left text-sm text-[var(--uhuru-text-secondary)] hover:bg-[var(--uhuru-surface-muted)] hover:text-[var(--uhuru-text-primary)]"
                        key={capability.value}
                        onClick={() => selectCapability(capability)}
                        role="menuitem"
                        type="button"
                      >
                        <Check aria-hidden="true" className={cn("mt-0.5 shrink-0", capability.value === selectedCapability ? "opacity-100" : "opacity-0")} size={15} weight="bold" />
                        <span className="min-w-0">
                          <span className="block truncate">{capability.label}</span>
                          {capability.description ? <span className="mt-0.5 block text-xs text-[var(--uhuru-text-tertiary)]">{capability.description}</span> : null}
                        </span>
                      </button>
                    ))}
                  </div>
                ) : null}
              </div>
            ) : null}
            {showTasks && tasks.length > 0 ? (
              <div className="relative">
                <button
                  aria-expanded={taskOpen}
                  aria-haspopup="menu"
                  className="inline-flex h-8 max-w-40 items-center gap-1 rounded-[var(--uhuru-radius-sm)] px-2 text-sm text-[var(--uhuru-text-secondary)] transition-colors hover:bg-[var(--uhuru-surface-muted)] hover:text-[var(--uhuru-text-primary)]"
                  onClick={() => {
                    setTaskOpen((current) => !current);
                    setCapabilityOpen(false);
                    setModelOpen(false);
                  }}
                  type="button"
                >
                  <Lightbulb aria-hidden="true" size={15} />
                  <span className="truncate">{activeTask?.label ?? activeTask?.title ?? "Task"}</span>
                  <CaretDown aria-hidden="true" size={14} />
                </button>
                {taskOpen ? (
                  <div className="absolute bottom-[calc(100%+0.5rem)] left-0 z-[80] min-w-52 overflow-hidden rounded-[var(--uhuru-radius-md)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] p-1 shadow-[var(--uhuru-shadow-lg)]">
                    {tasks.map((task) => (
                      <button className="flex w-full items-start gap-2 rounded-[var(--uhuru-radius-sm)] px-3 py-2 text-left text-sm hover:bg-[var(--uhuru-surface-muted)]" key={task.id} onClick={() => selectTask(task)} type="button">
                        <Check className={cn("mt-0.5 shrink-0", task.id === selectedTask ? "opacity-100" : "opacity-0")} size={15} weight="bold" />
                        <span className="min-w-0"><span className="block truncate">{task.label ?? task.title ?? task.id}</span>{task.description ?? task.detail ? <span className="block text-xs text-[var(--uhuru-text-tertiary)]">{task.description ?? task.detail}</span> : null}</span>
                      </button>
                    ))}
                  </div>
                ) : null}
              </div>
            ) : null}
            {resolvedAccept ? <span className="hidden truncate text-xs text-[var(--uhuru-text-tertiary)] sm:inline">{resolvedAccept}</span> : null}
          </div>
          <div className="flex items-center gap-2">
            {loading && onForceSteer && hasContent ? (
              <button aria-label="Force steer response" className="inline-flex h-8 items-center gap-1 rounded-[var(--uhuru-radius-sm)] px-2 text-xs font-medium text-[var(--uhuru-text-secondary)] hover:bg-[var(--uhuru-surface-muted)] hover:text-[var(--uhuru-text-primary)]" onClick={forceSteer} title="Send this message immediately to steer the current response" type="button">Steer</button>
            ) : null}
            {loading && onQueueSubmit && hasContent ? (
              <button aria-label="Queue message" className="inline-flex h-8 items-center gap-1 rounded-[var(--uhuru-radius-sm)] px-2 text-xs font-medium text-[var(--uhuru-text-secondary)] hover:bg-[var(--uhuru-surface-muted)] hover:text-[var(--uhuru-text-primary)]" onClick={handleSubmit} title="Queue this message behind the current response" type="button">Queue</button>
            ) : null}
            {(showVoiceButton || voiceToText) ? (
              <button
                aria-label="Use voice input"
                aria-pressed={voiceActive}
                className={cn(
                  "grid h-8 w-8 place-items-center rounded-[var(--uhuru-radius-sm)] text-[var(--uhuru-text-secondary)] transition-colors hover:bg-[var(--uhuru-surface-muted)] hover:text-[var(--uhuru-text-primary)]",
                  voiceActive ? "bg-[var(--uhuru-accent-subtle)] text-[var(--uhuru-accent-strong)]" : "",
                )}
                disabled={disabled || (loading && !canComposeWhileLoading)}
                onClick={startVoiceInput}
                title={voiceActive ? "Listening..." : "Use voice input"}
                type="button"
              >
                {voiceActive ? <Microphone aria-hidden="true" className="animate-pulse text-[var(--uhuru-accent-strong)]" size={18} weight="fill" /> : visibleStreamError ? <MicrophoneSlash aria-hidden="true" size={18} /> : <Microphone aria-hidden="true" size={18} weight="regular" />}
              </button>
            ) : null}
            {showModels && models.length > 0 ? (
              <div className="relative hidden sm:block">
                <button
                  aria-expanded={modelOpen}
                  aria-haspopup="menu"
                  className="inline-flex h-8 max-w-44 items-center gap-1 rounded-[var(--uhuru-radius-sm)] px-2 text-sm text-[var(--uhuru-text-secondary)] transition-colors hover:bg-[var(--uhuru-surface-muted)] hover:text-[var(--uhuru-text-primary)]"
                  onClick={() => {
                    setModelOpen((current) => !current);
                    setCapabilityOpen(false);
                  }}
                  type="button"
                >
                  <span className="truncate">{activeModel?.label ?? "Auto"}</span>
                  <CaretDown aria-hidden="true" className="shrink-0" size={14} />
                </button>
                {modelOpen ? (
                  <div className="absolute bottom-[calc(100%+0.5rem)] right-0 z-[80] min-w-52 overflow-hidden rounded-[var(--uhuru-radius-md)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] p-1 shadow-[var(--uhuru-shadow-lg)]">
                    {models.map((availableModel) => (
                      <button
                        className="flex w-full items-start gap-2 rounded-[var(--uhuru-radius-sm)] px-3 py-2 text-left text-sm text-[var(--uhuru-text-secondary)] hover:bg-[var(--uhuru-surface-muted)] hover:text-[var(--uhuru-text-primary)]"
                        key={availableModel.value}
                        onClick={() => selectModel(availableModel)}
                        role="menuitem"
                        type="button"
                      >
                        <Check aria-hidden="true" className={cn("mt-0.5 shrink-0", availableModel.value === selectedModel ? "opacity-100" : "opacity-0")} size={15} weight="bold" />
                        <span className="min-w-0">
                          <span className="block truncate">{availableModel.label}</span>
                          {availableModel.description ? <span className="mt-0.5 block text-xs text-[var(--uhuru-text-tertiary)]">{availableModel.description}</span> : null}
                        </span>
                      </button>
                    ))}
                  </div>
                ) : null}
              </div>
            ) : null}
            {showClear && hasContent ? (
              <button
                aria-label="Clear prompt"
                className="inline-flex h-8 items-center gap-1 rounded-[var(--uhuru-radius-sm)] px-2 text-xs font-medium text-[var(--uhuru-text-tertiary)] transition-colors hover:bg-[var(--uhuru-surface-muted)] hover:text-[var(--uhuru-text-primary)]"
                disabled={disabled || (loading && !canComposeWhileLoading)}
                onClick={clearComposer}
                title="Clear prompt"
                type="button"
              >
                <X aria-hidden="true" size={14} />
                <span>Clear</span>
              </button>
            ) : null}
            <button
              aria-label={loading ? "Stop response" : submitLabel}
              className={cn(
                "grid h-8 w-8 place-items-center rounded-[var(--uhuru-radius-sm)] border transition-colors",
                loading
                  ? "border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-muted)] text-[var(--uhuru-text-primary)] hover:bg-[var(--uhuru-surface-default)]"
                  : "border-[var(--uhuru-action-primary)] bg-[var(--uhuru-action-primary)] text-[var(--uhuru-text-inverse)] hover:bg-[var(--uhuru-action-primary-hover)]",
              )}
              disabled={disabled || (!loading && !hasContent)}
              onClick={loading ? onStop : undefined}
              title={loading ? "Stop response" : submitLabel}
              type={loading ? "button" : "submit"}
            >
              {loading ? <Stop aria-hidden="true" size={16} weight="fill" /> : <ArrowUp aria-hidden="true" size={18} weight="bold" />}
            </button>
          </div>
        </div>

        {visibleError ? (
          <div className="mt-4">
            {fieldNote(visibleError, undefined, undefined, errorId, () => setDismissedError(visibleError))}
          </div>
        ) : null}

        <input
          accept={resolvedAccept}
          className="sr-only"
          multiple={multiple}
          onChange={(event) => {
            handleFiles(event.target.files);
            event.target.value = "";
          }}
          ref={inputRef}
          type="file"
        />
      </form>
      {fieldNote(undefined, hint, hintId)}
    </div>
  );
}