@hef2024/llmasaservice-ui 0.25.2 → 0.26.0

package/src/AIChatPanel.tsx

@@ -52,6 +52,41 @@ export interface BeforeSendPayload {
   messages: { role: string; content: string }[];
 }
 
+export type CompactionAction = 'none' | 'compacted' | 'fallback_window';
+
+export interface CompactionTokenUsage {
+  projectedBefore: number;
+  projectedAfter: number;
+  warnThreshold: number;
+  compactThreshold: number;
+  targetThreshold: number;
+}
+
+export interface CompactContextInput {
+  prompt: string;
+  conversationId: string | null;
+  agentId?: string | null;
+  service?: string | null;
+  messages: { role: string; content: string }[];
+  data: { key: string; data: string }[];
+  maxContextTokens: number;
+  totalContextTokens: number;
+  warnRatio: number;
+  compactRatio: number;
+  targetRatio: number;
+  preserveTurns: number;
+  projectedTokens: CompactionTokenUsage;
+}
+
+export interface CompactContextResult {
+  action: CompactionAction;
+  prompt: string;
+  messages: { role: string; content: string }[];
+  warning?: string | null;
+  tokenUsage?: Partial<CompactionTokenUsage> | null;
+  metadata?: Record<string, unknown> | null;
+}
+
 export type TraceContextMode = 'standard' | 'full';
 
 export interface LocalToolExecutorContext {
@@ -169,6 +204,8 @@ export interface AIChatPanelProps {
 
   // Callback invoked before each send() call
   onBeforeSend?: (payload: BeforeSendPayload) => Promise<void> | void;
+  compactContext?: (input: CompactContextInput) => Promise<CompactContextResult> | CompactContextResult;
+  compactionPreserveTurns?: number;
 
   // UI Customization Props (from ChatPanel)
   cssUrl?: string;
@@ -193,6 +230,7 @@ export interface AIChatPanelProps {
   customerEmailCaptureMode?: "HIDE" | "OPTIONAL" | "REQUIRED";
   customerEmailCapturePlaceholder?: string;
   toolStatusLabelFormatter?: ToolStatusLabelFormatter;
+  composerAgentModeControl?: ComposerAgentModeControl;
 }
 
 /**
@@ -207,8 +245,122 @@ export interface ContextSection {
   rawData?: string;
 }
 
+export interface ComposerAgentModeControl {
+  active?: boolean;
+  disabled?: boolean;
+  label?: string;
+  title?: string;
+  onActivate?: () => void;
+}
+
 export type ContextDataFormat = 'json' | 'toon' | 'markdown' | 'text';
 
+type UserInputOption = {
+  value: string;
+  label: string;
+  description?: string;
+};
+
+type UserInputQuestion = {
+  id: string;
+  header: string;
+  question: string;
+  required: boolean;
+  allowWriteIn: boolean;
+  writeInPlaceholder: string;
+  options: UserInputOption[];
+};
+
+type UserInputRequest = {
+  requestId: string;
+  title: string;
+  instructions: string;
+  submitLabel: string;
+  cancelLabel: string;
+  allowCancel: boolean;
+  questions: UserInputQuestion[];
+};
+
+type UserInputAnswer = {
+  id: string;
+  header: string;
+  question: string;
+  selectedOptionValue: string | null;
+  selectedOptionLabel: string | null;
+  writeIn: string | null;
+  answer: string;
+};
+
+type UserInputCompletionPayload = {
+  status: 'submitted' | 'cancelled';
+  requestId: string;
+  answers?: UserInputAnswer[];
+  cancelledBy?: 'user' | 'stop' | 'reset' | 'unmount';
+};
+
+const USER_INPUT_TOOL_NAMES = new Set(['request_user_input', 'ff_request_user_input']);
+const MAX_USER_INPUT_QUESTIONS = 5;
+const MAX_USER_INPUT_OPTIONS = 8;
+const MAX_USER_INPUT_WRITE_IN_CHARS = 1000;
+const DEFAULT_USER_INPUT_TITLE = 'Need your input';
+const DEFAULT_USER_INPUT_INSTRUCTIONS = 'Answer these quick questions to continue.';
+
+const DEFAULT_CONTEXT_WARN_RATIO = 0.7;
+const DEFAULT_CONTEXT_COMPACT_RATIO = 0.9;
+const DEFAULT_CONTEXT_TARGET_RATIO = 0.65;
+const DEFAULT_COMPACTION_PRESERVE_TURNS = 8;
+
+function toBoundedRatio(value: number, fallback: number): number {
+  if (!Number.isFinite(value)) return fallback;
+  if (value <= 0) return fallback;
+  if (value >= 1) return 1;
+  return value;
+}
+
+function estimateTokensFromText(text: string): number {
+  const normalized = typeof text === 'string' ? text : '';
+  if (!normalized) return 0;
+  return Math.ceil(normalized.length / 4);
+}
+
+function estimateTokensFromMessages(messages: Array<{ role: string; content: string }>): number {
+  if (!Array.isArray(messages) || messages.length === 0) return 0;
+  return messages.reduce((sum, message) => {
+    const role = typeof message?.role === 'string' ? message.role : '';
+    const content = typeof message?.content === 'string' ? message.content : '';
+    return sum + estimateTokensFromText(role) + estimateTokensFromText(content);
+  }, 0);
+}
+
+function estimateTokensFromData(data: Array<{ key: string; data: string }>): number {
+  if (!Array.isArray(data) || data.length === 0) return 0;
+  return data.reduce((sum, entry) => {
+    const key = typeof entry?.key === 'string' ? entry.key : '';
+    const value = typeof entry?.data === 'string' ? entry.data : '';
+    return sum + estimateTokensFromText(key) + estimateTokensFromText(value);
+  }, 0);
+}
+
+function formatTokenCount(tokens: number): string {
+  const safeTokens = Number.isFinite(tokens) ? Math.max(0, Math.floor(tokens)) : 0;
+  if (safeTokens >= 1000) {
+    return `${(safeTokens / 1000).toFixed(1)}K`;
+  }
+  return safeTokens.toString();
+}
+
+function buildFallbackWindowMessages(
+  messages: Array<{ role: string; content: string }>,
+  preserveTurns: number,
+): Array<{ role: string; content: string }> {
+  if (!Array.isArray(messages) || messages.length === 0) return [];
+  const keepMessageCount = Math.max(2, Math.floor(preserveTurns) * 2);
+  if (messages.length <= keepMessageCount) {
+    return messages;
+  }
+  return messages.slice(messages.length - keepMessageCount);
+}
+
 type ThinkingBlock = ResponseArtifactBlock;
 
 interface ToolRequestMatch {
@@ -342,6 +494,158 @@ const shouldPreserveBoundaryDroppedStreamText = (
 const isObjectRecord = (value: unknown): value is Record<string, unknown> =>
   !!value && typeof value === 'object' && !Array.isArray(value);
 
+const toTrimmedString = (value: unknown): string =>
+  typeof value === 'string' ? value.trim() : '';
+
+const toBooleanWithDefault = (value: unknown, fallback: boolean): boolean =>
+  typeof value === 'boolean' ? value : fallback;
+
+const parseMaybeJsonString = (value: unknown): unknown => {
+  if (typeof value !== 'string') return value;
+  const trimmed = value.trim();
+  if (!trimmed) return value;
+  if (!(trimmed.startsWith('{') || trimmed.startsWith('['))) return value;
+  try {
+    return JSON.parse(trimmed);
+  } catch (_error) {
+    return value;
+  }
+};
+
+const toArrayFromUnknown = (value: unknown): unknown[] => {
+  const parsed = parseMaybeJsonString(value);
+  return Array.isArray(parsed) ? parsed : [];
+};
+
+const toSlugValue = (value: string, fallback: string): string => {
+  const normalized = value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+  return normalized || fallback;
+};
+
+const normalizeUserInputOptionEntry = (
+  value: unknown,
+  optionIndex: number,
+  questionId: string,
+): UserInputOption | null => {
+  const normalizedValue = parseMaybeJsonString(value);
+  if (typeof normalizedValue === 'string') {
+    const label = normalizedValue.trim();
+    if (!label) return null;
+    return {
+      label,
+      value: toSlugValue(label, `${questionId}-option-${optionIndex + 1}`),
+      description: '',
+    };
+  }
+  if (!isObjectRecord(normalizedValue)) return null;
+  const label =
+    toTrimmedString(normalizedValue.label) ||
+    toTrimmedString(normalizedValue.title) ||
+    toTrimmedString(normalizedValue.value);
+  if (!label) return null;
+  const explicitValue = toTrimmedString(normalizedValue.value);
+  return {
+    label,
+    value: explicitValue || toSlugValue(label, `${questionId}-option-${optionIndex + 1}`),
+    description: toTrimmedString(normalizedValue.description),
+  };
+};
+
+const normalizeUserInputQuestionEntry = (
+  value: unknown,
+  questionIndex: number,
+): UserInputQuestion | null => {
+  const normalizedValue = parseMaybeJsonString(value);
+  if (!isObjectRecord(normalizedValue)) return null;
+  const fallbackId = `question_${questionIndex + 1}`;
+  const id = toSlugValue(
+    toTrimmedString(normalizedValue.id) || toTrimmedString(normalizedValue.key) || fallbackId,
+    fallbackId,
+  );
+  const header = toTrimmedString(normalizedValue.header) || `Question ${questionIndex + 1}`;
+  const question =
+    toTrimmedString(normalizedValue.question) ||
+    toTrimmedString(normalizedValue.prompt) ||
+    toTrimmedString(normalizedValue.text);
+  if (!question) return null;
+
+  const rawOptions = toArrayFromUnknown(normalizedValue.options);
+  const normalizedOptions = rawOptions
+    .map((entry, optionIndex) => normalizeUserInputOptionEntry(entry, optionIndex, id))
+    .filter((entry): entry is UserInputOption => Boolean(entry))
+    .slice(0, MAX_USER_INPUT_OPTIONS);
+  if (normalizedOptions.length === 0) {
+    return null;
+  }
+
+  const parsedWriteInConfig = parseMaybeJsonString(normalizedValue.writeIn);
+  const writeInConfig = isObjectRecord(parsedWriteInConfig) ? parsedWriteInConfig : null;
+  const allowWriteIn =
+    toBooleanWithDefault(normalizedValue.allowWriteIn, false) ||
+    toBooleanWithDefault(writeInConfig?.enabled, false);
+  const writeInPlaceholder =
+    toTrimmedString(normalizedValue.writeInPlaceholder) ||
+    toTrimmedString(writeInConfig?.placeholder) ||
+    'Add details';
+
+  return {
+    id,
+    header,
+    question,
+    required: toBooleanWithDefault(normalizedValue.required, true),
+    allowWriteIn,
+    writeInPlaceholder,
+    options: normalizedOptions,
+  };
+};
+
+const normalizeUserInputRequest = (
+  args: Record<string, unknown>,
+  callId: string,
+): UserInputRequest => {
+  const rawQuestions = toArrayFromUnknown(args.questions);
+  const fallbackQuestion =
+    toTrimmedString(args.question) || toTrimmedString(args.prompt) || toTrimmedString(args.text);
+  const fallbackOptions = toArrayFromUnknown(args.options);
+  const baseQuestions =
+    rawQuestions.length > 0
+      ? rawQuestions
+      : fallbackQuestion
+        ? [
+            {
+              id: 'question_1',
+              header: 'Question 1',
+              question: fallbackQuestion,
+              options: fallbackOptions,
+              allowWriteIn: toBooleanWithDefault(args.allowWriteIn, false),
+              writeInPlaceholder: toTrimmedString(args.writeInPlaceholder),
+            },
+          ]
+        : [];
+
+  const questions = baseQuestions
+    .map((entry, index) => normalizeUserInputQuestionEntry(entry, index))
+    .filter((entry): entry is UserInputQuestion => Boolean(entry))
+    .slice(0, MAX_USER_INPUT_QUESTIONS);
+
+  if (questions.length === 0) {
+    throw new Error('request_user_input requires at least one valid question with options.');
+  }
+
+  return {
+    requestId: toTrimmedString(args.requestId) || toTrimmedString(args.id) || callId,
+    title: toTrimmedString(args.title) || DEFAULT_USER_INPUT_TITLE,
+    instructions: toTrimmedString(args.instructions) || DEFAULT_USER_INPUT_INSTRUCTIONS,
+    submitLabel: toTrimmedString(args.submitLabel) || 'Submit',
+    cancelLabel: toTrimmedString(args.cancelLabel) || 'Cancel',
+    allowCancel: toBooleanWithDefault(args.allowCancel, true),
+    questions,
+  };
+};
+
 const stringifyToolArgs = (value: unknown): string => {
   if (typeof value === 'string') return value;
   try {
@@ -1408,6 +1712,8 @@ interface ChatInputProps {
   onSubmit: (text: string) => void;
   onQueueSubmit: (text: string) => void;
   onStop: () => void;
+  userInputRequest?: UserInputRequest | null;
+  onCompleteUserInputRequest?: (payload: UserInputCompletionPayload) => void;
   queuedPrompts?: string[];
   onClearQueuedPrompt: (index: number) => void;
   agentOptions: AgentOption[];
@@ -1424,6 +1730,7 @@ interface ChatInputProps {
   disabledSectionIds?: Set<string>;
   onToggleSection?: (sectionId: string, enabled: boolean) => void;
   onContextViewerToggle?: () => void;
+  composerAgentModeControl?: ComposerAgentModeControl;
 }
 
 const ChatInput = React.memo<ChatInputProps>(({
@@ -1432,6 +1739,8 @@ const ChatInput = React.memo<ChatInputProps>(({
   onSubmit,
   onQueueSubmit,
   onStop,
+  userInputRequest = null,
+  onCompleteUserInputRequest,
   queuedPrompts = [],
   onClearQueuedPrompt,
   agentOptions,
@@ -1446,6 +1755,7 @@ const ChatInput = React.memo<ChatInputProps>(({
   enableContextDetailView = false,
   disabledSectionIds = new Set(),
   onToggleSection,
+  composerAgentModeControl,
 }) => {
   const [inputValue, setInputValue] = useState('');
   const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -1455,6 +1765,65 @@ const ChatInput = React.memo<ChatInputProps>(({
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const contextPopoverRef = useRef<HTMLDivElement | null>(null);
+  const [userInputSelections, setUserInputSelections] = useState<Record<string, string>>({});
+  const [userInputWriteIns, setUserInputWriteIns] = useState<Record<string, string>>({});
+  const [userInputValidationError, setUserInputValidationError] = useState('');
+  const [userInputQuestionIndex, setUserInputQuestionIndex] = useState(0);
+  const [agentModeChipExpanded, setAgentModeChipExpanded] = useState(false);
+  const isAgentModeActionVisible = composerAgentModeControl !== undefined;
+  const isAgentModeActive = Boolean(composerAgentModeControl?.active);
+  const isAgentModeActionDisabled = Boolean(composerAgentModeControl?.disabled);
+  const agentModeLabel = String(composerAgentModeControl?.label || 'Agent').trim() || 'Agent';
+  const agentModeTitle =
+    String(composerAgentModeControl?.title || '').trim() ||
+    (isAgentModeActive ? 'Agent Mode active for this session' : 'Enable Agent Mode');
+
+  useEffect(() => {
+    if (isAgentModeActionVisible) return;
+    setAgentModeChipExpanded(false);
+  }, [isAgentModeActionVisible]);
+
+  useEffect(() => {
+    if (!isAgentModeActive) return;
+    setAgentModeChipExpanded(true);
+  }, [isAgentModeActive]);
+
+  const handleAgentModePillClick = useCallback(() => {
+    if (!isAgentModeActionVisible || isAgentModeActionDisabled) return;
+    if (isAgentModeActive) {
+      setAgentModeChipExpanded(true);
+      return;
+    }
+    setAgentModeChipExpanded(true);
+    if (typeof composerAgentModeControl?.onActivate === 'function') {
+      composerAgentModeControl.onActivate();
+    }
+  }, [
+    composerAgentModeControl,
+    isAgentModeActionDisabled,
+    isAgentModeActionVisible,
+    isAgentModeActive,
+  ]);
+
+  useEffect(() => {
+    if (!userInputRequest) {
+      setUserInputSelections({});
+      setUserInputWriteIns({});
+      setUserInputValidationError('');
+      setUserInputQuestionIndex(0);
+      return;
+    }
+    const nextSelections: Record<string, string> = {};
+    const nextWriteIns: Record<string, string> = {};
+    userInputRequest.questions.forEach((question) => {
+      nextSelections[question.id] = '';
+      nextWriteIns[question.id] = '';
+    });
+    setUserInputSelections(nextSelections);
+    setUserInputWriteIns(nextWriteIns);
+    setUserInputValidationError('');
+    setUserInputQuestionIndex(0);
+  }, [userInputRequest]);
 
   // Auto-resize textarea
   const autoResize = useCallback(() => {
@@ -1562,12 +1931,221 @@ const ChatInput = React.memo<ChatInputProps>(({
   const hasQueuedPrompts = normalizedQueuedPrompts.length > 0;
   const shouldQueueSubmission = isBusy || hasQueuedPrompts;
   const showStopAction = isBusy && !hasDraft;
+  const composerLockedByUserInput = Boolean(userInputRequest);
+  const totalUserInputQuestions = userInputRequest?.questions.length || 0;
+  const boundedUserInputQuestionIndex =
+    totalUserInputQuestions > 0
+      ? Math.min(Math.max(userInputQuestionIndex, 0), totalUserInputQuestions - 1)
+      : 0;
+  const activeUserInputQuestion =
+    totalUserInputQuestions > 0 ? userInputRequest?.questions[boundedUserInputQuestionIndex] || null : null;
+  const isFirstUserInputQuestion = boundedUserInputQuestionIndex <= 0;
+  const isLastUserInputQuestion = totalUserInputQuestions > 0 && boundedUserInputQuestionIndex >= totalUserInputQuestions - 1;
+
+  const getQuestionAnswerState = useCallback((question: UserInputQuestion) => {
+    const selectedValue = toTrimmedString(userInputSelections[question.id]);
+    const writeInRaw = toTrimmedString(userInputWriteIns[question.id]);
+    const writeIn = writeInRaw.slice(0, MAX_USER_INPUT_WRITE_IN_CHARS);
+    const selectedOption = question.options.find((option) => option.value === selectedValue) || null;
+    const hasAnswer = Boolean(selectedOption) || (question.allowWriteIn && writeIn.length > 0);
+    return {
+      selectedOption,
+      writeIn,
+      hasAnswer,
+    };
+  }, [userInputSelections, userInputWriteIns]);
+
+  const validateUserInputQuestion = useCallback((question: UserInputQuestion): boolean => {
+    const answerState = getQuestionAnswerState(question);
+    if (question.required && !answerState.hasAnswer) {
+      setUserInputValidationError(`Please answer "${question.header}".`);
+      return false;
+    }
+    return true;
+  }, [getQuestionAnswerState]);
+
+  const handleUserInputNext = useCallback(() => {
+    if (!activeUserInputQuestion || isLastUserInputQuestion) return;
+    if (!validateUserInputQuestion(activeUserInputQuestion)) return;
+    setUserInputValidationError('');
+    setUserInputQuestionIndex((prev) => Math.min(prev + 1, totalUserInputQuestions - 1));
+  }, [activeUserInputQuestion, isLastUserInputQuestion, totalUserInputQuestions, validateUserInputQuestion]);
+
+  const handleUserInputBack = useCallback(() => {
+    setUserInputValidationError('');
+    setUserInputQuestionIndex((prev) => Math.max(prev - 1, 0));
+  }, []);
+
+  const handleUserInputSubmit = useCallback(() => {
+    if (!userInputRequest || typeof onCompleteUserInputRequest !== 'function') {
+      return;
+    }
+
+    const answers: UserInputAnswer[] = [];
+    for (let questionIndex = 0; questionIndex < userInputRequest.questions.length; questionIndex += 1) {
+      const question = userInputRequest.questions[questionIndex]!;
+      const answerState = getQuestionAnswerState(question);
+      if (question.required && !answerState.hasAnswer) {
+        setUserInputQuestionIndex(questionIndex);
+        setUserInputValidationError(`Please answer "${question.header}".`);
+        return;
+      }
+
+      answers.push({
+        id: question.id,
+        header: question.header,
+        question: question.question,
+        selectedOptionValue: answerState.selectedOption?.value || null,
+        selectedOptionLabel: answerState.selectedOption?.label || null,
+        writeIn: answerState.writeIn || null,
+        answer: answerState.writeIn || answerState.selectedOption?.label || '',
+      });
+    }
+
+    setUserInputValidationError('');
+    onCompleteUserInputRequest({
+      status: 'submitted',
+      requestId: userInputRequest.requestId,
+      answers,
+    });
+  }, [getQuestionAnswerState, onCompleteUserInputRequest, userInputRequest]);
+
+  const handleUserInputCancel = useCallback(() => {
+    if (!userInputRequest || typeof onCompleteUserInputRequest !== 'function') {
+      return;
+    }
+    onCompleteUserInputRequest({
+      status: 'cancelled',
+      requestId: userInputRequest.requestId,
+      cancelledBy: 'user',
+    });
+  }, [onCompleteUserInputRequest, userInputRequest]);
 
   return (
     <div 
       className={`ai-chat-panel__input-container ${dropdownOpen ? 'ai-chat-panel__input-container--dropdown-open' : ''}`}
       ref={containerRef}
     >
+      {userInputRequest && (
+        <div className="ai-chat-user-input-popover" role="dialog" aria-live="polite" aria-label={userInputRequest.title}>
+          <div className="ai-chat-user-input-popover__header">
+            <div className="ai-chat-user-input-popover__title">{userInputRequest.title}</div>
+            <div className="ai-chat-user-input-popover__header-meta">
+              {totalUserInputQuestions > 1 && (
+                <span className="ai-chat-user-input-popover__progress">
+                  {boundedUserInputQuestionIndex + 1} of {totalUserInputQuestions}
+                </span>
+              )}
+              {userInputRequest.allowCancel && (
+                <button
+                  type="button"
+                  className="ai-chat-user-input-popover__cancel-inline"
+                  onClick={handleUserInputCancel}
+                >
+                  {userInputRequest.cancelLabel}
+                </button>
+              )}
+            </div>
+          </div>
+          {userInputRequest.instructions && (
+            <div className="ai-chat-user-input-popover__instructions">{userInputRequest.instructions}</div>
+          )}
+          {activeUserInputQuestion && (
+            <div className="ai-chat-user-input-popover__question">
+              <div className="ai-chat-user-input-popover__question-header">
+                <span className="ai-chat-user-input-popover__question-index">{boundedUserInputQuestionIndex + 1}</span>
+                <span className="ai-chat-user-input-popover__question-title">{activeUserInputQuestion.header}</span>
+              </div>
+              <div className="ai-chat-user-input-popover__question-text">{activeUserInputQuestion.question}</div>
+              <div className="ai-chat-user-input-popover__options">
+                {activeUserInputQuestion.options.map((option) => (
+                  <label key={`${activeUserInputQuestion.id}:${option.value}`} className="ai-chat-user-input-popover__option">
+                    <input
+                      type="radio"
+                      name={`user-input-${activeUserInputQuestion.id}`}
+                      value={option.value}
+                      checked={(userInputSelections[activeUserInputQuestion.id] || '') === option.value}
+                      onChange={() => {
+                        setUserInputValidationError('');
+                        setUserInputSelections((prev) => ({
+                          ...prev,
+                          [activeUserInputQuestion.id]: option.value,
+                        }));
+                      }}
+                    />
+                    <span className="ai-chat-user-input-popover__option-content">
+                      <span className="ai-chat-user-input-popover__option-label">{option.label}</span>
+                      {option.description ? (
+                        <span className="ai-chat-user-input-popover__option-description">{option.description}</span>
+                      ) : null}
+                    </span>
+                  </label>
+                ))}
+              </div>
+              {activeUserInputQuestion.allowWriteIn && (
+                <textarea
+                  className="ai-chat-user-input-popover__writein"
+                  placeholder={activeUserInputQuestion.writeInPlaceholder}
+                  value={userInputWriteIns[activeUserInputQuestion.id] || ''}
+                  onChange={(event) => {
+                    const nextValue = event.target.value.slice(0, MAX_USER_INPUT_WRITE_IN_CHARS);
+                    setUserInputValidationError('');
+                    setUserInputWriteIns((prev) => ({
+                      ...prev,
+                      [activeUserInputQuestion.id]: nextValue,
+                    }));
+                  }}
+                  rows={2}
+                />
+              )}
+            </div>
+          )}
+          {userInputValidationError ? (
+            <div className="ai-chat-user-input-popover__error">{userInputValidationError}</div>
+          ) : null}
+          <div className="ai-chat-user-input-popover__actions">
+            <div className="ai-chat-user-input-popover__actions-left">
+              {userInputRequest.allowCancel && (
+                <button
+                  type="button"
+                  className="ai-chat-user-input-popover__button ai-chat-user-input-popover__button--secondary"
+                  onClick={handleUserInputCancel}
+                >
+                  {userInputRequest.cancelLabel}
+                </button>
+              )}
+            </div>
+            <div className="ai-chat-user-input-popover__actions-right">
+              {!isFirstUserInputQuestion && (
+                <button
+                  type="button"
+                  className="ai-chat-user-input-popover__button ai-chat-user-input-popover__button--secondary"
+                  onClick={handleUserInputBack}
+                >
+                  Back
+                </button>
+              )}
+              {isLastUserInputQuestion ? (
+                <button
+                  type="button"
+                  className="ai-chat-user-input-popover__button ai-chat-user-input-popover__button--primary"
+                  onClick={handleUserInputSubmit}
+                >
+                  {userInputRequest.submitLabel}
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  className="ai-chat-user-input-popover__button ai-chat-user-input-popover__button--primary"
+                  onClick={handleUserInputNext}
+                >
+                  Next
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
       {hasQueuedPrompts && (
         <div className="ai-chat-queued-prompts">
           {normalizedQueuedPrompts.map((queuedPrompt, index) => (
@@ -1603,8 +2181,9 @@ const ChatInput = React.memo<ChatInputProps>(({
         <textarea
           ref={textareaRef}
           className="ai-chat-input"
-          placeholder={placeholder}
+          placeholder={composerLockedByUserInput ? 'Answer the question above to continue…' : placeholder}
           value={inputValue}
+          disabled={composerLockedByUserInput}
           onChange={(e) => {
             setInputValue(e.target.value);
             setTimeout(autoResize, 0);
@@ -1621,62 +2200,83 @@ const ChatInput = React.memo<ChatInputProps>(({
       
       {/* Footer row with agent selector and send button */}
       <div className="ai-chat-panel__input-footer">
-        {agentOptions.length > 0 ? (
-          <div className="ai-chat-agent-selector">
+        <div className="ai-chat-input-footer__left">
+          {agentOptions.length > 0 ? (
+            <div className="ai-chat-agent-selector">
+              <button
+                className="ai-chat-agent-selector__trigger"
+                onClick={() => setDropdownOpen(!dropdownOpen)}
+                disabled={agentsLoading}
+              >
+                {currentAgentAvatarUrl ? (
+                  <img
+                    src={currentAgentAvatarUrl}
+                    alt={currentAgentLabel || 'Agent'}
+                    className="ai-chat-agent-selector__avatar"
+                  />
+                ) : (
+                  <AgentIcon />
+                )}
+                <span className="ai-chat-agent-selector__label">
+                  {agentsLoading ? 'Loading...' : currentAgentLabel || 'Select agent'}
+                </span>
+                {dropdownOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
+              </button>
+            </div>
+          ) : null}
+          {isAgentModeActionVisible && (
             <button
-              className="ai-chat-agent-selector__trigger"
-              onClick={() => setDropdownOpen(!dropdownOpen)}
-              disabled={agentsLoading}
+              className={`ai-chat-agent-mode-trigger ${
+                agentModeChipExpanded ? 'ai-chat-agent-mode-trigger--expanded' : ''
+              } ${isAgentModeActive ? 'ai-chat-agent-mode-trigger--active' : ''}`}
+              onClick={handleAgentModePillClick}
+              type="button"
+              title={agentModeTitle}
+              aria-label={isAgentModeActive ? 'Agent active' : 'Enable Agent Mode'}
+              aria-pressed={isAgentModeActive}
+              disabled={isAgentModeActionDisabled}
             >
-              {currentAgentAvatarUrl ? (
-                <img
-                  src={currentAgentAvatarUrl}
-                  alt={currentAgentLabel || 'Agent'}
-                  className="ai-chat-agent-selector__avatar"
-                />
-              ) : (
+              <span className="ai-chat-agent-mode-trigger__icon" aria-hidden="true">
                 <AgentIcon />
-              )}
-              <span className="ai-chat-agent-selector__label">
-                {agentsLoading ? 'Loading...' : currentAgentLabel || 'Select agent'}
               </span>
-              {dropdownOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
+              <span className="ai-chat-agent-mode-trigger__label">{agentModeLabel}</span>
             </button>
-          </div>
-        ) : (
-          <div className="ai-chat-panel__input-footer-spacer" />
-        )}
+          )}
+          {agentOptions.length === 0 && !isAgentModeActionVisible ? (
+            <div className="ai-chat-panel__input-footer-spacer" />
+          ) : null}
+        </div>
 
-        {/* Context viewer pill - Cursor style */}
         {contextSections.length > 0 && (
           <div className="ai-chat-context-pill-wrapper">
-            <button
-              className={`ai-chat-context-pill ${contextViewerOpen ? 'ai-chat-context-pill--active' : ''} ${isOverLimit ? 'ai-chat-context-pill--warning' : ''}`}
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                console.log('[ContextViewer] Button clicked, current state:', contextViewerOpen);
-                setContextViewerOpen(!contextViewerOpen);
-                if (!contextViewerOpen) {
-                  setContextViewMode('summary');
-                  setExpandedSectionId(null);
-                } else {
-                  setExpandedSectionId(null);
-                }
-              }}
-              type="button"
-              title="View context"
-            >
-              <span className="ai-chat-context-pill__label">context: {contextSections.length} {contextSections.length === 1 ? 'section' : 'sections'}</span>
-            </button>
+            <div className="ai-chat-context-pill-anchor">
+                <button
+                  className={`ai-chat-context-pill ${contextViewerOpen ? 'ai-chat-context-pill--active' : ''} ${isOverLimit ? 'ai-chat-context-pill--warning' : ''}`}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    console.log('[ContextViewer] Button clicked, current state:', contextViewerOpen);
+                    setContextViewerOpen(!contextViewerOpen);
+                    if (!contextViewerOpen) {
+                      setContextViewMode('summary');
+                      setExpandedSectionId(null);
+                    } else {
+                      setExpandedSectionId(null);
+                    }
+                  }}
+                  type="button"
+                  title="View context"
+                >
+                  <span className="ai-chat-context-pill__label">context: {contextSections.length} {contextSections.length === 1 ? 'section' : 'sections'}</span>
+                </button>
 
-            {/* Context popover - positioned relative to pill wrapper */}
-            {contextViewerOpen && (
-              <div 
-                className={`ai-chat-context-popover ${contextViewMode === 'detail' ? 'ai-chat-context-popover--detail' : ''}`}
-                ref={contextPopoverRef}
-                onClick={(e) => e.stopPropagation()}
-              >
+                {/* Context popover - positioned relative to context pill */}
+                {contextViewerOpen && (
+                  <div 
+                    className={`ai-chat-context-popover ${contextViewMode === 'detail' ? 'ai-chat-context-popover--detail' : ''}`}
+                    ref={contextPopoverRef}
+                    onClick={(e) => e.stopPropagation()}
+                  >
                 {/* Summary view */}
                 {contextViewMode === 'summary' && (
                   <div className="ai-chat-context-popover__summary">
@@ -1834,16 +2434,27 @@ const ChatInput = React.memo<ChatInputProps>(({
                     </div>
                   </div>
                 )}
-              </div>
-            )}
+                  </div>
+                )}
+            </div>
           </div>
         )}
         
         <button
-          className={`ai-chat-send-button ${!showStopAction && !hasDraft ? 'ai-chat-send-button--disabled' : ''} ${showStopAction ? 'ai-chat-send-button--stop' : ''}`}
+          className={`ai-chat-send-button ${
+            !showStopAction && (!hasDraft || composerLockedByUserInput) ? 'ai-chat-send-button--disabled' : ''
+          } ${showStopAction ? 'ai-chat-send-button--stop' : ''}`}
           onClick={() => showStopAction ? onStop() : handleSubmit()}
-          disabled={!showStopAction && !hasDraft}
-          title={showStopAction ? 'Stop response' : shouldQueueSubmission ? 'Queue prompt' : 'Send prompt'}
+          disabled={(!showStopAction && !hasDraft) || (!showStopAction && composerLockedByUserInput)}
+          title={
+            showStopAction
+              ? 'Stop response'
+              : composerLockedByUserInput
+                ? 'Answer the question above to continue'
+                : shouldQueueSubmission
+                  ? 'Queue prompt'
+                  : 'Send prompt'
+          }
         >
           {showStopAction ? <StopIcon /> : <ArrowUpIcon />}
         </button>
@@ -1946,6 +2557,8 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   onToggleSection: propOnToggleSection,
   onConversationCreated,
   onBeforeSend,
+  compactContext,
+  compactionPreserveTurns = DEFAULT_COMPACTION_PRESERVE_TURNS,
   // UI Customization Props
   cssUrl,
   markdownClass,
@@ -1966,6 +2579,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   customerEmailCaptureMode = 'HIDE',
   customerEmailCapturePlaceholder = 'Please enter your email...',
   toolStatusLabelFormatter,
+  composerAgentModeControl,
 }) => {
   // ============================================================================
   // API URL
@@ -2000,6 +2614,10 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   const [copiedCallId, setCopiedCallId] = useState<string | null>(null);
   const [feedbackCallId, setFeedbackCallId] = useState<{ callId: string; type: 'up' | 'down' } | null>(null);
   const [error, setError] = useState<{ message: string; code?: string } | null>(null);
+  const [compactionNotice, setCompactionNotice] = useState<{
+    level: 'info' | 'warning' | 'success';
+    message: string;
+  } | null>(null);
   const lastProcessedErrorRef = useRef<string | null>(null);
 
   // Email & Save state
@@ -2031,6 +2649,9 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   const [activeToolCalls, setActiveToolCalls] = useState<
     Array<{ toolName: string; callId: string; args?: Record<string, unknown> }>
   >([]);
+  const [pendingUserInputRequest, setPendingUserInputRequest] = useState<UserInputRequest | null>(null);
+  const pendingUserInputRequestRef = useRef<UserInputRequest | null>(null);
+  const pendingUserInputResolverRef = useRef<((payload: UserInputCompletionPayload) => void) | null>(null);
   const normalizeToolName = useCallback((toolName: string): string => {
     return String(toolName ?? '').trim().toLowerCase();
   }, []);
@@ -2043,6 +2664,31 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     },
     [normalizeToolName],
   );
