@stigmer/react 0.0.36

package/src/agent-execution/components/ExecutionStatus.tsx

@@ -0,0 +1,33 @@
+import { Badge } from "../../internal/badge";
+import { phaseLabel, phaseVariant, isTerminalPhase } from "../helpers";
+import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { cn } from "@stigmer/theme";
+import { Loader2 } from "lucide-react";
+
+interface ExecutionStatusProps {
+  phase: ExecutionPhase;
+  className?: string;
+}
+
+export function ExecutionStatus({ phase, className }: ExecutionStatusProps) {
+  const isActive =
+    phase === ExecutionPhase.EXECUTION_IN_PROGRESS ||
+    phase === ExecutionPhase.EXECUTION_PENDING;
+  const isWaiting = phase === ExecutionPhase.EXECUTION_WAITING_FOR_APPROVAL;
+
+  return (
+    <Badge
+      variant={phaseVariant(phase)}
+      className={cn(isWaiting && "animate-pulse", className)}
+    >
+      {isActive && (
+        <Loader2 className="size-3 animate-spin" data-icon="inline-start" />
+      )}
+      {phaseLabel(phase)}
+      {isTerminalPhase(phase) &&
+        phase === ExecutionPhase.EXECUTION_COMPLETED && (
+          <span data-icon="inline-end">✓</span>
+        )}
+    </Badge>
+  );
+}

package/src/agent-execution/components/ExecutionStream.tsx

@@ -0,0 +1,148 @@
+"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, HumanMessageBubble } from "./MessageEntry";
+import { MessageInput } from "./MessageInput";
+import { buildSubAgentIndex, isTerminalPhase } from "../helpers";
+import { cn } from "@stigmer/theme";
+import { Button } from "../../internal/button";
+import { ArrowDown, AlertCircle } from "lucide-react";
+
+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;
+}
+
+export function ExecutionStream(props: ExecutionStreamProps) {
+  const {
+    execution,
+    phase,
+    isConnected: _isConnected,
+    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],
+  );
+
+  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)}>
+      <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-muted-foreground text-xs"
+          >
+            {new Date(execution.status.startedAt).toLocaleTimeString()}
+          </time>
+        )}
+      </div>
+
+      <div
+        ref={scrollRef}
+        onScroll={handleScroll}
+        className="relative flex-1 overflow-y-auto"
+      >
+        <div className="space-y-4 p-4">
+          {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 && (
+            <div className="border-destructive/30 bg-destructive/5 text-destructive flex items-start gap-2 rounded-lg border p-3 text-sm">
+              <AlertCircle className="mt-0.5 size-4 shrink-0" />
+              <p>{error}</p>
+            </div>
+          )}
+
+          {execution?.status?.error && isTerminal && (
+            <div className="border-destructive/30 bg-destructive/5 text-destructive flex items-start gap-2 rounded-lg border p-3 text-sm">
+              <AlertCircle className="mt-0.5 size-4 shrink-0" />
+              <p>{execution.status.error}</p>
+            </div>
+          )}
+
+          <div ref={bottomRef} />
+        </div>
+
+        {!isAtBottom && (
+          <Button
+            size="icon"
+            variant="secondary"
+            onClick={scrollToBottom}
+            className="absolute right-4 bottom-4 z-10 rounded-full shadow-md"
+            aria-label="Scroll to bottom"
+          >
+            <ArrowDown className="size-4" />
+          </Button>
+        )}
+      </div>
+
+      {canSendMessage && (
+        <div className="border-t p-4">
+          <MessageInput
+            onSend={onSendMessage}
+            placeholder="Send a follow-up message..."
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/agent-execution/components/MessageEntry.tsx

@@ -0,0 +1,125 @@
+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";
+
+export interface MessageEntryProps {
+  message: AgentMessage;
+  subAgentIndex: Map<string, SubAgentExecution>;
+  onApproval?: (
+    toolCallId: string,
+    action: ApprovalAction,
+    comment?: string,
+  ) => Promise<void>;
+  isApprovalSubmitting?: boolean;
+}
+
+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} />;
+  }
+
+  return null;
+}
+
+export function HumanMessageBubble({ content }: { content: string }) {
+  return (
+    <div className="flex items-start gap-3">
+      <div className="bg-muted flex size-7 shrink-0 items-center justify-center rounded-full">
+        <User className="text-muted-foreground size-3.5" />
+      </div>
+      <div className="bg-muted min-w-0 flex-1 rounded-lg 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="bg-primary/10 flex size-7 shrink-0 items-center justify-center rounded-full">
+        <BotMessageSquare className="text-primary size-3.5" />
+      </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="text-muted-foreground flex items-center gap-2 text-xs">
+      <Info className="size-3 shrink-0" />
+      <p>{content}</p>
+    </div>
+  );
+}

