@greatapps/greatagents-ui 0.3.3 → 0.3.4

package/src/hooks/use-capabilities.ts

@@ -0,0 +1,50 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import type { GagentsHookConfig } from "./types";
+import { useGagentsClient } from "./types";
+import type { CapabilitiesResponse, AgentCapability, AgentCapabilitiesPayload } from "../types/capabilities";
+
+export function useCapabilities(config: GagentsHookConfig) {
+  const client = useGagentsClient(config);
+
+  return useQuery({
+    queryKey: ["greatagents", "capabilities", config.accountId],
+    queryFn: async (): Promise<CapabilitiesResponse> => {
+      const res = await client.getCapabilities(config.accountId);
+      return (res.data as unknown as CapabilitiesResponse) ?? { product: null, categories: [] };
+    },
+    enabled: !!config.token && !!config.accountId,
+  });
+}
+
+export function useAgentCapabilities(config: GagentsHookConfig, agentId: number | null) {
+  const client = useGagentsClient(config);
+
+  return useQuery({
+    queryKey: ["greatagents", "agent-capabilities", config.accountId, agentId],
+    queryFn: async (): Promise<AgentCapability[]> => {
+      const res = await client.getAgentCapabilities(config.accountId, agentId!);
+      const d = res.data;
+      return (Array.isArray(d) ? d : []) as AgentCapability[];
+    },
+    enabled: !!config.token && !!config.accountId && !!agentId,
+  });
+}
+
+export function useUpdateAgentCapabilities(config: GagentsHookConfig) {
+  const client = useGagentsClient(config);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ agentId, payload }: { agentId: number; payload: AgentCapabilitiesPayload }) =>
+      client.updateAgentCapabilities(config.accountId, agentId, payload),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatagents", "agent-capabilities", config.accountId, variables.agentId],
+      });
+      // Also invalidate agent-tools since capabilities map to tools
+      queryClient.invalidateQueries({
+        queryKey: ["greatagents", "agent-tools"],
+      });
+    },
+  });
+}

package/src/hooks/use-integrations.ts

