@stigmer/react 0.0.36 → 0.0.40

package/src/agent/components/AgentPicker.tsx

@@ -1,255 +0,0 @@
-"use client";
-
-import {
-  useCallback,
-  useId,
-  useRef,
-  useState,
-  type KeyboardEvent,
-} from "react";
-import { Bot, Search, X, Loader2 } from "lucide-react";
-import { cn } from "@stigmer/theme";
-import { useAgentSearch, type AgentSearchResult } from "../hooks/useAgentSearch";
-
-export interface SelectedAgent {
-  id: string;
-  name: string;
-  qualifiedSlug: string;
-  org: string;
-  description: string;
-}
-
-export interface AgentPickerProps {
-  org: string;
-  onSelect: (agent: SelectedAgent) => void;
-  onClear: () => void;
-  selected: SelectedAgent | null;
-  disabled?: boolean;
-  className?: string;
-}
-
-export function AgentPicker({
-  org,
-  onSelect,
-  onClear,
-  selected,
-  disabled = false,
-  className,
-}: AgentPickerProps) {
-  const instanceId = useId();
-  const listboxId = `${instanceId}-listbox`;
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const { query, setQuery, results, isLoading, error } = useAgentSearch({ org });
-  const [activeIndex, setActiveIndex] = useState(-1);
-  const [isOpen, setIsOpen] = useState(false);
-
-  const showResults = isOpen && !selected;
-
-  const handleSelect = useCallback(
-    (index: number) => {
-      const result = results[index];
-      if (!result) return;
-      onSelect({
-        id: result.id,
-        name: result.name,
-        qualifiedSlug: result.qualifiedSlug,
-        org: result.org,
-        description: result.description,
-      });
-      setIsOpen(false);
-      setActiveIndex(-1);
-    },
-    [results, onSelect],
-  );
-
-  const handleClear = useCallback(() => {
-    onClear();
-    setQuery("");
-    setActiveIndex(-1);
-    setIsOpen(true);
-    requestAnimationFrame(() => inputRef.current?.focus());
-  }, [onClear, setQuery]);
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLInputElement>) => {
-      if (!showResults) return;
-
-      switch (e.key) {
-        case "ArrowDown": {
-          e.preventDefault();
-          setActiveIndex((prev) => (prev < results.length - 1 ? prev + 1 : 0));
-          break;
-        }
-        case "ArrowUp": {
-          e.preventDefault();
-          setActiveIndex((prev) => (prev > 0 ? prev - 1 : results.length - 1));
-          break;
-        }
-        case "Enter": {
-          e.preventDefault();
-          if (activeIndex >= 0 && activeIndex < results.length) {
-            handleSelect(activeIndex);
-          }
-          break;
-        }
-        case "Escape": {
-          e.preventDefault();
-          setIsOpen(false);
-          setActiveIndex(-1);
-          break;
-        }
-      }
-    },
-    [showResults, results.length, activeIndex, handleSelect],
-  );
-
-  if (selected) {
-    return (
-      <div className={cn("stgm-agent-picker space-y-1", className)}>
-        <label className="text-muted-foreground text-sm font-medium">
-          Agent
-        </label>
-        <div className="bg-muted/50 flex items-center gap-3 rounded-lg border px-3 py-2.5">
-          <div className="bg-primary/10 flex size-8 shrink-0 items-center justify-center rounded-md">
-            <Bot className="text-primary size-4" />
-          </div>
-          <div className="min-w-0 flex-1">
-            <p className="truncate text-sm font-medium">{selected.name}</p>
-            <p className="text-muted-foreground truncate font-mono text-xs">
-              {selected.qualifiedSlug}
-            </p>
-          </div>
-          <button
-            type="button"
-            onClick={handleClear}
-            disabled={disabled}
-            aria-label="Change agent"
-            className={cn(
-              "inline-flex size-7 shrink-0 items-center justify-center rounded-md",
-              "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
-              "transition-colors focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
-              "disabled:pointer-events-none disabled:opacity-50",
-            )}
-          >
-            <X className="size-3.5" />
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  const activeOptionId =
-    activeIndex >= 0 ? `${instanceId}-option-${activeIndex}` : undefined;
-
-  return (
-    <div className={cn("stgm-agent-picker space-y-1", className)}>
-      <label
-        htmlFor={`${instanceId}-input`}
-        className="text-muted-foreground text-sm font-medium"
-      >
-        Agent
-      </label>
-
-      <div className="relative">
-        <div className="relative">
-          <Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2" />
-          <input
-            ref={inputRef}
-            id={`${instanceId}-input`}
-            type="text"
-            role="combobox"
-            aria-expanded={showResults}
-            aria-controls={listboxId}
-            aria-activedescendant={activeOptionId}
-            aria-autocomplete="list"
-            aria-label="Search agents"
-            value={query}
-            disabled={disabled}
-            placeholder="Search agents..."
-            className={cn(
-              "bg-background w-full rounded-lg border py-2.5 pr-9 pl-9 text-sm",
-              "placeholder:text-muted-foreground",
-              "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
-              "disabled:cursor-not-allowed disabled:opacity-50",
-            )}
-            onChange={(e) => {
-              setQuery(e.target.value);
-              setActiveIndex(-1);
-              if (!isOpen) setIsOpen(true);
-            }}
-            onFocus={() => setIsOpen(true)}
-            onBlur={() => {
-              setTimeout(() => setIsOpen(false), 150);
-            }}
-            onKeyDown={handleKeyDown}
-          />
-          {isLoading && (
-            <Loader2 className="text-muted-foreground absolute top-1/2 right-3 size-4 -translate-y-1/2 animate-spin" />
-          )}
-        </div>
-
-        {showResults && (
-          <ul
-            id={listboxId}
-            role="listbox"
-            aria-label="Agent search results"
-            className={cn(
-              "bg-popover absolute z-popover mt-1 max-h-64 w-full overflow-y-auto rounded-lg border shadow-md",
-              results.length === 0 && !isLoading && "p-3",
-            )}
-          >
-            {results.length === 0 && !isLoading && (
-              <li
-                className="text-muted-foreground text-center text-sm"
-                role="presentation"
-              >
-                {error
-                  ? error
-                  : query
-                    ? "No agents found"
-                    : "No agents available"}
-              </li>
-            )}
-
-            {results.map((result, index) => (
-              <li
-                key={result.id}
-                id={`${instanceId}-option-${index}`}
-                role="option"
-                aria-selected={index === activeIndex}
-                className={cn(
-                  "flex cursor-pointer items-start gap-3 px-3 py-2.5",
-                  "transition-colors",
-                  index === activeIndex
-                    ? "bg-accent text-accent-foreground"
-                    : "hover:bg-accent/50",
-                )}
-                onMouseDown={(e) => {
-                  e.preventDefault();
-                }}
-                onClick={() => handleSelect(index)}
-                onMouseEnter={() => setActiveIndex(index)}
-              >
-                <div className="bg-primary/10 mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-md">
-                  <Bot className="text-primary size-3.5" />
-                </div>
-                <div className="min-w-0 flex-1">
-                  <p className="truncate text-sm font-medium">{result.name}</p>
-                  <p className="text-muted-foreground truncate font-mono text-xs">
-                    {result.qualifiedSlug}
-                  </p>
-                  {result.description && (
-                    <p className="text-muted-foreground/70 mt-0.5 line-clamp-1 text-xs">
-                      {result.description}
-                    </p>
-                  )}
-                </div>
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/agent/hooks/useAgentSearch.ts

@@ -1,94 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useStigmer } from "../../hooks";
-import type { SearchResult } from "@stigmer/protos/ai/stigmer/search/v1/io_pb";
-
-const DEBOUNCE_MS = 300;
-const DEFAULT_PAGE_SIZE = 20;
-
-export interface AgentSearchResult {
-  id: string;
-  name: string;
-  qualifiedSlug: string;
-  org: string;
-  description: string;
-}
-
-export interface UseAgentSearchOptions {
-  org: string;
-  debounceMs?: number;
-  pageSize?: number;
-}
-
-export interface UseAgentSearchReturn {
-  query: string;
-  setQuery: (query: string) => void;
-  results: AgentSearchResult[];
-  isLoading: boolean;
-  error: string | null;
-}
-
-function toAgentSearchResult(r: SearchResult): AgentSearchResult {
-  return {
-    id: r.id,
-    name: r.name,
-    qualifiedSlug: r.qualifiedSlug,
-    org: r.org,
-    description: r.description,
-  };
-}
-
-/**
- * Debounced agent search scoped to a specific organization.
- *
- * On mount fetches all accessible agents (empty query). Typing fires at most
- * one request per debounce interval. Stale responses from out-of-order
- * requests are discarded.
- */
-export function useAgentSearch(options: UseAgentSearchOptions): UseAgentSearchReturn {
-  const { org, debounceMs = DEBOUNCE_MS, pageSize = DEFAULT_PAGE_SIZE } = options;
-  const stigmer = useStigmer();
-
-  const [query, setQuery] = useState("");
-  const [results, setResults] = useState<AgentSearchResult[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const latestRequestId = useRef(0);
-  const debouncedQuery = useDebouncedValue(query, debounceMs);
-
-  useEffect(() => {
-    const requestId = ++latestRequestId.current;
-    setIsLoading(true);
-    setError(null);
-
-    stigmer.agent
-      .list({ query: debouncedQuery, org, page: { num: 1, size: pageSize } })
-      .then((response) => {
-        if (requestId !== latestRequestId.current) return;
-        setResults(response.entries.map(toAgentSearchResult));
-      })
-      .catch((err: unknown) => {
-        if (requestId !== latestRequestId.current) return;
-        setError(err instanceof Error ? err.message : "Search failed");
-      })
-      .finally(() => {
-        if (requestId !== latestRequestId.current) return;
-        setIsLoading(false);
-      });
-  }, [debouncedQuery, org, pageSize, stigmer]);
-
-  return { query, setQuery, results, isLoading, error };
-}
-
-function useDebouncedValue<T>(value: T, delayMs: number): T {
-  const [debounced, setDebounced] = useState(value);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setDebounced(value), delayMs);
-    return () => clearTimeout(timer);
-  }, [value, delayMs]);
-
-  return debounced;
-}

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

@@ -1,99 +0,0 @@
-"use client";
-
-import { useCallback, useState } from "react";
-import { Button } from "../../internal/button";
-import { Textarea } from "../../internal/textarea";
-import { ApprovalAction } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
-import { cn } from "@stigmer/theme";
-import { Check, X, SkipForward, Loader2 } from "lucide-react";
-
-interface ApprovalControlsProps {
-  approvalMessage: string;
-  onSubmit: (action: ApprovalAction, comment?: string) => Promise<void>;
-  isSubmitting: boolean;
-  className?: string;
-}
-
-export function ApprovalControls({
-  approvalMessage,
-  onSubmit,
-  isSubmitting,
-  className,
-}: ApprovalControlsProps) {
-  const [showComment, setShowComment] = useState(false);
-  const [comment, setComment] = useState("");
-
-  const handleAction = useCallback(
-    async (action: ApprovalAction) => {
-      await onSubmit(action, comment || undefined);
-      setComment("");
-      setShowComment(false);
-    },
-    [onSubmit, comment],
-  );
-
-  return (
-    <div
-      className={cn(
-        "border-primary/30 bg-primary/5 space-y-3 rounded-lg border-2 p-3",
-        className,
-      )}
-    >
-      <p className="text-sm font-medium">{approvalMessage}</p>
-
-      {showComment && (
-        <Textarea
-          value={comment}
-          onChange={(e) => setComment(e.target.value)}
-          placeholder="Optional comment..."
-          className="min-h-10 text-sm"
-          disabled={isSubmitting}
-        />
-      )}
-
-      <div className="flex items-center gap-2">
-        <Button
-          size="sm"
-          onClick={() => handleAction(ApprovalAction.APPROVE)}
-          disabled={isSubmitting}
-        >
-          {isSubmitting ? (
-            <Loader2 className="size-3.5 animate-spin" />
-          ) : (
-            <Check className="size-3.5" />
-          )}
-          Approve
-        </Button>
-        <Button
-          size="sm"
-          variant="secondary"
-          onClick={() => handleAction(ApprovalAction.SKIP)}
-          disabled={isSubmitting}
-        >
-          <SkipForward className="size-3.5" />
-          Skip
-        </Button>
-        <Button
-          size="sm"
-          variant="destructive"
-          onClick={() => handleAction(ApprovalAction.REJECT)}
-          disabled={isSubmitting}
-        >
-          <X className="size-3.5" />
-          Reject
-        </Button>
-        {!showComment && (
-          <Button
-            size="sm"
-            variant="ghost"
-            onClick={() => setShowComment(true)}
-            disabled={isSubmitting}
-            className="text-muted-foreground ml-auto text-xs"
-          >
-            Add comment
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,33 +0,0 @@
-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

@@ -1,148 +0,0 @@
-"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>
-  );
-}