fix(hitl): approve/reject continues conversation, multi-tool-call panel, last-message gating

src/application/components/chat/ChatMessage.tsx

@@ -20,6 +20,7 @@ interface ChatMessageProps {
   agentName: string;
   threadId?: string;
   events?: TraceEvent[];
+  isLast?: boolean;
 }
 
 interface SubagentTimeline {
@@ -89,7 +90,13 @@ function formatTimestamp(ts: string): string {
   }).format(date);
 }
 
-function ChatMessageImpl({ message, agentName, threadId, events }: Readonly<ChatMessageProps>) {
+function ChatMessageImpl({
+  message,
+  agentName,
+  threadId,
+  events,
+  isLast,
+}: Readonly<ChatMessageProps>) {
   const isHuman = message.role === MessageRole.HUMAN;
   const isAi = message.role === MessageRole.AI;
   const isAwaitingHitl = message.status === MessageStatus.AWAITING_HITL;
@@ -103,6 +110,10 @@ function ChatMessageImpl({ message, agentName, threadId, events }: Readonly<Chat
     () => (events ? parentToolEvents(events) : { toolCalls: [], toolResults: [] }),
     [events],
   );
+  const hitlDecisionEvents = useMemo(
+    () => (events ? events.filter((e) => e.type === TraceEventType.HITL_DECISION) : []),
+    [events],
+  );
 
   if (isHuman) {
     return (
@@ -160,6 +171,27 @@ function ChatMessageImpl({ message, agentName, threadId, events }: Readonly<Chat
               <div className="mt-2 flex flex-col gap-2" data-od-id="message-timeline">
                 <ThinkingBlock text={parentThinkingText} source={null} />
 
+                {hitlDecisionEvents.map((ev) => {
+                  const action = ev.name ?? "";
+                  let label = "✎ Edited";
+                  let className = "border-accent text-accent";
+                  if (action === "approve") {
+                    label = "✓ Approved";
+                    className = "border-success text-success";
+                  } else if (action === "reject") {
+                    label = ev.content ? `✗ Rejected: ${ev.content}` : "✗ Rejected";
+                    className = "border-danger text-danger";
+                  }
+                  return (
+                    <span
+                      key={ev.id}
+                      className={`inline-block w-fit border bg-surface px-2 py-1 font-mono text-xs ${className}`}
+                    >
+                      {label}
+                    </span>
+                  );
+                })}
+
                 {parentTools.toolCalls.map((call) => (
                   <ToolCallBadge
                     key={call.id}
@@ -191,7 +223,7 @@ function ChatMessageImpl({ message, agentName, threadId, events }: Readonly<Chat
             )}
           </div>
 
-          {isAwaitingHitl && message.tool_calls?.length && threadId && (
+          {isAwaitingHitl && !!message.tool_calls?.length && !!threadId && isLast && (
             <HITLReviewPanel toolCalls={message.tool_calls} threadId={threadId} />
           )}
         </article>
@@ -213,7 +245,8 @@ const ChatMessage = memo(ChatMessageImpl, (prev, next) => {
     prev.agentName === next.agentName &&
     prev.threadId === next.threadId &&
     prev.message === next.message &&
-    prev.events === next.events
+    prev.events === next.events &&
+    prev.isLast === next.isLast
   );
 });
 

src/application/components/chat/HITLReviewPanel.tsx

@@ -4,133 +4,202 @@ import { Button } from "@/application/components/ui/button";
 import { Input } from "@/application/components/ui/input";
 import { useSendMessage } from "@/application/hooks/chat/useSendMessage";
 import type { ToolCall } from "@/domain/entities/chat/message";
+import type { HitlDecisionInput } from "@/domain/entities/chat/chatRequest";
 
 interface HITLReviewPanelProps {
   toolCalls: ToolCall[];
   threadId: string;
 }
 
-type ReviewState = "idle" | "reviewing" | "rejecting";
+type DecisionAction = "approve" | "reject";
 
-export default function HITLReviewPanel({ toolCalls, threadId }: Readonly<HITLReviewPanelProps>) {
-  const [reviewState, setReviewState] = useState<ReviewState>("idle");
-  const [rejectReason, setRejectReason] = useState("");
-  const sendMessage = useSendMessage(threadId);
-
-  const toolName = toolCalls[0]?.name ?? "Unknown tool";
-  const toolCallId = toolCalls[0]?.id ?? "";
-
-  function handleApprove() {
-    sendMessage.mutate({
-      tool_call_id: toolCallId,
-      action: "approve",
-    });
-  }
-
-  function handleReject() {
-    if (reviewState !== "rejecting") {
-      setReviewState("rejecting");
-      return;
-    }
-
-    sendMessage.mutate(
-      {
-        tool_call_id: toolCallId,
-        action: "reject",
-        reason: rejectReason || "Rejected by user",
-      },
-      {
-        onSuccess: () => {
-          setReviewState("idle");
-          setRejectReason("");
-        },
-      },
-    );
-  }
-
-  if (reviewState === "idle") {
-    return (
-      <div data-od-id="hitl-panel" className="mt-2 border border-warn bg-bg">
-        <div className="flex items-center justify-between gap-2 px-3 py-2">
-          <div className="flex items-center gap-2">
-            <AlertTriangle className="h-4 w-4 text-warn" aria-hidden="true" />
-            <span className="font-mono text-xs text-fg">
-              Validation required: <span className="font-mono">{toolName}</span>
-            </span>
-          </div>
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            onClick={() => setReviewState("reviewing")}
-          >
-            Review Data
-          </Button>
-        </div>
-      </div>
-    );
-  }
+interface ToolDecisionRowProps {
+  toolCall: ToolCall;
+  isRejecting: boolean;
+  rejectReason: string;
+  isPending: boolean;
+  onApprove: (id: string) => void;
+  onReject: (id: string) => void;
+  onReasonChange: (id: string, reason: string) => void;
+  onConfirmReject: () => void;
+}
 
+function ToolDecisionRow({
+  toolCall,
+  isRejecting,
+  rejectReason,
+  isPending,
+  onApprove,
+  onReject,
+  onReasonChange,
+  onConfirmReject,
+}: Readonly<ToolDecisionRowProps>) {
   return (
-    <div data-od-id="hitl-panel" className="mt-2 border border-warn bg-bg">
-      <div className="flex items-center gap-2 px-3 py-2">
-        <AlertTriangle className="h-4 w-4 text-warn" aria-hidden="true" />
-        <span className="font-mono text-xs text-fg">
-          Review: <span className="font-mono">{toolName}</span>
-        </span>
+    <div className="border-t border-border">
+      <div className="px-3 py-2">
+        <span className="font-mono text-xs text-fg">{toolCall.name}</span>
       </div>
-
-      {toolCalls[0]?.args && (
-        <pre className="overflow-x-auto border-t border-border bg-bg px-3 py-2 font-mono text-xs text-fg-2">
-          {JSON.stringify(toolCalls[0].args, null, 2)}
+      {toolCall.args && Object.keys(toolCall.args).length > 0 && (
+        <pre className="overflow-x-auto bg-bg px-3 py-2 font-mono text-xs text-fg-2">
+          {JSON.stringify(toolCall.args, null, 2)}
         </pre>
       )}
-
-      {reviewState === "rejecting" && (
-        <div className="flex gap-2 border-t border-border p-3">
-          <Input
-            type="text"
-            value={rejectReason}
-            onChange={(e) => setRejectReason(e.target.value)}
-            placeholder="Reason for rejection (optional)"
-            className="flex-1"
-          />
-        </div>
-      )}
-
-      <div className="flex gap-2 border-t border-border p-3">
+      <div className="flex flex-wrap gap-2 p-3">
         <Button
           type="button"
           variant="success"
           size="sm"
-          onClick={handleApprove}
-          disabled={sendMessage.isPending}
+          onClick={() => onApprove(toolCall.id)}
+          disabled={isPending}
         >
           <Check className="h-3.5 w-3.5" />
-          Approve
+          Approve {toolCall.name}
         </Button>
         <Button
           type="button"
           variant="destructive"
           size="sm"
-          onClick={handleReject}
-          disabled={sendMessage.isPending}
+          onClick={() => onReject(toolCall.id)}
+          disabled={isPending}
         >
           <X className="h-3.5 w-3.5" />
-          {reviewState === "rejecting" ? "Confirm Reject" : "Reject"}
-        </Button>
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
-          onClick={() => {
-            setReviewState("idle");
-            setRejectReason("");
-          }}
-        >
-          Cancel
+          Reject {toolCall.name}
         </Button>
       </div>
+      {isRejecting && (
+        <div className="flex flex-wrap gap-2 border-t border-border p-3">
+          <Input
+            type="text"
+            value={rejectReason}
+            onChange={(e) => onReasonChange(toolCall.id, e.target.value)}
+            placeholder="Reason for rejection (optional)"
+            className="flex-1"
+          />
+          <Button
+            type="button"
+            variant="destructive"
+            size="sm"
+            onClick={onConfirmReject}
+            disabled={isPending}
+          >
+            Confirm Reject
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function HITLReviewPanel({ toolCalls, threadId }: Readonly<HITLReviewPanelProps>) {
+  const [isReviewing, setIsReviewing] = useState(false);
+  const [decisions, setDecisions] = useState<Record<string, DecisionAction>>({});
+  const [reasons, setReasons] = useState<Record<string, string>>({});
+  const [rejectingId, setRejectingId] = useState<string | null>(null);
+  const sendMessage = useSendMessage(threadId);
+
+  function handleApprove(id: string) {
+    setDecisions((prev) => ({ ...prev, [id]: "approve" }));
+    setRejectingId(null);
+  }
+
+  function handleReject(id: string) {
+    setDecisions((prev) => ({ ...prev, [id]: "reject" }));
+    setRejectingId(id);
+  }
+
+  function handleReasonChange(id: string, reason: string) {
+    setReasons((prev) => ({ ...prev, [id]: reason }));
+  }
+
+  function buildDecisions(): HitlDecisionInput[] {
+    return toolCalls.map((tc) => {
+      const action = decisions[tc.id] ?? "approve";
+      if (action === "reject") {
+        const reason = reasons[tc.id];
+        if (reason) {
+          return { tool_call_id: tc.id, action: "reject", reason };
+        }
+        return { tool_call_id: tc.id, action: "reject" };
+      }
+      return { tool_call_id: tc.id, action: "approve" };
+    });
+  }
+
+  function handleSubmit() {
+    sendMessage.mutate({ decisions: buildDecisions() });
+    setIsReviewing(false);
+    setDecisions({});
+    setReasons({});
+    setRejectingId(null);
+  }
+
+  const hasToolCalls = toolCalls.length > 0;
+
+  return (
+    <div data-od-id="hitl-panel" className="mt-2 border border-warn bg-bg">
+      <div className="flex items-center justify-between gap-2 px-3 py-2">
+        <div className="flex items-center gap-2">
+          <AlertTriangle className="h-4 w-4 text-warn" aria-hidden="true" />
+          <span className="font-mono text-xs text-fg">Validation required</span>
+        </div>
+        {!isReviewing && hasToolCalls && (
+          <Button type="button" variant="ghost" size="sm" onClick={() => setIsReviewing(true)}>
+            Review Data
+          </Button>
+        )}
+      </div>
+
+      {hasToolCalls && isReviewing && (
+        <>
+          {toolCalls.map((tc) => (
+            <ToolDecisionRow
+              key={tc.id}
+              toolCall={tc}
+              isRejecting={rejectingId === tc.id}
+              rejectReason={reasons[tc.id] ?? ""}
+              isPending={sendMessage.isPending}
+              onApprove={handleApprove}
+              onReject={handleReject}
+              onReasonChange={handleReasonChange}
+              onConfirmReject={handleSubmit}
+            />
+          ))}
+        </>
+      )}
+      {hasToolCalls && !isReviewing && (
+        <div className="border-t border-border px-3 py-2">
+          {toolCalls.map((tc) => (
+            <div key={tc.id} className="font-mono text-xs text-fg">
+              {tc.name}
+            </div>
+          ))}
+        </div>
+      )}
+      {!hasToolCalls && (
+        <div className="border-t border-border px-3 py-2">
+          <span className="font-mono text-xs text-fg">Unknown tool</span>
+        </div>
+      )}
+
+      {sendMessage.isError && sendMessage.error && (
+        <div className="border-t border-danger p-3">
+          <p className="font-mono text-xs text-danger">{sendMessage.error.message}</p>
+        </div>
+      )}
+
+      {isReviewing && hasToolCalls && (
+        <div className="border-t border-border p-3">
+          <Button
+            type="button"
+            variant="default"
+            size="sm"
+            onClick={handleSubmit}
+            disabled={sendMessage.isPending}
+          >
+            Submit
+          </Button>
+        </div>
+      )}
     </div>
   );
 }

src/application/components/chat/MessageList.tsx

@@ -162,6 +162,7 @@ export default function MessageList({
           agentName={agentName}
           threadId={threadId}
           events={entry.events}
+          isLast={idx === entries.length - 1}
         />
       ))}