@@ -0,0 +1,114 @@
+import { useMemo } from "react";
+import type { GagentsHookConfig } from "./types";
+import { useToolCredentials } from "./use-settings";
+import { useAgentTools } from "./use-agent-tools";
+import { useTools } from "./use-tools";
+import {
+  INTEGRATIONS_REGISTRY,
+  type IntegrationDefinition,
+} from "../data/integrations-registry";
+import type { AgentTool, Tool, ToolCredential } from "../types";
+
+// ---------------------------------------------------------------------------
+// Public types
+// ---------------------------------------------------------------------------
+
+export type IntegrationCardState =
+  | "available"
+  | "connected"
+  | "expired"
+  | "coming_soon";
+
+export interface IntegrationCardData {
+  /** Static definition from registry */
+  definition: IntegrationDefinition;
+  /** Resolved visual state */
+  state: IntegrationCardState;
+  /** Matching credential if one exists */
+  credential: ToolCredential | null;
+  /** Matching tool record if one exists */
+  tool: Tool | null;
+  /** How many agents share this credential */
+  sharedByAgentsCount: number;
+  /** Whether this agent has a linked agent_tool for this integration */
+  linkedToAgent: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
+/**
+ * Cross-references the static integrations registry with live data
+ * (tools, tool_credentials, agent_tools) to produce card state for each
+ * integration entry.
+ */
+export function useIntegrationState(
+  config: GagentsHookConfig,
+  agentId: number | null,
+) {
+  const { data: credentialsData, isLoading: loadingCredentials } =
+    useToolCredentials(config);
+  const { data: toolsData, isLoading: loadingTools } = useTools(config);
+  const { data: agentToolsData, isLoading: loadingAgentTools } = useAgentTools(
+    config,
+    agentId ?? 0,
+  );
+
+  const isLoading = loadingCredentials || loadingTools || loadingAgentTools;
+
+  const cards: IntegrationCardData[] = useMemo(() => {
+    const credentials: ToolCredential[] = credentialsData?.data ?? [];
+    const tools: Tool[] = toolsData?.data ?? [];
+    const agentTools: AgentTool[] = agentToolsData?.data ?? [];
+
+    return INTEGRATIONS_REGISTRY.map((def) => {
+      // coming_soon short-circuit
+      if (def.status === "coming_soon") {
+        return {
+          definition: def,
+          state: "coming_soon" as const,
+          credential: null,
+          tool: null,
+          sharedByAgentsCount: 0,
+          linkedToAgent: false,
+        };
+      }
+
+      // Find tool record matching registry slug
+      const matchedTool = tools.find((t) => t.slug === def.slug) ?? null;
+
+      // Find credential for that tool
+      const matchedCredential = matchedTool
+        ? credentials.find((c) => c.id_tool === matchedTool.id) ?? null
+        : null;
+
+      // Check if this agent has a linked agent_tool for this tool
+      const linkedToAgent = matchedTool
+        ? agentTools.some((at) => at.id_tool === matchedTool.id)
+        : false;
+
+      // Sharing indicator: credential exists at account level (available to all agents)
+      // When a credential is account-scoped, any agent can use it — show as "shared"
+      const sharedByAgentsCount = matchedCredential ? 1 : 0;
+
+      // Determine state
+      let state: IntegrationCardState = "available";
+      if (matchedCredential) {
+        state =
+          matchedCredential.status === "expired" ? "expired" : "connected";
+      }
+
+      return {
+        definition: def,
+        state,
+        credential: matchedCredential,
+        tool: matchedTool,
+        sharedByAgentsCount,
+        linkedToAgent,
+      };
+    });
+  }, [credentialsData, toolsData, agentToolsData]);
+
+  return { cards, isLoading };
+}

package/src/index.ts

@@ -13,6 +13,12 @@ export type {
   PromptVersion,
   Tool,
   ToolCredential,
+  CapabilityOperation,
+  CapabilityModule,
+  CapabilityCategory,
+  CapabilitiesResponse,
+  AgentCapability,
+  AgentCapabilitiesPayload,
 } from "./types";
 
 // Client
@@ -41,5 +47,33 @@ export { AgentConversationsPanel } from "./components/conversations/agent-conver
 export { AgentConversationsTable } from "./components/conversations/agent-conversations-table";
 export { ConversationView } from "./components/conversations/conversation-view";
 
+// Capabilities
+export { IntegrationCard } from "./components/capabilities/integration-card";
+export type { IntegrationCardProps } from "./components/capabilities/integration-card";
+export { IntegrationsTab } from "./components/capabilities/integrations-tab";
+export type { IntegrationsTabProps } from "./components/capabilities/integrations-tab";
+export { CapabilitiesTab } from "./components/capabilities/capabilities-tab";
+export type { CapabilitiesTabProps } from "./components/capabilities/capabilities-tab";
+export { AdvancedTab } from "./components/capabilities/advanced-tab";
+export type { AdvancedTabProps } from "./components/capabilities/advanced-tab";
+export { IntegrationWizard } from "./components/capabilities/integration-wizard";
+export type { IntegrationWizardProps } from "./components/capabilities/integration-wizard";
+export type {
+  WizardIntegrationMeta,
+  IntegrationCapability,
+  WizardStep,
+  OAuthStatus,
+  OAuthResult,
+} from "./components/capabilities/types";
+export type { ConfigOption } from "./components/capabilities/wizard-steps/config-step";
+
+// Data
+export { INTEGRATIONS_REGISTRY } from "./data/integrations-registry";
+export type {
+  IntegrationDefinition,
+  IntegrationAuthType,
+  IntegrationStatus,
+} from "./data/integrations-registry";
+
 // Page Compositions
 export * from "./pages";

package/src/pages/agent-capabilities-page.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import { useState, useCallback } from "react";
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "@greatapps/greatauth-ui/ui";
+import { Blocks, Plug, Settings } from "lucide-react";
+
+import type { GagentsHookConfig } from "../hooks/types";
+import type { IntegrationCardData } from "../hooks/use-integrations";
+import type { WizardIntegrationMeta } from "../components/capabilities/types";
+import { CapabilitiesTab } from "../components/capabilities/capabilities-tab";
+import { IntegrationsTab } from "../components/capabilities/integrations-tab";
+import { IntegrationWizard } from "../components/capabilities/integration-wizard";
+import { AdvancedTab } from "../components/capabilities/advanced-tab";
+import type { ConfigOption } from "../components/capabilities/wizard-steps/config-step";
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface AgentCapabilitiesPageProps {
+  config: GagentsHookConfig;
+  agentId: number;
+  gagentsApiUrl: string;
+  /**
+   * Resolve wizard metadata for a given integration card.
+   * The consuming app provides this so the wizard gets correct
+   * capabilities, requirements, and config step flag.
+   */
+  resolveWizardMeta?: (card: IntegrationCardData) => WizardIntegrationMeta;
+  /**
+   * Callback to load config options after OAuth completes
+   * (e.g. load Google Calendar list). Forwarded to IntegrationWizard.
+   */
+  loadConfigOptions?: (credentialId: number) => Promise<ConfigOption[]>;
+  /** Called after wizard completes successfully. */
+  onWizardComplete?: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Default wizard meta resolver
+// ---------------------------------------------------------------------------
+
+function defaultResolveWizardMeta(card: IntegrationCardData): WizardIntegrationMeta {
+  return {
+    capabilities: [
+      { label: card.definition.name, description: card.definition.description },
+    ],
+    requirements: [],
+    hasConfigStep: false,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function AgentCapabilitiesPage({
+  config,
+  agentId,
+  gagentsApiUrl,
+  resolveWizardMeta = defaultResolveWizardMeta,
+  loadConfigOptions,
+  onWizardComplete,
+}: AgentCapabilitiesPageProps) {
+  // Wizard dialog state
+  const [wizardOpen, setWizardOpen] = useState(false);
+  const [activeCard, setActiveCard] = useState<IntegrationCardData | null>(null);
+
+  const handleConnect = useCallback(
+    (card: IntegrationCardData) => {
+      setActiveCard(card);
+      setWizardOpen(true);
+    },
+    [],
+  );
+
+  const handleWizardComplete = useCallback(() => {
+    setWizardOpen(false);
+    setActiveCard(null);
+    onWizardComplete?.();
+  }, [onWizardComplete]);
+
+  const handleWizardOpenChange = useCallback((open: boolean) => {
+    setWizardOpen(open);
+    if (!open) setActiveCard(null);
+  }, []);
+
+  // Derive wizard meta from active card
+  const wizardMeta = activeCard ? resolveWizardMeta(activeCard) : null;
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h2 className="text-lg font-semibold">Capacidades e Integrações</h2>
+        <p className="text-sm text-muted-foreground">
+          Configure o que este agente pode fazer e quais serviços externos ele utiliza.
+        </p>
+      </div>
+
+      <Tabs defaultValue="capacidades">
+        <TabsList>
+          <TabsTrigger value="capacidades" className="flex items-center gap-1.5">
+            <Blocks aria-hidden="true" className="h-3.5 w-3.5" />
+            Capacidades
+          </TabsTrigger>
+          <TabsTrigger value="integracoes" className="flex items-center gap-1.5">
+            <Plug aria-hidden="true" className="h-3.5 w-3.5" />
+            Integrações
+          </TabsTrigger>
+          <TabsTrigger value="avancado" className="flex items-center gap-1.5">
+            <Settings aria-hidden="true" className="h-3.5 w-3.5" />
+            Avançado
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="capacidades" className="mt-4">
+          <CapabilitiesTab config={config} agentId={agentId} />
+        </TabsContent>
+
+        <TabsContent value="integracoes" className="mt-4">
+          <IntegrationsTab
+            config={config}
+            agentId={agentId}
+            onConnect={handleConnect}
+          />
+        </TabsContent>
+
+        <TabsContent value="avancado" className="mt-4">
+          <AdvancedTab
+            config={config}
+            agentId={agentId}
+            gagentsApiUrl={gagentsApiUrl}
+          />
+        </TabsContent>
+      </Tabs>
+
+      {/* Integration Wizard Dialog */}
+      {activeCard && wizardMeta && (
+        <IntegrationWizard
+          open={wizardOpen}
+          onOpenChange={handleWizardOpenChange}
+          integration={activeCard.definition}
+          meta={wizardMeta}
+          agentId={agentId}
+          config={config}
+          onComplete={handleWizardComplete}
+          gagentsApiUrl={gagentsApiUrl}
+          existingCredentialId={activeCard.credential?.id}
+          loadConfigOptions={loadConfigOptions}
+        />
+      )}
+    </div>
+  );
+}

package/src/pages/index.ts

@@ -1,4 +1,6 @@
 export { AgentsPage, type AgentsPageProps } from "./agents-page";
 export { AgentDetailPage, type AgentDetailPageProps } from "./agent-detail-page";
+export { AgentCapabilitiesPage, type AgentCapabilitiesPageProps } from "./agent-capabilities-page";
 export { ToolsPage, type ToolsPageProps } from "./tools-page";
 export { CredentialsPage, type CredentialsPageProps } from "./credentials-page";
+export { IntegrationsManagementPage, type IntegrationsManagementPageProps } from "./integrations-management-page";

package/src/pages/integrations-management-page.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import { useState, useMemo } from "react";
+import { useToolCredentials, useAgents, useTools } from "../hooks";
+import { ToolCredentialsForm } from "../components/tools/tool-credentials-form";
+import { IntegrationsTab } from "../components/capabilities/integrations-tab";
+import {
+  Badge,
+  Button,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@greatapps/greatauth-ui/ui";
+import { Plus, Plug, KeyRound, Info } from "lucide-react";
+import type { GagentsHookConfig } from "../hooks/types";
+import type { IntegrationCardData } from "../hooks/use-integrations";
+import type { Agent, Tool, ToolCredential } from "../types";
+
+export interface IntegrationsManagementPageProps {
+  config: GagentsHookConfig;
+  gagentsApiUrl: string;
+  /** Called when user clicks connect/reconnect on an integration card. */
+  onConnect?: (card: IntegrationCardData) => void;
+  title?: string;
+  subtitle?: string;
+}
+
+/**
+ * Build a map of credential id → list of agent names that use it.
+ * Cross-references tools (which link credential via id) with agents
+ * that have agent_tools referencing those tools.
+ *
+ * Since we don't have an account-level agent_tools endpoint, we
+ * approximate by checking which tools are linked to credentials and
+ * showing credential-level stats.
+ */
+function useCredentialAgentSummary(
+  credentials: ToolCredential[],
+  tools: Tool[],
+  agents: Agent[],
+) {
+  return useMemo(() => {
+    // Build a set of tool IDs that have credentials
+    const toolIdsWithCredentials = new Set(
+      credentials.map((c) => c.id_tool).filter(Boolean),
+    );
+
+    // Count how many credentials are linked to tools that agents could use
+    const linkedCount = credentials.filter(
+      (c) => c.id_tool && toolIdsWithCredentials.has(c.id_tool),
+    ).length;
+
+    return {
+      totalCredentials: credentials.length,
+      linkedToTools: linkedCount,
+      totalAgents: agents.length,
+      totalTools: tools.length,
+    };
+  }, [credentials, tools, agents]);
+}
+
+export function IntegrationsManagementPage({
+  config,
+  gagentsApiUrl,
+  onConnect,
+  title = "Integrações e Credenciais",
+  subtitle = "Gerencie todas as integrações e credenciais da conta.",
+}: IntegrationsManagementPageProps) {
+  const { data: credentialsData, isLoading: credentialsLoading } =
+    useToolCredentials(config);
+  const { data: agentsData } = useAgents(config);
+  const { data: toolsData } = useTools(config);
+  const [createOpen, setCreateOpen] = useState(false);
+
+  const credentials = credentialsData?.data || [];
+  const agents: Agent[] = agentsData?.data || [];
+  const tools: Tool[] = toolsData?.data || [];
+
+  const summary = useCredentialAgentSummary(credentials, tools, agents);
+
+  return (
+    <div className="flex flex-col gap-4 p-4 md:p-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-semibold">{title}</h1>
+          <p className="text-sm text-muted-foreground">{subtitle}</p>
+        </div>
+      </div>
+
+      <Tabs defaultValue="integrations" className="w-full">
+        <TabsList>
+          <TabsTrigger value="integrations" className="gap-2">
+            <Plug className="h-4 w-4" />
+            Integrações
+          </TabsTrigger>
+          <TabsTrigger value="credentials" className="gap-2">
+            <KeyRound className="h-4 w-4" />
+            Credenciais
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="integrations" className="mt-4">
+          <IntegrationsTab
+            config={config}
+            agentId={null}
+            onConnect={onConnect ?? (() => {})}
+          />
+        </TabsContent>
+
+        <TabsContent value="credentials" className="mt-4">
+          {/* Summary bar */}
+          {!credentialsLoading && (
+            <div className="flex items-center gap-4 rounded-lg border bg-muted/50 px-4 py-3 mb-4">
+              <Info className="h-4 w-4 text-muted-foreground shrink-0" />
+              <div className="flex flex-wrap items-center gap-3 text-sm">
+                <span>
+                  <Badge variant="secondary" className="mr-1">
+                    {summary.totalCredentials}
+                  </Badge>
+                  {summary.totalCredentials === 1
+                    ? "credencial configurada"
+                    : "credenciais configuradas"}
+                </span>
+                <span className="text-muted-foreground">|</span>
+                <span>
+                  <Badge variant="secondary" className="mr-1">
+                    {summary.linkedToTools}
+                  </Badge>
+                  {summary.linkedToTools === 1
+                    ? "vinculada a ferramentas"
+                    : "vinculadas a ferramentas"}
+                </span>
+                <span className="text-muted-foreground">|</span>
+                <span>
+                  <Badge variant="secondary" className="mr-1">
+                    {summary.totalAgents}
+                  </Badge>
+                  {summary.totalAgents === 1
+                    ? "agente na conta"
+                    : "agentes na conta"}
+                </span>
+              </div>
+            </div>
+          )}
+
+          <div className="flex items-center justify-end mb-4">
+            <Button onClick={() => setCreateOpen(true)} size="sm">
+              <Plus className="mr-2 h-4 w-4" />
+              Nova Credencial
+            </Button>
+          </div>
+
+          <ToolCredentialsForm
+            config={config}
+            gagentsApiUrl={gagentsApiUrl}
+            credentials={credentials}
+            isLoading={credentialsLoading}
+            createOpen={createOpen}
+            onCreateOpenChange={setCreateOpen}
+          />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

package/src/types/capabilities.ts

@@ -0,0 +1,32 @@
+export interface CapabilityOperation {
+    slug: string;
+    label: string;
+    description: string;
+}
+
+export interface CapabilityModule {
+    slug: string;
+    label: string;
+    description: string;
+    operations: string[];
+}
+
+export interface CapabilityCategory {
+    slug: string;
+    label: string;
+    modules: CapabilityModule[];
+}
+
+export interface CapabilitiesResponse {
+    product: string | null;
+    categories: CapabilityCategory[];
+}
+
+export interface AgentCapability {
+    module: string;
+    operations: string[];
+}
+
+export interface AgentCapabilitiesPayload {
+    capabilities: AgentCapability[];
+}

package/src/types/index.ts

@@ -154,3 +154,13 @@ export interface AvailabilityResult {
   conflicts: AvailabilityConflict[];
   failed_providers: Array<{ provider: string; error: string }>;
 }
+
+// Capabilities
+export type {
+  CapabilityOperation,
+  CapabilityModule,
+  CapabilityCategory,
+  CapabilitiesResponse,
+  AgentCapability,
+  AgentCapabilitiesPayload,
+} from "./capabilities";