@stigmer/react 0.0.36

package/src/agent/components/AgentOverview.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { useState } from "react";
+import type { Agent } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/api_pb";
+import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
+import {
+  Bot,
+  Globe,
+  Users,
+  Server,
+  FileCode2,
+  Wrench,
+  ChevronDown,
+} from "lucide-react";
+
+import { cn } from "@stigmer/theme";
+
+import { Badge } from "../../internal/badge";
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "../../internal/collapsible";
+import { Section } from "../../internal/section";
+
+const INSTRUCTIONS_COLLAPSE_THRESHOLD = 300;
+
+export interface AgentOverviewProps {
+  agent: Agent;
+  className?: string;
+}
+
+export function AgentOverview({ agent, className }: AgentOverviewProps) {
+  const meta = agent.metadata;
+  const spec = agent.spec;
+  const isPublic = meta?.visibility === ApiResourceVisibility.visibility_public;
+  const qualifiedSlug = meta?.org ? `${meta.org}/${meta.slug}` : meta?.slug;
+  const hasLongInstructions =
+    (spec?.instructions?.length ?? 0) > INSTRUCTIONS_COLLAPSE_THRESHOLD;
+
+  return (
+    <div className={cn("space-y-8", className)}>
+      <div className="space-y-2">
+        <div className="flex items-center gap-3">
+          {spec?.iconUrl ? (
+            <img
+              src={spec.iconUrl}
+              alt=""
+              className="size-10 rounded-lg object-cover"
+            />
+          ) : (
+            <div className="bg-muted flex size-10 items-center justify-center rounded-lg">
+              <Bot className="text-muted-foreground size-5" />
+            </div>
+          )}
+          <div>
+            <h2 className="text-xl font-semibold">{meta?.name}</h2>
+            <p className="text-muted-foreground font-mono text-xs">
+              {qualifiedSlug}
+            </p>
+          </div>
+        </div>
+        {spec?.description && (
+          <p className="text-muted-foreground max-w-prose text-sm">
+            {spec.description}
+          </p>
+        )}
+        <div className="flex items-center gap-2">
+          {isPublic ? (
+            <Badge variant="outline" className="gap-1">
+              <Globe className="size-3" />
+              Public
+            </Badge>
+          ) : (
+            <Badge variant="secondary" className="gap-1">
+              <Users className="size-3" />
+              Private
+            </Badge>
+          )}
+          {meta?.tags?.map((tag: string) => (
+            <Badge key={tag} variant="secondary">
+              {tag}
+            </Badge>
+          ))}
+        </div>
+      </div>
+
+      {spec?.instructions && (
+        <Section title="Instructions">
+          {hasLongInstructions ? (
+            <CollapsibleInstructions instructions={spec.instructions} />
+          ) : (
+            <pre className="bg-muted rounded-lg p-4 font-mono text-xs leading-relaxed whitespace-pre-wrap">
+              {spec.instructions}
+            </pre>
+          )}
+        </Section>
+      )}
+
+      {spec?.mcpServerUsages && spec.mcpServerUsages.length > 0 && (
+        <Section title="MCP Servers">
+          <div className="space-y-3">
+            {spec.mcpServerUsages.map((usage, i) => {
+              const ref = usage.mcpServerRef;
+              const slug = ref
+                ? ref.org
+                  ? `${ref.org}/${ref.slug}`
+                  : ref.slug
+                : `server-${i}`;
+              return (
+                <div key={slug} className="rounded-lg border p-3 text-sm">
+                  <div className="flex items-center gap-2">
+                    <Server className="text-muted-foreground size-4 shrink-0" />
+                    <span className="font-mono font-medium">{slug}</span>
+                  </div>
+                  {usage.enabledTools.length > 0 && (
+                    <div className="mt-2 flex flex-wrap gap-1">
+                      {usage.enabledTools.map((tool) => (
+                        <Badge
+                          key={tool}
+                          variant="secondary"
+                          className="text-[10px]"
+                        >
+                          <Wrench className="mr-0.5 size-2.5" />
+                          {tool}
+                        </Badge>
+                      ))}
+                    </div>
+                  )}
+                  {usage.toolApprovalOverrides.length > 0 && (
+                    <div className="text-muted-foreground mt-2 text-xs">
+                      {usage.toolApprovalOverrides.length} approval override
+                      {usage.toolApprovalOverrides.length !== 1 ? "s" : ""}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </Section>
+      )}
+
+      {spec?.skillRefs && spec.skillRefs.length > 0 && (
+        <Section title="Skills">
+          <div className="space-y-2">
+            {spec.skillRefs.map((ref, i) => {
+              const slug = ref.org ? `${ref.org}/${ref.slug}` : ref.slug;
+              return (
+                <div
+                  key={slug || i}
+                  className="flex items-center gap-2 rounded-lg border p-3 text-sm"
+                >
+                  <FileCode2 className="text-muted-foreground size-4 shrink-0" />
+                  <span className="font-mono font-medium">{slug}</span>
+                </div>
+              );
+            })}
+          </div>
+        </Section>
+      )}
+
+      {spec?.subAgents && spec.subAgents.length > 0 && (
+        <Section title="Sub-Agents">
+          <div className="space-y-3">
+            {spec.subAgents.map((sub) => (
+              <div key={sub.name} className="rounded-lg border p-3 text-sm">
+                <div className="flex items-center gap-2">
+                  <Bot className="text-muted-foreground size-4 shrink-0" />
+                  <span className="font-medium">{sub.name}</span>
+                  {sub.modelOverride && (
+                    <Badge variant="outline" className="text-[10px]">
+                      {sub.modelOverride}
+                    </Badge>
+                  )}
+                </div>
+                {sub.description && (
+                  <p className="text-muted-foreground mt-1 text-xs">
+                    {sub.description}
+                  </p>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+    </div>
+  );
+}
+
+function CollapsibleInstructions({ instructions }: { instructions: string }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <pre className="bg-muted rounded-lg p-4 font-mono text-xs leading-relaxed whitespace-pre-wrap">
+        {open
+          ? instructions
+          : instructions.slice(0, INSTRUCTIONS_COLLAPSE_THRESHOLD) + "..."}
+      </pre>
+      <CollapsibleContent />
+      <CollapsibleTrigger className="text-muted-foreground hover:text-foreground mt-2 flex items-center gap-1 text-xs">
+        <ChevronDown
+          className={cn("size-3.5 transition-transform", open && "rotate-180")}
+        />
+        {open ? "Show less" : "Show full instructions"}
+      </CollapsibleTrigger>
+    </Collapsible>
+  );
+}

package/src/agent/components/AgentPicker.tsx

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

@@ -0,0 +1,94 @@
+"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/index.ts

@@ -0,0 +1,17 @@
+// Hooks
+export { useAgentSearch } from "./hooks/useAgentSearch";
+export type {
+  UseAgentSearchOptions,
+  UseAgentSearchReturn,
+  AgentSearchResult,
+} from "./hooks/useAgentSearch";
+
+// Components
+export { AgentCard } from "./components/AgentCard";
+export type { AgentCardProps } from "./components/AgentCard";
+
+export { AgentOverview } from "./components/AgentOverview";
+export type { AgentOverviewProps } from "./components/AgentOverview";
+
+export { AgentPicker } from "./components/AgentPicker";
+export type { AgentPickerProps, SelectedAgent } from "./components/AgentPicker";

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

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