package/src/agent-execution/components/MessageInput.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useCallback, useRef, type KeyboardEvent } from "react";
+import { Textarea } from "../../internal/textarea";
+import { Button } from "../../internal/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/agent-execution/components/OutputBlock.tsx

@@ -0,0 +1,43 @@
+"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 [&_pre]:bg-muted [&_code]:bg-muted max-w-none break-words [&_code]:rounded [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:text-xs [&_code]:before:content-none [&_code]:after:content-none [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:p-3 [&_pre]:text-xs [&_table]:text-xs [&_td]:px-2 [&_td]:py-1 [&_th]:px-2 [&_th]:py-1">
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+        {isStreaming && <StreamingCursor />}
+      </div>
+      {model && !isStreaming && (
+        <p className="text-muted-foreground/60 mt-1.5 text-[10px]">{model}</p>
+      )}
+    </div>
+  );
+});
+
+function StreamingCursor() {
+  return (
+    <span
+      className="bg-foreground ml-0.5 inline-block h-4 w-0.5 animate-pulse align-text-bottom"
+      aria-label="Generating..."
+    />
+  );
+}

package/src/agent-execution/components/SubAgentCard.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useState } from "react";
+import { Badge } from "../../internal/badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../../internal/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(
+          "bg-card text-card-foreground rounded-lg border border-dashed text-sm",
+          className,
+        )}
+      >
+        <CollapsibleTrigger className="hover:bg-muted/50 flex w-full items-center gap-2 rounded-t-lg px-3 py-2 text-left transition-colors">
+          <ChevronRight
+            className={cn(
+              "text-muted-foreground size-3.5 shrink-0 transition-transform",
+              open && "rotate-90",
+            )}
+          />
+          {isActive ? (
+            <Loader2 className="text-muted-foreground size-3.5 shrink-0 animate-spin" />
+          ) : (
+            <Bot className="text-muted-foreground size-3.5 shrink-0" />
+          )}
+          <span className="truncate text-xs font-medium">
+            {subAgent.subject || subAgent.name}
+          </span>
+          <Badge
+            variant={subAgentStatusVariant(subAgent.status)}
+            className="ml-auto shrink-0 text-[10px]"
+          >
+            {subAgentStatusLabel(subAgent.status)}
+          </Badge>
+          {duration && (
+            <span className="text-muted-foreground shrink-0 text-[10px]">
+              {duration}
+            </span>
+          )}
+          {subAgent.toolCalls.length > 0 && (
+            <span className="text-muted-foreground shrink-0 text-[10px]">
+              {subAgent.toolCalls.length} tool
+              {subAgent.toolCalls.length !== 1 && "s"}
+            </span>
+          )}
+        </CollapsibleTrigger>
+
+        <CollapsibleContent>
+          <div className="space-y-3 border-t px-3 py-2">
+            {subAgent.input && (
+              <div>
+                <p className="text-muted-foreground mb-1 text-[10px] font-medium tracking-wider uppercase">
+                  Task
+                </p>
+                <p className="text-muted-foreground text-xs">
+                  {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-destructive text-xs">{subAgent.error}</p>
+            )}
+
+            {subAgent.output && (
+              <div>
+                <p className="text-muted-foreground mb-1 text-[10px] font-medium tracking-wider uppercase">
+                  Result
+                </p>
+                <pre className="bg-muted overflow-x-auto rounded p-2 text-[11px] leading-relaxed whitespace-pre-wrap">
+                  {subAgent.output}
+                </pre>
+              </div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}