+  const completePendingUserInputRequest = useCallback((payload: UserInputCompletionPayload) => {
+    const resolver = pendingUserInputResolverRef.current;
+    pendingUserInputResolverRef.current = null;
+    pendingUserInputRequestRef.current = null;
+    setPendingUserInputRequest(null);
+    if (resolver) {
+      resolver(payload);
+    }
+  }, []);
+  useEffect(() => {
+    pendingUserInputRequestRef.current = pendingUserInputRequest;
+  }, [pendingUserInputRequest]);
+  useEffect(() => {
+    return () => {
+      const resolver = pendingUserInputResolverRef.current;
+      if (!resolver) return;
+      pendingUserInputResolverRef.current = null;
+      const pendingRequestId = pendingUserInputRequestRef.current?.requestId || 'request_user_input';
+      resolver({
+        status: 'cancelled',
+        requestId: pendingRequestId,
+        cancelledBy: 'unmount',
+      });
+    };
+  }, []);
   const alwaysApprovedToolsStorageKey = useMemo(() => {
     const customerId =
       (customer as any)?.customer_id ||
@@ -2864,6 +3510,51 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     turnLockRef.current = false;
   }, [hasInFlightTurnWork]);
 
+  const runRequestUserInputTool = useCallback(
+    async (toolCall: {
+      toolName: string;
+      callId: string;
+      args: Record<string, unknown>;
+    }): Promise<Record<string, unknown>> => {
+      const normalizedToolName = normalizeToolName(toolCall.toolName);
+      if (!USER_INPUT_TOOL_NAMES.has(normalizedToolName)) {
+        throw new Error(`Unsupported user input tool: ${toolCall.toolName}`);
+      }
+      if (pendingUserInputResolverRef.current || pendingUserInputRequestRef.current) {
+        throw new Error('A user input request is already pending. Wait for completion before requesting another.');
+      }
+
+      const request = normalizeUserInputRequest(
+        isObjectRecord(toolCall.args) ? toolCall.args : {},
+        toolCall.callId || toolCall.toolName,
+      );
+      pendingUserInputRequestRef.current = request;
+      setPendingUserInputRequest(request);
+
+      const completion = await new Promise<UserInputCompletionPayload>((resolve) => {
+        pendingUserInputResolverRef.current = resolve;
+      });
+
+      if (completion.status === 'cancelled') {
+        return {
+          status: 'cancelled',
+          requestId: request.requestId,
+          cancelledBy: completion.cancelledBy || 'user',
+          answers: [],
+        };
+      }
+
+      const answers = Array.isArray(completion.answers) ? completion.answers : [];
+      return {
+        status: 'ok',
+        requestId: request.requestId,
+        answers,
+        answeredCount: answers.length,
+      };
+    },
+    [normalizeToolName],
+  );
+
   const processGivenToolRequests = useCallback(
     async (requests: ToolRequestMatch[]) => {
       const dedupeToolRequests = (input: ToolRequestMatch[]): ToolRequestMatch[] => {
@@ -3223,6 +3914,33 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
               localToolExecutors && typeof localToolExecutors[toolCall.toolName] === 'function'
                 ? localToolExecutors[toolCall.toolName]
                 : null;
+            const normalizedToolName = normalizeToolName(toolCall.toolName);
+
+            if (USER_INPUT_TOOL_NAMES.has(normalizedToolName)) {
+              try {
+                const requestResult = await runRequestUserInputTool({
+                  toolName: toolCall.toolName,
+                  callId: toolCall.callId,
+                  args: toolCall.args,
+                });
+                return {
+                  tool_call_id: toolCall.callId,
+                  tool_name: toolCall.toolName,
+                  result: JSON.stringify(requestResult),
+                  isError: false,
+                };
+              } catch (error) {
+                return {
+                  tool_call_id: toolCall.callId,
+                  tool_name: toolCall.toolName,
+                  result:
+                    error instanceof Error
+                      ? error.message
+                      : `Unhandled error calling ${toolCall.toolName}`,
+                  isError: true,
+                };
+              }
+            }
 
             if (localExecutor) {
               try {
@@ -3607,6 +4325,8 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
       idle,
       stop,
       lastController,
+      normalizeToolName,
+      runRequestUserInputTool,
       waitForStreamIdle,
       releaseTurnLockIfSettled,
     ],
@@ -4168,6 +4888,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     
     // Clear any previous errors
     setError(null);
+    setCompactionNotice(null);
     
     // Reset scroll tracking for new message - enable auto-scroll
     setUserHasScrolled(false);
@@ -4209,189 +4930,279 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     
     // Now proceed with API calls in the background (conversation creation + LLM call)
     // Ensure conversation exists before sending (matches ChatPanel)
-    console.log('AIChatPanel.continueChat - about to call ensureConversation');
-    ensureConversation().then((convId) => {
-      console.log('AIChatPanel.continueChat - ensureConversation resolved with:', convId);
-      // Build messagesAndHistory from history (matches ChatPanel)
-      // IMPORTANT: Exclude the current prompt (promptKey) since it's new and we're sending it now
-      const historyForCall = latestHistoryRef.current || {};
-      const messagesAndHistory: { role: string; content: string }[] = [];
-      Object.entries(historyForCall).forEach(([historyPrompt, historyEntry]) => {
-        // Skip the current prompt we just added optimistically
-        if (historyPrompt === promptKey) return;
-        const promptForHistory = normalizeHistoryPromptForContext(historyPrompt);
-        const assistantContextContent = buildAssistantContextContent(historyPrompt, historyEntry);
-
-        messagesAndHistory.push({ role: 'user', content: promptForHistory });
-        messagesAndHistory.push({ role: 'assistant', content: assistantContextContent });
-      });
-      
-      // Build the full prompt - only apply template for first message (matches ChatPanel)
-      // Check if this is the first message by seeing if messagesAndHistory is empty
-      let fullPromptToSend = promptToSend;
-      if (messagesAndHistory.length === 0 && promptTemplate) {
-        fullPromptToSend = promptTemplate.replace('{{prompt}}', fullPromptToSend);
-      }
-      
-      const newController = new AbortController();
-      setLastController(newController);
+    void (async () => {
+      try {
+        console.log('AIChatPanel.continueChat - about to call ensureConversation');
+        const convId = await ensureConversation();
+        console.log('AIChatPanel.continueChat - ensureConversation resolved with:', convId);
+
+        // Build messagesAndHistory from history (matches ChatPanel)
+        // IMPORTANT: Exclude the current prompt (promptKey) since it's new and we're sending it now
+        const historyForCall = latestHistoryRef.current || {};
+        const messagesAndHistory: { role: string; content: string }[] = [];
+        Object.entries(historyForCall).forEach(([historyPrompt, historyEntry]) => {
+          if (historyPrompt === promptKey) return;
+          const promptForHistory = normalizeHistoryPromptForContext(historyPrompt);
+          const assistantContextContent = buildAssistantContextContent(historyPrompt, historyEntry);
+
+          messagesAndHistory.push({ role: 'user', content: promptForHistory });
+          messagesAndHistory.push({ role: 'assistant', content: assistantContextContent });
+        });
+
+        let fullPromptToSend = promptToSend;
+        if (messagesAndHistory.length === 0 && promptTemplate) {
+          fullPromptToSend = promptTemplate.replace('{{prompt}}', fullPromptToSend);
+        }
+
+        const newController = new AbortController();
+        setLastController(newController);
+
+        if (onBeforeSend) {
+          try {
+            await Promise.resolve(
+              onBeforeSend({
+                prompt: promptToSend,
+                conversationId: convId || null,
+                agentId: agent,
+                service,
+                messages: messagesAndHistory,
+              }),
+            );
+          } catch (error) {
+            console.warn('[AIChatPanel] onBeforeSend callback failed:', error);
+          }
+        }
+
+        const warnRatio = toBoundedRatio(DEFAULT_CONTEXT_WARN_RATIO, DEFAULT_CONTEXT_WARN_RATIO);
+        const compactRatio = toBoundedRatio(DEFAULT_CONTEXT_COMPACT_RATIO, DEFAULT_CONTEXT_COMPACT_RATIO);
+        const targetRatio = toBoundedRatio(DEFAULT_CONTEXT_TARGET_RATIO, DEFAULT_CONTEXT_TARGET_RATIO);
+        const maxTokens = Math.max(1, Number.isFinite(Number(maxContextTokens)) ? Math.floor(Number(maxContextTokens)) : 8000);
+        const dataEntries = dataWithExtras();
+        const projectedBefore =
+          estimateTokensFromText(fullPromptToSend)
+          + estimateTokensFromMessages(messagesAndHistory)
+          + Math.max(Number(totalContextTokens) || 0, estimateTokensFromData(dataEntries));
+        const warnThreshold = Math.floor(maxTokens * warnRatio);
+        const compactThreshold = Math.floor(maxTokens * compactRatio);
+        const targetThreshold = Math.floor(maxTokens * targetRatio);
+        const preserveTurnsForCompaction =
+          Number.isFinite(Number(compactionPreserveTurns)) && Number(compactionPreserveTurns) > 0
+            ? Math.floor(Number(compactionPreserveTurns))
+            : DEFAULT_COMPACTION_PRESERVE_TURNS;
+        const canDropOlderTurns =
+          buildFallbackWindowMessages(messagesAndHistory, preserveTurnsForCompaction).length
+            < messagesAndHistory.length;
+
+        let sendPrompt = fullPromptToSend;
+        let sendMessages = messagesAndHistory;
+
+        if (projectedBefore >= warnThreshold && projectedBefore < compactThreshold) {
+          const nearLimitMessage = 'Context is approaching the configured limit. A later turn may auto-compact.';
+          setCompactionNotice({
+            level: 'warning',
+            message: nearLimitMessage,
+          });
+        }
 
-      if (onBeforeSend) {
-        void Promise.resolve(
-          onBeforeSend({
-            prompt: promptToSend,
+        if (compactContext && projectedBefore >= compactThreshold && canDropOlderTurns) {
+          setCompactionNotice({
+            level: 'info',
+            message: 'Automatically compacting context',
+          });
+          const compactionInput: CompactContextInput = {
+            prompt: fullPromptToSend,
             conversationId: convId || null,
             agentId: agent,
             service,
             messages: messagesAndHistory,
-          })
-        ).catch((error) => {
-          console.warn('[AIChatPanel] onBeforeSend callback failed:', error);
-        });
-      }
-      
-      // Pass data array to send() for template replacement (e.g., {{Context}})
-      // Pass service (group_id) and customer data just like ChatPanel does
-      // Use convId from ensureConversation (matches ChatPanel)
-      send(
-        fullPromptToSend,
-        messagesAndHistory,
-        [
-          ...dataWithExtras(),
-          { key: '--messages', data: messagesAndHistory.length.toString() },
-        ],
-        true, // stream
-        true, // includeHistory
-        service, // group_id from agent config
-        convId, // Use the conversation ID from ensureConversation
-        newController,
-        undefined, // onComplete
-        (errorMsg: string) => {
-          // Error callback - handle errors immediately
-          console.log('[AIChatPanel] Error callback triggered:', errorMsg);
-          
-          // Check if this is a user-initiated abort
-          const isAbortError = errorMsg.toLowerCase().includes('abort') || 
-                               errorMsg.toLowerCase().includes('canceled') ||
-                               errorMsg.toLowerCase().includes('cancelled');
-          
-          if (isAbortError) {
-            if (suppressAbortHistoryUpdateRef.current) {
-              setIsLoading(false);
-              releaseTurnLockIfSettled();
-              return;
-            }
-            // User canceled the request - don't show error banner
-            console.log('[AIChatPanel] Request was aborted by user');
-            // Don't set error state - no red banner
-            
-            // Update history to show cancellation
-            if (promptKey) {
-              setHistory((prev) => {
-                const existingEntry = prev[promptKey] || { content: '', callId: '' };
-                return {
-                  ...prev,
-                  [promptKey]: {
-                    ...existingEntry,
-                    content: 'Response canceled',
-                    callId: lastCallId || existingEntry.callId || '',
-                  },
-                };
-              });
+            data: dataEntries,
+            maxContextTokens: maxTokens,
+            totalContextTokens: Number(totalContextTokens) || 0,
+            warnRatio,
+            compactRatio,
+            targetRatio,
+            preserveTurns: preserveTurnsForCompaction,
+            projectedTokens: {
+              projectedBefore,
+              projectedAfter: projectedBefore,
+              warnThreshold,
+              compactThreshold,
+              targetThreshold,
+            },
+          };
+
+          try {
+            const compactResult = await Promise.resolve(compactContext(compactionInput));
+            if (compactResult && typeof compactResult === 'object') {
+              if (typeof compactResult.prompt === 'string' && compactResult.prompt.trim()) {
+                sendPrompt = compactResult.prompt;
+              }
+              if (Array.isArray(compactResult.messages)) {
+                sendMessages = compactResult.messages;
+              }
+
+              if (compactResult.action === 'compacted') {
+                const usageBefore = Number(compactResult.tokenUsage?.projectedBefore);
+                const usageAfter = Number(compactResult.tokenUsage?.projectedAfter);
+                const hasUsageNumbers = Number.isFinite(usageBefore) && Number.isFinite(usageAfter);
+                const compactedMessage = hasUsageNumbers
+                  ? `Context compacted for this send (${formatTokenCount(usageBefore)} -> ${formatTokenCount(usageAfter)} tokens).`
+                  : 'Older turns were compacted to keep this thread within context limits.';
+                setCompactionNotice({
+                  level: 'success',
+                  message: compactResult.warning || compactedMessage,
+                });
+              } else if (compactResult.action === 'fallback_window') {
+                setCompactionNotice({
+                  level: 'warning',
+                  message: compactResult.warning || 'Compaction fallback applied. Sending only the most recent turns.',
+                });
+              } else {
+                setCompactionNotice(null);
+              }
             }
-          }
-          // Detect 413 Content Too Large error
-          else if (errorMsg.includes('413') || errorMsg.toLowerCase().includes('content too large')) {
-            setError({
-              message: 'The context is too large to process. Please start a new conversation or reduce the amount of context.',
-              code: '413',
+          } catch (error) {
+            console.warn('[AIChatPanel] compactContext failed, applying local fallback window', error);
+            sendMessages = buildFallbackWindowMessages(messagesAndHistory, preserveTurnsForCompaction);
+            setCompactionNotice({
+              level: 'warning',
+              message: 'Compaction service unavailable. Sending a reduced recent-window context.',
             });
-            
-            // Update history to show error
-            if (promptKey) {
-              setHistory((prev) => {
-                const existingEntry = prev[promptKey] || { content: '', callId: '' };
-                return {
-                  ...prev,
-                  [promptKey]: {
-                    ...existingEntry,
-                    content: `Error: ${errorMsg}`,
-                    callId: lastCallId || existingEntry.callId || '',
-                  },
-                };
+          }
+        }
+
+        send(
+          sendPrompt,
+          sendMessages,
+          [
+            ...dataEntries,
+            { key: '--messages', data: sendMessages.length.toString() },
+          ],
+          true, // stream
+          true, // includeHistory
+          service, // group_id from agent config
+          convId, // Use the conversation ID from ensureConversation
+          newController,
+          undefined, // onComplete
+          (errorMsg: string) => {
+            // Error callback - handle errors immediately
+            console.log('[AIChatPanel] Error callback triggered:', errorMsg);
+
+            // Check if this is a user-initiated abort
+            const isAbortError = errorMsg.toLowerCase().includes('abort')
+              || errorMsg.toLowerCase().includes('canceled')
+              || errorMsg.toLowerCase().includes('cancelled');
+
+            if (isAbortError) {
+              if (suppressAbortHistoryUpdateRef.current) {
+                setIsLoading(false);
+                releaseTurnLockIfSettled();
+                return;
+              }
+              // User canceled the request - don't show error banner
+              console.log('[AIChatPanel] Request was aborted by user');
+
+              // Update history to show cancellation
+              if (promptKey) {
+                setHistory((prev) => {
+                  const existingEntry = prev[promptKey] || { content: '', callId: '' };
+                  return {
+                    ...prev,
+                    [promptKey]: {
+                      ...existingEntry,
+                      content: 'Response canceled',
+                      callId: lastCallId || existingEntry.callId || '',
+                    },
+                  };
+                });
+              }
+            }
+            // Detect 413 Content Too Large error
+            else if (errorMsg.includes('413') || errorMsg.toLowerCase().includes('content too large')) {
+              setError({
+                message: 'The context is too large to process. Please start a new conversation or reduce the amount of context.',
+                code: '413',
               });
+
+              if (promptKey) {
+                setHistory((prev) => {
+                  const existingEntry = prev[promptKey] || { content: '', callId: '' };
+                  return {
+                    ...prev,
+                    [promptKey]: {
+                      ...existingEntry,
+                      content: `Error: ${errorMsg}`,
+                      callId: lastCallId || existingEntry.callId || '',
+                    },
+                  };
+                });
+              }
             }
-          }
-          // Detect other network errors
-          else if (errorMsg.toLowerCase().includes('network error') || errorMsg.toLowerCase().includes('fetch')) {
-            setError({
-              message: 'Network error. Please check your connection and try again.',
-              code: 'NETWORK_ERROR',
-            });
-            
-            // Update history to show error
-            if (promptKey) {
-              setHistory((prev) => {
-                const existingEntry = prev[promptKey] || { content: '', callId: '' };
-                return {
-                  ...prev,
-                  [promptKey]: {
-                    ...existingEntry,
-                    content: `Error: ${errorMsg}`,
-                    callId: lastCallId || existingEntry.callId || '',
-                  },
-                };
+            // Detect other network errors
+            else if (errorMsg.toLowerCase().includes('network error') || errorMsg.toLowerCase().includes('fetch')) {
+              setError({
+                message: 'Network error. Please check your connection and try again.',
+                code: 'NETWORK_ERROR',
               });
+
+              if (promptKey) {
+                setHistory((prev) => {
+                  const existingEntry = prev[promptKey] || { content: '', callId: '' };
+                  return {
+                    ...prev,
+                    [promptKey]: {
+                      ...existingEntry,
+                      content: `Error: ${errorMsg}`,
+                      callId: lastCallId || existingEntry.callId || '',
+                    },
+                  };
+                });
+              }
             }
-          }
-          // Generic error
-          else {
-            setError({
-              message: errorMsg,
-              code: 'UNKNOWN_ERROR',
-            });
-            
-            // Update history to show error
-            if (promptKey) {
-              setHistory((prev) => {
-                const existingEntry = prev[promptKey] || { content: '', callId: '' };
-                return {
-                  ...prev,
-                  [promptKey]: {
-                    ...existingEntry,
-                    content: `Error: ${errorMsg}`,
-                    callId: lastCallId || existingEntry.callId || '',
-                  },
-                };
+            // Generic error
+            else {
+              setError({
+                message: errorMsg,
+                code: 'UNKNOWN_ERROR',
               });
+
+              if (promptKey) {
+                setHistory((prev) => {
+                  const existingEntry = prev[promptKey] || { content: '', callId: '' };
+                  return {
+                    ...prev,
+                    [promptKey]: {
+                      ...existingEntry,
+                      content: `Error: ${errorMsg}`,
+                      callId: lastCallId || existingEntry.callId || '',
+                    },
+                  };
+                });
+              }
             }
-          }
-          
-          // Reset loading state
-          setIsLoading(false);
-          releaseTurnLockIfSettled();
+
+            setIsLoading(false);
+            releaseTurnLockIfSettled();
+          },
+        );
+
+        setLastMessages(sendMessages);
+
+        if (convId && onConversationCreated) {
+          setTimeout(() => {
+            onConversationCreated(convId);
+          }, 100);
         }
-      );
-      
-      setLastMessages(messagesAndHistory);
-      
-      // Notify parent of new conversation ID AFTER send() has started
-      // This prevents the component from being remounted before send() runs
-      if (convId && onConversationCreated) {
-        // Use setTimeout to ensure send() has fully started before triggering re-render
-        setTimeout(() => {
-          onConversationCreated(convId);
-        }, 100);
+      } catch (error) {
+        console.error('[AIChatPanel] Failed to send prompt:', error);
+        setError({
+          message: error instanceof Error ? error.message : 'Failed to send prompt',
+          code: 'UNKNOWN_ERROR',
+        });
+        setIsLoading(false);
+        releaseTurnLockIfSettled();
       }
-    }).catch((error) => {
-      console.error('[AIChatPanel] Failed to send prompt:', error);
-      setError({
-        message: error instanceof Error ? error.message : 'Failed to send prompt',
-        code: 'UNKNOWN_ERROR',
-      });
-      setIsLoading(false);
-      releaseTurnLockIfSettled();
-    });
+    })();
   }, [
     clearFollowOnQuestionsNextPrompt,
     promptTemplate,
@@ -4406,6 +5217,10 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     scrollToBottom,
     onConversationCreated,
     onBeforeSend,
+    compactContext,
+    compactionPreserveTurns,
+    maxContextTokens,
+    totalContextTokens,
     hasInFlightTurnWork,
     queuePromptForLater,
     releaseTurnLockIfSettled,
@@ -4431,8 +5246,15 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
 
   // Handle stop - stable callback for ChatInput
   const handleStop = useCallback(() => {
+    if (pendingUserInputRequest) {
+      completePendingUserInputRequest({
+        status: 'cancelled',
+        requestId: pendingUserInputRequest.requestId,
+        cancelledBy: 'stop',
+      });
+    }
     stop(lastController);
-  }, [stop, lastController]);
+  }, [completePendingUserInputRequest, lastController, pendingUserInputRequest, stop]);
 
   // Reset conversation
   const handleNewConversation = useCallback(() => {
@@ -4447,9 +5269,17 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     if (!idle) {
       stop(lastController);
     }
+    if (pendingUserInputRequest) {
+      completePendingUserInputRequest({
+        status: 'cancelled',
+        requestId: pendingUserInputRequest.requestId,
+        cancelledBy: 'reset',
+      });
+    }
     
     setResponse('');
     setHistory({});
+    setCompactionNotice(null);
     latestHistoryRef.current = {}; // Keep ref in sync
     hasNotifiedCompletionRef.current = true; // Prevent stale notifications
     queuedPromptsRef.current = [];
@@ -4471,6 +5301,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     setThinkingBlocks([]);
     setCurrentThinkingIndex(0);
     setCollapsedBlocks(new Set());
+    setPendingUserInputRequest(null);
     // Note: activeThinkingBlock is computed via useMemo from response
     hasAutoCollapsedRef.current = false;
     prevBlockCountRef.current = 0;
@@ -4485,7 +5316,16 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
       setJustReset(false);
       responseAreaRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
     }, 100);
-  }, [newConversationConfirm, idle, stop, lastController, setResponse, followOnQuestions]);
+  }, [
+    completePendingUserInputRequest,
+    followOnQuestions,
+    idle,
+    lastController,
+    newConversationConfirm,
+    pendingUserInputRequest,
+    setResponse,
+    stop,
+  ]);
 
   // ============================================================================
   // Effects - CLEAN DESIGN: No overlapping effects, explicit triggers only
@@ -5539,6 +6379,19 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
           </button>
         </div>
       )}
+
+      {compactionNotice && compactionNotice.level !== 'info' && (
+        <div className={`ai-chat-compaction-banner ai-chat-compaction-banner--${compactionNotice.level}`}>
+          <div className="ai-chat-compaction-banner__message">{compactionNotice.message}</div>
+          <button
+            className="ai-chat-compaction-banner__close"
+            onClick={() => setCompactionNotice(null)}
+            aria-label="Dismiss context notice"
+          >
+            <CloseIcon />
+          </button>
+        </div>
+      )}
       
       {/* Messages Area */}
       <ScrollArea className="ai-chat-panel__messages" ref={responseAreaRef}>
@@ -5919,6 +6772,12 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         <div ref={bottomRef} />
       </ScrollArea>
 
+      {compactionNotice?.level === 'info' && (
+        <div className="ai-chat-compaction-inline-status" role="status" aria-live="polite">
+          <span>{compactionNotice.message}</span>
+        </div>
+      )}
+
       {/* Button Container - Save, Email, CTA */}
       {(showSaveButton || showEmailButton || showCallToAction) && (
         <div className="ai-chat-button-container">
@@ -6097,6 +6956,8 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         onSubmit={continueChat}
         onQueueSubmit={handleQueuePrompt}
         onStop={handleStop}
+        userInputRequest={pendingUserInputRequest}
+        onCompleteUserInputRequest={completePendingUserInputRequest}
         queuedPrompts={queuedPrompts}
         onClearQueuedPrompt={handleClearQueuedPrompt}
         agentOptions={agentOptions}
@@ -6111,6 +6972,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         enableContextDetailView={enableContextDetailView}
         disabledSectionIds={disabledSectionIds}
         onToggleSection={handleToggleSection}
+        composerAgentModeControl={composerAgentModeControl}
       />
       
       {/* Footer */}