feat: add ask_user interactive user input to frontend

Wire the sidecar user-input-requested protocol event through the main process, IPC layer, and renderer UI so agents can ask the user interactive questions with choices and freeform input. - Add UserInputRequestedEvent and ResolveUserInputCommand to sidecar protocol types - Add resolveUserInput method to SidecarClient and onUserInput callback to runTurn - Create PendingUserInputRecord domain type and add pendingUserInput to SessionRecord - Add handleUserInputRequested and resolveSessionUserInput to AryxAppService with handle management - Register sessions:resolve-user-input IPC channel with preload bridge - Create UserInputBanner component with choice buttons and freeform input - Integrate UserInputBanner into ChatPane with header indicator Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-08-04 19:08:40 +02:00 · 2026-03-26 17:45:27 +01:00
parent 2ae4bd01b4
commit f15b1aedb1
14 changed files with 356 additions and 12 deletions
@@ -1,9 +1,10 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { AlertCircle, ArrowUp, Bot, Circle, GitBranch, Loader2, ShieldAlert, Square, User } from 'lucide-react';
+import { AlertCircle, ArrowUp, Bot, Circle, GitBranch, Loader2, MessageCircleQuestion, ShieldAlert, Square, User } from 'lucide-react';

 import { MarkdownContent } from '@renderer/components/MarkdownContent';
 import { MarkdownComposer, type MarkdownComposerHandle } from '@renderer/components/MarkdownComposer';
 import { ApprovalBanner, QueuedApprovalsList } from '@renderer/components/chat/ApprovalBanner';
+import { UserInputBanner } from '@renderer/components/chat/UserInputBanner';
 import { InlineApprovalPill, InlineModelPill, InlineThinkingPill, InlineToolsPill } from '@renderer/components/chat/InlinePills';
 import { ThinkingDots } from '@renderer/components/chat/ThinkingDots';
 import { getAssistantMessagePhase } from '@renderer/lib/messagePhase';
