@stigmer/react-ui 0.0.34

package/src/execution/components/ExecutionStream.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
+import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import type { ApprovalAction } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { ExecutionStatus } from "./ExecutionStatus";
+import { MessageEntry } from "./MessageEntry";
+import { HumanMessageBubble } from "./MessageEntry";
+import { MessageInput } from "./MessageInput";
+import {
+  buildSubAgentIndex,
+  isTerminalPhase,
+} from "../helpers";
+import { cn } from "@stigmer/theme";
+import { Button } from "../../internal/ui/button";
+import { ArrowDown, AlertCircle } from "lucide-react";
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+interface ExecutionStreamProps {
+  execution: AgentExecution | null;
+  phase: ExecutionPhase;
+  isConnected: boolean;
+  error: string | null;
+  onApproval?: (
+    toolCallId: string,
+    action: ApprovalAction,
+    comment?: string,
+  ) => Promise<void>;
+  isApprovalSubmitting?: boolean;
+  onSendMessage?: (message: string) => void;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function ExecutionStream(props: ExecutionStreamProps) {
+  const {
+    execution,
+    phase,
+    error,
+    onApproval,
+    isApprovalSubmitting = false,
+    onSendMessage,
+    className,
+  } = props;
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+
+  const messages = execution?.status?.messages ?? [];
+  const subAgentIndex = useMemo(
+    () => (execution ? buildSubAgentIndex(execution) : new Map()),
+    [execution],
+  );
+
+  // ── Scroll-lock: auto-scroll when at bottom ──
+  useEffect(() => {
+    if (isAtBottom) {
+      bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [messages.length, isAtBottom]);
+
+  const handleScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const threshold = 48;
+    const atBottom =
+      el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
+    setIsAtBottom(atBottom);
+  }, []);
+
+  const scrollToBottom = useCallback(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+    setIsAtBottom(true);
+  }, []);
+
+  const isTerminal = isTerminalPhase(phase);
+  const canSendMessage = isTerminal && !!onSendMessage;
+
+  return (
+    <div className={cn("flex flex-col", className)}>
+      {/* ── Header ── */}
+      <div className="flex items-center justify-between border-b px-4 py-2">
+        <ExecutionStatus phase={phase} />
+        {execution?.status?.startedAt && (
+          <time
+            dateTime={execution.status.startedAt}
+            className="text-xs text-muted-foreground"
+          >
+            {new Date(execution.status.startedAt).toLocaleTimeString()}
+          </time>
+        )}
+      </div>
+
+      {/* ── Stream content ── */}
+      <div
+        ref={scrollRef}
+        onScroll={handleScroll}
+        className="relative flex-1 overflow-y-auto"
+      >
+        <div className="space-y-4 p-4">
+          {/* Show spec.message as the initial user message if no HUMAN message exists yet */}
+          {messages.length === 0 && execution?.spec?.message && (
+            <HumanMessageBubble content={execution.spec.message} />
+          )}
+
+          {messages.map((msg, index) => (
+            <MessageEntry
+              key={index}
+              message={msg}
+              subAgentIndex={subAgentIndex}
+              onApproval={onApproval}
+              isApprovalSubmitting={isApprovalSubmitting}
+            />
+          ))}
+
+          {/* Error banner */}
+          {error && (
+            <div className="flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
+              <AlertCircle className="mt-0.5 size-4 shrink-0" />
+              <p>{error}</p>
+            </div>
+          )}
+
+          {/* Execution error from status */}
+          {execution?.status?.error && isTerminal && (
+            <div className="flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
+              <AlertCircle className="mt-0.5 size-4 shrink-0" />
+              <p>{execution.status.error}</p>
+            </div>
+          )}
+
+          <div ref={bottomRef} />
+        </div>
+
+        {/* Scroll-to-bottom FAB */}
+        {!isAtBottom && (
+          <Button
+            size="icon"
+            variant="secondary"
+            onClick={scrollToBottom}
+            className="absolute bottom-4 right-4 z-10 rounded-full shadow-md"
+            aria-label="Scroll to bottom"
+          >
+            <ArrowDown className="size-4" />
+          </Button>
+        )}
+      </div>
+
+      {/* ── Message input ── */}
+      {canSendMessage && (
+        <div className="border-t p-4">
+          <MessageInput
+            onSend={onSendMessage}
+            placeholder="Send a follow-up message..."
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/execution/components/MessageEntry.tsx

@@ -0,0 +1,143 @@
+import type { AgentMessage } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import type { SubAgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/subagent_pb";
+import type { ApprovalAction } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { OutputBlock } from "./OutputBlock";
+import { ToolCallCard } from "./ToolCallCard";
+import { SubAgentCard } from "./SubAgentCard";
+import {
+  isHumanMessage,
+  isAiMessage,
+  isSystemMessage,
+} from "../helpers";
+import { User, BotMessageSquare, Info } from "lucide-react";
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface MessageEntryProps {
+  message: AgentMessage;
+  subAgentIndex: Map<string, SubAgentExecution>;
+  onApproval?: (
+    toolCallId: string,
+    action: ApprovalAction,
+    comment?: string,
+  ) => Promise<void>;
+  isApprovalSubmitting?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Message dispatcher
+// ---------------------------------------------------------------------------
+
+export function MessageEntry({
+  message,
+  subAgentIndex,
+  onApproval,
+  isApprovalSubmitting,
+}: MessageEntryProps) {
+  if (isHumanMessage(message.type)) {
+    return <HumanMessageBubble content={message.content} />;
+  }
+
+  if (isAiMessage(message.type)) {
+    return (
+      <AiMessageBlock
+        message={message}
+        subAgentIndex={subAgentIndex}
+        onApproval={onApproval}
+        isApprovalSubmitting={isApprovalSubmitting}
+      />
+    );
+  }
+
+  if (isSystemMessage(message.type)) {
+    return <SystemMessageBlock content={message.content} />;
+  }
+
+  // MESSAGE_TOOL: tool results are rendered inline with the tool call card,
+  // so we don't render a separate block for them.
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Message type blocks
+// ---------------------------------------------------------------------------
+
+export function HumanMessageBubble({ content }: { content: string }) {
+  return (
+    <div className="flex items-start gap-3">
+      <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-muted">
+        <User className="size-3.5 text-muted-foreground" />
+      </div>
+      <div className="min-w-0 flex-1 rounded-lg bg-muted px-3 py-2 text-sm">
+        <p className="whitespace-pre-wrap">{content}</p>
+      </div>
+    </div>
+  );
+}
+
+function AiMessageBlock({
+  message,
+  subAgentIndex,
+  onApproval,
+  isApprovalSubmitting,
+}: {
+  message: AgentMessage;
+  subAgentIndex: Map<string, SubAgentExecution>;
+  onApproval?: (
+    toolCallId: string,
+    action: ApprovalAction,
+    comment?: string,
+  ) => Promise<void>;
+  isApprovalSubmitting?: boolean;
+}) {
+  return (
+    <div className="flex items-start gap-3">
+      <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10">
+        <BotMessageSquare className="size-3.5 text-primary" />
+      </div>
+      <div className="min-w-0 flex-1 space-y-2">
+        {message.content && (
+          <OutputBlock
+            content={message.content}
+            isStreaming={message.isStreaming}
+            model={message.model}
+          />
+        )}
+
+        {message.toolCalls.map((tc) => {
+          const subAgent = subAgentIndex.get(tc.id);
+          if (subAgent) {
+            return (
+              <SubAgentCard
+                key={tc.id}
+                subAgent={subAgent}
+                onApproval={onApproval}
+                isApprovalSubmitting={isApprovalSubmitting}
+              />
+            );
+          }
+          return (
+            <ToolCallCard
+              key={tc.id}
+              toolCall={tc}
+              onApproval={onApproval}
+              isApprovalSubmitting={isApprovalSubmitting}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export function SystemMessageBlock({ content }: { content: string }) {
+  if (!content) return null;
+  return (
+    <div className="flex items-center gap-2 text-xs text-muted-foreground">
+      <Info className="size-3 shrink-0" />
+      <p>{content}</p>
+    </div>
+  );
+}

package/src/execution/components/MessageInput.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useCallback, useRef, type KeyboardEvent } from "react";
+import { Textarea } from "../../internal/ui/textarea";
+import { Button } from "../../internal/ui/button";
+import { cn } from "@stigmer/theme";
+import { SendHorizontal, Loader2 } from "lucide-react";
+
+interface MessageInputProps {
+  onSend: (message: string) => void;
+  disabled?: boolean;
+  isLoading?: boolean;
+  placeholder?: string;
+  className?: string;
+}
+
+export function MessageInput({
+  onSend,
+  disabled = false,
+  isLoading = false,
+  placeholder = "Send a message...",
+  className,
+}: MessageInputProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleSend = useCallback(() => {
+    const value = textareaRef.current?.value.trim();
+    if (!value || disabled || isLoading) return;
+    onSend(value);
+    if (textareaRef.current) {
+      textareaRef.current.value = "";
+    }
+  }, [onSend, disabled, isLoading]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend],
+  );
+
+  return (
+    <div className={cn("flex items-end gap-2", className)}>
+      <Textarea
+        ref={textareaRef}
+        placeholder={placeholder}
+        disabled={disabled || isLoading}
+        onKeyDown={handleKeyDown}
+        className="min-h-10 resize-none"
+        rows={1}
+      />
+      <Button
+        size="icon"
+        onClick={handleSend}
+        disabled={disabled || isLoading}
+        className="shrink-0"
+        aria-label="Send message"
+      >
+        {isLoading ? (
+          <Loader2 className="size-4 animate-spin" />
+        ) : (
+          <SendHorizontal className="size-4" />
+        )}
+      </Button>
+    </div>
+  );
+}

package/src/execution/components/OutputBlock.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { memo } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { cn } from "@stigmer/theme";
+
+interface OutputBlockProps {
+  content: string;
+  isStreaming?: boolean;
+  model?: string;
+  className?: string;
+}
+
+export const OutputBlock = memo(function OutputBlock({
+  content,
+  isStreaming = false,
+  model,
+  className,
+}: OutputBlockProps) {
+  if (!content && !isStreaming) return null;
+
+  return (
+    <div className={cn("relative", className)}>
+      <div className="prose prose-sm dark:prose-invert max-w-none break-words [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:text-xs [&_code]:rounded [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:text-xs [&_code]:before:content-none [&_code]:after:content-none [&_table]:text-xs [&_th]:px-2 [&_th]:py-1 [&_td]:px-2 [&_td]:py-1">
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>
+          {content}
+        </ReactMarkdown>
+        {isStreaming && <StreamingCursor />}
+      </div>
+      {model && !isStreaming && (
+        <p className="mt-1.5 text-[10px] text-muted-foreground/60">
+          {model}
+        </p>
+      )}
+    </div>
+  );
+});
+
+function StreamingCursor() {
+  return (
+    <span
+      className="ml-0.5 inline-block h-4 w-0.5 animate-pulse bg-foreground align-text-bottom"
+      aria-label="Generating..."
+    />
+  );
+}

package/src/execution/components/SubAgentCard.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { useState } from "react";
+import { Badge } from "../../internal/ui/badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../../internal/ui/collapsible";
+import { OutputBlock } from "./OutputBlock";
+import { ToolCallCard } from "./ToolCallCard";
+import {
+  subAgentStatusLabel,
+  subAgentStatusVariant,
+  formatDuration,
+  isAiMessage,
+} from "../helpers";
+import type { SubAgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/subagent_pb";
+import type { ApprovalAction } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { SubAgentStatus } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { cn } from "@stigmer/theme";
+import { ChevronRight, Bot, Loader2 } from "lucide-react";
+
+interface SubAgentCardProps {
+  subAgent: SubAgentExecution;
+  onApproval?: (
+    toolCallId: string,
+    action: ApprovalAction,
+    comment?: string,
+  ) => Promise<void>;
+  isApprovalSubmitting?: boolean;
+  className?: string;
+}
+
+export function SubAgentCard({
+  subAgent,
+  onApproval,
+  isApprovalSubmitting = false,
+  className,
+}: SubAgentCardProps) {
+  const [open, setOpen] = useState(false);
+  const isActive = subAgent.status === SubAgentStatus.SUB_AGENT_IN_PROGRESS;
+  const duration = formatDuration(subAgent.startedAt, subAgent.completedAt);
+  const aiMessages = subAgent.messages.filter((m) => isAiMessage(m.type));
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <div
+        className={cn(
+          "rounded-lg border border-dashed bg-card text-card-foreground text-sm",
+          className,
+        )}
+      >
+        <CollapsibleTrigger className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-muted/50 transition-colors rounded-t-lg">
+          <ChevronRight
+            className={cn(
+              "size-3.5 shrink-0 text-muted-foreground transition-transform",
+              open && "rotate-90",
+            )}
+          />
+          {isActive ? (
+            <Loader2 className="size-3.5 shrink-0 animate-spin text-muted-foreground" />
+          ) : (
+            <Bot className="size-3.5 shrink-0 text-muted-foreground" />
+          )}
+          <span className="truncate font-medium text-xs">
+            {subAgent.subject || subAgent.name}
+          </span>
+          <Badge
+            variant={subAgentStatusVariant(subAgent.status)}
+            className="ml-auto shrink-0 text-[10px]"
+          >
+            {subAgentStatusLabel(subAgent.status)}
+          </Badge>
+          {duration && (
+            <span className="shrink-0 text-[10px] text-muted-foreground">
+              {duration}
+            </span>
+          )}
+          {subAgent.toolCalls.length > 0 && (
+            <span className="shrink-0 text-[10px] text-muted-foreground">
+              {subAgent.toolCalls.length} tool{subAgent.toolCalls.length !== 1 && "s"}
+            </span>
+          )}
+        </CollapsibleTrigger>
+
+        <CollapsibleContent>
+          <div className="border-t px-3 py-2 space-y-3">
+            {subAgent.input && (
+              <div>
+                <p className="mb-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+                  Task
+                </p>
+                <p className="text-xs text-muted-foreground">{subAgent.input}</p>
+              </div>
+            )}
+
+            {aiMessages.map((msg, i) => (
+              <OutputBlock
+                key={i}
+                content={msg.content}
+                isStreaming={msg.isStreaming}
+                model={msg.model}
+              />
+            ))}
+
+            {subAgent.toolCalls.map((tc) => (
+              <ToolCallCard
+                key={tc.id}
+                toolCall={tc}
+                onApproval={onApproval}
+                isApprovalSubmitting={isApprovalSubmitting}
+              />
+            ))}
+
+            {subAgent.error && (
+              <p className="text-xs text-destructive">{subAgent.error}</p>
+            )}
+
+            {subAgent.output && (
+              <div>
+                <p className="mb-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+                  Result
+                </p>
+                <pre className="overflow-x-auto rounded bg-muted p-2 text-[11px] leading-relaxed whitespace-pre-wrap">
+                  {subAgent.output}
+                </pre>
+              </div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}