@greatapps/greatagents-ui 0.3.5 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/greatagents-ui",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "Shared agents UI components for Great platform",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/agents/agent-form-dialog.tsx

@@ -15,12 +15,14 @@ import {
 } from "@greatapps/greatauth-ui/ui";
 import { Loader2 } from "lucide-react";
 import { toast } from "sonner";
+import { ImageCropUpload } from "@greatapps/greatauth-ui";
 
 interface AgentFormDialogProps {
   config: GagentsHookConfig;
   open: boolean;
   onOpenChange: (open: boolean) => void;
   agent?: Agent;
+  idAccount?: string | number | null;
 }
 
 interface FormState {
@@ -68,6 +70,7 @@ export function AgentFormDialog({
   open,
   onOpenChange,
   agent,
+  idAccount,
 }: AgentFormDialogProps) {
   const isEditing = !!agent;
   const createAgent = useCreateAgent(config);
@@ -139,19 +142,17 @@ export function AgentFormDialog({
           </DialogTitle>
         </DialogHeader>
         <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="agent-photo">Foto (URL)</Label>
-            <Input
-              id="agent-photo"
-              name="photo"
-              value={form.photo}
-              onChange={(e) => updateField("photo", e.target.value)}
-              placeholder="https://exemplo.com/foto.jpg"
+          <div className="flex justify-center">
+            <ImageCropUpload
+              value={form.photo || null}
+              onChange={(url) => updateField("photo", url)}
+              onRemove={() => updateField("photo", "")}
+              entityType="agents"
+              entityId={agent?.id}
+              idAccount={typeof idAccount === "string" ? Number(idAccount) : (idAccount ?? Number(config.accountId) ?? 0)}
+              name={form.title || null}
               disabled={isPending}
             />
-            <p className="text-xs text-muted-foreground">
-              URL da imagem de avatar do agente
-            </p>
           </div>
           <div className="space-y-2">
             <Label htmlFor="agent-title">Nome do Agente *</Label>

package/src/components/agents/agent-tabs.tsx

@@ -3,7 +3,6 @@ import type { GagentsHookConfig } from "../../hooks/types";
 import type { IntegrationCardData } from "../../hooks/use-integrations";
 import type { WizardIntegrationMeta } from "../capabilities/types";
 import type { ConfigOption } from "../capabilities/wizard-steps/config-step";
-import { AgentToolsList } from "./agent-tools-list";
 import { AgentObjectivesList } from "./agent-objectives-list";
 import { AgentPromptEditor } from "./agent-prompt-editor";
 import { AgentConversationsPanel } from "../conversations/agent-conversations-panel";
@@ -14,7 +13,7 @@ import {
   TabsTrigger,
   TabsContent,
 } from "@greatapps/greatauth-ui/ui";
-import { Wrench, Target, FileText, MessageCircle, Blocks } from "lucide-react";
+import { Target, FileText, MessageCircle, Blocks } from "lucide-react";
 
 interface AgentTabsProps {
   agent: Agent;
@@ -52,10 +51,6 @@ export function AgentTabs({
           <Target aria-hidden="true" className="h-3.5 w-3.5" />
           Objetivos
         </TabsTrigger>
-        <TabsTrigger value="ferramentas" className="flex items-center gap-1.5">
-          <Wrench aria-hidden="true" className="h-3.5 w-3.5" />
-          Ferramentas
-        </TabsTrigger>
         <TabsTrigger value="capacidades" className="flex items-center gap-1.5">
           <Blocks aria-hidden="true" className="h-3.5 w-3.5" />
           Capacidades
@@ -74,10 +69,6 @@ export function AgentTabs({
         <AgentObjectivesList agent={agent} config={config} />
       </TabsContent>
 
-      <TabsContent value="ferramentas" className="mt-4">
-        <AgentToolsList agent={agent} config={config} />
-      </TabsContent>
-
       <TabsContent value="capacidades" className="mt-4">
         <AgentCapabilitiesPage
           config={config}

package/src/components/agents/agent-tools-list.tsx

@@ -70,10 +70,15 @@ export function AgentToolsList({ agent, config }: AgentToolsListProps) {
   const allCredentials: ToolCredential[] = credentialsData?.data || [];
 
   const agentTools = agentToolsData?.data || [];
-  const allTools = allToolsData?.data || [];
+  const allTools = (allToolsData?.data || []).filter((t: Tool) => !t.slug?.startsWith("gclinic_"));
   const assignedToolIds = new Set(agentTools.map((at) => at.id_tool));
-  const availableTools = allTools.filter((t) => !assignedToolIds.has(t.id));
-  const filteredAvailable = availableTools.filter((t) =>
+  // Filter out internal gclinic_* tools from assigned tools display
+  const visibleAgentTools = agentTools.filter((at) => {
+    const tool = allTools.find((t: Tool) => t.id === at.id_tool);
+    return !tool || !tool.slug?.startsWith("gclinic_");
+  });
+  const availableTools = allTools.filter((t: Tool) => !assignedToolIds.has(t.id));
+  const filteredAvailable = availableTools.filter((t: Tool) =>
     t.name.toLowerCase().includes(search.toLowerCase()),
   );
 
@@ -170,7 +175,7 @@ export function AgentToolsList({ agent, config }: AgentToolsListProps) {
     <div className="space-y-4 p-4">
       <div className="flex items-center justify-between">
         <h3 className="text-sm font-medium text-muted-foreground">
-          {agentTools.length} ferramenta{agentTools.length !== 1 ? "s" : ""} associada{agentTools.length !== 1 ? "s" : ""}
+          {visibleAgentTools.length} ferramenta{visibleAgentTools.length !== 1 ? "s" : ""} associada{visibleAgentTools.length !== 1 ? "s" : ""}
         </h3>
         <Popover open={addOpen} onOpenChange={setAddOpen}>
           <PopoverTrigger asChild>
@@ -217,7 +222,7 @@ export function AgentToolsList({ agent, config }: AgentToolsListProps) {
         </Popover>
       </div>
 
-      {agentTools.length === 0 ? (
+      {visibleAgentTools.length === 0 ? (
         <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
           <Wrench className="mb-2 h-8 w-8 text-muted-foreground" />
           <p className="text-sm text-muted-foreground">
@@ -226,7 +231,7 @@ export function AgentToolsList({ agent, config }: AgentToolsListProps) {
         </div>
       ) : (
         <div className="space-y-2">
-          {agentTools.map((agentTool) => {
+          {visibleAgentTools.map((agentTool) => {
             const tool = getToolInfo(agentTool.id_tool);
             return (
               <div

package/src/components/capabilities/capabilities-tab.tsx

@@ -337,7 +337,7 @@ export function CapabilitiesTab({ config, agentId }: CapabilitiesTabProps) {
                   </Badge>
                 </div>
               </AccordionTrigger>
-              <AccordionContent className="pb-3">
+              <AccordionContent className="pb-3 !h-auto">
                 <div className="space-y-1">
                   {cat.modules.map((mod) => {
                     const enabledOps = localState.get(mod.slug);

package/src/components/capabilities/wizard-steps/credentials-step.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { CheckCircle2, Loader2, AlertCircle, Shield } from "lucide-react";
-import { Button, Input, Label } from "@greatapps/greatauth-ui/ui";
+import { CheckCircle2, Loader2, AlertCircle, Shield, Info } from "lucide-react";
+import { Button, Input, Label, Tooltip, TooltipTrigger, TooltipContent } from "@greatapps/greatauth-ui/ui";
 import type { IntegrationDefinition } from "../../../data/integrations-registry";
 import type { WizardIntegrationMeta, OAuthStatus, OAuthResult } from "../types";
 
@@ -14,6 +14,8 @@ interface CredentialsStepProps {
   onApiKeyChange: (value: string) => void;
   onStartOAuth: () => void;
   isReconnect?: boolean;
+  /** When true, the OAuth authorize endpoint is available on the backend. */
+  oauthConfigured?: boolean;
 }
 
 export function CredentialsStep({
@@ -25,6 +27,7 @@ export function CredentialsStep({
   onApiKeyChange,
   onStartOAuth,
   isReconnect = false,
+  oauthConfigured = false,
 }: CredentialsStepProps) {
   if (integration.authType === "oauth2") {
     return (
@@ -35,6 +38,7 @@ export function CredentialsStep({
         oauthResult={oauthResult}
         onStartOAuth={onStartOAuth}
         isReconnect={isReconnect}
+        oauthConfigured={oauthConfigured}
       />
     );
   }
@@ -53,6 +57,7 @@ function OAuthCredentials({
   oauthResult,
   onStartOAuth,
   isReconnect,
+  oauthConfigured,
 }: {
   integration: IntegrationDefinition;
   meta: WizardIntegrationMeta;
@@ -60,6 +65,7 @@ function OAuthCredentials({
   oauthResult: OAuthResult | null;
   onStartOAuth: () => void;
   isReconnect: boolean;
+  oauthConfigured: boolean;
 }) {
   const providerLabel = meta.providerLabel || integration.name;
 
@@ -74,15 +80,51 @@ function OAuthCredentials({
         </p>
       </div>
 
+      {/* OAuth not configured notice */}
+      {!oauthConfigured && oauthStatus === "idle" && (
+        <div className="flex items-start gap-3 rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-900 dark:bg-amber-950/30">
+          <Info
+            aria-hidden="true"
+            className="mt-0.5 h-5 w-5 shrink-0 text-amber-600 dark:text-amber-400"
+          />
+          <div className="space-y-1">
+            <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
+              Configuração necessária
+            </p>
+            <p className="text-xs text-amber-700 dark:text-amber-300">
+              A integração com {providerLabel} requer configuração pelo
+              administrador do sistema. Entre em contato com o suporte para
+              ativar esta funcionalidade.
+            </p>
+          </div>
+        </div>
+      )}
+
       {/* OAuth status area */}
       <div className="flex flex-col items-center gap-4 rounded-lg border p-6">
         {oauthStatus === "idle" && (
-          <Button onClick={onStartOAuth} size="lg" className="gap-2">
-            {meta.icon}
-            {isReconnect
-              ? `Reconectar com ${providerLabel}`
-              : `Conectar com ${providerLabel}`}
-          </Button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span tabIndex={!oauthConfigured ? 0 : undefined}>
+                <Button
+                  onClick={onStartOAuth}
+                  size="lg"
+                  className="gap-2"
+                  disabled={!oauthConfigured}
+                >
+                  {meta.icon}
+                  {isReconnect
+                    ? `Reconectar com ${providerLabel}`
+                    : `Conectar com ${providerLabel}`}
+                </Button>
+              </span>
+            </TooltipTrigger>
+            {!oauthConfigured && (
+              <TooltipContent>
+                Integração OAuth ainda não configurada no servidor
+              </TooltipContent>
+            )}
+          </Tooltip>
         )}
 
         {oauthStatus === "waiting" && (

package/src/components/tools/tool-credentials-form.tsx

@@ -185,7 +185,7 @@ export function ToolCredentialsForm({
   const updateMutation = useUpdateToolCredential(config);
   const deleteMutation = useDeleteToolCredential(config);
   const { data: toolsData } = useTools(config);
-  const tools: Tool[] = toolsData?.data || [];
+  const tools: Tool[] = (toolsData?.data || []).filter((t: Tool) => !t.slug?.startsWith("gclinic_"));
 
   const [search, setSearch] = useState("");
   const [internalCreateOpen, setInternalCreateOpen] = useState(false);
@@ -209,17 +209,31 @@ export function ToolCredentialsForm({
 
   const [removeTarget, setRemoveTarget] = useState<ToolCredential | null>(null);
 
+  // Build a set of internal tool IDs to exclude from credentials display
+  const internalToolIds = useMemo(() => {
+    const allRawTools: Tool[] = toolsData?.data || [];
+    return new Set(
+      allRawTools
+        .filter((t: Tool) => t.slug?.startsWith("gclinic_"))
+        .map((t: Tool) => t.id),
+    );
+  }, [toolsData]);
+
   const filteredCredentials = useMemo(() => {
-    if (!search) return credentials;
+    // Exclude credentials linked to internal gclinic_* tools
+    const visible = credentials.filter(
+      (cred) => !cred.id_tool || !internalToolIds.has(cred.id_tool),
+    );
+    if (!search) return visible;
     const term = search.toLowerCase();
-    return credentials.filter((cred) => {
+    return visible.filter((cred) => {
       const toolName = tools.find((t) => t.id === cred.id_tool)?.name || "";
       return (
         (cred.label || "").toLowerCase().includes(term) ||
         toolName.toLowerCase().includes(term)
       );
     });
-  }, [credentials, search, tools]);
+  }, [credentials, search, tools, internalToolIds]);
 
   const columns = useColumns(
     tools,

package/src/components/tools/tools-table.tsx

@@ -145,8 +145,9 @@ export function ToolsTable({ onEdit, config }: ToolsTableProps) {
   const deleteTool = useDeleteTool(config);
   const [deleteId, setDeleteId] = useState<number | null>(null);
 
-  const tools = data?.data || [];
-  const total = data?.total || 0;
+  const rawTools = data?.data || [];
+  const tools = rawTools.filter((t: Tool) => !t.slug?.startsWith("gclinic_"));
+  const total = tools.length;
 
   const columns = useColumns(
     (tool) => onEdit(tool),