@@ -36,6 +37,7 @@ interface ChatPaneProps {
  onSend: (content: string) => Promise<void>;
  onCancelTurn?: () => void;
  onResolveApproval?: (approvalId: string, decision: ApprovalDecision) => Promise<unknown>;
+  onResolveUserInput?: (userInputId: string, answer: string, wasFreeform: boolean) => Promise<unknown>;
  onUpdateSessionModelConfig?: (config: {
    model: string;
    reasoningEffort?: ReasoningEffort;
@@ -54,6 +56,7 @@ export function ChatPane({
  onSend,
  onCancelTurn,
  onResolveApproval,
+  onResolveUserInput,
  onUpdateSessionModelConfig,
  onUpdateSessionTooling,
  onUpdateSessionApprovalSettings,
@@ -62,6 +65,7 @@ export function ChatPane({
  const [configError, setConfigError] = useState<string>();
  const [approvalError, setApprovalError] = useState<string>();
  const [isResolvingApproval, setIsResolvingApproval] = useState(false);
+  const [isSubmittingUserInput, setIsSubmittingUserInput] = useState(false);
  const [isUpdatingSessionModelConfig, setIsUpdatingSessionModelConfig] = useState(false);
  const transcriptRef = useRef<HTMLDivElement>(null);
  const composerRef = useRef<MarkdownComposerHandle>(null);
@@ -70,6 +74,7 @@ export function ChatPane({
  const pendingApproval = session.pendingApproval?.status === 'pending' ? session.pendingApproval : undefined;
  const queuedApprovals = (session.pendingApprovalQueue ?? []).filter((a) => a.status === 'pending');
  const totalPendingCount = (pendingApproval ? 1 : 0) + queuedApprovals.length;
+  const pendingUserInput = session.pendingUserInput?.status === 'pending' ? session.pendingUserInput : undefined;
  const isScratchpad = isScratchpadProject(project);
  const isSingleAgent = pattern.agents.length === 1;
  const primaryAgent = pattern.agents[0];
@@ -158,6 +163,20 @@ export function ChatPane({
    }
  }

+  async function handleResolveUserInput(answer: string, wasFreeform: boolean) {
+    if (!pendingUserInput || !onResolveUserInput || isSubmittingUserInput) return;
+
+    setIsSubmittingUserInput(true);
+
+    try {
+      await onResolveUserInput(pendingUserInput.id, answer, wasFreeform);
+    } catch {
+      // User input errors are non-critical; the turn will fail and show the error status
+    } finally {
+      setIsSubmittingUserInput(false);
+    }
+  }
+
  return (
    <div className="flex h-full flex-col">
      {/* Header — extra top padding clears the title bar overlay zone */}
@@ -194,14 +213,20 @@ export function ChatPane({
                )}
              </div>
            )}
-            {isSessionBusy && !pendingApproval && <span className="size-2 animate-pulse rounded-full bg-blue-400" />}
+            {pendingUserInput && !pendingApproval && (
+              <div className="flex items-center gap-1.5 text-[12px] font-medium text-blue-400">
+                <MessageCircleQuestion className="size-3.5" />
+                Awaiting your input
+              </div>
+            )}
+            {isSessionBusy && !pendingApproval && !pendingUserInput && <span className="size-2 animate-pulse rounded-full bg-blue-400" />}
            {session.status === 'error' && (
              <div className="flex items-center gap-1.5 text-[12px] text-red-400">
                <AlertCircle className="size-3.5" />
                Error
              </div>
            )}
-            {session.status === 'idle' && !pendingApproval && session.messages.length > 0 && (
+            {session.status === 'idle' && !pendingApproval && !pendingUserInput && session.messages.length > 0 && (
              <span className="text-[12px] text-zinc-600">
                {session.messages.length} message{session.messages.length === 1 ? '' : 's'}
              </span>
@@ -339,6 +364,17 @@ export function ChatPane({
            </div>
          )}

+          {/* Pending user input banner */}
+          {pendingUserInput && (
+            <div className="mb-3">
+              <UserInputBanner
+                isSubmitting={isSubmittingUserInput}
+                onSubmit={(answer, wasFreeform) => void handleResolveUserInput(answer, wasFreeform)}
+                userInput={pendingUserInput}
+              />
+            </div>
+          )}
+
          {/* Session config pills — tools/approval left, model/reasoning right */}
          {isSingleAgent && (
            <div className="mb-2 flex items-center gap-2">
@@ -426,11 +462,13 @@ export function ChatPane({
              placeholder={
                pendingApproval
                  ? 'Awaiting approval...'
-                  : isSessionBusy
-                    ? 'Waiting for response...'
-                    : isUpdatingSessionModelConfig
-                      ? 'Saving model settings...'
-                      : 'Message...'
+                  : pendingUserInput
+                    ? 'Awaiting your input above...'
+                    : isSessionBusy
+                      ? 'Waiting for response...'
+                      : isUpdatingSessionModelConfig
+                        ? 'Saving model settings...'
+                        : 'Message...'
              }
            >
              <button
@@ -0,0 +1,113 @@
+import { useState, useCallback } from 'react';
+import { Loader2, MessageCircleQuestion, Send } from 'lucide-react';
+
+import type { PendingUserInputRecord } from '@shared/domain/userInput';
+
+export function UserInputBanner({
+  userInput,
+  onSubmit,
+  isSubmitting,
+}: {
+  userInput: PendingUserInputRecord;
+  onSubmit: (answer: string, wasFreeform: boolean) => void;
+  isSubmitting: boolean;
+}) {
+  const [freeformText, setFreeformText] = useState('');
+  const hasChoices = userInput.choices && userInput.choices.length > 0;
+
+  const handleChoiceClick = useCallback(
+    (choice: string) => {
+      if (!isSubmitting) {
+        onSubmit(choice, false);
+      }
+    },
+    [isSubmitting, onSubmit],
+  );
+
+  const handleFreeformSubmit = useCallback(() => {
+    const trimmed = freeformText.trim();
+    if (trimmed && !isSubmitting) {
+      onSubmit(trimmed, true);
+    }
+  }, [freeformText, isSubmitting, onSubmit]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleFreeformSubmit();
+      }
+    },
+    [handleFreeformSubmit],
+  );
+
+  return (
+    <div className="rounded-xl border border-blue-500/30 bg-blue-500/5 px-4 py-3" role="alert">
+      {/* Header */}
+      <div className="flex items-start gap-2.5">
+        <MessageCircleQuestion className="mt-0.5 size-4 shrink-0 text-blue-400" />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <span className="text-[13px] font-semibold text-blue-200">Agent question</span>
+            <span className="rounded-full bg-blue-500/15 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-blue-400">
+              User input
+            </span>
+          </div>
+
+          {userInput.agentName && (
+            <div className="mt-1 text-[11px] text-zinc-400">
+              Agent: <span className="text-zinc-300">{userInput.agentName}</span>
+            </div>
+          )}
+
+          <p className="mt-2 text-[13px] leading-relaxed text-zinc-200 whitespace-pre-wrap">
+            {userInput.question}
+          </p>
+        </div>
+      </div>
+
+      {/* Choices */}
+      {hasChoices && (
+        <div className="mt-3 flex flex-wrap gap-2">
+          {userInput.choices!.map((choice) => (
+            <button
+              className="rounded-lg border border-blue-500/30 bg-blue-500/10 px-3.5 py-1.5 text-[12px] font-medium text-blue-200 transition hover:border-blue-400/50 hover:bg-blue-500/20 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+              disabled={isSubmitting}
+              key={choice}
+              onClick={() => handleChoiceClick(choice)}
+              type="button"
+            >
+              {choice}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Freeform input */}
+      {userInput.allowFreeform && (
+        <div className="mt-3 flex items-center gap-2">
+          <input
+            aria-label="Type your answer"
+            className="min-w-0 flex-1 rounded-lg border border-zinc-700 bg-zinc-900/60 px-3 py-1.5 text-[13px] text-zinc-200 placeholder-zinc-500 outline-none transition focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/30 disabled:cursor-not-allowed disabled:opacity-50"
+            disabled={isSubmitting}
+            onChange={(e) => setFreeformText(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={hasChoices ? 'Or type your own answer…' : 'Type your answer…'}
+            type="text"
+            value={freeformText}
+          />
+          <button
+            aria-label="Submit answer"
+            className="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3.5 py-1.5 text-[12px] font-medium text-white transition hover:bg-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
+            disabled={isSubmitting || !freeformText.trim()}
+            onClick={handleFreeformSubmit}
+            type="button"
+          >
+            {isSubmitting ? <Loader2 className="size-3 animate-spin" /> : <Send className="size-3" />}
+            Send
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}